/* Le Stoud : surcharges du template Altum.
   Typo : Poppins partout (Vince, 2026-10-22 : Inter est gardée pour Unik Studio), Raveo Display du template conservée.
   Seul l'accent change : le jaune du logo Stoud remplace l'orange Altum. */
:root {
  --stoud-jaune: #fabd4a;
  /* Lot 6, D22 : largeur du logo du menu, une seule variable pour le S et le mot (superposés au pixel). */
  --logo-nav: 168px;
  --_🎨-color--base---brand: var(--stoud-jaune);
  --_🎨-color--base---colors--accent: var(--stoud-jaune);
  /* Lot 11, T1 : l'échelle des transitions du site (labo/lot11/T1/transitions.md). Trois durées : rapide pour les états
     (couleur, bordure, opacité, petite icône), moyenne pour les mouvements (transform, apparitions, fondus), lente pour les
     zooms et les fondus de photo ; une courbe, la sortie douce du site, et le léger ressort de l'éventail de l'accueil. */
  --stoud-duree-rapide: .3s;
  --stoud-duree: .6s;
  --stoud-duree-lente: 1.1s;
  --stoud-courbe: cubic-bezier(.22, 1, .36, 1);
  --stoud-courbe-ressort: cubic-bezier(.34, 1.28, .64, 1);
}

@media (max-width: 767px) { :root { --logo-nav: 148px; } }

/* Titres en Poppins serrés à -60 (−0,06 em, comme dans Figma), à toutes les largeurs (Vince, 2026-10-22). Le template
   redéfinit ces jetons sur body dans ses @media (991, 767 et 479 px) ; cette règle vient après, donc elle l'emporte. */
:root, body {
  --_🔠-typography---letter-spacing--h0: -0.06em;
  --_🔠-typography---letter-spacing--h1: -0.06em;
  --_🔠-typography---letter-spacing--h2: -0.06em;
  --_🔠-typography---letter-spacing--h3: -0.06em;
  --_🔠-typography---letter-spacing--h4: -0.06em;
  --_🔠-typography---letter-spacing--h5: -0.06em;
  --_🔠-typography---letter-spacing--h6: -0.06em;
}

/* Logos Stoud à la place des logos Altum (lot 6, D22 : 132 → 168 px, 148 px en mobile) */
.logo-nav_stoud { width: var(--logo-nav); height: auto; display: flex; color: currentColor; }
.logo-nav_stoud svg { height: auto; }
.logo-footer_stoud { width: 100%; color: currentColor; }
.logo-footer_stoud svg { width: 100%; height: auto; display: block; } /* logo figé : la boucle « Chaleur » est retirée (Vince, 2026-10-21) */
.logo-cta_stoud { width: 56px; height: 70px; }

/* Formulaires : messages gérés par /js/formulaires.js */
.form-block .w-form-done, .form-block .w-form-fail { display: none; }
.form-block.is-sent .w-form-done, .form-block.is-error .w-form-fail { display: block; }
.consent_form { font-size: 13px; line-height: 18px; opacity: .64; margin-top: 16px; }
.consent_form a { color: inherit; text-decoration: underline; }
.wrap_form-fields .input_row { display: grid; grid-template-columns: 1fr 1fr; gap: inherit; }
@media (max-width: 767px) { .wrap_form-fields .input_row { grid-template-columns: 1fr; } }
.text-field.is-select { appearance: none; background-image: none; }
.form_label { font-size: 13px; opacity: .64; margin-bottom: 6px; display: block; }

/* Bloc d'appel final : dégradé jaune Stoud à la place de la photo orange d'Altum.
   Lot 6, point 1 : variante B « Jaune clair » (labo/pied-de-page.html), texte et S en noir. */
.section_cta {
  background-color: var(--stoud-jaune);
  background-image:
    radial-gradient(70% 60% at 85% 100%, rgba(255, 244, 214, .9) 0%, rgba(255, 244, 214, 0) 70%),
    radial-gradient(60% 50% at 10% 0%, rgba(232, 150, 30, .7) 0%, rgba(232, 150, 30, 0) 70%),
    linear-gradient(115deg, #f2a838 0%, #fabd4a 45%, #fcd27e 100%);
}
.section_cta .content_cta-block {
  --_🎨-color--tokens---tone--strong: var(--_🎨-color--base---base--dark-100);
  --_🎨-color--tokens---tone--subtle: var(--_🎨-color--base---base--dark-64);
  --_🎨-color--tokens---tone--ghost: var(--_🎨-color--base---base--dark-12);
}
.section_cta .logo-cta_stoud { color: var(--_🎨-color--base---base--dark-100); }
.section_cta .logo-cta_stoud path, .section_cta .logo-cta_stoud ellipse { fill: currentColor; }
/* Lot 11, R13 (Vince : le titre du bloc d'appel final un peu plus large partout) : Altum le bridait à 25,88rem (414 px ;
   « Besoin d'un photographe ou d'une équipe complète? » sur 4 lignes). Il prend la largeur des titres de section (jeton,
   40rem), lignes équilibrées. */
.section_cta .headline_cta-block { max-width: min(var(--stoud-largeur-titre-section), 100%); }
.section_cta .headline_cta-block h2 { text-wrap: balance; }
/* Pied de page collant plus haut que l'écran : l'accroche passe du bas au haut de l'écran, sous le flou du menu
   (bottom négatif = hauteur de l'écran − hauteur du pied, publiée par /js/pied-de-page.js, − la place du flou).
   Retouches du lot 6, R1 : le titre du pied se pose au « haut collant » (bas du flou + petit espace), sa marge du haut
   comprise ; tout en bas de la page, voir « pied compact » plus bas. */
.footer { bottom: min(0px, calc(100vh - var(--hauteur-footer, 0px) - var(--haut-collant, 0px) + var(--spacing--space-medium))); }
.brand_footer { padding: 0 32px 24px; box-sizing: border-box; }
@media (max-width: 767px) { .brand_footer { padding: 0 16px 16px; } }
/* Restes d'orange Altum dans des composants inutilisés */
.folder_front-side, .testimonial-bg { background-image: linear-gradient(135deg, #fabd4a, #f5a623); }
.bg-folder { background-image: linear-gradient(135deg, #f5a623, #c9861f); }

/* Hero : la photo du salon est claire, on fonce le voile pour la lisibilité du texte blanc */
.overlay-hero_stoud {
  z-index: 1;
  background-image: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.72) 100%);
}

/* Logo du menu : le S jaune reste dans la couche normale ; le mot « LE STOUD. » passe dans la
   couche en mode différence du template pour rester lisible sur les sections claires et foncées. */
.brand_navbar { max-width: none; }
.logo-nav_mot { width: var(--logo-nav); display: flex; pointer-events: none; }
.logo-nav_mot svg, .logo-nav_stoud svg { width: 100%; height: auto; display: block; }

/* /espaces : les deux pièces, côte à côte */
.duo_pieces { display: grid; grid-template-columns: 1fr 1fr; gap: var(--layout-grid--gutter); margin-top: var(--spacing--space-large); }
.piece { display: flex; flex-direction: column; gap: var(--spacing--space-small); }
.piece_image { border-radius: var(--_🔘-radius---general--default); overflow: hidden; aspect-ratio: 3 / 2; }
@media (max-width: 767px) { .duo_pieces { grid-template-columns: 1fr; } }

/* Pages d'espaces : photo d'en-tête, fiche, galerie et grille complète */
.image_hero-espace { border-radius: var(--_🔘-radius---general--default); overflow: hidden; aspect-ratio: 16 / 7; margin-bottom: var(--spacing--space-large); }
@media (max-width: 767px) { .image_hero-espace { aspect-ratio: 4 / 3; } }
.headline_hero-pricing .button-group { margin-top: var(--spacing--space-xx-small); }
.fiche_espace { display: grid; grid-template-columns: 1fr 1fr; gap: var(--layout-grid--gutter); margin-top: var(--spacing--space-large); }
.fiche_bloc { display: flex; flex-direction: column; gap: var(--spacing--space-small); }
.conditions_espace { margin: var(--spacing--space-large) 0 0; padding: var(--spacing--space-small) 0 0; list-style: none; border-top: 1px solid #e0e0e0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
@media (max-width: 767px) { .fiche_espace { grid-template-columns: 1fr; row-gap: var(--spacing--space-large); } }
.section_galerie { padding-top: var(--section-padding--medium); padding-bottom: var(--section-padding--medium); }
.headline_galerie { display: flex; flex-direction: column; gap: var(--spacing--space-tiny); margin-bottom: var(--spacing--space-large); max-width: 40rem; }
.galerie_stoud { display: grid; gap: var(--spacing--space-xx-small); }
.galerie_stoud.is-4 { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(220px, 30vw, 400px); }
.galerie_stoud.is-3 { grid-template-columns: repeat(3, 1fr); }
.galerie_stoud.is-3 .galerie_item { aspect-ratio: 4 / 5; }
.galerie_item { border-radius: var(--_🔘-radius---general--default); overflow: hidden; }
.galerie_item.is-large { grid-column: span 2; }
@media (max-width: 767px) {
  .galerie_stoud.is-4 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 52vw; }
  .galerie_stoud.is-3 { grid-template-columns: 1fr 1fr; }
  .galerie_stoud.is-3 .galerie_item:first-child { grid-column: span 2; aspect-ratio: 4 / 3; }
}
.grille_stoud h3 { font-size: inherit; line-height: inherit; margin: 0; }
.grille_stoud .table_description-cell, .grille_stoud .table_check-cell { padding-top: 24px; padding-bottom: 24px; justify-content: center; }
.grille_stoud .table_grid + .pricing-rows-tiles { margin-top: var(--spacing--space-large); }
.notes_grille { margin: var(--spacing--space-small) 0 0; padding: 0; list-style: none; font-size: 14px; opacity: .7; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 767px) {
  .grille_stoud { overflow: visible; }
  .grille_stoud .pricing-rows-tiles, .grille_stoud .table-row { flex-wrap: wrap; }
  .grille_stoud .table-description_column-tiles, .grille_stoud .table_description-cell { width: 60%; flex: none; }
  .grille_stoud .table-check_column-tiles, .grille_stoud .table_check-cell { width: 40%; min-width: 0; flex: none; }
  .grille_stoud .table-check_column-tiles.is-detail { display: none; }
  .grille_stoud .table_description-cell, .grille_stoud .table_check-cell { padding-top: 18px; padding-bottom: 18px; }
  .grille_stoud .table-row:has(.is-detail > div:not(:empty)) > :not(.is-detail) { padding-bottom: 4px; }
  .grille_stoud .table_check-cell.is-detail { width: 100%; padding-top: 0; font-size: 14px; opacity: .7; }
  .grille_stoud .table_check-cell.is-detail:has(> div:empty) { display: none; }
}
.pitch_espace { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing--space-small); }

/* /collectif : chiffres, monogrammes de la gang (en attendant les portraits) et renvois aux studios */
.chiffres_collectif { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--layout-grid--gutter); margin-top: var(--spacing--space-huge); padding-top: var(--spacing--space-small); border-top: 1px solid #e0e0e0; margin-bottom: var(--stoud-espace-section); }
.chiffre_collectif { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 767px) { .chiffres_collectif { grid-template-columns: 1fr 1fr; row-gap: var(--spacing--space-large); } }
.monogramme_membre { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--stoud-jaune); color: #111; font-size: clamp(64px, 9vw, 128px); font-weight: 500; letter-spacing: -0.04em; }
.renvois_studios { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--spacing--space-xx-small); margin-top: 9rem; }
.liens_studios { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing--space-medium); }

/* /collectif, hero : à 100vh fixe, la boîte des photos se tassait sur un écran bas et les photos (en absolu)
   couvraient le paragraphe. Le hero prend la hauteur de son contenu, au moins celle de l'écran. */
.master_hero-about { height: auto; min-height: min(100vh, 75rem); }
.master_about-images { flex-shrink: 0; }
/* Les photos inclinées dépassent de leur boîte d’≈ 50 px vers le haut : dès 992 px, elles frôlaient le H1. */
@media (min-width: 992px) { .master_about-images { margin-top: var(--stoud-espace-blocs); } }

/* Page 404 aux couleurs du Stoud */

/* Menu : rubrique active, y compris dans ses sous-pages (webflow.js retire w--current hors correspondance exacte) */
.link_nav-menu.is-actif { opacity: 1; color: var(--_🎨-color--tokens---tone--strong); }

/* Cartes de trois colonnes : largeurs égales (1fr laissait le contenu élargir certaines colonnes, à 992 px) */
.grid_features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991px) { .grid_features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .grid_features { grid-template-columns: minmax(0, 1fr); } }

/* Accessibilité (passe finale) : textes pâles au contraste AA (4,5:1). Le ton faint reste pour les bordures et les fonds. */
.tone-faint, .wrap_scroll-text { color: var(--_🎨-color--tokens---tone--subtle); }
.paragraph.opacity-50 { opacity: .6; }
/* Focus clavier visible partout (le template met outline: 0 sur plusieurs éléments) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex="0"]:focus-visible, .w-checkbox:focus-within { outline: 2px solid currentColor; outline-offset: 3px; }

/* Bloc de recrutement (mise en page Stringer CTA 2 : photo 7 colonnes, texte 4 colonnes) */
.section_rejoindre { padding-top: var(--section-padding--large); padding-bottom: var(--section-padding--large); background-color: var(--_🎨-color--tokens---background--base); position: relative; }
.grille_rejoindre { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--layout-grid--gutter); align-items: center; }
.media_rejoindre { grid-column: 1 / span 7; aspect-ratio: 3 / 2; border-radius: var(--_🔘-radius---general--default); overflow: hidden; }
.media_rejoindre img { height: 112%; margin-top: -6%; }
.texte_rejoindre { grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing--space-small); }
.legende_rejoindre { margin: 0; font-size: 14px; color: var(--_🎨-color--tokens---tone--subtle); }
.legende_rejoindre a { color: inherit; text-decoration: underline; }
@media (max-width: 991px) { .texte_rejoindre { grid-column: 8 / span 5; } }
@media (max-width: 767px) {
  .grille_rejoindre { row-gap: var(--spacing--space-large); }
  .media_rejoindre, .texte_rejoindre { grid-column: 1 / -1; }
}

/* Parité de lignes des cartes à trois colonnes (accueil, collectif) : la rédaction ne peut pas tenir
   à 192 px de large, alors on réserve la hauteur du plus long titre et du plus long texte, par largeur. */
@media (min-width: 992px) { .grid_features .card_feature h3 { min-height: 2lh; } }
@media (min-width: 992px) and (max-width: 1039px) {
  .grid_features .card_feature h3 { min-height: 3lh; }
  .grid_features .card_feature p { min-height: 7lh; }
}
@media (min-width: 1040px) and (max-width: 1099px) { .grid_features .card_feature p { min-height: 6lh; } }
/* En mobile, les cartes sont empilées : la hauteur minimale d'Altum (20rem) n'y laissait qu'un grand vide. */
@media (max-width: 767px) { .grid_features .card_feature { min-height: 0; } }

/* ── Règles d'espacement du Stoud (lot 3, U2). Affichées sur /style-guide, détaillées dans README.md.
   Toujours en jeton, jamais en pixels écrits en dur. Valeurs : ≥ 768 px / ≤ 767 px.
   Sur body, comme les jetons d'Altum (leurs valeurs mobiles sont redéfinies sur body). ── */
body {
  --stoud-espace-section: var(--section-padding--medium);   /* 120 / 80 : entre le contenu de deux sections */
  --stoud-espace-titre: var(--spacing--space-large);        /* 80 / 48 : du titre d'une section à son contenu */
  --stoud-espace-blocs: var(--spacing--space-small);        /* 48 / 32 : entre deux blocs d'une même section */
  --stoud-espace-rangees: var(--layout-grid--gutter);       /* 16 / 12 : entre les rangées (et colonnes) d'une grille */
  --stoud-marge-laterale: var(--layout-grid--margin);       /* 32 / 16 : marge de l'écran, posée par .padding-global */
}
.section_stoud { padding-top: var(--stoud-espace-section); padding-bottom: var(--stoud-espace-section); }
.titre-section_stoud { margin-bottom: var(--stoud-espace-titre); }

/* /style-guide (page interne, hors index) */
.regles_style-guide { display: grid; gap: var(--stoud-espace-rangees); }
.regle_style-guide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--stoud-espace-rangees); align-items: center; padding: var(--spacing--space-nano) 0; border-top: 1px solid var(--_🎨-color--base---base--dark-12); }
.regle_style-guide code, .jetons_style-guide code { font-size: 13px; }
.barre_style-guide { height: var(--spacing--space-minimal); background-color: var(--stoud-jaune); border-radius: var(--spacing--space-hairline); }
.nuancier_style-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--stoud-espace-rangees); }
.pastille_style-guide { aspect-ratio: 3 / 2; border-radius: var(--spacing--space-minimal); border: 1px solid var(--_🎨-color--base---base--dark-12); }
.tons_style-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stoud-espace-rangees); }
.ton_style-guide { display: flex; flex-direction: column; gap: var(--spacing--space-minimal); padding: var(--spacing--space-tiny); border-radius: var(--spacing--space-minimal); border: 1px solid var(--_🎨-color--base---base--dark-12); background-color: var(--_🎨-color--tokens---background--base); color: var(--_🎨-color--tokens---tone--strong); }
.jetons_style-guide { width: 100%; border-collapse: collapse; }
.jetons_style-guide th, .jetons_style-guide td { text-align: left; padding: var(--spacing--space-minimal) var(--spacing--space-minimal) var(--spacing--space-minimal) 0; border-top: 1px solid var(--_🎨-color--base---base--dark-12); font-size: 14px; }
.demo_style-guide { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing--space-xx-small); }
.vitrine_style-guide { padding-top: var(--stoud-espace-section); }
.vitrine_style-guide > .padding-global { margin-bottom: var(--stoud-espace-titre); }

@media (max-width: 767px) {
  .regle_style-guide, .tons_style-guide { grid-template-columns: minmax(0, 1fr); }
  .nuancier_style-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jetons_style-guide { display: block; overflow-x: auto; }
}

/* /espaces, « Une salle, trois usages » : la disposition compacte des lots 6 et 10 (tracé de 1000 px, cartes à 80 %) est
   remplacée au lot 11 par R15 (fin de fichier) : tracé et cartes à l'échelle de l'écran, centrés. */
/* Sous 480 px, les positions d'Altum font se chevaucher les cartes et en coupent deux : elles passent en liste. */
@media (max-width: 479px) {
  .wrap_timeline-line { height: auto; flex-direction: column; align-items: stretch; gap: var(--stoud-espace-rangees); }
  .wrap_timeline-line .card_step { position: static; transform: none; max-width: none; width: 100%; }
  .wrap_timeline-line .line-dashed, .wrap_timeline-line .circle_line { display: none; }
}
/* /espaces, hero : sur un écran bas, la photo (26,5rem) poussait le H1 sous la ligne de flottaison.
   Elle cède de la hauteur pour que le début du titre (deux lignes) reste dans le premier écran. */
@media (min-width: 768px) {
  .image_hero-product { height: clamp(14rem, calc(100vh - var(--section-padding--large) - 16rem), 26.5rem); }
}
/* Cartes de prix sur plusieurs rangées (/forfaits-photo, 7 forfaits) : Altum centre chaque carte dans sa rangée
   (pensé pour 3 cartes avec une vedette plus haute) ; on les étire pour qu'une rangée ait une seule hauteur. */
.grid_pricing:has(> .card_pricing:nth-child(4)) { align-items: stretch; }
/* FaqSection : de 992 à 1439 px, la colonne du titre (4/12, 44 px de marge intérieure) laissait ≈ 216 px à un titre
   de 64 px, soit jusqu'à 5 lignes. Elle passe à 5/12, avec une marge intérieure réduite, et ses lignes sont équilibrées. */
@media (min-width: 992px) and (max-width: 1439px) {
  .faq_halves { grid-template-columns: 5fr 7fr; }
  .left_faq { padding-left: var(--spacing--space-tiny); padding-right: var(--spacing--space-tiny); text-wrap: balance; }
}
/* Contact, Réserver, Rejoindre : une fois empilé (≤ 991 px), le formulaire et son H1 passent avant la colonne d'infos. */
@media (max-width: 991px) { .master_contact > .right_contact { order: -1; } }

/* Fond du menu. Lot 6, D23 : plus de bande blanche ou noire, un flou transparent à la manière de Jores
   (jores-template.webflow.io, .blur-effect) : flou de 20 px qui s'efface vers le bas (masque), 1,4 fois la hauteur du
   menu (la hauteur du menu en mobile), opacité qui suit le défilement (/js/fond-menu.js). Le mot « LE STOUD. » et le bouton,
   en mode différence, restent lisibles sur tout. --hauteur-fond-menu (marge du haut + logo + marge du bas) sert aussi au
   pied de page et aux éléments collants : elle suit la hauteur du logo (viewBox 1614,69 × 305,94 : le logo Poppins du lot 11, L1, remis le 2026-10-27 à la place du
   Brutaze, que Vince trouvait difficile à lire). */
body { --hauteur-fond-menu: calc(var(--spacing--space-xsmall) + var(--logo-nav) * 305.94 / 1614.69 + var(--spacing--space-tiny)); }
/* Retouches du lot 6, R1 : la hauteur réelle du flou (1,4 × le menu en bureau, 1 × en mobile) et le « haut collant », où se
   posent le pied de page et tout ce qui colle sous le menu, pour ne jamais être dans le flou. */
body { --hauteur-flou-menu: calc(var(--hauteur-fond-menu) * 1.4); --haut-collant: calc(var(--hauteur-flou-menu) + var(--spacing--space-tiny)); }
@media (max-width: 767px) { body { --hauteur-flou-menu: var(--hauteur-fond-menu); } }
.fond-menu_stoud {
  position: fixed; inset: 0 0 auto; height: var(--hauteur-flou-menu); z-index: 998; pointer-events: none;
  background-color: transparent;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent);
  opacity: 0;
}
/* Sans backdrop-filter : un voile léger, même masque, pour que le mot reste lisible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fond-menu_stoud { background-color: color-mix(in srgb, var(--_🎨-color--base---base--dark-100) 35%, transparent); }
}

/* Cartes de membre hors du carrousel de /collectif (pages d'expertise, style guide) : en grille, dans le flux. */
.membres_stoud { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 13rem)); gap: var(--stoud-espace-rangees); width: 100%; }
.membres_stoud .slide_image { position: relative; top: auto; left: auto; width: auto; max-width: none; pointer-events: auto; }
.membres_stoud .monogramme_membre { font-size: clamp(48px, 6vw, 96px); }
@media (max-width: 479px) { .membres_stoud { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Hors carrousel : légende alignée à gauche, nom en h6 (les cartes ne font que 173 à 208 px). */
.membres_stoud .text_slide { align-items: flex-start; text-align: left; }
.membres_stoud .text_slide .heading { font-size: var(--_🔠-typography---size--h6); line-height: var(--_🔠-typography---line-height--h6); }

/* Pages d'expertise : grille des tuiles (style guide) et renvois sous les livrables. Lot 6 : le reste de l'ancien gabarit
   (detail_case-studies d'Altum) est retiré ; le nouveau est dans expertise.css. */
.grille_expertise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* « Pour qui » : une colonne ; Altum plafonne le bloc à 6 colonnes, 3 cartes n'y auraient que 168 px. */
.grille_expertise.is-une { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 479px) { .grille_expertise { grid-template-columns: minmax(0, 1fr); } }
.renvois_expertise { display: flex; flex-direction: column; gap: var(--spacing--space-minimal); margin-top: var(--stoud-espace-rangees); }
.liens_renvois { display: flex; flex-wrap: wrap; gap: var(--spacing--space-minimal) var(--spacing--space-medium); }

/* Lot 3, T7 — pied de page à 3 colonnes égales (Coordonnées, Expertises, Légal) ; en mobile, Altum les empile. */
.footer_columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.link_footer-titre { color: inherit; }
/* Liens sous une carte « feature » (équipes types de /collectif) */
.liens_feature { display: flex; flex-wrap: wrap; gap: var(--spacing--space-minimal) var(--spacing--space-tiny); margin-top: var(--spacing--space-minimal); }
/* /collectif, sous la gang : les expertises au Stoud, puis les sites des studios, en deux groupes distincts. */
.renvois_studios .liens_studios + .paragraph { margin-top: var(--stoud-espace-blocs); }
/* Tuiles des pages d'expertise : de 480 à 1145 px (tuiles de ≈ 238 px), les titres longs passent sur 2 lignes ;
   on réserve 2 lignes à chaque titre pour que les textes d'une même rangée partent à la même hauteur. */
@media (min-width: 480px) and (max-width: 1145px) { .grille_expertise .result_tile h3 { min-height: 2lh; } }

/* Prélancement T10 — site fermé : /en-construction et /acces. Lot 10 : leurs styles sont plus bas (M20 « bientot_ »,
   M21 « acces_ ») ; les classes « ferme_ » d'avant sont retirées. */

/* /expertises : mise en page maison (option A de _ui/P1-pages-alt, 2026-10-14), distincte du gabarit product de /espaces.
   Sections sur fond de base et au-dessus du pied de page collant, comme celles d'Altum. */
.section_hero-expertises, .section_index-expertises, .section_facons, .section_etapes-expertises {
  position: relative; z-index: 10; background-color: var(--_🎨-color--tokens---background--base); color: var(--_🎨-color--tokens---tone--strong);
}
/* Deuxième ton des titres : 48 % (le faint d'Altum, 32 %, n'atteint pas 3:1 sur blanc).
   Lot 5, E5 : chaque ton est un texte dans son <span> ; le deuxième ton est le <span> qui suit le premier. */
.section_hero-expertises h1 > span + span, .section_index-expertises h2 > span + span, .section_facons h2 > span + span, .section_etapes-expertises h2 > span + span { color: var(--_🎨-color--base---base--dark-48); }

/* Hero : titre en haut à gauche, texte en bas à gauche, photo à droite */
.section_hero-expertises { padding-top: calc(var(--section-padding--large) + var(--stoud-espace-blocs)); padding-bottom: var(--stoud-espace-section); }
.hero-expertises_grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "titre titre" "texte image"; column-gap: var(--layout-grid--gutter); row-gap: var(--stoud-espace-titre); }
.hero-expertises_titre { grid-area: titre; display: flex; flex-direction: column; gap: var(--spacing--space-micro); max-width: 62rem; }
.hero-expertises_titre h1 { margin: 0; }
@media (min-width: 768px) { .hero-expertises_titre h1 > span + span { display: block; } }
.hero-expertises_texte { grid-area: texte; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: var(--stoud-espace-blocs); }
.hero-expertises_image { grid-area: image; aspect-ratio: 3 / 2; border-radius: var(--_🔘-radius---general--large); overflow: hidden; }
@media (max-width: 991px) {
  .hero-expertises_grille { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titre" "image" "texte"; row-gap: var(--stoud-espace-blocs); }
}

/* Les 4 expertises : liste typographique ; au survol (souris, ≥ 992 px), la photo de la ligne passe en fond flouté, les autres lignes s'effacent */
.section_index-expertises { overflow: hidden; }
.index-expertises_fonds { position: absolute; inset: 0; pointer-events: none; }
.index-expertises_fond { position: absolute; inset: 0; opacity: 0; transition: opacity var(--stoud-duree) var(--stoud-courbe); }
.index-expertises_fond::after { content: ""; position: absolute; inset: 0; background: rgba(16, 16, 18, .52); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); }
.index-expertises_entete { display: flex; flex-direction: column; gap: var(--spacing--space-micro); position: relative; }
.index-expertises_entete h2 { margin: 0; }
.index-expertises_liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--_🎨-color--base---base--dark-16); position: relative; }
.index-expertises_item { border-bottom: 1px solid var(--_🎨-color--base---base--dark-16); transition: border-color var(--stoud-duree-rapide) var(--stoud-courbe); }
.index-expertises_lien { position: relative; display: grid; grid-template-columns: 5rem minmax(0, 7fr) minmax(0, 4fr); align-items: center; column-gap: var(--layout-grid--gutter); row-gap: var(--spacing--space-micro); padding: var(--spacing--space-medium) 0; color: inherit; text-decoration: none; transition: color var(--stoud-duree-rapide) var(--stoud-courbe); }
.index-expertises_numero { transition: color var(--stoud-duree-rapide) var(--stoud-courbe); }
.index-expertises_titre { margin: 0; }
.index-expertises_detail { display: flex; flex-direction: column; gap: var(--spacing--space-micro); max-width: 24rem; }
.index-expertises_texte { transition: color var(--stoud-duree-rapide) var(--stoud-courbe); }
.index-expertises_studio { display: inline-flex; align-items: center; gap: 8px; transition: color var(--stoud-duree-rapide) var(--stoud-courbe); }
.index-expertises_fleche { display: inline-flex; width: 14px; transition: transform var(--stoud-duree-rapide) var(--stoud-courbe); }
.index-expertises_fleche svg { width: 100%; height: auto; }
/* Vignette : rectangle aux coins du template, révélée de bas en haut (clip-path) avec un léger dézoom de la photo */
.index-expertises_vignette { position: absolute; right: 40%; top: 50%; width: clamp(10rem, 14vw, 16rem); aspect-ratio: 4 / 5; border-radius: var(--_🔘-radius---general--default); overflow: hidden; transform: translateY(-46%); clip-path: inset(100% 0 0 0 round var(--_🔘-radius---general--default)); transition: clip-path var(--stoud-duree) var(--stoud-courbe), transform var(--stoud-duree) var(--stoud-courbe); pointer-events: none; z-index: 1; }
.index-expertises_vignette img { transform: scale(1.18); transition: transform var(--stoud-duree-lente) var(--stoud-courbe); }
.index-expertises_lien:focus-visible { outline: 2px solid var(--stoud-jaune); outline-offset: 4px; }
@media (hover: hover) and (min-width: 992px) {
  .index-expertises_liste:hover .index-expertises_lien { color: rgba(248, 247, 243, .32); }
  .index-expertises_liste:hover .index-expertises_numero, .index-expertises_liste:hover .index-expertises_texte { color: inherit; }
  .index-expertises_liste:hover .index-expertises_item { border-color: rgba(248, 247, 243, .16); }
  .index-expertises_liste .index-expertises_lien:hover { color: #f8f7f3; }
  .index-expertises_lien:hover .index-expertises_vignette { clip-path: inset(0 0 0 0 round var(--_🔘-radius---general--default)); transform: translateY(-50%); }
  .index-expertises_lien:hover .index-expertises_vignette img { transform: scale(1); }
  .index-expertises_lien:hover .index-expertises_fleche { transform: translateX(4px); }
  .section_index-expertises:has(.index-expertises_liste:hover) { color: #f8f7f3; }
  .section_index-expertises:has(.index-expertises_liste:hover) h2 > span + span { color: rgba(248, 247, 243, .48); }
  .section_index-expertises:has(.index-expertises_liste:hover) .tone-faint { color: rgba(248, 247, 243, .48); }
  /* La photo de fond de l'expertise survolée : une règle par expertise, écrite par /expertises (une par élément de la
     collection, règles du build à la Webflow). */
}
/* Le template pose « .main-wrapper * { transition-property: background-color, border-color… } » (bascule clair/sombre),
   qui l'emporte à poids égal : les transitions de la page se redéclarent donc sous .main-wrapper. */
.main-wrapper .index-expertises_fond { transition: opacity var(--stoud-duree) var(--stoud-courbe); }
.main-wrapper .index-expertises_item { transition: border-color var(--stoud-duree-rapide) var(--stoud-courbe); }
.main-wrapper .index-expertises_lien, .main-wrapper .index-expertises_numero, .main-wrapper .index-expertises_texte, .main-wrapper .index-expertises_studio { transition: color var(--stoud-duree-rapide) var(--stoud-courbe); }
.main-wrapper .index-expertises_fleche { transition: transform var(--stoud-duree-rapide) var(--stoud-courbe); }
.main-wrapper .index-expertises_entete, .main-wrapper .index-expertises_entete * { transition: color var(--stoud-duree-rapide) var(--stoud-courbe); }
.main-wrapper .index-expertises_vignette { transition: clip-path var(--stoud-duree) var(--stoud-courbe), transform var(--stoud-duree) var(--stoud-courbe); }
.main-wrapper .index-expertises_vignette img { transition: transform var(--stoud-duree-lente) var(--stoud-courbe); }
@media (prefers-reduced-motion: reduce) {
  .main-wrapper .index-expertises_fond, .main-wrapper .index-expertises_item, .main-wrapper .index-expertises_lien, .main-wrapper .index-expertises_numero, .main-wrapper .index-expertises_texte, .main-wrapper .index-expertises_studio, .main-wrapper .index-expertises_fleche, .main-wrapper .index-expertises_vignette, .main-wrapper .index-expertises_vignette img { transition: none; }
}
@media (max-width: 991px) {
  .index-expertises_lien { grid-template-columns: minmax(0, 1fr); align-items: start; padding: var(--spacing--space-small) 0; }
  .index-expertises_vignette { display: none; }
}

/* Une ou plusieurs expertises : deux cartes claires, la troisième en photo */
.facons_entete { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--stoud-espace-blocs); }
.facons_entete > div:first-child { display: flex; flex-direction: column; gap: var(--spacing--space-micro); max-width: 46rem; }
.facons_entete h2 { margin: 0; }
.facons_grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--stoud-espace-rangees); }
.facon_carte { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--stoud-espace-blocs); padding: var(--spacing--space-micro); border-radius: var(--_🔘-radius---general--large); background-color: var(--_🎨-color--base---base--dark-4); overflow: hidden; }
@media (min-width: 768px) { .facon_carte { min-height: 20rem; padding: var(--spacing--space-small) var(--spacing--space-micro) var(--spacing--space-micro); } }
.facon_numero { position: relative; }
.facon_bas { display: flex; flex-direction: column; gap: var(--spacing--space-minimal); position: relative; }
.facon_bas h3 { margin: 0; }
.facon_carte.is-photo { color: #fff; background-color: #111; }
.facon_photo { position: absolute; inset: 0; }
.facon_carte.is-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.72) 100%); }
.facon_carte.is-photo .facon_numero, .facon_carte.is-photo .facon_texte { color: var(--_🎨-color--base---base--light-88); }
@media (max-width: 991px) { .facons_entete { flex-direction: column; align-items: flex-start; } }
@media (max-width: 767px) { .facons_grille { grid-template-columns: minmax(0, 1fr); } .facon_carte.is-photo { min-height: 22rem; } }

/* La démarche : titre et photo à gauche, les trois étapes à droite */
.etapes-expertises_grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--spacing--space-large); row-gap: var(--stoud-espace-titre); align-items: start; }
.etapes-expertises_gauche { display: flex; flex-direction: column; gap: var(--spacing--space-micro); }
.etapes-expertises_gauche h2 { margin: 0; }
.etapes-expertises_image { margin-top: var(--stoud-espace-blocs); aspect-ratio: 4 / 3; border-radius: var(--_🔘-radius---general--large); overflow: hidden; }
.etapes-expertises_liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.etape-expertises { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing--space-minimal); padding: var(--spacing--space-small) 0; border-top: 1px solid var(--_🎨-color--base---base--dark-16); }
.etape-expertises:last-child { border-bottom: 1px solid var(--_🎨-color--base---base--dark-16); }
.etape-expertises_numero { padding-top: .5em; }
.etape-expertises h3 { margin: 0; }
@media (min-width: 992px) {
  /* P27 (Vince) : collée plus haut, juste sous le logo, et toute la colonne tient dans l'écran (portable 14 po compris) :
     l'image rétrécit en hauteur (recadrée) quand l'écran est bas, jusqu'à 12rem. */
  .etapes-expertises_gauche { position: sticky; top: 6.5rem; max-height: calc(100vh - 8rem); max-height: calc(100svh - 8rem); }
  .etapes-expertises_image { flex: 0 1 auto; min-height: 12rem; }
  .etapes-expertises_liste { padding-top: calc(var(--spacing--space-huge) * 1.5); }
  .etape-expertises { grid-template-columns: 7rem minmax(0, 1fr); padding: var(--spacing--space-medium) 0; }
  .etape-expertises .etape-expertises_numero { grid-row: span 2; }
}
@media (max-width: 991px) { .etapes-expertises_grille { grid-template-columns: minmax(0, 1fr); } }

/* FAQ par expertise : onglets, puis questions dépliables (details/summary) */

/* Lot 6, point 5 : boutons à la manière d'Omnerat (labo/css/boutons-stoud.css) : rectangle à coins arrondis, une forme
   ovale monte du bas et remplit le bouton au survol. Pas d'animation de texte (ni la machine à écrire d'Omnerat, ni le
   texte qui glisse d'Altum). S'applique au balisage de CtaPrimary.astro, sans le changer. */
.cta_primary {
  --bouton-fond: var(--_🎨-color--tokens---button--primary--default--background);
  --bouton-texte: var(--_🎨-color--tokens---button--primary--default--text-icon);
  --bouton-remplissage: var(--stoud-jaune);
  --bouton-texte-survol: var(--_🎨-color--base---base--dark-100);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  border-radius: var(--_🔘-radius---general--default);
  background-color: var(--bouton-fond);
  color: var(--bouton-texte);
  transition: color var(--stoud-duree) var(--stoud-courbe), background-color var(--stoud-duree) var(--stoud-courbe);
}
/* Secondaire : fond gris pâle, remplissage noir (blanc et jaune en mode sombre) */
.cta_primary.w-variant-1ff8d96e-78cc-eac8-de90-206ecdaded5f {
  --bouton-fond: var(--_🎨-color--tokens---button--secondary--default--background);
  --bouton-texte: var(--_🎨-color--tokens---button--secondary--default--text-icon);
  --bouton-remplissage: var(--_🎨-color--tokens---button--secondary--hover--background);
  --bouton-texte-survol: var(--_🎨-color--tokens---button--secondary--hover--text-icon);
}
/* La forme qui remplit : un ovale deux fois plus grand que le bouton, caché sous lui */
.cta_primary::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -50%;
  top: -20%;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  background-color: var(--bouton-remplissage);
  transform: translateY(70%);
  transition: transform var(--stoud-duree) var(--stoud-courbe);
}
.cta_primary:hover, .cta_primary:focus-visible { color: var(--bouton-texte-survol); }
.cta_primary:hover::before, .cta_primary:focus-visible::before { transform: translateY(-10%); }
.cta_primary:focus-visible { outline: 2px solid var(--stoud-jaune); outline-offset: 3px; }

/* Taille d'Omnerat : 50 px de haut, largeur selon le texte */
.cta_primary .button-inner {
  width: auto;
  height: auto;
  min-height: 3.125rem;
  min-width: 7.75rem;
  padding: 0 var(--spacing--space-tiny);
  overflow: visible;
}
.cta_primary .icon-wrap_button { display: none; }
.cta_primary .button_text-mask { height: auto; overflow: visible; }
.cta_primary .text-button {
  font-weight: var(--_🔠-typography---all-weights--medium);
  color: inherit;
  text-shadow: none;
  transform: none !important;
  white-space: nowrap;
}

/* Bouton d'envoi des formulaires : un <input> transparent posé sur un .cta_primary décoratif (FormulaireDemande.astro).
   Le survol et le focus de l'input remplissent le bouton dessous. */
.button_submit-static:hover .cta_primary, .button_submit-static:has(.button_submit:focus-visible) .cta_primary { color: var(--bouton-texte-survol); }
.button_submit-static:hover .cta_primary::before, .button_submit-static:has(.button_submit:focus-visible) .cta_primary::before { transform: translateY(-10%); }
.button_submit-static .button_submit { border-radius: var(--_🔘-radius---general--default); }
.button_submit:focus-visible { outline: 2px solid var(--stoud-jaune); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .cta_primary, .cta_primary::before { transition: none; }
}

/* Lot 6, point 2 : pied de page. Liens d'une colonne presque collés (4 px) ; l'espace entre le dernier texte et le grand
   logo = l'espace du haut du pied (padding-top de .footer) ; deux boutons à la place d'Instagram ; réseaux sous les
   coordonnées (labo/pied-de-page.html). */
.column_footer-links { grid-row-gap: var(--spacing--space-hairline); row-gap: var(--spacing--space-hairline); }
.master-footer { grid-row-gap: var(--spacing--space-medium); row-gap: var(--spacing--space-medium); }
.boutons-pied_stoud { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--spacing--space-minimal); }
.reseaux-pied_stoud { display: flex; flex-wrap: wrap; gap: var(--spacing--space-minimal); }
.reseau-pied_stoud { display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; border-radius: var(--_🔘-radius---general--small); background: var(--_🎨-color--base---base--light-8); color: var(--_🎨-color--tokens---tone--strong); transition: background-color var(--stoud-duree-rapide) var(--stoud-courbe), color var(--stoud-duree-rapide) var(--stoud-courbe); }
.reseau-pied_stoud.is-texte { padding: 0 var(--spacing--space-micro); }
.reseau-pied_stoud svg { width: 1.25rem; height: 1.25rem; }
.reseau-pied_stoud:hover { background: var(--stoud-jaune); color: var(--_🎨-color--base---base--dark-100); }
.reseau-pied_stoud:focus-visible { outline: 2px solid var(--stoud-jaune); outline-offset: 3px; }
@media (max-width: 767px) { .boutons-pied_stoud { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { .reseau-pied_stoud { transition: none; } }

/* Lot 6, point 3 : FAQ en accordéon natif (details/summary à la place des onglets Webflow), mêmes classes visuelles
   qu'Altum (labo/faq.html). .tab_faq (fond transparent, padding 0) passe après .expandable-single dans le CSS d'Altum :
   on rétablit les deux. */
.faq-menu .faq-natif_stoud { interpolate-size: allow-keywords; padding: var(--spacing--space-xsmall); background-color: var(--_🎨-color--tokens---background--base); }
.faq-natif_stoud > summary { list-style: none; cursor: pointer; }
.faq-natif_stoud > summary::-webkit-details-marker { display: none; }
.faq-natif_stoud > summary:focus-visible { outline: 2px solid var(--stoud-jaune); outline-offset: 4px; }
.faq-natif_stoud::details-content { height: 0; overflow: hidden; transition: height var(--stoud-duree-rapide) var(--stoud-courbe), content-visibility var(--stoud-duree-rapide) allow-discrete; }
.faq-natif_stoud[open]::details-content { height: auto; }
/* webflow.js (interaction IX de l'ancien accordéon, ciblée par classe) pose height: 0 et opacity: 0 en ligne sur
   .expandable-bottom : c'est ::details-content qui ouvre et ferme maintenant. */
.faq-natif_stoud .expandable-bottom { height: auto !important; opacity: 1 !important; }
/* La croix : même raison, webflow.js pose une transform en ligne sur la barre verticale. */
.faq-natif_stoud .faq-line.vertical { transform: none !important; transition: transform var(--stoud-duree-rapide) var(--stoud-courbe); }
.faq-natif_stoud[open] .faq-line.vertical { transform: rotate(90deg) !important; }
/* Question ouverte : fond noir et texte blanc, comme l'onglet actif d'Altum */
.faq-natif_stoud[open] {
  --_🎨-color--tokens---background--base: var(--_🎨-color--base---base--dark-100);
  --_🎨-color--tokens---tone--strong: var(--_🎨-color--base---base--light-100);
  --_🎨-color--tokens---tone--subtle: var(--_🎨-color--base---base--light-64);
  --_🎨-color--tokens---tone--ghost: var(--_🎨-color--base---base--light-8);
}
@media (prefers-reduced-motion: reduce) { .faq-natif_stoud::details-content, .faq-natif_stoud .faq-line.vertical { transition: none; } }

/* Lot 6, D22 : le mot « LE STOUD. » s'efface vers le S quand on défile vers le bas, revient quand on remonte ou en haut de
   page (comme Electrotech ; /js/nav-logo.js pose .is-compact). Les deux couches sont superposées : un balayage clip-path
   plutôt qu'une largeur qui se tasse. Menu ouvert : le mot reste. */
.logo-nav_mot svg { clip-path: inset(0 0 0 0); transition: clip-path var(--stoud-duree-rapide) var(--stoud-courbe), opacity var(--stoud-duree-rapide) var(--stoud-courbe); }
/* Lot 11, L1 (Poppins, remis le 2026-10-27) : le mot commence à x = 394,18 sur 1614,69 ; 75.6 % (bord à 393,98) n'en laisse rien, pas même le « L ». */
.navbar.is-compact:not(.menu-ouvert) .logo-nav_mot svg { clip-path: inset(0 75.6% 0 0); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .logo-nav_mot svg { transition: none; } }

/* Lot 6, point 7 : rideaux de Jores à l'arrivée sur une page (labo/transition.html). Cachés par défaut : seulement quand
   le <head> a posé est-en-transition (Base.astro) ; sans JavaScript, en mouvement réduit et en mode édition, rien. */
html.est-en-transition, html.est-en-transition body { overflow: hidden; }
.transition_stoud { display: none; position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
html.est-en-transition .transition_stoud { display: block; pointer-events: auto; }
.transition_rideau { position: absolute; inset: 0; transform: translateY(0); will-change: transform; }
.transition_rideau.is-1 { z-index: 1; background-color: var(--_🎨-color--base---base--dark-100); }
.transition_rideau.is-2 { z-index: 2; background-color: var(--stoud-jaune); }
.transition_rideau.is-3 { z-index: 3; background-color: var(--_🎨-color--base---base--dark-100); }

/* Lot 6, point 12 : heros à 100vh, sans texte coupé (labo/espace-coworking.html, .hero-ecran_stoud). Le hero fait la
   hauteur de l'écran ; surtitre, titre, texte et bouton en haut ; le visuel prend la hauteur qui reste (au moins 14rem) ;
   ce qui débordait passe dans la section suivante. */
.hero-ecran_stoud { min-height: 100vh; min-height: 100svh; box-sizing: border-box; display: flex; flex-direction: column;
  padding-top: calc(var(--hauteur-fond-menu, 5.5rem) + var(--stoud-espace-blocs)); padding-bottom: var(--stoud-marge-laterale); }
.hero-ecran_stoud > .padding-global { flex: 1; display: flex; flex-direction: column; }
.hero-ecran_stoud .container-large { flex: 1; display: flex; flex-direction: column; }
.hero-ecran_stoud .headline_hero-pricing { margin-bottom: var(--stoud-espace-blocs); flex: none; }
.hero-ecran_stoud .image_hero-espace { flex: 1 1 0; min-height: min(14rem, 25svh); aspect-ratio: auto; margin-bottom: 0; }
@media (max-width: 767px) { .hero-ecran_stoud .image_hero-espace { min-height: 12rem; } }
/* Pages d'espace (D9) : les cartes de prix, dans la section qui suit le hero */
.formules_stoud { position: relative; z-index: 10; background-color: var(--_🎨-color--tokens---background--base); padding-top: var(--stoud-espace-blocs); padding-bottom: var(--stoud-espace-section); }

/* /collectif (D8) : le hero fait la hauteur de l'écran ; les trois photos inclinées prennent la hauteur qui reste
   (format 4:3 gardé, centrées) ; « Défilez pour rencontrer la gang » reste dans l'écran. */
.master_hero-about { height: 100vh; height: 100svh; min-height: 0; max-height: none; box-sizing: border-box;
  padding-top: calc(var(--hauteur-fond-menu, 5.5rem) + var(--stoud-espace-blocs)); row-gap: var(--stoud-espace-blocs); }
.master_about-images { position: relative; flex: 1 1 0; min-height: min(10rem, 20svh); height: auto; width: 100%; max-height: 30rem; margin-top: var(--stoud-espace-blocs); }
/* Centrées par left/right 0 et des marges automatiques (IX3 pose translate en ligne sur les photos animées) */
.master_about-images .about_hero-image { inset: 0 0 auto; margin: 0 auto; height: 100%; width: auto; max-width: 100%; aspect-ratio: 4 / 3; }
@media (max-width: 767px) { .master_about-images { min-height: min(9rem, 18svh); max-height: 16rem; } }
/* Lot 11, R4 (Vince : « les images du centre un peu plus grandes ») : la hauteur des photos venait de la place restante
   (flex), pas du plafond. La marge du haut (en plus de l'écart de la colonne) est rendue aux photos et les plafonds
   montent (35rem, 19rem au téléphone) : +15 % à 1440 × 900 et 1280 × 720, +19 % à 390 × 844, sans dépasser l’écran. */
.master_about-images { margin-top: 0; max-height: 35rem; }
@media (max-width: 767px) { .master_about-images { max-height: 19rem; } }

/* /espaces (D8) : le hero fait la hauteur de l'écran ; la photo (à droite, dessous en mobile) prend la hauteur qui reste. */
.section_hero-product .product_hero-halves { min-height: 100vh; min-height: 100svh; box-sizing: border-box; grid-template-rows: minmax(0, 1fr);
  padding-top: calc(var(--hauteur-fond-menu, 5.5rem) + var(--stoud-espace-blocs)); }
.section_hero-product .right_hero-product { align-self: stretch; row-gap: var(--stoud-espace-blocs); }
.section_hero-product .image_hero-product { flex: 1 1 0; min-height: min(14rem, 25svh); height: auto; }
@media (max-width: 767px) {
  .section_hero-product .product_hero-halves { display: flex; flex-direction: column; }
  .section_hero-product .right_hero-product { flex: 1; }
  .section_hero-product .image_hero-product { min-height: 12rem; }
}

/* /expertises (D10, décision de Vince : réduire la hauteur de l'image) : surtitre, titre, texte, bouton et image
   tiennent dans l'écran ; même mise en page. Remplacé par le lot 10, M4 (plus bas) : le hero à la hauteur de l'écran. */

/* Lot 6, point 9 : /collectif, « Notre histoire », piste C (labo/histoire.html) : texte collant à gauche, la façade en grand
   à droite et quatre cartes de chiffres (jaune, gris, gris, noir) qui comptent à l'entrée dans l'écran (/js/compteurs.js). */
.section_our-story .pisteC_grille { margin-bottom: var(--stoud-espace-section); }
.pisteC_grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing--space-large); align-items: start; }
.pisteC_gauche { position: sticky; top: var(--haut-collant, 5.5rem); display: flex; flex-direction: column; gap: var(--spacing--space-tiny); }
.pisteC_gauche h2 { margin: 0; }
.pisteC_droite { display: flex; flex-direction: column; gap: var(--stoud-espace-rangees); }
.pisteC_photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--_🔘-radius---general--large); overflow: hidden; }
.pisteC_photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--_🎨-color--base---base--dark-0) 50%, var(--_🎨-color--base---base--dark-64)); pointer-events: none; }
/* (La légende blanche .pisteC_legende est remplacée par la pastille de l'adresse : lot 11, R5, plus bas.) */
.pisteC_chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stoud-espace-rangees); }
.pisteC_chiffre { display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing--space-small); min-height: 11rem; padding: var(--spacing--space-tiny); border-radius: var(--_🔘-radius---general--default); background: var(--_🎨-color--base---base--dark-4); }
.pisteC_chiffre.is-jaune { background: var(--stoud-jaune); color: var(--_🎨-color--base---base--dark-100); }
.pisteC_chiffre.is-noir { background: var(--_🎨-color--base---base--dark-100); color: var(--_🎨-color--base---base--light-100); }
.pisteC_chiffre.is-noir .tone-subtle { color: var(--_🎨-color--base---base--light-64); }
.chiffre_valeur { font-variant-numeric: tabular-nums; }
@media (max-width: 991px) { .pisteC_grille { grid-template-columns: minmax(0, 1fr); } .pisteC_gauche { position: static; } }

/* Lot 6, point 10 : /collectif, les valeurs lisibles sur la photo (labo/collectif.html, « Après ») : un voile sombre en
   dégradé vers le bas, titre et texte regroupés en bas à gauche, titre en blanc plein, texte plein et plus grand. */
.right_approach::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--_🎨-color--base---base--dark-0) 30%, var(--_🎨-color--base---base--dark-64) 72%, var(--_🎨-color--base---base--dark-88) 100%); }
.right_approach .inner_approach { z-index: 1; flex-direction: column; justify-content: flex-end; align-items: flex-start; row-gap: var(--spacing--space-pico); }
.right_approach .title_approach { position: relative; z-index: 1; margin-left: 0; background-image: none; -webkit-text-fill-color: currentColor; color: var(--_🎨-color--base---base--light-100); }
.right_approach .p_approach { position: relative; z-index: 1; max-width: 30rem; opacity: 1; }
.right_approach .p_approach .paragraph { opacity: 1; font-family: var(--_🔠-typography---font-family--b1); font-size: var(--_🔠-typography---size--b1); line-height: var(--_🔠-typography---line-height--b1); letter-spacing: var(--_🔠-typography---letter-spacing--b1); color: var(--_🎨-color--base---base--light-100); }
/* Lot 11, E3 (D3, 2e ronde, version A, approuvée par Vince le 2026-10-19, avec le bouton) : le titre et le texte de chaque
   expertise passent au milieu de la photo, centrés comme l'en-tête de la carte, sur un voile égal (un peu plus foncé au
   centre) au lieu du dégradé vers le bas ; le bouton « Voir l'expertise » complète la pile. Mêmes règles en mouvement
   réduit et en mode édition (chaque expertise à plat, même placement). */
.right_approach::after { background: radial-gradient(ellipse 60% 55% at 50% 50%, var(--_🎨-color--base---base--dark-24), var(--_🎨-color--base---base--dark-0)), var(--_🎨-color--base---base--dark-48); }
.right_approach .inner_approach { justify-content: center; align-items: center; row-gap: var(--spacing--space-tiny); padding: var(--spacing--space-small); text-align: center; }
.right_approach .title_approach h3 { text-wrap: balance; }
.right_approach .p_approach { display: flex; flex-direction: column; align-items: center; gap: var(--spacing--space-tiny); max-width: 28rem; }
.right_approach .p_approach .paragraph { text-wrap: balance; }
.bouton_approach { display: flex; justify-content: center; }
@media (max-width: 767px) {
  .right_approach .inner_approach { padding: var(--spacing--space-tiny); row-gap: var(--spacing--space-pico); }
  .right_approach .p_approach { gap: var(--spacing--space-pico); }
}

/* Lot 6, point 11 : /collectif, le collectif en carrousel avec flèches (labo/collectif.html) : nom et rôle centrés, flèches
   carrées de chaque côté (noires au survol), plus d'air avant le texte du portfolio. */
.carrousel-cadre_stoud { position: relative; }
.section_carousel .text_slide { align-items: center; text-align: center; }
.section_carousel .text_slide .paragraph { margin-left: auto; margin-right: auto; }
.fleche-carrousel_stoud { position: absolute; top: 50%; z-index: 200; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-top: -1.75rem; border: 1px solid var(--_🎨-color--base---base--dark-12); border-radius: var(--_🔘-radius---general--default); background: var(--_🎨-color--base---base--light-100); color: var(--_🎨-color--base---base--dark-100); cursor: pointer; transition: background-color var(--stoud-duree-rapide) var(--stoud-courbe), color var(--stoud-duree-rapide) var(--stoud-courbe); }
.fleche-carrousel_stoud svg { width: 1.25rem; height: 1.25rem; }
.fleche-carrousel_stoud:hover { background: var(--_🎨-color--base---base--dark-100); color: var(--_🎨-color--base---base--light-100); }
.fleche-carrousel_stoud:focus-visible, .carousel_images:focus-visible { outline: 2px solid var(--stoud-jaune); outline-offset: 3px; }
.fleche-carrousel_stoud.is-gauche { left: 0; }
.fleche-carrousel_stoud.is-droite { right: 0; }
.section_carousel .renvois_studios { margin-top: calc(9rem + var(--stoud-espace-titre)); }
@media (max-width: 767px) { .fleche-carrousel_stoud { width: 3rem; height: 3rem; margin-top: -1.5rem; } }
@media (prefers-reduced-motion: reduce) { .fleche-carrousel_stoud { transition: none; } }

/* Lot 6, point 16 : visionneuse de photos (gem image-lightbox-viewer-01 de BYQ ; labo/css/lightbox-stoud.css) */

/* Vignettes : les .galerie_item deviennent des boutons qui agrandissent */
[data-lightbox-item] { display: block; position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; border-radius: var(--_🔘-radius---general--default); }
[data-lightbox-item] img { transition: transform var(--stoud-duree) var(--stoud-courbe); }
[data-lightbox-item]:hover img, [data-lightbox-item]:focus-visible img { transform: scale(1.04); }
[data-lightbox-item]:focus-visible { outline: 2px solid var(--stoud-jaune); outline-offset: 3px; }
/* Pastille « agrandir » au survol */
[data-lightbox-item]::after { content: ""; position: absolute; right: 12px; bottom: 12px; width: 2.25rem; height: 2.25rem; border-radius: var(--_🔘-radius---general--small); background: color-mix(in srgb, var(--_🎨-color--base---base--dark-100) 55%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M9.5 2.5h4v4M6.5 13.5h-4v-4M13.5 2.5 9 7M2.5 13.5 7 9'/%3E%3C/svg%3E") center / 14px no-repeat; backdrop-filter: blur(6px); opacity: 0; transform: translateY(4px); transition: opacity var(--stoud-duree-rapide) var(--stoud-courbe), transform var(--stoud-duree-rapide) var(--stoud-courbe); }
[data-lightbox-item]:hover::after, [data-lightbox-item]:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none) { [data-lightbox-item]::after { opacity: 1; transform: none; } }

/* La visionneuse */
html.visionneuse-ouverte, html.visionneuse-ouverte body { overflow: hidden; }
.visionneuse_stoud { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--_🎨-color--base---base--dark-100) 94%, transparent); color: var(--_🎨-color--base---base--light-100); opacity: 0; visibility: hidden; transition: opacity var(--stoud-duree-rapide) var(--stoud-courbe), visibility 0s linear var(--stoud-duree-rapide); touch-action: pan-y; }
.visionneuse_stoud.is-ouverte { opacity: 1; visibility: visible; transition: opacity var(--stoud-duree-rapide) var(--stoud-courbe); }
.visionneuse_figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--spacing--space-pico); max-width: min(92vw, 84rem); }
.visionneuse_scene { display: block; max-width: 100%; max-height: 80vh; width: auto; height: auto; object-fit: contain; border-radius: var(--_🔘-radius---general--default); will-change: transform; }
.visionneuse_legende { max-width: 40rem; text-align: center; font-size: 14px; line-height: 1.4; color: var(--_🎨-color--base---base--light-64); min-height: 1.4em; }
.visionneuse_bouton { position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 1px solid var(--_🎨-color--base---base--light-16); border-radius: var(--_🔘-radius---general--default); background: var(--_🎨-color--base---base--light-8); color: inherit; cursor: pointer; transition: background-color var(--stoud-duree-rapide) var(--stoud-courbe), color var(--stoud-duree-rapide) var(--stoud-courbe), border-color var(--stoud-duree-rapide) var(--stoud-courbe); }
.visionneuse_bouton svg { width: 1.125rem; height: 1.125rem; fill: none; }
.visionneuse_bouton:hover { background: var(--stoud-jaune); border-color: var(--stoud-jaune); color: var(--_🎨-color--base---base--dark-100); }
.visionneuse_bouton:focus-visible { outline: 2px solid var(--stoud-jaune); outline-offset: 3px; }
.visionneuse_bouton[hidden] { display: none; }
.visionneuse_bouton.is-fermer { top: var(--stoud-marge-laterale); right: var(--stoud-marge-laterale); }
.visionneuse_bouton.is-precedent { left: var(--stoud-marge-laterale); top: 50%; margin-top: -1.5rem; }
.visionneuse_bouton.is-suivant { right: var(--stoud-marge-laterale); top: 50%; margin-top: -1.5rem; }
.visionneuse_compteur { position: absolute; left: 50%; top: var(--stoud-marge-laterale); transform: translateX(-50%); padding: 8px 12px; border-radius: 100vw; background: var(--_🎨-color--base---base--light-8); font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .visionneuse_scene { max-height: 70vh; }
  .visionneuse_bouton.is-precedent, .visionneuse_bouton.is-suivant { top: auto; bottom: var(--stoud-marge-laterale); margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .visionneuse_stoud, [data-lightbox-item] img, [data-lightbox-item]::after, .visionneuse_bouton { transition: none; } }
/* Les éléments de galerie et les photos de « Deux pièces » deviennent des boutons : ils gardent la boîte du gabarit */
.galerie_stoud > .galerie_item[data-lightbox-item], .duo_pieces .piece_image[data-lightbox-item] { width: 100%; height: auto; min-height: 0; color: inherit; font: inherit; text-align: inherit; }
.galerie_stoud.is-4 > .galerie_item[data-lightbox-item] { height: 100%; }

/* Lot 6, point 16 : mosaïque qui se recompose (gem bento-reflow-01 de BYQ ; labo/css/bento-stoud.css). Sans script, la
   galerie reste la grille : .is-bento n'est ajoutée que par /js/mosaique.js. */
.galerie_stoud.is-bento {
  --bento-ecart: var(--spacing--space-minimal); /* 8 px : l'écart entre les photos, réduit à la demande de Vince */
  --bento-courbe: .95s cubic-bezier(.65, 0, .2, 1);
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  margin: calc(var(--bento-ecart) / -2);
}
.galerie_stoud.is-bento .bento_tuile {
  position: absolute;
  grid-column: auto;
  aspect-ratio: auto;
  border-radius: var(--_🔘-radius---general--default);
  overflow: hidden;
  transition: left var(--bento-courbe), top var(--bento-courbe), width var(--bento-courbe), height var(--bento-courbe);
}
.galerie_stoud.is-bento .bento_tuile img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .galerie_stoud.is-bento { aspect-ratio: 4 / 5; } }
@media (prefers-reduced-motion: reduce) { .galerie_stoud.is-bento .bento_tuile { transition: none; } }

/* Lot 6, point 14 : caché à l'œil, lu par les lecteurs d'écran (labo/reserver.html) */
.visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Retouches du lot 6, R1 : rien ne colle dans le flou du menu. Les éléments collants d'Altum qui se posaient plus haut que
   le bas du flou (titres du style guide et introduction des cartes empilées à 120 px, étapes de /espaces à 20 % de
   l'écran) se posent au « haut collant ». */
.wrap_cs-headline, .template_block-title { top: var(--haut-collant); }
.master_steps { top: max(20%, var(--haut-collant)); }
/* Pied de page : la colonne de gauche est vide depuis que l'étiquette « Le Stoud » est retirée ; empilée (≤ 991 px), elle
   ne doit pas laisser de rangée vide. */
@media (max-width: 991px) {
  .footer_top-tile > .right-footer { grid-area: auto; }
}
/* Pied compact. Tout en bas de la page, le pied collant reprend sa place normale : son bas touche le bas de l'écran, son
   haut est à (écran − pied). S'il est plus haut que la place sous le flou, son titre repassait dans le flou (capture 08 de
   Vince, 1309 × 831). Sur les écrans peu hauts, on resserre ses espacements, puis on plafonne la largeur du grand logo
   pour que le titre et tout ce qui suit tiennent sous le haut collant. --hauteur-pied-sans-logo (titre → bas, sans le
   logo) est publiée par /js/pied-de-page.js ; 5.278 = rapport largeur/hauteur du logo (viewBox 1614,69 × 305,94, logo Poppins, remis le 2026-10-27).
   En mobile (≤ 767 px), le pied n'est pas collant (Altum) : il défile comme le reste. */
@media (min-width: 768px) and (max-height: 959px) {
  .right-footer { row-gap: var(--spacing--space-small); }
  .master-footer { row-gap: var(--spacing--space-small); }
}
@media (min-width: 768px) {
  .logo-footer_stoud {
    max-width: max(var(--spacing--space-large) * 5.278, (100vh - var(--haut-collant) - var(--hauteur-pied-sans-logo, 0px)) * 5.278);
  }
}

/* Cartes empilées (ListeCartes : « Les espaces » de l'accueil, /espaces, style guide). Lot 11, E2 (D2, version C, approuvée
   par Vince le 2026-10-19 ; remplace l'estompe floue du lot 6, R2) : l'introduction collante se range en en-tête.
   /js/intro-cartes.js pose .is-sortie et publie --sortie (0 à 1, entre le collage de l'introduction et la pose de la
   1re carte), --range-e (échelle finale du titre) et --range-y (son déplacement). Le petit texte s'efface vers le haut ; le
   titre rapetisse et se range entre le haut collant et la pile (sur la rangée du surtitre en bureau, sous lui au
   téléphone), net, jusqu'à la fin de la liste. Transform et opacity seulement. Sans script ni en mode édition : rien ne
   change. Mouvement réduit : le même rangement (il suit le défilement, sans transition). */
.headline_client-stories.is-sortie .heading_cs > :first-child {
  transform: translateY(calc(var(--sortie, 0) * var(--range-y, 0px))) scale(calc(1 - var(--sortie, 0) * (1 - var(--range-e, .6))));
  transform-origin: 0 0;
  will-change: transform;
}
.headline_client-stories.is-sortie .heading_cs > :nth-child(2) {
  opacity: clamp(0, calc(1 - var(--sortie, 0) * 2.2), 1);
  transform: translateY(calc(var(--sortie, 0) * -24px));
  will-change: opacity, transform;
}
/* L'introduction passe au-dessus des cartes pour que le titre rangé ne soit pas recouvert ; les clics traversent vers les
   cartes, sauf sur le titre. */
.section_client-stories .wrap_cs-headline:has(.is-sortie) { z-index: 2; pointer-events: none; }
.section_client-stories .wrap_cs-headline:has(.is-sortie) .heading_cs > :first-child { pointer-events: auto; }
/* « Voir l'espace » : .text_cs est une colonne flex ; le lien tertiaire d'Altum s'y étirait sur toute la largeur et centrait
   son contenu (justify-content: center). Il s'aligne à gauche sur le titre et le texte de la carte (capture 03). */
.text_cs > .cta_tertiary { align-self: flex-start; }

/* Retouches du lot 6, R3 : bloc « Pour les créatifs » (BlocRejoindre) : deux boutons côte à côte, « Rejoindre le collectif »
   et « Voir le coworking » (secondaire) ; ils passent l'un sous l'autre si la colonne est trop étroite. La note de prix
   reste dessous, plus près des boutons que l'écart entre les blocs. */
.boutons-rejoindre_stoud { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing--space-minimal); }
.texte_rejoindre > .legende_rejoindre { margin-top: calc(var(--spacing--space-tiny) - var(--spacing--space-small)); }

/* Retouches du lot 6, R4 : /espaces, « Une salle, trois usages » : la ligne va d'un bord à l'autre de la fenêtre. Le tracé
   (src/icons/etapes-ligne-bureau.svg) est prolongé hors de son viewBox ; le SVG le laisse déborder et .section_steps
   (overflow: clip, Altum) le rogne aux bords : aucun défilement horizontal. Le drapeau de « Un seul calendrier » est retiré. */
.line-dashed.is-desktop svg { overflow: visible; }

/* Retouches du lot 6, R16 (réponse de Vince, 2026-10-16) : l'icône « Défilez pour… » refaite en CSS à la place de la
   Lottie de BTM (R7, ≈ 48 Ko retirés) : la molette (un point) descend dans la souris et s'efface, en boucle, comme
   l'animation de BTM. Immobile en mouvement réduit et en mode édition. */
.icon-scroll .souris_molette { transform-box: fill-box; transform-origin: center; animation: souris-molette 1.6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes souris-molette {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  70% { transform: translateY(4px); opacity: 0; }
  100% { transform: translateY(4px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .icon-scroll .souris_molette { animation: none; opacity: 1; } }
html.unik-edition .icon-scroll .souris_molette { animation: none; opacity: 1; }

/* Retouches du lot 6, R12 : accueil, cartes d'expertises empilées (BlocExpertise, .block_service-large) : plus d'air en
   haut (Altum : --spacing--space-xsmall, 44 px ; 26 en mobile). Le contenu commence sous le flou du menu, au « haut
   collant » plus un petit écart. */
.block_service-large { padding-top: calc(var(--haut-collant) + var(--spacing--space-tiny)); }

/* Retouches du lot 6, R8b : les surtitres de section (.surtitre_stoud, 38 sur le site), mélange des options A et D de R8
   (labo/etiquettes.html) : le point jaune rond d'evermind-value-and-features-5 (BYQ) devant le texte, un peu plus
   d'espacement ; le décodage de kelvin-stats-4 à l'apparition vient de /js/surtitres.js. Police du site gardée. Les petites
   mentions (numéros, prix, « Inclus », « Par … ») ne changent pas. */
.label-large.surtitre_stoud { display: inline-flex; align-items: center; gap: var(--spacing--space-minimal); letter-spacing: .12em; }
.label-large.surtitre_stoud::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--stoud-jaune); }


/* Retouches du lot 6, R14 : accueil, cartes d'expertises (capture 10 de Vince) : les deux écarts entre les blocs
   (texte → liste « Inclus », liste → photo) sont égaux et plus petits (Altum : 132 px et 64 px), et la carte tient dans
   l'écran : elle prend sa hauteur, la photo remplit ce qui reste (entre 9 et 29 rem). Sur un écran trop bas pour tout
   contenir, la carte s'allonge au lieu de couper son contenu. */
.block_service-large { box-sizing: border-box; height: 100vh; height: 100svh; min-height: min-content; }
.block_service-large .service_container { flex: 1 1 auto; min-height: 0; row-gap: var(--spacing--space-small); }
.block_service-large .block-service_bottom-tile { flex: 1 1 auto; min-height: 0; align-items: stretch; }
.block_service-large .content_bottom-service { min-height: 0; row-gap: var(--spacing--space-small); }
.block_service-large .image_single-service { flex: 1 1 0; height: auto; min-height: 9rem; max-height: 29rem; }

/* Retouches du lot 6, R15 (réponse de Vince, 2026-10-16) : tous les boutons à l'arrondi des boutons d'Omnerat (12 px),
   petits boutons compris (« Voir l'expertise », « Voir l'espace » : .cta_small, en pilule chez Altum). Le jeton d'Altum
   est redéfini sur :root et body (Altum le redéfinit sur body à chaque palier). */
:root, body { --_🔘-radius---ui--button-base: var(--_🔘-radius---general--default); }


/* Lot 10, M1 et M2 : en-têtes de section plus larges (choix A : titre 640 px, texte 480 px). Un seul réglage pour les
   en-têtes « Les expertises » (accueil), des Espaces (ListeCartes : accueil et /espaces) et les 4 blocs d'expertises de
   l'accueil (BlocExpertise) ; Altum les bridait à 420/295 px, 20.19rem et 18.5rem. Sur téléphone, pleine largeur. */
:root {
  --stoud-largeur-titre-section: 40rem;
  --stoud-largeur-texte-section: 30rem;
}
.heading_cs,
.text_single-service { max-width: var(--stoud-largeur-titre-section); }
.heading_services > [animation],
.heading_cs > [animation],
.text_single-service > [animation] { max-width: var(--stoud-largeur-titre-section); }
.heading_services > .paragraph,
.heading_cs > .paragraph,
.text_single-service > .paragraph { max-width: var(--stoud-largeur-texte-section); }

/* Lot 10, M3 : le pied de page occupe tout l'écran. Le contenu commence au haut collant (sous le flou du menu), le grand
   logo descend au bas de l'écran ; l'espace en trop se met entre les deux. Le plafond du grand logo selon la hauteur de
   l'écran (lot 6) reste. Sur téléphone, rien ne change : le pied y est déjà plus haut que l'écran. */
.footer { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.footer > .master-footer { flex: 1 0 auto; justify-content: space-between; }
@media (min-width: 768px) { .footer { padding-top: var(--haut-collant, var(--spacing--space-medium)); } }

/* Lot 10, M4 : le hero de /expertises à la hauteur de l'écran (plafond 75rem, comme Collectif), 32 px sous le contenu
   (24 sur téléphone, le jeton de Collectif) ; la photo prend la hauteur qui reste (12rem au moins). Remplace D10. */
.section_hero-expertises { height: 100vh; height: 100svh; min-height: 36rem; max-height: 75rem; display: flex; flex-direction: column; padding-bottom: var(--section-padding--extra-small); }
.section_hero-expertises > .padding-global { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.section_hero-expertises .container-large { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; }
.section_hero-expertises .hero-expertises_grille { flex: 1 1 auto; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
.section_hero-expertises .hero-expertises_image { aspect-ratio: auto; height: 100%; min-height: 12rem; }
@media (max-width: 991px) {
  .section_hero-expertises .hero-expertises_grille { grid-template-rows: auto minmax(0, 1fr) auto; }
}

/* Lot 10, M11 (version B) : la galerie « En images » des forfaits photo, bord à bord (elle sort de la marge du conteneur,
   8 px de chaque côté, l'écart de la mosaïque) et plus haute : 4:3 en bureau, 2:3 sur téléphone ; 6 photos. */
.section_galerie.is-bord-a-bord .galerie_stoud.is-bento { width: calc(100vw - 2 * var(--spacing--space-minimal, 8px)); margin-left: calc(50% - 50vw + var(--spacing--space-minimal, 8px)); margin-right: 0; aspect-ratio: 4 / 3; }
@media (max-width: 767px) { .section_galerie.is-bord-a-bord .galerie_stoud.is-bento { aspect-ratio: 2 / 3; } }

/* Lot 10, M12 (version B, d'après genesis-pricing-1 de BYQ) : « Tous les forfaits » en onglets (GrillePrix, variante
   onglets ; /js/onglets-grille.js). Titre à gauche, onglets en pilule à droite ; une grande rangée par forfait (nom,
   détail en petites capitales à chasse fixe des chiffres, prix) ; les notes et « Réserver une séance » dessous. Sans
   script : les groupes l'un sous l'autre avec leur titre. En mode édition : tous les groupes visibles. */
.grille-onglets_tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spacing--space-tiny); align-items: end; margin-bottom: var(--spacing--space-small); }
.grille-onglets_tete h2 { margin: 0; }
.grille-onglets_liste { display: inline-flex; justify-self: start; gap: 2px; padding: 4px; border-radius: 999px; background: var(--_🎨-color--base---base--dark-4); }
.grille-onglets_liste[hidden] { display: none; }
.grille-onglets_onglet { border: 0; background: none; font: inherit; font-size: 14px; padding: 8px 16px; border-radius: 999px; cursor: pointer; color: var(--_🎨-color--base---base--dark-64); transition: background-color .2s ease, color .2s ease; }
.grille-onglets_onglet[aria-selected="true"] { background: var(--_🎨-color--base---base--dark-100); color: var(--_🎨-color--base---base--light-100); }
.grille-onglets_onglet:focus-visible { outline: 2px solid var(--stoud-jaune); outline-offset: 2px; }
.grille-onglets_titre-groupe { margin: var(--spacing--space-small) 0 var(--spacing--space-micro, 16px); }
.grille-onglets_stoud.is-onglets .grille-onglets_titre-groupe { display: none; }
.grille-onglets_rangee { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto; gap: var(--spacing--space-tiny); align-items: center; padding: var(--spacing--space-small) 0; border-top: 1px solid var(--_🎨-color--base---base--dark-12); }
.grille-onglets_groupe .grille-onglets_rangee:last-child { border-bottom: 1px solid var(--_🎨-color--base---base--dark-12); }
.grille-onglets_nom { margin: 0; }
.grille-onglets_detail { font-family: var(--_🔠-typography---font--label); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--_🎨-color--base---base--dark-64); }
.grille-onglets_prix { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.grille-onglets_bas { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--spacing--space-tiny); flex-wrap: wrap; margin-top: var(--spacing--space-small); }
.grille-onglets_bas .notes_grille { margin: 0; }
html.unik-edition .grille-onglets_groupe[hidden] { display: block; }
html.unik-edition .grille-onglets_stoud.is-onglets .grille-onglets_titre-groupe { display: block; }
@media (max-width: 767px) {
  .grille-onglets_tete { grid-template-columns: minmax(0, 1fr); }
  .grille-onglets_rangee { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .grille-onglets_detail { grid-column: 1; grid-row: 2; }
  .grille-onglets_prix { grid-column: 2; grid-row: 1 / 3; }
}
@media (prefers-reduced-motion: reduce) { .grille-onglets_onglet { transition: none; } }

/* Lot 10, M14 : la FAQ de /expertises au format des autres pages (FaqSection), avec un filtre par expertise au-dessus des
   questions (puces, aria-pressed ; /js/faq-filtre.js) et l'étiquette de l'expertise au-dessus de chaque question. (Le filet
   entre le filtre et la première question est retiré au lot 11, R3.) Sans script : pas de filtre. En mode édition : le filtre
   reste visible (ses libellés se modifient) mais ne filtre pas, toutes les questions restent visibles. */
.faq-expertises_stoud h2 > span + span { color: var(--_🎨-color--base---base--dark-48); }
.faq-filtre_stoud { display: flex; flex-wrap: wrap; gap: var(--spacing--space-minimal); padding: var(--spacing--space-small) var(--spacing--space-small) var(--spacing--space-small); }
/* Lot 11, R3 (Vince : « la ligne de trop sous les filtres ») : le filet sous le filtre (M14) est retiré ; la FAQ de
   /expertises reprend le rythme de traits des autres FAQ (un trait sous chaque question, aucun au-dessus de la première). */
.faq-filtre_stoud[hidden] { display: none; }
.faq-filtre_puce { font: inherit; font-size: 15px; line-height: 1.2; padding: 9px 16px; border-radius: var(--_🔘-radius---general--default); border: 1px solid var(--_🎨-color--base---base--dark-16); background: none; color: inherit; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.faq-filtre_puce:hover { border-color: var(--_🎨-color--base---base--dark-48); }
.faq-filtre_puce[aria-pressed="true"] { background: var(--_🎨-color--base---base--dark-100); border-color: var(--_🎨-color--base---base--dark-100); color: var(--_🎨-color--base---base--light-100); }
.faq-filtre_puce:focus-visible { outline: 2px solid var(--stoud-jaune); outline-offset: 2px; }
.faq-filtre_etiquette { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--_🎨-color--base---base--dark-64); margin-bottom: 8px; }
.faq-expertises_stoud .faq-natif_stoud[hidden] { display: none; }
html.unik-edition .faq-expertises_stoud .faq-natif_stoud[hidden] { display: block; }
@media (max-width: 767px) { .faq-filtre_stoud { padding-left: 0; padding-right: 0; } }
@media (prefers-reduced-motion: reduce) { .faq-filtre_puce { transition: none; } }

/* Lot 10, M17 (retouche de Vince, version B) : les cartes « Votre équipe » de /expertises comme avant, sans boutons, plus
   hautes (30rem en bureau, 24rem sur téléphone) et le titre un peu plus grand. Bogue réglé : le voile de la carte photo
   (::after) passait par-dessus son numéro, son titre et son texte (« Un seul interlocuteur »). */
@media (min-width: 768px) { .section_facons .facon_carte { min-height: 30rem; padding: var(--spacing--space-small); } }
@media (max-width: 767px) { .section_facons .facon_carte, .section_facons .facon_carte.is-photo { min-height: 24rem; } }
.section_facons .facon_bas h3 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); }
.section_facons .facon_carte.is-photo::after { z-index: 0; }
.section_facons .facon_carte.is-photo > .facon_numero, .section_facons .facon_carte.is-photo > .facon_bas { z-index: 1; }
.section_facons .facon_carte.is-photo h3 { color: var(--_🎨-color--base---base--light-100); }

/* Lot 10, M15 : 6 équipes types sur deux rangées de 3 (2 sur tablette, 1 sur téléphone), mêmes cartes. */
.section_features .grid_features.is-six { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.section_features .grid_features.is-six > .card_feature { grid-column: auto; grid-row: auto; }
@media (max-width: 991px) { .section_features .grid_features.is-six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .section_features .grid_features.is-six { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } }
/* Lot 11, R6 (Vince : « le titre de chaque carte toujours sur 2 lignes ») : dans les équipes types, chaque titre réserve
   2 lignes à toutes les largeurs (3 entre 992 et 1039 px avant), équilibrées (text-wrap: balance). Un titre trop long
   pour 2 lignes se raccourcit (« Présence sur les réseaux » → « Réseaux sociaux », à corriger dans la barre). */
.section_features .grid_features.is-six .card_feature h3 { min-height: 2lh; text-wrap: balance; }

/* Lot 10, M16 (version C) : /collectif, « Nos valeurs » en trois cartes photo hautes, la valeur et son texte posés sur la
   photo (dégradé sombre en bas), juste avant le bloc défilant des expertises. */
.valeurs_tete { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing--space-xx-small); max-width: 40rem; }
.valeurs_tete h2 { margin: 0; }
.valeurs_grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing--space-xx-small); }
.valeur_carte { position: relative; min-height: 34rem; border-radius: var(--_🔘-radius---general--large); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: var(--spacing--space-small); color: var(--_🎨-color--base---base--light-100); background: var(--_🎨-color--base---base--dark-100); }
.valeur_carte > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.valeur_carte::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--_🎨-color--base---base--dark-24) 0%, var(--_🎨-color--base---base--dark-0) 35%, var(--_🎨-color--base---base--dark-88) 100%); }
.valeur_carte > :not(img) { position: relative; z-index: 1; }
.valeur_numero { font-variant-numeric: tabular-nums; color: var(--_🎨-color--base---base--light-88); }
.valeur_bas { display: flex; flex-direction: column; gap: 10px; }
.valeur_bas h3, .valeur_bas p { margin: 0; }
.valeur_bas p { color: var(--_🎨-color--base---base--light-88); }
@media (max-width: 991px) { .valeurs_grille { grid-template-columns: minmax(0, 1fr); } .valeur_carte { min-height: 24rem; } }
/* Lot 10, P36 (Vince) : un peu plus d'espace sous « Nos valeurs », avant le bloc défilant (+3rem à 1440, la moitié sur
   téléphone). */
.section_valeurs-stoud { padding-bottom: calc(var(--stoud-espace-section) + 3rem); }
@media (max-width: 767px) { .section_valeurs-stoud { padding-bottom: calc(var(--stoud-espace-section) + 1.5rem); } }

/* Lot 10, M16 : le bloc défilant (carte blanche sur photo floue, gabarit « approach » d'Altum) présente les 4 expertises.
   Son animation IX3 (3 diapositives, déclenchée par la classe master_approach) est refaite en GSAP pour N diapositives
   (/js/defilant-expertises.js) : même mouvement (photo et texte glissent d'un cran à la fois, flou pendant le passage, titre
   et mots du texte qui apparaissent à l'arrivée). Le script pose .is-anime ; sans lui (pas de script, mouvement réduit, mode
   édition), les diapositives sont l'une sous l'autre, chacune avec sa photo, lisibles. */
.section_defilant-stoud { position: relative; z-index: 10; background-color: var(--_🎨-color--tokens---background--base); } /* suit le noir de /collectif (2026-10-20) */
.defilant_stoud { display: flex; flex-direction: column; }
.defilant_stoud .image_approach-bg, .defilant_stoud .right_approach { top: calc(var(--rang, 0) * 100%); bottom: auto; }
.defilant_stoud .diapo-photo_stoud { display: none; }
/* Sans animation : à plat. */
.defilant_stoud:not(.is-anime) .tile_approach { position: relative; height: auto; }
.defilant_stoud:not(.is-anime) .master_approach-images { display: none; }
.defilant_stoud:not(.is-anime) :is(.card_approach, .wrap_right-approach, .mask_right-approach, .wrap-text_approach) { height: auto; overflow: visible; }
.defilant_stoud:not(.is-anime) .card_approach { grid-template-rows: auto; }
@media (max-width: 991px) { .defilant_stoud:not(.is-anime) .wrap-text_approach { padding-top: var(--spacing--space-small); padding-bottom: var(--spacing--space-small); } }
.defilant_stoud:not(.is-anime) .right_approach { position: relative; inset: auto; height: clamp(20rem, 60vh, 32rem); border-radius: var(--_🔘-radius---general--default); }
.defilant_stoud:not(.is-anime) .right_approach + .right_approach { margin-top: var(--spacing--space-xx-small); }
.defilant_stoud:not(.is-anime) .diapo-photo_stoud { display: block; position: absolute; inset: 0; z-index: 0; }
.defilant_stoud:not(.is-anime) .right_approach::after { z-index: 0; }
.defilant_stoud:not(.is-anime) .inner_approach { z-index: 1; }
.defilant_stoud:not(.is-anime) .overlay_blur { display: none; }
/* Avec l'animation : collé à l'écran sur N écrans de défilement, comme le gabarit (3 diapositives sur 300vh). */
.defilant_stoud.is-anime { height: calc(var(--diapos, 3) * 100vh); }
@media (max-width: 767px) { .defilant_stoud .image_approach-bg { background-position: 75%; background-attachment: scroll; } }

/* Lot 10, M19 (version D) : les cartes empilées (ListeCartes : accueil et /espaces) se posent plus haut : 200 px au lieu de
   320. Le titre s'arrête où il s'arrêtait (--haut-collant). Lot 11, E2 : au téléphone, 170 px (150 avant) pour que le titre
   rangé au-dessus de la pile reste lisible (≈ 55 % de sa taille).
   Lot 11, L1 : le titre rangé descend avec le menu plus haut (logo Poppins, +4,7 px ; +2,9 au téléphone) ; la pile descend
   de 5 px (3 au téléphone) pour garder les 11 px d’air d’E2 entre le titre et la carte posée. */
.section_client-stories .item_client-story { top: 205px; }
@media (max-width: 767px) { .section_client-stories .item_client-story { top: 173px; } }

/* Lot 10, M13 : l'escalier de l'accueil montre trois chiffres (le gabarit stats d'Altum reste), la valeur en grand ; la
   démarche (5 étapes) passe dessous et sur /expertises, chaque rangée resserrée pour que la liste reste près de sa hauteur
   d'avant (3 rangées). */
.section_stats .stat_valeur { font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: 1; letter-spacing: -.03em; }
.section_etapes-expertises .etapes-expertises_liste .etape-expertises { padding-top: var(--spacing--space-small); padding-bottom: var(--spacing--space-small); }

/* Lot 10, M13 : /collectif, les phrases qui se remplacent (6 avec les 5 étapes), animées en GSAP (/js/phrases-collectif.js)
   au lieu de l'IX3 d'Altum (4 phrases, classe scroll-3d-text). Même hauteur par phrase que le gabarit (400vh pour 4). Sans
   animation (pas de script, mouvement réduit, mode édition) : les phrases l'une sous l'autre. */
.defilement-phrases_stoud { position: relative; }
.defilement-phrases_stoud.is-anime { height: calc(var(--phrases, 4) * 100vh); }
.defilement-phrases_stoud:not(.is-anime) .master_swap-text { position: relative; height: auto; padding-bottom: var(--section-padding--large); }
.defilement-phrases_stoud:not(.is-anime) .wrap_swap-headings { flex-direction: column; gap: var(--spacing--space-small); transform: none; }
.defilement-phrases_stoud:not(.is-anime) .text-swap.is-second { position: relative; inset: auto; transform: none; }

/* Lot 10, M18 (version C) : /espaces, la visite 3D. Titre centré, onglets par espace en pilule, grande visionneuse 21:9
   (4:5 sur téléphone) avec la photo de l'espace en attente ; le bouton rond jaune « Lancer la visite » charge l'iframe au
   clic ; « Plein écran » en bas à droite. La section n'existe que si un espace a un lien (champ visite3d). */
.visite_tete { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--spacing--space-xx-small); }
.visite_tete h2, .visite_tete p { margin: 0; }
.visite_centre { display: flex; justify-content: center; margin-bottom: var(--spacing--space-small); }
.visite_onglets { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--_🎨-color--base---base--dark-4); }
.visite_onglet { border: 0; background: none; font: inherit; font-size: 14px; padding: 8px 16px; border-radius: 999px; color: var(--_🎨-color--base---base--dark-64); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.visite_onglet[aria-selected="true"] { background: var(--_🎨-color--base---base--dark-100); color: var(--_🎨-color--base---base--light-100); }
.visite_onglet:focus-visible { outline: 2px solid var(--stoud-jaune); outline-offset: 2px; }
.visite_ecran { position: relative; overflow: hidden; aspect-ratio: 21 / 9; border-radius: var(--_🔘-radius---general--large); background: var(--_🎨-color--base---base--dark-100); color: var(--_🎨-color--base---base--light-100); }
.visite_ecran:fullscreen { border-radius: 0; }
.visite_attente { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visite_ecran::after { content: ""; position: absolute; inset: 0; background: var(--_🎨-color--base---base--dark-32); pointer-events: none; }
.visite_ecran.is-lancee::after { display: none; }
.visite_ecran iframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; }
.visite_lancer { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--_🎨-color--base---base--light-100); text-decoration: none; }
.visite_lancer[hidden] { display: none; }
.visite_jouer { width: 4.5rem; height: 4.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--stoud-jaune); color: var(--_🎨-color--base---base--dark-100); transition: transform .3s ease; }
.visite_lancer:hover .visite_jouer { transform: scale(1.06); }
.visite_lancer:focus-visible .visite_jouer { outline: 2px solid var(--_🎨-color--base---base--light-100); outline-offset: 4px; }
.visite_plein { position: absolute; z-index: 3; right: 16px; bottom: 16px; font: inherit; font-size: 13px; padding: 8px 12px; border: 0; border-radius: 999px; background: var(--_🎨-color--base---base--light-88); color: var(--_🎨-color--base---base--dark-100); cursor: pointer; }
.visite_plein[hidden] { display: none; }
@media (max-width: 767px) { .visite_ecran { aspect-ratio: 4 / 5; } }
@media (prefers-reduced-motion: reduce) { .visite_jouer, .visite_onglet { transition: none; } }

/* Lot 10, plan aérien : la section « Le local » des pages d'espace (PlanLocal.astro, /js/plan-local.js ; maquette approuvée
   _plan/labo/section-le-local.html, version 6, mise en page A : accordéon et grande photo). Titre en deux tons et intro sur
   12 colonnes, le plan pleine largeur (horizontal en bureau, vertical sous 768 px), la liste des points (5 colonnes) et la
   photo du point (6 colonnes, collante en bureau). Noir, blanc et gris tirés des transparences ; le jaune seulement pour la
   pastille active, la porte de garage et le point de la liste. */
.plan-local_tete { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--stoud-espace-rangees); align-items: end; }
.plan-local_gauche { grid-column: span 7; display: grid; gap: var(--spacing--space-micro, 20px); }
.plan-local_gauche h2 { margin: 0; text-wrap: balance; }
.plan-local_gauche h2 > span + span { color: var(--_🎨-color--base---base--dark-48); }
/* Lot 11, R12 (Vince) : le titre en deux tons sur 2 lignes (chaque partie sur la sienne) et les deux colonnes alignées en haut
   (elles l'étaient en bas : le texte de droite, plus haut, commençait au-dessus de l'étiquette). */
.plan-local_tete { align-items: start; }
.plan-local_gauche h2 > span { display: block; }
.plan-local_droite { grid-column: 9 / span 4; display: grid; gap: 24px; }
.plan-local_faits { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plan-local_faits li { border: 1px solid var(--_🎨-color--base---base--dark-16); padding: 6px 10px; font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.plan-local_plan { position: relative; margin-bottom: var(--stoud-espace-blocs); padding: clamp(16px, 3vw, 40px); border-radius: var(--_🔘-radius---general--large); background: var(--_🎨-color--base---base--dark-4); }
.plan_svg { display: block; width: 100%; height: auto; overflow: visible; }
.plan_svg.is-v { display: none; }
@media (max-width: 767px) { .plan_svg.is-h { display: none; } .plan_svg.is-v { display: block; max-width: 26rem; margin: 0 auto; } }
.plan_mur { fill: var(--_🎨-color--base---base--dark-100); }
.plan_piece { fill: var(--_🎨-color--base---base--dark-4); transition: fill .5s ease; }
.plan_piece.is-emphase { fill: var(--_🎨-color--base---base--light-100); }
.plan_meuble { fill: var(--_🎨-color--base---base--light-100); stroke: var(--_🎨-color--base---base--dark-32); stroke-width: 1px; vector-effect: non-scaling-stroke; transition: opacity .5s ease; }
.plan_meuble.is-plein { fill: var(--_🎨-color--base---base--dark-8); }
.plan_svg .is-hors .plan_meuble { opacity: .45; }
.plan_ouverture { fill: var(--_🎨-color--base---base--light-100); }
.plan_battant { fill: none; stroke: var(--_🎨-color--base---base--dark-100); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.plan_vitre { stroke: var(--_🎨-color--base---base--dark-100); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.plan_fixe { stroke: var(--_🎨-color--base---base--dark-100); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.plan_garage { stroke: var(--stoud-jaune); stroke-width: 6px; stroke-dasharray: 10 5; vector-effect: non-scaling-stroke; }
.plan_nom { font-weight: 500; text-transform: uppercase; letter-spacing: .06em; fill: var(--_🎨-color--base---base--dark-100); }
.plan_nom.is-hors { fill: var(--_🎨-color--base---base--dark-48); }
.plan_aire { fill: var(--_🎨-color--base---base--dark-64); }
.plan_fond { stroke: var(--_🎨-color--base---base--dark-100); stroke-width: 7px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.plan_decor { fill: none; stroke-width: 5px; vector-effect: non-scaling-stroke; }
.plan_decor.is-bois { stroke: var(--_🎨-color--base---base--dark-48); stroke-dasharray: 2 3; }
.plan_decor.is-beton { stroke: var(--_🎨-color--base---base--dark-16); }
.plan_decor.is-hors { opacity: .4; }
.plan_prise { fill: var(--_🎨-color--base---base--light-100); stroke: var(--_🎨-color--base---base--dark-100); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.plan_prise-trou, .plan_fleche { fill: var(--_🎨-color--base---base--dark-100); }
.plan_zone { fill: none; stroke: var(--_🎨-color--base---base--dark-48); stroke-width: 1.5px; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.plan_rideau { fill: none; stroke: var(--_🎨-color--base---base--dark-100); stroke-width: 4px; stroke-dasharray: 1 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.plan_trajet { fill: none; stroke: var(--_🎨-color--base---base--dark-100); stroke-width: 2px; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.plan_legende { fill: var(--_🎨-color--base---base--dark-100); font-weight: 500; }
.plan_pastille { fill: var(--_🎨-color--base---base--dark-100); transition: fill .3s ease; }
.plan_point text { fill: var(--_🎨-color--base---base--light-100); font-weight: 700; pointer-events: none; font-variant-numeric: tabular-nums; }
.plan_halo { fill: none; stroke: var(--stoud-jaune); stroke-width: 2px; vector-effect: non-scaling-stroke; opacity: 0; }
.plan-local_stoud.is-js .plan_point { cursor: pointer; }
.plan-local_stoud.is-js .plan_point.is-actif .plan_pastille { fill: var(--stoud-jaune); }
.plan-local_stoud.is-js .plan_point.is-actif text { fill: var(--_🎨-color--base---base--dark-100); }
.plan-local_stoud.is-js .plan_point.is-actif .plan_halo { animation: plan-halo 1.8s var(--stoud-courbe) infinite; }
@keyframes plan-halo { 0% { opacity: .9; r: var(--r0); } 100% { opacity: 0; r: var(--r1); } }
.plan_point:focus { outline: none; }
.plan_point:focus-visible .plan_pastille { stroke: var(--stoud-jaune); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.plan-local_details { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--stoud-espace-rangees); align-items: start; }
.plan-local_liste { grid-column: span 5; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--_🎨-color--base---base--dark-16); }
.plan-local_photos { grid-column: 7 / span 6; position: sticky; top: var(--haut-collant, 80px); display: grid; gap: var(--stoud-espace-rangees); }
.plan-local_bouton { width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 16px 0; background: none; border: 0; border-bottom: 1px solid var(--_🎨-color--base---base--dark-16); font: inherit; text-align: left; cursor: pointer; color: inherit; }
.plan-local_n { font-size: 12px; letter-spacing: .75px; font-weight: 500; color: var(--_🎨-color--base---base--dark-64); font-variant-numeric: tabular-nums; }
.plan-local_titre { font-size: 20px; line-height: 24px; transition: color .3s ease; }
.plan-local_bouton:hover .plan-local_titre { color: var(--_🎨-color--base---base--dark-64); }
.plan-local_bouton:focus-visible { outline: 2px solid var(--stoud-jaune); outline-offset: 2px; }
.plan-local_point.is-actif .plan-local_n { color: var(--_🎨-color--base---base--dark-100); }
.plan-local_stoud.is-js .plan-local_point.is-actif .plan-local_titre::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--stoud-jaune); margin-left: 10px; vertical-align: middle; }
.plan-local_texte { display: grid; gap: 12px; padding: 0 0 20px 52px; border-bottom: 1px solid var(--_🎨-color--base---base--dark-16); }
.plan-local_texte p { margin: 0; max-width: 52ch; }
.plan-local_point .plan-local_bouton { border-bottom-color: transparent; }
.plan-local_stoud.is-js .plan-local_point:not(.is-actif) .plan-local_bouton { border-bottom-color: var(--_🎨-color--base---base--dark-16); }
.plan-local_stoud.is-js .plan-local_point:not(.is-actif) .plan-local_texte { display: none; }
.plan-local_photo { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--_🔘-radius---general--large); overflow: hidden; background: var(--_🎨-color--base---base--dark-8); }
.plan-local_photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plan-local_stoud.is-js .plan-local_photo:not(.is-actif) { display: none; }
/* Mode édition : tout ouvert, toutes les photos (la barre atteint chacune). */
html.unik-edition .plan-local_stoud.is-js .plan-local_point:not(.is-actif) .plan-local_texte { display: grid; }
html.unik-edition .plan-local_stoud.is-js .plan-local_photo:not(.is-actif) { display: block; }
@media (max-width: 991px) {
  .plan-local_gauche, .plan-local_droite, .plan-local_liste, .plan-local_photos { grid-column: 1 / -1; }
  .plan-local_photos { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .plan_piece, .plan_meuble, .plan_pastille, .plan-local_titre { transition: none; }
  .plan-local_stoud.is-js .plan_point.is-actif .plan_halo { animation: none; }
}

/* Lot 10, M20 (version B) : la page « bientôt » (en-construction.astro, site fermé). Typographique, sur une grille de
   petits points qui scintillent (/js/points.js, canvas) : le S en haut, « Bientôt. » en très grand (le point en jaune), la
   phrase et les liens en bas. */
.bientot_stoud { --points-jaune: 250, 189, 74; --points-blanc: 255, 255, 255; position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; background: var(--_🎨-color--base---base--dark-100); color: var(--_🎨-color--base---base--light-100); }
.bientot_points { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bientot_cadre { position: relative; z-index: 1; box-sizing: border-box; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; gap: 24px; padding: var(--stoud-marge-laterale); }
.bientot_s { width: 44px; }
.bientot_s svg { display: block; width: 100%; height: auto; }
.bientot_mot { align-self: center; margin: 0; font-size: clamp(5rem, 19vw, 18rem); line-height: .9; letter-spacing: -.06em; font-weight: 500; color: inherit; }
.bientot_mot span { color: var(--stoud-jaune); }
.bientot_bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; }
.bientot_bas p { margin: 0; font-size: clamp(1.125rem, 1.6vw, 1.5rem); line-height: 1.3; max-width: 60ch; }
.bientot_bas p span { display: block; } /* P24 : une phrase par ligne */
.bientot_liens { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.bientot_liens a { color: var(--_🎨-color--base---base--light-88); text-decoration: none; transition: color .3s; }
.bientot_liens a:hover, .bientot_liens a:focus-visible { color: var(--_🎨-color--base---base--light-100); text-decoration: underline; }
.bientot_liens a:focus-visible { outline: 2px solid var(--stoud-jaune); outline-offset: 3px; }
.bientot_liens .bientot_acces { font-size: 13px; color: var(--_🎨-color--base---base--light-64); }

/* Lot 10, M21 (version B) : la page du mot de passe (/acces). Écran coupé en deux, comme la connexion du panneau (lot 9) :
   à gauche le logo, le formulaire au centre et « Retour » en bas ; à droite la photo du studio, arrondie, avec l'adresse en
   pastille. Sur téléphone, le formulaire seul. */
.acces_stoud { min-height: 100vh; min-height: 100svh; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 8px; background: var(--_🎨-color--base---base--dark-100); color: var(--_🎨-color--base---base--light-100); }
.acces_gauche { display: flex; flex-direction: column; justify-content: space-between; gap: var(--stoud-espace-blocs); padding: calc(var(--stoud-marge-laterale) - 8px); }
.acces_logo { display: block; width: 13rem; color: inherit; }
.acces_logo svg { display: block; width: 100%; height: auto; }
.acces_milieu { width: min(100%, 26rem); display: flex; flex-direction: column; gap: var(--spacing--space-small); }
.acces_milieu h1 { margin: 0; font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 400; letter-spacing: -.06em; line-height: 1.05; color: inherit; }
.acces_milieu p { margin: 0; color: var(--_🎨-color--base---base--light-64); }
.acces_surtitre { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--_🎨-color--base---base--light-64); font-weight: inherit; }
.acces_form { display: flex; flex-direction: column; gap: 8px; }
.acces_ligne { display: flex; gap: 8px; }
.acces_ligne input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 17px; color: inherit; background: var(--_🎨-color--base---base--light-6); border: 1px solid var(--_🎨-color--base---base--light-16); border-radius: var(--_🔘-radius---general--default); padding: 14px 16px; outline: none; }
.acces_ligne input:focus { border-color: var(--stoud-jaune); }
.acces_ligne button { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border: 0; border-radius: var(--_🔘-radius---general--default); background: var(--stoud-jaune); color: var(--_🎨-color--base---base--dark-100); font: inherit; font-weight: 500; cursor: pointer; }
.acces_ligne button svg { width: 16px; height: 16px; }
.acces_ligne button:focus-visible { outline: 2px solid var(--_🎨-color--base---base--light-100); outline-offset: 2px; }
.acces_erreur { margin: 0; color: var(--stoud-jaune) !important; }
.acces_retour { align-self: flex-start; font-size: 13px; color: var(--_🎨-color--base---base--light-64); text-decoration: none; }
.acces_retour:hover, .acces_retour:focus-visible { color: var(--_🎨-color--base---base--light-100); text-decoration: underline; }
.acces_photo { position: relative; overflow: hidden; border-radius: var(--_🔘-radius---general--large); }
.acces_photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.acces_adresse { position: absolute; left: 16px; bottom: 16px; padding: 6px 12px; border-radius: 999px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: var(--_🎨-color--base---base--dark-48); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (max-width: 767px) { .acces_stoud { grid-template-columns: minmax(0, 1fr); } .acces_photo { display: none; } .acces_ligne { flex-direction: column; } }

/* Lot 10, M22 : la page 404, nue (sans menu ni pied), d'après btminc.webflow.io : fond noir et « glitch » en canvas
   (/js/glitch.js), le S centré en haut, le surtitre du site, un grand titre en capitales, la phrase, un bouton en verre et
   trois liens. */
.erreur_stoud { --glitch-jaune: 250, 189, 74; --glitch-blanc: 255, 255, 255; position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; background: var(--_🎨-color--base---base--dark-100); color: var(--_🎨-color--base---base--light-100); }
.erreur_glitch { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.erreur_s { position: absolute; z-index: 1; top: 24px; left: 50%; transform: translateX(-50%); width: 40px; color: inherit; }
.erreur_s svg { display: block; width: 100%; height: auto; }
.erreur_s:focus-visible { outline: 2px solid var(--stoud-jaune); outline-offset: 4px; }
.erreur_centre { position: relative; z-index: 1; box-sizing: border-box; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--spacing--space-small); padding: 96px var(--stoud-marge-laterale); }
.erreur_surtitre { color: var(--_🎨-color--base---base--light-88); }
.erreur_titre { margin: 0; max-width: 10ch; font-size: clamp(2.5rem, 5.5vw, 5rem); line-height: .95; letter-spacing: -.06em; text-transform: uppercase; font-weight: 600; color: inherit; }
.erreur_texte { margin: 0; max-width: 34ch; color: var(--_🎨-color--base---base--light-88); }
.erreur_bouton { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: var(--_🔘-radius---general--default); border: 1px solid var(--_🎨-color--base---base--light-16); background: var(--_🎨-color--base---base--light-8); color: var(--_🎨-color--base---base--light-100); font-weight: 500; text-decoration: none; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.erreur_bouton svg { width: 16px; height: 16px; }
.erreur_bouton:hover, .erreur_bouton:focus-visible { background: var(--stoud-jaune); border-color: var(--stoud-jaune); color: var(--_🎨-color--base---base--dark-100); }
.erreur_bouton:focus-visible { outline: 2px solid var(--_🎨-color--base---base--light-100); outline-offset: 2px; }
.erreur_liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 8px; }
.erreur_liens a { color: var(--_🎨-color--base---base--light-88); text-decoration: none; transition: color .3s; }
.erreur_liens a:hover, .erreur_liens a:focus-visible { color: var(--_🎨-color--base---base--light-100); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .erreur_bouton, .erreur_liens a { transition: none; } }

/* Lot 10, M23 : le mot « LE STOUD. » et le bouton Menu sans mix-blend-mode (couche .inner_nav.is-dessus) : blancs sur une
   photo, une vidéo ou un fond foncé, noirs sinon (/js/nav-logo.js mesure ce qui est dessous). Fondu de 0,3 s. Avant la
   première mesure : blancs (la plupart des pages s'ouvrent sur une photo ou un fond noir). */
.inner_nav.is-dessus { --nav-mot: var(--_🎨-color--base---base--light-100); --nav-menu: var(--_🎨-color--base---base--light-100); }
html[data-logo-nav="fonce"] .inner_nav.is-dessus { --nav-mot: var(--_🎨-color--base---base--dark-100); }
html[data-menu-nav="fonce"] .inner_nav.is-dessus { --nav-menu: var(--_🎨-color--base---base--dark-100); }
.inner_nav.is-dessus .logo-nav_mot { color: var(--nav-mot); transition: color .3s ease; }
.inner_nav.is-dessus .logo-nav_mot svg, .inner_nav.is-dessus .logo-nav_mot svg path { fill: currentColor; }
.inner_nav.is-dessus .button_nav, .inner_nav.is-dessus .button_nav * { color: var(--nav-menu); transition: color .3s ease; }
@media (prefers-reduced-motion: reduce) { .inner_nav.is-dessus .logo-nav_mot, .inner_nav.is-dessus .button_nav, .inner_nav.is-dessus .button_nav * { transition: none; } }

/* Lot 10, M24 (version A, d'après gooey-nav-01 de BYQ) : l'icône du bouton Menu. Deux points ; au survol, ils s'étirent
   l'un vers l'autre et se fondent en une pilule (filtre goo SVG #goo-menu, posé une fois par Nav.astro) ; menu ouvert
   (.navbar.menu-ouvert), ils deviennent un ×. currentColor : l'icône suit la couleur du bouton (M23). Mouvement réduit :
   l'état final, sans animation. */
.icone-menu_stoud { position: relative; display: inline-block; flex: none; width: 18px; height: 18px; margin-left: 8px; color: inherit; filter: url(#goo-menu); }
.icone-menu_stoud i { position: absolute; display: block; top: 6px; width: 6px; height: 6px; border-radius: 6px; background: currentColor; }
/* 2026-10-20 (Vince : « beaucoup trop sec ») : « .inner_nav.is-dessus .button_nav * { transition: color } » (plus haut)
   l'emportait et coupait le mouvement des points : la pilule et le × sautaient. La transition se redéclare au même poids,
   plus longue et plus douce (0,6 s au lieu de 0,45). */
.inner_nav.is-dessus .button_nav .icone-menu_stoud i { transition: left .6s cubic-bezier(.65, 0, .35, 1), width .6s cubic-bezier(.65, 0, .35, 1), height .5s cubic-bezier(.65, 0, .35, 1), top .5s cubic-bezier(.65, 0, .35, 1), transform .6s cubic-bezier(.65, 0, .35, 1), color .3s ease; }
.icone-menu_stoud i:nth-child(1) { left: 1px; }
.icone-menu_stoud i:nth-child(2) { left: 11px; }
.button_nav:hover .icone-menu_stoud i:nth-child(1), .button_nav:focus-visible .icone-menu_stoud i:nth-child(1) { width: 11px; }
.button_nav:hover .icone-menu_stoud i:nth-child(2), .button_nav:focus-visible .icone-menu_stoud i:nth-child(2) { left: 6px; width: 11px; }
.navbar.menu-ouvert .icone-menu_stoud { filter: none; }
/* Menu ouvert : passe devant le survol (le bouton reste survolé ou focalisé après le clic). */
.navbar.menu-ouvert .button_nav .icone-menu_stoud i:nth-child(n) { left: 0; top: 8px; width: 18px; height: 2px; }
.navbar.menu-ouvert .button_nav .icone-menu_stoud i:nth-child(1) { transform: rotate(45deg); }
.navbar.menu-ouvert .button_nav .icone-menu_stoud i:nth-child(2) { transform: rotate(-45deg); }
.button_nav { display: inline-flex; align-items: center; }
@media (prefers-reduced-motion: reduce) { .inner_nav.is-dessus .button_nav .icone-menu_stoud i { transition: none; } }

/* Lot 10, P15 : une image de fond en ligne hors du premier écran (.fond-differe) n'est pas demandée tant que
   /js/fonds-differes.js ne l'a pas libérée (avec JavaScript seulement ; jamais en mode édition). */
html.w-mod-js:not(.unik-edition) .fond-differe { background-image: none !important; }

/* Lot 10, P22 : le bloc des chiffres de l'accueil. L'image dans le cadre est nette (.is-net, /js/impact-net.js), les autres
   floues ; la classe impact-blur qu'IX3 pose et bascule n'a plus d'effet ici (elle laissait floue l'image en place). Mode
   édition : toutes nettes (edition.js les met côte à côte). */
.wrap_image_impact .image_impact { filter: blur(20px); }
.wrap_image_impact .image_impact.is-net { filter: none; }
html.unik-edition .wrap_image_impact .image_impact { filter: none; }

/* Lot 10, P23 : Lenis (défilement doux, /js/defilement-doux.js). Les règles de lenis.css (1.3.26), sauf celle qui coupe les
   clics dans les iframes pendant le défilement doux (la carte de Contact et la visite 3D doivent rester utilisables). */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

/* Lot 10, P33 (Vince : « un peu de transitioning au hover sur le menu ») : les liens du menu ouvert. Au survol ou au focus
   clavier, le lien s'éclaire et glisse un peu vers la droite, un point jaune apparaît devant, les autres liens s'effacent
   un peu plus ; même courbe que le reste du site. Les liens du bas (réseaux, courriel) : un trait qui se dessine. */
.link_nav-menu { position: relative; display: flex; align-items: center; transition: opacity .45s var(--stoud-courbe), color .45s var(--stoud-courbe); }
.link_nav-menu > div { transition: transform .45s var(--stoud-courbe); }
.link_nav-menu::before { content: ""; position: absolute; left: 0; top: 50%; width: .4em; height: .4em; margin-top: -.2em; border-radius: 50%; background: var(--stoud-jaune); opacity: 0; transform: scale(.2); transition: opacity .35s ease, transform .45s var(--stoud-courbe); }
.link_nav-menu:is(:hover, :focus-visible) { opacity: 1; color: var(--_🎨-color--tokens---tone--strong); }
.link_nav-menu:is(:hover, :focus-visible) > div { transform: translateX(.75em); }
.link_nav-menu:is(:hover, :focus-visible)::before { opacity: 1; transform: none; }
.link_nav-menu:focus-visible { outline: none; }
/* La page où l'on est garde son point et son décalage, au repos. */
.link_nav-menu.is-actif > div { transform: translateX(.75em); }
.link_nav-menu.is-actif::before { opacity: 1; transform: none; }
.column_nav-links:hover .link_nav-menu:not(:hover) { opacity: .18; }
.link_nav-social { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--stoud-courbe), opacity .3s; text-decoration: none; }
.link_nav-social:is(:hover, :focus-visible) { background-size: 100% 1px; }
/* Lot 11, R1 (Vince : le trait sous les liens « Nous suivre ») : le trait fait la largeur du lien seulement (la colonne
   flex étirait chaque lien à toute sa largeur) et il est jaune ; même entrée (background-size, 0,45 s). */
.nav_socials-list .link_nav-social { align-self: flex-start; width: fit-content; background-image: linear-gradient(var(--stoud-jaune), var(--stoud-jaune)); }
@media (prefers-reduced-motion: reduce) {
  .link_nav-menu > div, .link_nav-menu::before, .link_nav-social { transition: none; }
  .link_nav-menu:is(:hover, :focus-visible) > div, .link_nav-menu.is-actif > div { transform: none; }
}

/* Lot 10, P35 (Vince : « grossis légèrement l'image du hero de la page expertises ») : à partir de 992 px, l'image prend
   8 colonnes sur 12 au lieu de 7 (le texte garde sa largeur utile, 420 px au plus) et le haut du hero respire un peu
   moins, ce qui lui donne aussi de la hauteur. */
@media (min-width: 992px) {
  .hero-expertises_grille { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .section_hero-expertises { padding-top: calc(var(--section-padding--large) + var(--stoud-espace-blocs) * .5); }
}

/* Lot 10, P34 (version A, approuvée par Vince dans l'artifact A1) : le menu des pages dans la colonne de gauche du pied, en
   grand (la page courante en jaune) ; à droite, le titre et les boutons, puis Expertises, Espaces et Coordonnées ; le légal
   sur une ligne fine. Sur téléphone : le titre et les boutons d'abord, puis le menu sur deux colonnes, les colonnes, le
   légal. */
.menu-pied_stoud { display: flex; flex-direction: column; gap: var(--spacing--space-tiny); }
.menu-pied_liste { display: flex; flex-direction: column; gap: 2px; }
.menu-pied_lien { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.12; letter-spacing: -.03em; color: var(--_🎨-color--tokens---tone--strong); text-decoration: none; width: fit-content; transition: color .45s var(--stoud-courbe), transform .45s var(--stoud-courbe); }
.menu-pied_lien:is(:hover, :focus-visible) { color: var(--stoud-jaune); transform: translateX(.25em); }
.menu-pied_lien.is-actif { color: var(--stoud-jaune); }
.footer_columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.legal-pied_stoud { display: flex; flex-wrap: wrap; gap: 6px var(--spacing--space-small); padding-top: var(--spacing--space-tiny); border-top: 1px solid var(--_🎨-color--base---base--light-12, rgba(255, 255, 255, .12)); font-size: 14px; }
/* Chantier K : .64 donnait 3,76:1 sur le noir (Lighthouse) ; .76 passe le AA (environ 4,8:1). */
.legal-pied_stoud .link_footer { opacity: .76; }
@media (max-width: 991px) {
  /* Altum place cette colonne en premier par son id (#w-node-…, order -9999) : !important passe par-dessus. */
  .footer_top-tile > .left-footer { order: 2 !important; }
  .footer_top-tile > .right-footer { display: contents; }
  .right-footer > .footer_right-top-tile { order: 1; }
  .right-footer > .footer_columns { order: 3; }
  .right-footer > .legal-pied_stoud { order: 4; }
  .menu-pied_liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px var(--spacing--space-small); }
  .menu-pied_lien { font-size: 1.375rem; }
  .legal-pied_stoud { flex-direction: column; width: 100%; }
  .menu-pied_stoud { width: 100%; }
}
@media (max-width: 767px) {
  .right-footer > .footer_columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing--space-small); width: 100%; }
  .right-footer > .footer_columns > .coumn_footer:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .menu-pied_lien { transition: none; } .menu-pied_lien:is(:hover, :focus-visible) { transform: none; } }
/* P34 : sur un écran bas (820 px ou moins), le pied et son menu se resserrent pour tenir dans l'écran (M3 : 100vh). */
@media (min-width: 992px) and (max-height: 820px) {
  .footer { padding-top: 6.5rem; }
  .menu-pied_lien { font-size: 1.5rem; }
  .menu-pied_stoud { gap: var(--spacing--space-xx-small); }
  .right-footer { row-gap: var(--spacing--space-small); }
}
@media (min-width: 992px) and (max-height: 740px) {
  .footer { padding-top: 5.5rem; }
  .right-footer { row-gap: var(--spacing--space-xx-small); }
  .menu-pied_lien { font-size: 1.375rem; }
}

/* Lot 10, P42 : « Une salle, trois usages » (/espaces) passe au noir au défilement (mode-dark). Sur le noir, le tracé
   pointillé (noir dans le SVG) passe en blanc estompé et les cartes des étapes gardent une surface opaque (le tracé passe dessous) : un gris très sombre
   avec un trait fin, au lieu du fond de page. Même durée que le passage des couleurs du gabarit. Le gabarit revient au
   blanc en ajoutant .mode-light par-dessus .mode-dark (sans la retirer) : le noir, c'est .mode-dark sans .mode-light. */
.section_steps .card_step { transition: background-color .5s ease, box-shadow .5s ease, border-color .5s ease; border: 1px solid transparent; }
.section_steps .line-dashed path[stroke="black"] { transition: stroke .5s ease, opacity .5s ease; }
.main-wrapper.mode-dark:not(.mode-light) .section_steps .card_step { background-color: #18181a; border-color: rgba(255, 255, 255, .12); box-shadow: none; }
.main-wrapper.mode-dark:not(.mode-light) .section_steps .line-dashed path[stroke="black"] { stroke: #fff; opacity: .45; }

/* Lot 10, P42 : la démarche (/expertises) et « Encore mieux, en équipe » (pages d'expertise) en noir : le 2e ton des titres
   passe de 48 % noir à 48 % blanc, les filets entre les étapes et au-dessus de la section passent en blanc estompé. */
.section_etapes-expertises h2 > span + span, .etape-expertises, .s-filet { transition: color .5s ease, border-color .5s ease; }
.main-wrapper.mode-dark:not(.mode-light) .section_etapes-expertises h2 > span + span { color: var(--_🎨-color--base---base--light-48, rgba(255, 255, 255, .48)); }
.main-wrapper.mode-dark:not(.mode-light) .etape-expertises { border-color: rgba(255, 255, 255, .16); }
.main-wrapper.mode-dark:not(.mode-light) .s-filet { border-top-color: rgba(255, 255, 255, .12); }
/* 2026-10-20 : /expertises s'ouvre sur le noir (Base sombre) : le hero, la liste et « Trois façons » aussi. Le 2e ton des
   titres à 48 % blanc, les filets de la liste en blanc estompé, les cartes des façons en gris très sombre avec un trait fin
   (comme les cartes des étapes sur /espaces) ; la carte photo garde son fond. */
.main-wrapper.mode-dark:not(.mode-light) :is(.section_hero-expertises h1, .section_index-expertises h2, .section_facons h2) > span + span { color: var(--_🎨-color--base---base--light-48, rgba(255, 255, 255, .48)); }
.main-wrapper.mode-dark:not(.mode-light) .index-expertises_liste { border-top-color: rgba(255, 255, 255, .16); }
.main-wrapper.mode-dark:not(.mode-light) .index-expertises_item { border-bottom-color: rgba(255, 255, 255, .16); }
.main-wrapper.mode-dark:not(.mode-light) .facon_carte:not(.is-photo) { background-color: #18181a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }

/* Lot 11, R5 (Vince : « l'adresse dans la même bulle que sur /contact ») : la pastille de l'adresse du lot 10 (M6) devient
   une classe partagée, sortie de contact.css : /contact (hero) et /collectif (photo de « Notre histoire », à la place de la
   légende blanche ; la flèche y mène à l'itinéraire Google Maps). Verre sombre, point jaune, flèche ronde jaune. */
.carte-adresse_stoud { position: absolute; z-index: 2; /* au-dessus de .image_cover (z-index 1, Altum) */ left: var(--spacing--space-tiny); bottom: var(--spacing--space-tiny); max-width: calc(100% - 2 * var(--spacing--space-tiny)); display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--_🎨-color--base---base--dark-48); color: var(--_🎨-color--base---base--light-100); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border: 1px solid var(--_🎨-color--base---base--light-16); }
.carte-adresse_stoud::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--stoud-jaune); flex: none; }
.carte-adresse_stoud address { font-style: normal; font-size: 15px; line-height: 1.2; white-space: nowrap; }
.carte-adresse_lien { display: inline-flex; align-items: center; flex: none; color: var(--_🎨-color--base---base--light-100); text-decoration: none; }
.carte-adresse_fleche { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--stoud-jaune); color: var(--_🎨-color--base---base--dark-100); transition: transform .3s ease; }
.carte-adresse_lien:hover .carte-adresse_fleche { transform: translateY(2px); }
.carte-adresse_lien[target="_blank"]:hover .carte-adresse_fleche { transform: translate(2px, -2px); }
.carte-adresse_lien:focus-visible { outline: 2px solid var(--stoud-jaune); outline-offset: 4px; border-radius: 50%; }
@media (max-width: 479px) { .carte-adresse_stoud { left: 12px; bottom: 12px; max-width: calc(100% - 24px); } }
/* site-easing.css (« .main-wrapper * ») écrase la transition à poids égal : redéclarée sous .main-wrapper. */
.main-wrapper .carte-adresse_fleche { transition: transform .3s ease; }
@media (prefers-reduced-motion: reduce) { .main-wrapper .carte-adresse_fleche { transition: none; } }

/* Lot 11, D7 (version B, −40 %, approuvée par Vince le 2026-10-19 ; tâche E7) : les 3 pages d'espace (gabarit PageEspace,
   body[data-axo-page="espace"] ; pas /espaces) plus serrées. Chaque espacement vertical de la page = son jeton d'origine ×
   --espace-densite : le rythme reste le même, tout est resserré d'autant. Le hero (il tient dans l'écran) ne bouge pas.
   R14 : « Le collectif » du coworking (BlocRejoindre, .section_rejoindre) suit la même densité. */
body[data-axo-page="espace"] { --espace-densite: .6; }
/* Entre les sections */
body[data-axo-page="espace"] .plan-local_stoud.section_stoud { padding-top: calc(var(--stoud-espace-section) * var(--espace-densite)); padding-bottom: calc(var(--stoud-espace-section) * var(--espace-densite)); }
body[data-axo-page="espace"] .section_features { padding-top: calc(var(--section-padding--extra-large) * var(--espace-densite)); padding-bottom: calc(var(--section-padding--giga) * var(--espace-densite)); }
body[data-axo-page="espace"] .section_galerie { padding-top: calc(var(--section-padding--medium) * var(--espace-densite)); padding-bottom: calc(var(--section-padding--medium) * var(--espace-densite)); }
body[data-axo-page="espace"] .formules_stoud { padding-top: calc(var(--stoud-espace-blocs) * var(--espace-densite)); padding-bottom: calc(var(--stoud-espace-section) * var(--espace-densite)); }
body[data-axo-page="espace"] .section_comparison { padding-top: calc(var(--section-padding--medium) * var(--espace-densite)); }
body[data-axo-page="espace"] .section_faq { padding-top: calc(var(--section-padding--extra-large) * var(--espace-densite)); padding-bottom: calc(var(--section-padding--extra-large) * var(--espace-densite)); }
body[data-axo-page="espace"] .section_cta { padding-top: calc(var(--spacing--space-huge) * var(--espace-densite)); }
/* Sous les titres */
body[data-axo-page="espace"] .titre-section_stoud { margin-bottom: calc(var(--stoud-espace-titre) * var(--espace-densite)); }
body[data-axo-page="espace"] .headline_galerie, body[data-axo-page="espace"] .headline_comparison { margin-bottom: calc(var(--spacing--space-large) * var(--espace-densite)); }
body[data-axo-page="espace"] .content_features:not(.pitch_espace) { row-gap: calc(var(--spacing--space-100) * var(--espace-densite)); }
body[data-axo-page="espace"] .fiche_espace { margin-top: calc(var(--spacing--space-large) * var(--espace-densite)); }
/* Entre les blocs */
body[data-axo-page="espace"] .plan-local_plan { margin-bottom: calc(var(--stoud-espace-blocs) * var(--espace-densite)); }
body[data-axo-page="espace"] .conditions_espace { margin-top: calc(var(--spacing--space-large) * var(--espace-densite)); padding-top: calc(var(--spacing--space-small) * var(--espace-densite)); }
body[data-axo-page="espace"] .grille_stoud .table_grid + .pricing-rows-tiles, body[data-axo-page="espace"] .pricing-rows-tiles + .pricing-rows-tiles { margin-top: calc(var(--spacing--space-large) * var(--espace-densite)); }
body[data-axo-page="espace"] .notes_grille { margin-top: calc(var(--spacing--space-small) * var(--espace-densite)); }
body[data-axo-page="espace"] .section_rejoindre { padding-top: calc(var(--section-padding--large) * var(--espace-densite)); padding-bottom: calc(var(--section-padding--large) * var(--espace-densite)); }

/* Lot 11, E5 (note de Vince : « le même style pour le formulaire que la page contact ») : le formulaire du lot 10, M10
   (FormulaireDemande variante b : étiquettes en capitales, champs soulignés, cases, bouton plein dans une carte blanche)
   devient une classe partagée, sortie de contact.css : /contact et /rejoindre. Cases rondes (.is-radio) pour les choix
   uniques : cochées en CSS. */
.formulaire-b { margin: 0; }
.formulaire-b form { flex-direction: column; align-items: stretch; gap: 0; }
.formulaire-b .form_inner { display: block; width: 100%; }
.champs-b { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing--space-small) var(--spacing--space-tiny); }
.champ-b { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.champ-b.is-large { grid-column: 1 / -1; }
.champ-b > label, .champ-b > legend { font-size: 11px; font-weight: inherit; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px; padding: 0; } /* webflow.css met les label en gras */
.champ-b > input, .champ-b > textarea { font: inherit; font-size: 17px; color: inherit; width: 100%; border: 0; border-bottom: 1px solid var(--_🎨-color--base---base--dark-16); border-radius: 0; background: none; padding: 10px 0; margin: 0; outline: none; transition: border-color .2s ease; }
.champ-b textarea { resize: vertical; min-height: 5.5rem; }
.champ-b > input::placeholder, .champ-b > textarea::placeholder { color: var(--_🎨-color--base---base--dark-32); }
.champ-b > input:focus-visible, .champ-b > textarea:focus-visible { border-bottom-color: var(--_🎨-color--base---base--dark-100); box-shadow: 0 2px 0 0 var(--stoud-jaune); }
.champ-b > input:user-invalid, .champ-b > textarea:user-invalid { border-bottom-color: var(--_🎨-color--base---base--dark-100); box-shadow: 0 2px 0 0 var(--stoud-jaune); }
.cases-b { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding-top: 4px; }
.cases-b .checkbox::before, .cases-b .checkbox::after { display: none; } /* le clearfix de Webflow décalait la case */
.cases-b .checkbox { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; font-size: 15px; cursor: pointer; }
.cases-b .checkbox_contact { width: 1rem; height: 1rem; margin: 0; border: 1.5px solid var(--_🎨-color--base---base--dark-48); border-radius: 3px; background-color: var(--_🎨-color--base---base--light-100); }
.cases-b .checkbox_contact.w--redirected-checked { filter: invert(1); border-color: var(--_🎨-color--base---base--light-100); background-size: 70%; }
.cases-b .checkbox:has(input:focus-visible) .checkbox_contact { outline: 2px solid var(--stoud-jaune); outline-offset: 2px; }
.formulaire-b .button_submit-static { margin-top: var(--spacing--space-small); width: 100%; }
.formulaire-b .button_submit-static .cta_primary, .formulaire-b .button_submit { width: 100%; justify-content: center; }
.formulaire-b .consent_form { max-width: 34rem; }
.formulaire-b { padding: var(--spacing--space-small); border: 1px solid var(--_🎨-color--base---base--dark-12); border-radius: var(--_🔘-radius---general--large); background: var(--_🎨-color--base---base--light-100, #fff); box-shadow: 0 1px 2px rgba(16, 16, 18, .04), 0 12px 32px -16px rgba(16, 16, 18, .12); }
@media (max-width: 479px) { .champs-b, .cases-b { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .formulaire-b { padding: var(--spacing--space-tiny); } }
.cases-b .checkbox.is-radio .checkbox_contact { flex: none; border-radius: 50%; }
.cases-b .checkbox.is-radio:has(input:checked) .checkbox_contact { background: radial-gradient(circle, var(--_🎨-color--base---base--dark-100) 0 38%, transparent 42%), var(--_🎨-color--base---base--light-100); border-color: var(--_🎨-color--base---base--dark-100); }
.cases-b .checkbox:has(input:disabled) { cursor: default; }


/* Lot 11, E6 (D6, version A, « la caméra », choix de Vince le 2026-10-20). Pages d'espace : le plan montre la partie de la
   page (cadre dans le viewBox, proportions gardées par aspect-ratio) ; il ne dépasse pas 62 % de la hauteur de l'écran (72 %
   au téléphone) et se centre ; la caméra (/js/plan-local.js) change le viewBox dedans. /espaces : le plan complet, la bascule
   des 3 usages (pilule à curseur noir, comme les boutons du site), une configuration à la fois. Jetons seulement. */
.plan-local_plan { overflow: hidden; }
.plan-local_plan .plan_svg[data-vue] { --haut-max: 62vh; width: min(100%, calc(var(--haut-max) * var(--ratio))); margin-inline: auto; }
@media (max-width: 767px) { .plan-local_plan .plan_svg[data-vue] { --haut-max: 72vh; } }
.plan-espaces_commande { display: grid; gap: var(--spacing--space-pico); justify-items: start; align-content: end; }
/* (R12 aligne les colonnes de l'en-tête en haut ; sur /espaces, la bascule reste en bas, face à la fin du titre, comme la maquette.) */
.plan-espaces_stoud .plan-local_droite.plan-espaces_commande { align-self: end; }
@media (max-width: 991px) { .plan-espaces_commande { margin-top: var(--spacing--space-minimal); } }
.plan-espaces_etiquette { font-size: 12px; letter-spacing: .75px; text-transform: uppercase; color: var(--_🎨-color--base---base--dark-64); }
.plan-espaces_bascule { position: relative; display: inline-flex; padding: 4px; border: 1px solid var(--_🎨-color--base---base--dark-16); border-radius: var(--_🔘-radius---ui--button-base); background: var(--_🎨-color--base---base--light-100); }
.plan-espaces_curseur { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; border-radius: var(--_🔘-radius---ui--button-base); background: var(--_🎨-color--base---base--dark-100); }
.main-wrapper .plan-espaces_curseur { transition: transform var(--stoud-duree) var(--stoud-courbe), width var(--stoud-duree) var(--stoud-courbe); }
.plan-espaces_choix { position: relative; z-index: 1; font: inherit; font-size: 15px; line-height: 20px; padding: 10px 18px; border: 0; background: none; color: var(--_🎨-color--base---base--dark-100); cursor: pointer; white-space: nowrap; border-radius: var(--_🔘-radius---ui--button-base); }
.main-wrapper .plan-espaces_choix { transition: color var(--stoud-duree-rapide) var(--stoud-courbe); }
.plan-espaces_choix[aria-checked="true"] { color: var(--_🎨-color--base---base--light-100); }
/* Sans script, le curseur n'est pas placé : le choix actif prend le fond noir lui-même. */
.plan-espaces_bascule:not(.is-pret) .plan-espaces_choix[aria-checked="true"] { background: var(--_🎨-color--base---base--dark-100); }
.plan-espaces_choix:focus-visible { outline: 2px solid var(--stoud-jaune); outline-offset: 2px; }
@media (max-width: 479px) { .plan-espaces_choix { font-size: 14px; padding: 9px 13px; } }
.plan-espaces_usage[hidden], .plan-espaces_stoud .plan-local_details[hidden] { display: none; }
/* Mode édition : la configuration Coworking, et les 3 listes l'une sous l'autre (leurs textes se modifient). */
html.unik-edition .plan-espaces_stoud .plan-local_details[hidden] { display: grid; margin-top: var(--stoud-espace-blocs); }
/* 2026-10-20 (artifact VKKTJvTyekqW1E6C2HdEvc, v3, choix de Vince) : sur /espaces, l'accordéon et la photo entrent dans le
   bloc gris du plan, sur toute sa largeur (liste 1-5, photo 7-12, comme sous le plan) ; la photo prend la hauteur de la
   liste (colonne étirée, photo en absolu : sinon sa hauteur naturelle pèserait sur la rangée) et ne colle plus ; une carte
   chiffrée avec « Réserver » ferme chaque usage. overflow: clip plutôt que hidden : le bloc ne devient pas un conteneur de
   défilement. Les pages d'espace (PlanLocal) ne changent pas. Téléphone : empilé, photo en 4:3. */
.plan-espaces_stoud .plan-local_plan { overflow: clip; margin-bottom: 0; }
.plan-espaces_stoud .plan-local_plan > .plan-local_details { margin-top: var(--stoud-espace-blocs); padding-top: var(--stoud-espace-blocs); border-top: 1px solid var(--_🎨-color--base---base--dark-8); align-items: stretch; }
.plan-espaces_stoud .plan-local_plan .plan-local_photos { position: relative; top: auto; align-self: stretch; min-height: 320px; }
.plan-espaces_stoud .plan-local_plan .plan-local_photo { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.plan-espaces_carte { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--stoud-espace-rangees) 32px; margin-top: calc(var(--stoud-espace-blocs) - var(--stoud-espace-rangees)); padding: 24px 28px; border-radius: var(--_🔘-radius---general--large); background: var(--_🎨-color--base---base--light-100); min-width: 0; }
.plan-espaces_chiffres { display: grid; gap: 10px; min-width: 0; }
.plan-espaces_nom { font-size: 12px; line-height: 18px; letter-spacing: .75px; text-transform: uppercase; color: var(--_🎨-color--base---base--dark-64); }
.plan-espaces_prix { font-size: 32px; line-height: 32px; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.plan-espaces_carte .plan-local_faits { margin-top: 6px; }
html.unik-edition .plan-espaces_stoud .plan-local_plan .plan-local_photo { position: static; aspect-ratio: 4 / 3; }
@media (max-width: 991px) {
  .plan-espaces_stoud .plan-local_plan .plan-local_photos { position: static; min-height: 0; }
  .plan-espaces_stoud .plan-local_plan .plan-local_photo { position: static; aspect-ratio: 4 / 3; height: auto; }
}
@media (max-width: 767px) { .plan-espaces_carte { padding: 20px; } .plan-espaces_carte .cta_primary, .plan-espaces_carte .cta_primary .button-inner { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .main-wrapper .plan-espaces_curseur, .main-wrapper .plan-espaces_choix { transition: none; } }

/* Lot 11, R15 (Vince : « plus zoomed in et central et espacé ; la ligne doit être plus smooth ») : /espaces, « Une salle,
   trois usages ». Au bureau, la scène (le tracé de 1554 × 689 et ses 4 cartes) prend la largeur de l'écran, plafonnée par
   sa hauteur (elle tient sous le menu) et par 92,5rem ; elle est centrée dans la page et dans la hauteur de l'écran
   pendant qu'elle colle. Cartes et pastilles placées en % de la scène, d'après la disposition d'Altum à 1555 px (la plus
   aérée), cartes à leur vraie taille (plus de scale(.8)). Pastilles posées sur la ligne. Le mouvement :
   /js/etapes-ligne.js (data-etapes-ligne="anime" seulement quand il joue ; sinon, état final). */
.etapes-ligne_stoud { height: 300vh; }
@media (min-width: 992px) {
  .etapes-ligne_stoud { --tl-w: min(92vw, 92.5rem, calc((100svh - 11rem) * 2.255)); --tl-h: calc(var(--tl-w) * 689 / 1554); }
  .etapes-ligne_stoud .master_steps { top: max(6.5rem, calc(50svh - var(--tl-h) / 2 + 2.5rem)); }
  .etapes-ligne_stoud .wrap_timeline-line { min-width: 0; width: var(--tl-w); height: var(--tl-h); margin-left: 50%; margin-right: 0; transform: translateX(-50%); }
  .etapes-ligne_stoud .card_step { width: 25%; max-width: none; transform: none; top: auto; right: auto; bottom: auto; left: auto; }
  .etapes-ligne_stoud .card_step.is-first { top: 6.5%; left: 15.7%; }
  .etapes-ligne_stoud .card_step.is-second { bottom: 6.5%; left: 26.1%; }
  .etapes-ligne_stoud .card_step.is-third { bottom: 53.7%; left: 55.1%; }
  .etapes-ligne_stoud .card_step.is-fourth { bottom: 5.1%; right: 3.7%; }
  .etapes-ligne_stoud .circle_line { inset: auto; margin: -.5rem 0 0 -.5rem; }
  .etapes-ligne_stoud .circle_line.is-first { left: 27.93%; top: 1.45%; }
  .etapes-ligne_stoud .circle_line.is-second { left: 39.12%; top: 97.1%; }
  .etapes-ligne_stoud .circle_line.is-third { left: 68.2%; top: 48.6%; }
  .etapes-ligne_stoud .circle_line.is-fourth { left: 87.9%; top: 100.6%; }
}
/* Le mouvement (seulement quand le script joue) : une carte paraît, en fondu et en montant, quand la ligne atteint sa
   pastille ; la pastille passe du gris au jaune. Courbe et durées du site (T1). */
.etapes-ligne_stoud .card_step { transition: opacity var(--stoud-duree) var(--stoud-courbe), translate var(--stoud-duree-lente) var(--stoud-courbe), background-color .5s ease, box-shadow .5s ease, border-color .5s ease; }
.etapes-ligne_stoud .circle_line { transition: scale var(--stoud-duree) var(--stoud-courbe-ressort), border-color var(--stoud-duree) var(--stoud-courbe); }
.etapes-ligne_stoud[data-etapes-ligne="anime"] .card_step:not(.is-vu) { opacity: 0; translate: 0 1.5rem; }
.etapes-ligne_stoud[data-etapes-ligne="anime"] .circle_line:not(.is-atteint) { scale: .7; border-color: rgba(255, 255, 255, .28); }
.etapes-ligne_stoud .line-dashed { --line--offset: 2px; } /* sans script : la ligne entière */
/* Mode édition (figé, presque pareil, 2026-10-26) : la scène à son état final, sans les 300vh de défilement qui la
   faisaient coller (un grand vide noir dessous). */
html.unik-edition .etapes-ligne_stoud { height: auto; }
html.unik-edition .etapes-ligne_stoud .master_steps { position: relative; top: auto; }

/* Lot 11, R16 (Vince : le titre rangé de /espaces « reste sticky trop longtemps, il devrait fade out ») : quand la dernière
   carte monte vers la pile (à mi-chemin), /js/intro-cartes.js met .is-parti sur l'en-tête collant : il s'efface en montant un peu,
   courbe du site. Seulement les sections data-range-fondu (/espaces et l'accueil ; pas le style guide). */
.section_client-stories[data-range-fondu] .wrap_cs-headline { transition: opacity var(--stoud-duree) var(--stoud-courbe), translate var(--stoud-duree) var(--stoud-courbe); }
.section_client-stories[data-range-fondu] .wrap_cs-headline.is-parti { opacity: 0; translate: 0 -1rem; }
.section_client-stories[data-range-fondu] .wrap_cs-headline.is-parti * { pointer-events: none !important; }
@media (prefers-reduced-motion: reduce) { .section_client-stories[data-range-fondu] .wrap_cs-headline { transition: none; } }

/* ——— Lot 11, R18 à R20 : /collectif (section à part pour la fusion avec la piste L) ——— */
/* R18 (Vince : « activer le slider en cliquant sur un autre membre du collectif ») : les cartes de côté sont des boutons
   (/js/carrousel-gang.js) ; la main au survol (les cartes laissent passer le pointeur, le carrousel porte le curseur), le
   contour jaune du clavier comme les flèches, autour de la photo (le texte des cartes de côté est caché). */
.carousel_images.is-sur-carte:not(.is-dragging) { cursor: pointer; }
.carousel_images .slide_image:focus-visible { outline: none; }
.carousel_images .slide_image:focus-visible .image_carousel-slide { outline: 2px solid var(--stoud-jaune); outline-offset: 3px; }
/* R19 (Vince : « Comment on monte une équipe », « beaucoup trop long, couper de moitié ») : remplace la hauteur du lot 10
   (ci-dessus, 100vh par phrase, collant de 100vh). Course collante : 50vh par passage de phrase au lieu de 100vh (6 phrases :
   250vh au lieu de 500vh) ; partie collante de 70vh, centrée dans l'écran (la phrase reste au milieu), avec le rembourrage
   moyen : 30vh de moins à l'entrée et à la sortie. /js/phrases-collectif.js cale l'animation sur la plage où le bloc colle. */
.defilement-phrases_stoud { --phrases-collante: 70vh; --phrases-pas: 50vh; }
.defilement-phrases_stoud.is-anime { height: calc(var(--phrases-collante) + (var(--phrases, 4) - 1) * var(--phrases-pas)); }
.defilement-phrases_stoud.is-anime .master_swap-text { height: var(--phrases-collante); top: calc((100vh - var(--phrases-collante)) / 2); padding-top: var(--section-padding--medium); padding-bottom: var(--section-padding--medium); }
/* R20 (Vince : « Équipes types » « devrait être égale partout […] pour que les cartes aient l'air identiques ») : les textes
   sont ramenés à 102-107 caractères (4 lignes à 1440 et 1280, 3 à 390) et les titres à 2 lignes (collectif.json). Le contenu
   des 6 cartes part du haut, sous le numéro, au lieu d'être poussé en bas : titres et textes s'alignent d'une carte à
   l'autre même quand les liens prennent 1 à 4 rangées (le vide reste sous les liens). Au téléphone, les cartes empilées
   réservent 2 rangées de liens pour garder la même hauteur. */
.section_features .grid_features.is-six .card_feature { justify-content: flex-start; }
@media (max-width: 767px) { .section_features .grid_features.is-six .liens_feature { min-height: calc(2 * 1.25rem + var(--spacing--space-minimal)); align-content: flex-start; } }

/* « Les espaces » en rangées sur le noir (accueil, ListeRangees, 2026-10-27, version 1 de la maquette) : la carte de la
   pile à plat, quatre colonnes de la grille (prix et nom | photo | texte), un filet entre les rangées. La section porte
   .mode-dark (jetons sombres sur elle seule) : coupe nette avec la démarche blanche au-dessus et « Rejoindre » dessous.
   Rien au défilement ; au survol de la rangée, la photo s'éclaircit. */
.rangees_stoud { position: relative; z-index: 10; padding-top: var(--section-padding--large); padding-bottom: var(--section-padding--large); background-color: var(--_🎨-color--tokens---background--base); color: var(--_🎨-color--tokens---tone--strong); }
.rangees_entete { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--spacing--space-small) var(--layout-grid--gutter); align-items: start; margin-bottom: var(--spacing--space-large); }
.rangees_intro { display: grid; gap: var(--spacing--space-tiny); max-width: var(--stoud-largeur-titre-section); }
.rangees_intro .heading { margin: 0; text-wrap: balance; }
.rangees_intro .paragraph, .rangee_info > *, .rangee_texte .heading { margin: 0; }
.rangees_liste { border-top: 1px solid var(--_🎨-color--base---base--light-16); }
.rangee_stoud { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); gap: var(--spacing--space-tiny) var(--spacing--space-xx-small); padding: var(--spacing--space-xx-small) 0; border-bottom: 1px solid var(--_🎨-color--base---base--light-16); }
.rangee_info { display: flex; flex-direction: column; gap: var(--spacing--space-hairline); }
.rangee_photo { position: relative; aspect-ratio: 3 / 2; border-radius: var(--_🔘-radius---general--default); overflow: hidden; }
.rangee_photo::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); pointer-events: none; }
.rangee_photo img { filter: brightness(.82); transition: filter var(--stoud-duree) var(--stoud-courbe); }
.rangee_stoud:hover .rangee_photo img { filter: brightness(1); }
.rangee_legende { position: absolute; z-index: 1; left: var(--spacing--space-nano); bottom: var(--spacing--space-nano); margin: 0; max-width: 198px; font-size: 14px; line-height: 1.4; color: var(--_🎨-color--base---base--light-100); }
.rangee_texte { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--spacing--space-nano); min-width: 0; }
.rangee_texte .paragraph { margin: 0; }
@media (max-width: 991px) {
  .rangee_stoud { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rangee_info { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
}
@media (max-width: 767px) {
  .rangees_entete { grid-template-columns: 1fr; }
  .rangee_stoud { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .rangee_photo img { transition: none; } }