/* ==========================================================================
   Nicolam Studio — feuille de style unique
   Crème & bleu nuit, une touche de bleu franc. Cinzel / Inter.
   ========================================================================== */

/* ----- Polices : hébergées sur le site (aucun appel à Google Fonts avant le choix des cookies).
   Fichiers officiels Google, variables, sous-ensemble latin (accents, œ, €, guillemets, insécables). ----- */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("/assets/fonts/cinzel-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  --fond:            #F7F7F5;
  --gris-clair:      #E6EBF2;
  --gris:            #DCE4ED;
  --accent:          #2C4B8C;
  --nuit:            #1A2745;
  --nuit-profond:    #0C1426;

  /* offre de lancement (vert : badge sur carte claire, texte sur barre bleue) */
  --promo:           #0E9F6E;
  --promo-clair:     #34D399;

  --texte:           #1A2745;
  --texte-corps:     rgba(26,39,69,.8);
  --texte-clair:     #F7F7F5;
  --texte-clair-2:   rgba(247,247,245,.78);

  --degrade-fond:    linear-gradient(180deg, #E6EBF2 0%, #F7F7F5 100%);
  --degrade-accent:  linear-gradient(180deg, #2C4B8C 50%, #1A2745 100%);
  /* dégradé signature des composants (CTA, pastilles, icônes) et sa version claire (blanc / gris bleuté) */
  --degrade-signature: linear-gradient(135deg, #2C4B8C 0%, #29447F 40%, #1A2745 100%);
  --degrade-clair:   linear-gradient(180deg, #DCE4ED 0%, #FFFFFF 92%);
  /* le dégradé clair à l'angle du dégradé signature (135°, point à 40 %) : bouton clair de la carte CTA.
     Jamais en oklch : le blanc n'a pas de teinte et le dégradé passerait par d'autres couleurs */
  --degrade-clair-135: linear-gradient(135deg, #DCE4ED 0%, #E5EBF2 40%, #FFFFFF 100%);

  --sh-card:  0 2px 6px rgba(26,39,69,.10), 0 12px 32px -14px rgba(26,39,69,.14);
  --sh-soft:  0 1px 3px rgba(26,39,69,.06);
  --liseré:   inset 0 1px 0 rgba(247,247,245,.7);

  --r-sm: 8px;  --r: 12px;  --r-lg: 16px;  --r-xl: 32px;  --r-pill: 999px;
  --r-bloc-haut: 32px 32px 0 0;

  --ease: ease-in-out;
  --dur: .4s;

  /* espacement : 8 · 16 · 24 · 32 · 48 · 64 · 96 · 128 */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --annonce-h: 42px;
  --container: 1200px;
  --pad-x: 24px;
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  :root { --degrade-signature: linear-gradient(135deg in oklch, #2C4B8C 0%, color-mix(in oklch, #2C4B8C 82%, #1A2745) 40%, #1A2745 100%); }
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 36px; }
@media (max-width: 768px) { html { scroll-padding-top: 36px; } }
/* sections à padding réduit (.section--short) : leur titre atterrit plus haut au saut, on compense */
.section--short { scroll-margin-top: 32px; }
@media (max-width: 768px) { .section--short { scroll-margin-top: 16px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  color: var(--texte-corps);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:where(ul, ol) { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--accent); color: var(--texte-clair); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.on-accent :focus-visible, .hero :focus-visible { outline-color: var(--texte-clair); }

/* ==========================================================================
   3. Layout : container, section, grain
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section {
  position: relative;
  padding-block: var(--s7);
  isolation: isolate;
}
.section > .container { position: relative; z-index: 1; }
.section--short { padding-block: var(--s6); }

/* grain, uniquement sur le fond de section */
.section::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* fonds de flux (continuité, bords calés) */
.bg-cream  { background: var(--fond); }
.bg-down   { background: linear-gradient(180deg, #F7F7F5 0%, #E6EBF2 100%); }
.bg-up     { background: linear-gradient(180deg, #E6EBF2 0%, #F7F7F5 100%); }
.bg-accent { background: var(--accent); }
/* flux des fonds : A = #F7F7F5, B = #E6EBF2 ; section longue = aller-retour */
.bg-ab  { background: linear-gradient(180deg, #F7F7F5 0%, #E6EBF2 100%); }
.bg-ba  { background: linear-gradient(180deg, #E6EBF2 0%, #F7F7F5 100%); }
.bg-aba { background: linear-gradient(180deg, #F7F7F5 0%, #E6EBF2 50%, #F7F7F5 100%); }
.bg-bab { background: linear-gradient(180deg, #E6EBF2 0%, #F7F7F5 50%, #E6EBF2 100%); }
/* deux sections d'un même thème (continuité du dégradé) se suivent avec moins d'écart qu'une coupure */
.flow-cont { padding-top: var(--s5); }
@media (max-width: 768px) { .flow-cont { padding-top: var(--s4); } }
.bg-accent::before { opacity: .05; mix-blend-mode: soft-light; }

/* ==========================================================================
   4. Typographie
   ========================================================================== */
h1, h2, h3 {
  font-family: 'Cinzel', 'Times New Roman', serif;
  color: var(--texte);
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
h1 { font-weight: 700; font-size: clamp(2rem, 4.35vw, 3.25rem); line-height: 1.06; }
h2 { font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.2; }   /* les H2 sur plusieurs lignes respirent */
h3 { font-weight: 600; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.2; }
/* Règle A : équilibre des titres, sous-titres et mentions courtes (jamais le texte courant) */
h1, h2, h3, h4, .overline, .hero-badge, .price-name, .acc-title, .scroll-hint__word { text-wrap: balance; }

/* sur-titre = pastille en verre translucide premium (glassmorphism) */
.overline {
  display: inline-flex; align-items: center;
  align-self: flex-start;
  width: fit-content;
  margin: 0;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: linear-gradient(155deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.06) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 5px 16px -7px rgba(26,39,69,.16), inset 0 1px 0 rgba(255,255,255,.85);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--accent);
}
.sec-head--center .overline, .cta-card .overline { align-self: center; }
.on-accent .overline, .cta-card .overline {
  background: linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.06));
  border-color: rgba(255,255,255,.21);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.5);
  color: var(--texte-clair);
  opacity: 1;
}

.lead {
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  color: var(--texte-corps);
  line-height: 1.55;
  margin: 0;
}
.caption { font-size: .82rem; font-weight: 400; color: var(--texte-corps); }

p { margin: 0; }
/* texte courant : retour à la ligne normal (text-wrap: pretty retiré le 23/10 : Chrome renvoyait des mots
   à la ligne alors qu'ils tenaient, ce qui laissait des trous, et Safari ne le fait pas pareil) */
.prose p { max-width: 68ch; }

/* en-tête de section */
.sec-head { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s5); }
.sec-head .overline + h2 { margin-top: 8px; }
.sec-head--center { align-items: center; text-align: center; }
.sec-head--center .lead { max-width: 60ch; }
.sec-head p.lead { margin-top: 12px; }   /* titre → chapô : 28 px avec le gap (36 px jugé trop) */
.sec-head p.lead + p.lead { margin-top: 0; }   /* chapô en deux paragraphes : 16 px entre eux (le gap) */

/* mot d'accent dans un titre */
.mot-accent { color: var(--accent); }
.on-accent .mot-accent { color: var(--texte-clair); }

/* section de contraste : titres et chapô en clair */
.on-accent h2, .on-accent .sec-head h2, .on-accent h3 { color: var(--texte-clair); }
.on-accent .lead { color: var(--texte-clair-2); }

/* ==========================================================================
   5. Boutons
   ========================================================================== */
.btn {
  --btn-bg: var(--degrade-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), filter var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn .ico { width: 18px; height: 18px; }
/* boutons bleu signature : le fond animé (version foncée du mist) passe sous le libellé et l'icône ;
   sans WebGL ou en animations réduites, le dégradé du bouton reste seul */
.btn-primary { position: relative; isolation: isolate; overflow: hidden; }
.btn-mist { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; border-radius: inherit; }
.btn-mist__label { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }

.btn-primary {
  background: var(--degrade-accent);
  color: var(--texte-clair);
  box-shadow: 0 6px 18px -6px rgba(26,39,69,.5);
}
.btn-primary:hover { filter: brightness(1.09); transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(26,39,69,.55); }
.btn-primary:active { filter: brightness(.96); transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--texte);
  border: 1.5px solid rgba(26,39,69,.28);
}
.btn-ghost:hover { background: rgba(26,39,69,.05); border-color: rgba(26,39,69,.5); transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(0); }

/* sur aplat d'accent, tout s'inverse */
.on-accent .btn-primary { background: var(--fond); color: var(--accent); filter: none; box-shadow: var(--sh-card); }
.on-accent .btn-primary:hover { filter: brightness(.98); transform: translateY(-2px); }
.on-accent .btn-ghost { color: var(--texte-clair); border-color: rgba(247,247,245,.45); }
.on-accent .btn-ghost:hover { background: rgba(247,247,245,.1); border-color: rgba(247,247,245,.75); }

/* tertiaire : texte dans l'accent, sans conteneur au repos, le fond n'apparaît qu'au survol */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.btn-row--center { justify-content: center; }
/* deux boutons qui ne tiennent plus sur une ligne : l'un sous l'autre, en pleine largeur
   (classe posée par main.js quand la rangée passe à la ligne) */
.btn-row.is-stacked { flex-direction: column; align-items: stretch; }
.btn-row.is-stacked > .btn { width: 100%; flex: 0 0 auto; }

/* lien tel/mail texte */
.link-inline {
  color: var(--texte-corps);
  transition: color var(--dur) var(--ease);
}
.link-inline:hover { color: var(--accent); }

/* ==========================================================================
   6. Barre d'annonce
   ========================================================================== */
.announce {
  position: absolute; inset: 0 0 auto 0;   /* défile avec la page : visible en haut, puis le header prend sa place */
  z-index: 60;
  height: var(--annonce-h);
  background: var(--degrade-accent);
  color: var(--texte-clair);
  display: flex; align-items: center;
  overflow: hidden;
}
.announce__track {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  justify-content: center;
  padding-inline: var(--pad-x);
  font-size: .82rem; font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
}
.announce__copy { display: inline-flex; align-items: center; gap: 14px; }
.announce__item { display: inline-flex; align-items: center; gap: 8px; }
.announce__item .ico { width: 15px; height: 15px; opacity: .9; }
/* offre de lancement : chip vert dans la barre bleue (ressort sans changer la couleur du bandeau) */
.announce__item--promo {
  color: var(--promo-clair); font-weight: 600;
  background: rgba(52,211,153,.14);
  padding: 3px 11px; border-radius: var(--r-pill);
}
.announce__item--promo b { color: #fff; font-weight: 700; }
.announce__item--promo .ico { opacity: 1; }
.announce__sep { opacity: .5; }
.announce__copy.is-dup, .announce__sep.is-dup { display: none; }

/* ==========================================================================
   7. Header — pastille flottante
   ========================================================================== */
.site-header {
  position: fixed;
  top: calc(var(--annonce-h) + 14px);
  left: 0; right: 0;
  z-index: 50;
  padding-inline: var(--pad-x);
  pointer-events: none;
}
.pastille {
  position: relative;
  pointer-events: auto;
  max-width: 1080px;
  margin-inline: auto;
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px 12px 10px 22px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(247,247,245,.34) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 10px 30px -12px rgba(26,39,69,.28), inset 0 1px 0 rgba(255,255,255,.9);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-radius var(--dur) var(--ease);
}
.site-header.scrolled .pastille {
  background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(247,247,245,.55) 100%);
  box-shadow: 0 14px 40px -12px rgba(26,39,69,.4), inset 0 1px 0 rgba(255,255,255,.95);
}
/* voile plein qui apparaît EN FONDU à l'ouverture du menu (le verre fermé reste, comme desktop) */
.pastille::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--fond);
  opacity: 0; pointer-events: none; z-index: 0;
  transition: opacity var(--dur) var(--ease);
}
.site-header.menu-open .pastille::after { opacity: 1; }
.pastille > * { position: relative; z-index: 1; }
.pastille__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.pastille__logo img { height: 30px; width: auto; }

.pastille__nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; position: relative; }
.pastille__nav a {
  position: relative;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  font-size: .92rem; font-weight: 500;
  color: var(--texte);
  white-space: nowrap;
  transition: color .15s var(--ease);   /* actif instantané, pas de fondu qui glisse */
}
.pastille__nav-pill {
  position: absolute; z-index: 0; top: 0; bottom: 0; left: 0;
  border-radius: var(--r-pill);
  /* verre translucide, sans bordure, façon segmented iOS — plus le bleu signature */
  background: linear-gradient(155deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.24) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  backdrop-filter: blur(10px) saturate(1.5);
  box-shadow: 0 4px 12px -5px rgba(26,39,69,.22), inset 0 1px 0 rgba(255,255,255,.9);
  opacity: 0; pointer-events: none;
  transition: transform var(--dur) var(--ease), width var(--dur) var(--ease), opacity .25s var(--ease);
}
.pastille__nav a:not(.is-active):hover { background: rgba(26,39,69,.06); }
.pastille__nav a.is-active { color: var(--accent); }   /* texte accent sur la pastille verre */

.pastille__cta { flex: 0 0 auto; display: flex; align-items: center; }
.pastille__cta .btn { padding: 12px 20px; font-size: .92rem; }

.pastille__toggle {
  display: none;
  align-items: center; gap: 10px;
  padding: 9px 15px 9px 17px; min-height: 44px;
  border: 1.5px solid rgba(26,39,69,.2);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.4);
  font-size: .9rem; font-weight: 600; color: var(--texte);
}
/* hamburger animé -> croix */
.burger { position: relative; width: 17px; height: 12px; flex: 0 0 auto; }
.burger span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), top var(--dur) var(--ease);
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 5px; }
.burger span:nth-child(3) { top: 10px; }
.site-header.menu-open .burger span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.site-header.menu-open .burger span:nth-child(2) { opacity: 0; }
.site-header.menu-open .burger span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

/* panneau mobile (dans le flux de la pastille) */
.pastille__panel { display: none; }

/* ==========================================================================
   8. Mist (fond hero / footer / hero de page)
   ========================================================================== */
.mist {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #FFFFFF;   /* base blanche nette : plus aucun dégradé (l'effet WebGL viendra par-dessus) */
}
.mist--dark { background: var(--nuit); }   /* base foncée sous l'effet, pour la section de contraste */
.mist canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mist__grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   9. Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;                 /* démarre tout en haut, le foil est le fond jusqu'au sommet */
  display: grid;
  place-items: center;
  padding-block: var(--s7);           /* même espace en haut et en bas, le header flotte par-dessus */
  isolation: isolate;
  text-align: center;
}
.hero .container { position: relative; z-index: 1; }
.hero__inner { display: flex; flex-direction: column; align-items: center; gap: var(--s3); max-width: 1120px; margin-inline: auto; }
.hero-badge {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px 7px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: 0 14px 36px -16px rgba(26,39,69,.28), inset 0 1px 1px rgba(255,255,255,.6);
  font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: .82rem; line-height: 1.4; letter-spacing: .05em;
  color: var(--texte);
  margin-bottom: 4px;
}
/* reflet spéculaire (brillance verre premium) */
.hero-badge::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(128deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.12) 42%, rgba(255,255,255,0) 60%);
}
.hero-badge > * { position: relative; z-index: 1; }
.hero-badge img { height: 16px; width: auto; }
.hero h1 { max-width: none; line-height: 1.15; }   /* titre pleine largeur du conteneur (2-3 lignes), interligne un peu aéré */
.hero__tagline { font-size: clamp(1.1rem, 1.6vw, 1.45rem); color: var(--texte-corps); max-width: 48ch; }
.hero .btn-row { margin-top: var(--s2); }

/* Indicateur de scroll (hero d'accueil, pleine hauteur) */
.scroll-hint {
  position: absolute; left: 0; right: 0; width: fit-content; margin-inline: auto;
  bottom: calc(32px + env(safe-area-inset-bottom));
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-decoration: none;
  transition: opacity .7s var(--ease);
}
.scroll-hint__word {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--accent); opacity: .7;
}
.scroll-hint__line {
  position: relative; width: 1px; height: 56px;
  background: rgba(26,39,69,.32);   /* bleu nuit, un peu plus marqué */
  overflow: hidden;
}
.scroll-hint__glow {
  position: absolute; inset: 0 auto auto 0; width: 100%; height: 40%;
  background: linear-gradient(to bottom, transparent, #fff, transparent);
  transform: translateY(-100%);
  /* flux continu (comme un ticker : linear) : la lueur repart d'en haut dès qu'elle sort en bas, sans pause */
  animation: scroll-hint-glow 2.4s linear infinite;
}
@keyframes scroll-hint-glow {
  from { transform: translateY(-100%); }
  to   { transform: translateY(250%); }
}
.scroll-hint.is-hidden { opacity: 0; pointer-events: none; }
@media (min-width: 768px) { .scroll-hint__line { height: 72px; } }
@media (prefers-reduced-motion: reduce) {
  .scroll-hint__glow { animation: none; transform: translateY(75%); }   /* figée au milieu */
}

/* hero de page (intérieur) : plus court */
.page-hero {
  min-height: min(82svh, 680px);      /* agrandi : plus de respiration, le header ne mange plus le haut */
  padding-block: var(--s7);
}
.page-hero h1 { max-width: 22ch; font-size: clamp(2rem, 3.9vw, 3rem); }   /* un cran sous le H1 de l'accueil */
/* pages légales : hero plus court, contenu recentré dans la zone visible (header fixe déduit) */
.page-hero--slim { min-height: min(52svh, 420px); padding-block: calc(var(--annonce-h) + 74px) 0; }

/* ==========================================================================
   10. Accordéon (méthode + FAQ)
   ========================================================================== */
.accordion { border-top: 1px solid rgba(26,39,69,.14); }
.acc-item { border-bottom: 1px solid rgba(26,39,69,.14); }
.acc-head {
  width: 100%;
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) 4px;
  min-height: 44px;
  background: none; border: 0; text-align: left;
  transition: color var(--dur) var(--ease);
}
.acc-num {
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 1rem; color: var(--accent);
  font-feature-settings: "tnum" 1;
  flex: 0 0 auto; min-width: 30px; margin-top: 2px;
}
.acc-main { flex: 1; display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.acc-title { font-family: 'Cinzel', serif; font-weight: 600; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--texte); flex: 1; line-height: 1.25; }
.acc-time {
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: .82rem;
  color: var(--texte-corps); white-space: nowrap; flex: 0 0 auto;
  padding: 4px 12px; border-radius: var(--r-pill);
  background: rgba(44,75,140,.08);
}
.acc-chevron { flex: 0 0 auto; color: var(--accent); transition: transform var(--dur) var(--ease); }
.acc-chevron .ico { width: 20px; height: 20px; display: block; }
.acc-item.open .acc-chevron { transform: rotate(180deg); }
.acc-head:hover .acc-title { color: var(--accent); }

.acc-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur) var(--ease);
}
.acc-item.open .acc-panel { max-height: 420px; }
.acc-panel__inner { padding: 0 4px var(--s3) calc(30px + var(--s2) + 4px); }
.acc-panel__inner p { color: var(--texte-corps); max-width: 62ch; }

.acc-foot { margin-top: var(--s3); }
.acc-foot .caption { color: var(--texte-corps); display: inline-flex; align-items: center; gap: 8px; }
.acc-foot .ico { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }

/* colonne d'accordéon contenue et centrée */
.acc-wrap { max-width: 820px; margin-inline: auto; }
.acc-wrap--left { margin-inline: 0; }

/* FAQ : pas de numéro */
.faq .acc-num { display: none; }
.faq .acc-title { font-family: 'Cinzel', serif; }

/* ==========================================================================
   10 ter. Frise numérotée (méthode) : rail dégradé rempli au scroll,
           losange à gauche de chaque numéro, étapes révélées une par une
   ========================================================================== */
.frise-wrap { max-width: 820px; margin-inline: auto; }
.frise { position: relative; --num-size: clamp(1.6rem, 2.6vw, 2.1rem); --los: 12px; }
.frise__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s7); }
/* desktop et tablette : durée à droite du titre, sur la même ligne, pour toutes les étapes.
   Si une seule ne tient pas, le JS pose .frise--empile : TOUTES passent sous leur titre. */
.frise__step {
  display: grid;
  grid-template-columns: 24px auto minmax(0, max-content) 1fr;
  grid-template-areas:
    "los num title time"
    ".   .   text  text";
  column-gap: var(--s3); row-gap: var(--s2);
  align-items: center;
}
.frise--empile .frise__step {
  grid-template-columns: 24px auto 1fr;
  grid-template-areas:
    "los num title"
    ".   .   time"
    ".   .   text";
}
/* chaque étape apparaît quand la barre atteint son losange, puis reste affichée (is-vu) ;
   losange et numéro suivent la barre dans les deux sens (is-on) */
.js .frise__step {
  opacity: 0; transform: translateY(28px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js .frise__step.is-vu { opacity: 1; transform: none; }
/* rail : simple support du remplissage, sans piste visible en fond ; le JS le cale
   entre le 1er et le dernier losange */
.frise__rail {
  position: absolute; left: 12px; top: calc(var(--num-size) / 2); bottom: 0;
  width: 2px; margin-left: -1px; border-radius: 2px;
}
/* remplissage : dégradé de la ligne, dévoilé au scroll sans se tasser.
   Aucune transition : la barre suit le scroll au pixel (une transition la fait traîner derrière le doigt) */
.frise__fill {
  position: absolute; inset: 0; border-radius: inherit; will-change: clip-path;
  /* dégradé signature dans la LARGEUR de la barre, à pleine opacité : moitié gauche bleu accent, moitié droite
     bleu nuit, le même du haut en bas (la barre ne change pas de couleur en descendant) */
  background: linear-gradient(90deg, #2C4B8C, #1A2745);
  background: linear-gradient(90deg in oklch, #2C4B8C, #1A2745);
}
.js .frise__fill { clip-path: inset(0 0 100% 0); }
/* losange sur le rail : creux tant que la barre ne l'a pas atteint, puis plein du dégradé signature,
   jamais d'une couleur unie */
.frise__losange {
  grid-area: los; justify-self: center;
  position: relative; z-index: 1;
  width: var(--los); height: var(--los);
  transform: rotate(45deg);
  border-radius: 2px;
  background: var(--fond); border: 1.5px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* le plein : le même dégradé que la barre, de gauche (bleu accent) à droite (bleu nuit). Le carré étant
   tourné de 45°, l'angle se compte dans son repère : 45deg = de gauche à droite à l'écran. Posé sur un
   calque qui apparaît en fondu : un dégradé ne se transitionne pas */
.frise__losange::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit;
  background: linear-gradient(45deg, #2C4B8C, #1A2745);
  background: linear-gradient(45deg in oklch, #2C4B8C, #1A2745);
  transition: opacity var(--dur) var(--ease);
}
.js .frise__step:not(.is-on) .frise__losange { border-color: rgba(26,39,69,.28); }
.js .frise__step:not(.is-on) .frise__losange::before { opacity: 0; }
.frise__step.is-on .frise__losange { box-shadow: 0 0 0 4px rgba(44,75,140,.10); }
/* numéro nu, en grand (chiffres en sans-serif) : teinte claire, puis accent quand la barre l'atteint */
.frise__num {
  grid-area: num;
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: var(--num-size); line-height: 1; letter-spacing: -.01em;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--accent);
  transition: color var(--dur) var(--ease);
}
.js .frise__step:not(.is-on) .frise__num { color: #B0BBD0; }
.frise__title { grid-area: title; font-family: 'Cinzel', serif; font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.32rem); line-height: 1.25; color: var(--texte); margin: 0; }
/* durée : à droite du titre (desktop, tablette), dessous en mobile ; même place pour toutes les étapes */
.frise__time {
  grid-area: time; justify-self: start;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: .82rem;
  color: var(--texte-corps); white-space: nowrap;
  padding: 4px 12px; border-radius: var(--r-pill);
  background: rgba(44,75,140,.08);
}
.frise__step p { grid-area: text; color: var(--texte-corps); max-width: 62ch; margin: 0; }
.frise-wrap .acc-foot { margin-top: var(--s5); }
@media (max-width: 600px) {
  .frise { --los: 10px; }
  .frise__steps { gap: var(--s6); }
  .frise__step {
    grid-template-columns: 20px auto 1fr;
    grid-template-areas:
      "los num  title"
      ".   time time"
      ".   text text";
    column-gap: var(--s2);
  }
  .frise__rail { left: 10px; }
  .frise__time { white-space: normal; }
  .frise-wrap .acc-foot { margin-top: var(--s4); }
}

/* ==========================================================================
   10 bis. Prestations — bento asymétrique (grande / 4 items / grande)
   ========================================================================== */
.mcard {
  display: flex; flex-direction: column;
  background: var(--fond);
  border: 1px solid rgba(44,75,140,.20);   /* liseré accent, faible opacité */
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card), var(--liseré);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mcard:hover {
  transform: translateY(-3px);
  border-color: rgba(44,75,140,.34);
  box-shadow: 0 10px 26px -12px rgba(26,39,69,.34), var(--liseré);
}
.mcard__img {
  background: var(--fond);          /* blanc cassé (crème) : détache les illustrations à fond blanc */
  overflow: hidden;
}
.mcard__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease); }
.mcard:hover .mcard__img img { transform: scale(1.05); }
.mcard__body {
  padding: var(--s4);
  /* bloc texte sous l'image : le dégradé clair à l'angle du dégradé signature (135°), comme les boutons clairs */
  background: var(--degrade-clair-135);
  border-top: 1px solid rgba(44,75,140,.12);
  display: flex; flex-direction: column; gap: 8px;
}
.mcard__body h3 {
  font-family: 'Cinzel', serif; font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.28; color: var(--accent);
}
.mcard__body p { color: var(--texte-corps); font-size: .95rem; line-height: 1.55; }

/* grille bento : 4 colonnes ; la grande occupe 2 COLONNES (jamais 2 rangées,
   sinon un vide énorme se creuse sous un texte court). Ordre : grande / 4 petites /
   grande, placées automatiquement (grande = cols 1-2, puis 2 petites ; petite, petite,
   grande = cols 3-4). Les cartes d'une même rangée s'égalisent en hauteur. */
.pgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
  margin-top: var(--s5);
  align-items: stretch;
}
.pgrid .mcard--big { grid-column: span 2; }
/* hauteur d'image FIXE et IDENTIQUE partout → jamais deux images de tailles différentes */
.pgrid .mcard__img { flex: 0 0 auto; height: 208px; }
/* le texte se cale EN HAUT du panneau bas : le même écart image → titre sur toutes les cartes, même quand
   une rangée s'étire à la carte la plus remplie (l'espace en trop passe en bas, jamais au-dessus du titre) */
.pgrid .mcard__body { flex: 1 1 auto; justify-content: flex-start; }
.pgrid .mcard__body { padding: var(--s3); gap: 6px; }   /* même marge et même écart titre → texte sur TOUTES les cartes, grandes comprises */
.pgrid .mcard--item .mcard__body h3 { font-size: clamp(1.05rem, 1.5vw, 1.28rem); }   /* même taille que les grandes cartes */
.pgrid .mcard--item .mcard__body p { font-size: .9rem; line-height: 1.45; }

/* ==========================================================================
   11. Bento (prestations)
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  align-items: stretch;
}
.tile {
  display: flex; flex-direction: column;
  background: var(--fond);
  border: 1px solid rgba(26,39,69,.08);
  border-radius: var(--r);
  box-shadow: var(--sh-card), var(--liseré);
  overflow: hidden;
}
.tile__img {
  background: var(--fond);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.tile__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--ease); }
.tile:hover .tile__img img { transform: scale(1.05); }
.tile__body { padding: var(--s3); display: flex; flex-direction: column; gap: 8px; }
.tile__body h3 { color: var(--texte); }
.tile__body p { color: var(--texte-corps); font-size: .96rem; line-height: 1.5; }

/* tuile dominante : Suivi du site — 2×2, image top puis titre puis texte (ordre identique) */
.tile--wide { grid-column: span 2; grid-row: span 2; }
.tile--wide .tile__img { aspect-ratio: auto; flex: 1; min-height: 300px; }
.tile--wide .tile__body { padding: var(--s4); gap: 10px; }
.tile--wide .tile__body h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.tile--wide .tile__body p { font-size: 1.02rem; }

/* ==========================================================================
   12. Section de contraste — item à icône en rangée (périmètre)
   ========================================================================== */
.rows { max-width: 900px; }
.row-item {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: var(--s3);
  align-items: center;
  padding: var(--s4) 0;
  position: relative;
}
.row-item + .row-item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: rgba(26,39,69,.12);
}
.row-item__media {
  background: var(--fond);
  border: 1px solid rgba(26,39,69,.07);
  border-radius: var(--r);
  padding: 8px;
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  box-shadow: var(--sh-card);
}
.row-item__media img { width: 100%; height: 100%; object-fit: contain; }
.row-item__text h3 { color: var(--texte); margin-bottom: 8px; }
.row-item__text p { color: var(--texte-corps); max-width: 56ch; }

/* ==========================================================================
   13. Tarifs — sélecteur segmenté + carte unique
   ========================================================================== */
.segmented {
  display: inline-flex;
  gap: 4px; padding: 5px;
  background: var(--gris);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-soft) inset;
  margin-inline: auto;
  position: relative;
}
.segmented__btn {
  position: relative; z-index: 1;
  flex: 1 1 0;
  min-width: 130px;
  min-height: 44px;
  padding: 11px 22px;
  border: 0; background: none;
  border-radius: var(--r-pill);
  font-weight: 600; font-size: .95rem; color: var(--texte);
  transition: color var(--dur) var(--ease);
  white-space: nowrap;
}
.segmented__btn.is-active { color: var(--texte-clair); }
.segmented__hover {
  position: absolute; z-index: 0;
  top: 5px; bottom: 5px; left: 5px;
  border-radius: var(--r-pill);
  background: rgba(26,39,69,.08);
  opacity: 0; pointer-events: none;
  transition: transform var(--dur) var(--ease), width var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.segmented__pill {
  position: absolute; z-index: 0;
  top: 5px; bottom: 5px; left: 5px;
  border-radius: var(--r-pill);
  background: var(--degrade-accent);
  box-shadow: 0 4px 12px -4px rgba(26,39,69,.5);
  transition: transform var(--dur) var(--ease), width var(--dur) var(--ease);
}
/* sélecteur sur la section de contraste (tarifs) */
.on-accent .segmented { background: rgba(247,247,245,.16); box-shadow: none; }
.on-accent .segmented__btn { color: var(--texte-clair); }
.on-accent .segmented__btn.is-active { color: var(--accent); }
.on-accent .segmented__pill { background: var(--fond); box-shadow: 0 4px 14px -4px rgba(12,20,38,.5); }
.on-accent .segmented__hover { background: rgba(247,247,245,.16); }
.segmented__btn { cursor: pointer; }

.price-card {
  margin-top: var(--s5);
  background: var(--fond);
  border: 1px solid rgba(26,39,69,.08);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card), var(--liseré);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  overflow: hidden;
  text-align: left;
  min-height: 360px;
}
.price-var { padding: var(--s5); position: relative; }
.price-var::after {
  content: ""; position: absolute; top: var(--s5); bottom: var(--s5); right: 0;
  width: 1px; background: rgba(26,39,69,.12);
}
.price-panel { display: none; flex-direction: column; gap: var(--s3); }
.price-panel.is-active { display: flex; }
.price-panel__top { display: flex; flex-direction: column; gap: 4px; }
.price-name { font-family: 'Cinzel', serif; font-weight: 600; font-size: clamp(1.5rem, 2.2vw, 1.7rem); color: var(--texte); line-height: 1.15; }
.price-amount { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--accent); font-feature-settings:"tnum" 1; margin-top: 2px; }
/* variante offre de lancement : prix remisé + ancien prix barré + badge -X% */
.price-amount--promo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.price-amount--promo .price-now { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--accent); font-feature-settings:"tnum" 1; }
.price-amount--promo .price-was { font-family: 'Inter', sans-serif; font-weight: 500; font-size: .98rem; color: var(--texte-corps); text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: .75; font-feature-settings:"tnum" 1; }
.price-amount--promo .price-off { align-self: center; background: var(--promo); color: #fff; font-family: 'Inter', sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .03em; padding: 2px 8px; border-radius: var(--r-pill); }
/* bannière offre de lancement sous le titre tarifs (verre vert sur fond sombre) */
.promo-banner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px var(--s2); text-align: center;
  max-width: 680px; margin: calc(var(--s2) * -1) auto var(--s4);
  padding: 12px 22px;
  background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.38);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(52,211,153,.18);
}
.promo-banner__tag { display: block; color: var(--promo-clair); font-weight: 700; letter-spacing: .01em; text-wrap: balance; }
/* l'icône est DANS la ligne du texte : si le titre passe à la ligne (mobile), elle reste devant
   « Offre de lancement », jamais centrée seule entre les deux lignes */
.promo-banner__tag .ico { display: inline-block; width: 17px; height: 17px; vertical-align: -0.15em; margin-right: 8px; }
.promo-banner__text { color: var(--texte-clair-2); font-size: .93rem; }
.promo-banner__places { color: var(--promo-clair); }   /* « plus que 4 places » : le vert du cadre et du −25 % */
.price-tagline { color: var(--texte-corps); margin-top: 4px; }
/* séparateur AVANT la liste, comme avant le bouton */
.price-list { display: flex; flex-direction: column; gap: 16px; margin-top: 0; padding-top: var(--s3); border-top: 1px solid rgba(26,39,69,.12); }
.price-list li { display: grid; grid-template-columns: 26px 1fr; gap: 6px; align-items: start; }
.price-list .ico { width: 20px; height: 20px; color: var(--accent); margin-top: 1px; }
.price-list b { color: var(--accent); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; }
.price-list span { color: var(--texte-corps); }
.price-list .li-text { display: flex; flex-direction: column; gap: 3px; }
.price-list .li-text > span { color: var(--texte); font-size: .98rem; line-height: 1.4; }
.price-cta { margin-top: 0; padding-top: var(--s3); border-top: 1px solid rgba(26,39,69,.12); }
.price-cta .btn { width: 100%; }
/* carte en deux colonnes (tablette paysage, ordinateur) : le bouton se centre entre son séparateur et le bas de la carte */
@media (min-width: 769px) {
  .price-var { display: flex; flex-direction: column; }
  .price-var .price-panel.is-active { flex: 1; }
  /* la zone du bouton descend jusqu'au bord de la carte (marge négative = padding du bas) ; même marge au-dessus et au-dessous, donc bouton centré même sans espace en plus */
  .price-cta { flex: 1; display: flex; align-items: center; padding-block: calc((var(--s3) + var(--s5)) / 2); margin-bottom: calc(-1 * var(--s5)); }
}
/* le bouton vit dans une carte CLAIRE posée sur la section accent : primaire NORMAL (pas inversé) */
.price-card .btn-primary { background: var(--degrade-accent); color: var(--texte-clair); box-shadow: 0 6px 18px -6px rgba(26,39,69,.5); filter: none; }
.price-card .btn-primary:hover { filter: brightness(1.09); transform: translateY(-2px); }

.price-fixed { padding: var(--s5); background: linear-gradient(135deg, rgba(220,228,237,.5), rgba(220,228,237,.22)); }   /* même angle que le dégradé signature */
.price-fixed h3 { color: var(--texte); margin-bottom: var(--s3); font-size: 1.05rem; }
.price-incl { display: flex; flex-direction: column; gap: 14px; }
.price-incl li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; color: var(--texte-corps); }
.price-incl .ico { width: 18px; height: 18px; color: var(--accent); margin-top: 3px; }

/* ==========================================================================
   15. Split avec chevauchement (studio)
   ========================================================================== */
.overlap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
}
.overlap__img {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-card);
  aspect-ratio: 4 / 5;   /* ratio exact du portrait (400x500) => image ENTIÈRE, jamais rognée */
}
.overlap__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.overlap__panel {
  align-self: center;
  margin-left: -18%;
  z-index: 2;
  background: var(--fond);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card), var(--liseré);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s2);
}
.overlap__panel h2 { color: var(--texte); }
.overlap__panel h3 { color: var(--accent); font-size: 1.1rem; font-weight: 600; margin-top: -6px; }
.overlap__panel p { color: var(--texte-corps); }
.overlap__panel .prose { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }

/* ==========================================================================
   15 bis. Le studio : présentation et zone d'intervention réunies (une seule carte, 2 × 2)
   ========================================================================== */
.who {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "bio photo" "map cities";
  gap: var(--s5); align-items: center;
  padding: var(--s5);
  background: var(--fond);
  border: 1px solid rgba(26,39,69,.08);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card), var(--liseré);
}
.who__bio { grid-area: bio; display: flex; flex-direction: column; gap: var(--s2); }
.who__bio .overline + h2 { margin-top: 8px; }
.who__bio h2 { text-wrap: pretty; }
.who__bio h3 { color: var(--accent); font-size: 1.1rem; font-weight: 600; margin-top: -6px; }
.who__bio .prose { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.who__bio .panel-quote { text-align: left; }
.who__photo { grid-area: photo; }
.who__pclip { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-card); }
.who__pclip::before { content: ""; display: block; padding-top: 125%; }   /* 4/5 */
.who__pclip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.who__map { grid-area: map; }
.who__cities { grid-area: cities; }
.who__h { font-size: 1.25rem; color: var(--texte); }
.crows { margin: var(--s2) 0 0; }
.crow { position: relative; display: flex; align-items: center; gap: var(--s2); min-height: 48px; padding-block: 8px; font-weight: 600; line-height: 1.4; color: var(--texte); }
.crow__pin {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--degrade-clair); color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(44,75,140,.12);
}
.crow__pin .ico { width: 16px; height: 16px; }
.crow:last-child .crow__pin { background: var(--degrade-signature); color: var(--texte-clair); box-shadow: none; }   /* le siège */
.crow + .crow::before { content: ""; position: absolute; top: 0; left: 48px; right: 0; height: 1px; background: rgba(26,39,69,.14); }

/* carte de localisation stylisée : vrais contours, rayon à l'échelle, étiquettes en HTML à l'échelle de la carte */
.zmap { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-card); background: #DCE4ED; container-type: inline-size; }
.zmap::before { content: ""; display: block; padding-top: 83.3%; }   /* cadre du viewBox (1000 × 833) */
.zmap > svg { position: absolute; inset: 0; width: 100%; height: 100%; }   /* le fond de carte seulement, pas le pin */
.zm-sea { fill: #DCE4ED; }
.zm-landf { fill: #FFFFFF; }
.zm-zone { fill: rgba(44,75,140,.10); }
.zm-dep { fill: none; stroke: rgba(26,39,69,.2); stroke-width: 1; vector-effect: non-scaling-stroke; }   /* frontières intérieures seulement */
.zm-coast { fill: none; stroke: rgba(44,75,140,.4); stroke-width: 1; vector-effect: non-scaling-stroke; }
.zm-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.zm-pt { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; z-index: 1; font-size: clamp(10px, 2.3cqw, .875rem); }
.zm-pt--siege { z-index: 2; }
.zm-pt i {
  font-size: clamp(7px, 2.1cqw, .875rem);
  position: absolute; left: -.3077em; top: -.3077em; width: .6154em; height: .6154em; border-radius: 50%;
  background: var(--texte); box-shadow: 0 0 0 .2308em #FFFFFF;
}
.zm-pin {
  font-size: clamp(8px, 2.4cqw, 13px);
  position: absolute; width: 2.7692em; height: 2.7692em; left: -1.3846em; top: -2.5385em;
  fill: var(--accent); stroke: #FFFFFF; stroke-width: 1.5;
  filter: drop-shadow(0 3px 6px rgba(26,39,69,.35));
}
.zm-pin circle { fill: #FFFFFF; stroke: none; }
.zm-lbl {
  position: absolute; white-space: nowrap; line-height: 1;
  padding: .3846em .6923em; border-radius: var(--r-pill);
  font-family: 'Inter', sans-serif; font-size: 1em; font-weight: 600; color: var(--texte);
  background: #FFFFFF; box-shadow: 0 2px 8px rgba(26,39,69,.16);
}
.zm-pt--siege .zm-lbl { font-weight: 700; color: var(--accent); }
.zm-lbl[data-d="right"] { left: .9231em; top: 0; transform: translateY(-50%); }
.zm-lbl[data-d="left"] { right: .9231em; top: 0; transform: translateY(-50%); }
.zm-lbl[data-d="below"] { left: 0; top: .9231em; transform: translateX(-50%); }
.zm-lbl[data-d="above"] { left: 0; bottom: .9231em; transform: translateX(-50%); }

@media (max-width: 1023px) {
  .who { gap: var(--s4); }
}
@media (max-width: 767px) {
  .who { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "bio" "map" "cities"; padding: var(--s4) var(--s3); }
  .zmap::before { padding-top: 100%; }   /* carré recadré au centre */
  .zm-pt { left: var(--xm); top: var(--ym); font-size: clamp(10px, 3.4cqw, .875rem); }
  .zm-pt i { font-size: clamp(7px, 2.6cqw, .875rem); }
  .zm-lbl[data-d] { left: auto; right: auto; top: auto; bottom: auto; transform: none; }
  .zm-lbl[data-m="right"] { left: .8333em; top: 0; transform: translateY(-50%); }
  .zm-lbl[data-m="left"] { right: .8333em; top: 0; transform: translateY(-50%); }
  .zm-lbl[data-m="below"] { left: 0; top: .8333em; transform: translateX(-50%); }
  .zm-lbl[data-m="above"] { left: 0; bottom: .8333em; transform: translateX(-50%); }
}

/* ==========================================================================
   16. Citation pleine page
   ========================================================================== */
.quote { text-align: center; }
.quote__wrap { position: relative; max-width: 900px; margin-inline: auto; padding-top: 40px; }
.quote__mark {
  position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: clamp(9rem, 16vw, 14rem); line-height: 1;
  color: rgba(44,75,140,.16);
  z-index: 0; pointer-events: none; user-select: none;
}
.quote blockquote {
  position: relative; z-index: 1; margin: 0;
  font-family: 'Cinzel', serif; font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.28; letter-spacing: -0.01em;
  color: var(--texte);
  text-wrap: balance;
}

/* citation intégrée au panneau studio (guillemet + police de la citation) */
.panel-quote {
  margin: var(--s3) 0 0; padding-top: var(--s3);
  border-top: 1px solid rgba(26,39,69,.12);
  font-family: 'Cinzel', serif; font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.34; letter-spacing: -0.01em;
  color: var(--accent); text-align: center;
}
.panel-quote__mark {
  font-family: 'Cinzel', serif; font-weight: 700;
  color: rgba(44,75,140,.28); font-size: 2.2em; line-height: 0;
  vertical-align: -0.42em; margin-right: .1em;
}

/* citation en carte séparée (Option B) */
.quote-card {
  position: relative; max-width: 760px; margin: var(--s5) auto 0;
  background: var(--fond);
  border: 1px solid rgba(26,39,69,.08);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card), var(--liseré);
  padding: clamp(var(--s4), 4vw, var(--s5)) clamp(var(--s4), 5vw, var(--s6));
  text-align: center;
}
.quote-card__mark {
  display: block; font-family: 'Cinzel', serif; font-weight: 700;
  color: rgba(44,75,140,.22); font-size: 4rem; line-height: .6; margin-bottom: 6px;
}
.quote-card blockquote {
  margin: 0; font-family: 'Cinzel', serif; font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.32; letter-spacing: -0.01em;
  color: var(--texte); text-wrap: balance;
}

/* ==========================================================================
   17. Carte CTA
   ========================================================================== */
.cta-card {
  text-align: center;
  border-radius: var(--r-xl);
  padding: clamp(var(--s5), 6vw, var(--s7)) var(--s4);
  color: var(--texte-clair);
  background: var(--nuit);   /* base foncée sous le mist (plus de dégradé, l'effet WebGL prend sa place) */
  box-shadow: var(--sh-card);
  position: relative; overflow: hidden;
}
.cta-card__inner { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.cta-card .overline { color: var(--texte-clair); opacity: .82; }
.cta-card h2 { color: var(--texte-clair); }
.cta-card p { color: var(--texte-clair-2); max-width: 52ch; }
.cta-card .btn-row { margin-top: var(--s2); }
.cta-card .btn-primary { background: var(--degrade-clair-135); color: var(--accent); box-shadow: var(--sh-card); filter: none; }   /* dégradé clair, à l'angle du dégradé signature */
.cta-card .btn-primary:hover { filter: brightness(.98); transform: translateY(-2px); }
.cta-card .btn-ghost { color: var(--texte-clair); border-color: rgba(247,247,245,.5); }
.cta-card .btn-ghost:hover { background: rgba(247,247,245,.12); border-color: rgba(247,247,245,.8); }

/* ==========================================================================
   18. Formulaire
   ========================================================================== */
.form-wrap { max-width: 720px; margin-inline: auto; }
.form-card {
  background: var(--fond);
  border: 1px solid rgba(26,39,69,.08);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card), var(--liseré);
  padding: clamp(var(--s4), 4vw, var(--s5));
}
.form-body { display: flex; flex-direction: column; gap: var(--s3); }
.field { display: flex; flex-direction: column; gap: 7px; text-align: left; }
.field label { font-weight: 600; font-size: .92rem; color: var(--texte); }
.field .opt-tag { font-weight: 500; color: var(--texte-corps); font-size: .82rem; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; font-weight: 500;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--texte);
  background: #fff;
  border: 1.5px solid rgba(26,39,69,.16);
  border-radius: var(--r);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: rgba(26,39,69,.42); }
.field select:invalid { color: rgba(26,39,69,.42); }
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer;
  padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232C4B8C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 20px 20px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(44,75,140,.18);
}
.field.error input, .field.error select, .field.error textarea { border-color: #C0473B; }
.field .err-msg { display: none; color: #C0473B; font-size: .82rem; font-weight: 500; }
.field.error .err-msg { display: block; }

/* pièce jointe */
.file-field { }
.file-drop {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  min-height: 48px; padding: 10px 14px;
  border: 1.5px dashed rgba(26,39,69,.24);
  border-radius: var(--r); background: #fff;
}
.file-drop label.file-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; min-height: 40px;
  background: var(--gris); border-radius: var(--r-pill);
  font-size: .88rem; font-weight: 600; color: var(--texte); cursor: pointer;
  border: 1px solid rgba(26,39,69,.14);
  transition: filter var(--dur) var(--ease);
}
.file-drop label.file-btn:hover { filter: brightness(.97); }
.file-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-name { font-size: .88rem; color: var(--texte-corps); }
.file-remove { display: none; border: 0; background: none; color: var(--accent); font-size: .85rem; font-weight: 600; text-decoration: underline; padding: 4px; }
.file-help { font-size: .8rem; color: var(--texte-corps); margin-top: 6px; }
/* texte d'aide sous le label, au-dessus du champ (style de .file-help), un écart sous lui avant le champ */
.field-help { font-size: .8rem; color: var(--texte-corps); margin-bottom: 4px; }


.form-submit { margin-top: var(--s4); }
/* CTA du formulaire : le même dégradé clair que le bouton de la carte CTA, à l'angle du dégradé signature
   (135°), pleine largeur, texte accent */
.form-submit .btn {
  width: 100%; padding-block: 17px; font-size: 1.05rem;
  background: var(--degrade-clair-135);
  color: var(--accent);
  border: 1px solid rgba(44,75,140,.22);
  box-shadow: var(--sh-card), var(--liseré);
}
.form-submit .btn:hover {
  filter: none;
  border-color: rgba(44,75,140,.40);
  box-shadow: 0 10px 26px -12px rgba(26,39,69,.34), var(--liseré);
  transform: translateY(-2px);
}
.form-note { margin-top: var(--s3); font-size: .82rem; color: var(--texte-corps); text-align: left; }
.form-note a { color: var(--accent); text-decoration: underline; }
.form-fail { display: none; margin-top: var(--s2); color: #C0473B; font-weight: 500; font-size: .9rem; }
.form-success { display: none; text-align: center; padding: var(--s4) 0; }
.form-success h3 { color: var(--texte); margin-bottom: 8px; }
.form-success p { color: var(--texte-corps); }
form.sent .form-body, form.sent .form-submit, form.sent .form-note, form.sent .form-fail { display: none; }
form.sent .form-success { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.form-intro-note { color: var(--texte-corps); font-size: .95rem; margin-top: 8px; }

/* ==========================================================================
   20. Pages légales
   ========================================================================== */
.legal { max-width: 760px; margin-inline: auto; }
.legal__block { margin-bottom: var(--s5); }
.legal__block h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: var(--s2); display: flex; gap: 12px; align-items: baseline; }
.legal__num { font-family: 'Inter', sans-serif; color: var(--accent); font-weight: 700; font-size: .95em; font-feature-settings:"tnum" 1; }
.legal__block p { color: var(--texte-corps); margin-bottom: 14px; max-width: 68ch; }
.legal__block ul { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.legal__block li { color: var(--texte-corps); padding-left: 18px; position: relative; }
.legal__block li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.legal__block a { color: var(--accent); text-decoration: underline; }
.legal__block b { color: var(--texte); font-weight: 600; }

/* ==========================================================================
   21. Footer (mist)
   ========================================================================== */
.footer {
  position: relative;
  isolation: isolate;
  padding-block: var(--s5) var(--s4);   /* haut = séparation interne (desktop 48px) */
  color: var(--texte);
}
.footer > .container { position: relative; z-index: 1; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr;
  gap: var(--s5);
}
.footer__nav, .footer__practical { padding-top: 46px; } /* aligné sur le NOM de gauche, pas le logo */
.footer__id { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.footer__id img { height: 34px; width: auto; flex: 0 0 auto; }
.footer__brand { display: flex; align-items: center; gap: 10px; }
.footer__name { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.4rem; color: var(--texte); }
.footer__pos { font-family: 'Cinzel', serif; color: var(--accent); font-weight: 600; font-size: min(.9rem, 3.6vw); text-transform: uppercase; letter-spacing: .08em; line-height: 1.35; margin-top: 3px; text-wrap: balance; }   /* réduit sur petit téléphone pour tenir sur une ligne dès 360 px */
.footer__tag { color: var(--texte-corps); font-size: .95rem; }   /* la largeur de sa colonne, selon l'écran : une ligne dès que la place le permet */
.footer__col h2, .footer__col-title { font-family: 'Inter', sans-serif; font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; color: var(--accent); margin: 0 0 12px; }
.footer__group + .footer__group { margin-top: var(--s4); }
.footer__list { display: flex; flex-direction: column; gap: 12px; }
.footer__list a, .footer__list .footer__line { color: var(--texte-corps); display: inline-flex; align-items: center; gap: 10px; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); font-size: .95rem; cursor: pointer; }
.footer__list a:hover { color: var(--accent); transform: translateX(4px); }
.footer__list a:hover .ico { color: var(--accent); }
.footer__list .ico { width: 17px; height: 17px; color: var(--accent); flex: 0 0 auto; }
/* sous-lien d'une étude de cas, en retrait sous « Réalisations » */
.footer__list a.footer__sub { padding-left: 16px; margin-top: -4px; font-size: .88rem; }
.footer__legal-btn { background: none; border: 0; padding: 0; color: var(--texte-corps); text-align: left; font-size: .95rem; cursor: pointer; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.footer__legal-btn:hover { color: var(--accent); transform: translateX(4px); }
.footer__sep { border: 0; height: 1px; background: rgba(26,39,69,.14); margin: var(--s5) 0 var(--s4); }
.footer__bottom { display: flex; justify-content: flex-start; }
.footer__bottom .caption { color: var(--texte-corps); }

/* ==========================================================================
   22. Bandeau cookies
   ========================================================================== */
.cookie {
  position: fixed; inset: auto 0 0 0; z-index: 70;
  background: var(--fond);
  border-top: 1px solid var(--gris);
  box-shadow: 0 -8px 24px -12px rgba(26,39,69,.22);
  padding: var(--s3) var(--pad-x);
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}
.cookie.show { opacity: 1; transform: none; pointer-events: auto; }
.cookie__inner {
  max-width: var(--container); margin-inline: auto;
  display: flex; align-items: center; gap: var(--s4); justify-content: space-between; flex-wrap: wrap;
}
.cookie__msg { display: flex; align-items: center; gap: var(--s2); flex: 1 1 300px; }
.cookie__ico { flex: 0 0 auto; color: var(--accent); display: inline-flex; }
.cookie__ico .ico { width: 24px; height: 24px; }
.cookie__text { color: var(--texte-corps); font-size: .92rem; max-width: 64ch; }
.cookie__text a { color: var(--accent); text-decoration: underline; }
/* refuser aussi facile qu'accepter : deux boutons identiques, même style, même largeur, aucun dominant */
.cookie__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); flex: 0 0 auto; }
.cookie__actions .btn { padding: 12px 22px; font-size: .92rem; }
.cookie .btn-ghost { border-color: var(--accent); color: var(--accent); }

/* ==========================================================================
   23. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .footer__grid { gap: var(--s5); }

  /* prestations — MÊME bento, on passe juste à 2 colonnes (grande = pleine largeur) */
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .pgrid .mcard__img { height: 200px; }
}

/* prestations — mobile : une colonne. Grandes = image haut / texte bas.
   Les 4 items = image à GAUCHE / texte à DROITE (identiques entre eux). */
@media (max-width: 600px) {
  .pgrid { grid-template-columns: 1fr; margin-top: var(--s4); }
  .pgrid .mcard--big { grid-column: auto; }
  /* grandes : image en haut, texte dessous */
  .pgrid .mcard--big .mcard__img { height: 190px; }
  .pgrid .mcard__body h3, .pgrid .mcard--item .mcard__body h3 { font-size: 1.15rem; }
  /* items : image à gauche, texte à droite ; hauteur commune → 4 cartes identiques */
  .pgrid .mcard--item { flex-direction: row; align-items: stretch; min-height: 138px; }
  .pgrid .mcard--item .mcard__img { height: auto; flex: 0 0 34%; align-self: stretch; }
  /* plus de largeur pour le texte : image un peu plus étroite, marge intérieure resserrée */
  .pgrid .mcard--item .mcard__body {
    flex: 1 1 auto;
    padding: var(--s3) var(--s2);
    border-top: 0;
    border-left: 1px solid rgba(44,75,140,.12);
    justify-content: center;
  }
  .hero:not(.page-hero) h1 { font-size: 2.25rem; line-height: 1.12; }   /* reste le plus grand titre du site */
  h2 { font-size: 1.42rem; }
}

/* header : barre STATIQUE (logo + Menu) + panneau qui se déplie DESSOUS.
   Bascule juste sous la largeur mesurée : logo + 3 liens (« Fiche Google ») + CTA demandent 723px de
   pastille, soit 771px de fenêtre (marges latérales de 24px dès 768px) ; en dessous, le menu prend le relais */
@media (max-width: 770px) {
  /* barre STATIQUE en VERRE (identique au desktop) ; le menu se déplie DEPUIS elle,
     en-dessous, dans la même pastille. À l'ouverture, le voile ::after passe plein EN FONDU. */
  .pastille {
    padding: 8px 10px 8px 18px;
    flex-wrap: wrap; column-gap: 12px; row-gap: 0;
    border-radius: 28px;
    overflow: hidden;             /* le panneau suit les coins arrondis */
  }
  .pastille__nav, .pastille__cta { display: none; }
  .pastille__toggle { display: inline-flex; margin-left: auto; }
  .pastille__panel {
    display: block;
    flex-basis: 100%;
    max-height: 0; overflow: hidden;
    transition: max-height var(--dur) var(--ease);
  }
  .pastille__panel-inner { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 6px 4px 6px; }
  /* liens de nav du panneau (le CTA .btn est exclu : il garde son style de bouton complet) */
  .pastille__panel a:not(.btn) {
    padding: 12px 14px; min-height: 44px; display: flex; align-items: center;
    border-radius: var(--r); font-weight: 500; color: var(--texte);
    transition: background-color .15s var(--ease), color .15s var(--ease);
  }
  .pastille__panel a:not(.btn):hover { background: rgba(26,39,69,.05); }
  .pastille__panel a:not(.btn).is-active { background: rgba(44,75,140,.1); color: var(--accent); }
  /* CTA : bouton identique au CTA normal (dégradé accent, pilule, hover), juste pleine largeur */
  .pastille__panel .btn { margin-top: 8px; width: 100%; }
}

@media (max-width: 900px) {
  .overlap { grid-template-columns: 1fr; }
  .overlap__panel { margin-left: 0; margin-top: -56px; margin-inline: var(--s4); }  /* chevauchement conservé */
}

/* barre d'annonce : ticker tant que les 4 éléments ne tiennent pas sur une ligne (1 048 px + marges mesurés, 40 px de sécurité) */
@media (max-width: 1139px) {
  .announce { justify-content: flex-start; }
  .announce__track {
    justify-content: flex-start;
    width: max-content;
    padding-inline: 0;
    gap: 0;
    animation: ticker 23s linear infinite;   /* 18 s pour 3 éléments : même vitesse avec le 4e */
  }
  .announce__copy.is-dup { display: inline-flex; }
  /* pas de point au raccord : c'est un GAP en TÊTE de copie qui sépare la boucle */
  .announce__sep.is-dup { display: none; }
  /* vide de lecture EN TÊTE de chaque copie : au démarrage ET à chaque boucle, le 1er élément entre après un blanc → le temps de lire */
  .announce__copy { padding-left: var(--s7); }
  @media (prefers-reduced-motion: reduce) { .announce__track { animation: none; } }
}

@media (max-width: 768px) {
  :root { --pad-x: 16px; --annonce-h: 40px; }
  .section { padding-block: var(--s6); }
  .section--short { padding-block: var(--s5); }

  /* accordéon : repère de temps sous le titre (évite le débordement) */
  .acc-main { flex-direction: column; align-items: flex-start; gap: 8px; }
  .acc-time { white-space: normal; }
  .acc-panel__inner { padding-left: calc(30px + var(--s2)); }

  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile--wide { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .tile--wide .tile__img { min-height: 0; aspect-ratio: 16/10; }

  .price-card { grid-template-columns: 1fr; min-height: 0; }
  .price-var::after { display: none; }
  .price-var { border-bottom: 1px solid rgba(26,39,69,.12); }
  /* padding interne aligné sur les autres cartes mobile (32/24 au lieu de 48) */
  .price-var, .price-fixed { padding: var(--s4) var(--s3); }
  .segmented { display: flex; width: 100%; }
  .segmented__btn { min-width: 0; padding: 11px 8px; font-size: .86rem; }

  .row-item { grid-template-columns: 1fr; gap: var(--s2); }
  .row-item__media { max-width: 120px; }

  /* split chevauchement : entièrement empilé, aucune marge négative */
  .overlap { grid-template-columns: 1fr; gap: 0; }
  .overlap__panel {
    margin: -48px 0 0;                   /* carte pleine largeur : plus de double marge, chevauchement vertical conservé */
    padding: var(--s4) var(--s3);        /* padding interne réduit : 32/24 au lieu de 48 partout */
  }
  .panel-quote {
    font-size: .98rem; line-height: 1.42;
    padding-top: var(--s2); margin-top: var(--s2);
  }

  .footer { padding-top: 44px; }   /* haut = séparation interne + compensation interligne (logo sans line-height) */
  .footer__grid { grid-template-columns: 1fr; gap: var(--s4); }
  .footer__nav, .footer__practical { padding-top: 0; }
  .footer__sep { margin: var(--s4) 0; }
  .footer__sep--mobile { display: block; grid-column: 1 / -1; margin: 0; }   /* 32px (grid-gap) de chaque côté = comme le séparateur du bas */

  /* barre du bas compacte (façon Deckshop) : padding et gap resserrés */
  .cookie { padding: var(--s2) var(--pad-x); }
  .cookie__inner { flex-direction: column; align-items: stretch; gap: var(--s2); justify-content: flex-start; }
  /* en colonne, le flex-basis 300px deviendrait une HAUTEUR → bloc géant. On le neutralise. */
  .cookie__msg { flex: 0 0 auto; align-items: flex-start; }
  .cookie__text { font-size: .88rem; line-height: 1.4; }
  .cookie__actions { width: 100%; }
  .cookie__actions .btn { flex: 1; min-height: 44px; }

  .quote__mark { font-size: 7rem; }
  .btn-row .btn { flex: 1 1 auto; }
}

@media (min-width: 769px) { .footer__sep--mobile { display: none; } }
/* footer, iPad et petit ordinateur : l'identité sur toute la largeur (sa phrase tient sur une ligne),
   la navigation et le contact côte à côte dessous */
@media (min-width: 769px) and (max-width: 1199px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s5); }
  .footer__id { grid-column: 1 / -1; }
  .footer__nav, .footer__practical { padding-top: 0; }
}
/* grand écran : la colonne identité assez large pour sa phrase en une ligne */
@media (min-width: 1200px) { .footer__grid { grid-template-columns: 2fr 1fr 1.2fr; } }

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ==========================================================================
   26. Réalisations : carte projet, page Réalisations, étude de cas
   ========================================================================== */
.nw { white-space: nowrap; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Badge pilule : statique, informatif, plus petit qu'un bouton, sans ombre */
.badge {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: var(--r-pill);
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; line-height: 1.4;
  color: var(--accent); white-space: nowrap;
}
.badge--img {
  position: absolute; top: 16px; left: 16px; z-index: 1;
  background: rgba(247,247,245,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* ---- Carte image, variante portfolio (carte projet) ---- */
.realgrid { display: grid; gap: var(--s3); }
.pcard {
  position: relative;
  container-type: inline-size;
  display: grid; grid-template-columns: 1fr;
  background: var(--fond);
  border: 1px solid rgba(26,39,69,.08);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card), var(--liseré);
  overflow: hidden;
}
.pcard__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--gris-clair); }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pcard:hover .pcard__img img { transform: scale(1.05); }   /* un seul effet au survol : le zoom (la carte ne monte pas) */
.pcard__body { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: var(--s4); min-width: 0; container-type: inline-size; }
.pcard__cat {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .16em; color: var(--accent);
}
/* bloc d'identité : le logo du client à gauche, le nom sur une ligne et la ville dessous ; un filet le sépare du texte */
.pcard__id {
  display: flex; align-items: center; gap: var(--s2);
  padding-bottom: var(--s2); border-bottom: 1px solid rgba(26,39,69,.12);
}
.pcard__logo { height: calc(clamp(56px, 18cqi, 76px) * var(--logo-k, 1)); width: auto; flex: 0 0 auto; }
.pcard__idtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pcard__title { margin-bottom: 3px; }
.pcard__title {
  font-size: clamp(1rem, 6cqi, 1.6rem); line-height: 1.15; color: var(--accent);   /* accent, comme les titres des autres cartes du site ; calé sur la largeur : tient sur une ligne */
  white-space: nowrap;
}
/* sous le nom : le métier, puis la ville, chacun avec son icône */
.pcard__meta { display: flex; align-items: center; gap: 6px; font-size: .9rem; line-height: 1.35; color: var(--texte-corps); }
.pcard__meta .ico { width: 16px; height: 16px; flex: 0 0 auto; color: var(--accent); }
.pcard__text { margin-top: 8px; color: var(--texte-corps); font-size: .98rem; line-height: 1.55; }
.pcard__link {
  margin-top: 8px; align-self: flex-end;          /* en bas à droite de la carte */
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .88rem; font-weight: 600; color: var(--accent);
}
.pcard__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }   /* toute la carte est cliquable */
.pcard__link .ico { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.pcard:hover .pcard__link .ico { transform: translateX(4px); }
.pcard__link:focus-visible { outline: none; }
.pcard:has(.pcard__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

/* état 1 (une ou deux réalisations) : carte pleine largeur */
/* l'image remplit toute la hauteur de la carte : 4:3 tant que le texte tient à côté, sinon léger recadrage sur les côtés */
@media (min-width: 768px) {
  .realgrid--solo .pcard__img { aspect-ratio: auto; }
  .realgrid--solo .pcard__img::before { content: ""; display: block; padding-top: 75%; }   /* au moins 4:3 */
  .realgrid--solo .pcard__img img { position: absolute; inset: 0; }
}
@media (min-width: 1024px) {
  .realgrid--solo .pcard { grid-template-columns: 7fr 5fr; align-items: stretch; }
  .realgrid--solo .pcard__body { padding: var(--s5) var(--s5) var(--s4); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .realgrid--solo .pcard { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
/* état 2 (à partir de trois) */
.realgrid--multi .pcard__title { min-height: calc(2em * 1.15); }
@media (min-width: 1024px) {
  .realgrid--multi { grid-template-columns: repeat(3, 1fr); }
  .realgrid--multi .pcard__body { padding: var(--s3); justify-content: flex-start; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .realgrid--multi { grid-template-columns: repeat(2, 1fr); }
  .realgrid--multi .pcard:nth-child(3):last-child { grid-column: 1 / -1; }
}
.real-cta { margin-top: var(--s5); }

/* ---- Étude de cas : ouverture ---- */
/* contenu plus haut que les autres heros de page : le haut est réservé au header qui flotte par-dessus */
.case-hero { padding-top: calc(var(--annonce-h) + 120px); }
.case-hero__logo { height: clamp(80px, 11vw, 128px); width: auto; }
.case-hero h1 { max-width: 24ch; }
.hero .case-links { margin-top: 8px; }   /* 24px d'écart du hero + 8 = 32px sous la tagline */
.case-links { gap: 12px; }
.case-info {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  column-gap: 8px; row-gap: 4px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; color: var(--texte-corps);
}
.case-info > span { white-space: nowrap; }
.case-quote { margin: var(--s3) 0 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }   /* 24 + 24 de l'écart du hero = 48px sous les boutons */
/* au-dessus de l'avis : le G de Google et les cinq étoiles (le même or que partout) */
.case-quote__note { display: inline-flex; align-items: center; gap: 3px; margin-bottom: 4px; }
.case-quote__g { width: 20px; height: 20px; margin-right: 8px; }
.case-quote__note .review__star { width: 17px; height: 17px; }
.case-quote blockquote { margin: 0; }
.case-quote blockquote p {
  font-family: 'Cinzel', serif; font-weight: 600;
  font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.4; color: var(--texte);
  max-width: 46ch; text-wrap: balance;
}
.case-quote figcaption { font-family: 'Inter', sans-serif; font-size: .9rem; color: var(--texte-corps); }
/* variante alignée à gauche : à la fin des rangées de la section Volt (page Fiche Google), avant les boutons */
.case-quote--left { align-items: flex-start; margin-top: var(--s5); }
.on-accent .case-quote blockquote p { color: var(--texte-clair); }
.on-accent .case-quote figcaption { color: var(--texte-clair-2); }

/* ---- Bloc de texte en split (Le client) ---- */
.case-split { display: grid; gap: var(--s4); }
.case-split .sec-head { margin-bottom: 0; }
.case-split h2, .case-rows h2 { text-wrap: pretty; }
.case-split__media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-card); aspect-ratio: 4 / 3; }
.case-split__media img { width: 100%; height: 100%; object-fit: cover; }
/* images d'écran (téléphone, tablette de la fiche Google) : une équation taille d'écran → image, continue.
   Plus l'écran est étroit, plus le cadre est haut et plus on zoome sur l'appareil, pour que l'écran se lise :
   cadre  = 75 % (4/3) + 0,081 × (1440px − largeur d'écran), entre 75 % et 100 % (carré)
   zoom   = 100 % + 0,087 × (1440px − largeur d'écran), entre 100 % et 115 %
   → 390px : carré, zoom 1,15 · 820px (iPad) : ≈ 5/4, zoom ≈ 1,07 · 1440px : 4/3 sans zoom, comme avant */
.case-split__media--ecran { position: relative; aspect-ratio: auto; height: 0;
  padding-bottom: clamp(75%, calc(75% + (1440px - 100vw) * .081), 100%); }
.case-split__media--ecran img { position: absolute; left: 50%; top: 55%;
  width: clamp(100%, calc(100% + (1440px - 100vw) * .087), 115%);
  height: clamp(100%, calc(100% + (1440px - 100vw) * .087), 115%);
  transform: translate(-50%, -55%); object-fit: cover; }
@media (min-width: 1024px) {
  .case-split { grid-template-columns: 5fr 7fr; gap: var(--s5); align-items: center; }
}
/* variante : en-tête, image, puis une suite (bouton, liste, prix). Empilé, l'image s'intercale entre
   l'en-tête et la suite (ordre du HTML) ; dès 1024px, elle passe sur le côté sur toute la hauteur et
   l'en-tête et la suite restent ensemble, centrés verticalement en face (deux rangées souples autour) */
.case-split__after { display: flex; flex-direction: column; gap: var(--s4); }
.case-split__after .btn-row { margin: 0; }
.split-price { color: var(--texte-corps); display: flex; align-items: flex-start; gap: 10px; }
/* icône calée sur la PREMIÈRE ligne du prix (1,3rem × interligne 1,6), même si la mention passe à la ligne */
.split-price__ico { flex: 0 0 auto; width: 22px; height: 22px; color: var(--accent); margin-top: calc((1.3rem * 1.6 - 22px) / 2); }
.split-price .price-amount, .split-price .price-amount--promo { margin-top: 0; }
/* prix sous une liste en rangées : il prend la place d'une rangée de plus (même filet, même écart) */
.case-split__after .irows + .split-price { position: relative; margin-top: calc(var(--s3) - var(--s4)); padding-top: var(--s3); }
.case-split__after .irows + .split-price::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(26,39,69,.12); }
.price-amount--promo .price-launch { font-family: 'Inter', sans-serif; font-weight: 500; font-size: .98rem; color: var(--texte-corps); opacity: .75; }
@media (min-width: 1024px) {
  .case-split--stack { grid-template-rows: 1fr auto auto 1fr; row-gap: 0; }
  .case-split--stack > .case-split__text { grid-column: 1; grid-row: 2; }
  .case-split--stack > .case-split__media { grid-column: 2; grid-row: 1 / -1; }
  .case-split--stack > .case-split__after { grid-column: 1; grid-row: 3; margin-top: var(--s4); }
  /* miroir : image à gauche (7fr), texte à droite (5fr) */
  .case-split--mirror { grid-template-columns: 7fr 5fr; }
  .case-split--mirror > .case-split__text, .case-split--mirror > .case-split__after { grid-column: 2; }
  .case-split--mirror > .case-split__media { grid-column: 1; }
  /* image collante : quand le texte d'en face est bien plus haut qu'elle (liste), l'image part en haut
     de la section et reste à l'écran sous le header pendant la lecture, comme l'en-tête des .case-rows */
  .case-split--sticky { grid-template-rows: auto auto; align-items: start; }
  .case-split--sticky > .case-split__text { grid-row: 1; }
  .case-split--sticky > .case-split__after { grid-row: 2; }
  .case-split--sticky > .case-split__media { grid-row: 1 / -1; position: sticky; top: 112px; }
}

/* ---- Item à icône, format rangée, icône dans un conteneur ---- */
.case-rows { display: grid; gap: var(--s5); }
.case-rows .sec-head { margin-bottom: 0; }
@media (min-width: 1024px) {
  .case-rows { grid-template-columns: 5fr 7fr; gap: var(--s6); align-items: start; }
  .case-rows__head { position: sticky; top: 112px; }   /* calé sous le header le long des rangées */
}
.irows { display: flex; flex-direction: column; }
.irow {
  position: relative;
  display: grid; grid-template-columns: 64px 1fr; column-gap: var(--s3); align-items: start;
  padding-block: var(--s3);
}
.irow:first-child { padding-top: 0; }
.irow:last-child { padding-bottom: 0; }
.irow + .irow::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(26,39,69,.12); }
.irow__ico { width: 64px; height: 64px; border-radius: var(--r-lg); display: grid; place-items: center; }
.irow__ico .ico { width: 40px; height: 40px; }
.irow__text h3 { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.3; color: var(--accent); margin-bottom: 8px; text-wrap: pretty; }   /* titres d'item en accent, comme les titres de cartes */
.irow__text p { color: var(--texte-corps); }
.irows--gris .irow__ico { background: var(--gris); color: var(--accent); }
.irows--clair .irow__ico { background: var(--degrade-clair-135); color: var(--accent); }   /* icônes claires sur fond foncé : à l'angle du dégradé signature */
.irows--clair .irow + .irow::before { background: rgba(247,247,245,.16); }
.irows--clair .irow__text h3 { color: var(--texte-clair); }
.irows--clair .irow__text p { color: var(--texte-clair-2); }
.irows--degrade .irow__ico { background: var(--degrade-signature); color: var(--texte-clair); }
/* variante resserrée : le titre en gras enchaîne sur le texte, au corps du texte */
.irows--tight .irow__text p strong { color: var(--accent); font-weight: 700; }
.case-col { max-width: 820px; margin-inline: auto; }
.case-frise .frise-wrap, .case-frise { max-width: none; }
.case-after-rows, .case-after-shot { margin-top: var(--s4); }

/* ---- Capture défilante dans un cadre ---- */
.shot__switch { display: flex; justify-content: center; margin-bottom: var(--s3); }
.shot__views { display: grid; position: relative; }
/* changement de vue en deux temps, sans fondu croisé : la sortante s'efface (0,4 s, descente de 8px),
   puis l'entrante apparaît (retard 0,4 s, 0,5 s, montée de 8px) */
.shot__view {
  grid-area: 1 / 1; min-width: 0; position: absolute; top: 0; left: 0; right: 0;
  opacity: 0; transform: translateY(8px); visibility: hidden;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s;
}
.shot__view.is-active {
  position: relative;
  opacity: 1; transform: none; visibility: visible;
  transition: opacity .5s var(--ease) .4s, transform .5s var(--ease) .4s, visibility 0s linear .4s;
}
.shot__frame {
  position: relative; margin-inline: auto; overflow: hidden;
  border-radius: var(--r-lg); box-shadow: var(--sh-card); background: var(--fond);
  --ctrl-h: 44px; --ctrl-w: 300px;
}
.shot__frame--desktop { width: 100%; max-width: 1000px; height: min(70vh, 720px); }
.shot__frame--mobile { width: 320px; height: 640px; border-radius: 24px; }
.shot__viewport {
  position: absolute; inset: 0; overflow: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: zoom-in;
}
.shot__viewport::-webkit-scrollbar { display: none; }
.shot__viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: inherit; }
.shot__frame.is-zoomed .shot__viewport { cursor: grab; }
.shot__frame.is-dragging .shot__viewport { cursor: grabbing; }
.shot__canvas { width: 100%; }
.shot__canvas img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

/* barre de position : rail fin + repère accent */
.shot__bar { position: absolute; z-index: 2; border-radius: var(--r-pill); background: rgba(26,39,69,.12); touch-action: none; }
.shot__bar::before { content: ""; position: absolute; inset: -6px; }   /* zone de prise plus large que le rail */
.shot__bar--v { top: 12px; right: 6px; width: 4px; bottom: calc(var(--ctrl-h) + 20px); }
.shot__bar--h { left: 12px; bottom: 6px; height: 4px; right: calc(var(--ctrl-w) + 20px); display: none; }
.shot__frame.is-zoomed .shot__bar--h { display: block; }
.shot__thumb { position: absolute; border-radius: var(--r-pill); background: var(--accent); cursor: grab; }
.shot__bar--v .shot__thumb { left: 0; width: 100%; top: 0; height: 32px; }
.shot__bar--h .shot__thumb { top: 0; height: 100%; left: 0; width: 32px; }

/* contrôles : petite barre translucide en bas à droite */
.shot__ctrls {
  position: absolute; z-index: 3; right: 12px; bottom: 12px;
  display: flex; align-items: center;
  border-radius: var(--r-pill);
  background: rgba(247,247,245,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.shot__btn {
  position: relative;
  width: 44px; height: 44px;                 /* zone cliquable */
  display: grid; place-items: center;
  border: 0; padding: 0; background: none; color: var(--texte);
  transition: color var(--dur) var(--ease);
}
.shot__btn::before {                         /* bouton visuel de 32px */
  content: ""; position: absolute; inset: 6px; border-radius: var(--r-pill);
  transition: background-color var(--dur) var(--ease);
}
.shot__btn .ico { position: relative; width: 16px; height: 16px; }
.shot__btn:hover:not(:disabled) { color: var(--accent); }
.shot__btn:hover:not(:disabled)::before { background: rgba(44,75,140,.10); }
.shot__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -5px; border-radius: var(--r-pill); }
.shot__btn:disabled { opacity: .35; cursor: default; }
.shot__btn--zoomed { display: none; }
.shot__frame.is-zoomed .shot__btn--zoomed { display: grid; }
.shot__pct {
  min-width: 46px; text-align: center;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--texte);
}

/* plein écran */
.shotfs {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 72px 24px 24px;
  background: rgba(26,39,69,.92);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.shotfs.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease), visibility 0s; }
.shotfs .shot__frame { max-width: none; margin: 0; --ctrl-h: 52px; }
.shotfs .shot__viewport { cursor: grab; touch-action: pan-x pan-y; }
.shotfs .shot__btn { width: 52px; height: 52px; }    /* boutons de 40px visuels */
.shotfs .shot__btn .ico { width: 20px; height: 20px; }
.shotfs .shot__pct { font-size: 14px; min-width: 52px; }
.shotfs .shot__btn[data-act="full"] { display: none; }
.shotfs__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 52px; height: 52px; border: 0; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: rgba(247,247,245,.12); color: var(--texte-clair);
  transition: background-color var(--dur) var(--ease);
}
.shotfs__close:hover { background: rgba(247,247,245,.22); }
.shotfs__close .ico { width: 22px; height: 22px; }
.shotfs__close:focus-visible { outline-color: var(--texte-clair); }

/* ---- Curseur avant/après ---- */
.ba__frame {
  position: relative; margin-inline: auto;
  width: 100%; max-width: 1000px; aspect-ratio: 1440 / 900;
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-card);
  background: var(--gris-clair);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  --pos: 50%;
}
.ba__img { position: absolute; inset: 0; }
.ba__img img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.ba__img--apres { clip-path: inset(0 0 0 var(--pos)); }
.ba__bar {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3;
  width: 2px; margin-left: -1px;
  background: var(--texte-clair); box-shadow: 0 0 10px rgba(12,20,38,.35);
}
.ba__handle {
  position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--fond); color: var(--texte);
  box-shadow: var(--sh-card); cursor: grab;
}
.ba__handle .ico { width: 16px; height: 16px; }
.ba__handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ba__frame--mobile { width: 320px; max-width: 100%; aspect-ratio: 390 / 844; border-radius: 24px; }

/* ---- Carte d'avis (une seule, centrée) ---- */
.review {
  position: relative; margin: 0 auto; max-width: 720px;
  padding: var(--s4);
  border: 2px solid transparent; border-radius: var(--r-lg);
  background: linear-gradient(var(--fond), var(--fond)) padding-box, var(--degrade-signature) border-box;
  box-shadow: var(--sh-card);
  color: var(--texte);
}
.review__head { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.review__avatar {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--degrade-signature); color: var(--texte-clair);
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: .03em;
}
.review__who { display: flex; flex-direction: column; gap: 4px; }
.review__who { gap: 2px; }
.review__name { font-weight: 700; color: var(--texte); line-height: 1.3; }
.review__company { font-size: .9rem; color: var(--texte-corps); line-height: 1.3; margin-bottom: 4px; }
.review__stars { display: inline-flex; gap: 2px; }
.review__star { width: 16px; height: 16px; fill: #F2B01E; stroke: #F2B01E; stroke-width: 1.5; stroke-linejoin: round; }
.review__g { position: absolute; top: var(--s4); right: var(--s4); width: 26px; height: 26px; }
.review__text { margin: var(--s3) 0 0; }
.review__text p { color: var(--texte); font-size: 1.05rem; line-height: 1.6; }

.case-cta { margin-top: var(--s5); }
.avis-cta { margin-top: var(--s4); }   /* 32px sous la carte */
.avis-cta .btn { flex: 0 0 auto; }   /* deux actions à leur taille, centrées côte à côte (empilées si la largeur manque) */

@media (max-width: 767px) {
  .real-cta, .case-cta { margin-top: var(--s4); }
  .case-shot-sec .sec-head, #avis .sec-head { margin-bottom: var(--s4); }
  .shot__frame--desktop { height: 70svh; }
  .shot__frame--mobile { width: 86%; max-width: 320px; height: min(640px, 70svh); }
  .irow { grid-template-columns: 52px 1fr; column-gap: var(--s2); }
  .irow__ico { width: 52px; height: 52px; border-radius: var(--r); }
  .irow__ico .ico { width: 32px; height: 32px; }
  .ba__frame--mobile { width: 86%; max-width: 320px; }
  .review { padding: var(--s4) var(--s3); }
  .review__g { top: var(--s4); right: var(--s3); width: 30px; height: 30px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .shot__frame--desktop { max-width: none; height: 60vh; }
}
@media (max-width: 479px) {
  .case-links { flex-direction: column; align-items: stretch; width: 100%; }
  .case-links .btn { width: 100%; }
}

/* ==========================================================================
   24. Effets (ajoutés en dernier)
   ========================================================================== */

/* Reveal au scroll, au niveau du composant */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* Entrée au chargement — cascade PAR LE HAUT : barre d'annonce, puis header, puis textes du hero.
   (Plus de hero pinné/rideau : le hero défile normalement.) */
.home .page-flow { position: relative; background: var(--fond); }
@keyframes ns-drop { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ns-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.js .announce          { animation: ns-drop .5s        var(--ease) both; }  /* 1er : la barre d'annonce */
.js .site-header       { animation: ns-drop .5s .30s   var(--ease) both; }  /* 2e : le header, une fois la barre posée */
.js .hero .hero__inner { animation: ns-fade .5s .60s   var(--ease) both; }  /* 3e : les textes du hero */
.js .scroll-hint       { animation: ns-fade .5s .90s   var(--ease) backwards; }  /* 4e : l'indicateur de scroll */

/* le fond animé (aurora canvas) coiffe le dégradé, la légende de grain reste au-dessus */
.mist canvas { z-index: 0; opacity: 1; }
.mist__grain { z-index: 1; }

/* ==========================================================================
   24 bis. Dégradé du CTA principal (135°, oklch)
   ========================================================================== */
/* Dégradé du CTA principal : diagonale de coin à coin (135°), interpolé en oklch, teinte claire
   dans le coin haut gauche, teinte sombre dans le coin bas droit ; point à 40 % pour rester
   lumineux sur la première moitié. Lumière du bouton (ombre, survol) inchangée.
   Les CTA inversés sur fond sombre restent clairs. */
.btn-primary, .price-card .btn-primary {
  background: linear-gradient(135deg, #2C4B8C 0%, #29447F 40%, #1A2745 100%);   /* secours, mêmes points */
  background: linear-gradient(135deg in oklch, #2C4B8C 0%, color-mix(in oklch, #2C4B8C 82%, #1A2745) 40%, #1A2745 100%);
}

/* ==========================================================================
   24 ter. Titres en Cinzel au même dégradé que le CTA : tous ceux en bleu nuit,
           sauf sur fond accent ou sombre, et sauf ce qui est déjà en bleu accent
   ========================================================================== */
h1, h2, .frise__title, .price-fixed h3, .price-name, .acc-title, .form-success h3, .footer__name {
  background-image: linear-gradient(135deg, #2C4B8C 0%, #29447F 40%, #1A2745 100%);
  background-image: linear-gradient(135deg in oklch, #2C4B8C 0%, color-mix(in oklch, #2C4B8C 82%, #1A2745) 40%, #1A2745 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.on-accent h2, .cta-card h2 { background-image: none; -webkit-text-fill-color: currentColor; }
.legal__num { -webkit-text-fill-color: var(--accent); }   /* numéro déjà en bleu accent : il le reste */
.acc-head:hover .acc-title { -webkit-text-fill-color: var(--accent); }   /* survol des questions : accent, comme avant */
h1::selection, h2::selection, .frise__title::selection, .price-fixed h3::selection, .price-name::selection,
.acc-title::selection, .form-success h3::selection, .footer__name::selection { -webkit-text-fill-color: var(--texte-clair); }

/* ==========================================================================
   25. prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .js .announce, .js .site-header, .js .hero .hero__inner, .js .scroll-hint { animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* Signature : prix des pages en plus */
.price-extra { color: var(--texte-corps); font-size: .92rem; margin-top: 2px; }
.price-extra b { color: var(--accent); font-weight: 700; font-feature-settings:"tnum" 1; }
.price-extra s { opacity: .7; margin-left: 2px; }
/* split empilé (fiche Google, mise en place, suivi) : sous 1024px l'image passe entre le titre et le texte ;
   l'image de colonne ne sert qu'à partir de 1024px */
@media (max-width: 1023px) {
  .case-split--stack > .case-split__media--desktop { display: none; }
  .sec-head > .case-split__media--mobile { margin-top: 12px; }   /* titre → image et image → texte : 28 px de chaque côté */
}
@media (min-width: 1024px) {
  .sec-head > .case-split__media--mobile { display: none; }
}