/* ============================================================
STUDIO MAÎTRE — SYSTÈME DE DESIGN (V2, à plat)
Territoire : « l'expertise annotée »
Fichier unique de style. Tout se rhabille depuis :root.
Aucune dépendance. À charger avant sm-systeme.js.
------------------------------------------------------------
SOMMAIRE
1. Jetons (:root)
2. Base
3. Architecture : conteneur, grille, sections et fonds, cartes
4. Typographie
5. Objets du territoire : surligneur, marge, étiquette,
rature, intercalaire, corne, référence, bordereau
6. Dispositifs : nav, bouton, hero, frise, chaîne, colonnes, pense-bête,
lecture qui s'allume, engagements en liste, avis de nos clients, carte de transition,
scènes dessinées, dossiers, planche, encart, feuille, cartouche
7. Comportements : mots semés
8. Accessibilité et mouvement réduit
============================================================ */
/* — 0. Polices, hébergées sur le site ————————————————
Instrument Sans en fichier variable (400 à 700) et en italique. Aucun appel à Google Fonts. */
@font-face{ font-family:"Instrument Sans"; src:url(fonts/instrument-sans-var.woff2) format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Instrument Sans"; src:url(fonts/instrument-sans-italic.woff2) format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
/* Mrs Saint Delafield, jeu latin (SIL Open Font License, texte dans fonts/mrs-saint-delafield-OFL.txt ; fichier tel que
servi par Google Fonts, non modifié) : l'écriture manuscrite de la signature des avis de clients (à l'essai, 18 septembre
2026), seule autre écriture que Instrument Sans. */
@font-face{ font-family:"Mrs Saint Delafield"; src:url(fonts/mrs-saint-delafield.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
/* — 1. Jetons ——————————————————————————————————— */
:root{
--encre: #111318; /* texte, appel final, pied de page */
--papier: #F7F7F3; /* le fond des sections */
--fond: #E7E4DB; /* le plan de travail, sous les cartes */
--blanc: #FFFFFF; /* section blanche, feuilles, dossiers */
--papier-creux: #EFEFEB; /* section en creux */
--encre-2: #686B70; /* texte secondaire, annotations */
--ligne: #DADBD7; /* filets */
--ligne-forte: #C6C3B6; /* le filet marqué : feuille des scènes, fiche survolée de la pile */
--orange: #C65A36; /* l'accent des objets : intercalaire, languette, rang, ligne de progression */
--orange-texte: #B34924; /* le même orange quand il colore du texte : 5:1 sur le papier, 4,7:1 sur le creux */
--trait: #21A8FF; /* l'accent du geste : le trait du surligneur, et lui seul */
--rouge: #D63A1E; /* mot coloré dans un titre, à la demande */
--violet: #6A4FC8; /* mot coloré dans un titre, à la demande */
--vert: #18794E; /* mot ou phrase de reprise colorés, à la demande — contraste 5:1 sur le papier */
--jaune: #E9B72E; /* teinte de surligneur des mots semés, et elle seule — jamais en texte */
--fluo: #EEFF41; /* le feutre fluo de la lecture qui s'allume (à l'essai), sur l'encre seulement ; texte à l'encre dessus, 16,8:1 */
--pense-bete: #FFF6B8; /* le papier jaune du pense-bête (à l'essai), et lui seul ; texte à l'encre dessus */
/* Les chemises de couleur des feuillets montants (26 septembre 2026, choisies par le client sur épreuve), et elles
seules : même clarté et même saturation (OKLCH .83 / .095), seule la teinte change, prise aux cinq couleurs du
site. Texte à l'encre dessus, 10,7 à 11,4:1. Chaque chemise a son onglet, la même teinte plus soutenue. */
--chemise-bleu: #91CFFF; --onglet-bleu: #1277B7;
--chemise-corail: #FEB29A; --onglet-corail: #AF5233;
--chemise-vert: #91DAB0; --onglet-vert: #008853;
--chemise-lavande: #C5BEFF; --onglet-lavande: #7062B8;
--chemise-ocre: #E2C47E; --onglet-ocre: #926B00;
--police: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
--manuscrite: "Mrs Saint Delafield", var(--police); /* la signature des avis de clients (à l'essai), et elle seule */
--conteneur: 1320px;
--gouttiere: clamp(20px, 3vw, 42px);
--section: clamp(92px, 11vw, 168px);
--carte-ecart: 24px; /* le vide entre les cartes, et autour */
--carte-rayon: 20px;
--carte-dedans: clamp(28px, 5.2vw, 80px); /* l'air intérieur, sur les côtés */
--carte-max: 1480px; /* le texte garde ses 1 320 px */
--ease: cubic-bezier(.2,.7,.2,1);
--ressort: var(--ease); /* le ressort des survols ; sans linear(), la courbe ordinaire */
}
/* Le ressort : au survol, un objet dépasse un peu sa place puis y revient (d'après le prototype en
panneaux). Réservé aux déplacements des objets ; les tracés gardent --ease. */
@supports (transition-timing-function: linear(0, 1)){
:root{ --ressort: linear(0, .28 8%, .72 19%, .94 28%, 1.06 36%, 1.08 45%, 1 62%, 1); }
}
/* — 2. Base ———————————————————————————————————— */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--fond); -webkit-text-size-adjust:100%; }
/* La barre de défilement : un filet, à l'encre secondaire sur le plan de travail. */
html{ scrollbar-width:thin; scrollbar-color:var(--encre-2) var(--fond); }
body{
margin:0; background:var(--fond); color:var(--encre);
font-family:var(--police); font-weight:400; font-size:17px; line-height:1.5;
text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button,a{ -webkit-tap-highlight-color:transparent; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:6px; }
section[id],main{ scroll-margin-top:100px; }
.evitement{ position:fixed; top:8px; left:16px; z-index:200; padding:12px; background:var(--blanc);
transform:translateY(-150%); font-weight:500; }
.evitement:focus{ transform:none; }
.visuellement-cache{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* — 3. Architecture ————————————————————————————————
La page est une suite de sections pleine largeur, séparées par
des filets ou par un changement de fond. Le contenu se pose sur
une grille de douze colonnes dans un conteneur centré. */
.conteneur{ width:min(calc(100% - var(--gouttiere)*2), var(--conteneur)); margin:0 auto; }
.grille{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(16px,2vw,28px); }
.section{ padding:var(--section) 0; position:relative; }
.section.filet{ border-top:1px solid var(--ligne); }
.section.blanche{ background:var(--blanc); }
.section.creuse{ background:var(--papier-creux); }
/* Le fond sombre. Le hero de l'accueil le prend aussi, pour porter la photo de nuit. */
.section.sombre, .hero.sombre{ background:#111318; color:var(--papier); /* valeur fixe : --encre est redéfini en clair juste après */
--encre:#F7F7F3; --encre-2:rgba(247,247,243,.72); --ligne:rgba(247,247,243,.16);
--ligne-forte:rgba(247,247,243,.34);
--orange-texte:#D0633F; /* sur l'encre, l'orange des textes s'éclaircit au lieu de foncer : 4,9:1 */
--violet:#9786F0; /* et le violet aussi, même teinte : 6,2:1 sur l'encre */ }
.pleine{ grid-column:1 / -1; }
/* Les cartes (17 septembre 2026) : la page est une pile de cartes posées sur le plan de
travail, comme dans le prototype en panneaux. Le hero, chaque section et le pied de page forment une
carte à coins arrondis, séparée des autres par un vide. Dans une carte, l'air intérieur remplace la
gouttière, et le texte garde sa largeur de 1 320 px. Aucune carte ne rogne son contenu (overflow),
sauf le hero, qui découpe sa photo : les éléments collants suivent toujours l'écran. */
main{ display:flex; flex-direction:column; gap:var(--carte-ecart);
width:min(calc(100% - var(--carte-ecart)*2), var(--carte-max)); margin:0 auto; }
main > .hero, main > .section, .pied{ border-radius:var(--carte-rayon); --gouttiere:var(--carte-dedans); }
.section, .hero{ background:var(--papier); }
main > .section.filet{ border-top:0; }
/* Sur téléphone, le vide et l'air intérieur se partagent la gouttière (8 + 12 = 20 px) : le texte garde
la largeur qu'il avait à plat, et ses coupures de ligne. */
@media (max-width:680px){ :root{ --carte-ecart:8px; --carte-dedans:12px; --carte-rayon:16px; } }
/* — 4. Typographie ————————————————————————————————
Une famille, des rôles par graisse :
600 le h1 · 500 les h2, h3, navigation, boutons, étiquettes ·
400 le texte courant · 400 italique l'annotation. */
/* Titres équilibrés : les lignes d'un titre ont des longueurs voisines,
aucun mot ne reste seul sur la dernière. */
h1,h2,h3{ margin:0; text-wrap:balance; }
h1{ font-size:clamp(58px,8.2vw,124px); line-height:.92; letter-spacing:-.055em; font-weight:600; }
h2{ font-size:clamp(46px,6vw,84px); line-height:.98; letter-spacing:-.045em; font-weight:500; }
h3{ font-size:clamp(26px,2.3vw,34px); line-height:1.08; letter-spacing:-.03em; font-weight:500; }
p{ margin:0; }
/* Paragraphes, listes et intitulés : aucun mot seul sur la dernière ligne. Le navigateur recompose les
dernières lignes ; celui qui ne connaît pas text-wrap: pretty coupe comme avant. Les titres, eux,
s'équilibrent (balance). */
p, li, dt, dd, label, legend{ text-wrap:pretty; }
.chapo{ font-size:clamp(19px,1.75vw,25px); line-height:1.3; letter-spacing:-.02em; max-width:710px; }
.secondaire{ color:var(--encre-2); }
.citation{ font-size:clamp(52px,7.2vw,104px); line-height:.94; letter-spacing:-.055em; font-weight:500; }
/* Sur téléphone, la citation descend plus bas que les titres : un mot long, « d'opportunités »,
doit tenir sur sa ligne dès 320 px. */
@media (max-width:680px){ .citation{ font-size:clamp(38px,11.5vw,64px); } }
strong{ font-weight:500; color:var(--encre); }
/* Le rythme éditorial : phrase forte, respiration, démonstration courte. */
.forte{ font-size:clamp(21px,2.2vw,30px); line-height:1.2; letter-spacing:-.025em; font-weight:500; max-width:32ch; color:var(--encre); text-wrap:balance; }
.manifeste{ font-size:clamp(30px,3.8vw,58px); line-height:1.02; letter-spacing:-.045em; font-weight:500; max-width:22ch; }
.litanie{ list-style:none; margin:0; padding:0; }
.litanie li{ font-size:clamp(22px,2.8vw,42px); line-height:1.12; letter-spacing:-.035em; font-weight:400; color:var(--encre-2); }
.litanie li + li{ margin-top:.12em; }
.bloc{ grid-column:1 / 8; margin-top:48px; max-width:60ch; }
.bloc.large{ grid-column:1 / 11; max-width:none; }
.bloc > * + *{ margin-top:26px; }
.bloc > .forte, .bloc > .manifeste{ margin-top:44px; }
.bloc > .litanie{ margin-top:36px; }
/* La phrase forte encadre la litanie : elle ouvre le constat et le conclut. Demandé par le client le
17 septembre 2026, elle passe d'un cran au-dessus de la litanie, et pas davantage ; le titre de section
garde le premier rang, au moins 1,7 fois sa taille à toutes les largeurs. */
.bloc > .forte{ font-size:clamp(26px,3.1vw,44px); }
.bloc > .litanie li{ font-size:clamp(20px,2.4vw,34px); }
.bloc .actions{ margin-top:40px; }
.micro{ font-size:13px; color:var(--encre-2); margin-top:16px; }
@media (max-width:980px){ .bloc,.bloc.large{ grid-column:1 / 9; } }
@media (max-width:680px){ .bloc,.bloc.large{ grid-column:1 / 5; margin-top:36px; } }
@media (max-width:680px){ h1{ font-size:clamp(42px,14vw,78px); letter-spacing:-.06em; } }
/* Le titre du hero de l'accueil, sur téléphone (24 septembre 2026, refonte). « Libérons votre
croissance. » laissait « croissance. » seul en dernière ligne sur 165 largeurs ; l'insécable le
règle, mais sortait alors le titre de sa carte de 3 à 20 px, sur 63 largeurs de 320 à 568 px —
le piège relevé le 21 septembre sur les titres de scène. La sortie n'est ni l'une ni l'autre,
c'est la taille : à 12vw plafonnée à 72 px, les deux défauts tombent à zéro de 320 à 2 560 px.
Le sélecteur est aussi précis que celui qu'il reprend, pour ne toucher que ce hero-là. */
@media (max-width:680px){ .hero:has(.hero-photo) h1{ font-size:clamp(40px,12vw,72px); } }
/* Une coupe réservée aux grands écrans : sur téléphone, le titre s'équilibre seul,
sans quoi la coupe forcée y laisse un mot isolé. */
@media (max-width:680px){ br.coupe-large{ display:none; } }
/* — 5. Objets du territoire ————————————————————————— */
/* Le surligneur : un coup de feutre bleu, tracé quand la phrase entre à l'écran (d'après le prototype
en panneaux). Le trait est translucide et couvre toute la hauteur des lettres ; une bavure
plus pâle déborde au-dessus. Translucide, il laisse lire le texte, à l'encre sur le papier (12,7:1)
comme en clair sur l'encre (9,3:1). Sans JavaScript ou en mouvement réduit, le trait est déjà là. */
.surligne{ position:relative; display:inline; z-index:0; }
.surligne::before, .surligne .segment::before,
.surligne::after, .surligne .segment::after{ content:""; position:absolute; z-index:-1;
transform:skewY(-.7deg) scaleX(1); transform-origin:left center; transition:transform .3s cubic-bezier(.3,.8,.4,1); }
.surligne::before, .surligne .segment::before{ left:-.1em; right:-.06em; top:.06em; bottom:.02em;
background:color-mix(in srgb, var(--trait) 34%, transparent); border-radius:3px 8px 4px 10px; }
.surligne::after, .surligne .segment::after{ left:-.13em; right:.22em; top:-.03em; height:.18em;
background:color-mix(in srgb, var(--trait) 17%, transparent); border-radius:4px 12px 2px 7px;
transition-duration:.34s; transition-delay:.03s; }
.anime .surligne::before, .anime .surligne .segment::before,
.anime .surligne::after, .anime .surligne .segment::after{ transform:skewY(-.7deg) scaleX(0); }
.anime .surligne.trace::before, .anime .surligne.trace .segment::before,
.anime .surligne.trace::after, .anime .surligne.trace .segment::after{ transform:skewY(-.7deg) scaleX(1); }
/* Le titre qui se pose (d'après le prototype en panneaux) : au chargement, chaque mot monte de
son cache, 55 ms après le précédent ; le passage surligné apparaît en fondu, puis le trait passe. Le
script découpe le titre le temps du geste (.mot > i) et le rend tel quel ensuite. Le cache déborde de
la ligne en haut et en bas, pour ne rogner ni accent ni jambage, sans changer la hauteur de ligne. */
.a-poser .mot{ display:inline-block; overflow:hidden; vertical-align:bottom; padding:.2em 0 .25em; margin:-.2em 0 -.25em; }
.a-poser .mot > i{ display:inline-block; font-style:normal; transform:translateY(140%); transition:transform .78s cubic-bezier(.16,1,.3,1); }
.a-poser .libre{ opacity:0; transition:opacity .6s ease; }
.a-poser.pose .mot > i{ transform:none; }
.a-poser.pose .libre{ opacity:1; }
/* Les titres qui montent (à l'essai, 28 septembre 2026) : chaque ligne d'un titre de section monte de sous son cache à
l'entrée à l'écran, 110 ms après la précédente, en 1,15 s. Le cache déborde de la ligne en haut et en bas pour ne rogner
ni accent ni jambage, sans changer la hauteur de ligne. Posé par le script seulement (.a-monter). */
.a-monter .mot{ display:inline-block; overflow:hidden; vertical-align:bottom; padding:.14em 0 .22em; margin:-.14em 0 -.22em; }
.a-monter .mot > i{ display:inline-block; font-style:normal; transform:translateY(115%); transition:transform 1.15s cubic-bezier(.16,1,.3,1); }
.a-monter.monte .mot > i{ transform:none; }
/* Un passage replié sur plusieurs lignes : le script le découpe en segments d'une ligne.
Chacun porte son trait, tracé après le précédent, comme un feutre qui revient à la ligne. */
.surligne.decoupe::before, .surligne.decoupe::after{ content:none; }
.surligne .segment{ position:relative; z-index:0; }
.surligne .segment::before{ transition-delay:calc(var(--rang, 0) * .34s); }
.surligne .segment::after{ transition-delay:calc(var(--rang, 0) * .34s + .03s); }
/* Mot coloré dans un titre */
.rouge{ color:var(--rouge); }
.violet{ color:var(--violet); }
.vert{ color:var(--vert); }
/* L'annotation en marge : une remarque de côté, en italique. */
.marge{ font-size:14px; line-height:1.35; font-style:italic; color:var(--encre-2); }
/* L'étiquette : numéro et titre courant d'une section, ou index d'une colonne.
Avec le bordereau, le seul endroit où les capitales sont admises. */
.etiquette{ font-size:12px; letter-spacing:.11em; text-transform:uppercase; color:var(--encre-2); font-weight:500; }
.section .grille > .etiquette{ grid-column:1 / -1; }
/* L'étiquette figurée : la forme dessinée de l'étiquette. Même travail —
indexer une colonne —, mais la marque dit de quel enjeu il s'agit avant
même la lecture du titre. N'entre pas comme neuvième objet : c'est la
seconde forme de l'étiquette, l'une ou l'autre, jamais les deux ensemble.
Filet seul, un seul accent, l'orange des objets. Angles vifs, aucun rayon. */
.icone{ display:block; flex:none; width:26px; height:26px; color:var(--orange);
fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:square; stroke-linejoin:miter; }
.icone .plein{ fill:currentColor; stroke:none; }
/* Une partie du dessin peut passer en retrait, pour opposer un rang à celui qui s'en détache.
Le gris du texte secondaire, pas un troisième accent. */
.icone .retrait{ color:var(--encre-2); }
/* La marque se pose à gauche du titre, dans une gouttière : les lignes suivantes
du titre s'alignent à sa droite plutôt que de repasser dessous. */
.colonne h3:has(> .icone){ display:flex; align-items:flex-start; gap:14px; }
.colonne h3 .icone{ margin-top:.13em; }
/* Les marques qui agissent : chaque marque se dessine quand elle entre à l'écran, puis joue
son enjeu — le paraphe se signe, le nom se surligne, l'agenda se remplit, une fiche sort
du rang. Le geste se rejoue au survol de la colonne. Le script pose .a-tracer, puis .trace ;
sans lui, ou en mouvement réduit, la marque est déjà dessinée. */
/* Un blanc plus long que le trait : aucun tiret de longueur nulle ne reste en bout de tracé,
où l'extrémité carrée dessinerait un point. */
.anime .icone.a-tracer path{ stroke-dasharray:1 2; stroke-dashoffset:1; }
.anime .icone.a-tracer .plein{ opacity:0; transform-box:fill-box; transform-origin:center; }
.anime .icone.trace path{ animation:tracer .45s var(--ease) both; }
.anime .icone.trace .plein{ animation:poser .3s var(--ease) both; }
@keyframes tracer{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes poser{ from{ opacity:1; transform:scale(0); } to{ opacity:1; transform:scale(1); } }
@keyframes surligner{ from{ opacity:1; transform:scaleX(0); } to{ opacity:1; transform:scaleX(1); } }
@keyframes sortir{ from{ transform:translate(-2.5px, 3.5px); } to{ transform:none; } }
/* Le paraphe : la ligne, puis la signature d'un seul geste. */
.anime .icone[data-geste="paraphe"].trace path:nth-of-type(1){ animation-duration:.3s; }
.anime .icone[data-geste="paraphe"].trace path:nth-of-type(2){ animation-duration:.9s; animation-delay:.2s;
animation-timing-function:cubic-bezier(.45,.05,.35,1); }
/* Le nom : les deux lignes de la liste, puis le trait passe sur le nom. */
.anime .icone[data-geste="surlignage"] .plein{ transform-origin:left center; }
.anime .icone[data-geste="surlignage"].trace .plein{ animation-name:surligner; animation-duration:.4s; animation-delay:.35s; }
/* L'agenda : le cadre, puis deux rendez-vous s'inscrivent l'un après l'autre. */
.anime .icone[data-geste="agenda"].trace path:nth-of-type(3){ animation-duration:.6s; }
.anime .icone[data-geste="agenda"].trace .plein{ animation-delay:.55s; }
.anime .icone[data-geste="agenda"].trace .plein + .plein{ animation-delay:.8s; }
/* Les quatre marques des enjeux (24 septembre 2026, refonte). Chacune joue son constat :
le carnet n'ouvre ses onglets que sur le réseau déjà connu ; le chevalet porte un nom qui ne dit
rien ; la bannette reçoit plus de fiches qu'elle n'en contient ; le tampon refait le même geste. */
/* Le carnet : la couverture, puis les onglets du réseau déjà connu, l'un après l'autre. */
.anime .icone[data-geste="carnet"].trace .plein{ animation-delay:.42s; }
.anime .icone[data-geste="carnet"].trace .plein + .plein{ animation-delay:.56s; }
.anime .icone[data-geste="carnet"].trace .plein + .plein + .plein{ animation-delay:.70s; }
/* La page : deux lignes s'écrivent, puis plus rien — ce qu'on lit de vous s'arrête là, et reste au gris. */
.anime .icone[data-geste="page-vide"].trace path:nth-of-type(2){ animation-duration:.4s; animation-delay:.42s; }
.anime .icone[data-geste="page-vide"].trace path:nth-of-type(3){ animation-duration:.4s; animation-delay:.62s; }
/* La bannette : le bac, puis les fiches s'empilent, la dernière déborde. */
.anime .icone[data-geste="bannette"].trace path:nth-of-type(2){ animation-delay:.26s; }
.anime .icone[data-geste="bannette"].trace path:nth-of-type(3){ animation-delay:.40s; }
.anime .icone[data-geste="bannette"].trace path:nth-of-type(4){ animation-delay:.54s; }
.anime .icone[data-geste="bannette"].trace .plein{ animation-delay:.70s; }
/* Le tampon : l'outil se dessine, puis l'empreinte se pose — le même geste, encore. */
.anime .icone[data-geste="tampon"].trace .plein{ animation-delay:.62s; }
/* Le rang : les fiches alignées, puis l'une d'elles sort du rang. */
.anime .icone[data-geste="rang"].trace .retrait path:nth-of-type(2){ animation-delay:.06s; }
.anime .icone[data-geste="rang"].trace .retrait path:nth-of-type(3){ animation-delay:.12s; }
.anime .icone[data-geste="rang"].trace .retrait path:nth-of-type(4){ animation-delay:.18s; }
.anime .icone[data-geste="rang"].trace > path{ animation:tracer .4s var(--ease) .2s both, sortir .45s var(--ease) .65s both; }
/* La rature : on barre le mot faux, on écrit le mot juste à côté. */
.rature{ display:block; margin-top:24px; color:var(--encre); font-style:italic; }
.rature del{ color:var(--encre-2); text-decoration-color:var(--orange); text-decoration-thickness:2px; }
.rature ins{ text-decoration:none; }
/* La rature simple : on barre ce qu'on refuse, sans mot de remplacement. Au défilement (à l'essai, 18 septembre
2026) : le trait passe sur les mots au rythme du défilement, passage après passage — ligne après ligne si le
passage se replie —, puis les mots barrés passent au gris ; en remontant, il se retire. Le script ne règle que
--rature, de 0 à 1, et pose .trace quand le trait est complet. Trait de 3 px à l'orange des textes, plus foncé
que l'orange des objets, à la demande du client. Sans JavaScript et en mouvement réduit, les mots sont déjà
barrés. */
.biffe{ color:var(--encre-2);
background:linear-gradient(var(--orange-texte), var(--orange-texte)) no-repeat 0 58% / 100% 3px; }
/* La rature en série (à l'essai, 21 septembre 2026, à la demande du client) : chaque ligne barre ce qui se
fait ailleurs et écrit le nôtre à côté. C'est la rature du répertoire — « corriger un objectif faux par le
bon » —, restée jusqu'ici sans emploi sur le site, posée en série comme la rature simple.
Elle réunit deux blocs que la section 05 tenait séparés : « Nos engagements » donnait ce qu'on barre,
« Notre ADN » ce qu'on écrit ; ils disaient la même chose, l'un mieux que l'autre.
Le passage barré garde `.biffe` : le trait se trace au défilement, comme avant. */
/* Deux temps, et non une ligne : le refus, puis la réponse dessous. Sur une seule ligne, la première
rature tenait mais les deux autres se repliaient, la réponse tombant sous la flèche — une ligne alignée,
deux décalées. En deux temps, les trois font deux lignes à toutes les largeurs, de 981 à 2 560 px, pour
6 px de plus. */
.rature-serie{ display:block; }
.rature-serie .biffe{ font-weight:inherit; }
/* Le remplacement porte le propos : à l'encre, quand le refus reste au gris. La flèche est sa charnière ;
elle n'est pas dans le balisage, où « , mais » la dit en clair pour les lecteurs d'écran. */
.rature-serie .remplace{ display:block; margin-top:3px; color:var(--encre); }
.rature-serie .remplace::before{ content:"\2192\00a0"; color:var(--orange-texte); }
/* Sur les plus petits téléphones, la deuxième rature prenait trois lignes quand les autres en faisaient deux
(« des actions à impact commercial », le plus long des trois raccords). Un pixel de moins suffit : à 18 px,
les trois sont régulières jusqu'à 320 px. Le sélecteur doit être aussi précis que `.colonne.sans-index h3`,
qui fixe le corps des titres de colonne — sinon la règle ne s'applique pas. */
@media (max-width:360px){ .colonne.sans-index h3.rature-serie{ font-size:18px; } }
.anime .biffe{ color:var(--encre); background-size:calc(var(--rature, 0) * 100%) 3px; transition:color .4s ease; }
.anime .biffe.trace{ color:var(--encre-2); }
/* L'intercalaire : la languette orange qui dépasse d'un dossier. */
.intercalaire{ position:absolute; z-index:4; top:-11px; left:30px; width:72px; height:12px; pointer-events:none;
background:var(--orange); border:1px solid color-mix(in srgb, var(--orange) 86%, var(--encre)); border-bottom:0; }
@media (max-width:680px){ .intercalaire{ left:22px; width:62px; } }
/* La référence : apposée de travers, comme un tampon d'inventaire. */
.ref{ position:absolute; top:18px; right:18px; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
color:var(--encre-2); opacity:.55; border:1.5px solid currentColor; padding:5px 9px;
transform:rotate(-5.5deg); transition:transform .5s var(--ressort), opacity .35s ease; }
.projet:hover .ref{ transform:rotate(-2deg); opacity:.85; }
/* Le bordereau : des champs nommés, une valeur par ligne. */
.bordereau{ margin:0; border-top:1px solid var(--ligne); }
/* Posé seul sur la grille d'une section, il prend de l'air sous la tête de section. */
.grille > .bordereau{ margin-top:72px; }
.bordereau div{ display:grid; grid-template-columns:128px minmax(0,1fr); gap:16px; padding:14px 0;
border-bottom:1px solid var(--ligne); align-items:baseline; }
.bordereau dt{ font-size:12px; font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--encre-2); }
.bordereau dd{ margin:0; font-size:17px; font-weight:500; overflow-wrap:anywhere; }
/* Sur téléphone, l'intitulé monte au-dessus de la valeur, comme dans le formulaire :
une adresse longue garde toute la largeur. */
@media (max-width:680px){ .bordereau div{ grid-template-columns:1fr; gap:4px; } }
.bordereau a{ border-bottom:1px solid var(--ligne); padding-bottom:2px; transition:border-color .3s; }
.bordereau a:hover{ border-color:var(--orange); }
/* Le formulaire : le bordereau qu'on remplit, posé en questions. Chaque intitulé est une question
adressée au visiteur, écrite en clair au-dessus de sa réponse — une phrase ne se met jamais en
capitales — et l'exemple s'affiche en gris dans le champ. Un filet sous chaque réponse, comme au
bordereau. Intention : recueillir une demande. L'envoi part en arrière-plan (sm-systeme.js) ;
sans JavaScript, un avis propose le courriel. */
.formulaire{ grid-column:1 / 9; margin-top:64px; }
.champ{ position:relative; display:grid; gap:10px; min-width:0; margin:0; padding:26px 0 12px;
border:0; border-bottom:1px solid var(--ligne); }
/* Le champ en cours de saisie : un filet orange se tire sur son filet gris, de gauche à droite.
Avec la question passée à l'orange, il tient lieu d'indicateur de focus : le cadre du focus,
qui doublerait le filet, est retiré des zones de saisie, et d'elles seules. */
.champ::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--orange);
transform:scaleX(0); transform-origin:left center; transition:transform .45s var(--ease); pointer-events:none; }
.champ:focus-within::after{ transform:scaleX(1); }
.champ input:not([type="radio"]):focus-visible, .champ textarea:focus-visible{ outline:none; }
/* La question. L'astérisque des questions obligatoires est caché des lecteurs d'écran :
l'attribut required le dit déjà. */
.champ > label, .champ > legend{ padding:0; font-size:17px; font-weight:500; line-height:1.3; letter-spacing:-.01em;
color:var(--encre); transition:color .25s ease; }
.champ:focus-within > label, .champ:focus-within > legend{ color:var(--orange-texte); }
/* La réponse. Le curseur d'écriture prend l'orange du champ actif. L'exemple reste lisible :
le gris du texte secondaire, en 400, pour ne pas passer pour une réponse. */
.champ input:not([type="radio"]), .champ textarea{ font:500 17px/1.45 var(--police); color:var(--encre);
background:transparent; border:0; border-radius:0; padding:0; width:100%; resize:vertical; caret-color:var(--orange); }
.champ input::placeholder, .champ textarea::placeholder{ color:var(--encre-2); opacity:1; font-weight:400; }
/* Le choix : une question, quelques réponses, une seule retenue. Le bouton reste rond — c'est sa
forme qui dit « une seule » : exception à la règle des angles vifs. Coché, un point orange s'y pose.
Au clavier, il garde le cadre du focus : le filet dit quelle question, le cadre dit quelle réponse. */
.champ.choix{ display:block; }
.champ.choix > legend{ float:left; width:100%; }
.options{ clear:both; display:flex; flex-wrap:wrap; gap:10px 30px; padding-top:12px; }
.options label{ display:inline-flex; align-items:center; gap:10px; font-size:17px; line-height:1.3; cursor:pointer; }
.options input{ appearance:none; -webkit-appearance:none; flex:none; width:18px; height:18px; margin:0; padding:0;
border:1.5px solid var(--encre-2); border-radius:50%; cursor:pointer;
background:radial-gradient(circle closest-side, var(--orange) calc(100% - 1px), transparent) center / 0 0 no-repeat;
transition:background-size .22s var(--ease), border-color .22s ease; }
.options label:hover input{ border-color:var(--encre); }
.options input:checked{ background-size:8px 8px; border-color:var(--orange); }
.options input:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
/* Le leurre : hors de l'écran, jamais annoncé, jamais atteint au clavier. */
.leurre{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.mention{ margin-top:22px; font-size:13px; color:var(--encre-2); max-width:62ch; }
/* Le lien peut tenir au milieu de la phrase : il se souligne du gris du texte, pour se voir. */
.mention a{ border-bottom:1px solid currentColor; transition:border-color .3s; }
.mention a:hover{ border-color:var(--orange); }
.formulaire .actions{ margin-top:30px; }
/* Le widget anti-robots ne prend de place que s'il doit poser une question au visiteur. */
.formulaire .turnstile{ margin-top:22px; }
.formulaire .turnstile:empty{ display:none; }
/* Les états d'envoi. Le bouton se fige pendant l'envoi ; au succès, les champs s'effacent
et la confirmation prend leur place sous le filet ; à l'échec, les champs restent remplis
et un lien courriel prend le relais. */
.formulaire.en-cours .bouton, .formulaire .bouton:disabled{ opacity:.55; cursor:progress; transform:none; }
.formulaire.envoye > :not(.etat-envoi){ display:none; }
.etat-envoi{ margin-top:26px; }
/* Le message reçoit le focus par script, pour qu'un lecteur d'écran le lise : ce n'est pas une
commande, il ne porte pas de cadre de focus. */
.etat-envoi:focus{ outline:none; }
.etat-envoi[hidden]{ display:none; }
.etat-envoi .forte{ margin-bottom:10px; }
.etat-envoi p:not(.forte){ color:var(--encre-2); max-width:62ch; }
/* Le tampon de réception : la référence apposée de travers sur la demande reçue, avec la date
du jour. Il frappe une fois quand la confirmation apparaît ; en mouvement réduit, il est déjà posé. */
/* Le message garde la place du tampon à sa droite, pour ne pas passer dessous. */
.etat-envoi[data-etat="succes"]{ position:relative; padding-right:180px; }
.etat-envoi p.tampon{ position:absolute; top:-4px; right:0; margin:0; display:flex; flex-direction:column; align-items:center; gap:3px;
padding:8px 13px 7px; border:2px solid currentColor; color:var(--orange-texte); max-width:none;
font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1.2;
transform:rotate(-5.5deg); animation:tamponner .42s var(--ease) .3s both; }
.tampon time{ font-size:11px; letter-spacing:.12em; font-variant-numeric:tabular-nums; }
@keyframes tamponner{
0%{ opacity:0; transform:rotate(-10deg) scale(1.7); }
60%{ opacity:1; transform:rotate(-5deg) scale(.96); }
100%{ opacity:1; transform:rotate(-5.5deg) scale(1); }
}
@media (max-width:680px){ .etat-envoi[data-etat="succes"]{ padding-right:0; }
.etat-envoi p.tampon{ position:static; display:inline-flex; margin-bottom:20px; } }
/* L'erreur se signale comme le champ actif : un filet orange, tiré au-dessus du message. */
.etat-envoi[data-etat="erreur"]{ padding-top:14px; border-top:2px solid var(--orange); }
.etat-envoi[data-etat="erreur"] p{ color:var(--encre); }
.etat-envoi a{ border-bottom:1px solid var(--orange); }
@media (max-width:980px){ .formulaire{ grid-column:1 / 9; } }
@media (max-width:680px){ .formulaire{ grid-column:1 / 5; margin-top:48px; } }
/* — 6. Dispositifs ————————————————————————————————— */
/* Le bandeau : une ligne d'annonce, très petite, qui défile au-dessus de la barre.
Elle défile hors de l'écran avec la page ; la barre, elle, reste collée.
Exception validée à la règle « pas de bandeau défilant » : réservé à une annonce temporaire,
il s'arrête au survol et au focus clavier, et se fige en mouvement réduit. */
.bandeau{ display:flex; overflow:hidden; white-space:nowrap; background:var(--encre); color:var(--papier);
font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.bandeau-piste{ display:inline-flex; gap:28px; flex-shrink:0; padding:7px 14px 7px 0; animation:defiler 32s linear infinite; }
.bandeau:hover .bandeau-piste, .bandeau:focus-visible .bandeau-piste{ animation-play-state:paused; }
@keyframes defiler{ to{ transform:translateX(-100%); } }
@media (prefers-reduced-motion:reduce){ .bandeau-piste{ animation:none; } .bandeau-piste + .bandeau-piste{ display:none; } }
/* Le changement de page : la feuille sort, la suivante glisse en place, la barre ne bouge pas.
Transition d'une page à l'autre dans les navigateurs qui la connaissent ; ailleurs, et en
mouvement réduit, la page change normalement. */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion:reduce){ @view-transition{ navigation:none; } }
::view-transition-old(root){ animation:feuille-sort .22s ease-in both; }
::view-transition-new(root){ animation:feuille-entre .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes feuille-sort{ to{ opacity:0; transform:translateY(-14px); } }
@keyframes feuille-entre{ from{ opacity:0; transform:translateY(22px); } }
/* Navigation */
/* La barre est posée sur le plan de travail. Quand la page défile, son contenu se range dans une carte
papier qui flotte au-dessus des autres (d'après le prototype en panneaux) : filet, ombre
douce, léger flou derrière. Cette carte a la largeur et l'air intérieur des autres : le contenu de la
barre reste aligné sur leur texte, et rien ne bouge quand elle se pose. Hauteur inchangée, 78 px. */
.nav{ position:sticky; top:0; z-index:100; padding:7px 0; background-color:var(--fond);
transition:background-color .3s ease; view-transition-name:barre; }
.nav.pose{ background-color:transparent; }
.nav-in{ min-height:64px; margin:0 auto; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:28px;
width:min(calc(100% - var(--carte-ecart)*2), var(--carte-max)); padding:0 calc(var(--carte-dedans) - 1px);
border:1px solid transparent; border-radius:var(--carte-rayon);
transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.nav.pose .nav-in{ background-color:color-mix(in srgb, var(--papier) 94%, transparent); border-color:var(--ligne);
box-shadow:0 10px 30px -24px rgba(17,19,24,.6); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.sceau{ font-size:17px; font-weight:600; letter-spacing:-.02em; }
/* Le bouton de la barre passe à l'orange (21 septembre 2026, à la demande du client) : c'est le seul appel
toujours à l'écran, et à l'encre il avait exactement le poids du sceau et des liens voisins. Il prend
l'orange des TEXTES (#B34924) et non celui des objets : le libellé papier y tient 5,0:1, contre 4,0:1 sur
l'orange des objets — sous le seuil pour du texte. C'est le même accent, pas un troisième.
Exception à la règle des boutons pleins : il ne se vide pas au survol, il passe à l'encre. Vidé, son
libellé orange ne tiendrait que 4,2:1 sur le plan de travail. Plein, il tient 17,3:1. */
.nav .bouton.plein{ background:var(--orange-texte); border-color:var(--orange-texte); color:var(--papier); }
.nav .bouton.plein:hover, .nav .bouton.plein:focus-visible{ background:var(--encre); border-color:var(--encre); color:var(--papier); }
.nav-liens{ display:flex; gap:26px; font-size:14px; font-weight:500; }
.nav-liens a{ position:relative; }
.nav-liens a::after{ content:""; position:absolute; left:0; bottom:-5px; width:100%; height:1px; background:var(--orange);
transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.nav-liens a:hover::after,.nav-liens a:focus-visible::after{ transform:scaleX(1); }
/* LES FINITIONS (à l'essai, 28 septembre 2026, chantier « l'accueil à l'échelle », d'après Ignorit) : au survol, le libellé
d'un lien de la barre roule — il monte hors de son cache et sa copie arrive par-dessous, .5 s. Le script enveloppe le
texte (.roule dans .cache) ; sans lui, le lien reste tel quel. Le filet orange se trace toujours dessous. */
.nav-liens .cache{ display:inline-block; overflow:hidden; vertical-align:top; }
.nav-liens .roule{ display:inline-block; position:relative; transition:transform .5s cubic-bezier(.86,0,.07,1); }
.nav-liens .roule::after{ content:attr(data-texte); position:absolute; left:0; top:100%; }
.nav-liens a:is(:hover, :focus-visible) .roule{ transform:translateY(-100%); }
/* Le bouton magnétique (même chantier, d'après Ignorit et Fragment) : les deux appels principaux de l'accueil — le hero et
l'appel final, deux cibles au plus — suivent un peu le pointeur (22 % de son écart au centre), et reviennent en .35 s. Il
passe par la propriété `translate`, distincte du `transform` du survol. Souris seulement. */
[data-sm~="aimant"]{ transition:transform .45s var(--ressort), background .35s var(--ease), color .35s var(--ease), translate .35s var(--ease); }
[data-sm~="aimant"].aimante{ transition:transform .45s var(--ressort), background .35s var(--ease), color .35s var(--ease), translate .08s linear; }
@media (max-width:980px){ .nav-in{ grid-template-columns:1fr auto; } .nav-liens{ display:none; } }
/* Sur téléphone, le bouton de la barre tient sur une ligne ; sous 360 px, la place manque
et le libellé repasse sur deux lignes. */
@media (max-width:680px){ .nav{ padding:6px 0; } .nav-in{ min-height:54px; gap:10px; } .sceau{ font-size:16px; }
.nav-in .bouton{ min-height:42px; padding:0 12px; font-size:13px; white-space:nowrap; } }
@media (max-width:359px){ .nav-in .bouton{ white-space:normal; max-width:150px; padding:4px 10px; } }
/* Bouton */
/* Un libellé long se replie sur deux lignes : la marge verticale lui laisse de l'air
et le bouton grandit. Sur une seule ligne, la hauteur minimale l'emporte, rien ne bouge.
Coins arrondis (d'après le prototype) : une pilule sur une ligne, des coins doux sur deux.
Le corps monte de 14 à 16 px (21 septembre 2026, à la demande du client, qui ne voyait pas
assez les appels) : un bouton ne doit pas être plus petit que le texte qu'il interrompt —
17 px pour le texte courant, 16 pour les descriptions de colonnes. L'air et la hauteur
suivent (13 px et 52 px au lieu de 11 et 48), et le rayon passe à la moitié de la hauteur
pour que la pilule reste une pilule sur une ligne. */
.bouton{ display:inline-flex; align-items:center; justify-content:center; text-align:center; gap:10px; min-height:52px; padding:13px 24px;
border:1px solid var(--encre); border-radius:26px; font-size:16px; font-weight:500; color:var(--encre); background:transparent; cursor:pointer;
transition:transform .45s var(--ressort), background .35s var(--ease), color .35s var(--ease); }
.bouton:hover,.bouton:focus-visible{ transform:translateY(-2px); background:var(--encre); color:var(--papier); }
/* Le bouton plein porte l'action principale : celui de la barre, le premier d'une paire, l'envoi d'un
formulaire. Plein au repos, il se vide au survol ; les autres font l'inverse. */
.bouton.plein{ background:var(--encre); color:var(--papier); }
.bouton.plein:hover,.bouton.plein:focus-visible{ background:transparent; color:var(--encre); }
/* Le bouton bleu (à l'essai, 21 septembre 2026, à la demande du client) : le pied d'appel de la section 03
prend le bleu du geste. EXCEPTION À LA RÈGLE 2 — le bleu y est « l'accent du geste : le trait du
surligneur, et lui seul », et ne colore jamais un objet. Le client l'a demandé pour cet appel.
Son libellé est à l'ENCRE : mesuré, il tient 7,18:1 sur le bleu, quand le papier n'y tiendrait que
2,41:1. Et il ne se vide pas au survol, il passe à l'encre, pour la même raison : vidé, son libellé bleu
ne vaudrait que 2,41:1 sur le papier de la section.
La surface bleue ne tient elle-même que 2,41:1 sur le papier — le ratio ne mesure que la luminance, et
c'est l'écart de teinte qui la détache ici. Le libellé, lui, est largement au-dessus du seuil. */
.bouton.bleu-plein{ background:var(--trait); border-color:var(--trait); color:var(--encre); }
.bouton.bleu-plein:hover, .bouton.bleu-plein:focus-visible{ background:var(--encre); border-color:var(--encre); color:var(--papier); }
.section.sombre .bouton, .hero.sombre .bouton{ border-color:var(--papier); color:var(--papier); }
.section.sombre .bouton:hover,.section.sombre .bouton:focus-visible,
.hero.sombre .bouton:hover,.hero.sombre .bouton:focus-visible{ background:var(--papier); color:#111318; }
.section.sombre .bouton.plein, .hero.sombre .bouton.plein{ background:var(--papier); color:#111318; }
.section.sombre .bouton.plein:hover,.section.sombre .bouton.plein:focus-visible,
.hero.sombre .bouton.plein:hover,.hero.sombre .bouton.plein:focus-visible{ background:transparent; color:var(--papier); }
/* Le bouton violet de l'appel final, sur la section sombre. Exception validée : la seule fois où une
couleur de mot touche un objet.
Depuis le 21 septembre 2026, à la demande du client, il est PLEIN au repos et se vide au survol, comme
tout bouton principal — il ne faisait jusque-là que porter un cadre violet sur un libellé clair, et il
était, à 145 px, le plus petit bouton du site alors qu'il conclut la page. Le violet éclairci de la
section sombre (#9786F0) porte le libellé à l'encre à 6,2:1 ; vidé au survol, le violet sur l'encre
tient la même valeur. La classe se nommait .encadre-violet tant qu'il n'était qu'un cadre. */
.section.sombre .bouton.violet-plein{ background:var(--violet); border-color:var(--violet); color:#111318; }
.section.sombre .bouton.violet-plein:hover, .section.sombre .bouton.violet-plein:focus-visible{ background:transparent; color:var(--violet); }
.actions{ display:flex; gap:12px; flex-wrap:wrap; }
/* Hero */
.hero{ padding:clamp(88px,10vw,156px) 0 clamp(40px,5vw,72px); overflow:hidden; position:relative; }
/* Le hero plein écran (d'après le prototype) : sur l'accueil, la carte du hero prend la hauteur
de l'écran sous le bandeau et la barre, plafonnée à 820 px pour que la photo garde sa table entière ; le
texte s'y centre verticalement. Un contenu plus haut garde sa hauteur. */
.hero:has(.hero-photo){ display:flex; flex-direction:column; justify-content:center;
min-height:min(calc(100svh - 134px), 820px); }
/* Le sur-titre ne laisse pas de mot seul sur sa dernière ligne, sans rééquilibrer les autres. */
.hero-amorce{ grid-column:1 / 7; margin-bottom:34px; font-size:14px; font-weight:500; color:var(--encre-2); text-wrap:pretty; }
/* La catégorie (21 septembre 2026, à la demande du client) : sur l'accueil, le sur-titre nomme l'activité
de l'agence et non la page. Il passe en capitales d'imprimerie — EXCEPTION à la règle des capitales
(section 7 du manuel), qui ne les admet que dans les étiquettes, les languettes, les cartouches et le
bordereau. Elles prennent l'approche des étiquettes : sans elle, des capitales se serrent et se lisent
mal. Les sur-titres des autres pages, qui nomment la page, ne bougent pas. */
.hero-amorce.categorie{ text-transform:uppercase; letter-spacing:.11em; }
.hero h1{ grid-column:1 / 11; max-width:1140px; }
.hero .chapo{ grid-column:1 / 7; margin-top:42px; }
.hero .actions{ grid-column:1 / 7; margin-top:34px; }
/* Les puces du hero (26 septembre 2026, refonte, à la demande du client) : trois termes entre le chapô et
le bouton, dans la liste en ligne des expertises — points médians, un terme ne se coupe pas. En 500 et
au corps des expertises, à la couleur du texte : elles précisent le chapô sans lui prendre son rang.
Aucune marge propre : l'écart de la grille (16 à 28 px) suffit, et les rattache au chapô plutôt qu'au
bouton. Avec 26 px de plus, le bas du bouton sortait de l'écran d'un portable de 1 280 × 720. */
.hero .en-ligne{ grid-column:1 / 7; font-size:15px; font-weight:500; }
.hero .marge{ grid-column:10 / 13; align-self:end; padding-bottom:8px; }
.hero-filet{ grid-column:1 / 13; margin-top:90px; border-top:1px solid var(--ligne); }
@media (max-width:980px){
.grille{ grid-template-columns:repeat(8, minmax(0,1fr)); }
.hero-amorce,.hero .chapo,.hero .en-ligne,.hero .actions{ grid-column:1 / 7; }
.hero h1{ grid-column:1 / 9; } .hero .marge{ grid-column:6 / 9; } .hero-filet{ grid-column:1 / 9; }
}
@media (max-width:680px){
:root{ --gouttiere:20px; --section:84px; }
.grille{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.hero{ padding-top:70px; }
.hero-amorce,.hero h1,.hero .chapo,.hero .en-ligne,.hero .actions,.hero .marge,.hero-filet{ grid-column:1 / 5; }
.hero .marge{ margin-top:54px; max-width:230px; }
}
/* La photo du hero : sur l'accueil, une salle de réunion de nuit, derrière la promesse,
qui reste la première lecture. Le hero prend le fond sombre pour la porter (.hero.sombre). Angles
vifs, ni cadre, ni ombre, ni animation. Sous 981 px, elle passe sous les boutons, en 16:10. */
.hero-photo{ display:block; grid-column:1 / -1; margin-top:48px; aspect-ratio:16 / 10; background:var(--papier-creux); }
.hero.sombre .hero-photo{ background:none; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:center; }
@media (max-width:680px){ .hero-photo{ margin-top:40px; } }
/* En bureau, la photo devient le fond du hero : calée à droite sur toute sa hauteur, elle se fond
dans le fond du hero vers la gauche. Un masque la rend transparente sous le texte et pleine à droite.
Sa largeur suit la hauteur du hero, au rapport de la photo, sans dépasser 64 % de l'écran : plus
étroite, elle se recadre des deux côtés, et la table, au centre de l'image, reste au centre de la
partie visible, dans le tiers droit de l'écran. Le texte passe au-dessus ; le titre prend une taille
réduite, pour tenir en deux lignes dans les colonnes 1 à 7. */
@media (min-width:981px){
/* Le titre du hero, en deux lignes (25 septembre 2026, à la demande du client) : « Vous avez
l'expertise. » au-dessus, « Libérons votre croissance. » en dessous, coupées par un
. Pour que la seconde phrase tienne sur une ligne, le titre descend de
clamp(56px, 5.6vw, 84px) à ceci : 62 px au lieu de 79 à 1 409 px, 68 au lieu de 84 dès 1 600.
C'est le prix des deux lignes, mesuré — à toute taille supérieure la phrase se coupe encore.
L'ÉLARGIR AURAIT COÛTÉ PLUS CHER, et c'est la mesure qui l'a écarté : le titre passe alors sur
la partie pleine de la photo, où le masque ne le protège plus. Contraste du titre clair,
recomposé au pixel (fond sombre + photo voilée) : 3,27:1 sur sept colonnes à 1 409 px, 2,50:1
sur huit, 1,84:1 sur neuf — le seuil d'un grand titre est de 3:1. */
.hero:has(.hero-photo) h1{ grid-column:1 / 8; font-size:clamp(42px,4.4vw,68px); }
.hero:has(.hero-photo) .grille > :not(.hero-photo){ position:relative; z-index:1; }
.hero-photo{ position:absolute; top:0; right:0; z-index:0; margin:0; background:none;
height:100%; aspect-ratio:2912 / 1440; max-width:64%;
-webkit-mask-image:linear-gradient(to right, transparent, rgba(0,0,0,.25) 14%, rgba(0,0,0,.6) 26%, rgba(0,0,0,.9) 36%, #000 44%);
mask-image:linear-gradient(to right, transparent, rgba(0,0,0,.25) 14%, rgba(0,0,0,.6) 26%, rgba(0,0,0,.9) 36%, #000 44%); }
}
/* LE HERO MONUMENTAL (28 septembre 2026, à l'essai, chantier « l'accueil à l'échelle ») : la promesse reprend le premier
rang de la page. Le titre passe sur toute la largeur, jusqu'à 128 px (68 auparavant, plus petit que les titres de
section), et traverse la photo ; un voile d'encre descend du haut de la photo pour qu'il y reste lisible — mesuré au
pixel, photo, fondu et voile recomposés. Le chapô, les puces et le bouton restent dans la colonne de gauche, sous
le titre, face à la photo. */
@media (min-width:981px){
.hero:has(.hero-photo) h1{ grid-column:1 / -1; max-width:none; font-size:clamp(64px,7.4vw,128px); line-height:.9; }
.hero:has(.hero-photo)::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:linear-gradient(to bottom, rgba(17,19,24,.86), rgba(17,19,24,.62) 34%, rgba(17,19,24,0) 64%); }
}
/* LE BORD À BORD (à l'essai, 28 septembre 2026, chantier « l'accueil à l'échelle », seconde passe : casser la pile de
cartes). Une carte .bord-a-bord sort de la largeur des cartes et prend tout l'écran, sans coins : la page cesse d'être une
suite de boîtes identiques. Son texte garde exactement l'alignement des autres cartes (la gouttière additionne le vide et
l'air intérieur). La page ne défile jamais de côté : html coupe ce qui dépasse (clip, et non hidden, qui casserait les
éléments collants). */
html{ overflow-x:clip; }
main > .bord-a-bord{ width:100vw; margin-inline:calc(50% - 50vw); border-radius:0;
--gouttiere:calc(var(--carte-ecart) + var(--carte-dedans)); }
/* Le hero bord à bord : la photo prend tout le hero, à toutes les largeurs. En bureau, elle garde son fondu vers la
gauche ; sur tablette et téléphone, elle passe en fond, sous un voile d'encre qui porte le texte, au lieu d'être posée
sous le bouton. Le hero y prend la hauteur de l'écran. */
@media (max-width:980px){
.hero.bord-a-bord:has(.hero-photo){ min-height:calc(100svh - 120px); display:flex; flex-direction:column; justify-content:flex-end; }
.hero.bord-a-bord .hero-photo{ position:absolute; inset:0; z-index:0; margin:0; aspect-ratio:auto; }
.hero.bord-a-bord .grille > :not(.hero-photo){ position:relative; z-index:1; }
.hero.bord-a-bord::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:linear-gradient(to bottom, rgba(17,19,24,.5), rgba(17,19,24,.66) 38%, rgba(17,19,24,.9) 72%, #111318); }
}
@media (min-width:981px){ .hero.bord-a-bord:has(.hero-photo){ min-height:min(calc(100svh - 134px), 920px); } }
/* LES NUMÉROS MONUMENTAUX (à l'essai, 28 septembre 2026, seconde passe ; d'après Fragment et la V1, la numérotation comme
élément graphique) : chaque section numérotée de l'accueil s'ouvre sur son numéro, en très grand, en filet d'encre (le
papier sur le fond sombre), masqué aux lecteurs d'écran — l'étiquette le dit déjà. En bureau, il se cale en haut à
droite de la tête, dans le vide que laissait le titre (13 % de la largeur de l'écran, de 120 à 220 px : la plus petite
place libre mesurée est de 142 px, frise à 981 px) ; sur tablette et téléphone, il passe au-dessus de l'étiquette. Il
monte de son cache comme les titres. */
/* Le filet des grandes lettres : la police est variable, ses contours se chevauchent, et un filet simple (text-stroke)
les dessinait tous — des traits parasites dans le « 4 » ou le « 1 ». Le filet est donc peint SOUS le remplissage
(paint-order), deux fois plus épais, et le remplissage prend la couleur du fond de la carte : seule la moitié
extérieure du filet reste visible, 1,5 px, et les contours intérieurs disparaissent. */
.section{ --fond-carte:var(--papier); }
.section.blanche{ --fond-carte:var(--blanc); }
.section.creuse{ --fond-carte:var(--papier-creux); }
.section.sombre{ --fond-carte:#111318; }
.numero-geant{ display:block; grid-column:1 / -1; font-size:clamp(88px,26vw,120px); line-height:.78; font-weight:600;
letter-spacing:-.06em; font-variant-numeric:tabular-nums; color:var(--fond-carte); -webkit-text-stroke:3px var(--encre);
paint-order:stroke fill; margin:0 0 18px -.04em; pointer-events:none; user-select:none; }
@media (min-width:981px){
.grille:has(> .numero-geant){ position:relative; }
.grille > .numero-geant{ position:absolute; top:-.06em; right:0; margin:0; font-size:clamp(120px,13vw,220px); }
/* Le titre lui laisse sa place : colonnes 1 à 9 au lieu de 1 à 10 (« La croissance est un système… », sur une ligne dès
1 690 px, venait à 5 px du numéro). */
.grille:has(> .numero-geant) > h2.titre-tres-large{ grid-column:1 / 10; }
/* À côté d'un titre composé, plus large, il se resserre : il le chevauchait dès 1 632 px. */
.grille:has(> .titre-compose) > .numero-geant{ font-size:clamp(108px,11vw,180px); }
}
/* LA BANDE GÉANTE (à l'essai, 28 septembre 2026, seconde passe ; d'après le texte géant piloté par le défilement
d'Ignorit et de la V1) : hors des cartes, sur le plan de travail, bord à bord, les trois termes du hero en très grand,
l'un plein, le suivant en filet, séparés par des points orange ; la ligne glisse de côté au rythme du défilement
(translateX, réglé par le script) et s'arrête quand on s'arrête. Sans script et en mouvement réduit, elle est immobile. */
.bande-geante{ overflow:clip; padding:clamp(8px,1.5vw,24px) 0; pointer-events:none; user-select:none; }
.bande-geante p{ margin:0; display:flex; align-items:baseline; gap:.28em; width:max-content; white-space:nowrap;
font-size:clamp(56px,11vw,190px); line-height:1; font-weight:600; letter-spacing:-.055em; color:var(--encre);
will-change:transform; }
.bande-geante .filet{ color:var(--fond); -webkit-text-stroke:3px var(--encre); paint-order:stroke fill; }
.bande-geante i{ font-style:normal; color:var(--orange); }
/* L'AIR (même chantier) : sur l'accueil, en bureau, les sections respirent davantage — jusqu'à 204 px en haut et en bas
au lieu de 168 — pour que les moments à grande échelle aient leur scène. */
@media (min-width:981px){ main:has(.hero-photo){ --section:clamp(96px,12.4vw,204px); } }
/* Le vis-à-vis : l'invitation et le formulaire, face à face sur le papier. Pour une page qui n'a
qu'une chose à faire, recueillir une demande : le formulaire commence en haut de l'écran, à côté
du titre. En bureau, le titre reste en vue pendant qu'on remplit ; sous 981 px, l'un passe sous
l'autre. */
.section.vis-a-vis{ padding-top:clamp(48px,6vw,96px); }
.vis-a-vis-titre{ grid-column:1 / 6; align-self:start; }
/* Un interligne un peu plus ouvert que celui des titres : l'accent du « À » qui ouvre une ligne
toucherait sinon la ligne du dessus. */
.vis-a-vis-titre h1{ line-height:1; }
.vis-a-vis-corps{ grid-column:7 / 13; }
.vis-a-vis-corps > h2{ font-size:clamp(26px,2.3vw,34px); line-height:1.08; letter-spacing:-.03em; }
.vis-a-vis .formulaire{ margin-top:6px; }
@media (min-width:981px){
.vis-a-vis-titre{ position:sticky; top:112px; }
.vis-a-vis-titre h1{ font-size:clamp(56px,5.6vw,88px); }
}
@media (max-width:980px){
.vis-a-vis-titre, .vis-a-vis-corps{ grid-column:1 / -1; }
.vis-a-vis-corps{ margin-top:56px; }
}
@media (max-width:680px){ .vis-a-vis-corps{ margin-top:40px; } }
/* Le texte long : pages juridiques et notes. Lecture continue, colonne mesurée. */
.hero-court{ padding-bottom:clamp(24px,3vw,40px); }
.hero-court .chapo{ margin-top:28px; }
.texte-long{ grid-column:1 / 9; max-width:72ch; font-size:17px; line-height:1.6; }
.texte-long section + section{ margin-top:56px; }
.texte-long h2{ font-size:clamp(24px,2.4vw,32px); letter-spacing:-.03em; line-height:1.15; margin-bottom:16px; }
.texte-long p + p, .texte-long ul + p, .texte-long p + ul, .texte-long dl + p, .texte-long p + dl{ margin-top:14px; }
.texte-long ul{ margin:0; padding-left:22px; }
.texte-long li + li{ margin-top:6px; }
.texte-long a{ border-bottom:1px solid var(--ligne); transition:border-color .3s; }
.texte-long a:hover{ border-color:var(--orange); }
.texte-long .bordereau{ margin:22px 0; }
.texte-long .bordereau div{ grid-template-columns:200px minmax(0,1fr); }
.texte-long .bordereau dd{ font-weight:400; font-size:16px; }
@media (max-width:980px){ .texte-long{ grid-column:1 / 9; } }
/* Le sommaire en marge : la liste des sections reste en vue dans la marge droite, et un onglet
orange marque la section en cours de lecture. L'étiquette indexe, l'intercalaire classe.
Le script le remplit à partir des titres ; sans lui, ou sous 981 px, il n'apparaît pas. */
.sommaire-marge{ display:none; }
@media (min-width:981px){
.sommaire-marge.pret{ display:block; grid-column:10 / 13; grid-row:1; align-self:start;
position:sticky; top:112px; max-height:calc(100vh - 140px); overflow:auto; padding-left:2px; }
}
.sommaire-marge .etiquette{ margin-bottom:14px; }
.sommaire-marge ol{ margin:0; padding:0 0 0 18px; list-style:none; border-left:1px solid var(--ligne); }
.sommaire-marge a{ display:block; padding:5px 0; font-size:13px; line-height:1.35; color:var(--encre-2); transition:color .25s ease; }
.sommaire-marge a:hover, .sommaire-marge a[aria-current="true"]{ color:var(--encre); }
.sommaire-marge a[aria-current="true"]{ font-weight:500; }
.sommaire-marge .onglet{ position:absolute; left:1px; top:0; width:3px; height:1px; background:var(--orange);
transform-origin:top; transform:scaleY(0); transition:transform .35s var(--ease); pointer-events:none; }
@media (max-width:680px){ .texte-long{ grid-column:1 / 5; } .texte-long .bordereau div{ grid-template-columns:1fr; gap:4px; } }
/* Titres et chapôs de section, sur la grille */
.titre-large{ grid-column:1 / 8; margin-top:18px; }
.titre-tres-large{ grid-column:1 / 11; margin-top:18px; }
.titre-serre{ grid-column:1 / 7; margin-top:18px; }
/* Le chapô de droite, en italique : il se lit comme une remarque en aparté du titre de section. */
.chapo-droite{ grid-column:9 / 13; margin-top:28px; font-size:18px; line-height:1.5; font-style:italic; }
@media (max-width:980px){ .titre-large,.titre-tres-large,.titre-serre{ grid-column:1 / 8; }
.chapo-droite{ grid-column:1 / 6; margin-top:34px; } }
@media (max-width:680px){ .titre-large,.titre-tres-large,.titre-serre,.chapo-droite{ grid-column:1 / 5; } }
/* Les titres de section sur les petits téléphones (25 septembre 2026, avec les titres du client).
Le clamp général plancher à 46 px jusqu'à 767 px : sur 288 px de texte, un titre de section y tient
six caractères par ligne, et « La croissance s'organise. » laissait « s'organise. » seul en dernière
ligne sur 35 largeurs, « Transformer votre expertise en opportunités. » son dernier mot sur 11.
L'insécable est écartée, et c'est mesuré : elle rend le groupe incassable et fait déborder la page
de 117 px à 320 px. La sortie est la taille, comme le 21 septembre sur les titres de scène.
À 9,5vw plancher à 30 px, les deux défauts tombent à zéro, sans débordement. */
@media (max-width:470px){ .titre-large,.titre-tres-large{ font-size:clamp(30px,9.5vw,46px); } }
/* LE TITRE COMPOSÉ (28 septembre 2026, à l'essai, à la demande du client, qui préférait une « composition originale »
à trois mots alignés) : la dernière ligne passe seule dessous et grandit jusqu'à couvrir toute la largeur de la
première — deux lignes de même largeur, un bloc. Le rapport d'agrandissement dépend du texte : pour « Cibler.
Agir. / Mesurer. », mesuré dans la page, 1,25 : les deux lignes tombent à moins d'un pixel
l'une de l'autre, de 320 à 2 560 px (à 1,277, rapport des largeurs à taille égale, la seconde dépassait de 2 % : l'approche
négative ne compte pas pareil sur des mots de longueurs différentes). La coupe vaut à toutes les largeurs, téléphone compris. */
.titre-compose .ligne-ample{ display:block; font-size:1.25em; line-height:.9; }
/* Le bloc à hauteur tenue (28 septembre 2026, à l'essai, choix du client) : quand la première ligne est bien plus
longue que la seconde (« Cibler. Résoudre. » fait 1,9 fois « Mesurer. »), agrandir la seconde seule en ferait le plus
grand mot de la page. Les deux lignes se partagent l'effort : la première descend, la seconde monte, et le bloc garde
à peu près la hauteur d'un titre sur deux lignes. Rapports mesurés dans la page pour ce texte. */
.titre-compose .ligne-tete{ display:block; }
.titre-compose.tenu .ligne-tete{ font-size:.76em; }
.titre-compose.tenu .ligne-ample{ font-size:1.371em; }
/* Le chapô qui s'écrit (à l'essai) : quand il entre à l'écran, après un temps de lecture, la
remarque s'écrit ligne après ligne, de gauche à droite, un curseur d'écriture orange au bout
de l'encre ; à la fin, le curseur clignote puis s'efface. Le script découpe le texte en lignes
le temps du geste (.ecriture > .ecriture-ligne) et le rend tel quel ensuite. L'encre avance par
--ecrit, animée ; elle règle le masque de la ligne et la place du curseur. Sans JavaScript et
en mouvement réduit, le chapô est affiché d'emblée.
Une propriété déclarée par @property impose sa syntaxe à toute la page : elle ne prend jamais le
nom d'un jeton. Nommée --encre, elle rendait invalide le jeton de couleur du même nom. */
@property --ecrit{ syntax:""; inherits:true; initial-value:0%; }
.chapo-droite.a-ecrire{ opacity:0; }
.ecriture > .ecriture-ligne{ display:block; position:relative; width:max-content; max-width:100%; white-space:nowrap;
-webkit-mask-image:linear-gradient(to right, #000 calc(var(--ecrit) - 1.2em), transparent var(--ecrit));
mask-image:linear-gradient(to right, #000 calc(var(--ecrit) - 1.2em), transparent var(--ecrit));
animation:ecrire var(--duree, 1s) linear var(--delai, 0s) both; }
.ecriture > .ecriture-ligne::after{ content:""; position:absolute; top:.15em; bottom:.1em; left:calc(var(--ecrit) - .7em);
width:1.5px; background:var(--orange); opacity:0; pointer-events:none;
animation:curseur var(--duree, 1s) linear var(--delai, 0s); }
.ecriture > .ecriture-ligne:last-child::after{ animation:curseur var(--duree, 1s) linear var(--delai, 0s),
clignoter .5s linear calc(var(--delai, 0s) + var(--duree, 1s)) 3 forwards; }
@keyframes ecrire{ from{ --ecrit:0%; } to{ --ecrit:calc(100% + 1.2em); } }
@keyframes curseur{ from, to{ opacity:1; } }
@keyframes clignoter{ 0%, 49%{ opacity:1; } 50%, 100%{ opacity:0; } }
/* La frise : une séquence de temps sur un filet, avec la part déjà jouée en orange.
Intention : ordonner une séquence. Le rang de chaque temps se lit à sa place. */
.frise{ grid-column:1 / -1; margin-top:90px; position:relative; padding-top:44px; }
.frise::before{ content:""; position:absolute; top:6px; left:0; width:100%; height:1px; background:var(--ligne); }
.frise::after{ content:""; position:absolute; top:4px; left:0; width:var(--part,22%); height:5px; background:var(--orange);
transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease); }
.frise.visible::after{ transform:scaleX(1); }
/* Les temps se comptent seuls : le balisage documenté posait un style="--temps:5" dans la page,
que le manuel interdit. */
.frise-temps{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:20px; }
.frise-temps > *{ font-size:15px; padding-top:8px; }
.frise-temps > :first-child{ font-weight:500; }
.frise .marge{ position:absolute; left:2%; top:-28px; color:var(--orange-texte); }
/* LA FRISE DÉCRITE (24 septembre 2026, refonte) : chaque temps porte son titre et sa description,
comme la chaîne décrite porte les siens. Le filet orange parcourt la frise entière quand elle
entre à l'écran — c'est une séquence à suivre, non une progression déjà entamée : la part jouée
(--part) n'a pas d'objet ici. Un repère carré marque chaque temps sur le filet, à angles vifs.
C'est le seul geste de la zone. */
.frise.decrite::after{ width:100%; transition-duration:1.4s; }
.frise.decrite .frise-temps{ gap:clamp(24px,3vw,44px); }
.frise.decrite .frise-temps > *{ position:relative; padding-top:24px; font-size:inherit; font-weight:400; }
.frise.decrite .frise-temps > *::before{ content:""; position:absolute; top:-8px; left:0; width:9px; height:9px; background:var(--orange); }
.frise.decrite h3{ font-size:clamp(19px,1.8vw,26px); margin-bottom:12px; }
.frise.decrite p{ color:var(--encre-2); font-size:16px; max-width:34ch; }
/* LA FRISE ÉTAGÉE (28 septembre 2026, à l'essai, textes du client) : chaque temps se lit sur trois étages. Le verbe
du temps en index, en capitales à l'orange des textes, comme un rang, posé contre son repère carré — le titre de
section nomme déjà les trois verbes, l'index ne fait que les ranger. Puis la phrase forte, à l'encre : c'est elle
qui porte le temps. Puis la démonstration, au gris, dont le passage clé (strong) remonte à l'encre. */
.frise.etagee .frise-temps h3{ margin-bottom:16px; font-size:12px; line-height:1.3; letter-spacing:.11em; text-transform:uppercase;
font-weight:500; color:var(--orange-texte); }
.frise.etagee .frise-temps .forte{ max-width:22ch; margin-bottom:14px; font-size:clamp(20px,1.8vw,26px); color:var(--encre); }
.frise.etagee strong{ font-weight:500; color:var(--encre); }
/* LA FRISE AU PASSAGE DU FILET (à l'essai, 28 septembre 2026, chantier « l'accueil à l'échelle », d'après le filet qui se
trace et colore son rang du site Cortex Impact, hors de sa signature) : le filet orange avance au rythme du défilement
(--avance, de 0 à 1) ; quand il atteint un temps, son repère se remplit et sa phrase forte passe du gris à l'encre
(.atteint). Les trois temps s'allument dans l'ordre. Posé par le script seulement (.parcours) : sans lui, la frise est
entière, repères pleins, phrases à l'encre. Sur téléphone, le filet est vertical et descend. */
.anime .frise.etagee.parcours::after{ transform:scaleX(var(--avance, 0)); transition:none; }
.anime .frise.etagee.parcours .frise-temps > *::before{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--orange);
transition:background .35s var(--ease); }
.anime .frise.etagee.parcours .frise-temps > .atteint::before{ background:var(--orange); }
.anime .frise.etagee.parcours .frise-temps .forte{ color:var(--encre-2); transition:color .5s var(--ease); }
.anime .frise.etagee.parcours .frise-temps > .atteint .forte{ color:var(--encre); }
@media (max-width:680px){ .anime .frise.etagee.parcours::after{ transform:scaleY(var(--avance, 0)); } }
/* L'appel qui ferme la frise (28 septembre 2026, à l'essai, texte du client) : un bouton seul, plein, dont le libellé
est la phrase du client entière. Il prend l'air d'une reprise sous les trois temps. */
.frise + .frise-appel{ grid-column:1 / -1; margin-top:clamp(48px,5.5vw,80px); }
/* La précision factuelle qui referme la frise, en annotation. */
.frise + .marge{ grid-column:1 / -1; margin-top:30px; }
@media (max-width:680px){ .frise.decrite .frise-temps > *::before{ top:2px; left:-28px; } }
/* Correctif du 28 septembre 2026 : sur téléphone, la frise décrite gardait la largeur pleine de son filet (width:100%, plus
précis que la règle du téléphone) et prenait la hauteur de la part jouée : un rectangle orange de 350 × 170 px à 390 px,
au lieu d'un filet vertical de 5 px. Le filet reprend sa largeur et descend sur toute la hauteur de la frise. */
@media (max-width:680px){ .frise.decrite::after{ width:5px; height:calc(100% - 12px); } }
@media (max-width:680px){
/* grid-auto-flow:column ne se défait pas en posant grid-template-columns : il faut le remettre
en ligne, sinon les temps restent côte à côte et la page déborde (relevé à 320 px : 388 px). */
.frise-temps{ grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:1fr; gap:18px; padding-left:28px; }
.frise::before{ top:4px; bottom:0; left:4px; width:1px; height:calc(100% - 12px); }
.frise::after{ top:4px; left:2px; width:5px; height:var(--part,24%); transform:scaleY(0); transform-origin:top; }
.frise.visible::after{ transform:scaleY(1); }
.frise .marge{ position:static; margin:0 0 24px 28px; }
}
/* La chaîne : des maillons reliés par des flèches. Même intention que la frise,
pour une progression causale plutôt que chronologique. */
/* Les colonnes se comptent seules : le balisage documenté posait un style="--maillons:5" dans la
page, que le manuel interdit (aucun style="" dans une page). */
.chaine{ grid-column:1 / -1; margin-top:104px; border-top:1px solid var(--ligne); border-bottom:1px solid var(--ligne);
padding:58px 0 52px; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:24px; align-items:center; }
.maillon{ font-size:clamp(20px,2vw,29px); line-height:1.1; letter-spacing:-.025em; font-weight:500; position:relative; }
.maillon:not(:last-child)::after{ content:"→"; position:absolute; right:-18px; top:50%; transform:translateY(-50%);
color:var(--orange); font-size:16px; }
.chaine.decrite{ align-items:start; }
.chaine.decrite .maillon h3{ font-size:clamp(20px,2vw,29px); line-height:1.1; letter-spacing:-.025em; }
.chaine.decrite .maillon p{ margin-top:12px; font-size:15px; color:var(--encre-2); max-width:24ch; }
.chaine.decrite .maillon:not(:last-child)::after{ top:.55em; transform:none; }
@media (max-width:980px){
.chaine{ grid-auto-flow:row; grid-auto-columns:auto; gap:26px; }
.maillon:not(:last-child)::after,.chaine.decrite .maillon:not(:last-child)::after{ content:"↓"; right:auto; left:0; top:calc(100% + 7px); transform:none; }
.chaine.systeme{ gap:34px; }
}
/* LA CHAÎNE QUI SE GRIPPE (24 septembre 2026, refonte, à l'essai, à la demande du client).
Intention nouvelle au répertoire : montrer qu'une chaîne ne vaut que par son maillon le plus lent.
La chaîne ordinaire ordonne une progression causale ; celle-ci montre en plus ce qui l'arrête.
Un filet de progression court sous chaque maillon. Le flux remplit les maillons franchis, s'arrête
au milieu du maillon lent — qui prend l'orange des textes, le seul accent admis sur du texte — et
les suivants restent au gris, filet vide. Chaque maillon devient lent à son tour : le client a
tranché que n'importe lequel peut l'être, et non qu'un seul soit en cause.
Le flux passe par --flux, propriété déclarée pour être interpolable. Ce n'est le nom d'aucun jeton
(le 17 septembre, --encre en @property avait cassé le site) ; --part, qu'emploie la frise, aurait
imposé sa syntaxe de nombre à un pourcentage.
Sans JavaScript, en mouvement réduit ou si le script échoue, la chaîne est entière et à l'encre :
le jeu ne s'active que sous .tourne, posé par le script. */
@property --flux{ syntax:""; inherits:true; initial-value:1; }
.chaine.systeme{ --flux:1; margin-top:72px; align-items:end; }
.chaine.systeme .maillon{ position:relative; padding-bottom:20px; color:var(--encre);
transition:color .4s var(--ease), --flux .5s linear; }
.chaine.systeme .maillon::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
background:linear-gradient(to right, var(--orange) 0 calc(var(--flux) * 100%), var(--ligne) calc(var(--flux) * 100%) 100%); }
/* Le jeu : tout part éteint, le flux allume au passage. */
.chaine.systeme.tourne .maillon{ --flux:0; color:var(--encre-2); }
.chaine.systeme.tourne .maillon.atteint{ --flux:1; color:var(--encre); }
.chaine.systeme.tourne .maillon.lent{ color:var(--orange-texte); }
/* La flèche ne mène nulle part tant que le flux n'est pas passé. */
.chaine.systeme.tourne .maillon:not(.atteint)::after{ color:var(--ligne-forte); }
/* La phrase qui referme la chaîne. */
.chaine + .forte{ grid-column:1 / -1; margin-top:52px; }
/* Les colonnes indexées : des constats de même rang, numérotés, sans interaction.
Intention : énumérer sans hiérarchiser. */
.colonne{ grid-column:span 4; border-top:1px solid var(--ligne); padding-top:22px; min-height:220px; display:flex; flex-direction:column; }
.colonne > p:last-of-type{ margin-bottom:32px; }
.colonne .bouton{ margin-top:auto; align-self:flex-start; }
.colonne h3{ margin:30px 0 18px; }
.colonne p{ color:var(--encre-2); font-size:16px; max-width:34ch; }
.colonne .forte{ font-size:clamp(17px,1.4vw,20px); color:var(--encre); margin-top:16px; max-width:30ch; }
/* Le lien de suite, en pied de colonne : il se pose en bas, aligné d'une colonne à l'autre, et s'équilibre s'il se
replie (aucun mot seul sur sa seconde ligne).
Son filet passe du gris des filets (--ligne) à la couleur du texte, et son corps à 16 px (21 septembre 2026, à
la demande du client) : sur le blanc de la section 02, un filet #DADBD7 ne se voyait pas, et le lien ne se
distinguait d'une phrase que par sa flèche. C'est, avec ceux des scènes, le seul appel du corps de page. */
.colonne .suite{ display:inline-block; margin-top:auto; align-self:flex-start; font-size:16px; font-weight:500;
border-bottom:1.5px solid currentColor; padding-bottom:4px; text-wrap:balance; transition:color .3s, border-color .3s; }
.colonne .suite:hover, .colonne .suite:focus-visible{ color:var(--orange-texte); }
/* La reprise : ouvre un second temps dans une section déjà commencée.
Un filet la sépare de ce qui précède ; elle ne remplace pas la tête de section.
Plusieurs reprises dans une section seulement si elles ouvrent des sous-blocs
parallèles, de même forme — deux au plus, au-delà la section se coupe.
Deux formes : une étiquette (.etiquette.reprise) qui nomme le bloc,
ou une phrase forte (.forte.reprise) qui fait la transition. */
.reprise{ grid-column:1 / -1; margin-top:clamp(64px,7vw,110px); padding-top:30px;
margin-bottom:34px; border-top:1px solid var(--ligne); }
/* Un cran au-dessus des titres de colonnes qu'elle introduit, à toutes les largeurs. */
.forte.reprise{ max-width:none; padding-top:34px; margin-bottom:40px; font-size:clamp(24px,2.5vw,34px); }
/* Le pied d'appel (à l'essai, 21 septembre 2026, à la demande du client) : au bas d'une section longue,
une phrase et un bouton, séparés de ce qui précède par un filet — la reprise ouvre un second temps,
le pied d'appel ferme la section.
Il répond à une mesure : sur l'accueil, 8 405 px séparaient le dernier bouton du hero du premier de
l'appel final, soit 88 % de la page sans un seul bouton, alors que la fin de la section 03 est
l'endroit où l'intention du visiteur est la plus haute — il vient de voir les quatre solutions.
La phrase à gauche, le bouton à droite ; repliés, l'un sous l'autre.
Son bouton est PLEIN, par exception à la règle qui veut qu'un bouton seul dans un appel reste vide :
c'est le seul appel du corps de page, et c'est ce qu'on lui demande de faire voir. */
.pied-appel{ grid-column:1 / -1; margin-top:clamp(56px,6vw,88px); padding-top:34px; border-top:1px solid var(--ligne);
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px 40px; }
.pied-appel .forte{ max-width:30ch; }
.pied-appel .actions{ flex:none; }
/* Le pied d'appel empilé (28 septembre 2026, à l'essai, section 02 de l'accueil) : la phrase, puis le bouton juste
dessous, et non à sa droite — la phrase achève le titre de la section, le bouton en découle. */
.pied-appel.empile{ flex-direction:column; align-items:flex-start; }
/* La réplique du titre (28 septembre 2026, à l'essai, à la demande du client) : la phrase qui achève le titre de la
section lui répond à la même ampleur — taille, approche et interligne d'un titre de section —, calée à droite, face
au titre calé à gauche. Le bouton qui la suit s'aligne sous elle et grandit (20 px sur 64 en bureau), pour ne pas
paraître minuscule sous une phrase de 84 px ; sur téléphone, il garde la taille ordinaire. */
.replique{ margin:0; font-size:clamp(46px,6vw,84px); line-height:.98; letter-spacing:-.045em; font-weight:500;
text-align:right; text-wrap:balance; color:var(--encre); }
@media (max-width:470px){ .replique{ font-size:clamp(30px,9.5vw,46px); } }
.pied-appel.empile:has(> .replique){ align-items:flex-end; row-gap:clamp(24px,2.6vw,36px); }
@media (min-width:681px){
.pied-appel:has(> .replique) .bouton{ min-height:64px; padding:17px 34px; font-size:20px; border-radius:32px; gap:14px; }
.pied-appel:has(> .replique) .chemises-onglets{ height:17px; gap:4px; }
.pied-appel:has(> .replique) .chemises-onglets i{ width:13px; height:16px; }
}
/* Les piliers : trois phrases fortes posées en têtes des colonnes qui suivent, sur la même
trame. La section se lit en tableau, pilier par pilier. Sous 981 px, les colonnes passent
deux par deux : les piliers repassent en pile, comme une phrase forte sur trois lignes. */
.piliers{ grid-column:1 / -1; margin:clamp(56px,6vw,92px) 0 0; padding:0; list-style:none;
display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px,2vw,28px); }
.piliers .forte{ max-width:none; }
/* La reprise qui suit se rapproche : les piliers coiffent les rangées de colonnes. */
.piliers + .reprise{ margin-top:clamp(36px,3.5vw,52px); }
@media (max-width:980px){ .piliers{ grid-template-columns:1fr; gap:0; } .piliers .forte{ max-width:32ch; } }
/* La colonne de moyens : sous le titre, la liste des compétences du groupe plutôt
qu'un texte suivi d'un bouton. Même rang, même absence d'interaction, et pas d'index :
les groupes ne se suivent pas, ils se côtoient. */
/* La colonne sans index : un titre et un texte, ni numéro ni marque. Le titre prend
la place du numéro, juste sous le filet, et reste sous la taille d'une phrase forte. */
.colonne.moyens, .colonne.sans-index{ min-height:0; }
.colonne.moyens h3, .colonne.sans-index h3{ font-size:clamp(19px,1.8vw,26px); margin-top:0; }
.colonne.moyens h3{ margin-bottom:22px; }
.colonne.moyens .livrables{ columns:1; }
/* Une rangée de colonnes de moyens qui ouvre le corps d'une section, sans reprise pour la porter,
prend l'air qui la sépare de la tête de section — le même que les colonnes indexées de quatre.
Avec une reprise, c'est elle qui porte cet air, et la règle ne s'applique pas
(21 septembre 2026 : « Nos compétences » devient une section de l'accueil, à la demande du client). */
.grille:not(:has(> .reprise)) > .colonne.moyens{ margin-top:48px; }
.colonnes-4 .colonne{ grid-column:span 3; }
.colonnes-4 .colonne:first-of-type{ grid-column:1 / span 3; margin-top:48px; }
.colonnes-4 .colonne:first-of-type ~ .colonne{ margin-top:48px; }
/* Quatre colonnes de front (19 septembre 2026) : leurs titres, à côté de leur marque, restent sous la taille d'un titre
de colonne ordinaire, pour tenir en deux lignes sans mot seul ; sous 1 280 px, la colonne est trop étroite pour eux et
les colonnes passent deux par deux. */
.colonnes-4 .colonne h3{ font-size:clamp(22px,1.8vw,26px); }
@media (min-width:981px) and (max-width:1279px){
.colonnes-4 .colonne{ grid-column:span 6; }
.colonnes-4 .colonne:first-of-type{ grid-column:1 / span 6; }
}
@media (max-width:980px){ .colonne,.colonnes-4 .colonne{ grid-column:span 4; min-height:auto; padding-bottom:30px; } .colonnes-4 .colonne:first-of-type{ grid-column:1 / span 4; } }
/* Deux colonnes de front (24 septembre 2026, refonte) : quand chaque constat porte son titre, sa
phrase forte et sa démonstration, quatre de front ne tiennent pas — la colonne tombe à 300 px en
bureau et la démonstration y prend douze lignes. Deux par deux, elle en prend quatre ou cinq, et
la phrase forte garde son rang au-dessus du texte. */
.colonnes-2{ row-gap:clamp(40px,4vw,64px); }
.colonnes-2 .colonne{ grid-column:span 6; }
.colonnes-2 .colonne:nth-of-type(-n+2){ margin-top:48px; } /* l'air sous la tête de section */
.colonnes-2 .colonne h3{ margin-top:0; }
.colonnes-2 .colonne p{ max-width:46ch; }
.colonnes-2 .colonne .forte{ max-width:38ch; }
.colonnes-2 .colonne .forte + p{ margin-top:14px; }
@media (max-width:980px){ .colonnes-2 .colonne{ grid-column:span 4; } }
/* LES CONSTATS EN RANGS (à l'essai, 28 septembre 2026, chantier « l'accueil à l'échelle ») : en bureau, les quatre constats
de la section 01 passent de deux par deux à quatre rangs pleine largeur, chacun sous son filet — à gauche la marque
dessinée, agrandie (de 26 à 44-60 px : on la voit se tracer), et le titre, jusqu'à 56 px ; à droite, la phrase forte.
Le pense-bête se pose toujours au survol, dans la largeur du rang. Tablette et téléphone ne changent pas. */
@media (min-width:981px){
.colonnes-2.rangs{ row-gap:0; }
.colonnes-2.rangs .colonne{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(12, minmax(0,1fr));
column-gap:clamp(16px,2vw,28px); align-items:start; min-height:0; padding:34px 0 46px; }
.colonnes-2.rangs .colonne:nth-of-type(2){ margin-top:0; }
.colonnes-2.rangs .colonne:last-of-type{ border-bottom:1px solid var(--ligne); }
.colonnes-2.rangs .colonne h3{ grid-column:1 / 8; margin:0; font-size:clamp(34px,3.5vw,56px); line-height:1; letter-spacing:-.04em; gap:clamp(16px,1.6vw,24px); }
.colonnes-2.rangs .colonne h3 .icone{ width:clamp(44px,3.8vw,60px); height:clamp(44px,3.8vw,60px); stroke-width:1.15; margin-top:.02em; }
.colonnes-2.rangs .colonne .forte{ grid-column:8 / 13; margin:.35em 0 0; font-size:clamp(19px,1.55vw,24px); max-width:34ch; }
.colonnes-2.rangs .colonne > p:last-of-type{ margin-bottom:0; }
.colonnes-2.rangs .colonne > .detail{ grid-column:8 / 13; }
}
@media (max-width:680px){ .colonnes-2 .colonne{ grid-column:1 / 5; } .colonnes-2 .colonne:nth-of-type(-n+2){ margin-top:36px; } }
/* LE PENSE-BÊTE (26 septembre 2026, refonte, à l'essai, à la demande du client) : la carte d'un constat ne
montre que son titre et sa phrase forte ; sa démonstration vient en second temps, sur un pense-bête qui se
pose près de la souris quand elle entre dans la carte, et n'en bouge plus tant qu'elle y reste — on le lit
sans le poursuivre. Au toucher ou au clavier (Entrée), il se pose sur la carte ; un second toucher, Échap
ou la sortie de la carte le retirent. Il porte une version courte du détail (trois lignes : un pense-bête
n'en porte pas davantage, mesuré le 21 septembre sur le tableau à post-it de « Notre ADN ») ; le texte
complet reste dans la carte pour les lecteurs d'écran (.detail, caché à l'œil), et le pense-bête leur est
masqué. Le script pose .a-pense-bete : sans lui, la carte garde son détail écrit et le pense-bête n'existe
pas. C'est le « post-it au curseur » de la V1, retiré en V2 et réintroduit ici par le client, pour ce seul
usage. Papier jaune du post-it (--pense-bete), encre dessus ; ombre pleine, comme les fiches, en plus petit. */
.pense-bete{ display:none; }
.colonne.a-pense-bete{ position:relative; }
.colonne.a-pense-bete > .detail{ position:absolute; width:1px; height:1px; margin:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.colonne.a-pense-bete > .pense-bete{ display:block; position:absolute; z-index:5; left:0; top:0; width:min(290px, 100%); max-width:none;
margin:0; padding:16px 18px 18px; background:var(--pense-bete); color:var(--encre); font-size:15px; line-height:1.4;
box-shadow:4px 5px 0 color-mix(in srgb, var(--fond) 88%, var(--encre)); pointer-events:none;
opacity:0; visibility:hidden; transform:translate(var(--px, 0px), calc(var(--py, 0px) + 8px)) rotate(-4deg) scale(.96);
transition:opacity .18s ease, transform .4s var(--ressort), visibility 0s linear .18s; }
.colonne.pense-bete-vu > .pense-bete{ opacity:1; visibility:visible; transform:translate(var(--px, 0px), var(--py, 0px)) rotate(-2deg);
transition:opacity .18s ease, transform .4s var(--ressort); }
/* Un chapô de tête, posé sous le titre plutôt qu'en aparté à droite : le chapô de droite s'écrit
(section « Chapô qui s'écrit »), et la zone a déjà son geste, le tracé des marques. */
.section .grille > .chapo{ grid-column:1 / -1; margin-top:28px; }
@media (max-width:680px){ .colonne,.colonnes-4 .colonne,.colonnes-4 .colonne:first-of-type{ grid-column:1 / 5; } }
/* Les engagements en liste (à l'essai, 18 septembre 2026) : sous leur reprise, les trois refus se posent l'un
sous l'autre dans la moitié gauche, chacun sous son filet ; la moitié droite reçoit l'avis de nos clients. La
liste reste immobile : seule la rature simple y passe, une fois, à l'entrée.
Les deux blocs se font face, en équilibre (à l'essai) : chacun porte sa reprise en tête de colonne, et les deux
titres tombent sur la même ligne. En bureau, la fiche s'aligne sur la liste : en haut sur son premier filet, en
bas sur sa dernière ligne ; pendant la rotation, les refus s'espacent pour descendre jusqu'au bas de la fiche.
L'écart avec les colonnes du dessus est une marge des blocs, et non de leur reprise : il reste hors des blocs. */
.engagements, .avis{ align-self:start; margin-top:clamp(64px,7vw,110px); }
.engagements > .reprise, .avis > .reprise{ margin-top:0; }
.engagements{ grid-column:1 / 7; }
@media (min-width:981px){
.engagements, .avis{ align-self:stretch; display:flex; flex-direction:column; }
.avis-scene{ flex:1 0 auto; }
.engagements:has(+ .avis.tourne) > .colonne + .colonne{ margin-top:auto; }
.engagements:has(+ .avis.tourne) > .colonne:last-child h3{ margin-bottom:0; }
}
@media (max-width:980px){ .engagements{ grid-column:1 / -1; } }
/* L'avis de nos clients (à l'essai, 18 septembre 2026), d'après le motif de bb&b : sous son titre, posé hors de la
fiche sur le fond de la section, une fiche papier fixe (blanc, filet, ombre pleine, comme les fiches des scènes)
où seule l'inscription défile. Un avis à la fois, qui laisse la place au suivant toutes les 5 s (3 s dans le
motif) : l'ancien part vers la gauche en s'effaçant, puis le nouveau arrive de la
droite, 0,3 s chacun, 20 px de glissement ; les deux ne se croisent jamais. La citation en italique, l'auteur
en 500, sans guillemet ni photo : le contraste des deux et le vide autour font la mise en forme. Tous les avis
sont dans la fiche ; le script les empile dans la même case (.tourne), pour que le plus long donne sa hauteur
et que rien ne sursaute, et n'en montre qu'un. Sans JavaScript et en mouvement réduit, ils s'affichent l'un
sous l'autre. */
.avis{ grid-column:7 / 13; }
.avis-scene{ position:relative; padding:clamp(20px,3.4vw,48px); background:var(--blanc); border:1px solid var(--ligne);
box-shadow:7px 8px 0 color-mix(in srgb, var(--fond) 88%, var(--encre)); }
.avis-item{ margin:0; display:flex; flex-direction:column; }
.avis-item + .avis-item{ margin-top:40px; }
.avis-item blockquote{ margin:0; }
.avis-item blockquote p{ font-size:clamp(21px,1.9vw,25px); line-height:1.4; font-style:italic; font-weight:400;
letter-spacing:-.01em; color:var(--encre); max-width:34ch; }
/* La signature (à l'essai, 18 septembre 2026, à la demande du client) : le nom, puis le poste, d'un paraphe à la plume
(Mrs Saint Delafield), en bas à droite de la fiche. Elle se pose toujours au même endroit, quelle que soit la longueur de
l'avis. L'écriture est petite pour sa taille : 32 à 40 px. */
.avis-item figcaption{ margin-top:auto; padding-top:24px; align-self:flex-end; text-align:right;
font-family:var(--manuscrite); font-weight:400; font-size:clamp(32px,2.9vw,40px); line-height:1; color:var(--encre); }
.avis-item figcaption > span{ display:block; }
.avis.tourne .avis-scene{ display:grid; }
.avis.tourne .avis-item{ grid-area:1 / 1; margin:0; opacity:0; pointer-events:none; }
.avis.tourne .avis-item.courant{ opacity:1; pointer-events:auto; transform:none;
transition:opacity .3s ease, transform .3s ease; }
.avis.tourne .avis-item.sort{ opacity:0; transform:translateX(-20px); }
.avis.tourne .avis-item.entre{ opacity:0; transform:translateX(20px); transition:none; }
@media (max-width:980px){ .avis{ grid-column:1 / -1; } }
/* Sur téléphone, la fiche resserre son air et la citation descend jusqu'à 19 px : les derniers mots d'un avis,
liés par une insécable pour ne pas laisser de mot seul, tiennent sur une ligne dès 320 px. */
@media (max-width:680px){ .avis-scene{ padding:16px; }
.avis-item blockquote p{ font-size:clamp(19px, 3.8vw + 7px, 21px); } }
/* La lecture qui s'allume, au feutre fluo (à l'essai, 18 septembre 2026) : sur la section 01 de l'accueil,
sombre, une bande de feutre fluo se trace sous chaque ligne des phrases qui portent data-sm="lecture" (posé
sur un bloc, il vaut pour toutes ses phrases ; sur une phrase, pour elle seule), de gauche à droite, pendant
qu'elles traversent l'écran ; sous la bande, le texte passe à l'encre (16,8:1 sur le fluo).
Les lignes surlignées le restent. Le défilement tient le feutre, dans les deux sens, sans retenir la page. Le
script découpe les phrases en lignes (.lecture-ligne) et règle --allume, de 0 à 1 : la bande grandit
(scaleX), et un dégradé découpé à la forme des lettres fait passer le texte à l'encre jusqu'au même front.
L'encre ne tient que dans la hauteur de la bande : une lettre qui en dépasserait garderait, hors de la bande,
sa couleur claire, lisible sur le fond sombre. La bande couvre toute l'encre des lettres (accents des
minuscules et jambages compris) ; entre deux lignes, un filet du fond reste visible. Sans JavaScript et en
mouvement réduit, les phrases sont surlignées d'emblée. Le jaune fluo ne se pose que sur l'encre. */
/* Surlignées d'emblée : la bande déborde du texte par une ombre, pour ne rien changer aux coupes de ligne. */
:is([data-sm~="lecture"] > p, [data-sm~="lecture"] li, p[data-sm~="lecture"], li[data-sm~="lecture"]){ width:fit-content; color:#111318; background:var(--fluo);
border-radius:3px 8px 4px 10px; box-shadow:-.12em 0 0 var(--fluo), .08em 0 0 var(--fluo); }
.anime :is([data-sm~="lecture"] > p, [data-sm~="lecture"] li, p[data-sm~="lecture"], li[data-sm~="lecture"]){ width:auto; background:none; border-radius:0;
box-shadow:none; isolation:isolate; }
.anime :is([data-sm~="lecture"] > p, p[data-sm~="lecture"]){ color:var(--encre); }
.anime :is([data-sm~="lecture"] li, li[data-sm~="lecture"]){ color:var(--encre-2); }
.anime .lecture-ligne{ position:relative; display:block; width:max-content; white-space:nowrap;
padding:.15em .08em .25em .12em; margin:-.15em -.08em -.25em -.12em;
background:linear-gradient(to right, #111318 calc(var(--allume, 0) * 100%), transparent calc(var(--allume, 0) * 100%))
0 var(--haut) / 100% var(--epais) no-repeat,
linear-gradient(currentColor, currentColor);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
/* La bande : de 0,81 em au-dessus de la ligne de base à 0,265 em au-dessous, mesuré sur la police. */
.anime :is([data-sm~="lecture"] > p, p[data-sm~="lecture"]) .lecture-ligne{ --haut:.302em; --epais:1.075em; }
.anime :is([data-sm~="lecture"] li, li[data-sm~="lecture"]) .lecture-ligne{ --haut:.266em; --epais:1.075em; }
.anime .lecture-ligne::before{ content:""; position:absolute; z-index:-1; left:0; right:0; top:var(--haut);
height:var(--epais); background:var(--fluo); border-radius:3px 8px 4px 10px;
transform:scaleX(var(--allume, 0)); transform-origin:left center; }
/* Sélectionné, le texte reprend une encre pleine : sinon il disparaîtrait sous la sélection. */
.anime .lecture-ligne::selection{ -webkit-text-fill-color:var(--encre); }
/* La carte de transition (à l'essai, 18 septembre 2026) : une carte sans numéro ni titre, posée entre deux
sections, qui porte en grand la conviction qui mène de l'une à l'autre : une respiration. Le manifeste du
rythme éditorial, élargi pour tenir en peu de lignes, équilibré et centré (demande du client). Moins d'air que
les sections, puisqu'elle n'a pas de tête. Fond papier, aucun geste. */
.section.transition{ padding:clamp(72px,8.5vw,136px) 0; }
.transition .manifeste{ grid-column:1 / -1; justify-self:center; max-width:30ch; text-align:center; text-wrap:balance; }
.transition .manifeste + .manifeste{ margin-top:.25em; }
/* LE MOT GÉANT SURLIGNÉ (à l'essai, 28 septembre 2026, chantier « l'accueil à l'échelle ») : dans une carte de transition,
un seul mot, à toute la largeur du texte (20 % de la largeur du conteneur : le mot en fait 4,91 fois son corps), que le
feutre bleu du surligneur traverse de gauche à droite au rythme du défilement — le territoire du site à l'échelle d'un
écran. Le mot reste à l'encre pleine : c'est le trait qui agit, pas le mot qui s'efface (l'inverse du mot géant qui se
dissout, signature d'un autre site). Le script ne règle que --trace, de 0 à 1 ; sans lui, et en mouvement réduit, le
trait est complet. */
.section.transition.geant{ padding:clamp(56px,7vw,120px) 0; }
.mot-geant{ grid-column:1 / -1; margin:0; container-type:inline-size; line-height:.86; }
.mot-geant .feutre{ position:relative; z-index:0; display:inline-block; font-size:20cqw; font-weight:600; letter-spacing:-.055em;
color:var(--encre); white-space:nowrap; }
.mot-geant .feutre::before{ content:""; position:absolute; z-index:-1; left:-.04em; right:-.01em; top:.2em; bottom:.04em;
background:color-mix(in srgb, var(--trait) 34%, transparent); border-radius:.04em .12em .05em .14em;
transform:skewY(-.7deg) scaleX(1); transform-origin:left center; }
.anime .mot-geant .feutre::before{ transform:skewY(-.7deg) scaleX(var(--trace, 0)); }
/* Sur le fond d'encre (seconde passe : le moment sombre au milieu de la page, bord à bord), le feutre passe à 50 % pour rester
franc sur le noir ; le mot, en papier, y tient 6,5:1 sur la bande. */
.section.sombre .mot-geant .feutre::before{ background:color-mix(in srgb, var(--trait) 50%, transparent); }
.section.transition.geant.sombre{ padding:clamp(72px,9vw,150px) 0; }
/* Les défauts estompés (à l'essai, 18 septembre 2026) : dans la carte de transition, les mots qui nomment les
défauts d'une présence s'effacent à moitié, comme elle : l'encre à 50 %, 3,4:1 sur le papier, assez pour un
grand texte. Le texte reste du texte, lu normalement ; aucun mouvement. */
.defaut{ color:color-mix(in srgb, var(--encre) 50%, transparent); }
/* Les scènes dessinées (à l'essai) : une ligne par solution, en alternance, d'après la mise en page du motif
« Cas concrets » du site bb&b. D'un côté la feuille : le dessin de la solution à l'œuvre, en grand, en filet,
sous son encoche. De l'autre la fiche, posée à cheval sur la feuille. Intention : faire voir chaque solution à
l'œuvre, une à la fois (section 03 de l'accueil, depuis le 19 septembre 2026 au soir ; du 17 au 19 septembre,
elles faisaient reconnaître au visiteur sa situation, un enjeu à la fois, en section 02). Sous 981 px, la
feuille passe au-dessus de la fiche. */
.scenes{ grid-column:1 / -1; margin-top:64px; }
/* Une reprise qui ouvre un bloc de scènes porte l'air qui le sépare de ce qui précède, comme elle le fait
pour les colonnes de moyens : sans quoi sa marge basse et celle du bloc s'ajouteraient (21 septembre 2026,
les quatre scènes se lisent en deux temps, à la demande du client). */
.reprise + .scenes{ margin-top:0; }
.scene{ position:relative; }
.scene + .scene{ margin-top:80px; }
/* La feuille passe en creux, avec le filet marqué (à l'essai) : le filet la détache de la section. */
.scene-feuille{ position:relative; background:var(--papier-creux); border:1px solid var(--ligne-forte); }
/* L'encoche (à l'essai) : l'onglet du prototype en panneaux, qui mord sur le bord de la feuille et porte
le rang, 01 à 04 (E1 à E4 pour les enjeux). Elle prend l'orange des textes : le libellé clair y tient
5:1, contre 4:1 sur l'orange des objets. En bureau, elle dépasse du bord extérieur de la ligne. */
.encoche{ display:block; width:max-content; max-width:100%; margin:-1px 0 0 -1px; padding:9px 18px;
background:var(--orange-texte); color:var(--papier); font-size:12px; font-weight:500; letter-spacing:.1em;
text-transform:uppercase; font-variant-numeric:tabular-nums; }
/* Le dessin : un filet à l'encre, le rang en gris, un seul détail orange. Son épaisseur s'exprime dans
l'unité du dessin : le script pose --unite (unités par pixel rendu), pour que le trait reste fin à toutes
les largeurs ; sans lui, une valeur approchée par largeur d'écran. */
.dessin{ --unite:.66; display:block; width:88%; height:auto; margin:4% auto 5%; overflow:visible;
fill:none; stroke:var(--encre); stroke-width:calc(2 * var(--unite)); stroke-linecap:square; stroke-linejoin:miter; }
.dessin .retrait{ stroke:var(--encre-2); stroke-width:calc(1.4 * var(--unite)); }
.dessin .accent{ stroke:var(--orange); stroke-width:calc(2.6 * var(--unite)); }
.dessin .plein{ fill:var(--orange); stroke:none; }
/* La forme qui cache ce qui est derrière elle, comme une vraie feuille (à l'essai, 19 septembre 2026) : remplie de
la couleur de la feuille, elle laisse les fiches tomber dans le panier et les feuilles d'une liasse se recouvrir. */
.dessin .opaque{ fill:var(--papier-creux); }
@media (max-width:980px){ .dessin{ --unite:.75; } }
@media (max-width:680px){ .dessin{ --unite:1.6; } }
/* Le dessin qui se trace (à l'essai) : s'il porte data-geste, pendant que la feuille traverse l'écran, le script
fait avancer chaque trait (pointillé de longueur 1) et pose les aplats ; la structure d'abord, puis le geste.
Sans data-geste, comme les dessins des solutions, il reste entier. Sans JavaScript et en mouvement réduit, le
dessin est entier. */
.anime .dessin.a-tracer path:not(.plein){ stroke-dasharray:1 2; }
.anime .dessin.a-tracer .plein{ transform-box:fill-box; transform-origin:center; }
.anime .dessin.a-tracer[data-geste="surlignage"] .plein{ transform-origin:left center; }
/* La fiche : un objet de classement. Papier blanc, filet, angles vifs, et une ombre portée pleine plus
franche que celle de la planche (à l'essai), pour que la fiche pèse dans la page. Son texte est à
l'encre, et non au gris secondaire, pour la même raison. */
.scene-fiche{ position:relative; z-index:1; margin-top:32px; padding:36px 24px 32px; background:var(--blanc);
border:1px solid var(--ligne); box-shadow:7px 8px 0 color-mix(in srgb, var(--fond) 88%, var(--encre)); }
.scene-fiche h3{ margin-bottom:16px; }
.scene-fiche p{ margin-bottom:24px; max-width:44ch; font-size:16px; color:var(--encre); }
/* La fiche des solutions (à l'essai, 19 septembre 2026) : le titre en grand, pour que les solutions pèsent plus que
les enjeux de la section 02 (22 à 26 px) ; puis la description, les expertises en ligne sous leur étiquette, et le
bouton, qui reste vide (un bouton seul dans une fiche). */
.scene-fiche h3{ font-size:clamp(30px,3.1vw,44px); line-height:1; letter-spacing:-.04em; }
.scene-fiche .etiquette{ margin:0 0 8px; font-size:12px; color:var(--encre-2); }
.scene-fiche .en-ligne{ margin-bottom:28px; font-size:15px; font-weight:500; max-width:44ch; }
@media (max-width:680px){ .scene-fiche h3{ font-size:clamp(26px,7vw,34px); } }
/* La liste en ligne : des termes de même rang, à la suite, séparés par des points médians. Le point suit le terme,
lié par une insécable ; une espace sépare les éléments dans la page, pour que la liste puisse se replier. Une
ligne ne commence donc jamais par un point. Un terme ne se coupe pas, et les lignes s'équilibrent : aucun terme
ne reste seul sur la dernière. */
.en-ligne{ list-style:none; margin:0; padding:0; text-wrap:balance; }
.en-ligne li{ display:inline; white-space:nowrap; }
.en-ligne li:not(:last-child)::after{ content:"\00a0·"; color:var(--encre-2); }
/* Le lien, au style des tirettes (à l'essai, en section 02 avec les enjeux) : la flèche du motif, puis le libellé, à
l'orange des textes (5,4:1 sur la fiche), équilibré s'il se replie. Au survol, un filet de la même couleur le
souligne. */
/* Son filet est permanent depuis le 21 septembre 2026, à la demande du client : au repos, le soulignement était
transparent et le lien n'avait ni cadre, ni fond, ni trait — rien ne le distinguait d'une phrase, sauf sa
flèche. Le survol ne change plus le filet mais la couleur, texte et filet ensemble. */
.scene-lien{ display:inline-flex; align-items:baseline; gap:.45em; font-size:16px; font-weight:500; color:var(--orange-texte);
text-wrap:balance; text-decoration:underline 1.5px; text-decoration-color:currentColor; text-underline-offset:5px;
transition:color .3s var(--ease); }
.scene-lien > span{ display:inline-block; }
/* En bureau, les scènes restent basses (à l'essai) : la feuille prend 56 % de la ligne et son dessin une
zone de 2:1, où il se centre ; la fiche prend 58 %, pour que la ligne reste pleine avec le même
chevauchement de 14 %. */
@media (min-width:981px){
.scene{ display:flex; align-items:center; }
.scene-feuille{ flex:none; width:56%; }
.scene-feuille .dessin{ width:100%; aspect-ratio:2 / 1; margin:0; padding:3.5% 6% 4.5%; box-sizing:border-box; }
.encoche{ margin-left:-14px; padding-left:32px; }
.scene:nth-child(even) .encoche{ margin-left:auto; margin-right:-14px; padding:9px 32px 9px 18px; }
.scene-fiche{ width:58%; margin:0 0 0 -14%; padding:40px 48px 36px; }
.scene-fiche p{ max-width:56ch; }
.scene:nth-child(even){ flex-direction:row-reverse; }
.scene:nth-child(even) .scene-fiche{ margin:0 -14% 0 0; }
}
/* Sur un bureau étroit (à l'essai, 19 septembre 2026), la fiche des solutions, plus chargée, dépasserait la feuille de
40 à 85 px en haut et en bas : la feuille grandit (dessin en 16:10, en 4:3 sous 1 100 px) et la fiche se resserre.
Le dessin se décale vers le bord extérieur, pour rester à 26 px au moins de la fiche. */
@media (min-width:981px) and (max-width:1365px){
.scene-fiche{ padding:34px 40px 32px; }
.scene-feuille .dessin{ aspect-ratio:16 / 10; padding:5% 14% 6% 4%; }
.scene:nth-child(even) .scene-feuille .dessin{ padding:5% 4% 6% 14%; }
}
@media (min-width:981px) and (max-width:1099px){ .scene-feuille .dessin{ aspect-ratio:4 / 3; } }
/* Les scènes photographiques (à l'essai, 20 septembre 2026, à la demande du client) : la même ligne que
les scènes dessinées, mais le cadre porte une photographie au lieu d'un dessin, et la fiche devient la
carte de verre brossé du motif « Cas concrets » de bb&b, dont la mise en page est ici suivie sur tous
les points sauf la typographie. Le rang a été retiré : ces scènes n'ont pas d'encoche.
La variante se reconnaît à sa couche d'image, sans classe à poser dans la page. */
.scene:has(.media-couche) .scene-feuille{ overflow:hidden; border:0; background:var(--papier-creux); }
/* La couche d'image : c'est elle que le défilement translate. Le débord de 15 % donne la latitude du
glissement sans jamais découvrir de bord (valeur du motif). */
.media-couche{ position:absolute; inset:0; will-change:transform; }
.media-couche img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Le voile : il couvre le cadre, puis se retire au défilement, vers le bord extérieur de la ligne.
Il n'est posé que si le script prend la main (.a-reveler) : sans JavaScript, en mouvement réduit ou
si le script échoue, l'image est découverte d'emblée. */
.media-voile{ position:absolute; inset:0; z-index:2; background:var(--papier-creux);
pointer-events:none; transform:scaleX(0); }
.anime .scene-feuille.a-reveler .media-voile{ transform:none; will-change:transform; }
.scene:nth-child(odd) .media-voile{ transform-origin:left center; }
.scene:nth-child(even) .media-voile{ transform-origin:right center; }
@media (min-width:1280px){
/* Réglés par le client sur épreuve, le 21 septembre 2026 : image de 900 × 600 px figée, carte à 40 %,
chevauchement de 300 px. Aux dimensions du motif (820 / 50 % / 176 px, du 20 septembre), la carte
n'était une carte que là où elle croisait la photo : 70 % de sa surface tombait sur le papier nu, où
son blanc à 70 % ne tenait que 1,05:1 et son filet blanc 1,03:1. Elle y est maintenant posée à 62 %
à 1 409 px (68 % à 1 280, 57 % dès 1 600), et ce qui en dépasse porte un bord (ci-dessous).
Le chevauchement plus large fait revenir le vide alterné du motif : 128 px à 1 409 px, 192 dès 1 600.
Le plafond en % est une ceinture : la ligne tient dans le conteneur sur toute la tranche. */
.scene:has(.media-couche){ align-items:center; }
.scene:has(.media-couche) .scene-feuille{ flex:0 0 auto; width:min(900px, 82%); height:600px; }
.scene:has(.media-couche) .scene-fiche{ width:40%; margin:0 0 0 -300px; }
.scene:has(.media-couche):nth-child(even) .scene-fiche{ margin:0 -300px 0 0; }
}
/* Sur un bureau étroit, la largeur fixe de l'image et le chevauchement de 252 px ne laisseraient au texte
qu'un quart de la ligne : les proportions reviennent à celles des scènes dessinées. Le cadre passe de 44 à 47 %
de la largeur de l'écran le 27 septembre 2026 : avec les textes du client, la première carte le dépassait de 9 à
12 px de 984 à 996 px. */
@media (min-width:981px) and (max-width:1279px){
.scene:has(.media-couche){ align-items:center; }
.scene:has(.media-couche) .scene-feuille{ flex:none; width:56%; height:min(47vw,560px); }
.scene:has(.media-couche) .scene-fiche{ width:52%; margin:0 0 0 -8%; padding:40px; }
.scene:has(.media-couche):nth-child(even) .scene-fiche{ margin:0 -8% 0 0; }
}
@media (max-width:980px){
.scene:has(.media-couche) .scene-feuille{ height:min(62vw,420px); }
}
/* La carte de verre brossé (à l'essai) : fond blanc à 70 % et flou de 24 px derrière, les valeurs du
motif ; mais le filet gris du site et son ombre pleine à la place du filet blanc à 40 % et de l'absence
d'ombre (choix du client sur épreuve, 21 septembre 2026). Hors de l'image, le blanc à 70 % ne vaut que
1,05:1 sur le papier et le filet blanc 1,03:1 : la carte s'y dissolvait. Le filet et l'ombre la posent
comme une fiche. Le texte y reste à l'encre : contrôlé au pixel sur la bande où la
carte recouvre la photo, aux cinq positions du glissement, le plus bas tient 10,4:1. L'étiquette, en gris
secondaire, n'y tenait que 2,9:1 : elle passe à l'encre, comme l'eyebrow du motif. */
@media (min-width:981px){
.scene:has(.media-couche) .scene-fiche{ padding:56px; background:rgba(255,255,255,.7);
border:1px solid var(--ligne);
box-shadow:7px 8px 0 color-mix(in srgb, var(--fond) 88%, var(--encre));
-webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); }
}
/* Le titre, à la mesure de la carte. Ramenée à 40 % de la ligne le 21 septembre 2026, elle est plus
étroite qu'à 50 %, et « Installer un système d'acquisition performant » redevenait trois lignes dont la
dernière ne portait qu'un mot, à toutes les largeurs de bureau. Relevé de 681 à 2 560 px, 20 largeurs,
sur les quatre titres : `clamp(28px, 2.4vw, 38px)` est la plus grande taille qui tienne partout —
31 px à 1 280, 34 px à 1 409, 38 px dès 1 600, contre 33, 37 et 38 avec la carte à 50 %. C'est la
taille qu'il avait déjà au premier réglage du 20 septembre, quand la carte était à 43 %. */
.scene:has(.media-couche) .scene-fiche h3{ font-size:clamp(28px,2.4vw,38px); }
/* Trois pixels sur les plus petits téléphones (21 septembre 2026, avec les titres du client). À 28 px,
« Une organisation structurée » — dont les deux derniers mots sont liés pour ne pas laisser « structurée »
seul sur 355 largeurs — sort de sa carte de 4 px et fait déborder la page, de 320 à 340 px. À 25 px, les
quatre titres tiennent dans leur carte, sans un seul mot seul, de 320 à 2 560 px. Le sélecteur doit être
aussi précis que celui qu'il reprend, sinon la règle ne s'applique pas. */
@media (max-width:360px){ .scene:has(.media-couche) .scene-fiche h3{ font-size:25px; } }
/* La marque de la solution (à l'essai, 21 septembre 2026, à la demande du client) : l'étiquette figurée
indexe la carte comme elle indexe les colonnes de la section 02 — les deux sections se lisent alors dans
le même vocabulaire. C'est le seul dessin qui restait à l'accueil hors de la section 02.
Elle se pose à gauche du titre, mais **hors du flux**, dans le blanc de la carte : le titre garde toute sa
largeur. Dans la gouttière du titre, comme en section 02, elle lui coûtait 40 px, et « Installer un système
d'acquisition performant » laissait un mot seul à toutes les largeurs de bureau — il aurait fallu descendre
le titre de 34 à 28 px, sous les 1,2 fois les titres des enjeux que ce manuel demande. Resserrer la marque
n'y changeait rien : de 26/14 à 22/10 px, on ne gagne que 8 px et la faute reste aux mêmes largeurs.
Décalage de -40 px = la marque (26) plus l'écart au texte (14), celui de la section 02 : elle tombe alors
à 17 px du bord de la carte, dont le blanc fait 56 px. */
@media (min-width:981px){
.scene:has(.media-couche) .scene-fiche h3{ position:relative; }
.scene:has(.media-couche) .scene-fiche h3 > .icone{ position:absolute; left:-40px; top:.1em; }
}
/* Sous 981 px, le blanc de la carte tombe à 24 px : il n'accueille plus la marque, qui passe au-dessus du
titre. Le titre y garde sa largeur, donc les deux mots seuls connus ne bougent pas (« convaincante » sous
350 px, « performant » sous 390). */
@media (max-width:980px){
.scene-fiche h3 > .icone{ display:block; margin:0 0 14px; }
}
.scene:has(.media-couche) .scene-fiche .etiquette{ color:var(--encre); }
/* LES SCÈNES BORD À BORD (à l'essai, 28 septembre 2026, seconde passe) : dans une section bord à bord, chaque image prend
toute la largeur de l'écran — de 520 à 820 px de haut en bureau — et la carte de verre se pose dessus, calée sur le bord
du texte, à droite puis à gauche, centrée en hauteur ; l'image et la carte partagent une case de grille. Sur tablette et
téléphone, l'image va aussi d'un bord à l'autre, la carte dessous. Le glissement et la révélation ne changent pas. */
.bord-a-bord .scene:has(.media-couche) .scene-feuille{ width:100vw; margin-inline:calc(50% - 50vw); }
@media (min-width:981px){
.bord-a-bord .scene:has(.media-couche){ display:grid; grid-template-areas:"s"; align-items:center; }
.bord-a-bord .scene:has(.media-couche) .scene-feuille{ grid-area:s; flex:none; height:clamp(520px,46vw,820px); }
.bord-a-bord .scene:has(.media-couche) .scene-fiche{ grid-area:s; justify-self:end; width:min(42%, 560px); margin:0; }
.bord-a-bord .scene:has(.media-couche):nth-child(even) .scene-fiche{ justify-self:start; margin:0; }
}
@media (min-width:981px) and (max-width:1279px){ .bord-a-bord .scene:has(.media-couche) .scene-fiche{ width:52%; } }
@media (max-width:980px){ .bord-a-bord .scene:has(.media-couche) .scene-feuille{ height:min(72vw,520px); } }
/* Le reflet du verre (à l'essai, 28 septembre 2026, chantier « l'accueil à l'échelle ») : au survol d'une carte de verre, une
lueur blanche douce suit le pointeur sous le texte, comme la lumière sur une vitre. Le script pose --gx/--gy ; souris et
bureau seulement. Le texte reste à l'encre sur un fond plus clair : le contraste ne peut que monter. */
@media (min-width:981px) and (hover:hover) and (pointer:fine){
.scene:has(.media-couche) .scene-fiche::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:radial-gradient(circle 260px at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
opacity:0; transition:opacity .45s var(--ease); }
.scene:has(.media-couche) .scene-fiche:hover::after{ opacity:1; }
}
/* Le nom de la solution, en tête de carte (24 septembre 2026, refonte) : DÉVELOPPER, STRUCTURER,
ACCÉLÉRER, FIABILISER. L'étiquette nomme le levier, le titre dit ce qu'il promet — c'est le
travail de l'étiquette, et l'un des quatre endroits où le manuel admet les capitales. Elle prend
l'air qui la sépare du titre ; celle des expertises, plus bas, garde le sien. */
.scene-fiche > .etiquette:first-child{ margin-bottom:16px; }
/* Le bouton ferme la carte (à l'essai, 21 septembre 2026, à la demande du client, qui ne trouvait pas bon
le lien souligné). Il remplace le lien `.scene-lien`, resté au système pour les scènes dessinées.
C'est un écart au motif « Cas concrets » de bb&b, qui n'a pas de pilule — assumé : sur la carte de verre,
AUCUN ACCENT COLORÉ NE TIENT. Mesuré au pixel sous le verre, contre le pixel le plus sombre : l'orange
des textes tombe à 2,8:1, un aplat bleu à 1,34:1. Seule la forme pouvait donc distinguer l'appel, pas la
couleur — d'où un objet à filet plutôt qu'un texte coloré. Le filet de l'encre y tient 9,63:1.
Épreuve de sept variantes servie au client le 21 septembre ; il a retenu le bouton vide. */
.scene:has(.media-couche) .scene-fiche .bouton{ align-self:flex-start; }
/* Quatre compétences sur un petit téléphone (27 septembre 2026) : trop larges pour une ligne, elles se coupaient en
trois plus un, le dernier terme seul — l'équilibrage choisit toujours la répartition la plus proche en longueur,
et text-wrap:pretty faisait pire (162 fautes contre 11). Sous 361 px, la liste se coupe après le deuxième terme :
deux et deux. */
@media (max-width:360px){
.scene-fiche .en-ligne:has(> li:nth-child(4):last-child) li:nth-child(2)::after{ content:"\00a0·\A"; white-space:pre; }
}
/* Les dossiers : une chemise dont le recto coulisse pour découvrir le verso.
Intention : présenter des choix de même rang. Quatre au plus. */
.dossiers{ grid-column:1 / -1; margin-top:78px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
gap:28px; row-gap:28px; align-items:stretch; }
/* Les deux faces partagent une case de grille : le dossier prend la hauteur de sa face la plus haute, et rien ne
déborde, quelle que soit la longueur du texte (19 septembre 2026 ; elles étaient posées en absolu). */
.dossier{ position:relative; display:grid; min-height:390px; cursor:pointer; outline:none; }
/* Le dernier feuillet, qui dépasse de la chemise : l'orange des objets à 8 % sur le blanc, comme dans le prototype
(19 septembre 2026 ; c'était la feuille de notes jaune, passée au verso). */
.dossier::before{ content:""; position:absolute; inset:15px 15px -15px -15px; border:1px solid var(--ligne); transition:transform .45s var(--ressort);
background:color-mix(in srgb, var(--orange) 8%, var(--blanc)); }
.dossier .verso,.dossier .recto{ grid-area:1 / 1; position:relative; border:1px solid var(--ligne); background:var(--blanc); }
/* Le verso, la feuille du milieu, qu'on ne voit qu'au survol ou quand la chemise s'écarte : une feuille violette,
lignée (19 septembre 2026, à la demande du client ; elle était jaune le même jour) — le violet du mot de titre, sur
une surface : exception à l'essai (section 4 du manuel). Les expertises s'écrivent en clair sur ses lignes (5,5:1) :
un rang tous les 28 px, la réglure calée sur le bas du texte, juste sous la ligne de base ; l'étiquette en tête,
une ligne sautée. */
.dossier .verso{ padding:34px; display:flex; flex-direction:column; justify-content:flex-end;
background-color:var(--violet);
background-image:linear-gradient(to bottom, transparent 21px, rgba(247,247,243,.3) 21px 22px, transparent 22px);
background-size:100% 28px; background-origin:content-box; background-position:0 100%; }
.dossier .verso .etiquette{ margin:0 0 28px; line-height:28px; color:var(--papier); }
.dossier .verso ul{ margin:0; padding:0; list-style:none; columns:2; column-gap:30px; }
.dossier .verso li{ break-inside:avoid; margin:0; font-size:15px; line-height:28px; color:var(--papier); }
.dossier .recto{ z-index:2; padding:34px; display:flex; flex-direction:column; justify-content:space-between; gap:24px;
transition:transform .45s var(--ressort), opacity .3s ease; transform:translate(0,0); }
.dossier:hover .recto,.dossier:focus-within .recto,.dossier.ouvert .recto{ transform:translate(38px,-38px); }
/* Ouvert (19 septembre 2026) : la chemise s'écarte et s'efface, le verso se lit en entier ; un clic ou Échap la
remet en place. Au survol, elle ne fait que se soulever, pour laisser voir qu'une feuille est dessous. */
.dossier.ouvert .recto{ opacity:0; visibility:hidden;
transition:transform .45s var(--ressort), opacity .3s ease, visibility 0s linear .3s; }
/* Le bouton et la tirette, sur une ligne tant qu'ils tiennent. */
.dossier .actions{ align-items:center; column-gap:22px; }
.dossier:hover::before,.dossier:focus-within::before,.dossier.ouvert::before{ transform:translate(-7px,7px); }
.languette{ display:inline-flex; align-self:flex-start; background:var(--orange); color:var(--papier); padding:7px 10px;
font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
/* La languette figurée (à l'essai, 19 septembre 2026, sur les dossiers de l'accueil) : un dessin prend la place du
numéro, au papier sur l'orange (4:1, assez pour un dessin), à la manière de l'étiquette figurée — filet seul, angles
vifs, un aplat admis sur un détail ; toujours aria-hidden, le titre porte le sens. */
.languette.figuree{ padding:6px 9px; }
.languette.figuree svg{ display:block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8;
stroke-linecap:square; stroke-linejoin:miter; }
.languette.figuree .plein{ fill:currentColor; stroke:none; }
/* Le titre, en grand : il reste le premier rang de la fiche, mais à la mesure de sa colonne, pour tenir en deux ou
trois lignes sans mot seul (19 septembre 2026 ; 34 à 50 px au départ, trop grand pour un dossier de 400 px). */
.dossier h3{ font-size:clamp(30px,3.1vw,50px); line-height:.98; letter-spacing:-.04em; }
.dossier .recto p{ margin-top:18px; max-width:36ch; font-size:17px; color:var(--encre-2); }
/* Le dossier transverse : même chemise, pleine largeur, languette évidée. Pour ce qui traverse les autres. */
.dossier.transverse{ grid-column:1 / -1; min-height:300px; }
.dossier.transverse .languette{ background:transparent; color:var(--orange-texte); border:1px solid var(--orange); }
.dossier.transverse .recto p{ max-width:60ch; }
.dossier.transverse .verso li,.dossier.transverse .recto p{ color:var(--encre); }
.tirette{ font:500 13px var(--police); color:var(--encre-2); background:none; border:0; padding:0; text-align:left;
cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
/* Sous 981 px, deux dossiers de front seraient trop étroits pour leurs titres : ils passent l'un sous l'autre. */
@media (max-width:980px){ .dossiers{ grid-template-columns:1fr; } }
@media (max-width:680px){
.dossiers{ grid-template-columns:1fr; gap:42px; }
.dossier{ min-height:365px; }
.dossier h3{ font-size:clamp(26px,7vw,34px); }
.dossier .recto,.dossier .verso{ padding:26px; }
.dossier .verso ul{ columns:1; }
.dossier:hover .recto{ transform:none; }
.dossier.ouvert .recto,.dossier:focus-within .recto{ transform:translate(20px,-26px); }
}
/* Les dossiers empilés, fidèles à la maquette V1 : chaque fiche se cale plus bas
que la précédente et la recouvre au défilement, ne laissant dépasser que son
intercalaire et sa bande de titre. Le recto coulisse au clic et découvre le verso.
Même intention que les dossiers : présenter des choix de même rang.
Les décalages top dépendent de la hauteur de la barre de navigation (78 px).
Exception validée à la convention de forme : coins et onglets arrondis, ombre douce. */
.pile-dossiers{ grid-column:1 / -1; margin-top:48px; }
.hote{ position:relative; padding-top:15px; margin-bottom:24px; }
@media (min-width:981px){
.hote{ position:sticky; }
.hote:nth-child(1){ top:100px; }
.hote:nth-child(2){ top:188px; }
.hote:nth-child(3){ top:276px; }
.hote:nth-child(4){ top:364px; }
.hote:nth-child(5){ top:452px; } /* un cinquième feuillet (26 septembre 2026, section 02 de l'accueil) */
}
.hote .intercalaire{ top:0; height:17px; width:86px; border:0; border-radius:7px 7px 0 0;
background:var(--orange); transition:transform .45s var(--ressort); }
.hote:nth-child(1) .intercalaire{ left:32px; opacity:1; }
.hote:nth-child(2) .intercalaire{ left:126px; opacity:.62; }
.hote:nth-child(3) .intercalaire{ left:220px; opacity:.34; }
.hote:nth-child(4) .intercalaire{ left:314px; opacity:.2; }
.hote:nth-child(5) .intercalaire{ left:408px; opacity:.12; }
@media (max-width:640px){ .hote .intercalaire{ left:24px !important; width:72px; } }
.hote:hover .intercalaire{ transform:translateY(-4px); }
.fiche{ position:relative; width:100%; padding:0; font:inherit; color:inherit; text-align:left; cursor:pointer;
background:var(--papier-creux); border:1px solid var(--ligne); border-radius:14px; min-height:318px; overflow:hidden;
box-shadow:0 18px 44px -30px rgba(17,19,24,.55);
transition:box-shadow .3s ease, border-color .3s ease; }
.fiche::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--orange); opacity:.85; z-index:3; }
.fiche:hover{ box-shadow:0 26px 60px -34px rgba(17,19,24,.7); border-color:var(--ligne-forte); }
.face{ position:absolute; inset:0; padding:30px 36px 30px 40px; display:grid;
grid-template-columns:clamp(180px,22vw,280px) minmax(0,1fr); gap:clamp(20px,4vw,56px); align-content:start;
transition:transform .55s cubic-bezier(.16,1,.3,1); }
.face h3{ font-size:clamp(1.3rem,2.2vw,1.8rem); line-height:1.15; margin-bottom:12px; }
.face .entete{ display:flex; align-items:flex-start; gap:12px; }
.face .languette{ flex-shrink:0; margin-top:3px; }
.fiche-bloc{ display:flex; flex-direction:column; height:100%; }
.fiche p{ font-size:1rem; color:var(--encre-2); margin-bottom:22px; }
.recto{ background:var(--papier-creux); z-index:2; }
.verso{ background:var(--blanc); z-index:1; }
.fiche.ouverte .recto{ transform:translateY(-101%); }
.fiche-actions{ margin-top:auto; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.verso .etiquette{ margin-bottom:10px; }
.tirette{ padding-top:0; font:600 .76rem var(--police); color:var(--orange-texte); background:none; border:0;
display:flex; align-items:center; gap:9px; cursor:pointer; }
.tirette i{ width:22px; height:5px; border-radius:3px; background:var(--orange); opacity:.5; }
.livrables{ list-style:none; margin:0; padding:0; font-size:.96rem; columns:2; column-gap:40px; }
.livrables li{ padding:9px 0; border-bottom:1px solid var(--ligne); break-inside:avoid; }
.livrables li:last-child{ border-bottom:0; }
@media (max-width:980px){
.face{ grid-template-columns:1fr; gap:14px; padding:26px 26px 26px 32px; }
.livrables{ columns:1; }
/* Sur tablette et téléphone, la fiche prend la hauteur de sa face la plus haute : les deux faces se
superposent dans une même case de grille au lieu d'être posées en absolu, et rien n'est rogné. */
.fiche{ display:grid; }
.fiche > .face{ position:relative; grid-area:1 / 1; }
}
/* Une fiche recouverte ne laisse voir qu'une bande de 88 px, sous l'onglet de la suivante.
La bande ne montre que la languette et le titre, tenu sur une ligne ; le texte et
les boutons commencent plus bas, là où la fiche suivante les couvre. */
@media (min-width:981px){
.face.recto{ grid-template-areas:"tete tete" ". bloc"; row-gap:22px; }
.face.recto .entete{ grid-area:tete; }
.face.recto .entete h3{ white-space:nowrap; }
.face.recto .fiche-bloc{ grid-area:bloc; }
/* Au verso, la colonne du titre s'élargit un peu : un titre long s'y équilibre sans laisser de mot
seul sur sa dernière ligne. */
.face.verso{ grid-template-columns:clamp(220px,26vw,340px) minmax(0,1fr); }
}
/* La cale : un espace vide en fin de pile, pour que la pile complète reste un instant en place
avant de partir d'un bloc. Une marge ne suffit pas : le collant se contraint à la boîte de marge.
Courte : au-delà, un grand vide suit la pile. */
.cale{ height:0; }
@media (min-width:981px){ .cale{ height:96px; } }
/* LES FEUILLETS MONTANTS (26 septembre 2026, refonte, à l'essai, à la demande du client) : la pile sans verso.
Même pile que ci-dessus — au défilement, chaque feuillet monte, se colle sous le précédent et le recouvre,
et leurs onglets décalés se superposent en haut comme dans un classeur —, mais la fiche porte directement
son contenu : pas de second contenu à découvrir, donc ni face, ni tirette, ni bouton. Accueil, section 02,
les cinq maillons du système, à la place de la chaîne qui se grippe. Repris de l'essai du 21 septembre sur
« Notre ADN » (retiré alors pour le contenu, non pour la forme), dont les réglages étaient mesurés.
Elle prend le blanc, et non le creux : sur une section creuse, le creux lui donnerait la couleur exacte du
fond (1,000:1) ; au blanc, 1,153:1, et son texte gris passe de 4,64 à 5,35:1. */
.pile-dossiers.sans-verso .fiche{ cursor:auto; min-height:0; background:var(--blanc);
padding:30px 36px 30px 40px; display:flex; flex-direction:column; }
.pile-dossiers.sans-verso .fiche h3{ font-size:clamp(19px,1.8vw,26px); line-height:1.15; margin-bottom:12px; }
.pile-dossiers.sans-verso .fiche > p{ font-size:16px; color:var(--encre-2); margin:0; max-width:56ch; }
/* La bande que laisse voir une fiche recouverte fait 88 px (188 - 100) : elle ne doit montrer que l'onglet et le
titre. Le texte commence donc sous elle, à 92 px : 32 px sous le titre, et une hauteur plancher de 30 px sur
le titre, qui retombe à 19 px à 981 px. Hauteur minimale de 186 px, pour que le recouvrement se voie. */
@media (min-width:981px){
.pile-dossiers.sans-verso .fiche{ min-height:186px; }
.pile-dossiers.sans-verso .fiche h3{ margin-bottom:32px; min-height:30px; }
}
@media (max-width:980px){ .pile-dossiers.sans-verso .fiche{ display:flex; padding:26px 26px 26px 32px; } }
/* Le feuillet en trois tiers (26 septembre 2026, à la demande du client, d'après les panneaux collants de Madame
Polar) : le titre dans le tiers gauche ; le texte dessous, calé sur lui, sur les deux tiers de gauche ; dans le
tiers droit, une zone réservée à une image ou une animation, en 16:9 comme chez Madame Polar, sur la hauteur
du feuillet. Recouvert, le feuillet laisse voir sa bande de titre et le haut de son visuel. Sur téléphone, le
visuel passe sous le texte, sur toute la largeur. Tant qu'aucune image n'est fournie, la zone porte son
placeholder, en creux et sous un filet. */
.feuillet-visuel{ display:grid; place-items:center; aspect-ratio:16 / 9; margin-top:22px; background:var(--papier-creux);
border:1px solid var(--ligne); color:var(--encre-2); font-size:12px; font-weight:500; letter-spacing:.11em;
text-align:center; padding:12px; }
.feuillet-visuel > img, .feuillet-visuel > video{ display:block; width:100%; height:100%; object-fit:cover; }
/* Garnie d'une image ou d'une vidéo, la zone perd son air et rogne son média à son cadre. */
.feuillet-visuel:has(> img, > video){ padding:0; overflow:hidden; }
/* LA DEMANDE QUI S'ÉCRIT (26 septembre 2026, à l'essai, à la demande du client) : sur la photo d'un téléphone
ouvert sur un assistant, écran vidé de son texte d'origine, la page tape la demande. « Trouve-moi » s'écrit
une fois ; dessous, « un avocat. » s'écrit, reste, s'efface, et laisse la place à la suite (data-suites, dans
la page). Le texte est posé au centre de l'écran photographié et incliné comme lui (12,4°, relevé sur le texte
d'origine) ; il suit la taille de la zone (unités de conteneur). Le curseur est l'orange du système, celui du
formulaire et du chapô qui s'écrit. Sans script, ou en mouvement réduit, la première demande est écrite en
entier, sans curseur. La phrase est masquée aux lecteurs d'écran : l'alt de la photo dit la scène. */
.demande-ia{ position:relative; container-type:inline-size; }
.demande-ia .demande-ecran{ position:absolute; left:57.5%; top:56%; margin:0; max-width:none; transform:translate(-50%,-50%) rotate(12.4deg);
color:rgba(247,247,243,.93); font-family:var(--police); font-weight:500; font-size:3.4cqw; line-height:1.28;
letter-spacing:-.005em; text-align:center; white-space:nowrap; pointer-events:none; text-wrap:nowrap; }
.demande-ecran > span{ display:block; min-height:1.28em; }
.demande-ecran .tape::after{ content:""; display:inline-block; width:.07em; height:.95em; margin-left:.05em; vertical-align:-.1em;
background:var(--orange); animation:clignoter 1s linear infinite; }
@media (min-width:681px){
.pile-dossiers.sans-verso .fiche{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
grid-template-rows:auto 1fr; column-gap:clamp(20px,2.4vw,36px); align-items:start; }
.pile-dossiers.sans-verso .fiche h3{ grid-column:1; grid-row:1; }
.pile-dossiers.sans-verso .fiche > p{ grid-column:1 / 3; grid-row:2; max-width:none; }
.pile-dossiers.sans-verso .feuillet-visuel{ grid-column:3; grid-row:1 / 3; margin-top:0; }
}
/* L'IMAGE À FOND PERDU (26 septembre 2026, à l'essai, à la demande du client, qui trouvait les visuels « pas
naturels ») : posée en vignette à 31-37 px des bords, cernée d'un filet gris, l'image ne couvrait que 23 % du
feuillet et se lisait comme une capture collée dessus. Elle occupe maintenant tout le tiers droit, du haut au bas
et jusqu'au bord droit du feuillet, dont elle prend les coins (la fiche rogne) : ni filet, ni marge. Les marges
négatives reprennent exactement l'air de la fiche. Son 16:9 donne sa hauteur au feuillet ; quand le texte est plus
haut qu'elle (sur tablette), elle s'étire jusqu'au bas, l'image recadrée. Sur téléphone, sous le texte, elle part
au bas et aux deux bords. */
.pile-dossiers.sans-verso .feuillet-visuel:has(> img, > video){ border:0; background:none; align-self:stretch; justify-self:stretch; }
@media (min-width:981px){
.pile-dossiers.sans-verso .feuillet-visuel:has(> img, > video){ margin:-30px -36px -30px 0; }
}
@media (min-width:681px) and (max-width:980px){
.pile-dossiers.sans-verso .feuillet-visuel:has(> img, > video){ margin:-26px -26px -26px 0; }
}
@media (max-width:680px){
.pile-dossiers.sans-verso .feuillet-visuel:has(> img, > video){ margin:22px -26px -26px -32px; }
}
/* LE FONDU VERS LE TEXTE (26 septembre 2026, à l'essai, à la demande du client ; axe 2, avec le fond perdu) : le bord
de l'image tourné vers le texte se fond dans la chemise, sans arête entre la photo et le papier. C'est le masque de
la photo du hero, validé, ramené à la largeur du visuel : transparent au bord, plein à 30 %. Sur téléphone, où
l'image passe sous le texte, le fondu part du haut. */
.pile-dossiers.sans-verso .feuillet-visuel:has(> img, > video){
-webkit-mask-image:linear-gradient(to right, transparent, rgba(0,0,0,.25) 10%, rgba(0,0,0,.6) 18%, rgba(0,0,0,.9) 25%, #000 30%);
mask-image:linear-gradient(to right, transparent, rgba(0,0,0,.25) 10%, rgba(0,0,0,.6) 18%, rgba(0,0,0,.9) 25%, #000 30%); }
@media (max-width:680px){
.pile-dossiers.sans-verso .feuillet-visuel:has(> img, > video){
-webkit-mask-image:linear-gradient(to bottom, transparent, rgba(0,0,0,.25) 10%, rgba(0,0,0,.6) 18%, rgba(0,0,0,.9) 25%, #000 30%);
mask-image:linear-gradient(to bottom, transparent, rgba(0,0,0,.25) 10%, rgba(0,0,0,.6) 18%, rgba(0,0,0,.9) 25%, #000 30%); }
}
/* LES FEUILLETS QUI PRENNENT LEUR IMAGE (à l'essai, 28 septembre 2026, chantier « l'accueil à l'échelle », d'après les
panneaux du site Cortex Impact, hors de sa signature) : pendant les 360 px de défilement qui précèdent le moment où un
feuillet se colle sur la pile, son image monte de 48 px et se resserre de 6 % jusqu'à sa place (--prise, de 0 à 1). Le
script ne règle que --prise, en bureau seulement, où la pile est collante. La mesure des points de collage se fait pile
décollée (.mesure). */
@media (min-width:981px){
.anime .pile-dossiers.prend .feuillet-visuel > :is(img, video){
transform:translateY(calc((1 - var(--prise, 1)) * 48px)) scale(calc(1 + (1 - var(--prise, 1)) * .06)); }
.pile-dossiers.mesure .hote{ position:relative !important; top:auto !important; }
}
/* LES CHEMISES DE COULEUR (26 septembre 2026, refonte, à la demande du client, palette et onglets choisis par lui sur
épreuve) : chaque feuillet de la pile prend sa couleur, comme une sous-chemise dans un classeur — la couleur classe,
chaque pièce du système se reconnaît à la sienne. EXCEPTION à la règle 2 et aux « panneaux en couleurs vives
multiples » écartés (section 9 du manuel), signalée avant l'épreuve. Les cinq couleurs ont la même clarté et la
même saturation : seule la teinte change, et elle alterne chaude et froide d'un feuillet au suivant.
- Le texte passe à l'encre : le gris secondaire n'y tiendrait que 3,1 à 3,3:1 ; à l'encre, 10,7 à 11,4:1.
- L'onglet prend la couleur de son feuillet, plus soutenue, en pleine teinte : l'orange estompé de la pile tournait
au brun sur la couleur. Onglets à 3,9-4,5:1 sur la section ; posé sur le feuillet précédent, 2,6 à 3,1:1, que
l'écart de teinte détache. Le liseré de gauche suit l'onglet.
Classe .teintee sur la pile ; cinq feuillets au plus, dans l'ordre bleu, corail, vert, lavande, ocre. */
.pile-dossiers.teintee .hote:nth-child(1){ --chemise:var(--chemise-bleu); --chemise-onglet:var(--onglet-bleu); }
.pile-dossiers.teintee .hote:nth-child(2){ --chemise:var(--chemise-corail); --chemise-onglet:var(--onglet-corail); }
.pile-dossiers.teintee .hote:nth-child(3){ --chemise:var(--chemise-vert); --chemise-onglet:var(--onglet-vert); }
.pile-dossiers.teintee .hote:nth-child(4){ --chemise:var(--chemise-lavande); --chemise-onglet:var(--onglet-lavande); }
.pile-dossiers.teintee .hote:nth-child(5){ --chemise:var(--chemise-ocre); --chemise-onglet:var(--onglet-ocre); }
.pile-dossiers.teintee .fiche{ background:var(--chemise, var(--blanc)); }
.pile-dossiers.teintee .fiche > p{ color:var(--encre); }
.pile-dossiers.teintee .hote .intercalaire{ background:var(--chemise-onglet, var(--orange)); opacity:1; }
.pile-dossiers.teintee .fiche::before{ background:var(--chemise-onglet, var(--orange)); opacity:1; }
/* LE BOUTON AUX CINQ CHEMISES (27 septembre 2026, à l'essai, à la demande du client ; axe 2 de quatre) : au pied de
la pile, un pied d'appel sans phrase, dont le bouton plein porte avant son libellé les cinq onglets des chemises,
dans l'ordre des feuillets — évaluer, c'est regarder tout le système que la pile vient de poser. Sur l'encre, les
onglets prennent la couleur des chemises (10,7 à 11,4:1) ; bouton vidé au survol, ils passent à celle des onglets
de la pile, plus soutenue, sinon ils s'effaceraient sur le creux (1,4:1) — et se soulèvent l'un après l'autre,
comme les intercalaires de la pile. Aucune couleur nouvelle. La cale de la pile porte déjà l'air au-dessus du
filet : le pied d'appel n'en ajoute pas. */
.pile-dossiers + .pied-appel{ margin-top:0; }
@media (max-width:980px){ .pile-dossiers + .pied-appel{ margin-top:24px; } }
/* Le libellé (36 caractères) et ses onglets font 390 px : sur les petits téléphones, le bouton doit pouvoir rétrécir
et replier son libellé, sinon il sort de sa carte (le pied d'appel fige ses actions, flex:none). */
.pied-appel .actions:has(> .chemises){ flex:0 1 auto; min-width:0; max-width:100%; }
.bouton.chemises{ max-width:100%; text-align:left; }
/* Sous 401 px, les onglets se resserrent : le libellé garde deux lignes au lieu de trois. */
@media (max-width:400px){ .chemises-onglets{ gap:2px; height:11px; } .chemises-onglets i{ width:7px; height:10px; } }
.chemises-onglets{ display:inline-flex; align-items:flex-end; gap:3px; flex:none; height:13px; }
.chemises-onglets i{ display:block; width:10px; height:12px; border-radius:3px 3px 0 0;
transition:transform .45s var(--ressort), background-color .35s var(--ease); }
.chemises-onglets i:nth-child(1){ background:var(--chemise-bleu); }
.chemises-onglets i:nth-child(2){ background:var(--chemise-corail); transition-delay:.03s; }
.chemises-onglets i:nth-child(3){ background:var(--chemise-vert); transition-delay:.06s; }
.chemises-onglets i:nth-child(4){ background:var(--chemise-lavande); transition-delay:.09s; }
.chemises-onglets i:nth-child(5){ background:var(--chemise-ocre); transition-delay:.12s; }
.bouton:is(:hover, :focus-visible) .chemises-onglets i{ transform:translateY(-3px); }
.bouton:is(:hover, :focus-visible) .chemises-onglets i:nth-child(1){ background:var(--onglet-bleu); }
.bouton:is(:hover, :focus-visible) .chemises-onglets i:nth-child(2){ background:var(--onglet-corail); }
.bouton:is(:hover, :focus-visible) .chemises-onglets i:nth-child(3){ background:var(--onglet-vert); }
.bouton:is(:hover, :focus-visible) .chemises-onglets i:nth-child(4){ background:var(--onglet-lavande); }
.bouton:is(:hover, :focus-visible) .chemises-onglets i:nth-child(5){ background:var(--onglet-ocre); }
/* La planche d'analyse : une feuille de travail à cartouche technique,
lue ligne à ligne. Intention : montrer comment on lit avant de proposer. */
.planche{ grid-column:1 / 8; margin-top:72px; background:var(--blanc); border:1px solid var(--ligne);
border-top:3px solid var(--encre); padding:0 30px; box-shadow:5px 6px 0 #E0E1DC; }
.cartouche{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:16px 0; font-size:11px; font-weight:500;
text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--ligne); color:var(--encre); }
.cartouche span:last-child{ color:var(--orange-texte); }
.planche-legende{ display:flex; justify-content:space-between; gap:16px; margin-top:26px; font-size:13px; font-weight:500; }
.planche-legende span{ color:var(--encre-2); font-size:11px; }
.planche-ligne{ display:grid; grid-template-columns:36px 1fr; gap:18px; padding:28px 0; border-bottom:1px solid var(--ligne); }
.planche-ligne:last-of-type{ border-bottom:0; }
.planche-ligne .rang{ font-size:13px; color:var(--orange-texte); font-weight:500; }
.planche-ligne h3{ margin:0 0 8px; font-size:24px; letter-spacing:-.02em; }
.planche-ligne p{ color:var(--encre-2); max-width:60ch; }
.planche-pied{ display:flex; justify-content:space-between; gap:12px; color:var(--encre-2); padding:16px 0; font-size:11px;
border-top:1px solid var(--ligne); }
@media (max-width:980px){ .planche{ grid-column:1 / 9; } }
@media (max-width:680px){
.planche{ grid-column:1 / 5; padding:0 20px; }
.planche-ligne{ grid-template-columns:24px 1fr; gap:12px; }
.planche-legende{ flex-direction:column; gap:5px; }
}
/* L'encart : un point de vue signé, en marge de la planche. */
.encart{ grid-column:9 / 13; margin-top:72px; border-top:1px solid var(--ligne); padding-top:26px; align-self:start; }
.encart .cartouche{ padding-top:0; }
.encart h3{ margin:20px 0 18px; font-size:31px; line-height:1.05; letter-spacing:-.035em; }
.encart p{ color:var(--encre-2); font-size:16px; }
/* L'encart signé en vis-à-vis de l'avis de nos clients (24 septembre 2026, refonte) : le fondateur
à gauche, la parole des clients à droite — celui qui signe le point de vue et ceux qui l'ont
éprouvé. L'encart n'est plus une note en marge de la planche mais la moitié gauche de la section :
son texte reprend donc l'encre et le corps courant, et non le gris d'une annotation.
L'avis ne s'étire pas sur la hauteur de l'encart : ses règles d'étirement visent la liste des
engagements, qui ne l'accompagne plus. */
.encart.vis-a-vis{ grid-column:1 / 7; margin-top:clamp(64px,7vw,110px); }
.encart.vis-a-vis p{ color:var(--encre); font-size:17px; max-width:46ch; }
.encart.vis-a-vis p + p{ margin-top:16px; }
.encart.vis-a-vis .en-ligne{ margin-top:26px; font-size:15px; font-weight:500; }
@media (min-width:981px){ .encart.vis-a-vis + .avis{ align-self:start; display:block; } }
@media (max-width:980px){ .encart.vis-a-vis{ grid-column:1 / -1; } }
@media (max-width:980px){ .encart{ grid-column:1 / 6; margin-top:56px; } }
@media (max-width:680px){ .encart{ grid-column:1 / 5; } }
/* Appel final, sur section sombre */
.appel h2{ grid-column:1 / 11; }
.appel .grille > p:not(.etiquette){ grid-column:1 / 7; margin-top:42px; font-size:20px; color:var(--encre-2); }
.appel .bloc > p:not(.forte):not(.micro){ color:var(--encre-2); }
.appel .actions{ grid-column:1 / 7; margin-top:32px; }
/* Le bouton qui conclut la page est le plus grand du site (21 septembre 2026, à la demande du client) :
un cran au-dessus des autres, 18 px sur 60, là où ils font 16 sur 52. Rayon à la moitié de la hauteur,
pour que la pilule reste une pilule. */
.appel .actions .bouton{ min-height:60px; padding:17px 34px; font-size:18px; border-radius:30px; }
@media (max-width:980px){ .appel h2{ grid-column:1 / 8; } .appel .grille > p,.appel .actions{ grid-column:1 / 6; } }
@media (max-width:680px){ .appel h2,.appel .grille > p,.appel .actions{ grid-column:1 / 5; } }
/* Pied de page */
.pied{ background:#111318; color:#F7F7F3; padding:34px 0 46px;
width:min(calc(100% - var(--carte-ecart)*2), var(--carte-max)); margin:var(--carte-ecart) auto; }
.pied-in{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:end; }
.pied-meta{ color:rgba(247,247,243,.7); font-size:13px; }
.pied .sceau + .pied-meta{ margin-top:8px; }
.pied-nav{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:rgba(247,247,243,.7); margin-top:16px; }
.pied-nav a:hover{ color:#F7F7F3; }
@media (max-width:680px){ .pied-in{ grid-template-columns:1fr; } }
/* LE LOGOTYPE GÉANT (à l'essai, 28 septembre 2026, seconde passe ; d'après Madame Polar et la V1) : au pied de l'accueil, le
nom à toute la largeur du texte (17,4 % de la largeur du conteneur : il en fait 5,64 fois son corps, et remplit 98 %),
en papier sur l'encre — la page se signe. Masqué aux lecteurs d'écran : le sceau le dit déjà. */
.pied .conteneur:has(> .logotype-geant){ container-type:inline-size; }
.logotype-geant{ margin:clamp(36px,5vw,72px) 0 0; font-size:17.4cqw; font-weight:600; letter-spacing:-.055em; line-height:.8;
color:rgba(247,247,243,.94); white-space:nowrap; pointer-events:none; user-select:none; }
/* La feuille et sa corne : une note qu'on a déjà ouverte, il y a davantage à lire.
Intention : signaler qu'il y a davantage ailleurs. */
.feuilles{ grid-column:1 / -1; margin-top:72px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px; }
.feuille{ display:block; position:relative; overflow:hidden; background:var(--blanc); border:1px solid var(--ligne);
padding:28px 34px 28px 28px; transition:transform .45s var(--ressort), box-shadow .35s ease; }
.feuille:hover{ transform:translateY(-2px); box-shadow:5px 6px 0 #E0E1DC; }
.feuille .corne{ position:absolute; top:0; right:0; width:26px; height:26px; pointer-events:none; background:var(--papier);
clip-path:polygon(0 0,100% 0,100% 100%); transition:width .45s var(--ressort), height .45s var(--ressort); }
.feuille .corne::after{ content:""; position:absolute; inset:0; clip-path:polygon(100% 0,100% 100%,0 100%);
background:linear-gradient(225deg, rgba(17,19,24,.16), rgba(17,19,24,0) 60%); }
.feuille:hover .corne{ width:40px; height:40px; }
.feuille .secteur{ display:block; margin-bottom:12px; font-size:13px; font-weight:500; color:var(--orange-texte); }
.feuille h3{ margin-bottom:10px; font-size:24px; }
.feuille p{ font-size:15px; color:var(--encre-2); }
.feuille.vide .secteur{ color:var(--encre-2); }
@media (max-width:980px){ .feuilles{ grid-template-columns:1fr; } }
/* Le cartouche de projet et sa référence : mêmes champs, même ordre.
Intention : rendre comparables des choses hétérogènes. */
.projets{ grid-column:1 / -1; margin-top:72px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px; }
.projet{ border:1px solid var(--ligne); background:var(--blanc); overflow:hidden; }
.vignette{ position:relative; aspect-ratio:16/10; background:var(--papier-creux); border-bottom:1px solid var(--ligne);
display:grid; place-items:center; }
.vignette span{ font-size:12px; font-weight:500; color:var(--encre-2); }
.projet-cartouche{ padding:26px 28px 28px; }
.projet-cartouche h3{ margin-bottom:16px; font-size:24px; }
.champs{ margin:0; font-size:15px; }
.champs div{ display:grid; grid-template-columns:108px minmax(0,1fr); gap:14px; padding:8px 0; border-top:1px solid var(--ligne); }
.champs dt{ font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--encre-2); padding-top:3px; }
.champs dd{ margin:0; }
@media (max-width:880px){ .projets{ grid-template-columns:1fr; } }
/* — 7. Mots semés ———————————————————————————————————
Dans la section qui les porte — la section 04 de l'accueil —, la souris
sème des mots surlignés dans l'espace vide, trois au plus, jamais sur le
texte. Le visiteur éprouve le geste. La section doit être positionnée.
Les mots semés ne sont jamais surlignés en bleu : le bleu est le geste
du surligneur, et lui seul. Ils prennent les
teintes d'une trousse de surligneurs — vert, jaune, orange, violet —
posées en transparence pour que le texte reste lisible dessus. */
.semis{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.graine{ position:absolute; font-size:clamp(17px,1.35vw,21px); font-weight:500; letter-spacing:-.015em; color:var(--encre);
padding:3px 9px 4px; white-space:nowrap; opacity:0; transform:translateY(8px) rotate(-1deg);
transition:opacity .28s ease, transform .42s var(--ease); isolation:isolate; }
.graine::before{ content:""; position:absolute; z-index:-1; left:-.08em; right:-.08em; top:48%; height:.58em;
background:var(--teinte, var(--vert)); opacity:var(--intensite, .5); transform:scaleX(0) rotate(-1.2deg); transform-origin:left;
transition:transform .42s var(--ease) .16s; }
.graine.vive{ opacity:.96; transform:translateY(0) rotate(-1deg); }
.graine.vive::before{ transform:scaleX(1) rotate(-1.2deg); }
/* Le jaune est clair par nature : il prend plus d'encre pour peser autant que les autres. */
.graine[data-teinte="vert"]{ --teinte:var(--vert); --intensite:.5; }
.graine[data-teinte="jaune"]{ --teinte:var(--jaune); --intensite:.78; }
.graine[data-teinte="orange"]{ --teinte:var(--orange); --intensite:.5; }
.graine[data-teinte="violet"]{ --teinte:var(--violet); --intensite:.46; }
@media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse),(max-width:980px){ .semis{ display:none; } }
/* — 8. Mouvement réduit ————————————————————————————— */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{ scroll-behavior:auto !important; animation:none !important; transition:none !important; }
.surligne::before,.surligne::after,.surligne .segment::before,.surligne .segment::after,.frise::after{ transform:none !important; }
.dossier.ouvert .recto{ transform:none; }
/* Sans animation, le masque du chapô qui s'écrit cacherait le texte : on le retire. */
.chapo-droite.a-ecrire{ opacity:1; }
.ecriture > .ecriture-ligne{ -webkit-mask-image:none; mask-image:none; }
.ecriture > .ecriture-ligne::after{ content:none; }
}