/* =============================================================
   FNO'FORM 2026 · 30e Congrès Scientifique International FNO
   TOUT est scopé sous .template-fnoform-2026 pour ne jamais
   interférer avec le reste de Webvolution.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

/* =============================================================
   VARIABLES — scopées au template, pas sur :root
   ============================================================= */

.template-fnoform-2026 {
    --fno-navy     : #0a2456;
    --fno-blue     : #0a54a3;
    --fno-sky      : #9ad9f3;
    --fno-green    : #209f73;
    --fno-yellow   : #ffeb94;
    --fno-ink      : #1b1d2f;
    --fno-muted    : #6b6f85;
    --fno-page-bg  : #f4f7fc;
    --fno-card-bg  : #ffffff;
    --fno-shadow-lg: 0 30px 70px rgba(10, 36, 86, 0.13);
    --fno-shadow-sm: 0 10px 30px rgba(10, 84, 163, 0.08);
    --fno-r-lg     : 28px;
    --fno-r-md     : 18px;
    --fno-r-sm     : 12px;

    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    background : linear-gradient(135deg, rgba(10,36,86,.05), rgba(154,217,243,.07)) var(--fno-page-bg);
    color      : var(--fno-ink);
    line-height: 1.6;
}

/* =============================================================
   ORBS · container scopé, position fixed hors stacking context
   ============================================================= */

.congress-orbs-layer {
    position      : fixed;
    inset         : 0;
    pointer-events: none;
    z-index       : 0;
    overflow      : hidden;
}

.congress-orb {
    position     : absolute;
    border-radius: 50%;
    filter       : blur(50px);
    opacity      : 0.28;
}

.congress-orb-1 {
    width : 480px; height: 480px;
    top   : -80px; right: -100px;
    background: radial-gradient(circle, rgba(154,217,243,.8), transparent 70%);
}

.congress-orb-2 {
    width : 400px; height: 400px;
    bottom: -120px; left: -80px;
    background: radial-gradient(circle, rgba(10,36,86,.5), transparent 70%);
}

/* =============================================================
   HEADER
   ============================================================= */

.template-fnoform-2026 .congress-header {
    background  : #fff;
    border-bottom: 1px solid color-mix(in srgb, #9ad9f3 35%, white) !important;
}

/* =============================================================
   HERO
   ============================================================= */

.template-fnoform-2026 .congress-hero { position: relative; max-height: 400px; overflow: hidden; }
.template-fnoform-2026 .congress-hero-image { width: 100%; height: 400px; object-fit: cover; object-position: left center; }

.template-fnoform-2026 .congress-hero-overlay {
    position  : absolute; inset: 0;
    background: linear-gradient(135deg, rgba(10,36,86,.65) 0%, rgba(10,84,163,.35) 60%, transparent 100%);
}

/* Bord du hero : pas de coupe en biais → hero rectangulaire net. */
.template-fnoform-2026 .congress-hero-edge { display: none; }

/* =============================================================
   FOOTER
   ============================================================= */

.template-fnoform-2026 .congress-footer {
    background  : #0a2456;
    color       : rgba(255,255,255,.7);
    border-color: #0a54a3 !important;
}
.template-fnoform-2026 .congress-footer a       { color: #9ad9f3; }
.template-fnoform-2026 .congress-footer a:hover  { color: #fff; }

/* =============================================================
   ANIMATIONS D'ENTRÉE — strictement scopées
   ============================================================= */

.template-fnoform-2026 [data-animate] {
    opacity         : 0;
    transform       : translateY(20px);
    transition      : opacity .55s ease, transform .55s ease;
    transition-delay: var(--delay, 0ms);
}

.template-fnoform-2026 [data-animate].is-visible {
    opacity  : 1;
    transform: translateY(0);
}

/* =============================================================
   MOTIF HEXAGONAL
   ============================================================= */

.template-fnoform-2026 .congress-hex-bg { position: relative; overflow: hidden; }

.template-fnoform-2026 .congress-hex-bg::before {
    content         : "";
    position        : absolute;
    inset           : 0;
    pointer-events  : none;
    z-index         : 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cpolygon points='60,2 116,32 116,72 60,102 4,72 4,32' fill='none' stroke='%239ad9f3' stroke-width='1.2' opacity='0.18'/%3E%3C/svg%3E");
    background-size : 120px 104px;
    opacity         : 0.7;
}

.template-fnoform-2026 .congress-hex-bg > * { position: relative; z-index: 1; }

/* =============================================================
   COMPOSANTS FNO
   ============================================================= */

.template-fnoform-2026 .fno-card {
    background   : var(--fno-card-bg);
    border-radius: var(--fno-r-lg);
    border       : 1px solid rgba(10,84,163,.07);
    box-shadow   : var(--fno-shadow-sm);
    overflow     : hidden;
}

.template-fnoform-2026 .fno-card-glass {
    background     : rgba(255,255,255,.72);
    backdrop-filter: blur(8px);
    border-radius  : var(--fno-r-lg);
    border         : 1px solid rgba(10,84,163,.08);
    box-shadow     : var(--fno-shadow-lg);
}

.template-fnoform-2026 .fno-eyebrow {
    font-size     : .7rem;
    font-weight   : 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color         : var(--fno-muted);
}
.template-fnoform-2026 .fno-eyebrow--primary { color: var(--fno-blue); }

/* Chips */
.template-fnoform-2026 .fno-chip {
    display      : inline-flex;
    align-items  : center;
    gap          : .4rem;
    padding      : .4rem .9rem;
    border-radius: 999px;
    font-size    : .8125rem;
    font-weight  : 500;
    background   : rgba(10,84,163,.07);
    color        : var(--fno-blue);
}
.template-fnoform-2026 .fno-chip--active { background: var(--fno-blue); color: #fff; }
.template-fnoform-2026 .fno-chip--sky    { background: color-mix(in srgb, #9ad9f3 20%, white); color: #0a2456; }

/* Statuts d'émargement par session */
.template-fnoform-2026 .fno-chip--upcoming { background: color-mix(in srgb, #9ad9f3 20%, white); color: #0a2456; }
.template-fnoform-2026 .fno-chip--open {
    background: color-mix(in srgb, #e8a13a 20%, white); color: #7a4a00; font-weight: 600;
    border: 1px solid color-mix(in srgb, #e8a13a 45%, white);
}
.template-fnoform-2026 .fno-chip--present {
    background: color-mix(in srgb, var(--fno-green) 18%, white);
    color: color-mix(in srgb, var(--fno-green) 80%, black); font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--fno-green) 42%, white);
}
.template-fnoform-2026 .fno-chip--missed {
    background: color-mix(in srgb, #e5484d 12%, white); color: #b42318; font-weight: 600;
    border: 1px solid color-mix(in srgb, #e5484d 32%, white);
}
.template-fnoform-2026 .fno-chip .chip-ico { width: 15px; height: 15px; flex-shrink: 0; }

/* Pulse dot */
.template-fnoform-2026 .fno-pulse-dot {
    width        : 8px; height: 8px;
    border-radius: 50%;
    background   : var(--fno-green);
    animation    : fnoPulse 1.8s infinite;
}
.template-fnoform-2026 .fno-pulse-dot--amber { background: #e8a13a; }

@keyframes fnoPulse {
    0%, 100% { transform: scale(.85); opacity: .7; }
    50%      { transform: scale(1.25); opacity: 1; }
}

/* Boutons */
.template-fnoform-2026 .fno-btn {
    display        : inline-flex;
    align-items    : center;
    gap            : .5rem;
    padding        : .65rem 1.5rem;
    border-radius  : 999px;
    font-weight    : 600;
    font-size      : .9rem;
    border         : none;
    cursor         : pointer;
    transition     : transform .2s ease, box-shadow .2s ease;
    text-decoration: none;
}
.template-fnoform-2026 .fno-btn--primary { background: var(--fno-blue); color:#fff; box-shadow: 0 10px 30px rgba(10,84,163,.3); }
.template-fnoform-2026 .fno-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(10,84,163,.35); }
.template-fnoform-2026 .fno-btn--green  { background: var(--fno-green); color:#fff; box-shadow: 0 10px 30px rgba(32,159,115,.3); }
.template-fnoform-2026 .fno-btn--green:hover  { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(32,159,115,.35); }
.template-fnoform-2026 .fno-btn--ghost  { background: rgba(10,84,163,.07); color: var(--fno-blue); }
.template-fnoform-2026 .fno-btn--ghost:hover  { background: rgba(10,84,163,.12); transform: translateY(-1px); }
.template-fnoform-2026 .fno-btn--signed { background: color-mix(in srgb, #209f73 12%, white); color: color-mix(in srgb, #209f73 70%, black); box-shadow: none; cursor: default; }
.template-fnoform-2026 .fno-btn--inactive { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; box-shadow: none; }

/* Player */
.template-fnoform-2026 .virtual-player-wrap {
    position      : relative;
    padding-bottom: 56.25%;
    height        : 0;
    background    : #0a2456;
    border-radius : var(--fno-r-lg);
    overflow      : hidden;
    box-shadow    : var(--fno-shadow-lg);
}
.template-fnoform-2026 .virtual-player-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Plein écran sur le wrapper (pas l'iframe) → les contrôles restent visibles */
.template-fnoform-2026 .virtual-player-wrap:fullscreen { padding-bottom:0; height:100%; border-radius:0; }
.template-fnoform-2026 .virtual-player-wrap:-webkit-full-screen { padding-bottom:0; height:100%; border-radius:0; }

/* Contrôles en overlay sur le player (émargement + plein écran), visibles aussi en plein écran */
.template-fnoform-2026 .player-controls {
    position:absolute; top:12px; right:12px; z-index:6;
    display:flex; gap:.5rem; align-items:center;
}
.template-fnoform-2026 .player-ctrl-btn {
    display:inline-flex; align-items:center; gap:.4rem; border:0; cursor:pointer;
    padding:.5rem .85rem; border-radius:9999px; font-size:.8125rem; font-weight:600;
    color:#fff; background:rgba(10,36,86,.78); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    box-shadow:0 4px 14px rgba(0,0,0,.18); transition:transform .15s, background .15s;
}
.template-fnoform-2026 .player-ctrl-btn:hover { transform:translateY(-1px); }
.template-fnoform-2026 .player-ctrl-btn svg { width:15px; height:15px; }
.template-fnoform-2026 .player-ctrl-btn--green  { background:var(--fno-green); }
.template-fnoform-2026 .player-ctrl-btn--signed { background:rgba(32,159,115,.9); cursor:default; }

/* ── Émargement : attirer l'œil (le bouton n'est dispo que pendant la session) ── */
@keyframes fno-emarge-pulse {
    0%   { box-shadow:0 0 0 0 rgba(32,159,115,.55); }
    70%  { box-shadow:0 0 0 14px rgba(32,159,115,0); }
    100% { box-shadow:0 0 0 0 rgba(32,159,115,0); }
}
@keyframes fno-emarge-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
@keyframes fno-emarge-bob { 0%,100% { transform:scale(1); } 50% { transform:scale(1.04); } }
@keyframes fno-dot-pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(.8); } }

/* Carte (hors player) : anneau pulsé complet */
.template-fnoform-2026 .fno-btn--green {
    animation: fno-emarge-pulse 1.5s ease-out infinite, fno-emarge-bob 1.5s ease-in-out infinite;
}
/* Overlay (dans le player) : pas d'animation scale → animer un scale sur un bouton à
   backdrop-filter crée un liseré clair au ré-échantillonnage du flou. La pastille ambre
   du badge suffit à attirer l'œil. */

/* Badge "Émargement ouvert" en overlay (à côté du bouton, visible en plein écran) */
/* Badge "Émargement en cours" du lecteur : même identité ambre que la chip de statut open */
.template-fnoform-2026 .ov-emarge-badge {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.45rem .75rem; border-radius:9999px; font-size:.75rem; font-weight:700;
    background:rgba(255,255,255,.94); color:#7a4a00;
    box-shadow:0 4px 14px rgba(0,0,0,.2); animation: fno-emarge-in .4s ease both;
}
.template-fnoform-2026 .ov-emarge-badge .dot {
    width:8px; height:8px; border-radius:50%; background:#e8a13a;
    animation: fno-dot-pulse 1.2s ease-in-out infinite;
}

/* Notice explicative dans la carte d'émargement */
.template-fnoform-2026 .emarge-notice {
    display:flex; align-items:flex-start; gap:.6rem; margin-top:1rem;
    padding:.75rem 1rem; border-radius:var(--fno-r-md);
    background:color-mix(in srgb, var(--fno-green) 10%, white);
    border-left:3px solid var(--fno-green); color:#0a2456;
    font-size:.85rem; line-height:1.5; animation: fno-emarge-in .4s ease both;
}
.template-fnoform-2026 .emarge-notice svg { width:20px; height:20px; color:var(--fno-green); flex-shrink:0; margin-top:1px; }

/* Variante "émargement manqué" (rouge) */
.template-fnoform-2026 .emarge-notice--missed {
    background:color-mix(in srgb, #e5484d 9%, white);
    border-left-color:#e5484d; color:#7a1d1a;
}
.template-fnoform-2026 .emarge-notice--missed svg { color:#b42318; }

/* PDF items */
.template-fnoform-2026 .pdf-item {
    display      : flex;
    align-items  : center;
    gap          : 1rem;
    padding      : 1rem 1.25rem;
    border-radius: var(--fno-r-md);
    border       : 1px solid rgba(10,84,163,.08);
    background   : #fff;
    transition   : box-shadow .2s, border-color .2s, transform .2s;
}
.template-fnoform-2026 .pdf-item:hover { border-color: color-mix(in srgb, #9ad9f3 50%, white); box-shadow: var(--fno-shadow-sm); transform: translateY(-1px); }
.template-fnoform-2026 .pdf-item-icon  { flex-shrink:0; width:42px; height:42px; border-radius:var(--fno-r-sm); background:rgba(10,84,163,.07); display:flex; align-items:center; justify-content:center; color:var(--fno-blue); }

/* Onglets Ressources */
.template-fnoform-2026 .res-tabs {
    display:flex; flex-wrap:wrap; gap:.25rem; margin:0 0 1.25rem;
    border-bottom:1px solid rgba(10,84,163,.12);
}
.template-fnoform-2026 .res-tab {
    appearance:none; border:0; background:transparent; cursor:pointer;
    padding:.6rem .9rem; font-size:.85rem; font-weight:600; color:var(--muted,#6b6f85);
    border-bottom:2px solid transparent; margin-bottom:-1px;
}
.template-fnoform-2026 .res-tab:first-child { padding-left:0; }
.template-fnoform-2026 .res-tab:hover { color:var(--fno-navy,#0a2456); }
.template-fnoform-2026 .res-tab.is-active { color:var(--fno-blue,#0a54a3); border-bottom-color:var(--fno-blue,#0a54a3); }

/* Sous-catégories (titres de section dans un onglet) */
.template-fnoform-2026 .res-section {
    font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
    color:var(--fno-blue,#0a54a3); margin:1.25rem 0 .6rem;
}
.template-fnoform-2026 .res-panel > .res-section:first-child { margin-top:.25rem; }
.template-fnoform-2026 .res-panel .pdf-item + .res-section { margin-top:1.5rem; }

/* Liseuse : lecteur PDF intégré plein écran */
.template-fnoform-2026 .pdf-reader { position:fixed; inset:0; z-index:200; background:#0a2456; display:flex; flex-direction:column; }
.template-fnoform-2026 .pdf-reader[hidden] { display:none; }
.template-fnoform-2026 .pdf-reader-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem 1rem; background:#0a2456; color:#fff; }
.template-fnoform-2026 .pdf-reader-title { font-weight:600; font-size:.9rem; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.template-fnoform-2026 .pdf-reader iframe { flex:1; width:100%; border:0; background:#525659; }
.template-fnoform-2026 .pdf-reader .fno-btn--ghost { background:rgba(255,255,255,.15); color:#fff; }
.template-fnoform-2026 .pdf-reader .fno-btn--ghost:hover { background:rgba(255,255,255,.25); }

/* Dashboard cards */
.template-fnoform-2026 .fno-nav-card { display:flex; flex-direction:column; gap:.75rem; padding:1.75rem; border-radius:var(--fno-r-lg); text-decoration:none; transition:transform .2s, box-shadow .2s; }
.template-fnoform-2026 .fno-nav-card:hover { transform: translateY(-3px); }
.template-fnoform-2026 .fno-nav-card--primary { background: linear-gradient(135deg, #0a54a3, #0a2456); color:#fff; box-shadow: 0 20px 50px rgba(10,84,163,.25); }
.template-fnoform-2026 .fno-nav-card--light   { background:#fff; color:var(--fno-ink); border:1px solid rgba(10,84,163,.08); box-shadow:var(--fno-shadow-sm); }
.template-fnoform-2026 .fno-nav-card--light:hover { border-color: color-mix(in srgb, #9ad9f3 45%, white); box-shadow: var(--fno-shadow-lg); }