/* Composants partagés : bandeau de démonstration, en-tête, menu mobile, boutons, photos, pied, barre mobile. */

/* ---------- Bandeau de démonstration ---------- */
.bandeau-demo {
  background: var(--c-texte);
  color: var(--c-fond);
  font-size: var(--t-petit);
  letter-spacing: 0.02em;
  text-align: center;
}
.bandeau-demo p { padding-block: 0.45rem; }
.bandeau-demo a, .bandeau-demo .lien-bouton { color: inherit; font-weight: 600; }
@media (max-width: 479px) { .bandeau-demo__long { display: none; } }

/* ---------- En-tête ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--c-fond) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--c-bordure);
}
.entete__barre {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 4.25rem;
}
.logo {
  font-size: 1.875rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}
.entete__nav { margin-left: auto; }
.entete__nav ul { display: flex; gap: var(--e-4); }
.entete__lien {
  position: relative;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--c-texte-doux);
  transition: color var(--transition);
}
.entete__lien:hover,
.entete__lien[aria-current='page'] { color: var(--c-texte); }
.entete__lien[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -0.35rem;
  height: 1px;
  background: var(--c-deco);
}
.entete__burger {
  display: none;
  margin-left: auto;
  width: 2.75rem; height: 2.75rem;
  border: 0;
  background: none;
  align-items: center;
  justify-content: center;
}
.burger { display: grid; gap: 7px; width: 22px; }
.burger span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--transition);
}
[aria-expanded='true'] .burger span:first-child { transform: translateY(4.25px) rotate(45deg); }
[aria-expanded='true'] .burger span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

.menu-mobile { border-top: 1px solid var(--c-bordure); }
.menu-mobile ul { padding-block: var(--e-2) var(--e-3); }
.menu-mobile__lien {
  display: block;
  padding-block: 0.8rem;
  font-family: var(--f-titres);
  font-size: 1.75rem;
  text-decoration: none;
}
.menu-mobile__lien[aria-current='page'] { color: var(--c-accent); }

@media (max-width: 767px) {
  .entete__nav,
  .entete .entete__reserver { display: none; }
  .entete__burger { display: inline-flex; }
}

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.85rem 1.75rem;
  border: 1px solid var(--c-texte);
  border-radius: 2px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  max-width: 100%;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.bouton:active { transform: scale(0.98); }
.bouton--plein { background: var(--c-texte); color: var(--c-fond); }
.bouton--plein:hover { background: var(--c-accent); border-color: var(--c-accent); }
.bouton--contour { background: transparent; color: var(--c-texte); }
.bouton--contour:hover { background: var(--c-texte); color: var(--c-fond); }
.bouton--texte {
  min-height: 2.75rem;
  padding-inline: 0.25rem;
  border-color: transparent;
  background: none;
  color: var(--c-texte-doux);
}
.bouton--texte:hover { color: var(--c-texte); }
.bouton--large { width: 100%; }

/* ---------- Photos ---------- */
.photo {
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--c-bordure);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Sections ---------- */
.section { padding-block: var(--e-5); }
.section__titre { font-size: var(--t-h2); }
.section > .surtitre + .section__titre { margin-top: 0.75rem; }
/* Fond ivoire sur toute la largeur, pour marquer le passage à une autre partie. */
.section--teinte {
  background: var(--c-surface);
  box-shadow: 0 0 0 100vmax var(--c-surface);
  clip-path: inset(0 -100vmax);
}
.section__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
  margin-bottom: var(--e-4);
}
.section__texte { max-width: 36ch; color: var(--c-texte-doux); }

.point { padding-top: var(--e-2); border-top: 1px solid var(--c-bordure); }
.point__titre { margin-bottom: 0.35rem; }
.point p { color: var(--c-texte-doux); }

.appel {
  padding-block: var(--e-5);
  border-top: 1px solid var(--c-bordure);
  background: var(--c-surface);
}
.appel__contenu {
  display: grid;
  justify-items: center;
  gap: var(--e-3);
  text-align: center;
}
.appel__titre { font-size: var(--t-h2); max-width: 18ch; }

/* ---------- Pied de page ---------- */
.pied {
  padding-block: var(--e-5) var(--e-3);
  border-top: 1px solid var(--c-bordure);
}
.pied__haut {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-4);
  padding-bottom: var(--e-4);
}
.pied__marque { max-width: 34ch; }
.pied__logo { margin-bottom: var(--e-1); }
.pied__texte { color: var(--c-texte-doux); }
.pied__liens { display: grid; gap: 0.6rem; }
.pied__lien { text-decoration: none; color: var(--c-texte-doux); }
.pied__lien:hover { color: var(--c-texte); }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-1) var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--c-bordure);
  font-size: var(--t-petit);
  color: var(--c-texte-doux);
}
.pied__bas a, .pied__bas .lien-bouton { color: var(--c-accent); font-weight: 500; }

/* ---------- Barre « Réserver » sur mobile ---------- */
.barre-mobile { display: none; }
@media (max-width: 767px) {
  body { --hauteur-barre: calc(3.875rem + env(safe-area-inset-bottom)); }
  .barre-mobile {
    display: block;
    position: fixed;
    inset: auto 0 0;
    z-index: 15;
    padding: 0.5rem var(--gouttiere) calc(0.5rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--c-fond) 92%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--c-bordure);
  }
  .barre-mobile .bouton { min-height: 2.75rem; padding-block: 0.6rem; }
  .barre-mobile { transition: transform var(--transition); }
  .barre-mobile--cachee { transform: translateY(100%); }
}

/* ---------- Dialogue (réservation simulée et fenêtres explicatives) ---------- */
html.dialogue-ouvert { overflow: hidden; }
.dialogue {
  width: min(100%, 36rem);
  max-width: 100%;
  max-height: min(90dvh, 52rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: calc(var(--rayon) * 2);
  background: var(--c-fond);
  color: var(--c-texte);
  box-shadow: 0 24px 80px rgb(23 23 23 / 0.22);
}
.dialogue::backdrop {
  background: rgb(23 23 23 / 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.dialogue[open] { animation: dialogue-entree 260ms cubic-bezier(0.2, 0.6, 0.2, 1); }
@keyframes dialogue-entree { from { opacity: 0; transform: translateY(12px); } }
.dialogue__panneau {
  display: grid;
  gap: var(--e-2);
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--e-3);
}
.dialogue__entete {
  position: sticky;
  top: calc(-1 * var(--e-3));
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  margin: calc(-1 * var(--e-3)) calc(-1 * var(--e-3)) 0;
  padding: var(--e-2) var(--e-3);
  background: var(--c-fond);
  border-bottom: 1px solid var(--c-bordure);
}
.dialogue__demo {
  font-size: var(--t-petit);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.dialogue__fermer {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 1.75rem;
  line-height: 1;
}
.dialogue__fermer:hover { background: var(--c-bordure); }
.dialogue__etape { font-size: var(--t-petit); color: var(--c-texte-doux); margin-top: var(--e-1); }
.dialogue__titre { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); }
.dialogue__titre:focus { outline: none; }
.dialogue__corps { display: grid; gap: var(--e-3); }
.dialogue__groupe { display: grid; gap: 0.5rem; }
.dialogue__groupe legend {
  margin-bottom: 0.5rem;
  font-size: var(--t-petit);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-texte-doux);
}
.dialogue__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.dialogue__grille--heures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dialogue__rappel { font-weight: 500; }
.dialogue__rappel::first-letter { text-transform: uppercase; }
.dialogue__grille--dates .choix { flex-direction: column; align-items: flex-start; gap: 0; }
.choix__jour { font-size: 0.8125rem; color: var(--c-texte-doux); }
.choix__jour::first-letter { text-transform: uppercase; }
.dialogue__message,
.dialogue__texte { color: var(--c-texte-doux); }
.dialogue__note { font-size: var(--t-petit); color: var(--c-texte-doux); text-align: center; }
.dialogue__pied { display: flex; padding-top: var(--e-1); border-top: 1px solid var(--c-bordure); }

.choix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--c-bordure);
  border-radius: var(--rayon);
  background: var(--c-surface);
  text-align: left;
  transition: border-color var(--transition), background-color var(--transition);
}
.choix:hover:not(:disabled) { border-color: var(--c-texte); }
.choix[aria-pressed='true'] { border-color: var(--c-texte); box-shadow: inset 0 0 0 1px var(--c-texte); }
.choix:disabled {
  cursor: not-allowed;
  background: transparent;
  color: var(--c-texte-doux);
}
.dialogue__grille--heures .choix { justify-content: center; text-align: center; }
.choix__nom { font-weight: 500; }
.choix__detail { font-size: 0.875rem; color: var(--c-texte-doux); }
.choix__complet { display: block; width: 100%; font-size: 0.75rem; }

.recap { display: grid; border-top: 1px solid var(--c-bordure); }
.recap div {
  display: flex;
  justify-content: space-between;
  gap: var(--e-2);
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--c-bordure);
}
.recap dt { color: var(--c-texte-doux); }
.recap dd { font-weight: 500; text-align: right; }
.recap dd::first-letter { text-transform: uppercase; }

/* Bloc professionnel : on sort de l'institut, autre ton. */
.dialogue__pro {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  margin-top: var(--e-2);
  padding: var(--e-3);
  border-radius: var(--rayon);
  background: var(--c-texte);
  color: var(--c-fond);
  font-size: 0.9375rem;
}
.dialogue__pro p { color: color-mix(in srgb, var(--c-fond) 82%, transparent); }
.dialogue__pro .dialogue__pro-titre {
  font-family: var(--f-titres);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--c-fond);
}
.dialogue__pro .bouton {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  margin-top: var(--e-1);
  border-color: var(--c-fond);
  color: var(--c-fond);
}
.dialogue__pro .bouton:hover { background: var(--c-fond); color: var(--c-texte); }
.dialogue__pro :focus-visible { outline-color: var(--c-fond); }

@media (max-width: 767px) {
  .dialogue {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .dialogue__panneau {
    height: 100%;
    align-content: start;
    padding-bottom: calc(var(--e-3) + env(safe-area-inset-bottom));
  }
}
.dialogue__entete + .dialogue__titre { margin-top: var(--e-2); }