/* Site prototype « L'enfilade » (phase 2, 2026-10-07), tiré de la maquette de référence B « La Galerie ».
Quatre pièces en enfilade : Accueil, Comment nous travaillons, Nos engagements, Montrez-nous le bien.
Couleurs et polices :
tokens.css uniquement. Courbe d'arrivée unique, durées de 150 à 400 ms. */
:root {
--arrivee: cubic-bezier(0.2, 0.8, 0.2, 1); /* ce qui arrive et se pose */
--depart: cubic-bezier(0.4, 0, 1, 1); /* ce qui s'en va */
--hauteur-fil: 60px;
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
/* le focus et les ancres ne passent jamais sous le fil */
scroll-padding-top: calc(var(--hauteur-fil) + 16px);
}
body {
margin: 0;
background: var(--grege);
color: var(--encre);
font-family: var(--texte);
font-size: 18px;
line-height: 1.6;
text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titre); font-weight: 500; margin: 0; color: var(--encre); letter-spacing: -0.005em; }
p { margin: 0; }
h1, h2 { text-wrap: balance; }
.insecable { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--ancre); outline-offset: 3px; }
.sur-ancre :focus-visible { outline-color: var(--grege); }
/* Cadre de page */
.cadre { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 40px; }
/* En-tête : le point fixe d'une pièce à l'autre */
.entete { padding: 22px 0 10px; view-transition-name: entete; }
.entete .cadre { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: block; flex: none; }
.logo img { height: 96px; width: auto; }
.nav { display: flex; align-items: center; gap: 30px; font-size: 16px; }
.nav a { position: relative; text-decoration: none; padding: 12px 0; min-height: 44px; display: inline-flex; align-items: center; color: var(--encre-douce); transition: color 150ms ease; }
.nav a:hover { color: var(--encre); }
.nav a[aria-current="page"] { color: var(--encre); }
/* Le trait sous la pièce courante : un élément propre, pour qu'il glisse d'une entrée à l'autre en changeant de page */
.trait { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--encre); view-transition-name: trait-nav; pointer-events: none; }
.nav .action .trait { bottom: -7px; }
/* Bouton d'action : le seul remplissage en vert d'eau de l'interface */
.action {
display: inline-flex; align-items: center; justify-content: center;
min-height: 48px; padding: 0 24px;
background: var(--signature); color: var(--encre);
font-family: var(--texte); font-weight: 600; font-size: 16px; letter-spacing: 0.01em;
text-decoration: none; border: 0; border-radius: 2px; cursor: pointer;
transition: background-color 150ms ease, color 150ms ease, transform 80ms ease;
}
.action:hover { background: var(--ancre); color: var(--grege); }
/* retour au toucher dès que le doigt se pose (80 ms), pas au relâcher */
.action:active { background: var(--ancre-profond); color: var(--grege); transform: scale(0.98); }
.nav .action { color: var(--encre); padding: 0 20px; }
.nav .action:hover { color: var(--grege); }
.sur-ancre .action:hover { background: var(--grege); color: var(--ancre); }
/* Le fil : le chapitre en cours et l'action, une fois l'en-tête dépassé ; son filet bas se remplit avec la lecture */
.fil {
position: fixed; top: 0; left: 0; right: 0; z-index: 20;
background: var(--fond); border-bottom: 1px solid var(--filet);
transform: translateY(-100%); transition: transform 250ms var(--arrivee);
}
.fil.visible { transform: none; }
.fil .cadre { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--hauteur-fil); }
.fil-repere { font-size: 15px; color: var(--sourdine); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fil-repere b { font-weight: 600; color: var(--signature-texte); margin: 0 6px; }
.fil-repere span { color: var(--encre); }
.fil .action { min-height: 44px; padding: 0 18px; font-size: 15px; flex: none; }
.fil-tel { flex: none; font-family: var(--titre); font-size: 26px; line-height: 1; text-decoration: none; font-variant-numeric: lining-nums; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.fil-tel:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@supports (animation-timeline: scroll()) {
.fil::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
background: var(--signature-texte); transform-origin: 0 50%; transform: scaleX(0);
animation: lecture linear both; animation-timeline: scroll(root block);
}
@keyframes lecture { to { transform: scaleX(1); } }
}
/* Libellés */
.surtitre { font-family: var(--texte); font-size: 14px; font-weight: 500; line-height: 1.6; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sourdine); }
.a-revalider {
display: inline-block; vertical-align: middle;
font-family: var(--texte); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.04em; font-style: normal; text-transform: none;
color: var(--sourdine); border: 1px solid var(--filet); padding: 4px 7px 5px; border-radius: 2px; margin-left: 8px;
}
.a-ecrire { border-style: dashed; border-color: var(--sourdine); margin-left: 0; }
/* Couverture */
.couverture { padding: 28px 0 88px; }
.couverture .cadre { display: grid; grid-template-columns: minmax(0, 3.8fr) minmax(0, 8.2fr); gap: 56px; align-items: center; }
.couverture h1 { font-size: clamp(40px, 4.6vw, 68px); line-height: 1.04; margin: 18px 0 22px; }
.couverture .devise { font-family: var(--titre); font-style: italic; font-size: 30px; line-height: 1.2; color: var(--encre-douce); margin-bottom: 16px; }
.couverture .prise { max-width: 30rem; color: var(--encre-douce); }
.couverture .zones { font-size: 15px; color: var(--sourdine); margin-top: 18px; letter-spacing: 0.02em; }
.couverture .action { margin-top: 30px; }
.couverture figure { margin: 0; }
@media (min-width: 761px) { .couverture .surtitre { white-space: nowrap; } }
/* Sections */
.section { padding: 96px 0; }
.section-entete { max-width: 46rem; margin-bottom: 56px; }
.section-entete h2 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.08; margin-top: 14px; }
.section-entete p { margin-top: 20px; color: var(--encre-douce); max-width: 40rem; }
.filet-haut { border-top: 1px solid var(--filet); }
/* Les preuves, tenues comme un devis : une ligne par chiffre */
.preuves-tete { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; }
.preuves .section-entete { margin-bottom: 0; }
.preuves .date { font-size: 15px; color: var(--sourdine); margin-top: 28px; max-width: 22rem; line-height: 1.55; }
.chiffres { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.chiffres li { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; padding: 22px 0 24px; border-bottom: 1px solid var(--filet); align-items: baseline; }
.chiffre { font-variant-numeric: lining-nums; font-family: var(--titre); font-size: 54px; line-height: 1; font-weight: 500; white-space: nowrap; }
.chiffre-texte { font-size: 17px; color: var(--encre-douce); }
.chiffre-texte strong { display: block; color: var(--encre); font-weight: 600; margin-bottom: 4px; }
.chiffre-texte .a-revalider { margin-left: 0; margin-top: 8px; }
/* Un chiffre qu'on peut vérifier plus loin : souligné fin, comme une référence de devis */
.renvoi { text-decoration: underline; text-decoration-color: var(--sourdine); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-color 150ms ease; }
.renvoi:hover { text-decoration-color: var(--encre); }
/* Le parcours : le sommaire des six étapes, puis une scène par étape, côtés alternés */
.parcours { padding-bottom: 40px; }
.parcours .section-entete { max-width: none; }
.parcours .section-entete h2 { max-width: 46rem; }
.sommaire { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 28px; border-top: 1px solid var(--filet); }
.sommaire a { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding-top: 12px; text-decoration: none; font-size: 16px; color: var(--encre-douce); transition: color 150ms ease; }
.sommaire a:hover { color: var(--encre); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.sommaire b { font-weight: 600; font-size: 15px; color: var(--signature-texte); font-variant-numeric: lining-nums; }
.etapes { list-style: none; margin: 0; padding: 0; }
.etape { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; padding: 28px 0; scroll-margin-top: calc(var(--hauteur-fil) + 8px); }
.etape + .etape { margin-top: -96px; }
.etape figure { margin: 0; }
.etape figure img { width: 100%; max-height: 600px; object-fit: contain; }
.etape:nth-child(even) figure { order: 2; }
.etape:nth-child(even) .legende { order: 1; justify-self: end; }
.legende { max-width: 27rem; }
.etape-num { font-size: 15px; font-weight: 600; color: var(--signature-texte); letter-spacing: 0.08em; }
.etape h3, .etape .h3 { font-size: clamp(34px, 3.2vw, 46px); line-height: 1.08; margin: 10px 0 6px; }
.outil { font-family: var(--titre); font-style: italic; font-size: 24px; color: var(--encre-douce); margin-bottom: 16px; }
.legende p:not(.etape-num):not(.outil) { color: var(--encre-douce); }
.legende .memoire { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--filet); }
/* L'étape du chantier en fresque : pleine largeur, la légende dessous */
.etape--fresque, .etape--fresque:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 24px; }
.etape--fresque figure, .etape--fresque:nth-child(even) figure { order: 0; }
.etape--fresque .legende, .etape--fresque:nth-child(even) .legende { order: 1; justify-self: start; max-width: 36em; }
.etape--fresque figure img { max-height: none; }
.etape--fresque + .etape { margin-top: 24px; }
/* Une seule responsabilité : la charge épargnée */
.responsabilite .cadre { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.responsabilite .section-entete { margin-bottom: 0; }
.responsabilite .corps p + p { margin-top: 18px; }
.responsabilite .corps p { color: var(--encre-douce); max-width: 38rem; }
.devise-fin { font-family: var(--titre); font-style: italic; font-size: 30px; line-height: 1.2; color: var(--encre) !important; margin-top: 28px !important; }
/* La porte : le titre de la pièce suivante, qui devient son titre en y entrant */
.porte { padding: 72px 0 80px; }
.porte .cadre { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: baseline; }
.porte-titre a { text-decoration: underline; text-decoration-color: var(--sourdine); text-decoration-thickness: 1px; text-underline-offset: 10px; transition: text-decoration-color 150ms ease; }
.porte-titre a:hover { text-decoration-color: var(--encre); }
/* Nos engagements : ouverture, puis ligne à ligne, comme un devis */
.ouverture .cadre { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; }
.ouverture .prise { max-width: 32rem; }
.engagements { padding-top: 72px; }
.liste-engagements { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet); }
.liste-engagements li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; padding: 26px 0 28px; border-bottom: 1px solid var(--filet); align-items: baseline; }
.liste-engagements .h3 { font-size: 30px; line-height: 1.15; }
.liste-engagements p { color: var(--encre-douce); max-width: 40rem; }
.decennale-section { padding-top: 24px; }
.decennale { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; }
.decennale .surtitre { padding-top: 10px; }
.decennale .hors { margin-top: 18px; color: var(--encre-douce); }
/* Neuf activités en icônes gravées, posées sur une même ligne de base */
.activites-icones { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.activites-icones li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.activites-icones .ico { height: 84px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.activites-icones .ico img { max-height: 84px; max-width: 112px; width: auto; height: auto; object-fit: contain; }
.activites-icones a { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; min-height: 44px; text-decoration: none; }
.activites-icones a:hover span:last-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.activites-icones a > span:last-child { font-family: var(--titre); font-size: 22px; line-height: 1.2; color: var(--encre); text-wrap: balance; }
/* Les dirigeants, puis le dossier : chaque partie ouverte par un filet fin */
.garants { margin-top: 88px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; scroll-margin-top: calc(var(--hauteur-fil) + 8px); }
.garants-dirigeants, .garants-dossier { grid-column: 2; border-top: 1px solid var(--filet); }
.garants-dirigeants { padding-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 290px)); gap: 40px; justify-content: start; }
.garants-dossier { margin-top: 48px; padding-top: 32px; }
.garants-dossier .h3 { font-size: clamp(26px, 2.3vw, 32px); line-height: 1.15; color: var(--ancre); margin: 0 0 12px; }
.garants-dossier p { color: var(--encre-douce); max-width: 40em; }
.garants-dirigeants figure { margin: 0; }
.garants-dirigeants img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.garants-dirigeants figcaption { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.nom { font-family: var(--titre); font-size: 24px; white-space: nowrap; line-height: 1.2; color: var(--encre); }
.role { font-size: 15px; color: var(--sourdine); letter-spacing: 0.02em; }
/* Comment on se rencontre : la distribution, trois figures sur une même ligne de sol */
.distribution { display: flex; align-items: flex-end; justify-content: space-between; gap: 2.5%; }
/* une figure peut être un ![]()
seul ou un (affiché en « contents ») : on compte les enfants de la figure */
.distribution > :nth-child(1) img, .distribution > img:nth-child(1) { width: 29%; }
.distribution > :nth-child(2) img, .distribution > img:nth-child(2) { width: 27.5%; }
.distribution > :nth-child(3) img, .distribution > img:nth-child(3) { width: 38.5%; }
/* Le rappel du contact, sur fond d'ancre */
.rappel { background: var(--ancre); color: var(--grege); padding: 88px 0; }
.rappel .cadre { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; }
.rappel h2 { color: var(--grege); margin-bottom: 22px; }
.rappel p { color: var(--grege); max-width: 38rem; }
.rappel .pieces { font-family: var(--titre); font-size: 27px; line-height: 1.35; }
.rappel .envoi { margin-top: 18px; }
.rappel .envoi a { color: var(--grege); }
.rappel .a-revalider { color: var(--grege); border-color: rgba(244, 241, 234, 0.4); }
.rappel .rdv { border-left: 1px solid rgba(244, 241, 234, 0.35); padding-left: 32px; }
.rappel .rdv .action { margin-top: 26px; }
/* Pied de page */
.pied { background: var(--ancre-profond); color: var(--grege); padding: 56px 0 48px; font-size: 15px; }
.pied .cadre { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 48px; align-items: end; }
.pied img { height: 92px; width: auto; }
.pied p { color: var(--grege); }
.pied .mention { max-width: 34rem; line-height: 1.6; }
.pied nav { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.pied nav a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; justify-content: flex-end; }
.pied nav a:hover, .pied nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.pied nav a[href^="tel:"] { font-family: var(--titre); font-size: 24px; font-variant-numeric: lining-nums; }
/* Montrez-nous le bien : un en-tête court, puis le formulaire guidé, une question par écran */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a[href^="tel:"] { white-space: nowrap; }
.telephone { font-variant-numeric: lining-nums; font-family: var(--titre); font-size: 40px; line-height: 1.1; text-decoration: none; display: inline-flex; align-items: center; margin-top: 22px; min-height: 44px; }
.telephone:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.guide-tete { padding: 16px 0 40px; }
.guide-tete .cadre { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; }
.guide-tete h1 { margin: 0; }
.appel { border-left: 1px solid var(--filet); padding-left: 32px; }
.appel-question { font-size: 15px; color: var(--sourdine); }
.appel .telephone { margin-top: 2px; }
.appel-courriel { font-size: 15px; color: var(--encre-douce); margin-top: 4px; }
.guide-section { padding: 36px 0 96px; }
.guide-cadre { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 72px; align-items: start; }
/* La progression : les cinq pas, ceux déjà faits rouvrables, et un filet qui se remplit */
.progression { grid-column: 1 / -1; margin-bottom: 36px; }
.progression-compte { display: none; font-size: 15px; color: var(--sourdine); }
.progression-compte b { color: var(--signature-texte); font-weight: 600; margin-right: 6px; }
.progression-pas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.progression-pas button { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 10px 0; background: none; border: 0; font: inherit; font-size: 15px; color: var(--sourdine); cursor: default; }
.progression-pas b { font-weight: 600; color: var(--signature-texte); font-variant-numeric: lining-nums; }
.progression-pas .fait button { color: var(--encre-douce); cursor: pointer; }
.progression-pas .fait button:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.progression-pas [aria-current="step"] { color: var(--encre); }
.progression-filet { display: block; position: relative; height: 1px; background: var(--filet); margin-top: 4px; }
.progression-filet span { position: absolute; inset: 0; background: var(--signature-texte); transform-origin: 0 50%; transform: scaleX(var(--avance, 0.2)); transition: transform 280ms var(--arrivee); }
/* Un pas : son titre, sa question, ses choix. Sans script, les pas se suivent, séparés d'un filet. */
.pas + .pas { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--filet); }
.guide-actif .pas + .pas { margin-top: 0; padding-top: 0; border-top: 0; }
.pas[hidden] { display: none; }
.pas-titre { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.08; }
.pas-titre:focus { outline: none; }
.pas-question { margin: 10px 0 28px; color: var(--encre-douce); }
.preselection { margin: -14px 0 24px; font-weight: 600; color: var(--signature-texte); }
.preselection[hidden] { display: none; }
/* Les corps d'état : la gravure au centre, un cadre fin, une coche ; cible entière cliquable */
.carte { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; min-height: 168px; padding: 30px 14px 18px; border: 1px solid var(--filet); border-radius: 2px; text-align: center; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; }
.carte input, .pastille input, .depot input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.carte:hover { border-color: var(--sourdine); }
.carte:has(input:checked) { border-color: var(--ancre); box-shadow: inset 0 0 0 1px var(--ancre); background: var(--fond); }
.carte:has(input:focus-visible), .pastille:has(input:focus-visible), .depot:has(input:focus-visible) { outline: 2px solid var(--ancre); outline-offset: 3px; }
.coche { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border: 1px solid var(--sourdine); border-radius: 50%; transition: background-color 150ms ease, border-color 150ms ease; }
.coche::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--encre); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 150ms var(--arrivee); }
:checked ~ .coche { background: var(--signature); border-color: var(--ancre); }
:checked ~ .coche::after { transform: rotate(45deg) scale(1); }
.carte .ico { height: 72px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.carte .ico img { max-height: 72px; max-width: 100px; width: auto; height: auto; }
.carte-nom { font-family: var(--titre); font-size: 22px; line-height: 1.2; color: var(--encre); text-wrap: balance; }
.carte--complete { flex-direction: row; justify-content: flex-start; min-height: 64px; padding: 14px 60px 14px 22px; margin-bottom: 20px; text-align: left; }
.carte--complete .coche { top: 50%; margin-top: -11px; right: 20px; }
.cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.preciser { margin-top: 24px; }
.preciser summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--encre-douce); font-size: 16px; text-decoration: underline; text-decoration-color: var(--sourdine); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.preciser textarea { margin-top: 10px; }
/* Les champs */
.champ label { display: block; font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.champ + .champ, .champs-paire { margin-top: 22px; }
.champ input, .champ textarea, .preciser textarea {
width: 100%; font: inherit; font-size: 17px; color: var(--encre);
background: var(--fond); border: 1px solid var(--filet); border-bottom-color: var(--sourdine);
border-radius: 2px; padding: 12px 14px; min-height: 48px;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.preciser textarea { min-height: 110px; resize: vertical; }
.champ input:focus-visible, .preciser textarea:focus-visible { outline: 2px solid var(--ancre); outline-offset: 1px; }
.champ--court input { max-width: 220px; }
.champs-paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.champs-paire .champ + .champ { margin-top: 0; }
/* L'erreur : aucune couleur hors palette ; le filet bas s'épaissit en encre et une phrase courte dit quoi faire */
.erreur { margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--ancre); font-size: 16px; font-weight: 600; color: var(--encre); }
.erreur[hidden] { display: none; }
.champ.en-erreur input { border-bottom-color: var(--ancre); box-shadow: inset 0 -2px 0 var(--ancre); }
.hors-zone { margin-top: 24px; padding: 14px 20px; border-left: 2px solid var(--signature); background: var(--fond); max-width: 36rem; }
.hors-zone p { color: var(--encre-douce); font-size: 17px; }
.hors-zone p + p { margin-top: 6px; }
/* Les photos : une zone de dépôt, les vignettes, et le choix de les envoyer plus tard */
.depot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 44px 24px; border: 1px dashed var(--sourdine); border-radius: 2px; text-align: center; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
.depot:hover, .depot.survol { border-color: var(--ancre); background: var(--fond); }
.depot-texte { font-family: var(--titre); font-size: 26px; line-height: 1.2; }
.depot-texte--mobile { display: none; }
.depot-bouton { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--encre); border-radius: 2px; font-size: 15px; font-weight: 600; }
.vignettes { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; }
.vignettes:empty { display: none; }
.vignettes li { display: flex; flex-direction: column; min-width: 0; }
.vignette-img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--papier); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--sourdine); }
.vignette-nom { margin-top: 6px; font-size: 13px; color: var(--sourdine); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vignettes button, .modifier { align-self: flex-start; min-height: 44px; padding: 0; background: none; border: 0; font: inherit; font-size: 15px; color: var(--encre-douce); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
/* Les pastilles : un choix par toucher, la coche dite par la forme et par le cadre, pas par la couleur seule */
.pastilles { display: flex; flex-wrap: wrap; gap: 12px; }
.pastille { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px 0 16px; border: 1px solid var(--filet); border-radius: 2px; cursor: pointer; font-size: 17px; transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; }
.pastille span { display: inline-flex; align-items: center; gap: 12px; }
.pastille span::before { content: ""; flex: none; width: 16px; height: 16px; border: 1px solid var(--sourdine); border-radius: 50%; transition: background-color 150ms ease, box-shadow 150ms ease; }
.pastille input[type="checkbox"] + span::before { border-radius: 2px; }
.pastille:hover { border-color: var(--sourdine); }
.pastille:has(input:checked) { border-color: var(--ancre); box-shadow: inset 0 0 0 1px var(--ancre); background: var(--fond); }
.pastille input:checked + span::before { background: var(--signature); border-color: var(--ancre); box-shadow: inset 0 0 0 3px var(--fond); }
.pastille--seule { margin-top: 20px; }
.champ-date { margin-top: 24px; }
.champ-date[hidden] { display: none; }
/* Vous, la mention à écrire, puis le récapitulatif modifiable d'un geste */
.mention-donnees { margin-top: 24px; }
.recap { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--encre); }
.recap[hidden] { display: none; }
.recap-titre { font-family: var(--titre); font-weight: 500; font-size: 28px; line-height: 1.2; margin-bottom: 6px; }
.recap-liste { margin: 0; }
.recap-liste > div { display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--filet); align-items: baseline; }
.recap-liste dt { font-size: 15px; color: var(--sourdine); }
.recap-liste dd { margin: 0; color: var(--encre); overflow-wrap: anywhere; }
.recap-liste--accuse > div { grid-template-columns: 210px minmax(0, 1fr); }
.recap-precision { display: block; margin-top: 4px; color: var(--encre-douce); font-size: 16px; }
/* Retour et Continuer, toujours au même endroit */
.guide-nav { display: flex; align-items: center; gap: 16px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--filet); }
.guide-nav .continuer { margin-left: auto; min-width: 180px; }
.retour { min-height: 48px; padding: 0 22px; background: transparent; border: 1px solid var(--sourdine); border-radius: 2px; font: inherit; font-size: 16px; font-weight: 600; color: var(--encre); cursor: pointer; transition: border-color 150ms ease, transform 80ms ease; }
.retour:hover { border-color: var(--encre); }
.retour:active { transform: scale(0.98); }
.retour[hidden] { display: none; }
/* Tant que le pas n'a pas sa réponse, « Continuer » s'éclaircit ; il reste cliquable et dit alors quoi faire */
.action.inactif, .action.inactif:hover, .action[aria-disabled="true"] { background: var(--filet); color: var(--sourdine); }
.guide-memoire { margin-top: 14px; font-size: 14px; color: var(--sourdine); text-align: right; }
.guide-memoire[hidden] { display: none; }
/* L'image du pas, petite, et la phrase du premier rendez-vous */
.guide-aside { padding-top: 8px; }
.guide-image { margin: 0; height: 320px; display: flex; align-items: flex-end; justify-content: center; }
.guide-image[hidden] { display: none; }
.guide-aside[hidden], .progression[hidden] { display: none; }
.guide-image img { max-height: 320px; max-width: 100%; width: auto; height: auto; }
.guide-rdv { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--encre); font-family: var(--titre); font-size: 22px; line-height: 1.35; color: var(--encre); }
/* L'accusé, à la place du formulaire */
.accuse[hidden] { display: none; }
.accuse { border-top: 1px solid var(--encre); padding-top: 22px; }
.accuse:focus { outline: none; }
.accuse .h3 { font-size: 36px; line-height: 1.1; margin-bottom: 16px; }
.accuse > p { color: var(--encre-douce); max-width: 36rem; }
.accuse .accuse-tel { margin-top: 6px; }
.accuse .recap-titre { margin-top: 36px; }
/* Mouvement au défilement : l'état final est l'état par défaut ; le script ne pose l'attente que hors du premier
écran. L'image se dépose de haut en bas comme l'encre sous le burin ; la légende arrive ensuite. */
@media (prefers-reduced-motion: no-preference) {
.js .attend figure img { clip-path: inset(0 0 100% 0); }
.js .attend .legende, .js .attend.legende-seule { opacity: 0; transform: translateY(14px); }
.js .vu figure img { clip-path: inset(0 0 0 0); transition: clip-path 400ms var(--arrivee); }
.js .vu .legende, .js .vu.legende-seule { opacity: 1; transform: none; transition: opacity 320ms var(--arrivee) 80ms, transform 320ms var(--arrivee) 80ms; }
.accuse.pose { animation: depot 250ms var(--arrivee); }
@keyframes depot { from { opacity: 0; transform: translateY(6px); } }
}
@media (prefers-reduced-motion: reduce) {
.fil, .action, .nav a, .champ input, .carte, .pastille, .coche, .coche::after, .progression-filet span, .retour { transition: none; }
.fil::after { display: none; }
}
/* Passages d'une pièce à l'autre (View Transitions entre documents, même origine).
Avancer dans l'enfilade : la pièce quittée s'efface en s'approchant, la nouvelle est déjà là et se pose.
Revenir : le miroir. L'en-tête ne bouge pas, le trait glisse, le titre franchit la porte. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* Piège connu : le fondu par défaut mélange en plus-lighter et blanchit les gravures ; ici, mélange normal */
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; animation-timing-function: var(--arrivee); }
::view-transition-old(root) { z-index: 1; animation: quitte-avant 220ms var(--depart) both; }
::view-transition-new(root) { animation: pose-avant 380ms var(--arrivee) both; }
html:active-view-transition-type(recule)::view-transition-old(root) { animation-name: quitte-arriere; }
html:active-view-transition-type(recule)::view-transition-new(root) { animation-name: pose-arriere; }
@keyframes quitte-avant { to { opacity: 0; transform: scale(1.015); } }
@keyframes pose-avant { from { transform: scale(0.985); } }
@keyframes quitte-arriere { to { opacity: 0; transform: scale(0.985); } }
@keyframes pose-arriere { from { transform: scale(1.015); } }
::view-transition-group(entete) { animation-duration: 0s; }
::view-transition-group(trait-nav) { animation-duration: 300ms; animation-timing-function: var(--arrivee); }
::view-transition-group(porte) { animation-duration: 380ms; animation-timing-function: var(--arrivee); z-index: 2; }
::view-transition-old(porte), ::view-transition-new(porte) { animation-duration: 380ms; animation-timing-function: var(--arrivee); }
/* sans le nom posé par le script, rien n'est partagé : chaque page garde son propre point fixe */
.vt-sans-entete .entete, .vt-sans-entete .trait { view-transition-name: none; }
/* Tablette */
@media (max-width: 1080px) {
.cadre { padding: 0 32px; }
.preuves-tete, .decennale, .responsabilite .cadre, .porte .cadre { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.porte .cadre { gap: 14px; }
.decennale .surtitre { padding-top: 0; }
.etape { gap: 44px; }
.liste-engagements li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.garants { grid-template-columns: minmax(0, 1fr); }
.garants-dirigeants, .garants-dossier { grid-column: 1; }
.guide-cadre { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.guide-aside { padding-top: 0; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 32px; align-items: end; }
.guide-image { height: 220px; }
.guide-image img { max-height: 220px; }
}
/* Mobile : image puis texte, pleine largeur */
@media (max-width: 760px) {
:root { --hauteur-fil: 56px; }
/* le focus ne passe pas sous la barre Retour, Continuer collée au bas de l'écran */
html { scroll-padding-bottom: 96px; }
body { font-size: 17px; }
.cadre { padding: 0 20px; }
.entete { position: relative; padding: 14px 0 4px; }
.entete .cadre { flex-wrap: wrap; row-gap: 4px; }
.logo img { height: 72px; }
.nav { width: 100%; order: 3; gap: 22px; font-size: 15px; justify-content: flex-start; }
.nav .action { position: absolute; top: 28px; right: 20px; padding: 0 16px; font-size: 15px; }
.couverture { padding: 12px 0 64px; }
.couverture .cadre { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.couverture figure { order: -1; }
.ouverture figure { order: 0; }
.couverture h1 { font-size: clamp(36px, 9vw, 48px); margin-top: 12px; }
.couverture .devise { font-size: 26px; }
.distribution { max-width: 420px; }
.section { padding: 64px 0; }
.section-entete { margin-bottom: 36px; }
.chiffres li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px 0; }
.chiffre { font-size: 48px; }
.sommaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.etape, .etape:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 16px 0; }
.etape:nth-child(even) figure { order: 0; }
.etape:nth-child(even) .legende { order: 1; justify-self: start; }
.etape + .etape { margin-top: 40px; }
.etape figure img { max-height: none; }
.outil { font-size: 22px; }
.porte { padding: 56px 0 64px; }
.porte-titre a { text-underline-offset: 7px; }
.activites-icones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
.activites-icones li:last-child { grid-column: 1 / -1; }
.activites-icones .ico { height: 68px; }
.activites-icones .ico img { max-height: 68px; max-width: 92px; }
.activites-icones a { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; min-height: 44px; text-decoration: none; }
.activites-icones a:hover span:last-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.activites-icones a > span:last-child { font-size: 20px; }
.garants { margin-top: 56px; }
.garants-dirigeants { padding-top: 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.garants-dossier { margin-top: 36px; padding-top: 28px; }
.nom { font-size: 20px; white-space: normal; }
.rappel { padding: 64px 0; }
.rappel .cadre { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.rappel .rdv { border-left: 0; padding-left: 0; border-top: 1px solid rgba(244, 241, 234, 0.35); padding-top: 28px; }
.rappel .pieces { font-size: 24px; }
.pied .cadre { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.pied nav { text-align: left; }
.pied nav a { justify-content: flex-start; }
.fil-repere { font-size: 14px; }
.fil-tel { font-size: 22px; }
.telephone { font-size: 34px; }
.guide-tete { padding: 8px 0 32px; }
.guide-tete .cadre { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.appel { border-left: 0; padding-left: 0; }
.guide-section { padding: 32px 0 64px; }
.progression { margin-bottom: 28px; }
.guide-cadre { row-gap: 0; }
.progression-compte { display: block; }
.progression-pas { gap: 0 4px; }
.progression-pas button { min-width: 44px; justify-content: center; }
.progression-pas span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pas-titre { font-size: clamp(30px, 7.4vw, 40px); }
.pas-question { margin-bottom: 22px; }
.cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cartes li:last-child { grid-column: 1 / -1; }
.carte { min-height: 148px; padding: 28px 10px 14px; }
.carte .ico { height: 60px; }
.carte .ico img { max-height: 60px; max-width: 84px; }
.carte-nom { font-size: 20px; }
.carte--complete { min-height: 60px; }
.champs-paire { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.depot { padding: 32px 18px; }
.depot-texte { font-size: 24px; }
.depot-texte--bureau { display: none; }
.depot-texte--mobile { display: block; }
.recap-liste > div { grid-template-columns: minmax(0, 1fr) auto; }
.recap-liste dt { grid-column: 1 / -1; }
.recap-liste--accuse > div { grid-template-columns: minmax(0, 1fr); }
/* Retour et Continuer restent collés au bas de l'écran, au-dessus du clavier virtuel */
.guide-nav { position: sticky; bottom: 0; z-index: 5; margin: 32px -20px 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--grege); }
.guide-nav .continuer { flex: 1; min-width: 0; }
.guide-memoire { text-align: left; }
.guide-aside { display: block; }
.guide-image { display: none; }
.guide-rdv { margin-top: 0; }
}
@media (max-width: 400px) {
.nom { font-size: 18px; }
.nav .action { padding: 0 12px; font-size: 14px; }
.logo img { height: 64px; }
.fil-repere .fil-titre { display: none; }
}
/* Les titres qui franchissent une porte : même corps, même largeur des deux côtés, pour que le titre se déplace
sans se dédoubler (le passage ne fait que le changer de place). */
h2.titre-engagements, h1.titre-engagements { font-size: clamp(36px, 3.6vw, 52px); line-height: 1.08; max-width: 12em; }
h2.titre-contact, h1.titre-contact { font-size: clamp(42px, 4.3vw, 62px); line-height: 1.02; max-width: 7.6em; }
@media (max-width: 760px) {
h2.titre-engagements, h1.titre-engagements { font-size: clamp(30px, 7.4vw, 40px); }
h2.titre-contact, h1.titre-contact { font-size: clamp(36px, 9vw, 48px); }
}
/* ===========================================================================================================
Formulaire condensé (orchestrateur, 2026-10-07, demande de Florentin : « il faut que ça soit condensé, qu'on
n'ait pas à scroller pour passer les étapes »). Chaque pas, du repère de progression aux boutons, tient dans un
écran ; le pas s'aligne en haut, sous la bande fixe ; Retour et Continuer restent collés au bas.
=========================================================================================================== */
body[data-page="contact"] .guide-tete { padding: 4px 0 14px; }
body[data-page="contact"] .guide-tete .cadre { align-items: center; gap: 40px; }
body[data-page="contact"] .guide-tete h1 { font-size: clamp(32px, 3vw, 42px); }
body[data-page="contact"] .appel { padding-left: 24px; }
body[data-page="contact"] .appel .telephone { font-size: 30px; }
.guide-section { padding: 18px 0 48px; }
.progression { margin-bottom: 14px; scroll-margin-top: 0; } /* la marge sous la bande fixe vient déjà du scroll-padding-top de la page */
.progression-pas button { min-height: 40px; padding: 6px 0; }
.guide-actif .pas-titre { font-size: clamp(28px, 2.4vw, 36px); }
.guide-actif .pas-question { margin: 4px 0 14px; font-size: 17px; }
.guide-actif .preselection { margin: -6px 0 10px; }
/* Les corps d'état en cartes horizontales : l'icône à gauche, le libellé à droite, la coche au bout */
.guide-actif .carte { flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; min-height: 60px; padding: 8px 42px 8px 12px; text-align: left; }
.guide-actif .carte .coche { top: 50%; margin-top: -11px; right: 12px; }
.guide-actif .carte .ico { flex: none; width: 50px; height: 42px; align-items: center; }
.guide-actif .carte .ico img { max-height: 42px; max-width: 50px; }
.guide-actif .carte-nom { font-size: 20px; line-height: 1.15; }
.guide-actif .carte--complete { min-height: 50px; margin-bottom: 10px; padding-left: 16px; }
.guide-actif .cartes { gap: 10px; }
.guide-actif .preciser { margin-top: 8px; }
.guide-actif .preciser summary { min-height: 40px; }
.guide-actif .preciser textarea { min-height: 72px; margin-top: 4px; }
.guide-actif .champ label { font-size: 16px; margin-bottom: 4px; }
.guide-actif .champ + .champ, .guide-actif .champs-paire { margin-top: 14px; }
.guide-actif .champ input { min-height: 46px; padding: 10px 14px; }
.guide-actif .erreur { margin-top: 8px; font-size: 15px; }
.guide-actif .hors-zone { margin-top: 14px; padding: 10px 16px; }
.guide-actif .hors-zone p { font-size: 16px; }
.guide-actif .depot { padding: 22px 20px; gap: 10px; }
.guide-actif .depot-texte { font-size: 22px; }
.guide-actif .vignettes { margin-top: 12px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.guide-actif .pastille--seule { margin-top: 12px; }
.guide-actif .champ-date { margin-top: 14px; }
.guide-actif .mention-donnees { margin-top: 12px; }
.guide-actif .recap { margin-top: 18px; padding-top: 10px; }
.guide-actif .recap-titre { font-size: 22px; margin-bottom: 2px; }
.guide-actif .recap-liste > div { grid-template-columns: 170px minmax(0, 1fr) auto; padding: 4px 0; gap: 2px 18px; }
.guide-actif .recap-liste dt { font-size: 14px; }
.guide-actif .recap-liste dd { font-size: 15px; }
.guide-actif .recap-precision { font-size: 14px; margin-top: 0; }
.guide-actif .modifier { min-height: 36px; font-size: 14px; }
/* Retour et Continuer collés au bas de l'écran, à toutes les tailles */
.guide-actif .guide-nav { position: sticky; bottom: 0; z-index: 5; margin-top: 16px; padding: 12px 0 14px; background: var(--grege); }
.guide-actif .guide-memoire { margin-top: 2px; font-size: 13px; }
.guide-image { height: 240px; }
.guide-image img { max-height: 240px; }
.guide-rdv { margin-top: 18px; padding-top: 14px; font-size: 19px; }
@media (max-width: 760px) {
body[data-page="contact"] .guide-tete { padding: 0 0 10px; }
body[data-page="contact"] .guide-tete .cadre { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
body[data-page="contact"] .guide-tete h1 { font-size: 30px; }
body[data-page="contact"] .appel { padding-left: 0; text-align: right; }
body[data-page="contact"] .appel-question, body[data-page="contact"] .appel-courriel { display: none; }
body[data-page="contact"] .appel .telephone { font-size: 22px; white-space: nowrap; }
.guide-section { padding: 10px 0 32px; }
.progression { margin-bottom: 8px; }
.progression-pas button { min-height: 36px; padding: 4px 0; }
.guide-actif .pas-titre { font-size: 28px; }
.guide-actif .pas-question { font-size: 16px; margin-bottom: 10px; }
.guide-actif .cartes { gap: 8px; }
.guide-actif .carte { min-height: 54px; gap: 8px; padding: 6px 34px 6px 8px; }
.guide-actif .carte .coche { right: 8px; width: 20px; height: 20px; margin-top: -10px; }
.guide-actif .carte .coche::after { left: 6px; top: 2px; }
.guide-actif .carte .ico { width: 38px; height: 34px; }
.guide-actif .carte .ico img { max-height: 34px; max-width: 38px; }
.guide-actif .carte-nom { font-size: 17px; }
.guide-actif .carte--complete { min-height: 46px; margin-bottom: 8px; }
.guide-actif .recap-liste > div { grid-template-columns: minmax(0, 1fr) auto; }
.guide-actif .recap-liste dt { grid-column: 1 / -1; }
.guide-actif .guide-nav { margin: 12px -20px 0; padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); }
.guide-actif .guide-memoire { display: none; }
.guide-aside .guide-image { display: none; }
}
/* Pas 5 : le récapitulatif sur deux colonnes en bureau, téléphone et courriel côte à côte partout */
@media (min-width: 761px) {
.guide-actif .recap-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.guide-actif .recap-liste > div { grid-template-columns: minmax(0, 1fr) auto; }
.guide-actif .recap-liste dt { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
.guide-actif .champs-paire { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.guide-actif .champ + .champ, .guide-actif .champs-paire { margin-top: 10px; }
.guide-actif .champ input { min-height: 44px; }
.guide-actif .recap { margin-top: 12px; padding-top: 8px; }
.guide-actif .recap-titre { font-size: 20px; }
.guide-actif .recap-liste > div { padding: 2px 0; }
.guide-actif .recap-liste dd { font-size: 14px; }
}
/* Pas 5, dernier resserrement : récapitulatif plus près des champs ; en mobile, une ligne par réponse */
.guide-actif .recap { margin-top: 12px; }
@media (max-width: 760px) {
.guide-actif .pas[data-pas="5"] .pas-question { margin-bottom: 6px; }
.guide-actif .mention-donnees { margin-top: 8px; }
.guide-actif .recap-liste > div { grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 0 10px; padding: 0; }
.guide-actif .recap-liste dt { grid-column: auto; font-size: 13px; }
.guide-actif .recap-liste dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guide-actif .recap-precision { display: none; }
.guide-actif .modifier { min-height: 44px; }
}
@media (max-width: 760px) { .guide-actif .pas[data-pas="5"] .pas-titre { font-size: 26px; } .guide-actif .recap-titre { margin-bottom: 0; } }
.guide-actif .champs-paire .champ + .champ { margin-top: 0; } /* téléphone et courriel alignés sur la même ligne */
.progression-pas button, .guide-actif .preciser summary { min-height: 44px; } /* cibles tactiles : 44 px au moins (contrat §2.6) */
/* Petits écrans (orchestrateur, 2026-10-07, capture de Florentin sur un panneau étroit) : le repère « 1 / 5 » n'est
plus répété sous la bande fixe qui le porte déjà ; sous 480 px, la coche se pose en pastille sur le coin de l'icône,
le libellé reprend toute la largeur de la carte et ne passe jamais sous la coche. */
.fil.visible ~ main .progression-compte { display: none; }
@media (max-width: 480px) {
.guide-actif .cartes { gap: 6px; }
.guide-actif .carte { padding: 6px 8px 6px 6px; gap: 8px; min-height: 52px; }
.guide-actif .carte .ico { width: 34px; height: 30px; }
.guide-actif .carte .ico img { max-height: 30px; max-width: 34px; }
.guide-actif .carte .coche { top: 4px; left: 4px; right: auto; margin-top: 0; width: 18px; height: 18px; background: var(--grege); }
.guide-actif .carte .coche::after { left: 5px; top: 2px; width: 4px; height: 8px; }
.guide-actif .carte-nom { font-size: 16px; line-height: 1.12; text-wrap: pretty; hyphens: manual; min-width: 0; }
.guide-actif .carte--complete { padding-left: 30px; }
.guide-actif .carte--complete .coche { top: 50%; margin-top: -9px; left: 8px; }
}
@media (max-width: 760px) { .progression-compte { display: none; } } /* le titre du pas, juste dessous, le dit déjà */
@media (max-width: 480px) {
.guide-actif .cartes .carte .coche { opacity: 0; } /* carte libre : le cadre seul */
.guide-actif .cartes .carte:has(input:checked) .coche { opacity: 1; } /* carte cochée : cadre d'encre et pastille */
}
/* Pages légales (E3, vague 1, 2026-10-07) : une colonne de lecture tenue comme un devis, une rubrique par ligne.
Styles propres à mentions-legales.html et donnees-personnelles.html, reportés ici depuis leur