/* Essor, savoirs et partage · maquette. Voir NOTES.md pour les choix. */
:root{
  --creme:#fcf5e2; --creme-2:#f3e9cd; --blanc:#fff; --encre:#1c2431; --gris:#5c6675; --ligne:#e4dcc4;
  --bleu:#0072cb; --bleu-fonce:#004f8f; --bleu-pale:#e3f0fb;
  --vert:#3f9a6b; --vert-pale:#e4f3ea;
  --orange:#f06a1a; --orange-pale:#fdeadf;
  --violet:#5b2d8e; --violet-pale:#ece4f5;
  --rose:#c2266e; --rose-pale:#f9e2ec;
  --jaune:#ffd54a;
  --titre:"Fredoka",ui-rounded,"Nunito","Segoe UI",sans-serif;
  --texte:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --rayon:22px;
  --gouttiere:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--creme);color:var(--encre);font-family:var(--texte);font-size:17px;line-height:1.5;padding-inline:var(--gouttiere)}
img{max-width:100%;height:auto;display:block}
a{color:var(--bleu-fonce)}
a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--titre);font-weight:600;line-height:1.1;margin:0;text-wrap:balance}
h2{font-size:clamp(30px,4vw,44px);color:var(--bleu)}
h3{font-size:22px}
p{margin:0}
ul,ol{margin:0;padding:0}
main{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(56px,8vw,110px)}
section{scroll-margin-top:16px}
.grand{font-family:var(--titre);font-weight:600;font-size:28px;line-height:1.15}
.lien{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.bouton{display:inline-block;background:var(--bleu);color:#fff;font-family:var(--titre);font-weight:600;font-size:19px;padding:12px 22px;border-radius:999px;text-decoration:none}
.bouton:hover{background:var(--bleu-fonce)}
blockquote{margin:0;font-size:19px;line-height:1.45}

/* bandeau maquette */
.maquette{position:sticky;top:0;z-index:20;display:block;margin-inline:calc(-1 * var(--gouttiere));background:var(--jaune);color:var(--encre);text-align:center;font-size:14px;font-weight:700;padding:8px var(--gouttiere);text-decoration:none;border-bottom:2px solid #e6b800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.maquette:hover{background:#ffe27a}

/* en-tête */
.entete{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:20px 32px;flex-wrap:wrap;padding-block:18px 26px}
.logo{color:var(--bleu);display:block;line-height:0}
.logo svg{width:190px;height:70px;overflow:visible}
.logo-mot{font-family:var(--titre);font-weight:700;font-size:62px;fill:var(--bleu);letter-spacing:-1px}
.logo-sous{font-family:var(--texte);font-size:15px;letter-spacing:.42em;fill:var(--gris)}
.nav{display:flex;gap:4px 22px;flex-wrap:wrap;margin-left:auto;order:2}
.nav a{font-family:var(--titre);font-weight:500;font-size:19px;color:var(--encre);text-decoration:none;padding:4px 0;border-bottom:3px solid transparent}
.nav a:hover{border-color:var(--bleu)}
.tel{font-family:var(--titre);font-weight:600;font-size:19px;color:var(--bleu);text-decoration:none;white-space:nowrap;border:2px solid var(--bleu);border-radius:999px;padding:6px 16px}
.tel:hover{background:var(--bleu);color:#fff}
.tel{order:3}
/* bouton menu, même pilule que le téléphone, trois traits ronds comme les lettres du logo */
.burger{display:none;order:4;align-items:center;gap:10px;font-family:var(--titre);font-weight:600;font-size:19px;color:var(--bleu);background:var(--blanc);border:2px solid var(--bleu);border-radius:999px;padding:6px 16px 6px 12px;cursor:pointer}
.burger[aria-expanded="true"]{background:var(--bleu);color:#fff}
.burger-trait{display:flex;flex-direction:column;gap:4px;width:22px}
.burger-trait i{display:block;height:4px;border-radius:4px;background:currentColor;transition:transform .25s,opacity .2s,width .25s}
.burger-trait i:nth-child(2){width:70%}
.burger[aria-expanded="true"] .burger-trait i:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-trait i:nth-child(2){opacity:0;width:0}
.burger[aria-expanded="true"] .burger-trait i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* hero : la photo porte tout, le texte se pose dessus, la carte du jour déborde */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);grid-template-rows:auto auto;column-gap:32px}
.hero-photo{grid-column:1/-1;grid-row:1/3;border-radius:var(--rayon);overflow:hidden;max-height:72vh}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.vol{position:absolute;top:6%;right:7%;width:clamp(120px,16vw,220px);color:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));animation:vol 5s cubic-bezier(.2,.7,.3,1) both}
@keyframes vol{from{transform:translate(-60vw,24px) scale(.9);opacity:.6}to{transform:translate(0,0) scale(1);opacity:1}}
.hero-texte{grid-column:1;grid-row:2;align-self:end;margin:0 0 28px 28px;background:var(--creme);border-radius:18px;padding:22px 26px;max-width:560px;z-index:1}
.hero-texte h1{font-size:clamp(24px,2.6vw,34px);font-weight:600;color:var(--encre)}
.hero-texte p{margin-top:10px;color:var(--gris);font-size:16px}
.aujourdhui{grid-column:2;grid-row:2;align-self:end;z-index:1;background:var(--bleu);color:#fff;border-radius:18px;padding:22px 24px;margin:0 28px -46px 0;box-shadow:0 14px 34px rgba(0,79,143,.28);display:flex;flex-direction:column;gap:12px}
.aujourdhui-jour{font-family:var(--titre);font-weight:600;font-size:26px;line-height:1.15}
.aujourdhui-jour span::first-letter{text-transform:uppercase}
.aujourdhui .creneaux li{border-left-color:rgba(255,255,255,.55);background:rgba(255,255,255,.12);color:#fff}
.aujourdhui .creneaux li b{color:#fff}
.aujourdhui .creneaux li small{color:rgba(255,255,255,.82)}
.aujourdhui .lien{color:#fff;align-self:flex-start}

/* créneaux : un bloc par activité, la couleur dit la famille */
.creneaux{list-style:none;display:flex;flex-direction:column;gap:8px}
.creneaux li{border-left:5px solid var(--c,var(--bleu));background:var(--pale,var(--bleu-pale));border-radius:0 10px 10px 0;padding:8px 12px 9px;display:flex;flex-direction:column;gap:2px;font-size:16px;line-height:1.35}
.creneaux li b{font-family:var(--titre);font-weight:600;font-size:18px;color:var(--c,var(--bleu));font-variant-numeric:tabular-nums}
.creneaux li small{font-size:14px;color:var(--gris)}
.c-scolaire{--c:var(--bleu);--pale:var(--bleu-pale)}
.c-parents{--c:var(--vert);--pale:var(--vert-pale)}
.c-ateliers{--c:var(--orange);--pale:var(--orange-pale)}
.c-ados{--c:var(--violet);--pale:var(--violet-pale)}

/* la semaine */
.semaine{display:flex;flex-direction:column;gap:20px;padding-top:30px}
.legende{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:15px}
.legende span{display:inline-flex;align-items:center;gap:8px}
.legende span::before{content:"";width:14px;height:14px;border-radius:4px;background:var(--c)}
.onglets{display:none;gap:6px;overflow-x:auto;padding-bottom:4px}
.onglets button{flex:1 0 auto;font-family:var(--titre);font-weight:600;font-size:18px;background:var(--blanc);color:var(--encre);border:2px solid var(--ligne);border-radius:999px;padding:8px 16px;cursor:pointer}
.onglets button[aria-selected="true"]{background:var(--bleu);border-color:var(--bleu);color:#fff}
.jours{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.jour{background:var(--blanc);border-radius:16px;padding:16px 14px 18px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--ligne)}
.jour h3{font-size:24px;color:var(--bleu)}
.jour .creneaux li{font-size:15px}
.semaine-note{color:var(--gris);font-size:16px;max-width:70ch}

/* vacances : un panneau d'affichage, les affiches punaisées */
.vacances{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center;background:var(--creme-2);border-radius:var(--rayon);padding:clamp(24px,4vw,48px)}
.vacances-texte{display:flex;flex-direction:column;gap:18px}
.vacances-texte h2{color:var(--orange)}
.vacances-texte blockquote{border-left:5px solid var(--orange);padding-left:16px}
.affiches{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:12px}
.affiches figure{margin:0;display:flex;flex-direction:column;gap:10px}
.affiches img{border-radius:8px;box-shadow:0 10px 26px rgba(28,36,49,.22)}
.affiches figure:first-child{transform:rotate(-2.5deg) translateY(10px)}
.affiches figure:last-child{transform:rotate(2deg) translateY(-6px)}
.affiches figcaption{font-family:var(--titre);font-weight:600;font-size:17px;text-align:center}

/* l'affiche du moment */
.affiche-une{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:48px;align-items:center;max-width:900px;margin-inline:auto;width:100%}
.affiche-une figure{margin:0}
.affiche-une img{border-radius:10px;box-shadow:0 14px 30px rgba(194,38,110,.25)}
.affiche-une-texte{display:flex;flex-direction:column;gap:12px;max-width:44ch}
.affiche-une-texte h2{color:var(--rose)}
.affiche-une-texte .grand{color:var(--rose)}

/* familles */
.parents{display:flex;flex-direction:column;gap:26px}
.parents h2{color:var(--vert)}
.parents-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.tarif{background:var(--blanc);border:1px solid var(--ligne);border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.tarif .grand{color:var(--vert)}
.charte{background:var(--vert-pale);border-radius:16px;padding:22px 26px;display:flex;flex-direction:column;gap:12px;max-width:80ch}
.charte h3{color:var(--vert)}
.charte ol{padding-left:22px;display:flex;flex-direction:column;gap:8px}

/* bénévoles : leur affiche violette donne la couleur */
.benevoles{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,300px);gap:40px;align-items:center;background:var(--violet);color:#fff;border-radius:var(--rayon);padding:clamp(24px,4vw,48px)}
.benevoles h2{color:#fff}
.benevoles a{color:#fff}
.benevoles-texte{display:flex;flex-direction:column;gap:20px}
.benevoles blockquote{font-family:var(--titre);font-weight:500;font-size:24px;line-height:1.3}
.missions{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:17px}
.missions li{padding-left:16px;border-left:4px solid var(--jaune)}
.actions{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.benevoles .bouton{background:#fff;color:var(--violet)}
.benevoles .bouton:hover{background:var(--jaune);color:var(--encre)}
.benevoles-affiche{margin:0;transform:rotate(2deg)}
.benevoles-affiche img{border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.35)}

/* l'association */
.histoire{display:flex;flex-direction:column;gap:30px}
.dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px 32px}
.dates div{display:flex;flex-direction:column;gap:8px;max-width:48ch}
.annee{font-family:var(--titre);font-weight:700;font-size:54px;line-height:1;color:var(--bleu);font-variant-numeric:tabular-nums}
.histoire-photo{margin:0;display:flex;flex-direction:column;gap:8px}
.histoire-photo img{width:100%;max-height:520px;object-fit:cover;border-radius:var(--rayon)}
.histoire-photo figcaption{color:var(--gris);font-size:15px}
.partenaires{color:var(--gris);font-size:16px;max-width:80ch}

/* contact */
.contact{display:flex;flex-direction:column;gap:22px;background:var(--blanc);border-radius:var(--rayon);padding:clamp(24px,4vw,48px);border:1px solid var(--ligne)}
.contact-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px 32px}
address{font-style:normal;display:flex;flex-direction:column;gap:8px}
.contact-grille>div{display:flex;flex-direction:column;gap:8px}
.contact .grand{text-decoration:none;color:var(--bleu)}
.reseaux{gap:6px}
.reseaux a{font-family:var(--titre);font-weight:600;font-size:19px;text-decoration:none}
.reseaux a:hover{text-decoration:underline}

/* pied */
.pied{max-width:1240px;margin:60px auto 0;padding-block:24px 36px;border-top:1px solid var(--ligne);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;color:var(--gris);font-size:15px}

/* téléphone et petits écrans */
@media (max-width:1000px){
  .jours{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .entete{gap:12px 10px;flex-wrap:wrap}
  .logo svg{width:140px;height:52px}
  .tel{margin-left:auto;padding:6px 11px;font-size:16px}
  .burger{display:flex;padding:9px 11px;gap:0}
  .burger-mot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav{margin-left:0;width:100%;order:5;gap:4px 16px}
  .nav a{font-size:17px}
  /* avec JS : tiroir plein largeur, un lien par ligne, la couleur de sa section devant */
  .menu-js .nav{display:none;flex-direction:column;gap:0;background:var(--blanc);border:1px solid var(--ligne);border-radius:18px;padding:8px;box-shadow:0 12px 30px rgba(0,79,143,.14)}
  .menu-js .nav.ouvert{display:flex;animation:tiroir .22s ease-out}
  .menu-js .nav a{display:flex;align-items:center;gap:14px;font-size:22px;padding:12px 14px;border:0;border-radius:12px}
  .menu-js .nav a::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--bleu);flex:none}
  .menu-js .nav a:hover,.menu-js .nav a:focus-visible{background:var(--creme)}
  .m-vacances::before{background:var(--orange)!important}
  .m-parents::before{background:var(--vert)!important}
  .m-benevoles::before{background:var(--violet)!important}
  .m-contact::before{background:var(--encre)!important}
  @keyframes tiroir{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .hero{grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:16px}
  .hero-photo{grid-row:1;max-height:62vh}
  .hero-texte{grid-column:1;grid-row:2;margin:0;padding:6px 4px 0;background:none;max-width:none}
  .aujourdhui{grid-column:1;grid-row:3;margin:0}
  .onglets:not([hidden]){display:flex}
  .onglets button{flex:1 1 0;min-width:0;padding:8px 4px;font-size:16px}
  .jours.avec-onglets{grid-template-columns:1fr}
  .jours.avec-onglets .jour{display:none}
  .jours.avec-onglets .jour.ouvert{display:flex}
  .jours.avec-onglets .jour h3{display:none}
  .jour .creneaux li{font-size:16px}
  .vacances,.benevoles,.affiche-une{grid-template-columns:1fr}
  .affiches{padding:8px 4px}
  .benevoles-affiche{max-width:260px;transform:rotate(1.5deg)}
  .affiche-une figure{max-width:320px}
}
@media (max-width:520px){
  body{font-size:16px}
  .hero-photo{max-height:52vh;border-radius:16px}
  .vol{top:4%;right:5%}
  .affiches{grid-template-columns:1fr 1fr;gap:12px}
  .affiches figure:first-child,.affiches figure:last-child{transform:none}
  .annee{font-size:44px}
}
@media (max-width:400px){
  .maquette{font-size:13px;padding-block:7px}
}
@media (max-width:340px){
  .maquette{font-size:12px}
  .logo svg{width:118px;height:44px}
  .tel{padding:5px 9px;font-size:15px}
  .burger{padding:8px 9px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .vol{animation:none}
  .menu-js .nav.ouvert{animation:none}
  .burger-trait i{transition:none}
}