/* =========================================================================
   OC13 - Feuille de style principale
   Site vitrine d'Oscar Bury (creation de sites + avis Google NFC)
   -------------------------------------------------------------------------
   Palette officielle (charte graphique) :
     Bleu Perspective  #005F6B   principale, fiable, distinctive
     Or Artisan        #C2A253   accent chaud, visibilite
     Gris Structure    #A0A0A0   elements de fond
     Blanc Local       #F5F5E9   fond clair, aere
   -------------------------------------------------------------------------
   Sommaire :
   1.  Variables (couleurs, typographies, espacements)
   2.  Base & reset leger
   3.  Utilitaires (conteneur, boutons, titres de section)
   4.  Fonds animes (mesh mouvant, halos doux, canvas particules, formes)
   5.  En-tete / navigation (+ menu mobile)
   6.  Selecteur de metier
   7.  Hero + statistiques choc
   8.  Avis Google + NFC
   9.  Pourquoi OC13 (bento)
   10. Services
   11. Methode
   12. A propos
   13. Contact + formulaire multi-etapes
   14. Page Offres & options
   15. Pied de page
   16. Micro-animations (reveal) + parallax
   17. Pages secondaires (mentions legales, 404)
   18. Responsive
   19. Preference : mouvement reduit
   ========================================================================= */

/* =========================================================================
   0. POLICES AUTO-HÉBERGÉES
   Plus aucune requête vers Google Fonts (meilleure confidentialité RGPD,
   moins de requêtes bloquantes -> chargement plus rapide). Polices VARIABLES :
   un seul fichier par famille couvre toutes les graisses. `swap` = le texte
   s'affiche tout de suite avec une police système puis bascule (pas de texte
   invisible). Sous-ensembles latin + latin-ext (suffisent pour le français).
   ========================================================================= */
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url("../assets/fonts/bricolage-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: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url("../assets/fonts/bricolage-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 600; 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;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   1. VARIABLES
   ========================================================================= */
:root {
  /* --- Couleurs de la charte graphique --- */
  --bleu: #005f6b;          /* Bleu Perspective - couleur principale */
  --bleu-fonce: #00434c;    /* variante foncee (survols) */
  --or: #c2a253;            /* Or Artisan - accent officiel */
  --or-clair: #dcc07d;      /* variante claire (survol bouton or) */
  --or-fonce: #8a6f2e;      /* variante foncee (texte sur clair, ombres) */
  --or-rgb: 194, 162, 83;   /* equivalent RGB de --or, pour les rgba() */
  --gris: #9aa0a6;          /* Gris Structure */
  --creme: #f5f5e9;         /* Blanc Local - fond clair */
  --anthracite: #20242b;    /* fond sombre principal */
  --anthracite-2: #171a20;  /* variante plus profonde */

  /* --- Couleurs derivees / roles --- */
  --texte: #21252b;             /* texte sur fond clair */
  --texte-doux: #545b64;        /* texte secondaire sur fond clair */
  --texte-clair: #f6f6ef;       /* texte sur fond sombre */
  --texte-clair-doux: #b6bdc5;  /* texte secondaire sur fond sombre */
  --bordure: rgba(33, 37, 43, 0.10);
  --bordure-claire: rgba(246, 246, 239, 0.14);

  /* --- Typographies --- */
  --font-titre: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-texte: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* --- Mise en page --- */
  --max: 1360px;
  --radius: 18px;
  --radius-sm: 11px;
  --header-h: 74px;

  /* --- Ombres (teintees bleu, jamais noir pur) --- */
  --ombre: 0 22px 50px -24px rgba(0, 40, 46, 0.34);
  --ombre-douce: 0 10px 26px -16px rgba(0, 40, 46, 0.24);
  --ombre-or: 0 16px 34px -16px rgba(var(--or-rgb), 0.55);

  /* --- Transitions --- */
  --t: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --t-rapide: 0.18s ease;
}

/* =========================================================================
   2. BASE & RESET LEGER
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Décalage pour les ancres (#services...) afin de ne pas passer sous l'en-tête.
     Le « snap » ferme entre les 3 premières parties est géré en JS (molette). */
  scroll-padding-top: var(--header-h);
}

body {
  font-family: var(--font-texte);
  color: var(--texte);
  background: var(--creme);
  line-height: 1.62;
  font-size: 1.0625rem;         /* ~17px */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;           /* aucun defilement horizontal parasite */
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--bleu); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--bleu-fonce); }

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: inherit;
  text-wrap: balance;
}

ul { list-style: none; padding: 0; }

/* Accessibilite : cible de focus visible et coherente */
:focus-visible {
  outline: 3px solid var(--or);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Lien d'evitement pour le clavier / lecteurs d'ecran */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 300;
  background: var(--anthracite);
  color: var(--texte-clair);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  transition: top var(--t);
}
.skip-link:focus { top: 12px; color: var(--texte-clair); }

/* =========================================================================
   3. UTILITAIRES
   ========================================================================= */
.conteneur {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: clamp(20px, 4.5vw, 72px);
}

.section {
  position: relative;
  padding: clamp(66px, 10vw, 124px) 0;
  overflow: hidden;                 /* contient fonds animes et halos */
}
.section > .conteneur { position: relative; z-index: 1; }

/* Sections sombres */
.section--sombre {
  background: var(--anthracite);
  color: var(--texte-clair);
}
.section--sombre h1,
.section--sombre h2,
.section--sombre h3 { color: var(--texte-clair); }

.section--blanc { background: #fff; }
.section-claire { background: var(--creme); }

/* Bandeau titre de section */
.section__intro { max-width: 660px; margin-bottom: clamp(38px, 5vw, 60px); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: 14px;
}
.section--sombre .eyebrow { color: var(--or); }
.eyebrow .etoile { width: 14px; height: 14px; }

.section h2 { font-size: clamp(1.8rem, 3.8vw, 2.75rem); letter-spacing: -0.03em; }
.section__intro p {
  margin-top: 15px;
  font-size: 1.12rem;
  color: var(--texte-doux);
}
.section--sombre .section__intro p { color: var(--texte-clair-doux); }

/* L'eclat a 4 branches (motif du logo) reutilise partout */
.etoile { display: inline-block; fill: currentColor; flex: none; }

/* Boutons */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;                 /* contient le balayage lumineux */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 15px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--t), background var(--t), border-color var(--t), color var(--t), box-shadow var(--t), filter var(--t);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }

/* Bouton principal : degrade or avec relief doux (CTA) */
.btn--metal {
  background: linear-gradient(180deg, var(--or-clair), var(--or) 62%, var(--or-fonce));
  color: #241d0a;
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 3px rgba(120, 92, 12, 0.22),
    var(--ombre-or);
}
.btn--metal:hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 20px 40px -16px rgba(var(--or-rgb), 0.75); }
.btn--metal::before {   /* reflet qui traverse le bouton au survol */
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 35%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-18deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.btn--metal:hover::before { left: 130%; }

/* Bouton secondaire : verre depoli */
.btn--glass {
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  color: var(--bleu-fonce);
  border: 1.5px solid rgba(0, 95, 107, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 20px -14px rgba(0, 95, 107, 0.4);
}
.btn--glass:hover {
  border-color: var(--bleu);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 14px 26px -14px rgba(0, 95, 107, 0.45);
}
.section--sombre .btn--glass {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 26px -14px rgba(0, 0, 0, 0.55);
}
.section--sombre .btn--glass:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Bouton discret (navigation formulaire) */
.btn--ghost {
  background: transparent;
  border: 1.5px solid var(--bordure);
  color: var(--texte-doux);
}
.btn--ghost:hover { border-color: var(--gris); color: var(--texte); background: rgba(33, 37, 43, 0.04); }

/* Barre de progression de lecture */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 200;
  background: transparent;
  pointer-events: none;
}
.scroll-progress__fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--bleu), var(--or));
  box-shadow: 0 0 10px rgba(var(--or-rgb), 0.55);
  transition: width 0.12s linear;
}

/* =========================================================================
   4. FONDS ANIMES
   ========================================================================= */

/* --- 4a. Mesh sombre mouvant (Hero, Methode, CTA) --- */
.fond-anime {
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(180deg, rgba(16, 19, 24, 0.18), rgba(16, 19, 24, 0.5)),
    radial-gradient(60% 55% at 16% 20%, rgba(10, 131, 148, 0.55) 0%, transparent 62%),
    radial-gradient(55% 50% at 84% 10%, rgba(var(--or-rgb), 0.26) 0%, transparent 58%),
    radial-gradient(70% 60% at 72% 90%, rgba(0, 110, 124, 0.42) 0%, transparent 62%),
    linear-gradient(135deg, #0a2f35 0%, var(--anthracite) 55%, var(--anthracite-2) 100%);
  background-size: 100% 100%, 180% 180%, 180% 180%, 180% 180%, 100% 100%;
  background-position:
    0 0,
    calc(20% + var(--scroll, 0) * 60%) calc(15% + var(--scroll, 0) * 55%),
    calc(20% + var(--scroll, 0) * 60%) calc(15% + var(--scroll, 0) * 55%),
    calc(20% + var(--scroll, 0) * 60%) calc(15% + var(--scroll, 0) * 55%),
    0 0;
  animation: derive 28s ease-in-out infinite alternate;
  transition: background-position 0.15s linear;
}
@keyframes derive {
  0%   { background-position: 0 0, 12% 10%, 12% 10%, 12% 10%, 0 0; }
  100% { background-position: 0 0, 78% 70%, 78% 70%, 78% 70%, 0 0; }
}
.fond-anime::before,
.fond-anime::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.5;
  pointer-events: none;
}
.fond-anime::before {
  width: 42%; aspect-ratio: 1; left: -6%; top: 8%;
  background: radial-gradient(circle, rgba(12, 160, 180, 0.8), transparent 70%);
  animation: orbe-un 18s ease-in-out infinite alternate;
}
.fond-anime::after {
  width: 34%; aspect-ratio: 1; right: -4%; bottom: 4%;
  background: radial-gradient(circle, rgba(var(--or-rgb), 0.5), transparent 70%);
  animation: orbe-deux 22s ease-in-out infinite alternate;
}
@keyframes orbe-un  { from { transform: translate(0,0) scale(1); } to { transform: translate(6%,8%) scale(1.15); } }
@keyframes orbe-deux { from { transform: translate(0,0) scale(1); } to { transform: translate(-8%,-6%) scale(1.1); } }

/* --- 4b. Halos doux (sections claires) --- */
.fond-doux { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fond-doux::before,
.fond-doux::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5;
}
.fond-doux::before {
  width: 36%; aspect-ratio: 1; left: -8%; top: -6%;
  background: radial-gradient(circle, rgba(0, 95, 107, 0.15), transparent 70%);
  animation: doux-un 24s ease-in-out infinite alternate;
}
.fond-doux::after {
  width: 30%; aspect-ratio: 1; right: -6%; bottom: -8%;
  background: radial-gradient(circle, rgba(var(--or-rgb), 0.14), transparent 70%);
  animation: doux-deux 28s ease-in-out infinite alternate;
}
@keyframes doux-un  { from { transform: translate(0,0); } to { transform: translate(5%,6%); } }
@keyframes doux-deux { from { transform: translate(0,0); } to { transform: translate(-6%,-4%); } }

/* --- 4c. Canvas de particules (constellation, Hero uniquement) --- */
.particules {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.9;
}

/* --- 4d. Formes geometriques lentes (eclats flottants en parallax) --- */
.formes { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.forme {
  position: absolute;
  color: rgba(var(--or-rgb), 0.5);
  opacity: 0.5;
  animation: flotte 14s ease-in-out infinite alternate;
  will-change: transform;
}
.forme svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.forme--1 { width: 46px; height: 46px; top: 22%; left: 8%;  animation-duration: 15s; }
.forme--2 { width: 26px; height: 26px; top: 68%; left: 16%; color: rgba(12,160,180,0.5); animation-duration: 19s; }
.forme--3 { width: 34px; height: 34px; top: 30%; right: 12%; animation-duration: 17s; }
.forme--5 { width: 16px; height: 16px; top: 46%; right: 40%; animation-duration: 13s; }
@keyframes flotte {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-26px) rotate(45deg); }
}

/* --- 4e. Transitions entre zones de couleur (fondu a cheval) --- */
.fondu-haut,
.fondu-bas {
  position: absolute; left: 0; right: 0;
  height: clamp(36px, 4.5vw, 72px);
  z-index: 0; pointer-events: none;
}
.fondu-haut {
  top: 0;
  background: linear-gradient(to bottom,
    rgb(var(--fondu-rgb, 255 255 255) / 0.65) 0%,
    rgb(var(--fondu-rgb, 255 255 255) / 0.28) 40%,
    rgb(var(--fondu-rgb, 255 255 255) / 0.05) 82%,
    rgb(var(--fondu-rgb, 255 255 255) / 0) 100%);
}
.fondu-bas {
  bottom: 0;
  background: linear-gradient(to top,
    rgb(var(--fondu-rgb, 255 255 255) / 0.65) 0%,
    rgb(var(--fondu-rgb, 255 255 255) / 0.28) 40%,
    rgb(var(--fondu-rgb, 255 255 255) / 0.05) 82%,
    rgb(var(--fondu-rgb, 255 255 255) / 0) 100%);
}

/* =========================================================================
   5. EN-TETE / NAVIGATION
   ========================================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  color: var(--texte-clair);
  transition: background var(--t), box-shadow var(--t), backdrop-filter var(--t), color var(--t);
}
.site-header .conteneur {
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-header.est-defile,
.site-header--solide {
  background: rgba(245, 245, 233, 0.9);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  box-shadow: 0 1px 0 var(--bordure), var(--ombre-douce);
  color: var(--texte);
}

/* Logo OC13 (wordmark reproduit en texte pour que sa couleur suive le fond :
   claire sur fond sombre, foncée sur fond clair, via currentColor).
   « OC13 » surmonte un filet, avec la baseline « Création digitale » calée à
   la même largeur et un point or en bout de filet — comme le logo officiel. */
.marque {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  font-family: var(--font-titre);
  line-height: 1;
  color: inherit;
}
.marque:hover { color: inherit; }
.marque__nom {
  font-weight: 800;
  font-size: 1.44rem;
  letter-spacing: 0.02em;
}
.marque__tag {
  position: relative;
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1.5px solid currentColor;
  font-weight: 600;
  font-size: 0.42rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: justify;
  text-align-last: justify;
}
/* Point or en bout de filet (seul élément qui garde sa couleur d'accent) */
.marque__tag::after {
  content: "";
  position: absolute; top: -2.5px; right: -5px;
  width: 3.5px; height: 3.5px; border-radius: 50%;
  background: var(--or);
}

.nav { display: flex; align-items: center; gap: 30px; }
.nav__liens { display: flex; align-items: center; gap: 26px; }
.nav__liens a {
  color: inherit;
  font-weight: 600;
  font-size: 0.97rem;
  position: relative;
  padding: 6px 0;
}
.nav__liens a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--or); transition: width var(--t);
}
.nav__liens a:hover::after,
.nav__liens a[aria-current="page"]::after { width: 100%; }
.nav .btn { padding: 11px 20px; font-size: 0.95rem; }

/* Bouton burger (mobile) */
.burger {
  display: none;
  width: 46px; height: 46px;
  border: 0; background: transparent; cursor: pointer;
  color: inherit; padding: 10px;
}
.burger span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--t), opacity var(--t); }
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* =========================================================================
   6. SELECTEUR DE METIER
   ========================================================================= */
.metier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-bottom: 26px;
}
.metier__label {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-clair-doux);
}
.metier__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.metier__pill {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--texte-clair);
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(246, 246, 239, 0.22);
  background: rgba(246, 246, 239, 0.06);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t), transform var(--t);
}
.metier__pill:hover { border-color: rgba(246, 246, 239, 0.5); transform: translateY(-1px); }
.metier__pill[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--or-clair), var(--or));
  border-color: transparent;
  color: #241d0a;
  box-shadow: var(--ombre-or);
}

/* =========================================================================
   7 & 8. SCROLLYTELLING : HERO -> AVIS / NFC
   Colonne gauche défilante (Hero, construction, Avis/NFC) + téléphone
   « sticky » à droite dont l'écran et l'orientation évoluent selon la
   progression du scroll (piloté en JS, cf. main.js section 6c).
   ========================================================================= */
/* overflow: clip (et non hidden) : contient les fonds animés SANS créer de
   conteneur de défilement, sinon la colonne « sticky » du téléphone casse. */
.scrolly { position: relative; overflow: clip; }
.scrolly > .conteneur { position: relative; z-index: 1; max-width: 1580px; }
.scrolly .particules { height: 100svh; }

.scrolly__grid {
  display: grid;
  grid-template-columns: 1.16fr 0.84fr;   /* plus de largeur au texte à gauche */
  gap: clamp(28px, 3.5vw, 76px);
  align-items: stretch;                    /* colonne droite pleine hauteur = sticky OK */
}
.scrolly__left { min-width: 0; }

/* Panneaux : chacun occupe un plein écran et devient un point d'ancrage
   (scroll-snap). Les 3 parties sont ainsi nettement délimitées et le scroll
   s'aligne proprement sur chacune, ce qui « pose » la rotation du téléphone. */
.scrolly__panel {
  display: flex; flex-direction: column; justify-content: center;
}
#panel-hero  { min-height: 100svh; padding: calc(var(--header-h) + 16px) 0 40px; }
#panel-build { min-height: 100svh; padding: 40px 0; }
#avis        { min-height: 100svh; padding: 108px 0 76px; }

.scrolly__bloc { max-width: 600px; }
.scrolly h1 {
  font-size: clamp(2.4rem, 4.4vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
}
.scrolly h1 .accent { color: var(--or); }
.scrolly h2 { font-size: clamp(2rem, 3.8vw, 3rem); letter-spacing: -0.03em; }
.scrolly__bloc > p { margin-top: 15px; color: var(--texte-clair-doux); font-size: 1.12rem; max-width: 46ch; }

/* Accroche Hero (colonne gauche, panneau A) : plus large */
.hero__texte { min-width: 0; max-width: 720px; }
/* Slogan qui change selon le métier : sous le H1, légèrement plus petit */
.hero__slogan {
  margin-top: 16px;
  font-family: var(--font-titre); font-weight: 700;
  font-size: clamp(1.3rem, 2.1vw, 1.95rem);
  line-height: 1.14; letter-spacing: -0.02em;
  color: var(--texte-clair); max-width: 640px;
}
.hero__slogan .accent { color: var(--or); }
.hero__sous {
  margin-top: 16px;
  font-size: clamp(1rem, 1.3vw, 1.16rem);
  color: var(--texte-clair-doux);
  max-width: 600px;
}
.hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.hero__preuve { display: inline-flex; align-items: center; gap: 9px; color: var(--texte-clair-doux); font-size: 0.95rem; }
.hero__preuve .etoile { width: 13px; height: 13px; color: var(--or); }

/* Points « services » (panneau construction, sur fond sombre).
   Chaque ligne « grossit » vivement, l'une après l'autre, quand le panneau
   entre en vue (classe .is-on ajoutée en JS). */
.build-points { margin-top: 26px; display: grid; gap: 13px; max-width: 480px; }
.build-points li {
  position: relative; padding-left: 30px; color: var(--texte-clair); font-size: 1.06rem;
  transform-origin: left center;
}
.build-points li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px;
  background: var(--or);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.build-points.is-on li { animation: pointPop 0.5s cubic-bezier(0.22, 1.28, 0.36, 1) both; }
.build-points.is-on li:nth-child(1) { animation-delay: 0.03s; }
.build-points.is-on li:nth-child(2) { animation-delay: 0.14s; }
.build-points.is-on li:nth-child(3) { animation-delay: 0.25s; }
.build-points.is-on li:nth-child(4) { animation-delay: 0.36s; }
@keyframes pointPop {
  0%   { opacity: 0; transform: scale(0.82) translateX(-8px); }
  55%  { opacity: 1; transform: scale(1.12); color: #fff; }
  100% { opacity: 1; transform: scale(1); }
}

/* ---- Bandeau clair PLEINE LARGEUR (enfant de .scrolly), calé sur le panneau
   Avis/NFC. Full-bleed (left:0/right:0 = toute la largeur du site), fondu doux
   en haut. Sa position verticale par défaut suppose 2 panneaux plein écran ;
   elle est recalée précisément sur #avis en JS. ---- */
.scrolly__band {
  position: absolute; left: 0; right: 0;
  top: 200svh; bottom: 0;
  z-index: 0; pointer-events: none;
  background: var(--creme);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 84px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 84px);
}
/* Panneau Avis : posé sur le bandeau clair -> texte foncé */
#avis > .scrolly__bloc { position: relative; z-index: 1; }
#avis h2 { color: var(--texte); }
#avis .eyebrow { color: var(--bleu-fonce); }
#avis > .scrolly__bloc > p { color: var(--texte-doux); }

/* Chiffres sourcés (cartes claires) */
.avis__chiffres { margin-top: 24px; display: grid; gap: 12px; max-width: 540px; }
.avis-chip {
  display: flex; align-items: baseline; gap: 14px;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--radius-sm);
  padding: 15px 18px;
  box-shadow: var(--ombre-douce);
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.avis-chip:hover { transform: translateX(4px); border-color: rgba(0, 95, 107, 0.25); box-shadow: var(--ombre); }
.avis-chip b {
  flex: none; font-family: var(--font-titre); font-weight: 800; font-size: 1.5rem;
  letter-spacing: -0.02em; color: var(--bleu); line-height: 1; min-width: 92px;
}
.avis-chip span { color: var(--texte-doux); font-size: 0.95rem; line-height: 1.35; }
.avis-chip small { display: block; margin-top: 3px; color: var(--gris); font-size: 0.74rem; }

/* Plaque NFC : image seule, sans cadre, qui flotte */
.nfc-plaque {
  display: block;
  width: min(300px, 74%);
  height: auto;
  margin: 28px 0 18px;
  border-radius: 16px;
  filter: drop-shadow(0 30px 44px rgba(0, 40, 46, 0.3));
  animation: cartePose 5.5s ease-in-out infinite;
}
@keyframes cartePose {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-14px) rotate(1.5deg); }
}

/* Prix d'appel des puces NFC */
.nfc-prix {
  display: flex; flex-direction: column; gap: 5px;
  max-width: 540px; margin: 0 0 8px;
  padding: 15px 20px; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(var(--or-rgb), 0.16), rgba(var(--or-rgb), 0.05));
  border: 1px solid rgba(var(--or-rgb), 0.4);
}
.nfc-prix strong { font-family: var(--font-titre); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--or-fonce); }
.nfc-prix strong span { font-size: 1rem; font-weight: 600; color: var(--texte-doux); }
.nfc-prix__det { color: var(--texte-doux); font-size: 0.92rem; }

/* Accordéon « Comment ça marche ? » */
.accordion { max-width: 540px; margin-top: 6px; }
.accordion__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 2px; background: transparent; border: 0;
  border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure);
  cursor: pointer; text-align: left;
  font-family: var(--font-titre); font-weight: 700; font-size: 1.18rem; color: var(--texte);
  transition: color var(--t);
}
.accordion__head:hover { color: var(--bleu); }
.accordion__chevron { width: 22px; height: 22px; flex: none; color: var(--bleu); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.accordion__head[aria-expanded="true"] .accordion__chevron { transform: rotate(180deg); }
.accordion__panel { height: 0; overflow: hidden; transition: height 0.42s cubic-bezier(0.16, 1, 0.3, 1); }
.accordion__inner { padding: 20px 0 6px; }

/* Étapes (dans l'accordéon, cartes claires) */
.steps { display: grid; gap: 12px; }
.steps li {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 15px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--bordure); background: #fff; box-shadow: var(--ombre-douce);
  transition: transform var(--t), border-color var(--t);
}
.steps li:hover { transform: translateX(4px); border-color: rgba(0, 95, 107, 0.25); }
.steps__n {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-titre); font-weight: 800;
  background: linear-gradient(180deg, var(--or-clair), var(--or)); color: #241d0a;
}
.steps li b { display: block; font-family: var(--font-titre); font-size: 1.02rem; margin-bottom: 2px; color: var(--texte); }
.steps li span { color: var(--texte-doux); font-size: 0.95rem; }
.nfc-how__result {
  margin-top: 18px; padding-left: 16px; border-left: 3px solid var(--or);
  color: var(--texte); font-size: 1.02rem;
}
.nfc-how__result b { color: var(--bleu); font-family: var(--font-titre); }
.nfc-how__cta { margin-top: 26px; }

/* =========================================================================
   TÉLÉPHONE 3D (sticky) : châssis réaliste, lévitation, faces avant/dos,
   fond d'écran abstrait local, écrans widget / code / Google My Business.
   ========================================================================= */
.scrolly__right { position: relative; }
.phone-sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding-top: var(--header-h);
  perspective: 1500px;
}
/* Halo derrière le téléphone (donne du volume, ressort sur le voile clair) */
.phone-glow {
  position: absolute; width: 74%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 131, 148, 0.42), transparent 62%);
  filter: blur(64px); z-index: 0; pointer-events: none;
}
/* Lévitation permanente (idle) : sur un wrapper distinct pour ne pas gêner
   la rotation 3D pilotée au scroll sur .rphone */
.phone-float {
  position: relative; z-index: 1;
  animation: levite 6s ease-in-out infinite;
}
@keyframes levite {
  0%, 100% { transform: translateY(-11px); }
  50%      { transform: translateY(11px); }
}

/* Corps du téléphone : grand, dimensionné en hauteur pour toujours tenir dans
   la fenêtre. La rotation (rotateY / scale) est appliquée en JS. */
.rphone {
  position: relative;
  height: clamp(520px, 78svh, 820px);
  aspect-ratio: 9 / 19;
  will-change: transform;   /* inclinaison pilotée au scroll : plus fluide sur GPU */
}
.rphone__face {
  position: absolute; inset: 0;
  border-radius: 48px;
}

/* Châssis : cadre titane, volume suggéré par les ombres internes + reflets de
   tranche gauche/droite, et grande ombre portée pour la lévitation. Plus de
   volume 3D réel (preserve-3d) : le téléphone ne fait plus de tour complet, il
   s'incline seulement -> rendu net sous tous les angles et écran cliquable. */
/* Tranche (épaisseur) : plaque métallique de la taille du téléphone, glissée
   DERRIÈRE la face avant et décalée horizontalement du côté opposé à
   l'inclinaison (--ex piloté en JS). Seule la lisière dépasse -> on lit la
   tranche du téléphone. Les arrêts en px dessinent le profil du métal :
   noir de bord -> reflet spéculaire vif -> métal moyen. */
.rphone__edge {
  position: absolute; inset: 0;
  border-radius: 48px;
  transform: translateX(var(--ex, 0px));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(0, 0, 0, 0.22) 45%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(90deg,
      #0c1015 0px, #5c646f 4px, #b3bcc8 8px, #6e7681 13px, #262b32 21px,
      #262b32 calc(100% - 21px), #6e7681 calc(100% - 13px), #b3bcc8 calc(100% - 8px),
      #5c646f calc(100% - 4px), #0c1015 100%);
  box-shadow: 0 34px 64px -30px rgba(0, 0, 0, 0.7);
}

.rphone__front {
  padding: 6px;
  background: linear-gradient(148deg, #7c828b 0%, #3a3e45 28%, #14171d 66%, #05060a 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.45),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 -2px 3px rgba(0, 0, 0, 0.55),
    0 60px 110px -34px rgba(0, 0, 0, 0.8),
    0 26px 52px -26px rgba(0, 0, 0, 0.62);
}
/* Reflets de tranche : bords latéraux brillants -> impression de métal courbe */
.rphone__front::before {
  content: ""; position: absolute; inset: 0; z-index: 13; pointer-events: none;
  border-radius: 48px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.24) 0, rgba(255, 255, 255, 0) 3.4%,
    rgba(255, 255, 255, 0) 96.6%, rgba(255, 255, 255, 0.24) 100%);
}
/* Reflet spéculaire qui balaie la vitre selon la rotation (--lx piloté en JS) */
.rphone__sheen {
  position: absolute; inset: 0; z-index: 14; pointer-events: none; border-radius: 48px;
  background: linear-gradient(102deg,
    transparent calc(var(--lx, 50%) - 26%),
    rgba(255, 255, 255, 0.14) calc(var(--lx, 50%) - 3%),
    rgba(255, 255, 255, 0.22) var(--lx, 50%),
    rgba(255, 255, 255, 0.14) calc(var(--lx, 50%) + 3%),
    transparent calc(var(--lx, 50%) + 26%));
  mix-blend-mode: screen;
}
/* Compteur d'avis = badge autoportant (fond sombre + texte clair => lisible
   quel que soit ce qu'il y a derrière). Au repos, calé en HAUT À DROITE dans la
   zone dégagée de la fiche (à droite du titre, à gauche de l'icône Google), sans
   recouvrir texte ni photos. Il grossit et sort par le HAUT du téléphone, puis
   revient. Transform piloté en JS. */
.gmb-bignum {
  position: absolute; top: 44px; right: 56px; z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 4px 13px 5px;
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(16, 26, 32, 0.97) 0%, rgba(0, 58, 66, 0.97) 100%);
  border: 1px solid rgba(var(--or-rgb), 0.55);
  box-shadow: 0 26px 54px -14px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  opacity: 0; pointer-events: none;
  transform-origin: center;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  will-change: transform;
}
.gmb-bignum::before {
  content: "★★★★★"; color: var(--or); font-size: 0.46rem; letter-spacing: 1.5px; line-height: 1;
}
.gmb-bignum b {
  font-family: var(--font-titre); font-weight: 800;
  font-size: 1.32rem; line-height: 1.05; letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff, var(--or-clair));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.gmb-bignum span {
  font-family: var(--font-titre); font-weight: 700; font-size: 0.48rem;
  color: var(--or-clair); text-transform: uppercase; letter-spacing: 0.12em;
}
.rphone__screen {
  position: absolute; inset: 6px;
  border-radius: 42px;
  overflow: hidden;
  background: #05070c;
}
/* Reflet vitré courbe (bords de l'écran) */
.rphone__screen::after {
  content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background:
    linear-gradient(122deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 30%),
    radial-gradient(120% 100% at 50% -10%, rgba(255, 255, 255, 0.08), transparent 40%);
}
/* Fond d'écran abstrait local (aucune image distante) */
.rphone__wall {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(58% 52% at 22% 16%, rgba(12, 175, 196, 0.95), transparent 60%),
    radial-gradient(52% 48% at 84% 22%, rgba(var(--or-rgb), 0.85), transparent 58%),
    radial-gradient(64% 60% at 72% 90%, rgba(96, 78, 210, 0.7), transparent 62%),
    linear-gradient(160deg, #0a2634 0%, #0b1120 58%, #0f1220 100%);
}
.rphone__notch {
  position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 34%; max-width: 118px; height: 30px; border-radius: 999px; background: #000; z-index: 10;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 13px;
  box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.8);
}
.rphone__notch i { width: 7px; height: 7px; border-radius: 50%; background: #34c759; box-shadow: 0 0 8px rgba(52, 199, 89, 0.9); }
/* Barre d'état */
.rphone__status {
  position: absolute; top: 18px; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px; color: #fff;
  font-family: var(--font-titre); font-weight: 700; font-size: 0.8rem;
}
.st-ic { display: flex; align-items: center; gap: 5px; }
.st-ic i { display: block; background: #fff; opacity: 0.92; }
.st-net { width: 15px; height: 10px; clip-path: polygon(0 100%, 22% 100%, 22% 62%, 0 62%, 26% 100%, 48% 100%, 48% 40%, 26% 40%, 52% 100%, 74% 100%, 74% 18%, 52% 18%, 78% 100%, 100% 100%, 100% 0, 78% 0); }
.st-wifi { width: 14px; height: 10px; clip-path: polygon(50% 100%, 0 40%, 14% 26%, 50% 60%, 86% 26%, 100% 40%); }
.st-bat { width: 22px; height: 11px; border-radius: 3px; background: none; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.8); position: relative; }
.st-bat::after { content: ""; position: absolute; inset: 2px; width: 70%; background: #fff; border-radius: 1px; }
.rphone__bar {
  position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%);
  width: 32%; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.55); z-index: 11;
}

/* Écrans empilés (opacité pilotée en JS) */
.rphone__screens { position: absolute; inset: 0; z-index: 2; }
.screen {
  position: absolute; inset: 0;
  padding: 58px 20px 30px;
  display: flex; flex-direction: column;
  color: #fff; opacity: 0;
  pointer-events: none;   /* les écrans (dont ceux invisibles) ne captent rien... */
}
.screen--stats { opacity: 1; }
/* ...sauf les contrôles du carrousel, qui redeviennent cliquables */
.scarousel__ctrl { pointer-events: auto; }

/* Écran 1 : widget vitré posé sur le fond d'écran */
.widget {
  margin-top: auto; margin-bottom: auto;
  border-radius: 22px; padding: 20px 18px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 20px 40px -18px rgba(0, 0, 0, 0.55);
  display: flex; flex-direction: column; gap: 14px; min-height: 58%;
}
.scr-head { display: flex; align-items: center; gap: 11px; }
.scr-badge {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: rgba(var(--or-rgb), 0.24); border: 1px solid rgba(var(--or-rgb), 0.55);
  color: var(--or-clair); font-family: var(--font-titre); font-weight: 800; font-style: italic;
}
.scr-head b { display: block; font-family: var(--font-titre); font-size: 0.98rem; }
.scr-head span { color: rgba(255, 255, 255, 0.55); font-size: 0.76rem; }
.scarousel { position: relative; flex: 1; min-height: 118px; }
/* Une seule diapo visible à la fois : la sortante disparaît net (opacité 0 de
   base, sans transition), l'entrante est animée. Évite tout chevauchement de
   texte pendant le changement. */
.sslide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 9px;
  opacity: 0;
}
.sslide.is-active { opacity: 1; animation: sslideIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes sslideIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.sslide__num { font-family: var(--font-titre); font-weight: 800; font-size: 3.1rem; line-height: 1; color: var(--or-clair); letter-spacing: -0.03em; }
.sslide__txt { color: #fff; font-size: 1.02rem; line-height: 1.4; }
.sslide__src { color: rgba(255, 255, 255, 0.5); font-size: 0.74rem; }
/* Contrôles manuels du carrousel de stats (flèches + points) */
.scarousel__ctrl { display: flex; align-items: center; justify-content: center; gap: 12px; }
.scarousel__nav {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer;
  transition: background var(--t), transform var(--t-rapide);
}
.scarousel__nav:hover { background: rgba(255, 255, 255, 0.22); }
.scarousel__nav:active { transform: scale(0.9); }
.scarousel__dots { display: flex; gap: 6px; justify-content: center; }
.scarousel__dots i { width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.3); transition: width var(--t), background var(--t); }
.scarousel__dots i.is-active { width: 18px; background: var(--or); }

/* Écran 2 : fenêtre de code (flottante sur le fond d'écran) */
.screen--code { justify-content: center; }
.code-win {
  border-radius: 16px; overflow: hidden;
  background: rgba(8, 12, 20, 0.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 44px -18px rgba(0, 0, 0, 0.6);
}
.code-top { display: flex; align-items: center; gap: 7px; padding: 11px 13px; background: rgba(255, 255, 255, 0.05); }
.code-top i { width: 11px; height: 11px; border-radius: 50%; }
.code-top i:nth-child(1) { background: #ff5f57; }
.code-top i:nth-child(2) { background: #febc2e; }
.code-top i:nth-child(3) { background: #28c840; }
.code-top span { margin-left: 8px; color: rgba(255, 255, 255, 0.45); font-size: 0.72rem; font-family: ui-monospace, Menlo, Consolas, monospace; }
.code-body {
  margin: 0; padding: 14px 15px; min-height: 190px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem; line-height: 1.6; color: #86efac;
  white-space: pre-wrap; word-break: break-word;
}
.code-caret { display: inline-block; width: 7px; height: 0.95em; background: var(--or); margin-left: 1px; vertical-align: -2px; animation: caret 1s step-end infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Écran 3 : fiche Google My Business (calquée sur la vraie structure) */
.screen--site { padding: 50px 10px 14px; }
.gmb { flex: 1; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.5); }
.gmb__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 14px 10px; }
.gmb__title { display: block; font-family: var(--font-titre); font-weight: 800; font-size: 1.02rem; color: #1a1e24; line-height: 1.15; }
.gmb__meta { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 0.72rem; color: #5f6368; }
.gmb__note { font-family: var(--font-titre); font-weight: 800; color: #1a1e24; font-size: 0.82rem; }
.gmb__stars { color: #f5b301; font-size: 0.7rem; letter-spacing: 0.5px; }
.gmb__gg { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1px solid #eceff3; color: #4285f4; font-family: var(--font-titre); font-weight: 800; font-size: 0.9rem; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }
.gmb__photos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; padding: 0 14px; }
.gmb__photos span { height: 46px; border-radius: 8px; }
.gmb__photos span:nth-child(1) { background: linear-gradient(135deg, #2e7d84, #0a3f47); }
.gmb__photos span:nth-child(2) { background: linear-gradient(135deg, #c98f4a, #7d5621); }
.gmb__photos span:nth-child(3) { background: linear-gradient(135deg, #4a6fa5, #22324d); }
.gmb__tabs { display: flex; gap: 20px; padding: 12px 15px 0; border-bottom: 1px solid #eceff3; }
.gmb__tabs b { font-family: var(--font-titre); font-size: 0.8rem; color: #80868b; font-weight: 600; padding-bottom: 8px; }
.gmb__tabs b.is-on { color: var(--bleu); box-shadow: inset 0 -2px 0 var(--bleu); }
.gmb__actions { display: flex; gap: 6px; padding: 11px 12px 8px; }
.gmb__act { flex: 1; text-align: center; padding: 7px 3px; border-radius: 999px; border: 1px solid #dfe3e8; color: #1a73e8; font-size: 0.63rem; font-weight: 600; white-space: nowrap; }
.gmb__hours { display: flex; align-items: center; gap: 7px; padding: 2px 15px 10px; font-size: 0.72rem; color: #1e8e3e; font-weight: 600; }
.gmb__hours i { width: 7px; height: 7px; border-radius: 50%; background: #1e8e3e; }
.gmb__reviews { flex: 1; padding: 8px 13px 12px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; border-top: 1px solid #eceff3; }
.rev {
  display: flex; gap: 9px; align-items: flex-start;
  opacity: 0; transform: translateY(16px) scale(0.96);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.rev.is-in { opacity: 1; transform: none; }
.rev__ava { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 0.62rem; font-weight: 700; }
.rev__stars { display: block; color: #f5b301; font-size: 0.64rem; letter-spacing: 0.5px; }
.rev__txt { display: block; color: #3a4048; font-size: 0.7rem; line-height: 1.3; }

/* =========================================================================
   9. POURQUOI OC13 (bento)
   ========================================================================= */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.bento__cell {
  position: relative;
  border-radius: var(--radius);
  padding: 30px 28px;
  overflow: hidden;
  border: 1px solid var(--bordure);
  background: #fff;
  box-shadow: var(--ombre-douce);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.bento__cell:hover { transform: translateY(-5px); box-shadow: var(--ombre); border-color: rgba(0,95,107,0.22); }
.bento__ico {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(0, 95, 107, 0.1);
  color: var(--bleu);
  margin-bottom: 18px;
}
.bento__ico svg { width: 25px; height: 25px; }
.bento__cell h3 { font-size: 1.28rem; margin-bottom: 9px; }
.bento__cell p { color: var(--texte-doux); font-size: 1rem; }
/* Grande cellule mise en avant (sur mesure, pas de template) */
.bento__cell--large {
  grid-column: span 2;
  color: var(--texte-clair);
  border: none;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(12,160,180,0.4), transparent 55%),
    linear-gradient(135deg, var(--bleu), var(--anthracite));
}
.bento__cell--large .bento__ico { background: rgba(246,246,239,0.12); color: var(--or); }
.bento__cell--large h3 { color: #fff; font-size: 1.5rem; }
.bento__cell--large p { color: var(--texte-clair-doux); max-width: 46ch; }
/* Cellule accent or */
.bento__cell--or {
  color: #241d0a;
  border: none;
  background: linear-gradient(150deg, var(--or-clair), var(--or) 70%, var(--or-fonce));
}
.bento__cell--or .bento__ico { background: rgba(36,29,10,0.14); color: #241d0a; }
.bento__cell--or h3 { color: #241d0a; }
.bento__cell--or p { color: rgba(36,29,10,0.78); }

/* =========================================================================
   10. SERVICES
   ========================================================================= */
.grille-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.carte {
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--ombre-douce);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  height: 100%;
}
.carte:hover { transform: translateY(-6px); box-shadow: var(--ombre); border-color: rgba(0, 95, 107, 0.25); }
.carte__icone {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(0, 95, 107, 0.1);
  color: var(--bleu);
  margin-bottom: 18px;
}
.carte__icone svg { width: 26px; height: 26px; }
.carte h3 { font-size: 1.22rem; margin-bottom: 10px; }
.carte p { color: var(--texte-doux); font-size: 1rem; }

.section__cta {
  margin-top: 44px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.section__cta span { color: var(--texte-doux); font-size: 0.96rem; }
.section--sombre .section__cta span { color: var(--texte-clair-doux); }

/* =========================================================================
   11. METHODE (sombre)
   ========================================================================= */
#methode { padding: clamp(88px, 12vw, 150px) 0; }
.grille-etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.etape {
  position: relative;
  padding: 30px 26px;
  border: 1px solid var(--bordure-claire);
  border-radius: var(--radius);
  background: rgba(246, 246, 239, 0.035);
  transition: transform var(--t), border-color var(--t), background var(--t);
}
.etape:hover { transform: translateY(-4px); border-color: rgba(var(--or-rgb), 0.4); background: rgba(246,246,239,0.06); }
.etape__num {
  font-family: var(--font-titre);
  font-weight: 800; font-size: 2.4rem; color: var(--or);
  line-height: 1; margin-bottom: 14px; display: block;
}
.etape h3 { font-size: 1.22rem; margin-bottom: 10px; }
.etape p { color: var(--texte-clair-doux); }

/* =========================================================================
   12. A PROPOS
   ========================================================================= */
.apropos { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.apropos__portrait {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, var(--bleu), var(--anthracite));
  box-shadow: var(--ombre);
}
.apropos__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apropos__portrait .badge {
  position: absolute; left: 16px; bottom: 16px;
  background: rgba(33, 37, 43, 0.6);
  color: var(--texte-clair);
  border: 1px solid var(--bordure-claire);
  border-radius: 999px;
  padding: 8px 14px; font-size: 0.82rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: inline-flex; align-items: center; gap: 8px;
}
.apropos__portrait .badge .etoile { width: 12px; height: 12px; color: var(--or); }
.apropos__texte h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.apropos__texte p { margin-top: 16px; color: var(--texte-doux); }
.apropos__texte p:first-of-type { margin-top: 22px; }

/* =========================================================================
   13. CONTACT + FORMULAIRE
   ========================================================================= */
.contact { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px, 5vw, 60px); }
.contact__infos p { color: var(--texte-doux); }
.contact__liste { margin-top: 26px; display: grid; gap: 16px; }
.contact__item { display: flex; gap: 14px; align-items: flex-start; }
.contact__item .puce {
  flex: none; width: 42px; height: 42px;
  display: grid; place-items: center; border-radius: 12px;
  background: rgba(0, 95, 107, 0.1); color: var(--bleu);
}
.contact__item .puce svg { width: 20px; height: 20px; }
.contact__item strong { display: block; font-family: var(--font-titre); }
.contact__item a { font-weight: 600; }
.contact__item span { color: var(--texte-doux); font-size: 0.96rem; }

.form {
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--ombre-douce);
}
.champ { margin-bottom: 18px; }
.champ label {
  display: block; font-family: var(--font-titre); font-weight: 600; font-size: 0.95rem; margin-bottom: 8px;
}
.champ .facultatif { color: var(--gris); font-weight: 500; }
.champ input,
.champ textarea {
  width: 100%; font: inherit; color: var(--texte);
  padding: 13px 15px; border: 1.5px solid var(--bordure); border-radius: var(--radius-sm);
  background: var(--creme);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.champ input:focus,
.champ textarea:focus {
  outline: none; border-color: var(--bleu); background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 95, 107, 0.12);
}
.champ textarea { resize: vertical; min-height: 130px; }
.champ select {
  width: 100%; font: inherit; color: var(--texte);
  padding: 13px 42px 13px 15px; border: 1.5px solid var(--bordure); border-radius: var(--radius-sm);
  background-color: var(--creme);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23545b64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t), background-color var(--t);
}
.champ select:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(0, 95, 107, 0.12); }

.consent {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 0.92rem; color: var(--texte-doux); margin-bottom: 22px;
}
.consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--bleu); }
.consent a { font-weight: 600; }

.form .btn { width: 100%; }

.form__retour {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm);
  font-size: 0.96rem; display: none;
}
.form__retour.est-visible { display: block; }
.form__retour--succes { background: rgba(0, 95, 107, 0.1); border: 1px solid rgba(0, 95, 107, 0.3); color: var(--bleu-fonce); }
.form__retour--erreur { background: rgba(180, 60, 60, 0.08); border: 1px solid rgba(180, 60, 60, 0.35); color: #9a2f2f; }

.pseudo-label {
  display: block; font-family: var(--font-titre); font-weight: 600; font-size: 0.95rem; margin-bottom: 10px;
}
.choix-grille { display: flex; flex-wrap: wrap; gap: 9px; }
.choix { position: relative; margin: 0; }
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix span {
  display: inline-block; padding: 9px 14px;
  border: 1.5px solid var(--bordure); border-radius: 999px;
  background: var(--creme); font-size: 0.9rem; cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.choix span:hover { border-color: var(--gris); }
.choix input:checked + span { border-color: var(--bleu); background: rgba(0, 95, 107, 0.1); color: var(--bleu-fonce); font-weight: 600; }
.choix input:focus-visible + span { outline: 3px solid var(--or); outline-offset: 2px; }

/* Stepper */
.stepper { margin-bottom: 24px; }
.stepper__bar { height: 8px; border-radius: 999px; background: rgba(0, 95, 107, 0.12); overflow: hidden; }
.stepper__fill {
  display: block; height: 100%; width: 20%; border-radius: 999px;
  background: linear-gradient(90deg, var(--bleu), var(--or));
  box-shadow: 0 0 8px rgba(var(--or-rgb), 0.4);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.stepper__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 11px; }
.stepper__count {
  font-family: var(--font-titre); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--bleu); white-space: nowrap;
}
.stepper__title { font-family: var(--font-titre); font-weight: 700; font-size: 1.06rem; color: var(--texte); text-align: right; }

.form-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-step:not(.is-active) { display: none; }
.form-step.is-active { animation: etapeEntre 0.4s ease both; }
@keyframes etapeEntre { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.form-step__aide { color: var(--texte-doux); font-size: 0.94rem; margin-bottom: 18px; }

.form-nav { display: flex; gap: 12px; margin-top: 24px; }
.form-nav .btn { width: auto; flex: 1; min-width: 0; }
.form-nav .btn--ghost { flex: 0 0 auto; }
[hidden] { display: none !important; }

/* =========================================================================
   14. PAGE OFFRES & OPTIONS
   ========================================================================= */
.formules-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.formule {
  background: #fff; border: 1px solid var(--bordure); border-radius: var(--radius);
  padding: 26px 24px; box-shadow: var(--ombre-douce);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.formule:hover { transform: translateY(-6px); box-shadow: var(--ombre); border-color: rgba(0, 95, 107, 0.25); }
.formule--accent { border-color: rgba(var(--or-rgb), 0.5); background: linear-gradient(180deg, #fff, rgba(var(--or-rgb), 0.06)); }
.formule__tete { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.formule__ico {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center;
  border-radius: 14px; background: rgba(0, 95, 107, 0.08); font-size: 1.5rem; line-height: 1;
}
.formule__tete h3 { font-size: 1.2rem; }
.formule__badge {
  display: inline-block; margin-top: 4px; font-family: var(--font-titre); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--or-fonce);
}
.liste-inclus { display: grid; gap: 10px; }
.liste-inclus li { position: relative; padding-left: 28px; color: var(--texte-doux); font-size: 0.98rem; }
.liste-inclus li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0, 95, 107, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005f6b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.liste-inclus--clair li { color: var(--texte-clair-doux); }
.liste-inclus--clair li strong { color: var(--texte-clair); }
.liste-inclus--clair li::before {
  background-color: rgba(246, 246, 239, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2a253' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}
.options-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px 30px; }
.option-cat { padding: 24px; border: 1px solid var(--bordure-claire); border-radius: var(--radius); background: rgba(246, 246, 239, 0.035); }
.option-cat h3 { font-size: 1.15rem; margin-bottom: 14px; color: var(--or); }

.lien-retour {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px;
  padding: 9px 16px 9px 12px; border: 1px solid var(--bordure); border-radius: 999px;
  background: rgba(255, 255, 255, 0.6); color: var(--bleu);
  font-family: var(--font-titre); font-weight: 600; font-size: 0.92rem;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.lien-retour:hover { background: #fff; border-color: var(--bleu); transform: translateX(-3px); }
.lien-retour svg { width: 17px; height: 17px; flex: none; }

/* =========================================================================
   15. PIED DE PAGE
   ========================================================================= */
.site-footer {
  position: relative; overflow: hidden;
  background: var(--anthracite-2); color: var(--texte-clair-doux);
  padding: 78px 0 30px;
}
.site-footer > .conteneur { position: relative; z-index: 1; }
.footer__haut {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 26px;
  padding-bottom: 30px; border-bottom: 1px solid var(--bordure-claire);
}
.footer__marque { max-width: 330px; }
.footer__marque .marque { color: var(--texte-clair); margin-bottom: 12px; }
.footer__marque p { font-size: 0.95rem; }
.footer__social { margin-top: 18px; }
.social-lien {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 13px; border: 1px solid var(--bordure-claire); border-radius: 999px;
  color: var(--texte-clair); font-family: var(--font-titre); font-weight: 600; font-size: 0.92rem;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.social-lien:hover { background: rgba(246, 246, 239, 0.06); border-color: var(--or); color: var(--or); transform: translateY(-2px); }
.footer__liens { display: flex; flex-wrap: wrap; gap: 30px 46px; }
.footer__col h4 {
  font-family: var(--font-titre); color: var(--texte-clair); font-size: 0.95rem;
  margin-bottom: 14px; letter-spacing: 0.04em;
}
.footer__col a { color: var(--texte-clair-doux); display: block; padding: 5px 0; font-size: 0.95rem; }
.footer__col a:hover { color: var(--or); }
.footer__bas {
  margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 12px; font-size: 0.86rem; color: var(--gris);
}

/* =========================================================================
   16. MICRO-ANIMATIONS (reveal) + parallax
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-y, 28px));
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--delai, 0s);
  will-change: opacity, transform;
}
.reveal.est-visible { opacity: 1; transform: none; }

/* Element deplace en parallax : --par est pilote en JS (px) */
[data-parallax] { transform: translate3d(0, var(--par, 0px), 0); will-change: transform; }

/* =========================================================================
   17. PAGES SECONDAIRES (mentions legales, 404)
   ========================================================================= */
.page-simple { padding-top: calc(var(--header-h) + 60px); padding-bottom: 90px; }
.prose { max-width: 760px; }
.prose h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 10px; }
.prose .maj { color: var(--texte-doux); font-size: 0.95rem; margin-bottom: 40px; }
.prose h2 { font-size: 1.4rem; margin: 40px 0 12px; padding-top: 20px; border-top: 1px solid var(--bordure); }
.prose h2:first-of-type { border-top: 0; padding-top: 0; }
.prose h3 { font-size: 1.1rem; margin: 22px 0 8px; }
.prose p, .prose li { color: var(--texte-doux); }
.prose p { margin-bottom: 12px; }
.prose ul { padding-left: 4px; margin-bottom: 14px; }
.prose ul li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.prose ul li::before {
  content: ""; position: absolute; left: 4px; top: 10px; width: 8px; height: 8px; background: var(--or);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.auplaceholder {
  background: rgba(var(--or-rgb), 0.14); border-radius: 4px; padding: 1px 7px;
  font-weight: 600; color: var(--bleu-fonce); font-family: var(--font-titre);
}
.legal-layout {
  display: grid; grid-template-columns: 250px minmax(0, 820px);
  gap: clamp(32px, 5vw, 80px); align-items: start; justify-content: center;
}
.legal-layout > * { min-width: 0; }
.legal-layout .prose { max-width: none; }
.legal-toc { position: sticky; top: calc(var(--header-h) + 24px); }
.legal-toc__titre {
  font-family: var(--font-titre); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu); margin-bottom: 14px;
}
.legal-toc nav { display: grid; gap: 2px; }
.legal-toc a {
  display: block; padding: 9px 14px; border-left: 2px solid var(--bordure);
  color: var(--texte-doux); font-size: 0.95rem;
  transition: border-color var(--t), color var(--t), background var(--t);
}
.legal-toc a:hover { border-left-color: var(--or); color: var(--bleu); background: rgba(0, 95, 107, 0.04); }

.erreur {
  position: relative; overflow: hidden; min-height: 100svh;
  display: grid; place-items: center; text-align: center; padding: 120px 22px 60px;
}
.erreur__code {
  font-family: var(--font-titre); font-weight: 800; font-size: clamp(5rem, 20vw, 11rem);
  line-height: 1; color: var(--or);
}
.erreur h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 8px 0 12px; }
.erreur p { color: var(--texte-clair-doux); max-width: 460px; margin: 0 auto 30px; }

/* =========================================================================
   18. RESPONSIVE
   ========================================================================= */
@media (max-width: 992px) {
  /* Scrollytelling en une colonne : le téléphone n'est plus « sticky », il
     s'insère entre le Hero et la suite. Les panneaux ne forcent plus 100vh. */
  .scrolly__grid { display: flex; flex-direction: column; gap: 0; }
  .scrolly__left { display: contents; }
  #panel-hero { order: 1; min-height: auto; padding-top: calc(var(--header-h) + 34px); padding-bottom: 18px; }
  .scrolly__right { order: 2; position: static; }
  #panel-build { order: 3; min-height: auto; padding: 40px 0; }
  #avis { order: 4; min-height: auto; padding: 88px 0 52px; }
  .phone-sticky { position: static; height: auto; padding: 6px 0 22px; perspective: none; }
  /* Sur mobile : téléphone droit et fixe (pas d'inclinaison), écran cliquable. */
  .rphone {
    height: auto; width: clamp(230px, 72vw, 300px);
    transform: none !important;
  }
  .scrolly__panel { scroll-snap-align: none; }
}

@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__cell--large { grid-column: span 2; }
}

@media (max-width: 860px) {
  .apropos { grid-template-columns: 1fr; }
  .apropos__portrait { max-width: 360px; margin-inline: auto; order: -1; }
  .contact { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* Navigation -> menu mobile deroulant */
  .burger { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(245, 245, 233, 0.98);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    padding: 12px 22px 24px; box-shadow: var(--ombre);
    transform: translateY(-140%); transition: transform 0.34s ease;
    max-height: calc(100svh - var(--header-h)); overflow-y: auto;
  }
  .nav.est-ouvert { transform: translateY(0); }
  .nav__liens { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__liens a { color: var(--texte); padding: 15px 4px; border-bottom: 1px solid var(--bordure); font-size: 1.05rem; }
  .nav__liens a::after { display: none; }
  .nav .btn { margin-top: 16px; width: 100%; }
  .site-header.menu-ouvert { background: rgba(245, 245, 233, 0.98); color: var(--texte); box-shadow: none; }
}

@media (max-width: 560px) {
  .conteneur { padding-inline: 18px; }
  .bento { grid-template-columns: 1fr; }
  .bento__cell--large { grid-column: span 1; }
  .hero__actions .btn { width: 100%; }
  .btn { width: 100%; }
  .nav .btn, .form .btn { width: 100%; }
  .footer__bas { flex-direction: column; }
  .section__cta .btn { width: 100%; }
  .avis-chip { flex-wrap: wrap; }
  .avis-chip b { min-width: 0; }
  .nfc-how__cta .btn { width: 100%; }
}

@media (max-width: 520px) {
  .stepper__title { font-size: 0.98rem; }
  .form-nav { flex-wrap: wrap; }
  .form-nav .btn { width: 100%; flex: 1 1 100%; }
}

@media (max-width: 900px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--bordure); }
  .legal-toc nav { display: flex; flex-wrap: wrap; gap: 6px 8px; }
  .legal-toc a { border-left: 0; padding: 6px 12px; border: 1px solid var(--bordure); border-radius: 999px; }
}

/* =========================================================================
   19. PREFERENCE : MOUVEMENT REDUIT
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fond-anime, .fond-anime::before, .fond-anime::after,
  .fond-doux::before, .fond-doux::after,
  .forme, .nfc-plaque, .code-caret, .phone-float,
  .titre-brillant, .btn--metal::before { animation: none !important; }
  .rphone { transform: none !important; }
  .sslide { transition: none !important; }
  .titre-brillant { background-image: none; color: var(--texte-clair); -webkit-text-fill-color: var(--texte-clair); }
  .titre-brillant .accent { color: var(--or); -webkit-text-fill-color: var(--or); }
  .reveal { opacity: 1; transform: none; }
  [data-parallax] { transform: none !important; }
  .particules { display: none; }
}

/* =========================================================================
   TITRE BRILLANT - reflet qui balaie lentement le titre principal
   ========================================================================= */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .titre-brillant {
    background-image: linear-gradient(
      100deg,
      var(--texte-clair) 0%, var(--texte-clair) 35%,
      var(--or-clair) 47%, #fffdf6 52%, var(--or-clair) 57%,
      var(--texte-clair) 70%, var(--texte-clair) 100%
    );
    background-size: 250% 100%;
    background-repeat: repeat;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: brillance 7s linear infinite;
  }
  .titre-brillant .accent { -webkit-text-fill-color: var(--or); color: var(--or); }
}
@keyframes brillance {
  from { background-position: 150% center; }
  to   { background-position: -50% center; }
}