@charset "UTF-8";
/* =====================================================================
   Azziz Akroum Conseil — feuille de style du site public
   Papier crème, gravure à l'encre, typographie garaldique.
   ===================================================================== */

/* ------------------------------------------------------------ polices
   Cormorant Garamond est une fonte VARIABLE, axe wght 300 → 700, dont
   l'instance par défaut est le Light 300.

   Elle était déclarée trois fois sous des poids fixes (400, 500, 600) en
   pointant à chaque fois vers le MÊME binaire — md5 identique. Le navigateur
   servait donc l'instance par défaut dans les trois cas : les 44 déclarations
   font-weight:500 et les 14 en 600 rendaient toutes en Light. L'escalier
   typographique du site n'existait pas.

   Une seule déclaration par plage unicode, avec la plage de poids réelle :
   le navigateur interpole désormais de vraies graisses le long de l'axe.
   Même procédé que pour Inter, déjà correctement déclarée plus bas.

   L'italique reste une fonte statique en 400 ; on lui déclare tout de même la
   plage, faute de quoi un italique en 500 ou 600 basculerait sur le romain
   avec une inclinaison synthétique.
   -------------------------------------------------------------------- */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/cormorant-garamond-var-latin.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/cormorant-garamond-var-latin-ext.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;
  src:url(../fonts/cormorant-garamond-400-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;
  src:url(../fonts/cormorant-garamond-400-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/inter-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/inter-var-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ------------------------------------------------------------- jetons */
:root{
  /* papier — échelle recalculée sur la luminance relative.
     L'ancienne écartait paper de paper-tint de 1,03 seulement : l'alternance
     des sections était invisible, la page défilait comme un aplat unique.
     Chaque palier est désormais séparé d'au moins 1,06, et le papier se
     réchauffe à mesure qu'il fonce (R−B passe de 22 à 35), comme un papier
     qui vieillit — les teintes restent obtenues en mélangeant --paper vers
     --rule-strong, donc on ne sort jamais de la famille crème. */
  --paper-card:   #fefbf2;   /* L .965 — cartes posées sur le papier */
  --paper:        #fdf7e7;   /* L .932 — fond de référence */
  --paper-tint:   #f4ebd7;   /* L .836 — sections alternées, fil d'Ariane */
  --paper-warm:   #eee4ce;   /* L .781 — bandes chaudes */
  --paper-deep:   #e9dec6;   /* L .736 — départ des dégradés de bandeau */

  /* encre */
  --ink:          #16130d;
  --ink-2:        #2f2a21;
  --ink-3:        #57503f;
  --ink-muted:    #675e4d;   /* remonté : #7b7261 tombait à 4,44:1 sur le papier
                                de base, donc sous le seuil AA, avant même le
                                changement d'échelle. Désormais 5,98:1 sur
                                --paper et 4,79:1 sur le papier le plus foncé. */

  /* filets & or */
  --rule:         #d8c69d;
  --rule-soft:    #e9dcbe;
  --rule-strong:  #b9a273;
  --gold:         #9e8347;
  --gold-deep:    #7a6335;

  /* mesures */
  --wrap:         1180px;
  --wrap-narrow:  760px;
  --h-entete:     5rem;      /* hauteur de l'en-tête : le bandeau remonte dessous */
  --gut:          clamp(1.25rem, 4vw, 3rem);
  --sec:          clamp(4.5rem, 9vw, 8rem);
  --radius:       3px;
  --radius-lg:    5px;

  /* typo */
  --f-display: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --f-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --track-wide: .16em;
  --track-xwide: .28em;

  --shadow-sm: 0 1px 2px rgba(60,48,24,.05);
  --shadow:    0 2px 10px -4px rgba(60,48,24,.14), 0 1px 2px rgba(60,48,24,.05);
  --shadow-lg: 0 18px 44px -22px rgba(60,48,24,.34), 0 2px 6px rgba(60,48,24,.06);

  /* ------------------------------------------------ jetons de mouvement
     Une grammaire unique pour tout le site, en trois canaux physiquement
     séparés — `translate`, `transform` et `scale` sont des propriétés CSS
     indépendantes qui se composent sans jamais s'écraser :
       translate  -> entrée d'un bloc, parallaxe
       transform  -> interaction (survol, actif)
       scale      -> matière (image, médaillon)
     On n'écrit JAMAIS transform pour une entrée, ni translate pour un survol. */

  /* durées */
  --d-0: 90ms;    /* couleur pure, focus, :active */
  --d-1: 160ms;   /* icône, chevron, SORTIE de survol */
  --d-2: 260ms;   /* survol : filet, fond, bordure */
  --d-3: 420ms;   /* relief : carte, médaillon, balayage de bouton */
  --d-4: 700ms;   /* entrée d'un bloc */
  --d-5: 1100ms;  /* matière : image, compteur, trait à la plume */
  --d-presse: 1450ms; /* passage sous presse — une fois par page */

  /* courbes */
  --e-out: cubic-bezier(.16,.84,.44,1);   /* entrée : décélération franche */
  --e-in:  cubic-bezier(.55,.06,.9,.34);  /* sortie */
  --e-io:  cubic-bezier(.62,.02,.34,1);   /* bascule d'état */
  --e-ink: cubic-bezier(.32,.94,.36,1);   /* « l'encre qui prend » */
  --ease:  var(--e-out);                  /* ALIAS : 36 déclarations en dépendent */

  /* distances & échelles — une valeur par intention, pas six approximations */
  --m-1: 3px;     /* réaction d'icône */
  --m-2: 6px;     /* lift de carte */
  --m-3: 22px;    /* entrée de bloc */
  --s-1: 1.035;   /* scale image au survol */
  --s-2: 1.06;    /* scale médaillon */
  --stagger: 70ms;/* pas de cascade, plafonné à 4 crans */

  /* profondeurs de parallaxe */
  --p-fond:    .028;
  --p-gravure: .095;
  --p-orn:     .17;

  /* matière du papier, réutilisable en couche de fond */
  --grain-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}

/* Progression du défilement (--road) et traversée locale d'un plan (--p).
   Déclarées en @property pour retomber proprement à leur valeur de repos si
   le JS ne tourne pas, et pour être interpolables. */
@property --p    { syntax:"<number>"; inherits:true; initial-value:.5 }
@property --road { syntax:"<number>"; inherits:true; initial-value:0 }

/* -------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--f-sans);
  font-size:1rem;
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,p,figure,blockquote,ul,ol,dl{margin:0}
ul,ol{padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--rule-soft);margin:2rem 0}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
::selection{background:rgba(158,131,71,.22);color:var(--ink)}

.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{position:absolute;left:1rem;top:-4rem;z-index:200;background:var(--ink);color:var(--paper);
  padding:.7rem 1.2rem;border-radius:var(--radius);font-size:.85rem;letter-spacing:.04em;transition:top .2s var(--ease)}
.skip-link:focus{top:1rem}


/* ------------------------------------------------- matière du papier
   Le grain était un voile plein écran en position:fixed + mix-blend-mode,
   posé en z-index:0 SOUS `body > *{z-index:1}` : la texture n'existait donc
   que dans le vide entre les blocs, chaque surface opaque la recouvrait —
   l'exact inverse de l'intention. Et c'était le poste de compositing le plus
   cher de la page, refusionné à chaque image du défilement.

   Il est désormais composé DANS le fond de chaque surface, en
   background-blend-mode, qui reste interne à l'élément. Double gain : les
   cartes et les bandes deviennent réellement du papier, et la passe de
   compositing plein écran disparaît.

   Le détail est regroupé en fin de fichier, sous « matière du papier —
   composition » : il doit passer APRÈS les règles de surface qui emploient
   la forme courte `background:`, laquelle remettrait sinon l'image à none. */
body > *{position:relative;z-index:1}

/* ================================================= gravures en fond
   Remplace .watermark, qui posait une gravure à 5,5 % d'opacité avec un
   grayscale(1) : sur des traits déjà noirs, le grayscale ne faisait que les
   refroidir sur un papier chaud, et 5,5 % donne au mieux treize niveaux de
   variation — un dispositif entièrement câblé, et visuellement inexistant.

   Ici la gravure est ÉNORME (52 rem au minimum), coupée par au moins un bord
   de section, et elle dérive plus lentement que la page. Elle cesse d'être
   une vignette pour devenir la matière du fond.

   Les URL sont écrites en dur et sélectionnées par classe : la politique de
   sécurité interdit l'attribut style, donc toute variable posée en ligne.
   ------------------------------------------------------------------- */
.ink-bg{position:relative;isolation:isolate;overflow:clip}
.ink-bg::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-12% -6%;
  background-image:var(--gravure);
  background-repeat:no-repeat;
  background-position:var(--gravure-pos,right -6% center);
  background-size:var(--gravure-size,min(54rem,70%)) auto;
  opacity:var(--gravure-alpha,.14);
  mix-blend-mode:multiply;
  filter:sepia(.42) saturate(.7);
  translate:0 calc((var(--p,.5) - .5) * var(--p-fond) * 100vh);
}
.ink-bg--boussole{--gravure:url(../img/ill-boussole-livre.webp)}
.ink-bg--livre   {--gravure:url(../img/ill-livre-chemin.webp);--gravure-pos:left -8% center}
.ink-bg--panorama{--gravure:url(../img/ill-panorama.webp);
                  --gravure-size:min(92rem,132%);--gravure-pos:center bottom -8%}
.ink-bg--aaf     {--gravure:url(../img/logo-aaf.webp);
                  --gravure-size:min(26rem,38%);--gravure-pos:left -4% center}
/* Seconde gravure : le bandeau de clôture s'adresse aux DEUX structures. */
.ink-bg--paire::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;inset:-12% -6%;
  background:url(../img/logo-aae.webp) no-repeat right -4% center/min(26rem,38%) auto;
  opacity:var(--gravure-alpha,.14);mix-blend-mode:multiply;filter:sepia(.42) saturate(.7);
}
.ink-bg--discret{--gravure-alpha:.085}
@media (max-width:760px){.ink-bg::before,.ink-bg--paire::after{--gravure-alpha:.075}}


/* ================================================ plaque d'encre — retirée
   .section--plaque posait un aplat --ink sur trois sections : la démarche de
   /aaf, les formats de /aae et la citation de /a-propos. Le dispositif est
   supprimé, pour la raison déjà constatée sur l'accueil (voir « la section du
   relevé ») : le lecteur passait du papier crème à un aplat 17:1 puis revenait
   au crème, et le site n'a qu'une matière — le papier.

   Deux défauts propres à la plaque s'éteignent avec elle :
     - la gravure devait s'inverser pour survivre au noir (invert(1) en screen),
       ce qui posait un nuage blanc de 54 rem SOUS le texte ; sur /aaf il tombait
       exactement dans la colonne « Échanger », devenue illisible ;
     - toute surface claire amenée dans la section devait être neutralisée une
       à une, liste défensive que le moindre bloc nouveau prenait en défaut.

   Les trois sections emploient désormais .section--releve, déjà en place sur
   l'accueil : la page ne change pas de matière, elle s'assombrit d'un ton.
   ------------------------------------------------------------------- */

/* filet ornemental entre deux sections */
.rule-orn{display:flex;justify-content:center;padding-block:clamp(2rem,4vw,3rem)}
.rule-orn img{width:min(13rem,42vw);height:auto;opacity:.55}

/* ---------------------------------------------------------- structure */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
/* Neuf sections d'exactement la même hauteur, de 28 à 329 mots : c'était une
   brochure, pas un document. Deux respirations, et une couture resserrée
   lorsque deux fonds identiques se suivent. */
.section--air{padding-block:calc(var(--sec) * 1.45)}
.section--serre{padding-block:calc(var(--sec) * .6)}
.section + .section{padding-top:calc(var(--sec) * .58)}
.section + .section--paper,.section--paper + .section,
.section + .section--releve,.section--releve + .section{padding-top:var(--sec)}
.section--paper{background:var(--paper-tint)}
.section--warm{background:linear-gradient(180deg,var(--paper-warm),var(--paper-tint))}

.rule-top{border-top:1px solid var(--rule-soft)}
.rule-bottom{border-bottom:1px solid var(--rule-soft)}

/* ------------------------------------------------------------ titrage */
.display{
  font-family:var(--f-display);
  font-weight:400;
  line-height:1.02;
  letter-spacing:.005em;
  color:var(--ink);
  text-wrap:balance;
}
h1.display{font-size:clamp(2.6rem,6.4vw,5rem)}
h2.display{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.06}
h3.display{font-size:clamp(1.45rem,2.6vw,2.05rem);line-height:1.14}
h4.display{font-size:clamp(1.2rem,1.9vw,1.45rem);line-height:1.2}

.eyebrow{
  font-family:var(--f-sans);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:var(--track-xwide);
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 1.1rem;
  display:flex;align-items:center;gap:.75rem;
}
.eyebrow::after{content:"";flex:0 0 2.6rem;height:1px;background:var(--rule-strong)}
.eyebrow--center{justify-content:center}
.eyebrow--center::before{content:"";flex:0 0 2.6rem;height:1px;background:var(--rule-strong)}

.lead{
  font-size:clamp(1.06rem,1.5vw,1.22rem);
  line-height:1.62;
  color:var(--ink-3);
  max-width:64ch;
  text-wrap:pretty;
}
.muted{color:var(--ink-muted)}
.sc{font-variant:small-caps;letter-spacing:.06em}

.section-head{max-width:56rem;margin-bottom:clamp(2.5rem,5vw,3.75rem)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .lead{margin-inline:auto}
.section-head p.lead{margin-top:1.1rem}

/* ---------------------------------------------------------- ornements */
.fleuron{display:flex;align-items:center;justify-content:center;gap:1rem;color:var(--rule-strong);margin-block:clamp(2.5rem,5vw,3.5rem)}
.fleuron::before,.fleuron::after{content:"";height:1px;width:min(9rem,22vw);background:linear-gradient(90deg,transparent,var(--rule))}
.fleuron::after{background:linear-gradient(270deg,transparent,var(--rule))}
.fleuron svg{width:1.15rem;height:1.15rem;flex:none;opacity:.85}

.orn-corner{position:absolute;width:clamp(110px,15vw,220px);opacity:.5;pointer-events:none;user-select:none;z-index:0}
.orn-corner--tl{top:0;left:0}
.orn-corner--tr{top:0;right:0}
.orn-corner--bl{bottom:0;left:0}
.orn-corner--br{bottom:0;right:0}

/* ------------------------------------------------------------ liens */
.link-underline{
  position:relative;color:var(--ink);
  background-image:linear-gradient(var(--rule-strong),var(--rule-strong));
  background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;
  padding-bottom:1px;transition:background-size .3s var(--ease),color .2s var(--ease);
}
.link-underline:hover{color:var(--gold-deep);background-size:100% 2px}

/* ------------------------------------------------------------ boutons */
.btn{
  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:.95rem 1.9rem;
  font-family:var(--f-sans);font-size:.76rem;font-weight:500;
  letter-spacing:var(--track-wide);text-transform:uppercase;
  color:var(--btn-fg);background:var(--btn-bg);
  border:1px solid var(--btn-bd);border-radius:var(--radius);
  cursor:pointer;position:relative;overflow:hidden;
  transition:color .3s var(--ease),border-color .3s var(--ease),transform .2s var(--ease),box-shadow .3s var(--ease);
  text-align:center;
}
/* isolation:isolate — UNE LIGNE QUI CORRIGE TROIS BOGUES.
   Sans elle, `.btn::before{z-index:-1}` ne reste pas dans le bouton :
   position:relative sans z-index ne crée pas de contexte d'empilement, le
   pseudo remonte donc jusqu'au contexte ancêtre et se peint AVANT les fonds
   de section. Conséquences observables :
     1. le balayage doré n'apparaissait jamais sur .btn--solid ;
     2. il était masqué par le fond dans .section--paper et .section--warm ;
     3. et comme .btn:hover passe le libellé en --paper, LE TEXTE DU BOUTON
        DISPARAISSAIT au survol sur ces sections (crème sur crème). */
.btn{isolation:isolate}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:scaleX(0);z-index:-1;
  /* L'encre entre par la gauche et se retire par la droite, dans le sens de
     lecture. La sortie est plus rapide que l'entrée : c'est cette asymétrie
     qui donne la fermeté du geste. */
  transform-origin:right;
  transition:transform var(--d-1) var(--e-in);
}
.btn > *{position:relative;z-index:1}
.btn:hover{color:var(--paper);box-shadow:var(--shadow)}
.btn:hover::before,.btn:focus-visible::before{
  transform-origin:left;transform:scaleX(1);
  transition:transform var(--d-3) var(--e-ink);
}
.btn:active{transform:translateY(1px);transition-duration:var(--d-0)}
.btn svg{width:1em;height:1em;flex:none;transition:transform var(--d-1) var(--e-out)}
.btn:hover svg,.btn:focus-visible svg{transform:translateX(var(--m-1))}

.btn--solid{--btn-bg:var(--ink);--btn-fg:var(--paper);--btn-bd:var(--ink)}
.btn--solid::before{background:var(--gold-deep)}
.btn--solid:hover{color:#fff;border-color:var(--gold-deep)}
.btn--ghost{--btn-bd:var(--rule-strong);--btn-fg:var(--ink-2)}
.btn--sm{padding:.68rem 1.3rem;font-size:.7rem}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}

/* ------------------------------------------------------------- entête
   Au repos, l'en-tête ne peint plus RIEN : le fond du bandeau court d'un
   bord à l'autre dès le premier pixel. La barre plus claire qui traversait
   l'écran à y=80 px — color-mix(--paper 88%) posé sur --paper-deep — a
   disparu. Le basculement au défilement était déjà câblé (sentinelle dans
   site.js), on ne fait que déplacer la peinture sous .is-stuck.

   Le backdrop-filter était permanent, donc payé même en haut de page où il
   n'a rien à flouter : c'était, avec le voile de grain, l'un des deux
   postes qui saccadaient le défilement. saturate() est supprimé — effet nul
   sur une palette papier — et le flou ramené de 12 à 8 px. */
.site-header{
  position:sticky;top:0;z-index:100;
  background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid transparent;box-shadow:none;
  transition:border-color var(--d-3) var(--e-io),background var(--d-3) var(--e-io),
             box-shadow var(--d-3) var(--e-io);
}
.site-header.is-stuck{
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom-color:var(--rule-soft);
  box-shadow:0 1px 16px -8px rgba(60,48,24,.3);
}

/* La marque se resserre au lieu de rester figée. Transform et opacité
   uniquement : aucune propriété de mise en page, donc aucun reflow. */
.brand__name{transform-origin:left;transition:transform var(--d-3) var(--e-io)}
.brand__sub{transition:opacity var(--d-2) var(--e-io),transform var(--d-3) var(--e-io)}
.site-header.is-stuck .brand__name{transform:scale(.93)}
.site-header.is-stuck .brand__sub{opacity:0;transform:translateY(-.25rem)}

/* Filet de progression : la seule pièce du système entièrement portée par le
   compositeur, et la seule disponible à toutes les largeurs, mobile compris.
   --road est écrit par le chef d'orchestre du défilement (site.js) ; sans JS
   il reste à sa valeur initiale 0 et le filet ne s'affiche simplement pas. */
.site-header::after{
  content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  transform-origin:left;scale:var(--road,0) 1;
  opacity:0;transition:opacity var(--d-2) var(--e-out);pointer-events:none;
}
.site-header.is-stuck::after{opacity:.9}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:5rem}

.brand{display:flex;align-items:center;gap:.9rem;flex:none}
.brand__text{display:flex;flex-direction:column;line-height:1}
.brand__name{
  font-family:var(--f-display);font-size:1.32rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);white-space:nowrap;
}
.brand__sub{
  font-size:.62rem;font-weight:500;letter-spacing:var(--track-xwide);
  text-transform:uppercase;color:var(--gold-deep);margin-top:.28rem;
}

.nav{display:flex;align-items:center;gap:.35rem}
.nav__link{
  position:relative;padding:.55rem .85rem;
  font-size:.72rem;font-weight:500;letter-spacing:var(--track-wide);
  text-transform:uppercase;color:var(--ink-3);
  transition:color .25s var(--ease);white-space:nowrap;
}
.nav__link::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.15rem;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:center;
  transition:transform .3s var(--ease);
}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::after,.nav__link[aria-current]::after{transform:scaleX(1)}
.nav__link[aria-current]{color:var(--ink)}
.nav__cta{margin-left:.85rem}

.nav-toggle{
  display:none;width:2.75rem;height:2.75rem;align-items:center;justify-content:center;
  background:none;border:1px solid var(--rule);border-radius:var(--radius);cursor:pointer;flex:none;
}
.nav-toggle svg{width:1.15rem;height:1.15rem;color:var(--ink)}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-menu{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}

@media (max-width:1040px){
  .nav-toggle{display:flex}
  .nav{
    position:fixed;inset:5rem 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    padding:1rem var(--gut) 2rem;box-shadow:var(--shadow-lg);
    opacity:0;visibility:hidden;transform:translateY(-.75rem);
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
    max-height:calc(100vh - 5rem);max-height:calc(100dvh - 5rem);overflow-y:auto;
  }
  .nav.is-open{opacity:1;visibility:visible;transform:none}
  .nav__link{padding:.95rem .25rem;font-size:.8rem;border-bottom:1px solid var(--rule-soft)}
  .nav__link::after{display:none}
  .nav__link[aria-current]{color:var(--gold-deep)}
  .nav__cta{margin:1.25rem 0 0}
  .nav__cta .btn{width:100%}
}

/* =====================================================================
   BANDEAU — la gravure est mise sous presse

   ATTENTION EMPILEMENT, À NE PAS CASSER.
   L'encrage de la gravure repose sur mix-blend-mode:multiply, qui n'a
   d'effet que si aucun contexte d'empilement ne s'interpose entre l'image
   et le fond qu'elle doit traverser.

     .hero        isolation:isolate  -> la fusion reste interne au bandeau
     .orn-corner  z-index:-1         -> peint après le fond, avant le reste
     .hero__art   AUCUN z-index, AUCUN transform, AUCUN will-change
     .hero__body  z-index:1          -> le texte reste au-dessus

   Poser un z-index, un transform, un filter ou un will-change sur
   .hero__art recrée un contexte et annule la fusion SILENCIEUSEMENT : le
   rendu redevient exactement celui d'avant, avec une couche GPU en plus.
   La parallaxe s'écrit donc sur ::before, ::after et img, jamais sur
   .hero__art lui-même.
   ===================================================================== */
.hero{
  position:relative;
  isolation:isolate;
  overflow:clip;                        /* clip et non hidden : autorise le débordement horizontal */
  /* Le bandeau remonte sous l'en-tête transparent : le papier court d'un
     bord à l'autre dès le premier pixel, la barre plus claire qui coupait
     l'écran à hauteur d'en-tête disparaît. */
  margin-top:calc(-1 * var(--h-entete));
  background-color:var(--paper-deep);
  background-image:
    var(--grain-img),
    radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(80% 70% at 92% 100%, rgba(122,99,53,.10), transparent 65%),
    /* vergeures : le grain régulier d'un papier vergé, à la limite du visible */
    repeating-linear-gradient(90deg, rgba(87,80,63,.016) 0 1px, transparent 1px 30px),
    linear-gradient(160deg,var(--paper-deep) 0%,var(--paper-warm) 42%,var(--paper-tint) 100%);
  background-blend-mode:multiply,normal,normal,normal,normal;
}
/* .hero .wrap{max-width:1340px} SUPPRIMÉ : le bandeau revient sur --wrap.
   Le h1 tombe alors exactement sous la signature de l'en-tête et exactement
   au-dessus de tous les h2 — la page a enfin un axe vertical unique. */

/* AUCUN filet en bas du bandeau.
   Une ligne, même fine, referme le premier écran comme une boîte et casse
   net l'immersion : l'oeil bute au lieu de glisser. Le dégradé du bandeau
   se termine sur --paper, la couleur exacte du corps de page — la couture
   est donc invisible et le regard descend sans obstacle. */

/* Les rameaux d'angle passent SOUS l'en-tête : sans ce décalage, le rameau
   supérieur gauche vient percuter la signature « Azziz Akroum ». */
.hero .orn-corner{
  z-index:-1;opacity:.42;mix-blend-mode:multiply;
  translate:0 calc((var(--p,.5) - .5) * var(--p-orn) * 100vh);
}
.hero .orn-corner--tl{top:calc(var(--h-entete) + .5rem);left:-1.5rem}
.hero .orn-corner--br{bottom:1.25rem;right:-1rem}

.hero__inner{
  position:relative;                    /* PAS de z-index : cf. bloc ci-dessus */
  display:flex;align-items:center;
  padding-block:calc(clamp(3.5rem,8vw,6.5rem) + var(--h-entete)) clamp(3.5rem,8vw,6.5rem);
  min-height:min(94svh,60rem);          /* svh : pas de saut quand la barre d'URL se replie */
}
.hero__body{
  position:relative;z-index:1;max-width:min(36rem,52%);
  translate:0 calc((var(--p,.5) - .5) * -.035 * 100vh);
}
/* Voile de lecture.
   Le texte passe désormais devant la gravure : sans voile, les descendantes
   viendraient buter sur les hachures du livre. Un lavis de papier, opaque
   sous la colonne et éteint bien avant son bord droit — il ne doit jamais
   dessiner de forme, seulement éclaircir ce qu'il y a dessous. */
.hero__body::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  /* La boîte est volontairement bien plus large que le texte : le dégradé
     radial doit être éteint LONGTEMPS avant de l'atteindre, faute de quoi
     ses bords se voient et le voile redevient un rectangle clair. */
  inset:-45% -75%;
  background:radial-gradient(50% 44% at 34% 50%,
    color-mix(in srgb,var(--paper-deep) 94%,transparent) 0 38%,
    color-mix(in srgb,var(--paper-deep) 55%,transparent) 60%,
    transparent 78%);
}

.hero__title{margin-bottom:1.6rem;white-space:pre-line}
.hero__title--presse{white-space:normal}
.hero__title .thin{font-weight:300}
/* Chaque ligne est une fenêtre : le texte sort de derrière un bord net. */
.hero__ligne{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.hero__ligne > span{display:block}

/* Le filet cesse d'être un cheveu de 1 px : c'est le double filet d'un
   imprimeur — un trait plein qui passe de l'encre à l'or, doublé d'un trait
   plus fin et plus court en dessous.

   Il est dessiné en CSS et non découpé dans un ornement : l'asset
   orn-filet-court.webp, seul candidat disponible, s'est révélé être un
   fragment du mot « AKROU » récupéré dans une capture de maquette. */
.hero__rule{
  width:9rem;height:5px;margin:0 0 1.9rem;opacity:1;
  background:
    linear-gradient(90deg,var(--ink) 0,var(--gold-deep) 58%,transparent 100%) 0 0/100% 2px no-repeat,
    linear-gradient(90deg,var(--rule-strong) 0,transparent 82%)              0 4px/62% 1px no-repeat;
  transform-origin:left;
}
.hero__sub{font-size:clamp(1.02rem,1.4vw,1.16rem);line-height:1.62;color:var(--ink-3);max-width:38ch;text-wrap:pretty}

/* ---- la gravure, à l'échelle du décor ----------------------------------
   Elle sort de la colonne de texte et vient occuper les deux tiers droits
   de la FENÊTRE, en débordant du bord. Ce n'est plus une vignette illustrant
   un propos : c'est le décor dans lequel le propos est posé. Le texte passe
   devant, l'encre passe derrière — c'est ce recouvrement qui crée la
   profondeur, pas l'ombre portée.

   Position absolue et non colonne de grille : la gravure doit pouvoir
   déborder de --wrap sans contraindre la mise en page du texte.
   AUCUN z-index ici (il annulerait la fusion) : l'ordre est obtenu par le
   z-index:1 de .hero__body, qui suffit à faire passer le texte devant. */
.hero__art{
  position:absolute;
  /* La gravure pose au bas du bandeau au lieu d'y flotter centrée : le
     dessin s'estompe alors dans l'arête de la section, sans intervalle de
     papier entre les deux. */
  top:auto;bottom:0;
  right:calc(50% - 50vw - 4vw);        /* déborde franchement du bord droit */
  width:min(62rem,68vw);
  pointer-events:none;
}
/* À cette échelle, la gravure n'est plus posée SUR une planche : elle EST
   le décor. Le halo de papier a donc disparu — il dessinait un rectangle
   clair derrière le texte, visible sur ses deux bords. Il ne reste que
   l'ombre de contact, sous le livre, qui suffit à l'asseoir au sol. */
/* LA PLAQUE D'OMBRE A ÉTÉ SUPPRIMÉE.
   C'était un dégradé radial ancré en bas du cadre : sous son point
   d'ancrage il n'y a plus de dégradé, la teinte se coupait donc net sur
   une arête horizontale. À l'écran, une barre sombre traversait le bas de
   la gravure — le même rectangle que le halo de papier retiré avant elle,
   dessiné par un autre moyen.

   La dérive verticale part avec elle : une gravure qui doit poser sur
   l'arête basse ne peut pas se déplacer de ±4,75 vh, elle décollerait au
   défilement. Le mouvement de la page reste porté par les ornements
   d'angle, la frise et les bandes illustrées. */
/* L'encre entre dans le papier au lieu de flotter dessus.
   Le drop-shadow précédent suivait le contour de CHAQUE trait d'une image à
   canal alpha : un halo brun sur des centaines de traits fins, et la
   rastérisation la plus coûteuse de la page. */
.hero__art img{width:100%;height:auto;mix-blend-mode:multiply;filter:contrast(1.08) saturate(.9)}

/* Le bouton secondaire du bandeau était entièrement transparent : posé
   devant la gravure, il laissait passer les feuillages sous son intitulé,
   qui devenait illisible. Il reçoit le papier du bandeau — la teinte de
   base de .hero, donc solidaire de la palette si elle est retouchée.
   Le remplissage à l'encre au survol continue de passer par-dessus :
   .btn::before est en z-index -1 dans le contexte isolé du bouton, donc
   au-dessus du fond mais sous le texte. */
.hero .btn:not(.btn--solid){--btn-bg:var(--paper-deep)}

.hero--simple .hero__inner{flex-direction:column;text-align:center;align-items:center;
  min-height:46svh;padding-block:calc(clamp(3rem,6vw,4.75rem) + var(--h-entete)) clamp(3rem,6vw,4.75rem)}

/* Panorama : une vraie frise pleine fenêtre. Le fichier maître fait 1440 px
   et il était réduit à 1100 dans une colonne de 1340 — avec du crème vide de
   chaque côté et les pieds des bâtiments coupés net par le filet du bas. */
.hero--wide .hero__inner{flex-direction:column;text-align:center;align-items:center;
  padding-bottom:clamp(16rem,26vw,24rem)}

/* ---- l'axe des deux bandeaux centrés ----------------------------------
   .hero--simple et .hero--wide partagent la même composition. Les règles
   sont donc écrites UNE fois, pour les deux : .hero--wide n'en portait que
   la moitié, et le bandeau d'AAE Expertise comme celui d'À propos étaient
   centrés en apparence seulement.

   text-align:center ne centre que des lignes de texte. L'accroche est une
   boîte flex, le double filet une boîte de 9 rem et l'amorce une boîte de
   38ch : toutes trois restaient calées à gauche d'une colonne pourtant
   centrée — le filet tombait à 280 px de l'axe, l'amorce à 130 px. */
.hero--simple .hero__body,
.hero--wide   .hero__body{max-width:44rem}
.hero--simple .eyebrow,
.hero--wide   .eyebrow{justify-content:center}
.hero--simple .eyebrow::before,
.hero--wide   .eyebrow::before{content:"";flex:0 0 2.6rem;height:1px;background:var(--rule-strong)}
.hero--simple .hero__rule,
.hero--wide   .hero__rule{margin-inline:auto}
.hero--simple .hero__sub,
.hero--wide   .hero__sub{margin-inline:auto}
.hero--simple .btn-row,
.hero--wide   .btn-row{justify-content:center}
/* La frise vient s'ancrer en bas, pleine fenêtre, et le texte se pose
   au-dessus d'elle : les bâtiments deviennent l'horizon de la page. */
.hero--wide .hero__art{
  top:auto;bottom:0;right:0;left:0;width:100%;translate:none;
}
.hero--wide .hero__art::before{display:none}
.hero--wide .hero__art img{translate:0 calc((var(--p,.5) - .5) * var(--p-fond) * 100vh)}

@media (max-width:900px){
  .hero__inner{flex-direction:column;align-items:flex-start;text-align:left;min-height:64svh}
  .hero__body{max-width:none}
  /* La vignette centrée au-dessus du titre est SUPPRIMÉE : c'était le pire
     cas de « collée là », et elle repoussait le h1 sous la ligne de
     flottaison. La gravure bascule en lavis de fond, ancrée en bas à droite,
     et le titre reprend le premier écran. */
  .hero__art{display:none}
  .hero--wide .hero__art{display:block}
  .hero:not(.hero--wide)::before{
    content:"";position:absolute;z-index:-1;inset:auto -12% 2rem auto;
    width:min(34rem,124%);aspect-ratio:3/2;pointer-events:none;
    background:var(--gravure-mobile) right bottom/contain no-repeat;
    opacity:.11;mix-blend-mode:multiply;
  }
  /* La gravure de repli est choisie par une classe et non par un style en
     ligne : la politique de sécurité interdit tout attribut style. */
  .hero--ill-boussole-livre{--gravure-mobile:url(../img/ill-boussole-livre-560.webp)}
  .hero--ill-livre-chemin  {--gravure-mobile:url(../img/ill-livre-chemin-480.webp)}
  .hero--ill-panorama      {--gravure-mobile:none}
  .hero:not([class*="hero--ill-"])::before{display:none}
}

/* ------------------------------------------------------------- cartes */
.card{
  position:relative;background:var(--paper-card);
  border:1px solid var(--rule-soft);border-radius:var(--radius-lg);
  padding:clamp(1.5rem,2.6vw,2.15rem);
  transition:border-color .3s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease),background .3s var(--ease);
}
.card--link:hover{border-color:var(--rule-strong);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.card__num{
  font-family:var(--f-display);font-size:.95rem;font-weight:600;letter-spacing:.1em;
  color:var(--gold);display:block;margin-bottom:.9rem;
}
.card__title{font-family:var(--f-display);font-size:clamp(1.25rem,2vw,1.55rem);font-weight:500;line-height:1.18;color:var(--ink);margin-bottom:.75rem}
.card__text{font-size:.94rem;line-height:1.66;color:var(--ink-3);text-wrap:pretty}
.card__more{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;
  font-size:.7rem;font-weight:500;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--gold-deep);
}
.card__more svg{width:.85em;height:.85em;transition:transform .3s var(--ease)}
.card--link:hover .card__more svg{transform:translateX(4px)}

.card-medallion{
  width:3.4rem;height:3.4rem;border-radius:50%;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--rule);background:var(--paper-tint);
  color:var(--ink);margin-bottom:1.25rem;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.card-medallion svg{width:1.5rem;height:1.5rem}
.card--link:hover .card-medallion{border-color:var(--gold);background:#fff;transform:rotate(-6deg) scale(1.06)}
.card-medallion{transition:border-color .35s var(--ease),background .35s var(--ease),transform .45s var(--ease)}
.card--link::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.card--link:hover::after{transform:scaleX(1)}
.card{overflow:hidden}


/* ------------------------------ variantes sans cadre, pour respirer */
.plain{background:none;border:0;padding:0}
.plain .card-medallion{background:transparent}

/* ---------------------------------------------------- la colonnade
   Les publics accompagnés étaient quatre pictogrammes de 2,6 rem posés
   au-dessus de quatre titres. À cette taille, une icône en trait de 1,25
   d'épaisseur n'est plus un signe : c'est un dessin, et quatre dessins de
   cette force volaient la lecture aux quatre titres — alors que le propos
   de la section est justement de NOMMER des publics.

   Renversement : l'icône redescend au rang de signe marginal (1 rem, la
   hauteur d'x du texte), posée sur la même ligne que le numéro de rang, en
   or, dans la marge de tête. Ce qui tient la composition, ce ne sont plus
   les icônes mais QUATRE COLONNES, séparées par des filets qui s'éteignent
   en haut et en bas comme dans un journal gravé. Au survol, un filet doré
   descend le long de la colonne : le seul mouvement de la section. */
.feature{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:0;position:relative;
}
.feature__item{
  position:relative;
  padding:.3rem clamp(1.1rem,2.4vw,2rem) .3rem clamp(1.1rem,2.4vw,2rem);
}
/* le filet de colonne, éteint à ses deux bouts */
.feature__item + .feature__item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--rule) 14%,var(--rule) 86%,transparent);
}
.feature__item + .feature__item::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,var(--gold),color-mix(in srgb,var(--gold) 20%,transparent));
  transform:scaleY(0);transform-origin:top;
  transition:transform var(--d-3) var(--e-ink);
}
.feature__item:hover + .feature__item::after,
.feature__item:hover::after{transform:scaleY(1)}

/* la marge de tête : rang gravé + signe */
.feature__rang{
  display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem;
  color:var(--gold-deep);
}
.feature__num{
  font-family:var(--f-display);font-size:.82rem;font-weight:600;
  letter-spacing:.18em;line-height:1;
}
.feature__rang::after{
  content:"";flex:1 1 auto;height:1px;max-width:2.4rem;
  background:linear-gradient(90deg,var(--rule-strong),transparent);
}
.feature__icon{width:1rem;height:1rem;flex:none;color:var(--gold-deep);margin:0}
.feature__icon svg{width:100%;height:100%}

.feature__item h3{
  font-family:var(--f-display);font-size:clamp(1.24rem,2vw,1.55rem);font-weight:500;
  color:var(--ink);line-height:1.16;margin-bottom:.55rem;text-wrap:balance;
}
.feature__item p{font-size:.92rem;line-height:1.68;color:var(--ink-3);text-wrap:pretty}

/* Sous 15 rem par colonne la grille retombe à une seule colonne : les filets
   verticaux n'ont alors plus rien à séparer, ils redeviennent horizontaux. */
@media (max-width:900px){
  .feature{gap:0 clamp(1.5rem,4vw,2.5rem)}
  .feature__item{padding-inline:0;padding-block:1.4rem}
  .feature__item + .feature__item::before{
    left:0;right:0;top:0;bottom:auto;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,var(--rule) 10%,var(--rule) 90%,transparent);
  }
  .feature__item + .feature__item::after{
    left:0;right:0;top:0;bottom:auto;width:auto;height:1px;
    transform:scaleX(0);transform-origin:left;
    background:linear-gradient(90deg,var(--gold),color-mix(in srgb,var(--gold) 20%,transparent));
  }
  .feature__item:hover + .feature__item::after,
  .feature__item:hover::after{transform:scaleX(1)}
}

/* bande illustree pleine largeur */
.figure-band{position:relative;overflow:clip;border-block:1px solid var(--rule-soft);background:var(--paper-tint)}
.figure-band img{width:100%;height:clamp(14rem,30vw,24rem);object-fit:cover;display:block;
  transition:scale 1.2s var(--e-out)}
.figure-band:hover img{scale:var(--s-1)}

/* ------------------------------------------------------------- frise
   Repli gravé de la bande illustrée, servi tant qu'aucune photographie
   n'a été déposée dans la médiathèque. La frise court d'un bord à l'autre
   de la FENÊTRE, pas de la colonne : c'est la seule respiration pleine
   largeur du site, et la seule occasion où l'horizon s'ouvre.

   La gravure descend légèrement dans la section suivante et s'y éteint
   par un masque : aucun bord franc, la frise se dissout dans le papier. */
.frise{
  position:relative;isolation:isolate;
  padding-block:clamp(2rem,4.5vw,3.25rem) 0;
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-tint) 55%,var(--paper) 100%);
}
/* La frise ouvre sur --paper, exactement le fond de la section qui la précède :
   sa marge haute ne dessine donc aucune frontière, elle s'ADDITIONNE à celle de
   la section. Quand une légende occupe l'intervalle, cette marge la sépare du
   texte au-dessus et fait son travail. Quand le bloc n'a ni titre ni sous-titre
   — le cas d'À propos —, elle ne sépare plus rien : le lecteur traversait
   200 px de vide entre le dernier paragraphe et l'horizon. */
.frise--nue{padding-top:clamp(.75rem,1.5vw,1.25rem)}
.frise__gravure{
  display:block;width:100%;height:auto;
  mix-blend-mode:multiply;
  opacity:.92;
  filter:contrast(1.05) saturate(.9);
  /* Le fondu du bas partait de 72 % : calibré pour la gravure d'origine, dont
     le dernier quart n'était que du sol. La nouvelle version, plus haute
     (1440 x 464 au lieu de 1440 x 344), y a du dessin — le livre ouvert et le
     pied des bâtiments s'effaçaient. Le fondu ne mord plus que sur les
     dernières lignes de sol. */
  -webkit-mask-image:linear-gradient(180deg,#000 0 88%,transparent 100%),
                     linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0 88%,transparent 100%),
                     linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
  translate:0 calc((var(--p,.5) - .5) * var(--p-fond) * -100vh);
}
.frise__legende{
  max-width:min(46rem,100%);margin:0 auto clamp(1.5rem,4vw,3rem);
  text-align:center;
  font-family:var(--f-display);font-size:clamp(1.45rem,2.8vw,2.25rem);
  font-weight:500;line-height:1.22;color:var(--ink);text-wrap:balance;
}
/* Un fleuron discret entre la phrase et l'horizon. */
.frise__legende::after{
  content:"";display:block;width:5.5rem;height:2px;margin:1.35rem auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
@media (max-width:760px){
  .frise__legende{font-size:1.35rem}
  .frise{padding-bottom:1.5rem}
}
.figure-band__caption{position:absolute;inset:auto 0 0 0;padding:clamp(1.25rem,3vw,2.25rem);
  background:linear-gradient(0deg,rgba(22,19,13,.72),transparent);color:#fdf7e7}
.figure-band__caption p{font-family:var(--f-display);font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.3;max-width:44rem}

/* --------------------------------------------------------- grilles */
.grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr))}

/* --------------------------------------------------------- structures */
.brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:clamp(1.25rem,2.5vw,2rem)}
.brand-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper-card);border:1px solid var(--rule-soft);border-radius:var(--radius-lg);
  padding:clamp(1.75rem,3vw,2.75rem);overflow:hidden;
  transition:border-color .35s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease);
}
.brand-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 100% 0%,rgba(158,131,71,.09),transparent 62%);
  opacity:0;transition:opacity .45s var(--ease);
}
.brand-card:hover{border-color:var(--rule-strong);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.brand-card:hover::before{opacity:1}
.brand-card > *{position:relative;z-index:1}
.brand-card__head{display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem}
.brand-card__logo{width:clamp(5rem,10vw,6.75rem);height:auto;aspect-ratio:1;object-fit:contain;flex:none;transition:transform .5s var(--ease)}
.brand-card:hover .brand-card__logo{transform:rotate(-3deg) scale(1.04)}
.brand-card__code{font-family:var(--f-display);font-size:clamp(1.6rem,3vw,2.15rem);font-weight:500;letter-spacing:.06em;color:var(--ink);line-height:1}
.brand-card__name{font-family:var(--f-display);font-size:clamp(1.15rem,2vw,1.4rem);font-weight:400;line-height:1.2;color:var(--ink-2);margin-top:.35rem;text-transform:uppercase;letter-spacing:.05em}
.brand-card__promise{font-size:1rem;line-height:1.6;color:var(--ink-3);margin-bottom:1.35rem}
.brand-card__tags{display:flex;flex-wrap:wrap;gap:.5rem .95rem;margin-bottom:1.75rem;
  font-size:.68rem;font-weight:500;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--ink-muted)}
.brand-card__tags li{display:flex;align-items:center;gap:.95rem}
.brand-card__tags li+li::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--rule-strong);margin-right:.05rem}
.brand-card__foot{margin-top:auto}

/* ------------------------------------------------- statistiques — le relevé
   Les chiffres n'étaient PAS un composant : c'était une boîte à quatre
   compartiments, exactement comme les cartes de marque juste au-dessus et
   comme les cartes d'actualité juste en dessous. Trois grilles encadrées
   d'affilée : la page ne relançait jamais l'oeil.

   Ici les bordures disparaissent. Le relevé devient une pièce TYPOGRAPHIQUE,
   tenue par deux gestes d'imprimeur et rien d'autre :
     · en tête, le double filet — un trait plein qui passe de l'encre à l'or,
       doublé d'un trait plus fin ; le même geste que le filet du bandeau, ce
       qui coud le haut et le bas de la page ;
     · en pied, une graduation gravée, comme le limbe d'un instrument : elle
       transforme la rangée de chiffres en échelle de mesure, et fait écho à
       la boussole de la gravure de fond.
   Entre les deux, les valeurs respirent sur le papier nu. */
.stats{
  --stat-tick: color-mix(in srgb,var(--rule-strong) 62%,transparent);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  position:relative;background:transparent;border:0;
  padding-block:clamp(2rem,3.6vw,3rem);
  margin-inline:auto;max-width:64rem;
}
/* le double filet d'ouverture */
.stats::before{
  content:"";position:absolute;inset:0 0 auto 0;height:5px;
  background:
    linear-gradient(90deg,transparent,var(--ink) 12%,var(--gold-deep) 62%,transparent) 0 0/100% 2px no-repeat,
    linear-gradient(90deg,transparent,var(--rule-strong) 22%,transparent 78%)          0 4px/100% 1px no-repeat;
}
/* la graduation de clôture : traits fins, un trait long tous les cinq */
.stats::after{
  content:"";position:absolute;inset:auto 0 0 0;height:11px;
  background:
    repeating-linear-gradient(90deg,var(--stat-tick) 0 1px,transparent 1px 12px) 0 100%/100% 6px no-repeat,
    repeating-linear-gradient(90deg,var(--stat-tick) 0 1px,transparent 1px 60px) 0 100%/100% 11px no-repeat,
    linear-gradient(90deg,var(--rule-strong),var(--rule-strong))                 0 100%/100% 1px no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.stat{padding:clamp(1.1rem,2.4vw,1.9rem) 1.1rem;text-align:center;position:relative}
/* séparateur : un filet qui s'éteint à ses deux extrémités, ponctué d'un
   losange doré — un fleuron de composition, pas un bord de cellule. */
.stat+.stat::before{
  content:"";position:absolute;left:0;top:8%;bottom:8%;width:1px;
  background:linear-gradient(180deg,transparent,var(--rule) 24%,var(--rule) 76%,transparent);
}
.stat+.stat::after{
  content:"";position:absolute;left:-2.5px;top:50%;width:6px;height:6px;
  translate:0 -50%;rotate:45deg;
  border:1px solid var(--gold);background:var(--paper);
}
.stat__prefix{
  display:block;font-size:.64rem;font-weight:500;letter-spacing:var(--track-xwide);
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:.55rem;min-height:1rem;
}
.stat__value{
  font-family:var(--f-display);font-size:clamp(3rem,6.4vw,4.4rem);font-weight:400;
  line-height:.94;color:var(--ink);display:block;letter-spacing:-.012em;
  font-variant-numeric:lining-nums;
}
.stat__label{
  display:block;margin-top:.7rem;font-size:.7rem;font-weight:500;
  letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--ink-3);
  text-wrap:balance;
}
@media (max-width:640px){
  .stat+.stat::before{left:18%;right:18%;top:0;bottom:auto;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,var(--rule) 24%,var(--rule) 76%,transparent)}
  .stat+.stat::after{left:50%;top:-2.5px;translate:-50% 0}
}

/* ------------------------------------------------ la section du relevé
   Remplace .section--plaque sur l'accueil. Le pavé noir y coupait le flux
   de lecture en deux — le lecteur passait du papier crème à un aplat 17:1
   puis revenait au crème, pour QUATRE nombres. Ici la page ne change pas
   de matière : elle s'assombrit d'un ton, le temps du relevé, et se rouvre.
   Les deux filets de frontière s'éteignent avant les bords : aucune ligne
   ne vient refermer la section comme une boîte. */
/* Les deux filets de frontière sont posés DANS le fond, et non sur ::before
   et ::after. Ces deux pseudo-éléments sont déjà pris : .ink-bg::before porte
   la gravure de fond, et la déclaration la plus tardive gagnait — la boussole
   disparaissait sans bruit derrière un filet d'un pixel. Le détail de
   composition est regroupé en fin de fichier, avec les autres surfaces à
   dégradé (voir « matière du papier — composition »). */
.section--releve{position:relative;background-color:var(--paper-tint)}

/* ------------------------------------------------------------- étapes */
.steps{counter-reset:step;display:grid;gap:0}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.25rem,3vw,2.25rem);
  padding-block:clamp(1.5rem,3vw,2.1rem);border-top:1px solid var(--rule-soft);align-items:start;
}
.step:last-child{border-bottom:1px solid var(--rule-soft)}
.step__badge{
  counter-increment:step;
  width:3.1rem;height:3.1rem;border-radius:50%;border:1px solid var(--rule);
  display:grid;place-items:center;flex:none;background:var(--paper-card);color:var(--ink);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.step__badge svg{width:1.35rem;height:1.35rem}
.step:hover .step__badge{border-color:var(--rule-strong);background:#fff}
.step__num{font-family:var(--f-display);font-size:.85rem;font-weight:600;letter-spacing:.1em;color:var(--gold);display:block;margin-bottom:.4rem}
.step__title{font-family:var(--f-display);font-size:clamp(1.2rem,2vw,1.5rem);font-weight:500;color:var(--ink);line-height:1.2;margin-bottom:.45rem}
.step__text{font-size:.95rem;line-height:1.66;color:var(--ink-3);max-width:60ch}

.steps3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:clamp(1.25rem,3vw,2.5rem);text-align:center}
.steps3 > li{position:relative;padding-top:1rem}
.steps3 > li::before{
  content:attr(data-num);display:block;margin:0 auto 1rem;
  width:2.9rem;height:2.9rem;line-height:2.75rem;border-radius:50%;
  border:1px solid var(--rule);font-family:var(--f-display);font-size:1.1rem;color:var(--gold-deep);background:var(--paper-card);
}
.steps3 h3{font-family:var(--f-display);font-size:1.35rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin-bottom:.6rem}
.steps3 p{font-size:.94rem;line-height:1.62;color:var(--ink-3);max-width:32ch;margin-inline:auto}

/* -------------------------------------------------------------- puces */
.tag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.85rem}
.tag-item{
  display:flex;align-items:center;gap:1rem;padding:1.05rem 1.35rem;
  background:var(--paper-card);border:1px solid var(--rule-soft);border-radius:var(--radius);
  font-size:.86rem;font-weight:500;letter-spacing:.03em;color:var(--ink-2);line-height:1.35;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.tag-item:hover{border-color:var(--rule);background:#fff}
.tag-item svg{width:1.2rem;height:1.2rem;flex:none;color:var(--gold-deep)}

.pill-list{display:flex;flex-wrap:wrap;gap:.6rem}
.pill{
  display:inline-flex;align-items:center;gap:.55rem;padding:.45rem 1rem;
  border:1px solid var(--rule);border-radius:999px;background:var(--paper-card);
  font-size:.7rem;font-weight:500;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--ink-3);
}
.pill svg{width:.85rem;height:.85rem;color:var(--gold)}

/* ------------------------------------------------------ liste numérotée */
.numbered{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:.6rem}
.numbered li{
  display:flex;align-items:baseline;gap:1rem;padding:.95rem 1.15rem;
  border:1px solid var(--rule-soft);border-radius:var(--radius);background:var(--paper-card);
  font-size:.92rem;color:var(--ink-2);transition:border-color .3s var(--ease)
}
.numbered li:hover{border-color:var(--rule)}
.numbered li::before{
  content:attr(data-num);font-family:var(--f-display);font-size:.9rem;font-weight:600;
  color:var(--gold);flex:none;letter-spacing:.06em;
}

/* ---------------------------------------------------------- thématiques
   Le passage le plus mort du site : dix à onze lignes identiques, répétées
   sur dix pages d'univers, qui apparaissaient toutes d'un bloc. Elles
   deviennent un REGISTRE — une table numérotée qui se compose ligne à
   ligne, comme un sommaire qu'on découvre. */
.topics{border-top:1px solid var(--rule);counter-reset:theme}
.topic{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(.5rem,3vw,2.5rem);
  padding-block:1.45rem;border-bottom:1px solid var(--rule-soft);align-items:baseline;
  transition:background var(--d-2) var(--e-out);
}
.topic:hover{background:color-mix(in srgb,var(--paper-tint) 70%,transparent)}
/* Le filet du bas se tire de gauche à droite à l'entrée de la ligne. */
.topic::after{
  content:"";position:absolute;inset:auto 0 -1px 0;height:1px;background:var(--rule-strong);
  transform:scaleX(0);transform-origin:left;
}
.topic__title{
  position:relative;padding-left:3.1rem;
  font-family:var(--f-display);font-size:clamp(1.08rem,1.7vw,1.3rem);font-weight:500;
  color:var(--ink);line-height:1.3;
}
/* Numérotation du registre, en chiffres à l'ancienne. */
.topic__title::before{
  counter-increment:theme;content:counter(theme,decimal-leading-zero);
  position:absolute;left:0;top:.16em;
  font-family:var(--f-display);font-size:.82em;font-weight:400;
  font-variant-numeric:oldstyle-nums;letter-spacing:.04em;
  color:var(--gold);
}
.topic__title::after{
  content:"";position:absolute;left:2rem;top:.72em;
  width:.7rem;height:1px;background:var(--rule-strong);
}
/* Le retard est porté par nth-child et non par une variable écrite en ligne :
   la politique de sécurité interdit l'attribut style. Onze crans couvrent le
   plus long des dix registres. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .topics.is-in .topic::after{transform:scaleX(1);transition:transform var(--d-3) var(--e-ink)}
  .topics.is-in .topic:nth-child(1)::after {transition-delay:0ms}
  .topics.is-in .topic:nth-child(2)::after {transition-delay:55ms}
  .topics.is-in .topic:nth-child(3)::after {transition-delay:110ms}
  .topics.is-in .topic:nth-child(4)::after {transition-delay:165ms}
  .topics.is-in .topic:nth-child(5)::after {transition-delay:220ms}
  .topics.is-in .topic:nth-child(6)::after {transition-delay:275ms}
  .topics.is-in .topic:nth-child(7)::after {transition-delay:330ms}
  .topics.is-in .topic:nth-child(8)::after {transition-delay:385ms}
  .topics.is-in .topic:nth-child(9)::after {transition-delay:440ms}
  .topics.is-in .topic:nth-child(10)::after{transition-delay:495ms}
  .topics.is-in .topic:nth-child(n+11)::after{transition-delay:550ms}
}
@media (prefers-reduced-motion:reduce){.topic::after{transform:scaleX(1)}}
@media (scripting:none){.topic::after{transform:scaleX(1)}}
.topic__desc{font-size:.93rem;line-height:1.62;color:var(--ink-3);text-wrap:pretty}
@media (max-width:760px){.topic{grid-template-columns:1fr;gap:.4rem}}

/* -------------------------------------------------------- trame modulaire */
.frame{
  background:var(--paper-card);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:clamp(1.75rem,3.5vw,3rem);
}
.frame__finality{
  font-family:var(--f-display);font-size:clamp(1.1rem,1.9vw,1.35rem);font-style:italic;
  line-height:1.5;color:var(--ink-2);padding-left:1.35rem;border-left:2px solid var(--rule-strong);margin-bottom:2rem;
}
.frame-steps{counter-reset:fstep;display:grid;gap:0}
.frame-steps li{
  counter-increment:fstep;position:relative;padding:.95rem 0 .95rem 3.25rem;
  border-bottom:1px solid var(--rule-soft);font-size:.95rem;line-height:1.6;color:var(--ink-2);
}
.frame-steps li:last-child{border-bottom:0}
.frame-steps li::before{
  content:counter(fstep,decimal-leading-zero);position:absolute;left:0;top:.95rem;
  font-family:var(--f-display);font-size:.9rem;font-weight:600;color:var(--gold);letter-spacing:.08em;
}
.frame__note{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--rule-soft);
  font-size:.88rem;line-height:1.62;color:var(--ink-muted)}

.callout{
  background:linear-gradient(150deg,var(--paper-warm),var(--paper-tint));
  border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,2.4rem);
}
.callout__title{font-family:var(--f-display);font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:500;color:var(--ink);margin-bottom:.85rem;line-height:1.22}
.callout p{font-size:.95rem;line-height:1.68;color:var(--ink-3)}

/* -------------------------------------------------------------- prose */
.prose{max-width:68ch;color:var(--ink-2);font-size:1.02rem;line-height:1.75}
.prose > * + *{margin-top:1.15rem}
.prose h2{font-family:var(--f-display);font-size:clamp(1.6rem,3vw,2.15rem);font-weight:500;color:var(--ink);line-height:1.16;margin-top:2.75rem}
.prose h3{font-family:var(--f-display);font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:500;color:var(--ink);line-height:1.2;margin-top:2.25rem}
.prose h4{font-family:var(--f-sans);font-size:.78rem;font-weight:600;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--gold-deep);margin-top:2rem}
.prose ul,.prose ol{padding-left:1.35rem}
.prose ul li{list-style:none;position:relative;padding-left:1.15rem;margin-bottom:.5rem}
.prose ul li::before{content:"";position:absolute;left:0;top:.72em;width:.32rem;height:.32rem;border-radius:50%;background:var(--gold)}
.prose ol{list-style:decimal;padding-left:1.6rem}
.prose ol li{margin-bottom:.5rem;padding-left:.35rem}
.prose ol li::marker{font-family:var(--f-display);color:var(--gold);font-weight:600}
.prose a{color:var(--ink);background-image:linear-gradient(var(--rule-strong),var(--rule-strong));background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat}
.prose a:hover{color:var(--gold-deep)}
.prose blockquote{border-left:2px solid var(--rule-strong);padding-left:1.35rem;font-family:var(--f-display);font-style:italic;font-size:1.15rem;line-height:1.55;color:var(--ink-2)}
.prose blockquote p+p{margin-top:.75rem}
.prose strong{font-weight:600;color:var(--ink)}
.prose hr{margin-block:2.25rem}

/* ------------------------------------------------------------ citation */
.quote{
  position:relative;max-width:48rem;margin-inline:auto;text-align:center;
  padding:clamp(2rem,4vw,3rem) clamp(1rem,3vw,2.5rem);
}
.quote__mark{font-family:var(--f-display);font-size:5rem;line-height:.6;color:var(--rule-strong);display:block;margin-bottom:.75rem}
.quote__text{font-family:var(--f-display);font-size:clamp(1.35rem,2.9vw,1.95rem);font-style:italic;line-height:1.45;color:var(--ink);text-wrap:balance}
.quote__author{margin-top:1.75rem;font-size:.72rem;font-weight:500;letter-spacing:var(--track-xwide);text-transform:uppercase;color:var(--gold-deep)}

/* -------------------------------------------------------------- avis */
.testimonial{
  display:flex;flex-direction:column;height:100%;
  background:var(--paper-card);border:1px solid var(--rule-soft);border-radius:var(--radius-lg);
  padding:clamp(1.5rem,2.6vw,2.1rem);transition:border-color .3s var(--ease),box-shadow .35s var(--ease);
}
.testimonial:hover{border-color:var(--rule);box-shadow:var(--shadow)}
.testimonial__stars{display:flex;gap:.2rem;color:var(--gold);margin-bottom:1.1rem}
.testimonial__stars svg{width:.95rem;height:.95rem}
.testimonial__quote{font-family:var(--f-display);font-size:1.12rem;line-height:1.55;color:var(--ink-2);font-style:italic;flex:1}
.testimonial__foot{margin-top:1.5rem;padding-top:1.15rem;border-top:1px solid var(--rule-soft)}
.testimonial__author{font-size:.86rem;font-weight:600;color:var(--ink);letter-spacing:.02em}
.testimonial__role{font-size:.8rem;color:var(--ink-muted);margin-top:.2rem;line-height:1.45}
.testimonial__badge{
  display:inline-block;margin-top:.7rem;padding:.2rem .6rem;border:1px solid var(--rule);border-radius:2px;
  font-size:.6rem;font-weight:600;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--gold-deep);
}

/* --------------------------------------------------------- actualités */
.post-card{display:flex;flex-direction:column;height:100%;background:var(--paper-card);
  border:1px solid var(--rule-soft);border-radius:var(--radius-lg);overflow:hidden;
  transition:border-color .3s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.post-card:hover{border-color:var(--rule-strong);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.post-card__media{aspect-ratio:16/10;overflow:hidden;background:var(--paper-deep);border-bottom:1px solid var(--rule-soft)}
.post-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.post-card:hover .post-card__media img{transform:scale(1.04)}
/* Vues par défaut, découpées dans les gravures de la maison.
   Le panorama est une frise de 1 440 px pour 344 : un cadrage 16/10 n'en
   montre que 38 % de la largeur. Quatre décalages suffisent donc à en tirer
   quatre images qui n'ont rien à voir entre elles — le siège, la table de
   conseil, la mairie, le palais. Les pourcentages sont calés sur les scènes
   de la gravure, ils ne sont pas décoratifs : y toucher recadre sur un
   entre-deux (un bosquet, un bout de chemin) qui ne raconte plus rien. */
.post-card__media--siege   img{object-position:0% center}
.post-card__media--conseil img{object-position:20% center}
.post-card__media--chemin  img{object-position:52% center}
.post-card__media--mairie  img{object-position:80% center}
.post-card__media--palais  img{object-position:100% center}
.post-card__media--livre   img{object-position:center 46%}
.post-card__body{padding:clamp(1.35rem,2.4vw,1.85rem);display:flex;flex-direction:column;flex:1}
.post-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.85rem;
  font-size:.66rem;font-weight:500;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--ink-muted)}
.post-card__cat{color:var(--gold-deep)}
.post-card__meta span+span::before{content:"·";margin-right:.6rem;color:var(--rule-strong)}
.post-card__title{font-family:var(--f-display);font-size:clamp(1.2rem,2vw,1.42rem);font-weight:500;
  line-height:1.24;color:var(--ink);margin-bottom:.7rem}
.post-card__excerpt{font-size:.92rem;line-height:1.62;color:var(--ink-3);flex:1}

.article-head{max-width:var(--wrap-narrow);margin-inline:auto;text-align:center}
.article-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.5rem;
  font-size:.68rem;font-weight:500;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--ink-muted)}
.article-cover{max-width:var(--wrap);margin:clamp(2rem,4vw,3rem) auto 0;border:1px solid var(--rule-soft);border-radius:var(--radius-lg);overflow:hidden}

/* -------------------------------------------------------- webinaires */
.webinar{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(1.25rem,3vw,2.25rem);
  padding:clamp(1.35rem,2.5vw,1.9rem);background:var(--paper-card);
  border:1px solid var(--rule-soft);border-radius:var(--radius-lg);align-items:center;
  transition:border-color .3s var(--ease),box-shadow .35s var(--ease)}
.webinar:hover{border-color:var(--rule-strong);box-shadow:var(--shadow)}
.webinar__media{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(150deg,var(--paper-warm),var(--paper-deep));border:1px solid var(--rule-soft);
  display:grid;place-items:center}
.webinar__media img{width:100%;height:100%;object-fit:cover}
.webinar__play{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink);
  background:color-mix(in srgb,var(--paper) 25%,transparent);transition:background .3s var(--ease)}
.webinar:hover .webinar__play{background:color-mix(in srgb,var(--paper) 5%,transparent)}
.webinar__play svg{width:2.75rem;height:2.75rem;filter:drop-shadow(0 2px 6px rgba(60,48,24,.25));transition:transform .3s var(--ease)}
.webinar:hover .webinar__play svg{transform:scale(1.09)}
.webinar__theme{font-size:.66rem;font-weight:500;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--gold-deep);margin-bottom:.6rem;display:block}
.webinar__title{font-family:var(--f-display);font-size:clamp(1.25rem,2.2vw,1.55rem);font-weight:500;line-height:1.22;color:var(--ink);margin-bottom:.7rem}
.webinar__desc{font-size:.93rem;line-height:1.64;color:var(--ink-3)}
.webinar__meta{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:1.15rem;
  font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.webinar__meta span{display:flex;align-items:center;gap:.45rem}
.webinar__meta svg{width:.9rem;height:.9rem;color:var(--gold)}
@media (max-width:720px){.webinar{grid-template-columns:1fr}}

.embed{position:relative;aspect-ratio:16/9;border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper-deep)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ------------------------------------------------------------ colonnes */
.columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:clamp(1.5rem,4vw,3.5rem)}
.column__head{display:flex;align-items:center;gap:1.1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--rule);margin-bottom:1.35rem}
.column__num{font-family:var(--f-display);font-size:.85rem;font-weight:600;color:var(--gold);letter-spacing:.1em}
.column__title{font-family:var(--f-display);font-size:clamp(1.3rem,2.2vw,1.65rem);font-weight:500;color:var(--ink);line-height:1.15}
.column__sub{font-size:.72rem;font-weight:500;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--ink-muted);margin-top:.3rem}
.column__list li{position:relative;padding:.6rem 0 .6rem 1.5rem;font-size:.94rem;line-height:1.6;color:var(--ink-3);border-bottom:1px solid var(--rule-soft)}
.column__list li:last-child{border-bottom:0}
.column__list li::before{content:"";position:absolute;left:0;top:1.12em;width:.7rem;height:1px;background:var(--rule-strong)}

/* --------------------------------------------------------- diplômes */
.diplomas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1rem}
.diploma{display:flex;align-items:center;gap:1.15rem;padding:1.3rem 1.5rem;background:var(--paper-card);
  border:1px solid var(--rule-soft);border-radius:var(--radius-lg);transition:border-color .3s var(--ease)}
.diploma:hover{border-color:var(--rule)}
.diploma__icon{width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--rule);
  display:grid;place-items:center;flex:none;color:var(--ink);background:var(--paper-tint)}
.diploma__icon svg{width:1.25rem;height:1.25rem}
.diploma__text{font-size:.9rem;line-height:1.45;color:var(--ink-2);font-weight:500}

/* ------------------------------------------------------------- tableau */
.spec-table{border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper-card)}
.spec-row{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);border-bottom:1px solid var(--rule-soft)}
.spec-row:last-child{border-bottom:0}
.spec-row:nth-child(odd){background:color-mix(in srgb,var(--paper-tint) 55%,transparent)}
.spec-row dt{padding:1rem 1.4rem;font-family:var(--f-display);font-size:1.05rem;font-weight:500;color:var(--ink);border-right:1px solid var(--rule-soft)}
.spec-row dd{padding:1rem 1.4rem;margin:0;font-size:.92rem;line-height:1.6;color:var(--ink-3)}
@media (max-width:700px){.spec-row{grid-template-columns:1fr}.spec-row dt{border-right:0;padding-bottom:.25rem}.spec-row dd{padding-top:0}}

/* ------------------------------------------------------------- bandeau */
.band{position:relative;background:linear-gradient(150deg,var(--paper-deep),var(--paper-warm) 55%,var(--paper-tint));
  border-block:1px solid var(--rule);overflow:hidden}
.band__inner{position:relative;z-index:2;text-align:center;max-width:46rem;margin-inline:auto;padding-block:clamp(3.5rem,7vw,5.5rem)}
.band .eyebrow{justify-content:center}
.band .eyebrow::before{content:"";flex:0 0 2.6rem;height:1px;background:var(--rule-strong)}
.band p{margin-top:1.25rem;font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.66;color:var(--ink-3);text-wrap:pretty}
.band .btn-row{justify-content:center}

/* ----------------------------------------------------------- formulaire */
.form{display:grid;gap:1.35rem}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:1.35rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field > label{font-size:.72rem;font-weight:500;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--ink-3)}
.field .req{color:var(--gold-deep)}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem 1rem;background:var(--paper-card);
  border:1px solid var(--rule);border-radius:var(--radius);color:var(--ink);
  font-size:.95rem;line-height:1.5;transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.field textarea{min-height:10rem;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237a6335' stroke-width='1.4' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:.7rem;padding-right:2.5rem;cursor:pointer}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(158,131,71,.13)}
.field input::placeholder,.field textarea::placeholder{color:#a89c85}
.field__hint{font-size:.78rem;color:var(--ink-muted);line-height:1.5}
.field--error input,.field--error textarea,.field--error select{border-color:#a8443a;background:#fdf3f1}
.field__error{font-size:.78rem;color:#a8443a;font-weight:500}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Le consentement est une PHRASE, pas une étiquette de champ.
   `.field > label` la prenait en capitales, interlettrées à .16em et à
   .72 rem : la seule ligne de la page qui engage juridiquement le visiteur
   était aussi la seule illisible. On rend au label sa casse et sa taille de
   texte courant, et on élargit la cible de clic à toute la ligne. */
.field > label.consent{
  font-size:.88rem;font-weight:400;letter-spacing:normal;text-transform:none;
  color:var(--ink-3);cursor:pointer;
}
.consent{display:flex;gap:.85rem;align-items:flex-start;line-height:1.6}
.consent input{width:1.15rem;height:1.15rem;margin-top:.15rem;flex:none;accent-color:var(--gold-deep);padding:0;cursor:pointer}
.field--consent{padding:.9rem 1.05rem;border:1px solid var(--rule-soft);border-radius:var(--radius);
  background:color-mix(in srgb,var(--paper-card) 70%,transparent);
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.field--consent:hover{border-color:var(--rule)}
.field--consent:focus-within{border-color:var(--gold);background:#fff}

/* -------------------------------------------------------- les garanties
   Une bande légère, sans cadre, glissée entre le dernier champ et l'envoi :
   c'est là qu'on se demande si l'on sera rappelé et ce que devient ce qu'on
   écrit. Sans cadre, précisément, parce que la page est déjà faite de boîtes
   — champs, panneau, encadrés — et qu'une quatrième les aurait toutes
   aplaties au même rang. */
.garanties{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  gap:clamp(.9rem,2.2vw,1.75rem);
  padding-top:1.5rem;border-top:1px solid var(--rule-soft);
}
.garantie{display:flex;gap:.7rem;align-items:flex-start}
.garantie__icone{width:1rem;height:1rem;flex:none;margin-top:.2rem;color:var(--gold-deep)}
.garantie__titre{display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:.2rem}
.garantie__texte{display:block;font-size:.8rem;line-height:1.5;color:var(--ink-muted);text-wrap:pretty}

/* L'envoi : le bouton et l'échappatoire téléphonique sur la même ligne.
   Tout le monde ne veut pas écrire — certains veulent appeler, et ils ne
   doivent pas avoir à remonter chercher le numéro. */
.form-envoi{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem}
.form-envoi__note{font-size:.85rem;color:var(--ink-muted)}
.form-envoi__note a{color:var(--ink-2)}
@media (max-width:520px){
  .btn--envoi{width:100%}
  .form-envoi__note{width:100%}
}

.alert{padding:1.1rem 1.35rem;border-radius:var(--radius);border:1px solid var(--rule);
  background:var(--paper-card);font-size:.93rem;line-height:1.6;display:flex;gap:.9rem;align-items:flex-start}
.alert svg{width:1.15rem;height:1.15rem;flex:none;margin-top:.15rem}
.alert--ok{border-color:#87a06d;background:#f5f9ef;color:#3d5b28}
.alert--err{border-color:#c8877e;background:#fdf4f2;color:#8c3b32}

/* --------------------------------------------------------- coordonnées
   LE COLLANT EST PORTÉ PAR LA COLONNE, JAMAIS PAR LE PANNEAU.
   Il l'était par `.contact-panel`, et c'est un piège : `position:sticky` ne
   réserve aucune place, l'élément reste à sa position de flux et se contente
   d'être PEINT plus bas. Un panneau collant passe donc sur ses propres frères
   de flux au défilement — sur la page de contact il recouvrait les trois
   engagements, sur la page d'inscription le second panneau passait sous le
   premier. En posant le collant sur `.contact-aside`, tout le contenu de la
   colonne voyage ensemble : le recouvrement redevient structurellement
   impossible, quoi qu'on ajoute plus tard dans la colonne. */
.contact-aside{position:sticky;top:calc(var(--h-entete) + 1.5rem);align-self:start}
/* Un bloc collant plus haut que la fenêtre rend sa propre fin inatteignable :
   une fois épinglé, il descend avec le défilement et son pied ne revient
   jamais. Sous la hauteur qu'il lui faut, on renonce donc au collant plutôt
   qu'à du contenu lisible.
   UN SEUL SEUIL désormais. Il y en avait deux, parce que la colonne de la page
   d'inscription empilait deux panneaux — engagements puis coordonnées, près de
   800 px — quand celle du contact n'en portait qu'un. Les engagements sont
   passés en bande sous la grille : les deux colonnes ne portent plus qu'un
   panneau d'environ 335 px, qui tient dans 640 px de fenêtre. */
@media (max-height:640px){.contact-aside{position:static}}

.contact-panel{background:var(--paper-card);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:clamp(1.6rem,3vw,2.25rem)}
.contact-item{display:flex;gap:1.05rem;padding-block:1.15rem;border-bottom:1px solid var(--rule-soft)}
.contact-item:last-child{border-bottom:0;padding-bottom:0}
.contact-item:first-child{padding-top:0}
.contact-item__icon{width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--rule);
  display:grid;place-items:center;flex:none;color:var(--gold-deep);background:var(--paper-tint);
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.contact-item__icon svg{width:1.05rem;height:1.05rem}
.contact-item__label{display:block;font-size:.66rem;font-weight:500;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--ink-muted);margin-bottom:.25rem}
.contact-item__value{display:block;font-family:var(--f-display);font-size:1.22rem;font-weight:500;color:var(--ink);line-height:1.3;word-break:break-word}
.contact-item__note{font-size:.85rem;color:var(--ink-3);line-height:1.55;white-space:pre-line}

/* Rangée actionnable : c'est la LIGNE ENTIÈRE qui est le lien, pas le numéro.
   Au pouce, viser dix caractères de 16 px relève du jeu d'adresse ; la cible
   fait désormais toute la largeur du panneau et 4,5 rem de haut. */
.contact-item--lien{
  margin-inline:calc(-1 * clamp(.7rem,1.4vw,1rem));
  padding-inline:clamp(.7rem,1.4vw,1rem);
  border-radius:var(--radius);
  transition:background .25s var(--ease);
}
.contact-item--lien:hover{background:color-mix(in srgb,var(--paper-tint) 60%,transparent)}
.contact-item--lien:hover .contact-item__value{color:var(--gold-deep)}
.contact-item--lien:hover .contact-item__icon{border-color:var(--gold);background:#fff;color:var(--gold-deep)}

/* ------------------------------------------------------------ pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:.4rem;margin-top:clamp(2.5rem,5vw,4rem)}
.pagination a,.pagination span{
  min-width:2.6rem;height:2.6rem;display:grid;place-items:center;padding-inline:.7rem;
  border:1px solid var(--rule-soft);border-radius:var(--radius);font-size:.85rem;color:var(--ink-3);
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}
.pagination a:hover{border-color:var(--rule-strong);color:var(--ink);background:var(--paper-card)}
.pagination [aria-current]{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:500}

/* --------------------------------------------------------- fil d'ariane */
.breadcrumb{padding-block:1.1rem;border-bottom:1px solid var(--rule-soft);background:var(--paper-tint)}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.breadcrumb li{display:flex;align-items:center;gap:.5rem}
.breadcrumb li+li::before{content:"";width:.9rem;height:1px;background:var(--rule-strong)}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb [aria-current]{color:var(--ink-2);font-weight:500}

/* ------------------------------------------------------ nav univers */
.uni-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem;margin-top:clamp(2.5rem,5vw,3.5rem)}
.uni-nav__item{display:flex;flex-direction:column;gap:.5rem;padding:1.35rem 1.6rem;
  border:1px solid var(--rule-soft);border-radius:var(--radius-lg);background:var(--paper-card);
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.uni-nav__item:hover{border-color:var(--rule-strong);transform:translateY(-2px)}
.uni-nav__dir{font-size:.66rem;font-weight:500;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--gold-deep);display:flex;align-items:center;gap:.5rem}
.uni-nav__dir svg{width:.85rem;height:.85rem}
.uni-nav__item--next{text-align:right;align-items:flex-end}
.uni-nav__title{font-family:var(--f-display);font-size:1.2rem;font-weight:500;color:var(--ink);line-height:1.25}

/* ---------------------------------------------------------- pied de page */
.site-footer{background:var(--ink);color:#cfc6b3;padding-block:clamp(3.5rem,7vw,5rem) 0;margin-top:0}
.site-footer a{color:#cfc6b3;transition:color .25s var(--ease)}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(auto-fit,minmax(min(100%,10rem),1fr));
  gap:clamp(2rem,5vw,3.5rem);padding-bottom:clamp(2.5rem,5vw,3.5rem)}
.footer-brand__logos{display:flex;gap:1.1rem;margin-bottom:1.35rem}
.footer-brand__logos img{width:3.6rem;height:3.6rem;object-fit:contain;filter:invert(1) brightness(1.6) contrast(.8);opacity:.75}
.footer-brand__name{font-family:var(--f-display);font-size:1.5rem;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:#f4ecd9;margin-bottom:.5rem}
.footer-brand__baseline{font-size:.68rem;font-weight:500;letter-spacing:var(--track-xwide);text-transform:uppercase;color:#a2977f}
.footer-brand p{margin-top:1.35rem;font-size:.88rem;line-height:1.66;max-width:32ch;color:#a89d86}
.footer-col h3{font-size:.68rem;font-weight:600;letter-spacing:var(--track-xwide);text-transform:uppercase;
  color:#e4d9c0;margin-bottom:1.15rem}
.footer-col li{margin-bottom:.7rem;font-size:.9rem;line-height:1.5}
.footer-col a{display:inline-flex;align-items:center;gap:.5rem}
.footer-col svg{width:.9rem;height:.9rem;opacity:.7;flex:none}
.footer-bottom{border-top:1px solid rgba(207,198,179,.16);padding-block:1.6rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;
  font-size:.76rem;color:#8f8672}
.footer-bottom ul{display:flex;flex-wrap:wrap;gap:1.5rem}
/* Le fleuron du pied de page a été retiré : à 1,1 rem et en teinte très
   claire, ses quatre pétales se lisaient comme un « + » posé au milieu de
   nulle part. Le filet du bandeau de bas de page suffit à séparer. */

/* ------------------------------------------- variantes de composition */
.grid--split{gap:clamp(2rem,5vw,4.5rem);align-items:start}
.grid--split-center{gap:clamp(2rem,5vw,4rem);align-items:center}
/* .grid-2 est un auto-fit de 20 rem : sur 1084 px de contenu il tient TROIS
   colonnes. Avec quatre cartes, la quatrième reste donc seule en bas à gauche
   et la section paraît décentrée. Ici le nombre d'éléments est connu et pair :
   deux colonnes, deux rangées pleines. */
.grid--paire{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.grid--paire{grid-template-columns:1fr}}
.grid--contact{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:900px){
  .grid--contact{grid-template-columns:1fr}
  /* Sur téléphone, le numéro passe DEVANT le formulaire. Il était relégué
     derrière une trentaine de champs, alors que c'est justement sur mobile
     qu'appeler est le geste le plus simple — et qu'un appui suffit. */
  .contact-aside--priorite{order:-1}
}

.prose--center{margin-inline:auto;text-align:center}
.prose--auto{margin-inline:auto}
.prose--full{max-width:none}
.note-inline{font-size:.88rem;max-width:52rem;margin-inline:auto}
.diplomas--stack{grid-template-columns:1fr}
.pill-list--center{justify-content:center}

.card--stack{display:flex;flex-direction:column}
.card__head{display:flex;align-items:flex-start;gap:1.25rem;margin-bottom:1.1rem}
.card__head .card__num{margin-bottom:.35rem}
.card__head .card__title{margin-bottom:0}
.card__foot{margin-top:auto;padding-top:1.5rem}
.card-medallion--inline{margin-bottom:0}
.card-medallion--sm{margin-bottom:0;width:2.9rem;height:2.9rem}

.frame__label{
  display:block;margin-bottom:.6rem;font-style:normal;font-family:var(--f-sans);
  font-size:.7rem;font-weight:600;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--gold-deep);
}
.frame__note strong{color:var(--ink-2)}

/* Variante « titre + phrase » : le pictogramme se cale sur la première ligne.
   Plus de marge basse — ces puces ne s'empilent plus dans un panneau, elles
   vivent dans une grille dont l'écart règle seul l'espacement ; la marge n'y
   ajouterait qu'un blanc sous la dernière rangée. */
.tag-item--stack{align-items:flex-start}
.tag-item--stack svg{margin-top:.15rem}
.tag-item__title{display:block;color:var(--ink)}
.tag-item__text{display:block;font-weight:400;color:var(--ink-3);font-size:.84rem;margin-top:.15rem}
.contact-item__value--sm{font-size:1rem}
.section-head--center.eyebrow-only{margin-bottom:1.5rem}

/* ------------------------------------------- prolonger l'échange
   La page d'après-session est atteinte au sortir d'une salle, presque
   toujours au téléphone : les cibles de saisie y sont plus généreuses
   que sur le reste du site, et la provenance est rappelée d'emblée. */
.origin-tag{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.25rem;
  padding:.5rem 1rem;border:1px solid var(--rule);border-radius:999px;background:var(--paper-card);
  font-size:.72rem;font-weight:500;letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--ink-3)}
.origin-tag svg{width:1.05rem;height:1.05rem;flex:none;color:var(--gold-deep)}

.field__opt{font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-muted)}

.choices{display:grid;gap:.85rem;border:0;padding:0;margin:0}
.choices > legend{padding:0;margin-bottom:.25rem;font-size:.72rem;font-weight:500;
  letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--ink-3)}
.choices .req{color:var(--gold-deep)}
.choice{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.15rem;cursor:pointer;
  background:var(--paper-card);border:1px solid var(--rule);border-radius:var(--radius);
  transition:border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease)}
.choice:hover{border-color:var(--rule-strong);background:#fff}
.choice input{width:1.15rem;height:1.15rem;margin-top:.15rem;flex:none;accent-color:var(--gold-deep)}
.choice:has(input:checked){border-color:var(--gold);background:#fff;box-shadow:0 0 0 2px rgba(158,131,71,.1)}
.choice:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.choice strong{display:block;font-size:.95rem;font-weight:600;color:var(--ink)}
.choice__text{display:block;margin-top:.2rem;font-size:.85rem;line-height:1.55;color:var(--ink-3)}
.choices--error .choice{border-color:#c8877e}

.btn-row--center{justify-content:center}

/* ------------------------------------------------------------- utilitaires */
.center{text-align:center}
.mt-0{margin-top:0}
.mt-1{margin-top:.75rem}
.mt-2{margin-top:1.5rem}
.mt-3{margin-top:2.25rem}
.mt-4{margin-top:3rem}
.mb-2{margin-bottom:1.5rem}
.mb-3{margin-bottom:2.25rem}
.stack > * + *{margin-top:1.25rem}
.relative{position:relative}
.empty-state{text-align:center;padding:clamp(3rem,7vw,5rem) 1rem;color:var(--ink-muted)}
.empty-state svg{width:2.75rem;height:2.75rem;margin:0 auto 1.25rem;color:var(--rule-strong)}
.empty-state h3{font-family:var(--f-display);font-size:1.5rem;color:var(--ink);margin-bottom:.6rem;font-weight:500}

/* ------------------------------------------------------- mouvements
   RÈGLE À NE PAS ENFREINDRE ICI : l'état masqué est porté par l'image-clé
   `from`, JAMAIS par la règle de base, et le remplissage est `backwards`.
   L'inverse — opacity:0 dans la règle de base — laisserait l'élément
   invisible une fois l'animation terminée, puisque `backwards` ne conserve
   que l'état d'AVANT le début. Un bandeau entièrement vide, en somme. */
@keyframes aakMonte{from{opacity:0;translate:0 14px}to{opacity:1;translate:none}}
@keyframes aakLigne{from{translate:0 106%}  to{translate:0 0}}
@keyframes aakTrace{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (scripting: enabled) and (prefers-reduced-motion:no-preference){

  /* Le titre sort de presse, ligne par ligne, derrière un bord net. */
  .hero__ligne > span{animation:aakLigne 900ms var(--e-ink) backwards}
  .hero__ligne:nth-child(1) > span{animation-delay:.25s}
  .hero__ligne:nth-child(2) > span{animation-delay:.34s}
  .hero__ligne:nth-child(3) > span{animation-delay:.43s}
  .hero__ligne:nth-child(4) > span{animation-delay:.52s}
  .hero__ligne:nth-child(5) > span{animation-delay:.61s}
  .hero__ligne:nth-child(6) > span{animation-delay:.70s}

  /* Ombrelle, filet, sous-titre, boutons : ciblage PAR CLASSE.
     L'ancien nth-child(1..5) tombait sur .hero__sub dès qu'un rédacteur
     vidait l'ombrelle depuis le back-office et lui appliquait alors un
     écrasement horizontal — un bug déclenchable depuis l'espace de gestion. */
  .hero__body .eyebrow   {animation:aakMonte var(--d-4) var(--e-out) .10s backwards}
  .hero__body .hero__rule{animation:aakTrace var(--d-3) var(--e-ink) .52s backwards}
  .hero__body .hero__sub {animation:aakMonte var(--d-4) var(--e-out) .62s backwards}
  .hero__body .btn-row   {animation:aakMonte var(--d-4) var(--e-out) .74s backwards}
  /* Le filet se trace depuis son point d'ancrage : centré, il doit s'ouvrir
     par le milieu et non pousser vers la droite. Vaut pour les DEUX bandeaux
     centrés — cf. « l'axe des deux bandeaux centrés ». */
  .hero--simple .hero__rule,
  .hero--wide   .hero__rule{transform-origin:center}
}

/* Le passage sous presse : LE geste coûteux du premier écran. Unique, borné,
   au-delà de 901 px seulement, et rien d'autre ne tourne pendant sa durée.

   La zone non encore révélée est à 16 % d'alpha et non à 0 : la gravure est
   donc déjà substantiellement peinte à la première image, et le LCP n'est
   pas sacrifié à une animation décorative — ce que faisait l'ancienne entrée
   (opacity:0 pendant 180 ms puis 1,1 s de fondu, sur l'image justement
   marquée fetchpriority="high").

   On anime mask-position et non les arrêts du dégradé : le masque n'est donc
   pas régénéré à chaque image. */
@keyframes aakPresse{
  from{-webkit-mask-position:118% 0;mask-position:118% 0}
  to  {-webkit-mask-position:0% 0;  mask-position:0% 0}
}
@media (min-width:901px) and (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .hero__art img{
    -webkit-mask-image:linear-gradient(101deg,#000 0 40%,rgba(0,0,0,.62) 50%,rgba(0,0,0,.16) 60%,rgba(0,0,0,.16) 100%);
            mask-image:linear-gradient(101deg,#000 0 40%,rgba(0,0,0,.62) 50%,rgba(0,0,0,.16) 60%,rgba(0,0,0,.16) 100%);
    -webkit-mask-size:240% 100%;   mask-size:240% 100%;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    animation:aakPresse var(--d-presse) var(--e-ink) 140ms backwards;
  }
}
/* Hors de ce @media, AUCUNE propriété mask-* n'est déclarée : la gravure est
   pleine d'encre dès la première image. Coupé à la source, jamais raccourci. */

/* Couche compositrice posée uniquement pendant la traversée du plan. */
.est-en-vue .hero__art img,
.est-en-vue .figure-band img,
.est-en-vue .frise__gravure{will-change:translate}

/* ------------------------------------------------- le trait à la plume
   Les dix médaillons d'univers ne s'affichent plus : ils s'écrivent.

   MÉCANISME — stroke-dasharray et stroke-dashoffset sont des propriétés
   SVG HÉRITÉES. Posées sur le <svg> hôte, elles traversent l'arbre fantôme
   du <use>, exactement comme le fait déjà stroke:currentColor. On n'a donc
   RIEN à modifier dans views/partials/sprite.php, et pas un octet de JS.

   Le tracé est accroché à l'entrée de la carte, qui porte déjà .reveal :
   il hérite ainsi de la cascade par rangée sans avoir à la recalculer.

   Repli gracieux : là où la longueur du chemin dépasse 110, l'icône se
   dessine ; là où elle est plus courte, elle apparaît d'un trait plein.
   Dans les deux cas le résultat est une icône complète et lisible. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .card--link .card-medallion svg,
  .feature__item .feature__icon svg{
    stroke-dasharray:110;
    stroke-dashoffset:110;
  }
  .card--link.is-in .card-medallion svg,
  .feature__item.is-in .feature__icon svg{
    stroke-dashoffset:0;
    transition:stroke-dashoffset var(--d-5) var(--e-ink) calc(var(--rv-d,0ms) + 180ms);
  }
}

/* Apparition au défilement.
   Le contenu est visible par défaut : l'animation n'est activée que si le
   navigateur exécute bien JavaScript, sinon un blocage de script rendrait
   une partie de la page invisible.

   Deux corrections de fond par rapport à la version précédente.

   (a) On est passé de `transition` à `animation`. L'ancienne règle
       `.reveal{transition:opacity .7s,transform .7s}` avait la même
       spécificité que .card, .brand-card, .post-card, .testimonial et
       .webinar, mais elle était déclarée plus loin dans le fichier : elle
       écrasait donc entièrement leur `transition-property`. Sur l'accueil,
       la majorité des blocs avait un survol cassé — bordure et ombre
       claquant sans transition.

   (b) Le retard de cascade est porté par --rv-d et consommé en
       animation-delay, au lieu d'un transition-delay écrit en ligne et
       jamais retiré, qui faisait ensuite attendre au survol autant que
       l'entrée avait attendu.

   Et on est passé de `transform` à `translate` : le canal des entrées est
   désormais physiquement distinct de celui des survols, les deux ne peuvent
   plus s'écraser. */
/* L'état masqué est conditionné à .js-anim, posée par site.js à sa première
   instruction. (scripting: enabled) ne dit que ceci : « le navigateur sait
   exécuter du script ». Il ne dit pas que NOTRE script s'est chargé ni qu'il
   est allé au bout. Un fichier manquant, un octet corrompu en cache, une
   extension trop zélée, et toutes les sections partaient à opacity:0 sans
   que rien ne vienne jamais les rallumer. */
.reveal{opacity:1}
@media (scripting: enabled){
  .js-anim .reveal{opacity:0;translate:0 var(--m-3)}
  .js-anim .reveal[data-rv="left"] {translate:calc(-1 * var(--m-3)) 0}
  .js-anim .reveal[data-rv="right"]{translate:var(--m-3) 0}
  .js-anim .reveal.is-in{animation:aakPose var(--d-4) var(--e-out) var(--rv-d,0ms) both}
  /* libération de la couche compositrice une fois l'entrée jouée */
  .js-anim .reveal.rv-done{animation:none;opacity:1;translate:none}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;translate:none;animation:none}
}
@keyframes aakPose{from{opacity:0}to{opacity:1;translate:none}}

/* ==================================================================
   Matière du papier — composition
   ------------------------------------------------------------------
   Ce bloc doit rester EN FIN DE FICHIER : les règles de surface plus
   haut emploient la forme courte `background:`, qui remet
   background-image à none. En passant après elles, on ne redéfinit
   que l'image et le mode de fusion ; la couleur posée plus haut est
   conservée.

   Les surfaces à dégradé rappellent leur dégradé après le grain :
   c'est le seul moyen de composer les deux dans une même propriété.
   ================================================================== */
body,
.section--paper,.card,.brand-card,.testimonial,.post-card,
.contact-panel,.figure-band,.breadcrumb,.topics .topic{
  background-image:var(--grain-img);
  background-blend-mode:multiply;
}
/* Le relevé : grain, plus les deux filets de frontière qui s'éteignent avant
   les bords. Aucune ligne ne referme donc la section comme une boîte. */
.section--releve{
  background-image:var(--grain-img),
    linear-gradient(90deg,transparent,var(--rule) 18%,var(--rule) 82%,transparent),
    linear-gradient(90deg,transparent,var(--rule) 18%,var(--rule) 82%,transparent);
  background-size:auto,100% 1px,100% 1px;
  background-position:0 0,0 0,0 100%;
  background-repeat:repeat,no-repeat,no-repeat;
  background-blend-mode:multiply,normal,normal;
}
/* .stats a quitté cette liste : le relevé n'a plus de fond propre, le grain
   y serait peint une seconde fois par-dessus celui de la section. */
.section--warm{
  background-image:var(--grain-img),linear-gradient(180deg,var(--paper-warm),var(--paper-tint));
  background-blend-mode:multiply,normal;
}
.band{
  background-image:var(--grain-img),
    linear-gradient(150deg,var(--paper-deep),var(--paper-warm) 55%,var(--paper-tint));
  background-blend-mode:multiply,normal;
}
.frame{
  background-image:var(--grain-img);
  background-blend-mode:multiply;
}
/* Sur l'encre du pied de page, le grain doit éclaircir et non assombrir. */
.site-footer{
  background-image:var(--grain-img);
  background-blend-mode:screen;
}

/* impression */
@media print{
  .site-header,.site-footer,.band,.btn,.nav-toggle,.orn-corner,.hero__art{display:none!important}
  body{background:#fff;color:#000;font-size:11pt;background-image:none}
  .section{padding-block:1.5rem}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}