/* =========================================================================
   Laure Trevisan — pédicure-podologue
   Feuille de style principale
   Direction : « Bleu ardoise & lin ». Tous les tokens viennent de design.md.
   Organisation : 1 tokens · 2 socle · 3 utilitaires · 4 en-tête · 5 pied
                  6 composants · 7 pages · 8 impression
   ========================================================================= */

/* ---------- 1. Tokens --------------------------------------------------- */

:root {
  /* Couleurs */
  --c-fond:         #F8F7F4;
  --c-surface:      #EDEAE4;
  --c-bordure:      #DCD8D0;
  --c-accent:       #2F4F63;
  --c-accent-fonce: #22394A;
  --c-accent-voile: #DCE6EB;
  --c-texte:        #262B2F;
  --c-texte-doux:   #55606A;
  --c-attention:    #8C4A2F;
  --c-blanc:        #FFFFFF;

  /* Typographie */
  --f-titre: "Newsreader", Georgia, "Times New Roman", serif;
  --f-corps: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible",
             system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Espacements — base 4 */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;

  /* Formes — « l'arche » est le seul geste décoratif du site */
  --r-petit: 8px;
  --r-arche: 40px 8px 8px 8px;

  /* Largeurs */
  --l-contenu: 72rem;
  --l-texte: 34rem;

  /* Cibles tactiles */
  --h-bouton: 52px;
  --h-champ: 52px;

  /* Rythme vertical entre sections */
  --rythme: 64px;
}

@media (min-width: 768px) {
  :root { --rythme: 96px; }
}

/* Polices auto-hébergées.
   Les fichiers .woff2 sont à déposer dans /assets/fonts/ — voir la checklist.
   Tant qu'ils sont absents, les replis système prennent le relais sans casse. */
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-hyperlegible-next-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ---------- 2. Socle ---------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-fond);
  color: var(--c-texte);
  font-family: var(--f-corps);
  font-size: 1.125rem;   /* 18 px — plancher imposé par le brief */
  line-height: 1.65;
  /* Compense la barre d'action fixe en mobile */
  padding-bottom: 72px;
}

@media (min-width: 768px) {
  body { padding-bottom: 0; }
}

h1, h2, h3 {
  font-family: var(--f-titre);
  font-weight: 600;
  color: var(--c-accent);
  margin: 0 0 var(--e-4);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 6vw, 2.875rem); line-height: 1.15; }
h2 { font-size: clamp(1.625rem, 4vw, 2rem); line-height: 1.2; margin-top: 0; }
h3 { font-size: 1.375rem; line-height: 1.3; }

h4 {
  font-family: var(--f-corps);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.35;
  margin: 0 0 var(--e-2);
  color: var(--c-texte);
}

p, ul, ol { margin: 0 0 var(--e-4); }

ul, ol { padding-left: 1.4em; }
li { margin-bottom: var(--e-2); }

a {
  color: var(--c-accent);
  text-underline-offset: .18em;
  text-decoration-thickness: from-font;
}

a:hover { color: var(--c-accent-fonce); }

/* Le focus est visible partout et n'est jamais supprimé. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

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

strong { font-weight: 700; }

/* Respect de prefers-reduced-motion : aucune transition au-delà de 150 ms. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 3. Utilitaires --------------------------------------------- */

.contenu {
  width: 100%;
  max-width: var(--l-contenu);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px)  { .contenu { padding-inline: 32px; } }
@media (min-width: 1200px) { .contenu { padding-inline: 48px; } }

.section { padding-block: var(--rythme); }
.section--lin { background: var(--c-surface); }
.section--voile { background: var(--c-accent-voile); }

/* Colonne de lecture : 62-70 caractères maximum. */
.prose { max-width: var(--l-texte); }
.prose > * + h2 { margin-top: var(--e-7); }
.prose > * + h3 { margin-top: var(--e-6); }

.surtitre {
  display: block;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texte-doux);
  margin-bottom: var(--e-2);
}

.chapo {
  font-size: 1.25rem;
  line-height: 1.55;
  max-width: var(--l-texte);
}

.doux { color: var(--c-texte-doux); }

.tel-clair {
  font-weight: 700;
  white-space: nowrap;
}

/* Lien d'évitement — premier élément du DOM. */
.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-accent);
  color: var(--c-blanc);
  padding: var(--e-3) var(--e-4);
  z-index: 100;
}

.evitement:focus {
  left: var(--e-3);
  top: var(--e-3);
}

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

/* ---------- 4. En-tête et navigation ------------------------------------ */

.entete {
  background: var(--c-fond);
  border-bottom: 1px solid var(--c-bordure);
  position: sticky;
  top: 0;
  z-index: 40;
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 76px;
}

.marque {
  font-family: var(--f-titre);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--c-accent);
  text-decoration: none;
  line-height: 1.15;
}

.marque span {
  display: block;
  font-family: var(--f-corps);
  font-size: .875rem;
  font-weight: 400;
  color: var(--c-texte-doux);
}

.entete__actions {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.entete__tel { display: none; }

@media (min-width: 1100px) {
  .entete__tel {
    display: inline-block;
    text-decoration: none;
    font-weight: 700;
    color: var(--c-accent);
  }
  .entete__tel:hover { text-decoration: underline; }
}

.menu-bouton {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 2px solid var(--c-accent);
  border-radius: var(--r-petit);
  color: var(--c-accent);
  cursor: pointer;
}

.menu-bouton svg { width: 24px; height: 24px; }

.nav {
  display: none;
}

.nav__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__lien {
  display: block;
  padding: var(--e-3) var(--e-2);
  color: var(--c-texte);
  text-decoration: none;
  font-weight: 400;
  min-height: 48px;
}

.nav__lien:hover { text-decoration: underline; }

.nav__lien[aria-current="page"] {
  color: var(--c-accent);
  font-weight: 700;
}

/* Panneau plein écran en mobile */
@media (max-width: 1099px) {
  .nav[data-ouvert="true"] {
    display: block;
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--c-fond);
    overflow-y: auto;
    padding: var(--e-5) 20px var(--e-8);
    z-index: 50;
  }
  .nav[data-ouvert="true"] .nav__lien {
    font-size: 1.25rem;
    padding: var(--e-4) 0;
    border-bottom: 1px solid var(--c-bordure);
  }
}

@media (min-width: 1100px) {
  .menu-bouton { display: none; }
  .nav { display: block; }
  .nav__liste { display: flex; gap: var(--e-2); }
  .nav__lien { padding: var(--e-2) var(--e-3); }
}

/* ---------- 5. Pied de page --------------------------------------------- */

.pied {
  background: var(--c-accent);
  color: var(--c-blanc);
  padding-block: var(--e-8) var(--e-6);
  margin-top: var(--rythme);
}

.pied a { color: var(--c-blanc); }

.pied h2, .pied h3 {
  color: var(--c-blanc);
  font-size: 1.125rem;
  font-family: var(--f-corps);
  font-weight: 700;
  margin-bottom: var(--e-3);
}

.pied__grille {
  display: grid;
  gap: var(--e-6);
}

@media (min-width: 768px) {
  .pied__grille { grid-template-columns: repeat(3, 1fr); gap: var(--e-7); }
}

.pied__liste { list-style: none; margin: 0; padding: 0; }
.pied__liste li { margin-bottom: var(--e-2); }

.pied__legal {
  margin-top: var(--e-7);
  padding-top: var(--e-5);
  border-top: 1px solid rgba(255, 255, 255, .25);
  font-size: 1rem;
}

.pied__urgence {
  background: rgba(255, 255, 255, .1);
  border-left: 4px solid var(--c-blanc);
  padding: var(--e-4);
  border-radius: 0 var(--r-petit) var(--r-petit) 0;
  margin-bottom: var(--e-6);
  font-size: 1rem;
}

/* ---------- 6. Composants ----------------------------------------------- */

/* --- Boutons --- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 56px;
  padding: var(--e-4) 28px;
  border: 2px solid var(--c-accent);
  border-radius: var(--r-petit);
  background: var(--c-accent);
  color: var(--c-blanc);
  font-family: var(--f-corps);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease;
}

@media (min-width: 768px) { .bouton { min-height: var(--h-bouton); } }

.bouton:hover {
  background: var(--c-accent-fonce);
  border-color: var(--c-accent-fonce);
  color: var(--c-blanc);
}

.bouton:active { transform: translateY(1px); }

.bouton--secondaire {
  background: transparent;
  color: var(--c-accent);
}

.bouton--secondaire:hover {
  background: var(--c-accent-voile);
  border-color: var(--c-accent-fonce);
  color: var(--c-accent-fonce);
}

/* Variante posée sur le pied de page bleu */
.pied .bouton {
  background: var(--c-blanc);
  border-color: var(--c-blanc);
  color: var(--c-accent);
}

.pied .bouton:hover { background: var(--c-accent-voile); color: var(--c-accent-fonce); }

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-5);
}

/* --- Barre d'action fixe (mobile) --- */
.barre-action {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  padding-bottom: calc(var(--e-2) + env(safe-area-inset-bottom, 0px));
  background: var(--c-fond);
  border-top: 1px solid var(--c-bordure);
  z-index: 45;
}

.barre-action .bouton {
  flex: 1 1 60%;
  min-height: 52px;
  padding-inline: var(--e-3);
  font-size: 1rem;
}

.barre-action .bouton--secondaire { flex: 1 1 40%; }

@media (min-width: 768px) { .barre-action { display: none; } }

/* --- Hero — « l'arche » --- */
.hero { padding-block: var(--e-7) var(--rythme); }

.hero__grille {
  display: grid;
  gap: var(--e-6);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__grille { grid-template-columns: 1fr 1fr; gap: var(--e-8); }
}

.hero__image {
  border-radius: var(--r-arche);
  overflow: hidden;
  background: var(--c-surface);
}

.hero__image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.hero h1 { margin-bottom: var(--e-4); }

/* --- Bandeau de réassurance — faits vérifiables uniquement --- */
.reassurance {
  background: var(--c-accent-voile);
  padding-block: var(--e-5);
}

.reassurance__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  justify-content: center;
  text-align: center;
  font-weight: 700;
  color: var(--c-accent);
}

.reassurance__liste li { margin: 0; }

@media (min-width: 768px) {
  .reassurance__liste li + li { position: relative; }
  .reassurance__liste li + li::before {
    content: "·";
    position: absolute;
    left: calc(var(--e-5) / -2);
    transform: translateX(-50%);
    color: var(--c-texte-doux);
  }
}

/* --- Grille et cartes de soins --- */
.grille-cartes {
  display: grid;
  gap: var(--e-4);
  margin-top: var(--e-6);
}

@media (min-width: 768px)  { .grille-cartes { grid-template-columns: repeat(2, 1fr); gap: var(--e-5); } }
@media (min-width: 1100px) { .grille-cartes { grid-template-columns: repeat(3, 1fr); } }

.carte {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-bordure);
  border-radius: var(--r-arche);
  padding: var(--e-5);
  display: flex;
  flex-direction: column;
}

.carte h3 {
  font-family: var(--f-corps);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--c-texte);
  margin-bottom: var(--e-3);
}

.carte ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--e-4);
  font-size: 1rem;
  color: var(--c-texte-doux);
}

.carte li { padding-left: 1.1em; position: relative; }
.carte li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--c-accent);
}

.carte__lien {
  margin-top: auto;
  font-weight: 700;
  align-self: flex-start;
}

/* La carte entière est cliquable, mais le lien réel reste dans le DOM
   pour le clavier et les lecteurs d'écran. */
.carte__lien::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-arche);
}

.carte:has(.carte__lien:hover) { border-color: var(--c-accent); }

/* --- Fil d'Ariane --- */
.ariane {
  font-size: 1rem;
  padding-block: var(--e-4);
  border-bottom: 1px solid var(--c-bordure);
}

.ariane ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
}

.ariane li { margin: 0; }
.ariane li + li::before { content: "› "; color: var(--c-texte-doux); }

/* --- Tableau des tarifs --- */
.tableau-enveloppe { margin-block: var(--e-5); }

.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.0625rem;
}

.tableau caption {
  text-align: left;
  font-size: 1rem;
  color: var(--c-texte-doux);
  margin-bottom: var(--e-3);
}

.tableau th, .tableau td {
  text-align: left;
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--c-bordure);
  vertical-align: top;
}

.tableau thead th {
  background: var(--c-accent);
  color: var(--c-blanc);
  font-weight: 700;
}

.tableau tbody tr:nth-child(even) { background: var(--c-surface); }

/* Sous 640 px, bascule en blocs plutôt qu'en défilement horizontal. */
@media (max-width: 639px) {
  .tableau thead { display: none; }
  .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
  .tableau tr {
    border: 1px solid var(--c-bordure);
    border-radius: var(--r-petit);
    margin-bottom: var(--e-4);
    background: var(--c-surface);
    padding: var(--e-3);
  }
  .tableau td { border: 0; padding: var(--e-2) 0; }
  .tableau td::before {
    content: attr(data-intitule);
    display: block;
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-texte-doux);
  }
}

/* --- FAQ : <details> natifs, aucune dépendance JS --- */
.faq { max-width: 46rem; }

.faq details {
  border: 1px solid var(--c-bordure);
  border-radius: var(--r-petit);
  background: var(--c-surface);
  margin-bottom: var(--e-3);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-3);
  min-height: 56px;
  padding: var(--e-3) var(--e-4);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-accent);
  flex: none;
}

.faq details[open] summary::after { content: "–"; }

.faq details > div {
  padding: 0 var(--e-4) var(--e-4);
  max-width: var(--l-texte);
}

.faq details > div > *:last-child { margin-bottom: 0; }

/* --- Encadrés --- */
.encadre {
  background: var(--c-surface);
  border: 1px solid var(--c-bordure);
  border-radius: var(--r-petit);
  padding: var(--e-5);
  margin-block: var(--e-5);
}

.encadre > *:last-child { margin-bottom: 0; }

.encadre--attention {
  background: var(--c-fond);
  border-left: 4px solid var(--c-attention);
}

.encadre--attention h3 { color: var(--c-attention); }

/* --- Formulaire --- */
.formulaire { max-width: 36rem; }

.champ { margin-bottom: var(--e-5); }

.champ label {
  display: block;
  font-weight: 700;
  margin-bottom: var(--e-2);
}

.champ .aide {
  display: block;
  font-size: 1rem;
  color: var(--c-texte-doux);
  margin-bottom: var(--e-2);
  font-weight: 400;
}

.champ input,
.champ textarea,
.champ select {
  width: 100%;
  min-height: var(--h-champ);
  padding: var(--e-3) var(--e-4);
  border: 2px solid var(--c-bordure);
  border-radius: var(--r-petit);
  background: var(--c-blanc);
  color: var(--c-texte);
  font-family: var(--f-corps);
  font-size: 1.125rem;
}

.champ textarea { min-height: 160px; resize: vertical; }

.champ input:focus, .champ textarea:focus { border-color: var(--c-accent); }

.champ .erreur {
  display: block;
  color: var(--c-attention);
  font-weight: 700;
  margin-top: var(--e-2);
}

.champ input[aria-invalid="true"],
.champ textarea[aria-invalid="true"] { border-color: var(--c-attention); }

/* Piège à robots — masqué visuellement et aux lecteurs d'écran. */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.mention-rgpd {
  font-size: 1rem;
  color: var(--c-texte-doux);
  max-width: var(--l-texte);
  margin-top: var(--e-4);
}

/* --- Bandeau cookies — refus aussi simple que l'acceptation --- */
.cookies {
  position: fixed;
  inset: auto 0 0 0;
  background: var(--c-fond);
  border-top: 2px solid var(--c-accent);
  padding: var(--e-5) 0;
  z-index: 60;
  box-shadow: 0 -4px 16px rgba(38, 43, 47, .08);
}

.cookies[hidden] { display: none; }

.cookies__texte { max-width: 46rem; margin-bottom: var(--e-4); }

.cookies__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

/* Les deux boutons ont strictement le même poids visuel. */
.cookies__actions .bouton { flex: 1 1 220px; }

/* --- Bloc de consentement pour service tiers (Doctolib, carte) --- */
.consentement {
  background: var(--c-surface);
  border: 2px dashed var(--c-bordure);
  border-radius: var(--r-petit);
  padding: var(--e-6) var(--e-5);
  text-align: center;
}

.consentement > *:last-child { margin-bottom: 0; }

.cadre-tiers {
  width: 100%;
  min-height: 720px;
  border: 0;
  border-radius: var(--r-petit);
}

/* --- Bloc cartographique --- */
.carte-geo {
  border-radius: var(--r-arche);
  overflow: hidden;
  border: 1px solid var(--c-bordure);
  background: var(--c-surface);
}

.carte-geo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* --- Galerie --- */
.galerie {
  display: grid;
  gap: var(--e-4);
  margin-block: var(--e-5);
}

@media (min-width: 700px) { .galerie { grid-template-columns: repeat(2, 1fr); } }

.galerie figure { margin: 0; }

.galerie img {
  border-radius: var(--r-arche);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}

.galerie figcaption {
  font-size: 1rem;
  color: var(--c-texte-doux);
  margin-top: var(--e-2);
}

/* --- Deux colonnes texte + aside --- */
.duo {
  display: grid;
  gap: var(--e-6);
}

@media (min-width: 900px) {
  .duo { grid-template-columns: 1.15fr .85fr; gap: var(--e-8); align-items: start; }
}

/* --- Liste d'horaires --- */
.horaires {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 26rem;
}

.horaires li {
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--c-bordure);
}

.horaires strong { font-weight: 700; }

/* ---------- 7. Pages ----------------------------------------------------- */

.page-entete {
  padding-block: var(--e-7) var(--e-6);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-bordure);
}

.page-entete .chapo { margin-bottom: 0; }

/* Sommaire des étapes d'une séance — la numérotation encode un vrai ordre. */
.etapes {
  list-style: none;
  counter-reset: etape;
  padding: 0;
  margin: 0 0 var(--e-5);
  max-width: var(--l-texte);
}

.etapes li {
  counter-increment: etape;
  position: relative;
  padding-left: 3rem;
  margin-bottom: var(--e-4);
}

.etapes li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: .1em;
  width: 2rem; height: 2rem;
  display: grid;
  place-items: center;
  background: var(--c-accent-voile);
  color: var(--c-accent);
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
}

/* ---------- 8. Mouvement -------------------------------------------------

   Trois règles, dans cet ordre de priorité :

   1. Aucun contenu ne dépend du JavaScript pour être visible. La classe
      .js-anim n'est posée sur <html> que si le visiteur n'a pas demandé de
      réduction des animations. Sans elle, tout s'affiche normalement.
   2. Le hero n'est jamais animé. C'est l'élément le plus important de la page
      et celui que mesure le LCP : il ne doit pas attendre.
   3. Uniquement opacity et transform, jamais height ni box-shadow au défilement.
      Ce sont les deux seules propriétés que le compositeur traite sans
      recalculer la mise en page.
   ------------------------------------------------------------------------- */

/* Apparition au défilement */
.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease,
              transform .55s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--retard, 0ms);
  will-change: opacity, transform;
}

.js-anim [data-reveal].est-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Les pastilles numérotées du déroulé se posent avec un léger rebond. */
.js-anim .etapes li[data-reveal]::before {
  transform: scale(.72);
  transition: transform .45s cubic-bezier(.34, 1.4, .64, 1);
  transition-delay: var(--retard, 0ms);
}

.js-anim .etapes li[data-reveal].est-visible::before { transform: none; }

/* En-tête : un filet d'ombre apparaît dès que la page a défilé, pour détacher
   la barre du contenu. Ce n'est pas une animation d'entrée, donc elle
   s'applique aussi en mode réduction de mouvement. */
.entete { transition: box-shadow .25s ease; }
.entete--defile { box-shadow: 0 2px 14px rgba(38, 43, 47, .09); }

/* Cartes de soins : le survol accentue l'arche. C'est le seul endroit où la
   signature graphique bouge. */
.carte {
  transition: border-color .2s ease,
              transform .2s ease,
              box-shadow .2s ease,
              border-radius .25s ease;
}

.carte:has(.carte__lien:hover),
.carte:has(.carte__lien:focus-visible) {
  border-color: var(--c-accent);
  border-radius: 56px 8px 8px 8px;
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(38, 43, 47, .10);
}

/* FAQ : ouverture fluide là où le navigateur le permet, bascule instantanée
   ailleurs. Aucun JavaScript, la balise <details> reste native. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  .js-anim .faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .3s ease, content-visibility .3s allow-discrete;
  }

  .js-anim .faq details[open]::details-content { block-size: auto; }
}

.faq summary::after { transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(180deg); }

/* Les ancres ne doivent pas se caler sous l'en-tête collant. */
[id] { scroll-margin-top: 96px; }

/* ---------- 9. Impression ------------------------------------------------ */

@media print {
  .barre-action, .cookies, .entete__actions, .nav, .evitement { display: none !important; }
  body { padding-bottom: 0; background: #fff; color: #000; font-size: 12pt; }
  .pied { background: #fff; color: #000; }
  .pied a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; }
}