/* ================================================================
   ASHLEYTAIEB.COM — V2 · rebuild profond · 2026-07-07
   Système visuel AT 2026 (sources : design_system_2026, verrouillé)
   Palette v1.1 · quatuor Atipo · trait fluo V4 (« il coupe, il
   n'habille pas ») · portes tonales · matières « autorité calme ».
   Corrections retours Ashley 03/07 : fond plus sharp, fluo visible
   (événements sur fond sombre en priorité), wordmark agrandi,
   numérotation lisible (chapitres nommés), grain réduit.
   Robustesse sans JS : tout le contenu est visible par défaut —
   les états masqués n'existent que sous html.js (GEO/print).
   ================================================================ */

/* ---------- Fonts (licence desktop — licence WEB Atipo à acquérir avant mise en ligne publique) ---------- */
@font-face { font-family:'Safiro'; src:url('../fonts/Safiro-Regular.woff2') format('woff2'),url('../fonts/Safiro-Regular.woff') format('woff'); font-weight:400; font-display:swap; }
@font-face { font-family:'Safiro'; src:url('../fonts/Safiro-Medium.woff2') format('woff2'),url('../fonts/Safiro-Medium.woff') format('woff'); font-weight:500; font-display:swap; }
@font-face { font-family:'Safiro'; src:url('../fonts/Safiro-SemiBold.woff2') format('woff2'),url('../fonts/Safiro-SemiBold.woff') format('woff'); font-weight:600; font-display:swap; }
@font-face { font-family:'Argesta'; src:url('../fonts/ArgestaDisplay-Regular.woff2') format('woff2'),url('../fonts/ArgestaDisplay-Regular.woff') format('woff'); font-weight:400; font-display:swap; }
@font-face { font-family:'Argesta'; src:url('../fonts/ArgestaDisplay-Italic.woff2') format('woff2'),url('../fonts/ArgestaDisplay-Italic.woff') format('woff'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Nudica'; src:url('../fonts/Nudica-Light.woff2') format('woff2'),url('../fonts/Nudica-Light.woff') format('woff'); font-weight:300; font-display:swap; }
@font-face { font-family:'Nudica'; src:url('../fonts/Nudica-Regular.woff2') format('woff2'),url('../fonts/Nudica-Regular.woff') format('woff'); font-weight:400; font-display:swap; }
@font-face { font-family:'Nudica'; src:url('../fonts/Nudica-Medium.woff2') format('woff2'),url('../fonts/Nudica-Medium.woff') format('woff'); font-weight:500; font-display:swap; }
@font-face { font-family:'Mg12'; src:url('../fonts/Mg12-Regular.woff2') format('woff2'),url('../fonts/Mg12-Regular.woff') format('woff'); font-weight:400; font-display:swap; }
@font-face { font-family:'Mg12'; src:url('../fonts/Mg12-Medium.woff2') format('woff2'),url('../fonts/Mg12-Medium.woff') format('woff'); font-weight:500; font-display:swap; }

/* ---------- Palette v1.1 ---------- */
:root{
  --blanc-galerie:#FFFFFF; /* blanc galerie plein — retour Ashley 07/07 « le site manque de lumière, le fond est gris » (historique : #FCFCFA le 03/07, source DA #F7F7F5 — écart assumé, re-tranchable) */
  --vert-nuit:#0E1A17;
  --charbon:#1C1C1C;
  --ivoire:#EBEDEA;
  --brume:#9A9A9A;
  --fluo:#EAFF3F;
  --vert-anglais:#1F3528;   /* Le Cabinet AT */
  --indigo:#0F1F3D;         /* addiction society */
  --safiro:'Safiro',Georgia,serif;
  --argesta:'Argesta',Georgia,serif;
  --nudica:'Nudica',-apple-system,'Helvetica Neue',sans-serif;
  --mg12:'Mg12','SF Mono',monospace;
  --max:1200px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
::selection{background:var(--vert-nuit);color:var(--fluo);}
body{
  font-family:var(--nudica);font-weight:300;font-size:17px;line-height:1.75;
  color:var(--charbon);background:var(--blanc-galerie);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* Matière — papier, grain fin (réduit 03/07 puis 07/07 : « le grain grisait tout », « manque de lumière ») */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:98;opacity:.011;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- Typo — rôles (Major Third, transposée écran, échelle montée V2) ---------- */
h1,.h1{font-family:var(--argesta);font-style:italic;font-weight:400;font-size:clamp(2.9rem,7vw,6.4rem);line-height:1.04;letter-spacing:-.015em;text-wrap:balance;}
h2,.h2{font-family:var(--argesta);font-weight:400;font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.16;text-wrap:balance;}
h3,.h3{font-family:var(--safiro);font-weight:500;font-size:1.3rem;line-height:1.35;}
.h2-it{font-style:italic;}
.kicker{font-family:var(--mg12);font-weight:500;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brume);}
.citation{font-family:var(--argesta);font-style:italic;font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1.32;text-wrap:balance;}
.legende{font-family:var(--mg12);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brume);}
.grand-lead{font-family:var(--argesta);font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.5;}

/* Cascade — phrases courtes, le blanc fait partie du sens */
.cascade p{margin-bottom:1.35em;max-width:34em;}
.cascade p.seule{font-family:var(--safiro);font-weight:500;font-size:1.18em;line-height:1.5;}

/* ---------- Fluo V4 — un événement par écran, il coupe ---------- */
.pf{color:var(--fluo);}
.gf{color:var(--fluo);font-style:normal;}
/* Trait vertical suspendu — 1px sur sombre, 1.5px sur clair. Sur fond clair il est doublé
   d'une ombre d'encre 1px pour rester perceptible (retour 03/07 « on ne le voit pas »). */
.trait-v{display:block;width:1.5px;height:clamp(80px,16vh,150px);background:var(--fluo);margin-bottom:1.9rem;box-shadow:1px 0 0 rgba(14,26,23,.14);}
.dark .trait-v,.hero .trait-v,.cabinet-fond .trait-v,.society-fond .trait-v{width:1px;box-shadow:none;}
html.js .trait-v{transform-origin:top;animation:pousse 1.1s var(--ease) both;}
@keyframes pousse{from{transform:scaleY(0);}to{transform:scaleY(1);}}
/* Numérotation slash fluo (usage 2/4) */
.num{font-family:var(--mg12);font-size:.72rem;letter-spacing:.2em;color:var(--brume);}
.num .slash{color:var(--fluo);text-shadow:0 0 1px rgba(14,26,23,.2);}
.dark .num .slash,.cabinet-fond .num .slash,.society-fond .num .slash{text-shadow:none;}

/* ---------- Wordmarks ---------- */
.wm-ashley{font-family:var(--safiro);font-weight:600;letter-spacing:.01em;text-transform:lowercase;}
.wm-ashley .pf{margin-left:.3em;}
.wm-cabinet{font-family:var(--safiro);font-weight:500;}
.wm-society{font-family:var(--safiro);font-weight:500;text-transform:lowercase;}
.mention-fondateur{font-family:var(--mg12);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;}
.mention-fondateur .nom{font-family:var(--safiro);font-weight:500;text-transform:none;letter-spacing:.04em;font-size:.78rem;}

/* ---------- Nav — wordmark en majesté (retour Ashley : le mettre en valeur) ---------- */
nav.site{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.15rem 4vw;
  background:color-mix(in srgb,var(--blanc-galerie) 90%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(28,28,28,.07);
  transition:padding .35s var(--ease),background .3s;
}
html.js nav.site.compacte{padding-top:.65rem;padding-bottom:.65rem;}
nav.site .brand{display:inline-flex;flex-direction:column;gap:.2rem;color:var(--charbon);text-decoration:none;line-height:1.02;}
nav.site .brand .wm-ashley{font-size:2rem;transition:font-size .35s var(--ease);}
html.js nav.site.compacte .brand .wm-ashley{font-size:1.5rem;}
nav.site .brand-sub{font-family:var(--mg12);font-size:.52rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brume);}
nav.site ul{display:flex;gap:2.1rem;list-style:none;align-items:center;}
nav.site ul a{
  font-family:var(--mg12);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--charbon);text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent;
  transition:border-color .25s;
}
nav.site ul a:not(.cta):hover,nav.site ul a.actif:not(.cta){border-bottom-color:var(--fluo);}
nav.site .cta{
  font-family:var(--safiro);font-weight:500;font-size:.84rem;letter-spacing:.02em;text-transform:none;
  border:1px solid var(--charbon);border-radius:100px;padding:.55rem 1.35rem;
  transition:all .25s;border-bottom-width:1px!important;
}
nav.site .cta:hover{background:var(--vert-nuit);color:var(--blanc-galerie);border-color:var(--vert-nuit);}
nav.site .burger{display:none;background:none;border:none;cursor:pointer;font-family:var(--mg12);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--charbon);padding:.4rem 0;}
@media(max-width:920px){
  nav.site .burger{display:block;}
  nav.site ul{display:none;}
  nav.site.ouvert ul{
    display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start;
    position:absolute;top:100%;left:0;right:0;
    background:var(--blanc-galerie);padding:1.8rem 4vw 2.2rem;
    border-bottom:1px solid rgba(28,28,28,.08);
  }
}
@media(max-width:640px){nav.site .brand .wm-ashley{font-size:1.5rem;}nav.site .brand-sub{font-size:.46rem;letter-spacing:.14em;}}

/* ---------- Sections & fonds ---------- */
section{padding:clamp(4.5rem,11vw,9rem) 4vw;position:relative;}
.inner{max-width:var(--max);margin:0 auto;position:relative;}
.dark{background:radial-gradient(130% 110% at 50% 0%,#132420 0%,var(--vert-nuit) 62%);color:var(--ivoire);}
.dark .kicker{color:color-mix(in srgb,var(--ivoire) 55%,transparent);}
/* Sections ivoire éclaircies (07/07 : plus de lumière) — l'ivoire pur reste la couleur de texte sur fonds sombres */
.ivoire{background:color-mix(in srgb,var(--ivoire) 52%,#FFFFFF);}
.cabinet-fond{background:radial-gradient(120% 100% at 50% 0%,#264232 0%,var(--vert-anglais) 60%);color:var(--ivoire);}
.society-fond{background:radial-gradient(120% 100% at 50% 0%,#16294d 0%,var(--indigo) 60%);color:var(--ivoire);}
.cabinet-fond .kicker,.society-fond .kicker{color:rgba(235,237,234,.6);}

/* En-tête de chapitre — numérotation LISIBLE (retour 03/07 : « trop cryptique »).
   Le numéro, le total et le nom du chapitre vivent ensemble sur un filet. */
.chapitre{display:flex;align-items:baseline;gap:1.2rem;border-top:1px solid rgba(28,28,28,.16);padding-top:1.1rem;margin-bottom:2.6rem;position:relative;}
.dark .chapitre,.cabinet-fond .chapitre,.society-fond .chapitre{border-top-color:rgba(235,237,234,.22);}
/* Signature fluo de chapitre — un segment sur le filet, à chaque en-tête (07/07 : « le fluo, c'est ce qui relie ») */
.chapitre::before{content:'';position:absolute;top:-1px;left:0;width:3.4rem;height:2px;background:var(--fluo);box-shadow:0 1px 0 rgba(14,26,23,.16);}
.dark .chapitre::before,.cabinet-fond .chapitre::before,.society-fond .chapitre::before{box-shadow:none;height:1.5px;}
html.js .rv.chapitre::before{transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease) .25s;}
html.js .rv.vu.chapitre::before{transform:scaleX(1);}
.chapitre .num{flex-shrink:0;}
.chapitre .titre-ch{font-family:var(--mg12);font-weight:500;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brume);}
.dark .chapitre .titre-ch,.cabinet-fond .chapitre .titre-ch,.society-fond .chapitre .titre-ch{color:rgba(235,237,234,.55);}

/* Numéro fantôme — cohérent : toujours le numéro du chapitre courant, jamais caché sous une photo */
.ghost{position:absolute;right:0;top:-1.6rem;font-family:var(--argesta);font-style:italic;font-size:clamp(6rem,14vw,11.5rem);line-height:1;color:currentColor;opacity:.07;pointer-events:none;user-select:none;z-index:0;}
@media(max-width:900px){.ghost{font-size:5.2rem;top:-1rem;}}

/* ---------- Hero ---------- */
.hero{min-height:94vh;display:flex;align-items:flex-end;position:relative;padding:0;overflow:hidden;}
/* Le padding passe par des variables (09/09) : le « sol » du texte s'y cale sans une ligne de JavaScript.
   Une page qui change les marges de son bandeau redéfinit --pad-t / --pad-x / --pad-b, jamais `padding`. */
.hero .contenu{position:relative;z-index:2;--pad-t:9rem;--pad-x:4vw;--pad-b:5.5rem;padding:var(--pad-t) var(--pad-x) var(--pad-b);max-width:var(--max);margin:0 auto;width:100%;}
/* Voile des bandeaux allégé le 07/09 (Ashley : « baisse le filtre sur les photos du bandeau, je veux qu'elles claquent, propre, lumineuses, contrastées »),
   puis ramené le 09/09 de .58 à .30 : ce n'est plus lui qui porte la lisibilité — c'est le sol ancré au texte, ci-dessous.
   Il ne fait plus qu'asseoir le bas du cadre. */
.hero .voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,23,0) 52%,rgba(14,26,23,.30) 100%);z-index:1;}
.hero .ph.abs{position:absolute;inset:0;}
html.js .hero .ph.abs{transform:scale(1.06);transition:transform 2.4s var(--ease);}
html.js.est-charge .hero .ph.abs{transform:scale(1.0);}
/* Titre hero — révélation ligne à ligne (masques). Sans JS : visible, rien ne bouge. */
html.js .ligne-h{display:block;overflow:hidden;}
html.js .ligne-h>span{display:block;transform:translateY(110%);transition:transform 1s var(--ease);}
html.js.est-charge .ligne-h>span{transform:none;}
.ligne-h:nth-child(2)>span{transition-delay:.1s;}
.ligne-h:nth-child(3)>span{transition-delay:.2s;}
/* Le masque de révélation ne sert QUE pendant l'animation. Une fois les lignes en place il se retire :
   sinon il rogne le halo du titre et coupe à droite toute ligne un peu plus large que prévu
   (mesuré le 09/09 : les lignes du bandeau Presse occupaient 343 px dans une boîte de 343 px). */
@keyframes demasque{to{overflow:visible;}}
html.js.est-charge .ligne-h{animation:demasque 0s linear 1.6s forwards;}

/* ==========================================================================
   LISIBILITÉ DU TEXTE DE BANDEAU — posé le 09/09 (ta main sur le dosage)
   Réversible : supprimer ce bloc rend l'état du 09/09 au soir.

   Le principe, en un mot : jusqu'ici le voile était posé sur LE CADRE, et le texte
   n'était pas dedans — mesuré, le voile valait ZÉRO exactement là où le sur-titre
   est posé, qui n'était donc lisible que sur 5 % de sa surface. Désormais le voile
   suit LES MOTS. La photo garde sa lumière partout où il n'y a pas de texte :
   75 % de sa surface sur grand écran, 55 % sur téléphone.
   ========================================================================== */

/* --- 1. Le sol : un dégradé ancré au bloc de texte, jamais au cadre --- */
.hero .contenu{--sol:14 26 23;}                 /* vert-nuit, par défaut */
.hero.cabinet-fond .contenu{--sol:31 53 40;}    /* vert-anglais — Le Cabinet AT */
.hero.society-fond .contenu{--sol:15 31 61;}    /* indigo — addiction society */
/* NEVER : réutiliser la couleur de voile d'une page sur une autre. La couleur est une marque. */

.hero .contenu::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  top:max(0px,calc(var(--pad-t) - 4.5rem));
  bottom:max(0px,calc(var(--pad-b) - 3.5rem));
  /* Il démarre au bord de l'écran : un dégradé décentré ne peut pas s'éteindre proprement
     sur son bord le plus proche, alors on fait en sorte qu'il n'y ait pas de bord de ce côté. */
  left:calc(50% - 50vw);
  width:min(94vw,calc(50vw - 50% + var(--pad-x) + 44rem));
  /* Jamais le mot-clé `transparent` (= noir transparent : Safari le rend gris sale) :
     toujours la teinte de la maison à alpha 0 — d'où la variable en composantes.
     Arrêts multiples à progression non linéaire, sinon le dégradé fait des bandes. */
  background:radial-gradient(78% 104% at 22% 50%,
    rgb(var(--sol) / .70)  0%,
    rgb(var(--sol) / .66) 16%,
    rgb(var(--sol) / .58) 30%,
    rgb(var(--sol) / .46) 44%,
    rgb(var(--sol) / .33) 58%,
    rgb(var(--sol) / .20) 72%,
    rgb(var(--sol) / .09) 85%,
    rgb(var(--sol) / .03) 94%,
    rgb(var(--sol) / 0)  100%);
  /* Extinction haute et basse : le radial ne sait pas le faire seul depuis un centre décentré. */
  -webkit-mask-image:linear-gradient(180deg,rgb(0 0 0 / 0) 0%,#000 17%,#000 83%,rgb(0 0 0 / 0) 100%);
  mask-image:linear-gradient(180deg,rgb(0 0 0 / 0) 0%,#000 17%,#000 83%,rgb(0 0 0 / 0) 100%);
}
@media(max-width:760px){
  /* Sur téléphone le texte occupe presque toute la largeur : le sol s'élargit et se recentre,
     sinon il se lit comme une tache latérale. */
  .hero .contenu::before{
    left:calc(50% - 50vw);width:100vw;
    background:radial-gradient(116% 96% at 42% 46%,
      rgb(var(--sol) / .72)  0%,
      rgb(var(--sol) / .68) 18%,
      rgb(var(--sol) / .60) 34%,
      rgb(var(--sol) / .48) 48%,
      rgb(var(--sol) / .34) 62%,
      rgb(var(--sol) / .20) 75%,
      rgb(var(--sol) / .08) 88%,
      rgb(var(--sol) / 0)  100%);
    -webkit-mask-image:linear-gradient(180deg,rgb(0 0 0 / 0) 0%,#000 13%,#000 88%,rgb(0 0 0 / 0) 100%);
    mask-image:linear-gradient(180deg,rgb(0 0 0 / 0) 0%,#000 13%,#000 88%,rgb(0 0 0 / 0) 100%);
  }
}

/* --- 2. Le halo : de l'arête, pas de l'ombre --- */
/* Il n'apporte pas seul le contraste (mesuré : un halo invisible vaut un voile de .25,
   il en faudrait .64). Ce qu'il apporte, c'est la séparation entre la lettre et la matière
   photographique — et donc le droit de baisser le sol d'un cran. C'est de la lumière rendue à la photo.
   Réglage : si l'on distingue l'ombre EN TANT QU'OMBRE, baisser les alphas de .05
   AVANT de toucher aux rayons — un rayon court fait une ombre dure, effet diapositive. */
.hero .contenu .kicker,
.hero .contenu p,
.hero .contenu .btn{
  text-shadow:
    0 0   6px rgb(var(--sol) / .42),
    0 2px 18px rgb(var(--sol) / .40),
    0 4px 48px rgb(var(--sol) / .34);
}
/* Le titre en Argesta Display italique a des fûts fins et des déliés : une couche serrée de plus,
   pour que le modelé de la lettre ne se dissolve pas dans le halo. */
.hero .contenu h1{
  text-shadow:
    0 0   3px rgb(var(--sol) / .38),
    0 0   9px rgb(var(--sol) / .40),
    0 2px 24px rgb(var(--sol) / .38),
    0 5px 60px rgb(var(--sol) / .30);
}
/* Le fluo coupe, il ne s'ourle pas — grammaire du fluo, at.css l.71. */
.hero .contenu .trait-v,.hero .contenu .pf,.hero .contenu .gf,.hero .contenu .at-f{text-shadow:none;}
@media print{.hero .contenu *{text-shadow:none!important;}}

/* --- 3. L'opacité : le levier gratuit --- */
/* Rendre le sur-titre opaque fait tomber le sol requis de .84 à .64 sur le pire pixel,
   et de .69 à .30 sur un mi-ton. Il ne touche ni la police, ni la couleur, ni la mise en page.
   L'atténuation à 55-60 % est juste sur fond plein ; sur photo elle coûte de la lumière à l'image. */
.hero .contenu .kicker,
.hero.dark .contenu .kicker,
.hero.cabinet-fond .contenu .kicker,
.hero.society-fond .contenu .kicker{color:var(--ivoire);letter-spacing:.20em;}
/* Le corps du bandeau passe de 85 % à 100 %. Ailleurs sur le site, .txt-ivoire-85 garde sa valeur. */
.hero .contenu p.txt-ivoire-85,.hero .contenu p.txt-ivoire-70{color:var(--ivoire);}
/* Le bouton : son filet est en currentColor et disparaît dès que le fond est clair — il a son propre sol.
   Valeurs en dur : sur Safari, backdrop-filter échoue si le rayon vient d'une variable CSS. */
.hero .contenu .btn{
  background:rgb(var(--sol) / .26);
  -webkit-backdrop-filter:blur(6px) brightness(.86);
  backdrop-filter:blur(6px) brightness(.86);
  border-color:rgb(235 237 234 / .78);
}
.hero .contenu .btn:hover{
  background:var(--ivoire);color:var(--vert-nuit);border-color:var(--ivoire);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
/* 07/10/2026 : les boutons des bandeaux (et de deux formulaires sur fond sombre) portent color:var(--ivoire) en style en ligne,
   qui l'emportait sur le survol → texte ivoire sur fond ivoire : au survol, le bouton devenait une pastille blanche sans texte.
   Le survol reprend la main sur la couleur du texte. */
.hero .contenu .btn:not(.plein):hover,.dark .btn:not(.plein):hover,.cabinet-fond .btn:not(.plein):hover,.society-fond .btn:not(.plein):hover{color:var(--vert-nuit)!important;}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero .contenu .btn{background:rgb(var(--sol) / .46);}
}

/* ---------- Photos & cadres ---------- */
.ph{position:relative;overflow:hidden;background:linear-gradient(160deg,#E4E7E3 0%,#D3D7D2 100%);}
/* Relève tonale des photos (07/07 : « manque de lumière, de vivacité » — les provisoires sont désaturées) */
.ph.photo{background-size:cover;background-position:center;filter:saturate(1.28) brightness(1.04) contrast(1.02);}
/* Bandeaux seuls — traitement « ça claque » du 07/09 : plus de lumière et de contraste, moins de saturation forcée. Ne touche pas les photos de contenu. */
.hero .ph.photo{filter:saturate(1.10) brightness(1.10) contrast(1.14);}
.ratio-169{aspect-ratio:16/9;}.ratio-45{aspect-ratio:4/5;}.ratio-11{aspect-ratio:1/1;}.ratio-32{aspect-ratio:3/2;}
.cadre{position:relative;}
.cadre::after{content:'';position:absolute;top:16px;left:16px;right:-16px;bottom:-16px;border:1px solid rgba(14,26,23,.28);pointer-events:none;}
.dark .cadre::after,.cabinet-fond .cadre::after,.society-fond .cadre::after{border-color:rgba(235,237,234,.3);}
@media(max-width:640px){.cadre::after{top:10px;left:10px;right:-10px;bottom:-10px;}}
.cadre .ph{transition:transform .8s var(--ease);}
.cadre:hover .ph{transform:scale(1.015);}

/* ---------- Grilles ---------- */
.deux-col{display:grid;grid-template-columns:1.08fr 1fr;gap:4.5rem;align-items:center;}
.deux-col.haut{align-items:start;}
@media(max-width:900px){.deux-col{grid-template-columns:1fr;gap:3rem;}}
.trois-col{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
@media(max-width:900px){.trois-col{grid-template-columns:1fr;}}

/* Portes — socle tonal, accent en filet + survol seulement (portes tonales) */
.portes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
@media(max-width:900px){.portes{grid-template-columns:1fr;}}
.porte{
  --accent:var(--vert-nuit);
  display:block;text-decoration:none;color:var(--charbon);padding:3rem 2.3rem 4.6rem;min-height:400px;
  position:relative;background:var(--blanc-galerie);border-top:3px solid var(--accent);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease),color .4s var(--ease);
}
.porte .kicker{transition:color .35s;}
a.porte:hover{transform:translateY(-8px);box-shadow:0 30px 70px -32px rgba(14,26,23,.5);background:var(--accent);color:var(--ivoire);}
a.porte:hover .kicker{color:rgba(235,237,234,.65);}
a.porte:hover .legende{color:rgba(235,237,234,.6);}
.porte .fleche{position:absolute;bottom:2rem;left:2.3rem;font-family:var(--safiro);font-size:1.3rem;transition:transform .35s var(--ease),color .35s;}
a.porte:hover .fleche{transform:translateX(10px);color:var(--fluo);}
/* Le fluo relie les trois maisons (07/07) — slash fluo sur le kicker de chaque porte
   (grammaire stricte du fluo : le slash — les wordmarks Cabinet/society n'ont pas de point fluo) */
.porte .kicker::before{content:'/';color:var(--fluo);margin-right:.55em;text-shadow:0 0 1px rgba(14,26,23,.25);}
a.porte:hover .kicker::before{text-shadow:none;}
.porte::after{content:'';position:absolute;top:-3px;left:0;width:2.4rem;height:3px;background:var(--fluo);opacity:0;transition:opacity .35s;}
a.porte:hover::after{opacity:1;}
/* Sigle AT en fluo — variante signature du wordmark Cabinet (supports signature uniquement) */
.wm-cabinet .at-f{color:var(--fluo);}
.porte.p-cabinet{--accent:var(--vert-anglais);}
.porte.p-society{--accent:var(--indigo);}
.porte.p-histoire{--accent:var(--vert-nuit);}

/* Cartes d'offre */
.offre{border:1px solid rgba(28,28,28,.14);padding:2.6rem 2.3rem;background:var(--blanc-galerie);position:relative;}
.offre .prix{font-family:var(--safiro);font-weight:600;font-size:1.7rem;margin:.8rem 0;}
.offre .prix small{font-family:var(--mg12);font-size:.62rem;letter-spacing:.14em;color:var(--brume);display:block;margin-top:.4rem;font-weight:400;}
.offre.pleine{background:var(--vert-anglais);color:var(--ivoire);border-color:var(--vert-anglais);}
.offre.pleine .kicker{color:rgba(235,237,234,.6);}
.offre.pleine .prix small{color:rgba(235,237,234,.6);}

/* Cartes sombres (fonds d'entité) */
.carte-l{border:1px solid rgba(235,237,234,.25);padding:2.6rem 2.3rem;}

/* ---------- Boutons — invitation, jamais impératif ---------- */
.btn{
  display:inline-block;font-family:var(--safiro);font-weight:500;font-size:.98rem;
  padding:.95rem 2.1rem;border-radius:100px;text-decoration:none;transition:all .3s var(--ease);
  border:1px solid currentColor;color:inherit;background:transparent;cursor:pointer;
}
.btn:hover{background:var(--charbon);color:var(--blanc-galerie);border-color:var(--charbon);}
.dark .btn:hover,.cabinet-fond .btn:hover,.society-fond .btn:hover{background:var(--ivoire);color:var(--vert-nuit);border-color:var(--ivoire);}
.btn.plein{background:var(--vert-nuit);color:var(--blanc-galerie);border-color:var(--vert-nuit);}
.btn.plein:hover{background:transparent;color:var(--vert-nuit);}
.cabinet-fond .btn.plein{background:var(--ivoire);color:var(--vert-anglais);border-color:var(--ivoire);}
.cabinet-fond .btn.plein:hover{background:transparent;color:var(--ivoire);}
.btn .fl{display:inline-block;transition:transform .3s var(--ease);margin-left:.5em;}
.btn:hover .fl{transform:translateX(5px);}

/* ---------- Murs de logos ---------- */
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;align-items:stretch;}
@media(max-width:900px){.logos{grid-template-columns:repeat(3,1fr);}}
.logo-slot{min-height:78px;display:flex;align-items:center;justify-content:center;padding:.6rem;opacity:.82;transition:opacity .3s;}
.logo-slot img{max-height:44px;max-width:82%;object-fit:contain;}
.logo-slot:hover{opacity:1;}
/* Sur fonds sombres : l'encre charbon des logos passe en ivoire */
.dark .logo-slot img,.cabinet-fond .logo-slot img,.society-fond .logo-slot img{filter:invert(.92) hue-rotate(180deg) saturate(0);}

/* Bande défilante de preuve — marquee lent, coupé si reduced-motion */
.marquee{overflow:hidden;position:relative;padding:1.6rem 0;border-top:1px solid rgba(28,28,28,.1);border-bottom:1px solid rgba(28,28,28,.1);}
.dark .marquee,.cabinet-fond .marquee,.society-fond .marquee{border-color:rgba(235,237,234,.14);}
.marquee .rail{display:flex;gap:4.5rem;align-items:center;width:max-content;animation:defile 46s linear infinite;}
.marquee:hover .rail{animation-play-state:paused;}
.marquee .logo-slot{min-height:52px;flex-shrink:0;opacity:.72;}
.marquee .logo-slot img{max-height:34px;max-width:130px;}
@keyframes defile{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- Formulaires — éditorial, champs filet ---------- */
.formulaire{max-width:36em;}
.champ{margin-bottom:2rem;}
.champ label{display:block;font-family:var(--mg12);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brume);margin-bottom:.5rem;}
.champ input,.champ textarea,.champ select{
  width:100%;background:transparent;border:none;border-bottom:1px solid rgba(28,28,28,.3);
  font-family:var(--nudica);font-weight:300;font-size:1.05rem;color:inherit;padding:.55rem 0;
  border-radius:0;transition:border-color .3s;
}
.dark .champ input,.dark .champ textarea,.dark .champ select,
.cabinet-fond .champ input,.cabinet-fond .champ textarea,
.society-fond .champ input,.society-fond .champ textarea{border-bottom-color:rgba(235,237,234,.35);}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:none;border-bottom-color:var(--fluo);}
.champ textarea{min-height:120px;resize:vertical;}
.champ ::placeholder{color:var(--brume);opacity:.7;}
/* Capture inline (newsletter) : champ + bouton sur une ligne */
.capture{display:flex;gap:1rem;align-items:flex-end;max-width:34em;}
.capture .champ{flex:1;margin-bottom:0;}
@media(max-width:640px){.capture{flex-direction:column;align-items:stretch;}}
.note-rgpd{font-size:.78rem;color:var(--brume);max-width:34em;margin-top:1rem;line-height:1.6;}
.dark .note-rgpd,.cabinet-fond .note-rgpd,.society-fond .note-rgpd{color:rgba(235,237,234,.5);}
/* Compteur de caractères — 08/09. Le plafond dur est maxlength (il tient sans JS) ; ce compteur
   n'est qu'un repère visuel, donc révélé par JS seulement (hidden par défaut dans le HTML). */
.compteur{font-family:var(--mg12);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brume);text-align:right;margin-top:.4rem;}
.compteur.pleine{color:var(--fluo);}
.dark .compteur,.cabinet-fond .compteur,.society-fond .compteur{color:rgba(235,237,234,.5);}
/* Retour d'erreur d'envoi (?envoi=erreur) — révélé par JS ; sans JS la page revient simplement,
   comme avant. Le formulaire lui-même fonctionne sans JS (POST natif). */
.msg-erreur{font-size:.88rem;line-height:1.6;max-width:34em;margin-bottom:2rem;padding:.9rem 1.1rem;border-left:2px solid var(--fluo);background:rgba(28,28,28,.04);}
.dark .msg-erreur,.cabinet-fond .msg-erreur,.society-fond .msg-erreur{background:rgba(235,237,234,.07);}
.msg-erreur a{color:inherit;}

/* ---------- Schémas SVG — encre tonale, une coupe fluo, vivants (07/07 : « un schéma par page, mouvant ») ---------- */
.schema{width:100%;height:auto;display:block;}
.schema text{font-family:var(--mg12);letter-spacing:.14em;text-transform:uppercase;}
.schema .lbl{letter-spacing:.1em;}
/* Respiration lente des nœuds — chacun sur son propre tempo via animation-delay inline */
.schema .resp{animation:respire 7s ease-in-out infinite;transform-origin:center;transform-box:fill-box;}
@keyframes respire{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-6px) scale(1.03);}}
/* Tracé qui se dessine à l'entrée dans l'écran (pilote : .rv.vu du conteneur) */
html.js .rv .trace{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.4s var(--ease) .3s;}
html.js .rv.vu .trace{stroke-dashoffset:0;}
html.js .rv .trace.lent{transition-duration:3.2s;transition-delay:.6s;}
/* Balayage fluo (schéma entreprises) — la ligne révèle ce que personne ne regarde */
.scan-l{animation:balayage 11s linear infinite;}
@keyframes balayage{0%{transform:translateX(0);opacity:0;}4%{opacity:1;}82%{opacity:1;transform:translateX(820px);}86%,100%{opacity:0;transform:translateX(820px);}}
/* Points concernés : fluo par défaut (état statique sans JS ni animation) ; sous JS, l'animation les
   éteint puis les allume brièvement au passage de la ligne — chaque point porte un animation-delay inline
   négatif calé sur sa position horizontale. */
.pt-c{fill:var(--fluo);}
html.js .pt-c{animation:eclaire 11s linear infinite;}
@keyframes eclaire{0%{fill:#B9BDB8;}2%{fill:var(--fluo);}11%{fill:var(--fluo);}22%{fill:#B9BDB8;}100%{fill:#B9BDB8;}}
/* Graphe vivant — le SVG statique du markup est animé par at.js (dérive + survol) */
svg.vif .gn{cursor:default;}
svg.vif .gn circle{transition:fill .3s,stroke .3s;}
svg.vif .gn.act circle{fill:var(--fluo);stroke:#1C1C1C;}
svg.vif .gn.act .n-lbl{fill:#1C1C1C;font-weight:500;}
svg.vif .gl{transition:stroke .3s,stroke-width .3s,opacity .3s;}
svg.vif .gl.act{stroke:#9FB325;stroke-width:1.4;opacity:1;}
.n-lbl{font-family:var(--mg12);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;fill:#1C1C1C;}
.n-lbl.morte{fill:#9A9A9A;}

/* ---------- Listes éditoriales (pôles, étapes, angles) ---------- */
.liste-ed{list-style:none;border-top:1px solid rgba(28,28,28,.16);}
.dark .liste-ed,.cabinet-fond .liste-ed,.society-fond .liste-ed{border-top-color:rgba(235,237,234,.2);}
.liste-ed li{
  display:grid;grid-template-columns:5.5rem 1fr;gap:2rem;align-items:baseline;
  padding:1.9rem 0;border-bottom:1px solid rgba(28,28,28,.16);
}
.dark .liste-ed li,.cabinet-fond .liste-ed li,.society-fond .liste-ed li{border-bottom-color:rgba(235,237,234,.2);}
.liste-ed .num{padding-top:.3rem;}
.liste-ed h3{margin-bottom:.5rem;}
.liste-ed p{max-width:38em;font-size:.98rem;}
@media(max-width:640px){.liste-ed li{grid-template-columns:1fr;gap:.6rem;}}

/* Étapes du parcours (page Ashley Taïeb) — frise verticale */
.etapes{list-style:none;position:relative;padding-left:2.6rem;}
.etapes::before{content:'';position:absolute;left:.45rem;top:.6rem;bottom:.6rem;width:1px;background:rgba(28,28,28,.22);}
.dark .etapes::before{background:rgba(235,237,234,.25);}
.etapes li{position:relative;padding-bottom:3.2rem;}
.etapes li:last-child{padding-bottom:0;}
.etapes li::before{content:'';position:absolute;left:-2.6rem;top:.55rem;width:9px;height:9px;border-radius:50%;background:currentColor;margin-left:.06rem;}
.etapes li.lueur::before{background:var(--fluo);}
.etapes .quand{font-family:var(--mg12);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brume);display:block;margin-bottom:.5rem;}
.etapes h3{font-family:var(--argesta);font-weight:400;font-style:italic;font-size:1.7rem;margin-bottom:.7rem;}
.etapes p{max-width:36em;}

/* Modules cliquables scène/médias */
.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
@media(max-width:900px){.modules{grid-template-columns:1fr;}}
.module{display:block;text-decoration:none;color:inherit;border:1px solid rgba(28,28,28,.14);background:var(--blanc-galerie);transition:transform .35s var(--ease),box-shadow .35s var(--ease);}
.module:hover{transform:translateY(-6px);box-shadow:0 24px 60px -30px rgba(14,26,23,.4);}
.module .vignette{aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#DDE0DC;position:relative;}
.module .corps{padding:1.6rem 1.7rem 1.8rem;}
.module .corps .kicker{margin-bottom:.6rem;display:block;}
.module h3{font-size:1.08rem;line-height:1.4;}
.module .lien-ind{font-family:var(--mg12);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brume);display:inline-block;margin-top:1rem;}
.module:hover .lien-ind{color:var(--charbon);}

/* ---------- Bandes citation ---------- */
.bande-citation{text-align:center;}
.bande-citation .citation{max-width:26em;margin:0 auto;}
.bande-citation .qui{margin-top:2.2rem;}

/* ---------- Révélation au scroll — visible par défaut ---------- */
html.js .rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
html.js .rv.vu{opacity:1;transform:none;}
.rv.d1{transition-delay:.1s;}.rv.d2{transition-delay:.2s;}.rv.d3{transition-delay:.3s;}
@media print{html.js .rv{opacity:1!important;transform:none!important;}}

/* ---------- Mouvement réduit : tout se calme ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  html.js .rv{opacity:1!important;transform:none!important;transition:none!important;}
  html.js .ligne-h>span{transform:none!important;transition:none!important;}
  html.js .trait-v{animation:none!important;}
  html.js .hero .ph.abs{transform:none!important;transition:none!important;}
  .marquee .rail{animation:none;flex-wrap:wrap;width:auto;}
  .schema .resp{animation:none!important;}
  .scan-l{animation:none!important;opacity:0;}
  html.js .pt-c{animation:none!important;}
  html.js .rv .trace{stroke-dashoffset:0!important;transition:none!important;}
  html.js .rv.chapitre::before{transform:none!important;transition:none!important;}
  html.js .rv .mf{background-size:100% .16em!important;transition:none!important;}
}

/* ---------- Footer — territorial, wordmark en signature ---------- */
footer{background:var(--vert-nuit);color:var(--ivoire);padding:5.5rem 4vw 3rem;}
footer.footer-cabinet{background:var(--vert-anglais);}
footer.footer-society{background:var(--indigo);}
footer .grille{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;}
@media(max-width:900px){footer .grille{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){footer .grille{grid-template-columns:1fr;}}
footer .wm-pied{font-size:clamp(2.1rem,4vw,3.2rem);}
footer .wm-pied .pf{text-shadow:0 0 18px rgba(234,255,63,.35);}
footer a{color:var(--ivoire);text-decoration:none;opacity:.72;transition:opacity .2s,border-color .2s;border-bottom:1px solid transparent;padding-bottom:1px;}
footer a:hover{opacity:1;border-bottom-color:var(--fluo);}
footer ul{list-style:none;}
footer li{margin-bottom:.6rem;font-size:.9rem;}
footer .colophon{max-width:var(--max);margin:4rem auto 0;padding-top:2rem;border-top:1px solid rgba(235,237,234,.15);position:relative;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;}
/* Signature fluo du footer — même geste que les en-têtes de chapitre (07/07 : « en bas, pas de fluo ») */
footer .colophon::before{content:'';position:absolute;top:-1px;left:0;width:3.4rem;height:1.5px;background:var(--fluo);}
footer .colophon,footer .colophon *{font-family:var(--mg12);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--ivoire) 55%,transparent);}
footer .colophon a{opacity:1;}

/* ---------- Embed Calendly ---------- */
.calendly-inline-widget{min-width:320px;height:760px;border:1px solid rgba(28,28,28,.14);}

/* ---------- Accessibilité ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--fluo);outline-offset:3px;
}
.saut-contenu{position:absolute;left:-9999px;top:0;background:var(--vert-nuit);color:var(--fluo);padding:.8rem 1.4rem;z-index:100;font-family:var(--mg12);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;}
.saut-contenu:focus{left:0;}

/* ---------- Discipline mobile ---------- */
@media(max-width:640px){
  .kicker{letter-spacing:.16em;font-size:.68rem;}
  .legende{letter-spacing:.1em;}
  nav.site ul a{letter-spacing:.1em;}
  .hero{min-height:88vh;}
  .hero .contenu{padding-bottom:3.5rem;padding-top:7rem;}
  .num{letter-spacing:.14em;}
  section{padding-left:6vw;padding-right:6vw;}
  /* Schémas : sur petit écran, ils gardent leur taille lisible et défilent horizontalement */
  div:has(> .schema){overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .schema{min-width:640px;}
}

/* ---------- Marque fluo — souligné scalpel sous un mot-clé (un par écran maximum) ---------- */
.mf{background-image:linear-gradient(0deg,var(--fluo),var(--fluo));background-repeat:no-repeat;
  background-size:100% .14em;background-position:0 92%;padding:0 .04em;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
html.js .rv .mf{background-size:0% .14em;transition:background-size 1.3s var(--ease) .45s;}
html.js .rv.vu .mf{background-size:100% .14em;}

/* ---------- Les formes d'accompagnement (page Cabinet, section 05) ----------
   Même grammaire que .portes de l'accueil — grille de trois, filet d'accent en haut,
   carte tonale — mais sur fond sombre, et le carré DÉPLIE au lieu de mener ailleurs.
   Ashley 08/09 : « des carrés cliquables ou survolables qui déplient le détail, comme ça
   on ne surcharge pas la page mais on a quand même toutes les infos ».
   Ouverture au CLIC (élément <details>) et jamais au survol : un dépli qui se referme
   quand la souris part est inutilisable au scroll — sa règle sur les visuels interactifs
   (graphe Tectoniques, 08/07). Ce qui est ouvert reste ouvert. */
.formes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:start;}
@media(max-width:900px){.formes{grid-template-columns:1fr;}}
.forme{
  background:rgba(14,26,23,.32);border:1px solid rgba(235,237,234,.22);border-top:3px solid var(--fluo);
  padding:2.4rem 2rem 2rem;position:relative;transition:background .35s var(--ease),border-color .35s var(--ease);
}
.forme:hover{background:rgba(14,26,23,.5);border-color:rgba(235,237,234,.38);}
.forme h3{font-size:1.5rem;margin:.9rem 0 1rem;line-height:1.15;}
.forme .amorce{font-weight:300;font-size:.96rem;color:rgba(235,237,234,.85);margin-bottom:1.6rem;}
.forme .paliers{list-style:none;margin:0 0 1.4rem;padding:0;border-top:1px solid rgba(235,237,234,.16);}
.forme .paliers li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.72rem 0;border-bottom:1px solid rgba(235,237,234,.12);}
.forme .paliers .quoi{font-size:.94rem;font-weight:300;}
.forme .paliers .quoi small{display:block;font-family:var(--mg12);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(235,237,234,.5);margin-top:.3rem;}
.forme .paliers .montant{font-family:var(--safiro);font-weight:600;font-size:1.06rem;white-space:nowrap;}
.forme .sans-prix{font-family:var(--safiro);font-size:1.04rem;color:rgba(235,237,234,.85);
  padding:.9rem 0 1.3rem;border-top:1px solid rgba(235,237,234,.16);}
.forme details{border-top:1px solid rgba(235,237,234,.16);padding-top:.9rem;}
.forme summary{cursor:pointer;list-style:none;font-family:var(--mg12);font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fluo);display:flex;align-items:center;gap:.6rem;}
.forme summary::-webkit-details-marker{display:none;}
.forme summary::after{content:'+';font-family:var(--safiro);font-size:1.15rem;letter-spacing:0;
  margin-left:auto;transition:transform .3s var(--ease);}
.forme details[open] summary::after{transform:rotate(45deg);}
.forme details .dedans{padding-top:1.2rem;font-size:.92rem;font-weight:300;color:rgba(235,237,234,.85);}
.forme details .dedans p{margin-bottom:.9rem;}
.forme details .dedans p:last-child{margin-bottom:0;}
.forme details .dedans strong{font-weight:500;color:var(--ivoire);}

/* Les situations particulières — en lignes sous les trois carrés (Ashley 08/09) */
.lignes-part{margin-top:3.5rem;border-top:1px solid rgba(235,237,234,.22);}
.lignes-part .ligne{display:grid;grid-template-columns:1fr 2fr;gap:2rem;padding:1.7rem 0;
  border-bottom:1px solid rgba(235,237,234,.12);align-items:start;}
@media(max-width:760px){.lignes-part .ligne{grid-template-columns:1fr;gap:.6rem;}}
.lignes-part .ligne h4{font-family:var(--safiro);font-weight:500;font-size:1.12rem;}
.lignes-part .ligne p{font-size:.94rem;font-weight:300;color:rgba(235,237,234,.85);}

/* ---------- Utilitaires ---------- */
.centre{text-align:center;}
.mt-0{margin-top:0;}.mt-1{margin-top:1rem;}.mt-2{margin-top:2rem;}.mt-3{margin-top:3rem;}
.mb-1{margin-bottom:1rem;}.mb-2{margin-bottom:2rem;}.mb-3{margin-bottom:3rem;}
.txt-ivoire-70{color:rgba(235,237,234,.7);}
.txt-ivoire-85{color:rgba(235,237,234,.85);}
.max-38{max-width:38em;}
.max-34{max-width:34em;}

/* ---------- Voix reçues — témoignages (05/10, réversible : bloc supprimable d'un tenant) ----------
   Une voix se pose sous la phrase de la page qu'elle vérifie : jamais un bloc autonome sous un titre.
   Pas d'étoiles, pas de notes, pas de portraits. Fidélité au mot contrôlée hors site.
   La voix est un moment de la page, pas une note : citation en grand, entre guillemets, un paragraphe par idée,
   trait de marge neutre (pas de fluo : le trait de marge fluo est « à la carte, jamais par défaut », atlas V5).
   Guillemets : fluo sur fond sombre pour Ashley et addiction society ; IVOIRE pour le Cabinet (atlas fluo V5,
   arbitrage B) ; charbon sur fond clair. Légende en teinte du charbon : ≥ 4,5:1. */
.voix{position:relative;margin:4.5rem 0;max-width:34em;padding:.2rem 0 .2rem 2rem;}
.voix::before{content:'';position:absolute;left:0;top:.35rem;bottom:.35rem;width:1px;background:rgba(28,28,28,.28);}
.voix blockquote{margin:0;font-family:var(--argesta);font-style:italic;font-size:clamp(1.16rem,1.55vw,1.3rem);line-height:1.45;color:var(--charbon);text-wrap:pretty;}
.voix blockquote p{margin:0 0 .75em;font-size:inherit;line-height:inherit;color:inherit;max-width:none;}   /* rien n'hérite des règles de la section (ex. .liste-ed p) */
.voix blockquote p:last-child{margin-bottom:0;}
.voix .gf{color:var(--charbon);}
.voix figcaption{margin-top:1.6rem;font-family:var(--mg12);font-size:.7rem;line-height:1.6;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--charbon) 74%,#FFFFFF);}
.voix figcaption::before{content:'';display:inline-block;width:1.6rem;height:1px;background:currentColor;vertical-align:middle;margin-right:.75rem;}
.voix figcaption:first-child{margin:0 0 1.4rem;}
.voix .quand{margin:0 0 .45em;font-family:var(--mg12);font-style:normal;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--charbon) 74%,#FFFFFF);}
.voix blockquote p+.quand{margin-top:1.8em;}
.dark .voix::before,.cabinet-fond .voix::before,.society-fond .voix::before{background:rgba(235,237,234,.3);}
.dark .voix blockquote,.cabinet-fond .voix blockquote,.society-fond .voix blockquote{color:var(--ivoire);}
.dark .voix .gf,.society-fond .voix .gf{color:var(--fluo);}
.cabinet-fond .voix .gf{color:var(--ivoire);}
.dark .voix figcaption,.cabinet-fond .voix figcaption,.society-fond .voix figcaption,
.dark .voix .quand,.cabinet-fond .voix .quand,.society-fond .voix .quand{color:rgba(235,237,234,.74);}
.liste-ed .voix{margin:2.4rem 0 .6rem;}
/* Trois voix côte à côte — page Histoire seulement, adossées au livre. La figure est l'enfant direct de la grille
   (la classe d'apparition .rv est posée sur elle) : les cartes s'étirent, les légendes s'alignent en pied. */
.voix-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem;align-items:stretch;margin-top:2rem;}
.voix-trio .voix{margin:0;max-width:none;display:flex;flex-direction:column;}
.voix-trio .voix blockquote{flex:1;font-size:clamp(1.06rem,1.3vw,1.16rem);}
.voix-trio .voix figcaption{min-height:3.2em;}   /* deux lignes réservées : les légendes démarrent à la même hauteur */
@media(max-width:1100px){.voix-trio{grid-template-columns:1fr;gap:3.2rem;max-width:34em;}.voix-trio .voix figcaption{min-height:0;}.voix-trio .voix blockquote{font-size:clamp(1.12rem,2vw,1.28rem);}}   /* sous 1100 px, trois colonnes deviennent trop étroites : une voix par ligne */
@media(max-width:900px){.voix{padding-left:1.4rem;}}