/* ==========================================================================
   INSIGHT TECHNOLOGY — socle graphique
   Direction : lumineux, futuriste, epure, anime.
   Aucun framework : un seul fichier, deployable par simple FTP.
   --------------------------------------------------------------------------
   1. Jetons        6. Verre & lueurs     11. Ruban defilant
   2. Reset         7. En-tete            12. Pied de page
   3. Ossature      8. Heros              13. Animations
   4. Typographie   9. Cartes             14. Adaptatif
   5. Boutons      10. Chiffres cles
   ========================================================================== */

/* --- 1. Jetons ----------------------------------------------------------- */
:root{
  /* Fonds clairs */
  --blanc:      #ffffff;
  --brume:      #f5f9ff;
  --brume-2:    #eaf2fd;
  --givre:      #dce9fa;

  /* Encres */
  --encre:      #06121f;
  --encre-2:    #2e4a68;
  --encre-3:    #6f88a6;

  /* Marque */
  --nuit:       #04101f;
  --nuit-2:     #08192f;
  --bleu-nuit:  #0b3c7a;
  --bleu:       #0b6fc4;
  --cyan:       #29a9f2;
  --cyan-clair: #7fd0ff;
  --orange:     #ff7a00;
  --orange-2:   #f7941e;
  --violet:     #7b2fbe;
  --teal:       #12857f;

  /* Lueurs */
  --lueur-bleu:   rgba(11,111,196,.38);
  --lueur-cyan:   rgba(41,169,242,.34);
  --lueur-orange: rgba(255,122,0,.26);
  --lueur-violet: rgba(123,47,190,.22);

  /* Verre */
  --verre:        rgba(255,255,255,.72);
  --verre-bord:   rgba(11,60,122,.12);
  --verre-bord-2: rgba(11,60,122,.22);

  /* Degrades */
  --deg-marque: linear-gradient(110deg,var(--bleu-nuit) 0%,var(--bleu) 46%,var(--cyan) 100%);
  --deg-chaud:  linear-gradient(110deg,var(--cyan) 0%,var(--orange) 100%);
  --deg-texte:  linear-gradient(100deg,var(--bleu) 0%,var(--cyan) 55%,var(--orange) 115%);

  /* Rythme */
  --largeur:   1200px;
  --gouttiere: 24px;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 26px;
  --r-xl: 34px;

  --ombre-s: 0 1px 2px rgba(6,18,31,.05), 0 4px 14px rgba(11,60,122,.06);
  --ombre-m: 0 6px 18px rgba(11,60,122,.08), 0 18px 44px rgba(11,60,122,.09);
  --ombre-l: 0 12px 28px rgba(11,60,122,.10), 0 40px 90px rgba(11,60,122,.14);

  --tr: 200ms cubic-bezier(.4,0,.2,1);
  --tr-lent: 520ms cubic-bezier(.22,1,.36,1);
}

/* --- 2. Reset ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.7;
  color:var(--encre-2);
  background:var(--blanc);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,canvas{ max-width:100%; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }
a{ color:var(--bleu); text-decoration:none; transition:color var(--tr); }
a:hover{ color:var(--cyan); }
:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; border-radius:6px; }

/* Selection */
::selection{ background:rgba(41,169,242,.24); color:var(--encre); }

/* --- 3. Ossature --------------------------------------------------------- */
.contenu{ width:100%; max-width:var(--largeur); margin-inline:auto; padding-inline:var(--gouttiere); }
.contenu--etroit{ max-width:800px; }

.section{ position:relative; padding:clamp(64px,9vw,124px) 0; }
.section--brume{ background:var(--brume); }
.section--nuit{ background:var(--nuit); color:#b9cee6; }
.section--nuit h1,.section--nuit h2,.section--nuit h3,.section--nuit h4{ color:#fff; }

/* Trame technique en fond, tres discrete */
.trame{ position:relative; }
.trame::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, rgba(11,60,122,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,60,122,.055) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 78%);
}
.trame > *{ position:relative; z-index:1; }

/* --- 4. Typographie ------------------------------------------------------ */
h1,h2,h3,h4,h5{
  font-family:'Space Grotesk','Manrope','Inter',sans-serif;
  color:var(--encre);
  line-height:1.12;
  letter-spacing:-.028em;
  font-weight:700;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.35rem,6vw,4.15rem); letter-spacing:-.038em; }
h2{ font-size:clamp(1.8rem,4vw,2.9rem); letter-spacing:-.032em; }
h3{ font-size:clamp(1.2rem,2.2vw,1.5rem); }
h4{ font-size:1.05rem; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
strong{ color:var(--encre); font-weight:640; }
.section--nuit strong{ color:#fff; }

.degrade-texte{
  background:var(--deg-texte);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* Etiquette de section */
.puce{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 11px; margin-bottom:20px;
  border:1px solid var(--verre-bord); border-radius:99px;
  background:var(--verre); backdrop-filter:blur(10px);
  font-size:.76rem; font-weight:650; letter-spacing:.11em; text-transform:uppercase;
  color:var(--bleu-nuit);
  box-shadow:var(--ombre-s);
}
.puce::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 4px rgba(255,122,0,.18);
  animation:pulsation 2.4s ease-in-out infinite;
}
.section--nuit .puce{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#cfe2f7;
}

.entete-section{ max-width:760px; margin:0 auto clamp(40px,5vw,68px); text-align:center; }
.entete-section--gauche{ margin-inline:0; text-align:left; }
.entete-section p{ font-size:1.1rem; color:var(--encre-3); }
.section--nuit .entete-section p{ color:#89a6c6; }

.chapo{ font-size:clamp(1.05rem,1.5vw,1.22rem); color:var(--encre-3); max-width:60ch; }

/* --- 5. Boutons ---------------------------------------------------------- */
.bouton{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px;
  border:1px solid transparent; border-radius:var(--r-s);
  font-family:'Space Grotesk','Inter',sans-serif;
  font-size:.97rem; font-weight:600; line-height:1; letter-spacing:-.01em;
  cursor:pointer; white-space:nowrap;
  transition:transform var(--tr), box-shadow var(--tr), background var(--tr),
             color var(--tr), border-color var(--tr);
}
.bouton:hover{ transform:translateY(-2px); }
.bouton:active{ transform:translateY(0); }
/* Reflet qui balaie le bouton au survol */
.bouton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.32) 50%,transparent 80%);
  transform:translateX(-140%);
  transition:transform 620ms cubic-bezier(.22,1,.36,1);
}
.bouton:hover::after{ transform:translateX(140%); }

.bouton--primaire{
  background:var(--deg-marque); color:#fff;
  box-shadow:0 6px 20px rgba(11,111,196,.32);
}
.bouton--primaire:hover{ color:#fff; box-shadow:0 12px 30px rgba(11,111,196,.42); }

.bouton--orange{
  background:linear-gradient(110deg,var(--orange-2),var(--orange));
  color:#fff; box-shadow:0 6px 20px rgba(255,122,0,.32);
}
.bouton--orange:hover{ color:#fff; box-shadow:0 12px 30px rgba(255,122,0,.42); }

.bouton--verre{
  background:var(--verre); color:var(--bleu-nuit);
  border-color:var(--verre-bord-2); backdrop-filter:blur(10px);
  box-shadow:var(--ombre-s);
}
.bouton--verre:hover{ color:var(--bleu); border-color:var(--bleu); box-shadow:var(--ombre-m); }

.bouton--fantome{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.bouton--fantome:hover{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.6); }

.bouton--large{ padding:18px 34px; font-size:1.04rem; }
.bouton svg{ width:17px; height:17px; flex:0 0 auto; }

.groupe-boutons{ display:flex; flex-wrap:wrap; gap:14px; }
.groupe-boutons--centre{ justify-content:center; }

/* Lien flechee */
.lien-fleche{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:.94rem;
}
.lien-fleche svg{ width:16px; height:16px; transition:transform var(--tr); }
.lien-fleche:hover svg{ transform:translateX(4px); }

/* --- 6. Verre & lueurs --------------------------------------------------- */
.verre{
  background:var(--verre);
  border:1px solid var(--verre-bord);
  border-radius:var(--r-l);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:var(--ombre-m);
}

/* Halos lumineux positionnables */
.halo{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  filter:blur(80px); opacity:.85;
}
.halo--bleu{   background:radial-gradient(circle,var(--lueur-bleu),transparent 70%); }
.halo--cyan{   background:radial-gradient(circle,var(--lueur-cyan),transparent 70%); }
.halo--orange{ background:radial-gradient(circle,var(--lueur-orange),transparent 70%); }
.halo--violet{ background:radial-gradient(circle,var(--lueur-violet),transparent 70%); }

/* --- 7. En-tete ---------------------------------------------------------- */
.entete{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid transparent;
  transition:background var(--tr), border-color var(--tr), box-shadow var(--tr);
}
.entete[data-defile="true"]{
  background:rgba(255,255,255,.9);
  border-bottom-color:var(--verre-bord);
  box-shadow:0 4px 24px rgba(11,60,122,.07);
}
.entete__barre{ display:flex; align-items:center; gap:20px; height:78px; }

/* Logo : pastille sombre + typographie */
.logo{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.logo__pastille{
  display:grid; place-items:center;
  width:46px; height:46px; padding:4px;
  border-radius:13px; background:#fff;
  border:1px solid var(--verre-bord);
  box-shadow:0 2px 8px rgba(11,60,122,.10);
  transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.logo__pastille img{ width:100%; height:auto; }
.logo:hover .logo__pastille{
  transform:translateY(-2px) rotate(-3deg);
  border-color:rgba(41,169,242,.5);
  box-shadow:0 8px 20px rgba(11,111,196,.22);
}
.logo__mot{ display:flex; flex-direction:column; line-height:1; }
.logo__mot b{
  font-family:'Space Grotesk',sans-serif; font-size:1.14rem; font-weight:700;
  letter-spacing:-.03em; color:var(--encre);
}
.logo__mot span{
  font-size:.63rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--encre-3); margin-top:3px;
}

.nav{ margin-left:auto; }
.nav__liste{ display:flex; align-items:center; gap:2px; }
.nav__item{ position:relative; }
.nav__lien{
  position:relative; display:block; padding:10px 15px; border-radius:var(--r-s);
  font-size:.94rem; font-weight:550; color:var(--encre-2);
  transition:color var(--tr), background var(--tr);
}
.nav__lien:hover{ color:var(--bleu); background:rgba(11,111,196,.06); }
.nav__lien--actif{ color:var(--encre); font-weight:650; }
.nav__lien--actif::before{
  content:""; position:absolute; left:15px; right:15px; bottom:3px; height:2px;
  border-radius:2px; background:var(--deg-chaud);
}

/* Sous-menu */
.nav__bascule{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; cursor:pointer;
}
.nav__bascule svg{ width:12px; height:12px; transition:transform var(--tr); opacity:.6; }
.nav__item:hover .nav__bascule svg,
.nav__item:focus-within .nav__bascule svg{ transform:rotate(180deg); }
.nav__sous{
  position:absolute; top:calc(100% + 12px); left:0; min-width:280px; padding:9px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--verre-bord); border-radius:var(--r-m);
  box-shadow:var(--ombre-l);
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98);
  transition:opacity var(--tr), transform var(--tr), visibility var(--tr);
}
.nav__item:hover .nav__sous,
.nav__item:focus-within .nav__sous{ opacity:1; visibility:visible; transform:none; }
.nav__sous a{
  display:block; padding:11px 14px; border-radius:var(--r-s);
  font-size:.93rem; font-weight:600; color:var(--encre);
}
.nav__sous a:hover{ background:var(--brume); color:var(--bleu); }
.nav__sous a span{
  display:block; margin-top:2px; font-size:.8rem; font-weight:400; color:var(--encre-3);
}

.entete__actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.entete__actions .bouton{ padding:12px 22px; font-size:.9rem; }

/* Burger */
.burger{
  display:none; width:46px; height:46px; padding:0; margin-left:auto;
  border:1px solid var(--verre-bord-2); border-radius:var(--r-s);
  background:var(--verre); cursor:pointer;
}
.burger span{
  display:block; width:20px; height:2px; margin:4.5px auto; border-radius:2px;
  background:var(--encre); transition:transform var(--tr), opacity var(--tr);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* --- 8. Heros ------------------------------------------------------------ */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(70px,10vw,132px) 0 clamp(60px,8vw,104px);
  background:
    radial-gradient(1200px 620px at 78% -12%, rgba(41,169,242,.20), transparent 62%),
    radial-gradient(900px 520px at 8% 8%, rgba(11,60,122,.14), transparent 60%),
    linear-gradient(180deg,var(--brume) 0%,var(--blanc) 72%);
}
/* Aurore animee */
.hero__aurore{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.hero__aurore i{
  position:absolute; display:block; border-radius:50%; filter:blur(84px);
  will-change:transform;
}
.hero__aurore i:nth-child(1){
  width:640px; height:640px; top:-260px; right:-140px;
  background:radial-gradient(circle,var(--lueur-bleu),transparent 68%);
  animation:derive-a 22s ease-in-out infinite alternate;
}
.hero__aurore i:nth-child(2){
  width:520px; height:520px; bottom:-240px; left:-120px;
  background:radial-gradient(circle,var(--lueur-cyan),transparent 68%);
  animation:derive-b 26s ease-in-out infinite alternate;
}
.hero__aurore i:nth-child(3){
  width:420px; height:420px; top:36%; left:44%;
  background:radial-gradient(circle,var(--lueur-orange),transparent 68%);
  animation:derive-c 30s ease-in-out infinite alternate;
}
/* Constellation dessinee en JS */
.hero__toile{ position:absolute; inset:0; z-index:0; opacity:.55; pointer-events:none; }

.hero__grille{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(36px,5vw,68px); align-items:center;
}
.hero__titre{ margin-bottom:.42em; }
.hero__accroche{ font-size:clamp(1.06rem,1.55vw,1.24rem); color:var(--encre-3); max-width:54ch; }
.hero__boutons{ margin-top:34px; }
.hero__note{
  display:flex; align-items:center; gap:9px; margin-top:22px;
  font-size:.87rem; color:var(--encre-3);
}
.hero__note svg{ width:16px; height:16px; color:var(--bleu); flex:0 0 auto; }

/* Hero interieur */
.hero--page{ padding:clamp(56px,7vw,92px) 0 clamp(48px,6vw,72px); }
.hero--page .hero__grille{ grid-template-columns:1fr; max-width:860px; margin-inline:auto; text-align:center; }
.hero--page .hero__accroche{ margin-inline:auto; }
.hero--page .groupe-boutons{ justify-content:center; }

.ariane{ font-size:.85rem; color:var(--encre-3); margin-bottom:18px; }
.ariane span{ margin:0 8px; opacity:.5; }

/* Console : le visuel du hero */
.console{
  position:relative; padding:22px;
  background:linear-gradient(165deg,rgba(255,255,255,.92),rgba(240,247,255,.78));
  border:1px solid var(--verre-bord); border-radius:var(--r-xl);
  backdrop-filter:blur(20px) saturate(160%);
  box-shadow:var(--ombre-l);
  animation:flottement 7s ease-in-out infinite;
}
.console::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg,rgba(41,169,242,.6),transparent 42%,transparent 62%,rgba(255,122,0,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.console__barre{
  display:flex; align-items:center; gap:8px;
  padding-bottom:16px; margin-bottom:18px;
  border-bottom:1px solid var(--verre-bord);
}
.console__points{ display:flex; gap:6px; }
.console__points i{ width:9px; height:9px; border-radius:50%; background:var(--givre); }
.console__points i:first-child{ background:var(--orange); }
.console__points i:nth-child(2){ background:var(--cyan); }
.console__nom{
  font-family:'Space Grotesk',sans-serif; font-size:.84rem; font-weight:600;
  color:var(--encre-3); letter-spacing:.02em;
}
.console__etat{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:99px;
  background:rgba(41,169,242,.12); color:var(--bleu);
  font-size:.74rem; font-weight:700;
}
.console__etat::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan);
  animation:pulsation 1.8s ease-in-out infinite;
}

.console__ligne{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 0; border-bottom:1px dashed var(--givre); font-size:.92rem;
}
.console__ligne:last-of-type{ border-bottom:0; }
.console__ligne > span{ color:var(--encre-3); display:inline-flex; align-items:center; gap:9px; }
.console__ligne b{ font-variant-numeric:tabular-nums; color:var(--encre); font-weight:650; }
.console__icone{
  display:grid; place-items:center; width:28px; height:28px; border-radius:8px;
  background:rgba(11,111,196,.1); color:var(--bleu); flex:0 0 auto;
}
.console__icone svg{ width:15px; height:15px; }

.barre-progression{ height:7px; border-radius:4px; background:var(--brume-2); overflow:hidden; margin-top:6px; }
.barre-progression i{
  display:block; height:100%; width:0; border-radius:4px; background:var(--deg-marque);
  transition:width 1.6s cubic-bezier(.22,1,.36,1);
}
.console__pied{
  display:flex; align-items:center; gap:10px;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--verre-bord);
  font-size:.85rem; color:var(--encre-3);
}

.hero__visuel{ position:relative; }

/* Vignettes qui gravitent autour de la console */
.vignette{
  position:absolute; z-index:3;
  display:flex; align-items:center; gap:10px;
  padding:11px 16px; border-radius:14px;
  background:rgba(255,255,255,.9); border:1px solid var(--verre-bord);
  backdrop-filter:blur(14px);
  box-shadow:var(--ombre-m);
  font-size:.83rem; font-weight:600; color:var(--encre);
  white-space:nowrap;
}
.vignette svg{ width:16px; height:16px; }
.vignette--a{ top:-18px; left:-34px; color:var(--bleu); animation:flottement 6s ease-in-out infinite; }
.vignette--b{ bottom:-20px; right:-16px; color:var(--orange); animation:flottement 6s ease-in-out .9s infinite reverse; }

/* --- 9. Cartes ----------------------------------------------------------- */
.grille{ display:grid; gap:22px; }
.grille--2{ grid-template-columns:repeat(2,1fr); }
.grille--3{ grid-template-columns:repeat(3,1fr); }
.grille--4{ grid-template-columns:repeat(4,1fr); }

.carte{
  position:relative; overflow:hidden;
  padding:30px 28px;
  background:var(--blanc);
  border:1px solid var(--verre-bord);
  border-radius:var(--r-l);
  box-shadow:var(--ombre-s);
  transition:transform var(--tr-lent), box-shadow var(--tr-lent), border-color var(--tr);
}
/* Lueur qui suit le curseur, alimentee par site.js */
.carte--lueur::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(340px circle at var(--x,50%) var(--y,50%),
             rgba(41,169,242,.14), transparent 62%);
  transition:opacity var(--tr);
}
.carte--lueur:hover::before{ opacity:1; }
.carte:hover{ transform:translateY(-5px); box-shadow:var(--ombre-m); border-color:var(--verre-bord-2); }
.carte > *{ position:relative; z-index:1; }
.carte h3{ margin-bottom:.42em; }
.carte p{ font-size:.96rem; }
.carte__lien{ display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-weight:650; font-size:.92rem; }
.carte__lien svg{ width:15px; height:15px; transition:transform var(--tr); }
.carte:hover .carte__lien svg{ transform:translateX(4px); }
.carte__numero{
  position:absolute; top:18px; right:24px; z-index:0;
  font-family:'Space Grotesk',sans-serif; font-size:3.4rem; font-weight:700;
  color:var(--brume-2); line-height:1; letter-spacing:-.04em;
}

.icone{
  display:grid; place-items:center;
  width:54px; height:54px; margin-bottom:22px;
  border-radius:15px; color:#fff;
  box-shadow:0 6px 18px rgba(11,60,122,.16);
}
.icone svg{ width:26px; height:26px; }
.icone--bleu{   background:linear-gradient(140deg,var(--bleu-nuit),var(--bleu)); }
.icone--cyan{   background:linear-gradient(140deg,var(--bleu),var(--cyan)); }
.icone--teal{   background:linear-gradient(140deg,#0a6f6a,var(--teal)); }
.icone--orange{ background:linear-gradient(140deg,var(--orange-2),var(--orange)); }
.icone--violet{ background:linear-gradient(140deg,#5a1d94,var(--violet)); }

.section--nuit .carte{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.1);
  color:#89a6c6; box-shadow:none;
}
.section--nuit .carte:hover{ background:rgba(255,255,255,.075); border-color:rgba(255,255,255,.2); }
.section--nuit .carte__numero{ color:rgba(255,255,255,.06); }

/* Liste cochee */
.liste-cochee{ display:grid; gap:12px; }
.liste-cochee li{ position:relative; padding-left:31px; font-size:.96rem; }
.liste-cochee li::before{
  content:""; position:absolute; left:0; top:.38em; width:19px; height:19px; border-radius:50%;
  background:rgba(41,169,242,.14)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fc4' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center/11px no-repeat;
}
.section--nuit .liste-cochee li::before{
  background-color:rgba(41,169,242,.2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd0ff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* --- 10. Chiffres cles --------------------------------------------------- */
.chiffres{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.chiffres li{ padding:8px; }
.chiffres b{
  display:block; font-family:'Space Grotesk',sans-serif; line-height:1;
  font-size:clamp(2.1rem,4.4vw,3.2rem); font-weight:700; letter-spacing:-.04em;
  background:var(--deg-texte); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.chiffres span{ display:block; margin-top:10px; font-size:.89rem; color:var(--encre-3); }
.section--nuit .chiffres span{ color:#89a6c6; }

/* --- 11. Ruban defilant -------------------------------------------------- */
.ruban{
  overflow:hidden; padding:18px 0;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.ruban__piste{ display:flex; width:max-content; animation:defilement 38s linear infinite; }
.ruban:hover .ruban__piste{ animation-play-state:paused; }
.ruban__piste span{
  display:inline-flex; align-items:center; gap:12px; padding:0 30px;
  font-family:'Space Grotesk',sans-serif; font-size:.92rem; font-weight:600;
  color:var(--encre-3); white-space:nowrap;
}
.ruban__piste span::after{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--cyan); opacity:.6;
}

/* --- 12. Pied de page ---------------------------------------------------- */
.pied{
  position:relative; overflow:hidden;
  background:var(--nuit); color:#8ea9c8;
  padding:clamp(56px,7vw,86px) 0 0;
}
.pied::before{
  content:""; position:absolute; top:-180px; left:50%; transform:translateX(-50%);
  width:900px; height:420px; border-radius:50%; filter:blur(90px); pointer-events:none;
  background:radial-gradient(circle,rgba(11,111,196,.4),transparent 68%);
}
.pied > *{ position:relative; z-index:1; }
.pied__grille{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:38px; }
.pied__logo{ margin-bottom:20px; }
/* Meme construction qu'en en-tete : la pastille reste blanche, seul le
   lettrage passe en clair pour tenir sur le fond sombre. */
.logo--pied .logo__pastille{ width:52px; height:52px; border-radius:15px; }
.logo--pied .logo__mot b{ color:#fff; font-size:1.24rem; }
.logo--pied .logo__mot span{ color:#8ea9c8; }
.pied__texte{ font-size:.93rem; max-width:36ch; }
.pied h4{
  color:#fff; font-size:.78rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:18px;
}
.pied ul{ display:grid; gap:11px; }
.pied a{ color:#8ea9c8; font-size:.93rem; }
.pied a:hover{ color:var(--cyan-clair); }
.pied__bas{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
  margin-top:48px; padding:22px 0; border-top:1px solid rgba(255,255,255,.09);
  font-size:.85rem;
}
.pied__bas nav{ display:flex; flex-wrap:wrap; gap:22px; }
.reseaux{ display:flex; gap:10px; margin-top:22px; }
.reseaux a{
  display:grid; place-items:center; width:40px; height:40px; border-radius:11px;
  background:rgba(255,255,255,.07); color:#cfe2f7;
  transition:background var(--tr), color var(--tr), transform var(--tr);
}
.reseaux a:hover{ background:var(--bleu); color:#fff; transform:translateY(-2px); }
.reseaux svg{ width:18px; height:18px; }

/* --- 13. Animations ------------------------------------------------------ */
@keyframes pulsation{
  0%,100%{ transform:scale(1); opacity:1; }
  50%    { transform:scale(.72); opacity:.55; }
}
@keyframes flottement{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-11px); }
}
@keyframes derive-a{
  0%  { transform:translate(0,0) scale(1); }
  100%{ transform:translate(-90px,70px) scale(1.16); }
}
@keyframes derive-b{
  0%  { transform:translate(0,0) scale(1); }
  100%{ transform:translate(110px,-60px) scale(1.1); }
}
@keyframes derive-c{
  0%  { transform:translate(0,0) scale(.9); }
  100%{ transform:translate(-70px,-90px) scale(1.2); }
}
@keyframes defilement{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* Apparition au defilement */
.apparait{
  opacity:0; transform:translateY(26px);
  transition:opacity .74s cubic-bezier(.22,1,.36,1), transform .74s cubic-bezier(.22,1,.36,1);
}
.apparait.vu{ opacity:1; transform:none; }

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

/* --- 14. Adaptatif ------------------------------------------------------- */
@media (max-width:1040px){
  .hero__grille{ grid-template-columns:1fr; }
  .console{ max-width:560px; margin-inline:auto; }
  .vignette--a{ left:-10px; top:-16px; }
  .vignette--b{ right:-6px; bottom:-16px; }
  .grille--4{ grid-template-columns:repeat(2,1fr); }
  .pied__grille{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  .grille--3{ grid-template-columns:repeat(2,1fr); }
}

/* Navigation : la barre horizontale ne tient plus sous 1080 px — on passe au
   menu deroulant plus tot, sinon « A propos » se casse sur deux lignes. */
@media (max-width:1080px){
  .burger{ display:block; }
  .entete__actions{ display:none; }
  .nav{
    position:fixed; inset:78px 0 auto; margin:0; display:none;
    padding:18px var(--gouttiere) 26px;
    /* Opaque, pas translucide : un panneau de menu qui laisse lire la page
       derriere lui est illisible sur les fonds clairs du site. */
    background:#fff;
    border-bottom:1px solid var(--verre-bord);
    box-shadow:var(--ombre-l);
    max-height:calc(100dvh - 78px); overflow-y:auto;
  }
  .nav[data-ouvert="true"]{ display:block; }
  .nav__liste{ flex-direction:column; align-items:stretch; gap:3px; }
  .nav__lien{ padding:14px 14px; font-size:1.02rem; }
  .nav__lien--actif::before{ display:none; }
  .nav__lien--actif{ color:var(--bleu); }
  .nav__bascule{ width:100%; justify-content:space-between; }
  .nav__sous{
    position:static; opacity:1; visibility:visible; transform:none;
    padding:2px 0 8px 14px; background:none; border:0; box-shadow:none; min-width:0;
  }
  .nav__actions{ display:grid; gap:11px; margin-top:20px; }
  .nav__actions .bouton{ width:100%; }
}
@media (min-width:1081px){ .nav__actions{ display:none; } }


@media (max-width:620px){
  body{ font-size:16px; }
  .grille--2,.grille--3,.grille--4{ grid-template-columns:1fr; }
  .chiffres{ grid-template-columns:repeat(2,1fr); gap:18px; }
  .pied__grille{ grid-template-columns:1fr; gap:32px; }
  .groupe-boutons .bouton{ width:100%; }
  .vignette{ display:none; }
  .console{ padding:18px; }
  .entete__barre{ height:70px; }
  .nav{ inset-block-start:70px; }
  .logo__mot span{ letter-spacing:.18em; }
}

/* --- 17. Preuves chiffrees sous le heros --------------------------------- */
.hero__preuves{
  display:flex; flex-wrap:wrap; gap:34px;
  margin-top:42px; padding-top:26px;
  border-top:1px solid var(--verre-bord);
}
.hero__preuves b{
  display:block; line-height:1;
  font-family:'Space Grotesk',sans-serif; font-size:1.85rem; font-weight:700;
  letter-spacing:-.03em;
  background:var(--deg-texte); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__preuves span{ display:block; margin-top:6px; font-size:.85rem; color:var(--encre-3); }

/* --- 18. Duo texte + visuel ---------------------------------------------- */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,60px); align-items:start; }
.duo--centre{ align-items:center; }
.duo--inverse .duo__texte{ order:2; }

/* --- 19. Etapes numerotees ------------------------------------------------ */
.etapes{ counter-reset:etape; display:grid; gap:24px; }
.etapes li{ position:relative; padding-left:62px; }
.etapes li::before{
  counter-increment:etape; content:counter(etape);
  position:absolute; left:0; top:-2px;
  display:grid; place-items:center; width:42px; height:42px; border-radius:13px;
  background:var(--deg-marque); color:#fff;
  font-family:'Space Grotesk',sans-serif; font-size:1rem; font-weight:700;
  box-shadow:0 6px 16px rgba(11,111,196,.24);
}
.etapes li::after{
  content:""; position:absolute; left:20px; top:46px; bottom:-24px; width:2px;
  background:linear-gradient(180deg,rgba(41,169,242,.35),transparent);
}
.etapes li:last-child::after{ display:none; }
.etapes h4{ margin-bottom:.25em; }
.etapes p{ font-size:.94rem; }

/* --- 20. Formulaires ------------------------------------------------------ */
.formulaire{ display:grid; gap:18px; }
.formulaire__duo{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.champ{ display:grid; gap:7px; }
.champ label{ font-size:.88rem; font-weight:600; color:var(--encre); }
.champ .requis{ color:var(--orange); }
.champ input,.champ select,.champ textarea{
  width:100%; padding:13px 15px;
  font:inherit; font-size:.96rem; color:var(--encre);
  background:#fff; border:1px solid var(--verre-bord-2); border-radius:var(--r-s);
  transition:border-color var(--tr), box-shadow var(--tr);
}
.champ textarea{ min-height:132px; resize:vertical; }
.champ input::placeholder,.champ textarea::placeholder{ color:var(--encre-3); opacity:.75; }
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none; border-color:var(--bleu); box-shadow:0 0 0 3px rgba(11,111,196,.14);
}
/* Ne signaler l'erreur qu'apres une saisie de l'utilisateur, jamais a l'ouverture. */
.champ input:user-invalid,
.champ textarea:user-invalid{ border-color:rgba(214,48,48,.55); }
.champ__aide{ font-size:.82rem; color:var(--encre-3); }
.formulaire .bouton{ width:100%; }
.mention-legale{ font-size:.81rem; line-height:1.6; color:var(--encre-3); }

/* Retour apres envoi */
.message-formulaire{
  display:flex; align-items:flex-start; gap:12px;
  padding:15px 18px; border-radius:var(--r-m); font-size:.93rem;
  background:rgba(41,169,242,.09); border:1px solid rgba(41,169,242,.34);
  color:var(--bleu-nuit);
}
.message-formulaire--erreur{
  background:rgba(255,122,0,.09); border-color:rgba(255,122,0,.4); color:#8a4a00;
}
.message-formulaire svg{ width:19px; height:19px; flex:0 0 auto; margin-top:2px; }

@media (max-width:900px){
  .duo{ grid-template-columns:1fr; }
  .duo--inverse .duo__texte{ order:0; }
}
@media (max-width:620px){
  .formulaire__duo{ grid-template-columns:1fr; }
  .hero__preuves{ gap:22px; }
  .etapes li{ padding-left:54px; }
  .etapes li::before{ width:38px; height:38px; font-size:.92rem; }
  .etapes li::after{ left:18px; top:42px; }
}

/* --- 21. Coordonnees ------------------------------------------------------ */
.coord{ display:grid; gap:8px; }
.coord li{
  display:flex; gap:15px; align-items:flex-start;
  padding:16px 18px; border-radius:var(--r-m);
  background:#fff; border:1px solid var(--verre-bord);
  box-shadow:var(--ombre-s);
  transition:border-color var(--tr), box-shadow var(--tr), transform var(--tr);
}
.coord li:hover{ border-color:var(--verre-bord-2); box-shadow:var(--ombre-m); transform:translateY(-2px); }
.coord .icone{ width:42px; height:42px; margin:0; border-radius:12px; flex:0 0 auto; }
.coord .icone svg{ width:20px; height:20px; }
.coord h4{ margin-bottom:2px; font-size:.95rem; }
.coord p,.coord a{ font-size:.92rem; margin:0; }
.coord__precision{ display:block; margin-top:3px; font-size:.82rem; color:var(--encre-3); }

/* --- 22. Accordeon -------------------------------------------------------- */
.faq{ display:grid; gap:11px; }
.faq details{
  background:#fff; border:1px solid var(--verre-bord); border-radius:var(--r-m);
  padding:0 22px;
  transition:border-color var(--tr), box-shadow var(--tr);
}
.faq details[open]{ border-color:var(--verre-bord-2); box-shadow:var(--ombre-s); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:19px 0; cursor:pointer; list-style:none;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1rem; color:var(--encre);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; flex:0 0 auto; width:18px; height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fc4' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--tr);
}
.faq details[open] summary::after{ transform:rotate(135deg); }
.faq details > *:not(summary){ padding-bottom:21px; font-size:.95rem; }
.faq details > *:not(summary):last-child{ margin-bottom:0; }

/* --- 23. Tableaux --------------------------------------------------------- */
.enveloppe-tableau{
  overflow-x:auto; background:#fff;
  border:1px solid var(--verre-bord); border-radius:var(--r-m);
  box-shadow:var(--ombre-s);
}
table{ width:100%; border-collapse:collapse; font-size:.93rem; min-width:600px; }
th,td{ padding:15px 20px; text-align:left; border-bottom:1px solid var(--brume-2); vertical-align:top; }
th{
  font-family:'Space Grotesk',sans-serif; font-weight:650; color:var(--encre);
  background:var(--brume); font-size:.83rem; letter-spacing:.02em;
  border-bottom-color:var(--givre);
}
tbody tr:last-child td{ border-bottom:0; }
td strong{ display:block; margin-bottom:3px; }
td small{ color:var(--encre-3); font-size:.86rem; }

/* --- 24. Complements des etapes ------------------------------------------- */
.etapes__meta{
  display:inline-flex; align-items:center; gap:6px;
  margin-left:10px; padding:3px 10px; border-radius:99px;
  background:var(--brume-2); color:var(--bleu-nuit);
  font-family:'Inter',sans-serif; font-size:.72rem; font-weight:650;
  letter-spacing:0; text-transform:none; vertical-align:middle;
}
.etapes--large li{ padding-bottom:4px; }
.etapes .jetons{ margin-top:14px; }
.etapes .jetons li{ padding:5px 11px; font-size:.75rem; }
.etapes .jetons li::before,.etapes .jetons li::after{ display:none; }

/* --- 25. Encart de mise en garde ------------------------------------------ */
.encart{
  display:flex; gap:15px; align-items:flex-start;
  padding:20px 22px; border-radius:var(--r-m);
  background:rgba(255,122,0,.06); border:1px solid rgba(255,122,0,.26);
}
.encart svg{ width:21px; height:21px; color:var(--orange); flex:0 0 auto; margin-top:2px; }
.encart p{ font-size:.94rem; }
.encart--bleu{ background:rgba(11,111,196,.05); border-color:rgba(11,111,196,.22); }
.encart--bleu svg{ color:var(--bleu); }

@media (max-width:620px){
  .coord li{ padding:14px 15px; gap:12px; }
  .etapes__meta{ display:block; margin:6px 0 0; width:max-content; }
}

/* --- 26. Pages de texte long (mentions, confidentialite) ------------------ */
.doc{ display:grid; grid-template-columns:250px 1fr; gap:clamp(32px,5vw,64px); align-items:start; }
.doc__sommaire{ position:sticky; top:110px; }
.doc__sommaire h2{
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--encre-3); margin-bottom:16px;
}
.doc__sommaire ol{ counter-reset:som; display:grid; gap:3px; }
.doc__sommaire a{
  display:block; padding:8px 12px; border-radius:var(--r-s);
  font-size:.89rem; font-weight:550; color:var(--encre-2);
  transition:background var(--tr), color var(--tr);
}
.doc__sommaire a::before{
  counter-increment:som; content:counter(som) ". ";
  color:var(--encre-3); font-variant-numeric:tabular-nums;
}
.doc__sommaire a:hover{ background:var(--brume); color:var(--bleu); }
.doc__sommaire a[aria-current="true"]{ background:rgba(11,111,196,.09); color:var(--bleu); font-weight:650; }

.doc__corps{ max-width:70ch; }
.doc__corps section{ padding-bottom:34px; margin-bottom:34px; border-bottom:1px solid var(--brume-2); }
.doc__corps section:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.doc__corps h2{
  font-size:clamp(1.25rem,2.2vw,1.55rem); margin-bottom:.6em;
  scroll-margin-top:110px;
}
.doc__corps h3{ font-size:1.02rem; margin:1.6em 0 .4em; }
.doc__corps p,.doc__corps li{ font-size:.97rem; }
.doc__corps ul:not(.liste-cochee):not(.jetons){ display:grid; gap:9px; margin:0 0 1.1em; }
.doc__corps ul:not(.liste-cochee):not(.jetons) li{ position:relative; padding-left:20px; }
.doc__corps ul:not(.liste-cochee):not(.jetons) li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--cyan);
}
.doc__corps dl{ display:grid; gap:11px; margin:0 0 1.1em; }
.doc__corps dt{ font-weight:650; color:var(--encre); font-size:.94rem; }
.doc__corps dd{ margin:0 0 0 0; font-size:.95rem; }
.doc__maj{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:99px; margin-bottom:22px;
  background:var(--brume-2); color:var(--bleu-nuit);
  font-size:.8rem; font-weight:600;
}

/* --- 27. Marqueur des informations manquantes ----------------------------- */
/* Tout ce qui porte cette classe DOIT etre remplace avant la mise en ligne.
   Le style est volontairement voyant : on ne peut pas l'oublier. */
.a-completer{
  display:inline-block; padding:1px 9px; border-radius:6px;
  background:rgba(255,122,0,.16); color:#a34d00;
  border:1px dashed rgba(255,122,0,.6);
  font-family:'Space Grotesk',sans-serif; font-size:.88em; font-weight:650;
}
.bandeau-brouillon{
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 20px; border-radius:var(--r-m); margin-bottom:30px;
  background:rgba(255,122,0,.09); border:1px solid rgba(255,122,0,.42);
  color:#8a4a00; font-size:.92rem;
}
.bandeau-brouillon svg{ width:20px; height:20px; flex:0 0 auto; margin-top:2px; color:var(--orange); }
.bandeau-brouillon strong{ color:#7a4100; }

@media (max-width:900px){
  .doc{ grid-template-columns:1fr; }
  .doc__sommaire{ position:static; }
  .doc__sommaire ol{ display:flex; flex-wrap:wrap; gap:6px; }
  .doc__sommaire a{
    border:1px solid var(--verre-bord); border-radius:99px;
    padding:7px 13px; font-size:.83rem; background:#fff;
  }
}

/* --- 15. Impression ------------------------------------------------------ */
@media print{
  .entete,.pied,.burger,.hero__aurore,.hero__toile,.vignette{ display:none !important; }
  body{ color:#000; background:#fff; font-size:12pt; }
  .section{ padding:14pt 0; }
  .apparait{ opacity:1; transform:none; }
}

/* --- 16. Machine a ecrire du heros --------------------------------------- */
.machine{ position:relative; display:inline-block; min-width:5ch; }
.machine::after{
  content:""; display:inline-block; vertical-align:baseline;
  width:3px; height:.86em; margin-left:5px; border-radius:2px;
  background:var(--orange);
  animation:curseur 1.05s steps(1) infinite;
}
@keyframes curseur{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }

/* --- 28. Acces client SANKOFA -------------------------------------------- */
.lien-client{ gap:8px; }
.lien-client svg{ width:16px; height:16px; opacity:.75; }
@media (max-width:1080px){
  .lien-client{ width:100%; }
}