@import url("../fonts/montserrat.css");

/* =========================================================================
   inouï AUDITION — feuille de style unique
   Charte officielle du client : quatre couleurs, Montserrat seule.
   Public de 60 ans et plus : corps 18 px minimum, boutons 56 px,
   rien qui dépende d'un survol, platine jamais porteur de texte.
   Écrite en mobile d'abord : les media queries ajoutent, elles ne corrigent pas.
   ========================================================================= */

/* ---------- 1. Jetons ---------- */

:root {
  --claret: #69102F;
  --cosmos: #3B101C;
  --blanc: #FFFFFF;
  --platine: #E1E0E0;

  --claret-35: rgba(105, 16, 47, 0.35);
  --claret-25: rgba(105, 16, 47, 0.25);
  --claret-05: rgba(105, 16, 47, 0.05);
  --blanc-86: rgba(255, 255, 255, 0.86);
  --ombre: rgba(59, 16, 28, 0.10);

  --fond: var(--blanc);
  --fond-alt: var(--platine);
  --fond-sombre: var(--cosmos);
  --texte: var(--cosmos);
  --texte-accent: var(--claret);
  --filet: var(--platine);

  --police: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --poids-titre: 900;
  --poids-fort: 700;
  --poids-corps: 400;

  /* Tailles mobile. Les valeurs de la charte s'appliquent à partir de 900 px. */
  --t-hero: 34px;
  --t-h1: 30px;
  --t-h2: 26px;
  --t-h2-mini: 23px;
  --t-h3: 21px;
  --t-corps-l: 19px;
  --t-corps: 18px;
  --t-corps-s: 17px;
  --t-mention: 15px;

  --interligne-titre: 1.12;
  --interligne-corps: 1.6;

  --pad-section: 48px 0;
  --pad-section-dense: 36px 0;
  --gouttiere: 16px;
  --gap-cartes: 20px;
  --largeur-max: 1200px;

  --rayon: 10px;
  --rayon-bouton: 6px;
  --rayon-pastille: 999px;
  --hauteur-bouton: 56px;

  --transition: 160ms ease;
}

@media (min-width: 900px) {
  :root {
    --t-hero: 51px;
    --t-h1: 44px;
    --t-h2: 34px;
    --t-h2-mini: 30px;
    --t-h3: 23px;
    --t-corps-l: 21px;
    --pad-section: 72px 0;
    --pad-section-dense: 56px 0;
    --gouttiere: 32px;
    --gap-cartes: 32px;
  }
}

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

/* ---------- 2. Base ---------- */

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

/* L'attribut hidden doit toujours gagner. Sans cette règle, tout élément à qui
   une classe donne un display explicite reste visible malgré `hidden` : c'est
   ce qui a fait apparaître le bouton « Appeler pour confirmer » avant qu'un
   créneau soit choisi, parce que .bouton impose display: inline-flex. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--t-corps);
  font-weight: var(--poids-corps);
  line-height: var(--interligne-corps);
  color: var(--texte);
  background: var(--fond);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 16px;
  line-height: var(--interligne-titre);
  font-weight: var(--poids-titre);
  color: var(--cosmos);
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: var(--poids-fort); }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; display: block; }
/* Le <picture> qui propose la version WebP (generer.py) ne doit pas créer de
   boîte : l'image reste l'enfant direct de sa grille, comme avant. */
picture { display: contents; }

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

ul { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 8px; }

/* Focus : contour épais, visible sur tous les fonds. Jamais supprimé. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--claret);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sur fond bordeaux, le contour bordeaux serait invisible : on passe au blanc. */
.section--sombre a:focus-visible,
.section--sombre button:focus-visible,
.bandeau-claret a:focus-visible,
.bandeau-claret button:focus-visible,
.pied a:focus-visible,
.barre-utilitaire a:focus-visible,
.barre-utilitaire button:focus-visible,
.bouton:focus-visible {
  outline-color: var(--blanc);
}

/* Lien d'évitement : premier élément focalisable de chaque page. */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 16px 24px;
  background: var(--claret);
  color: var(--blanc);
  font-weight: var(--poids-fort);
  text-decoration: none;
}
.saut-contenu:focus {
  left: 0;
  color: var(--blanc);
}

.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;
}

/* ---------- 3. Grille et sections ---------- */

.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding-left: var(--gouttiere);
  padding-right: var(--gouttiere);
}

.section { padding: var(--pad-section); }
.section--dense { padding: var(--pad-section-dense); }
.section--alt { background: var(--fond-alt); }
.section--sombre { background: var(--fond-sombre); color: var(--blanc-86); }
.section--sombre h2,
.section--sombre h3 { color: var(--blanc); }

.section__chapeau {
  display: block;
  margin-bottom: 8px;
  font-size: var(--t-mention);
  font-weight: var(--poids-fort);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--claret);
}
.section--sombre .section__chapeau { color: var(--blanc); }

.section__intro {
  max-width: 62ch;
  font-size: var(--t-corps-l);
  margin-bottom: 32px;
}

/* Bandeau de titre en capitales blanches sur bordeaux, imposé par la charte. */
.bandeau-claret {
  background: var(--claret);
  color: var(--blanc);
  padding: 22px 0;
}
.bandeau-claret h2 {
  margin: 0;
  color: var(--blanc);
  font-size: var(--t-h2-mini);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Motif de marque : filigrane discret, une seule section par page,
   jamais sous un texte à fort contraste. 12 % d'opacité (charte). */
.motif {
  position: relative;
  isolation: isolate;
}
.motif::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/motif.svg") right -40px top -30px / 560px auto no-repeat;
  opacity: 0.12;
  pointer-events: none;
}

/* ---------- 4. Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--hauteur-bouton);
  padding: 15px 26px;
  border: 1px solid var(--claret);
  border-radius: var(--rayon-bouton);
  background: var(--claret);
  color: var(--blanc);
  font: var(--poids-fort) var(--t-corps-s) / 1.3 var(--police);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), transform 200ms ease;
}
.bouton:hover { background: var(--cosmos); border-color: var(--cosmos); color: var(--blanc); }
.bouton:active { transform: translateY(1px); }

.bouton--secondaire {
  background: var(--blanc);
  color: var(--claret);
  border-width: 2px;
  padding: 14px 25px;
}
.bouton--secondaire:hover { background: var(--claret-05); color: var(--cosmos); border-color: var(--cosmos); }

.bouton--sur-sombre {
  background: var(--blanc);
  color: var(--claret);
  border-color: var(--blanc);
}
.bouton--sur-sombre:hover { background: var(--platine); color: var(--cosmos); border-color: var(--platine); }

.bouton--large { width: 100%; }

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.groupe-boutons .bouton { flex: 1 1 240px; }

/* ---------- 5. Barre utilitaire et en-tête ---------- */

.barre-utilitaire {
  background: var(--cosmos);
  color: var(--blanc-86);
  font-size: var(--t-mention);
}
.barre-utilitaire .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  flex-wrap: wrap;
}
.barre-utilitaire__accroche { display: none; }
.barre-utilitaire a { color: var(--blanc); text-decoration: none; font-weight: var(--poids-fort); }
.barre-utilitaire a:hover { color: var(--blanc); text-decoration: underline; }

@media (min-width: 700px) {
  .barre-utilitaire__accroche { display: block; }
}

/* Sélecteur de langue : de vrais liens, pas un menu déroulant. */
.langues {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.langues li { margin: 0; }
.langues a {
  display: block;
  min-width: 44px;
  padding: 10px 8px;
  text-align: center;
  font-size: var(--t-mention);
  border-radius: 4px;
}
.langues a[aria-current="true"] {
  background: var(--claret);
  color: var(--blanc);
}

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--blanc);
  border-bottom: 1px solid var(--filet);
}
.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
}

/* Logo : composition typographique fidèle à la charte.
   Le fichier vectoriel du graphiste n'a pas été fourni (voir a-fournir.md).
   Pour le remplacer : substituer .logo par une <img> et supprimer ce bloc. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--claret);
}
.logo__picto { width: 38px; height: 38px; flex: none; }
.logo__texte { display: flex; flex-direction: column; line-height: 1; }
.logo__nom {
  font-size: 27px;
  font-weight: var(--poids-fort);
  letter-spacing: -0.01em;
}
.logo__sous {
  font-size: 11px;
  font-weight: var(--poids-corps);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin-top: 3px;
}

.entete__actions { display: flex; align-items: center; gap: 12px; }
.entete .bouton { display: none; }

/* Menu : panneau plein écran sur mobile, barre horizontale à partir de 1000 px. */
.bouton-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--claret);
  border-radius: var(--rayon-bouton);
  background: var(--blanc);
  color: var(--claret);
  font: var(--poids-fort) var(--t-corps-s) / 1 var(--police);
  cursor: pointer;
}
.bouton-menu__barres {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.bouton-menu__barres::before,
.bouton-menu__barres::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
}
.bouton-menu__barres::before { top: -6px; }
.bouton-menu__barres::after { top: 6px; }

.nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  flex-direction: column;
  background: var(--blanc);
  padding: 20px var(--gouttiere) 100px;
  overflow-y: auto;
}
.nav[data-ouvert="true"] { display: flex; }

.nav__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  margin-bottom: 20px;
}
.nav__fermer {
  min-height: 48px;
  padding: 10px 16px;
  border: 2px solid var(--claret);
  border-radius: var(--rayon-bouton);
  background: var(--blanc);
  color: var(--claret);
  font: var(--poids-fort) var(--t-corps-s) / 1 var(--police);
  cursor: pointer;
}

.nav__liste {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.nav__liste li { margin: 0; border-bottom: 1px solid var(--filet); }
.nav__liste a {
  display: block;
  padding: 18px 4px;
  font-size: var(--t-h3);
  font-weight: var(--poids-fort);
  color: var(--cosmos);
  text-decoration: none;
}
.nav__liste a[aria-current="page"] { color: var(--claret); }
.nav__liste a:hover { color: var(--claret); }

/* Seuil à 1200 px et non 1000 : six entrées de menu à plat, un logo et un
   bouton d'action ne tiennent pas côte à côte en dessous. Sous ce seuil, le
   menu reste le panneau plein écran, ce qui vaut mieux qu'une barre tassée
   dont les libellés se coupent en deux lignes. */
@media (min-width: 1200px) {
  .bouton-menu { display: none; }
  .nav__tete { display: none; }
  .entete .conteneur { gap: 24px; flex-wrap: nowrap; }

  /* Ordre visuel : logo, menu, bouton. Dans le HTML le bouton précède le
     menu, parce que sur mobile il doit rester à portée de pouce à côté du
     hamburger. `order` remet les choses en place sans toucher au balisage,
     donc sans changer l'ordre de tabulation logique. */
  .logo { order: 1; flex: none; }
  .nav { order: 2; margin-left: auto; }
  .entete__actions { order: 3; flex: none; }

  .nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    overflow: visible;
    background: none;
  }
  .nav__liste {
    display: flex;
    gap: 2px;
    margin: 0;
  }
  .nav__liste li { border: 0; }
  .nav__liste a {
    padding: 12px 10px;
    font-size: 16px;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
  }
  .nav__liste a[aria-current="page"] { border-bottom-color: var(--claret); }
  .entete .bouton { display: inline-flex; white-space: nowrap; }
}

/* Barre d'action collante, mobile uniquement : appeler et prendre rendez-vous. */
.barre-action {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 140;
  display: flex;
  gap: 8px;
  padding: 10px var(--gouttiere);
  background: var(--blanc);
  border-top: 1px solid var(--filet);
  box-shadow: 0 -4px 16px var(--ombre);
}
.barre-action .bouton { flex: 1; padding-left: 8px; padding-right: 8px; }
body { padding-bottom: 84px; }

/* Même seuil que la barre de navigation : tant que le menu est un hamburger,
   le bouton d'action de l'en-tête est masqué, donc « Appeler » et
   « Rendez-vous » doivent rester accessibles en bas d'écran. */
@media (min-width: 1200px) {
  .barre-action { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- 6. Hero ---------- */

.hero { padding: 40px 0 0; }
.hero__grille { display: grid; gap: 28px; }
.hero h1 { font-size: var(--t-hero); }
.hero__intro { font-size: var(--t-corps-l); max-width: 56ch; }
.hero__mention {
  margin-top: 24px;
  font-size: var(--t-mention);
  color: var(--claret);
  font-weight: var(--poids-fort);
}
.hero__image {
  width: 100%;
  aspect-ratio: 632 / 430;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--rayon);
}
/* Sur téléphone et tablette, la photo passe sous les boutons : en bandeau
   paysage, elle accompagne le texte au lieu d'occuper tout un écran (retour
   de Faris, 26/09). height: auto est nécessaire : l'attribut height="430" de
   la balise vaut une hauteur fixe, qui faisait ignorer aspect-ratio. */
@media (max-width: 899px) {
  .hero__image { height: auto; aspect-ratio: 16 / 9; max-height: 280px; object-position: 50% 25%; }
}

@media (min-width: 900px) {
  .hero { padding: 64px 0 0; }
  .hero__grille { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 48px; }
}

/* Deux cartes en débord sous le hero. */
.cartes-debord {
  display: grid;
  gap: var(--gap-cartes);
  margin-top: 36px;
}
@media (min-width: 800px) {
  .cartes-debord { grid-template-columns: 1fr 1fr; margin-top: 48px; }
}

.carte {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 24px;
  box-shadow: 0 2px 10px var(--ombre);
}
.carte__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.carte__tete h3 { margin: 0; color: var(--claret); }

/* Carte en bordeaux plein : celle des adresses, pour ancrer le bas du hero. */
.carte--claret {
  background: var(--claret);
  border-color: var(--claret);
  color: var(--blanc);
}
.carte--claret .carte__tete h3 { color: var(--blanc); }
.carte--claret .liste-plate li { border-bottom-color: rgba(255, 255, 255, 0.22); }
.carte--claret .liste-plate span { color: var(--blanc-86); }

.liste-plate { list-style: none; margin: 0; padding: 0; }
.liste-plate li {
  padding: 10px 0;
  border-bottom: 1px solid var(--filet);
  margin: 0;
}
.liste-plate li:last-child { border-bottom: 0; padding-bottom: 0; }
.liste-plate strong { display: block; }
.liste-plate span { font-size: var(--t-corps-s); }

/* Variante deux colonnes : le jour à gauche, le lieu à droite. */
.liste-plate--duo li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}
.liste-plate--duo strong { display: inline; }
.liste-plate--duo span { color: var(--claret); font-weight: var(--poids-fort); text-align: right; }

/* Icônes : toujours décoratives, jamais porteuses d'information seule. */
.ico {
  width: 22px;
  height: 22px;
  flex: none;
  color: currentColor;
}
.ico--grande { width: 26px; height: 26px; }
.bouton .ico { width: 19px; height: 19px; }

/* ---------- 7. Bandeau de confiance ---------- */

.confiance { display: grid; gap: 20px; }
.confiance__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.confiance__item .ico { color: var(--claret); margin-top: 2px; }
.confiance__item strong { font-weight: var(--poids-fort); }
.confiance__item p { margin: 0; }
@media (min-width: 800px) {
  .confiance { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

/* ---------- 8. Blocs deux colonnes ---------- */

.duo { display: grid; gap: 28px; align-items: center; }
.duo__image { width: 100%; aspect-ratio: 520 / 440; object-fit: cover; object-position: 52% 45%; border-radius: var(--rayon); }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; gap: 48px; }
  .duo--inverse .duo__media { order: 2; }
}

/* ---------- 9. Fiches de lieu ---------- */

.lieux { display: grid; gap: var(--gap-cartes); }
@media (min-width: 850px) { .lieux { grid-template-columns: repeat(3, 1fr); } }

.lieu {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 24px;
}
.lieu__etiquette {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 6px 12px;
  border-radius: var(--rayon-pastille);
  background: var(--claret-05);
  border: 1px solid var(--claret-25);
  font-size: var(--t-mention);
  font-weight: var(--poids-fort);
  color: var(--claret);
}
.lieu h3 { margin-bottom: 10px; }
.lieu__adresse { font-style: normal; margin-bottom: 10px; }
.lieu__horaire { font-weight: var(--poids-fort); color: var(--claret); margin-bottom: 20px; }
.lieu__actions { margin-top: auto; display: grid; gap: 10px; }

/* À trois colonnes, les fiches partagent les lignes de la grille (subgrid) :
   étiquettes, titres, adresses, horaires et boutons s'alignent d'une fiche à
   l'autre, même quand un nom tient sur deux lignes. Six lignes couvrent la
   fiche la plus longue (Tournai sur la page Rendez-vous, avec sa mention sous
   les boutons) ; les lignes en trop restent vides. Un navigateur sans subgrid
   (iPad resté sous iOS 15) garde la mise en colonne, boutons en bas. */
@media (min-width: 850px) {
  @supports (grid-template-rows: subgrid) {
    .lieu {
      display: grid;
      grid-row: span 6;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
    .lieu__etiquette { justify-self: start; }
  }
}

/* ---------- 10. Géolocalisation ---------- */

.geo {
  background: var(--blanc);
  border: 2px solid var(--claret-25);
  border-radius: var(--rayon);
  padding: 24px;
  margin-top: var(--gap-cartes);
}
.geo__ou {
  display: block;
  margin: 20px 0 10px;
  font-size: var(--t-mention);
  font-weight: var(--poids-fort);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--claret);
}
.geo__communes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.geo__communes li { margin: 0; }
.geo__communes button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--claret-35);
  border-radius: var(--rayon-pastille);
  background: var(--blanc);
  color: var(--cosmos);
  font: var(--poids-fort) var(--t-corps-s) / 1 var(--police);
  cursor: pointer;
}
.geo__communes button:hover { background: var(--claret-05); border-color: var(--claret); }

.geo__resultat {
  margin-top: 20px;
  padding: 20px;
  background: var(--fond-alt);
  border-radius: var(--rayon);
}
.geo__resultat[hidden] { display: none; }
.geo__resultat h3 { margin-bottom: 6px; }
.geo__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.geo__actions + .mention { margin-top: 12px; }
/* Trajet Google Maps, chargé seulement au clic (voir site.js, initGeo). */
.geo__trajet { margin-top: 16px; border-radius: var(--rayon); overflow: hidden; }
.geo__trajet-cadre { display: block; width: 100%; height: 380px; border: 0; }
.geo__entete {
  font-size: var(--t-mention);
  font-weight: var(--poids-fort);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--claret);
  margin-bottom: 6px;
}
.geo__message { margin-top: 16px; font-weight: var(--poids-fort); color: var(--claret); }
.geo__message[hidden] { display: none; }

/* ---------- 11. Services ---------- */

.services { display: grid; gap: var(--gap-cartes); }
@media (min-width: 700px) { .services { grid-template-columns: repeat(2, 1fr); } }

.service {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 28px;
}
.service h3 { color: var(--claret); }
.service__lien { margin-top: auto; padding-top: 16px; font-weight: var(--poids-fort); }

/* Le service différenciant : carte en bordeaux plein, demandée par le client. */
.service--phare {
  background: var(--claret);
  border-color: var(--claret);
  color: var(--blanc-86);
}
.service--phare h3 { color: var(--blanc); }
.service--phare .service__lien a { color: var(--blanc); }
.service--phare .service__lien a:hover { color: var(--platine); }

.service__points { list-style: none; margin: 0 0 16px; padding: 0; }
.service__points li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}
.service__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--claret);
}
.service--phare .service__points li::before { background: var(--blanc); }

/* ---------- 12. Parcours en cinq étapes ---------- */

/* Les cinq étapes s'empilent, une par ligne et pleine largeur, tant qu'elles
   ne tiennent pas toutes sur une même ligne (mesuré : 1200 px, à cause de
   l'anglais, le plus long ; même seuil que la navigation). Enroulées,
   elles se répartissaient au hasard de leur longueur, 03 et 04 côte à côte. */
.etapes__onglets {
  display: grid;
  gap: 8px;
  margin-bottom: 28px;
  padding: 0;
  list-style: none;
}
.etapes__onglet { width: 100%; }
@media (min-width: 1200px) {
  .etapes__onglets { display: flex; flex-wrap: wrap; }
  .etapes__onglet { width: auto; }
}
.etapes__onglet {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 18px;
  border: 1px solid var(--claret-35);
  border-radius: var(--rayon-pastille);
  background: var(--blanc);
  color: var(--cosmos);
  font: var(--poids-fort) var(--t-corps-s) / 1.2 var(--police);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}
.etapes__onglet:hover { background: var(--claret-05); border-color: var(--claret); }
.etapes__onglet[aria-selected="true"] {
  background: var(--claret);
  border-color: var(--claret);
  color: var(--blanc);
}
.etapes__numero {
  font-size: var(--t-mention);
  opacity: 0.8;
}

.etapes__panneau { display: grid; gap: 28px; }
.etapes__panneau[hidden] { display: none; }
.etapes__image { width: 100%; aspect-ratio: 420 / 270; object-fit: cover; border-radius: var(--rayon); }
@media (min-width: 900px) {
  .etapes__panneau { grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
}

/* ---------- 13. Points forts et bande « ce qui est compris » ---------- */

.forts { display: grid; gap: 28px; align-items: center; }
.forts__liste { list-style: none; margin: 0; padding: 0; }
.forts__liste li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 16px;
  font-size: var(--t-corps-l);
}
.forts__liste li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--blanc);
}
.forts__image { width: 100%; aspect-ratio: 540 / 340; object-fit: cover; border-radius: var(--rayon); }
@media (min-width: 900px) { .forts { grid-template-columns: 1.15fr 1fr; gap: 48px; } }

.compris { display: grid; gap: 16px; }
.compris__item {
  padding: 18px;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  text-align: center;
}
.compris__item strong { display: block; color: var(--claret); margin-bottom: 4px; }
.compris__item span { font-size: var(--t-corps-s); }
@media (min-width: 620px) { .compris { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .compris { grid-template-columns: repeat(5, 1fr); } }

/* ---------- 14. Onglets de marques et filtre des modèles ---------- */

.pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  padding: 0;
  list-style: none;
}
.pastille {
  min-height: 56px;
  padding: 14px 26px;
  border: 1px solid var(--claret-35);
  border-radius: var(--rayon-pastille);
  background: var(--blanc);
  color: var(--cosmos);
  font: var(--poids-fort) var(--t-corps-s) / 1 var(--police);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}
.pastille:hover { background: var(--claret-05); border-color: var(--claret); }
.pastille[aria-selected="true"], .pastille[aria-pressed="true"] {
  background: var(--claret);
  border-color: var(--claret);
  color: var(--blanc);
}

/* Les trois cartes de marque occupent la MÊME cellule de grille : la hauteur
   est celle du texte le plus long, et rien ne saute d'un onglet à l'autre.
   Une carte inactive garde sa place mais devient invisible ; visibility
   la retire aussi du clavier et des lecteurs d'écran, contrairement à une
   simple opacité. Une min-height ne suffisait pas : le nombre de lignes
   change avec la largeur, et la recette mesurait 29 px d'écart. */
.marques__cartes { display: grid; }
.marque {
  grid-area: 1 / 1;
  min-height: 172px;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 28px;
}
/* Exception assumée à la règle [hidden] ci-dessus : ces cartes gardent leur
   place pour que la hauteur ne saute pas, mais visibility les retire du
   clavier et des lecteurs d'écran, comme le ferait display: none. */
.marque[hidden] { display: block !important; visibility: hidden; }
.marque__rang {
  display: inline-block;
  margin-bottom: 10px;
  font-size: var(--t-mention);
  font-weight: var(--poids-fort);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--claret);
}
.marque__texte { min-height: 55px; max-width: 78ch; }
.marque__lien { margin-top: 16px; font-weight: var(--poids-fort); }

/* Catalogue des modèles (outils/modeles.py), d'après la référence du cabinet :
   filtres à gauche sur grand écran, au-dessus sur téléphone ; cartes à grande
   image, nom en bas, flèche qui déplie le détail. Adapté au public : chaque
   choix de filtre est un vrai bouton de 56 px, la recherche a une étiquette
   visible, et toute la carte est cliquable, pas seulement la petite flèche. */
.catalogue { display: grid; gap: 28px; }
@media (min-width: 1000px) {
  .catalogue { grid-template-columns: 280px 1fr; gap: 44px; align-items: start; }
}

.filtres { display: grid; gap: 26px; }
.filtres__titre {
  display: block;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--claret);
  font-size: var(--t-corps-l);
  font-weight: var(--poids-fort);
  color: var(--claret);
}
.filtres__recherche input {
  width: 100%;
  min-height: var(--hauteur-bouton);
  padding: 12px 16px;
  border: 1px solid var(--claret-35);
  border-radius: var(--rayon-bouton);
  background: var(--blanc);
  color: var(--cosmos);
  font: var(--poids-corps) var(--t-corps) / 1.3 var(--police);
}
.filtres__recherche input::placeholder { color: var(--cosmos); opacity: 0.7; }
/* Sur téléphone, les choix forment des pastilles qui s'enroulent ; sur grand
   écran, une liste verticale comme sur la référence. */
.filtres__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.filtres__liste li { margin: 0; }
.filtres__choix {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--hauteur-bouton);
  padding: 12px 20px;
  border: 1px solid var(--claret-35);
  border-radius: var(--rayon-pastille);
  background: var(--blanc);
  color: var(--cosmos);
  font: var(--poids-fort) var(--t-corps-s) / 1.2 var(--police);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}
.filtres__choix .ico { width: 24px; height: 24px; }
.filtres__choix:hover { background: var(--claret-05); border-color: var(--claret); }
.filtres__choix[aria-pressed="true"] { background: var(--claret); border-color: var(--claret); color: var(--blanc); }
@media (min-width: 1000px) {
  .filtres__liste { display: grid; gap: 6px; }
  .filtres__choix { width: 100%; border-radius: var(--rayon-bouton); font-weight: var(--poids-corps); font-size: var(--t-corps); }
  .filtres__choix[aria-pressed="true"] { font-weight: var(--poids-fort); }
}

.compteur { font-weight: var(--poids-fort); color: var(--claret); margin-bottom: 20px; }
.aucun-modele {
  margin-bottom: 20px;
  padding: 24px;
  background: var(--fond-alt);
  border-radius: var(--rayon);
}
.aucun-modele p { font-weight: var(--poids-fort); margin-bottom: 14px; }

.modeles { display: grid; gap: var(--gap-cartes); align-items: start; }
@media (min-width: 640px) { .modeles { grid-template-columns: repeat(2, 1fr); } }

.modele {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  overflow: hidden;
}
.modele[hidden] { display: none; }
/* L'image et le titre partagent la même cellule : le nom se pose en bas de
   l'image, sur un dégradé, comme sur la référence. Le bouton du titre s'étend
   à toute la tête de carte par son ::after : un clic n'importe où déplie. */
/* minmax(0, 1fr) : sans lui, une <img> de 720 px impose sa largeur naturelle
   comme minimum à la colonne, et l'image comme l'étiquette débordent de la
   carte (vu le 25/09 avec les premières images ; les silhouettes le cachaient). */
.modele__tete { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.modele__visuel,
.modele__titre { grid-area: 1 / 1; }
/* Pas de position: relative ici : un bloc positionné se peint par-dessus le
   titre, et son fond blanc le cachait dès qu'une image remplaçait la
   silhouette. L'étiquette et le bandeau se placent sur .modele__tete, qui a
   exactement la même boîte. */
.modele__visuel {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 44px 24px 96px;
  background: var(--blanc);
}
.modele__visuel img { width: 100%; height: 100%; object-fit: contain; }
/* Sans photo, la silhouette du type tient la place : jamais de cadre vide. */
.modele__visuel--silhouette { background: var(--claret-05); }
.modele__silhouette { width: 46%; height: auto; aspect-ratio: 1; color: var(--claret); }
.modele__etiquette {
  position: absolute;
  top: 16px;
  right: 18px;
  max-width: 60%;
  font-size: var(--t-mention);
  font-weight: var(--poids-fort);
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-align: right;
  text-transform: uppercase;
  color: var(--claret);
}
/* Sous le type, quand l'image est une illustration et non la photo du modèle :
   le dire est une obligation (santé), pas une coquetterie. */
.modele__mention {
  display: block;
  margin-top: 4px;
  font-weight: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cosmos);
}
.modele__brouillon {
  position: absolute;
  top: 14px;
  left: 16px;
  padding: 5px 12px;
  border-radius: var(--rayon-pastille);
  background: var(--cosmos);
  color: var(--blanc);
  font-size: var(--t-mention);
  font-weight: var(--poids-fort);
}
.modele__titre { align-self: end; margin: 0; font-size: var(--t-h3); }
.modele__bascule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 76px;
  padding: 16px 22px;
  border: 0;
  border-top: 1px solid var(--filet);
  /* Fond uni : la charte interdit les dégradés (verifier.py le contrôle). */
  background: var(--blanc);
  color: var(--cosmos);
  font: inherit;
  font-weight: var(--poids-fort);
  text-align: left;
  cursor: pointer;
}
.modele__bascule::after { content: ""; position: absolute; inset: 0; }
.modele__bascule:focus-visible { outline: none; }
.modele__bascule:focus-visible::after { outline: 3px solid var(--claret); outline-offset: -3px; border-radius: var(--rayon); }
.modele__marque { display: block; font-size: var(--t-mention); letter-spacing: 0.08em; text-transform: uppercase; color: var(--claret); }
.modele__chevron { flex: none; width: 34px; height: 34px; color: var(--claret); transition: transform var(--transition); }
.modele__bascule[aria-expanded="true"] .modele__chevron { transform: rotate(180deg); }
.modele__details { padding: 20px 22px 24px; border-top: 1px solid var(--filet); }

/* Survol : la carte se soulève, l'image grossit un peu, le nom passe en
   bordeaux et la flèche invite au clic. Décoratif seulement : rien n'en
   dépend. (hover: hover) l'écarte des écrans tactiles, où un survol resterait
   « collé » après un toucher ; le clavier reçoit le même retour par
   :focus-within. prefers-reduced-motion coupe les transitions (section 1). */
.modele { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.modele__silhouette,
.modele__visuel img { transition: transform var(--transition); }
.modele__bascule { transition: color var(--transition); }
.modele:focus-within { border-color: var(--claret-35); box-shadow: 0 12px 28px var(--ombre); }
.modele:focus-within .modele__bascule { color: var(--claret); }
@media (hover: hover) {
  .modele:hover {
    transform: translateY(-4px);
    border-color: var(--claret-35);
    box-shadow: 0 14px 30px var(--ombre);
  }
  .modele:hover .modele__silhouette,
  .modele:hover .modele__visuel img { transform: scale(1.06); }
  .modele:hover .modele__bascule { color: var(--claret); }
  .modele:hover .modele__chevron { transform: translateY(3px); }
  .modele:hover .modele__bascule[aria-expanded="true"] .modele__chevron { transform: translateY(-3px) rotate(180deg); }
  .filtres__choix .ico { transition: transform var(--transition); }
  .filtres__choix:hover .ico { transform: scale(1.15); }
}
.modele__details .service__points { margin-bottom: 8px; }
.modele__lien { margin: 0; font-weight: var(--poids-fort); }

/* ---------- 14 bis. Écran « choisir un créneau » ---------- */

.bandeau-lieu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  margin-bottom: var(--gap-cartes);
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}
.bandeau-lieu__texte { display: flex; align-items: center; gap: 12px; }

.rdv-grille { display: grid; gap: var(--gap-cartes); align-items: start; }
@media (min-width: 950px) { .rdv-grille { grid-template-columns: 1.4fr 1fr; } }

.calendrier {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 22px;
}
.calendrier__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.calendrier__mois {
  font-size: var(--t-h3);
  font-weight: var(--poids-titre);
  text-align: center;
  flex: 1;
}
.calendrier__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 1px solid var(--claret-35);
  border-radius: var(--rayon-pastille);
  background: var(--blanc);
  color: var(--claret);
  cursor: pointer;
}
.calendrier__nav:hover:not(:disabled) { background: var(--claret-05); border-color: var(--claret); }
.calendrier__nav:disabled { opacity: 0.35; cursor: not-allowed; }

.calendrier__entetes,
.calendrier__grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.calendrier__entetes {
  margin-bottom: 8px;
  font-size: var(--t-mention);
  font-weight: var(--poids-fort);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--claret);
}

.calendrier__jour {
  min-height: 48px;
  padding: 10px 4px;
  border: 1px solid transparent;
  border-radius: var(--rayon-bouton);
  background: none;
  font: var(--poids-fort) var(--t-corps-s) / 1 var(--police);
  font-variant-numeric: tabular-nums;
  color: var(--texte);
}
/* Un jour sans consultation n'est pas un bouton désactivé mais un simple
   texte : rien à cliquer, donc rien qui ressemble à un bouton. */
.calendrier__jour--vide { visibility: hidden; }
.calendrier__jour--inactif { color: var(--claret-35); }
.calendrier__jour--libre {
  border-color: var(--claret-35);
  background: var(--blanc);
  color: var(--claret);
  cursor: pointer;
}
.calendrier__jour--libre:hover { background: var(--claret-05); border-color: var(--claret); }
.calendrier__jour--choisi {
  background: var(--claret);
  border-color: var(--claret);
  color: var(--blanc);
}

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--filet);
  font-size: var(--t-mention);
}
.legende__item { display: flex; align-items: center; gap: 8px; }
.legende__puce {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1px solid var(--claret-35);
  background: var(--blanc);
}
.legende__puce--choisi { background: var(--claret); border-color: var(--claret); }

.horaires { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--filet); }
.horaires__titre {
  display: block;
  margin-bottom: 12px;
  font-size: var(--t-mention);
  font-weight: var(--poids-fort);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--claret);
}
.horaires__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.horaires__liste li { margin: 0; }
.horaires__creneau {
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--claret-35);
  border-radius: var(--rayon-bouton);
  background: var(--blanc);
  color: var(--claret);
  font: var(--poids-fort) var(--t-corps-s) / 1 var(--police);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.horaires__creneau:hover { background: var(--claret-05); border-color: var(--claret); }
.horaires__creneau[aria-pressed="true"] {
  background: var(--claret);
  border-color: var(--claret);
  color: var(--blanc);
}

.recap {
  background: var(--fond-alt);
  border-radius: var(--rayon);
  padding: 24px;
}
.recap h3 { margin-bottom: 18px; }
.recap__ligne { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.recap__ligne .ico { color: var(--claret); margin-top: 3px; }
.recap__etiquette {
  display: block;
  font-size: var(--t-mention);
  font-weight: var(--poids-fort);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--claret);
}
.recap__valeur { font-weight: var(--poids-fort); }
.recap__valeur--vide { font-weight: var(--poids-corps); color: var(--cosmos); opacity: 0.7; }
.recap__actions { margin-top: 22px; display: grid; gap: 12px; }

/* ---------- 15. Remboursements ---------- */

.encart-tiers {
  padding: 22px 24px;
  background: var(--claret);
  color: var(--blanc);
  border-radius: var(--rayon);
  margin-bottom: 28px;
}
.encart-tiers strong { display: block; font-size: var(--t-h3); margin-bottom: 6px; }

.tableau-remboursements {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--filet);
}
.tableau-remboursements caption {
  text-align: left;
  padding-bottom: 12px;
  font-weight: var(--poids-fort);
  color: var(--claret);
}
.tableau-remboursements th,
.tableau-remboursements td {
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid var(--filet);
}
.tableau-remboursements thead th {
  background: var(--claret);
  color: var(--blanc);
  font-size: var(--t-corps-s);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tableau-remboursements tbody th { font-weight: var(--poids-fort); }
.tableau-remboursements tbody tr:hover { background: var(--claret-05); }
.tableau-remboursements td { font-weight: var(--poids-fort); font-variant-numeric: tabular-nums; }

/* Sous 600 px : cartes empilées, jamais de défilement horizontal.
   Chaque valeur porte son intitulé via data-label. Imposé par le cahier. */
@media (max-width: 599px) {
  .tableau-remboursements,
  .tableau-remboursements thead,
  .tableau-remboursements tbody,
  .tableau-remboursements tr,
  .tableau-remboursements th,
  .tableau-remboursements td { display: block; width: 100%; }
  .tableau-remboursements { border: 0; }
  .tableau-remboursements thead { display: none; }
  .tableau-remboursements tr {
    margin-bottom: 16px;
    border: 1px solid var(--filet);
    border-radius: var(--rayon);
    overflow: hidden;
  }
  .tableau-remboursements tbody th {
    background: var(--claret);
    color: var(--blanc);
    font-size: var(--t-h3);
    border-bottom: 0;
  }
  .tableau-remboursements td { border-bottom: 1px solid var(--filet); }
  .tableau-remboursements td:last-child { border-bottom: 0; }
  .tableau-remboursements td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--t-mention);
    font-weight: var(--poids-corps);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--claret);
    margin-bottom: 2px;
  }
}

.mention {
  margin-top: 16px;
  font-size: var(--t-corps-s);
  max-width: 70ch;
}

/* ---------- 16. Démarches numérotées ---------- */

.demarches { display: grid; gap: var(--gap-cartes); counter-reset: demarche; }
@media (min-width: 850px) { .demarches { grid-template-columns: repeat(3, 1fr); } }
.demarche {
  padding: 26px;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}
.demarche__numero {
  display: block;
  margin-bottom: 10px;
  font-size: var(--t-h2);
  font-weight: var(--poids-titre);
  color: var(--claret);
  font-variant-numeric: tabular-nums;
}

/* ---------- 17. Avis ---------- */

.avis__note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
  font-weight: var(--poids-fort);
  color: var(--claret);
}
.avis__note strong { font-size: var(--t-h2); }
.avis__vide {
  padding: 28px;
  background: var(--blanc);
  border: 2px dashed var(--claret-35);
  border-radius: var(--rayon);
  max-width: 70ch;
}

/* ---------- 18. Contact ---------- */

.contacts { display: grid; gap: var(--gap-cartes); }
@media (min-width: 800px) { .contacts { grid-template-columns: repeat(3, 1fr); } }
.contact-carte {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}
.contact-carte h3 { color: var(--claret); }
.contact-carte__actions { margin-top: auto; padding-top: 18px; display: grid; gap: 10px; }
.contact-carte__ligne { display: block; font-size: var(--t-corps-l); font-weight: var(--poids-fort); margin-bottom: 6px; }

/* Contenus Google au clic (carte, agenda) : l'invitation occupe la place du
   cadre, pour que la page ne saute pas quand il se charge. Voir site.js,
   section 6. */
.emplacement-tiers {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 320px;
  padding: 32px;
  background: var(--fond-alt);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  color: var(--cosmos);
}
.emplacement-tiers .bouton { margin-top: 8px; }
.emplacement-tiers--actif {
  display: block;
  padding: 0;
  overflow: hidden;
}
.emplacement-tiers__cadre {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
}
/* L'agenda de réservation a besoin de hauteur : calendrier, créneaux, puis
   formulaire. Trop court, il ferait défiler un cadre dans la page. */
.emplacement-tiers--agenda .emplacement-tiers__cadre { min-height: 760px; }

.reperes { display: grid; gap: 16px; }
@media (min-width: 620px) { .reperes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .reperes { grid-template-columns: repeat(4, 1fr); } }
.repere {
  display: grid;
  place-items: center;
  text-align: center;
  aspect-ratio: 4 / 3;
  padding: 18px;
  background: var(--fond-alt);
  border: 2px dashed var(--claret-35);
  border-radius: var(--rayon);
  font-size: var(--t-corps-s);
  font-weight: var(--poids-fort);
  color: var(--claret);
}

/* ---------- 19. Appel à l'action de fin de page ---------- */

.rappel {
  background: var(--claret);
  color: var(--blanc);
  padding: 40px 0;
}
.rappel h2 { color: var(--blanc); margin-bottom: 10px; }
.rappel p { color: var(--blanc-86); max-width: 62ch; }
.rappel .groupe-boutons { margin-top: 24px; }

/* ---------- 20. Pied de page ---------- */

.pied {
  background: var(--cosmos);
  color: var(--blanc-86);
  padding: 48px 0 28px;
}
.pied a { color: var(--blanc); }
.pied h3 { color: var(--blanc); font-size: var(--t-corps); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.pied__grille { display: grid; gap: 32px; }
@media (min-width: 760px) { .pied__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .pied__grille { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.pied__liste { list-style: none; margin: 0; padding: 0; }
.pied__liste li { margin-bottom: 10px; }
.pied__bas {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: var(--t-mention);
}
.pied .logo { color: var(--blanc); }

/* ---------- 21. Pages internes ---------- */

.tete-page {
  background: var(--fond-alt);
  padding: 40px 0;
}
.tete-page h1 { margin-bottom: 12px; }
.tete-page p { max-width: 68ch; font-size: var(--t-corps-l); }

.prose { max-width: 72ch; }
.prose h2 { margin-top: 36px; font-size: var(--t-h2-mini); }
.prose h3 { margin-top: 26px; }

/* Information encore attendue du cabinet : visible, jamais inventée. */
.a-fournir {
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed var(--claret-35);
  border-radius: 4px;
  background: var(--claret-05);
  color: var(--claret);
  font-size: 1em;
  font-weight: var(--poids-fort);
}

.valeurs { display: grid; gap: var(--gap-cartes); }
@media (min-width: 850px) { .valeurs { grid-template-columns: repeat(3, 1fr); } }

.avis-rdv {
  display: grid;
  gap: var(--gap-cartes);
}
@media (min-width: 850px) { .avis-rdv { grid-template-columns: repeat(3, 1fr); } }

@media print {
  .barre-action, .bouton-menu, .barre-utilitaire, .nav { display: none !important; }
  body { padding-bottom: 0; }
}