/* ==========================================================================
   Morocco Campus — Feuille de styles principale
   Palette : vert Atlas + laiton doré + papier sable
   Typographie : Fraunces (display) + Manrope (texte)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Couleurs */
  --ink:            #10201C;
  --ink-2:          #2C433D;
  --muted:          #667872;
  --paper:          #FBF9F5;
  --paper-2:        #F4F0E8;
  --paper-3:        #EAE4D8;
  --line:           #E2DBCD;
  --line-strong:    #CFC5B2;
  --white:          #FFFFFF;

  --green-900:      #06342C;
  --green-800:      #0A463C;
  --green-700:      #0E5A4D;
  --green-600:      #14705F;
  --green-300:      #8FBDB2;
  --green-050:      #E7F0ED;

  --gold:           #B5822A;
  --gold-600:       #C9963A;
  --gold-200:       #EFDFBE;
  --gold-050:       #FAF3E5;

  --wa:             #25D366;
  --wa-dark:        #128C7E;

  /* Typographie */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-hero:  clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem);
  --fs-h1:    clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
  --fs-h2:    clamp(1.7rem, 1.25rem + 1.7vw, 2.7rem);
  --fs-h3:    clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  --fs-lede:  clamp(1.02rem, 0.97rem + 0.3vw, 1.19rem);

  /* Espacement / rythme */
  --shell:      1220px;
  --shell-nar:  860px;
  --gutter:     clamp(1.15rem, 4vw, 2.6rem);
  --sec-y:      clamp(3.7rem, 7vw, 7rem);

  /* Effets */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --sh-1: 0 1px 2px rgba(16,32,28,.05), 0 6px 16px -8px rgba(16,32,28,.12);
  --sh-2: 0 2px 4px rgba(16,32,28,.05), 0 18px 40px -18px rgba(16,32,28,.25);
  --sh-3: 0 30px 70px -30px rgba(6,52,44,.42);
  --ease: cubic-bezier(.22,.68,.36,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:92px;
  font-size:112.5%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-0.015em;
  margin:0;
  text-wrap:balance;
  color:var(--green-900);
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); line-height:1.28; }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--green-800); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-md) 0;
}
.skip-link:focus{ left:0; }

/* ---------- 3. Utilitaires de mise en page ---------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.shell-narrow{ max-width:var(--shell-nar); }
.section{ padding-block:var(--sec-y); }
.section--paper2{ background:var(--paper-2); }
.section--dark{ background:var(--green-900); color:#DCE8E4; }
.section--dark h2,.section--dark h3{ color:#fff; }
.section--line{ border-top:1px solid var(--line); }

.stack{ display:flex; flex-direction:column; }
.gap-xs{ gap:.5rem; } .gap-sm{ gap:.85rem; } .gap-md{ gap:1.4rem; } .gap-lg{ gap:2.2rem; }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.mt-sm{ margin-top:1rem; } .mt-md{ margin-top:1.8rem; } .mt-lg{ margin-top:2.8rem; }
.measure{ max-width:62ch; }
.measure-narrow{ max-width:52ch; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 4. Éléments d'écriture ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.62rem;
  font-size:.735rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold); margin:0;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--gold); flex:none; opacity:.8;
}
.eyebrow--center{ justify-content:center; }
.section--dark .eyebrow{ color:var(--gold-600); }
.section--dark .eyebrow::before{ background:var(--gold-600); }

.lede{ font-size:var(--fs-lede); color:var(--ink-2); line-height:1.68; }
.section--dark .lede{ color:#BFD3CD; }

.section-head{ max-width:660px; display:flex; flex-direction:column; gap:1rem; margin-bottom:clamp(2.2rem,4vw,3.4rem); }
.section-head--center{ margin-inline:auto; text-align:center; align-items:center; }

.gold-rule{ width:54px; height:2px; background:var(--gold); border:0; margin:0; }

/* ---------- 5. Boutons ---------- */
.btn{
  --btn-bg:var(--green-800); --btn-fg:#fff; --btn-bd:var(--green-800);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.92rem 1.6rem;
  background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bd);
  border-radius:var(--r-sm);
  font-size:.94rem; font-weight:700; letter-spacing:.01em;
  cursor:pointer; text-align:center;
  transition:transform .32s var(--ease), background-color .32s var(--ease),
             border-color .32s var(--ease), color .32s var(--ease), box-shadow .32s var(--ease);
}
.btn svg{ width:1.05em; height:1.05em; flex:none; transition:transform .32s var(--ease); }
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }
.btn:hover svg.i-arrow{ transform:translateX(3px); }

.btn--gold{ --btn-bg:var(--gold); --btn-bd:var(--gold); }
.btn--gold:hover{ --btn-bg:var(--gold-600); --btn-bd:var(--gold-600); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--green-900); --btn-bd:var(--line-strong); }
.btn--ghost:hover{ --btn-bd:var(--green-800); }
.btn--light{ --btn-bg:#fff; --btn-fg:var(--green-900); --btn-bd:#fff; }
.btn--outline-light{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.45); }
.btn--outline-light:hover{ --btn-bd:#fff; }
.btn--wa{ --btn-bg:var(--wa-dark); --btn-bd:var(--wa-dark); }
.btn--wa:hover{ --btn-bg:#0f7568; --btn-bd:#0f7568; }
.btn--sm{ padding:.68rem 1.15rem; font-size:.86rem; }
.btn--block{ width:100%; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.9rem; color:var(--green-700);
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.link-arrow svg{ width:1em; height:1em; transition:transform .3s var(--ease); }
.link-arrow:hover{ color:var(--gold); border-color:var(--gold); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ---------- 6. En-tête / navigation ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:transparent;
  transition:background-color .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
  min-height:88px;
}
.site-header.is-solid,
.site-header.is-inner{
  background:rgba(251,249,245,.93);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 8px 30px -24px rgba(16,32,28,.5);
}

/* Logo */
.brand{ display:inline-flex; align-items:center; gap:.7rem; flex:none; }
.brand__mark{ width:38px; height:38px; flex:none; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--font-display); font-weight:600; font-size:1.24rem;
  letter-spacing:-0.01em; color:var(--green-900);
}
.brand__tag{
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin-top:3px;
}
.site-header:not(.is-solid):not(.is-inner) .brand__name{ color:#fff; }
.site-header:not(.is-solid):not(.is-inner) .brand__tag{ color:var(--gold-200); }

/* Liens */
.nav{ display:flex; align-items:center; gap:2.4rem; margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:2rem; }
.nav__link{
  font-size:.9rem; font-weight:600; color:var(--ink-2); white-space:nowrap;
  position:relative; padding-block:.6rem;
  transition:color .3s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after{ transform:scaleX(1); }
.nav__link[aria-current="page"]{ color:var(--green-800); }
.site-header:not(.is-solid):not(.is-inner) .nav__link{ color:rgba(255,255,255,.86); }
.site-header:not(.is-solid):not(.is-inner) .nav__link:hover,
.site-header:not(.is-solid):not(.is-inner) .nav__link[aria-current="page"]{ color:#fff; }

.nav__cta{ flex:none; }
.site-header:not(.is-solid):not(.is-inner) .nav__cta.btn{
  --btn-bg:#fff; --btn-fg:var(--green-900); --btn-bd:#fff;
}

/* Burger */
.nav-toggle{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  cursor:pointer; flex:none;
}
.nav-toggle__bars{ position:relative; width:19px; height:1.6px; background:var(--green-900); display:block; }
.nav-toggle__bars::before,.nav-toggle__bars::after{
  content:""; position:absolute; left:0; width:19px; height:1.6px; background:var(--green-900);
  transition:transform .34s var(--ease), top .34s var(--ease);
}
.nav-toggle__bars::before{ top:-6px; } .nav-toggle__bars::after{ top:6px; }
.site-header:not(.is-solid):not(.is-inner) .nav-toggle{ border-color:rgba(255,255,255,.4); }
.site-header:not(.is-solid):not(.is-inner) .nav-toggle__bars,
.site-header:not(.is-solid):not(.is-inner) .nav-toggle__bars::before,
.site-header:not(.is-solid):not(.is-inner) .nav-toggle__bars::after{ background:#fff; }
body.nav-open .nav-toggle__bars{ background:transparent; }
body.nav-open .nav-toggle__bars::before{ top:0; transform:rotate(45deg); }
body.nav-open .nav-toggle__bars::after{ top:0; transform:rotate(-45deg); }

@media (max-width:1080px){
  .nav-toggle{ display:inline-flex; }
  .nav{
    position:fixed; inset:78px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:0 var(--gutter);
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .45s var(--ease), opacity .3s var(--ease), padding .45s var(--ease);
    box-shadow:var(--sh-2);
  }
  body.nav-open .nav{ max-height:min(78vh,640px); opacity:1; padding-block:.6rem 1.6rem; overflow-y:auto; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__link{ display:block; padding:.95rem 0; border-bottom:1px solid var(--line); color:var(--ink-2) !important; font-size:1rem; }
  .nav__link::after{ display:none; }
  .nav__cta{ margin-top:1.15rem; }
  .site-header:not(.is-solid):not(.is-inner) .nav__cta.btn{
    --btn-bg:var(--green-800); --btn-fg:#fff; --btn-bd:var(--green-800);
  }
}

/* ---------- 7. Hero (accueil) ---------- */
.hero{ position:relative; isolation:isolate; background:var(--green-900); color:#fff; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:100%; object-fit:cover; animation:kenburns 26s var(--ease) infinite alternate; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(105deg, rgba(6,52,44,.94) 0%, rgba(6,52,44,.82) 42%, rgba(6,52,44,.42) 76%, rgba(6,52,44,.28) 100%),
    linear-gradient(to top, rgba(6,52,44,.75), transparent 55%);
}
@keyframes kenburns{ from{ transform:scale(1) translate3d(0,0,0);} to{ transform:scale(1.09) translate3d(-1.2%,-1.4%,0);} }

.hero__inner{ padding-top:clamp(8.5rem,15vw,11.5rem); padding-bottom:clamp(3.4rem,7vw,5.4rem); }
.hero__grid{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(2rem,5vw,4.6rem); align-items:end; }
.hero h1{ color:#fff; font-size:var(--fs-hero); line-height:1.03; margin:1.15rem 0 1.35rem; }
.hero h1 em{ font-style:italic; color:var(--gold-200); }
.hero .eyebrow{ color:var(--gold-200); }
.hero .eyebrow::before{ background:var(--gold-200); }
.hero__lede{ color:rgba(255,255,255,.86); font-size:var(--fs-lede); max-width:54ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.hero__note{ display:flex; align-items:center; gap:.55rem; margin-top:1.6rem; font-size:.86rem; color:rgba(255,255,255,.7); }
.hero__note svg{ width:1.05em; height:1.05em; color:var(--gold-200); flex:none; }

/* Carte "chiffres" du hero */
.hero-card{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.17);
  border-radius:var(--r-lg);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:clamp(1.5rem,2.6vw,2.1rem);
}
.hero-card__title{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-200); font-weight:700; margin-bottom:1.3rem;
}
.hero-card__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.16); border-radius:var(--r-md); overflow:hidden; }
.hero-stat{ background:rgba(6,52,44,.55); padding:1.05rem 1.1rem; }
.hero-stat__num{
  font-family:var(--font-display); font-size:1.85rem; font-weight:600; color:#fff;
  font-variant-numeric:tabular-nums; line-height:1;
}
.hero-stat__label{ font-size:.78rem; color:rgba(255,255,255,.72); margin-top:.4rem; line-height:1.35; }

.hero__scroll{
  display:flex; align-items:center; gap:.6rem; margin-top:clamp(2.4rem,5vw,3.6rem);
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.6);
}
.hero__scroll svg{ width:1.1em; height:1.1em; animation:bob 2.4s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} }

@media (max-width:920px){
  .hero__grid{ grid-template-columns:1fr; align-items:start; }
  .hero-card{ width:100%; }
}
@media (max-width:520px){
  .hero-card__grid{ grid-template-columns:1fr; }
}

/* ---------- 8. Hero des pages intérieures ---------- */
.page-hero{
  position:relative; isolation:isolate; background:var(--green-900); color:#fff; overflow:hidden;
  padding-top:clamp(7.5rem,13vw,9.6rem); padding-bottom:clamp(3rem,6vw,4.6rem);
}
.page-hero__media{ position:absolute; inset:0; z-index:-2; }
.page-hero__media img{ width:100%; height:100%; object-fit:cover; }
.page-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(6,52,44,.94) 5%, rgba(6,52,44,.8) 45%, rgba(6,52,44,.42) 100%);
}
.page-hero h1{ color:#fff; margin:1rem 0 1.1rem; max-width:20ch; }
.page-hero .eyebrow{ color:var(--gold-200); }
.page-hero .eyebrow::before{ background:var(--gold-200); }
.page-hero__lede{ color:rgba(255,255,255,.84); font-size:var(--fs-lede); max-width:58ch; }

.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.8rem; color:rgba(255,255,255,.62); margin-top:1.6rem; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb svg{ width:.85em; height:.85em; opacity:.6; }

/* ---------- 9. Cartes génériques ---------- */
.grid{ display:grid; gap:clamp(1.1rem,2vw,1.6rem); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1000px){ .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:880px){ .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:clamp(1.5rem,2.4vw,2rem);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card--hover:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--line-strong); }
.card__icon{
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; background:var(--green-050); color:var(--green-700);
  margin-bottom:1.15rem;
}
.card__icon svg{ width:20px; height:20px; }
.card--gold .card__icon{ background:var(--gold-050); color:var(--gold); }
.card h3{ margin-bottom:.6rem; }
.card p{ color:var(--muted); font-size:.94rem; }

/* Liste à puces cochées */
.check-list{ display:flex; flex-direction:column; gap:.72rem; }
.check-list li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.94rem; color:var(--ink-2); }
.check-list svg{ width:1.05em; height:1.05em; color:var(--green-600); flex:none; margin-top:.3em; }
.section--dark .check-list li{ color:#C8DAD5; }
.section--dark .check-list svg{ color:var(--gold-600); }

/* ---------- 10. Section "pourquoi" avec image ---------- */
.split{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,5vw,4.4rem); align-items:center; }
.split--wide-left{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
@media (max-width:900px){ .split,.split--wide-left{ grid-template-columns:1fr; } }

.figure{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-3); }
.figure img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.figure:hover img{ transform:scale(1.04); }
.figure--tall{ aspect-ratio:4/5; }
.figure--wide{ aspect-ratio:16/11; }
.figure__badge{
  position:absolute; left:0; bottom:0;
  background:var(--white); border-top-right-radius:var(--r-md);
  padding:1.05rem 1.5rem 1.05rem 1.3rem; max-width:78%;
}
.figure__badge strong{
  display:block; font-family:var(--font-display); font-size:1.6rem; color:var(--green-800); line-height:1;
  font-variant-numeric:tabular-nums;
}
.figure__badge span{ font-size:.8rem; color:var(--muted); }

/* Duo d'images décalées */
.figure-duo{ position:relative; padding-bottom:14%; padding-right:12%; }
.figure-duo__main{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-3); aspect-ratio:4/3; }
.figure-duo__main img{ width:100%; height:100%; object-fit:cover; }
.figure-duo__sub{
  position:absolute; right:0; bottom:0; width:52%;
  border-radius:var(--r-md); overflow:hidden; border:6px solid var(--paper);
  box-shadow:var(--sh-2); aspect-ratio:1/1;
}
.figure-duo__sub img{ width:100%; height:100%; object-fit:cover; }

/* ---------- 11. Étapes numérotées ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.2rem,2.4vw,2rem); counter-reset:step; }
@media (max-width:960px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding-top:2.6rem; }
.step::before{
  counter-increment:step; content:"0" counter(step);
  position:absolute; top:0; left:0;
  font-family:var(--font-display); font-size:1.65rem; font-weight:600; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.step::after{
  content:""; position:absolute; top:1.15rem; left:2.9rem; right:-1rem; height:1px;
  background:var(--line-strong);
}
.step:last-child::after{ display:none; }
@media (max-width:960px){ .step:nth-child(2n)::after{ display:none; } }
@media (max-width:560px){ .step::after{ display:none; } }
.step h3{ margin-bottom:.55rem; }
.step p{ color:var(--muted); font-size:.93rem; }
.section--dark .step p{ color:#B7CCC6; }
.section--dark .step::after{ background:rgba(255,255,255,.2); }

/* ---------- 12. Carte école ---------- */
.school-card{
  display:flex; flex-direction:column; overflow:hidden; position:relative;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.school-card .link-arrow::after{ content:""; position:absolute; inset:0; z-index:1; }
.school-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); border-color:var(--line-strong); }
.school-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--paper-3); }
.school-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.school-card:hover .school-card__media img{ transform:scale(1.06); }
.school-card__type{
  position:absolute; top:.9rem; left:.9rem;
  background:rgba(6,52,44,.9); color:#fff; font-size:.7rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; padding:.42rem .72rem; border-radius:var(--r-sm);
}
.school-card__body{ padding:1.35rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.75rem; flex:1; }
.school-card__meta{ display:flex; align-items:center; gap:.42rem; font-size:.8rem; color:var(--muted); }
.school-card__meta svg{ width:.95em; height:.95em; color:var(--gold); flex:none; }
.school-card h3{ font-size:1.2rem; }
.school-card p{ font-size:.9rem; color:var(--muted); flex:1; }
.school-card__foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:.95rem; border-top:1px solid var(--line); margin-top:.35rem;
}
.price-tag{ display:flex; flex-direction:column; line-height:1.2; }
.price-tag__label{ font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.price-tag__value{ font-family:var(--font-display); font-size:1.05rem; color:var(--green-800); font-variant-numeric:tabular-nums; }

/* Puces / étiquettes */
.tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.tag{
  font-size:.72rem; font-weight:600; color:var(--green-700);
  background:var(--green-050); border:1px solid #D5E5E0;
  padding:.28rem .6rem; border-radius:100px;
}
.tag--gold{ color:var(--gold); background:var(--gold-050); border-color:var(--gold-200); }
.tag--neutral{ color:var(--ink-2); background:var(--paper-2); border-color:var(--line); }

/* ---------- 13. Fiche école (page détail) ---------- */
.fact-bar{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--white);
}
@media (max-width:820px){ .fact-bar{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .fact-bar{ grid-template-columns:1fr; } }
.fact{ padding:1.25rem 1.35rem; border-right:1px solid var(--line); }
.fact:last-child{ border-right:0; }
@media (max-width:820px){
  .fact{ border-bottom:1px solid var(--line); }
  .fact:nth-child(2n){ border-right:0; }
}
.fact__label{ font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-bottom:.35rem; }
.fact__value{ font-weight:700; color:var(--green-900); font-size:.98rem; }

/* Tableau des programmes */
.prog-block{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--white); }
.prog-block + .prog-block{ margin-top:1.35rem; }
.prog-block__head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 1.35rem; background:var(--green-900); color:#fff;
}
.prog-block__head h3{ color:#fff; font-size:1.06rem; }
.prog-block__price{
  font-family:var(--font-display); font-size:1.1rem; color:var(--gold-200);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.prog-block__price small{ display:block; font-family:var(--font-body); font-size:.7rem; color:rgba(255,255,255,.6); letter-spacing:.04em; }
.prog-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:680px){ .prog-list{ grid-template-columns:1fr; } }
.prog-list li{
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.85rem 1.35rem; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--ink-2);
}
.prog-list li:nth-child(2n){ border-left:1px solid var(--line); }
@media (max-width:680px){ .prog-list li:nth-child(2n){ border-left:0; } }
.prog-list svg{ width:.95em; height:.95em; color:var(--gold); flex:none; margin-top:.35em; }
.prog-list li em{ display:block; font-style:normal; font-size:.8rem; color:var(--muted); margin-top:.15rem; }

/* ---------- 14. Page formations : filtres ---------- */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:1.4rem; align-items:flex-end;
  padding:1.4rem 1.5rem; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-1);
}
.field{ display:flex; flex-direction:column; gap:.4rem; min-width:190px; flex:1; }
.field label{ font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.field select,.field input,.field textarea{
  font-family:var(--font-body); font-size:.94rem; color:var(--ink);
  padding:.78rem .9rem; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:var(--white); width:100%;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field select:focus,.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--green-600); box-shadow:0 0 0 3px rgba(20,112,95,.13);
}
.field textarea{ resize:vertical; min-height:130px; }
.field--search{ position:relative; }
.field--search svg{ position:absolute; left:.85rem; bottom:.95rem; width:1em; height:1em; color:var(--muted); }
.field--search input{ padding-left:2.4rem; }

.result-count{ font-size:.86rem; color:var(--muted); margin-top:1.2rem; }
.result-count strong{ color:var(--green-800); }

.prog-row{
  display:grid; grid-template-columns:minmax(0,2.3fr) minmax(0,1.2fr) minmax(0,.9fr) minmax(0,1fr);
  gap:1rem; align-items:center;
  padding:1.15rem 1.3rem; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r-md); margin-top:.7rem;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.prog-row:hover{ transform:translateX(3px); border-color:var(--line-strong); box-shadow:var(--sh-1); }
.prog-row__name{ font-weight:700; color:var(--green-900); font-size:.98rem; }
.prog-row__opts{ font-size:.8rem; color:var(--muted); margin-top:.2rem; }
.prog-row__school{ font-size:.88rem; color:var(--ink-2); display:flex; align-items:center; gap:.45rem; }
.prog-row__school svg{ width:.95em; height:.95em; color:var(--gold); flex:none; }
.prog-row__price{ font-family:var(--font-display); font-size:1rem; color:var(--green-800); font-variant-numeric:tabular-nums; text-align:right; }
.prog-row__price small{ display:block; font-family:var(--font-body); font-size:.7rem; color:var(--muted); }
.prog-row.is-hidden{ display:none; }
@media (max-width:860px){
  .prog-row{ grid-template-columns:1fr 1fr; row-gap:.75rem; }
  .prog-row__price{ text-align:left; }
}
@media (max-width:520px){ .prog-row{ grid-template-columns:1fr; } }

.empty-state{
  text-align:center; padding:3.4rem 1.5rem; border:1px dashed var(--line-strong);
  border-radius:var(--r-md); color:var(--muted); margin-top:1.4rem; background:var(--white);
}

/* ---------- 15. Accordéon FAQ ---------- */
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
  padding:1.35rem 0; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-size:1.08rem; font-weight:600; color:var(--green-900);
  transition:color .3s var(--ease);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--gold); }
.faq-item summary svg{ width:1rem; height:1rem; flex:none; color:var(--gold); transition:transform .35s var(--ease); }
.faq-item[open] summary svg{ transform:rotate(180deg); }
.faq-item__body{ padding-bottom:1.5rem; color:var(--ink-2); font-size:.96rem; max-width:70ch; }
.faq-item[open] .faq-item__body{ animation:fadeUp .4s var(--ease) both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }

/* ---------- 16. Bandeau CTA ---------- */
.cta-band{ position:relative; isolation:isolate; overflow:hidden; background:var(--green-900); color:#fff; }
.cta-band__media{ position:absolute; inset:0; z-index:-2; }
.cta-band__media img{ width:100%; height:100%; object-fit:cover; }
.cta-band::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(6,52,44,.96), rgba(6,52,44,.78));
}
.cta-band__inner{ padding-block:clamp(3.4rem,6vw,5.4rem); display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:2.6rem; align-items:center; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.82); margin-top:1rem; max-width:52ch; }
.cta-band__actions{ display:flex; flex-direction:column; gap:.85rem; }
@media (max-width:820px){ .cta-band__inner{ grid-template-columns:1fr; } }

/* ---------- 17. Formulaire de contact ---------- */
.form-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.6rem); box-shadow:var(--sh-1);
}
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.15rem; }
.form-grid .field--full{ grid-column:1 / -1; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.form-note{ font-size:.8rem; color:var(--muted); margin-top:1.1rem; display:flex; gap:.55rem; align-items:flex-start; }
.form-note svg{ width:1em; height:1em; color:var(--wa-dark); flex:none; margin-top:.25em; }
.form-error{ font-size:.8rem; color:#A8321F; margin-top:.35rem; display:none; }
.field.has-error input,.field.has-error select,.field.has-error textarea{ border-color:#C0472F; }
.field.has-error .form-error{ display:block; }

.contact-info{ display:flex; flex-direction:column; gap:1.5rem; }
.contact-line{ display:flex; gap:1rem; align-items:flex-start; }
.contact-line__icon{
  width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--green-050); color:var(--green-700);
}
.contact-line__icon svg{ width:19px; height:19px; }
.contact-line strong{ display:block; font-size:.95rem; color:var(--green-900); }
.contact-line span,.contact-line a{ font-size:.92rem; color:var(--muted); }
.contact-line a:hover{ color:var(--gold); }

/* ---------- 18. Pied de page ---------- */
.site-footer{ background:var(--green-900); color:#A9C2BB; padding-block:clamp(3rem,5vw,4.4rem) 0; }
.footer-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:2.4rem; }
@media (max-width:940px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer .brand__name{ color:#fff; }
.site-footer .brand__tag{ color:var(--gold-600); }
.site-footer p{ font-size:.9rem; line-height:1.7; }
.footer-title{
  font-size:.74rem; letter-spacing:.17em; text-transform:uppercase; color:#fff;
  font-weight:700; margin-bottom:1.15rem;
}
.footer-links{ display:flex; flex-direction:column; gap:.62rem; }
.footer-links a{ font-size:.9rem; transition:color .3s var(--ease), padding-left .3s var(--ease); }
.footer-links a:hover{ color:var(--gold-600); padding-left:4px; }
.footer-contact{ display:flex; flex-direction:column; gap:.85rem; }
.footer-contact a,.footer-contact span{ display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; }
.footer-contact svg{ width:1em; height:1em; color:var(--gold-600); flex:none; margin-top:.32em; }
.social{ display:flex; gap:.6rem; margin-top:1.3rem; }
.social a{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.2); color:#fff;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.social a svg{ width:16px; height:16px; }
.social a:hover{ background:var(--gold); border-color:var(--gold); transform:translateY(-2px); }
.footer-bottom{
  margin-top:clamp(2.4rem,4vw,3.4rem); border-top:1px solid rgba(255,255,255,.13);
  padding-block:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:.82rem; color:#8FA9A2;
}
.footer-bottom a:hover{ color:var(--gold-600); }

/* ---------- 19. Bouton WhatsApp flottant ---------- */
.wa-float{
  position:fixed; right:clamp(1rem,3vw,1.9rem); bottom:clamp(1rem,3vw,1.9rem); z-index:120;
  display:inline-flex; align-items:center; gap:.65rem;
  background:var(--wa); color:#06342C; font-weight:700; font-size:.9rem;
  padding:.85rem 1.15rem; border-radius:100px;
  box-shadow:0 12px 34px -10px rgba(37,211,102,.7), 0 3px 10px rgba(0,0,0,.14);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.wa-float svg{ width:22px; height:22px; flex:none; }
.wa-float:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 18px 40px -12px rgba(37,211,102,.8); }
.wa-float::before{
  content:""; position:absolute; inset:0; border-radius:100px; border:2px solid var(--wa);
  animation:pulse 2.6s var(--ease) infinite; z-index:-1;
}
@keyframes pulse{ 0%{ transform:scale(1); opacity:.85;} 70%{ transform:scale(1.28); opacity:0;} 100%{ opacity:0;} }
@media (max-width:600px){
  .wa-float__label{ display:none; }
  .wa-float{ padding:.95rem; }
}

/* ---------- 20. Motif zellige décoratif ---------- */
.zellige{
  position:absolute; pointer-events:none; opacity:.07; color:var(--green-800);
  width:280px; height:280px;
}
.zellige--tr{ top:-60px; right:-70px; }
.zellige--bl{ bottom:-70px; left:-80px; }
.section{ position:relative; overflow:hidden; }

/* ---------- 21. Animations d'apparition ---------- */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity, transform;
}
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-28px); }
[data-reveal="right"]{ transform:translateX(28px); }
[data-reveal="zoom"]{ transform:scale(.965); }

.hero [data-hero]{ opacity:0; transform:translateY(24px); animation:heroIn .95s var(--ease) forwards; animation-delay:var(--hero-delay,0ms); }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero [data-hero]{ opacity:1; transform:none; }
  .hero__media img{ animation:none; }
}

/* ---------- 22. Divers ---------- */
.note-box{
  display:flex; gap:.85rem; align-items:flex-start;
  background:var(--gold-050); border:1px solid var(--gold-200); border-left:3px solid var(--gold);
  border-radius:var(--r-sm); padding:1.05rem 1.25rem; font-size:.89rem; color:#6A4E17;
}
.note-box svg{ width:1.05em; height:1.05em; color:var(--gold); flex:none; margin-top:.3em; }

.quote{
  border-left:3px solid var(--gold); padding-left:1.4rem;
  font-family:var(--font-display); font-size:1.22rem; line-height:1.5; color:var(--green-800);
}

.stat-strip{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
@media (max-width:820px){ .stat-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.stat{ background:var(--white); padding:1.7rem 1.4rem; text-align:center; }
.stat__num{ font-family:var(--font-display); font-size:2.2rem; color:var(--green-800); line-height:1; font-variant-numeric:tabular-nums; }
.stat__label{ font-size:.83rem; color:var(--muted); margin-top:.5rem; }

.anchor-nav{ display:flex; flex-wrap:wrap; gap:.5rem; }
.anchor-nav a{
  font-size:.82rem; font-weight:600; padding:.5rem .9rem;
  border:1px solid var(--line-strong); border-radius:100px; color:var(--ink-2);
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.anchor-nav a:hover{ background:var(--green-800); border-color:var(--green-800); color:#fff; }