/* En stoems : identité « affiche de manif ».
   Deux encres comme une affiche imprimée en risographie : un bleu et un rose fluo, légèrement décalés.
   Polices hébergées sur le site (aucun appel à un service tiers) : Bowlby One pour les titres,
   Atkinson Hyperlegible pour le texte (conçue pour les personnes malvoyantes). Licences : assets/polices/OFL-*.txt */

@font-face{font-family:"Bowlby One";src:url("polices/bowlby-one.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("polices/atkinson-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("polices/atkinson-400-italique.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("polices/atkinson-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* Mise en page : une colonne d'affiches empilées ; chaque section est une affiche, titre massif à double encre. */
:root{
  --papier:#E8EAE6; --papier-2:#F3F4F0; --encre:#2C3E8F; --rose:#FF48B0; --texte:#1D2140; --discret:#4B537F; --filet:rgba(44,62,143,.28);
  --sur-rose:#1D2140; --sur-encre:#F3F4F0; --ombre:#FF48B0; --melange:multiply; --points:rgba(44,62,143,.07);
  --lavande:#A9B3E6; --pate:#F4CF63; --sur-pate:#1D2140;
  --titre:"Bowlby One","Arial Black",Impact,sans-serif;
  --corps:"Atkinson Hyperlegible",Verdana,"Segoe UI",sans-serif;
  --decalage:.055em;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --papier:#13162C; --papier-2:#1C2040; --encre:#9DB0FF; --rose:#FF5DBA; --texte:#EEF0FA; --discret:#AEB5DB; --filet:rgba(157,176,255,.3);
  --sur-rose:#13162C; --sur-encre:#13162C; --ombre:#C2187E; --melange:screen; --points:rgba(157,176,255,.06);
  --lavande:#3D4A9E; --pate:#E8C25A; --sur-pate:#13162C; color-scheme:dark}}
:root[data-theme="dark"]{
  --papier:#13162C; --papier-2:#1C2040; --encre:#9DB0FF; --rose:#FF5DBA; --texte:#EEF0FA; --discret:#AEB5DB; --filet:rgba(157,176,255,.3);
  --sur-rose:#13162C; --sur-encre:#13162C; --ombre:#C2187E; --melange:screen; --points:rgba(157,176,255,.06);
  --lavande:#3D4A9E; --pate:#E8C25A; --sur-pate:#13162C; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:1rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--texte);font-family:var(--corps);font-size:1.075rem;line-height:1.6;
  background-image:radial-gradient(var(--points) 1px,transparent 1.3px);background-size:5px 5px}
.cadre{max-width:68rem;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.texte-court{max-width:62ch}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--encre);text-underline-offset:.18em;text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px}
[hidden]{display:none!important}
.invisible{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Logo : le mot imprimé deux fois, en bleu puis en rose décalé */
.logo{position:relative;display:inline-block;font-family:var(--titre);text-transform:uppercase;line-height:.9;color:var(--encre);text-decoration:none}
.logo::after{content:attr(data-texte);position:absolute;inset:0;color:var(--rose);mix-blend-mode:var(--melange);transform:translate(var(--decalage),calc(var(--decalage) * .8));pointer-events:none}

/* Marque : la tête du renard à côté du nom */
.marque{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none}
/* Devise sous le nom : ce que fait le site, en une phrase */
.marque-texte{display:grid;gap:.25rem}
.devise{font-size:.7rem;font-weight:700;line-height:1.2;letter-spacing:.01em;color:var(--discret);max-width:min(10.5rem,40vw)}
@media (min-width:900px){.devise{font-size:.78rem;max-width:none}}
.marque .tete{height:clamp(2.2rem,10vw,2.75rem);width:auto;flex:none}

/* Titres d'affiche */
.affiche{font-family:var(--titre);text-transform:uppercase;color:var(--encre);line-height:1.08;letter-spacing:.005em;text-shadow:var(--decalage) calc(var(--decalage) * .8) 0 var(--ombre)}

/* Barre du haut */
.haut{padding-block:.9rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem 1rem;flex-wrap:wrap}
.haut .logo{font-size:clamp(1.25rem,5.6vw,1.55rem)}
.haut nav{display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-weight:700;font-size:.95rem}
.haut nav a{text-decoration:none;color:var(--texte)}
.haut nav a:hover{color:var(--encre);text-decoration:underline}
/* Sélecteur de langue : à côté du logo sur téléphone, en bout de barre sur grand écran */
.haut nav.langues{order:2;gap:.3rem}
.haut nav.langues a{font-size:.8rem;letter-spacing:.05em;color:var(--encre);border:2px solid var(--encre);padding:.1rem .4rem;text-decoration:none}
.haut nav.langues a[aria-current]{background:var(--encre);color:var(--sur-encre)}
.haut nav.sections{order:3;flex-basis:100%}
@media (min-width:900px){.haut nav.sections{order:2;flex-basis:auto;margin-left:auto}.haut nav.langues{order:3}}
/* Portée d'une traduction (règles propres à une Communauté, par exemple) */
.portee{border:3px solid var(--rose);background:var(--papier-2);padding:.8rem 1rem;max-width:46rem;font-size:.98rem}

/* Bouton principal */
.bouton{display:inline-flex;align-items:center;gap:.5rem;font:inherit;font-weight:700;font-size:1.05rem;color:var(--sur-encre);background:var(--encre);border:0;padding:.75rem 1.2rem;
  box-shadow:5px 5px 0 var(--rose);text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.bouton:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--rose)}
.bouton:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--rose)}

/* Étiquette rose (date, thème) */
.etiquette{display:inline-block;background:var(--rose);color:var(--sur-rose);font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .55rem}

/* Sections */
.section{padding-block:clamp(2.5rem,6vw,4rem);border-top:3px solid var(--encre)}
.section > .cadre{display:grid;gap:1.4rem}
.section > .cadre > *{min-width:0}
.section h2{font-size:clamp(1.9rem,6vw,3rem)}
.chapo{color:var(--discret);font-size:1.1rem}

/* Cartes */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1.2rem;align-items:start}
.carte{background:var(--papier-2);border:2px solid var(--encre);padding:1.15rem 1.2rem 1.25rem;display:grid;gap:.6rem;min-width:0}
.carte h3{font-family:var(--titre);font-weight:400;text-transform:uppercase;color:var(--encre);font-size:1.25rem;line-height:1.22}
.carte ul{margin:0;padding-left:1.15rem;display:grid;gap:.45rem}

/* Pastille de fiabilité */
.fiab{display:inline-block;margin-left:.35rem;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border:1.5px solid currentColor;padding:0 .4rem;vertical-align:.12em;white-space:nowrap;color:var(--discret)}

/* Tampons de verdict : encre bleue (lisible), ombre rose décalée */
.tampon{flex:none;display:inline-block;font-family:var(--titre);text-transform:uppercase;font-size:1.15rem;line-height:1.1;color:var(--encre);border:4px solid var(--encre);padding:.2rem .55rem;transform:rotate(-5deg);box-shadow:4px 4px 0 var(--rose);background:var(--papier-2);white-space:nowrap}

/* Pied de page */
.pied{padding-block:2rem 2.5rem;border-top:3px solid var(--encre);color:var(--discret);font-size:.92rem}
.pied .cadre{display:grid;gap:.6rem}
.pied a{color:var(--texte)}

/* ---------- Pages d'événement ---------- */

/* Ouverture : date, titre massif, infos pratiques, sommaire en grosses tuiles */
.ouverture{padding-block:1.5rem clamp(2.5rem,7vw,4.5rem)}
.ouverture .cadre{display:grid;gap:1.3rem}
.ouverture h1{font-size:clamp(2.7rem,12vw,6.2rem);line-height:.98}
.ouverture h1 span{display:block;color:var(--texte);text-shadow:none;font-size:.5em;line-height:1.15;margin-top:.3em;letter-spacing:.01em}
.ouverture .chapo{font-size:clamp(1.1rem,3.2vw,1.3rem);color:var(--texte);max-width:40ch}
.neutre{font-size:.95rem;color:var(--discret);max-width:56ch;border-left:4px solid var(--rose);padding-left:.75rem}
.rendezvous{display:grid;gap:.35rem;background:var(--encre);color:var(--sur-encre);padding:1rem 1.15rem;box-shadow:6px 6px 0 var(--rose);max-width:34rem}
.rendezvous b{font-family:var(--titre);font-weight:400;text-transform:uppercase;font-size:clamp(1.3rem,5vw,1.7rem);line-height:1.2}
.rendezvous p{font-size:.95rem}
.rendezvous a{color:inherit}
.rendezvous .fiab{color:inherit}
.sommaire{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:.7rem;counter-reset:s}
.sommaire a{display:flex;gap:.7rem;align-items:baseline;height:100%;text-decoration:none;color:var(--texte);background:var(--papier-2);border:2px solid var(--encre);padding:.75rem .9rem;font-weight:700;line-height:1.25}
.sommaire a::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--titre);color:var(--encre);text-shadow:.06em .05em 0 var(--ombre);font-size:1.35rem;line-height:1}
.sommaire a:hover{background:var(--encre);color:var(--sur-encre)}
.sommaire a:hover::before{color:var(--sur-encre)}
.partage{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.partage [data-partage-etat]{font-size:.92rem;color:var(--discret);overflow-wrap:anywhere}

/* Fiche d'événement : tout l'essentiel sur le premier écran, puis deux portes */
.ev .cadre{gap:1rem;grid-template-columns:minmax(0,1fr)}
.ev .cadre > *{min-width:0}
.ev h1{font-size:clamp(1.85rem,7.9vw,4.8rem);hyphens:manual}
/* Sur téléphone, les boutons de la fiche remplacent le menu de sections : l'essentiel tient sur un écran. */
@media (max-width:899px){body:has(.ev) .haut nav.sections{display:none}}
.ouverture.ev{padding-block:.6rem clamp(2.5rem,7vw,4.5rem)}
.fiche-ev{display:grid;gap:.45rem;margin:0;max-width:40rem}
.fiche-ev > div{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:.7rem;align-items:baseline;border-top:2px solid var(--filet);padding-top:.4rem}
.fiche-ev dt{font-family:var(--titre);text-transform:uppercase;color:var(--encre);font-size:.92rem;line-height:1.2}
.fiche-ev dd{margin:0;font-weight:700;line-height:1.35}
.confirmer{font-size:.9rem;color:var(--discret)}
.actions-ev{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.8rem;max-width:40rem}
.action{display:grid;align-content:start;gap:.15rem;padding:.65rem .9rem .7rem;background:var(--encre);color:var(--sur-encre);text-decoration:none;box-shadow:5px 5px 0 var(--rose);transition:transform .15s,box-shadow .15s}
.action:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--rose)}
.action small{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.action b{font-family:var(--titre);font-weight:400;text-transform:uppercase;font-size:clamp(1.1rem,4.6vw,1.4rem);line-height:1.12}
/* Lien vers le jeu de la lasagne, visible dès le premier écran (le menu est caché sur téléphone) */
.promo-jeu{display:flex;align-items:center;gap:.85rem;max-width:40rem;padding:.55rem .9rem .6rem;border:2px dashed var(--encre);background:var(--papier-2);color:var(--texte);text-decoration:none}
.promo-jeu:hover{border-style:solid}
.promo-jeu > span:last-child{display:grid;gap:.2rem;min-width:0}
.promo-jeu small{justify-self:start;font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;background:var(--rose);color:var(--sur-rose);padding:0 .4rem}
.promo-jeu b{line-height:1.25}
.pile-mini{display:grid;gap:2px;width:2.3rem;flex:none;rotate:-5deg}
.pile-mini i{display:block;height:.45rem;border-radius:0 0 4px 4px}
.pile-mini i:nth-child(1){background:var(--encre)}.pile-mini i:nth-child(2){background:var(--rose)}.pile-mini i:nth-child(3){background:var(--lavande)}
.pile-mini i:nth-child(4){background:var(--pate)}.pile-mini i:nth-child(5){background:var(--texte)}
.liens-ev{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:0;padding:0;list-style:none;font-weight:700;font-size:.92rem}
.etapes-manif{display:grid;gap:1.8rem}
.etapes-manif h3,.camps .qui{margin:0}
.etapes-manif h3{font-family:var(--titre);font-weight:400;text-transform:uppercase;color:var(--encre);font-size:1.25rem;margin-bottom:.7rem}
.camps .qui{font-weight:700;margin-block:.2rem .5rem}
.camps ul + .qui{margin-top:1rem}
.camps .note{margin-top:.9rem}

/* Titre de section : numéro dans une étiquette rose */
.num{display:block;width:fit-content;font-size:.4em;line-height:1.2;margin-bottom:.35em;background:var(--rose);color:var(--sur-rose);text-shadow:none;padding:.15em .45em .1em}
.section .note{font-size:.95rem;color:var(--discret)}

/* Orientation : questions à choix */
.orientation{border:3px solid var(--encre);background:var(--papier-2);padding:.4rem 1.1rem 1rem;max-width:46rem}
.orientation .q{padding:.75rem 0;border-bottom:1.5px dashed var(--filet)}
.orientation .q p{margin:0 0 .5rem;font-weight:700}
.orientation .q div{display:flex;flex-wrap:wrap;gap:.45rem}
.choix{font:inherit;font-size:.98rem;font-weight:700;color:var(--encre);background:transparent;border:2px solid var(--encre);padding:.45rem .85rem;min-height:2.75rem;cursor:pointer}
.choix[aria-pressed="true"]{background:var(--encre);color:var(--sur-encre);box-shadow:3px 3px 0 var(--rose)}
.choix:disabled{cursor:default}
.choix:disabled:not([aria-pressed="true"]){opacity:.55}
.orientation .bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.8rem;font-size:.92rem;color:var(--discret)}
.orientation .bas .choix{font-size:.85rem;min-height:2.3rem;border-color:var(--filet);color:var(--discret)}
.prive{font-size:.92rem;color:var(--discret)}
.alerte{border-left:5px solid var(--rose);padding:.35rem 0 .35rem .8rem}
.carte .aller{font-weight:700}

/* Les quatre tarifs */
.tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr));gap:.9rem}
.tarifs div{border:3px solid var(--encre);background:var(--papier-2);padding:.9rem 1rem 1rem;display:grid;gap:.2rem;min-width:0}
.tarifs b{font-family:var(--titre);font-weight:400;color:var(--encre);font-size:clamp(2.3rem,9vw,3.1rem);line-height:1;white-space:nowrap}
.tarifs strong{margin-top:.3rem}
.tarifs span{font-size:.93rem;color:var(--discret)}
.tarifs .plein{background:var(--encre);box-shadow:6px 6px 0 var(--rose)}
.tarifs .plein b,.tarifs .plein strong,.tarifs .plein span{color:var(--sur-encre)}

/* Chiffres clés */
.chiffres-cles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:1.2rem 1.5rem;margin:0;padding:0;list-style:none}
.chiffres-cles li{border-top:3px solid var(--encre);padding-top:.5rem;display:grid;gap:.2rem;min-width:0}
.chiffres-cles b{font-family:var(--titre);font-weight:400;font-size:1.9rem;line-height:1.05;color:var(--encre)}
.chiffres-cles span{font-size:.95rem}

/* Les arguments de chaque camp, à poids égal */
.camps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:1.2rem}
.camps > div{border:2px solid var(--encre);padding:1rem 1.15rem;background:var(--papier-2);min-width:0}
.camps h3{font-family:var(--titre);font-weight:400;text-transform:uppercase;color:var(--encre);font-size:1.2rem;line-height:1.22;margin-bottom:.6rem}
.camps ul{margin:0;padding-left:1.15rem;display:grid;gap:.5rem}

/* Le vote */
.vote{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.9rem;max-width:46rem}
.vote div{border:3px solid var(--encre);padding:.9rem 1.1rem;background:var(--papier-2)}
.vote b{display:block;font-family:var(--titre);font-weight:400;text-transform:uppercase;font-size:2.2rem;line-height:1;color:var(--encre);text-shadow:.05em .04em 0 var(--ombre);margin-bottom:.3rem}

/* Vrai ou faux ? */
.idees{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));gap:1.4rem;align-items:start}
.idee{border:3px solid var(--encre);background:var(--papier-2);padding:1.15rem 1.2rem 1.25rem;display:grid;gap:.85rem;min-width:0}
.idee blockquote{margin:0;font-family:var(--titre);text-transform:uppercase;color:var(--encre);font-size:clamp(1.2rem,4.4vw,1.5rem);line-height:1.25}
.idee [data-choix]{display:grid;gap:.5rem}
.idee [data-choix] p{font-weight:700}
.idee [data-choix] div{display:flex;flex-wrap:wrap;gap:.5rem}
.idee [data-reponse]{display:grid;gap:.75rem;outline:none}
.idee .verdict{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.idee .verdict [data-retour]{font-weight:700}
.idee .chiffres{list-style:none;margin:0;padding:0;font-size:.95rem}
.idee .chiffres li{padding:.35rem 0;border-top:1px solid var(--filet)}
.idee .chiffres b{font-family:var(--titre);font-weight:400;color:var(--encre);font-size:1.2rem;margin-right:.3rem}
details{border-top:2px solid var(--encre);padding-top:.6rem}
details summary{cursor:pointer;font-weight:700;color:var(--encre)}
details[open] summary{margin-bottom:.6rem}
details h4{margin:.8rem 0 .3rem;font-size:1rem}
details ul{margin:0;padding-left:1.15rem;display:grid;gap:.4rem}
details p{margin:.4rem 0}
/* Dépliant : un bouton qui affiche ou cache un contenu secondaire (les sources, par exemple), sans JavaScript */
details.depliant{border-top:0;padding-top:0}
details.depliant > summary{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;padding:.45rem .9rem;list-style:none;
  border:2px solid var(--encre);background:var(--papier-2);color:var(--encre);box-shadow:4px 4px 0 var(--rose)}
details.depliant > summary::-webkit-details-marker{display:none}
details.depliant > summary::after{content:"+";font-family:var(--titre);font-size:1.15rem;line-height:1}
details.depliant[open] > summary{background:var(--encre);color:var(--sur-encre);margin-bottom:1rem}
details.depliant[open] > summary::after{content:"−"}
.si-ouvert,details[open] > summary .si-ferme{display:none}
details[open] > summary .si-ouvert{display:inline}

/* Vos droits : grands numéros */
.droits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1.2rem 1.5rem;counter-reset:d}
.droits li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;min-width:0}
.droits li::before{counter-increment:d;content:counter(d);font-family:var(--titre);font-size:2.6rem;line-height:.9;color:var(--encre);text-shadow:.06em .05em 0 var(--ombre);min-width:1.4ch}
.droits b{display:block;margin-bottom:.15rem}
.liens{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.liens a{display:inline-block;border:2px solid var(--encre);padding:.45rem .8rem;font-weight:700;text-decoration:none;background:var(--papier-2)}
.liens a:hover{background:var(--encre);color:var(--sur-encre)}

/* Histoire */
.date-geante{font-family:var(--titre);font-size:clamp(2.2rem,10.5vw,7rem);line-height:.9;color:transparent;-webkit-text-stroke:2px var(--encre);text-shadow:.04em .04em 0 var(--ombre)}
@supports not (-webkit-text-stroke:2px black){.date-geante{color:var(--encre)}}

/* Sources */
.sources ul{font-size:.93rem;display:grid;gap:.45rem}
.sources a{overflow-wrap:anywhere}

/* Page texte (à propos) */
.texte-page{padding-block:1rem 3rem}
.texte-page .cadre{display:grid;gap:1rem}
.texte-page .cadre > *{max-width:46rem}
.texte-page h1{font-size:clamp(2.3rem,9vw,4rem);margin-bottom:.5rem}
.texte-page h2{font-family:var(--titre);font-weight:400;text-transform:uppercase;color:var(--encre);font-size:1.45rem;margin-top:1.4rem}
.texte-page ul,.texte-page ol{margin:0;padding-left:1.2rem;display:grid;gap:.45rem}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}