/* =========================================================
   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;
  /* Voile uni, pas un dégradé : il assombrit la photo de façon régulière et
     garantit le contraste du texte blanc quelle que soit l'image. */
  background: rgba(74,67,64,.58);
}
.dlHero__wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 24px 72px;
  width: 100%;
}
.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 var(--dlGouttiere) 52px; }

/* ---------- Hero sur fond rouge ----------
   Variante sans photo : le rouge de la marque occupe toute la bannière. Le
   contraste du texte blanc sur var(--bpAccent) 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 var(--dlGouttiere) 96px; }
.dlHero--rouge .dlHero__lead,
.dlHero--rouge .dlHero__meta { color: rgba(255,255,255,.92); }
.dlHero--rouge .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 var(--dlGouttiere) 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: rgba(74,67,64,.52);
}
.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, background-color .2s ease;
}
a.dlCarte:hover {
  border-color: var(--bpAccent);
  transform: translateY(-2px);
}
.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 ---------- */
/* La FAQ occupait 820 px centrés dans un conteneur de 1392 : ses questions
   démarraient 290 px à droite du reste de la page. Elle prend maintenant
   toute la boîte, et c'est la RÉPONSE qui plafonne sa longueur de ligne —
   la question tient sur une ligne, elle n'a pas besoin d'être bridée. */
.dlFaq { max-width: none; margin: 0; }
.dlFaq__r { max-width: 68ch; }
.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;
}
.dlForm input:focus, .dlForm select:focus, .dlForm textarea:focus {
  outline: none;
  border-color: var(--bpAccent);
}
.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: 58px; 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: 43px; } }

.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);
  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 var(--bpAccent) 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
   ---------------------------------------------------------
   var(--bpAccent) sur #FAFAFA 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 var(--bpAccent) : le blanc y donne 5:1, et les
   boutons blancs ressortent franchement. */
.dlHero--rouge { background: var(--bpAccent); }   /* orange depuis le passage
   de la charte au tout-orange ; le nom de classe est conservé pour ne pas
   avoir à modifier les gabarits, la couleur vient du token. */

/* 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; }

/* La gouttière est nommée : elle sert à la fois de rembourrage et de
   correction de largeur, et les deux doivent bouger ensemble. */
:root { --dlGouttiere: 24px; }
@media (max-width: 719.98px) { :root { --dlGouttiere: 18px; } }

/* La barre de navigation et le pied portent leur rembourrage À L'EXTÉRIEUR de
   leur largeur maximale : leur contenu fait donc 1400 px pleins. Les sections
   le portaient à l'intérieur, et n'en faisaient que 1352 — soit 24 px de
   retrait de chaque côté par rapport au logo et au bouton « Contacter ». Le
   décalage se voyait sur toute la hauteur des pages.
   On élargit donc la boîte de la gouttière pour que le CONTENU retombe sur
   1400 px, comme celui du bandeau. */
.dlWrap,
.dlHero__wrap { max-width: calc(var(--dlLargeur) + 2 * var(--dlGouttiere)); }

.ktNav__wrap,
.ktMega__wrap,
.ktFoot__wrap,
.ktBreadcrumbs__wrap,
.dlTop__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: var(--dlGouttiere); padding-right: var(--dlGouttiere); }
/* Ces raccourcis écrivaient « 24px » en dur et l'emportaient sur la règle
   générale : sur téléphone, la bannière gardait 24 px quand la barre de
   navigation et les sections passaient à 18. Le titre était donc décalé de
   6 px vers la droite par rapport au logo, sur toutes les pages à bannière. */
.dlWrap, .dlHero__wrap { padding-left: var(--dlGouttiere); padding-right: var(--dlGouttiere); }
@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); }

/* =========================================================
   BANDEAU DE RENTRÉE
   ---------------------------------------------------------
   Barre fine fixée tout en haut, au-dessus du menu. Le menu étant lui-même
   en position fixe, il faut le décaler d'autant : c'est le rôle de
   --dlAnnonceH, qui pilote à la fois le décalage du menu et la réserve
   laissée en haut des bannières. Une seule valeur à changer.
   ========================================================= */
:root { --dlAnnonceH: 44px; }
/* Masqué : plus aucune réserve, le menu remonte tout en haut.

   Le !important n'est pas décoratif. La valeur mobile est redéfinie plus bas
   dans un « @media (max-width: 719.98px) { :root { --dlAnnonceH: 40px } } » :
   même spécificité, écrit après, donc gagnant. Sans lui, fermer le bandeau
   sur téléphone laissait la barre poussée de 40 px au-dessus d'une bande
   vide — la barre semblait « planter ». */
html.dl-annonce-masquee { --dlAnnonceH: 0px !important; }
.dl-annonce-masquee .dlAnnonce { display: none; }

.dlAnnonce {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;                 /* au-dessus du menu, qui est à 50 */
  height: var(--dlAnnonceH);
  background: var(--bpInk);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 44px 0 16px;      /* la marge droite laisse la place à la croix */
  font-size: 14px;
}
.dlAnnonce__lien {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.dlAnnonce__pastille {
  flex: none;
  background: var(--bpAccent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
}
.dlAnnonce__texte {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dlAnnonce__lien:hover .dlAnnonce__texte { text-decoration: underline; text-underline-offset: 3px; }
.dlAnnonce__fleche { flex: none; transition: transform .18s ease; }
.dlAnnonce__lien:hover .dlAnnonce__fleche { transform: translateX(3px); }
.dlAnnonce__fermer {
  position: absolute;
  right: 10px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.7);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
.dlAnnonce__fermer:hover { color: #fff; background: rgba(255,255,255,.12); }

/* Le menu descend sous le bandeau, et les bannières réservent la hauteur des
   deux. Sans ça, le premier titre passait sous la barre. */
.ktNav { top: var(--dlAnnonceH); }
.dlHero--rouge .dlHero__wrap { padding-top: calc(152px + var(--dlAnnonceH)); }
.dlHero--compact .dlHero__wrap { padding-top: calc(110px + var(--dlAnnonceH)); }
.dlHero .dlHero__wrap { padding-top: calc(120px + var(--dlAnnonceH)); }

@media (max-width: 719.98px) {
  :root { --dlAnnonceH: 40px; }
  .dlAnnonce { font-size: 12.5px; gap: 8px; padding-left: 12px; }
  /* Sur téléphone, la pastille et le texte ne tiennent pas ensemble sur une
     ligne : on garde la pastille, qui porte l'information datée. */
  .dlAnnonce__texte { display: none; }
  .dlAnnonce__pastille { font-size: 11px; }
  /* Le texte de repli est inséré par ::after, donc APRÈS la flèche dans
     l'ordre du document : « pastille → flèche → texte ». On renvoie la
     flèche en dernier pour retrouver la lecture normale. */
  .dlAnnonce__lien::after {
    content: 'Inscriptions ouvertes';
    white-space: nowrap;
    order: 1;
  }
  .dlAnnonce__fleche { order: 2; }
  .dlHero--rouge .dlHero__wrap { padding-top: calc(118px + var(--dlAnnonceH)); }
}


/* =========================================================
   MISE À PLAT — aucune ombre, aucun dégradé
   ---------------------------------------------------------
   koatcher.css portait 44 ombres portées, 26 dégradés et des flous
   d'arrière-plan, hérités d'une charte de logiciel. Sur un site d'école, ça
   fait « gabarit » plutôt que soigné.

   Tout est neutralisé ici en un endroit, et la hiérarchie visuelle repose
   désormais sur trois choses seulement : les aplats de couleur, les filets
   fins, et l'espacement. C'est ce qui tient dans le temps.

   Le !important est assumé : il s'agit d'annuler des dizaines de règles
   dispersées dans 10 000 lignes, sans les traquer une par une au risque d'en
   manquer et de laisser une ombre isolée quelque part.
   ========================================================= */
*, *::before, *::after {
  box-shadow: none !important;
  text-shadow: none !important;
}
.ktNav, .ktMega, .ktNavMobile, .dlCookies, .dlAnnonce {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Les surfaces qui s'appuyaient sur une ombre pour se détacher prennent un
   filet. Une carte se lit aussi bien, et la page reste nette. */
.dlCarte, .dlTarif, .dlAvis__carte, .dlCookies, .ktMega {
  border: 1px solid var(--bpLine-2);
}
a.dlCarte:hover, .dlTarif--phare { border-color: var(--bpAccent); }
a.dlCarte:hover { transform: none; background: var(--bpCardSoft); }
.dlSection--gris a.dlCarte:hover { background: #fff; }

/* =========================================================
   PRÉSENTATION DE L'ACCUEIL — resserrage
   ---------------------------------------------------------
   Trois réglages qui font l'essentiel de l'impression « pro » :
   une mesure de lecture bornée, un rythme vertical régulier, et des titres
   qui respirent au lieu de flotter.
   ========================================================= */

/* 1. La ligne de texte ne dépasse jamais ~68 caractères. Au-delà, l'œil perd
      le début de la ligne suivante — c'est le défaut le plus visible d'une
      page large. */
.dlSection__lead { max-width: 62ch; }
.dlSection__head--centre .dlSection__lead { margin-inline: auto; }
.dlTexte { max-width: 68ch; }
.dlHero__lead { max-width: 54ch; }

/* 2. Rythme vertical : toutes les sections respirent pareil, et deux sections
      de même couleur qui se suivent ne doublent pas l'écart. */
.dlSection { padding: clamp(64px, 7vw, 104px) 0; }
.dlSection + .dlSection { padding-top: clamp(64px, 7vw, 104px); }
.dlSection--gris + .dlSection--gris { padding-top: 0; }

/* 3. Titres : un cran plus serrés, avec un surtitre qui se rattache
      visuellement au titre au lieu de flotter au-dessus. */
.dlSection__eyebrow { margin-bottom: 10px; letter-spacing: .12em; }
.dlSection__titre { letter-spacing: -.025em; text-wrap: balance; }
.dlHero__titre { text-wrap: balance; }
.dlSection__head { margin-bottom: 40px; }

/* 4. Liste à puces sobre, pour les arguments de la rentrée. */
.dlPoints {
  list-style: none;
  margin-top: 22px;
  display: grid;
  gap: 11px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--bpInk-2);
}
.dlPoints li { display: flex; gap: 11px; align-items: flex-start; }
.dlPoints li::before {
  content: '';
  flex: none;
  width: 7px; height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--bpAccent);
}

/* 5. Cartes d'âge : le voile uni remplace le dégradé, et l'agrandissement au
      survol est retiré — un déplacement d'image sous le curseur fait
      « gadget ». Le cadre change de bordure, c'est suffisant. */
.dlAge { border-radius: var(--radius-md); }
.dlAge:hover .dlAge__media img { transform: none; }
.dlAge__media::after { background: rgba(74,67,64,.52); }
.dlAge:hover .dlAge__media::after { background: rgba(74,67,64,.38); }

/* 6. Boutons : plus de soulèvement au survol, juste un changement d'aplat. */
.dlBtn:hover { transform: none; }

/* 7. Les cartes d'article ne grossissent plus non plus au survol. */
.dlArticle:hover .dlArticle__media img { transform: none; }
.dlGalerie a:hover img { transform: none; }
.dlGalerie a:hover { outline: 2px solid var(--bpAccent); outline-offset: 2px; }


/* =========================================================
   BOUTON D'APPEL DU BANDEAU — bordure adaptative
   ---------------------------------------------------------
   « .ktNav__ctaMobile » héritait d'un « border-color » noir en dur : sur la
   bannière rouge, un contour noir apparaissait autour d'un texte blanc, et il
   ne changeait jamais avec la section. La bordure suit désormais la couleur
   du texte, ce qui la rend juste par construction — impossible qu'elles
   divergent à nouveau.
   ========================================================= */
.ktNav__cta,
.ktNav__ctaMobile {
  border: 1.5px solid currentColor;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}

/* Le bouton plein « Contacter » : son fond porte déjà le contraste, sa
   bordure épouse ce fond plutôt que de dessiner un second trait. */
.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-sombre .ktNav__cta { background: #fff; color: var(--bpInk); border-color: #fff; }
.ktNav.is-sombre .ktNav__cta:hover { background: transparent; color: #fff; border-color: #fff; }
.ktNav.is-mega-open .ktNav__cta { background: var(--bpAccent); color: #fff; border-color: var(--bpAccent); }

/* Le bouton « Appeler » du mobile est un contour : il prend la couleur du
   texte courant, donc blanc sur rouge et encre sur blanc. */
.ktNav.is-clair .ktNav__ctaMobile { color: var(--bpInk); border-color: currentColor; background: transparent; }
.ktNav.is-sombre .ktNav__ctaMobile { color: #fff; border-color: currentColor; background: transparent; }
.ktNav.is-clair .ktNav__ctaMobile:hover { background: var(--bpInk); color: #fff; }
.ktNav.is-sombre .ktNav__ctaMobile:hover { background: #fff; color: var(--bpInk); }

/* =========================================================
   VIDÉO DE PRÉSENTATION
   ---------------------------------------------------------
   Vignette cliquable, puis iframe. Le cadre a un rapport 16/9 FIXE : la place
   est réservée avant le clic, et le remplacement de la vignette par le
   lecteur ne fait pas sauter la page.
   ========================================================= */
.dlVideo {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bpInk);
}
.dlVideo__declencheur,
.dlVideo__cadre {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.dlVideo__declencheur {
  padding: 0;
  background: none;
  cursor: pointer;
}
.dlVideo__declencheur img { width: 100%; height: 100%; object-fit: cover; }
/* Voile uni : il assombrit assez la vignette pour que le bouton et la mention
   restent lisibles quelle que soit l'image de départ. */
.dlVideo__declencheur::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(74,67,64,.34);
  transition: background .2s ease;
}
.dlVideo__declencheur:hover::after { background: rgba(74,67,64,.16); }

.dlVideo__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  border-radius: 50%;
  background: #fff;
  color: var(--bpAccent);
  display: grid;
  place-items: center;
  transition: background .2s ease, color .2s ease;
}
.dlVideo__play svg { width: 34px; height: 34px; margin-left: 3px; }
.dlVideo__declencheur:hover .dlVideo__play { background: var(--bpAccent); color: #fff; }

.dlVideo__mention {
  position: absolute;
  left: 16px; bottom: 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

/* ---------- Bannière en deux colonnes ---------- */
.dlHero--duo .dlHero__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.dlHero--duo .dlHero__titre { max-width: 14ch; }
.dlHero--duo .dlHero__lead { max-width: 50ch; }
/* Sur la bannière rouge, la vidéo est encadrée d'un filet clair : sans lui,
   la vignette sombre flotte sur l'aplat sans limite nette. */
.dlHero--duo .dlVideo { border: 1px solid rgba(255,255,255,.32); }

@media (max-width: 899.98px) {
  .dlHero--duo .dlHero__wrap { grid-template-columns: 1fr; gap: 34px; }
  .dlHero--duo .dlHero__titre,
  .dlHero--duo .dlHero__lead { max-width: none; }
  .dlVideo__play { width: 60px; height: 60px; }
  .dlVideo__play svg { width: 27px; height: 27px; }
}


/* =========================================================
   LE HERO PASSE AU-DESSUS DU FIL D'ARIANE
   ---------------------------------------------------------
   Le fil d'Ariane est écrit avant <main> dans le document — il occupait donc
   88 px tout en haut de page, et poussait la bannière vers le bas. Le bandeau
   transparent se retrouvait posé sur cette bande blanche tout en ayant relevé
   la couleur de la bannière : liens blancs sur blanc. Le fil, lui, passait
   sous le bandeau et devenait illisible — c'est pourquoi il semblait absent
   du blog.

   Plutôt que de déplacer le fil dans chacun des vingt gabarits, on rend le
   conteneur flexible et on fait remonter la bannière d'un cran. L'ordre du
   DOM ne change pas : le fil reste avant le contenu pour un lecteur d'écran,
   ce qui est le bon ordre de lecture.
   ========================================================= */
/* Le fil d'Ariane et la bannière sont désormais frères dans <main> : « order »
   peut donc faire remonter la bannière devant lui. */
main { display: flex; flex-direction: column; min-height: 40vh; }
.dlHero { order: -1; }
/* Le fil se pose juste sous la bannière, sur fond clair, et passe devant elle
   plutôt que dessous. */
.ktBreadcrumbs {
  position: relative;
  z-index: 1;
  background: var(--bpBg);
  order: 0;
}
/* Les sections gardent leur ordre d'écriture. */
main > section:not(.dlHero) { order: 1; }

/* =========================================================
   PLUS DE GRIS ANTHRACITE — ORANGE MAT À LA PLACE
   ---------------------------------------------------------
   Les aplats sombres reprenaient l'encre du texte (#4A4340), ce qui donnait
   des pavés gris anthracite au milieu d'une charte chaude. Ils passent en
   orange brûlé : la page alterne désormais blanc, blush, rouge et orange,
   toutes des couleurs de la même famille.

   L'encre reste ce qu'elle a toujours été — la couleur du TEXTE — et n'est
   plus jamais employée comme fond de section.
   ========================================================= */
.dlSection--sombre { background: var(--bpOrange); color: #fff; }
.dlSection--sombre .dlSection__lead { color: rgba(255,255,255,.92); }
.dlSection--sombre .dlSection__titre { color: #fff; }
.dlSection--sombre .dlSection__eyebrow { color: var(--bpGold); }
.dlSection--sombre .dlBtn--plein { background: #fff; color: var(--bpOrange); }
.dlSection--sombre .dlBtn--plein:hover { background: var(--bpGold); color: var(--bpOrangeDeep); }
.dlSection--sombre .dlBtn--contour { color: #fff; border-color: rgba(255,255,255,.62); }
.dlSection--sombre .dlBtn--contour:hover { background: #fff; border-color: #fff; color: var(--bpOrange); }

/* L'appel à l'action de bas de page : orange, entre le contenu et le pied
   rouge. Trois aplats chauds qui se suivent, aucun gris. */
.dlCta { background: var(--bpOrange); }
.dlCta__eyebrow { color: var(--bpGold); }
.dlCta .dlBtn--plein { background: #fff; color: var(--bpOrange); }
.dlCta .dlBtn--plein:hover { background: var(--bpGold); color: var(--bpOrangeDeep); }
.dlCta .dlBtn--contour { color: #fff; border-color: rgba(255,255,255,.62); }
.dlCta .dlBtn--contour:hover { background: #fff; border-color: #fff; color: var(--bpOrange); }

/* Le bandeau d'annonce et les voiles d'image suivent le même principe :
   plus d'anthracite, on emprunte à la famille chaude. */
.dlAnnonce { background: var(--bpOrange); }
.dlAnnonce__pastille { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); }
.dlVideo { background: var(--bpOrangeDeep); }
.dlAge { background: var(--bpOrangeDeep); }
.dlHero { background-color: var(--bpOrangeDeep); }
.dlHero--rouge { background: var(--bpAccent); }   /* orange depuis le passage
   de la charte au tout-orange ; le nom de classe est conservé pour ne pas
   avoir à modifier les gabarits, la couleur vient du token. */

/* =========================================================
   MENU MOBILE OUVERT — barre blanche, contenu en noir
   ---------------------------------------------------------
   Le panneau du menu est blanc et part du bas de la barre. Si celle-ci reste
   transparente avec ses liens clairs — cas d'une bannière rouge — le logo et
   la croix disparaissent sur le panneau. Pendant toute l'ouverture, la barre
   est donc figée en blanc, avec logo, croix et bouton en encre.
   ========================================================= */
.ktNav.is-menu-open {
  background: #fff;
  border-bottom: 1px solid var(--bpLine);
}
.ktNav.is-menu-open .ktNav__link,
.ktNav.is-menu-open .ktNav__menuTrigger,
.ktNav.is-menu-open .ktNav__caret,
.ktNav.is-menu-open .ktNav__ctaMobile { color: var(--bpInk); }
/* La croix : ce sont les deux barres du burger, pivotées par koatcher. */
.ktNav.is-menu-open .ktNav__burgerLine { background: var(--bpInk); }
.ktNav.is-menu-open .ktNav__ctaMobile {
  color: var(--bpInk);
  border-color: var(--bpInk);
  background: transparent;
}
.ktNav.is-menu-open .ktNav__cta { background: var(--bpAccent); color: #fff; border-color: var(--bpAccent); }
/* Le lettrage du logo est blanc dans sa version claire : sur une barre
   blanche, c'est la version encre qu'il faut. */
.ktNav.is-menu-open .dlBrand__img--encre { display: block; }
.ktNav.is-menu-open .dlBrand__img--blanc { display: none; }

/* Le bandeau d'annonce resterait orange au-dessus d'un menu blanc : on le
   masque pendant l'ouverture, le menu occupe déjà tout l'écran. */
.ktNav.is-menu-open ~ .dlAnnonce,
body:has(.ktNav.is-menu-open) .dlAnnonce { display: none; }
body:has(.ktNav.is-menu-open) { --dlAnnonceH: 0px; }


/* =========================================================
   FIL D'ARIANE SUR LES PAGES SANS BANNIÈRE
   ---------------------------------------------------------
   Blog, contact, galerie et articles n'ont pas de bannière : le fil se
   retrouve donc en première position, et le bandeau — qui est transparent et
   fixe — se posait dessus. Le fil existait bien, mais on ne le voyait pas.

   « :has() » permet de ne réserver cette hauteur que sur les pages
   concernées : là où une bannière existe, le fil est déjà plus bas et n'a
   besoin de rien.
   ========================================================= */
main:not(:has(.dlHero)) > .ktBreadcrumbs {
  padding-top: calc(var(--dlAnnonceH) + 76px);
}
/* Repli pour les navigateurs sans :has() — ils réservent la hauteur partout,
   ce qui ne coûte qu'un peu d'air sous une bannière. */
@supports not selector(:has(*)) {
  .ktBreadcrumbs { padding-top: calc(var(--dlAnnonceH) + 76px); }
  .dlHero ~ .ktBreadcrumbs { padding-top: 0; }
}


/* =========================================================
   PIED DE PAGE BRUN SOMBRE
   ---------------------------------------------------------
   #332927 : un brun chaud, pas un gris. Il ferme la page sans jurer avec
   l'orange, et le blanc y donne 14,12:1 — très confortable.

   Attention : l'orange sur ce brun ne donne que 2,92:1. Aucun lien ni aucun
   libellé du pied ne doit donc être en orange ; tout y est en blanc ou en
   crème.
   ========================================================= */
.ktFoot { background: #332927; color: #fff; }
.ktFoot__tag, .ktFoot__lead, .ktFoot__leadSub { color: rgba(255,255,255,.86); }
.ktFoot__colTitle { color: var(--bpGold); }
.ktFoot__colLinks a, .ktFoot__adresse a { color: rgba(255,255,255,.84); }
.ktFoot__colLinks a:hover, .ktFoot__adresse a:hover { color: #fff; }
.ktFoot__bottom { color: rgba(255,255,255,.76); border-top-color: rgba(255,255,255,.18); }
.ktFoot__reseaux a { border-color: rgba(255,255,255,.44); }
.ktFoot__reseaux a:hover { background: #fff; border-color: #fff; color: #332927; }

/* L'appel à l'action juste au-dessus reste orange : orange puis brun sombre,
   la page se termine sur deux tons chauds qui se distinguent nettement. */
.dlCta { background: var(--bpAccent); }

/* Aucun filet entre les sections : les aplats se succèdent directement.
   Le crème #FAFAFA et le blanc ne diffèrent que de 1,025:1, donc l'alternance
   reste discrète — c'est assumé, l'espacement fait la séparation. */
.dlSection { border-top: 0; border-bottom: 0; }

/* =========================================================
   BANNIÈRE SUR BRUN SOMBRE
   ---------------------------------------------------------
   #332927, la même couleur que le pied de page : la page s'ouvre et se ferme
   sur le même aplat, et l'orange devient l'accent qui ponctue entre les deux.
   Le blanc y donne 14,12:1.

   La classe s'appelle encore « --rouge » : c'est son nom d'origine, conservé
   pour ne pas avoir à toucher aux gabarits. La couleur, elle, vient d'ici.
   La page /inscription/ utilise la même classe et suit donc la bannière
   d'accueil — les deux restent cohérentes.
   ========================================================= */
.dlHero--rouge { background: #332927; }
.dlHero--rouge /* Le bouton principal passe en orange plein : sur le brun, il ressort mieux
   qu'un bouton blanc, et il rappelle l'accent du reste de la page. */
.dlHero--rouge .dlBtn--plein { background: var(--bpAccent); color: #fff; border-color: var(--bpAccent); }
.dlHero--rouge .dlBtn--plein:hover { background: var(--bpAccentDeep); border-color: var(--bpAccentDeep); }
.dlHero--rouge .dlBtn--contour { color: #fff; border-color: rgba(255,255,255,.55); }
.dlHero--rouge .dlBtn--contour:hover { background: #fff; border-color: #fff; color: #332927; }
.dlHero--rouge .dlVideo { border-color: rgba(255,255,255,.26); }


/* Plus aucun trait de séparation horizontal entre les sections, sur tout le
   site — y compris ceux hérités de koatcher.css. */
main > section,
main > section::before,
main > section::after,
.dlSection, .ktFoot, .dlCta, .ktBreadcrumbs {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
/* Le filet des colonnes du pied de page reste : il sépare le bloc légal du
   reste À L'INTÉRIEUR d'une même section, ce n'est pas une séparation de
   section. */
.ktFoot__bottom { border-top: 1px solid rgba(255,255,255,.18) !important; }


/* =========================================================
   PLUS AUCUNE BORDURE DE CONTENEUR
   ---------------------------------------------------------
   Cartes, tarifs, avis, méga-menu, vidéo, bandeau cookies : tous les filets
   de contour sont retirés. Les seules bordures qui restent sont celles des
   CHAMPS DE FORMULAIRE, où le trait n'est pas décoratif — il indique où l'on
   peut écrire, et le retirer rendrait le formulaire inutilisable.

   Sans contour, les cartes se distinguent par un aplat légèrement différent
   de celui de leur section : blanc sur une section grise, gris sur une
   section blanche. L'écart est ténu (1,044:1) mais suffit à délimiter une
   surface, alors qu'il serait insuffisant pour du texte.
   ========================================================= */
.dlCarte, .dlTarif, .dlAvis__carte, .dlCookies, .ktMega,
.dlVideo, .dlAge, .dlCadre, .dlDuo__media, .dlArticle__media,
.dlGalerie a, .ktFoot__reseaux a, .dlBtn, .dlTarif--phare,
.dlHero--rouge .dlVideo, .dlHero--duo .dlVideo {
  border: 0 !important;
}
/* Les boutons à contour font exception : leur trait EST le bouton.
   « .ktNav__cta » n'en fait plus partie : il est plein dans tous ses états,
   son fond porte déjà le contraste, et le filet ne délimitait rien. */
.dlBtn--contour, .ktNav__ctaMobile, .ktFoot__reseaux a {
  border: 1.5px solid currentColor !important;
}
.dlBtn--plein { border-color: transparent !important; }

/* Les champs de saisie gardent leur bordure — c'est elle qui montre où
   écrire. */
.dlForm input,
.dlForm select,
.dlForm textarea {
  border: 1px solid var(--bpLine-2) !important;
}
.dlForm input:focus,
.dlForm select:focus,
.dlForm textarea:focus {
  border-color: var(--bpAccent) !important;
}

/* Les surfaces se détachent par leur aplat, plus par un trait. */
.dlCarte, .dlTarif, .dlAvis__carte { background: var(--bpCardSoft); }
.dlSection--gris .dlCarte,
.dlSection--gris .dlTarif,
.dlSection--gris .dlAvis__carte { background: #fff; }
.dlSection--sombre .dlCarte { background: rgba(255,255,255,.12); color: #fff; }
.dlSection--sombre .dlCarte__texte { color: rgba(255,255,255,.88); }
a.dlCarte:hover { background: var(--bpAccentBg); }
.dlSection--gris a.dlCarte:hover { background: var(--bpAccentBg); }
.dlTarif--phare { outline: 2px solid var(--bpAccent); outline-offset: -2px; }
.dlCookies { background: #fff; }


/* =========================================================
   LE SECOND BOUTON DEVIENT UN LIEN TEXTUEL
   ---------------------------------------------------------
   Deux boutons côte à côte se disputent l'attention : l'œil ne sait plus
   lequel est l'action principale. On garde donc UN bouton plein, et l'action
   secondaire redevient ce qu'elle est — un lien.

   « .dlBtn--contour » conserve son nom de classe, employé dans une vingtaine
   de gabarits ; c'est son apparence qui change, pas son emploi.
   ========================================================= */
.dlBtn--contour {
  border: 0 !important;
  background: transparent !important;
  padding: 14px 4px;
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: currentColor;
  border-radius: 0;
}
.dlBtn--contour::after {
  content: '→';
  margin-left: 2px;
  transition: transform .18s ease;
  display: inline-block;
}
.dlBtn--contour:hover {
  background: transparent !important;
  text-decoration-color: transparent;
}
.dlBtn--contour:hover::after { transform: translateX(4px); }

/* Sur les aplats sombres et orange, le lien reprend simplement le blanc. */
.dlHero--rouge .dlBtn--contour,
.dlCta .dlBtn--contour,
.dlSection--sombre .dlBtn--contour { color: #fff; }
.dlHero--rouge .dlBtn--contour:hover,
.dlCta .dlBtn--contour:hover,
.dlSection--sombre .dlBtn--contour:hover { background: transparent !important; color: #fff; }

/* Sur fond clair, il prend l'orange foncé : lisible partout, et il se
   distingue du texte courant en encre. */
.dlSection .dlBtn--contour,
.dlWrap .dlBtn--contour { color: var(--bpAccentDeep); }

/* Les deux actions ne sont plus alignées comme deux boutons : le lien se
   pose à côté du bouton, sans le concurrencer. */
.dlHero__actions, .dlCta__actions { align-items: center; gap: 12px 22px; }

/* =========================================================
   ICÔNES SANS FOND
   ---------------------------------------------------------
   Les icônes étaient posées dans une pastille arrondie teintée. Sans ce fond,
   elles se lisent comme un pictogramme et non comme un bouton — et la page
   perd une vingtaine de petits aplats qui la chargeaient.
   ========================================================= */
.dlCarte__icone,
.dlInfo__icone {
  background: none !important;
  border-radius: 0;
  width: auto;
  height: auto;
  color: var(--bpAccent);
  display: block;
  margin-bottom: 14px;
}
.dlCarte__icone svg,
.dlInfo__icone svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.6;
}
.dlInfo__icone { flex: none; margin-bottom: 0; }
.dlInfo__icone svg { width: 24px; height: 24px; }
/* Sur les aplats sombres, l'icône passe en blanc comme le reste. */
.dlSection--sombre .dlCarte__icone,
.dlCta .dlCarte__icone { color: #fff; }

.dlCentre { text-align: center; }

/* =========================================================
   MOBILE — TOUT ALIGNÉ À GAUCHE
   ---------------------------------------------------------
   Sur une colonne étroite, le texte centré donne des lignes en drapeau des
   deux côtés : l'œil ne trouve plus le début de la ligne suivante. Le
   ferrage à gauche est ce qui se lit le mieux sur téléphone, et c'est
   généralisé ici à tous les blocs qui étaient centrés en desktop.
   ========================================================= */
@media (max-width: 719.98px) {
  .dlCentre,
  .dlSection__head--centre,
  .dlCta,
  .dlCta__wrap,
  .dlAvis__note,
  .dlSection--sombre .dlWrap--etroit { text-align: left; }

  .dlSection__head--centre .dlSection__lead,
  .dlCta__texte { margin-inline: 0; }

  .dlCta__actions,
  .dlHero__actions,
  .dlSection__actions { justify-content: flex-start; }

  /* Les affiches et la vidéo étaient recentrées par une marge automatique :
     elles reprennent le bord gauche comme le reste. */
  .dlDuo__media--affiche,
  .dlDuo__media--portrait { margin-inline: 0; max-width: none; }

  /* Le bloc d'avis : la note et les étoiles se ferrent aussi à gauche. */
  .dlAvis__note { justify-content: flex-start; }

  /* Le bandeau d'annonce reste centré : c'est une bande, pas un paragraphe. */
  .dlAnnonce { justify-content: flex-start; }
}


/* La pastille qui surmontait chaque titre de page a été retirée des gabarits.
   Le titre attaque directement la bannière : moins d'éléments, une entrée de
   page plus franche. Les surtitres de SECTION (.dlSection__eyebrow) restent,
   eux — ce sont de simples libellés en petites capitales, sans fond, et ils
   introduisent des h2, pas le titre de la page. */
.dlHero__titre { margin-top: 0; }


/* =========================================================
   LIEN ACTIF QUAND LE MÉGA-MENU EST OUVERT
   ---------------------------------------------------------
   Dans cet état, la barre est blanche. Or « .ktNav.is-sombre .ktNav__link
   .is-active » — posé parce que la bannière en dessous est sombre — a une
   spécificité de (0,4,0) et l'emportait sur « .ktNav.is-mega-open
   .ktNav__link » qui n'est qu'à (0,3,0) : le lien actif restait BLANC sur
   une barre blanche.

   On rétablit la priorité avec des sélecteurs de spécificité au moins égale,
   placés après. Le fond, lui, est neutralisé à la source dans koatcher.css.
   ========================================================= */
.ktNav.is-mega-open .ktNav__link.is-active,
.ktNav.is-mega-open .ktNav__menuTrigger.is-active,
.ktNav.is-mega-open.is-sombre .ktNav__link.is-active,
.ktNav.is-mega-open.is-sombre .ktNav__menuTrigger {
  color: var(--bpInk);
  background: transparent !important;
  text-decoration-color: var(--bpInk);
}
/* Et la marque suit : version encre du logo sur une barre blanche. */
.ktNav.is-mega-open.is-sombre .dlBrand__img--encre { display: block; }
.ktNav.is-mega-open.is-sombre .dlBrand__img--blanc { display: none; }
/* Le bouton « Appeler » du mobile, même raison. */
.ktNav.is-mega-open .ktNav__ctaMobile { color: var(--bpInk); border-color: var(--bpInk); }

/* =========================================================
   BLOCS CENTRÉS — centrer aussi le BLOC, pas seulement les lignes
   ---------------------------------------------------------
   « text-align: center » centre les lignes À L'INTÉRIEUR de leur bloc. Mais
   nos blocs de texte sont bridés en largeur — 62 caractères pour un chapô,
   68 pour un corps de texte — et ce bloc restait calé à gauche du conteneur.
   Résultat : des lignes centrées dans une colonne décalée, qui donnaient
   l'impression que rien n'était centré.

   La marge automatique recentre le bloc lui-même. C'est elle qui manquait.
   ========================================================= */
.dlCentre .dlSection__lead,
.dlCentre .dlTexte,
.dlCentre .dlSection__titre,
.dlCentre .dlPoints { margin-inline: auto; }

/* Le corps de texte suit l'alignement de son conteneur centré. */
.dlCentre .dlTexte,
.dlCentre .dlTexte p,
.dlCentre .dlTexte h2,
.dlCentre .dlTexte h3 { text-align: center; }
/* Les listes restent ferrées à gauche : une puce centrée ne se lit pas. */
.dlCentre .dlTexte ul,
.dlCentre .dlTexte ol { text-align: left; display: inline-block; }

/* Les boutons d'un bloc centré se groupent au centre. */
.dlCentre .dlHero__actions,
.dlCentre .dlSection__actions { justify-content: center; }

@media (max-width: 719.98px) {
  /* Sur téléphone tout repasse à gauche, y compris ces blocs. */
  .dlCentre .dlSection__lead,
  .dlCentre .dlTexte,
  .dlCentre .dlTexte p,
  .dlCentre .dlTexte h2,
  .dlCentre .dlTexte h3,
  .dlCentre .dlSection__titre { text-align: left; margin-inline: 0; }
  .dlCentre .dlHero__actions,
  .dlCentre .dlSection__actions { justify-content: flex-start; }
}

/* ==========================================================================
   SOMMAIRE DES PAGES LONGUES
   --------------------------------------------------------------------------
   Deux mises en page pour un seul balisage : colonne latérale collante à
   partir de 980 px, barre repliable collée sous l'en-tête en dessous. Le
   <details> est ouvert dans le HTML — sur grand écran c'est son état final,
   et une page servie sans JavaScript garde un sommaire lisible.
   ========================================================================== */

/* Largeur commune à l'en-tête et au corps de l'article : 250 px de sommaire,
   56 px de gouttière et 780 px de colonne de lecture, plus la gouttière
   extérieure. Les deux blocs partagent cette boîte, sinon leurs bords gauche
   et droit ne tombent pas au même endroit et la page se lit de travers. */
/* L'article partage exactement la boîte de l'en-tête et du pied : même
   largeur maximale, même gouttière. Il vivait auparavant dans une boîte de
   1166 px centrée, ce qui rentrait son titre de 150 px par rapport au logo
   et au fil d'Ariane — un décalage visible sur toute la hauteur de la page. */
.dlArticle__grille {
  max-width: calc(var(--dlLargeur) + 2 * var(--dlGouttiere));
  margin: 0 auto;
  padding: 0 var(--dlGouttiere);
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
/* La colonne de lecture garde une longueur de ligne confortable même quand
   la grille lui laisse toute la largeur disponible. */
/* La boîte fait maintenant 1400 px : sans plafond, la colonne de lecture
   atteindrait 1050 px, soit près de 120 caractères par ligne. */
.dlArticle__colonne { min-width: 0; max-width: 820px; }

@media (min-width: 980px) {
  .dlArticle__grille {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
}

.dlSom__boite { padding: 0; }
.dlSom__titre {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bpMuted);
  margin: 0 0 10px;
  list-style: none;
  cursor: default;
}
.dlSom__boite > summary::-webkit-details-marker { display: none; }
/* Le chevron n'a de sens qu'une fois le sommaire repliable : sur grand écran
   il est toujours ouvert, la flèche serait un bouton qui ne fait rien.
   Ses dimensions sont posées ICI et non dans la media query qui l'affiche :
   un SVG sans width/height n'a pas de taille intrinsèque et s'étire pour
   remplir la ligne flex — il mesurait 1207 px de côté dans le sommaire en
   bande, qui l'affiche à toutes les largeurs. */
.dlSom__chev {
  display: none;
  width: 16px; height: 16px;
  flex: 0 0 16px;
  color: var(--bpMuted);
  transition: transform .2s ease;
}

.dlSom__liste { list-style: none; margin: 0; padding: 0; }
.dlSom__item { margin: 0; }
.dlSom__item a {
  display: block;
  padding: 6px 0;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--bpInk-2);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.dlSom__item--n3 a { font-size: 13.5px; padding-left: 14px; color: var(--bpMuted); }
.dlSom__item a:hover { color: var(--bpInk); }
.dlSom__item a.is-active { color: var(--bpAccent); font-weight: 600; }

@media (min-width: 980px) {
  /* Le sommaire suit la lecture. La réserve inclut le bandeau de rentrée :
     sans lui, la colonne se garerait 44 px trop haut, sous la barre. */
  .dlSom {
    position: sticky;
    top: calc(var(--dlAnnonceH, 0px) + var(--ktNavH, 64px) + 24px);
  }
  .dlSom__boite {
    /* Un sommaire long ne doit pas dépasser l'écran : il défile chez lui. */
    max-height: calc(100vh - var(--dlAnnonceH, 0px) - var(--ktNavH, 64px) - 48px);
    overflow-y: auto;
    border-left: 1px solid var(--bpLine);
    padding-left: 18px;
  }
  .dlSom__item a {
    border-left: 2px solid transparent;
    margin-left: -20px;
    padding-left: 18px;
  }
  .dlSom__item--n3 a { padding-left: 32px; }
  .dlSom__item a.is-active { border-left-color: var(--bpAccent); }
}

@media (max-width: 979.98px) {
  .dlSom {
    /* Débord pleine largeur : la page garde sa gouttière, la barre non. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: sticky;
    top: calc(var(--dlAnnonceH, 0px) + var(--ktNavH, 64px));
    z-index: 20;
    margin-bottom: 16px;
  }
  .dlSom__boite {
    /* C'est une bande, pas une carte : ni bordure ni arrondi. Le fond reste
       opaque, sinon le texte de l'article défile derrière et se mélange aux
       entrées du sommaire. */
    background: var(--bpBg);
    padding: 0;
    position: relative;
  }
  /* Repliée, la barre ne porte pas de filet : un trait net découperait
     l'écran en deux et se lirait comme une bordure de bloc. Un dégradé qui
     s'éteint sous elle donne la même séparation en fondu. Posé en ::after
     et non en box-shadow, qui serait écrêté aux bords de l'écran. */
  .dlSom__boite:not([open])::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 14px;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--bpBg) 0%, rgba(255,255,255,0) 100%);
  }
  .dlSom__boite[open] { box-shadow: 0 16px 26px -18px rgba(0,0,0,.24) !important; }
  .dlSom__boite > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 11px clamp(18px, 5vw, 40px);
    line-height: 1.2;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .dlSom__chev { display: block; }
  .dlSom__boite[open] .dlSom__chev { transform: rotate(180deg); }
  .dlSom__boite > nav {
    /* Une liste longue ne doit pas couvrir tout l'écran : au-delà, elle
       défile dans la barre. */
    padding: 0 clamp(18px, 5vw, 40px) 16px;
    max-height: min(52vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .dlSom__item a { padding: 8px 0; }
}

/* Une ancre cliquée ne doit pas se garer sous le bandeau fixe — ni, sur
   téléphone, derrière la barre de sommaire qui s'y ajoute. */
.dlTexte :where(h2, h3)[id] {
  scroll-margin-top: calc(var(--dlAnnonceH, 0px) + var(--ktNavH, 64px) + 24px);
}
@media (max-width: 979.98px) {
  .dlTexte :where(h2, h3)[id] {
    scroll-margin-top: calc(var(--dlAnnonceH, 0px) + var(--ktNavH, 64px) + 58px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dlSom__chev { transition: none; }
}

/* ==========================================================================
   CORPS ÉDITORIAL — PRÉSENTATION ENRICHIE
   --------------------------------------------------------------------------
   Le corps est du HTML rédigé à la main : on style les balises, pas des
   classes, pour que le rédacteur n'ait rien à retenir. Seul l'encadré
   « note » demande une classe, parce qu'aucune balise HTML ne dit
   « attention, ceci compte plus que le reste ».
   ========================================================================== */

/* --- Puces à chevron --------------------------------------------------- */
/* Chevron dessiné en CSS : pas d'image à charger, et il suit la charte
   sans qu'on ait à produire un fichier par couleur. */
.dlTexte ul { list-style: none; padding-left: 0; }
.dlTexte ul > li {
  position: relative;
  padding-left: 30px;
}
.dlTexte ul > li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: 17px; height: 17px;
  margin-top: -8.5px;
  border-radius: 50%;
  background: var(--bpAccentBg);
}
/* Le chevron est tracé par deux bordures d'une boîte pivotée : son encre est
   en bas à droite, il faut donc la remonter d'un poil moins que la moitié
   pour qu'elle tombe au centre optique de la pastille. */
.dlTexte ul > li::after {
  content: "";
  position: absolute;
  left: 6px; top: .58em;
  width: 5px; height: 8px;
  margin-top: -3px;
  border: solid var(--bpAccent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transform-origin: center;
}
/* Les listes numérotées gardent leurs chiffres : l'ordre y est l'information. */
.dlTexte ol { padding-left: 1.3em; }
.dlTexte ol > li::before,
.dlTexte ol > li::after { content: none; }
.dlTexte ol > li::marker { color: var(--bpAccent); font-weight: 600; }

/* --- Encadré « note » --------------------------------------------------- */
/* À écrire dans le contenu : <div class="note">…</div>, avec un <strong> en
   première ligne pour le titre. L'accent sert de filet et de pastille, jamais
   d'aplat plein : du texte long sur fond orange fatigue à la lecture. */
.dlTexte .note {
  position: relative;
  margin: 28px 0;
  padding: 18px 22px 18px 54px;
  background: var(--bpAccentBg);
  border-left: 3px solid var(--bpAccent);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--bpInk-2);
  font-size: 16px;
  line-height: 1.65;
}
.dlTexte .note::before {
  content: "i";
  position: absolute;
  left: 20px; top: 20px;
  width: 21px; height: 21px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bpAccent);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; line-height: 1;
  font-style: italic;
}
.dlTexte .note > *:first-child { margin-top: 0; }
.dlTexte .note > *:last-child { margin-bottom: 0; }
.dlTexte .note strong { color: var(--bpInk); }
/* Une puce dans une note se détacherait mal sur le fond crème de l'encadré. */
.dlTexte .note ul > li::before { background: rgba(173, 92, 46, .18); }

/* Variante « à retenir » : même boîte, pastille et libellé différents. */
.dlTexte .note--cle::before { content: "★"; font-size: 11px; font-style: normal; }

/* --- Tableaux ----------------------------------------------------------- */
/* Un tableau d'horaires ou de tarifs peut être large : il défile dans sa
   boîte au lieu de faire déborder la page entière sur téléphone. */
.dlTexte table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0;
  font-size: 15.5px;
}
.dlTexte th, .dlTexte td {
  border: 1px solid var(--bpLine);
  padding: 11px 13px;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
}
.dlTexte th {
  background: var(--bpCardSoft);
  font-weight: 600;
  color: var(--bpInk);
  white-space: nowrap;
}
/* En dessous, une phrase en en-tête vaut mieux qu'un défilement horizontal. */
@media (max-width: 560px) { .dlTexte th { white-space: normal; } }
.dlTexte tbody tr:nth-child(even) { background: rgba(74, 67, 64, .025); }

/* --- Citations et légendes ---------------------------------------------- */
.dlTexte blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 20px;
  font-style: normal;
}
.dlTexte figure { margin: 26px 0; }
.dlTexte figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--bpMuted);
}

/* --- Bandeau de méta d'article ------------------------------------------ */
.dlMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--bpMuted);
}
.dlMeta__sep { color: var(--bpLine-2, var(--bpMuted)); }

/* Sur les sections à fond sombre, la note et les tableaux emprunteraient des
   fonds clairs à contresens. Ils y restent lisibles en inversant l'accent. */
.dlSection--sombre .dlTexte .note { background: rgba(255, 255, 255, .07); color: inherit; }
.dlSection--sombre .dlTexte th { background: rgba(255, 255, 255, .09); color: inherit; }

/* --- Sommaire en bande, à toutes les largeurs ---------------------------
   Les pages de contenu SEO empilent des sections pleine largeur au fond
   alterné : il n'y a pas de gouttière où loger une colonne latérale. Le
   sommaire y prend donc la forme d'une barre collée sous l'en-tête, celle
   que les petits écrans utilisent déjà — repliée par défaut, dépliée d'un
   geste. */
.dlSom--bande {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: sticky;
  top: calc(var(--dlAnnonceH, 0px) + var(--ktNavH, 64px));
  z-index: 20;
}
.dlSom--bande .dlSom__boite {
  background: var(--bpBg);
  padding: 0;
  position: relative;
  max-height: none;
  overflow: visible;
  border-left: 0;
  border-bottom: 1px solid var(--bpLine);
}
.dlSom--bande .dlSom__boite[open] { box-shadow: 0 16px 26px -18px rgba(0,0,0,.24) !important; }
.dlSom--bande .dlSom__chev { display: block; }
.dlSom--bande .dlSom__boite > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px clamp(18px, 5vw, 40px);
  max-width: var(--dlLargeur);
  margin-inline: auto;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dlSom--bande .dlSom__boite[open] .dlSom__chev { transform: rotate(180deg); }
.dlSom--bande .dlSom__boite > nav {
  max-width: var(--dlLargeur);
  margin-inline: auto;
  padding: 0 clamp(18px, 5vw, 40px) 18px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Un sommaire de page SEO tient rarement plus de dix entrées : sur grand
   écran elles se rangent en colonnes plutôt que d'étirer la barre sur toute
   la hauteur de l'écran. */
@media (min-width: 720px) {
  .dlSom--bande .dlSom__liste { columns: 2; column-gap: 40px; }
}
@media (min-width: 1080px) {
  .dlSom--bande .dlSom__liste { columns: 3; }
}
.dlSom--bande .dlSom__item { break-inside: avoid; }
.dlSom--bande .dlSom__item a { padding: 7px 0; border-left: 0; margin-left: 0; padding-left: 0; }

/* La cible d'une ancre arrive sous l'en-tête ET sous la barre de sommaire. */
.dlSection[id] {
  scroll-margin-top: calc(var(--dlAnnonceH, 0px) + var(--ktNavH, 64px) + 52px);
}

/* <main> est une colonne flex où le hero est remonté en order:-1 et les
   sections poussées en order:1. La barre de sommaire est un enfant direct de
   main : sans ordre explicite elle hériterait de 0 et se placerait bien entre
   les deux, mais on l'écrit plutôt que de compter dessus. */
main > .dlSom--bande { order: 0; }

/* Le passage des sections à 1400 px a redéclaré « .dlWrap { max-width } »
   APRÈS « .dlWrap--etroit », à spécificité égale : le modificateur étroit ne
   s'appliquait donc plus nulle part. Les blocs de texte gardaient un
   paragraphe à 68 caractères mais un titre et une image sur 1400 px, qui
   flottaient loin au-dessus de la colonne de lecture. On le réaffirme ici,
   après la règle qui l'écrasait. */
.dlWrap--etroit { max-width: 820px; }


/* ==========================================================================
   DOCUMENTS À TÉLÉCHARGER
   --------------------------------------------------------------------------
   Une ligne cliquable plutôt qu'une carte : le document n'est pas une offre à
   comparer, c'est un fichier à prendre. L'intitulé, la saison et le poids
   suffisent à décider.
   ========================================================================== */
.dlDocs { display: grid; gap: 14px; max-width: 860px; margin: 0 auto; }

.dlDoc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--bpLine);
  border-radius: var(--radius);
  background: var(--bpBg);
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease;
}
.dlDoc:hover { border-color: var(--bpAccent); background: var(--bpAccentBg); }

.dlDoc__icone { display: flex; color: var(--bpAccent); }
.dlDoc__icone svg { width: 28px; height: 28px; }

.dlDoc__corps { display: grid; gap: 4px; min-width: 0; }
.dlDoc__titre { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--bpInk); }
.dlDoc__meta {
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bpMuted);
}
.dlDoc__texte { font-size: 15px; line-height: 1.55; color: var(--bpInk-2); }

.dlDoc__action {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--bpAccent);
  white-space: nowrap;
}
.dlDoc__action::after { content: " ↓"; }

.dlDocs__note { max-width: 860px; margin: 24px auto 0; text-align: center; }

/* Sur téléphone, « Télécharger » passerait à la ligne en écrasant le texte :
   l'icône et l'intitulé se suffisent, la ligne entière reste cliquable. */
@media (max-width: 599.98px) {
  .dlDoc { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px 18px; }
  .dlDoc__action { grid-column: 2; justify-self: start; }
  .dlDocs__note { text-align: left; }
}

/* ==========================================================================
   FIL D'ARIANE DANS LA BANNIÈRE
   --------------------------------------------------------------------------
   Sur les pages à bannière, le fil est désormais rendu À L'INTÉRIEUR de
   celle-ci, au-dessus du H1 : c'est là qu'il doit être pour annoncer le
   titre. Il perd donc son fond blanc et son gabarit propre — il vit dans le
   conteneur de la bannière, qui porte déjà la bonne largeur et la réserve
   sous le bandeau de navigation.
   ========================================================================== */
.ktBreadcrumbs--dansHero {
  background: transparent;
  padding: 0 0 18px;
  margin: 0;
  position: static;
}
.ktBreadcrumbs--dansHero .ktBreadcrumbs__wrap {
  max-width: none;
  padding: 0;
  margin: 0;
}
/* Les bannières du site sont sombres — aplat orange brûlé ou photo assombrie.
   Le fil y reprend les valeurs du texte de bannière plutôt que l'encre du
   corps de page, qui y serait illisible. */
.ktBreadcrumbs--dansHero .ktBreadcrumbs__link { color: rgba(255,255,255,.72); }
.ktBreadcrumbs--dansHero .ktBreadcrumbs__link:hover { color: #FFFFFF; }
.ktBreadcrumbs--dansHero .ktBreadcrumbs__sep { color: rgba(255,255,255,.42); }
.ktBreadcrumbs--dansHero .ktBreadcrumbs__current { color: rgba(255,255,255,.92); }

/* La réserve sous le bandeau était calibrée pour une bannière qui commençait
   par son titre. Le fil s'insère au-dessus : sans compensation, il pousserait
   le titre d'autant plus bas. */
.dlHero__wrap:has(.ktBreadcrumbs--dansHero) { padding-top: calc(96px + var(--dlAnnonceH)); }
.dlHero--compact .dlHero__wrap:has(.ktBreadcrumbs--dansHero) { padding-top: calc(86px + var(--dlAnnonceH)); }
.dlHero--rouge .dlHero__wrap:has(.ktBreadcrumbs--dansHero) { padding-top: calc(120px + var(--dlAnnonceH)); }
@media (max-width: 719.98px) {
  .ktBreadcrumbs--dansHero { padding-bottom: 14px; }
}

/* ==========================================================================
   BANNIÈRE INSCRIPTION — FOND VIOLET ET BULLETINS
   ========================================================================== */
.dlHero--violet { background-color: #52396F; }

.dlHero__docs {
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: clamp(24px, 3.5vw, 32px);
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.dlHero__docsTitre {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

/* Dans la bannière, les deux documents se rangent côte à côte : ils sont
   courts — un intitulé et une saison — et empilés ils repousseraient le
   contenu de la page d'un demi-écran. */
.dlDocs--hero {
  max-width: none;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.dlDocs--hero .dlDoc {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .2);
  padding: 16px 18px;
  gap: 14px;
}
.dlDocs--hero .dlDoc:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .45);
}
.dlDocs--hero .dlDoc__icone { color: #FFFFFF; }
.dlDocs--hero .dlDoc__icone svg { width: 24px; height: 24px; }
.dlDocs--hero .dlDoc__titre { color: #FFFFFF; font-size: 16px; }
.dlDocs--hero .dlDoc__meta { color: rgba(255, 255, 255, .6); font-size: 11.5px; }
.dlDocs--hero .dlDoc__action { color: #FFFFFF; font-size: 13.5px; }

/* Sur téléphone, « Télécharger » repasse sous l'intitulé comme ailleurs. */
@media (max-width: 599.98px) {
  .dlDocs--hero .dlDoc { grid-template-columns: auto minmax(0, 1fr); }
  .dlDocs--hero .dlDoc__action { grid-column: 2; justify-self: start; }
}

/* ==========================================================================
   ÉPINGLE « PRIX SPÉCIAL ÉTUDIANT » AU-DESSUS DE LA VIDÉO
   --------------------------------------------------------------------------
   Une bande fine posée sur le bord haut du cadre, dont elle épouse la
   largeur d'angle : coins hauts arrondis, coins bas droits, aucun écart. Elle
   se lit comme une étiquette attachée à la vidéo, pas comme une pastille qui
   flotte devant.
   ========================================================================== */
.dlHero__media--video { position: relative; }

.dlBulle {
  position: absolute;
  z-index: 3;
  /* « bottom: 100% » colle le bas de l'étiquette au haut du cadre : les deux
     se touchent quelle que soit la hauteur de la vidéo. */
  bottom: 100%;
  right: 18px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 2px 2px 0 0;
  background: var(--bpGold);
  color: var(--bpInk);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease;
}
.dlBulle:hover { background: #FFFFFF; }

.dlBulle__titre {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.005em;
}
.dlBulle__texte {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bpAccentDeep);
}
.dlBulle__texte::after { content: " →"; }

/* Sur téléphone, l'étiquette rentre dans le cadre : au-dessus, elle
   chevaucherait le bouton d'appel de la barre de navigation. */
@media (max-width: 979.98px) {
  .dlBulle {
    bottom: auto;
    top: 0;
    right: 0;
    border-radius: 0 0 0 2px;
    padding: 5px 12px;
  }
  .dlBulle__titre { font-size: 12px; }
  .dlBulle__texte { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dlBulle { transition: none; } }

/* ==========================================================================
   BANNIÈRES EN APLAT — VERT, BLEU NUIT, VIOLET
   --------------------------------------------------------------------------
   Ces bannières n'ont pas de photo derrière elles : c'est la couleur qui
   porte le contraste. Elles reprennent donc le traitement de la bannière
   brune — titre et texte clairs, bouton principal orange plein, second
   bouton en lien blanc — et ne changent que leur fond.
   ========================================================================== */
/* Ces aplats sont calés sur la signature de l'orange du site — hsl(22, 58 %,
   43 %) : même famille de saturation moyenne et de clarté moyenne, teintes
   réchauffées d'un cran. Les versions vives d'origine, à 51 % de saturation
   et 26 % de clarté, tranchaient avec la charte chaude. */
.dlHero--vert   { background: #2C6852; }
.dlHero--bleu   { background: #31476D; }
.dlHero--violet { background: #52396F; }

.dlHero--vert, .dlHero--bleu, .dlHero--violet { color: #FFFFFF; }
.dlHero--vert .dlHero__titre,
.dlHero--bleu .dlHero__titre,
.dlHero--violet .dlHero__titre { color: #FFFFFF; }
.dlHero--vert .dlHero__lead, .dlHero--vert .dlHero__meta,
.dlHero--bleu .dlHero__lead, .dlHero--bleu .dlHero__meta,
.dlHero--violet .dlHero__lead, .dlHero--violet .dlHero__meta { color: rgba(255,255,255,.92); }

.dlHero--vert .dlBtn--plein,
.dlHero--bleu .dlBtn--plein,
.dlHero--violet .dlBtn--plein {
  background: var(--bpAccent); color: #fff; border-color: var(--bpAccent);
}
.dlHero--vert .dlBtn--plein:hover,
.dlHero--bleu .dlBtn--plein:hover,
.dlHero--violet .dlBtn--plein:hover {
  background: var(--bpAccentDeep); border-color: var(--bpAccentDeep);
}
.dlHero--vert .dlBtn--contour,
.dlHero--bleu .dlBtn--contour,
.dlHero--violet .dlBtn--contour { color: #fff; border-color: rgba(255,255,255,.55); }

/* ==========================================================================
   SECTION EN APLAT BRUN
   ========================================================================== */
/* Le brun du site est unique : #332927, celui du pied de page et des
   bannières. Cette section utilisait #4A342A, une seconde nuance qui ne se
   justifiait pas et se voyait dès que les deux se suivaient. */
.dlSection--marron { background: #332927; color: #FFFFFF; }
.dlSection--marron .dlSection__titre { color: #FFFFFF; }
.dlSection--marron .dlSection__eyebrow { color: var(--bpGold); }
.dlSection--marron .dlSection__lead { color: rgba(255,255,255,.82); }
.dlSection--marron .dlSection__lead a { color: #FFFFFF; }

/* Les fiches de téléchargement y reprennent le traitement de la bannière :
   fond translucide et filet clair, faute de quoi elles resteraient blanches
   au milieu du brun. */
.dlSection--marron .dlDoc {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.2);
}
.dlSection--marron .dlDoc:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.45);
}
.dlSection--marron .dlDoc__icone,
.dlSection--marron .dlDoc__titre,
.dlSection--marron .dlDoc__action { color: #FFFFFF; }
.dlSection--marron .dlDoc__meta { color: rgba(255,255,255,.6); }
.dlSection--marron .dlDoc__texte { color: rgba(255,255,255,.8); }

/* ==========================================================================
   BOUTON « CONTACTER » — SANS CONTOUR
   --------------------------------------------------------------------------
   Le contour venait d'une correction ancienne : il était posé en
   « currentColor » pour ne jamais diverger de la couleur du texte. Le bouton
   est plein dans tous ses états, le filet ne délimitait donc rien — il
   ajoutait seulement un liseré visible aux angles.
   ========================================================================== */
.ktNav__cta,
.ktNav__cta:hover,
.ktNav__cta:focus-visible { border: 0; }

/* ==========================================================================
   BANNIÈRE D'ARTICLE
   --------------------------------------------------------------------------
   La photo passe en fond pleine largeur ; le fil d'Ariane, le surtitre, le
   titre, le chapô et la date se posent dessus. L'image occupait auparavant
   une colonne à droite du titre — elle y était réduite à une vignette.
   ========================================================================== */
/* Le fil et le titre respiraient mal : 18 px les séparaient, ce qui les
   faisait lire comme un seul bloc. */
.dlHero--article .ktBreadcrumbs--dansHero { padding-bottom: 26px; }
.dlHero--article .dlHero__titre { max-width: 22ch; }
.dlHero--article .dlHero__lead { max-width: 62ch; }

.dlMeta--hero { color: rgba(255,255,255,.72); margin-top: 22px; }
.dlMeta--hero .dlMeta__sep { color: rgba(255,255,255,.4); }

/* Le corps suit directement la bannière : c'est lui qui porte désormais la
   réserve que la section de titre fournissait avant. */
.dlArticle__corps { padding: clamp(40px, 6vw, 68px) 0 clamp(56px, 8vw, 96px); }

/* ==========================================================================
   ENCARTS TARIFS DANS LA BANNIÈRE
   --------------------------------------------------------------------------
   Sur grand écran, trois colonnes comme ailleurs. Sur téléphone, un carrousel
   horizontal : empilées, les trois cartes occupaient trois écrans entiers et
   personne ne voyait la troisième.
   ========================================================================== */
.dlHero__tarifs {
  margin-top: clamp(30px, 4vw, 44px);
  padding-top: clamp(26px, 3.5vw, 34px);
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.dlHero__tarifsTitre {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

/* Les cartes reprennent le traitement translucide de la bannière : blanches,
   elles feraient trois pavés opaques sur l'aplat vert. */
.dlTarifs--hero .dlTarif {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
  color: #FFFFFF;
}
.dlTarifs--hero .dlTarif--phare {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .55);
  border-width: 2px;
}
.dlTarifs--hero .dlTarif__nom,
.dlTarifs--hero .dlTarif__prix { color: #FFFFFF; }
.dlTarifs--hero .dlTarif__unite { color: rgba(255, 255, 255, .68); }
.dlTarifs--hero .dlTarif__liste { color: rgba(255, 255, 255, .86); }
.dlTarifs--hero .dlTarif__liste li::marker { color: rgba(255, 255, 255, .5); }
.dlTarifs--hero .dlBtn--contour { color: #fff; border-color: rgba(255, 255, 255, .55); }
.dlTarifs--hero .dlBtn--contour:hover { background: #fff; color: var(--bpInk); border-color: #fff; }

/* --- Carrousel sur téléphone ------------------------------------------- */
@media (max-width: 767.98px) {
  .dlTarifs--hero {
    display: flex;
    /* Pleine largeur d'écran, avec 24 px de réserve au début et à la fin :
       les cartes glissent jusqu'aux bords pendant le geste au lieu d'être
       coupées par la gouttière de la bannière, mais la première reste alignée
       sur le titre et la dernière ne colle pas au bord.
       Les 24 px sont ceux de la bannière et non « --dlGouttiere », qui vaut
       18 px sous 720 px : c'est cet écart qui décalait la première carte lors
       d'une tentative précédente. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 4px 24px 14px;
    /* Sans cela, une carte amenée par « scroll-snap » se gare sous la réserve
       de gauche au lieu de s'aligner dessus. */
    scroll-padding-inline: 24px;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Le rebond vertical de la page ne doit pas être capté par le carrousel. */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dlTarifs--hero::-webkit-scrollbar { display: none; }
  .dlTarifs--hero .dlTarif {
    scroll-snap-align: start;
    /* 82 % laisse volontairement dépasser le bord de la carte suivante :
       c'est ce qui indique qu'il y en a d'autres, sans point ni flèche. */
    flex: 0 0 82%;
    padding: 24px 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dlTarifs--hero { scroll-behavior: auto; }
}

/* Le bandeau grandit avec le logo : à 58 px dans une barre de 64, il ne
   restait que 3 px de part et d'autre et la marque touchait les bords.
   « --ktNavH » pilote aussi les décalages collants — sommaire, ancres,
   bandeau de rentrée — qui suivent donc sans retouche. */
:root { --ktNavH: 76px; }
@media (max-width: 719.98px) { :root { --ktNavH: 66px; } }

/* ==========================================================================
   BANNIÈRE BLANCHE
   --------------------------------------------------------------------------
   Le seul hero du site sur fond clair : tout ce qui y était calibré pour du
   texte blanc sur aplat sombre doit être repris, sinon il disparaît.
   ========================================================================== */
.dlHero--blanc { background: var(--bpBg); color: var(--bpInk); }
.dlHero--blanc .dlHero__titre { color: var(--bpInk); }
.dlHero--blanc .dlHero__lead,
.dlHero--blanc .dlHero__meta { color: var(--bpInk-2); }

/* Le fil d'Ariane est posé dans la bannière : il y était en blanc translucide,
   invisible sur fond clair. */
.dlHero--blanc .ktBreadcrumbs--dansHero .ktBreadcrumbs__link { color: var(--bpMuted); }
.dlHero--blanc .ktBreadcrumbs--dansHero .ktBreadcrumbs__link:hover { color: var(--bpInk); }
.dlHero--blanc .ktBreadcrumbs--dansHero .ktBreadcrumbs__sep { color: var(--bpLine-2, var(--bpMuted)); }
.dlHero--blanc .ktBreadcrumbs--dansHero .ktBreadcrumbs__current { color: var(--bpInk); }

.dlHero--blanc .dlHero__tarifs { border-top-color: var(--bpLine); }
.dlHero--blanc .dlHero__tarifsTitre { color: var(--bpMuted); }

/* Les encarts reviennent au traitement clair : le fond translucide blanc et
   le texte blanc de la version sombre ne laisseraient rien voir. */
.dlHero--blanc .dlTarifs--hero .dlTarif {
  background: var(--bpCardSoft);
  border-color: var(--bpLine);
  color: var(--bpInk-2);
}
.dlHero--blanc .dlTarifs--hero .dlTarif--phare {
  background: var(--bpAccentBg);
  border-color: var(--bpAccent);
}
.dlHero--blanc .dlTarifs--hero .dlTarif__nom,
.dlHero--blanc .dlTarifs--hero .dlTarif__prix { color: var(--bpInk); }
.dlHero--blanc .dlTarifs--hero .dlTarif__unite { color: var(--bpMuted); }
.dlHero--blanc .dlTarifs--hero .dlTarif__liste { color: var(--bpInk-2); }
.dlHero--blanc .dlTarifs--hero .dlBtn--contour { color: var(--bpAccent); border-color: var(--bpAccent); }
.dlHero--blanc .dlTarifs--hero .dlBtn--contour:hover { background: var(--bpAccent); color: #fff; }

/* Pastille du menu mobile — signale l'entrée à pousser du moment. */
.ktNavMobile__pastille {
  /* Pas de marge gauche : la ligne du menu porte déjà « gap: 14px », les deux
     s'additionnaient et éloignaient la pastille du libellé de 24 px. */
  margin-left: 0;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--bpAccent);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Le libellé de l'entrée est en « flex: 1 1 0 » : il s'étire sur toute la
   ligne et repoussait la pastille contre la flèche, à l'autre bout. On
   l'empêche de grandir sur les seules entrées qui portent une pastille, et
   c'est la pastille qui absorbe l'espace libre — le libellé et elle restent
   ainsi collés à gauche, la flèche à droite. */
.ktNavMobile__link:has(.ktNavMobile__pastille) > span:first-child { flex: 0 1 auto; }
.ktNavMobile__link .ktNavMobile__pastille { margin-right: auto; }

/* ==========================================================================
   BANDEAU — RUBRIQUES À GAUCHE, ACTIONS À DROITE
   --------------------------------------------------------------------------
   « Inscription » et « Contacter » quittent la liste des rubriques pour
   former un groupe d'actions, détaché par une gouttière. Les cinq liens
   étaient auparavant à équidistance, et rien ne distinguait une rubrique
   qu'on parcourt d'une action qu'on déclenche.
   ========================================================================== */
.ktNav__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  /* La gouttière qui sépare les deux groupes : c'est elle que demande
     « du padding à droite du dernier lien ». */
  margin-left: 34px;
}
@media (max-width: 1099.98px) { .ktNav__actions { margin-left: 22px; gap: 14px; } }

/* Le bouton vivait directement dans « .ktNav__right » : il y prenait la
   gouttière de ce conteneur, qui ne s'applique plus à lui. */
.ktNav__actions .ktNav__cta { margin-left: 0; }

/* Sous 980 px la barre passe en menu hamburger : le groupe d'actions
   disparaît avec les rubriques, ses entrées sont dans le panneau mobile. */
@media (max-width: 979.98px) { .ktNav__actions { display: none; } }

/* Sur la bannière blanche des tarifs, les trois encarts passent en brun plein
   et deviennent identiques : plus de carte mise en avant, aucune formule
   n'est présentée comme le choix par défaut. */
.dlHero--blanc .dlTarifs--hero .dlTarif,
.dlHero--blanc .dlTarifs--hero .dlTarif--phare {
  background: #332927;
  border-color: #332927;
  color: rgba(255, 255, 255, .88);
}
.dlHero--blanc .dlTarifs--hero .dlTarif__nom,
.dlHero--blanc .dlTarifs--hero .dlTarif__prix { color: #FFFFFF; }
.dlHero--blanc .dlTarifs--hero .dlTarif__unite { color: rgba(255, 255, 255, .62); }
.dlHero--blanc .dlTarifs--hero .dlTarif__liste { color: rgba(255, 255, 255, .88); }
.dlHero--blanc .dlTarifs--hero .dlBtn--contour { color: #FFFFFF; border-color: rgba(255,255,255,.55); }
.dlHero--blanc .dlTarifs--hero .dlBtn--contour:hover { background: #FFFFFF; color: #332927; border-color: #FFFFFF; }

/* Le fil d'Ariane gris sur fond blanc ne donnait que 4,2:1 — sous le seuil
   de lisibilité pour du texte de cette taille. */
.dlHero--blanc .ktBreadcrumbs--dansHero .ktBreadcrumbs__link { color: #6B605B; }

/* Le bloc de téléchargement était plafonné à 860 px et centré : il démarrait
   270 px à droite du reste de la page. Il prend la boîte commune. */
.dlDocs, .dlDocs__note { max-width: none; margin-left: 0; margin-right: 0; }
.dlDocs__note { margin-top: 24px; }

/* ==========================================================================
   PAGE SOS GRÈVE
   ========================================================================== */
.dlHero--sos { background: #21664D; }
.dlHero--sos, .dlHero--sos .dlHero__titre { color: #FFFFFF; }
.dlHero--sos .dlHero__lead { color: rgba(255, 255, 255, .92); }
.dlHero--sos .dlBtn--plein { background: var(--bpAccent); color: #fff; border-color: var(--bpAccent); }
.dlHero--sos .dlBtn--plein:hover { background: var(--bpAccentDeep); border-color: var(--bpAccentDeep); }
.dlHero--sos .dlBtn--contour { color: #fff; border-color: rgba(255, 255, 255, .55); }

/* « SOS » est le signal de la page : jaune sur le vert, en 12,6:1 de
   contraste. La couleur seule ne porte pas l'information — le mot la dit
   déjà — elle ne fait que le rendre repérable au premier coup d'œil. */
.dlSos {
  color: #FFD400;
  font-weight: 800;
  letter-spacing: .01em;
}

/* ==========================================================================
   MOTIF LÉOPARD SUR L'APPEL À L'ACTION
   --------------------------------------------------------------------------
   Le motif est posé en calque au-dessus de l'aplat orange, en fusion
   « multiply » : ses taches noires deviennent un orange profond au lieu de
   recouvrir la section de noir, et le texte blanc reste lisible.
   Il est décoratif — d'où le pseudo-élément plutôt qu'une balise <img>, qu'un
   lecteur d'écran devrait annoncer.
   ========================================================================== */
.dlCta {
  position: relative;
  /* Sans « isolate », la fusion prendrait pour fond ce qui se trouve derrière
     la section entière, et non l'aplat orange de la section. */
  isolation: isolate;
}
.dlCta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: image-set(url('../img/motif-leopard.webp') type('image/webp'),
                              url('../img/motif-leopard.png')  type('image/png'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  opacity: .42;
  pointer-events: none;
}
.dlCta__wrap { position: relative; z-index: 1; }

/* Le motif n'apporte rien en contraste élevé et ajoute du bruit derrière le
   texte : on le retire pour ceux qui l'ont demandé. */
@media (prefers-contrast: more) {
  .dlCta::before { display: none; }
}

/* ==========================================================================
   MOTIF LÉOPARD CLAIR — UNE SECTION BLANCHE PAR PAGE
   --------------------------------------------------------------------------
   Le motif ne teinte que d'un ou deux pour cent : c'est une texture, pas un
   décor. Il est posé sur la PREMIÈRE section à fond blanc de la page, et sur
   elle seule — répété partout, il cesserait d'être remarquable et brouillerait
   l'alternance blanc / gris qui rythme les pages.

   La sélection se fait sans classe à poser dans les gabarits : la règle vise
   toutes les sections blanches, puis la seconde règle l'annule sur toute
   section blanche PRÉCÉDÉE d'une autre. Seule la première survit.
   ========================================================================== */
section.dlSection:not(.dlSection--gris):not(.dlSection--marron):not(.dlSection--sombre) {
  position: relative;
  isolation: isolate;
}
section.dlSection:not(.dlSection--gris):not(.dlSection--marron):not(.dlSection--sombre)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: image-set(url('../img/motif-leopard-clair.webp') type('image/webp'),
                              url('../img/motif-leopard-clair.png')  type('image/png'));
  /* Comme sur les bannières : l'image entière tient dans la largeur de la
     section, aucune tache n'est coupée sur les côtés. Elle ne se répète que
     vers le bas, pour les sections plus hautes que le motif. */
  background-size: 100% auto;
  background-position: center top;
  background-repeat: repeat-y;
  pointer-events: none;
}
section.dlSection:not(.dlSection--gris):not(.dlSection--marron):not(.dlSection--sombre)
  ~ section.dlSection:not(.dlSection--gris):not(.dlSection--marron):not(.dlSection--sombre)::before {
  content: none;
}

/* Le bouton du menu mobile ouvert passe en orange : noir, il reprenait la
   couleur du texte des entrées juste au-dessus et ne se lisait plus comme
   l'action principale du panneau. */
.ktNavMobile__cta {
  background: var(--bpAccent) !important;
  color: #FFFFFF !important;
  border-color: var(--bpAccent) !important;
}
.ktNavMobile__cta:hover {
  background: var(--bpAccentDeep) !important;
  border-color: var(--bpAccentDeep) !important;
}

/* ==========================================================================
   NOTE GOOGLE EN ÉTOILES
   --------------------------------------------------------------------------
   Cinq étoiles grises, recouvertes d'un calque doré dont la largeur porte la
   note. Le remplissage partiel est obtenu par un masque SVG répété : c'est ce
   qui permet d'afficher 4,8 sans arrondir à 5.
   ========================================================================== */
.dlAvisNote {
  display: flex;
  align-items: center;
  gap: 10px;
  /* La note collait aux boutons juste en dessous : elle se lisait comme leur
     étiquette plutôt que comme la suite du descriptif. */
  margin: 18px 0 28px;
  font-size: 14.5px;
  line-height: 1.3;
}
.dlAvisNote__etoiles {
  position: relative;
  display: block;
  width: 92px;
  height: 17px;
  flex: 0 0 92px;
  /* Le masque découpe cinq étoiles dans un aplat : la barre de remplissage
     n'a plus qu'à être un rectangle, sa largeur suffit à noter au dixième. */
  -webkit-mask-image: var(--dlEtoile);
          mask-image: var(--dlEtoile);
  -webkit-mask-size: 18.4px 17px;
          mask-size: 18.4px 17px;
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  background: rgba(255, 255, 255, .28);
}
.dlAvisNote__pleines {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: #FFC107;
}
.dlAvisNote__texte { color: rgba(255, 255, 255, .88); }
.dlAvisNote__texte b { font-weight: 700; color: #FFFFFF; }

:root {
  --dlEtoile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0l2.6 6.1 6.6.5-5 4.3 1.5 6.5L10 14l-5.7 3.4 1.5-6.5-5-4.3 6.6-.5z'/%3E%3C/svg%3E");
}

/* Hors bannière sombre — pied de page, sections claires — les gris s'inversent. */
.dlAvisNote--clair .dlAvisNote__etoiles { background: rgba(74, 67, 64, .22); }
.dlAvisNote--clair .dlAvisNote__texte { color: var(--bpInk-2); }
.dlAvisNote--clair .dlAvisNote__texte b { color: var(--bpInk); }

@media (max-width: 719.98px) {
  .dlAvisNote { font-size: 13.5px; gap: 8px; }
}

/* ==========================================================================
   FLÈCHES — UNE ICÔNE, PLUS UN CARACTÈRE
   --------------------------------------------------------------------------
   « → » est un caractère : sa forme, son épaisseur et son alignement vertical
   dépendent de la police installée, et il tombait trop haut sur certaines
   plateformes. L'icône est dessinée en SVG et posée en masque, ce qui lui
   fait reprendre la couleur du texte partout — y compris sur les aplats
   sombres où la teinte change.
   ========================================================================== */
:root {
  --dlFlecheD: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
  --dlFlecheB: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m6 13 6 6 6-6'/%3E%3C/svg%3E");
}

.dlFleche,
.dlBtn--contour::after,
.dlAge__voir::after,
.dlBulle__texte::after,
.dlDoc__action::after {
  content: '';
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  /* La flèche s'aligne sur la ligne de base du texte plutôt que sur sa boîte :
     centrée, elle flottait au-dessus des minuscules. */
  vertical-align: -0.18em;
  background-color: currentColor;
  -webkit-mask: var(--dlFlecheD) no-repeat center / contain;
          mask: var(--dlFlecheD) no-repeat center / contain;
}
.dlBtn--contour::after,
.dlBulle__texte::after { margin-left: 6px; }
.dlAge__voir::after { margin-left: 4px; }

/* Le téléchargement garde une flèche vers le bas : c'est ce qu'elle annonce. */
.dlDoc__action::after {
  margin-left: 6px;
  -webkit-mask-image: var(--dlFlecheB);
          mask-image: var(--dlFlecheB);
}

/* ==========================================================================
   PLUS AUCUN LIEN SOULIGNÉ
   --------------------------------------------------------------------------
   Les liens dans le corps du texte perdent leur trait mais gardent un second
   repère : la graisse. Sans lui, ils ne se distingueraient plus que par la
   couleur — illisible pour qui ne perçoit pas la nuance orange sur brun.
   Le soulignement reste au survol et au focus clavier, où il ne coûte rien.
   ========================================================================== */
a { text-decoration: none; }

.dlTexte a,
.dlCarte__texte a,
.dlSection__lead a,
.dlHero__lead a {
  font-weight: 600;
  text-decoration: none;
}
.dlTexte a:hover,
.dlTexte a:focus-visible,
.dlCarte__texte a:hover,
.dlSection__lead a:hover,
.dlHero__lead a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Le bouton secondaire n'est plus qu'un intitulé suivi d'une flèche. */
.dlBtn--contour,
.dlBtn--contour:hover { text-decoration: none !important; }

/* Le pied de page et le bandeau d'annonce ne soulignent plus au survol. */
.ktFoot__legal a:hover,
.ktFoot__adresse a:hover,
.dlAnnonce__lien:hover .dlAnnonce__texte { text-decoration: none; }

/* L'entrée active du menu était marquée par un soulignement : elle passe en
   gras, seul repère non coloré qui reste à disposition. */
.ktNav__link.is-active,
.ktNav__menuTrigger.is-active { text-decoration: none !important; font-weight: 700; }

/* Le focus clavier garde un contour visible : ce n'est pas une décoration. */
a:focus-visible, button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* La pastille du menu mobile passe en rose-rouge vif. */
.ktNavMobile__pastille { background: #E8174B; }

/* ==========================================================================
   PIED DE PAGE — COLONNES REPLIABLES
   --------------------------------------------------------------------------
   koatcher.css repliait les colonnes sur téléphone par « max-height: 0 » et
   n'attendait qu'une classe « is-open » posée en JavaScript. Ni le bouton ni
   le script n'existaient : les liens étaient donc masqués en permanence, et
   rien ne les ouvrait. On neutralise ce mécanisme — ce sont désormais des
   <details>, qui fonctionnent même sans JavaScript.
   ========================================================================== */
.ktFoot__colLinks {
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 0;
}

.ktFoot__col--pliable > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: default;
}
.ktFoot__col--pliable > summary::-webkit-details-marker { display: none; }

/* Le chevron n'a de sens qu'une fois la colonne repliable : sur grand écran
   elle est toujours ouverte, la flèche serait un bouton qui ne fait rien. */
.ktFoot__colChev {
  display: none;
  width: 16px; height: 16px;
  flex: 0 0 16px;
  opacity: .7;
  transition: transform .2s ease;
}

@media (max-width: 719.98px) {
  .ktFoot__col--pliable > summary {
    cursor: pointer;
    /* Cible tactile confortable, sans creuser le pied de page. */
    padding: 15px 0;
    -webkit-tap-highlight-color: transparent;
  }
  .ktFoot__colChev { display: block; }
  .ktFoot__col--pliable[open] .ktFoot__colChev { transform: rotate(180deg); }
  .ktFoot__col--pliable[open] > .ktFoot__colLinks { padding-bottom: 14px; }

  /* Le filet du haut fermait le pied de page d'un trait juste sous l'appel à
     l'action : les deux se touchaient et cela se lisait comme une coupure. */
  .ktFoot__col:first-child,
  .ktFoot__col--pliable:first-of-type { border-top: 0 !important; }
}

@media (prefers-reduced-motion: reduce) { .ktFoot__colChev { transition: none; } }

/* ==========================================================================
   MOTIF LÉOPARD SUR LES BANNIÈRES BRUNES
   --------------------------------------------------------------------------
   L'image est utilisée telle quelle : elle est déjà finie, avec son fond
   #332927 et ses taches #39302E. Les versions précédentes passaient par un
   masque et une couleur de tache posée en CSS, parce que le fichier d'alors
   était un motif translucide inexploitable directement — ce n'est plus le
   cas, et le rendu ne dépend donc plus d'aucun réglage de ma part.

   La couleur de fond est répétée sous l'image : si elle tarde à charger, la
   bannière est déjà du bon brun plutôt que transparente.
   ========================================================================== */
.dlHero--motif {
  background-color: #332927;
  background-image: image-set(url('../img/motif-hero.webp') type('image/webp'),
                              url('../img/motif-hero.png')  type('image/png'));
  /* L'image entière tient dans la largeur de la section : aucune tache n'est
     coupée sur les côtés. Elle se répète seulement vers le bas, pour les
     bannières plus hautes que le motif. En tuile de largeur fixe, le motif
     était tranché au bord droit de l'écran. */
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: center top;
}

/* Sur les encarts bruns des tarifs, le bouton passe en blanc plein : en
   contour clair sur le brun, il se lisait comme un simple lien alors que
   c'est l'action de la carte. */
.dlHero--blanc .dlTarifs--hero .dlBtn--contour {
  background: #FFFFFF !important;
  color: #332927 !important;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  text-align: center;
}
.dlHero--blanc .dlTarifs--hero .dlBtn--contour:hover {
  background: var(--bpGold) !important;
  color: #332927 !important;
}
/* La flèche n'a plus lieu d'être : le bouton est plein, pas un lien. */
.dlHero--blanc .dlTarifs--hero .dlBtn--contour::after { content: none; }

/* ==========================================================================
   FIL D'ARIANE — ALIGNEMENT ET RÉSERVE SUR TÉLÉPHONE
   ========================================================================== */
/* La liste portait un retrait de 24 px hérité du style de liste : ses entrées
   démarraient donc à 48 px quand le titre juste en dessous démarre à 24. Le
   fil paraissait décalé vers la droite sur toutes les pages. */
.ktBreadcrumbs__list { padding-left: 0; margin-left: 0; }
/* Le retrait retiré ci-dessus servait aussi de gouttière aux pages SANS
   bannière, où le conteneur du fil n'en a pas : il repart désormais de la
   gouttière du site, la même que le titre juste en dessous. */
.ktBreadcrumbs:not(.ktBreadcrumbs--dansHero) .ktBreadcrumbs__wrap {
  max-width: calc(var(--dlLargeur) + 2 * var(--dlGouttiere));
  margin-inline: auto;
  padding-left: var(--dlGouttiere);
  padding-right: var(--dlGouttiere);
}
/* Le conteneur parent portait sa propre gouttière, qui s'ajoutait à celle-ci
   et poussait le fil 32 px à droite du titre sur grand écran. */
.ktBreadcrumbs:not(.ktBreadcrumbs--dansHero) { padding-left: 0; padding-right: 0; }

@media (max-width: 719.98px) {
  /* La réserve sous la barre était calibrée pour le bureau : 160 px sur
     téléphone, soit 143 px de vide entre la barre et le fil. La barre y fait
     66 px, le bandeau 40 : 118 px suffisent, et le titre remonte d'autant. */
  .dlHero__wrap:has(.ktBreadcrumbs--dansHero),
  .dlHero--compact .dlHero__wrap:has(.ktBreadcrumbs--dansHero),
  .dlHero--rouge .dlHero__wrap:has(.ktBreadcrumbs--dansHero) {
    padding-top: calc(78px + var(--dlAnnonceH));
  }
}

/* ==========================================================================
   PLUS DE CARTE POSÉE SUR UNE SECTION
   --------------------------------------------------------------------------
   Une carte blanche sur une section grise — ou l'inverse — empilait deux
   fonds sans rien séparer que la section ne séparait déjà. Le contenu repose
   désormais directement sur le fond de sa section, partout sur le site.

   Ce qui distingue encore une carte d'une autre : l'écart de la grille, et
   le titre. Une carte cliquable garde un repère au survol — la couleur de son
   titre — puisqu'elle n'a plus de cadre à faire réagir.
   ========================================================================== */
.dlCarte,
.dlSection--gris .dlCarte {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  padding: 0;
}
a.dlCarte:hover { transform: none; }
a.dlCarte:hover .dlCarte__titre { color: var(--bpAccent); }
.dlSection--sombre a.dlCarte:hover .dlCarte__titre,
.dlSection--marron a.dlCarte:hover .dlCarte__titre { color: var(--bpGold); }

/* Sans cadre, deux cartes voisines se touchaient presque : la grille reprend
   l'espace que le rembourrage des cartes fournissait. */
.dlCartes { gap: 34px 40px; }
@media (max-width: 719.98px) { .dlCartes { gap: 30px; } }

/* Page de contact : aucun motif en fond de section.
   « !important » est nécessaire : la règle qui pose le motif enchaîne trois
   « :not() » et pèse plus lourd que ce sélecteur de page. */
.page-contact section.dlSection::before { content: none !important; }

/* ==========================================================================
   PAGE SOS GRÈVE — ÉTIQUETTES AUTOUR DU TITRE
   --------------------------------------------------------------------------
   Les contrariétés d'un jour de grève, éparpillées derrière le titre. Elles
   passent DERRIÈRE lui : le titre reste le premier élément lu, et aucune
   étiquette ne peut le rendre illisible quelle que soit la largeur.
   Décor uniquement — le balisage est masqué aux lecteurs d'écran.
   ========================================================================== */
.dlHero__wrap { position: relative; }

.dlHeroDeco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Tout le contenu de la bannière passe DEVANT les étiquettes : aucune ne
   peut recouvrir un mot, quelle que soit la largeur de l'écran. */
.dlHero__titre,
.dlHero__lead,
.dlHero__meta,
.dlHero__actions,
.dlHero__texte,
.dlHero__docs,
.dlHero__tarifs,
.dlHero__media--video,
.ktBreadcrumbs--dansHero { position: relative; z-index: 1; }

.dlEtiq {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: rotate(var(--r)) translateZ(0);
  padding: 7px 14px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  /* Assez présentes pour se voir, assez discrètes pour ne pas concurrencer
     le titre posé par-dessus. */
  opacity: .88;
}
.dlEtiq--jaune  { background: #FFD400; color: #21664D; }
.dlEtiq--orange { background: #AD5C2E; color: #FFFFFF; }
.dlEtiq--vert   { background: #9BD9A8; color: #1B4D3A; }

/* Sur téléphone, la bannière est étroite : trois étiquettes suffisent, les
   deux autres se chevaucheraient et brouilleraient le titre. */
@media (max-width: 767.98px) {
  .dlEtiq { font-size: 12.5px; padding: 5px 10px; }
  .dlEtiq:nth-child(2),
  .dlEtiq:nth-child(4) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dlEtiq { transform: none; } }

/* ==========================================================================
   HAUTEUR DES BANNIÈRES SUR TÉLÉPHONE — EN PIXELS, PAS EN VH
   --------------------------------------------------------------------------
   « vh » se mesure sur la hauteur de la fenêtre. Sur téléphone, celle-ci
   change quand la barre d'adresse du navigateur se rétracte au défilement :
   la bannière se redimensionne alors en pleine lecture et tout ce qui suit
   se décale d'autant.
   Les valeurs en pixels sont volontairement inférieures aux hauteurs
   observées — de 420 à 940 px selon les pages — donc rien ne change à
   l'écran : la hauteur reste dictée par le contenu, elle ne dépend
   simplement plus de la fenêtre.
   ========================================================================== */
@media (max-width: 719.98px) {
  .dlHero { min-height: 420px; }
  .dlHero--compact { min-height: 320px; }
  main { min-height: 300px; }
}

/* ==========================================================================
   BOUTON DE BANNIÈRE — SECOUSSE D'URGENCE
   --------------------------------------------------------------------------
   Une secousse brève toutes les six secondes, pas un tremblement continu :
   un élément qui bouge en permanence attire l'œil pendant toute la lecture et
   devient pénible bien avant d'être persuasif. Le mouvement s'arrête net
   pendant le survol et le focus — on ne fait pas bouger une cible qu'on
   s'apprête à cliquer.
   ========================================================================== */
/* Secousse continue. L'amplitude est volontairement faible — 1,5 px et un
   demi-degré : à cette échelle le bouton vibre sans jamais devenir flou, et
   le texte reste lisible pendant tout le mouvement. Une amplitude plus large
   en boucle permanente donne le mal de mer avant de convaincre. */
@keyframes dlSecousse {
  0%, 100% { transform: translate3d(-1.5px, 0, 0) rotate(-.45deg); }
  25%      { transform: translate3d(1.5px, 0, 0) rotate(.45deg); }
  50%      { transform: translate3d(-1.2px, 0, 0) rotate(-.3deg); }
  75%      { transform: translate3d(1.2px, 0, 0) rotate(.3deg); }
}
.dlHero--sos .dlHero__actions .dlBtn--plein {
  animation: dlSecousse .42s ease-in-out infinite;
  /* Le bouton porte déjà une transition de couleur : l'animation s'applique
     sur « transform » seul, sans les concurrencer. */
  will-change: transform;
}
.dlHero--sos .dlHero__actions .dlBtn--plein:hover,
.dlHero--sos .dlHero__actions .dlBtn--plein:focus-visible { animation-play-state: paused; }

/* Une secousse répétée est exactement ce que « prefers-reduced-motion »
   demande de supprimer : troubles vestibulaires, migraines. */
@media (prefers-reduced-motion: reduce) {
  .dlHero--sos .dlHero__actions .dlBtn--plein { animation: none; }
}

/* Les étiquettes n'apparaissent que là où il y a réellement de la place.
   En dessous de 980 px la bannière est sur une seule colonne : le texte
   occupe toute la largeur et aucune position ne peut l'éviter.
   Sur l'accueil, la moitié droite est prise par la vidéo. */
@media (max-width: 979.98px) { .dlHeroDeco { display: none; } }
.dlHero--duo .dlHeroDeco { display: none; }

/* Étiquettes dans une section de contenu : même traitement que dans la
   bannière, posées derrière le texte, jamais devant. */
.dlSection { position: relative; }
.dlHeroDeco--section { z-index: 0; }
.dlSection > .dlWrap { position: relative; z-index: 1; }
/* En dessous de 980 px, le titre d'une section occupe toute la largeur :
   plus de colonne libre à droite. */
@media (max-width: 979.98px) { .dlHeroDeco--section { display: none; } }

/* ==========================================================================
   CARTES PAR TRANCHE D'ÂGE — IMAGE AU-DESSUS, BLOC BLANC EN DESSOUS
   --------------------------------------------------------------------------
   L'image occupait tout l'encart, avec le texte posé dessus en blanc sur un
   voile sombre. Elle passe au-dessus, en bandeau, et le texte descend dans un
   bloc blanc où il se lit en noir : la pastille d'âge annonce le titre au
   lieu de le surmonter en surimpression.
   ========================================================================== */
.dlAge {
  background: #FFFFFF;
  color: var(--bpInk);
  min-height: 0;
}
.dlAge__media {
  position: static;
  inset: auto;
  z-index: auto;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.dlAge__media img { object-position: center 35%; }
/* Le voile sombre servait à faire tenir du texte blanc sur la photo : il n'y
   a plus de texte dessus. */
.dlAge__media::after { content: none; }

.dlAge__corps {
  margin-top: 0;
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.dlAge__age { background: var(--bpAccent); color: #FFFFFF; margin-bottom: 12px; }
.dlAge__titre { color: var(--bpInk); }
.dlAge__sous { color: var(--bpInk-2); }
.dlAge__voir { color: var(--bpAccent); }
.dlAge:hover .dlAge__titre { color: var(--bpAccent); }

/* Menu mobile : « SOS grève » se repère à sa couleur, et sa pastille reprend
   le brun du site plutôt que le rose vif de l'inscription — deux pastilles
   de la même teinte se seraient concurrencées. */
.ktNavMobile__link--vert > span:first-child { color: #1B7A55; }
.ktNavMobile__pastille--marron { background: #332927; color: #FFFFFF; }

/* ==========================================================================
   AVIS — REPLIABLES SUR TÉLÉPHONE
   ========================================================================== */
.dlAvis__tete {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  cursor: default;
}
.dlAvis__carte > summary::-webkit-details-marker { display: none; }
.dlAvis__tete .dlAvis__nom { font-weight: 600; }
.dlAvis__tete .dlAvis__etoiles { margin-left: auto; font-size: 13px; letter-spacing: 1px; }
.dlAvis__chev { display: none; width: 16px; height: 16px; flex: 0 0 16px; opacity: .6; transition: transform .2s ease; }
.dlAvis__texte { margin: 12px 0 0; }
.dlAvis__source { margin-top: 10px; }

@media (max-width: 719.98px) {
  /* Les accordéons sont espacés et posés chacun dans son cadre : collés les
     uns aux autres par un simple filet, on ne voyait plus où l'un finissait
     et où le suivant commençait une fois l'un d'eux ouvert. */
  .dlAvis { gap: 10px; }
  .dlAvis__carte {
    border: 1px solid var(--bpLine) !important;
    border-radius: 12px;
    padding: 0 16px;
    /* Chaque bloc grandit vers le bas : la grille lui donne sa propre rangée,
       ouvrir le deuxième pousse le troisième, jamais l'inverse. */
    align-self: start;
  }
  /* 44 px d'en-tête au lieu de 65 : la ligne ne porte qu'un nom et cinq
     étoiles, elle n'a pas besoin de la hauteur d'une carte. */
  .dlAvis__tete {
    cursor: pointer;
    padding: 10px 0;
    -webkit-tap-highlight-color: transparent;
  }
  /* Les étoiles portaient une marge basse de 12 px, prévue pour la version
     en carte où elles surmontaient la citation. Dans la ligne d'en-tête,
     cette marge ne séparait plus rien et gonflait la barre d'autant. */
  .dlAvis__tete .dlAvis__etoiles { margin-bottom: 0; }
  .dlAvis__tete .dlAvis__nom { margin-top: 0; }
  .dlAvis__chev { display: block; }
  .dlAvis__carte[open] .dlAvis__chev { transform: rotate(180deg); }
  .dlAvis__texte { margin-top: 2px; }
  .dlAvis__carte[open] .dlAvis__source { padding-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .dlAvis__chev { transition: none; } }

/* ==========================================================================
   SOUS-MENU MOBILE — PASTILLES D'ÂGE
   --------------------------------------------------------------------------
   Six teintes distinctes, toutes tenues au-dessus de 4,5:1 avec leur texte :
   la couleur aide à repérer la ligne, elle ne porte jamais l'information —
   l'âge est écrit dedans.
   ========================================================================== */
.ktNavMobile__age {
  /* Collée au libellé, pas rejetée au bout de la ligne : c'est une précision
     sur le cours, elle se lit dans la foulée du nom. C'est la pastille qui
     absorbe l'espace libre, la flèche reste à droite. */
  margin-left: 0;
  margin-right: auto;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  color: #FFFFFF;
}
.ktNavMobile__age--0 { background: #AD5C2E; }  /* brûlé   */
.ktNavMobile__age--1 { background: #216650; }  /* vert    */
.ktNavMobile__age--2 { background: #31476D; }  /* bleu    */
.ktNavMobile__age--3 { background: #52396F; }  /* violet  */
.ktNavMobile__age--4 { background: #8A4A24; }  /* brun    */
.ktNavMobile__age--5 { background: #B4335A; }  /* framboise */

/* Le libellé ne s'étire plus : sans cela il pousserait la pastille contre la
   flèche, à l'autre bout de la ligne. */
.ktNavMobile__link:has(.ktNavMobile__age) > span:first-child { flex: 0 1 auto; }

/* Un article sans sommaire n'a qu'une colonne : la grille réservait malgré
   tout les 250 px du sommaire, et le texte tombait dedans. */
@media (min-width: 980px) {
  .dlArticle__grille--seule { grid-template-columns: minmax(0, 1fr); }
}

/* Sur la page SOS grève, le titre de la FAQ s'aligne à gauche comme le reste
   de la page : centré, il flottait au-dessus d'une liste de questions toutes
   alignées à gauche. */
.page-sos #faq .dlSection__head--centre { text-align: left; margin-left: 0; }