/* Page d'accueil (mission 7) : identité du Grand Pourquoi (ivoire, vert, Nunito,
   cartes colorées à épaisseur des menus), structure inspirée de Xtrapol : en-tête
   fixe, ouverture animée, sections à grands titres, pied de page. Adaptée à toutes
   les largeurs, du téléphone en portrait au grand écran. */

@font-face {
  font-family: "Nunito Accueil";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/nunito@5.1.0/files/nunito-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
  --fond: #fbf4e6;
  --fond-bas: #f3e2c4;
  --texte: #3d2f22;
  --texte-doux: #6f5a47;
  --carte: #fffaf1;
  --bord: #ead7b7;
  --vert: #4e7a50;
  --vert-fonce: #355737;
  --c-orange: #f2a33a;
  --c-corail: #ee7b62;
  --c-turquoise: #3fb3a5;
  --c-bleu: #4f8fd6;
  --c-violet: #8f6fd1;
  --c-ardoise: #5c6b7a;
  --rebond: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Nunito Accueil", "Nunito", ui-rounded, "Segoe UI Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  color: var(--texte);
  background: linear-gradient(180deg, var(--fond) 0%, var(--fond-bas) 100%) fixed;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* Formes décoratives flottantes, comme dans les menus. */
.decor { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.decor::before, .decor::after {
  content: "";
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .35;
  animation: derive 18s ease-in-out infinite alternate;
}
.decor::before { background: var(--c-turquoise); top: -18vmax; left: -14vmax; }
.decor::after { background: var(--c-orange); bottom: -20vmax; right: -16vmax; animation-delay: -9s; }
@keyframes derive { to { transform: translate(6vmax, 4vmax) scale(1.1); } }

/* ---- En-tête ---------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left));
  background: rgb(251 244 230 / 86%);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--bord);
}
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.navigation { display: flex; gap: 22px; margin-left: auto; font-weight: 700; }
.navigation a { text-decoration: none; color: var(--texte-doux); }
.navigation a:hover { color: var(--vert); }

/* ---- Boutons ------------------------------------------------------------------ */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 26px;
  border-radius: 999px;
  background: var(--vert);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 5px 0 var(--vert-fonce);
  transition: transform .18s var(--rebond), box-shadow .18s;
}
.bouton:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--vert-fonce); }
.bouton:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--vert-fonce); }
.bouton-petit { min-height: 44px; padding: 6px 18px; font-size: 16px; box-shadow: 0 3px 0 var(--vert-fonce); }
.bouton-second { background: var(--carte); color: var(--vert); border: 2px solid var(--vert); box-shadow: 0 5px 0 var(--bord); }
.bouton[hidden] { display: none; }
.actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.actions-centre { justify-content: center; }

/* ---- Ouverture ---------------------------------------------------------------- */
.ouverture {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(32px, 7vw, 96px) 24px clamp(40px, 6vw, 80px);
}
.sur-titre { margin: 0 0 14px; color: var(--vert); font-weight: 900; letter-spacing: .3px; text-transform: uppercase; font-size: 14px; }
h1 {
  margin: 0;
  font-size: clamp(38px, 6.2vw, 74px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -1px;
  animation: monter .7s var(--rebond) both;
}
.souligne { background: linear-gradient(transparent 62%, rgb(242 163 58 / 55%) 62%); }
.chapeau { max-width: 36em; margin: 22px 0 0; font-size: clamp(17px, 1.6vw, 20px); color: var(--texte-doux); animation: monter .7s .12s var(--rebond) both; }
@keyframes monter { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.ouverture-professeurs { position: relative; aspect-ratio: 1 / 0.92; }
.portrait {
  position: absolute;
  width: 46%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: 28px;
  border: 5px solid #fff;
  box-shadow: 0 18px 40px rgb(91 62 30 / 24%);
  animation: flotter 6s ease-in-out infinite, arriver .9s var(--rebond) both;
}
.portrait-1 { left: 0; top: 14%; rotate: -6deg; }
.portrait-2 { left: 30%; top: 0; z-index: 2; animation-delay: -2s, .12s; }
.portrait-3 { right: 0; top: 20%; rotate: 6deg; animation-delay: -4s, .24s; }
@keyframes flotter { 50% { translate: 0 -12px; } }
@keyframes arriver { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.bulle {
  position: absolute;
  z-index: 3;
  padding: 8px 14px;
  border-radius: 18px;
  background: #fff;
  font-weight: 800;
  font-size: clamp(13px, 1.3vw, 16px);
  box-shadow: 0 8px 20px rgb(91 62 30 / 18%);
  white-space: nowrap;
  animation: bulle 7.5s ease-in-out infinite both;
}
.bulle-1 { left: 2%; bottom: 12%; }
.bulle-2 { left: 38%; bottom: 2%; animation-delay: 2.5s; }
.bulle-3 { right: 0; top: 4%; animation-delay: 5s; }
@keyframes bulle { 0%, 100% { opacity: 0; transform: translateY(10px) scale(.9); } 8%, 30% { opacity: 1; transform: none; } 38% { opacity: 0; } }

/* ---- Sections ----------------------------------------------------------------- */
.section { max-width: 1200px; margin: 0 auto; padding: clamp(48px, 8vw, 110px) 24px; }
/* Bande claire pleine largeur ; son contenu garde la colonne de 1152 px des autres sections. */
.section-claire { max-width: none; padding-inline: max(24px, calc((100% - 1152px) / 2)); background: rgb(255 250 241 / 70%); border-block: 2px solid var(--bord); }
h2 { margin: 0 0 16px; font-size: clamp(32px, 4.6vw, 56px); font-weight: 900; line-height: 1.06; letter-spacing: -.5px; }
.intro { max-width: 40em; margin: 0 0 36px; font-size: clamp(17px, 1.5vw, 19px); color: var(--texte-doux); }
h3 { margin: 6px 0 6px; font-size: 21px; font-weight: 900; line-height: 1.2; }

.grille-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.carte {
  --c: var(--vert);
  padding: 22px;
  border-radius: 24px;
  background: var(--carte);
  border: 3px solid color-mix(in srgb, var(--c) 55%, #fff);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 72%, #000 6%);
}
.carte p { margin: 0; color: var(--texte-doux); }
.pastille { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--c) 22%, #fff); font-size: 26px; }
.couleur-vert { --c: var(--vert); }
.couleur-orange { --c: var(--c-orange); }
.couleur-bleu { --c: var(--c-bleu); }
.couleur-corail { --c: var(--c-corail); }
.couleur-violet { --c: var(--c-violet); }
.couleur-turquoise { --c: var(--c-turquoise); }
.couleur-ardoise { --c: var(--c-ardoise); }

.grille-professeurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.professeur { text-align: center; }
.professeur img {
  width: 100%;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
  object-position: 50% 16%;
  border-radius: 28px;
  border: 5px solid #fff;
  box-shadow: 0 14px 30px rgb(91 62 30 / 20%);
  transition: transform .3s var(--rebond);
}
.professeur:hover img { transform: translateY(-6px) rotate(-1.5deg); }
.professeur p { margin: 0; color: var(--texte-doux); font-weight: 700; }

/* Deux grandes images côte à côte, l'une sous l'autre sur petit écran. */
.galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 32px; margin-top: 28px; }
.galerie figure { margin: 0; }
.galerie img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; border: 4px solid #fff; box-shadow: 0 16px 34px rgb(91 62 30 / 22%); }
.galerie figcaption { margin-top: 12px; color: var(--texte-doux); }
.galerie strong { color: var(--texte); }

.grille-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-top: 26px; }
.grille-points > div { display: flex; flex-direction: column; gap: 4px; padding: 22px; border-radius: 22px; background: var(--carte); border: 2px solid var(--bord); }
.grille-points strong { font-size: clamp(26px, 3vw, 36px); font-weight: 900; color: var(--vert); }
.grille-points span { color: var(--texte-doux); font-weight: 700; }

.section-recherche .carte h3 { margin-top: 0; }

/* Apparition au défilement (accueil.js). */
.apparition { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s var(--rebond); }
.apparition.visible { opacity: 1; transform: none; }

/* ---- Pied --------------------------------------------------------------------- */
.pied { padding: 36px 24px calc(36px + env(safe-area-inset-bottom)); text-align: center; color: var(--texte-doux); border-top: 2px solid var(--bord); font-size: 15px; }
.pied p { margin: 6px auto; max-width: 52em; }

/* ---- Petits écrans -------------------------------------------------------------- */
@media (max-width: 860px) {
  .navigation { display: none; }
  .entete .bouton-petit { margin-left: auto; }
  .ouverture { grid-template-columns: 1fr; gap: 24px; }
  .ouverture-professeurs { max-width: 520px; width: 100%; margin: 0 auto; }
}
@media (max-width: 480px) {
  .entete { gap: 10px; }
  .logo { font-size: 17px; }
  .actions .bouton { width: 100%; }
  .galerie { grid-template-columns: 1fr; }
}
/* Téléphone à l'horizontale : ouverture compacte, tout reste lisible. */
@media (orientation: landscape) and (max-height: 500px) {
  .ouverture { grid-template-columns: 1.2fr 1fr; padding-top: 20px; padding-bottom: 28px; }
  h1 { font-size: clamp(30px, 5vw, 44px); }
  .ouverture-professeurs { max-height: 70vh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .apparition { opacity: 1; transform: none; }
}