/* =========================================================
   HTAG — SOCLE COMMUN
   01 variables · 02 thèmes de pôles · 03 remise à zéro
   04 typographie · 05 fond · 06 verre · 07 boutons
   08 en-tête · 09 pied · 10 voile de transition
   11 utilitaires · 12 bouton WhatsApp · 13 accessibilité
   ========================================================= */

/* ---------- 01 — VARIABLES ---------- */
:root{
  /* socle nuit */
  --nuit-900:#04121c;
  --nuit-800:#071a27;
  --nuit-700:#092435;
  --nuit-600:#0d3049;

  /* couleurs de marque — charte « Un #, quatre couleurs » */
  --vert:#39dd0b;
  --vert-clair:#7cff4a;
  --ciel:#2ec4e8;
  --ciel-clair:#7fdcf2;
  --violet:#b48bff;
  --violet-clair:#d3bcff;
  --blanc:#ffffff;
  --brume:#eef5f0;
  --acier:#93aab5;
  --whatsapp:#25d366;

  /* couleur active : cyan pour la maison mère, surchargée par pôle (bloc 02) */
  --accent:var(--ciel);
  --accent-clair:var(--ciel-clair);
  --accent-encre:var(--nuit-900);

  /* typographie */
  --police:"Poppins","Segoe UI",system-ui,sans-serif;

  /* verre */
  --verre-fond:rgba(255,255,255,.055);
  --verre-bord:rgba(255,255,255,.12);
  --verre-flou:blur(22px) saturate(155%);
  --verre-ombre:0 26px 60px rgba(0,0,0,.42);

  /* mesures */
  --rayon:20px;
  --rayon-s:12px;
  --large:1200px;
  --entete:76px;

  /* rythme */
  --lent:.7s cubic-bezier(.16,1,.3,1);
  --moyen:.38s cubic-bezier(.16,1,.3,1);
  --vif:.2s ease;
}

/* ---------- 02 — THÈMES DE PÔLES ---------- */
html[data-pole="media"]{
  --accent:var(--vert);
  --accent-clair:var(--vert-clair);
  --accent-encre:var(--nuit-900);
}
html[data-pole="creatif"]{
  --accent:var(--violet);
  --accent-clair:var(--violet-clair);
  --accent-encre:var(--nuit-900);
}
html[data-pole="academie"]{
  --accent:var(--brume);
  --accent-clair:var(--blanc);
  --accent-encre:var(--nuit-900);
  --verre-fond:rgba(255,255,255,.085);
  --verre-bord:rgba(255,255,255,.2);
}
html[data-pole="academie"] .surtitre,
html[data-pole="academie"] .service__num,
html[data-pole="academie"] .marque__nom em,
html[data-pole="academie"] .fil a:hover{ color:var(--vert); }
html[data-pole="academie"] .liste-marquee i,
html[data-pole="academie"] .jauge{ background:var(--vert); }

/* ---------- 03 — REMISE À ZÉRO ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
[hidden]{ display:none !important; }
img,video{ max-width:100%; display:block; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--entete) + 16px); }

/* ---------- 04 — TYPOGRAPHIE ---------- */
body{
  font-family:var(--police);
  font-size:16px; line-height:1.65;
  color:var(--brume);
  background:var(--nuit-900);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.titre{
  font-family:var(--police);
  font-weight:700; letter-spacing:-.02em; line-height:1.1;
}
h1{ font-size:clamp(34px,5.4vw,66px); }
h2{ font-size:clamp(26px,3.6vw,42px); }
h3{ font-size:clamp(18px,1.9vw,23px); font-weight:600; letter-spacing:-.01em; }
p{ max-width:70ch; }
.plomb{ color:var(--acier); }
.surtitre{
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  font-weight:600; display:block; margin-bottom:14px;
}

/* ---------- 05 — FOND ---------- */
.fond{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 620px at 78% -8%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 62%),
    radial-gradient(760px 560px at 6% 22%, rgba(13,48,73,.62), transparent 58%),
    linear-gradient(178deg, var(--nuit-800), var(--nuit-900) 58%);
  transition:background var(--lent);
}
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23b)'/%3E%3C/svg%3E");
}

/* ---------- 06 — VERRE ---------- */
.verre{
  background:var(--verre-fond);
  border:1px solid var(--verre-bord);
  border-radius:var(--rayon);
  backdrop-filter:var(--verre-flou);
  -webkit-backdrop-filter:var(--verre-flou);
  box-shadow:var(--verre-ombre);
}
/* reflet qui suit le pointeur : alimenté par js/main.js */
[data-spot]{ position:relative; overflow:hidden; }
[data-spot]::before{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background:radial-gradient(340px circle at var(--x,50%) var(--y,0%),
             color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%);
  opacity:0; transition:opacity var(--moyen);
}
[data-spot]:hover::before{ opacity:1; }

/* ---------- 07 — BOUTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:999px;
  font-family:var(--police); font-weight:600; font-size:15px; line-height:1.2;
  transition:transform var(--vif), box-shadow var(--vif), background var(--vif);
}
.btn--plein{
  background:var(--accent); color:var(--accent-encre);
  box-shadow:0 12px 30px color-mix(in srgb, var(--accent) 26%, transparent);
}
.btn--plein:hover{ transform:translateY(-2px); box-shadow:0 18px 40px color-mix(in srgb, var(--accent) 34%, transparent); }
.btn--fil{ border:1px solid var(--verre-bord); background:var(--verre-fond); backdrop-filter:var(--verre-flou); }
.btn--fil:hover{ border-color:var(--accent); color:var(--accent-clair); }
.btn--wa{ background:var(--whatsapp); color:#04121c; box-shadow:0 12px 30px rgba(37,211,102,.28); }
.btn--wa:hover{ box-shadow:0 18px 40px rgba(37,211,102,.38); }

/* ---------- 08 — EN-TÊTE ---------- */
.entete{
  position:fixed; inset:0 0 auto; z-index:60; height:var(--entete);
  display:flex; align-items:center;
  transition:background var(--moyen), border-color var(--moyen);
  border-bottom:1px solid transparent;
}
.entete.est-collee{
  background:rgba(4,18,28,.72);
  backdrop-filter:var(--verre-flou); -webkit-backdrop-filter:var(--verre-flou);
  border-bottom-color:var(--verre-bord);
}
.entete__interieur{
  width:min(100% - 32px, var(--large)); margin-inline:auto;
  display:flex; align-items:center; gap:26px;
}
.marque{ display:flex; align-items:center; gap:11px; }
.marque img{ width:38px; height:38px; }
.marque__nom{ font-family:var(--police); font-weight:700; font-size:20px; letter-spacing:-.02em; }
.marque__nom em{ font-style:normal; color:var(--accent); }

.nav{ margin-left:auto; display:flex; align-items:center; gap:26px; }
.nav a{ font-size:14.5px; color:var(--acier); transition:color var(--vif); position:relative; }
.nav a:hover,.nav a.est-active{ color:var(--brume); }
.nav a.est-active::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px;
  background:var(--accent); border-radius:2px;
}
.nav a.nav__cta{
  color:var(--accent-encre); background:var(--accent); font-weight:600;
  padding:9px 18px; border-radius:999px;
}
.nav a.nav__cta:hover{ color:var(--accent-encre); filter:brightness(1.08); }
.jauge{
  position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:linear-gradient(90deg, var(--accent), var(--accent-clair));
}

.burger{ display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--verre-bord); }
.burger span{ display:block; width:18px; height:2px; margin:3px auto; background:var(--brume); transition:transform var(--vif), opacity var(--vif); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

.tiroir{
  position:fixed; inset:var(--entete) 12px auto; z-index:59;
  padding:18px; display:none; flex-direction:column; gap:2px;
  background:rgba(7,26,39,.94);
}
.tiroir.est-ouvert{ display:flex; }
.tiroir a{ padding:12px 14px; border-radius:12px; font-weight:500; }
.tiroir a:hover{ background:rgba(255,255,255,.06); }

/* ---------- 09 — PIED ---------- */
.pied{ margin-top:64px; border-top:1px solid var(--verre-bord); padding:48px 0 30px; }
.pied__interieur{ width:min(100% - 32px, var(--large)); margin-inline:auto; }
.pied__haut{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:38px; }
.pied h4{ font-size:14px; font-weight:600; margin-bottom:14px; color:var(--brume); }
.pied li{ margin-bottom:9px; }
.pied a{ color:var(--acier); font-size:14.5px; transition:color var(--vif); }
.pied a:hover{ color:var(--accent-clair); }
.pied__bas{
  margin-top:36px; padding-top:20px; border-top:1px solid rgba(255,255,255,.07);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  font-size:13px; color:var(--acier);
}

/* ---------- 10 — VOILE DE TRANSITION ---------- */
.voile{
  position:fixed; inset:0; z-index:200; pointer-events:none;
  background:var(--voile-teinte,var(--vert));
  clip-path:circle(0% at var(--vx,50%) var(--vy,50%));
  transition:clip-path .62s cubic-bezier(.7,0,.3,1);
  display:grid; place-items:center;
}
.voile.est-ouvert{ clip-path:circle(150% at var(--vx,50%) var(--vy,50%)); }
.voile img{ width:96px; height:96px; opacity:0; transform:scale(.85); transition:opacity .3s .18s, transform .45s .18s; }
.voile.est-ouvert img{ opacity:1; transform:scale(1); }

/* ---------- 11 — UTILITAIRES ---------- */
.enveloppe{ width:min(100% - 32px, var(--large)); margin-inline:auto; }
.section{ padding:88px 0; }
.section--serre{ padding:60px 0; }
.tete-section{ max-width:62ch; margin-bottom:38px; }
.tete-section p{ margin-top:14px; color:var(--acier); }

/* apparition douce, un seul mouvement par bloc */
.apparait{ opacity:0; transform:translateY(22px); transition:opacity .6s, transform .6s; }
html:not(.js) .apparait{ opacity:1; transform:none; }
.apparait.est-vu{ opacity:1; transform:none; }

/* retour en haut : au-dessus du bouton WhatsApp, jamais sur le texte */
.haut{
  position:fixed; right:22px; bottom:94px; z-index:55;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; opacity:0; transform:translateY(14px);
  pointer-events:none; transition:opacity var(--moyen), transform var(--moyen);
}
.haut.est-vu{ opacity:1; transform:none; pointer-events:auto; }

/* ---------- 12 — BOUTON WHATSAPP FLOTTANT ---------- */
.wa-flottant{
  position:fixed; right:18px; bottom:20px; z-index:56;
  display:flex; align-items:center; gap:10px;
  height:58px; padding:0 20px 0 16px; border-radius:999px;
  background:var(--whatsapp); color:#04121c;
  font-weight:600; font-size:15px;
  box-shadow:0 14px 34px rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,.5);
  transition:transform var(--vif), box-shadow var(--vif);
}
.wa-flottant svg{ width:26px; height:26px; flex:none; }
.wa-flottant:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(0,0,0,.45); }
@media (max-width:640px){
  .wa-flottant{ width:56px; height:56px; padding:0; justify-content:center; right:14px; bottom:14px; }
  .wa-flottant span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .haut{ right:20px; bottom:82px; width:40px; height:40px; }
  .pied{ padding-bottom:84px; }
}

/* ---------- 13 — ACCESSIBILITÉ ---------- */
:focus-visible{ outline:2px solid var(--accent-clair); outline-offset:3px; border-radius:6px; }
.saut{
  position:absolute; left:-9999px; top:8px; z-index:300;
  padding:10px 16px; border-radius:10px; background:var(--accent); color:var(--accent-encre);
}
.saut:focus{ left:16px; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .apparait{ opacity:1; transform:none; }
}

/* ---------- MOBILE ---------- */
@media (max-width:900px){
  .nav{ display:none; }
  .burger{ display:block; margin-left:auto; }
  .section{ padding:56px 0; }
  .section--serre{ padding:44px 0; }
  .tete-section{ margin-bottom:28px; }
  .pied{ margin-top:40px; }
  .pied__haut{ grid-template-columns:1fr; gap:26px; }
}