/* Polices hébergées sur le site, sans appel à Google. */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("polices/jost-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("polices/jost-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mrs Saint Delafield"; font-style: normal; font-weight: 400; font-display: swap; src: url("polices/mrs-saint-delafield-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Mrs Saint Delafield"; font-style: normal; font-weight: 400; font-display: swap; src: url("polices/mrs-saint-delafield-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Identité reprise de la carte de visite : blanc, typo fine, corail du piment, signature.
   Une seule police (Jost) et trois graisses : 300 pour les grands titres et les chiffres,
   400 pour le texte, 500 pour les petits titres et ce qui doit ressortir.
   La police manuscrite ne sert qu'à la signature de Valérie. */
:root {
  --encre: #161616;
  --texte: #3B3936;
  --gris: #6E6A64;
  --corail: #C4412C;
  --tige: #6E8B3D;
  --blanc: #FFFFFF;
  --sable: #F8F5EF;
  --ligne: #E7E2D9;
  --largeur: 1120px;
  --gouttiere: 20px;
  --police: "Jost", "Century Gothic", "Segoe UI", sans-serif;
  --plume: "Mrs Saint Delafield", "Segoe Script", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
html:has(dialog[open]) { overflow: hidden; }
body { margin: 0; background: var(--blanc); color: var(--texte); font: 400 18px/1.6 var(--police); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { color: var(--encre); margin: 0; }
h1 { font-weight: 300; font-size: clamp(2.4rem, 5vw, 3.9rem); line-height: 1.08; letter-spacing: -.01em; }
h2 { font-weight: 300; font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: 1.1; letter-spacing: -.01em; }
h3 { font-weight: 500; font-size: 1.3rem; line-height: 1.25; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--corail); outline-offset: 3px; }

.evitement { position: absolute; left: -999px; top: 8px; background: var(--encre); color: #fff; padding: 8px 16px; z-index: 30; }
.evitement:focus { left: 8px; }
.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
.section { padding: 72px 0; }
/* Un lien vers une section s'arrête sur son sur-titre, juste sous l'en-tête, plutôt qu'au-dessus de la marge. */
.section[id] { scroll-margin-top: -64px; }
.section-sable { background: var(--sable); }
.sur-titre { color: var(--corail); font-size: .85rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.chapo { font-size: 1.15rem; margin: 14px 0 0; max-width: 620px; }
.chapo strong { font-weight: 500; color: var(--encre); }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px;
  border-radius: 999px; border: 1px solid transparent; background: none; cursor: pointer;
  font: 400 1rem var(--police); text-decoration: none; transition: background .2s, color .2s, border-color .2s;
}
.btn-noir { background: var(--encre); color: #fff; }
.btn-noir:hover { background: var(--corail); }
.btn-contour { border-color: var(--encre); color: var(--encre); }
.btn-contour:hover { background: var(--encre); color: #fff; }
.btn-whatsapp { background: #1B7F47; color: #fff; }
.btn-whatsapp:hover { background: #156639; }
.btn-petit { min-height: 40px; padding: 0 20px; font-size: .95rem; }
.btn[disabled] { background: var(--ligne); color: var(--gris); cursor: not-allowed; border-color: transparent; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--ligne); }
.entete-interieur { max-width: var(--largeur); margin: 0 auto; padding: 10px var(--gouttiere); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); font-weight: 400; font-size: 1.15rem; letter-spacing: .01em; }
.bouton-menu { background: none; border: 1px solid var(--ligne); border-radius: 999px; padding: 6px 16px; font: 400 .95rem var(--police); color: var(--encre); cursor: pointer; }
.menu { display: none; width: 100%; flex-direction: column; gap: 4px; padding: 8px 0 10px; }
.menu.ouvert { display: flex; }
.menu a:not(.btn) { padding: 8px 0; text-decoration: none; color: var(--encre); white-space: nowrap; }
.menu a[hidden] { display: none; }
.menu .btn { margin-top: 6px; }

/* Accueil */
.accueil { max-width: var(--largeur); margin: 0 auto; padding: 16px var(--gouttiere) 56px; display: grid; gap: 20px; }
.accueil-texte { display: contents; }
.logo { width: min(100%, 420px); margin: 0 auto; order: 1; }
.diapo { order: 2; }
.accueil-texte > :not(.logo) { order: 3; }
.accueil-texte > .lieu { order: 1; margin: -8px 0 0; text-align: center; font-size: .85rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--corail); line-height: inherit; }
.slogan { font-weight: 300; font-size: clamp(2.4rem, 5vw, 3.9rem); line-height: 1.08; letter-spacing: -.01em; color: var(--encre); }
.accueil .slogan { margin-top: 12px; }
.anciennete { color: var(--corail); font-weight: 500; }
.grand { font-size: 1.15rem; font-weight: 400; color: var(--encre); line-height: 1.5; margin: 0; }
.accueil p { margin-bottom: 0; }
.signature { font-family: var(--plume); color: var(--corail); font-size: 3.6rem; line-height: 1; padding-top: 4px; }

.diapo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sable); border-radius: 4px; }
.diapo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease; }
.diapo img.active { opacity: 1; }
.diapo-pause {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .88); color: var(--encre); cursor: pointer; font: 400 .7rem var(--police); letter-spacing: 1px;
}

/* Liste des cours */
.mois { font-weight: 400; font-size: 1.1rem; color: var(--gris); text-transform: capitalize; margin: 44px 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--encre); }
.ligne-cours { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 6px 16px; padding: 18px 0; border-bottom: 1px solid var(--ligne); }
.ligne-photo { grid-row: span 2; width: 92px; height: 92px; overflow: hidden; border-radius: 3px; background: var(--sable); }
.ligne-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ligne-cours:hover .ligne-photo img { transform: scale(1.06); }
.ligne-date { color: var(--corail); font-size: .95rem; font-weight: 500; margin: 0 0 2px; }
.ligne-cours h3 { font-size: 1.2rem; }
.ligne-cours h3 button { all: unset; cursor: pointer; }
.ligne-cours h3 button::after { content: ""; position: absolute; inset: 0; }
.ligne-cours h3 button:focus-visible { outline: 2px solid var(--corail); outline-offset: 3px; }
.ligne-accroche { color: var(--gris); font-size: .98rem; margin: 2px 0 0; }
.ligne-fin { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: 6px; }
.ligne-prix { font-size: .95rem; margin: 0; }
.ligne-prix span { white-space: nowrap; }
.ligne-lien { color: var(--encre); font-size: .95rem; white-space: nowrap; border-bottom: 1px solid var(--encre); }
.ligne-cours:hover .ligne-lien { color: var(--corail); border-color: var(--corail); }
.etiquette { display: inline-block; font-size: .78rem; letter-spacing: .04em; color: var(--tige); border: 1px solid currentColor; border-radius: 99px; padding: 0 9px; margin-left: 8px; vertical-align: 2px; font-weight: 400; }

/* Régimes et allergènes d'un cours */
.marqueurs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0 8px; }
.regime { font-size: .82rem; color: var(--tige); border: 1px solid currentColor; border-radius: 99px; padding: 0 8px; white-space: nowrap; }
.allergenes { flex-basis: 100%; margin: 0; font-size: .85rem; color: var(--gris); }

/* Déroulement d'un cours */
.section-filet { padding-top: 0; }
@media (max-width: 959px) { .section.section-filet[id] { scroll-margin-top: 8px; } } /* sur téléphone, pas de marge en haut : on s'arrête juste au-dessus du sur-titre */
.commentaires { display: grid; gap: 16px; margin-top: 24px; }
.commentaire { margin: 0; padding: 20px; background: var(--sable); border-radius: 6px; }
.commentaire blockquote { margin: 0 0 12px; color: var(--encre); white-space: pre-line; overflow-wrap: anywhere; }
.commentaire figcaption { color: var(--gris); font-size: .92rem; }
.commentaires-note { margin: 16px 0 0; color: var(--gris); }
@media (min-width: 720px) { .commentaires { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }
.accord { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; color: var(--encre); font-size: .95rem; cursor: pointer; }
.accord input { flex-shrink: 0; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--corail); }
.faq { max-width: 760px; }
.faq h2 { margin-bottom: 20px; }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq details:first-of-type { border-top: 1px solid var(--ligne); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; padding: 12px 0; color: var(--encre); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; font-size: 1.4rem; font-weight: 400; line-height: 1; color: var(--corail); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 16px; }
.faq details ul { margin: 0 0 16px; padding-left: 20px; }
.deroulement { max-width: 760px; margin-left: auto; margin-right: auto; }
.deroulement > .chapo { margin-bottom: 1em; color: var(--encre); }
.deroulement > .grand { margin-top: 1.4em; }

/* Formules */
.formules { display: grid; gap: 16px; margin-top: 32px; }
.formule { position: relative; background: var(--blanc); padding: 30px 26px; border-radius: 4px; display: flex; flex-direction: column; align-items: flex-start; }
.formule h3 { margin-bottom: 12px; }
.formule .btn { margin-top: auto; }
.formule p:last-of-type { margin-bottom: 22px; }
.numero { font-weight: 300; font-size: 3rem; line-height: 1; color: var(--corail); margin-bottom: 10px; }
.titre-tarifs { margin-top: 44px; }
.titre-tarifs small { font-size: .95rem; font-weight: 400; color: var(--gris); }
.tarifs { display: grid; gap: 0; margin-top: 12px; border-top: 1px solid var(--encre); }
.tarif { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--ligne); }
.tarif p { margin: 0; }
.tarif-nom { font-size: 1.2rem; font-weight: 500; color: var(--encre); }
.tarif-horaire { grid-row: 2; color: var(--gris); font-size: 1rem; }
.tarif-prix { grid-row: 1 / 3; grid-column: 2; align-self: center; text-align: right; font-weight: 300; font-size: 1.7rem; color: var(--encre); line-height: 1.1; }
.tarif-prix small { display: block; font-size: .85rem; color: var(--gris); font-weight: 400; }

/* Prochaines dates */
.abonnement { margin-top: 32px; padding: 20px; background: var(--sable); border-radius: 6px; }
.abonnement > label { display: block; color: var(--encre); font-weight: 500; margin-bottom: 8px; }
.abonnement-ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.abonnement-ligne input { flex: 1 1 220px; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: 4px; background: #fff; font: 400 1rem var(--police); color: var(--encre); }
.abonnement .mention { margin: 8px 0 0; }
.abonnement .alerte { margin: 10px 0 0; }
.abonnement-merci { margin: 0; color: var(--encre); font-weight: 500; }

/* Entreprises */
.entreprises { max-width: 760px; margin-left: auto; margin-right: auto; }
.entreprises .tarifs { margin-top: 26px; }
.entreprises-points { margin: 22px 0 26px; padding-left: 20px; }
.entreprises-points li { margin-bottom: 6px; }

/* Infos pratiques */
.infos { display: grid; gap: 32px; }
.infos-photo { margin: 0; }
.infos-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.pratique { margin: 26px 0 0; border-top: 1px solid var(--ligne); }
.pratique > div { padding: 14px 0; border-bottom: 1px solid var(--ligne); }
.pratique dt { color: var(--encre); font-weight: 500; }
.pratique dd { margin: 2px 0 0; }

/* Qui suis-je */
.qui-texte { max-width: 680px; }
.qui-texte .grand { margin: 24px 0 14px; }
.qui-texte p:not(.sur-titre):not(.chapo):not(.grand):not(.signature) { margin: 0 0 14px; }
.qui-lire { margin-top: 4px; }
.barre-reserver { display: none; }
@media (max-width: 959px) {
  .qui-suite.replie { display: none; }
  /* Bouton toujours visible sur téléphone, masqué quand la liste des cours est à l'écran. */
  .barre-reserver { display: inline-flex; position: fixed; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 15; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
  .barre-reserver.masquee { display: none; }
  .pied { padding-bottom: 96px; }
}
@media (min-width: 960px) { .qui-lire { display: none; } }
.qui-texte .signature { padding-top: 12px; }

/* Contact */
.contacts { display: grid; gap: 12px; margin-top: 30px; }
.contact { display: block; background: var(--sable); padding: 22px 24px; border-radius: 4px; text-decoration: none; transition: box-shadow .2s; min-width: 0; }
.contact:hover { box-shadow: 0 0 0 1px var(--encre); }
.contact strong { display: block; font-weight: 500; font-size: 1.2rem; color: var(--encre); }
.contact span { color: var(--gris); font-size: 1rem; overflow-wrap: anywhere; }

/* Pied de page */
.pied { padding: 44px 0 36px; border-top: 1px solid var(--ligne); }
.pied-interieur { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.pied img { width: 240px; }
.pied-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: .95rem; }
.pied-liens a { color: var(--texte); }
.pied-liens span { flex-basis: 100%; color: var(--gris); font-size: .88rem; }
.tarif-nom small { color: var(--gris); font-weight: 400; }
.bientot { color: var(--gris); }
.bientot em { font-style: normal; font-size: .75rem; border: 1px solid var(--ligne); border-radius: 99px; padding: 1px 8px; margin-left: 4px; }

/* Fiche d'un cours */
.fiche { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; color: var(--texte); overflow: hidden; }
.fiche[open] { display: flex; }
.fiche::backdrop { background: rgba(22, 22, 22, .55); }
#fiche-contenu { flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
.fiche-fermer {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px var(--ligne); font: 400 1.7rem/1 var(--police); color: var(--encre); cursor: pointer;
}
.fiche-grille { display: grid; }
.fiche-photo { aspect-ratio: 4 / 3; background: var(--sable); overflow: hidden; }
.fiche-photo img { width: 100%; height: 100%; object-fit: cover; }
.fiche-corps { padding: 24px var(--gouttiere) 36px; }
.fiche-corps h2 { font-size: clamp(1.9rem, 4vw, 2.5rem); margin-bottom: 6px; }
.fiche-corps .pratique dd strong { font-weight: 500; color: var(--encre); }
.fiche-accroche { font-size: 1.15rem; color: var(--encre); }
.fiche-formulaire { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--encre); }
.fiche-formulaire h3 { margin-bottom: 14px; }
.bandeau-bientot { background: var(--sable); border-left: 2px solid var(--corail); padding: 12px 14px; font-size: .98rem; margin-bottom: 18px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.champ { display: grid; gap: 4px; margin-bottom: 14px; }
.champ label, .legende { font-size: .95rem; color: var(--encre); padding: 0; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: 4px; background: #FBFAF8;
  font: 400 1rem var(--police); color: var(--encre);
}
.champ input:focus, .champ select:focus, .champ textarea:focus { background: #fff; border-color: var(--encre); }
.champ textarea { min-height: 76px; resize: vertical; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.telephone { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px; }
.choix { display: grid; gap: 8px; margin: 6px 0 14px; }
.choix label { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--ligne); border-radius: 4px; padding: 10px 12px; background: #FBFAF8; font-size: .98rem; color: var(--encre); cursor: pointer; }
.choix label:has(input:checked) { border-color: var(--encre); background: #fff; }
.choix label.indisponible { color: var(--gris); cursor: not-allowed; background: var(--sable); }
.choix label > span { display: flex; align-items: center; gap: 10px; }
.choix input { accent-color: var(--corail); margin: 0; flex: none; width: 18px; height: 18px; }
.choix label strong { font-weight: 500; white-space: nowrap; text-align: right; }
.choix label strong small { display: block; font-weight: 400; color: var(--gris); font-size: .8rem; }
.reste { display: block; color: var(--corail); font-size: .85rem; }
.etat { font-style: normal; font-size: .85rem; color: var(--corail); }
.etat-inscrits { color: var(--corail); font-style: normal; font-weight: 500; }
.etat-complet { color: #fff; background: var(--corail); border-radius: 99px; padding: 1px 8px; font-weight: 500; }
.alerte { background: #FBEDEA; border-left: 2px solid var(--corail); color: var(--encre); padding: 12px 14px; font-size: .98rem; margin-bottom: 18px; }
.mention { color: var(--gris); font-size: .92rem; margin: 4px 0 16px; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fiche-boutons { display: grid; gap: 10px; margin-top: 4px; }
.fiche-boutons .btn { width: 100%; }
.confirmation { max-width: 620px; margin: 0 auto; padding-top: 44px; }
.confirmation h2:focus { outline: none; }
.confirmation .pratique { margin-bottom: 16px; }
.confirmation .bandeau-bientot { margin-top: 14px; }
.agenda-aide { width: 100%; margin: 0; }
.agenda-aide[hidden] { display: none; }
img[src*="piment"] { object-fit: contain !important; padding: 16%; }
.marque img[src*="piment"] { padding: 0; }

@media (min-width: 720px) {
  :root { --gouttiere: 32px; }
  .ligne-cours { grid-template-columns: 112px 175px 1fr auto; align-items: center; gap: 0 24px; padding: 16px 0; }
  .ligne-photo { grid-row: auto; width: 112px; height: 112px; }
  .ligne-date { margin: 0; font-size: 1rem; line-height: 1.3; }
  .ligne-fin { grid-column: auto; flex-direction: column; align-items: flex-end; margin: 0; text-align: right; }
  .formules { grid-template-columns: 1fr 1fr; }
  .tarifs { grid-template-columns: 1fr 1fr; column-gap: 40px; border-top: 0; }
  .tarif { border-top: 1px solid var(--encre); border-bottom: 0; }
  .contacts { grid-template-columns: repeat(3, 1fr); }
  .fiche { width: min(960px, calc(100% - 48px)); height: auto; max-height: calc(100dvh - 48px); margin: auto; border-radius: 6px; }
  .fiche-grille { grid-template-columns: 5fr 6fr; }
  .fiche-photo { aspect-ratio: auto; position: sticky; top: 0; height: min(100%, calc(100dvh - 48px)); align-self: start; }
  .fiche-corps { padding: 36px 36px 36px; }
  .fiche-boutons { grid-template-columns: 1fr 1fr; }
}

/* Le menu complet ne tient qu'à partir de cette largeur. En dessous, le bouton Menu le remplace.
   L'en-tête est un peu plus large que le contenu pour loger « Mes réservations » et « Commentaires ». */
@media (min-width: 1340px) {
  .bouton-menu { display: none; }
  .entete-interieur { flex-wrap: nowrap; max-width: 1340px; }
  .marque { white-space: nowrap; flex-shrink: 0; }
  .menu { display: flex; flex-direction: row; align-items: center; width: auto; gap: 18px; padding: 0; }
  .menu a:not(.btn) { padding: 0; font-size: 1rem; }
  .menu a:not(.btn):hover { color: var(--corail); }
  .menu a[hidden] { display: none; }
  .menu .btn { margin: 0; }
}

@media (min-width: 960px) {
  .accueil { grid-template-columns: 1fr minmax(0, 480px); column-gap: 64px; align-items: center; padding-top: 36px; padding-bottom: 72px; }
  .accueil-texte { display: block; }
  .logo { margin: 0 0 28px -8px; width: 440px; }
  .accueil-texte > * + * { margin-top: 14px; }
  .signature { margin-top: 4px; }
  .actions { margin-top: 26px; }
  .diapo { order: 0; }
  .section { padding: 96px 0; }
  .section[id] { scroll-margin-top: -88px; }
  .infos { grid-template-columns: minmax(0, 420px) 1fr; column-gap: 64px; align-items: center; }
  .qui { align-items: start; }
  .qui-photo { position: sticky; top: 96px; }
  .pied-interieur { flex-direction: row; justify-content: space-between; text-align: left; }
  .pied-liens { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .diapo img, .ligne-photo img { transition: none; }
}

/* Mes réservations */
.mes-reservations { list-style: none; margin: 18px 0 8px; padding: 0; }
.ma-reservation { padding: 16px 0; border-top: 1px solid var(--ligne); }
.ma-reservation:last-child { border-bottom: 1px solid var(--ligne); }
.ma-reservation p { margin: 0 0 4px; }
.ma-reservation .mention { margin: 4px 0 10px; }
.ma-reservation .btn { margin-top: 2px; }
.mes-reservations-personne h3 { margin-top: 22px; font-weight: 400; font-size: 1.25rem; }
.mes-reservations-personne h3 small { color: var(--gris); font-size: .9rem; }

/* Carte de fidélité : 8 tampons, le 9e cours offert */
.carte-fidelite { margin: 18px 0 6px; padding: 14px 16px 4px; background: var(--sable); border: 1px solid var(--ligne); border-radius: 12px; }
.carte-fidelite-titre { margin: 0 0 10px; color: var(--encre); font-weight: 500; }
.tampons { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; max-width: 380px; }
.tampon { display: grid; place-items: center; aspect-ratio: 1; border: 1.5px dashed #CFC7B9; border-radius: 50%; background: var(--blanc); color: var(--gris); font-size: .8rem; }
.tampon.plein { border: 1.5px solid var(--corail); font-size: 1rem; }
.tampon.cadeau { border: 1.5px solid var(--tige); font-size: 1rem; }
.carte-fidelite .mention { margin: 10px 0 10px; }
.cadeau-fidelite { margin: 14px 0 0; padding: 12px 14px; background: var(--sable); border-left: 3px solid var(--tige); border-radius: 6px; color: var(--encre); }

/* Page Entreprises : sur téléphone, le titre passe avant la photo. */
@media (max-width: 959px) { .infos-titre-avant > div { order: -1; } }

/* Choix de la langue, toujours visible en haut : FR | EN, la langue en cours en gras */
.langues { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: .95rem; letter-spacing: .06em; color: var(--gris); }
.langues a { color: var(--corail); text-decoration: none; padding: 6px 2px; }
.langues a:hover { text-decoration: underline; }
.langue-actuelle { color: var(--encre); font-weight: 500; }
/* Sur téléphone, le nom, FR | EN et le bouton Menu tiennent sur une seule ligne. */
@media (max-width: 480px) {
  .entete-interieur { gap: 8px; }
  .marque { font-size: .95rem; gap: 8px; }
  .marque img { width: 36px; height: auto; }
  .langues { gap: 4px; font-size: .9rem; }
  .langues a { padding: 6px 0; }
  .bouton-menu { padding: 6px 12px; }
}
/* Très petits écrans : le nom s'efface de l'en-tête, il reste dans le logo juste en dessous. */
@media (max-width: 340px) { .marque span { display: none; } }
@media (min-width: 1340px) {
  .menu { order: 2; margin-left: auto; }
  .langues { order: 3; margin-left: 4px; }
}

/* Encadré « Épingler sur l'écran d'accueil » dans Mes réservations */
.epingler { margin: 20px 0 8px; padding: 14px 16px; background: var(--sable); border: 1px solid var(--ligne); border-radius: 10px; }
.epingler p { margin: 0 0 8px; }
.epingler p:last-child, .epingler .btn { margin-bottom: 0; }
.epingler-titre { font-weight: 600; color: var(--encre); margin: 12px 0 4px !important; }
.epingler ol { margin: 0 0 8px; padding-left: 22px; font-size: .95rem; }
.epingler li { margin: 0 0 6px; }
.epingler details { margin-top: 6px; font-size: .95rem; }
.epingler summary { cursor: pointer; color: var(--encre); text-decoration: underline; }
/* L'onglet « Épingler le site » ne sert que sur téléphone : masqué dans le menu complet des grands écrans. */
@media (min-width: 1340px) { .menu a[href="#epingler"] { display: none; } }
.fiche-corps .epingler { margin-top: 16px; }

/* ---------- Améliorations UX du 2026-11-11 ---------- */
/* Premier écran : repères pratiques et prochain cours, juste sous le titre. */
.accueil-texte > .reperes, .accueil-texte > .prochain { order: 1; }
.reperes { margin: -6px 0 0; text-align: center; font-size: .95rem; color: var(--encre); }
.prochain[hidden] { display: none; }
.prochain button {
  all: unset; box-sizing: border-box; display: grid; gap: 2px; width: 100%; padding: 12px 16px; cursor: pointer;
  background: var(--sable); border: 1px solid var(--ligne); border-radius: 6px; color: var(--texte);
}
.prochain button:hover { border-color: var(--encre); }
.prochain button:focus-visible { outline: 2px solid var(--corail); outline-offset: 2px; }
.prochain-titre { font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--corail); }
.prochain strong { font-weight: 500; color: var(--encre); font-size: 1.02rem; }
.prochain-places { font-size: .92rem; color: var(--gris); }
.prochain-places.urgent { color: var(--corail); font-weight: 500; }
.prochain-places u { color: var(--encre); }
@media (max-width: 959px) {
  .logo { width: min(100%, 280px); }
  .diapo { aspect-ratio: 1 / 1; }
}
@media (min-width: 960px) {
  .reperes { text-align: left; margin-top: 10px; }
  .prochain button { width: auto; min-width: 340px; }
}

/* Liste des cours : un vrai bouton, places restantes en gris, en rouge à 3 places ou moins. */
.ligne-lien {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px;
  background: var(--encre); color: #fff; border: 1px solid var(--encre); transition: background .2s, border-color .2s;
}
.ligne-cours:hover .ligne-lien { background: var(--corail); border-color: var(--corail); color: #fff; }
.ligne-lien-attente { background: none; color: var(--encre); }
.ligne-cours:hover .ligne-lien-attente { background: var(--encre); border-color: var(--encre); }
.etat-inscrits { color: var(--gris); }
.etat-inscrits.etat-urgent { color: var(--corail); }
.reste { color: var(--gris); }
.reste.reste-urgent { color: var(--corail); }

/* Fiche d'un cours : bouton de réservation toujours visible jusqu'au formulaire. */
.fiche-aller {
  position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 2; width: 100%; margin-top: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25); transition: opacity .2s;
}
.fiche-aller.cache { opacity: 0; pointer-events: none; }

/* Avis : trois d'abord, les autres sur demande. */
.commentaires-plus { justify-self: start; }

/* Prix dans les formules (2026-11-11) : remplace le bloc « Horaires et tarifs ». */
.formule .formule-prix { color: var(--encre); padding-top: 14px; border-top: 1px solid var(--ligne); align-self: stretch; }
/* Trois formules : la 3e prend toute la largeur sur deux colonnes, trois colonnes sur grand écran. */
@media (min-width: 720px) and (max-width: 1099px) { .formule:nth-child(3) { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .formules { grid-template-columns: repeat(3, 1fr); } }
.formule .formule-prix { margin-top: auto; }
.formule .formule-prix + .btn { margin-top: 0; }