/* ══ Accueil maths-sciences-pro.fr ═══════════════════════════════════════
   Même charte que naimazzouz.fr : fond crème, bleu nuit, titres en
   Bodoni Moda, petites capitales en Jost, dessin en aplats.
   Maquette : Claude Design, « Accueil maths-sciences-pro.fr – refonte sobre ».
   Polices auto-hébergées (SIL Open Font License, licences dans
   assets/vendor/fonts/OFL-*.txt). Aucune dépendance JavaScript pour la
   navigation : la liste des classes se déplie avec <details>. */

@font-face{font-family:'Jost';src:url(assets/vendor/fonts/jost.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url(assets/vendor/fonts/bodoni-moda.woff2) format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Bodoni Moda';src:url(assets/vendor/fonts/bodoni-moda-italique.woff2) format('woff2');font-weight:400 900;font-style:italic;font-display:swap}

:root{
  --creme:#f4f1ea;
  --blanc:#ffffff;
  --nuit:#0b1b3a;
  --encre:#3d4e75;
  --gris:#4a5470;
  --trait:#ddd7c9;
  --trait-doux:#ece7dc;
  --sable:#c9c4b8;
  --serif:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif;
  --sans:'Jost','Futura','Avenir Next','Segoe UI',sans-serif;
  --large:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.accueil{margin:0;background:var(--creme);color:var(--nuit);font-family:var(--sans);font-weight:400;line-height:1.5}
.accueil a{color:inherit}
.accueil img{max-width:100%}
.accueil :focus-visible{outline:2px solid var(--nuit);outline-offset:3px}
.accueil .nuit :focus-visible{outline-color:var(--creme)}
.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}
.ancre-ancienne{display:block;position:relative;top:-16px}

/* Petites capitales réutilisées partout */
.capitales{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.surtitre{margin:0;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}

/* ── En-tête ── */
.entete{border-bottom:1px solid var(--trait);background:var(--creme)}
.entete-int{max-width:var(--large);margin:0 auto;padding:14px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 32px}
.marque{font-family:var(--serif);font-size:26px;text-decoration:none;padding:6px 0}
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:0 26px}
.menu a{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:12px 0}
.menu a:hover{text-decoration:underline;text-underline-offset:6px}

/* ── Haut de page ── */
.ouverture{max-width:var(--large);margin:0 auto;padding:clamp(40px,6vw,88px) 24px clamp(40px,5vw,72px);display:flex;flex-direction:row-reverse;flex-wrap:wrap;align-items:center;gap:clamp(24px,4vw,48px)}
.ouverture-image{flex:1 1 340px;min-width:0;max-width:460px;margin:0 auto}
.ouverture-image img{display:block;width:100%;height:clamp(170px,40vw,575px);object-fit:cover;object-position:50% 58%}
.ouverture-texte{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.ouverture h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(42px,5.6vw,76px);line-height:1.04;letter-spacing:-.01em;text-wrap:balance}
.ouverture h1 em,.titre-section em,.stages h2 em,.soutien em{font-style:italic}
.chapeau{margin:0;max-width:560px;font-size:clamp(17px,1.5vw,20px);font-weight:300;line-height:1.6;color:var(--gris)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:6px}
.bouton{display:inline-flex;align-items:center;min-height:48px;padding:0 28px;background:var(--nuit);color:var(--creme)!important;font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.bouton:hover{background:var(--encre)}
.lien-capitales{font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-underline-offset:6px;padding:12px 0}
.citation{margin:18px 0 0;max-width:540px;padding-top:22px;border-top:1px solid var(--trait);display:flex;flex-direction:column;gap:8px}
.citation blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.45;color:var(--encre)}
.citation figcaption{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.citation cite{font-family:var(--serif);font-size:14px;letter-spacing:0;text-transform:none}

/* « Reprendre » : affiché seulement si une classe a déjà été ouverte */
.reprendre{display:none;align-items:center;flex-wrap:wrap;gap:4px 12px;font-size:15px}
.reprendre.visible{display:flex}
.reprendre-lien{font-family:var(--serif);font-size:18px;text-underline-offset:5px;padding:8px 0}
.reprendre-masquer{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--gris);cursor:pointer}

/* ── Sections ── */
.section{max-width:var(--large);margin:0 auto;padding:clamp(56px,7vw,96px) 24px 24px}
.section-tete{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-bottom:clamp(28px,4vw,44px)}
.titre-section{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.6vw,46px);line-height:1.15}

/* ── Ma classe ── */
.classes{border-top:1px solid var(--trait)}
.classes .section{padding-top:clamp(44px,6vw,80px);padding-bottom:clamp(48px,6vw,80px)}
.groupes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:12px 24px;align-items:start}
.groupe{background:var(--blanc)}
.groupe summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:0 24px;cursor:pointer}
.groupe summary::-webkit-details-marker{display:none}
.groupe-titre{display:flex;flex-direction:column;padding:14px 0}
.groupe-nom{font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.groupe-resume{font-size:13px;font-weight:300;color:var(--gris)}
.groupe .plus{flex:none;transition:transform .2s ease}
.groupe[open] .plus .vertical{display:none}
.groupe ul{list-style:none;margin:0;padding:0 24px 10px}
.groupe li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 18px;padding:12px 0;border-top:1px solid var(--trait-doux)}
.classe{display:flex;flex-direction:column}
.classe-nom{font-family:var(--serif);font-size:19px;line-height:1.3}
.classe-detail{font-size:13px;font-weight:300;color:var(--gris)}
.classe-liens{display:flex;flex-wrap:wrap;gap:0 16px}
.classe-liens a{font-size:15px;text-underline-offset:5px;padding:8px 0}

/* ── Chiffres ── */
.chiffres{background:var(--blanc);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.chiffres-int{max-width:var(--large);margin:0 auto;padding:36px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:28px;margin-block:0}
.chiffre{display:flex;flex-direction:column;gap:4px;text-align:center}
.chiffre strong{font-family:var(--serif);font-weight:400;font-size:52px;line-height:1}
.chiffre span{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}

/* ── Cartes (élèves, enseignants) ── */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
.carte{background:var(--blanc);padding:28px;display:flex;flex-direction:column;gap:10px;text-decoration:none;transition:box-shadow .2s ease}
.carte:hover{box-shadow:0 6px 24px rgba(11,27,58,.10)}
.carte-nom{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.carte-accroche{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.3}
.carte-texte{font-size:15px;font-weight:300;line-height:1.6;color:var(--gris)}
.carte-ouvrir{margin-top:auto;padding-top:6px;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;text-underline-offset:6px}

/* Vignettes décoratives des trois ressources élèves. */
.carte .carte-vignette{display:block;width:calc(100% + 56px);max-width:none;height:auto;aspect-ratio:2;object-fit:cover;margin:-28px -28px 14px}

/* ── Stages et orientation ── */
.stages{margin-top:clamp(56px,7vw,96px);background:var(--nuit);color:var(--creme)}
.stages-int{max-width:var(--large);margin:0 auto;padding:clamp(56px,7vw,88px) 24px;display:flex;flex-wrap:wrap;gap:40px 64px;align-items:flex-start}
.stages-texte{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:14px}
.stages .surtitre{color:var(--sable)}
.stages h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,42px);line-height:1.15}
.stages p{margin:0;font-size:16px;font-weight:300;line-height:1.65;color:#e6e1d6}
.stages ul{flex:1 1 380px;min-width:0;list-style:none;margin:0;padding:0;border-bottom:1px solid var(--encre)}
.stages li{border-top:1px solid var(--encre)}
.stages li a{display:flex;flex-direction:column;gap:2px;padding:18px 0;text-decoration:none}
.stages li a:hover strong{text-decoration:underline;text-underline-offset:6px}
.stages strong{font-family:var(--serif);font-weight:400;font-size:22px}
.stages small{font-size:14px;font-weight:300;color:var(--sable)}

/* ── Soutien ── */
.soutien{max-width:760px;margin:0 auto;padding:clamp(56px,7vw,96px) 24px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.soutien p{margin:0;font-family:var(--serif);font-size:clamp(22px,2.4vw,28px);line-height:1.35}

/* ── Pied de page ── */
.pied{border-top:1px solid var(--trait)}
.pied-int{max-width:var(--large);margin:0 auto;padding:28px 24px 40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px}
.pied-marque{font-family:var(--serif);font-size:18px}
.pied-credit{font-size:13px;font-weight:300;color:var(--gris)}
.pied nav{display:flex;flex-wrap:wrap;gap:0 24px}
.pied nav a{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);padding:12px 0}

/* ── Version 2 (12/10/2026) : « Ma classe » en 4 + 3 sur grand écran ;
   sur téléphone, une allure compacte (menu sur une ligne, dessin carré
   avec la fusée, chiffres sur une ligne, cartes en lignes). ── */
.menu-tel,.carte-fleche{display:none}
@media (min-width:1100px){.groupes{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Tablettes et petits portables (2 colonnes) : le 7e groupe prend toute la largeur au lieu de rester seul. */
@media (min-width:701px) and (max-width:1099px){.groupes{grid-template-columns:repeat(2,minmax(0,1fr))}.groupe:last-child{grid-column:1/-1}}
/* Les trois chiffres toujours sur une ligne. */
.chiffres-int{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Petites tablettes : menu sur une ligne. */
@media (min-width:701px) and (max-width:820px){.menu{gap:0 18px}.menu a{font-size:12px;letter-spacing:.08em}}
@media (max-width:700px){
  .entete-int{flex-wrap:nowrap;padding:10px 16px}
  .menu a{display:none}
  .menu a.menu-tel{display:inline-flex;align-items:center;min-height:44px;padding:0;text-decoration:underline;text-underline-offset:6px}
  .ouverture{padding:16px 16px 28px;gap:18px}
  .ouverture-image{max-width:none}
  .ouverture-image img{height:auto;aspect-ratio:1/1;object-position:50% 0}
  .ouverture h1{font-size:38px}
  .chapeau{font-size:16px}
  .citation{margin-top:6px;padding-top:14px}
  .citation blockquote{font-size:16px}
  .classes .section{padding:28px 16px 32px}
  .section{padding:36px 16px 8px}
  .section-tete{margin-bottom:18px}
  .titre-section{font-size:30px}
  .chiffres-int{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:20px 12px}
  .chiffre strong{font-size:30px}
  .chiffre span{font-size:10px;letter-spacing:.08em}
  .cartes{gap:10px}
  .carte{display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:2px;align-items:center;padding:14px 16px}
  .carte-nom{grid-column:1;font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:0;text-transform:none}
  .carte-texte{grid-column:1;font-size:14px;line-height:1.45}
  .carte-accroche,.carte-ouvrir{display:none}
  .carte-fleche{display:block;grid-column:2;grid-row:1/span 2;font-size:22px}
  .carte-illustree{grid-template-columns:84px 1fr auto}
  .carte .carte-vignette{grid-area:1 / 1 / span 2;width:84px;height:68px;object-fit:cover;margin:0}
  .carte-illustree .carte-nom,.carte-illustree .carte-texte{grid-column:2}
  .carte-illustree .carte-fleche{grid-column:3}
  .stages{margin-top:36px}
  .stages-int{padding:36px 16px;gap:20px}
  .soutien{padding:36px 16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media print{
  .entete .menu,.actions,.reprendre,.soutien,.ouverture-image{display:none!important}
  .groupe ul{display:block}
}