/* ==========================================================================
   Panorama Canin — feuille de style du site public
   Polices auto-hébergées, aucune dépendance externe.
   ========================================================================== */

/* --- Polices --------------------------------------------------------------
   Titres : Bricolage Grotesque (SIL Open Font License).
   Textes : Montserrat (SIL Open Font License).

   Les deux sont des polices variables au format woff2, et couvrent la plage
   latin étendue : les caractères accentués sont dessinés dans la police de
   titrage elle-même, sans emprunt à une seconde fonte.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/montserrat-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/montserrat-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Jetons de design ----------------------------------------------------- */
:root {
  /* Palette de marque */
  --sand:        #DCBF9E;
  --amber:       #E3A549;
  --terracotta:  #BD6826;
  --teal:        #218B9E;
  --deep:        #1B576B;
  --cocoa:       #4F341F;

  /* Déclinaisons */
  --sand-50:     #FAF4EC;
  --sand-100:    #F3E8D9;
  --sand-200:    #E9D8C2;
  --amber-600:   #C98A2E;
  --terra-700:   #9C5320;
  --deep-900:    #123C4A;
  --teal-50:     #EAF5F7;

  /* Neutres */
  --cream:       #FDF9F3;
  --paper:       #FFFFFF;
  --ink:         #241A13;
  --ink-2:       #4E3E33;
  --ink-3:       #7C6B5E;
  --line:        rgba(36, 26, 19, .12);
  --line-soft:   rgba(36, 26, 19, .07);

  /* Rayons */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    20px;
  --r-lg: 32px;
  --r-xl: 48px;
  --r-pill: 999px;

  /* Ombres */
  --sh-sm: 0 2px 8px rgba(36, 26, 19, .05);
  --sh:    0 12px 32px -12px rgba(36, 26, 19, .16);
  --sh-lg: 0 32px 70px -28px rgba(36, 26, 19, .3);

  /* Rythme */
  --shell: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);

  /* Typographie */
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Transitions */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* --- Réinitialisation ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  font-family: var(--body);
  font-size: clamp(1rem, .97rem + .18vw, 1.075rem);
  line-height: 1.68;
  color: var(--ink-2);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* `clip` empêche le débordement horizontal SANS créer de conteneur de
   défilement — contrairement à `hidden`, qui désactiverait position:sticky
   sur les étapes empilées de la page d'accueil. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--amber); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; background: var(--deep); color: #fff;
  padding: .75rem 1.5rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: transform .25s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --- Typographie ---------------------------------------------------------- */
h1, h2, h3, h4, .h1, .h2, .h3 {
  font-family: var(--display);
  color: var(--cocoa);
  line-height: 1.06;
  letter-spacing: -.025em;
  font-weight: 600;
  text-wrap: balance;
}

.h1, h1 { font-size: clamp(2.4rem, 1.6rem + 3.7vw, 4.6rem); }
.h2      { font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3.2rem); }
.h3      { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); line-height: 1.2; }

.eyebrow {
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before {
  content: '';
  width: 28px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  flex: none;
}

.lead {
  font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-2);
}

/* Un titre suivi d'un bloc de texte : aucune marge ne les separait, la remise
   a zero du site s'appliquant partout. */
h1 + .prose, h2 + .prose, h3 + .prose,
.h1 + .prose, .h2 + .prose, .h3 + .prose { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

/* Un chapô suit un titre d’aussi près qu’un bloc de texte : même respiration. */
h1 + .lead, h2 + .lead, h3 + .lead,
.h1 + .lead, .h2 + .lead, .h3 + .lead { margin-top: clamp(1.25rem, 2.5vw, 2rem); }

/* Bouton seul dans son paragraphe, à la suite d’un chapô : il lui collait.
   `:where()` annule la spécificité du sélecteur, si bien qu’un paragraphe
   déjà classé — `.error-actions` par exemple — garde son propre retrait. */
:where(.lead) + p { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }

.prose > * + * { margin-top: 1.15em; }
.prose p { max-width: 62ch; }
.prose strong { color: var(--ink); font-weight: 650; }
.prose a { color: var(--terracotta); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose a:hover { color: var(--terra-700); }
.prose--lg { font-size: clamp(1.02rem, .98rem + .3vw, 1.14rem); }
.prose--legal p { max-width: 74ch; }

.rich-list { display: grid; gap: .6rem; }
.rich-list li {
  position: relative;
  padding-left: 1.75rem;
  max-width: 62ch;
}
.rich-list li::before {
  content: '';
  position: absolute; left: .35rem; top: .72em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber);
}

.signature {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--ink);
  font-style: italic;
  margin-top: 1.5rem;
}

/* --- Structure ------------------------------------------------------------ */
.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}
.narrow { max-width: 820px; margin-inline: auto; }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--muted { background: var(--sand-50); }
.section--center { min-height: 70vh; display: grid; place-items: center; }

/* Suit le bloc « Mes services », dont le grand cercle déborde vers le bas :
   un fond opaque, et non transparent, pour le recouvrir proprement. */
/* Fond transparent : le grand disque de la section « Mes services » déborde
   vers le bas et doit rester visible derrière le texte et la photo. */
/* Resserré sous « Mes services » : le retrait par défaut creusait un vide
   d'environ 144 px entre les deux sections. */
.section--method { position: relative; padding-top: clamp(1.5rem, 3vw, 3.5rem); padding-bottom: clamp(1.5rem, 3vw, 3rem); }
/* Le haut de cette section est recouvert par l'ellipse ambre : le sur-titre,
   qui s'y trouve, garde une teinte lisible sur les deux fonds. Le lien, lui,
   se situe sous la portée de l'ellipse, donc sur le crème : il peut rester
   en terracotta. */
.section--method .eyebrow { color: var(--cocoa); }
.section--method .link-arrow { color: var(--terracotta); }
.section--method .pillar__text { color: var(--ink-2); }

/* Présentation : première section sous la bannière, sur fond brun foncé.
   Les couleurs de texte sont inversées, faute de quoi l'encre sombre du
   reste du site deviendrait illisible. */
.section--intro {
  color: rgba(255, 255, 255, .85);
  /* Le brun vire au jaune sur les 500 derniers pixels, au-dessus de l'ellipse
     et donc visible. Le jaune est posé à 70 % d'opacité : il reste plus sourd
     que l'ambre plein de l'ellipse, dont le bord se distingue ainsi encore
     (2,1:1), et le texte blanc conserve 5,4:1 là où il finit. */
  background:
    linear-gradient(to top, rgba(227, 165, 73, .7) 100px, var(--cocoa) 500px),
    var(--cocoa);
  padding-top: clamp(2.25rem, 4.5vw, 4rem);
}
.section--intro .h2,
.section--intro .prose strong { color: #fff; }
.section--intro .eyebrow,
.section--intro .signature { color: var(--sand); }
.section--intro .prose a,
.section--intro .link-arrow { color: var(--amber); }
.section--intro .prose a:hover { color: var(--sand); }
.section--intro .rich-list li::before { background: var(--sand); }
/* L'ellipse de la section suivante remonte sur cette section : le texte et
   la photo passent tous deux devant elle — le texte parce qu'il est blanc et
   deviendrait illisible sur l'ambre, la photo pour rester entière. */
.section--intro .split__body,
.section--intro .split__media { position: relative; z-index: 2; }
/* Le texte est centré sur la hauteur de la photo, bien plus haute : il
   descendait trop bas. Il remonte, la photo reste en place. */
.section--intro .split__body { margin-top: clamp(-4rem, -3.5vw, -1.5rem); }

.section-head { max-width: 720px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.section-head .eyebrow { justify-content: center; }
.section-head--left { margin-inline: 0; text-align: left; }
.section-head--left .eyebrow { justify-content: flex-start; }
.section-head__text { margin-top: 1.1rem; color: var(--ink-3); font-size: 1.06rem; }

.icon { width: 1.5rem; height: 1.5rem; flex: none; }
.icon--sm { width: 1.05rem; height: 1.05rem; }

/* --- Boutons -------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--body);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  letter-spacing: -.005em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease), color .3s var(--ease);
  will-change: transform;
}
.btn::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform .45s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(0); }
.btn .icon { transition: transform .35s var(--ease-out); }
.btn:hover .icon { transform: translateX(4px); }

.btn--primary { --btn-bg: var(--terracotta); }
.btn--primary::before { background: var(--ink); }

.btn--outline {
  --btn-bg: transparent; --btn-fg: var(--ink);
  border-color: var(--line);
}
.btn--outline:hover { color: #fff; }
.btn--outline::before { background: var(--ink); }

.btn--light { --btn-bg: var(--cream); --btn-fg: var(--ink); }
.btn--light::before { background: var(--amber); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: #fff;
  border-color: rgba(255,255,255,.35);
}
.btn--ghost::before { background: rgba(255,255,255,.14); }

.btn--glass {
  --btn-bg: rgba(255,255,255,.12); --btn-fg: #fff;
  border-color: rgba(255,255,255,.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn--glass::before { background: rgba(255,255,255,.9); }
.btn--glass:hover { color: var(--ink); }

.btn--lg { padding: 1.1rem 2rem; font-size: 1rem; }
.btn--sm { padding: .72rem 1.2rem; font-size: .88rem; }
.btn--block { display: flex; width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.75rem;
  font-weight: 600;
  color: var(--terracotta);
  position: relative;
  padding-bottom: 3px;
}
.link-arrow::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .4s var(--ease-out);
}
.link-arrow:hover::after { transform-origin: left; transform: scaleX(1); }
.link-arrow .icon { transition: transform .35s var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(5px); }

/* --- En-tête -------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-block: clamp(.9rem, 1.6vw, 1.4rem);
  transition: padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(253, 249, 243, .88);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.site-header.is-stuck { padding-block: .7rem; }
.site-header.is-stuck::before { opacity: 1; }
.site-header.is-hidden { transform: translateY(-105%); }
.site-header { transition: transform .45s var(--ease), padding .4s var(--ease); }

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.brand { display: flex; align-items: center; gap: .75rem; flex: none; }
.brand__mark {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--amber), var(--terracotta));
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(189, 104, 38, .8);
  transition: transform .5s var(--ease-out);
}
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }
.brand__paw { width: 1.6rem; height: 1.6rem; }
.brand__text { display: grid; }
.brand__name {
  font-family: var(--display);
  font-weight: 650;
  font-size: 1.12rem;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.1;
}
.brand__baseline {
  font-size: .68rem;
  letter-spacing: .05em;
  color: var(--ink-3);
  line-height: 1.3;
}
/* Les deux logos sont superposés et se relaient en fondu. Le conteneur prend
   les dimensions du logo couleur, resté dans le flux. */
.brand__logos { position: relative; display: block; line-height: 0; }
.brand__logo {
  width: auto; max-height: 48px; object-fit: contain;
  display: block;
  transition: opacity .4s var(--ease);
}
.brand__logos--pair .brand__logo--light {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* Sur une bannière sombre et tant que l'en-tête n'est pas figé, c'est la
   version blanche qui s'affiche. Elle s'efface au profit de la version
   couleur exactement quand le bandeau clair apparaît. */
.has-dark-hero .site-header:not(.is-stuck) .brand__logos--pair .brand__logo--color { opacity: 0; }
.has-dark-hero .site-header:not(.is-stuck) .brand__logos--pair .brand__logo--light { opacity: 1; }

/* Navigation */
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(.2rem, 1vw, .7rem); }
.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .6rem .8rem;
  border-radius: var(--r-pill);
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color .3s var(--ease), background .3s var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--ink); background: var(--sand-100); }
.nav__chevron { width: 12px; height: 12px; opacity: .55; transition: transform .35s var(--ease); }
.nav__item.has-sub:hover .nav__chevron { transform: rotate(180deg); }

.subnav {
  position: absolute;
  top: calc(100% + .55rem);
  left: 50%;
  /* Resserré depuis que le menu ne porte plus que les titres. */
  min-width: 232px;
  padding: .45rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px);
  transition: opacity .3s var(--ease), transform .35s var(--ease-out), visibility .3s;
}
.nav__item.has-sub:hover .subnav,
.nav__item.has-sub:focus-within .subnav {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.subnav::before {
  content: ''; position: absolute; left: 0; right: 0; top: -.6rem; height: .6rem;
}
.subnav__link {
  display: grid;
  gap: .15rem;
  padding: .7rem .85rem;
  border-radius: var(--r-sm);
  transition: background .25s var(--ease);
}
.subnav__link:hover, .subnav__link.is-active { background: var(--sand-50); }
.subnav__label { font-weight: 600; color: var(--ink); font-size: .95rem; }

.site-header__actions { display: flex; align-items: center; gap: .75rem; flex: none; }
.header-phone {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .9rem; font-weight: 600; color: var(--deep);
  padding: .5rem .7rem; border-radius: var(--r-pill);
  transition: background .3s var(--ease);
}
.header-phone:hover { background: var(--teal-50); }

/* En-tête posé sur une photo sombre : passage en blanc tant qu'il n'est pas figé */
.has-dark-hero .site-header:not(.is-stuck) .brand__name,
.has-dark-hero .site-header:not(.is-stuck) .nav__link,
.has-dark-hero .site-header:not(.is-stuck) .header-phone { color: #fff; }
.has-dark-hero .site-header:not(.is-stuck) .brand__baseline { color: rgba(255,255,255,.72); }
.has-dark-hero .site-header:not(.is-stuck) .nav__link:hover,
.has-dark-hero .site-header:not(.is-stuck) .nav__link.is-active { background: rgba(255,255,255,.16); }
.has-dark-hero .site-header:not(.is-stuck) .header-phone:hover { background: rgba(255,255,255,.16); }
.has-dark-hero .site-header:not(.is-stuck) .burger { border-color: rgba(255,255,255,.45); }
.has-dark-hero .site-header:not(.is-stuck) .burger__bar { background: #fff; }
.has-dark-hero .site-header:not(.is-stuck) .brand__mark { box-shadow: 0 6px 24px -6px rgba(0,0,0,.5); }
/* La bannière d'accueil ne porte plus de voile : le haut de la photo peut être
   clair et faire disparaître ce texte blanc. L'ombre le détache du fond sans
   rien poser sur l'image elle-même. */
.has-dark-hero .site-header:not(.is-stuck) .brand__name,
.has-dark-hero .site-header:not(.is-stuck) .brand__baseline,
.has-dark-hero .site-header:not(.is-stuck) .nav__link,
.has-dark-hero .site-header:not(.is-stuck) .header-phone {
  text-shadow: 0 1px 3px rgba(18, 12, 8, .55), 0 0 14px rgba(18, 12, 8, .35);
}
.has-dark-hero .site-header:not(.is-stuck) .burger__bar { box-shadow: 0 1px 3px rgba(18, 12, 8, .5); }

/* Menu mobile */
.burger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  position: relative;
  cursor: pointer;
}
.burger__bar {
  position: absolute; left: 50%; width: 18px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transform: translateX(-50%);
  transition: transform .4s var(--ease-out), opacity .3s;
}
.burger__bar:nth-child(1) { top: 19px; }
.burger__bar:nth-child(2) { top: 26px; }
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateX(-50%) translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { transform: translateX(-50%) translateY(-3.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--cream);
  padding: 6.5rem var(--gutter) 2rem;
  overflow-y: auto;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; }
.mobile-menu__inner { display: flex; flex-direction: column; min-height: 100%; gap: 2rem; }
.mobile-menu__list { display: grid; gap: .35rem; }
.mobile-menu__item {
  border-bottom: 1px solid var(--line-soft);
  padding-block: .85rem;
  opacity: 0;
  transform: translateY(18px);
}
.mobile-menu.is-open .mobile-menu__item {
  animation: menuIn .5s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 55ms + 80ms);
}
@keyframes menuIn { to { opacity: 1; transform: none; } }

.mobile-menu__link, .mobile-menu__label {
  display: block;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
.mobile-menu__label { color: var(--ink-3); font-size: 1.15rem; }
.mobile-menu__sub { display: grid; gap: .1rem; margin-top: .6rem; padding-left: .2rem; }
.mobile-menu__sub a { display: block; padding: .4rem 0; color: var(--ink-2); font-size: 1rem; }
.mobile-menu__footer { margin-top: auto; display: grid; gap: 1rem; padding-top: 1.5rem; }
.mobile-menu__phone {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; color: var(--deep);
}
body.menu-open { overflow: hidden; }

/* --- Bannière d'accueil --------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex;
  align-items: flex-end;
  padding-block: 9rem clamp(4.5rem, 8vw, 7rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--deep-900);
}
/* Le débordement du haut laisse au parallaxe de quoi glisser ; celui du bas
   est réduit au strict nécessaire (le média remonte d'une vingtaine de pixels
   au défilement), afin que le bas de la photo reste visible dans le cadre. */
.hero__media { position: absolute; inset: -8% 0 -3%; z-index: -2; }
.hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Ancrage sur le bas de la photo : c'est le haut qui est rogné. */
  object-position: center bottom;
  animation: kenburns 26s var(--ease) infinite alternate;
  /* La photo fait 8192 × 5464 px et son zoom tourne en boucle : sans cette
     promotion en calque, le navigateur la redessine à chaque image, ce qui
     ponctionne des ressources sur toutes les autres animations de la page. */
  will-change: transform;
}
@keyframes kenburns {
  /* Le zoom part lui aussi du bas, sinon il décollerait le bord inférieur
     que l'on vient d'ancrer. */
  from { transform: scale(1.02); transform-origin: center bottom; }
  to   { transform: scale(1.11); transform-origin: center bottom; }
}

.hero__inner { position: relative; color: #fff; max-width: 940px; }

.hero__eyebrow {
  display: inline-flex; align-items: center;
  font-size: .8rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  /* Encre blanche plutôt que sable : sur le voile clair posé sur la photo,
     le sable se noyait. Le voile, lui, reste volontairement léger — c'est un
     choix d'aspect, au prix d'un contraste qui dépend de la zone de photo
     située derrière. */
  color: #fff;
  /* Rembourrage symétrique depuis que le point pulsant a été retiré : il était
     resserré à gauche pour le loger. */
  padding: .5rem 1rem;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 1.6rem;
  animation: fadeUp .8s var(--ease-out) .1s both;
}
.hero__dot {
  /* `flex: none` : sans cela le point s'écraserait dans la mention de bas de
     bannière, dont la ligne de texte est plus longue que le sur-titre. */
  flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(227, 165, 73, .7);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 10px rgba(227, 165, 73, 0); }
  100% { box-shadow: 0 0 0 0 rgba(227, 165, 73, 0); }
}

.hero__title {
  color: #fff;
  font-size: clamp(2.7rem, 1.4rem + 5.6vw, 6.2rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: .98;
  max-width: 15ch;
}
.hero__text {
  margin-top: 1.6rem;
  max-width: 54ch;
  font-size: clamp(1.05rem, 1rem + .5vw, 1.28rem);
  color: rgba(255,255,255,.9);
  animation: fadeUp .9s var(--ease-out) .5s both;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: .85rem;
  margin-top: 2.4rem;
  animation: fadeUp .9s var(--ease-out) .65s both;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: 2.2rem;
  font-size: .85rem;
  color: rgba(255,255,255,.72);
  animation: fadeUp .9s var(--ease-out) .8s both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.hero__scroll {
  position: absolute;
  right: var(--gutter); bottom: clamp(2rem, 5vw, 3.5rem);
  display: grid; justify-items: center; gap: .8rem;
  color: rgba(255,255,255,.7);
  animation: fadeUp 1s var(--ease-out) 1s both;
}
.hero__scroll-line {
  width: 1px; height: 54px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.6));
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: ''; position: absolute; inset: 0;
  background: var(--amber);
  animation: scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine {
  0%   { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}
.hero__scroll:hover { color: #fff; }

/* --- Blocs deux colonnes -------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
/* Pages prestation : la colonne de droite (photo au format portrait, puis
   infos pratiques) est bien plus haute que le texte. Centré, celui-ci
   décrochait vers le bas ; il se cale donc en haut, au niveau de la photo. */
.split--wide-text { grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr); align-items: start; }
/* La photo remonte légèrement au-dessus du texte, dans le retrait de la
   section : la colonne de droite est haute, ce décalage relève son
   équilibre sans mordre sur la bannière. */
.split--wide-text .split__media { margin-top: clamp(-3.5rem, -4vw, -1.5rem); }
.split__media { position: relative; }

.frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  background: var(--sand-100);
}
.frame::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  border-radius: inherit;
  pointer-events: none;
}
.frame--portrait { aspect-ratio: 4 / 5; }
.frame--tall { aspect-ratio: 3 / 4; }
.frame__img { width: 100%; height: 100%; object-fit: cover; }

.frame__blob {
  position: absolute;
  width: 58%; aspect-ratio: 1;
  right: -12%; bottom: -12%;
  z-index: -1;
  background: radial-gradient(circle at 30% 30%, var(--amber), var(--terracotta));
  opacity: .18;
  filter: blur(28px);
  border-radius: 50%;
}

/* --- Cartes prestations --------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.9rem);
}
.card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .4s;
}
.card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); border-color: transparent; }
.card__link { display: flex; flex-direction: column; height: 100%; }
.card__media { aspect-ratio: 16 / 11; overflow: hidden; background: var(--sand-100); }
.card__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.card:hover .card__img { transform: scale(1.07); }
.card__body { padding: clamp(1.4rem, 2.5vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }
.card__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--sand-50);
  color: var(--terracotta);
  margin-bottom: 1.1rem;
  transition: background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease-out);
}
.card:hover .card__icon { background: var(--terracotta); color: #fff; transform: rotate(-6deg); }
.card__title { font-size: 1.3rem; margin-bottom: .6rem; }
.card__text { color: var(--ink-3); font-size: .96rem; flex: 1; }
.card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.5rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
}
.card__meta { font-size: .8rem; color: var(--ink-3); letter-spacing: .01em; }
.card__cta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .88rem; font-weight: 600; color: var(--terracotta);
  white-space: nowrap;
}
.card__cta .icon { transition: transform .4s var(--ease-out); }
.card:hover .card__cta .icon { transform: translateX(5px); }

/* --- Piliers -------------------------------------------------------------- */
.pillars { display: grid; gap: 1.6rem; margin-top: 2rem; }
.pillar { display: flex; gap: 1.1rem; align-items: flex-start; }
.pillar__icon {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--teal-50);
  color: var(--deep);
}
.pillar__title { font-size: 1.15rem; margin-bottom: .35rem; }
.pillar__text { color: var(--ink-3); font-size: .96rem; }

/* ==========================================================================
   Cadran des prestations (accueil)

   Les prestations sont superposées dans une même cellule de grille et se
   relaient en fondu. À droite, une roue de pastilles pivote pour amener la
   prestation affichée à la position active (à gauche du cercle, face au
   texte) ; l'anneau qui l'entoure se remplit et sert de minuteur.
   ========================================================================== */
.svcdial {
  position: relative;
  /* Reprend exactement la couleur qui termine la section précédente, puis
     rejoint l'ambre plein. Sans ce raccord, la jonction entre les deux
     sections dessinait un trait horizontal derrière l'ellipse. */
  background:
    linear-gradient(to bottom, rgba(227, 165, 73, .7) 0, var(--amber) 320px),
    var(--cocoa);
  /* Pas d'`overflow: hidden` : le grand cercle doit pouvoir remonter sur la
     section précédente. Il est peint au-dessus d'elle du simple fait qu'il
     vient après dans le document. */
  isolation: isolate;
  /* Le cercle débordant déjà largement vers le haut, le retrait par défaut
     de la section éloignait inutilement le titre de sa crête. */
  padding-top: 0;
}
/* Le grand cercle du décor. Ancré par le haut et remonté au-delà du bord de
   la section : son sommet mord sur le brun de la section précédente. Le bas
   déborde lui aussi, mais la section suivante le recouvre. */
.svcdial__halo {
  position: absolute;
  /* Remontée jusqu'au bas de la photo de la section précédente : la courbe
     de l'ellipse vient mordre son coin inférieur droit, sans atteindre son
     bord gauche. */
  top: clamp(-260px, -11vw, -150px);
  left: 50%;
  /* Ellipse, plus large que haute, débordant des deux côtés de l'écran. */
  width: 130vw;
  height: clamp(950px, 78vw, 1500px);
  transform: translateX(-50%);
  background: var(--amber);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

/* Un seul gros titre orange, centré, en guise d'en-tête de section. */
.svcdial__head {
  font-family: var(--display);
  /* 12rem au maximum : « mes services » mesure environ 6 em dans Bricolage
     Grotesque en graisse 700, soit 1 146 px à cette taille, pour un
     conteneur de 1 240 px. */
  font-size: clamp(5.25rem, 3rem + 9.4vw, 12rem);
  font-weight: 700;
  line-height: .95;
  /* Aucun interlettrage : la police est déjà assez ouverte, et l’écart
     ajouté délitait le mot à cette taille. */
  text-align: center;
  color: #C47621;
  /* Remonte au-dessus du haut de section ; il reste largement sur l'ellipse,
     dont le bord superieur se situe environ 210 px plus haut. */
  margin-top: clamp(-5.5rem, -4.4vw, -2.5rem);
  /* Resserré : le titre du service qui suit remontait trop bas dans la page. */
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
}

/* Apparition du titre : montée avec une légère mise à l'échelle. Seuls
   `transform` et `opacity` sont animés, donc sans recalcul de mise en page.
   La transition générique de `.reveal` est neutralisée au profit de celle-ci. */
.svcdial__head.reveal { transition: none; transform: none; }
.svcdial__head.reveal.is-in { animation: svcdial-title 1.05s var(--ease-out) both; }
@keyframes svcdial-title {
  from { opacity: 0; transform: translateY(46px) scale(.92); }
  to   { opacity: 1; transform: none; }
}

/* --- Scène : contenu à gauche, roue à droite ------------------------------ */
.svcdial__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--svcdial-dial, 210px);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

/* Toutes les prestations occupent la même cellule : la hauteur du bloc est
   celle de la plus haute, et rien ne saute d'une prestation à l'autre. */
.svcdial__panels { display: grid; }
.svcdial__panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease-out), visibility .55s;
}
.svcdial__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.svcdial__panel:focus-visible { outline: 2px solid var(--teal); outline-offset: 12px; border-radius: var(--r); }

/* --- Colonne de gauche : numéro et titre ---------------------------------- */
.svcdial__num {
  display: flex; align-items: baseline; gap: .15rem;
  font-family: var(--display);
  font-size: 1.05rem; font-weight: 600;
  letter-spacing: -.02em;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
  margin-bottom: .9rem;
}
.svcdial__num-total { color: var(--ink-2); font-size: .85rem; }
.svcdial__num::before {
  content: '';
  width: 42px; height: 1px;
  margin-right: .75rem;
  background: var(--cocoa);
  align-self: center;
}
.svcdial__title {
  font-family: var(--display);
  font-size: clamp(2.1rem, 1.35rem + 3vw, 3.7rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.045em;
  color: var(--cocoa);
  text-wrap: balance;
}
.svcdial__meta {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: 1.1rem;
  font-size: .84rem; color: var(--ink-2);
}
.svcdial__meta .icon { color: var(--teal); }

/* --- Colonne centrale ------------------------------------------------------
   Le second cercle, plus clair, posé dans le grand : il ne contient pas
   seulement l'icône mais l'ensemble icône + description. */
.svcdial__body {
  position: relative;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  /* Fluide : une largeur fixe déborderait de sa colonne sur écran moyen. */
  width: min(100%, 420px);
  aspect-ratio: 1;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: 50%;
  background: #EABC6A;
  text-align: center;
}

/* L'icône est posée à nu : ni cercle, ni cadre, ni rognage. */
.svcdial__media {
  display: grid;
  place-items: center;
  width: clamp(54px, 6vw, 78px);
  aspect-ratio: 1;
}
.svcdial__img { width: 100%; height: 100%; object-fit: contain; }

/* Resserré : dans un disque, une ligne trop longue viendrait toucher le bord. */
.svcdial__text { color: var(--ink-2); font-size: .95rem; max-width: 23ch; }

/* Posé à cheval sur le bord du cercle, légèrement incliné. La rotation est
   répétée sur chaque état, sinon le survol l'effacerait d'un coup. */
.svcdial__cta {
  /* Rappel de bleu, complémentaire du jaune : le bouton devient le point
     d'appel du bloc sans perdre en lisibilité (blanc à 4:1, comme avant). */
  --btn-bg: var(--teal);
  position: absolute;
  right: 2%;
  bottom: 6%;
  transform: rotate(-5deg);
}
.svcdial__cta:hover { transform: rotate(-5deg) translateY(-2px); }
.svcdial__cta::before { background: var(--deep); }
.svcdial__cta:active { transform: rotate(-5deg); }

/* --- Roue de pastilles ---------------------------------------------------- */
.svcdial__dial {
  --svcdial-radius: 112px;
  position: relative;
  align-self: stretch;
  min-height: calc(var(--svcdial-radius) * 2 + 60px);
}
/* Le centre du cercle est posé sur le bord droit : seul son arc gauche entre
   dans la page, ce qui laisse la pastille opposée sortir du champ. */
.svcdial__wheel {
  position: absolute;
  top: 50%; left: 100%;
  width: 0; height: 0;
  transform: rotate(var(--svcdial-rot, 180deg));
  transition: transform .95s var(--ease-out);
}
.svcdial__pin {
  /* Boîte de taille fixe : la plus grande des deux états. */
  --svcdial-size: 104px;
  position: absolute;
  top: 0; left: 0;
  width: var(--svcdial-size); height: var(--svcdial-size);
  margin: calc(var(--svcdial-size) / -2);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  /* Placement sur le cercle, puis rotation inverse pour que l'icône reste
     droite quelle que soit la position de la roue. */
  transform:
    rotate(var(--svcdial-angle))
    translateX(var(--svcdial-radius))
    rotate(calc(-1 * (var(--svcdial-angle) + var(--svcdial-rot, 180deg))));
  /* Seuls `transform` et `opacity` sont animés : ce sont les deux propriétés
     que le navigateur peut traiter sans refaire la mise en page. Animer la
     largeur, la hauteur ou la marge forçait un recalcul à chaque image, et
     c'est ce qui saccadait l'anneau au changement de prestation. */
  transition: transform .95s var(--ease-out), opacity .6s var(--ease);
  will-change: transform;
  /* La pastille diamétralement opposée s'efface : elle sort du cadre. */
  opacity: calc(1 - var(--svcdial-dist, 0) * .55);
}
/* La pastille garde une boîte de taille fixe ; c'est son fond qui grandit,
   par une mise à l'échelle. Le centre reste donc exactement sur le cercle,
   et le changement de taille ne coûte plus aucun calcul de mise en page. */
.svcdial__pin-face {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #EDC57A;
  color: var(--teal);
  transform: scale(.846);
  transition: background .5s var(--ease), transform .55s var(--ease-out), box-shadow .5s var(--ease);
  will-change: transform;
}
.svcdial__pin:hover .svcdial__pin-face { transform: scale(.9); background: #F1CD8B; }
.svcdial__pin:focus-visible { outline: none; }
.svcdial__pin:focus-visible .svcdial__pin-face { outline: 2px solid var(--teal); outline-offset: 4px; }

/* Placées après la règle de survol, qui a la même spécificité. */
.svcdial__pin.is-active .svcdial__pin-face {
  transform: scale(1);
  /* Même fond que les pastilles inactives : c'est la taille et l'anneau qui
     signalent la prestation affichée. */
  background: #EDC57A;
  box-shadow: var(--sh);
}
.svcdial__pin.is-active:hover .svcdial__pin-face { transform: scale(1.04); }
.svcdial__pin .icon { width: 1.7rem; height: 1.7rem; }

/* --- Anneau minuteur, fixe à la position active --------------------------- */
.svcdial__ring {
  position: absolute;
  top: 50%; left: 100%;
  width: 128px; height: 128px;
  margin: -64px;
  transform: translateX(calc(-1 * var(--svcdial-radius)));
  pointer-events: none;
}
.svcdial__ring-track { fill: none; stroke: rgba(33, 139, 158, .22); stroke-width: 1.5; }
.svcdial__ring-bar {
  fill: none;
  /* Rappel de bleu : sur ces jaunes, il se lit comme une progression, là où
     la terracotta s'y confondait avec le fond. */
  stroke: var(--teal);
  stroke-width: 2;
  stroke-linecap: round;
  /* 2 × π × 47 ≈ 295.31 : la circonférence sert de longueur de tiret, si bien
     que le décalage fait office de pourcentage de remplissage. */
  stroke-dasharray: 295.31;
  stroke-dashoffset: 295.31;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.svcdial.is-playing .svcdial__ring-bar {
  animation: svcdial-fill var(--svcdial-delay, 8000ms) linear forwards;
}
.svcdial.is-paused .svcdial__ring-bar { animation-play-state: paused; }

/* --- Repère de progression horizontal ---------------------------------------
   Il remplace la roue sur écran étroit. Une barre par prestation ; celle en
   cours se remplit sur la durée d'affichage, et la fin de ce remplissage
   déclenche le passage à la suivante — même mécanique que l'anneau. */
.svcdial__bars { display: none; }
.svcdial__bar {
  position: relative;
  flex: 1;
  height: 2px;
  border-radius: var(--r-pill);
  background: rgba(27, 87, 107, .22);
  overflow: hidden;
}
.svcdial__bar-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  border-radius: inherit;
  background: var(--teal);
}
/* Les prestations déjà passées restent pleines : le repère se lit alors comme
   une progression dans la série, et non comme quatre minuteurs isolés. */
.svcdial__bar.is-done .svcdial__bar-fill { transform: scaleX(1); }
.svcdial.is-playing .svcdial__bar.is-active .svcdial__bar-fill {
  animation: svcdial-bar var(--svcdial-delay, 8000ms) linear forwards;
}
.svcdial.is-paused .svcdial__bar.is-active .svcdial__bar-fill { animation-play-state: paused; }
@keyframes svcdial-bar { to { transform: scaleX(1); } }

/* Entrée latérale des prestations, sur écran tactile : la nouvelle arrive du
   côté opposé au geste, la précédente s'efface. Deux animations distinctes
   plutôt qu'une transition, afin qu'elles se rejouent à chaque changement. */
@keyframes svcdial-entree {
  from { transform: translateX(34px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes svcdial-entree-arriere {
  from { transform: translateX(-34px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes svcdial-fill { to { stroke-dashoffset: 0; } }

/* Le bouton remonte dans le vide laissé sous le titre : la hauteur du bloc est
   imposée par le disque, à droite, si bien que la colonne de gauche s'arrête
   bien plus haut. La marge est donc négative. */
.svcdial__foot { margin-top: clamp(-6.25rem, -5.2vw, -2.5rem); }

/* Sans JavaScript, la roue ne peut pas tourner : les prestations s'empilent
   les unes sous les autres et restent toutes lisibles. */
.no-js .svcdial__panels { display: block; }
.no-js .svcdial__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  padding-block: clamp(1.5rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line-soft);
}
.no-js .svcdial__panel:first-child { border-top: 0; padding-top: 0; }
.no-js .svcdial__dial { display: none; }
.no-js .svcdial__stage { grid-template-columns: minmax(0, 1fr); }

/* ==========================================================================
   Étapes en éventail (accueil)

   Le titre est épinglé pendant que l'on fait défiler ; les cartes montent
   par-dessus lui, une par une. Chaque carte reçoit une progression `--p` de
   0 à 1 sur sa propre portion de la course, calculée par le script.
   ========================================================================== */
.process {
  background: var(--cream);
  padding-top: 0;
  /* La dernière carte descend d’environ 54 px sous le bloc épinglé (son
     décalage de pile) et son bouton déborde encore d’une vingtaine : le
     retrait doit absorber ces ~75 px avant de ménager un vrai espace. */
  padding-bottom: clamp(7rem, 10vw, 10rem);
  /* Pas d'`overflow: hidden` : il ferait de la section un conteneur de
     défilement et l'épinglage cesserait de fonctionner. */
}

/* Course de défilement : une hauteur d'écran pour l'épinglage, plus une
   portion par étape. */
.process__scroll { height: calc(62vh + var(--steps, 4) * 44vh); }

.process__pin {
  position: sticky;
  top: 0;
  /* Hauteur ramenée au contenu. Une hauteur d’écran laissait, une fois le
     bloc relâché, un tiers d’écran vide entre la dernière carte et le pied
     de page. Les cartes restent hors champ avant leur montée : elles sont
     décalées de 85 vh, donc sous la ligne de flottaison. */
  display: flex;
  flex-direction: column;
  /* Contenu calé en haut, et non centré : le centrage réservait à lui seul
     plus de 200 px au-dessus du titre. Le retrait dégage l’en-tête fixe. */
  justify-content: flex-start;
  padding-top: clamp(6.5rem, 11vh, 8.5rem);
}

/* Titre aligné à gauche, sur le départ du trait du sur-titre : centré, il
   ne tombait pas sur le même axe que « Déroulement ». */
.process__head { max-width: 640px; margin-inline: auto; text-align: left; }

/* Reçoit le bouton d'appel sur petit écran. Vide, il ne prend aucune place. */
.process__foot { display: flex; justify-content: center; margin-top: clamp(2rem, 5vw, 3rem); }
.process__foot:empty { display: none; margin-top: 0; }

.process__fan {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-inline: var(--gutter);
  /* Les cartes remontent par-dessus le titre, qu’elles recouvrent en partie.
     Le chevauchement est borné : au-delà, la pastille numérotée de la
     première carte, qui déborde de 11 px vers le haut, passait sous
     l’en-tête fixe et s’y faisait couper. Il est par ailleurs réduit à un
     simple effleurement : le titre reste entièrement lisible, les cartes
     ne mordant que sur le bas de sa ligne. */
  margin-top: clamp(-1rem, -.8vw, -.25rem);
}

.process__slot {
  flex: 0 0 clamp(190px, 19vw, 290px);
  margin-inline: clamp(-2.6rem, -2.2vw, -1rem);
  /* La plus à droite passe devant, comme un jeu de cartes étalé. */
  z-index: calc(var(--i) + 1);
}

.pcard {
  --tint: var(--amber);
  --p: 0;
  display: flex;
  flex-direction: column;
  /* Hauteur ramenée au texte seul, les cartes ne portant plus d’illustration. */
  min-height: clamp(230px, 18vw, 300px);
  padding: clamp(1rem, 1.8vw, 1.6rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  position: relative;

  /* `--p` à 0 : la carte attend sous le bord de l'écran, plate et réduite.
     `--p` à 1 : elle est en place, inclinée et décalée vers le bas. */
  transform:
    translateY(calc(var(--i) * 18px + (1 - var(--p)) * 85vh))
    rotate(calc(var(--rot, 0deg) * var(--p)))
    scale(calc(.9 + .1 * var(--p)));
  opacity: calc(.2 + .8 * var(--p));
  transform-origin: center bottom;
  will-change: transform;
}

/* Inclinaisons alternées, pour éviter un éventail trop régulier. */
.process__slot:nth-child(4n + 1) .pcard { --rot: -3deg; }
.process__slot:nth-child(4n + 2) .pcard { --rot: 2deg; }
.process__slot:nth-child(4n + 3) .pcard { --rot: -1.5deg; }
.process__slot:nth-child(4n + 4) .pcard { --rot: 3deg; }

.pcard--ambre     { --tint: var(--amber); }
.pcard--sable     { --tint: var(--sand); }
.pcard--terre     { --tint: var(--terracotta); }
.pcard--turquoise { --tint: var(--teal); }
.pcard--bleu      { --tint: var(--deep); }

.pcard__badge {
  position: absolute;
  top: -.7rem; left: -.7rem;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--tint);
  color: #fff;
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 700;
  box-shadow: var(--sh-sm);
}

.pcard__body { text-align: center; }
.pcard__tag {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tint);
  margin-bottom: .7rem;
}
.pcard__title {
  font-size: clamp(1.05rem, .9rem + .7vw, 1.55rem);
  line-height: 1.05;
  color: var(--cocoa);
}
.pcard__num {
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--cocoa);
  margin-block: .45rem .55rem;
}
.pcard__text { color: var(--ink-3); font-size: .82rem; line-height: 1.5; }

/* Bouton d’appel de la dernière carte : posé à cheval sur son coin
   inférieur droit. Il suit la carte dans sa montée et son inclinaison, et
   passe devant elle — le cran de la pile la place déjà au-dessus des
   autres. */
.pcard__cta {
  position: absolute;
  z-index: 3;
  right: clamp(-1.5rem, -1.3vw, -.75rem);
  bottom: clamp(-1.4rem, -1.2vw, -.7rem);
  padding: .8rem 1.25rem;
  font-size: .85rem;
  white-space: nowrap;
  box-shadow: var(--sh-lg);
}


/* Sans JavaScript, ni épinglage ni course : les cartes sont d'emblée posées. */
.no-js .process__scroll { height: auto; }
.no-js .process__pin { position: static; min-height: 0; }
.no-js .pcard { --p: 1; }

/* Sous 1080 px, l'éventail n'a plus la place de s'étaler et l'épinglage n'a
   pas de sens sur un écran haut : les cartes se rangent simplement. */
@media (max-width: 1080px) {
  .process__scroll { height: auto; }
  /* Le retrait haut dégageait l'en-tête fixe pendant l'épinglage ; celui-ci
     n'ayant plus lieu ici, il ne fait qu'éloigner « Déroulement » du lien
     « Toute ma philosophie » qui le précède. */
  .process__pin {
    position: static;
    min-height: 0;
    overflow: visible;
    padding-top: clamp(1.5rem, 5vw, 2.5rem);
  }
  .process__fan {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
  }
  .process__slot { flex: 1 1 240px; margin-inline: 0; }
  .pcard {
    --p: 1;
    min-height: 0;
    transform: none;
    opacity: 1;
  }
  .pcard__cta {
    position: static;
    right: auto;
    bottom: auto;
    box-shadow: var(--sh);
  }
}

/* ==========================================================================
   Actualités
   ========================================================================== */
.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.post__link { display: flex; flex-direction: column; height: 100%; }
.post__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--sand-100);
  margin-bottom: 1.1rem;
}
.post__img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.post:hover .post__img { transform: scale(1.05); }
.post__date {
  font-size: .78rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--terra-700);
  margin-bottom: .45rem;
}
.post__title { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.2; color: var(--cocoa); }
.post__text { margin-top: .6rem; color: var(--ink-3); font-size: .95rem; }
.post__cta {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .9rem; font-size: .88rem; font-weight: 600; color: var(--terracotta);
}
.post__cta .icon { transition: transform .35s var(--ease-out); }
.post:hover .post__cta .icon { transform: translateX(5px); }
.posts--compact { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.posts--compact .post__text { display: none; }

/* Corps d'un article */
.article-body .rich-title { font-family: var(--display); color: var(--cocoa); letter-spacing: -.02em; }
.article-body h2.rich-title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin-top: 2.4em; line-height: 1.15; }
.article-body h3.rich-title { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); margin-top: 1.9em; line-height: 1.2; }
.article-body .rich-quote {
  margin-block: 2em;
  padding: 1.1rem 0 1.1rem 1.5rem;
  border-left: 3px solid var(--sand);
  font-family: var(--display);
  font-size: 1.1em;
  color: var(--ink);
}
.article-body .rich-quote p { max-width: none; }
.article-back { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ==========================================================================
   Révélation au défilement

   Les éléments porteurs de `.reveal` montent et s'estompent à l'entrée dans
   l'écran ; le script leur ajoute `is-in`. `--d` décale l'entrée d'un élément
   à l'autre dans les listes.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .8s var(--ease-out) var(--d, 0ms),
    transform .8s var(--ease-out) var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Sans script, rien ne viendra poser `is-in` : le contenu doit rester lisible. */
.no-js .reveal { opacity: 1; transform: none; }

[data-split] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
[data-split].is-in { opacity: 1; transform: none; }
.no-js [data-split] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, [data-split] { opacity: 1; transform: none; transition: none; }
  .hero__img, .hero__scroll-line::after, .hero__dot { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Bannière des pages intérieures
   ========================================================================== */
.page-head {
  position: relative;
  isolation: isolate;
  padding-block: clamp(7.5rem, 12vw, 11rem) clamp(3rem, 6vw, 5rem);
  background: var(--sand-50);
  overflow: hidden;
}
.page-head__inner { position: relative; max-width: 900px; }

/* Variante illustrée : le texte passe en blanc sur la photo assombrie. */
.page-head--image { background: var(--deep-900); }
/* La parallaxe fait glisser la photo vers le haut d’au plus 16 px
   (`data-parallax="0.16"`). Sans débordement en bas, le fond sombre de la
   bannière apparaîtrait en barre sous la photo. */
.page-head__media { position: absolute; inset: -6% 0 -24px; z-index: -2; }
.page-head__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
/* Voile uni, sans dégradé : il assombrit la photo de façon régulière et porte
   à lui seul le contraste du titre (blanc sur #241A13 à 52 % : 7,4:1). */
.page-head__veil {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(36, 26, 19, .52);
}

.page-head__title { margin-top: .2rem; }
.page-head__intro {
  margin-top: 1.3rem;
  max-width: 58ch;
  font-size: clamp(1.02rem, .98rem + .4vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-2);
}
.page-head--image .page-head__title { color: #fff; }
.page-head--image .page-head__intro { color: rgba(255,255,255,.88); }
.page-head--image .eyebrow { color: var(--amber); }
.page-head--image .crumbs { color: rgba(255,255,255,.75); }
.page-head--image .crumbs a:hover { color: #fff; }
.page-head--image .crumbs li + li::before { color: rgba(255,255,255,.45); }

/* Pages légales : ni photo ni introduction, un simple en-tête posé. */
.page-head--plain { padding-block: clamp(6.5rem, 10vw, 9rem) clamp(2rem, 4vw, 3rem); }

.crumbs {
  margin-bottom: 1.4rem;
  font-size: .82rem;
  color: var(--ink-3);
}
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.crumbs li { display: flex; align-items: center; gap: .5rem; }
.crumbs li + li::before {
  content: '/';
  color: var(--line);
  font-size: .9em;
}
.crumbs a { transition: color .25s var(--ease); }
.crumbs a:hover { color: var(--terracotta); }
.crumbs [aria-current] { font-weight: 600; }

/* ==========================================================================
   Frise du parcours (Mes formations)
   ========================================================================== */
.timeline {
  display: grid;
  gap: 0;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-left: 2px solid var(--sand-200);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
  padding-block: clamp(1.1rem, 2vw, 1.6rem);
}
.timeline__item + .timeline__item { border-top: 1px solid var(--line-soft); }

/* Pastille posée sur le filet vertical. */
.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(clamp(1.5rem, 3vw, 2.5rem) * -1 - 7px);
  top: calc(clamp(1.1rem, 2vw, 1.6rem) + .35em);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px var(--sand-50);
}
.timeline__year {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--terracotta);
  font-variant-numeric: tabular-nums;
}
.timeline__title { font-size: 1.15rem; margin-bottom: .3rem; }
.timeline__org { color: var(--ink-3); font-size: .94rem; }

/* ==========================================================================
   Ma philosophie : récit et principes
   ========================================================================== */
.section--story { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* Les principes suivaient de trop près le récit : le retrait haut est réduit,
   les deux sections formant une même respiration. */
.section--principles { padding-top: clamp(2.5rem, 5vw, 4rem); }

.principles {
  display: grid;
  /* Trois par ligne au plus : au-delà, les cartes deviennent trop étroites
     pour leur texte. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.9rem);
}
@media (min-width: 1000px) {
  .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.principle {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease);
}
.principle:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.principle__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--sand-50);
  color: var(--terracotta);
  margin-bottom: 1.2rem;
}
.principle__title { font-size: 1.22rem; margin-bottom: .55rem; }
.principle__text { color: var(--ink-3); font-size: .96rem; line-height: 1.6; }

/* ==========================================================================
   Formules (page Prestations)

   Chaque carte porte une formule ; celles qui sont rattachées à une page
   deviennent cliquables dans leur intégralité.
   ========================================================================== */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.9rem);
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.8vw, 2.2rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .4s;
}
.plan:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); border-color: transparent; }

/* Formule mise en avant : un liseré ambré et un fond légèrement chaud. */
.plan--featured {
  background: var(--sand-50);
  border-color: var(--amber);
  box-shadow: var(--sh);
}
.plan__flag {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  padding: .35rem .9rem;
  border-radius: var(--r-pill);
  background: var(--amber);
  color: var(--cocoa);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.plan__name { font-size: 1.35rem; margin-bottom: .9rem; }

/* Le lien du titre couvre toute la carte : la zone cliquable est entière,
   sans imbriquer d'ancres. */
.plan__link { transition: color .25s var(--ease); }
.plan__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.plan--linked:hover .plan__link { color: var(--terracotta); }
.plan__link:focus-visible { outline: none; }
.plan--linked:focus-within { outline: 2px solid var(--teal); outline-offset: 4px; }

.plan__price { display: flex; align-items: baseline; gap: .4rem; margin-bottom: 1rem; }
.plan__amount {
  font-family: var(--display);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--terracotta);
}
.plan__unit { font-size: .86rem; color: var(--ink-3); }

.plan__desc { color: var(--ink-3); font-size: .96rem; line-height: 1.6; }

.plan__list {
  display: grid;
  gap: .6rem;
  margin-top: 1.3rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line-soft);
  font-size: .92rem;
}
.plan__list li { display: flex; align-items: flex-start; gap: .6rem; color: var(--ink-2); }
.plan__list .icon { color: var(--teal); margin-top: .18em; }

.plan__cta {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: auto;
  padding-top: 1.4rem;
  font-size: .88rem; font-weight: 600;
  color: var(--terracotta);
}
.plan__cta .icon { transition: transform .4s var(--ease-out); }
.plan:hover .plan__cta .icon { transform: translateX(5px); }

/* ==========================================================================
   Pages prestation : points clés et informations pratiques
   ========================================================================== */
.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.point { display: flex; align-items: flex-start; gap: 1rem; }
.point__check {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--teal-50);
  color: var(--deep);
}
.point__title { font-size: 1.1rem; margin-bottom: .35rem; }
.point__text { color: var(--ink-3); font-size: .94rem; line-height: 1.6; }

/* Encart posé sous la photo de la prestation. */
.practical {
  margin-top: 1.5rem;
  padding: clamp(1.2rem, 2vw, 1.6rem);
  background: var(--sand-50);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
}
.practical__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .55rem;
}
.practical__row + .practical__row { border-top: 1px solid var(--line-soft); }
.practical dt {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex: none;
}
.practical dd { color: var(--ink); font-weight: 600; text-align: right; }

/* ==========================================================================
   Contact : formulaire et colonne latérale
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.contact-form-wrap {
  padding: clamp(1.6rem, 3vw, 2.6rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh);
}
.contact-form__intro { margin-top: .8rem; color: var(--ink-3); font-size: .96rem; }
.contact-form-wrap .form { margin-top: 1.8rem; }

.contact-aside { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.contact-card {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--sand-50);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.contact-card--hours { background: var(--teal-50); border-color: transparent; }

.contact-list { display: grid; gap: .9rem; margin-top: 1.3rem; font-size: .95rem; }
.contact-list li { display: flex; align-items: flex-start; gap: .75rem; }
.contact-list__icon {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--terracotta);
}
.contact-list a { transition: color .25s var(--ease); }
.contact-list a:hover { color: var(--terracotta); }
.contact-card .prose { margin-top: 1.3rem; font-size: .94rem; color: var(--ink-2); }

.hours { display: grid; gap: .6rem; margin-top: 1.2rem; font-size: .93rem; }
.hours li { display: flex; align-items: center; gap: .6rem; color: var(--ink-2); }
.hours .icon { color: var(--deep); flex: none; }

/* ==========================================================================
   Formulaires
   ========================================================================== */
.form { display: grid; gap: 1.2rem; }
.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1.2rem;
}

.field { display: grid; gap: .45rem; }
.field label {
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink-2);
}
.req { color: var(--terracotta); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .8rem 1rem;
  font: inherit;
  font-size: .96rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 9rem; line-height: 1.6; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); opacity: .8; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(33, 139, 158, .16);
}

/* La flèche native disparaît avec l'apparence : celle-ci est redessinée, et
   le rembourrage droit lui réserve sa place. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2.5 4.5 3.5 3.5 3.5-3.5' fill='none' stroke='%237C6B5E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
}

.field__error { font-size: .82rem; color: var(--terra-700); font-weight: 600; }
.field:has(.field__error) input,
.field:has(.field__error) textarea { border-color: var(--terra-700); }

.field--check { gap: .35rem; }
.check {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-2);
  cursor: pointer;
}
.check input {
  width: 1.15rem; height: 1.15rem;
  flex: none;
  margin-top: .12em;
  accent-color: var(--terracotta);
}
.check a { color: var(--terracotta); text-decoration: underline; text-underline-offset: 3px; }

/* Piège à robots : le champ doit rester dans le flux pour eux, hors de vue
   pour tous les autres — `display: none` serait ignoré par certains. */
.hp-field {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border-radius: var(--r);
  border: 1px solid transparent;
}
.alert p { font-size: .95rem; line-height: 1.6; }
.alert__title { font-size: 1.2rem; margin-bottom: .4rem; }
.alert__icon {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
}
.alert--success { background: var(--teal-50); border-color: rgba(33, 139, 158, .25); color: var(--ink); }
.alert--success .alert__icon { background: var(--deep); color: #fff; }
.alert--error {
  background: #FBEDE4;
  border-color: rgba(156, 83, 32, .3);
  color: var(--terra-700);
  font-weight: 600;
}
.form .alert--error { margin-bottom: .4rem; }

/* ==========================================================================
   Bandeau d'appel à l'action
   ========================================================================== */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--deep);
  color: rgba(255,255,255,.86);
  text-align: center;
}
/* Halo ambré diffus, posé derrière le texte. */
.cta-band__glow {
  position: absolute;
  z-index: -1;
  top: -40%; left: 50%;
  transform: translateX(-50%);
  width: min(120%, 1100px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(227, 165, 73, .34), transparent 62%);
  pointer-events: none;
}
.cta-band__inner { max-width: 760px; margin-inline: auto; }
.cta-band__paw {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--amber);
}
.cta-band__title { color: #fff; }
.cta-band__text {
  margin-top: 1.2rem;
  font-size: clamp(1.02rem, .98rem + .4vw, 1.18rem);
  line-height: 1.65;
}
.cta-band__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem;
  margin-top: 2.2rem;
}

/* Le bouton principal du bandeau passe en ambre : le terracotta se distingue
   mal du bleu profond du fond. L’encre brune remplace le blanc, illisible
   sur l’ambre (2,2:1) là où elle tient 5,3:1 ; au survol, le fond brun
   arrive et le libellé repasse au blanc (11,4:1). */
.cta-band .btn--primary { --btn-bg: var(--amber); --btn-fg: var(--cocoa); }
.cta-band .btn--primary::before { background: var(--cocoa); }
.cta-band .btn--primary:hover { color: #fff; }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.site-footer {
  background: var(--cocoa);
  color: rgba(255,255,255,.72);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: .94rem;
}
.site-footer a { transition: color .25s var(--ease); }
.site-footer a:hover { color: var(--amber); }

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer-top__title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: #fff;
  max-width: 22ch;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}

.footer-brand {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 1rem;
}
.footer-brand__paw { width: 1.6rem; height: 1.6rem; flex: none; color: var(--amber); }
.footer-about { line-height: 1.7; max-width: 42ch; }
.footer-about a { color: var(--sand); text-decoration: underline; text-underline-offset: 3px; }

.footer-title {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #fff;
  margin-bottom: 1rem;
}
.footer-title--spaced { margin-top: 1.8rem; }

.footer-links { display: grid; gap: .65rem; }
.footer-contact { display: grid; gap: .75rem; }
.footer-contact li { display: flex; align-items: flex-start; gap: .6rem; }
.footer-contact .icon { color: var(--sand); margin-top: .2em; flex: none; }
.footer-area { line-height: 1.6; max-width: 30ch; }

.socials { display: flex; gap: .6rem; margin-top: 1.4rem; }
.socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.8);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease-out);
}
.socials a:hover {
  background: var(--amber);
  border-color: transparent;
  color: var(--cocoa);
  transform: translateY(-3px);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .84rem;
  color: rgba(255,255,255,.6);
}

/* ==========================================================================
   Pages d'erreur
   ========================================================================== */
.error-code {
  font-family: var(--display);
  font-size: clamp(5rem, 3rem + 12vw, 11rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.06em;
  color: var(--sand-200);
  margin-bottom: .5rem;
}
.error-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem;
  margin-top: 2.2rem;
}
.error-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-soft);
  font-size: .9rem;
  color: var(--ink-3);
}
.error-links a { transition: color .25s var(--ease); }
.error-links a:hover { color: var(--terracotta); }

/* --- Compléments ---------------------------------------------------------- */
.subnav__list { display: grid; gap: .15rem; }
.svcdial__lead { min-width: 0; }

/* ==========================================================================
   Adaptations aux petits écrans

   Ce bloc vient en dernier : il rectifie les grilles à colonnes fixes, les
   autres se rangeant d'elles-mêmes grâce à `auto-fit`.
   ========================================================================== */

/* Le menu horizontal n'a plus la place de tenir : il cède au menu plein
   écran, et le bouton hamburger prend le relais. */
@media (max-width: 960px) {
  .nav { display: none; }
  .burger { display: block; }
  .header-phone { display: none; }
  .site-header__actions .btn--sm { display: none; }

  /* --- Bloc « Mes services » ---------------------------------------------
     L'ellipse, le disque de texte et la roue à demi sortie du champ sont
     dessinés pour une mise en page à deux colonnes. Sur écran étroit, la
     roue passe à droite du titre, le texte descend en carte pleine largeur. */

  /* L'ellipse gardait une hauteur fixe (950 px au minimum) pour une largeur
     en pourcentage : sous 730 px d'écran elle devenait plus haute que large,
     d'où l'œuf. Elle épouse désormais la section et n'empiète plus sur le
     texte de la section précédente. */
  .svcdial__halo {
    top: 0;
    width: 150vw;
    /* Bornée à la section, l'ellipse s'arrêtait net à son bas. Elle descend
       maintenant derrière la section suivante, jusqu’à mi-hauteur de sa photo :
       celle-ci est haute de 133 vw moins 53 px (cadre 3/4 sur toute la
       largeur utile) et commence 24 px plus bas : son milieu tombe donc à
       66,5 vw, que le débord de 68 vw dépasse de huit pixels. */
    height: calc(100% + 68vw);
    border-radius: 50% / 8%;
  }

  /* Le titre était posé au ras de la crête de l'ellipse : le retrait haut de
     la section l'en écarte, l'ellipse restant calée sur le bord. */
  .svcdial { padding-top: clamp(2.25rem, 8vw, 3.75rem); }

  /* Ce bouton remonte de six rems sous l'ellipse en version bureau ; sur
     mobile ce décalage le faisait chevaucher la roue et la carte. */
  .svcdial__foot { margin-top: clamp(2.25rem, 7vw, 3rem); }

  /* Le titre remontait au-dessus de la section pour mordre sur l'ellipse ;
     celle-ci commençant désormais au ras de la section, il reste dedans.
     Le corps minimal de 5,25 rem le faisait passer sur deux lignes : il suit
     désormais la largeur d'écran. « mes services » mesure environ 6 em, soit
     250 px sur un écran de 320 px, pour 280 px disponibles. */
  .svcdial__head {
    margin-top: 0;
    /* Au plus grand possible sur une seule ligne. « mes services » mesure
       environ 5,97 em dans cette graisse ; le diviseur 6,15 laisse 3 % de
       marge. La largeur utile vaut 100vw moins 40 px jusqu’a 500 px d’ecran,
       puis 92vw, la gouttiere passant en pourcentage : on retient la plus
       contraignante des deux. */
    font-size: min(calc((100vw - 40px) / 6.15), calc(92vw / 6.15));
    white-space: nowrap;
  }

  .svcdial__stage { position: relative; grid-template-columns: minmax(0, 1fr); }

  /* Le glissement vertical d'origine se lisait mal au doigt : la prestation
     entre désormais latéralement, dans le sens du geste. La sortante se
     contente de s'effacer — la faire glisser aussi brouillait la lecture,
     les deux se croisant dans la même cellule. */
  .svcdial__panel {
    transform: none;
    transition: opacity .3s var(--ease), visibility .3s;
  }
  .svcdial__panel.is-active { animation: svcdial-entree .5s var(--ease-out) both; }
  .svcdial.is-back .svcdial__panel.is-active { animation-name: svcdial-entree-arriere; }
  .svcdial__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.25rem, 4vw, 2rem);
  }

  /* Numéro, titre et mention alignés à gauche ; la place réservée à droite
     est celle de la roue. */
  .svcdial__lead { padding-right: 0; }
  /* La roue ne prend plus de largeur : le titre dispose de toute la colonne
     et peut grandir d'autant. */
  .svcdial__title { font-size: clamp(1.75rem, 8vw, 2.6rem); }

  /* Un disque impose au texte une largeur qui dépend de sa hauteur : le
     contenu ne tenait plus et la forme s'étirait. Une carte arrondie tient
     la même fonction sans cette contrainte. */
  .svcdial__body {
    width: 100%;
    aspect-ratio: auto;
    border-radius: var(--r-lg);
    padding: clamp(1.5rem, 6vw, 2.25rem);
    /* Réserve la hauteur du bouton, qui déborde du coin inférieur droit. */
    padding-bottom: clamp(3rem, 10vw, 4rem);
  }
  .svcdial__text { max-width: none; }

  /* Le bouton était posé à 6 % du bas, proportion calée sur le disque : dans
     une carte bien plus basse, elle le ramenait en plein sur le texte. Il
     reste à cheval sur le coin inférieur droit, mais mesuré en pixels — et
     le retrait bas de la carte garantit que le texte s'arrête au-dessus. */
  .svcdial__cta {
    right: clamp(.75rem, 4vw, 1.5rem);
    bottom: clamp(-1.4rem, -4vw, -.9rem);
  }

  /* La roue était masquée, et c'est ce qui arrêtait le défilement : le passage
     à la prestation suivante est déclenché par la fin de l'animation de
     l'anneau, qui ne s'anime pas dans un élément en display:none. Elle
     revient, en cercle entier réduit, calée à droite du titre. */
  /* La roue de pastilles laisse la place au repère horizontal : sur un écran
     étroit, quatre boutons circulaires prenaient une largeur que le titre du
     service réclamait. */
  .svcdial__dial { display: none; }
  .svcdial__bars {
    display: flex;
    gap: .4rem;
    margin-top: clamp(1.25rem, 4vw, 1.75rem);
  }
}

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  /* L'ordre imposé aux blocs inversés n'a plus lieu d'être une fois empilés :
     la photo doit rester sous le texte, comme partout ailleurs. */
  .split--reverse .split__media { order: 0; }
  .split--wide-text { grid-template-columns: minmax(0, 1fr); }
  .split--wide-text .split__media { margin-top: 0; }
  .section--intro .split__body { margin-top: 0; }

  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hero { padding-block: 7.5rem clamp(3.5rem, 8vw, 5rem); }
  .hero__scroll { display: none; }

  .cta-band__actions, .error-actions { flex-direction: column; align-items: center; }
  .cta-band__actions .btn, .error-actions .btn { width: min(100%, 320px); justify-content: center; }
}

@media (max-width: 640px) {
  /* « Éducation et rééducation du chien » débordait sur deux lignes : c'est
     l'interlettrage, très ouvert, qui coûtait le plus de largeur. Réduit avec
     le corps, le libellé tient sur une ligne dès 320 px de large. */
  .hero__eyebrow {
    /* Taille fluide plutôt que fixe : à corps constant, la marge n’était que
       de quelques pixels sur un écran de 320 px. */
    font-size: clamp(.6rem, 2.6vw, .78rem);
    letter-spacing: .06em;
    padding: .45rem .85rem;
    white-space: nowrap;
  }

  .page-head { padding-block: 6.5rem clamp(2.5rem, 6vw, 3.5rem); }

  .timeline { padding-left: 1.25rem; }
  .timeline__item { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .timeline__item::before { left: -1.25rem; }

  .practical__row { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .practical dd { text-align: left; }

  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .plan__flag { position: static; transform: none; display: inline-block; margin-bottom: .9rem; }
}

/* --- Impression ----------------------------------------------------------- */
@media print {
  .site-header, .mobile-menu, .burger, .hero__scroll,
  .cta-band, .site-footer, .svcdial__dial { display: none !important; }
  .reveal, [data-split] { opacity: 1 !important; transform: none !important; }
  .section { padding-block: 1.5rem; }
  body { background: #fff; color: #000; }
}

.footer-col { min-width: 0; }
.footer-col--brand { max-width: 42ch; }
.timeline__body { min-width: 0; }
.post__body { display: flex; flex-direction: column; flex: 1; }

/* Animations refusées : le script pose `is-static`, la course de défilement
   disparaît et les cartes sont d'emblée en place. */
.process__scroll.is-static { height: auto; }
.process__scroll.is-static .process__pin { position: static; min-height: 0; overflow: visible; }
.process__scroll.is-static .process__fan { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.process__scroll.is-static .pcard { --p: 1; }

/* --- Images insérées dans un article -------------------------------------- */
.rich-figure {
  margin-block: clamp(1.75rem, 3.5vw, 2.75rem);
}
.rich-figure__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r);
  box-shadow: var(--sh);
}
.rich-figure__legend {
  margin-top: .8rem;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ink-3);
  text-align: center;
}
/* Dans un article, la figure occupe toute la largeur de la colonne de texte,
   que les paragraphes limitent sinon à 62 caractères. */
.article-body .rich-figure { max-width: none; }

/* Trois champs sur une ligne, sous un seul libellé — le chien : nom, âge,
   race. En dessous de 520 px ils se rangent l'un sous l'autre. */
.field__label {
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink-2);
}
.field__trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
}
@media (max-width: 520px) {
  .field__trio { grid-template-columns: minmax(0, 1fr); }
}