/* Style commun aux pages publiques de Sonrisa de Baile. */
:root {
  color-scheme: light;
  --fond: #F5F9FA;
  --surface: #FFFFFF;
  --texte: #12242A;
  --attenue: #4A6169;
  --trait: #D6E5E9;
  --turquoise: #0F7186;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  /* Un corps de texte généreux : les pages se lisent de loin, sur un téléphone
     posé sur la table comme sur un écran de bureau. */
  font-size: 1.125rem;
  line-height: 1.7;
}

/* ── Page d'attente : tout centré, le logo comme seul sujet ─────────────── */
.accueil {
  display: grid;
  place-items: center;
  padding: 2.5rem 1.25rem 3rem;
  text-align: center;
}

.accueil main { max-width: 52rem; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.accueil img { width: 760px; max-width: 88vw; height: auto; }
.accueil h1 { margin: 0; font-size: clamp(1.7rem, 6vw, 2.4rem); letter-spacing: -.02em; }
.accueil p { margin: 0; font-size: 1.05rem; color: var(--attenue); }
.accueil .contact { font-size: .9rem; }

.trait {
  width: 64px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #117C92, #00A080, #F7C403, #FF8000, #E00060);
}

/* ── Pages de texte : mentions légales, confidentialité ─────────────────── */
.document {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.document .entete { margin-bottom: 2rem; }
.document .entete img { width: 96px; height: auto; }
.document h1 { margin: 0 0 .3rem; font-size: clamp(1.6rem, 5vw, 2.1rem); letter-spacing: -.02em; }
.document h2 {
  margin: 2.2rem 0 .6rem;
  font-size: 1.15rem;
  color: var(--turquoise);
  border-bottom: 1px solid var(--trait);
  padding-bottom: .35rem;
}
.document h3 { margin: 1.4rem 0 .3rem; font-size: 1rem; }
.document p, .document li { color: var(--texte); }
.document ul { padding-left: 1.2rem; }
.document li { margin-bottom: .35rem; }
.document .maj { color: var(--attenue); font-size: .9rem; margin: 0; }
.document a { color: var(--turquoise); }

.encadre {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--turquoise);
  border-radius: 3px;
  padding: 1rem 1.2rem;
  margin: 1rem 0;
}

.encadre p:last-child { margin-bottom: 0; }

/* ── Pied de page commun ────────────────────────────────────────────────── */
.pied {
  border-top: 1px solid var(--trait);
  margin-top: 3rem;
  padding: 1.2rem 1.25rem 2rem;
  text-align: center;
  font-size: .88rem;
  color: var(--attenue);
}

.pied a { color: var(--attenue); margin: 0 .6rem; }
.pied a:hover { color: var(--turquoise); }

@media (max-width: 560px) {
  .document .entete { flex-direction: column; text-align: center; gap: .6rem; }
}

/* ── Navigation commune aux pages publiques ────────────────────────────── */
.bandeau {
  background: var(--surface);
  border-bottom: 1px solid var(--trait);
}

/* Sept entrées de menu ne tiennent plus dans 56rem à côté du logo : le bandeau
   s'élargit un peu, le contenu des pages garde sa largeur de lecture. */
.bandeau-contenu {
  max-width: 64rem;
  margin: 0 auto;
  padding: .9rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.bandeau img { width: 118px; height: auto; }

/* La devise, en pastille, sous le logo : c'est la phrase que l'association se dit
   à elle-même — elle se porte sur chaque page, pas seulement sur le bulletin.
   Elle se range SOUS le logo plutôt qu'à côté : à côté, elle poussait le menu à
   la ligne et doublait la hauteur du bandeau sur tout le site. */
.marque { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.marque a { line-height: 0; }
.devise {
  margin: 0;
  padding: .3rem .8rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: #fff;
  /* Elle part de la couleur de la rubrique et finit sur le magenta du logo. */
  background: linear-gradient(100deg, var(--teinte, var(--turquoise)), #9D174D);
  box-shadow: 0 2px 8px -4px rgba(21, 94, 117, .45);
  white-space: nowrap;
}
/* Sur téléphone, la devise se place à droite du logo et les deux se centrent :
   le bandeau perd une ligne. La pastille peut se replier sur deux lignes quand
   l'écran est vraiment étroit (320 px), plutôt que de pousser le logo dehors. */
@media (max-width: 560px) {
  .marque { flex-direction: row; justify-content: center; width: 100%; gap: .7rem; }
  .marque a { flex: none; }
  .devise { flex: 0 1 auto; min-width: 0; text-align: center; line-height: 1.25; }
}

/* Le menu, sur deux lignes. Johnny, le 2026-09-21 : « mets-les sur deux
   lignes avec une bulle animée ». Sept entrées d'affilée, cela faisait une
   ligne interminable qui repoussait le logo ; en grille de quatre, elles
   tiennent sur deux rangs bien lisibles.

   La bulle : une pastille qui éclot derrière l'entrée survolée, d'un petit
   rebond, et qui reste posée sous la rubrique où l'on est. Elle vit dans un
   pseudo-élément, donc aucune balise de plus. */
.bandeau nav {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: end;
  align-items: center;
  gap: .35rem .4rem;
  margin-left: auto;
}
.bandeau nav a {
  position: relative;
  z-index: 0;
  color: var(--texte);
  text-decoration: none;
  font-weight: 600;
  font-size: .93rem;
  padding: .42rem .8rem;
  border-radius: 999px;
  text-align: center;
  transition: color .22s ease;
}
.bandeau nav a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teinte) 13%, #fff);
  transform: scale(.55);
  opacity: 0;
  transition: transform .26s cubic-bezier(.2, 1.3, .35, 1), opacity .2s ease;
}
.bandeau nav a:hover::before,
.bandeau nav a:focus-visible::before { transform: scale(1); opacity: 1; }
.bandeau nav a:hover { color: var(--teinte); }
.bandeau nav a[aria-current="page"] { color: #fff; }
.bandeau nav a[aria-current="page"]::before {
  transform: scale(1);
  opacity: 1;
  background: var(--teinte);
}
/* Qui préfère éviter les animations a la pastille, sans le rebond. */
@media (prefers-reduced-motion: reduce) {
  .bandeau nav a, .bandeau nav a::before { transition: none; }
}
@media (max-width: 720px) {
  .bandeau nav { grid-template-columns: repeat(2, 1fr); justify-content: stretch; }
}

/* « Se connecter » est la dernière entrée et ne mène pas au site : elle mène à
   l'espace de l'association. Elle se détache en pastille pour qu'on ne la
   confonde pas avec les rubriques publiques. */
.bandeau nav a.lien-espace {
  padding: .35rem .85rem;
  border-radius: 999px;
  border: 1.5px solid var(--turquoise);
  color: var(--turquoise);
}
.bandeau nav a.lien-espace:hover {
  background: var(--turquoise);
  color: #fff;
}

.contenu { max-width: 58rem; margin: 0 auto; padding: 2.4rem 1.25rem 3.5rem; }
.contenu h1 { font-size: clamp(2.1rem, 6vw, 2.9rem); margin: 0 0 .5rem; letter-spacing: -.02em; }
.contenu .chapeau { font-size: 1.22rem; color: var(--attenue); margin: 0 0 2.2rem; }
.contenu .chapeau-suite { margin: 0 0 1.1rem; color: var(--texte); }

/* Texte justifié : la césure automatique évite les trous entre les mots, que
   le français, avec ses mots longs, creuserait sans elle. */
.contenu > p, .contenu > .chapeau, .contenu > .chapeau-suite {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Partout ailleurs — cartes, listes, encadrés — le texte reste aligné à gauche,
   sans césure : une colonne étroite justifiée découpe les mots et fait des trous. */
.repere p, .encadre p, .addition li, .volet .consigne, .choix, .rythme, .danseur * {
  text-align: left; hyphens: manual;
}
.contenu .seance .detail, .contenu .puces-danses li { text-align: left; hyphens: manual; }
.contenu .chapeau-suite:last-of-type { margin-bottom: 2rem; }

.contenu h2 { font-size: 1.6rem; color: var(--turquoise); margin: 2.8rem 0 .8rem; }

/* ── Planning des cours ─────────────────────────────────────────────────── */
.seance {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  gap: .3rem 1.2rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--turquoise);
  border-radius: 3px;
  padding: .9rem 1.1rem;
  margin-bottom: .7rem;
}

.seance .heure { font-size: 1.25rem; font-weight: 700; color: var(--turquoise); font-variant-numeric: tabular-nums; }
.seance .nom { font-size: 1.1rem; font-weight: 600; }
.seance .detail { grid-column: 2; font-size: .9rem; color: var(--attenue); }
.seance .duree { grid-column: 3; text-align: right; font-size: .9rem; color: var(--attenue); white-space: nowrap; }
.seance .public {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
  background: #EAF3F5; color: var(--turquoise); border-radius: 999px; padding: .2rem .7rem; white-space: nowrap;
}

/* ── Tarifs ─────────────────────────────────────────────────────────────── */
.tarifs { width: 100%; border-collapse: collapse; background: var(--surface); }
.tarifs th, .tarifs td { border: 1px solid var(--trait); padding: .65rem .8rem; text-align: left; }
.tarifs th { background: color-mix(in srgb, var(--teinte, #0F7186) 10%, #fff); font-size: .88rem;
  color: var(--teinte, #0F7186); }
.tarifs td.prix { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tarifs .note-tableau { display: block; font-weight: 400; font-size: .82rem; color: var(--attenue); }

.tarifs caption { text-align: left; font-size: .9rem; color: var(--attenue); padding-bottom: .4rem; }
.tableau-large { overflow-x: auto; }

.cas {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 3px;
  padding: .9rem 1.1rem;
  margin-bottom: .7rem;
}
.cas strong { color: var(--teinte, #0F7186); }
.cas p { margin: .25rem 0 0; font-size: .95rem; color: var(--attenue); }

/* Les danses reprennent les couleurs du logo — rouge, orange, or, turquoise,
   vert, magenta — assombries juste ce qu'il faut pour que le blanc s'y lise. */
.puces-danses {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  padding: 0; margin: 1.2rem auto 1.6rem; list-style: none; max-width: 46rem;
}
.puces-danses li {
  color: #fff; border-radius: 999px; padding: .45rem 1.1rem;
  font-size: .95rem; font-weight: 600; white-space: nowrap;
}
.puces-danses li:nth-child(8n+1) { background: #9B1C1C; }  /* rouge profond */
.puces-danses li:nth-child(8n+2) { background: #C2410C; }  /* orange brûlé */
.puces-danses li:nth-child(8n+3) { background: #A16207; }  /* or */
.puces-danses li:nth-child(8n+4) { background: #0F7186; }  /* turquoise du logo */
.puces-danses li:nth-child(8n+5) { background: #047857; }  /* vert */
.puces-danses li:nth-child(8n+6) { background: #9D174D; }  /* magenta */
.puces-danses li:nth-child(8n+7) { background: #B45309; }  /* ambre */
.puces-danses li:nth-child(8n+8) { background: #155E75; }  /* bleu profond */

.rappel {
  background: #EAF3F5;
  border-radius: 3px;
  padding: 1rem 1.2rem;
  font-size: .93rem;
  margin: 1.4rem 0;
}
.rappel p { margin: 0 0 .85rem; }
.rappel p:last-child { margin-bottom: 0; }
.rappel strong { color: var(--turquoise); }
.rappel .appel { margin-top: 1.2rem; text-align: center; hyphens: manual; }
.rappel .appel a {
  display: inline-block; background: var(--turquoise); color: #fff; text-decoration: none;
  font-weight: 600; padding: .65rem 1.2rem; border-radius: 3px;
}
.rappel .appel a:hover { background: #0B5A6B; }

/* Le même appel, sur la page d'attente. */
.accueil .appel { margin: 1.6rem 0 .8rem; }
.accueil .appel a {
  display: inline-block; background: var(--turquoise); color: #fff; text-decoration: none;
  font-weight: 600; padding: .7rem 1.4rem; border-radius: 3px;
}
.accueil .appel a:hover { background: #0B5A6B; }

/* Un élément masqué le reste, quelle que soit la mise en page qui le porte. */
[hidden] { display: none !important; }

/* --- Les fiches de nos partenaires ---------------------------------------- */
/* Chaque partenaire a sa couleur, prise dans le logo : on le distingue d'un coup
   d'œil, et sa fiche forme un petit monde à lui. */

.fiche {
  --accent: var(--teinte);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 1.4rem;
  margin: 0 0 2.6rem;
  padding-bottom: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(18, 36, 42, .05), 0 8px 24px -14px rgba(18, 36, 42, .35);
  transition: box-shadow .25s ease, transform .25s ease;
}
.fiche:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(18, 36, 42, .06), 0 18px 40px -18px rgba(18, 36, 42, .5);
}
.fiche-cluny     { --accent: #9D174D; }  /* magenta */
.fiche-cotte     { --accent: #C2410C; }  /* orange brûlé */
.fiche-savigny   { --accent: #047857; }  /* vert */
.fiche-perroquet { --accent: #A16207; }  /* or */
.fiche-nox       { --accent: #155E75; }  /* bleu profond */

/* L'en-tête : la couleur de la maison, sa photo quand nous en avons une, et
   toujours son logo contre son nom. */
.fiche .entete {
  grid-column: 1 / -1; grid-row: 1; position: relative;
  background: linear-gradient(120deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 65%, #000) 100%);
}
.fiche .photo-tete { display: block; overflow: hidden; }
.fiche .photo-tete img {
  display: block; width: 100%; height: 330px; object-fit: cover;
  transition: transform .5s ease, filter .3s ease;
}
.fiche .entete-photo:hover .photo-tete img { transform: scale(1.03); }
/* La façade du Nox est une photo carrée : la bande habituelle n'en montrerait
   qu'une tranche. On lui donne de la hauteur pour garder l'enseigne et l'entrée. */
.fiche-nox .photo-tete img { height: 460px; object-position: center 38%; }
/* Le voile qui garantit que le nom reste lisible, quelle que soit la photo. */
.fiche .entete-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 35%,
              color-mix(in srgb, var(--accent) 55%, rgba(0,0,0,.82)) 100%);
}

.fiche .enseigne {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.4rem 1.5rem;
}
.fiche .entete-photo .enseigne {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
}
.fiche .enseigne .logo {
  flex: none; width: 118px; height: 118px; object-fit: contain;
  background: #fff; border-radius: 12px; padding: .5rem;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .55);
  transition: transform .25s ease;
}
.fiche:hover .enseigne .logo { transform: scale(1.04); }
.fiche .enseigne .logo-sombre { background: #12242A; }
.contenu .fiche .enseigne h3 {
  margin: 0; color: #fff; font-size: 2.3rem; line-height: 1.1; letter-spacing: -.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.fiche .corps { grid-column: 1; grid-row: 2; padding: 1.3rem 0 0 1.5rem; min-width: 0; }
.fiche .etiquette {
  margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.fiche .lieu { margin: .3rem 0 0; font-size: .95rem; letter-spacing: .04em; color: var(--attenue); }
.contenu .fiche .presentation { margin: 1rem 0 0; }
.fiche .reseaux { margin: 1.2rem 0 0; }
.fiche .reseaux a {
  display: inline-block; margin: 0 .5rem .5rem 0; padding: .45rem 1.1rem; font-size: .95rem;
  border: 1px solid var(--accent); border-radius: 999px;
  color: var(--accent); font-weight: 600; text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.fiche .reseaux a:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
.contenu .fiche .pratique {
  margin: 1rem 0 0; font-size: .95rem; color: var(--attenue); text-align: left; hyphens: manual;
}
.fiche [data-a-completer] { color: var(--attenue); font-style: italic; }

.fiche .qr {
  grid-column: 2; grid-row: 2; align-self: start; margin: 1.5rem 1.5rem 0 0; width: 124px;
  transition: transform .25s ease;
}
.fiche:hover .qr { transform: scale(1.03); }
.fiche .qr img { display: block; width: 100%; }
.fiche .qr figcaption {
  font-size: .78rem; color: var(--attenue); text-align: center; margin-top: .35rem;
}

@media (max-width: 640px) {
  .fiche { grid-template-columns: 1fr; }
  .fiche .photo-tete img { height: 220px; }
  .fiche .enseigne { padding: 1rem 1.1rem; gap: .8rem; }
  .fiche .enseigne .logo { width: 76px; height: 76px; }
  .contenu .fiche .enseigne h3 { font-size: 1.6rem; }
  .fiche .corps { padding: 1.1rem 1.2rem 0; }
  .fiche .qr { grid-column: 1; grid-row: auto; margin: 1.2rem auto 0; }
}

/* --- La photo agrandie, et les albums -------------------------------------- */

a.agrandir { display: block; position: relative; cursor: zoom-in; }
a.agrandir::after {
  content: "⤢"; position: absolute; right: .7rem; bottom: .7rem;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  background: rgba(18,36,42,.55); color: #fff; border-radius: 50%;
  font-size: .95rem; opacity: 0; transition: opacity .15s;
}
a.agrandir:hover::after, a.agrandir:focus-visible::after { opacity: 1; }

/* L'album : des vignettes carrées, régulières, sous la fiche. */
.album {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: .55rem; margin: 1.1rem 0 0;
}
.album a.agrandir { border-radius: 3px; overflow: hidden; }
.album img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.album a.agrandir::after { right: .35rem; bottom: .35rem; width: 1.6rem; height: 1.6rem; }

.visionneuse {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: rgba(10, 22, 26, .92); padding: 3.5rem 1rem;
}
.visionneuse figure { margin: 0; max-width: 100%; max-height: 100%; }
.visionneuse img {
  display: block; max-width: 100%; max-height: calc(100vh - 8rem);
  border-radius: 3px; background: #000;
}
.visionneuse figcaption {
  color: rgba(255,255,255,.75); font-size: .85rem; text-align: center; margin-top: .6rem;
}
.visionneuse button {
  background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 50%;
  width: 2.8rem; height: 2.8rem; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.visionneuse button:hover { background: rgba(255,255,255,.26); }
.visionneuse button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.visionneuse .fermer { position: absolute; top: 1rem; right: 1rem; font-size: 1.9rem; }

@media (max-width: 640px) {
  .visionneuse { padding: 3.5rem .5rem; }
  .visionneuse .precedente, .visionneuse .suivante {
    position: absolute; bottom: 1rem;
  }
  .visionneuse .precedente { left: 1rem; }
  .visionneuse .suivante { right: 1rem; }
}

/* Le logo du partenaire, posé contre son nom. */
.contenu .fiche h3 { display: flex; align-items: center; gap: 1rem; }
.fiche h3 .logo {
  flex: none; width: 132px; height: 132px; object-fit: contain;
  background: #fff; border: 1px solid var(--trait); border-radius: 10px; padding: .5rem;
}
/* Un logo qui porte déjà son fond n'a que faire d'un cadre blanc : il occupe
   tout le carré, bord à bord. */
.fiche .enseigne .logo-pleine-image,
.fiche h3 .logo-pleine-image { padding: 0; background: none; border-color: transparent; }

/* Un logo blanc a besoin d'un fond sombre pour exister. */
.fiche h3 .logo-sombre { background: #12242A; border-color: #12242A; }

/* L'album en portefeuille : il défile à l'horizontale, flèche à chaque bout. */
.porte-album { position: relative; margin: 1.1rem 0 0; }
.porte-album .album {
  display: flex; grid-template-columns: none; gap: .55rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: .3rem;
  scrollbar-width: thin; scrollbar-color: var(--accent) transparent;
}
.porte-album .album > a { flex: 0 0 148px; scroll-snap-align: start; }
.porte-album .album img { height: 112px; aspect-ratio: auto; }
.porte-album .defiler-gauche, .porte-album .defiler-droite {
  position: absolute; top: 50%; transform: translateY(-60%);
  width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 1.4rem; line-height: 1;
  cursor: pointer; opacity: .9; box-shadow: 0 1px 5px rgba(0,0,0,.25);
}
.porte-album .defiler-gauche { left: -.6rem; }
.porte-album .defiler-droite { right: -.6rem; }
.porte-album button:hover { opacity: 1; }
.porte-album button:focus-visible { outline: 2px solid var(--texte); outline-offset: 2px; }
.contenu .credit { margin: .5rem 0 0; font-size: .76rem; color: var(--attenue); text-align: left; }
.contenu .credit a { color: var(--attenue); }

@media (max-width: 640px) {
  .porte-album .defiler-gauche { left: 0; }
  .porte-album .defiler-droite { right: 0; }
  .fiche h3 .logo { width: 84px; height: 84px; }
  .contenu .fiche h3 { font-size: 1.7rem; gap: .7rem; }
}

/* --- Le simulateur de saison — habillage « Console » ----------------------- */
/* Repris de la maquette validée : toutes les règles sont préfixées « hud- »,
   elles ne peuvent donc pas se heurter au reste du site. Les couleurs viennent
   du logo ; la dominante est le turquoise de la maison. */

/* ==========================================================================
   SONRISA DE BAILE — SIMULATEUR DE COTISATION
   PROPOSITION 2 : « CONSOLE » — VERSION SITE : surface claire (#F5F9FA / #FFF),
   texte #12242A, trait #D6E5E9, turquoise de la maison #0F7186, police Trebuchet MS
   --------------------------------------------------------------------------
   Polices utilisées (100 % système, aucune dépendance externe) :
     · Titres & libellés : "Archivo","Inter",system-ui — graisses 600 et 700
     · Texte courant     : system-ui / Segoe UI / Roboto — graisses 400 et 500
     · Chiffres & codes  : ui-monospace, "SF Mono", Menlo, Consolas — graisse 700
       (tous les montants sont en chasse fixe : ils s'alignent et se lisent d'un coup)
   Aucun framework, aucune bibliothèque. HTML + CSS + JS natif.
   ========================================================================== */

:root{
  /* ---------- Couleurs du logo ---------- */
  --c-or:            #FFC000;
  --c-orange:        #FFA000;
  --c-orange-profond:#FF8000;
  --c-orange-brule:  #E06000;
  --c-rouge:         #FF4020;
  --c-grenat:        #A00000;
  --c-bordeaux:      #800000;
  --c-magenta:       #E00060;
  --c-turquoise:     #00A080;

  /* ---------- Versions assombries ---------- */
  --c-turquoise-fonce:#0F7186;
  --c-vert-fonce:     #047857;
  --c-or-fonce:       #A16207;
  --c-orange-fonce:   #C2410C;
  --c-magenta-fonce:  #9D174D;
  --c-bleu-fonce:     #155E75;

  /* ---------- Rôles : dominante TURQUOISE de la maison (#0F7186), surface claire du site ---------- */
  --fond:         #F5F9FA;                  /* --fond du site */
  --fond-2:       #FFFFFF;                  /* --surface du site */
  --panneau:      #FFFFFF;
  --panneau-haut: #EAF3F5;                  /* teinte claire déjà utilisée par le site */
  --grille:       rgba(15,113,134,.11);
  --bord:         #D6E5E9;                  /* --trait du site */
  --bord-vif:     #0F7186;
  --accent:       #0F7186;                  /* --turquoise du site, 5.6:1 sur blanc */
  --accent-sombre:#0B5A6B;                  /* survol, comme sur le site */
  --accent-2:     var(--c-orange-fonce);    /* heures et sous-totaux : la touche chaude */
  --succes:       var(--c-vert-fonce);
  --alerte:       var(--c-orange-profond);
  --texte:        #12242A;                  /* --texte du site */
  --texte-doux:   #4A6169;                  /* --attenue du site */
  --texte-faible: #557079;
  --sur-accent:   #FFFFFF;

  /* ---------- Typographie ---------- */
  --police-titre:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --police-texte:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --police-chiffres: ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --t-micro: .70rem;
  --t-petit: .81rem;
  --t-base:  .94rem;
  --t-moyen: 1.05rem;
  --t-grand: 1.4rem;
  --t-titre: clamp(1.45rem, 4.2vw, 2.15rem);
  --t-total: clamp(2.4rem, 10vw, 3.6rem);
  --g-normal:400; --g-demi:600; --g-fort:700; --g-gras:700;   /* Trebuchet MS : 400 et 700 */

  /* ---------- Rayons (angles coupés plutôt qu'arrondis) ---------- */
  --r-petit: 4px;
  --r-moyen: 6px;
  --r-grand: 8px;
  --r-pilule: 999px;
  --coupe: 14px;                    /* taille du chanfrein des cartes */

  /* ---------- Ombres ---------- */
  --o-panneau:0 1px 2px rgba(18,36,42,.04), 0 20px 44px -30px rgba(18,36,42,.55);
  --o-lueur:  0 0 0 1px var(--bord-vif), 0 0 22px -8px rgba(15,113,134,.6);
  --o-focus:  0 0 0 2px var(--fond), 0 0 0 5px var(--accent);

  /* ---------- Rythmes d'animation ---------- */
  --t-rapide:.16s; --t-moyen-d:.3s; --t-lent:.6s;
  --courbe:cubic-bezier(.2,.85,.3,1);
  --courbe-net:cubic-bezier(.16,1,.3,1);
}
@keyframes hud-entree{
  from{opacity:0; transform:translate3d(0,14px,0); clip-path:inset(0 0 100% 0);}
  to  {opacity:1; transform:none; clip-path:inset(0 0 0 0);}
}
@keyframes hud-entree-arriere{
  from{opacity:0; transform:translate3d(0,-14px,0); clip-path:inset(100% 0 0 0);}
  to  {opacity:1; transform:none; clip-path:inset(0 0 0 0);}
}
@keyframes hud-module{                  /* arrivée d'une carte, ligne par ligne */
  from{opacity:0; transform:translate3d(-14px,0,0);}
  to  {opacity:1; transform:none;}
}
@keyframes hud-scan{                    /* ligne de scan qui descend sur la carte */
  from{transform:translateY(-100%); opacity:0;}
  30% {opacity:1;}
  to  {transform:translateY(600%); opacity:0;}
}
@keyframes hud-trace-h{ from{transform:scaleX(0);} to{transform:scaleX(1);} }
@keyframes hud-trace-v{ from{transform:scaleY(0);} to{transform:scaleY(1);} }
@keyframes hud-verrou{                  /* segment de progression qui se remplit */
  from{width:0;} to{width:100%;}
}
@keyframes hud-clignote{ 0%,100%{opacity:1;} 50%{opacity:.15;} }
@keyframes hud-flash{                   /* le total encaisse la nouvelle valeur */
  0%  {text-shadow:0 0 0 rgba(255,192,0,0);}
  30% {text-shadow:0 0 24px rgba(255,192,0,.8);}
  100%{text-shadow:0 0 0 rgba(255,192,0,0);}
}
@keyframes hud-grille{                  /* la grille du fond dérive lentement */
  from{background-position:0 0, 0 0;}
  to  {background-position:0 44px, 44px 0;}
}
@keyframes hud-barre{                   /* jauge de chargement au survol */
  from{transform:scaleX(0);} to{transform:scaleX(1);}
}
/* ==========================================================================
   2. SOCLE
   ========================================================================== */
.hud-sim *{box-sizing:border-box;}
.hud-sim{
  position:relative; isolation:isolate; overflow:hidden;
  font-family:var(--police-texte); font-size:var(--t-base); color:var(--texte);
  background:
    linear-gradient(180deg,var(--fond-2),var(--fond) 55%);
  border:1px solid var(--bord); border-radius:var(--r-grand);
  padding:clamp(16px,3.6vw,30px) clamp(14px,3.4vw,28px) 0;
  box-shadow:var(--o-panneau);
}
.hud-sim::before{                        /* grille technique animée */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:
    linear-gradient(var(--grille) 1px, transparent 1px),
    linear-gradient(90deg, var(--grille) 1px, transparent 1px);
  background-size:44px 44px, 44px 44px;
  animation:hud-grille 22s linear infinite;
  -webkit-mask-image:radial-gradient(110% 80% at 50% 0%, #000 20%, transparent 85%);
          mask-image:radial-gradient(110% 80% at 50% 0%, #000 20%, transparent 85%);
  opacity:.9;
}
.hud-sim::after{                         /* liseré chaud du logo, en bas */
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2;
  background:linear-gradient(90deg,#117C92,#00A080,#F7C403,#FF8000,#E00060);   /* le .trait du site */
}
/* ---------- En-tête ---------- */
.hud-entete{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:10px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--bord);
}
.hud-surtitre{
  margin:0 0 6px; font-family:var(--police-chiffres); font-size:var(--t-micro);
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
}
.hud-surtitre::before{content:"▌ ";}
.hud-titre{
  margin:0; font-family:var(--police-titre); font-weight:var(--g-gras);
  font-size:var(--t-titre); line-height:1.12; letter-spacing:-.015em;
}
.hud-devise{
  font-family:var(--police-chiffres); font-size:var(--t-micro); color:var(--texte-faible);
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
}
.hud-devise .hud-curseur{color:var(--accent); animation:hud-clignote 1.5s steps(1) infinite;}
/* ==========================================================================
   3. PROGRESSION — 4 segments
   ========================================================================== */
.hud-fil{list-style:none; margin:0 0 20px; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:6px;}
.hud-fil-bouton{
  position:relative; width:100%; min-height:58px; display:block; text-align:left; cursor:pointer;
  padding:9px 10px 12px; font:inherit; color:var(--texte-faible);
  background:var(--panneau); border:1px solid transparent; border-radius:var(--r-petit);
  transition:color var(--t-rapide) var(--courbe), background var(--t-rapide) var(--courbe);
}
.hud-fil-bouton:hover:not(:disabled){color:var(--texte); background:var(--panneau-haut);}
.hud-fil-bouton:disabled{opacity:.4; cursor:not-allowed;}
.hud-fil-num{
  display:block; font-family:var(--police-chiffres); font-size:var(--t-micro);
  letter-spacing:.14em; margin-bottom:3px;
}
.hud-fil-libelle{display:block; font-size:var(--t-micro); line-height:1.2; font-weight:var(--g-demi);}
.hud-fil-jauge{position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--bord);}
.hud-fil-jauge::after{
  content:""; display:block; height:100%; width:0; background:var(--accent);
}
.hud-fil-bouton[data-fait="oui"] .hud-fil-jauge::after{width:100%; background:var(--c-turquoise);}
.hud-fil-bouton[aria-current="step"]{color:var(--texte); background:var(--panneau-haut); border-color:var(--bord);}
.hud-fil-bouton[aria-current="step"] .hud-fil-num{color:var(--accent);}
.hud-fil-bouton[aria-current="step"] .hud-fil-jauge::after{
  background:linear-gradient(90deg,var(--accent),var(--c-or-fonce));
  animation:hud-verrou 1.1s var(--courbe-net) forwards;
}
/* ==========================================================================
   4. ÉTAPES
   ========================================================================== */
.hud-scene{position:relative; padding-bottom:4px;}
.hud-etape{animation:hud-entree var(--t-moyen-d) var(--courbe-net) both;}
.hud-scene[data-sens="arriere"] .hud-etape{animation-name:hud-entree-arriere;}
.hud-question{
  margin:0 0 6px; font-family:var(--police-titre); font-weight:var(--g-gras);
  font-size:var(--t-grand); letter-spacing:-.01em;
}
.hud-question::before{content:"// "; color:var(--accent); font-family:var(--police-chiffres);}
.hud-aide{margin:0 0 16px; color:var(--texte-doux); font-size:var(--t-petit); max-width:58ch;}
/* ---------- Carte à angle coupé (commune) ---------- */
.hud-carte{
  position:relative; overflow:hidden; background:var(--panneau);
  border:1px solid var(--bord); border-radius:var(--r-moyen);
  clip-path:polygon(0 0, calc(100% - var(--coupe)) 0, 100% var(--coupe), 100% 100%, var(--coupe) 100%, 0 calc(100% - var(--coupe)));
  animation:hud-module var(--t-moyen-d) var(--courbe-net) both;
  animation-delay:calc(var(--i,0) * 70ms);
}
.hud-carte::after{                        /* ligne de scan à l'apparition */
  content:""; position:absolute; left:0; right:0; top:0; height:2px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:hud-scan 1.2s var(--courbe) both;
  animation-delay:calc(var(--i,0) * 70ms + 80ms);
}
/* ==========================================================================
   5. DANSEURS (étape 1)
   ========================================================================== */
.hud-danseurs{display:grid; gap:10px;}
.hud-danseur{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:12px 14px;
  transition:border-color var(--t-rapide) var(--courbe), background var(--t-rapide) var(--courbe);
}
.hud-danseur:hover{border-color:var(--bord-vif); background:var(--panneau-haut);}
.hud-code{
  min-width:52px; padding:7px 8px; text-align:center; border-radius:var(--r-petit);
  font-family:var(--police-chiffres); font-size:var(--t-micro); font-weight:var(--g-gras);
  letter-spacing:.08em; color:var(--sur-accent); background:var(--accent);
}
.hud-danseur[data-type="enfant"] .hud-code{background:var(--c-or-fonce); color:#fff;}
.hud-danseur-corps{min-width:0;}
.hud-etiquette{
  display:block; margin-bottom:5px; font-family:var(--police-chiffres); font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--texte-faible);
}
.hud-champ{
  width:100%; min-height:44px; padding:10px 12px; font:inherit; color:var(--texte);
  background:#fff; border:1px solid var(--bord); border-radius:var(--r-petit);
  transition:border-color var(--t-rapide) var(--courbe), box-shadow var(--t-rapide) var(--courbe);
}
.hud-champ::placeholder{color:var(--texte-faible);}
.hud-champ:hover{border-color:var(--bord-vif);}
.hud-retirer{
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer; font:inherit;
  font-size:var(--t-moyen); color:var(--texte-doux);
  background:transparent; border:1px solid var(--bord); border-radius:var(--r-petit);
  transition:color var(--t-rapide) var(--courbe), border-color var(--t-rapide) var(--courbe),
             background var(--t-rapide) var(--courbe);
}
.hud-retirer:hover:not(:disabled){color:#fff; background:var(--c-grenat); border-color:var(--c-rouge);}
.hud-retirer:disabled{opacity:.3; cursor:not-allowed;}
.hud-ajouts{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px;}
.hud-ajout{
  position:relative; overflow:hidden; min-height:52px; cursor:pointer; font:inherit;
  font-family:var(--police-titre); font-weight:var(--g-fort); color:var(--accent);
  background:transparent; border:1px solid var(--bord-vif); border-radius:var(--r-petit);
  transition:color var(--t-rapide) var(--courbe), background var(--t-rapide) var(--courbe);
}
.hud-ajout::before{                       /* jauge qui se remplit au survol */
  content:""; position:absolute; inset:0; transform-origin:left; transform:scaleX(0);
  background:rgba(15,113,134,.12);
}
.hud-ajout:hover::before{animation:hud-barre var(--t-moyen-d) var(--courbe-net) forwards;}
.hud-ajout:hover{color:var(--accent-sombre);}
.hud-ajout:active{transform:translateY(1px);}
.hud-ajout span{position:relative;}
/* ==========================================================================
   6. CHOIX DE COURS (étape 2) — modules avec interrupteur
   ========================================================================== */
.hud-bloc-personne{margin-bottom:14px; padding:14px;}
.hud-bloc-titre{
  display:flex; align-items:center; gap:10px; margin:0 0 12px; padding-bottom:10px;
  border-bottom:1px dashed var(--bord);
  font-family:var(--police-titre); font-weight:var(--g-gras); font-size:var(--t-moyen);
}
.hud-liste-cours{display:grid; gap:8px;}
.hud-choix-cours{
  position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  min-height:64px; padding:10px 14px; cursor:pointer;
  background:#fff; border:1px solid var(--bord); border-radius:var(--r-petit);
  border-left:3px solid var(--bord);
  transition:border-color var(--t-rapide) var(--courbe), background var(--t-rapide) var(--courbe),
             transform var(--t-rapide) var(--courbe);
}
.hud-choix-cours:hover{background:var(--panneau-haut); transform:translateX(3px);}
.hud-choix-cours:active{transform:translateX(1px) scale(.995);}
.hud-choix-cours.est-coche{
  background:linear-gradient(90deg, rgba(15,113,134,.10), rgba(15,113,134,.02));
  border-color:var(--bord); border-left-color:var(--accent);
}
.hud-choix-cours.est-coche::after{        /* trait qui se trace sous le module */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,var(--accent),var(--c-or-fonce));
  transform-origin:left; animation:hud-trace-h .4s var(--courbe-net) both;
}
.hud-choix-cours input{position:absolute; opacity:0; width:1px; height:1px;}
.hud-inter{                                /* interrupteur 48×28 */
  position:relative; width:48px; height:28px; flex:none; border-radius:var(--r-pilule);
  background:var(--bord); border:1px solid var(--bord);
  transition:background var(--t-moyen-d) var(--courbe), border-color var(--t-rapide) var(--courbe);
}
.hud-inter::before{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(18,36,42,.35);
  transition:transform var(--t-moyen-d) var(--courbe-net), background var(--t-moyen-d) var(--courbe);
}
.hud-choix-cours.est-coche .hud-inter{background:var(--accent); border-color:var(--accent);}
.hud-choix-cours.est-coche .hud-inter::before{transform:translateX(20px); background:#fff;}
.hud-cours-nom{font-family:var(--police-titre); font-weight:var(--g-fort); font-size:var(--t-moyen);}
.hud-cours-detail{display:block; margin-top:2px; color:var(--texte-doux); font-size:var(--t-petit);}
.hud-cours-heure{
  font-family:var(--police-chiffres); font-weight:var(--g-gras); font-size:var(--t-moyen);
  color:var(--accent-2); white-space:nowrap;
}
/* ==========================================================================
   7. SÉLECTEUR DE RYTHME (étape 3) — commutateur segmenté
   ========================================================================== */
.hud-selecteur-rythme{display:grid; gap:8px; grid-template-columns:1fr;}
@media (min-width:700px){
 .hud-selecteur-rythme{grid-template-columns:repeat(2,1fr);}
}
.hud-rythme{
  position:relative; min-height:72px; padding:12px 14px 12px 40px; cursor:pointer;
  background:#fff; border:1px solid var(--bord); border-radius:var(--r-petit);
  transition:background var(--t-rapide) var(--courbe), border-color var(--t-rapide) var(--courbe),
             transform var(--t-rapide) var(--courbe);
}
.hud-rythme:hover{background:var(--panneau-haut); transform:translateY(-2px);}
.hud-rythme::before{                       /* marqueur carré */
  content:""; position:absolute; left:14px; top:50%; width:14px; height:14px; margin-top:-7px;
  border:1px solid var(--bord-vif); background:transparent;
  transition:box-shadow var(--t-moyen-d) var(--courbe-net), transform var(--t-moyen-d) var(--courbe-net);
}
.hud-rythme.est-actif{border-color:var(--accent); background:rgba(15,113,134,.10);}
.hud-rythme.est-actif::before{box-shadow:inset 0 0 0 4px var(--accent); transform:rotate(45deg);}
.hud-rythme input{position:absolute; opacity:0; width:1px; height:1px;}
.hud-rythme-nom{display:block; font-family:var(--police-titre); font-weight:var(--g-fort); font-size:var(--t-moyen);}
.hud-rythme-note{display:block; margin-top:3px; color:var(--texte-doux); font-size:var(--t-petit);}
.hud-precision{
  grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:12px 14px; border:1px dashed var(--c-or-fonce); border-radius:var(--r-petit);
  background:rgba(255,192,0,.10);
  animation:hud-module var(--t-moyen-d) var(--courbe-net) both;
}
.hud-precision label{
  font-family:var(--police-chiffres); font-size:var(--t-micro); letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-or-fonce);
}
.hud-select,.hud-nombre{
  min-height:44px; padding:8px 12px; font:inherit; color:var(--texte);
  background:#fff; border:1px solid var(--bord); border-radius:var(--r-petit);
}
.hud-nombre{width:74px; text-align:center; font-family:var(--police-chiffres); font-weight:var(--g-gras);}
.hud-pas{
  width:44px; height:44px; cursor:pointer; font:inherit; font-size:var(--t-moyen); color:var(--accent);
  background:transparent; border:1px solid var(--bord-vif); border-radius:var(--r-petit);
  transition:background var(--t-rapide) var(--courbe), transform var(--t-rapide) var(--courbe);
}
.hud-pas:hover{background:rgba(15,113,134,.14);}
.hud-pas:active{transform:scale(.9);}
/* ==========================================================================
   8. ADDITION & TOTAL (étape 4)
   ========================================================================== */
.hud-addition{display:grid; gap:10px;}
.hud-addition-personne{padding:12px 14px;}
.hud-addition-entete{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-bottom:8px; margin-bottom:6px; border-bottom:1px solid var(--bord);
}
.hud-addition-nom{font-family:var(--police-titre); font-weight:var(--g-gras); font-size:var(--t-moyen);}
.hud-addition-soustotal{
  font-family:var(--police-chiffres); font-weight:var(--g-gras); font-size:var(--t-grand); color:var(--accent-2);
}
.hud-ligne{
  display:grid; grid-template-columns:1fr auto; gap:12px; align-items:baseline; padding:5px 0;
  animation:hud-module var(--t-moyen-d) var(--courbe-net) both;
  animation-delay:calc(var(--i,0) * 80ms + var(--j,0) * 55ms);
}
.hud-ligne-libelle{color:var(--texte-doux); font-size:var(--t-petit); min-width:0;}
.hud-ligne-note{
  display:block; margin-top:2px; font-family:var(--police-chiffres);
  font-size:var(--t-micro); color:var(--texte-faible);
}
.hud-ligne-montant{font-family:var(--police-chiffres); font-weight:var(--g-gras); white-space:nowrap;}
.hud-ligne.est-reduite .hud-ligne-montant{color:var(--succes);}
.hud-total{
  position:relative; overflow:hidden; margin-top:16px; padding:20px 18px;
  background:linear-gradient(160deg,var(--accent),var(--c-bleu-fonce)); border:1px solid var(--accent);
  border-radius:var(--r-moyen);
  clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.hud-total::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,#117C92,#00A080,#F7C403,#FF8000,#E00060);   /* le .trait du site */
  transform-origin:left; animation:hud-trace-h .7s var(--courbe-net) both;
}
.hud-total-libelle{
  font-family:var(--police-chiffres); font-size:var(--t-micro); letter-spacing:.2em;
  text-transform:uppercase; color:#BFE8F0;
}
.hud-total-montant{
  display:block; margin:4px 0 2px; font-family:var(--police-chiffres); font-weight:var(--g-gras);
  font-size:var(--t-total); line-height:1; letter-spacing:-.02em; color:#fff;
  animation:hud-flash .9s var(--courbe) both;
}
.hud-total-mention{display:block; color:#D6EEF3; font-size:var(--t-petit);}
.hud-economie{
  display:flex; align-items:center; gap:10px; margin:14px 0 0; padding:10px 14px;
  background:rgba(255,255,255,.14); border-left:3px solid #FFE08A; border-radius:var(--r-petit);
  color:#fff; font-weight:var(--g-demi); font-size:var(--t-petit);
  animation:hud-module var(--t-moyen-d) var(--courbe-net) both; animation-delay:.3s;
}
.hud-economie strong{font-family:var(--police-chiffres); color:#FFE08A;}
.hud-encouragement{margin:14px 0 0; color:var(--texte-doux); font-size:var(--t-base); line-height:1.55;}
.hud-cta{
  position:relative; overflow:hidden; display:block; width:100%; min-height:58px; margin-top:14px;
  cursor:pointer; font:inherit; font-family:var(--police-titre); font-weight:var(--g-gras);
  font-size:var(--t-moyen); letter-spacing:.02em; color:#fff;
  background:linear-gradient(90deg,var(--accent),var(--c-or-fonce)); border:none; border-radius:var(--r-petit);
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition:transform var(--t-rapide) var(--courbe), filter var(--t-rapide) var(--courbe);
}
.hud-cta::after{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,.28);
  transform-origin:left; transform:scaleX(0);
}
.hud-cta:hover::after{animation:hud-barre var(--t-lent) var(--courbe-net) forwards;}
.hud-cta:hover{transform:translateY(-2px); filter:brightness(1.06);}
.hud-cta:active{transform:translateY(0) scale(.985);}
.hud-cta span{position:relative;}
/* ==========================================================================
   9. NAVIGATION & BANDEAU TOTAL
   ========================================================================== */
.hud-nav{display:flex; gap:10px; margin-top:18px;}
.hud-bouton{
  flex:1; min-height:50px; cursor:pointer; font:inherit; font-weight:var(--g-fort);
  color:var(--texte); background:transparent; border:1px solid var(--bord); border-radius:var(--r-petit);
  transition:background var(--t-rapide) var(--courbe), transform var(--t-rapide) var(--courbe),
             border-color var(--t-rapide) var(--courbe);
}
.hud-bouton:hover:not(:disabled){background:var(--panneau-haut); border-color:var(--bord-vif);}
.hud-bouton:active:not(:disabled){transform:translateY(1px);}
.hud-bouton:disabled{opacity:.4; cursor:not-allowed;}
.hud-bouton--principal{
  flex:2; color:var(--sur-accent); background:var(--accent); border-color:var(--accent);
  font-family:var(--police-titre); font-weight:var(--g-gras);
}
.hud-bouton--principal:hover:not(:disabled){background:var(--accent-sombre); border-color:var(--accent-sombre);}
.hud-barre-total{
  position:sticky; bottom:0; z-index:3; margin:18px -28px 0; padding:12px clamp(14px,3.4vw,28px);
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px;
  background:rgba(245,249,250,.94); border-top:1px solid var(--accent); backdrop-filter:blur(10px);
}
.hud-barre-libelle{
  font-family:var(--police-chiffres); font-size:var(--t-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--texte-faible);
}
.hud-barre-montant{
  font-family:var(--police-chiffres); font-weight:var(--g-gras); font-size:var(--t-grand); color:var(--accent);
}
.hud-barre-info{margin:0; font-size:var(--t-petit); color:var(--texte-doux); text-align:right;}
/* ==========================================================================
   10. ACCESSIBILITÉ
   ========================================================================== */
.hud-sim :focus-visible{outline:none; box-shadow:var(--o-focus);}
.hud-choix-cours:focus-within, .hud-rythme:focus-within{box-shadow:var(--o-focus);}
.hud-invisible{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
@media (prefers-reduced-motion:reduce){

  .hud-sim *, .hud-sim *::before, .hud-sim *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  .hud-sim::before{animation:none !important;}
}
@media (max-width:560px){

  .hud-sim{padding:16px 14px 0;}

  .hud-entete{flex-direction:column; align-items:flex-start;}

  .hud-fil{gap:4px;}

  .hud-fil-bouton{min-height:64px; padding:8px 7px 12px;}

  .hud-fil-libelle{font-size:.64rem;}

  .hud-carte{--coupe:10px;}

  .hud-danseur{grid-template-columns:auto 1fr; grid-template-areas:"code retirer" "corps corps"; row-gap:10px;}

  .hud-code{grid-area:code;}
 .hud-danseur-corps{grid-area:corps;}
 .hud-retirer{grid-area:retirer; justify-self:end;}

  .hud-ajouts{grid-template-columns:1fr;}

  .hud-choix-cours{grid-template-columns:auto 1fr; row-gap:4px; padding:12px;}

  .hud-cours-heure{grid-column:2; justify-self:start; font-size:var(--t-petit);}

  .hud-barre-total{margin-left:-14px; margin-right:-14px;}

  .hud-nav{flex-direction:column-reverse;}
}
/* ==========================================================================
   12. PAGE DE DÉMONSTRATION — gabarit du site sonrisadebaile.fr (supprimable)
   Reprend les variables et le bandeau du site : la section est vue en contexte.
   ========================================================================== */
:root{ --site-fond:#F5F9FA; --site-surface:#FFFFFF; --site-texte:#12242A; --site-attenue:#4A6169;
       --site-trait:#D6E5E9; --site-turquoise:#0F7186; --teinte:#0F7186; }

/* Les repères : ce qu'il faut savoir, en petites cartes. */
.reperes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin: 1.2rem 0 2rem; }
.repere {
  background: #fff; border: 1px solid var(--trait); border-radius: 12px;
  padding: 1.15rem 1.25rem 1.25rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.repere:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--teinte) 40%, #fff);
  box-shadow: 0 14px 30px -24px rgba(18, 36, 42, .55); }
.repere h3 {
  margin: 0 0 .5rem; font-size: 1.05rem; color: var(--texte);
  display: flex; align-items: center; gap: .55rem;
}
/* Une pastille colorée par repère, prise dans le logo : la page cesse d'être
   verte de haut en bas. */
.repere h3::before {
  content: ''; width: .6rem; height: .6rem; border-radius: 50%; flex: none;
  background: var(--puce, var(--teinte));
}
.reperes .repere:nth-child(1) { --puce: #0F7186; }
.reperes .repere:nth-child(2) { --puce: #047857; }
.reperes .repere:nth-child(3) { --puce: #A16207; }
.reperes .repere:nth-child(4) { --puce: #C2410C; }
.reperes .repere:nth-child(5) { --puce: #155E75; }
.reperes .repere:nth-child(6) { --puce: #9D174D; }
.repere p { margin: 0; font-size: .96rem; color: var(--attenue); }

.signature { margin-top: 2.2rem; font-size: 1.25rem; font-weight: 700; color: var(--teinte); text-align: center; }
.signature span { display: block; margin-top: .4rem; font-size: .92rem; font-weight: 400; color: var(--attenue); }

@media (prefers-reduced-motion: reduce) {
  #simulateur *, #simulateur *::before, #simulateur *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

@media (max-width: 560px) {
  #simulateur { padding: 1.1rem; }
  .cartes, .cartes-qui { grid-template-columns: 1fr; }
  .rythmes { grid-template-columns: 1fr; }
  .bouton-ajout { flex: 1 1 100%; }
  .addition .total-montant { font-size: 1.7rem; }
  .jalons { gap: .2rem .6rem; }
  .jalon button span { display: none; }
}

/* --- Une couleur par rubrique --------------------------------------------- */
/* Chaque rubrique du site a sa couleur, prise dans le logo : tous les titres de
   section de la page la portent, et ce que ces sections contiennent s'y accorde.
   On change une ligne ici, la page entière suit. */

:root { --teinte: #0F7186; }
.rubrique-accueil     { --teinte: #0F7186; }  /* turquoise — la couleur de la maison */
.rubrique-cours       { --teinte: #0F7186; }  /* turquoise */
.rubrique-evenements  { --teinte: #C2410C; }  /* orange brûlé — la fête */
.rubrique-tarifs      { --teinte: #047857; }  /* vert */
.rubrique-partenaires { --teinte: #9D174D; }  /* magenta */
.rubrique-profs       { --teinte: #A16207; }  /* or — celles et ceux qui mènent la danse */
.rubrique-rejoindre   { --teinte: #155E75; }  /* bleu profond */
.rubrique-legal       { --teinte: #0F7186; }  /* turquoise */

/* Tout ce qui portait le turquoise en dur suit désormais la rubrique. */
.contenu h2 { color: var(--teinte); }
.contenu .seance { border-left-color: var(--teinte); }
.contenu .seance .heure { color: var(--teinte); }
.contenu .seance .public { color: var(--teinte); background: color-mix(in srgb, var(--teinte) 10%, #fff); }
.contenu .encadre { border-left-color: var(--teinte); }
.contenu .rappel { background: color-mix(in srgb, var(--teinte) 8%, #fff); }
.contenu a { color: var(--teinte); }
.bandeau nav a:hover { color: var(--teinte); }
/* La rubrique où l'on est porte désormais une pastille pleine : son texte
   est blanc, et c'est la pastille qui prend la couleur de la rubrique. */
.bandeau nav a[aria-current="page"]::before { background: var(--teinte); }
.accueil .appel a { background: var(--teinte); }
.accueil .appel a:hover { filter: brightness(.85); background: var(--teinte); }

/* --- Le bulletin d'adhésion — habillage « Aurore » --------------------------
   Tout est préfixé .aur- et les variables vivent sur .aur-form, pas sur :root :
   ce bloc ne peut pas déteindre sur les autres pages, ni elles sur lui.
   -------------------------------------------------------------------------- */
/* ==========================================================================
   SONRISA DE BAILE — BULLETIN D'ADHÉSION EN LIGNE
   Déclinaison « Aurore » sur la rubrique « Nous rejoindre » (bleu profond #155E75)
   --------------------------------------------------------------------------
   Tout est préfixé .aur- et rien n'est global : ce bloc peut vivre au milieu de
   style.css sans toucher aux autres pages. Les variables vivent sur .aur-form,
   pas sur :root, pour la même raison.

   Polices : "Trebuchet MS","Segoe UI",system-ui (titres et texte — graisses 400
   et 700, les seules que Trebuchet fournit) ; ui-monospace pour les chiffres.
   Aucune police chargée, aucune dépendance.
   ========================================================================== */

.aur-form{
  /* ---------- Couleurs du logo, à portée de main ---------- */
  --aur-or:#FFC000;          --aur-orange:#FFA000;      --aur-orange-profond:#FF8000;
  --aur-orange-brule:#E06000; --aur-rouge:#FF4020;      --aur-grenat:#A00000;
  --aur-bordeaux:#800000;    --aur-magenta:#E00060;     --aur-turquoise:#00A080;
  /* déclinaisons sombres : celles qui tiennent le contraste sur fond clair */
  --aur-turquoise-fonce:#0F7186; --aur-vert-fonce:#047857; --aur-or-fonce:#A16207;
  --aur-orange-fonce:#C2410C;    --aur-magenta-fonce:#9D174D; --aur-bleu-fonce:#155E75;

  /* ---------- Neutres du site ---------- */
  --aur-fond:#F5F9FA; --aur-surface:#FFFFFF; --aur-texte:#12242A;
  --aur-attenue:#4A6169; --aur-trait:#D6E5E9;

  /* ---------- Rôles de cette page : le bleu profond de « Nous rejoindre » ---------- */
  --aur-accent:var(--aur-bleu-fonce);           /* 7.3:1 sur blanc */
  --aur-accent-2:var(--aur-magenta-fonce);      /* le second souffle, dans les dégradés */
  --aur-teinte:#E8F1F5;                         /* le bleu à 10 %, pour les fonds cochés */
  --aur-chaud:var(--aur-or-fonce);              /* l'encadré « foyer » : un cadeau, donc chaud */
  --aur-chaud-fond:#FFF6E4;
  --aur-succes:var(--aur-vert-fonce);
  /* Le manque se signale en orange brûlé sur crème : ça se voit, ça ne gronde pas.
     Le rouge est gardé pour rien — un bulletin d'adhésion n'a pas d'urgence. */
  --aur-erreur:var(--aur-orange-fonce);         /* 4.7:1 sur --aur-erreur-fond */
  --aur-erreur-fond:#FFF3EA;
  --aur-placeholder:#557079;                    /* 5.1:1 sur blanc */

  /* ---------- Typographie ---------- */
  --aur-police:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --aur-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --aur-t-micro:.78rem; --aur-t-petit:.88rem; --aur-t-base:1rem; --aur-t-moyen:1.1rem;
  --aur-t-grand:1.45rem; --aur-t-titre:clamp(1.6rem,4.8vw,2.4rem); --aur-t-merci:clamp(1.8rem,7vw,3rem);

  /* ---------- Rayons généreux, ombres colorées : la signature Aurore ---------- */
  --aur-r-petit:12px; --aur-r-moyen:18px; --aur-r-grand:28px; --aur-r-xl:36px; --aur-r-pilule:999px;
  --aur-o-douce:0 1px 2px rgba(18,36,42,.04), 0 2px 8px -4px rgba(21,94,117,.22);
  --aur-o-carte:0 14px 30px -22px rgba(21,94,117,.55);
  --aur-o-relief:0 18px 38px -20px rgba(21,94,117,.7);
  --aur-o-focus:0 0 0 3px var(--aur-surface), 0 0 0 6px var(--aur-accent);

  /* ---------- Rythmes ---------- */
  --aur-t-rapide:.18s; --aur-t-moyen-d:.38s; --aur-t-lent:.8s;
  --aur-courbe:cubic-bezier(.2,.8,.3,1);
  --aur-rebond:cubic-bezier(.34,1.56,.64,1);

  /* ---------- Le bloc lui-même ---------- */
  position:relative; isolation:isolate; overflow:hidden;
  font-family:var(--aur-police); font-size:var(--aur-t-base); line-height:1.55; color:var(--aur-texte);
  background:linear-gradient(180deg,var(--aur-fond),var(--aur-surface));
  border:1px solid var(--aur-trait); border-radius:var(--aur-r-xl);
  padding:clamp(20px,4vw,38px) clamp(16px,3.6vw,32px) clamp(20px,4vw,34px);
  box-shadow:var(--aur-o-carte);
}
/* Descendant de .aur-form uniquement : jamais un * nu. */
.aur-form *{box-sizing:border-box;}

/* ==========================================================================
   1. KEYFRAMES — toutes finissent sur l'état de repos : sans animation, rien ne
      manque, rien n'est invisible.
   ========================================================================== */
@keyframes aur-entree{ from{opacity:0; transform:translate3d(0,26px,0) scale(.97);} to{opacity:1; transform:none;} }
@keyframes aur-entree-arriere{ from{opacity:0; transform:translate3d(0,-26px,0) scale(.97);} to{opacity:1; transform:none;} }
@keyframes aur-gonfler{ 0%{opacity:0; transform:scale(.88) translate3d(0,14px,0);} 60%{opacity:1; transform:scale(1.02);} 100%{opacity:1; transform:none;} }
@keyframes aur-onde{ from{transform:scale(.4); opacity:.55;} to{transform:scale(2.6); opacity:0;} }
@keyframes aur-coche{ from{transform:rotate(-45deg) scale(0);} to{transform:rotate(-45deg) scale(1);} }
@keyframes aur-aurore{
  0%{transform:translate3d(-4%,0,0) scale(1) rotate(0deg);}
  50%{transform:translate3d(6%,-4%,0) scale(1.18) rotate(8deg);}
  100%{transform:translate3d(-4%,0,0) scale(1) rotate(0deg);}
}
@keyframes aur-rideau{ from{clip-path:inset(0 0 100% 0); transform:translate3d(0,12px,0);} to{clip-path:inset(0 0 0 0); transform:none;} }
@keyframes aur-eclat{ from{transform:scale(.85); opacity:.5;} to{transform:scale(1.35); opacity:0;} }
@keyframes aur-flotter{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} }
@keyframes aur-deplier{ from{opacity:0; transform:translate3d(0,-8px,0); max-height:0;} to{opacity:1; transform:none; max-height:600px;} }
/* Le cadre d'erreur : une seule respiration douce, pas un tremblement. */
@keyframes aur-souligner{ 0%{box-shadow:0 0 0 0 rgba(194,65,12,.35);} 100%{box-shadow:0 0 0 10px rgba(194,65,12,0);} }
/* Les confettis du remerciement : ils montent, puis se reposent sur place. */
@keyframes aur-confetti{ from{opacity:0; transform:translate3d(0,40px,0) rotate(0deg);} to{opacity:1; transform:none;} }
@keyframes aur-tourner{ to{transform:rotate(360deg);} }

/* ==========================================================================
   2. VOILES D'AURORE — les couleurs du logo, très diffuses, qui dérivent
   ========================================================================== */
.aur-form::before{
  content:""; position:absolute; inset:-25%; z-index:-1; pointer-events:none; opacity:.5;
  background:
    radial-gradient(30% 24% at 16% 10%, rgba(255,192,0,.6), transparent 70%),
    radial-gradient(28% 22% at 82% 4%,  rgba(21,94,117,.45), transparent 70%),
    radial-gradient(34% 26% at 74% 88%, rgba(224,0,96,.28), transparent 70%),
    radial-gradient(26% 22% at 8% 86%,  rgba(0,160,128,.3), transparent 70%);
  filter:blur(26px);
  animation:aur-aurore 24s ease-in-out infinite;
}

/* ==========================================================================
   3. EN-TÊTE
   ========================================================================== */
.aur-entete{margin-bottom:clamp(18px,3vw,26px);}
.aur-pastille-devise{
  display:inline-block; margin:0 0 12px; padding:7px 15px; border-radius:var(--aur-r-pilule);
  font-size:var(--aur-t-micro); font-weight:700; letter-spacing:.06em; color:#fff;
  background:linear-gradient(100deg,var(--aur-accent),var(--aur-accent-2));
  box-shadow:var(--aur-o-douce);
}
.aur-titre{
  margin:0; font-weight:700; font-size:var(--aur-t-titre); line-height:1.08; letter-spacing:-.025em;
}
.aur-titre-em{
  font-style:normal;
  background:linear-gradient(100deg,var(--aur-accent),var(--aur-accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.aur-chapeau{margin:12px 0 0; color:var(--aur-attenue); font-size:var(--aur-t-base); max-width:62ch;}
.aur-chapeau-fort{color:var(--aur-texte); font-weight:700;}

/* ==========================================================================
   4. FIL DES 3 ÉTAPES + JAUGE — « où j'en suis, combien il en reste »
   ========================================================================== */
.aur-fil{
  list-style:none; margin:0 0 12px; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.aur-fil-bouton{
  width:100%; min-height:62px; display:flex; flex-direction:column; align-items:center; gap:6px;
  justify-content:center; padding:9px 5px; cursor:pointer; text-align:center; font:inherit;
  font-size:var(--aur-t-micro); font-weight:700; color:var(--aur-attenue);
  background:var(--aur-surface); border:1.5px solid var(--aur-trait); border-radius:var(--aur-r-moyen);
  box-shadow:var(--aur-o-douce);
  transition:transform var(--aur-t-rapide) var(--aur-rebond), color var(--aur-t-rapide) var(--aur-courbe),
             border-color var(--aur-t-rapide) var(--aur-courbe), box-shadow var(--aur-t-rapide) var(--aur-courbe);
}
.aur-fil-bouton:hover:not(:disabled){transform:translateY(-3px); border-color:var(--aur-accent); color:var(--aur-texte);}
.aur-fil-bouton:disabled{opacity:.5; cursor:not-allowed; box-shadow:none;}
.aur-fil-bouton[aria-current="step"]{
  color:var(--aur-texte); border-color:transparent; box-shadow:var(--aur-o-relief);
  background:linear-gradient(140deg,#F2F8FB,var(--aur-teinte));
}
.aur-fil-pastille{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--aur-mono); font-weight:700; font-size:var(--aur-t-petit);
  background:var(--aur-fond); color:var(--aur-attenue);
  transition:transform var(--aur-t-moyen-d) var(--aur-rebond), background var(--aur-t-rapide) var(--aur-courbe);
}
.aur-fil-bouton[aria-current="step"] .aur-fil-pastille{
  background:linear-gradient(140deg,var(--aur-accent),var(--aur-accent-2)); color:#fff; transform:scale(1.14);
}
.aur-fil-bouton[data-fait="oui"]:not([aria-current="step"]) .aur-fil-pastille{background:var(--aur-succes); color:#fff;}
.aur-fil-libelle{line-height:1.15;}

.aur-jauge{
  height:8px; border-radius:var(--aur-r-pilule); overflow:hidden; background:var(--aur-trait);
}
.aur-jauge-barre{
  display:block; height:100%; width:0; border-radius:var(--aur-r-pilule);
  background:linear-gradient(90deg,var(--aur-accent),var(--aur-turquoise-fonce));
  transition:width .55s var(--aur-courbe);
}
.aur-jauge-texte{
  margin:8px 0 clamp(18px,3vw,26px); font-size:var(--aur-t-petit); color:var(--aur-attenue);
}
.aur-jauge-texte b{font-family:var(--aur-mono); color:var(--aur-accent);}

/* ==========================================================================
   5. ÉTAPES
   ========================================================================== */
.aur-etape{animation:aur-entree var(--aur-t-moyen-d) var(--aur-courbe) both;}
.aur-etape--arriere{animation-name:aur-entree-arriere;}
.aur-etape[hidden]{display:none;}
.aur-question{
  margin:0 0 6px; font-weight:700; font-size:var(--aur-t-grand); letter-spacing:-.02em; outline:none;
}
.aur-question:focus-visible{box-shadow:none; text-decoration:underline; text-decoration-color:var(--aur-accent);}
.aur-consigne{margin:0 0 18px; color:var(--aur-attenue); font-size:var(--aur-t-petit); max-width:60ch;}
.aur-lien{color:var(--aur-accent); font-weight:700; text-underline-offset:3px;}
.aur-lien:hover{color:var(--aur-accent-2);}

/* Un sous-titre avec sa pastille de couleur : le bloc se repère de loin. */
.aur-sous-titre{
  display:flex; align-items:center; gap:9px; margin:26px 0 12px;
  font-weight:700; font-size:var(--aur-t-moyen);
}
.aur-sous-titre::before{
  content:""; width:10px; height:10px; border-radius:50%; flex:none;
  background:var(--aur-puce,var(--aur-accent));
}
.aur-sous-titre--chaud{--aur-puce:var(--aur-chaud);}
.aur-sous-titre--doux{--aur-puce:var(--aur-turquoise-fonce);}
.aur-sous-titre--leger{--aur-puce:var(--aur-magenta-fonce);}

/* ---------- Le message d'erreur en clair : il dit quoi, le cadre dit où ---------- */
.aur-alerte{
  margin:0 0 16px; padding:14px 16px 14px 48px; position:relative;
  background:var(--aur-erreur-fond); border:2px solid var(--aur-erreur); border-radius:var(--aur-r-moyen);
  color:var(--aur-texte); font-size:var(--aur-t-petit);
  animation:aur-gonfler var(--aur-t-moyen-d) var(--aur-rebond) both;
}
.aur-alerte:empty{display:none;}
.aur-alerte::before{
  content:"→"; position:absolute; left:16px; top:13px; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; background:var(--aur-erreur); color:#fff; font-weight:700; font-size:.8rem;
}
.aur-alerte-titre{margin:0 0 4px; font-weight:700; color:var(--aur-erreur);}
.aur-alerte-liste{margin:0; padding-left:18px;}
.aur-alerte-liste li{margin:2px 0;}
.aur-alerte-lien{color:var(--aur-texte); text-underline-offset:3px; text-decoration-color:var(--aur-erreur);}

/* ==========================================================================
   6. CHAMPS
   ========================================================================== */
.aur-grille{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px;}
.aur-champ{display:block; min-width:0;}
.aur-champ--large{grid-column:1/-1;}
.aur-label{
  display:block; margin:0 0 6px; font-size:var(--aur-t-petit); font-weight:700; color:var(--aur-texte);
}
.aur-requis{color:var(--aur-accent); font-weight:700;}
.aur-facultatif{font-weight:400; color:var(--aur-attenue);}
.aur-saisie{
  display:block; width:100%; min-height:48px; padding:11px 14px; font:inherit; color:var(--aur-texte);
  background:var(--aur-surface); border:2px solid var(--aur-trait); border-radius:var(--aur-r-petit);
  transition:border-color var(--aur-t-rapide) var(--aur-courbe), box-shadow var(--aur-t-rapide) var(--aur-courbe),
             background var(--aur-t-rapide) var(--aur-courbe);
}
.aur-saisie::placeholder{color:var(--aur-placeholder);}
.aur-saisie:hover{border-color:#B7CCD3;}
.aur-saisie:focus{outline:none; border-color:var(--aur-accent); box-shadow:var(--aur-o-focus);}
textarea.aur-saisie{min-height:120px; resize:vertical;}
select.aur-saisie{
  cursor:pointer; padding-right:40px; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23155E75' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px;
}
.aur-aide{margin:6px 0 0; font-size:var(--aur-t-micro); color:var(--aur-attenue); line-height:1.45;}

/* Le cadre du manque : il signale, il ne punit pas. Une seule respiration, puis
   il reste posé, calme, jusqu'à ce que la personne répare. */
.aur-champ.est-faux .aur-saisie{
  border-color:var(--aur-erreur); background:var(--aur-erreur-fond);
  animation:aur-souligner .9s var(--aur-courbe) both;
}
.aur-champ.est-faux .aur-label{color:var(--aur-erreur);}
.aur-champ.est-faux .aur-saisie:focus{box-shadow:var(--aur-o-focus);}

/* ---------- Pilules : civilité, formule ---------- */
.aur-pilules{display:flex; flex-wrap:wrap; gap:8px;}
.aur-pilule{
  position:relative; display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 18px;
  cursor:pointer; font-size:var(--aur-t-petit); font-weight:700; color:var(--aur-texte);
  background:var(--aur-surface); border:2px solid var(--aur-trait); border-radius:var(--aur-r-pilule);
  transition:transform var(--aur-t-rapide) var(--aur-rebond), border-color var(--aur-t-rapide) var(--aur-courbe),
             background var(--aur-t-rapide) var(--aur-courbe), color var(--aur-t-rapide) var(--aur-courbe);
}
.aur-pilule:hover{transform:translateY(-2px); border-color:var(--aur-accent);}
.aur-pilule input{position:absolute; opacity:0; width:1px; height:1px;}
.aur-pilule::before{
  content:""; width:14px; height:14px; border-radius:50%; border:2px solid var(--aur-trait); flex:none;
  transition:box-shadow var(--aur-t-moyen-d) var(--aur-rebond), border-color var(--aur-t-rapide) var(--aur-courbe);
}
.aur-pilule.est-actif{background:var(--aur-accent); border-color:var(--aur-accent); color:#fff;}
.aur-pilule.est-actif::before{border-color:#fff; box-shadow:inset 0 0 0 3px #fff;}
.aur-pilule:focus-within{box-shadow:var(--aur-o-focus);}

/* ---------- Cases : la ligne entière se coche, l'onde part de la marque ---------- */
.aur-cases{display:grid; gap:10px;}
.aur-case{
  position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  min-height:52px; padding:13px 16px; cursor:pointer;
  background:var(--aur-surface); border:2px solid var(--aur-trait); border-radius:var(--aur-r-moyen);
  box-shadow:var(--aur-o-douce); line-height:1.45;
  transition:transform var(--aur-t-rapide) var(--aur-rebond), border-color var(--aur-t-rapide) var(--aur-courbe),
             box-shadow var(--aur-t-rapide) var(--aur-courbe), background var(--aur-t-rapide) var(--aur-courbe);
}
.aur-case:hover{transform:translateY(-2px); border-color:var(--aur-accent);}
.aur-case:active{transform:scale(.99);}
.aur-case input{position:absolute; opacity:0; width:1px; height:1px;}
.aur-marque{
  width:26px; height:26px; margin-top:1px; flex:none; border-radius:9px; display:grid; place-items:center;
  border:2px solid var(--aur-trait); background:var(--aur-surface);
  transition:background var(--aur-t-rapide) var(--aur-courbe), border-color var(--aur-t-rapide) var(--aur-courbe),
             transform var(--aur-t-moyen-d) var(--aur-rebond);
}
.aur-marque::before{
  content:""; width:11px; height:6px; margin-top:-3px;
  border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(-45deg) scale(0);
}
.aur-case-texte{font-size:var(--aur-t-petit); color:var(--aur-texte);}
.aur-case-texte strong{color:var(--aur-accent);}
.aur-case-note{display:block; margin-top:3px; font-size:var(--aur-t-micro); color:var(--aur-attenue);}
.aur-case.est-coche{background:var(--aur-teinte); border-color:var(--aur-accent); box-shadow:var(--aur-o-relief);}
.aur-case.est-coche .aur-marque{background:var(--aur-accent); border-color:var(--aur-accent); transform:scale(1.08);}
.aur-case.est-coche .aur-marque::before{animation:aur-coche var(--aur-t-moyen-d) var(--aur-rebond) forwards;}
.aur-case.est-coche::after{
  content:""; position:absolute; left:16px; top:14px; width:40px; height:40px; margin:-7px 0 0 -7px;
  border-radius:50%; background:rgba(21,94,117,.28); pointer-events:none;
  animation:aur-onde .6s var(--aur-courbe) both;
}
.aur-case:focus-within{box-shadow:var(--aur-o-focus);}
/* Le manque, sur une case : même orange calme que les champs. */
.aur-case.est-faux{border-color:var(--aur-erreur); background:var(--aur-erreur-fond); animation:aur-souligner .9s var(--aur-courbe) both;}
.aur-case.est-faux .aur-marque{border-color:var(--aur-erreur);}
/* Les cases facultatives : plus légères, sans ombre, bord pointillé. */
.aur-case--legere{border-style:dashed; box-shadow:none; background:transparent;}
.aur-case--legere.est-coche{border-style:solid;}

/* ---------- L'encadré « foyer » : un cadeau, donc chaud, donc visible ---------- */
.aur-encadre{
  margin:26px 0 0; padding:16px; border-radius:var(--aur-r-grand);
  background:var(--aur-chaud-fond); border:2px solid #F0D48A;
  animation:aur-gonfler var(--aur-t-moyen-d) var(--aur-rebond) both;
}
.aur-encadre .aur-case{background:rgba(255,255,255,.7); border-color:#E9CB78;}
.aur-encadre .aur-case:hover{border-color:var(--aur-chaud);}
.aur-encadre .aur-case.est-coche{background:#fff; border-color:var(--aur-chaud);}
.aur-encadre .aur-case.est-coche .aur-marque{background:var(--aur-chaud); border-color:var(--aur-chaud);}
.aur-encadre .aur-case.est-coche::after{background:rgba(161,98,7,.28);}
.aur-encadre .aur-case-texte strong{color:var(--aur-chaud);}
.aur-encadre .aur-aide{color:#6B4A1E; margin:10px 2px 0;}

/* ---------- Ce qui apparaît : le champ « foyer », le bloc mineur ---------- */
.aur-depliable{overflow:hidden; animation:aur-deplier var(--aur-t-moyen-d) var(--aur-courbe) both;}
.aur-depliable[hidden]{display:none;}
.aur-bloc-mineur{
  margin:26px 0 0; padding:16px; border-radius:var(--aur-r-grand);
  background:var(--aur-teinte); border:2px dashed var(--aur-accent);
}
.aur-bloc-mineur .aur-sous-titre{margin-top:0;}

/* ==========================================================================
   7. LES DÉCLARATIONS — le moment austère, donc le plus soigné
   ========================================================================== */
.aur-compteur{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px;
  font-size:var(--aur-t-petit); color:var(--aur-attenue);
}
.aur-compteur b{font-family:var(--aur-mono); color:var(--aur-accent);}
.aur-segments{display:grid; grid-template-columns:repeat(6,1fr); gap:4px; flex:1; max-width:220px;}
.aur-segment{height:8px; border-radius:var(--aur-r-pilule); background:var(--aur-trait); transition:background var(--aur-t-moyen-d) var(--aur-courbe), transform var(--aur-t-moyen-d) var(--aur-rebond);}
.aur-segment.est-plein{background:linear-gradient(90deg,var(--aur-accent),var(--aur-turquoise-fonce)); transform:scaleY(1.3);}
.aur-declaration{padding:15px 16px;}
.aur-declaration .aur-case-texte{font-size:var(--aur-t-base);}
.aur-numero{
  display:inline-grid; place-items:center; width:22px; height:22px; margin-right:6px; border-radius:50%;
  font-family:var(--aur-mono); font-size:.72rem; font-weight:700; color:var(--aur-accent);
  background:var(--aur-teinte); vertical-align:-4px;
}
.aur-declaration.est-coche .aur-numero{background:var(--aur-accent); color:#fff;}

/* ==========================================================================
   8. NAVIGATION
   ========================================================================== */
.aur-nav{display:flex; gap:12px; margin-top:26px;}
.aur-bouton{
  flex:1; min-height:52px; cursor:pointer; font:inherit; font-weight:700; color:var(--aur-texte);
  background:var(--aur-surface); border:1.5px solid var(--aur-trait); border-radius:var(--aur-r-grand);
  transition:transform var(--aur-t-rapide) var(--aur-rebond), background var(--aur-t-rapide) var(--aur-courbe);
}
.aur-bouton:hover:not(:disabled){background:var(--aur-teinte); transform:translateY(-2px);}
.aur-bouton:active:not(:disabled){transform:scale(.97);}
.aur-bouton:disabled{opacity:.55; cursor:progress;}
.aur-bouton:focus-visible{outline:none; box-shadow:var(--aur-o-focus);}
.aur-bouton--principal{
  flex:2; color:#fff; border-color:transparent;
  background:linear-gradient(100deg,var(--aur-accent),var(--aur-turquoise-fonce));
  background-size:200% 100%; box-shadow:var(--aur-o-relief);
  transition:background-position var(--aur-t-lent) var(--aur-courbe), transform var(--aur-t-rapide) var(--aur-rebond),
             box-shadow var(--aur-t-rapide) var(--aur-courbe);
}
.aur-bouton--principal:hover:not(:disabled){background-position:100% 50%; background-color:transparent;}
.aur-bouton--envoyer{
  min-height:58px; font-size:var(--aur-t-moyen);
  background:linear-gradient(100deg,var(--aur-accent-2),var(--aur-accent) 55%,var(--aur-turquoise-fonce));
  background-size:200% 100%;
  animation:aur-flotter 3.4s ease-in-out infinite;
}
.aur-bouton--envoyer.est-en-cours{animation:none;}
.aur-sablier{
  display:inline-block; width:16px; height:16px; margin-right:8px; vertical-align:-3px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; animation:aur-tourner .8s linear infinite;
}

/* Le piège à robots : présent dans la page, hors de l'écran, hors du clavier
   (tabindex=-1 et aria-hidden). Pas de display:none — certains robots le
   respectent, et c'est justement eux qu'on veut voir remplir le champ. */
.aur-piege{position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden;}

/* ==========================================================================
   9. LE REMERCIEMENT — la récompense, mise en scène comme un ticket
   ========================================================================== */
.aur-merci[hidden]{display:none;}
.aur-merci{
  position:relative; overflow:hidden; padding:clamp(26px,5vw,44px) clamp(18px,4vw,36px); text-align:center; color:#fff;
  border-radius:var(--aur-r-xl);
  background:linear-gradient(140deg,var(--aur-accent),var(--aur-accent-2) 85%,var(--aur-bordeaux));
  box-shadow:var(--aur-o-relief);
  animation:aur-rideau var(--aur-t-lent) var(--aur-courbe) both;
}
.aur-merci::before{
  content:""; position:absolute; inset:0; border-radius:var(--aur-r-xl); pointer-events:none;
  border:2px solid rgba(255,192,0,.8);
  animation:aur-eclat 1.4s var(--aur-courbe) .3s both;
}
.aur-merci-sur{font-size:var(--aur-t-micro); letter-spacing:.16em; text-transform:uppercase; color:#DCEBF1; font-weight:700;}
.aur-merci-titre{margin:10px 0 0; font-weight:700; font-size:var(--aur-t-merci); line-height:1.1; letter-spacing:-.03em; text-shadow:0 6px 18px rgba(0,0,0,.25);}
.aur-merci-perfo{
  width:100%; height:2px; margin:22px 0;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 7px, transparent 7px 14px);
}
.aur-merci-texte{margin:0 auto; max-width:56ch; font-size:var(--aur-t-base); color:#F1F7FA; line-height:1.6;}
.aur-merci-texte + .aur-merci-texte{margin-top:12px;}
.aur-merci-texte strong{color:#fff;}
.aur-merci-cours{
  display:inline-block; margin:14px 0 0; padding:9px 18px; border-radius:var(--aur-r-pilule);
  background:rgba(255,255,255,.16); color:#fff; font-weight:700; font-size:var(--aur-t-petit);
  animation:aur-gonfler var(--aur-t-moyen-d) var(--aur-rebond) both; animation-delay:.5s;
}
.aur-merci-rdv{
  margin:22px auto 0; padding:14px 18px; max-width:46ch; border-radius:var(--aur-r-moyen);
  background:rgba(255,255,255,.12); font-weight:700; color:#fff;
}
.aur-merci-rdv small{display:block; margin-top:2px; font-weight:400; color:#DCEBF1; font-size:var(--aur-t-petit);}
/* Confettis : huit points aux couleurs du logo qui montent puis se posent. */
.aur-confettis{position:absolute; inset:0; pointer-events:none;}
.aur-confetti{
  position:absolute; width:12px; height:12px; border-radius:3px; opacity:.85;
  animation:aur-confetti 1.1s var(--aur-rebond) both;
  animation-delay:calc(.25s + var(--aur-i,0) * .09s);
}

/* ==========================================================================
   10. ACCESSIBILITÉ & MOUVEMENT RÉDUIT
   ========================================================================== */
.aur-invisible{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.aur-form a:focus-visible, .aur-fil-bouton:focus-visible{outline:none; box-shadow:var(--aur-o-focus);}

@media (prefers-reduced-motion:reduce){
  .aur-form, .aur-form *, .aur-form *::before, .aur-form *::after{
    animation:none !important; transition:none !important;
  }
}

/* ==========================================================================
   11. MOBILE — pensé à 320 px : une colonne, marges de 16 px, rien ne déborde
   ========================================================================== */
@media (max-width:560px){
  .aur-form{padding:20px 16px 20px; border-radius:26px;}
  .aur-grille{grid-template-columns:1fr;}
  .aur-fil{gap:5px;}
  .aur-fil-bouton{min-height:66px; font-size:.7rem; padding:8px 3px; border-radius:16px;}
  .aur-pilule{flex:1 1 auto; justify-content:center;}
  .aur-nav{flex-direction:column-reverse;}
  .aur-segments{max-width:none;}
  .aur-compteur{flex-direction:column; align-items:stretch;}
}


/* --- Nos profs & assistants ------------------------------------------------
   Johnny, le 2026-09-21 : « une fois une fiche publiée, elle apparaît dans
   l'onglet Nos profs & assistants après nos tarifs ». La page reprend le
   gabarit des partenaires, éprouvé : une fiche, sa photo en tête, son texte,
   ses liens et son album. Deux ajouts seulement, les danses.
   La page est écrite par app/scripts/generer-profs-publics.js ; ne pas la
   retoucher à la main, elle serait réécrite au prochain enregistrement. */
.fiche-prof { --accent: #A16207; }

/* La carte d'un professeur, comme dans l'espace : la photo d'un côté sur
   toute la hauteur, le texte de l'autre, et l'on alterne. Johnny, le
   2026-09-21 : « je souhaite que les cartes soient disposées comme sur
   espace.sonrisadebaile.fr ». */
.contenu .carte-prof {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  padding: 0;
}
.contenu .carte-prof .prof-photo {
  position: relative;
  min-height: 260px;
  background: #EEF3F5;
  overflow: hidden;
}
.contenu .carte-prof .prof-photo a,
.contenu .carte-prof .prof-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}
/* Le filet de couleur au bord de la photo, comme chez Jacana. */
.contenu .carte-prof .prof-photo::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  z-index: 1;
  background: linear-gradient(160deg, #155E75, var(--teinte));
}
.contenu .carte-prof .prof-sans-photo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 44px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(160deg, #155E75, var(--teinte));
}
/* Le gabarit des partenaires place son corps en deuxième ligne, sous la
   photo ; ici les deux sont côte à côte, il faut donc défaire ce placement. */
.contenu .carte-prof .prof-photo,
.contenu .carte-prof .corps { grid-column: auto; grid-row: auto; }
.contenu .carte-prof .corps { padding: 26px 28px; }
.contenu .carte-prof .corps h3 {
  margin: 0 0 6px;
  font-size: 1.45rem;
  line-height: 1.15;
}

@media (min-width: 760px) {
  .contenu .carte-prof { grid-template-columns: 320px minmax(0, 1fr); }
  .contenu .carte-prof.inversee { grid-template-columns: minmax(0, 1fr) 320px; }
  .contenu .carte-prof.inversee .prof-photo { order: 2; }
  .contenu .carte-prof.inversee .prof-photo::before { inset: 0 0 0 auto; }
}

.contenu .danses {
  margin: 4px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.contenu .danses .ou {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6B7280;
}
.contenu .danses .danse {
  font-size: .82rem;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 999px;
  color: var(--teinte);
  background: color-mix(in srgb, var(--teinte) 12%, #fff);
}
/* Ce qu'il danse ailleurs se distingue de ce qu'il enseigne chez nous : sans
   cela, un visiteur croirait qu'on donne des cours de kizomba. */
.contenu .danses .danse-ailleurs {
  color: #4B5563;
  background: transparent;
  box-shadow: inset 0 0 0 1px #D1D5DB;
}
.contenu .fiche-prof .presentation p + p { margin-top: .7em; }

/* --- La carte d'aperçu, dans la liste --------------------------------------
   Johnny, le 2026-09-21 : « je souhaite que les cartes des professeurs
   soient présentées comme sur la photo », celle de l'espace. Photo d'un
   côté, de l'autre le nom, un extrait et ses danses. Toute la carte mène à
   sa page. */
.contenu .carte-prof h3 { margin: 0 0 4px; }
.contenu .carte-prof h3 a { color: var(--teinte); text-decoration: none; }
.contenu .carte-prof h3 a:hover { text-decoration: underline; }
/* La photo de la carte ne s'étire pas avec le texte : bornée, calée en
   haut, comme dans l'espace. */
.contenu .carte-prof .prof-photo {
  display: block;
  align-self: start;
  height: clamp(220px, 26vw, 320px);
}
.contenu .carte-prof .extrait { margin: .7rem 0 0; color: #374151; line-height: 1.7; }
.contenu .prof-pied-carte {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 1rem 0 0; font-size: .92rem;
}
.contenu .prof-combien { color: #6B7280; }
.contenu .prof-ouvrir {
  margin-left: auto; font-weight: 700; color: var(--teinte); text-decoration: none;
}
.contenu .prof-ouvrir:hover { text-decoration: underline; }

/* --- La page d'un professeur -----------------------------------------------
   « Une belle photo en avant, avec côté texte. » Le portrait tient la moitié
   gauche sur grand écran, et passe au-dessus quand la place manque. */
.contenu .fil { margin: 0 0 1.4rem; font-size: .95rem; }
.contenu .fil a { color: var(--teinte); text-decoration: none; font-weight: 600; }
.contenu .fil a:hover { text-decoration: underline; }
.contenu .fil-bas { margin: 2rem 0 0; }

.contenu .prof-tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem;
  align-items: center;
  margin: 0 0 2rem;
}
.contenu .prof-portrait {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #EEF3F5;
  aspect-ratio: 4 / 5;
  max-height: 460px;
  box-shadow: 0 2px 4px rgba(18, 36, 42, .06), 0 18px 40px -22px rgba(18, 36, 42, .5);
}
.contenu .prof-portrait a, .contenu .prof-portrait img {
  display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0;
}
.contenu .prof-portrait .prof-sans-photo {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 64px; font-weight: 800; color: #fff;
  background: linear-gradient(160deg, #155E75, var(--teinte));
}
.contenu .prof-presente h1 { margin: 0 0 .3rem; }
.contenu .prof-presente .etiquette { margin: 0 0 .8rem; }
/* Les réseaux en pastilles, comme sur les fiches de partenaires : hors de
   `.fiche`, leur habillage ne s'appliquait pas. */
.contenu .prof-presente .reseaux { margin-top: 1.1rem; }
.contenu .prof-presente .reseaux a {
  display: inline-block; margin: 0 .5rem .5rem 0; padding: .45rem 1.1rem; font-size: .95rem;
  border: 1px solid var(--teinte); border-radius: 999px;
  color: var(--teinte); font-weight: 600; text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.contenu .prof-presente .reseaux a:hover {
  background: var(--teinte); color: #fff; transform: translateY(-1px);
}
.contenu .prof-texte-long { font-size: 1.06rem; line-height: 1.8; }
.contenu .prof-texte-long p + p { margin-top: .9em; }

/* Moins de quatre photos : une simple rangée, rien ne défile. */
.contenu .album-rangee { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1rem 0 0; }

@media (min-width: 820px) {
  .contenu .prof-tete { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
}

/* --- L'album en bandeau ----------------------------------------------------
   Validé par Johnny le 2026-09-21, d'après le composant qu'il a proposé.
   Le HTML tient debout sans JavaScript : c'est une bande qui défile au doigt
   et à la molette, chaque photo restant un lien qui s'ouvre en grand.
   carrousel.js n'ajoute que les flèches et le glisser à la souris. */
.contenu .car-piste {
  display: flex;
  gap: .9rem;
  margin: 1rem 0 0;
  padding: .3rem .1rem 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.contenu .car-piste::-webkit-scrollbar { display: none; }
.contenu .car-piste--tenue { cursor: grabbing; scroll-snap-type: none; }
.contenu .car-piste > * { flex: 0 0 auto; scroll-snap-align: start; }

.contenu .car-carte {
  position: relative;
  display: block;
  width: 228px;
  height: 260px;
  border-radius: 20px;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 1px 2px rgba(18, 36, 42, .06), 0 10px 26px -16px rgba(18, 36, 42, .4);
  transition: transform .25s ease, box-shadow .25s ease;
}
.contenu .car-carte:hover { transform: translateY(-3px); }
.contenu .car-image { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0;
  border-radius: 0; }
.contenu .car-voile {
  position: absolute; inset: auto 0 0 0; height: 62%; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .35) 45%, transparent);
}
.contenu .car-texte { position: absolute; inset: auto 0 0 0; padding: 14px 16px; }
.contenu .car-titre {
  display: block; color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.25;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}

.contenu .car-cadre { position: relative; }
.contenu .car-bord {
  position: absolute; inset: 0 0 0 auto; width: 44px; pointer-events: none;
  background: linear-gradient(to left, var(--surface), transparent);
  transition: opacity .25s ease;
}
.contenu .car-cadre--fini .car-bord { opacity: 0; }

.contenu .car-barre { display: flex; justify-content: center; gap: .8rem; margin-top: .2rem; }
.contenu .car-rond {
  width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 25px; line-height: 1; color: #fff;
  background: linear-gradient(120deg, #155E75, var(--teinte));
  box-shadow: 0 6px 16px -6px rgba(21, 94, 117, .55);
  transition: transform .2s ease, filter .2s ease;
}
.contenu .car-rond:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.contenu .car-rond:disabled { background: #E6EFF2; color: #6B7280; box-shadow: none;
  opacity: .75; cursor: default; }

@media (max-width: 640px) {
  .contenu .car-carte { width: min(72vw, 250px); height: min(72vw, 250px); }
}
@media (min-width: 900px) {
  .contenu .car-carte { width: 260px; height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .contenu .car-carte, .contenu .car-rond, .contenu .car-bord { transition: none; }
}

@media (max-width: 640px) {
  .contenu .danses .ou { flex-basis: 100%; }
}