/* ==========================================================================
   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;
  color: var(--sand);
  /* 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; }
@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; }

.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; }
  .process__pin { position: static; min-height: 0; overflow: visible; }
  .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;
    align-self: flex-end;
    margin-top: 1.5rem;
    box-shadow: none;
  }
}

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

  .svcdial__stage { grid-template-columns: minmax(0, 1fr); }
  .svcdial__dial { display: none; }
  .svcdial__panel { grid-template-columns: minmax(0, 1fr); }
}

@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) {
  .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); }
}