/* ============================================================
   TOUS ALLUMÉS — THÈME « 90'S » (easter egg)
   ------------------------------------------------------------
   Se débloque en martelant le bouton Accessibilité 10 fois de
   suite. Une fois trouvé, il reste débloqué : une pastille
   « 90'S » s'installe dans le header pour y revenir quand on
   veut.

   Direction : collage de fanzine. Dégradé rose → orange,
   contours noirs de 4 px, ombres portées franches, stickers
   légèrement de travers, squiggles, étoile pétard.
   Le texte courant reste posé sur des feuilles blanches
   cerclées de noir : le fond est déjanté, la lecture non.

   Le thème 90's et le mode accessible s'excluent : activer
   l'un désactive l'autre. Les deux choix sont mémorisés.
   ============================================================ */


/* ============================================================
   PARTIE A — LA PASTILLE « 90'S » DU HEADER
   Injectée par le script pendant que le thème est actif, et
   retirée du DOM dès qu'on l'éteint : elle sert à sortir du
   thème, jamais à y entrer.
   ============================================================ */

.retro-btn {
  gap: .35rem;
  font-family: var(--font-display, 'Archivo Black', sans-serif);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #ff2d95;
  color: #141310;              /* noir sur rose : 5,4:1 — le jaune n'y tenait pas */
  border: 2px solid #ffe74c;
  box-shadow: 2px 2px 0 #00e5ff;
  padding: 0 .7rem;
  margin-left: .7rem;
  cursor: pointer;
  transform: rotate(-3deg);
  touch-action: manipulation;
  transition: transform .15s, box-shadow .15s, background .15s;
}

.retro-btn:hover {
  background: #ffe74c;
  color: #141310;
  transform: rotate(3deg);
  box-shadow: 3px 3px 0 #141310;
}

.retro-btn .ast { color: #141310; font-size: 1.25em; line-height: 0; }
.retro-btn:hover .ast { color: #ff2d95; }

/* Le pliage de la barre en petit écran est réglé une fois pour
   toutes dans accessibilite.css ; la pastille vient simplement se
   ranger à la suite du bouton, sur la deuxième ligne. */
@media (max-width: 620px) {
  .retro-btn { order: 4; margin-left: .5rem; padding: .45rem .6rem; font-size: .74rem; }
}

/* Sous 360 px, le bouton et la pastille ne tiennent plus côte à côte
   sur leur ligne : on rend un peu de largeur au bouton pour éviter
   une troisième ligne. */
@media (max-width: 370px) {
  html.pastille-90 .a11y-btn { flex-basis: 45%; }
  .retro-btn { margin-left: .35rem; padding: .45rem .5rem; }
}

/* L'encouragement à mi-parcours du martèlement.
   Volontairement SANS déplacement : un bouton qui gigote est une
   cible mouvante — exactement ce qu'on évite ailleurs sur ce site
   (et, accessoirement, ce qui ferait rater les appuis suivants).
   Seuls l'ombre et le liseré pulsent : la géométrie ne bouge pas. */
.a11y-btn.chauffe {
  outline: 3px dashed #ff2d95;
  outline-offset: 3px;
  animation: ta-chauffe .3s steps(2, end) infinite;
}

@keyframes ta-chauffe {
  0%   { box-shadow: 2px 2px 0 #ff2d95; }
  100% { box-shadow: 2px 2px 0 #00e5ff; }
}

@media (prefers-reduced-motion: reduce) {
  .a11y-btn.chauffe { animation: none; box-shadow: 2px 2px 0 #ff2d95; }
}


/* ============================================================
   PARTIE B — L'ÉCRAN DE DÉBLOCAGE
   ============================================================ */

.retro-reveal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(255,45,149,.96) 0%, rgba(160,32,240,.94) 45%, rgba(20,19,16,.92) 100%);
  animation: ta-reveal-fond .35s ease-out;
}

.retro-reveal .etoile {
  width: min(62vw, 420px);
  aspect-ratio: 1;
  background: #a020f0;
  border: 0;
  display: grid;
  place-items: center;
  clip-path: polygon(50.0% 0.0%, 58.5% 18.1%, 75.0% 6.7%, 73.3% 26.7%, 93.3% 25.0%, 81.9% 41.5%, 100.0% 50.0%, 81.9% 58.5%, 93.3% 75.0%, 73.3% 73.3%, 75.0% 93.3%, 58.5% 81.9%, 50.0% 100.0%, 41.5% 81.9%, 25.0% 93.3%, 26.7% 73.3%, 6.7% 75.0%, 18.1% 58.5%, 0.0% 50.0%, 18.1% 41.5%, 6.7% 25.0%, 26.7% 26.7%, 25.0% 6.7%, 41.5% 18.1%);
  animation: ta-reveal-etoile .6s cubic-bezier(.2, 1.4, .4, 1);
}

.retro-reveal .etoile span {
  font-family: var(--font-display, 'Archivo Black', sans-serif);
  font-size: min(15vw, 100px);
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 6px #141310;
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 rgba(20, 19, 16, .45);
  letter-spacing: .02em;
}

@keyframes ta-reveal-fond { from { opacity: 0; } to { opacity: 1; } }

@keyframes ta-reveal-etoile {
  0%   { transform: scale(.2) rotate(-40deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.retro-reveal.sort { animation: ta-reveal-sortie .45s ease-in forwards; }

@keyframes ta-reveal-sortie { to { opacity: 0; transform: scale(1.15); } }

@media (prefers-reduced-motion: reduce) {
  .retro-reveal, .retro-reveal .etoile, .retro-reveal.sort { animation: none; }
  .retro-reveal.sort { opacity: 0; transition: opacity .2s; }
}


/* ============================================================
   PARTIE C — LE THÈME
   ============================================================ */

html.retro {
  --papier:   #fffdf5;
  --papier-2: #fff3d6;
  --encre:    #141310;
  --encre-2:  #3a3630;
  --bleu:     #6a1bd1;
  --orange:   #ff5c1f;

  --rose:     #ff2d95;
  --cyan:     #00e5ff;
  --jaune:    #ffe74c;
  --violet:   #6a1bd1;   /* assombri : le jaune passe de 4,2:1 à 6,2:1 dessus */

  --ligne: 4px solid #141310;
  --ombre: 8px 8px 0 #141310;

}

/* ---------- C.1 Le fond ---------- */
html.retro body {
  color: var(--encre);
  background:
    radial-gradient(90% 70% at 88% 12%, rgba(255, 45, 149, .85) 0%, rgba(255, 45, 149, 0) 62%),
    radial-gradient(80% 60% at 6% 92%, rgba(255, 170, 40, .8) 0%, rgba(255, 170, 40, 0) 60%),
    linear-gradient(212deg, #ff5aa8 0%, #ff6b4a 48%, #ff9b2f 100%);
  background-attachment: fixed;
  font-size: 1.05rem;
}

/* Les squiggles : couche décorative fixe, sous le contenu. */
html.retro body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='92' viewBox='0 0 46 92'%3E%3Cpath d='M12 6q22 11 0 22t0 22 0 22 0 14' fill='none' stroke='%23ff2d95' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='92' viewBox='0 0 46 92'%3E%3Cpath d='M12 6q22 11 0 22t0 22 0 22 0 14' fill='none' stroke='%2300e5ff' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='30' viewBox='0 0 90 30'%3E%3Cpath d='M5 22l10-14 10 14 10-14 10 14 10-14 10 14 10-14' fill='none' stroke='%23ffe74c' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 4% 24%, 96% 58%, 7% 86%;
  opacity: .9;
}

html.retro header,
html.retro main,
html.retro footer { position: relative; z-index: 1; }

/* ---------- C.2 Typographie ---------- */
html.retro h1,
html.retro h2,
html.retro .footer-wordmark {
  color: #fff;
  -webkit-text-stroke: 5px #141310;
  paint-order: stroke fill;
  text-shadow: 7px 7px 0 rgba(20, 19, 16, .38);
  line-height: 1.02;
  letter-spacing: 0;
}

html.retro h1 { font-size: clamp(2.8rem, 8vw, 6rem); }
html.retro h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); margin-bottom: 1.6rem; }

/* Les mots d'accent passent en jaune fluo, toujours cerclés. */
html.retro h1 .serif,
html.retro h2 .serif { color: var(--jaune); }
html.retro .bleu { color: var(--jaune); }

/* Sur une feuille claire, le jaune s'affadit : les mots d'accent
   y passent en rose. */
html.retro main section:not(.hero) > .wrap .bleu { color: var(--rose); }

/* Sur une feuille claire, le titre passe en violet plein : ça claque
   davantage qu'un blanc cerclé, et le contraste tient tout seul (7,7:1)
   sans dépendre du liseré noir. */
html.retro main section:not(.hero) > .wrap > h2 { color: var(--violet); }

html.retro h3 {
  color: var(--encre);
  font-size: 1.15rem;
  letter-spacing: .01em;
}

html.retro p, html.retro li { line-height: 1.7; }

/* ---------- C.3 Header ---------- */
html.retro header {
  background: #141310;
  border-bottom: 5px solid var(--jaune);
}

html.retro { --h-controle: 38px; }

html.retro .burger { padding: 0 .8rem; }

html.retro .logo { color: var(--jaune); }
html.retro .logo .ast { color: var(--cyan); }

html.retro nav a { color: #fff; letter-spacing: .08em; }
html.retro nav a:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
html.retro nav a.active { color: var(--jaune); border-bottom-color: var(--jaune); }

html.retro nav a.cta {
  background: var(--rose);
  color: #141310;
  border: 2px solid var(--jaune);
  box-shadow: 2px 2px 0 var(--cyan);
  padding: 0 1.1rem;
}

html.retro nav a.cta:hover { background: var(--jaune); color: #141310; border-color: #141310; }

html.retro .burger { color: var(--jaune); border: 3px solid var(--jaune); }
/* Ce fond et ce filet sont ceux du menu déroulant : hors du petit
   écran, nav n'est qu'un conteneur transparent. Appliqué partout,
   le border-bottom ajoutait 6 px de haut à la barre et décalait les
   liens vers le haut. */
@media (max-width: 860px) {
  html.retro nav { background: #141310; border-bottom: 5px solid var(--jaune); }
}

html.retro .a11y-btn {
  background: var(--cyan);
  color: #141310;
  border: 2px solid #141310;
  box-shadow: 2px 2px 0 var(--jaune);
  letter-spacing: .06em;
}

html.retro .a11y-btn .ico { color: var(--violet); }
html.retro .a11y-btn:hover { background: var(--jaune); color: #141310; }
html.retro .a11y-btn:hover .ico { color: var(--violet); }

/* ---------- C.4 Hero ---------- */
html.retro .hero { padding: 4.5rem 0 4rem; }

html.retro .hero .meta {
  display: inline-flex;
  background: #141310;
  color: var(--jaune);
  border: 3px solid var(--jaune);
  box-shadow: 4px 4px 0 var(--rose);
  padding: .5rem 1rem;
  transform: rotate(-1.2deg);
}

html.retro .hero .meta .sep { color: var(--cyan); }

/* Le chapô : une vraie boîte, pour que le texte reste lisible
   sur le dégradé. */
html.retro .hero p.chapo {
  background: var(--papier);
  color: var(--encre);
  border: var(--ligne);
  box-shadow: var(--ombre);
  padding: 1.3rem 1.5rem;
  transform: rotate(.6deg);
}

html.retro .hero p.chapo strong {
  background: var(--jaune);
  box-shadow: 0 0 0 3px var(--jaune);
  color: var(--encre);
}

/* Le grand astérisque devient l'étoile pétard de l'affiche. */
html.retro .aster-deco {
  color: var(--jaune);
  -webkit-text-stroke: 8px #141310;
  paint-order: stroke fill;
  animation: ta-flotte 6s ease-in-out infinite;
  opacity: 1;
}

@keyframes ta-flotte {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50%      { transform: rotate(8deg) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  html.retro .aster-deco { animation: none; transform: rotate(-8deg); }
}

/* ---------- C.5 Bandeau défilant ---------- */
html.retro .marquee {
  background: #141310;
  color: var(--jaune);
  border-top: 5px solid var(--cyan);
  border-bottom: 5px solid var(--rose);
  padding: .8rem 0;
}

html.retro .marquee-piste { font-weight: 700; letter-spacing: .16em; }
html.retro .marquee-piste .ast { color: var(--cyan); }

/* ---------- C.6 Les feuilles de contenu ----------
   Chaque section pose son contenu sur une feuille blanche
   cerclée de noir : le fond reste déjanté, le texte reste net. */
html.retro main section:not(.hero) > .wrap {
  background: var(--papier);
  border: var(--ligne);
  box-shadow: 12px 12px 0 rgba(20, 19, 16, .55);
  padding: 2.4rem 1.8rem;
  max-width: 1180px;
}

html.retro main section:not(.hero) { padding: 2.6rem 0; }

html.retro .section-label {
  border-top: 4px solid var(--encre);
  color: var(--encre-2);
  font-weight: 700;
}

html.retro .section-label .num {
  background: var(--violet);
  color: var(--jaune);
  border: 3px solid #141310;
  padding: .1rem .55rem;
  transform: rotate(-2deg);
  display: inline-block;
}

html.retro .section-label::after { border-top: 3px dashed var(--rose); opacity: 1; }

/* ---------- C.7 Boutons ---------- */
html.retro .btn {
  background: var(--jaune);
  color: var(--encre);
  border: var(--ligne);
  box-shadow: var(--ombre);
  font-weight: 700;
  letter-spacing: .06em;
  padding: 1rem 1.7rem;
  min-height: 48px;
}

html.retro .btn:hover { background: var(--cyan); box-shadow: 11px 11px 0 #141310; }
html.retro .btn-plein { background: var(--rose); color: #141310; }
html.retro .btn-plein:hover { background: var(--violet); color: var(--jaune); }
html.retro .btn-orange { background: var(--orange); color: #141310; }

/* ---------- C.8 Cartes-stickers ---------- */
html.retro .grille {
  border: none;
  background: none;
  gap: 1.4rem;
  grid-auto-rows: auto;
}

html.retro .grille .carte,
html.retro .carte {
  border: var(--ligne);
  box-shadow: 7px 7px 0 #141310;
  padding: 1.6rem 1.4rem;
}

html.retro .carte:nth-child(4n+1) { background: var(--cyan);   transform: rotate(-1.4deg); }
html.retro .carte:nth-child(4n+2) { background: var(--jaune);  transform: rotate(1.1deg); }
html.retro .carte:nth-child(4n+3) { background: #ff8ac4;       transform: rotate(-.7deg); }
html.retro .carte:nth-child(4n+4) { background: #b388ff;       transform: rotate(1.5deg); }

html.retro .carte:hover { transform: rotate(0deg) scale(1.02); box-shadow: 10px 10px 0 #141310; }

html.retro .carte h3,
html.retro .carte p,
html.retro .carte .index { color: var(--encre); }

html.retro .carte .index { font-weight: 700; letter-spacing: .1em; }
html.retro .carte .glyphe { color: #141310; opacity: .55; }
html.retro .carte:hover .glyphe { color: #141310; opacity: 1; }

html.retro .carte.inverse { background: var(--violet); }
html.retro .carte.inverse h3,
html.retro .carte.inverse p,
html.retro .carte.inverse .index { color: var(--jaune); }
html.retro .carte.inverse .glyphe { color: var(--jaune); opacity: .8; }
html.retro .carte.inverse:hover { background: #4f12a0; }

html.retro a.carte { text-decoration: none; }

/* ---------- C.9 Bandeau d'appel ---------- */
html.retro .bandeau {
  background: var(--violet);
  color: var(--jaune);
  border: var(--ligne);
  box-shadow: 10px 10px 0 #141310;
}

html.retro .bandeau h2 { color: var(--jaune); -webkit-text-stroke: 5px #141310; }
html.retro .bandeau h2 .serif { color: var(--cyan); }
html.retro .bandeau p { color: #fff; }
html.retro .bandeau .btn { background: var(--jaune); color: #141310; box-shadow: 7px 7px 0 #141310; }
html.retro .bandeau .btn:hover { background: var(--cyan); }

/* ---------- C.10 Pôles ---------- */
html.retro .poles { border: var(--ligne); box-shadow: var(--ombre); background: var(--papier); }
html.retro .pole { background: var(--papier); border-bottom: 3px solid #141310; }
html.retro .pole:nth-child(even) { background: var(--papier-2); }
html.retro .pole:hover { background: var(--jaune); }

html.retro .pole .num {
  color: var(--rose) !important;
  -webkit-text-stroke: 3px #141310 !important;
  paint-order: stroke fill;
}

html.retro .pole:hover .num { color: var(--violet) !important; }

html.retro .pole .domaine {
  background: var(--cyan);
  color: #141310;
  border: 3px solid #141310;
  font-weight: 700;
  padding: .3rem .7rem;
}

/* ---------- C.11 Citation ---------- */
html.retro .citation {
  background: var(--jaune);
  border: var(--ligne);
  border-left: 14px solid var(--rose);
  box-shadow: var(--ombre);
  transform: rotate(-.5deg);
}

html.retro .citation p.texte { color: var(--encre); }
html.retro .citation .source { color: var(--encre-2); font-weight: 700; }

/* ---------- C.12 Équipe ---------- */
html.retro .membre .initiales {
  background: var(--cyan);
  border: var(--ligne);
  box-shadow: 5px 5px 0 var(--rose);
  color: #141310;
  transform: rotate(-3deg);
}

html.retro .membre .role { color: var(--encre-2); font-weight: 700; }

/* ---------- C.13 Tableaux ---------- */
html.retro .fiche { background: var(--papier); border: var(--ligne); box-shadow: var(--ombre); }
html.retro .fiche th { background: var(--papier-2); color: var(--encre); border-right: 3px solid #141310; }
html.retro .fiche th, html.retro .fiche td { border-bottom: 3px solid #141310; color: var(--encre); }
html.retro .fiche tr:hover td { background: var(--jaune); }

/* ---------- C.14 Étapes ---------- */
html.retro .etapes { border: var(--ligne); box-shadow: var(--ombre); }
html.retro .etapes li { background: var(--papier); border-bottom: 3px solid #141310; }
html.retro .etapes li:nth-child(even) { background: var(--papier-2); }
html.retro .etapes li:hover { background: var(--cyan); }

html.retro .etapes li::before {
  color: var(--rose) !important;
  -webkit-text-stroke: 3px #141310 !important;
  paint-order: stroke fill;
}

/* ---------- C.15 HelloAsso / contact / formulaire ---------- */
html.retro .helloasso-cadre,
html.retro .contact-carte,
html.retro .formulaire {
  background: var(--papier);
  border: var(--ligne);
  box-shadow: var(--ombre);
}

html.retro .contact-carte + .contact-carte { box-shadow: 8px 8px 0 var(--rose); }
html.retro .helloasso-cadre::before { background: var(--jaune); color: #141310; border: 3px solid #141310; padding: .1rem .5rem; font-weight: 700; }
html.retro .helloasso-attente .pictogramme { color: var(--violet); }
html.retro .note-configuration { color: var(--encre-2); border-top: 3px dashed var(--rose); }
html.retro .note-configuration code { background: var(--violet); color: var(--jaune); }
html.retro .gros-mail a { color: var(--violet); }
html.retro .gros-mail a:hover { color: var(--rose); }

html.retro .formulaire label { color: var(--encre); font-weight: 700; }

html.retro .formulaire input[type="text"],
html.retro .formulaire input[type="email"],
html.retro .formulaire textarea {
  background: #fff;
  color: var(--encre);
  border: 3px solid #141310;
  min-height: 48px;
}

html.retro .formulaire input:focus,
html.retro .formulaire textarea:focus { outline: 4px solid var(--rose); background: var(--papier-2); }

html.retro .form-statut.ok { color: var(--violet); }
html.retro .form-statut.erreur { color: #d81b1b; }

/* ---------- C.16 Liens ---------- */
html.retro a { color: var(--violet); text-decoration-thickness: 2px; text-underline-offset: 3px; }
html.retro a:hover { color: var(--rose); }
html.retro ::selection { background: var(--jaune); color: #141310; }

/* ---------- C.17 Pied de page ---------- */
html.retro footer {
  background: #141310;
  color: #fff;
  border-top: 8px solid var(--cyan);
}

html.retro .footer-wordmark { color: var(--rose); text-shadow: 7px 7px 0 var(--violet); }
html.retro .footer-wordmark .ast { color: var(--cyan); -webkit-text-stroke: 0; }
html.retro footer h4 { color: var(--jaune); }
html.retro footer p { color: #e6e2d8; }
html.retro footer a { color: var(--cyan); }
html.retro footer a:hover { color: var(--jaune); }
html.retro .footer-bas { color: #cfc9bd; border-top: 3px solid var(--rose); }

/* ---------- C.18 Focus ---------- */
html.retro a:focus-visible,
html.retro button:focus-visible,
html.retro input:focus-visible,
html.retro textarea:focus-visible { outline: 4px solid var(--rose); outline-offset: 3px; }

html.retro .saut-contenu { background: var(--jaune); color: #141310; border: 3px solid #141310; }

/* ---------- C.19 Responsive ---------- */
@media (max-width: 860px) {
  html.retro main section:not(.hero) > .wrap { padding: 1.8rem 1.2rem; box-shadow: 8px 8px 0 rgba(20,19,16,.55); }
  html.retro .carte { transform: none !important; }
  html.retro .hero p.chapo,
  html.retro .hero .meta,
  html.retro .citation { transform: none; }
  html.retro h1, html.retro h2 { -webkit-text-stroke-width: 4px; }
  html.retro body::before { background-position: 2% 20%, 98% 58%, 4% 88%; }
}

/* ---------- C.20 Styles écrits en dur dans le HTML ----------
   adhesion-privee.html met le code promo en « color:var(--orange) ».
   L'orange vif ne tient pas sur la feuille claire (3:1) : on force
   une version foncée, seul !important passant devant un style inline. */
html.retro [style*="color:var(--orange)"] { color: #b83a06 !important; }

/* ---------- C.21 Impression ---------- */
@media print {
  html.retro body { background: #fff; }
  html.retro body::before { display: none; }
  html.retro h1, html.retro h2 { color: #000; -webkit-text-stroke: 0; text-shadow: none; }
  .retro-btn, .retro-reveal { display: none; }
}