/* =========================================================================
   SOFA · tiers-lieu solidaire du Cellier — première version du site
   Mêmes couleurs douces que la chanson des 5 ans (sofa-5-ans.pages.dev) :
   papier chaud, encre anthracite, et les sept couleurs du solfège pour seul motif.
   1. Jetons   2. Base   3. Bandeau   4. Accueil et bulle   5. Blocs et cartes
   6. Histoire, chanson, venir   7. Pied
   ========================================================================= */

/* ---- 1. jetons (clair, puis sombre selon l'appareil) -------------------- */
:root{
  --paper:#FAF7F2; --panel:#FFFFFF; --ink:#33302C; --soft:#6E6860; --faint:#9D968D;
  --rule:#EDE7DE; --rule-strong:#DCD4C9; --wash:#F4EFE7; --marker:#FFEBAD;
  --do:#C9233A; --re:#B85309; --mi:#8A6D00; --fa:#2A7D34; --sol:#10727F; --la:#5545C0; --si:#B42D80;
  --logo-filter:none;
  --shadow:0 1px 2px rgba(80,60,40,.05),0 10px 30px rgba(80,60,40,.07);
  --display:"Fredoka","Nunito",system-ui,sans-serif;
  --body:"Bricolage Grotesque","Segoe UI",system-ui,-apple-system,sans-serif;
  --gamme:linear-gradient(90deg,var(--do) 0 14.3%,var(--re) 0 28.6%,var(--mi) 0 42.9%,var(--fa) 0 57.1%,
    var(--sol) 0 71.4%,var(--la) 0 85.7%,var(--si) 0);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#1C1A18; --panel:#252220; --ink:#F0EAE2; --soft:#BCB4A9; --faint:#8F877D;
    --rule:#302C28; --rule-strong:#463F39; --wash:#2A2623; --marker:#5A4A1F;
    --do:#FF6B7B; --re:#FF9C52; --mi:#EBCB4A; --fa:#74CF6B; --sol:#4CC6D6; --la:#A596FF; --si:#F27DC4;
    --logo-filter:invert(.92);
    --shadow:0 1px 2px rgba(0,0,0,.2),0 10px 30px rgba(0,0,0,.25);
    color-scheme:dark;
  }
}

/* ---- 2. base ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body)}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.1;margin:0}
p{margin:0}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:3px}
img{max-width:100%;height:auto}
.cadre{width:min(1080px,100% - 32px);margin-inline:auto}
section[id]{scroll-margin-top:80px}
.bouton{display:inline-flex;align-items:center;padding:11px 20px;border-radius:999px;border:1.5px solid var(--ink);
  font:600 15.5px/1 var(--body);text-decoration:none;transition:background-color .15s,color .15s}
.bouton:hover{background:var(--wash)}
.bouton.plein{background:var(--ink);color:var(--paper)}
.bouton.plein:hover{opacity:.88}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* ---- 3. bandeau ---------------------------------------------------------- */
.bandeau{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--rule);
  background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.bandeau::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--gamme)}
.bandeau-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 22px/1 var(--display)}
.marque img{width:34px;filter:var(--logo-filter)}
.menu{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
.menu a{flex:none;padding:8px 12px;border-radius:999px;font:600 14.5px/1 var(--body);text-decoration:none;color:var(--soft)}
.menu a:hover{background:var(--wash);color:var(--ink)}
@media (max-width:600px){.marque span{display:none}}

/* ---- 4. accueil et bulle ------------------------------------------------- */
.accueil{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:28px 48px;align-items:center;padding-block:56px 40px}
@media (max-width:820px){.accueil{grid-template-columns:minmax(0,1fr);padding-block:34px 20px}}
.surtitre{font:600 13.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.accueil h1{font-size:clamp(40px,6.4vw,74px);margin-top:14px}
.chapo{font-size:clamp(18px,2vw,21px);color:var(--soft);margin-top:18px;max-width:38ch}
.chapo b{color:var(--ink)}
.devise{font-family:var(--display);font-weight:500;font-size:19px;margin-top:16px}
/* Le canapé du logo et sa bulle de BD, tracée à main levée, transparente. */
.mascotte{display:flex;align-items:center;justify-content:center;gap:6px}
.mascotte img{width:clamp(120px,16vw,190px);filter:var(--logo-filter)}
.bulle{position:relative;isolation:isolate;width:170px;padding:16px 16px 20px 40px;margin:0 0 70px;
  font:400 23px/1.1 "Gochi Hand",var(--display);text-align:center;transform:rotate(-4deg)}
.bulle svg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}
.bulle path{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.bulle path.trait{stroke-width:1.1;opacity:.45}

/* ---- 5. blocs et cartes -------------------------------------------------- */
.bloc{padding-block:48px;border-top:1px solid var(--rule)}
.bloc h2{font-size:clamp(30px,3.6vw,42px)}
.intro{color:var(--soft);margin-top:10px;max-width:62ch}
.intro a{color:var(--ink)}
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px}
@media (max-width:900px){.cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cartes{grid-template-columns:minmax(0,1fr)}}
.carte{background:var(--panel);border:1px solid var(--rule);border-radius:20px;padding:20px 22px;box-shadow:var(--shadow);
  border-top:4px solid var(--c,var(--rule-strong))}
.carte h3{font-size:21px}
.carte p{margin-top:8px;color:var(--soft)}
.carte.simple{border-top-width:1px}
/* Les grandes activités (cantine, jeux) : un texte et leurs infos pratiques. */
.etiquette{display:inline-block;margin-bottom:10px;padding:5px 12px;border-radius:999px;font:600 13px/1 var(--body);
  letter-spacing:.06em;text-transform:uppercase;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.pratique{margin:0;display:grid;gap:10px}
.pratique > div{padding:14px 18px;background:var(--panel);border:1px solid var(--rule);border-radius:16px}
.pratique dt{font:600 13px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.pratique dd{margin:4px 0 0;font-size:17px}
.bande{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.bande > div{max-width:62ch}
.bande p{margin-top:10px;color:var(--soft)}
.bande-claire{background:var(--wash)}
.ecart{margin-top:22px}

/* ---- 6. histoire, chanson, venir ----------------------------------------- */
.deux{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:24px 56px;align-items:start}
@media (max-width:820px){.deux{grid-template-columns:minmax(0,1fr)}}
.deux p+p{margin-top:14px}
.deux h2+p{margin-top:16px}
.deux h3{font-size:21px;margin-bottom:8px}
.chiffres{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.chiffres li{display:flex;align-items:baseline;gap:12px;padding:14px 18px;background:var(--wash);border-radius:16px}
.chiffres b{font:600 34px/1 var(--display)}
.chiffres span{color:var(--soft)}
.chanson{background:var(--wash)}
.chanson-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.chanson-in > div{max-width:62ch}
.chanson-in p{margin-top:10px;color:var(--soft)}
.adresse{margin-top:16px;font-size:18px;line-height:1.5}

/* ---- 7. pied ------------------------------------------------------------- */
.pied{border-top:1px solid var(--rule);padding-block:34px 44px;color:var(--soft);font-size:15px}
.pied-in{display:grid;gap:10px}
.pied .devise{margin-top:0;color:var(--ink)}