/* =====================================================================
   La Brig'ads — feuille de style
   Charte : marine #1E3A5C · jaune #F0B429 · gris #8D9AA5
   Typo   : Bricolage Grotesque (titres) · Instrument Sans (texte)
   Direction « Le Passe » : tout arrive en cascade, le jaune est un
   signal de service, le marine est la matière.
   Pour re-thémer : ne toucher qu'aux variables :root.
   ===================================================================== */

/* ---- Fontes auto-hébergées (dossier fonts/, sous-ensemble latin) ---- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/bricolage-grotesque-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/instrument-sans-var.woff2') format('woff2');
}

:root {
  --marine:        #1E3A5C;
  --marine-fonce:  #16293F;
  --marine-nuit:   #0F1D2E;
  --jaune:         #F0B429;
  --jaune-fonce:   #d69c17;
  --gris:          #8D9AA5;   /* réservé aux méta ; le texte courant utilise --gris-texte */
  --gris-texte:    #5E6E7A;   /* baseline du logo, AA sur blanc */
  --gris-clair:    #C7CFD6;
  --fond:          #FFFFFF;
  --fond-doux:     #F5F7F9;
  --bord:          #E4E9ED;
  --texte:         #1B2733;

  --degrade-marine:
    radial-gradient(900px 420px at 82% -6%, rgba(240,180,41,.14), transparent 60%),
    linear-gradient(165deg, var(--marine) 0%, var(--marine-fonce) 55%, var(--marine-nuit) 100%);

  --ombre:       0 1px 2px rgba(30,58,92,.05), 0 6px 16px rgba(30,58,92,.06), 0 16px 40px rgba(30,58,92,.05);
  --ombre-haute: 0 2px 6px rgba(30,58,92,.08), 0 14px 32px rgba(30,58,92,.10), 0 30px 64px rgba(30,58,92,.08);
  --rayon: 14px;
  --rayon-petit: 9px;

  --acier:      #6EA3C1;   /* bleu acier intermédiaire — détails, jamais en aplat */

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-masse: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-tap: 150ms;
  --dur-ui: 200ms;
  --dur-panneau: 250ms;
  --dur-reveal: 600ms;
}

/* ---- Changement de page : l'ancienne s'efface, la nouvelle monte en place ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-sortie .25s cubic-bezier(0.32, 0.72, 0, 1) both; }
  ::view-transition-new(root) { animation: vt-entree .45s cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@keyframes vt-sortie { to { opacity: 0; transform: translateY(-14px); } }
@keyframes vt-entree { from { opacity: 0; transform: translateY(18px); } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  font-family: 'Instrument Sans', -apple-system, system-ui, sans-serif;
  color: var(--texte);
  background: var(--fond);
  line-height: 1.65;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--marine);
  text-wrap: balance;
}
p { max-width: 65ch; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
::selection { background: var(--jaune); color: var(--marine); }
/* Anneau bicolore : le jaune se voit sur marine, le liseré marine sur fond clair */
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; box-shadow: 0 0 0 2px var(--marine); border-radius: 3px; }

.conteneur { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px); }
section { padding: clamp(60px, 8vw, 100px) 0; }

/* Ascenseur discret, dans la charte */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--fond-doux); }
::-webkit-scrollbar-thumb { background: var(--gris-clair); border-radius: 8px; border: 3px solid var(--fond-doux); }
::-webkit-scrollbar-thumb:hover { background: var(--gris); }
.centre { text-align: center; }
.centre p { margin-left: auto; margin-right: auto; }
.section-douce { background: var(--fond-doux); }

/* ---- Icônes SVG inline ---- */
.ico { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ---- Apparitions au scroll (« le passe » : tout arrive en cascade) ----
   Gaté sur html.js : sans JavaScript, tout est visible d'office. */
html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.js .reveal.visible { opacity: 1; transform: none; }
html.js .reveal-gauche { transform: translateX(-24px); }
html.js .reveal-droite { transform: translateX(24px); }
html.js .reveal-gauche.visible, html.js .reveal-droite.visible { transform: none; }

/* ---- Boutons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; border: none;
  padding: 15px 30px;
  font-size: 1rem; font-family: inherit; font-weight: 600;
  border-radius: var(--rayon-petit);
  transition: transform var(--dur-tap) var(--ease-out), background var(--dur-ui) ease, box-shadow var(--dur-ui) ease, color var(--dur-ui) ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(0.98); transition-duration: .05s; }
/* Biseau lumineux en haut : le bouton attrape la lumière */
.btn-jaune { background: var(--jaune); color: var(--marine); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 10px rgba(240,180,41,.35), 0 12px 28px rgba(240,180,41,.22); }
.btn-jaune:hover { background: var(--jaune-fonce); }
.btn-marine { background: var(--marine); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 3px 10px rgba(30,58,92,.25), 0 12px 28px rgba(30,58,92,.18); }
.btn-marine:hover { background: var(--marine-fonce); }
/* Flèche qui glisse vers l'avant */
.btn .fleche { display: inline-block; transition: transform var(--dur-ui) var(--ease-out); }
.btn:hover .fleche { transform: translateX(4px); }
.btn-contour { background: transparent; border: 1.5px solid var(--bord); color: var(--marine); }
.btn-contour:hover { border-color: var(--marine); background: var(--fond-doux); }
.btn-contour-clair { background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.55); color: #fff; }
.btn-contour-clair:hover { background: rgba(255,255,255,.14); }
.btn-large { width: 100%; justify-content: center; }

/* ---- En-tête ---- */
header.site {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--bord);
  transition: box-shadow var(--dur-ui) ease;
}
header.site.scrolled { box-shadow: 0 6px 24px rgba(30,58,92,.08); }
header.site nav {
  max-width: 1120px; margin: 0 auto; padding: 12px clamp(20px, 4vw, 32px);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.logo img { height: 54px; width: auto; }
/* Logo inliné : un SVG en <img> ne charge jamais les fontes externes,
   le wordmark tombait en Arial. Inline, Bricolage s'applique vraiment. */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo .logo-pique { height: 46px; width: auto; flex-shrink: 0; }
.logo .logo-texte {
  display: block; white-space: nowrap;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: 1.3rem; letter-spacing: .015em; color: var(--marine); line-height: 1;
}
.logo .logo-texte em { font-style: normal; color: var(--jaune); }
.logo .logo-texte small {
  display: block; margin-top: 4px;
  font-family: 'Instrument Sans', sans-serif; font-size: .56rem; font-weight: 600;
  letter-spacing: .3em; color: var(--gris-texte); text-transform: uppercase;
}
.logo .logo-boule { transform-box: fill-box; transform-origin: center; }
.logo:hover .logo-boule { animation: e-pop .4s var(--ease-out); }
/* Gap 22→16 px le 13/08/2026 : à 7 entrées, les libellés cassaient sur deux
   lignes. Sous 1141 px, la règle gap: 0 du bloc burger reprend la main. */
.menu-nav { display: flex; align-items: center; gap: 16px; list-style: none; }
/* Le :not(.btn) est indispensable : sans lui, cette règle est plus lourde que
   .btn-marine et repeint le bouton « Parlons-en » (ex-« Prendre contact »)
   en bleu nuit sur bleu marine — le texte devient invisible (contraste 1,3:1). */
.menu-nav a:not(.btn) { font-size: .95rem; font-weight: 500; color: var(--texte); transition: color var(--dur-ui); display: inline-flex; align-items: center; gap: 6px; position: relative; }
.menu-nav a:not(.btn):hover { color: var(--marine); }
/* Souligné qui se déploie de gauche à droite */
.menu-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px;
  background: var(--jaune); border-radius: 2px;
  transition: right var(--dur-ui) var(--ease-out);
}
.menu-nav a:not(.btn):hover::after { right: 0; }
.menu-nav a:not(.btn) .ico { width: 15px; height: 15px; }
.menu-nav .btn { padding: 10px 20px; font-size: .9rem; }

/* Burger : trois barres qui se croisent à l'ouverture */
.burger { display: none; background: none; border: none; cursor: pointer; width: 40px; height: 40px; position: relative; }
.burger span {
  position: absolute; left: 9px; width: 22px; height: 2px; border-radius: 2px;
  background: var(--marine); transition: transform var(--dur-panneau) var(--ease-masse), opacity var(--dur-ui) ease;
}
.burger span:nth-child(1) { top: 13px; }
.burger span:nth-child(2) { top: 19px; }
.burger span:nth-child(3) { top: 25px; }
.burger.ouvert span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.ouvert span:nth-child(2) { opacity: 0; }
.burger.ouvert span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Seuil relevé de 1020 à 1140 le 13/08/2026 : à 7 entrées, la barre était
   comprimée entre 1021 et 1140 px et les libellés se cassaient sur deux
   lignes (« Modules & / tarifs », « Parlons- / en »). Sous 1141 px : burger. */
@media (max-width: 1140px) {
  .burger { display: block; }
  .menu-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--bord); box-shadow: var(--ombre);
    max-height: 0; overflow: hidden; transition: max-height var(--dur-panneau) var(--ease-masse);
  }
  /* Le menu est passé à 7 entrées : 460 px tronquaient la dernière sans
     prévenir. 70 vh + défilement interne encaissent les ajouts futurs. */
  .menu-nav.ouvert { max-height: 70vh; overflow-y: auto; }
  /* display:flex : sans lui, le inline-flex de base rétracte chaque lien à la
     largeur de son texte — la moitié droite de la ligne n'était pas cliquable
     et les filets s'arrêtaient en dents de scie (constat du 13/08/2026). */
  .menu-nav a:not(.btn) { display: flex; padding: 15px 24px; border-top: 1px solid var(--bord); }
  .menu-nav .btn { margin: 14px 24px; justify-content: center; }
}

/* =====================================================================
   PAGE « L'ATELIER » (atelier.html)
   Catalogue pilote classé par bénéfice. Les cartes ne sont pas des fiches
   d'achat : chaque statut dit ce qui doit encore être validé.
   ===================================================================== */

.hero.atelier-hero .accroche { max-width: 42em; }
.atelier-avertissement { max-width: 900px; margin: 0 auto clamp(44px, 6vw, 70px); }

.atelier-demos .titre-section { margin-bottom: 26px; }
.atelier-demo-legende {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 12px 24px; margin: 0 auto 34px; color: var(--gris-texte); font-size: .9rem;
}
.atelier-demo-legende > span { display: inline-flex; align-items: center; gap: 8px; }
.atelier-demo-legende strong { color: var(--marine); }
.point-statut, .point-demo {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px;
  box-shadow: 0 0 0 4px rgba(30,58,92,.08);
}
.point-statut { background: var(--marine); }
.point-demo { background: var(--jaune); box-shadow: 0 0 0 4px rgba(240,180,41,.16); }
.atelier-demos .brique:first-of-type { border-top: 1px solid var(--bord); padding-top: clamp(30px, 4.5vw, 54px); }
.atelier-demos .brique-media { position: relative; isolation: isolate; }
.atelier-demos .brique-media::after {
  content: "DÉMONSTRATION"; position: absolute; right: 13px; bottom: 13px; z-index: 2;
  padding: 5px 9px; border-radius: 999px; background: rgba(15,29,46,.86); color: #fff;
  font-size: .62rem; font-weight: 800; letter-spacing: .09em; line-height: 1; pointer-events: none;
}
.source-produit {
  margin-top: 13px; color: var(--gris-texte); font-size: .82rem; line-height: 1.55;
}
.source-produit a, .table-prix-atelier a {
  color: var(--marine); font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(30,58,92,.35);
}
.source-produit a:hover, .table-prix-atelier a:hover { text-decoration-color: var(--jaune-fonce); }

.atelier-parcours {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.atelier-etape {
  border-top: 3px solid var(--jaune); padding: 20px 18px 0;
}
.atelier-etape > span {
  display: block; margin-bottom: 12px;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: 1.8rem; line-height: 1; color: var(--marine);
}
.atelier-etape h3 { font-size: 1.08rem; margin-bottom: 8px; }
.atelier-etape p { color: var(--gris-texte); font-size: .93rem; }

.atelier-famille { overflow: hidden; }
.atelier-titre {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 4vw, 38px); align-items: start;
  margin-bottom: clamp(32px, 5vw, 52px);
}
.atelier-numero {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: clamp(3rem, 8vw, 5.4rem); line-height: .85; color: var(--jaune);
}
.atelier-titre .sur-titre {
  display: inline-block; margin-bottom: 9px;
  font-size: .76rem; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--gris-texte);
}
.atelier-titre h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.atelier-titre p { color: var(--gris-texte); margin-top: 12px; }

.atelier-grille {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px;
}
.atelier-grille.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.produit-carte {
  display: flex; flex-direction: column;
  min-width: 0; padding: clamp(24px, 3.5vw, 32px);
  background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
  box-shadow: var(--ombre);
  transition: transform .25s var(--ease-out), box-shadow .25s ease, border-color .25s ease;
}
.produit-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-haute); border-color: rgba(240,180,41,.7); }
.produit-carte.produit-large { grid-column: 1 / -1; }
.produit-entete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 17px;
}
.produit-entete .etiquette { position: static; display: inline-block; }
.etiquette.echantillon { background: #FFF4DA; color: #7A5500; }
.etiquette.pilote { background: #E5F0F7; color: #245978; }
.etiquette.etude { background: #EDF1F4; color: #5E6E7A; }
.produit-cible {
  color: var(--gris-texte); font-size: .75rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
}
.produit-carte h3 { font-size: 1.3rem; margin-bottom: 10px; }
.produit-carte > p { color: var(--gris-texte); font-size: .96rem; }
.produit-carte .points { margin-top: 14px; }
.produit-carte .points li { font-size: .92rem; }
.produit-carte .produit-lien,
.produit-carte .produit-resultat {
  max-width: none; margin-top: auto; padding-top: 17px;
  color: var(--texte); font-size: .9rem;
}
.produit-carte .produit-lien { border-top: 1px solid var(--bord); margin-top: auto; }
.produit-carte .produit-resultat {
  margin-top: auto; padding: 14px 16px;
  border-left: 3px solid var(--jaune); border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
  background: var(--fond-doux);
}

.atelier-garde-fou {
  margin-top: 24px; padding: 18px 22px;
  border: 1px solid rgba(30,58,92,.18); border-radius: var(--rayon-petit);
  background: rgba(30,58,92,.06); color: var(--texte);
}
.atelier-garde-fou strong { color: var(--marine); }

.atelier-chiffres { background: var(--fond); }
.atelier-prix-alerte {
  max-width: 930px; margin: 0 auto 28px; padding: 18px 22px;
  border: 1px solid rgba(240,180,41,.55); border-radius: var(--rayon-petit);
  background: #FFF8E8; color: #5D4816;
  box-shadow: 0 1px 2px rgba(30,58,92,.04), 0 8px 22px rgba(30,58,92,.05);
}
.atelier-prix-alerte strong { color: var(--marine); }
.table-prix-wrap {
  overflow-x: auto; margin-top: 26px; border-radius: var(--rayon);
  border: 1px solid var(--bord); box-shadow: var(--ombre); background: #fff;
  scrollbar-color: var(--gris-clair) var(--fond-doux);
}
.table-prix-wrap:focus-visible { outline-offset: 5px; }
.table-prix-atelier {
  width: 100%; min-width: 960px; border-collapse: collapse; font-size: .88rem;
  font-variant-numeric: tabular-nums;
}
.table-prix-atelier caption {
  padding: 18px 20px; text-align: left; color: var(--marine);
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.06rem; font-weight: 750;
}
.table-prix-atelier th, .table-prix-atelier td {
  padding: 15px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--bord);
}
.table-prix-atelier thead th {
  background: var(--marine); color: #fff; border-top: 0;
  font-size: .72rem; letter-spacing: .045em; text-transform: uppercase;
}
.table-prix-atelier tbody th { width: 19%; color: var(--marine); font-weight: 750; }
.table-prix-atelier tbody tr:nth-child(even) { background: var(--fond-doux); }
.table-prix-atelier tbody tr:hover { background: #FFF8E8; }
.table-prix-atelier td:nth-child(3),
.table-prix-atelier td:nth-child(4),
.table-prix-atelier td:nth-child(5) { white-space: nowrap; }

.atelier-prix-personnalises {
  margin-top: 32px; padding: clamp(24px, 4vw, 36px); border-radius: var(--rayon);
  background: var(--marine-nuit); color: #fff; box-shadow: var(--ombre-haute);
}
.atelier-prix-personnalises h3 { color: #fff; font-size: clamp(1.3rem, 3vw, 1.7rem); }
.atelier-prix-personnalises > p { color: var(--gris-clair); margin-top: 8px; }
.atelier-prix-personnalises dl {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 34px; margin-top: 24px;
}
.atelier-prix-personnalises dl > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px;
  align-items: baseline; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.14);
}
.atelier-prix-personnalises dt { font-weight: 700; }
.atelier-prix-personnalises dd { text-align: right; font-variant-numeric: tabular-nums; }
.atelier-prix-personnalises dd strong { color: var(--jaune); }
.atelier-prix-personnalises dd span { display: block; color: var(--gris-clair); font-size: .78rem; }
.atelier-dossier-prive {
  max-width: 80ch; margin: 24px auto 0; text-align: center; color: var(--gris-texte); font-size: .88rem;
}

.gammes-maison {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
.gamme-maison {
  padding: 26px 24px; border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--rayon); background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.gamme-maison > span {
  display: inline-block; margin-bottom: 14px; padding: 4px 10px;
  border-radius: 999px; background: var(--jaune); color: var(--marine);
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.gamme-maison h3 { color: #fff; font-size: 1.2rem; margin-bottom: 9px; }
.gamme-maison p { color: var(--gris-clair); font-size: .92rem; }

.regle-prix {
  max-width: 760px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(18px, 4vw, 36px);
  align-items: center; padding: clamp(24px, 5vw, 42px);
  border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre);
  background: #fff; text-align: center;
}
.regle-prix > div { display: grid; gap: 4px; }
.regle-prix span { color: var(--gris-texte); font-weight: 700; }
.regle-prix strong {
  font-family: 'Bricolage Grotesque', sans-serif; color: var(--marine);
  font-size: clamp(1.8rem, 5vw, 2.7rem); font-variant-numeric: tabular-nums;
}
.regle-prix small { color: var(--gris-texte); }
.regle-prix .public {
  background: var(--marine); border-radius: var(--rayon-petit); padding: 22px 16px;
}
.regle-prix .public span, .regle-prix .public small { color: var(--gris-clair); }
.regle-prix .public strong { color: var(--jaune); }
.regle-operateur {
  color: var(--marine) !important; font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.35rem; white-space: nowrap;
}

.atelier-formulaire { max-width: 820px; margin: 0 auto; }
.selection-produits {
  border: 1px solid var(--bord); border-radius: var(--rayon-petit);
  padding: 18px 20px; background: var(--fond-doux);
}
.selection-produits legend {
  padding: 0 8px; font-family: 'Bricolage Grotesque', sans-serif;
  font-size: .9rem; font-weight: 700; color: var(--marine);
}
.selection-produits label {
  display: flex; align-items: flex-start; gap: 10px; padding: 7px 0;
  font-size: .94rem; font-weight: 500; cursor: pointer;
}
.form-contact .selection-produits input[type="checkbox"] {
  width: 19px; height: 19px; flex: 0 0 19px; margin-top: 2px;
  padding: 0; border: 0; border-radius: 3px; background: transparent;
  accent-color: var(--marine); box-shadow: none;
}
.atelier-formulaire .note-grille a { color: var(--marine); text-decoration: underline; text-underline-offset: 3px; }
.atelier-formulaire button:disabled { opacity: .65; cursor: wait; transform: none; }

@media (max-width: 920px) {
  .atelier-parcours, .gammes-maison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atelier-grille.trois { grid-template-columns: 1fr; }
  .atelier-prix-personnalises dl { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .atelier-titre { grid-template-columns: 1fr; gap: 10px; }
  .atelier-numero { font-size: 3rem; }
  .atelier-grille, .atelier-parcours, .gammes-maison { grid-template-columns: 1fr; }
  .regle-prix { grid-template-columns: 1fr; }
  .regle-operateur { transform: rotate(90deg); }
  .atelier-demo-legende { justify-content: flex-start; }
  .atelier-prix-personnalises dl > div { grid-template-columns: 1fr; gap: 4px; }
  .atelier-prix-personnalises dd { text-align: left; }
}

/* ---- Hero ---- */
.hero {
  background: var(--degrade-marine);
  color: #fff;
  padding: clamp(56px, 8vw, 96px) 0 clamp(64px, 9vw, 104px);
  position: relative; overflow: hidden;
}
.hero::before {
  /* grille pointillée, écho des visuels produit */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.5px);
  background-size: 26px 26px;
}
.hero .conteneur { position: relative; }
.hero-duo {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.hero h1 { color: #fff; font-size: clamp(2.1rem, 5.4vw, 3.35rem); font-weight: 800; margin-bottom: 20px; letter-spacing: -0.02em; }
.hero .accroche { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: #D7E0E9; max-width: 34em; margin: 0 0 34px; }
.hero .boutons { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .lieu {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 24px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  padding: 8px 18px; border-radius: 30px;
  font-size: .95rem; color: #E4EBF1; font-weight: 500;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.hero .lieu .ico { width: 16px; height: 16px; color: var(--jaune); }

/* Surlignage « marker » : le fond jaune se déploie, le mot passe en marine */
html.js .surligne {
  background: linear-gradient(var(--jaune), var(--jaune)) 0 50% / 0% 100% no-repeat;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 .1em;
  transition: background-size .7s var(--ease-out) .45s, color .35s ease .65s;
}
html.js body.hero-visible .surligne { background-size: 100% 100%; color: var(--marine-nuit); }
html:not(.js) .surligne { color: var(--jaune); }

/* Visuel produit : vraie capture, inclinée comme un ticket au passe */
.hero-visuel { position: relative; }
/* Double-bezel : coque en verre, rayons concentriques (20 = 14 + 6) */
.hero-carte {
  border-radius: 20px; overflow: hidden; position: relative;
  padding: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 24px rgba(9,18,30,.35), 0 30px 80px rgba(9,18,30,.45);
  transform: rotate(2.2deg);
  transition: transform .45s var(--ease-out), box-shadow .45s ease;
  aspect-ratio: 1 / 0.82; /* recadre la légende du visuel carré */
}
.hero-carte:hover { transform: rotate(0.6deg) translateY(-4px); }
.hero-carte img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 14px; }
/* Reflet qui balaie la carte au survol */
.hero-carte::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
  transform: translateX(-130%);
  transition: transform .7s var(--ease-out);
}
.hero-carte:hover::after { transform: translateX(130%); }

/* Entrée du hero au chargement (pas d'attente de scroll) */
html.js .hero-int > * , html.js .hero-visuel { opacity: 0; transform: translateY(14px); }
html.js body.hero-visible .hero-int > *, html.js body.hero-visible .hero-visuel {
  opacity: 1; transform: none;
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
html.js body.hero-visible .hero-int > :nth-child(1) { transition-delay: .05s; }
html.js body.hero-visible .hero-int > :nth-child(2) { transition-delay: .15s; }
html.js body.hero-visible .hero-int > :nth-child(3) { transition-delay: .25s; }
html.js body.hero-visible .hero-int > :nth-child(4) { transition-delay: .35s; }
html.js body.hero-visible .hero-visuel { transition-delay: .3s; }

@media (max-width: 900px) {
  .hero-duo { grid-template-columns: 1fr; }
  .hero-visuel { max-width: 420px; }
}

/* ---- Bandeau promesses ---- */
.promesses { background: var(--marine-nuit); padding: 0; }
.promesses .conteneur { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.09); padding: 0; max-width: 100%; }
.promesse { background: var(--marine-nuit); color: #fff; padding: 22px 24px; text-align: center; }
.promesse strong { display: block; font-family: 'Bricolage Grotesque', sans-serif; color: var(--jaune); font-size: 1.05rem; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.promesse span { font-size: .85rem; color: var(--gris-clair); }
@media (max-width: 820px) { .promesses .conteneur { grid-template-columns: 1fr 1fr; } }

/* ---- Titres de section ---- */
.titre-section { margin-bottom: clamp(34px, 5vw, 54px); }
.titre-section .sur-titre {
  display: inline-block; color: var(--marine); background: rgba(240,180,41,.18);
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  padding: 5px 13px; border-radius: 20px; margin-bottom: 14px;
}
.titre-section h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.titre-section p { color: var(--gris-texte); margin-top: 14px; font-size: 1.05rem; }
.titre-section.clair h2 { color: #fff; }
.titre-section.clair p { color: var(--gris-clair); }
.titre-section.clair .sur-titre { background: rgba(240,180,41,.12); color: var(--jaune); }

/* ---- Le problème (bloc sombre) ---- */
.sombre { background: var(--degrade-marine); color: #fff; }
.sombre h2, .sombre h3 { color: #fff; }
.sombre p { color: var(--gris-clair); }

/* Carte en verre, sur fonds marine uniquement (élément non scrollant) */
.carte-verre {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--rayon);
  padding: 30px;
  backdrop-filter: blur(8px);
}
.carte-verre h3 { color: #fff; }
.carte-verre ul { list-style: none; margin-top: 16px; }
.carte-verre li { color: #D7E0E9; font-size: .97rem; padding: 5px 0 5px 24px; position: relative; }
.carte-verre li::before { content: "✓"; position: absolute; left: 0; color: var(--jaune); font-weight: 700; }
.carte-verre .accent { margin-top: 16px; color: var(--jaune); font-weight: 600; }

/* ---- Grille de modules ---- */
.modules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.module {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 30px; box-shadow: var(--ombre);
  transition: transform .25s var(--ease-out), box-shadow .25s ease, border-color .25s ease;
  position: relative;
}
.module:hover { transform: translateY(-4px); box-shadow: var(--ombre-haute); border-color: var(--jaune); }
.module .icone {
  width: 46px; height: 46px; border-radius: 12px; background: rgba(30,58,92,.07);
  display: grid; place-items: center; margin-bottom: 16px; color: var(--marine);
}
.module .icone .ico { width: 22px; height: 22px; }
.module h3 { font-size: 1.3rem; margin-bottom: 10px; }
.module p { color: var(--gris-texte); font-size: .97rem; }
.module ul { list-style: none; margin-top: 14px; }
.module li { font-size: .93rem; color: var(--texte); padding: 5px 0 5px 24px; position: relative; }
.module li::before { content: "✓"; position: absolute; left: 0; color: var(--jaune); font-weight: 700; }
.etiquette {
  position: absolute; top: 18px; right: 18px;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 20px;
}
.etiquette.dispo { background: #E6F4EA; color: #2E6B3E; }
.etiquette.bientot { background: #FFF4DA; color: #8A6100; }
@media (max-width: 760px) { .modules { grid-template-columns: 1fr; } }

/* ---- Étapes ---- */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: etape; }
.etape { position: relative; padding-top: 8px; }
.etape::before {
  counter-increment: etape; content: counter(etape);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 2.6rem;
  color: var(--jaune); line-height: 1; display: block; margin-bottom: 10px;
}
.etape h3 { font-size: 1.15rem; margin-bottom: 8px; }
.etape p { color: var(--gris-texte); font-size: .95rem; }
@media (max-width: 760px) { .etapes { grid-template-columns: 1fr; } }

/* ---- Réalisations ---- */
.realisations { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
/* Captures encadrées double-bezel (18 = 12 + 6). Une seule déclaration :
   avant, .realisation et .realisation .corps étaient écrits deux fois de
   suite et la seconde écrasait la première en silence. */
.realisation {
  border: 1px solid var(--bord); border-radius: 18px; padding: 6px;
  overflow: hidden; background: #fff; box-shadow: var(--ombre);
  transition: transform .25s var(--ease-out), box-shadow .25s ease;
}
.realisation:hover { transform: translateY(-4px); box-shadow: var(--ombre-haute); }
.realisation .visuel { height: 200px; overflow: hidden; background: var(--fond-doux); border-radius: 12px; }
.realisation .visuel img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .45s var(--ease-out); }
.realisation:hover .visuel img { transform: scale(1.03); }
.realisation .corps { padding: 22px 24px; }
.realisation h3 { font-size: 1.15rem; margin-bottom: 6px; }
.realisation p { color: var(--gris-texte); font-size: .92rem; margin-bottom: 12px; }
.realisation .statut { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8A6100; }
@media (max-width: 760px) { .realisations { grid-template-columns: 1fr; } }

/* ---- Tarifs ---- */
.tarif-bloc {
  background: var(--degrade-marine);
  border-radius: var(--rayon); padding: clamp(30px, 5vw, 52px); color: #fff; text-align: center;
  box-shadow: var(--ombre-haute);
}
.tarif-bloc h2 { color: #fff; }
.tarif-prix { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 800; color: var(--jaune); line-height: 1.05; margin: 10px 0 4px; font-variant-numeric: tabular-nums; }
.tarif-prix small { display: block; font-family: 'Instrument Sans', sans-serif; font-size: .95rem; font-weight: 500; color: var(--gris-clair); letter-spacing: .02em; }
.tarif-bloc .detail { color: var(--gris-clair); max-width: 44em; margin: 16px auto 26px; }
.tarif-liste { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 28px; }
.tarif-liste span { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); padding: 8px 16px; border-radius: 24px; font-size: .88rem; }
.tarif-bloc .boutons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- Qui sommes-nous ---- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 56px); align-items: center; }
@media (max-width: 820px) { .duo { grid-template-columns: 1fr; } }

/* L'équipe (18/09/2026) : trois fiches en liste, séparées d'un filet, pas
   en cartes. Même gabarit pour chacun : pastille à l'initiale, prénom et
   rôle sur la ligne de la pastille, une phrase, puis le parcours en gris.
   Le titre de gauche s'aligne sur le haut de la première fiche. */
.equipe-duo { align-items: start; }
/* Titre un cran plus petit en deux colonnes : la coupure tombe après la
   virgule au lieu de laisser « pas » ou « de com' » seuls en bout de ligne. */
.equipe-intro .titre-section h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.equipe-intro .titre-section { margin-bottom: 18px; }
.equipe-intro p + p { margin-top: 12px; }
.brigade { list-style: none; }
.membre {
  display: grid; grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 18px; align-items: start;
  padding: 26px 0;
}
.membre:first-child { padding-top: 4px; }
.membre:last-child { padding-bottom: 0; }
.membre + .membre { border-top: 1px solid var(--bord); }
.membre .initiale {
  grid-row: 1 / span 3;
  width: 48px; height: 48px; border-radius: 12px; background: var(--marine); color: var(--jaune);
  display: grid; place-items: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.3rem;
}
.membre-tete { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; padding-top: 1px; }
.membre h3 { font-size: 1.2rem; }
.membre .role { font-size: .88rem; font-weight: 600; color: var(--gris-texte); }
.membre .phrase, .membre .parcours { grid-column: 2; }
.membre .phrase { color: var(--texte); font-size: 1rem; line-height: 1.55; margin-top: 6px; }
.membre .parcours { color: var(--gris-texte); font-size: .92rem; line-height: 1.55; margin-top: 6px; }
@media (max-width: 820px) {
  .membre:first-child { padding-top: 0; }
  /* En une colonne, les fiches arrivent par le bas et non par la droite :
     décalées de 24 px, elles débordaient de l'écran avant leur apparition. */
  html.js .equipe-duo .reveal-gauche:not(.visible),
  html.js .equipe-duo .reveal-droite:not(.visible) { transform: translateY(16px); }
}
/* Au téléphone, prénom et rôle se centrent sur la pastille, et le texte
   reprend toute la largeur en dessous. */
@media (max-width: 560px) {
  .membre { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .membre .initiale { grid-row: auto; width: 44px; height: 44px; font-size: 1.2rem; }
  .membre-tete { padding-top: 0; }
  .membre .phrase, .membre .parcours { grid-column: 1 / -1; }
  .membre .phrase { margin-top: 12px; }
}

/* ---- Contact ---- */
.contact-grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 46px); align-items: start; }
.form-contact { display: grid; gap: 16px; background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: clamp(22px, 4vw, 34px); box-shadow: var(--ombre); }
.form-contact .rang { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-contact label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 6px; }
.form-contact input, .form-contact select, .form-contact textarea {
  width: 100%; padding: 12px 14px; font-size: 1rem; font-family: inherit;
  border: 1.5px solid var(--bord); border-radius: var(--rayon-petit);
  background: var(--fond-doux); color: var(--texte); transition: border-color var(--dur-ui), background var(--dur-ui), box-shadow var(--dur-ui);
}
.form-contact input:focus, .form-contact select:focus, .form-contact textarea:focus {
  outline: none; border-color: var(--marine); background: #fff; box-shadow: 0 0 0 3px rgba(30,58,92,.1);
}
/* Accessibilité, 20/09/2026 — contrôle R-81 de S9.
   La règle ci-dessus retire le contour et le remplace par une ombre : cela marche
   pour un champ de saisie. Mais les cases à cocher plus bas posent box-shadow:none,
   donc il ne leur restait AUCUN repère au clavier. On rend le contour à tout ce qui
   est atteint au clavier, sans toucher à l'apparence à la souris : `:focus-visible`
   ne se déclenche pas au clic. */
.form-contact input:focus-visible,
.form-contact select:focus-visible,
.form-contact textarea:focus-visible {
  outline: 3px solid var(--jaune); outline-offset: 3px;
}
.form-contact .selection-produits input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--jaune); outline-offset: 3px;
}
.form-contact textarea { resize: vertical; min-height: 100px; }

/* Confirmation d'envoi : la coche se dessine */
.confirmation {
  display: none; background: #E6F4EA; border: 1.5px solid #2E6B3E; color: #22532F;
  border-radius: var(--rayon-petit); padding: 16px; text-align: center;
  align-items: center; justify-content: center; gap: 10px;
}
.confirmation.visible { display: flex; animation: apparait .35s var(--ease-out); }
.confirmation .coche { width: 26px; height: 26px; stroke: #2E6B3E; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.confirmation.visible .coche path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: dessine .6s var(--ease-out) .15s forwards; }
@keyframes dessine { to { stroke-dashoffset: 0; } }
@keyframes apparait { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.envoi-erreur {
  display: none; background: #FDECEA; border: 1.5px solid #B3261E; color: #8C1D18;
  border-radius: var(--rayon-petit); padding: 14px 16px; text-align: center; font-size: .95rem;
}
.envoi-erreur.visible { display: block; animation: apparait .3s var(--ease-out); }

.coordonnee { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--bord); }
.coordonnee .picto { color: var(--marine); background: rgba(30,58,92,.07); border-radius: 10px; width: 40px; height: 40px; display: grid; place-items: center; flex-shrink: 0; }
.coordonnee .picto .ico { width: 19px; height: 19px; }
.coordonnee strong { display: block; font-size: .95rem; }
.coordonnee span, .coordonnee a { color: var(--gris-texte); font-size: .93rem; }
.coordonnee a:hover { color: var(--marine); }
.a-confirmer { color: #8A6100; font-style: italic; font-size: .82rem; }
@media (max-width: 820px) { .contact-grille { grid-template-columns: 1fr; } .form-contact .rang { grid-template-columns: 1fr; } }

/* ---- Pied de page ---- */
footer.site { background: var(--marine-nuit); color: var(--gris-clair); padding: 54px 0 24px; }
footer.site .conteneur { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 34px; }
footer.site img.logo-pied { height: 70px; width: auto; margin-bottom: 14px; }
footer.site .logo-pied-bloc { margin-bottom: 14px; }
footer.site .logo-pied-bloc .logo-pique { height: 54px; width: auto; margin-bottom: 10px; }
footer.site .logo-pied-bloc .mot { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.15rem; color: #fff; letter-spacing: .02em; }
footer.site .logo-pied-bloc .mot em { font-style: normal; color: var(--jaune); }
footer.site h4 { color: var(--jaune); font-size: 1rem; margin-bottom: 14px; font-family: 'Bricolage Grotesque', sans-serif; }
footer.site p, footer.site a { font-size: .92rem; line-height: 1.95; color: var(--gris-clair); }
footer.site a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
footer.site .bas { grid-column: 1/-1; border-top: 1px solid rgba(255,255,255,.1); margin-top: 22px; padding-top: 20px; text-align: center; font-size: .82rem; color: var(--gris-clair); }
@media (max-width: 760px) { footer.site .conteneur { grid-template-columns: 1fr; } }

/* ---- Pages légales ---- */
.page-texte { max-width: 780px; margin: 0 auto; }
.page-texte h1 { font-size: clamp(1.9rem, 4.5vw, 2.5rem); margin-bottom: 10px; }
.page-texte h2 { font-size: 1.35rem; margin: 30px 0 10px; }
.page-texte p, .page-texte li { color: var(--gris-texte); margin-bottom: 12px; }
.page-texte ul { padding-left: 22px; }
.encart-todo { background: #FFF4DA; border-left: 4px solid var(--jaune); padding: 15px 19px; border-radius: 6px; margin: 16px 0; color: var(--texte); }

/* =====================================================================
   PAGE « MODULES & TARIFS » (offre.html)
   ===================================================================== */

.menu-nav a.actif { color: var(--marine); font-weight: 700; }

/* ---- Hero raccourci ---- */
.hero.hero-court { padding: clamp(56px, 8vw, 96px) 0 clamp(50px, 7vw, 80px); text-align: center; }
.hero.hero-court h1 { font-size: clamp(1.95rem, 5vw, 3.2rem); }
.hero.hero-court .accroche { margin-left: auto; margin-right: auto; }
.hero.hero-court .boutons { justify-content: center; }

/* ---- Barre de chapitres (chips ancres) ---- */
.chips-nav {
  position: sticky; top: 70px; z-index: 90;
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--bord);
}
/* Compensation d'ancre : sur les pages à barre de chapitres, l'en-tête collant
   (~70 px) et la barre (~59 px) recouvrent le haut de la section visée. Les
   92 px globaux ne suffisent pas ; ailleurs, html garde ses 92 px. */
body:has(.chips-nav) { scroll-padding-top: 136px; }
.chips-nav .conteneur { display: flex; gap: 8px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; }
.chips-nav .conteneur::-webkit-scrollbar { display: none; }
.chips-nav a {
  flex-shrink: 0; font-size: .88rem; font-weight: 600; color: var(--gris-texte);
  padding: 7px 15px; border-radius: 999px; border: 1px solid transparent;
  transition: color var(--dur-ui), background var(--dur-ui), border-color var(--dur-ui);
}
.chips-nav a:hover { color: var(--marine); background: var(--fond-doux); }
.chips-nav a.actif { color: var(--marine); background: rgba(240,180,41,.18); border-color: rgba(240,180,41,.4); }

/* ---- Brique : une vidéo + son texte ---- */
.brique {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(26px, 4vw, 52px); align-items: center;
  padding: clamp(30px, 4.5vw, 54px) 0;
  border-top: 1px solid var(--bord);
}
.brique:first-of-type { border-top: none; padding-top: 0; }
.brique.inverse .brique-media { order: 2; }

.brique-media {
  border-radius: var(--rayon); overflow: hidden;
  background: var(--marine-nuit); box-shadow: var(--ombre-haute);
  line-height: 0;
}
.video-module { width: 100%; height: auto; display: block; background: var(--marine-nuit); }

.brique-entete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.brique-entete .etiquette { position: static; display: inline-block; }
.brique-prix {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: .95rem;
  color: var(--marine); background: rgba(240,180,41,.15);
  border: 1px solid rgba(240,180,41,.45); border-radius: 999px; padding: 4px 13px;
  font-weight: 700;
}
.brique-prix strong { color: var(--marine); }
.brique-texte h3 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin-bottom: 10px; }
.brique-texte .chapo { color: var(--texte); font-size: 1.06rem; margin-bottom: 16px; }
.brique-texte .apres {
  margin-top: 16px; padding: 14px 18px; border-left: 3px solid var(--jaune);
  background: var(--fond-doux); border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
  font-size: .97rem; color: var(--texte);
}

.points { list-style: none; }
.points li { font-size: .97rem; padding: 5px 0 5px 26px; position: relative; }
.points li::before { content: "\2713"; position: absolute; left: 0; top: 5px; color: var(--jaune); font-weight: 700; }

/* ---- Cartes « en préparation » ---- */
.cartes-legeres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 34px; }
.carte-legere {
  background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 26px 28px; box-shadow: var(--ombre);
  transition: transform .25s var(--ease-out), box-shadow .25s ease;
}
.carte-legere:hover { transform: translateY(-3px); box-shadow: var(--ombre-haute); }
.carte-legere h4 { font-size: 1.2rem; margin: 12px 0 8px; }
.carte-legere p { color: var(--gris-texte); font-size: .96rem; }
.carte-legere .etiquette { position: static; display: inline-block; }
.prix-ligne {
  margin-top: 14px; font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; color: var(--marine) !important;
}
.prix-ligne small { font-weight: 400; color: var(--gris-texte); font-size: .82rem; margin-left: 6px; }

/* ---- Constructeur de prix ---- */
.constructeur {
  max-width: 780px; margin: 0 auto;
  border: 1px solid var(--bord); border-radius: var(--rayon);
  overflow: hidden; box-shadow: var(--ombre); background: var(--fond);
}
.ligne-tarif {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px clamp(20px, 3vw, 30px); border-top: 1px solid var(--bord);
}
.ligne-tarif:first-child { border-top: none; }
.ligne-tarif.socle { background: var(--marine); color: #fff; }
.ligne-tarif.socle .ligne-nom span { color: var(--gris-clair); }
.ligne-tarif.socle .ligne-prix { color: var(--jaune); }
.ligne-tarif.attente { background: var(--fond-doux); }
.ligne-tarif.attente .ligne-prix, .ligne-tarif.attente .ligne-nom strong { color: var(--gris-texte); }
.ligne-nom strong { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.08rem; }
.ligne-nom span { font-size: .9rem; color: var(--gris-texte); }
.ligne-prix {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: 1.5rem; color: var(--marine); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ligne-prix small { font-size: .8rem; font-weight: 400; color: var(--gris-texte); }
.note-grille {
  max-width: 780px; margin: 18px auto 0; text-align: center;
  color: var(--gris-texte); font-size: .95rem;
}

/* ---- Les trois formules ---- */
.formules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(40px, 6vw, 64px); align-items: start; }
.formule {
  background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 30px 26px; box-shadow: var(--ombre); position: relative;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform .25s var(--ease-out), box-shadow .25s ease;
}
.formule:hover { transform: translateY(-3px); box-shadow: var(--ombre-haute); }
.formule.vedette {
  border: 2px solid var(--jaune);
  /* Halo doré : l'offre vedette rayonne doucement */
  box-shadow: 0 0 0 6px rgba(240,180,41,.12), var(--ombre-haute);
  transform: translateY(-10px);
}
.formule.vedette:hover { transform: translateY(-10px) scale(1.01); }
.ruban {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--jaune); color: var(--marine);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 15px; border-radius: 999px; white-space: nowrap;
}
.formule h3 { font-size: 1.45rem; }
.formule-quoi { color: var(--gris-texte); font-size: .93rem; margin-bottom: 16px; }
.formule-setup { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.9rem; color: var(--marine); font-variant-numeric: tabular-nums; }
.formule-setup small { display: block; font-size: .8rem; font-weight: 400; color: var(--gris-texte); }
.formule-abo { margin: 8px 0 16px; color: var(--gris-texte); font-size: .98rem; }
.formule-abo strong { color: var(--marine); font-size: 1.15rem; font-family: 'Bricolage Grotesque', sans-serif; }
.formule .points { margin-bottom: 22px; }
.formule .btn { margin-top: auto; text-align: center; justify-content: center; }

/* ---- Bandeau paiement annuel ---- */
.bandeau-annuel {
  margin-top: clamp(34px, 5vw, 54px);
  background: var(--marine-nuit); color: #fff; border-radius: var(--rayon);
  padding: clamp(24px, 3.5vw, 36px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.bandeau-annuel strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.25rem; color: var(--jaune); }
.bandeau-annuel p { color: var(--gris-clair); font-size: .97rem; margin-top: 6px; max-width: 56ch; }

/* ---- Ce qui est toujours compris ---- */
.compris { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.compris > div { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--rayon); padding: 24px 22px; }
.compris span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--jaune); color: var(--marine); font-weight: 700; margin-bottom: 12px;
}
.compris strong { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.05rem; color: #fff; margin-bottom: 6px; }
.compris p { color: var(--gris-clair); font-size: .92rem; }

/* ---- Questions ---- */
.questions { max-width: 800px; margin: 0 auto; }
.questions details {
  background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon-petit);
  padding: 18px 22px; margin-bottom: 12px; box-shadow: var(--ombre);
  transition: border-color var(--dur-ui) ease;
}
.questions details[open] { border-color: rgba(240,180,41,.55); }
.questions summary {
  cursor: pointer; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  font-size: 1.05rem; color: var(--marine); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after {
  content: "+"; color: var(--jaune); font-size: 1.5rem; line-height: 1;
  transition: transform var(--dur-panneau) var(--ease-masse);
}
.questions details[open] summary::after { transform: rotate(45deg); }
.questions details p { color: var(--gris-texte); font-size: .98rem; margin-top: 12px; }
/* Ouverture animée quand le navigateur le permet */
@supports (interpolate-size: allow-keywords) {
  .questions details { interpolate-size: allow-keywords; }
  .questions details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size var(--dur-panneau) var(--ease-masse), content-visibility var(--dur-panneau) allow-discrete;
  }
  .questions details[open]::details-content { block-size: auto; }
}

/* ---- Appel final ---- */
.appel-final { background: var(--fond); }
.appel-final h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin-bottom: 12px; }
.appel-final p { color: var(--gris-texte); max-width: 52ch; margin: 0 auto 26px; }

/* ---- Adaptation mobile ---- */
@media (max-width: 900px) {
  .brique { grid-template-columns: 1fr; }
  .brique.inverse .brique-media { order: 0; }
  .formules { grid-template-columns: 1fr; }
  .formule.vedette { transform: none; }
  .formule.vedette:hover { transform: translateY(-3px); }
  .cartes-legeres { grid-template-columns: 1fr; }
  .compris { grid-template-columns: repeat(2, 1fr); }
  .bandeau-annuel { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .compris { grid-template-columns: 1fr; }
  .ligne-tarif { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Mention « ce que la formule ne contient pas » (carte Présence) */
.formule-sans {
  font-size: .88rem; color: var(--gris-texte); font-style: italic;
  border-top: 1px dashed var(--bord); padding-top: 12px; margin-bottom: 20px;
}

/* ---- Écran d'entrée : le pique se plante, les tickets se piquent ----
   Joué une seule fois par session (sessionStorage), retiré ensuite du DOM.
   Sans JavaScript, il n'apparaît jamais. */
html:not(.js) #entree { display: none; }
#entree {
  position: fixed; inset: 0; z-index: 999;
  background: var(--degrade-marine);
  display: grid; place-items: center;
}
#entree::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.5px);
  background-size: 26px 26px;
}
#entree .marque-entree { text-align: center; position: relative; }
#entree svg.pique { width: 132px; height: 132px; margin: 0 auto 10px; overflow: visible; }
#entree .nom-entree {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
  color: #fff; font-size: 1.5rem; letter-spacing: .04em;
}
#entree .nom-entree .apostrophe { color: var(--jaune); }

#entree .p-base  { transform: scaleX(0); transform-origin: center; transform-box: fill-box; }
#entree .p-tige  { opacity: 0; transform: translateY(-26px); }
#entree .p-boule { opacity: 0; transform: scale(0); transform-origin: center; transform-box: fill-box; }
#entree .p-ticket { opacity: 0; transform: translateY(-48px); }
#entree .nom-entree { opacity: 0; transform: translateY(10px); }

#entree.joue .p-base  { animation: e-plante .35s var(--ease-out) .05s forwards; }
#entree.joue .p-tige  { animation: e-pose .4s  var(--ease-out) .3s  forwards; }
#entree.joue .p-boule { animation: e-pop .35s  var(--ease-out) .55s forwards; }
#entree.joue .p-t1    { animation: e-pose .45s var(--ease-out) .7s  forwards; }
#entree.joue .p-t2    { animation: e-pose .45s var(--ease-out) .85s forwards; }
#entree.joue .p-t3    { animation: e-pose .45s var(--ease-out) 1s   forwards; }
#entree.joue .nom-entree { animation: e-pose .5s var(--ease-out) 1.1s forwards; }
#entree.leve { animation: e-leve .6s var(--ease-masse) forwards; }

@keyframes e-plante { to { transform: scaleX(1); } }
@keyframes e-pose   { to { opacity: 1; transform: none; } }
@keyframes e-pop    { 60% { opacity: 1; transform: scale(1.3); } to { opacity: 1; transform: scale(1); } }
@keyframes e-leve   { to { transform: translateY(-101%); } }

/* =====================================================================
   BLOCS PARTAGÉS : grille de familles, listes à statut, réalisation seule
   Ajoutés le 08/08/2026. Rien au-dessus n'a été déplacé ni supprimé, à
   l'exception des trois corrections signalées en commentaire sur place.
   ===================================================================== */

/* Trois familles de modules côte à côte (accueil et page offre) */
.modules.trois { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .modules.trois { grid-template-columns: 1fr; } }

/* Liste « nom du module + étiquette + phrase » : pas de coche jaune ici,
   la coche de .module li serait un contresens (ce ne sont pas des inclus). */
.liste-statuts { list-style: none; margin-top: 16px; }
.liste-statuts li { padding: 13px 0; border-top: 1px solid var(--bord); }
.liste-statuts li:first-child { border-top: none; padding-top: 4px; }
.module .liste-statuts li::before { content: none; }
.liste-statuts strong {
  display: block; font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1rem; color: var(--marine); line-height: 1.35;
}
.liste-statuts p { font-size: .9rem; color: var(--gris-texte); margin-top: 4px; max-width: none; }
/* .etiquette est absolue par défaut : dans une liste, elle doit rentrer en flux */
.liste-statuts .etiquette {
  position: static; display: inline-block;
  margin-left: 8px; vertical-align: 2px;
}

/* Une seule réalisation : centrée, pas étirée sur toute la largeur */
.realisations.une { grid-template-columns: minmax(0, 620px); justify-content: center; }

/* Légende de démonstration sous la capture du hero (fond marine) */
.legende-demo {
  margin: 12px auto 0; text-align: center; max-width: none;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris-clair);
}

/* =====================================================================
   PAGE « COMPOSER MA FORMULE » (demarrer.html)
   ===================================================================== */

.choix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.choix.trois { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .choix, .choix.trois { grid-template-columns: 1fr; } }

.choix-carte {
  position: relative; display: block; cursor: pointer;
  background: #fff; border: 1.5px solid var(--bord); border-radius: var(--rayon);
  padding: 26px 28px; box-shadow: var(--ombre);
  transition: transform .25s var(--ease-out), box-shadow .25s ease, border-color .25s ease;
}
.choix-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-haute); border-color: var(--jaune); }
/* Le bouton radio existe pour Netlify et pour le clavier, il ne se voit pas */
.choix-carte input { position: absolute; opacity: 0; width: 0; height: 0; }
.choix-carte:has(input:checked) {
  border-color: var(--jaune); border-width: 2px;
  box-shadow: 0 0 0 5px rgba(240,180,41,.14), var(--ombre-haute);
}
.choix-carte:has(input:focus-visible) { outline: 3px solid var(--jaune); outline-offset: 3px; }
.choix-carte .etiquette { position: static; display: inline-block; margin-bottom: 12px; }
.choix-carte h3 { font-size: 1.3rem; margin-bottom: 8px; }
.choix-carte .quoi { color: var(--gris-texte); font-size: .95rem; }
.choix-carte .points { margin-top: 14px; }
.choix-carte .prix {
  margin-top: 16px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
  font-size: 1.35rem; color: var(--marine); font-variant-numeric: tabular-nums;
}
/* Sans :has() (navigateur ancien), la carte cochée doit rester repérable :
   le radio reprend sa place et son apparence native au lieu de disparaître. */
@supports not selector(:has(*)) {
  .choix-carte input { position: static; opacity: 1; width: auto; height: auto; margin-bottom: 10px; }
}

/* Colonne de préparation à gauche, récapitulatif à droite */
.demarrer-duo {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 48px); align-items: start;
}
.recap-colonne { position: sticky; top: 100px; }
@media (max-width: 900px) {
  .demarrer-duo { grid-template-columns: 1fr; }
  .recap-colonne { position: static; }
}
/* Colonne de gauche : deux listes qui s'enchaînent, il leur faut de l'air. */
.demarrer-duo .prepa h3 { font-size: 1.15rem; margin-bottom: 10px; }
.demarrer-duo .prepa h3 ~ h3 { margin-top: 26px; }
.demarrer-duo .prepa .a-confirmer { display: block; margin-top: 20px; }
/* Le formulaire de devis n'est pas dans une grille à deux colonnes comme
   celui de l'accueil : on le borne sur la même largeur que .constructeur. */
.demarrer-formulaire { max-width: 780px; margin: 0 auto; }

/* ---- Mouvement réduit : tout se calme ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  html.js .reveal, html.js .hero-int > *, html.js .hero-visuel { opacity: 1; transform: none; }
  html.js .surligne { background-size: 100% 100%; color: var(--marine-nuit); }
  #entree { display: none; }
  .questions details::details-content { transition: none !important; }
}

/* =====================================================================
   AJOUTS DU 08/08/2026 — passe « dire ce qui tourne »
   Trois besoins seulement : une brique sans vidéo, un troisième libellé
   de statut, et une colonne d'étapes. Aucune règle au-dessus n'a été
   modifiée, déplacée ni supprimée : ce bloc est purement additif.
   ===================================================================== */

/* 1. Brique pleine largeur, sans média : les modules prouvés n'ont pas
      tous une vidéo, et une brique à deux colonnes avec une case vide
      ferait un trou. Une seule colonne, texte borné, puces sur deux
      colonnes pour ne pas dérouler sur trois écrans de haut. */
.brique.solo { grid-template-columns: minmax(0, 1fr); align-items: start; }
.brique.solo .brique-texte { max-width: 92ch; }
.brique.solo .points { columns: 2; column-gap: 40px; }
.brique.solo .points li { break-inside: avoid; }
@media (max-width: 760px) {
  .brique.solo .points { columns: 1; }
}

/* 2. Troisième libellé de statut. « Plus tard » ne doit pas porter le
      jaune de « En préparation » : ce n'est pas la même promesse, et
      deux étiquettes identiques pour deux statuts différents est
      exactement le genre de flou qu'on essaie de supprimer. Gris neutre,
      contraste mesuré à 4,6:1 — au-dessus du seuil AA pour ce corps. */
.etiquette.plustard { background: #EDF1F4; color: #5E6E7A; }

/* 3. Étapes empilées : la même mécanique de compteur jaune que .etapes,
      mais en colonne, pour tenir dans une moitié de .duo (accueil,
      trajet de la commande fournisseur). */
.etapes.colonne { grid-template-columns: 1fr; gap: 18px; }
.etapes.colonne .etape::before { font-size: 2rem; margin-bottom: 4px; }

/* =====================================================================
   AJOUT DU 13/08/2026 — mise en scène de la démonstration Leopardo
   (accueil). La capture devient un lien vers le site démo en ligne, le
   texte raconte le grisage des créneaux en direct. Bloc purement
   additif : rien au-dessus n'est modifié.
   ===================================================================== */

.demo-duo {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 56px); align-items: center;
}
/* La carte .realisation est un lien : elle doit rester un bloc, et sa
   capture garde son format naturel (880×631) au lieu des 200 px fixes. */
.demo-capture { display: block; }
.demo-capture .visuel { display: block; height: auto; }
.demo-capture .visuel img { height: auto; }
.demo-texte .statut {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #8A6100;
}
.demo-texte h3 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin: 8px 0 12px; }
.demo-texte p { color: var(--gris-texte); margin-bottom: 14px; }
.demo-texte p a {
  color: var(--marine); font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(30,58,92,.35);
}
.demo-texte p a:hover { text-decoration-color: var(--jaune-fonce); }
.demo-texte .boutons { margin-top: 20px; }
.demo-note { font-size: .88rem; font-style: italic; margin-top: 16px; }
@media (max-width: 900px) {
  .demo-duo { grid-template-columns: 1fr; }
  .demo-capture { max-width: 560px; margin: 0 auto; }
}

/* Lien dans le texte courant : la règle globale « a » hérite de la couleur
   sans soulignement, un lien en plein paragraphe était donc invisible.
   Utilisé pour les liens vers la démonstration et les renvois internes
   d'offre.html. */
.lien-texte {
  color: var(--marine); font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(30,58,92,.35);
}
.lien-texte:hover { text-decoration-color: var(--jaune-fonce); }
/* La ligne « Voyez-le en vrai » sous le bloc .apres d'une brique : sans
   marge propre, elle collerait au bloc (le reset met margin à 0 partout). */
.lien-texte-ligne { margin-top: 14px; font-size: .95rem; color: var(--texte); }

/* Nav : un libellé ne se casse JAMAIS sur deux lignes (constat de Rémi,
   13/08). nowrap supprime les coupures aux espaces et aux tirets ; le gap
   resserré à 16 px vit dans la règle de base .menu-nav (plus haut), pour que
   les 7 entrées tiennent dès 1141 px sans trou entre les media queries. */
.menu-nav a:not(.btn), .menu-nav .btn { white-space: nowrap; }