/* =========================================================
   DANSELEOPART — composants propres au site
   ---------------------------------------------------------
   Chargé APRÈS koatcher.css, dont il reprend les variables.
   Ne contient que ce qui n'existait pas sur muscu.pro : le bandeau de
   coordonnées, les cartes de tranches d'âge, la grille du planning,
   les tarifs, la galerie, le blog et le formulaire de contact.
   ========================================================= */

/* =========================================================
   SOCLE IMAGES — à lire avant de toucher à quoi que ce soit
   ---------------------------------------------------------
   Deux règles qui corrigent la quasi-totalité des défauts d'affichage
   rencontrés, et dont l'absence est difficile à diagnostiquer.

   1. « picture { display: contents } »
      Le <picture> est « inline » par défaut. Une règle comme
      « .dlHero__media img { height: 100% } » se calculait alors sur le
      <picture>, pas sur le conteneur — donc sur rien. En le retirant de la
      mise en page, chaque règle « .conteneur img » agit comme si l'image
      était l'enfant direct du conteneur.

   2. « img { height: auto } »
      Les balises portent des attributs width et height, qui réservent la
      place pendant le chargement et évitent que la page saute. Mais ces
      attributs sont des INDICATIONS DE PRÉSENTATION : ils posent une vraie
      hauteur CSS. En ne fixant que la largeur, on obtenait une image large
      de 544 px et haute de 1067 px — la hauteur du fichier. D'où des visuels
      démesurés et des rognages absurdes. « height: auto » rend la main aux
      règles de rapport d'image.
   ========================================================= */
picture { display: contents; }

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Toute image posée dans un cadre a un rapport FIXE : la place est réservée
   avant même que le fichier arrive, la page ne bouge plus au chargement. */
.dlCadre {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--bpCardSoft);
  border-radius: var(--radius-md);
}
.dlCadre img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Les affiches et les flyers sont des documents : les rogner coupe le texte.
   Elles s'inscrivent DANS le cadre, sur un fond neutre, jamais recadrées. */
.dlCadre--contenu { background: var(--bpGoldSoft); }
.dlCadre--contenu img { object-fit: contain; }

.dlCadre--16-9  { aspect-ratio: 16 / 9; }
.dlCadre--4-3   { aspect-ratio: 4 / 3; }
.dlCadre--3-2   { aspect-ratio: 3 / 2; }
.dlCadre--1-1   { aspect-ratio: 1 / 1; }
.dlCadre--3-4   { aspect-ratio: 3 / 4; }
.dlCadre--16-10 { aspect-ratio: 16 / 10; }

/* ---------- Accessibilité ---------- */
.dlSkip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--bpInk);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  font-weight: 600;
}
.dlSkip:focus { left: 0; }

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--bpAccent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Barre de navigation ----------
   koatcher.css la posait à « top: 36px », sous le bandeau de coordonnées.
   Ce bandeau ayant été retiré, elle reprend le haut de l'écran. */
.ktNav { top: 0; }

/* ---------- Bandeau de coordonnées (retiré) ----------
   Les règles restent : le bandeau peut être remis en décommentant son bloc
   dans landing-header.php, sans avoir à réécrire son habillage. */
.dlTop {
  background: var(--bpInk);
  color: #fff;
  font-size: 13px;
}
.dlTop__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  align-items: center;
  justify-content: center;
}
.dlTop__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.86);
  text-decoration: none;
  transition: color .18s ease;
}
.dlTop__item:hover { color: #fff; }
.dlTop__item svg { width: 15px; height: 15px; flex: none; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 719.98px) {
  .dlTop__wrap { padding: 7px 16px; gap: 4px 16px; font-size: 12px; }
  /* L'e-mail passe à la ligne et fait sauter la barre sur deux rangs pour
     rien : sur téléphone, l'adresse et le téléphone suffisent à agir. */
  .dlTop__item:nth-child(3) { display: none; }
}

/* ---------- Boutons ---------- */
.dlBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.dlBtn:hover { transform: translateY(-1px); }
.dlBtn--plein { background: var(--bpAccent); color: #fff; }
.dlBtn--plein:hover { background: var(--bpAccentDeep); }
.dlBtn--contour { background: transparent; color: currentColor; border-color: currentColor; }
.dlBtn--contour:hover { background: var(--bpAccent); border-color: var(--bpAccent); color: #fff; }
.dlBtn--clair { background: #fff; color: var(--bpInk); }
.dlBtn--clair:hover { background: var(--bpCardSoft); }

/* ---------- Hero ---------- */
.dlHero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--bpInk);
  overflow: hidden;
}
.dlHero__media {
  position: absolute;
  inset: 0;
}
.dlHero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Les visages sont dans le tiers haut sur presque toutes nos photos :
     on cadre là plutôt qu'au centre géométrique. */
  object-position: center 35%;
}
/* Le dégradé n'est pas décoratif : sans lui, le titre en blanc devient
   illisible dès qu'une photo de spectacle a un fond clair en bas. */
.dlHero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21,21,21,.55) 0%, rgba(21,21,21,.15) 35%, rgba(21,21,21,.85) 100%);
}
.dlHero__wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 24px 72px;
  width: 100%;
}
.dlHero__eyebrow {
  display: inline-block;
  background: var(--bpAccent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 7px 15px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.dlHero__titre {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 68px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -.02em;
  max-width: 16ch;
  margin-bottom: 18px;
}
.dlHero__lead {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.5;
  max-width: 56ch;
  color: rgba(255,255,255,.9);
  margin-bottom: 28px;
}
.dlHero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dlHero__meta {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14px;
  color: rgba(255,255,255,.8);
}
.dlHero--compact { min-height: 46vh; }
.dlHero--compact .dlHero__wrap { padding: 110px 24px 52px; }

/* ---------- Hero sur fond rouge ----------
   Variante sans photo : le rouge de la marque occupe toute la bannière. Le
   contraste du texte blanc sur #B9483E est de 4,8:1, au-dessus du seuil AA
   pour du grand texte comme pour du texte courant — ce qu'aucune photo ne
   garantissait, puisque le contraste y dépendait de ce qu'il y avait dessous. */
.dlHero--rouge {
  background: var(--bpAccent);
  min-height: 0;
  display: block;
}
.dlHero--rouge .dlHero__wrap { padding: 152px 24px 96px; }
.dlHero--rouge .dlHero__lead,
.dlHero--rouge .dlHero__meta { color: rgba(255,255,255,.92); }
/* La pastille d'accroche était rouge sur blanc : sur fond rouge, on inverse. */
.dlHero--rouge .dlHero__eyebrow {
  background: rgba(255,255,255,.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,.34);
}
.dlHero--rouge .dlBtn--plein { background: #fff; color: var(--bpAccent); }
.dlHero--rouge .dlBtn--plein:hover { background: var(--bpInk); color: #fff; }
.dlHero--rouge .dlBtn--contour { color: #fff; border-color: rgba(255,255,255,.6); }
.dlHero--rouge .dlBtn--contour:hover { background: #fff; border-color: #fff; color: var(--bpAccent); }
@media (max-width: 719.98px) {
  .dlHero--rouge .dlHero__wrap { padding: 118px 24px 64px; }
}

/* ---------- Sections ---------- */
.dlSection { padding: clamp(56px, 8vw, 96px) 0; }
.dlSection--gris { background: var(--bpCardSoft); }
.dlSection--sombre { background: var(--bpInk); color: #fff; }
.dlSection--sombre .dlSection__lead { color: rgba(255,255,255,.78); }
.dlWrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.dlWrap--etroit { max-width: 780px; }

.dlSection__head { margin-bottom: 44px; max-width: 720px; }
.dlSection__head--centre { margin-left: auto; margin-right: auto; text-align: center; }
.dlSection__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bpAccent);
  margin-bottom: 12px;
}
.dlSection__titre {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 14px;
}
.dlSection__lead { font-size: 17px; line-height: 1.62; color: var(--bpSoft); }

/* ---------- Corps de texte éditorial ---------- */
.dlTexte { font-size: 17px; line-height: 1.72; color: var(--bpInk-2); }
.dlTexte > * + * { margin-top: 1.1em; }
.dlTexte h2 {
  font-family: var(--font-display);
  font-size: clamp(23px, 3vw, 31px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--bpInk);
  margin-top: 2em;
}
.dlTexte h3 {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 23px);
  font-weight: 600;
  color: var(--bpInk);
  margin-top: 1.7em;
}
.dlTexte ul, .dlTexte ol { padding-left: 1.3em; }
.dlTexte li + li { margin-top: .45em; }
.dlTexte a { color: var(--bpAccent); text-underline-offset: 3px; }
.dlTexte img { max-width: 100%; height: auto; border-radius: var(--radius); }
.dlTexte blockquote {
  border-left: 3px solid var(--bpAccent);
  padding-left: 20px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--bpInk);
}

/* ---------- Cartes de tranches d'âge ---------- */
.dlAges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}
.dlAge {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bpInk);
  color: #fff;
  text-decoration: none;
  min-height: 320px;
  isolation: isolate;
}
.dlAge__media { position: absolute; inset: 0; z-index: -1; }
.dlAge__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform .5s ease;
}
.dlAge:hover .dlAge__media img { transform: scale(1.05); }
.dlAge__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,21,21,.15) 0%, rgba(21,21,21,.8) 100%);
}
.dlAge__corps { margin-top: auto; padding: 22px; }
.dlAge__age {
  display: inline-block;
  background: var(--bpAccent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.dlAge__titre { font-family: var(--font-display); font-size: 24px; font-weight: 700; }
.dlAge__sous { font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.82); margin-top: 6px; }
.dlAge__voir {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dlAge__voir::after { content: '→'; transition: transform .2s ease; }
.dlAge:hover .dlAge__voir::after { transform: translateX(4px); }

/* ---------- Grille de cartes génériques ---------- */
.dlCartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.dlCarte {
  background: var(--bpCard);
  border: 1px solid var(--bpLine);
  border-radius: var(--radius-md);
  padding: 26px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
a.dlCarte:hover {
  border-color: var(--bpAccent);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(21,21,21,.07);
}
.dlSection--gris .dlCarte { background: #fff; }
.dlCarte__icone {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--bpAccentBg);
  color: var(--bpAccent);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.dlCarte__icone svg { width: 22px; height: 22px; stroke-linecap: round; stroke-linejoin: round; }
.dlCarte__titre { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.dlCarte__texte { font-size: 15px; line-height: 1.6; color: var(--bpSoft); }

/* ---------- Duo texte + image ---------- */
.dlDuo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.dlDuo--inverse .dlDuo__media { order: -1; }
/* Le média du duo est un cadre à rapport fixe, pas une image libre : sans
   cela, une photo en portrait faisait deux fois la hauteur du texte d'à côté
   et cassait l'alignement de la section. */
.dlDuo__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bpCardSoft);
  aspect-ratio: 4 / 3;
}
.dlDuo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* Une affiche ou un flyer s'affiche en entier : on ne rogne pas un document
   qui porte du texte. Cadre en portrait, image contenue, fond neutre. */
.dlDuo__media--affiche {
  aspect-ratio: 3 / 4;
  background: var(--bpGoldSoft);
  max-width: 420px;
  margin-inline: auto;
}
.dlDuo__media--affiche img { object-fit: contain; object-position: center; }

/* Une photo en portrait reçoit un cadre en portrait : la recadrer en paysage
   lui faisait perdre la moitié de sa surface. Le cadre reste FIXE — c'est
   son rapport qui suit la source, pas sa hauteur qui flotte. */
.dlDuo__media--portrait {
  aspect-ratio: 3 / 4;
  max-width: 460px;
  margin-inline: auto;
}
/* Et une photo très panoramique n'a pas besoin d'un cadre 4/3 : on lui laisse
   sa largeur plutôt que de couper les bords. */
.dlDuo__media--large { aspect-ratio: 16 / 9; }
@media (max-width: 859.98px) {
  .dlDuo { grid-template-columns: 1fr; }
  .dlDuo--inverse .dlDuo__media { order: 0; }
}

/* ---------- Planning ---------- */
.dlPlanning { width: 100%; border-collapse: collapse; font-size: 15px; }
.dlPlanning caption {
  text-align: left;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  padding-bottom: 12px;
}
.dlPlanning th, .dlPlanning td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--bpLine);
}
.dlPlanning thead th {
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bpMuted);
  border-bottom-color: var(--bpLineStrong);
}
.dlPlanning tbody tr:hover { background: var(--bpCardSoft); }
.dlPlanning__horaire { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Un tableau ne se réduit pas sous 520 px sans devenir illisible : on le
   laisse déborder dans son propre conteneur plutôt que d'écraser les
   colonnes ou de faire défiler la page entière de travers. */
.dlTableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Tarifs ---------- */
.dlTarifs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}
.dlTarif {
  background: #fff;
  border: 1px solid var(--bpLine);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
}
.dlTarif--phare { border-color: var(--bpAccent); border-width: 2px; }
.dlTarif__badge {
  align-self: flex-start;
  background: var(--bpAccent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.dlTarif__nom { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.dlTarif__prix {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.03em;
  margin: 10px 0 2px;
}
.dlTarif__unite { font-size: 14px; color: var(--bpMuted); }
.dlTarif__liste { list-style: none; margin: 20px 0 24px; font-size: 15px; line-height: 1.5; }
.dlTarif__liste li { display: flex; gap: 10px; padding: 7px 0; }
.dlTarif__liste li::before { content: '✓'; color: var(--bpAccent); font-weight: 700; flex: none; }
.dlTarif .dlBtn { margin-top: auto; }

/* ---------- Avis ---------- */
.dlAvis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.dlAvis__carte {
  background: #fff;
  border: 1px solid var(--bpLine);
  border-radius: var(--radius-md);
  padding: 26px;
}
.dlSection--gris .dlAvis__carte { background: #fff; }
.dlAvis__etoiles { color: #F5A623; letter-spacing: 2px; margin-bottom: 12px; }
.dlAvis__texte { font-size: 15px; line-height: 1.62; color: var(--bpInk-2); }
.dlAvis__nom { margin-top: 16px; font-size: 14px; font-weight: 600; }
.dlAvis__source { font-size: 13px; color: var(--bpMuted); }
.dlAvis__note {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.dlAvis__note b { font-family: var(--font-display); font-size: 34px; font-weight: 700; }

/* ---------- FAQ ---------- */
.dlFaq { max-width: 820px; margin: 0 auto; }
.dlFaq__item { border-bottom: 1px solid var(--bpLine); }
.dlFaq__q {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--bpInk);
  padding: 22px 44px 22px 0;
  cursor: pointer;
  position: relative;
}
.dlFaq__q::after {
  content: '+';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  color: var(--bpAccent);
  transition: transform .2s ease;
}
.dlFaq__item[open] .dlFaq__q::after { content: '−'; }
.dlFaq__r { padding: 0 0 22px; font-size: 16px; line-height: 1.66; color: var(--bpSoft); }
.dlFaq__item summary::-webkit-details-marker { display: none; }
.dlFaq__item summary { list-style: none; }

/* ---------- Galerie ---------- */
.dlGalerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
/* La grille de galerie tient à des vignettes strictement carrées : c'est ce
   qui donne l'alignement. Le cadre porte le rapport, l'image le remplit. */
.dlGalerie a {
  display: block;
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bpCardSoft);
}
.dlGalerie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transition: transform .35s ease;
}
.dlGalerie a:hover img { transform: scale(1.03); }

/* ---------- Blog ---------- */
.dlArticles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}
.dlArticle {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.dlArticle__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--bpCardSoft);
}
/* 4/3 plutôt que 16/10 : les photos d'articles sont carrées ou en portrait,
   et un cadre plus large leur coupait jusqu'à la moitié de la hauteur. Le
   cadre reste identique pour toutes les cartes — c'est l'uniformité qui fait
   tenir la grille — mais il perd beaucoup moins d'image. */
.dlArticle__media {
  aspect-ratio: 4 / 3;
  position: relative;
}
.dlArticle__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform .4s ease;
}
.dlArticle:hover .dlArticle__media img { transform: scale(1.04); }
.dlArticle__cat {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bpAccent);
  margin-bottom: 8px;
}
.dlArticle__titre {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.28;
  font-weight: 600;
  margin-bottom: 8px;
}
.dlArticle:hover .dlArticle__titre { color: var(--bpAccent); }
.dlArticle__extrait { font-size: 15px; line-height: 1.6; color: var(--bpSoft); }
/* Bannière d'article : un rapport fixe plutôt qu'une hauteur maximale.
   Avec « max-height », une photo en portrait restait haute de 460 px mais
   large de 780 : le rapport variait d'un article à l'autre. */
.dlArticle__hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--radius-lg);
  background: var(--bpCardSoft);
}

/* ---------- Formulaire ---------- */
.dlForm { display: grid; gap: 18px; }
.dlForm__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 639.98px) { .dlForm__ligne { grid-template-columns: 1fr; } }
.dlForm label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.dlForm input, .dlForm select, .dlForm textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;                       /* < 16px déclenche un zoom sur iOS */
  color: var(--bpInk);
  background: #fff;
  border: 1px solid var(--bpLine-2);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.dlForm input:focus, .dlForm select:focus, .dlForm textarea:focus {
  outline: none;
  border-color: var(--bpAccent);
  box-shadow: 0 0 0 3px var(--bpAccentBg);
}
.dlForm textarea { min-height: 150px; resize: vertical; }
.dlForm__aide { font-size: 13px; color: var(--bpMuted); }
.dlForm__msg { padding: 14px 16px; border-radius: 12px; font-size: 15px; }
.dlForm__msg--ok { background: #E9F5EC; color: #1E6B34; }
.dlForm__msg--ko { background: var(--bpRedSoft); color: var(--bpAccentDeep); }
/* Champ piège anti-robot : invisible pour l'œil, lisible pour un script.
   Un formulaire rempli avec ce champ est jeté sans envoyer d'e-mail. */
.dlPot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- Infos pratiques / contact ---------- */
.dlInfos { display: grid; gap: 18px; }
.dlInfo { display: flex; gap: 14px; align-items: flex-start; }
.dlInfo__icone {
  width: 40px; height: 40px; flex: none;
  border-radius: 11px;
  background: var(--bpAccentBg);
  color: var(--bpAccent);
  display: grid; place-items: center;
}
.dlInfo__icone svg { width: 19px; height: 19px; stroke-linecap: round; stroke-linejoin: round; }
.dlInfo__titre { font-weight: 600; font-size: 15px; }
.dlInfo__texte { font-size: 15px; color: var(--bpSoft); line-height: 1.55; }
.dlInfo__texte a { color: inherit; }
.dlCarteMap {
  width: 100%;
  border: 0;
  border-radius: var(--radius-md);
  aspect-ratio: 16 / 10;
  filter: grayscale(1) contrast(1.05);
  transition: filter .3s ease;
}
.dlCarteMap:hover { filter: none; }

/* ---------- Appel à l'action de bas de page ---------- */
.dlCta {
  background: var(--bpInk);
  color: #fff;
  padding: clamp(56px, 8vw, 92px) 0;
  text-align: center;
}
.dlCta__wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.dlCta__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bpGold);
  margin-bottom: 14px;
}
.dlCta__titre {
  font-family: var(--font-display);
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 14px;
}
.dlCta__texte { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.8); margin-bottom: 28px; }
.dlCta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.dlCta .dlBtn--contour { color: #fff; }

/* ---------- Logo ---------- */
.dlBrand { display: inline-flex; align-items: center; text-decoration: none; }
/* Un logo ne se déforme jamais : hauteur imposée, largeur libre, et
   « object-fit: contain » comme garde-fou si une règle héritée tentait de
   lui imposer une largeur. */
.dlBrand__img { display: block; height: 46px; width: auto; max-width: none; object-fit: contain; }
/* Une seule des deux versions est visible à la fois : sur la barre claire
   c'est l'encre, sur le hero en overlay c'est la blanche. */
.dlBrand__img--blanc { display: none; }
.ktNav.is-top-overlay .dlBrand__img--encre { display: none; }
.ktNav.is-top-overlay .dlBrand__img--blanc { display: block; }
@media (max-width: 719.98px) { .dlBrand__img { height: 38px; } }

.ktFoot__logo {
  height: 62px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 14px;
}

/* ---------- Compléments sur les composants hérités ---------- */
.ktNav__link.is-active { color: var(--bpAccent); }
.ktMega__age {
  flex: none;
  min-width: 62px;
  font-size: 12px;
  font-weight: 700;
  color: var(--bpAccent);
  background: var(--bpAccentBg);
  border-radius: 8px;
  padding: 6px 8px;
  text-align: center;
  align-self: flex-start;
}
.ktFoot__adresse { font-style: normal; font-size: 14px; line-height: 1.8; margin-top: 16px; }
.ktFoot__adresse a { color: inherit; text-decoration: none; }
.ktFoot__adresse a:hover { color: var(--bpAccent); }
.ktFoot__reseaux { display: flex; gap: 10px; margin-top: 18px; }
.ktFoot__reseaux a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: grid; place-items: center;
  color: inherit;
  opacity: .75;
  transition: opacity .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.ktFoot__reseaux a:hover { opacity: 1; background: var(--bpAccent); border-color: var(--bpAccent); color: #fff; }
.ktFoot__reseaux svg { width: 18px; height: 18px; stroke-linecap: round; stroke-linejoin: round; }
.ktFoot__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; }
.ktFoot__legal a { color: inherit; text-decoration: none; opacity: .75; }
.ktFoot__legal a:hover { opacity: 1; text-decoration: underline; }

/* ---------- Bandeau cookies ---------- */
.dlCookies {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 200;
  max-width: 460px;
  margin-left: auto;
  background: #fff;
  border: 1px solid var(--bpLine-2);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(21,21,21,.16);
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
}
.dlCookies p { flex: 1 1 220px; margin: 0; color: var(--bpSoft); }
.dlCookies a { color: var(--bpAccent); }
.dlCookies button {
  font: inherit;
  font-weight: 600;
  background: var(--bpInk);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
}
.dlCookies button:hover { background: var(--bpAccent); }

/* ---------- Impression ---------- */
@media print {
  .dlTop, .ktNav, .ktNavMobile, .ktMega, .dlCta, .dlCookies, .dlSkip, .ktFoot__reseaux { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="/"]::after { content: " (danseleopart.com" attr(href) ")"; font-size: .85em; color: #555; }
}

/* ---------- Thèmes des stages ---------- */
/* Ces informations n'existaient que sur une affiche : en texte, elles
   deviennent lisibles par Google et par un lecteur d'écran. */
.dlThemes {
  list-style: none;
  margin: 14px 0 16px;
  font-size: 14px;
  line-height: 1.5;
  border-top: 1px solid var(--bpLine);
}
.dlThemes li { padding: 8px 0; border-bottom: 1px solid var(--bpLine); }
.dlThemes__age {
  display: inline-block;
  min-width: 74px;
  font-weight: 700;
  color: var(--bpAccent);
}
.dlCarte__limite {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--bpInk);
  background: var(--bpAccentBg);
  border-radius: 999px;
  padding: 7px 13px;
  align-self: flex-start;
}


/* =========================================================
   BANDEAU ADAPTATIF
   ---------------------------------------------------------
   Deux états, et la raison du second est concrète.

   1. EN HAUT DE PAGE — la barre est TRANSPARENTE, posée sur la bannière.
      Son texte prend le contraire de la bannière : blanc sur le rouge.

   2. DÈS QU'ON DESCEND — elle prend la couleur de la section qu'elle
      survole, et son texte bascule en encre ou en blanc selon cette couleur.

      Pourquoi pas transparente partout : au milieu de la page, la barre
      chevauche simultanément des cartes noires et les espaces blancs qui
      les séparent. Aucune couleur de texte n'est lisible sur les deux à la
      fois — vérifié en capture, les liens disparaissaient dans les photos
      des cartes d'âge. Un fond opaque est la seule façon de garder le menu
      lisible sur toute la hauteur de la page.

   Le basculement se fait sur la luminance mesurée, pas sur un nom de classe :
   .dlSection existe en blanc, en gris, en rouge et en encre, et une section
   ajoutée demain sera traitée correctement sans qu'on y pense.
   ========================================================= */
.ktNav {
  background: var(--dlNavBg, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  transition: background-color .25s ease, color .25s ease;
}
/* Tout en haut : aucun fond, la bannière se voit à travers. */
.ktNav.is-transparent { background: transparent; }
/* Premier rendu sans transition : sinon la barre « clignote » en passant de
   sa couleur par défaut à sa couleur réelle. */
.ktNav.is-preload, .ktNav.is-preload * { transition: none !important; }

/* ---- Section sombre ou rouge dessous : tout passe en blanc ---- */
.ktNav.is-sombre .ktNav__link,
.ktNav.is-sombre .ktNav__menuTrigger,
.ktNav.is-sombre .ktNav__ctaMobile { color: #fff; }
.ktNav.is-sombre .ktNav__link:hover,
.ktNav.is-sombre .ktNav__menuTrigger:hover { color: rgba(255,255,255,.78); }
.ktNav.is-sombre .ktNav__link.is-active {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 2px;
}
.ktNav.is-sombre .ktNav__caret { color: #fff; }
.ktNav.is-sombre .ktNav__burgerLine { background: #fff; }
.ktNav.is-sombre .ktNav__cta { background: #fff; color: var(--bpInk); border-color: #fff; }
.ktNav.is-sombre .ktNav__cta:hover { background: var(--bpInk); color: #fff; }
/* Le lettrage du logo est blanc : c'est cette version qu'il faut ici. */
.ktNav.is-sombre .dlBrand__img--encre { display: none; }
.ktNav.is-sombre .dlBrand__img--blanc { display: block; }

/* ---- Section claire dessous : tout passe en encre ---- */
.ktNav.is-clair .ktNav__link,
.ktNav.is-clair .ktNav__menuTrigger,
.ktNav.is-clair .ktNav__ctaMobile { color: var(--bpInk); }
.ktNav.is-clair .ktNav__link:hover,
.ktNav.is-clair .ktNav__menuTrigger:hover { color: var(--bpAccent); }
.ktNav.is-clair .ktNav__link.is-active {
  color: var(--bpAccent);
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 2px;
}
.ktNav.is-clair .ktNav__caret { color: var(--bpInk); }
.ktNav.is-clair .ktNav__burgerLine { background: var(--bpInk); }
.ktNav.is-clair .ktNav__cta { background: var(--bpAccent); color: #fff; border-color: var(--bpAccent); }
.ktNav.is-clair .ktNav__cta:hover { background: var(--bpAccentDeep); border-color: var(--bpAccentDeep); }
.ktNav.is-clair .dlBrand__img--encre { display: block; }
.ktNav.is-clair .dlBrand__img--blanc { display: none; }

/* ---- Méga-menu ouvert ----
   Le panneau du méga-menu est blanc et se raccorde au bas de la barre. Sur
   une section rouge, une barre transparente à texte blanc se retrouverait
   posée devant ce panneau blanc, et le texte disparaîtrait au raccord. La
   barre reprend donc un fond blanc le temps de l'ouverture. */
.ktNav.is-mega-open { background: #fff; }
.ktNav.is-mega-open .ktNav__link,
.ktNav.is-mega-open .ktNav__menuTrigger,
.ktNav.is-mega-open .ktNav__caret { color: var(--bpInk); }
.ktNav.is-mega-open .ktNav__burgerLine { background: var(--bpInk); }
.ktNav.is-mega-open .ktNav__cta { background: var(--bpAccent); color: #fff; }
.ktNav.is-mega-open .dlBrand__img--encre { display: block; }
.ktNav.is-mega-open .dlBrand__img--blanc { display: none; }

/* La barre étant transparente, chaque page doit lui réserver sa hauteur en
   haut, sinon le premier titre passe dessous. */
.dlHero__wrap, .dlSection:first-of-type { scroll-margin-top: 84px; }

/* =========================================================
   PIED DE PAGE ROUGE
   ---------------------------------------------------------
   Il était noir, hérité de muscu. En rouge, il ferme la page sur la couleur
   de la marque et répond à la bannière d'accueil.

   Le blanc pur sur #B9483E donne un contraste de 4,8:1 : suffisant pour le
   texte courant. Les libellés secondaires ne descendent donc pas en dessous
   de 82 % d'opacité — en deçà, on passerait sous le seuil lisible.
   ========================================================= */
.ktFoot {
  background: var(--bpAccent);
  color: #fff;
}
.ktFoot__tag,
.ktFoot__lead,
.ktFoot__leadSub { color: rgba(255,255,255,.9); }
.ktFoot__colTitle { color: #fff; }
.ktFoot__colLinks a,
.ktFoot__adresse a { color: rgba(255,255,255,.88); text-decoration: none; }
.ktFoot__colLinks a:hover,
.ktFoot__adresse a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ktFoot__bottom {
  color: rgba(255,255,255,.86);
  border-top: 1px solid rgba(255,255,255,.24);
}
.ktFoot__reseaux a { border-color: rgba(255,255,255,.5); }
.ktFoot__reseaux a:hover { background: #fff; border-color: #fff; color: var(--bpAccent); }
.ktFoot__brand { color: #fff; }

/* L'appel à l'action juste au-dessus était sur fond noir : deux aplats
   sombres qui se suivent écrasaient la fin de page. Il passe en encre pleine
   pour trancher franchement avec le rouge qui le suit. */
.dlCta { background: var(--bpInk); }
.dlCta__eyebrow { color: var(--bpGold); }

/* =========================================================
   AJUSTEMENTS DE LA PALETTE OFFICIELLE
   ---------------------------------------------------------
   #D62828 sur #F6E7E2 ne donne que 4,16:1, sous le seuil AA pour du texte
   courant. Partout où du rouge se pose sur une section blush, on emploie
   donc la variante foncée #B01F1F, qui remonte à 5,70:1. C'est la seule
   entorse à la palette, et elle est là pour que le texte reste lisible.
   ========================================================= */
.dlSection--gris .dlSection__eyebrow,
.dlSection--gris .dlTexte a,
.dlSection--gris .dlCarte__texte a,
.dlCarte .dlCarte__texte a { color: var(--bpAccentDeep); }

/* La pastille d'âge et l'étiquette de date sont du petit texte gras posé sur
   du blush : même règle. */
.dlThemes__age { color: var(--bpAccentDeep); }
.ktMega__age { color: var(--bpAccentDeep); background: var(--bpAccentBg); }

/* Surtitres sur fond encre : le blush passe à 8:1, le rouge n'y serait pas
   lisible. */
.dlSection--sombre .dlSection__eyebrow,
.dlCta__eyebrow { color: var(--bpGold); }

/* Le hero rouge utilise désormais #D62828 : le blanc y donne 5:1, et les
   boutons blancs ressortent franchement. */
.dlHero--rouge { background: var(--bpAccent); }

/* Le pied de page rouge suit la même couleur que la bannière : la page
   s'ouvre et se ferme sur le même aplat. */
.ktFoot { background: var(--bpAccent); }

/* =========================================================
   LARGEUR COMMUNE AU BANDEAU ET AUX SECTIONS
   ---------------------------------------------------------
   Bandeau, sections, bannière et pied de page partagent une seule largeur
   utile, fixée ici. C'est ce qui garantit que le logo, le premier titre de
   la page et la première colonne du pied tombent sur la même verticale.

   Avant, le bandeau était cadré sur 1240 px et les sections sur 1200 : les
   20 px d'écart de chaque côté se voyaient à l'œil.
   ========================================================= */
:root { --dlLargeur: 1400px; }

.dlWrap { max-width: var(--dlLargeur); }
.ktNav__wrap,
.ktMega__wrap,
.ktFoot__wrap,
.ktBreadcrumbs__wrap,
.dlTop__wrap,
.dlHero__wrap { max-width: var(--dlLargeur); }

/* Le pied de page et le bandeau posent leur marge sur le conteneur extérieur,
   les sections sur le conteneur intérieur : sans cette égalisation, les
   colonnes du pied restaient décalées de quelques pixels par rapport aux
   sections juste au-dessus. */
.ktNav, .ktFoot { padding-left: 24px; padding-right: 24px; }
.dlWrap, .dlHero__wrap { padding-left: 24px; padding-right: 24px; }
@media (max-width: 719.98px) {
  .ktNav, .ktFoot,
  .dlWrap, .dlHero__wrap { padding-left: 18px; padding-right: 18px; }
}

/* Les sections en pleine largeur — bannière, appel à l'action, pied de page —
   gardent leur aplat de bord à bord ; seul leur CONTENU s'aligne. */
.dlCta__wrap { max-width: 720px; }

/* =========================================================
   LIEN ACTIF DU MENU
   ---------------------------------------------------------
   koatcher.css posait une pastille arrondie beige derrière l'entrée active.
   Sur la bannière rouge, elle apparaissait comme une tache claire au milieu
   du menu. L'entrée active est désormais signalée par un simple soulignement,
   qui fonctionne sur fond clair comme sur fond rouge.
   ========================================================= */
.ktNav__link.is-active,
.ktNav__menuTrigger.is-active {
  background: transparent;
  border-radius: 0;
}

/* Les colonnes de liens du pied de page héritaient des puces de liste du
   navigateur : sur fond rouge, elles apparaissaient comme des points sombres
   devant chaque entrée. */
.ktFoot__colLinks,
.ktFoot__legal { list-style: none; padding-left: 0; margin-left: 0; }
.ktFoot__colLinks li { padding-left: 0; }
.ktFoot__colLinks li::marker,
.ktFoot__legal li::marker { content: none; }


/* =========================================================
   SURVOL ET ÉTAT ACTIF DU MENU — correctif
   ---------------------------------------------------------
   koatcher.css posait au survol un FOND blush avec du texte encre
   (« .ktNav__link:hover { background: var(--bpCardSoft); color: var(--bpInk) } »)
   et un fond plus soutenu sur l'entrée active. Sur la bannière rouge, cela
   donnait une pastille claire à texte sombre qui surgissait sous le curseur —
   les « couleurs bizarres » au survol.

   On neutralise ces fonds une bonne fois, et on signale survol et entrée
   active par un simple soulignement : il fonctionne sur fond clair comme sur
   fond rouge, sans jamais introduire une troisième couleur.
   ========================================================= */
.ktNav__link,
.ktNav__menuTrigger,
.ktNav__link:hover,
.ktNav__menuTrigger:hover,
.ktNav__menuTrigger.is-open,
.ktNav__link.is-active,
.ktNav.is-top-overlay .ktNav__link:hover,
.ktNav.is-top-overlay .ktNav__link.is-active,
.ktNav.is-dark .ktNav__link:hover,
.ktNav.is-dark .ktNav__link.is-active {
  background: transparent;
  border-radius: 0;
}

/* Le soulignement remplace la pastille. On le réserve au survol et à l'entrée
   active pour que la barre reste calme au repos. */
.ktNav__link,
.ktNav__menuTrigger {
  text-decoration: none;
  text-underline-offset: 7px;
  text-decoration-thickness: 2px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.ktNav__link:hover,
.ktNav__menuTrigger:hover,
.ktNav__link.is-active { text-decoration: underline; }

/* ---- Sections claires : TOUT le menu en noir ----
   Y compris l'entrée active et le survol. Le rouge est réservé aux boutons ;
   dans le menu, il créait un troisième niveau de couleur pour rien. */
.ktNav.is-clair .ktNav__link,
.ktNav.is-clair .ktNav__menuTrigger,
.ktNav.is-clair .ktNav__link:hover,
.ktNav.is-clair .ktNav__menuTrigger:hover,
.ktNav.is-clair .ktNav__link.is-active,
.ktNav.is-clair .ktNav__caret,
.ktNav.is-clair .ktNav__ctaMobile { color: var(--bpInk); }
.ktNav.is-clair .ktNav__link:hover,
.ktNav.is-clair .ktNav__menuTrigger:hover,
.ktNav.is-clair .ktNav__link.is-active { text-decoration-color: var(--bpInk); }

/* ---- Sections rouges ou sombres : tout en blanc ---- */
.ktNav.is-sombre .ktNav__link,
.ktNav.is-sombre .ktNav__menuTrigger,
.ktNav.is-sombre .ktNav__link:hover,
.ktNav.is-sombre .ktNav__menuTrigger:hover,
.ktNav.is-sombre .ktNav__link.is-active,
.ktNav.is-sombre .ktNav__caret,
.ktNav.is-sombre .ktNav__ctaMobile { color: #fff; }
.ktNav.is-sombre .ktNav__link:hover,
.ktNav.is-sombre .ktNav__menuTrigger:hover,
.ktNav.is-sombre .ktNav__link.is-active { text-decoration-color: #fff; }

/* ---- Méga-menu ouvert : la barre est blanche, le menu repasse en noir ---- */
.ktNav.is-mega-open .ktNav__link,
.ktNav.is-mega-open .ktNav__menuTrigger,
.ktNav.is-mega-open .ktNav__link:hover,
.ktNav.is-mega-open .ktNav__caret { color: var(--bpInk); }