@import "fonts.css";

/* =========================================================================
   Emma Arnoux — Thérapeute · Feuille de style unique
   1. Tokens          2. Reset / base      3. Layout
   4. En-tête          5. Pied de page      6. Composants
   7. Styles de page   8. Utilitaires       9. Media queries
   10. Réduction des animations
   ========================================================================= */

/* 1. TOKENS ============================================================== */
:root {
  /* Palette */
  --ivoire: #faf7f2;
  --rose: #eeddd9;
  --rose-fonce: #e4c9c2;
  --sauge: #dde5dc;
  --sauge-fonce: #c9d6c8;
  --mauve: #c7b8ca;
  --mauve-clair: #ded3e0;
  --prune: #402e40;
  --prune-clair: #6b5169;
  --prune-hover: #35243480;
  --prune-hover-plein: #574055;

  /* Accent chaleureux (dérivé du blond des illustrations) */
  --or: #c08a45;
  --or-fonce: #a6742f;
  --or-clair: #edd8b4;
  --or-doux: #f6ecdc;

  --fond: var(--ivoire);
  --texte: var(--prune);
  --texte-doux: #574255;

  /* Typographie */
  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --pas-1: 0.875rem;
  --pas-2: 1rem;
  --pas-3: 1.125rem;
  --pas-4: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  --pas-5: clamp(1.5rem, 1.2rem + 1.5vw, 2.15rem);
  --pas-6: clamp(1.9rem, 1.5rem + 2vw, 2.9rem);
  --pas-7: clamp(2.15rem, 1.7rem + 2.4vw, 3.2rem);

  /* Espacements */
  --esp-1: 0.5rem;
  --esp-2: 0.75rem;
  --esp-3: 1rem;
  --esp-4: 1.5rem;
  --esp-5: 2rem;
  --esp-6: 3rem;
  --esp-7: 4.5rem;
  --esp-8: 6.5rem;

  --conteneur: 72rem;
  --conteneur-etroit: 46rem;
  --rayon: 14px;
  --rayon-s: 8px;
  --duree: 240ms;
  --easing: cubic-bezier(0.22, 1, 0.36, 1);

  --ombre-douce: 0 18px 45px -28px rgba(73, 53, 72, 0.45);
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hauteur-entete, 96px); }

body {
  font-family: var(--sans);
  font-size: var(--pas-3);
  line-height: 1.65;
  color: var(--texte);
  background: var(--fond);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  color: var(--prune);
  text-wrap: balance;
  font-optical-sizing: auto;
}
h1 { font-size: var(--pas-7); letter-spacing: -0.01em; }
h2 { font-size: var(--pas-6); }
h3 { font-size: var(--pas-4); }
h4 { font-size: var(--pas-3); font-weight: 600; }

p { text-wrap: pretty; }
p + p { margin-top: var(--esp-3); }

a { color: var(--prune); text-underline-offset: 0.18em; }

ul, ol { padding-left: 1.15em; }
li + li { margin-top: 0.35em; }

strong { font-weight: 700; }

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

::selection { background: var(--mauve); color: var(--prune); }

/* 3. LAYOUT ============================================================= */
.conteneur {
  width: 100%;
  max-width: var(--conteneur);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 5vw, 2.5rem);
}
.conteneur--etroit { max-width: var(--conteneur-etroit); }

.section { padding-block: clamp(3rem, 8vw, 6rem); position: relative; }
.section--rose { background: var(--rose); }
.section--sauge { background: var(--sauge); }
.section--mauve { background: var(--mauve-clair); }

.section__titre {
  font-size: var(--pas-5);
  margin-bottom: var(--esp-4);
  position: relative;
}
.section__titre::after {
  content: "";
  display: block;
  width: 2.4rem;
  height: 3px;
  margin-top: var(--esp-2);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--or), var(--mauve));
}
.section__titre--centre::after { margin-inline: auto; }
.section__intro { max-width: 42rem; color: var(--texte-doux); font-size: var(--pas-3); }

.pile > * + * { margin-top: var(--esp-4); }
.pile-l > * + * { margin-top: var(--esp-6); }

/* 4. EN-TÊTE =========================================================== */
.entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--ivoire);
  border-bottom: 1px solid color-mix(in srgb, var(--prune) 10%, transparent);
}
body { padding-top: var(--hauteur-entete, 96px); }
.entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: 72px;
  padding-block: var(--esp-2);
}
.logo {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
  text-decoration: none;
  font-family: var(--serif);
}
.logo span:first-child { font-size: 1.4rem; font-weight: 500; letter-spacing: 0.01em; }
.logo span:last-child {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--prune-clair);
  margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: clamp(0.6rem, 2vw, 1.9rem); }
.nav a:not(.bouton) {
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--texte);
  padding: 0.4rem 0;
  position: relative;
}
.nav a:not(.bouton)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--prune);
  transition: right var(--duree) var(--easing);
}
.nav a:not(.bouton):hover::after,
.nav a:not(.bouton):focus-visible::after { right: 0; }
.nav a[aria-current="page"]::after { right: 0; background: var(--mauve); }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid color-mix(in srgb, var(--prune) 16%, transparent);
  border-radius: var(--rayon-s);
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: var(--prune);
  transition: transform var(--duree) var(--easing), opacity var(--duree);
}
.nav-toggle span::before { transform: translateY(-6px); }
.nav-toggle span::after { transform: translateY(6px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: rotate(-45deg); }

.skip-lien {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--prune);
  color: var(--ivoire);
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--rayon-s) 0;
  z-index: 100;
}
.skip-lien:focus { left: 0; }

/* 5. PIED DE PAGE ====================================================== */
.pied {
  background: var(--prune);
  color: color-mix(in srgb, var(--ivoire) 90%, transparent);
  padding-block: var(--esp-7) var(--esp-5);
  font-size: 0.95rem;
}
.pied a { color: inherit; text-decoration-color: color-mix(in srgb, var(--ivoire) 45%, transparent); }
.pied a:hover, .pied a:focus-visible { color: #fff; }
.pied__grille {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--esp-6);
}
.pied__marque { font-family: var(--serif); font-size: 1.5rem; color: var(--ivoire); }
.pied__baseline { letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.72rem; margin-top: var(--esp-2); color: var(--mauve); }
.pied h2 { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mauve); font-family: var(--sans); font-weight: 700; margin-bottom: var(--esp-3); }
.pied ul { list-style: none; padding: 0; }
.pied li + li { margin-top: 0.5rem; }
.pied__bas {
  margin-top: var(--esp-6);
  padding-top: var(--esp-4);
  border-top: 1px solid color-mix(in srgb, var(--ivoire) 18%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--ivoire) 70%, transparent);
}

/* 6. COMPOSANTS ======================================================= */

/* Boutons & liens */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-height: 44px;
  padding: 0.5rem 1.3rem;
  background: var(--prune);
  color: var(--ivoire);
  border: 1px solid var(--prune);
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duree) var(--easing), transform var(--duree) var(--easing), border-color var(--duree);
}
.bouton:hover, .bouton:focus-visible {
  background: var(--prune-hover-plein);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -14px color-mix(in srgb, var(--prune) 50%, transparent);
}
.bouton--secondaire {
  background: transparent;
  color: var(--prune);
  border-color: color-mix(in srgb, var(--prune) 22%, transparent);
}
.bouton--secondaire:hover, .bouton--secondaire:focus-visible {
  background: color-mix(in srgb, var(--prune) 6%, transparent);
  border-color: color-mix(in srgb, var(--prune) 40%, transparent);
  transform: translateY(-1px);
}
.bouton--clair { background: var(--ivoire); color: var(--prune); border-color: var(--ivoire); }
.bouton--clair:hover, .bouton--clair:focus-visible { background: #fff; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
  text-decoration: none;
  color: var(--prune);
  position: relative;
}
.lien-fleche::after { content: "\2192"; transition: transform var(--duree) var(--easing); }
.lien-fleche::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--mauve);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duree) var(--easing);
}
.lien-fleche:hover::after, .lien-fleche:focus-visible::after { transform: translateX(4px); }
.lien-fleche:hover::before, .lien-fleche:focus-visible::before { transform: scaleX(1); }

/* Arche + formes organiques */
.arche {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 50% 50% 12px 12px / 42% 42% 12px 12px;
  overflow: hidden;
  background: var(--mauve-clair);
  isolation: isolate;
  border: 5px solid #fff;
  box-shadow: 0 22px 48px -22px color-mix(in srgb, var(--prune) 45%, transparent);
}
.arche > img, .arche > svg { width: 100%; height: 100%; object-fit: cover; }
.arche-deco { position: relative; }
/* Seul ::after est utilisé : ::before entrerait en collision avec l'anneau
   pointillé de .arche::before (les deux classes cohabitent toujours ici),
   qui gagnerait la cascade et transformerait la bulle organique en aplat
   opaque par-dessus la photo. */
.arche-deco::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 45% 55% 58% 42% / 55% 46% 54% 45%;
  filter: blur(2px);
  width: 48%; aspect-ratio: 1; background: var(--sauge);
  bottom: -8%; left: -12%;
  animation: flotter 17s ease-in-out -4s infinite alternate;
}
@keyframes flotter {
  from { transform: translateY(-6px) rotate(-3deg); }
  to   { transform: translateY(10px) rotate(4deg); }
}

/* Bandeau pratique (version simple en ligne — pages intérieures) */
.bandeau-pratique {
  background: var(--sauge);
  border-radius: var(--rayon);
  padding: var(--esp-4) var(--esp-5);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem var(--esp-4);
  align-items: center;
  font-weight: 500;
}
.bandeau-pratique li { list-style: none; white-space: nowrap; display: flex; align-items: center; margin: 0; }
.bandeau-pratique li + li::before {
  content: "\00B7";
  margin-right: var(--esp-4);
  color: var(--prune-clair);
  font-weight: 700;
}
.bandeau-pratique ul { display: contents; }

/* Bloc pratique (accueil) — carte avec pictos */
.pratique {
  background: linear-gradient(160deg, #fff, var(--ivoire) 60%, var(--or-doux));
  border: 1px solid color-mix(in srgb, var(--prune) 10%, transparent);
  border-radius: calc(var(--rayon) + 4px);
  padding: clamp(1.4rem, 4vw, 2.5rem);
  box-shadow: var(--ombre-douce);
}
.pratique__grille {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
}
.pratique__grille li {
  margin: 0;
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.95rem 0;
  border-top: 1px solid color-mix(in srgb, var(--prune) 9%, transparent);
}
.pratique__grille li:first-child { border-top: 0; }
.pratique__ico {
  flex: none;
  width: 2.6rem; height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--or) 32%, transparent);
  color: var(--or-fonce);
}
.pratique__ico svg { width: 1.2rem; height: 1.2rem; }
.pratique__k {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--prune-clair);
  margin-bottom: 0.2rem;
}
.pratique__v {
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--prune);
  line-height: 1.35;
}
.pratique__pied {
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: 1px solid color-mix(in srgb, var(--prune) 14%, transparent);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem var(--esp-4);
}
.pratique__pied a[href^="tel:"] { font-weight: 700; text-decoration: none; white-space: nowrap; }
.pratique__pied a[href^="tel:"]:hover { text-decoration: underline; }

/* 2 colonnes dès qu'il y a la place ; jamais d'orphelin, la 5e ligne
   (Format) s'étend sur toute la largeur */
@media (min-width: 40rem) {
  .pratique__grille {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--esp-6);
  }
  .pratique__grille li:nth-child(2) { border-top: 0; }
  .pratique__grille li:last-child { grid-column: 1 / -1; }
}

@media (max-width: 32rem) {
  .pratique__pied { flex-direction: column; align-items: flex-start; }
}

/* Grille alternée d'approches / accompagnements */
.blocs { display: grid; gap: var(--esp-6); }
.bloc {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}
.bloc:nth-child(even) .bloc__media { order: 1; }

/* Sur ordinateur seulement (mobile/tablette inchangés) : certains blocs
   passent en texte seul, sans illustration, en pleine largeur. */
@media (min-width: 769px) {
  .bloc--texte-seul-bureau .bloc__media,
  .bloc--texte-seul .bloc__media { display: none; }
  .bloc--texte-seul-bureau > div:last-child,
  .bloc--texte-seul > div:last-child { grid-column: 1 / -1; max-width: 46rem; }
}

/* Ce bloc-ci reste en texte seul aussi sur mobile et tablette. */
.bloc--texte-seul .bloc__media { display: none; }
.bloc__media {
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--rose);
  aspect-ratio: 5 / 4;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
}
.bloc__media svg,
.bloc__media img { width: 100%; height: 100%; object-fit: contain; }

/* Variante « libre » : pas de carte colorée autour — l'illustration garde son
   propre fond transparent et s'aligne en haut, au niveau du titre voisin. */
.bloc__media--libre {
  background: none;
  padding: 0;
  overflow: visible;
  display: block;
}
.bloc__media--libre img { width: 100%; height: auto; }

/* Variante « photo » : illustration pleine (pas d'icône), sans fond ni marge intérieure. */
.bloc__media--photo { background: none; padding: 0; aspect-ratio: 3 / 2; }
.bloc__media--photo img { object-fit: cover; }
.bloc h3 { margin-bottom: var(--esp-2); }
.bloc__resume { color: var(--texte-doux); }

/* Cartes souples (motifs, publics) */
.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--esp-3);
}
/* Duo : une seule colonne tant qu'il n'y a pas vraiment la place (mobile + tablette portrait) */
.cartes--duo { grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .cartes--duo { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 880px) {
  .cartes { grid-template-columns: repeat(3, 1fr); }
  .cartes--duo { grid-template-columns: repeat(2, 1fr); }
}
.carte {
  display: flex;
  flex-direction: column;
  background: #fffdfa;
  border: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
  border-radius: var(--rayon);
  padding: var(--esp-4);
  box-shadow: 0 4px 16px -10px color-mix(in srgb, var(--prune) 30%, transparent);
  transition: transform var(--duree) var(--easing), box-shadow var(--duree) var(--easing), border-color var(--duree);
}
.carte:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--prune) 34%, transparent);
  border-color: color-mix(in srgb, var(--or) 45%, transparent);
}
.carte h3 {
  font-size: 1.12rem;
  font-weight: 700;
  font-family: var(--sans);
  letter-spacing: 0.01em;
  margin-bottom: var(--esp-2);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.carte p { color: var(--texte-doux); font-size: 1rem; overflow-wrap: break-word; }

/* Cartes « motifs de consultation » (accueil) : pictogramme doré + très
   légère touche de profondeur dans le coin. */
.cartes--motifs .carte {
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--or-doux) 45%, transparent), transparent 62%),
    #fffdfa;
}
.carte__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--esp-2);
  border-radius: 999px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--accent, var(--or)) 32%, transparent);
  color: color-mix(in srgb, var(--accent, var(--or-fonce)) 90%, var(--prune));
  transition: transform var(--duree) var(--easing), background var(--duree);
}
.carte__icone svg { width: 1.05rem; height: 1.05rem; }
.carte:hover .carte__icone {
  transform: scale(1.08);
  background: color-mix(in srgb, var(--accent, var(--or-doux)) 55%, #fff);
}

/* Cartes « piliers » (À propos « Ce qui guide ma pratique ») : carte sobre,
   fond ivoire uni comme partout ailleurs sur le site — seuls le pictogramme
   et le filet de bordure prennent la teinte d'accent de chaque carte.
   Une seule colonne tant qu'il n'y a pas la place pour 3 (jamais 2, pour ne
   pas isoler la 3e carte toute seule sur sa ligne). */
.cartes--piliers { grid-template-columns: 1fr; }
@media (min-width: 34rem) {
  /* 2 colonnes dès qu'une carte pleine largeur serait trop vide ; la 3e carte
     occupe toute la largeur en dessous plutôt que de rester seule, isolée. */
  .cartes--piliers { grid-template-columns: 1fr 1fr; }
  .cartes--piliers .carte:nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 880px) {
  .cartes--piliers { grid-template-columns: repeat(3, 1fr); }
  .cartes--piliers .carte:nth-child(3) { grid-column: auto; }
}
.cartes--piliers .carte:nth-child(1) { --accent: var(--sauge-fonce); }
.cartes--piliers .carte:nth-child(2) { --accent: var(--or-fonce); }
.cartes--piliers .carte:nth-child(3) { --accent: var(--prune-clair); }
.cartes--piliers .carte {
  border-color: color-mix(in srgb, var(--accent, var(--or)) 30%, transparent);
}
.cartes--piliers .carte:hover {
  border-color: color-mix(in srgb, var(--accent, var(--or)) 55%, transparent);
}

/* Cartes « publics » (Accompagnements : enfants, adultes, femmes, parents) :
   fond teinté et gros pictogramme plein, une couleur par carte. */
.cartes--publics .carte:nth-child(1) { --accent: var(--sauge-fonce); }
.cartes--publics .carte:nth-child(2) { --accent: var(--or-fonce); }
.cartes--publics .carte:nth-child(3) { --accent: var(--prune-clair); }
.cartes--publics .carte:nth-child(4) { --accent: var(--rose-fonce); }
.cartes--publics .carte {
  background: color-mix(in srgb, var(--accent, var(--or)) 13%, #fffdfa);
  border-color: color-mix(in srgb, var(--accent, var(--or)) 35%, transparent);
}
.cartes--publics .carte:hover {
  border-color: color-mix(in srgb, var(--accent, var(--or)) 60%, transparent);
}
.cartes--publics .carte__numero {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--accent, var(--or-fonce)) 80%, var(--prune));
  margin-bottom: var(--esp-2);
}
.cartes--publics .carte__icone {
  width: 3.25rem;
  height: 3.25rem;
  background: color-mix(in srgb, var(--accent, var(--or)) 88%, #fff);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--accent, var(--prune)) 55%, transparent);
}
.cartes--publics .carte__icone svg { width: 1.6rem; height: 1.6rem; }
.cartes--publics .carte:hover .carte__icone {
  background: var(--accent, var(--or));
  transform: scale(1.08) rotate(-4deg);
}
/* Le bouton reste collé au bas de la carte, quelle que soit la longueur
   du texte au-dessus, pour que les boutons d'une même ligne s'alignent. */
.cartes--publics .carte > p:last-child { margin-top: auto; padding-top: var(--esp-3); }

/* Frise */
.frise { list-style: none; padding: 0; counter-reset: etape; }
.frise .etape { margin-top: 0; }
.frise--h {
  display: flex;
  gap: var(--esp-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--esp-3);
  scrollbar-width: thin;
}
.frise--h .etape { flex: 0 0 min(20rem, 78vw); scroll-snap-align: start; }
.frise--fil { position: relative; }
.frise--fil::before {
  content: "";
  position: absolute;
  left: 1.5rem; right: 1.5rem;
  top: calc(var(--esp-4) + 1.1rem);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--mauve) 0 6px, transparent 6px 15px);
  z-index: 0;
}
.frise--fil .etape { position: relative; z-index: 1; }
@media (max-width: 768px) { .frise--fil::before { display: none; } }
.etape {
  position: relative;
  background: var(--ivoire);
  border: 1px solid color-mix(in srgb, var(--prune) 14%, transparent);
  border-radius: var(--rayon);
  padding: var(--esp-4);
  transition: transform var(--duree) var(--easing), box-shadow var(--duree) var(--easing);
}
.etape:hover { transform: translateY(-4px); box-shadow: var(--ombre-douce); }
.etape::before {
  counter-increment: etape;
  content: counter(etape);
  display: grid;
  place-items: center;
  width: 2.2rem; height: 2.2rem;
  border-radius: 999px;
  background: var(--prune);
  color: var(--ivoire);
  font-family: var(--serif);
  font-size: 1rem;
  margin-bottom: var(--esp-3);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--or) 22%, transparent);
}
.etape h3 { font-size: var(--pas-3); font-family: var(--sans); font-weight: 600; }
.etape p { color: var(--texte-doux); font-size: 1rem; margin-top: var(--esp-1); }
/* Trait de liaison entre étapes empilées (mobile) : élément dédié, pour ne
   pas entrer en collision avec l'anneau décoratif de .etape::after. */
.etape__fil {
  display: none;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 450ms var(--easing) 150ms;
}
.js [data-reveal].est-visible .etape__fil { transform: scaleY(1); }
.js [data-reveal].est-visible .etape:nth-child(2) .etape__fil { transition-delay: 220ms; }
.js [data-reveal].est-visible .etape:nth-child(3) .etape__fil { transition-delay: 290ms; }
.js [data-reveal].est-visible .etape:nth-child(4) .etape__fil { transition-delay: 360ms; }
.statut {
  display: inline-block;
  margin-top: var(--esp-2);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--prune-clair);
  background: var(--mauve-clair);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

/* Accordéons */
.accordeon {
  border-top: 1px solid color-mix(in srgb, var(--prune) 16%, transparent);
}
.accordeon:last-of-type { border-bottom: 1px solid color-mix(in srgb, var(--prune) 16%, transparent); }
.accordeon > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--esp-4) 2.5rem var(--esp-4) 0;
  position: relative;
  font-family: var(--serif);
  font-size: var(--pas-3);
  font-weight: 500;
  color: var(--prune);
}
.accordeon > summary::-webkit-details-marker { display: none; }
.accordeon > summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-family: var(--sans);
  line-height: 1;
  transition: transform var(--duree) var(--easing);
}
.accordeon[open] > summary::after { content: "\2212"; }
.accordeon__corps { padding-bottom: var(--esp-4); color: var(--texte-doux); }
.accordeon__corps > * + * { margin-top: var(--esp-3); }

/* Encadré / note / avertissement */
.note { font-size: 0.9rem; color: var(--texte-doux); margin-top: var(--esp-3); }
.note-ref {
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
  color: var(--prune-clair);
  padding: 0 0.15em;
}
.note-ref:hover, .note-ref:focus-visible { text-decoration: underline; }
.encadre {
  background: var(--rose);
  border-radius: var(--rayon);
  padding: var(--esp-4) var(--esp-5);
}
.avertissement {
  border: 1px dashed var(--prune-clair);
  border-radius: var(--rayon);
  padding: var(--esp-4);
  background: color-mix(in srgb, var(--mauve-clair) 55%, transparent);
  font-size: 0.95rem;
}
.avertissement strong { display: block; margin-bottom: var(--esp-1); }

/* Carte à la demande */
.carte-demande {
  border: 1px solid color-mix(in srgb, var(--prune) 16%, transparent);
  border-radius: var(--rayon);
  background: var(--sauge);
  min-height: 260px;
  display: grid;
  place-items: center;
  padding: var(--esp-4);
  text-align: center;
}
.carte-demande iframe { width: 100%; min-height: 320px; border: 0; border-radius: var(--rayon); }

/* Bloc « Le cabinet » (infos pratiques) — texte + plan Google Maps */
.cabinet-bloc {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-5);
  background: #fffdfa;
  border: 1px solid color-mix(in srgb, var(--prune) 9%, transparent);
  border-left: 3px solid var(--or);
  border-radius: var(--rayon);
  padding: clamp(1.4rem, 4vw, 2.4rem);
  box-shadow: 0 12px 32px -26px rgba(64, 46, 64, 0.55);
}
.cabinet-bloc > * { min-width: 0; }
.cabinet-bloc__infos > p { color: var(--texte-doux); }
.cabinet-bloc__actions { margin-top: var(--esp-4); }
.cabinet-bloc__carte {
  min-height: 300px;
  border-radius: var(--rayon);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--prune) 12%, transparent);
}
.cabinet-bloc__carte iframe { display: block; width: 100%; max-width: 100%; height: 100%; min-height: 300px; border: 0; }

@media (min-width: 52rem) {
  .cabinet-bloc {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: var(--esp-6);
  }
}

/* Liste clé / valeur réutilisable (cabinet, séance) — libellé au-dessus de la valeur */
.infos-liste { list-style: none; padding: 0; margin: var(--esp-4) 0 0; }
.infos-liste li {
  padding: 0.75rem 0;
  border-top: 1px solid color-mix(in srgb, var(--prune) 9%, transparent);
}
.infos-liste li:first-child { border-top: 0; padding-top: 0; }
.infos-liste__k {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--prune-clair);
  margin-bottom: 0.2rem;
}
.infos-liste__v { font-family: var(--serif); font-size: 1.05rem; color: var(--prune); line-height: 1.35; }
.infos-liste__v a { color: inherit; text-decoration: none; }
.infos-liste__v a:hover, .infos-liste__v a:focus-visible { text-decoration: underline; }
/* Côte à côte uniquement dans la colonne large du bloc « Le cabinet », et seulement quand il y a la place */
@media (min-width: 48rem) {
  .cabinet-bloc__infos .infos-liste li {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    align-items: baseline;
    gap: 1rem;
  }
  .cabinet-bloc__infos .infos-liste__k { margin-bottom: 0; }
}

/* Placeholder calendrier */
.calendrier-placeholder {
  border: 2px dashed color-mix(in srgb, var(--prune) 28%, transparent);
  border-radius: var(--rayon);
  padding: clamp(2rem, 6vw, 3.5rem);
  text-align: center;
  background: color-mix(in srgb, var(--rose) 50%, transparent);
}
.calendrier-placeholder p { max-width: 32rem; margin-inline: auto; color: var(--texte-doux); }

/* Le fil (SVG décoratif) */
.fil-deco { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fil-deco svg { width: 100%; height: 100%; }
.fil-deco path { fill: none; stroke: var(--mauve); stroke-width: 2.5; stroke-linecap: round; opacity: 0.6; }

/* Fioritures décoratives (SVG organiques) */
.section--deco { position: relative; overflow: clip; isolation: isolate; }
.hero { position: relative; overflow: clip; isolation: isolate; }
.appel { position: relative; isolation: isolate; }
.entete-page { position: relative; overflow: clip; isolation: isolate; }
.deco {
  position: absolute;
  z-index: -1;
  width: clamp(78px, 10vw, 156px);
  height: auto;
  opacity: 0.5;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Opacité ajustée par teinte */
.deco[src$="deco-1.svg"] { opacity: 0.6; }   /* doré doux */
.deco[src$="deco-2.svg"] { opacity: 0.13; }  /* prune : trait d'encre discret */
.deco[src$="deco-3.svg"] { opacity: 0.5; }   /* mauve */
.section--rose .deco[src$="deco-2.svg"],
.section--sauge .deco[src$="deco-2.svg"] { opacity: 0.16; }
.deco svg { width: 100%; height: auto; display: block; }
.deco--tl { top: -1.75rem; left: -1.25rem; }
/* Pas de débord vertical : la section a overflow:clip, donc tout débord
   au-dessus coupait le haut du motif (constaté sur plusieurs pages). */
.deco--tr { top: 0.75rem; right: clamp(0.5rem, 3vw, 1.5rem); }
.deco--bl { bottom: -1.75rem; left: -1rem; }
.deco--br { bottom: -2rem; right: -1.25rem; }
.deco--r { top: 50%; right: -1.5rem; transform: translateY(-50%); }
/* Dans l'en-tête de page : la fioriture reste entièrement visible (pas de débord clippé) */
.entete-page .deco--r {
  opacity: 0.4;
  right: clamp(0.75rem, 4vw, 2.5rem);
  width: clamp(60px, 7vw, 108px);
}
.deco--sm { width: clamp(60px, 7vw, 104px); }
.deco--lg { width: clamp(110px, 15vw, 230px); opacity: 0.42; }
.deco--flotte { animation: flotter 18s ease-in-out infinite alternate; }
@media (max-width: 600px) {
  .deco[src], .deco { width: clamp(58px, 16vw, 96px); }
  .deco--lg { width: clamp(80px, 24vw, 132px); }
  .deco[src$="deco-1.svg"] { opacity: 0.45; }
  .deco[src$="deco-3.svg"] { opacity: 0.38; }
}

/* Reveal au défilement */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}
.js [data-reveal].est-visible {
  opacity: 1;
  transform: none;
  transition: opacity 600ms var(--easing), transform 600ms var(--easing);
}

/* 7. STYLES DE PAGE =================================================== */

/* Hero d'accueil */
.hero { padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(3rem, 8vw, 6rem); position: relative; }
.hero__grille {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.hero h1 {
  margin-bottom: var(--esp-4);
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3rem);
}
.hero__phrase {
  font-family: var(--serif);
  font-size: var(--pas-4);
  font-weight: 400;
  color: var(--prune-clair);
  margin-bottom: var(--esp-5);
  max-width: 34ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--esp-3) var(--esp-4); align-items: center; }
.hero__portrait { max-width: 28rem; margin-inline: auto; width: 100%; }

/* Bulle photo : visible seulement en mobile / tablette (voir media query) */
.hero__bulle { display: none; }

/* Badges (petites pastilles d'information) */
.badges {
  list-style: none;
  padding: 0;
  margin-top: var(--esp-5);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin: 0;
  padding: 0.4rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--prune);
  background: color-mix(in srgb, var(--or-doux) 75%, #fff);
  border: 1px solid color-mix(in srgb, var(--or) 28%, transparent);
  border-radius: 999px;
  transition: transform var(--duree) var(--easing), background var(--duree);
}
.badge:hover { transform: translateY(-2px); background: var(--or-doux); }
.badge__pastille {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--or);
  flex: none;
}
@media (max-width: 480px) {
  .badges { gap: 0.3rem; }
  .badge { padding: 0.28rem 0.5rem; font-size: 0.6rem; letter-spacing: 0.02em; gap: 0.35em; }
}

/* Avis (à activer avec une vraie note Google) */
.avis {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: var(--esp-4);
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--texte-doux);
}
.avis__etoiles {
  color: var(--or);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}
.avis strong { color: var(--prune); }
.avis:hover .avis__texte { text-decoration: underline; }

/* Bandeau d'appel final */
.appel {
  background: var(--prune);
  color: var(--ivoire);
  border-radius: var(--rayon);
  padding: clamp(2.2rem, 6vw, 3.5rem);
  text-align: center;
}
.appel h2 { color: var(--ivoire); margin-bottom: var(--esp-3); }
.appel p { max-width: 40rem; margin-inline: auto; color: color-mix(in srgb, var(--ivoire) 85%, transparent); }
.appel .bouton { margin-top: var(--esp-4); }

/* Intro de page intérieure */
.entete-page { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem); }
.entete-page p { max-width: 44rem; color: var(--texte-doux); font-size: var(--pas-3); margin-top: var(--esp-3); }

/* Variante avec un léger halo doré, pour une intro moins plate (Mon approche) */
.entete-page--douce { background: var(--rose); }
.entete-page--sauge { background: var(--sauge); }

/* Portrait + texte (À propos) */
.duo {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: start;
}
.duo__portrait { max-width: 26rem; }
.duo__bulle { display: none; }
/* Variante pour une illustration large (16/9) plutôt qu'un portrait : colonne
   plus large pour l'image (elle paraissait petite) et centrage vertical sur
   la colonne de texte (le calage tout en haut laissait un vide sous l'image,
   plus courte qu'un bloc de texte). */
.duo--egal { grid-template-columns: 1fr 1fr; align-items: center; }

/* 8. UTILITAIRES ==================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.centre { text-align: center; }
.mesure { max-width: 42rem; }
.mt-6 { margin-top: var(--esp-6); }
.mt-4 { margin-top: var(--esp-4); }
[hidden] { display: none !important; }

/* 8bis. IDENTITÉ VISUELLE & INTERACTIONS LUDIQUES ================== */

/* --- Grain papier (très léger, statique) --- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Sections colorées + pied : positionnement pour les fioritures internes.
   (Les anciens bords ondulés entre sections ont été retirés.) */
.section--rose, .section--sauge, .section--mauve, .pied { position: relative; }
.section--rose > .conteneur, .section--sauge > .conteneur, .section--mauve > .conteneur { position: relative; z-index: 1; }

/* --- Trait « dessiné » sous les titres de section --- */
.section__titre::after {
  width: 3.2rem;
  height: 10px;
  background: linear-gradient(90deg, var(--or), var(--mauve));
  border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 7 C 14 1 22 11 34 7 C 46 3 54 12 68 7 C 82 2 92 11 106 6 C 113 3 117 7 118 6' stroke='%23000' stroke-width='3.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 7 C 14 1 22 11 34 7 C 46 3 54 12 68 7 C 82 2 92 11 106 6 C 113 3 117 7 118 6' stroke='%23000' stroke-width='3.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
  transform-origin: left;
  transition: transform 700ms var(--easing) 120ms;
}
.js [data-reveal] .section__titre::after,
.js [data-reveal].section .section__titre::after { transform: scaleX(0); }
.js [data-reveal].est-visible .section__titre::after,
.js [data-reveal].est-visible.section .section__titre::after { transform: scaleX(1); }

/* --- Puces dessinées à la main --- */
.marques { list-style: none; padding-left: 0; }
.marques + p { margin-top: var(--esp-3); }
.marques li {
  position: relative;
  padding-left: 1.9rem;
  margin-top: 0.55rem;
}
.marques li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.2em;
  width: 1.1rem; height: 1.1rem;
  background: var(--or);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L14.4 8.8L21.5 8.9L15.8 13.2L17.9 20.1L12 16L6.1 20.1L8.2 13.2L2.5 8.9L9.6 8.8Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L14.4 8.8L21.5 8.9L15.8 13.2L17.9 20.1L12 16L6.1 20.1L8.2 13.2L2.5 8.9L9.6 8.8Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-6deg);
}
.marques li:nth-child(even)::before { background: var(--mauve); transform: rotate(8deg); }
.marques li:nth-child(3n)::before { background: var(--sauge-fonce); }

/* --- Cartes : survol plus vivant + petit nœud d'angle --- */
.carte { position: relative; }
.carte::after {
  content: "";
  position: absolute;
  top: 0.75rem; right: 0.75rem;
  width: 0.5rem; height: 0.5rem;
  border-radius: 999px;
  background: var(--or);
  opacity: 0;
  transform: scale(0.2);
  transition: opacity var(--duree), transform var(--duree) var(--easing);
}
.carte:hover { transform: translateY(-3px); }
.carte:hover::after { opacity: 0.75; transform: scale(1); }

/* stagger des cartes / étapes / badges à l'apparition */
.js [data-reveal] .carte,
.js [data-reveal] .etape,
.js [data-reveal] .badge,
.js [data-reveal] .bloc,
.js [data-reveal] .marques li {
  opacity: 0;
  transform: translateY(14px);
}
.js [data-reveal].est-visible .carte,
.js [data-reveal].est-visible .etape,
.js [data-reveal].est-visible .badge,
.js [data-reveal].est-visible .bloc,
.js [data-reveal].est-visible .marques li {
  opacity: 1;
  transform: none;
  transition: opacity 500ms var(--easing), transform 500ms var(--easing);
}
.js [data-reveal].est-visible .carte:nth-child(2),
.js [data-reveal].est-visible .etape:nth-child(2),
.js [data-reveal].est-visible .badge:nth-child(2),
.js [data-reveal].est-visible .marques li:nth-child(2) { transition-delay: 70ms; }
.js [data-reveal].est-visible .carte:nth-child(3),
.js [data-reveal].est-visible .etape:nth-child(3),
.js [data-reveal].est-visible .badge:nth-child(3),
.js [data-reveal].est-visible .marques li:nth-child(3) { transition-delay: 140ms; }
.js [data-reveal].est-visible .carte:nth-child(4),
.js [data-reveal].est-visible .etape:nth-child(4),
.js [data-reveal].est-visible .marques li:nth-child(4) { transition-delay: 210ms; }
.js [data-reveal].est-visible .carte:nth-child(5),
.js [data-reveal].est-visible .etape:nth-child(5),
.js [data-reveal].est-visible .marques li:nth-child(5) { transition-delay: 280ms; }
.js [data-reveal].est-visible .carte:nth-child(6),
.js [data-reveal].est-visible .marques li:nth-child(6) { transition-delay: 350ms; }

/* --- Étapes de frise : anneau qui apparaît --- */
.etape::after {
  content: "";
  position: absolute;
  left: var(--esp-4); top: var(--esp-4);
  width: 2.2rem; height: 2.2rem;
  border-radius: 999px;
  border: 2px dashed color-mix(in srgb, var(--or) 60%, transparent);
  transform: scale(0.4) rotate(-30deg);
  opacity: 0;
  transition: transform 600ms var(--easing), opacity 500ms;
}
.js [data-reveal].est-visible .etape::after { transform: scale(1.55) rotate(0); opacity: 1; }
.etape:hover { transform: translateY(-5px) rotate(0.5deg); }

/* --- Badges : petit sursaut au survol --- */
.badge { transition: transform var(--duree) var(--easing), background var(--duree); }
.badge:hover { transform: translateY(-3px) rotate(-2deg); }

/* --- Accordéons : marqueur qui rebondit --- */
.accordeon > summary::after { transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.accordeon[open] > summary::after { transform: translateY(-50%) rotate(180deg); }

/* --- Liens dans le texte : soulignement ondulé --- */
main p a:not(.bouton):not(.lien-fleche):not(.note-ref),
.accordeon__corps a {
  text-decoration: none;
  background-image: linear-gradient(var(--or), var(--or));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 2px;
  padding-bottom: 1px;
  transition: background-size var(--duree) var(--easing);
}
main p a:not(.bouton):not(.lien-fleche):not(.note-ref):hover,
.accordeon__corps a:hover { background-size: 100% 8px; color: var(--prune); }

/* --- Indice de défilement sous le hero --- */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  translate: -50% 0;
  width: 26px; height: 40px;
  border: 2px solid color-mix(in srgb, var(--prune) 35%, transparent);
  border-radius: 999px;
  z-index: 2;
}
.scroll-cue span {
  position: absolute;
  left: 50%; top: 8px;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 999px;
  background: var(--or-fonce);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0%,100% { transform: translateY(0); opacity: 0.3; } 45% { transform: translateY(14px); opacity: 1; } }
.scroll-cue[data-cache] { opacity: 0; transition: opacity 400ms; }
@media (max-width: 768px) { .scroll-cue { display: none; } }

/* --- Arche : anneau doré autour du cadre --- */
.arche::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: inherit;
  border: 3px solid color-mix(in srgb, var(--or) 65%, transparent);
  z-index: 2;
  pointer-events: none;
}

/* --- Formes flottantes en fond de hero (nuages doux aux bords) --- */
.hero::before, .hero::after {
  content: "";
  position: absolute;
  border-radius: 46% 54% 55% 45% / 52% 47% 53% 48%;
  z-index: -1;
  pointer-events: none;
  filter: blur(10px);
}
.hero::before {
  width: 300px; height: 300px;
  background: color-mix(in srgb, var(--sauge) 52%, transparent);
  top: -60px; right: -90px;
  animation: flotter 22s ease-in-out infinite alternate;
}
.hero::after {
  width: 220px; height: 220px;
  background: color-mix(in srgb, var(--rose) 58%, transparent);
  bottom: 2%; left: -80px;
  animation: flotter 17s ease-in-out -3s infinite alternate;
}
@media (max-width: 768px) {
  .hero::before { width: 190px; height: 190px; right: -90px; }
  .hero::after { width: 140px; height: 140px; left: -80px; }
}

/* --- Parallaxe très douce des fioritures --- */
.deco { transition: transform 120ms linear; will-change: transform; }

/* --- Étoiles / étincelles décoratives (motif, PAS une note) --- */
@keyframes scintille {
  0%, 100% { transform: scale(0.65) rotate(0deg); opacity: 0.3; }
  50% { transform: scale(1) rotate(22deg); opacity: 0.95; }
}
.hero__etoiles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.etoile { position: absolute; width: 22px; height: auto; animation: scintille 4.5s ease-in-out infinite; }
.etoile--1 { top: 2%; left: 58%; width: 26px; animation-delay: 0s; }
.etoile--2 { top: 7%; left: 25%; width: 14px; animation-delay: 1.4s; }
.etoile--3 { top: 24%; left: 5%; width: 18px; animation-delay: 2.3s; }
.appel { position: relative; }
.appel .etoile--a { top: -12px; right: 7%; width: 20px; animation-delay: 0.4s; }
.appel .etoile--b { bottom: -12px; left: 7%; width: 20px; animation-delay: 1.8s; }
.appel .etoile { position: absolute; }
@media (max-width: 600px) {
  .etoile--2 { display: none; }
  .etoile { width: 18px; }
}

/* --- Boutons : petit ressort --- */
.bouton { transition: background var(--duree) var(--easing), transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow var(--duree); }
.bouton:active { transform: translateY(1px) scale(0.98); }

/* 9. MEDIA QUERIES ================================================= */
@media (max-width: 900px) {
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .pied__marque-bloc { grid-column: 1 / -1; }

  /* Hero mobile / tablette : plus de grande illustration ; une bulle photo
     en haut à droite, au niveau du titre. Ordinateur (> 900px) inchangé. */
  .hero__grille { grid-template-columns: 1fr; }
  .hero__portrait { display: none; }
  .hero__texte { position: relative; }
  .hero__texte h1 { padding-right: calc(clamp(76px, 20vw, 108px) + 0.9rem); }
  .hero__bulle {
    display: block;
    position: absolute;
    top: 0.15rem;
    right: 0;
    width: clamp(76px, 20vw, 108px);
    aspect-ratio: 1;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    background:
      radial-gradient(120% 120% at 30% 25%, color-mix(in srgb, var(--rose) 75%, #fff), transparent 70%),
      linear-gradient(150deg, var(--sauge), var(--mauve));
    border: 3px solid #fff;
    box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--prune) 50%, transparent);
  }

  /* Le titre passe sur 3 lignes ici : on redescend cette étoile pour
     qu'elle reste dans une zone vide plutôt que sur le texte. */
  .etoile--3 { top: 57%; left: 4%; }
}

@media (max-width: 600px) {
  .pied__grille { grid-template-columns: 1fr; gap: var(--esp-5); }
}

@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: var(--hauteur-entete, 72px) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ivoire);
    border-bottom: 1px solid color-mix(in srgb, var(--prune) 12%, transparent);
    padding: var(--esp-3) clamp(1.15rem, 5vw, 2.5rem) var(--esp-5);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--duree) var(--easing), opacity var(--duree), visibility var(--duree);
    max-height: calc(100dvh - var(--hauteur-entete, 72px));
    overflow-y: auto;
  }
  .nav[data-ouvert="true"] { transform: none; opacity: 1; visibility: visible; }
  .nav a { padding: var(--esp-3) 0; font-size: 1.1rem; border-bottom: 1px solid color-mix(in srgb, var(--prune) 10%, transparent); }
  .nav a:not(.bouton)::after { display: none; }
  .nav a[aria-current="page"] { color: var(--prune-clair); }
  /* Le CTA n'occupe plus toute la largeur du menu */
  .nav .bouton {
    align-self: flex-start;
    margin-top: var(--esp-4);
    padding: 0.55rem 1.4rem;
    font-size: 0.95rem;
    border-bottom: 0;
  }

  .hero__grille, .bloc, .duo { grid-template-columns: 1fr; }
  .bloc:nth-child(even) .bloc__media { order: 0; }

  /* Mon parcours (À propos), mobile/tablette : portrait remplacé par une
     bulle photo flottante à côté du titre — en flux (pas en position
     absolue), pour que le texte se décale sous elle au lieu d'être
     recouvert, quelle que soit la longueur du titre. */
  .duo__portrait { display: none; }
  .duo__bulle {
    display: block;
    float: right;
    margin: 0.15rem 0 0.75rem 0.9rem;
    width: clamp(76px, 20vw, 108px);
    aspect-ratio: 1;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--prune) 50%, transparent);
  }

  .fil-deco { display: none; }

  .frise--h { flex-direction: column; overflow: visible; }
  .frise--h .etape { flex-basis: auto; }
  .frise--h .etape__fil {
    display: block;
    position: absolute;
    left: calc(var(--esp-4) + 1rem);
    top: 100%;
    width: 2px;
    height: var(--esp-4);
    background: color-mix(in srgb, var(--prune) 22%, transparent);
  }
}

@media (max-width: 560px) {
  .bandeau-pratique { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .bandeau-pratique li { white-space: normal; }
  .bandeau-pratique li + li::before { content: none; margin: 0; }
}

@media (max-width: 480px) {
  :root { --pas-3: 1.05rem; }
  .bandeau-pratique { padding: var(--esp-3) var(--esp-4); }
  .hero__actions .bouton, .hero__actions .bouton--secondaire { width: 100%; justify-content: center; }
  .hero__actions .lien-fleche { width: 100%; justify-content: center; }
}

/* 10. RÉDUCTION DES ANIMATIONS ==================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal],
  .js [data-reveal] .carte,
  .js [data-reveal] .etape,
  .js [data-reveal] .badge,
  .js [data-reveal] .bloc,
  .js [data-reveal] .marques li { opacity: 1 !important; transform: none !important; }
  .fil-deco path { stroke-dashoffset: 0 !important; }
  .section__titre::after { transform: none !important; }
  .etape::after, .scroll-cue, .hero::before, .hero::after { animation: none !important; }
  .etape::after { opacity: 0.6; transform: scale(1.55); }
  .scroll-cue span { opacity: 0.5; }
  .etoile { animation: none !important; opacity: 0.7; transform: rotate(12deg); }
}