/* ==========================================================================
   Gabarit site vitrine : feuille de style de départ

   À FAIRE PAR PROJET : remplacer les jetons de couleur et de police (bloc :root et bloc
   sombre) d'après la direction choisie avec les skills de design. Ne pas garder la palette
   neutre du gabarit telle quelle.

   Système de formes (règle unique, appliquée partout) :
     - boutons et étiquettes  : pilule (999px)
     - cadres, cartes, blocs   : 28px  (--r-lg)
     - images internes         : 18px  (--r-md)
     - champs de formulaire    : 12px  (--r-sm)

   Échelle des z-index (ne pas improviser d'autres valeurs) :
     39   menu mobile plein écran
     40   barre de navigation collante
     55   traînée derrière le curseur (module trainee)
     60   grain fixe (si utilisé)
     100  lien d'évitement
     (les <dialog> vivent dans la couche supérieure du navigateur)
   ========================================================================== */

/* ---------- Jetons ---------- */
:root {
  color-scheme: light dark;

  /* Palette d'Élyka Santé : rose, blanc, noir (souhait de la cliente), tirée de son logo :
     lavis rose pâle #F8DCDE, rose doré du stéthoscope #C78488, encre noire. Contrastes mesurés
     le 1er octobre 2026 : encre 17:1, texte secondaire 10:1, aides 6,4:1, boutons 5,4:1. */
  --bg: #FBF7F7;              /* fond de page : blanc rosé */
  --bg-2: #F6E9EC;            /* fond de section teintée : le lavis du logo */
  --surface: #FFFDFD;         /* cartes */
  --ink: #1F171A;             /* texte principal : noir chaud */
  --ink-2: #4B3C42;           /* texte secondaire */
  --ink-3: #6B5A61;           /* aides, légendes (6,4:1 sur --surface) */
  --line: rgba(31, 23, 26, 0.10);
  --line-strong: rgba(31, 23, 26, 0.20);
  --field-border: rgba(31, 23, 26, 0.55);   /* contour des champs : 3,9:1 contre la carte */
  --tint: rgba(174, 63, 89, 0.07);
  --tint-strong: rgba(174, 63, 89, 0.14);

  --brand: #AE3F59;           /* rose profond : boutons, accents. UNE seule couleur vive. */
  --brand-soft: #F2A7B6;      /* rose clair pour texte et focus sur fond profond */
  --gold: #C78488;            /* rose doré du stéthoscope : filets et détails, jamais du texte */
  --deep: #26171C;            /* blocs de fond profond : noir rosé */
  --deep-2: #1B1014;
  --on-green: #FBF4F6;        /* texte sur fond profond */
  --on-green-2: rgba(251, 244, 246, 0.76);
  --accent-text: #A33852;

  --btn-bg: var(--brand);
  --btn-bg-hover: #96344B;
  --btn-fg: #FBF7F7;
  --focus: var(--brand);

  --error: #B23A2B;
  --error-bg: #FBE9E6;
  --shadow-rgb: 61, 27, 37;

  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);

  /* Durées : un seul langage de mouvement */
  --t-fast: 180ms;   /* retours de survol et de focus */
  --t-base: 280ms;   /* changements d'état (cartes, menu, fiche) */
  --t-slow: 700ms;   /* zooms de photos, grandes apparitions */

  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;   /* titres */
  --font-body: "Figtree", "Segoe UI", system-ui, sans-serif;

  /* Petites tailles de texte, nommées par usage : jamais une taille écrite à la main entre les deux */
  --text-fine: .85rem;    /* petits caractères : aide et erreurs des champs, consentement, bas de page */
  --text-label: .9rem;    /* étiquettes : puces, badges, méta, indices, numéros d'étape */
  --text-small: .95rem;   /* texte secondaire : liens de la barre, libellés, petits boutons, légendes */

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 7.5vw, 7rem);
  --nav-h: 76px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171114;
    --bg-2: #1F1619;
    --surface: #241A1E;
    --ink: #F3ECEE;
    --ink-2: #CDBAC1;
    --ink-3: #A9959C;
    --line: rgba(243, 236, 238, 0.10);
    --line-strong: rgba(243, 236, 238, 0.20);
    --field-border: rgba(243, 236, 238, 0.45);
    --tint: rgba(242, 167, 182, 0.10);
    --tint-strong: rgba(242, 167, 182, 0.18);

    --brand: #F2A7B6;
    --gold: #D9A0A5;
    --deep: #2C1C22;
    --deep-2: #22151A;
    --on-green: #F3ECEE;
    --on-green-2: rgba(243, 236, 238, 0.76);
    --accent-text: #F2A7B6;

    --btn-bg: #F2A7B6;
    --btn-bg-hover: #F7BCC8;
    --btn-fg: #171114;
    --focus: #F2A7B6;

    --error: #F09A86;
    --error-bg: rgba(240, 154, 134, 0.14);
    --shadow-rgb: 0, 0, 0;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--brand) var(--bg-2);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
::selection { background: color-mix(in srgb, var(--brand) 28%, transparent); color: var(--ink); }
input, textarea, select { caret-color: var(--brand); }
button, input, select, textarea { font: inherit; color: inherit; }
p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 em, h2 em { font-style: italic; font-weight: 500; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Sur les surfaces profondes, l'anneau passe en version claire. Pas dans la carte blanche du
   formulaire, posée sur le panneau contact : l'anneau pâle y serait presque invisible */
.section--deep :focus-visible, .contact__copy :focus-visible { outline-color: var(--brand-soft); }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--section); }
.section--tint { background: var(--bg-2); }
.section--deep { background: var(--deep); color: var(--on-green); border-radius: clamp(24px, 4vw, 56px); }

.skip-link {
  position: absolute; top: -100%; left: var(--gutter); z-index: 100;
  padding: .6rem 1rem; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: .75rem; }

#top-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .85rem;
  min-height: 54px; padding: .5rem .5rem .5rem 1.5rem;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-soft), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.btn:active { transform: scale(.96); }
/* Sur un écran étroit, le libellé passe à la ligne plutôt que de déborder de sa carte */
.btn__label { line-height: 1.2; text-align: start; }
.btn__icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.1rem;
  transition: transform var(--t-base) var(--ease-soft);
}
/* Survols réservés aux appareils qui survolent vraiment (souris, pavé tactile) : sur un écran
   tactile, un survol resterait collé après un toucher */
@media (hover: hover) { .btn:hover .btn__icon { transform: translate(2px, -1px) scale(1.06); } }
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 14px 30px -18px rgba(var(--shadow-rgb), .5); }
@media (hover: hover) { .btn--primary:hover { background: var(--btn-bg-hover); } }
.btn--primary .btn__icon { background: rgba(255, 255, 255, .18); }
@media (prefers-color-scheme: dark) {
  .btn--primary { box-shadow: none; }
  .btn--primary .btn__icon { background: rgba(15, 20, 23, .16); }
}
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
@media (hover: hover) { .btn--ghost:hover { background: var(--tint); border-color: var(--ink-3); } }
.btn--ghost .btn__icon { background: var(--tint); }
.btn--light { background: var(--on-green); color: var(--deep); }
.btn--light .btn__icon { background: rgba(0, 0, 0, .10); }
.btn--sm { min-height: 46px; padding: .35rem .35rem .35rem 1.15rem; font-size: var(--text-small); gap: .7rem; }
.btn--sm .btn__icon { width: 32px; height: 32px; font-size: 1rem; }
.btn--block { width: 100%; justify-content: space-between; }
.btn[disabled] { opacity: .72; cursor: progress; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  height: var(--nav-h);
  transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
}
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1;
}
.brand picture { display: contents; }
.brand__logo { height: 64px; width: auto; flex: none; display: block; }
.nav__links { display: flex; gap: .15rem; }
.nav__links a {
  text-decoration: none; padding: .7rem .95rem; border-radius: 999px;
  color: var(--ink-2); font-weight: 500; font-size: var(--text-small); line-height: 1.4;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__links a.is-active { color: var(--ink); background: var(--tint); }
@media (hover: hover) { .nav__links a:hover { color: var(--ink); background: var(--tint); } }
.nav__toggle {
  display: none; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
}
.nav__burger { position: relative; display: block; width: 18px; height: 12px; }
.nav__burger span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--ink); transition: transform var(--t-base) var(--ease-soft);
}
.nav__burger span:nth-child(1) { top: 0; }
.nav__burger span:nth-child(2) { top: 10px; }
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }
/* Seuil du menu. Avec le contenu d'exemple, la barre complète (nom, liens, bouton) demande 1 008 px.
   À remesurer avec le nom et les liens du client, et à reporter dans js/main.js (même valeur plus 1). */
@media (max-width: 1080px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: grid; }
}

/* Menu mobile plein écran : il défile quand il dépasse l'écran (zoom 200 %, téléphone couché) */
.menu {
  position: fixed; inset: 0; z-index: 39;
  padding-top: var(--nav-h);
  overflow-y: auto; overscroll-behavior: contain;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  opacity: 0; transition: opacity .35s var(--ease);
}
.menu.is-open { opacity: 1; }
.menu__inner { display: grid; gap: .25rem; padding-block: 2rem; }
.menu__inner > a:not(.btn) {
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 600;
  text-decoration: none; padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.menu__inner > a {
  opacity: 0; transform: translateY(18px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  transition-delay: calc(60ms + var(--i, 0) * 50ms);
}
.menu.is-open .menu__inner > a { opacity: 1; transform: none; }
.menu__inner .btn { margin-top: 1.75rem; justify-self: start; }
body.menu-open { overflow: hidden; }
/* Menu ouvert : la barre devient opaque, sinon les liens qui défilent passent derrière le nom */
body.menu-open .nav { background: var(--bg); }

/* ---------- Héro ---------- */
.hero {
  position: relative; overflow: clip;
  padding-top: clamp(1.5rem, 4vw, 3.5rem);
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end;
}
.hero__copy { grid-column: 1 / 7; padding-bottom: clamp(1.5rem, 5vw, 5rem); }
.hero__media { grid-column: 7 / 13; position: relative; }
/* Le cadre du héro déborde à droite de la grille, seulement à partir de 1 340 px : en dessous,
   le bord de l'écran le rognerait (24 px à 1 280 px) */
@media (min-width: 1340px) { .hero__media { margin-right: -5vw; } }
.hero h1 { font-size: clamp(2.5rem, 1.3rem + 3.4vw, 4rem); line-height: 1.06; padding-bottom: .1em; }
.hero__lede { margin-top: 1.5rem; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); color: var(--ink-2); max-width: 36ch; text-wrap: pretty; }
.hero__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__media .frame img { aspect-ratio: 4 / 5; }
@media (max-width: 900px) {
  /* Une seule colonne : les 11 espacements d'une grille à 12 colonnes dépasseraient un téléphone */
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .hero__copy, .hero__media { grid-column: 1 / -1; }
  .hero__media { margin-top: 1rem; }
  .hero__media .frame img { aspect-ratio: 4 / 3; }
}

/* ---------- Cadre à double bordure (photos) ---------- */
.frame {
  padding: 8px; border-radius: var(--r-lg);
  background: var(--tint);
  /* filet rose doré, comme l'anneau du logo */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent), 0 40px 80px -40px rgba(var(--shadow-rgb), .35);
}
.frame__inner {
  border-radius: calc(var(--r-lg) - 8px); overflow: hidden;
  background: var(--bg-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- En-têtes de section ---------- */
.section__head { max-width: 66ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head h2, .contact h2 { font-size: clamp(2.2rem, 1.2rem + 2.8vw, 3.5rem); line-height: 1.04; }
.section__head p { margin-top: 1.1rem; color: var(--ink-2); font-size: 1.12rem; max-width: 56ch; text-wrap: pretty; }
.section--deep .section__head p { color: var(--on-green-2); }
.section__head--right { margin-left: auto; text-align: right; }
.section__head--right p { margin-left: auto; }
/* Amorce en italique : remplace les étiquettes en capitales au-dessus des titres (à éviter) */
.lead-in { margin-bottom: .6rem; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.3rem; color: var(--accent-text); }

/* ---------- Services : quatre cartes en quinconce ---------- */
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (min-width: 901px) { .svc:nth-child(even) { margin-top: 4rem; } }
.svc {
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}
.svc.svc--flip { flex-direction: column-reverse; }
/* Ces cartes ne sont pas cliquables : pas de soulèvement au survol, seulement le zoom lent de la photo */
.svc__media { aspect-ratio: 16 / 9; overflow: hidden; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
@media (hover: hover) { .svc:hover .svc__media img { transform: scale(1.04); } }
.svc__body { padding: clamp(1.5rem, 2.6vw, 2.1rem); }
.svc h3 { font-size: 1.8rem; line-height: 1.1; }
.svc__lede { margin-top: .6rem; color: var(--ink-2); max-width: 50ch; text-wrap: pretty; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.35rem; }
.chips li {
  padding: .45rem .95rem; border-radius: 999px;
  font-size: var(--text-label); font-weight: 500; color: var(--ink);
  background: var(--tint); box-shadow: inset 0 0 0 1px var(--line);
}
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr; gap: 1.25rem; } }

/* ---------- Réalisations : grille simple ---------- */
.work__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.work__pic {
  border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3 / 2;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 60px -40px rgba(0, 0, 0, .6);
}
.work__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
@media (hover: hover) { .work__grid figure:hover .work__pic img { transform: scale(1.03); } }
.work__grid figcaption { margin-top: .8rem; font-size: var(--text-small); color: var(--on-green-2); }
@media (max-width: 900px) { .work__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .work__grid { grid-template-columns: 1fr; } }

/* ---------- Approche : split ---------- */
.split { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split__media { grid-column: 1 / 6; }
.split__copy { grid-column: 6 / 13; }
.split__media .frame img { aspect-ratio: 4 / 5; }
.split__copy h2 { font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem); line-height: 1.1; }
.split__lede { margin-top: 1.25rem; color: var(--ink-2); font-size: 1.1rem; max-width: 56ch; text-wrap: pretty; }
.steps { margin-top: 2.5rem; border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.steps h3 { font-size: 1.4rem; line-height: 1.1; }
.steps p { color: var(--ink-2); font-size: var(--text-small); text-wrap: pretty; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .split__media, .split__copy { grid-column: 1 / -1; }
  .split__media .frame img { aspect-ratio: 4 / 3; }
  .steps li { grid-template-columns: 1fr; gap: .35rem; }
}

/* ---------- Contact ---------- */
.contact {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 4vw, 4rem); padding: clamp(2rem, 5vw, 4.5rem);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--deep) 0%, var(--deep-2) 100%); color: var(--on-green);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.contact__copy { grid-column: 1 / 6; }
.contact__form { grid-column: 7 / 13; }
.contact__lede { margin-top: 1.25rem; color: var(--on-green-2); font-size: 1.1rem; max-width: 46ch; text-wrap: pretty; }
.next { margin-top: 2.5rem; }
.next h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.next ol { counter-reset: etape; margin-top: 1rem; display: grid; gap: .9rem; }
.next li { display: grid; grid-template-columns: 2rem 1fr; gap: .9rem; align-items: center; color: var(--on-green-2); }
.next li::before {
  counter-increment: etape; content: counter(etape);
  width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .10); color: var(--on-green); font-weight: 600; font-size: var(--text-label);
}
.direct { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .14); display: grid; gap: .5rem; }
.direct p { color: var(--on-green-2); }
.direct a {
  display: inline-flex; align-items: center; gap: .6rem; justify-self: start; max-width: 100%; overflow-wrap: anywhere;
  color: var(--on-green); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid transparent; transition: border-color var(--t-fast) var(--ease);
}
@media (hover: hover) { .direct a:hover { border-bottom-color: currentColor; } }
.direct a i { font-size: 1.15rem; }
@media (max-width: 1000px) {
  .contact { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .contact__copy, .contact__form { grid-column: 1 / -1; }
}

/* Carte formulaire (double bordure) */
.card { padding: 8px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.card__inner {
  background: var(--surface); color: var(--ink);
  border-radius: calc(var(--r-lg) - 8px); padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
@media (prefers-color-scheme: dark) { .card__inner { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); } }

/* ---------- Formulaire ---------- */
.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .45rem; }
.field label { font-weight: 600; font-size: var(--text-small); }
.field .optional { font-weight: 400; color: var(--ink-3); }
.field .hint { font-size: var(--text-fine); color: var(--ink-3); }
.field .error { display: none; font-size: var(--text-fine); font-weight: 500; color: var(--error); }
.field.is-invalid .error { display: block; }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem;
  border-radius: var(--r-sm); border: 1px solid var(--field-border);
  background: var(--bg); color: var(--ink);
  transition: border-color var(--t-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 7rem; }
/* Un vrai contour plutôt qu'une ombre : le contraste élevé de Windows efface les ombres */
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus);
}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--error); }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer; }
.select select:invalid { color: var(--ink-3); }
.select i { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-3); font-size: 1.05rem; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.form__alert {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .9rem 1rem; border-radius: var(--r-sm);
  background: var(--error-bg); color: var(--error); font-size: var(--text-small); font-weight: 500;
  overflow-wrap: anywhere;   /* une adresse courriel longue ne déborde pas sur un écran étroit */
  animation: rise-in var(--t-base) var(--ease);
}
.form__alert i { font-size: 1.2rem; flex: none; }
.form__consent { font-size: var(--text-fine); color: var(--ink-3); text-align: center; }
.form__success { display: grid; gap: .75rem; padding: 1rem 0; animation: rise-in .45s var(--ease); }
.form__success-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; background: var(--tint-strong); color: var(--accent-text); }
.form__success h3 { font-size: 1.7rem; line-height: 1.1; }
.form__success p { color: var(--ink-2); }

/* ---------- Pied de page ---------- */
.footer { padding: 4rem 0 2rem; border-top: 1px solid var(--line); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 2.5rem; }
.footer__brand a { display: inline-block; }
.footer__logo { width: 210px; height: auto; display: block; }
.footer__brand p { margin-top: 1.25rem; color: var(--ink-2); max-width: 36ch; }
.footer h3 { font-family: var(--font-body); font-size: var(--text-small); font-weight: 600; margin-bottom: .35rem; letter-spacing: 0; }
.footer__nav, .footer__contact { display: grid; gap: .45rem; align-content: start; }
.footer__nav a, .footer__contact a, .footer__contact p {
  display: inline-flex; align-items: center; gap: .55rem; justify-self: start;
  padding: .3rem 0; max-width: 100%; overflow-wrap: anywhere;
  color: var(--ink-2); text-decoration: none; transition: color var(--t-fast) var(--ease);
}
@media (hover: hover) { .footer__nav a:hover, .footer__contact a:hover { color: var(--ink); text-decoration: underline; } }
.footer__contact i { font-size: 1.1rem; color: var(--ink-3); }
.footer__bottom {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  font-size: var(--text-fine); color: var(--ink-3);
}
.footer__bottom a { color: var(--ink-3); }
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Apparition au défilement ----------
   Animation (et non transition) : une fois jouée, elle ne laisse rien dans la cascade et
   l'élément retrouve ses propres transitions de survol. La classe .js n'est posée que par
   le module JavaScript des apparitions : sans lui, tout reste visible. */
@keyframes reveal-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.js .reveal:not(.is-visible) { opacity: 0; }
.js .reveal.is-visible { animation: reveal-in .8s var(--ease) calc(var(--i, 0) * 80ms) backwards; }

/* ---------- Note sous les soins ---------- */
.note {
  display: flex; gap: .85rem; align-items: flex-start;
  margin-top: clamp(2rem, 4vw, 3rem); padding: 1.1rem 1.35rem; max-width: 64ch;
  border-radius: var(--r-md); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2); text-wrap: pretty;
}
.note i { flex: none; margin-top: .15rem; font-size: 1.35rem; color: var(--accent-text); }

/* ---------- Parcours : trois étapes sur fond profond ---------- */
.path { counter-reset: etape; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.path li { padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .16); }
.path li::before {
  counter-increment: etape; content: counter(etape);
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 1.1rem; border-radius: 50%;
  background: var(--brand-soft); color: var(--deep-2);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
}
.path h3 { font-size: 1.45rem; line-height: 1.15; }
.path p { margin-top: .7rem; color: var(--on-green-2); text-wrap: pretty; }
.path__cta { margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 900px) { .path { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } }

/* ---------- Frais de déplacement : quatre paliers ---------- */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.tiers li {
  display: grid; gap: .5rem; align-content: start;
  padding: 1.5rem 1.5rem 1.6rem; border-radius: var(--r-lg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.tiers__km { font-size: var(--text-label); font-weight: 600; color: var(--ink-3); }
.tiers__fee {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1.1; text-wrap: balance;
}
.tiers li:first-child .tiers__fee { color: var(--accent-text); }
/* Note sur le matériel : encadré posé sur la section teintée, texte principal et mention en gras */
.note--surface { margin-top: 1.5rem; background: var(--surface); color: var(--ink); font-size: 1.05rem; }
.note strong { font-weight: 600; color: var(--accent-text); }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .tiers { grid-template-columns: 1fr; } }

/* ---------- Situation : nouveau client ou déjà client (onglets du formulaire) ---------- */
.seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 1.5rem;
  border-radius: 999px; background: var(--tint); box-shadow: inset 0 0 0 1px var(--line);
}
.seg__btn {
  min-height: 46px; padding: .5rem 1rem; border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-2); font-weight: 600; font-size: var(--text-small); line-height: 1.2; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.seg__btn[aria-selected="true"] {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .14), inset 0 0 0 1px var(--line);
}
@media (hover: hover) { .seg__btn:not([aria-selected="true"]):hover { color: var(--ink); } }
.form__intro { color: var(--ink-2); font-size: var(--text-small); text-wrap: pretty; }

/* ---------- Groupes de cases à cocher ---------- */
.field--group { margin: 0; padding: 0; border: 0; min-width: 0; }
.field--group legend { padding: 0; margin-bottom: .6rem; font-weight: 600; font-size: var(--text-small); }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; }
.checks--row { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.check {
  display: flex; align-items: center; gap: .65rem; min-height: 44px; padding: .5rem .8rem;
  border-radius: var(--r-sm); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--text-small); line-height: 1.3; cursor: pointer;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.check input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--brand); cursor: pointer; }
.check:has(input:checked) { background: var(--tint); box-shadow: inset 0 0 0 1px var(--brand); }
@media (hover: hover) { .check:hover { background: var(--tint); } }
@media (max-width: 600px) { .checks { grid-template-columns: 1fr; } }

/* ---------- Logo de la cliente : entier et tel quel ; en mode sombre, posé sur un fond clair
   plutôt que recoloré (décision de Mathieu, 1er octobre 2026) ---------- */
@media (prefers-color-scheme: dark) {
  .brand__logo, .footer__logo { background: #FBF7F7; border-radius: var(--r-sm); }
  .brand__logo { padding: 4px 7px; }
  .footer__logo { padding: 10px 14px; }
}

/* ---------- Mentions à confirmer (visibles pendant la construction seulement) ---------- */
mark.todo { padding: .05em .35em; border-radius: 4px; background: #FFF1A8; color: #3A2F00; }
@media (prefers-color-scheme: dark) { mark.todo { background: #5A4A00; color: #FFF1A8; } }

/* ---------- Utilitaires ---------- */
[hidden] { display: none !important; }

/* ---------- Mouvement réduit ----------
   On retire les animations décoratives mais on garde les changements d'état courts (couleur au
   survol, focus), utiles comme retour d'information. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; animation: none; }
  .form__alert, .form__success { animation: none; }
  .menu, .menu__inner > a { transition: none; }
  .svc__media img, .work__pic img, .btn, .btn__icon { transition: none; }
  .svc:hover .svc__media img, .work__grid figure:hover .work__pic img, .btn:hover .btn__icon { transform: none; }
}