/* ==========================================================================
   Cabinet Infirmier Auguste
   Direction artistique conforme a la fiche technique du 27 aout 2026.

   Palette chaude et sophistiquee : ivoire, beige chaud, sable, terracotta
   leger, brun rose, touches de bordeaux en rappel du symbole medical.
   Aucun bleu medical dominant.

   Contrainte de la fiche : aucun tiret dans les titres, les textes ni les
   elements visuels. Les separateurs graphiques utilisent donc un losange ou
   un point, jamais un trait horizontal.
   ========================================================================== */

:root {
  /* Surfaces */
  --ivoire:     #fbf8f3;
  --beige:      #f0e6d8;
  --sable:      #e3d3be;
  --blanc:      #fffdfa;

  /* Encres, brun chaud, jamais de gris neutre */
  --encre:      #2e241f;   /* 14,3:1 sur ivoire */
  --encre-2:    #6b574e;   /*  6,4:1 sur ivoire */

  /* Accents */
  --terracotta: #c98b6b;   /*  2,7:1  aplats et filets uniquement */
  --brun-rose:  #8c5f52;   /*  5,1:1  texte secondaire accentue */
  --bordeaux:   #7b2233;   /*  9,4:1  accent principal, rappel medical */
  --bordeaux-f: #5d1626;
  --or-pale:    #c9a86a;

  --rayon:      4px;
  --rayon-lg:   10px;
  --max:        1200px;
  --max-texte:  66ch;

  --ombre:       0 1px 2px rgba(46, 36, 31, .04), 0 12px 40px rgba(46, 36, 31, .07);
  --ombre-forte: 0 2px 8px rgba(46, 36, 31, .07), 0 28px 70px rgba(46, 36, 31, .13);

  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:    "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* --------------------------------------------------------------- Reset --- */

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

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

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.78;
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -.005em;
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-weight: 400; }

/* Jost s'arrete a 600 : sans cette regle, strong demande du 700 inexistant
   et le navigateur fabrique un faux gras illisible aux petites tailles. */
strong, b { font-weight: 600; }

p { margin: 0 0 1.15em; max-width: var(--max-texte); }
p:last-child { margin-bottom: 0; }

a { color: var(--bordeaux); text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { color: var(--bordeaux-f); }

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

/* ------------------------------------------------------------ Structure --- */

.conteneur { width: min(100% - 2.75rem, var(--max)); margin-inline: auto; }
.conteneur--etroit { width: min(100% - 2.75rem, 900px); margin-inline: auto; }

.section { padding: clamp(4.5rem, 10vw, 9rem) 0; position: relative; }
.section--beige { background: var(--beige); }
.section--sable { background: var(--sable); }
.section--serree { padding-block: clamp(3rem, 6vw, 5rem); }
.section > .conteneur, .section > .conteneur--etroit { position: relative; z-index: 1; }

.section__intro { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section__intro--centre { margin-inline: auto; text-align: center; }
.section__intro--centre p { margin-inline: auto; }

/* Surtitre : losange, jamais de trait horizontal (contrainte de la fiche) */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-bottom: 1.1rem;
}
.surtitre::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--bordeaux);
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.chapo {
  font-size: clamp(1.08rem, 1.6vw, 1.22rem);
  color: var(--encre-2);
  max-width: 58ch;
  font-weight: 300;
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .93rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: .35rem;
  border-bottom: 1px solid rgba(123, 34, 51, .3);
}
.lien-fleche::after { content: "\2192"; transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.lien-fleche:hover { border-bottom-color: var(--bordeaux); }
.lien-fleche:hover::after { transform: translateX(5px); }

/* -------------------------------------------------------------- Boutons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 54px;
  padding: .9rem 2rem;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background-color .35s ease, color .35s ease,
              border-color .35s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { flex: 0 0 auto; }

.btn--principal { background: var(--bordeaux); color: #fff; }
.btn--principal:hover { background: var(--bordeaux-f); color: #fff; }

.btn--secondaire { background: transparent; color: var(--encre); border-color: rgba(46, 36, 31, .28); }
.btn--secondaire:hover { border-color: var(--bordeaux); color: var(--bordeaux); }

.btn--clair { background: rgba(255, 253, 250, .12); color: #fff; border-color: rgba(255, 253, 250, .55); }
.btn--clair:hover { background: var(--blanc); color: var(--bordeaux); border-color: var(--blanc); }

.btn--plein { width: 100%; }

.groupe-btn { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }

/* --------------------------------------------------------------- Entete --- */
/* Disposition imposee par la fiche : telephone a gauche, nom au centre,
   symbole a droite. */

.entete {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251, 248, 243, .94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(227, 211, 190, .8);
  transition: box-shadow .4s ease, background-color .4s ease;
}
.entete--compacte { box-shadow: 0 12px 40px rgba(46, 36, 31, .07); background: rgba(251, 248, 243, .98); }

.entete__barre {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  min-height: 92px;
  transition: min-height .4s ease;
}
/* Barre resserree au defilement : avec le bandeau qui reste colle, chaque
   pixel gagne compte sur un ecran d'ordinateur portable. */
.entete--compacte .entete__barre { min-height: 66px; }
.entete--compacte .rubans .conteneur { padding-block: .38rem; }

.entete__tel {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  justify-self: start;
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--encre);
  text-decoration: none;
  white-space: nowrap;
}
.entete__tel svg { color: var(--bordeaux); flex: 0 0 auto; }
.entete__tel:hover { color: var(--bordeaux); }
.entete__tel span { display: block; }
.entete__tel small {
  display: block;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-2);
  line-height: 1.5;
}

.marque {
  justify-self: center;
  text-align: center;
  text-decoration: none;
  color: var(--encre);
  display: grid;
  grid-template-columns: auto 1fr;   /* le caducee, puis le bloc de texte */
  align-items: center;
  column-gap: .85rem;
}
/* Caducee fourni par le client, vectorise depuis Caduce.png. La couleur est
   figee dans le fichier SVG : un <img> n'herite pas de currentColor. */
.marque__caducee {
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  opacity: .9;
  flex: 0 0 auto;
}
.marque__nom {
  display: block;
  font-family: var(--sans);
  font-size: clamp(.82rem, 1.5vw, 1.02rem);
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marque__meta {
  display: block;
  font-family: var(--display);
  font-size: .92rem;
  font-style: italic;
  color: var(--encre-2);
  letter-spacing: .02em;
}

.entete__fin { justify-self: end; display: flex; align-items: center; gap: 1rem; }
.entete__sceau { width: 58px; height: 58px; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.entete__sceau:hover { transform: rotate(-6deg) scale(1.05); }
.entete--compacte .entete__sceau { width: 48px; height: 48px; }

.burger {
  display: none;
  width: 48px; height: 48px;
  border: 1px solid rgba(46, 36, 31, .22);
  border-radius: var(--rayon);
  background: transparent;
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.burger span { display: block; width: 20px; height: 1px; background: var(--encre); position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 1px; background: var(--encre);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }

.nav__liste { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav__lien {
  color: var(--encre);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .5rem 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav__lien:hover { border-bottom-color: var(--terracotta); color: var(--encre); }
.nav__lien[aria-current="page"] { border-bottom-color: var(--bordeaux); color: var(--bordeaux); }

/* Le panneau deroulant n'existe qu'en petit ecran. Sans cette regle il
   s'affichait en bloc statique sous l'entete en desktop, ce qui faisait deux
   menus empiles et une entete de 179 px au lieu de 141. */
.nav { display: none; }

/* Barre de navigation secondaire, a l'interieur du <header>.
   Elle herite ainsi du position: sticky de l'entete et reste visible pendant
   tout le defilement. Le fond est transparent : c'est celui de l'entete, avec
   son flou, qui s'applique. Le trait separe la barre principale du bandeau,
   la bordure basse de l'entete fermant l'ensemble. */
.rubans {
  border-top: 1px solid rgba(227, 211, 190, .7);
  background: transparent;
  transition: padding .4s ease;
}
.rubans .conteneur {
  display: flex;
  justify-content: center;
  padding-block: .55rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.rubans .conteneur::-webkit-scrollbar { display: none; }
.rubans .nav__liste { flex: 0 0 auto; }


/* ----------------------------------------------------------------- Hero --- */

.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  color: #fff;
  padding: clamp(5rem, 12vw, 9rem) 0;
}
.hero__fond { position: absolute; inset: 0; z-index: -2; background: var(--encre); }
.hero__fond img, .hero__fond video { width: 100%; height: 100%; object-fit: cover; }
/* L'illustration sert de texture, pas d'image de fond : posee a faible
   opacite sur l'encre, elle ne concurrence jamais le texte. */
.hero__fond img { opacity: .32; }

/* Voile calcule pour le pire cas, c'est a dire une video tres lumineuse.
   A 0,72 d'opacite, du blanc sur une source blanche donne encore 5,0:1.
   Ne pas descendre ces valeurs sans refaire le calcul. */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(46, 36, 31, .76) 0%, rgba(46, 36, 31, .72) 45%, rgba(46, 36, 31, .86) 100%);
}
.hero h1, .hero .chapo, .hero .surtitre {
  text-shadow: 0 1px 28px rgba(46, 36, 31, .55);
}
.hero h1 { color: #fff; max-width: 16ch; margin-inline: auto; }
.hero .chapo { color: rgba(255, 253, 250, .92); margin-inline: auto; max-width: 46ch; }
.hero .surtitre { color: rgba(255, 253, 250, .88); }
.hero .surtitre::before { background: var(--or-pale); }
.hero .groupe-btn { justify-content: center; }

/* Apparition mot a mot du message court */
.mots > span { display: inline-block; }
.js-revelation .mots > span {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--m, 0) * 85ms);
}
.js-revelation .mots[data-reveal="vu"] > span { opacity: 1; transform: none; }

.hero__defiler {
  position: absolute;
  left: 50%; bottom: 2rem;
  transform: translateX(-50%);
  font-size: .64rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255, 253, 250, .8);
  display: grid;
  justify-items: center;
  gap: .6rem;
}
.hero__defiler::after {
  content: "";
  width: 1px; height: 42px;
  background: linear-gradient(rgba(255, 253, 250, .8), transparent);
  animation: filet 2.6s ease-in-out infinite;
}
@keyframes filet { 0%, 100% { opacity: .3; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* ---------------------------------------------------------- Bandeau confiance */

.confiance {
  background: var(--encre);
  color: var(--blanc);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
  text-align: center;
}
.confiance__titre {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--or-pale);
  margin-bottom: 1rem;
}
.confiance p {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--blanc);
  max-width: 54ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------- Grilles -- */

.grille { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.duo--haut { align-items: start; }

/* --------------------------------------------------------------- Cartes --- */

.carte {
  background: var(--blanc);
  border: 1px solid rgba(227, 211, 190, .9);
  border-radius: var(--rayon);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  position: relative;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, border-color .45s ease;
}
.carte:hover, .carte:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--ombre);
  border-color: rgba(201, 139, 107, .7);
}
.carte h3 { margin-bottom: .6rem; }
.carte p { font-size: .99rem; color: var(--encre-2); }

.carte__num {
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 300;
  color: var(--terracotta);
  line-height: 1;
  display: block;
  margin-bottom: 1rem;
}
.carte__icone {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid rgba(201, 139, 107, .55);
  border-radius: 50%;
  color: var(--bordeaux);
  margin-bottom: 1.35rem;
  transition: background-color .45s ease, color .45s ease, transform .45s cubic-bezier(.34,1.4,.64,1);
}
.carte:hover .carte__icone { background: var(--bordeaux); color: var(--blanc); transform: scale(1.06); }

.liste-soins { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .65rem; }
.liste-soins li { position: relative; padding-left: 1.6rem; font-size: .99rem; color: var(--encre-2); }
.liste-soins li::before {
  content: "";
  position: absolute; left: 0; top: .72em;
  width: 6px; height: 6px;
  background: var(--terracotta);
  transform: rotate(45deg);
}

/* --------------------------------------------------- Emplacements photo --- */
/* La cliente n'a fourni aucune photographie. Ces cadres tiennent la mise en
   page et se remplacent par une balise img sans toucher au reste. */

.photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon);
  background:
    linear-gradient(135deg, var(--beige) 0%, var(--sable) 55%, var(--terracotta) 190%);
  display: grid;
  place-items: center;
  min-height: 260px;
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
/* min-height remis a zero : combine a aspect-ratio, il forcait la largeur
   de la boite au dela de sa colonne et faisait deborder la page. */
.photo--portrait { aspect-ratio: 3 / 4; min-height: 0; }
.photo--paysage  { aspect-ratio: 4 / 3; min-height: 0; }
.photo--large    { aspect-ratio: 16 / 9; min-height: 0; }

.photo__attente {
  display: grid;
  justify-items: center;
  gap: .85rem;
  padding: 2rem;
  text-align: center;
  color: var(--brun-rose);
}
.photo__attente svg { opacity: .55; }
.photo__attente span {
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  max-width: 24ch;
  line-height: 1.9;
}

/* ----------------------------------------------------------- Definitions -- */

.faits { margin: 0; border-top: 1px solid rgba(227, 211, 190, .9); }
.faits > div {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(227, 211, 190, .9);
}
.faits dt {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brun-rose);
  padding-top: .35rem;
}
.faits dd { margin: 0; }
.faits dd p { margin-bottom: .3rem; }
/* Les tarifs evoluent : on renvoie a la source officielle plutot que de les figer */
.faits dd a {
  color: var(--bordeaux);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  transition: color .25s ease;
}
.faits dd a:hover, .faits dd a:focus-visible { color: var(--bordeaux-f); }

/* ---------------------------------------------------------- Trois canaux -- */
/* Appel, SMS et WhatsApp, exiges par la fiche technique. */

.canaux { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.canal {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: .85rem;
  padding: clamp(1.75rem, 3vw, 2.5rem) 1.5rem;
  background: var(--blanc);
  border: 1px solid rgba(227, 211, 190, .9);
  border-radius: var(--rayon);
  text-decoration: none;
  color: var(--encre);
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, border-color .45s ease;
}
.canal:hover { transform: translateY(-5px); box-shadow: var(--ombre); border-color: rgba(123, 34, 51, .45); color: var(--encre); }
.canal__icone {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--beige);
  color: var(--bordeaux);
  transition: background-color .45s ease, color .45s ease;
}
.canal:hover .canal__icone { background: var(--bordeaux); color: var(--blanc); }
.canal__titre { font-family: var(--display); font-size: 1.45rem; font-weight: 400; }
.canal__detail { font-size: .86rem; letter-spacing: .1em; color: var(--encre-2); }

/* ------------------------------------------------------------- Encadres --- */

.encart {
  border: 1px solid rgba(227, 211, 190, .9);
  border-radius: var(--rayon);
  padding: clamp(1.85rem, 3.5vw, 3rem);
  background: var(--blanc);
}
.encart--beige { background: var(--beige); }
.encart--bordeaux {
  background: rgba(123, 34, 51, .05);
  border-color: rgba(123, 34, 51, .28);
}
.encart h2, .encart h3 { margin-top: 0; }

/* Urgences : encadre distinct mais elegant, sans rouge criard */
.urgence {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: auto 1fr;
  align-items: start;
  padding: clamp(1.85rem, 3.5vw, 2.75rem);
  background: var(--encre);
  color: var(--blanc);
  border-radius: var(--rayon);
}
.urgence__icone {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border: 1px solid var(--or-pale);
  border-radius: 50%;
  color: var(--or-pale);
}
.urgence h2, .urgence h3 { color: var(--blanc); margin-bottom: .5rem; font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.urgence p { color: rgba(255, 253, 250, .82); font-size: .99rem; }
.urgence__nums { display: flex; flex-wrap: wrap; gap: 1.75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.urgence__nums li { display: grid; gap: .1rem; }
.urgence__nums strong { font-family: var(--display); font-size: 2rem; font-weight: 400; color: var(--or-pale); line-height: 1; }
.urgence__nums span { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 253, 250, .7); }

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

.faq { display: grid; gap: 1rem; }
.faq details {
  background: var(--blanc);
  border: 1px solid rgba(227, 211, 190, .9);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: border-color .35s ease, box-shadow .35s ease;
}
.faq details[open] { border-color: rgba(201, 139, 107, .7); box-shadow: var(--ombre); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.4rem 3.5rem 1.4rem 1.75rem;
  font-family: var(--display);
  font-size: 1.24rem;
  font-weight: 400;
  position: relative;
  transition: background-color .3s ease;
}
.faq summary:hover { background: rgba(240, 230, 216, .55); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 1.6rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--bordeaux);
  transition: transform .35s cubic-bezier(.34,1.4,.64,1);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(135deg); }
.faq__reponse { padding: 0 1.75rem 1.6rem; color: var(--encre-2); }
.faq__reponse p { font-size: .99rem; }

/* ------------------------------------------------------------ Formulaire -- */

.form { display: grid; gap: 1.5rem; }
.champ { display: grid; gap: .45rem; }
.champ > label, .groupe-radio > legend {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brun-rose);
}
.champ__aide { font-size: .88rem; color: var(--encre-2); }
.requis { color: var(--bordeaux); }

.champ input[type="text"], .champ input[type="tel"], .champ select, .champ textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid rgba(46, 36, 31, .28);
  border-radius: var(--rayon);
  padding: .95rem 1.1rem;
  min-height: 54px;
  transition: border-color .3s ease;
}
.champ textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.champ select {
  appearance: none; padding-right: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M1 1l5.5 5.5L12 1' fill='none' stroke='%232e241f' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.15rem center;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--bordeaux); outline: 1px solid var(--bordeaux); }
.champ[data-erreur] input, .champ[data-erreur] select, .champ[data-erreur] textarea { border-color: var(--bordeaux); border-width: 2px; }
.champ__erreur { display: none; align-items: center; gap: .4rem; font-size: .86rem; color: var(--bordeaux); }
.champ[data-erreur] .champ__erreur { display: flex; }

.groupe-radio { border: 1px solid rgba(46, 36, 31, .28); border-radius: var(--rayon); padding: 1.1rem 1.25rem; margin: 0; }
.groupe-radio legend { padding: 0 .4rem; }
.groupe-radio__options { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .9rem; }
.option {
  display: flex; align-items: center; gap: .6rem;
  background: var(--ivoire);
  border: 1px solid rgba(227, 211, 190, .9);
  border-radius: var(--rayon);
  padding: .7rem 1.25rem;
  cursor: pointer;
  font-size: .97rem;
  min-height: 50px;
}
.option:has(input:checked) { border-color: var(--bordeaux); background: rgba(123, 34, 51, .06); }
.option input { accent-color: var(--bordeaux); width: 18px; height: 18px; }

.consentement {
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--beige);
  border-radius: var(--rayon);
  padding: 1.2rem 1.35rem;
}
.consentement input { accent-color: var(--bordeaux); width: 20px; height: 20px; margin-top: .3rem; flex: 0 0 auto; }
.consentement label { font-size: .92rem; color: var(--encre-2); line-height: 1.7; }

.pot-de-miel { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form__retour { display: none; border-radius: var(--rayon); padding: 1.35rem 1.5rem; border: 1px solid rgba(227, 211, 190, .9); background: var(--blanc); }
.form__retour[data-etat="ok"] { display: block; border-color: rgba(201, 139, 107, .8); background: var(--beige); }
.form__retour[data-etat="erreur"] { display: block; border-color: rgba(123, 34, 51, .5); background: rgba(123, 34, 51, .05); }
.form__retour strong { display: block; margin-bottom: .35rem; font-family: var(--display); font-size: 1.3rem; font-weight: 400; }
.form[hidden] { display: none; }

/* ---------------------------------------------------------------- Carte --- */
/* Chargee sur clic uniquement : aucun traceur tiers avant accord explicite. */

.carte-acces {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--rayon);
  overflow: hidden;
  background: linear-gradient(135deg, var(--beige), var(--sable));
  display: grid;
  place-items: center;
}
.carte-acces iframe { width: 100%; height: 100%; border: 0; }
.carte-acces__invite { display: grid; justify-items: center; gap: 1.1rem; text-align: center; padding: 2rem; }
.carte-acces__invite p { font-size: .92rem; color: var(--encre-2); max-width: 34ch; }
/* Le plan s'affiche d'office : l'information sur Google descend sous la carte */
.carte-acces__mentions {
  margin: .7rem 0 0;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--encre-2);
}
.carte-acces__mentions a { color: var(--bordeaux); text-decoration: underline; text-underline-offset: .16em; }

/* --------------------------------------------------------------- Parcours -- */

.parcours { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; counter-reset: etape; }
.parcours li { position: relative; padding-left: 4.5rem; counter-increment: etape; }
.parcours li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute; left: 0; top: -.35rem;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 300;
  color: var(--terracotta);
  line-height: 1;
}
.parcours strong { display: block; font-family: var(--display); font-size: 1.28rem; font-weight: 400; margin-bottom: .25rem; }
.parcours span { font-size: .97rem; color: var(--encre-2); }

/* ------------------------------------------------------- Fenetre prevention */

.prevention {
  position: fixed;
  inset: auto 1.5rem 1.5rem auto;
  z-index: 90;
  width: min(400px, calc(100vw - 3rem));
  background: var(--blanc);
  border: 1px solid rgba(227, 211, 190, .9);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-forte);
  padding: 1.75rem;
  display: none;
}
.prevention[data-ouvert="true"] { display: block; animation: monte .6s cubic-bezier(.22,.61,.36,1); }
@keyframes monte { from { opacity: 0; transform: translateY(24px); } }
.prevention__etiquette {
  font-size: .64rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--bordeaux); margin-bottom: .6rem;
}
.prevention h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.prevention p { font-size: .94rem; color: var(--encre-2); }
.prevention__fermer {
  position: absolute; top: .75rem; right: .75rem;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--encre-2); font-size: 1.3rem; line-height: 1;
  border-radius: 50%;
}
.prevention__fermer:hover { background: var(--beige); color: var(--encre); }

/* ------------------------------------------------------------------ Pied -- */

.pied { background: var(--encre); color: rgba(255, 253, 250, .78); padding: clamp(4rem, 8vw, 6rem) 0 7.5rem; }
.pied__haut { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3.5rem; }
/* Le logo est un dessin clair : sur le brun du pied de page, le cercle violet
   et les ailes grises disparaissent. On le pose sur une pastille ivoire. */
.pied__sceau {
  width: 76px; height: 76px;
  margin-bottom: 1.35rem;
  box-sizing: content-box;
  padding: 7px;
  background: var(--ivoire);
  border-radius: 50%;
}
.pied__nom {
  font-family: var(--sans); font-size: .82rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--blanc); margin-bottom: .8rem;
}
.pied h3 {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--or-pale); margin-bottom: 1.1rem;
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.pied a { color: rgba(255, 253, 250, .78); text-decoration: none; font-size: .95rem; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied p { font-size: .95rem; color: rgba(255, 253, 250, .7); }
.pied__bas {
  border-top: 1px solid rgba(255, 253, 250, .16);
  padding-top: 1.75rem;
  display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: space-between;
  font-size: .84rem;
}

/* Signature de l'agence : lisible sur le brun sans attirer l'oeil */
.pied .pied__signature {
  color: var(--or-pale);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
.pied .pied__signature:hover, .pied .pied__signature:focus-visible { color: var(--blanc); }

/* --------------------------------------------------------- Barre mobile --- */

.barre-mobile {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  gap: .5rem;
  padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
  background: rgba(251, 248, 243, .97);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(227, 211, 190, .9);
}
.barre-mobile .btn { flex: 1; min-height: 50px; padding: .65rem .5rem; font-size: .7rem; letter-spacing: .1em; }

/* ---------------------------------------------------------- Utilitaires --- */

.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--bordeaux); color: #fff; padding: .9rem 1.5rem;
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
}
.saut-contenu:focus { left: 0; }

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

.a-completer {
  display: inline-block;
  background: var(--or-pale);
  color: #35280f;
  padding: .1em .55em;
  font-size: .8em;
  font-weight: 400;
  letter-spacing: .08em;
  overflow-wrap: anywhere;
}

.centre { text-align: center; }
.centre p, .centre .chapo { margin-inline: auto; }

/* ------------------------------------------------------------ Animations -- */

.js-revelation [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .95s cubic-bezier(.22,.61,.36,1), transform .95s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--d, 0) * 110ms);
  will-change: opacity, transform;
}
.js-revelation [data-reveal="vu"] { opacity: 1; transform: none; will-change: auto; }
.js-revelation [data-reveal][data-sens="gauche"] { transform: translateX(-34px); }
.js-revelation [data-reveal][data-sens="droite"] { transform: translateX(34px); }
.js-revelation [data-reveal][data-sens="zoom"]   { transform: scale(.95); }
.js-revelation [data-reveal="vu"][data-sens]     { transform: none; }

/* Pastille de statut d'ouverture */
.statut { display: inline-flex; align-items: center; gap: .55rem; }
.statut::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--sable); }
.statut--ouvert::before { background: var(--terracotta); animation: pulsation 2.6s ease-out infinite; }
@keyframes pulsation {
  0%   { box-shadow: 0 0 0 0 rgba(201, 139, 107, .5); }
  70%  { box-shadow: 0 0 0 10px rgba(201, 139, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 139, 107, 0); }
}

/* ------------------------------------------------------------ Responsive -- */

@media (max-width: 1100px) {
  .pied__haut { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1000px) {
  /* Le bandeau de navigation reste affiche et defile au doigt. */
  .rubans .conteneur { justify-content: flex-start; }
  .rubans .nav__liste { gap: 1.5rem; padding-inline: .25rem; }

  .entete__barre { grid-template-columns: auto 1fr auto; }
  .marque__meta { display: none; }
  .entete__sceau { width: 46px; height: 46px; }
  .barre-mobile { display: flex; }
}

/* Sous 641 px, le bandeau cede la place au menu deroulant. */
@media (max-width: 640px) {
  .rubans { display: none; }
  .burger { display: grid; }

  .entete__tel span, .entete__tel small { display: none; }
  .entete__tel {
    width: 48px; height: 48px;
    justify-content: center;
    border: 1px solid rgba(46, 36, 31, .22);
    border-radius: var(--rayon);
  }

  /* min-height : le lien vers l'accueil doit rester une cible de 44 px */
  .marque { justify-self: center; min-width: 0; column-gap: .5rem;
            min-height: 44px; align-content: center; }
  .marque__caducee { width: 28px; height: 28px; }
  .marque__nom { white-space: normal; font-size: .74rem; letter-spacing: .18em; line-height: 1.5; }

  .nav {
    position: fixed; inset: auto 0 auto 0;
    background: var(--ivoire);
    border-bottom: 1px solid rgba(227, 211, 190, .9);
    box-shadow: var(--ombre);
    padding: 1.5rem 1.75rem 2.25rem;
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
  }
  .nav[data-ouvert="true"] { display: block; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lien {
    display: block;
    padding: 1.05rem .25rem;
    border-bottom: 1px solid rgba(227, 211, 190, .9);
    font-size: .84rem;
  }
  .nav__lien:hover, .nav__lien[aria-current="page"] { border-bottom-color: rgba(227, 211, 190, .9); }
  .nav .btn { margin-top: 1.35rem; width: 100%; }
}

@media (max-width: 760px) {
  .faits > div { grid-template-columns: 1fr; gap: .3rem; }
  .urgence { grid-template-columns: 1fr; }
  .prevention { inset: auto .75rem .75rem .75rem; width: auto; }
}

@media (max-width: 640px) {
  body { font-size: 1.02rem; }
  .conteneur, .conteneur--etroit { width: min(100% - 2rem, var(--max)); }
  .pied__haut { grid-template-columns: 1fr; gap: 2.25rem; }
  .groupe-btn .btn { width: 100%; }
  .urgence__nums { gap: 1.25rem; }
  .hero { min-height: 76vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js-revelation [data-reveal], .js-revelation .mots > span { opacity: 1; transform: none; }
  .btn:hover, .carte:hover, .canal:hover { transform: none; }
  .hero__defiler::after { animation: none; }
}

@media print {
  .entete, .rubans, .barre-mobile, .prevention, .hero__defiler, .groupe-btn { display: none !important; }
  body { background: #fff; font-size: 11pt; }
}

/* ==========================================================================
   Composants des pages secondaires
   ========================================================================== */

.btn--large { width: 100%; }
.section--orne { overflow: hidden; }

/* Liste des documents à apporter */
.liste-docs {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.liste-docs li {
  display: flex; align-items: center; gap: .8rem;
  background: var(--blanc);
  border: 1px solid rgba(227, 211, 190, .9);
  border-radius: var(--rayon);
  padding: .95rem 1.15rem;
  font-size: .97rem;
}
.liste-docs li svg { flex: 0 0 auto; color: var(--bordeaux); }

/* Blocs de contact */
.contact-blocs {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
}
.contact-bloc {
  background: var(--blanc);
  border: 1px solid rgba(227, 211, 190, .9);
  border-radius: var(--rayon);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, border-color .45s ease;
}
.contact-bloc:hover { transform: translateY(-4px); box-shadow: var(--ombre); border-color: rgba(201, 139, 107, .7); }
.contact-bloc__label {
  font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--brun-rose); margin-bottom: .7rem;
}
.contact-bloc__valeur {
  font-family: var(--display); font-size: 1.5rem; font-weight: 400;
  line-height: 1.35; overflow-wrap: anywhere;
}
.contact-bloc__valeur a { text-decoration: none; }
.contact-bloc__valeur a:hover { text-decoration: underline; }

/* Bandeau d'appel à l'action en fin de page */
.bandeau-cta {
  background: var(--encre);
  color: var(--blanc);
  border-radius: var(--rayon);
  padding: clamp(2.75rem, 6vw, 4.5rem);
  text-align: center;
}
.bandeau-cta h2 { color: var(--blanc); }
.bandeau-cta p { color: rgba(255, 253, 250, .82); margin-inline: auto; }
.bandeau-cta .groupe-btn { justify-content: center; }
.bandeau-cta .btn--principal { background: var(--or-pale); color: var(--encre); }
.bandeau-cta .btn--principal:hover { background: var(--blanc); color: var(--encre); }
.bandeau-cta .btn--secondaire { color: var(--blanc); border-color: rgba(255, 253, 250, .5); }
.bandeau-cta .btn--secondaire:hover { border-color: var(--blanc); color: var(--blanc); }

@media (max-width: 420px) {
  .entete__barre { gap: .5rem; min-height: 76px; }
  .marque__nom { font-size: .64rem; letter-spacing: .1em; }
  .entete__sceau { width: 38px; height: 38px; }
  /* 46 px et non 42 : sous 44 px la cible tactile devient difficile a viser. */
  .burger { width: 46px; height: 46px; }
  .entete__tel { width: 46px; height: 46px; }
}

/* Les cases et boutons radio heritent d'une taille de police de 13 px, ce qui
   suffit a declencher le zoom automatique de Safari iOS a la mise au point. */
input[type="radio"], input[type="checkbox"] { font-size: 1rem; }

/* Sur petit écran, les entrées latérales débordent la largeur tant que
   l'élément n'est pas révélé. Elles deviennent verticales, ce qui est de
   toute façon plus confortable sur mobile.
   Seuil porté de 760 à 1000 px : sur tablette, les colonnes deviennent pleine
   largeur et un décalage de 34 px suffisait à créer une barre horizontale
   pendant l'animation d'entrée. */
@media (max-width: 1000px) {
  .js-revelation [data-reveal][data-sens="gauche"],
  .js-revelation [data-reveal][data-sens="droite"] { transform: translateY(28px); }
}

/* Photographies provisoires
   Traitees en bichromie chaude pour s'accorder a la palette et neutraliser les
   dominantes froides des sources. Le bandeau evite qu'elles soient prises pour
   des photos reelles du cabinet : il disparait avec la classe photo__badge. */
.photo__badge {
  position: absolute;
  left: 0; bottom: 0;
  background: rgba(46, 36, 31, .82);
  color: var(--blanc);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .45rem .85rem;
  pointer-events: none;
}
.photo img { transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
.photo:hover img, .carte:hover .photo img { transform: scale(1.04); }

/* Video d'ambiance du hero
   Posee par dessus l'affiche, revelee seulement quand la lecture demarre.
   Le filtre reproduit la bichromie chaude appliquee aux photographies, pour
   que la video ne jure pas avec le reste. Une chaine de filtres CSS est
   preferee a un filtre SVG : elle est acceleree materiellement. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
  filter: grayscale(1) sepia(.62) saturate(1.65) hue-rotate(-12deg) contrast(1.04);
}
.hero__video[data-actif="true"] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* Saut de ligne voulu dans le chapeau du hero, neutralise sur les tres petits
   ecrans : en dessous de 400 px il isolait « d'État, » en fin de ligne. */
@media (max-width: 399px) {
  br.saut-large { display: none; }
}

/* Dans un encadré, le texte occupe toute la largeur de la boîte.
   La règle générale « p { max-width: 66ch } » arrêtait la ligne bien avant le
   bord, ce qui donnait l'impression d'un texte mal calé dans son cadre. Le
   conteneur plafonnant à 1200 px, la ligne ne dépasse jamais environ
   130 caractères, ce qui reste acceptable pour des rappels courts. */
.encart p,
.encart li { max-width: none; }

/* ==========================================================================
   Les deux modes de prise en charge, cartes menées par l'image
   ========================================================================== */

.prises-en-charge {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
}

.carte--media {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.carte__visuel {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--sable);
}
.carte__visuel img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.22, .61, .36, 1);
}
.carte--media:hover .carte__visuel img,
.carte--media:focus-within .carte__visuel img { transform: scale(1.06); }

/* Fondu vers la surface de la carte : l'image s'y raccorde au lieu de s'arrêter
   net. Volontairement court et peu opaque, sinon il délave le bas du visuel. */
.carte__visuel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 26%;
  background: linear-gradient(to bottom, rgba(255, 253, 250, 0), rgba(255, 253, 250, .55));
  pointer-events: none;
}

.carte__corps {
  position: relative;
  padding: 0 clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem);
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* La pastille chevauche le bas de l'image, ce qui lie les deux moitiés */
.carte--media .carte__icone {
  position: relative;
  z-index: 3;
  margin-top: -34px;
  margin-bottom: 1.25rem;
  width: 64px; height: 64px;
  background: var(--blanc);
  border-color: rgba(201, 139, 107, .8);
  box-shadow: 0 6px 22px rgba(46, 36, 31, .1);
}
.carte--media:hover .carte__icone { background: var(--bordeaux); color: var(--blanc); }

.carte--media h3 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); }
.carte--media .liste-soins { margin-top: auto; padding-top: 1.25rem; }

/* Filet d'accent qui se déploie au survol, sur toutes les cartes */
.carte::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bordeaux), var(--terracotta));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
  z-index: 2;
}
.carte:hover::before, .carte:focus-within::before { transform: scaleX(1); }

/* Les trois familles de soins : numéro plus présent et plus vivant */
.carte__num { transition: color .4s ease, transform .5s cubic-bezier(.34, 1.4, .64, 1); }
.carte:hover .carte__num { color: var(--bordeaux); transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .carte--media:hover .carte__visuel img { transform: none; }
  .carte:hover .carte__num { transform: none; }
  .carte::before { transition: none; }
}

/* Dans les cartes menées par l'image, la pastille occupe le coin bas gauche :
   le bandeau passe à droite pour ne pas être recouvert. */
.carte__visuel .photo__badge { left: auto; right: 0; }

/* ==========================================================================
   Informations pratiques : trois blocs de même niveau
   Les trois titres étaient auparavant à des hauteurs différentes, deux d'entre
   eux étant empilés dans la même colonne. Ils partagent désormais la même
   ligne de départ.
   ========================================================================== */

/* Grille figee a trois colonnes plutot qu'auto-fit : entre 768 et 1000 px,
   l'ajustement automatique donnait deux colonnes et une troisieme carte seule
   sur la ligne suivante, ce qui recreait le desequilibre a corriger. */
.infos-pratiques {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
@media (max-width: 1000px) {
  .infos-pratiques { grid-template-columns: 1fr; }
}

/* Une adresse de courriel longue ne doit pas elargir sa colonne */
.faits dd { overflow-wrap: anywhere; }

.carte__titre {
  font-size: clamp(1.5rem, 2.3vw, 1.95rem);
  margin-bottom: 1.4rem;
}

/* En colonne étroite, l'intitulé passe au dessus de sa valeur plutôt qu'à côté */
.faits--empile { border-top: 0; }
.faits--empile > div {
  grid-template-columns: 1fr;
  gap: .3rem;
  padding: 1.05rem 0;
}
.faits--empile > div:first-child { padding-top: 0; }
.faits--empile > div:last-child { border-bottom: 0; padding-bottom: 0; }
.faits--empile dt { padding-top: 0; }

/* ==========================================================================
   Vidéo de démonstration, page Consultations et soins
   Le fichier est vertical et pèse plusieurs mégaoctets : il est en lecture à
   la demande, avec preload="none". Rien ne part sur le réseau tant que le
   visiteur ne lance pas la lecture, y compris sur mobile.
   ========================================================================== */

.video-soin {
  position: relative;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--sable);
  max-width: 380px;
  margin-inline: auto;
}

.video-soin__lecteur {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 576 / 1088;
  background: var(--encre);
  /* Même bichromie chaude que les photographies : l'affiche est déjà traitée,
     ce filtre aligne les images animées dessus. */
  filter: grayscale(1) sepia(.62) saturate(1.65) hue-rotate(-12deg) contrast(1.04);
}

/* Le bandeau se place au dessus de la barre de lecture native */

/* ==========================================================================
   Espace d'administration du message de prévention
   Accessible via #admin. L'interface ne protège rien : c'est le serveur qui
   vérifie le mot de passe et refuse toute écriture sans lui.
   ========================================================================== */

.admin {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(46, 36, 31, .55);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: start center;
  padding: clamp(1rem, 4vw, 3rem) 1rem;
  overflow-y: auto;
}

.admin__boite {
  position: relative;
  width: min(100%, 620px);
  background: var(--ivoire);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-forte);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.admin__fermer {
  position: absolute;
  top: .85rem; right: .85rem;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--encre-2); font-size: 1.5rem; line-height: 1;
  border-radius: 50%;
}
.admin__fermer:hover { background: var(--beige); color: var(--encre); }

.admin__etiquette {
  font-size: .64rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--bordeaux); margin-bottom: .5rem;
}
.admin__titre { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 1.75rem; }

.admin form { display: grid; gap: 1.35rem; }

.admin__bascule {
  display: flex; align-items: center; gap: .85rem;
  background: var(--beige);
  border-radius: var(--rayon);
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-size: .97rem;
}
.admin__bascule input { accent-color: var(--bordeaux); width: 20px; height: 20px; flex: 0 0 auto; }

.admin__compteur {
  float: right;
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--encre-2);
  text-transform: none;
}

.admin__note {
  font-size: .86rem;
  color: var(--encre-2);
  background: rgba(123, 34, 51, .05);
  border-left: 3px solid rgba(123, 34, 51, .35);
  padding: .85rem 1.1rem;
  margin: 0;
}

.admin__apercu { border-top: 1px solid rgba(227, 211, 190, .9); padding-top: 1.35rem; }
.admin__apercu-titre {
  font-size: .64rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--brun-rose); margin-bottom: .85rem;
}
/* L'aperçu réutilise l'apparence réelle de la fenêtre, en statique */
.prevention--apercu {
  position: static;
  display: block;
  width: auto;
  animation: none;
  box-shadow: none;
  border: 1px solid rgba(227, 211, 190, .9);
}
[data-inactif="oui"] .prevention--apercu { opacity: .45; }
[data-inactif="oui"] .admin__apercu-titre::after {
  content: " · masqué pour les visiteurs";
  letter-spacing: .08em;
}

.admin__retour { margin: 0; font-size: .9rem; min-height: 1.2em; }
.admin__retour[data-etat="erreur"] { color: var(--bordeaux); font-weight: 400; }
.admin__retour[data-etat="ok"] { color: var(--sauge-txt, #4d6845); }

.admin__actions { display: flex; flex-wrap: wrap; gap: .85rem; }
.admin__actions .btn { flex: 1 1 auto; }

.admin__maj { margin: 0; font-size: .8rem; color: var(--encre-2); }

@media (max-width: 520px) {
  .admin__boite { padding: 1.5rem 1.15rem 2rem; }
  .admin__actions .btn { flex: 1 1 100%; }
}

/* L'attribut hidden doit toujours l'emporter. Sans cette règle, une simple
   déclaration display sur un sélecteur d'auteur le neutralise : c'est ce qui
   affichait le formulaire d'édition en même temps que celui du mot de passe. */
[hidden] { display: none !important; }


/* Sous 480 px, les etiquettes en capitales tombaient entre 11,2 et 11,8 px.
   Les capitales espacees se lisent plus grandes qu'elles ne mesurent, mais
   ce n'est plus vrai a cette taille sur un ecran tenu a bout de bras. */
@media (max-width: 480px) {
  /* 16/10 sur 288 px ne laissait que 180 px de plan : trop peu pour se reperer */
  .carte-acces { aspect-ratio: 4 / 5; }
  .surtitre { font-size: .78rem; }
  .faits dt { font-size: .76rem; }
  .barre-mobile .btn { font-size: .74rem; }
  .carte-acces__mentions { font-size: .84rem; }
}