/* Polices hébergées sur le site depuis le 2026-10-02 (audit technique) : plus de
Google Fonts, donc plus de serveur tiers sur le chemin du premier affichage. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/fonts/montserrat-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:'Montserrat';font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/fonts/montserrat-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:'PT Serif';font-style:italic;font-weight:700;font-display:swap;src:url('/assets/fonts/ptserif-italique-700-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:'PT Serif';font-style:italic;font-weight:700;font-display:swap;src:url('/assets/fonts/ptserif-italique-700-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}
/* =========================================================================
ARCHI IA · feuille de style du site
Fidèle à marque/03-identite-visuelle.md, dont rien n'est réinventé ici.
Le principe de base, article 1 : fond blanc, texte noir, le bordeaux
accentue, le rose ponctue rarement. La couleur est un événement.
Les marqueurs de marque sont ceux de la charte, pas des inventions :
le filet bordeaux de 3 px sur 64, les dégradés linéaire et radial, les
rayons de 4 et 8 px. La trame technique de 48 px a été retirée sur demande
de Benoît le 2026-08-31 : à l'écran elle caricaturait le métier. La charte
`marque/03-identite-visuelle.md` la mentionne encore, à arbitrer.
========================================================================= */
/* Les polices sont chargées par un , et suffisent aux lecteurs d'écran.
Verrou : outils/verifier_seo.py refuse une page qui le remet. */
/* Révélations au défilement. Fondu d'opacité, hors du champ du critère
WCAG 2.3.3 ; la translation n'est ajoutée que si elle est acceptable. */
.js [data-vu]{opacity:0;transition:opacity .38s ease,transform .38s cubic-bezier(.22,.61,.36,1)}
.js.mvt [data-vu]{transform:translateY(12px)}
.js [data-vu].vu{opacity:1;transform:none}
.js [data-vu][data-d="1"]{transition-delay:.1s}
.js [data-vu][data-d="2"]{transition-delay:.2s}
.js [data-vu][data-d="3"]{transition-delay:.3s}
.js [data-vu][data-d="4"]{transition-delay:.4s}
.js [data-vu][data-d="5"]{transition-delay:.5s}
@media (prefers-reduced-motion:reduce){
.js [data-vu]{opacity:1;transform:none;transition:none}
}
@media print{
.entete,.nav{display:none}
.plein,.radial{background:none !important;color:#000 !important;border:2px solid #000}
.plein p,.plein h2{color:#000 !important}
}
/* La bande de matières.
Le comparateur avant et après vivait juste au dessus. Il a quitté la page
d'accueil et le book le 9 septembre 2026, son encadrement avec lui. */
/* La rangée de déclinaisons : un bandeau d'une seule ligne, comme une planche
d'échantillons de matière. Elle ne sert pas à étudier chaque image, le grand
comparateur au-dessus s'en charge, elle sert à montrer l'étendue d'un coup
d'œil et à ne pas manger la page.
`grid-auto-flow:column` force la ligne unique. La colonne ne descend jamais
sous 64 px : au-delà de ce que l'écran peut tenir, le bandeau défile
latéralement plutôt que de rendre les vignettes illisibles. Ce sont des
images sans poignée, donc aucun conflit de geste au doigt. */
.mat{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(112px,1fr);
gap:2px;border-radius:var(--r-carte);overflow-x:auto;overscroll-behavior-x:contain;
scrollbar-width:thin}
.mat img{width:100%;aspect-ratio:1/1;object-fit:cover}
/* Raccord des pages intérieures au vocabulaire de la charte.
Les planches du book, le triptyque, le diptyque et leurs étiquettes ont été
retirés le 9 septembre 2026 : le book est devenu un semis d'images
flottantes, avec sa feuille propre dans le de `book.html`. */
.etapes-feuille{list-style:none;padding:0;counter-reset:e;margin:1.5rem 0 0;display:block}
.etapes-feuille li{counter-increment:e;border-top:3px solid var(--bx);padding:1rem 0;margin:0;max-width:none}
.etapes-feuille li::before{content:counter(e,decimal-leading-zero);display:block;
font-size:var(--t-leg);font-weight:800;letter-spacing:.1em;color:var(--bx);margin-bottom:.3rem}
.etapes-feuille strong{display:block;margin-bottom:.2rem}
.avert{border-left:3px solid var(--bx);background:var(--bx-50);padding:1.2rem 1.4rem;
border-radius:0 var(--r-carte) var(--r-carte) 0}
.avert p{max-width:none;margin:0}
.avert p + p{margin-top:.6rem}
.acompleter{background:var(--bx-50);border-bottom:2px solid var(--bx);padding:.1em .45em;
font-weight:700;color:var(--bx)}
.feuille{max-width:44rem;margin-inline:auto}
.cartouche{display:flex;flex-wrap:wrap;border:1px solid #e6e6e6;border-radius:var(--r-carte);overflow:hidden}
.cartouche div{padding:.8rem 1.1rem;flex:1 1 auto;border-right:1px solid #e6e6e6}
.cartouche div:last-child{border-right:0}
.cartouche dt{font-size:var(--t-leg);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-txt)}
.cartouche dd{margin:.2rem 0 0;font-size:var(--t-petit)}
.liste{list-style:none;margin:0;padding:0}
.liste li{padding:.7rem 0;border-bottom:1px solid #e6e6e6;max-width:none;font-size:var(--t-petit)}
.liste li:last-child{border-bottom:0}
.imprimer{margin:1.5rem 0}
@media print{ .imprimer{display:none} }
/* Le bloc de l'offre (ex-appel aux agences pilotes, retiré le 2026-10-02).
Il se distingue sans crier : fond rose très clair de la charte, filet
bordeaux à gauche, rayon 8 px. */
.appel{background:var(--bx-50);border-left:3px solid var(--bx);
border-radius:0 var(--r-carte) var(--r-carte) 0;
padding:clamp(1.5rem,4vw,2.75rem)}
.appel .pastilles li{font-size:var(--t-petit)}
.appel .actions{margin-bottom:0}
/* L'entrée « Notre offre » du menu, en bordeaux : c'est l'étape suivante. */
.nav-offre{color:var(--bx)}
.nav-offre::after{background:var(--bx)}
/* Les portraits restent sur blanc, comme les photos fournies. Le dégradé
radial appartient aux bannières, pas aux vignettes du site. */
/* Pas de contour autour des photos : elles sont détourées sur blanc, un filet
gris les enfermerait dans une vignette. Le nom revient sur un bandeau
bordeaux, qui est le seul aplat de la section. */
.portraits figure{background:var(--blanc);border:0}
.portraits figcaption{color:var(--blanc);background:var(--bx);border-top:0}
/* La page courante se signale dans le menu, sinon on ne sait plus où on est. */
.nav a.actif{color:var(--bx)}
.nav a.actif::after{transform:scaleX(1);transform-origin:left}
/* =========================================================================
ANIMATIONS PILOTÉES PAR LE DÉFILEMENT
`animation-timeline` n'est pas Baseline : MDN le classe en disponibilité
limitée, et Firefox le garde derrière un drapeau. C'est donc une couche
en plus, jamais une dépendance. Tout ce qui suit est écrit pour que la
page soit finie sans, et seulement plus vivante avec.
Rien ne démarre tout seul : c'est le défilement qui mène, donc le critère
WCAG 2.2.2 est hors sujet. La translation, elle, relève du critère 2.3.3,
d'où le garde-fou sur le mouvement réduit.
========================================================================= */
@supports (animation-timeline:scroll()){
@media (prefers-reduced-motion:no-preference){
/* La lumière traverse le mur pendant que la section défile. C'est le
seul mouvement des aplats, et il est lent. */
.plein::before{animation:plein-lumiere linear both;
animation-timeline:view();animation-range:cover 0% cover 100%}
@keyframes plein-lumiere{
from{transform:translate3d(-5%,-4%,0) scale(1.06)}
to{transform:translate3d(7%,6%,0) scale(1.14)}
}
/* Le filet de progression sous l'en-tête. Il dit où on en est dans la
page : un mouvement qui informe vaut mieux qu'un mouvement qui décore. */
.entete::after{content:"";position:absolute;left:0;bottom:-1px;
height:2px;width:100%;background:var(--bx);
transform:scaleX(0);transform-origin:left;
animation:progression linear both;animation-timeline:scroll(root block)}
@keyframes progression{ to{transform:scaleX(1)} }
}
}
/* =========================================================================
RYTHME ET MOUVEMENT · 31 août 2026
Deux constats de la recette ont produit ce bloc.
1. Les onze sections ouvraient toutes sur la même petite capitale, le même
titre et le même filet. Les corps étaient variés, huit formes
distinctes ; c'est l'entrée qui sonnait mécanique. Quatre sections
pivots gardent l'ouverture complète, les autres entrent autrement.
2. Le mouvement se limitait à un fondu à l'apparition. Les références
regardées avec Benoît, chatflowai.co et remakeit.io, sont sombres et
très logicielles, donc leur allure ne se reprend pas ici : la charte
impose le fond blanc. Ce qui se reprend est leur grammaire, un
mouvement lié au défilement plutôt qu'à une minuterie. Le doigt sur la
molette pilote, donc rien ne tourne en boucle et le critère WCAG 2.2.2
ne s'applique toujours pas.
========================================================================= */
/* ---------- 1 · La lecture au défilement --------------------------------
Le titre part en gris très clair et se remplit de noir mot après mot, au
rythme du défilement. C'est une variation d'opacité sur un texte présent
dans le document : il reste sélectionnable, lu par un lecteur d'écran, et
entièrement noir dès que la section est en place.
Réservé aux trois titres qui portent la page. Répandu partout, l'effet
redeviendrait le gabarit qu'on cherche à casser. */
.lire{--p:0}
.js .lire .m{opacity:max(.22, calc(var(--p) * var(--n) - var(--i)))}
@media (prefers-reduced-motion:reduce){ .js .lire .m{opacity:1} }
/* ---------- 2 · Le trait de progression ---------------------------------
Les quatre étapes de la méthode portent une ligne verticale qui se remplit
à mesure qu'on descend. C'est la ligne de rappel d'une coupe, pas une
barre de chargement : elle mesure la lecture, elle n'annonce pas une
attente. */
/* LE TRAIT DE LA MÉTHODE.
Quatre filets séparés en tête de chaque étape se lisaient comme quatre
objets. C'est une seule progression : un seul trait, continu d'un bout à
l'autre des quatre colonnes, qui avance au fil du défilement. Les quatre
repères posés dessus marquent les étapes, comme les graduations d'une
ligne de cote, et prennent le bordeaux quand la lecture les franchit.
Le trait continu n'existe qu'à partir du moment où les quatre étapes sont
sur une seule ligne. En dessous elles se placent en deux colonnes ou en
une : un trait horizontal ne relierait plus rien, donc chaque étape garde
son propre filet, qui se remplit à son tour. */
.js .etapes li{border-top-color:var(--gris-bord);position:relative}
.js .etapes li::after{content:"";position:absolute;left:0;right:0;top:-3px;
height:3px;background:var(--bx);transform:scaleX(var(--r,0));
transform-origin:left;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
@media (min-width:68em){
.js .etapes{position:relative;padding-top:1.6rem;margin-top:2rem}
.js .etapes li{border-top:0;padding-top:0}
/* La ligne, en deux couches : la graduation grise, puis le remplissage
bordeaux piloté par la progression du défilement. */
.js .etapes::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:var(--gris-bord)}
.js .etapes::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;
background:var(--bx);transform:scaleX(var(--p,0));transform-origin:left}
/* Le repère de chaque étape, posé sur la ligne. Il pâlit tant que la
lecture ne l'a pas franchi : une opacité pilotée par la même variable
que le reste, donc aucune classe supplémentaire à poser. */
.js .etapes li::after{content:"";left:0;right:auto;top:-1.6rem;
width:2px;height:1.6rem;background:var(--bx);
transform:none;opacity:calc(.16 + var(--r,0) * .84);
transition:opacity .45s ease}
}
@media (prefers-reduced-motion:reduce){
.js .etapes li{border-top-color:var(--bx)}
.js .etapes li::after{display:none}
.js .etapes::after{transform:scaleX(1)}
}
/* ---------- 3 · Les ouvertures de section -------------------------------
Cinq formes, pour que la page cesse d'entrer onze fois de la même façon.
La forme « chiffrée », essayée le 31 août, est retirée : ses quatre filets
tombaient juste après les quatre filets des étapes, et deux motifs de
lignes d'affilée se lisaient comme un seul. */
/* a · L'ouverture pivot. Petite capitale, titre, filet. Elle est réservée
aux quatre moments qui structurent la page : ce qu'on fait, la limite,
pourquoi nous, et la conversion. Ailleurs, elle est interdite. */
/* b · En regard. Le titre tient la colonne de gauche, le texte celle de
droite. Aucun surtitre : le titre se suffit. */
.ouv-regard{display:grid;gap:1.25rem 3rem;grid-template-columns:1fr;align-items:start}
@media (min-width:56em){
.ouv-regard{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem 4rem}
.ouv-regard>*{margin:0}
}
.ouv-regard h2{max-width:12em}
.ouv-regard .chapo{margin:0;max-width:32em}
/* c · Nue. Le titre seul, plus grand, sans surtitre ni filet. Le blanc
autour fait le travail que le filet faisait ailleurs. */
.ouv-nue h2{font-size:var(--t-h1);max-width:13em}
.ouv-nue{padding-block:.5rem 0}
/* d · Comptée. Un nombre en vis-à-vis du titre, à l'échelle du display.
Il dit combien il y en a avant qu'on ait commencé à lire. */
.ouv-compte{display:flex;align-items:baseline;gap:clamp(.9rem,2.4vw,1.8rem);flex-wrap:wrap}
.ouv-compte .nb{font-size:var(--t-display);font-weight:900;line-height:.9;
letter-spacing:-.04em;color:var(--bx);font-variant-numeric:tabular-nums}
.ouv-compte h2{max-width:13em;flex:1 1 16rem}
.ouv-compte .nb-lg{display:block;font-size:var(--t-leg);font-weight:700;
letter-spacing:.1em;text-transform:uppercase;color:var(--gris-txt);margin-top:.5rem}
/* e · Interrogée. Le titre est une question, et un filet court le précède
sur la même ligne au lieu de le suivre. */
.ouv-question{display:flex;align-items:baseline;gap:1rem}
.ouv-question::before{content:"";flex:0 0 auto;width:32px;height:3px;
background:var(--bx);transform:translateY(-.35em)}
.ouv-question h2{max-width:16em}
/* ---------- 4 · Le rythme vertical --------------------------------------
Toutes les sections respiraient de la même façon. Une page dont chaque
intervalle est identique se lit comme un document généré, même quand son
contenu ne l'est pas. */
.sec--ample{padding-block:calc(var(--pas) * 1.45)}
/* La première section après l'accroche pleine page. C'est le seul endroit où
le fond change sous les yeux du lecteur, donc c'est celui qui demande le
plus d'air : 70 px de blanc mesurés avant, la moitié de la moyenne. */
.sec--ouverture{padding-top:calc(var(--pas) * 1.6)}
.sec--suite{padding-top:calc(var(--pas) * .8)}
/* =========================================================================
LA PLANCHE · 31 août 2026, second passage
Reproche de Benoît, et il est juste : « très proche d'un PDF animé », et
« au bout du 3e bandeau bordeaux on est déjà lassé ». Le site empilait des
sections bien composées sans qu'aucun objet ne tienne l'ensemble.
Ce qui le tient maintenant vient du métier, pas de la décoration : une
planche de rendu. Elle est cotée, et elle se signe par un cartouche. Ce
sont les instruments du dessin d'architecture, pas son imitation. La coupe
avait été refusée au retour 3 parce qu'elle illustrait ; ceux-là servent.
Une réglette de repérage a été essayée dans la marge gauche, puis retirée
à la demande de Benoît le 31 août : la barre du haut fait déjà ce travail,
et deux navigations pour onze sections en font une de trop.
========================================================================= */
/* ---------- 2 · Le moment de bascule ------------------------------------
La limite est le point culminant de la page, et le seul endroit où l'on
n'a rien à ajouter. Elle devient une pleine page presque vide, éclairée
par le dégradé radial des couvertures. Elle ne ressemble donc pas aux
deux autres aplats, et le troisième bandeau cesse d'en être un. */
/* Sur un téléphone, une pleine page de bascule coûte un écran entier pour
une phrase. Elle reste un temps d'arrêt, mais mesuré. */
.bascule{min-height:min(60vh,26rem);display:flex;align-items:center;
background:radial-gradient(circle at 50% 42%,var(--bx-400) 0%,var(--bx) 42%,var(--bx-700) 100%)}
@media (min-width:56em){ .bascule{min-height:min(78vh,44rem)} }
.bascule .wrap{width:100%;text-align:center}
.bascule h2{margin-inline:auto;font-size:clamp(2.2rem,1.3rem + 3.6vw,4rem);line-height:1.02}
.bascule p{margin-inline:auto;text-align:center}
.bascule .filet{margin-inline:auto}
.bascule .leg{text-align:center}
/* ---------- 3 · Le circuit des six raisons ------------------------------
Neuvième forme, et la courbe s'en va. Benoît : « des traits un peu plus
fins en pointillés comme archi qui relient, qui sont très courts entre
chaque module. »
C'est juste, et c'est une vraie convention de dessin. Sur un plan, le
pointillé fin ne décore pas : il relie ce qui n'est pas dessiné en plein.
Une longue courbe en S était une illustration ; quatre segments courts
sont un circuit. Le SVG et son calcul de géométrie disparaissent avec
elle, ce qui retire aussi une centaine de lignes de script.
Le pointillé est fait au dégradé répété plutôt qu'en `dashed` : le
`border: dashed` du navigateur donne des tirets longs et irréguliers, là
où le dégradé donne un pas exact, 2 px de trait pour 4 px de vide. */
.tete-centre{text-align:center;max-width:32rem;margin-inline:auto}
.tete-centre h2{max-width:none;margin-top:.6rem;
font-size:clamp(1.6rem,1.15rem + 2vw,2.6rem);line-height:1.1;letter-spacing:-.025em}
.circuit{position:relative;display:grid;grid-template-columns:1fr;gap:1rem;
margin-top:2.5rem}
@media (min-width:48em){
.circuit{grid-template-columns:repeat(2,1fr);
column-gap:clamp(2.5rem,5vw,4.5rem);row-gap:1.6rem;align-items:start}
/* Le tracé est le premier enfant : les cellules sont les enfants 2 à 7, et
celles de la colonne de droite sont les impaires. Elles descendent d'un
cran, ce qui donne au serpent son ondulation. */
.circuit > .cellule:nth-child(2n+1){margin-top:2rem}
}
.cellule{position:relative;
display:flex;align-items:flex-start;gap:1rem;
padding:1.1rem 1.25rem 1.15rem;border-radius:var(--r-carte);
background:rgba(77,20,20,.42);border:1px solid rgba(255,255,255,.20);
translate:0 var(--dy,0px);
transition:border-color .3s,box-shadow .3s,background-color .3s,
opacity .38s ease,translate .38s cubic-bezier(.22,.61,.36,1),
scale .3s cubic-bezier(.22,.61,.36,1)}
.cellule:hover{scale:1.03;border-color:rgba(255,255,255,.46);
background:rgba(77,20,20,.6);box-shadow:0 18px 44px rgba(23,6,6,.4);z-index:2}
/* Le serpent, en pointillés. Benoît voulait garder la courbe organique et
le pointillé : les deux se combinent, mais pas naïvement. `dasharray` sert
déjà à faire les points, il ne peut donc pas servir en même temps à
dévoiler le tracé par `dashoffset`, comme le faisait la version pleine.
Le dévoilement passe donc par un masque : un rectangle qui grandit vers le
bas au fil du défilement et ne laisse voir du tracé que ce qu'il couvre.
Les points restent des points, et la courbe se dessine quand même. */
.serpent{position:absolute;inset:0;width:100%;height:100%;
overflow:visible;pointer-events:none;z-index:0}
.serpent-trame{fill:none;stroke:rgba(255,255,255,.20);stroke-width:1.5;
stroke-linecap:round;stroke-dasharray:1.5 5}
.serpent-fait{fill:none;stroke:var(--bx-100);stroke-width:1.5;
stroke-linecap:round;stroke-dasharray:1.5 5}
/* Chaque liaison est un groupe à part, ce qui permet de la déplacer seule.
Au passage de la souris elle s'écarte de quelques pixels, puis revient :
c'est la transition qui fait le retour, sans une ligne de script de plus.
Rien ne bouge tout seul, la main pilote. */
/* Aucune transition ici : la courbe est redessinée à chaque image par le
script, et le retour au repos est une détente amortie, pas une
interpolation CSS. Un `transition` sur le groupe ferait double emploi et
traînerait derrière le calcul. */
.js .circuit .cellule{opacity:0}
.js .circuit .cellule.posee{opacity:1}
.cellule .rg{flex:none;width:2.2rem;height:2.2rem;border-radius:6px;
background:rgba(255,255,255,.14);color:var(--bx-100);
display:flex;align-items:center;justify-content:center;
font-size:var(--t-leg);font-weight:900;letter-spacing:.02em;
font-variant-numeric:tabular-nums}
.cellule h3{font-size:var(--t-h4);font-weight:800;line-height:1.2;
letter-spacing:.04em;text-transform:uppercase;margin:0 0 .3rem;max-width:none;
color:var(--blanc)}
.cellule p{font-size:var(--t-petit);color:rgba(255,255,255,.86);margin:0;max-width:32em}
/* ---------- 3 ter · Le flottement au défilement -------------------------
Rien ne bouge tout seul : le décalage est une fonction de la position dans
la fenêtre, donc du doigt sur la molette. Quelques pixels au plus, et deux
sens opposés pour que l'ensemble respire au lieu de glisser en bloc. */
.flotte{translate:0 var(--dy,0px);will-change:translate}
@media (prefers-reduced-motion:reduce){
.cellule,.flotte{translate:none !important;transition:none}
.cellule:hover{scale:1}
.js .circuit .cellule{opacity:1}
.circuit > .cellule::after,.circuit > .cellule::before{opacity:.55 !important}
}
/* ---------- 3 bis · Le grand nombre en marge ----------------------------
La demande finale se lisait comme un paragraphe de plus. Le nombre sort
dans la marge gauche, à l'échelle d'un chiffre de planche, et il porte
sous lui ce qu'il compte et ce qu'il coûte. */
.appel-tete{display:grid;gap:1.1rem 2.75rem;grid-template-columns:1fr;align-items:start}
@media (min-width:52em){ .appel-tete{grid-template-columns:auto minmax(0,1fr)} }
.grand-nb{margin:0;line-height:.8;max-width:none}
.grand-nb .n{display:block;font-size:clamp(5.5rem,3rem + 11vw,11rem);font-weight:900;
line-height:.78;letter-spacing:-.06em;color:var(--bx);font-variant-numeric:tabular-nums}
.grand-nb .quoi{display:block;margin-top:.5rem;font-size:var(--t-leg);font-weight:800;
letter-spacing:.14em;text-transform:uppercase;color:var(--noir)}
.grand-nb .prix{display:block;margin-top:.15rem;font-family:var(--serif);
font-style:italic;font-weight:700;font-size:var(--t-h3);color:var(--bx);line-height:1.2}
/* =========================================================================
LE PREMIER ÉCRAN · 1er septembre 2026
Constat de Benoît, vérifié avant d'y toucher : au chargement, l'écran
montrait l'accroche ET une tranche de l'aplat bordeaux. 342 px en 1440,
137 px sur un téléphone. Deux sujets d'un coup, alors que la règle de la
charte est « un seul point focal par écran ».
Le premier écran ne montre donc plus qu'une chose. Puis la descente vers
la suite se fait par un dégradé, pas par une arête.
========================================================================= */
/* La hauteur exacte de l'en-tête est posée par ui.js : elle passe de 56 px
à 87 px quand la barre se replie en deux lignes, et une valeur en dur
laisserait dépasser l'aplat sur l'un des deux formats. */
.sec.lueur{min-height:calc(100svh - var(--h-entete, 3.5rem));
display:flex;align-items:center;position:relative}
@supports not (height: 100svh){
.sec.lueur{min-height:calc(100vh - var(--h-entete, 3.5rem))}
}
.sec.lueur > .wrap{width:100%}
/* La descente. Un segment bordeaux parcourt un filet vertical, trois fois,
puis s'arrête : 4,5 secondes au total, sous le seuil de cinq secondes du
critère WCAG 2.2.2, donc aucun bouton de pause n'est requis. Elle
disparaît au premier défilement, parce qu'elle n'a plus rien à dire. */
.descente{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);
display:flex;flex-direction:column;align-items:center;gap:.55rem;margin:0;max-width:none;
font-size:var(--t-leg);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--gris-txt);transition:opacity .45s ease}
.descente.partie{opacity:0;pointer-events:none}
.descente-trait{position:relative;width:1px;height:2.6rem;background:var(--gris-bord);
overflow:hidden}
.descente-trait i{position:absolute;left:0;top:0;width:1px;height:14px;background:var(--bx);
animation:descendre 1.5s cubic-bezier(.4,0,.3,1) 3 both}
@keyframes descendre{
from{transform:translateY(-14px)}
to{transform:translateY(2.6rem)}
}
@media (prefers-reduced-motion:reduce){
.descente-trait i{animation:none;top:0;height:2.6rem}
.descente{transition:none}
}
/* Sous 34 em de haut, un clavier ouvert ou un écran très bas : la descente
n'a plus la place et elle passerait sur les boutons. */
@media (max-height:34em){ .descente{display:none} }
/* =========================================================================
LA TRAME DE FOND ET LA LUMIÈRE · 1er septembre 2026
Benoît : « le site fait très page Word », « un fond un peu commun avec des
motifs qui reviennent de partout mais très léger », et le premier écran
« fait très vide ».
Le quadrillage de 48 px avait été refusé le 31 août, à raison : un carreau
ne dit pas le métier, il le mime. Ce qui revient ici n'est pas un
quadrillage mais le **repère de calage**, la petite croix qu'on trouve aux
angles d'une planche et d'un tirage. Elle ne remplit pas la page, elle la
repère. Pas de 96 px, trait de 1 px, et une opacité si basse qu'on ne la
voit pas consciemment.
Elle vit sous le contenu et au-dessus du fond du corps : elle apparaît
donc dans les sections blanches et disparaît sous les aplats, qui ont leur
propre fond opaque. Aucune section n'a besoin d'être modifiée.
========================================================================= */
.trame-fond{position:fixed;inset:0;z-index:0;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='96'%20height='96'%3E%3Cg%20stroke='%237c1e1e'%20stroke-width='1'%20stroke-opacity='.07'%3E%3Cpath%20d='M48%2043v10'/%3E%3Cpath%20d='M43%2048h10'/%3E%3C/g%3E%3C/svg%3E");
background-size:96px 96px}
/* La lumière qui suit la souris. Elle ne fait pas apparaître autre chose :
elle rend la même trame un peu plus lisible là où l'oeil se trouve.
La transparence est portée par le trait de la tuile, pas par une `opacity`
sur le conteneur : une opacité de parent MULTIPLIE celle de l'enfant, si
bien qu'une couche posée sur un fond à 5 pour cent ne pouvait pas dépasser
5 pour cent elle-même. La lumière aurait été invisible.
Sans souris, sur un téléphone, il ne reste que la trame de base, ce qui est
un état complet et non un état dégradé. */
.trame-fond::after{content:"";position:absolute;inset:0;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='96'%20height='96'%3E%3Cg%20stroke='%237c1e1e'%20stroke-width='1'%20stroke-opacity='.2'%3E%3Cpath%20d='M48%2043v10'/%3E%3Cpath%20d='M43%2048h10'/%3E%3C/g%3E%3C/svg%3E");
background-size:inherit;
opacity:0;transition:opacity .5s ease;
-webkit-mask-image:radial-gradient(circle 115px at var(--mx,50%) var(--my,40%),#000 0%,#000 34%,rgba(0,0,0,.62) 62%,transparent 92%);
mask-image:radial-gradient(circle 115px at var(--mx,50%) var(--my,40%),#000 0%,#000 34%,rgba(0,0,0,.62) 62%,transparent 92%)}
.souris .trame-fond::after{opacity:1}
/* Le contenu passe au-dessus de la trame. L'en-tête est déjà à 40. */
main,.pied-grand{position:relative;z-index:1}
/* En mouvement réduit, la trame cesse de suivre le pointeur. */
@media (prefers-reduced-motion:reduce){
.trame-fond::after{display:none}
}
/* =========================================================================
LA TRAME S'ÉCARTE DU CONTENU · 2 septembre 2026, second essai
Le premier essai peignait une clairière blanche sous le contenu. Erreur
visible immédiatement : le premier écran ne s'ouvre pas sur du blanc pur
mais sur un halo rose, et une clairière blanche posée dessus se lit comme
un CADRE BLANC en plein milieu de l'accroche. Benoît l'a vu tout de suite.
La bonne méthode n'est pas de peindre par-dessus, c'est de faire reculer
la trame autour de ce qui est écrit. Chaque texte porte donc son propre
halo, à la taille de ses lettres et non à celle de son bloc : la croix
s'efface là où la lettre passe, et nulle part ailleurs. Aucun bord, aucun
cadre, et rien à mesurer.
Sur les aplats, rien à faire : leur fond opaque cache déjà la trame. */
.sec:not(.plein) h1,
.sec:not(.plein) h2,
.sec:not(.plein) h3,
.sec:not(.plein) p,
.sec:not(.plein) li,
.sec:not(.plein) .leg{
text-shadow:0 0 10px var(--blanc), 0 0 20px var(--blanc), 0 0 30px var(--blanc)}
/* Une section qui n'est pas `.plein` peut contenir un bloc bordeaux (l'appel
de l'offre, les calculs d'un guide) : le halo blanc y virait au néon. Tout ce qui est posé sur une
couleur le refuse, quelle que soit la section qui le porte. */
/* `!important` est ici le bon outil, pas un raccourci. La règle du halo
porte `.sec:not(.plein) h2`, soit deux classes ; une exclusion écrite
`.calculs h2` n'en porte qu'une et perd. On pourrait rallonger la chaîne
jusqu'à égaler la spécificité, mais elle redeviendrait fausse au premier
sélecteur ajouté au-dessus. Un halo blanc sur une couleur est un néon :
cela ne doit jamais arriver, quelle que soit la règle qui le demande. */
.calculs :is(h1,h2,h3,h4,p,li,.leg,a,strong,span,figcaption),
.appel :is(h1,h2,h3,h4,p,li,.leg,a,strong,span,figcaption),
.plein :is(h1,h2,h3,h4,p,li,.leg,a,strong,span,figcaption),
.fiche :is(h1,h2,h3,h4,p,li,.leg,a,strong,span,figcaption),
.carte :is(h1,h2,h3,h4,p,li,.leg,a,strong,span,figcaption),
.cellule :is(h1,h2,h3,h4,p,li,.leg,a,strong,span){text-shadow:none !important}
/* ---------- Les variantes s'agrandissent au survol ----------------------
Sept matières dans une bande qui défile. Un léger agrandissement dit
laquelle est sous le doigt, et le recadrage se fait dans la vignette :
`overflow:hidden` sur la case, transformation sur l'image. */
/* L'`overflow:hidden` du premier essai rognait l'image agrandie en haut et
en bas : elle grandissait dans une case de taille fixe. La bande garde son
défilement horizontal, mais elle réserve la place que l'agrandissement
demande, si bien que la vignette grandit entière au lieu d'être recadrée. */
.mat{padding-block:10px}
.mat img{transition:scale .45s cubic-bezier(.22,.61,.36,1),
filter .45s ease,box-shadow .45s ease}
.mat:hover img{filter:saturate(.82) brightness(.96)}
.mat img:hover{scale:1.07;filter:none;position:relative;z-index:1;
box-shadow:0 10px 28px rgba(23,6,6,.28)}
@media (prefers-reduced-motion:reduce){
.mat img{transition:none}
.mat img:hover{scale:1}
}
/* =========================================================================
REPRISES DU SITE V2 · 9 septembre 2026
Trois gestes portés depuis `site-v2/` sur le site en ligne : la pile des
pièces du premier écran, les fiches des six agents, et la scène de la
maquette qui se transforme au défilement. Le geste vient de là, la
couleur, la typographie et les rayons viennent d'ici : ce fichier ne
connaît que les jetons du haut de la feuille.
========================================================================= */
/* ---------- a · Le premier écran, en deux colonnes ------------------------
Le titre et les deux lignes à gauche, la pile des pièces à droite. Sous
62 em la pile passe dessous, et l'écran s'allonge : c'est voulu, la
descente reste sous la pile. */
.seuil-grille{display:grid;gap:2.5rem;align-items:center}
.seuil-texte :is(h1,h2){font-size:var(--t-seuil);font-weight:900;line-height:1;letter-spacing:-.035em;
max-width:11em;margin-bottom:1.4rem}
/* Le `line-height:0` de l'accent sert aux accents posés dans un paragraphe.
Dans un titre de 62 px il écraserait la ligne : ici l'accent suit le titre. */
.seuil-texte :is(h1,h2) .ac{line-height:inherit}
.seuil-texte .chapo{max-width:28em;margin-bottom:0}
.seuil-texte .chapo--suite{margin-top:.9rem}
/* Sous 376 px, « d'architecture » ne tient plus sur sa ligne au corps
minimum et le titre passerait à quatre lignes. Deux crans suffisent à le
ramener à trois, sur les deux seuls formats concernés. */
@media (max-width:23.5em){ .seuil-texte :is(h1,h2){font-size:2rem} }
@media (max-width:20em){ .seuil-texte :is(h1,h2){font-size:1.75rem} }
@media (min-width:62em){
/* Mesuré sur le site v2 le 2026-09-09 : à 1440 la planche fait 1440 de
large, le texte commence à 160 et la pile va jusqu'au bord droit, 610
de large. La marge de gauche `clamp(5rem,11.1vw,10rem)` reproduit à
deux pixels près le `--marge-fil` du v2 à partir de 1440. En dessous, la
marge suit l'axe de la planche de 1200 du reste de la page : le titre
doit tomber sous le logo, pas sous la marge du v2. */
.sec.lueur>.seuil-grille{max-width:90rem;
padding-left:clamp(var(--marge),(100% - var(--max)) / 2 + var(--marge),10rem);padding-right:0;
grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:2rem}
}
@media (max-width:61.99em){
/* Empilé, le premier écran s'allonge. La descente est posée en absolu au
bas de la section : sans cette réserve elle tomberait sur la pile. */
.sec.lueur{padding-bottom:calc(var(--pas) + 2.5rem)}
}
/* ---------- b · La pile des pièces ---------------------------------------
Un plan incliné en perspective. Deux colonnes de documents glissent en sens
inverse au défilement (--d, en pixels, posé par ui.js) et le plan entier
s'incline sous le pointeur (--tx, --ty). Une pièce est une feuille : un
type, un titre, quatre lignes de texte muettes, et l'état en pied. */
.pile{--d:0px;--tx:0deg;--ty:0deg;position:relative;overflow:hidden;
height:clamp(16rem,52vh,22rem);
perspective:1400px;perspective-origin:50% 40%;
-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 42%,transparent 98%);
mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 42%,transparent 98%)}
.pile-plan{position:absolute;left:50%;top:50%;width:34rem;display:flex;gap:1.25rem;
transform:translate(-50%,-50%) rotateX(calc(22deg + var(--ty))) rotateY(calc(-14deg + var(--tx))) rotateZ(12deg);
transform-style:preserve-3d;will-change:transform}
.pile-col{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
gap:1.25rem;flex:1 1 0;min-width:0;transform-style:preserve-3d}
.pile-col--a{transform:translateY(calc(-8rem - var(--d)))}
.pile-col--b{transform:translateY(calc(-22rem + var(--d) * .7))}
.piece{display:flex;flex-direction:column;gap:.55rem;padding:1.1rem 1.15rem 1rem;
background:var(--blanc);border:1px solid var(--gris-bord);border-radius:var(--r-btn);
box-shadow:0 18px 40px rgba(23,6,6,.10);color:var(--noir);
transition:box-shadow .3s ease,transform .3s ease}
.piece:hover{box-shadow:0 26px 50px rgba(23,6,6,.18);transform:translateZ(18px)}
.piece-type{font-size:.6875rem;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--bx)}
.piece-titre{font-size:.9375rem;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.piece-meta{font-size:var(--t-leg);line-height:1.4;color:var(--gris-txt)}
.piece-lignes{display:flex;flex-direction:column;gap:.4rem;margin-top:.25rem}
.piece-lignes i{display:block;height:3px;width:var(--l,70%);background:var(--gris-bord)}
.piece-pied{margin-top:.5rem;padding-top:.6rem;border-top:1px solid var(--gris-bord);
font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--gris-txt)}
.piece-pied--gue{color:var(--bx)}
@media (min-width:62em){
/* La même hauteur que le v2, 640 px, sur tout écran d'au moins 872 px de
haut : c'est le plafond de 40 rem qui la donne. En dessous, la réserve de
11 rem garde le premier écran d'une seule hauteur et laisse la place au
repère « Défiler », posé en absolu au bas de la section. Le v2 n'a pas ce
repère : sa formule à 6 rem faisait ici chevaucher les deux dès 880 px. */
.pile{height:clamp(22rem,calc(100svh - var(--h-entete,3.5rem) - 11rem),40rem)}
}
@media (max-width:61.99em){
/* Empilée sous le texte, la pile se réduit pour ne pas manger l'écran. */
.pile-plan{width:26rem;transform:translate(-50%,-50%) scale(.82) rotateX(calc(22deg + var(--ty))) rotateY(calc(-14deg + var(--tx))) rotateZ(12deg)}
}
@media (max-width:59.99em){
.pile{margin-inline:calc(-1 * var(--marge))}
}
@media (max-width:47.99em){
/* Au téléphone la pile se pose presque à plat : lisible, et les boutons
restent au dessus d'elle. */
.pile{height:15rem}
.pile-plan{width:24rem;transform:translate(-50%,-50%) scale(.78) rotateZ(6deg)}
}
@media (prefers-reduced-motion:reduce){
.pile{--d:0px !important;--tx:0deg !important;--ty:0deg !important}
.piece,.piece:hover{transition:none;transform:none}
}
/* ---------- c · Le système, et le trait d'axe qui descend vers les fiches --
La promesse tient au centre, en grand. Le pointillé descend, s'ouvre vers
les trois premières fiches et s'y arrête : sur un plan, un trait d'axe fin
relie ce qui n'est pas dessiné en plein. Il ne se montre qu'à trois
colonnes, sinon il désignerait des cases qui ne sont plus là. */
#un-seul-systeme .tete-centre{max-width:46rem}
.tete-centre h2.h-systeme{font-size:clamp(1.75rem,1.1rem + 2.6vw,3rem);font-weight:900;
line-height:1.06;letter-spacing:-.03em;max-width:16em;margin-inline:auto}
.tete-centre .chapo{margin:1.1rem auto 0;max-width:32em}
.ramif{display:none}
.systeme-fin{max-width:44em;margin:2.5rem auto 0;text-align:center}
@media (min-width:64em){
.ramif{--ec:1.25rem;--c1:calc((100% - 2 * var(--ec)) / 6);
display:block;position:relative;height:4.6rem;margin-top:2rem}
.ramif span{position:absolute;display:block;width:0;height:2.2rem;
border-left:2px dotted var(--bx-200)}
.ramif-tronc{left:50%;top:0}
.ramif .ramif-bus{left:var(--c1);right:var(--c1);top:2.2rem;width:auto;height:0;
border-left:0;border-top:2px dotted var(--bx-200)}
.ramif .ramif-goutte{top:2.2rem;height:2.4rem}
.ramif .ramif-goutte--a{left:var(--c1)}
.ramif .ramif-goutte--b{left:50%}
.ramif .ramif-goutte--c{left:calc(100% - var(--c1))}
/* Le trait se trace à l'arrivée : le tronc descend, la traverse s'ouvre,
les trois gouttes tombent. Une fois, à l'entrée, et plus jamais. */
.js.mvt .ramif span{transform:scaleY(0);transform-origin:top;
transition:transform .42s cubic-bezier(.22,.61,.36,1)}
.js.mvt .ramif-bus{transform:scaleX(0);transform-origin:center}
.js.mvt .ramif.vu .ramif-tronc{transform:scaleY(1)}
.js.mvt .ramif.vu .ramif-bus{transform:scaleX(1);transition-delay:.3s}
.js.mvt .ramif.vu .ramif-goutte{transform:scaleY(1);transition-delay:.58s}
}
@media (prefers-reduced-motion:reduce){
.ramif span{transform:none !important;transition:none !important}
}
/* ---------- d · Les six fiches d'agents ----------------------------------
Reprises du prototype de vente, ramenées à la charte d'ici : fond blanc,
rayon de carte, filet gris, tiret bordeaux en puce. Le visuel s'agrandit
très peu sous le pointeur, la carte se soulève de trois pixels, comme
toutes les autres cartes de la page. */
.agents{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:1.25rem;
grid-template-columns:1fr}
.fiche{position:relative;display:grid;grid-template-rows:auto 1fr;overflow:hidden;
background:var(--blanc);border:1px solid var(--gris-bord);border-radius:var(--r-carte);
transition:box-shadow .38s ease,transform .38s cubic-bezier(.22,.61,.36,1),border-color .38s ease}
.fiche:hover{box-shadow:var(--ombre-f);transform:translateY(-3px);border-color:var(--bx-200)}
.fiche-visuel{position:relative;aspect-ratio:16 / 10;overflow:hidden;background:var(--gris)}
.fiche-visuel img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);
transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.fiche:hover .fiche-visuel img{transform:scale(1.04)}
.fiche-num{position:absolute;left:.85rem;top:.85rem;background:var(--blanc);
padding:.4rem .55rem;border-radius:var(--r-btn);font-size:var(--t-leg);
font-weight:700;letter-spacing:.12em;color:var(--bx)}
.fiche-corps{padding:1.35rem 1.4rem 1.5rem;display:grid;gap:.85rem;align-content:start}
.fiche .accroche{margin:0;font-size:var(--t-petit);color:var(--gris-txt)}
.fiche ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:var(--t-petit)}
.fiche ul li{position:relative;padding-left:1.1rem;color:var(--gris-txt);line-height:1.5}
.fiche ul li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;
background:var(--bx)}
.fiche .main{margin:0;font-size:var(--t-petit);color:var(--gris-txt);
border-top:1px solid var(--gris-bord);padding-top:.9rem}
.fiche .main strong{display:block;font-size:var(--t-leg);font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--noir);margin-bottom:.25rem}
@media (min-width:44em){ .agents{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:64em){ .agents{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce){
.fiche,.fiche-visuel img{transition:none}
.fiche:hover{transform:none}
.fiche:hover .fiche-visuel img{transform:none}
}
/* ---------- e · La maquette qui devient l'image ---------------------------
La scène reste collée pendant trois hauteurs d'écran. La traversée du bloc
donne --p, lissé à 14 pour cent par image par ui.js : un coup de molette
devient un glissé. Le rendu de jour balaie la maquette sur la première
moitié, la nuit tombe en fondu sur la seconde. Le défilement n'est jamais
détourné : le collant est natif. Sans script, ou en mouvement réduit, les
trois vues se lisent côte à côte, et c'est un état complet. */
.sommet{position:relative;margin-top:2.5rem;
--q1:clamp(0, calc(var(--p, 1) * 2), 1);
--q2:clamp(0, calc((var(--p, 1) - .5) * 2), 1)}
.cadre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:center}
.cadre .vue{width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;display:block;
border-radius:var(--r-carte)}
.rail{position:relative;padding-top:1.4rem}
.rail-trait{display:block;height:2px;background:var(--gris-bord);position:relative}
.rail-trait::after{content:"";position:absolute;left:0;top:0;height:2px;
width:calc(var(--p,1) * 100%);background:var(--bx)}
.rail-etiquettes{display:flex;justify-content:space-between;margin-top:.8rem;
font-size:var(--t-leg);font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.rail-etiquettes span{color:var(--gris-txt);transition:color .3s}
.rail-etiquettes span.actif{color:var(--bx)}
.js [data-sommet]{--p:0}
.js.mvt .sommet{height:300vh}
.js.mvt .scene{position:sticky;top:var(--h-entete,3.5rem);
height:calc(100vh - var(--h-entete,3.5rem));height:calc(100svh - var(--h-entete,3.5rem));
display:flex;flex-direction:column;justify-content:center;gap:1.1rem}
.js.mvt .cadre{display:block;position:relative;aspect-ratio:16 / 9;
width:min(100%, calc((100svh - var(--h-entete,3.5rem) - 9rem) * 16 / 9));
margin-inline:auto;overflow:hidden;border-radius:var(--r-carte);
background:var(--gris);box-shadow:var(--ombre-f)}
.js.mvt .cadre .vue{position:absolute;inset:0;height:100%;border-radius:0}
.js.mvt .vue--jour{-webkit-mask-image:linear-gradient(to right,#000 calc(var(--q1) * 100%),transparent calc(var(--q1) * 100% + 14%));
mask-image:linear-gradient(to right,#000 calc(var(--q1) * 100%),transparent calc(var(--q1) * 100% + 14%))}
.js.mvt .vue--nuit{opacity:var(--q2)}
.js.mvt .rail{width:min(100%, calc((100svh - var(--h-entete,3.5rem) - 9rem) * 16 / 9));
margin-inline:auto;padding-top:0}
@media (max-width:59.99em){
.cadre{grid-template-columns:1fr}
.js.mvt .sommet{height:260vh}
.js.mvt .cadre,.js.mvt .rail{width:100%}
}
@media (prefers-reduced-motion:reduce){
.rail-etiquettes span{transition:none}
}
/* ---------- f · Deux respirations demandées le 9 septembre ----------------
Après l'aplat de la limite, le blanc a besoin de plus d'air avant que la
méthode commence. Et « Qui on est » ne doit pas coller au savoir-faire. */
#methode{padding-top:calc(var(--pas) * 1.65)}
#qui{padding-top:calc(var(--pas) * 1.35)}
/* ---------- g · Les chiffres se comptent à l'arrivée ---------------------
Demandé par Hippolyte le 2026-09-09. La valeur finale est écrite dans le
HTML : sans script, ou en mouvement réduit, elle s'affiche directement et
le module ne touche à rien. Le décompte dure un peu plus d'une seconde,
très loin des cinq du critère WCAG 2.2.2, et il ne part qu'une fois.
`tabular-nums` fige la chasse des chiffres, et ui.js réserve la largeur
finale avant de commencer : sans elle, « 2 400 » ferait sauter la ligne
pendant tout le décompte. */
.tableau .nb{font-variant-numeric:tabular-nums;display:inline-block;text-align:left}
/* Lu par les synthèses vocales, invisible à l'écran. Le module pose la valeur
finale là-dedans et masque le chiffre qui défile : on entend « 2 400 », pas
les trente valeurs intermédiaires. */
.hors-ecran{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
-webkit-user-select:none;user-select:none}
/* =========================================================================
La vidéo de présentation · 2 octobre 2026
Première section sous l'en-tête. Un titre, la vidéo en 16:9 avec son
affiche et un grand bouton de lecture bordeaux, puis le diagnostic. La
vidéo ne se lance jamais seule : ui.js attend le clic.
========================================================================= */
.sec--vsl{padding-block:clamp(2rem,4vw,3.75rem) clamp(2.5rem,5vw,4.5rem)}
.vsl-tete{max-width:48rem;margin-inline:auto;text-align:center}
.vsl-tete .leg{margin-bottom:.9rem}
/* 2 octobre au soir, Hippolyte : « trop gros », « sur deux lignes ». Une phrase
par ligne dès 48 em, un corps plus bas que le titre de l'accroche. */
.vsl-ligne{display:inline}
@media (min-width:48em){ .vsl-ligne{display:block;white-space:nowrap} }
.vsl-tete h2 .ac{line-height:inherit}
.vsl-tete h2{font-size:clamp(1.5rem,1.05rem + 1.75vw,2.3rem);line-height:1.12;letter-spacing:-.025em;
text-wrap:balance}
.vsl-cadre{position:relative;max-width:60rem;margin:clamp(1.5rem,3vw,2.25rem) auto 0;
aspect-ratio:16/9;background:var(--gris);border-radius:var(--r-carte);overflow:hidden;
box-shadow:0 18px 44px rgba(23,6,6,.14)}
.vsl-video{display:block;width:100%;height:100%;object-fit:cover;background:var(--gris)}
.vsl-lecture{position:absolute;inset:0;width:100%;height:100%;border:0;margin:0;padding:0;
display:none;align-items:center;justify-content:center;flex-direction:column;gap:1rem;
cursor:pointer;background:rgba(23,6,6,0);color:var(--blanc);font-family:inherit;
transition:background-color .3s}
.js .vsl-lecture{display:flex}
.vsl-lecture:hover,.vsl-lecture:focus-visible{background:rgba(23,6,6,.08)}
.vsl-lecture:focus-visible{outline:3px solid var(--bx);outline-offset:-6px}
.vsl-play{display:grid;place-items:center;width:clamp(4.5rem,11vw,6.5rem);aspect-ratio:1;
border-radius:50%;background:var(--bx);box-shadow:0 10px 32px rgba(23,6,6,.35);
transition:transform .25s,background-color .25s}
.vsl-play::before{content:"";margin-left:8%;width:0;height:0;
border-style:solid;border-width:clamp(.7rem,1.8vw,1.05rem) 0 clamp(.7rem,1.8vw,1.05rem) clamp(1.15rem,3vw,1.7rem);
border-color:transparent transparent transparent var(--blanc)}
.vsl-lecture:hover .vsl-play,.vsl-lecture:focus-visible .vsl-play{transform:scale(1.07);background:var(--bx-600)}
.vsl-lecture-txt{display:inline-block;padding:.5rem 1rem;border-radius:var(--r-btn);
background:var(--blanc);color:var(--bx);font-size:var(--t-leg);font-weight:800;
letter-spacing:.1em;text-transform:uppercase;text-shadow:none;box-shadow:var(--ombre)}
.vsl-cadre.en-lecture .vsl-lecture{display:none}
.vsl-actions{justify-content:center;margin-top:1.75rem}
.vsl-note{max-width:60rem;margin:1.25rem auto 0;font-size:var(--t-petit)}
.vsl-note summary{cursor:pointer;display:inline-block;color:var(--gris-txt);font-weight:600;
text-decoration:underline;text-underline-offset:.2em}
.vsl-note summary:hover{color:var(--bx)}
.vsl-note summary:focus-visible{outline:3px solid var(--bx);outline-offset:3px}
.vsl-note ol{margin:.9rem 0 0;padding-left:1.25rem;color:var(--gris-txt)}
.vsl-note li{margin-bottom:.35rem;max-width:44em}
.vsl-note p{margin:.9rem 0 0;max-width:44em;color:var(--gris-txt)}
.vsl-hors-script{display:none;text-align:center;margin-top:1rem}
html:not(.js) .vsl-hors-script{display:block}
@media (prefers-reduced-motion:reduce){ .vsl-play,.vsl-lecture{transition:none} }
@media print{ .sec--vsl{display:none} }
/* =========================================================================
LE GRAND PIED · 2 octobre 2026, au soir
Demandé par Hippolyte, d'après le pied d'Arquiz : l'identité et la lettre à
gauche, trois colonnes de liens, le nom en très grand en filigrane et la
signature posée dessus. Plus de bloc « Nous parler » au bas de l'accueil :
le diagnostic est déjà proposé dans chaque section. Aplat bordeaux profond,
dégradé à 135 degrés de la charte ; PT Serif italique sur un seul mot
(règle verrouillée 5). Le pied s'écrit dans outils/pied.html.
========================================================================= */
.sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pied-grand{position:relative;isolation:isolate;overflow:clip;color:var(--blanc);
background:linear-gradient(135deg,var(--bx-700) 0%,var(--bx-800) 58%,var(--bx-900) 100%);
padding-block:clamp(3rem,6vw,4.75rem) 1.75rem}
.pied-grand::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(55% 65% at 88% 0%,rgba(150,25,25,.55) 0%,rgba(150,25,25,0) 70%),
radial-gradient(45% 60% at 0% 100%,rgba(124,30,30,.35) 0%,rgba(124,30,30,0) 70%)}
.pg-haut{display:grid;gap:2.5rem 2rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.pg-marque{grid-column:1/-1}
@media (min-width:48em){ .pg-haut{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:64em){
.pg-haut{grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,.8fr));gap:2.5rem}
.pg-marque{grid-column:auto}
}
.pg-logo{display:inline-block;border:0}
.pg-logo img{display:block;width:clamp(9.5rem,16vw,13.5rem);height:auto}
.pg-texte{margin:1.25rem 0 0;max-width:24rem;font-size:var(--t-petit);line-height:1.65;
color:rgba(255,255,255,.86)}
.pg-titre{margin:0 0 .85rem;font-size:var(--t-leg);font-weight:800;letter-spacing:.12em;
text-transform:uppercase;color:var(--bx-100);max-width:none}
.pg-lettre{margin-top:2rem;max-width:24rem}
.pg-champ{display:flex;gap:.5rem}
.pg-champ input[type=email]{flex:1 1 auto;min-width:0;height:2.75rem;padding:0 .9rem;
border:1px solid rgba(255,255,255,.3);border-radius:var(--r-btn);
background:rgba(255,255,255,.08);color:var(--blanc);font:inherit;font-size:var(--t-petit)}
.pg-champ input[type=email]::placeholder{color:rgba(255,255,255,.62)}
.pg-champ input[type=email]:focus-visible{outline:2px solid var(--bx-100);outline-offset:2px}
.pg-champ button{flex:0 0 auto;width:2.75rem;height:2.75rem;border:0;border-radius:var(--r-btn);
background:var(--blanc);color:var(--bx);font:inherit;font-size:1.15rem;font-weight:800;
cursor:pointer;transition:background .2s,transform .2s}
.pg-champ button:hover{background:var(--bx-100);transform:translateX(2px)}
.pg-champ button:focus-visible{outline:2px solid var(--bx-100);outline-offset:2px}
.pg-note{margin:.65rem 0 0;font-size:var(--t-leg);line-height:1.55;color:rgba(255,255,255,.72)}
.pg-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.pg-retour{margin:.5rem 0 0;font-size:var(--t-petit);font-weight:700;color:var(--bx-100)}
.pg-retour:empty,.recevoir-retour:empty{display:none}
.pg-col{display:flex;flex-direction:column;align-items:flex-start}
.pg-col a{color:rgba(255,255,255,.88);text-decoration:none;font-size:var(--t-petit);
line-height:1.4;padding-block:.42rem;border-bottom:1px solid transparent}
.pg-col a:hover{color:var(--blanc);border-bottom-color:var(--bx-100)}
.pg-col a:focus-visible,.pg-bas a:focus-visible,.pg-logo:focus-visible{outline:2px solid var(--bx-100);outline-offset:3px}
.pg-suivre{margin:0 0 .9rem;font-size:var(--t-petit);line-height:1.55;color:rgba(255,255,255,.88);max-width:16rem}
.pg-reseaux{display:flex;gap:.6rem;list-style:none;margin:0 0 .9rem;padding:0}
.pg-reseaux li{max-width:none}
.pg-col .pg-reseaux a{display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;
border:1px solid rgba(255,255,255,.3);border-radius:var(--r-carte);
background:rgba(255,255,255,.06);color:var(--blanc);transition:background .2s,border-color .2s,transform .2s}
.pg-col .pg-reseaux a:hover{background:rgba(255,255,255,.15);border-color:var(--bx-100);transform:translateY(-2px)}
.pg-col .pg-reseaux a.acompleter{border:1px dashed var(--bx-100);background:rgba(246,210,210,.18)}
.pg-filigrane{position:relative;display:grid;place-items:center;margin-top:clamp(2.5rem,6vw,4rem);
user-select:none}
.pg-geant{display:block;font-weight:900;font-size:clamp(4.25rem,18.5vw,16.5rem);line-height:.82;
letter-spacing:-.045em;color:rgba(255,255,255,.07);white-space:nowrap}
.pg-devise{position:absolute;inset:auto 0;margin:0;padding-inline:1rem;text-align:center;
font-weight:800;font-size:clamp(1.1rem,.75rem + 2.1vw,2.6rem);letter-spacing:-.02em;
line-height:1.15;color:var(--blanc);max-width:none}
.pg-devise .ac{line-height:inherit;color:var(--bx-100)}
.pg-bas{display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;align-items:center;
margin-top:clamp(2rem,4vw,3rem);padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.18);
font-size:var(--t-leg);color:rgba(255,255,255,.72)}
.pg-bas p{margin:0;max-width:none}
.pg-bas nav{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.pg-bas a{color:inherit;text-decoration:none}
.pg-bas a:hover{color:var(--blanc);text-decoration:underline;text-underline-offset:2px}
.pg-mentions{margin:1rem 0 0;font-size:.6875rem;line-height:1.55;color:rgba(255,255,255,.55);max-width:none}
@media (prefers-reduced-motion:reduce){ .pg-champ button,.pg-col .pg-reseaux a{transition:none} }
@media print{ .pied-grand{display:none} }
/* =========================================================================
LES GUIDES · 2 octobre 2026, au soir
La liste de /ressources, et la page de chaque guide sous
/ressources/. Le guide se reçoit en PDF par e-mail.
========================================================================= */
.guides{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:1.25rem}
@media (min-width:56em){ .guides{grid-template-columns:repeat(3,minmax(0,1fr))} }
.guides li{max-width:none}
.guide-carte{display:flex;flex-direction:column;gap:.6rem;height:100%;padding:1.5rem 1.5rem 1.4rem;
border:1px solid var(--gris-bord);border-top:3px solid var(--bx);border-radius:var(--r-carte);
background:var(--blanc);color:var(--noir);text-decoration:none;box-shadow:var(--ombre);
transition:box-shadow .3s,transform .3s}
.guide-carte:hover{box-shadow:var(--ombre-f);transform:translateY(-3px)}
.guide-carte:focus-visible{outline:3px solid var(--bx);outline-offset:3px}
.guide-type{font-size:var(--t-leg);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bx)}
.guide-carte strong{font-size:var(--t-h3);font-weight:800;line-height:1.22;letter-spacing:-.01em}
.guide-promesse{font-size:var(--t-petit);color:var(--gris-txt);line-height:1.55}
.guide-lien{margin-top:auto;padding-top:.6rem;font-size:var(--t-petit);font-weight:700;color:var(--bx)}
.guide-lien::after{content:" \2192"}
@media (prefers-reduced-motion:reduce){ .guide-carte{transition:none} .guide-carte:hover{transform:none} }
.ressource .wrap{max-width:52rem}
.fil{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.5rem;font-size:var(--t-leg);font-weight:700;
letter-spacing:.08em;text-transform:uppercase;color:var(--gris-txt)}
.fil a{color:var(--bx);text-decoration:none}
.fil a:hover{text-decoration:underline}
.ressource h1{font-size:var(--t-h1);max-width:22em}
.ressource h2{margin:clamp(2.5rem,5vw,3.25rem) 0 .9rem}
.ressource h3{margin:1.5rem 0 .5rem;font-size:var(--t-h3)}
.ressource p,.ressource li{max-width:42em}
.ressource ul,.ressource ol{padding-left:1.25rem}
.ressource li{margin-bottom:.45rem}
.tab-wrap{overflow-x:auto;margin:1rem 0}
.tab{border-collapse:collapse;width:100%;min-width:28rem;font-size:var(--t-petit)}
.tab th,.tab td{text-align:left;vertical-align:top;padding:.65rem .8rem;border-bottom:1px solid var(--gris-bord)}
.tab th{font-size:var(--t-leg);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-txt)}
.calculs{margin:1.25rem 0;padding:clamp(1.25rem,3vw,1.75rem);border-radius:var(--r-carte);
color:var(--blanc);background:linear-gradient(135deg,var(--bx-400) 0%,var(--bx) 45%,var(--bx-700) 100%)}
.calculs p{margin:.35rem 0;font-weight:700;color:var(--blanc);max-width:none}
.calculs span{color:var(--bx-100);font-weight:600;padding-inline:.2em}
.recevoir{margin:2rem 0 1rem;padding:clamp(1.25rem,3vw,1.75rem);border:1px solid var(--gris-bord);
border-left:3px solid var(--bx);border-radius:var(--r-carte);background:var(--bx-50)}
.recevoir-titre{margin:0 0 .9rem;font-weight:800;font-size:var(--t-h3);max-width:none}
.recevoir-champ{display:flex;flex-wrap:wrap;gap:.6rem}
.recevoir-champ input[type=email]{flex:1 1 16rem;min-width:0;height:3rem;padding:0 1rem;
border:1px solid var(--gris-bord);border-radius:var(--r-btn);background:var(--blanc);font:inherit;color:var(--noir)}
.recevoir-champ input[type=email]:focus-visible{outline:3px solid var(--bx);outline-offset:2px}
.recevoir-champ .btn{flex:0 0 auto}
.recevoir-case{display:flex;gap:.6rem;align-items:flex-start;margin-top:.9rem;font-size:var(--t-petit);cursor:pointer}
.recevoir-case input{margin-top:.2rem;width:1.05rem;height:1.05rem;accent-color:var(--bx);flex:0 0 auto}
.recevoir-note{margin:.6rem 0 0;font-size:var(--t-leg);color:var(--gris-txt)}
.recevoir-note a{color:inherit}
.recevoir-retour{margin:.6rem 0 0;font-size:var(--t-petit);font-weight:700;color:var(--bx)}
.encadre{margin:2rem 0 1rem;padding:.25rem 1.4rem 1.25rem;border-left:3px solid var(--bx);
background:var(--bx-50);border-radius:0 var(--r-carte) var(--r-carte) 0}
.encadre h2{margin-top:1rem}
.encadre p:last-child{margin-bottom:0}
.duo-penche{display:grid;gap:.5rem 2rem}
@media (min-width:48em){ .duo-penche{grid-template-columns:1fr 1fr} }
.signature-auteur{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--gris-bord);
font-size:var(--t-petit);color:var(--gris-txt)}
.suite{margin-top:clamp(2.5rem,5vw,3.5rem)}
.autres{list-style:none;padding:0 !important;display:grid;gap:.6rem}
.autres a{font-weight:700;color:var(--noir);text-decoration:none;border-bottom:2px solid var(--bx)}
.autres a:hover{color:var(--bx)}
.guide-titre{margin:0;font-size:var(--t-h3);font-weight:800;line-height:1.22;letter-spacing:-.01em;color:var(--noir)}
.ressource .date{margin:-.25rem 0 .75rem;font-size:var(--t-leg);font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--gris-txt)}
/* Le repère de focus · 2026-10-03. Safari pose le focus du clavier sur le premier
lien à l'ouverture (Contrôle vocal, touche Tab) : Hippolyte voyait « Aller au
contenu », puis un cadre bleu autour du logo. Le cadre disparaît pour un clic ;
au clavier, un trait bordeaux sous le lien, aux couleurs de la charte. */
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}
.logo:focus-visible,.nav a:focus-visible{outline:none;box-shadow:0 2px 0 var(--bx)}
/* =========================================================================
RESSOURCES À L'ESSENTIEL · 3 octobre 2026
Hippolyte : « tu écris beaucoup pour rien ». La liste montre les PDF tout
de suite ; la page d'un guide garde le titre, une phrase, le formulaire et
la couverture. Rien d'autre.
========================================================================= */
.onglets{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.75rem 0 0}
.onglet{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1.1rem;border:1px solid var(--gris-bord);
border-radius:999px;background:var(--blanc);color:var(--gris-txt);font-size:var(--t-leg);font-weight:700;
letter-spacing:.1em;text-transform:uppercase}
.onglet--actif{background:var(--noir);border-color:var(--noir);color:var(--blanc)}
.onglet--bientot .ac{font-size:1.2em;line-height:1;letter-spacing:0;text-transform:none}
.guides--pdf{margin-top:1.5rem}
.guide-carte--pdf{padding:0;gap:.55rem;overflow:hidden}
.guide-couv-cadre{display:flex;justify-content:center;align-items:flex-end;height:15rem;padding:1.6rem 1.5rem 0;
background:var(--bx-50);border-bottom:1px solid var(--gris-bord);overflow:hidden}
.guide-couv{display:block;width:auto;height:100%;max-width:100%;object-fit:contain;border-radius:2px 2px 0 0;
box-shadow:var(--ombre-f);transition:transform .3s}
.guide-carte--pdf:hover .guide-couv{transform:translateY(-4px)}
.guide-carte--pdf .guide-type{margin:1.1rem 1.5rem 0}
.guide-carte--pdf .guide-titre{margin:0 1.5rem}
.guide-carte--pdf .guide-lien{margin:0 1.5rem 1.4rem}
@media (prefers-reduced-motion:reduce){ .guide-couv{transition:none} .guide-carte--pdf:hover .guide-couv{transform:none} }
.ressource--seule .wrap{max-width:66rem}
.rs-grille{display:grid;gap:2.5rem;align-items:center}
@media (min-width:56em){ .rs-grille{grid-template-columns:minmax(0,1fr) minmax(0,19rem);gap:clamp(3rem,6vw,5rem)} }
.rs-corps .chapo{margin-top:1rem}
.rs-corps .recevoir{margin:1.75rem 0 0;max-width:36rem}
.rs-couv{margin:0;justify-self:center;width:min(100%,14rem)}
@media (min-width:56em){ .rs-couv{width:100%} }
.rs-couv img{display:block;width:100%;height:auto;border-radius:3px;box-shadow:var(--ombre-f)}
/* =========================================================================
LE BLOG EN IMAGES · 3 octobre 2026
Hippolyte : « au moins une image par article de blog en haut », une image
sur chaque carte, et le temps de lecture. poser_blog.py les pose ; un article
sans photo est refusé.
========================================================================= */
.article-visuel{margin:2rem 0 0}
.article-visuel img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-carte);
background:var(--gris)}
.article-visuel figcaption{margin-top:.5rem;font-size:var(--t-leg);color:var(--gris-txt)}
.lecture{white-space:nowrap}
.guide-carte--blog{padding:0;gap:.55rem;overflow:hidden}
.guide-visuel{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--gris);border-bottom:1px solid var(--gris-bord)}
.guide-visuel img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.guide-carte--blog:hover .guide-visuel img{transform:scale(1.03)}
.guide-carte--blog .guide-type{margin:1.1rem 1.5rem 0}
.guide-carte--blog .guide-titre,.guide-carte--blog .guide-promesse{margin:0 1.5rem}
.guide-carte--blog .guide-lien{margin:0 1.5rem 1.4rem}
@media (prefers-reduced-motion:reduce){ .guide-visuel img{transition:none} .guide-carte--blog:hover .guide-visuel img{transform:none} }
/* Maillage du blog · nuit du 3 octobre 2026 : « À lire aussi » au bas des articles, liste des
articles sur la page pilier. Posés par outils/poser_blog.py. */
.lies{margin:2.5rem 0 0;padding:1.25rem 1.5rem;border-left:3px solid var(--bx);border-radius:var(--r-carte);background:var(--bx-50)}
.lies-titre{margin:0 0 .6rem;font-size:var(--t-leg);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bx)}
.lies-liste,.ressource .lies-liste{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.lies-liste li{margin:0}
/* Les tableaux du blog sur téléphone (relecture du HOCS, nuit du 3 octobre 2026) : à trois colonnes,
la dernière sortait de l'écran sans que rien n'invite à faire glisser. Sous 40em, le tableau tient
dans la largeur et les mots se coupent. */
@media (max-width:40em){
.tab{min-width:0;font-size:var(--t-leg)}
.tab th,.tab td{padding:.55rem .45rem;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
}
/* =========================================================================
LA NEWSLETTER · 7 octobre 2026
Demande d'Hippolyte : un onglet « Newsletter » qui garde toutes les éditions.
Les pages d'édition sont posées par outils/poser_newsletter.py. Les rubriques
(Le Signal, Le Dossier, Les coulisses, À tester lundi) sont en gros titres, avec
le filet bordeaux de la charte au-dessus. Aucune légende sous les images.
========================================================================= */
.edition h2{margin:clamp(3rem,6vw,4.25rem) 0 1rem;font-size:var(--t-h1);font-weight:900;
line-height:1.1;letter-spacing:-.025em;max-width:22em}
.edition h2::before{content:"";display:block;width:64px;height:3px;margin-bottom:1rem;background:var(--bx)}
.edition h2 .rub{color:var(--bx)}
.edition h3{margin:2.25rem 0 .6rem}
.edition-img{margin:1.75rem 0 2rem}
.edition-img img{display:block;width:100%;height:auto;border:1px solid var(--gris-bord);border-radius:var(--r-carte);
background:var(--gris)}
.edition .recevoir{margin-top:clamp(2.5rem,5vw,3.5rem)}
.edition .article-visuel{margin-bottom:2.25rem}