/* ============================================================
   GEPS — Gabon Éduc Plus Service
   Page d'accueil — palette extraite du logo officiel
   Antier ONDO NTOUGHOU
   ============================================================ */
:root{
  --vert:        #007D2F;   /* vert du G — couleur principale */
  --vert-fonce:  #00551F;
  --vert-clair:  #E6F2EA;
  --or:          #E2AD00;   /* or du E et de l'étoile */
  --or-sombre:   #8A6800;
  --or-pale:     #FBF1D6;
  --bleu:        #0C448C;   /* bleu roi du P */
  --nuit:        #1C334E;   /* bleu nuit du livre */
  --argent:      #999C9D;   /* argent du S */
  --blanc:       #FFFFFF;
  --gris:        #F4F5F5;
  --gris-trait:  #DFE3E2;
  --encre:       #14181C;
  --encre-doux:  #4E585F;

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --corps:   "Instrument Sans", system-ui, -apple-system, sans-serif;
  --data:    "IBM Plex Mono", ui-monospace, monospace;

  --topbar-h: 76px;
  --rayon: 14px;
  --contenu: 1200px;
  --ombre: 0 2px 4px rgba(28,51,78,.04), 0 12px 32px rgba(28,51,78,.08);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--topbar-h) + 16px)}
body{margin:0; background:var(--blanc); color:var(--encre); font-family:var(--corps);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--display); font-weight:800; line-height:1.08; letter-spacing:-.02em; margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--or); outline-offset:3px; border-radius:4px}

.contenu{width:min(100% - 40px, var(--contenu)); margin-inline:auto}
.section{padding:88px 0}
.section--gris{background:var(--gris)}
.section--vert-doux{background:var(--vert-clair)}

.releve{font-family:var(--data); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--vert); display:flex; align-items:center; gap:10px; margin-bottom:18px}
.releve::before{content:""; width:26px; height:1px; background:currentColor}
.titre-section{font-size:clamp(28px,3.4vw,42px); max-width:19ch}
.chapeau{color:var(--encre-doux); max-width:62ch; margin-top:16px}

/* ---------- Boutons ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; justify-content:center;
  font-family:var(--corps); font-weight:600; font-size:16px; padding:14px 26px;
  border-radius:999px; border:2px solid transparent; cursor:pointer;
  transition:transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn--or{background:var(--or); color:#2A1F00; border-color:var(--or)}
.btn--or:hover{background:#F5C51F}
.btn--blanc-contour{background:transparent; color:var(--blanc); border-color:rgba(255,255,255,.72)}
.btn--blanc-contour:hover{background:var(--blanc); color:var(--vert-fonce); border-color:var(--blanc)}
.btn--vert{background:var(--vert); color:var(--blanc); border-color:var(--vert)}
.btn--vert:hover{background:var(--vert-fonce); border-color:var(--vert-fonce)}
.btn--contour{background:transparent; color:var(--nuit); border-color:var(--gris-trait)}
.btn--contour:hover{border-color:var(--vert); color:var(--vert)}
.btn--petit{padding:10px 18px; font-size:15px}

/* ============================================================
   1. TOPBAR
   ============================================================ */
.topbar{position:fixed; inset:0 0 auto 0; height:var(--topbar-h); z-index:100;
  background:rgba(255,255,255,.93); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color .2s ease, box-shadow .2s ease}
.topbar.est-collee{border-bottom-color:var(--gris-trait); box-shadow:0 6px 20px rgba(28,51,78,.07)}
.topbar__inner{height:100%; display:flex; align-items:center; gap:24px}
.marque{flex-shrink:0; display:block}
.marque img{height:48px; width:auto}

.nav{margin-inline:auto; display:flex; align-items:center; gap:4px}
.nav__lien{padding:10px 14px; border-radius:8px; font-weight:500; font-size:15.5px; color:var(--nuit);
  display:inline-flex; align-items:center; gap:6px; background:none; border:0; font-family:var(--corps); cursor:pointer}
.nav__lien:hover{background:var(--vert-clair); color:var(--vert-fonce)}
.nav__groupe{position:relative}
.nav__chevron{width:10px; height:10px; transition:transform .2s ease}
.nav__groupe[aria-expanded="true"] .nav__chevron{transform:rotate(180deg)}
.menu{position:absolute; top:calc(100% + 12px); left:50%; translate:-50% 0; width:330px;
  background:var(--blanc); border:1px solid var(--gris-trait); border-radius:var(--rayon);
  box-shadow:var(--ombre); padding:10px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:.18s ease}
.menu.ouvert{opacity:1; visibility:visible; transform:translateY(0)}
.menu__item{display:block; padding:14px; border-radius:10px}
.menu__item:hover{background:var(--vert-clair)}
.menu__titre{font-family:var(--display); font-weight:600; font-size:16.5px; color:var(--nuit)}
.menu__desc{font-size:13.5px; color:var(--encre-doux); line-height:1.45; margin-top:3px}

.burger{display:none; width:44px; height:44px; border:1px solid var(--gris-trait); border-radius:10px;
  background:none; cursor:pointer; padding:12px}
.burger span{display:block; height:2px; background:var(--nuit); border-radius:2px; margin:4px 0; transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.nav-mobile{position:fixed; top:var(--topbar-h); left:0; right:0; z-index:99; background:var(--blanc);
  border-bottom:1px solid var(--gris-trait); padding:16px 20px 26px; display:none; box-shadow:var(--ombre)}
.nav-mobile.ouvert{display:block}
.nav-mobile a{display:block; padding:14px 6px; border-bottom:1px solid var(--gris); font-weight:500}
.nav-mobile a.sous{padding-left:24px; font-size:15px; color:var(--encre-doux)}
.nav-mobile .btn{width:100%; margin-top:18px}

/* ============================================================
   2. BANDE VERTE
   ============================================================ */
.respiration{height:var(--topbar-h)}
.bande{position:relative; overflow:hidden; min-height:clamp(330px, 42vw, 454px);
  background:linear-gradient(105deg, var(--vert-fonce) 0%, var(--vert) 48%, #0A8C39 100%);
  color:var(--blanc); display:flex; align-items:center}
.bande__points{position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.6) 1.7px, transparent 1.8px); background-size:19px 19px;
  -webkit-mask-image:linear-gradient(to left, rgba(0,0,0,.95) 40%, rgba(0,0,0,.5) 62%, rgba(0,0,0,.14) 82%, transparent 100%);
          mask-image:linear-gradient(to left, rgba(0,0,0,.95) 40%, rgba(0,0,0,.5) 62%, rgba(0,0,0,.14) 82%, transparent 100%)}
.bande__points--droite{opacity:.45;
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,.4) 0%, transparent 45%);
          mask-image:linear-gradient(to right, rgba(0,0,0,.4) 0%, transparent 45%)}
.bande__inner{position:relative; z-index:2; display:grid; grid-template-columns:1.25fr .75fr;
  gap:48px; align-items:center; padding:56px 0}
.bande__eyebrow{font-family:var(--data); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:#FFDC7A; margin-bottom:18px}
.bande h1{font-size:clamp(32px,4.6vw,58px); max-width:15ch}
.bande p{margin-top:20px; max-width:56ch; color:rgba(255,255,255,.93); font-size:17.5px}
.bande__actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}

/* médaillon blanc : le logo officiel reste sur fond clair, comme le prévoit la charte */
.bande__visuel{display:flex; justify-content:center}
.medaillon{background:var(--blanc); border-radius:24px; padding:26px 30px;
  box-shadow:0 18px 44px rgba(0,40,16,.28); position:relative;
  animation:apparition .8s cubic-bezier(.2,.8,.3,1) both .12s}
.medaillon::after{content:""; position:absolute; inset:-9px; border-radius:32px;
  border:1px solid rgba(255,255,255,.28); pointer-events:none}
.medaillon img{width:min(230px, 46vw); height:auto}
@keyframes apparition{from{opacity:0; transform:translateY(16px) scale(.96)} to{opacity:1; transform:none}}

/* ============================================================
   3. PRÉSENTATION + PILIERS
   ============================================================ */
.duo{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start}
.piliers{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px}
.pilier{background:var(--blanc); border:1px solid var(--gris-trait); border-radius:var(--rayon);
  padding:28px; transition:border-color .2s, transform .2s; border-top:4px solid var(--vert)}
.pilier:nth-child(2){border-top-color:var(--or)}
.pilier:nth-child(3){border-top-color:var(--bleu)}
.pilier:hover{transform:translateY(-3px); border-color:var(--gris-trait)}
.pilier__cap{font-family:var(--data); font-size:11px; letter-spacing:.16em; color:var(--encre-doux); text-transform:uppercase}
.pilier h3{font-size:20px; margin:12px 0 10px}
.pilier p{font-size:15.5px; color:var(--encre-doux)}

/* ============================================================
   4. NOS OFFRES
   ============================================================ */
.offres{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:44px}
.offre{background:var(--blanc); border:1px solid var(--gris-trait); border-radius:20px; padding:34px;
  display:flex; flex-direction:column; box-shadow:var(--ombre); border-top:5px solid var(--bleu)}
.offre--apc{border-top-color:var(--or)}
.offre__logo{width:58px; height:58px; border-radius:15px; display:grid; place-items:center;
  background:#E8EFF8; color:var(--bleu); font-family:var(--display); font-weight:800; font-size:22px}
.offre--apc .offre__logo{background:var(--or-pale); color:var(--or-sombre); font-size:19px}
.offre h3{font-size:26px; margin:20px 0 6px}
.offre__type{font-family:var(--data); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--encre-doux)}
.offre__texte{margin-top:14px; color:var(--encre-doux); font-size:16px}
.offre__bloc{margin-top:24px}
.offre__bloc h4{font-family:var(--corps); font-weight:600; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--nuit); margin-bottom:12px}
.jetons{display:flex; flex-wrap:wrap; gap:8px}
.jeton{font-size:13.5px; padding:6px 12px; border-radius:999px; background:var(--gris); color:var(--encre-doux)}
.liste{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.liste li{position:relative; padding-left:26px; font-size:15.5px; color:var(--encre-doux)}
.liste li::before{content:""; position:absolute; left:0; top:9px; width:9px; height:9px;
  border-radius:2px; background:var(--bleu); transform:rotate(45deg)}
.offre--apc .liste li::before{background:var(--or)}
.offre__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; padding-top:28px}
.btn--bleu{background:var(--bleu); color:var(--blanc); border-color:var(--bleu)}
.btn--bleu:hover{background:#0A3A78; border-color:#0A3A78}

/* ============================================================
   5. NOS RESSOURCES
   ============================================================ */
.telecharger{display:grid; grid-template-columns:1.15fr .85fr; gap:26px; margin-top:44px; align-items:start}
.fiche{background:var(--blanc); border:1px solid var(--gris-trait); border-radius:18px; overflow:hidden}
.fiche__tete{padding:24px 28px; background:var(--nuit); color:var(--blanc);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.fiche__tete h3{font-size:21px}
.etiquette{font-family:var(--data); font-size:12px; padding:5px 11px; border-radius:6px;
  background:rgba(255,255,255,.14); color:#FFDC7A}
.tableau{width:100%; border-collapse:collapse; font-size:15.5px}
.tableau th,.tableau td{text-align:left; padding:14px 28px; border-bottom:1px solid var(--gris)}
.tableau th{font-weight:500; color:var(--encre-doux); width:40%; font-size:14.5px}
.tableau td{font-family:var(--data); font-size:14.5px; color:var(--nuit)}
.tableau tr:last-child th,.tableau tr:last-child td{border-bottom:0}
.fiche__pied{padding:22px 28px; background:var(--gris); display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.fiche__note{font-size:13.5px; color:var(--encre-doux)}
.aides{display:grid; gap:14px}
.aide{display:flex; gap:16px; padding:20px; background:var(--blanc); border:1px solid var(--gris-trait);
  border-radius:14px; align-items:flex-start}
.aide__icone{flex-shrink:0; width:40px; height:40px; border-radius:10px; background:var(--vert-clair);
  display:grid; place-items:center; color:var(--vert); font-size:19px}
.aide h4{font-family:var(--display); font-size:16.5px; font-weight:600; margin-bottom:4px}
.aide p{font-size:14.5px; color:var(--encre-doux); line-height:1.5}

/* ============================================================
   6. RESSOURCES PÉDAGOGIQUES
   ============================================================ */
.categories{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:40px}
.categorie{background:var(--blanc); border:1px solid var(--gris-trait); border-radius:12px; padding:18px 20px;
  display:flex; justify-content:space-between; align-items:center; gap:10px; transition:.18s}
.categorie:hover{background:var(--vert); border-color:var(--vert); color:var(--blanc); transform:translateY(-2px)}
.categorie span{font-weight:500; font-size:15.5px}
.categorie em{font-family:var(--data); font-style:normal; font-size:12.5px; opacity:.6}
.grille-ressources{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:26px}
.ressource{background:var(--blanc); border:1px solid var(--gris-trait); border-radius:14px; padding:24px;
  display:flex; flex-direction:column; gap:12px}
.ressource__meta{display:flex; gap:8px; flex-wrap:wrap}
.badge{font-family:var(--data); font-size:11.5px; letter-spacing:.06em; padding:4px 9px; border-radius:5px;
  background:var(--vert-clair); color:var(--vert-fonce)}
.badge--or{background:var(--or-pale); color:var(--or-sombre)}
.badge--nuit{background:#E8EFF8; color:var(--bleu)}
.ressource h3{font-size:18.5px; font-weight:600}
.ressource p{font-size:14.5px; color:var(--encre-doux); flex-grow:1}

/* ============================================================
   7. ENGAGEMENTS
   ============================================================ */
.engagements{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:44px;
  background:var(--gris-trait); border:1px solid var(--gris-trait); border-radius:18px; overflow:hidden}
.engagement{background:var(--blanc); padding:32px 26px}
.engagement__cap{font-family:var(--data); font-size:11px; letter-spacing:.18em; color:var(--or-sombre); text-transform:uppercase}
.engagement h3{font-size:19px; margin:14px 0 10px; line-height:1.25}
.engagement p{font-size:14.8px; color:var(--encre-doux)}

/* ============================================================
   8. ACTUALITÉS
   ============================================================ */
.actus{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px}
.actu{background:var(--blanc); border:1px solid var(--gris-trait); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column}
.actu__bandeau{height:8px; background:var(--vert)}
.actu:nth-child(2) .actu__bandeau{background:var(--or)}
.actu:nth-child(3) .actu__bandeau{background:var(--bleu)}
.actu__corps{padding:26px; display:flex; flex-direction:column; gap:12px; flex-grow:1}
.actu__date{font-family:var(--data); font-size:12.5px; color:var(--encre-doux); letter-spacing:.06em}
.actu h3{font-size:19.5px; font-weight:600; line-height:1.3}
.actu p{font-size:15px; color:var(--encre-doux); flex-grow:1}
.lien-fleche{font-weight:600; color:var(--vert); display:inline-flex; gap:8px; align-items:center; font-size:15px}
.lien-fleche:hover{gap:12px}
.lien-fleche span{transition:.2s}

/* ============================================================
   9. APPEL À L'ACTION
   ============================================================ */
.cta{background:var(--nuit); color:var(--blanc); padding:76px 0; position:relative; overflow:hidden}
.cta__points{position:absolute; inset:0; opacity:.4;
  background-image:radial-gradient(rgba(255,255,255,.35) 1.5px, transparent 1.6px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse at 80% 50%, #000 0%, transparent 65%);
          mask-image:radial-gradient(ellipse at 80% 50%, #000 0%, transparent 65%)}
.cta__inner{position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center;
  gap:40px; flex-wrap:wrap}
.cta h2{font-size:clamp(26px,3.2vw,38px); max-width:20ch}
.cta p{margin-top:14px; color:rgba(255,255,255,.75); max-width:52ch}
.cta__actions{display:flex; gap:14px; flex-wrap:wrap}

/* ============================================================
   10. PIED DE PAGE
   ============================================================ */
.pied{background:#122539; color:rgba(255,255,255,.7); padding:64px 0 0; font-size:15px}
.pied__haut{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px}
.pied h4{font-family:var(--corps); font-weight:600; font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blanc); margin-bottom:18px}
.pied ul{list-style:none; padding:0; margin:0; display:grid; gap:11px}
.pied a:hover{color:#FFDC7A}
.pied__marque{display:flex; align-items:center; gap:14px}
.pied__marque img{width:64px; height:auto}
.pied__nom{font-family:var(--display); font-weight:800; font-size:24px; color:var(--blanc); letter-spacing:-.03em}
.pied__nom em{font-style:normal; color:var(--or)}
.pied__bl{display:block; font-family:var(--data); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:2px}
.pied__intro{max-width:34ch; margin-top:18px; line-height:1.6}
.reseaux{display:flex; gap:10px; margin-top:20px}
.reseau{width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  display:grid; place-items:center; font-size:13px; font-family:var(--data)}
.reseau:hover{background:var(--vert); border-color:var(--vert); color:var(--blanc)}
.pied__bas{border-top:1px solid rgba(255,255,255,.12); padding:22px 0 30px; display:flex;
  justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13.5px}
.pied__legal{display:flex; gap:22px; flex-wrap:wrap}

/* ============================================================
   SIGNATURE — boussole de lecture
   ============================================================ */
.boussole{position:fixed; right:26px; top:50%; translate:0 -50%; z-index:50; display:flex;
  flex-direction:column; align-items:center; gap:8px; opacity:0; transition:opacity .4s ease; pointer-events:none}
.boussole.visible{opacity:1}
.boussole__cadran{width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,.93);
  border:1px solid var(--gris-trait); box-shadow:var(--ombre); display:grid; place-items:center; backdrop-filter:blur(6px)}
.boussole__aiguille{transition:transform .7s cubic-bezier(.2,.85,.3,1)}
.boussole__nom{font-family:var(--data); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--nuit); background:rgba(255,255,255,.93); padding:4px 9px; border-radius:6px;
  border:1px solid var(--gris-trait); white-space:nowrap}

.reveler{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveler.vu{opacity:1; transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .boussole{display:none}
  .categories,.engagements{grid-template-columns:repeat(2,1fr)}
  .pied__haut{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  :root{--topbar-h:68px}
  .nav{display:none}
  .topbar__inner > .btn{display:none}
  .marque img{height:40px}
  .burger{display:block; margin-left:auto}
  .bande__inner{grid-template-columns:1fr; text-align:center; padding:48px 0}
  .bande p,.bande h1{margin-inline:auto}
  .bande__actions{justify-content:center}
  .bande__visuel{order:-1}
  .medaillon{padding:18px 22px}
  .medaillon img{width:170px}
  .duo,.offres,.telecharger,.actus,.grille-ressources{grid-template-columns:1fr}
  .piliers{grid-template-columns:1fr}
  .section{padding:64px 0}
}
@media (max-width:560px){
  body{font-size:16px}
  .categories,.engagements,.pied__haut{grid-template-columns:1fr}
  .fiche__tete{flex-direction:column; align-items:flex-start}
  .tableau th,.tableau td{padding:12px 20px}
  .cta__inner{flex-direction:column; align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .reveler{opacity:1; transform:none}
}


/* ============================================================
   MARQUES PRODUIT — Gabon Éduc+ (GE+) et Cahiers APC
   ============================================================ */
:root{
  /* Couleurs de marque des produits, pour référence.
     Les pages produit les reprennent dans leurs variables --prod-*. */
  --ge-vert:  #048232;   /* Gabon Éduc+ — le G */
  --ge-bleu:  #004DA7;   /* Gabon Éduc+ — le E */
  --ge-jaune: #FFC000;   /* Gabon Éduc+ — la toque et le + */
  --apc-bleu: #004587;   /* Les Cahiers APC — le livre ouvert */
  --apc-ambre:#FFAD05;   /* Les Cahiers APC — le sigle et l'onde */
}
.menu__item--logo{display:grid; grid-template-columns:44px 1fr; column-gap:12px; align-items:center}
.menu__item--logo .menu__titre,.menu__item--logo .menu__desc{grid-column:2}
.menu__marque{width:44px; height:auto; grid-row:1 / span 2; align-self:center}
.offre__marque img{height:64px; width:auto}
.plaque{background:var(--blanc); border-radius:12px; padding:8px 12px; display:inline-flex}
.plaque img{height:36px; width:auto}


/* ============================================================
   GABARIT DES PAGES PRODUIT (Gabon Éduc+, Les Cahiers APC)
   Les couleurs viennent des variables --prod-* définies par chaque page
   ============================================================ */
.fil{padding:22px 0 0; font-size:14px; color:var(--encre-doux); display:flex; gap:8px; flex-wrap:wrap}
.fil a:hover{color:var(--prod-1)}
.fil span{opacity:.5}

.bande-produit .bande__eyebrow{color:var(--prod-clair)}
.bande-produit .medaillon img{width:min(260px, 52vw)}
.chiffres-cles{display:flex; gap:28px; flex-wrap:wrap; margin-top:30px}
.chiffre__val{font-family:var(--data); font-size:13px; color:var(--prod-clair); letter-spacing:.08em}
.chiffre__lib{font-size:14.5px; color:rgba(255,255,255,.85)}
.btn--jaune{background:var(--prod-3); color:#2A1F00; border-color:var(--prod-3)}
.btn--jaune:hover{background:var(--prod-3-survol)}

.releve--prod{color:var(--prod-1)}

/* Utilisateurs */
.publics{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px}
.public{border:1px solid var(--gris-trait); border-radius:16px; padding:26px; background:var(--blanc)}
.public__role{font-family:var(--data); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--prod-1)}
.public h3{font-size:19px; margin:12px 0 10px}
.public p{font-size:15px; color:var(--encre-doux)}

/* Espaces — onglets */
.onglets{display:flex; gap:8px; flex-wrap:wrap; margin-top:40px}
.onglet{font-family:var(--corps); font-size:15.5px; font-weight:500; padding:12px 22px; border-radius:999px;
  border:1px solid var(--gris-trait); background:var(--blanc); color:var(--nuit); cursor:pointer; transition:.18s}
.onglet:hover{border-color:var(--prod-1); color:var(--prod-1)}
.onglet[aria-selected="true"]{background:var(--prod-1); border-color:var(--prod-1); color:var(--blanc)}
.panneau{display:none; margin-top:28px; background:var(--blanc); border:1px solid var(--gris-trait);
  border-radius:18px; padding:34px; box-shadow:var(--ombre)}
.panneau.actif{display:grid; grid-template-columns:1fr 1fr; gap:36px}
.panneau h3{font-size:23px; margin-bottom:12px}
.panneau > div > p{color:var(--encre-doux)}
.liste--bleu li::before{background:var(--prod-1)}

/* Fonctionnalités */
.fonctions{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px}
.fonction{background:var(--blanc); border:1px solid var(--gris-trait); border-radius:16px; padding:26px;
  border-left:4px solid var(--prod-2); transition:transform .2s}
.fonction:nth-child(3n-1){border-left-color:var(--prod-1)}
.fonction:nth-child(3n){border-left-color:var(--prod-3)}
.fonction:hover{transform:translateY(-3px)}
.fonction h3{font-size:18.5px; margin-bottom:9px}
.fonction p{font-size:15px; color:var(--encre-doux)}

/* Captures d'écran */
.captures{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px}
.capture figure{margin:0}
.cadre{border:1px solid var(--gris-trait); border-radius:14px; overflow:hidden; background:var(--blanc)}
.cadre__barre{display:flex; gap:6px; padding:11px 14px; background:var(--gris); border-bottom:1px solid var(--gris-trait)}
.cadre__barre i{width:9px; height:9px; border-radius:50%; background:#C9CFCD}
.cadre__ecran{aspect-ratio:16/10; padding:16px; display:grid; gap:9px; align-content:start; background:#FBFCFC}
.sq{background:linear-gradient(90deg,#E8ECEF,#F3F6F7); border-radius:5px; height:11px}
.sq--titre{height:16px; width:52%; background:linear-gradient(90deg,#CBDAEA,#E4ECF4)}
.sq--bloc{height:58px; background:linear-gradient(135deg,#EDF2F7,#F7FAFB)}
.sq--court{width:68%}
.sq--vert{background:linear-gradient(90deg,#D8EDDF,#EDF7F1)}
.capture figcaption{font-size:14.5px; color:var(--encre-doux); margin-top:12px; display:flex; gap:10px; align-items:center}
.provisoire{font-family:var(--data); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 8px; border-radius:5px; background:var(--or-pale); color:var(--or-sombre)}

/* Abonnements */
.offres-abo{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px}
.abo{background:var(--blanc); border:1px solid var(--gris-trait); border-radius:20px; padding:32px;
  display:flex; flex-direction:column}
.abo--phare{border:2px solid var(--prod-1); position:relative}
.abo__ruban{position:absolute; top:-13px; left:32px; background:var(--prod-1); color:var(--blanc);
  font-family:var(--data); font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:5px 12px; border-radius:6px}
.abo h3{font-size:22px}
.abo__cible{font-size:14.5px; color:var(--encre-doux); margin-top:6px}
.abo__prix{font-family:var(--data); font-size:15px; color:var(--nuit); margin:22px 0 4px; padding:14px;
  background:var(--gris); border-radius:10px; text-align:center}
.abo__prix small{display:block; font-family:var(--corps); font-size:13px; color:var(--encre-doux); margin-top:4px}
.abo .liste{margin-top:22px}
.abo .btn{margin-top:26px}

/* Prérequis */
.prerequis{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:44px;
  background:var(--gris-trait); border:1px solid var(--gris-trait); border-radius:18px; overflow:hidden}
.prerequis > div{background:var(--blanc); padding:30px 26px}
.prerequis h3{font-size:18px; margin-bottom:14px}
.prerequis dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 16px; font-size:14.8px}
.prerequis dt{color:var(--encre-doux)}
.prerequis dd{margin:0; font-family:var(--data); font-size:14px; color:var(--nuit)}

/* Notes de version */
.versions{margin-top:44px; display:grid; gap:0}
.version{display:grid; grid-template-columns:170px 1fr; gap:28px; padding:26px 0; border-top:1px solid var(--gris-trait)}
.version:last-child{border-bottom:1px solid var(--gris-trait)}
.version__num{font-family:var(--data); font-size:15px; color:var(--prod-1)}
.version__date{font-size:13.5px; color:var(--encre-doux); margin-top:4px}
.version h3{font-size:18px; margin-bottom:10px}

/* FAQ */
.faq{margin-top:40px; max-width:860px}
.question{border-bottom:1px solid var(--gris-trait)}
.question__btn{width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:22px 44px 22px 0;
  font-family:var(--display); font-weight:600; font-size:18px; color:var(--nuit); position:relative; line-height:1.35}
.question__btn::after{content:"+"; position:absolute; right:8px; top:50%; translate:0 -50%;
  font-family:var(--data); font-size:22px; color:var(--prod-1); transition:transform .2s}
.question__btn[aria-expanded="true"]::after{transform:rotate(45deg)}
.question__rep{display:none; padding:0 40px 24px 0; color:var(--encre-doux); font-size:15.8px}
.question__rep.ouverte{display:block}

@media (max-width:1100px){
  .publics,.fonctions,.captures,.offres-abo,.prerequis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .publics,.fonctions,.captures,.offres-abo,.prerequis{grid-template-columns:1fr}
  .panneau.actif{grid-template-columns:1fr; gap:24px; padding:26px}
  .version{grid-template-columns:1fr; gap:10px}
}


/* Libellé réservé aux lecteurs d'écran */
.visuellement-cachee{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}


/* ============================================================
   FORMULAIRE DE CONTACT
   ============================================================ */
.contact{display:grid; grid-template-columns:1.25fr .75fr; gap:44px; margin-top:44px; align-items:start}
.formulaire{background:var(--blanc); border:1px solid var(--gris-trait); border-radius:20px;
  padding:36px; box-shadow:var(--ombre)}
.champs{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.champ-f{display:flex; flex-direction:column; gap:7px}
.champ-f--large{grid-column:1 / -1}
.champ-f label{font-size:14.5px; font-weight:500; color:var(--nuit)}
.champ-f label .facultatif{font-weight:400; color:var(--encre-doux); font-size:13.5px}
.champ-f input,.champ-f select,.champ-f textarea{
  font-family:var(--corps); font-size:16px; padding:13px 15px; border:1px solid var(--gris-trait);
  border-radius:10px; background:var(--blanc); color:var(--encre); width:100%}
.champ-f textarea{resize:vertical; min-height:130px; line-height:1.6}
.champ-f input:focus,.champ-f select:focus,.champ-f textarea:focus{
  outline:none; border-color:var(--vert); box-shadow:0 0 0 3px rgba(0,125,47,.14)}
.champ-f input[aria-invalid="true"],.champ-f textarea[aria-invalid="true"],
.champ-f select[aria-invalid="true"]{border-color:#B3261E; box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.erreur{font-size:13.5px; color:#B3261E; min-height:0}
.erreur:empty{display:none}

.consentement{grid-column:1 / -1; display:flex; gap:12px; align-items:flex-start;
  font-size:14.5px; color:var(--encre-doux); line-height:1.55}
.consentement input{width:19px; height:19px; margin-top:2px; flex-shrink:0; accent-color:var(--vert)}
.formulaire__pied{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:26px}
.formulaire__note{font-size:13.5px; color:var(--encre-doux)}

.envoye{display:none; text-align:center; padding:40px 20px}
.envoye.visible{display:block}
.envoye__coche{width:58px; height:58px; border-radius:50%; background:var(--vert-clair); color:var(--vert);
  display:grid; place-items:center; font-size:27px; margin:0 auto 20px}
.envoye h3{font-size:23px; margin-bottom:12px}
.envoye p{color:var(--encre-doux); max-width:44ch; margin:0 auto}
.formulaire.envoi .champs,.formulaire.envoi .formulaire__pied,.formulaire.envoi > p{display:none}

/* Colonne de droite */
.coordonnees{display:grid; gap:16px}
.bloc-contact{background:var(--blanc); border:1px solid var(--gris-trait); border-radius:16px; padding:26px}
.bloc-contact h3{font-size:18px; margin-bottom:14px}
.bloc-contact ul{list-style:none; padding:0; margin:0; display:grid; gap:12px; font-size:15.5px}
.bloc-contact li{display:grid; grid-template-columns:26px 1fr; gap:12px; align-items:start; color:var(--encre-doux)}
.bloc-contact li span:first-child{color:var(--vert); font-size:15px; text-align:center}
.bloc-contact a:hover{color:var(--vert)}
.bloc-whatsapp{background:#E8F6EC; border-color:#BFE3C9}
.bloc-whatsapp p{font-size:15px; color:var(--encre-doux); margin-bottom:18px}
.btn--whatsapp{background:#128C7E; color:var(--blanc); border-color:#128C7E; width:100%}
.btn--whatsapp:hover{background:#0E6F64; border-color:#0E6F64}
.delai{font-family:var(--data); font-size:12.5px; letter-spacing:.06em; color:var(--vert); text-transform:uppercase}

@media (max-width:960px){
  .contact{grid-template-columns:1fr; gap:28px}
  .champs{grid-template-columns:1fr}
  .formulaire{padding:26px}
}