@charset "UTF-8";
/* Socle du site — bandeau, sections, cartes d'outils, pied de page.
   Style de la maison : propriétés d'un élément sur UNE ligne, pâtés par thème, ligne vide
   entre deux chapitres. SEO first : léger, rapide, lisible par une machine.
--------------------------------------------------------------- */

/* La fonte de titrage — la SEULE ressource externe du site. Auto-hébergée (pas de Google
   Fonts : une requête de moins, aucun tiers, et la CSP n'a pas à s'ouvrir), `swap` pour que le
   texte s'affiche AVANT elle. Si elle ne charge pas, Georgia prend le relais sans perte de
   sens : les deux sont des serifs de titrage. Le corps de texte reste sur la pile système —
   zéro octet, et c'est là que se joue la vitesse.
   ⚠️ CHANGÉE LE 29/08 : Instrument Serif était trop ÉTROITE ET HAUTE — Arthur : « ça me donne
   l'impression que j'ai mal réglé mon écran ». Comparée en rendu réel à quatre candidates,
   Newsreader l'emporte : plus large, plus posée, éditoriale (l'autorité qu'on cherche) et
   chaleureuse dans ses formes (le côté accueillant qui manquait). Elle pèse 5,5 Ko au lieu
   de 15.
--- */
@font-face{font-family:"Newsreader";src:url("/assets/fonts/newsreader.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* Base — DEUX MONDES, et c'est toute la charte : le CLAIR explique (il se lit longtemps, c'est
   ce que lisent les moteurs), la NUIT mesure (un chiffre y brille comme sur un vumètre).
   Le nom du site veut dire éclairer ; il fallait que ça se voie autrement qu'en l'écrivant.
--- */
:root{
  /* Trois oranges, trois MÉTIERS — c'est la lisibilité qui fixe chaque valeur, mesurée sur
     le fond clair : `--orange` ne porte jamais de texte (halo, filets, focus, icônes) et
     garde donc toute sa vivacité ; `--orange-fonce` ÉCRIT sur le clair (liens, titres de
     cartes) — 4,8:1 ; `--orange-plein` REMPLIT sous du blanc (boutons, pastilles) — 4,6:1.
     L'impression d'ensemble ne bouge pas : seul l'orange qui doit se lire est descendu. */
  --orange:#f95311;--orange-fonce:#c03c09;--orange-plein:#d4420c;--orange-clair:#ff6a2c;
  --lueur:#ffb347;
  --fond:#f4f1ec;--encre:#2b2b2b;--gris:#666;--bord:#cfc7b8;
  --nuit:#171614;--nuit-2:#1e1c1a;--nuit-txt:#e9e5df;--nuit-gris:#9c968d;
  --vert:#6ecf7a;--vert-fonce:#2a7d3a;--ambre:#f0b45a;--rouge:#f06e6e;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --titre:"Newsreader",Georgia,"Times New Roman",serif
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);font:16px/1.65 var(--sans)}
a{color:inherit;text-decoration:none}
p a,li a{color:var(--orange-fonce);text-decoration:underline;text-underline-offset:2px}
img,svg{max-width:100%}
/* Les titres sont en serif : c'est la voix qui EXPLIQUE. Les chiffres restent en sans, en
   chasse fixe — c'est la voix qui MESURE. Le contraste entre les deux porte le propos. */
h1,h2,h3{font-family:var(--titre);font-weight:400;line-height:1.15;letter-spacing:0}
hr{border:0;border-top:1px solid #e2ddd4;margin:34px 0}

/* Bandeau bêta — il prévient, il ne s'excuse pas. Voir le commentaire de head.php : tant que
   le débogage n'est pas fini, un visiteur doit le savoir AVANT de juger, et sa panne trouvée
   nous est utile. D'où le ton : un avertissement qui se termine en invitation.
--- */
.al-beta{margin:0;padding:9px 20px;background:var(--nuit);color:var(--nuit-txt);font-size:13.5px;line-height:1.5;text-align:center}
.al-beta b{color:var(--lueur);letter-spacing:.08em;text-transform:uppercase;font-size:11.5px;margin-right:4px}
.al-beta a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.al-beta a:hover{color:var(--lueur)}

/* Bandeau
--- */
.al-bandeau{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:960px;margin:0 auto;padding:18px 20px}
.al-logo{font-family:var(--titre);font-size:25px;letter-spacing:0;display:inline-flex;align-items:center;gap:8px}
/* L'étoile du navigateur : c'est par elle qu'on trouvait sa route avant les instruments, et
   c'est ce que fait l'outil — montrer où l'on est. Dessinée en SVG dans la page : zéro
   requête, zéro octet de plus, nette à toutes les tailles. */
/* Le logo est tracé au trait, plus rempli : il prend donc la couleur de la ligne, pas du fond. */
.al-marque{flex:0 0 auto;color:var(--orange);filter:drop-shadow(0 0 7px rgba(249,83,17,.45))}
.al-bandeau nav{display:flex;gap:20px}
.al-bandeau nav a{font-size:15px;color:var(--gris);padding-bottom:2px;border-bottom:2px solid transparent}
.al-bandeau nav a:hover,.al-bandeau nav a.ici{color:var(--encre);border-bottom-color:var(--orange)}

/* Hero et sections
--- */
/* Le halo : un dégradé radial derrière le titre, rien d'autre. Aucune image, aucun octet —
   la lumière est une propriété CSS, pas un fichier. */
.al-hero{position:relative;max-width:760px;margin:0 auto;padding:30px 20px 10px;text-align:center}
.al-hero::before{content:"";position:absolute;top:-90px;left:50%;transform:translateX(-50%);width:min(620px,110%);height:320px;background:radial-gradient(closest-side,rgba(249,83,17,.16),transparent);pointer-events:none}
.al-hero>*{position:relative}
.al-hero .al-eti{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--orange-fonce)}
.al-hero h1{font-size:42px;margin:12px 0 14px}
.al-hero p{font-size:17px;color:var(--gris);margin:0 auto;max-width:620px}
.al-wrap{max-width:960px;margin:0 auto;padding:0 20px 40px}
.al-sec{padding:30px 0 6px}
.al-sec h2{font-size:28px;margin:0 0 12px}
.al-sec h3{font-size:19px;margin:22px 0 4px}
/* ⚠️ `>` volontaire, et il compte. En descendant (`.al-sec p`) cette règle gagnait par
   spécificité (0,1,1) contre `.calc-chiffre` (0,1,0) et repeignait en gris clair TOUS les
   textes des blocs sombres — résultat des calculateurs compris, soit un contraste de 1,6:1
   sur fond nuit : la charte dit « le chiffre brille », l'écran disait l'inverse. Le monde
   CLAIR ne colore donc que ses propres paragraphes ; la nuit garde les siens. */
.al-sec>p{color:#4a4a4a;margin:0 0 12px}
.al-note{font-size:13.5px;color:var(--gris)}

/* Familles et grille des outils
--- */
.al-fam{font-size:28px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1px solid #e2ddd4;padding-bottom:8px}
.ot-grid{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.ot-grid a{position:relative;display:block;height:100%;background:#fff;border:1px solid #e4ded3;border-radius:12px;padding:20px 18px;transition:border-color .15s,transform .15s;text-decoration:none;color:var(--encre)}
.ot-grid a:hover{border-color:var(--orange);transform:translateY(-2px)}
.ot-tete{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ot-ico{width:26px;height:26px;flex:0 0 26px;color:var(--orange);display:block}
.ot-grid b{font-family:var(--titre);font-weight:400;font-size:19px;line-height:1.2}
.ot-bref{display:block;font-size:13.5px;color:var(--gris);line-height:1.5}
.ot-grid em{display:inline-block;margin-top:10px;font-style:normal;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:#2e7d32}
/* Un outil pas encore en service se lit comme tel d'un coup d'œil, sans crier : la carte
   reste cliquable, sa page explique ce qu'il fera. */
.ot-grid a.soon{background:#f8f6f2;border-style:dashed}
.ot-grid a.soon .ot-ico{color:var(--gris)}
.ot-grid a.soon b{color:#5c5c5c}
.ot-grid a.soon em{color:var(--gris)}

/* Outil annoncé, pas encore en ligne
--- */
.al-chantier{background:#f8f6f2;border:1px dashed var(--bord);border-radius:12px;padding:20px 22px}
.al-chantier p{margin:0 0 10px;font-size:14.5px;color:#4a4a4a}
.al-chantier p:last-child{margin:0}

/* Checklist — des cases à cocher, et rien d'autre. La liste vient du HTML : sans JavaScript
   elle se lit et s'imprime tout de même, seule la mémoire des coches disparaît.
--- */
.cl-etat{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 0;font-size:14.5px;color:var(--gris)}
.cl-raz{font:inherit;font-size:13px;padding:5px 12px;border:1px solid var(--bord);border-radius:20px;background:none;color:var(--gris);cursor:pointer}
.cl-raz:hover{border-color:var(--orange-fonce);color:var(--orange-fonce)}
.cl-liste{list-style:none;padding:0;margin:16px 0 0}
.cl-liste li{background:#fff;border-radius:10px;padding:12px 16px;margin-bottom:7px;display:flex;gap:11px;align-items:flex-start}
.cl-liste input{margin:2px 0 0;width:17px;height:17px;flex:0 0 17px;accent-color:var(--orange-plein);cursor:pointer}
.cl-liste label{font-size:14.5px;line-height:1.55;color:#4a4a4a;cursor:pointer}
.cl-liste input:checked+label{color:var(--gris);text-decoration:line-through;text-decoration-color:var(--bord)}
.cl-sec.fini h2::after{content:" ✓";color:var(--vert-fonce);font-size:20px}

/* Glossaire — une liste de définitions, et rien de plus. Zéro JavaScript : c'est du texte,
   et le texte est justement ce que le moteur et l'IA viennent lire. Chaque terme porte son
   ancre, donc chacun se cite et se partage tout seul.
--- */
.ab-liste{list-style:none;padding:0;margin:14px 0 0}
.ab-liste li{background:#fff;border-radius:10px;padding:13px 17px;margin-bottom:8px;font-size:14.5px;line-height:1.6;color:#4a4a4a}

.gl-nav{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.gl-nav a{display:inline-block;padding:6px 13px;border:1px solid var(--bord);border-radius:20px;font-size:13.5px;color:var(--encre);text-decoration:none}
.gl-nav a:hover{border-color:var(--orange-fonce);color:var(--orange-fonce)}
.gl-liste{margin:18px 0 0}
.gl-liste>div{background:#fff;border-radius:10px;padding:14px 18px;margin-bottom:9px;scroll-margin-top:18px}
.gl-liste dt{font-weight:700;font-size:16px;margin:0 0 5px}
.gl-liste dd{margin:0;font-size:14.5px;line-height:1.65;color:#4a4a4a}
.gl-liste dd a{color:var(--orange-fonce);text-decoration:underline;text-underline-offset:2px}

/* Tableaux de référence — la partie du calculateur que le robot peut lire.
   Un calculateur qui ne montre ses chiffres qu'après un clic est invisible : le moteur ne
   voit que la prose, l'IA n'a rien à citer. Les valeurs qui ne changent jamais (formats,
   cibles de plateforme, correspondances d'images) sont donc écrites en HTML statique. C'est
   du contenu, pas de la décoration — d'où le monde CLAIR, et la lecture longue.
--- */
.al-tableau{overflow-x:auto;margin:16px 0 0;-webkit-overflow-scrolling:touch}
.al-tableau table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:440px;background:#fff;border-radius:10px;overflow:hidden}
.al-tableau caption{caption-side:top;text-align:left;font-size:13px;color:var(--gris);padding:0 0 8px}
.al-tableau th,.al-tableau td{padding:9px 14px;text-align:left;border-bottom:1px solid #eae4da}
.al-tableau thead th{font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--gris);font-weight:700;background:#faf8f4}
.al-tableau tbody th{font-weight:700;color:var(--encre);white-space:nowrap}
.al-tableau td{color:#4a4a4a;font-variant-numeric:tabular-nums}
.al-tableau tbody tr:last-child th,.al-tableau tbody tr:last-child td{border-bottom:0}

/* FAQ
--- */
.al-faq details{background:#fff;border-radius:10px;padding:14px 18px;margin-bottom:9px}
.al-faq summary{cursor:pointer;font-weight:700;font-size:15.5px;list-style:none;position:relative;padding-right:24px}
.al-faq summary::-webkit-details-marker{display:none}
.al-faq summary::after{content:"";position:absolute;right:4px;top:8px;width:8px;height:8px;border-right:2px solid var(--gris);border-bottom:2px solid var(--gris);transform:rotate(45deg);transition:transform .2s}
.al-faq details[open] summary::after{transform:rotate(-135deg);top:12px}
.al-faq p{margin:10px 0 0;font-size:14.5px;line-height:1.65;color:#4a4a4a}

/* Appel à l'action
--- */
.al-cta{margin:26px 0 0;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.al-cta a{display:inline-block;padding:12px 22px;border-radius:6px;background:var(--orange-plein);color:#fff;font-weight:700;font-size:15px;text-decoration:none}
.al-cta a:hover{background:var(--orange-fonce)}
.al-cta a.ghost{background:none;color:var(--encre);border:1px solid var(--bord)}
.al-cta a.ghost:hover{border-color:var(--orange);color:var(--orange)}

/* Pied de page
--- */
.al-pied{max-width:960px;margin:0 auto;padding:30px 20px 44px;border-top:1px solid #e2ddd4;font-size:13.5px;color:var(--gris)}
.al-pied p{margin:0 0 8px;max-width:680px}
.al-pied nav{margin:14px 0 12px;display:flex;gap:16px;flex-wrap:wrap}
.al-pied nav a{color:var(--gris);text-decoration:underline;text-underline-offset:2px}
.al-pied nav a:hover{color:var(--encre)}
.al-fin{color:var(--gris);font-size:12.5px}
.al-fin a{color:var(--gris);text-decoration:underline;text-underline-offset:2px}
.al-fin a:hover{color:var(--orange-fonce)}

/* Pastille « ne plus compter ce navigateur » — posée par ?stats=off, discrète et hors flux.
--- */
.al-statsoff{position:fixed;left:8px;bottom:8px;z-index:2147483647;padding:3px 8px;border-radius:9px;background:#1e293b;color:#94a3b8;font:11px/1.4 system-ui,sans-serif;text-decoration:none;opacity:.55}

@media(max-width:600px){.al-hero h1{font-size:34px}.al-hero p{font-size:16px}.al-sec h2,.al-fam{font-size:23px}}