/*
Theme Name: UFUK Bénin
Theme URI: https://ufukbenin.com
Author: École Internationale UFUK Bénin
Description: Thème institutionnel pour l'École Internationale UFUK Bénin. Clair, aéré, écrit en mobile d'abord.
Version: 7.2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ufuk
Tags: education, school, institutional, light, responsive
*/

/* ============================================================
   Parti pris

   La page est blanche. Le bleu sert au texte des titres, jamais
   de fond plein sur de grandes surfaces. L'orange n'apparaît que
   par petites touches : sur-titre, puces, liens.

   Ce sont les ombres et le blanc tournant qui séparent les blocs,
   pas des traits ni des aplats de couleur.

   Écrit en mobile d'abord : les règles de base décrivent le
   téléphone, les paliers `min-width` ajoutent ensuite.
   ============================================================ */

:root {
  --bleu:        #2F4899;
  --bleu-nuit:   #16234C;
  --orange:      #F06030;   /* logo uniquement, plus utilise dans la page */
  --orange-fonce:#D64E22;
  /* Pas de couleur decorative. L'orange ne vit plus que dans le logo.
     La couleur ne sert qu'a ce qui est fonctionnel : une action, un lien. */
  --accent:      #6E7584;              /* etiquettes, petites capitales */
  --trait:       rgba(22, 35, 76, .16); /* filets verticaux */
  --puce:        #C3C8D2;              /* puces de liste */
  --whatsapp:    #25D366;

  --encre:       #1B1F2A;
  --gris:        #5E6572;
  --gris-clair:  #9AA1AE;
  --papier:      #F6F7FA;
  --carte-fonce: #1E2E5E;   /* cartes des atouts */
  --ligne:       rgba(22, 35, 76, .09);
  --ligne-fine:  rgba(22, 35, 76, .06);

  --ombre-douce: 0 2px 10px rgba(22, 35, 76, .04);
  --ombre-carte: 0 12px 34px rgba(22, 35, 76, .07);
  --ombre-levee: 0 20px 48px rgba(22, 35, 76, .12);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --largeur: 1200px;
  --gouttiere: 20px;
  --section-y: clamp(56px, 9vw, 118px);
  --rayon: 16px;
  --sortie: cubic-bezier(.16, 1, .3, 1);
  --transition: 260ms var(--sortie);
  --entete-h: 62px;
}
@media (min-width: 600px) { :root { --gouttiere: 28px; } }
@media (min-width: 980px) { :root { --gouttiere: 34px; --entete-h: 74px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h) + 12px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.68;
  font-weight: 400;
  color: var(--gris);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (min-width: 980px) { body { font-size: 17px; } }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.028em;
  margin: 0 0 .5em;
  color: var(--bleu-nuit);
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 7vw, 3.5rem); line-height: 1.06; letter-spacing: -.035em; }
h2 { font-size: clamp(1.6rem, 4.6vw, 2.5rem); }
h3 { font-size: clamp(1.08rem, 2.6vw, 1.32rem); font-family: var(--sans); font-weight: 600; letter-spacing: -.015em; }

p { margin: 0 0 1.15em; max-width: 66ch; }

a { color: var(--bleu); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bleu-nuit); }

strong { color: var(--encre); font-weight: 600; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; border-radius: 3px; }

.contenu { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }

.saut-contenu { position: absolute; left: -9999px; top: 0; background: var(--bleu-nuit); color: #fff; padding: 12px 18px; z-index: 999; }
.saut-contenu:focus { left: 8px; top: 8px; }

/* Sur-titre : la seule majuscule du thème, réservée à ce rôle */
.surtitre {
  display: block; margin: 0 0 18px;
  font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent);
}

/* ------------------------------------------------------------
   Boutons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 50px; padding: 14px 28px;
  font-family: var(--sans); font-size: .96rem; font-weight: 600; letter-spacing: -.01em;
  border: 1px solid transparent; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: background var(--transition), color var(--transition),
              transform var(--transition), box-shadow var(--transition);
}
.btn:active { transform: translateY(1px); }
.btn-plein { background: var(--bleu-nuit); color: #fff; box-shadow: 0 8px 24px rgba(22,35,76,.22); }
.btn-plein:hover { background: #0F1A3A; color: #fff; box-shadow: 0 14px 34px rgba(22,35,76,.28); }
.btn-orange { background: var(--bleu-nuit); color: #fff; box-shadow: 0 8px 24px rgba(22,35,76,.22); }
.btn-orange:hover { background: #0F1A3A; color: #fff; box-shadow: 0 14px 34px rgba(22,35,76,.28); }

/* WhatsApp : la seule couleur de la page, et elle est imposee par la marque. */
.btn-whatsapp { background: var(--whatsapp); color: #fff; box-shadow: 0 8px 24px rgba(37,211,102,.26); }
.btn-whatsapp:hover { background: #1EB155; color: #fff; box-shadow: 0 14px 34px rgba(37,211,102,.32); }
.btn-contour { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.appel-boite .btn-contour:hover { background: rgba(255,255,255,.1); color: #fff; }


/* Lien texte souligné, en orange */
.lien-texte { font-weight: 500; font-size: .96rem; color: var(--bleu); text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------------
   En-tête — blanc, discret
   ------------------------------------------------------------ */
.entete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
          backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--ligne-fine);
}
@supports not (backdrop-filter: blur(1px)) { .entete { background: #fff; } }

.entete-inner { display: flex; align-items: center; gap: 6px; min-height: var(--entete-h); }
@media (min-width: 560px) { .entete-inner { gap: 10px; } }
@media (min-width: 980px)  { .entete-inner { gap: 14px; } }
@media (min-width: 1180px) { .entete-inner { gap: 20px; } }

/* La marque occupe la place restante et pousse le reste a droite. */
.marque {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; min-width: 0; margin-right: auto;
}
.marque img { height: 54px; width: auto; flex-shrink: 0; }
@media (min-width: 620px) { .marque img { height: 40px; } }
@media (min-width: 980px) { .marque img { height: 42px; } }

/* Sur petit ecran le logo suffit : il porte deja le nom. Le texte
   reapparait des qu'il y a la place de l'ecrire en entier, plutot que
   de le couper par des points de suspension. */
.marque-texte { display: none; flex-direction: column; line-height: 1.15; min-width: 0; }
@media (min-width: 620px) { .marque-texte { display: flex; } }
.marque-nom {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.02em;
  color: var(--bleu-nuit);
  font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marque-sous {
  font-size: .58rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gris-clair);
}
@media (min-width: 620px) { .marque-nom { font-size: 1rem; } }
@media (min-width: 980px)  { .marque-nom { font-size: 1.02rem; } .marque-sous { font-size: .6rem; } }
@media (min-width: 1180px) { .marque-nom { font-size: 1.12rem; } .marque-sous { font-size: .62rem; } }

/* Menu : deux traits, pas trois.
   Trois traits datent le dessin ; deux traits bien espaces disent la
   meme chose plus calmement. Pas de cadre non plus : a cote des icones
   de reseaux qui n'en ont pas, un bouton encadre faisait deux freres
   habilles differemment. Le seul objet de la barre reste l'inscription. */
.bascule-menu {
  display: grid; place-items: center; width: 44px; height: 46px; flex-shrink: 0;
  background: none; border: 0; padding: 0;
  color: var(--bleu-nuit); cursor: pointer;
  transition: opacity var(--transition);
}
@media (min-width: 980px) { .bascule-menu { width: 44px; } }
.bascule-menu:hover { opacity: .6; }
.bascule-menu span { display: block; width: 26px; height: 2px; border-radius: 2px; background: var(--bleu-nuit); margin: 6px 0; }

/* Reseaux sociaux, chacun dans sa couleur de marque.
   La zone tactile fait 44 px de haut, le dessin 20. */
.ufuk-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.entete-reseaux { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
@media (min-width: 560px) { .entete-reseaux { gap: 4px; } }

.reseau {
  display: grid; place-items: center;
  width: 34px; height: 44px; flex-shrink: 0;
  transition: transform var(--transition), filter var(--transition);
}
@media (min-width: 560px) { .reseau { width: 38px; } }

/* Sous 620 px, seul WhatsApp reste dans la barre : les deux autres
   reparaissent dans le menu, ecrits en toutes lettres. */
.reseau-facebook, .reseau-instagram { display: none; }
@media (min-width: 620px) { .reseau-facebook, .reseau-instagram { display: grid; } }
.reseau svg { width: 21px; height: 21px; }
.reseau:hover { transform: translateY(-1px); filter: brightness(1.08) saturate(1.1); }

.reseau-facebook  svg { fill: #1877F2; }
.reseau-instagram svg { fill: url(#ufuk-degrade-instagram); }

.reseau-whatsapp svg {
  width: 32px; height: 32px; padding: 6px;
  background: var(--whatsapp); fill: #fff; border-radius: 50%;
}
.reseau-whatsapp:hover { filter: brightness(1.06); }

/* L'inscription ne disparait jamais : c'est le seul geste que la page
   demande, et le cacher sur mobile reviendrait a le cacher a presque
   tout le monde. */
.entete-cta {
  flex-shrink: 0; min-height: 40px; padding: 9px 18px;
  font-size: .84rem; letter-spacing: -.01em;
  box-shadow: 0 6px 18px rgba(22, 35, 76, .18);
}
@media (min-width: 560px) { .entete-cta { padding: 11px 20px; font-size: .9rem; } }
@media (min-width: 980px) { .entete-cta { min-height: 44px; padding: 11px 22px; } }

.nav-principale { display: none; }
.entete.nav-ouverte .nav-principale {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; padding: 6px var(--gouttiere) 20px;
  border-bottom: 1px solid var(--ligne-fine); box-shadow: var(--ombre-carte);
  max-height: calc(100vh - var(--entete-h)); overflow-y: auto;
}
.nav-principale ul { list-style: none; margin: 0; padding: 0; }
.nav-principale a {
  display: block; padding: 15px 4px; border-bottom: 1px solid var(--ligne-fine);
  color: var(--encre); font-size: 1rem; font-weight: 500; text-decoration: none;
}
.nav-principale a:hover { color: var(--bleu); }

/* Les reseaux en bas du menu : les signes seuls, en grand.
   Dans un panneau il y a la place de les dessiner lisiblement, donc
   un nom ecrit a cote n'apprenait rien a personne.

   Selecteur double partout : .nav-principale a est plus specifique
   que .nav-reseau seul, et lui imposerait sinon son padding, son
   filet et son display:block. */
.nav-reseaux {
  display: flex; align-items: center; gap: 20px;
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--ligne-fine);
}
.nav-reseaux .nav-reseau {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  padding: 0; border: 0; border-bottom: 0; border-radius: 0;
  transition: transform var(--transition), filter var(--transition);
}
.nav-reseaux .nav-reseau:hover {
  background: none; transform: translateY(-2px);
  filter: brightness(1.08) saturate(1.1);
}
.nav-reseaux .nav-reseau svg { width: 30px; height: 30px; flex-shrink: 0; }
.nav-reseaux .nav-reseau[href*="facebook"]  svg { fill: #1877F2; }
.nav-reseaux .nav-reseau[href*="instagram"] svg { fill: url(#ufuk-degrade-instagram); }
@media (min-width: 620px) { .nav-reseaux { display: none; } }


@media (min-width: 980px) {
  .bascule-menu { display: none; }
  .nav-principale { display: block; }

  /* L'ordre du HTML sert le mobile : le menu y est le dernier element,
     juste avant son panneau deroulant. Sur grand ecran on le remet a
     sa place visuelle, entre le nom et les deux actions. */
  .marque          { order: 1; }
  .nav-principale  { order: 2; }
  .entete-reseaux  { order: 3; }
  .entete-cta      { order: 4; }
  .nav-principale ul { display: flex; align-items: center; gap: 2px; }
  .nav-principale a {
    padding: 9px 10px; border-bottom: 0; border-radius: 999px;
    font-size: .89rem; font-weight: 500; color: var(--encre);
    transition: color var(--transition), background var(--transition);
  }
  .nav-principale a:hover,
  .nav-principale .current-menu-item > a { background: var(--papier); color: var(--bleu-nuit); }
}

/* ------------------------------------------------------------
   Hero — deux colonnes, fond blanc
   ------------------------------------------------------------ */
.hero { padding: 44px 0 clamp(48px, 8vw, 88px); }
@media (min-width: 980px) { .hero { padding: 76px 0 96px; } }

.hero-grille { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
@media (min-width: 980px) { .hero-grille { grid-template-columns: 1fr 1fr; gap: 60px; } }

.hero h1 { margin-bottom: .42em; }
.hero-intro { font-size: 1.04rem; font-weight: 300; line-height: 1.66; max-width: 46ch; margin-bottom: 1.5em; }
@media (min-width: 980px) { .hero-intro { font-size: 1.1rem; } }

.hero-points { list-style: none; margin: 0 0 30px; padding: 0; }
.hero-points li { position: relative; padding-left: 20px; margin-bottom: 12px; font-size: .97rem; max-width: 46ch; }
.hero-points li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--puce);
}

.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
@media (min-width: 520px) { .hero-actions { flex-direction: row; align-items: center; gap: 22px; } }
.hero-actions .btn { width: 100%; }
@media (min-width: 520px) { .hero-actions .btn { width: auto; } }

.hero-visuel {
  border-radius: var(--rayon); overflow: hidden;
  box-shadow: var(--ombre-carte); background: var(--papier);
  aspect-ratio: 4 / 3;
}
.hero-visuel img { width: 100%; height: 100%; object-fit: cover; }
.hero-visuel-vide { display: grid; place-items: center; height: 100%; padding: 30px; }
.hero-visuel-vide img { width: auto; height: auto; max-height: 46%; opacity: .3; object-fit: contain; }

/* Résumé sous le hero, filet orange à gauche */
.resume { border-top: 1px solid var(--ligne-fine); padding: 34px 0 0; }
.resume p {
  margin: 0; padding-left: 20px; border-left: 3px solid var(--trait);
  font-weight: 300; font-size: 1rem; line-height: 1.75; max-width: 92ch; color: var(--gris);
}

/* ------------------------------------------------------------
   Sections
   ------------------------------------------------------------ */
.section { padding: var(--section-y) 0; }
.section-claire { background: var(--papier); }

/* Section sans en-tête : la relance de mi-page se rattache visuellement
   aux résultats qui la précèdent, d'où l'absence de marge haute. */
.section-sans-tete { padding-top: 0; }

.section-tete { max-width: 60ch; margin-bottom: 34px; }
@media (min-width: 980px) { .section-tete { margin-bottom: 50px; } }
.section-tete p { font-weight: 300; margin-bottom: 0; }
@media (min-width: 980px) { .section-tete p { font-size: 1.08rem; } }

/* ------------------------------------------------------------
   Résultats — un tableau par programme.
   Les chiffres sont du texte dans une structure de tableau : les
   moteurs et les assistants les lisent, un lecteur d'écran annonce
   l'examen avant le taux.
   ------------------------------------------------------------ */
.resultats-table {
  width: 100%; border-collapse: collapse; text-align: left;
  background: #fff; border: 1px solid var(--ligne-fine);
  border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre-carte);
}
.resultats-table + .resultats-table { margin-top: 34px; }
.resultats-table caption {
  text-align: left; padding: 0 0 14px;
  font-size: .74rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gris-clair);
}
.resultats-table th, .resultats-table td { padding: 18px 20px; vertical-align: middle; }
@media (min-width: 820px) { .resultats-table th, .resultats-table td { padding: 22px 28px; } }
.resultats-table thead th {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gris-clair);
  border-bottom: 1px solid var(--ligne-fine); padding-top: 16px; padding-bottom: 14px;
}
.resultats-table tbody tr + tr th, .resultats-table tbody tr + tr td { border-top: 1px solid var(--ligne-fine); }
.resultats-table tbody th { font-weight: 400; }

.resultat-examen {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
  display: block; margin-bottom: 3px;
}
.resultat-libelle {
  display: block; margin: 0;
  font-size: .84rem; font-weight: 300; color: var(--gris);
}
.resultat-valeur {
  text-align: right; white-space: nowrap;
  font-family: var(--serif); font-weight: 400; line-height: 1;
  font-size: clamp(1.7rem, 5vw, 2.3rem); letter-spacing: -.035em; color: var(--bleu-nuit);
}

/* Les deux programmes */
.programmes { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 820px) { .programmes { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
.programme {
  background: #fff; border: 1px solid var(--ligne-fine); border-radius: var(--rayon);
  padding: 30px 26px; box-shadow: var(--ombre-carte);
}
@media (min-width: 980px) { .programme { padding: 40px 36px; } }
.programme h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem,3vw,1.7rem); letter-spacing: -.028em; margin-bottom: .5em; }
.programme p { font-weight: 300; font-size: .97rem; margin-bottom: 1.3em; }
.programme-liste { list-style: none; margin: 0; padding: 0; }
.programme-liste li {
  position: relative; padding: 10px 0 10px 22px; font-size: .94rem;
  border-top: 1px solid var(--ligne-fine);
}
.programme-liste li::before {
  content: ""; position: absolute; left: 0; top: 1.15em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--puce);
}

/* Questions fréquentes */
.faq { max-width: 78ch; border-top: 1px solid var(--ligne-fine); }
.faq-item { border-bottom: 1px solid var(--ligne-fine); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--sans); font-size: 1.02rem; font-weight: 500;
  color: var(--bleu-nuit); letter-spacing: -.015em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform var(--transition);
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item summary:hover { color: var(--bleu); }
.faq-reponse { padding: 0 0 22px; }
.faq-reponse p { margin: 0; font-weight: 300; font-size: .97rem; max-width: 72ch; }

/* ------------------------------------------------------------
   Les quatre sections.
   Sur grand écran elles tiennent sur une seule ligne : ce sont
   les quatre étapes d'un même parcours, les couper en trois plus
   un casserait la lecture.
   ------------------------------------------------------------ */
.cycles { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 720px)  { .cycles { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (min-width: 1180px) { .cycles { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.cycle {
  background: #fff; border: 1px solid var(--ligne-fine); border-radius: var(--rayon);
  overflow: hidden; box-shadow: var(--ombre-carte);
  transition: transform var(--transition), box-shadow var(--transition);
}
.cycle:hover { transform: translateY(-3px); box-shadow: var(--ombre-levee); }

/* L'image coiffe la carte, à ras bord. Le rapport est fixé ici et non par
   le fichier : les photos ne viennent pas toutes du même appareil. */
.cycle-visuel { background: var(--papier); aspect-ratio: 16 / 10; overflow: hidden; }
.cycle-visuel img { width: 100%; height: 100%; object-fit: cover; }

/* La marge intérieure est portée par le corps, pas par la carte,
   sinon elle repousserait aussi l'image. */
.cycle-corps { padding: 24px 24px 28px; }
@media (min-width: 980px)  { .cycle-corps { padding: 28px 28px 32px; } }
/* Quatre colonnes resserrent les cartes : on réduit la marge intérieure
   au même palier, sinon le texte se retrouve dans un couloir. */
@media (min-width: 1180px) { .cycle-corps { padding: 24px 22px 28px; } }
.cycle-age { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.cycle h3 { margin-bottom: .5em; }
.cycle p { font-size: .96rem; font-weight: 300; margin-bottom: 0; }
.cycle .lien-texte { font-size: .92rem; }

/* Atouts — neuf entrées, trois par rangée : aucune ligne orpheline */
.atouts { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 580px)  { .atouts { grid-template-columns: repeat(2, 1fr); gap: 36px 40px; } }
@media (min-width: 1020px) { .atouts { grid-template-columns: repeat(3, 1fr); gap: 46px 52px; } }
.atout h3 { margin-bottom: .45em; }
.atout p { font-size: .95rem; font-weight: 300; margin: 0; }
.atout-marque { width: 30px; height: 2px; border-radius: 999px; background: var(--bleu-nuit); margin-bottom: 18px; }

/* ------------------------------------------------------------
   Articles
   ------------------------------------------------------------ */
.articles { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 720px)  { .articles { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1020px) { .articles { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.carte {
  background: #fff; border: 1px solid var(--ligne-fine); border-radius: var(--rayon);
  overflow: hidden; box-shadow: var(--ombre-carte);
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-levee); }
.carte-visuel { display: block; aspect-ratio: 16 / 10; background: var(--papier); overflow: hidden; }
.carte-visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--sortie); }
.carte:hover .carte-visuel img { transform: scale(1.04); }
.carte-corps { padding: 22px 24px 26px; }
.carte-date { font-size: .76rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-clair); margin-bottom: 9px; }
.carte h3 { margin-bottom: .45em; }
.carte h3 a { color: inherit; text-decoration: none; }
.carte h3 a:hover { color: var(--bleu); }
.carte p { font-size: .94rem; font-weight: 300; margin: 0; }
.apres-articles { margin: 30px 0 0; }

/* Relance à mi-page */
.relance {
  display: flex; flex-direction: column; gap: 18px;
  background: var(--papier); border: 1px solid var(--ligne-fine);
  border-radius: var(--rayon); padding: 26px 24px;
}
@media (min-width: 760px) {
  .relance { flex-direction: row; align-items: center; justify-content: space-between; gap: 30px; padding: 30px 36px; }
}
.relance p { margin: 0; font-weight: 300; font-size: 1.02rem; max-width: 52ch; color: var(--bleu-nuit); }
.relance-actions { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 520px) { .relance-actions { flex-direction: row; align-items: center; gap: 20px; } }
.relance-actions .btn { white-space: nowrap; }

/* ------------------------------------------------------------
   Appel à l'action — le seul bloc sombre de la page
   ------------------------------------------------------------ */
.appel { padding: var(--section-y) 0; }
.appel-boite {
  position: relative; overflow: hidden;
  background: var(--bleu-nuit); color: #fff;
  border-radius: clamp(18px, 3vw, 28px);
  padding: clamp(38px, 6vw, 68px) clamp(26px, 5vw, 62px);
}
.appel-boite::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: conic-gradient(from 208deg at 50% 128%,
    transparent 0deg 10deg, rgba(247,154,51,.13) 10deg 15deg,
    transparent 15deg 25deg, rgba(247,154,51,.10) 25deg 30deg,
    transparent 30deg 40deg, rgba(247,154,51,.14) 40deg 45deg,
    transparent 45deg 55deg, rgba(247,154,51,.10) 55deg 60deg,
    transparent 60deg 360deg);
}
.appel-boite > * { position: relative; }
.appel-boite h2 { color: #fff; }
.appel-boite p { color: rgba(255,255,255,.78); font-weight: 300; font-size: 1.04rem; max-width: 54ch; }
.appel-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
@media (min-width: 560px) { .appel-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px; } }
.appel-actions .lien-texte { color: #fff; }

/* Adresse dans le bloc final */
.appel-adresse {
  margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.16);
  font-style: normal; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,.78);
}
.appel-adresse strong { color: #fff; font-weight: 500; }
.appel-horaires { color: rgba(255,255,255,.66); }
.appel-adresse .lien-texte { color: #fff; }
.appel .btn-contour { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); box-shadow: none; }
.appel .btn-contour:hover { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }

/* Date de mise à jour */
.maj { margin: 26px 0 0; font-size: .82rem; font-weight: 300; color: var(--gris-clair); }

/* ------------------------------------------------------------
   Contenu d'article / page
   ------------------------------------------------------------ */
.page-tete { padding: 40px 0 32px; border-bottom: 1px solid var(--ligne-fine); }
@media (min-width: 980px) { .page-tete { padding: 66px 0 46px; } }
.page-tete p { margin: 0; font-weight: 300; }

.article-corps { padding: 38px 0 60px; }
@media (min-width: 980px) { .article-corps { padding: 58px 0 92px; } }
/* Colonne de lecture — 740 px, centrée.
   Au-delà, l'œil perd son repère en revenant à la ligne. */
.article-corps .contenu { max-width: 740px; }
.article-corps h2 { margin-top: 1.6em; }
.article-corps ul, .article-corps ol { padding-left: 1.25em; }
.article-corps li { margin-bottom: .45em; }
.article-corps blockquote { margin: 1.8em 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--trait); color: var(--gris); font-weight: 300; }
.article-corps img { border-radius: var(--rayon); margin: 1.7em 0; box-shadow: var(--ombre-carte); }

/* Tableaux dans le corps d'un article
   -----------------------------------
   Le défilement horizontal appartient à l'enveloppe, jamais au tableau
   lui-même : un `display: block` sur <table> détruit l'alignement des
   colonnes, les cellules cessant de se répondre d'une ligne à l'autre.
   WordPress enveloppe déjà ses tableaux dans <figure class="wp-block-table">,
   c'est donc elle qui défile. */
.article-corps .wp-block-table {
  margin: 2.4em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.article-corps table {
  display: table;
  /* Pas de largeur imposée : un tableau à deux colonnes tiré sur toute
     la colonne de texte laisse un vide au milieu, l'intitulé d'un côté,
     la valeur de l'autre. Il se dimensionne donc sur son contenu, et ne
     déborde jamais. */
  width: auto;
  max-width: 100%;
  border-collapse: collapse;
  text-align: left;
  background: #fff;
  border: 1px solid var(--ligne-fine);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  font-size: .95rem;
  /* Pas d'overflow:hidden ici : la légende d'un tableau se place hors
     de sa boîte, et se ferait rogner sur son premier caractère. Les
     angles arrondis se voient de toute façon, la bordure les dessine. */
}

.article-corps table caption {
  caption-side: top; text-align: left;
  padding: 0 0 14px;
  font-family: var(--sans);
  font-size: .74rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gris-clair);
}

.article-corps th,
.article-corps td { padding: 13px 20px; text-align: left; vertical-align: middle; }
@media (min-width: 720px)  { .article-corps th, .article-corps td { padding: 15px 26px; } }
@media (min-width: 1020px) { .article-corps th, .article-corps td { padding: 17px 30px; } }

/* La colonne de valeurs garde une réserve : sans elle, « 20 » et
   « 18,045 » ne s'alignent pas sur la même verticale. */
.article-corps tbody td { min-width: 5.5em; }

.article-corps thead th {
  font-family: var(--sans);
  font-size: .72rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--gris-clair);
  border-bottom: 1px solid var(--ligne-fine);
  white-space: nowrap;
}

.article-corps tbody tr + tr th,
.article-corps tbody tr + tr td { border-top: 1px solid var(--ligne-fine); }

/* L'intitulé de ligne porte l'information : il reste à gauche, en bleu. */
.article-corps tbody th {
  font-family: var(--sans); font-weight: 500;
  color: var(--bleu-nuit);
}

/* Les valeurs numériques s'alignent à droite pour se comparer d'un
   coup d'œil, et ne se coupent jamais en deux lignes. */
.article-corps tbody td {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--gris);
}
.article-corps tbody td strong { color: var(--bleu-nuit); }

.pagination { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 40px; }
.pagination .page-numbers {
  display: grid; place-items: center; min-width: 46px; min-height: 46px; padding: 0 15px;
  background: #fff; border: 1px solid var(--ligne-fine); border-radius: 999px;
  box-shadow: var(--ombre-douce); text-decoration: none; color: var(--bleu-nuit); font-size: .93rem;
}
.pagination .current { background: var(--bleu-nuit); border-color: var(--bleu-nuit); color: #fff; }

.form-recherche { display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
@media (min-width: 480px) { .form-recherche { flex-direction: row; } }
.form-recherche input[type="search"] {
  flex: 1; min-height: 50px; padding: 13px 20px; font: inherit; font-size: 16px;
  border: 1px solid var(--ligne); border-radius: 999px; background: #fff; color: var(--encre);
  box-shadow: var(--ombre-douce);
}
.form-recherche input[type="search"]:focus { border-color: var(--bleu); outline: none; box-shadow: 0 0 0 3px rgba(47,72,153,.14); }
.form-recherche .btn { width: 100%; }
@media (min-width: 480px) { .form-recherche .btn { width: auto; } }

/* ------------------------------------------------------------
   Pied de page — gris très clair
   ------------------------------------------------------------ */
.pied { background: var(--papier); color: var(--gris); padding: 52px 0 0; font-size: .94rem; }
@media (min-width: 980px) { .pied { padding: 76px 0 0; } }

.pied-grille { display: grid; grid-template-columns: 1fr; gap: 34px; padding-bottom: 38px; }
@media (min-width: 640px)  { .pied-grille { grid-template-columns: repeat(2, 1fr); gap: 38px; padding-bottom: 48px; } }
@media (min-width: 1020px) { .pied-grille { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 46px; padding-bottom: 60px; } }
/* Tant qu'aucun menu de pied n'est rattache, il ne reste que deux
   colonnes : elles s'etalent au lieu de laisser deux trous. */
@media (min-width: 1020px) { .pied-grille-courte { grid-template-columns: 1.5fr 1fr; gap: 72px; } }

.pied h3 {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--gris-clair); margin-bottom: 18px;
}
.pied a { color: var(--gris); text-decoration: none; }
.pied a:hover { color: var(--bleu); }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 2px; }
.pied li a { display: inline-block; padding: 7px 0; }
.pied-logo img { height: 54px; width: auto; margin-bottom: 18px; }
.pied-resume { font-weight: 300; max-width: 34ch; margin-bottom: 20px; }
.pied-adresse { font-style: normal; font-weight: 300; line-height: 1.75; }
.pied-contacts { margin-top: 14px; }
.pied-itineraire { margin: 12px 0 0; }
.pied-horaires {
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid var(--ligne-fine);
  font-size: .88rem; font-weight: 300; line-height: 1.6; color: var(--gris-clair);
}

/* Memes signes et memes couleurs que dans l'en-tete. */
.pied-social { display: flex; gap: 12px; margin-top: 20px; }
.pied-social a {
  display: grid; place-items: center; width: 42px; height: 42px;
  background: #fff; border: 1px solid var(--ligne-fine); border-radius: 12px;
  box-shadow: var(--ombre-douce);
  transition: transform var(--transition), box-shadow var(--transition);
}
.pied-social a:hover { transform: translateY(-2px); box-shadow: var(--ombre-carte); }
.pied-social svg { width: 19px; height: 19px; }
.pied-facebook  svg { fill: #1877F2; }
.pied-instagram svg { fill: url(#ufuk-degrade-instagram); }
.pied-youtube   svg { fill: #FF0033; }

.pied-bas {
  border-top: 1px solid var(--ligne-fine); padding: 22px 0 28px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: .84rem; font-weight: 300; color: var(--gris-clair);
}
@media (min-width: 720px) { .pied-bas { flex-direction: row; flex-wrap: wrap; gap: 14px; justify-content: space-between; } }


/* ------------------------------------------------------------
   La vie à l'école — galerie légendée.

   Les images ne sont pas décoratives ici : elles sont le contenu
   de la section. D'où <figure> et <figcaption>, et un texte
   alternatif renseigné pour chacune.
   ------------------------------------------------------------ */
.galerie { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 720px)  { .galerie { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1020px) { .galerie { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

.vue { margin: 0; }
.vue img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  background: #fff; border: 1px solid var(--ligne-fine);
  border-radius: var(--rayon); box-shadow: var(--ombre-carte);
}
.vue figcaption {
  margin-top: 14px;
  font-size: .82rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gris-clair);
}


/* ------------------------------------------------------------
   Frais de scolarité

   Six colonnes ne tiennent pas sur un téléphone. Plutôt que de
   réduire le texte jusqu'à l'illisible, le tableau défile
   horizontalement dans son cadre — et reste atteignable au
   clavier grâce au tabindex posé sur l'enveloppe.
   ------------------------------------------------------------ */
.grille-tarifs + .grille-tarifs { margin-top: clamp(44px, 6vw, 72px); }
.grille-tarifs .section-tete { margin-bottom: 24px; }

.tableau-defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--rayon); }
.tableau-defilant:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }

.tarifs-table {
  width: 100%; min-width: 660px;
  border-collapse: collapse; text-align: left;
  background: #fff; border: 1px solid var(--ligne-fine);
  border-radius: var(--rayon); box-shadow: var(--ombre-carte);
  /* Pas d'overflow:hidden : la légende d'un tableau se place hors de
     sa boîte et se faisait rogner sa première lettre. Les angles
     restent arrondis sans lui, le fond étant uni. */
}
.tarifs-table caption {
  text-align: left; padding: 0 0 14px;
  font-size: .74rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gris-clair);
}
.tarifs-table th, .tarifs-table td { padding: 16px 18px; vertical-align: top; }
@media (min-width: 980px) { .tarifs-table th, .tarifs-table td { padding: 20px 22px; } }

.tarifs-table thead th {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gris-clair);
  border-bottom: 1px solid var(--ligne-fine); white-space: nowrap;
}
/* L'échéance sous l'intitulé de colonne : c'est la question que pose
   toute famille devant une grille en tranches. */
.th-note {
  display: block; margin-top: 4px;
  font-size: .68rem; font-weight: 400; letter-spacing: .02em;
  text-transform: none; color: var(--gris-clair);
}

.tarifs-table tbody tr + tr th,
.tarifs-table tbody tr + tr td { border-top: 1px solid var(--ligne-fine); }
.tarifs-table tbody th {
  font-family: var(--sans); font-size: .98rem; font-weight: 600;
  color: var(--bleu-nuit); white-space: nowrap;
}
.tarifs-table tbody td { font-size: .95rem; font-weight: 300; white-space: nowrap; }

/* La scolarité annuelle est le chiffre que l'œil cherche en premier. */
.montant-fort {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.24rem; letter-spacing: -.02em; color: var(--bleu-nuit);
}

/* Ce que la grille ne couvre pas : à dire clairement, pas en petits
   caractères sous le tableau. */
.note-tarifs {
  margin: clamp(34px, 5vw, 52px) 0 0;
  padding-left: 20px; border-left: 3px solid var(--trait);
  font-weight: 300; font-size: 1rem; line-height: 1.75; max-width: 76ch; color: var(--gris);
}

/* ------------------------------------------------------------
   Utilitaires
   ------------------------------------------------------------ */
.lecteur-ecran {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}


/* ------------------------------------------------------------
   Atouts illustrés

   Certains atouts portent une photo, d'autres non : la preuve
   visuelle accompagne l'affirmation là où elle existe. Les deux
   formes cohabitent dans la même grille — la carte illustrée pose
   son image en tête, la carte simple garde sa barre orange.
   ------------------------------------------------------------ */
/* Atouts : pas de boite du tout.

   Le bloc des chiffres juste en dessous est un panneau encadre ; si
   les atouts l'etaient aussi, les deux sections se liraient comme un
   seul tableau sans fin. Ici le cadre disparait et c'est le blanc qui
   separe. Le filet bleu nuit au-dessus de chaque titre donne le rythme :
   assez fin pour ne pas se voir, assez present pour qu'on le sente.

   La variante en cartes pleines est conservee plus bas, en commentaire :
   elle resservira peut-etre au bandeau. */
.atout {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-top: 1px solid var(--bleu-nuit);
}
.atout-corps { padding: 20px 0 0; }
.atout h3 { color: var(--bleu-nuit); }
.atout p  { color: var(--gris); }

/* Variante abandonnee, gardee pour le bandeau a venir :
.atout { background: var(--carte-fonce); border: 1px solid transparent;
  border-radius: var(--rayon); box-shadow: 0 16px 44px rgba(22,35,76,.18); }
.atout-corps { padding: 30px 26px 34px; }
.atout h3 { color: #fff; }
.atout p { color: rgba(255,255,255,.78); }
*/

/* Les atouts illustrés respirent plus que les autres : on relâche
   l'écart vertical de la grille pour ne pas les coller. */
@media (min-width: 1020px) { .atouts { gap: 44px 40px; } }

/* ------------------------------------------------------------
   Chiffres de la rentrée

   Mise en forme volontairement distincte des atouts. Deux grilles
   de cartes à la suite se liraient comme une seule liste sans fin ;
   ici le chiffre porte l'information et le texte l'explique.
   ------------------------------------------------------------ */
.chiffres {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--ligne-fine);
  border: 1px solid var(--ligne-fine);
  border-radius: var(--rayon);
  overflow: hidden;
}
@media (min-width: 900px) { .chiffres { grid-template-columns: repeat(4, 1fr); } }

.chiffre { background: #fff; padding: 26px 20px 28px; }
@media (min-width: 900px) { .chiffre { padding: 36px 28px 38px; } }

.chiffre-valeur {
  font-family: var(--serif); font-weight: 400; line-height: 1;
  font-size: clamp(2.4rem, 8vw, 3.4rem);
  letter-spacing: -.04em; color: var(--bleu-nuit);
}
.chiffre-libelle {
  margin-top: 10px;
  font-size: .8rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
}
.chiffre-detail {
  margin: 12px 0 0;
  font-size: .9rem; font-weight: 300; line-height: 1.6; color: var(--gris);
}

/* Ce que les chiffres ne disent pas : la cour et les coins
   d'apprentissage, qui ne se comptent pas en unités. */
.rentree-suite {
  margin: 30px 0 0; max-width: 76ch;
  padding-left: 20px; border-left: 3px solid var(--trait);
  font-weight: 300;
}
@media (min-width: 900px) { .rentree-suite { margin-top: 38px; font-size: 1.02rem; } }

/* ------------------------------------------------------------
   Résultats — photo de promotion en pleine largeur, puis les
   deux programmes cote a cote.

   Le recadrage 21:9 est calcule sur la photo : les diplomes
   occupent la bande verticale 234-1183 d'une image de 1440 de
   haut, le cadrage n'en retire que le batiment et le sol.
   ------------------------------------------------------------ */
.resultats-visuel {
  margin: 0 0 clamp(28px, 4vw, 44px);
  border-radius: var(--rayon); overflow: hidden;
  background: var(--papier); box-shadow: var(--ombre-carte);
}
.resultats-visuel img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover; object-position: center 42%;
}
@media (min-width: 760px) {
  .resultats-visuel img { aspect-ratio: 21 / 9; }
}
.resultats-legende {
  padding: 13px 18px 15px;
  font-family: var(--sans); font-size: .8rem; font-weight: 300;
  line-height: 1.5; color: var(--gris);
  border-top: 1px solid var(--ligne-fine); background: #fff;
}
@media (min-width: 760px) { .resultats-legende { padding: 15px 24px 17px; } }

/* Les deux programmes cote a cote : la section reste aussi courte
   qu'avant la photo. En dessous de 860 px ils se suivent. */
.resultats-grille { display: grid; gap: 30px; }
@media (min-width: 860px) {
  .resultats-grille { grid-template-columns: repeat(2, 1fr); gap: 36px; align-items: start; }
}
.resultats-grille .resultats-table + .resultats-table { margin-top: 0; }
.resultats-table th, .resultats-table td { padding: 14px 18px; }
@media (min-width: 860px) { .resultats-table th, .resultats-table td { padding: 16px 22px; } }
.resultat-valeur { font-size: clamp(1.5rem, 4.6vw, 2rem); }

/* ------------------------------------------------------------
   Dernière actualité — une ligne sous le résumé du hero.
   Fixe, sans animation : le mouvement à côté d'un bouton
   d'inscription detourne le regard au lieu de l'attirer.
   ------------------------------------------------------------ */
.fil-actu {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  max-width: none;   /* p est limite a 66ch : ici la ligne doit tenir en entier */
  margin: 26px 0 0; padding-top: 22px;
  border-top: 1px solid var(--ligne-fine);
  font-family: var(--sans); font-size: .94rem;
}
.fil-actu-etiquette {
  flex: none;
  font-size: .7rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.fil-actu a {
  color: var(--bleu-nuit); font-weight: 500; text-decoration: none;
  text-decoration: underline; text-decoration-color: var(--ligne);
  text-underline-offset: 4px; transition: text-decoration-color var(--transition);
}
.fil-actu a:hover { color: var(--bleu); text-decoration-color: currentColor; }
.fil-actu time { flex: none; font-size: .82rem; font-weight: 300; color: var(--gris-clair); }
@media (min-width: 760px) { .fil-actu { gap: 18px; margin-top: 30px; } }

/* ------------------------------------------------------------
   Distinction individuelle, sous les taux de reussite.
   Le seul bloc sombre de la section : un classement national
   est le fait le plus fort de la page, il merite de se detacher.
   ------------------------------------------------------------ */
.distinction {
  display: flex; align-items: center; gap: 20px;
  margin-top: 26px; padding: 22px 24px;
  background: var(--bleu-nuit); color: #fff;
  border-radius: var(--rayon);
}
.distinction-rang {
  flex: none; margin: 0;
  font-family: var(--serif); font-size: 1.5rem; line-height: 1.1;
  letter-spacing: -.03em; white-space: nowrap;
}
.distinction-corps { min-width: 0; }
.distinction-texte {
  margin: 0; max-width: none;
  font-size: .92rem; font-weight: 300; line-height: 1.6;
  color: rgba(255, 255, 255, .88);
}
/* La source est citee et cliquable : une distinction qu'on peut
   verifier vaut plus qu'une distinction qu'on affirme. */
.distinction-source { margin: 7px 0 0; max-width: none; font-size: .78rem; }
.distinction-source a {
  color: rgba(255, 255, 255, .62);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .28);
  transition: color var(--transition), text-decoration-color var(--transition);
}
.distinction-source a:hover {
  color: #fff; text-decoration-color: rgba(255, 255, 255, .7);
}
@media (min-width: 960px) {
  .distinction { gap: 24px; padding: 24px 28px; }
  .distinction-rang { font-size: 1.7rem; }
}

/* ------------------------------------------------------------
   Formulaire de demande d'inscription

   Il vit dans la boite bleu nuit : tout ce qui est texte doit donc
   etre clair, et le bouton d'envoi passe en blanc — un bouton bleu
   nuit sur fond bleu nuit ne se voit pas.
   ------------------------------------------------------------ */
.form-reponse {
  margin: 0 0 26px; padding: 16px 20px;
  border-radius: var(--rayon); max-width: none;
  font-family: var(--sans); font-size: .95rem; line-height: 1.6;
}
.form-reponse-ok {
  background: rgba(37, 211, 102, .16); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .5);
}
.form-reponse-erreur {
  background: rgba(255, 120, 120, .14); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 140, 140, .55);
}

/* Le piege a robots : hors de l'ecran, jamais masque par display:none
   — certains automates ignorent les champs ainsi caches. */
.form-piege {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.form-inscription { margin: 0 0 26px; }
.form-grille { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 720px) { .form-grille { grid-template-columns: 1fr 1fr; gap: 20px 24px; } }
@media (min-width: 720px) { .form-champ-large { grid-column: 1 / -1; } }

.form-champ { margin: 0; max-width: none; }
.form-champ label {
  display: block; margin-bottom: 7px;
  font-family: var(--sans); font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; color: #fff;
}
.form-requis     { color: rgba(255, 255, 255, .5); font-weight: 400; }
.form-facultatif { font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, .5); text-transform: none; }

.form-champ input,
.form-champ select,
.form-champ textarea {
  width: 100%; padding: 13px 15px;
  font-family: var(--sans); font-size: 1rem; color: var(--encre);
  background: #fff; border: 1px solid var(--ligne); border-radius: 12px;
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none; appearance: none;
}
/* 16 px minimum sur iPhone : en dessous, Safari zoome a la saisie et
   le formulaire part de travers. */
@media (max-width: 719px) {
  .form-champ input, .form-champ select, .form-champ textarea { font-size: 16px; }
}
.form-champ textarea { resize: vertical; min-height: 92px; line-height: 1.6; }
.form-champ select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%),
                    linear-gradient(135deg, var(--gris) 50%, transparent 50%);
  background-position: calc(100% - 20px) 51%, calc(100% - 14px) 51%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.form-champ input,
.form-champ select,
.form-champ textarea { border-color: transparent; }
.form-champ input:focus,
.form-champ select:focus,
.form-champ textarea:focus {
  outline: none; border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .28);
}

.form-bas { margin-top: 22px; }
.form-bas .btn {
  width: 100%;
  background: #fff; color: var(--bleu-nuit);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}
.form-bas .btn:hover { background: #fff; color: var(--bleu-nuit); transform: translateY(-1px); }
@media (min-width: 560px) { .form-bas .btn { width: auto; min-width: 240px; } }
.form-mention {
  margin: 14px 0 0; max-width: 60ch;
  font-family: var(--sans); font-size: .82rem; font-weight: 300;
  line-height: 1.6; color: rgba(255, 255, 255, .6);
}

.appel-ou {
  margin: 0 0 16px; max-width: none;
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5);
}


/* ------------------------------------------------------------
   Pages intérieures — en-tête

   La page d'accueil ouvre sur deux colonnes et une image. Une page
   intérieure n'a rien à mettre dans la seconde colonne : elle ouvre
   donc sur une seule, plus courte, et le contenu commence tout de
   suite. Pas de bandeau décoratif pour meubler.
   ------------------------------------------------------------ */
.hero-page { padding: 34px 0 clamp(34px, 5vw, 58px); border-bottom: 1px solid var(--ligne-fine); }
.hero-page h1 { margin-bottom: .36em; }
.hero-intro-large { max-width: 60ch; margin-bottom: 0; }

/* Un tableau à deux colonnes n'a pas besoin de défiler : on lève la
   largeur minimale posée pour les grilles à six colonnes. */
.tarifs-table-courte { min-width: 0; }
.tarifs-table-courte tbody th { white-space: normal; }

/* ------------------------------------------------------------
   Réductions

   Le taux porte l'information, la phrase l'explique — même logique
   que les chiffres de la rentrée. Deux éléments seulement : une
   grille à deux colonnes suffit, sans palier intermédiaire.
   ------------------------------------------------------------ */
.reductions { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--ligne-fine); border: 1px solid var(--ligne-fine); border-radius: var(--rayon); overflow: hidden; }
@media (min-width: 760px) { .reductions { grid-template-columns: repeat(2, 1fr); } }

.reduction { display: flex; gap: 20px; align-items: flex-start; background: #fff; padding: 28px 24px; }
@media (min-width: 980px) { .reduction { padding: 34px 30px; gap: 24px; } }

/* Double selecteur : `.reduction p` plus bas l'emporterait autrement
   sur la classe seule, et le taux reviendrait a la taille du texte. */
.reduction .reduction-taux {
  margin: 0; flex: none;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.1rem); line-height: 1;
  letter-spacing: -.03em; color: var(--bleu-nuit);
}
.reduction h3 { margin-bottom: .4em; }
.reduction p { margin: 0; font-weight: 300; font-size: .96rem; }

/* ------------------------------------------------------------
   Listes de la page des frais

   Modalités et pièces du dossier : des listes qu'on parcourt, pas
   qu'on lit. La puce est un filet court, pas un rond — la même
   discrétion que le reste de la page.
   ------------------------------------------------------------ */
.liste-modalites, .liste-pieces { list-style: none; margin: 0; padding: 0; max-width: 72ch; }
.liste-modalites li, .liste-pieces li {
  position: relative; padding-left: 26px; margin-bottom: 14px;
  font-weight: 300; line-height: 1.7;
}
.liste-modalites li::before, .liste-pieces li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 12px; height: 1px; background: var(--puce);
}
.liste-pieces li { margin-bottom: 11px; font-size: .96rem; }

/* Les deux dossiers côte à côte : la différence entre les deux
   programmes se voit alors d'un coup d'œil, ce qui est précisément
   la question que se pose la famille. */
.dossiers { display: grid; grid-template-columns: 1fr; gap: 38px; }
@media (min-width: 820px) { .dossiers { grid-template-columns: repeat(2, 1fr); gap: 54px; } }
.dossier h3 { padding-top: 18px; border-top: 1px solid var(--bleu-nuit); margin-bottom: 18px; }

/* Encart d'appel sans formulaire : il n'a pas besoin de la même
   hauteur que celui de l'accueil. */
.appel-boite-courte { padding-bottom: clamp(34px, 5vw, 48px); }
.appel-boite-courte .appel-horaires { margin: 22px 0 0; font-size: .9rem; }
@media (min-width: 560px) {
  .appel-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* Après l'en-tête d'une page intérieure, la première section n'a pas
   besoin de sa respiration pleine : le filet a déjà fait la coupure. */
.hero-page + .section { padding-top: clamp(40px, 6vw, 72px); }

/* Un tableau qui déborde ne le dit pas de lui-même. Sur téléphone, la
   dernière colonne est hors champ et rien ne l'annonce — la famille
   croit avoir tout lu. La mention disparaît dès que la grille tient
   dans la page. */
.indice-defilement {
  margin: 12px 0 0; max-width: none;
  font-size: .84rem; font-weight: 300; font-style: italic;
  color: var(--gris-clair);
}
@media (min-width: 760px) { .indice-defilement { display: none; } }

/* Légende d'un tableau tarifaire : posée hors du cadre défilant, elle
   reprend exactement l'allure qu'avait la <caption>. */
.tarifs-legende {
  margin: 0 0 14px; max-width: none;
  font-size: .74rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gris-clair);
}

/* Dans l'encart sombre, le bouton plein doit s'inverser : son bleu
   nuit est exactement celui du fond, il y disparaissait. Même
   traitement que le bouton d'envoi du formulaire d'accueil. */
.appel-boite .btn-plein {
  background: #fff; color: var(--bleu-nuit);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}
.appel-boite .btn-plein:hover {
  background: #fff; color: var(--bleu-nuit); transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .28);
}

/* Un paragraphe qui porte seul une section : un peu plus grand que le
   texte courant, pour que l'absence de tableau ne se lise pas comme
   une section inachevée. */
.texte-seul { font-size: 1.04rem; font-weight: 300; line-height: 1.72; max-width: 64ch; }
.texte-seul:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   L'essentiel

   Le chiffre avant le tableau. Un panneau clair, pose juste sous
   l'introduction : la famille pressee y trouve sa reponse sans
   defiler, et un assistant qui lit la page cite ces phrases plutot
   qu'une fourchette trouvee sur un site tiers.
   ------------------------------------------------------------ */
.essentiel {
  margin-top: clamp(26px, 4vw, 38px);
  padding: 26px 24px;
  background: var(--papier);
  border-radius: var(--rayon);
  border-left: 3px solid var(--bleu-nuit);
  max-width: 74ch;
}
@media (min-width: 820px) { .essentiel { padding: 32px 34px; } }

.essentiel-titre {
  margin: 0 0 12px; max-width: none;
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.essentiel p { font-weight: 300; line-height: 1.7; }
.essentiel p + p { margin-top: 0; }
.essentiel p:last-child { margin-bottom: 0; }

.essentiel-date {
  font-size: .84rem !important; color: var(--gris-clair);
  padding-top: 12px; border-top: 1px solid var(--ligne-fine);
}

/* ------------------------------------------------------------
   Grilles tarifaires sur téléphone

   Six colonnes ne tiennent pas sur 390 px. Les faire défiler
   horizontalement était une facilité : une famille ne devrait pas
   avoir à tirer un tableau de côté pour connaître un prix, et la
   dernière colonne finit par ne jamais être lue.

   Sous 760 px, chaque ligne devient donc une carte : le niveau en
   titre, puis chaque montant en regard de l'intitulé de sa colonne,
   repris par `data-intitule`. Plus aucun débordement.
   ------------------------------------------------------------ */
@media (max-width: 979px) {
  .tableau-defilant { overflow: visible; border-radius: 0; }

  .tarifs-table {
    display: block; min-width: 0;
    background: none; border: 0; box-shadow: none; border-radius: 0;
  }
  .tarifs-table thead {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  }
  .tarifs-table tbody { display: block; }

  .tarifs-table tbody tr {
    display: block; padding: 20px 22px;
    background: #fff; border: 1px solid var(--ligne-fine);
    border-radius: var(--rayon); box-shadow: var(--ombre-carte);
  }
  .tarifs-table tbody tr + tr { margin-top: 14px; }

  .tarifs-table tbody th,
  .tarifs-table tbody tr + tr th {
    display: block; padding: 0 0 12px; margin-bottom: 10px;
    font-size: 1.14rem; white-space: normal;
    border-top: 0; border-bottom: 1px solid var(--ligne-fine);
  }

  .tarifs-table tbody td,
  .tarifs-table tbody tr + tr td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 18px; padding: 8px 0; border-top: 0; white-space: normal;
  }
  /* L'intitulé à gauche, le montant à droite : l'œil descend la
     colonne des chiffres sans avoir à relire les libellés. */
  .tarifs-table tbody td::before {
    content: attr(data-intitule);
    flex: 1 1 auto; text-align: left; padding-right: 10px;
    font-size: .86rem; font-weight: 400; color: var(--gris-clair);
  }
  .tarifs-table tbody td { text-align: right; }

  /* La scolarité annuelle reste le chiffre qu'on cherche : on la
     détache des tranches par un filet, au-dessus et au-dessous.
     Réservé aux grilles tarifaires : dans un tableau comparatif, la
     deuxième cellule n'a rien de plus important que la première. */
  .tarifs-table:not(.comparatif-table) tbody td:nth-of-type(2) {
    padding: 12px 0; margin: 4px 0;
    border-top: 1px solid var(--ligne-fine);
    border-bottom: 1px solid var(--ligne-fine);
  }
  .tarifs-table:not(.comparatif-table) tbody td:nth-of-type(2)::before { color: var(--accent); font-weight: 600; }

  .tarifs-legende { margin-bottom: 12px; }
}

/* ------------------------------------------------------------
   Page comparative des programmes
   ------------------------------------------------------------ */

/* Les deux programmes côte à côte : la comparaison se fait d'un
   regard, sans faire défiler de l'un à l'autre. Sur téléphone ils
   s'empilent, séparés par un filet. */
.cursus-paire { display: grid; grid-template-columns: 1fr; gap: 46px; }
@media (min-width: 900px) { .cursus-paire { grid-template-columns: repeat(2, 1fr); gap: 64px; } }

.cursus { padding-top: 20px; border-top: 2px solid var(--bleu-nuit); }
.cursus h2 { font-size: clamp(1.5rem, 3.6vw, 2rem); margin-bottom: .34em; }
.cursus h3 {
  margin: 30px 0 10px;
  font-size: .74rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.cursus-chapeau { font-size: 1.04rem; font-weight: 300; color: var(--gris); }
.cursus p { max-width: 54ch; }

/* Tableau comparatif : trois colonnes seulement, il tient bien plus
   tôt qu'une grille tarifaire — inutile de le replier si bas. */
.comparatif-table { min-width: 0; }
.comparatif-table tbody td,
.comparatif-table tbody th { white-space: normal; }
.comparatif-table tbody td { font-size: .97rem; }

/* Les quatre questions : le rang porte le rythme, comme les taux de
   la page des frais. Pas de cartes — une liste qui se lit d'affilée. */
.decider { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.decider-item {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 26px 0; border-top: 1px solid var(--ligne);
}
.decider-item:last-child { border-bottom: 1px solid var(--ligne); }
@media (min-width: 820px) { .decider-item { gap: 30px; padding: 32px 0; } }

.decider-rang {
  margin: 0; flex: none; min-width: 1.4em;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 2rem); line-height: 1.1;
  letter-spacing: -.03em; color: var(--puce);
}
.decider-item h3 { margin-bottom: .45em; font-size: clamp(1.04rem, 2.4vw, 1.2rem); }
.decider-item p { margin: 0; font-weight: 300; max-width: 68ch; }

/* Dans le comparatif, les valeurs sont des phrases, pas des montants :
   alignées à droite elles se lisaient mal une fois repliées. */
@media (max-width: 979px) {
  .comparatif-table tbody td { text-align: left; }
  .comparatif-table tbody td::before { flex: 0 0 40%; }
}

/* ------------------------------------------------------------
   Page de contact
   ------------------------------------------------------------ */

/* Les coordonnées dans l'encart d'ouverture : un bloc qu'on lit en
   deux secondes, pas une liste de champs. */
.coordonnees { font-style: normal; }
.coordonnees-adresse { margin: 0 0 14px; font-weight: 400; color: var(--encre); max-width: 46ch; }
.coordonnees-liste { list-style: none; margin: 0 0 14px; padding: 0; }
.coordonnees-liste li { margin-bottom: 6px; font-size: 1.02rem; }
.coordonnees-liste a { font-weight: 500; }
.coordonnees-horaires {
  margin: 0; padding-top: 12px; border-top: 1px solid var(--ligne-fine);
  font-size: .9rem; color: var(--gris-clair);
}

/* Les repères de l'itinéraire : un peu plus d'air que les autres
   listes, parce qu'on les lit en marchant. */
.reperes li { font-size: 1.02rem; margin-bottom: 16px; }

.entree { margin-top: clamp(30px, 4vw, 44px); }
.entree img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Les canaux : quatre blocs courts, sans cadre. Le filet du titre
   suffit à les séparer, comme les atouts de l'accueil. */
.canaux { display: grid; grid-template-columns: 1fr; gap: 34px; }
@media (min-width: 680px)  { .canaux { grid-template-columns: repeat(2, 1fr); gap: 38px 36px; } }
@media (min-width: 1020px) { .canaux { grid-template-columns: repeat(4, 1fr); gap: 40px 34px; } }

.canal { padding-top: 18px; border-top: 1px solid var(--bleu-nuit); }
.canal h3 { margin-bottom: .5em; }
.canal p { font-weight: 300; font-size: .96rem; max-width: 40ch; }
.canal-action { margin: 0; }
.canal-action a { font-weight: 500; }