/* ==========================================================================
   L'Atelier Digital — Design system V2 (Bootstrap 5)
   Direction issue de la maquette « Homepage V2 » : fond gris clair, panneaux
   blancs à grands arrondis, ombres douces, dégradés de taupe, titres taupe en
   capitales, boutons noirs. Aucune forme en arche (rectangles arrondis seulement).
   Tokens repris de public/config/config.json (palette AppDrag).
   Convention de nommage des classes de texte : WeWeb Atelier Digital
   Categorie-[Alignement][Graisse]-[TaillePx]-[Couleur]  (taille réelle en rem)
   ========================================================================== */

/* -------- Polices (copiées depuis l'export, renommées) -------- */
@font-face { font-family: "Grota Sans Alt"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("../fonts/GrotaSansAlt-Light.woff2") format("woff2"), url("../fonts/GrotaSansAlt-Light.woff") format("woff"); }
@font-face { font-family: "Grota Sans Alt"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/GrotaSansAlt-Medium.woff2") format("woff2"), url("../fonts/GrotaSansAlt-Medium.woff") format("woff"); }
@font-face { font-family: "Grota Sans Alt"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/GrotaSansAlt-Bold.woff2") format("woff2"), url("../fonts/GrotaSansAlt-Bold.woff") format("woff"); }

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Palette de marque (config.json → palette.colors)        Nom WeWeb   */
  --color-noir:   #2f2d2d;  /* Dark Primary Color                Noir     */
  --color-encre:  #141313;  /* boutons / tuiles sombres          Encre    */
  --color-fusain: #3e3933;  /* couleur des textes (fonts.pdiv)   Fusain   */
  --color-taupe:  #a19c90;  /* Primary Color                     Taupe    */
  --color-grege:  #a69981;  /* « clair » — titres                Grege    */
  --color-sable:  #e0dacc;  /* « Lighter »                       Sable    */
  --color-medium: #e4dfd4;  /* « Medium »                        Medium   */
  --color-lin:    #eae8e4;  /* « Lighter ++ »                    Lin      */
  --color-gris:   #646464;  /* Text Color                        Gris     */
  --color-blanc:  #ffffff;  /* « BLANC »                         Blanc    */

  /* Dégradé de taupes (cartes en escalier de la maquette) */
  --shade-1: #ffffff;
  --shade-2: #e8e2d6;
  --shade-3: #d3c9b6;
  --shade-4: #b9ac93;
  --shade-5: #a69981;

  /* Rôles */
  --color-text:    var(--color-fusain);
  --color-heading: var(--color-grege);
  --color-fond:    #f2f2f1;           /* fond de page gris clair          */
  --color-line:    rgba(47, 45, 45, .12);

  /* Formes & ombres */
  --r-xl: 36px; --r-lg: 26px; --r-md: 18px; --r-sm: 12px;
  --ombre:      0 10px 30px rgba(47, 45, 45, .08), 0 2px 6px rgba(47, 45, 45, .05);
  --ombre-fort: 0 22px 50px rgba(47, 45, 45, .16), 0 4px 10px rgba(47, 45, 45, .06);

  /* Typographie */
  --font-title: "Grota Sans Alt", "Segoe UI", system-ui, sans-serif;
  --font-body:  "Grota Sans Alt", "Segoe UI", system-ui, sans-serif;

  --section-y: clamp(4rem, 8vw, 7rem);
  --nav-h: 92px;

  /* Remap Bootstrap */
  --bs-body-font-family: var(--font-body);
  --bs-body-font-weight: 300;
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-fond);
  --bs-primary: var(--color-encre);
  --bs-primary-rgb: 20, 19, 19;
  --bs-link-color: var(--color-noir);
  --bs-link-color-rgb: 47, 45, 45;
  --bs-link-hover-color: var(--color-grege);
  --bs-border-color: var(--color-line);
  --bs-border-radius: var(--r-sm);
  --bs-border-radius-lg: var(--r-md);
}

/* ==========================================================================
   2. BALISES DE TEXTE
   ========================================================================== */
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); font-weight: 300; color: var(--color-text); background: var(--color-fond);
       -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--font-title); }
h1 { font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.75rem); line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; }
h2 { font-weight: 500; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.1; text-transform: uppercase; color: var(--color-grege); }
h3 { font-weight: 700; font-size: 1.3rem; line-height: 1.25; color: var(--color-noir); }
p, li { font-size: 1.0625rem; line-height: 1.7; }
strong, b, .fw-bold { font-weight: 700; color: var(--color-noir); }
a { text-underline-offset: .2em; }
::selection { background: var(--color-sable); color: var(--color-noir); }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ==========================================================================
   2bis. CLASSES DE TEXTE NOMMÉES (convention WeWeb)
   ========================================================================== */
/* Titre 1 — h1 (sur image) */
.Titre-GB-64px-Blanc { font-family: var(--font-title); font-weight: 700; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.04; text-align: left; color: var(--color-blanc); text-transform: uppercase; }
.Titre-CB-56px-Blanc { font-family: var(--font-title); font-weight: 700; font-size: clamp(1.9rem, 4.4vw, 3.5rem); line-height: 1.1; text-align: center; color: var(--color-blanc); text-transform: uppercase; }
.Titre-GB-96px-Blanc { font-family: var(--font-title); font-weight: 700; font-size: clamp(2.6rem, 7.6vw, 6rem); line-height: .96; text-align: left; color: var(--color-blanc); text-transform: uppercase; letter-spacing: -.02em; }
/* Titre 2 — h2 (taupe, capitales) */
.Titre-GM-40px-Grege { font-family: var(--font-title); font-weight: 500; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.1; text-align: left;   color: var(--color-grege); text-transform: uppercase; }
.Titre-CM-40px-Grege { font-family: var(--font-title); font-weight: 500; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.1; text-align: center; color: var(--color-grege); text-transform: uppercase; }
.Titre-GB-40px-Blanc { font-family: var(--font-title); font-weight: 700; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.1; text-align: left;   color: var(--color-blanc); text-transform: uppercase; }
.Titre-CB-40px-Blanc { font-family: var(--font-title); font-weight: 700; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.1; text-align: center; color: var(--color-blanc); text-transform: uppercase; }
/* Sous-titre de section (noir, capitales) */
.Label-GB-18px-Noir  { font-family: var(--font-title); font-weight: 700; font-size: 1.1rem; line-height: 1.35; text-align: left;   color: var(--color-encre); text-transform: uppercase; }
.Label-CB-18px-Noir  { font-family: var(--font-title); font-weight: 700; font-size: 1.1rem; line-height: 1.35; text-align: center; color: var(--color-encre); text-transform: uppercase; }
/* Intertitres */
.Titre-GB-28px-Noir  { font-family: var(--font-title); font-weight: 700; font-size: clamp(1.35rem, 2.3vw, 1.75rem); line-height: 1.2; text-align: left; color: var(--color-noir); }
.Titre-GB-28px-Blanc { font-family: var(--font-title); font-weight: 700; font-size: clamp(1.35rem, 2.3vw, 1.75rem); line-height: 1.2; text-align: left; color: var(--color-blanc); }
/* Titre 3 — h3 */
.Titre-GB-22px-Noir  { font-family: var(--font-title); font-weight: 700; font-size: 1.3rem; line-height: 1.25; text-align: left; color: var(--color-noir); }
.Titre-GB-22px-Blanc { font-family: var(--font-title); font-weight: 700; font-size: 1.3rem; line-height: 1.25; text-align: left; color: var(--color-blanc); }
.Titre-GM-22px-Grege { font-family: var(--font-title); font-weight: 500; font-size: 1.3rem; line-height: 1.25; text-align: left; color: var(--color-grege); text-transform: uppercase; }
/* Body — p (Grota Sans Alt Light = graisse « regular » de la marque) */
.Body-GR-18px-Noir   { font-family: var(--font-body); font-weight: 300; font-size: 1.0625rem; line-height: 1.7; text-align: left; color: var(--color-fusain); }
.Body-GR-18px-Blanc  { font-family: var(--font-body); font-weight: 300; font-size: 1.0625rem; line-height: 1.7; text-align: left; color: rgba(255,255,255,.88); }
.Body-GR-22px-Noir   { font-family: var(--font-body); font-weight: 300; font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.6; text-align: left; color: var(--color-fusain); }
.Body-GR-22px-Blanc  { font-family: var(--font-body); font-weight: 300; font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.6; text-align: left; color: rgba(255,255,255,.92); }
/* Body gras */
.Body-GB-18px-Noir   { font-family: var(--font-body); font-weight: 700; font-size: 1.0625rem; line-height: 1.5; text-align: left; color: var(--color-noir); }
.Body-GB-18px-Blanc  { font-family: var(--font-body); font-weight: 700; font-size: 1.0625rem; line-height: 1.5; text-align: left; color: var(--color-blanc); }
/* Label / sur-titre */
.Label-GM-13px-Taupe { font-family: var(--font-title); font-weight: 500; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-grege); }
.Label-GM-13px-Sable { font-family: var(--font-title); font-weight: 500; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-sable); }

/* ==========================================================================
   3. FONDS & SECTIONS
   ========================================================================== */
.section          { padding: var(--section-y) 0; position: relative; }
.section--tight   { padding: calc(var(--section-y) * .6) 0; }
.section--paper   { background: var(--color-fond); }
.section--lin     { background: var(--color-lin); }
.section--sable   { background: var(--color-medium); }
.section--blanc   { background: var(--color-blanc); }
.section--noir    { background: var(--color-noir); color: rgba(255,255,255,.86); }
.section--noir h2, .section--noir h3, .section--noir strong { color: var(--color-blanc); }
.trame { /* conservé pour compatibilité : plus de trame dans la V2 */ }
/* Sections blanches / beiges = panneaux arrondis posés sur le fond gris (comme la maquette) */
.section--blanc, .section--sable, main > .section--noir { border-radius: var(--r-xl); margin-left: clamp(0px, 2vw, 28px); margin-right: clamp(0px, 2vw, 28px); box-shadow: var(--ombre); }
main > .section--noir { overflow: hidden; }
.section--blanc + .section--blanc, .section--sable + .section--blanc, .section--blanc + .section--sable, .section--noir + .section--blanc, .section--blanc + .section--noir { margin-top: 1.5rem; }
main > section:last-child { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 575.98px) { .section--blanc, .section--sable, main > .section--noir { border-radius: var(--r-lg); } }

/* Panneau blanc arrondi posé sur le fond gris (motif principal de la maquette) */
.panneau { background: var(--color-blanc); border-radius: var(--r-xl); box-shadow: var(--ombre); padding: clamp(1.75rem, 5vw, 4rem); position: relative; }

/* En-tête de section : petit repère taupe */
.sec-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.sec-head::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }
.sec-index { font-family: var(--font-title); font-weight: 500; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-grege);
             display: inline-flex; align-items: center; gap: .6rem; }
.sec-index::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--color-grege); display: inline-block; }
.section--noir .sec-index { color: var(--color-sable); }
.section--noir .sec-head::after { background: rgba(255,255,255,.15); }

/* Accent (remplace l'ancien surlignage jaune) */
.surligne { background: linear-gradient(transparent 64%, var(--color-sable) 64%); padding: 0 .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.text-grege { color: var(--color-grege) !important; }
.section--noir .surligne { background: none; color: var(--color-sable); }
.section--noir .text-grege { color: var(--color-sable) !important; }

/* Tuile d'icône (fond blanc arrondi + ombre) */
.tuile-ico { width: 72px; height: 72px; border-radius: var(--r-md); background: var(--color-blanc); box-shadow: var(--ombre);
             display: inline-grid; place-items: center; flex-shrink: 0; color: var(--color-noir); }
.tuile-ico img { width: 62%; height: 62%; object-fit: contain; }
.tuile-ico .bi { font-size: 1.9rem; }
.tuile-ico .ico { width: 58%; height: 58%; }

/* Icônes « trait » de la V2 colorées par masque (prennent la couleur du texte) */
.ico { display: inline-block; width: 48px; height: 48px; background-color: currentColor; flex-shrink: 0;
       -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico--engrenages   { --ico: url("../img/engrenages-2Zxu.svg"); }
.ico--sync         { --ico: url("../img/Pictogramme-synchronisation-XbnZ.svg"); }
.ico--labyrinthe   { --ico: url("../img/labyrinthe-XPfn.svg"); }
.ico--donnees      { --ico: url("../img/Donnees-eparpillees-IU0I.svg"); }
.ico--ia           { --ico: url("../img/ConnaissanceIA-yIzp.svg"); }
.ico--ampoule      { --ico: url("../img/Ampoule-ts53.svg"); }
.ico--rdv          { --ico: url("../img/RDV-y616.svg"); }
.ico--tri          { --ico: url("../img/Tri-centralisation-U6WT.svg"); }
.ico--workflow     { --ico: url("../img/workflow-Xy9B.svg"); }
.ico--axes         { --ico: url("../img/nouveaux-axes-WzKX.svg"); }
.ico--chevrons     { --ico: url("../img/Pictogramme-fle-che-0UQc.svg"); }
.ico--stats        { --ico: url("../img/Pictogramme-1-WLYK.svg"); }
.ico--cycle        { --ico: url("../img/Pictogramme-2-Q6ct.svg"); }
.ico--reseau       { --ico: url("../img/Pictogramme-3-GTi2.svg"); }
.ico--ecran        { --ico: url("../img/Pictogramme-ejBT.svg"); }
.ico--diagnostic   { --ico: url("../img/diagnostic-dbHm.svg"); }
.ico--presentation { --ico: url("../img/Pre-sentation-t15J.svg"); }
.ico--reunion      { --ico: url("../img/Reunion30minutes-rKsd.svg"); }
.ico--demo         { --ico: url("../img/Demonstration-uggX.svg"); }
.ico--dev          { --ico: url("../img/1695133161512.svg"); }
.ico--seo          { --ico: url("../img/1695133297065.svg"); }
.ico--mentoring    { --ico: url("../img/1695133387279.svg"); }

/* ==========================================================================
   4. VISUELS
   ========================================================================== */
.reperes { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--ombre); background: var(--color-blanc); }
.reperes > img, .reperes > .media { display: block; width: 100%; }
.decale { position: relative; isolation: isolate; }
.decale::before { content: ""; position: absolute; inset: 0; transform: translate(18px, 18px); background: var(--shade-3); border-radius: var(--r-lg); z-index: -1; }
.decale--gauche::before { transform: translate(-18px, 18px); }
.decale > img, .decale .media { border-radius: var(--r-lg); }
.media { width: 100%; height: 100%; object-fit: cover; display: block; }
.ratio-4x5  { aspect-ratio: 4 / 5; }
.ratio-16x10{ aspect-ratio: 16 / 10; }
.ratio-3x2  { aspect-ratio: 3 / 2; }
.ratio-1x1  { aspect-ratio: 1 / 1; }
.ratio-21x9 { aspect-ratio: 21 / 9; }
.img-cover  { width: 100%; height: 100%; object-fit: cover; }
.bord-noir  { border-radius: var(--r-lg); box-shadow: var(--ombre); }
.fond-blanc { background: var(--color-blanc); border-radius: var(--r-lg); }

/* ==========================================================================
   5. BOUTONS
   ========================================================================== */
.btn-atelier {
  --btn-bg: var(--color-encre); --btn-fg: var(--color-blanc); --btn-bd: var(--color-encre);
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-title); font-weight: 500; font-size: .88rem; letter-spacing: .06em; text-transform: uppercase;
  background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd); border-radius: 6px;
  padding: .95rem 1.6rem; text-decoration: none; line-height: 1.2; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-atelier .bi { transition: transform .2s ease; }
.btn-atelier:hover, .btn-atelier:focus-visible { transform: translateY(-2px); box-shadow: var(--ombre-fort); color: var(--btn-fg); }
.btn-atelier:hover .bi { transform: translateX(4px); }
.btn-atelier:focus-visible { outline: 3px solid var(--color-grege); outline-offset: 3px; }
.btn-atelier--clair { --btn-bg: var(--color-blanc); --btn-fg: var(--color-encre); --btn-bd: var(--color-blanc); }
.btn-atelier--ghost { --btn-bg: var(--color-blanc); --btn-fg: var(--color-encre); --btn-bd: #cfcfcf; }
.btn-atelier--ghost:hover { --btn-bd: var(--color-encre); }
.btn-atelier--ghost-clair, .section--noir .btn-atelier--ghost { --btn-bg: transparent; --btn-fg: var(--color-blanc); --btn-bd: rgba(255,255,255,.7); }
.btn-atelier--grege { --btn-bg: var(--color-grege); --btn-fg: var(--color-blanc); --btn-bd: var(--color-grege); }

/* Bouton rond (flèches de carrousel) */
.btn-rond { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--color-encre); background: var(--color-blanc); color: var(--color-encre);
            display: inline-grid; place-items: center; font-size: 1.2rem; transition: background-color .2s, color .2s, transform .2s; flex-shrink: 0; }
.btn-rond:hover, .btn-rond:focus-visible { background: var(--color-encre); color: var(--color-blanc); transform: scale(1.06); }

/* Lien fléché */
.lien-fleche { font-family: var(--font-title); font-weight: 500; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
               color: var(--color-encre); text-decoration: none; display: inline-flex; align-items: center; gap: .55rem; }
.lien-fleche .bi { width: 26px; height: 26px; border: 1.5px solid currentColor; border-radius: 50%; display: inline-grid; place-items: center; font-size: .8rem; transition: transform .2s; }
.lien-fleche:hover { color: var(--color-grege); }
.lien-fleche:hover .bi { transform: translateX(3px); }
.section--noir .lien-fleche { color: var(--color-blanc); }

/* ==========================================================================
   6. NAVBAR (transparente sur le visuel de tête, blanche au défilement)
   ========================================================================== */
.nav-atelier { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; padding: 1rem 0; background: transparent;
               transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease; }
.nav-atelier .navbar-brand { background: var(--color-blanc); border-radius: var(--r-sm); padding: .45rem .65rem; box-shadow: var(--ombre); }
.nav-atelier .navbar-brand img { height: 44px; width: auto; display: block; }
.nav-atelier .nav-link { font-family: var(--font-title); font-weight: 500; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
                         color: var(--color-blanc); padding: .5rem 1rem !important; position: relative; }
.nav-atelier .nav-link::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .15rem; height: 2px; border-radius: 2px;
                                background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.nav-atelier .nav-link:hover::after, .nav-atelier .nav-link.active::after { transform: scaleX(1); }
.nav-atelier .nav-link:hover, .nav-atelier .nav-link.active { color: var(--color-blanc); }
.nav-ronds { display: flex; gap: .6rem; margin-left: 1rem; }
.nav-ronds a { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.85); color: var(--color-blanc);
               display: inline-grid; place-items: center; text-decoration: none; transition: background-color .2s, color .2s; }
.nav-ronds a:hover { background: var(--color-blanc); color: var(--color-encre); }
.nav-atelier .navbar-toggler { border: 1.5px solid var(--color-blanc); border-radius: 8px; color: var(--color-blanc); padding: .4rem .6rem; background: rgba(20,19,19,.25); }
.nav-atelier .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.4); }
/* état plein : au défilement, ou sur les pages sans visuel en tête */
.nav-atelier.is-scrolled, .nav-plein .nav-atelier { background: rgba(255,255,255,.96); backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(47,45,45,.08); padding: .55rem 0; }
.nav-atelier.is-scrolled .nav-link, .nav-plein .nav-atelier .nav-link { color: var(--color-encre); }
.nav-atelier.is-scrolled .nav-ronds a, .nav-plein .nav-atelier .nav-ronds a { border-color: var(--color-encre); color: var(--color-encre); }
.nav-atelier.is-scrolled .nav-ronds a:hover, .nav-plein .nav-atelier .nav-ronds a:hover { background: var(--color-encre); color: var(--color-blanc); }
.nav-atelier.is-scrolled .navbar-toggler, .nav-plein .nav-atelier .navbar-toggler { border-color: var(--color-encre); color: var(--color-encre); background: transparent; }
.nav-atelier.is-scrolled .navbar-brand, .nav-plein .nav-atelier .navbar-brand { box-shadow: none; }
.nav-plein main { padding-top: var(--nav-h); }
@media (max-width: 991.98px) {
  .nav-atelier .navbar-collapse { background: var(--color-blanc); border-radius: var(--r-md); box-shadow: var(--ombre-fort); margin-top: .75rem; padding: .75rem 1rem 1rem; }
  .nav-atelier .nav-link, .nav-atelier.is-scrolled .nav-link { color: var(--color-encre) !important; font-size: .95rem; padding: .7rem 0 !important; }
  .nav-atelier .nav-link::after { left: 0; right: auto; width: 2rem; }
  .nav-ronds { margin: .75rem 0 0; }
  .nav-ronds a { border-color: var(--color-encre); color: var(--color-encre); }
}

/* ==========================================================================
   7. HÉROS
   ========================================================================== */
/* Pages intérieures : photo pleine largeur, titre blanc, bas arrondi */
.page-hero { position: relative; overflow: hidden; background: var(--color-noir); color: var(--color-blanc);
             border-radius: 0 0 var(--r-xl) var(--r-xl); min-height: 460px; display: flex; align-items: flex-end; }
.page-hero > .container, .page-hero .row, .page-hero .col-lg-5 { position: static; }
.page-hero__visuel { position: absolute; inset: 0; z-index: 0; }
.page-hero__visuel img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__visuel::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,19,19,.84) 0%, rgba(20,19,19,.55) 50%, rgba(20,19,19,.2) 100%); }
.page-hero__texte { position: relative; z-index: 1; padding: calc(var(--nav-h) + 3rem) 0 3.5rem; }
.page-hero__texte h1, .page-hero__texte .Titre-GB-64px-Blanc, .page-hero__texte .Titre-GB-40px-Blanc { margin: .6rem 0 1rem; }
.page-hero--plein { min-height: 72vh; }
.page-hero--plein .page-hero__fond { position: absolute; inset: 0; z-index: 0; }
.page-hero--plein .page-hero__fond img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--plein .page-hero__fond::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20,19,19,.88) 0, rgba(20,19,19,.4) 60%, rgba(20,19,19,.3) 100%); }
.page-hero--plein .container { position: relative; z-index: 1; }
.hero-logo { max-height: 72px; max-width: 260px; width: auto; display: block; margin-bottom: 1.25rem; }

/* Fil d'Ariane */
.ariane { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0;
          font-family: var(--font-title); font-weight: 500; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.ariane li + li::before { content: "/"; margin-right: .5rem; opacity: .6; }
.ariane a { color: var(--color-blanc); text-decoration: none; }
.ariane a:hover { text-decoration: underline; }
.ariane.text-dark, .ariane .text-dark { color: var(--color-grege) !important; }

/* Accueil actuel */
.hero-accueil { background: var(--color-noir); color: var(--color-blanc); position: relative; overflow: hidden; border-radius: 0 0 var(--r-xl) var(--r-xl); }
.hero-accueil .hero-texte { padding: calc(var(--nav-h) + 3rem) 0 clamp(3rem, 6vw, 5rem); position: relative; z-index: 1; }
.hero-accueil .hero-visuel { position: relative; height: 100%; min-height: 360px; }
.hero-accueil .hero-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-accueil .hero-visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-noir) 0, rgba(47,45,45,0) 40%); }
.hero-tag { display: inline-block; background: var(--color-blanc); color: var(--color-encre); font-family: var(--font-title); font-weight: 700;
            font-size: clamp(1rem, 2vw, 1.4rem); padding: .4rem .9rem; border-radius: 8px; margin: 1rem 0 1.75rem; text-transform: uppercase; }
@media (max-width: 991.98px) {
  .hero-accueil .hero-visuel { min-height: 0; height: clamp(260px, 50vw, 360px); }
  .hero-accueil .hero-visuel::after { background: linear-gradient(0deg, var(--color-noir) 0, rgba(47,45,45,.2) 60%); }
  .hero-accueil .hero-texte { padding-top: 1rem; }
}

/* ==========================================================================
   8. CARTES & COMPOSANTS
   ========================================================================== */
.carte { background: var(--color-blanc); border-radius: var(--r-lg); box-shadow: var(--ombre); height: 100%; display: flex; flex-direction: column;
         overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; position: relative; }
.carte:hover { transform: translateY(-6px); box-shadow: var(--ombre-fort); }
.carte__corps { padding: 1.6rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.carte__corps > :last-child { margin-top: auto; }
a.carte { color: inherit; }

/* Tuiles d'expertise (accueil actuel) */
.tuile { position: relative; display: block; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--ombre); color: var(--color-blanc); text-decoration: none; }
.tuile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,19,19,.75), rgba(20,19,19,0) 55%); }
.tuile__titre { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.3rem; z-index: 1; display: flex; justify-content: space-between; align-items: end; }
.tuile__titre span { font-family: var(--font-title); font-weight: 700; font-size: 1.4rem; letter-spacing: .02em; }

/* Liste d'atouts (icône + texte) */
.atout { display: grid; grid-template-columns: 60px 1fr; gap: 1.25rem; padding: 1.25rem 0; border-top: 1px solid var(--color-line); align-items: start; }
.atout:last-child { border-bottom: 1px solid var(--color-line); }
.atout__icone { width: 60px; height: 60px; border-radius: var(--r-sm); background: var(--shade-2); display: grid; place-items: center; color: var(--color-noir); }
.atout__icone img { width: 32px; height: 32px; object-fit: contain; }
.atout__icone .bi { font-size: 1.5rem; }
.atout__icone .ico { width: 34px; height: 34px; }
.atout h3 { margin-bottom: .3rem; }
.atout p { margin: 0; }
.section--noir .atout { border-color: rgba(255,255,255,.12); }
.section--noir .atout__icone { background: rgba(255,255,255,.12); color: var(--color-blanc); }

/* Témoignages (accueil actuel) */
.temoignage { background: var(--color-blanc); border-radius: var(--r-lg); box-shadow: var(--ombre); padding: 2rem; height: 100%; position: relative; }
.temoignage::before { content: "\201C"; position: absolute; top: .2rem; right: 1.5rem; font-family: Georgia, serif; font-size: 5rem; line-height: 1; color: var(--shade-3); }
.temoignage__logo { height: 64px; width: 100%; object-fit: contain; object-position: left center; margin-bottom: 1.25rem; }
.temoignage__auteur { display: flex; align-items: center; gap: .6rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--color-line); }
.temoignage__auteur a { color: var(--color-noir); font-size: 1.25rem; }

/* Bande défilante de logos */
.defile { overflow: hidden; padding: 1rem 0 2rem; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.defile__piste { display: flex; gap: 1.25rem; width: max-content; animation: defile 40s linear infinite; }
.defile__item { width: 190px; height: 110px; display: grid; place-items: center; padding: 1.2rem 1.6rem; background: var(--color-blanc); border-radius: var(--r-md); box-shadow: var(--ombre); }
.defile__item img { max-width: 100%; max-height: 100%; object-fit: contain; }
.defile:hover .defile__piste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(calc(-50% - .625rem)); } }

/* Fiche technique */
.fiche { background: var(--color-blanc); border-radius: var(--r-lg); box-shadow: var(--ombre); }
.fiche__ligne { border-bottom: 1px solid var(--color-line); }
.fiche__ligne:last-child { border-bottom: 0; }
.fiche dt, .fiche__label { font-family: var(--font-title); font-weight: 500; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-grege); }
.fiche dd, .fiche__valeur { font-family: var(--font-title); font-weight: 500; font-size: 1.05rem; color: var(--color-noir); margin: .25rem 0 0; }
.fiche-bande { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--color-blanc); border-radius: var(--r-lg); box-shadow: var(--ombre); overflow: hidden; }
.fiche-bande > div { padding: 1.4rem 1.6rem; border-right: 1px solid var(--color-line); }
.fiche-bande > div:last-child { border-right: 0; }
@media (max-width: 767.98px) { .fiche-bande { grid-template-columns: 1fr 1fr; } .fiche-bande > div:nth-child(2) { border-right: 0; } .fiche-bande > div:nth-child(-n+2) { border-bottom: 1px solid var(--color-line); } }

/* Encadré « Ce qu'il faut retenir » */
.retenir { background: var(--shade-2); border-radius: var(--r-lg); padding: 2rem; }
.retenir__titre { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.retenir__titre .bi { font-size: 1.6rem; color: var(--color-noir); }
.retenir ul { list-style: none; padding: 0; margin: 0; }
.retenir li { padding: .55rem 0 .55rem 2rem; position: relative; border-top: 1px solid rgba(47,45,45,.08); }
.retenir li:first-child { border-top: 0; }
.retenir li::before { content: "\F270"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: .55rem; color: var(--color-grege); }

/* Bandeau d'appel à l'action */
.appel { background: var(--color-encre); color: var(--color-blanc); border-radius: var(--r-lg); padding: clamp(1.75rem, 4vw, 2.75rem);
         display: grid; gap: 1.5rem; grid-template-columns: 1fr auto; align-items: center; box-shadow: var(--ombre-fort); }
.appel p { margin: 0; color: rgba(255,255,255,.85); }
.appel strong { color: var(--color-blanc); }
.appel .btn-atelier:not(.btn-atelier--ghost-clair) { --btn-bg: var(--color-blanc); --btn-fg: var(--color-encre); --btn-bd: var(--color-blanc); }
@media (max-width: 767.98px) { .appel { grid-template-columns: 1fr; } }

/* Chiffres clés */
.chiffre { background: var(--color-blanc); border-radius: var(--r-md); box-shadow: var(--ombre); padding: 1.4rem 1.5rem; height: 100%; }
.chiffre__valeur { font-family: var(--font-title); font-weight: 700; font-size: clamp(2.6rem, 5.5vw, 4rem); line-height: 1; color: var(--color-grege); letter-spacing: -.02em; }
.chiffre__label { font-family: var(--font-title); font-weight: 700; font-size: 1rem; color: var(--color-noir); margin-top: .5rem; }

/* Étapes / blocs numérotés */
.etape { background: var(--color-blanc); border-radius: var(--r-lg); box-shadow: var(--ombre); padding: 1.8rem; height: 100%; position: relative; }
.etape__num { font-family: var(--font-title); font-weight: 700; font-size: .78rem; letter-spacing: .12em; display: inline-block; flex-shrink: 0; align-self: start;
              background: var(--shade-2); color: var(--color-noir); padding: .35rem .7rem; border-radius: 999px; margin-bottom: 1rem; }
.etape .bi { font-size: 2rem; color: var(--color-grege); display: block; margin-bottom: .75rem; }
.section--noir .etape__num { background: rgba(255,255,255,.14); color: var(--color-blanc); }

/* Projets (réalisations) */
.projet { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding: clamp(1.5rem, 4vw, 3rem);
          background: var(--color-blanc); border-radius: var(--r-xl); box-shadow: var(--ombre); margin-top: 2rem; }
.projet:nth-of-type(even) .projet__visuel { order: 2; }
.projet__num { font-family: var(--font-title); font-weight: 500; font-size: .8rem; letter-spacing: .12em; color: var(--color-grege); }
.projet h2 { margin: .5rem 0 .75rem; }
.projet .decale::before { display: none; }
@media (max-width: 991.98px) { .projet { grid-template-columns: 1fr; } .projet:nth-of-type(even) .projet__visuel { order: 0; } }

/* Équipe */
.membre { display: block; text-decoration: none; color: inherit; background: var(--color-blanc); border-radius: var(--r-lg); box-shadow: var(--ombre); padding: .75rem; transition: transform .25s, box-shadow .25s; }
.membre:hover { transform: translateY(-6px); box-shadow: var(--ombre-fort); }
.membre__photo { overflow: hidden; border-radius: var(--r-md); }
.membre__info { display: flex; justify-content: space-between; align-items: start; gap: 1rem; padding: 1rem .5rem .5rem; }
.membre__nom { font-family: var(--font-title); font-weight: 700; font-size: 1.45rem; color: var(--color-noir); line-height: 1.1; }
.membre__role { font-family: var(--font-title); font-weight: 500; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-grege); margin-top: .35rem; }
.membre__lien { color: var(--color-noir); font-size: 1.3rem; position: relative; z-index: 2; }
.membre__lien:hover { color: var(--color-grege); }

/* Étiquettes */
.etiquettes { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; margin: 0; }
.etiquettes li { font-family: var(--font-title); font-weight: 500; font-size: .8rem; letter-spacing: .04em; background: var(--color-blanc); box-shadow: var(--ombre); padding: .4rem .85rem; border-radius: 999px; line-height: 1.2; }

/* Article (contenu long) */
.prose { max-width: 780px; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font-family: var(--font-title); font-weight: 700; font-size: clamp(1.35rem, 2.3vw, 1.7rem); text-transform: none; color: var(--color-noir); margin-top: 2.5rem; }
.prose h3 { font-size: 1.2rem; margin-top: 1.75rem; }
.prose figure { margin: 2rem 0; }
.prose figure img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--ombre); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: .5rem; }
.prose a { color: var(--color-noir); text-decoration-color: var(--color-grege); text-decoration-thickness: 2px; }
.prose .retenir h2, .prose .appel h2 { margin-top: 0; }
.prose .retenir ul { padding-left: 0; }
.prose .retenir ol { padding-left: 1.25rem; }

/* Accordéon (FAQ) — pastilles blanches */
.faq .accordion-item { border: 0; background: var(--color-blanc); border-radius: var(--r-md) !important; box-shadow: var(--ombre); margin-bottom: 1rem; overflow: hidden; }
.faq .accordion-button { font-family: var(--font-title); font-weight: 500; font-size: 1.05rem; color: var(--color-grege); background: transparent; padding: 1.2rem 1.5rem; box-shadow: none; gap: 1rem; border-radius: var(--r-md) !important; }
.faq .accordion-button:not(.collapsed) { color: var(--color-noir); background: transparent; }
.faq .accordion-button::after { background-image: none; content: "\F4FA"; font-family: "bootstrap-icons"; transform: none; width: auto; height: auto; font-size: 1.35rem; color: var(--color-noir); }
.faq .accordion-button:not(.collapsed)::after { content: "\F2E6"; }
.faq .accordion-body { padding: 0 1.5rem 1.4rem; }

/* Formulaires */
.form-atelier .form-label { font-family: var(--font-title); font-weight: 500; font-size: .92rem; color: var(--color-noir); margin-bottom: .4rem; }
.form-atelier .form-control, .form-atelier .form-select { border: 1px solid #dcdcdc; border-radius: var(--r-sm); background-color: var(--color-fond); padding: .85rem 1rem; font-weight: 300; }
.form-atelier .form-control:focus, .form-atelier .form-select:focus { border-color: var(--color-grege); background-color: var(--color-blanc); box-shadow: 0 0 0 4px rgba(166,153,129,.25); }
.form-atelier .form-check-input { border: 1px solid var(--color-grege); }
.form-atelier .form-check-input:checked { background-color: var(--color-encre); border-color: var(--color-encre); }
.puces { display: flex; flex-wrap: wrap; gap: .5rem; }
.puces .btn-check + label { border: 1px solid #d6d6d6; border-radius: 999px; font-size: .9rem; padding: .45rem .95rem; background: var(--color-blanc); color: var(--color-noir); font-weight: 300; cursor: pointer; transition: all .15s; }
.puces .btn-check + label:hover { border-color: var(--color-grege); }
.puces .btn-check:checked + label { background: var(--color-encre); border-color: var(--color-encre); color: var(--color-blanc); }
.puces .btn-check:focus-visible + label { box-shadow: 0 0 0 3px rgba(166,153,129,.4); }
.carte-form { background: var(--color-blanc); border-radius: var(--r-xl); box-shadow: var(--ombre); padding: clamp(1.5rem, 4vw, 3rem); }

/* Newsletter */
.newsletter { background: var(--color-blanc); border-radius: var(--r-xl); box-shadow: var(--ombre); padding: clamp(1.5rem, 4vw, 2.75rem); }
.newsletter .form-control { border-radius: var(--r-sm); padding: .85rem 1rem; background: var(--color-fond); border: 1px solid #dcdcdc; }

/* Citation (accueil actuel) */
.citation { font-family: var(--font-title); font-weight: 700; font-size: clamp(1.6rem, 3.6vw, 2.75rem); line-height: 1.15; color: var(--color-blanc); }
.citation-auteur { font-family: var(--font-title); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-sable); font-size: .85rem; }

/* Navigation entre projets */
.nav-projets { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.nav-projets a { padding: 1.5rem; text-decoration: none; color: var(--color-noir); font-family: var(--font-title); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
                 display: flex; align-items: center; gap: .75rem; background: var(--color-blanc); border-radius: var(--r-md); box-shadow: var(--ombre); transition: transform .2s, box-shadow .2s; }
.nav-projets a + a { justify-content: flex-end; }
.nav-projets a:hover { transform: translateY(-3px); box-shadow: var(--ombre-fort); }

/* Link-Tree */
.linktree { min-height: 100vh; display: grid; place-items: center; padding: 3rem 1rem; background: var(--color-noir); }
.linktree__boite { width: 100%; max-width: 440px; text-align: center; }
.linktree__boite img { width: 160px; height: auto; margin-bottom: 2rem; }
.linktree .btn-atelier { width: 100%; justify-content: center; margin-bottom: 1rem; }

/* Logos d'outils */
.logo-outil { height: 56px; width: auto; max-width: 80px; object-fit: contain; }
.logo-fiche { max-height: 60px; max-width: 100%; width: auto; }
.row.g-x-5 { --bs-gutter-x: 3rem; }

/* Sommaire collant (charte) */
.sommaire-nav { position: sticky; top: calc(var(--nav-h) + 1rem); }
@media (max-width: 991.98px) { .sommaire-nav { position: static; } }

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.footer-atelier { background: var(--color-noir); color: rgba(255,255,255,.75); padding: clamp(3.5rem, 6vw, 5rem) 0 1.5rem; }
.footer-atelier a { color: rgba(255,255,255,.85); text-decoration: none; }
.footer-atelier a:hover { color: var(--color-sable); }
.footer-atelier .footer-logo { height: 72px; width: auto; }
.footer-atelier h2 { font-family: var(--font-title); font-weight: 500; font-size: 1rem; letter-spacing: .08em; color: var(--color-blanc); text-transform: uppercase; margin-bottom: 1.25rem; }
.footer-atelier ul { list-style: none; padding: 0; margin: 0; }
.footer-atelier li { font-size: .98rem; margin-bottom: .5rem; }
.footer-atelier address p { font-size: .98rem; margin: 0 0 .35rem; }
.footer-atelier .reseaux a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); display: inline-grid; place-items: center; font-size: 1.1rem; margin-right: .5rem; }
.footer-atelier .reseaux a:hover { background: var(--color-blanc); color: var(--color-encre); border-color: var(--color-blanc); }
.footer-bas { border-top: 1px solid rgba(255,255,255,.12); margin-top: 3rem; padding-top: 1.25rem; text-align: center; }
.footer-bas p { font-size: .8rem; margin: 0; }
.haut-de-page { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1020; width: 46px; height: 46px; border-radius: var(--r-sm); background: var(--color-grege); color: var(--color-blanc);
                display: grid; place-items: center; font-size: 1.2rem; box-shadow: var(--ombre-fort); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .3s, transform .3s, background-color .2s; text-decoration: none; }
.haut-de-page.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.haut-de-page:hover { background: var(--color-encre); color: var(--color-blanc); }

/* ==========================================================================
   10. UTILITAIRES & ANIMATIONS
   ========================================================================== */
.max-w-texte { max-width: 780px; }
.visually-hidden-focusable:focus { position: fixed; top: .5rem; left: .5rem; z-index: 2000; background: var(--color-blanc); padding: .5rem 1rem; border-radius: 8px; }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 575.98px) {
  .row.g-5, .row.g-x-5 { --bs-gutter-x: 1.5rem; }
  .decale::before { transform: translate(8px, 8px); }
  .decale--gauche::before { transform: translate(-8px, 8px); }
  .page-hero, .hero-accueil { border-radius: 0 0 var(--r-lg) var(--r-lg); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* @@HOMEPAGE-V2@@ — composants propres à la page homepage-v2.html (voir plus bas) */

/* ==========================================================================
   11. HOMEPAGE V2 (page de test homepage-v2.html)
   ========================================================================== */
/* Héros */
.hero-v2 { position: relative; min-height: 600px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--color-noir); }
.hero-v2__fond { position: absolute; inset: 0; }
.hero-v2__fond img { width: 100%; height: 100%; object-fit: cover; }
.hero-v2__fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,19,19,.55) 0%, rgba(20,19,19,.35) 45%, rgba(20,19,19,.65) 100%); }
.hero-v2__titre { position: relative; z-index: 1; padding: calc(var(--nav-h) + 1rem) 0 11rem; max-width: 980px; }
.hero-v2__bas { position: relative; z-index: 2; margin-top: -10rem; padding-bottom: 2rem; }

.carte-depasse { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--ombre-fort); height: 100%; min-height: 340px; background: var(--color-blanc); }
.carte-depasse > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-depasse figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: stretch; }
.carte-depasse figcaption span { flex: 1; padding: 1.1rem 1.4rem; background: linear-gradient(90deg, rgba(166,153,129,.95), rgba(166,153,129,.75)); color: var(--color-blanc);
                                 font-family: var(--font-title); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; display: flex; align-items: center; }
.carte-depasse figcaption strong { color: var(--color-blanc); margin: 0 .3em; }
.carte-depasse__souris { width: 76px; display: grid; place-items: center; background: var(--color-encre); }
.carte-depasse__souris img { width: 46px; height: 46px; animation: souris 2s ease-in-out infinite; }
@keyframes souris { 50% { transform: translateY(5px); } }

.artisans { background: rgba(20,19,19,.6); backdrop-filter: blur(8px); border-radius: var(--r-lg); padding: 1.4rem 1.6rem 1.6rem; }
.artisans__icones { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 1.1rem; list-style: none; margin: 0; padding: 0; }
.artisans__icones li { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 82px; margin: 0; }
.artisans__icones img { width: 72px; height: 72px; border-radius: var(--r-md); box-shadow: 0 8px 20px rgba(0,0,0,.25); transition: transform .25s; background: var(--color-blanc); }
.artisans__icones li:hover img { transform: translateY(-4px) rotate(-3deg); }
.artisans__icones span { font-family: var(--font-title); font-weight: 500; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-blanc); text-align: center; line-height: 1.2; }

.client-une { display: flex; gap: 1rem; align-items: center; background: var(--color-blanc); border: 1.5px solid var(--color-encre); border-radius: var(--r-lg); padding: 1rem 1.2rem; height: 100%; }
.client-une img { width: 76px; height: 76px; flex-shrink: 0; }
.client-une__nom { font-family: var(--font-title); font-weight: 700; font-size: 1rem; color: var(--color-grege); text-transform: uppercase; margin: 0; }
.client-une__depuis { font-size: .75rem; color: var(--color-gris); margin: 0 0 .3rem; text-transform: uppercase; letter-spacing: .06em; }
.client-une__texte { font-size: .82rem; line-height: 1.45; margin: 0; }
@media (max-width: 991.98px) { .hero-v2__titre { padding-bottom: 9rem; } .hero-v2__bas { margin-top: -7rem; } .artisans { background: var(--color-noir); } }

/* Défis */
.defis { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.defi { border-radius: var(--r-lg); box-shadow: var(--ombre); aspect-ratio: 1 / 1; padding: 1.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: .8rem; text-align: center; text-decoration: none; transition: transform .25s, box-shadow .25s; position: relative; }
.defi:hover { transform: translateY(-6px); box-shadow: var(--ombre-fort); }
.defi .ico { width: 64px; height: 64px; }
.defi p { font-size: .85rem; line-height: 1.4; margin: 0; font-weight: 500; }
.defi--1 { background: var(--shade-1); color: var(--color-grege); }
.defi--1 p { color: var(--color-gris); }
.defi--2 { background: var(--shade-2); color: var(--color-grege); }
.defi--2 p { color: var(--color-fusain); }
.defi--3 { background: var(--shade-3); color: var(--color-blanc); }
.defi--4 { background: var(--shade-5); color: var(--color-blanc); }
.defi--3 p, .defi--4 p, .defi--5 p { color: var(--color-blanc); }
.defis__visuel { grid-column: 3 / 5; grid-row: 1 / 3; position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--ombre); min-height: 260px; }
.defis__visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.defis__visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,19,19,.7), rgba(20,19,19,0) 50%); }
.defis__visuel h2 { position: absolute; top: 1.5rem; left: 1.75rem; right: 1.75rem; z-index: 1; text-transform: uppercase; }
/* Tuile « ampoule » encastrée dans l'angle bas-gauche de la photo (encoche aux coins arrondis) */
.defi--5 { --encoche: 14px; --r-enc: 26px;
           background: var(--color-encre); color: var(--color-blanc); grid-column: 3; grid-row: 2; z-index: 2; box-shadow: 0 0 0 var(--encoche) var(--color-fond); }
.defi--5:hover { transform: none; box-shadow: 0 0 0 var(--encoche) var(--color-fond); }
.defi--5:hover .ico { transform: scale(1.1) rotate(-6deg); }
.defi--5 .ico { transition: transform .3s; }
.defi--5::before, .defi--5::after { content: ""; position: absolute; width: var(--r-enc); height: var(--r-enc); pointer-events: none;
  background: radial-gradient(circle at 100% 0, transparent calc(var(--r-enc) - .5px), var(--color-fond) var(--r-enc)); }
.defi--5::before { left: 0; top: calc(-1 * (var(--encoche) + var(--r-enc))); }                 /* arrondi de la photo au-dessus de l'encoche */
.defi--5::after  { left: calc(100% + var(--encoche)); bottom: 0; }                              /* arrondi de la photo à droite de l'encoche */
@media (max-width: 991.98px) {
  .defis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
  .defi { padding: .9rem; }
  .defi .ico { width: 48px; height: 48px; }
  .defi p { font-size: .78rem; }
  .defis__visuel { grid-column: 1 / -1; grid-row: 1; }
  .defi--5 { grid-column: 1 / -1; grid-row: auto; aspect-ratio: auto; padding: 1.75rem; box-shadow: var(--ombre); }
  .defi--5:hover { box-shadow: var(--ombre); }
  .defi--5::before, .defi--5::after { display: none; }
}

/* Panneaux arrondis sur fond gris */
.arrondi-haut { border-radius: var(--r-xl); margin: 0 clamp(0px, 2vw, 28px); box-shadow: var(--ombre); }

/* Étapes dépliables (restent à leur place) — navigation infinie */
.etapes__piste { display: flex; height: 360px; outline: none; border-radius: var(--r-lg); }
.etapes__piste:focus-visible { box-shadow: 0 0 0 3px rgba(166,153,129,.5); }
.etape-v2 { --decal: 28px; position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--r-lg); overflow: hidden; margin-left: calc(-1 * var(--decal));
            box-shadow: -10px 0 26px rgba(47,45,45,.14); transition: flex-grow .75s cubic-bezier(.65,0,.25,1), box-shadow .4s; }
.etape-v2:first-child { margin-left: 0; }
.etape-v2--1 { background: var(--shade-5); z-index: 4; }
.etape-v2--2 { background: #b5a88f; z-index: 3; }
.etape-v2--3 { background: #cdc3b0; z-index: 2; }
.etape-v2--4 { background: #e3ddd1; z-index: 1; }
.etape-v2.is-active { flex-grow: 2.8; box-shadow: -10px 0 30px rgba(47,45,45,.22); }
.etape-v2:not(.is-active):hover { flex-grow: 1.15; }
/* Onglet (état replié) */
.etape-v2__onglet { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; text-align: left; padding: 1.6rem 1.6rem 1.6rem calc(1.6rem + var(--decal));
                    display: flex; flex-direction: column; gap: .6rem; color: var(--color-blanc); cursor: pointer;
                    transition: opacity .35s ease, transform .5s cubic-bezier(.65,0,.25,1); }
.etape-v2:first-child .etape-v2__onglet { padding-left: 1.6rem; }
.etape-v2--4 .etape-v2__onglet { color: var(--color-fusain); }
.etape-v2__onglet .ico { position: absolute; right: 1.4rem; bottom: 1.4rem; width: 56px; height: 56px; opacity: .9; transition: transform .35s; }
.etape-v2__onglet:hover .ico { transform: translateY(-4px) scale(1.06); }
.etape-v2__num { font-family: var(--font-title); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin: 0; opacity: .9; }
.etape-v2__titre { font-family: var(--font-title); font-weight: 500; font-size: 1.05rem; line-height: 1.3; max-width: 17ch; }
.etape-v2.is-active .etape-v2__onglet { opacity: 0; transform: translateX(-20px); pointer-events: none; }
/* Détail (état déplié) */
.etape-v2__detail { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.etape-v2__detail > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.etape-v2__detail::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,19,19,.9) 0%, rgba(20,19,19,.6) 50%, rgba(20,19,19,.12) 100%); }
.etape-v2__contenu { position: relative; z-index: 1; padding: 2rem 2.2rem 2rem calc(2.2rem + var(--decal)); color: var(--color-blanc); max-width: 460px; height: 100%; display: flex; flex-direction: column; }
.etape-v2:first-child .etape-v2__contenu { padding-left: 2.2rem; }
.etape-v2__contenu > * { opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.etape-v2__contenu h3 { color: var(--color-blanc); font-size: 1.5rem; margin: .3rem 0 1rem; }
.etape-v2__contenu ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.etape-v2__contenu li { position: relative; padding-left: 1.8rem; margin-bottom: .45rem; font-size: 1rem; }
.etape-v2__contenu li::before { content: "\F272"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: 0; color: var(--color-sable); font-size: 1.1rem; }
.etape-v2__contenu .lien-fleche { margin-top: auto; }
.etape-v2.is-active .etape-v2__detail { opacity: 1; pointer-events: auto; transition-delay: .2s; }
.etape-v2.is-active .etape-v2__detail > img { transform: scale(1); }
.etape-v2.is-active .etape-v2__contenu > * { opacity: 1; transform: none; }
.etape-v2.is-active .etape-v2__contenu > :nth-child(1) { transition-delay: .35s; }
.etape-v2.is-active .etape-v2__contenu > :nth-child(2) { transition-delay: .45s; }
.etape-v2.is-active .etape-v2__contenu > :nth-child(3) { transition-delay: .55s; }
.etape-v2.is-active .etape-v2__contenu > :nth-child(4) { transition-delay: .65s; }
/* Barre de progression sous les étapes */
.etapes__nav { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: 1.25rem; }
.etapes__progression { flex: 1; max-width: 320px; height: 4px; border-radius: 4px; background: var(--shade-2); overflow: hidden; margin-right: auto; }
.etapes__progression span { display: block; height: 100%; width: 25%; border-radius: 4px; background: var(--color-grege); transition: transform .75s cubic-bezier(.65,0,.25,1); }
.etapes__compteur { font-family: var(--font-title); font-weight: 700; letter-spacing: .1em; color: var(--color-grege); min-width: 3.5rem; text-align: center; }
.etapes__suivant { border: 0; background: transparent; color: var(--color-grege); width: 96px; height: 48px; display: grid; place-items: center; cursor: pointer; }
.etapes__suivant .ico { width: 96px; height: 48px; animation: pousse 1.6s ease-in-out infinite; }
.etapes__suivant:hover { color: var(--color-encre); }
@keyframes pousse { 50% { transform: translateX(8px); } }
@media (max-width: 767.98px) {
  .etapes__piste { flex-direction: column; height: auto; }
  .etape-v2 { --decal: 22px; margin-left: 0; margin-top: calc(-1 * var(--decal)); flex: none; height: 112px; transition: height .7s cubic-bezier(.65,0,.25,1); }
  .etape-v2:first-child { margin-top: 0; }
  .etape-v2.is-active { height: 380px; }
  .etape-v2:not(.is-active):hover { flex-grow: 0; }
  .etape-v2__onglet, .etape-v2:first-child .etape-v2__onglet { padding: calc(1.2rem + var(--decal)) 5rem 1.2rem 1.4rem; }
  .etape-v2:first-child .etape-v2__onglet { padding-top: 1.2rem; }
  .etape-v2__contenu, .etape-v2:first-child .etape-v2__contenu { padding: calc(1.6rem + var(--decal)) 1.6rem 1.6rem; }
  .etape-v2:first-child .etape-v2__contenu { padding-top: 1.6rem; }
  .etape-v2__titre { max-width: none; }
  .etape-v2__onglet .ico { width: 44px; height: 44px; bottom: auto; top: calc(50% + 11px); transform: translateY(-50%); }
  .etapes__progression { display: none; }
}

/* Carrousel savoir-faire en profondeur */
.coverflow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; }
.coverflow__scene { position: relative; height: 430px; outline: none; }
.coverflow__scene:focus-visible { box-shadow: 0 0 0 3px rgba(166,153,129,.5); border-radius: var(--r-lg); }
.sf-carte { position: absolute; top: 10px; left: 50%; width: min(300px, 72vw); height: 400px; background: var(--color-blanc); border-radius: var(--r-lg); overflow: hidden;
            box-shadow: var(--ombre); display: flex; flex-direction: column; cursor: pointer; transform-origin: center center;
            transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .35s, box-shadow .35s; }
.sf-carte::after { content: ""; position: absolute; inset: 0; background: rgba(242,242,241,.35); transition: opacity .35s; pointer-events: none; }
.sf-carte.is-active { box-shadow: var(--ombre-fort); cursor: default; }
.sf-carte.is-active::after { opacity: 0; }
.sf-carte__haut { height: 150px; flex-shrink: 0; display: grid; place-items: center; color: var(--color-blanc); position: relative; }
.sf-carte__haut::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; background: var(--color-blanc); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.sf-carte__haut .ico { width: 76px; height: 76px; margin-bottom: 10px; }
.sf-carte--1 .sf-carte__haut { background: var(--shade-5); }
.sf-carte--2 .sf-carte__haut { background: var(--shade-4); }
.sf-carte--3 .sf-carte__haut { background: var(--shade-3); }
.sf-carte--4 .sf-carte__haut { background: #c2b59d; }
.sf-carte--5 .sf-carte__haut { background: #8f836c; }
.sf-carte__corps { padding: .5rem 1.6rem 1.6rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6rem; flex: 1; }
.sf-carte__corps h3 { font-family: var(--font-title); font-weight: 500; font-size: 1.15rem; color: var(--color-grege); text-transform: uppercase; margin: 0; }
.sf-carte__corps p { font-size: .9rem; line-height: 1.55; margin: 0; }
.sf-carte__corps .lien-fleche { margin-top: auto; }
.coverflow__points { grid-column: 1 / -1; display: flex; justify-content: center; gap: .5rem; margin-top: .5rem; }
.coverflow__points button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--shade-3); padding: 0; transition: width .3s, background-color .3s; }
.coverflow__points button.is-active { width: 28px; border-radius: 6px; background: var(--color-grege); }
@media (max-width: 767.98px) {
  .coverflow { grid-template-columns: 1fr 1fr; }
  .coverflow__scene { grid-column: 1 / -1; grid-row: 1; height: 420px; overflow: hidden; margin: 0 -12px; }
  .coverflow__fleche[data-coverflow-prev] { justify-self: end; }
}

/* Atelier Quickwin */
.quickwin { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; }
.quickwin__visuel { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 480px; box-shadow: var(--ombre); }
.quickwin__visuel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quickwin__visuel::after { content: ""; position: absolute; inset: 0; background: rgba(20,19,19,.35); }
.quickwin__play { position: absolute; z-index: 1; left: 45%; top: 50%; transform: translate(-50%, -50%); border: 0; background: transparent; color: var(--color-blanc);
                  display: flex; flex-direction: column; align-items: center; gap: .8rem; font-family: var(--font-title); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.quickwin__play .bi { font-size: 4.5rem; line-height: 1; transition: transform .25s; }
.quickwin__play:hover .bi { transform: scale(1.1); }
.quickwin__texte { position: relative; z-index: 1; background: var(--color-blanc); border-radius: var(--r-xl); box-shadow: var(--ombre-fort); padding: clamp(2rem, 4vw, 3.5rem); margin-left: -5rem; }
.quickwin__deco { position: absolute; top: -26px; left: 3rem; width: 96px; height: 48px; color: var(--shade-4); }
.liste-check { list-style: none; padding: 0; margin: 0 0 2rem; }
.liste-check li { position: relative; padding-left: 2.1rem; margin-bottom: .9rem; font-size: .95rem; line-height: 1.6; color: var(--color-gris); }
.liste-check li::before { content: "\F26B"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: .05rem; font-size: 1.2rem; color: var(--color-grege); }
@media (max-width: 991.98px) { .quickwin { grid-template-columns: 1fr; } .quickwin__visuel { min-height: 300px; } .quickwin__texte { margin: -3rem 1rem 0; } .quickwin__play { left: 50%; } }
.modale-v2 { border: 0; border-radius: var(--r-lg); box-shadow: var(--ombre-fort); }
.modale-v2__video { background: var(--color-fond); border-radius: var(--r-md); overflow: hidden; }
.modale-v2__vide { display: grid; place-items: center; text-align: center; padding: 2rem; }

/* Témoignages */
.avis { text-align: center; overflow: visible; }
.avis__deco { position: absolute; color: var(--color-grege); animation: flotte 6s ease-in-out infinite; }
.avis__deco--1 { top: -28px; left: 7%; }
.avis__deco--2 { top: 110px; left: -34px; animation-delay: -2s; width: 60px; height: 60px; }
.avis__deco--3 { top: 330px; left: -30px; animation-delay: -4s; width: 56px; height: 56px; }
.avis__deco--4 { top: -28px; right: 7%; animation-delay: -1s; }
.avis__deco--5 { top: 110px; right: -34px; animation-delay: -3s; width: 60px; height: 60px; }
.avis__deco--6 { top: 330px; right: -30px; animation-delay: -5s; width: 56px; height: 56px; }
@keyframes flotte { 50% { transform: translateY(-10px) rotate(4deg); } }
.avis__diapo { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 1.25rem; text-align: left; padding: 0 .25rem 1rem; }
.avis__photo { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 420px; }
.avis__photo > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avis__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,19,19,.75), rgba(20,19,19,0) 40%); }
.avis__photo figcaption { position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 1; color: var(--color-blanc); font-family: var(--font-title); font-weight: 500; }
.avis__logo { position: absolute; z-index: 1; right: .9rem; bottom: .9rem; width: 92px; height: 92px; border-radius: var(--r-md); border: 4px solid var(--color-blanc); box-shadow: var(--ombre); object-fit: cover; }
.avis__missions { background: var(--shade-5); color: var(--color-blanc); border-radius: var(--r-lg); padding: 1.75rem; }
.avis__missions h3 { color: var(--color-blanc); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1.25rem; }
.avis__missions ol { list-style: none; padding: 0 0 0 1.4rem; margin: 0; position: relative; }
.avis__missions ol::before { content: ""; position: absolute; left: .3rem; top: .4rem; bottom: .4rem; width: 2px; background: rgba(255,255,255,.5); }
.avis__missions li { position: relative; margin-bottom: 1.2rem; font-size: .88rem; line-height: 1.45; color: rgba(255,255,255,.9); }
.avis__missions li::before { content: ""; position: absolute; left: -1.38rem; top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--color-blanc); }
.avis__missions li strong { display: block; color: var(--color-blanc); font-family: var(--font-title); font-weight: 500; }
.avis__col { display: flex; flex-direction: column; gap: 1rem; }
.avis__google { position: relative; background: var(--color-blanc); border-radius: var(--r-lg); box-shadow: var(--ombre); padding: 3rem 1.5rem 1.5rem; flex: 1; }
.avis__g { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); font-size: 1.6rem;
           background: conic-gradient(from -45deg, #ea4335 0 25%, #4285f4 0 50%, #34a853 0 75%, #fbbc05 0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.avis__google img { border-radius: 50%; }
.avis__duree { font-size: .8rem; color: var(--color-gris); }
.avis__etoiles { color: #f4b400; font-size: .85rem; letter-spacing: .1em; }
.avis__controles { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; }
.avis__points.carousel-indicators { position: static; margin: 0; gap: .45rem; }
.avis__points.carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; background-color: var(--shade-3); border: 0; opacity: 1; margin: 0; transition: width .3s, background-color .3s; }
.avis__points.carousel-indicators .active { width: 28px; border-radius: 6px; background-color: var(--color-grege); }
@media (max-width: 1199.98px) { .avis__deco--2, .avis__deco--3, .avis__deco--5, .avis__deco--6 { display: none; } }
@media (max-width: 991.98px) { .avis__diapo { grid-template-columns: 1fr; } .avis__photo { min-height: 320px; } .avis__deco { display: none; } }

/* FAQ V2 */
.sujet-titre { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.sujet-titre span { font-family: var(--font-title); font-weight: 700; text-transform: uppercase; color: var(--color-encre); }
.sujet-titre::after { content: ""; flex: 1; height: 3px; border-radius: 3px; background: var(--color-encre); }
.lien-plus { display: inline-flex; align-items: center; gap: .8rem; font-family: var(--font-title); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--color-encre); text-decoration: none; }
.lien-plus .bi { font-size: 2.2rem; line-height: 1; transition: transform .25s; }
.lien-plus:hover .bi { transform: rotate(90deg); }

/* Réservation : choix du sujet + un seul bouton */
.rdv-module { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.5rem; align-items: stretch; }
.rdv-choix { border: 0; padding: 0; margin: 0; min-width: 0; }
.rdv-choix__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rdv-option { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.2rem; background: var(--color-blanc); border: 1.5px solid #e2e2e2; border-radius: var(--r-md);
              cursor: pointer; position: relative; height: 100%; transition: border-color .2s, box-shadow .25s, transform .25s; }
.rdv-option:hover { border-color: var(--shade-4); transform: translateY(-3px); box-shadow: var(--ombre); }
.rdv-option .ico { width: 48px; height: 48px; color: var(--color-grege); }
.rdv-option__txt { display: flex; flex-direction: column; line-height: 1.25; }
.rdv-option__txt strong { font-family: var(--font-title); font-size: 1.1rem; }
.rdv-option__txt span { font-family: var(--font-title); font-weight: 500; font-size: .9rem; color: var(--color-grege); }
.rdv-option__coche { position: absolute; top: .7rem; right: .8rem; font-size: 1.1rem; color: var(--color-encre); opacity: 0; transform: scale(.5); transition: opacity .2s, transform .25s; }
.btn-check:checked + .rdv-option { border-color: var(--color-encre); box-shadow: var(--ombre); background: var(--color-fond); }
.btn-check:checked + .rdv-option .rdv-option__coche { opacity: 1; transform: none; }
.btn-check:focus-visible + .rdv-option { outline: 3px solid var(--color-grege); outline-offset: 2px; }
.rdv-resume { background: var(--color-encre); color: var(--color-blanc); border-radius: var(--r-lg); padding: 2rem; display: flex; flex-direction: column; box-shadow: var(--ombre-fort); }
.rdv-resume .Label-GM-13px-Taupe { color: var(--color-sable); }
.rdv-resume__entete { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.rdv-resume__ico { width: 64px; height: 64px; border-radius: var(--r-md); background: rgba(255,255,255,.1); display: grid; place-items: center; color: var(--color-sable); flex-shrink: 0; }
.rdv-resume__ico .ico { width: 40px; height: 40px; }
.rdv-resume h3 { color: var(--color-blanc); font-size: 1.5rem; }
.rdv-resume__sous { display: block; font-family: var(--font-title); font-weight: 500; font-size: 1rem; color: var(--color-sable); }
.rdv-resume__infos { display: flex; gap: 1.25rem; list-style: none; padding: 0; margin: 0 0 1rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.75); }
.rdv-resume .Body-GR-18px-Noir { color: rgba(255,255,255,.85); font-size: .95rem; }
.rdv-resume .btn-atelier { margin-top: auto; --btn-bg: var(--color-blanc); --btn-fg: var(--color-encre); --btn-bd: var(--color-blanc); }
.rdv-resume.is-change .rdv-resume__entete, .rdv-resume.is-change .rdv-resume__ico { animation: rdv-maj .45s ease; }
@keyframes rdv-maj { from { opacity: 0; transform: translateY(8px); } }
.btn-atelier--large { padding: 1.15rem 1.6rem; font-size: .95rem; }
.contact-renvoi { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center; background: var(--shade-2); border-radius: var(--r-lg); padding: 1.75rem 2rem; }
@media (max-width: 991.98px) { .rdv-module { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .rdv-choix__liste { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) { .contact-renvoi { grid-template-columns: 1fr; } }

/* Agenda zcal (prendre-rendez-vous) */
.zcal-cadre { padding: clamp(.75rem, 2vw, 1.5rem); }
.zcal-iframe { display: block; width: 100%; min-width: 300px; height: 966px; min-height: 544px; border: 0; border-radius: var(--r-md); background: var(--color-blanc); }
.zcal-secours { text-align: center; font-size: .9rem; margin-top: 1rem; }
.zcal-secours a { color: var(--color-noir); }
@media (max-width: 575.98px) { .zcal-iframe { height: 1100px; min-width: 0; } }

/* Réservation (accueil) : un seul rendez-vous « Diagnostic » */
.rdv-diag { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; background: var(--color-encre); color: var(--color-blanc);
            border-radius: var(--r-lg); padding: clamp(1.75rem, 4vw, 2.75rem); box-shadow: var(--ombre-fort); }
.rdv-diag__ico { width: 96px; height: 96px; border-radius: var(--r-md); background: rgba(255,255,255,.1); display: grid; place-items: center; color: var(--color-sable); }
.rdv-diag__ico .ico { width: 60px; height: 60px; }
.rdv-diag h3 { color: var(--color-blanc); font-size: clamp(1.5rem, 2.6vw, 2rem); }
.rdv-diag__infos { display: flex; gap: 1.25rem; list-style: none; padding: 0; margin: 0 0 .75rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.75); }
.rdv-diag__texte p:not(.Label-GM-13px-Sable) { color: rgba(255,255,255,.85); font-size: 1rem; }
.rdv-diag .btn-atelier { --btn-bg: var(--color-blanc); --btn-fg: var(--color-encre); --btn-bd: var(--color-blanc); }
@media (max-width: 767.98px) { .rdv-diag { grid-template-columns: 1fr; text-align: left; } .rdv-diag .btn-atelier { justify-content: center; } }

/* Largeur de contenu élargie (Bootstrap plafonne à 1320 px) */
@media (min-width: 992px) {
  .container, .container-lg, .container-xl, .container-xxl { max-width: min(92%, 1600px); }
}
@media (min-width: 1400px) {
  .hero-v2__titre { max-width: min(80%, 1280px); }
  .prose, .max-w-texte { max-width: 860px; }
}

/* Portrait à venir (membre sans photo) */
.portrait-vide { display: grid; place-items: center; background: linear-gradient(145deg, var(--shade-2), var(--shade-4)); }
.portrait-vide span { font-family: var(--font-title); font-weight: 700; font-size: clamp(3rem, 8vw, 5.5rem); color: var(--color-blanc); line-height: 1; }

/* Bouton du pied de page : la couleur des liens du footer ne doit pas l'écraser */
.footer-atelier .btn-atelier { color: var(--btn-fg); }
.footer-atelier .btn-atelier--clair { --btn-bg: var(--color-blanc); --btn-fg: var(--color-encre); --btn-bd: var(--color-blanc); }
.footer-atelier .btn-atelier--clair:hover, .footer-atelier .btn-atelier--clair:focus-visible { --btn-bg: var(--color-grege); --btn-fg: var(--color-blanc); --btn-bd: var(--color-grege); color: var(--btn-fg); }