/* ============================================================================
DEVISALY — COUCHE 3 : LES GABARITS
----------------------------------------------------------------------------
Un bloc par gabarit, préfixé, jamais de style global. Cette feuille porte :
· le chrome commun : barre, menu mobile, pied de page (toutes les pages)
· le gabarit ACCUEIL : héros, démonstration, sections, preuves, appel
· puis, bloc par bloc, les hubs métier, les pages de données, les articles,
les pages d'identité, la lecture, les offres, l'outil PDF, l'audit SEO.
⚠️ REFONTE VISUELLE (étape 7). La mise en page du tract est passée à l'écran :
papier et encre, un seul accent terracotta, filets de 1 px au lieu d'ombres,
titres en Palatino, surtitres en capitales espacées, chiffres en évidence dès
le premier écran. Aucune valeur en dur : tout vient des jetons.
========================================================================== */
/* ============================================================================
LE CHROME COMMUN — la barre et le pied de page, sur toutes les pages
========================================================================== */
/* --- la barre : un en-tête de journal, pas une bulle flottante ---------- */
.nav {position: sticky; top: 0; z-index: 80;
display: flex; align-items: center; gap: var(--e-4);
min-height: 64px;
padding: 0 var(--marge) 0 var(--marge);
padding-top: env(safe-area-inset-top, 0px);
background: var(--papier);
border-bottom: 1px solid var(--filet);
transition: box-shadow var(--t-ui) var(--ease);}
.nav__marque {display: inline-flex; align-items: center; gap: .5rem;
min-height: 44px;
font-family: var(--police);
font-size: .9375rem; font-weight: 700;
letter-spacing: .22em; text-transform: uppercase;
color: var(--encre);}
.nav__marque span::after {content: ""; display: inline-block;
width: 6px; height: 6px; margin-left: .34em;
background: var(--bronze); vertical-align: baseline;}
.nav__liens {display: flex; align-items: center; gap: var(--e-4); margin-left: var(--e-2);}
.nav__liens a {font-size: .8125rem; font-weight: 500;
letter-spacing: .02em; text-transform: none;
color: var(--encre-2);
text-decoration: none;
padding-block: .5rem;
border-bottom: 1px solid transparent;
transition: color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease);}
@media (hover: hover) and (pointer: fine) {.nav__liens a:hover {color: var(--encre); border-color: var(--bronze-clair);}}
.nav__liens a[aria-current="true"] {color: var(--encre); border-color: var(--terracotta);}
.nav__actions {margin-left: auto; display: flex; align-items: center; gap: var(--e-3);}
.nav__tel {font-size: .8125rem; letter-spacing: .04em; color: var(--encre-3);}
.nav__pilule {display: inline-flex; align-items: center; justify-content: center;
min-height: 40px; padding: 0 1.1rem;
border-radius: var(--r);
background: var(--encre); color: var(--papier);
font-size: .75rem; font-weight: 600;
letter-spacing: .02em; text-transform: none;
transition: background-color var(--t-ui) var(--ease);}
.nav__pilule:hover {background: var(--terracotta);}
.nav__burger {display: none; align-items: center; justify-content: center;
flex-direction: column; gap: 5px;
width: 44px; height: 44px; padding: 0; margin-left: var(--e-1);
background: none; border: 1px solid var(--filet-fort); border-radius: var(--r);}
.nav__burger span {display: block; width: 18px; height: 1.5px; background: var(--encre);
transition: transform .22s var(--ease), opacity .22s var(--ease);}
.nav__burger[aria-expanded="true"] span:first-child {transform: translateY(3.2px) rotate(45deg);}
.nav__burger[aria-expanded="true"] span:last-child {transform: translateY(-3.2px) rotate(-45deg);}
/* --- le panneau mobile : plein écran, sous la barre --------------------- */
.menu-mobile {position: fixed; inset: 0; z-index: 70;
background: var(--papier);
padding: calc(env(safe-area-inset-top) + 84px) var(--marge) calc(env(safe-area-inset-bottom) + 24px);
overflow-y: auto;}
.menu-mobile nav {display: flex; flex-direction: column;}
.menu-mobile a {display: flex; align-items: center; min-height: 60px;
font-family: var(--serif); font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em;
color: var(--encre); text-decoration: none;
border-bottom: 1px solid var(--filet-2);}
.menu-mobile a:active {background: rgb(10 11 16 / .03);}
.menu-mobile a.menu-mobile__tel {color: var(--bronze-fonce);}
.menu-mobile a.menu-mobile__cta {justify-content: center; margin-top: var(--e-3);
min-height: 54px;
background: var(--encre); color: var(--papier);
border: 0; border-radius: var(--r);
font-family: var(--police); font-size: .8125rem; font-weight: 600;
letter-spacing: .02em; text-transform: none;}
@media (max-width: 899px) {
.nav__liens, .nav__actions {display: none;}
.nav__burger {display: flex;}
.nav {justify-content: space-between;}}
@media (min-width: 900px) {.menu-mobile {display: none;}}
/* --- le pied de page : la quatrième de couverture ----------------------- */
.pied {padding-block: var(--e-6) var(--e-4);
padding-bottom: calc(var(--e-4) + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--filet);
background: var(--papier);
color: var(--encre-3);
font-size: var(--t-petit);}
.pied__grille {display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--e-4);}
.pied__titre {font-family: var(--police);
font-size: var(--t-label); font-weight: 600;
letter-spacing: var(--tr-label); text-transform: none;
color: var(--encre); margin-bottom: var(--e-2);}
.pied__dit {max-width: 34ch; font-size: var(--t-petit); color: var(--encre-3); line-height: 1.55;}
.pied a {display: flex; align-items: center; min-height: 44px; width: fit-content;
font-size: var(--t-petit); color: var(--encre-2); text-decoration: none;}
.pied a:hover {color: var(--terracotta);}
.pied__mots {display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.1rem;
margin: var(--e-5) 0 var(--e-3); padding-top: var(--e-3);
border-top: 1px solid var(--filet);}
.pied__mots-titre {display: block; width: 100%;
font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: none;
color: var(--encre-3);}
.pied__mots a {display: inline; min-height: 0; font-size: .8125rem; color: var(--encre-2);}
.pied__mots a:hover {color: var(--terracotta);}
.pied__mots a.pied__mots-plus {color: var(--terracotta);}
.pied__bas {display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: space-between;
padding-top: var(--e-2); border-top: 1px solid var(--filet-2);
font-size: .75rem; color: var(--encre-3);}
.pied__bas a {display: inline; min-height: 0; font-size: .75rem;}
@media (max-width: 900px) {.pied__grille {grid-template-columns: 1fr 1fr;}}
@media (max-width: 520px) {.pied__grille {grid-template-columns: 1fr; gap: var(--e-3);}}
/* ============================================================================
GABARIT ACCUEIL — data/refonte-seo.md §3.1
Un écran, une idée, et les chiffres tôt. Le héros tient en deux colonnes :
la phrase à gauche, la preuve (le résultat de recherche) à droite ; la barre
des prix est posée sous la phrase, avant le premier défilement.
========================================================================== */
.heros {position: relative;
padding-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
padding-bottom: 0;
background: var(--papier);}
.heros > .grille {display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
column-gap: clamp(2rem, 5vw, 5rem);
align-items: start;}
.heros__bandeau {grid-column: 1 / -1;
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-1) var(--e-3);
padding-bottom: var(--e-2);
border-bottom: 1px solid var(--filet);
font-size: var(--t-label); letter-spacing: var(--tr-label); text-transform: none;
color: var(--encre-3);}
.heros__tags {display: inline-flex; gap: 1rem;}
.heros__tags span {color: var(--bronze-fonce);}
.heros__tags span + span::before {content: "·"; margin-right: 1rem; color: var(--bronze-clair);}
.heros__avis-note {color: var(--encre-3);}
.heros h1 {grid-column: 1 / -1; margin: clamp(1.75rem, 1rem + 2.6vw, 3.25rem) 0 0;
/* ⚠️ UNSLOP (9 novembre). Le titre tient sur les DEUX colonnes : mesuré, dans
la seule colonne de gauche (587 px à 1 440), « Un site qui se trouve. »
demande 700 px et « Partout en France. » 594 : les deux phrases tombaient
sur deux lignes, soit un heros de quatre lignes de deux mots. Pleine
largeur, chaque phrase tient sur une ligne et le titre reprend la fonction
d'affiche qu'il avait sur le tract. */
max-width: 24ch;
font-size: var(--t-heros);
line-height: var(--lh-heros);
letter-spacing: -.018em;}
.heros__sous {grid-column: 1; margin-top: var(--e-3);
max-width: 46ch;
font-size: 1.125rem; line-height: 1.6;
color: var(--encre-2);}
.heros__actions {grid-column: 1; display: flex; flex-wrap: wrap; gap: var(--e-2);
margin-top: var(--e-4);}
/* --- la barre des prix : le chiffre avant le discours ------------------- */
.tarifs-barre {grid-column: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin: var(--e-5) 0 0;
border-top: 1px solid var(--filet-fort);
border-bottom: 1px solid var(--filet-fort);}
.tarifs-barre > div {padding: var(--e-3) var(--e-3) var(--e-3) 0;}
.tarifs-barre > div + div {padding-left: var(--e-3); border-left: 1px solid var(--filet);}
.tarifs-barre dt {font-size: var(--t-label); font-weight: 600;
letter-spacing: var(--tr-label); text-transform: none; color: var(--encre-3);}
.tarifs-barre dd {margin: .35rem 0 0;
font-family: var(--serif); font-size: 1.5rem; font-weight: 600; line-height: 1.1;
letter-spacing: -.01em; color: var(--encre);
font-variant-numeric: lining-nums tabular-nums;}
.tarifs-unite {margin-left: .3rem;
font-family: var(--police); font-size: .875rem; font-weight: 500;
letter-spacing: 0; color: var(--encre-3);}
.tarifs-barre small {display: block; margin-top: .3rem; font-size: .75rem; line-height: 1.4; color: var(--encre-3);}
.tarifs-note {grid-column: 1; margin: .6rem 0 0; font-size: .75rem; color: var(--encre-3);}
/* ⚠️ LE BRONZE DU TEXTE EST LE BRONZE FONCÉ (passe unslop, 9 novembre).
Mesuré : #9a6a24 sur le papier donne 4,51:1 — conforme à un centième, donc
fragile (un écran, un réglage de couleur, et il passe sous le seuil). Toutes
les occurrences de bronze qui sont du TEXTE (téléphone du menu, signes +/− des
FAQ, numéros de sommaire, puces, survols, étiquettes d'offre, marque des pages
utilitaires) passent à --bronze-fonce (#8a5c1a, 5,54:1). Le bronze clair et le
bronze restent pour les filets, les bordures et les soulignements : là, aucune
règle de contraste ne s'applique. */
/* ⚠️ LA SIGNATURE (passe unslop, 9 novembre). Un trait de crayon de 2 px sous
chaque prix affiché : c'est le seul ornement du site, et il revient partout où
un chiffre compte — la barre des prix du héros, les deux offres de /pricing et
de /visibilite, et les plaques de chiffres des pages interieures (hub metier,
page ville, page devis) par la classe .prix-filet.
La ligne suit le texte (text-decoration), elle ne dessine donc pas un cadre de
plus dans des cellules deja bordees. */
/* ⚠️ Le filet porte sur le MONTANT seul : la description de la cellule ou l'unite
(``) reste hors du trait, sinon la phrase entiere se souligne.
⚠️ MESURE (9 novembre) : poser `text-decoration` sur le `` de /pricing ne
souligne pas le montant mais TOUTE la ligne du bloc (492 px de trait bronze au
lieu de 82). Le prix des offres est donc enveloppe dans un `` ; `.ofr-prix` ne porte plus que la typographie. */
.tarifs-prix, .prix-filet {text-decoration: underline;
text-decoration-color: var(--bronze);
text-decoration-thickness: 2px;
text-underline-offset: .16em;
text-decoration-skip-ink: none;}
/* --- les trois hubs : des portes, pas des boutons ----------------------- */
.heros__hubs {grid-column: 1; display: flex; flex-wrap: wrap; gap: 0 var(--e-4);
margin: var(--e-4) 0 0;
font-size: var(--t-micro);}
.heros__hubs a {display: inline-flex; align-items: center; min-height: 44px;
letter-spacing: .02em;
color: var(--encre-2); text-decoration: none;
border-bottom: 1px solid var(--filet-fort);
transition: color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease);}
.heros__hubs a:hover, .heros__hubs a:focus-visible {color: var(--terracotta); border-color: var(--terracotta);}
/* --- la preuve : le résultat de recherche ------------------------------- */
/* ⚠️⚠️ LA SCÈNE DU HÉROS (refonte visuelle, étape 12). Le héros n'a plus une
« carte avec une lueur derrière » : il a un DIORAMA. Quatre plans réels, en
CSS 3D, dans un seul contexte de perspective :
0. `.scene__plan` — une feuille de plan de ville quadrillée, couchée sous
les objets (rotateX 52°, translateZ −330 px). C'est elle qui donne le
sol, donc l'échelle ;
1. `.scene__fiche--c` — la fiche tarif, la plus profonde ;
2. `.scene__fiche--a` / `--b` — deux pages (métier, ville), à des
profondeurs différentes, inclinées en sens opposés ;
3. `.scene .serp` — la capture, au premier plan, légèrement tournée.
⚠️ POURQUOI DU CSS ET PAS UN MOTEUR 3D. La page porte déjà `globe3d.js`
(canvas 2D) pour le globe de la section suivante : un second moteur, WebGL
ou canvas, tournerait en même temps que lui et coûterait un contexte GPU au
premier rendu. Ici la profondeur est composée par le moteur de rendu, sur le
compositeur : 0 Ko de bibliothèque, 0 ms de script avant le premier pixel,
et un texte NET à toutes les densités (ce sont de vrais nœuds de texte, pas
un bitmap). Si `transform-style: preserve-3d` manque, les cartes restent
empilées à plat : le repli est la composition elle-même, sans script.
⚠️ AUCUNE DE CES TRANSFORMATIONS NE CHANGE LA BOÎTE : la scène occupe
exactement la place de la capture SERP, donc CLS = 0 par construction.
⚠️ Le relief ne vient pas d'un dégradé gris : chaque carte a une tranche
bronze (`0 2px 0 rgb(201 169 122/.30)`), un liseré de lumière en haut
(`inset 0 1px 0 white`) et une ombre TRIPLE teintée du brun de l'encre. */
.heros {overflow: clip;
/* ⚠️ UNSLOP (9 novembre). Le héros n'a plus de nappe radiale : c'était un
dégradé derrière le contenu, le premier signe de template. La couleur du
héros vient de l'objet, pas du fond — le diorama porte la lumière. */}
.heros__produit {grid-column: 2; grid-row: 3 / span 6;
align-self: center;
position: relative; isolation: isolate;
margin: 0;
padding: 0;
z-index: 2;
perspective: 1500px;
perspective-origin: 62% 38%;
transform: translate3d(0, var(--prof-y, 0px), 0);}
.scene {position: relative;
transform-style: preserve-3d;
/* --sc-ry : l'inclinaison de repos, 3° vers la gauche, pour que la scène se
lise comme un objet posé et non comme une capture d'écran. Le pointeur
ajoute --sc-rx / --sc-ry par-dessus (hero3d.js), jamais plus de 4°. */
/* ⚠️ La scène TOURNE au défilement : 6° de lacet et 2° de tangage sur la
traversée du héros, en plus du pointeur. C'est ce mouvement-là qui fait
lire un objet, pas un décor — et il ne coûte qu'une transformation, donc
il reste sur le compositeur. */
transform: rotateX(calc(5deg + var(--sc-rx, 0) * 1deg + var(--p, 0) * 2.5deg))
rotateY(calc(-5deg + var(--sc-ry, 0) * 1deg - var(--p, 0) * 6deg));
transition: transform .7s var(--ease-out);}
/* la lumière : un halo bronze derrière les objets, jamais devant le texte */
.scene__lueur {position: absolute; z-index: 0;
inset: -46% -40% -42%; pointer-events: none;
transform: translateZ(-460px);
background:
radial-gradient(44% 38% at 62% 26%, rgb(201 169 122 / .55), rgb(201 169 122 / 0) 72%),
radial-gradient(50% 44% at 34% 78%, rgb(168 67 42 / .12), rgb(168 67 42 / 0) 72%);}
/* le sol : une feuille de plan quadrillée, couchée dans la perspective */
.scene__plan {position: absolute; z-index: 0;
left: -52%; right: -44%; top: -52%; bottom: -46%;
pointer-events: none;
transform: translateZ(-380px) rotateX(50deg) rotateZ(-12deg);
background:
radial-gradient(58% 50% at 56% 42%, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 64%),
repeating-linear-gradient(0deg, rgb(154 106 36 / .34) 0 1px, rgb(154 106 36 / 0) 1px 46px),
repeating-linear-gradient(90deg, rgb(154 106 36 / .34) 0 1px, rgb(154 106 36 / 0) 1px 46px),
linear-gradient(152deg, rgb(249 243 231 / .92), rgb(236 225 204 / .55));
border: 0;
-webkit-mask-image: radial-gradient(72% 66% at 52% 46%, #000 58%, transparent 94%);
mask-image: radial-gradient(72% 66% at 52% 46%, #000 58%, transparent 94%);}
/* la pose : l'ombre portée de la capture sur le plan, large et chaude */
.scene__pose {position: absolute; z-index: 1;
left: 3%; right: -8%; top: 22%; bottom: -18%;
pointer-events: none;
transform: translateZ(-40px);
background: radial-gradient(56% 48% at 54% 60%, rgb(48 35 16 / .34), rgb(48 35 16 / 0) 72%);
filter: blur(12px);}
/* les fiches : du papier, une tranche bronze, une ombre à trois couches */
.scene__fiche {position: absolute; margin: 0;
width: 58%;
padding: .8rem .95rem .9rem;
background: linear-gradient(158deg, #fff, #fffcf5 68%);
border: 1px solid rgb(154 106 36 / .34);
border-bottom: 2px solid rgb(201 169 122 / .55);
border-radius: 2px;
box-shadow:
0 1px 0 rgb(255 255 255 / .9) inset,
0 2px 0 rgb(201 169 122 / .34),
0 26px 44px -30px rgb(48 35 16 / .55),
0 60px 90px -70px rgb(154 106 36 / .60);
transform-style: preserve-3d;
/* --p est la course du défilement (−1 → 1, posée par hero3d.js) ; --par est
la profondeur de parallaxe propre à chaque fiche. */
transform: translate3d(var(--tx, 0), calc(var(--ty, 0px) + var(--p, 0) * var(--par, 10) * -1px), var(--tz, 0))
rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg));
pointer-events: none;}
/* ⚠️ Les fiches sortent par les ANGLES, jamais par les côtés : la colonne de
droite ne fait que 461 px et le panneau SERP la remplit. Au-dessus et
au-dessous, le héros a 270 px de papier libre — c'est là que le relief se
voit. Un décalage latéral de plus de 20 % serait coupé par le bord. */
.scene__fiche--a {left: -14%; top: -31%; z-index: 2; width: 53%;
--tz: -90px; --ry: 18deg; --rz: -2.5deg; --par: 18;}
.scene__fiche--b {right: -2%; top: -28%; z-index: 3; width: 47%;
--tz: -60px; --ry: -18deg; --rz: 2.5deg; --par: 9;}
.scene__fiche--c {left: 5%; bottom: -25%; z-index: 2; width: 44%;
--tz: -150px; --ry: 14deg; --rz: -3.5deg; --par: 24;}
.scene__fiche-in {transform: translate3d(0, 0, 0);}
.scene__fiche-k {display: block;
font-size: .5625rem; font-weight: 600; letter-spacing: .02em; text-transform: none;
color: var(--bronze-fonce);}
.scene__fiche-t {margin: .3rem 0 .55rem;
font-family: var(--serif); font-size: 1.1875rem; font-weight: 600; line-height: 1.1;
letter-spacing: -.01em; color: var(--encre);}
.scene__fiche-l {display: block; height: 3px; margin-top: .3rem;
background: rgb(10 11 16 / .10); border-radius: 2px;}
.scene__fiche-l--court {width: 58%;}
.scene__fiche-b {display: inline-block; margin-top: .55rem;
padding: .12rem .38rem;
font-size: .5625rem; font-weight: 600; letter-spacing: .02em; text-transform: none;
color: var(--bronze-fonce);
border: 1px solid rgb(154 106 36 / .40); border-radius: 2px;}
/* la tranche : l'épaisseur du bloc de papier, visible sous le bord bas de la
capture. Sans elle, une carte blanche reste une image ; avec elle, c'est un
objet posé. */
.scene__tranche {position: absolute; z-index: 3;
inset: 0; pointer-events: none;
border-radius: 2px;
transform: translateZ(-14px) translate3d(5px, 8px, 0);
background: linear-gradient(178deg, #e6d5b6, #c9a97a 62%, #b08c52);
box-shadow: 0 10px 18px -12px rgb(48 35 16 / .55);}
/* la capture, au premier plan : 40 px devant, tournée de 4,5° */
.scene .serp {position: relative; z-index: 4;
/* ⚠️ La carte de tête se REDRESSE (+3,5°) pour compenser l'angle de la
scène : elle reste presque frontale, donc le texte de la capture reste net
et droit — c'est la profondeur des fiches derrière qui porte le relief,
pas l'inclinaison du contenu qu'on doit lire. */
transform: translateZ(50px) rotateY(3.5deg) rotateX(.6deg);
border-color: rgb(154 106 36 / .26);
box-shadow:
0 1px 0 rgb(255 255 255 / .9) inset,
0 18px 30px -22px rgb(48 35 16 / .50),
0 60px 90px -50px rgb(154 106 36 / .48),
0 120px 150px -110px rgb(48 35 16 / .45);}
/* la lumière bronze qui RASE le panneau : elle est dans l'objet, pas posée
par-dessus, et reste sous 18 % d'opacité pour ne pas salir le texte. */
.scene .serp::after {content: ""; position: absolute; inset: 0; z-index: 3;
pointer-events: none; border-radius: inherit;
background:
linear-gradient(116deg, rgb(201 169 122 / .20), rgb(201 169 122 / 0) 32%),
linear-gradient(292deg, rgb(154 106 36 / .10), rgb(154 106 36 / 0) 40%),
linear-gradient(180deg, rgb(255 255 255 / .35), rgb(255 255 255 / 0) 12%);}
.serp {background: var(--blanc);
border: 1px solid var(--filet-fort); border-radius: var(--r);
overflow: hidden; text-align: left;
box-shadow: var(--ombre-4), var(--relief);}
.serp__tete {display: flex; align-items: center; gap: .6rem;
padding: .8rem 1.1rem;
border-bottom: 1px solid var(--filet);
background: var(--papier-2);}
.serp__loupe {color: var(--encre-3); font-size: 1rem;}
.serp__req {flex: 1;
padding: .45rem .9rem;
background: var(--blanc); border: 1px solid var(--filet-fort); border-radius: var(--r-pilule);
font-size: .875rem; color: var(--encre);}
.serp__liste {padding: .25rem 1.1rem .5rem;}
.serp__res {padding: .9rem 0; border-bottom: 1px solid var(--filet-2);}
.serp__res:last-child {border-bottom: 0;}
.serp__site {font-size: .75rem; color: var(--encre-3);}
.serp__site span {color: var(--terracotta); font-weight: 600;}
.serp__titre {margin-top: .2rem;
font-family: var(--police);
font-size: .9375rem; font-weight: 600; line-height: 1.35;
/* La seule couleur froide du site, et elle est justifiée : c'est le bleu des
résultats de Google, pas un reste de l'ancien thème. Sans lui, la preuve ne
se lit plus comme un résultat de recherche. */
color: #1a0dab;}
.serp__dit {margin-top: .2rem; max-width: 78ch;
font-size: .8125rem; line-height: 1.5; color: var(--encre-3);}
.serp__res--nous {position: relative;}
.serp__res--nous::before {content: ""; position: absolute; left: -1.1rem; top: .7rem; bottom: .7rem;
width: 2px; background: var(--terracotta);}
.serp__note {padding: 0 1.1rem .9rem;
font-size: .75rem; line-height: 1.5; color: var(--encre-3);}
/* ⚠️ MOINS D'ANIMATION, ET RIEN DU TOUT SI LE SYSTÈME LE DEMANDE (étape 12).
La scène garde sa composition (perspective, plans, ombres) : elle est
simplement immobile. Ce n'est pas un fallback dégradé, c'est la même image. */
@media (prefers-reduced-motion: reduce) {
.scene {transition: none;}
}
/* ⚠️ LA MESURE DE LECTURE DES GABARITS .doc- ET .hub- (étape 6). Une colonne de
texte ne court pas sur 1 120 px : 780 px, soit environ 75 caractères. La
règle est posée ici, à la même spécificité que `main > section > .grille`,
sinon elle ne s'applique pas. */
main.page > section > .grille.doc-colonne,
main.page > section > .grille.hub-colonne {max-width: calc(780px + 2 * var(--marge));}
/* --- les sections de l'accueil ------------------------------------------ */
.sec__tete .kicker {margin-bottom: var(--e-2);}
.appel {position: relative;
padding: var(--e-6) clamp(1.5rem, 4vw, 3.5rem);
background: var(--encre); color: var(--papier);
border-radius: var(--r);
text-align: left;}
.appel h2 {max-width: 24ch; font-size: var(--t-section); color: var(--papier);}
.appel p {margin-top: var(--e-3); max-width: 46ch; color: rgb(251 250 246 / .78);}
.appel__actions {display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4);}
.appel::before, .appel::after {content: none;}
.bandeau-produit {display: flex; align-items: center; justify-content: space-between;
gap: var(--e-3);
padding: var(--e-3) var(--e-4);
background: var(--papier-2);
border-left: 2px solid var(--bronze);}
.bandeau-produit p {max-width: 66ch; font-size: var(--t-petit); color: var(--encre-2);}
.bandeau-produit strong {color: var(--encre);}
@media (max-width: 760px) {.bandeau-produit {flex-direction: column; align-items: flex-start;}}
/* --- les six chiffres de la page ---------------------------------------- */
.chiffres {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
margin: var(--e-2) 0 0;
border-top: 1px solid var(--filet-fort);
border-bottom: 1px solid var(--filet-fort);}
.chiffres > div {padding: var(--e-3) var(--e-3) var(--e-3) 0;}
.chiffres > div + div {padding-left: var(--e-3); border-left: 1px solid var(--filet);}
.chiffres b {display: block;
font-family: var(--serif); font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 600;
line-height: 1; letter-spacing: -.01em;
font-variant-numeric: lining-nums tabular-nums;
color: var(--encre);}
.chiffres span {display: block; margin-top: .5rem;
font-size: var(--t-label); letter-spacing: .02em; text-transform: none;
color: var(--encre-3);}
.duo__note {max-width: 68ch; margin: var(--e-4) auto 0;
font-size: var(--t-petit); line-height: 1.6; color: var(--encre-3); text-align: center;}
/* --- la question fréquente : un filet, une réponse ---------------------- */
.faq {border-top: 1px solid var(--filet-fort);}
.faq details {border-bottom: 1px solid var(--filet);}
.faq summary {display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3);
padding: var(--e-3) 0;
list-style: none; cursor: pointer;
font-family: var(--serif); font-size: 1.125rem; font-weight: 600; line-height: 1.35;
color: var(--encre);}
.faq summary::-webkit-details-marker {display: none;}
.faq summary::after {content: "+"; flex: 0 0 auto;
font-family: var(--police); font-size: 1.125rem; font-weight: 400;
color: var(--bronze-fonce);
transition: transform var(--t-ui) var(--ease);}
.faq details[open] summary::after {content: "\2212";}
.faq details p {padding: 0 0 var(--e-3); max-width: 72ch;
font-size: var(--t-petit); line-height: 1.65; color: var(--encre-2);}
@media (prefers-reduced-motion: reduce) {.faq summary::after {transition: none;}}
/* --- les deux objets animés : le globe et l'anneau ---------------------- */
.globe-sec {overflow: hidden;}
.globe-cadre, .noyau-cadre {position: relative; margin: 0 auto;
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 80%);
mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 80%);}
.globe-cadre {width: min(100%, 600px); aspect-ratio: 1 / 1;}
.noyau-cadre {width: min(100%, 440px); aspect-ratio: 1.5 / 1; margin-bottom: var(--e-5);}
#globe, #noyau {display: block; width: 100%; height: 100%;}
.globe-legende {display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; justify-content: center;
margin-top: calc(-1 * var(--e-2));
font-size: .75rem; letter-spacing: .04em; color: var(--encre-3);}
.globe-legende span {display: inline-flex; align-items: center; gap: .4rem;}
.globe-legende i {width: 5px; height: 5px; background: var(--bronze);}
[data-incline] {transition: border-color var(--t-ui) var(--ease);}
#site, #reste, #questions {scroll-margin-top: 88px;}
/* --- les points de rupture de l'accueil --------------------------------- */
@media (max-width: 1023px) {
.heros > .grille {grid-template-columns: 1fr;}
.heros h1, .heros__sous, .heros__actions, .tarifs-barre, .tarifs-note, .heros__hubs,
.heros__produit {grid-column: 1;}
/* ⚠️ L'ORDRE AU TÉLÉPHONE (refonte visuelle, étape 12). La scène passe AVANT
les prix : c'est elle qui doit se voir au premier défilement, sinon le
propriétaire — qui juge d'abord sur téléphone — ne voit toujours qu'une
colonne de texte. Les prix restent à moins de 1 300 px du haut, bien avant
la limite de 2 000 px, et le SERP remonte de 400 px par rapport à avant. */
.heros__bandeau {order: 0;}
.heros h1 {order: 1;}
.heros__sous {order: 2;}
.heros__actions {order: 3;}
.heros__produit {order: 4;}
.tarifs-barre {order: 5;}
.tarifs-note {order: 6;}
.heros__hubs {order: 7;}
/* 96 px de respiration avant la scène : c'est la place des deux feuilles qui
dépassent au-dessus de la capture. Sans elle, elles sont rognées par le
bouton et la profondeur ne se lit pas. */
/* ⚠️ LA PERSPECTIVE DU TÉLÉPHONE EST PLUS LONGUE (1 700 px, pas 1 000). À
1 000 px, l'inclinaison de 11° grossissait le bas de la capture de 11 % :
le panneau sortait de 5 à 6 px de chaque côté, bord et coins coupés par le
bord de l'écran. Mesuré à 360, 390 et 430 px. À 1 700 px il rentre, et le
retrait de 10 px lui laisse une marge franche des deux côtés. */
.heros__produit {grid-row: auto; margin-top: calc(var(--e-5) + 48px); max-width: 640px;
padding-inline: 10px;
perspective: 1700px; perspective-origin: 52% 42%;}
.scene {transform: rotateX(calc(11deg + var(--sc-rx, 0) * 1deg + var(--p, 0) * 2deg))
rotateY(calc(-4deg + var(--sc-ry, 0) * 1deg - var(--p, 0) * 6deg));}
.scene__plan {left: -34%; right: -30%; top: -26%; bottom: -26%;}
/* ⚠️ AU TÉLÉPHONE, LA SCÈNE DEVIENT UNE PILE (refonte visuelle, étape 12).
La colonne n'a que 350 px : un éventail latéral serait coupé par les bords.
Les trois fiches prennent donc la largeur de la capture et se posent
DERRIÈRE elle, décalées vers le haut et tournées de 2 à 3° : on lit leurs
tranches comme une rame de pages, et la capture reste au premier plan.
C'est le même balisage que sur bureau — seules les positions changent. */
/* Au téléphone, les feuilles ne montrent que leur EN-TÊTE (surtitre + titre).
Une fiche coupée au milieu d'un mot par le bord de la capture se lit comme
un bug ; un en-tête coupé net après le titre se lit comme une rame. */
.scene__fiche {padding: .45rem .6rem .5rem;}
.scene__fiche-l, .scene__fiche-b {display: none;}
.scene__fiche-t {margin: .15rem 0 .1rem;}
.scene__fiche--a {left: -4%; top: -19%; bottom: auto; width: 55%; --tz: -30px;
--ry: 0deg; --rz: -3deg; --par: 4;}
.scene__fiche--b {right: -2%; top: -17%; bottom: auto; width: 52%; --tz: -64px;
--ry: 0deg; --rz: 3.4deg; --par: 6;}
/* la fiche tarif ne sert à rien au téléphone : les prix sont trois lignes plus
bas, et elle mangerait la place du prix. Elle reste dans le balisage (le
même que sur bureau) et n'est simplement pas peinte. */
.scene__fiche--c {display: none;}
.scene__fiche-t {font-size: .9375rem;}
.heros__actions {margin-top: var(--e-4);}
.heros__hubs {margin-top: var(--e-2);}
.tarifs-barre {margin-top: var(--e-4);}
}
@media (max-width: 620px) {
.heros {padding-top: var(--e-4);}
.heros__bandeau {font-size: .6875rem;}
.heros__avis-note {display: none;}
.heros h1 {max-width: none; letter-spacing: -.014em;}
.heros__sous {font-size: 1.0625rem;}
.heros__actions .btn {width: 100%;}
.tarifs-barre {grid-template-columns: 1fr; margin-top: var(--e-4);}
.tarifs-barre > div {padding: .7rem 0;}
.tarifs-barre dd {margin-top: .15rem;}
.tarifs-barre > div + div {padding-left: 0; border-left: 0; border-top: 1px solid var(--filet);}
.tarifs-barre dd {font-size: 1.25rem;}
.chiffres {grid-template-columns: 1fr 1fr;}
.chiffres > div {padding: var(--e-3) var(--e-2) var(--e-3) 0;}
.chiffres > div:nth-child(odd) {padding-left: 0; border-left: 0;}
.chiffres > div:nth-child(even) {padding-left: var(--e-3); border-left: 1px solid var(--filet);}
.chiffres > div:nth-child(n+3) {border-top: 1px solid var(--filet);}
.chiffres b {font-size: 1.75rem;}
.carte {padding: var(--e-3);}
.appel {padding: var(--e-5) var(--e-3);}
.appel .btn {width: 100%;}
}
/* ============================================================================
GABARIT HUB MÉTIER — /prix/ (refonte étape 2 et 7, refonte-seo.md §3.2)
Un seul bloc, préfixé .hub- : rien ici ne fuit sur une autre page. Toutes les
valeurs viennent des jetons ; aucune couleur ni taille en dur.
⚠️ REFONTE VISUELLE (étape 7). Le hub reprend exactement les dispositifs de
l'accueil : titre en P052, surtitre en capitales espacées, chiffres entre deux
filets comme la grille de prix du tract, encart sur la nappe avec un trait
bronze, FAQ à filets. Un métier n'est pas une page à part : c'est la même page,
avec d'autres chiffres.
========================================================================== */
.hub-tete {position: relative; isolation: isolate; overflow: clip;
padding-block: clamp(2rem, 1.5rem + 2vw, 3rem) var(--e-6);
border-bottom: 1px solid var(--filet);}
/* la lumière du hub : un halo bronze derrière la tête, à droite du titre. Il ne
porte aucun contenu et ne capte aucun clic ; c'est ce qui fait lire la page
comme un objet éclairé et non comme une feuille plate. */
.hub-tete::before {content: ""; position: absolute; z-index: -1;
inset: -18% -12% auto auto; width: min(62%, 720px); height: 420px;
pointer-events: none; background: var(--lueur-bronze);}
.hub-fil {display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
font-size: .8125rem; color: var(--encre-3);}
.hub-fil a {color: var(--encre-3); border-bottom: 1px solid transparent;}
.hub-fil a:hover {color: var(--terracotta); border-color: var(--terracotta);}
.hub-surtitre {margin-top: var(--e-5);
font-size: var(--t-label); font-weight: 600;
letter-spacing: var(--tr-label); text-transform: none;
color: var(--bronze-fonce);}
.hub-h1 {margin-top: var(--e-2); max-width: 20ch;
font-size: var(--t-page); line-height: 1.04; letter-spacing: -.022em;
color: var(--encre);}
.hub-reponse {margin-top: var(--e-3); max-width: 62ch;
font-size: 1.125rem; line-height: 1.6; color: var(--encre-2);}
/* ⚠️ LA PLAQUE DU HUB (étape 10). Les trois chiffres étaient deux filets nus,
exactement le dessin de la page de données avant l'étape 8 : le hub était donc
la seule famille où le prix n'avait aucun poids. C'est maintenant la même
plaque que .doc-chiffres, avec le halo bronze et une inclinaison de 1,2° dans
la perspective : trois plans lisibles (lueur, tranche claire, ombre) au lieu
d'un encadré. La transformation ne touche pas la boîte : aucun CLS. */
.hub-chiffres {position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0; margin: var(--e-5) 0 0; max-width: 780px;
padding: var(--e-2) var(--e-3) var(--e-2);
background-color: var(--blanc); background-image: var(--lueur);
border: 1px solid var(--filet); border-radius: var(--r-m);
box-shadow: var(--ombre-2), var(--halo-bronze), var(--relief);
transform: perspective(var(--perspective)) rotateX(1.2deg);
transform-origin: 50% 0;
transition: box-shadow var(--t-surface) var(--ease), transform var(--t-surface) var(--ease);}
.hub-chiffres > div {padding: var(--e-3) var(--e-3) var(--e-3) 0;}
.hub-chiffres > div:first-child {padding-left: var(--e-1);}
.hub-chiffres > div + div {padding-left: var(--e-3); border-left: 1px solid var(--filet);}
.hub-chiffres dt {font-size: var(--t-label); font-weight: 600;
letter-spacing: var(--tr-label); text-transform: none; color: var(--encre-3);}
.hub-chiffres dd {margin: .35rem 0 0;
font-family: var(--serif); font-size: 1.5rem; font-weight: 600; line-height: 1.1;
letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums;
color: var(--encre);}
.hub-chiffres small {font-family: var(--police); font-size: .8125rem; font-weight: 500; color: var(--encre-3);}
.hub-actions {display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4);}
.hub-sec {padding-block: var(--rythme);}
.hub-sec--nappe {background: var(--papier-2); border-block: 1px solid var(--filet-2);}
.hub-colonne {max-width: calc(780px + 2 * var(--marge));}
.hub-h2 {font-size: var(--t-section); line-height: var(--lh-titre); letter-spacing: var(--tr-titre);
color: var(--encre);}
.hub-h3 {margin-top: var(--e-5); font-family: var(--serif); font-size: 1.375rem; font-weight: 600;
line-height: 1.25; letter-spacing: var(--tr-titre); color: var(--encre);}
.hub-dit {margin-top: var(--e-2); max-width: 66ch; font-size: var(--t-corps); line-height: var(--lh-corps); color: var(--encre-2);}
/* le tableau est une feuille posée, pas une grille à même le papier : c'est le
seul objet de la page qui porte assez de lignes pour avoir besoin d'un cadre. */
.hub-panneau {margin-top: var(--e-4); padding: var(--e-4) var(--e-4) var(--e-2);
background-color: var(--blanc); background-image: var(--lueur);
border: 1px solid var(--filet); border-top-color: rgb(201 169 122 / .55);
border-radius: var(--r-m);
box-shadow: var(--ombre-2), var(--relief);}
.hub-table {width: 100%; margin: 0; border-collapse: collapse;
font-variant-numeric: lining-nums tabular-nums;}
.hub-table tbody tr:last-child > * {border-bottom: 0;}
.hub-table__legende {padding-bottom: .6rem; text-align: left; font-size: .8125rem; color: var(--encre-3);}
.hub-table thead th {padding: 0 1rem .6rem; text-align: left;
font-size: var(--t-label); font-weight: 600; letter-spacing: var(--tr-label);
text-transform: none; color: var(--encre-3);
border-bottom: 1px solid var(--filet-fort);}
.hub-table thead th:nth-child(n+3) {text-align: right;}
.hub-table tbody th {padding: 1rem; text-align: left; font-size: var(--t-corps); font-weight: 500;
color: var(--encre); border-bottom: 1px solid var(--filet-2);}
.hub-table tbody td {padding: 1rem; font-size: var(--t-petit); color: var(--encre-2);
border-bottom: 1px solid var(--filet-2);}
.hub-table tbody td:nth-child(n+2) {text-align: right;}
.hub-table tbody td:last-child {font-weight: 600; color: var(--encre);}
.hub-encart {margin-top: var(--e-5); padding: var(--e-4);
max-width: 70ch;
background-color: var(--papier-2); background-image: var(--lueur);
border: 1px solid var(--filet); border-left: 3px solid var(--bronze);
border-radius: 0 var(--r-m) var(--r-m) 0;
box-shadow: var(--ombre-2), var(--relief);}
.hub-encart p {margin-top: .6rem; font-size: var(--t-corps); line-height: var(--lh-corps); color: var(--encre-2);}
.hub-encart .hub-h3 {margin-top: 0;}
.hub-facteurs {display: grid; gap: 0; margin-top: .75rem;}
.hub-facteurs > div {padding: var(--e-3) 0; border-bottom: 1px solid var(--filet-2);}
.hub-facteurs dt {font-family: var(--serif); font-size: var(--t-corps); font-weight: 600; color: var(--encre);}
.hub-facteurs dd {margin: .4rem 0 0; max-width: 70ch; font-size: var(--t-petit); line-height: 1.6; color: var(--encre-2);}
.hub-liste {display: grid; gap: .6rem; margin-top: .75rem;}
.hub-liste li {position: relative; padding-left: 1.35rem; line-height: 1.6; color: var(--encre-2);}
.hub-liste li::before {content: ""; position: absolute; left: 2px; top: .68em;
width: 7px; height: 1px; background: var(--bronze);}
.hub-faq {margin-top: var(--e-4); border-top: 1px solid var(--filet-fort);}
.hub-faq details {border-bottom: 1px solid var(--filet);}
.hub-faq summary {display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3);
padding: var(--e-3) 0; list-style: none; cursor: pointer;
font-family: var(--serif); font-size: 1.125rem; font-weight: 600; line-height: 1.35;
color: var(--encre);}
.hub-faq summary::-webkit-details-marker {display: none;}
.hub-faq summary::after {content: "+"; flex: 0 0 auto;
font-family: var(--police); color: var(--bronze-fonce);
transition: transform var(--t-ui) var(--ease);}
.hub-faq details[open] summary::after {content: "\2212";}
.hub-faq p {padding: 0 0 var(--e-3); max-width: 72ch; font-size: var(--t-petit);
line-height: 1.65; color: var(--encre-2);}
.hub-villes {display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: var(--e-3); line-height: 1.9;}
.hub-villes a {font-size: var(--t-petit); color: var(--encre);
border-bottom: 1px solid var(--filet-fort); padding-bottom: 1px;}
.hub-villes a:hover {color: var(--terracotta); border-color: var(--terracotta);}
.hub-villes a span {margin-left: 2px; font-size: .75rem; color: var(--encre-3);}
#prix, #facteurs, #faq, #villes, #metiers {scroll-margin-top: 88px;}
@media (max-width: 760px) {
.hub-chiffres {grid-template-columns: 1fr; max-width: none;
padding: 0 var(--e-3); transform: none;}
.hub-chiffres > div:first-child {padding-left: 0;}
.hub-panneau {padding: var(--e-3) var(--e-3) var(--e-1);}
.hub-chiffres > div {display: flex; justify-content: space-between; align-items: baseline;
gap: .75rem; padding: .7rem 0;}
.hub-chiffres > div + div {padding-left: 0; border-left: 0; border-top: 1px solid var(--filet);}
.hub-chiffres dd {margin: 0; font-size: 1.25rem;}
.hub-actions .btn {width: 100%;}
}
@media (max-width: 620px) {
.hub-table, .hub-table tbody, .hub-table tr, .hub-table th, .hub-table td {display: block; width: 100%;}
.hub-table thead {display: none;}
.hub-table tr {padding: var(--e-2) 0; border-bottom: 1px solid var(--filet-2);}
.hub-table tbody th {padding: 0 0 .4rem; border: 0; font-weight: 600;}
.hub-table tbody td {display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0; border: 0;}
.hub-table tbody td::before {content: attr(data-libelle); font-size: .8125rem; color: var(--encre-3);}
.hub-encart {padding: var(--e-3);}
.hub-tete::before {inset: -8% -20% auto auto; height: 300px;}
}
@media (prefers-reduced-motion: reduce) {
.hub-faq summary::after {transition: none;}
.hub-chiffres {transition: none;}
}
/* ============================================================================
GABARIT PAGE DE DONNÉES — /prix-travaux-2026 et /methode
(refonte étape 3, data/refonte-seo.md §3.4). Un seul bloc, préfixé .doc- :
les deux pages partagent le même corps (entête, chiffres, tableau, citation)
parce qu'elles racontent la même donnée, l'une par le classement, l'autre par
la méthode. Aucune valeur en dur : tout vient des jetons.
========================================================================== */
.doc-tete {padding-block: clamp(2rem, 1.5rem + 2vw, 3rem) var(--e-6);
border-bottom: 1px solid var(--filet);}
.doc-fil {display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
font-size: .8125rem; color: var(--encre-3);}
.doc-fil a {color: var(--encre-3); border-bottom: 1px solid transparent;}
.doc-fil a:hover {color: var(--terracotta); border-color: var(--terracotta);}
.doc-surtitre {margin-top: var(--e-5);
font-size: var(--t-label); font-weight: 600; letter-spacing: var(--tr-label);
text-transform: none; color: var(--bronze-fonce);}
.doc-h1 {margin-top: var(--e-2); max-width: 22ch;
font-size: var(--t-page); line-height: 1.04; letter-spacing: -.022em;
color: var(--encre);}
.doc-reponse {margin-top: var(--e-3); max-width: 64ch;
font-size: 1.125rem; line-height: 1.6; color: var(--encre-2);}
/* ⚠️ LA PLAQUE DES CHIFFRES (étape 8). Elle était deux filets nus ; c'est
maintenant une plaque de papier blanc posée sur la page, avec le liseré de
lumière et l'ombre d'un objet de 90 € : c'est le premier endroit où le
visiteur lit un prix, il doit avoir du poids. */
.doc-chiffres {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0; margin: var(--e-5) 0 0; max-width: 900px;
padding-inline: var(--e-3);
background-color: var(--blanc); background-image: var(--lueur);
border: 1px solid var(--filet); border-radius: var(--r);
box-shadow: var(--ombre-1), var(--relief);}
.doc-chiffres > div {padding: var(--e-3) var(--e-3) var(--e-3) 0;}
.doc-chiffres > div + div {padding-left: var(--e-3); border-left: 1px solid var(--filet);}
.doc-chiffres dt {font-size: var(--t-label); font-weight: 600; letter-spacing: var(--tr-label);
text-transform: none; color: var(--encre-3);}
.doc-chiffres dd {margin: .35rem 0 0; font-family: var(--serif);
font-size: 1.5rem; font-weight: 600; line-height: 1.1;
letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; color: var(--encre);}
.doc-chiffres small {font-family: var(--police); font-size: .8125rem; font-weight: 500; color: var(--encre-3);}
.doc-actions {display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4);}
.doc-sec {padding-block: var(--rythme);}
.doc-sec--nappe {background: var(--papier-2); border-block: 1px solid var(--filet-2);}
.doc-colonne {max-width: calc(780px + 2 * var(--marge));}
.doc-h2 {font-size: var(--t-section); line-height: var(--lh-titre); letter-spacing: var(--tr-titre);
color: var(--encre);}
.doc-dit {margin-top: var(--e-2); max-width: 70ch; font-size: var(--t-corps); line-height: var(--lh-corps);
color: var(--encre-2);}
.doc-dit + .doc-dit {margin-top: .75rem;}
.doc-dit strong {color: var(--encre); font-weight: 600;}
.doc-sec code {font-family: var(--mono, ui-monospace, SFMono-Regular, monospace);
font-size: .875em; background: rgb(154 106 36 / .09); color: var(--encre);
padding: .12em .34em; border-radius: 2px;}
.doc-table {width: 100%; margin-top: var(--e-4); border-collapse: collapse;
font-variant-numeric: tabular-nums;}
.doc-table__legende {padding-bottom: 10px; text-align: left; font-size: .8125rem; color: var(--encre-3);}
.doc-table thead th {padding: 0 1rem .6rem; text-align: left; font-size: var(--t-label); font-weight: 600;
letter-spacing: var(--tr-label); text-transform: none; color: var(--encre-3);
border-bottom: 1px solid var(--filet-fort); white-space: nowrap;}
.doc-table thead th:nth-child(n+4) {text-align: right;}
.doc-table tbody th {padding: .8rem 1rem; text-align: left; font-weight: 500; font-size: var(--t-corps);
color: var(--encre); border-bottom: 1px solid var(--filet-2);}
.doc-table tbody td {padding: .8rem 1rem; font-size: var(--t-petit); color: var(--encre-2);
border-bottom: 1px solid var(--filet-2);}
.doc-table tbody .doc-num {text-align: right;}
.doc-table tbody tr:hover {background: rgb(154 106 36 / .05);}
.doc-table__haut th, .doc-table__bas th {font-weight: 600;}
.doc-table__haut td, .doc-table__bas td {color: var(--encre);}
.doc-table__haut {box-shadow: inset 2px 0 0 var(--terre);}
.doc-table__bas {box-shadow: inset 2px 0 0 var(--bronze-clair);}
.doc-table .doc-code {margin-left: 4px; font-size: .75rem; color: var(--encre-3);
font-variant-numeric: tabular-nums;}
.doc-table .doc-num {font-variant-numeric: tabular-nums;}
.doc-table .doc-fort {font-weight: 600; color: var(--encre);}
.doc-table a {border-bottom: 1px solid var(--filet-fort);}
.doc-citation {margin: var(--e-4) 0 0; padding: var(--e-4);
background-color: var(--blanc); background-image: var(--lueur);
border: 1px solid var(--filet); border-left: 3px solid var(--bronze);
border-radius: 0 var(--r) var(--r) 0;
box-shadow: var(--ombre-2), var(--relief);}
.doc-citation blockquote {margin: 0; font-family: var(--serif); font-size: 1.125rem; line-height: 1.5; color: var(--encre);}
.doc-citation figcaption {margin-top: 14px; font-size: .8125rem; color: var(--encre-3);}
.doc-copier {margin-left: .5rem; padding: .3rem .7rem; border: 1px solid var(--filet-fort);
border-radius: var(--r); background: var(--blanc); font-size: .75rem; font-weight: 600;
color: var(--encre); cursor: pointer;}
.doc-copier:hover {border-color: var(--terracotta); color: var(--terracotta);}
.doc-liste {display: grid; gap: .6rem; margin-top: var(--e-2); max-width: 70ch;}
.doc-liste li {position: relative; padding-left: 20px; font-size: .9375rem; line-height: 1.65;
color: var(--encre-2);}
.doc-liste li::before {content: ""; position: absolute; left: 2px; top: .7em;
width: 7px; height: 1px; background: var(--bronze);}
.doc-liste--puces {margin-top: 12px;}
.doc-sommaire {margin-top: 16px; padding-left: 1.15em; display: grid; gap: 8px;
font-size: 1.0625rem; color: var(--encre-2);}
.doc-sommaire li {list-style: decimal;}
.doc-sommaire a {border-bottom: 1px solid var(--filet-fort);}
.doc-sommaire a:hover {border-color: var(--terracotta); color: var(--terracotta);}
.doc-facteurs {display: grid; margin-top: 12px;}
.doc-facteurs > div {padding: 15px 0; border-bottom: 1px solid var(--filet-2);}
.doc-facteurs dt {font-family: var(--serif); font-size: var(--t-corps); font-weight: 600; color: var(--encre);}
.doc-facteurs dd {margin: 5px 0 0; max-width: 70ch; font-size: .9375rem; line-height: 1.62;
color: var(--encre-2);}
.doc-liens {display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; line-height: 1.9;}
.doc-liens a {font-size: .9375rem; color: var(--encre); border-bottom: 1px solid var(--filet-fort);}
.doc-liens a:hover {color: var(--terracotta); border-color: var(--terracotta);}
#classement, #citation, #csv, #limites, #metiers,
#sommaire, #panier, #coefficients, #licence, #qui {scroll-margin-top: 92px;}
@media (max-width: 860px) {.doc-chiffres {grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 620px) {
.doc-chiffres {max-width: none;}
.doc-table, .doc-table tbody, .doc-table tr, .doc-table th, .doc-table td {display: block; width: 100%;}
.doc-table thead {display: none;}
.doc-table tr {padding: var(--e-2) 0; border-bottom: 1px solid var(--filet-2);}
.doc-table tbody th {padding: 0 0 6px; border: 0; font-size: 1.0625rem; font-weight: 600;}
.doc-table tbody td {display: flex; justify-content: space-between; gap: 16px;
padding: 2px 0; border: 0;}
.doc-table tbody td::before {content: attr(data-libelle); font-size: .8125rem;
color: var(--encre-3);}
.doc-table__haut, .doc-table__bas {box-shadow: none; background: rgb(154 106 36 / .05);}
.doc-table .doc-rang {display: none;}
.doc-actions .btn {width: 100%;}
}
/* ============================================================================
GABARIT ARTICLE — /blog/ et /blog (refonte étape 4, data/refonte-seo.md §3.5)
Un seul bloc, préfixé .art- : la page d'article et l'index du journal
partagent la même tête, la même mesure de lecture et les mêmes cartes.
Rien ici ne fuit sur une autre page, et aucune valeur n'est en dur : couleurs,
rayons et durées viennent des jetons.
⚠️ CE QUE LE GABARIT DOIT AU SEO (§3.5) : la réponse est le premier bloc
lisible (60 mots avant tout ornement), l'auteur et les deux dates sont dans
le corps du texte, et les sources sortantes sont de vrais liens, pas des
mentions en gras. Ce qui se lit est du texte sélectionnable.
========================================================================== */
.art-tete {padding-block: clamp(2rem, 1.5rem + 2vw, 3rem) var(--e-6);
border-bottom: 1px solid var(--filet);}
.art-fil {display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
font-size: .8125rem; color: var(--encre-3);}
.art-fil a {color: var(--encre-3); border-bottom: 1px solid transparent;}
.art-fil a:hover {color: var(--terracotta); border-color: var(--terracotta);}
.art-surtitre {margin-top: var(--e-5);
font-size: var(--t-label); font-weight: 600; letter-spacing: var(--tr-label);
text-transform: none; color: var(--bronze-fonce);}
.art-h1 {margin-top: var(--e-2); max-width: 24ch;
font-size: var(--t-page); line-height: 1.04; letter-spacing: -.022em;
color: var(--encre);}
.art-reponse {margin-top: var(--e-3); max-width: 62ch;
font-size: 1.125rem; line-height: 1.6; color: var(--encre-2);}
.art-signature {margin-top: var(--e-2); display: flex; flex-wrap: wrap; gap: .4rem .9rem;
font-size: .8125rem; color: var(--encre-3); line-height: 1.7;}
.art-signature a {color: var(--encre-2); border-bottom: 1px solid var(--filet-fort);}
.art-signature a:hover {color: var(--terracotta); border-color: var(--terracotta);}
.art-signature time {font-variant-numeric: tabular-nums;}
/* même plaque que le hub et la page de données : un article qui cite trois
chiffres les pose, il ne les souligne pas. */
.art-chiffres {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0; margin: var(--e-5) 0 0; max-width: 700px;
padding: var(--e-2) var(--e-3);
background-color: var(--blanc); background-image: var(--lueur);
border: 1px solid var(--filet); border-radius: var(--r-m);
box-shadow: var(--ombre-2), var(--halo-bronze), var(--relief);
transform: perspective(var(--perspective)) rotateX(1.2deg);
transform-origin: 50% 0;}
.art-chiffres > div:first-child {padding-left: var(--e-1);}
.art-chiffres > div {padding: var(--e-3) var(--e-3) var(--e-3) 0;}
.art-chiffres > div + div {padding-left: var(--e-3); border-left: 1px solid var(--filet);}
.art-chiffres dt {font-size: var(--t-label); font-weight: 600; letter-spacing: var(--tr-label);
text-transform: none; color: var(--encre-3);}
.art-chiffres dd {margin: .35rem 0 0; font-family: var(--serif); font-size: 1.5rem; font-weight: 600;
line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; color: var(--encre);}
.art-chiffres small {font-family: var(--police); font-size: .8125rem; font-weight: 500; color: var(--encre-3);}
.art-actions {display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4);}
/* --- le corps : une colonne de lecture, un sommaire qui ne bouge pas ------- */
.art-corps {padding-block: var(--e-6) var(--rythme);}
.art-couple {display: grid; grid-template-columns: minmax(0, 1fr) 250px;
gap: clamp(28px, 5vw, 72px); align-items: start;}
.art-prose {min-width: 0; max-width: 70ch;}
.art-prose > *:first-child {margin-top: 0;}
.art-prose h2 {margin-top: var(--e-6);
font-size: var(--t-lecture); line-height: 1.15; letter-spacing: var(--tr-titre);
color: var(--encre); text-wrap: balance;}
.art-prose h3 {margin-top: var(--e-4); font-family: var(--serif); font-size: 1.25rem; font-weight: 600;
line-height: 1.3; letter-spacing: var(--tr-titre); color: var(--encre);}
.art-prose p {margin-top: .8rem; font-size: var(--t-corps); line-height: var(--lh-lecture); color: var(--encre-2);}
.art-prose p strong {color: var(--encre); font-weight: 600;}
.art-prose ul, .art-prose ol {margin: 12px 0 0; padding-left: 1.15em; display: grid; gap: 8px;}
.art-prose li {font-size: var(--t-corps); line-height: var(--lh-lecture); color: var(--encre-2);}
.art-prose li::marker {color: var(--bronze-fonce);}
.art-prose a {color: var(--encre); border-bottom: 1px solid var(--filet-fort);}
.art-prose a:hover {color: var(--terracotta); border-color: var(--terracotta);}
.art-prose a[href^="http"]::after {content: " ↗"; font-size: .875em; color: var(--encre-3);}
.art-encart {margin-top: var(--e-5); padding: var(--e-4);
background-color: var(--papier-2); background-image: var(--lueur);
border: 1px solid var(--filet); border-left: 3px solid var(--bronze);
border-radius: 0 var(--r-m) var(--r-m) 0;
box-shadow: var(--ombre-2), var(--relief);}
.art-encart__titre {font-family: var(--serif); font-size: 1.125rem; font-weight: 600;
letter-spacing: var(--tr-titre); text-transform: none; color: var(--encre);}
.art-encart ul {margin-top: 10px; padding-left: 1.15em;}
.art-encart li {font-size: var(--t-petit); line-height: 1.6;}
.art-table {width: 100%; margin-top: var(--e-4); border-collapse: collapse;
font-variant-numeric: tabular-nums;}
.art-table caption {padding-bottom: 10px; text-align: left; font-size: .8125rem; color: var(--encre-3);}
.art-table thead th {padding: 0 .9rem .6rem; text-align: left; font-size: var(--t-label); font-weight: 600;
letter-spacing: var(--tr-label); text-transform: none; color: var(--encre-3);
border-bottom: 1px solid var(--filet-fort);}
.art-table thead th:last-child {text-align: right;}
.art-table tbody th {padding: .8rem .9rem; text-align: left; font-size: var(--t-corps); font-weight: 500;
color: var(--encre); border-bottom: 1px solid var(--filet-2);}
.art-table tbody td {padding: .8rem .9rem; font-size: var(--t-petit); color: var(--encre-2);
border-bottom: 1px solid var(--filet-2);}
.art-table tbody td:last-child {text-align: right; font-weight: 600; color: var(--encre);}
.art-table__note {margin-top: 12px; font-size: .8125rem; color: var(--encre-3); line-height: 1.6;}
.art-faq {margin-top: var(--e-4); border-top: 1px solid var(--filet-fort);}
.art-faq details {border-bottom: 1px solid var(--filet);}
.art-faq summary {display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
padding: var(--e-3) 0; list-style: none; cursor: pointer;
font-family: var(--serif); font-size: 1.125rem; font-weight: 600; line-height: 1.35;
color: var(--encre);}
.art-faq summary::-webkit-details-marker {display: none;}
.art-faq summary::after {content: "+"; font-weight: 400; color: var(--encre-3);
transition: transform var(--t-ui) var(--ease);}
.art-faq details[open] summary::after {content: "−";}
.art-faq p {padding: 0 0 18px; max-width: 70ch; line-height: 1.68; color: var(--encre-2);}
.art-sources {margin-top: clamp(34px, 5vw, 46px); padding-top: 20px;
border-top: 1px solid var(--filet-2);}
.art-sources h2 {margin-top: 0;}
.art-sources ul {margin-top: 12px; padding: 0; list-style: none; display: grid; gap: 8px;}
.art-sources li {font-size: .9375rem; line-height: 1.6; color: var(--encre-2);}
.art-sources a {color: var(--encre); border-bottom: 1px solid var(--filet-fort);}
.art-sources a:hover {color: var(--bronze-fonce); border-color: var(--bronze);}
/* --- le sommaire : des ancres lisibles, pas un décor ---------------------- */
.art-sommaire {position: sticky; top: 92px; font-size: .875rem;}
.art-sommaire__titre {font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
text-transform: none; color: var(--encre-3);}
.art-sommaire ol {margin-top: 12px; padding: 0; list-style: none; display: grid; gap: 9px;
border-left: 1px solid var(--filet-2);}
.art-sommaire li {padding-left: 12px;}
.art-sommaire a {display: block; color: var(--encre-2); line-height: 1.4;
border-bottom: 1px solid transparent;}
.art-sommaire a:hover {color: var(--bronze-fonce);}
/* --- la suite : trois articles, jamais un carrousel ---------------------- */
.art-suite {margin-top: clamp(44px, 6vw, 60px); padding-top: clamp(28px, 4vw, 36px);
border-top: 1px solid var(--filet-2);}
.art-suite h2 {font-size: clamp(1.25rem, 2.2vw, 1.5rem); letter-spacing: -.03em;
color: var(--encre-titre);}
.art-cartes {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3);
margin-top: var(--e-3);}
.art-carte {display: flex; flex-direction: column; gap: .6rem; padding: var(--e-4);
background-color: var(--blanc); background-image: var(--lueur);
border: 1px solid var(--filet); border-radius: var(--r);
box-shadow: var(--ombre-1), var(--relief);
transition: border-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease);}
.art-carte:hover {border-color: var(--bronze-clair); box-shadow: var(--ombre-2), var(--relief);}
.art-carte__meta {font-size: var(--t-label); font-weight: 600; letter-spacing: var(--tr-label);
text-transform: none; color: var(--bronze-fonce); font-variant-numeric: lining-nums tabular-nums;}
.art-carte__titre {font-family: var(--serif); font-size: 1.125rem; font-weight: 600; line-height: 1.3;
letter-spacing: var(--tr-titre); color: var(--encre);}
.art-carte__dit {font-size: var(--t-micro); line-height: 1.55; color: var(--encre-3);}
/* --- l'index du journal -------------------------------------------------- */
.art-journal {padding-block: var(--e-6) var(--rythme);}
.art-journal__grille {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--e-3); margin-top: var(--e-5);}
.art-journal__note {margin-top: 14px; max-width: 66ch; font-size: .9375rem;
line-height: 1.65; color: var(--encre-2);}
.art-journal .art-chiffres {max-width: 660px;}
#prix, #faq, #sources, #suite {scroll-margin-top: 92px;}
@media (max-width: 980px) {
.art-couple {grid-template-columns: 1fr;}
.art-sommaire {display: none;}
.art-journal__grille {grid-template-columns: repeat(2, minmax(0, 1fr));}
.art-cartes {grid-template-columns: 1fr;}
}
@media (max-width: 620px) {
.art-h1 {max-width: none;}
.art-chiffres {grid-template-columns: 1fr; max-width: none;}
.art-chiffres > div {display: flex; justify-content: space-between; align-items: baseline;
gap: .75rem; padding: .7rem 0;}
.art-chiffres > div + div {padding-left: 0; border-left: 0; border-top: 1px solid var(--filet);}
.art-chiffres dd {margin: 0;}
.art-table, .art-table tbody, .art-table tr, .art-table th, .art-table td {display: block; width: 100%;}
.art-table thead {display: none;}
.art-table tr {padding: 12px 0; border-bottom: 1px solid var(--filet-2);}
.art-table tbody th {padding: 0 0 4px; border: 0; font-size: 1rem; font-weight: 600;}
.art-table tbody td {display: flex; justify-content: space-between; gap: 16px;
padding: 2px 0; border: 0;}
.art-table tbody td::before {content: attr(data-libelle); font-size: .8125rem;
color: var(--encre-3);}
.art-journal__grille {grid-template-columns: 1fr;}
.art-actions .btn {width: 100%;}
}
/* ============================================================================
GABARIT PAGES D'IDENTITÉ — /a-propos et /contact (refonte étape 5,
data/refonte-seo.md §3.6). Un seul bloc, préfixé .id-.
Les deux pages partagent la tête `.doc-` (même rail, même mesure de lecture,
même surtitre daté) : une page d'identité n'a pas à inventer une mise en page,
elle a à rendre quatre faits lisibles — qui édite, qui répond, où, sous quel
numéro. Ce qui est ajouté ici, c'est la fiche d'immatriculation (une liste de
définitions, pas un tableau : un lecteur d'écran annonce « SIRET, 801 307 703
00018 ») et le formulaire, qui n'existait dans aucune feuille du système.
⚠️ Aucune valeur en dur : couleurs, rayons, durées et gouttières viennent des
jetons. Une page d'identité qui jure avec le reste du site dit au lecteur que
le site n'est pas tenu — c'est l'inverse du signal recherché.
========================================================================== */
/* --- la fiche : libellé à gauche, valeur à droite ------------------------- */
/* la fiche d'immatriculation est une carte, pas une liste soulignée : c'est la
pièce que le lecteur cherche quand il veut vérifier qui édite le site. */
.id-fiche {display: grid; margin: var(--e-4) 0 0;
padding: var(--e-2) var(--e-3);
background-color: var(--blanc); background-image: var(--lueur);
border: 1px solid var(--filet); border-top-color: rgb(201 169 122 / .55);
border-radius: var(--r-m); box-shadow: var(--ombre-2), var(--relief);}
.id-fiche > div {display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr);
gap: .4rem 1.5rem; padding: .8rem 0; border-bottom: 1px solid var(--filet-2);}
.id-fiche > div:last-child {border-bottom: 0;}
.id-fiche dt {font-size: var(--t-label); font-weight: 600; letter-spacing: var(--tr-label);
text-transform: none; color: var(--encre-3); padding-top: .15rem;}
.id-fiche dd {margin: 0; font-size: var(--t-corps); line-height: 1.55; color: var(--encre);
font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: lining-nums tabular-nums;}
.id-fiche dd a {border-bottom: 1px solid var(--filet-fort);}
.id-fiche dd a:hover {color: var(--terracotta); border-color: var(--terracotta);}
.id-fiche--serre > div {padding: .6rem 0;}
.id-note {margin-left: 6px; font-size: .8125rem; font-weight: 400; color: var(--encre-3);}
/* --- le duo formulaire / coordonnées -------------------------------------- */
.id-duo {display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
gap: clamp(28px, 5vw, 64px); align-items: start;
max-width: calc(1060px + 2 * var(--marge));}
.id-appui {padding-left: clamp(0px, 2vw, 28px); border-left: 1px solid var(--filet);}
.id-appui__bloc + .id-appui__bloc {margin-top: var(--e-4);
padding-top: var(--e-4); border-top: 1px solid var(--filet);}
.id-appui__titre {font-family: var(--serif); font-size: 1.125rem; font-weight: 600; letter-spacing: var(--tr-titre);
color: var(--encre);}
.id-appui .btn {margin-top: var(--e-2);}
.id-appui .id-fiche {margin-top: 14px;}
/* --- le formulaire -------------------------------------------------------- */
.id-form {display: grid; gap: var(--e-2); margin-top: var(--e-3);}
.id-form__ligne {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2);}
.id-champ {display: grid; gap: .4rem;}
.id-champ > span {font-size: var(--t-label); font-weight: 600; letter-spacing: .04em;
text-transform: none; color: var(--encre-2);}
.id-champ input, .id-champ select, .id-champ textarea {
width: 100%; min-height: 48px; padding: .7rem .85rem;
font: inherit; font-size: var(--t-corps); color: var(--encre);
background: var(--blanc);
border: 1px solid var(--filet-fort); border-radius: var(--r);
transition: border-color var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out);}
.id-champ textarea {resize: vertical; min-height: 140px; line-height: var(--lh-corps);}
.id-champ input:hover, .id-champ select:hover, .id-champ textarea:hover {border-color: var(--encre-3);}
.id-champ input:focus-visible, .id-champ select:focus-visible, .id-champ textarea:focus-visible {
outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgb(168 67 42 / .14);}
.id-champ ::placeholder {color: var(--encre-3); opacity: 1;}
.id-form__bas {display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: var(--e-2); margin-top: .25rem;}
.id-aide {font-size: var(--t-micro); line-height: 1.55; color: var(--encre-3); max-width: 46ch;}
.id-aide a {border-bottom: 1px solid var(--filet-fort);}
.id-aide a:hover {color: var(--terracotta); border-color: var(--terracotta);}
/* --- retours du formulaire ------------------------------------------------ */
.id-alerte {margin-top: var(--e-2); padding: .8rem 1rem; font-size: var(--t-petit);
color: var(--terracotta-fonce); background: rgb(168 67 42 / .06);
border-left: 2px solid var(--terracotta);}
.id-succes {margin-top: var(--e-3); padding: var(--e-4);
background: rgb(38 98 74 / .06); border-left: 2px solid var(--succes);}
.id-succes__titre {font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--encre);
letter-spacing: var(--tr-titre);}
.id-succes .doc-dit {margin-top: 8px;}
.id-succes .btn {margin-top: var(--e-2);}
#editeur, #repond, #ou, #publications, #contact, #formulaire {scroll-margin-top: 92px;}
@media (max-width: 860px) {
.id-duo {grid-template-columns: 1fr;}
.id-appui {padding-left: 0; padding-top: var(--e-4);
border-left: 0; border-top: 1px solid var(--filet);}
}
@media (max-width: 560px) {
.id-form__ligne {grid-template-columns: 1fr;}
.id-fiche > div {grid-template-columns: 1fr; gap: 2px;}
.id-form__bas .btn {width: 100%;}
.id-appui .btn {width: 100%;}
}
@media (prefers-reduced-motion: reduce) {
.id-champ input, .id-champ select, .id-champ textarea {transition: none;}
}
/* ============================================================================
LECTURE — CGV, mentions légales, confidentialité (refonte étape 6).
Le texte juridique n'avait pas de style propre : il héritait des six feuilles
de l'ancien thème (145 Ko) par le simple fait d'être dans un `.prose` de v3.
Il a maintenant son bloc, préfixé `.doc-`, bâti sur les mêmes jetons que le
reste du système. Aucune page ne charge plus de trois feuilles.
========================================================================== */
.doc-prose {max-width: 68ch; margin-top: clamp(26px, 4vw, 36px);
font-size: 1.0625rem; line-height: 1.72; color: var(--encre-2);}
.doc-prose > * + * {margin-top: 14px;}
.doc-prose h2 {margin-top: clamp(30px, 4.4vw, 42px);
font-size: clamp(1.25rem, 2.1vw, 1.5rem); line-height: 1.2; letter-spacing: -.03em;
color: var(--encre-titre); scroll-margin-top: 96px;}
.doc-prose h2:first-child {margin-top: 0;}
.doc-prose h3 {margin-top: 26px; font-size: 1.0625rem; font-weight: 600;
color: var(--encre-titre);}
.doc-prose p, .doc-prose li {font-size: 1.0625rem; line-height: 1.72; text-wrap: pretty;}
.doc-prose strong, .doc-prose b {font-weight: 600; color: var(--encre-titre);}
.doc-prose a {color: var(--encre-titre); border-bottom: 1px solid var(--filet-fort);}
.doc-prose a:hover {color: var(--bronze-fonce); border-color: var(--bronze);}
.doc-prose ul, .doc-prose ol {margin-top: 14px; padding-left: 1.15em; display: grid; gap: 8px;}
.doc-prose ul li {list-style: disc;}
.doc-prose ol li {list-style: decimal;}
.doc-prose table {width: 100%; margin-top: 18px; border-collapse: collapse; font-size: .9375rem;}
.doc-prose thead th {padding: 0 12px 10px; text-align: left; font-size: .6875rem; font-weight: 600;
letter-spacing: .02em; text-transform: none; color: var(--encre-3);
border-bottom: 1px solid var(--filet-fort);}
.doc-prose tbody th, .doc-prose tbody td {padding: 10px 12px; text-align: left; vertical-align: top;
border-bottom: 1px solid var(--filet-2);}
.doc-prose blockquote {margin: 0; padding: 16px 20px; background: var(--papier);
border-left: 3px solid var(--bronze); border-radius: 0 var(--r-s) var(--r-s) 0;}
.doc-sommaire-nav {margin-top: clamp(28px, 4vw, 38px); padding: var(--e-3) var(--e-3) var(--e-2);
background-color: var(--blanc); background-image: var(--lueur);
border: 1px solid var(--filet); border-top-color: rgb(201 169 122 / .55);
border-radius: var(--r-m); box-shadow: var(--ombre-1), var(--relief);}
.doc-sommaire-titre {font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
text-transform: none; color: var(--encre-3);}
.doc-sommaire-nav .doc-sommaire {margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: clamp(20px, 4vw, 40px); font-size: .9375rem; counter-reset: som;}
.doc-sommaire-nav .doc-sommaire li {list-style: none; display: flex; gap: 10px;
align-items: baseline; color: var(--encre-3); font-variant-numeric: tabular-nums;
counter-increment: som;}
.doc-sommaire-nav .doc-sommaire li::before {content: counter(som, decimal-leading-zero);
font-size: .75rem; color: var(--bronze-fonce); min-width: 1.6em;}
.doc-sommaire-nav .doc-sommaire a {color: var(--encre); border-bottom: 1px solid transparent;}
.doc-sommaire-nav .doc-sommaire a:hover {color: var(--bronze-fonce); border-color: var(--bronze);}
.doc-pied {display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(38px, 6vw, 56px);
padding-top: clamp(24px, 4vw, 32px); border-top: 1px solid var(--filet-2);}
@media (max-width: 720px) {
.doc-sommaire-nav .doc-sommaire {grid-template-columns: 1fr;}
}
@media (max-width: 560px) {
.doc-prose p, .doc-prose li {font-size: 1.0625rem;}
.doc-pied .btn {width: 100%;}
}
/* ============================================================================
GABARIT OUTIL — /widget (refonte étape 6, data/refonte-seo.md §4)
Un bloc de code à copier : il doit rester lisible et défiler plutôt que casser
la page sur un écran de 390 px.
============================================================================ */
.outil-code {margin-top: 22px; padding: 18px; overflow-x: auto;
background: var(--encre); border: 1px solid rgb(201 169 122 / .35); border-radius: 3px;
box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, var(--ombre-3);}
.outil-code code {font-family: var(--mono, ui-monospace, SFMono-Regular, monospace);
font-size: .8125rem; line-height: 1.55; white-space: pre; color: var(--papier);}
@media (max-width: 640px) {.outil-code {padding: 14px;}}
/* ============================================================================
GABARIT OFFRES — /pricing et /visibilite (refonte étape 6).
Les deux pages vendaient la même chose dans deux mises en page : une ligne de
registre pour l'une, un panneau pour l'autre. Ici, une seule carte d'offre,
préfixée .ofr- : le nom, le prix, ce qu'il comprend, et ce qu'il ne comprend
pas. Aucune valeur en dur, tout vient des jetons.
========================================================================== */
.ofr-grille {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px; margin-top: clamp(24px, 4vw, 36px); align-items: stretch;}
/* ⚠️ L'OFFRE RECOMMANDÉE FLOTTE (étape 8). La carte Visibilité est le seul
objet de la page qui se détache vraiment : halo bronze, tranche haute en
bronze de 2 px, ombre de plan levé. Une seule carte forte par grille —
deux cartes qui flottent, et plus rien ne flotte. */
.ofr-carte {display: flex; flex-direction: column; gap: 12px;
padding: clamp(20px, 3vw, 28px);
background-color: var(--surface); background-image: var(--lueur);
border: 1px solid var(--filet);
border-radius: var(--r-m); box-shadow: var(--ombre-1), var(--relief);
transition: box-shadow var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease),
transform var(--t-ui) var(--ease-out);}
.ofr-carte--fort {position: relative; border-color: rgb(154 106 36 / .42);
background-image: var(--lueur), var(--plan-bronze);
box-shadow: var(--ombre-3), var(--halo-bronze), var(--relief);}
@media (hover: hover) and (pointer: fine) {
.ofr-carte:hover {border-color: var(--bronze-clair); box-shadow: var(--ombre-2), var(--relief);
transform: perspective(var(--perspective)) translateY(-2px);}
.ofr-carte--fort:hover {box-shadow: var(--ombre-4), var(--halo-bronze), var(--relief);
transform: perspective(var(--perspective)) translateY(-2px);}
}
@media (prefers-reduced-motion: reduce) {.ofr-carte {transition: none;} .ofr-carte:hover {transform: none;}}
.ofr-tete {display: flex; align-items: baseline; justify-content: space-between; gap: 12px;}
.ofr-nom {font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; color: var(--encre-titre);}
.ofr-tag {font-size: .6875rem; font-weight: 600; letter-spacing: .02em; text-transform: none;
color: var(--bronze-fonce); white-space: nowrap;}
/* Le prix se compose dans la serif des titres, comme les chiffres du tract :
c'est la seule chose de la carte qu'on doit lire de loin. */
.ofr-prix {font-family: var(--serif); font-size: clamp(2.125rem, 3.6vw, 2.875rem);
font-weight: 600; letter-spacing: -.025em;
line-height: 1.02; font-variant-numeric: lining-nums tabular-nums; color: var(--encre-titre);}
.ofr-prix small {font-size: .8125rem; font-weight: 500; letter-spacing: 0; color: var(--encre-3);}
.ofr-annuel {font-size: .8125rem; line-height: 1.5; color: var(--encre-3);}
.ofr-dit {font-size: .9375rem; line-height: 1.6; color: var(--encre-2);}
.ofr-liste {display: grid; gap: 8px; margin: 0; padding: 0; list-style: none;}
.ofr-liste li {position: relative; padding-left: 20px; font-size: .9375rem;
line-height: 1.55; color: var(--encre-2);}
.ofr-liste li::before {content: ""; position: absolute; left: 2px; top: .58em;
width: 7px; height: 4px; border-left: 1.5px solid var(--bronze); border-bottom: 1.5px solid var(--bronze);
transform: rotate(-45deg);}
.ofr-pied {margin-top: auto; padding-top: 14px; border-top: 1px solid var(--filet-2);
display: flex; flex-direction: column; align-items: flex-start; gap: 10px;}
.ofr-note {font-size: .8125rem; line-height: 1.5; color: var(--encre-3);}
@media (max-width: 860px) {.ofr-grille {grid-template-columns: 1fr;}}
@media (max-width: 560px) {.ofr-pied .btn {width: 100%;}}
/* ============================================================================
GABARIT VITRINE — /resultats (refonte étape 6).
Six captures de sites, cliquables. Une carte n'est pas une carte d'offre :
l'image est le contenu, le titre est une légende. Le rapport 1440 x 940 est
celui des captures, déclaré pour que la place soit réservée avant l'arrivée
de l'image (CLS 0).
========================================================================== */
.vit-grille {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px; margin-top: clamp(24px, 4vw, 36px);}
.vit-carte {display: flex; flex-direction: column; gap: 10px; text-decoration: none;}
.vit-ecran {display: block; overflow: hidden; aspect-ratio: 1440 / 940;
background: var(--papier); border: 1px solid var(--filet); border-radius: var(--r-s);
box-shadow: var(--ombre-1);
transition: border-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);}
.vit-carte:hover .vit-ecran {border-color: var(--bronze-clair); box-shadow: var(--ombre-2);
transform: translateY(-2px);}
.vit-ecran img {display: block; width: 100%; height: 100%; object-fit: cover;}
.vit-nom {font-size: 1rem; font-weight: 600; letter-spacing: -.02em; color: var(--encre-titre);}
.vit-quoi {font-size: .8125rem; color: var(--encre-3);}
@media (max-width: 960px) {.vit-grille {grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 620px) {.vit-grille {grid-template-columns: 1fr;}}
/* --- les choix d'une offre : deux boutons radio, pas un menu ------------- */
.ofr-radio {display: grid; gap: 8px; margin: 0; padding: 0; border: 0;}
.ofr-radio legend {padding: 0; margin-bottom: 6px; font-size: .8125rem; font-weight: 500;
color: var(--encre-2);}
.ofr-radio label {display: flex; gap: 9px; align-items: flex-start;
font-size: .9375rem; line-height: 1.5; color: var(--encre-2); cursor: pointer;}
.ofr-radio input {margin-top: .28em; accent-color: var(--bronze);}
/* ============================================================================
GABARIT OUTIL PDF — /outil-pdf et ses trois guides (refonte étape 6).
Les cinq dernières pages hors système. L'outil EST le contenu : trois onglets
qui changent de panneau, un fichier, un champ de texte, un bouton. Les règles
reprennent celles de `.pt-*` (charte-classique.css) sur les jetons, avec le
préfixe `.pdf-` : plus rien de cette page ne dépend d'une feuille héritée.
⚠️ Chaque cible fait au moins 44 px de haut : au pouce, l'onglet et le champ
fichier sont les seuls points de contact de la page.
========================================================================== */
.pdf-outil {margin-top: clamp(24px, 4vw, 34px); max-width: calc(780px + 2 * var(--gouttiere));
padding: clamp(20px, 3vw, 30px);
background-color: var(--surface); background-image: var(--lueur);
border: 1px solid var(--filet); border-radius: var(--r-m);
box-shadow: var(--ombre-3), var(--relief);}
.pdf-onglets {display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px;}
.pdf-onglet {min-height: 44px; padding: 0 18px; font: inherit; font-size: .9375rem; font-weight: 500;
color: var(--encre-2); background: var(--papier); border: 1px solid var(--filet-fort);
border-radius: var(--r-pilule); cursor: pointer;
transition: color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease),
background-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease);}
.pdf-onglet:hover {color: var(--encre); border-color: var(--encre-45);}
.pdf-onglet[aria-selected="true"] {color: var(--encre-titre); background: var(--surface);
border-color: var(--bronze);}
.pdf-panneau {display: flex; flex-direction: column; align-items: flex-start; gap: 14px;}
.pdf-panneau[hidden] {display: none;}
.pdf-aide {font-size: .9375rem; line-height: 1.6; color: var(--encre-2);}
.pdf-champ {width: 100%; max-width: 520px; min-height: 44px; padding: 11px 13px;
font: inherit; font-size: 1rem; color: var(--encre); background: var(--surface);
border: 1px solid var(--filet-fort); border-radius: var(--r-s);}
.pdf-champ::placeholder {color: var(--encre-3); opacity: 1;}
.pdf-champ:focus-visible {outline: none; border-color: var(--bronze);
box-shadow: 0 0 0 3px rgb(154 106 36 / .16);}
.pdf-case {display: flex; align-items: center; gap: 9px; font-size: .875rem;
line-height: 1.5; color: var(--encre-2); cursor: pointer;}
.pdf-case input {width: 18px; height: 18px; accent-color: var(--bronze);}
.pdf-etat {min-height: 22px; font-size: .875rem; line-height: 1.5; color: var(--encre-3);}
.pdf-etat--ok {color: var(--succes); font-weight: 500;}
.pdf-etat--err {color: var(--terre-fonce);}
.pdf-prendre {margin-top: 2px;}
.pdf-guides {display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; line-height: 1.9;}
.pdf-guides a {font-size: .9375rem; color: var(--encre); border-bottom: 1px solid var(--filet-fort);
padding-bottom: 1px;}
.pdf-guides a:hover {color: var(--bronze-fonce); border-color: var(--bronze);}
@media (max-width: 560px) {
/* Trois pastilles sur deux lignes, la troisième seule : mesuré à 390 px,
109 + 184 + 126 px pour 345 px de large. Empilées pleine largeur, elles
se lisent comme une liste de choix et gardent 44 px de haut. */
.pdf-onglets {display: grid; grid-template-columns: 1fr; gap: 8px;}
.pdf-onglet {width: 100%;}
.pdf-panneau .btn, .pdf-prendre {width: 100%;}
.pdf-champ {max-width: none;}
}
@media (prefers-reduced-motion: reduce) {.pdf-onglet {transition: none;}}
/* ============================================================================
PAGE UTILITAIRE — /ads, /offline, /desabonnement (refonte étape 6).
Trois pages de service, hors plan de site : un formulaire court, un constat,
une confirmation. Elles étaient les dernières à charger `verre.css` (123 Ko)
pour une carte centrée et trois champs — la feuille héritée ne leur donnait
rien que le système n'ait déjà. Elles prennent la tête `.util-` et le
formulaire du système (`.id-form` / `.id-champ`, étape 5) : une seule mise en
page pour tous les formulaires du site, donc un seul endroit à corriger.
⚠️ Sur /offline la feuille compte double : la page est servie PAR le service
worker, et les trois couches sont dans son precache — verre.css n'y était pas.
========================================================================== */
.util {padding-block: clamp(96px, 12vw, 140px) clamp(56px, 8vw, 96px);}
.util-carte {width: min(100%, 560px); margin-inline: auto;
/* ⚠️ Pas de marge propre : les sections de `main` portent déjà le rail
(`--rail`, 22 px à 390). Mesuré : avec `--marge` en plus, la carte tombait
à 305 px de large pour 390 px d'écran. */
padding: clamp(24px, 4vw, 40px);
background: var(--surface); border: 1px solid var(--filet);
border-radius: var(--r-l); box-shadow: var(--ombre-2);}
.util-marque {display: flex; align-items: center; gap: 12px; margin-bottom: clamp(22px, 3vw, 28px);}
.util-marque img {width: 34px; height: 34px; border-radius: 9px;}
.util-marque__nom {font-size: 1.0625rem; font-weight: 700; letter-spacing: -.035em;
line-height: 1.2; color: var(--encre-titre);}
.util-marque__nom span {color: var(--bronze-fonce);}
.util-marque__sous {font-size: .8125rem; color: var(--encre-3);}
.util-h1 {font-size: clamp(1.5rem, 3vw, 1.875rem); line-height: 1.14; letter-spacing: -.035em;
color: var(--encre-titre); text-wrap: balance;}
.util-dit {margin-top: 10px; font-size: 1rem; line-height: 1.6; color: var(--encre-2);}
.util-dit + .util-dit {margin-top: 8px;}
.util-dit a {color: var(--encre-titre); border-bottom: 1px solid var(--filet-fort);}
.util-dit a:hover {color: var(--bronze-fonce); border-color: var(--bronze);}
.util-form {margin-top: clamp(22px, 3vw, 28px);}
.util-form .btn {width: 100%; margin-top: 4px;}
.util-points {display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
margin-top: 20px; font-size: .8125rem; color: var(--encre-3);}
.util-points span {display: inline-flex; align-items: center; gap: 7px;}
.util-points span::before {content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--succes);}
.util-retour {margin-top: 20px; text-align: center; font-size: .875rem;}
.util-retour a {color: var(--encre-3); border-bottom: 1px solid var(--filet-fort); padding-bottom: 1px;}
.util-retour a:hover {color: var(--encre); border-color: var(--bronze);}
.util-centre {text-align: center;}
.util-icone {display: grid; place-items: center; width: 56px; height: 56px;
margin: 0 auto 20px; border-radius: 50%;
background: var(--papier-2); color: var(--bronze);}
.util-actions {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
margin-top: clamp(22px, 3vw, 28px);}
.util-actions .btn {flex: 1 1 180px;}
.util-etat {margin-top: 4px; padding: 14px 16px; font-size: .9375rem; line-height: 1.6;
border-radius: var(--r-s);}
.util-etat--ok {color: var(--encre-titre); background: rgb(21 128 61 / .06);
border-left: 2px solid var(--succes); border-radius: 0 var(--r-s) var(--r-s) 0;}
.util-etat--err {color: var(--terre-fonce); background: rgb(168 67 42 / .06);
border-left: 2px solid var(--terre); border-radius: 0 var(--r-s) var(--r-s) 0;}
@media (max-width: 560px) {
.util-carte {border-radius: var(--r-m);}
.util-actions .btn, .util-actions {width: 100%;}
}
/* ============================================================================
GABARIT AUDIT SEO — /audit-seo et sa famille (refonte étape 6, §5.6).
Ces pages reprennent la tête `.doc-`, le tableau `.doc-table`, la FAQ `.hub-`
et l'encart `.hub-encart` : il ne manquait qu'une chose au système, le
formulaire d'analyse — une ligne, un champ, un bouton. Elle est ici.
========================================================================== */
.au-analyse {grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px;}
@media (max-width: 560px) {
.au-analyse {grid-template-columns: 1fr;}
.au-analyse .btn {width: 100%;}
}
/* --- la page de vente /audit-seo (dernier consommateur de verre.css) --------
Trois choses seulement manquaient au système pour cette page : une grille de
trois offres (le gabarit `.ofr-` en prévoit deux, pour /pricing), un tableau de
comparaison aligné à gauche (`.doc-table` est fait pour des chiffres), et
l'écran d'attente de l'analyse, qui n'existait que dans le style en ligne de
la page. Tout le reste est du système : `.doc-`, `.carte`, `.ofr-`, `.hub-faq`. */
.ofr-grille.au-offres {grid-template-columns: repeat(3, minmax(0, 1fr));}
@media (max-width: 1000px) {.ofr-grille.au-offres {grid-template-columns: 1fr;}}
/* Un tableau de comparaison se lit en lignes de texte, pas en colonnes de
nombres : on aligne à gauche et on garde la dernière colonne en gras, c'est
elle qui porte la réponse. */
.au-table thead th, .au-table tbody th, .au-table tbody td {text-align: left;}
.au-table tbody th {font-size: .9375rem; color: var(--encre-2); font-weight: 500;}
.au-table tbody td:last-child {font-weight: 600; color: var(--encre-titre);}
@media (max-width: 640px) {
/* Mesuré à 390 px : trois colonnes de texte se tassent à 7 caractères par
ligne. On empile, chaque cellule portant son libellé. */
.au-table thead {display: none;}
.au-table tbody tr {display: grid; gap: 4px; padding: 14px 0;
border-bottom: 1px solid var(--filet-2);}
.au-table tbody th, .au-table tbody td {padding: 0; border: 0; font-size: .9375rem;}
.au-table tbody td {display: flex; justify-content: space-between; gap: 16px;}
.au-table tbody td::before {content: attr(data-libelle); font-size: .8125rem;
color: var(--encre-3);}
}
/* --- l'écran d'attente : les six étapes que le serveur exécute vraiment ----- */
.au-attente {position: fixed; inset: 0; z-index: 900; display: none;
place-items: center; padding: 20px;
background: rgb(251 250 246 / .96);}
.au-attente.on {display: grid;}
.au-attente__boite {width: min(100%, 480px); max-height: 100%; overflow: auto;
padding: clamp(22px, 4vw, 34px);
background-color: var(--surface); background-image: var(--lueur);
border: 1px solid var(--filet); border-radius: var(--r-l);
box-shadow: var(--ombre-4), var(--relief);}
.au-attente__rond {width: 32px; height: 32px; margin-bottom: 18px; border-radius: 50%;
border: 3px solid var(--filet-fort); border-top-color: var(--bronze);
animation: au-tour 900ms linear infinite;}
@keyframes au-tour {to {transform: rotate(360deg);}}
.au-attente h2 {font-size: clamp(1.125rem, 2.4vw, 1.375rem); letter-spacing: -.03em;
color: var(--encre-titre);}
.au-etapes {display: grid; gap: 9px; margin: 18px 0 0; padding: 0; list-style: none;}
.au-etapes li {display: flex; gap: 10px; align-items: baseline;
font-size: .9375rem; line-height: 1.5; color: var(--encre-3);}
.au-etapes li::before {content: ""; flex: none; width: 8px; height: 8px;
border-radius: 50%; border: 1.5px solid var(--filet-fort);}
.au-etapes li.fait {color: var(--encre);}
.au-etapes li.fait::before {background: var(--bronze); border-color: var(--bronze);}
.au-etapes li.encours {color: var(--encre-titre);}
.au-etapes li.encours::before {border-color: var(--bronze); background: rgb(154 106 36 / .18);}
.au-attente .id-aide {margin-top: 18px;}
@media (prefers-reduced-motion: reduce) {
.au-attente__rond {animation: none; border-top-color: var(--bronze);}
}
/* ============================================================================
GABARIT TUNNEL — /artisan et /artisan/recu (refonte visuelle, étape 9).
C'est LA page où mène le mail de prospection : un artisan qui la reçoit ne
connaît pas Devisaly, et cinq questions décident s'il laisse son numéro.
⚠️ ELLE ÉTAIT LA DERNIÈRE PAGE PUBLIQUE HORS SYSTÈME : 150 lignes de style en
ligne, glass.css, liquid-glass.js, _n_head, _n_menu, une charte blanche à
angles droits et sans ombre qui ne ressemblait plus à l'accueil. Elle passe
aux trois couches, et le tunnel cesse d'être le seul endroit où le site
change de matière.
⚠️ LE TUNNEL N'EST PAS UNE PAGE DE LECTURE. Un seul objet par écran : la
question, sa réponse, le bouton. La carte est LE plan levé ; la feuille
bronze derrière elle donne la profondeur sans jamais passer sous le texte.
========================================================================== */
.tn-ecran {position: relative; max-width: 700px; margin: 0 auto;
padding-block: clamp(1.75rem, 1.2rem + 2.4vw, 3rem) clamp(3rem, 3rem + 3vw, 5rem);}
.tn-surtitre {font-size: var(--t-label); font-weight: 600;
letter-spacing: var(--tr-label); text-transform: none; color: var(--bronze-fonce);}
.tn h1 {margin-top: var(--e-2); max-width: 18ch;
font-size: clamp(2rem, 1.45rem + 3.1vw, 3.25rem); line-height: 1.03;
letter-spacing: -.02em; color: var(--encre);}
.tn-intro {margin-top: var(--e-3); max-width: 50ch;
font-size: var(--t-corps); line-height: 1.6; color: var(--encre-2);}
/* --- l'échelle du tunnel : où l'on en est -------------------------------- */
.tn-prog {margin-top: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);}
.tn-prog-tete {display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
font-size: .75rem; font-weight: 600; letter-spacing: .02em; text-transform: none;
color: var(--encre-3);}
.tn-prog-tete b {font-family: var(--serif); font-size: .9375rem; font-weight: 600;
letter-spacing: 0; color: var(--encre); font-variant-numeric: lining-nums tabular-nums;}
.tn-prog-tete #tnNom {text-transform: none; letter-spacing: .02em; font-weight: 500;}
.tn-prog-piste {position: relative; height: 4px; margin-top: 10px; overflow: hidden;
background: rgb(10 11 16 / .10); border-radius: var(--r-pilule);
box-shadow: inset 0 1px 2px rgb(var(--teinte-ombre) / .14);}
.tn-prog-r {display: block; height: 100%; width: 20%;
background: linear-gradient(90deg, var(--bronze), var(--bronze-clair));
border-radius: var(--r-pilule);
transition: width var(--t-surface) var(--ease-out);}
/* --- la carte : le plan levé, et sa feuille derrière --------------------- */
.tn-scene {position: relative; margin-top: var(--e-4);
perspective: var(--perspective);}
.tn-scene::before {content: ""; position: absolute; inset: 10px -8px -12px 12px;
background-image: var(--plan-bronze); border: 1px solid rgb(201 169 122 / .30);
border-radius: var(--r-m); box-shadow: 0 20px 40px -28px rgb(var(--teinte-ombre) / .5);
transform: rotate(-.8deg); pointer-events: none;}
.tn-carte {position: relative; z-index: 1; margin: 0;
padding: clamp(20px, 3.6vw, 34px);
background-color: var(--surface); background-image: var(--lueur);
border: 1px solid var(--filet); border-radius: var(--r-m);
box-shadow: var(--ombre-3), var(--relief);}
.tn-q {margin: 0; font-family: var(--serif); font-weight: 600;
font-size: clamp(1.25rem, 1.1rem + .8vw, 1.625rem); line-height: 1.2;
letter-spacing: -.015em; color: var(--encre);}
.tn-aide {margin: 8px 0 0; font-size: .9375rem; line-height: 1.55; color: var(--encre-3);}
.tn-form {margin-top: var(--e-3);}
/* les choix : des touches, pas des pilules */
.tn-chips {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;}
.tn-chip {position: relative; min-height: 46px; padding: 10px 34px 10px 14px;
text-align: left; font: inherit; font-size: .9375rem; font-weight: 500;
color: var(--encre); background: var(--blanc); border: 1px solid var(--filet);
border-radius: var(--r-s);
cursor: pointer;
transition: border-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease),
transform var(--t-appui) var(--ease-out), background-color var(--t-ui) var(--ease);}
@media (hover: hover) and (pointer: fine) {
.tn-chip:hover {border-color: var(--bronze-clair); background: var(--papier);
box-shadow: var(--ombre-2); transform: translateY(-1px);}}
.tn-chip:active {transform: translateY(1px); box-shadow: inset 0 1px 3px rgb(var(--teinte-ombre) / .16);}
.tn-chip:focus-visible {outline: 2px solid var(--bronze); outline-offset: 2px;}
.tn-chip.on {border-color: var(--bronze); background: rgb(201 169 122 / .14);
box-shadow: inset 0 0 0 1px rgb(154 106 36 / .45);}
.tn-chip.on::after {content: ""; position: absolute; right: 13px; top: 50%;
width: 10px; height: 6px; margin-top: -4px;
border-left: 1.8px solid var(--bronze); border-bottom: 1.8px solid var(--bronze);
transform: rotate(-45deg);}
/* la saisie : un champ et un bouton sur la même ligne, 48 px */
#tnSaisie {display: flex; gap: 10px; align-items: stretch;}
#tnSaisie[hidden] {display: none;}
.tn-champ {flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 12px 14px;
font: inherit; font-size: 1rem; color: var(--encre); background: var(--blanc);
border: 1px solid var(--filet-fort); border-radius: var(--r-s);
box-shadow: inset 0 1px 3px rgb(var(--teinte-ombre) / .08);}
.tn-champ::placeholder {color: var(--encre-3); opacity: 1;}
.tn-champ:focus {outline: none; border-color: var(--bronze);
box-shadow: inset 0 1px 3px rgb(var(--teinte-ombre) / .08), 0 0 0 3px rgb(154 106 36 / .18);}
.tn-envoyer {flex: 0 0 auto; min-height: 48px; padding: 0 24px;
font: inherit; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em;
color: var(--papier); background: var(--terracotta); border: 1px solid var(--terracotta);
border-radius: var(--r-s); cursor: pointer;
box-shadow: 0 1px 0 rgb(255 255 255 / .16) inset,
0 10px 22px -14px rgb(var(--teinte-ombre) / .6);
transition: background-color var(--t-ui) var(--ease), transform var(--t-appui) var(--ease-out),
box-shadow var(--t-ui) var(--ease);}
@media (hover: hover) and (pointer: fine) {
.tn-envoyer:hover {background: var(--terracotta-fonce); border-color: var(--terracotta-fonce);}}
.tn-envoyer:active {transform: translateY(1px);}
.tn-envoyer:focus-visible {outline: 2px solid var(--bronze); outline-offset: 2px;}
.tn-envoyer[disabled] {opacity: .55; cursor: progress;}
.tn-err {margin: 12px 0 0; padding-left: 12px; border-left: 2px solid var(--terracotta);
font-size: .875rem; font-weight: 500; line-height: 1.5; color: var(--terracotta-fonce);}
.tn-retour {margin-top: 14px; padding: 6px 0; font: inherit; font-size: .875rem;
color: var(--encre-3); background: none; border: 0; cursor: pointer;
border-bottom: 1px solid transparent;}
.tn-retour:hover {color: var(--encre); border-color: var(--filet-fort);}
/* le récapitulatif : les réponses déjà données, en registre */
.tn-recap {margin-top: var(--e-4); padding: 16px 18px;
background: var(--papier-2); border: 1px solid var(--filet-2); border-radius: var(--r-s);}
.tn-recap-t {margin: 0 0 8px; font-size: var(--t-label); font-weight: 600;
letter-spacing: var(--tr-label); text-transform: none; color: var(--encre-3);}
.tn-recap ul {margin: 0; padding: 0; list-style: none;}
.tn-recap li {display: flex; gap: 16px; justify-content: space-between; align-items: baseline;
padding: 7px 0; border-bottom: 1px solid var(--filet-2); font-size: .9375rem;}
.tn-recap li:last-child {border-bottom: 0;}
.tn-recap .k {color: var(--encre-3);}
.tn-recap .v {font-weight: 500; color: var(--encre); text-align: right;}
/* la réassurance : deux lignes, une coche bronze */
.tn-confiance {display: grid; gap: 10px; margin-top: var(--e-4);}
.tn-confiance div {display: flex; gap: 10px; align-items: flex-start;
font-size: .9375rem; line-height: 1.5; color: var(--encre-2);}
.tn-confiance svg {flex: none; margin-top: 3px; color: var(--bronze);}
.tn-foot {margin-top: var(--e-5); padding-top: 16px; border-top: 1px solid var(--filet-2);
font-size: .8125rem; line-height: 1.7; color: var(--encre-3);}
/* --- l'écran de confirmation -------------------------------------------- */
.tn-done-ic {display: grid; place-items: center; width: 56px; height: 56px;
margin-bottom: var(--e-3); border-radius: 50%;
color: var(--succes); background: rgb(38 98 74 / .08);
border: 1px solid rgb(38 98 74 / .28); box-shadow: var(--ombre-1);}
.tn-done h1 {max-width: 22ch;}
.tn-done .lead {margin-top: var(--e-3); max-width: 52ch;
font-size: var(--t-sous); line-height: 1.6; color: var(--encre-2);}
.tn-done .lead strong {font-weight: 600; color: var(--encre);}
.tn-done .tn-recap {margin-top: var(--e-4);}
.tn-etapes {margin-top: var(--e-4); padding: clamp(20px, 3vw, 26px);
background-color: var(--surface); background-image: var(--lueur);
border: 1px solid var(--filet); border-radius: var(--r-m);
box-shadow: var(--ombre-1), var(--relief);}
.tn-etapes h2 {margin: 0 0 6px; font-family: var(--serif); font-weight: 600;
font-size: 1.25rem; letter-spacing: -.015em; color: var(--encre);}
.tn-etapes ol {margin: 0; padding: 0; list-style: none; counter-reset: e;}
.tn-etapes li {counter-increment: e; display: flex; gap: 14px; align-items: baseline;
padding: 12px 0; border-bottom: 1px solid var(--filet-2);
font-size: .9375rem; line-height: 1.55; color: var(--encre-2);}
.tn-etapes li:last-child {border-bottom: 0; padding-bottom: 0;}
.tn-etapes li::before {content: counter(e); flex: none;
display: grid; place-items: center; width: 26px; height: 26px;
font-family: var(--serif); font-size: .8125rem; font-weight: 600;
color: var(--bronze-fonce); background: rgb(201 169 122 / .16);
border: 1px solid rgb(201 169 122 / .5); border-radius: 50%;
font-variant-numeric: lining-nums tabular-nums;}
.tn-etapes li b {font-weight: 600; color: var(--encre);}
.tn-actions {display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: var(--e-5);}
@media (max-width: 560px) {
.tn-chips {grid-template-columns: 1fr;}
.tn-scene::before {inset: 8px -5px -9px 8px;}
.tn-recap li {flex-direction: column; gap: 2px;}
.tn-recap .v {text-align: left;}
.tn-actions .btn {width: 100%;}
}
@media (max-width: 460px) {
#tnSaisie {flex-direction: column;}
.tn-envoyer {width: 100%;}
}
@media (prefers-reduced-motion: reduce) {
.tn-prog-r {transition: none;}
.tn-chip, .tn-envoyer {transition: none;}
.tn-chip:hover, .tn-chip:active {transform: none;}
}
/* ⚠️ 2026-11-09 — ALIGNEMENT SUR GRAND ÉCRAN. Le bandeau (.nav) courait d'un bord à
l'autre (x=56) alors que le héros est dans un conteneur centré de 1232 : sur un
écran de 1920, le logo et les liens flottaient 280 px à gauche du titre. Tout
s'aligne désormais sur le même axe. */
.nav{max-width:1344px;margin-inline:auto;padding-inline:56px}
@media (max-width:720px){ .nav{padding-inline:20px} }
/* Grands écrans : le contenu ne doit pas flotter au milieu. À partir de 1600 px,
le héros prend la largeur utile et le bandeau suit le même axe. */
@media (min-width:1600px){
.heros--agence{max-width:1460px;margin-inline:auto}
.heros--agence .grille{max-width:1460px}
.nav{max-width:1572px}
}
/* ============================================================================
AUDIT MOBILE — 2026-11-09. Mesuré à 390 px sur cinq pages : aucun débordement
horizontal, mais 18 à 46 cibles tactiles sous 44 px (liens de bandeau, fil
d'Ariane, pastilles de métier) et 10 textes sous 12 px sur l'accueil. Un lien
de 20 px de haut se rate au pouce.
========================================================================== */
@media (max-width:720px){
/* cibles tactiles : les liens de navigation deviennent des zones de 44 px.
Les liens dans un paragraphe restent en ligne, sinon le texte explose. */
nav a,.nav a,.pied a,.hub-fil a,.metiers a,[class*="__liens"] a,[class*="__villes"] a{
min-height:44px !important; display:inline-flex !important; align-items:center;
}
.metiers a,.villes a,.hub-villes a,[class*="__villes"] a{min-height:44px !important;padding:12px 14px}
/* plus aucun texte sous 12 px : en dessous, on ne lit pas, on devine */
.heros__tags span,.heros__avis-note,.serp__note,.pied small,.pied p{
font-size:12px; line-height:1.5;
}
}
/* Hub métier sur mobile : six pastilles visibles, les autres restent dans le DOM
(les robots les lisent) mais sortent de la surface tactile, sinon on ne vise rien. */
.villes__plus{display:none}
@media (max-width:720px){
.hub-villes a:nth-child(n+7),[class*="__villes"] a:nth-child(n+7),.metiers a:nth-child(n+7){display:none}
.villes__plus{display:inline-flex;min-height:44px;align-items:center;
color:var(--bronze-fonce);text-decoration:underline;font-size:.9rem}
}