/* Accueil : en-tête pleine largeur, la photo de l'école en fond.
   Le voile bleu garantit la lisibilité du texte quelle que soit la photo,
   et le fond bleu prend le relais si la photo ne se charge pas. */
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: min(86vh, 800px); min-height: min(86svh, 800px); background: var(--bleu); color: #fff; overflow: hidden; }
.hero-photo { position: absolute; inset: 0; z-index: -2; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(10, 44, 80, .95) 0%, rgba(10, 44, 80, .86) 34%, rgba(10, 44, 80, .35) 68%, rgba(10, 44, 80, .12) 100%); }
.hero-contenu { flex: 1; display: flex; align-items: center; padding-block: clamp(56px, 9vh, 112px); }
.hero-texte { max-width: 620px; }
.hero h1 { color: #fff; font-size: clamp(2.5rem, 5vw, 4.2rem); line-height: 1.02; margin-bottom: 16px; }
.hero-signature { font-size: 1.3rem; font-weight: 600; color: var(--mandarine-claire); margin-bottom: 18px; }
.hero-intro { font-size: 1.14rem; color: #E6ECF4; max-width: 46ch; margin-bottom: 30px; }
.hero-reperes { background: rgba(10, 44, 80, .92); border-top: 1px solid rgba(255, 255, 255, .14); }
.hero-reperes ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0 auto; padding-block: 22px; list-style: none; }
.hero-reperes li { border-left: 4px solid rgba(255, 255, 255, .85); padding: 2px 0 2px 14px; font-weight: 700; line-height: 1.3; }
.hero-reperes li:first-child { border-color: var(--mandarine); }
@media (max-width: 760px) {
  .hero { min-height: 0; }
  /* Sur mobile, la photo reste visible en haut et le texte se pose dessous, sur le voile. */
  .hero::before { background: linear-gradient(180deg, rgba(10, 44, 80, .15) 0%, rgba(10, 44, 80, .55) 30%, rgba(10, 44, 80, .94) 52%, var(--bleu) 100%); }
  .hero-contenu { align-items: flex-end; padding-top: 220px; padding-bottom: 36px; }
  .hero-reperes ul { grid-template-columns: 1fr 1fr; padding-block: 18px; }
}

.suite { margin-top: 28px; }

.pedagogie-accueil { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.pedagogie-intro { position: sticky; top: calc(var(--hauteur-entete) + 24px); }
.pedagogie-intro .actions { flex-direction: column; gap: 10px; margin-top: 20px; }
.principes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.principe { padding: 24px; border-radius: var(--rayon-carte); background: #fff; }
.principe h3 { font-size: 1.15rem; margin-bottom: 8px; }
.principe p { font-size: .96rem; color: var(--doux); }
.principe:last-child { grid-column: 1 / -1; }
@media (max-width: 900px) { .pedagogie-accueil { grid-template-columns: 1fr; } .pedagogie-intro { position: static; } }
@media (max-width: 560px) { .principes { grid-template-columns: 1fr; } }

.admissions-accueil { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.etapes { counter-reset: etape; margin: 28px 0 32px; padding: 0; list-style: none; display: grid; gap: 14px; }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 52px 1fr; gap: 2px 16px; align-items: start; }
.etapes li::before { content: counter(etape); grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bleu); color: #fff; font-weight: 800; font-size: 1.3rem; }
.etapes strong { color: var(--bleu); font-size: 1.1rem; }
.etapes span { color: var(--doux); }
.admissions-photo img { width: 100%; aspect-ratio: 4/4.4; object-fit: cover; border-radius: var(--rayon-bloc); }
@media (max-width: 900px) { .admissions-accueil { grid-template-columns: 1fr; } .admissions-photo img { aspect-ratio: 4/3; } }

.mosaique-vie { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 14px; }
.mosaique-case { margin: 0; border-radius: 18px; overflow: hidden; background: var(--sable); }
.mosaique-case img { width: 100%; height: 100%; object-fit: cover; }
.case-1 { grid-column: span 2; grid-row: span 2; }
.case-3 { grid-row: span 2; }
@media (max-width: 900px) { .mosaique-vie { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; } .case-3 { grid-row: span 1; } }

.carte-espace { display: flex; flex-direction: column; text-decoration: none; color: var(--encre); transition: border-color var(--transition), transform var(--transition); }
.carte-espace:hover { border-color: var(--bleu); color: var(--encre); transform: translateY(-2px); }
.carte-espace-pour { font-size: .85rem; font-weight: 700; color: var(--doux); }
.carte-espace h3 { margin: 4px 0 10px; }
.carte-espace p { color: var(--doux); flex: 1; }
.carte-espace .lien-suite { margin-top: 14px; }