/**
 * Page « Cours enfants ».
 *
 * Cette page porte sa propre palette — papier chaud plutôt que blanc, terre
 * plutôt que bleu ciel — et ses propres polices. C'est une direction visuelle
 * distincte du reste du site, validée en maquette. Les variables sont donc
 * définies localement, sur .ce, et ne fuient pas vers les autres pages.
 */

.ce {
  --ce-encre: #1C1B35;
  --ce-encre-2: #4A4655;
  --ce-or: #F3D33C;
  --ce-papier: #FBF8F3;
  --ce-papier-2: #F3ECE2;
  --ce-sable: #E7D8C6;
  --ce-terre: #8C5F42;
  --ce-terre-fonce: #6E4529;
  --ce-trait: #E2D6C6;
  --ce-rouge: #B00000;

  --ce-titre: "Lora", Georgia, serif;
  --ce-texte: "Karla", system-ui, -apple-system, sans-serif;

  /* Une seule durée et une seule courbe dans toute la page. */
  --ce-transition: 180ms cubic-bezier(0.2, 0.6, 0.3, 1);

  background: var(--ce-papier);
  color: #2B2733;
  font-family: var(--ce-texte);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

.ce :where(h1, h2, h3) {
  font-family: var(--ce-titre);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ce-encre);
  margin: 0;
  text-wrap: balance;
}

.ce :where(p) { margin: 0; }
.ce :where(img) { display: block; max-width: 100%; }

/* `:where(.ce)` ne compte pour rien dans le calcul de spécificité : cette
   règle reste donc au niveau d'un simple sélecteur d'élément, et n'importe
   quelle classe de bouton la recouvre sans avoir à surenchérir. Écrite
   « .ce a », elle repeignait le texte des boutons en encre sur fond encre. */
:where(.ce) a { color: var(--ce-encre); text-decoration: none; transition: color var(--ce-transition); }
:where(.ce) a:hover { color: var(--ce-terre); }

.ce :where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--ce-or);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Ossature ---------- */

.ce-large {
  width: min(100%, 1320px);
  margin-inline: auto;
  padding-inline: 26px;
}

.ce-section { padding-block: clamp(40px, 5vw, 76px); }
.ce-section--sombre { background: var(--ce-encre); color: var(--ce-papier); }
.ce-section--douce { background: var(--ce-papier-2); border-block: 1px solid var(--ce-trait); }

.ce-section--sombre :where(h2, h3) { color: var(--ce-papier); }

/* Surtitre : un filet court, puis un libellé en capitales espacées. */
.ce-surtitre {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ce-terre);
  margin-bottom: 18px;
}
.ce-surtitre::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--ce-terre);
  flex: none;
}
.ce-section--sombre .ce-surtitre { color: var(--ce-or); }
.ce-section--sombre .ce-surtitre::before { background: var(--ce-or); }

/* ---------- Grilles ---------- */

.ce-duo { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.ce-duo--egal { grid-template-columns: 1fr 1fr; }
.ce-duo--inverse { grid-template-columns: 0.8fr 1.2fr; align-items: start; }
.ce-quatre { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--ce-trait); border: 1px solid var(--ce-trait); border-radius: 10px; overflow: hidden; }
.ce-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ce-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }

/* ---------- Bandeau ---------- */

.ce-hero { padding-block: clamp(30px, 3.5vw, 56px) clamp(24px, 3vw, 40px); }

.ce-hero h1 {
  font-size: clamp(38px, 5vw, 62px);
  margin-bottom: 20px;
}

.ce-hero__intro {
  font-size: 18px;
  color: var(--ce-encre-2);
  max-width: 52ch;
  margin-bottom: 26px;
}

.ce-hero__media { position: relative; border-radius: 14px; overflow: hidden; background: var(--ce-sable); aspect-ratio: 4 / 3; }
.ce-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.ce-hero__etiquette {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--ce-encre);
  color: var(--ce-papier);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: 999px;
}

/* Repères pratiques du bandeau : pastilles à icône. */
/* La marge haute manquait : elle était compensée par accident par la marge
   que la base ajoutait entre éléments de liste. Une fois celle-ci retirée, les
   jetons collaient au bouton. La valeur est celle de la maquette. */
.ce-jetons {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ce-jeton {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--ce-papier-2);
  border: 1px solid var(--ce-trait);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14px;
  color: var(--ce-encre-2);
}
.ce-jeton i { color: var(--ce-terre); font-size: 13px; }

/* ---------- Sélecteur d'âge ---------- */

.ce-bascule {
  background: var(--ce-papier-2);
  border-block: 1px solid var(--ce-trait);
}
.ce-bascule__interieur {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-block: 14px;
}
.ce-bascule__intitule {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ce-encre-2);
}
.ce-bascule__groupe {
  display: inline-flex;
  gap: 4px;
  background: var(--ce-papier);
  border: 1px solid var(--ce-trait);
  border-radius: 999px;
  padding: 4px;
}
.ce-bascule__bouton {
  min-height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ce-encre-2);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--ce-transition), color var(--ce-transition);
}
.ce-bascule__bouton[aria-selected="true"] {
  background: var(--ce-encre);
  color: var(--ce-papier);
}
.ce-bascule__legende { font-size: 14px; color: var(--ce-encre-2); }

/* ---------- Repères en quatre colonnes ---------- */

.ce-repere { background: var(--ce-papier); padding: 22px 24px; }
.ce-repere__titre {
  font-family: var(--ce-texte);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ce-terre);
  margin-bottom: 8px;
}
.ce-repere__valeur { font-family: var(--ce-titre); font-size: 21px; color: var(--ce-encre); margin-bottom: 6px; }
.ce-repere__detail { font-size: 14px; color: var(--ce-encre-2); }

/* ---------- Programme ---------- */

.ce-programme h2 { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 18px; }
.ce-programme__intro { color: var(--ce-encre-2); margin-bottom: 16px; }
.ce-programme__accroche {
  font-family: var(--ce-titre);
  font-style: italic;
  font-size: 19px;
  color: var(--ce-terre-fonce);
  margin-bottom: 26px;
}

.ce-pdf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-encre);
  border-bottom: 2px solid var(--ce-or);
  padding-bottom: 7px;
}
.ce-pdf:hover { color: var(--ce-terre); }

/* Liste des bénéfices, sur fond sable. */
.ce-benefices {
  background: var(--ce-papier-2);
  border: 1px solid var(--ce-trait);
  border-radius: 12px;
  padding: clamp(24px, 3vw, 34px);
}
.ce-benefices__titre {
  font-family: var(--ce-texte);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ce-terre);
  margin-bottom: 18px;
}
.ce-benefices ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ce-benefices li { display: grid; grid-template-columns: auto 1fr; gap: 12px; font-size: 15px; color: var(--ce-encre-2); }
.ce-benefices li i { color: var(--ce-terre); font-size: 13px; margin-top: 5px; }

/* ---------- Public visé ---------- */

.ce-public {
  border: 1px solid var(--ce-trait);
  border-radius: 12px;
  padding: clamp(26px, 3vw, 40px);
}
.ce-public h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 22px; }
.ce-public ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 26px; }
.ce-public li { position: relative; padding-left: 18px; font-size: 15px; color: var(--ce-encre-2); }
.ce-public li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--ce-terre); }

/* ---------- Objectifs (section sombre) ---------- */

.ce-objectifs h2 { font-size: clamp(28px, 3.2vw, 42px); margin-bottom: 18px; }
.ce-objectifs__intro { color: rgb(251 248 243 / 0.72); font-size: 15px; }

.ce-objectifs ol { list-style: none; margin: 0; padding: 0; }
.ce-objectifs li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
  padding-block: 20px;
  border-top: 1px solid rgb(251 248 243 / 0.14);
}
.ce-objectifs li:last-child { border-bottom: 1px solid rgb(251 248 243 / 0.14); }
.ce-objectifs__numero { font-family: var(--ce-titre); font-size: 24px; color: var(--ce-or); }
.ce-objectifs__texte { color: rgb(251 248 243 / 0.9); font-size: 15px; }

/* ---------- Équipe ---------- */

.ce-equipe__entete { text-align: center; margin-bottom: 34px; }
.ce-equipe__entete .ce-surtitre { justify-content: center; }
.ce-equipe__entete h2 { font-size: clamp(26px, 3vw, 38px); }

.ce-prof {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 18px;
  align-items: start;
  border: 1px solid var(--ce-trait);
  border-radius: 12px;
  padding: 22px;
  background: var(--ce-papier);
}
.ce-prof__photo { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.ce-prof__initiales {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--ce-sable);
  color: var(--ce-terre-fonce);
  display: grid;
  place-items: center;
  font-family: var(--ce-titre);
  font-size: 22px;
}
.ce-prof__role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ce-terre);
  margin-bottom: 4px;
}
.ce-prof__nom { font-family: var(--ce-titre); font-size: 21px; color: var(--ce-encre); margin-bottom: 8px; }
.ce-prof__texte { font-size: 14px; color: var(--ce-encre-2); }

/* ---------- Ce que comprend l'année ---------- */

.ce-inclus h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 22px; }
.ce-inclus ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ce-inclus li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  background: var(--ce-papier);
  border: 1px solid var(--ce-trait);
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 15px;
  color: var(--ce-encre-2);
}
.ce-inclus li i { color: var(--ce-terre); margin-top: 4px; }

/* ---------- Charte ---------- */

.ce-charte h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 14px; }
.ce-charte__intro { color: var(--ce-encre-2); margin-bottom: 20px; }

.ce-charte details {
  border: 1px solid var(--ce-trait);
  border-radius: 10px;
  background: var(--ce-papier-2);
  padding: 16px 20px;
}
.ce-charte summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ce-rouge);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ce-charte summary::-webkit-details-marker { display: none; }
.ce-charte summary i { transition: transform var(--ce-transition); }
.ce-charte details[open] summary i { transform: rotate(180deg); }
.ce-charte details p { margin-top: 14px; font-size: 15px; color: var(--ce-encre-2); }

.ce-charte ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ce-charte ol li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; font-size: 15px; color: var(--ce-encre-2); }
.ce-charte ol li span { font-family: var(--ce-titre); font-size: 20px; color: var(--ce-terre); line-height: 1.3; }

/* ---------- Inscription ---------- */

.ce-inscription {
  scroll-margin-top: 130px;
  background: var(--ce-encre);
  color: var(--ce-papier);
  border-radius: 16px;
  padding: clamp(30px, 4vw, 52px);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.ce-inscription h2 { color: var(--ce-papier); font-size: clamp(24px, 2.8vw, 34px); margin-bottom: 14px; }
.ce-inscription__surtitre { color: var(--ce-or); }
.ce-inscription__surtitre::before { background: var(--ce-or); }
.ce-inscription__texte { color: rgb(251 248 243 / 0.78); font-size: 15px; margin-bottom: 20px; }

.ce-inscription__faits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* La base espace les éléments de liste verticalement. En rangée, cela décale
   tous les jetons sauf le premier — qui se retrouve seul à s'étirer. */
.ce-inscription__faits li + li { margin-block-start: 0; }
.ce-inscription__faits li {
  font-size: 13px;
  color: rgb(251 248 243 / 0.9);
  border: 1px solid rgb(251 248 243 / 0.28);
  border-radius: 999px;
  padding: 7px 14px;
}

.ce-actions { display: grid; gap: 12px; }

.ce-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  transition: transform var(--ce-transition), background-color var(--ce-transition);
}
.ce-bouton--primaire { background: var(--ce-or); color: var(--ce-encre); }
.ce-bouton--primaire:hover { background: #F7DE66; color: var(--ce-encre); transform: translateY(-2px); }
.ce-bouton--fantome { background: transparent; color: var(--ce-papier); border: 1px solid rgb(251 248 243 / 0.45); }
.ce-bouton--fantome:hover { background: rgb(251 248 243 / 0.08); color: var(--ce-papier); transform: translateY(-2px); }

.ce-avertissement {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  font-size: 13px;
  color: rgb(251 248 243 / 0.7);
  margin-top: 4px;
}
.ce-avertissement i { color: var(--ce-or); margin-top: 3px; }

/* ---------- Bascule d'âge : le contenu change sans recharger ---------- */

.ce-variable[hidden] { display: none; }

.ce-fondu { animation: ce-fondu 260ms cubic-bezier(0.2, 0.6, 0.3, 1) both; }
@keyframes ce-fondu {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Adaptation ---------- */

@media (max-width: 900px) {
  .ce-duo, .ce-duo--egal, .ce-duo--inverse, .ce-deux, .ce-inscription { grid-template-columns: 1fr; }
  .ce-quatre { grid-template-columns: 1fr 1fr; }
  .ce-hero h1 { font-size: clamp(32px, 8vw, 42px); }
  .ce-objectifs li { grid-template-columns: 44px 1fr; }
}

@media (max-width: 560px) {
  .ce-quatre { grid-template-columns: 1fr; }
  .ce-prof { grid-template-columns: 1fr; }
  .ce-prof__photo, .ce-prof__initiales { width: 64px; height: 64px; }
}

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

/* Note de vocabulaire : explique un mot du titre juste au-dessus. Discrète —
   elle éclaire le texte, elle ne lui dispute pas la place. */
.ce-programme__definition {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--ce-terre);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ce-encre-2);
}

/* ═══════════════════════════════════════════════════════════
   Carte-signature, appels à l'action, bloc d'inscription
   ═══════════════════════════════════════════════════════════ */

/* Dit qui a conçu le programme, avant même que la page ne défile. */
.ce-signature {
  margin: 20px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 20px 8px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--ce-trait);
  text-decoration: none;
  transition: transform var(--ce-transition), box-shadow var(--ce-transition);
}

.ce-signature:hover,
.ce-signature:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgb(28 27 53 / 0.12);
  color: var(--ce-encre);
}

.ce-signature img {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  object-fit: cover;
  /* Même cadrage que le portrait de l'accueil : centré, il coupe le front. */
  object-position: 50% 18%;
  flex: 0 0 auto;
}

.ce-signature__texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ce-signature__surtitre {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ce-terre-fonce);
}

.ce-signature__nom {
  font-family: var(--ce-titre);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.15;
  color: var(--ce-encre);
}

.ce-signature__role {
  font-family: var(--ce-texte);
  font-weight: 400;
  font-size: 14.5px;
  color: var(--ce-encre-2);
}

/* ── Appel à l'action du bandeau ─────────────────────────── */

.ce-hero__appel {
  margin: 24px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.ce-hero__urgence {
  font-size: 14.5px;
  color: var(--ce-encre-2);
}

/* ── Appel à l'action de la barre collante ───────────────── */

/* La barre suit la lecture ; ce bouton met l'inscription à un clic, à tout
   moment. Il se pousse à droite pour ne pas gêner le sélecteur d'âge. */
.ce-bascule__inscription {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--ce-encre);
  color: var(--ce-papier);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--ce-transition);
}

.ce-bascule__inscription:hover,
.ce-bascule__inscription:focus-visible {
  background: #2B2A4D;
  color: var(--ce-papier);
}

.ce-bascule__inscription i { font-size: 11px; }

@media (max-width: 700px) {
  /* Sur un écran étroit, la barre passe sur deux lignes : le bouton reprend
     toute la largeur plutôt que de se serrer contre le bord. */
  .ce-bascule__inscription {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

/* ── Bloc d'inscription, désormais unique ────────────────── */

.ce-inscription-zone {
  padding-bottom: clamp(48px, 6vw, 96px);
}

/* ── Le principe de l'échange préalable ──────────────────── */

/* Posé juste avant le bloc d'inscription : c'est là que le parent se demande
   comment faire. Fond sable et filet terre pour se distinguer du corps de la
   page sans crier plus fort que l'encadré d'inscription qui suit. */
.ce-prealable {
  padding-bottom: clamp(28px, 3vw, 44px);
}

.ce-prealable__carte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: 16px;
  border-left: 4px solid var(--ce-terre);
  background: var(--ce-papier-2);
}

.ce-prealable__carte h2 {
  margin: 0;
  font-size: clamp(21px, 2.2vw, 28px);
  color: var(--ce-encre);
}

.ce-prealable__carte p {
  margin: 0;
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ce-encre-2);
}