@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-400.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cormorant-garamond-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700.woff2') format('woff2');}
/* ============================================================
   Design tokens v2 : signature agence partagée par tous les sites.
   Les variables --accent* / --paper / --ink / --muted sont
   surchargées par le theme.css de chaque famille de template.
   Polices : --font-display / --font-body pointent par défaut sur
   des stacks système. Le générateur injecte les @font-face des
   woff2 self-hostés (voir design-system/fonts.json) puis
   surcharge ces deux variables dans un bloc :root postérieur.
   Un seul thème par famille ; la plupart sont clairs, mais une
   famille peut être sombre (tatouage, auto depuis A-31) : son
   theme.css surcharge alors TOUTES les variables de couleur,
   y compris --footer-bg et --shadow-tint.
   ============================================================ */

:root {
  /* Typo : stacks système par défaut, surchargées par le générateur */
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-base: 1rem;            /* 16px minimum, jamais moins en corps */
  --text-sm: 0.9rem;
  --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --text-h1: clamp(2.6rem, 1.6rem + 5vw, 4.4rem);   /* h1 surdimensionné */
  --text-h2: clamp(1.7rem, 1.35rem + 1.8vw, 2.5rem);
  --text-h3: 1.15rem;
  --leading: 1.6;

  /* Couleurs : valeurs par défaut (thème neutre), surchargées par famille */
  --accent: #3e6b59;            /* couleur principale, contraste >= 4.5:1 sur --paper */
  --accent-dark: #2d5244;       /* hover / titres colorés */
  --accent-soft: #eef3ef;       /* fonds de section teintés */
  --paper: #faf8f4;             /* fond de page */
  --surface: #ffffff;           /* cartes */
  --ink: #22302b;               /* texte principal */
  --muted: #5c6b64;             /* texte secondaire, contraste >= 4.5:1 sur --paper */
  --line: rgba(0, 0, 0, 0.08);  /* bordures discrètes */
  --footer-bg: var(--ink);      /* fond du footer (les thèmes sombres le surchargent) */

  /* Ombres : valeurs neutres de repli, teintées plus bas si color-mix existe */
  --shadow-tint: var(--accent-dark);
  --shadow-sm: 0 1px 3px rgba(20, 30, 25, 0.08);
  --shadow: 0 2px 6px rgba(20, 30, 25, 0.05), 0 12px 32px rgba(20, 30, 25, 0.07);
  --shadow-lg: 0 24px 64px rgba(20, 30, 25, 0.16);

  /* Espacements : respiration x1,5 entre sections par rapport à la v1 */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-section: clamp(5.25rem, 3.5rem + 8vw, 9.75rem);

  /* Forme */
  --radius: 14px;
  --radius-lg: 22px;
  --radius-bento: 28px;         /* tuiles bento */

  /* Mouvement */
  --transition: 200ms ease;

  /* Gabarit */
  --container: 1120px;
}

/* Ombres douces teintées par la couleur de famille (via --shadow-tint) */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --shadow-sm: 0 1px 3px color-mix(in srgb, var(--shadow-tint) 10%, transparent);
    --shadow:
      0 2px 8px color-mix(in srgb, var(--shadow-tint) 7%, transparent),
      0 16px 40px color-mix(in srgb, var(--shadow-tint) 12%, transparent);
    --shadow-lg: 0 24px 64px color-mix(in srgb, var(--shadow-tint) 20%, transparent);
  }
}

:root{--font-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;--font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;}
/* ============================================================
   Base agence : reset + composants partagés par tous les sites.
   Dépend des variables de tokens.css. HTML + CSS pur, zéro JS.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; }
h1 { font-size: var(--text-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--text-h2); text-wrap: balance; }
h3 { font-size: var(--text-h3); font-family: var(--font-body); font-weight: 600; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

/* --- Navigation ------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-block: 0.9rem; }
.nav-name { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink); text-decoration: none; }
.nav-name:hover { color: var(--accent-dark); }

/* --- Boutons (cible tactile >= 44px) ---------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 47px; padding: 0.7rem 1.5rem;
  border-radius: 999px; border: none; white-space: nowrap;
  font: 500 1rem var(--font-body); text-decoration: none;
  cursor: pointer; transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); color: var(--accent-dark); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* --- Hero ------------------------------------------------------- */
.hero { padding-block: var(--space-section); }
.hero-grid { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 860px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero-kicker {
  display: inline-block; margin-bottom: var(--space-2);
  padding: 0.35rem 0.9rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dark);
  font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.02em;
}
.hero-lead { margin-top: var(--space-3); font-size: var(--text-lg); color: var(--muted); max-width: 36ch; }
.hero-actions { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hero-photo { border-radius: var(--radius-lg); box-shadow: var(--shadow); aspect-ratio: 4 / 3.4; object-fit: cover; width: 100%; }

/* --- Sections ---------------------------------------------------- */
.section { padding-block: var(--space-section); }
.section-tinted { background: var(--accent-soft); }
/* Séparateur élégant entre deux sections de même fond */
.section-sep {
  border: 0; height: 1px; margin: 0 auto;
  width: min(var(--container), 88%);
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
.section-head { max-width: 56ch; margin-bottom: var(--space-4); }
.section-head .eyebrow {
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-1);
}

/* --- Cartes prestations : grille bento ---------------------------- */
/* Mobile = 1 colonne. Dès 640px la première tuile occupe 2 colonnes
   (2x plus grande), le reste s'écoule en flux dense sans trou. */
.cards { display: grid; gap: var(--space-3); }
@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; }
  .cards > .card:first-child { grid-column: span 2; }
}
@media (min-width: 980px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .cards > .card:first-child { grid-column: span 2; }
}
/* Rangées toujours PLEINES : quand le nombre de cartes ne remplit pas la
   dernière rangée, la dernière carte s'étire pour couvrir la ligne — jamais
   de carte orpheline en petit à la ligne (avec la 1re en span 2 : à 3 col,
   reste 1 case si N multiple de 3, reste 2 cases si N = 3n+1). */
.cards:not(.prestations--liste) > .card:only-child { grid-column: 1 / -1; }
@media (min-width: 640px) and (max-width: 979px) {
  .cards:not(.prestations--liste) > .card:last-child:nth-child(even) { grid-column: span 2; }
}
@media (min-width: 980px) {
  .cards:not(.prestations--liste) > .card:last-child:nth-child(3n) { grid-column: span 3; }
  .cards:not(.prestations--liste) > .card:last-child:nth-child(3n+1):not(:only-child) { grid-column: span 2; }
}
.card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-bento); padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 0.6rem;
}
/* Tuile d'appel : fond légèrement teinté, titre en typo de caractère */
.cards > .card:first-child {
  background: linear-gradient(140deg, var(--accent-soft), var(--surface) 72%);
  padding: var(--space-4) var(--space-3);
}
.cards > .card:first-child h3 { font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); font-weight: 600; }
.card-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.card-prix { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--accent-dark); white-space: nowrap; }
.card p { color: var(--muted); font-size: var(--text-sm); }

/* --- Cadre image : wrapper <picture> avec LQIP en fond -------------- */
.img-frame {
  position: relative; overflow: hidden;
  background-size: cover; background-position: center; /* LQIP inline */
}
.img-frame picture { display: block; width: 100%; height: 100%; }
.img-frame img { width: 100%; height: 100%; object-fit: cover; }

/* --- À propos ----------------------------------------------------- */
.apropos-grid { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 860px) { .apropos-grid { grid-template-columns: 0.9fr 1.1fr; } }
.apropos-photo { border-radius: var(--radius-bento); box-shadow: var(--shadow); aspect-ratio: 4 / 3; width: 100%; }
.apropos-texte { color: var(--ink); font-size: var(--text-lg); max-width: 52ch; }

/* --- Infos pratiques ---------------------------------------------- */
.infos { display: grid; gap: var(--space-3); }
@media (min-width: 760px) { .infos { grid-template-columns: repeat(3, 1fr); } }
.info {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--space-3);
}
.info h3 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.info h3 svg { width: 19px; height: 19px; color: var(--accent); flex-shrink: 0; }
.info p, .info a { color: var(--muted); font-size: var(--text-base); }
.info a { display: inline-block; padding-block: 0.35rem; } /* cible tactile */

/* --- Réseaux sociaux ----------------------------------------------- */
.reseaux { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.reseaux a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-dark);
  transition: background var(--transition);
}
.reseaux a:hover { background: var(--accent); color: #fff; }
.reseaux svg { width: 20px; height: 20px; }

/* --- Bandeau contact (CTA final) ----------------------------------- */
.cta-final { text-align: center; }
.cta-final .hero-actions { justify-content: center; }

/* --- Hero plein écran (passe premium) -------------------------------- */
/* Couches : .hero-media (image + LQIP) -3, dégradé ::after -2,
   grain ::before -1, contenu au-dessus. */
.hero-full {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: clamp(560px, 92vh, 860px);
  padding-block: var(--space-5) var(--space-5);
}
.hero-media {
  position: absolute; inset: 0; z-index: -3;
  background-size: cover; background-position: center; /* LQIP inline */
}
.hero-media picture { display: block; width: 100%; height: 100%; }
/* Vidéo d'ambiance héro : recouvre l'image dans la même couche -3 (dégradé
   ::after -2 et grain -1 restent au-dessus). poster = hero.jpg, donc jamais
   d'écran noir avant lecture. */
.hero-media .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Le juge QA capture en reduced-motion : la vidéo se masque, l'image picture
   en dessous reste la source visible. */
@media (prefers-reduced-motion: reduce) {
  .hero-media .hero-video { display: none; }
}
.hero-full .hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero-full::after {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(to top, rgba(10, 14, 10, 0.86) 0%, rgba(10, 14, 10, 0.55) 38%, rgba(10, 14, 10, 0.25) 70%, rgba(10, 14, 10, 0.18) 100%);
}
@media (max-width: 699px) {
  .hero-full { min-height: 78svh; padding-top: var(--space-4); }
}
/* Grain photographique subtil, hero uniquement */
.hero-full::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' 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: 180px 180px;
}
.hero-full .hero-content { max-width: 720px; color: #fff; }
.hero-full .hero-kicker { background: rgba(255, 255, 255, 0.14); color: #fff; backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.22); }
.hero-full h1 { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.hero-full .hero-lead { color: rgba(255, 255, 255, 0.92); max-width: 52ch; }
.hero-full .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.65); }
.hero-full .btn-ghost:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.hero-avis {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: var(--space-2); padding: 0.4rem 1rem;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px);
  font-size: var(--text-sm); color: #fff;
}
.hero-avis svg { width: 16px; height: 16px; fill: #f6c344; stroke: none; flex-shrink: 0; }
.nav.scrolled { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08); }

/* --- Bandeau CTA premium --------------------------------------------- */
.cta-band {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: #fff;
}
.cta-band h2 { color: #fff; }
.cta-band .btn-primary { background: #fff; color: var(--accent-dark); }
.cta-band .btn-primary:hover { background: var(--accent-soft); color: var(--accent-dark); }

/* --- Footer (sombre premium) ------------------------------------------ */
.footer { background: var(--footer-bg); color: rgba(255, 255, 255, 0.65); padding-block: var(--space-5) var(--space-4); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); color: rgba(255, 255, 255, 0.55); font-size: var(--text-sm); }

/* --- Header v2 : monogramme + ancres ---------------------------------- */
/* Monogramme = logo de repli généré à partir des initiales du client, posé sur
   chaque site qui n'a pas de logo déposé. Marque pleine, filet intérieur subtil
   et légère ombre portée pour qu'il se lise comme un logotype, pas un simple carré. */
.monogramme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  background: var(--accent); color: #fff;
  font: 600 1.05rem var(--font-display); letter-spacing: 0.03em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 8px 20px -10px var(--shadow-tint);
}
.nav-brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.nav-brand .nav-name { text-decoration: none; }
/* Logo client (remplace le monogramme dans le header) : hauteur contrainte,
   ratio préservé, jamais déformé ni démesuré. */
.brand-logo { display: block; height: clamp(34px, 4.4vw, 46px); width: auto; max-width: 220px; object-fit: contain; }
/* Marque (SVG monogramme dégradé ou emblème) posée à gauche du nom. Le SVG est
   transparent et se fond dans le bandeau : aucune boîte blanche, aucun cadre.
   Une ombre portée très douce lui donne du relief sans le détacher en sticker. */
.brand-mark {
  display: block; width: 46px; height: 46px; flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px var(--shadow-tint));
}
.nav-links { display: none; gap: var(--space-3); flex-wrap: nowrap; }
.nav-links a { color: var(--ink); text-decoration: none; font-size: var(--text-sm); font-weight: 500; padding-block: 0.5rem; white-space: nowrap; }
.nav-links a:hover { color: var(--accent-dark); }
@media (min-width: 820px) { .nav-links { display: flex; } }
@media (max-width: 560px) { .nav .btn-primary { display: none; } }

/* --- Cartes numérotées ------------------------------------------------ */
.card-num {
  font: 600 0.85rem var(--font-display); letter-spacing: 0.08em;
  color: var(--accent); opacity: 0.85;
}

/* --- Métier expliqué --------------------------------------------------- */
.metier-grid { display: grid; gap: var(--space-3); }
@media (min-width: 860px) { .metier-grid { grid-template-columns: 0.85fr 1.15fr; align-items: start; } .metier-grid .section-head { margin-bottom: 0; } }
.metier-texte {
  font-size: var(--text-lg); color: var(--ink); max-width: 58ch;
  padding-left: var(--space-3); border-left: 3px solid var(--accent);
}
.metier-points { list-style: none; margin-top: var(--space-3); display: grid; gap: 0.7rem; max-width: 58ch; }
.metier-points li {
  position: relative; padding-left: 2rem;
  color: var(--ink); font-size: var(--text-base);
}
.metier-points li::before {
  content: ''; position: absolute; left: 0; top: 0.12em;
  width: 1.15em; height: 1.15em; border-radius: 50%;
  background: var(--accent-soft);
}
.metier-points li::after {
  content: ''; position: absolute; left: 0.32em; top: 0.38em;
  width: 0.52em; height: 0.3em;
  border-left: 2.5px solid var(--accent-dark); border-bottom: 2.5px solid var(--accent-dark);
  transform: rotate(-45deg);
}

/* --- Galerie : mosaïque adaptative au nombre d'images --------------------- */
.galerie { display: grid; gap: var(--space-2); }
.galerie .img-frame {
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  aspect-ratio: 16 / 11; width: 100%;
}
@media (min-width: 700px) {
  .galerie { grid-template-columns: repeat(2, 1fr); }
  /* 1 seule image : centrée, jamais étirée pleine largeur */
  .galerie:has(.img-frame:only-child) { grid-template-columns: 1fr; }
  .galerie .img-frame:only-child { max-width: 720px; margin-inline: auto; }
  /* 3 images : la première en colonne haute, les deux autres empilées */
  .galerie:has(.img-frame:nth-child(3)) .img-frame:first-child {
    grid-row: span 2; aspect-ratio: auto; height: 100%;
  }
}

/* --- Déroulé en 3 étapes -------------------------------------------------- */
.etapes { display: grid; gap: var(--space-3); counter-reset: etape; }
@media (min-width: 760px) { .etapes { grid-template-columns: repeat(3, 1fr); } }
.etape {
  background: linear-gradient(165deg, var(--accent-soft), var(--surface) 55%);
  border: 1px solid var(--line);
  border-radius: var(--radius-bento); padding: var(--space-4) var(--space-3);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.etape-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; margin-bottom: var(--space-2);
  background: var(--accent); color: transparent;
  font: 600 1.15rem var(--font-display);
  box-shadow: var(--shadow-sm);
  position: relative;
}
/* Icônes des étapes : téléphone, échange, rendez-vous (mask SVG, couleur héritée) */
.etape-num::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 22px; height: 22px; background: #fff;
  mask: center / contain no-repeat;
}
.etape:nth-child(1) .etape-num::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}
.etape:nth-child(2) .etape-num::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 11h8v2H8v-2zm0-4h10v2H8V7z'/%3E%3C/svg%3E");
}
.etape:nth-child(3) .etape-num::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V3h-2zm3 18H5V8h14v11z'/%3E%3C/svg%3E");
}
/* Flèche de liaison entre les étapes (desktop) */
@media (min-width: 760px) {
  .etape:not(:last-child)::after {
    content: ''; position: absolute; top: 44px;
    right: calc(-0.5 * var(--space-3) - 7px);
    width: 14px; height: 14px;
    border-top: 2.5px solid var(--accent); border-right: 2.5px solid var(--accent);
    transform: rotate(45deg); opacity: 0.55;
  }
}
.etape h3 { margin-bottom: 0.4rem; }
.etape p { color: var(--muted); font-size: var(--text-sm); }

/* --- Carte Google Maps ----------------------------------------------------- */
.map-wrap {
  margin-top: var(--space-3);
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  background: var(--surface);
}
.map-wrap iframe { display: block; width: 100%; height: clamp(360px, 46vw, 520px); border: 0; }
.btn-itineraire { margin-top: var(--space-2); min-height: 42px; padding: 0.45rem 1.15rem; font-size: var(--text-sm); }

/* --- Footer riche ------------------------------------------------------------ */
.footer-grid { display: grid; gap: var(--space-4); padding-bottom: var(--space-4); margin-bottom: var(--space-3); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.footer-nom { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 600; color: #fff; }
/* Logo client en pied de page : pastille blanche pour rester lisible sur le
   footer sombre quelle que soit la couleur du logo (clair comme foncé). */
.footer-logo { display: block; height: 40px; width: auto; max-width: 190px; object-fit: contain; background: #fff; padding: 6px 10px; border-radius: 8px; }
.footer-mark { display: block; width: 42px; height: 42px; flex-shrink: 0; object-fit: contain; }
.footer-sous { color: rgba(255, 255, 255, 0.6); font-size: var(--text-sm); margin-top: 0.35rem; }
.footer-liens { display: flex; flex-direction: column; gap: 0.3rem; }
.footer-liens a, .footer-contact a { color: rgba(255, 255, 255, 0.68); font-size: var(--text-sm); text-decoration: none; padding-block: 0.3rem; }
.footer-liens a:hover, .footer-contact a:hover { color: #fff; }
.footer-contact { display: flex; flex-direction: column; gap: 0.3rem; }

/* --- FAQ : details/summary natif, zéro JS --------------------------------------- */
/* Section centrée : sans margin-inline auto le bloc (760px max) reste collé
   à gauche du container dès que celui-ci est plus large (1024px+). */
.faq { display: grid; gap: var(--space-2); max-width: 760px; margin-inline: auto; }
@media (min-width: 760px) {
  #faq .section-head { margin-inline: auto; text-align: center; }
}
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: 47px; padding: 0.85rem var(--space-3);
  cursor: pointer; list-style: none;
  font-weight: 600; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; flex-shrink: 0;
  font: 400 1.5rem var(--font-display); color: var(--accent);
  transition: transform var(--transition);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p {
  padding: 0 var(--space-3) var(--space-3);
  color: var(--muted); font-size: var(--text-base); max-width: 62ch;
}

/* --- Barre d'appel mobile fixe ------------------------------------------------ */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 0.6rem clamp(1rem, 4vw, 2rem) calc(0.6rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.callbar .btn { width: 100%; justify-content: center; }
.callbar-avis {
  margin-bottom: 0.4rem; text-align: center;
  font-size: 0.85rem; color: var(--muted);
}
.callbar-avis svg { width: 13px; height: 13px; fill: #b8860b; stroke: none; vertical-align: -1px; }
@media (min-width: 700px) { .callbar { display: none; } }
@media (max-width: 699px) { body { padding-bottom: 140px; } }

/* --- Lien mentions légales (footer) --------------------------------------------- */
.footer-legales { color: rgba(255, 255, 255, 0.55); font-size: var(--text-sm); text-decoration: none; padding-block: 0.3rem; }
.footer-legales:hover { color: #fff; }

/* ============================================================
   Variantes opt-in A-31 (3 maximum) : un template les active en
   posant la classe dans son markup ; aucun effet sans la classe.
   Tout besoin au-delà vit dans le theme.css de la famille.
   ============================================================ */

/* 1. Héro split clair : texte sur paper, visuel encadré en colonne.
   Markup : <header class="hero hero--split"> + .hero-grid ; le visuel
   vit dans .hero-frame (LQIP inline en background-image + picture +
   IF:video_hero préservés tels quels à l'intérieur). */
.hero--split { padding-top: calc(var(--space-section) * 0.85); }
.hero--split .hero-frame {
  position: relative; overflow: hidden;
  border-radius: var(--radius-bento); box-shadow: var(--shadow);
  aspect-ratio: 4 / 3.4;
  background-size: cover; background-position: center;
}
.hero--split .hero-frame img,
.hero--split .hero-frame .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
@media (prefers-reduced-motion: reduce) {
  .hero--split .hero-frame .hero-video { display: none; }
}
/* Pastille avis version fond clair (la version par défaut est pensée
   pour l'overlay sombre du héro plein) */
.hero--split .hero-avis {
  background: var(--accent-soft); color: var(--accent-dark);
  border-color: var(--line); backdrop-filter: none;
}
.hero--split .hero-avis svg { fill: #b8860b; }
/* Empilé (< 860px, avant le passage 2 colonnes) le contenu est centré :
   sinon le texte reste collé au bord gauche avec un grand vide à droite
   (tablette / zoom navigateur). */
@media (max-width: 859px) {
  .hero--split .hero-content { text-align: center; }
  .hero--split .hero-lead { margin-left: auto; margin-right: auto; }
  .hero--split .hero-actions { justify-content: center; }
  .hero--split .hero-avis { margin-left: auto; margin-right: auto; }
}

/* 2. Prestations en liste éditoriale : rangées à filets, sans cartes.
   Markup : <div class="cards prestations--liste">, contenu inchangé. */
.prestations--liste { grid-template-columns: 1fr; gap: 0; }
.prestations--liste > .card,
.prestations--liste > .card:first-child {
  grid-column: auto;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  border-top: 1px solid var(--line);
  padding: var(--space-3) 0.25rem;
}
.prestations--liste > .card:last-child { border-bottom: 1px solid var(--line); }
.prestations--liste > .card:first-child h3 {
  font-family: var(--font-display); font-size: var(--text-h3); font-weight: 600;
}

/* 3. Galerie en bande : rangée régulière bord à bord.
   Markup : <div class="galerie galerie--bande"> posé hors .container
   (enfant direct de la section), padding latéral minimal. */
.galerie--bande { gap: var(--space-1); padding-inline: var(--space-1); }
.galerie--bande .img-frame { border-radius: var(--radius); aspect-ratio: 3 / 2; }
@media (min-width: 700px) {
  .galerie--bande { grid-template-columns: repeat(3, 1fr); }
  /* neutralise la composition 1 haute + 2 empilées de la galerie standard */
  .galerie--bande:has(.img-frame:nth-child(3)) .img-frame:first-child {
    grid-row: auto; aspect-ratio: 3 / 2; height: auto;
  }
}

/* ============================================================
   Passe « premium dynamique » (A-34) : systèmes transverses posés
   par site.js (aucun markup à ajouter dans les templates) et pilotés
   par la variable --scroll (0 -> 1, progression de lecture de la page)
   pour rester compatibles tous navigateurs. Le bloc
   prefers-reduced-motion: reduce de base.css fige déjà transitions et
   animations ; ces éléments décoratifs sont pointer-events:none et
   aria-hidden, jamais porteurs d'information.
   ============================================================ */

/* --- 1. Barre de progression de lecture (haut de page) ------------------ */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 30;
  transform: scaleX(var(--scroll, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
  pointer-events: none;
}

/* --- 2. Colonne de parcours (spine) : trait vertical qui se remplit au
   scroll et jalonne les sections de la page. Desktop large uniquement,
   posée à gauche du contenu, purement décorative. ------------------------ */
.scroll-spine { display: none; }
@media (min-width: 1180px) {
  .scroll-spine {
    display: block; position: fixed; left: max(18px, calc((100vw - var(--container)) / 2 - 26px));
    top: 0; bottom: 0; width: 2px; z-index: 9;
    background: var(--line); border-radius: 2px; pointer-events: none;
  }
  .scroll-spine-fill {
    position: absolute; left: 0; top: 0; width: 100%; transform-origin: 0 0;
    height: 100%; transform: scaleY(var(--scroll, 0));
    background: linear-gradient(180deg, var(--accent), var(--accent-dark));
    border-radius: 2px;
  }
  .scroll-spine-dot {
    position: absolute; left: 50%; width: 9px; height: 9px; border-radius: 50%;
    transform: translate(-50%, -50%); background: var(--paper);
    box-shadow: inset 0 0 0 2px var(--line); transition: box-shadow 0.3s ease, background 0.3s ease;
  }
  .scroll-spine-dot.active {
    background: var(--accent);
    box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px var(--accent-soft);
  }
}

/* --- 3. Particules flottantes (hero + bandeau CTA) : posées par site.js,
   très discrètes, derrière le contenu. ----------------------------------- */
.particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-full .particles { z-index: -1; }
.cta-band { position: relative; isolation: isolate; overflow: hidden; }
.cta-band .particles { z-index: 0; }
.cta-band .container { position: relative; z-index: 1; }
.hero-full .hero-content { position: relative; z-index: 1; }
.particle {
  position: absolute; bottom: -14px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.5); opacity: 0;
}

/* --- 4. Traits décoratifs dans les zones de couleur (peps) -------------- */
/* Filets fins en biais, très discrets, dans le coin haut-droit des sections
   teintées : donne du rythme sans charger. Décoratif, sous le contenu. */
.section-tinted { position: relative; isolation: isolate; overflow: hidden; }
.section-tinted > .container { position: relative; z-index: 1; }
.section-tinted::before {
  content: ''; position: absolute; top: -40px; right: -40px; z-index: 0;
  width: 320px; height: 320px; pointer-events: none; opacity: 0.09;
  background-image: repeating-linear-gradient(135deg, var(--accent) 0 1.5px, transparent 1.5px 13px);
  -webkit-mask-image: radial-gradient(120px at top right, #000, transparent 72%);
  mask-image: radial-gradient(120px at top right, #000, transparent 72%);
}
/* Bandeau CTA : voile lumineux en biais qui balaye lentement (animé dans
   anim.css), plus un liseré clair en haut. */
.cta-band::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 26px);
}

/* --- 5. Carrousel galerie (posé par site.js : .galerie.is-carousel) ----- */
/* La galerie défile horizontalement avec accroche (scroll-snap), un aperçu
   de l'image suivante, glisser au doigt, flèches et points de navigation.
   Tant que JS n'a pas tourné, la galerie garde sa mosaïque CSS d'origine. */
.galerie.is-carousel {
  display: flex; grid-template-columns: none;
  gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 0.25rem;
}
.galerie.is-carousel::-webkit-scrollbar { display: none; }
.galerie.is-carousel .img-frame {
  flex: 0 0 90%; scroll-snap-align: center; aspect-ratio: 16 / 10;
  grid-row: auto !important; height: auto !important; cursor: grab;
}
.galerie.is-carousel.dragging { scroll-snap-type: none; }
.galerie.is-carousel.dragging .img-frame { cursor: grabbing; }
@media (min-width: 700px) {
  .galerie.is-carousel .img-frame { flex-basis: 62%; aspect-ratio: 16 / 9; }
  .galerie.is-carousel:has(.img-frame:nth-child(3)) .img-frame:first-child {
    grid-row: auto; aspect-ratio: 16 / 9; height: auto;
  }
}
@media (min-width: 980px) {
  .galerie.is-carousel .img-frame { flex-basis: 47%; }
}
.carousel-wrap { position: relative; }
.carousel-nav {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin-top: var(--space-3);
}
.carousel-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--accent);
  box-shadow: var(--shadow-sm); transition: background var(--transition), color var(--transition), transform var(--transition);
}
.carousel-btn:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.carousel-btn svg { width: 20px; height: 20px; }
.carousel-dots { display: flex; align-items: center; gap: 0.4rem; }
.carousel-dot {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--line); transition: background 0.3s ease, transform 0.3s ease;
}
.carousel-dot.active { background: var(--accent); transform: scale(1.35); }

/* --- 6. À propos : visuel plus grand, en plein côté ---------------------- */
/* L'image de présentation occupe davantage de hauteur et déborde vers le bord
   extérieur de la page (plein côté) sur grand écran, l'effet premium voulu.
   Reste contenue et arrondie sous 1080px. */
.apropos-photo { aspect-ratio: 4 / 4.4; min-height: 360px; }
@media (min-width: 1080px) {
  .apropos-grid { grid-template-columns: 1.02fr 1fr; gap: var(--space-5); }
  .apropos-grid .apropos-photo {
    aspect-ratio: auto; min-height: 540px; height: 100%;
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 70px -40px var(--shadow-tint);
  }
}

/* Thème archi-deco (A-31) : pierre, anthracite, laiton discret.
   Cormorant Garamond en grands corps fins (400/600), Inter en corps.
   Palette validée AA par scripts/check-contrasts.mjs :
     accent #6b5d4a : 5.86:1 sur paper  |  muted #5d574e : 6.56:1 sur paper
     muted #5d574e  : 5.85:1 sur accent-soft. */
:root {
  --paper:       #f7f5f1;
  --surface:     #fdfcfa;
  --ink:         #1f1d1a;
  --muted:       #5d574e;
  --accent:      #6b5d4a;
  --accent-dark: #4a4034;
  --accent-soft: #ece8e1;
  --shadow-tint: #4a4034;

  /* Filets hairline, signature minerale */
  --line: rgba(31, 29, 26, 0.10);

  /* Radius 0 : angles droits partout, interdit les arrondis */
  --radius:      0px;
  --radius-lg:   0px;
  --radius-bento: 0px;

  /* Cormorant Garamond se porte en tres grand corps */
  --text-h1: clamp(3rem, 1.8rem + 5.6vw, 5.2rem);
}

::selection { background: var(--accent-soft); color: var(--accent-dark); }

/* --- Typographie : Cormorant leger, grand corps, lettrage fin ------------ */
h1, h2 {
  font-weight: 400;
  letter-spacing: 0.015em;
}
h3 {
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

/* Kicker heros : metier en petites capitales espacees */
.hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
}

/* Accroche heros : Cormorant fin et grand */
.hero-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  line-height: 1.5;
}

/* Filet laiton avant le eyebrow (laiton = decotatif uniquement) */
.eyebrow {
  letter-spacing: 0.22em;
  font-size: 0.75rem;
  font-weight: 500;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 28px;
  height: 1px;
  margin-right: 0.75rem;
  /* laiton #b09a6c : decotatif, pas de texte dessus */
  background: #b09a6c;
}
.section-head h2 { max-width: 20ch; }

/* --- PIEGE : ne JAMAIS toucher .hero-full::after / ::before ici.
   (overlay de lisibilite + grain de base.css ; depuis le fix d'ordre
   du bundle, le theme ECRASE base.css : un background ici detruit
   l'overlay et rend le h1 blanc illisible.) */

/* --- Radius 0 partout : angles nets, signatures architecturales --------- */
.btn, .btn-primary, .btn-ghost,
.card, .img-frame, .monogramme,
.etape, .info, .faq-item, details {
  border-radius: 0;
}

/* --- Nav : filet tres fin, pas d'ombre coloree -------------------------- */
.nav { border-bottom: 1px solid var(--line); }
.nav.scrolled { box-shadow: 0 4px 16px rgba(31, 29, 26, 0.08); }

/* --- Boutons : encadre geometrique, pas de fonte ------------------------ */
.btn-primary {
  border: 1px solid transparent;
}
.btn-ghost {
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
}
.btn-ghost:hover {
  background: var(--accent-soft);
}

/* --- Prestations : bento -> filets fins horizontaux --------------------- */
.cards {
  gap: 0;
  border-top: 1px solid var(--line);
}
.card {
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}
.card:hover {
  border-bottom-color: var(--accent);
  background: transparent;
}
.cards > .card:first-child { border-top: none; }

/* Prix en Cormorant italique, laiton discret */
.card-prix {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--accent);
  background: transparent;
  padding: 0;
}

/* --- Galerie : cadres nets sans arrondi, filet fin ---------------------- */
.galerie { gap: 4px; }
.galerie .img-frame {
  border-radius: 0;
  border: 1px solid var(--line);
  box-shadow: none;
}
.galerie .img-frame:hover {
  border-color: var(--accent);
}

/* --- Sections teintees : fond pierre, tres discret ---------------------- */
.section-tinted {
  background:
    radial-gradient(1000px 300px at 90% -60px, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%),
    var(--accent-soft);
}

/* Filets et cartes : moins d'ombres, plus de geometrie */
.etape {
  border: 1px solid var(--line);
  box-shadow: none;
  border-radius: 0;
}
.faq-item { border-color: var(--line); }
.map-wrap iframe { filter: sepia(0.12) saturate(0.9) contrast(1.02); }

/* === PEPS (retour user 12/06) : au moins 3 elements graphiques signature === */

/* --- 1. Ornements CSS sur les sections teintees :
         croix de chantier et filet decoratif (laiton, pointer-events none) --- */
.section-tinted { position: relative; overflow: hidden; }
.section-tinted > .container { position: relative; }

/* Filet laiton diagonal en haut a droite */
.section-tinted::before {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 1px;
  height: 120px;
  background: linear-gradient(to bottom, #b09a6c, transparent);
  opacity: 0.5;
  pointer-events: none;
}
/* Filet laiton bas a gauche, leger */
.section-tinted::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 60px;
  height: 1px;
  background: linear-gradient(to right, #b09a6c, transparent);
  opacity: 0.45;
  pointer-events: none;
}

/* --- 2. Bloc couleur pleine : #a-propos sur fond anthracite (encre),
         texte pierre clair. Contraste #f7f5f1 sur #1f1d1a = 15.44:1 >= 7:1 --- */
#a-propos {
  background: var(--ink);
}
#a-propos h2 {
  color: var(--paper);
}
#a-propos .apropos-texte {
  color: #ccc6bc;    /* #ccc6bc sur #1f1d1a = 8.1:1, >= 7:1 */
}
#a-propos .eyebrow {
  color: #b09a6c;    /* laiton : decoratif, pas de texte de lecture dessus */
}
#a-propos .eyebrow::before {
  background: #b09a6c;
}
#a-propos .img-frame {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.5);
}
/* Les ornements ::before/::after restent sur fond sombre mais en ivoire */
#a-propos::before {
  background: linear-gradient(to bottom, rgba(176, 154, 108, 0.4), transparent);
}
#a-propos::after {
  background: linear-gradient(to right, rgba(176, 154, 108, 0.35), transparent);
}

/* --- 3. Numéros de prestations en tres grand corps display (typo signature) */
.card-num {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  opacity: 0.35;
  letter-spacing: -0.02em;
}

/* --- 4. Motif sur .cta-band : trame de points discrets sur le degrade ------- */
.cta-band {
  background:
    radial-gradient(rgba(247, 245, 241, 0.08) 1px, transparent 1.5px)
      0 0 / 28px 28px,
    linear-gradient(160deg, var(--accent-dark), var(--accent));
}

/* --- 5. Relief au survol des boutons pleins -------------------------------- */
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(74, 64, 52, 0.55);
}

/* --- Autres touches d'espace et de finesse --------------------------------- */
/* Etapes : numeros en grand Cormorant, laiton */
.etape-num {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 400;
  color: var(--accent);
  opacity: 0.5;
}

/* Footer : sombre comme base.css le prevoit via --footer-bg = var(--ink) */

/* ============================================================
   Animations agence : entrée du hero + révélation au scroll.
   Tout est sous prefers-reduced-motion: no-preference et scopé
   html.js (posé par un inline script) : sans JS ou avec motion
   réduit, le contenu reste pleinement visible.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* Révélation au scroll (site.js pose .in via IntersectionObserver) */
  html.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  html.js .reveal.in { opacity: 1; transform: none; }

  /* Stagger des cartes, blocs infos, étapes et galerie */
  html.js .cards > .reveal:nth-child(2), html.js .infos > .reveal:nth-child(2),
  html.js .etapes > .reveal:nth-child(2), html.js .galerie > .reveal:nth-child(2) { transition-delay: 0.1s; }
  html.js .cards > .reveal:nth-child(3), html.js .infos > .reveal:nth-child(3),
  html.js .etapes > .reveal:nth-child(3), html.js .galerie > .reveal:nth-child(3) { transition-delay: 0.2s; }
  html.js .cards > .reveal:nth-child(4) { transition-delay: 0.3s; }

  /* Galerie : zoom doux au survol. La propriété scale (et non transform)
     compose avec l'animation scroll-driven plus bas sans la casser. */
  .galerie .img-frame { transition: box-shadow var(--transition); }
  .galerie .img-frame img { transition: scale 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .galerie .img-frame:hover { box-shadow: var(--shadow); }
  .galerie .img-frame:hover img { scale: 1.035; }

  /* Étapes : pastille qui s'anime à la révélation */
  html.js .etape .etape-num { transform: scale(0.6); opacity: 0; transition: transform 0.5s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s 0.25s ease; }
  html.js .etape.in .etape-num { transform: scale(1); opacity: 1; }

  /* Entrée du hero au chargement */
  @keyframes rise {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
  }
  /* Dérive 3D continue du hero : zoom, balayage horizontal et très légère bascule
     en perspective, en boucle infinie. Le hero est donc TOUJOURS animé, même sans
     scroll et même sans vidéo. L'échelle reste >= 1.12 pour que la bascule ne
     révèle jamais les bords (aucune bande). Le balayage vertical de parallaxe au
     scroll est porté à part par la propriété translate (plus bas), qui compose. */
  @keyframes hero-derive {
    0%   { transform: perspective(1500px) scale(1.12) translateX(0) rotateY(0deg); }
    50%  { transform: perspective(1500px) scale(1.16) translateX(-1.4%) rotateY(1.2deg); }
    100% { transform: perspective(1500px) scale(1.13) translateX(1.3%) rotateY(-1deg); }
  }
  html.js .hero-content > * { animation: rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  html.js .hero-content > *:nth-child(2) { animation-delay: 0.1s; }
  html.js .hero-content > *:nth-child(3) { animation-delay: 0.2s; }
  html.js .hero-content > *:nth-child(4) { animation-delay: 0.3s; }
  html.js .hero-content > *:nth-child(5) { animation-delay: 0.4s; }
  html.js .hero-full .hero-bg { animation: hero-derive 30s ease-in-out infinite alternate; transform-origin: center; will-change: transform; }
  /* Quand un client a déposé une vidéo, elle anime déjà le hero et recouvre
     l'image : inutile de faire dériver l'image cachée dessous. */
  html.js .hero-media:has(.hero-video) .hero-bg { animation: none; }

  /* Hero en SPLIT (familles à héro encadré, ex. paramedical) : pas de fond plein
     écran à faire dériver, mais on garde le même esprit vivant avec un ken-burns
     lent sur la photo encadrée. L'image est clippée par le cadre (overflow caché),
     l'échelle reste >= 1.06 pour qu'aucun bord blanc n'apparaisse pendant la
     translation. C'est l'équivalent stylistique de la dérive 3D du héro plein. */
  @keyframes frame-kenburns {
    0%   { transform: scale(1.06) translate(0, 0); }
    50%  { transform: scale(1.1) translate(-1.4%, -1%); }
    100% { transform: scale(1.07) translate(1.2%, 0.8%); }
  }
  html.js .hero-frame img,
  html.js .hero--split .hero-media img {
    animation: frame-kenburns 28s ease-in-out infinite alternate;
    transform-origin: center; will-change: transform;
  }
  /* Vidéo déposée : elle anime déjà le cadre, on laisse l'image tranquille. */
  html.js .hero-frame:has(.hero-video) img,
  html.js .hero--split .hero-media:has(.hero-video) img { animation: none; }

  /* Micro-interactions */
  .card { transition: transform var(--transition), box-shadow var(--transition); }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .btn { transition: background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition); }
  .btn:hover { transform: translateY(-2px); }
  .nav { transition: box-shadow 0.3s ease; }

  /* Particules flottantes (hero + CTA) : montée lente et fondu. site.js pose
     left, taille, durée, délai et distance de montée par particule. */
  @keyframes particle-float {
    0%   { transform: translateY(0) scale(0.9); opacity: 0; }
    12%  { opacity: var(--p-opacity, 0.5); }
    88%  { opacity: var(--p-opacity, 0.5); }
    100% { transform: translateY(calc(-1 * var(--p-rise, 600px))) scale(0.5); opacity: 0; }
  }
  html.js .particle {
    animation: particle-float var(--p-dur, 16s) linear infinite;
    animation-delay: var(--p-delay, 0s);
  }

  /* Bandeau CTA : le voile de filets clairs balaye lentement la largeur. */
  @keyframes cta-sweep { from { background-position: 0 0; } to { background-position: 520px 0; } }
  html.js .cta-band::before { animation: cta-sweep 20s linear infinite; }
}

/* ============================================================
   Animations scroll-driven natives (Chrome, Edge). Le fallback
   IntersectionObserver (.reveal/.in via site.js) reste intact
   pour Firefox et Safari : ici on neutralise la transition et
   on pilote la révélation directement par le scroll. Le bloc
   prefers-reduced-motion: reduce de base.css coupe le tout.
   ============================================================ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Révélation progressive des sections liée au scroll */
    @keyframes sd-reveal {
      from { opacity: 0; transform: translateY(34px); }
      to { opacity: 1; transform: none; }
    }
    html.js .reveal {
      opacity: 1; transform: none; transition: none;
      animation: sd-reveal both;
      animation-timeline: view();
      animation-range: entry 5% entry 45%;
    }

    /* Parallax léger du hero sur la première hauteur d'écran. Porté par la
       propriété translate (et non transform) pour COMPOSER avec la dérive 3D
       continue ci-dessus au lieu de l'écraser : on garde les deux mouvements,
       la dérive continue (transform, temps) et la parallaxe (translate, scroll). */
    @keyframes sd-parallax {
      from { translate: 0 0; }
      to { translate: 0 4%; }
    }
    html.js .hero-full .hero-bg {
      animation: hero-derive 30s ease-in-out infinite alternate, sd-parallax linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100vh;
    }
    html.js .hero-media:has(.hero-video) .hero-bg { animation: none; }

    /* Galerie : zoom doux à l'entrée du viewport */
    @keyframes sd-galerie {
      from { opacity: 0.45; transform: scale(1.08); }
      to { opacity: 1; transform: scale(1); }
    }
    html.js .galerie .img-frame img {
      animation: sd-galerie both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}