/* SOBIMA, site v4 : mise en page des pages. Les couleurs, polices, espacements et angles
   viennent de tokens.css ; les composants sb- de bundle.css (design system piste A, inchangés). */

/* Tailles relatives (suivent la taille de texte choisie par le visiteur).
   Surcharge des composants du design system (bundle.css, en px), mêmes valeurs à 16 px. */
body { font-size: 1rem; line-height: 1.625; }
.sb-bouton { font-size: .9375rem; line-height: 1.25rem; max-width: 100%; white-space: normal; text-align: center; }
.sb-etiquette { font-size: .75rem; line-height: 1rem; }
.sb-nav { font-size: .875rem; }
.sb-marque { font-size: 1.125rem; }
.sb-hero h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
.sb-hero p:not(.sb-etiquette) { font-size: 1.125rem; line-height: 1.75rem; }
.sb-carte { align-content: start; }
.sb-carte h3, .sb-etape h3 { font-size: 1.25rem; line-height: 1.625rem; }
.sb-carte p:not(.sb-etiquette), .sb-etape p:not(.sb-etiquette) { margin: 0; font-size: .875rem; line-height: 1.375rem; color: var(--encre-douce); }
.sb-testfit h3 { font-size: 1.5rem; line-height: 1.75rem; }
.sb-testfit p:not(.sb-etiquette) { font-size: .875rem; line-height: 1.375rem; }
.sb-fiche { font-size: .8125rem; line-height: 1.25rem; }
.sb-fiche dt { font-weight: 600; }
.sb-cote { font-size: .75rem; line-height: 1rem; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; scrollbar-color: var(--trame) var(--calque); caret-color: var(--bleu-plan); }
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; }
main { flex: 1; }
img, svg { max-width: 100%; display: block; }
a { color: var(--bleu-plan); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--bleu-plan); outline-offset: 3px; border-radius: 1px; }
::selection { background: var(--bleu-plan); color: var(--calque); }
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; }
p, li, dd { text-wrap: pretty; }

.lien-evitement { position: absolute; left: -9999px; top: 0; z-index: 100; padding: var(--space-3) var(--space-4); background: var(--encre); color: var(--calque); }
.lien-evitement:focus, .lien-evitement:focus-visible { left: var(--space-4); top: var(--space-4); }

/* Conteneur : 36 pas de trame */
.cadre { width: 100%; max-width: 1216px; margin-inline: auto; padding-inline: var(--space-8); }
@media (max-width: 720px) { .cadre { padding-inline: var(--space-4); } }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 26; background: var(--calque); border-bottom: var(--trait-fin) solid var(--trame); }
.entete__ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 72px; }
/* Logo complet (fond transparent, assets/img/logo-sobima-complet.png) : hauteur fixe, largeur selon le format */
.entete .sb-marque img { width: clamp(150px, 16vw, 200px); height: auto; }
.pied .sb-marque img { width: clamp(150px, 16vw, 200px); height: auto; }
.entete .sb-nav { gap: var(--space-6); align-items: center; }
.entete__actions { display: flex; align-items: center; gap: var(--space-6); }
.menu-mobile { display: none; }
@media (max-width: 1080px) {
  .entete .sb-nav, .entete__actions > .sb-bouton { display: none; }
  .menu-mobile { display: block; }
  /* En-tête non collant : avec la barre d'action du bas, il prenait 22 % d'un petit écran */
  .entete { position: relative; }
}
.menu-mobile summary { list-style: none; cursor: pointer; font-family: var(--font-cote); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; min-height: 44px; display: flex; align-items: center; padding: 10px 14px; border: var(--trait-plan) solid var(--encre); border-radius: var(--radius-bouton); color: var(--encre); }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile[open] summary { background: var(--encre); color: var(--calque); }
.menu-mobile__panneau { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 73px); max-height: calc(100dvh - 73px); overflow-y: auto; overscroll-behavior: contain; background: var(--calque-releve); border-bottom: var(--trait-plan) solid var(--encre); padding: var(--space-4) var(--space-4) var(--space-6); }
.menu-mobile__panneau ul { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.menu-mobile__panneau li a { display: block; padding: var(--space-3) 0; border-bottom: var(--trait-fin) solid var(--trame); color: var(--encre); text-decoration: none; font-family: var(--font-titre); font-weight: 600; font-size: 1.125rem; }
.menu-mobile__panneau li a[aria-current="page"] { color: var(--bleu-plan); }

/* Sections */
/* Les sections se distinguent par le fond et l'espace, sans filet ; le quadrillage reste réservé au premier écran de l'accueil */
.section { padding-block: calc(var(--space-16) + var(--space-4)); }
.section--serree { padding-block: var(--space-12); }
.section--releve { background: var(--calque-releve); }
.section__tete { display: grid; gap: var(--space-2); max-width: 760px; margin-bottom: var(--space-12); }
.section__tete h2, .titre-section { margin: 0; font-family: var(--font-titre); font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
/* Un ou deux titres par page, nettement plus grands que les autres */
.section__tete h2.titre-fort { font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.08; letter-spacing: -.02em; }
.section__tete .chapo-section { margin: var(--space-2) 0 0; font-size: 1.125rem; line-height: 1.75rem; color: var(--encre-douce); max-width: 54ch; }
@media (max-width: 720px) { .section { padding-block: var(--space-12); } .section__tete { margin-bottom: var(--space-8); } .section__tete h2, .titre-section { font-size: 1.5rem; line-height: 1.875rem; } }

/* Longueur de ligne : la police de texte est étroite (1 ch ≈ 1,38 caractère moyen) ; 52 ch ≈ 72 caractères */
.texte { max-width: 52ch; }
.texte p { margin: 0 0 var(--space-4); }
.texte p:last-child { margin-bottom: 0; }
.texte ul { margin: 0 0 var(--space-4); padding-left: 1.1em; }
.texte li { margin-bottom: var(--space-2); }
.texte li::marker { color: var(--caramel); }
.texte > .titre-section:not(:first-child) { margin-top: var(--space-12); }
.texte > .titre-section { margin-bottom: var(--space-3); }
.encre-douce { color: var(--encre-douce); }
.suite { margin: var(--space-6) 0 0; }

/* Accueil et en-têtes de page */
.hero { padding-block: var(--space-16) calc(var(--space-16) + var(--space-4)); }
/* Quadrillage adouci : seul endroit du site où il apparaît, derrière le plan */
.hero.sb-trame { --trame: color-mix(in srgb, var(--encre) 8%, var(--calque)); }
.hero__grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.hero .sb-row { margin-top: var(--space-8); }
.sb-hero p.hero__note { margin: var(--space-4) 0 0; font-size: .875rem; line-height: 1.375rem; color: var(--encre-douce); max-width: 52ch; }
@media (max-width: 960px) { .hero__grille { grid-template-columns: 1fr; gap: var(--space-8); } .hero__grille .plan { max-width: 560px; } .hero { padding-block: var(--space-12) var(--space-8); } }

.tete-page { padding-block: var(--space-12) var(--space-8); }
.tete-page h1 { margin: var(--space-2) 0 0; font-family: var(--font-titre); font-size: 2.5rem; line-height: 2.75rem; font-weight: 700; letter-spacing: -.015em; max-width: 22ch; }
.tete-page .chapo { margin: var(--space-4) 0 0; font-size: 1.125rem; line-height: 1.75rem; color: var(--encre-douce); max-width: 54ch; }
.tete-page .sb-row { margin-top: var(--space-6); }
@media (max-width: 720px) { .tete-page h1 { font-size: 2rem; line-height: 2.25rem; } }

.ariane, .sb-hero .ariane { font-family: var(--font-cote); font-size: .75rem; line-height: 1rem; font-weight: 500; letter-spacing: .02em; color: var(--encre-douce); margin: 0 0 var(--space-6); max-width: none; }
.ariane a { color: var(--encre-douce); display: inline-block; padding-block: 5px; }

/* Site clair uniquement (audit du 2026-10-29) : le bloc [data-theme="dark"] de tokens.css n'est activé nulle part et ne couvre pas
   les jetons ajoutés depuis ; color-scheme garde les contrôles natifs et les barres de défilement en clair. */
:root { color-scheme: light; }

/* Plan d'implantation (SVG) */
/* Feuille posée sur le quadrillage : ombre portée plutôt que cadre noir.
   Rendu d'après le plan de space planning de Redoine (Grenelle, 20/10/2026) : la feuille reste claire en thème sombre, comme un plan imprimé.
   Couleurs des espaces relevées sur ce plan, hors charte (ajout 2026-10-28). */
.plan {
  --calque: #f2eee6; --calque-releve: #fbf9f5; --trame: #c9c2b5; --encre: #1f2328; --encre-douce: #5c5f63; --bleu-plan: #2c4a6e;
  --plan-meuble: #ffffff; --plan-hachure: #cfccc6; --plan-vitrage: #1f2a7a;
  --plan-travail: #f1e9de; --plan-travail-ombre: #e5d8c5;
  --plan-collaboratif: #b8bba6; --plan-collaboratif-ombre: #878d6a;
  --plan-convivialite: #e4cca8; --plan-convivialite-ombre: #cea66a;
  --plan-support: #928187; --plan-support-ombre: #4c3039;
  --plan-sanitaires: #e0f4f3; --plan-sanitaires-ombre: #bfe0dd;
  color-scheme: light; color: var(--encre);
  margin: 0; background: var(--calque-releve); border-radius: var(--radius-trait); padding: var(--space-5); box-shadow: 0 0 0 var(--trait-fin) color-mix(in srgb, var(--trame) 70%, transparent), 0 24px 48px -28px color-mix(in srgb, var(--encre) 45%, transparent);
}
.plan figcaption { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); font-family: var(--font-cote); font-size: .75rem; line-height: 1rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--encre-douce); }
/* Murs pleins à double trait, cloisons à double trait (trait noir puis âme blanche), portes au trait fin */
.plan .mur-fond { fill: var(--plan-meuble); }
.plan .mur { stroke: var(--encre); fill: none; stroke-width: 1.1; }
.plan .cloison { stroke: var(--encre); fill: none; stroke-width: 3.2; }
.plan .cloison-ame { stroke: var(--plan-meuble); stroke-width: 1.3; }
.plan .porte { stroke: var(--encre); fill: none; stroke-width: .7; }
.plan .porte-vantail { stroke: var(--encre); fill: none; stroke-width: 1.4; }
.plan .sol { stroke: none; }
.pl-hachure { stroke: var(--plan-hachure); stroke-width: .6; }
/* Espaces colorés par fonction (légende sous le plan) */
.zone--travail { fill: var(--plan-travail); background: var(--plan-travail); }
.zone--collaboratif { fill: var(--plan-collaboratif); background: var(--plan-collaboratif); }
.zone--convivialite { fill: var(--plan-convivialite); background: var(--plan-convivialite); }
.zone--support { fill: var(--plan-support); background: var(--plan-support); }
.zone--travail .zone-ombre { fill: var(--plan-travail-ombre); }
.zone--collaboratif .zone-ombre { fill: var(--plan-collaboratif-ombre); }
.zone--convivialite .zone-ombre { fill: var(--plan-convivialite-ombre); }
.zone--support .zone-ombre { fill: var(--plan-support-ombre); }
.plan .plateau, .plan .plateau rect, .pl-plateau { fill: var(--plan-meuble); stroke: var(--encre); stroke-width: .7; }
.plan .siege, .pl-siege { fill: var(--plan-meuble); stroke: var(--encre); stroke-width: .7; }
.plan__legende { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; padding: 0; list-style: none; font-family: var(--font-cote); font-size: .75rem; line-height: 1rem; letter-spacing: .02em; color: var(--encre-douce); }
.plan__legende li { display: flex; align-items: center; gap: var(--space-2); }
.plan__pastille { width: 12px; height: 12px; border: 1px solid color-mix(in srgb, var(--encre) 35%, transparent); }
.plan .cote-trait { stroke: var(--bleu-plan); stroke-width: 1; fill: none; }
/* Légendes du plan SVG : la taille est en unités du viewBox (520 de large), mises à l'échelle avec le dessin.
   Unités en px pour que l'agrandissement de police du navigateur ne fasse pas déborder les textes hors des pièces. */
.plan .cote-texte { fill: var(--bleu-plan); font-family: var(--font-cote); font-size: 13px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.plan .zone-texte { fill: var(--encre); font-family: var(--font-cote); font-size: 13px; font-style: italic; letter-spacing: 0; }
@media (max-width: 600px) {
  .plan { padding: var(--space-3); }
  .plan .cote-texte, .plan .zone-texte { font-size: 15px; }
}
@media (max-width: 480px) {
  .plan .cote-texte { font-size: 17px; }
  .plan .zone-texte { font-size: 15px; }
}
.plan .zone-texte--sombre { fill: var(--plan-meuble); }
/* Mobilier dessiné (accueil) : blanc au trait fin, ombre portée nette vers le bas à gauche, comme sur le plan de Redoine.
   Classes pl-* sans ancêtre : le mobilier est cloné par <use>, et Chrome n'applique pas aux clones les sélecteurs qui passent par .plan. */
.pl-accoudoir, .pl-dossier { fill: var(--plan-meuble); stroke: var(--encre); stroke-width: .6; }
.pl-couture { fill: none; stroke: var(--encre); stroke-width: .4; }
.pl-pietement, .pl-pied { fill: none; stroke: var(--encre); stroke-width: .7; stroke-linecap: round; }
.pl-roulette { fill: var(--plan-meuble); stroke: var(--encre); stroke-width: .5; }
.pl-pointe { fill: var(--encre); }
.plan .ecran, .plan .ecran-mural, .pl-ecran { fill: var(--encre); }
.plan .clavier, .pl-clavier { fill: none; stroke: var(--encre); stroke-width: .5; }
.plan .evier { fill: none; stroke: var(--encre); stroke-width: .6; }
.plan .evier-bonde { fill: var(--encre); }
.plan .fenetre { fill: var(--plan-meuble); stroke: var(--encre); stroke-width: .6; }
.plan .fenetre-vitre { fill: none; stroke: var(--plan-vitrage); stroke-width: 1.4; }
.plan feDropShadow { flood-color: #5a4a30; flood-opacity: .38; }
.plan .zone-surface { fill: var(--encre); font-family: var(--font-cote); font-size: 11px; font-style: italic; letter-spacing: 0; }
/* Sanitaires (bleu d'eau du plan de Redoine), baie de l'entrée, flèche d'entrée */
.zone--sanitaires { fill: var(--plan-sanitaires); background: var(--plan-sanitaires); }
.zone--sanitaires .zone-ombre { fill: var(--plan-sanitaires-ombre); }
.plan .baie { fill: var(--calque-releve); }
.plan .baie-jambage, .plan .entree-fleche { fill: none; stroke: var(--encre); stroke-width: .8; }
/* Petits écrans : les libellés sont agrandis (règles plus haut), on retire les surfaces et la cote de circulation,
   et on décale les libellés de l'accueil et du bureau, qui toucheraient une cloison ou une porte. */
@media (max-width: 600px) {
  .plan .zone-surface, .plan .l-cote { display: none; }
  .plan .l3 { transform: translate(-6px, 0); }
  .plan .l5 { transform: translate(0, 7px); }
  .plan .l5 .zone-texte { font-size: 13px; }
  .plan .l8 .zone-texte { font-size: 13px; }
}
/* Animation au chargement, environ 9 s : décision de Quentin du 2026-10-28, sans bouton Pause, donc non conforme RGAA 13.8 (comme l'accroche).
   --k règle la vitesse en un seul endroit : les délais et durées ci-dessous sont ceux de la version de 5 s, multipliés par --k.
   1. murs, fenêtres et circulations, 2. cloisons une à une, puis portes qui s'ouvrent (vantail qui pivote, arc qui se trace),
   3. les espaces un à un, dans l'ordre demandé par Redoine (open space, réunion, bureau, café), puis l'accueil, les sanitaires et le local technique.
   Chaque espace arrive avec sa couleur, son libellé, ses tables et bureaux, puis ses chaises qui sortent de sous la table, et sa pastille de légende.
   Le compteur de postes de la légende monte avec les bureaux (0 → 16 avec l'open space, 17 avec le bureau).
   Murs, cloisons et arcs de porte ont pathLength="1" : le tracé va de 1 à 0 quelle que soit leur longueur. */
.plan { --k: 1.8; }
.plan .mur, .plan .cloison, .plan .porte { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* Gonds des portes (unités du viewBox) et angle du vantail fermé */
.plan .porte-vantail { transform-box: view-box; }
.plan .porte-vantail.po1 { transform-origin: 330px 154px; --ferme: -90deg; }
.plan .porte-vantail.po2 { transform-origin: 388px 240px; --ferme: -90deg; }
.plan .porte-vantail.po3 { transform-origin: 125px 342.5px; --ferme: -90deg; }
.plan .porte-vantail.po4 { transform-origin: 305px 270px; --ferme: -90deg; }
.plan .porte-vantail.po5 { transform-origin: 345px 270px; --ferme: -90deg; }
.plan .porte-vantail.po6 { transform-origin: 448px 192px; --ferme: 90deg; }
/* Chaises rangées sous la table au départ : décalage vers la table */
.plan .tire-n { --tx: 0px; --ty: -7px; } .plan .tire-s { --tx: 0px; --ty: 7px; }
.plan .tire-e { --tx: 7px; --ty: 0px; } .plan .tire-o { --tx: -7px; --ty: 0px; }
.plan .tire-ne { --tx: 4px; --ty: -4px; } .plan .tire-no { --tx: -4px; --ty: -4px; }
.plan .tire-se { --tx: 4px; --ty: 4px; } .plan .tire-so { --tx: -4px; --ty: 4px; }
/* Compteur : le vrai nombre reste dans le texte (lecteurs d'écran, mouvement réduit) ; le nombre animé est un contenu généré sans alternative */
@property --postes { syntax: "<integer>"; inherits: false; initial-value: 17; }
@media (prefers-reduced-motion: no-preference) {
  .plan .mur { animation: tracer calc(var(--k) * .8s) ease-out both; }
  .plan .mur-fond, .plan .fenetres, .plan .sol { animation: poser calc(var(--k) * .3s) ease-out calc(var(--k) * .7s) both; }
  .plan .cloison { animation: tracer calc(var(--k) * .5s) ease-out both; }
  .plan .c1 { animation-delay: calc(var(--k) * .8s); } .plan .c2 { animation-delay: calc(var(--k) * .95s); } .plan .c3 { animation-delay: calc(var(--k) * 1.1s); } .plan .c4 { animation-delay: calc(var(--k) * 1.25s); } .plan .c5 { animation-delay: calc(var(--k) * 1.4s); }
  .plan .portes { animation: poser calc(var(--k) * .2s) ease-out calc(var(--k) * 1.6s) both; }
  .plan .porte-vantail { animation: ouvrir calc(var(--k) * .45s) ease-in-out both; }
  .plan .porte { animation: tracer calc(var(--k) * .45s) ease-in-out both; }
  .plan .po1 { animation-delay: calc(var(--k) * 1.75s); } .plan .po2 { animation-delay: calc(var(--k) * 1.8s); } .plan .po3 { animation-delay: calc(var(--k) * 1.7s); }
  .plan .po4 { animation-delay: calc(var(--k) * 1.85s); } .plan .po5 { animation-delay: calc(var(--k) * 1.9s); } .plan .po6 { animation-delay: calc(var(--k) * 1.95s); }
  .plan .zone, .plan .libelle, .plan__legende li { animation: poser calc(var(--k) * .5s) ease-out both; }
  .plan .l9 { animation-delay: calc(var(--k) * 1.6s); }
  .plan .l7 { animation-delay: calc(var(--k) * 1.9s); }
  .plan .mobilier { transform-box: fill-box; transform-origin: center; animation: meubler calc(var(--k) * .4s) cubic-bezier(.16, 1, .3, 1) both; }
  .plan .mobilier.chaises { animation-name: poser; animation-duration: calc(var(--k) * .2s); }
  .plan .chaises > use { animation: tirer calc(var(--k) * .4s) cubic-bezier(.2, .7, .2, 1) both; animation-delay: inherit; }
  /* 1. Open space */
  .plan .z1 { animation-delay: calc(var(--k) * 2s); } .plan .l1, .plan__legende .legende--travail { animation-delay: calc(var(--k) * 2.1s); }
  .plan .m1 { animation-delay: calc(var(--k) * 2.15s); } .plan .m2 { animation-delay: calc(var(--k) * 2.2s); } .plan .m3 { animation-delay: calc(var(--k) * 2.25s); } .plan .m4 { animation-delay: calc(var(--k) * 2.3s); }
  .plan .m1.chaises { animation-delay: calc(var(--k) * 2.45s); } .plan .m2.chaises { animation-delay: calc(var(--k) * 2.5s); } .plan .m3.chaises { animation-delay: calc(var(--k) * 2.55s); } .plan .m4.chaises { animation-delay: calc(var(--k) * 2.6s); }
  .plan .l-cote { animation-delay: calc(var(--k) * 2.6s); }
  /* 2. Salle de réunion */
  .plan .z2 { animation-delay: calc(var(--k) * 2.75s); } .plan .l2, .plan__legende .legende--collaboratif { animation-delay: calc(var(--k) * 2.85s); } .plan .m5 { animation-delay: calc(var(--k) * 2.9s); } .plan .m5.chaises { animation-delay: calc(var(--k) * 3.1s); }
  /* 3. Bureau */
  .plan .z5 { animation-delay: calc(var(--k) * 3.3s); } .plan .l5 { animation-delay: calc(var(--k) * 3.4s); } .plan .m8 { animation-delay: calc(var(--k) * 3.45s); } .plan .m8.chaises { animation-delay: calc(var(--k) * 3.65s); }
  /* 4. Café */
  .plan .z4 { animation-delay: calc(var(--k) * 3.85s); } .plan .l4, .plan__legende .legende--convivialite { animation-delay: calc(var(--k) * 3.95s); } .plan .m6 { animation-delay: calc(var(--k) * 4s); } .plan .m6.chaises { animation-delay: calc(var(--k) * 4.2s); }
  /* 5. Accueil, 6. sanitaires et local technique */
  .plan .z3 { animation-delay: calc(var(--k) * 4.3s); } .plan .l3 { animation-delay: calc(var(--k) * 4.4s); } .plan .m7 { animation-delay: calc(var(--k) * 4.45s); } .plan .m7.chaises { animation-delay: calc(var(--k) * 4.6s); }
  .plan .z7 { animation-delay: calc(var(--k) * 4.6s); } .plan .l8, .plan .m10, .plan__legende .legende--sanitaires { animation-delay: calc(var(--k) * 4.65s); }
  .plan .z6 { animation-delay: calc(var(--k) * 4.65s); } .plan .l6, .plan .m9, .plan__legende .legende--support { animation-delay: calc(var(--k) * 4.7s); }
  /* Compteur de postes, calé sur l'arrivée des bureaux (open space de 2,15 à 2,55, bureau à 3,45 en temps de la version de 5 s) */
  .plan__postes-nb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .plan__postes::before { counter-reset: postes var(--postes); content: counter(postes); content: counter(postes) / ""; animation: compter calc(var(--k) * 3.5s) linear both; }
}
@keyframes tracer { from { stroke-dashoffset: 1; } }
@keyframes meubler { from { opacity: 0; transform: scale(.85); } }
@keyframes ouvrir { from { rotate: var(--ferme); } }
@keyframes tirer { from { translate: var(--tx, 0px) var(--ty, 0px); } }
@keyframes compter { 0%, 61% { --postes: 0; } 73%, 98% { --postes: 16; } 100% { --postes: 17; } }

/* Titre de l'accueil : bureaux → locaux → commerces, en boucle (décision du 2026-10-28, à la demande de Redoine). Chaque mot reste environ 2 s.
   Le dernier mot de la liste est une copie de « bureaux » : le retour au début de la boucle ne se voit pas.
   Non conforme au critère RGAA 13.8 (pas de bouton Pause), choix assumé comme pour le ruban des métiers.
   Seul « bureaux » est dans le HTML (texte lu par Google et les lecteurs d'écran) ; les autres mots sont du contenu CSS au texte alternatif vide.
   La boîte prend la largeur de chaque mot (mesurée en em sur Montserrat 700) pour que « clés » reste collé au mot.
   Ligne 1 « Vos commerces clés » = 10,3 em : taille du titre réglée pour qu'elle tienne dans la colonne (marge 10,6 em ; gouttières de 16 px sur mobile). */
.sb-hero h1.titre-defilant { font-size: min(clamp(2.25rem, 5vw, 3.5rem), calc((100vw - 2rem) / 10.6)); }
@media (min-width: 961px) { .sb-hero h1.titre-defilant { font-size: clamp(2.25rem, 4.1vw, 3rem); } }
@media (prefers-reduced-motion: no-preference) {
  .mot-defilant { display: inline-block; vertical-align: top; width: 4.18em; height: 1lh; overflow: hidden; animation: mot-largeur 7.5s cubic-bezier(.65, 0, .35, 1) 1.2s infinite both; }
  .mot-defilant__liste { display: block; white-space: pre; animation: mot-defile 7.5s cubic-bezier(.65, 0, .35, 1) 1.2s infinite both; }
  .mot-defilant__liste::after { content: "\A locaux\A commerces\A bureaux"; content: "\A locaux\A commerces\A bureaux" / ""; white-space: pre; }
}
@keyframes mot-defile {
  0%, 27% { transform: none; }
  33%, 60% { transform: translateY(-1lh); }
  66%, 93% { transform: translateY(-2lh); }
  100% { transform: translateY(-3lh); }
}
@keyframes mot-largeur {
  0%, 27% { width: 4.18em; }
  33%, 60% { width: 3.33em; }
  66%, 93% { width: 5.97em; }
  100% { width: 4.18em; }
}
@keyframes poser { from { opacity: 0; } }

/* Grilles */
.grille { display: grid; gap: var(--space-6); }
.grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grille--3, .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; } }

.colonne-filet { padding: var(--space-4) 0 0; border-top: var(--trait-plan) solid var(--caramel); }
.colonne-filet h3 { margin: 0 0 var(--space-2); font-family: var(--font-titre); font-size: 1.25rem; line-height: 1.625rem; font-weight: 600; }
.colonne-filet p { margin: 0; color: var(--encre-douce); }

/* Deux colonnes texte + visuel */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.duo--centre { align-items: center; }
.duo > .section__tete { margin-bottom: 0; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; gap: var(--space-8); } }

/* Listes à puces caramel (déclencheurs, pièces) */
.liste-puces { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.liste-puces li { position: relative; padding: var(--space-3) 0 var(--space-3) var(--space-6); border-bottom: var(--trait-fin) solid var(--trame); }
.liste-puces li::before { content: ""; position: absolute; left: 0; top: 19px; width: 10px; height: 10px; background: var(--caramel); }
.liste-puces--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
@media (max-width: 640px) { .liste-puces--2 { grid-template-columns: 1fr; } }
/* Déclencheurs (accueil) : titre au-dessus, situations en trois colonnes, sans filets */
.liste-puces--grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-8); }
.liste-puces--grille li { border-bottom: 0; padding: 0 0 0 var(--space-6); font-family: var(--font-titre); font-weight: 600; font-size: 1.125rem; line-height: 1.5rem; }
.liste-puces--grille li::before { top: 7px; }
@media (max-width: 960px) { .liste-puces--grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .liste-puces--grille { grid-template-columns: 1fr; gap: var(--space-5); } }

/* Prestations : sommaire des étapes fixe à gauche, étapes empilées à droite (grand numéro caramel, sans bandes alternées) */
.etapes { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--space-16); align-items: start; }
.etapes__sommaire { position: sticky; top: 104px; display: grid; gap: var(--space-2); }
.etapes__titre { margin: 0 0 var(--space-4); font-family: var(--font-titre); font-size: 1.75rem; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
.etapes__sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; }
.etapes__sommaire a { display: flex; gap: var(--space-3); padding: var(--space-2) 0; color: var(--encre-douce); text-decoration: none; font-size: .9375rem; }
.etapes__sommaire a span { font-family: var(--font-cote); font-size: .75rem; line-height: 1.5rem; font-variant-numeric: tabular-nums; color: var(--caramel-texte); }
.etapes__sommaire a:hover { color: var(--encre); }
.etapes__liste { display: grid; gap: calc(var(--space-16) + var(--space-4)); }
.etape { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-6); scroll-margin-top: 104px; }
.etape__num { margin: 0; font-family: var(--font-titre); font-size: 4rem; line-height: .9; font-weight: 700; letter-spacing: -.03em; color: color-mix(in srgb, var(--caramel) 45%, var(--caramel-texte)); font-variant-numeric: tabular-nums; }
.etape h2 { margin: var(--space-2) 0 var(--space-5); font-family: var(--font-titre); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
@media (max-width: 960px) {
  .etapes { grid-template-columns: 1fr; gap: var(--space-12); }
  .etapes__sommaire { position: static; }
}
@media (max-width: 560px) {
  .etape { grid-template-columns: 1fr; gap: var(--space-2); }
  .etape__num { font-size: 3rem; }
}

/* Liste numérotée (déroulé) */
.deroule { list-style: none; counter-reset: d; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.deroule li { counter-increment: d; display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); align-items: baseline; }
.deroule li::before { content: counter(d, decimal-leading-zero); font-family: var(--font-cote); font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--bleu-plan); border-top: var(--trait-plan) solid var(--bleu-plan); padding-top: var(--space-1); }

/* Bloc Test Fit en bandeau */
.sb-testfit--large { padding: var(--space-12) var(--space-8); grid-template-columns: minmax(0, 1.2fr) auto; align-items: center; gap: var(--space-8); }
.sb-testfit--large h2 { margin: var(--space-2) 0 0; font-family: var(--font-titre); font-size: 1.75rem; line-height: 2.125rem; font-weight: 700; letter-spacing: -.01em; }
.sb-testfit--large p:not(.sb-etiquette) { font-size: 1rem; line-height: 1.625rem; margin-top: var(--space-3); max-width: 56ch; }
.sb-testfit .testfit__cta { font-size: 1.125rem; line-height: 1.5rem; padding: 18px 28px; gap: var(--space-3); box-shadow: 0 0 0 6px color-mix(in srgb, var(--calque) 22%, transparent); }
.sb-testfit .testfit__cta span { transition: transform .2s ease-out; }
.sb-testfit .testfit__cta:hover span { transform: translateX(4px); }
.sb-testfit a:not(.sb-bouton) { color: var(--sur-bleu-plan); text-decoration-color: var(--sur-bleu-plan-doux); }
.sb-testfit a:focus-visible { outline-color: var(--sur-bleu-plan); }
@media (max-width: 800px) { .sb-testfit--large { grid-template-columns: 1fr; padding: var(--space-8) var(--space-5); } }
/* Le bandeau test fit occupe toute la largeur : la section devient bleue, le bloc perd son fond propre.
   Bleu pâle de l'encart simulation de l'accueil, texte foncé (demande de Redoine, 2026-10-28) : encre 12,8:1, bleu 7,4:1. */
.sb-testfit--large { background: var(--bleu-plan-clair); color: var(--encre); }
.sb-testfit--large .sb-etiquette { color: var(--bleu-plan); }
.sb-testfit--large a:not(.sb-bouton) { color: var(--bleu-plan); text-decoration-color: var(--bleu-plan); }
.sb-testfit--large a:focus-visible, .sb-testfit--large .sb-bouton:focus-visible { outline-color: var(--bleu-plan); }
.sb-testfit--large .sb-bouton--testfit:hover { border-color: var(--encre); color: var(--encre); }
.section:has(> .cadre > .sb-testfit--large) { background: var(--bleu-plan-clair); padding-block: var(--space-16); }
.section:has(> .cadre > .sb-testfit--large) .sb-testfit--large { background: none; padding-inline: 0; padding-block: 0; }
.sb-testfit--large h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.12; letter-spacing: -.02em; }

/* Encadré (réemploi, garanties) */
.encadre { background: var(--calque-releve); border-radius: var(--radius-trait); padding: var(--space-8); }
.section--releve .encadre { background: var(--calque); }
.cadre > .encadre:only-child:not(.encadre--large) { max-width: 760px; }
.encadre h2, .encadre h3 { margin: var(--space-2) 0 var(--space-3); font-family: var(--font-titre); font-weight: 700; }
.encadre h2 { font-size: 1.5rem; line-height: 1.875rem; }
.encadre p { margin: 0 0 var(--space-4); max-width: 52ch; }
.encadre p:last-child { margin-bottom: 0; }
.encadre--large { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-8); align-items: start; }
.encadre--reemploi { background: var(--vert-reemploi-fond); }
.encadre--reemploi .sb-etiquette, .encadre--reemploi a { color: var(--vert-reemploi); }
.encadre--reemploi a { text-decoration-color: var(--vert-reemploi); }
@media (max-width: 720px) { .encadre--large { grid-template-columns: 1fr; gap: var(--space-2); } }
@media (max-width: 640px) { .encadre { padding: var(--space-5); } }
/* Accueil : deux encarts de même format côte à côte, simulation (bleu clair) et réemploi (vert) ; empilés sur mobile.
   Le lien est poussé en bas de l'encart pour que les deux s'alignent. Simulation : lien à la place du bouton (demande de Quentin,
   2026-10-28), il reste donc après le texte sur mobile, comme celui du réemploi. */
.duo-encarts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; }
.encart { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-8); border-radius: var(--radius-trait); }
.encart .sb-etiquette, .encart p { margin: 0; }
.encart p { max-width: 52ch; }
.encart h2 { margin: 0; font-family: var(--font-titre); font-size: clamp(1.375rem, 2.4vw, 1.75rem); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.encart > :last-child { margin-top: auto; padding-top: var(--space-2); }
.encart--simulation { background: var(--bleu-plan-clair); }
.encart--simulation .sb-etiquette, .encart--simulation a { color: var(--bleu-plan); }
.encart--reemploi { background: var(--vert-reemploi-fond); }
.encart--reemploi .sb-etiquette, .encart--reemploi a { color: var(--vert-reemploi); }
.encart--reemploi a { text-decoration-color: var(--vert-reemploi); }
.encart .sb-bouton span { transition: transform .2s ease-out; }
.encart .sb-bouton:hover span { transform: translateX(4px); }
@media (max-width: 720px) {
  .duo-encarts { grid-template-columns: 1fr; gap: var(--space-4); }
  .encart { padding: var(--space-5); }
  .encart > :last-child { margin-top: 0; padding-top: 0; }
}

/* Valeurs (3 mots) */
.mots { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.mots { gap: var(--space-2) var(--space-8); }
.mots li { position: relative; padding-left: var(--space-6); font-family: var(--font-titre); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; }
.mots li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; background: var(--caramel); }

.piliers { margin: var(--space-8) 0 0; padding: 0; display: grid; gap: var(--space-3); font-family: var(--font-titre); font-weight: 600; font-size: 1.25rem; line-height: 1.625rem; }
.piliers span { position: relative; padding-left: var(--space-5); }
.piliers span::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; background: var(--caramel); }

/* FAQ : questions dans une colonne lisible, aparté de contact qui reste visible sur ordinateur */
.faq-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-12); align-items: start; }
.faq { border-top: var(--trait-plan) solid var(--encre); }
.faq details { border-bottom: var(--trait-fin) solid var(--trame); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; font-family: var(--font-titre); font-weight: 600; font-size: 1.125rem; line-height: 1.5rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; content: "+" / ""; font-family: var(--font-cote); font-weight: 400; color: var(--bleu-plan); font-size: 1.25rem; }
.faq details[open] summary::after { content: "−"; content: "−" / ""; }
.faq details > div { padding: 0 0 var(--space-5); max-width: 52ch; }
.faq details > div p { margin: 0 0 var(--space-3); }
.faq-aparte { position: sticky; top: 104px; display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--calque-releve); border-radius: var(--radius-trait); }
.faq-aparte__titre { margin: 0; font-family: var(--font-titre); font-weight: 600; font-size: 1.25rem; line-height: 1.625rem; }
.faq-aparte .ligne { display: grid; gap: var(--space-1); padding-top: var(--space-4); border-top: var(--trait-fin) solid var(--trame); }
.faq-aparte .valeur { font-family: var(--font-titre); font-weight: 600; font-size: 1.125rem; color: var(--encre); text-decoration: none; overflow-wrap: anywhere; }
.faq-aparte a.valeur:hover { color: var(--bleu-plan); }
@media (max-width: 960px) { .faq-grille { grid-template-columns: 1fr; gap: var(--space-8); } .faq-aparte { position: static; } }

/* Contact */
.contact-carte { display: grid; gap: var(--space-4); padding: var(--space-8); background: var(--calque-releve); border-radius: var(--radius-trait); }
.section--releve .contact-carte { background: var(--calque); }
.contact-carte .ligne { display: grid; gap: var(--space-1); padding-bottom: var(--space-4); border-bottom: var(--trait-fin) solid var(--trame); }
.contact-carte .ligne:last-of-type { border-bottom: 0; }
.contact-carte .valeur { font-family: var(--font-titre); font-weight: 600; font-size: 1.25rem; color: var(--encre); text-decoration: none; overflow-wrap: anywhere; }
a.valeur:hover { color: var(--bleu-plan); }
@media (max-width: 640px) { .contact-carte { padding: var(--space-5); } .contact-carte .valeur { font-size: 1.125rem; } }
.contact-carte__titre { margin: 0; font-family: var(--font-titre); font-weight: 600; font-size: 1.25rem; line-height: 1.625rem; }

/* Formulaire de contact (page Contact) : envoyé à /api/contact (worker/), fonctionne aussi sans JavaScript */
.contact-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-16); align-items: start; }
.contact-aparte { position: sticky; top: 104px; display: grid; gap: var(--space-5); }
.contact-aparte p { margin: 0; }
@media (max-width: 960px) { .contact-grille { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); } .contact-aparte { position: static; } }

.formulaire { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.formulaire .titre-section { margin-bottom: calc(var(--space-4) * -1); }
.formulaire__aide { margin: 0; font-size: .875rem; color: var(--encre-douce); }
.formulaire__ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 640px) { .formulaire__ligne { grid-template-columns: minmax(0, 1fr); } }

.champ { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); align-content: start; position: relative; }
.champ label { font-family: var(--font-titre); font-weight: 600; font-size: 1rem; line-height: 1.375rem; color: var(--encre); }
.champ__requis { color: var(--caramel-texte); }
.champ__aide { margin: 0; font-size: .875rem; line-height: 1.375rem; color: var(--encre-douce); }
.champ input:not([type="file"]):not([type="hidden"]), .champ textarea {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4);
  font: inherit; font-size: 1rem; line-height: 1.5rem; color: var(--encre);
  background: var(--calque-releve); border: var(--trait-fin) solid var(--trame); border-bottom: var(--trait-plan) solid var(--encre);
  border-radius: var(--radius-trait); transition: border-color .15s ease-out;
}
.champ textarea { min-height: 128px; resize: vertical; }
.champ input:hover, .champ textarea:hover { border-color: var(--encre-douce); border-bottom-color: var(--encre); }
.champ input:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--bleu-plan); outline-offset: 1px; border-color: var(--bleu-plan); }
.champ input[type="file"] { font: inherit; font-size: .9375rem; color: var(--encre-douce); width: 100%; min-width: 0; }
.champ input[type="file"]::file-selector-button {
  margin-right: var(--space-4); padding: 10px 16px; min-height: 44px; cursor: pointer;
  font-family: var(--font-texte); font-weight: 600; font-size: .9375rem; color: var(--encre);
  background: transparent; border: var(--trait-plan) solid var(--encre); border-radius: var(--radius-bouton);
}
.champ input[type="file"]::file-selector-button:hover { background: var(--encre); color: var(--calque); }
.champ input[type="file"]:focus-visible { outline: 2px solid var(--bleu-plan); outline-offset: 3px; }
.champ--erreur input:not([type="file"]), .champ--erreur textarea { border-color: var(--erreur); border-bottom-color: var(--erreur); }
.champ__erreur { margin: 0; font-size: .875rem; line-height: 1.375rem; font-weight: 600; color: var(--erreur); }
.champ--piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formulaire__envoyer { justify-self: start; min-height: 52px; padding: 14px 28px; font-size: 1.0625rem; }
.formulaire__envoyer[disabled] { opacity: .6; cursor: progress; }
.formulaire__rgpd { margin: 0; font-size: .8125rem; line-height: 1.25rem; color: var(--encre-douce); max-width: 64ch; }
.formulaire__rgpd a { color: var(--encre-douce); }
.formulaire__message { padding: var(--space-4) var(--space-5); border-radius: var(--radius-trait); font-weight: 600; background: color-mix(in srgb, var(--erreur) 8%, var(--calque-releve)); color: var(--erreur); }
.formulaire__message:focus { outline: none; }
.formulaire__envoye { display: grid; gap: var(--space-3); padding: var(--space-8); border-radius: var(--radius-trait); background: var(--calque-releve); }
.formulaire__envoye:focus { outline: none; }
.formulaire__envoye h2 { margin: 0; font-family: var(--font-titre); font-size: 1.75rem; line-height: 1.2; font-weight: 700; }
.formulaire__envoye p { margin: 0; max-width: 52ch; }

/* Suggestions d'adresses (Base Adresse Nationale, relayée par /api/adresse ; assets/contact.js) */
.adresse__liste { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: var(--space-1) 0; list-style: none; background: var(--calque-releve); border: var(--trait-fin) solid var(--trame); border-radius: var(--radius-trait); box-shadow: 0 16px 32px -20px color-mix(in srgb, var(--encre) 50%, transparent); }
.adresse__liste li { padding: var(--space-3) var(--space-4); cursor: pointer; font-size: .9375rem; line-height: 1.375rem; }
.adresse__liste li[aria-selected="true"], .adresse__liste li:hover { background: color-mix(in srgb, var(--caramel) 22%, var(--calque-releve)); }
.adresse__statut { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Repères [À CONFIRMER] : visibles en démo, à supprimer avant la mise en ligne (rechercher « a-confirmer ») */
mark.a-confirmer { background: transparent; color: var(--caramel-texte); font-family: var(--font-cote); font-size: max(.75rem, .78em); letter-spacing: .01em; font-variant-numeric: tabular-nums; border: var(--trait-fin) dashed var(--caramel-texte); padding: 1px 6px; border-radius: var(--radius-trait); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Pied de page */
.pied { background: var(--calque-releve); padding-block: var(--space-12) var(--space-8); }
.pied__signature, .pied p.pied__signature { font-family: var(--font-titre); font-weight: 600; font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -.01em; color: var(--encre); padding-bottom: var(--space-6); margin: 0 0 var(--space-8); max-width: none; border-bottom: var(--trait-fin) solid var(--trame); }
.pied__grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-8); }
.pied h2 { margin: 0 0 var(--space-3); font-family: var(--font-cote); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-douce); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: .875rem; }
.pied a { color: var(--encre); text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied p { margin: var(--space-3) 0 0; font-size: .875rem; line-height: 1.375rem; color: var(--encre-douce); max-width: 36ch; }
.pied__legal { margin-top: var(--space-8); padding-top: var(--space-5); border-top: var(--trait-fin) solid var(--trame); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-size: .8125rem; color: var(--encre-douce); }
.pied__legal a { color: var(--encre-douce); }
@media (max-width: 800px) { .pied__grille { grid-template-columns: 1fr; gap: var(--space-6); } .pied ul { gap: 0; } .pied li a { display: inline-block; padding: 11px 0; } }

/* Logo en traits (variante monochrome à valider par Redoine) : suit la couleur du texte et le mode nuit */
.logo-trait { display: block; width: 36px; height: auto; aspect-ratio: 512 / 499; flex: none; }
.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Puzzle du logo : les quatre pièces (les quatre métiers) s'assemblent quand la section entre à l'écran */
.interlocuteur { display: grid; grid-template-columns: minmax(0, 1fr) 17.5rem; gap: var(--space-12); align-items: center; }
.puzzle { margin: 0; color: var(--caramel); }
.puzzle__ensemble { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-3); row-gap: var(--space-2); align-items: center; }
.puzzle__logo { display: block; grid-column: 1 / -1; grid-row: 2; width: 100%; height: auto; }
.puzzle__metier { font-family: var(--font-cote); font-size: .625rem; line-height: 1rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--caramel-texte); transition: opacity .4s ease-out; }
.puzzle__metier--hg { grid-column: 1; grid-row: 1; text-align: left; }
.puzzle__metier--hd { grid-column: 2; grid-row: 1; text-align: right; }
.puzzle__metier--bg { grid-column: 1; grid-row: 3; text-align: left; }
.puzzle__metier--bd { grid-column: 2; grid-row: 3; text-align: right; }
.puzzle__piece { transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), opacity .3s ease-out; }
.puzzle--pret.puzzle--assemble .puzzle__piece--hd { transition-delay: .06s; }
.puzzle--pret.puzzle--assemble .puzzle__piece--bg { transition-delay: .12s; }
.puzzle--pret.puzzle--assemble .puzzle__piece--bd { transition-delay: .18s; }
.puzzle--pret:not(.puzzle--assemble) .puzzle__piece { opacity: 0; }
.puzzle--pret:not(.puzzle--assemble) .puzzle__piece--hg { transform: translate(-290px, -240px); }
.puzzle--pret:not(.puzzle--assemble) .puzzle__piece--hd { transform: translate(290px, -240px); }
.puzzle--pret:not(.puzzle--assemble) .puzzle__piece--bg { transform: translate(-290px, 240px); }
.puzzle--pret:not(.puzzle--assemble) .puzzle__piece--bd { transform: translate(290px, 240px); }
.puzzle--pret:not(.puzzle--assemble) .puzzle__metier { opacity: 0; }
.puzzle--pret.puzzle--assemble .puzzle__metier--hg { transition-delay: 1.1s; }
.puzzle--pret.puzzle--assemble .puzzle__metier--hd { transition-delay: 1.16s; }
.puzzle--pret.puzzle--assemble .puzzle__metier--bg { transition-delay: 1.22s; }
.puzzle--pret.puzzle--assemble .puzzle__metier--bd { transition-delay: 1.28s; }
.puzzle figcaption { margin-top: var(--space-3); text-align: center; font-family: var(--font-cote); font-size: .75rem; line-height: 1rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bleu-plan); }
/* Survol : la photo du métier apparaît dans sa pièce, découpée à sa forme (retour de Redoine du 2026-10-28 ; photos Unsplash, voir assets/img/CREDITS.md).
   Décoratif : la figure est masquée aux lecteurs d'écran ; sans survol (écran tactile), le logo reste en traits. */
.puzzle__photo { opacity: 0; transition: opacity .35s ease-out; }
.puzzle__piece:hover .puzzle__photo,
.puzzle__ensemble:has(.puzzle__metier--hg:hover) .puzzle__piece--hg .puzzle__photo,
.puzzle__ensemble:has(.puzzle__metier--hd:hover) .puzzle__piece--hd .puzzle__photo,
.puzzle__ensemble:has(.puzzle__metier--bg:hover) .puzzle__piece--bg .puzzle__photo,
.puzzle__ensemble:has(.puzzle__metier--bd:hover) .puzzle__piece--bd .puzzle__photo { opacity: 1; }
.puzzle__metier { cursor: default; transition: color .2s ease-out; }
.puzzle__metier:hover { color: var(--encre); }
@media (max-width: 860px) { .interlocuteur { grid-template-columns: 1fr; gap: var(--space-8); } .puzzle { max-width: 220px; margin-inline: auto; } }

/* Ruban des quatre métiers : défilement continu, séparateurs en lignes de cote (piste dupliquée pour une boucle sans saut) */
.bandeau { position: relative; overflow: hidden; background: var(--calque-releve); }
.bandeau__texte { margin: 0; padding: var(--space-4); text-align: center; font-family: var(--font-cote); font-size: .75rem; line-height: 1rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-douce); }
.bandeau__piste { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .bandeau { display: flex; align-items: center; }
  .bandeau__texte { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bandeau__voile { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  /* Couche graphique dédiée : sans elle, la pause au survol redessine le texte à une position fractionnaire et il « frise » (retour de Redoine du 2026-10-28) */
  .bandeau__piste { display: flex; width: max-content; animation: bandeau-defile 80s linear infinite; will-change: transform; backface-visibility: hidden; }
  .bandeau:hover .bandeau__piste, .bandeau:focus-within .bandeau__piste { animation-play-state: paused; }
}
.bandeau__piste ul { display: flex; align-items: center; flex: none; margin: 0; padding: 0; list-style: none; }
.bandeau__piste li { flex: none; padding: var(--space-4) 0; font-family: var(--font-cote); font-size: .75rem; line-height: 1rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--encre); }
/* Séparateur : pièce de puzzle caramel (masque assets/img/piece-bandeau.svg), 22 px, inclinée de 12°, espace de chaque côté supérieur à sa largeur */
.bandeau__piste .bandeau__piece { width: 22px; height: 22px; padding: 0; margin: 0 32px; background: var(--caramel); -webkit-mask: url("img/piece-bandeau.svg") no-repeat center / contain; mask: url("img/piece-bandeau.svg") no-repeat center / contain; transform: rotate(-12deg); }
@keyframes bandeau-defile { to { transform: translateX(-50%); } }

/* Étiquettes et cotes : Schibsted Grotesk, capitales espacées, chiffres tabulaires */
.sb-etiquette { font-weight: 600; letter-spacing: .08em; }
.sb-cote, .sb-fiche { font-variant-numeric: tabular-nums; }

/* Nos engagements (accueil) */
.engagements { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.engagements li { padding-top: var(--space-4); border-top: var(--trait-plan) solid var(--caramel); }
.engagements h3 { margin: 0 0 var(--space-2); font-family: var(--font-titre); font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; }
.engagements p { margin: 0; font-size: .9375rem; line-height: 1.5rem; color: var(--encre-douce); }
@media (max-width: 960px) { .engagements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .engagements { grid-template-columns: 1fr; } }

/* Frise des six étapes (accueil, Méthode) : une pièce de puzzle par étape, emboîtée dans la suivante.
   La pièce est un masque (assets/img/piece.svg, corps 100 × 56 + tenon) ; le numéro est posé dessus.
   Sans JavaScript, ou si l'on demande moins de mouvement : frise assemblée. */
.frise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6) 0; }
.frise li { display: flex; flex-direction: column; }
.frise__piece { position: relative; isolation: isolate; display: grid; place-items: center; aspect-ratio: 100 / 56; width: 100%; font-family: var(--font-titre); font-size: 1.5rem; font-weight: 700; color: var(--sur-caramel); font-variant-numeric: tabular-nums; }
.frise li:not(:first-child) .frise__piece { padding-left: 10%; }
.frise__piece::before { content: ""; position: absolute; z-index: -1; inset: 0 auto auto 0; width: 123%; aspect-ratio: 123 / 56; background: var(--caramel); -webkit-mask: url("img/piece.svg") no-repeat 0 0 / 100% 100%; mask: url("img/piece.svg") no-repeat 0 0 / 100% 100%; }
.frise li:nth-child(even) .frise__piece::before { background: color-mix(in srgb, var(--caramel) 50%, var(--calque-releve)); }
.frise li:nth-child(even) .frise__piece { color: var(--encre); }
.frise li:first-child .frise__piece::before { -webkit-mask-image: url("img/piece-debut.svg"); mask-image: url("img/piece-debut.svg"); }
.frise li:last-child .frise__piece::before { width: 100%; aspect-ratio: 100 / 56; -webkit-mask-size: 123% 100%; mask-size: 123% 100%; }
.frise h3 { margin: var(--space-4) var(--space-5) 0 0; font-family: var(--font-titre); font-size: 1.0625rem; line-height: 1.375rem; font-weight: 600; }
.frise p { margin: var(--space-2) var(--space-5) 0 0; font-size: .9375rem; line-height: 1.375rem; color: var(--encre-douce); }
@media (max-width: 1080px) {
  .frise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .frise li:nth-child(4) .frise__piece { padding-left: 0; }
  .frise li:nth-child(4) .frise__piece::before { -webkit-mask-image: url("img/piece-debut.svg"); mask-image: url("img/piece-debut.svg"); }
  .frise li:nth-child(3) .frise__piece::before { width: 100%; aspect-ratio: 100 / 56; -webkit-mask-size: 123% 100%; mask-size: 123% 100%; }
}
@media (max-width: 640px) {
  .frise { grid-template-columns: 1fr; gap: var(--space-5); }
  .frise li { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .frise__piece, .frise li:not(:first-child) .frise__piece { grid-row: span 2; font-size: 1.125rem; padding-left: 0; }
  .frise li:nth-child(n) .frise__piece::before { width: 123%; aspect-ratio: 123 / 56; -webkit-mask: url("img/piece-debut.svg") no-repeat 0 0 / 100% 100%; mask: url("img/piece-debut.svg") no-repeat 0 0 / 100% 100%; }
  .frise h3, .frise p { margin-right: 0; }
  .frise h3 { margin-top: 0; }
}
/* Emboîtement déclenché par assets/puzzle.js quand chaque étape est bien visible (classe frise__etape--posee), rejoué à chaque retour
   à l'écran : le script retire la classe quand l'étape sort de l'écran (retours de Redoine du 2026-10-28 : plus lent, texte avec la pièce,
   animation maintenue en remontant). Sur une ligne, les pièces partent l'une après l'autre (0,55 s d'écart, 1,6 s chacune) ;
   le titre puis le texte de chaque étape apparaissent quand sa pièce se pose. */
@media (prefers-reduced-motion: no-preference) {
  .frise li { --delai: 0s; }
  .frise__etape--prete:not(.frise__etape--posee) :is(.frise__piece, h3, p) { opacity: 0; }
  .frise__etape--posee .frise__piece { animation: piece-emboite 1.6s cubic-bezier(.16, 1, .3, 1) var(--delai) both; }
  .frise__etape--posee h3 { animation: texte-apparait .6s ease-out calc(var(--delai) + .9s) both; }
  .frise__etape--posee p { animation: texte-apparait .6s ease-out calc(var(--delai) + 1.05s) both; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 641px) {
  .frise li:nth-child(3n+2) { --delai: .55s; }
  .frise li:nth-child(3n) { --delai: 1.1s; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1081px) {
  .frise li:nth-child(4) { --delai: 1.65s; }
  .frise li:nth-child(5) { --delai: 2.2s; }
  .frise li:nth-child(6) { --delai: 2.75s; }
}
@keyframes piece-emboite { from { transform: translate(36px, -26px) rotate(8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes texte-apparait { from { opacity: 0; transform: translateY(6px); } }

/* Photos d'ambiance (Unsplash, voir assets/img/CREDITS.md) : jamais présentées comme des réalisations SOBIMA */
.ambiance { margin: var(--space-8) 0 0; }
.ambiance img, .mosaique img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--radius-trait); }
.ambiance img { aspect-ratio: 21 / 9; }
.mosaique { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--space-4); }
.mosaique figure { margin: 0; min-height: 0; height: 100%; }
.mosaique__grande { grid-row: span 2; }
.mosaique__grande img { aspect-ratio: 3 / 2; height: 100%; }
.mosaique__petite img { height: 100%; aspect-ratio: 3 / 2; }
@media (max-width: 760px) {
  .mosaique { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .mosaique figure { height: auto; }
  .mosaique__grande { grid-column: span 2; grid-row: auto; }
  .mosaique__petite img { aspect-ratio: 4 / 3; height: auto; }
  .ambiance img { aspect-ratio: 16 / 9; }
}
.ambiance__legende { margin: var(--space-2) 0 0; font-size: .75rem; line-height: 1rem; letter-spacing: .04em; color: var(--encre-douce); }
.mosaique__legende { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) { .mosaique__legende { grid-column: span 2; } }

/* Barre d'action mobile (zone du pouce) et cibles tactiles */
.barre-mobile { display: none; }
@media (max-width: 1080px) {
  html { scroll-padding-top: var(--space-4); scroll-padding-bottom: 88px; }
  .etape { scroll-margin-top: var(--space-4); }
  .barre-mobile { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); background: var(--calque-releve); border-top: var(--trait-plan) solid var(--encre); }
  .barre-mobile .sb-bouton { justify-content: center; }
  body { padding-bottom: 72px; }
  .sb-marque { min-height: 44px; }
  a.valeur { display: inline-block; padding: 12px 0; }
  .pied__legal a { display: inline-block; padding: 12px 0; }
}

/* Téléphone en paysage : pas de barre d'action fixe (en-tête + barre = 38 % de l'écran) */
@media (max-width: 1080px) and (max-height: 500px) {
  html { scroll-padding-bottom: 0; }
  .barre-mobile { display: none; }
  body { padding-bottom: 0; }
}

/* Barre d'action mobile : n'apparaît qu'une fois le bouton du premier écran sorti de l'écran.
   CSS seul (animation liée au défilement) ; reste visible si le focus clavier entre dedans. */
@supports (animation-timeline: view()) {
  @media (max-width: 1080px) {
    body { timeline-scope: --cta-hero; }
    .sb-hero .sb-row > .sb-bouton--testfit { view-timeline-name: --cta-hero; }
    .barre-mobile { animation: barre-apparait linear both; animation-timeline: --cta-hero; animation-range: exit 0% exit 100%; }
    .barre-mobile:focus-within { animation: none; transform: none; visibility: visible; }
  }
}
@keyframes barre-apparait { from { transform: translateY(100%); visibility: hidden; } to { transform: none; visibility: visible; } }

/* Contraste forcé (Windows High Contrast) */
@media (forced-colors: active) {
  .liste-puces li::before, .piliers span::before { background: CanvasText; }
  .frise__piece::before { background: Canvas; border: 1px solid CanvasText; -webkit-mask: none !important; mask: none !important; width: 100% !important; }
}


/* 2026-10-28 : texte justifié dans les étapes de l'Approche (demande de Redoine) */
.etape .texte p {
  text-align: justify;
}

/* Page Approche : garanties en trois points, juste après les étapes (retour de Redoine du 2026-10-28).
   Le « 12 » de la garantie de parfait achèvement est en --caramel-texte : le caramel seul n'atteint pas 3:1 sur fond clair. */
.garanties { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.garantie { background: var(--calque-releve); border-top: 3px solid var(--caramel); border-radius: var(--radius-trait); padding: var(--space-8) var(--space-6); }
.garantie__icone { display: block; width: 56px; height: 56px; margin-bottom: var(--space-4); fill: none; stroke: var(--caramel); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.garantie__chiffre { display: flex; align-items: baseline; gap: var(--space-2); height: 56px; margin: 0 0 var(--space-4); font-family: var(--font-titre); font-size: 4.5rem; line-height: 56px; font-weight: 700; letter-spacing: -.03em; color: var(--caramel-texte); }
.garantie__chiffre span { font-size: 1.125rem; letter-spacing: 0; color: var(--encre); }
.garantie h3 { margin: 0; font-family: var(--font-titre); font-size: 1.125rem; line-height: 1.4; font-weight: 700; }
.garantie p:not(.garantie__chiffre) { margin: var(--space-2) 0 0; color: var(--encre-douce); }
@media (max-width: 800px) { .garanties { grid-template-columns: 1fr; gap: var(--space-4); } .garantie { padding: var(--space-6) var(--space-5); } }


/* Page Réemploi (2026-10-28) : le mobilier avec une photo et quatre leviers, puis les matériaux en cartes photo.
   Photos d'ambiance Unsplash (assets/img/CREDITS.md), jamais présentées comme des réalisations SOBIMA. */
.reemploi-photo { margin: 0; }
.reemploi-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-trait); }
.leviers { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); counter-reset: levier; }
.leviers li { margin: 0; padding: var(--space-5); background: var(--calque); border-radius: var(--radius-trait); counter-increment: levier; }
.leviers h3 { margin: 0 0 var(--space-2); font-family: var(--font-titre); font-size: 1.0625rem; line-height: 1.375rem; font-weight: 700; }
.leviers h3::before { content: counter(levier, decimal-leading-zero) " "; color: var(--caramel-texte); font-family: var(--font-cote); font-size: .8125rem; letter-spacing: .04em; }
.leviers p { margin: 0; font-size: .9375rem; line-height: 1.375rem; color: var(--encre-douce); }
.reemploi-mobilier .texte { max-width: none; }
.leviers-grille { position: relative; margin: 0 0 var(--space-6); }
.leviers-grille .leviers { margin: 0; gap: var(--space-16); grid-template-rows: repeat(2, 1fr); }
.reemploi-icone { display: block; width: 56px; height: 56px; margin: 0; fill: none; stroke: var(--vert-reemploi); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.leviers-grille .reemploi-icone { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.materiaux { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.materiaux figure { margin: 0 0 var(--space-4); }
.materiaux img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-trait); }
.materiaux h3 { margin: 0 0 var(--space-2); font-family: var(--font-titre); font-size: 1.125rem; line-height: 1.4; font-weight: 700; }
.materiaux p { margin: 0; font-size: .9375rem; line-height: 1.375rem; color: var(--encre-douce); }
.materiaux__note { margin: var(--space-8) 0 0; max-width: 64ch; color: var(--encre-douce); }
@media (max-width: 1080px) { .materiaux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .materiaux, .leviers { grid-template-columns: 1fr; }
  .leviers-grille .leviers { gap: var(--space-4); grid-template-rows: auto; }
  .leviers-grille .reemploi-icone { position: static; transform: none; margin: var(--space-6) auto 0; }
}