/* ============================================================
   AID — Accompagnement IA & Données
   Feuille de style du site — basée sur les jetons de design v3.0
   et la charte graphique v2.0
   ============================================================ */

/* ---------- 1. Jetons ---------- */
:root{
  --aid-nuit:#1A3A5C; --aid-ciel:#3D7CA8; --aid-ciel-clair:#7FB2D4;
  --aid-cuivre:#C98148; --aid-cuivre-txt:#9A5D2E;
  --aid-cuivre-clair:#DE9C66;   /* texte cuivré sur fond sombre — 5,02:1 sur Bleu Nuit */
  --aid-cuivre-survol:#D08A53;  /* survol du bouton accent — 5,12:1 avec #3C2412 */
  --lien:#376F97;               /* Bleu Ciel Moyen assombri — 5,41:1 sur blanc, 5,07:1 sur Fond Doux */
  --n00:#FFFFFF; --n05:#F5F8FB; --n10:#EAF0F6; --n20:#E2E8EF;
  --n30:#CAD6E1; --n40:#A3B1BE; --n50:#7E8D9C; --n60:#5A6B7D;
  --n70:#41525F; --n80:#2B3D4E; --n90:#1A3A5C; --n95:#14304C; --n99:#0E2338;
  --pos:#2E9E6B; --pos-txt:#1E6B49; --pos-tuile:#E6F3EC;
  --vig:#B87A14; --vig-txt:#7E5410; --vig-tuile:#FBF0DC;
  --cri:#D95F52; --cri-txt:#9E2F26; --cri-tuile:#FBEAE7;
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px;
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-full:999px;
  --ombre-1:0 1px 2px rgba(26,58,92,.06);
  --ombre-2:0 2px 8px rgba(26,58,92,.08);
  --ombre-3:0 8px 24px rgba(26,58,92,.12);
  --police:'Montserrat', Arial, Helvetica, sans-serif;
  --largeur:1140px;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden; max-width:100%}
body{
  margin:0; background:var(--n00); color:var(--n90);
  font-family:var(--police); font-size:16px; line-height:1.625;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; height:auto; display:block}
a{color:var(--lien); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(201,129,72,.55); border-radius:var(--r-xs)}
h1,h2,h3,h4{margin:0 0 var(--e4); line-height:1.22; color:var(--aid-nuit)}
h1{font-weight:700; font-size:clamp(30px,4.4vw,46px); letter-spacing:-.4px}
h2{font-weight:700; font-size:clamp(24px,3vw,32px)}
h3{font-weight:600; font-size:clamp(19px,2vw,24px)}
h4{font-weight:600; font-size:18px}
p{margin:0 0 var(--e4)}
ul,ol{margin:0 0 var(--e4); padding-left:1.25em}
li{margin-bottom:var(--e2)}
strong{font-weight:600}
hr{border:0; border-top:1px solid var(--n20); margin:var(--e7) 0}
.enveloppe{width:100%; max-width:var(--largeur); margin:0 auto; padding:0 var(--e5)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saut-contenu{position:absolute;left:-9999px;top:0;background:var(--aid-nuit);color:#fff;
  padding:var(--e3) var(--e4);z-index:100;border-radius:0 0 var(--r-sm) 0}
.saut-contenu:focus{left:0}

/* ---------- 3. En-tête et navigation ---------- */
.entete{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid var(--n20)}
.entete__grille{display:flex; align-items:center; gap:var(--e5);
  min-height:78px; padding-top:var(--e3); padding-bottom:var(--e3)}
.entete__logo{flex:0 0 auto}
.entete__logo img{width:180px}
.nav{margin-left:auto; display:flex; align-items:center; gap:var(--e5)}
.nav__liste{display:flex; align-items:center; gap:var(--e5); list-style:none; margin:0; padding:0}
.nav__liste li{margin:0}
.nav__lien{font-size:14.5px; font-weight:500; color:var(--n80); padding:var(--e2) 0;
  border-bottom:2px solid transparent}
.nav__lien:hover{color:var(--aid-nuit); text-decoration:none; border-bottom-color:var(--aid-cuivre)}
.nav__lien[aria-current="page"]{color:var(--aid-nuit); font-weight:600; border-bottom-color:var(--aid-cuivre)}
.nav__langue{font-size:13px; font-weight:600; letter-spacing:.6px; color:var(--aid-cuivre-txt);
  border:1px solid var(--n30); border-radius:var(--r-full); padding:6px 13px}
.nav__langue:hover{background:var(--n05); text-decoration:none; border-color:var(--aid-cuivre)}
.nav__bascule{display:none; background:none; border:1px solid var(--n30); border-radius:var(--r-sm);
  padding:9px 11px; cursor:pointer; margin-left:auto}
.nav__bascule span{display:block; width:20px; height:2px; background:var(--aid-nuit); margin:4px 0}

/* ---------- 4. Boutons ---------- */
.btn{display:inline-block; font:600 14.5px/1.15 var(--police); border-radius:var(--r-sm);
  padding:15px 22px; border:1px solid transparent; cursor:pointer; text-align:center;
  transition:background .15s ease, color .15s ease, border-color .15s ease}
.btn:hover{text-decoration:none}
.btn--principal{background:var(--n90); color:#fff}
.btn--principal:hover{background:var(--n95); color:#fff}
.btn--secondaire{background:transparent; color:var(--n90); border-color:var(--n90)}
.btn--secondaire:hover{background:var(--n05)}
.btn--discret{background:transparent; color:var(--aid-cuivre-txt); padding-left:0; padding-right:0}
.btn--discret:hover{text-decoration:underline}
.btn--accent{background:var(--aid-cuivre); color:#3C2412}
.btn--accent:hover{background:var(--aid-cuivre-survol); color:#3C2412}
.btn--clair{background:#fff; color:var(--aid-nuit)}
.btn--clair:hover{background:var(--n10); color:var(--aid-nuit)}
.btn--contour-clair{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
.btn--contour-clair:hover{background:rgba(255,255,255,.12); color:#fff}
.groupe-btn{display:flex; flex-wrap:wrap; gap:var(--e3); align-items:center}

/* ---------- 5. Sections ---------- */
.section{padding:var(--e8) 0}
.section--serree{padding:var(--e7) 0}
.section--douce{background:var(--n05); border-top:1px solid var(--n20); border-bottom:1px solid var(--n20)}
.section--nuit{background:var(--aid-nuit); color:#fff}
.section--nuit h2,.section--nuit h3,.section--nuit h4{color:var(--aid-ciel-clair)}
.section--nuit p,.section--nuit li{color:#E8EFF6}
.section--nuit a{color:var(--aid-ciel-clair)}
.section__intro{max-width:720px; margin-bottom:var(--e7)}
.section__intro p{font-size:17.5px; color:var(--n70)}
.section--nuit .section__intro p{color:#D3E2EE}
.surtitre{display:block; font-size:12.5px; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--aid-cuivre-txt); margin-bottom:var(--e3)}
.section--nuit .surtitre,.heros .surtitre{color:var(--aid-cuivre-clair)}

/* ---------- 6. La Trame (motif de réseau, section 06 de la charte) ---------- */
.trame{position:relative; isolation:isolate; overflow:hidden}
.trame::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(circle at center, var(--aid-cuivre) 1.6px, transparent 1.7px);
  background-size:34px 34px; opacity:.08;
}
.section--nuit.trame::before{
  background-image:radial-gradient(circle at center, var(--aid-ciel-clair) 1.6px, transparent 1.7px);
  opacity:.12;
}

/* ---------- 7. Héros ---------- */
.heros{position:relative; background:var(--aid-nuit); color:#fff; overflow:hidden;
  padding:clamp(56px,8vw,104px) 0 clamp(56px,8vw,96px)}
/* Les Facettes — deux polygones maximum, ancrés à un bord (section 06) */
.heros__facette{position:absolute; z-index:0; pointer-events:none}
.heros__facette--a{top:-60px; right:-40px; width:340px; height:340px;
  background:var(--aid-ciel); opacity:.16; clip-path:polygon(100% 0,100% 68%,26% 100%)}
.heros__facette--b{bottom:-90px; left:-70px; width:300px; height:300px;
  background:var(--aid-ciel-clair); opacity:.10; clip-path:polygon(0 100%,0 22%,78% 100%)}
.heros__contenu{position:relative; z-index:2; max-width:760px}
.heros h1{color:#fff}
.heros__accroche{font-size:clamp(20px,2.4vw,25px); font-weight:600; color:var(--aid-ciel-clair);
  margin-bottom:var(--e5); line-height:1.4}
.heros__texte{font-size:18px; color:#DCE7F0; max-width:640px; margin-bottom:var(--e6)}
.heros--interne{padding:clamp(44px,6vw,72px) 0}
.heros--interne h1{margin-bottom:var(--e4)}
.heros--interne .heros__texte{margin-bottom:0}

/* ---------- 8. Fil d'Ariane ---------- */
.fil{font-size:13.5px; color:var(--n60); padding:var(--e4) 0 0}
.fil a{color:var(--n60)}
.fil span{margin:0 6px; color:var(--n40)}

/* ---------- 9. Grilles et cartes ---------- */
.grille{display:grid; gap:var(--e5)}
.grille--2{grid-template-columns:repeat(2,1fr)}
.grille--3{grid-template-columns:repeat(3,1fr)}
.grille--4{grid-template-columns:repeat(4,1fr)}
.grille--aside{grid-template-columns:1.55fr 1fr; gap:var(--e7); align-items:start}
.carte{background:var(--n00); border:1px solid var(--n20); border-radius:var(--r-md);
  padding:var(--e5); box-shadow:var(--ombre-1)}
.carte h3,.carte h4{margin-bottom:var(--e3)}
.carte p:last-child,.carte ul:last-child{margin-bottom:0}
.carte--nuit{background:var(--n95); border-color:#24486D; color:#E8EFF6}
.carte--nuit h3,.carte--nuit h4{color:var(--aid-ciel-clair)}
.carte--accent{border-left:4px solid var(--aid-cuivre)}
.carte__num{display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--r-full); background:var(--n10);
  color:var(--aid-nuit); font-weight:700; font-size:15px; margin-bottom:var(--e3)}
.carte--nuit .carte__num{background:rgba(127,178,212,.18); color:var(--aid-ciel-clair)}

/* ---------- 10. Tuiles de chiffres ---------- */
.chiffres{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--e5)}
.chiffre{padding:var(--e4) 0}
.chiffre__valeur{font-size:clamp(28px,3.4vw,40px); font-weight:700; line-height:1.1;
  color:var(--aid-ciel-clair); margin-bottom:6px}
.chiffre__libelle{font-size:14px; color:#C7D8E6; line-height:1.45}
.chiffres--clair .chiffre__valeur{color:var(--aid-nuit)}
.chiffres--clair .chiffre__libelle{color:var(--n60)}

/* ---------- 11. Paliers (le parcours gigogne) ---------- */
.parcours{display:grid; gap:var(--e4)}
.palier{position:relative; background:var(--n00); border:1px solid var(--n20);
  border-radius:var(--r-md); padding:var(--e5) var(--e5) var(--e5) var(--e6);
  box-shadow:var(--ombre-1); border-left:5px solid var(--aid-ciel)}
.palier:nth-child(2){border-left-color:#5C93B8}
.palier:nth-child(3){border-left-color:#8E5A3C}
.palier:nth-child(4){border-left-color:var(--aid-cuivre)}
.palier__entete{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--e3); margin-bottom:var(--e3)}
.palier__nom{font-size:clamp(20px,2.2vw,25px); font-weight:700; color:var(--aid-nuit); margin:0}
.palier__rang{font-size:12.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--aid-cuivre-txt)}
.palier__prix{margin-left:auto; font-size:15px; font-weight:600; color:var(--aid-nuit);
  background:var(--n10); border-radius:var(--r-full); padding:6px 14px; white-space:nowrap}
.palier__inclut{font-size:13.5px; color:var(--n60); font-style:italic; margin-bottom:var(--e3)}
.chaine{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e3);
  font-weight:600; font-size:clamp(15px,1.8vw,19px); color:var(--aid-nuit);
  background:var(--n05); border:1px solid var(--n20); border-radius:var(--r-md);
  padding:var(--e4) var(--e5); margin-bottom:var(--e6)}
.chaine em{font-style:normal; color:var(--aid-cuivre-txt); font-size:1.15em}

/* ---------- 12. Tableaux ---------- */
.tableau-def{overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--n20); border-radius:var(--r-md); background:#fff}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:15px}
caption{text-align:left; font-size:13.5px; color:var(--n60); padding:var(--e3) var(--e4)}
th,td{text-align:left; padding:var(--e3) var(--e4); border-bottom:1px solid var(--n20); vertical-align:top}
thead th{background:var(--n05); font-weight:600; color:var(--aid-nuit); font-size:14px;
  border-bottom:2px solid var(--n30)}
tbody tr:last-child td{border-bottom:0}
td.nombre,th.nombre{text-align:right; white-space:nowrap}

/* ---------- 13. Listes à coches ---------- */
.liste-coche{list-style:none; padding:0; margin:0 0 var(--e4)}
.liste-coche li{position:relative; padding-left:28px; margin-bottom:var(--e3)}
.liste-coche li::before{content:""; position:absolute; left:0; top:.55em;
  width:12px; height:12px; border-radius:2px; background:var(--aid-cuivre)}
.section--nuit .liste-coche li::before{background:var(--aid-cuivre)}

/* ---------- 14. Étude de cas ---------- */
.cas{border:1px solid var(--n20); border-radius:var(--r-md); background:#fff;
  box-shadow:var(--ombre-1); overflow:hidden}
.cas__bandeau{background:var(--n05); border-bottom:1px solid var(--n20);
  padding:var(--e4) var(--e5); display:flex; flex-wrap:wrap; gap:var(--e3); align-items:baseline}
.cas__secteur{font-size:12.5px; font-weight:700; letter-spacing:1.3px; text-transform:uppercase;
  color:var(--aid-cuivre-txt)}
.cas__periode{margin-left:auto; font-size:13.5px; color:var(--n60)}
.cas__corps{padding:var(--e5)}
.cas__gain{display:inline-block; background:var(--pos-tuile); color:var(--pos-txt);
  font-weight:600; font-size:14.5px; border-radius:var(--r-sm); padding:8px 14px; margin-top:var(--e3)}

/* ---------- 15. Appel à l'action ---------- */
.appel{background:var(--aid-nuit); color:#fff; border-radius:var(--r-lg);
  padding:clamp(32px,5vw,56px); text-align:center}
.appel h2{color:#fff; max-width:640px; margin-left:auto; margin-right:auto}
.appel p{color:#D3E2EE; max-width:600px; margin-left:auto; margin-right:auto; margin-bottom:var(--e6)}
.appel .groupe-btn{justify-content:center}

/* ---------- 16. Contact ---------- */
.coord{list-style:none; padding:0; margin:0}
.coord li{display:flex; gap:var(--e4); align-items:flex-start; padding:var(--e4) 0;
  border-bottom:1px solid var(--n20)}
.coord li:last-child{border-bottom:0}
.coord__etiquette{flex:0 0 130px; font-size:13.5px; font-weight:600; color:var(--n60);
  text-transform:uppercase; letter-spacing:.7px; padding-top:2px}
.coord__valeur{font-size:16.5px; font-weight:500; word-break:break-word}

/* ---------- 17. Pied de page ---------- */
.pied{background:var(--n99); color:#C7D8E6; padding:var(--e8) 0 var(--e5); font-size:14.5px}
.pied a{color:#C7D8E6}
.pied a:hover{color:#fff}
.pied__grille{display:grid; grid-template-columns:1.5fr .85fr 1.25fr; gap:var(--e7); margin-bottom:var(--e7)}
.pied__logo img{width:200px; margin-bottom:var(--e4)}
.pied h4{color:var(--aid-ciel-clair); font-size:13px; letter-spacing:1.3px;
  text-transform:uppercase; margin-bottom:var(--e4)}
.pied ul{list-style:none; padding:0; margin:0}
.pied li{margin-bottom:var(--e3)}
.pied a,.pied p{overflow-wrap:anywhere}
.pied__filet{border-top:1px solid rgba(201,129,72,.45); padding-top:var(--e5);
  display:flex; flex-wrap:wrap; gap:var(--e4); justify-content:space-between;
  font-size:13px; color:var(--n50)}

/* ---------- 18. Responsive ---------- */
@media (max-width:960px){
  .grille--3,.grille--4{grid-template-columns:repeat(2,1fr)}
  .grille--aside{grid-template-columns:1fr; gap:var(--e6)}
  .chiffres{grid-template-columns:repeat(2,1fr)}
  .pied__grille{grid-template-columns:1fr 1fr; gap:var(--e6)}
  .pied__logo{grid-column:1 / -1}
}
@media (max-width:800px){
  .nav__bascule{display:block}
  .nav{position:absolute; top:100%; left:0; right:0; margin:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--n20); box-shadow:var(--ombre-2);
    padding:var(--e3) var(--e5) var(--e5); display:none}
  .nav.est-ouverte{display:flex}
  .nav__liste{flex-direction:column; align-items:stretch; gap:0}
  .nav__lien{display:block; padding:var(--e4) 0; border-bottom:1px solid var(--n20)}
  .nav__lien[aria-current="page"],.nav__lien:hover{border-bottom-color:var(--n20); color:var(--aid-cuivre-txt)}
  .nav__langue{align-self:flex-start; margin-top:var(--e4)}
  .entete{position:relative}
  .entete__grille{position:relative}
}
@media (max-width:640px){
  .grille--2,.grille--3,.grille--4{grid-template-columns:1fr}
  .pied__grille{grid-template-columns:1fr; gap:var(--e6)}
  .section{padding:var(--e7) 0}
  .palier{padding-left:var(--e5)}
  .palier__prix{margin-left:0}
  .coord li{flex-direction:column; gap:var(--e1)}
  .coord__etiquette{flex:none}
  .entete__logo img{width:150px}
  .btn{display:block; width:100%}
  .groupe-btn{display:block}
  .groupe-btn .btn{margin-bottom:var(--e3)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important;
  scroll-behavior:auto!important}}
@media print{
  .entete,.pied,.nav,.appel{display:none}
  body{background:#fff; font-size:11pt}
  .section{padding:12pt 0}
}