/* ================= Æra Production — design system ================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,300;0,600;0,700;1,500&display=swap');

:root{
  --ink:#111111;
  --black:#0a0a0a;
  --paper:#ffffff;
  --sand:#f1f0ee;
  --line:#e6e5e2;
  /* accent neutre par défaut (accueil et pages transverses) — sobre, aucune couleur dominante */
  --accent:#171717;
  --accent-light:#3a3a3a;
  --accent-rgb:23,23,23;
  /* variante assombrie de l'accent, réservée au TEXTE sur fond clair : les accents
     photo/mariage passent sous 4.5:1 en contraste et ne sont lisibles qu'aplatis. */
  --accent-text:#171717;

  /* échelle de gris typographique — évite les rgba(17,17,17,.xx) recopiés partout */
  --ink-80:rgba(17,17,17,.8);
  --ink-68:rgba(17,17,17,.68);
  --ink-55:rgba(17,17,17,.55);
  --ink-45:rgba(17,17,17,.45);

  /* rythme vertical partagé : un seul escalier pour tous les gabarits */
  --block:clamp(2.75rem,5.5vw,4.25rem);
  --block-lg:clamp(3.5rem,7vw,5.5rem);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* accent propre à chaque univers, posé sur <body data-universe="..."> — se propage
   automatiquement à tous les boutons/liens/points qui utilisent var(--accent) */
[data-universe="tech"]{--accent:#3b4a5e;--accent-light:#56697f;--accent-rgb:59,74,94;--accent-text:#33414f}
[data-universe="prod"]{--accent:#5c2a3a;--accent-light:#7a3d4f;--accent-rgb:92,42,58;--accent-text:#5c2a3a}
[data-universe="photo"]{--accent:#9c6570;--accent-light:#b98891;--accent-rgb:156,101,112;--accent-text:#7d4b55}
[data-universe="mariage"]{--accent:#C99BA0;--accent-light:#DBBFC3;--accent-rgb:201,155,160;--accent-text:#8B4F56}
[data-universe="particuliers"]{--accent:#B76E52;--accent-light:#C9927D;--accent-rgb:183,110,82;--accent-text:#89523D}
[data-universe="entreprises"]{--accent:#5F8E94;--accent-light:#87AAAF;--accent-rgb:95,142,148;--accent-text:#44666B}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Montserrat',sans-serif;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
img{display:block;max-width:100%}
ul{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

.skip-link{position:absolute;left:1rem;top:1rem;z-index:300;border-radius:.875rem;background:var(--black);padding:.5rem 1rem;font-size:.875rem;color:#fff;transform:translateY(-6rem);transition:transform .2s}
.skip-link:focus{transform:translateY(0)}

.wrap{max-width:88rem;margin-inline:auto;padding-inline:1.25rem}

/* ---------- header ---------- */
/* collante : sur des pages longues (17 gabarits prestation), le retour à la navigation
   ne doit pas imposer un scroll jusqu'en haut. L'accueil garde son header transparent. */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.logo:hover{transform:scale(1.04)}
.logo-mark{display:inline-flex;align-items:center;gap:.55em}
.logo-mark--vertical{flex-direction:column;text-align:center;gap:.5em}
.logo-mark-icon{display:block;width:auto}
.logo-mark--colored .logo-mark-brand{color:var(--accent)}
body[data-universe] .header-brand-row .brand-caption{color:var(--accent)}
.logo-mark-text{display:flex;flex-direction:column;color:inherit}
.logo-mark-brand{font-family:'Playfair Display',serif;font-weight:600;font-size:1em;letter-spacing:.01em;line-height:1;white-space:nowrap}
.logo-mark-sub{font-family:'Montserrat',sans-serif;font-weight:500;font-size:.38em;letter-spacing:.34em;text-transform:uppercase;line-height:1;opacity:.7;margin-top:.5em;white-space:nowrap}
.logo-mark--vertical .logo-mark-text{align-items:center}
.logo-icon-mark{display:block}
.main-nav li{position:relative}
.main-nav a{opacity:.8;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s}
.main-nav a:hover{transform:translateY(-2px);opacity:1}
.main-nav a.current{opacity:1}

/* ---------- en-tête empilé (logo + sous-titre centrés, filet, menu centré en dessous) —
   inspiré de studio80prod.fr/wedding, adapté à l'identité Æra ---------- */
.site-header--stacked .header-brand-row{position:relative;display:flex;justify-content:center;align-items:center;padding:1.5rem 1.25rem 1.25rem;transition:padding .3s var(--ease)}
@media (min-width:1024px){.site-header--stacked .header-brand-row{padding-block:1.5rem 1.125rem}}
.site-header--stacked .logo{flex-direction:column}
.site-header--stacked .header-menu-mobile{position:absolute;top:50%;left:1.25rem;transform:translateY(-50%)}
.brand-caption{display:block;margin-top:.65rem;font-size:.625rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-55);text-align:center}
.main-nav--centered{display:none}
@media (min-width:1024px){
  .main-nav--centered{display:block;border-top:1px solid var(--line)}
  .main-nav--centered ul{display:flex;justify-content:center;align-items:center;gap:2.25rem;padding:.85rem 1.25rem;font-size:.8125rem;font-weight:500;letter-spacing:.02em;text-transform:uppercase}
}

/* ---------- menu déroulant (Nos univers / Solutions / L'agence) ---------- */
.nav-drop-trigger{display:inline-flex;align-items:center;gap:.3rem}
.nav-drop-trigger .chev{display:inline-flex;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.nav-drop:hover .nav-drop-trigger .chev,.nav-drop:focus-within .nav-drop-trigger .chev{transform:rotate(180deg)}
.nav-drop-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);width:max-content;min-width:16rem;max-width:20rem;max-height:min(28rem,calc(100vh - 6rem));overflow-y:auto;margin-top:.75rem;background:#fff;border:1px solid var(--line);border-radius:1.125rem;box-shadow:0 24px 48px -20px rgba(17,17,17,.22);padding:.6rem;opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;z-index:60;text-transform:none;letter-spacing:normal;font-size:1rem;font-weight:400}
.nav-drop:hover .nav-drop-panel,.nav-drop:focus-within .nav-drop-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition-delay:0s}
.nav-drop-items{display:flex;flex-direction:column;gap:.1rem}
/* Particuliers (9 prestations) et Entreprises (8) dépassaient le max-height du panneau
   à une colonne (titre + description par ligne) et forçaient un scroll interne. Passés
   en 2 colonnes et élargis en conséquence (cf. nav-drop-panel--wide dans chrome.mjs) :
   tout tient sans scroll sur les hauteurs d'écran desktop courantes (ce menu n'existe
   qu'à partir de 1024px, cf. .main-nav--centered). L'agence (4 items) reste à une
   colonne, elle n'avait pas ce problème. */
.nav-drop-panel--wide{max-width:38rem}
.nav-drop-items--wide{display:grid;grid-template-columns:repeat(2,minmax(15rem,1fr));gap:.1rem .4rem}
.nav-drop-item{display:flex;flex-direction:column;gap:.15rem;padding:.65rem .8rem;border-radius:.75rem;transition:background .2s;opacity:1}
.nav-drop-item:hover{background:var(--sand);transform:none}
.nav-drop-item b{font-size:.875rem;font-weight:600;color:#111;letter-spacing:-0.005em}
.nav-drop-item span{font-size:.75rem;color:rgba(17,17,17,.5)}
.nav-drop-viewall{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.35rem;padding:.65rem .8rem .15rem;border-top:1px solid var(--line);font-size:.8125rem;font-weight:500;color:var(--accent);opacity:1}
.nav-drop-viewall svg{flex-shrink:0}
.nav-drop-viewall:hover{transform:none;color:var(--accent-light)}
.menu-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--line);background:#fff;border-radius:.875rem;transition:background .2s}
.menu-btn:hover{background:var(--sand)}
.menu-btn span.lbl{display:none}
@media (min-width:640px){.menu-btn span.lbl{display:inline}}

/* homepage variant: transparent header floating over the hero photo */
.site-header--overlay{position:absolute;inset-inline:0;top:0;background:transparent;border-bottom:none;z-index:50}
.site-header--overlay .menu-btn{background:rgba(255,255,255,.4);backdrop-filter:blur(4px);border-color:rgba(230,229,226,.8)}
.site-header--overlay .menu-btn:hover{background:rgba(255,255,255,.7)}

/* ---------- hero (dark rounded) ---------- */
.hero-dark{position:relative;padding:0;background:var(--black);color:#fff;border-radius:0 0 2rem 2rem}
.hero-dark .inner{position:relative;z-index:2;padding:clamp(4rem,9vw,7rem) 1.25rem clamp(3.5rem,7vw,5rem)}

/* micro-label : même langage typographique que « Vous êtes » sur l'accueil
   (capitales, interlettrage large, petit corps) — remplace un ancien texte au fil du texte */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.6875rem;font-weight:600;line-height:1;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-55)}
.eyebrow .dot{width:.3125rem;height:.3125rem;border-radius:999px;background:var(--accent);opacity:1;flex-shrink:0}
.hero-dark .eyebrow{color:rgba(255,255,255,.62)}
.hero-dark .eyebrow .dot{background:currentColor}
.hero-dark h1{margin:1.5rem 0 0;max-width:20ch;font-size:clamp(2.25rem,5vw,3.75rem);font-weight:600;letter-spacing:-0.028em;line-height:1.05}

/* le Playfair italique de la tagline d'accueil est repris pour les accroches courtes et
   poétiques (une phrase) des pages prestation — mais pas pour les paragraphes .lead plus
   longs et descriptifs (contact, réalisations, entreprises...), où l'italique sur 4-5 lignes
   nuit à la lisibilité : ceux-là gardent un texte droit, plus confortable à lire */
.hero-dark .detail-lead{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;margin-top:1.5rem;max-width:38rem;font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.6;color:rgba(255,255,255,.78)}
.hero-dark p.lead{margin-top:1.5rem;max-width:38rem;font-size:clamp(1rem,1.4vw,1.125rem);line-height:1.7;color:rgba(255,255,255,.7)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.75rem;border-radius:999px;background:var(--black);color:#fff;font-size:.875rem;font-weight:500;line-height:1.2;padding:.375rem .375rem .375rem 1.5rem;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.btn:hover{transform:translateY(-2px) scale(1.02);color:#fff;box-shadow:0 14px 28px -14px rgba(10,10,10,.55)}
.btn .go{width:2.25rem;height:2.25rem;display:grid;place-items:center;border-radius:999px;background:#fff;color:#0a0a0a;flex-shrink:0;transition:transform .35s var(--ease)}
.btn:hover .go{transform:translateX(3px)}
.btn.on-sand:hover{box-shadow:0 14px 28px -14px rgba(10,10,10,.4)}
.btn.on-sand{background:var(--sand);color:#111}
.btn.on-sand .go{background:#0a0a0a;color:#fff}

/* ---------- sections ---------- */
section{padding:var(--block-lg) 0}
.section-tight{padding:var(--block) 0}
h2{margin:0;font-weight:600;letter-spacing:-0.02em;line-height:1.2}

/* Escalier d'espacement partagé : remplace les margin-top:2rem/2.5rem/3rem/3.5rem
   posés en style inline bloc par bloc, qui donnaient un rythme irrégulier. */
.block{margin-top:var(--block)}
.block-lg{margin-top:var(--block-lg)}

/* En-tête de bloc : micro-label + filet fin + titre. Le filet reprend .gateway-rule
   de l'accueil, seul « micro-détail » graphique du site jusqu'ici. */
.block-head{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;margin-bottom:1.75rem}
.block-head .rule{width:2.75rem;height:1px;background:var(--accent);opacity:.35}
.block-head h2{font-size:clamp(1.375rem,2.6vw,1.875rem);letter-spacing:-0.02em;max-width:24ch}
.block-head p{margin:0;max-width:44rem;font-size:.9375rem;line-height:1.75;color:var(--ink-68)}
.block-head--label{margin-bottom:1rem}
.block-head+.tag-row,.block-head+.price-note,.block-head+.detail-list{margin-top:0}
.hero-dark .block-head .rule{background:#fff;opacity:.3}

@media (max-width:760px){.audience .grid{grid-template-columns:1fr}}

/* ---------- gallery ---------- */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.5rem}
.filter-btn{padding:.5rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.8125rem;font-weight:500;line-height:1.2;color:var(--ink-55);transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.filter-btn:hover{border-color:rgba(17,17,17,.35);color:var(--ink);transform:translateY(-1px)}
.filter-btn.active{background:var(--black);color:#fff;border-color:var(--black)}
/* seconde ligne de filtres (catégories) : hiérarchie plus légère que la ligne audience */
.filters--sub .filter-btn{background:transparent;border-color:transparent;color:var(--ink-45);padding-inline:.85rem}
.filters--sub .filter-btn:hover{background:var(--sand);border-color:transparent;color:var(--ink)}
.filters--sub .filter-btn.active{background:var(--sand);border-color:transparent;color:var(--ink)}
.portfolio-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:768px){.portfolio-grid{grid-template-columns:1fr 1fr}}
/* la preuve des pages prestation affiche 3 réalisations : sur une grille à 2 colonnes
   elles tombaient en 2 + 1 orphelin */
@media (min-width:900px){.portfolio-grid--three{grid-template-columns:repeat(3,1fr)}.portfolio-grid--three .p-card{min-height:19rem}.portfolio-grid--three .p-card h3{font-size:1.1875rem}}
.p-card{display:block;position:relative;min-height:22rem;overflow:hidden;border-radius:2rem;background:var(--black);padding:1.5rem;color:#fff;border:1px solid rgba(255,255,255,.05);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.p-card:hover{transform:translateY(-8px);color:#fff;box-shadow:0 30px 60px -30px rgba(10,10,10,.6)}
.p-card .meta{display:flex;justify-content:space-between;font-size:.75rem;text-transform:uppercase;letter-spacing:.025em;color:rgba(255,255,255,.45)}
.p-card .go{width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.p-card:hover .go{transform:rotate(45deg) scale(1.08)}
.p-card .center-icon{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.p-card .center-icon svg path{fill:rgba(255,255,255,.9)}
.p-card .bottom{position:absolute;inset-inline:1.5rem;bottom:1.5rem}
.p-card h3{font-size:1.5rem;font-weight:500;letter-spacing:-0.01em;margin:0}
.p-card p{margin-top:.5rem;max-width:28rem;font-size:.875rem;color:rgba(255,255,255,.55)}
.tags{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:.5rem}
.tags span{display:inline-flex;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:.4rem .8rem;font-size:.8rem}

/* ---------- gallery: groupes par catégorie (page Réalisations) ---------- */
.portfolio-groups{display:flex;flex-direction:column;gap:4.5rem}

/* ---------- intro épurée, réutilisée sur Galerie et les pages de L'agence (Notre
   approche, Partenaires, À propos, Conseils & Actualités) : plus de grand bandeau
   sombre en photo de fond, un intro clair et direct (eyebrow + titre + accroche),
   cohérent avec Contact et Galerie qui ont abandonné ce bandeau. ---------- */
.page-intro{padding:clamp(1.25rem,2.5vw,1.75rem) 1.25rem clamp(1.5rem,2.5vw,1.75rem);text-align:center}
.page-intro .wrap{max-width:80rem;margin-inline:auto}
.page-intro .eyebrow{justify-content:center}
.page-intro .crumb{justify-content:center;margin-bottom:1rem}
/* pas de text-wrap:balance ni de max-width étroit : la phrase occupe l'espace
   disponible et ne retombe à la ligne que si la largeur du viewport l'impose vraiment,
   pas pour un souci d'équilibre esthétique du dernier mot. */
.page-intro h1{margin:0;font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(1.875rem,5.8vw,4rem);line-height:1.1;letter-spacing:-.01em}
.page-intro .eyebrow+h1{margin-top:.75rem}
.page-intro p{margin:.85rem 0 0;font-size:1rem;line-height:1.6;color:var(--ink-68)}

/* liste de réalisations en lignes alternées (une image par ligne, texte de l'autre
   côté), inspirée de nudot.com.tw/work_oil. Le côté (gauche/droite) et le gabarit
   (normal/large/étroit/centré) viennent de classes posées par rowVariant() dans
   pages.mjs, fixes par réalisation — jamais du nth-child, pour ne jamais être perturbés
   par un filtre qui masque certaines lignes. Vérifié directement sur nudot.com.tw
   (inspecteur, pas juste une lecture du texte) : l'effet n'est pas un fondu, c'est un
   `clip-path: inset()` animé au scroll qui révèle l'image progressivement depuis un
   bord (comme un rideau qui s'ouvre), combiné à un léger zoom qui se stabilise à mesure
   qu'elle est découverte — reproduit ici via une variable CSS (--p, 0 → 1) mise à jour
   en JS à chaque frame de scroll (voir data-scale-reveal / main.js). Le sens du rideau
   suit le côté de l'image, comme si chaque photo entrait depuis le bord extérieur de
   la page. */
.realisation-list{display:flex;flex-direction:column;gap:5rem}
.realisation-row{display:flex;flex-direction:column;gap:1.75rem}
@media (min-width:820px){
  .realisation-row{flex-direction:row;align-items:center;gap:2.25rem}
  .realisation-row>*{flex:1 1 0;min-width:0}
  .realisation-row--right{flex-direction:row-reverse}
  /* gabarits : une case large (image dominante, à deux intensités) et une étroite
     (texte dominant, à deux intensités, utile quand le descriptif est plus long)
     reviennent régulièrement pour casser le rythme sinon très régulier de l'alternance
     gauche/droite — le texte reste toujours à côté de l'image, jamais au-dessus ni en
     dessous. */
  .realisation-row--wide .realisation-row__media{flex-grow:1.7}
  .realisation-row--wide-lg .realisation-row__media{flex-grow:2.3}
  .realisation-row--narrow .realisation-row__media{flex-grow:.7}
  .realisation-row--narrow .realisation-row__text{flex-grow:1.3}
  .realisation-row--narrow-lg .realisation-row__media{flex-grow:.5}
  .realisation-row--narrow-lg .realisation-row__text{flex-grow:1.5}
}
.realisation-row__media{overflow:hidden}
.realisation-row__frame{position:relative;display:block;width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--black);clip-path:inset(0 calc((1 - var(--p,0)) * 100%) 0 0);transition:clip-path .2s linear;border:0;padding:0;margin:0;font:inherit;text-align:inherit}
button.realisation-row__frame{cursor:zoom-in}
.realisation-row__zoom{position:absolute;right:1rem;bottom:1rem;width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:999px;background:rgba(17,17,17,.55);color:#fff;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s,background .2s;backdrop-filter:blur(4px)}
button.realisation-row__frame:hover .realisation-row__zoom,button.realisation-row__frame:focus-visible .realisation-row__zoom{opacity:1;transform:translateY(0)}
button.realisation-row__frame:hover .realisation-row__zoom{background:rgba(17,17,17,.75)}
.realisation-row--right .realisation-row__frame{clip-path:inset(0 0 0 calc((1 - var(--p,0)) * 100%))}
/* la couleur reste totalement absente jusqu'à 75% du rideau (--p ≤ 0.75), puis revient
   progressivement de 75% à 100% pour arriver pleine quand la photo est entièrement
   révélée. clamp() fait les deux segments en une seule expression : (1 - p) * 400%
   vaut déjà 100% (donc plafonné, sans effet) pour tout p ≤ 0.75, et ne descend sous
   100% qu'à partir de p > 0.75 — le facteur 400 (= 100 / (1 - 0.75)) règle uniquement
   le seuil de déclenchement, à ajuster ici si le seuil doit encore bouger. Le survol
   garantit la couleur à tout moment, utile si la ligne est plus grande que la fenêtre
   et n'atteint donc jamais --p = 1 au scroll. */
.realisation-row__frame img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(clamp(0%, calc((1 - var(--p,0)) * 400%), 100%)) contrast(1.05);transform:scale(calc(1.18 - var(--p,0) * .18));transition:filter .2s linear,transform .2s linear}
.realisation-row__frame:hover img{filter:grayscale(0%) contrast(1.05)}
.realisation-row__frame--empty{background:var(--sand);display:grid;place-items:center}
.realisation-row__frame--empty .center-icon svg path{fill:rgba(17,17,17,.3)}
.realisation-row__text{text-align:center}
/* le texte "penche" vers l'image plutôt que vers le bord extérieur de la page : aligné
   à gauche quand l'image est à gauche (le texte colle à son bord gauche), à droite
   quand l'image est à droite (row-reverse : le texte se retrouve visuellement à
   gauche, mais doit coller au bord droit, celui qui touche l'image) — jamais aligné à
   l'opposé de la photo qu'il accompagne. */
@media (min-width:820px){
  .realisation-row__text{text-align:left}
  .realisation-row--right .realisation-row__text{text-align:right}
}
.realisation-row__cat{display:block;margin:0;font-size:.9375rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.realisation-row__place{display:block;margin-top:.3rem;font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:1rem;color:var(--ink-55)}
.realisation-row__text p{margin:1rem auto 0;max-width:26rem;font-size:.9375rem;line-height:1.7;color:var(--ink-68)}
@media (min-width:820px){
  .realisation-row__text p{margin-left:0;margin-right:0}
  .realisation-row--right .realisation-row__text p{margin-left:auto;margin-right:0}
}
.realisation-row__link{margin-top:1.25rem;display:inline-flex;align-items:center;gap:.65rem;font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:var(--ink)}
.realisation-row__link .go{width:2rem;height:2rem;display:grid;place-items:center;border-radius:999px;background:var(--sand);color:var(--ink);flex-shrink:0;transition:transform .3s var(--ease),background .2s}
.realisation-row__link:hover .go{transform:translateX(4px);background:#e3e2df}
@media (prefers-reduced-motion:reduce){.realisation-row__frame,.realisation-row--right .realisation-row__frame{clip-path:none;transition:none}.realisation-row__frame img{transform:none;filter:grayscale(0%) contrast(1.05);transition:none}}

/* ---------- footer ---------- */
.site-footer{position:relative;overflow:hidden;border-radius:2rem 2rem 0 0;background:var(--black);color:#fff}
.site-footer .inner{position:relative;z-index:10;padding:4rem 1.25rem 2.5rem}
.footer-cols{display:grid;grid-template-columns:1fr;gap:2.5rem;padding-bottom:3rem}
@media (min-width:768px){.footer-cols{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.footer-cols{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer-cols .col-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.025em;color:rgba(255,255,255,.4);margin-bottom:1rem}
.footer-cols ul{display:flex;flex-direction:column;gap:.75rem}
.footer-cols a{font-size:.875rem;display:inline-block;opacity:.65;transition:transform .3s,opacity .3s}
.footer-cols a:hover{transform:translateX(4px);opacity:1;color:#fff}
.footer-legal{text-align:center;max-width:40rem;margin:0 auto;font-size:.75rem;color:rgba(255,255,255,.4);line-height:1.7}
.legal-bar{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;border-top:1px solid rgba(255,255,255,.1);padding-top:2rem;margin-top:1.5rem;font-size:.75rem;color:rgba(255,255,255,.45)}
@media (min-width:640px){.legal-bar{flex-direction:row;justify-content:space-between}}

/* ---------- tiroir de navigation (gauche, en poussée) ----------
   Le tiroir glisse depuis la gauche et le header / contenu / footer sont décalés d'autant
   vers la droite : la page est poussée, pas recouverte. La partie de page restée visible
   (.nav-scrim, transparente) ferme le tiroir au clic. */
:root{--drawer-w:min(80vw,18rem)}
.mobile-nav{position:fixed;top:0;bottom:0;left:0;z-index:215;width:var(--drawer-w);display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;transform:translateX(-100%);transition:transform .45s var(--ease)}
body > .site-header,body > main,body > .site-footer{transition:transform .45s var(--ease)}
/* scrollbar-gutter : bloquer le scroll retire la barre de défilement (desktop), ce qui
   décalait toute la page de ~15px pendant l'ouverture. */
html{scrollbar-gutter:stable}
html.nav-open{overflow:hidden}
html.nav-open .mobile-nav{transform:translateX(0)}
html.nav-open body > :is(.site-header,main,.site-footer){transform:translateX(var(--drawer-w))}
/* zone de clic transparente (pas de voile) sur la page poussée : un tap ferme le tiroir */
.nav-scrim{position:fixed;inset:0 0 0 var(--drawer-w);z-index:214;display:none}
html.nav-open .nav-scrim{display:block}
.mobile-nav-top{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--line);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:rgba(17,17,17,.5)}
.mobile-nav-close{display:grid;place-items:center;width:2rem;height:2rem;border:1px solid var(--line);border-radius:.75rem;background:#fff;transition:background .2s}
.mobile-nav-close:hover{background:var(--sand)}
.mobile-nav ul{flex:1;padding:.5rem 1.25rem}
.mobile-nav li+li{border-top:1px solid var(--line)}
.mobile-nav a{display:flex;align-items:baseline;gap:.75rem;padding-block:.75rem;font-size:.9375rem;font-weight:500;letter-spacing:-0.005em;color:rgba(17,17,17,.75);transition:color .2s}
.mobile-nav a:hover,.mobile-nav a.current{color:#111}
.mobile-nav a .idx{font-size:.6875rem;font-weight:400;color:rgba(17,17,17,.35);font-variant-numeric:tabular-nums}
.mobile-nav a.current .idx{color:var(--accent)}
.mobile-nav-foot{margin:0;padding:1rem 1.25rem 1.25rem;border-top:1px solid var(--line);font-size:.6875rem;text-transform:uppercase;letter-spacing:.04em;line-height:1.5;color:rgba(17,17,17,.45)}
/* mobile et tablette uniquement : à partir de 1024px, la nav centrée du header prend le relais */
@media (min-width:1024px){
  .header-menu-mobile,.mobile-nav,.nav-scrim{display:none!important}
  html.nav-open{overflow:visible}
  html.nav-open body > :is(.site-header,main,.site-footer){transform:none}
}
@media (prefers-reduced-motion:reduce){.mobile-nav,body > .site-header,body > main,body > .site-footer{transition:none}}

/* ---------- contact modal ---------- */
.modal-backdrop{position:fixed;inset:0;z-index:210;display:none;align-items:center;justify-content:center;padding:1rem;background:rgba(17,17,17,.3);backdrop-filter:blur(16px);opacity:0;transition:opacity .4s}
.modal-backdrop.open{display:flex}
.modal-backdrop.visible{opacity:1}
.modal-panel{position:relative;width:100%;max-width:32rem;overflow:hidden;border-radius:2rem;background:#fff;padding:2rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);border:1px solid var(--line);transform:translateY(28px);opacity:0;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .4s}
.modal-backdrop.visible .modal-panel{transform:translateY(0);opacity:1}
.modal-close{position:absolute;right:1rem;top:1rem;width:2.25rem;height:2.25rem;display:grid;place-items:center;border-radius:999px;background:var(--sand);color:rgba(17,17,17,.6);transition:background .2s,color .2s}
.modal-close:hover{background:#e3e2df;color:#111}
.modal-panel form{display:flex;flex-direction:column;gap:1rem}
.modal-panel label{display:flex;flex-direction:column;gap:.375rem}
.modal-panel label span{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.025em;color:rgba(17,17,17,.5)}
.modal-panel input,.modal-panel textarea{width:100%;border:1px solid var(--line);background:rgba(241,240,238,.5);border-radius:.875rem;padding:.75rem 1rem;font-size:.875rem;outline:none;font-family:inherit;transition:border-color .2s,background .2s}
.modal-panel input:focus,.modal-panel textarea:focus{border-color:rgba(17,17,17,.3);background:#fff}
.modal-panel textarea{resize:none}
.modal-success{display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:2rem;gap:1rem}
.modal-success .ico{width:3.5rem;height:3.5rem;display:grid;place-items:center;border-radius:999px;background:var(--black);color:var(--accent-light)}

/* ---------- visionneuse (aperçu rapide depuis la vignette de la galerie) ---------- */
.lightbox-backdrop{position:fixed;inset:0;z-index:220;display:none;align-items:center;justify-content:center;padding:1.5rem;background:rgba(10,10,10,.94);opacity:0;transition:opacity .3s}
.lightbox-backdrop.open{display:flex}
.lightbox-backdrop.visible{opacity:1}
.lightbox-stage{margin:0;max-width:min(92vw,72rem);max-height:calc(100vh - 3rem);display:flex;flex-direction:column;align-items:center;gap:.85rem;transform:scale(.97);opacity:0;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s}
.lightbox-backdrop.visible .lightbox-stage{transform:none;opacity:1}
.lightbox-img{display:block;max-width:100%;max-height:calc(100vh - 8rem);width:auto;height:auto;object-fit:contain;border-radius:.5rem;background:#000}
.lightbox-caption{margin:0;font-size:.875rem;color:rgba(255,255,255,.75);text-align:center;max-width:40rem}
.lightbox-caption:empty{display:none}
.lightbox-close{position:absolute;right:1.25rem;top:1.25rem;width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.16);transition:background .2s}
.lightbox-close:hover{background:rgba(255,255,255,.2)}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:3rem;height:3rem;display:grid;place-items:center;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.16);transition:background .2s}
.lightbox-nav:hover{background:rgba(255,255,255,.2)}
.lightbox-prev{left:1.25rem}
.lightbox-next{right:1.25rem}
.lightbox-count{position:absolute;left:50%;bottom:1.25rem;transform:translateX(-50%);font-size:.75rem;letter-spacing:.04em;color:rgba(255,255,255,.6)}
.lightbox-backdrop[data-single] .lightbox-nav,.lightbox-backdrop[data-single] .lightbox-count{display:none}
@media (max-width:640px){.lightbox-nav{width:2.5rem;height:2.5rem}.lightbox-prev{left:.5rem}.lightbox-next{right:.5rem}.lightbox-close{right:.75rem;top:.75rem}}

/* ---------- page détail d'une réalisation : mosaïque photo (même gabarit en croix
   que .hero-mosaic sur Particuliers/Entreprises, sans les cases texte t1/t2 — remplacées
   par une 8e case photo "h" pour ne pas laisser de trou). Tant que la réalisation n'a
   qu'une seule photo (`item.gallery` absent), la même image tourne sur les 8 cases —
   dès que plusieurs photos existent, chacune y prend sa place à son tour. Chaque case
   ouvre la visionneuse (bouton, voir data-lightbox-images / main.js). ---------- */
.realisation-mosaic{
  position:relative;
  width:100%;
  height:70vh;
  min-height:24rem;
  max-height:40rem;
  padding:.75rem;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(4,1fr);
  grid-template-areas:
    ".  a  a  b  b  ."
    "c  a  a  h  h  e"
    "c  d  f  h  h  e"
    ".  d  f  g  g  .";
  gap:.75rem;
  background:var(--sand);
  border-radius:1.5rem;
  overflow:hidden;
}
/* Quand la galerie complète suit (voir .realisation-full-grid juste en dessous), la
   croix perd son arrondi bas : les deux blocs se recollent en un seul mur de photos,
   sans coupure ni carte séparée au milieu de la page. */
.realisation-mosaic--merged{border-radius:1.5rem 1.5rem 0 0}
.realisation-mosaic .hero-mosaic__cell--h{grid-area:h}
/* Ici, contrairement au hero Particuliers/Entreprises (désaturé, couleur au survol —
   voir plus bas .hero-mosaic__img), la galerie d'une réalisation montre les photos en
   couleur d'emblée : c'est la vitrine du travail livré, pas une accroche marketing. */
.realisation-mosaic .hero-mosaic__img{filter:contrast(1.05)}
.realisation-mosaic .hero-mosaic__cell--b .hero-mosaic__img,.realisation-mosaic .hero-mosaic__cell--f .hero-mosaic__img{filter:contrast(1.05) brightness(.78)}
.realisation-mosaic .hero-mosaic__cell:hover .hero-mosaic__img{filter:contrast(1.05);transform:scale(1.03)}
@media (max-width:1199px){
  .realisation-mosaic{
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:repeat(5,1fr);
    grid-template-areas:
      ".  a  a  ."
      "c  a  a  e"
      "c  h  h  e"
      "d  h  h  f"
      ".  g  g  .";
  }
  .realisation-mosaic .hero-mosaic__cell--b{display:none}
}
@media (max-width:767px){
  .realisation-mosaic{
    height:auto;
    max-height:none;
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:auto;
    grid-template-areas:
      "a  a"
      "h  h"
      "c  d"
      "f  g"
      "e  e";
  }
  .realisation-mosaic .hero-mosaic__cell--b{display:none}
  .realisation-mosaic .hero-mosaic__cell--a{aspect-ratio:4/3}
  .realisation-mosaic .hero-mosaic__cell--h{aspect-ratio:16/9}
  .realisation-mosaic .hero-mosaic__cell--c,.realisation-mosaic .hero-mosaic__cell--d,.realisation-mosaic .hero-mosaic__cell--f,.realisation-mosaic .hero-mosaic__cell--g{aspect-ratio:1/1}
}

/* Galerie complète : suite directe de la croix du haut, pas une section à part — même
   trame 6 colonnes, même fond sable, posée juste en dessous sans titre ni respiration
   (voir .realisation-mosaic--merged juste au-dessus). Une réalisation peut à terme
   compter des dizaines voire des centaines de photos (mariage couvert toute la
   journée...) — contrairement à la croix, limitée à 8 cases figées par nom de zone,
   cette grille les affiche toutes via des colonnes qui se répètent au lieu d'un
   gabarit nommé. `grid-auto-flow:dense` comble les trous laissés par les cases
   --big/--wide (rythme posé côté build, voir realisationFullGrid dans
   build/pages.mjs), chaque vignette en chargement différé (`loading=lazy` côté HTML)
   pour que le poids réel ne dépende que de ce que le visiteur voit. */
.realisation-full-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:150px;
  grid-auto-flow:dense;
  gap:.75rem;
  padding:0 .75rem .75rem;
  background:var(--sand);
  border-radius:0 0 1.5rem 1.5rem;
}
.realisation-full-grid__item{position:relative;display:block;overflow:hidden;border:0;padding:0;margin:0;background:var(--sand);cursor:zoom-in}
.realisation-full-grid__item--big{grid-column:span 2;grid-row:span 2}
.realisation-full-grid__item--wide{grid-column:span 2}
.realisation-full-grid__item img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.02);transition:transform .25s}
.realisation-full-grid__item:hover img,.realisation-full-grid__item:focus-visible img{transform:scale(1.05)}
@media (max-width:1199px){
  .realisation-full-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:767px){
  .realisation-full-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px}
}

/* ---------- misc ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:1.25rem;padding:1.75rem}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}
/* apparition en cascade des enfants d'une grille (piliers, cartes, chips) :
   même intention que les délais --i du héros d'accueil, mais sans JS supplémentaire */
.stagger>*{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(2){transition-delay:.06s}
.stagger.in>*:nth-child(3){transition-delay:.12s}
.stagger.in>*:nth-child(4){transition-delay:.18s}
.stagger.in>*:nth-child(5){transition-delay:.24s}
.stagger.in>*:nth-child(6){transition-delay:.3s}
.stagger.in>*:nth-child(n+7){transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.reveal,.stagger>*{opacity:1;transform:none}}
.social-row{display:flex;align-items:center;gap:.65rem;margin-top:1.5rem}
.social-row .social{width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:999px;font-size:.875rem;background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.14);opacity:1;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
.social-row .social:hover{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.4);opacity:1;transform:translateY(-2px)}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:220;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;background:var(--black);color:#fff;border-radius:0 0 2rem 2rem;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.loader.hide{transform:translateY(-100%)}
.loader-logo{display:flex;align-items:center;justify-content:center}
.loader-content{display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center}
.loader-content p{max-width:24ch;font-size:.875rem;color:rgba(255,255,255,.55);margin:0}
.loader-bar-wrap{width:min(22rem,72vw);display:flex;flex-direction:column;gap:.75rem}
.loader-bar-track{height:1px;background:rgba(255,255,255,.15)}
.loader-bar-fill{height:100%;background:var(--accent-light);width:0%}
.loader-bar-labels{display:flex;justify-content:space-between;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.45)}
.loader-bar-labels b{color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums;font-weight:500}

/* ---------- hero photo (accueil) ---------- */
.hero-photo{position:relative;isolation:isolate;overflow:hidden;border-radius:0 0 2rem 2rem;background:#c9c9c9;height:100vh}
.hero-photo-bg{position:absolute;inset:0;z-index:0;transform:scale(1.08);will-change:transform}
.hero-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-photo-img--gray{filter:grayscale(1) contrast(1.05) brightness(1.02)}
.hero-photo-img--color{
  --reveal-x:50%;--reveal-y:55%;
  -webkit-mask-image:radial-gradient(circle 38vmin at var(--reveal-x) var(--reveal-y),#000 0%,#000 50%,transparent 85%);
  mask-image:radial-gradient(circle 38vmin at var(--reveal-x) var(--reveal-y),#000 0%,#000 50%,transparent 85%);
  will-change:mask-position,-webkit-mask-position;
}
.hero-drone{position:absolute;left:18%;top:70%;z-index:2;pointer-events:none;width:3rem;height:3rem;margin-left:-1.5rem;margin-top:-1.5rem;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3));will-change:left,top}

.hero-cta-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.75rem}

/* ---------- accueil — chooser (particuliers / entreprises) ---------- */
.gateway{min-height:88vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:6rem 1.25rem 4rem}
.gateway-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.75rem;width:100%;max-width:34rem;margin-inline:auto}
.gateway-logo{display:flex;flex-direction:column;align-items:center;max-width:100%}
.gateway-logo .logo-mark-icon{height:150px;width:auto}
.gateway-services{display:block;max-width:100%;font-size:.8125rem;letter-spacing:.16em;margin-top:.85rem;white-space:normal;text-align:center}
.gateway-rule{width:2.75rem;height:1px;background:currentColor;opacity:.3;flex-shrink:0}
.gateway-tagline{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:clamp(1.25rem,2.6vw,1.625rem);line-height:1.45;color:rgba(17,17,17,.65);max-width:34rem}
.gateway-tagline--sub{margin-top:-.65rem;font-size:clamp(.9375rem,1.6vw,1.125rem);opacity:.8}
@media (min-width:640px){.gateway-tagline--sub{white-space:nowrap}}
.gateway-you{font-family:'Montserrat',sans-serif;font-weight:600;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;opacity:.65}
.gateway-choice{display:flex;align-items:stretch;justify-content:center;flex-wrap:nowrap;gap:1.5rem;width:100%;max-width:38rem}
.gateway-option{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;flex:1 1 0;min-width:0;max-width:15.5rem;color:inherit}
.gateway-option-title{font-family:'Montserrat',sans-serif;font-weight:700;font-size:.9375rem;letter-spacing:.08em;text-transform:uppercase}
.gateway-option-desc{font-size:.8125rem;line-height:1.55;opacity:.75}
.gateway-option .go-row{margin-top:.4rem;display:inline-flex;align-items:center;gap:.55rem;font-size:.8125rem;font-weight:500}
.gateway-option .go-row .go{width:1.75rem;height:1.75rem;display:grid;place-items:center;border-radius:999px;background:rgba(17,17,17,.08);transition:transform .3s}
.gateway-option:hover .go-row .go{transform:translateX(4px)}
.gateway-divider{width:1px;align-self:stretch;background:currentColor;opacity:.2;flex-shrink:0}
@media (max-width:480px){
  .gateway-logo .logo-mark-icon{height:110px}
  .gateway-choice{gap:.85rem}
  .gateway-option-title{font-size:.75rem;letter-spacing:.04em}
  .gateway-option-desc{font-size:.6875rem;line-height:1.4}
  .gateway-option .go-row{font-size:.6875rem;gap:.35rem;white-space:normal}
  .gateway-option .go-row .go{width:1.375rem;height:1.375rem}
  .gateway-option .go-row .go svg{width:12px;height:12px}
}

.gateway--photo{color:#fff}
.gateway-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(ellipse 52% 58% at 50% 56%,rgba(0,0,0,.28),transparent 72%),
  linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.08) 40%,rgba(0,0,0,.26) 100%)}
.gateway--photo .gateway-inner{text-shadow:0 2px 16px rgba(0,0,0,.55)}
.gateway--photo .gateway-tagline{color:rgba(255,255,255,.85)}
.gateway--photo .gateway-option .go-row .go{background:rgba(255,255,255,.16)}
.gateway--photo .gateway-option:hover{color:#fff}

/* ================= Æra Production — extension (univers / solutions / contenus) ================= */

/* ---------- hero-dark avec photo de fond ---------- */
/* Le calque était un aplat noir 60→88 % qui écrasait complètement la photo.
   Il est remplacé par un scrim sculpté (vignette radiale + dégradé ancré en bas à gauche,
   là où se trouve le texte), même principe que .gateway-scrim sur l'accueil :
   la photo reste lisible, le texte garde son contraste. */
.hero-dark--photo{position:relative;background-size:cover;background-position:center;min-height:min(30rem,68vh);display:flex;align-items:flex-end}
.hero-dark--photo::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;background:
  linear-gradient(105deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.55) 45%,rgba(10,10,10,.28) 100%),
  linear-gradient(180deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,.12) 38%,rgba(10,10,10,.72) 100%)}
.hero-dark--photo::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 9rem 1rem rgba(10,10,10,.45)}
.hero-dark--photo .wrap{position:relative;z-index:2;width:100%}

.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.6875rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:1.5rem}
.crumb a{color:rgba(255,255,255,.68);transition:color .2s}
.crumb a:hover{color:#fff}
.crumb span{opacity:.75}
.crumb.crumb--on-light{color:rgba(17,17,17,.4)}
.crumb.crumb--on-light a{color:rgba(17,17,17,.65)}
.crumb.crumb--on-light a:hover{color:var(--ink)}

/* ---------- vision ---------- */
.vision-lede{font-size:clamp(1.75rem,4vw,3rem);font-weight:500;line-height:1.35;letter-spacing:-0.01em;margin-top:1.5rem}

.pillar-card{background:#fff;padding:2.25rem 2rem;display:flex;flex-direction:column;gap:1rem;transition:background .3s}
.pillar-card:hover{background:var(--sand)}
.pillar-card .ico{width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:.75rem;background:var(--black);color:#fff;flex-shrink:0}
.pillar-card h3{font-size:1.0625rem;font-weight:600;letter-spacing:-0.01em;margin:0}
.pillar-card p{font-size:.875rem;line-height:1.6;color:rgba(17,17,17,.6);margin:0}

/* variante allégée des piliers (icône + texte en ligne, sans cadre ni fond) : utilisée
   quand une grille de cases bordées ferait doublon avec une autre juste au-dessus
   (ex. Notre approche, où .pillar-card sert déjà à la liste des six étapes) */
.pillars-inline{margin-top:2.25rem;display:grid;grid-template-columns:1fr;gap:1.75rem 2.5rem}
@media (min-width:700px){.pillars-inline{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.pillars-inline{grid-template-columns:repeat(3,1fr)}}
.pillars-inline .item{display:flex;gap:1rem;align-items:flex-start}
.pillars-inline .ico{flex-shrink:0;width:2.25rem;height:2.25rem;display:grid;place-items:center;border-radius:999px;background:rgba(var(--accent-rgb),.1);color:var(--accent-text)}
.pillars-inline h3{margin:0;font-size:.9375rem;font-weight:600;letter-spacing:-0.005em}
.pillars-inline p{margin:.35rem 0 0;font-size:.8438rem;line-height:1.6;color:var(--ink-68)}

/* ---------- notre approche : méthode en split photo (sticky) + liste numérotée ---------- */
.approche-split{margin-top:2.75rem;display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:start}
@media (min-width:900px){.approche-split{grid-template-columns:minmax(0,19rem) 1fr;gap:3.5rem}}
.approche-split__media{border-radius:1.25rem;overflow:hidden;aspect-ratio:3/4}
/* top est calé sur la hauteur réelle du header collant (.site-header), qui grandit à
   1024px quand sa nav centrée s'affiche (même logique que .hero-mosaic un peu plus
   bas) : sans ce second palier, l'image reste calée sur la hauteur du petit header et
   passe sous le bandeau élargi avant de reprendre son défilement normal. */
@media (min-width:900px){.approche-split__media{position:sticky;top:9rem}}
@media (min-width:1024px){.approche-split__media{top:12rem}}
.approche-split__media img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.2) contrast(1.05)}
.step-list{display:flex;flex-direction:column}
.step-row{display:flex;gap:1.5rem;padding:1.85rem 0;border-top:1px solid var(--line)}
.step-row:first-child{border-top:none;padding-top:0}
.step-row .num{flex-shrink:0;width:2.5rem;font-family:'Playfair Display',serif;font-weight:600;font-size:1.375rem;color:var(--accent);opacity:.55;line-height:1.3}
.step-row h3{margin:0;font-size:1.125rem;font-weight:600;letter-spacing:-0.01em}
.step-row p{margin:.5rem 0 0;font-size:.9375rem;line-height:1.7;color:var(--ink-68);max-width:34rem}

/* ---------- photo pleine largeur avec légende (À propos, Partenaires) : casse le
   rythme "grille après grille" avec un vrai temps de respiration photographique ---------- */
.photo-band{position:relative;border-radius:1.5rem;overflow:hidden;aspect-ratio:16/7.5;background:var(--black)}
.photo-band img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.1) contrast(1.05)}
.photo-band::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,10,.68) 0%,rgba(10,10,10,0) 58%)}
.photo-band .cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.5rem,4vw,2.75rem);z-index:1}
.photo-band .cap p{margin:0;max-width:38rem;font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:clamp(1.125rem,2.4vw,1.5rem);line-height:1.45;color:#fff}
@media (max-width:640px){.photo-band{aspect-ratio:4/5}}

/* ---------- à propos : portrait fondatrice mis en avant (photo + citation), en
   remplacement de la petite case beige noyée entre deux grilles ---------- */
.founder-spread{display:grid;grid-template-columns:1fr;border-radius:1.5rem;overflow:hidden;background:var(--sand)}
@media (min-width:820px){.founder-spread{grid-template-columns:minmax(0,19rem) 1fr}}
.founder-spread__media{position:relative;min-height:14rem}
.founder-spread__media img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;filter:grayscale(.15) contrast(1.05)}
.founder-spread__body{padding:clamp(1.75rem,4vw,3rem)}
.founder-spread__body .kicker{display:block;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.founder-spread__body .lede{margin:1rem 0 0;font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:clamp(1.125rem,2vw,1.5rem);line-height:1.5;color:var(--ink)}
.founder-spread__body p.text{margin:1.1rem 0 0;font-size:.9375rem;line-height:1.75;color:var(--ink-68);max-width:38rem}

/* ---------- nos univers ---------- */
.universe-subnav{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:1.25rem;overflow:hidden;margin-top:2rem}
@media (min-width:700px){.universe-subnav{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.universe-subnav{grid-template-columns:repeat(3,1fr)}}
.universe-subnav a{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#fff;padding:1.5rem 1.75rem;font-size:1rem;font-weight:500;letter-spacing:-0.005em;transition:background .3s}
.universe-subnav a:hover{background:var(--sand);color:#111}
.universe-subnav a .arrow{width:2.25rem;height:2.25rem;flex-shrink:0;display:grid;place-items:center;border-radius:999px;background:var(--black);color:#fff;transition:transform .3s}
.universe-subnav a:hover .arrow{transform:translateX(4px)}

/* ---------- solutions ---------- */
.solutions-grid{margin-top:2.5rem;display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:700px){.solutions-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.solutions-grid{grid-template-columns:repeat(3,1fr)}}
.solution-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:1.5rem;padding:2rem;background:#fff;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.solution-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -20px rgba(17,17,17,.18)}
.solution-card .tag{display:inline-flex;align-self:flex-start;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-text);background:rgba(var(--accent-rgb),.1);border-radius:999px;padding:.3rem .75rem}
.solution-card h3{margin:1rem 0 0;font-size:1.375rem;font-weight:600;letter-spacing:-0.01em}
.solution-card p{margin-top:.6rem;font-size:.875rem;line-height:1.6;color:rgba(17,17,17,.6)}
.solution-card ul{margin-top:1.25rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.solution-card li{display:flex;align-items:center;gap:.6rem;font-size:.8125rem;color:rgba(17,17,17,.7)}
.solution-card li svg{flex-shrink:0;color:var(--accent-text)}
.solution-card .btn{margin-top:1.5rem;align-self:flex-start}

/* ---------- partenaires : liste éditoriale (filets horizontaux, pas de cases) ---------- */
.partners-list{margin-top:2rem;display:flex;flex-direction:column}
.partner-row{display:flex;flex-wrap:wrap;gap:.4rem 3rem;align-items:baseline;padding:1.75rem 0;border-top:1px solid var(--line);transition:background .2s}
.partner-row:first-child{border-top:none;padding-top:0}
.partner-row .who{display:flex;flex-direction:column;gap:.35rem;flex:1 1 15rem}
.partner-row h3{margin:0;font-family:'Playfair Display',serif;font-weight:600;font-size:1.1875rem;letter-spacing:-0.005em}
.partner-row .tag{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.partner-row p{margin:0;flex:2 1 22rem;font-size:.9375rem;line-height:1.65;color:var(--ink-68)}

/* ---------- ils nous font confiance (marquee) ---------- */
.trust-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.trust-track{display:flex;align-items:center;width:max-content;gap:3.25rem;animation:marquee 45s linear infinite}
.trust-marquee:hover .trust-track{animation-play-state:paused}
/* logos clients : niveaux de gris discrets par défaut (bande de crédibilité, pas du
   contenu), couleurs d'origine au survol. Fond blanc des visuels effacé par le multiply.
   Hauteur commune, largeur plafonnée pour que les logos très horizontaux (Collins) ne
   dominent pas la bande. */
.trust-logo{display:block;height:calc(2.75rem * var(--s,1));width:auto;max-width:9.5rem;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1);opacity:.55;transition:filter .35s ease,opacity .35s ease,transform .35s var(--ease)}
.trust-logo:hover{filter:none;opacity:1;transform:scale(1.06)}
@media (max-width:640px){.trust-track{gap:2.25rem}.trust-logo{height:calc(2.25rem * var(--s,1));max-width:7.5rem}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.trust-strip{margin-top:var(--block-lg);border-block:1px solid var(--line);padding-block:2rem}
.trust-strip .eyebrow{margin-bottom:1.5rem}
/* Sur les pages prestation, le bandeau confiance ouvre la section juste sous le hero
   (voir prestationTemplate) : la section porte déjà l'espacement du haut, pas besoin
   d'en rajouter un deuxième. */
.wrap>.trust-strip:first-child{margin-top:0}

/* ---------- avis clients ---------- */
.testi-grid{margin-top:2.5rem;display:grid;grid-template-columns:1fr;gap:1.25rem}
@media (min-width:700px){.testi-grid{grid-template-columns:repeat(3,1fr)}}
/* moins de 3 avis (page Particuliers) : on centre le groupe au lieu d'étirer sur 3
   colonnes fixes, ce qui laissait une case vide et déséquilibrait le bloc à gauche. */
.testi-grid--center{display:flex;flex-wrap:wrap;justify-content:center;text-align:left}
.testi-grid--center .testi-card{flex:0 1 22rem}
.testi-card{position:relative;background:var(--sand);border-radius:1.5rem;padding:2rem 1.875rem 1.875rem;display:flex;flex-direction:column;gap:1rem}
/* guillemet ouvrant en Playfair, filigrane : signe le bloc comme une citation
   sans ajouter un mot de contenu */
.testi-card::before{content:"“";position:absolute;top:.35rem;right:1.25rem;font-family:'Playfair Display',serif;font-size:5rem;line-height:1;color:var(--accent);opacity:.13;pointer-events:none}
.testi-card .stars{display:flex;gap:.15rem;color:var(--accent-text)}
.testi-card p{position:relative;margin:0;font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:1.0625rem;line-height:1.65;color:var(--ink-80)}
.testi-card .who{display:flex;flex-direction:column;font-size:.8125rem;line-height:1.5;padding-top:.85rem;border-top:1px solid rgba(17,17,17,.09)}
.testi-card .who b{font-weight:600;color:#111}
.testi-card .who span{color:var(--ink-45)}

/* ---------- FAQ ---------- */
.faq-list{margin-top:1rem;display:flex;flex-direction:column}
.faq-item{border-top:1px solid var(--line);padding:1.5rem 0}
.faq-item:first-child{border-top:none}
.faq-item summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:1.0625rem;font-weight:500;line-height:1.45;letter-spacing:-0.01em;list-style:none;transition:color .2s}
.faq-item summary:hover{color:var(--accent-text)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .plus{width:2rem;height:2rem;flex-shrink:0;display:grid;place-items:center;border-radius:999px;background:var(--sand);color:var(--ink-55);transition:transform .35s var(--ease),background .25s,color .25s}
.faq-item summary:hover .plus{background:var(--accent);color:#fff}
.faq-item[open] summary .plus{transform:rotate(45deg);background:var(--accent);color:#fff}
.faq-item p{margin:1rem 0 0;max-width:42rem;font-size:.9375rem;line-height:1.75;color:var(--ink-68)}

/* ---------- à propos : engagements ---------- */
.values-grid{margin-top:1.5rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
@media (min-width:700px){.values-grid{grid-template-columns:repeat(4,1fr)}}
.value-chip{border:1px solid var(--line);border-radius:1rem;padding:1.1rem;font-size:.875rem;font-weight:500;text-align:center;color:rgba(17,17,17,.7)}

/* ---------- à propos / notre approche : liste allégée (icône + texte, sans cadre) ---------- */
.distinguish-list{display:grid;grid-template-columns:1fr;gap:1.75rem 2.5rem}
@media (min-width:700px){.distinguish-list{grid-template-columns:repeat(2,1fr)}}
.distinguish-list .item{display:flex;gap:1rem;align-items:flex-start}
.distinguish-list .ico{flex-shrink:0;width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:.75rem;background:var(--black);color:#fff}
.distinguish-list h3{margin:0;font-size:1rem;font-weight:600;letter-spacing:-0.005em}
.distinguish-list p{margin:.4rem 0 0;font-size:.875rem;line-height:1.65;color:var(--ink-68)}

/* ---------- à propos / partenaires : bande de qualifications compacte (remplace une
   grille de cases par une simple ligne, secondaire par rapport au récit) ---------- */
.credential-strip{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;margin-top:1.5rem;padding-top:1.75rem;border-top:1px solid var(--line)}
.credential-strip .item{display:flex;gap:.85rem;align-items:flex-start;flex:1 1 14rem}
.credential-strip .ico{flex-shrink:0;width:2.25rem;height:2.25rem;display:grid;place-items:center;border-radius:999px;background:rgba(var(--accent-rgb),.1);color:var(--accent-text)}
.credential-strip h3{margin:0;font-size:.875rem;font-weight:600}
.credential-strip p{margin:.3rem 0 0;font-size:.8125rem;line-height:1.6;color:var(--ink-68)}

/* ---------- conseils & actualités (blog) ---------- */
.blog-cats{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.5rem 0 2.5rem}
.blog-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:700px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.blog-card{display:flex;flex-direction:column;border-radius:1.5rem;overflow:hidden;border:1px solid var(--line);background:#fff;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.blog-card:hover{transform:translateY(-6px)}
.blog-card .thumb{height:11rem;background:linear-gradient(135deg,var(--accent-light),var(--accent));display:flex;align-items:flex-end;padding:1rem;position:relative}
.blog-card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blog-card .cat{position:relative;z-index:1;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:rgba(0,0,0,.35);border-radius:999px;padding:.3rem .7rem;backdrop-filter:blur(4px)}
.blog-card .body{padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.blog-card .date{font-size:.75rem;color:rgba(17,17,17,.45)}
.blog-card h3{margin:0;font-size:1.0625rem;font-weight:600;letter-spacing:-0.005em;line-height:1.35}
.blog-card p{margin:0;font-size:.8438rem;line-height:1.6;color:rgba(17,17,17,.6);flex:1}
.blog-card .read{margin-top:.25rem;display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem;font-weight:500;color:#111}

.article-body{max-width:44rem;margin-inline:auto;padding-inline:1.25rem}
.article-body h2{font-size:1.375rem;font-weight:600;letter-spacing:-0.01em;margin:2.5rem 0 1rem}
.article-body p{font-size:1rem;line-height:1.8;color:rgba(17,17,17,.7);margin:0 0 1.25rem}
.article-body ul{margin:0 0 1.25rem;padding-left:1.25rem;list-style:disc}
.article-body li{font-size:1rem;line-height:1.8;color:rgba(17,17,17,.7);margin-bottom:.4rem}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;font-size:.8125rem;color:rgba(17,17,17,.5)}
.article-meta .sep{opacity:.4}
.article-share{display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--line);margin-top:2.5rem;padding-top:2rem}
.article-share .share-label{font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-45)}
.article-share .social{width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:999px;transition:background .25s,color .25s}
.article-share .social:hover{background:var(--accent)!important;color:#fff!important}

/* ---------- pages détail (univers / solutions) ---------- */
.detail-lead{max-width:40rem;font-size:1.0625rem;line-height:1.75;color:rgba(255,255,255,.65);margin-top:1rem}

/* Problème / réponse : les deux colonnes étaient deux blocs nus, la colonne « réponse »
   (un seul paragraphe) pesant visuellement trois fois moins que la liste en face.
   Elles deviennent deux panneaux d'un même cadre, en grille à filets de 1px (fond var(--line) visible entre les cellules). */
.detail-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:1.5rem;overflow:hidden}
@media (min-width:900px){.detail-grid{grid-template-columns:1fr 1fr}}
.detail-block{background:#fff;padding:clamp(1.75rem,3.5vw,2.75rem);display:flex;flex-direction:column}
.detail-block--muted{background:var(--sand)}
.detail-block h2{font-size:clamp(1.125rem,2vw,1.375rem);font-weight:600;letter-spacing:-0.015em;margin:.9rem 0 0}
.detail-block .rule{width:2.75rem;height:1px;background:var(--accent);opacity:.35;margin-top:.9rem}
/* la réponse gagne le même poids visuel que la liste d'en face : corps plus généreux,
   filet vertical d'accent, respiration */
.detail-answer{margin:1.5rem 0 0;padding-left:1.25rem;border-left:2px solid rgba(var(--accent-rgb),.28);font-size:1rem;line-height:1.8;color:var(--ink-68)}
.detail-crosslink{margin:1.5rem 0 0;font-size:.875rem}
.detail-crosslink a{display:inline-flex;align-items:center;gap:.4rem;font-weight:500;color:var(--accent-text);border-bottom:1px solid rgba(var(--accent-rgb),.35);padding-bottom:.15rem}
.detail-crosslink a svg{width:14px;height:14px}
.detail-crosslink a:hover{border-bottom-color:var(--accent-text)}

.detail-list{display:flex;flex-direction:column;gap:1.1rem;margin-top:1.5rem}
.detail-list li{display:flex;gap:.9rem;align-items:flex-start;font-size:.9375rem;line-height:1.65;color:var(--ink-68)}
/* les icônes brutes de 18px flottaient à côté du texte ; elles sont posées dans une
   pastille, comme les icônes de piliers sur l'accueil */
.detail-list .ic{width:1.75rem;height:1.75rem;flex-shrink:0;display:grid;place-items:center;border-radius:999px;margin-top:.05rem}
.detail-list .ic svg{width:14px;height:14px}
.detail-list--check .ic{background:rgba(var(--accent-rgb),.12);color:var(--accent-text)}
.detail-list--needs .ic{background:rgba(17,17,17,.06);color:var(--ink-55)}
.benefits-list{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:800px){.benefits-list{grid-template-columns:repeat(2,1fr);gap:1.25rem 2.5rem}}

/* Le bandeau CTA était un aplat sable discret au milieu d'une page claire : il ne
   marquait plus le moment de conversion. Il devient un panneau sombre teinté par l'accent
   de l'univers, dans le langage du pied de page. */
.detail-cta{position:relative;overflow:hidden;border-radius:1.75rem;background:var(--black);color:#fff;padding:clamp(2rem,4.5vw,3.25rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.75rem}
.detail-cta::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 140% at 6% 0%,rgba(var(--accent-rgb),.5),transparent 68%)}
.detail-cta::after{content:"";position:absolute;inset-inline:0;top:0;height:1px;background:linear-gradient(90deg,var(--accent-light),transparent 60%)}
.detail-cta>*{position:relative;z-index:1}
.detail-cta h3{margin:0;font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:clamp(1.375rem,2.8vw,1.875rem);line-height:1.3;letter-spacing:-0.01em;max-width:22ch}

/* La ligne « pages liées » alignait 16 puces identiques : le lien vers l'univers
   (le seul qui fait avancer la navigation) est maintenant distingué. */
.related-row{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.6rem}
.related-row a{border:1px solid var(--line);border-radius:999px;padding:.55rem 1.15rem;font-size:.8125rem;font-weight:500;line-height:1.2;color:var(--ink-55);transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.related-row a:hover{background:var(--black);color:#fff;border-color:var(--black);transform:translateY(-1px)}
.related-row a.is-hub{display:inline-flex;align-items:center;gap:.45rem;background:var(--accent-text);border-color:var(--accent-text);color:#fff}
.related-row a.is-hub svg{width:14px;height:14px}
.related-row a.is-hub:hover{background:var(--black);border-color:var(--black)}

/* ---------- mentions légales / confidentialité / CGV ---------- */
.legal-body{max-width:48rem;margin-inline:auto;padding-inline:1.25rem;display:flex;flex-direction:column;gap:.25rem}
.legal-body h2{font-size:1.1875rem;font-weight:600;letter-spacing:-0.01em;margin:2rem 0 .75rem}
.legal-body h3{font-size:1rem;font-weight:600;margin:1.25rem 0 .5rem}
.legal-body p{font-size:.9375rem;line-height:1.8;color:rgba(17,17,17,.68);margin:0 0 .75rem}
.legal-body ul{padding-left:1.25rem;list-style:disc;display:flex;flex-direction:column;gap:.4rem;margin:0 0 .75rem}
.legal-body li{font-size:.9375rem;line-height:1.7;color:rgba(17,17,17,.68)}
.legal-body a{text-decoration:underline;text-underline-offset:2px}
.legal-updated{font-size:.8125rem;color:rgba(17,17,17,.45)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:3rem}
@media (min-width:900px){.contact-grid{grid-template-columns:.85fr 1.15fr}}
/* colonne image, inspirée de studio80prod.fr/corporate/contact/ : une photo verticale
   posée à droite de sa colonne, cadre net sans fioriture. Recadrée en portrait via
   aspect-ratio même si la source est au format paysage — la composition en spirale,
   centrée, reste lisible une fois recadrée. */
.contact-visual{display:flex;justify-content:center}
.contact-visual__frame{width:100%;max-width:24rem;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);background:var(--black)}
/* le formulaire (audience, 4 lignes de champs, message, consentement) est bien plus
   haut qu'une simple photo au format 3/4 : sur desktop, la colonne image s'étire pour
   égaler la hauteur réelle du formulaire en face (comportement par défaut d'une grille
   CSS, ici explicité) plutôt que de laisser un grand vide sous une photo trop courte —
   c'était ça, le "ça déborde", un déséquilibre de hauteur entre les deux colonnes, pas
   une taille de police ou un espacement à corriger. */
@media (min-width:900px){
  .contact-visual{justify-content:flex-end;align-self:stretch}
  .contact-visual__frame{max-width:26rem;height:100%;aspect-ratio:auto}
}
/* object-position : le sujet de la photo (gilet floqué) est en bas de l'image, le
   recadrage desktop (cadre étiré à la hauteur du formulaire) doit le garder visible */
.contact-visual__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 80%;display:block}
.contact-col{display:flex;flex-direction:column}
.contact-col .lead{margin-top:1rem;font-size:1rem;line-height:1.7;color:var(--ink-68);max-width:34rem}
.contact-col .contact-form-card{margin-top:2rem}
.contact-form-card{border:1px solid var(--line);border-radius:1.5rem;padding:2rem}
.contact-form-card form{display:flex;flex-direction:column;gap:1rem}
.contact-form-card label{display:flex;flex-direction:column;gap:.375rem}
.contact-form-card label span{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.025em;color:rgba(17,17,17,.5)}
.contact-form-card .audience-toggle label span{display:inline-flex;align-items:center;gap:.5rem;font-size:inherit;font-weight:inherit;text-transform:none;letter-spacing:normal;color:inherit}
.contact-form-card input,.contact-form-card select,.contact-form-card textarea{width:100%;border:1px solid var(--line);background:rgba(241,240,238,.5);border-radius:.875rem;padding:.75rem 1rem;font-size:.875rem;outline:none;font-family:inherit;transition:border-color .2s,background .2s}
.contact-form-card input:focus,.contact-form-card select:focus,.contact-form-card textarea:focus{border-color:rgba(17,17,17,.3);background:#fff}
.contact-form-card select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='rgba(17,17,17,.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.contact-form-card .row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:480px){.contact-form-card .row2{grid-template-columns:1fr}}
/* "Date souhaitée" masqué (hors mariage, cf. main.js) : Lieu reprend seul toute la
   largeur plutôt que de laisser une colonne vide à côté. */
.contact-form-card .row2[data-date-hidden]{grid-template-columns:1fr}
.contact-form-card .consent{display:flex;flex-direction:row;align-items:flex-start;gap:.6rem;font-size:.8125rem;color:var(--ink-55)}
/* la règle générique des libellés de champ (capitales espacées) s'appliquait aussi à la
   phrase de consentement, qui se retrouvait entièrement en capitales */
.contact-form-card .consent span{font-size:.8125rem;font-weight:400;line-height:1.55;letter-spacing:0;text-transform:none;color:var(--ink-55)}
.contact-form-card .consent a{text-decoration:underline;text-underline-offset:2px}
/* la case hérite sinon du style générique des champs texte (padding, fond, coins très
   arrondis) qui déforme complètement le rendu natif d'une checkbox et casse l'alignement */
.contact-form-card .consent input{appearance:none;-webkit-appearance:none;width:1.125rem;height:1.125rem;min-width:1.125rem;flex-shrink:0;margin:calc((.8125rem * 1.55 - 1.125rem) / 2) 0 0 0;padding:0;border:1.5px solid var(--line);border-radius:.3rem;background-color:#fff;cursor:pointer;transition:background-color .2s,border-color .2s}
.contact-form-card .consent input:hover{border-color:rgba(17,17,17,.4)}
.contact-form-card .consent input:checked{border-color:var(--ink);background-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:65%}
.contact-form-card .consent input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* .zone-row servait à la fois aux villes (SEO local, information de second plan) et aux
   « moments » d'une prestation (contenu éditorial). Les deux usages sont séparés :
   .tag-row porte le contenu, .zone-row reste une mention discrète. */
.zone-row{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.4rem}
/* dans la carte de contact, le zone-row est le premier élément (pas besoin de marge
   au-dessus) et il était collé au formulaire juste après (pas de marge en dessous) —
   d'où l'effet "collé au toggle particulier/entreprise". */
.contact-form-card .zone-row{margin:0 0 1.75rem}
.zone-row span{border:1px solid var(--line);border-radius:999px;padding:.35rem .85rem;font-size:.75rem;font-weight:500;line-height:1.3;color:var(--ink-55);background:#fff}

.tag-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.tag-row span{border-radius:999px;padding:.5rem 1.05rem;font-size:.8125rem;font-weight:500;line-height:1.2;color:var(--accent-text);background:rgba(var(--accent-rgb),.07);border:1px solid rgba(var(--accent-rgb),.2)}

/* Bloc de maillage local : la phrase était un <span> en style inline au fil du contenu.
   Il devient une mention de pied de page de section, séparée par un filet. */
.geo-block{margin-top:var(--block);border-top:1px solid var(--line);padding-top:1.75rem}
.geo-block .geo-label{display:block;font-size:.8125rem;line-height:1.6;color:var(--ink-55)}
.geo-block .geo-label b{color:var(--ink);font-weight:600}
.geo-block .zone-row{margin-top:.85rem}

/* ---------- bandeau cookies (RGPD) ---------- */
.cookie-banner{position:fixed;inset-inline:0;bottom:0;z-index:205;display:flex;justify-content:center;padding:1.25rem;pointer-events:none}
.cookie-banner[hidden]{display:none}
.cookie-banner-inner{pointer-events:auto;width:100%;max-width:50rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:1.25rem;padding:1.25rem 1.5rem;box-shadow:0 12px 40px rgba(0,0,0,.16);transform:translateY(1.25rem);opacity:0;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .4s}
.cookie-banner.visible .cookie-banner-inner{transform:translateY(0);opacity:1}
.cookie-banner-text{margin:0;flex:1 1 20rem;font-size:.8125rem;line-height:1.55;color:rgba(17,17,17,.7)}
.cookie-banner-text a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cookie-banner-actions{display:flex;gap:.75rem;flex-shrink:0}
.cookie-banner-actions button{cursor:pointer;border-radius:999px;font-size:.8125rem;font-weight:600;padding:.625rem 1.375rem;font-family:inherit;transition:transform .25s,background .25s}
.cookie-banner-actions button:hover{transform:scale(1.04)}
.cookie-decline{background:transparent;border:1px solid var(--line);color:var(--ink)}
.cookie-decline:hover{background:var(--sand)}
.cookie-accept{background:var(--black);border:1px solid var(--black);color:#fff}
@media (max-width:640px){.cookie-banner{padding:.85rem}.cookie-banner-inner{flex-direction:column;align-items:stretch}.cookie-banner-actions{justify-content:flex-end}}

/* ---------- sous-navigation des pages légales (mentions / confidentialité / CGV) ---------- */
.legal-subnav{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.legal-subnav a{font-size:.8125rem;font-weight:500;padding:.5rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.7);transition:background .2s,color .2s,border-color .2s}
.legal-subnav a:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.legal-subnav a.current{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- repère tarifaire (pages prestation) ---------- */
/* c'était un paragraphe gris nu perdu entre deux blocs : il devient une carte sobre,
   lisible d'un coup d'œil, sans en faire une grille tarifaire (les prix ne sont pas fermes) */
.price-note{display:flex;gap:1.1rem;align-items:flex-start;max-width:40rem;margin-top:1.25rem;border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:0 1.25rem 1.25rem 0;background:var(--sand);padding:1.5rem 1.75rem}
.price-note .ic{width:2rem;height:2rem;flex-shrink:0;display:grid;place-items:center;border-radius:999px;background:rgba(var(--accent-rgb),.12);color:var(--accent-text)}
.price-note .ic svg{width:15px;height:15px}
.price-note p{margin:0;font-size:.9375rem;line-height:1.75;color:var(--ink-68)}

/* ---------- bandeau contact (hubs particuliers / entreprises) ---------- */
.contact-band{position:relative;overflow:hidden;border-radius:1.75rem;background:var(--black);color:#fff;padding:clamp(2.25rem,4.5vw,3.5rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2.5rem}
.contact-band::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse 55% 95% at 8% -8%,rgba(var(--accent-rgb),.7) 0%,rgba(var(--accent-rgb),.32) 34%,transparent 66%),
  radial-gradient(ellipse 75% 130% at 102% 118%,rgba(var(--accent-rgb),.22),transparent 68%)}
.contact-band::after{content:"";position:absolute;inset-inline:0;top:0;height:1px;background:linear-gradient(90deg,var(--accent-light),transparent 60%)}
.contact-band>*{position:relative;z-index:1}
.contact-band-copy{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.contact-band-copy .eyebrow{color:rgba(255,255,255,.62)}
.contact-band-copy .eyebrow .dot{background:currentColor}
.contact-band-copy .rule{width:2.75rem;height:1px;background:#fff;opacity:.3}
.contact-band-copy h2{font-size:clamp(1.5rem,3vw,2.125rem);letter-spacing:-0.02em;max-width:20ch}
.contact-band-copy p{margin:0;font-size:.9375rem;line-height:1.7;color:rgba(255,255,255,.6);max-width:38ch}
.contact-band-actions{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.contact-band-actions .line{display:flex;align-items:center;gap:.7rem;font-size:.9375rem;color:rgba(255,255,255,.75);transition:color .2s}
.contact-band-actions .line:hover{color:#fff}
.contact-band-actions .line svg{color:var(--accent-light);flex-shrink:0}

/* ---------- barre de filtres (réalisations) ---------- */
.filter-bar{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}

/* ---------- finitions transverses ---------- */
.universe-subnav a{padding-block:1.625rem}
.universe-subnav a .arrow{background:var(--accent)}
.pillar-card .ico{background:var(--accent)}
.pillar-card{gap:1.1rem;padding:2.5rem 2rem}
.pillar-card h3{font-size:1.125rem}
.pillar-card p{line-height:1.7;color:var(--ink-68)}
.solution-card{border-radius:1.75rem}
.solution-card h3{font-size:1.25rem;line-height:1.3}
.card{border-radius:1.5rem}
.value-chip{transition:border-color .25s,background .25s,color .25s}
.value-chip:hover{border-color:var(--accent);color:var(--ink);background:var(--sand)}
.distinguish-list .ico{background:var(--accent)}
.contact-form-card{border-radius:1.75rem}
.blog-card{border-radius:1.75rem;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.blog-card:hover{box-shadow:0 26px 48px -30px rgba(17,17,17,.45)}
.blog-card .thumb{height:12rem;overflow:hidden}
.blog-card .thumb img{transition:transform .6s var(--ease)}
.blog-card:hover .thumb img{transform:scale(1.05)}
.blog-card h3{font-size:1.125rem;line-height:1.35}
.blog-card .read{color:var(--accent-text)}
/* corps réduit pour éviter les lignes trop longues, mais largeur proche de l'originale
   pour que le paragraphe continue à occuper l'espace de la section, pas une simple colonne */
.vision-lede{max-width:74rem;margin-inline:auto;text-align:center;font-size:clamp(1.625rem,3.6vw,2.875rem);line-height:1.32}
.block-head+p,.block-head+.prose{margin-top:0}
.prose{margin:0;max-width:44rem;font-size:1rem;line-height:1.8;color:var(--ink-68)}
.article-body h2{font-size:clamp(1.25rem,2.4vw,1.625rem);margin:3rem 0 1rem}
.article-body p:first-of-type{font-size:1.0625rem;color:var(--ink-80)}
/* ancres : la barre collante ne doit pas masquer la cible d'un lien interne */
:target{scroll-margin-top:7rem}

/* ---------- toggle "Vous êtes" (formulaire de contact) ---------- */
.audience-toggle{display:flex;gap:.25rem;margin-bottom:.5rem;padding:.25rem;background:var(--sand);border-radius:999px}
.audience-toggle label{flex:1;position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;border-radius:999px;padding:.625rem 1rem;font-size:.8125rem;font-weight:500;color:var(--ink-68);cursor:pointer;transition:color .25s var(--ease)}
.audience-toggle label svg{flex-shrink:0;opacity:.7;transition:opacity .25s var(--ease)}
.audience-toggle input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.audience-toggle label:has(input:checked){color:#fff;font-weight:600;background:var(--ink);box-shadow:0 6px 16px -6px rgba(17,17,17,.4)}
.audience-toggle label:has(input:checked) svg{opacity:1;color:#fff}
.audience-toggle label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}

/* ---------- vitrine Particuliers : tableau des prestations sous le hero mosaïque ---------- */
.particuliers-showcase{padding:5rem 0}
.particuliers-showcase .showcase-inner{width:100%}
.showcase-head{max-width:38rem;margin-inline:auto;text-align:center}
.showcase-head .eyebrow{justify-content:center}
.showcase-head h2{margin-top:1rem;font-size:clamp(1.5rem,3vw,2.25rem);font-weight:600;letter-spacing:-0.02em}
.showcase-head p{margin-top:.85rem;font-size:.9375rem;line-height:1.7;color:var(--ink-68)}

/* ---------- hero mosaïque plein écran (page Particuliers) — grille en croix 6×4,
   7 cases photo + 2 blocs texte, 4 coins volontairement vides. Photos désaturées,
   couleur au survol. Adapté du prototype prototypes/hero-particuliers/. ---------- */
.hero-mosaic{
  position:relative;
  width:100%;
  height:calc(100vh - 142px); /* 100vh moins le header empilé (nav centrée masquée, <1024px) */
  padding:.75rem;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(4,1fr);
  grid-template-areas:
    ".  a  a  b  b  ."
    "c  a  a t1 t1  e"
    "c  d  f t2 t2  e"
    ".  d  f  g  g  .";
  gap:.75rem;
  background:var(--sand);
}
.hero-mosaic::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-mosaic__cell{position:relative;display:block;width:100%;height:100%;overflow:hidden;z-index:1;background:var(--line);border:0;padding:0;margin:0;font:inherit;text-align:inherit}
button.hero-mosaic__cell{cursor:zoom-in}
.hero-mosaic__cell--a{grid-area:a}
.hero-mosaic__cell--b{grid-area:b}
.hero-mosaic__cell--c{grid-area:c}
.hero-mosaic__cell--d{grid-area:d}
.hero-mosaic__cell--e{grid-area:e}
.hero-mosaic__cell--f{grid-area:f}
.hero-mosaic__cell--g{grid-area:g}
.hero-mosaic__img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(100%) contrast(1.05);transition:filter .6s ease,transform .6s var(--ease)}
.hero-mosaic__cell:hover .hero-mosaic__img{filter:grayscale(0%) contrast(1.05);transform:scale(1.03)}
.hero-mosaic__cell--d .hero-mosaic__img,.hero-mosaic__cell--e .hero-mosaic__img{filter:none}
.hero-mosaic__cell--b .hero-mosaic__img,.hero-mosaic__cell--f .hero-mosaic__img{filter:grayscale(100%) contrast(1.05) brightness(0.78)}
.hero-mosaic__caption{position:absolute;left:0;right:0;bottom:0;padding:1.1rem;font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,rgba(10,10,10,0) 55%,rgba(10,10,10,.72) 100%)}
.hero-mosaic__text{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:1.5rem}
.hero-mosaic__text--t1{grid-area:t1}
.hero-mosaic__text--t2{grid-area:t2}
.hero-mosaic__text h1{margin-top:.85rem;font-family:'Playfair Display',serif;font-weight:300;font-size:clamp(1.5rem,2.3vw,2.25rem);line-height:1.2;color:var(--ink)}
.hero-mosaic__text--t2 p{margin:0 0 1.25rem;font-size:.9375rem;line-height:1.65;color:var(--ink-68);max-width:30ch}
.hero-mosaic__text--t2 .cta{align-self:flex-start;background:var(--accent)}
.cta{display:inline-block;background:var(--ink);color:#fff;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;padding:.9em 1.6em;transition:opacity .3s}
.cta:hover{opacity:.8;color:#fff}

/* le header empilé affiche sa nav centrée à partir de 1024px, ce qui l'agrandit :
   on ajuste la hauteur soustraite en conséquence pour que hero + header = 100vh pile */
@media (min-width:1024px){
  .hero-mosaic{height:calc(100vh - 189px)}
}
@media (max-width:1199px){
  .hero-mosaic{
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:repeat(5,1fr);
    grid-template-areas:
      ".  a  a  ."
      "c  a  a  e"
      "c t1 t1  e"
      "d t2 t2  f"
      ".  g  g  .";
  }
  .hero-mosaic__cell--b{display:none}
}
@media (max-width:767px){
  .hero-mosaic{
    height:auto;
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:auto;
    grid-template-areas:
      "t1 t1"
      "a  a"
      "t2 t2"
      "c  d"
      "f  g"
      "e  e";
  }
  .hero-mosaic__cell--b{display:none}
  .hero-mosaic__cell--a{aspect-ratio:4/3}
  .hero-mosaic__cell--c,.hero-mosaic__cell--d,.hero-mosaic__cell--f,.hero-mosaic__cell--g{aspect-ratio:1/1}
  .hero-mosaic__cell--e{aspect-ratio:16/9}
  .hero-mosaic__text{padding:1.75rem .5rem}
}
.particuliers-showcase .universe-subnav{max-width:78rem;margin-inline:auto}
/* 9 prestations sur 2 colonnes laisse la dernière seule avec une case vide à côté :
   on l'étire sur toute la largeur plutôt que de laisser un trou. Non nécessaire en
   1 colonne (mobile) ni en 3 colonnes (9÷3 tombe juste). */
@media (min-width:700px) and (max-width:1099px){
  .particuliers-showcase .universe-subnav a:last-child{grid-column:1 / -1}
}
.particuliers-showcase .universe-subnav a{padding:1.75rem 2rem}
@media (min-width:1100px){.particuliers-showcase .universe-subnav a{flex-direction:column;align-items:flex-start;gap:1.25rem}
  .particuliers-showcase .universe-subnav a .arrow{align-self:flex-end}}

/* ---------- pages particuliers : récit en chapitres (avant / jour J), parole signée, formules ---------- */
.story-hero__cities{margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem .75rem;font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.story-hero__cities span{color:var(--accent)}
.story-chapter__head{text-align:center;max-width:40rem;margin:0 auto}
.story-chapter__head h2{font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(2rem,4.5vw,3.25rem);letter-spacing:-0.02em;line-height:1.1}
.story-chapter__head p{margin:.85rem 0 0;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.story-chapter__head .story-chapter__quote{margin-top:1.25rem;font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:1.125rem;letter-spacing:0;text-transform:none;color:var(--ink-68)}
.story-steps{margin-top:clamp(2.5rem,5vw,4rem);display:flex;flex-direction:column;gap:clamp(2.75rem,6vw,5rem)}
.story-step{display:grid;grid-template-columns:1fr;gap:1.75rem;align-items:center}
@media (min-width:860px){
  .story-step{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem)}
  .story-step--flip .story-step__media{order:2}
}
.story-step__media{border-radius:1.5rem;overflow:hidden;aspect-ratio:4/3;background:var(--sand)}
.story-step__media img{width:100%;height:100%;object-fit:cover;display:block}
.story-step__media--empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.85rem;border:1px dashed rgba(var(--accent-rgb),.45);background:linear-gradient(160deg,rgba(var(--accent-rgb),.1),var(--sand) 60%)}
.story-step__media--empty svg{fill:var(--accent);opacity:.55}
.story-step__media--empty span{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45)}
.story-step__num{display:block;font-family:'Playfair Display',serif;font-weight:600;font-size:2.25rem;line-height:1;color:var(--accent)}
.story-step__body h3{margin:.75rem 0 0;font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-0.015em;line-height:1.2}
.story-step__body .story-step__kicker{margin:.4rem 0 0;font-family:'Playfair Display',serif;font-style:italic;font-size:1.0625rem;color:var(--accent-text)}
.story-step__body p{margin:1rem 0 0;max-width:34rem;font-size:.9375rem;line-height:1.75;color:var(--ink-68)}
.story-step__body .btn{margin-top:1.75rem}
.story-mission{margin:0 auto;max-width:52rem;text-align:center;background:var(--sand);border-radius:1.75rem;padding:clamp(2.25rem,5vw,3.75rem) clamp(1.5rem,5vw,4rem)}
.story-mission blockquote{margin:0;font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:clamp(1.125rem,2.2vw,1.4375rem);line-height:1.6;color:var(--ink-80)}
.story-mission figcaption{margin-top:1.5rem;display:flex;flex-direction:column;gap:.2rem;font-size:.8125rem}
.story-mission figcaption b{font-weight:600;color:var(--accent-text)}
.story-mission figcaption span{color:var(--ink-45)}
.story-formulas{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:start}
@media (min-width:980px){.story-formulas{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.story-formula{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:1.75rem;padding:2.25rem 2rem;background:#fff;overflow:hidden}
.story-formula__badge{align-self:flex-start;margin-bottom:1rem;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:#111;border-radius:999px;padding:.35rem .8rem}
.story-formula__price{margin:0;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.story-formula h3{margin:.6rem 0 0;font-family:'Playfair Display',serif;font-weight:600;font-size:1.625rem;letter-spacing:-0.01em}
.story-formula__coverage{margin:.5rem 0 0;font-size:.875rem;line-height:1.6;color:var(--ink-68)}
.story-formula__label{margin:1.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-55)}
.story-formula ul{margin-top:.85rem;display:flex;flex-direction:column;gap:.6rem}
.story-formula li{display:flex;align-items:flex-start;gap:.6rem;font-size:.875rem;line-height:1.45;color:var(--ink-80)}
.story-formula li svg{flex-shrink:0;margin-top:.1rem;width:16px;height:16px;color:var(--accent-text)}
.story-formula ul.is-options li{color:var(--ink-55)}
.story-formula .btn{margin-top:auto;align-self:flex-start}
.story-formula ul:last-of-type{margin-bottom:2rem}
/* formule mise en avant : teinte pâle de l'accent de l'univers, sans noir */
.story-formula--featured{background:rgba(var(--accent-rgb),.14);border-color:rgba(var(--accent-rgb),.4);color:var(--accent-text)}
.story-formula--featured>*{position:relative}
.story-formula--featured .story-formula__badge{background:rgba(var(--accent-rgb),.28);color:var(--accent-text)}
.story-formula--featured h3{color:var(--ink)}
.story-formula--featured .story-formula__price,.story-formula--featured li svg{color:var(--accent-text)}
.story-formula--featured .story-formula__coverage,.story-formula--featured li{color:var(--ink-80)}
.story-formula--featured .story-formula__label{color:var(--accent-text);border-top-color:rgba(var(--accent-rgb),.3)}
.story-formula--featured .btn{background:var(--accent-text);color:#fff}
.story-formula--featured .btn .go{background:#fff;color:var(--accent-text)}
.story-formula--featured .btn:hover{box-shadow:0 14px 28px -14px rgba(var(--accent-rgb),.9)}

/* ---------- hero des pages particuliers : photo lumineuse ----------
   Pas de voile sur toute l'image : une ombre douce seulement dans le coin bas-gauche,
   sous le texte. La photo est reprise dans ::after (background: inherit) pour pouvoir
   la raviver légèrement sans toucher au texte. */
.story-hero::before{z-index:1;background:radial-gradient(ellipse 75% 115% at 0% 100%,rgba(10,10,10,.6) 0%,rgba(10,10,10,.28) 50%,rgba(10,10,10,0) 78%)}
.story-hero::after{z-index:0;box-shadow:none;background:inherit;filter:saturate(1.12) contrast(1.04)}
.story-hero .inner{text-shadow:0 2px 20px rgba(0,0,0,.45)}

/* ---------- frise des pages particuliers : trait qui se remplit au défilement ----------
   Le trait (.story-line) court du premier au dernier point (--line-start / --line-end
   posés par main.js) ; son remplissage suit le défilement. Chaque point s'allume quand
   le trait l'atteint (.is-reached). Ordinateur : trait au centre, entre photo et texte.
   Mobile : trait à gauche, points face au numéro de chaque étape. */
.story-steps{position:relative;--line-start:0px;--line-end:0px}
.story-line{position:absolute;top:var(--line-start);bottom:var(--line-end);left:.6875rem;width:2px;margin-left:-1px;border-radius:2px;background:rgba(var(--accent-rgb),.18);pointer-events:none}
.story-line__fill{position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform:scaleY(0);transform-origin:top;will-change:transform}
.story-step{position:relative;padding-left:2.5rem}
.story-step__dot{position:absolute;z-index:1;left:.6875rem;top:0;width:1rem;height:1rem;margin-left:-.5rem;border-radius:999px;background:#fff;border:2px solid rgba(var(--accent-rgb),.35);transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.story-step.is-reached .story-step__dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px rgba(var(--accent-rgb),.16);transform:scale(1.1)}
.story-step__num{transition:opacity .4s var(--ease)}
.story-step:not(.is-reached) .story-step__num{opacity:.4}
@media (max-width:859px){
  /* photo, puis point dans la marge gauche, aligné sur le numéro de l'étape */
  .story-step{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .story-step__dot{position:relative;left:auto;align-self:flex-start;margin:calc(1.75rem + .625rem) 0 0 -2.3125rem}
  .story-step__media{order:0}
  .story-step__dot{order:1}
  .story-step__body{order:2;margin-top:-1.625rem}
}
@media (min-width:860px){
  .story-line{left:50%}
  .story-step{padding-left:0;column-gap:clamp(4rem,8vw,7rem)}
  .story-step__dot{left:50%;top:50%;margin-top:-.5rem}
}
@media (prefers-reduced-motion:reduce){.story-line__fill,.story-step__dot{transition:none}}

/* ---------- fins de frise : jalon « Nous sommes prêts ! » et parole signée ----------
   Le trait s'arrête sur leur point [data-tl-point] ; une fois atteints (.is-reached),
   le jalon se remplit et le cadre de la citation prend la couleur du trait. */
.story-end{position:relative;display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.story-end__dot{position:relative;z-index:1;width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:999px;background:#fff;border:2px solid rgba(var(--accent-rgb),.35);color:transparent;transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease)}
.story-end__dot svg{width:18px;height:18px}
.story-end__label{margin:0;font-family:'Playfair Display',serif;font-style:italic;font-weight:600;font-size:clamp(1.375rem,2.6vw,1.75rem);color:var(--ink-45);transition:color .45s var(--ease)}
.story-end.is-reached .story-end__dot{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 8px rgba(var(--accent-rgb),.16)}
.story-end.is-reached .story-end__label{color:var(--accent-text)}
.story-mission{position:relative;border:2px solid rgba(var(--accent-rgb),.2);transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}
.story-mission.is-reached{border-color:var(--accent);box-shadow:0 18px 40px -26px rgba(var(--accent-rgb),.7)}
.story-mission__anchor{position:absolute;top:-2px;left:50%;width:0;height:0}
@media (max-width:859px){
  /* mobile : jalon dans la marge gauche, face à son libellé ; le trait entre dans le
     cadre de la citation par son coin supérieur gauche */
  .story-end{flex-direction:row;align-items:center;gap:1rem;padding-left:2.5rem;text-align:left}
  .story-end__dot{position:absolute;left:.6875rem;top:50%;width:2rem;height:2rem;margin:-1rem 0 0 -1rem}
  .story-end__dot svg{width:15px;height:15px}
  .story-mission{border-top-left-radius:0}
  .story-mission__anchor{left:.6875rem}
}

/* ---------- bandeau photo pleine largeur entre « avant » et « jour J » ---------- */
.story-band{padding:0}
.story-band__frame{position:relative;margin:0;height:clamp(11rem,20vw,16rem);overflow:hidden;background-color:var(--black);background-size:cover;background-position:center;display:grid;place-items:center}
.story-band__frame::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 45% 90% at 50% 50%,rgba(10,10,10,.38),rgba(10,10,10,.08) 75%)}
.story-band__frame figcaption{position:relative;padding:0 1.5rem;text-align:center;font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:clamp(1.375rem,3vw,2.25rem);line-height:1.25;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45)}

/* ---------- cadres « photo à venir » (pages particuliers, en attendant les photos officielles) ---------- */
/* haut de page : fond sombre teinté de l'accent, étoile en filigrane à droite */
.story-hero--empty{background:radial-gradient(ellipse 70% 90% at 85% 30%,rgba(var(--accent-rgb),.38),transparent 70%),linear-gradient(160deg,#1c1714,var(--black))}
.story-hero--empty::before,.story-hero--empty::after{display:none}
.story-hero__placeholder{position:absolute;z-index:1;right:clamp(1.5rem,8vw,9rem);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:1rem;pointer-events:none}
.story-hero__placeholder svg{width:clamp(5rem,12vw,9rem);height:auto;fill:var(--accent);opacity:.5}
.story-hero__placeholder span{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}
@media (max-width:759px){.story-hero__placeholder{top:2rem;right:1.25rem;transform:none}.story-hero__placeholder svg{width:3.5rem}}
/* bandeau : même langage que les cadres des étapes (sable teinté, pointillés) */
.story-band__frame--empty{background:linear-gradient(160deg,rgba(var(--accent-rgb),.14),var(--sand) 65%);border-block:1px dashed rgba(var(--accent-rgb),.45);gap:.5rem;align-content:center}
.story-band__frame--empty::before{display:none}
.story-band__frame--empty svg{width:2.75rem;height:auto;fill:var(--accent);opacity:.55}
.story-band__frame--empty figcaption{display:flex;flex-direction:column;align-items:center;gap:.6rem;color:var(--accent-text);text-shadow:none}
.story-band__frame--empty figcaption span{font-family:'Montserrat',sans-serif;font-style:normal;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45)}