/* =============================================================
   Le Radar — mesure de la modération en France.
   Charte Horizon Builder. Aucune ressource externe, comme le reste
   du site : un outil qui mesure la dépendance n'en crée pas une.
   ============================================================= */
:root{
  --nuit:#07070A; --ardoise:#18181F; --ardoise-clair:#20202A;
  --trait:#2E2E38; --blanc:#F4F4F6; --gris:#9696A2; --gris-sourd:#83838E;
  --soleil:#FF963C; --soleil-clair:#FFAA5C; --soleil-fonce:#D9762A; --numen:#3FD8C8;
  --alerte:#FF6B5C;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono",Consolas,monospace;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --large:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--nuit);color:var(--blanc);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--large);margin:0 auto;padding:0 24px}
a{color:var(--soleil);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
/* Quatre pages portaient leur titre en <h2>, sans aucun <h1>. Passees en h1,
   elles ont besoin de la meme allure : la charte ne connait pas le gras par
   defaut du navigateur. */
h1,h2{font-size:clamp(26px,3.4vw,36px);font-weight:300;letter-spacing:.02em;margin:0 0 16px;line-height:1.2}
h3{font-size:19px;font-weight:600;margin:0 0 6px}
.kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--soleil);font-weight:600;margin:0 0 14px}
.kicker.froid{color:var(--numen)}
.lede{color:var(--gris);max-width:66ch;margin:0 0 44px}
section{padding:80px 0;border-top:1px solid var(--trait)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- navigation ---------- */
nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);background:rgba(7,7,10,.82);border-bottom:1px solid var(--trait)}
nav .wrap{display:flex;align-items:center;gap:28px;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-weight:600;letter-spacing:.13em;font-size:14px;color:var(--blanc)}
.brand:hover{text-decoration:none}
.brand b{color:var(--soleil);font-weight:600}
/* Le suffixe de marque : « HORIZON BUILDER | LE CLUB », sur /adherer/.
   Séparé par un filet plutôt que par un point, pour qu'il se lise comme une
   section du site et non comme un second nom. Il saute avant les liens quand
   la barre se resserre — c'est la marque qui cède la place, jamais les liens. */
.brand em{
  font-style:normal;color:var(--numen);font-size:11px;font-weight:600;
  letter-spacing:.16em;padding-left:11px;border-left:1px solid var(--trait);
}
@media(max-width:620px){ .brand em{display:none} }
@media(max-width:430px){ .brand span{font-size:11px;letter-spacing:.05em} }
nav ul{list-style:none;display:flex;align-items:center;gap:22px;margin:0 0 0 auto;padding:0}
nav ul a{color:var(--gris);font-size:14px}
nav ul a:hover{color:var(--blanc);text-decoration:none}
@media(max-width:820px){ nav ul li.masquable{display:none} }
/* Mesure a 320px : la marque (90px) plus les trois liens restants (177px) plus
   la gouttiere reclamaient 295px, pour 272px utiles — la barre depassait du
   cadre a droite. Comme sur l'accueil, on reprend la place SUR LA MARQUE et sur
   la gouttiere, jamais sur les liens : ce sont les seules portes du site
   consultables sans rien installer. */
@media(max-width:430px){
  nav ul{gap:14px}
  .brand{font-size:11px;letter-spacing:.05em;gap:7px}
}

/* ---------- en-tête ---------- */
.hero{padding:96px 0 72px}
.chiffre-cle{font-family:var(--mono);font-size:clamp(46px,9vw,104px);line-height:1;font-weight:600;
  letter-spacing:-.03em;color:var(--blanc);margin:0 0 6px}
.chiffre-cle small{display:block;font-size:clamp(15px,2vw,20px);font-weight:400;letter-spacing:.01em;
  color:var(--gris);font-family:var(--sans);margin-top:18px;line-height:1.5;max-width:60ch}
.souligne{color:var(--soleil)}
.periode{font-family:var(--mono);font-size:12px;color:var(--gris-sourd);letter-spacing:.08em;margin:26px 0 0}

/* ---------- tuiles de chiffres ---------- */
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:44px 0 0}
.tuile{background:var(--ardoise);border:1px solid var(--trait);border-radius:12px;padding:22px 20px}
.tuile .v{font-family:var(--mono);font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.tuile .l{font-size:13px;color:var(--gris);margin-top:8px;line-height:1.45}
.tuile.accent .v{color:var(--soleil)}
.tuile.froid .v{color:var(--numen)}
.tuile.alerte .v{color:var(--alerte)}

/* ---------- tableau des plateformes ---------- */
.table-plat{width:100%;border-collapse:collapse;font-size:15px;margin-top:8px}
.table-plat th{text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris-sourd);font-weight:600;padding:0 12px 12px 0;border-bottom:1px solid var(--trait);white-space:nowrap}
.table-plat th.num,.table-plat td.num{text-align:right}
.table-plat td{padding:13px 12px 13px 0;border-bottom:1px solid rgba(46,46,56,.55);vertical-align:middle}
.table-plat tr:last-child td{border-bottom:none}
.table-plat .nom{font-weight:600;white-space:nowrap}
.table-plat .num{font-family:var(--mono);font-size:14px;white-space:nowrap}
.table-plat tr.saillant td{background:rgba(255,150,60,.055)}
.table-plat tr.saillant .nom{color:var(--soleil)}
.barre{position:relative;height:7px;background:rgba(46,46,56,.75);border-radius:4px;overflow:hidden;min-width:90px}
.barre i{position:absolute;inset:0 auto 0 0;background:var(--gris-sourd);border-radius:4px}
tr.saillant .barre i{background:var(--soleil)}
.pct{font-family:var(--mono);font-size:13px;white-space:nowrap}
.pct.haut{color:var(--gris)}
.pct.zero{color:var(--soleil);font-weight:600}
@media(max-width:720px){ .table-plat .cache-mob{display:none}
  .magnitude .l{grid-template-columns:1fr auto;gap:6px}
  .magnitude .p{grid-column:1/-1} }

/* ---------- encadrés ---------- */
.encart{background:var(--ardoise);border:1px solid var(--trait);border-left:3px solid var(--soleil);
  border-radius:0 12px 12px 0;padding:24px 26px;margin:34px 0}
.encart.froid{border-left-color:var(--numen)}
.encart.sobre{border-left-color:var(--gris-sourd)}
.encart h3{margin-bottom:10px}
.encart p{margin:0 0 10px;color:var(--gris)}
.encart p:last-child{margin-bottom:0}
.encart strong{color:var(--blanc)}

/* ---------- confrontation code ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
@media(max-width:760px){ .duo{grid-template-columns:1fr} }
.carte{background:var(--ardoise);border:1px solid var(--trait);border-radius:12px;padding:24px}
.carte .t{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris-sourd);font-weight:600;margin-bottom:14px}
.regles{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:12.5px;line-height:2}
.regles li{color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.regles li::before{content:"▪";color:var(--gris-sourd);margin-right:9px}
.regles.loi li::before{color:var(--numen)}
.regles.cgu li::before{color:var(--soleil)}
.compte{font-family:var(--mono);font-size:30px;font-weight:600;margin-bottom:4px}
.compte.loi{color:var(--numen)}
.compte.cgu{color:var(--soleil)}

/* =============================================================
   GRAPHIQUES
   Palette catégorielle validée pour la surface Ardoise (#18181F) :
   tous les contrôles passent — bande de luminosité, plancher de chroma,
   séparation en vision des couleurs (pire paire ΔE 8,4) et contraste.
   ⚠️ Ne PAS remplacer ces teintes par les accents de la charte : Soleil
   (#FF963C) et Alerte (#FF6B5C) sont à ΔE 10,7 l'un de l'autre — sous le
   plancher de 15, donc indistinguables même en vision normale.
   ============================================================= */
:root{
  --s1:#3987e5;  /* bleu   */
  --s2:#d95926;  /* orange */
  --s3:#199e70;  /* aqua   */
  --s4:#c98500;  /* jaune  */
  --surface-viz:#18181F;
}

/* barre empilée horizontale : part d'un tout */
.empilee{margin:8px 0 0}
.empilee .piste{display:flex;height:22px;border-radius:4px;overflow:hidden;background:var(--nuit)}
.empilee .piste i{height:100%;position:relative}
/* 2 px de surface entre deux segments : sans cet écart, deux teintes voisines
   se lisent comme une seule masse. */
.empilee .piste i + i{box-shadow:-2px 0 0 0 var(--surface-viz)}
.empilee .piste i:first-child{border-radius:4px 0 0 4px}
.empilee .piste i:last-child{border-radius:0 4px 4px 0}
.legende{display:flex;flex-wrap:wrap;gap:16px 22px;margin-top:14px}
.legende span{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--gris)}
.legende b{width:11px;height:11px;border-radius:3px;flex:none}
.legende em{font-style:normal;font-family:var(--mono);color:var(--blanc);font-size:13px}

/* petit multiple : une barre empilée par sujet */
.sujets{display:grid;gap:18px;margin-top:8px}
.sujet .tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px}
.sujet .nom{font-size:15px;font-weight:600}
.sujet .n{font-family:var(--mono);font-size:13px;color:var(--gris-sourd)}
.sujet .piste{display:flex;height:20px;border-radius:4px;overflow:hidden;background:var(--nuit)}
.sujet .piste i{height:100%}
.sujet .piste i + i{box-shadow:-2px 0 0 0 var(--surface-viz)}
.sujet .piste i:first-child{border-radius:4px 0 0 4px}
.sujet .piste i:last-child{border-radius:0 4px 4px 0}
.sujet .detail{font-size:12.5px;color:var(--gris-sourd);margin-top:6px;line-height:1.5}
.sujet .detail b{color:var(--blanc);font-weight:600}

/* barres de magnitude, une série : un seul ton, la couleur ne code rien */
.magnitude{display:grid;gap:11px;margin-top:6px}
.magnitude .l{display:grid;grid-template-columns:minmax(150px,230px) 1fr auto;gap:16px;align-items:center}
.magnitude .k{font-size:14px;font-weight:600;line-height:1.35}
.magnitude .p{height:16px;background:var(--nuit);border-radius:4px;overflow:hidden}
.magnitude .p i{display:block;height:100%;background:var(--s1);border-radius:0 4px 4px 0}
.magnitude .v{font-family:var(--mono);font-size:13px;color:var(--gris);white-space:nowrap}
.magnitude .l.saillant .k{color:var(--soleil)}
.magnitude .l.saillant .p i{background:var(--s2)}

.note-viz{font-size:12.5px;color:var(--gris-sourd);margin-top:14px;line-height:1.5}

/* ---------- protéger / faire taire ---------- */
.groupes{display:grid;gap:14px;margin:0 0 30px}
.groupe{background:var(--ardoise);border:1px solid var(--trait);border-radius:12px;padding:20px 22px}
.groupe .tete{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:12px}
.groupe .titre{font-size:16.5px;font-weight:600}
.groupe .chiffre{font-family:var(--mono);font-size:26px;font-weight:600;white-space:nowrap}
.groupe .rail{height:9px;background:rgba(46,46,56,.75);border-radius:5px;overflow:hidden}
.groupe .rail i{display:block;height:100%;border-radius:5px}
.groupe .quoi{font-size:13.5px;color:var(--gris-sourd);margin-top:11px;line-height:1.5}
.groupe.proteger{border-left:3px solid var(--numen)}
.groupe.proteger .chiffre{color:var(--numen)} .groupe.proteger .rail i{background:var(--numen)}
.groupe.gris{border-left:3px solid var(--gris)}
.groupe.gris .chiffre{color:var(--gris)} .groupe.gris .rail i{background:var(--gris)}
.groupe.parole{border-left:3px solid var(--soleil)}
.groupe.parole .chiffre{color:var(--soleil)} .groupe.parole .rail i{background:var(--soleil)}
.groupe.flou{border-left:3px solid var(--alerte)}
.groupe.flou .chiffre{color:var(--alerte)} .groupe.flou .rail i{background:var(--alerte)}

/* ---------- vérificateur de motif ---------- */
.verif{background:var(--ardoise);border:1px solid var(--trait);border-radius:14px;padding:26px 28px;margin:34px 0}
.verif h3{margin-bottom:8px}
.verif > p{color:var(--gris);font-size:14.5px;margin:0 0 16px;max-width:70ch}
.verif textarea{width:100%;background:var(--nuit);border:1px solid var(--trait);border-radius:9px;
  color:var(--blanc);font:inherit;font-size:15px;padding:13px 15px;resize:vertical;line-height:1.5}
.verif textarea:focus{border-color:var(--soleil);outline:none}
  .verif textarea:focus-visible{outline:2px solid var(--numen);outline-offset:3px}
.verif button{margin-top:13px;background:var(--soleil);color:var(--nuit);font:inherit;font-weight:700;
  font-size:15.5px;padding:12px 24px;border:none;border-radius:8px;cursor:pointer}
.verif button:hover{background:var(--soleil-clair)}
.verif button:disabled{background:var(--trait);color:var(--gris-sourd);cursor:not-allowed}
.v-res{margin-top:18px;font-size:15px;color:var(--gris);line-height:1.6}
.v-res:empty{display:none}
.v-res .gros{display:block;font-family:var(--mono);font-size:34px;font-weight:600;
  color:var(--soleil);letter-spacing:-.02em;margin-bottom:6px}
.v-res .cite{display:block;font-family:var(--mono);font-size:13px;color:var(--gris-sourd);
  background:var(--nuit);border:1px solid var(--trait);border-radius:8px;padding:12px 14px;margin-top:14px}
.v-res .marque{color:var(--soleil);font-weight:600}
.v-res.rien{color:var(--gris-sourd)}

/* ---------- méthode ---------- */
.etapes{list-style:none;counter-reset:e;margin:0;padding:0}
.etapes li{counter-increment:e;position:relative;padding:0 0 20px 46px;color:var(--gris)}
.etapes li::before{content:counter(e);position:absolute;left:0;top:1px;width:28px;height:28px;
  border:1px solid var(--trait);border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:13px;color:var(--soleil);background:var(--ardoise)}
.etapes li b{color:var(--blanc);font-weight:600}
.limites{list-style:none;margin:0;padding:0}
.limites li{position:relative;padding:0 0 12px 26px;color:var(--gris);font-size:15.5px}
.limites li::before{content:"!";position:absolute;left:0;top:0;font-family:var(--mono);
  font-weight:700;color:var(--alerte)}

.compteur-club{font-family:var(--mono);font-size:13px;color:var(--numen);
  border:1px solid var(--trait);border-radius:20px;padding:5px 14px;display:inline-block;margin:0 0 14px}
.compteur-club[hidden]{display:none}

/* ---------- appel : carte de membre ---------- */
.adhesion{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:center}
@media(max-width:860px){ .adhesion{grid-template-columns:1fr;gap:40px} }
.bouton{display:inline-block;background:var(--soleil);color:var(--nuit);font-weight:700;font-size:16px;
  padding:15px 30px;border-radius:9px;letter-spacing:.01em;margin-top:8px}
.bouton:hover{background:var(--soleil-clair);text-decoration:none}
.mention{font-size:13.5px;color:var(--gris-sourd);margin-top:16px;max-width:52ch}

/* la carte de membre — dessinée en CSS, aucune image */
.membre{position:relative;aspect-ratio:1.586;border-radius:15px;padding:22px;
  background:linear-gradient(145deg,#20202A 0%,#14141B 55%,#0C0C11 100%);
  border:1px solid var(--trait);
  box-shadow:0 22px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.045);
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.membre::after{content:"";position:absolute;right:-58px;top:-58px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,150,60,.15) 0%,transparent 68%)}
.membre .haut{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}
.membre .club{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--soleil);font-weight:700}
/* logo « Éclipse » : arc levé au-dessus d'une ligne d'horizon qui dépasse du disque */
.membre .arc{position:relative;width:32px;height:17px}
.membre .arc::before{content:"";position:absolute;left:4px;top:0;width:24px;height:12px;
  border-radius:12px 12px 0 0;background:var(--soleil)}
.membre .arc::after{content:"";position:absolute;left:0;top:12px;width:32px;height:2px;
  background:var(--soleil);border-radius:1px}
.membre .nom{font-size:19px;font-weight:600;letter-spacing:.01em;position:relative;z-index:1}
/* ⚠️ PAS --gris-sourd ICI. La carte a un fond en dégradé dont le haut monte à
   #20202A, plus clair que l'Ardoise : le gris sourd y tombe à 4,30:1, sous le
   seuil AA, et c'est du 11px. --gris tient à 5,52:1 sur ce même fond.
   📏 Un contraste se calcule sur le fond RÉEL, pas sur la couleur de la page —
   un dégradé a son point le plus défavorable, et c'est lui qui compte. */
.membre .nom small{display:block;font-size:11px;font-weight:400;color:var(--gris);
  letter-spacing:.16em;text-transform:uppercase;margin-top:5px}
.membre .bas{display:flex;justify-content:space-between;align-items:flex-end;position:relative;z-index:1}
.membre .num{font-family:var(--mono);font-size:13px;color:var(--gris);letter-spacing:.1em}
.membre .num b{color:var(--blanc);font-weight:600}
.membre .sceau{width:44px;height:44px;border-radius:7px;background:var(--nuit);border:1px solid var(--trait);
  display:grid;grid-template:repeat(5,1fr)/repeat(5,1fr);gap:2px;padding:5px}
.membre .sceau i{background:var(--gris-sourd);border-radius:1px}
.membre .sceau i.on{background:var(--soleil)}
.signe{font-family:var(--mono);font-size:11.5px;color:var(--numen);margin-top:16px;text-align:center;letter-spacing:.04em}

/* ---------- pied ---------- */
footer{border-top:1px solid var(--trait);padding:46px 0;color:var(--gris-sourd);font-size:14px}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between}
footer a{color:var(--gris)}
.source{font-family:var(--mono);font-size:12px;color:var(--gris-sourd);margin-top:22px;line-height:1.8}
.source a{color:var(--gris)}

/* ---------- tenue en petite largeur ----------
   Même mesure que sur l'accueil (iframes de 320 à 1024px). Le Radar débordait
   plus fort : ses tableaux de mesure réclamaient jusqu'à 578px, si bien que la
   page glissait de côté sur TOUT téléphone en portrait, jusqu'à 560px de large.
   Ils défilent maintenant dans leur propre boîte. */
@media(max-width:720px){
  .table-plat{display:block;overflow-x:auto}
}

/* 🔴 LE GABARIT BRUT ELARGISSAIT TOUTE LA PAGE — corrige le 10/09/2026.
   Le texte cite mot pour mot dans « Les motifs » est celui des plateformes :
   « This was DECISION_ACCOUNT_SUSPENDED because it violated DECISION_… ».
   Ces noms de variables n'ont ni espace ni trait d'union : le navigateur ne
   peut couper NULLE PART, et la largeur minimale du paragraphe s'impose a la
   page entiere. Mesure a 320 px : le Radar reclamait 363 px, donc TOUT
   glissait de cote — la citation, mais aussi le reste de la page.
   `anywhere` et non `break-word` : seul `anywhere` fait compter la coupure
   dans le calcul de la largeur minimale du bloc. Avec `break-word`, le texte
   se coupe a l'affichage mais le bloc continue de reclamer sa largeur pleine,
   et la page deborde quand meme.
   📏 Un mot que rien ne peut couper est une largeur minimale imposee au site. */
.encart .gabarit{overflow-wrap:anywhere}
/* ⭐ Un élément de grille refuse par défaut de descendre sous la largeur de
   contenu minimale de ce qu'il contient (`minimum:auto`). Les noms de règles du
   code de X n'ont aucun espace : « DropTweetsWithGeoRestrictedMediaRule »
   imposait à lui seul 295px, et la carte qui le porte élargissait toute la
   page — alors même que `.regles li` demande déjà une coupure aux points de
   suspension. La troncature ne pouvait pas se déclencher : rien ne serrait
   jamais la boîte. `min-width:0` lève ce plancher, et l'ellipsis fait son
   travail. 📏 Une troncature CSS ne sert à rien tant que le parent peut
   s'élargir à l'infini. */
.duo>*,.tuiles>*,.adhesion>*{min-width:0}

/* ---------- accès au back-office ----------
   Un lien nommé dans le pied de CHAQUE page. Il existait avant sous forme d'un
   petit logo sans texte, et seulement sur les deux accueils : introuvable si on
   ne savait pas qu'il était là.
   ⭐ Le rendre visible ne dégrade rien : /admin est derrière le mot de passe
   HTTP de Traefik, PUIS un second facteur, PUIS une limitation de débit, et il
   est en noindex + refusé par robots.txt. `/admin` est de toute façon la
   première adresse que teste n'importe quel robot.
   📏 Une porte se protège par sa serrure, jamais par le fait qu'on ne la voie pas. */
/* 🔴 L'OPACITE A ETE RETIREE LE 09/09, ET ELLE NE DOIT PAS REVENIR.
   `--gris-sourd` sur le fond du pied de page vaut 5,37:1 — au-dessus du seuil.
   Mais la regle portait `opacity:.75`, ce qui composait la couleur avec le
   fond et la faisait tomber a **3,44:1**, sous le seuil AA, sur les dix pages
   du site.
   ⛔ Aucun controle statique ne pouvait le voir : l'opacite est une AUTRE
      propriete, et la couleur calculee, elle, ne la contient pas. Trouve en
      mesurant sur le DOM rendu, apres qu'une session voisine a signale le
      piege.
   📏 *La discretion se fait avec une couleur, pas avec une transparence : la
   transparence casse le contraste sans apparaitre dans la couleur.* */
.ecoutille{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--gris-sourd);text-decoration:none;
  transition:color .2s;
}
.ecoutille:hover,.ecoutille:focus-visible{color:var(--soleil);text-decoration:none}

/* =============================================================
   Accessibilité — ajouté le 25/08/2026
   Trois défauts mesurés, pas supposés :
   1. --gris-sourd était à #63636E, soit 3,39:1 sur Nuit et 2,98:1 sur
      Ardoise. Le seuil AA du texte courant est 4,5:1. Ce gris portait des
      phrases utiles (l'aide des formulaires, le pied de page, la phase des
      jauges) — pas de la décoration. Relevé à #83838E : 5,37 et 4,71.
   2. Aucun style de focus n'était défini nulle part, et /adherer/ le
      supprimait même sur les champs (outline:none). Naviguer au clavier
      revenait à chercher à l'aveugle.
   3. scroll-behavior:smooth s'appliquait à tout le monde, y compris à ceux
      qui demandent l'arrêt des animations pour raison médicale.
   ============================================================= */

/* ---- 1. le lien d'évitement ----
   Premier élément focalisable de chaque page : il saute la barre de
   navigation. Invisible tant qu'il n'a pas le focus, jamais display:none —
   un élément masqué ainsi ne se focalise pas, et le lien ne servirait à rien. */
.evitement{
  position:absolute;left:14px;top:-60px;z-index:60;
  background:var(--soleil);color:#140B02;font-weight:600;font-size:15px;
  padding:11px 20px;border-radius:0 0 9px 9px;
  transition:top .16s ease-out;
}
.evitement:focus{top:0;text-decoration:none}

/* ---- 2. l'anneau de focus ----
   Numen plutôt que Soleil : posé à 3px de l'élément, l'anneau tombe sur le
   fond (Nuit 11,4:1 · Ardoise 10,0:1) et reste visible même autour d'un
   bouton orange, où un anneau orange se serait fondu (1,23:1).
   :focus-visible et non :focus — le navigateur ne le montre alors qu'à qui
   navigue au clavier, la souris ne déclenche rien. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--numen);
  outline-offset:3px;
  border-radius:4px;
}
/* Les champs ont déjà un cadre : on double par la bordure, sinon l'anneau
   décollé se lit mal contre une boîte de même forme. */
input:focus-visible,textarea:focus-visible,select:focus-visible{
  border-color:var(--numen);
}

/* ---- 3. cibles tactiles ----
   Les liens de la barre faisaient 20px de haut. 44px est le minimum tenable
   au doigt. On prend la hauteur, JAMAIS la largeur : la barre avait été
   ajustée au pixel pour tenir en 360px, et l'élargir la ferait déborder. */
nav ul a{display:inline-flex;align-items:center;min-height:44px}

/* ---- 4. mouvement ----
   Respecte le réglage système « réduire les animations ». */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}