@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/libre-caslon-text-400.woff2') format('woff2');}
@font-face{font-family:'Libre Caslon Text';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/libre-caslon-text-700.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:'Libre Caslon Text', 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);
  }
}

/* Theme conseil (A-31) : editorial d'autorite, marine profonde, Libre Caslon Text.
   Palette validee AA par scripts/check-contrasts.mjs :
   accent #1f3a5f : 11.6:1 sur paper | muted #55606f : 5.4:1 sur accent-soft.
   Or decotatif uniquement (filets, puces) : jamais en couleur de texte. */
:root {
  --paper: #f9f7f3;
  --surface: #ffffff;
  --ink: #1c2433;
  --muted: #55606f;
  --accent: #1f3a5f;
  --accent-dark: #16293f;
  --accent-soft: #e8ecf2;
  --shadow-tint: #16293f;

  /* Filets fins : la ponctuation de l'editorial */
  --line: rgba(28, 36, 51, 0.11);

  /* Radius sobres, presque editorial */
  --radius: 10px;
  --radius-lg: 14px;
  --radius-bento: 18px;

  /* Libre Caslon Text se lit bien a graisse normale */
  --text-h1: clamp(2.6rem, 1.5rem + 5.2vw, 4.6rem);
}

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

/* Logo monogramme conseil : marine profonde cerclée d'un filet or, la signature
   editoriale de la famille (or decoratif, jamais en couleur de texte). */
.monogramme {
  border-radius: 11px;
  background: linear-gradient(160deg, var(--accent), var(--accent-dark));
  box-shadow: inset 0 0 0 1.5px #b89b5e, 0 8px 22px -12px var(--shadow-tint);
}

/* --- Menu editorial : onglets en capitales, filet or au survol ---------- */
.nav-links { gap: var(--space-2); }
.nav-links a {
  position: relative;
  text-transform: uppercase; letter-spacing: 0.13em;
  font-size: 0.76rem; font-weight: 600; color: var(--muted);
}
.nav-links a:hover { color: var(--accent-dark); }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0.05rem;
  height: 1px; background: #b89b5e; transition: right var(--transition);
}
.nav-links a:hover::after { right: 0; }
/* Plage tablette : on resserre encore pour loger toutes les rubriques */
@media (min-width: 820px) and (max-width: 1020px) {
  .nav-links { gap: 0.8rem; }
  .nav-links a { letter-spacing: 0.07em; }
}

/* --- Typographie editoriale : Libre Caslon en 700, pas de 600 ---------- */
h1, h2 { font-weight: 700; letter-spacing: -0.01em; }
h3 { font-weight: 700; letter-spacing: 0.01em; }

/* Eyebrow : petites capitales Inter, filet or decoratif avant le texte */
.eyebrow {
  letter-spacing: 0.20em;
  font-weight: 500;
}
.eyebrow::before {
  content: '';
  display: inline-block; vertical-align: middle;
  width: 22px; height: 1px; margin-right: 0.65rem;
  background: #b89b5e; /* or decoratif, jamais en texte */
}

/* Sous-titre eyebrow des sections apres un h2 : couleur accent */
.section-head .eyebrow { color: var(--accent); }
.section-head .eyebrow::before { background: var(--accent); }

/* Trait fin sous les h2 de section (signature d'autorite) */
.section-head h2::after {
  content: '';
  display: block;
  width: 42px; height: 1px; margin-top: 0.7rem;
  background: #b89b5e; /* or decoratif */
}

/* Corps de texte d'accroche */
.hero-lead {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.55;
  color: var(--muted);
}

/* --- Hero plein cinematographique (passe feder) ------------------------ */
/* Etalonnage leger : l'image est juste desaturee et a peine assombrie pour
   garder une lumiere homogene bord a bord (pas de vignettage qui creuse les
   cotes en noir). L'image fixe mene le hero ; la video reste possible si le
   client en depose une via le formulaire de depot. */
.hero-conseil .hero-bg,
.hero-conseil .hero-video {
  filter: grayscale(0.3) contrast(1.03) brightness(0.94);
}
/* Voile marine uniquement vertical, dense en bas pour la lisibilite du texte,
   transparent en haut : aucune bande laterale, l'image reste pleine largeur. */
.hero-conseil.hero-full::after {
  background:
    linear-gradient(to top, rgba(11, 21, 35, 0.9) 0%, rgba(13, 25, 41, 0.58) 38%, rgba(16, 29, 47, 0.2) 70%, rgba(16, 29, 47, 0.08) 100%);
}
.hero-conseil .hero-content { max-width: 880px; }

/* Overline : petites capitales Inter, filet or court devant le texte */
.hero-conseil .hero-overline {
  display: inline-flex; align-items: center; gap: 0.7rem;
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  text-transform: uppercase; letter-spacing: 0.26em;
  font-size: var(--text-sm); font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
}
.hero-conseil .hero-overline::before {
  content: ''; width: 34px; height: 1px; background: #cdae6e;
}
/* Nom surdimensionne, Libre Caslon : la signature feder */
.hero-conseil h1 {
  font-size: clamp(3rem, 1.6rem + 7vw, 6rem);
  line-height: 1.02; letter-spacing: -0.015em;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
}
/* Filet or sous le nom, comme un trait de plume */
.hero-conseil .hero-rule {
  display: block; width: 64px; height: 2px; margin-top: var(--space-3);
  background: #cdae6e;
}
.hero-conseil .hero-lead {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.5; max-width: 50ch;
  color: rgba(255, 255, 255, 0.92);
}

/* --- Prestations en liste : rangees editoriales a filets -------------- */
.prestations--liste .card h3,
.prestations--liste > .card:first-child h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
}
.prestations--liste .card-prix {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--accent-dark);
  background: transparent; padding: 0;
}
/* Numeros de prestations en grand corps Libre Caslon : signature typographique */
.prestations--liste .card-num {
  font-family: var(--font-display);
  font-size: 2.4rem; line-height: 1;
  color: var(--accent); opacity: 0.22;
  letter-spacing: -0.02em;
}

/* --- Galerie : cadres fins, sans ombre marquee ----------------------- */
.galerie .img-frame {
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px -20px rgba(22, 41, 63, 0.4);
}

/* --- Sections teintees : voile blue froid ---------------------------- */
.section-tinted {
  background:
    radial-gradient(1100px 380px at 14% -80px, color-mix(in srgb, var(--accent) 7%, transparent), transparent 68%),
    var(--accent-soft);
}

/* --- Cartes : filet discret, pas de bordure top coloree -------------- */
.card {
  border: 1px solid var(--line);
  box-shadow: none;
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.faq-item { border-color: var(--line); }

/* Carte info : fond subtil */
.info {
  background: var(--surface);
  border: 1px solid var(--line);
}

/* === PEPS (retour user 12/06) ========================================= */

/* 1. Etalonnage des photos editoriales : leger voile marine + desaturation
   pour une serie d'images coherente (galerie, a-propos), signature feder. */
.galerie .img-frame img,
.apropos-photo img {
  filter: grayscale(0.22) contrast(1.02) saturate(0.92);
  transition: filter var(--transition), transform 600ms ease;
}
.galerie .img-frame:hover img,
.apropos-photo:hover img {
  filter: grayscale(0) contrast(1.02) saturate(1);
  transform: scale(1.03);
}

/* 2. Section a-propos en bloc couleur pleine : marine profonde, texte clair.
   Contraste verifie manuellement : #edf1f8 sur #16293f = 15.6:1 (> 7:1). */
#a-propos { background: var(--accent-dark); }
#a-propos h2 { color: #edf1f8; }
#a-propos .apropos-texte { color: #c8d3e2; }
#a-propos .eyebrow { color: #9fb3cc; }
#a-propos .eyebrow::before { background: #b89b5e; }
#a-propos h2::after { background: #b89b5e; }
#a-propos .img-frame { box-shadow: 0 28px 64px -28px rgba(0, 0, 0, 0.6); }
/* Les ornements d'arc se refletent en clair sur le fond marine */
#a-propos::before, #a-propos::after { border-color: rgba(232, 236, 242, 0.18); }

/* 3. Ornement CSS : arcs concentriques sur les sections teintees */
.section-tinted { position: relative; overflow: hidden; }
.section-tinted > .container { position: relative; }
.section-tinted::before {
  content: ''; position: absolute; right: -160px; top: -160px;
  width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid var(--accent); opacity: 0.14; pointer-events: none;
}
.section-tinted::after {
  content: ''; position: absolute; right: -100px; top: -210px;
  width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid var(--accent); opacity: 0.08; pointer-events: none;
}
/* Pas d'arcs sur a-propos (fond plein marine, reset des ornements) */
#a-propos { position: relative; overflow: hidden; }
#a-propos > .container { position: relative; }
#a-propos::before {
  content: ''; position: absolute; left: -180px; bottom: -180px;
  width: 460px; height: 460px; border-radius: 50%;
  border: 1px solid rgba(232, 236, 242, 0.18); pointer-events: none;
  /* reset l'arc tinted */
  top: auto; right: auto; opacity: 1;
}
#a-propos::after {
  content: ''; position: absolute; left: -120px; bottom: -230px;
  width: 460px; height: 460px; border-radius: 50%;
  border: 1px solid rgba(232, 236, 242, 0.10); pointer-events: none;
  top: auto; right: auto; opacity: 1;
}

/* 4. Motif pointille sur .cta-band par-dessus le degrade marine */
.cta-band {
  background:
    radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(135deg, var(--accent-dark), var(--accent));
}

/* 5. Relief au survol des boutons pleins */
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -14px rgba(22, 41, 63, 0.65);
}

/* 6. Etapes : accent sur les numeros, fond tinte sobre */
.etape { border-color: var(--line); }
.etape-num { background: var(--accent); }

/* --- Carte map : filtre sobre ------------------------------------- */
.map-wrap iframe { filter: sepia(0.12) saturate(0.88); }

/* === Espace portrait (a-propos) : le client met sa propre photo ======== */
/* Cadre portrait 4/5, etalonnage feder. Par defaut une image d'ambiance
   sans visage ; le client la remplace par sa photo via le formulaire de depot. */
.apropos-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  align-self: start;
}
.apropos-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1.3rem 1.1rem;
  background: linear-gradient(to top, rgba(11, 21, 35, 0.82), transparent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.15rem; line-height: 1.2;
}
.apropos-cap span {
  display: block; margin-top: 0.2rem;
  font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.82);
}

/* === Formulaire de contact (les clients du client le joignent) ========= */
/* Section claire, deux colonnes : pitch + coordonnees a gauche, champs a
   droite. Zero dependance : a l'envoi, site.js compose un email pre-rempli
   vers l'adresse du professionnel (aucune donnee stockee sur le site). */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-pitch {
  margin-top: var(--space-3);
  color: var(--muted); max-width: 42ch; line-height: 1.6;
}
.contact-direct {
  margin-top: var(--space-3);
  display: flex; flex-direction: column; gap: 0.35rem;
  font-family: var(--font-display); font-size: 1.15rem;
}
.contact-direct a { color: var(--accent-dark); }
.contact-direct a:hover { color: var(--accent); }
.contact-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
  box-shadow: 0 24px 60px -40px rgba(22, 41, 63, 0.5);
}
.contact-form .field { margin-bottom: 1.1rem; }
.contact-form label {
  display: block; margin-bottom: 0.4rem;
  font-size: 0.8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  font: inherit; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.contact-form textarea { resize: vertical; min-height: 7rem; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.contact-form button { width: 100%; justify-content: center; margin-top: 0.3rem; }
.contact-note {
  margin-top: 0.9rem;
  font-size: 0.78rem; line-height: 1.45; color: var(--muted);
}

/* ============================================================
   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%;
    }
  }
}