/* Ohlala Yoga — site public. Valeurs : variables de ohlala.css (DESIGN.md). */
.haut { position: sticky; top: 0; z-index: 30; background: var(--fond); border-bottom: 1px solid var(--ligne); }
.haut-ligne { display: flex; align-items: center; gap: var(--e16); min-height: 68px; }
.marque { display: block; padding: 6px 0; }
.marque img { width: 92px; height: auto; }
.nav-large { display: none; gap: var(--e16); margin-left: auto; }
.nav-large a { text-decoration: none; font-weight: 600; font-size: var(--t14); padding: var(--e8) 2px; border-bottom: 2px solid transparent; }
.nav-large a:hover, .nav-large a[aria-current="page"] { border-color: var(--orange-vif); }
.reserver-haut { margin-left: auto; min-height: 44px; padding: 0 var(--e16); }
.burger { width: 44px; height: 44px; border: 0; background: transparent; color: var(--texte); cursor: pointer; display: grid; place-items: center; }
.burger svg { width: 26px; height: 26px; }
.haut-ligne { position: relative; z-index: 2; background: var(--fond); }
.menu-mobile { position: fixed; inset: 0; z-index: 1; padding-top: 69px; overflow-y: auto; overscroll-behavior: contain; background: var(--fond); }
.menu-mobile[hidden] { display: none; }
.menu-mobile nav { display: flex; flex-direction: column; padding: var(--e16) var(--e24) var(--e48); border-top: 1px solid var(--ligne); }
html.menu-ouvert body { overflow: hidden; }
.menu-mobile a { text-decoration: none; font-weight: 600; font-size: var(--t20); padding: var(--e12) 0; border-bottom: 1px solid var(--ligne); }
@media (min-width: 1080px) {
  .haut-ligne { min-height: 76px; }
  .nav-large { display: flex; }
  .reserver-haut { margin-left: var(--e8); }
  .burger, .menu-mobile { display: none !important; }
  .marque img { width: 104px; }
}

main { position: relative; }
.section { padding: var(--e48) 0; position: relative; overflow: hidden; }
.section.bleue { background: var(--fond-3); }
.section.bleue .surtitre { color: var(--texte); }
.section.claire { background: var(--fond-2); }
.section > .conteneur { position: relative; z-index: 1; }
.intro { max-width: 680px; }
.surtitre { font-weight: 700; font-size: var(--t14); letter-spacing: 1.5px; text-transform: uppercase; color: var(--texte-2); margin-bottom: var(--e8); }

/* Accueil */
.hero { padding: var(--e32) 0 var(--e48); position: relative; overflow: hidden; }
.hero-grille { display: grid; gap: var(--e32); align-items: center; position: relative; z-index: 1; }
.hero h1 { font-size: 40px; }
.hero .accroche { font-size: var(--t20); font-weight: 600; }
.hero-photo { border-radius: 160px 160px var(--r-bloc) var(--r-bloc); overflow: hidden; box-shadow: var(--ombre); aspect-ratio: 4 / 4.3; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.badge-tosse { display: inline-flex; align-items: center; gap: var(--e8); background: var(--fond-2); border: 2px solid var(--orange-vif); border-radius: var(--r-pilule); padding: 6px 14px; font-weight: 700; font-size: var(--t14); margin-bottom: var(--e16); }
.badge-tosse svg { width: 18px; height: 18px; }
@media (min-width: 900px) {
  .hero-grille { grid-template-columns: 1.1fr .9fr; }
  .hero h1 { font-size: 56px; }
  .section { padding: 72px 0; }
  h1 { font-size: var(--t44); }
  h2 { font-size: var(--t32); }
}

/* Cours (comparaison) */
.duo { display: grid; gap: var(--e16); }
@media (min-width: 800px) { .duo { grid-template-columns: 1fr 1fr; gap: var(--e24); } }
.cours-carte { border-top: 8px solid var(--orange-vif); display: flex; flex-direction: column; }
.cours-carte.bleu { border-top-color: var(--bleu-ciel); }
.cours-carte .cours-court { font-weight: 700; font-size: var(--t20); }
.cours-carte dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--e16); margin: var(--e16) 0; font-size: var(--t14); }
.cours-carte dt { font-weight: 700; }
.cours-carte dd { margin: 0; }
.cours-carte .bouton { margin-top: auto; align-self: flex-start; }
.tableau-diff { width: 100%; border-collapse: collapse; background: var(--fond-2); border-radius: var(--r-bloc); overflow: hidden; font-size: var(--t14); }
.tableau-diff th, .tableau-diff td { text-align: left; padding: var(--e12) var(--e16); border-bottom: 1px solid var(--ligne); vertical-align: top; }
.tableau-diff th { font-weight: 700; }

/* Séances (planning) */
.liste-seances { display: grid; gap: var(--e12); }
.seance { display: grid; grid-template-columns: 64px 1fr; gap: var(--e8) var(--e16); align-items: center; text-decoration: none; color: inherit; padding: var(--e16); }
a.seance:hover { border-color: var(--accent); }
.seance-date { grid-row: span 2; display: flex; flex-direction: column; align-items: center; background: var(--fond); border-radius: var(--r-champ); padding: 6px 0; line-height: 1.1; }
.seance-jour, .seance-mois { font-size: var(--t12); font-weight: 700; text-transform: uppercase; }
.seance-num { font-family: var(--police-titres); font-size: var(--t24); color: var(--orange); }
.seance-nom { font-weight: 700; margin: 0; display: flex; align-items: center; gap: var(--e8); }
.seance-meta { margin: 0; font-size: var(--t14); color: var(--texte-2); }
.seance .etiquette { justify-self: start; }
.seance-action { grid-column: 2; font-weight: 700; font-size: var(--t14); display: inline-flex; align-items: center; gap: 6px; }
.seance-action svg { width: 18px; height: 18px; }
.seance-off { opacity: .8; }
@media (min-width: 700px) {
  .seance { grid-template-columns: 72px 1fr auto auto; }
  .seance-date { grid-row: auto; }
  .seance-action { grid-column: auto; }
}
.semaine-titre { font-weight: 700; font-size: var(--t14); text-transform: uppercase; letter-spacing: 1px; color: var(--texte-2); margin: var(--e24) 0 var(--e8); }

/* Parcours de réservation */
.resa { max-width: 720px; margin: 0 auto; }
.etapes { display: flex; gap: var(--e8); margin-bottom: var(--e24); font-size: var(--t14); font-weight: 600; color: var(--texte-2); flex-wrap: wrap; }
.etapes span[aria-current="step"] { color: var(--texte); border-bottom: 3px solid var(--orange-vif); }
.recap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: var(--t16); margin: 0; }
.recap dt { font-weight: 700; font-size: var(--t14); color: var(--texte-2); margin-top: var(--e12); }
.recap dt:first-child { margin-top: 0; }
.recap dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .recap { grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--e16); }
  .recap dt { font-size: var(--t16); color: inherit; margin-top: 0; }
}
.prix-fidelite { color: var(--ok); font-weight: 700; }
.retour { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: var(--e16); min-height: 44px; background: none; border: 0; color: var(--texte); cursor: pointer; font-family: var(--police-texte); font-size: var(--t16); padding: 0; }
.retour svg { width: 20px; height: 20px; }
.succes-icone { width: 72px; height: 72px; border-radius: 50%; background: var(--ok); color: var(--blanc); display: grid; place-items: center; margin: 0 auto var(--e16); }
.succes-icone svg { width: 40px; height: 40px; }

/* Pied de page */
.bas { background: var(--fond-2); border-top: 1px solid var(--ligne); padding-top: var(--e32); margin-top: 0; }
.bas-skool { display: flex; flex-direction: column; gap: var(--e16); background: var(--fond-3); box-shadow: none; margin-bottom: var(--e32); }
@media (min-width: 800px) { .bas-skool { flex-direction: row; align-items: center; justify-content: space-between; } }
.bas-grille { display: grid; gap: var(--e24); grid-template-columns: 1fr; margin-bottom: var(--e24); }
@media (min-width: 700px) { .bas-grille { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.bas a { text-decoration: none; }
.bas a:hover { text-decoration: underline; }

/* Avis */
.avis { display: grid; gap: var(--e16); }
@media (min-width: 800px) { .avis { grid-template-columns: repeat(3, 1fr); } }
.avis blockquote { margin: 0; }
.avis cite { display: block; margin-top: var(--e8); font-style: normal; font-weight: 700; font-size: var(--t14); }

/* Prestations */
.prestations { display: grid; gap: var(--e16); }
@media (min-width: 800px) { .prestations { grid-template-columns: repeat(2, 1fr); } }
.prestation .prix-gros { font-family: var(--police-titres); font-size: var(--t32); color: var(--orange); }

/* Qui suis-je */
.qui-grille { display: grid; gap: var(--e32); align-items: center; }
@media (min-width: 900px) { .qui-grille { grid-template-columns: .8fr 1.2fr; gap: var(--e48); } }
.qui-photo { margin: 0; position: relative; }
.qui-photo img { width: 100%; max-height: 440px; object-position: center 30%; object-fit: cover; border-radius: var(--r-bloc) var(--r-bloc) 160px 160px; box-shadow: var(--ombre); }
.qui-photo figcaption { font-size: var(--t12); color: var(--texte-2); margin-top: var(--e8); text-align: center; }
.accroche-qui { font-size: var(--t20); font-weight: 600; }
.formations { display: grid; gap: var(--e16); grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .formations { grid-template-columns: repeat(5, 1fr); } }
.formation { text-align: center; padding: var(--e24) var(--e16); border-top: 6px solid var(--orange-vif); }
.formation:nth-child(even) { border-top-color: var(--bleu-ciel); }
.formation:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) { .formation:last-child:nth-child(odd) { grid-column: auto; } }
.formation-h { display: block; font-family: var(--police-titres); font-size: var(--t44); color: var(--orange); line-height: 1; margin-bottom: var(--e8); }
.formation h3 { font-size: var(--t16); }
.formation p { font-size: var(--t14); color: var(--texte-2); margin: 0; }
.frise { list-style: none; margin: var(--e24) 0 0; padding: 0; position: relative; }
.frise::before { content: ""; position: absolute; left: 31px; top: 8px; bottom: 8px; width: 3px; background: var(--ligne); border-radius: 2px; }
.frise li { display: grid; grid-template-columns: 64px 1fr; gap: var(--e16); padding-bottom: var(--e24); position: relative; }
.frise-annee { width: 64px; height: 64px; border-radius: 50%; background: var(--fond-2); border: 3px solid var(--orange-vif); display: grid; place-items: center; font-weight: 700; font-size: var(--t14); position: relative; z-index: 1; }
.frise li:nth-child(even) .frise-annee { border-color: var(--bleu-ciel); }
.frise h3 { margin-top: var(--e12); }
.frise p { margin: 0; max-width: 640px; }
@media (min-width: 900px) { .qui-photo img { max-height: 640px; } }

/* Yoga du Surfeur */
.surf-hero { max-width: 820px; }
.surf-chiffres { display: flex; gap: var(--e24); flex-wrap: wrap; margin-top: var(--e16); }
.surf-chiffres b { display: block; font-family: var(--police-titres); font-weight: 400; font-size: var(--t32); color: var(--orange); line-height: 1.1; }
.surf-chiffres span { font-size: var(--t14); font-weight: 600; color: var(--texte-2); }
.jours-surf { list-style: none; padding: 0; margin: var(--e24) 0 0; display: grid; gap: var(--e16); }
@media (min-width: 700px) { .jours-surf { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .jours-surf { grid-template-columns: repeat(4, 1fr); } .jours-surf li:last-child { grid-column: span 2; } }
.jour-surf { border-top: 6px solid var(--orange-vif); padding: var(--e16) var(--e16) var(--e24); }
.jour-surf.bleu { border-top-color: var(--bleu-ciel); }
.jour-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--e8); }
.jour-num { font-family: var(--police-titres); font-size: var(--t24); color: var(--orange); }
.jour-surf h3 { font-size: var(--t16); }
.jour-surf p { font-size: var(--t16); margin: 0; }
.etapes-skool { list-style: none; padding: 0; margin: var(--e16) 0 0; display: grid; gap: var(--e16); }
@media (min-width: 800px) { .etapes-skool { grid-template-columns: repeat(3, 1fr); } }
.etapes-skool li { display: flex; gap: var(--e16); align-items: flex-start; background: var(--fond-2); border-radius: var(--r-bloc); padding: var(--e16); }
.etapes-skool b { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--accent); color: var(--sur-accent); display: grid; place-items: center; font-size: var(--t20); }
.etapes-skool p { margin: 0; }
@media (max-width: 699px) { .hero-surf .motif { display: none; } }
.hero-surf > .conteneur { position: relative; z-index: 1; }

/* Retraites */
.retraite-hero { position: relative; min-height: 520px; display: flex; align-items: flex-end; overflow: hidden; }
.retraite-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.retraite-hero-texte { position: relative; width: 100%; padding: 120px 0 var(--e32); background: linear-gradient(to top, rgba(43, 86, 114, .88) 35%, rgba(43, 86, 114, 0)); color: var(--sur-accent); }
.retraite-hero-texte h1, .retraite-hero-texte .surtitre { color: var(--sur-accent); }
.retraite-hero-texte .accroche { font-size: var(--t20); font-weight: 600; max-width: 640px; }
.retraite-hero-texte .bouton { background: var(--fond-2); color: var(--texte); border-color: var(--fond-2); }
@media (min-width: 900px) { .retraite-hero { min-height: 640px; } }
.retraite-bloc { display: grid; gap: var(--e32); align-items: center; }
@media (min-width: 900px) { .retraite-bloc { grid-template-columns: 1fr 1.1fr; gap: var(--e48); } .retraite-bloc.inverse > div:first-child { order: 2; } }
.liste-points { padding-left: 20px; margin: var(--e16) 0 0; }
.liste-points li { margin-bottom: var(--e8); }
.liste-points li::marker { color: var(--orange-vif); }
.mosaique { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e12); }
.mosaique .grande { grid-column: 1 / -1; }
.photo { margin: 0; border-radius: var(--r-bloc); overflow: hidden; box-shadow: var(--ombre); }
.photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.mosaique .photo:not(.grande) img { aspect-ratio: 3 / 4; }
.mosaique .grande img { aspect-ratio: 16 / 10; }
.galerie { display: grid; gap: var(--e12); grid-template-columns: 1fr; margin-top: var(--e24); }
@media (min-width: 700px) { .galerie { grid-template-columns: 1fr 1fr; } }
/* Téléphone : les motifs des sections ne passent jamais sous un texte (DESIGN.md) */
@media (max-width: 699px) { .section > .motif { display: none; } }
.hero-photo.paysage { aspect-ratio: 4 / 3.4; }
.hero-photo.paysage img { object-position: 55% center; }
@media (max-width: 699px) { .hero > .motif { display: none; } }
[id] { scroll-margin-top: 96px; }

/* Tunnel « être prévenue » (une question par écran) */
.tunnel { max-width: 640px; margin: 0 auto; text-align: center; }
.tunnel .carte { text-align: left; }
.tunnel-progression { display: flex; gap: 6px; margin-bottom: var(--e16); }
.tunnel-progression span { flex: 1; height: 6px; border-radius: 3px; background: var(--ligne); }
.tunnel-progression span.fait { background: var(--orange-vif); }
.choix-grands { display: grid; gap: var(--e12); margin: var(--e16) 0; }
@media (min-width: 640px) { .choix-grands { grid-template-columns: 1fr 1fr; } }
.choix-grand { min-height: 64px; border-radius: var(--r-champ); border: 2px solid var(--ligne); background: var(--fond-2); color: var(--texte); font: 600 var(--t16) var(--police-texte); cursor: pointer; padding: var(--e12) var(--e16); text-align: left; display: flex; flex-direction: column; justify-content: center; }
.choix-grand small { font-weight: 400; font-size: var(--t14); color: var(--texte-2); }
.choix-grand:hover, .choix-grand[aria-pressed="true"] { border-color: var(--accent); }
.choix-grand[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); }
.choix-grand[aria-pressed="true"] small { color: var(--sur-accent); }

/* Motif de Gaëlle qui passe sous une photo (remplace les motifs flottants coupés au bord des sections) */
.avec-motif { position: relative; isolation: isolate; }
.motif-derriere { position: absolute; z-index: -1; width: 30%; max-width: 170px; pointer-events: none; user-select: none; }
.coin-hg .motif-derriere { top: -9%; left: -7%; }
.coin-hd .motif-derriere { top: -9%; right: -7%; }
.coin-bg .motif-derriere { bottom: -9%; left: -7%; }
.coin-bd .motif-derriere { bottom: -9%; right: -7%; }
@media (max-width: 699px) { .motif-derriere { width: 26%; } .coin-hg .motif-derriere, .coin-bg .motif-derriere { left: -3%; } .coin-hd .motif-derriere, .coin-bd .motif-derriere { right: -3%; } }
.photo.bandeau { margin-top: var(--e24); }
.photo.bandeau img { aspect-ratio: 21 / 8; }
@media (max-width: 699px) { .photo.bandeau img { aspect-ratio: 4 / 3; } }
/* Bloc centré (retraites, Maroc) */
.bloc-centre { text-align: center; }
.bloc-centre .intro { margin: 0 auto var(--e24); }
.trois-points { display: grid; gap: var(--e16); max-width: 900px; margin: 0 auto var(--e32); }
@media (min-width: 800px) { .trois-points { grid-template-columns: repeat(3, 1fr); } }
.trois-points b { display: block; font-family: var(--police-titres); font-weight: 400; font-size: var(--t32); color: var(--orange); }
.trois-points span { font-size: var(--t16); }
.rangee-photos { display: grid; gap: var(--e16); grid-template-columns: 1fr; text-align: left; }
@media (min-width: 800px) { .rangee-photos { grid-template-columns: 1fr 1.6fr 1fr; align-items: center; } .rangee-photos .photo img { aspect-ratio: 3 / 4; } .rangee-photos .avec-motif .photo img { aspect-ratio: 4 / 3.4; } }

/* EEAT : chiffres clés, liens, FAQ */
.chiffres-cles { display: grid; gap: var(--e16); grid-template-columns: 1fr 1fr; text-align: center; }
@media (min-width: 900px) { .chiffres-cles { grid-template-columns: repeat(4, 1fr); } }
.chiffres-cles b { display: block; font-family: var(--police-titres); font-weight: 400; font-size: var(--t32); color: var(--orange); line-height: 1.1; }
.chiffres-cles span { font-size: var(--t14); font-weight: 600; color: var(--texte-2); }
.liens-moi { padding-left: 20px; } .liens-moi li { margin-bottom: var(--e8); } .liens-moi li::marker { color: var(--orange-vif); }
.faq { display: grid; gap: var(--e12); }
.faq details { padding: var(--e16) var(--e24); }
.faq summary { font-weight: 700; cursor: pointer; min-height: 32px; list-style-position: outside; }
.faq details p { margin: var(--e12) 0 0; }

/* Prestations */
.offres { display: grid; gap: var(--e16); margin-top: var(--e24); }
@media (min-width: 700px) { .offres { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .offres { grid-template-columns: repeat(3, 1fr); } }
.offre { display: flex; flex-direction: column; gap: var(--e8); }
.offre-tete { display: flex; justify-content: space-between; gap: var(--e12); align-items: flex-start; }
.offre h3 { margin: 0; }
.offre-sous { margin: 0; font-size: var(--t14); color: var(--texte-2); font-weight: 600; }
.offre-prix { margin: 0; font-family: var(--police-titres); font-size: var(--t24); color: var(--orange); white-space: nowrap; }
.offre p:not(.offre-sous):not(.offre-prix) { margin: 0; }
.lien-offre { margin-top: auto; font-weight: 700; padding-top: var(--e8); align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }

/* Questionnaire de demande (volet, principe des formulaires de Koh) */
button.lien-offre { background: none; border: 0; padding: var(--e8) 0 0; font: 700 var(--t16) var(--police-texte); color: var(--texte); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.questionnaire .tunnel-progression { margin-bottom: var(--e8); }
.questionnaire .choix-grands { grid-template-columns: 1fr 1fr; }
.questionnaire .choix-grand { min-height: 56px; }
.questionnaire .actions { display: flex; flex-direction: column; gap: var(--e8); margin-top: var(--e16); }
/* Les motifs passent maintenant sous les photos : les sections ne les coupent plus */
.section, .hero { overflow: visible; }
main { overflow-x: clip; }
.section.qui { padding-top: 72px; }

/* Mock-up téléphone (programme Yoga du Surfeur) : dessiné en HTML, net à toutes les tailles */
.mockup-grille { display: grid; gap: var(--e48); align-items: center; }
@media (min-width: 900px) { .mockup-grille { grid-template-columns: 1.1fr .9fr; } }
.etapes-skool.verticales { grid-template-columns: 1fr !important; }
.mockup-grille .avec-motif { justify-self: center; }
.telephone { width: 290px; max-width: 80vw; aspect-ratio: 9 / 18.5; background: var(--texte); border-radius: 44px; padding: 12px; box-shadow: 0 24px 60px rgba(43, 86, 114, .28); position: relative; }
.telephone::before { content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; border-radius: 12px; background: var(--texte); z-index: 2; }
.tel-ecran { background: var(--fond-2); border-radius: 34px; height: 100%; overflow: hidden; padding: 44px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.tel-barre { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; }
.tel-onglet { background: var(--accent); color: var(--sur-accent); border-radius: 99px; padding: 2px 8px; }
.tel-video { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; flex: none; }
.tel-video img { width: 100%; height: 100%; object-fit: cover; }
.tel-lecture { position: absolute; inset: 0; margin: auto; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 248, 243, .92); }
.tel-lecture::after { content: ""; position: absolute; left: 17px; top: 12px; border-left: 13px solid var(--texte); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.tel-duree { position: absolute; right: 8px; bottom: 6px; background: rgba(43, 86, 114, .85); color: var(--sur-accent); font-size: 10px; font-weight: 700; border-radius: 6px; padding: 1px 6px; }
.tel-titre { margin: 0; font-family: var(--police-titres); color: var(--orange); font-size: 17px; }
.tel-progres { height: 6px; border-radius: 3px; background: var(--ligne); overflow: hidden; flex: none; }
.tel-progres span { display: block; height: 100%; background: var(--orange-vif); }
.tel-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 11px; }
.tel-liste li { display: flex; align-items: center; gap: 7px; background: var(--fond); border-radius: 10px; padding: 6px 8px; }
.tel-liste li.actuel { outline: 2px solid var(--orange-vif); }
.tel-rond { width: 18px; height: 18px; border-radius: 50%; background: var(--fond-2); display: grid; place-items: center; font-weight: 700; font-size: 10px; flex: none; }
.tel-liste li.fait .tel-rond { background: var(--ok); color: var(--sur-accent); }
.tel-nom { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tel-min { color: var(--texte-2); white-space: nowrap; }

/* Accueil : les deux cours en alternance photo / texte */
#duo.duo { display: flex; flex-direction: column; gap: var(--e48); }
.cours-bloc { display: grid; gap: var(--e24); align-items: center; }
@media (min-width: 900px) { .cours-bloc { grid-template-columns: 1fr 1fr; gap: var(--e48); } .cours-bloc.inverse .cours-texte { order: 2; } }
.cours-bloc .photo img { aspect-ratio: 4 / 3; }
.cours-texte .surtitre { display: flex; align-items: center; gap: var(--e8); }
.cours-texte .cours-court { font-family: var(--police-titres); font-weight: 400; color: var(--orange); font-size: var(--t32); line-height: 1.15; }
.cours-texte dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--e16); margin: var(--e16) 0 var(--e24); font-size: var(--t14); }
.cours-texte dt { font-weight: 700; } .cours-texte dd { margin: 0; }

#duo.duo { margin-top: var(--e32); }
/* Cartes avec photo (accueil, « Le yoga, partout où tu es ») */
.carte-photo { padding: 0 0 var(--e24); overflow: hidden; display: flex; flex-direction: column; }
.carte-photo img { width: 100%; height: 200px !important; object-fit: cover; object-position: center 55%; margin-bottom: var(--e16); }
.carte-photo > *:not(img) { padding: 0 var(--e24); }
/* Motifs plus visibles (Julien : « on voit pas trop le soleil ») : plus grands, moitié dehors */
.motif-derriere { width: 38%; max-width: 210px; }
.coin-hg .motif-derriere { top: -16%; left: -14%; }
.coin-hd .motif-derriere { top: -16%; right: -14%; }
.coin-bg .motif-derriere { bottom: -16%; left: -14%; }
.coin-bd .motif-derriere { bottom: -16%; right: -14%; }
@media (max-width: 699px) { .motif-derriere { width: 32%; } .coin-hg .motif-derriere, .coin-bg .motif-derriere { left: -4%; } .coin-hd .motif-derriere, .coin-bd .motif-derriere { right: -4%; } }
#duo.duo { gap: 96px; }
@media (max-width: 899px) { #duo.duo { gap: var(--e48); } }
/* Motif retourné (la feuille de l accueil penche vers la droite) */
.miroir .motif-derriere { transform: scaleX(-1); }

/* Accueil, les deux cours : le nom du cours est le titre, l'accroche en dessous, les infos en étiquettes */
.cours-nom { font-family: var(--police-titres); font-weight: 400; color: var(--texte); font-size: var(--t32); line-height: 1.15; display: flex; align-items: center; gap: var(--e12); margin-bottom: var(--e8); }
.cours-nom .point { width: 16px; height: 16px; }
.cours-accroche { font-weight: 700; font-size: var(--t20); color: var(--orange); margin-bottom: var(--e12); }
.cours-infos { list-style: none; padding: 0; margin: var(--e16) 0 var(--e24); display: flex; flex-wrap: wrap; gap: var(--e8); }
.cours-infos li { display: inline-flex; align-items: center; gap: 6px; background: var(--fond-2); border: 1px solid var(--ligne); border-radius: var(--r-pilule); padding: 6px 14px; font-weight: 600; font-size: var(--t14); }
.cours-infos svg { width: 16px; height: 16px; }

/* Dessins de Gaëlle récupérés de son Instagram (bouquet, oiseaux, cœurs) */
.titre-coeurs { display: flex; align-items: center; gap: var(--e12); }
.titre-coeurs .coeurs { width: 56px; height: auto; }
.avec-motif .motif-derriere[src*="oiseaux"] { width: 46%; max-width: 240px; top: -18%; }
.qui-photo figcaption { position: relative; z-index: 1; }
.qui-grille .coin-bd .motif-derriere { bottom: -4%; right: -12%; }
/* Titres de section centrés partout (Julien, 24 oct.) ; les blocs texte + photo côte à côte gardent leur alignement */
.section > .conteneur > .surtitre, .section > .conteneur > h2, .section > .conteneur > h1 { text-align: center; }
.section > .conteneur > .intro { text-align: center; margin-left: auto; margin-right: auto; }
.section > .conteneur > .titre-coeurs { justify-content: center; }
.frise { max-width: 720px; margin-left: auto; margin-right: auto; }
.liens-moi { max-width: 640px; margin-left: auto; margin-right: auto; }
.bas-signature { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--e8); }
.bas-signature a { text-decoration: underline; }
.bas-signature { display: block; text-align: center; }
/* Téléphone : haut de page plus léger (Julien, 24 oct. : « un bloc de texte, hyper agressif ») */
@media (max-width: 899px) {
  .hero h1 { font-size: 34px; }
  .hero .accroche { font-size: var(--t16); font-weight: 400; }
  /* Yoga du Surfeur : texte, puis la photo, puis les chiffres et les boutons */
  .hero-surf .hero-grille { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .hero-surf .surf-hero { display: contents; }
  .hero-surf .hero-grille > .avec-motif { order: 1; margin: var(--e16) 0 var(--e8); }
  .hero-surf .surf-chiffres, .hero-surf .surf-hero > .ligne { order: 2; }
  .hero-surf .motif-derriere { display: none; }
}
.encart-retraites { border: 2px solid var(--orange-vif); box-shadow: var(--ombre); }
#prochaines { padding-top: 0; }
/* Téléphone : motifs plus petits et collés à la photo, pour ne jamais passer sur le texte (QA 24 oct.) */
@media (max-width: 699px) {
  .motif-derriere { width: 22%; }
  .coin-hg .motif-derriere, .coin-hd .motif-derriere { top: -5%; }
  .coin-bg .motif-derriere, .coin-bd .motif-derriere { bottom: -5%; }
}
/* Vidéo de présentation (Yoga du Surfeur) : bloc au fond coloré */
.video-bloc { background: var(--orange-vif); border-radius: var(--r-bloc); padding: var(--e32) var(--e16); text-align: center; max-width: 900px; margin: 0 auto; }
.video-bloc .surtitre { color: var(--texte); }
.video-bloc h2 { color: var(--texte); margin-bottom: var(--e24); }
.video-cadre { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: var(--r-champ); overflow: hidden; background: var(--texte); box-shadow: var(--ombre); cursor: pointer; }
.video-cadre img { width: 100%; height: 100% !important; object-fit: cover; }
.video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-lecture { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--fond-2); box-shadow: var(--ombre); }
.video-lecture::after { content: ''; position: absolute; left: 31px; top: 24px; border-left: 22px solid var(--orange); border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.video-cadre:hover .video-lecture { transform: scale(1.06); }
@media (min-width: 900px) { .video-bloc { padding: var(--e48); } }
/* Sélecteur de langue, même principe que le site de Laetitia : FR · EN · ES · DE, la page se traduit sur place */
.langsel { display: inline-flex; gap: 2px; background: var(--fond-2); border: 1px solid var(--ligne); border-radius: var(--r-pilule); padding: 3px; }
.langsel button { border: 0; background: none; font: 700 12px var(--police-texte); letter-spacing: .5px; color: var(--texte-2); padding: 5px 8px; border-radius: var(--r-pilule); cursor: pointer; min-height: 28px; }
.langsel button[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); }
.lang-large { display: none; }
.lang-mob { margin-left: auto; }
.lang-mob button { padding: 5px 6px; font-size: 11px; }
.lang-mob + .reserver-haut { margin-left: var(--e8); }
@media (max-width: 420px) { .haut-ligne { gap: var(--e8); } .marque img { width: 74px; } .reserver-haut { padding: 0 var(--e12); } }
@media (min-width: 1080px) { .lang-large { display: inline-flex; margin-left: var(--e8); } .lang-mob { display: none; } .lang-mob + .reserver-haut { margin-left: var(--e8); } }
/* Yoga du Surfeur : page de vente, mise en page de la page de Thibaut (24 oct.) avec les couleurs et composants du site */
.vente-surf .surtitre { margin-bottom: var(--e8); }
.vente-surf h2 { font-size: var(--t32); max-width: 760px; }
.vs-hero { padding: var(--e32) 0 var(--e48); }
.vs-hero-grille { display: grid; gap: var(--e32); align-items: center; }
@media (min-width: 900px) { .vs-hero-grille { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--e48); } .vs-hero { padding: var(--e48) 0 64px; } }
.vs-hero h1 { font-size: 44px; line-height: 1.05; }
@media (min-width: 900px) { .vs-hero h1 { font-size: 64px; } }
.vs-hero .accroche { font-weight: 600; font-size: var(--t20); }
.vs-boutons { display: flex; flex-wrap: wrap; gap: var(--e12); margin: var(--e24) 0 var(--e16); }
@media (max-width: 599px) { .vs-boutons .bouton { width: 100%; } }
.vs-badges { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e8); }
.vs-badges li { background: var(--fond-2); border: 1px solid var(--ligne); border-radius: var(--r-pilule); padding: 4px 12px; font-size: var(--t14); font-weight: 600; }
.vs-video { border-radius: var(--r-bloc); }
.vs-video-legende { position: absolute; left: var(--e16); bottom: var(--e16); background: var(--fond-2); color: var(--texte); border-radius: var(--r-pilule); padding: 6px 14px; font: 700 var(--t14) var(--police-texte); }
.vs-section { padding: var(--e48) 0; }
@media (min-width: 900px) { .vs-section { padding: 80px 0; } }
.vs-claire { background: var(--fond-2); }
.vs-sable { background: #F6DCC9; }
.vs-foncee { background: var(--texte); color: var(--blanc); }
.vs-foncee h2, .vs-foncee h3 { color: var(--blanc); }
.vs-foncee .surtitre { color: var(--orange-vif); }
.vs-foncee p { color: #E4EDF3; }
.vs-intro { max-width: 640px; margin-bottom: var(--e24); }
.vs-trois { display: grid; gap: var(--e16); }
@media (min-width: 800px) { .vs-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vs-carte { background: rgba(255, 255, 255, .08); border-radius: var(--r-bloc); padding: var(--e24); }
.vs-carte h3 { font-size: var(--t16); }
.vs-carte p { margin: 0; font-size: var(--t14); }
.vs-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e12) var(--e16); margin-top: var(--e32); }
.vs-cta span { font-size: var(--t14); color: var(--texte-2); }
.vs-foncee .vs-cta span { color: #C9D8E3; }
.vs-foncee .bouton:not(.second) { background: var(--orange-vif); border-color: var(--orange-vif); color: var(--texte); }
@media (max-width: 599px) { .vs-cta { flex-direction: column; } .vs-cta .bouton { width: 100%; } }
.vs-vignette { position: relative; overflow: hidden; }
.vs-vignette img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.vs-lecture { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255, 248, 243, .92); }
.vs-lecture::after { content: ''; position: absolute; left: 17px; top: 13px; border-left: 14px solid var(--orange); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.vs-modules { list-style: none; padding: 0; margin: var(--e24) 0 0; display: grid; gap: var(--e16); }
@media (min-width: 700px) { .vs-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .vs-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vs-module { background: var(--fond-2); border-radius: var(--r-bloc); overflow: hidden; box-shadow: var(--ombre); }
.vs-module-texte { padding: var(--e16) var(--e16) var(--e24); }
.vs-module-tete { display: flex; justify-content: space-between; font-size: var(--t14); color: var(--texte-2); margin-bottom: var(--e8); }
.vs-num { font-weight: 700; color: var(--orange); }
.vs-module h3, .vs-bonus h3 { font-size: var(--t20); }
.vs-module p { margin: 0; font-size: var(--t14); }
@media (max-width: 699px) {
  .vs-module { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .vs-module .vs-vignette img { aspect-ratio: auto; height: 100%; }
  .vs-module-texte { padding: var(--e12); }
  .vs-module p { display: none; }
  .vs-module h3 { font-size: var(--t16); margin: 0; }
}
.vs-bonus { margin-top: var(--e16); display: grid; background: var(--texte); color: var(--blanc); border-radius: var(--r-bloc); overflow: hidden; }
@media (min-width: 700px) { .vs-bonus { grid-template-columns: 1fr 1fr; } }
.vs-bonus-texte { padding: var(--e24); align-self: center; }
.vs-bonus h3 { color: var(--blanc); }
.vs-bonus .vs-num { color: var(--orange-vif); }
.vs-bonus .vs-module-tete { color: #C9D8E3; }
.vs-bonus p { margin: 0; color: #E4EDF3; font-size: var(--t14); }
.vs-seance { background: rgba(255, 255, 255, .08); border-radius: var(--r-bloc); overflow: hidden; }
.vs-seance > div:last-child { padding: var(--e16) var(--e16) var(--e24); }
.vs-seance p { margin: 0; font-size: var(--t14); }
.vs-pastille { display: inline-block; background: var(--orange-vif); color: var(--texte); border-radius: var(--r-pilule); padding: 2px 10px; font-size: var(--t12); font-weight: 700; margin-bottom: var(--e8); }
.vs-etapes-ligne { list-style: none; padding: 0; margin: var(--e16) 0 0; display: grid; gap: var(--e12); }
@media (min-width: 800px) { .vs-etapes-ligne { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vs-etapes-ligne li { border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--r-champ); padding: var(--e16); }
.vs-etapes-ligne strong { display: block; }
.vs-etapes-ligne span { font-size: var(--t14); color: #E4EDF3; }
.vs-deux { display: grid; gap: var(--e32); align-items: center; }
@media (min-width: 900px) { .vs-deux { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e48); } }
.vs-ordi { width: 100%; height: auto; border-radius: var(--r-bloc); }
.vs-portrait img { aspect-ratio: 1 / 1; }
.vs-gaelle .vs-cta { margin-top: var(--e24); }
.vs-temoins { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1fr); gap: var(--e24); align-items: start; max-width: 900px; }
@media (max-width: 599px) { .vs-temoins { grid-template-columns: 1fr; } .vs-temoin.portrait { max-width: 260px; } }
.vs-temoin { margin: 0; background: var(--fond-2); border-radius: var(--r-bloc); overflow: hidden; box-shadow: var(--ombre); }
.vs-temoin video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--texte); }
.vs-temoin.portrait video { aspect-ratio: 9 / 16; }
.vs-temoin figcaption { padding: var(--e12) var(--e16) var(--e16); }
.vs-temoin figcaption strong { display: block; }
.vs-temoin figcaption span { font-size: var(--t14); color: var(--texte-2); }
.vs-etapes { list-style: none; padding: 0; margin: var(--e24) 0 0; display: grid; gap: var(--e16); }
.vs-etapes li { display: flex; gap: var(--e12); align-items: flex-start; }
.vs-etapes b { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--orange-vif); color: var(--texte); display: grid; place-items: center; }
.vs-etapes strong { display: block; }
.vs-etapes span { font-size: var(--t14); color: #E4EDF3; }
.vs-offre { background: var(--fond-2); color: var(--texte); border-radius: var(--r-bloc); padding: var(--e24); box-shadow: 0 12px 40px rgba(0, 0, 0, .18); }
.vs-offre h3 { color: var(--texte); font-family: var(--police-titres); font-weight: 400; font-size: var(--t24); }
.vs-offre ul { list-style: none; padding: 0; margin: var(--e16) 0; display: grid; gap: var(--e8); }
.vs-offre li { display: flex; gap: var(--e8); align-items: flex-start; font-size: var(--t14); }
.vs-offre li svg { flex: none; color: var(--orange); margin-top: 2px; }
.vs-prix { border-top: 1px solid var(--ligne); padding-top: var(--e16); display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e8); }
.vs-prix b { font-family: var(--police-titres); font-weight: 400; font-size: var(--t44); color: var(--orange); line-height: 1; }
.vs-prix span { font-size: var(--t14); color: var(--texte-2); }
.vs-garantie { display: flex; gap: var(--e12); align-items: center; border: 2px dashed var(--orange-vif); border-radius: var(--r-champ); padding: var(--e12); margin: var(--e16) 0; font-size: var(--t14); }
.vs-garantie strong { display: block; }
.vs-garantie div span { color: var(--texte-2); }
.vs-14 { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--texte); color: var(--blanc); display: grid; place-items: center; font-weight: 700; font-size: var(--t14); }
.vs-offre .vs-mini { text-align: center; font-size: var(--t12); color: var(--texte-2); margin: var(--e12) 0 0; }
.vs-offre .bouton { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.vs-faq details { border-bottom: 1px solid var(--ligne); }
.vs-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--e16); padding: var(--e16) 0; font-weight: 700; min-height: 44px; }
.vs-faq summary::-webkit-details-marker { display: none; }
.vs-faq summary::after { content: '+'; color: var(--orange); font-size: var(--t24); line-height: 1; flex: none; }
.vs-faq details[open] summary::after { content: '–'; }
.vs-faq details p { margin: 0 0 var(--e16); }
.vs-collant { position: fixed; left: 50%; bottom: calc(var(--e16) + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; width: min(420px, calc(100% - 32px)); }
.vs-collant .bouton { width: 100%; box-shadow: 0 8px 24px rgba(43, 86, 114, .35); }
/* Qui suis-je, « Me retrouver » : cartes avec pastille et pictogramme */
.moi-cartes { list-style: none; padding: 0; margin: var(--e24) 0 0; display: grid; gap: var(--e16); }
@media (min-width: 700px) { .moi-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .moi-cartes li:last-child { grid-column: span 2; } }
.moi-carte { display: flex; gap: var(--e16); align-items: center; height: 100%; background: var(--fond-2); border-radius: var(--r-bloc); padding: var(--e16) var(--e24) var(--e16) var(--e16); box-shadow: var(--ombre); text-decoration: none; transition: transform .15s; }
.moi-carte:hover { transform: translateY(-2px); }
.moi-pastille { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--texte); }
.moi-pastille.orange { background: var(--orange-vif); }
.moi-pastille.bleu { background: var(--bleu-ciel); }
.moi-texte strong { display: block; color: var(--texte); }
.moi-texte span { display: block; font-size: var(--t14); color: var(--texte-2); }
/* Vidéo du haut de page : plus grande, motif orange posé derrière, qui dépasse en haut à droite */
.vs-video-motif .motif-derriere { width: 30%; max-width: 210px; top: -20%; right: -7%; bottom: auto; left: auto; }
.vs-video { box-shadow: 0 16px 48px rgba(43, 86, 114, .18); }
@media (max-width: 699px) { .vs-video-motif .motif-derriere { width: 26%; top: -14%; right: -3%; } }
/* Qui suis-je : la fleur bleue à côté du titre, dans l'espace libre en haut à droite (Julien, 24 oct.) */
.qui-texte { position: relative; }
.qui-fleur { position: absolute; top: -56px; right: 0; width: 150px; height: auto; pointer-events: none; z-index: -1; transform: rotate(12deg); }
@media (max-width: 899px) { .qui-fleur { top: -30px; right: 0; width: 64px; } }
/* Yoga du Surfeur, « De l'intérieur » : écran d'ordinateur dessiné en CSS autour de la capture Skool */
.ordi { width: 100%; max-width: 620px; margin: 0 auto; filter: drop-shadow(0 18px 36px rgba(43, 86, 114, .22)); }
.ordi-ecran { position: relative; background: #1E2B36; border-radius: 18px 18px 6px 6px; padding: 22px 14px 14px; }
.ordi-camera { position: absolute; top: 8px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #3B4D5C; }
.ordi-ecran img { width: 100%; height: auto; border-radius: 4px; display: block; }
.ordi-base { position: relative; height: 16px; margin: 0 -7%; background: linear-gradient(#E4E9EE, #B9C3CC); border-radius: 0 0 18px 18px; }
.ordi-base::before { content: ''; position: absolute; top: 0; left: 50%; width: 18%; height: 6px; transform: translateX(-50%); background: #A9B4BE; border-radius: 0 0 8px 8px; }
@media (max-width: 599px) { .ordi { padding: 0 4%; } .ordi-ecran { padding: 14px 8px 8px; border-radius: 12px 12px 4px 4px; } .ordi-base { height: 10px; margin: 0 -5%; } }
/* Prestations : le bouquet posé devant le coin de la photo, sans déborder sur la section suivante (Julien, 24 oct.) */
.bouquet-haut .motif-derriere { z-index: 1; bottom: -5%; left: -11%; }
@media (max-width: 699px) { .bouquet-haut .motif-derriere { width: 28%; bottom: -4%; left: -3%; } }

/* ---------- Réserver par la date + petit compte élève (fonctionnalites/2026-10-27-compte-eleve.md) ---------- */
.compte-encart { display: flex; align-items: center; justify-content: space-between; gap: var(--e12); flex-wrap: wrap; margin-bottom: var(--e16); background: var(--fond-2); border: 1px solid var(--ligne); }
.compte-encart .bouton { min-height: 44px; padding: 0 var(--e16); font-size: var(--t14); }
.cal-filtres { margin-bottom: var(--e16); flex-wrap: nowrap; overflow-x: auto; gap: 6px; }
.cal-filtres .pastille { flex: none; padding: 0 12px; gap: 6px; }
.cal { margin-bottom: var(--e24); background: var(--fond-2); border: 1px solid var(--ligne); border-radius: var(--r-bloc); padding: var(--e16) var(--e12); }
.cal-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--e8); margin-bottom: var(--e8); }
.cal-nav h2 { margin: 0; font-size: var(--t20); text-align: center; color: var(--texte); }
.cal-fl { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1.5px solid var(--ligne); background: var(--fond); color: var(--texte); display: grid; place-items: center; cursor: pointer; }
.cal-fl.suiv svg { transform: scaleX(-1); }
.cal-fl[disabled] { opacity: .35; cursor: default; }
.cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-js { text-align: center; font-size: var(--t12); font-weight: 700; color: var(--texte-2); text-transform: uppercase; padding: 2px 0 6px; }
.cal-j { min-height: 44px; aspect-ratio: 1; border-radius: 12px; border: 2px solid transparent; background: none; font: 700 var(--t16) var(--police-texte); color: var(--sur-desactive); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; }
.cal-j.hors { visibility: hidden; }
.cal-j.a { color: var(--texte); background: var(--fond); cursor: pointer; }
.cal-j.a:hover { border-color: var(--ligne); }
.cal-j[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); }
.cal-pts { display: flex; gap: 3px; min-height: 8px; }
.cal-pts .point { width: 8px; height: 8px; }
.cal-j.complet .cal-pts { opacity: .4; }
.cal-titre { font-size: var(--t24); margin: var(--e24) 0 var(--e12); }
.cal-titre::first-letter { text-transform: uppercase; }
.creneau { width: 100%; display: flex; align-items: center; gap: var(--e12); text-align: left; padding: var(--e16); border-radius: var(--r-champ); border: 2px solid var(--ligne); background: var(--fond-2); color: var(--texte); font: inherit; cursor: pointer; margin-bottom: var(--e8); min-height: 72px; }
.creneau[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--sur-accent); }
.creneau[disabled] { opacity: .5; cursor: not-allowed; }
.creneau-h { font-family: var(--police-titres); font-size: var(--t24); color: var(--orange); width: 64px; flex: none; }
.creneau-t { flex: 1; min-width: 0; }
.creneau-t b { display: flex; align-items: center; gap: var(--e8); }
.creneau-t small { display: block; color: var(--texte-2); font-size: var(--t14); }
.creneau-pl { display: block; margin-top: 4px; font-weight: 700; font-size: var(--t14); color: var(--ok); }
.creneau.plein .creneau-pl { color: var(--probleme); }
.creneau[aria-pressed="true"] .creneau-h, .creneau[aria-pressed="true"] small, .creneau[aria-pressed="true"] .creneau-pl { color: var(--sur-accent); }
.compte-infos { margin: var(--e16) 0; }
.offre-compte { text-align: left; background: var(--fond-2); border: 2px solid var(--orange-vif); border-radius: var(--r-bloc); padding: var(--e24); margin: var(--e24) auto 0; max-width: 480px; }
.offre-compte h2 { font-size: var(--t24); }
.resa .ligne-champs, .compte .ligne-champs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--e12); }
.lien-texte { display: inline-flex; align-items: center; min-height: 44px; background: none; border: 0; padding: 0; font: 600 var(--t14) var(--police-texte); color: var(--texte); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lien-texte.danger-texte { color: var(--probleme); }
.separe { display: flex; align-items: center; gap: var(--e12); color: var(--texte-2); font-size: var(--t14); margin: var(--e24) 0 var(--e16); }
.separe::before, .separe::after { content: ""; flex: 1; height: 1px; background: var(--ligne); }
.compte .section-titre { font-weight: 700; font-size: var(--t14); text-transform: uppercase; letter-spacing: 1px; color: var(--texte-2); margin: var(--e24) 0 var(--e8); }
.fid-carte { background: var(--accent); color: var(--sur-accent); border-radius: var(--r-bloc); padding: var(--e24); }
.fid-carte h2 { color: var(--sur-accent); font-size: var(--t24); margin-bottom: var(--e8); }
.fid-carte p { margin: 0; }
.billes { display: flex; gap: 6px; margin-top: var(--e16); flex-wrap: wrap; }
.billes i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); }
.billes i.ok { background: var(--orange-vif); border-color: var(--orange-vif); }
.billes i.cadeau { border-style: dashed; }
.cours-eleve { display: flex; gap: var(--e12); align-items: flex-start; margin-bottom: var(--e8); padding: var(--e16); }
.cours-eleve .grand { flex: 1; min-width: 0; }
.cours-eleve .grand p { margin: 0 0 2px; }
.compte .date-mini { width: 52px; flex: none; text-align: center; line-height: 1.1; }
.compte .date-mini span { display: block; font-size: var(--t12); font-weight: 700; text-transform: uppercase; }
.compte .date-mini b { font-family: var(--police-titres); font-weight: 400; font-size: var(--t32); color: var(--orange); }
.liens-compte { display: flex; flex-direction: column; align-items: flex-start; margin-top: var(--e24); padding-top: var(--e12); border-top: 1px solid var(--ligne); }

/* Réserver : de l'air entre le contenu et les boutons Retour / Continuer qui restent en bas (Julien, 27 oct.) */
.resa .q-pied { padding-top: var(--e12); padding-left: var(--e16); padding-right: var(--e16); margin-left: calc(-1 * var(--e16)); margin-right: calc(-1 * var(--e16)); background: var(--fond); box-shadow: 0 -10px 18px -6px rgba(43, 86, 114, .12); }
/* Plusieurs dates : jour qui contient un cours coché, liste des dates au récapitulatif et au succès */
.cal-j.coche:not([aria-pressed="true"]) { border-color: var(--accent); }
.recap-dates { list-style: none; margin: 0 0 var(--e16); padding: 0; }
.recap-dates li { display: flex; justify-content: space-between; gap: var(--e12); padding: var(--e8) 0; border-bottom: 1px solid var(--ligne); }
.recap-dates li:last-child { border-bottom: 0; }
.recap-dates li strong { white-space: nowrap; }
.succes-dates { max-width: 420px; margin: var(--e16) auto; text-align: left; }
.ok-texte { color: var(--ok); }
/* Mon compte : même mise en page que la réservation, une carte étroite (maquette compte-connexion, validée) */
.page-demande #zone.demande-zone { background: var(--fond-2); border: 1px solid var(--ligne); border-radius: var(--r-bloc); padding: var(--e24); box-shadow: var(--ombre); max-width: 460px; width: 100%; margin: 0 auto; }
.cnx-tete { display: flex; justify-content: space-between; align-items: center; gap: var(--e12); margin-bottom: var(--e24); }
.cnx-tete img { height: 44px; width: auto; }
.atouts { list-style: none; padding: 0; margin: 0 0 var(--e24); display: grid; gap: 8px; font-size: var(--t14); }
.atouts li { display: flex; gap: 10px; align-items: flex-start; }
.atouts li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--orange-vif); flex: none; margin-top: 6px; }
/* Choisir ses cours : liste à cocher par semaine (proposition B, Julien 27 oct.) */
.sem-titre { font-weight: 700; font-size: var(--t16); color: var(--texte); margin: var(--e24) 0 var(--e8); }
.liste-cours { margin-bottom: var(--e16); }
.ligne-cours { display: flex; align-items: center; gap: var(--e12); width: 100%; text-align: left; padding: var(--e12) 14px; border-radius: var(--r-champ); border: 2px solid var(--ligne); background: var(--fond-2); color: var(--texte); font: inherit; cursor: pointer; margin-bottom: var(--e8); min-height: 68px; }
.ligne-cours[aria-pressed="true"] { border-color: var(--accent); }
.ligne-cours[disabled] { opacity: .5; cursor: not-allowed; }
.lc-case { width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--ligne); flex: none; display: grid; place-items: center; background: var(--blanc); color: transparent; }
.lc-case svg { width: 18px; height: 18px; }
.ligne-cours[aria-pressed="true"] .lc-case { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.lc-jour { width: 52px; flex: none; line-height: 1.1; text-align: center; }
.lc-jour span { display: block; font-size: var(--t12); font-weight: 700; text-transform: uppercase; color: var(--texte); }
.lc-jour b { font-family: var(--police-titres); font-weight: 400; font-size: 28px; color: var(--orange); }
.lc-t { flex: 1; min-width: 0; }
.lc-t b { display: block; line-height: 1.3; }
.lc-t b .point { width: 9px; height: 9px; vertical-align: middle; margin: 0 2px; }
.nw { white-space: nowrap; }
.lc-t small { display: block; color: var(--texte-2); font-size: 13px; }
.lc-pl { font-size: var(--t12); font-weight: 700; color: var(--ok); text-align: right; max-width: 76px; }
.ligne-cours.plein .lc-pl { color: var(--probleme); }
.resume-choix { align-self: center; font-weight: 700; font-size: var(--t14); white-space: nowrap; }
.resume-choix:empty { display: none; }