:root{
  --mec-violet: #5b16c9;        /* fond principal */
  --mec-violet-deep: #2b0b66;   /* titres / contrastes */
  --mec-jaune: #FADA47;         /* boutons / CTA */
  --mec-jaune-hover: #f0c933;   /* hover */
  --mec-vert: #43ac59;         /* boutons */
  --mec-vert-hover: #35984a;         /* boutons */
  --mec-rouge: #f91616;         /* boutons */
  --mec-rouge-hover: #d50a0a;         /* boutons */
  --mec-blanc: #fff9ed;
}

:root {
    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-blur: 10px;
}

:root{
  --z-under: 1;
  --z-decor: 2;
  --z-over: 5;
  --z-overlay: 1000;
  --z-bg: 0;
}

:root{
  --band-red:    #e52323;
  --band-yellow: #f6c200;
  --band-green:  #31a558;
  --band-purple: #5b16c9;

  --transition-z: 999;
  --band-rot: 27deg;          /* ton angle */
  --band-width: 300vmax;      /* toujours + long que la diagonale, tous écrans */
  --band-thick: 32vmin;       /* épaisseur responsive */
  --band-gap: -2vmin;         /* léger chevauchement */
  --band-step: calc(var(--band-thick) - var(--band-gap));
  --band-shift: 130%;         /* distance d’anim */
  --seam-index: 3;            /* 0..5 -> b4 => jonction jaune/vert au coin (0,0) */
}

:root { --hero-offset: 0px; --hero-stick: 0px; }

:root{ --parallax: 0px; }
body::before{ transform: translateY(calc(var(--parallax) * -0.25)); }
body::after{  transform: translateY(calc(var(--parallax) *  0.20)); }
.decor-top-left{ transform: translateY(calc(var(--parallax) * -0.15)); }

@media (prefers-reduced-motion: reduce){
  body::before, body::after, .decor-top-left{ transform: none !important; }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

html{
  font-size: calc(16px * var(--a11y-scale, 1));
}

/* Décor en haut-droite avec taille fixe */
.main {
  position: relative;   /* déjà présent */
  z-index: auto;        /* pas de stacking context inutile */
}

/* conteneur "collant" qui ne prend pas de place visuelle */
.decor-sticky{
  position: sticky;
  top: 0;                 /* accroche en haut de la fenêtre */
  height: 0;              /* ne pousse pas la mise en page */
  z-index: 0;             /* couche neutre */
}

/* le visuel, réellement affiché en haut-droite */
.decor-sticky .decor-img{
  position: fixed;      /* était absolute */
  top: 0;
  right: 0;
  z-index: 2;           /* derrière le contenu, devant mur+footer */
  width: clamp(220px, 28vw, 500px);
  aspect-ratio: 1 / 1;
  background: url("design1.png") no-repeat top right / contain;
  pointer-events: none;
}

/* (optionnel) thème/contraste comme avant */
body.dark-mode .decor-sticky .decor-img{ opacity: .9; }
body.high-contrast .decor-sticky .decor-img{ opacity: 1; }

/* Masquer sur mobile si tu veux */
@media (max-width: 640px){
  .decor-sticky { display: none; }
}

/* Thèmes/contraste identiques aux autres */
body.dark-mode .decor-img-top,
body.dark-mode .decor-img-bottom { opacity: .9; }

body.high-contrast .decor-img-top,
body.high-contrast .decor-img-bottom { opacity: 1; }

/* Masquer sur mobile si besoin */
@media (max-width: 640px){
  .decor-sticky-top,
  .decor-sticky-bottom { display: none; }
}

/* === Décor sticky bas-gauche === */
.decor-bottom-left{
  position: sticky;
  top: 0;                 /* le conteneur reste “accroché” */
  height: 0;              /* ne prend pas de place */
  z-index: 0;
}

.decor-bottom-left .decor2-img{
  position: fixed;        /* collé à la fenêtre */
  left: 0;
  bottom: 0;
  z-index: 2;
  width: clamp(200px, 24vw, 420px);
  aspect-ratio: 1 / 1;
  background: url("design2.png") no-repeat bottom left / contain;
  pointer-events: none;   /* ne bloque pas les clics */
}

/* Accessibilité / thèmes */
body.dark-mode .decor-bottom-left .decor2-img{ opacity: .9; }
body.high-contrast .decor-bottom-left .decor2-img{ opacity: 1; }

/* Masquer sur mobile si tu veux */
@media (max-width: 640px){
  .decor-bottom-left { display: none; }
}

/* Tout ce qui doit passer DEVANT les décors */
#hero-carousel,
.masthead,
.recherche-code,
.slogan,
h3,
.actions,
#propositions-admin,
.section-sondages,
.double-form,
.formulaire,
#admin-panel,
#admin-overlay,
.events-hero,
.events-grid,
#events-empty,
.retour-accueil,
.programme-wrapper,
.programme-header-row,
.programme-accordeon {
  position: relative;
  z-index: var(--z-over);
}

/* Ce qui doit rester DERRIÈRE les décors */
.mur-contributions,
footer{
  position: relative;
  z-index: var(--z-under);
}

/* Modale admin par-dessus tout */
#admin-overlay{ z-index: var(--z-overlay); }
#admin-panel{ z-index: calc(var(--z-overlay) + 1); }

/* On coupe les anciens wrappers pour éviter tout conflit */
.decor-sticky, .decor-bottom-left { display: none !important; }

/* TOP-DROITE = design1.png */
body::before{
  content:"";
  position: fixed;
  top: 0;
  right: 0;
  width: clamp(220px, 28vw, 500px);
  aspect-ratio: 1 / 1;
  background: url("design1.png") no-repeat top right / contain;
  pointer-events: none;
  z-index: var(--z-decor);
}

/* BAS-GAUCHE = design2.png */
body::after{
  content:"";
  position: fixed;
  left: 0;
  bottom: 0;
  width: clamp(200px, 24vw, 420px);
  aspect-ratio: 1 / 1;
  background: url("design2.png") no-repeat bottom left / contain;
  pointer-events: none;
  z-index: var(--z-decor);
}

/* Accessibilité / thèmes */
body.dark-mode::before,
body.dark-mode::after{ opacity: .9; }
body.high-contrast::before,
body.high-contrast::after{ opacity: 1; }

/* Masquer sur mobile si tu veux */


/* Décor fixe haut-gauche = design3.png */
.decor-fixed{ position: fixed; pointer-events: none; }

.decor-top-left{
  top: 157px;
  left: 110px;
  width: clamp(180px, 22vw, 380px);
  aspect-ratio: 1 / 1;
  background: url("design3.png") no-repeat top left / contain;
  z-index: var(--z-bg);          /* 👈 passe sous la liste (0 < 1) */
}

/* Quand le carrousel est présent : on positionne avec --hero-stick */
body.has-hero::before{              /* design1 (haut-droite) */
  top: var(--hero-stick) !important;
}
body.has-hero .decor-top-left{      /* design3 (haut-gauche) */
  top: calc(var(--hero-stick) + 260px) !important; /* garde ton +260px */
}

/* Accessibilité / thèmes */
body.dark-mode .decor-top-left{ opacity: .9; }
body.high-contrast .decor-top-left{ opacity: 1; }

/* MOBILE : montrer design1 (haut-droite) & design2 (bas-gauche), cacher design3 (haut-gauche) */
@media (max-width: 640px){
  body::before,
  body::after{
    display: block !important;      /* réactive les 2 premiers décors */
  }
  .decor-top-left{
    display: none !important;       /* masque le 3e décor sur mobile */
  }

  /* Option : tailles un peu réduites pour ne pas charger l’écran */
  body::before{ width: clamp(160px, 40vw, 260px); }
  body::after{  width: clamp(140px, 36vw, 240px); }
}

/* Option: masquer sur mobile si tu veux */
@media (max-width: 640px){
  .decor-top-left{ display: none; }
}

/* ===== Overlay transition entre pages (bandes diagonales) ===== */
#page-transition{
  position: fixed;
  inset: 0;
  z-index: var(--transition-z);
  pointer-events: none;
  overflow: hidden;
  display: grid;
  place-items: center;
  opacity: 0;
}

/* 6 bandes arrondies, de largeurs variées, en diagonale */
#page-transition .band{
  position: absolute;
  left: 0;                    /* ancre X */
  height: var(--band-thick);
  width: var(--band-width);
  transform-origin: 0 0;      /* 👈 clé de l’invariance */
  transform: rotate(var(--band-rot)) translateX(var(--band-shift));
  will-change: transform;
  mix-blend-mode: normal;
  isolation: isolate;           /* pour gérer les overlays proprement */
  box-shadow: 0 8px 28px rgba(0,0,0,.15);
}

#page-transition .band::before,
#page-transition .band::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
}
#page-transition .band::before{ /* specular (lumière) */
  background: linear-gradient(90deg,
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,0) 35%,
    rgba(0,0,0,.10) 85%,
    rgba(0,0,0,0) 100%);
  mix-blend-mode: soft-light;
}
#page-transition .band::after{  /* ombre interne douce */
  box-shadow: inset 0 1px 10px rgba(0,0,0,.12), inset 0 -1px 10px rgba(0,0,0,.06);
}

/* Étalement vertical : on couvre AU-DELÀ du viewport */
#page-transition .b1{ background: var(--band-red);    top: calc((0 - var(--seam-index)) * var(--band-step)); }
#page-transition .b2{ background: var(--band-purple); top: calc((1 - var(--seam-index)) * var(--band-step)); }
#page-transition .b3{ background: var(--band-yellow); top: calc((2 - var(--seam-index)) * var(--band-step)); }
#page-transition .b4{ background: var(--band-green);  top: calc((3 - var(--seam-index)) * var(--band-step)); } /* = 0 → passe par le coin haut-gauche */
#page-transition .b5{ background: var(--band-purple); top: calc((4 - var(--seam-index)) * var(--band-step)); }
#page-transition .b6{ background: var(--band-red);    top: calc((5 - var(--seam-index)) * var(--band-step)); }

/* États */
#page-transition.is-entering,
#page-transition.is-leaving{
  opacity: 1;
  pointer-events: auto;
}

#page-transition.is-leaving .band{ filter: drop-shadow(0 8px 18px rgba(0,0,0,.18)); }
#page-transition.is-entering .band{ filter: drop-shadow(0 4px 12px rgba(0,0,0,.12)); }

@keyframes bandsCover{
  0%   { transform: rotate(var(--band-rot)) translateX(calc(-1 * var(--band-shift))); }
  70%  { transform: rotate(var(--band-rot)) translateX(-8%); }
  100% { transform: rotate(var(--band-rot)) translateX(0%); }
}

/* États */
#page-transition.is-entering .band{
  animation: bandsReveal 580ms cubic-bezier(.2,.8,.2,1) both;
}
#page-transition.is-entering .b2{ animation-delay: 40ms; }
#page-transition.is-entering .b3{ animation-delay: 80ms; }
#page-transition.is-entering .b4{ animation-delay: 120ms; }
#page-transition.is-entering .b5{ animation-delay: 160ms; }
#page-transition.is-entering .b6{ animation-delay: 200ms; }

/* Animation de sortie : on couvre la page (bandes rentrent depuis la droite) */
#page-transition.is-leaving .band{
  transform: rotate(var(--band-rot)) translateX(calc(-1 * var(--band-shift)));
  animation: bandsCover 520ms cubic-bezier(.2,.8,.2,1) both;
}
#page-transition.is-leaving .b2{ animation-delay: 30ms; }
#page-transition.is-leaving .b3{ animation-delay: 60ms; }
#page-transition.is-leaving .b4{ animation-delay: 90ms; }
#page-transition.is-leaving .b5{ animation-delay: 120ms; }
#page-transition.is-leaving .b6{ animation-delay: 150ms; }

/* Keyframes */
@keyframes bandsReveal{
  from{ transform: rotate(var(--band-rot)) translateX(0%); }
  to  { transform: rotate(var(--band-rot)) translateX(var(--band-shift)); }
}
@keyframes bandsCover{
  from{ transform: rotate(var(--band-rot)) translateX(calc(-1 * var(--band-shift))); }
  to  { transform: rotate(var(--band-rot)) translateX(0%); }
}

/* Thème sombre / contraste : on garde les couleurs franches */
body.dark-mode #page-transition .band,
body.high-contrast #page-transition .band{ mix-blend-mode: normal; }

@media (prefers-reduced-motion: reduce){
  #page-transition{ display: none !important; }
}

body::marker { content: none } /* évite des warnings Firefox */
body::view-transition-new(root){ /* no-op pour éviter conflits */

}

body::selection{ background: rgba(91,22,201,.15) } /* bonus */

body::before, body::after{ /* tu as déjà ces décors */
  /* rien à changer ici */
}

/* Calque grain */
body::backdrop{ content:"" } /* no-op */

#grain-overlay{
  position: fixed; inset: 0; pointer-events: none; z-index: 3;
  opacity: .018;      /* ajuste entre .012 et .025 */
  background:
    url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAQCAYAAAAQ6…') repeat; /* petit PNG bruit 64×64 encodé (remplace par le tien) */
  mix-blend-mode: multiply;
}

/* === Splash mobile plein écran (compatible Safari) === */
#mobile-splash{
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;   /* au lieu de inset */
  width: 100vw;
  height: 100vh;                           /* fallback */
  height: calc(var(--vh, 1vh) * 100);      /* fix iOS Safari */
  z-index: 5000;                           /* au-dessus de tout */
  display: grid;
  align-items: center;
  justify-items: center;                   /* place-items sans risque */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
  -webkit-tap-highlight-color: transparent;
  will-change: opacity, visibility;
}
#mobile-splash.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#mobile-splash img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* empêche le scroll derrière le splash (iOS ok) */
body.splash-open{ overflow: hidden; }

/* ===== HERO CAROUSEL ===== */
.hero-carousel {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  height: auto;                 /* ✨ hauteur auto */
  background: #000;             /* fond neutre derrière l'image */
}

.hero-track {
  width: 100%;
  display: flex;
  transform: translateX(0%);
  transition: transform 500ms ease-in-out;
}

.hero-slide {
  flex: 0 0 100%;
  position: relative;
}

.hero-slide img {
  width: 100%;
  height: auto;                 /* ✨ conserve les proportions */
  object-fit: contain;          /* ✨ montre l’image entière */
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Liseré doux en bas pour lire les points/commandes */
.hero-carousel::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%);
  pointer-events: none;
}

.hero-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  border: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1;
  padding: .5rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
  z-index: 2;
}
.hero-nav:hover { background: rgba(255,255,255,.95); }
.hero-nav:active { transform: translateY(-50%) scale(.98); }
.hero-nav.prev { left: .75rem; }
.hero-nav.next { right: .75rem; }

.hero-dots {
  position: absolute; left: 0; right: 0; bottom: .5rem;
  display: flex; gap: .4rem; justify-content: center; z-index: 2;
}
.hero-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.2);
  cursor: pointer;
}
.hero-dot[aria-selected="true"] { background: rgba(255,255,255,.95); }

/* Accessibilité : sombre & contraste élevé */
body.dark-mode .hero-nav { background: rgba(30,30,30,.75); color: #fff; }
body.dark-mode .hero-nav:hover { background: rgba(30,30,30,.95); }
body.high-contrast .hero-carousel,
body.high-contrast .hero-slide img {
  border: 2px solid #000 !important;
}
body.high-contrast .hero-nav {
  background: #f5f5f5 !important; border: 2px solid #000 !important; color: #000 !important;
}
body.high-contrast .hero-dot {
  background: #f5f5f5 !important; border: 2px solid #000 !important;
}
body.high-contrast .hero-dot[aria-selected="true"] { background: #000 !important; }

/* Mobile tweaks */
@media (max-width: 600px) {
  .hero-nav { font-size: 1.2rem; padding: .4rem .6rem; }
  .hero-carousel { height: clamp(150px, 28vw, 260px); }
}

/* --- Fix mobile : pas de bande noire, hauteur auto --- */
@media (max-width: 768px){
  .hero-carousel{
    height: auto !important;       /* ne force plus une hauteur */
    background: transparent !important; /* enlève le fond noir */
  }
  .hero-carousel::after{           /* enlève le liseré sombre */
    display: none !important;
  }
  .hero-slide img{
    width: 100%;
    height: auto;                  /* laisse l’image décider */
    object-fit: contain;           /* pas de recadrage */
    display: block;
  }
}

/* === Mise en page du header en 3 colonnes === */
.masthead {
  padding: 1.25rem 1rem 0.75rem;     /* un peu de respiration */
}

.mast-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* gauche / centre (logo) / droite */
  align-items: center;
  gap: 1rem;
}

.mast-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* colle bien à gauche */
  gap: .5rem;
}

.mast-logo {
  justify-self: center;
  width: clamp(180px, 22vw, 320px);
  height: auto;
}

/* La zone accessibilité n'est plus en absolu */
header .toggle-theme {
  position: static !important;
  margin: 0;
  justify-self: end;       /* colonne droite */
  display: inline-flex;
  gap: .5rem;
}

/* Les trois boutons à gauche (dans le flux) */
.mast-left .zone-admin,
.mast-left .bouton-sondage-fixe {
  position: static;
  margin: 0;
  display: inline-flex;
  gap: .5rem;
}

/* Responsive : on empile proprement */
@media (max-width: 768px) {
  .mast-grid {
    grid-template-columns: 1fr;  /* une seule colonne */
    gap: .75rem;
    text-align: center;
  }
  .mast-left { align-items: center; }
  header .toggle-theme { justify-self: center; }
}

/* Logo mobile : plus petit, jamais envahissant */
@media (max-width: 768px) {
  .mast-logo {
    width: clamp(140px, 48vw, 220px);
    height: auto;
  }
  /* on neutralise toute limite en vh qui pourrait s'appliquer ailleurs */
  header img { max-height: none; }
}

.main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100vh;
  padding: 1rem;
  flex: 1;
}

.formulaire form {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 400px;
}

.formulaire h2 {
  font-size: 1.2rem;
  color: #3f51b5;
  margin-bottom: 0.5rem;
}

.formulaire input[type="email"],
.formulaire input[type="password"] {
  padding: 0.8rem 1rem;
  font-size: 1rem;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  background: white;
  transition: border-color 0.3s, box-shadow 0.3s;
  width: 100%;
}

.formulaire input:focus {
  outline: none;
  border-color: #3f51b5;
  box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2);
}

.double-form {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.bloc-formulaire {
  flex: 1 1 300px;
  max-width: 400px;
}

@media screen and (max-width: 768px) {
  .double-form {
    flex-direction: column;
    align-items: center;
  }
}

.btn-inscription, .btn-connexion {
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

.btn-inscription:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.btn-connexion:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

a[href*="logout"] {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: #d32f2f;
  color: white;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  transition: background 0.3s, transform 0.2s;
}

a[href*="logout"]:hover {
  background: #b71c1c;
  transform: scale(1.03);
}

@media screen and (max-width: 768px) {
  .formulaire form {
    width: 100%;
    max-width: 90%;
  }
}

.message-remerciement h2 {
  margin-top: 1rem;
}

.contributions-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  margin-top: 2rem;
}

.contribution-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid #ccc;
  box-shadow: 0 6px 12px rgba(0,0,0,0.05);
  max-width: 700px;
  width: 100%;
  transition: transform 0.2s;
}

.contribution-card:hover {
  transform: scale(1.01);
}

.contribution-meta p {
  margin: 0.3rem 0;
  font-size: 0.95rem;
  color: #444;
}

.contribution-meta .emoji {
  margin-right: 0.5rem;
}

.contribution-text {
  margin-top: 1rem;
  padding: 1rem;
  font-style: italic;
  background: #f5f7fb;
  border-left: 4px solid #3f51b5;
  border-radius: 8px;
}

.contribution-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.btn-modifier, .btn-supprimer {
  margin-top: 0.8rem;
  width: 100%;
  display: inline-block;
  text-align: center;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  text-decoration: none;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

.btn-modifier {
  background: #3f51b5;
}

.btn-modifier:hover {
  background: #313f90;
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.btn-supprimer {
  background: #d32f2f;
}

.btn-supprimer:hover {
  background: #a92525;
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.formulaire .btns-mdp {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  width: 100%;
}

.btn-lienmdp, .btn-retour {
  flex: 1;
  text-align: center;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  text-decoration: none;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-lienmdp {
  background: #3f51b5;
}

.btn-retour {
  background: #d32f2f;
}

.btn-lienmdp:hover {
  background: #303f9f;
  transform: scale(1.03);
}

.btn-retour:hover {
  background: #a92525;
  transform: scale(1.03);
}

#form-mdp-oublie {
  min-width: 500px;
}

.btn-reinit {
  flex: 1;
  text-align: center;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  text-decoration: none;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-reinit {
  background: #3f51b5;
}

.btn-reinit:hover {
  background: #303f9f;
  transform: scale(1.03);
}

.zone-admin,
.bouton-sondage-fixe {
  position: static;      /* ✨ plus d’absolu au dessus du carrousel */
  margin: .25rem 1rem;   /* petit espace */
  display: inline-flex;
  gap: .5rem;
}

.zone-admin button {
  padding: 0.6rem 1rem;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  color: #111;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.btn-moncompte {
  font-size: 85%;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  color: #111;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.zone-admin button:hover {
  background-color: #d32f2f;
  color: white;
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.btn-moncompte:hover {
  background-color: #303f9f;
  color: white;
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.btn-sondage-lien {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border-radius: 10px;
  font-weight: bold;
  color: #111;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.btn-sondage-lien:hover {
  background-color: #47a14a;
  color: white;
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

#admin-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: 2px solid #3f51b5;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  z-index: 1001;
  width: 90%;
  max-width: 326px;
  overflow: visible; /* important pour que le bouton dépasse si besoin */
}

/* Bouton de fermeture en haut à droite */
#admin-panel .btn-fermer-panel {
  z-index: 100;
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: #d32f2f;
  color: white;
  border: none;
  border-radius: 50%;
  width: 39px;
  height: 39px;
  line-height: 22px;
  text-align: center;
  font-weight: bold;
  font-size: 0.7rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#admin-panel .btn-fermer-panel:hover {
  background: #b71c1c;
}

#admin-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1000;
}

.admin-hidden {
  display: none;
}

#admin-panel input {
  padding: 0.5rem;
  width: 162px;
  margin-right: 0.5rem;
  font-size: 1rem;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  background: white;
  transition: border-color 0.3s, box-shadow 0.3s;
}

#admin-panel input:focus {
  outline: none;
  border-color: #3f51b5;
  box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2);
}

#admin-panel button {
  color: white;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: background-color 0.3s;
  background-color: #47a14a;
}

.admin-hidden {
  display: none;
}

.admin-inputs {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

#btn-valider {
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  background-color: #378339;
}

#btn-valider:hover {
  background-color: #28622b;
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

#admin-panel .btn-deconnexion {
  margin-top: 0.8rem;
  background-color: #d32f2f;
  width: 100%;
  display: inline-block;
  text-align: center;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  border: none;
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

#admin-panel .btn-deconnexion:hover {
  background-color: #b72929;
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

#admin-panel .btn-print {
  margin-top: 0.8rem;
  background-color: #3f51b5;
  width: 100%;
  display: inline-block;
  text-align: center;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  border: none;
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

#admin-panel .btn-print:hover {
  background-color: #303f9f;
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

#admin-panel .btn-csv {
  margin-top: 0.8rem;
  background-color: #3f51b5;
  width: 100%;
  display: inline-block;
  text-align: center;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  border: none;
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

#admin-panel .btn-csv:hover {
  background-color: #303f9f;
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

#admin-pdf-download {
  display: none;
}

#admin-pdf-download select {
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-family: 'Montserrat', sans-serif;
  background: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: border-color 0.3s, box-shadow 0.3s;
}

#admin-pdf-download select:focus {
  outline: none;
  border-color: #3f51b5;
  box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2);
}

#propositions-admin {
  margin: 2rem auto;
  max-width: 900px;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  text-align: left;
}

.bloc-theme h2 {
  font-size: 1.2rem;
  color: #3f51b5;
  margin-bottom: 0.5rem;
}

.bloc-theme p {
  background: #f0f0f5;
  padding: 0.6rem;
  border-radius: 8px;
  margin: 0.4rem 0;
  line-height: 1.5;
}

.aucune-proposition {
  background-color: #fff9c4;
  color: #795548;
  border-left: 5px solid #fbc02d;
  border-radius: 8px;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

#admin-nouveau-sondage {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  margin-top: 2rem;
}

#admin-nouveau-sondage h3 {
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
  color: #333;
  font-weight: 600;
}

#admin-nouveau-sondage input[type="text"] {
  padding: 0.5rem 1rem;
  min-width: 242px;
  margin-bottom: 1rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  cursor: not-allowed;
  opacity: 0.5;
  border-radius: 8px;
  margin-right: 0px;
}

#admin-nouveau-sondage .btn-sondage {
  margin-top: 0.8rem;
  background-color: #378339;
  width: 100%;
  display: inline-block;
  text-align: center;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  border: none;
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

#admin-nouveau-sondage .btn-sondage:hover {
  background-color: #28622b;
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

#admin-suppression-sondage {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  margin-top: 2rem;
}

#admin-suppression-sondage h3 {
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
  color: #333;
  font-weight: 600;
}

#liste-sondages {
  padding: 0.5rem 1rem;
  min-width: 100%;
  margin-bottom: 1rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  cursor: not-allowed;
  opacity: 0.5;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: border-color 0.3s, box-shadow 0.3s;
}

#liste-sondages:focus {
  outline: none;
  border-color: #3f51b5;
  box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2);
}

#admin-suppression-sondage .btn-supprimer {
  width: 100%;
  padding: 0.6rem 1rem;
  background-color: #d32f2f;
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: bold;
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

#admin-suppression-sondage .btn-supprimer:hover {
  background-color: #a92525;
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

body {
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(135deg, #f0f0f5, #fafafa);
    color: #111;
    text-align: center;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

header {
    padding: 2rem 1rem 1rem;
    animation: fadeInUp 1.2s ease-out forwards;
    opacity: 0;
}

header img {
    max-height: 14vh;
    width: auto;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}

h1 {
    font-size: calc(1.6rem + 1vw);
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    margin: 0.5rem 0;
    opacity: 0;
    animation: fadeIn 1s ease-out 1s forwards;
}

a:focus, button:focus, input:focus, textarea:focus {
  outline: 3px solid #3f51b5;
  outline-offset: 2px;
}

h3 {
  font-size: 1rem;
  margin: 0.2rem 0 1.5rem;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  opacity: 0;
  animation: fadeIn 1s ease-out 1.4s forwards;
}

.slogan {
    font-size: calc(0.8rem + 0.5vw);
    margin: 0.2rem 0;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    opacity: 0;
    animation: fadeIn 1s ease-out 1.4s forwards;
}

/* Grille des actions : mieux pour Safari */
.actions{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* un poil plus large, au besoin remets 180px */
  grid-auto-rows: 1fr;             /* chaque rangée a la même hauteur de base */
  align-items: stretch;             /* étire les items pour remplir la cellule */
  gap: 0.5rem;
  padding: 0.2rem 1rem;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeIn 1s ease-out 1.8s forwards;
}

.actions a{
  /* height: 100%;  <-- ❌ à supprimer */
  height: auto;                     /* ✔ */
  min-height: 64px;                 /* un minimum confortable */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.68rem;
  text-align: center;
  text-decoration: none;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)); /* ✔ prefix Safari */
  backdrop-filter: blur(var(--glass-blur));
  color: #111;
  border-radius: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.actions a:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.actions a, .btn-moncompte, .zone-admin button, .btn-sondage-lien{
  position: relative; overflow: hidden;
}
.actions a::after{
  content:"";
  position:absolute; inset:-120% -30%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%);
  transform: translateX(-60%);
  transition: transform .6s ease;
}
.actions a:hover::after{
  transform: translateX(60%);
}

/* ===== Réseaux sociaux sous les boutons ===== */
.social-links{
  display: inline-flex;
  gap: .5rem;
  margin-top: .25rem;
  flex-wrap: wrap;
}

.social-links .social{
  width: 63px;
  height: 63px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  color: #111; /* les SVG héritent via currentColor */
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  text-decoration: none;
}

.social-links .social svg{
  width: 35px;
  height: 35px;
  fill: currentColor;
  display: block;
}

.social-links .social:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.35);
}

/* Responsive: centré quand la grille passe en 1 colonne */
@media (max-width: 768px){
  .mast-left { align-items: center; }
  .social-links { justify-content: center; }
}

/* Thème sombre */
body.dark-mode .social-links .social{
  color: #fff !important;
  border-color: #333 !important;
  box-shadow: 0 4px 10px rgba(255,255,255,0.05);
}

/* Contraste élevé */
body.high-contrast .social-links .social{
  background: #f5f5f5 !important;
  color: #111 !important;
  border: 2px solid #000 !important;
  box-shadow: none !important;
}

footer {
    background-color: #f8f8f8;
    font-size: 0.8rem;
    padding: 0.5rem;
    opacity: 0;
    animation: fadeIn 1s ease-out 3.5s forwards;
}

@keyframes fadeInUp {
    from {
    transform: translateY(40px);
    opacity: 0;
    }
    to {
    transform: translateY(0);
    opacity: 1;
    }
}

@keyframes fadeIn {
    to {
    opacity: 1;
    }
}

@keyframes slideIn {
    to {
    transform: translateX(0);
    }
}

@media (max-width: 600px) {
    h1 {
    font-size: 1.8rem;
    }
    .slogan {
    font-size: calc(1.1rem + 0.5vw);
    }
}

.toggle-theme {
  top: 1rem;
  right: 1rem;
  z-index: 1000;
}

.toggle-theme button {
    padding: 0.68rem;
    text-decoration: none;
    color: #111;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.toggle-theme button:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.toggle-theme button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

body.dark-mode {
  background: #121212 !important;
  color: #ffffff !important;
}

body.dark-mode #propositions-admin,
body.dark-mode #section-sondages {
  background: #171717 !important;
  border-color: #202020 !important;
  color: #ffffff !important;
}

body.dark-mode #admin-panel,
body.dark-mode .aucune-proposition,
body.dark-mode .bloc-theme p,
body.dark-mode .contribution-card,
body.dark-mode .sondage,
body.dark-mode .sondage .resultats,
body.dark-mode .mur-contributions {
  background: #222222 !important;
  border-color: #1e1e1e !important;
  color: #ffffff !important;
}

body.dark-mode #admin-nouveau-sondage,
body.dark-mode #admin-suppression-sondage,
body.dark-mode .mur-contributions .mur-liste .bloc-proposition {
  background: #272727 !important;
  border-color: #202020 !important;
  color: #ffffff !important;
}

body.dark-mode .bloc-theme h2,
body.dark-mode .contribution-meta p,
body.dark-mode .formulaire h2,
body.dark-mode #admin-nouveau-sondage h3,
body.dark-mode #admin-suppression-sondage h3,
body.dark-mode #section-sondages h2,
body.dark-mode .mur-contributions .mur-liste .bloc-proposition blockquote {
  color: #ffffff !important;
}

body.dark-mode header img {
  filter: drop-shadow(0 2px 6px rgba(255, 255, 255, 0.2)) !important;
}

body.dark-mode .actions a,
body.dark-mode .toggle-theme button,
body.dark-mode .formulaire textarea,
body.dark-mode .recherche-code input[type="text"],
body.dark-mode .code-personnel,
body.dark-mode .message-remerciement,
body.dark-mode .retour-accueil a,
body.dark-mode .zone-admin button,
body.dark-mode #admin-panel .admin-inputs input,
body.dark-mode #admin-panel button,
body.dark-mode .impression-zone button,
body.dark-mode button[type="submit"],
body.dark-mode button[name="supprimer"],
body.dark-mode .btn-modifier,
body.dark-mode .btn-supprimer,
body.dark-mode a,
body.dark-mode .contribution-text,
body.dark-mode .formulaire form,
body.dark-mode .formulaire input,
body.dark-mode .sondage button,
body.dark-mode .mur-contributions button {
  background-color: #1e1e1e !important;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  color: #ffffff !important;
  border-color: #333 !important;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.05);
}

body.dark-mode #admin-pdf-download select,
body.dark-mode #admin-suppression-sondage select,
body.dark-mode .formulaire select {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
  border: 1px solid #333 !important;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.05);
}

body.dark-mode .recherche-code input::placeholder,
body.dark-mode textarea::placeholder,
body.dark-mode #admin-panel .admin-inputs input::placeholder,
body.dark-mode .formulaire input::placeholder {
  color: #cccccc;
}

body.dark-mode footer {
  background-color: #1a1a1a;
  color: #ffffff;
}

body.dark-mode .retour-accueil a svg {
  fill: white !important;
}

body.high-contrast {
  background-color: #ffffff !important;
  color: #111111 !important;
}

body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast h5,
body.high-contrast h6,
body.high-contrast p,
body.high-contrast span,
body.high-contrast a,
body.high-contrast .slogan,
body.high-contrast .message-remerciement,
body.high-contrast .code-personnel {
  color: #111 !important;
}

body.high-contrast .actions a,
body.high-contrast .toggle-theme button,
body.high-contrast .formulaire textarea,
body.high-contrast .recherche-code input[type="text"],
body.high-contrast .code-personnel,
body.high-contrast .message-remerciement,
body.high-contrast .retour-accueil a,
body.high-contrast .zone-admin button,
body.high-contrast #admin-panel .admin-inputs input,
body.high-contrast #admin-panel button,
body.high-contrast .impression-zone button,
body.high-contrast #propositions-admin,
body.high-contrast #propositions-admin p,
body.high-contrast button[type="submit"],
body.high-contrast button[name="supprimer"],
body.high-contrast .btn-modifier,
body.high-contrast .btn-supprimer,
body.high-contrast a,
body.high-contrast .contribution-text,
body.high-contrast .formulaire form,
body.high-contrast .formulaire input,
body.high-contrast #admin-nouveau-sondage,
body.high-contrast #admin-suppression-sondage,
body.high-contrast #section-sondages,
body.high-contrast .sondage,
body.high-contrast .sondage button,
body.high-contrast .barre-sondage,
body.high-contrast .mur-contributions button,
body.high-contrast .mur-contributions,
body.high-contrast .mur-contributions .mur-liste .bloc-proposition {
  background-color: #f5f5f5 !important;
  color: #111 !important;
  border: 2px solid #000 !important;
}

body.high-contrast .mur-contributions .mur-liste .bloc-proposition hr {
  background-color: #f5f5f5 !important;
  color: #111 !important;
  border: 1px solid #000 !important;
}

body.high-contrast #admin-pdf-download select,
body.high-contrast #admin-suppression-sondage select,
body.high-contrast .formulaire select {
  background-color: #f5f5f5 !important;
  color: #111 !important;
  border: 2px solid #000 !important;
}

body.high-contrast ::placeholder {
  color: #555 !important;
}

body.high-contrast svg {
  fill: #111 !important;
  stroke: #111 !important;
}

.recherche-code {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
  animation: fadeIn 1s ease-out 1.1s forwards;
  opacity: 0;
}

.recherche-code form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.recherche-code input[type="text"] {
  padding: 0.6rem 1rem;
  font-size: 1rem;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-family: 'Montserrat', sans-serif;
  min-width: 270px;
  max-width: 400px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  background: white;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.recherche-code input[type="text"]:focus {
  outline: none;
  border-color: #3f51b5;
  box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2);
}

.recherche-code button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  background-color: #3f51b5;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  transition: background-color 0.3s, transform 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.recherche-code button svg {
  fill: white;
}

.recherche-code button:hover {
  background-color: #303f9f;
  transform: translateY(-1px);
}

.formulaire {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
  padding: 0.5rem;
}

.formulaire select {
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-family: 'Montserrat', sans-serif;
  background: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.formulaire select:focus {
  outline: none;
  border-color: #3f51b5;
  box-shadow: 0 0 0 2px rgba(63, 81, 181, 0.2);
}

textarea {
  width: 600px;
  max-width: 600px;
  height: 200px;
  box-sizing: border-box;
  padding: 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.formulaire textarea,
.formulaire input,
.formulaire select { max-width: 100%; }

button[type="submit"] {
  background-color: #3f51b5;
  color: white;
  padding: 0.68rem;
  text-decoration: none;
  backdrop-filter: blur(var(--glass-blur));
  border-radius: 12px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

button[type="submit"]:hover {
  background-color: #303f9f;
}

.admin-propo-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}

.btn-toggle-public{
  min-width: 120px;
  padding: .4rem .8rem;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transition: transform .08s ease, background .2s ease, color .2s ease;
  background:#fff;
  border:1px solid #ccc;
}
.btn-toggle-public:hover{ transform: translateY(-1px); }

.btn-toggle-public.is-public{
  background: #1b5e20;     /* vert foncé */
  color: #fff;
  border-color: #1b5e20;
}
.btn-toggle-public:not(.is-public){
  background: #b71c1c;     /* rouge foncé */
  color: #fff;
  border-color: #b71c1c;
}

/* Accessibilité */
body.high-contrast .btn-toggle-public{
  background:#f5f5f5 !important;
  color:#111 !important;
  border:2px solid #000 !important;
}

.section-sondages {
  background: #f5f7fb;
  padding: 2rem;
  border-radius: 12px;
  margin: 2rem auto;
  max-width: 700px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.section-sondages h2 {
  font-size: 1.4rem;
  color: #3f51b5;
  margin-bottom: 1rem;
}

.sondage {
  background: white;
  border-left: 4px solid #3f51b5;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.sondage p {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.8rem;
}

.sondage button {
  margin-right: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  background: #3f51b5;
  color: white;
  transition: background 0.3s ease;
}

.sondage button:hover {
  background: #303f9f;
}

.btn-supprimer-vote {
  background-color: #d32f2f;
  color: white;
  padding: 0.4rem 1rem;
  border-radius: 10px;
  border: none;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn-supprimer-vote:hover {
  background-color: #a92525;
}

.resultats {
  margin-top: 0.6rem;
  font-style: italic;
  color: #444;
}

.barre-sondage {
  width: 100%;
  height: 16px;
  display: flex;
  margin-top: 8px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ccc;
}

.barre-oui {
  background-color: #4caf50; /* vert */
  height: 100%;
  transition: width 0.5s ease-in-out;
}

.barre-non {
  background-color: #f44336; /* rouge */
  height: 100%;
  transition: width 0.5s ease-in-out;
}

.message-remerciement {
  margin: 1rem auto;
  padding: 1rem 1.5rem;
  max-width: 600px;
  background-color: #e6ffe6;
  color: #2e7d32;
  border-left: 5px solid #4caf50;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  animation: fadeIn 0.6s ease-out;
}

.retour-accueil {
  text-align: left;
  margin: 1rem 2rem 0;
  animation: fadeIn 1s ease-out 1.2s forwards;
  opacity: 0;
}

.retour-accueil a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-size: 1rem;
  color: #3f51b5;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.7);
  padding: 0.5rem 1rem;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background 0.3s, transform 0.3s;
}

.retour-accueil a:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(-3px);
}

.retour-accueil svg {
  display: inline-block;
  vertical-align: middle;
}

.code-personnel {
  margin: 1rem auto;
  padding: 1rem;
  background: #fff3cd;
  color: #856404;
  border-left: 5px solid #ffc107;
  border-radius: 8px;
  max-width: 600px;
  font-size: 0.95rem;
  font-weight: 500;
  animation: fadeIn 0.6s ease-out;
}

button[type="submit"][name="supprimer"] {
  background-color: #c62828; /* contraste renforcé */
  color: #fff;
  padding: 0.68rem;
  text-decoration: none;
  backdrop-filter: blur(var(--glass-blur));
  border-radius: 12px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

button[type="submit"][name="supprimer"]:hover {
  background-color: #b71c1c;
}

.impression-zone {
  text-align: center;
}

.impression-zone button {
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  background-color: #1b5e20; /* ✔ Vert très foncé */
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(var(--glass-blur));
  border-radius: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.impression-zone button:hover {
  background-color: #0d3b13; /* encore plus foncé au survol */
}

.mur-contributions {
  margin-top: 2rem;
  padding: 1rem;
  background: #f5f7fb;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.mur-contributions #mur-mobilite {
  margin-top: 1rem;
}

.bloc-proposition {
  padding: 1rem;
  margin: 1rem;
  background: #ffffff;
  border-left: 4px solid #3f51b5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

blockquote {
  font-style: italic;
  margin: 0.5rem 0;
  color: #333;
}

.mur-contributions .mur-liste .bloc-proposition blockquote {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;   /* pas d'ellipsis */
  word-break: break-word;
  text-align: left;
}

.mur-contributions .mur-liste .bloc-proposition blockquote p {
  margin: .25rem 0;      /* petites lignes pour chaque Q/R */
}

.btn-push {
  margin-top: 1rem;
  background-color: #47a14a;
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

.btn-push:hover {
  background-color: #347933;
}

/* Cacher les éléments inutiles à l’impression */
@media print {
  .retour-accueil,
  form,
  footer,
  .impression-zone,
  .message-remerciement {
    display: none !important;
  }

  .slogan, h1 {
    margin-top: 2rem;
  }

  textarea {
    all: unset;
    display: block;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    margin-top: 1rem;
    border: 1px solid #ccc;
    padding: 1rem;
    border-radius: 8px;
    background: #f9f9f9;
  }
}

@media screen and (max-width: 768px) {
  header {
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  header img {
    max-width: 80%;
    height: auto;
  }

  .toggle-theme {
    position: static;
    margin-top: 0.5rem;
  }

  .recherche-code {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .recherche-code input[type="text"] {
    width: 90%;
    max-width: none;
  }

  .recherche-code button {
    width: 90%;
    justify-content: center;
  }

  .actions {
    grid-template-columns: 1fr;
    max-height: none;
  }

  .actions a {
    padding: 1rem;
    font-size: 1rem;
  }

  .formulaire {
    width: 100%;
    padding: 1rem;
  }

  .formulaire textarea {
    width: 100% !important;
    font-size: 1rem;
  }

  button[type="submit"] {
    width: 100%;
    font-size: 1rem;
  }

  .retour-accueil {
    margin: 1rem;
    text-align: center;
  }

  .retour-accueil a {
    justify-content: center;
    width: 100%;
    font-size: 1rem;
    padding: 0.5rem;
  }

  .code-personnel,
  .message-remerciement {
    width: 90%;
    font-size: 1rem;
  }

  .impression-zone button {
    width: 90%;
    font-size: 1rem;
    margin: 1rem auto;
  }

  footer {
    font-size: 0.9rem;
    padding: 1rem;
    text-align: center;
  }

  h1 {
    font-size: 1.4rem;
  }

  .slogan {
    font-size: calc(1.1rem + 0.5vw);;
    padding: 0 1rem;
  }
}

@media screen and (max-width: 768px) {
  .zone-admin,
  .bouton-sondage-fixe {
    position: static;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: -7px;
    z-index: initial;
  }

  .zone-admin a,
  .zone-admin button,
  .bouton-sondage-fixe a {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

@media screen and (max-width: 600px) {
  #admin-panel {
    width: 95%;
    max-width: 320px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1rem;
    font-size: 0.95rem;
  }

  .btn-fermer-panel {
    display: block;
    background-color: #d32f2f;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    width: 100%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    text-align: center;
  }

  .btn-fermer-panel:hover {
    background-color: #b71c1c;
  }
}

@media screen and (max-width: 600px) {
  .sondage {
    display: flex;
    flex-direction: column;
  }

  .sondage .btn-non {
    margin-top: 0.8rem;
    display: block;
  }
  
  .sondage .btn-supprimer-vote {
    margin-top: 0.8rem;
    display: block;
  }
}

@media screen and (max-width: 768px) {
  .double-form {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

  .double-form .bloc-formulaire {
    width: 90%;
    max-width: 500px;
  }
}

@media screen and (max-width: 600px) {
  .double-form {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1.5rem !important;
    width: 100% !important;
    padding: 0 1rem;
  }

  .double-form .bloc-formulaire {
    width: 95% !important;
    max-width: none !important;
  }

  .formulaire form {
    width: 100% !important;
    max-width: none !important;
  }

  .formulaire input,
  .formulaire button {
    font-size: 1rem !important;
  }
}

/* ========= Q/R dans la page compte ========= */
/* Bloc texte libre (inchangé) */
.contribution-text {
  margin-top: 1rem;
  padding: 1rem;
  font-style: italic;
  background: #f5f7fb;
  border-left: 4px solid #3f51b5;
  border-radius: 8px;
  text-align: left;        /* assure l'alignement du contenu */
}

/* Bloc Q/R : neutre, pas d'indentation parasite */
.contribution-qa {
  margin-top: 1rem;
  padding: 0;              /* IMPORTANT: pas de padding qui décale */
  background: transparent; /* pas de fond ici, c'est chaque carte qui en a */
  border: none;            /* pas de bord gauche bleu ici */
}

/* Liste des Q/R */
.qa-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
}

/* Carte Q/R */
.qa-item {
  border: 1px solid #e6e6ef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.qa-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* En-tête Q/R */
.qa-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1rem .2rem 1rem;
}
.qa-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  background: #3f51b5;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(63,81,181,0.25);
}
.qa-q {
  margin: 0;              /* empêche un “saut” vertical */
  font-size: 1rem;
  font-weight: 700;
  color: #2c2c34;
}

/* Réponse */
.qa-a {
  margin: .4rem 1rem 1rem 1rem;
  padding: .8rem 1rem;
  background: #f5f7fb;
  border-left: 4px solid #3f51b5;
  border-radius: 8px;
  color: #333;
  text-align: left;
}

.qa-a { font-style: normal; }  /* empêche d'hériter de l’italique */

/* Responsive */
@media (max-width: 640px) {
  .qa-header { grid-template-columns: 28px 1fr; gap: .5rem; }
  .qa-q { font-size: .95rem; }
  .qa-a { font-size: .95rem; }
}

/* Modes accessibilité */
body.dark-mode .contribution-qa { background: transparent !important; }
body.dark-mode .qa-item { background: #222 !important; border-color: #1e1e1e !important; }
body.dark-mode .qa-q, body.dark-mode .qa-a { color: #fff !important; }
body.dark-mode .qa-a { background: #1e1e1e !important; border-left-color: #6f83ff !important; }
body.dark-mode .qa-num { background: #6f83ff !important; box-shadow: 0 2px 6px rgba(111,131,255,0.25); }

body.high-contrast .qa-item,
body.high-contrast .qa-a {
  background: #f5f5f5 !important;
  color: #111 !important;
  border: 2px solid #000 !important;
  box-shadow: none !important;
}
body.high-contrast .qa-num { background: #000 !important; color: #fff !important; box-shadow: none !important; }
body.high-contrast .qa-a { border-left: 6px solid #000 !important; }

/* === Réglage d’opacité commun aux décors (utile pour dark/contrast) === */
:root { --decor-alpha: 1; }
body.dark-mode { --decor-alpha: .9; }
body.high-contrast { --decor-alpha: 1; }

/* === Animation “balayage vers le haut” pour les décors === */
@keyframes decorSweepUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: var(--decor-alpha, 1); }
}

/* État initial + animation (stagger légère) */
body::before,
body::after,
.decor-top-left{
  will-change: transform, opacity;
  /* on part masqué, puis on révèle via l’anim */
  opacity: 0;
  transform: translateY(40px);
}

/* design1 (haut-droite) */
body::before{
  animation: decorSweepUp .8s ease-out .6s forwards;
}

/* design2 (bas-gauche) */
body::after{
  animation: decorSweepUp .8s ease-out .75s forwards;
}

/* design3 (haut-gauche) – caché sur mobile par tes règles existantes */
.decor-top-left{
  animation: decorSweepUp .8s ease-out .9s forwards;
}

/* Accessibilité : si l’utilisateur préfère moins d’animations */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .decor-top-left{
    animation: none !important;
    opacity: var(--decor-alpha, 1) !important;
    transform: none !important;
  }
}

/* ====== Styles compacts pour la page évènements ====== */
.events-hero {
    padding: clamp(16px, 3vw, 32px) 0 0;
    text-align: center;
}

.events-hero h1 {
    margin: 0 0 .5rem;
}

.events-hero p {
    opacity: .85;
    margin: 0;
}

.events-grid {
    display: grid;
    gap: clamp(14px, 2vw, 18px);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    padding: clamp(16px, 3vw, 28px) clamp(18px, 4vw, 40px); /* ⬅ nouveau */
}

.event-card {
    background: var(--card-bg, #fff);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .12s ease, box-shadow .12s ease;
    cursor: pointer;
}

.event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.event-cover {
    aspect-ratio: 16/9;
    width: 100%;
    object-fit: cover;
    display: block;
    background: #eee;
}

.event-body {
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-title {
    font-weight: 700;
    line-height: 1.25;
}

.event-meta {
    font-size: .95rem;
    opacity: .9;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, .06);
    padding: 6px 10px;
    border-radius: 999px;
    white-space: normal;
    /* ✔ autorise les retours à la ligne */
    max-width: 100%;
    overflow-wrap: anywhere;
    /* ✔ coupe si vraiment très long */
}

/* Centre les infos dans chaque carte d'évènement */
.event-meta {
    justify-content: center;
    /* centre le groupe de "pills" */
    text-align: center;
    /* centre le texte à l'intérieur */
}

.event-card .pill {
    justify-content: center;
    /* contenu centré dans chaque pill */
}

.event-cta {
    margin-top: auto;
    padding: 0 14px 14px;
    display: flex;
    justify-content: flex-end;
}

.event-cta button {
    border: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--accent, #2e7d32);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

/* ==== Modal ==== */
.modal-wrap {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-overlay);
    /* ✔ toujours AU-DESSUS du reste (1000) */
}

.modal-wrap.show {
    display: flex;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 0;
    /* ✔ fond, mais dans la même “couche” que la modale */
}

.modal {
    position: relative;
    z-index: 1;
    /* ✔ passe au-dessus du backdrop, mais l’ensemble
            est déjà au-dessus du site grâce à .modal-wrap */
    width: min(920px, 92vw);
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .25);
    animation: pop .12s ease;
}

@keyframes pop {
    from {
        transform: scale(.98);
        opacity: .9
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.modal header {
    position: relative;
}

.modal header img {
    width: 100%;
    height: auto;
    /* garde le bon ratio */
    max-height: 60vh;
    /* limite quand même la hauteur si besoin */
    object-fit: contain;
    /* pas de recadrage */
    background: transparent;
    /* ✔ plus de bandes noires */
    display: block;
    margin: 0 auto;
}

.modal .close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    border: 0;
    cursor: pointer;
}

.modal .content {
    padding: 16px;
    display: grid;
    gap: 10px;
}

.modal h2 {
    margin: 0 0 4px;
}

.modal .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    opacity: .9;
    justify-content: center;
    /* ✔ centre horizontalement */
    text-align: center;
    /* ✔ texte centré dans chaque pill */
}

.modal .desc {
    white-space: pre-wrap;
    line-height: 1.45;
}

.modal .actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 16px 16px;
}

.modal .actions a {
    text-decoration: none;
    background: #1877f2;
    color: #fff;
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 700;
}

/* vide / fallback */
.events-empty {
    text-align: center;
    padding: 32px 0;
    opacity: .85;
}

/* Ligne date/heure dans la carte évènement */
.event-card-date {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.3;
  white-space: normal;      /* autorise le retour à la ligne */
}

.event-card-date-icon {
  flex: 0 0 auto;
}

.event-card-date-text {
  flex: 1 1 auto;
  min-width: 0;
}

.btn-events{
  display:inline-block;
  margin-top:12px;
  padding:10px 12px;
  background:#2e7d32; color:#fff; font-weight:600;
  border-radius:10px; text-decoration:none;

  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}
.btn-events:hover{
  filter:brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(67, 181, 63, 0.35);
}

.btn-events:active {
    transform: translateY(0);
    box-shadow: 0 6px 18px rgba(67, 181, 63, 0.35);
}

/* Dark mode friendly (si tu as déjà .dark-mode) */
body.dark-mode .event-card {
    --card-bg: #1e1f24;
}

body.dark-mode .pill {
    background: rgba(255, 255, 255, .1);
}

body.dark-mode .modal {
    background: #1e1f24;
    color: #fff;
}

body.dark-mode .modal .close {
    background: rgba(255, 255, 255, .2);
}

/* ==== Cartographie portes-à-portes (ppa_metz.php) ==== */

.ppa-wrapper {
  margin: 2rem auto;
  max-width: 1200px;
  padding: 1rem;
  background: rgba(255,255,255,0.85);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.ppa-help {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.ppa-help code {
  background: #f3f4ff;
  padding: 0.1rem 0.3rem;
  border-radius: 6px;
}

.ppa-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.ppa-map-container {
  flex: 2 1 400px;
  min-width: 320px;
}

.ppa-map {
  width: 100%;
  height: 60vh;
  min-height: 350px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.ppa-side {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ppa-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ppa-form input[type="text"] {
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.ppa-form button {
  background-color: #3f51b5;
  color: white;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background 0.2s, transform 0.1s;
}

.ppa-form button:hover {
  background-color: #303f9f;
  transform: translateY(-1px);
}

.ppa-feedback {
  font-size: 0.9rem;
  min-height: 1.2rem;
}

.ppa-feedback-error {
  color: #c62828;
}

.ppa-feedback-success {
  color: #2e7d32;
}

.ppa-legend {
  font-size: 0.9rem;
  background: #f5f7fb;
  border-left: 4px solid #3f51b5;
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
}

.ppa-list-container h2 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.ppa-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
}

.ppa-list li {
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.ppa-list li:last-child {
  border-bottom: none;
}

.ppa-list li:hover {
  background: #f1f3ff;
}

/* Overlay de verrouillage admin */

.ppa-lock-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.ppa-lock-modal {
  background: #ffffff;
  padding: 1.5rem 2rem;
  border-radius: 16px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

.ppa-lock-modal h2 {
  margin-top: 0;
}

.ppa-lock-modal form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.ppa-lock-modal input[type="password"] {
  padding: 0.6rem 1rem;
  border-radius: 10px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

.ppa-lock-modal button {
  margin-top: 0.4rem;
  background-color: #3f51b5;
  color: #fff;
  border-radius: 10px;
  border: none;
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-weight: 600;
}

.ppa-lock-modal button:hover {
  background-color: #303f9f;
}

/* Pop-up Leaflet */
.ppa-popup button {
  margin-top: 0.3rem;
  background: #d32f2f;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.ppa-popup button:hover {
  background: #a92525;
}

/* Responsive */
@media screen and (max-width: 900px) {
  .ppa-layout {
    flex-direction: column;
  }

  .ppa-map {
    height: 50vh;
  }
}

/* ==== Bouton admin : cartographie PPA ==== */

.btn-admin-ppa {
    display: inline-flex;
    align-items: center;

    background: linear-gradient(135deg, #3F51B5, #303F9F); /* Bleu violet DA Metz en Commun */
    color: #fff;

    margin-top: 0.6rem;
    padding: 0.7rem 1.3rem;
    border: none;
    border-radius: 12px;

    font-size: 0.93rem;
    font-weight: 600;
    font-family: "Montserrat", sans-serif;

    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;

    box-shadow: 0 4px 14px rgba(63, 81, 181, 0.25);
}

.btn-admin-ppa:hover {
    background: linear-gradient(135deg, #4A5BD6, #3949AB);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(63, 81, 181, 0.35);
}

.btn-admin-ppa:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(63, 81, 181, 0.25);
}

.btn-admin-ppa:focus {
    outline: 3px solid #FADA47; /* accessibilité DA Metz en Commun */
    outline-offset: 3px;
}

/* Bouton de géolocalisation */

.ppa-geo-btn {
  margin-top: 0.3rem;
  gap: 0.4rem;

  background: linear-gradient(135deg, #1976D2, #1565C0);
  color: #fff;

  padding: 0.6rem 1rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background 0.2s, transform 0.1s;
}

.ppa-geo-btn:hover {
  background: linear-gradient(135deg, #1E88E5, #1565C0);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(25, 118, 210, 0.45);
}

.ppa-geo-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
}

.ppa-geo-btn:focus {
  outline: 3px solid #FADA47;
  outline-offset: 2px;
}

.ppa-geo-status {
  margin-top: 0.3rem;
  font-size: 0.85rem;
}

/* Optionnel : couleurs de statut géoloc */
.ppa-geo-status-ok {
  color: #2e7d32;
}

.ppa-geo-status-error {
  color: #c62828;
}

/* ===== PAGE PROGRAMME – Réglages spécifiques ===== */

.page-programme h1 {
  margin-top: 1.5rem;
  margin-bottom: 0.35rem;   /* on rapproche du bloc blanc */
}

.page-programme .slogan {
  margin-bottom: 0.8rem;    /* moins d’air sous le slogan */
}

.page-programme .programme-wrapper {
  margin-top: 0;            /* pas de trou entre slogan et carte blanche */
}

/* On réduit un peu l’espace entre le header du programme et la 1ère section */
.page-programme .programme-header-row {
  margin-bottom: 0.9rem;
}

/* On compacte un peu la zone recherche / boutons */
.programme-toolbar {
  gap: 0.55rem;
}

.programme-search-help {
  margin-top: 0.15rem;
  font-size: 0.78rem;
}

/* ===== PAGE PROGRAMME – LAYOUT GLOBAL ===== */

.programme-toolbar {
  margin-bottom: 1rem;
}

.programme-wrapper {
  margin: 2rem auto;
  max-width: 1180px;
  padding: 0.75rem 1.25rem 1.25rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.06);
  text-align: left;
}

.programme-intro {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  color: #444;
}

/* Centre uniquement le titre + l'intro (sans centrer la toolbar) */
.programme-header-main h2#programme-titre{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.programme-header-main .programme-intro{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 72ch;   /* joli centrage, ligne pas trop longue */
}

/* Toolbar : recherche + boutons */

.programme-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.programme-search-block label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

#programme-search {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.15);
  font-size: 0.9rem;
}

#programme-search:focus {
  outline: 2px solid #FADA47;
  outline-offset: 2px;
}

.programme-search-help {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: #666;
}

/* 3 boutons sur toute la largeur, en 3 colonnes égales */
.programme-tools-buttons{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.programme-tools-buttons .programme-tool-btn{
  width: 100%;
  justify-content: center;
}

@media (max-width: 700px){
  .programme-tools-buttons{
    grid-template-columns: 1fr; /* empile */
  }
}

.programme-tool-btn {
  border: none;
  border-radius: 10px;
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  background: #f0f0ff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.programme-tool-btn:hover {
  background: #e1e1ff;
}

/* ===== Sommaire horizontal du programme ===== */

.programme-toc {
  margin-top: 0.9rem;
  margin-bottom: 0.9rem;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background: #f8f8ff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 3px 10px rgba(0,0,0,0.04);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
}

.programme-toc-title {
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Conteneur des liens du sommaire */
.programme-toc-list-horizontal {
  flex: 1 1 auto;
}

/* La liste est sur une seule ligne qui peut revenir à la ligne si manque de place */
#programme-toc-list ul{
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;               /* desktop : plusieurs lignes si besoin */
  justify-content: flex-start;
  align-items: center;
}

#programme-toc-list ul{
  /* on garde tes flex, mais on évite les comportements chelous */
  align-items: center;
}

/* Sommaire : on centre les pastilles */
#programme-toc-list ul {
  justify-content: center;
}

/* Et on centre le bloc sommaire global */
.programme-toc{
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.programme-toc-list-horizontal{
  width: 100%;
}

@media (max-width: 600px){
  #programme-toc-list ul {
    justify-content: flex-start; /* scroll naturel */
  }
}

#programme-toc-list li {
  margin: 0;
}

/* Pastilles cliquables */
#programme-toc-list a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* ✅ la pastille s’adapte au texte */
  width: max-content;
  max-width: none;

  /* ✅ 1 seule ligne (pas de “bulle” multi-lignes) */
  white-space: nowrap;

  /* on enlève tout ce qui coupe */
  overflow: visible;
  text-overflow: clip;

  padding: .48rem .95rem;
  min-height: 38px;
  border-radius: 999px;
  flex: 0 0 auto;
}

#programme-toc-list a:hover {
  background: #ececff;
}

/* État “actif” approximatif quand on clique (via :focus-visible) */
#programme-toc-list a:focus-visible {
  outline: 2px solid #FADA47;
  outline-offset: 2px;
}

/* Mobile : sommaire en “rail” horizontal fluide */
/* Mobile : rail horizontal pour lire les titres très longs */
@media (max-width: 600px){
  .programme-toc-list-horizontal{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    /* petit confort : on évite que ça colle aux bords */
    padding: 0 .25rem;
  }
  .programme-toc-list-horizontal::-webkit-scrollbar{ display:none; }

  #programme-toc-list ul{
    flex-wrap: nowrap;           /* rail */
    padding: 0 .5rem .25rem;     /* pour éviter la pastille coupée à gauche */
    scroll-snap-type: x mandatory;
  }

  #programme-toc-list a{
    scroll-snap-align: start;
  }
}

/* Quand l’écran est très petit, on autorise le scroll horizontal pour éviter que ça casse la mise en page */
@media (max-width: 600px) {
  .programme-toc {
    border-radius: 16px;
    flex-direction: column;
    align-items: flex-start;
  }

  .programme-toc-list-horizontal {
    width: 100%;
    overflow-x: auto;
  }

  #programme-toc-list ul {
    flex-wrap: nowrap;
  }
}

.programme-toc-loading {
  font-size: 0.85rem;
  color: #666;
}

/* Accordéon */

.programme-accordeon {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* États d’info */

.programme-loading,
.programme-empty,
.programme-error {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  font-size: 0.95rem;
}

.programme-loading {
  background: #e3f2fd;
  border-left: 4px solid #1976d2;
}

.programme-empty {
  background: #fff9c4;
  border-left: 4px solid #fbc02d;
}

.programme-error {
  background: #ffebee;
  border-left: 4px solid #c62828;
}

/* Cartes thématiques */

.programme-section {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 3px 10px rgba(0,0,0,0.04);
}

.programme-section-header {
  background: linear-gradient(135deg, #e52323, #5b16c9);
  color: #fff;
}

.programme-section-header .programme-toggle {
  width: 100%;
  padding: 0.9rem 1rem;
  border: none;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
}

.programme-section-title {
  text-align: left;
}

.programme-toggle-icon {
  font-size: 1.1rem;
}

/* Panels */

.programme-panel {
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* PANEL : animation fluide, même imbriqué (titre + sous-titre) */
.programme-panel{
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
  transition: grid-template-rows 260ms ease, opacity 220ms ease, transform 220ms ease;
}

/* Le contenu réel est dans un wrapper qui clippe */
.programme-panel > .programme-panel-inner{
  overflow: hidden;
  min-height: 0; /* important pour grid */
}

/* État ouvert */
.programme-panel.is-open{
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}

/* Icône : rotation douce */
.programme-toggle-icon{
  display: inline-flex;
  transition: transform 180ms ease;
}

.programme-toggle[aria-expanded="true"] .programme-toggle-icon{
  transform: rotate(180deg);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .programme-panel,
  .programme-toggle-icon{
    transition: none !important;
  }
}

.programme-section-chapo {
  font-size: 0.95rem;
  color: #444;
  margin: 0.3rem 0 0.4rem;
  padding: 0.55rem 0.75rem;
  background: #fffdf5;
  border-left: 3px solid #FADA47;
  border-radius: 8px;
}

/* Sous-sections */

.programme-sous-section {
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #f7f7fb;
  overflow: hidden;
}

.programme-sous-header {
  background: rgba(49,165,88,0.12);
}

.programme-sous-header .programme-toggle--sub {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0.65rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
}

.programme-sous-title {
  text-align: left;
}

.programme-panel--sub {
  padding: 0.65rem 0.8rem 0.8rem;
  background: #ffffff;
}

.programme-sous-chapo {
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

.btn-programme {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(135deg, #31a558, #5b16c9);
  color: #fff;

  margin-top: 0.6rem;
  padding: 0.7rem 1.3rem;
  border-radius: 12px;
  text-decoration: none;

  font-size: 0.93rem;
  font-weight: 600;
  font-family: "Montserrat", sans-serif;

  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;

  box-shadow: 0 4px 14px rgba(49,165,88,0.28);
}

.btn-programme:hover {
  background: linear-gradient(135deg, #3fb96a, #6b2ae0);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(49,165,88,0.35);
}

.btn-programme:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(49,165,88,0.25);
}

.btn-programme:focus {
  outline: 3px solid #FADA47;
  outline-offset: 3px;
}

.programme-section + .programme-section {
  margin-top: 0.9rem;
}

/* Liste mesures */

/* Liste des mesures : reset de base */
.programme-mesures {
  margin: 0.4rem 0 0;
  padding-left: 0;
  list-style: none; /* on retire les puces HTML de base */
}

/* Un item = une carte de mesure */
.programme-mesure-item {
  margin: 0.25rem 0;
}

/* Carte de mesure */
.programme-mesure-card {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;

  padding: 0.55rem 0.7rem;
  border-radius: 9px;
  background: #fdfdfd;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

/* Petit badge à gauche (vert Metz en Commun) */
.programme-mesure-badge {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 0.9rem;
  background: #31a558;
  color: #fff;
}

/* Texte de la mesure */
.programme-mesure-text {
  font-size: 0.9rem;
  line-height: 1.45;
  color: #222;
}

/* Variante dark mode */
body.dark-mode .programme-mesure-card {
  background: #181818;
  border-color: rgba(255,255,255,0.09);
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

body.dark-mode .programme-mesure-text {
  color: #f5f5f5;
}

/* Bouton "Notre programme" déjà prévu, à garder si tu l'as */

/* ===== Responsive ===== */

@media (max-width: 900px) {
  .programme-toc {
    order: 2;
  }
}

/* Dark mode / contraste élevé */

body.dark-mode .programme-wrapper {
  background: rgba(18, 18, 18, 0.92);
  color: #f5f5f5;
}

body.dark-mode .programme-section {
  background: rgba(33,33,33,0.98);
  border-color: rgba(255,255,255,0.06);
}

body.dark-mode .programme-sous-section {
  background: #222;
}

body.dark-mode .programme-panel--sub {
  background: #121212;
}

body.dark-mode .programme-toc {
  background: #1e1e1e;
}

body.high-contrast .programme-section,
body.high-contrast .programme-sous-section,
body.high-contrast .programme-toc {
  border: 2px solid #000;
}

body.high-contrast .btn-programme {
  border: 2px solid #000;
}

/* =========================
   PAGE PROGRAMME — DA METZ EN COMMUN (BOOST)
   ========================= */

.page-programme{
  background:
    /* halo violet MeC */
    radial-gradient(1200px 700px at 18% 12%,
      rgba(91, 22, 201, 0.55), transparent 62%),

    /* halo rouge MeC */
    radial-gradient(900px 520px at 86% 18%,
      rgba(229, 35, 35, 0.48), transparent 63%),

    /* halo jaune MeC (plus “affiche”) */
    radial-gradient(1000px 560px at 60% 88%,
      rgba(250, 218, 71, 0.40), transparent 64%),

    /* halo vert MeC */
    radial-gradient(900px 520px at 10% 92%,
      rgba(49, 165, 88, 0.38), transparent 62%),

    /* base sombre violette (MeC) */
    linear-gradient(180deg, var(--mec-violet-deep) 0%, var(--mec-noir) 100%);

  color: var(--mec-blanc);
}

.page-programme #grain-overlay{
  opacity: 0.26;           /* un poil plus présent */
  mix-blend-mode: overlay;
}

.page-programme .programme-wrapper{
  border: 1px solid rgba(250,218,71,0.22); /* liseré jaune MeC */
  box-shadow: 0 18px 55px rgba(0,0,0,0.38);
}

/* Grain overlay : on le rend un peu plus visible */
.page-programme #grain-overlay{
  opacity: 0.22;
  mix-blend-mode: overlay;
}

/* Carte principale : glass + bord néon léger */
.page-programme .programme-wrapper{
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 18px 55px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.20);
  border-radius: 22px;
  color: #fff;
}

/* Titre + slogan plus “affiche” */
.page-programme h1{
  color: #fff;
  letter-spacing: -0.02em;
  text-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

.page-programme .slogan{
  color: rgba(255,255,255,0.85);
}

/* Intro du bloc programme */
.page-programme .programme-intro{
  color: rgba(255,255,255,0.85);
}

/* Toolbar : blocs plus design */
.page-programme .programme-toolbar{
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: 0.9rem;
}

/* Champ recherche : plus “premium” */
.page-programme #programme-search{
  background: rgba(255,255,255,0.92);
  border: 2px solid rgba(250,218,71,0.0);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  border-radius: 14px;
}
.page-programme #programme-search:focus{
  outline: none;
  border-color: rgba(250,218,71,0.95);
  box-shadow: 0 0 0 4px rgba(250,218,71,0.22), 0 10px 24px rgba(0,0,0,0.18);
}

/* Boutons outils : dégradés DA */
.page-programme .programme-tool-btn{
  border-radius: 14px;
  padding: 0.55rem 0.95rem;
  background: linear-gradient(135deg, rgba(250,218,71,0.95), rgba(229,35,35,0.95));
  color: #21063d;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}
.page-programme .programme-tool-btn:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
}
.page-programme .programme-tool-btn:active{
  transform: translateY(0);
}

/* Sommaire : plus “capsules” */
.page-programme .programme-toc{
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
}
.page-programme #programme-toc-list a{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.page-programme #programme-toc-list a:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.18);
  background: #fff;
}

/* Cartes thématiques : plus “waouh” */
.page-programme .programme-section{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
  overflow: hidden;
}

/* Header thématique : bande DA + léger motif */
.page-programme .programme-section-header{
  background:
    radial-gradient(700px 200px at 20% 50%, rgba(250,218,71,0.45), transparent 60%),
    linear-gradient(135deg, #e52323, #5b16c9);
}

/* Ligne titre : icône + typo */
.page-programme .programme-section-title{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.page-programme .programme-section-icon{
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.25));
}
.page-programme .programme-section-title-text{
  font-size: 1.06rem;
  letter-spacing: -0.01em;
}

/* Panel : plus lisible sur fond sombre */
.page-programme .programme-panel{
  background: rgba(0,0,0,0.16);
}
.page-programme .programme-section-chapo{
  background: rgba(255,255,255,0.92);
  color: #1b1b1b;
  border-left: 4px solid #FADA47;
}

/* Sous-sections : harmonisation DA */
.page-programme .programme-sous-section{
  background: rgba(255,255,255,0.92);
  border-radius: 14px;
}
.page-programme .programme-sous-header{
  background: rgba(49,165,88,0.18);
}

/* Mesures : carte plus vivante */
.page-programme .programme-mesure-card{
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}
.page-programme .programme-mesure-badge{
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, #31a558, #5b16c9);
}

/* Dark mode : on garde la DA mais on améliore les contrastes */
body.dark-mode.page-programme .programme-wrapper{
  background: rgba(10,10,14,0.65);
  border-color: rgba(255,255,255,0.10);
}
body.dark-mode.page-programme #programme-search{
  background: rgba(255,255,255,0.95);
}

/* =========================================
   LOGO METZ EN COMMUN — BLANC UNIQUEMENT
   SUR LA PAGE PROGRAMME
   ========================================= */

.page-programme .mast-logo {
  content: url("logo-metz_blanc.png");
  filter: none !important;
}

/* =========================================
   HIGH CONTRAST — PAGE PROGRAMME (A11Y)
   Objectif : noir/blanc, pas de blur, pas de grain,
              bordures épaisses, focus visibles.
   ========================================= */

body.high-contrast.page-programme{
  background: #fff !important;
  color: #000 !important;
}

/* On coupe les effets visuels qui nuisent au contraste */
body.high-contrast.page-programme #grain-overlay{
  display: none !important;
}

/* Logo : en high-contrast on force le logo “normal” (noir) pour qu’il reste visible sur fond blanc */
body.high-contrast.page-programme .mast-logo{
  content: url("logo-metz.png") !important;
  filter: none !important;
}

/* Boutons accessibilité en high-contrast = gros contours */
body.high-contrast.page-programme header .toggle-theme button{
  background: #fff !important;
  color: #000 !important;
  border: 3px solid #000 !important;
  box-shadow: none !important;
}
body.high-contrast.page-programme header .toggle-theme button:hover{
  background: #000 !important;
  color: #fff !important;
}
body.high-contrast.page-programme header .toggle-theme button:focus,
body.high-contrast.page-programme header .toggle-theme button:focus-visible{
  outline: 4px solid #000 !important;
  outline-offset: 3px !important;
}

/* Container principal : plus de glass, que du blanc */
body.high-contrast.page-programme .programme-wrapper{
  background: #fff !important;
  color: #000 !important;
  border: 3px solid #000 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Retour accueil */
body.high-contrast.page-programme .retour-accueil a{
  background: #fff !important;
  color: #000 !important;
  border: 3px solid #000 !important;
  box-shadow: none !important;
}
body.high-contrast.page-programme .retour-accueil a:hover{
  background: #000 !important;
  color: #fff !important;
}

/* Titres / textes */
body.high-contrast.page-programme h1,
body.high-contrast.page-programme .slogan,
body.high-contrast.page-programme .programme-intro,
body.high-contrast.page-programme .programme-search-help{
  color: #000 !important;
  text-shadow: none !important;
}

/* Toolbar + recherche */
body.high-contrast.page-programme .programme-toolbar{
  background: #fff !important;
  border: 3px solid #000 !important;
  box-shadow: none !important;
}
body.high-contrast.page-programme #programme-search{
  background: #fff !important;
  color: #000 !important;
  border: 3px solid #000 !important;
  box-shadow: none !important;
}
body.high-contrast.page-programme #programme-search::placeholder{
  color: #333 !important;
}

/* Boutons outils */
body.high-contrast.page-programme .programme-tool-btn{
  background: #fff !important;
  color: #000 !important;
  border: 3px solid #000 !important;
  box-shadow: none !important;
}
body.high-contrast.page-programme .programme-tool-btn:hover{
  background: #000 !important;
  color: #fff !important;
}

/* Sommaire : liens très visibles */
body.high-contrast.page-programme .programme-toc{
  background: #fff !important;
  border: 3px solid #000 !important;
  box-shadow: none !important;
}
body.high-contrast.page-programme .programme-toc a{
  color: #000 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}
body.high-contrast.page-programme .programme-toc a:focus,
body.high-contrast.page-programme .programme-toc a:focus-visible{
  outline: 4px solid #000 !important;
  outline-offset: 3px !important;
}

/* ===== HIGH CONTRAST : accordéons lisibles ===== */
body.high-contrast.page-programme .programme-section{
  background: #fff !important;
  border: 3px solid #000 !important;
  box-shadow: none !important;
}

body.high-contrast.page-programme .programme-section-header{
  background: #fff !important;
  color: #000 !important;
  border-bottom: 3px solid #000 !important;
}

body.high-contrast.page-programme .programme-section-header .programme-toggle{
  color: #000 !important;
}

/* Texte du titre + icône +/− : noir bien net */
body.high-contrast.page-programme .programme-section-title-text{
  color: #000 !important;
  font-weight: 800 !important;
}

body.high-contrast.page-programme .programme-toggle-icon{
  color: #000 !important;
  font-weight: 900 !important;
}

/* Sous-sections */
body.high-contrast.page-programme .programme-sous-section{
  background: #fff !important;
  border: 3px solid #000 !important;
  box-shadow: none !important;
}
body.high-contrast.page-programme .programme-sous-header{
  background: #fff !important;
  border-bottom: 3px solid #000 !important;
}
body.high-contrast.page-programme .programme-sous-header .programme-toggle--sub{
  color: #000 !important;
}

/* Chapôs : simple encadré noir/blanc */
body.high-contrast.page-programme .programme-section-chapo{
  background: #fff !important;
  color: #000 !important;
  border: 3px solid #000 !important;
  border-left: 8px solid #000 !important;
}

/* Mesures : cartes bordures épaisses, badge noir */
body.high-contrast.page-programme .programme-mesure-card{
  background: #fff !important;
  color: #000 !important;
  border: 3px solid #000 !important;
  box-shadow: none !important;
}
body.high-contrast.page-programme .programme-mesure-badge{
  background: #000 !important;
  color: #fff !important;
}

/* Focus global sur boutons de l’accordéon */
body.high-contrast.page-programme .programme-toggle:focus,
body.high-contrast.page-programme .programme-toggle:focus-visible{
  outline: 4px solid #000 !important;
  outline-offset: 3px !important;
}

/* Footer lisible */
body.high-contrast.page-programme footer{
  background: #fff !important;
  color: #000 !important;
  border-top: 3px solid #000 !important;
}
body.high-contrast.page-programme footer a{
  color: #000 !important;
  text-decoration: underline !important;
}

/* ===== A11Y : réglette taille texte (page programme) ===== */
.page-programme .programme-fontsize{
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  background: rgba(0,0,0,0.16);
  border: 1px solid rgba(250,218,71,0.20);
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

.page-programme .programme-fontsize-label{
  display: block;
  font-weight: 700;
  margin-bottom: 0.55rem;
}

.page-programme .programme-fontsize-row{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.page-programme #font-size-range{
  flex: 1 1 240px;
  width: 100%;
  accent-color: #FADA47;
}

.page-programme .programme-fontsize-reset{
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}

.page-programme .programme-fontsize-reset:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.16);
}

.page-programme .programme-fontsize-reset:focus,
.page-programme .programme-fontsize-reset:focus-visible{
  outline: 3px solid #FADA47;
  outline-offset: 3px;
}

.page-programme .programme-fontsize-help{
  margin: 0.55rem 0 0;
  opacity: 0.9;
  font-size: 0.92rem;
}

/* High contrast : version noire/blanche, borders épaisses */
body.high-contrast.page-programme .programme-fontsize{
  background: #fff !important;
  color: #000 !important;
  border: 3px solid #000 !important;
  box-shadow: none !important;
}
body.high-contrast.page-programme .programme-fontsize-reset{
  background: #fff !important;
  color: #000 !important;
  border: 3px solid #000 !important;
}
body.high-contrast.page-programme .programme-fontsize-reset:hover{
  background: #000 !important;
  color: #fff !important;
}
body.high-contrast.page-programme #font-size-range{
  accent-color: #000;
}

/* =========================================================
   MOBILE FIX (smartphone) — lisibilité + aucun débordement
   ========================================================= */

/* Sécurité : éviter les scrollbars horizontales sur mobile */
body.page-programme,
body.page-programme .main{
  overflow-x: hidden;
}

/* Les titres (thématiques + sous-parties) doivent pouvoir se couper */
.programme-section-title,
.programme-sous-title{
  min-width: 0;
}
.programme-section-title-text,
.programme-sous-title{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 520px){
  /* Carte principale : plus de place utile */
  .page-programme .programme-wrapper{
    margin: 1rem 0.75rem;
    padding: 1rem 0.9rem 1.25rem;
    border-radius: 18px;
  }

  /* Titres au-dessus de la carte */
  .page-programme h1{
    font-size: 1.55rem;
    padding: 0 0.75rem;
    line-height: 1.15;
  }
  .page-programme .slogan{
    font-size: 1rem;
    padding: 0 0.9rem;
    line-height: 1.35;
  }

  /* Toolbar */
  .page-programme .programme-toolbar{
    padding: 0.8rem;
    border-radius: 16px;
  }

  /* Boutons outils : en pile, gros, “tapables” */
  .programme-tools-buttons{
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .page-programme .programme-tool-btn{
    padding: 0.8rem 0.95rem;
    font-size: 0.95rem;
  }

  /* Sommaire */
  .programme-toc{
    padding: 0.7rem;
    border-radius: 16px;
  }
  .programme-toc-title{
    font-size: 0.95rem;
  }
  #programme-toc-list a{
    font-size: 0.9rem;
    padding: 0.42rem 0.9rem;
  }

  /* Thématiques : empêcher le + de “pousser” le texte hors cadre */
  .programme-section-header .programme-toggle{
    padding: 0.85rem 0.85rem;
    font-size: 1rem;
    align-items: flex-start;
  }
  .page-programme .programme-section-title{
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 1 1 auto;
    min-width: 0;
  }
  .page-programme .programme-section-icon{
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }
  .page-programme .programme-section-title-text{
    font-size: 1rem;
    line-height: 1.2;
  }
  .programme-toggle-icon{
    flex: 0 0 auto;
    margin-left: 0.5rem;
  }

  .page-programme .programme-panel{
    padding: 0.75rem 0.85rem 0.95rem;
  }

  /* Sous-parties */
  .programme-sous-header .programme-toggle--sub{
    padding: 0.7rem 0.75rem;
    font-size: 0.95rem;
    align-items: flex-start;
  }

  /* Mesures : un peu plus compact */
  .programme-mesure-card{
    padding: 0.6rem 0.65rem;
    gap: 0.55rem;
  }
  .programme-mesure-text{
    font-size: 0.93rem;
  }
}

/* =========================
   SOMMAIRE — enlever le "point" + enlever souligné bleu des liens
   ========================= */

/* Le "point" vient du style de liste */
#programme-toc-list ul,
#programme-toc-list li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Les liens ne doivent PAS ressembler à des liens (bleu + souligné) */
#programme-toc-list a,
#programme-toc-list a:visited,
#programme-toc-list a:hover,
#programme-toc-list a:active{
  text-decoration: none !important;
  color: black;
}

/* Bonus : sur iOS/Android, évite le flash bleu au tap */
#programme-toc-list a{
  -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   PAGE PROGRAMME — DA SIMPLIFIÉE (fond mauve uni + boutons unis)
   Objectif : coller au visuel "affiche" (mauve primaire + jaune)
   ⚠️ Scopé uniquement à .page-programme (ne touche pas le reste du site)
   ========================================================= */

.page-programme{
  /* Fond uni (mauve MeC) */
  background: var(--mec-violet) !important;
  color: var(--mec-blanc);
}

/* On enlève l'effet "grain" sur cette page (plus propre / plus uni) */
.page-programme #grain-overlay{
  opacity: 0 !important;
  mix-blend-mode: normal !important;
}

/* Carte principale : plus nette (moins "glass") */
.page-programme .programme-wrapper{
  background: rgba(255,255,255,0.10) !important;
  border: 2px solid rgba(255,255,255,0.18) !important;
  backdrop-filter: none !important;
}

/* Toolbar : fond légèrement plus lisible */
.page-programme .programme-toolbar{
  background: rgba(0,0,0,0.12) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}

/* Boutons outils : JAUNE UNI (au lieu de dégradés) */
.page-programme .programme-tool-btn{
  background: var(--mec-jaune) !important;
  color: var(--mec-violet-deep) !important;
  border: 2px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.16) !important;
}
.page-programme .programme-tool-btn:hover{
  background: var(--mec-jaune-hover) !important;
  transform: translateY(-1px);
}
.page-programme .programme-tool-btn:active{
  transform: translateY(0);
}
.page-programme .programme-tool-btn:focus,
.page-programme .programme-tool-btn:focus-visible{
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
}

/* Accordéons (thématiques) : header jaune uni + texte mauve */
.page-programme .programme-section-header{
  background: var(--mec-vert) !important;
  color: var(--mec-blanc) !important;
}
.page-programme .programme-section-header .programme-toggle{
  color: var(--mec-blanc) !important;
}

/* Sommaire : plus cohérent (fond blanc doux + bordure jaune) */
.page-programme .programme-toc{
  background: rgba(255,255,255,0.92) !important;
  border: 2px solid rgba(250,218,71,0.55) !important;
}
.page-programme .programme-toc-title{
  color: var(--mec-violet-deep) !important;
}

/* Pastilles sommaire : jaune uni + texte mauve */
.page-programme #programme-toc-list a{
  background: var(--mec-rouge) !important;
  color: var(--mec-blanc) !important;
  border: none !important;
}
.page-programme #programme-toc-list a:hover{
  background: var(--mec-rouge-hover) !important;
}
.page-programme #programme-toc-list a:focus-visible{
  outline: 3px solid var(--mec-violet-deep) !important;
  outline-offset: 3px !important;
}

/* Champs / textes dans la carte : garder un bon contraste */
.page-programme .programme-search-block label,
.page-programme .programme-search-help,
.page-programme .programme-fontsize-label,
.page-programme .programme-fontsize-help{
  color: rgba(255,255,255,0.90) !important;
}

/* La zone recherche reste claire */
.page-programme #programme-search{
  background: rgba(255,255,255,0.96) !important;
  color: #111 !important;
  border: 2px solid rgba(250,218,71,0.0) !important;
}
.page-programme #programme-search:focus{
  border-color: rgba(250,218,71,0.95) !important;
  box-shadow: 0 0 0 4px rgba(250,218,71,0.22) !important;
}

/* Les cartes internes restent blanches (lisibilité) */
.page-programme .programme-section,
.page-programme .programme-sous-section{
  background: rgba(255,255,255,0.96) !important;
  color: #111;
}

/* Mesures : badge vert (inchangé) mais sans dégradé violet */
.page-programme .programme-mesure-badge{
  background: #31a558 !important;
}

.page-programme footer {
  background: var(--mec-violet) !important;
}

.page-programme footer a {
  color: var(--mec-jaune) !important;
}

/* =========================
   🚪 COMPTEUR PORTES TOQUÉES
   ========================= */

/* --- version carto (ppa_metz.php) --- */
.ppa-counter{
  position: relative;
  z-index: 2;
  margin: .75rem 0 1rem;
  padding: 1rem 1rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.75));
  border: 2px solid rgba(250,218,71,.55);
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
  text-align: center;
}
.ppa-counter-label{
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--mec-violet-deep);
  opacity: .95;
}
.ppa-counter-value{
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1;
  font-weight: 900;
  margin-top: .25rem;
  color: var(--mec-violet);
  text-shadow: 0 6px 18px rgba(91,22,201,.20);
}
.ppa-counter-sub{
  margin-top: .35rem;
  font-weight: 700;
  color: rgba(0,0,0,.70);
}

/* --- version home (index.html) --- */
.portes-counter-home{
  max-width: 720px;
  border-radius: 22px;
  padding: 1.1rem 1.2rem;
  background: var(--mec-violet);
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 18px 60px rgba(0,0,0,.14);
  backdrop-filter: blur(10px);
  text-align: center;
}
.portes-counter-badge{
  display: inline-block;
  font-weight: 900;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--mec-jaune);
  border-color: var(--mec-jaune-hover);
  border: 3px solid rgba(91,22,201,.18);
  color: var(--mec-violet-deep);
}
.portes-counter-number{
  font-size: clamp(56px, 6vw, 96px);
  line-height: 1;
  font-weight: 1000;
  margin-top: .5rem;
  color: var(--mec-violet);
  text-shadow: 0 10px 30px rgba(91,22,201,.25);
}
.portes-counter-sub{
  margin-top: .35rem;
  font-weight: 800;
  color: rgba(0,0,0,.72);
}

/* =========================
   Bouton ✏️ (edit) — PPA
   ========================= */
.ppa-btn-edit-portes{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;

  /* format “icon button” */
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* DA MeC */
  background: var(--mec-jaune);
  color: #21063d; /* violet très foncé lisible sur jaune */
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  -webkit-tap-highlight-color: transparent;

  /* icône bien centrée */
  font-size: 16px;
  line-height: 1;
}

.ppa-btn-edit-portes:hover{
  filter: brightness(0.98);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.ppa-btn-edit-portes:active{
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
}

/* focus visible (clavier) — jaune + liseré violet */
.ppa-btn-edit-portes:focus-visible{
  outline: 3px solid var(--mec-jaune);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(91,22,201,.55), 0 10px 24px rgba(0,0,0,.18);
}

/* Disabled (si tu l’utilises) */
.ppa-btn-edit-portes:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Dark mode : on garde le jaune (CTA), mais ombre adaptée */
body.dark-mode .ppa-btn-edit-portes{
  background: var(--mec-jaune);
  color: #21063d;
  box-shadow: 0 6px 18px rgba(0,0,0,.55);
}

/* High contrast : noir/blanc, bordure épaisse */
body.high-contrast .ppa-btn-edit-portes{
  background: #fff !important;
  color: #000 !important;
  border: 3px solid #000 !important;
  box-shadow: none !important;
}
body.high-contrast .ppa-btn-edit-portes:hover{
  background: #000 !important;
  color: #fff !important;
}
body.high-contrast .ppa-btn-edit-portes:focus-visible{
  outline: 4px solid #000 !important;
  outline-offset: 3px !important;
}

/* La colonne gauche devient un conteneur flex qui s’étire */
.ppa-map-container{
  display: flex;
  flex-direction: column;
}

/* La carte prend toute la hauteur disponible */
.ppa-map{
  flex: 1;
  height: auto;       /* on retire la contrainte fixe */
  min-height: 350px;  /* on garde une hauteur mini */
}

/* Animation "score" au changement */
@keyframes pop {
  0%   { transform: scale(0.85); opacity: .6; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

/* =========================
   FLIP COUNTER — VRAI split-flap (solide)
   ========================= */

.flip-counter{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .18em;
  font-variant-numeric: tabular-nums;
}

.flip-digit{
  position: relative;
  width: .86em;
  height: 1.18em;
  perspective: 900px;
}

.flip-card{
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;

  background: linear-gradient(180deg, #2a2a2a 0%, #0f0f0f 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -10px 18px rgba(0,0,0,.45),
    0 10px 18px rgba(0,0,0,.25);
}

/* petite “charnière” */
.flip-card::after{
  content:"";
  position:absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  background: rgba(255,255,255,.10);
}

/* petits rivets (effet compteur) */
.flip-card::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 12%, rgba(255,255,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 90% 12%, rgba(255,255,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 10% 88%, rgba(255,255,255,.12) 0 2px, transparent 3px),
    radial-gradient(circle at 90% 88%, rgba(255,255,255,.12) 0 2px, transparent 3px);
  opacity: .55;
  pointer-events:none;
}

.flip-half{
  position:absolute;
  left:0; right:0;
  height: 50%;
  display:flex;
  align-items:center;
  justify-content:center;

  color: rgba(255,255,255,.95);
  font-weight: 1000;
  line-height: 1;
  user-select:none;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* FIXES */
.flip-top{
  top:0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.15));
  border-bottom: 1px solid rgba(0,0,0,.65);
}
.flip-bot{
  bottom:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(255,255,255,.05));
}

/* VOLETS animés */
.flip-anim-top,
.flip-anim-bot{
  position:absolute;
  left:0; right:0;
  height:50%;
  overflow:hidden;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.flip-anim-top{
  top:0;
  transform-origin: bottom;
  z-index: 3;
}
.flip-anim-bot{
  bottom:0;
  transform-origin: top;
  z-index: 2;
}

.flip-anim-top .face,
.flip-anim-bot .face{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  color: rgba(255,255,255,.95);
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
  backface-visibility: hidden;
}

.flip-anim-top .face{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.15));
  border-bottom: 1px solid rgba(0,0,0,.65);
}

.flip-anim-bot .face{
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(255,255,255,.05));
}

/* ANIMS */
.flip-digit.is-flipping .flip-anim-top{
  animation: fcTop 220ms ease-in forwards;
}
.flip-digit.is-flipping .flip-anim-bot{
  animation: fcBot 240ms ease-out forwards;
  animation-delay: 220ms;
}

/* haut tombe */
@keyframes fcTop{
  from { transform: rotateX(0deg); }
  to   { transform: rotateX(-90deg); }
}

/* bas arrive */
@keyframes fcBot{
  from { transform: rotateX(90deg); }
  to   { transform: rotateX(0deg); }
}

/* Taille héritée */
.flip-counter{ font-size: inherit; }
.flip-half, .face{ font-size: 1em; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .flip-digit.is-flipping .flip-anim-top,
  .flip-digit.is-flipping .flip-anim-bot{
    animation: none !important;
  }
}

/* High contrast */
body.high-contrast .flip-card{
  background: #fff !important;
  border: 3px solid #000 !important;
  box-shadow: none !important;
}
body.high-contrast .flip-half,
body.high-contrast .face{
  color: #000 !important;
  text-shadow: none !important;
}
body.high-contrast .flip-card::after{ background:#000 !important; }
body.high-contrast .flip-card::before{ opacity: 0 !important; }

.portes-counter-home{
  position: sticky;
  top: 12px;                 /* ajuste si besoin */
  z-index: var(--z-over);
}

@media (max-width: 640px){
  .portes-counter-number{
    font-size: clamp(64px, 11vw, 110px);
  }
  .portes-counter-home{
    margin-top: .75rem;
    padding: 1rem 1rem;
  }
}

/* =========================
   FLIP COUNTER (FIX)
   ========================= */

.flip-counter{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  user-select: none;
}

.flip-digit{
  position: relative;
  display: inline-block;
  width: 56px;                 /* taille lisible */
  height: 72px;
  border-radius: 14px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  overflow: hidden;
}

.flip-card{
  position: absolute;
  inset: 0;
  display: block;
  perspective: 800px;
}

/* moitiés fixes */
.flip-half{
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  display: grid;
  place-items: center;
  font-family: "Poppins","Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight: 800;
  font-size: 44px;             /* <- c'est ça qui le rend PAS minuscule */
  color: #fff9ed;
  text-shadow: 0 6px 16px rgba(0,0,0,.25);
}

.flip-top{
  top: 0;
  border-bottom: 1px solid rgba(0,0,0,.20);
  background: linear-gradient(to bottom, rgba(255,255,255,.12), rgba(0,0,0,.08));
}

.flip-bot{
  bottom: 0;
  background: linear-gradient(to top, rgba(255,255,255,.10), rgba(0,0,0,.10));
}

/* volets animés */
.flip-anim-top,
.flip-anim-bot{
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  overflow: hidden;
  transform-style: preserve-3d;
}

.flip-anim-top{
  top: 0;
  transform-origin: bottom;
  transform: rotateX(0deg);
}

.flip-anim-bot{
  bottom: 0;
  transform-origin: top;
  transform: rotateX(90deg);
}

.flip-anim-top .face,
.flip-anim-bot .face{
  position: absolute;
  left: 0; right: 0;
  height: 200%;
  display: grid;
  place-items: center;
  font-family: "Poppins","Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight: 800;
  font-size: 44px;
  color: #fff9ed;
  text-shadow: 0 6px 16px rgba(0,0,0,.25);
}

.flip-anim-top .face{ top: 0; }
.flip-anim-bot .face{ bottom: 0; }

/* Animation déclenchée par .is-flipping sur .flip-digit */
.flip-digit.is-flipping .flip-anim-top{
  animation: flipTop 470ms cubic-bezier(.2,.8,.2,1) both;
}
.flip-digit.is-flipping .flip-anim-bot{
  animation: flipBot 470ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes flipTop{
  0%{ transform: rotateX(0deg); }
  100%{ transform: rotateX(-90deg); }
}

@keyframes flipBot{
  0%{ transform: rotateX(90deg); }
  100%{ transform: rotateX(0deg); }
}

/* Responsive : sur mobile ça reste visible sans être énorme */
@media (max-width: 600px){
  .flip-digit{ width: 44px; height: 58px; border-radius: 12px; }
  .flip-half, .flip-anim-top .face, .flip-anim-bot .face{ font-size: 34px; }
}

/* Accessibilité : contraste élevé */
body.high-contrast .flip-digit{
  background: #fff !important;
  border: 2px solid #000 !important;
  box-shadow: none !important;
}
body.high-contrast .flip-half,
body.high-contrast .flip-anim-top .face,
body.high-contrast .flip-anim-bot .face{
  color: #000 !important;
  text-shadow: none !important;
}

/* Réduction animations */
@media (prefers-reduced-motion: reduce){
  .flip-digit.is-flipping .flip-anim-top,
  .flip-digit.is-flipping .flip-anim-bot{
    animation: none !important;
  }
}

/* Mode statique: pas d'anim, pas de couches fantômes */
.flip-counter--static .flip-anim-top,
.flip-counter--static .flip-anim-bot {
  display: none !important;
}

/* --- FIX: afficher un vrai "flip" en 2 moitiés (statique) --- */
.flip-counter--static .flip-card{
  position: relative !important;
}

.flip-counter--static .flip-half{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.flip-counter--static .flip-top{ top: 0 !important; }
.flip-counter--static .flip-bot{ bottom: 0 !important; }

/* le texte fait 2x la hauteur, puis on décale celui du bas */
.flip-counter--static .flip-half .face{
  height: 200% !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.flip-counter--static .flip-top .face{
  transform: translateY(0) !important;
}

.flip-counter--static .flip-bot .face{
  transform: translateY(-50%) !important;
}

/* ===== Flip counter simple (1 seul chiffre / case) ===== */
.flip-counter--static .flip-digit{
  display: inline-block;
}

.flip-counter--static .flip-cell{
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(to bottom, #2b2b2b 0%, #171717 55%, #101010 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.35);
}

.flip-counter--static .flip-cell::after{
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 2px;
  transform: translateY(-1px);
  background: rgba(0,0,0,.45);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
  border-radius: 2px;
  pointer-events: none;
}

.flip-counter--static .flip-cell .face{
  color: #f5f5f5;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}

.flip-counter--static .flip-digit{ width: 70px; height: 86px; }
.flip-counter--static .flip-cell .face{ font-size: 58px; }

/* =========================
   COMPTEUR PORTES – STRUCTURE PARFAITE (HOME)
   ========================= */

.portes-counter-home{
  /* Zone dégradé / halo */
  position: relative;
  width: min(920px, calc(100% - 2rem));
  border-radius: 22px;

  padding: clamp(16px, 2.2vw, 22px);
  background:
    var(--mec-violet);
  box-shadow:
    0 18px 55px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.18);

  overflow: hidden;
  text-align: center;
}

/* léger grain + reflets internes */
.portes-counter-home::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(120deg, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(600px 220px at 30% 0%, rgba(255,255,255,.14), transparent 60%);
  pointer-events:none;
  opacity: .85;
}

.portes-counter-inner{
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: clamp(10px, 1.3vw, 14px);
  align-items: center;
  justify-items: center;

  padding: clamp(10px, 1.4vw, 14px);
}

/* Badge en “pastille” en haut-gauche, mais reste dans la carte */
.portes-counter-badge{
  justify-self: center;
  align-self: center;
  font-size: 2rem;

  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  font-weight: 800;
  font-family: 'Poppins', sans-serif;
  letter-spacing: .2px;

  background: var(--mec-jaune);
  border-color: var(--mec-jaune-hover);
  border: 3px solid rgba(91,22,201,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.95);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

/* Le compteur : centre parfait + pas de débordement */
.portes-counter-number{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  /* évite le “saut” vertical selon la hauteur des digits */
  line-height: 1;
  padding: 2px 0;
}

/* Si ton flip-counter génère des éléments inline-block, on stabilise */
.portes-counter-number.flip-counter{
  gap: clamp(8px, 1vw, 12px);
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Sous-texte */
.portes-counter-sub{
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  opacity: .92;
  color: rgba(255,255,255,.92);

  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  padding: 0.55rem 0.85rem;

  width: fit-content;
  max-width: 100%;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

/* Responsive : on conserve le “waouh” sans rien casser */
@media (max-width: 600px){
  .portes-counter-home{
    width: calc(100% - 1.2rem);
    margin-top: .75rem;
    border-radius: 18px;
    padding: 14px;
  }
  .portes-counter-badge{
    padding: 0.42rem 0.72rem;
    font-size: 0.95rem;
  }
  .portes-counter-sub{
    font-size: 0.95rem;
    text-align: center;
  }
}

/* Dark mode / Contraste élevé (cohérent avec ton système) */
body.dark-mode .portes-counter-home{
  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.12);
}

body.high-contrast .portes-counter-home{
  background: #f5f5f5 !important;
  border: 2px solid #000 !important;
  box-shadow: none !important;
}
body.high-contrast .portes-counter-home::before{ display:none !important; }
body.high-contrast .portes-counter-badge,
body.high-contrast .portes-counter-sub{
  background: #f5f5f5 !important;
  color: #111 !important;
  border: 2px solid #000 !important;
  box-shadow: none !important;
}

/* =========================
   COMPTEUR HOME — DA "PROGRAMME" (LOCAL)
   ========================= */

/* Variables locales (au cas où) */
:root{
  --mec-noir: #0f0a1a;
  --mec-white: #ffffff;
}

/* Section compteur = mini “hero programme” mais local */
.portes-counter-home{
  position: relative;
  isolation: isolate; /* important pour les halos internes */
  margin: -2.5rem auto 2.5rem;
  max-width: 920px;
  padding: clamp(14px, 2.2vw, 18px);
  border-radius: 22px;

  /* Base sombre + halos (UNIQUEMENT dans cette zone) */
  background: --mec-violet;

  border: 1px solid rgba(250,218,71,0.20);
  box-shadow: 0 18px 55px rgba(0,0,0,0.28);
}

/* Grain local (plus léger que programme, mais présent) */
.portes-counter-home::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events:none;
  z-index: 0;
  opacity: .10;
  mix-blend-mode: overlay;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.12), transparent 55%),
    radial-gradient(circle at 70% 65%, rgba(255,255,255,.10), transparent 58%);
}

/* Carte “glass” interne */
.portes-counter-inner{
  position: relative;
  z-index: 1;
  padding: clamp(14px, 2.4vw, 18px);
  border-radius: 18px;

  background: rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 18px 55px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.18);

  display: grid;
  gap: 10px;
  justify-items: center;
}

/* Badge “Toc-Toc” */
.portes-counter-badge{
  display: inline-flex;
  align-items: center;
  border-radius: 999px;

  background: var(--mec-jaune);
  border-color: var(--mec-jaune-hover);
  border: 3px solid rgba(91,22,201,.18);
  color: #21063d;
  font-weight: 800;
  letter-spacing: .2px;

  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

/* La ligne du nombre (on laisse le flip gérer ses spans, on stylise le conteneur) */
.portes-counter-number{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 16px;

  background: rgba(0,0,0,0.20);
  border: 1px solid rgba(255,255,255,0.14);

  box-shadow:
    0 12px 30px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Sous-texte */
.portes-counter-sub{
  font-family: 'Poppins', sans-serif;
  font-size: .95rem;
  color: rgba(255,255,255,0.86);
  text-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

/* Petit plus : si tu as des séparateurs / espaces dans le compteur */
.portes-counter-number .flip-sep{
  color: rgba(250,218,71,0.92);
  opacity: .95;
}

/* --------- Dark mode: on garde la DA, juste + lisible */
body.dark-mode .portes-counter-home{
  border-color: rgba(250,218,71,0.22);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
body.dark-mode .portes-counter-inner{
  background: rgba(0,0,0,0.28);
  border-color: rgba(255,255,255,0.14);
}
body.dark-mode .portes-counter-sub{
  color: rgba(255,255,255,0.90);
}

/* --------- High contrast: simplifié & très lisible */
body.high-contrast .portes-counter-home{
  background: #f5f5f5 !important;
  border: 2px solid #000 !important;
  box-shadow: none !important;
}
body.high-contrast .portes-counter-home::before{ display:none !important; }
body.high-contrast .portes-counter-inner{
  background: #fff !important;
  border: 2px solid #000 !important;
  box-shadow: none !important;
}
body.high-contrast .portes-counter-badge{
  background: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.high-contrast .portes-counter-number{
  background: #fff !important;
  border: 2px solid #000 !important;
  box-shadow: none !important;
}
body.high-contrast .portes-counter-sub{ color:#111 !important; text-shadow:none !important; }

/* --------- Reduced motion: rien d’animé ici */
@media (prefers-reduced-motion: reduce){
  .portes-counter-home,
  .portes-counter-inner{ scroll-behavior:auto; }
}

/* Libellé clair du compteur (HOME) */
.portes-counter-title{
  margin: 0.15rem 0 0.25rem;
  font-family: "Poppins","Montserrat",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  color: rgba(255,255,255,.95);
  text-shadow: 0 10px 26px rgba(0,0,0,0.35);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
}

/* Sous-texte principal (porte) */
.portes-counter-sub{
  font-weight: 700;
}

/* Info carto (secondaire, discret) */
.portes-counter-meta{
  margin-top: -2px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  opacity: 0.85;
  color: rgba(255,255,255,0.88);
}