/* ============================================================================
   Et Bien Dansez Maintenant · proposition de style A · 11/10/2026
   Une refonte claire et chaleureuse : fond ivoire, encre prune, corail doux.
   Trois jeux de couleurs sont prévus ; ils se changent par les variables ci-dessous.
   ========================================================================== */
:root {
  --fond: #FBF7F1; --fond2: #F3EADF; --carte: #FFFFFF;
  --encre: #2A2236; --texte: #4E4759; --doux: #7B7386;
  --marque: #5B2A4A; --marque-clair: #F2E5EC;
  --accent: #DE7A5C; --accent-fonce: #B9553A; --or: #D6A341;
  --trait: #E8DFD2; --ombre: 0 22px 48px -26px rgba(42, 34, 54, .38);
  --titre: 'Fraunces', Georgia, 'Times New Roman', serif;
  --corps: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
}
html[data-couleurs="nuit"] {
  --fond: #F8F7F3; --fond2: #E8EDF5; --encre: #1B2540; --texte: #465069; --doux: #6C7690;
  --marque: #22335C; --marque-clair: #E2E8F3; --accent: #C9973F; --accent-fonce: #94691D; --or: #C9973F; --trait: #DCE1EA;
}
html[data-couleurs="sauge"] {
  --fond: #F9F7F0; --fond2: #E6EFE7; --encre: #22312B; --texte: #47564F; --doux: #6B7A72;
  --marque: #2F5244; --marque-clair: #DCEAE1; --accent: #E38B66; --accent-fonce: #B3593A; --or: #D2A248; --trait: #DAE3DA;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--corps); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--titre); color: var(--encre); font-weight: 600; letter-spacing: -.012em; margin: 0; }
h1 { font-size: clamp(40px, 5.3vw, 70px); line-height: 1.04; }
h2 { font-size: clamp(30px, 3.5vw, 46px); line-height: 1.1; }
h3 { font-size: 23px; line-height: 1.2; }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--accent-fonce); }
p { margin: 0 0 14px; }
.conteneur { width: min(1180px, 100% - 48px); margin-inline: auto; }
.surtitre { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-fonce); margin-bottom: 14px; }
.surtitre:before { content: ""; width: 26px; height: 2px; background: var(--or); border-radius: 2px; }
.chapeau { font-size: 19px; line-height: 1.6; color: var(--texte); max-width: 640px; }
section { padding: 88px 0; }
.teinte { background: var(--fond2); }
.entete-section { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin-bottom: 40px; }
.entete-section .chapeau { margin: 14px 0 0; }
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--marque); text-decoration: none; border-bottom: 2px solid var(--or); padding-bottom: 2px; white-space: nowrap; }
.lien-fleche:hover { color: var(--accent-fonce); }

/* ---------- boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 24px; border-radius: 999px; font: 600 15.5px/1 var(--corps); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-plein { background: var(--marque); color: #fff; }
.btn-plein:hover { background: var(--encre); }
.btn-clair { background: transparent; color: var(--encre); border-color: color-mix(in srgb, var(--encre) 28%, transparent); }
.btn-clair:hover { border-color: var(--encre); }
.btn-blanc { background: #fff; color: var(--marque); }
.btn-contour-blanc { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-contour-blanc:hover { border-color: #fff; }

/* ---------- en-tête ---------- */
.haut { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--fond) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--trait); }
.haut .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 78px; }
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marque img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 4px 14px -6px rgba(42, 34, 54, .5); }
.marque b { display: block; font: 600 19px/1.1 var(--titre); color: var(--encre); letter-spacing: -.01em; }
.marque small { display: block; font-size: 12px; color: var(--doux); margin-top: 3px; }
.menu { display: flex; align-items: center; gap: 28px; }
.menu a.lien { font-size: 15px; font-weight: 500; color: var(--encre); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.menu a.lien:hover { color: var(--accent-fonce); }
.menu a.lien.ici { border-bottom-color: var(--accent); }
.menu a.lien .dehors { font-size: 11px; opacity: .6; margin-left: 3px; }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--trait); background: var(--carte); cursor: pointer; align-items: center; justify-content: center; }
.burger span, .burger span:before, .burger span:after { content: ""; display: block; width: 18px; height: 2px; background: var(--encre); border-radius: 2px; position: relative; }
.burger span:before { position: absolute; top: -6px; } .burger span:after { position: absolute; top: 6px; }

/* ---------- accueil : le haut de page ---------- */
.heros { padding: 64px 0 40px; overflow: hidden; }
.heros .conteneur { display: grid; grid-template-columns: 1.02fr .98fr; gap: 60px; align-items: center; }
.pastille { display: inline-flex; align-items: center; gap: 8px; background: var(--marque-clair); color: var(--marque); font-size: 13.5px; font-weight: 600; padding: 8px 15px; border-radius: 999px; margin-bottom: 22px; }
.pastille i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.heros .chapeau { margin: 22px 0 30px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.heros-pratique { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; font-size: 14.5px; color: var(--doux); }
.heros-pratique span { display: inline-flex; align-items: center; gap: 8px; }
.heros-pratique svg, .ligne-contact svg { width: 18px; height: 18px; flex: none; stroke: var(--accent-fonce); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tableau-photos { position: relative; padding: 0 0 62px 54px; }
.tableau-photos:before { content: ""; position: absolute; right: -70px; top: -40px; width: 300px; height: 300px; border-radius: 50%; background: var(--fond2); z-index: 0; }
.tableau-photos:after { content: ""; position: absolute; left: 6px; top: 34px; width: 92px; height: 92px; border-radius: 50%; border: 2px solid var(--or); z-index: 0; }
.photo-grande { position: relative; z-index: 1; width: 100%; aspect-ratio: 5 / 4.6; object-fit: cover; border-radius: 30px 30px 30px 130px; box-shadow: var(--ombre); }
.photo-petite { position: absolute; z-index: 2; left: 0; bottom: 0; width: 47%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; border: 7px solid var(--fond); box-shadow: var(--ombre); }
.etiquette { position: absolute; z-index: 3; right: -10px; bottom: 26px; background: var(--carte); border-radius: 18px; padding: 14px 18px; box-shadow: var(--ombre); display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.35; color: var(--texte); }
.etiquette b { display: block; font: 600 17px/1.2 var(--titre); color: var(--encre); }
.etiquette .rond { width: 42px; height: 42px; border-radius: 50%; background: var(--marque-clair); display: grid; place-items: center; flex: none; }
.etiquette .rond svg { width: 20px; height: 20px; stroke: var(--marque); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.chiffres { padding: 0; }
.chiffres .conteneur { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.chiffres div { padding: 30px 10px; text-align: center; border-left: 1px solid var(--trait); }
.chiffres div:first-child { border-left: 0; }
.chiffres b { display: block; font: 600 46px/1 var(--titre); color: var(--encre); letter-spacing: -.02em; }
.chiffres span { font-size: 14.5px; color: var(--doux); }

/* ---------- les danses ---------- */
.danses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.danse { background: var(--carte); border-radius: 22px; overflow: hidden; box-shadow: 0 1px 0 var(--trait), var(--ombre); transition: transform .22s ease; }
.danse:hover { transform: translateY(-5px); }
.danse img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.danse div { padding: 16px 20px 20px; }
.danse p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--doux); }
.danse.large { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; }
.danse.large img { height: 100%; aspect-ratio: auto; }
.danse.large div { align-self: center; padding: 24px 26px; }
.niveaux { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.niveaux span { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--marque-clair); color: var(--marque); }

/* ---------- qui sommes-nous ---------- */
.duo { display: grid; grid-template-columns: .92fr 1.08fr; gap: 64px; align-items: center; }
.duo .cadre { position: relative; }
.duo .cadre img { width: 100%; aspect-ratio: 4 / 3.5; object-fit: cover; border-radius: 130px 30px 30px 30px; box-shadow: var(--ombre); }
.duo .cadre .depuis { position: absolute; right: -18px; bottom: -22px; background: var(--marque); color: #fff; border-radius: 50%; width: 132px; height: 132px; display: grid; place-content: center; text-align: center; font-size: 13px; line-height: 1.2; box-shadow: var(--ombre); }
.duo .cadre .depuis b { font: 600 34px/1 var(--titre); display: block; }
.valeurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.valeur { background: var(--carte); border: 1px solid var(--trait); border-radius: 18px; padding: 18px; font-size: 14.5px; line-height: 1.45; }
.valeur b { display: block; font: 600 18px/1.2 var(--titre); color: var(--encre); margin: 12px 0 4px; }
.valeur .rond { width: 40px; height: 40px; border-radius: 50%; background: var(--marque-clair); display: grid; place-items: center; }
.valeur .rond svg { width: 20px; height: 20px; stroke: var(--marque); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- planning ---------- */
.planning { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.jour { background: var(--carte); border: 1px solid var(--trait); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.jour header { padding: 18px 18px 14px; border-bottom: 1px dashed var(--trait); }
.jour header b { display: block; font: 600 24px/1.1 var(--titre); color: var(--encre); }
.jour header span { font-size: 13px; color: var(--doux); }
.jour .prof { margin: 14px 18px 2px; font-size: 13px; font-weight: 600; color: var(--accent-fonce); }
.jour ul { list-style: none; margin: 0; padding: 0 18px 12px; }
.jour li { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid var(--trait); font-size: 14.5px; line-height: 1.35; color: var(--encre); }
.jour li:first-child { border-top: 0; }
.jour li time { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--marque); }
.jour li small { display: block; font-size: 12.5px; color: var(--doux); }
.legende { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 26px; font-size: 14.5px; color: var(--doux); }
.agenda { margin-top: 44px; border-radius: 22px; overflow: hidden; border: 1px solid var(--trait); background: #fff; }
.agenda iframe { display: block; width: 100%; height: 640px; border: 0; }

/* ---------- tarifs ---------- */
.tarifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.tarif { background: var(--carte); border: 1px solid var(--trait); border-radius: 26px; padding: 30px 28px; display: flex; flex-direction: column; }
.tarif.phare { background: var(--marque); border-color: var(--marque); color: #EFE6EC; box-shadow: var(--ombre); }
.tarif.phare h3, .tarif.phare .prix, .tarif.phare li b { color: #fff; }
.tarif .pour { font-size: 14px; color: var(--doux); margin: 4px 0 18px; }
.tarif.phare .pour { color: #D9C8D3; }
.tarif .prix { font: 600 52px/1 var(--titre); color: var(--encre); letter-spacing: -.02em; }
.tarif .prix small { font: 500 16px/1 var(--corps); letter-spacing: 0; opacity: .75; }
.tarif .inclus { font-size: 14px; margin: 10px 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--trait); }
.tarif.phare .inclus { border-bottom-color: rgba(255, 255, 255, .22); }
.tarif ul { list-style: none; margin: 0 0 24px; padding: 0; }
.tarif li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 15px; }
.tarif li b { color: var(--encre); font-weight: 600; font-variant-numeric: tabular-nums; }
.tarif .btn { margin-top: auto; }
.note { font-size: 14px; color: var(--doux); margin-top: 20px; }

/* ---------- soirées ---------- */
.dates { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.date { display: flex; gap: 20px; align-items: center; background: var(--carte); border: 1px solid var(--trait); border-radius: 22px; padding: 20px 24px; }
.date .jour-mois { flex: none; width: 86px; height: 86px; border-radius: 20px; background: var(--marque-clair); color: var(--marque); display: grid; place-content: center; text-align: center; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; line-height: 1.15; }
.date .jour-mois b { font: 600 34px/1 var(--titre); display: block; letter-spacing: 0; }
.date p { margin: 4px 0 0; font-size: 14.5px; color: var(--doux); line-height: 1.45; }
.affiche { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center; }
.affiche img { border-radius: 18px; box-shadow: var(--ombre); border: 1px solid var(--trait); }

/* ---------- l'équipe ---------- */
.equipe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.prof-carte img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: 22px; box-shadow: var(--ombre); }
.prof-carte h3 { font-size: 20px; margin-top: 16px; }
.prof-carte .quand { font-size: 13px; font-weight: 600; color: var(--accent-fonce); margin: 4px 0 2px; text-transform: uppercase; letter-spacing: .04em; }
.prof-carte p { font-size: 14.5px; line-height: 1.45; color: var(--doux); margin: 0; }
.prof-carte .reseaux { display: flex; gap: 8px; margin-top: 10px; }
.prof-carte .reseaux a { font-size: 12.5px; font-weight: 600; text-decoration: none; padding: 5px 11px; border-radius: 999px; background: var(--marque-clair); color: var(--marque); }
.equipe.grande { grid-template-columns: repeat(3, 1fr); gap: 34px 26px; }

/* ---------- bandeau d'appel ---------- */
.appel { background: var(--marque); border-radius: 36px; padding: 60px 56px; color: #EDE3EA; display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; position: relative; overflow: hidden; }
.appel:before { content: ""; position: absolute; right: -90px; top: -110px; width: 340px; height: 340px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .16); }
.appel:after { content: ""; position: absolute; right: 40px; bottom: -150px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.appel h2 { color: #fff; }
.appel h2 em { color: var(--or); }
.appel p { margin: 14px 0 0; font-size: 18px; max-width: 520px; }
.appel .actions { position: relative; z-index: 1; justify-content: flex-end; }

/* ---------- pages intérieures ---------- */
.titre-page { background: var(--fond2); padding: 62px 0 54px; position: relative; overflow: hidden; }
.titre-page:after { content: ""; position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%; border: 2px solid var(--or); opacity: .55; }
.titre-page h1 { font-size: clamp(36px, 4.6vw, 58px); }
.titre-page .chapeau { margin: 16px 0 0; }
.essai { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.essai img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; border-radius: 30px 130px 30px 30px; box-shadow: var(--ombre); }
.coches { list-style: none; margin: 20px 0 28px; padding: 0; }
.coches li { position: relative; padding: 7px 0 7px 34px; }
.coches li:before { content: ""; position: absolute; left: 0; top: 11px; width: 20px; height: 20px; border-radius: 50%; background: var(--marque-clair); }
.coches li:after { content: ""; position: absolute; left: 6px; top: 16px; width: 8px; height: 5px; border-left: 2px solid var(--marque); border-bottom: 2px solid var(--marque); transform: rotate(-45deg); }
.contact-grille { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: start; }
.bloc { background: var(--carte); border: 1px solid var(--trait); border-radius: 26px; padding: 30px; }
.ligne-contact { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--trait); font-size: 16px; line-height: 1.45; }
.ligne-contact:first-of-type { border-top: 0; }
.ligne-contact b { display: block; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--doux); }
.ligne-contact a { color: var(--encre); font-weight: 600; text-decoration: none; }
.formulaire label { display: block; font-size: 14px; font-weight: 600; color: var(--encre); margin: 0 0 6px; }
.formulaire input, .formulaire textarea { width: 100%; font: 400 16px/1.4 var(--corps); color: var(--encre); background: var(--fond); border: 1.5px solid var(--trait); border-radius: 14px; padding: 13px 15px; margin-bottom: 16px; }
.formulaire input:focus, .formulaire textarea:focus { outline: none; border-color: var(--marque); background: #fff; }
.formulaire .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mention { font-size: 13px; color: var(--doux); line-height: 1.5; }

/* ---------- pied de page ---------- */
.bas { background: var(--encre); color: #CFC8D8; padding: 64px 0 26px; font-size: 15px; margin-top: 88px; }
.bas .colonnes { display: grid; grid-template-columns: 1.3fr .8fr 1fr 1fr; gap: 40px; }
.bas h4 { font: 600 13px/1 var(--corps); letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.bas a { color: #fff; text-decoration: none; }
.bas a:hover { text-decoration: underline; }
.bas ul { list-style: none; margin: 0; padding: 0; }
.bas li { padding: 4px 0; }
.bas .logo { width: 104px; border-radius: 14px; margin-bottom: 16px; }
.bas .fin { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 13.5px; color: #A9A1B5; }

/* ---------- le choix des couleurs (présent dans la maquette seulement) ---------- */
.couleurs { position: fixed; left: 18px; bottom: 18px; z-index: 80; background: #fff; border: 1px solid #ddd; border-radius: 999px; padding: 8px 10px 8px 16px; display: flex; align-items: center; gap: 9px; font: 600 13px/1 var(--corps); color: #333; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35); }
.couleurs button { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; outline: 1.5px solid #ccc; cursor: pointer; padding: 0; }
.couleurs button.choisi { outline: 2.5px solid #222; }

/* ---------- téléphone et tablette ---------- */
@media (max-width: 1080px) {
  .danses { grid-template-columns: repeat(2, 1fr); }
  .planning { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .equipe { grid-template-columns: repeat(3, 1fr); }
  .bas .colonnes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .burger { display: inline-flex; }
  .menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--fond); border-bottom: 1px solid var(--trait); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 22px; display: none; box-shadow: 0 30px 40px -30px rgba(42, 34, 54, .4); }
  .menu.ouvert { display: flex; }
  .menu a.lien { padding: 14px 0; border-bottom: 1px solid var(--trait); font-size: 17px; }
  .menu a.lien.ici { border-bottom-color: var(--trait); color: var(--accent-fonce); }
  .menu .btn { margin-top: 16px; }
  .heros .conteneur, .duo, .essai, .affiche, .contact-grille, .appel { grid-template-columns: 1fr; }
  .heros { padding-top: 40px; }
  .tableau-photos { padding-left: 34px; margin-top: 8px; }
  .appel { padding: 44px 30px; border-radius: 28px; }
  .appel .actions { justify-content: flex-start; }
  .tarifs, .dates { grid-template-columns: 1fr; }
  .duo { gap: 54px; }
  section { padding: 64px 0; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .conteneur { width: min(1180px, 100% - 36px); }
  .marque small { display: none; }
  .marque b { font-size: 17px; }
  .danses, .planning, .equipe, .equipe.grande, .valeurs, .bas .colonnes { grid-template-columns: 1fr; }
  .danse.large { grid-column: auto; display: block; }
  .danse.large img { aspect-ratio: 4 / 3; height: auto; }
  .chiffres .conteneur { grid-template-columns: 1fr 1fr; }
  .chiffres div:nth-child(3) { border-left: 0; }
  .chiffres div:nth-child(n+3) { border-top: 1px solid var(--trait); }
  .chiffres b { font-size: 38px; }
  .tableau-photos { padding: 0 0 54px 22px; }
  .tableau-photos:before { right: -120px; }
  .etiquette { right: 0; bottom: 8px; padding: 11px 14px; font-size: 13px; }
  .duo .cadre .depuis { right: 6px; width: 112px; height: 112px; }
  .formulaire .deux { grid-template-columns: 1fr; }
  .equipe .prof-carte img { aspect-ratio: 4 / 4.2; }
  .couleurs { left: 10px; bottom: 10px; }
  .agenda iframe { height: 560px; }
  .date { padding: 16px; gap: 14px; }
  .date .jour-mois { width: 72px; height: 72px; }
}


/* ============================================================================
   LE STYLE RETENU par Nicolas le 11/10/2026 : ivoire, prune et corail doux.
   Cette couche s'ajoute à la base de style.css (sans la couche « pep's »).
   Elle ne change pas le dessin : elle corrige 3 détails et ajoute le thème de nuit.
   ========================================================================== */
:root { --pied: #2A2236; --vif: var(--accent-fonce); --marque-texte: var(--marque); }
.bas { background: var(--pied); }
h1 em, h2 em { color: var(--vif); }
.lien-fleche, .pastille, .niveaux span, .jour li time, .date .jour-mois, .prof-carte .reseaux a { color: var(--marque-texte); }
.etiquette .rond svg, .valeur .rond svg { stroke: var(--marque-texte); }

/* les 3 détails corrigés */
.danse div.niveaux { padding: 0; }                                   /* les étiquettes Débutant / Inter s'alignent sur le texte */
.jour li { display: block; }                                         /* planning : l'heure au-dessus du cours, rien ne se chevauche */
.jour li time { display: block; font-size: 13.5px; margin-bottom: 1px; }
.date .jour-mois b { text-transform: none; }

/* le bouton Jour / Nuit */
.jour-nuit { order: 3; display: inline-flex; flex: none; padding: 4px; border-radius: 999px; border: 1.5px solid var(--trait); background: var(--carte); }
.jour-nuit button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--texte); font: 600 13.5px/1 var(--corps); padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.jour-nuit button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jour-nuit button.choisi { background: var(--marque); color: #fff; }
.menu { order: 2; margin-left: auto; }
.burger { order: 4; }

/* le thème de nuit : les mêmes teintes, sur un fond prune profond */
html[data-theme="nuit"] {
  --fond: #221A2D; --fond2: #2B2138; --carte: #362A46; --encre: #FFFFFF; --texte: #DED4E5; --doux: #AB9FB7;
  --trait: rgba(255, 255, 255, .14); --marque: #A8587B; --marque-clair: rgba(255, 255, 255, .1); --marque-texte: #F3B4C9;
  --accent: #F0977B; --accent-fonce: #F5AC93; --or: #E2B55A; --pied: #16101E; --vif: #F5AC93;
  --ombre: 0 22px 48px -26px rgba(0, 0, 0, .75);
}
html[data-theme="nuit"] .btn-plein:hover { background: #C06A90; }
html[data-theme="nuit"] .appel, html[data-theme="nuit"] .tarif.phare { background: #4A2440; border-color: #4A2440; }
html[data-theme="nuit"] .tableau-photos:before { background: rgba(255, 255, 255, .06); }
html[data-theme="nuit"] .menu a.lien:hover, html[data-theme="nuit"] .lien-fleche:hover { color: #fff; }
html[data-theme="nuit"] .formulaire input:focus, html[data-theme="nuit"] .formulaire textarea:focus { background: var(--fond2); border-color: var(--marque-texte); }

/* téléphone : des cartes compactes, pour une page moins longue */
@media (max-width: 980px) { .jour-nuit { margin-left: auto; } .menu { margin-left: 0; } }
@media (max-width: 640px) {
  .jour-nuit button span { display: none; }
  .jour-nuit button { padding: 8px 9px; }
  .haut .conteneur { gap: 10px; }
  .marque b { font-size: 15.5px; }
  .marque img { width: 42px; height: 42px; }
  .danse, .danse.large { display: grid; grid-template-columns: 118px 1fr; }
  .danse img, .danse.large img { aspect-ratio: auto; height: 100%; min-height: 118px; }
  .danse > div, .danse.large > div { padding: 12px 14px 14px; align-self: center; }
  .danse h3 { font-size: 19px; }
  .equipe { grid-template-columns: 1fr 1fr; gap: 22px 14px; }
  .equipe .prof-carte img { aspect-ratio: 4 / 5; }
  .prof-carte h3 { font-size: 17px; }
}

/* la danse en ligne du tarif couple : 55 € par personne (15/10/2026) */
.tarif li b.par-personne { text-align: right; }
.tarif li b.par-personne small { display: block; font-size: 12.5px; font-weight: 500; opacity: .8; white-space: nowrap; }

/* deux tarifs affichés (individuel, couple) : deux colonnes, centrées */
.tarifs { grid-template-columns: repeat(2, minmax(0, 440px)); justify-content: center; }
@media (max-width: 760px) { .tarifs { grid-template-columns: minmax(0, 440px); } }

/* les pastilles Facebook et Instagram des professeurs : le vrai logo, en couleur, sans texte */
.prof-carte .reseaux { gap: 10px; }
.prof-carte .reseaux a.reseau { display: block; width: 38px; height: 38px; padding: 0; border-radius: 50%; background: none; box-shadow: 0 8px 16px -9px rgba(42, 34, 54, .65); transition: transform .18s ease, box-shadow .18s ease; }
.prof-carte .reseaux a.reseau svg { display: block; width: 38px; height: 38px; }
.prof-carte .reseaux a.reseau:hover { transform: translateY(-2px) scale(1.07); box-shadow: 0 12px 20px -10px rgba(42, 34, 54, .7); }
.prof-carte .reseaux a.reseau:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }

/* ---------- la rubrique « Notre prochaine soirée EBDM » (ajout du 12/10/2026) ---------- */
.prochaine { display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 1fr); gap: 48px; align-items: center; }
.affiche-soiree { display: block; width: 100%; padding: 0; border: 1px solid var(--trait); border-radius: 22px; overflow: hidden; background: var(--carte); box-shadow: var(--ombre); cursor: zoom-in; transition: transform .2s ease; }
.affiche-soiree:hover { transform: translateY(-4px); }
.affiche-soiree:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
.affiche-soiree img { display: block; width: 100%; height: auto; }
.affiche-legende { text-align: center; font-size: 13.5px; color: var(--doux); margin: 10px 0 0; }
.prochaine-infos .date { margin-bottom: 26px; }
.prochaine-infos .date h3 { font-size: 26px; }
.points-soiree { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 16px; }
.points-soiree li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start; }
.points-soiree .rond { width: 42px; height: 42px; border-radius: 50%; background: var(--marque-clair); display: grid; place-items: center; }
.points-soiree .rond svg { width: 21px; height: 21px; stroke: var(--marque-texte); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.points-soiree b { display: block; font: 600 18.5px/1.25 var(--titre); color: var(--encre); }
.points-soiree .detail { display: block; font-size: 15px; line-height: 1.5; color: var(--texte); margin-top: 2px; }
.reserver { background: var(--marque); color: #F3E8EE; border-radius: 20px; padding: 18px 22px; font-size: 15.5px; line-height: 1.55; }
.reserver b { display: block; font: 600 19px/1.2 var(--titre); color: #fff; margin-bottom: 4px; }
.reserver a { color: #fff; font-weight: 600; white-space: nowrap; }
.autres-dates { font-size: 21px; margin: 54px 0 16px; }
.visionneuse { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(20, 14, 26, .88); cursor: zoom-out; }
/* 18/10/2026 : dans la grille, « max-height: 100% » ne limitait rien (sur tablette, le bas de l'affiche sortait de l'écran sans défiler) */
.visionneuse img { max-width: 100%; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
@media (max-width: 980px) {
  .prochaine { grid-template-columns: 1fr; gap: 30px; }
  .prochaine > div:first-child { max-width: 420px; margin: 0 auto; width: 100%; }
}

/* ---------- le petit calendrier : une case qui déroule la vignette de son événement, comme un volet (13/10/2026) ---------- */
button.date.date-voir { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
button.date.date-voir:hover, button.date.date-voir:focus-visible, button.date.date-voir[aria-expanded="true"] { border-color: var(--marque); box-shadow: var(--ombre); }
button.date.date-voir:hover { transform: translateY(-3px); }
button.date.date-voir .jour-mois { background: var(--marque); color: #fff; }
.date-texte { display: block; min-width: 0; }
.date-nom { display: block; font: 600 22px/1.2 var(--titre); color: var(--encre); }
.date-ou { display: block; margin-top: 4px; font-size: 14.5px; color: var(--doux); line-height: 1.45; }
.date-plus { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font: 600 14px/1.2 var(--corps); color: var(--marque-texte, var(--marque)); border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.date-plus svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; }
button.date.date-voir[aria-expanded="true"] .date-plus svg { transform: rotate(180deg); }
.dates [hidden], .prochaine[hidden], .volet[hidden] { display: none; }
/* le volet : il se déroule sous le calendrier, et se referme */
.volet { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s ease; }
.volet.ouvert { grid-template-rows: 1fr; }
.volet-dedans { overflow: hidden; min-height: 0; }
.volet-cadre { margin-top: 22px; padding: 28px; border-radius: 26px; background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--ombre); }
.volet-fermer { margin: 14px 0 0; text-align: center; }
.volet-fermer button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 8px 10px; font: 600 15px/1.2 var(--corps); color: var(--marque-texte, var(--marque)); cursor: pointer; }
.volet-fermer svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#evenements .volet + .note { margin-top: 22px; }
@media (max-width: 720px) { .volet-cadre { padding: 16px; border-radius: 22px; } .date-nom { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .volet, .date-plus svg { transition: none; } }

/* ---------- la bannière d'événement (ajout du 12/10/2026) ---------- */
/* Un dégradé qui glisse lentement, un reflet qui passe, une étiquette qui clignote doucement, un compte à rebours qui tourne. */
#bandeau-evenement:empty { display: none; }
.evt { position: relative; overflow: hidden; color: #fff; background: linear-gradient(100deg, #47203E 0%, #6B2C4F 26%, #A54640 58%, #B9553A 78%, #6B2C4F 100%); background-size: 240% 100%; animation: evt-glisse 14s ease-in-out infinite alternate; }
.evt::after { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 20%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .24), transparent); transform: skewX(-18deg); animation: evt-reflet 5.5s ease-in-out infinite; pointer-events: none; }
.evt-lien { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 20px; padding: 11px 58px 11px 20px; color: #fff; text-decoration: none; font: 500 15px/1.35 var(--corps); }
.evt-etiquette { display: inline-flex; align-items: center; gap: 7px; flex: none; font: 700 11px/1 var(--corps); letter-spacing: .09em; text-transform: uppercase; color: #2A2236; background: #FFD98A; border-radius: 999px; padding: 6px 11px 6px 9px; animation: evt-clignote 1.7s ease-in-out infinite; }
.evt-etiquette i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #B9553A; }
.evt-etiquette i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #B9553A; animation: evt-onde 1.7s ease-out infinite; }
.evt-quoi b { font: 600 18px/1.2 var(--titre); letter-spacing: .005em; margin-right: 4px; }
.evt-jour { font-weight: 600; }
.evt-detail { opacity: .88; }
.evt-compte { display: inline-flex; align-items: center; gap: 6px; flex: none; font-variant-numeric: tabular-nums; }
.evt-dans { font-size: 13px; opacity: .88; margin-right: 2px; }
.evt-case { display: inline-flex; align-items: baseline; gap: 3px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); border-radius: 10px; padding: 5px 8px; font-size: 11.5px; font-weight: 600; }
.evt-case b { font: 600 17px/1 var(--titre); min-width: 1.25em; text-align: center; }
.evt-direct { font-weight: 700; background: #FFD98A; color: #2A2236; border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.evt-bouton { display: inline-flex; align-items: center; gap: 7px; flex: none; background: #fff; color: #5B2A4A; font-weight: 700; font-size: 14px; line-height: 1; border-radius: 999px; padding: 10px 16px; transition: transform .18s ease, box-shadow .18s ease; }
.evt-bouton svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.evt-lien:hover .evt-bouton { box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5); }
.evt-lien:hover .evt-bouton svg { transform: translateX(3px); }
.evt-lien:focus-visible { outline: 3px solid #FFD98A; outline-offset: -3px; }
.evt-fermer { position: absolute; z-index: 2; right: 12px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font: 400 21px/1 var(--corps); cursor: pointer; }
.evt-fermer:hover { background: rgba(255, 255, 255, .28); }
.point-menu { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--accent); vertical-align: middle; animation: evt-clignote 1.7s ease-in-out infinite; }
@keyframes evt-glisse { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes evt-reflet { 0%, 55% { left: -30%; } 100% { left: 125%; } }
@keyframes evt-clignote { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes evt-onde { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .evt, .evt::after, .evt-etiquette, .evt-etiquette i::after, .point-menu { animation: none; } }
@media (max-width: 860px) {
  .evt-lien { justify-content: flex-start; padding: 12px 52px 13px 16px; gap: 9px 12px; font-size: 14.5px; }
  .evt-quoi { flex: 1 1 100%; order: 2; }
  .evt-etiquette { order: 1; }
  .evt-compte { order: 3; }
  .evt-bouton { order: 4; margin-left: auto; }
  .evt-detail, .evt-dans { display: none; }
  .evt-fermer { top: 10px; transform: none; right: 10px; }
}
@media (max-width: 400px) { .evt-sec { display: none; } }
@media print { #bandeau-evenement { display: none !important; } }

/* dans la rubrique « Notre prochaine soirée » : l'encadré de réservation avec son bouton */
.reserver { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.reserver > div { flex: 1 1 260px; }
.reserver .btn { flex: none; }

/* le menu tient sur une seule ligne, même avec l'entrée « Prochaine soirée » et son point */
.menu a.lien { white-space: nowrap; }
@media (min-width: 981px) { .menu { gap: 22px; } }
@media (min-width: 981px) and (max-width: 1200px) { .menu { gap: 14px; } .menu a.lien { font-size: 14px; } .marque small { display: none; } .jour-nuit button span { display: none; } }
/* le bouton blanc de l'encadré garde son texte prune (les liens de l'encadré, eux, sont blancs) */
.reserver a.btn-blanc { color: #5B2A4A; white-space: nowrap; }

/* « Réserver ma place » (demande de Nicolas, 12/10/2026) : un halo doré qui bat, un reflet qui traverse le bouton et une flèche
   qui avance, pour que l'on voie tout de suite que le bouton se clique. Tout s'arrête si le visiteur a demandé moins d'animations. */
.bouton-vif { position: relative; overflow: hidden; isolation: isolate; animation: vif-halo 1.7s ease-out infinite; }
.bouton-vif::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -70%; width: 50%; background: linear-gradient(100deg, transparent, rgba(222, 122, 92, .45), transparent); transform: skewX(-20deg); animation: vif-reflet 2.2s ease-in-out infinite; pointer-events: none; }
.bouton-vif svg { animation: vif-fleche 1.7s ease-in-out infinite; }
@keyframes vif-halo { 0% { box-shadow: 0 0 0 0 rgba(255, 217, 138, .9); transform: scale(1); } 45% { transform: scale(1.045); } 75%, 100% { box-shadow: 0 0 0 12px rgba(255, 217, 138, 0); transform: scale(1); } }
@keyframes vif-reflet { 0%, 30% { left: -70%; } 100% { left: 135%; } }
@keyframes vif-fleche { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .bouton-vif, .bouton-vif::before, .bouton-vif svg { animation: none; } }

/* ---------- le bouton Jour / Nuit suit le soleil (ajout du 12/10/2026) : un curseur qui glisse, et l'étiquette « auto » ---------- */
.jour-nuit { position: relative; }
.jour-nuit::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--marque); transition: transform .55s cubic-bezier(.4, 0, .2, 1); }
html[data-theme="nuit"] .jour-nuit::before { transform: translateX(100%); }
.jour-nuit button, .jour-nuit button.choisi { position: relative; z-index: 1; flex: 1 1 0; justify-content: center; background: transparent; transition: color .35s ease; }
.jour-nuit[data-auto="1"]::after { content: "auto"; position: absolute; z-index: 2; top: -9px; right: 12px; font: 700 9.5px/1 var(--corps); letter-spacing: .09em; text-transform: uppercase; color: #2A2236; background: var(--or); border-radius: 999px; padding: 3px 7px; pointer-events: none; }
/* pendant le passage d'un thème à l'autre, les couleurs fondent au lieu de sauter */
html.theme-glisse *, html.theme-glisse *::before, html.theme-glisse *::after { transition: background-color .75s ease, color .75s ease, border-color .75s ease, box-shadow .75s ease, transform .55s cubic-bezier(.4, 0, .2, 1) !important; }
@media (prefers-reduced-motion: reduce) { .jour-nuit::before, html.theme-glisse * { transition: none !important; } }

/* ---------- un pictogramme par style de danse (ajout du 12/10/2026) ---------- */
.logo-danse { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--marque-clair); flex: none; }
.logo-danse svg { width: 21px; height: 21px; stroke: var(--marque-texte); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.logo-danse.petit { width: 30px; height: 30px; }
.logo-danse.petit svg { width: 17px; height: 17px; }
.danse h3 { display: flex; align-items: center; gap: 10px; }
.jour li.avec-logo { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.jour li.avec-logo time { display: block; }
/* 15/10/2026 : sur tablette (768 px), la grille « Nos cours » laissait des trous ; les cartes viennent les combler */
@media (min-width: 641px) and (max-width: 1080px) { .danses { grid-auto-flow: dense; } }

/* la rubrique « Qui sommes-nous ? » : quatre onglets, un seul texte affiché à la fois (proposition B, choisie le 12/10/2026) */
.onglets { display: flex; flex-wrap: wrap; gap: 6px; width: fit-content; max-width: 100%; margin: 22px 0 16px; padding: 5px; border-radius: 26px; background: var(--carte); border: 1px solid var(--trait); }
.onglets button { border: 0; background: none; padding: 9px 16px; border-radius: 999px; font: 600 14.5px/1 var(--corps); color: var(--texte); cursor: pointer; transition: background .18s ease, color .18s ease; }
.onglets button:hover { color: var(--encre); }
.onglets button.on { background: var(--marque); color: #fff; }
.onglets button:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
.onglet-texte { min-height: 190px; }
.onglet-texte h4 { font: 600 19px/1.2 var(--titre); color: var(--encre); margin: 20px 0 0; }
.onglet-texte .valeurs { margin-top: 20px; }
.pourquoi { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.pourquoi li { position: relative; padding-left: 26px; }
.pourquoi li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
@media (max-width: 640px) { .onglets { border-radius: 20px; } .onglets button { padding: 9px 12px; font-size: 14px; } .onglet-texte { min-height: 0; } }

/* le formulaire « Écrivez-nous » : chaque case dit ce qui ne va pas, juste dessous */
/* le bouton flottant « Nous contacter » mène ici : le formulaire se cale sous la barre du haut, pas dessous */
/* 15/10/2026 : depuis le menu du téléphone, le surtitre d'une rubrique arrivait sous la barre du haut, qui reste collée en haut de l'écran.
   Ces 24 px s'ajoutent à la marge du formulaire : 80 + 24 = 104 px, comme avant */
html { scroll-padding-top: 24px; }
#ecrire { scroll-margin-top: 80px; }
.case-contact { position: relative; margin-bottom: 16px; }
.formulaire .case-contact input, .formulaire .case-contact textarea { margin-bottom: 0; }
.formulaire .case-contact textarea { display: block; resize: vertical; }
.case-contact .erreur { display: block; min-height: 0; font-size: 13.5px; font-weight: 600; color: #B3261E; }
.case-contact.faux .erreur { margin-top: 6px; }
.formulaire .case-contact.faux input, .formulaire .case-contact.faux textarea { border-color: #B3261E; background: #FDF1EF; }
.case-contact .compte { position: absolute; right: 12px; bottom: 9px; font-size: 12px; color: var(--doux, #7B7386); pointer-events: none; }
.case-contact.faux .compte { display: none; }
.contact-ok { margin: 14px 0 0; padding: 12px 15px; border-radius: 14px; background: #E8F4EC; color: #1D5B36; font-weight: 600; font-size: 15px; }
html[data-theme="nuit"] .case-contact .erreur { color: #FFB4A9; }
html[data-theme="nuit"] .formulaire .case-contact.faux input, html[data-theme="nuit"] .formulaire .case-contact.faux textarea { border-color: #FFB4A9; background: rgba(255, 180, 169, .08); }
html[data-theme="nuit"] .contact-ok { background: rgba(120, 200, 150, .14); color: #A8E0BD; }
/* 24/10/2026 : le message n'est pas parti (frein, réseau, case refusée) : la même ligne, en rouge doux */
.contact-ok.contact-echec { background: #FDF1EF; color: #B3261E; }
html[data-theme="nuit"] .contact-ok.contact-echec { background: rgba(255, 180, 169, .1); color: #FFB4A9; }

/* ---------- la rubrique « Taxi danseur » : le jaune et le damier des taxis de New York, sans voiture (12/10/2026) ---------- */
.taxi { --taxi: #FDB913; position: relative; padding: 0; background: #17171C; color: #D9D6CC; overflow: hidden; }
.taxi-damier { height: 28px; background: repeating-conic-gradient(#111 0% 25%, var(--taxi) 0% 50%) 0 0 / 28px 28px; }
.taxi .conteneur.taxi-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; padding-top: 78px; padding-bottom: 84px; }
.taxi-enseigne { display: inline-flex; align-items: center; gap: 12px; padding: 7px 16px 7px 8px; border-radius: 12px; background: var(--taxi); color: #111; border: 3px solid #111; font: 800 14px/1 var(--corps); letter-spacing: .2em; text-transform: uppercase; box-shadow: 0 0 0 3px var(--taxi), 0 0 38px rgba(253, 185, 19, .5); }
.taxi-enseigne i { width: 9px; height: 9px; border-radius: 2px; background: #111; }
.taxi-enseigne .logo-taxi { width: 34px; height: 34px; flex: none; }
.taxi h2 { color: #fff; margin: 26px 0 16px; }
.taxi h2 em { color: var(--taxi); }
.taxi .chapeau { color: #EDEAE0; max-width: 56ch; }
.taxi-vivier { margin: 16px 0 0; max-width: 56ch; padding-left: 16px; border-left: 4px solid var(--taxi); }
.taxi-vivier b { color: #fff; }
.taxi-danses { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
.taxi-danses li { padding: 6px 12px; border-radius: 999px; border: 1.5px solid rgba(253, 185, 19, .55); color: #F5E7B8; font: 600 13.5px/1.2 var(--corps); }
.taxi-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin-top: 28px; }
.taxi .btn.taxi-btn { background: var(--taxi); color: #111; border: 2px solid var(--taxi); font-weight: 700; box-shadow: 0 14px 30px -14px rgba(253, 185, 19, .8); cursor: pointer; }
.taxi .btn.taxi-btn:hover { background: #FFD457; border-color: #FFD457; color: #111; }
.taxi .btn.taxi-clair { background: transparent; color: var(--taxi); border: 2px solid var(--taxi); font-weight: 700; cursor: pointer; }
.taxi [hidden] { display: none !important; }   /* une ligne de boutons cachée reste cachée (elle est en « flex ») */
.taxi-note { font-size: 14px; color: #A9A69C; }
.taxi-visuel { display: grid; gap: 24px; }
/* les tickets de danse : une bande de trois, détachables, comme au guichet d'un dancing */
.taxi-tickets { display: flex; width: min(100%, 470px); margin: 6px auto 0; transform: rotate(-4deg); filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55)); }
.taxi-ticket { position: relative; flex: 1 1 0; min-width: 0; padding: 26px 10px 16px; background: var(--taxi); color: #111; text-align: center; display: grid; gap: 9px; align-content: start;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 9px, #000 9.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 9px, #000 9.5px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 9px, #000 9.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 9px, #000 9.5px) right / 51% 100% no-repeat; }
.taxi-ticket::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: repeating-conic-gradient(#111 0% 25%, var(--taxi) 0% 50%) 0 0 / 12px 12px; }
.taxi-ticket + .taxi-ticket { border-left: 2px dashed rgba(17, 17, 17, .55); }
.taxi-ticket small { font: 700 9.5px/1.2 var(--corps); letter-spacing: .14em; text-transform: uppercase; }
.taxi-ticket b { font: 600 clamp(17px, 2.1vw, 23px)/1.05 var(--titre); letter-spacing: -.01em; }
.taxi-ticket span { justify-self: center; padding: 4px 8px; border: 1.5px solid #111; border-radius: 5px; font: 700 11px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .08em; }
.taxi-histoire { margin: 0; font-size: 15px; line-height: 1.55; color: #CFCBC0; }
.taxi-histoire b { color: var(--taxi); }
.taxi-compteur { background: #0D0D11; border: 2px solid #34343D; border-radius: 18px; padding: 18px 20px 12px; }
.taxi-compteur-haut { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 2px dashed #34343D; font: 700 12px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .18em; text-transform: uppercase; color: #8E8B82; }
.taxi-compteur-haut b { color: var(--taxi); font-size: 15px; letter-spacing: .12em; }
.taxi-compteur ol { list-style: none; margin: 0; padding: 0; }
.taxi-compteur li { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid #25252C; font-size: 15px; line-height: 1.45; color: #CFCBC0; }
.taxi-compteur li:last-child { border-bottom: 0; }
.taxi-compteur li i { flex: none; width: 30px; height: 30px; border-radius: 7px; background: var(--taxi); color: #111; display: grid; place-items: center; font: 800 15px/1 var(--corps); font-style: normal; }
.taxi-compteur li b { display: block; color: #fff; font-weight: 700; }
/* la demande de devis : une page à part (taxi-danseur.html), en six petites étapes, une question à la fois */
.taxi-page { min-height: 70vh; }
.taxi .conteneur.taxi-tete-page { padding-top: 64px; padding-bottom: 30px; text-align: center; }
.taxi-tete-page h1 { color: #fff; margin: 24px 0 12px; font: 600 clamp(32px, 5vw, 52px)/1.08 var(--titre); }
.taxi-tete-page h1 em { color: var(--taxi); }
.taxi-tete-page .chapeau { margin: 0 auto; }
.taxi .conteneur.taxi-devis { padding-bottom: 72px; }
#taxi-form { max-width: 760px; margin: 0 auto; background: #0D0D11; border: 2px solid var(--taxi); border-radius: 22px; padding: 26px 30px 22px; }
.taxi-entete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#taxi-form h3 { margin: 0; font: 700 12.5px/1 var(--corps); letter-spacing: .16em; text-transform: uppercase; color: var(--taxi); }
.taxi-pas { font: 700 13px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: #8E8B82; }
.taxi-fil { height: 6px; margin: 12px 0 26px; border-radius: 999px; background: #25252C; overflow: hidden; }
.taxi-fil i { display: block; height: 100%; width: 20%; border-radius: 999px; background: var(--taxi); transition: width .3s ease; }
.taxi-etape { border: 0; margin: 0; padding: 0; min-width: 0; }
.taxi-etape legend { padding: 0; margin: 0 0 18px; font: 600 clamp(24px, 3.4vw, 32px)/1.15 var(--titre); color: #fff; }
/* un petit dessin devant chaque titre et chaque question (« mets des logos pour les titres », Nicolas, 13/10/2026) */
.taxi-titre { display: inline-flex; align-items: center; gap: 13px; }
.taxi-titre-ico { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(253, 185, 19, .15); color: var(--taxi); }
.taxi-titre-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.taxi-question .taxi-titre { gap: 10px; }
.taxi-question .taxi-titre-ico { width: 32px; height: 32px; }
.taxi-question .taxi-titre-ico svg { width: 18px; height: 18px; }
/* la bulle de « Conseillez-moi » : le repère des 30 partenaires par tranche de 4 heures (Nicolas, 13/10/2026) */
.taxi-conseil { position: relative; margin-top: 14px; padding: 13px 16px 14px; border-radius: 14px; border: 1.5px solid rgba(253, 185, 19, .55); background: rgba(253, 185, 19, .1); color: #F5E7B8; font-size: 15px; line-height: 1.5; }
.taxi-conseil b { display: block; margin-bottom: 3px; font: 600 13px/1.3 var(--corps); text-transform: uppercase; letter-spacing: .05em; color: var(--taxi); }
.taxi-conseil::before { content: ""; position: absolute; top: -8px; left: var(--fleche, 40px); width: 13px; height: 13px; margin-left: -7px; background: #1F1B12; border-left: 1.5px solid rgba(253, 185, 19, .55); border-top: 1.5px solid rgba(253, 185, 19, .55); transform: rotate(45deg); }
.taxi-conseil.vu { animation: taxi-conseil-vu .35s ease; }
@keyframes taxi-conseil-vu { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .taxi-conseil.vu { animation: none; } }
.taxi-question { margin: 26px 0 12px; font: 600 16.5px/1.3 var(--corps); color: #F5E7B8; }
.taxi-question.premier { margin-top: 0; }
.taxi-question i { font-style: normal; font-weight: 400; color: #A9A69C; }
.taxi-puces { display: flex; flex-wrap: wrap; gap: 10px; }
.taxi-puces label { cursor: pointer; }
.taxi-puces input { position: absolute; opacity: 0; pointer-events: none; }
.taxi-puces span { display: inline-block; padding: 12px 18px; border-radius: 999px; border: 1.5px solid rgba(253, 185, 19, .5); color: #F5E7B8; font: 600 15.5px/1.2 var(--corps); transition: background .15s ease, color .15s ease, transform .15s ease; }
.taxi-puces label:hover span { border-color: var(--taxi); }
.taxi-puces input:checked + span { background: var(--taxi); color: #111; border-color: var(--taxi); transform: scale(1.03); }
.taxi-puces input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.taxi-champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.taxi-champ.espace, .taxi-etape > .taxi-champ { margin-top: 18px; }
.taxi-champ label { display: block; margin: 0 0 6px; padding: 0; font: 600 14px/1.3 var(--corps); color: #F5E7B8; }
.taxi-champ label i { font-style: normal; font-weight: 400; color: #A9A69C; }
.taxi-champ input, .taxi-champ textarea { width: 100%; min-width: 0; font: 400 17px/1.4 var(--corps); color: #fff; background: #1E1E25; border: 1.5px solid #3A3A45; border-radius: 12px; padding: 13px 14px; color-scheme: dark; }
.taxi-champ textarea { display: block; resize: vertical; }
.taxi-champ { position: relative; min-width: 0; }
/* iPhone : une case de date ou d'heure garde sa propre largeur et dépasse du cadre tant qu'on ne lui retire pas son habillage (vu par Nicolas le 13/10/2026) */
.taxi-champ input[type="date"], .taxi-champ input[type="time"] { display: block; box-sizing: border-box; max-width: 100%; min-height: 54px; }
@supports (-webkit-touch-callout: none) {
  .taxi-champ input[type="date"], .taxi-champ input[type="time"] { -webkit-appearance: none; appearance: none; }
  .taxi-champ input::-webkit-date-and-time-value { text-align: left; }
}
.taxi-quand { margin-top: 18px; }
/* le nom et le SIRET d'un organisme côte à côte ; le code postal (étroit) à côté de la ville */
.taxi-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
.taxi-deux.seul { grid-template-columns: minmax(0, 1fr); }   /* sans le SIRET (association, mairie), le nom prend toute la largeur */
.taxi-ville { grid-template-columns: minmax(0, 170px) minmax(0, 1fr); margin-top: 18px; }
.taxi-etape > legend + .taxi-champ { margin-top: 0; }
.taxi-quand.plusieurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* l'adresse sur une seule ligne (14/10/2026) : le lien de secours sous la case, et les trois cases d'avant derrière lui */
#tx-une-ligne > .taxi-champ, #tx-cases > .taxi-champ { margin-top: 18px; }
#tx-une-ligne[hidden], #tx-cases[hidden] { display: none; }
.taxi-lien-adresse { display: inline-block; margin: 0; padding: 12px 0; min-height: 44px; box-sizing: border-box; border: 0; background: none; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--taxi); text-decoration: underline; cursor: pointer; }
.taxi-aide { margin: 10px 0 0; font-size: 14px; color: #A9A69C; }
/* plusieurs jours aux horaires différents : une case à cocher, puis une ligne par jour (demande de Nicolas, 13/10/2026) */
.taxi-varie { margin-top: 16px; }
.taxi-par-jour { display: grid; gap: 10px; margin-top: 16px; }
.taxi-ligne-jour { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.taxi-ligne-jour > b { padding-top: 15px; font: 600 15.5px/1.3 var(--corps); color: #F5E7B8; }
.taxi-ligne-jour > b::first-letter { text-transform: uppercase; }
.taxi-ligne-jour.tete span { font: 400 13px/1.3 var(--corps); color: #A9A69C; }
/* une heure : deux listes côte à côte, l'heure puis les minutes au quart d'heure ; à côté, la liste « Durée » (Nicolas, 13/10/2026) */
.tx-heure { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 6px; }
.tx-heure select, .tx-duree { display: block; width: 100%; min-width: 0; min-height: 54px; box-sizing: border-box; font: 400 17px/1.4 var(--corps); color: #fff; background: #1E1E25; border: 1.5px solid #3A3A45; border-radius: 12px; padding: 0 4px 0 11px; color-scheme: dark; cursor: pointer; }
.tx-heure select:focus, .tx-duree:focus { outline: none; border-color: var(--taxi); }
.taxi-champ.faux .tx-heure select { border-color: #FFB4A9; }
/* le jour (ou les deux jours) sur une ligne, puis le début, la fin et la durée sur la suivante : les listes ont la place d'écrire « Heure » en entier (« on le voit mal », Nicolas, 13/10/2026) */
.taxi-quand, .taxi-quand.plusieurs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.taxi-quand .tx-jour { grid-column: span 3; }
.taxi-quand:not(.plusieurs) .tx-jour { grid-column: 1 / -1; max-width: 330px; }   /* un seul jour : la date sur sa ligne, puis début, fin et durée côte à côte */
.taxi-quand .taxi-champ:not(.tx-jour) { grid-column: span 2; }
.taxi-ligne-jour { grid-template-columns: minmax(0, .9fr) minmax(0, 1.08fr) minmax(0, 1.08fr) minmax(0, .8fr); }
/* « Comme jeudi » : recopier l'horaire de la veille, sur ce jour ou sur tous les jours suivants */
.taxi-meme { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: -2px; }
.taxi-meme button { padding: 8px 13px; border-radius: 999px; border: 1.5px dashed rgba(253, 185, 19, .65); background: transparent; color: #FDB913; font: 600 13.5px/1.2 var(--corps); cursor: pointer; }
.taxi-meme button:hover, .taxi-meme button:focus-visible { background: rgba(253, 185, 19, .16); outline: none; }
/* les adresses proposées sous la case « Le lieu » */
.taxi-page { overflow: visible; }
.taxi-propositions { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; list-style: none; margin: 0; padding: 6px; background: #1E1E25; border: 1.5px solid var(--taxi); border-radius: 14px; box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .85); }
.taxi-propositions li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 12px; border-radius: 10px; font-size: 15px; line-height: 1.35; color: #fff; cursor: pointer; }
.taxi-propositions li b { font-weight: 600; }
.taxi-propositions li span { color: #A9A69C; white-space: nowrap; }
.taxi-propositions li:hover, .taxi-propositions li.actif { background: rgba(253, 185, 19, .2); }
.taxi-propositions li.source { justify-content: flex-end; padding: 5px 12px 2px; font-size: 11.5px; color: #8E8B82; cursor: default; background: none; }
.taxi-champ input:focus, .taxi-champ textarea:focus { outline: none; border-color: var(--taxi); }
.taxi-champ .erreur { display: block; font-size: 13.5px; font-weight: 600; color: #FFB4A9; }
.taxi-champ.faux .erreur { margin-top: 5px; }
.taxi-champ.faux input, .taxi-champ.faux textarea { border-color: #FFB4A9; }
.taxi-alerte { margin: 16px 0 0; font-size: 14.5px; font-weight: 600; color: #FFB4A9; min-height: 0; }
.taxi-alerte:empty { display: none; }
#taxi-boutons { margin-top: 24px; }
.taxi-retour, .taxi-fermer { border: 0; background: none; color: #A9A69C; font: 500 15px/1 var(--corps); text-decoration: underline; cursor: pointer; padding: 6px; }
.taxi-fermer { margin-left: auto; }
.taxi-retour { padding: 12px 10px; }   /* 15/10/2026 : une zone à toucher plus grande pour le doigt */
.taxi-vie-privee { margin: 16px 0 0; font-size: 13.5px; color: #8E8B82; }   /* 15/10/2026 : la phrase de vie privée a sa propre classe ; « taxi-maquette » reste la ligne qui dit où en est l'envoi */
.taxi-fin { margin-top: 20px; }
.taxi-ok { margin: 0; font: 600 clamp(22px, 3vw, 28px)/1.2 var(--titre); color: #fff; }
/* le résumé : une coche, un billet jaune pour l'occasion, puis une carte par sujet avec son petit dessin (13/10/2026) */
.taxi-bravo { display: flex; align-items: center; gap: 14px; }
.taxi-coche { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #2E9E5B; color: #fff; display: grid; place-items: center; }
.taxi-coche svg, .taxi-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.taxi-coche svg { stroke-width: 2.6; }
.taxi-billet { position: relative; display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 28px 20px 18px; border-radius: 16px; background: var(--taxi); color: #111; overflow: hidden; }
.taxi-billet::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: repeating-conic-gradient(#111 0% 25%, var(--taxi) 0% 50%) 0 0 / 12px 12px; }
.taxi-billet .logo-taxi { width: 58px; height: 58px; flex: none; }
.taxi-billet > div { min-width: 0; }
.taxi-billet small { display: block; font: 700 11px/1.2 var(--corps); letter-spacing: .14em; text-transform: uppercase; }
.taxi-billet b { display: block; margin-top: 3px; font: 600 clamp(23px, 5.4vw, 30px)/1.1 var(--titre); letter-spacing: -.01em; }
.taxi-billet > div span { display: block; margin-top: 4px; font-size: 15px; overflow-wrap: anywhere; }
.taxi-billet-bon { flex: none; margin-left: auto; padding: 7px 10px; border: 1.5px dashed #111; border-radius: 8px; font: 700 10.5px/1.3 var(--corps); letter-spacing: .12em; text-transform: uppercase; text-align: center; transform: rotate(-5deg); }
.taxi-recap { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.taxi-recap li { display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 14px 16px; border-radius: 16px; background: #1A1A21; border: 1.5px solid #2C2C36; }
.taxi-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--taxi); color: #111; display: grid; place-items: center; }
.taxi-recap li > div { min-width: 0; }
.taxi-recap small { display: block; font: 700 11.5px/1.2 var(--corps); letter-spacing: .12em; text-transform: uppercase; color: #A9A69C; }
.taxi-recap b { display: block; margin-top: 4px; font: 600 16.5px/1.3 var(--corps); color: #fff; overflow-wrap: anywhere; }
.taxi-recap li span:not(.taxi-ico) { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.35; color: #CFCBC0; }
.taxi-apres { display: flex; align-items: center; gap: 14px; margin: 12px 0 0; padding: 12px 16px; border-radius: 16px; border: 1.5px dashed rgba(253, 185, 19, .55); font-size: 15px; line-height: 1.4; color: #F5E7B8; }
.taxi-apres .taxi-ico { width: 38px; height: 38px; background: transparent; color: var(--taxi); border: 1.5px solid var(--taxi); }
/* « Demander un devis » mis en avant (13/10/2026) : un reflet glisse sur le bouton, et une barre jaune monte du bas de l'écran tant que la rubrique est là */
.taxi-brille { position: relative; overflow: hidden; }
.taxi-brille::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -70%; width: 46%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent); transform: skewX(-18deg); animation: taxi-reflet 2s ease-in-out infinite; pointer-events: none; }
@keyframes taxi-reflet { 0%, 60% { left: -70%; } 100% { left: 140%; } }   /* un passage de 0,8 seconde, toutes les 2 secondes */
.taxi-barre { position: fixed; z-index: 58; left: 50%; bottom: 18px; display: flex; align-items: stretch; width: max-content; max-width: min(560px, 100% - 28px); overflow: hidden; border-radius: 18px; background: #FDB913; color: #111; border: 3px solid #111; box-shadow: 0 0 0 3px #FDB913, 0 20px 44px -12px rgba(0, 0, 0, .65); transform: translate(-50%, 190%); visibility: hidden; transition: transform .5s cubic-bezier(.2, .9, .3, 1.12), visibility 0s .5s; }
.taxi-barre.visible { transform: translate(-50%, 0); visibility: visible; transition: transform .5s cubic-bezier(.2, .9, .3, 1.12), visibility 0s; }
.taxi-barre::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-conic-gradient(#111 0% 25%, #FDB913 0% 50%) 0 0 / 12px 12px; }
.taxi-barre a { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px 6px 10px 12px; color: #111; text-decoration: none; }
.taxi-barre .logo-taxi { width: 38px; height: 38px; flex: none; }
.taxi-barre b { font: 700 15px/1.2 var(--corps); }
.taxi-barre i { flex: none; padding: 11px 16px; border-radius: 999px; background: #111; color: #FDB913; font: 700 15px/1 var(--corps); font-style: normal; white-space: nowrap; }
.taxi-barre i.taxi-brille::after { background: linear-gradient(100deg, transparent, rgba(253, 185, 19, .55), transparent); }
.taxi-barre button { flex: none; width: 42px; padding: 6px 0 0; border: 0; background: none; color: #111; font: 400 26px/1 var(--corps); cursor: pointer; }
@media (max-width: 980px) { .taxi-barre { left: 14px; max-width: calc(100% - 230px); transform: translateY(190%); } .taxi-barre.visible { transform: translateY(0); } }
@media (max-width: 640px) { .taxi-barre { left: 12px; right: 74px; bottom: 12px; width: auto; max-width: none; } .taxi-barre b { display: none; } .taxi-barre a { flex: 1; } .taxi-barre i { margin-left: auto; } }
@media (prefers-reduced-motion: reduce) { .taxi-brille::after { display: none; } .taxi-barre, .taxi-barre.visible { transition: none; } }
@media print { .taxi-barre { display: none !important; } }
.taxi-maquette { margin: 16px 0 0; font-size: 13.5px; color: #8E8B82; }
/* l'entrée du menu : une petite plaque jaune, avec son logo et sa bande à damier */
.menu a.lien.taxi-lien, .menu a.lien.taxi-lien:hover, html[data-theme="nuit"] .menu a.lien.taxi-lien, html[data-theme="nuit"] .menu a.lien.taxi-lien:hover { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; background: #FDB913; color: #111; font-weight: 700; padding: 5px 11px 9px 7px; border: 0; border-radius: 8px; white-space: nowrap; }
.menu a.lien.taxi-lien .logo-taxi { width: 20px; height: 20px; flex: none; }
.menu a.lien.taxi-lien::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: repeating-conic-gradient(#111 0% 25%, #FDB913 0% 50%) 0 0 / 8px 8px; }
.menu a.lien.taxi-lien:hover { background: #FFD457; }
.bas .ic.marque .logo-taxi { width: 100%; height: 100%; }
/* une entrée de plus dans le menu : le nom du club reste sur une ligne, et le menu se resserre sur les écrans moyens */
.marque span b { white-space: nowrap; }
.marque { flex: none; }   /* le nom du club garde sa place : c'est le menu qui se resserre, jamais lui qui passe dessous (13/10/2026) */
.haut .conteneur { width: min(1400px, 100% - 48px); }
.menu { gap: 24px; }
@media (max-width: 1480px) { .menu { gap: 18px; } .menu a.lien { font-size: 14.5px; } .marque small { display: none; } }
@media (max-width: 1380px) { .menu { gap: 13px; } .menu a.lien { font-size: 14px; } .menu a.btn { padding-left: 18px; padding-right: 18px; } .jour-nuit button span { display: none; } }
@media (min-width: 981px) and (max-width: 1260px) { .marque span { display: none; } }
@media (max-width: 980px) {
  .taxi .conteneur.taxi-grille { grid-template-columns: 1fr; gap: 34px; padding-top: 52px; padding-bottom: 56px; }
  .taxi-visuel { max-width: 520px; }
  .taxi-ticket b { font-size: clamp(15px, 4.6vw, 22px); }
  .taxi .conteneur.taxi-devis { padding-bottom: 52px; }
  .taxi .conteneur.taxi-tete-page { padding-top: 44px; }
  .menu a.lien.taxi-lien, .menu a.lien.taxi-lien:hover { align-self: flex-start; margin: 14px 0 6px; padding: 9px 14px 13px 9px; font-size: 16px; }
  .marque span b { white-space: normal; }   /* sur téléphone, le nom du club passe sur deux lignes plutôt que d'être coupé (vu par Nicolas le 13/10/2026) */
  .marque { flex: 0 1 auto; min-width: 0; }   /* 15/10/2026 : sous 406 px, « flex: none » empêchait le retour à la ligne et poussait le bouton du menu hors de l'écran */
}
@media (max-width: 640px) { .haut .conteneur { width: calc(100% - 36px); } }   /* 15/10/2026 : 18 px de marge de chaque côté sur téléphone, comme le reste des pages */
@media (max-width: 620px) {
  .taxi-champs { grid-template-columns: minmax(0, 1fr); } #taxi-form { padding: 22px 18px 18px; } .taxi-puces span { padding: 11px 15px; font-size: 15px; }
  /* le ou les jours sur toute la largeur, les deux heures côte à côte */
  .taxi-quand, .taxi-quand.plusieurs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .taxi-ville { grid-template-columns: minmax(0, 112px) minmax(0, 1fr); gap: 12px; }
  .taxi-quand .tx-jour { grid-column: 1 / -1; }
  /* une ligne par jour : le nom du jour au-dessus, les deux heures côte à côte */
  .taxi-ligne-jour { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
  .taxi-ligne-jour > b { grid-column: 1 / -1; padding-top: 8px; }
  .taxi-ligne-jour.tete span:first-child { display: none; }
  /* sur téléphone : les jours sur toute la largeur, les deux heures côte à côte, la durée dessous ; pour chaque jour, son nom et sa durée
     sur une ligne, ses deux heures sur la suivante */
  .taxi-quand .tx-jour, .taxi-quand .taxi-champ.tx-duree-champ { grid-column: 1 / -1; }
  .taxi-quand:not(.plusieurs) .tx-jour { max-width: none; }
  .taxi-quand .taxi-champ:not(.tx-jour):not(.tx-duree-champ) { grid-column: auto; }
  .taxi-ligne-jour.tete { display: none; }
  .taxi-titre { gap: 10px; } .taxi-titre-ico { width: 38px; height: 38px; } .taxi-titre-ico svg { width: 21px; height: 21px; }
  .taxi-ligne-jour > b { grid-column: 1; grid-row: 1; padding-top: 15px; }
  .taxi-ligne-jour > .tx-duree-champ { grid-column: 2; grid-row: 1; }
  .taxi-meme { grid-column: 1 / -1; margin-top: 2px; }
  .tx-heure { gap: 6px; } .tx-heure select, .tx-duree { padding: 0 6px; font-size: 16px; }
  .tx-heure select { padding: 0 2px 0 7px; }   /* 15/10/2026 : à 360 px, la liste des minutes cachait son « 0 » */
  /* 15/10/2026 : une ligne par jour, sur téléphone, n'avait plus d'intitulés (la ligne de titres est cachée) : chaque case reprend le sien */
  .taxi-ligne-jour > .taxi-champ::before { display: block; margin-bottom: 4px; font: 400 13px/1.3 var(--corps); color: #A9A69C; }
  .taxi-ligne-jour > .taxi-champ:nth-of-type(1)::before { content: "Ça commence à"; }
  .taxi-ligne-jour > .taxi-champ:nth-of-type(2)::before { content: "Ça finit à"; }
  .taxi-ligne-jour > .taxi-champ:nth-of-type(3)::before { content: "Ou la durée"; }
  .taxi-propositions li { flex-direction: column; gap: 1px; }
  .taxi-recap { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .taxi-billet { padding: 26px 16px 16px; gap: 13px; } .taxi-billet .logo-taxi { width: 48px; height: 48px; } .taxi-billet-bon { display: none; }
}

/* ---------- la bulle d'histoire du planning (demande de Nicolas, 13/10/2026) : une seconde de souris sur une danse, et son origine s'affiche ---------- */
.planning li.a-histoire, .danses .danse.a-histoire { cursor: help; }
.histoire-danse { position: absolute; z-index: 80; left: 0; top: 0; width: min(330px, calc(100vw - 24px)); padding: 14px 16px 15px; border-radius: 16px; background: #2A2236; color: #fff; box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .14); font: 400 14.5px/1.5 var(--corps); opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; pointer-events: none; }
.histoire-danse.montree { opacity: 1; transform: none; }
.histoire-danse[hidden] { display: none; }
.histoire-danse .tete { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.histoire-danse .drapeaux { display: flex; gap: 5px; flex: none; }
.histoire-danse .drapeaux svg { display: block; width: 33px; height: 22px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }
.histoire-danse b { display: block; font: 600 17px/1.2 var(--titre); color: #fff; }
.histoire-danse small { display: block; margin-top: 2px; font-size: 12.5px; letter-spacing: .02em; color: #F0C98A; }
.histoire-danse p { margin: 0; color: #EDE7F2; }
.histoire-danse::after { content: ""; position: absolute; left: var(--pointe, 40px); width: 14px; height: 14px; margin-left: -7px; background: #2A2236; transform: rotate(45deg); bottom: -6px; }
.histoire-danse.dessous::after { bottom: auto; top: -6px; }
@media (prefers-reduced-motion: reduce) { .histoire-danse { transition: none; } }

/* ---------- le complexe sportif et la mairie vus du ciel, dans la rubrique Contact (demande de Nicolas, 13/10/2026) ---------- */
.vue-ciel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 44px; align-items: center; margin-top: 52px; padding-top: 44px; border-top: 1px solid var(--trait); scroll-margin-top: 104px; }
.vue-ciel [hidden] { display: none !important; }   /* un bouton caché reste caché (les boutons du site sont en « flex ») */
.vue-ciel h3 { margin: 0 0 10px; }
.vue-ciel-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.vue-ciel-onglets button { padding: 8px 15px; border-radius: 999px; border: 1.5px solid var(--trait); background: transparent; color: var(--texte); font: 600 14px/1.2 var(--corps); cursor: pointer; }
.vue-ciel-onglets button[aria-pressed="true"] { background: var(--marque); border-color: var(--marque); color: #fff; }
.vue-ciel-texte p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--texte); }
.vue-ciel-texte p b { color: var(--encre); }
.vue-ciel-texte p.vue-ciel-aller { margin: 22px 0 9px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--doux); }
.vue-ciel-boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.vue-ciel-voir { margin-top: 12px; }
/* les deux itinéraires : un bouton clair, le logo du service devant son nom (« avec le logo », Nicolas, 13/10/2026) */
.vue-ciel-route { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #2A2236; border: 1.5px solid var(--trait); font-weight: 600; text-decoration: none; }
.vue-ciel-route:hover { border-color: var(--marque-texte, var(--marque)); }
.vue-ciel-logo { width: 24px; height: 24px; flex: none; }
.vue-ciel-boutons .btn-contour { background: transparent; border: 1.5px solid var(--marque-texte, var(--marque)); color: var(--marque-texte, var(--marque)); cursor: pointer; font: inherit; font-weight: 600; }
.vue-ciel-boutons .btn-contour:hover { background: var(--marque-clair); }
.vue-ciel-texte p.vue-ciel-note { margin-top: 12px; font-size: 13px; color: var(--doux); }
.vue-ciel-cadre { position: relative; margin: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--ombre); background: var(--fond2); aspect-ratio: 16 / 10; }
.vue-ciel-cadre img, .vue-ciel-cadre iframe { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.vue-ciel-cadre figcaption { position: absolute; right: 10px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(20, 16, 28, .62); color: #fff; font-size: 11.5px; letter-spacing: .02em; }
/* une épingle par lieu : celle du lieu choisi est en couleur, l'autre plus discrète ; on peut aussi la toucher */
.vue-ciel-epingle { position: absolute; transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .82; }
.vue-ciel-epingle b { padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .88); color: #2A2236; font: 600 12.5px/1.2 var(--corps); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6); white-space: nowrap; }
.vue-ciel-epingle i { width: 17px; height: 17px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #8E8B96; border: 3px solid #fff; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .7); }
.vue-ciel-epingle.actif { opacity: 1; z-index: 2; }
.vue-ciel-epingle.actif b { background: #fff; font-size: 13.5px; padding: 6px 12px; }
.vue-ciel-epingle.actif i { width: 22px; height: 22px; background: var(--accent); }
.vue-ciel-epingle:focus-visible b { outline: 3px solid var(--accent); outline-offset: 2px; }
.vue-ciel-cadre.google .vue-ciel-epingle, .vue-ciel-cadre.google figcaption { display: none; }
/* dans « Nous joindre », les lignes « Les cours » et « L'association » mènent à la vue du ciel */
.ligne-contact.ciel-lien { cursor: pointer; }
.ligne-contact.ciel-lien:hover b, .ligne-contact.ciel-lien:focus-visible b { color: var(--accent-fonce); }
.ligne-contact .ciel-voir { display: block; margin-top: 3px; font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--marque-texte, var(--marque)); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .vue-ciel { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; padding-top: 34px; }
  .vue-ciel-cadre { border-radius: 18px; }
  .vue-ciel-epingle b, .vue-ciel-epingle.actif b { font-size: 12px; padding: 4px 9px; }
}

/* ---------- « Et bien, dansez maintenant ! » : l'animation de l'association (demande de Nicolas, 13/10/2026) ---------- */
.bravo { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(104, 48, 84, .97), rgba(30, 18, 36, .98)); animation: bravo-fond .28s ease both; cursor: pointer; }
.bravo.part { animation: bravo-part .3s ease both; }
.bravo-scene { position: relative; display: grid; justify-items: center; gap: 30px; padding: 24px; text-align: center; }
.bravo-halo { position: absolute; left: 50%; top: 116px; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; border: 3px solid #F0C46A; opacity: 0; animation: bravo-halo 1.4s .3s ease-out 2; }
.bravo-logo { position: relative; width: 184px; height: 184px; border-radius: 50%; object-fit: cover; border: 5px solid #fff; background: #fff; box-shadow: 0 26px 60px -18px rgba(0, 0, 0, .85), 0 0 0 10px rgba(240, 196, 106, .28); animation: bravo-logo .85s cubic-bezier(.2, 1.5, .4, 1) both, bravo-danse 1.05s .85s ease-in-out infinite alternate; }
.bravo-notes i { position: absolute; left: 50%; top: 116px; font: 400 32px/1 Georgia, 'Segoe UI Symbol', serif; font-style: normal; color: #F0C46A; opacity: 0; animation: bravo-note 1.7s var(--quand) ease-out both; }
.bravo-phrase { margin: 0; font: 600 clamp(30px, 6.6vw, 62px)/1.12 var(--titre, Georgia, serif); color: #fff; letter-spacing: -.01em; }
.bravo-phrase span { display: inline-block; opacity: 0; animation: bravo-monte .5s .5s ease both; }
.bravo-phrase em { display: inline-block; padding-bottom: 8px; font-style: italic; color: #F0C46A; opacity: 0; background: linear-gradient(#F0C46A, #F0C46A) left bottom / 0 3px no-repeat; animation: bravo-monte .55s .9s cubic-bezier(.2, 1.4, .4, 1) both, bravo-trait .6s 1.45s ease forwards; }
@keyframes bravo-fond { from { opacity: 0; } to { opacity: 1; } }
@keyframes bravo-part { to { opacity: 0; transform: scale(1.04); } }
@keyframes bravo-logo { from { opacity: 0; transform: scale(.25) rotate(-40deg); } to { opacity: 1; transform: none; } }
@keyframes bravo-danse { from { transform: rotate(-7deg); } to { transform: rotate(7deg) translateY(-7px); } }
@keyframes bravo-halo { from { opacity: .9; transform: scale(.9); } to { opacity: 0; transform: scale(2.4); } }
@keyframes bravo-note { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 22% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.25) rotate(var(--tour)); } }
@keyframes bravo-monte { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes bravo-trait { to { background-size: 100% 3px; } }
@media (max-width: 600px) { .bravo-logo { width: 150px; height: 150px; } .bravo-halo, .bravo-notes i { top: 99px; } .bravo-scene { gap: 24px; } }
@media (prefers-reduced-motion: reduce) { .bravo, .bravo * { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } }

/* ---------- retouches du 12/10/2026 au soir ---------- */
/* dans le planning, le nom du professeur mène à sa fiche ; la fiche visée est mise en avant */
.jour .prof a { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.jour .prof a:hover { text-decoration-color: currentColor; }
.prof-carte { scroll-margin-top: 110px; border-radius: 22px; }
.prof-carte:target { animation: prof-vise 2.2s ease 1; }
.prof-carte:target h3 { color: var(--vif); }
@keyframes prof-vise { 0%, 60% { box-shadow: 0 0 0 4px var(--or), 0 0 0 12px color-mix(in srgb, var(--or) 25%, transparent); } 100% { box-shadow: 0 0 0 4px transparent; } }
/* les logos du pied de page */
.bas li a { display: inline-flex; align-items: center; gap: 10px; }
.bas li.avec-ic { display: flex; align-items: flex-start; gap: 10px; }
.bas li.avec-ic .ic { margin-top: 2px; }
.bas .ic { flex: none; width: 20px; height: 20px; display: inline-grid; place-items: center; }
.bas .ic svg { width: 19px; height: 19px; stroke: #E6D3DE; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bas .ic.marque svg { width: 20px; height: 20px; stroke: none; }
.bas li a:hover { text-decoration: none; }
.bas li a:hover span:last-child { text-decoration: underline; }
.bas .fin a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bas .fin a:hover { color: #fff; }
/* le « J » majuscule de la police des titres descend sous la ligne. Pour « Jeudi », on prend le J d'une police très proche, qui reste sur la ligne. */
.j-pose { font-family: 'DM Serif Display', 'Times New Roman', 'Noto Serif', 'Liberation Serif', serif; font-weight: 400; }
.jour header b span.j-pose { font-size: inherit; color: inherit; }   /* sinon la règle de la salle (petit texte gris) s'y applique */
/* le bouton « Nous contacter » ne recouvre pas les liens du bas de page */
.bas .fin { padding-right: 190px; }
@media (max-width: 640px) { .bas .fin { padding-right: 62px; } }
/* la note des tarifs */
.note b { color: var(--encre); font-weight: 600; }
/* les pages de texte : mentions légales, politique de cookies */
.page-texte .titre-page { padding: 48px 0 40px; }
.page-texte section + section { padding: 44px 0 72px; }
.texte-legal { max-width: 800px; }
.texte-legal h2 { font-size: 26px; margin: 34px 0 10px; }
.texte-legal p, .texte-legal li { font-size: 16.5px; line-height: 1.65; }
.texte-legal ul { margin: 0 0 14px; padding-left: 22px; }
.texte-legal li { margin-bottom: 8px; }
.texte-legal a { color: var(--marque-texte); font-weight: 600; text-underline-offset: 3px; }
.texte-legal b { color: var(--encre); }
.texte-legal .maj { margin-top: 30px; font-size: 14.5px; color: var(--doux); }
.a-valider { border: 1px dashed var(--trait); border-radius: 14px; padding: 12px 16px; font-size: 14.5px !important; color: var(--doux); background: var(--carte); }

/* la rubrique « Événements dansants » suit « Notre prochaine soirée » sans double marge */
#evenements { padding-top: 0; }
#evenements .note a { color: var(--marque-texte); font-weight: 600; }
/* le bouton « Nous contacter » reste à portée de main, en bas à droite */
.bulle-contact { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 9px; padding: 13px 18px; border-radius: 999px; background: var(--marque); color: #fff; font: 600 15px/1 var(--corps); text-decoration: none; box-shadow: 0 14px 30px -12px rgba(42, 34, 54, .65); transition: transform .18s ease; }
.bulle-contact:hover { transform: translateY(-3px); }
.bulle-contact svg { width: 19px; height: 19px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) { .bulle-contact { right: 14px; bottom: 14px; padding: 14px; } .bulle-contact span { display: none; } }
@media print { .bulle-contact { display: none !important; } }

/* ===== la page « Nos soirées » (soirees.html, 18/10/2026, maquette A ; voir page_soirees.js) : textes de 18 px et plus, boutons de 52 px et plus ===== */
main.page-soirees { font-size: 19px; line-height: 1.55; }
.page-soirees [hidden] { display: none !important; }
.page-soirees .ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.page-soirees .titre-page { padding: 50px 0 44px; }
.page-soirees .surtitre { font-size: 18px; letter-spacing: .03em; }
.page-soirees .titre-page .chapeau { font-size: 21px; color: var(--encre); max-width: 780px; }
.page-soirees .liste { padding: 44px 0 64px; }
.page-soirees .sommaire { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.page-soirees .sommaire-titre { font-weight: 700; color: var(--encre); margin-right: 4px; }
.page-soirees .sommaire a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 56px; padding: 10px 20px; border-radius: 999px; border: 2px solid var(--marque-texte); background: var(--carte); color: var(--encre); font: 600 18px/1.2 var(--corps); text-decoration: none; }
.page-soirees .sommaire a b { color: var(--marque-texte); }
.page-soirees .sommaire a:hover { background: var(--marque-clair); }
.page-soirees .cartes { display: grid; gap: 56px; }
.page-soirees .carte-soiree { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "visuel tete" "visuel corps"; column-gap: 48px; padding: 34px; border-radius: 32px; background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--ombre); scroll-margin-top: 110px; }
.page-soirees .carte-soiree .tete { grid-area: tete; min-width: 0; }
.page-soirees .carte-soiree .visuel { grid-area: visuel; align-self: start; min-width: 0; }
.page-soirees .carte-soiree .corps { grid-area: corps; min-width: 0; }
.page-soirees .carte-soiree h2 { font-size: 46px; line-height: 1.05; overflow-wrap: break-word; }
.page-soirees .reperes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.page-soirees .reperes:empty { display: none; }
.page-soirees .badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font: 700 18px/1.15 var(--corps); }
.page-soirees .badge-or { background: #FFD98A; color: #2A2236; }
.page-soirees .badge-prune { background: var(--marque-clair); color: var(--marque-texte); }
.page-soirees .recue { display: none; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 16px; border-radius: 14px; background: #FFF1CF; color: #2A2236; font: 700 18px/1.3 var(--corps); }
.page-soirees .recue .ic { stroke: #8A5A00; }
.page-soirees .soiree.envoyee { outline: 4px solid var(--or); outline-offset: 4px; }
.page-soirees .soiree.envoyee .recue { display: flex; }
.page-soirees .date-grande { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; font: 600 30px/1.2 var(--titre); color: var(--encre); }
.page-soirees .date-grande .ic { width: 30px; height: 30px; stroke: var(--vif); }
.page-soirees .dans { margin: 6px 0 0; font: 700 19px/1.3 var(--corps); color: var(--vif); }
.page-soirees .dans:empty { display: none; }
.page-soirees .affiche-btn { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--trait); border-radius: 22px; overflow: hidden; background: var(--fond2); cursor: zoom-in; }
.page-soirees .affiche-btn img { width: 100%; height: auto; }
.page-soirees .loupe { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: rgba(42, 34, 54, .88); color: #fff; font: 600 18px/1 var(--corps); }
.page-soirees .loupe .ic { width: 20px; height: 20px; }
.page-soirees .infos-liste { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.page-soirees .infos-liste li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: center; font-size: 19px; line-height: 1.45; color: var(--encre); }
.page-soirees .infos-liste .rond { width: 46px; height: 46px; border-radius: 50%; background: var(--marque-clair); display: grid; place-items: center; color: var(--marque-texte); }
.page-soirees .prix-boite { margin: 22px 0 24px; padding: 4px 22px; border: 2px solid var(--trait); border-radius: 20px; }
.page-soirees .prix-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--trait); }
.page-soirees .prix-ligne:first-child { border-top: 0; }
.page-soirees .prix-qui { font-weight: 700; font-size: 20px; color: var(--encre); }
.page-soirees .prix-montant { font: 600 34px/1 var(--titre); color: var(--encre); white-space: nowrap; }
.page-soirees .prix-detail { grid-column: 1 / -1; font-size: 18px; color: var(--texte); margin-top: 4px; }
.page-soirees .actions-soiree { display: grid; gap: 12px; }
.page-soirees .btn-gros { min-height: 66px; padding: 16px 30px; font: 700 21px/1.2 var(--corps); gap: 12px; text-align: center; }
.page-soirees .btn-gros .ic { width: 26px; height: 26px; stroke-width: 2.1; }
.page-soirees .btn-moyen { min-height: 56px; padding: 12px 24px; font: 600 19px/1.2 var(--corps); gap: 10px; text-align: center; }
.page-soirees .btn-reserver { background: var(--marque); color: #fff; }
.page-soirees .btn-reserver:hover { background: var(--encre); color: var(--fond); }
.page-soirees .btn-partager { background: var(--carte); color: var(--encre); border: 2px solid var(--encre); }
.page-soirees .btn-partager[aria-expanded="true"] { background: var(--fond2); }
.page-soirees .note-soiree { margin: 14px 0 0; font-size: 18px; line-height: 1.5; color: var(--texte); }
.page-soirees .sans-resa { margin: 0; font-weight: 700; color: var(--encre); }
.page-soirees .partage { margin-top: 16px; padding: 20px 22px 22px; border-radius: 22px; background: var(--fond2); border: 2px solid var(--trait); }
.page-soirees .partage-titre { margin: 0; font: 600 23px/1.2 var(--titre); color: var(--encre); }
.page-soirees .partage-aide { margin: 6px 0 12px; font-size: 18px; color: var(--texte); }
.page-soirees .lien-copie { display: block; width: 100%; min-width: 0; min-height: 52px; margin: 0 0 14px; padding: 14px 16px; border: 2px solid var(--trait); border-radius: 14px; background: var(--carte); color: var(--encre); font: 600 18px/1.3 var(--corps); }
.page-soirees .partage-boutons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.page-soirees .partage-boutons .btn { min-height: 58px; padding: 12px 14px; font: 700 18px/1.2 var(--corps); gap: 9px; }
.page-soirees .btn-copier { background: var(--marque); color: #fff; }
.page-soirees .btn-copier.copie { background: #1F6B45; }
.page-soirees .btn-whatsapp { background: #1F6B45; color: #fff; }
.page-soirees .btn-mail { background: var(--carte); color: var(--encre); border: 2px solid var(--encre); }
.page-soirees .aucune-soiree { margin: 0; padding: 28px; border-radius: 24px; background: var(--carte); border: 1px solid var(--trait); font-size: 21px; color: var(--encre); }
.page-soirees .aucune-soiree a { color: var(--marque-texte); font-weight: 700; }
.page-soirees .amies { background: var(--fond2); padding: 52px 0 60px; }
.page-soirees .amies h2 { font-size: 32px; }
.page-soirees .amies-mot { margin: 10px 0 22px; font-size: 19px; color: var(--texte); max-width: 780px; }
.page-soirees .amies-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.page-soirees .amie { display: flex; gap: 18px; align-items: center; padding: 16px 20px; border-radius: 20px; background: var(--carte); border: 1px solid var(--trait); }
.page-soirees .amie > div { min-width: 0; }
.page-soirees .amie-date { flex: none; width: 104px; padding: 10px 4px; border-radius: 16px; border: 2px solid var(--trait); text-align: center; color: var(--texte); font: 600 18px/1.15 var(--corps); }
.page-soirees .amie-date b { display: block; font: 600 34px/1.05 var(--titre); color: var(--encre); }
.page-soirees .amie-date sup { font-size: 18px; vertical-align: top; position: relative; top: .25em; }
.page-soirees .amie-nom { display: block; font: 600 22px/1.2 var(--titre); color: var(--encre); }
.page-soirees .amie p { margin: 4px 0 0; font-size: 18px; line-height: 1.45; color: var(--texte); overflow-wrap: break-word; }
/* entre la tablette et le petit ordinateur : l'affiche un peu plus étroite */
@media (max-width: 1180px) {
  .page-soirees .carte-soiree { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); column-gap: 34px; padding: 28px; }
  .page-soirees .carte-soiree h2 { font-size: 40px; }
  .page-soirees .date-grande { font-size: 26px; }
}
/* tablette et téléphone : une colonne, le titre, puis l'affiche, puis le reste */
@media (max-width: 900px) {
  .page-soirees .cartes { gap: 36px; }
  .page-soirees .carte-soiree { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "tete" "visuel" "corps"; row-gap: 16px; padding: 18px; border-radius: 24px; scroll-margin-top: 90px; }
  .page-soirees .carte-soiree h2 { font-size: 36px; }
  .page-soirees .date-grande { font-size: 24px; }
  .page-soirees .affiche-btn img { width: auto; max-width: 100%; max-height: 400px; margin: 0 auto; }
  .page-soirees .infos-liste { margin-top: 4px; }
  .page-soirees .prix-boite { margin: 18px 0; padding: 2px 16px; }
  .page-soirees .prix-montant { font-size: 30px; }
}
@media (max-width: 760px) {
  .page-soirees .titre-page { padding: 38px 0 34px; }
  .page-soirees .sommaire a { width: 100%; }
  .page-soirees .btn-gros { padding: 16px 18px; gap: 10px; }
  .page-soirees .btn-gros .ic:first-child { display: none; }
  .page-soirees .amies-grille { grid-template-columns: minmax(0, 1fr); }
  .page-soirees .amie { align-items: flex-start; padding: 14px; gap: 14px; }
  .page-soirees .amie-date { width: 100px; }
  .page-soirees .partage-boutons { grid-template-columns: minmax(0, 1fr); }
  .page-soirees .partage { padding: 16px; }
}

/* ---------- « Ajouter à mon calendrier » (demande de Nicolas, 14/10/2026) : sous le titre du planning, un bouton par cours ---------- */
/* 15/10/2026 : on coche ses cours (ou tout le planning), puis un seul bouton ; sur le site en ligne, un abonnement selon l'appareil */
.calendrier-cours { margin: 0 0 26px; padding: 20px 22px 22px; border-radius: 22px; background: var(--carte); box-shadow: 0 1px 0 var(--trait), var(--ombre); }
.calendrier-cours[hidden], .calendrier-cours [hidden] { display: none; }
.calendrier-cours .calendrier-titre { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--doux); }
.calendrier-cours .calendrier-titre b { display: block; font: 600 20px/1.25 var(--titre); color: var(--encre); margin-bottom: 3px; }
.calendrier-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; }
.calendrier-compte { margin-right: auto; font: 600 14.5px/1.3 var(--corps); color: var(--encre); }
.calendrier-petit { padding: 8px 14px; border: 1.5px solid var(--trait); border-radius: 999px; background: var(--fond); color: var(--marque-texte); font: 600 13.5px/1.2 var(--corps); cursor: pointer; }
.calendrier-petit:hover, .calendrier-petit:focus-visible { border-color: var(--marque); }
.calendrier-jours { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 18px; }
.calendrier-jour h3 { margin: 0 0 8px; font: 600 13px/1.2 var(--corps); letter-spacing: .06em; text-transform: uppercase; color: var(--marque-texte); }
.calendrier-lien { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 10px 12px; border: 1.5px solid var(--trait); border-radius: 14px; background: var(--fond); color: var(--encre); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.calendrier-lien:hover, .calendrier-lien:focus-visible { border-color: var(--marque); }
.calendrier-lien[aria-pressed="true"] { border-color: var(--marque); background: var(--marque-clair); box-shadow: inset 0 0 0 1px var(--marque); }
.calendrier-lien svg { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--marque-texte); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.calendrier-lien span { flex: 1; min-width: 0; }
.calendrier-lien b { display: block; font: 600 15px/1.25 var(--corps); }
.calendrier-lien small { display: block; font-size: 13px; color: var(--doux); }
.calendrier-lien .calendrier-coche { width: 22px; height: 22px; padding: 3px; box-sizing: border-box; border: 1.5px solid var(--trait); border-radius: 50%; background: var(--carte); stroke: transparent; stroke-width: 2.6; }
.calendrier-lien[aria-pressed="true"] .calendrier-coche { border-color: var(--marque); stroke: var(--marque-texte); }
.calendrier-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.calendrier-ajouter, .calendrier-planning { flex: 1 1 240px; min-height: 54px; padding: 14px 20px; border: 1.5px solid var(--marque); border-radius: 16px; font: 700 16.5px/1.2 var(--corps); cursor: pointer; transition: background .15s ease, border-color .15s ease, opacity .15s ease; }
.calendrier-ajouter { background: var(--marque); color: #fff; }
.calendrier-ajouter:hover:not(:disabled) { background: var(--encre); border-color: var(--encre); }
.calendrier-ajouter:disabled { opacity: .45; cursor: not-allowed; }
.calendrier-planning { background: var(--carte); color: var(--marque-texte); font-weight: 600; }
.calendrier-planning:hover { background: var(--marque-clair); }
.calendrier-aide { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--doux); }
.calendrier-etat { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--marque-clair); color: var(--encre); font-size: 14px; line-height: 1.5; }
.calendrier-choix { margin-top: 14px; padding: 16px; border: 1.5px solid var(--trait); border-radius: 16px; background: var(--fond); }
.calendrier-choix p { margin: 0 0 12px; font: 600 15px/1.4 var(--corps); color: var(--encre); }
.calendrier-boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.calendrier-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 180px; min-height: 48px; padding: 12px 16px; border: 1.5px solid var(--trait); border-radius: 12px; background: var(--carte); color: var(--encre); font: 600 15px/1.2 var(--corps); text-decoration: none; }
.calendrier-bouton:hover, .calendrier-bouton:focus-visible { border-color: var(--marque); }
.calendrier-bouton svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--marque-texte); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.calendrier-discret { display: inline-block; margin-top: 10px; padding: 4px 0; border: 0; background: none; color: var(--doux); font: 500 13.5px/1.3 var(--corps); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.calendrier-discret:hover, .calendrier-discret:focus-visible { color: var(--marque-texte); }
.calendrier-note { margin: 16px 0 0; font-size: 13.5px; color: var(--doux); }
@media (max-width: 980px) { .calendrier-jours { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .calendrier-jours { grid-template-columns: 1fr; } .calendrier-cours { padding: 18px 16px 18px; } .calendrier-ajouter, .calendrier-planning { flex-basis: 100%; } }

/* ---------- les trois démarches, séparées des liens d'information (demande de Nicolas, 13/10/2026 ; voir demarches.js) ---------- */
.menu-infos { display: flex; align-items: center; gap: inherit; }
.menu-demarches { display: flex; align-items: center; gap: 10px; padding-left: 20px; border-left: 1px solid var(--trait); }
.demarches-titre { display: none; }
.menu a.demarche, .menu a.lien.demarche, html[data-theme="nuit"] .menu a.lien.demarche { display: inline-flex; align-items: center; gap: 8px; height: 44px; margin: 0; padding: 0 17px 0 13px; border: 0; border-radius: 999px; font-size: 14.5px; font-weight: 600; line-height: 1.1; text-decoration: none; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.menu a.demarche:hover { transform: translateY(-2px); box-shadow: 0 14px 24px -14px rgba(42, 34, 54, .75); }
.menu a.demarche .d-picto { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.menu a.demarche .d-texte { display: inline-flex; flex-direction: column; align-items: flex-start; }
.menu a.demarche .d-texte b { display: inline-block; font-weight: 600; }
.menu a.demarche .d-texte b::first-letter { text-transform: uppercase; }
.menu a.demarche .d-texte b i { font-style: normal; }
.menu a.demarche .d-texte small { display: none; }
/* 1. s'inscrire : la couleur du club */
.menu a.demarche.d-inscription, .menu a.demarche.d-inscription:hover { background: var(--marque); color: #fff; }
/* 2. réserver une soirée : le corail des soirées */
.menu a.lien.demarche.d-soiree, .menu a.lien.demarche.d-soiree:hover, html[data-theme="nuit"] .menu a.lien.demarche.d-soiree, html[data-theme="nuit"] .menu a.lien.demarche.d-soiree:hover { background: linear-gradient(120deg, #B9553A, #DE7A5C); color: #fff; border: 0; }
.menu a.demarche.d-soiree:hover { filter: brightness(1.06); }
.menu a.demarche.d-soiree .point-menu { background: #fff; margin-left: 2px; }
/* 3. taxi danseur : le jaune et le damier, à la même hauteur que les deux autres */
.menu a.lien.taxi-lien.demarche, .menu a.lien.taxi-lien.demarche:hover, html[data-theme="nuit"] .menu a.lien.taxi-lien.demarche, html[data-theme="nuit"] .menu a.lien.taxi-lien.demarche:hover { height: 44px; padding: 0 15px 4px 9px; border-radius: 12px; font-weight: 700; }
.menu a.lien.taxi-lien.demarche .d-texte b { font-weight: 700; }
@media (min-width: 981px) and (max-width: 1400px) { .menu a.demarche.d-soiree .d-texte b i { display: none; } .menu-demarches { gap: 8px; padding-left: 14px; } .menu a.demarche, .menu a.lien.demarche { padding-left: 11px; padding-right: 14px; font-size: 14px; } }
@media (min-width: 981px) and (max-width: 1120px) { .menu a.demarche .d-picto { display: none; } .menu a.demarche, .menu a.lien.demarche { padding-left: 13px; padding-right: 13px; } .menu-demarches { padding-left: 10px; gap: 6px; } }
@media (max-width: 980px) {
  .menu-infos { flex-direction: column; align-items: stretch; gap: 0; }
  .menu-demarches { flex-direction: column; align-items: stretch; gap: 10px; padding: 20px 0 0; border-left: 0; }
  .demarches-titre { display: block; margin: 0 0 2px; font: 700 12px/1 var(--corps, Inter, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--doux); }
  .menu a.demarche, .menu a.lien.demarche, html[data-theme="nuit"] .menu a.lien.demarche, .menu a.lien.taxi-lien.demarche, .menu a.lien.taxi-lien.demarche:hover { height: auto; min-height: 62px; margin: 0; padding: 10px 18px 10px 16px; gap: 14px; border-radius: 18px; font-size: 17px; align-self: stretch; justify-content: flex-start; text-align: left; }
  .menu a.lien.taxi-lien.demarche, .menu a.lien.taxi-lien.demarche:hover { padding-bottom: 14px; }
  .menu a.demarche .d-picto { width: 26px; height: 26px; }
  .menu a.lien.taxi-lien.demarche .logo-taxi { width: 30px; height: 30px; }
  .menu a.demarche .d-texte small { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; opacity: .88; }
  .menu a.demarche .d-texte b i { display: inline; }
}

/* ---------- 18/10/2026 : retouches pour le téléphone (contrôle du 18/10), ajoutées en dernier à style.css ---------- */
@media (max-width: 980px) {
  /* le menu ouvert défile à l'intérieur : sur un petit téléphone (360 x 560), « Taxi danseur » restait hors de l'écran,
     emporté par l'en-tête collant (78 px de haut) */
  .menu.ouvert { max-height: calc(100vh - 78px); max-height: calc(100dvh - 78px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  /* la bulle de contact se cache pendant que le menu est ouvert : elle couvrait ses boutons (son z-index reste au-dessus de l'en-tête) */
  body:has(.menu.ouvert) .bulle-contact { display: none; }
}
@media (max-width: 600px) {
  /* les petits liens et boutons secondaires : une zone à toucher d'au moins 40 px */
  .calendrier-discret, .taxi-fermer { min-height: 44px; padding: 10px 8px; }
  .bas li { padding: 2px 0; }
  .bas li a { min-height: 40px; }
  /* « Ajouter à mon calendrier », « Voir les horaires » : la zone à toucher grandit, le trait doré reste sous le texte */
  .lien-fleche { position: relative; }
  .lien-fleche::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) { .prof-carte img { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, filter .45s ease; will-change: transform; } .prof-carte:hover img { transform: translateY(-10px) rotate(-2deg) scale(1.03); box-shadow: 0 26px 44px -18px rgba(42, 34, 54, .55); filter: saturate(1.12); } .prof-carte:nth-child(even):hover img { transform: translateY(-10px) rotate(2deg) scale(1.03); } }

.menu .nom-court { display: none; }
@media (min-width: 981px) and (max-width: 1700px) { .menu .nom-long { display: none; } .menu .nom-court { display: inline; } .menu a.lien .dehors { display: none; } }
@media (min-width: 981px) and (max-width: 1500px) { .menu { gap: 14px; } .menu a.lien { font-size: 14px; } }
@media (min-width: 981px) and (max-width: 1200px) { .menu { gap: 10px; } }

@media (min-width: 761px) { .contact-grille { align-items: stretch; } .contact-grille > .bloc { height: 100%; box-sizing: border-box; } }
.form-pied { display: flex; align-items: center; gap: 12px; position: relative; }
.info-bulle { position: relative; }
.info-bulle summary { list-style: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--doux); border: 1px solid var(--trait); background: var(--carte); }
.info-bulle summary::-webkit-details-marker { display: none; }
.info-bulle summary:hover, .info-bulle[open] summary { color: var(--accent-fonce); border-color: var(--accent-fonce); }
.info-bulle summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.info-bulle .info-texte { position: absolute; left: 0; bottom: calc(100% + 10px); width: min(360px, 78vw); padding: 14px 16px; border-radius: 16px; background: var(--carte); border: 1px solid var(--trait); box-shadow: var(--ombre); z-index: 5; }
.info-bulle .info-texte .mention { margin: 0 !important; }
.info-bulle .info-texte .mention + .mention { margin-top: 10px !important; }
@media (max-width: 760px) { .info-bulle .info-texte { left: auto; right: 0; } }

.prof { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prof .duree { flex: none; white-space: nowrap; font-size: 11.5px; font-weight: 600; color: var(--doux); background: var(--fond); border: 1px solid var(--trait); border-radius: 999px; padding: 2px 8px; }

#ouvrir-calendrier { display: inline-flex; align-items: center; gap: 8px; }
#ouvrir-calendrier .ic-cal { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }