/* ==========================================================================
Bi Cloud — feuille de styles principale
--------------------------------------------------------------------------
Fondations : jetons de design, typographie, composants, états.
Aucun script n'est requis pour lire le contenu ; le JavaScript n'ajoute que
le menu à tiroir, la barre d'action collante et les apparitions au défilement.
SOMMAIRE
1. Jetons — thème clair (:root nu)
2. Jetons — thème sombre (les deux blocs)
3. Réinitialisation et éléments de base
4. Utilitaires de mise en page
5. En-tête, marque, logo, navigation
6. Boutons et états
7. Bandes, héros, fil d'Ariane, corps de page
8. Contenu rédactionnel
9. Barre latérale
10. Cartes, grilles, chiffres, bandeau de confiance
11. FAQ, listes, glossaire
12. Conversion : bloc CTA et barre collante mobile
13. Formulaires
14. Encarts, marqueurs, décor hexagonal
15. Pied de page
16. Animations d'apparition
17. Réactif
18. Impression
19. Compatibilité (jetons hérités)
RÈGLE D'OR — le vert (--cta) ne sert QU'aux appels à l'action : bouton de
prise de rendez-vous, envoi de formulaire, bouton du diagnostic. Jamais un
titre, un filet, une icône ou une carte. Le bleu porte l'identité (liens,
symboles, structure), l'ardoise porte les aplats sombres, le reste est neutre.
CONTRASTE — --ink-3 n'est validé AA que sur --bg et --surface. Sur
--surface-2 et --surface-3, utiliser --ink-2.
========================================================================== */
/* =========================================================== 1. Jetons — clair
Palette validée WCAG AA. Ne pas modifier sans revalider les contrastes.
Toute couleur du fichier passe par ces variables : aucun littéral ailleurs.
========================================================================== */
:root{
color-scheme:light;
/* — fonds et surfaces — */
--bg:#F7F9FA;
--surface:#FFFFFF;
--surface-2:#EDF2F5;
--surface-3:#DFE8ED;
/* — textes — */
--ink:#16242E;
--ink-2:#40586A;
--ink-3:#5E7686;
/* — filets — */
--rule:#DCE5EA;
--rule-strong:#B9C9D2;
/* — marque, bleu : aplats, liens, symboles, structure — */
--brand:#008FBA; /* aplats et symboles, filets d'accent */
--brand-ink:#00718F; /* texte et liens sur fond clair */
--brand-deep:#2F4858; /* ardoise, bandeaux pleins */
--brand-soft:#E1F1F7; /* fond teinté discret */
/* — action, vert : RÉSERVÉ aux appels à l'action — */
--cta:#7BB928;
--cta-hover:#6DA71F;
--cta-ink:#12240A;
--cta-soft:#EEF7E2;
/* — sémantique — */
--ok:#1C6640; --ok-soft:#E0EFE6;
--warn:#9A5B08; --warn-soft:#F8EBD8;
--alert:#A3231A; --alert-soft:#F8E3E1;
/* — jetons dérivés —
--brand sur texte blanc ne donne que 3,7:1 : insuffisant pour un aplat
porteur de texte. --brand-solid est la déclinaison AA du bouton bleu. */
--brand-solid:#00718F;
--brand-solid-hover:#005B74;
--brand-solid-ink:#FFFFFF;
--on-deep:#FFFFFF; /* texte posé sur --brand-deep, identique en sombre */
/* — bascule des déclinaisons du logo, pilotée par jeton
(les blocs de thème ne contiennent ainsi que des variables) — */
--logo-light:block;
--logo-dark:none;
/* — ombres : teinte + facteur d'opacité, ajustés par thème — */
--shadow-rgb:22 36 46;
--shadow-k:1;
--shadow-sm:0 1px 2px rgb(var(--shadow-rgb)/calc(.06 * var(--shadow-k)));
--shadow:0 1px 2px rgb(var(--shadow-rgb)/calc(.05 * var(--shadow-k))),
0 12px 28px -18px rgb(var(--shadow-rgb)/calc(.34 * var(--shadow-k)));
--shadow-lg:0 4px 8px rgb(var(--shadow-rgb)/calc(.07 * var(--shadow-k))),
0 24px 48px -24px rgb(var(--shadow-rgb)/calc(.42 * var(--shadow-k)));
/* — impression (jamais redéfini par thème : le papier reste blanc) — */
--paper:#FFFFFF;
--paper-ink:#101010;
/* — familles — */
--f-display:"Sora","Helvetica Neue",Arial,sans-serif;
--f-body:"Public Sans","Helvetica Neue",Arial,sans-serif;
--f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
/* — échelle typographique (1rem = 17px, voir html) — */
--t-cap:.72rem; /* étiquettes mono */
--t-sm:.82rem; /* mentions, méta */
--t-md:.92rem; /* texte secondaire, navigation */
--t-base:1rem; /* texte courant : 17px */
--t-lg:1.13rem;
--t-xl:1.3rem;
--t-2xl:1.6rem;
--t-3xl:2.05rem;
--t-hero:clamp(2.05rem,1.35rem + 2.7vw,3.1rem);
--lh-tight:1.14; /* grands titres */
--lh-snug:1.32; /* titres courants */
--lh-body:1.65; /* texte courant */
--ls-tighter:-.035em; /* h1 uniquement */
--ls-tight:-.022em; /* h2, h3 */
--ls-cap:.14em; /* capitales mono */
/* — espacement : une seule échelle, utilisée partout — */
--s1:4px;
--s2:8px;
--s3:12px;
--s4:18px;
--s5:26px;
--s6:40px;
--s7:60px;
--s8:88px;
/* — rayons — */
--r-sm:6px;
--r:10px;
--r-lg:16px;
/* — gabarit — */
--maxw:1180px;
--prose:68ch;
--header-h:72px;
--tap:44px; /* hauteur minimale d'une zone cliquable */
}
/* ==================================================== 2. Jetons — sombre (×2)
Les deux blocs sont strictement identiques et ne contiennent QUE des
variables. Toute variable y figurant est déjà définie sur :root nu.
========================================================================== */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
color-scheme:dark;
--bg:#0D1720;
--surface:#13212C;
--surface-2:#1B2C39;
--surface-3:#253A49;
--ink:#E8F0F4;
--ink-2:#AFC3CF;
--ink-3:#7F97A6;
--rule:#223543;
--rule-strong:#34505F;
--brand:#4FC0E4;
--brand-ink:#6FD0EE;
--brand-deep:#0D3444;
--brand-soft:#0D3444;
--cta:#8FCF35;
--cta-hover:#A0DC49;
--cta-ink:#0B1705;
--cta-soft:#16300A;
--ok:#74CE99; --ok-soft:#12281C;
--warn:#E3A857; --warn-soft:#2C2011;
--alert:#EF9285; --alert-soft:#2E1614;
--brand-solid:#4FC0E4;
--brand-solid-hover:#6FD0EE;
--brand-solid-ink:#06222C;
--logo-light:none;
--logo-dark:block;
--shadow-rgb:0 0 0;
--shadow-k:2.4;
}
}
:root[data-theme="dark"]{
color-scheme:dark;
--bg:#0D1720;
--surface:#13212C;
--surface-2:#1B2C39;
--surface-3:#253A49;
--ink:#E8F0F4;
--ink-2:#AFC3CF;
--ink-3:#7F97A6;
--rule:#223543;
--rule-strong:#34505F;
--brand:#4FC0E4;
--brand-ink:#6FD0EE;
--brand-deep:#0D3444;
--brand-soft:#0D3444;
--cta:#8FCF35;
--cta-hover:#A0DC49;
--cta-ink:#0B1705;
--cta-soft:#16300A;
--ok:#74CE99; --ok-soft:#12281C;
--warn:#E3A857; --warn-soft:#2C2011;
--alert:#EF9285; --alert-soft:#2E1614;
--brand-solid:#4FC0E4;
--brand-solid-hover:#6FD0EE;
--brand-solid-ink:#06222C;
--logo-light:none;
--logo-dark:block;
--shadow-rgb:0 0 0;
--shadow-k:2.4;
}
/* ================================================ 3. Réinitialisation / base */
*,*::before,*::after{box-sizing:border-box;}
html{
font-size:106.25%; /* 1rem = 17px, l'échelle suit le réglage du navigateur */
-webkit-text-size-adjust:100%;
scroll-behavior:smooth;
scroll-padding-top:calc(var(--header-h) + var(--s4));
}
body{
margin:0;
background:var(--bg);
color:var(--ink);
font-family:var(--f-body);
font-size:var(--t-base);
line-height:var(--lh-body);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4,h5,h6{
font-family:var(--f-display);
font-weight:600;
line-height:var(--lh-snug);
letter-spacing:var(--ls-tight);
margin:0;
text-wrap:balance;
}
h1{font-size:var(--t-hero);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-tighter);}
h2{font-size:var(--t-2xl);}
h3{font-size:var(--t-lg);}
h4,h5,h6{font-size:var(--t-base);}
p,ul,ol,dl,blockquote,table,figure,pre{margin:0;}
p{text-wrap:pretty;}
strong,b{font-weight:600;}
small{font-size:var(--t-sm);}
a{
color:var(--brand-ink);
text-underline-offset:3px;
text-decoration-thickness:1px;
transition:color .15s ease,text-decoration-color .15s ease;
}
a:hover{color:var(--brand);}
a:active{text-decoration-thickness:2px;} /* lisible dans les deux thèmes */
/* Focus visible unique et systématique : 2px --brand, décalé de 3px.
L'outline épouse déjà le rayon de l'élément : ne rien forcer ici. */
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
::selection{background:var(--brand-soft);color:var(--ink);}
hr{border:none;border-top:1px solid var(--rule);margin:var(--s5) 0;}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*,*::before,*::after{
animation-duration:.01ms!important;
animation-iteration-count:1!important;
transition-duration:.01ms!important;
scroll-behavior:auto!important;
}
}
/* ================================================ 4. Utilitaires de gabarit */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s5);}
.prose{max-width:var(--prose);}
/* Étiquette mono en capitales. --ink-3 n'étant validé AA que sur --bg et
--surface, les contextes teintés repassent l'étiquette en --ink-2. */
.eyebrow{
font-family:var(--f-mono);
font-size:var(--t-cap);
font-weight:500;
letter-spacing:var(--ls-cap);
text-transform:uppercase;
color:var(--ink-3);
}
.lede{font-size:var(--t-xl);line-height:1.5;color:var(--ink-2);max-width:60ch;}
.sec-head{display:flex;flex-direction:column;gap:var(--s2);}
/* Ligne de sortie sous une grille de cartes : deux renvois discrets, jamais un
troisième bouton. Elle évite le cul-de-sac sans concurrencer l'action. */
.sec-foot{font-size:var(--t-md);color:var(--ink-3);}
.sec-foot a{color:var(--brand-ink);font-weight:500;}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);padding-top:var(--s1);}
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip{
position:absolute;left:-9999px;top:0;z-index:100;
background:var(--brand-deep);color:var(--on-deep);
padding:var(--s3) var(--s4);border-radius:0 0 var(--r-sm) 0;
font-weight:600;text-decoration:none;
}
.skip:focus{left:0;}
/* ======================================== 5. En-tête, marque, logo, navigation */
.site-header{
position:sticky;top:0;z-index:50;
background:color-mix(in srgb,var(--surface) 92%,transparent);
backdrop-filter:saturate(180%) blur(12px);
border-bottom:1px solid var(--rule);
}
.site-header .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s4);min-height:var(--header-h);}
/* Verrou de marque empilé : la signature passe sous le nom plutôt qu'à côté.
Posée en ligne, elle coûte 100px de large à l'en-tête et fait déborder la
navigation complète hors du gabarit de 1180px. */
.brand{display:flex;flex-direction:column;justify-content:center;gap:1px;text-decoration:none;color:var(--ink);flex:0 0 auto;}
.brand .mark{font-family:var(--f-display);font-weight:700;font-size:var(--t-xl);line-height:1.15;letter-spacing:var(--ls-tighter);color:var(--brand-ink);}
.brand .sub{font-family:var(--f-mono);font-size:var(--t-cap);line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
/* .site-logo — image du logo, jamais recolorée ni déformée.
Hauteur d'en-tête : 34px (fourchette imposée 32–38px).
Deux déclinaisons, la bascule clair/sombre se fait par jeton :
width/height explicites obligatoires ; pas de loading="lazy" en en-tête.
.site-logo--white : version blanche, à poser sur aplat --brand-deep.
.site-logo--lg : pied de page.
Zone de respiration = hauteur ÷ 2, soit 17px : garantie par le gap --s4
(18px) de .site-header .wrap. Ne pas la réduire. */
.site-logo{
height:var(--logo-h,34px);
width:auto;
max-width:none;
flex:0 0 auto;
}
.site-logo--light{display:var(--logo-light);}
.site-logo--dark{display:var(--logo-dark);}
.site-logo--white{display:block;} /* visible quel que soit le thème */
.site-logo--lg{--logo-h:40px;}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px;min-width:0;}
.nav > ul{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:2px;padding:0;margin:0;}
.nav li{position:relative;}
.nav a{
display:block;padding:var(--s2);border-radius:var(--r-sm);white-space:nowrap;
color:var(--ink-2);text-decoration:none;font-size:var(--t-md);font-weight:500;
transition:background .15s ease,color .15s ease;
}
.nav a:hover{background:var(--surface-2);color:var(--ink);}
.nav a[aria-current="page"]{background:var(--surface-2);color:var(--ink);font-weight:600;}
.nav .sub-menu{
list-style:none;margin:0;padding:var(--s2);position:absolute;top:100%;left:0;min-width:280px;
background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
box-shadow:var(--shadow-lg);display:none;flex-direction:column;gap:1px;
}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu{display:flex;}
.nav .sub-menu a{white-space:nowrap;font-weight:400;}
/* Bouton du menu à tiroir : masqué au-dessus de 1150px, dessiné par l'agent
en-tête au-dessous. aria-expanded porte l'état. */
.nav-toggle{
display:none;
align-items:center;justify-content:center;gap:var(--s2);
min-height:var(--tap);min-width:var(--tap);
padding:var(--s2) var(--s3);
background:transparent;border:1px solid var(--rule-strong);border-radius:var(--r-sm);
color:var(--ink);font-family:var(--f-body);font-size:var(--t-md);font-weight:600;
cursor:pointer;
}
.nav-toggle:hover{border-color:var(--brand);color:var(--brand-ink);}
/* Téléphone cliquable en en-tête, visible sur mobile (voir §17). */
.header-tel{
display:none;align-items:center;gap:var(--s2);
min-height:var(--tap);padding:0 var(--s3);
color:var(--ink);font-weight:600;font-size:var(--t-md);text-decoration:none;
border-radius:var(--r-sm);
}
.header-tel:hover{background:var(--surface-2);color:var(--brand-ink);}
.header-cta{flex:0 0 auto;margin-left:var(--s2);white-space:nowrap;}
/* ============================================== 6. Boutons et états
.btn-primary = vert, appel à l'action principal (règle d'or).
.btn-brand = bleu plein, action secondaire importante.
.btn-ghost = contour neutre, survol bleu.
========================================================================== */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
min-height:var(--tap);
padding:var(--s3) var(--s5);
border-radius:var(--r-sm);border:1px solid transparent;
font-family:var(--f-body);font-weight:600;font-size:var(--t-md);line-height:1.25;
text-decoration:none;cursor:pointer;text-align:center;
transition:background .15s ease,border-color .15s ease,color .15s ease,transform .1s ease,box-shadow .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn-lg{padding:var(--s4) var(--s6);font-size:var(--t-base);min-height:52px;}
.btn-primary{background:var(--cta);border-color:var(--cta);color:var(--cta-ink);}
.btn-primary:hover{background:var(--cta-hover);border-color:var(--cta-hover);color:var(--cta-ink);}
.btn-brand{background:var(--brand-solid);border-color:var(--brand-solid);color:var(--brand-solid-ink);}
.btn-brand:hover{background:var(--brand-solid-hover);border-color:var(--brand-solid-hover);color:var(--brand-solid-ink);}
.btn-ghost{background:transparent;border-color:var(--rule-strong);color:var(--ink);}
.btn-ghost:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink);}
/* Désactivé : neutre, sans effet de survol, curseur explicite.
Le libellé reste lisible (--ink-2) : --ink-3 ne passe pas AA sur --surface-3. */
.btn[disabled],
.btn[aria-disabled="true"]{
background:var(--surface-3);border-color:var(--rule);color:var(--ink-2);
cursor:not-allowed;box-shadow:none;transform:none;
}
/* État de chargement : le libellé s'efface, un témoin tourne à sa place.
Le libellé reste dans le DOM — la largeur du bouton ne bouge pas. */
.btn.is-loading{cursor:progress;color:transparent;position:relative;}
.btn.is-loading::after{
content:"";position:absolute;width:16px;height:16px;border-radius:50%;
border:2px solid var(--ink);border-top-color:transparent;
animation:btn-spin .7s linear infinite;
}
.btn-primary.is-loading::after{border-color:var(--cta-ink);border-top-color:transparent;}
.btn-brand.is-loading::after{border-color:var(--brand-solid-ink);border-top-color:transparent;}
.btn-ghost.is-loading::after{border-color:var(--ink);border-top-color:transparent;}
@keyframes btn-spin{to{transform:rotate(360deg);}}
/* ================================ 7. Bandes, héros, fil d'Ariane, corps de page */
main{display:block;}
section.band{padding:var(--s7) 0;border-bottom:1px solid var(--rule);}
section.band.alt{background:var(--surface);}
section.band > .wrap{display:flex;flex-direction:column;gap:var(--s5);}
.breadcrumb{padding:var(--s4) 0 0;}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1);padding:0;margin:0;font-size:var(--t-sm);color:var(--ink-3);}
.breadcrumb li::after{content:"›";margin-left:var(--s1);color:var(--rule-strong);}
.breadcrumb li:last-child::after{content:"";}
.breadcrumb a{color:var(--ink-3);text-decoration:none;}
.breadcrumb a:hover{color:var(--brand-ink);text-decoration:underline;}
.hero{padding:var(--s6) 0 var(--s7);border-bottom:1px solid var(--rule);background:var(--surface);position:relative;}
.hero .wrap{display:flex;flex-direction:column;gap:var(--s6);position:relative;z-index:1;}
.hero-main{display:flex;flex-direction:column;min-width:0;}
.hero h1{max-width:19ch;}
.hero .actions{padding-top:var(--s2);}
.hero-home{padding-bottom:var(--s8);background:linear-gradient(180deg,var(--brand-soft) 0%,var(--surface) 70%);}
/* Ligne de réassurance courte sous le héros (métadonnées d'article incluses). */
.trust{
display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
padding-top:var(--s5);margin-top:var(--s1);
border-top:1px solid var(--rule);font-size:var(--t-sm);color:var(--ink-2);
}
.trust span{display:flex;align-items:center;gap:var(--s2);}
.trust span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex:0 0 auto;}
.page-body{padding:var(--s6) 0 var(--s7);}
.page-body .wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s7);align-items:start;}
.page-body.full .wrap{grid-template-columns:minmax(0,1fr);}
.page-body.full article.content{max-width:none;}
.page-body.full article.content > p,
.page-body.full article.content > ul,
.page-body.full article.content > ol,
.page-body.full article.content > blockquote{max-width:var(--prose);}
/* ============================================== 8. Contenu rédactionnel */
article.content{max-width:var(--prose);display:flex;flex-direction:column;gap:var(--s5);}
article.content > h2{font-size:var(--t-2xl);margin-top:var(--s5);}
article.content > h2:first-child{margin-top:0;}
article.content > h3{font-size:var(--t-lg);margin-top:var(--s1);}
article.content p{color:var(--ink-2);}
article.content a{font-weight:500;}
article.content > ul,
article.content > ol{padding-left:1.3em;display:flex;flex-direction:column;gap:var(--s2);color:var(--ink-2);}
article.content li::marker{color:var(--brand);}
article.content li > ul,
article.content li > ol{margin-top:var(--s2);padding-left:1.2em;display:flex;flex-direction:column;gap:var(--s1);}
article.content blockquote{
border-left:3px solid var(--brand);background:var(--surface-2);
padding:var(--s4) var(--s5);border-radius:0 var(--r) var(--r) 0;color:var(--ink);
}
article.content blockquote p{color:var(--ink);}
article.content blockquote p + p{margin-top:var(--s2);}
article.content code{
font-family:var(--f-mono);font-size:.86em;
background:var(--surface-2);border:1px solid var(--rule);
padding:1px 5px;border-radius:4px;color:var(--ink);
}
article.content pre{
background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r);
padding:var(--s4);overflow-x:auto;
font-family:var(--f-mono);font-size:var(--t-sm);line-height:1.6;color:var(--ink);
}
article.content pre code{background:none;border:none;padding:0;font-size:inherit;}
article.content .table-scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);}
article.content table{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--t-md);}
article.content th,
article.content td{text-align:left;padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule);vertical-align:top;}
article.content thead th{
font-family:var(--f-mono);font-size:var(--t-cap);letter-spacing:.09em;text-transform:uppercase;
color:var(--ink-2);font-weight:500;background:var(--surface-2);white-space:nowrap;
}
article.content tbody tr:last-child td{border-bottom:none;}
article.content td{color:var(--ink-2);}
article.content td:first-child{color:var(--ink);}
/* Réponse directe placée en tête de page (référencement et lecture rapide). */
.lede-answer{
background:var(--surface-2);border:1px solid var(--rule);border-left:3px solid var(--brand);
padding:var(--s5);border-radius:0 var(--r) var(--r) 0;
font-size:var(--t-lg);line-height:1.55;color:var(--ink);
}
/* ============================================================ 9. Barre latérale */
.sidebar{display:flex;flex-direction:column;gap:var(--s5);position:sticky;top:calc(var(--header-h) + var(--s5));}
.side-card{
background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);box-shadow:var(--shadow-sm);
}
.side-card h2,.side-card h3{font-size:var(--t-lg);}
.side-card p{font-size:var(--t-md);color:var(--ink-2);}
.side-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s2);}
.side-card ul a{font-size:var(--t-md);text-decoration:none;color:var(--ink-2);}
.side-card ul a:hover{color:var(--brand-ink);text-decoration:underline;}
.side-card .btn{width:100%;}
/* Carte latérale de conversion : teinte bleue (identité), bouton vert (action). */
.side-card.accent{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 32%,transparent);}
.side-card.accent .eyebrow{color:var(--ink-2);}
.side-card.accent p{color:var(--ink-2);}
/* ================ 10. Cartes, grilles, chiffres, bandeau de confiance */
.grid{display:grid;gap:var(--s5);}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr));}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(214px,1fr));}
.card{
background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);box-shadow:var(--shadow-sm);
transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
section.alt .card{background:var(--bg);}
.card h2,.card h3{font-size:var(--t-lg);}
.card p{font-size:var(--t-md);color:var(--ink-2);}
/* Carte cliquable : elle doit se signaler comme telle — curseur, filet bleu,
élévation, flèche qui avance, anneau de focus visible. */
a.card{text-decoration:none;color:inherit;cursor:pointer;}
a.card:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px);}
a.card:active{transform:translateY(0);box-shadow:var(--shadow-sm);}
a.card:focus-visible{border-color:var(--brand);}
.card .more{
margin-top:auto;padding-top:var(--s1);
font-size:var(--t-md);font-weight:600;color:var(--brand-ink);
display:flex;align-items:center;gap:var(--s2);
}
.card .more::after{content:"→";transition:transform .15s ease;}
a.card:hover .more{color:var(--brand);}
a.card:hover .more::after{transform:translateX(3px);}
.stat{display:flex;flex-direction:column;gap:var(--s1);}
.stat .v{
font-family:var(--f-display);font-size:var(--t-3xl);font-weight:700;
letter-spacing:var(--ls-tighter);line-height:1;color:var(--brand-ink);
font-variant-numeric:tabular-nums;
}
.stat .l{font-size:var(--t-md);color:var(--ink-2);}
/* .trust-bar — bandeau de chiffres, placé sous le titre de page.
Chiffres tabulaires, encadrés de deux filets, aucune couleur d'action : la
confiance s'inspire, elle ne se crie pas.
278clients accompagnés
…
*/
.trust-bar{
list-style:none;margin:0;
padding:var(--s4) 0;
display:flex;flex-wrap:wrap;gap:var(--s4) var(--s7);
border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.trust-bar li{display:flex;flex-direction:column;gap:2px;}
.trust-bar__n{
font-family:var(--f-display);font-size:var(--t-2xl);font-weight:700;
letter-spacing:var(--ls-tight);line-height:1.05;color:var(--ink);
font-variant-numeric:tabular-nums;
}
.trust-bar__l{
font-family:var(--f-mono);font-size:var(--t-cap);letter-spacing:.08em;
text-transform:uppercase;color:var(--ink-3);line-height:1.4;
}
/* ================================================= 11. FAQ, listes, glossaire */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--rule);}
.faq-item{border-bottom:1px solid var(--rule);padding:var(--s5) 0;display:flex;flex-direction:column;gap:var(--s2);}
.faq-item h3{font-size:var(--t-lg);color:var(--ink);}
.faq-item p{color:var(--ink-2);max-width:var(--prose);}
.list-rows{display:flex;flex-direction:column;border-top:1px solid var(--rule);margin:0 calc(var(--s3) * -1);}
.list-row{
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2) var(--s5);
padding:var(--s5) var(--s3);border-bottom:1px solid var(--rule);align-items:baseline;
text-decoration:none;color:inherit;
transition:background .15s ease;
}
.list-row h3{font-size:var(--t-lg);grid-column:1;transition:color .15s ease;}
.list-row p{grid-column:1;font-size:var(--t-md);color:var(--ink-2);max-width:70ch;}
.list-row .meta{
grid-column:2;grid-row:1;justify-self:end;
font-family:var(--f-mono);font-size:var(--t-cap);color:var(--ink-3);
white-space:nowrap;font-variant-numeric:tabular-nums;
}
/* Ligne cliquable : fond, titre coloré et souligné — même grammaire que les cartes. */
a.list-row:hover{background:var(--surface-2);}
a.list-row:hover h3{color:var(--brand-ink);text-decoration:underline;}
dl.glossary{display:flex;flex-direction:column;border-top:1px solid var(--rule);}
dl.glossary > div{padding:var(--s5) 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:var(--s2);}
dl.glossary dt{font-family:var(--f-display);font-weight:600;font-size:var(--t-lg);}
dl.glossary dt a{text-decoration:none;}
dl.glossary dt a:hover{text-decoration:underline;}
dl.glossary dd{margin:0;color:var(--ink-2);font-size:var(--t-md);}
/* ========================= 12. Conversion : bloc CTA et barre collante mobile
Aplat ardoise (--brand-deep) dans les deux thèmes, texte --on-deep.
Le bouton d'action reste vert : c'est le repère du visiteur sur tout le site.
Les surcharges ci-dessous sont volontairement plus spécifiques que le §6.
========================================================================== */
.cta-block{
background:var(--brand-deep);color:var(--on-deep);border-radius:var(--r-lg);
padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3);
position:relative;overflow:hidden;
}
.cta-block > *:not(.hex-deco){position:relative;z-index:1;}
.cta-block h2{font-size:var(--t-2xl);color:inherit;max-width:22ch;}
.cta-block p{color:inherit;opacity:.9;max-width:56ch;}
.cta-block .eyebrow{color:inherit;opacity:.75;}
.cta-block .fine{font-size:var(--t-sm);opacity:.8;}
/* :not(.btn) est indispensable : sans lui cette règle repeindrait le libellé
du bouton vert en blanc (2,4:1) — c'est le seul point de collision de
spécificité du fichier avec les boutons. */
.cta-block a:not(.btn){color:inherit;}
.cta-block .actions{padding-top:var(--s2);}
.cta-block .btn-ghost{background:transparent;border-color:color-mix(in srgb,var(--on-deep) 45%,transparent);color:var(--on-deep);}
.cta-block .btn-ghost:hover{background:color-mix(in srgb,var(--on-deep) 14%,transparent);border-color:var(--on-deep);color:var(--on-deep);}
.cta-block :focus-visible{outline-color:var(--on-deep);}
/* .sticky-cta — barre d'action fixe, sous 700px uniquement.
Masquée par défaut ; le JS ajoute .is-visible après 400px de défilement et
la retire quand le bloc de conversion de bas de page entre dans l'écran.
Sans JavaScript, elle ne s'affiche jamais : aucun contenu n'en dépend. */
.sticky-cta{display:none;}
.sticky-cta .btn{flex:1 1 0;min-width:0;}
/* ================================================================ 13. Formulaires
.form-field — un champ = une étiquette VISIBLE au-dessus, un contrôle,
une aide facultative, un message d'erreur sous le champ concerné.
Nous répondons sous une heure ouvrée.
Indiquez une adresse valide.
L'erreur se déclenche par aria-invalid="true" sur le contrôle, ou par
.is-error sur le conteneur. Jamais de placeholder en guise d'étiquette.
========================================================================== */
.form{display:flex;flex-direction:column;gap:var(--s5);max-width:560px;}
.form-field{display:flex;flex-direction:column;gap:var(--s1);}
.form-field > label{font-size:var(--t-md);font-weight:600;color:var(--ink);}
.form-field__hint{font-size:var(--t-sm);color:var(--ink-3);}
.form-field__error{font-size:var(--t-sm);font-weight:600;color:var(--alert);}
.form-field input,
.form-field select,
.form-field textarea{
font-family:var(--f-body);font-size:var(--t-base);line-height:1.4;color:var(--ink);
background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--r-sm);
padding:var(--s3);width:100%;min-height:var(--tap);
transition:border-color .15s ease,background .15s ease;
}
.form-field textarea{min-height:120px;resize:vertical;}
.form-field input::placeholder,
.form-field textarea::placeholder{color:var(--ink-3);}
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover{border-color:var(--ink-3);}
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible{border-color:var(--brand);outline-offset:2px;}
.form-field input[disabled],
.form-field select[disabled],
.form-field textarea[disabled]{background:var(--surface-2);color:var(--ink-3);cursor:not-allowed;}
/* État d'erreur — spécificité égale à celle des règles ci-dessus, l'ordre
source tranche : un champ en erreur reste rouge même pendant le focus,
l'anneau bleu du focus restant visible par-dessus. */
.form-field.is-error > label{color:var(--alert);}
.form-field.is-error input,
.form-field.is-error select,
.form-field.is-error textarea,
.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"]{border-color:var(--alert);background:var(--alert-soft);}
/* .form-msg — écran de confirmation ou message global de formulaire :
il dit ce qui se passe ensuite et sous quel délai. */
.form-msg{
border:1px solid var(--rule);border-left:3px solid var(--brand);
background:var(--surface-2);color:var(--ink);
padding:var(--s4) var(--s5);border-radius:0 var(--r) var(--r) 0;
display:flex;flex-direction:column;gap:var(--s2);
}
.form-msg--ok{border-left-color:var(--ok);background:var(--ok-soft);}
.form-msg--alert{border-left-color:var(--alert);background:var(--alert-soft);}
.form-msg p{color:var(--ink-2);font-size:var(--t-md);}
/* Case à cocher de consentement : zone cliquable généreuse. */
.form-consent{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--t-sm);color:var(--ink-2);}
.form-consent input{width:auto;min-height:0;margin:5px 0 0;accent-color:var(--brand);flex:0 0 auto;}
/* ============================== 14. Encarts, marqueurs, décor hexagonal */
.callout{
border-left:3px solid var(--warn);background:var(--warn-soft);
padding:var(--s4) var(--s5);border-radius:0 var(--r) var(--r) 0;
display:flex;flex-direction:column;gap:var(--s2);
}
.callout .eyebrow{color:var(--warn);}
.callout p{font-size:var(--t-md);color:var(--ink-2);}
.todo{
display:inline-block;background:var(--alert-soft);color:var(--alert);
border:1px dashed color-mix(in srgb,var(--alert) 50%,transparent);
padding:1px 7px;border-radius:4px;font-family:var(--f-mono);font-size:.8em;font-weight:500;
}
/* .hex-deco — motif hexagonal repris de la géométrie du symbole.
Couche décorative, jamais porteuse d'information : à poser dans un parent
en position:relative, avec un contenu en z-index supérieur.
…
Le motif est un masque (aucune couleur n'y est encodée) : la teinte vient
de --hex-color, l'intensité de --hex-opacity. Jamais en vert. */
.hex-deco{
--hex-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
position:absolute;inset:0;pointer-events:none;z-index:0;
background:var(--hex-color,var(--brand));
opacity:var(--hex-opacity,.07);
-webkit-mask-image:var(--hex-pattern);
mask-image:var(--hex-pattern);
-webkit-mask-size:56px 100px;
mask-size:56px 100px;
}
.cta-block .hex-deco{--hex-color:var(--on-deep);--hex-opacity:.06;}
/* ============================================================ 15. Pied de page */
.site-footer{background:var(--surface);border-top:1px solid var(--rule);padding:var(--s7) 0 var(--s6);}
.site-footer .wrap{display:flex;flex-direction:column;gap:var(--s6);}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(auto-fit,minmax(150px,1fr));gap:var(--s6);}
.foot-col{display:flex;flex-direction:column;gap:var(--s3);}
.foot-col h2{
font-family:var(--f-mono);font-size:var(--t-cap);font-weight:500;
letter-spacing:var(--ls-cap);text-transform:uppercase;color:var(--ink-3);
}
.foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s2);}
.foot-col a{font-size:var(--t-md);color:var(--ink-2);text-decoration:none;}
.foot-col a:hover{color:var(--brand-ink);text-decoration:underline;}
.foot-col p{font-size:var(--t-md);color:var(--ink-2);}
.foot-bottom{
display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);justify-content:space-between;
padding-top:var(--s5);border-top:1px solid var(--rule);font-size:var(--t-sm);color:var(--ink-3);
}
.foot-bottom ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s4);padding:0;margin:0;}
.foot-bottom a{color:var(--ink-3);text-decoration:none;}
.foot-bottom a:hover{color:var(--brand-ink);text-decoration:underline;}
/* ================================================ 16. Animations d'apparition
.reveal et .reveal-group sont décrits d'un seul tenant en §22.7.
Rien ici : l'état masqué ne doit être posé QUE sous .js-reveal, classe que le
script d'apparition pose lui-même après s'être assuré qu'il peut la retirer.
La classe .js générique ne suffirait pas — un script en échec laisserait des
sections entières à opacité 0.
========================================================================== */
/* ================================================================ 17. Réactif */
@media (max-width:1080px){
.page-body .wrap{grid-template-columns:minmax(0,1fr);gap:var(--s6);}
.sidebar{position:static;flex-direction:row;flex-wrap:wrap;}
.sidebar .side-card{flex:1 1 280px;}
}
/* Le comportement réactif de l'en-tête (bascule en menu à tiroir sous 1150px)
est décrit d'un seul tenant en §20 — voir « en-tête et pied de page ». */
@media (max-width:760px){
.trust-bar{gap:var(--s3) var(--s5);}
}
@media (max-width:640px){
html{font-size:100%;}
.wrap{padding:0 var(--s4);}
section.band{padding:var(--s6) 0;}
.hero{padding:var(--s5) 0 var(--s6);}
.page-body{padding:var(--s5) 0 var(--s6);}
.cta-block{padding:var(--s5) var(--s4);}
.list-row{grid-template-columns:minmax(0,1fr);}
.list-row .meta{grid-column:1;grid-row:auto;justify-self:start;}
.foot-grid{grid-template-columns:1fr;gap:var(--s5);}
.btn-lg{width:100%;}
.hero .actions .btn,
.cta-block .actions .btn{width:100%;}
}
/* Barre d'action collante : uniquement sous 700px. */
@media (max-width:700px){
.sticky-cta{
position:fixed;left:0;right:0;bottom:0;z-index:60;
display:flex;gap:var(--s2);
padding:var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));
background:var(--surface);border-top:1px solid var(--rule);
box-shadow:var(--shadow-lg);
transform:translateY(110%);
transition:transform .25s ease;
}
.sticky-cta.is-visible{transform:none;}
.sticky-cta .btn{padding-left:var(--s3);padding-right:var(--s3);}
.site-footer{padding-bottom:calc(var(--s6) + 64px);}
}
/* ============================================================== 18. Impression */
@media print{
.site-header,.site-footer,.sidebar,.cta-block,.sticky-cta,.skip,.breadcrumb,.hex-deco{display:none;}
body{background:var(--paper);color:var(--paper-ink);font-size:11pt;}
.wrap{max-width:none;padding:0;}
a{color:var(--paper-ink);text-decoration:underline;}
.reveal,.reveal-group > *{opacity:1!important;transform:none!important;}
}
/* ========================================================= 19. Compatibilité
Le fragment du diagnostic (build/tools/) consomme encore les noms de
l'ancienne palette. Ces alias les redirigent vers le système actuel : ils se
résolvent sur :root, donc suivent automatiquement le thème. Aucune valeur
littérale ici. À supprimer quand le fragment aura été repris.
========================================================================== */
:root{
--accent:var(--brand-ink);
--accent-2:var(--brand);
--accent-soft:var(--brand-soft);
--brand-2:var(--brand);
--warm:var(--warn);
--warm-soft:var(--warn-soft);
}
/* ========================================================= 20. === conversion ===
Lot conversion. Ces règles viennent APRÈS le reste de la feuille : à
spécificité égale, elles tranchent. Aucune valeur littérale, aucun vert
ailleurs que sur un bouton d'action.
Sommaire
20.1 Hiérarchie des actions — un seul bouton vert par champ de vision
20.2 Bandeau de confiance (.trust-bar)
20.3 Bloc de conversion de bas de page (.cta-block)
20.4 Barre latérale efficace (.sidebar)
20.5 Barre d'action collante mobile (.sticky-cta)
========================================================================== */
/* --------------------------------------------------- 20.1 Hiérarchie des actions
Deux boutons de même poids se neutralisent : le visiteur hésite, donc il
ne clique pas. Le second appel à l'action garde la même hauteur que le
premier — l'alignement optique compte — mais perd son contraste : filet
léger, libellé en --ink-2, graisse réduite. Il ne redevient franc qu'au
survol, quand l'intention est déjà là. */
.btn-quiet{
background:transparent;
border-color:var(--rule);
color:var(--ink-2);
font-weight:500;
}
.btn-quiet:hover{
background:var(--brand-soft);
border-color:var(--brand);
color:var(--brand-ink);
}
/* Icône posée dans un bouton ou un lien d'action : elle suit la couleur du
texte (fill="currentColor") et ne porte jamais d'information seule. */
.ico{flex:0 0 auto;}
/* --------------------------------------------------- 20.2 Bandeau de confiance
Séparateurs : un filet fin dessiné dans la gouttière, jamais une bordure
collée au chiffre. Trois paliers : rangée libre au-dessus de 560px, trois
colonnes égales en dessous (les filets deviennent des bordures, les chiffres
perdent deux points), puis trois lignes empilées sous 380px, où « UTILISATEURS »
ne tient plus dans un tiers d'écran. Chiffres tabulaires aux trois paliers. */
.trust-bar li{position:relative;min-width:0;}
.trust-bar li + li::before{
content:"";position:absolute;
left:calc(var(--s7) / -2);
top:.2em;bottom:.2em;width:1px;
background:var(--rule-strong);
}
.trust-bar__n{white-space:nowrap;}
/* Ligne de méta d'article suivie du bandeau : un seul filet entre les deux. */
.trust + .trust-bar{border-top:0;padding-top:0;}
@media (max-width:760px){
.trust-bar li + li::before{left:calc(var(--s5) / -2);}
}
@media (max-width:560px){
.trust-bar{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:0;padding:var(--s3) 0;
}
.trust-bar li{padding:0 var(--s3);}
.trust-bar li:first-child{padding-left:0;}
.trust-bar li:last-child{padding-right:0;}
.trust-bar li + li{border-left:1px solid var(--rule);}
.trust-bar li + li::before{display:none;}
.trust-bar__n{font-size:var(--t-xl);}
.trust-bar__l{font-size:.74rem;letter-spacing:.05em;}
}
/* Sous 380px, trois colonnes ne tiennent plus sans couper « UTILISATEURS ».
Le bandeau passe en trois lignes — chiffre et libellé côte à côte, filets
horizontaux : c'est plus haut, mais rien n'est tronqué et tout se lit. */
@media (max-width:380px){
.trust-bar{grid-template-columns:minmax(0,1fr);padding:var(--s2) 0;}
.trust-bar li{flex-direction:row;align-items:baseline;gap:var(--s3);padding:var(--s2) 0;}
.trust-bar li + li{border-left:0;border-top:1px solid var(--rule);}
.trust-bar__n{font-size:var(--t-lg);min-width:4.4em;}
.trust-bar__l{font-size:.74rem;}
}
/* ------------------------------------------- 20.3 Bloc de conversion (bas de page)
Le titre promet un résultat, pas une réunion. Trois points de réassurance,
un seul bouton vert, le téléphone traité comme une vraie seconde porte, et
une sortie de secours vers le diagnostic pour qui n'est pas prêt à parler. */
.band-conv{border-bottom:0;}
/* Deux colonnes à partir de 900px : la promesse à gauche, l'action à droite,
séparées par un filet. En dessous, une seule colonne — la promesse d'abord,
le bouton ensuite : on ne demande jamais avant d'avoir dit pourquoi. */
.cta-say,
.cta-do{display:flex;flex-direction:column;gap:var(--s3);min-width:0;}
.cta-do{gap:var(--s4);}
@media (min-width:900px){
.cta-block{flex-direction:row;gap:var(--s7);align-items:flex-start;padding:var(--s7) var(--s6);}
.cta-say{flex:1 1 auto;}
.cta-do{
flex:0 0 clamp(318px,32%,380px);
padding-left:var(--s6);
border-left:1px solid color-mix(in srgb,var(--on-deep) 22%,transparent);
}
/* Le libellé complet du bouton ne doit pas se casser en deux lignes dans une
colonne étroite : on rend les flancs au texte plutôt que de le tronquer. */
.cta-do .btn{width:100%;padding-left:var(--s4);padding-right:var(--s4);}
}
.cta-logo{--logo-h:24px;opacity:.92;align-self:flex-start;margin-bottom:var(--s1);}
.cta-block h2{max-width:24ch;}
.cta-block .fine{line-height:1.5;}
/* Puces hexagonales : la géométrie du symbole, en blanc atténué. Jamais en
vert — le vert reste le repère exclusif du bouton. */
.cta-points{
list-style:none;margin:0;padding:0;
display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
font-size:var(--t-md);
}
.cta-points li{display:flex;align-items:center;gap:var(--s2);opacity:.92;}
.cta-points li::before{
content:"";width:7px;height:8px;flex:0 0 auto;
background:var(--on-deep);opacity:.6;
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
/* Téléphone : deuxième porte de sortie, pas une mention légale. Aligné sur la
hauteur du bouton (.btn-lg = 52px) pour que la ligne d'action reste droite. */
.cta-tel{
display:inline-flex;flex-direction:column;justify-content:center;gap:1px;
min-height:52px;padding:0 var(--s3);
border-radius:var(--r-sm);text-decoration:none;
}
.cta-tel__l{
font-family:var(--f-mono);font-size:var(--t-cap);letter-spacing:var(--ls-cap);
text-transform:uppercase;opacity:.75;
}
.cta-tel__n{
display:flex;align-items:center;gap:var(--s2);
font-family:var(--f-display);font-size:var(--t-xl);font-weight:700;
letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.cta-tel:hover .cta-tel__n{text-decoration:underline;text-underline-offset:3px;}
.cta-alt{font-size:var(--t-md);opacity:.92;}
.cta-alt a{text-decoration:underline;text-underline-offset:3px;}
.cta-alt a:hover{text-decoration-thickness:2px;}
@media (max-width:640px){
.cta-block .actions{gap:var(--s3);}
.cta-tel{padding:0;min-height:var(--tap);}
}
/* ------------------------------------------------------ 20.4 Barre latérale
Colonne d'action, pas dépotoir de liens : l'audit d'abord, avec sa durée et
sa promesse. Largeur fixée par la grille de .page-body (300px), min-width:0
partout : un mot long ne peut donc pas élargir la colonne ni pousser le
contenu rédactionnel. */
.sidebar,
.sidebar .side-card{min-width:0;}
.sidebar a{overflow-wrap:anywhere;}
.side-audit h2{max-width:18ch;}
.side-audit .eyebrow{font-variant-numeric:tabular-nums;}
.side-fine{font-size:var(--t-sm);color:var(--ink-2);}
.side-tel{
display:inline-flex;align-items:center;gap:var(--s2);
min-height:var(--tap);margin-top:calc(var(--s2) * -1);
font-family:var(--f-display);font-weight:700;font-size:var(--t-lg);
letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums;
color:var(--brand-ink);text-decoration:none;
}
.side-tel:hover{text-decoration:underline;text-underline-offset:3px;}
/* Écrans larges : la colonne reste collante. Si elle dépasse la hauteur de
fenêtre, elle défile pour elle-même plutôt que de laisser ses dernières
cartes hors d'atteinte. Le padding latéral compense l'écrêtage des ombres
provoqué par overflow, la marge négative le reprend sur la gouttière. */
@media (min-width:1081px){
.sidebar{
max-height:calc(100vh - var(--header-h) - var(--s5) * 2);
overflow-y:auto;overscroll-behavior:contain;
padding:var(--s2);margin:calc(var(--s2) * -1);
scrollbar-width:thin;
}
}
/* ------------------------------------------- 20.5 Barre d'action collante mobile
Enrichissement pur. Le script pose .js-sticky sur ; sans lui la barre
n'existe pas visuellement, n'occupe aucune place et ne masque rien — le
contenu reste intégralement lisible sans JavaScript.
Elle apparaît après 400px de défilement et se retire dès que le bloc de
conversion de bas de page entre à l'écran : deux fois la même demande dans
le même champ de vision, c'est une fois de trop. */
:root:not(.js-sticky) .sticky-cta{display:none;}
@media (max-width:700px){
/* Réserve de place : la barre est fixe, le pied de page doit pouvoir
défiler au-dessus d'elle. La réserve ne s'applique que si la barre existe,
et remplace celle posée par défaut sur le pied de page. */
.site-footer{padding-bottom:var(--s6);}
.js-sticky body{padding-bottom:calc(60px + env(safe-area-inset-bottom));}
/* Hors écran ET hors du parcours de tabulation visuel : visibility bascule
à la fin de la transition de sortie, jamais pendant. */
.js-sticky .sticky-cta{
visibility:hidden;
transition:transform .25s ease,visibility 0s linear .25s;
}
.js-sticky .sticky-cta.is-visible{
visibility:visible;
transition:transform .25s ease;
}
.sticky-cta .btn{font-size:var(--t-md);}
.sticky-cta .btn-ghost{background:var(--surface);}
}
@media (prefers-reduced-motion:reduce){
.js-sticky .sticky-cta,
.js-sticky .sticky-cta.is-visible{transition:none;}
}
/* =================================================== 21. === en-tête et pied de page ===
Identité visuelle (logo), en-tête collant, menu à tiroir sous 1150 px et
pied de page. Aucune couleur littérale : tout passe par les jetons, donc
par les trois blocs de thème du §1–2. Le vert reste réservé à l'action.
========================================================================== */
/* ---------------------------------------------------------- 21.1 Verrou de marque
Le logo est posé tel quel : jamais recoloré, déformé, pivoté ni recadré.
Seule la hauteur est pilotée (--logo-h), la largeur suit le ratio du fichier.
Les deux déclinaisons clair/sombre sont dans le HTML ; le CSS en masque une
via --logo-light / --logo-dark, définis dans les trois blocs de thème.
Aucun JavaScript n'intervient dans la bascule. */
.brand{
display:inline-flex;flex-direction:row;align-items:center;
gap:var(--s3);flex:0 0 auto;
text-decoration:none;color:var(--ink);
border-radius:var(--r-sm);
}
.brand:focus-visible{outline-offset:4px;}
/* Zone de respiration = hauteur du logo ÷ 2, soit 17px en en-tête : garantie
par le gap de .site-header .wrap (--s4, 18px). Ne pas la réduire. */
.site-header .wrap{gap:var(--s4);}
.brand--foot{align-self:flex-start;}
/* Le survol du verrou ne recolore rien : il ne fait qu'atténuer très légèrement
l'image, pour signaler que c'est un lien. */
.brand:hover .site-logo{opacity:.86;}
.site-logo{transition:opacity .15s ease;}
/* ------------------------------------------------------------- 21.2 En-tête
Ordre du DOM : logo, téléphone, bouton vert, bouton menu, tiroir. Le tiroir
suit immédiatement le bouton qui l'ouvre — la tabulation épouse donc le sens
de lecture, sur mobile comme au clavier.
Ordre visuel au grand format : logo | navigation | téléphone | bouton vert.
Les deux ordres divergent, `order` les réconcilie. */
.site-header .wrap{align-items:center;flex-wrap:nowrap;}
.site-header .brand{order:1;}
.site-header .nav{order:2;}
.site-header .header-tel{order:3;}
.site-header .header-cta{order:4;}
.site-header .nav-toggle{order:5;}
.header-tel{
gap:var(--s2);
margin-left:auto; /* pousse téléphone + bouton + menu à droite */
font-variant-numeric:tabular-nums;
}
.header-tel .ico{flex:0 0 auto;color:var(--brand-ink);}
.header-tel:hover .ico{color:inherit;}
/* Deux libellés pour le bouton d'action, un seul affiché à la fois : le libellé
masqué en display:none ne compte pas dans le nom accessible du lien. */
.header-cta__narrow{display:none;}
/* Bouton hamburger — visible uniquement quand le script a répondu (.js) et que
la navigation horizontale ne tient plus. */
.nav-toggle__bars{
position:relative;display:block;flex:0 0 auto;
width:18px;height:12px;
}
.nav-toggle__bars span{
position:absolute;left:0;right:0;height:2px;border-radius:2px;
background:currentColor;
transition:transform .2s ease,opacity .15s ease;
}
.nav-toggle__bars span:nth-child(1){top:0;}
.nav-toggle__bars span:nth-child(2){top:5px;}
.nav-toggle__bars span:nth-child(3){top:10px;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}
.nav-toggle[aria-expanded="true"]{background:var(--surface-2);border-color:var(--rule-strong);}
/* Le conteneur du tiroir est transparent au-dessus de 1150px : ses enfants
redeviennent des éléments de la barre d'en-tête. */
.nav-drawer{display:contents;}
.nav-drawer__actions{display:none;}
/* -------------------------------------------- 21.3 Sous 1150px : menu à tiroir
Deux comportements, dans cet ordre :
a) sans JavaScript — la navigation reste dans le flux, empilée sous la
barre d'en-tête, sous-menus dépliés. Rien n'est masqué, rien ne défile
horizontalement. Le bouton hamburger, lui, n'apparaît pas.
b) avec JavaScript (.js) — la même navigation devient un tiroir, refermé
par défaut, ouvert par le bouton hamburger.
========================================================================== */
@media (max-width:1150px){
.site-header .wrap{
flex-wrap:wrap;min-height:auto;
padding-top:var(--s3);padding-bottom:var(--s3);
gap:var(--s3);
row-gap:var(--s4);
}
.site-header .nav-toggle{order:4;}
/* Le téléphone entre en scène dès que la navigation quitte la barre : c'est
la deuxième porte de sortie du site, et la plus utilisée sur mobile. */
.header-tel{display:inline-flex;}
.site-header .header-tel{order:2;}
.site-header .header-cta{order:3;margin-left:0;}
.site-header .nav-drawer{display:block;order:5;width:100%;}
.nav-drawer__actions{display:none;}
/* a) repli sans JavaScript : navigation en pile, sous-menus dépliés.
Hiérarchie à deux niveaux : la rubrique porte le poids, ses pages sont
décalées derrière un filet. Rien ne se replie, rien ne défile de côté. */
.nav{width:100%;margin-left:0;display:block;}
.nav > ul{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;}
.nav > ul > li + li{border-top:1px solid var(--rule);}
.nav > ul > li > a{
padding:var(--s3) var(--s2);border-radius:var(--r-sm);
font-family:var(--f-display);font-size:var(--t-lg);font-weight:600;
letter-spacing:var(--ls-tight);color:var(--ink);
}
.nav .sub-menu{
position:static;display:flex;min-width:0;
background:none;border:none;border-left:1px solid var(--rule-strong);border-radius:0;
box-shadow:none;
margin:0 0 var(--s3) var(--s3);padding:0 0 0 var(--s3);gap:0;
}
.nav .sub-menu a{
white-space:normal;color:var(--ink-2);font-size:var(--t-md);
padding:var(--s2) var(--s2);min-height:var(--tap);display:flex;align-items:center;
}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu{display:flex;}
/* b) menu à tiroir dès que le script a répondu */
.js .nav-toggle{display:inline-flex;}
.js .site-header .nav-drawer{
display:flex;flex-direction:column;gap:var(--s5);
/* Positionné sur .site-header (sticky, donc bloc conteneur) : le tiroir se
cale exactement sous la barre, à toute largeur, sans nombre magique. */
position:absolute;top:100%;left:0;right:0;z-index:1;
background:var(--surface);
border-bottom:1px solid var(--rule);
box-shadow:var(--shadow-lg);
padding:var(--s5) var(--s5) var(--s6);
max-height:calc(100vh - var(--header-h-m));
max-height:calc(100dvh - var(--header-h-m));
overflow-y:auto;overscroll-behavior:contain;
visibility:hidden;opacity:0;transform:translateY(-6px);
transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
}
.js .nav-drawer.is-open{
visibility:visible;opacity:1;transform:none;
transition-delay:0s;
}
.js .nav-drawer__actions{display:flex;flex-direction:column;gap:var(--s3);order:1;}
.js .nav-drawer .nav{order:2;width:100%;}
/* Le tiroir est un calque : on fige le défilement de la page derrière lui. */
body.nav-est-ouvert{overflow:hidden;}
body.nav-est-ouvert .sticky-cta{display:none;}
}
/* Hauteur réelle de la barre sous 1150px : padding (2 × --s3) + hauteur d'une
zone cliquable. Elle sert à borner la hauteur du tiroir. */
.site-header{--header-h-m:calc(var(--tap) + 2 * var(--s3));}
/* Bloc d'action en tête du tiroir : le bouton vert d'abord, plein cadre, puis
le téléphone, puis l'engagement de rappel. C'est la première chose que voit
un visiteur qui ouvre le menu. */
.nav-drawer__actions{
padding-bottom:var(--s5);
border-bottom:1px solid var(--rule);
}
.nav-drawer__actions .btn{width:100%;}
.nav-drawer__tel{
display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
min-height:var(--tap);padding:0 var(--s3);
color:var(--ink);font-weight:600;font-size:var(--t-lg);text-decoration:none;
font-variant-numeric:tabular-nums;
border:1px solid var(--rule-strong);border-radius:var(--r-sm);
}
.nav-drawer__tel .ico{color:var(--brand-ink);}
.nav-drawer__tel:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink);}
.nav-drawer__fine{font-size:var(--t-sm);color:var(--ink-3);text-align:center;}
/* Sous 700px, le libellé long du bouton d'action laisse la place au libellé
court : logo, téléphone, bouton vert et menu tiennent alors sur une ligne
jusqu'à 320px de large. Le bouton vert reste visible en permanence. */
@media (max-width:700px){
.site-header .wrap{gap:var(--s2);}
.header-cta__wide{display:none;}
.header-cta__narrow{display:inline;}
.header-cta{padding-left:var(--s3);padding-right:var(--s3);}
.header-tel__num{display:none;} /* l'icône seule, nom accessible via aria-label */
.header-tel{padding:0;min-width:var(--tap);justify-content:center;}
.js .nav-drawer{padding-left:var(--s4);padding-right:var(--s4);}
}
/* Entre 640 et 1150px, le tiroir dispose de toute la largeur d'une tablette :
la navigation passe sur deux colonnes plutôt que d'étirer une liste unique
sur 900px, et le bloc d'action garde une largeur de bouton lisible. */
@media (min-width:641px) and (max-width:1150px){
.js .site-header .nav-drawer{padding-left:var(--s6);padding-right:var(--s6);}
.js .nav-drawer__actions{max-width:460px;}
/* Colonnes CSS plutôt qu'une grille : les rubriques s'écoulent d'une colonne
à l'autre sans creuser les trous qu'une grille laisse dès que deux
rubriques n'ont pas le même nombre de pages. */
.js .nav-drawer .nav > ul{display:block;columns:2;column-gap:var(--s7);}
.js .nav-drawer .nav > ul > li{break-inside:avoid;padding-bottom:var(--s4);}
.js .nav-drawer .nav > ul > li + li{border-top:none;}
}
/* Très petits écrans : le mot « Menu » cède la place, les trois barres restent.
Le nom accessible du bouton ne bouge pas, il vient de son aria-label. */
@media (max-width:380px){
.nav-toggle__label{display:none;}
.nav-toggle{padding-left:var(--s2);padding-right:var(--s2);}
}
/* Le tiroir n'existe qu'en dessous de 1150px : au-dessus, on s'assure qu'aucun
état résiduel ne subsiste après un redimensionnement. */
@media (min-width:1151px){
.nav-drawer.is-open{visibility:visible;opacity:1;}
body.nav-est-ouvert{overflow:auto;}
}
/* ------------------------------------------------------- 21.4 Pied de page
Trois niveaux de lecture : marque et coordonnées d'abord (ce dont on a
besoin pour appeler), plan du site ensuite, mentions administratives en
dernier, en corps réduit. */
.site-footer .wrap{gap:var(--s6);}
.foot-top{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:var(--s6) var(--s7);align-items:start;
}
.foot-brand{display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start;}
.foot-brand .brand--foot{order:0;}
.foot-baseline{
font-family:var(--f-display);font-size:var(--t-xl);line-height:var(--lh-snug);
letter-spacing:var(--ls-tight);color:var(--ink);max-width:26ch;text-wrap:balance;
}
.foot-social{
display:inline-flex;align-items:center;gap:var(--s2);
min-height:var(--tap);padding:0 var(--s3) 0 0;
color:var(--ink-2);font-size:var(--t-md);font-weight:600;text-decoration:none;
}
.foot-social .ico{color:var(--brand-ink);flex:0 0 auto;}
.foot-social:hover{color:var(--brand-ink);}
.foot-social:hover span{text-decoration:underline;}
.foot-contact{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start;}
.foot-contact h2{
font-family:var(--f-mono);font-size:var(--t-cap);font-weight:500;
letter-spacing:var(--ls-cap);text-transform:uppercase;color:var(--ink-3);
}
/* Le téléphone est la deuxième porte de sortie du site : il est traité comme
tel — grand, tabulaire, avec une zone cliquable pleine. Il reste bleu :
le vert appartient au bouton de prise de rendez-vous. */
.foot-phone{
display:inline-flex;align-items:center;gap:var(--s2);
min-height:var(--tap);
font-family:var(--f-display);font-size:var(--t-2xl);font-weight:700;
letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums;
color:var(--brand-ink);text-decoration:none;
}
.foot-phone .ico{width:22px;height:22px;flex:0 0 auto;}
.foot-phone:hover{color:var(--brand);text-decoration:underline;}
.foot-hours{font-size:var(--t-md);color:var(--ink-2);}
.foot-hours strong{color:var(--ink);}
.foot-mail{
display:inline-flex;align-items:center;gap:var(--s2);
min-height:var(--tap);
font-size:var(--t-md);font-weight:600;color:var(--ink-2);text-decoration:none;
}
.foot-mail .ico{color:var(--brand-ink);flex:0 0 auto;}
.foot-mail:hover{color:var(--brand-ink);}
.foot-mail:hover span{text-decoration:underline;}
.site-footer address{
font-style:normal;font-size:var(--t-md);line-height:var(--lh-body);color:var(--ink-2);
}
/* Plan du site : cinq colonnes égales, titres de colonne cliquables. */
.foot-grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
gap:var(--s5) var(--s4);
padding-top:var(--s6);border-top:1px solid var(--rule);
}
/* font-size:inherit est nécessaire : la règle générique .foot-col a (§15) est
plus spécifique que .foot-col h2 pour la taille et grossirait le titre. */
.foot-col h2 a{font-size:inherit;color:inherit;text-decoration:none;}
.foot-col h2 a:hover{color:var(--brand-ink);text-decoration:underline;}
.foot-col a{line-height:1.45;}
.foot-bottom{align-items:baseline;}
.foot-bottom p{color:inherit;}
.foot-ident{display:block;margin-top:var(--s1);}
@media (max-width:900px){
.foot-top{grid-template-columns:minmax(0,1fr);gap:var(--s6);}
}
@media (max-width:640px){
.site-footer .wrap{gap:var(--s6);}
.foot-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s5) var(--s4);}
.foot-baseline{font-size:var(--t-lg);}
.foot-phone{font-size:var(--t-xl);}
}
@media print{
.nav-drawer,.nav-toggle{display:none;}
}
/* ========================================================= 22. === formulaires ===
Pages de conversion : formulaire de devis (/contact/) et bloc de
réservation (/prendre-rendez-vous/). Ces règles complètent le §13, qui
porte les fondations d'un champ (.form-field, .form-msg, .form-consent) ;
on ne redéfinit ici que ce qui est propre aux deux blocs.
Aucune valeur littérale : tout passe par les jetons du §1–2, donc par les
trois blocs de thème. Le vert (--cta) reste réservé aux deux seuls boutons
d'action de ces pages : « Demander un devis » et « Choisir un créneau ».
Sommaire
22.1 Zones cliquables et focus — le socle accessible
22.2 Formulaire de devis : gabarit et carte
22.3 Champs, erreurs, consentement
22.4 Envoi, confirmation, repli sans JavaScript
22.5 Colonne de réassurance
22.6 Bloc de réservation Microsoft Bookings
========================================================================== */
/* ------------------------------------------- 22.1 Zones cliquables et focus
44 px est un plancher, pas une cible : un doigt ne vise pas, il pose. Les
contrôles héritent déjà de min-height:var(--tap) au §13 ; restent les cases
à cocher et les liens en ligne, que les navigateurs dessinent à 13 px. */
.convform input[type="checkbox"]{
width:22px;height:22px;min-height:0;flex:0 0 auto;
accent-color:var(--brand);cursor:pointer;
}
/* Le focus est l'affordance principale au clavier : il ne doit jamais être
rogné par le débordement d'un parent. Les cartes de ce lot laissent donc
respirer l'anneau plutôt que de couper (pas d'overflow:hidden). */
.convform :focus-visible,
.rdv :focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
/* -------------------------------------------- 22.2 Formulaire de devis
Deux colonnes au-dessus de 900 px : le formulaire, puis une colonne de
réassurance étroite qui porte le téléphone. En dessous, une seule colonne
et la réassurance passe SOUS le formulaire — sur mobile, tout ce qui
s'interpose entre le titre et le premier champ est du retard pris. */
.convform{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:var(--s6);
align-items:start;
padding:var(--s6);
background:var(--surface);
border:1px solid var(--rule);
border-radius:var(--r-lg);
box-shadow:var(--shadow);
scroll-margin-top:calc(var(--header-h) + var(--s5));
}
@media (min-width:900px){
.convform{grid-template-columns:minmax(0,1fr) 290px;gap:var(--s7);}
}
/* .form et .form-msg (§13) posent display:flex — une règle d'auteur bat la
feuille du navigateur, et l'attribut `hidden` cesse alors de masquer quoi
que ce soit. On lui rend son effet, explicitement, sur les deux blocs qui
s'échangent la place : le formulaire et sa confirmation. */
.convform__form[hidden],
.convform__done[hidden]{display:none;}
.convform__main{display:flex;flex-direction:column;gap:var(--s5);min-width:0;}
.convform__head{display:flex;flex-direction:column;gap:var(--s2);}
.convform__head h2{font-size:var(--t-2xl);}
.convform__head p{color:var(--ink-2);max-width:52ch;}
/* .form impose max-width:560px au §13 : conservé, c'est la largeur au-delà de
laquelle un champ devient pénible à parcourir de l'œil. */
.convform__form{gap:var(--s5);}
.convform__legend{font-size:var(--t-sm);color:var(--ink-3);}
/* --------------------------------------- 22.3 Champs, erreurs, consentement
Le message d'erreur vit dans le DOM en permanence, vide, et disparaît par
:empty. Rien n'est créé ni détruit à la validation : aria-describedby posé
une fois dans le HTML reste valide, et le lecteur d'écran lit le texte dès
qu'il est écrit. */
/* Le filet du §13 (--rule-strong) ne donne que 1,7:1 sur --surface : sous le
seuil de 3:1 qu'un composant d'interface doit tenir (WCAG 1.4.11). Sur un
formulaire, ce filet EST le champ — c'est lui qui dit où écrire. Il passe
donc en --ink-3 : 4,8:1 en clair, 5,4:1 en sombre, sans toucher aux jetons.
Le :not(.is-error) est nécessaire, pas cosmétique : à spécificité égale,
une règle posée ici l'emporterait sur le filet rouge du §13, qui vient
plus haut dans le fichier. Le champ fautif garde donc sa couleur d'alerte. */
.convform .form-field:not(.is-error) input,
.convform .form-field:not(.is-error) select,
.convform .form-field:not(.is-error) textarea{border-color:var(--ink-3);}
.convform .form-field:not(.is-error) input:hover,
.convform .form-field:not(.is-error) select:hover,
.convform .form-field:not(.is-error) textarea:hover{border-color:var(--brand);}
.convform .form-field__error:empty{display:none;}
/* Le message est précédé d'un signe : la couleur seule ne porte jamais une
information (WCAG 1.4.1). */
.convform .form-field__error::before{content:"⚠ ";}
.form-field__opt{
font-family:var(--f-mono);font-size:var(--t-cap);font-weight:400;
letter-spacing:var(--ls-cap);text-transform:uppercase;color:var(--ink-3);
margin-left:var(--s2);
}
/* Consentement : une boîte à part entière, cliquable sur toute sa surface,
et non une ligne de petit texte qu'on coche à l'aveugle. */
.convform .form-consent{
align-items:flex-start;gap:var(--s3);
min-height:var(--tap);
padding:var(--s3) var(--s4);
border:1px solid var(--rule);border-radius:var(--r);
background:var(--surface);
transition:border-color .15s ease,background .15s ease;
}
.convform .form-consent:hover{border-color:var(--brand);background:var(--brand-soft);}
.convform .form-consent:focus-within{border-color:var(--brand);}
.convform .form-consent label{
font-size:var(--t-sm);line-height:1.5;color:var(--ink-2);
cursor:pointer;font-weight:400;
}
.convform .form-field--consent.is-error .form-consent{
border-color:var(--alert);background:var(--alert-soft);
}
/* --ink-2 et non --ink-3 : sur --alert-soft, --ink-3 ne passe pas AA. */
.convform .form-field--consent.is-error .form-consent label{color:var(--ink-2);}
.convform__policy{font-size:var(--t-sm);}
.convform__policy a{font-weight:500;}
/* ------------------------- 22.4 Envoi, confirmation, repli sans JavaScript */
.convform__submit{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start;}
.convform__submit .btn{min-width:min(100%,240px);}
.convform__fine{font-size:var(--t-sm);line-height:1.5;color:var(--ink-2);}
.convform__fine strong{color:var(--ink);}
/* Bandeau d'annonce (aria-live). Neutre pendant l'envoi, rouge quand des
champs restent à corriger : le visiteur sait d'un coup d'œil si sa demande
est partie ou non, sans avoir à relire tout le formulaire. */
.convform__alert{
font-size:var(--t-md);font-weight:600;color:var(--ink);
border-left:3px solid var(--brand);background:var(--surface-2);
padding:var(--s3) var(--s4);border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.convform__alert:empty{display:none;}
.convform__alert--err{border-left-color:var(--alert);background:var(--alert-soft);}
/* Écran de confirmation : il dit ce qui se passe ensuite ET sous quel délai.
Il reçoit le focus à l'envoi, d'où l'anneau explicite. */
.convform__done{gap:var(--s4);scroll-margin-top:calc(var(--header-h) + var(--s5));}
.convform__done .eyebrow{color:var(--ink-2);}
.convform__done h3{font-size:var(--t-xl);color:var(--ink);}
.convform__done p{color:var(--ink-2);}
.convform__done strong{color:var(--ink);}
.convform__done:focus-visible{outline:2px solid var(--brand);outline-offset:4px;}
.convform__next{
display:flex;flex-direction:column;gap:var(--s3);
margin:0;padding:0;list-style:none;counter-reset:etape;
}
.convform__next li{
display:grid;grid-template-columns:26px minmax(0,1fr);gap:var(--s3);
align-items:start;font-size:var(--t-md);color:var(--ink-2);
}
.convform__next li::before{
counter-increment:etape;content:counter(etape);
font-family:var(--f-mono);font-size:var(--t-cap);font-weight:500;
width:26px;height:26px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:var(--brand-solid-ink);background:var(--brand-solid);
}
.convform__done-cta{padding-top:var(--s1);}
/* Repli sans JavaScript. Le formulaire ne poste nulle part : l'afficher sans
script serait promettre une action qui n'arrivera pas. Il reste donc masqué
tant que ne porte pas .js (posée dans le , avant le premier
rendu : aucun clignotement), et le
