/* ==========================================================================
   INTERLANGUES — Feuille de style commune à tout le site
   --------------------------------------------------------------------------
   Sommaire
     0. Variables & base
     1. En-tête
     2–4. Page d'accueil (hero, trois colonnes, nos écoles)
     5. Pied de page
     6. Responsive de la page d'accueil et de l'en-tête
     7. Composants partagés (titres, boutons, diagonales, étiquettes…)
     8. En-têtes de pages intérieures
     9. Blocs de contenu (formules, tableau des cours, FAQ, frise…)
    10. Formulaires, inscription et paiement
    11. Espace élève
    12. Pages légales
    13. Responsive des pages intérieures
    14. Blocs propres à certaines pages (et leur responsive)
   --------------------------------------------------------------------------
   Échelle : les dimensions sont en rem, calées sur la maquette (1086 px de
   large, 1 rem = 16 px). Sur ordinateur, la taille de base suit la largeur
   de l'écran pour garder exactement les proportions de la maquette, jusqu'à
   1440 px. Sous 880 px, on passe à la mise en page mobile.

   Diagonales : la barre oblique du logo avance de 0,6 horizontalement pour
   1 verticalement (≈ 59°). Les découpes clip-path du hero reprennent ce
   rapport : décalage horizontal = hauteur × 0,6.
   ========================================================================== */


/* ==========================================================================
   0. VARIABLES & BASE
   ========================================================================== */

:root {
  --color-red: #E8422B;
  --color-black: #1D1D1B;
  --color-bg: #FAF9F5;          /* blanc cassé chaud relevé sur la maquette */
  --color-text: #1D1D1B;          /* une seule couleur de texte : le noir du logo */
  --color-muted: #1D1D1B;
  --color-line: #E6E5E0;

  --font-display: "Manrope", "Helvetica Neue", Arial, sans-serif;  /* grand titre de l'accueil */
  --font-title: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Nunito", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Ms Madi", cursive;

  --container: 56.875rem;       /* 910 px sur la maquette */
  --gutter: 1.5rem;
  --slant: 0.6;                 /* rapport de la diagonale du logo */
  /* Distance entre le bord du conteneur et le bord de l'écran */
  --bleed: calc((100vw - min(100vw - 2 * var(--gutter), var(--container))) / 2);
  --header-h: 6.0625rem;        /* hauteur de l'en-tête fixe */
}

html {
  /* Les ancres (#horaires…) ne passent pas sous l'en-tête fixe */
  scroll-padding-top: var(--header-h);
  /* 16 px à 1086 px de large, entre 13 px et 21,2 px (= 1440 px) */
  font-size: clamp(14px, 1.4733vw, 21.2px);
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nowrap {
  white-space: nowrap;
}

h1,
h2,
p {
  margin: 0;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Icônes au trait (Lucide) */
.icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--filled {
  fill: currentColor;
  stroke: none;
}

/* Boutons du site : rectangle légèrement en biais, à l'angle de la barre
   oblique du logo (tan 31° ≈ 0,6), coins très légèrement arrondis.
   Le fond est un pseudo-élément incliné : le texte, lui, reste droit.
   Les variantes changent seulement les variables --btn-*. */
.btn {
  --btn-h: 3rem;                  /* hauteur */
  --btn-pad: 1.8rem;              /* marge intérieure à côté du texte */
  --btn-bg: var(--color-black);   /* fond */
  --btn-fg: #fff;                 /* texte */
  --btn-line: transparent;        /* contour */
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  height: var(--btn-h);
  /* le biais occupe 0,3 × la hauteur de chaque côté */
  padding: 0 calc(var(--btn-pad) + var(--btn-h) * 0.3);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}

.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(var(--btn-h) * 0.3);
  right: calc(var(--btn-h) * 0.3);
  border-radius: 0.1875rem;
  background: var(--btn-bg);
  box-shadow: inset 0 0 0 1px var(--btn-line);
  transform: skewX(-31deg);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover,
.btn:focus-visible {
  outline: none;
  --btn-bg: var(--color-red);
  --btn-fg: #fff;
  --btn-line: transparent;
}

.btn .icon--arrow {
  width: 1.25rem;
  height: 1.25rem;
}

.btn--small {
  --btn-h: 2.0625rem;
  --btn-pad: 1.4rem;
  font-size: 0.78rem;
}

/* Bouton désactivé (ex. cours complet) */
.btn[aria-disabled="true"] {
  --btn-bg: transparent;
  --btn-fg: var(--color-black);
  --btn-line: var(--color-black);
  opacity: 0.4;
  pointer-events: none;
}

/* Trait rouge manuscrit sous les mots en écriture */
.script-underline {
  position: absolute;
  overflow: visible;
  fill: none;
  stroke: var(--color-red);
  stroke-width: 2.2;
  stroke-linecap: round;
  pointer-events: none;
}


/* ==========================================================================
   1. EN-TÊTE
   ========================================================================== */

/* En-tête qui reste en haut de l'écran au défilement */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  transition: box-shadow 0.25s ease;
}

/* Fine ombre dès que la page défile (classe ajoutée par script.js) */
.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--color-line), 0 6px 18px rgba(29, 29, 27, 0.06);
}

.site-header__inner {
  display: flex;
  align-items: center;
  height: var(--header-h);
}

.site-header__logo img {
  width: 10.5625rem;
  height: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.main-nav__list {
  display: flex;
  gap: 1.55rem;
  margin-right: 1.6rem;
}

.main-nav__list a,
.lang-switch {
  font-size: 0.78rem;
  color: var(--color-black);
}

.main-nav__list a {
  position: relative;
  transition: color 0.2s ease;
}

.main-nav__list a:hover,
.main-nav__list a:focus-visible {
  color: var(--color-red);
}

.lang-switch {
  display: flex;
  gap: 0.4rem;
  margin-left: 1.5rem;
  font-size: 0.72rem;
}

.lang-switch a {
  color: var(--color-muted);
}

.lang-switch a.is-active {
  color: var(--color-black);
}

/* Page en cours : trait rouge sous le lien */
.main-nav__list a[aria-current="page"] {
  color: var(--color-black);
}

.main-nav__list a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.45rem;
  height: 2px;
  background: var(--color-red);
}

/* Accès à l'espace élève */
.main-nav__account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid var(--color-black);
  border-radius: 50%;
  font-size: 0.78rem;
  color: var(--color-black);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.main-nav__account .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.main-nav__account:hover,
.main-nav__account:focus-visible,
.main-nav__account[aria-current="page"] {
  background: var(--color-black);
  color: #fff;
}

.main-nav__account-label {
  display: none;
}

.site-header__toggle {
  display: none;
}


/* ==========================================================================
   2. SECTION PRINCIPALE (HERO)
   ========================================================================== */

.hero {
  position: relative;
  overflow-x: clip;
}

.hero__inner {
  position: relative;
  height: 36.8125rem;           /* jusqu'au bas de la photo */
}

/* Bloc de gauche centré verticalement sur la hauteur de la photo
   (la photo commence à 3,3125rem sous l'en-tête) */
.hero__content {
  position: absolute;
  z-index: 2;
  top: 3.3125rem;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 5rem;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--color-black);
}

.hero__line {
  display: block;
}

.hero__line--script {
  position: relative;
  width: max-content;
  margin-top: 0.25em;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 0.74em;
  line-height: 1.2;
  letter-spacing: 0;
}

.hero__line--script .script-underline {
  left: 15%;
  bottom: -0.2em;
  width: 45%;
  height: 0.5em;
}

/* Texte d'introduction, en bas à droite : cartouche noir en biais
   (même angle que le logo) posé à cheval sur la forme rouge. */
.hero__intro {
  position: absolute;
  z-index: 3;
  top: 29.8rem;
  left: 44.6rem;
  width: max-content;
  white-space: nowrap;            /* les retours à la ligne sont dans le HTML */
  isolation: isolate;
  padding: 0.95rem 1.7rem 1rem 2.6rem;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}

.hero__intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0.1875rem;
  background: var(--color-black);
  transform: skewX(-31deg);       /* tan(31°) ≈ 0,6 : angle du logo */
}

.hero__content .btn {
  margin-top: 2.8rem;
}

/* --- Visuel en parallélogramme ------------------------------------------ */

.hero__visual {
  position: absolute;
  z-index: 1;
  top: -3.5625rem;              /* remonte à hauteur de l'en-tête */
  left: 21rem;
  right: calc(50% - 50vw);      /* déborde jusqu'au bord droit de l'écran */
  height: 40.375rem;
  pointer-events: none;
}

/* Photo : 33,5rem de haut → décalage 33,5 × 0,6 = 20,1rem.
   Le bord droit suit la forme rouge : 28,3125 + 20,1 = 48,4125rem. */
.hero__photo {
  position: absolute;
  top: 6.875rem;
  left: 0;
  width: 48.4125rem;
  max-width: none;
  height: 33.5rem;
  object-fit: cover;
  object-position: 55% 40%;
  clip-path: polygon(20.1rem 0, 100% 0, 28.3125rem 100%, 0 100%);
}

.hero__shape {
  position: absolute;
  background: var(--color-red);
}

/* Forme basse, collée au bord droit de la photo :
   16,625rem de haut → décalage 9,975rem */
.hero__shape--bottom {
  top: 23.75rem;
  left: 28.3125rem;
  width: 16.6rem;
  height: 16.625rem;
  clip-path: polygon(9.975rem 0, 100% 0, 6.625rem 100%, 0 100%);
}


/* ==========================================================================
   3. TOUTES LES SECTIONS (8 ENTRÉES SUR 2 RANGÉES)
   ========================================================================== */

.features {
  border-bottom: 1px solid var(--color-line);
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 1.5rem 0;
}

.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.2rem 0.8rem;
  text-align: center;
}

/* Fines lignes : verticales entre les colonnes, horizontale entre les rangées */
.feature:not(:nth-child(4n + 1)) {
  border-left: 1px solid var(--color-line);
}

.feature:nth-child(n + 5) {
  border-top: 1px solid var(--color-line);
}

.feature__icon {
  width: 3rem;
  height: 3rem;
  fill: none;
  stroke: var(--color-red);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature__title {
  margin-top: 1rem;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.22rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-black);
}

.feature__text {
  max-width: 13rem;
  margin-top: 0.6rem;
  text-wrap: balance;           /* lignes de longueur équilibrée */
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-muted);
}

/* Flèche poussée en bas : toutes les flèches d'une rangée sont alignées */
.feature__link {
  margin-top: auto;
  padding-top: 0.9rem;
  color: var(--color-black);
  transition: color 0.2s ease, transform 0.2s ease;
}

.feature__link:hover,
.feature__link:focus-visible {
  color: var(--color-red);
  transform: translateX(4px);
}


/* ==========================================================================
   4. NOS ÉCOLES
   ========================================================================== */

.schools {
  position: relative;
  overflow-x: clip;
}

.schools__inner {
  position: relative;
  min-height: 24.0625rem;       /* 385 px sur la maquette */
}

/* Photo ancrée à gauche de l'écran ; son bord droit est fixé par rapport
   au conteneur. Les points de la découpe sont comptés depuis la droite. */
.schools__visual {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: calc(29.1875rem - (50% - 50vw));
  clip-path: polygon(
    calc(100% - 16.1875rem) 0,
    100% 0,
    calc(100% - 18.5625rem) 100%,
    calc(100% - 37.1875rem) 100%
  );
}

.schools__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% 35%;
}

.schools__content {
  position: relative;
  margin-left: 31.8125rem;      /* texte aligné à x = 601 px */
  padding: 3.3125rem 0 3rem;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--color-black);
}

.schools__title {
  margin-top: 0.9rem;
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 2.55rem;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--color-black);
}

.schools__script {
  position: relative;
  display: block;
  width: max-content;
  margin-top: 0.05em;
  font-family: var(--font-script);
  font-size: 1.7em;
  line-height: 1.1;
  letter-spacing: 0;
}

.schools__script .script-underline {
  left: 2%;
  bottom: -0.12em;
  width: 37%;
  height: 0.3em;
}

.schools__text {
  margin-top: 1.55rem;
  max-width: 21.5rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--color-text);
}


/* ==========================================================================
   5. PIED DE PAGE (bandeau noir, commun à toutes les pages)
   Trois étages alignés sur le même conteneur : logo et labels, quatre
   colonnes de même largeur, puis la ligne du bas.
   ========================================================================== */

.site-footer {
  background: var(--color-black);
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.6;
}

.site-footer a {
  color: #fff;
  transition: color 0.2s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-red);
}

/* Étage 1 : logo + phrase à gauche, labels de qualité à droite */
.site-footer__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem 3rem;
  padding: 3.6rem 0 2.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.site-footer__logo img {
  width: 11rem;
  height: auto;
}

.site-footer__tagline {
  margin-top: 1rem;
}

.site-footer__certs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  font-weight: 600;
  color: #fff;
}

.site-footer__certs li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* Même hauteur de ligne que les autres colonnes */
.site-footer__social a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 1.6em;
}

.site-footer__certs .icon {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-red);
}

/* Étage 2 : quatre colonnes, la première calée à gauche, la dernière
   calée à droite, et le même espace entre chaque colonne */
.site-footer__grid {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.6rem 0 3rem;
}

.site-footer__col h2 {
  margin: 0 0 0.9rem;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
  color: #fff;
}

.site-footer__col li + li {
  margin-top: 0.3rem;
}

.site-footer__social .icon {
  width: 1rem;
  height: 1rem;
}

/* Étage 3 : copyright et réalisation */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  padding: 1.3rem 0 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.74rem;
}

.site-footer__bottom a {
  font-weight: 700;
}


/* ==========================================================================
   6. RESPONSIVE — TABLETTE ET TÉLÉPHONE (< 880 px)
   ========================================================================== */

@media (max-width: 879px) {

  html {
    font-size: 16px;
  }

  /* --- En-tête : menu repliable --- */
  :root {
    --header-h: 4.5rem;
  }

  .site-header__logo img {
    width: 8.5rem;
  }

  .site-header__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: auto;
    padding: 0 0.6rem;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .site-header__toggle-bar {
    display: block;
    height: 2px;
    background: var(--color-black);
    transition: transform 0.25s ease;
  }

  .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2) {
    transform: translateY(4px) rotate(45deg);
  }

  .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3) {
    transform: translateY(-4px) rotate(-45deg);
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.25rem var(--gutter) 1.75rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav__list {
    flex-direction: column;
    gap: 0.9rem;
    margin: 0;
  }

  .main-nav__list a {
    font-size: 1.05rem;
  }

  .lang-switch {
    margin: 0;
    font-size: 0.9rem;
  }

  .main-nav__list a[aria-current="page"] {
    color: var(--color-red);
  }

  .main-nav__list a[aria-current="page"]::after {
    display: none;
  }

  .main-nav__account {
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    font-size: 1.05rem;
  }

  .main-nav__account:hover,
  .main-nav__account[aria-current="page"] {
    background: none;
    color: var(--color-red);
  }

  .main-nav__account-label {
    display: inline;
  }


  /* --- Hero : la photo passe sous le titre --- */
  .hero__inner {
    height: auto;
  }

  .hero__content {
    position: relative;
    top: auto;
    bottom: auto;
    display: block;
    padding-top: 1.5rem;
  }

  .hero__title {
    font-size: clamp(2.75rem, 13vw, 4.5rem);
  }

  .hero__line--script {
    font-size: 0.6em;
  }

  .hero__intro {
    position: static;
    width: auto;
    white-space: normal;
    margin-top: 1.6rem;
    padding: 0;
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text);
  }

  .hero__intro::before {
    display: none;
  }

  .hero__intro br {
    display: none;
  }

  .hero__content .btn {
    width: auto;
    margin-top: 1.8rem;
  }

  /* Diagonales conservées, plus discrètes (angle plus doux, formes réduites) */
  .hero__visual {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    height: 72vw;
    max-height: 26rem;
    margin: 2.5rem calc(-1 * var(--gutter)) 0 0;
  }

  .hero__photo {
    top: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
  }

  .hero__shape--bottom {
    top: auto;
    bottom: 0;
    left: auto;
    right: 7%;
    width: 16%;
    height: 38%;
    clip-path: polygon(45% 0, 100% 0, 55% 100%, 0 100%);
  }

  /* --- Les huit entrées sur deux colonnes --- */
  .features__grid {
    grid-template-columns: 1fr 1fr;
    padding: 0.5rem 0;
  }

  .feature {
    padding: 1.8rem 0.6rem;
  }

  .feature:not(:nth-child(4n + 1)) {
    border-left: 0;
  }

  .feature:nth-child(even) {
    border-left: 1px solid var(--color-line);
  }

  .feature:nth-child(n + 3) {
    border-top: 1px solid var(--color-line);
  }

  .feature__icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .feature__title {
    font-size: 1.05rem;
  }

  .feature__text {
    font-size: 0.82rem;
  }

  .feature__text {
    max-width: none;
  }

  /* --- Écoles : photo au-dessus, texte dessous --- */
  .schools__inner {
    min-height: 0;
  }

  .schools__visual {
    position: relative;
    left: auto;
    width: calc(100% + var(--gutter));
    height: 60vw;
    max-height: 22rem;
    margin-left: calc(-1 * var(--gutter));
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
  }

  .schools__content {
    margin-left: 0;
    padding: 2.25rem 0 3rem;
  }

  .schools__title {
    font-size: 2.1rem;
  }

  .schools__text {
    font-size: 0.95rem;
  }

  /* --- Pied de page : deux colonnes, puis une seule --- */
  .site-footer__head {
    flex-direction: column;
    align-items: flex-start;
    padding: 3rem 0 2rem;
  }

  .site-footer__certs {
    flex-direction: column;
  }

  .site-footer__col {
    min-width: 0;
    overflow-wrap: anywhere;      /* les longues adresses e-mail passent à la ligne */
  }

  .site-footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
    padding: 2rem 0 2.4rem;
  }

  .site-footer__bottom {
    flex-direction: column;
  }
}


/* ==========================================================================
   7. COMPOSANTS PARTAGÉS
   ========================================================================== */

h3,
h4,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

/* --- Espacements de section --------------------------------------------- */

.section {
  position: relative;
  padding: 5.5rem 0;
}

.section--tight {
  padding: 3.5rem 0;
}

.section--line {
  border-top: 1px solid var(--color-line);
}

/* Fond papier un peu plus soutenu, pour rythmer les longues pages */
.section--paper {
  background: #fff;
}

.section--dark {
  background: var(--color-black);
  color: #fff;
}

/* --- Titres -------------------------------------------------------------- */

.h1,
.h2,
.h3 {
  font-family: var(--font-title);
  color: var(--color-black);
}

.h1 {
  font-weight: 300;
  font-size: 4.1rem;
  line-height: 1;
  letter-spacing: -0.035em;
}

.h2 {
  font-weight: 300;
  font-size: 2.55rem;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.h3 {
  font-weight: 500;
  font-size: 1.22rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.section--dark .h1,
.section--dark .h2,
.section--dark .h3 {
  color: #fff;
}

/* Mot ou ligne en écriture manuscrite, avec son trait rouge */
.script {
  position: relative;
  display: inline-block;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.3em;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.script--line {
  display: block;
  width: max-content;
  margin-top: 0.12em;
  font-size: 1.05em;
}

.script .script-underline {
  left: 6%;
  bottom: -0.2em;
  width: 58%;
  height: 0.4em;
}

/* --- Textes -------------------------------------------------------------- */

.lead {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-text);
}

.prose {
  font-size: 0.95rem;
  line-height: 1.65;
}

.prose p + p {
  margin-top: 1em;
}

.small {
  font-size: 0.8rem;
  line-height: 1.55;
}

.muted {
  color: var(--color-black);
}

.section--dark .muted {
  color: #fff;
}

.stack > * + * {
  margin-top: 1.4rem;
}

/* --- Boutons et liens ---------------------------------------------------- */

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--color-black);
  --btn-line: var(--color-black);
}

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--color-black);
}

.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 2rem;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-black);
  transition: color 0.2s ease;
}

.link-arrow .icon {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform 0.2s ease;
}

.link-arrow:hover {
  color: var(--color-red);
}

.link-arrow:hover .icon {
  transform: translateX(3px);
}

.section--dark .link-arrow {
  color: #fff;
}

/* Lien souligné dans le texte */
.link {
  text-decoration: underline;
  text-decoration-color: var(--color-red);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.link:hover {
  color: var(--color-red);
}

/* --- Étiquettes ---------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 1.5rem;
  padding: 0 0.65rem;
  border-radius: 0.1875rem;
  background: #fff;
  color: var(--color-black);
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}

.tag--red {
  background: var(--color-red);
  color: #fff;
}

.tag--green {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-black);
  color: var(--color-black);
}

.tag--dark {
  background: var(--color-black);
  color: #fff;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* --- Diagonales ----------------------------------------------------------
   Toutes reprennent la barre oblique du logo : décalage = hauteur × 0,6.
   --sh : hauteur de la forme ; --sw : épaisseur horizontale de la barre.   */

.slash {
  --sh: 10rem;
  --sw: 4rem;
  position: absolute;
  width: calc(var(--sh) * 0.6 + var(--sw));
  height: var(--sh);
  background: var(--color-red);
  clip-path: polygon(calc(var(--sh) * 0.6) 0, 100% 0, var(--sw) 100%, 0 100%);
  pointer-events: none;
}

.slash--black {
  background: var(--color-black);
}

/* Photo découpée en parallélogramme (hauteur --h) */
.slant-photo {
  --h: 24rem;
  position: relative;
  height: var(--h);
}

.slant-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(calc(var(--h) * 0.6) 0, 100% 0, calc(100% - var(--h) * 0.6) 100%, 0 100%);
}

/* Variante qui touche le bord droit de l'écran */
.slant-photo--bleed-right {
  margin-right: calc(50% - 50vw);
}

.slant-photo--bleed-right > img {
  clip-path: polygon(calc(var(--h) * 0.6) 0, 100% 0, 100% 100%, 0 100%);
}

/* Variante qui touche le bord gauche de l'écran */
.slant-photo--bleed-left {
  margin-left: calc(50% - 50vw);
}

.slant-photo--bleed-left > img {
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--h) * 0.6) 100%, 0 100%);
}

.slant-photo .slash {
  z-index: 2;
}

/* Petite barre oblique devant un titre ou un élément de liste */
.mark {
  display: inline-block;
  width: 0.55em;
  height: 0.9em;
  margin-right: 0.45em;
  background: var(--color-red);
  clip-path: polygon(60% 0, 100% 0, 40% 100%, 0 100%);
  vertical-align: -0.05em;
}

/* --- Labels qualité (eduQua, fide) -------------------------------------- */

.cert {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.1rem 0.65rem 0.8rem;
  border: 1px solid var(--color-line);
  border-radius: 0.8rem;
  background: #fff;
}

.cert .icon {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--color-red);
  stroke-width: 1.4;
}

.cert strong {
  display: block;
  font-size: 0.82rem;
  color: var(--color-black);
}

.cert span {
  display: block;
  font-size: 0.7rem;
  color: var(--color-black);
}

.certs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* --- Fil d'Ariane -------------------------------------------------------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--color-black);
}

.crumbs a:hover {
  color: var(--color-red);
}

.crumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--color-red);
}

/* --- Message temporaire (maquette) -------------------------------------- */

.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 1.5rem;
  max-width: calc(100% - 2rem);
  padding: 0.85rem 1.3rem;
  border-radius: 0.1875rem;
  background: var(--color-black);
  color: #fff;
  font-size: 0.85rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  transform: translate(-50%, 160%);
  transition: transform 0.35s ease;
}

.toast.is-visible {
  transform: translate(-50%, 0);
}


/* ==========================================================================
   8. EN-TÊTES DES PAGES INTÉRIEURES
   ========================================================================== */

/* Modèle de base : texte à gauche, photo en parallélogramme qui déborde
   à droite de l'écran, une barre rouge en appui sur le bord oblique. */
.page-hero {
  position: relative;
  overflow-x: clip;
}

.page-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: start;
  min-height: 30rem;
}

.page-hero__content {
  position: relative;
  z-index: 2;
  padding: 1.5rem 0 4.5rem;
}

.page-hero__content .h1 {
  margin-top: 1.6rem;
}

.page-hero__lead {
  max-width: 25rem;
  margin-top: 2.2rem;
}

.page-hero__visual {
  --h: 30rem;
  position: relative;
  height: var(--h);
  margin-left: -3rem;
  margin-right: calc(-1 * var(--bleed));   /* la photo touche le bord droit de l'écran */
}

.page-hero__visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(calc(var(--h) * 0.6) 0, 100% 0, 100% 100%, 0 100%);
}

/* Barre rouge collée au bord oblique, en bas de la photo */
.page-hero__visual .slash {
  --sh: 12rem;
  --sw: 4.6rem;
  left: -4.6rem;
  bottom: 0;
}

/* Variante miroir : photo à gauche, texte à droite */
.page-hero--mirror .page-hero__inner {
  grid-template-columns: 1fr 1.05fr;
}

.page-hero--mirror .page-hero__visual {
  order: -1;
  margin-left: calc(-1 * var(--bleed));
  margin-right: -3rem;
}

.page-hero--mirror .page-hero__visual > img {
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--h) * 0.6) 100%, 0 100%);
}

.page-hero--mirror .page-hero__visual .slash {
  left: auto;
  right: -4.6rem;
  top: 0;
  bottom: auto;
}

.page-hero--mirror .page-hero__content {
  padding-left: 4rem;
}

/* Variante sombre (Entreprises) */
.page-hero--dark {
  background: var(--color-black);
  color: #fff;
}

.page-hero--dark .h1 {
  color: #fff;
}

.page-hero--dark .crumbs,
.page-hero--dark .crumbs a {
  color: #fff;
}

.page-hero--dark .page-hero__content {
  padding-top: 3rem;
}

.page-hero--dark .page-hero__visual {
  margin-top: 3rem;
}

/* Variante texte seul (contact, inscription, compte, pages légales) */
.page-hero--plain .page-hero__inner {
  display: block;
  min-height: 0;
}

.page-hero--plain .page-hero__content {
  max-width: 44rem;
  padding: 1.5rem 0 3.5rem;
}

.page-hero--plain .slash {
  --sh: 9rem;
  --sw: 2.6rem;
  top: 0;                       /* sous l'en-tête fixe */
  right: calc(50% - 50vw - 1rem);
}

/* --- Nos écoles : deux photos séparées par la diagonale du logo --------- */
.split-hero {
  position: relative;
  height: 34rem;
  overflow: hidden;
  background: var(--color-black);
}

.split-hero__half {
  position: absolute;
  inset: 0;
  display: block;
}

.split-hero__half img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.split-hero__half::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 45%);
}

/* La diagonale passe par le centre : ±(34rem × 0,6) / 2 = ±10,2rem */
.split-hero__half--left {
  clip-path: polygon(0 0, calc(50% + 10.2rem) 0, calc(50% - 10.2rem) 100%, 0 100%);
}

.split-hero__half--left img {
  width: 60%;
}

.split-hero__half--right {
  clip-path: polygon(calc(50% + 10.2rem) 0, 100% 0, 100% 100%, calc(50% - 10.2rem) 100%);
}

.split-hero__half--right img {
  width: 60%;
  margin-left: 40%;
}

.split-hero__half:hover img {
  transform: scale(1.03);
}

.split-hero__label {
  position: absolute;
  z-index: 2;
  bottom: 2.2rem;
  color: #fff;
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 2.3rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.split-hero__label small {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0;
  opacity: 0.85;
}

.split-hero__half--left .split-hero__label {
  left: max(var(--gutter), calc(50% - var(--container) / 2));
}

.split-hero__half--right .split-hero__label {
  right: max(var(--gutter), calc(50% - var(--container) / 2));
  text-align: right;
}

/* Fine barre rouge le long de la diagonale */
.split-hero__seam {
  position: absolute;
  z-index: 3;
  top: 0;
  left: calc(50% - 10.2rem - 0.3rem);
  width: calc(20.4rem + 0.6rem);
  height: 100%;
  background: var(--color-red);
  clip-path: polygon(20.4rem 0, 100% 0, 0.6rem 100%, 0 100%);
}


/* ==========================================================================
   9. BLOCS DE CONTENU
   ========================================================================== */

/* --- Mises en page à deux colonnes -------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.split--narrow-left {
  grid-template-columns: 0.8fr 1.2fr;
}

.split--narrow-right {
  grid-template-columns: 1.25fr 0.75fr;
}

.split--center {
  align-items: center;
}

.section-head {
  max-width: 34rem;
  margin-bottom: 3rem;
}

.section-head .lead,
.section-head .prose {
  margin-top: 1.2rem;
}

.section-head--row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 1.5rem 3rem;
  max-width: none;
}

.section-head--row > div {
  max-width: 32rem;
}

/* --- Liste des langues, en grand ----------------------------------------- */

.language-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 1.4rem;
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 2.1rem;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.language-line li:not(:last-child)::after {
  content: "/";
  margin-left: 1.4rem;
  color: var(--color-red);
}

.language-line .script {
  font-size: 1.15em;
}

/* --- Formules côte à côte ------------------------------------------------ */

.plans {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  align-items: stretch;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.6rem 2.1rem 2.4rem;
}

.plan + .plan {
  border-left: 1px solid var(--color-line);
}

.plan__desc {
  margin-top: 0.8rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--color-muted);
}

.plan__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  margin-top: 1.8rem;
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 2.6rem;
  letter-spacing: -0.03em;
  color: var(--color-black);
}

.plan__price small {
  flex-basis: 100%;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0;
  color: var(--color-black);
}

.plan__list {
  margin: 1.6rem 0 2rem;
  font-size: 0.83rem;
}

.plan__list li {
  display: flex;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--color-line);
}

.plan__list .icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  color: var(--color-red);
}

.plan .btn {
  margin-top: auto;
}

/* Formule mise en avant : fond noir qui dépasse, coin rouge en biais */
.plan--featured {
  margin: -1.6rem 0;
  padding-top: 4.2rem;
  background: var(--color-black);
  color: #fff;
  overflow: hidden;
}

.plan--featured + .plan {
  border-left: 0;
}

.plan--featured .h3,
.plan--featured .plan__price {
  color: #fff;
}

.plan--featured .plan__desc,
.plan--featured .plan__price small {
  color: #fff;
}

.plan--featured .plan__list li {
  border-color: rgba(255, 255, 255, 0.18);
}

.plan--featured .slash {
  --sh: 5rem;
  --sw: 2.2rem;
  top: 0;
  right: 1.6rem;
}

.plan__flag {
  position: absolute;
  top: 1.6rem;
  left: 2.1rem;
}

/* --- Filtres et tableau des cours --------------------------------------- */

.filters {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: end;
  padding: 1.2rem;
  border-radius: 1rem;
  background: #fff;
}

.filters__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 1.6rem 0 0.4rem;
  font-size: 0.8rem;
}

.filters__reset {
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--color-black);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--color-red);
  text-underline-offset: 0.2em;
}

.course-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.course-table th {
  padding: 0.75rem 0.55rem;
  border-bottom: 1px solid var(--color-black);
  text-align: left;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-black);
  white-space: nowrap;
}

.course-table td {
  padding: 1.05rem 0.55rem;
  border-bottom: 1px solid var(--color-line);
  vertical-align: middle;
}

.course-table tbody tr {
  transition: background-color 0.2s ease;
}

.course-table tbody tr:hover {
  background: #fff;
}

.course-table__lang strong {
  display: block;
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-black);
}

.course-table__lang span {
  font-size: 0.72rem;
  color: var(--color-black);
}

.course-table__info {
  max-width: 11rem;
  font-size: 0.74rem;
  color: var(--color-black);
}

.course-table__action {
  text-align: right;
  white-space: nowrap;
}

.course-table__price {
  display: block;
  margin-bottom: 0.45rem;
  font-weight: 700;
  color: var(--color-black);
}

.course-table .btn {
  --btn-h: 2.2rem;
  --btn-pad: 0.9rem;
  font-size: 0.74rem;
}

.course-table tr[hidden] {
  display: none !important;
}

.course-empty {
  padding: 3rem 0;
  text-align: center;
  color: var(--color-black);
}

.course-empty[hidden] {
  display: none;
}

/* Pastille de niveau CECR */
.level {
  display: inline-grid;
  place-items: center;
  min-width: 2.1rem;
  height: 1.6rem;
  padding: 0 0.35rem;
  border: 1px solid var(--color-black);
  border-radius: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-black);
  white-space: nowrap;
}

/* --- Échelle des niveaux CECR (marches d'escalier) ---------------------- */

.levels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: start;
  gap: 0.6rem;
}

.levels__step {
  display: flex;
  flex-direction: column;
}

.levels__bar {
  position: relative;
  height: calc(var(--n) * 1.6rem);
  margin-top: calc((6 - var(--n)) * 1.6rem);
  margin-bottom: 1.1rem;
  background: #fff;
  clip-path: polygon(1.2rem 0, 100% 0, 100% 100%, 0 100%);
}

.levels__step:nth-child(5) .levels__bar,
.levels__step:nth-child(6) .levels__bar {
  background: var(--color-black);
}

.levels__code {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--color-black);
}

.levels__name {
  margin-top: 0.35rem;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--color-black);
}

.levels__text {
  margin-top: 0.45rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--color-black);
}

/* --- Liste en lignes (modalités, matières, services…) ------------------- */

.rows > li {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 2rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-line);
}

.rows > li:last-child {
  border-bottom: 1px solid var(--color-line);
}

.rows p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.rows .tags {
  margin-top: 0.8rem;
}

.section--dark .rows > li {
  border-color: rgba(255, 255, 255, 0.18);
}

.section--dark .rows p {
  color: #fff;
}

/* --- Points forts en grille souple -------------------------------------- */

.points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem 3.5rem;
}

.points--4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.point .icon {
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: 1rem;
  color: var(--color-red);
  stroke-width: 1.2;
}

.point p {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.section--dark .point p {
  color: #fff;
}

/* --- Chiffres clés ------------------------------------------------------- */

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3.5rem;
}

.fact strong {
  display: block;
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-black);
}

.fact span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--color-black);
}

/* --- Frise chronologique ------------------------------------------------- */

.timeline > li {
  position: relative;
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1.5rem;
  padding: 1.1rem 0 1.1rem 2rem;
}

.timeline > li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-line);
}

.timeline > li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 0.75rem;
  height: 0.9rem;
  background: var(--color-black);
  clip-path: polygon(60% 0, 100% 0, 40% 100%, 0 100%);
}

.timeline > li.is-key::after {
  background: var(--color-red);
}

.timeline strong {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-black);
}

.timeline span {
  font-size: 0.88rem;
  color: var(--color-muted);
}

.timeline__group {
  padding: 1.8rem 0 0.4rem;
  font-family: var(--font-title);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-black);
}

.timeline__group:first-child {
  padding-top: 0;
}

.timeline__group small {
  margin-left: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-black);
}

/* --- Questions fréquentes ------------------------------------------------ */

.faq details {
  border-top: 1px solid var(--color-line);
}

.faq details:last-child {
  border-bottom: 1px solid var(--color-line);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.3rem 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--color-black);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  font-weight: 300;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--color-red);
  transition: transform 0.25s ease;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  max-width: 40rem;
  padding: 0 3rem 1.5rem 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-muted);
}

/* --- Bandeau d'appel à l'action ----------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
  background: var(--color-black);
  color: #fff;
}

.cta-band .h2 {
  color: #fff;
}

.cta-band__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: end;
}

.cta-band__inner .btn-row {
  justify-content: flex-end;
  margin-top: 0;
}

/* Grande barre rouge en biais sur le bord droit */
.cta-band__slash {
  position: absolute;
  top: 0;
  right: calc(50% - 50vw - 3rem);
  width: 30%;
  height: 100%;
  background: var(--color-red);
  clip-path: polygon(70% 0, 100% 0, 40% 100%, 10% 100%);
  opacity: 0.95;
}

.cta-band__phone {
  display: block;
  margin-top: 1.2rem;
  font-size: 0.85rem;
  color: #fff;
}

.cta-band__phone a {
  color: #fff;
  font-weight: 600;
}

/* --- Cartes d'école ------------------------------------------------------ */

.school-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 1.2rem;
  overflow: hidden;
}

.school-card__photo {
  height: 12rem;
}

.school-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.school-card__body {
  padding: 1.6rem 1.8rem 1.8rem;
}

.school-card dl {
  margin-top: 1.2rem;
  font-size: 0.85rem;
}

.school-card dl div {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--color-line);
}

.school-card dt {
  color: var(--color-black);
}

.school-card dd a:hover {
  color: var(--color-red);
}

/* --- Carte (plan d'accès) ----------------------------------------------- */

.map {
  position: relative;
  overflow: hidden;
  border-radius: 1.2rem;
  background: #fff;
}

.map iframe {
  display: block;
  width: 100%;
  height: 22rem;
  border: 0;
  filter: grayscale(1) contrast(1.05);
}

.map__pin {
  position: absolute;
  left: 1rem;
  top: 1rem;          /* en haut : le crédit OpenStreetMap reste visible en bas */
  max-width: calc(100% - 4.5rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.1875rem;
  background: var(--color-black);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.map__pin .icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-red);
}

/* --- Tableau d'informations simple (horaires, tarifs) ------------------- */

.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.info-table th,
.info-table td {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.info-table th {
  width: 45%;
  padding-right: 1rem;
  font-weight: 400;
  color: var(--color-black);
}

.info-table td {
  color: var(--color-black);
}

.info-table td.num {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

.info-table thead th {
  font-size: 0.7rem;
  font-weight: 600;
  border-bottom-color: var(--color-black);
}

/* --- Citation ------------------------------------------------------------ */

.quote {
  position: relative;
  padding-left: 2.2rem;
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 1.7rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-black);
}

.quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1rem;
  height: 1.6rem;
  background: var(--color-red);
  clip-path: polygon(60% 0, 100% 0, 40% 100%, 0 100%);
}

.quote cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.8rem;
  color: var(--color-black);
}

.section--dark .quote {
  color: #fff;
}


/* ==========================================================================
   10. FORMULAIRES, INSCRIPTION ET PAIEMENT
   ========================================================================== */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.2rem;
}

.field--full {
  grid-column: 1 / -1;
}

.field label,
.field .label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-black);
}

.field label abbr {
  text-decoration: none;
  color: var(--color-red);
}

.input,
.select,
.textarea {
  width: 100%;
  height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid var(--color-line);
  border-radius: 0.6rem;
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-black);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.textarea {
  display: block;
  height: auto;
  min-height: 8.5rem;
  padding: 0.8rem 0.9rem;
  resize: vertical;
}

.select {
  appearance: none;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D1B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--color-black);
  box-shadow: 0 0 0 3px rgba(232, 66, 43, 0.15);
}

.filters .select {
  height: 2.5rem;
  font-size: 0.8rem;
}

.filters .field label {
  font-size: 0.68rem;
}

.check {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-muted);
}

.check input {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.1rem 0 0;
  accent-color: var(--color-red);
}

.form-note {
  margin-top: 1rem;
  font-size: 0.74rem;
  color: var(--color-black);
}

/* Panneau blanc qui contient un formulaire */
.panel {
  padding: 2.4rem;
  border: 1px solid var(--color-line);
  border-radius: 1.2rem;
  background: #fff;
}

/* Blocs du formulaire d'inscription */
.form-block {
  margin: 0 0 2.8rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

.form-block legend {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  width: 100%;
  margin-bottom: 1.4rem;
  padding: 0 0 0.9rem;
  border-bottom: 1px solid var(--color-black);
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.22rem;
  color: var(--color-black);
}

.form-block legend span {
  margin-left: auto;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.74rem;
  color: var(--color-black);
}

/* Choix en cartes (école, moyen de paiement…) */
.choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.choices--2 {
  grid-template-columns: repeat(2, 1fr);
}

.choice {
  position: relative;
}

.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  padding: 1rem 2.2rem 1rem 1.1rem;
  border: 1px solid var(--color-line);
  border-radius: 0.8rem;
  background: #fff;
  font-size: 0.8rem;
  color: var(--color-muted);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.choice label strong {
  font-size: 0.9rem;
  color: var(--color-black);
}

.choice input:checked + label {
  border-color: var(--color-black);
  box-shadow: inset 0 0 0 1px var(--color-black);
}

.choice input:focus-visible + label {
  box-shadow: 0 0 0 3px rgba(232, 66, 43, 0.25);
}

.choice input:checked + label::after {
  content: "";
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 0.6rem;
  height: 0.9rem;
  background: var(--color-red);
  clip-path: polygon(60% 0, 100% 0, 40% 100%, 0 100%);
}

/* Logos des moyens de paiement (dessins simplifiés, à remplacer
   par les logos officiels fournis par le prestataire de paiement) */
.pay-logo {
  display: flex;
  align-items: center;
  height: 1.7rem;
  margin-bottom: 0.3rem;
}

.pay-logo svg {
  height: 100%;
  width: auto;
}

.card-fields[hidden],
.twint-note[hidden] {
  display: none;
}

.card-fields {
  margin-top: 1.2rem;
}

.twint-note {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  border-radius: 0.8rem;
  background: #fff;
  font-size: 0.82rem;
}

.twint-note .icon {
  flex: none;
  width: 2rem;
  height: 2rem;
}

/* Mise en page inscription : formulaire + récapitulatif collant */
.signup {
  display: grid;
  grid-template-columns: 1fr 20rem;
  gap: 3.5rem;
  align-items: start;
}

.summary {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  padding: 1.9rem 1.8rem 1.8rem;
  border-radius: 1.2rem;
  background: var(--color-black);
  color: #fff;
  overflow: hidden;
}

.summary .slash {
  --sh: 4.5rem;
  --sw: 1.8rem;
  top: 0;
  right: 1.4rem;
}

.summary__title {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.1rem;
  color: #fff;
}

.summary__course {
  margin-top: 1.3rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.summary__course strong {
  display: block;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1rem;
  color: #fff;
}

.summary__course span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #fff;
}

.summary dl {
  margin-top: 1rem;
  font-size: 0.82rem;
}

.summary dl div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
}

.summary dt {
  color: #fff;
}

.summary dd {
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}

.summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.summary__total span {
  font-size: 0.82rem;
}

.summary__total strong {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 2.2rem;
  letter-spacing: -0.03em;
  color: #fff;
}

.summary .btn {
  margin-top: 1.4rem;
}

.summary__safe {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
  font-size: 0.72rem;
  color: #fff;
}

.summary__safe .icon {
  flex: none;
  width: 1rem;
  height: 1rem;
}

.promo {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.promo .input {
  height: 2.4rem;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.8rem;
}

.promo .btn {
  --btn-h: 2.4rem;
  --btn-pad: 0.7rem;
  flex: none;
  margin: 0;
  font-size: 0.78rem;
}


/* ==========================================================================
   11. ESPACE ÉLÈVE (MON COMPTE)
   ========================================================================== */

.account {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 3.5rem;
  align-items: start;
}

.account-nav {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}

.account-nav__user {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  margin-bottom: 1.6rem;
}

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--color-black);
  color: #fff;
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 0.95rem;
}

.account-nav__user strong {
  display: block;
  font-size: 0.9rem;
  color: var(--color-black);
}

.account-nav__user span {
  font-size: 0.72rem;
  color: var(--color-black);
}

.account-nav__links a,
.account-nav__links button {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 0;
  border-radius: 0.6rem;
  background: none;
  font-family: var(--font-body);
  font-size: 0.86rem;
  text-align: left;
  color: var(--color-black);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.account-nav__links a:hover,
.account-nav__links button:hover {
  background: #fff;
}

.account-nav__links a.is-active {
  background: var(--color-black);
  color: #fff;
}

.account-nav .icon {
  width: 1.1rem;
  height: 1.1rem;
}

.account-nav__count {
  display: grid;
  place-items: center;
  min-width: 1.3rem;
  height: 1.3rem;
  margin-left: auto;
  border-radius: 999px;
  background: var(--color-red);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
}

.account-nav hr {
  margin: 1rem 0;
  border: 0;
  border-top: 1px solid var(--color-line);
}

.account-panel[hidden] {
  display: none;
}

.account-panel > * + * {
  margin-top: 2.2rem;
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

/* Prochain cours : bandeau noir avec diagonale */
.next-lesson {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.8rem;
  align-items: center;
  padding: 1.6rem 1.8rem;
  border-radius: 1.2rem;
  background: var(--color-black);
  color: #fff;
  overflow: hidden;
}

.next-lesson__slash {
  position: absolute;
  top: 0;
  right: -1rem;
  width: 8rem;
  height: 100%;
  background: var(--color-red);
  clip-path: polygon(70% 0, 100% 0, 30% 100%, 0 100%);
}

.next-lesson__date {
  min-width: 4rem;
  text-align: center;
  font-family: var(--font-title);
  color: #fff;
}

.next-lesson__date strong {
  display: block;
  font-weight: 300;
  font-size: 2.6rem;
  line-height: 1;
}

.next-lesson__date span {
  font-size: 0.75rem;
}

.next-lesson .h3 {
  color: #fff;
}

.next-lesson p {
  margin-top: 0.3rem;
  font-size: 0.82rem;
}

.next-lesson .btn {
  position: relative;
  z-index: 2;
  margin-right: 3rem;
}

/* Inscriptions de l'élève */
.enrolments {
  display: grid;
  gap: 1rem;
}

.enrolment {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--color-line);
  border-radius: 1rem;
  background: #fff;
}

.enrolment__level {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 0.8rem;
  background: #fff;
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--color-black);
}

.enrolment__meta {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--color-black);
}

.progress {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  margin-top: 0.8rem;
  font-size: 0.72rem;
  color: var(--color-black);
}

.progress__bar {
  flex: 1;
  max-width: 16rem;
  height: 0.35rem;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}

.progress__bar span {
  display: block;
  height: 100%;
  background: var(--color-red);
}

.enrolment__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}

/* Factures */
.invoice-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.invoice-table th {
  padding: 0.7rem 0.5rem;
  border-bottom: 1px solid var(--color-black);
  text-align: left;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-black);
}

.invoice-table td {
  padding: 1rem 0.5rem;
  border-bottom: 1px solid var(--color-line);
}

.invoice-table .num {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

.invoice-table__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.btn--mini {
  --btn-h: 2rem;
  --btn-pad: 0.7rem;
  font-size: 0.72rem;
  gap: 0.4rem;
}

.btn--mini .icon {
  width: 0.95rem;
  height: 0.95rem;
}

.balance {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.balance > div {
  flex: 1;
  min-width: 11rem;
  padding: 1.2rem 1.4rem;
  border-radius: 1rem;
  background: #fff;
}

.balance strong {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.balance span {
  font-size: 0.75rem;
  color: var(--color-black);
}

.balance > div.is-due {
  background: #fff;
}


/* ==========================================================================
   12. PAGES LÉGALES
   ========================================================================== */

.legal {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 4.5rem;
  align-items: start;
}

.legal__toc {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  font-size: 0.8rem;
}

.legal__toc p {
  margin-bottom: 0.8rem;
  font-weight: 700;
  color: var(--color-black);
}

.legal__toc a {
  display: block;
  padding: 0.35rem 0 0.35rem 0.9rem;
  border-left: 1px solid var(--color-line);
  color: var(--color-black);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.legal__toc a:hover,
.legal__toc a.is-active {
  border-color: var(--color-red);
  color: var(--color-black);
}

.legal__body {
  max-width: 40rem;
}

.legal__body section {
  scroll-margin-top: 1.5rem;
}

.legal__body section + section {
  margin-top: 3.2rem;
  padding-top: 3.2rem;
  border-top: 1px solid var(--color-line);
}

.legal__body h2 {
  margin-bottom: 1.1rem;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.legal__body h3 {
  margin: 1.8rem 0 0.6rem;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-black);
}

.legal__body p,
.legal__body li {
  font-size: 0.9rem;
  line-height: 1.7;
}

.legal__body p + p,
.legal__body p + ul,
.legal__body ul + p {
  margin-top: 0.8rem;
}

.legal__body ul li {
  position: relative;
  padding-left: 1.2rem;
}

.legal__body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.65rem;
  background: var(--color-red);
  clip-path: polygon(60% 0, 100% 0, 40% 100%, 0 100%);
}

.legal__body strong {
  color: var(--color-black);
}

.legal__body .info-table {
  margin-top: 0.4rem;
}

.legal__updated {
  margin-top: 1.4rem;
  font-size: 0.8rem;
  color: var(--color-black);
}


/* ==========================================================================
   13. RESPONSIVE DES PAGES INTÉRIEURES
   ========================================================================== */

/* Petits ordinateurs et tablettes en paysage : grilles desserrées */
@media (max-width: 1100px) and (min-width: 880px) {
  .filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .points--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 879px) {

  .section {
    padding: 3.8rem 0;
  }

  .section--tight {
    padding: 2.6rem 0;
  }

  .h1 {
    font-size: clamp(2.5rem, 11vw, 3.6rem);
  }

  .h2 {
    font-size: 2rem;
  }

  .lead {
    font-size: 1rem;
  }

  .section-head {
    margin-bottom: 2.2rem;
  }

  /* En-têtes de pages : la photo passe sous le texte */
  .page-hero__inner,
  .page-hero--mirror .page-hero__inner {
    display: block;
    min-height: 0;
  }

  .page-hero__content,
  .page-hero--mirror .page-hero__content {
    padding: 1rem 0 2.5rem;
  }

  .page-hero__content .h1 {
    margin-top: 1.2rem;
  }

  .page-hero__lead {
    margin-top: 1.5rem;
  }

  /* Diagonales plus discrètes sur téléphone */
  .page-hero__visual,
  .page-hero--mirror .page-hero__visual {
    --h: 16rem;
    height: 62vw;
    max-height: 22rem;
    margin: 0 calc(-1 * var(--gutter));
  }

  .page-hero__visual > img,
  .page-hero--mirror .page-hero__visual > img {
    clip-path: polygon(0 1.6rem, 100% 0, 100% 100%, 0 100%);
  }

  .page-hero__visual .slash,
  .page-hero--mirror .page-hero__visual .slash {
    --sh: 6rem;
    --sw: 2.2rem;
    left: auto;
    right: var(--gutter);
    top: auto;
    bottom: -1.2rem;
  }

  .page-hero--dark .page-hero__content {
    padding-top: 2rem;
  }

  .page-hero--dark .page-hero__visual {
    margin-top: 0;
  }

  .page-hero--plain .slash {
    --sh: 5rem;
    --sw: 1.6rem;
    top: -4.5rem;
    right: -0.5rem;
  }

  .split-hero {
    height: 30rem;
  }

  /* Sur téléphone, les deux photos s'empilent avec une coupe en biais */
  .split-hero__half img,
  .split-hero__half--right img {
    width: 100%;
    margin: 0;
  }

  .split-hero__half--left img {
    height: 55%;
  }

  .split-hero__half--right img {
    height: 55%;
    margin-top: 13.5rem;
  }

  .split-hero__half--left {
    clip-path: polygon(0 0, 100% 0, 100% calc(50% - 2.4rem), 0 calc(50% + 2.4rem));
  }

  .split-hero__half--right {
    clip-path: polygon(0 calc(50% + 2.4rem), 100% calc(50% - 2.4rem), 100% 100%, 0 100%);
  }

  .split-hero__half::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5));
  }

  .split-hero__seam {
    display: none;
  }

  .split-hero__label {
    font-size: 1.7rem;
  }

  .split-hero__half--left .split-hero__label {
    top: 1.5rem;
    bottom: auto;
  }

  .split-hero__half--right .split-hero__label {
    bottom: 1.5rem;
  }

  /* Grilles */
  .split,
  .split--narrow-left,
  .split--narrow-right,
  .cta-band__inner,
  .signup,
  .account,
  .legal {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .cta-band__inner .btn-row {
    justify-content: flex-start;
  }

  .points,
  .points--4 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .rows > li {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .language-line {
    font-size: 1.5rem;
    gap: 0.2rem 0.9rem;
  }

  .language-line li:not(:last-child)::after {
    margin-left: 0.9rem;
  }

  .levels {
    grid-template-columns: 1fr 1fr;
    gap: 1.8rem 1rem;
  }

  .levels__bar {
    height: calc(var(--n) * 0.6rem);
    margin-top: 0;
  }

  .timeline > li {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .faq details p {
    padding-right: 0;
  }

  .cta-band {
    padding: 3.5rem 0 4rem;
  }

  .cta-band__slash {
    width: 45%;
    right: -20%;
    opacity: 0.85;
  }

  /* Formules empilées */
  .plans {
    grid-template-columns: 1fr;
    gap: 1rem;
    border: 0;
  }

  .plan,
  .plan + .plan {
    padding: 2rem 1.6rem;
    border: 1px solid var(--color-line);
    border-radius: 1.2rem;
  }

  .plan--featured,
  .plan--featured + .plan {
    margin: 0;
  }

  .plan--featured {
    padding-top: 3.8rem;
    border: 0;
  }

  .plan__flag {
    left: 1.6rem;
  }

  /* Filtres : deux par ligne */
  .filters {
    grid-template-columns: 1fr 1fr;
    padding: 1rem;
  }

  /* Tableau des cours → liste de cartes */
  .course-table thead {
    display: none;
  }

  .course-table,
  .course-table tbody {
    display: block;
  }

  .course-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1rem;
    margin-bottom: 0.9rem;
    padding: 1.2rem 1.2rem 1.3rem;
    border: 1px solid var(--color-line);
    border-radius: 1rem;
    background: #fff;
  }

  .course-table tbody tr:hover {
    background: #fff;
  }

  .course-table td {
    display: block;
    padding: 0;
    border: 0;
    font-size: 0.85rem;
  }

  .course-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--color-black);
  }

  .course-table__lang,
  .course-table__info {
    grid-column: 1 / -1;
  }

  .course-table__info {
    max-width: none;
  }

  .course-table__action {
    grid-column: 1 / -1;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.9rem !important;
    border-top: 1px solid var(--color-line) !important;
    text-align: left;
  }

  .course-table__price {
    margin: 0;
  }

  /* Formulaires */
  .panel {
    padding: 1.5rem 1.2rem;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .choices,
  .choices--2 {
    grid-template-columns: 1fr;
  }

  .summary {
    position: static;
  }

  /* Espace élève */
  .account-nav {
    position: static;
  }

  .account-nav__links {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 0.4rem;
  }

  .account-nav__links a {
    flex: none;
    width: auto;
    white-space: nowrap;
    border: 1px solid var(--color-line);
  }

  .account-nav hr,
  .account-nav__links button {
    display: none;
  }

  .next-lesson {
    grid-template-columns: auto 1fr;
    padding: 1.4rem;
  }

  .next-lesson .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .enrolment {
    grid-template-columns: auto 1fr;
    padding: 1.2rem;
  }

  .enrolment__side {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .invoice-table thead {
    display: none;
  }

  .invoice-table,
  .invoice-table tbody,
  .invoice-table tr,
  .invoice-table td {
    display: block;
  }

  .invoice-table tr {
    position: relative;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-line);
  }

  .invoice-table td {
    padding: 0.15rem 0;
    border: 0;
  }

  .invoice-table .num {
    position: absolute;
    top: 1rem;
    right: 0;
  }

  .invoice-table__actions {
    justify-content: flex-start;
    margin-top: 0.6rem;
  }

  /* Pages légales */
  .legal__toc {
    position: static;
  }

  .info-table th {
    width: 50%;
  }
}


/* ==========================================================================
   14. BLOCS PROPRES À CERTAINES PAGES
   ========================================================================== */

/* --- Grande barre oblique sur le bord droit d'une section sombre -------- */
.section--dark {
  overflow: hidden;
}

.edge-slash {
  --sh: 26rem;
  --sw: 7rem;
  position: absolute;
  right: -3rem;
  bottom: 0;
  width: calc(var(--sh) * 0.6 + var(--sw));
  height: var(--sh);
  background: var(--color-red);
  clip-path: polygon(calc(var(--sh) * 0.6) 0, 100% 0, var(--sw) 100%, 0 100%);
  pointer-events: none;
}

.panel--dark {
  border-color: rgba(255, 255, 255, 0.18);
  background: var(--color-black);
  color: #fff;
}

.panel--dark .h3 {
  color: #fff;
}

.panel--dark .plan__list li {
  border-color: rgba(255, 255, 255, 0.18);
}

/* --- Liste à coches -------------------------------------------------------- */
.checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-black);
}

.checklist li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.checklist .icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-red);
}

/* --- Encadré d'information ---------------------------------------------- */
.notice {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  padding: 1.6rem 1.8rem;
  border-left: 3px solid var(--color-red);
  background: #fff;
}

.notice > .icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  color: var(--color-red);
  stroke-width: 1.3;
}

.notice p {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* --- Chiffres clés : variantes ------------------------------------------ */
.facts--stacked {
  flex-direction: column;
  gap: 1.6rem;
}

.facts--stacked .fact strong {
  font-size: 2.2rem;
}

.facts--ruled {
  justify-content: space-between;
  margin-top: 4.5rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--color-line);
}

/* --- Test fide : sessions ----------------------------------------------- */
.sessions {
  display: grid;
  gap: 0.75rem;
}

.session {
  display: grid;
  grid-template-columns: 7rem 1fr auto auto;
  gap: 2rem;
  align-items: center;
  padding: 1.3rem 1.6rem;
  border-radius: 1rem;
  background: #fff;
  transition: box-shadow 0.2s ease;
}

.session:hover {
  box-shadow: 0 8px 24px rgba(29, 29, 27, 0.08);
}

.session__date {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-title);
  color: var(--color-black);
}

.session__date strong {
  font-weight: 300;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.03em;
}

.session__date span {
  font-size: 0.8rem;
  line-height: 1.2;
}

/* --- Soutien scolaire : bande photo pleine largeur ---------------------- */
.wide-photo {
  --h: 24rem;
  position: relative;
  height: var(--h);
  overflow: hidden;
}

.wide-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(calc(var(--h) * 0.6) 0, 100% 0, calc(100% - var(--h) * 0.6) 100%, 0 100%);
}

/* Les trois niveaux, posés sur la barre rouge en bas à droite */
.wide-photo__levels {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 1.4rem;
  padding: 1.1rem max(var(--gutter), calc(50% - var(--container) / 2)) 1.1rem 6rem;
  background: var(--color-red);
  clip-path: polygon(2.6rem 0, 100% 0, 100% 100%, 0 100%);
  color: #fff;
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 500;
}

.wide-photo__levels li + li::before {
  content: "/";
  margin-right: 1.4rem;
  opacity: 0.6;
}

/* --- Soutien scolaire : matières ---------------------------------------- */
.subjects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--color-line);
}

.subjects li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.3rem 1rem;
  padding: 1.6rem 1.4rem 1.6rem 0;
  border-bottom: 1px solid var(--color-line);
}

.subjects li:nth-child(odd) {
  padding-right: 2rem;
  border-right: 1px solid var(--color-line);
}

.subjects li:nth-child(even) {
  padding-left: 2rem;
}

.subjects .icon {
  grid-row: span 2;
  width: 2rem;
  height: 2rem;
  color: var(--color-red);
  stroke-width: 1.2;
}

.subjects h3 {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.subjects p {
  font-size: 0.86rem;
  color: var(--color-muted);
}

/* Dernière case : en noir, sur toute la largeur */
.subjects .subjects__other {
  grid-column: 1 / -1;
  margin-top: 1.2rem;
  padding: 1.4rem 1.6rem;
  border: 0;
  border-radius: 1rem;
  background: var(--color-black);
}

.subjects .subjects__other h3 {
  color: #fff;
}

.subjects .subjects__other p {
  color: #fff;
}

/* --- Étapes, reliées par une flèche ------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

.steps li {
  position: relative;
  padding-top: 1.6rem;
  border-top: 2px solid var(--color-black);
}

.steps li:first-child {
  border-top-color: var(--color-red);
}

.steps li + li::before {
  content: "→";
  position: absolute;
  left: -2.1rem;
  top: 1.35rem;
  font-size: 1.2rem;
  color: var(--color-red);
}

.steps p {
  margin-top: 0.7rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* --- Jeunes au pair : offres par niveau --------------------------------- */
.level-offers {
  display: grid;
  gap: 0.8rem;
}

.level-offer {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  gap: 1.6rem;
  align-items: center;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--color-line);
  border-radius: 1rem;
  background: #fff;
}

.level-offer__code {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--color-black);
}

.level-offer__code span {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
}

.level-offer .h3 {
  margin-top: 0.7rem;
  font-size: 1.05rem;
}

.level-offer p {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.level-offer__buy {
  text-align: right;
}

.level-offer__buy p {
  margin: 0 0 0.6rem;
  white-space: nowrap;
}

.level-offer__buy strong {
  display: block;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--color-black);
}

/* --- Jeunes au pair : sorties ------------------------------------------- */
.outings {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.outing {
  position: relative;
  padding: 1.6rem 1.8rem 1.7rem;
  border-radius: 1rem;
  background: #fff;
  overflow: hidden;
}

.outing::after {
  content: "";
  position: absolute;
  top: 0;
  right: 1.4rem;
  width: 2.6rem;
  height: 2.6rem;
  background: var(--color-red);
  clip-path: polygon(60% 0, 100% 0, 40% 100%, 0 100%);
}

.outing--dark {
  background: var(--color-black);
  color: #fff;
}

.outing--dark .h3 {
  color: #fff;
}

.outing__when {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-red);
}

.outing .h3 {
  margin-top: 0.4rem;
}

.outing p:last-child {
  margin-top: 0.6rem;
  font-size: 0.86rem;
  line-height: 1.6;
}

/* --- Entreprises : formules en lignes ----------------------------------- */
.rows--offers > li {
  grid-template-columns: 16rem 1fr;
  padding: 1.8rem 0;
}

.rows--offers .h3 {
  font-size: 1.35rem;
}

/* --- Nos écoles : accréditations ---------------------------------------- */
.rows--certs > li {
  grid-template-columns: 11rem 1fr;
  align-items: start;
}

.cert-code {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 2.3rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}

.rows--certs p:not(.cert-code) {
  margin-top: 0.5rem;
}

/* --- Nos écoles : équipements et financeurs ----------------------------- */
.amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.amenities li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  border-radius: 0.1875rem;
  background: #fff;
  font-size: 0.78rem;
  color: var(--color-black);
}

.section:not(.section--paper) .amenities li {
  background: #fff;
}

.amenities .icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-red);
}

.funders li {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.3rem 0;
  border-top: 1px solid var(--color-line);
}

.funders li:last-child {
  border-bottom: 1px solid var(--color-line);
}

.funders strong {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: 2rem;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.funders span {
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* --- Contact ------------------------------------------------------------- */
.contact-aside {
  display: grid;
  gap: 2rem;
  align-content: start;
}

.contact-school {
  padding-left: 1.4rem;
  border-left: 2px solid var(--color-red);
}

.contact-school p {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.55;
}

.contact-school .link-arrow {
  font-weight: 500;
}

.contact-school .link-arrow .icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-red);
}

.contact-aside .cert {
  justify-self: start;
}


/* --- Responsive des blocs propres aux pages ----------------------------- */
@media (max-width: 879px) {
  .edge-slash {
    --sh: 12rem;
    --sw: 3rem;
    right: -2rem;
    opacity: 0.9;
  }

  .facts--ruled {
    justify-content: flex-start;
    gap: 1.6rem 2.4rem;
    margin-top: 3rem;
  }

  .fact strong {
    font-size: 2.4rem;
  }

  .session {
    grid-template-columns: 1fr auto;
    gap: 0.8rem 1rem;
    padding: 1.2rem;
  }

  .session > div {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .session .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .wide-photo {
    --h: 15rem;
  }

  .wide-photo img {
    clip-path: polygon(0 1.6rem, 100% 0, 100% 100%, 0 100%);
  }

  .wide-photo__levels {
    gap: 0.8rem;
    padding: 0.8rem var(--gutter) 0.8rem 3rem;
    font-size: 0.95rem;
  }

  .wide-photo__levels li + li::before {
    margin-right: 0.8rem;
  }

  .subjects {
    grid-template-columns: 1fr;
  }

  .subjects li,
  .subjects li:nth-child(odd),
  .subjects li:nth-child(even) {
    padding: 1.3rem 0;
    border-right: 0;
  }

  .subjects .subjects__other {
    padding: 1.3rem 1.2rem;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .steps li + li::before {
    display: none;
  }

  .level-offer {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.3rem;
  }

  .level-offer__buy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }

  .level-offer__buy p {
    margin: 0;
  }

  .rows--offers > li,
  .rows--certs > li {
    grid-template-columns: 1fr;
  }

  .funders li {
    grid-template-columns: 5.5rem 1fr;
    gap: 1rem;
  }

  .funders strong {
    font-size: 1.6rem;
  }

  .notice {
    padding: 1.3rem;
  }
}


/* ==========================================================================
   15. AJUSTEMENTS
   ========================================================================== */

/* Liste en lignes dans une demi-colonne : titre au-dessus du texte */
.rows--stacked > li {
  grid-template-columns: 1fr;
  gap: 0.4rem;
  padding: 1.2rem 0;
}

.level-offer .level-offer__code {
  margin: 0;
  font-size: 2.8rem;
  color: var(--color-black);
}

/* Intertitres de la frise : sans repère oblique */
.timeline > li.timeline__group {
  display: block;
  padding-left: 0;
}

.timeline > li.timeline__group::before,
.timeline > li.timeline__group::after {
  display: none;
}

/* Case à cocher placée dans un champ */
.field .check {
  display: flex;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-muted);
}

/* Photo à gauche : la barre rouge prolonge le bord oblique, en bas */
@media (min-width: 880px) {
  .page-hero--mirror .page-hero__visual .slash {
    --sh: 7rem;
    --sw: 3rem;
    top: auto;
    right: auto;
    bottom: 0;
    left: calc(100% - var(--h) * 0.6);
  }
}

@media (max-width: 879px) {
  /* Les lignes manuscrites longues passent à la ligne sur téléphone */
  .script--line {
    width: auto;
    white-space: normal;
  }

  /* Les colonnes de grille ne doivent pas s'élargir avec leur contenu */
  .account > *,
  .signup > *,
  .split > *,
  .legal > * {
    min-width: 0;
  }
}

@media (max-width: 879px) {
  /* En-tête texte seul : la barre rouge descend en bas à droite, loin du menu */
  .page-hero--plain .slash {
    --sh: 4.5rem;
    --sw: 1.5rem;
    top: auto;
    bottom: 0;
    right: -0.5rem;
  }

  .summary {
    position: relative;
  }

  .plans .plan--featured {
    padding-top: 3.8rem;
  }

  .next-lesson > div {
    min-width: 0;
  }

  .next-lesson__slash {
    width: 4rem;
    right: -1.5rem;
  }

  /* Média avant le texte sur ordinateur, après le texte sur téléphone */
  .split--text-first-mobile > :first-child {
    order: 2;
  }
}

/* Onglets de l'espace élève défilants sur téléphone, sans barre visible */
.account-nav__links {
  scrollbar-width: none;
}

.account-nav__links::-webkit-scrollbar {
  display: none;
}


/* ==========================================================================
   16. ACCUEIL — LES DEUX CENTRES (plan, horaires, accès)
   ========================================================================== */

/* Les deux centres partagent les mêmes rangées (plan, ville, phrase,
   tableau, équipements, lien) : leurs textes restent alignés. */
.campuses__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3.5rem;
}

.campus {
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  align-content: start;
}

/* Plans des écoles : Google Maps intégré, couleurs normales */
.campus .map iframe {
  height: 15rem;
  filter: none;
}

.campus__city {
  margin-top: 1.6rem;
  font-size: 1.6rem;
  font-weight: 400;
}

.campus__lead {
  margin-top: 0.5rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--color-muted);
}

.campus .info-table {
  margin-top: 1.2rem;
}

.campus .amenities {
  margin-top: 1.2rem;
}

.campus__link {
  justify-self: start;
  align-self: start;
  margin-top: 1.4rem;
}

@media (max-width: 879px) {
  .campuses__grid {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .campus + .campus {
    margin-top: 3rem;
  }
}


/* ==========================================================================
   17. LISTE DE PRIX ET TABLEAU DES COURS (version épurée)
   ========================================================================== */

/* --- Liste de prix : une ligne par formule ------------------------------ */
.price-list {
  border-top: 1px solid var(--color-black);
}

.price-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 2rem;
  align-items: center;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--color-line);
}

.price-list__name p {
  margin-top: 0.25rem;
  font-size: 0.82rem;
  color: var(--color-black);
}

.price-list__price {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  text-align: right;
  white-space: nowrap;
  color: var(--color-black);
}

.price-list__price small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0;
  color: var(--color-black);
}

/* Liste sans bouton (ex. test fide) : deux colonnes seulement */
.price-list li:not(:has(.btn)) {
  grid-template-columns: 1fr auto;
}

/* --- Tableau des cours : lignes blanches détachées sur le fond papier --- */
.course-table {
  border-collapse: separate;
  border-spacing: 0 0.5rem;
}

.course-table th {
  border-bottom: 0;
  padding-bottom: 0.2rem;
}

.course-table td {
  padding: 1.1rem 0.8rem;
  border-bottom: 0;
  background: #fff;
}

.course-table td:first-child {
  padding-left: 1.4rem;
  border-radius: 0.375rem 0 0 0.375rem;
}

.course-table td:last-child {
  padding-right: 1.4rem;
  border-radius: 0 0.375rem 0.375rem 0;
}

.course-table tbody tr:hover {
  background: none;
}

/* Au survol : fine barre rouge à gauche de la ligne */
.course-table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--color-red);
}

.course-table__lang strong {
  font-size: 1.05rem;
}

.course-table__price {
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 600;
}

/* Prix et bouton sur une ligne (la cellule reste une cellule de tableau) */
.course-table__action .course-table__price {
  display: inline-block;
  margin: 0 1rem 0 0;
  vertical-align: middle;
}

/* Niveau : simple texte en gras, sans cadre */
.level {
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 700;
}

/* « Afficher plus de cours » */
.course-more {
  display: flex;
  justify-content: center;
  margin-top: 1.6rem;
}

.course-more[hidden] {
  display: none;
}

@media (max-width: 879px) {
  .price-list li {
    grid-template-columns: 1fr auto;
    gap: 0.8rem 1rem;
  }

  .price-list li .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .course-table {
    border-spacing: 0;
  }

  .course-table td,
  .course-table td:first-child,
  .course-table td:last-child {
    padding: 0;
    border-radius: 0;
    background: none;
  }

  .course-table tbody tr:hover td:first-child {
    box-shadow: none;
  }
}

/* Ajustements du tableau des cours */
.filters {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}



.course-table__price small {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
}

.course-table td[data-label="Début"] {
  white-space: nowrap;
}

@media (max-width: 1100px) and (min-width: 880px) {
  .filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 879px) {
  .filters {
    grid-template-columns: 1fr 1fr;
  }
}



/* ==========================================================================
   18. MODULES COMMUNS : PETITES LISTES, DATES, FENÊTRE, DEVIS
   ========================================================================== */

/* Liste d'informations avec icônes (au pair) */
.facts-list {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.4rem;
  font-size: 0.88rem;
  color: var(--color-black);
}

.facts-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.facts-list .icon {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--color-red);
}

/* Formules entreprise : les étiquettes prennent la place du prix */
.offer-list .tags {
  justify-content: flex-end;
  max-width: 17rem;
}

/* Dates clés : deux semestres côte à côte */
.semesters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  margin-top: 2.4rem;
}

.semesters__range {
  margin-top: 0.3rem;
  font-size: 0.82rem;
  color: var(--color-black);
}

.date-list {
  margin-top: 1.2rem;
  border-top: 1px solid var(--color-black);
}

.date-list div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.88rem;
}

.date-list dt {
  color: var(--color-black);
}

.date-list dd {
  text-align: right;
  color: var(--color-black);
}

/* Début et fin des cours : en gras, avec un petit trait rouge */
.date-list .is-key dt {
  font-weight: 700;
}

.date-list .is-key dt::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.7rem;
  margin-right: 0.5rem;
  background: var(--color-red);
  clip-path: polygon(60% 0, 100% 0, 40% 100%, 0 100%);
}

/* Bandeau « Parlons de votre projet » */
.quote-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2rem 3rem;
}

/* Fenêtre (formulaire de devis) */
.modal {
  width: min(40rem, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
}

.modal::backdrop {
  background: rgba(29, 29, 27, 0.55);
}

.modal__body {
  padding: 1.8rem 2rem 1.9rem;
}

.modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-black);
}

.modal__close {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  background: none;
  color: var(--color-black);
  cursor: pointer;
}

.modal__close:hover {
  color: var(--color-red);
}

.modal .input,
.modal .select {
  height: 2.5rem;
}

.modal .textarea {
  min-height: 5.5rem;
}

.modal__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.4rem;
}

/* --- Espace élève aux couleurs du site --------------------------------- */

/* Onglet actif : même forme en biais que les boutons */
.account-nav__links a {
  position: relative;
  isolation: isolate;
  background: none !important;
}

.account-nav__links a::before {
  content: "";
  position: absolute;
  inset: 0 0.4rem;
  z-index: -1;
  border-radius: 0.1875rem;
  background: transparent;
  transform: skewX(-31deg);
  transition: background-color 0.2s ease;
}

.account-nav__links a:hover::before {
  background: #fff;
}

.account-nav__links a.is-active::before {
  background: var(--color-black);
}

/* Prochain cours : la date dans un bloc rouge en biais */
.next-lesson__date {
  position: relative;
  isolation: isolate;
  padding: 0.7rem 1.4rem;
}

.next-lesson__date::before {
  content: "";
  position: absolute;
  inset: 0 0.5rem;
  z-index: -1;
  border-radius: 0.1875rem;
  background: var(--color-red);
  transform: skewX(-31deg);
}

.next-lesson .btn {
  margin-right: 0;
}

/* Niveau de chaque inscription : pastille en biais comme dans le tableau */
.enrolment__level {
  position: relative;
  isolation: isolate;
  width: 4rem;
  height: 2.6rem;
  border-radius: 0;
  background: none;
}

.enrolment__level::before {
  content: "";
  position: absolute;
  inset: 0 0.45rem;
  z-index: -1;
  border: 1px solid var(--color-black);
  border-radius: 0.1875rem;
  transform: skewX(-31deg);
}

.enrolment {
  border-radius: 0.375rem;
  transition: box-shadow 0.2s ease;
}

.enrolment:hover {
  box-shadow: inset 3px 0 0 var(--color-red);
}

.balance > div {
  border-radius: 0.375rem;
}

.balance > div.is-due {
  background: #fff;
  box-shadow: inset 3px 0 0 var(--color-red);
}

.next-lesson {
  border-radius: 0.375rem;
}

@media (max-width: 879px) {
  .semesters {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .offer-list .tags {
    grid-column: 1 / -1;
    justify-content: flex-start;
    max-width: none;
  }

  .offer-list li {
    grid-template-columns: 1fr;
  }

  .modal__body {
    padding: 1.4rem 1.2rem;
  }

  .modal__foot {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .account-nav__links a {
    border: 0;
  }
}


/* En-tête « titre à gauche, texte à droite » (Soutien scolaire) */
.page-hero .hero-pair {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.5rem 4rem;
  align-items: end;
  max-width: none;
  padding-bottom: 3rem;
}

.hero-pair .btn-row {
  margin-top: 1.6rem;
}

@media (max-width: 879px) {
  .page-hero .hero-pair {
    grid-template-columns: 1fr;
    padding-bottom: 2.4rem;
  }
}


/* Dates clés au pair : chaque semestre dans une carte blanche, avec son
   nom dans une étiquette noire en biais et le nombre de semaines en grand */
.semester {
  padding: 1.6rem 1.8rem 1.2rem;
  border-radius: 0.375rem;
  background: #fff;
}

.semester__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.semester__name {
  position: relative;
  isolation: isolate;
  padding: 0.45rem 1.4rem;
  font-family: var(--font-title);
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
}

.semester__name::before {
  content: "";
  position: absolute;
  inset: 0 0.35rem;
  z-index: -1;
  border-radius: 0.1875rem;
  background: var(--color-black);
  transform: skewX(-31deg);
}

.semester__weeks {
  font-size: 0.8rem;
  color: var(--color-black);
}

.semester__weeks strong {
  margin-right: 0.2rem;
  font-family: var(--font-title);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.semester .semesters__range {
  margin-top: 0.8rem;
}

.semester .date-list div:last-child {
  border-bottom: 0;
}

/* Bande orange des niveaux posée en bas à droite de la photo d'en-tête
   (Soutien scolaire) */
.page-hero__visual .hero-levels {
  z-index: 2;
  padding: 1.1rem var(--bleed) 1.1rem 4.5rem;
}

@media (max-width: 879px) {
  .page-hero__visual .hero-levels {
    left: auto;
    right: 0;
    padding: 0.8rem var(--gutter) 0.8rem 3rem;
  }
}


/* ==========================================================================
   19. ÉPURATION : GRILLE COMMUNE ET ALIGNEMENTS
   Tout s'aligne sur le bord gauche du conteneur ; les colonnes de prix et
   d'étiquettes ont une largeur fixe pour tomber pile d'une ligne à l'autre.
   ========================================================================== */

/* Accueil : cinq offres sur une ligne, texte aligné à gauche comme le reste */
.features__grid {
  grid-template-columns: repeat(5, 1fr);
  padding: 0;
}

.features .feature {
  align-items: flex-start;
  padding: 2.4rem 1.4rem 2.2rem;
  text-align: left;
  color: inherit;
  transition: background-color 0.2s ease;
}

.features .feature:first-child {
  padding-left: 0;
}

.features .feature:not(:first-child) {
  border-left: 1px solid var(--color-line);
}

.features .feature:nth-child(n + 5) {
  border-top: 0;
}

.features .feature:hover .feature__link {
  color: var(--color-red);
  transform: translateX(4px);
}

.features .feature__icon {
  width: 2.2rem;
  height: 2.2rem;
}

.features .feature__title {
  margin-top: 1rem;
  font-size: 1.1rem;
}

.features .feature__text {
  max-width: none;
  margin-top: 0.35rem;
  text-wrap: pretty;
}

/* Accueil : les deux liens vers les écoles */
.schools__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  margin-top: 1.6rem;
}

/* Listes de prix : colonnes fixes, prix alignés à droite */
.price-list li {
  grid-template-columns: minmax(0, 1fr) 7rem auto;
  gap: 1.5rem;
}

.price-list li:not(:has(.btn)) {
  grid-template-columns: minmax(0, 1fr) 7rem;
}

.price-list__price {
  font-size: 1.45rem;
}

.price-list li .btn {
  justify-self: end;
}

/* Formules entreprise : colonne d'étiquettes fixe, alignée à gauche */
.offer-list li,
.offer-list li:not(:has(.btn)) {
  grid-template-columns: 1fr 15rem;
}

.offer-list .tags {
  justify-content: flex-start;
  max-width: none;
}

@media (max-width: 1100px) and (min-width: 880px) {
  .features__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .features .feature:nth-child(4) {
    padding-left: 0;
    border-left: 0;
  }

  .features .feature:nth-child(n + 4) {
    border-top: 1px solid var(--color-line);
  }
}

@media (max-width: 879px) {
  .features__grid {
    grid-template-columns: 1fr;
  }

  .features .feature,
  .features .feature:first-child {
    display: grid;
    grid-template-columns: 2.4rem 1fr auto;
    align-items: center;
    column-gap: 1rem;
    padding: 1.2rem 0;
    border-left: 0;
  }

  .features .feature + .feature {
    border-top: 1px solid var(--color-line);
  }

  .features .feature__icon {
    grid-row: span 2;
  }

  .features .feature__title {
    margin: 0;
  }

  .features .feature__link {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin: 0;
    padding: 0;
  }

  .price-list li,
  .price-list li:not(:has(.btn)) {
    grid-template-columns: 1fr auto;
  }

  .offer-list li,
  .offer-list li:not(:has(.btn)) {
    grid-template-columns: 1fr;
  }
}