/* ============================================================
   Mini-site Grand Jeu Concours National Mamayou - gabarit commun
   Charte : vert forêt #2C5F2D · terracotta #E76F51 · orange #F4A261 · crème #FDF6E3
   Base de référence : 1440 px. Les images se remplacent dans assets/img/
   en gardant les mêmes noms de fichiers et dimensions.
   ============================================================ */

/* Polices de la maison (Philosopher + Public Sans, celles du site officiel).
   Elles sont définies dans polices.css, qui définit aussi var(--titre) et
   var(--texte) utilisées plus bas. Cette ligne doit rester tout en haut. */
@import url('polices.css');

:root {
  --vert: #2C5F2D;
  --vert-fonce: #1f451f;
  --terracotta: #E76F51;
  --terracotta-fonce: #c9532f;
  --orange: #F4A261;
  /* Turquoise du bouton « Trouve ta librairie » (remplace l'orange le 30/07/2026) */
  --turquoise: #2FC1B0;
  --turquoise-fonce: #23A897;
  --creme: #FDF6E3;
  --creme-fonce: #f2e8cf;
  /* Couleur du PAPIER : celle du fond des visuels du graphiste (relevée
     directement dans deco-gauche.png et fond-centre.png). Le fond de page doit
     être exactement celle-là, sinon on voit une bande plus claire sur les
     grands écrans, là où les images ne vont pas jusqu'au bord. */
  --papier: #FFFAF0;
  --violet: #9C57A0;
  /* ============================================================
     COULEUR PRINCIPALE DU SITE - vert forêt jusqu'au 03/08/2026,
     violet depuis, à la demande de P-Luc.
     ⚠️ POUR TOUT REMETTRE EN VERT : une seule ligne, celle-ci.
        --principal: var(--vert);  et  --principal-fonce: var(--vert-fonce);
     Titres, textes, boutons et bordures en découlent tous.
     Restent verts sciemment : pied de page, en-têtes de tableau,
     pastilles numérotées, page d'administration.
     Le BANDEAU et le MENU DÉROULANT DU TÉLÉPHONE sont passés au violet le
     04/08/2026 : le panneau vert tombait sous un bandeau violet.
     ============================================================ */
  --principal: var(--violet);
  --principal-fonce: #7C4480;
  --couleur-titre: var(--principal);
  --bouton: var(--principal);
  --bouton-fonce: var(--principal-fonce);
  --bordure: var(--principal);
  --encre: #2b2b25;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* scroll-padding-top réserve la hauteur du bandeau lors d'un saut vers une
   ancre. Sans lui, « Le jeu » et « Confidentialité & données » amenaient bien
   au bon endroit, mais le titre visé se retrouvait CACHÉ SOUS le bandeau, qui
   est collant et mesure 84 px. On ajoute 12 px de respiration. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  font-family: var(--texte);
  color: var(--encre);
  background: var(--papier);
  line-height: 1.6;
}
/* La couleur de fond doit aussi couvrir la zone au-delà du contenu sur les
   très grands écrans, et la « zone élastique » quand on fait défiler. */
html { background: var(--papier); }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; color: var(--couleur-titre); line-height: 1.2; }
h1, h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin-bottom: .8rem; }
/* Titre de page invisible à l'écran, mais lu par les lecteurs d'écran et
   indexé par les moteurs. Sur l'accueil, le titre est DANS l'image du
   bandeau : il n'existait donc nulle part sous forme de texte.
   Surtout pas display:none, qui le retirerait aussi aux lecteurs d'écran. */
.titre-invisible {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* height:auto est INDISPENSABLE ici. Les vignettes portent width="480"
   height="320" : ces attributs servent au navigateur a reserver la bonne place
   avant le telechargement, mais ils fixent aussi la hauteur. Sur telephone,
   max-width:100% reduisait la largeur pendant que la hauteur restait bloquee a
   320 px - les vignettes s'etiraient vers le bas. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--terracotta-fonce); }

/* ---------- Header commun (fond image : header-fond.png 3840×320) ----------
   Depuis le 30/07/2026, le LOGO DU GRAND JARDIN EST DESSINÉ DANS L'IMAGE
   (avant, il était écrit en texte à côté). Deux conséquences :

   1. L'image est calée à GAUCHE et non centrée. Le bandeau est très allongé
      (12 fois plus large que haut) : dès que la fenêtre descend sous 1008 px,
      le navigateur met l'image à l'échelle par la hauteur et rogne les côtés.
      Centrée, elle aurait mangé le logo sur téléphone.
   2. Il faut réserver la place du logo pour que le menu ne vienne pas se
      poser dessus - c'est le rôle de .logo, devenu une zone vide et
      cliquable (voir plus bas). ------------------------------------------ */
header.site {
  position: sticky; top: 0; z-index: 100;
  /* couleur de repli sous l'image du bandeau : elle ne se voit que le temps du
     chargement, mais un eclair vert sous un bandeau violet se remarque */
  background: var(--principal) url('../img/header-fond.png') left center/cover no-repeat;
  min-height: 84px;
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1.4rem; gap: 1rem;
}
/* Zone du logo imprimé : plus aucun texte, seulement la place réservée et le
   clic vers l'accueil. Le logo occupe les 18,2 % de gauche de l'image. */
.logo {
  display: block; flex: 0 0 auto;
  width: 18.2%; max-width: 260px; height: 56px;
  margin-left: -.6rem;   /* le bandeau a sa propre marge : on la rattrape */
  text-decoration: none;
}
/* Sous 1008 px, l'image est mise à l'échelle par la hauteur : le logo mesure
   alors 183 px, quelle que soit la largeur de la fenêtre. */
@media (max-width: 1008px) {
  .logo { width: 183px; max-width: 42vw; }
}
nav.menu { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
nav.menu a {
  /* Comme sur le site officiel, le menu est en Philosopher (pas en texte courant). */
  font-family: var(--titre);
  color: #fff; text-decoration: none; font-size: .92rem; font-weight: 700;
  padding: .5rem .95rem; border-radius: 999px;
  /* Liseré TOUJOURS visible, même au repos : sans lui les liens ressemblent à du
     texte posé sur le bandeau et on ne voit pas qu'ils sont cliquables.
     Il se renforce au survol, puis sur la page en cours. */
  border: 2px solid rgba(255,255,255,.35);
  transition: border-color .15s, background-color .15s;
}
nav.menu a:hover { border-color: rgba(255,255,255,.75); }
nav.menu a.actif { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.85); }
/* Les deux boutons de couleur n'ont PAS de liseré : leur fond suffit à les
   détacher, et un contour blanc par-dessus les alourdirait. */
nav.menu a.libraires-btn { background: var(--terracotta); border-color: transparent; }
nav.menu a.libraires-btn:hover { background: var(--terracotta-fonce); border-color: transparent; }
/* « Trouve ta librairie » : turquoise depuis le 30/07/2026 (avant : orange).
   Le texte est très foncé et non blanc - sur ce turquoise, le blanc ne donnait
   pas un contraste suffisant, le vert-nuit donne 5,6:1. */
nav.menu a.trouver-btn { background: var(--turquoise); color: #063B35; border-color: transparent; }
nav.menu a.trouver-btn:hover { background: var(--turquoise-fonce); border-color: transparent; }
nav.menu a.trouver-btn.actif { background: var(--turquoise-fonce); border-color: rgba(255,255,255,.55); }
#burger {
  display: none; background: none; border: 2px solid #fff; border-radius: 8px;
  color: #fff; font-size: 1.4rem; padding: .15rem .6rem; cursor: pointer;
}

/* ---------- Structure : déco latérale + colonne centrale 1080 ----------
   ⚠️ Les visuels du graphiste sont livrés en HAUTE DÉFINITION (deux à trois
   fois la taille d'affichage), pour rester nets sur les écrans récents.
   Il faut donc TOUJOURS écrire la taille d'affichage voulue : sans elle, le
   navigateur les dessine à leur taille réelle en pixels - les bandes faisaient
   480 px au lieu de 180, et le fond central 2160 au lieu de 1080. */
.cadre {
  background:
    url('../img/deco-gauche.png') left top repeat-y,
    url('../img/deco-droite.png') right top repeat-y;
  background-size: 180px auto, 180px auto;
}
main.centre {
  max-width: 1080px; margin: 0 auto; padding: 2.5rem 1.25rem 3.5rem;
  background: url('../img/fond-centre.png') top center no-repeat;
  background-size: 1080px auto;
}
main.centre.large { max-width: 1320px; }   /* pages qui ont besoin d'espace : la carte */
.section { padding: 1.6rem 0; }
/* Les surtitres orange (« À GAGNER », « OÙ JOUER ? »…) : 24 sur l'ensemble du
   site. Agrandis de 0,76 à 0,95 rem le 03/08/2026 - ils etaient trop discrets
   au-dessus des grands titres. */
.kicker {
  display: inline-block; text-transform: uppercase; letter-spacing: .12em;
  font-size: .95rem; font-weight: 700; color: var(--terracotta); margin-bottom: .35rem;
}

/* ---------- Composants ---------- */
.btn {
  display: inline-block; border-radius: 999px; padding: .85rem 1.7rem; font-weight: 700;
  text-decoration: none; font-size: 1.02rem; margin: .25rem .5rem .25rem 0;
  border: none; cursor: pointer; font-family: inherit;
}
.btn-primary { background: var(--terracotta); color: #fff; }
.btn-primary:hover { background: var(--terracotta-fonce); }
.btn-secondaire { background: var(--bouton); color: #fff; }
.btn-secondaire:hover { background: var(--bouton-fonce); }
.btn-discret { background: none; border: 2px solid var(--bouton); color: var(--bouton); }
.btn-discret:hover { background: var(--bouton); color: #fff; }

/* ---------- Relief des boutons, comme dans l'enquete (18/09/2026) ----------
   Meme recette que le jeu d'enquete : un degrade vertical, clair en haut et
   sombre en bas, un lisere, une tranche pleine dessous et une ombre portee.
   Au survol le bouton s'eclaircit, au clic il s'enfonce de 3 px.
   Une difference avec l'enquete : la-bas les teintes sont ecrites en dur, ici
   le degrade et la tranche sont des BLANCS et des NOIRS TRANSPARENTS. Ils
   s'appliquent donc a n'importe quelle couleur de fond, et la ligne unique qui
   remettrait tout le site en vert (voir le haut du fichier) suffit toujours.
   Le survol ne vaut que pour une souris : sur un ecran tactile il reste colle
   apres le tap, et le bouton parait bloque.
   Le bouton EN ATTENTE (.btn-attente) reste plat : c'est ce qui dit qu'il n'y
   a rien a cliquer. */
.btn-primary, .btn-secondaire, .btn-discret {
  transition: transform .1s ease, box-shadow .1s ease, filter .1s ease;
}
.btn-primary, .btn-secondaire {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%,
                                            rgba(255, 255, 255, 0) 55%,
                                            rgba(0, 0, 0, .16) 100%);
  border: 1.5px solid rgba(0, 0, 0, .22);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .28), 0 5px 10px rgba(92, 51, 23, .18);
}
/* Le bouton discret garde son fond clair et son contour, c'est ce qui le
   distingue. Meme relief, en plus leger, comme le « faible » de l'enquete. */
.btn-discret {
  box-shadow: 0 3px 0 rgba(0, 0, 0, .16), 0 4px 8px rgba(92, 51, 23, .12);
}
@media (hover: hover) {
  .btn-primary:hover, .btn-secondaire:hover, .btn-discret:hover { filter: brightness(1.05); }
}
.btn-primary:active, .btn-secondaire:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .28), 0 1px 3px rgba(92, 51, 23, .18);
}
.btn-discret:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .16), 0 1px 3px rgba(92, 51, 23, .12);
}
.btn-primary:focus-visible { outline: 3px solid var(--bouton); outline-offset: 2px; }
.btn-secondaire:focus-visible, .btn-discret:focus-visible {
  outline: 3px solid var(--terracotta); outline-offset: 2px;
}
/* Le relief reste, le mouvement se retire pour qui le demande. */
@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-secondaire, .btn-discret { transition: none; }
  .btn-primary:active, .btn-secondaire:active, .btn-discret:active { transform: none; }
}
/* Bouton en attente : le fichier n'existe pas encore. Contour en pointilles et
   curseur par defaut pour qu'on voie tout de suite qu'il n'y a rien a cliquer.
   Le gris reste a 4,6:1 sur le fond creme, donc lisible pour tout le monde. */
.btn-attente {
  background: none; border: 2px dashed #a79f8e; color: #6b6555;
  cursor: default; font-weight: 600;
}

.grid { display: grid; gap: 1.2rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.carte-bloc {
  background: #fff; border-radius: 16px; padding: 1.4rem;
  box-shadow: 0 3px 14px rgba(44,95,45,.09); border-top: 4px solid var(--orange);
}
.carte-bloc h3 { font-size: 1.08rem; margin-bottom: .5rem; }
/* Les deux editions du papercraft, MAXI et JUNIOR : titres plus gros et en
   terracotta (21/09/2026). Une classe a part, car .carte-bloc h3 sert aussi
   aux cartes des lots et aux reglages d'imprimante, qui ne bougent pas. */
.carte-bloc h3.titre-edition {
  font-size: 1.5rem; color: var(--terracotta); margin-bottom: .7rem;
}

.steps { counter-reset: step; }
.step {
  background: #fff; border-radius: 14px; padding: 1.3rem 1.3rem 1.3rem 4.3rem;
  position: relative; margin-bottom: 1rem; box-shadow: 0 3px 14px rgba(44,95,45,.09);
}
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 1.1rem; top: 1.15rem;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--vert); color: #fff; font-family: var(--titre); font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}

details.faq {
  background: #fff; border-radius: 12px; margin-bottom: .7rem;
  box-shadow: 0 3px 14px rgba(44,95,45,.09); overflow: hidden;
}
details.faq summary {
  cursor: pointer; padding: 1rem 2.6rem 1rem 1.2rem; font-weight: 700; color: var(--couleur-titre);
  list-style: none; position: relative;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; position: absolute; right: 1.2rem; top: .8rem; font-size: 1.4rem; color: var(--terracotta); }
details.faq[open] summary::after { content: '–'; }
details.faq .rep { padding: 0 1.2rem 1.1rem; font-size: .95rem; }

/* ---------- Formulaires ---------- */
.form-bloc { background: #fff; border-radius: 16px; padding: 1.8rem; box-shadow: 0 6px 24px rgba(44,95,45,.12); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem 1.2rem; margin-bottom: 1.2rem; }
label { font-size: .85rem; font-weight: 700; color: var(--couleur-titre); display: block; margin-bottom: .25rem; }
input[type=text], input[type=email], input[type=tel], input[type=url], select {
  width: 100%; padding: .8rem .85rem; border: 1.5px solid #cfc9b4; border-radius: 10px;
  font-size: 1rem; background: var(--creme); font-family: inherit;
}
input:focus, select:focus { outline: 2px solid var(--orange); border-color: var(--orange); background: #fff; }
.engagement { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .8rem; font-size: .93rem; }
.engagement input { margin-top: .3rem; width: 1.15rem; height: 1.15rem; accent-color: var(--vert); flex-shrink: 0; }
.engagement label { font-weight: 400; }
.form-note { font-size: .82rem; color: #6b6555; margin-top: 1rem; }
.champ-piege { position: absolute; left: -9999px; opacity: 0; }
.oblig { color: var(--terracotta-fonce); font-weight: 700; }

/* Le site internet : mis en avant, pleine largeur, sous les autres champs */
.champ-site {
  background: #fff8ec; border: 2px solid var(--orange); border-radius: 14px;
  padding: 1rem 1.2rem; margin-bottom: 1.2rem;
}
.champ-site label { font-size: 1rem; color: var(--couleur-titre); margin-bottom: .45rem; }
.champ-site input { background: #fff; }
.champ-site .aide-site { font-size: .85rem; color: #6b4a1f; margin-top: .5rem; line-height: 1.45; }
.champ-site .aide-site a { color: var(--terracotta-fonce); font-weight: 700; }

/* ---------- Footer commun (fond image remplaçable : footer-deco.png 1440×240) ---------- */
footer.site {
  background: var(--vert-fonce) url('../img/footer-deco.png') center/cover no-repeat;
  color: #e8efe5; padding: 2.4rem 1.4rem 1.6rem; font-size: .9rem; margin-top: 2rem;
}
footer.site .colonnes { max-width: 1080px; margin: 0 auto; display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
footer.site a { color: var(--orange); }
footer.site h4 { font-family: var(--titre); font-weight: 700; color: #fff; margin-bottom: .5rem; font-size: 1rem; }
footer.site ul { list-style: none; }
footer.site li { margin-bottom: .3rem; }
footer.site .mini { max-width: 1080px; margin: 1.6rem auto 0; font-size: .78rem; opacity: .75; border-top: 1px solid rgba(255,255,255,.2); padding-top: 1rem; }

/* ---------- Accueil enfants ---------- */
/* Le bandeau d’accueil utilise <picture> : c’est le navigateur qui choisit
   l’image AVANT de la télécharger. Plus de bascule .desktop/.mobile ici -
   elle masquait sans empêcher le téléchargement. */
.hero-accueil img { width: 100%; }
.bandeau-pleine-largeur img { width: 100%; }
.vignette-jeu { text-align: center; }
/* Le liseré n'est pas décoratif : la vignette du quiz est sur fond crème, posée
   sur une page crème. Sans trait, ses bords se dissolvent et l'image n'a plus
   de forme. Il porte sur les DEUX vignettes de la grille - la voisine « chasse
   au trésor » est une photo, un cadre discret l'encadre sans la gêner, et deux
   vignettes côte à côte dont une seule aurait un contour se verrait.
   box-sizing hérite de * : le trait ne décale donc pas la mise en page. */
.vignette-jeu img {
  border-radius: 16px; box-shadow: 0 8px 22px rgba(44,95,45,.18);
  margin-bottom: .9rem; border: 2px solid #e2d9c6;
}
.mise-en-avant {
  display: flex; gap: 2rem; align-items: center; flex-wrap: wrap;
  background: #fff; border-radius: 20px; padding: 1.8rem;
  box-shadow: 0 6px 24px rgba(44,95,45,.12); border: 3px solid var(--orange);
}
.mise-en-avant img { border-radius: 14px; flex: 0 1 340px; }
.mise-en-avant > div { flex: 1 1 300px; }

/* ---------- Page des lots ---------- */
.liste-lot { list-style: none; margin-top: .6rem; }
.liste-lot li { padding: .3rem 0 .3rem 1.6rem; position: relative; line-height: 1.45; }
.liste-lot li::before { content: '🐾'; position: absolute; left: 0; font-size: .85rem; top: .35rem; }
/* Renvoi de l'asterisque des listes de lots : volontairement discret (demande
   P-Luc). L'avertissement complet reste dans .encart-securite ; cette ligne
   n'est qu'un rappel a cote des lots. */
.note-peinture { margin-top: .9rem; font-size: .82rem; color: #7A7466; font-style: italic; }
.note-peinture sup { font-style: normal; }
.lot-grand-prix { border-color: var(--orange); background: linear-gradient(180deg, #fff8ec, #fff); }
.lot-medaille { font-size: 4.5rem; flex: 0 0 auto; line-height: 1; }
.lot-carte { display: flex; flex-direction: column; }
.lot-rang {
  font-family: var(--titre); font-size: 1.15rem; font-weight: bold; color: var(--couleur-titre);
}
.lot-nb {
  display: inline-block; align-self: flex-start; margin-top: .25rem;
  background: var(--creme-fonce); color: #6b6555; border-radius: 999px;
  padding: .1rem .6rem; font-size: .78rem; font-weight: 700;
}

/* ---------- Page « Où jouer ? » : recherche et liste ---------- */
/* La classe garde son nom .outils-carte pour ne pas toucher au HTML, mais il
   n'y a plus de carte : l'idée du plan cliquable est ABANDONNEE (P-Luc,
   04/08/2026). Les treize règles qui l'habillaient - .bloc-carte,
   .colonne-carte, .carte-france et les six états de .dept - sont retirées, ainsi
   que son code dans carte.js. Elle n'a d'ailleurs jamais fonctionné : le
   conteneur #carte n'existe pas dans librairies.html.
   ⚠️ Ne pas confondre avec .dept-bloc plus bas, qui habille la liste des
   résultats groupée par département, et qui SERT. */
.outils-carte { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.2rem 0; align-items: center; }
.outils-carte input, .outils-carte select { flex: 1 1 220px; width: auto; }
.badge-exemple { background: var(--creme-fonce); color: #8a7f5c; font-size: .72rem; padding: .1rem .5rem; border-radius: 999px; }
.zones-hors-france { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin-top: .8rem; }
.zone-btn {
  border: 2px solid var(--bouton); background: #fff; color: var(--bouton); cursor: pointer;
  border-radius: 999px; padding: .45rem 1rem; font-weight: 700; font-size: .9rem; font-family: inherit;
}
.zone-btn:hover { background: var(--creme-fonce); }
.zone-btn.choisi { background: var(--bouton); color: #fff; }
.zone-btn:disabled { opacity: .45; cursor: default; }
.legende-carte { font-size: .82rem; color: #6b6555; text-align: center; margin-top: .6rem; }

/* La liste compacte : un département replié = une ligne.
   Sur écran large, elle se répartit sur deux colonnes pour éviter une longue traîne. */
/* Page « Où jouer ? » - passage au violet, demande P-Luc du 03/08.
   Tout est porte par des SELECTEURS CIBLES (l'identifiant du bouton, celui de
   la section d'introduction) et non par les classes generiques .btn-secondaire
   ou .kicker : celles-ci servent partout dans le site, qui reste vert. */
.resume-liste { font-weight: 700; color: var(--couleur-titre); margin-bottom: .6rem; }
@media (min-width: 900px) {
  #resultats { column-count: 2; column-gap: 1.2rem; }
}
#resultats .dept-bloc { break-inside: avoid; }
/* Le message « aucune librairie ne correspond » vit lui aussi dans #resultats, donc
   dans les deux colonnes : sans cette regle le navigateur le COUPE EN DEUX, une
   moitie par colonne, et dessine une bordure autour de chaque morceau. Il doit
   traverser toute la largeur, d'un seul tenant. */
#resultats .encart-info { column-span: all; break-inside: avoid; }
#resultats .dept-bloc {
  background: #fff; border-radius: 10px; margin-bottom: .35rem; overflow: hidden;
  box-shadow: 0 1px 6px rgba(44,95,45,.08);
}
#resultats .dept-bloc > summary {
  cursor: pointer; padding: .5rem .8rem; font-weight: 700; color: var(--couleur-titre); font-size: .95rem;
  list-style: none; display: flex; align-items: center; gap: .5rem;
}
#resultats .dept-bloc > summary::-webkit-details-marker { display: none; }
#resultats .dept-bloc > summary::before { content: '▸'; color: var(--terracotta); font-size: .9rem; }
#resultats .dept-bloc[open] > summary::before { content: '▾'; }
#resultats .dept-bloc .compte {
  margin-left: auto; background: var(--creme-fonce); color: #6b6555;
  border-radius: 999px; padding: .05rem .5rem; font-size: .78rem; font-weight: 700;
}
#resultats .liste-libs { list-style: none; margin: 0; padding: 0 .8rem .5rem 1.8rem; }
#resultats .liste-libs li {
  display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
  padding: .25rem 0; border-top: 1px solid var(--creme-fonce); font-size: .9rem; line-height: 1.35;
}
#resultats .liste-libs li b { color: var(--encre); font-weight: 700; }
#resultats .liste-libs li .qui { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
#resultats .liste-libs li .site-lib {
  color: var(--terracotta); font-size: .82rem; text-decoration: none;
  overflow-wrap: anywhere;
}
#resultats .liste-libs li .site-lib:hover { text-decoration: underline; }
#resultats .liste-libs li .ou { color: #6b6555; white-space: nowrap; }

/* ---------- Tableaux ---------- */
table.simple { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 3px 14px rgba(44,95,45,.09); font-size: .95rem; }
table.simple th { background: var(--vert); color: #fff; text-align: left; padding: .7rem 1rem; }
table.simple td { padding: .65rem 1rem; border-bottom: 1px solid var(--creme-fonce); vertical-align: top; }
table.simple tr:last-child td { border-bottom: none; }
.table-scroll { overflow-x: auto; }

/* ---------- Messages ---------- */
.encart-ok {
  background: #e8f3e6; border: 2px solid var(--bordure); color: var(--couleur-titre);
  border-radius: 14px; padding: 1.3rem 1.5rem; margin: 1rem 0;
}
/* ---------- Avertissement de sécurité ----------
   Les figurines ne sont pas des jouets. Cette mention doit se voir : elle est
   reprise à l'identique dans le règlement du jeu et sur l'emballage des lots. */
.encart-securite {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #fff6f2;
  border: 3px solid var(--terracotta);
  border-radius: 16px;
  padding: 1.2rem 1.4rem;
  margin: 1.6rem 0;
}
.encart-securite .triangle {
  flex: 0 0 auto;
  font-family: var(--emoji, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif);
  font-size: 2rem; line-height: 1;
}
.encart-securite .titre-secu {
  display: block;
  font-family: var(--titre); font-weight: 700;
  color: var(--terracotta-fonce); font-size: 1.12rem;
  margin-bottom: .35rem;
}
.encart-securite p { font-size: .95rem; line-height: 1.5; }
/* Variante « impression » de la page du kit : c'est l'erreur qui coûte le plus
   cher - un libraire qui imprime en simple face obtient des bulletins sans
   autorisation parentale, donc inutilisables. Le titre est donc plus gros que
   celui d'un encart de sécurité ordinaire. */
.encart-securite.encart-impression .titre-secu { font-size: 1.45rem; margin-bottom: .5rem; }
.encart-securite.encart-impression { font-size: 1rem; }
@media (max-width: 520px) {
  .encart-securite { flex-direction: column; gap: .5rem; }
  .encart-securite.encart-impression .titre-secu { font-size: 1.25rem; }
}

/* ---------- Page du règlement ----------
   Texte long et juridique : on l'aère et on limite la longueur de ligne. */
#texte-reglement h2 {
  font-size: 1.25rem; margin-top: 2.2rem; margin-bottom: .6rem;
  padding-bottom: .35rem; border-bottom: 2px solid var(--creme-fonce);
}
#texte-reglement p { margin-bottom: .8rem; }
#texte-reglement ul { margin: 0 0 .9rem 1.3rem; }
#texte-reglement li { margin-bottom: .35rem; }
.tableau-lots { overflow-x: auto; margin: 1rem 0 1.4rem; }
.tableau-lots table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .94rem; }
.tableau-lots th, .tableau-lots td {
  border: 1px solid var(--creme-fonce); padding: .6rem .8rem; text-align: left; vertical-align: top;
}
.tableau-lots thead th { background: var(--vert); color: #fff; font-family: var(--titre); }
.tableau-lots tbody th { background: var(--creme); white-space: nowrap; width: 1%; }
.signature-reglement {
  margin-top: 2.4rem; padding-top: 1rem; border-top: 1px solid var(--creme-fonce);
  font-size: .88rem; color: #6b6555;
}

/* ---------- Papercraft : deux téléchargements côte à côte ---------- */
.deux-telechargements {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-bottom: 1.6rem;
}
.deux-telechargements .btn { margin: 0; }

/* ---------- Papercraft : la rangée compacte ----------
   Les trois boutons de l'édition bicolore passaient à la ligne l'un sous
   l'autre. Ce modificateur les compacte : étiquette insécable, texte à
   .82 rem, flancs à .9 rem. Les tailles ne sont pas estimées mais mesurées
   dans le navigateur : la rangée bicolore, la plus large des trois, fait
   438 px pour 466 px disponibles dans la carte.
   Le modificateur, plutôt que la classe elle-même : .deux-telechargements
   sert aussi sur kit.html, kit-local.html et local.html, qu'on ne touche pas.
   Le retour à la ligne reste autorisé : en dessous de cette largeur, une
   rangée figée déborderait de la carte, ce qui est pire que deux lignes. */
.deux-telechargements.rangee-compacte { gap: .5rem; margin: 1.1rem 0 .55rem; }
.deux-telechargements.rangee-compacte .btn {
  white-space: nowrap; font-size: .82rem; padding: .6rem .9rem;
}
/* La mention d'attente est dite une fois, sous la rangée, au lieu d'être
   répétée dans chaque étiquette : « bientôt » y revenait jusqu'à trois fois
   pour une seule et même information. */
.mention-attente {
  font-size: .92rem; font-weight: 700; color: #6b6555;
  margin-bottom: 1.6rem;
}

/* ---------- Papercraft : l'étape « partage » mise en avant ----------
   C'est l'étape qui fait vivre l'opération sur les réseaux : elle doit se
   distinguer des deux précédentes. */
.step.step-partage {
  background: #fff;
  border: 3px solid var(--terracotta);
  box-shadow: 0 5px 0 rgba(231,111,81,.26);
}
.step.step-partage h3 { color: var(--terracotta-fonce); }
.partage-appel {
  margin-top: .7rem;
  font-family: var(--titre); font-weight: 700;
  font-size: 1.06rem; line-height: 1.35;
  color: var(--encre);
}
/* Le nom du compte fait 31 caracteres : sans coupure autorisee il deborde de
   la carte sur un telephone de 375 px. */
.partage-compte {
  margin-top: .6rem; font-size: .95rem; line-height: 1.35;
  overflow-wrap: anywhere;
}
.partage-compte a { color: var(--terracotta-fonce); font-weight: 700; }
.partage-hashtag {
  margin-top: .7rem;
  display: inline-block;
  background: var(--terracotta); color: #fff;
  font-family: var(--titre); font-weight: 700; font-size: 1.1rem;
  border-radius: 999px; padding: .35rem 1.1rem;
}

/* ---------- Appel « fais inscrire ta librairie » ----------
   Volontairement très visible : c'est le seul endroit qui transforme une
   déception (« ma librairie n'est pas là ») en action utile. */
/* Remonté AVANT la recherche le 04/08/2026 : la marge du haut passe donc de
   2,4 rem à 0, sinon l'encadré décollait du titre de la page. */
.appel-libraire {
  margin: 0 0 1.8rem;
  background: #fff;
  border: 3px solid var(--terracotta);
  border-radius: 20px;
  padding: 1.7rem 1.8rem;
  box-shadow: 0 6px 0 rgba(231,111,81,.28);
  text-align: center;
}
.appel-libraire .titre-appel {
  display: block;
  font-family: var(--titre); font-weight: 700;
  color: var(--terracotta-fonce);
  font-size: clamp(1.35rem, 3.4vw, 1.8rem);
  line-height: 1.15; text-wrap: balance;
  margin-bottom: .7rem;
}
.appel-libraire p { max-width: 46rem; margin: 0 auto; }
.appel-libraire .minutes { color: var(--terracotta-fonce); font-weight: 700; }
/* Règle conservée sans être utilisée : l'encadré n'a plus de bouton depuis le
   04/08, mais elle resservira si on en remet un. Deux lignes, sans coût. */
.appel-libraire .btn { margin: 1.2rem .5rem 0 .5rem; }
/* Sans bouton, le cartouche de l'adresse est le dernier élément : il lui faut
   sa propre respiration en bas, que la marge du bouton assurait avant. */
.appel-libraire .adresse-a-donner:last-child { margin-bottom: .4rem; }
/* L'adresse à recopier pour le libraire. Elle doit se détacher du reste : c'est
   la seule ligne que quelqu'un va noter sur un papier. Coupure autorisée au
   milieu du mot, sinon elle déborde du cadre sur un téléphone étroit. */
.appel-libraire .adresse-a-donner {
  margin: .9rem auto 0; padding: .6rem 1rem;
  background: var(--creme); border-radius: 12px; display: inline-block;
  font-size: clamp(1rem, 3.2vw, 1.2rem); line-height: 1.35;
  overflow-wrap: anywhere;
}
.appel-libraire .adresse-a-donner strong { color: var(--terracotta-fonce); }
.appel-libraire .adresse-a-donner span {
  display: block; font-size: .85rem; color: #6b6555; font-weight: 600;
}

.encart-info {
  background: #fff8ec; border: 2px solid var(--orange); color: #6b4a1f;
  border-radius: 14px; padding: 1.1rem 1.4rem; margin: 1rem 0; font-size: .95rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1279px) {
  .cadre { background: none; }
}
@media (max-width: 860px) {
  #burger { display: block; }
  /* Le panneau deroulant du telephone etait reste en VERT alors que le bandeau
     du menu est violet depuis le 03/08 : au clic sur le burger, un rectangle
     vert tombait sous un bandeau violet. Il suit maintenant la couleur
     principale, donc il changera tout seul si la charte bouge encore. */
  nav.menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--principal-fonce); flex-direction: column; align-items: stretch;
    padding: .8rem 1rem; gap: .3rem;
  }
  nav.menu.ouvert { display: flex; }
  nav.menu a { text-align: center; }
  main.centre { padding-top: 1.6rem; }
}


/* ---------- Bandeau des pages de l'operation locale ----------
   Ajoute le 03/09/2026 a la demande de P-Luc : local.html et kit-local.html
   doivent se distinguer du jeu national d'un coup d'oeil. Le kicker de section
   ne suffisait pas, il ressemble a ceux de toutes les autres pages.

   Terracotta et non violet : le violet est la couleur principale du site donc
   du dispositif national. Une couleur franchement autre est le seul moyen de
   dire « vous n'etes pas sur le meme jeu » sans l'ecrire trois fois.

   Volontairement NON collant. Le rendre collant obligerait a recalculer
   scroll-padding-top, cale a 96 px pour le seul en-tete, et on a deja eu des
   titres caches sous le bandeau (voir le commentaire ligne 51). */
.bandeau-local {
  background: var(--terracotta);
  color: #fff;
  text-align: center;
  font-family: var(--titre);
  font-size: 1.02rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .55rem 1rem;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .10);
}
@media (max-width: 480px) {
  .bandeau-local { font-size: .84rem; letter-spacing: .03em; padding: .5rem .7rem; }
}

/* Les deux bandes de photos du papercraft, cote a cote (23/09/2026).
   Empilees, elles occupaient la moitie d'un ecran juste sous le visuel.
   Les deux images ont exactement le meme format, 1520 x 700, trois photos
   chacune : a largeur egale elles s'affichent au meme grossissement, les
   chats se comparent honnetement d'une bande a l'autre, et les deux blocs
   tombent a la meme hauteur. C'est tout l'interet de les montrer ensemble.
   Sous 640 px il n'y a plus la place : elles repassent l'une sous l'autre. */
.duo-bandes { display: flex; gap: 16px; align-items: flex-start; }
.duo-bandes figure { flex: 1 1 0; margin: 0; min-width: 0; }
.duo-bandes img { width: 100%; display: block; border-radius: 14px; }
@media (max-width: 640px) {
  .duo-bandes { flex-direction: column; gap: 1rem; }
}