/* ============================================================
   SYSTÈME — la couche de contraintes, commune aux quatre domaines.
   Se charge EN DERNIER, après site.css et après la feuille propre
   à la page. Elle ne décore rien : elle impose les mesures.

   Écrit le 26/07/2026 en appliquant /site-sans-slop. Chaque bloc
   ci-dessous corrige un « tell » relevé sur nos propres pages, pas
   une règle abstraite.

   Direction retenue : ÉDITORIALE. Des pages qui se lisent, du texte
   long, une hiérarchie portée par la taille et la graisse. D'où
   l'échelle typographique en 1,333 et pas en 1,25.
   ============================================================ */

:root{
  /* ---- Échelle typographique, ratio 1,333 depuis 16 px ----
     Avant : 13,5 · 14,2 · 14,5 · 14,6 · 14,8 · 15 · 15,5 · 16,5 · 17 · 18,5…
     Vingt-trois tailles distinctes tirées au jugé. C'est le tell le
     plus discret et le plus sûr : une échelle non mathématique se
     voit sans se nommer. */
  --t-xs:12px;    /* mentions, dates, notes de bas de bloc */
  --t-s:14px;     /* étiquettes, légendes */
  --t-b:16px;     /* CORPS. Plancher absolu, jamais en dessous. */
  --t-m:21px;     /* chapô, texte d'introduction */
  --t-l:28px;     /* titre de carte, sous-titre de section */
  --t-xl:38px;    /* titre de section */
  --t-2xl:50px;   /* titre de page */
  --t-3xl:67px;   /* accroche pleine page, un seul par page */

  /* ---- Grille de 8. 4 est le seul demi-pas autorisé. ----
     La règle qui porte tout :
     espace DANS un composant < espace ENTRE composants < espace ENTRE sections */
  --e-1:4px;   --e-2:8px;   --e-3:16px;  --e-4:24px;
  --e-5:32px;  --e-6:48px;  --e-7:64px;  --e-8:96px;  --e-9:128px;
  --e-10:160px;

  /* ---- Rythme des sections. TROIS valeurs, jamais une seule. ----
     Une page dont toutes les sections ont le même remplissage se lit
     comme un tableur.
     Décalé d'un cran vers le haut le 28/07/2026 : sur du noir, ce qui
     fait l'élégance c'est le vide, et 64 px entre deux idées ne se
     lisaient pas comme une respiration mais comme un défaut de marge. */
  /* Le rythme de nadirimedjoubene.com, pris comme référence (28/07/2026 :
     « les sections ne sont pas trop grandes, c'est bien mieux fait »).
     Là-bas le plafond est 128 px, pas 160 : au-delà, le vide ne se lit plus
     comme une respiration mais comme une section qui n'en finit pas. */
  --sec-ample:var(--e-9);    /* était 160px */
  --sec-normal:var(--e-9);
  --sec-serre:var(--e-8);

  /* ---- Rayons : UN SEUL, et c'est l'angle vif. ----
     Décision Nadir 28/07/2026 : « soit du rond, soit du carré, jamais les
     deux ». La règle des trois rayons laissait cohabiter la pilule et le
     cercle avec l'angle vif, et le mélange se voyait partout — un rond,
     une barre, un rond dans la même rangée de commandes. Il n'y a pas de
     rond dans le cyberpunk : il n'y en a plus ici non plus. */
  --r-vif:0;
  --r-pilule:0;      /* était 999px */
  --r-cercle:0;      /* était 50% — y compris les visages */

  /* ---- Élévation : il n'y en a pas. ----
     Sur du noir pur, une ombre ne se voit pas : elle ajoute du flou
     sans ajouter de séparation. La hiérarchie de séparation est
     1. le vide  2. un décalage de fond  3. un trait — dans cet ordre,
     et on ne descend d'un étage que si le précédent échoue. */
  --sep-1:transparent;
  --sep-2:var(--surface);
  --sep-3:var(--ligne);

  /* ---- Longueur de ligne. Entre 60 et 80 signes, mesuré. ---- */
  /* La gouttière de .wrap. Tout débord de bloc s'y adosse. */
  --gouttiere:22px;

  --mesure:66ch;
  --mesure-courte:52ch;

  /* ---- Le contraste, mesuré et pas estimé (loi 4). ----
     Ces deux jetons étaient redéclarés plus bas dans ce même fichier,
     dans un SECOND :root qui écrasait silencieusement le premier avec
     des valeurs dessinées pour un fond blanc (#7A7A7A = Lc 18 sur noir).
     C'était la cause unique de la majorité des défauts de lisibilité.
     Un seul :root par feuille, désormais. */
  --gris:#E3E3E3;        /* Lc 90 — CORPS DE LECTURE */
  --gris-clair:#D4D4D4;  /* Lc 75 — légendes et mentions, plancher du lisible */
}

/* ------------------------------------------------------------
   LE RYTHME. Les sections alternent au lieu de défiler à pas égal.
   On cible la position plutôt que d'ajouter une classe partout :
   une section sur trois respire plus large que ses voisines.
   ------------------------------------------------------------ */
section{padding-top:var(--sec-normal);padding-bottom:var(--sec-normal)}
section:nth-of-type(3n+1){padding-top:var(--sec-ample);padding-bottom:var(--sec-ample)}
section:nth-of-type(4n+3){padding-top:var(--sec-serre);padding-bottom:var(--sec-serre)}
/* Une section posée sur un fond différent porte déjà sa séparation :
   elle n'a pas besoin d'en plus. */
section[style*="background"]{padding-top:var(--sec-normal);padding-bottom:var(--sec-normal)}

/* ------------------------------------------------------------
   LA MESURE. Un paragraphe de 110 signes de large ne se lit pas,
   et c'est un tell : personne ne compose du texte comme ça à la main.
   ------------------------------------------------------------ */
.lead,.sub,section > .wrap > p{max-width:var(--mesure)}
.lettre p,.av-c p,.bp-c p{max-width:var(--mesure)}

/* ------------------------------------------------------------
   LE MOUVEMENT. Le fondu sur CHAQUE élément est un tell nommé.
   On le garde là où il porte une intention (le personnage qui
   flotte, la pulsation de disponibilité) et on le retire du reste.
   Une section qui apparaît en fondu au défilement n'apporte rien
   qu'un délai avant de pouvoir lire.
   ------------------------------------------------------------ */
.reveal{opacity:1 !important;transform:none !important;transition:none !important}

/* Les boutons s'adoucissent, ils ne claquent pas. */
.btn,.doc-btn,.car-b,.bp-b{transition:transform .18s cubic-bezier(.22,.61,.36,1),
  background-color .18s ease,box-shadow .18s ease}

/* ------------------------------------------------------------
   LES BORDURES. Aucune carte ne porte de filet gris.
   On neutralise à la source, sur toutes les feuilles chargées avant.
   ------------------------------------------------------------ */
.carte,.liv,.prof,.mission,.rass .r,.bloc3,.av-c,.bp-c,.eng,.step,.ch,.lot{
  border-left:none;border-right:none;border-bottom:none}

/* ------------------------------------------------------------
   LE MAGENTA NE SE LIT PAS, IL DÉSIGNE (loi 3).
   Mesuré sur noir : #E769BB donne Lc 46, le magenta pâle Lc 70.
   Les deux passent sous le plancher de 75. Aucune taille ne les
   sauve : à 54 px l'accent restait à Lc 46, sous le seuil de 60
   des gros caractères. Le magenta quitte donc le texte et devient
   ce qu'il a toujours été sur la bannière : une barre, un filet,
   un surlignage SOUS le mot.
   ------------------------------------------------------------ */
.eyebrow,.eyebrow.sur-sombre,.kicker,.lb,.l,.cible,.date,.periode{color:var(--gris-clair)}

/* UN SEUL signal de mise en valeur, et c'est LE FILET.
   Le mot reste en blanc pur (Lc 108, le maximum lisible) et c'est le
   magenta qui vient se poser dessous. Le magenta ne se lit pas, il
   désigne : c'est exactement son emploi sur la bannière. Écrire le mot
   en magenta l'affaiblissait (Lc 61) au moment même où on voulait le
   renforcer. */
.accent,.big em,h1 em,h2 em,h1 .accent,h2 .accent,.hi{
  color:var(--blanc);font-style:normal;
  text-decoration:underline;
  text-decoration-color:var(--rose);
  text-decoration-thickness:.11em;    /* ~6 px sur un h1, et il maigrit avec le titre :
                                         une épaisseur fixe écrasait les h2 */
  text-underline-offset:.14em;
  text-decoration-skip-ink:none;      /* le filet ne s'interrompt pas sous un j */
}
/* Le même filet, à l'échelle du corps de texte.
   L'accent s'appelle `.souligne`, plus `.on`. `on` était déjà pris comme
   classe d'ÉTAT (`.step.on` = étape active, `.pt.on` = point courant) : la
   règle d'accent attrapait le conteneur de l'étape 4 et soulignait la
   colonne entière, badge, numéro et titre compris. Une classe d'état et
   une classe d'accent ne peuvent pas porter le même nom. */
.souligne,p .accent-texte,li .accent-texte{
  color:var(--blanc);
  text-decoration:underline;
  text-decoration-color:var(--rose);
  text-decoration-thickness:3px;
  text-underline-offset:.16em;
  text-decoration-skip-ink:none;
}

/* ------------------------------------------------------------
   L'ACCENT NE PORTE PAS D'ÉTIQUETTE.
   Un aplat magenta sous un texte de 16 px plafonne à Lc 61 en blanc
   et Lc 49 en noir : les deux échouent. Le bouton principal devient
   donc la plaque blanche du monogramme, et le magenta l'accompagne
   en barre latérale. C'est la grammaire de la marque, pas un
   contournement.
   ------------------------------------------------------------ */
/* Le bouton d'envoi du formulaire suivait encore l'ancienne regle : aplat
   magenta, texte noir, Lc 48,7. Il rejoint la plaque blanche des autres CTA. */
.btn-1,.btn.btn-1,.bp-b,.car-b,.bc-btn.bc-oui,.nav-cta,.rdv-go,
a.btn:not(.btn-2):not(.btn-ghost){
  background:var(--blanc);color:#000;position:relative;
  border:1px solid var(--blanc);overflow:visible;
}
/* La barre laterale ne va QUE sur un CTA de texte. Sur une commande carree
   de 44 px (precedent / suivant d'un carrousel) elle donnait « carre, barre,
   carre » dans la meme rangee : trois objets pour deux fonctions. Elle ne va
   pas non plus sur le bouton du formulaire, en pleine largeur dans sa colonne,
   ou elle deborderait du panneau. */
.btn-1::before{
  content:"";position:absolute;top:0;bottom:0;right:-10px;width:6px;background:var(--rose);
}


/* Les mêmes mesures valent pour les pastilles : un aplat magenta ne
   porte pas d'étiquette lisible, même de deux mots. Elles deviennent
   donc des contours — le magenta cerne, il ne remplit pas. */
.chip.go,.badge,.tag-rose,.etape-num,.opt i,.dash-liste .chip.go{
  background:transparent;border:1px solid var(--rose);color:#fff;
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}


/* ---------- LE PIED DE PAGE COMMUN AUX QUATRE DOMAINES.
     Meme marque ecrite en petit, memes liens legaux, meme ordre.
     C'est la brique qui fait des quatre sites une seule entreprise
     aux yeux d'un visiteur et d'un moteur. ---------- */
footer .pied-marque{font-size:14px;line-height:1.6;color:var(--gris);margin:0 0 6px}
footer .pied-marque b{color:var(--enc)}
footer .pied-note{font-size:14px;line-height:1.6;color:var(--gris-clair);margin:0 0 16px;max-width:70ch}
footer .pied-note b{color:var(--gris)}
footer .pied-liens{display:flex;flex-wrap:wrap;gap:8px 20px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.16)}
footer .pied-liens a{font-size:14px;color:var(--gris);text-decoration:none}
footer .pied-liens a:hover{color:var(--gris-clair);text-decoration:underline;text-underline-offset:3px}


/* ============================================================
   LES ONGLETS — loi 5, appliquée sans rien supprimer.
   Le plafond est de quatre cartes par section. Au-delà, on ne
   coupe pas le contenu et on ne le tasse pas : on le RANGE.

   Refait le 28/07/2026 : la première version était un composant
   d'interface générique (boutons bordés, pastilles rondes,
   flèches). Rien de tout ça n'est dans la bannière. Le vocabulaire
   de la marque est celui d'un terminal : un index en chiffres
   monospacés, une étiquette en petites capitales espacées, une
   règle fine, et l'accent qui SOULIGNE l'élément actif au lieu
   de l'entourer. Aucun rond : le cercle est réservé aux visages.
   Aucune flèche : les onglets sont déjà la navigation, et une
   flèche qu'on ne sait pas lire est une flèche en trop.
   ============================================================ */
.onglets{margin-top:var(--e-5)}

.onglets-nav{display:flex;align-items:stretch;gap:0;
  margin-bottom:var(--e-6);
  border-bottom:1px solid var(--ligne);
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  /* Un onglet coupé net au bord se lit comme un bug. Le dégradé en fin
     de barre dit « ça continue » sans ajouter de flèche à cliquer. */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
@media(min-width:900px){.onglets-nav{-webkit-mask-image:none;mask-image:none}}
.onglets-nav::-webkit-scrollbar{display:none}

.onglet{font:inherit;font-family:var(--corps);font-weight:700;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;white-space:nowrap;flex:none;
  display:inline-flex;align-items:center;gap:12px;
  min-height:52px;padding:0 22px;                 /* cible tactile, loi 10 */
  border:0;border-radius:0;background:transparent;
  color:var(--gris-clair);position:relative;
  transition:color .15s ease}
.onglet:first-child{padding-left:0}
.onglet:hover{color:var(--enc)}

/* L'index. Monospacé, comme une référence de panneau sur la bannière. */
.onglet .n{font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:11px;font-weight:400;letter-spacing:.1em;
  color:var(--gris-clair);transition:color .15s ease}
/* L'index actif passe au blanc, pas au magenta : un chiffre est du texte,
   et le magenta plafonne a Lc 46. L'etat actif est deja dit par le trait —
   un seul designateur par etat, sinon on en lit deux. */
.onglet[aria-selected="true"] .n{color:var(--enc)}

/* L'actif est SOULIGNÉ, pas encadré : l'accent désigne, il n'entoure pas.
   Le trait mord sur la règle de la barre, donc il la remplace à cet
   endroit au lieu de s'ajouter — sinon on lit deux traits. */
.onglet[aria-selected="true"]{color:var(--enc)}
.onglet[aria-selected="true"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--rose)}
.onglet:first-child[aria-selected="true"]::after{left:0}

/* Le compteur, à droite, en monospace. Il dit où on en est ;
   il ne se clique pas, donc il n'a pas l'air d'un bouton. */
.onglets-cote{margin-left:auto;display:flex;align-items:center;flex:none;
  padding:0 0 0 var(--e-5)}
.onglets-cpt{font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:11px;letter-spacing:.14em;color:var(--gris-clair);
  white-space:nowrap}

.volet[hidden]{display:none}
.volet{animation:volet-entre .24s cubic-bezier(.2,.7,.3,1)}
@keyframes volet-entre{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}

@media(max-width:639px){
  .onglet{font-size:11px;padding:0 14px;gap:8px;letter-spacing:.12em}
  .onglets-cote{display:none}
}

/* ============================================================
   UN SEUL OBJET D'ATTENTION PAR ÉCRAN — la couche mobile.
   Principe : « one thing per screen » (Wroblewski, Mobile First).
   Science dessous : la charge cognitive (Sweller) et l'attention
   sélective. Un écran qui porte deux cartes force un arbitrage,
   et l'arbitrage coûte plus cher au lecteur que la lecture.
   Mesuré par CODE/audit-mobile.mjs, à 390 x 844.

   Trois moyens, dans cet ordre :
     1. la liste de cartes devient un défilé horizontal, une carte
        par écran, au doigt ;
     2. ce qui reste empilé reçoit assez de vide pour qu'aucun
        voisin n'entre dans le cadre ;
     3. la section s'aimante en haut de l'écran, pour que le titre
        arrive net au lieu d'arriver coupé.
   ============================================================ */
@media(max-width:639px){

  /* ---- 1. Le défilé. Une carte occupe l'écran, la suivante
       dépasse de 22 px : sans cette amorce, personne ne devine
       qu'il y en a une autre. ---- */
  .etapes,.essais-grille,.tiles,.steps,.tri,.livrables,.flux,.plans,
  .chips-svg.rang,.formats,.av-row,.bp-piste{
    display:flex !important;
    grid-template-columns:none !important;
    gap:var(--e-4);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* On sort le défilé des marges pour qu'il aille bord à bord. La valeur
       DOIT être exactement celle de .wrap : 24 px contre une gouttière de
       22 poussaient la page 4 px trop loin, et une page qui se balade
       latéralement casse la lecture à chaque geste un peu oblique. */
    margin-inline:calc(-1 * var(--gouttiere));
    padding-inline:var(--gouttiere);
    padding-bottom:var(--e-3);
    max-width:100vw;
  }
  .etapes::-webkit-scrollbar,.essais-grille::-webkit-scrollbar,.tiles::-webkit-scrollbar,
  .steps::-webkit-scrollbar,.tri::-webkit-scrollbar,.livrables::-webkit-scrollbar,
  .flux::-webkit-scrollbar,.plans::-webkit-scrollbar,
  .formats::-webkit-scrollbar,.av-row::-webkit-scrollbar,
  .bp-piste::-webkit-scrollbar{display:none}

  .etapes > *,.essais-grille > *,.tiles > *,.steps > *,.tri > *,.livrables > *,
  .flux > *,.plans > *,.chips-svg.rang > *,.formats > *,
  .av-row > *,.bp-piste > *{
    flex:0 0 calc(100vw - var(--gouttiere) - 22px) !important;
    max-width:none !important;
    scroll-snap-align:center;
    scroll-snap-stop:always;      /* on ne saute jamais une carte au geste */
  }

  /* ---- 2. Ce qui reste empilé respire assez pour rester seul. ---- */
  .duel,.fils,.onb,.board-corps,.hero3-grid,.grille-2,.grille-3{
    display:block}
  .duel > * + *,.fils > * + *,.onb > * + *,.grille-2 > * + *,.grille-3 > * + *{
    margin-top:var(--e-7)}

  /* ---- 3. PAS d'aimant vertical, et c'est une décision. ----
       Essayé le 28/07/2026, puis retiré : même en « proximity », Chrome
       détourne le défilement programmé et bloque la page (2600 demandés,
       1690 obtenus, puis plus rien). Sur une page éditoriale plus haute
       que l'écran, l'aimant se bat contre le doigt.
       L'attention se concentre par la MISE EN PAGE — un défilé horizontal
       et du vide — pas en confisquant le défilement au lecteur.
       L'aimant reste là où il a un sens : sur l'axe horizontal d'une
       liste finie de cartes, où chaque cran est un objet entier. ---- */

  /* Le titre d'une section arrive seul : il ne partage pas son écran
     avec la première carte. */
  section > .wrap > h2,section > .wrap > h1{margin-bottom:var(--e-4)}
  section > .wrap > .lead{margin-bottom:var(--e-7)}
}

/* Personne ne se fait aimanter contre son gré. */
@media(prefers-reduced-motion:reduce){
  .etapes,.essais-grille,.tiles,.steps,.tri,.livrables,.flux,.plans,
  .formats,.av-row,.bp-piste{scroll-behavior:auto}
}


/* Dans un volet d'onglets, .cas et .rass ne portent plus qu'une carte :
   elle prend toute la largeur au lieu de garder sa colonne de grille. */
.volet .cas,.volet .rass{display:block;grid-template-columns:none;margin-top:0}
.volet .cas > .c,.volet .rass > .r{grid-column:auto;width:100%}


/* Le débord bord-à-bord ne vaut que pour un défilé posé DIRECTEMENT dans
   la gouttière de la page. Imbriqué dans un panneau qui a déjà son propre
   retrait (.board, .volet), il sort de son cadre et pousse la page de
   côté : mesuré à 410 px de large pour 390. */
@media(max-width:639px){
  .board .tiles,.volet .tiles,.board .etapes,.volet .etapes,
  .board .steps,.volet .steps,.volet .flux,.volet .plans{
    margin-inline:0;padding-inline:0}
  .board .tiles > *,.volet .tiles > *{
    flex-basis:calc(100% - 22px) !important}
}


/* ============================================================
   LE SURVOL — surbrillance en couleur, et un petit bump.
   Deux paliers, parce qu'un bouton n'a pas le même fond selon
   qu'il est une plaque blanche ou un contour sur le noir.

   L'aplat magenta plein est écarté par la mesure, pas par le
   goût : du noir sur #E769BB donne Lc 48,7, sous le plancher
   de 60 des gros caractères. La plaque prend donc le magenta
   DILUÉ (#F4C9E7, Lc 81,8 avec du noir dessus) : c'est bien la
   même teinte, et elle reste lisible.
   ============================================================ */
.encadre,.btn,.btn-1,.btn-2,.lien-nav,.bp-b,.car-b,.rot-suite,
.rdv-opts button,.rdv-go,.doc-btn,.onglet{position:relative}

.btn,.btn-1,.btn-2,.lien-nav,.bp-b,.car-b,.rot-suite,
.rdv-opts button,.rdv-go,.doc-btn,.onglet{
  transition:transform .16s cubic-bezier(.22,.61,.36,1),
             background-color .16s ease,border-color .16s ease,color .16s ease}

/* Palier 1 — la plaque blanche vire au magenta dilué. */
.btn-1:hover,.bp-b:hover,.car-b:hover,.bc-btn.bc-oui:hover,.nav-cta:hover,.rdv-go:hover,
a.btn:not(.btn-2):not(.btn-ghost):hover,
.btn-1:focus-visible,.bp-b:focus-visible,.car-b:focus-visible,.nav-cta:focus-visible,
.rdv-go:focus-visible{
  background:var(--rose-plaque);border-color:var(--rose-plaque);color:#000;
  transform:translateY(-2px)}

/* Palier 2 — sur le noir, c'est un lavis : le texte reste blanc pur. */
.btn-2:hover,.lien-nav:hover,.rdv-opts button:hover,
.doc-btn:hover,.rot-suite:hover,.onglet:hover,
.btn-2:focus-visible,.lien-nav:focus-visible,.rdv-opts button:focus-visible,
.doc-btn:focus-visible,.onglet:focus-visible{
  background:rgba(231,105,187,.14);border-color:var(--rose);color:var(--blanc);
  transform:translateY(-2px)}

/* Le focus clavier reste visible partout (loi 10). Le magenta sur noir
   donne Lc 46 en non-texte, largement au-dessus du plancher de 30. */
.btn:focus-visible,.btn-1:focus-visible,.btn-2:focus-visible,.lien-nav:focus-visible,
.bp-b:focus-visible,.car-b:focus-visible,.rot-suite:focus-visible,
.rdv-opts button:focus-visible,.rdv-go:focus-visible,.doc-btn:focus-visible,
.onglet:focus-visible,a:focus-visible{
  outline:3px solid var(--rose);outline-offset:3px}

/* Pas d'effet en plus sur le survol : la couleur et le bump suffisent
   (decision Nadir 28/07/2026, apres deux essais ecartes — le cadre qui se
   trace, puis le trait qui balaie). Un etat de survol dit « c'est ici »,
   il n'a pas a raconter quelque chose. */

@media(prefers-reduced-motion:reduce){
  .btn:hover,.btn-1:hover,.btn-2:hover,.lien-nav:hover,.bp-b:hover,.car-b:hover,
  .rdv-opts button:hover,.rdv-go:hover,.doc-btn:hover,.rot-suite:hover,.onglet:hover{
    transform:none}
}


/* ============================================================
   UNE SEULE FORME : L'ANGLE VIF.
   Décision Nadir 28/07/2026. La cohabitation pilule + cercle +
   angle vif se lisait comme une hésitation, et sur une rangée de
   commandes elle donnait « rond, barre, rond ». On tombe tous les
   rayons en dur, ici, en dernier — sinon la règle ne vaut que
   pour les feuilles qu'on a pensé à corriger.
   Seuls les blocs marqués hors charte (maquettes d'interfaces
   tierces, ex. la capture WhatsApp) gardent leur forme : les
   corriger reviendrait à falsifier une capture.
   ============================================================ */
*:not([data-hors-charte]):not([data-hors-charte] *),
*:not([data-hors-charte]):not([data-hors-charte] *)::before,
*:not([data-hors-charte]):not([data-hors-charte] *)::after{
  border-radius:0 !important}

/* LA SEULE EXCEPTION : le visage (arbitrage Nadir 28/07/2026).
   Un contenant, une commande, une étiquette prennent l'angle vif. Une tête
   reste ronde : c'est une règle maison antérieure, et elle tient parce
   qu'un visage n'est pas un composant d'interface. */
/* La regle globale ci-dessus pese 0-2-0 : ses deux :not() portent chacun un
   selecteur d'attribut, et :not() prend la specificite de son argument. Une
   exception ecrite en `.classe img` (0-1-1) passait donc DESSOUS et ne
   s'appliquait pas, malgre le !important des deux cotes. On repasse devant
   avec `body :is(...)`, ou :is() prend le poids de son argument le plus
   lourd (`.verb .tete`, 0-2-0), soit 0-2-2 au total. Verifie a l'ecran. */
body :is(.bp-tete-p,.hero-cite figcaption,.nadir-bloc,.tete,.verb .tete,
         .qui,.onb-sortie,.resa-confiance,.carte-contact) img,
body :is(.avatar,.avatar){
  border-radius:50% !important}

/* La deuxieme exception : le radar de RadarPresse. C'est la marque du
   domaine, pas un composant — un radar est rond par definition, et
   l'enfermer dans un carre en ferait un logo dans une boite. Il ne vit que
   sur radarpresse.com : il a ete retire des autres domaines (28/07/2026). */
body :is(.radar,.radar.clair),
body :is(.radar,.radar.clair)::after,
body :is(.radar,.radar.clair)::before{
  border-radius:50% !important}


/* ============================================================
   LA LISTE NUE — le gabarit repris de nadirimedjoubene.com.
   Décision Nadir 28/07/2026 : « c'est vraiment le mieux fait,
   beaucoup plus lisible, et en même temps beaucoup plus
   cyberpunk. Reprends ce gabarit. »

   Ce qui fait la différence là-bas n'est pas la couleur, c'est
   l'absence de carte. Trois idées posées à même le noir, séparées
   par un filet d'un pixel, se lisent d'un trait ; les mêmes trois
   idées dans trois panneaux deviennent trois objets à comparer,
   et l'oeil arbitre au lieu de lire.
   ============================================================ */
.traits{list-style:none;margin:var(--e-6) 0 0;padding:0;max-width:760px}
.traits li{position:relative;padding:14px 0 14px 26px;
  border-bottom:1px solid var(--ligne);
  font-size:16px;line-height:1.62;color:var(--gris)}
.traits li:last-child{border-bottom:none}
.traits li::before{content:"";position:absolute;left:0;top:22px;
  width:10px;height:10px;background:var(--rose)}
.traits li strong,.traits li b{color:var(--enc);font-weight:700}

/* Variante numérotée : quand l'ordre compte, le chiffre remplace la puce. */
.traits.num{counter-reset:pas}
.traits.num li{padding-left:44px;counter-increment:pas}
.traits.num li::before{content:counter(pas);
  width:auto;height:auto;background:none;top:14px;
  font-family:var(--titre);font-weight:400;font-size:20px;line-height:1;
  color:var(--enc)}

/* « Ce qui change » : la sortie de chaque situation, decalee sous elle.
   C'est la seule ligne que le lecteur cherche vraiment. */
.traits .chg{display:block;margin-top:8px;padding-left:16px;
  border-left:3px solid var(--rose);color:var(--enc)}
.traits.profils-nus li{padding-top:22px;padding-bottom:22px}
@media(max-width:639px){
  .traits.profils-nus li{padding-top:28px;padding-bottom:28px}
}

/* Variante à icône : l'icône remplace la puce et tient sa propre colonne. */
.traits.avec-ico li{padding-left:0;display:flex;gap:18px;align-items:flex-start}
.traits.avec-ico li::before{content:none}
.traits.avec-ico li>svg{flex:none;width:46px;height:46px;margin-top:2px;
  stroke:var(--gris-clair);fill:none;stroke-width:1.8;
  stroke-linecap:square;stroke-linejoin:miter}
.traits.avec-ico li>div{min-width:0}


/* ============================================================
   LE CARROUSEL — une piste qui avance toute seule.
   Huit tuiles alignées en grille, c'était huit objets qui se
   disputaient l'écran et un pavé gris. En piste, il en passe
   deux ou trois à la fois sur un écran large, une seule sur un
   téléphone, et le lecteur peut la pousser à la main.
   Le défilement natif fait le travail (aimant, glisser, clavier) :
   le script ne fait qu'avancer l'horloge et lire la position réelle.
   ============================================================ */
.carrousel{margin-top:var(--e-6)}
.carrousel .piste{display:flex;gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:2px 22px 18px;margin:0 -22px;scrollbar-width:none}
.carrousel .piste::-webkit-scrollbar{display:none}
/* UNE carte à la fois, quelle que soit la largeur de l'écran. En 340 px on
   en voyait trois sur un ordinateur : ce n'était plus un carrousel, c'était
   une grille qui glisse, et aucun chiffre ne ressortait. */
.carrousel .piste>*{flex:0 0 100%;scroll-snap-align:center}

.car-nav{display:flex;align-items:center;gap:10px}
.car-b{width:44px;height:44px;flex:none;border:none;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center}
.car-b svg{width:19px;height:19px;stroke:#000;fill:none;stroke-width:2.2;
  stroke-linecap:square;stroke-linejoin:miter}
.car-cpt{font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:11px;letter-spacing:.14em;color:var(--gris-clair);margin-left:6px}


/* ============================================================
   LE RANG — tout se voit d'un coup d'oeil.
   Repris de « 5 engagements qui vous protègent » sur
   nadirimedjoubene.com : une rangée de cartes courtes, icône en
   haut, titre, une phrase. Version anguleuse à valider.
   Pas de filet gris : la séparation se fait par le décalage de
   fond, puis par le trait magenta en tête de carte. C'est la
   hiérarchie de séparation de la maison, dans cet ordre.
   ============================================================ */
.rang{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;margin-top:var(--e-6)}
.rang .rc{background:var(--carte);padding:26px 24px 28px;
  border-top:3px solid var(--rose);
  display:flex;flex-direction:column;gap:14px}
.rang .rc>svg{width:28px;height:28px;flex:none;
  stroke:var(--rose);fill:none;stroke-width:1.8;
  stroke-linecap:square;stroke-linejoin:miter}
.rang .rc .t{font-family:var(--titre);font-weight:400;font-size:17px;
  line-height:1.28;letter-spacing:-.01em;color:var(--enc);margin:0}
.rang .rc p{font-size:14px;line-height:1.6;color:var(--gris);margin:0}
.rang .rc p b{color:var(--enc)}
@media(max-width:900px){.rang{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:639px){.rang{grid-template-columns:1fr}}


/* ============================================================
   L'ENCHAINEMENT — un schéma, pas un listing.
   Trois stations, une ligne qui les relie, et un carré magenta
   qui la parcourt. Ce que le lecteur doit comprendre en une
   seconde, c'est le SENS DE MARCHE : quelque chose entre à
   gauche et ressort à droite, transformé.

   Le connecteur est une paire de pseudo-éléments (le filet et
   le carré qui le parcourt), pas un SVG : il doit basculer à la
   verticale sur un téléphone, et un SVG aurait demandé deux
   dessins à tenir à jour au lieu d'une règle de bascule.

   Il s'appelait `.flux` : nom DEJA PRIS par la section « votre
   expertise se décline sans vous » du site workshop, où `.flux`
   est une grille de cinq colonnes (colonne, flèche, colonne,
   flèche, colonne). Cette feuille se chargeant après, ma grille
   de trois colonnes l'écrasait et la troisième colonne tombait
   à la ligne. Deuxième collision de nom de la journée, après
   `.on` : dans une feuille PARTAGEE par plusieurs sites, un nom
   se vérifie sur tous les sites avant d'être pris.
   ============================================================ */
.enchaine{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--e-6);margin-top:var(--e-7)}
.enchaine .fx-e{position:relative}
.enchaine .fx-e .n{display:block;font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:11px;letter-spacing:.14em;color:var(--gris-clair);margin-bottom:14px}
.enchaine .fx-e .vis{display:block;width:100%;max-width:104px;height:auto;margin-bottom:18px}
.enchaine .fx-e h3{font-family:var(--titre);font-weight:400;font-size:19px;line-height:1.25;
  letter-spacing:-.01em;color:var(--enc);margin:0 0 8px}
.enchaine .fx-e p{font-size:15px;line-height:1.55;color:var(--gris);margin:0;max-width:30ch}

/* Le filet entre deux stations, et le carré qui le parcourt. */
.enchaine .fx-e:not(:last-child)::before{content:"";position:absolute;
  top:52px;left:calc(100% + 8px);width:calc(var(--e-6) - 16px);height:2px;
  background:rgba(231,105,187,.30)}
.enchaine .fx-e:not(:last-child)::after{content:"";position:absolute;
  top:48px;left:calc(100% + 8px);width:10px;height:10px;background:var(--rose);
  animation:fx-file 2.6s linear infinite}
@keyframes fx-file{
  0%  {transform:translateX(0);opacity:0}
  12% {opacity:1}
  88% {opacity:1}
  100%{transform:translateX(calc(var(--e-6) - 26px));opacity:0}
}
/* Décalé, pour qu'on lise un trajet et non deux clignotements. */
.enchaine .fx-e:nth-child(2)::after{animation-delay:.85s}

@media(max-width:639px){
  .enchaine{grid-template-columns:1fr;gap:var(--e-6)}
  .enchaine .fx-e:not(:last-child)::before{
    top:auto;bottom:calc(-1 * var(--e-6) + 8px);left:5px;
    width:2px;height:calc(var(--e-6) - 16px)}
  .enchaine .fx-e:not(:last-child)::after{
    top:auto;bottom:calc(-1 * var(--e-6) + 8px);left:1px;
    animation-name:fx-file-v}
  @keyframes fx-file-v{
    0%  {transform:translateY(0);opacity:0}
    12% {opacity:1}
    88% {opacity:1}
    100%{transform:translateY(calc(var(--e-6) - 26px));opacity:0}
  }
}
@media(prefers-reduced-motion:reduce){
  .enchaine .fx-e::after{animation:none;opacity:1}
}


/* ============================================================
   LE DÉROULÉ — quand une section porte plus d'une idée.
   Même vocabulaire que les onglets (index monospacé, libellé
   capitales espacées, filet magenta sur l'ouvert), mais empilé :
   sur un téléphone, une rangée d'onglets se fait oublier, une
   pile de lignes non. Tout est fermé au départ, donc l'écran ne
   porte qu'un objet et le lecteur choisit ce qu'il ouvre.
   Bâti sur <details>/<summary> : le clavier, la recherche dans
   la page et le lecteur d'écran marchent sans une ligne de JS.
   ============================================================ */
.deroules{margin-top:var(--e-7);border-top:1px solid var(--ligne)}
.dep{border-bottom:1px solid var(--ligne)}
.dep>summary{
  display:flex;align-items:center;gap:16px;
  min-height:64px;padding:14px 2px;cursor:pointer;
  font-family:var(--corps);font-weight:700;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris-clair);position:relative;
  list-style:none;transition:color .15s ease}
.dep>summary::-webkit-details-marker{display:none}
.dep>summary::marker{content:""}
.dep>summary:hover,.dep[open]>summary{color:var(--enc)}
.dep>summary:focus-visible{outline:3px solid var(--rose);outline-offset:3px}

.dep .dep-n{font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:11px;font-weight:400;letter-spacing:.1em;
  color:var(--gris-clair);flex:none}
.dep[open] .dep-n{color:var(--enc)}
.dep .dep-t{flex:1 1 auto;min-width:0}

/* Le signe d'état : deux barres qui font une croix fermée, une seule
   ouverte. Pas de chevron — un chevron est un arrondi déguisé. */
.dep .dep-e{flex:none;position:relative;width:14px;height:14px}
.dep .dep-e::before,.dep .dep-e::after{
  content:"";position:absolute;background:var(--rose);
  transition:transform .18s cubic-bezier(.22,.61,.36,1),opacity .18s ease}
.dep .dep-e::before{left:0;right:0;top:6px;height:2px}
.dep .dep-e::after{top:0;bottom:0;left:6px;width:2px}
.dep[open] .dep-e::after{transform:scaleY(0);opacity:0}

/* Le filet magenta de l'ouvert, à gauche : c'est le même geste que le
   soulignement de l'onglet actif, tourné de 90 degrés pour une pile. */
.dep[open]>summary::before{
  content:"";position:absolute;left:-14px;top:14px;bottom:14px;width:3px;
  background:var(--rose)}

.dep .dep-c{padding:0 0 26px;max-width:68ch}
.dep .dep-c>*:first-child{margin-top:0}
/* Le moment, en tête de contenu : « au démarrage », « ensuite, tous les
   mois ». C'est ce qui situe le déroulé dans le temps, pas un titre bis. */
.dep .dep-c .dep-q{font-family:var(--corps);font-weight:700;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris-clair);margin:0 0 16px}
.dep .dep-c ul{list-style:none;margin:0;padding:0}
.dep .dep-c li{position:relative;padding:0 0 13px 23px;
  font-size:15px;line-height:1.6;color:var(--gris)}
.dep .dep-c li:last-child{padding-bottom:0}
.dep .dep-c li::before{content:"";position:absolute;left:0;top:9px;
  width:8px;height:8px;background:var(--rose)}
.dep .dep-c li b{color:var(--enc)}

@media(min-width:900px){
  .dep>summary{font-size:14px;padding:18px 2px}
  .dep .dep-c{padding-left:calc(11px + 16px)}   /* aligné sous le libellé */
}