/* =====================================================================
   NovéoForma — style.css (v2 multi-pages)

   ┌───────────────────────────────────────────────────────────────┐
   │  1. THÈME — C'EST ICI (ET SEULEMENT ICI) QU'ON CHANGE LE LOOK │
   └───────────────────────────────────────────────────────────────┘
   2. @font-face Nourd   3. Base    4. Utilitaires   5. En-tête/nav
   6. Fil d'Ariane       7. Héros   8. Composants    9. Formulaire
   10. Pied de page      11. Responsive              12. A11y/motion

   Principe : les composants n'utilisent JAMAIS une couleur en dur.
   Ils référencent des RÔLES (--c-primary, --c-accent-1…). Pour
   rethémer tout le site, on ne touche que le bloc THÈME ci-dessous.
   ===================================================================== */

/* ============ 1. THÈME ============ */
:root {
  /* --- Palette brute de la charte graphique --- */
  --pastel-peche:   #EB9D7C;
  --pastel-bleu:    #77B7FF;
  --pastel-sauge:   #8DB6AD;
  --pastel-rose:    #E8B6BC;
  --pastel-lavande: #B79DD5;
  --pastel-jaune:   #F1EFB3;

  /* --- RÔLES : la couleur principale du site --- */
  --c-primary:        var(--pastel-bleu);
  --c-primary-strong: #5AA5F8;   /* survols, textes colorés lisibles */
  --c-primary-soft:   #EAF3FE;   /* fonds doux */

  /* --- RÔLES : accents décoratifs cyclés (pastilles, filets) --- */
  --c-accent-1: var(--pastel-peche);   --c-accent-1-soft: #FCEEE6;
  --c-accent-2: var(--pastel-sauge);   --c-accent-2-soft: #EDF3F1;
  --c-accent-3: var(--pastel-lavande); --c-accent-3-soft: #F3EEF9;
  --c-accent-4: var(--pastel-rose);    --c-accent-4-soft: #FBEFF1;

  /* --- Neutres (indispensables : aucun pastel n'est lisible en texte) --- */
  --ink:    #2B2A33;
  --muted:  #6D6A79;
  --line:   #D8E6F5;
  --bg:       #FFFFFF;
  --bg-alt:   #F4F8FE;
  --bg-cream: #FCF4EF;   /* fond crème de la charte */

  /* --- Typographie --- */
  /* Outfit en tête : c'est la police de titres de la v1.6.2, retenue par
     préférence. Nourd reste en repli de marque. */
  --font-display: "Outfit", "Nourd", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-eyebrow: 0.8125rem;
  --fs-small:   0.9rem;
  --fs-body:    1.0625rem;
  --fs-lead:    clamp(1.125rem, 1rem + 0.55vw, 1.375rem);
  --fs-h3:      clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-h2:      clamp(1.9rem, 1.35rem + 2.4vw, 3rem);
  --fs-h1:      clamp(2.5rem, 1.7rem + 3.8vw, 4.4rem);

  /* --- Espacements & formes --- */
  --space-section: clamp(4.5rem, 3rem + 6vw, 8rem);
  --wrap-max: 1180px;
  --radius: 22px;
  --radius-sm: 12px;

  /* --- Ombres & transitions --- */
  --shadow-sm: 0 2px 8px rgba(43, 42, 51, .05);
  --shadow-md: 0 22px 45px -25px rgba(43, 42, 51, .22);
  --transition: 260ms cubic-bezier(.4, 0, .2, 1);
}

/* ============ 2a. POLICE POPPINS (auto-hébergée, .woff2) ============
   Auto-hébergée volontairement : aucun appel aux serveurs Google Fonts,
   donc aucune transmission d'adresse IP à un tiers (conformité CNIL).
   Licence SIL Open Font License 1.1 — auto-hébergement autorisé.
   Sous-ensemble latin + latin étendu : ~9 Ko par graisse.
   ==================================================================== */
@font-face { font-family:"Poppins"; src:url("/assets/fonts/Poppins-Light.woff2") format("woff2");   font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("/assets/fonts/Poppins-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("/assets/fonts/Poppins-Medium.woff2") format("woff2");  font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("/assets/fonts/Poppins-Bold.woff2") format("woff2");    font-weight:600 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("/assets/fonts/Poppins-Italic.woff2") format("woff2");  font-weight:400; font-style:italic; font-display:swap; }

/* ============ 2b. POLICE OUTFIT (auto-hébergée, woff2 variable) ============
   Police des titres. Auto-hébergée pour les mêmes raisons que Poppins :
   aucun appel aux serveurs Google Fonts, aucune IP visiteur transmise.
   Licence SIL Open Font License 1.1. Fichier variable unique : une seule
   requête couvre les graisses 400 à 800 (~32 Ko latin + 15 Ko latin étendu).
   ========================================================================= */
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/Outfit-Variable-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  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: "Outfit";
  src: url("/assets/fonts/Outfit-Variable-latin-ext.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  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;
}

/* ============ 2. POLICE NOURD (auto-hébergée, .ttf) ============
   Conservée comme repli de marque après Outfit (voir --font-display).
   ================================================================ */
@font-face { font-family:"Nourd"; src:url("/assets/fonts/Nourd-Light.ttf") format("truetype");    font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Nourd"; src:url("/assets/fonts/Nourd-Regular.ttf") format("truetype");  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Nourd"; src:url("/assets/fonts/Nourd-Medium.ttf") format("truetype");   font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Nourd"; src:url("/assets/fonts/Nourd-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Nourd"; src:url("/assets/fonts/Nourd-Bold.ttf") format("truetype");     font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Nourd"; src:url("/assets/fonts/Nourd-ExtraBold.ttf") format("truetype");font-weight:800; font-style:normal; font-display:swap; }

/* ============ 3. BASE ============ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* compense le header sticky sur toutes les ancres */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { color: var(--muted); }
strong { color: var(--ink); font-weight: 600; }

/* ============ 4. UTILITAIRES ============ */
.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-primary-strong);
  margin-bottom: 0.9rem;
}
.eyebrow--light { color: var(--c-primary); }

.lead { font-size: var(--fs-lead); color: var(--ink); }

/* Micro-texte sous un CTA */
.cta-note {
  font-size: var(--fs-small);
  max-width: 46ch;
  margin-top: 0.85rem;
}

/* Badge (ex. « En préparation ») */
.badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-primary-strong);
  background: var(--c-primary-soft);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  margin-bottom: 0.9rem;
}

/* --- Boutons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.975rem;
  padding: 0.72rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition),
              box-shadow var(--transition), border-color var(--transition),
              color var(--transition);
}
.btn--lg { padding: 0.95rem 1.9rem; font-size: 1.0625rem; }

.btn--primary { background: var(--c-primary); color: var(--ink); }
.btn--primary:hover { background: var(--c-primary-strong); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--c-primary); background: var(--c-primary-soft); }

/* ============ 5. EN-TÊTE & NAVIGATION ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
  gap: 1rem;
}
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
/* Hauteur imposée, largeur libre : le logo garde son ratio natif (1500x411)
   quelles que soient les dimensions déclarées dans le HTML. */
.brand__logo { display: block; width: auto; height: 44px; }
.brand__logo--mini { display: none; }

.nav__list {
  list-style: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.nav__link {
  font-weight: 500;
  font-size: 0.975rem;
  color: var(--ink);
  position: relative;
  padding-block: 0.25rem;
  transition: color var(--transition);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--c-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav__link:hover { color: var(--c-primary-strong); }
.nav__link:hover::after { transform: scaleX(1); }
/* Page active : soulignement permanent */
.nav__link[aria-current="page"] { color: var(--c-primary-strong); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle__bar {
  height: 2px; width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* ============ 6. FIL D'ARIANE ============ */
.breadcrumb { padding-top: 1.25rem; }
.breadcrumb ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--fs-small);
  color: var(--muted);
}
.breadcrumb li:not(:last-child)::after { content: "›"; margin-left: 0.5rem; color: var(--line); }
.breadcrumb a { color: var(--muted); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--c-primary-strong); }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; }

/* ============ 7. HÉROS ============ */
/* Héros de la page d'accueil */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  /* Illustration en fond photographique : deux couches superposées.
     Au-dessus, un voile crème qui décroît de gauche à droite —
     opaque sous le texte (garantit la lisibilité), transparent sur
     les personnes à droite (l'image reste visible telle quelle).
     En dessous, l'illustration en background-size: cover, alignée à
     droite pour ne pas décadrer les personnes lors du recadrage. */
  background-color: var(--bg-cream);
  background-image:
    linear-gradient(
      to right,
      rgba(252, 244, 239, 0.92) 0%,
      rgba(252, 244, 239, 0.82) 35%,
      rgba(252, 244, 239, 0.35) 62%,
      rgba(252, 244, 239, 0)   85%
    ),
    url("/assets/img/hero-illustration.webp");
  background-repeat: no-repeat, no-repeat;
  background-position: center, right center;
  background-size: 100% 100%, cover;
}
.hero__inner {
  position: relative;
  z-index: 1;
}
.hero__content { width: 100%; max-width: none; }
.hero__title { margin-bottom: 1.4rem; max-width: 30ch; }
.hero__title em { font-style: normal; color: var(--c-primary-strong); }
.hero__lead { max-width: 60ch; margin-bottom: 1rem; }
.hero__text { max-width: 60ch; margin-bottom: 1rem; }
.hero__actions { margin-top: 1.75rem; margin-bottom: 0.25rem; }

/* Desktop : on cale la largeur du bloc de contenu sur la zone opaque
   du voile en fond du hero. Sans cette contrainte, le lead et les
   paragraphes (jusqu'à 60ch) descendent dans la partie transparente
   et le texte semble se poser sur les personnes de l'illustration. */
@media (min-width: 900px) {
  .hero__content { max-width: 55%; }
}
/* Sous 900 px, l'illustration est retirée. Le voile de ce hero est
   horizontal — opaque à gauche pour le texte, transparent à droite pour
   l'image — et ce découpage n'a pas de sens sur une colonne étroite.
   Une variante à dégradé vertical a été essayée (commit 6fac239) puis
   abandonnée : le rendu ne convainquait pas. Fond crème uni. */
@media (max-width: 899px) {
  .hero { background-image: none; }
}

/* Points de réassurance (remplacent les anciens chiffres) */
.hero__points {
  list-style: none;
  padding: 1.5rem 0 0;
  margin-top: 2.25rem;
  border-top: 1px solid var(--line);
  display: grid;
  /* Se répartit sur toute la largeur du hero : 4 colonnes en grand écran,
     2 en tablette, 1 en mobile — sans média query dédiée. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.7rem 2rem;
}
.hero__points li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--fs-small);
  color: var(--ink);
}
.hero__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 11px; height: 6px;
  border-left: 2.5px solid var(--point-color, var(--c-primary));
  border-bottom: 2.5px solid var(--point-color, var(--c-primary));
  transform: rotate(-45deg);
}

/* Héros des pages intérieures */
.page-hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  background: var(--bg-cream);
}
.page-hero h1 { margin-bottom: 1rem; max-width: 22ch; }
.page-hero .lead { max-width: 60ch; }

/* Variante illustrée : même principe que le hero de l'accueil.
   Deux couches : au-dessus un voile crème qui décroît de gauche a
   droite (opaque sous le texte, transparent sur les personnes),
   en dessous l'illustration en background-size: cover, alignée a
   droite. Le contenu est contraint à 55 % sur desktop pour rester
   dans la zone opaque du voile. Sous 900 px, illustration retiree.
   Chaque page qui utilise cette variante fournit sa propre image
   via une variable CSS --page-hero-image. */
.page-hero--illustration {
  position: relative;
  overflow: hidden;
  /* Le voile reste presque opaque jusqu'à 45 %, c'est-à-dire au-delà de
     la largeur maximale du texte (46 %, voir plus bas). Sans cette marge,
     les motifs de l'illustration transparaissent derrière les dernières
     lettres des titres longs et gênent la lecture. */
  background-image:
    linear-gradient(
      to right,
      rgba(252, 244, 239, 0.97) 0%,
      rgba(252, 244, 239, 0.94) 45%,
      rgba(252, 244, 239, 0.55) 64%,
      rgba(252, 244, 239, 0)    85%
    ),
    var(--page-hero-image);
  background-repeat: no-repeat, no-repeat;
  background-position: center, right center;
  background-size: 100% 100%, cover;
}
/* Sur desktop, on cale la largeur du contenu du page-hero illustré
   sur la zone opaque du voile crème — comme pour .hero__content.
   46 % : le texte s'arrête avant que le voile ne commence à s'effacer
   (45 %), donc avant que l'illustration ne devienne visible derrière. */
@media (min-width: 900px) {
  .page-hero--illustration h1,
  .page-hero--illustration .lead,
  .page-hero--illustration .eyebrow { max-width: 46%; }
}
/* Même parti pris que le hero de l'accueil sous 900 px : illustration
   retirée, fond crème uni. */
@media (max-width: 899px) {
  .page-hero--illustration { background-image: none; background-color: var(--bg-cream); }
}

/* Panneau signature (parcours en 5 étapes) */
.panel-card {
  background: linear-gradient(165deg, #fff 0%, var(--c-primary-soft) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.85rem;
  box-shadow: var(--shadow-md);
}
.panel-card__label {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-primary-strong);
  font-weight: 600;
}

/* ============ 8. COMPOSANTS DE SECTION ============ */
.section { padding-block: var(--space-section); }
.section--alt { background: var(--bg-alt); }
/* Fond crème de la charte — appliqué aux sections désignées. */
.section--cream { background: var(--bg-cream); }

.section__head { max-width: 680px; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head h2 { margin-top: 0.25rem; }

.section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.section__body > * + * { margin-top: 1rem; }
.section__cta { margin-top: 1.75rem; }

/* Liste « check » */
.checklist { list-style: none; padding: 0; display: grid; gap: 0.9rem; }
.checklist li { position: relative; padding-left: 2rem; color: var(--ink); }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.4em;
  width: 12px; height: 7px;
  border-left: 2.5px solid var(--marker-color, var(--c-primary));
  border-bottom: 2.5px solid var(--marker-color, var(--c-primary));
  transform: rotate(-45deg);
}
.checklist--2col { grid-template-columns: 1fr 1fr; gap: 0.9rem 2.5rem; }

/* Liste à puces rondes (énumérations neutres) */
.dotlist { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.dotlist li { position: relative; padding-left: 1.4rem; color: var(--muted); }
.dotlist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--marker-color, var(--c-primary));
}
.dotlist li:nth-child(5n+1) { --marker-color: var(--pastel-peche); }
.dotlist li:nth-child(5n+2) { --marker-color: var(--pastel-bleu); }
.dotlist li:nth-child(5n+3) { --marker-color: var(--pastel-sauge); }
.dotlist li:nth-child(5n+4) { --marker-color: var(--pastel-lavande); }
.dotlist li:nth-child(5n+5) { --marker-color: var(--pastel-rose); }
/* Variante mono-couleur : toutes les puces en bleu de la charte.
   On prend --c-primary-strong (#5AA5F8) plutôt que --c-primary (le pastel
   #77B7FF), trop délavé sur une puce de 8 px. La règle `:nth-child(n)` a
   la même spécificité que les règles cycliques ci-dessus mais arrive plus
   tard dans la cascade — elle gagne donc. */
.dotlist--mono li:nth-child(n) { --marker-color: var(--c-primary-strong); }
.dotlist strong { color: var(--ink); }

/* Callout (encadré) */
.callout {
  background: var(--c-primary-soft);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--radius-sm);
  padding: 1.4rem 1.6rem;
  margin-top: 1.5rem;
}
.callout__title { font-weight: 600; color: var(--ink); margin-bottom: 0.4rem; }
.callout--center {
  max-width: 680px;
  margin-inline: auto;
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
  border-left: none;
  border-top: 4px solid var(--c-primary);
}

/* Variante « point de vigilance » (ajout v3) */
.callout--warn {
  background: #FDF6E3;
  border-left-color: var(--pastel-peche);
}

/* Rangée de boutons côte à côte (ajout v3) */
.section__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.75rem;
}
.section__cta-row .btn { margin-top: 0; }

/* Cartes */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.9rem 1.6rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.card__title { margin-bottom: 0.6rem; }
.card__title::before {
  content: "";
  display: block;
  width: 30px; height: 4px;
  border-radius: 2px;
  margin-bottom: 1rem;
  background: var(--c-primary);
}
.cards .card:nth-child(3n+1) .card__title::before { background: var(--c-primary); }
.cards .card:nth-child(3n+2) .card__title::before { background: var(--c-accent-2); }
.cards .card:nth-child(3n+3) .card__title::before { background: var(--c-accent-3); }
.card__meta { font-size: var(--fs-small); margin-top: 1rem; }

.step:nth-child(5):hover { border-color: var(--c-accent-3); }
.step--goal { background: var(--c-accent-3-soft); border-color: transparent; }

/* Bloc portrait court (accueil) + photo (à propos) */
.profile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-top: 2rem;
}
.profile__photo {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--c-primary-soft);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--c-primary-strong);
  overflow: hidden;
  flex-shrink: 0;
}
.profile__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.profile__photo--lg { width: 128px; height: 128px; font-size: 2rem; }
.profile__name { font-weight: 600; color: var(--ink); }
.profile__role { font-size: var(--fs-small); }

/* Prose (pages À propos, légales, articles) */
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 2.75rem; }
.prose h3 { margin-top: 2rem; }
.prose ul { padding-left: 0; }

/* FAQ (accordéon natif) */
.faq__list {
  max-width: 760px;
  margin-inline: auto;
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: 0.9rem;
}
.faq__item {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.4rem;
  transition: border-color var(--transition);
}
.faq__item:hover, .faq__item[open] { border-color: var(--c-primary); }
.faq__question {
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2rem;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: "";
  position: absolute;
  right: 0.4rem; top: 0.35em;
  width: 9px; height: 9px;
  border-right: 2px solid var(--c-primary-strong);
  border-bottom: 2px solid var(--c-primary-strong);
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.faq__item[open] .faq__question::after { transform: rotate(225deg); top: 0.55em; }
.faq__answer { margin-top: 0.85rem; }

/* Bandeau CTA final */
.cta { background: var(--ink); color: #fff; }
.cta__inner { padding-block: var(--space-section); text-align: center; max-width: 680px; }
.cta__title { color: #fff; margin-bottom: 1rem; }
.cta__text { color: rgba(255, 255, 255, 0.75); margin-bottom: 2rem; }

/* ============ 9. FORMULAIRE ============ */
.form {
  display: grid;
  gap: 1.2rem;
  max-width: 640px;
  margin-top: 2rem;
}
.form__field { display: grid; gap: 0.4rem; }
.form__label { font-weight: 500; color: var(--ink); font-size: 0.975rem; }
.form__input, .form__select, .form__textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.form__input:focus, .form__select:focus, .form__textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px var(--c-primary-soft);
}
.form__textarea { min-height: 140px; resize: vertical; }
.form__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: var(--fs-small);
}
.form__consent input { margin-top: 0.3rem; width: 18px; height: 18px; accent-color: var(--c-primary-strong); }
.form__note { font-size: var(--fs-small); }
.hidden { display: none !important; }

/* ============ 10. PIED DE PAGE ============ */
.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  padding-top: 3.5rem;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
.footer__brand { max-width: 300px; }
.footer__brand p { margin-top: 0.85rem; font-size: var(--fs-small); }
.footer__col h3 {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.footer__col ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.footer__col a { font-size: 0.95rem; color: var(--ink); transition: color var(--transition); }
.footer__col a:hover { color: var(--c-primary-strong); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}
.footer__bottom p { color: var(--muted); }
.footer__credit { margin-left: auto; text-align: right; }

/* ============ 11. RESPONSIVE ============ */
@media (max-width: 900px) {
  .section__grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .checklist--2col { grid-template-columns: 1fr; }
  .hero__points { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .brand__logo--full { display: none; }
  .brand__logo--mini { display: block; }

  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    inset: 74px 0 auto 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    transform: translateY(-120%);
    transition: transform var(--transition);
    box-shadow: var(--shadow-md);
  }
  .nav.is-open { transform: translateY(0); }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
  }
  .nav__link { display: block; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
  .nav__link::after { display: none; }
  .nav__cta-item { margin-top: 1rem; }
  .nav__cta-item .btn { width: 100%; }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 520px) {
  .step { grid-template-columns: 1fr; gap: 0.75rem; }
  .hero__actions .btn { width: 100%; }
  .profile { grid-template-columns: 1fr; text-align: center; }
  .profile__photo { margin-inline: auto; }
}

/* ============ 12. ACCESSIBILITÉ / MOTION ============ */
:focus-visible {
  outline: 3px solid var(--c-primary-strong);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--ink);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  z-index: 100;
  transition: top var(--transition);
}
.skip-link:focus { top: 1rem; }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============ 13. MESSAGE D'ERREUR DE FORMULAIRE (v3) ============ */
.form__erreur {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  background: #FDECEC;
  border-left: 4px solid #D26A6A;
  color: #7A2E2E;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* =====================================================================
   Carrousel (recommandations et autres blocs à défilement horizontal)
   Fonctionne sans JS : scroll-snap horizontal + boutons prev/next
   ajoutés en JS. Sur mobile, un simple swipe suffit à naviguer.
   ===================================================================== */
.carousel {
  position: relative;
  margin-top: 1.25rem;
}
.carousel__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;                     /* Firefox : masquer la barre */
  -webkit-overflow-scrolling: touch;
  padding: 0.35rem 0.25rem 1rem;             /* espace pour l'ombre des cards */
  scroll-padding-inline: 0.25rem;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible {
  outline: 2px solid var(--c-primary-strong);
  outline-offset: 4px;
  border-radius: var(--radius);
}
.carousel__item {
  flex: 0 0 min(88%, 460px);
  scroll-snap-align: center;
  margin: 0;                                 /* neutralise le margin des .card */
}
@media (min-width: 900px) {
  .carousel__item { flex-basis: min(46%, 480px); }
}

/* Contrôles */
.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.carousel__btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 1.2rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.carousel__btn:hover {
  background: var(--c-primary-soft);
  border-color: var(--c-primary);
}
.carousel__btn:active { transform: scale(0.95); }
.carousel__btn:focus-visible {
  outline: 2px solid var(--c-primary-strong);
  outline-offset: 2px;
}
.carousel__dots {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.carousel__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s, width 0.2s;
}
.carousel__dot.is-active {
  background: var(--c-primary-strong);
  width: 22px;
  border-radius: 999px;
}

/* =====================================================================
   Calendrier de réservation (Google Agenda)
   Chargé avec la page. Le renvoi vers le formulaire reste affiché en
   permanence sous le calendrier : un visiteur qui n'y trouve aucun
   créneau ne doit pas avoir à remonter pour trouver l'alternative.
   ===================================================================== */
.agenda {
  max-width: 880px;
  margin-inline: auto;
  margin-top: 2rem;
}
.agenda__cadre {
  display: block;
  width: 100%;
  min-height: 680px;
  border: 0;
  border-radius: var(--radius);
  background: #fff;
}
.agenda__note {
  font-size: var(--fs-small);
  text-align: center;
  margin-top: 1.25rem;
}
.agenda__note a {
  color: var(--c-primary-strong);
  text-decoration: underline;
  font-weight: 600;
}

/* =====================================================================
   Domaines d'intervention (grille de pictogrammes)
   Remplace une énumération de sept lignes, que l'œil saute, par une
   grille qu'il balaie. Pictogrammes SVG écrits à la main : aucune
   bibliothèque, aucun appel externe.
   ===================================================================== */
.domaines__intro { margin-bottom: 1.5rem; }
.domaines {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
}
/* Même gabarit que .card — fond blanc, grand rayon, élévation au survol —
   mais la couleur de la charte passe par la bordure de la tuile entière
   plutôt que par une barre au-dessus de l'icône. */
.domaine {
  background: var(--bg);
  border: 1.5px solid var(--marker-color, var(--c-primary));
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  transition: transform var(--transition), box-shadow var(--transition);
}
.domaine:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.domaine__icone {
  display: block;
  width: 30px; height: 30px;
  flex: none;
  margin-bottom: 0.85rem;
  color: var(--marker-color, var(--c-primary-strong));
}
.domaine__libelle {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
}
/* Une couleur de la charte par domaine, comme les points du hero. */
.domaine:nth-child(6n+1) { --marker-color: var(--pastel-peche); }
.domaine:nth-child(6n+2) { --marker-color: var(--pastel-bleu); }
.domaine:nth-child(6n+3) { --marker-color: var(--pastel-sauge); }
.domaine:nth-child(6n+4) { --marker-color: var(--pastel-lavande); }
.domaine:nth-child(6n+5) { --marker-color: var(--pastel-rose); }
.domaine:nth-child(6n+6) { --marker-color: var(--c-primary-strong); }

/* =====================================================================
   Frise du cycle Qualiopi
   Trois étapes reliées par un trait qui se dessine à l'entrée dans le
   champ. L'animation s'accroche à .is-visible, déjà posée par
   js/script.js § 2 : aucun JavaScript supplémentaire.
   ===================================================================== */
.frise {
  list-style: none;
  padding: 0;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: 2rem;
  position: relative;
}
.frise__etape { position: relative; padding-left: 2.5rem; }
.frise__point {
  position: absolute;
  left: 0; top: 0.35rem;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--etape-couleur);
  box-shadow: 0 0 0 4px var(--bg-cream);
  z-index: 1;
}
.frise__moment {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-primary-strong);
  margin-bottom: 0.3rem;
}
.frise__titre { margin-bottom: 0.45rem; }
.frise__texte { max-width: 42ch; }

.frise__etape:nth-child(1) { --etape-couleur: var(--pastel-peche); }
.frise__etape:nth-child(2) { --etape-couleur: var(--pastel-bleu); }
.frise__etape:nth-child(3) { --etape-couleur: var(--pastel-sauge); }

/* Trait de liaison — vertical sur mobile, horizontal à partir de 760 px. */
.frise::before {
  content: "";
  position: absolute;
  left: 7px; top: 0.35rem;
  width: 2px; height: 100%;
  background: var(--line);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 900ms ease-out;
}
.frise.is-visible::before { transform: scaleY(1); }

@media (min-width: 760px) {
  .frise { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .frise__etape { padding-left: 0; padding-top: 2.75rem; }
  .frise__point { left: 0; top: 0; }
  .frise::before {
    left: 0; top: 7px;
    width: 100%; height: 2px;
    transform: scaleX(0);
    transform-origin: left;
  }
  .frise.is-visible::before { transform: scaleX(1); }
}

/* Les étapes apparaissent l'une après l'autre, dans le sens de lecture. */
.frise__etape {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}
.frise.is-visible .frise__etape { opacity: 1; transform: none; }
.frise.is-visible .frise__etape:nth-child(1) { transition-delay: 250ms; }
.frise.is-visible .frise__etape:nth-child(2) { transition-delay: 500ms; }
.frise.is-visible .frise__etape:nth-child(3) { transition-delay: 750ms; }

/* Accessibilité : aucun mouvement si le visiteur l'a demandé au système.
   Le contenu reste évidemment entièrement visible. */
@media (prefers-reduced-motion: reduce) {
  .frise::before,
  .frise.is-visible::before { transform: none; transition: none; }
  .frise__etape,
  .frise.is-visible .frise__etape {
    opacity: 1; transform: none; transition: none; transition-delay: 0s;
  }
}

/* Variante pêche du bouton secondaire (#EB9D7C, charte).
   La couleur passe par la bordure et le fond au survol, pas par le
   texte : #EB9D7C sur blanc plafonne à 2,3:1 de contraste, très en
   dessous des 4,5:1 exigés pour du texte par le WCAG AA. Le libellé
   reste donc en --ink, lisible pour tout le monde. */
.btn--peche { border-color: var(--pastel-peche); }
.btn--peche:hover {
  border-color: var(--pastel-peche);
  background: var(--c-accent-1-soft);
}