/* ===================================================================
 * Priscillia Beaute : feuille de style unique
 *
 * Direction artistique "botanique couture", derivee de la cabine reelle :
 * mur vegetal, miroir soleil dore, fauteuil rose, bois clair.
 *
 * Trois partis pris qui distinguent ce site des sites d'institut :
 *   1. le VERT FEUILLAGE est un co-lead, pas un figurant (les sites du
 *      secteur partent tous sur beige + rose gold) ;
 *   2. l'ARCHE est la signature de forme, reprise des rondeurs du lieu ;
 *   3. la structure passe par des FILETS DORES, pas par des cartes a ombre.
 *
 * Ratios de contraste verifies : voir README.md, section Accessibilite.
 * =================================================================== */

/* -------------------------------------------------------------------
 * Polices auto-hebergees (aucun CDN au runtime : point RGPD et
 * dependance externe). Deux fontes VARIABLES, trois fichiers, 86 Ko :
 *   Cormorant Garamond : didone delicate, tout le display et l'italique
 *   Jost               : grotesque geometrique, corps de texte et UI
 * Licences SIL Open Font License 1.1, redistribuables.
 * ------------------------------------------------------------------- */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/CormorantGaramond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/CormorantGaramond-Italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/Jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Replis calibres (methode capsize, metriques relevees dans les fichiers
   de police par fontTools) : pendant le swap sur reseau lent, Georgia et
   Arial occupent la meme emprise que les webfonts — decalage quasi nul. */
@font-face {
  font-family: "Cormorant repli";
  font-style: normal;
  src: local("Georgia");
  size-adjust: 88.3734%;
  ascent-override: 104.5564%;
  descent-override: 32.4758%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Cormorant repli";
  font-style: italic;
  src: local("Georgia Italic"), local("Georgia-Italic");
  size-adjust: 78.5635%;
  ascent-override: 117.6119%;
  descent-override: 36.531%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Jost repli";
  font-style: normal;
  src: local("Arial");
  size-adjust: 95.9638%;
  ascent-override: 111.5004%;
  descent-override: 39.0773%;
  line-gap-override: 0%;
}

:root {
  /* fonds et encres */
  --background: #fcf8f6;    /* ivoire rose : fond de page */
  --surface: #f4eae5;       /* blush poudre : sections alternees */
  --surface-deep: #e8d7d0;  /* filets, separateurs */
  --ink: #2c2320;           /* brun profond : texte principal (14:1) */
  --ink-soft: #5c4c45;      /* texte secondaire */

  /* accents */
  --rose: #9b5b49;          /* accent texte + CTA plein (AA : 4,99 / 5,27) */
  --rose-hover: #834a3b;
  --rose-light: #c1826f;    /* DECOR SEULEMENT : 2,97 sur le fond */
  --vert: #3f5f46;          /* feuillage : co-lead, labels, CTA contour */
  --vert-deep: #2f4735;     /* fonds pleins */
  --or: #be9a5c;            /* filets et ornements ; texte uniquement sur --ink (5,76) */
  --or-clair: #d8b878;      /* texte dore sur fond vert fonce (5,33) */

  --serif: "Cormorant Garamond", "Cormorant repli", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Jost", "Jost repli", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Echelle typographique, ratio 1.28. Cormorant a une petite hauteur
     d'x : les tailles de display sont volontairement plus genereuses
     qu'avec un serif classique. */
  --t-xs: 0.78rem;
  --t-sm: 0.92rem;
  --t-base: 1rem;
  --t-md: 1.16rem;
  --t-lg: clamp(1.45rem, 1.15rem + 1.2vw, 2rem);
  --t-xl: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
  --t-2xl: clamp(2.7rem, 1.6rem + 4.6vw, 5.4rem);

  --shell: min(1160px, 90%);
  --arch: 50% 50% 10px 10px / 34% 34% 10px 10px;

  /* vocabulaire unique de micro-interactions : une duree, un easing */
  --dur: 240ms;
  --ease: cubic-bezier(0.25, 0.6, 0.3, 1);

  color-scheme: light;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17.5px;
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--rose); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--rose-hover); }

:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--surface-deep); }

/* ---------- structure ---------- */

.shell { width: var(--shell); margin-inline: auto; }

section { padding-block: clamp(56px, 8vw, 104px); }
section.alt { background: var(--surface); }
section.tight { padding-block: clamp(44px, 6vw, 72px); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- typographie ---------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0 0 0.4em;
  text-wrap: balance;
}
/* fin de paragraphe sans mot orphelin la ou le moteur le permet (ignore ailleurs) */
p, li, figcaption { text-wrap: pretty; }
/* Cormorant tient sa finesse en display : graisse 300 sur le h1. */
h1 { font-size: var(--t-2xl); font-weight: 300; }
h2 { font-size: var(--t-xl); }
h3 {
  font-size: var(--t-sm); font-family: var(--sans); font-weight: 600;
  line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase;
}

/* l'italique du serif porte l'accent : c'est la voix de la marque */
h1 em, h2 em { font-style: italic; color: var(--rose); }

p { margin: 0 0 1.05em; max-width: 62ch; }
.lead { font-size: var(--t-md); color: var(--ink-soft); line-height: 1.72; }
.muted { color: var(--ink-soft); }
.center { text-align: center; }
.center p { margin-inline: auto; }

/* label de section : filet dore + capitales espacees */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vert);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: "";
  width: 42px; height: 1px; flex: none;
  background: var(--or);
}
.center .eyebrow { justify-content: center; }
.center .eyebrow::after {
  content: ""; width: 42px; height: 1px; flex: none; background: var(--or);
}

/* ornement de separation */
.rule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
  opacity: 0.7;
  margin-block: clamp(36px, 5vw, 56px);
}

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

/* ---------- en-tete ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252, 248, 246, 0.92);
  backdrop-filter: blur(10px) saturate(1.1);
  /* liseret couture : un fil d'or en tete de page */
  border-top: 3px solid var(--or);
  border-bottom: 1px solid rgba(190, 154, 92, 0.28);
}
.site-header .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 76px; flex-wrap: wrap;
}

.logo {
  font-family: var(--serif);
  font-size: 1.62rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 10px;
}
.logo em { font-style: italic; color: var(--rose); }

/* Monogramme "le regard sous l'arche" : un oeil clos aux cils dans
   l'arche filetee d'or, le point rose de la marque au-dessus.
   SVG inline : il herite des variables CSS. */
.logo-mark { width: 40px; height: 48px; flex: none; align-self: center; }
.logo-mark .m-flower { stroke: var(--rose); }
.logo-mark .m-core { fill: var(--or); stroke: none; }
.logo-mark .m-init { font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: 0.5px; fill: var(--ink); }
/* sur le vert profond du footer, la fleur passe en dore clair */
.site-footer .logo-mark { width: 46px; height: 55px; }
.site-footer .logo-mark .m-flower { stroke: var(--or-clair); }
.site-footer .logo-mark .m-core { fill: var(--rose-light); stroke: none; }
.site-footer .logo-mark .m-init { fill: #fff; }
.footer-sign { display: flex; align-items: center; gap: 14px; }

.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 26px; margin: 0; padding: 0; }
.site-nav a {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); text-decoration: none;
  font-size: var(--t-sm); letter-spacing: 0.06em;
}
/* soulignement qui se deploie : micro-interaction discrete */
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 22%;
  height: 1px; background: var(--rose);
  transition: right var(--dur) var(--ease);
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { right: 0; }
.site-nav a[aria-current="page"] { color: var(--rose); }

/* ---------- boutons ---------- */

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 13px 30px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur), color var(--dur), border-color var(--dur), transform var(--dur);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--rose); color: #fff; }
.btn-primary:hover { background: var(--rose-hover); color: #fff; }
.btn-secondary { border-color: var(--vert); color: var(--vert); background: transparent; }
.btn-secondary:hover { background: var(--vert); color: #fff; }
.btn-ghost { border: 2px solid #a4834a; color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--or); color: var(--ink); }
.btn-sm { min-height: 44px; padding: 10px 20px; font-size: var(--t-xs); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; align-items: center; }

/* lien texte de meme rang qu'un bouton, sans concurrencer le CTA plein :
   un seul bouton plein par ecran, le second choix est un lien souligne or */
.link-under {
  display: inline-flex; align-items: center;
  min-height: 48px; padding-inline: 8px;
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--or);
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  transition: color var(--dur), text-decoration-color var(--dur);
}
.link-under:hover { color: var(--rose); text-decoration-color: var(--rose); }

/* preuve sociale collee au point de decision */
.proof-line {
  display: flex; align-items: baseline; gap: 9px;
  margin: 16px 0 0;
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.proof-line .star { color: var(--or); letter-spacing: 0; }
.cta-band .proof-line { justify-content: center; color: rgba(242, 236, 226, 0.85); }
.cta-band .proof-line .star { color: var(--or-clair); }

/* verbatim en exergue du bandeau final */
.cta-quote {
  margin: 0 auto clamp(26px, 4vw, 40px);
  max-width: 34ch;
  font-family: var(--serif); font-style: italic;
  font-size: var(--t-lg); line-height: 1.35;
  color: #fff;
}
.cta-quote footer {
  margin-top: 12px;
  font-family: var(--sans); font-style: normal;
  font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--or-clair);
}

/* ---------- media : l'arche est la signature ---------- */

.media { margin: 0; position: relative; }
.media img {
  border-radius: var(--arch);
  overflow: hidden;
}
.media img { width: 100%; object-fit: cover; }

/* filet dore qui epouse l'arche, decale : donne la profondeur */
.media.framed::before {
  content: "";
  position: absolute;
  /* halo uniforme : le filet entoure l'image, il ne la traverse jamais
     (l'ancien decalage diagonal coupait les photos sombres en deux) */
  inset: -12px;
  border: 1px solid var(--or);
  border-radius: var(--arch);
  opacity: 0.55;
  pointer-events: none;
}


.gallery {
  display: grid; gap: clamp(18px, 3vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
}
/* decalage vertical : casse l'alignement plat d'une galerie en grille */
.gallery > *:nth-child(even) { margin-top: clamp(16px, 4vw, 48px); }
/* Marqueur d'image d'illustration. Toute photo qui n'est pas de
   l'institut le dit, faute de quoi le visiteur croit voir le travail de
   Priscillia. A retirer en meme temps que l'image. */

.gallery figcaption {
  font-family: var(--serif); font-style: italic;
  font-size: var(--t-sm); color: var(--ink-soft);
  padding: 14px 4px 0; text-align: center;
}

/* ---------- hero : grille asymetrique 7/5 ---------- */

.hero { padding-block: clamp(44px, 7vw, 80px) clamp(44px, 6vw, 72px); }
.hero .shell {
  display: grid; gap: clamp(40px, 6vw, 72px);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 940px) {
  .hero .shell { grid-template-columns: 7fr 5fr; }
}
.hero h1 { margin-bottom: 0.3em; }
.hero .lead { max-width: 46ch; }

.hero-facts {
  list-style: none; margin: 30px 0 0; padding: 22px 0 0;
  border-top: 1px solid var(--surface-deep);
  display: flex; flex-wrap: wrap; gap: 12px 34px;
  font-size: var(--t-sm); color: var(--ink-soft);
}
.hero-facts li { display: flex; align-items: center; gap: 9px; }
.hero-facts li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--or); flex: none;
}

/* ---------- bandeau de notes ---------- */

.reassurance {
  background: var(--vert-deep);
  color: #eae3d8;
  padding-block: clamp(28px, 4vw, 44px);
}
.reassurance ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 26px 34px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.reassurance li {
  display: flex; flex-direction: column; gap: 4px;
  padding-left: 20px; border-left: 1px solid rgba(190, 154, 92, 0.5);
}
.reassurance .score-line {
  font-family: var(--serif); font-size: 1.7rem; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
}
.reassurance .crit {
  font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--or-clair); /* 3,80 avec --or : insuffisant pour du petit texte */
}
.reassurance .sub { font-size: var(--t-xs); color: rgba(234, 227, 216, 0.75); }

/* ---------- feature : deux colonnes editoriales ---------- */

.feature {
  display: grid; gap: clamp(36px, 6vw, 76px);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 940px) {
  .feature { grid-template-columns: 6fr 5fr; }
  .feature.reverse { grid-template-columns: 5fr 6fr; }
  .feature.reverse > *:first-child { order: 2; }
}


/* ---------- index des prestations : lignes editoriales, pas des cartes ---------- */

.service-index { margin-top: clamp(34px, 5vw, 56px); border-top: 1px solid var(--surface-deep); }
.service-row {
  display: grid; gap: 6px 32px;
  grid-template-columns: 1fr;
  padding: clamp(22px, 3vw, 30px) 0;
  border-bottom: 1px solid var(--surface-deep);
  text-decoration: none; color: inherit;
  transition: background-color var(--dur), padding-inline var(--dur);
}
@media (min-width: 800px) {
  .service-row { grid-template-columns: minmax(200px, 4fr) 6fr minmax(120px, auto); align-items: baseline; }
}
.service-row:hover {
  background: rgba(244, 234, 229, 0.55);
  padding-inline: 14px;
  color: inherit;
}
section.alt .service-row:hover { background: rgba(255, 255, 255, 0.6); }
.service-row .title {
  font-family: var(--serif); font-size: var(--t-lg); line-height: 1.2;
}
.service-row .desc { font-size: var(--t-sm); color: var(--ink-soft); max-width: 54ch; }
.service-row .from {
  font-size: var(--t-sm); color: var(--rose); font-weight: 600;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.service-row .from::after {
  content: " \2192"; display: inline-block;
  transition: transform var(--dur);
}
.service-row:hover .from::after { transform: translateX(5px); }

/* ---------- panneau typographique en arche ----------
 * Quand une composition n'a pas de photo legitime, le chiffre prend la
 * place de l'image : prix en tres grand Cormorant dans une arche filetee.
 * Mieux qu'une photo de banque d'images, et personne d'autre ne l'a. */

.arch-panel {
  aspect-ratio: 1 / 1.08;
  max-width: 380px;
  margin-inline: auto;
  border: 1px solid var(--or);
  border-radius: var(--arch);
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  padding: 30px;
  background:
    radial-gradient(circle at 50% 18%, rgba(190, 154, 92, 0.10), transparent 55%),
    var(--surface);
}
.arch-panel .ap-label {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--vert);
}
.arch-panel .ap-price {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 9vw, 5.2rem);
  line-height: 0.95;
  color: var(--rose);
  font-variant-numeric: tabular-nums;
}
.arch-panel .ap-meta {
  font-size: var(--t-sm); color: var(--ink-soft);
  letter-spacing: 0.06em;
}

/* ---------- carte des soins ---------- */

.category { margin-bottom: clamp(40px, 5vw, 60px); }
.category > h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--t-lg); letter-spacing: -0.005em;
  text-transform: none; /* annule la regle globale h3 en capitales */
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 10px;
}
.category > h3::after {
  content: ""; flex: 1; height: 1px; background: var(--or); opacity: 0.6;
}
.category .note {
  font-size: var(--t-sm); color: var(--ink-soft);
  max-width: 68ch; margin-bottom: 22px;
}
.category .note.quote {
  font-family: var(--serif); font-style: italic; font-size: var(--t-base);
  border-left: 2px solid var(--or); padding-left: 18px; color: var(--ink);
}

.price-list { list-style: none; margin: 0; padding: 0; }
.price-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--surface-deep);
  transition: padding-inline var(--dur), background-color var(--dur);
}
.price-list li:last-child { border-bottom: 0; }
.price-list li:hover { background: rgba(190, 154, 92, 0.07); padding-inline: 12px; }
.price-list .name { font-weight: 600; }
.price-list .dots { flex: 1; border-bottom: 1px dotted var(--surface-deep); min-width: 24px; transform: translateY(-4px); }
.price-list .meta {
  color: var(--ink-soft); font-size: var(--t-sm); white-space: nowrap;
  font-variant-numeric: tabular-nums; letter-spacing: 0.03em;
}
.price-list .price {
  font-family: var(--serif); font-size: var(--t-md);
  color: var(--rose); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.price-list .desc { flex-basis: 100%; font-size: var(--t-sm); color: var(--ink-soft); margin: 4px 0 0; max-width: 66ch; }

/* ---------- cartes de contenu ---------- */

.cards {
  display: grid; gap: clamp(20px, 3vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  margin-top: clamp(30px, 4vw, 44px);
}
.card { padding-top: 22px; border-top: 1px solid var(--or); }
.card h3 { margin-bottom: 10px; }
.card p { font-size: var(--t-sm); color: var(--ink-soft); }
.card p:last-child { margin-bottom: 0; }

/* mini illustration en tete de carte : petite arche sous le filet dore */
.card-thumb {
  width: 96px;
  aspect-ratio: 4 / 5;
  border-radius: 50% 50% 8px 8px / 36% 36% 8px 8px;
  overflow: hidden;
  margin-bottom: 18px;
  border: 1px solid rgba(190, 154, 92, 0.45);
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- note globale ---------- */

.rating { display: inline-flex; align-items: center; gap: 18px; }
.rating .score {
  font-family: var(--serif); font-size: clamp(3rem, 8vw, 4.6rem);
  line-height: 0.9; font-variant-numeric: tabular-nums;
}
.rating .stars { color: var(--or); letter-spacing: 4px; font-size: 1.05rem; }
.rating .meta { font-size: var(--t-sm); color: var(--ink-soft); display: block; margin-top: 4px; }

/* ---------- avis en defilement ----------
 * Bande de temoignages qui defile en continu. Trois garde-fous :
 *   - un vrai bouton pause (WCAG 2.2.2 : un contenu en mouvement
 *     declenche automatiquement et durant plus de 5 s doit pouvoir
 *     etre arrete) ;
 *   - pause automatique au survol et au focus clavier ;
 *   - en mouvement reduit, plus aucune animation : la bande devient
 *     une simple liste defilable a la main.
 */

.testimonials { position: relative; }

/* Sans JavaScript : simple liste defilable a la main, aucune animation.
   Le mouvement n'est active que si le script a pu dupliquer la bande. */
.marquee-viewport { overflow-x: auto; padding-block: 8px; }
.js .marquee-viewport {
  overflow: hidden;
  /* fondu sur les bords : les cartes entrent et sortent sans couperet */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee {
  display: flex;
  gap: clamp(18px, 2.4vw, 28px);
  padding-inline-end: clamp(18px, 2.4vw, 28px);
}
.js .marquee {
  width: max-content;
  padding-inline-end: 0;
  animation: marquee-slide 78s linear infinite;
  will-change: transform;
}
.marquee:hover, .marquee:focus-within { animation-play-state: paused; }
.marquee[data-paused="true"] { animation-play-state: paused; }

@keyframes marquee-slide {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - clamp(9px, 1.2vw, 14px))); }
}

.quote-card {
  flex: none;
  width: min(370px, 76vw);
  display: flex; flex-direction: column; gap: 14px;
  padding: 30px 30px 26px;
  background: var(--background);
  border: 1px solid rgba(190, 154, 92, 0.45);
  position: relative;
}
section.alt .quote-card { background: #fffdfc; }

.quote-card::before {
  content: "\201C";
  position: absolute; top: 2px; left: 22px;
  font-family: var(--serif); font-style: italic;
  font-size: 4.4rem; line-height: 1;
  color: var(--or); opacity: 0.5;
  pointer-events: none;
}

.quote-card blockquote {
  margin: 0; padding-top: 20px;
  font-family: var(--serif);
  font-size: 1.28rem; line-height: 1.42;
  color: var(--ink);
}
.quote-card .quote-meta {
  margin-top: auto;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  padding-top: 14px;
  border-top: 1px solid var(--surface-deep);
  font-size: var(--t-xs); color: var(--ink-soft);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.quote-card .quote-stars { color: var(--or); letter-spacing: 2px; }

.marquee-controls { display: none; }
.js .marquee-controls {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 26px;
}
.marquee-pause {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 8px 20px;
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--surface-deep); border-radius: 999px;
  font-family: var(--sans); font-size: var(--t-xs);
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur), color var(--dur);
}
.marquee-pause:hover { border-color: var(--or); color: var(--rose); }
.marquee-pause .glyph { color: var(--rose); font-size: 0.8rem; }

.source-note {
  font-size: var(--t-xs); color: var(--ink-soft);
  letter-spacing: 0.06em; text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .js .marquee-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-mask-image: none; mask-image: none;
  }
  .js .marquee { animation: none; }
  .quote-card { scroll-snap-align: start; }
  .js .marquee-controls { display: none; }
}

/* ---------- chèque cadeau ---------- */

.giftcard {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr; align-items: center;
  padding: clamp(30px, 4vw, 56px);
  border: 1px solid var(--or);
  background:
    radial-gradient(circle at 88% 12%, rgba(193, 130, 111, 0.16), transparent 46%),
    linear-gradient(160deg, var(--surface) 0%, #faf2ee 100%);
}
@media (min-width: 860px) { .giftcard { grid-template-columns: 1.15fr 0.85fr; } }
.giftcard h2 { margin-bottom: 14px; }

/* ---------- FAQ ---------- */

.faq { max-width: 80ch; margin-top: 10px; border-top: 1px solid var(--surface-deep); }
.faq details { border-bottom: 1px solid var(--surface-deep); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 22px 48px 22px 0;
  font-family: var(--serif); font-size: var(--t-md); line-height: 1.35;
  position: relative; min-height: 44px;
  display: flex; align-items: center;
  transition: color var(--dur);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after,
.faq summary::before {
  content: ""; position: absolute; right: 10px; top: 50%;
  background: var(--rose); transition: transform var(--dur), opacity var(--dur);
}
.faq summary::before { width: 15px; height: 1px; transform: translateY(-50%); }
.faq summary::after { width: 1px; height: 15px; right: 17px; transform: translateY(-50%); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.faq details > div { padding: 0 0 24px; max-width: 68ch; }
.faq details > div p:last-child { margin-bottom: 0; }
.faq summary:hover { color: var(--rose); }

/* ---------- infos pratiques ---------- */

.info-grid {
  display: grid; gap: clamp(30px, 4vw, 52px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.info-grid > div { padding-top: 20px; border-top: 1px solid var(--or); }
.info-grid h3 {
  font-size: var(--t-xs); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--vert); margin-bottom: 14px;
}
.hours { list-style: none; margin: 0; padding: 0; max-width: 340px; font-variant-numeric: tabular-nums; }
.hours li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--surface-deep); font-size: var(--t-sm);
}
.hours li:last-child { border-bottom: 0; }
.hours .closed { color: var(--ink-soft); font-style: italic; }
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { padding: 7px 0; font-size: var(--t-sm); }
.contact-list a { display: inline-flex; align-items: center; min-height: 32px; }

/* ---------- bandeau final ---------- */

.cta-band {
  background: var(--vert-deep);
  color: #f2ece2;
  text-align: center;
  position: relative;
}
.cta-band::before,
.cta-band::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
}
.cta-band::before { top: 0; }
.cta-band::after { bottom: 0; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(242, 236, 226, 0.85); margin-inline: auto; }
.cta-band .btn-primary { background: #fff; color: var(--vert-deep); }
.cta-band .btn-primary:hover { background: var(--surface); color: var(--vert-deep); }

/* ---------- pied de page ---------- */

.site-footer {
  background: var(--vert-deep);
  color: #eae3d8;
  padding-block: clamp(38px, 5vw, 56px) 0;
  font-size: var(--t-sm);
}
.site-footer a { color: #f0e3dd; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
/* double filet d'ouverture, signature du standard maison */
.footer-rule {
  width: min(560px, 78%); height: 5px;
  margin: 0 auto clamp(24px, 3vw, 34px);
  border-top: 2px solid var(--or-clair);
  border-bottom: 1px solid var(--or-clair);
  opacity: 0.6;
}
.footer-grid { display: grid; gap: 30px 32px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (min-width: 1020px) { .footer-grid { grid-template-columns: 1.3fr 1.05fr 1fr 0.85fr; } }
.footer-sign {
  font-family: var(--serif); font-size: var(--t-xl);
  color: #fff; margin: 0 0 8px; line-height: 1;
}
.footer-sign em { font-style: italic; color: var(--or-clair); }
.footer-mission {
  font-family: var(--serif); font-style: italic;
  font-size: var(--t-md); color: rgba(234, 227, 216, 0.85);
  margin: 0 0 12px; max-width: 30ch;
}
.f-meta {
  margin: 0; font-size: var(--t-xs);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(234, 227, 216, 0.62); line-height: 1.9;
}
.site-footer h2 {
  font-family: var(--sans); font-size: var(--t-xs);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--or-clair); margin-bottom: 12px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 3px 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 30px; }
/* pastilles rondes du standard : contact et reservation */
.f-icon {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(216, 184, 120, 0.5);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--or-clair);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.f-contact { overflow-wrap: anywhere; }
.f-contact li { padding: 4px 0; }
.f-contact li a { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.f-contact li a:hover { text-decoration: none; color: #fff; }
.f-contact li a:hover .f-icon { border-color: var(--or-clair); }
.f-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
a.f-icon { width: 42px; height: 42px; }
a.f-icon:hover { border-color: var(--or-clair); background: rgba(216, 184, 120, 0.12); color: #fff; }
.f-follow { margin: 0 0 10px; }
.f-note {
  margin: 0; font-family: var(--serif); font-style: italic;
  color: rgba(234, 227, 216, 0.85); max-width: 24ch;
}
.footer-bottom {
  margin-top: clamp(28px, 4vw, 40px);
  background: rgba(0, 0, 0, 0.18);
  padding-block: 18px 22px;
  text-align: center;
  font-size: var(--t-xs); color: rgba(234, 227, 216, 0.8);
}
.footer-min { padding-block: 0; }
.footer-min .footer-bottom { margin-top: 0; }
/* max-width: none — sans lui, le cap editorial p { 62ch } colle la bande a gauche */
.f-copy { margin: 0; max-width: none; }
.f-legal { margin: 6px 0 0; max-width: none; display: flex; flex-wrap: wrap; gap: 4px 28px; justify-content: center; }
.f-legal a { display: inline-flex; align-items: center; min-height: 24px; }

/* ---------- parcours premier rendez-vous : compteurs CSS purs ---------- */

.steps { list-style: none; margin: 26px 0 0; padding: 0; counter-reset: etape; max-width: 70ch; }
.steps li {
  counter-increment: etape;
  position: relative;
  padding: 0 0 22px 62px;
  min-height: 44px;
}
.steps li::before {
  content: counter(etape);
  position: absolute; left: 0; top: -4px;
  width: 42px; height: 42px;
  display: grid; place-content: center;
  border: 1px solid var(--or); border-radius: 50%;
  font-family: var(--serif); font-size: 1.25rem; color: var(--rose);
}
.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 21px; top: 42px; bottom: 4px;
  width: 1px; background: var(--or); opacity: 0.45;
}
.steps strong { display: block; }
.steps .sub { font-size: var(--t-sm); color: var(--ink-soft); }

/* ---------- header mobile ---------- */

@media (max-width: 767px) {



  /* Le bouton texte ne tient pas dans l'en-tete mobile : il cede la
     place a la pastille RDV (a gauche), symetrique de la pastille
     telephone (a droite). */
  .site-header .btn-sm { display: none; }

  /* cachet mobile : fond blush degrade au lieu du blanc plat */
  .site-header {
    background: linear-gradient(180deg, #f5eae4 0%, rgba(252, 248, 246, 0.97) 100%);
  }
  .site-header .shell { min-height: 0; padding-block: 12px 0; gap: 4px; }
  .logo { flex-basis: 100%; justify-content: center; font-size: 1.42rem; }
  .logo-mark { width: 34px; height: 40px; }
  /* fondu sur les bords de la nav : indique qu'elle defile */
  .site-nav {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
  }

  /* background-attachment: fixed est ignore sur mobile : le fondu de
     couleur disparaissait. On le porte par les heros, la ou il se voit. */
  .site-nav { flex-basis: 100%; margin-inline: -5vw; }
  /* le logo mene a l'accueil : l'entree Accueil est superflue ici,
     et sans elle les 5 entrees tiennent sans defilement */
  .site-nav li:first-child { display: none; }
  .site-nav ul {
    flex-wrap: nowrap; justify-content: center;
    gap: 0 20px; padding-inline: 5vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .site-nav ul::-webkit-scrollbar { display: none; }
  .site-nav a { min-height: 42px; font-size: 0.84rem; letter-spacing: 0.02em; white-space: nowrap; }
}

/* ---------- fil d'ariane et sous-navigation ---------- */

.page-hero {
  background: var(--surface);
  padding-block: clamp(44px, 7vw, 76px);
  border-bottom: 1px solid rgba(190, 154, 92, 0.35);
}
.breadcrumb { font-size: var(--t-xs); color: var(--ink-soft); margin-bottom: 16px; letter-spacing: 0.06em; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.breadcrumb li::after { content: "\203A"; margin-left: 8px; color: var(--or); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--ink-soft); }

.section-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
.section-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 8px 20px; border-radius: 999px;
  border: 1px solid var(--surface-deep); background: var(--background);
  text-decoration: none; font-size: var(--t-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  transition: border-color var(--dur), color var(--dur), background-color var(--dur);
}
.section-nav a:hover { border-color: var(--or); color: var(--rose); background: #fff; }

/* ---------- pages de contenu ---------- */

.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.7em; font-size: var(--t-lg); }
.prose h3 { margin-top: 1.5em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.45em; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: var(--t-sm); }
.prose th, .prose td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--surface-deep); vertical-align: top; }
.prose th { background: var(--surface); font-weight: 600; }
.table-scroll { overflow-x: auto; }

/* ---------- encart "a completer" ---------- */


/* ---------- apparition au defilement ---------- */

/* Le masquage initial est conditionne a la classe `js` posee par le document :
   sans JavaScript, aucun contenu n'est cache. L'animation est un bonus. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); }
  .js .reveal.is-visible {
    opacity: 1; transform: none;
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  }
  .reveal.is-visible.d1 { transition-delay: 90ms; }
  .reveal.is-visible.d2 { transition-delay: 180ms; }
  .reveal.is-visible.d3 { transition-delay: 270ms; }
  /* au-dessus de la ligne de flottaison : jamais masque, le LCP compte des le premier rendu */
  .js .hero .reveal, .js .page-hero .reveal { opacity: 1; transform: none; }
}

/* le focus clavier comme les ancres re-scrollent sous le header colle (WCAG 2.4.11, C43) */
html { scroll-padding-top: 96px; }

/* ===================================================================
 * AMBIANCE : en fin de feuille volontairement. Le raccourci
 * `background:` de .page-hero ecrasait les degrades declares plus haut
 * (background-image remis a none par le shorthand). Ici, la cascade
 * garantit que la couleur gagne, sur PC comme sur mobile, sans
 * background-attachment: fixed (ignore des navigateurs mobiles).
 * =================================================================== */

body { background-image: none; }

.hero, .page-hero {
  background-color: #f8efe9;
  background-image:
    radial-gradient(780px 640px at 90% -100px, rgba(193, 130, 111, 0.34), transparent 70%),
    radial-gradient(660px 580px at -90px 62%, rgba(63, 95, 70, 0.18), transparent 72%),
    linear-gradient(180deg, #f9f0ea 0%, var(--background) 100%);
}

/* les sections alternees se rechauffent d'un degrade a peine perceptible */
section.alt {
  background: linear-gradient(180deg, #f6ece6 0%, #f2e7e1 100%);
}

/* halo dore en tete des bandeaux verts : matiere, pas d'aplat brut */
.reassurance, .cta-band {
  background-color: var(--vert-deep);
  background-image: radial-gradient(720px 300px at 50% -90px, rgba(216, 184, 120, 0.16), transparent 70%);
}



/* points d'or entre les entrees de navigation (PC) */
@media (min-width: 768px) {
  .site-nav li { position: relative; }
  .site-nav li + li::before {
    content: ""; position: absolute; left: -15px; top: 50%;
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--or); transform: translateY(-50%);
  }
}

/* ---------- rappels du monogramme : la fleur en ornement discret ---------- */
.rule::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 20px; height: 20px; transform: translate(-50%, -50%);
  background: var(--background) url("favicon.svg") center / 20px no-repeat;
}
.rule { position: relative; overflow: visible; }
.cta-band .shell::before, .reassurance .shell::before {
  content: ""; display: block; width: 22px; height: 22px;
  margin: 0 auto 20px;
  background: url("fleur-or.svg") center / contain no-repeat;
  opacity: 0.85;
}
.reassurance .shell::before { margin-bottom: 24px; }
.page-hero .breadcrumb ol::before {
  content: ""; width: 14px; height: 14px; flex: none; align-self: center;
  background: var(--background) url("favicon.svg") center / 20px no-repeat;
}
/* liseret dore des arches de galerie, comme le hero (l outline suit
   le border-radius, la legende reste hors du filet) */
.gallery .media img {
  outline: 1px solid rgba(190, 154, 92, 0.55);
  outline-offset: 9px;
  border-radius: var(--arch);
}
.gallery { padding: 10px; }
/* pastilles mobiles : rdv a gauche, telephone a droite */
.phone-link, .rdv-link { display: none; }
@media (max-width: 767px) {
  .site-header .shell { position: relative; }
  .rdv-link {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; left: 0; top: 9px;
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--or); color: var(--vert);
  }
  .rdv-link svg { width: 19px; height: 19px; }
  .phone-link {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; right: 0; top: 9px;
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--or); color: var(--rose);
  }
  .phone-link svg { width: 19px; height: 19px; }
  html { scroll-padding-top: 118px; }
}
/* tres petits ecrans : le logo cede la place a la pastille telephone */
@media (max-width: 380px) {
  .logo { font-size: 1.22rem; gap: 8px; }
  .logo-mark { width: 29px; height: 34px; }
  .phone-link { width: 40px; height: 40px; }
}
/* ligne developpeur v3 du parc : composition centree, QR, badges git */
.dev-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 36px; margin-top: 16px; padding-top: 2px;
}
.dev-band::before {
  content: ""; flex-basis: 100%; height: 1px; margin-bottom: 14px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}
.dev-qr { display: block; text-align: center; flex: none; text-decoration: none; }
.dev-qr img {
  width: 72px; height: 72px; image-rendering: pixelated;
  background: #fff; padding: 4px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
}
.dev-qr span { display: block; margin-top: 6px; font-size: 10px; color: rgba(255,255,255,0.4); }
.dev-credit-block { text-align: center; }
.dev-credit { margin: 0; font-size: var(--t-sm); color: rgba(255,255,255,0.8); }
.dev-credit a { color: #fff; font-weight: 500; text-decoration: none; }
.dev-credit a:hover { color: var(--or-clair); text-decoration: underline; }
.dev-role { margin: 4px 0 0; font-size: var(--t-xs); color: rgba(255,255,255,0.45); }
.dev-links { margin: 10px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; font-size: var(--t-xs); }
.dev-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: rgba(255,255,255,0.6); text-decoration: none; }
.dev-links a:hover { color: var(--or-clair); }
.dev-badges { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.badges-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.badge-git {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(216,184,120,0.3); background: rgba(216,184,120,0.05);
  border-radius: 999px; padding: 4px 12px;
  font-family: ui-monospace, Consolas, monospace; font-size: 11px;
  color: rgba(216,184,120,0.9); text-decoration: none;
  transition: border-color var(--dur), color var(--dur);
}
a.badge-git:hover { border-color: rgba(216,184,120,0.6); color: #fff; }
.dev-stack { margin: 0; font-family: ui-monospace, Consolas, monospace; font-size: 10px; color: rgba(255,255,255,0.35); }
/* ---------- correctifs audit 2026-08-09 ---------- */
/* contraste AA : le rose de base tombe a 4,34:1 sur le bas du degrade .alt */
section.alt .price-list .price, section.alt .service-row .from,
section.alt .note a, section.alt .source-note a, section.alt .desc a,
section.alt p a { color: var(--rose-hover); }
/* focus visible sur les fonds vert fonce (1,42:1 avant) */
.site-footer :focus-visible, .cta-band :focus-visible,
.reassurance :focus-visible { outline-color: var(--or-clair); }
/* pause de la bande d'avis hors viewport : batterie mobile */
.marquee.offscreen { animation-play-state: paused; }

/* ---------- impression : la carte des soins et les horaires ---------- */
@media print {
  .site-header, .site-footer, .cta-band, .reassurance, .btn, .btn-row,
  .link-under, .marquee-controls, .phone-link, .section-nav, .breadcrumb { display: none !important; }
  body, section, section.alt, .hero, .page-hero { background: #fff !important; color: #000 !important; }
  .price-list .price, .eyebrow, a { color: #000 !important; }
  .media, .gallery, .card-thumb, .arch-panel { display: none !important; }
  a[href^="tel:"]::after { content: " (" attr(href) ")"; }
  [class*="reveal"] { opacity: 1 !important; transform: none !important; }
}
/* mobile : l'arche typographique redevient un cartouche, pas un ecran */
@media (max-width: 767px) {
  .arch-panel { max-width: 230px; padding: 22px 18px; gap: 6px; }
  .arch-panel .ap-price { font-size: 2.7rem; }
  .arch-panel .ap-label { font-size: 0.68rem; }
  .arch-panel .ap-meta { font-size: 0.82rem; }
}

/* mobile : footer compact, tout centre dans l'axe */
@media (max-width: 767px) {
  .site-footer { padding-block: 32px 0; }
  .footer-rule { width: min(300px, 62%); margin-bottom: 22px; }
  .footer-grid { gap: 20px; text-align: center; }
  .footer-sign { justify-content: center; }
  .footer-mission, .f-meta, .f-note { margin-inline: auto; }
  .f-contact li a { justify-content: center; }
  .f-nav { max-width: 320px; margin-inline: auto; gap: 0 26px; }
  .footer-bottom { margin-top: 24px; }
}

/* ---------- fondu inter-pages : progressif, CSS seul, jamais sous motion reduit ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur); }
}

/* ---------- contraste renforce a la demande de l'utilisateur ---------- */
@media (prefers-contrast: more) {
  :root { --ink-soft: #453833; --rose: #834a3b; --or-clair: #e6cf9a; }
}

/* ---------- Windows Contrast Themes : les indicateurs portes par background survivent ---------- */
@media (forced-colors: active) {
  .site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
  .faq summary::before, .faq summary::after { background: CanvasText; }
  .js .marquee-viewport { -webkit-mask-image: none; mask-image: none; }
}