@charset "UTF-8";
/* ==========================================================================
   CSIPA — Complexe Scolaire International les Petits Allemands
   Feuille de style unique. Mobile-first.
   Palette derivee du logo : orange brule #A04000 sur fond brun-noir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. POLICES (auto-hebergees, variables : 4 fichiers pour toutes les graisses)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cyrillique (version russe).
   Inter couvre le cyrillique : meme dessin, meme graisse variable que le
   latin. Grace a unicode-range, ces fichiers ne sont telecharges que si la
   page contient reellement des caracteres cyrilliques. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

/* Arabe (version arabe).
   Ni Inter ni Outfit ne comportent le moindre glyphe arabe : sans cette
   police, la page afficherait des rectangles vides. Noto Sans Arabic est
   sous licence SIL Open Font, donc hebergeable sur le serveur de l'ecole.
   Declaree sous les DEUX noms de famille, pour que titres et corps de texte
   la trouvent sans avoir a modifier les regles existantes. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/noto-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/noto-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}

/* --------------------------------------------------------------------------
   2. JETONS DE DESIGN
   -------------------------------------------------------------------------- */
:root {
  /* Marque — extraite du logo */
  /* --------------------------------------------------------------------
     VERT - accent principal du site. Il remplace le marron partout sauf
     dans trois details, en bas de cette feuille.
     -------------------------------------------------------------------- */
  --green-900: #10301f;
  --green-800: #17402a;
  --green-700: #1f5537;
  --green-600: #2a6f49;   /* boutons, liens, chiffres */
  --green-500: #35895a;
  --green-400: #55a97c;
  --green-200: #b7dcc7;
  --green-100: #d9ede2;
  --green-50:  #eff7f2;

  --brand-900: #4a1e00;
  --brand-800: #6e2c00;
  --brand-700: #8a3800;
  --brand-600: #a04000; /* couleur exacte du logo */
  --brand-500: #c25a17;
  --brand-400: #d97b3c;
  --brand-200: #f0cdb4;
  --brand-100: #f7e6da;
  --brand-50:  #fbf7f4;

  /* Encre — fond du logo, rechauffe */
  --ink-900: #14171a;
  --ink-800: #22272b;
  --ink-700: #2f353b;
  --ink-600: #4a525a;
  --ink-500: #5b636b;
  --ink-400: #8d949b;
  --ink-300: #b5bbc1;

  /* Surfaces sombres (en-tete, tiroir, sections, pied de page).
     Un cran plus claires que l'encre profonde : meme identite, moins lourd. */
  /* Le brun du MENU : en-tete et tiroir mobile uniquement. C'est la
     continuite avec le logo, que le client tient a conserver. */
  --dark-1: #29190e;
  --dark-2: #33210f;

  /* Le gris ardoise, qui remplace le brun PARTOUT AILLEURS : bandeaux de
     page, sections sombres, pied de page. */
  --slate-1: #23292e;
  --slate-2: #2e363c;
  --slate-3: #1a1f23;

  /* Accents complementaires */
  --amber:      #e0a04a;

  /* Accents des surfaces sombres GRISES */
  --on-dark:      #8fc4aa;
  --on-dark-soft: #ccd3d9;
  --amber-dark: #b97d1c;
  --teal-900:   #093a40;
  --teal-800:   #0b4a51;
  --teal-700:   #2f6b4f;
  --teal-600:   #3d8462;
  --teal-500:   #17858f;
  --teal-100:   #dcece4;
  --teal-50:    #eff6f2;

  /* Neutres chauds */
  --cream: #f7f8f9;
  --sand:  #eef0f2;
  --white: #ffffff;

  /* Semantique */
  --bg:        var(--cream);
  --surface:   var(--white);
  --text:      var(--ink-700);
  --text-soft: var(--ink-500);
  --heading:   var(--ink-900);
  --line:      rgba(22, 25, 28, 0.17);
  --line-soft: rgba(22, 25, 28, 0.12);

  /* Typographie fluide */
  /* Les polices chinoises sont celles du systeme : une police chinoise
     complete pese une dizaine de megaoctets, alors que tout appareil capable
     d'afficher du chinois en possede deja une. Elles arrivent APRES Inter,
     donc n'entrent en jeu que pour les caracteres qu'Inter ne couvre pas. */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
  --font-head: 'Outfit', 'Inter', system-ui, -apple-system, 'Segoe UI',
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.16rem, 1.09rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.38rem, 1.24rem + 0.7vw, 1.85rem);
  --step-3:  clamp(1.65rem, 1.38rem + 1.32vw, 2.5rem);
  --step-4:  clamp(1.95rem, 1.5rem + 2.25vw, 3.3rem);
  --step-5:  clamp(2.3rem, 1.62rem + 3.4vw, 4.4rem);

  /* Rythme */
  --container: 76rem;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(3.6rem, 8vw, 6.5rem);

  /* Formes */
  --r-sm: 0.6rem;
  --r-md: 1rem;
  --r-lg: 1.4rem;
  --r-xl: 2rem;
  --r-pill: 999px;

  /* Ombres chaudes */
  --sh-xs: 0 1px 2px rgba(22, 25, 28, 0.06);
  --sh-sm: 0 2px 8px rgba(22, 25, 28, 0.07), 0 1px 2px rgba(22, 25, 28, 0.05);
  --sh-md: 0 10px 28px -8px rgba(22, 25, 28, 0.16), 0 2px 6px rgba(22, 25, 28, 0.06);
  --sh-lg: 0 24px 56px -16px rgba(22, 25, 28, 0.26), 0 4px 12px rgba(22, 25, 28, 0.07);
  --sh-brand: 0 12px 30px -10px rgba(42, 111, 73, 0.55);

  /* Transitions */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.18s var(--ease);
  --t-med: 0.32s var(--ease);
  --t-slow: 0.6s var(--ease-out);

  --header-h: 4.5rem;
}

/* --------------------------------------------------------------------------
   3. REINITIALISATION ET BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  color: var(--heading);
  line-height: 1.14;
  letter-spacing: -0.022em;
  margin: 0 0 0.6em;
  text-wrap: balance;
  font-weight: 700;
  /* Sur un ecran etroit, un mot long (« Baccalaureat », « anglophone »)
     ne doit jamais deborder du cadre. */
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--green-700); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--green-600); }

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

ul, ol { padding-inline-start: 1.15em; }
li { margin-bottom: 0.45em; }
li::marker { color: var(--green-500); }

strong, b { font-weight: 650; color: var(--ink-800); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--green-500);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--green-200); color: var(--ink-900); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -140%);
  z-index: 2000;
  background: var(--green-600);
  color: #fff;
  padding: 0.75rem 1.4rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--t-fast);
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

/* --------------------------------------------------------------------------
   4. MISE EN PAGE
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 48rem; }
.container--wide { max-width: 88rem; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.4rem, 5vw, 4rem); }

.section--sand { background: var(--sand); }
.section--cream { background: var(--green-50); }

.section--dark {
  background: linear-gradient(155deg, var(--green-50) 0%, var(--green-100) 60%, var(--green-50) 100%);
  /* Le fond est desormais clair : le texte doit l'etre aussi, sans quoi tout
     paragraphe sans couleur propre herite d'un blanc casse et disparait. */
  color: var(--text);
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--ink-900); }
.section--dark strong { color: var(--green-700); }
.section--dark a { color: var(--green-700); }

.grid { display: grid; gap: clamp(1.1rem, 2.6vw, 1.9rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
/* Une seule colonne sur les tres petits ecrans : deux cartes cote a cote
   ne laissent que ~115 px de texte utile a 360 px de large. */
.grid--4 { grid-template-columns: 1fr; }
.stack > * + * { margin-top: 1.15rem; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-sm { font-size: 0.9rem; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.m-0 { margin: 0; }
.mt-block { margin-top: clamp(2.2rem, 5vw, 3.4rem); }

/* Ecran centre (page 404) */
.section--center-screen { min-height: 60vh; display: grid; place-items: center; }

/* En-tete de section */
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4.5vw, 3.4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--text-soft); font-size: var(--step-1); margin-bottom: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-head);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green-600);
  margin-bottom: 0.9rem;
}
.eyebrow::before {
  content: '';
  width: 1.6rem; height: 2px;
  /* Detail marron conserve : le filet du sur-titre rappelle le logo. */
  background: linear-gradient(90deg, #a04000, #d97b3c);
  border-radius: 2px;
}
.section--dark .eyebrow { color: var(--green-600); }
.section-head--center .eyebrow::before,
.eyebrow--center::before { display: none; }
.eyebrow--center { justify-content: center; }

.lead { font-size: var(--step-1); color: var(--text-soft); }

/* --------------------------------------------------------------------------
   5. BOUTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--green-600);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.92rem 1.7rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-head);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-fast), box-shadow var(--t-med), background-color var(--t-fast), color var(--t-fast);
  will-change: transform;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* Reflet qui balaie le bouton au survol */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 47%, transparent 64%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease-out);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateX(120%); }

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 0.06s; }

.btn--primary {
  background: linear-gradient(135deg, var(--green-600) 0%, var(--green-500) 100%);
  box-shadow: var(--sh-brand);
  color: #fff;
}
.btn--primary:hover {
  box-shadow: 0 18px 38px -12px rgba(42, 111, 73, 0.65);
  color: #fff;
}

.btn--whatsapp {
  background: linear-gradient(135deg, #15803d 0%, #1a9a4a 100%);
  color: #fff;
  box-shadow: 0 12px 30px -10px rgba(31, 175, 84, 0.6);
}
.btn--whatsapp:hover { color: #fff; box-shadow: 0 18px 38px -12px rgba(21, 128, 61, 0.7); }

.btn--ghost {
  background: var(--white);
  color: var(--green-700);
  box-shadow: inset 0 0 0 2px var(--green-200);
}
.btn--ghost:hover {
  background: var(--green-50);
  box-shadow: inset 0 0 0 2px var(--green-400);
  color: var(--green-700);
}

.btn--light {
  background: var(--white);
  color: var(--green-700);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1.5px var(--green-200), var(--sh-sm);
}
.btn--light:hover { background: var(--green-50); color: var(--green-800); }

.btn--sm { padding: 0.62rem 1.15rem; font-size: var(--step--1); }
.btn--lg { padding: 1.05rem 2.1rem; font-size: var(--step-1); }
.btn--block { width: 100%; }

/* Lien flechee anime */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--green-700);
  text-decoration: none;
}
.arrow-link svg { width: 1.05em; height: 1.05em; transition: transform var(--t-med); }
.arrow-link:hover svg { transform: translateX(4px); }
.arrow-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* --------------------------------------------------------------------------
   6. EN-TETE
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t-med), box-shadow var(--t-med);
}
.header.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.5);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink-900);
  flex: none;
}
.brand img {
  width: 2.6rem;
  height: auto;
  transition: transform var(--t-med);
}
.brand:hover img { transform: rotate(-8deg) scale(1.06); }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: 0.01em;
  color: var(--ink-900);
}
.brand__tag {
  /* Ce n'est plus une courte mention mais la definition du sigle :
     « Complexe Scolaire International les Petits Allemands ».
     /!\ En capitales et espacee comme avant, elle demanderait plus de
         400 px sur une seule ligne et ferait deborder la barre. En bas de
         casse, sur deux lignes bornees a 11 rem, elle tient dans a peine
         plus de largeur que l'ancienne mention, et reste sous la hauteur
         de l'en-tete. */
  max-width: 11rem;
  font-size: 0.6rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--green-600); /* vert : le seul accent colore de l'en-tete */
  font-weight: 600;
  text-wrap: balance;
}
/* Filet de securite : si la barre venait a manquer de place malgre tout, la
   definition passe sur une ligne de plus plutot que de pousser la navigation
   hors de l'ecran.
   /!\ « flex: none » sur .brand interdisait toute compression : le bloc
       debordait au lieu de se replier. On autorise le retrait, mais on
       protege ce qui ne doit jamais se deformer — l'image du logo et le
       sigle lui-meme. Seule la definition cede. */
.brand { flex: 0 1 auto; min-width: 0; }
.brand img { flex: none; }
.brand__text { min-width: 0; }
.brand__name { white-space: nowrap; }

/* Navigation principale (bureau) */
.nav { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__item { position: relative; margin: 0; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.78rem;
  border-radius: var(--r-sm);
  color: var(--ink-700);
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--t-fast), background-color var(--t-fast);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--green-700); background: var(--green-50); }

/* Soulignement anime */
.nav__link::before {
  content: '';
  position: absolute;
  left: 0.78rem; right: 0.78rem;
  bottom: 0.28rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green-400), var(--green-600));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med);
}
.nav__link:hover::before, .nav__item.is-active > .nav__link::before { transform: scaleX(1); }
.nav__item.is-active > .nav__link { color: var(--green-700); }

.nav__caret { width: 0.7rem; height: 0.7rem; transition: transform var(--t-med); }
.nav__link[aria-expanded='true'] .nav__caret { transform: rotate(180deg); }

/* Menu deroulant « Le CSIPA » */
.dropdown {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 50%;
  min-width: 19rem;
  padding: 0.55rem;
  margin: 0;
  list-style: none;
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  border: 1px solid var(--line-soft);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -0.5rem);
  transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
}
.dropdown::before {
  content: '';
  position: absolute;
  top: -0.55rem; left: 0; right: 0;
  height: 0.55rem;
}
.nav__item--has-menu:hover > .dropdown,
.nav__item--has-menu:focus-within > .dropdown,
.dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.dropdown li { margin: 0; }
.dropdown a {
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: var(--r-sm);
  color: var(--ink-800);
  text-decoration: none;
  transition: background-color var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.dropdown a:hover { background: var(--green-50); color: var(--green-700); transform: translateX(3px); }
.dropdown strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  color: inherit;
  line-height: 1.3;
}
.dropdown span {
  display: block;
  font-size: 0.82rem;
  color: var(--text-soft);
  line-height: 1.45;
  margin-top: 0.12rem;
}

/* Actions de l'en-tete */
.header__actions { display: flex; align-items: center; gap: 0.55rem; }

/* --------------------------------------------------------------------------
   Selecteur de langue (7 langues)
   Construit sur <details> : sept codes cote a cote deborderaient de l'en-tete
   sur telephone. <details> ouvre et ferme sans JavaScript et se pilote au
   clavier ; main.js n'ajoute que la fermeture au clic exterieur et a Echap.
   -------------------------------------------------------------------------- */
.lang { position: relative; }

.lang > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.6rem 0.42rem 0.55rem;
  border-radius: var(--r-pill);
  background: var(--sand);
  color: var(--ink-700);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}
/* retire le triangle natif, sur WebKit comme ailleurs */
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary::marker { content: ''; }

.lang > summary:hover { background: var(--green-100); color: var(--green-800); }
.lang > summary svg { width: 1.05rem; height: 1.05rem; flex: none; }
.lang > summary b {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}
.lang__chev { transition: transform var(--t-fast); opacity: 0.7; }
.lang[open] > summary { background: var(--green-600); color: #fff; }
.lang[open] .lang__chev { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 60;
  min-width: 13rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  border-radius: var(--r-md);
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg);
}
.lang__menu li { margin: 0; }
.lang__menu a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  color: var(--ink-800);
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.lang__menu a:hover { background: var(--sand); color: var(--green-700); }
.lang__menu a[aria-current='true'] { background: var(--green-600); color: #fff; font-weight: 600; }

/* Nom natif suivi de sa traduction francaise : « Deutsch  Allemand ».
   Le second est plus petit et plus pale, pour rester lisible sans voler la
   vedette au nom que le visiteur cherche. */
.lang__menu a small {
  display: block;
  font-size: 0.76rem;
  opacity: 0.65;
  font-weight: 400;
}
.lang__menu a[aria-current='true'] small { opacity: 0.85; }


/* Sur telephone le menu est cale a droite de l'ecran plutot que du bouton,
   faute de place. */
@media (max-width: 29.99em) {
  .lang__menu { right: -0.5rem; min-width: 9.5rem; }
  .lang > summary { padding: 0.4rem 0.5rem; }
}

.header .btn--whatsapp { display: none; }

/* Bouton hamburger */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6rem;
  border: 0;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-800);
  transition: transform var(--t-med), opacity var(--t-fast), width var(--t-med);
}
.burger span:nth-child(2) { width: 70%; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; width: 100%; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Tiroir mobile */
.drawer {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 890;
  background: var(--white);
  padding: 1.5rem var(--gutter) 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.2rem);
  transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
}
.drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.drawer__list { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.drawer__list > li { margin: 0; border-bottom: 1px solid var(--line); }

.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  padding: 1rem 0.2rem;
  background: none;
  border: 0;
  color: var(--ink-800);
  font-family: var(--font-head);
  font-size: 1.16rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.drawer__link[aria-current='page'] { color: var(--green-700); }
.drawer__link svg { width: 0.85rem; height: 0.85rem; transition: transform var(--t-med); }
.drawer__link[aria-expanded='true'] svg { transform: rotate(180deg); }

.drawer__sub {
  list-style: none;
  margin: 0;
  padding: 0 0 0.6rem 0.9rem;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-med);
}
.drawer__sub > div { overflow: hidden; }
.drawer__sub.is-open { grid-template-rows: 1fr; }
.drawer__sub a {
  display: block;
  /* 44 px minimum de hauteur tactile */
  padding: 0.78rem 0 0.78rem 0.9rem;
  color: var(--ink-600);
  font-size: 1rem;
  text-decoration: none;
  border-inline-start: 2px solid rgba(160, 64, 0, 0.35);
}
.drawer__sub a:hover { color: var(--green-700); }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--green-50);
  color: var(--ink-700);
  padding-block: clamp(3.5rem, 10vw, 7rem) clamp(4rem, 11vw, 8rem);
}
.hero__media {
  position: absolute;
  inset: -8% 0 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: center 42%;
  will-change: transform;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Voile DIRECTIONNEL, en une seule couche.
     Deux couches translucides se multiplient : 0,90 sur 0,62 donnait 0,96 de
     blanc, et la photo disparaissait. Ici le voile est dense jusqu'a 58 % de
     la largeur - la ou tient le texte, dans .hero__inner large de 46rem -
     puis s'efface pour laisser voir le campus.

     CE QUI FIXE LA BORNE BASSE. Le chapeau (.hero__lead, couleur --ink-700)
     est du texte courant : il lui faut 4,5:1. Il s'arrete vers 49 % de la
     largeur, ou le voile vaut encore 0,65 - soit 5,0:1 sur une photo
     entierement noire, le pire cas possible. Le titre, lui, est du grand
     texte : 3:1 suffit, et il tient 5,4:1 au point le plus clair de sa zone.
     Alleger davantage la gauche du degrade ferait passer le chapeau sous le
     seuil ; c'est la droite, ou il n'y a pas de texte, qui a ete ouverte. */
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0.86) 0%,
    rgba(255, 255, 255, 0.78) 38%,
    rgba(255, 255, 255, 0.55) 58%,
    rgba(255, 255, 255, 0.22) 78%,
    rgba(255, 255, 255, 0.08) 100%);
}
.hero h1 { color: var(--ink-900); margin-bottom: 0.45em; }
/* Le gras du chapeau doit ressortir sur la photo assombrie */
.hero strong, .pagehead strong { color: var(--green-700); font-weight: 650; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--green-500) 10%, var(--green-400) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__inner { max-width: 46rem; }
.hero__lead {
  font-size: var(--step-1);
  color: var(--ink-700);
  max-width: 38rem;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.42rem 1rem 0.42rem 0.45rem;
  margin-bottom: 1.5rem;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--green-200);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: var(--step--1);
  font-weight: 550;
  color: var(--ink-700);
}
.hero__badge b {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--green-600);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* --------------------------------------------------------------------------
   Badge « ecole candidate au Baccalaureat International »
   Place dans le hero pour etre vu sans defiler.
   L'anneau exterieur du logo IB est d'un bleu quasi noir : sur le hero,
   qui est sombre, il disparaitrait. On l'adosse donc a une pastille
   blanche — ce qui est par ailleurs l'usage prescrit par l'IB, qui exige
   un fond clair derriere sa marque.
   -------------------------------------------------------------------------- */
.ib-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.75rem;
  padding: 0.9rem 1.15rem 0.75rem;
  border-radius: var(--r-md);
  /* Carte blanche : le hero est sombre, or l'anneau exterieur du logo IB est
     d'un bleu quasi noir et s'y perdrait. L'IB impose de toute facon un fond
     clair derriere sa marque. */
  background: #fff;
  box-shadow: var(--sh-md);
}
.ib-badge img {
  display: block;
  width: 100%;
  max-width: 19rem;
  height: auto;
}
.ib-badge a {
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--green-700);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.ib-badge a:hover,
.ib-badge a:focus-visible { color: var(--green-800); }

@media (max-width: 29.99em) {
  .ib-badge { padding: 0.7rem 0.85rem 0.6rem; margin-top: 1.4rem; }
  .ib-badge img { max-width: 14.5rem; }
  .ib-badge a { font-size: 0.76rem; }
}

/* Declaration de statut IB (page du secondaire) */
.ib-statement {
  display: flex;
  align-items: flex-start;
  gap: 1.35rem;
  padding: 1.5rem 1.7rem;
  border-radius: var(--r-lg);
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}
/* Le logo IB reunit les DEUX elements cote a cote : rapport 3,166 : 1.
   La regle precedente imposait width et height a 4,5rem, ce qui ecrasait
   l.image dans un carre. On fixe donc la largeur seule et on laisse la
   hauteur suivre. */
.ib-statement img {
  width: clamp(11rem, 24vw, 15rem);
  height: auto;
  flex: none;
  align-self: center;
}
.ib-statement p { margin-bottom: 0.7rem; }
.ib-statement .text-sm { color: var(--text-soft); }

@media (max-width: 47.99em) {
  .ib-statement { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
  .ib-statement img { width: min(15rem, 70vw); }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}
.hero__actions--center { justify-content: center; }

/* Chiffres cles sous le hero */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: clamp(2.6rem, 6vw, 4rem);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hero__stat {
  background: var(--white);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 1.3rem 1.1rem;
  text-align: center;
}
.hero__stat b {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--green-600);
  letter-spacing: -0.02em;
}
.hero__stat > span {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--step--1);
  color: var(--ink-500);
  line-height: 1.35;
}
/* Valeur longue (plage horaire) : on reduit pour eviter tout debordement */
.hero__stat--sm b { font-size: clamp(1.15rem, 3.6vw, 1.65rem); letter-spacing: -0.01em; }

/* En-tete de page interieure */
.pagehead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--green-50);
  color: var(--ink-700);
  padding-block: clamp(2.8rem, 7vw, 4.6rem);
}
.pagehead::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 65% 110% at 10% 0%, rgba(42, 111, 73, 0.14), transparent 70%),
    radial-gradient(ellipse 55% 95% at 94% 100%, rgba(183, 220, 199, 0.42), transparent 72%);
}
/* Variante avec photo de fond, calee sur la hauteur du bandeau.
   Le voile est calcule pour garder le texte blanc a plus de 5:1 de contraste
   meme sur les photos claires. */
.pagehead--photo { background: var(--green-50); }
.pagehead--photo::before { display: none; }

.pagehead__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.pagehead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.pagehead__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Meme principe que le hero : dense sous le fil d'Ariane et le titre,
     leger sur la droite. Le bandeau etant moins haut, la transition est
     legerement plus tardive. */
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.89) 40%,
    rgba(255, 255, 255, 0.66) 60%,
    rgba(255, 255, 255, 0.36) 80%,
    rgba(255, 255, 255, 0.24) 100%);
}

.pagehead h1 { color: var(--ink-900); margin-bottom: 0.35em; }
.pagehead p { color: var(--ink-700); font-size: var(--step-1); max-width: 44rem; margin-bottom: 0; }
.pagehead .eyebrow { color: var(--green-600); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  font-size: var(--step--1);
  color: var(--ink-500);
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 0.4rem; }
.breadcrumb li + li::before { content: '/'; color: var(--ink-400); }
.breadcrumb a { color: var(--ink-600); text-decoration: none; }
.breadcrumb a:hover { color: var(--green-700); text-decoration: underline; }
.breadcrumb [aria-current='page'] { color: var(--green-700); }

/* --------------------------------------------------------------------------
   8. ELEMENTS FLOTTANTS DECORATIFS
   -------------------------------------------------------------------------- */
.floaties {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.floaties span {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.5;
  animation: float-y 13s ease-in-out infinite;
}
.floaties span:nth-child(1) {
  width: 12rem; height: 12rem;
  top: 8%; left: -3rem;
  background: radial-gradient(circle at 34% 34%, rgba(181, 187, 193, 0.32), transparent 68%);
  animation-duration: 15s;
}
.floaties span:nth-child(2) {
  width: 17rem; height: 17rem;
  bottom: -3rem; right: -4rem;
  background: radial-gradient(circle at 60% 40%, rgba(141, 148, 155, 0.28), transparent 68%);
  animation-duration: 19s;
  animation-delay: -5s;
}
.floaties span:nth-child(3) {
  width: 9rem; height: 9rem;
  top: 46%; right: 14%;
  background: radial-gradient(circle at 50% 50%, rgba(61, 132, 98, 0.22), transparent 68%);
  animation-duration: 17s;
  animation-delay: -9s;
}
.section > .container, .hero > .container, .pagehead > .container { position: relative; z-index: 1; }

@keyframes float-y {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(1.2rem, -1.6rem, 0) scale(1.05); }
  66%      { transform: translate3d(-0.9rem, 1.1rem, 0) scale(0.97); }
}

/* --------------------------------------------------------------------------
   9. CARTES
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-lg);
  border-color: var(--green-200);
}
.card__media { position: relative; overflow: hidden; background: var(--sand); }
.card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.75s var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.06); }

/* Cadre portrait : pour une photo verticale, un cadre 16/10 couperait le visage */
.card__media--portrait img { aspect-ratio: 3 / 4; object-position: center 10%; }
.card--portrait { max-width: 22rem; margin-inline: auto; }
.card__body { padding: clamp(1.25rem, 3vw, 1.75rem); flex: 1; display: flex; flex-direction: column; }
.card__body--tight { padding-block: 1rem; }
.card__body h3 { margin-bottom: 0.5rem; }
.card__body p { color: var(--text-soft); font-size: 0.97rem; }
.card__body .arrow-link { margin-top: auto; padding-top: 1rem; }

.card__tag {
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  padding: 0.32rem 0.85rem;
  border-radius: var(--r-pill);
  background: rgba(26, 31, 35, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Carte-fonctionnalite avec icone */
.feature {
  position: relative;
  padding: clamp(1.4rem, 3vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.feature::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--green-600), var(--green-400));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-med);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.feature:hover::before { transform: scaleY(1); }
.feature h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.feature p { color: var(--text-soft); font-size: 0.96rem; margin-bottom: 0; }

.feature__icon {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  margin-bottom: 1rem;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--green-50), var(--green-100));
  color: var(--green-600);
  transition: transform var(--t-med);
}
.feature__icon svg { width: 1.5rem; height: 1.5rem; }
.feature:hover .feature__icon { transform: scale(1.08) rotate(-5deg); }

/* --------------------------------------------------------------------------
   BLOCS CLIQUABLES
   Les cartes de l'accueil menent au passage du site qui developpe leur
   sujet. La carte entiere est le lien : une seule zone cliquable, un seul
   arret au clavier.

   /!\ « display: block » n'est pas cosmetique. Un <a> est en ligne par
       defaut ; sans cette ligne, la carte cesserait de remplir sa cellule
       de grille et la rangee se disloquerait.

   La couleur est heritee : sans « color: inherit », la regle generale des
   liens teindrait tout le bloc en vert. Les titres gardent de toute facon
   leur propre couleur, mais pas le reste.
   -------------------------------------------------------------------------- */
.feature--link {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  /* De la place en bas pour le chevron, afin qu'il ne vienne jamais se
     poser sur la derniere ligne de texte. */
  padding-bottom: calc(clamp(1.4rem, 3vw, 1.9rem) + 1.15rem);
}

/* Chevron d'invitation. Visible au repos — discretement — parce qu'un
   indice qui n'apparait qu'au survol n'existe pas sur un ecran tactile. */
.feature--link::after {
  content: '';
  position: absolute;
  right: clamp(1.4rem, 3vw, 1.9rem);
  bottom: clamp(1.2rem, 2.6vw, 1.6rem);
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--green-700);
  border-bottom: 2px solid var(--green-700);
  transform: rotate(-45deg);
  opacity: 0.4;
  transition: opacity var(--t-med), transform var(--t-med);
}
.feature--link:hover::after,
.feature--link:focus-visible::after {
  opacity: 1;
  transform: rotate(-45deg) translate(3px, -3px);
}

.feature--link:hover h3 { color: var(--green-700); }
.feature--link:focus-visible { outline-offset: 4px; }

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

.section--dark .feature {
  /* Carte blanche franche sur la section verte : c'est ce qui separe
     visuellement les quatre encadres. La surcharge precedente - blanc a
     4,5 % et bordure blanche a 10 % - datait du fond sombre et ne se voyait
     plus du tout. */
  background: var(--white);
  border-color: var(--line);
  box-shadow: var(--sh-sm);
}
.section--dark .feature p { color: var(--ink-500); }
.section--dark .feature__icon {
  background: var(--green-100);
  color: var(--green-700);
}

/* Encadre d'information */
.callout {
  padding: clamp(1.3rem, 3vw, 1.9rem);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--green-50), var(--white));
  border: 1px solid var(--green-100);
  /* Detail marron conserve : le bord des encarts. */
  border-inline-start: 4px solid #a04000;
}
.callout h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.callout p:last-child { margin-bottom: 0; }
.callout--teal {
  background: linear-gradient(135deg, var(--teal-50), var(--white));
  border-color: rgba(14, 91, 99, 0.18);
  border-inline-start-color: var(--teal-700);
}

/* --------------------------------------------------------------------------
   10. CARROUSEL AUTOMATIQUE (partout sauf « Notre equipe »)
   -------------------------------------------------------------------------- */
/* La bande defile toute seule ET se manipule a la main.
   Le mouvement n'est plus une animation CSS mais un vrai defilement : c'est
   ce qui permet de la saisir en cours de route. On herite du meme coup du
   glissement tactile avec inertie et du defilement au trackpad, que le
   navigateur fait mieux que n'importe quel script.

   /!\ direction: ltr est impose meme en arabe. En RTL, scrollLeft devient
       negatif ou part du bord droit selon les navigateurs ; forcer le sens
       rend la mesure identique partout. Les legendes retrouvent leur sens
       de lecture plus bas — elles seules portent du texte. */
.marquee {
  position: relative;
  z-index: 1;
  overflow-x: auto;
  overflow-y: hidden;
  direction: ltr;
  /* html porte scroll-behavior: smooth ; ici chaque pas est minuscule et
     doit s'appliquer immediatement, sinon le defilement traine. */
  scroll-behavior: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: 0.35rem;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* Barre de defilement masquee : la bande bouge deja d'elle-meme, une barre
   sous les photos ferait tache. Le geste reste possible. */
.marquee::-webkit-scrollbar { display: none; }
.marquee.is-grabbing { cursor: grabbing; }
.marquee__track {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.15rem);
  width: max-content;
}
[dir='rtl'] .marquee__item figcaption { direction: rtl; text-align: right; }

.marquee__item {
  position: relative;
  flex: none;
  /* Sur telephone, la deuxieme vignette doit depasser du bord : c'est ce qui
     fait comprendre que la bande defile. */
  width: clamp(13rem, 60vw, 25rem);
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-md);
  background: var(--sand);
}
.marquee__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.marquee__item figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 2.5rem 1rem 0.85rem;
  background: linear-gradient(180deg, transparent, rgba(26, 31, 35, 0.88));
  color: #fff;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.35;
}
.marquee__item:hover img { transform: scale(1.05); }

.marquee--tall .marquee__item { width: clamp(11rem, 30vw, 16rem); }
.marquee--tall .marquee__item img { aspect-ratio: 3 / 4; }

/* --------------------------------------------------------------------------
   11. CARROUSEL MANUEL (page « Notre equipe » uniquement)
   -------------------------------------------------------------------------- */
.swiper-manual { position: relative; }

.swipe {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  border-radius: var(--r-md);
}
.swipe::-webkit-scrollbar { display: none; }
.swipe > * {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.swipe__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink-800);
  box-shadow: var(--sh-md);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}
.swipe__nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.swipe__nav svg { width: 1.05rem; height: 1.05rem; }
.swipe__nav--prev { left: 0.55rem; }
.swipe__nav--next { right: 0.55rem; }
.swipe__nav[disabled] { opacity: 0; pointer-events: none; }

/* Puces posees sur la photo : elles n'ajoutent pas de hauteur sous l'image */
.swipe__dots {
  position: absolute;
  left: 0; right: 0; bottom: 0.75rem;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  pointer-events: none;
}
.swipe__dot {
  width: 0.5rem; height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  pointer-events: auto;
  transition: width var(--t-med), background-color var(--t-med);
}
.swipe__dot[aria-current='true'] { width: 1.5rem; border-radius: var(--r-pill); background: #fff; }

/* --------------------------------------------------------------------------
   12. EQUIPE
   -------------------------------------------------------------------------- */
.team-grid { display: grid; gap: clamp(1.5rem, 3.5vw, 2.4rem); grid-template-columns: 1fr; }

.member {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: box-shadow var(--t-med), transform var(--t-med);
}
.member:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); }
.member__media { position: relative; background: var(--sand); }
.member__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
}
/* Portrait serre : on remonte le cadrage pour ne jamais couper le haut du crane */
.member__media--top img { object-position: center 2%; }
.member__body { padding: clamp(1.25rem, 3vw, 1.7rem); }
.member__name { font-size: var(--step-2); margin-bottom: 0.2rem; }
.member__role {
  display: inline-block;
  margin-bottom: 0.9rem;
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green-600);
}
.member__body p { color: var(--text-soft); font-size: 0.97rem; margin-bottom: 0; }

.member__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  position: absolute;
  z-index: 3;
  top: 0.7rem; left: 0.7rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: rgba(26, 31, 35, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 550;
  pointer-events: none;
}
.member__hint svg { width: 0.85rem; height: 0.85rem; }

/* --------------------------------------------------------------------------
   13. CHIFFRES, TARIFS, DOCUMENTS
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.8rem, 2.5vw, 1.5rem); }
.stat {
  padding: clamp(1.2rem, 3vw, 1.8rem);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.stat:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.stat b {
  display: block;
  font-family: var(--font-head);
  /* Un cran plus petit qu'avant : a 3rem, « 7h30 - 17h30 » se coupait en
     deux lignes dans sa carte. */
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--green-600), var(--green-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* ATTENTION : selecteur enfant direct — un <span data-count> place DANS le <b>
   ne doit pas heriter du style de la legende. */
.stat > span { display: block; margin-top: 0.5rem; font-size: var(--step--1); color: var(--text-soft); line-height: 1.4; }

/* Tableau des tarifs */
/* Le tableau defile horizontalement sur telephone. Les deux ombres portees
   apparaissent seulement du cote ou il reste du contenu a decouvrir : c'est
   ce qui signale au doigt qu'il y a quelque chose a faire glisser. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  background:
    linear-gradient(90deg, var(--surface) 30%, rgba(255, 255, 255, 0)) left center / 44px 100% no-repeat local,
    linear-gradient(90deg, rgba(255, 255, 255, 0), var(--surface) 70%) right center / 44px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(22, 25, 28, 0.16), rgba(22, 25, 28, 0)) left center / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(22, 25, 28, 0.16), rgba(22, 25, 28, 0)) right center / 16px 100% no-repeat scroll,
    var(--surface);
}
table { width: 100%; border-collapse: collapse; min-width: 30rem; }
caption { padding: 1rem 1.2rem 0; text-align: start; font-size: var(--step--1); color: var(--text-soft); }
th, td { padding: 0.95rem 1.2rem; text-align: start; border-bottom: 1px solid var(--line-soft); }
thead th {
  background: var(--green-50);
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green-800);
  border-bottom: 2px solid var(--green-100);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--green-50); }
td b { font-family: var(--font-head); font-size: 1.05rem; color: var(--green-700); white-space: nowrap; }

/* Etapes numerotees */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 1rem; }
.steps li {
  counter-increment: step;
  position: relative;
  margin: 0;
  padding: 1.15rem 1.3rem 1.15rem 4rem; padding-inline: 4rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  top: 1.05rem; inset-inline-start: 1.15rem;
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green-600), var(--green-500));
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px -4px rgba(42, 111, 73, 0.6);
}
.steps li:hover { transform: translateX(4px); box-shadow: var(--sh-md); }
.steps strong { display: block; font-family: var(--font-head); font-size: var(--step-1); color: var(--heading); margin-bottom: 0.15rem; }
.steps p { color: var(--text-soft); font-size: 0.96rem; margin: 0; }

/* Documents telechargeables */
.docs { display: grid; gap: 0.85rem; }
.doc {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.doc:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--green-200); color: inherit; }
.doc__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.7rem; height: 2.7rem;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--green-600), var(--green-500));
  color: #fff;
}
.doc__icon svg { width: 1.3rem; height: 1.3rem; }
.doc__text { flex: 1; min-width: 0; }
.doc__text strong { display: block; font-family: var(--font-head); font-size: 1.02rem; color: var(--heading); }
.doc__text span { display: block; font-size: 0.85rem; color: var(--text-soft); }
.doc__go { flex: none; color: var(--green-600); transition: transform var(--t-med); }
.doc__go svg { width: 1.2rem; height: 1.2rem; }
.doc:hover .doc__go { transform: translateY(2px); }

.empty-state {
  padding: clamp(1.8rem, 5vw, 3rem);
  text-align: center;
  border: 2px dashed var(--green-200);
  border-radius: var(--r-lg);
  background: var(--green-50);
}
.empty-state__icon {
  display: grid;
  place-items: center;
  width: 3.6rem; height: 3.6rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--green-600);
  box-shadow: var(--sh-sm);
}
.empty-state__icon svg { width: 1.7rem; height: 1.7rem; }
.empty-state h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.empty-state p { color: var(--text-soft); max-width: 34rem; margin-inline: auto; }

/* Liste de contacts */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
.contact-list li { display: flex; gap: 0.95rem; margin: 0; align-items: flex-start; }
.contact-list__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.45rem; height: 2.45rem;
  border-radius: var(--r-sm);
  background: var(--green-50);
  color: var(--green-600);
}
.contact-list__icon svg { width: 1.2rem; height: 1.2rem; }
.contact-list strong { display: block; font-family: var(--font-head); font-size: 0.95rem; color: var(--heading); }
.contact-list a { color: var(--text); text-decoration: none; }
.contact-list a:hover { color: var(--green-600); text-decoration: underline; }
.section--dark .contact-list__icon { background: var(--green-100); color: var(--green-700); }
.section--dark .contact-list strong { color: var(--ink-900); }
.section--dark .contact-list a { color: var(--green-700); }
.section--dark .contact-list a:hover { color: var(--green-800); }

/* --------------------------------------------------------------------------
   Carte Google Maps (page Contact)
   La carte occupe tout l'espace prevu, et C'EST ELLE le lien : un lien
   transparent la recouvre entierement et mene a la fiche Google Maps de
   l'ecole. Ni bandeau, ni icone.

   Un <iframe> capture les clics : sans ce recouvrement, cliquer sur la carte
   ferait defiler ou zoomer la carte au lieu de suivre le lien. On neutralise
   donc les evenements de l'iframe et on place le lien par-dessus.
   -------------------------------------------------------------------------- */
.map {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
  background: var(--sand);
  aspect-ratio: 4 / 3;
}
.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;   /* la carte est une image cliquable, pas un outil */
}
.map__cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  border-radius: inherit;
  /* leger voile au survol : indique que l'ensemble est cliquable */
  background: rgba(26, 31, 35, 0);
  transition: background var(--t-fast);
}
.map__cover:hover { background: rgba(26, 31, 35, 0.12); }
.map__cover:focus-visible {
  outline: 3px solid var(--green-600);
  outline-offset: 2px;
}

/* Le plan de Douala occupe toute la largeur de la section, sous les deux
   cartes de campus : le format 4/3 de la colonne y serait beaucoup trop
   haut. On l'aplatit. */
.map--douala { aspect-ratio: 16 / 7; }
@media (max-width: 48em) { .map--douala { aspect-ratio: 4 / 3; } }

/* --------------------------------------------------------------------------
   14. FORMULAIRES
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: 0.45rem; }
.field label { font-family: var(--font-head); font-weight: 600; font-size: 0.95rem; color: var(--heading); }
.field small { font-size: 0.85rem; color: var(--text-soft); }

textarea, input[type='text'], input[type='email'], select {
  width: 100%;
  padding: 0.9rem 1.05rem;
  font-family: inherit;
  font-size: var(--step-0);
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
textarea { min-height: 11rem; resize: vertical; line-height: 1.65; }
textarea:focus, input:focus, select:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 4px rgba(194, 90, 23, 0.14);
}
textarea:invalid:not(:placeholder-shown) { border-color: #c0392b; }

.field__counter { justify-self: end; font-size: 0.8rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.field__counter.is-warn { color: #b9541f; font-weight: 600; }

/* Piege a robots — jamais visible ni focusable */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-note {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border-radius: var(--r-md);
  background: var(--teal-50);
  border: 1px solid rgba(14, 91, 99, 0.16);
  font-size: 0.92rem;
  color: var(--teal-800);
}
.form-note svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.12rem; }
.form-note p { margin: 0; }

.alert {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border-radius: var(--r-md);
  font-size: 0.95rem;
  border: 1px solid transparent;
}
.alert svg { width: 1.3rem; height: 1.3rem; flex: none; margin-top: 0.1rem; }
.alert p { margin: 0; }
.alert strong { display: block; font-family: var(--font-head); }
.alert--ok { background: #e9f7ef; border-color: #a9dcbf; color: #17603a; }
.alert--err { background: #fdeceb; border-color: #f2b8b3; color: #8f2b21; }
.alert--info { background: var(--green-50); border-color: var(--green-200); color: var(--green-800); }
.alert[hidden] { display: none; }

.btn[aria-busy='true'] { opacity: 0.72; pointer-events: none; }
.btn__spinner { display: none; width: 1.05em; height: 1.05em; animation: spin 0.8s linear infinite; }
.btn[aria-busy='true'] .btn__spinner { display: block; }
.btn[aria-busy='true'] .btn__icon { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   15. BOUTON WHATSAPP FLOTTANT
   -------------------------------------------------------------------------- */
/* Pastille ronde : icone seule, sans libelle ni numero */
.wa-float {
  position: fixed;
  right: clamp(0.9rem, 3vw, 1.6rem);
  bottom: clamp(0.9rem, 3vw, 1.6rem);
  z-index: 950;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #15803d, #1a9a4a);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 32px -8px rgba(20, 120, 58, 0.6), 0 2px 6px rgba(0, 0, 0, 0.16);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.wa-float:hover, .wa-float:focus-visible {
  color: #fff;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 18px 40px -10px rgba(20, 120, 58, 0.7);
}
.wa-float svg { width: 1.9rem; height: 1.9rem; }

/* Pulsation legere pour attirer l'oeil */
.wa-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #1a9a4a;
  z-index: -1;
  animation: wa-pulse 2.8s ease-out infinite;
}
@keyframes wa-pulse {
  0%   { transform: scale(1); opacity: 0.55; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* --------------------------------------------------------------------------
   16. PIED DE PAGE
   -------------------------------------------------------------------------- */
.footer {
  background: linear-gradient(160deg, var(--green-800) 0%, var(--green-900) 62%, #0b2416 100%);
  /* Seule zone foncee du site : le texte y reste clair. */
  color: rgba(240, 243, 245, 0.78);
  padding-block: clamp(2.8rem, 6vw, 4.5rem) 0;
  font-size: 0.95rem;
}
.footer__bar--plain { border-top: 0; }
.footer__grid {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  padding-bottom: clamp(2rem, 5vw, 3rem);
}
.footer h2, .footer h3 {
  font-size: 0.85rem;
  font-family: var(--font-head);
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green-200);
  margin-bottom: 1.1rem;
}
.footer a { color: rgba(240, 243, 245, 0.76); text-decoration: none; }
.footer a:hover { color: var(--on-dark); text-decoration: underline; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 0.6rem; }

.footer__brand { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.1rem; }
.footer__brand img { width: 3.2rem; }
.footer__brand strong { display: block; font-family: var(--font-head); font-size: 1.1rem; color: #fff; line-height: 1.25; }
.footer__brand span { font-size: 0.78rem; color: var(--on-dark); letter-spacing: 0.05em; }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding-block: 1.3rem;
  border-top: 1px solid rgba(240, 243, 245, 0.1);
  font-size: 0.85rem;
  color: rgba(240, 243, 245, 0.52);
}
.footer__bar ul { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.footer__bar li { margin: 0; }

.footer__motto {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.95rem;
  border-radius: var(--r-pill);
  background: rgba(183, 220, 199, 0.14);
  border: 1px solid rgba(183, 220, 199, 0.28);
  color: var(--green-200);
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   17. BANDEAU D'ACTUALITES
   -------------------------------------------------------------------------- */
.newsbar {
  background: linear-gradient(100deg, var(--green-700), var(--green-600) 55%, var(--green-500));
  color: #fff;
  overflow: hidden;
}
.newsbar__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding-block: 0.7rem;
}
.newsbar__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.24rem 0.75rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.2);
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.newsbar__dot {
  width: 0.45rem; height: 0.45rem;
  border-radius: 50%;
  background: var(--green-200);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.newsbar__text {
  flex: 1;
  min-width: 0;
  font-size: 0.92rem;
  line-height: 1.4;
}
.newsbar__text strong { color: #fff; }
.newsbar a { color: #fff; }

/* --------------------------------------------------------------------------
   18. ANIMATIONS AU DEFILEMENT
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
[data-reveal='left']  { transform: translate3d(-26px, 0, 0); }
[data-reveal='right'] { transform: translate3d(26px, 0, 0); }
[data-reveal='zoom']  { transform: scale(0.955); }
[data-reveal='zoom'].is-visible { transform: scale(1); }

[data-reveal-group] > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
[data-reveal-group].is-visible > * { opacity: 1; transform: translate3d(0, 0, 0); }
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.13s; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.21s; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.29s; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 0.37s; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 0.45s; }

/* --------------------------------------------------------------------------
   19. RESPONSIVE
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   19.a TELEPHONES ETROITS (jusqu'a 479 px) — Android d'entree de gamme
   Ces appareils representent la majorite du trafic attendu.
   -------------------------------------------------------------------------- */
@media (max-width: 29.99em) {

  /* En-tete : la definition du sigle demande deux lignes et faisait
     deborder la barre a cette largeur. Le logo et le sigle suffisent ici. */
  .brand__tag { /* vert : le seul accent colore de l'en-tete */ display: none; }
  .brand__name { font-size: 1.05rem; }
  .brand img { width: 2.35rem; }

  /* Cibles tactiles : 44 px minimum */
  .lang a { padding: 0.55rem 0.7rem; font-size: 0.8rem; }
  .footer li a { display: inline-block; padding-block: 0.2rem; }

  /* Appels a l'action pleine largeur : plus lisibles et plus faciles a viser
     qu'un bouton centre a moitie coupe. */
  .hero__actions .btn { width: 100%; }

  /* Le badge et le titre du hero respirent moins */
  .hero__badge { font-size: 0.78rem; }
  h1 { font-size: clamp(1.95rem, 8.6vw, 2.3rem); }

  /* Les etapes numerotees : on rapproche le contenu de la pastille */
  .steps li { padding: 1rem 1rem 1rem 3.4rem; }
  .steps li::before { top: 0.95rem; inset-inline-start: 0.8rem; width: 1.9rem; height: 1.9rem; font-size: 0.9rem; }

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

  /* Le bouton WhatsApp flottant ne doit pas masquer la derniere ligne */
  .footer__bar { padding-bottom: 5rem; }

  /* Fleches du carrousel manuel : plus grandes et plus contrastees au doigt */
  .swipe__nav { width: 2.9rem; height: 2.9rem; }

  /* Chiffres cles : sur deux colonnes il ne reste que ~116 px utiles, alors
     qu'une valeur comme « 7h30 - 17h30 » en demande environ 200. Une seule
     colonne les laisse s'afficher en entier, sans reduire la typographie. */
  .stats { grid-template-columns: 1fr; }
  .stat { padding-block: 1.1rem; }

  /* Bandeau du hero : la plage horaire y est la valeur la plus longue */
  .hero__stat--sm b { font-size: clamp(0.95rem, 3.3vw, 1.35rem); }
}

@media (min-width: 30em) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .newsbar__inner { flex-direction: row; align-items: center; gap: 1rem; }
}

@media (min-width: 40em) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .hero__stats { grid-template-columns: repeat(4, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .swipe > * { flex-basis: 78%; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 62em) {
  :root { --header-h: 5rem; }
  .nav { display: block; }
  .burger, .drawer { display: none; }
  .header .btn--whatsapp { display: inline-flex; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
  .brand img { width: 3rem; }
  .swipe > * { flex-basis: 100%; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  .split .stats, .split .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .split--wide-left { grid-template-columns: 1.15fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.15fr; }
}

/* Entre 992 px et 1312 px, la barre porte le logo, sa definition, six
   entrees de menu, le selecteur de langue et le bouton WhatsApp : cela ne
   tient pas. On retire le bouton WhatsApp sur cette plage, et non la
   definition du sigle. Raison : le bouton flottant vert reste present en bas
   a droite de toutes les pages, et le numero figure dans le pied de page et
   sur la page Contact — rien n'est perdu. La definition, elle, n'apparait
   nulle part ailleurs en haut de page. */
@media (min-width: 62em) and (max-width: 81.99em) {
  .header .btn--whatsapp { display: none; }
}

@media (min-width: 75em) {
  .nav__link { padding: 0.6rem 0.95rem; font-size: 1rem; }
  .nav__link::before { left: 0.95rem; right: 0.95rem; }
}

/* --------------------------------------------------------------------------
   20. ACCESSIBILITE — MOUVEMENT REDUIT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none; transform: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .floaties { display: none; }
  .wa-float::before { display: none; }
}

/* --------------------------------------------------------------------------
   21. IMPRESSION
   -------------------------------------------------------------------------- */
@media print {
  .header, .drawer, .wa-float, .newsbar, .marquee, .footer__bar { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}

/* ==========================================================================
   ECRITURE DE DROITE A GAUCHE — version arabe
   --------------------------------------------------------------------------
   L'essentiel de la mise en page bascule tout seul : la feuille utilise des
   proprietes logiques (padding-inline, border-inline-start, text-align:start)
   et les positionnements absolus sont symetriques (left:0; right:0).
   Ne restent ici que les cas qui ne peuvent pas s'inverser d'eux-memes :
   les elements cales sur un seul bord, et les fleches directionnelles.
   ========================================================================== */

/* Menu de langue : ancre a gauche de son bouton, et non plus a droite */
[dir='rtl'] .lang__menu { right: auto; left: 0; }
@media (max-width: 29.99em) {
  [dir='rtl'] .lang__menu { right: auto; left: -0.5rem; }
}

/* Bouton WhatsApp flottant : passe dans le coin oppose */
[dir='rtl'] .wa-float {
  right: auto;
  left: clamp(0.9rem, 3vw, 1.6rem);
}

/* Fleches directionnelles.
   Une fleche « suivant » qui pointe a droite se lit a l'envers en arabe.
   On ne retourne que les fleches placees APRES un texte : dans un bouton
   WhatsApp, l'icone est le premier enfant et ne doit surtout pas etre
   retournee — ce n'est pas une fleche. */
[dir='rtl'] .arrow-link svg,
[dir='rtl'] .btn > svg:not(:first-child) {
  transform: scaleX(-1);
}

/* Carrousel manuel : les fleches precedent/suivant s'echangent */
[dir='rtl'] .swipe__nav svg { transform: scaleX(-1); }

/* Les nombres et les dates restent lus de gauche a droite */
[dir='rtl'] .stat > b,
[dir='rtl'] .hero__stat > b,
[dir='rtl'] table td:not(:first-child) {
  direction: ltr;
  unicode-bidi: embed;
}

/* Les numeros de telephone et l'adresse e-mail sont des sequences latines :
   sans cela, l'indicatif +237 se retrouverait a la fin. */
[dir='rtl'] a[href^='tel:'],
[dir='rtl'] a[href^='mailto:'] {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}


/* ==========================================================================
   VOILE DES PHOTOS DE FOND — CAS PARTICULIERS
   ========================================================================== */

/* Ecriture de droite a gauche : le texte passe a droite, le voile doit donc
   etre dense de ce cote. Les degrades CSS ne s'inversent pas tout seuls ;
   on reprend l'angle en miroir, 100deg devenant 260deg. */
[dir='rtl'] .hero__scrim {
  background: linear-gradient(260deg,
    rgba(255, 255, 255, 0.86) 0%,
    rgba(255, 255, 255, 0.78) 38%,
    rgba(255, 255, 255, 0.55) 58%,
    rgba(255, 255, 255, 0.22) 78%,
    rgba(255, 255, 255, 0.08) 100%);
}
[dir='rtl'] .pagehead__scrim {
  background: linear-gradient(260deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.89) 40%,
    rgba(255, 255, 255, 0.66) 60%,
    rgba(255, 255, 255, 0.36) 80%,
    rgba(255, 255, 255, 0.24) 100%);
}

/* Sous 62em le texte occupe toute la largeur : un voile dense a gauche ne
   profiterait a rien. Le degrade devient vertical, dense en haut sous le
   titre, leger en bas ou la photo n'est recouverte que par des cartes
   blanches opaques. */
@media (max-width: 61.99em) {
  .hero__scrim,
  [dir='rtl'] .hero__scrim {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.85) 44%,
      rgba(255, 255, 255, 0.62) 74%,
      rgba(255, 255, 255, 0.24) 100%);
  }
  .pagehead__scrim,
  [dir='rtl'] .pagehead__scrim {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(255, 255, 255, 0.9) 55%,
      rgba(255, 255, 255, 0.7) 100%);
  }
}
/* --------------------------------------------------------------------------
   CHIFFRES CLES : LES MONTANTS
   Les frais de scolarite sont mis en marron - la couleur exacte du logo -
   pour les distinguer des autres chiffres de la meme rangee, qui restent
   verts. C'est une somme a payer, pas une caracteristique de l'ecole.
   La devise est composee plus petite : « 300 000 FCFA » ne tiendrait pas sur
   une ligne a la taille du chiffre, et se coupait de facon disgracieuse.
   -------------------------------------------------------------------------- */
.stat--montant b {
  background: linear-gradient(135deg, #a04000, #c25a17);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat b small {
  font-size: 0.46em;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}