/* =========================================================
   LES LILOUS — « Lilas d'encre », habillage STICKER
   Palette violette + doré, accents vifs empruntés au logo.
   Signature : éléments « collés » (contour franc + ombre décalée nette).
   Titres : Baloo 2   ·   Texte : Nunito Sans
   ========================================================= */

:root {
  --encre:        #2E1F4D;
  --violet:       #6B4E9E;
  --lilas:        #9B7EDC;
  --lilas-clair:  #C9B8ED;
  --lilas-voile:  #F3EFFB;
  --lilas-brume:  #EBE4F7;
  --gris-clair:   #E4DEEE;

  --or:           #FFC637;
  --or-fonce:     #C98A1E;
  --rose:         #F0526D;
  --cyan:         #35C1E8;

  --blanc:        #FFFFFF;
  --creme:        #FBF9FE;
  --gris:         #6A6478;
  --texte:        #2E1F4D;

  --trait:        3px;
  --rayon:        22px;
  --rayon-sm:     14px;
  --rayon-lg:     34px;
  --colle:        5px 5px 0 var(--encre);
  --colle-fort:   7px 7px 0 var(--encre);
  --transition:   0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --largeur:      1160px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito Sans', system-ui, sans-serif;
  color: var(--texte);
  background-color: var(--creme);
  background-image: radial-gradient(var(--lilas-clair) 1.6px, transparent 1.7px);
  background-size: 26px 26px;
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Baloo 2', system-ui, sans-serif;
  color: var(--encre);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.01em;
}

a { color: var(--violet); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--rose); }
img { max-width: 100%; display: block; }

/* ---------- Utilitaires ---------- */
.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: 22px; }
.section { padding-block: 84px; position: relative; }
.centre { text-align: center; }

.eyebrow {
  display: inline-block;
  font-family: 'Baloo 2', sans-serif; font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--encre); background: var(--or);
  padding: 5px 14px; border-radius: 999px;
  border: 2.5px solid var(--encre); box-shadow: 3px 3px 0 var(--encre);
  transform: rotate(-2deg); margin-bottom: 18px;
}
.titre-section { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 16px; }
.sous-titre { color: var(--gris); max-width: 580px; margin-inline: auto; font-size: 1.08rem; }

/* ---------- Boutons « sticker » ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.02rem;
  padding: 13px 26px; border-radius: 999px;
  border: var(--trait) solid var(--encre);
  box-shadow: var(--colle); cursor: pointer; line-height: 1;
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: var(--colle-fort); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--encre); }
.btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.btn--or     { background: var(--or);    color: var(--encre); }
.btn--violet { background: var(--violet); color: var(--blanc); }
.btn--rose   { background: var(--rose);  color: var(--blanc); }
.btn--blanc  { background: var(--blanc); color: var(--encre); }
.btn--ligne  { background: var(--blanc); color: var(--encre); }
.btn--bloc   { width: 100%; justify-content: center; }

/* ---------- En-tête / navigation ---------- */
.entete {
  position: sticky; top: 0; z-index: 100;
  background: var(--creme);
  border-bottom: var(--trait) solid var(--encre);
}
.entete__inner { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.logo { display: flex; align-items: center; gap: 11px; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--encre); }
.logo:hover { color: var(--encre); }
.logo__img { width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  font-family: 'Baloo 2', sans-serif; font-weight: 600; color: var(--encre);
  padding: 8px 10px; border-radius: 999px; font-size: 0.92rem;
  border: 2.5px solid transparent; transition: all var(--transition);
  white-space: nowrap;
}
.nav a:hover { background: var(--lilas-voile); border-color: var(--encre); color: var(--encre); }
.nav a.actif { background: var(--lilas); color: var(--blanc); border-color: var(--encre); box-shadow: 3px 3px 0 var(--encre); }
.nav__cta { margin-left: 8px; flex-shrink: 0; }
.nav .btn { padding: 9px 18px; font-size: 0.95rem; white-space: nowrap; }

.burger { display: none; background: var(--or); border: 2.5px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); cursor: pointer; width: 46px; height: 46px; border-radius: 12px; }
.burger span { display: block; width: 20px; height: 2.5px; background: var(--encre); border-radius: 2px; margin: 4px auto; transition: var(--transition); }
.burger.ouvert span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.ouvert span:nth-child(2) { opacity: 0; }
.burger.ouvert span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { padding-block: 76px 96px; position: relative; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); margin-bottom: 20px; }
.hero h1 .surligne { position: relative; white-space: nowrap; }
.hero h1 .surligne::after {
  content: ""; position: absolute; left: -4px; right: -4px; bottom: 4px; height: 40%;
  background: var(--or); z-index: -1; border-radius: 6px; transform: rotate(-1.5deg);
}
.hero p.intro { font-size: 1.22rem; color: var(--gris); margin-bottom: 32px; max-width: 480px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* scène de stickers */
.scene { position: relative; aspect-ratio: 1/1; }
.scene__socle {
  position: absolute; inset: 8% 6% 6% 8%;
  background: var(--violet); border: var(--trait) solid var(--encre);
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
  box-shadow: var(--colle-fort);
}
.sticker { position: absolute; filter: drop-shadow(4px 4px 0 rgba(46,31,77,0.22)); animation: flotte 6s ease-in-out infinite; }
.sticker--ballon  { width: 42%; top: 2%;  left: 30%; animation-delay: 0s; }
.sticker--pinceau { width: 26%; top: 40%; right: 2%; animation-delay: .8s; --rot: 12deg; }
.sticker--tache   { width: 30%; bottom: 2%; left: 6%; animation-delay: 1.6s; }
.sticker--etoile1 { width: 14%; top: 6%;  right: 12%; animation-delay: 1.1s; }
.sticker--etoile2 { width: 11%; bottom: 20%; right: 24%; animation-delay: .4s; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--rot,0deg)); } 50% { transform: translateY(-10px) rotate(var(--rot,0deg)); } }

/* Mascotte "héros" plantée devant le socle de la scène d'accueil */
/* Chargée en opacity:0 puis basculée en .chargee par js/mascotte-reveal.js :
   sans ça, l'image (assez lourde) apparaît d'un coup une fois téléchargée,
   ce qui donne une impression de "téléportation" au chargement de la page. */
.mascotte-hero {
  position: absolute; z-index: 5; left: 50%; bottom: 3%; width: 54%;
  transform: translateX(-50%); opacity: 0; transition: opacity .5s ease;
  filter: drop-shadow(6px 8px 0 rgba(46,31,77,0.2));
  animation: flotte 7s ease-in-out infinite; animation-delay: .3s;
}
.mascotte-hero.chargee { opacity: 1; }

/* ---------- Mascotte en filigrane de fond, effet parallax au scroll ---------- */
/* Le décalage vertical (--py) est appliqué par js/parallax.js ; la
   translation de centrage (-50%) reste en CSS pour ne jamais être écrasée. */
.filigrane-hote { position: relative; overflow: hidden; }
.filigrane-hote > *:not(.filigrane) { position: relative; z-index: 1; }
.filigrane {
  position: absolute; z-index: 0; pointer-events: none;
  top: 50%; right: 2%; width: 22%; max-width: 190px;
  opacity: 0; filter: brightness(0) invert(1);
  transition: opacity .8s ease;
  transform: translateY(calc(-50% + var(--py, 0px)));
}
.filigrane.chargee { opacity: 0.14; }
@media (max-width: 780px) { .filigrane { width: 30%; right: 4%; } }
@media (prefers-reduced-motion: reduce) { .filigrane { transform: translateY(-50%); } }

/* ---------- Ruban défilant ---------- */
.ruban { background: var(--encre); color: var(--or); border-block: var(--trait) solid var(--encre); padding: 12px 0; overflow: hidden; white-space: nowrap; }
.ruban__piste { display: inline-block; animation: defile 22s linear infinite; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.05rem; }
.ruban__piste span { margin: 0 22px; }
.ruban__piste .pt { color: var(--rose); }
@keyframes defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Tuiles (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.tuile {
  border: var(--trait) solid var(--encre); border-radius: var(--rayon);
  box-shadow: var(--colle); padding: 26px; background: var(--blanc);
  display: flex; flex-direction: column; justify-content: space-between; min-height: 190px;
  transition: transform var(--transition), box-shadow var(--transition); color: var(--encre);
}
.tuile:hover { transform: rotate(-1.4deg) translateY(-4px); box-shadow: var(--colle-fort); color: var(--encre); }
.tuile__ill { width: 56px; height: 56px; margin-bottom: 14px; }
.tuile h3 { font-size: 1.32rem; margin-bottom: 6px; }
.tuile p { color: var(--gris); font-size: 0.96rem; }
.tuile__fleche { margin-top: 16px; font-family: 'Baloo 2', sans-serif; font-weight: 700; }
.tuile--large { grid-column: span 2; }
.tuile--violet { background: var(--violet); color: var(--blanc); }
.tuile--violet p, .tuile--violet h3 { color: var(--blanc); }
.tuile--or   { background: var(--or); }
.tuile--cyan { background: var(--cyan); }
.tuile--rose { background: var(--rose); color: var(--blanc); }
.tuile--rose p, .tuile--rose h3 { color: var(--blanc); }

/* ---------- Bloc coloré ---------- */
.bloc { border: var(--trait) solid var(--encre); border-radius: var(--rayon-lg); box-shadow: var(--colle-fort); padding: 56px 44px; position: relative; }
.bloc--violet { background: var(--violet); color: var(--lilas-voile); }
.bloc--violet h2, .bloc--violet h3 { color: var(--blanc); }
.bloc--creme { background: var(--blanc); }
.section--voile { background: transparent; }

.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 44px; }
.point__pastille { width: 66px; height: 66px; border-radius: 18px; border: var(--trait) solid var(--encre); box-shadow: 3px 3px 0 var(--encre); display: grid; place-items: center; margin-bottom: 16px; background: var(--or); }
.point__pastille img { width: 60%; }
.point--a .point__pastille { background: var(--or); }
.point--b .point__pastille { background: var(--cyan); }
.point--c .point__pastille { background: var(--rose); }
.point h3 { font-size: 1.28rem; margin-bottom: 6px; }
.bloc--violet .point p { color: var(--lilas-clair); }

/* ---------- Cartes génériques (autres pages) ---------- */
.grille { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); margin-top: 46px; }
.carte { background: var(--blanc); border: var(--trait) solid var(--encre); border-radius: var(--rayon); padding: 28px 26px; box-shadow: var(--colle); transition: transform var(--transition), box-shadow var(--transition); color: var(--encre); }
.carte:hover { transform: rotate(-1deg) translateY(-4px); box-shadow: var(--colle-fort); }
.carte__icone { width: 58px; height: 58px; border-radius: 15px; border: 2.5px solid var(--encre); background: var(--lilas-voile); display: grid; place-items: center; font-size: 1.7rem; margin-bottom: 18px; box-shadow: 3px 3px 0 var(--encre); }
.carte h3 { font-size: 1.3rem; margin-bottom: 8px; }
.carte p { color: var(--gris); font-size: 0.98rem; }
.carte__lien { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 700; font-family: 'Baloo 2', sans-serif; color: var(--violet); }
.carte--off { opacity: 0.5; filter: grayscale(0.7); pointer-events: none; }
.carte__badge { display: inline-block; margin-top: 12px; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 0.8rem; padding: 5px 13px; border-radius: 999px; border: 2.5px solid var(--encre); }
.carte__badge--off { background: var(--gris-clair); color: var(--gris); }
.carte__badge--fermé { background: var(--rose); color: var(--blanc); }
.carte__badge--ouvert { background: #7BD6A6; color: var(--encre); }
.carte__dates { margin-top: 10px; font-weight: 700; color: var(--or-fonce); font-family: 'Baloo 2', sans-serif; font-size: 0.95rem; }

/* ---------- Formulaires ---------- */
.form { display: grid; gap: 18px; }
.champ { display: grid; gap: 7px; }
.champ label { font-weight: 700; font-size: 0.95rem; color: var(--encre); font-family: 'Baloo 2', sans-serif; }
.champ .aide { font-size: 0.85rem; color: var(--gris); font-weight: 400; font-family: 'Nunito Sans', sans-serif; }
.champ input, .champ select, .champ textarea { font-family: inherit; font-size: 1rem; padding: 13px 15px; border: 2.5px solid var(--encre); border-radius: var(--rayon-sm); background: var(--blanc); color: var(--texte); width: 100%; transition: box-shadow var(--transition); }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; box-shadow: var(--colle); }
.champ textarea { resize: vertical; min-height: 130px; }
.champ--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-carte { background: var(--blanc); border: var(--trait) solid var(--encre); border-radius: var(--rayon-lg); padding: 40px; box-shadow: var(--colle-fort); max-width: 640px; margin-inline: auto; }

.message { padding: 14px 18px; border-radius: var(--rayon-sm); font-weight: 700; font-size: 0.95rem; display: none; border: 2.5px solid var(--encre); }
.message.visible { display: block; }
.message--ok { background: #7BD6A6; color: var(--encre); }
.message--erreur { background: var(--rose); color: var(--blanc); }

/* ---------- Bandeau titre (pages internes) ---------- */
.page-titre { padding-block: 60px 44px; text-align: center; border-bottom: var(--trait) solid var(--encre); background: var(--lilas-voile); }
.page-titre h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.page-titre p { color: var(--gris); margin-top: 12px; }

/* ---------- Composants pages internes ---------- */
.infos-liste { display: grid; gap: 12px; }
.infos-ligne { display: flex; justify-content: space-between; gap: 20px; padding: 15px 18px; background: var(--lilas-voile); border: 2.5px solid var(--encre); border-radius: var(--rayon-sm); }
.infos-ligne dt { font-weight: 700; color: var(--encre); font-family: 'Baloo 2', sans-serif; }
.infos-ligne dd { color: var(--gris); text-align: right; }

.tableau { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--blanc); border: var(--trait) solid var(--encre); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--colle); }
.tableau th, .tableau td { padding: 14px 18px; text-align: left; border-bottom: 2.5px solid var(--lilas-brume); }
.tableau thead th { background: var(--violet); color: var(--blanc); font-family: 'Baloo 2', sans-serif; border-bottom: var(--trait) solid var(--encre); }
.tableau tbody tr:last-child td { border-bottom: none; }
.tableau tbody tr:hover { background: var(--lilas-voile); }

.faq-item { background: var(--blanc); border: 2.5px solid var(--encre); border-radius: var(--rayon-sm); margin-bottom: 14px; overflow: hidden; box-shadow: var(--colle); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 20px 24px; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.08rem; color: var(--encre); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-q:hover { color: var(--rose); }
.faq-q .chevron { transition: transform var(--transition); color: var(--violet); flex-shrink: 0; }
.faq-item.ouvert .chevron { transform: rotate(180deg); }
.faq-r { max-height: 0; overflow: hidden; transition: max-height var(--transition); }
.faq-r__inner { padding: 0 24px 22px; color: var(--gris); }

.galerie-grille { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 30px; }
.galerie-photo { aspect-ratio: 4/3; border-radius: var(--rayon-sm); overflow: hidden; background: var(--lilas-brume); border: 2.5px solid var(--encre); box-shadow: var(--colle); cursor: pointer; transition: transform var(--transition); }
.galerie-photo:hover { transform: rotate(-1.5deg) scale(1.02); }
.galerie-photo img { width: 100%; height: 100%; object-fit: cover; }
.verrou { max-width: 470px; margin: 40px auto; text-align: center; background: var(--blanc); border: var(--trait) solid var(--encre); border-radius: var(--rayon-lg); padding: 44px 36px; box-shadow: var(--colle-fort); }
.verrou__icone { font-size: 3rem; margin-bottom: 12px; }

/* ---------- Visionneuse plein écran (lightbox) ---------- */
.lightbox { position: fixed; inset: 0; background: rgba(46, 31, 77, 0.94); z-index: 999; display: none; align-items: center; justify-content: center; }
.lightbox.ouvert { display: flex; }
.lightbox__img { max-width: min(92vw, 1100px); max-height: 86vh; object-fit: contain; border-radius: var(--rayon-sm); box-shadow: var(--colle-fort); }
.lightbox__fermer, .lightbox__prec, .lightbox__suiv {
  position: absolute; background: var(--blanc); color: var(--encre); border: var(--trait) solid var(--encre);
  border-radius: 50%; width: 48px; height: 48px; display: grid; place-items: center;
  font-size: 1.4rem; font-weight: 800; cursor: pointer; box-shadow: var(--colle); line-height: 1;
}
.lightbox__fermer:hover, .lightbox__prec:hover, .lightbox__suiv:hover { transform: scale(1.08); }
.lightbox__fermer { top: 20px; right: 20px; }
.lightbox__prec { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__suiv { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__prec:hover, .lightbox__suiv:hover { transform: translateY(-50%) scale(1.08); }
.lightbox__compteur { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: var(--blanc); font-weight: 700; font-family: 'Baloo 2', sans-serif; background: rgba(0,0,0,0.3); padding: 5px 16px; border-radius: 999px; }
@media (max-width: 640px) {
  .lightbox__prec, .lightbox__suiv { width: 40px; height: 40px; font-size: 1.1rem; }
  .lightbox__fermer { width: 40px; height: 40px; }
}

/* ---------- Bandeau d'invitation aux notifications ---------- */
.bandeau-notif {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--lilas-voile); border: 2.5px solid var(--encre); border-radius: var(--rayon-sm);
  padding: 14px 18px; margin: 18px auto; max-width: 640px; box-shadow: var(--colle);
}
.bandeau-notif__icone { font-size: 1.6rem; flex-shrink: 0; }
.bandeau-notif__texte { flex: 1; min-width: 180px; font-size: 0.9rem; color: var(--texte); }
.bandeau-notif__actions { display: flex; gap: 8px; flex-shrink: 0; }
.bandeau-notif__actions button { padding: 8px 14px; font-size: 0.85rem; }

.membre { text-align: center; }
.membre__photo { width: 128px; height: 128px; border-radius: 50%; margin: 0 auto 16px; overflow: hidden; background: var(--lilas); display: grid; place-items: center; font-size: 3rem; color: var(--blanc); border: var(--trait) solid var(--encre); box-shadow: var(--colle); }
.membre__photo img { width: 100%; height: 100%; object-fit: cover; }
.membre h3 { font-size: 1.2rem; }
.membre .role { color: var(--or-fonce); font-weight: 700; font-size: 0.92rem; font-family: 'Baloo 2', sans-serif; }
.membre .diplome { color: var(--gris); font-size: 0.86rem; margin-top: 4px; }

.actu { background: var(--blanc); border: var(--trait) solid var(--encre); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--colle); transition: transform var(--transition), box-shadow var(--transition); display: flex; flex-direction: column; }
.actu:hover { transform: rotate(-1deg) translateY(-4px); box-shadow: var(--colle-fort); }
.actu__banniere { height: 150px; background: var(--lilas); display: grid; place-items: center; font-size: 2.6rem; border-bottom: var(--trait) solid var(--encre); }
.actu__corps { padding: 22px 24px; flex: 1; display: flex; flex-direction: column; }
.actu__date { font-size: 0.8rem; color: var(--or-fonce); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-family: 'Baloo 2', sans-serif; }
.actu h3 { font-size: 1.22rem; margin: 6px 0 10px; }
.actu p { color: var(--gris); font-size: 0.95rem; flex: 1; }

/* ---------- Bandeau CTA ---------- */
.cta-bloc { background: var(--rose); border: var(--trait) solid var(--encre); border-radius: var(--rayon-lg); padding: 56px 40px; text-align: center; color: var(--blanc); box-shadow: var(--colle-fort); }
.cta-bloc h2 { color: var(--blanc); font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 12px; }
.cta-bloc p { color: #FFE7EC; margin-bottom: 26px; max-width: 520px; margin-inline: auto; }

/* ---------- Pied de page ---------- */
.pied { background: var(--encre); color: var(--lilas-clair); padding-block: 60px 30px; border-top: var(--trait) solid var(--encre); }
.pied__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.pied h4 { color: var(--or); font-size: 1.1rem; margin-bottom: 16px; }
.pied a { color: var(--lilas-clair); display: block; padding: 5px 0; }
.pied a:hover { color: var(--or); }
.pied__logo { display: flex; align-items: center; gap: 11px; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--blanc); margin-bottom: 14px; }
.pied p { font-size: 0.94rem; color: var(--lilas-clair); opacity: 0.9; }
.pied__bas { border-top: 2.5px solid rgba(255,255,255,0.15); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.88rem; opacity: 0.8; }

/* ---------- Bannière PWA ---------- */
#pwa-banniere { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 200; background: var(--blanc); border: var(--trait) solid var(--encre); border-radius: var(--rayon); box-shadow: var(--colle-fort); }
.pwa-banniere__inner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; max-width: var(--largeur); margin-inline: auto; }
.pwa-banniere__txt { display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
.pwa-banniere__txt strong { font-family: 'Baloo 2', sans-serif; color: var(--encre); }
.pwa-banniere__txt span { font-size: 0.86rem; color: var(--gris); }
.pwa-banniere__txt b { color: var(--violet); }
.pwa-banniere__fermer { background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--gris); cursor: pointer; padding: 0 4px; align-self: flex-start; }
.pwa-banniere__fermer:hover { color: var(--encre); }

/* ---------- Accessibilité ---------- */
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero p.intro { margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .scene { width: 100%; max-width: 360px; margin: 0 auto; order: -1; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .points { grid-template-columns: 1fr; }
  .pied__grid { grid-template-columns: 1fr; gap: 28px; }
}
/* Repli en menu ☰ : 1300px, pas 640px — avec 10 liens + le bouton CTA, la
   barre n'a plus la place de tenir sur une seule ligne dès qu'on descend
   sous un écran large (le bouton et "Infos pratiques" se compressaient et
   cassaient en deux lignes). Le contenu du menu déroulant (ci-dessous)
   reste inchangé, seul le seuil de déclenchement remonte. Remonté à chaque
   lien de nav ajouté (Recrutement, puis Mairie) — vérifier à nouveau si un
   lien de plus s'ajoute un jour. */
@media (max-width: 1300px) {
  .nav { position: fixed; inset: 74px 0 auto 0; flex-direction: column; align-items: stretch; background: var(--creme); padding: 16px 22px 26px; border-bottom: var(--trait) solid var(--encre); gap: 6px; transform: translateY(-130%); transition: transform var(--transition); }
  .nav.ouvert { transform: translateY(0); }
  .nav a { padding: 13px 14px; }
  .nav__cta { margin-left: 0; margin-top: 6px; }
  .burger { display: block; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .tuile--large { grid-column: span 1; }
  .champ--2 { grid-template-columns: 1fr; }
  .form-carte, .bloc { padding: 28px 22px; }
  .section { padding-block: 58px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto; } }

/* ---------- En-têtes de page animés (stickers décoratifs) ---------- */
.page-titre { position: relative; overflow: hidden; }
.page-titre .conteneur { position: relative; z-index: 2; }
.page-titre__deco {
  position: absolute; z-index: 1; pointer-events: none;
  filter: drop-shadow(3px 3px 0 rgba(46,31,77,0.18));
  animation: flotte 6s ease-in-out infinite;
}
.page-titre__deco--hg { top: -18px; left: -22px; width: 108px; --rot: -12deg; }
.page-titre__deco--bd { bottom: -20px; right: -14px; width: 120px; --rot: 10deg; animation-delay: 1s; }
.page-titre__deco--ht { top: 14px; right: 8%; width: 56px; --rot: 8deg; animation-delay: .5s; }
.page-titre__deco--mascotte {
  width: 150px !important; filter: drop-shadow(4px 5px 0 rgba(46,31,77,0.18));
  opacity: 0; transition: opacity .5s ease;
}
.page-titre__deco--mascotte.chargee { opacity: 1; }

/* Mascotte de la page 404 */
.e404__mascotte { opacity: 0; transition: opacity .5s ease; }
.e404__mascotte.chargee { opacity: 1; }
@media (max-width: 640px) {
  .page-titre__deco--hg { width: 74px; }
  .page-titre__deco--bd { width: 82px; }
  .page-titre__deco--ht { display: none; }
  .page-titre__deco--mascotte { width: 96px !important; }
}

/* ---------- Jeu caché (memory de l'équipe) ---------- */
.jc-fond {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(46, 31, 77, 0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: jc-apparait .25s ease;
}
@keyframes jc-apparait { from { opacity: 0; } to { opacity: 1; } }
.jc-carte {
  position: relative; width: 100%; max-width: 620px; max-height: 92vh; overflow-y: auto;
  background: var(--creme); border: var(--trait) solid var(--encre); border-radius: var(--rayon-lg);
  box-shadow: var(--colle-fort); padding: 32px; transform: rotate(-0.6deg);
}
.jc-fermer {
  position: absolute; top: 16px; right: 16px; width: 38px; height: 38px;
  border-radius: 999px; border: 2.5px solid var(--encre); background: var(--blanc);
  font-size: 1.1rem; line-height: 1; cursor: pointer; box-shadow: 3px 3px 0 var(--encre);
  transition: transform var(--transition);
}
.jc-fermer:hover { transform: translate(-1px, -1px) rotate(90deg); }
.jc-entete { text-align: center; margin-bottom: 22px; }
.jc-eyebrow {
  display: inline-block; font-family: 'Baloo 2', sans-serif; font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--encre); background: var(--or); padding: 5px 14px; border-radius: 999px;
  border: 2.5px solid var(--encre); box-shadow: 3px 3px 0 var(--encre);
  transform: rotate(-2deg); margin-bottom: 10px;
}
.jc-entete h2 { font-size: 1.6rem; margin-bottom: 6px; }
.jc-entete p { color: var(--gris); font-size: 0.95rem; }
.jc-chargement { text-align: center; color: var(--gris); padding: 40px 0; }

.jc-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.jc-case {
  aspect-ratio: 1/1; border: none; background: none; cursor: pointer; perspective: 800px; padding: 0;
}
.jc-case__face {
  position: absolute; inset: 0; border-radius: var(--rayon-sm);
  border: 2.5px solid var(--encre); box-shadow: 3px 3px 0 var(--encre);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  backface-visibility: hidden; transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.jc-case { position: relative; }
.jc-case__dos { background: var(--violet); transform: rotateY(0deg); }
.jc-case__dos img { width: 46%; opacity: 0.85; filter: brightness(0) invert(1); }
.jc-case__recto { background: var(--lilas-voile); transform: rotateY(-180deg); }
.jc-case__recto img { width: 100%; height: 100%; object-fit: cover; }
.jc-emoji { font-size: 2.2rem; }
.jc-case.retournee .jc-case__dos, .jc-case.trouvee .jc-case__dos { transform: rotateY(180deg); }
.jc-case.retournee .jc-case__recto, .jc-case.trouvee .jc-case__recto { transform: rotateY(0deg); }
.jc-case.trouvee .jc-case__recto { border-color: var(--cyan); box-shadow: 3px 3px 0 var(--cyan); }
.jc-case:not(.retournee):not(.trouvee):hover .jc-case__dos { transform: translateY(-3px); }

.jc-victoire { text-align: center; margin-top: 22px; }
.jc-victoire p { font-family: 'Baloo 2', sans-serif; font-weight: 700; margin-bottom: 14px; font-size: 1.08rem; }

@media (max-width: 480px) {
  .jc-carte { padding: 22px 16px; }
  .jc-grille { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}