/* ============================================================
   FNMS — Espace adherent
   Feuille unique : navigation, dashboard, docutheque, sondages,
   videos, profil, referent regional.
   Palette FNMS inchangee : navy #003B7A, rouge #E30613.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Serif+Display&display=swap');

:root{
  --navy:#003B7A; --navy-700:#00305F; --navy-900:#001E3D; --red:#E30613;
  --ink:#0E1B2A; --ink-2:#3D4A5C; --slate:#6B7688;
  --line:#E6E4DF; --line-2:#F0EEE9; --stone:#F7F6F3; --mist:#EFEDE8; --white:#fff;
  --ok:#0F7B4F; --ok-bg:#E8F6EF;
  --warn:#9A5B00; --warn-bg:#FDF3E3;
  --danger:#A81721; --danger-bg:#FDECEE;
  --info:#1B4F8A; --info-bg:#EAF1FA;
  --r-sm:6px; --r:10px; --r-lg:14px;
  --sh-1:0 1px 2px rgba(14,27,42,.04), 0 1px 3px rgba(14,27,42,.05);
  --sh-2:0 2px 4px rgba(14,27,42,.04), 0 8px 24px rgba(14,27,42,.07);
  --nav-h:60px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--stone);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
}
a{color:inherit}
img{max-width:100%}
/* Filet de securite : les icones inline sans attribut fill se dessinaient
   en aplat noir. Les traits suivent la couleur du texte. */
svg:not([fill]){fill:none;stroke:currentColor}

/* ══════════════════ NAVIGATION ══════════════════ */
nav{
  position:sticky;top:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:0 26px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-logo{display:flex;align-items:center;gap:11px;flex-shrink:0;text-decoration:none}
.nav-logo img{height:32px;width:auto}
.nav-wordmark{
  font-size:.7rem;font-weight:600;color:var(--slate);
  letter-spacing:.08em;text-transform:uppercase;padding-left:11px;
  border-left:1px solid var(--line);
}
.nav-right{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.nav-pill{
  padding:7px 13px;border-radius:var(--r-sm);font-size:.81rem;font-weight:500;
  color:var(--ink-2);text-decoration:none;transition:.15s;white-space:nowrap;
}
.nav-pill:hover{background:var(--stone);color:var(--navy)}
.nav-pill.active{background:var(--info-bg);color:var(--navy);font-weight:600}
.nav-pill.accent{color:var(--red);margin-left:6px}
.nav-pill.accent:hover{background:var(--danger-bg);color:var(--red)}

/* ══════════════════ MISE EN PAGE ══════════════════ */
.page{max-width:1080px;margin:0 auto;padding:30px 26px 70px}
.page-narrow{max-width:720px;margin:0 auto;padding:30px 26px 70px}

.hero{background:var(--white);border-bottom:1px solid var(--line)}
.hero-inner{max-width:1080px;margin:0 auto;padding:32px 26px}
.hero h1{font-size:1.55rem;font-weight:600;letter-spacing:-.024em;line-height:1.15}
.hero p{font-size:.87rem;color:var(--slate);margin-top:6px}

.section-label{
  display:flex;align-items:center;gap:14px;
  font-size:.65rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate);margin:34px 0 15px;
}
.section-label::after{content:'';flex:1;height:1px;background:var(--line)}
.section-label:first-child{margin-top:0}

/* ══════════════════ SURFACES ══════════════════ */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.card-header{
  padding:15px 20px;border-bottom:1px solid var(--line-2);
  font-size:.88rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);
}
.card-body{padding:20px}

/* ══════════════════ BOUTONS ══════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 18px;border-radius:var(--r-sm);border:1px solid transparent;
  font-family:inherit;font-size:.84rem;font-weight:500;cursor:pointer;
  text-decoration:none;transition:.15s;white-space:nowrap;
}
.btn-primary{background:var(--navy);color:#fff;width:100%;box-shadow:0 1px 2px rgba(0,59,122,.25)}
.btn-primary:hover{background:var(--navy-700);box-shadow:0 4px 14px rgba(0,59,122,.28);transform:translateY(-1px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-700)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#C10510}
.btn-ghost{background:var(--white);color:var(--ink-2);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy);color:var(--navy);box-shadow:var(--sh-1)}
.btn-sm{padding:7px 13px;font-size:.78rem}

.link{color:var(--navy);text-decoration:none;font-weight:500}
.link:hover{text-decoration:underline}
.link-arrow{display:inline-flex;align-items:center;gap:5px;color:var(--navy);
  text-decoration:none;font-weight:500;font-size:.82rem;transition:gap .15s}
.link-arrow:hover{gap:9px}
.link-arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ══════════════════ FORMULAIRES ══════════════════ */
.fg{margin-bottom:16px;position:relative}
.fg label{
  display:block;font-size:.67rem;font-weight:600;color:var(--slate);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;
}
.fg input,.fg select,.fg textarea{
  width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:inherit;font-size:.87rem;outline:none;background:var(--white);color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,59,122,.1);
}
.fg input[readonly]{background:var(--stone);color:var(--slate)}
.fg small{display:block;font-size:.73rem;color:var(--slate);margin-top:5px}
.req{color:var(--red)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px}

.flash{
  display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-sm);
  background:var(--ok-bg);color:var(--ok);font-size:.83rem;font-weight:500;
  margin-bottom:20px;border-left:3px solid var(--ok);
}
.flash.error{background:var(--danger-bg);color:var(--danger);border-left-color:var(--red)}

/* ══════════════════ BADGES ══════════════════ */
.badge{
  display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:600;
  padding:3px 10px;border-radius:100px;white-space:nowrap;
}
.b-valid{background:var(--ok-bg);color:var(--ok)}
.b-pending{background:var(--warn-bg);color:var(--warn)}
.b-off{background:var(--mist);color:var(--slate)}

/* ══════════════════ ETAT VIDE ══════════════════ */
.empty,.empty-state{
  text-align:center;padding:44px 24px;color:var(--slate);font-size:.86rem;
  background:var(--white);border:1px dashed var(--line);border-radius:var(--r);
}
.empty-icon{font-size:1.9rem;opacity:.35;margin-bottom:10px;display:block}

/* ══════════════════ TABLEAUX ══════════════════ */
.table-wrap{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{width:100%;border-collapse:collapse;min-width:640px}
.table-wrap thead th{
  padding:11px 16px;text-align:left;font-size:.63rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);background:var(--stone);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.table-wrap tbody td{padding:13px 16px;font-size:.84rem;border-bottom:1px solid var(--line-2);vertical-align:middle}
.table-wrap tbody tr:last-child td{border-bottom:0}
.table-wrap tbody tr{transition:background .12s}
.table-wrap tbody tr:hover{background:#FBFAF8}

/* ══════════════════ CARTE D'IDENTITE (dashboard) ══════════════════ */
.id-card{
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-900) 100%);
  border-radius:var(--r-lg);padding:26px 28px;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 10px 34px rgba(0,30,61,.22);
}
.id-card::after{
  content:'';position:absolute;right:-70px;top:-70px;width:250px;height:250px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 68%);
}
.id-left{display:flex;align-items:center;gap:18px;position:relative;z-index:1;min-width:0}
.id-avatar{
  width:60px;height:60px;border-radius:16px;flex-shrink:0;display:grid;place-items:center;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);
  font-family:'DM Serif Display',serif;font-size:1.35rem;color:#fff;
}
.id-name{font-size:1.22rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.id-org{font-size:.84rem;color:rgba(255,255,255,.62);margin-top:3px}
.id-badge{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:.68rem;font-weight:600;letter-spacing:.03em;padding:3px 11px;border-radius:100px;
  background:rgba(255,255,255,.14);color:#fff;
}
.id-badge-dot{width:6px;height:6px;border-radius:50%;background:#4ADE80}
.id-right{display:flex;align-items:center;gap:24px;position:relative;z-index:1;flex-wrap:wrap}
.id-numero{text-align:right}
.id-numero-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.11em;color:rgba(255,255,255,.5)}
.id-numero-value{font-size:1.02rem;font-weight:600;letter-spacing:.01em;margin-top:2px}
.id-attest{
  display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--r-sm);
  background:#fff;color:var(--navy);text-decoration:none;font-size:.8rem;font-weight:600;transition:.15s;
}
.id-attest svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.id-attest:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.2)}

/* ══════════════════ WIDGETS (dashboard) ══════════════════ */
.widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px}
.widget{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 19px;transition:.18s;position:relative;overflow:hidden;
}
.widget:hover{border-color:#D6D2CA;box-shadow:var(--sh-2);transform:translateY(-2px)}
.w-title{
  display:flex;align-items:center;gap:8px;
  font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate);margin-bottom:13px;
}
.w-icon{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;
  background:var(--info-bg);color:var(--navy);font-size:.75rem;
}
.w-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.w-body{font-size:.86rem;color:var(--ink-2);line-height:1.7}
.w-body strong{font-weight:600;color:var(--ink)}
.w-link{
  display:inline-flex;align-items:center;gap:5px;margin-top:13px;white-space:nowrap;
  font-size:.79rem;font-weight:600;color:var(--navy);text-decoration:none;transition:gap .15s;
}
.w-link svg{width:13px;height:13px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.w-link:hover{gap:9px}

/* ══════════════════ SONDAGES ══════════════════ */
.sondage-block,.sondage-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin-bottom:14px;
}
.sondage-question{font-size:1.02rem;font-weight:600;letter-spacing:-.015em;line-height:1.4;margin-bottom:4px}
.sondage-type-tag{
  display:inline-block;font-size:.65rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--navy);background:var(--info-bg);padding:3px 9px;border-radius:100px;margin-bottom:12px;
}
.sondage-date-fin{font-size:.74rem;color:var(--slate)}
.sondage-opts{display:flex;flex-direction:column;gap:8px;margin:16px 0}
.sondage-opt{
  display:flex;align-items:center;gap:11px;padding:12px 15px;
  border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;
  font-size:.87rem;transition:.15s;background:var(--white);
}
.sondage-opt:hover{border-color:var(--navy);background:var(--info-bg)}
.sondage-opt input{accent-color:var(--navy);width:16px;height:16px;flex-shrink:0}
.sondage-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.btn-vote{
  padding:10px 22px;background:var(--navy);color:#fff;border:0;border-radius:var(--r-sm);
  font-family:inherit;font-size:.84rem;font-weight:500;cursor:pointer;transition:.15s;
}
.btn-vote:hover{background:var(--navy-700);transform:translateY(-1px)}

.sondage-results,.results{display:flex;flex-direction:column;gap:13px;margin-top:16px}
.sr-row,.result-row{display:flex;flex-direction:column;gap:6px}
.sr-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.83rem}
.sr-name{font-weight:500}
.sr-mine-tag{
  font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--danger-bg);color:var(--red);padding:2px 8px;border-radius:100px;margin-left:7px;
}
.sr-pct{font-weight:600;font-variant-numeric:tabular-nums}
.sr-track,.result-bar-wrap{height:8px;background:var(--mist);border-radius:100px;overflow:hidden}
.sr-fill,.result-bar{height:100%;background:var(--navy);border-radius:100px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.sr-fill.mine{background:var(--red)}
.sr-total{font-size:.74rem;color:var(--slate);margin-top:9px}

/* ══════════════════ VIDEOS ══════════════════ */
.video-block{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.video-block-header{padding:17px 20px;border-bottom:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.video-block-title{font-size:.92rem;font-weight:600;letter-spacing:-.01em}
.video-block-sub{font-size:.75rem;color:var(--slate);margin-top:2px}
.video-layout{display:grid;grid-template-columns:1.9fr 1fr;gap:0}
.video-player-wrap{background:#000;aspect-ratio:16/9;position:relative}
.video-player-wrap iframe{width:100%;height:100%;border:0;display:block}
.video-main-info{padding:16px 20px;border-top:1px solid var(--line-2)}
.video-main-title{font-size:.92rem;font-weight:600;letter-spacing:-.01em}
.video-main-meta{font-size:.76rem;color:var(--slate);margin-top:4px}
.video-list{border-left:1px solid var(--line-2);max-height:430px;overflow-y:auto;padding:9px}
.video-thumb{
  display:flex;gap:11px;padding:9px;border-radius:var(--r-sm);cursor:pointer;
  transition:.15s;text-decoration:none;color:inherit;align-items:flex-start;
}
.video-thumb:hover{background:var(--stone)}
.video-thumb-img{
  position:relative;width:88px;aspect-ratio:16/9;flex-shrink:0;border-radius:5px;
  overflow:hidden;background:var(--mist);
}
.video-thumb-img img{width:100%;height:100%;object-fit:cover;display:block}
.video-thumb-title{font-size:.79rem;font-weight:500;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.video-thumb-date{font-size:.7rem;color:var(--slate);margin-top:3px}
.now-playing{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,59,122,.82);color:#fff;font-size:.6rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
}
.play-btn{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.25);color:#fff;opacity:0;transition:opacity .15s;
}
.video-thumb:hover .play-btn{opacity:1}

/* ══════════════════ DOCUTHEQUE ══════════════════ */
.docs-hero{background:var(--white);border-bottom:1px solid var(--line)}
.docs-hero-inner{max-width:1080px;margin:0 auto;padding:30px 26px 0}
.docs-hero h1{font-size:1.55rem;font-weight:600;letter-spacing:-.024em}
.docs-hero p{font-size:.86rem;color:var(--slate);margin-top:6px}
.tabs-nav{display:flex;gap:4px;margin-top:22px;overflow-x:auto;padding-bottom:1px}
.tab-btn{
  padding:11px 17px;border:0;background:none;font-family:inherit;font-size:.85rem;font-weight:500;
  color:var(--slate);cursor:pointer;border-bottom:2px solid transparent;
  transition:.15s;white-space:nowrap;display:flex;align-items:center;gap:7px;
}
.tab-btn:hover{color:var(--navy)}
.tab-btn.active{color:var(--navy);font-weight:600;border-bottom-color:var(--navy)}
.docs-body{max-width:1080px;margin:0 auto;padding:28px 26px 70px}
.accent-bar{height:3px;border-radius:100px;background:var(--navy);margin-bottom:18px;width:44px}

.cats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.cat-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;cursor:pointer;transition:.2s;text-decoration:none;color:inherit;display:block;
}
.cat-card:hover{border-color:#D6D2CA;box-shadow:var(--sh-2);transform:translateY(-3px)}
.cat-card-img-wrap{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--mist)}
.cat-card-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.cat-card:hover .cat-card-img{transform:scale(1.05)}
.cat-card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,30,61,.62) 0%,rgba(0,30,61,0) 58%);
}
.cat-card-body{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.cat-card-label{font-size:.88rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.cat-card-count{font-size:.72rem;color:var(--slate);margin-top:2px}
.cat-card-arrow{color:var(--navy);flex-shrink:0;transition:transform .15s}
.cat-card:hover .cat-card-arrow{transform:translateX(3px)}

.docs-view{display:none}
/* Sans cette seconde regle, showDocs() pose bien la classe mais rien ne
   reapparait : la grille des categories est masquee et la liste des
   documents reste invisible. La page se vide au clic. */
.docs-view.active{display:block}
.docs-back{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.back-btn{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--white);color:var(--ink-2);
  font-family:inherit;font-size:.78rem;font-weight:500;cursor:pointer;transition:.15s;text-decoration:none;
}
.back-btn:hover{border-color:var(--navy);color:var(--navy)}
.docs-back-title{font-size:1.02rem;font-weight:600;letter-spacing:-.015em}

.doc-list{display:flex;flex-direction:column;gap:11px}
.doc-row{
  display:flex;align-items:center;gap:15px;padding:16px 18px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);transition:.15s;
}
.doc-row:hover{border-color:#D6D2CA;box-shadow:var(--sh-1)}
.doc-icon{
  width:40px;height:40px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
  background:var(--danger-bg);color:var(--danger);font-size:.6rem;font-weight:700;letter-spacing:.03em;
}
.doc-info{flex:1;min-width:0}
.doc-title{font-size:.89rem;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.doc-desc{font-size:.79rem;color:var(--slate);margin-top:3px;line-height:1.5}
.doc-comment{
  margin-top:9px;padding:10px 13px;border-radius:var(--r-sm);
  background:var(--info-bg);border-left:3px solid var(--navy);
  font-size:.79rem;color:var(--info);white-space:pre-wrap;line-height:1.55;
}
.doc-actions{flex-shrink:0}
.btn-dl{
  display:inline-block;padding:8px 15px;border-radius:var(--r-sm);border:0;
  font-family:inherit;font-size:.77rem;font-weight:600;cursor:pointer;
  text-decoration:none;transition:.15s;
}
.btn-pdf{background:var(--navy);color:#fff}
.btn-pdf:hover{background:var(--navy-700);transform:translateY(-1px)}
.btn-txt{background:var(--mist);color:var(--ink-2)}
.btn-txt:hover{background:var(--line)}
.contenu-inline{
  display:none;margin-top:13px;padding:15px 17px;background:var(--stone);
  border-radius:var(--r-sm);font-size:.83rem;line-height:1.7;color:var(--ink-2);
  border:1px solid var(--line-2);
}
.docs-panel{display:none}
.docs-panel.active{display:block}

/* ══════════════════ ACTUALITES ══════════════════ */
.news-strip,.news-bandeau{
  position:relative;display:flex;align-items:center;justify-content:center;gap:12px;padding:13px 26px;border-radius:var(--r-sm);
  font-size:.84rem;font-weight:500;margin-bottom:18px;
  background:var(--info-bg);color:var(--info);border-left:3px solid var(--navy);
  animation:slideIn .35s cubic-bezier(.16,1,.3,1);
}
@keyframes slideIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.news-strip svg{flex-shrink:0;opacity:.85}
.news-strip a{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:600}
.news-close-btn{
  position:absolute;right:18px;background:none;border:0;color:inherit;opacity:.5;cursor:pointer;
  font-size:1.1rem;line-height:1;padding:2px 4px;transition:opacity .15s;
}
.news-close-btn:hover{opacity:1}

/* ══════════════════ MENU MOBILE ══════════════════
   Sur ordinateur, .nav-actions n'abrite que la cloche et la deconnexion,
   le bouton a trois barres reste cache. Sous 760px, les liens (.nav-right)
   quittent le flux et deviennent un panneau deroulant. */
.nav-actions{display:flex;align-items:center;gap:3px;flex-shrink:0}
.nav-burger{
  display:none;flex-direction:column;justify-content:center;gap:4px;
  width:40px;height:40px;padding:0 9px;margin-left:2px;
  background:none;border:1px solid var(--line);border-radius:var(--r-sm);
  cursor:pointer;
}
.nav-burger span{
  display:block;height:2px;width:100%;background:var(--ink-2);border-radius:2px;
  transition:transform .18s ease,opacity .18s ease;
}
.nav-burger.ouvert span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger.ouvert span:nth-child(2){opacity:0}
.nav-burger.ouvert span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-deco-mobile{display:none}

/* Zones tactiles : sur ecran sans souris, les cibles trop petites
   se ratent. 44px est la recommandation courante. */
@media (pointer:coarse){
  .nav-pill,.btn,.btn-dl,.back-btn,.w-link,.id-attest{min-height:44px;display:inline-flex;align-items:center}
  .news-close-btn{min-width:44px;min-height:44px}
  .cloche-btn{width:40px;height:40px}
}

/* ══════════════════ RESPONSIVE ══════════════════ */
@media(max-width:1000px){
  .video-layout{grid-template-columns:1fr}
  .video-list{border-left:0;border-top:1px solid var(--line-2);max-height:280px}
}

@media(max-width:760px){
  /* La barre reste sur une seule ligne et collee en haut : c'est elle qui
     porte le panneau deroulant, elle ne doit donc pas defiler avec la page. */
  nav{height:var(--nav-h);padding:0 16px;gap:8px;position:sticky}
  .nav-logo img{height:28px}
  .nav-wordmark{display:none}

  .nav-burger{display:flex}
  .nav-deco-bureau{display:none}
  .nav-deco-mobile{display:block}

  .nav-right{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    padding:8px 12px 12px;background:var(--white);
    border-bottom:1px solid var(--line);box-shadow:var(--sh-2);
  }
  .nav-right.ouvert{display:flex}
  /* Zones tactiles confortables : 44px de haut, la recommandation courante. */
  .nav-right .nav-pill{
    padding:12px 14px;font-size:.94rem;border-radius:var(--r-sm);min-height:44px;
    display:flex;align-items:center;
  }
  .nav-right .nav-pill.accent{margin-left:0;margin-top:4px;border-top:1px solid var(--line-2);border-radius:0 0 var(--r-sm) var(--r-sm)}

  .id-card{padding:22px}
  .id-right{width:100%;justify-content:space-between}
  .page,.page-narrow,.docs-body,.hero-inner,.docs-hero-inner{padding-left:18px;padding-right:18px}
}

@media(max-width:560px){
  .row2,.row3{grid-template-columns:1fr}
  .id-left{gap:14px}
  .id-avatar{width:50px;height:50px;font-size:1.15rem}
  .id-name{font-size:1.08rem}
  .doc-row{flex-wrap:wrap}
  .doc-actions{width:100%}
  .btn-dl{display:block;text-align:center}

  /* Documentheque : une vignette 16/10 pleine largeur fait 240px de haut,
     soit cinq ecrans de defilement pour cinq categories. En rangee, la
     meme information tient sur 90px. */
  .cats-grid{grid-template-columns:1fr;gap:10px}
  .cat-card{display:flex;align-items:stretch}
  .cat-card-img-wrap{width:96px;aspect-ratio:1;flex-shrink:0}
  /* Si la categorie n'a pas d'illustration, le texte de remplacement
     de l'image ne doit pas remplir la vignette. */
  .cat-card-img{font-size:.66rem;color:var(--slate)}
  .cat-card-overlay{background:linear-gradient(to right,rgba(0,30,61,.25),rgba(0,30,61,0))}
  .cat-card-body{flex:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
  .cat-card-arrow{display:none}

  /* Bandeau d'actualite : le lien passait sous la croix de fermeture. */
  .news-strip,.news-bandeau{
    flex-direction:column;align-items:flex-start;gap:6px;
    padding:13px 42px 13px 16px;text-align:left;
  }
  .news-close-btn{right:12px;top:10px;font-size:1.25rem;padding:4px 6px}

  /* Sondages : l'etiquette « Mon choix » se coupait en deux. */
  .sr-head{flex-wrap:wrap}
  .sr-name{flex:1;min-width:0}
  .sr-mine-tag{display:inline-block;white-space:nowrap}

  .id-card{flex-direction:column;align-items:flex-start;gap:16px}
  .id-right{flex-direction:column;align-items:flex-start;gap:10px}
  .id-attest{width:100%;justify-content:center}

  /* Bandeau du profil : le numero d'adherent se coupait au milieu. */
  .profil-hero{padding:22px 18px !important}
  .profil-hero-inner{flex-wrap:wrap;gap:14px !important}
  .profil-hero-num{margin-left:0 !important;text-align:left !important;width:100%}
  .profil-hero-num > div:nth-child(2){white-space:nowrap}
}


@media print{
  nav,.nav-right,.nav-actions,.nav-burger,.btn,.btn-dl,.news-strip{display:none !important}
  body{background:#fff}
}


/* ============================================================
   ECRANS D'AUTHENTIFICATION
   Portee par <body class="auth"> : connexion, inscription,
   mot de passe oublie, reinitialisation, activation.
   Fusionne ici plutot que dans un fichier separe : le serveur
   refuse (403) les fichiers statiques nouvellement crees via FTP.
   ============================================================ */
body.auth{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;padding:32px 20px;position:relative;overflow-x:hidden;
}
body.auth::before{
  content:'';position:fixed;top:0;left:0;right:0;height:320px;z-index:0;
  background:linear-gradient(178deg,rgba(0,59,122,.055) 0%,rgba(247,246,243,0) 100%);
  pointer-events:none;
}
body.auth.admin-auth{background:#0B1728}
body.auth.admin-auth::before{background:linear-gradient(178deg,rgba(0,59,122,.5) 0%,rgba(11,23,40,0) 70%)}
body.auth.admin-auth .auth-card{border-color:rgba(255,255,255,.09);box-shadow:0 20px 60px rgba(0,0,0,.4)}
body.auth.admin-auth .auth-logo{filter:brightness(0) invert(1);opacity:.9}

.auth-logo{text-align:center;margin-bottom:26px;position:relative;z-index:1}
.auth-logo img{height:46px;width:auto}

.auth-card{
  width:100%; max-width:410px; position:relative; z-index:1;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2);
}
.auth-card.wide{max-width:600px}

.auth-head{padding:26px 30px 22px;text-align:center;border-bottom:1px solid var(--line-2)}
.auth-head h1{font-size:1.12rem;font-weight:600;letter-spacing:-.02em;margin-bottom:4px;color:var(--ink)}
.auth-head p{font-size:.79rem;color:var(--slate);font-weight:400}

.auth-body{padding:26px 30px}

.auth-body label{
  display:block;font-size:.67rem;font-weight:600;color:var(--slate);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;margin-top:16px;
}
.auth-body label:first-of-type,.auth-body .fg:first-child label{margin-top:0}
.auth-body input,.auth-body select,.auth-body textarea{
  width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:inherit;font-size:.875rem;outline:none;background:var(--white);color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.auth-body input:focus,.auth-body select:focus,.auth-body textarea:focus{
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,59,122,.1);
}
.auth-body input[readonly]{background:var(--stone);color:var(--slate)}
.auth-body input::placeholder{color:#A9B0BC}
.auth-body small{display:block;font-size:.72rem;color:var(--slate);margin-top:5px}

.auth-body button,.auth-body .btn{
  width:100%;padding:11px;margin-top:22px;border:0;border-radius:var(--r-sm);
  background:var(--navy);color:#fff;font-family:inherit;font-size:.875rem;font-weight:500;
  cursor:pointer;transition:background .15s, box-shadow .15s, transform .12s;
  box-shadow:0 1px 2px rgba(0,59,122,.25);
}
.auth-body button:hover{background:var(--navy-700);box-shadow:0 4px 14px rgba(0,59,122,.3);transform:translateY(-1px)}
.auth-body button:active{transform:translateY(0)}

/* Messages */
.auth-body .alert,.auth-body .success{
  display:flex;gap:9px;align-items:flex-start;
  padding:11px 14px;border-radius:var(--r-sm);font-size:.81rem;line-height:1.5;
  margin-bottom:16px;border-left:3px solid;
}
.auth-body .alert,.auth-body .alert.error{background:var(--danger-bg);color:var(--danger);border-color:var(--red)}
.auth-body .alert.success,.auth-body .success{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}

.auth-foot{
  padding:14px 30px;border-top:1px solid var(--line-2);text-align:center;
  font-size:.78rem;color:var(--slate);background:#FCFBF9;
}
.auth-foot a{color:var(--navy);text-decoration:none;font-weight:500}
.auth-foot a:hover{text-decoration:underline}

/* Grilles de formulaire (inscription) */
.auth-body .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.auth-body .row3{display:grid;grid-template-columns:96px 1fr 1fr;gap:14px}
.auth-body .fg{position:relative}
.auth-body .req{color:var(--red)}
.auth-body .section-title{
  font-size:.66rem;font-weight:700;color:var(--navy);text-transform:uppercase;
  letter-spacing:.09em;margin:26px 0 14px;padding-bottom:7px;border-bottom:1px solid var(--line-2);
}
.auth-body .section-title:first-child{margin-top:0}

/* Autocompletion code postal */
.geo-suggestions{
  position:absolute;z-index:50;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-2);max-height:190px;overflow-y:auto;
  width:100%;display:none;top:100%;left:0;margin-top:3px;
}
.geo-suggestion{padding:9px 13px;cursor:pointer;font-size:.83rem;border-bottom:1px solid var(--line-2)}
.geo-suggestion:last-child{border-bottom:none}
.geo-suggestion:hover{background:var(--stone);color:var(--navy)}
.geo-info-badge{display:inline-block;font-size:.7rem;color:var(--slate);margin-top:5px}

/* Bloc « qui etes-vous » (activation) */
.who{background:var(--stone);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:12px 14px;font-size:.82rem;margin-bottom:18px}
.who strong{font-weight:600}
.who span{display:block;font-size:.72rem;color:var(--slate);margin-top:3px}


@media(max-width:560px){
  .auth-body .row2,.auth-body .row3{grid-template-columns:1fr}
  .auth-head,.auth-body,.auth-foot{padding-left:22px;padding-right:22px}
}

/* ============================================================
   SONDAGES — espace adherent
   ============================================================ */
.sondages-hero{background:var(--white);border-bottom:1px solid var(--line)}
.sondages-hero-inner{max-width:900px;margin:0 auto;padding:32px 26px}
.sondages-hero h1{font-size:1.55rem;font-weight:600;letter-spacing:-.024em;line-height:1.15}
.sondages-hero p{font-size:.87rem;color:var(--slate);margin-top:6px}
.sondages-body{max-width:900px;margin:0 auto;padding:28px 26px 70px}

.sc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.sc-question{font-size:1.02rem;font-weight:600;letter-spacing:-.015em;line-height:1.4;flex:1;min-width:220px}
.sc-badge{
  display:inline-flex;align-items:center;font-size:.66rem;font-weight:600;letter-spacing:.03em;
  padding:3px 10px;border-radius:100px;white-space:nowrap;
}
.b-simple{background:var(--info-bg);color:var(--info)}
.b-multiple{background:var(--warn-bg);color:var(--warn)}
.b-voted{background:var(--ok-bg);color:var(--ok)}
.deadline{font-size:.75rem;color:var(--slate);margin-top:2px}

.options-form{display:flex;flex-direction:column;gap:9px;margin:18px 0}
.opt-label{
  display:flex;align-items:center;gap:12px;padding:13px 16px;
  border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;
  font-size:.88rem;transition:.15s;background:var(--white);
}
.opt-label:hover{border-color:var(--navy);background:var(--info-bg)}
.opt-label input{accent-color:var(--navy);width:16px;height:16px;flex-shrink:0;margin:0}
.opt-label:has(input:checked){border-color:var(--navy);background:var(--info-bg);font-weight:500}

.results-section{margin-top:18px}
.results-section .result-row{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}
.result-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.86rem}
.result-name{font-weight:500;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.result-pct{font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0}
.my-vote{
  font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--danger-bg);color:var(--red);padding:2px 8px;border-radius:100px;
}
.result-bar.my{background:var(--red)}
.total-votes{font-size:.76rem;color:var(--slate);margin-top:14px;padding-top:13px;border-top:1px solid var(--line-2)}

/* ============================================================
   WEBINAIRES — espace adherent
   ============================================================ */
.medias-hero{background:var(--white);border-bottom:1px solid var(--line)}
.medias-hero-inner{max-width:1080px;margin:0 auto;padding:32px 26px}
.medias-hero h1{font-size:1.55rem;font-weight:600;letter-spacing:-.024em;line-height:1.15}
.medias-hero p{font-size:.87rem;color:var(--slate);margin-top:6px}
.medias-body{max-width:1080px;margin:0 auto;padding:28px 26px 70px}

.featured-block{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-bottom:8px;
}
.featured-grid{display:grid;grid-template-columns:1.75fr 1fr;gap:0;align-items:stretch}
.player-wrap{background:#000;aspect-ratio:16/9;position:relative}
.player-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.featured-info{
  padding:22px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;
  border-left:1px solid var(--line-2);
}
.featured-label{
  font-size:.62rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--red);margin-bottom:8px;
}
.featured-title{font-size:1.05rem;font-weight:600;letter-spacing:-.018em;line-height:1.3}
.featured-desc{font-size:.84rem;color:var(--ink-2);margin-top:9px;line-height:1.6}
.featured-date{font-size:.76rem;color:var(--slate);margin-top:9px}
.btn-vimeo{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;align-self:flex-start;
  padding:9px 17px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--white);
  font-size:.8rem;font-weight:500;color:var(--ink-2);text-decoration:none;transition:.15s;
}
.btn-vimeo:hover{border-color:var(--navy);color:var(--navy);box-shadow:var(--sh-1)}

.videos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:15px}
.video-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;cursor:pointer;transition:.18s;
}
.video-card:hover{border-color:#D6D2CA;box-shadow:var(--sh-2);transform:translateY(-2px)}
.video-card.active-card{border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,59,122,.1)}
.vc-thumb{position:relative;aspect-ratio:16/9;background:var(--mist);overflow:hidden}
.vc-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.video-card:hover .vc-thumb img{transform:scale(1.04)}
.vc-play{
  position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.35rem;
  background:rgba(0,30,61,.28);opacity:0;transition:opacity .15s;
}
.video-card:hover .vc-play,.video-card.active-card .vc-play{opacity:1}
.vc-body{padding:13px 15px}
.vc-title{
  font-size:.85rem;font-weight:600;letter-spacing:-.008em;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vc-date{font-size:.73rem;color:var(--slate);margin-top:5px}

/* ============================================================
   REFERENT REGIONAL — espace adherent
   ============================================================ */
.ref-hero{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-900) 100%);
  color:#fff;position:relative;overflow:hidden;
}
.ref-hero::after{
  content:'';position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 68%);
}
.ref-hero-inner{
  max-width:1080px;margin:0 auto;padding:32px 26px;position:relative;z-index:1;
  display:flex;align-items:flex-start;justify-content:space-between;gap:22px;flex-wrap:wrap;
}
.ref-hero h1{font-size:1.5rem;font-weight:600;letter-spacing:-.024em;line-height:1.15}
.ref-hero p{font-size:.85rem;color:rgba(255,255,255,.62);margin-top:6px}
.hero-regions{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.hero-badge{
  font-size:.7rem;font-weight:600;padding:4px 12px;border-radius:100px;
  background:rgba(255,255,255,.15);color:#fff;
}
.ref-hero .btn-export{
  display:inline-flex;align-items:center;gap:7px;padding:9px 17px;border-radius:var(--r-sm);
  background:#fff;color:var(--navy);border:0;font-size:.8rem;font-weight:600;
  text-decoration:none;transition:.15s;flex-shrink:0;
}
.ref-hero .btn-export:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.2)}
.ref-body{max-width:1080px;margin:0 auto;padding:28px 26px 70px}

.ref-body .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px;margin-bottom:22px}
.ref-body .kpi{
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--navy);
  border-radius:var(--r);padding:17px 19px;
}
.ref-body .kpi-n{font-size:1.75rem;font-weight:600;letter-spacing:-.035em;line-height:1}
.ref-body .kpi-l{font-size:.74rem;color:var(--slate);margin-top:6px;font-weight:500}

.mailto-block{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:19px 21px;margin-bottom:24px;
}
.mailto-title{font-size:.9rem;font-weight:600;letter-spacing:-.01em;margin-bottom:12px}
.mailto-btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 19px;border-radius:var(--r-sm);
  background:var(--navy);color:#fff;text-decoration:none;font-size:.83rem;font-weight:500;
  transition:.15s;box-shadow:0 1px 2px rgba(0,59,122,.25);
}
.mailto-btn:hover{background:var(--navy-700);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,59,122,.28)}
.mailto-info{font-size:.75rem;color:var(--slate);margin-top:10px}

.region-section{margin-bottom:30px}
.region-header{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:13px;
}
.region-title{display:flex;align-items:center;gap:11px;font-size:1rem;font-weight:600;letter-spacing:-.015em}
.region-badge{
  font-size:.68rem;font-weight:600;padding:3px 10px;border-radius:100px;
  background:var(--info-bg);color:var(--info);
}
.region-deps{font-size:.75rem;color:var(--slate)}

.adherent-cell{display:flex;align-items:center;gap:11px}
.adherent-cell .avatar,.avatar{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;
  background:var(--info-bg);color:var(--navy);font-size:.72rem;font-weight:600;
}
.ad-name{font-size:.84rem;font-weight:600;letter-spacing:-.005em;line-height:1.3}
.ad-org{font-size:.73rem;color:var(--slate)}
.dep-tag{
  display:inline-block;font-size:.7rem;font-weight:500;padding:2px 9px;border-radius:100px;
  background:var(--mist);color:var(--ink-2);white-space:nowrap;
}

@media(max-width:900px){
  .featured-grid{grid-template-columns:1fr}
  .featured-info{border-left:0;border-top:1px solid var(--line-2)}
  .ref-hero-inner{flex-direction:column}
}