/* ============ Charte technique ============ */
:root{
	  --c-brand: #A5C355;      /* vert logo */
	  --c-brand-2:#73A5CD;     /* bleu logo */
  --c-ink:   #0F0F10;
  --c-bg:    #FFFFFF;
  --c-bg-2:  #F5F7FA;

  --radius-sm: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 6px 18px rgba(15,15,16,.10);
  --shadow-lg: 0 16px 40px rgba(15,15,16,.14);

  --container: 1100px;

  /* Mis à jour en JS : hauteur réelle du header (mobile) */
  --header-h: 64px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: "Comic Neue", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.6;
}

img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration:none; }
.container{ width:min(var(--container), calc(100% - 32px)); margin:0 auto; }

/* Typo */
h1,h2,h3{
  font-family:"Oregano", cursive;
  line-height:1.05;
  margin:0 0 10px 0;
}
h1{ font-size: clamp(2.2rem, 4vw, 3.2rem); }
h2{ font-size: clamp(1.8rem, 3vw, 2.4rem); }
h3{ font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
p{ margin: 0 0 12px 0; }

/* Boutons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  transition: transform .15s ease, filter .15s ease, background .15s ease;
  gap: 8px;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(0.98); }
.btn:focus-visible{ outline: 3px solid rgba(115,165,205,.55); outline-offset: 2px; }

/* Boutons harmonisés */
.btn-primary{
  background: linear-gradient(135deg, var(--c-brand), #8fb645);
  color: #fff;
  border: none;
}
.btn-primary2{
  background: linear-gradient(135deg, var(--c-brand), #73A5CD);
  color: #fff;
  border: none;
}
.btn-outline{
  background: transparent;
  border: 2px solid var(--c-brand);
  color: var(--c-brand);
}
.btn-outline:hover{ background: rgba(165,195,85,.12); }

/* =========================
   HEADER + MENU 
   (version sans "marque" texte : logo only)
========================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,15,16,.08);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 0;
}

/* Logo seul */
.brand{
  display:flex;
  align-items:center;
  flex: 0 0 auto;
}



/* Burger */
.burger{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(15,15,16,.14);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.burger span{
  display:block;
  height: 2px;
  width: 18px;
  background: var(--c-ink);
  margin: 5px auto;
  border-radius: 99px;
}

/* NAV desktop */
.nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex: 1 1 auto;
  min-width: 0;
}

/* Encadré discret */
.nav-box{
  margin-left: auto;
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,15,16,.10);
  box-shadow: 0 10px 24px rgba(15,15,16,.08);
  backdrop-filter: blur(10px);
}

/* Liens */
.nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .2px;
  border: 1px solid transparent;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
  white-space: nowrap;
}

.nav-link:hover{
  background: rgba(165,195,85,.14);
  transform: translateY(-1px);
}

.nav-link.active{
  background: rgba(115,165,205,.16);
  border-color: rgba(115,165,205,.30);
}

.nav-link.nav-cta{
  background: rgba(165,195,85,.18);
  border-color: rgba(165,195,85,.35);
}
.nav-link.nav-cta:hover{
  background: rgba(165,195,85,.26);
}

/* Mobile : drawer sous le header (hauteur calculée en JS via --header-h) */
@media (max-width: 720px){
  .burger{ display:block; }

  .nav{
    position: fixed;
    left: 12px;
    right: 12px;
    top: calc(var(--header-h) + 10px);
    z-index: 9999;
    display: none;
    background: transparent;
    flex: 0 0 auto;
    justify-content: flex-start;
  }
  .nav.open{ display:block; }

  .nav-box{
    flex-direction: column;
    align-items: stretch;
    gap: 6px;

    border-radius: 18px;
    padding: 10px;

    background: rgba(255,255,255,.96);
    border: 1px solid rgba(15,15,16,.10);
    box-shadow: var(--shadow-lg);
  }

  .nav-link{
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
  }

  .nav-box{
    max-height: calc(100vh - var(--header-h) - 24px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =========================
   HERO
========================= */
.hero{
  position:relative;
  border-radius: calc(var(--radius-lg) + 6px);
  overflow:hidden;
  min-height: 440px;
  box-shadow: var(--shadow-lg);
  background: #111;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(15,15,16,.75) 0%,
      rgba(15,15,16,.35) 6%,
      rgba(15,15,16,.15) 10%
    ),
    url("/assets/img/hero-village.jpg") center/cover no-repeat;
  transform: scale(1.01);
}

.hero-inner{
  position:relative;
  padding: clamp(22px, 4vw, 44px);
  color: #fff;
  display:flex;
  flex-direction:column;
  gap: 14px;
  max-width: 760px;
}
.hero-inner p{
  max-width: 100%;
  color: #F5F6F4;
  background: linear-gradient(to right,
    rgba(15,15,16,0.55),
    rgba(15,15,16,0.15));
  border-radius: 8px;
  padding-right: 5px;
  padding-left: 5px;
}

@media (max-width: 768px){
  .hero-inner p{
    background: rgba(255,255,255,0.82);
	opacity: .8;
    color: #1a1a1a;
	max-width: 100%;
  }
}

.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.badge{
  font-size: .85rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
}
.hero h1{ letter-spacing: .5px; }
.hero p{
  font-size: 1.1rem;
    max-width: none;
}

@media (max-width: 720px){
  .hero{ min-height: 480px; }
}

/* =========================
   SECTIONS / CARDS
========================= */
.section{ padding: 26px 0; }
.grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items:start;
}
.card{
  background: var(--c-bg);
  border: 1px solid rgba(15,15,16,.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}
.card.soft{ background: var(--c-bg-2); }

@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
}


/* =========================
   FORM
========================= */
.form{ display:grid; gap: 10px; }
.input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,15,16,.14);
  background: #fff;
}
textarea.input{ min-height: 140px; resize: vertical; }

/* =========================
   FOOTER
========================= */
.site-footer{
  margin-top: 30px;
  padding: 26px 0;
  background: var(--c-bg-2);
  border-top: 1px solid rgba(15,15,16,.08);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap: 18px;
  flex-wrap:wrap;
}
.footer-title{ font-weight: 900; }
.footer-note{ opacity:.75; font-size:.95rem; }
.social{ display:flex; gap: 12px; flex-wrap:wrap; }
.social a{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(115,165,205,.14);
  border: 1px solid rgba(115,165,205,.26);
}

/* =========================
   SCROLL REVEAL
========================= */
.reveal{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible{
  opacity: 1;
  transform: translateY(0);
}
/* =========================
   LOGO – ajustement mobile
========================= */
/* =========================
   LOGO – mobile (logo entier, lisible)
========================= */
@media (max-width: 720px){
  /* Le conteneur du logo ne doit pas l'écraser */
  .brand{
    display:flex;
    align-items:center;
    flex: 0 0 auto;
    max-width: 70vw;      /* évite que ça prenne tout l'écran */
    min-width: 0;
  }

  /* IMPORTANT : logo entier, on pilote par la hauteur */
  .brand-logo{
    width: auto !important;        /* <-- clé : stop le 32px */
    height: 56px !important;       /* ajuste 48/56/64 selon ton goût */
    max-width: 70vw;               /* garde le logo entier sans dépasser */
    padding: 0 !important;         /* enlève le "cadre" si ça gêne */
    border-radius: 0 !important;   /* optionnel */
    background: transparent !important; /* optionnel */
    box-shadow: none !important;   /* optionnel */
    object-fit: contain;
  }
}

/* DESKTOP : logo vraiment visible, menu reste sur la meme ligne */
@media (min-width: 721px){
  .header-inner{
    flex-wrap: nowrap;
    gap: 16px;
  }

  .brand{
    flex: 0 0 auto;
  }

  /* IMPORTANT : ton <img> a maintenant class="brand-logo" (sinon ajoute-la dans header.html) */
  .brand-logo{
    width: 88px;          /* <-- logo bien visible */
    height: 88px;
    padding: 6px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    object-fit: contain;
  }

  /* La nav prend le reste */
  .nav{
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
  }

  /* Toujours sur une ligne */
  .nav-box{
    flex-wrap: nowrap;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Si manque de place, on compacte un peu les liens */
  .nav-link{
    padding: 10px 12px;
    font-size: 1rem;
    white-space: nowrap;
  }
}


@media (min-width: 721px){
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:nowrap;
    gap:16px;
    padding:12px 0;
  }

  .brand{ flex: 0 0 auto; }

  .brand-logo{
    width: 388px;
    height: 188px;
    object-fit: contain;
    padding: 0px;
    border-radius: 16px;
    background: #FFF;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
  }

  .nav{
    flex: 1 1 auto;
    min-width: 0;
    display:flex;
    justify-content:flex-end;
	 font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }

  .nav-box{
    flex-wrap:nowrap;
    white-space:nowrap;
    max-width:100%;
  }

  .nav-link{
    white-space:nowrap;
    padding:10px 12px;
  }
}
/* =========================
   FOOTER v3 (plus stylé)
========================= */
.site-footer{
  margin-top: 34px;
  padding: 26px 0;
  background: linear-gradient(180deg, rgba(165,195,85,.08), rgba(115,165,205,.06));
  border-top: 1px solid rgba(15,15,16,.08);
  position: relative;
}

/* petite barre “brand” moderne */
.site-footer::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-brand), var(--c-brand-2));
  opacity: .9;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 18px;
  flex-wrap:wrap;
}

.footer-left{
  min-width: 260px;
  max-width: 720px;
}

.footer-title{
  font-weight: 900;
  letter-spacing: .2px;
}

.footer-note{
  opacity: .8;
  margin-top: 4px;
}

.footer-meta{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
  opacity: .9;
  font-size: .95rem;
}

.footer-meta .sep{ opacity: .45; }

.footer-link{
  text-decoration: none;
  border-bottom: 1px dashed rgba(15,15,16,.28);
}
.footer-link:hover{
  border-bottom-color: rgba(15,15,16,.60);
}

.footer-right{
  min-width: 220px;
  background-color:#73A5CD;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 10px;
  border-radius: 20px;
}

.footer-kicker{
  font-weight: 900;
  opacity: .9;
}

/* Bouton social moderne */
.social{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

.social-btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,15,16,.10);
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 24px rgba(15,15,16,.08);
  backdrop-filter: blur(10px);
  font-weight: 900;
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}

.social-btn:hover{
  transform: translateY(-1px);
  filter: brightness(.98);
  background: rgba(255,255,255,.88);
}

.social-ico{
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  color: #fff;
  background: #1877F2; /* Facebook blue */
  box-shadow: 0 8px 18px rgba(24,119,242,.25);
}

/* Mobile: alignements à gauche */
@media (max-width: 720px){
  .footer-right{ align-items:flex-start; }
}
/* Anti-spam honeypot */
.hp{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
/* =========================
   SECTION CANDIDAT (sexy + vignette)
========================= */
.section-candidate{
  padding-top: 10px;
}

.candidate-card{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 26px 22px 22px;
  background:
    radial-gradient(900px 280px at 0% 0%, rgba(115,165,205,.22), transparent 60%),
    radial-gradient(900px 280px at 100% 0%, rgba(165,195,85,.18), transparent 60%),
    #fff;
  border: 1px solid rgba(15,15,16,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
}

.candidate-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
  background: linear-gradient(90deg, var(--c-brand), var(--c-brand-2));
  opacity:.9;
}

.candidate-badge{
  position: absolute;
  top: 16px;
  left: 16px;
  width: 116px;
  height: 116px;
  border-radius: 18px;
  padding: 4px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,15,16,.10);
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
}

.candidate-badge img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

.candidate-head{
  padding-left: 198px; /* place pour la vignette */
  padding-right: 6px;
}

.candidate-head h2{
  margin: 0;
  font-weight: 1900;
}

.candidate-sub{
  margin-top: 4px;
  opacity: .7;
  font-weight: 700;
  font-size: .65rem;
}

/* Texte en Bonheur Royale (classe) */
.bonheur{
  font-family: "Gowun Dodum", cursive;
}

.candidate-letter{
  margin-top: 64px;
  padding-left: 6px;
  padding-right: 6px;
  position: relative;
}

/* Pour que Bonheur Royale reste lisible */
.candidate-letter p{
  font-size: 1.20rem;     /* Bonheur Royale est fine, on monte la taille */
  line-height: 1.35;
  margin: 0 0 14px;
  color: var(--c-ink);
}

.candidate-letter p strong{
  font-weight: 700;
}

.candidate-signature{
  margin-top: 18px;
}

.sig-name{
  font-size: 1.2rem;
  font-weight: 700;
}

.sig-role{
  font-size: 1.15rem;
  opacity: .75;
}

/* Petit “quote vibe” discret */
.candidate-card::after{
  content:"“”";
  position:absolute;
  right: 18px;
  top: 8px;
  font-size: 64px;
  line-height: 1;
  opacity: .10;
  font-weight: 900;
}

/* Mobile */
@media (max-width: 768px){
  .candidate-card{
    padding: 22px 16px 18px;
  }

  .candidate-badge{
    width: 66px;
    height: 66px;
    border-radius: 16px;
  }

  .candidate-badge img{
    border-radius: 12px;
  }

  .candidate-head{
    padding-left: 86px;
  }

  .candidate-letter p{
    font-size: 1.2rem;
  }

  .sig-name{
    font-size: 1.2rem;
  }
}
/* =========================
   METEO LOCALE (Météociel)
========================= */
.meteo-bar{
  background: linear-gradient(
    90deg,
    rgba(115,165,205,.12),
    rgba(165,195,85,.12)
  );
  border-bottom: 1px solid rgba(15,15,16,.08);
}

.meteo-bar .container{
  padding: 6px 0;
}

.meteo-bar iframe{
  width: 100%;
  height: 110px;
  border: none;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* Mobile : un peu plus compact */
@media (max-width: 768px){
  .meteo-bar iframe{
    height: 130px;
  }
}
/* =========================
   METEO MINI (header)
========================= */
.meteo-mini{
  display:flex;
  align-items:center;
  justify-content:center; /*  centrage horizontal */
  text-align:center;
  gap:10px;
  width: 100%;
  margin-top: 8px;            /* sous le menu */
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--c-ink);
  background: linear-gradient(90deg, rgba(115,165,205,.12), rgba(165,195,85,.12));
  border: 1px solid rgba(15,15,16,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.meteo-ico{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,15,16,.08);
  font-size: 18px;
  flex: 0 0 auto;
}

.meteo-txt{
  text-align:center;
  font-weight: 900;
  letter-spacing: .1px;
}

.meteo-mini:hover{
  filter: brightness(.98);
  transform: translateY(-1px);
  transition: transform .15s ease, filter .15s ease;
}
/* =========================
   VIDEO YOUTUBE RESPONSIVE
========================= */
.video-wrapper{
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 16px auto;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}

.video-wrapper iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* =========================
   SURLIGNEUR FLUO "À LA MAIN"
========================= */
.highlight{
  position: relative;
  display: inline-block;
  font-weight: 900;
  z-index: 0;
}

.highlight::before{
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: .15em;
  height: .65em;

  background: #fff200; /* jaune fluo */
  opacity: .85;

  transform: rotate(-2.2deg);
  transform-origin: left center;

  z-index: -1;
  border-radius: 6px;
}

/* Variante 1 : autre inclinaison */
.highlight.r2::before{
  transform: rotate(1.6deg);
}

/* Variante 2 : plus "brouillon" */
.highlight.rough::before{
  height: .75em;
  opacity: .75;
  filter: blur(.3px);
}
/* =========================
   VISUEL – PAGE CONTACT
========================= */
.contact-visual{
  margin-top: 26px;
  border-radius: 22px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  position: relative;
}

.contact-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(15,15,16,.15),
    rgba(15,15,16,.35)
  );
  pointer-events:none;
}

.contact-visual img{
  display: block;
  width: 100%;
  height: clamp(220px, 36vw, 420px);
  object-fit: cover;
}
/* =========================
   BACKGROUND "SERPENT"  – 2 traits continus
========================= */
.bg-squiggles{
  position: fixed;
  inset: 0; 
  z-index: -1;
  pointer-events: none;
  opacity: 1;
}

.bg-squiggles svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* Traits continus */
.sq{
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: clamp(3px, .55vw, 7px);

  /* douceur */
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.06));
  opacity: .6;

  /* animation “serpent” */
  stroke-dasharray: 2000;        /* long trait */
  stroke-dashoffset: 2000;       /*  circuler */
  animation: snake 30s linear infinite;

  /* légère respiration */
  will-change: stroke-dashoffset, transform, opacity;
  
   opacity: .85;
  stroke-width: clamp(3.5px, .6vw, 7.5px);
  filter:
    saturate(1.25)
    contrast(1.05)
    drop-shadow(0 10px 22px rgba(0,0,0,.05));
}
@media (max-width: 720px){
  .sq{ opacity: .55; }
}

/* Couleurs logo */
.sq-a{	
  stroke: var(--c-brand);
  animation-duration: 30s;
}

.sq-b{
  stroke: var(--c-brand-2);
  animation-duration: 30s;
  animation-direction: reverse;  /* croisement + contre-mouvement */
}


/* Mouvement principal */
@keyframes snake{
  0%   { stroke-dashoffset: 2000; transform: translateY(0px); opacity: .55; }
  50%  { stroke-dashoffset: 0;    transform: translateY(-6px); opacity: .70; }
  100% { stroke-dashoffset: -2000;transform: translateY(0px); opacity: .55; }
}

/* Mobile : plus discret */
@media (max-width: 720px){
  .bg-squiggles{ opacity: .28; }
  .sq{ stroke-width: 4px; }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .sq{ animation: none; }
}
.sq{
  /* animation continue tant que la page est ouverte */
  animation-name: snake;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
/* =========================
   Badge élections – centré & bold
========================= */

.election-badge{
  display: inline-flex;      /* important */
  justify-content: center;
  align-items: center;

  margin-left: auto;
  margin-right: auto;

  text-align: center;
  font-weight: 800;
  width: max-content;        /* évite qu'il s'étire */
}

/* conteneur interne */
.election-badge__top{
  display: flex;
  align-items: baseline;
  gap: 6px;
  justify-content: center;
}

/* renforce la lisibilité du chiffre */
.election-badge__num{
  font-weight: 900;
}

/* optionnel : cohérence */
.election-badge__kicker,
.election-badge__dates,
.election-badge__txt,
.election-badge__sub{
  font-weight: 800;
}
.meteo-mini{
  display: inline-flex;      /* important */
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 0;                    /* plus de faux espace */
  padding: 0;                /* sécurité */
  line-height: 1.1;          /* réduit l’espace vertical */
  text-align: center;
}
.election-badge__top{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  line-height: 1.1;          /* évite l’effet “double ligne haute” */
  margin-top: 0;             /* sécurité */
}
@media (max-width: 768px){
  .meteo-mini{
    align-self: center;
    width: 100%;
  }
}
.meteo-mini > * + *{
  margin-top: 2px;
}
/* ==========================================================
   ENGAGEMENTS (page)
   ========================================================== */

.hero-engagements .hero-inner{
  max-width: 980px;
}

/* CTA dans le hero */
.eng-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}

/* Intro centrée et lisible */
.eng-intro{
  max-width: 860px;
  margin: 0 auto;
  padding: 6px 2px 0;
}
.eng-intro h2{
  margin: 0 0 6px;
}
.eng-intro p{
  margin: 0;
  opacity: .92;
}

/* Grille cartes */
.eng-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.eng-card{
  grid-column: span 6;
  border-radius: 18px;
  padding: 18px 18px 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,15,16,.10);
  box-shadow: 0 12px 34px rgba(15,15,16,.10);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease;
}

.eng-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(15,15,16,.14);
}

.eng-card::before{
  content:"";
  position:absolute;
  inset: -70px -70px auto auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle at 40% 40%,
    rgba(115,165,205,.22), transparent 62%);
  pointer-events:none;
}

.eng-card:nth-child(odd)::before{
  background: radial-gradient(circle at 40% 40%,
    rgba(165,195,85,.22), transparent 62%);
}

/* Header carte */
.eng-card__top{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  margin-bottom: 10px;
}

.eng-ico{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(165,195,85,.22), rgba(115,165,205,.20));
  border: 1px solid rgba(15,15,16,.08);
  box-shadow: 0 10px 22px rgba(15,15,16,.08);
  flex: 0 0 auto;
}

.eng-ico svg{
  width: 22px;
  height: 22px;
  stroke: var(--c-ink, #0F0F10);
  opacity: .92;
}

.eng-card h3{
  margin: 0;
  line-height: 1.2;
}

.eng-lead{
  margin: 6px 0 0;
  opacity: .86;
  font-size: .98rem;
}

/* Liste d'engagements */
.eng-list{
  list-style:none;
  margin: 12px 0 0;
  padding: 0;
  display:grid;
  gap: 10px;
}

.eng-list li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  width: 100%; 
  justify-content:left;
}

.eng-tick{
  width: 18px;
  height: 18px;
  border-radius: 7px;
  margin-top: 2px;
  flex: 0 0 auto;
  background: rgba(165,195,85,.16);
  border: 1px solid rgba(165,195,85,.30);
  position: relative;
}

.eng-tick::after{
  content:"";
  position:absolute;
  inset: 0;
  margin:auto;
  width: 8px;
  height: 5px;
  border-left: 2px solid rgba(15,15,16,.80);
  border-bottom: 2px solid rgba(15,15,16,.80);
  transform: rotate(-45deg);
  top: 4px;
  left: 4px;
}

/* Bloc méthode */
.eng-method{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  align-items: stretch;

  border-radius: 18px;
  padding: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,15,16,.10);
  box-shadow: 0 12px 34px rgba(15,15,16,.10);
  backdrop-filter: blur(10px);
  position: relative;
  overflow:hidden;
}

.eng-method::before{
  content:"";
  position:absolute;
  inset:auto auto -160px -160px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at 30% 30%, rgba(115,165,205,.22), transparent 60%);
  pointer-events:none;
}

.eng-method__text h2{
  margin: 0 0 8px;
}

.eng-method__text p{
  margin: 0;
  opacity: .92;
}

.eng-callout{
  margin-top: 12px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(245,247,250,.78);
  border: 1px dashed rgba(15,15,16,.20);
}

.eng-method__cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 12px;
}

.eng-method__quote{
  display:flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(165,195,85,.14), rgba(115,165,205,.14));
  border: 1px solid rgba(15,15,16,.08);
}

.eng-quote{
  margin: 0;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-size: clamp(1.25rem, 1.1rem + 1vw, 1.7rem);
}
.eng-quote span{
  font-weight: 900;
}
.eng-quote-sub{
  margin: 10px 0 0;
  opacity: .82;
  font-weight: 700;
}

/* Responsive */
@media (max-width: 980px){
  .eng-list li{width: 92%; justify-content:left;}
  .eng-card{ grid-column: span 12; }
  .eng-method{ grid-template-columns: 1fr; }
}

@media (max-width: 420px){
  .eng-list li{ justify-content:left;}
  .eng-cta .btn{ width: 100%; justify-content:center; }
  .eng-method__cta .btn{ width: 100%; justify-content:center; }
}
/* ==========================================================
   ACTUS (affiches) – liste verticale + passé en opacité
   ========================================================== */

.actus-wrap{
  max-width: 980px;
  margin: 0 auto;
}

.actus-tools{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.actus-count{
  font-weight: 800;
  opacity: .9;
}

.actus-toggle{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,15,16,.10);
  box-shadow: 0 10px 28px rgba(15,15,16,.10);
  backdrop-filter: blur(10px);
  user-select: none;
}

.actus-toggle input{
  width: 18px;
  height: 18px;
}

.actus-list{
  display:flex;
  flex-direction: column;
  gap: 16px;
}

/* une “carte” par image */
.actus-item{
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,15,16,.10);
  box-shadow: 0 12px 34px rgba(15,15,16,.10);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.actus-meta{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15,15,16,.08);
}

.actus-date{
  font-weight: 800;
}

.actus-badge{
  font-weight: 900;
  font-size: .86rem;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(15,15,16,.06);
  border: 1px solid rgba(15,15,16,.12);
}

.actus-badge.upcoming{
  background: linear-gradient(135deg, rgba(165,195,85,.18), rgba(115,165,205,.18));
  border-color: rgba(15,15,16,.10);
}

.actus-figure{
  margin: 0;
}

.actus-figure img{
  width: 100%;
  height: auto;
  display: block;
}

/* titre sous l’image */
.actus-title{
  padding: 12px 14px 14px;
  font-weight: 800;
  opacity: .9;
}

/* PASSÉ : opacité + bandeau “Passé” déjà mis via badge */
.actus-item.is-past{
  opacity: .55;
  filter: saturate(.9);
}

.actus-note{
  margin-top: 12px;
  opacity: .85;
}

/* mobile */
@media (max-width: 520px){
  .actus-meta{
    flex-direction: column;
    align-items: flex-start;
  }
  .actus-badge{
    align-self: flex-start;
  }
}
/* =========================
   MICRO-ANIMS CLEAN (CSS only)
========================= */

/* Respect accessibilité */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Glow subtil au survol */
:root{
  --glow-a: rgba(165,195,85,.24);
  --glow-b: rgba(115,165,205,.22);
}

/* Cartes : hover lift + reflet */
.card, .candidate-card, .eng-card, .actus-item{
  position: relative;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.card::after, .candidate-card::after, .eng-card::after, .actus-item::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  opacity: 0;
  transition: opacity .18s ease;
  background:
    radial-gradient(700px 220px at 10% 0%, var(--glow-b), transparent 60%),
    radial-gradient(700px 220px at 90% 0%, var(--glow-a), transparent 60%);
  mix-blend-mode: multiply;
}

@media (hover:hover){
  .card:hover, .candidate-card:hover, .eng-card:hover, .actus-item:hover{
    transform: translateY(-3px);
    filter: saturate(1.03);
    box-shadow: 0 22px 60px rgba(15,15,16,.14);
  }
  .card:hover::after, .candidate-card:hover::after, .eng-card:hover::after, .actus-item:hover::after{
    opacity: 1;
  }
}

/* Boutons : micro-pop + highlight */
.btn{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}
.btn::before{
  content:"";
  position:absolute;
  top:-60%;
  left:-30%;
  width: 60%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: rotate(18deg) translateX(-120%);
  transition: transform .6s ease;
  pointer-events:none;
}
@media (hover:hover){
  .btn:hover::before{ transform: rotate(18deg) translateX(260%); }
  .btn:hover{ transform: translateY(-2px); }
  .btn:active{ transform: translateY(0px) scale(.99); }
}
/* Titre avec surlignage animé */
.marker{
  position: relative;
  display: inline-block;
  z-index: 0;
}
.marker::after{
  content:"";
  position:absolute;
  left:-8px;
  right:-8px;
  bottom:.12em;
  height:.55em;
  background: linear-gradient(90deg, rgba(165,195,85,.35), rgba(115,165,205,.30));
  border-radius: 10px;
  z-index: -1;
  transform: rotate(-1.2deg) scaleX(.0);
  transform-origin: left center;
  transition: transform .7s cubic-bezier(.2,.9,.2,1);
}
.reveal.visible .marker::after{
  transform: rotate(-1.2deg) scaleX(1);
}
/* Feedback tactile sur mobile */
.nav-link{
  -webkit-tap-highlight-color: transparent;
}
.nav-link:active{
  transform: scale(.98);
}
.badge{
  animation: badgeFloat 5.5s ease-in-out infinite;
  transform: translateZ(0);
}
@keyframes badgeFloat{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce){
  .badge{ animation: none; }
}
/* =========================
   HALO SUIVEUR (cards) — FIX : utilise ::after (pas ::before)
========================= */
.card, .candidate-card, .eng-card, .actus-item, .team-card{
  position: relative;
  overflow: hidden;
}

/* halo = ::after pour ne pas écraser le bandeau mot-clé (::before) */
.card::after, .candidate-card::after, .eng-card::after, .actus-item::after, .team-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity: 0;
  transition: opacity .18s ease;
  background:
    radial-gradient(
      220px circle at var(--mx, 50%) var(--my, 50%),
      rgba(115,165,205,.22),
      transparent 55%
    ),
    radial-gradient(
      320px circle at var(--mx, 50%) var(--my, 50%),
      rgba(165,195,85,.18),
      transparent 62%
    );
  mix-blend-mode: multiply;
  z-index: 1; /* reste derrière les overlays */
}

/* visible au survol (desktop) */
@media (hover:hover){
  .card:hover::after, .candidate-card:hover::after, .eng-card:hover::after,
  .actus-item:hover::after, .team-card:hover::after{
    opacity: 1;
  }
}

/* accessibilité */
@media (prefers-reduced-motion: reduce){
  .card::after, .candidate-card::after, .eng-card::after, .actus-item::after, .team-card::after{
    transition: none;
  }
}

/* =========================
   BUBBLES BACKGROUND (CSS only)
========================= */
.bg-bubbles{
  position: fixed;
  inset: 0;
  z-index: -2;              /* derrière les squiggles (-1) */
  pointer-events: none;
  overflow: hidden;
  opacity: .45;
}

.bg-bubbles span{
  position: absolute;
  bottom: -120px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,.65),
    rgba(255,255,255,0) 60%
  );
  border: 1px solid rgba(15,15,16,.06);
  filter: blur(.2px);
  animation: bubbleUp var(--dur, 18s) linear infinite;
  left: var(--x, 50%);
  width: var(--s, 64px);
  height: var(--s, 64px);
  transform: translateX(-50%);
}

@keyframes bubbleUp{
  0%   { transform: translateX(-50%) translateY(0) scale(1); opacity: 0; }
  10%  { opacity: .9; }
  100% { transform: translateX(-50%) translateY(-115vh) scale(1.15); opacity: 1; }
}

/* teinte brand */
.bg-bubbles span.b1{ background: radial-gradient(circle at 30% 30%, rgba(115,165,205,.40), transparent 100%); }
.bg-bubbles span.b2{ background: radial-gradient(circle at 30% 30%, rgba(165,195,85,.38), transparent 100%); }

@media (max-width: 720px){
  .bg-bubbles{ opacity: .28; }
}

@media (prefers-reduced-motion: reduce){
  .bg-bubbles span{ animation: none; opacity: .15; }
}
/* =========================
   DOODLE UNDERLINE (CSS only)
========================= */
.doodle{
  position: relative;
  display: inline-block;
  z-index: 0;
  font-weight: 900;
}

/* base trait */
.doodle::after{
  content:"";
  position:absolute;
  left: -2px;
  right: -2px;
  bottom: -0.12em;
  height: 10px;
  z-index: -1;
  opacity: .95;
  background-repeat: repeat-x;
  background-size: 36px 10px;
  transform: rotate(var(--rot, -1deg));
  filter: saturate(1.05);
}

/* style A : zigzag */
.doodle.a::after{
  background-image:
    linear-gradient(135deg, transparent 0 40%, rgba(165,195,85,.55) 40% 60%, transparent 60% 100%),
    linear-gradient(225deg, transparent 0 40%, rgba(165,195,85,.55) 40% 60%, transparent 60% 100%);
}

/* style B : vague */
.doodle.b::after{
  background-size: 28px 10px;
  background-image:
    radial-gradient(circle at 6px 8px, rgba(115,165,205,.45) 0 5px, transparent 6px),
    radial-gradient(circle at 20px 2px, rgba(115,165,205,.45) 0 5px, transparent 6px);
}

/* style C : marker */
.doodle.c::after{
  height: 12px;
  border-radius: 10px;
  background-size: 1px 1px;
  background-image: linear-gradient(90deg, rgba(255,242,0,.0), rgba(255,242,0,.0));
  background-color: rgba(255,242,0,.65);
  transform: rotate(var(--rot, -1.4deg));
}

/* variations "pseudo-aléatoires" auto */
p .doodle:nth-child(3n)::after{ --rot: 1.2deg; }
p .doodle:nth-child(4n)::after{ --rot: -2.2deg; opacity: .82; }
p .doodle:nth-child(5n)::after{ opacity: .70; }

/* ============================================================
   LOGO — EFFET NEIGE (UNIQUEMENT EN CAS DE NEIGE)
   Active si #logoWrap a la classe .meteo-snow
============================================================ */

.logo-wrap{
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.logo-wrap.meteo-snow::after{
  content:"";
  position:absolute;
  inset:-18%;
  z-index: 3;
  pointer-events:none;

  background:
    radial-gradient(rgba(255,255,255,.85) 1px, transparent 2px),
    radial-gradient(rgba(255,255,255,.75) 1px, transparent 2px),
    radial-gradient(rgba(255,255,255,.65) 1px, transparent 2px);

  background-size: 18px 18px, 26px 26px, 34px 34px;
  opacity: .6;
  animation: snow 10s linear infinite;

  /* optionnel: flocons uniquement sur la zone du logo, pas trop “hors cadre” */
  border-radius: 999px;
}

@keyframes snow{
  from{ background-position: 0 -120px, 0 -160px, 0 -200px; }
  to{ background-position: 0 220px, 0 260px, 0 320px; }
}

@media (prefers-reduced-motion: reduce){
  .logo-wrap.meteo-snow::after{ animation:none !important; }
}
.footer-nav ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .6rem;
}

.footer-nav a{
  color: var(--c-ink);
  text-decoration: none;
  font-weight: 500;
  position: relative;
}

.footer-nav a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--c-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.footer-nav a:hover::after{
  transform: scaleX(1);
}

.footer-note a{
  font-weight: 600;
}
.footer-election{
  margin-top: 1rem;
  padding: .9rem 1rem;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(165,195,85,.18),
    rgba(115,165,205,.18)
  );
  border-left: 4px solid var(--c-brand);
  font-size: .95rem;
  line-height: 1.45;
}

.footer-election strong{
  font-weight: 700;
}

.footer-election a{
  display: inline-block;
  margin-top: .3rem;
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--c-brand);
}

.footer-election a:hover{
  opacity: .85;
}
.footer-nav{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}

.footer-btn{
  display: inline-flex;
  align-items: center;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: var(--c-bg-2);
  color: var(--c-ink);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}

.footer-btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
/* Base bouton */
.footer-btn{
  display: inline-flex;
  align-items: center;
  padding: .45rem .85rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

/* Couleurs par thème */
.btn-actus{
  background: linear-gradient(135deg, #E58B3A, #F2B36D);
}

.btn-webcams{
  background: linear-gradient(135deg, #3A8BE5, #73A5CD);
}

.btn-histoire{
  background: linear-gradient(135deg, #6B8E4E, #A5C355);
}

/* Hover */
.footer-btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  opacity: .95;
}
.footer-inner{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Desktop */
@media (min-width: 768px){
  .footer-inner{
    flex-direction: row;
    align-items: flex-start;
  }

  .footer-left{
    flex: 1;
  }

  .footer-nav{
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: .6rem;
    margin-top: 0;
  }
}
.footer-title{
  font-weight: 700;
  letter-spacing: .2px;
}

.footer-left{
  max-width: 720px;
}
/* Layout footer */
.footer-inner{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px){
  .footer-inner{
    flex-direction: row;
    align-items: flex-start;
  }

  .footer-left{
    flex: 1;
  }

  /* Boutons à droite + empilés */
  .footer-nav{
    display: flex;
    flex-direction: column;      /* <-- empilé */
    align-items: flex-end;       /* <-- collé à droite */
    gap: .6rem;
    margin-top: 0;
    min-width: 260px;            /* optionnel : évite le retour à la ligne bizarre */
  }

  .footer-btn{
    white-space: nowrap;         /* garde chaque bouton sur 1 ligne */
  }
}
/* État initial (avant apparition) */
.reveal{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
  will-change: opacity, transform;
}

/* État visible */
.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* Un mini “stagger” pour les boutons */
.footer-nav .footer-btn.reveal{
  transition-duration: .4s;
}

/* Accessibilité : pas d'animation si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ✅ FIX Pixel/portrait : empêcher la justification qui étire les espaces */
.eng-card,
.eng-card *{
  text-align: left !important;
  text-justify: auto !important;
  white-space: normal !important;
}

.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
  margin: .25rem 0 1rem;
  font-size: .95rem;
  color: rgba(15,15,16,.72);
}
.breadcrumbs a{ color: inherit; text-decoration: none; }
.breadcrumbs a:hover{ text-decoration: underline; }

.cp{
  background: var(--c-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.cp-head{
  padding: clamp(18px, 3vw, 28px);
  background: linear-gradient(135deg, rgba(165,195,85,.18), rgba(115,165,205,.16));
  border-bottom: 1px solid rgba(15,15,16,.08);
}

.cp-kicker{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
  margin-bottom: .75rem;
}

.cp-badge{
  display:inline-flex;
  align-items:center;
  padding:.35rem .6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  background: rgba(165,195,85,.20);
  border: 1px solid rgba(165,195,85,.35);
}

.cp-meta{
  font-size: .95rem;
  color: rgba(15,15,16,.72);
}

.cp-lead{
  margin: 1rem 0 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(15,15,16,.86);
}

.cp-body{
  padding: clamp(18px, 3vw, 28px);
}

.cp-body p{
  line-height: 1.75;
  margin: 0 0 1rem;
}

.cp-quote{
  margin: 1.25rem 0;
  padding: 1rem 1rem 1rem 1.1rem;
  border-left: 4px solid var(--c-brand-2);
  background: var(--c-bg-2);
  border-radius: var(--radius-sm);
}
.cp-quote p{ margin: 0 0 .6rem; }
.cp-quote footer{ color: rgba(15,15,16,.72); }

.cp-highlights{
  margin-top: 1.25rem;
  padding: 1rem;
  background: rgba(115,165,205,.10);
  border: 1px solid rgba(115,165,205,.22);
  border-radius: var(--radius-sm);
}
.cp-highlights h2{
  margin: 0 0 .65rem;
  font-size: 1.1rem;
}
.cp-list{
  margin: 0;
  padding-left: 1.1rem;
}
.cp-list li{
  margin: .4rem 0;
  line-height: 1.6;
}

.cp-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top: 1.25rem;
}

.cp-sep{
  margin: 1.5rem 0;
  border: 0;
  height: 1px;
  background: rgba(15,15,16,.10);
}

.cp-contact h2{
  margin: 0 0 .5rem;
  font-size: 1.1rem;
}
.cp-contact-line{
  margin: 0 0 .75rem;
}
.cp-note{
  margin: 0;
  color: rgba(15,15,16,.72);
}

@media print{
  #site-header, #site-footer, .breadcrumbs, .cp-actions, .skip-link{ display:none !important; }
  body{ background:#fff !important; }
  .cp{ box-shadow:none !important; }
  .cp-head{ background:#fff !important; }
}
.aside-stack{
  display: flex;
  flex-direction: column;
  gap: 16px; /* espace entre les deux aside */
}
/* ============================================================
   FIX SIMULATEUR (#simulateur) — lisible sur mobile + no cut
   ============================================================ */

/* 0) Empêche les cartes de couper le contenu */
#simulateur .card,
#simulateur .calc,
#simulateur .note{
  overflow: visible !important;
}

/* 1) La grille globale : 2 colonnes sur desktop, 1 sur mobile (déjà OK mais on sécurise) */
#simulateur .calc{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 980px){
  #simulateur .calc{
    grid-template-columns: 1fr;
  }
}

/* 2) Chaque ligne inputs : label + 2 champs qui restent utilisables */
#simulateur .field-row{
  grid-template-columns: minmax(0, 1fr) 140px 140px;
  gap: 10px;
  align-items: center;
}

/* Tablettes / petits écrans : label au-dessus + champs côte à côte */
@media (max-width: 720px){
  #simulateur .field-row{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "label label"
      "v c";
  }
  #simulateur .field-row label{ grid-area: label; }
  #simulateur .field-row input#vA,
  #simulateur .field-row input#vB,
  #simulateur .field-row input#vC{ grid-area: v; }
  #simulateur .field-row input#cA,
  #simulateur .field-row input#cB,
  #simulateur .field-row input#cC{ grid-area: c; }
}

/* Très petit écran : tout en colonne */
@media (max-width: 420px){
  #simulateur .field-row{
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "v"
      "c";
  }
}

/* 3) Sécurise les inputs (évite qu’ils débordent / se compressent bizarrement) */
#simulateur .input{
  width: 100%;
  min-width: 0;              /* super important en grid */
  box-sizing: border-box;
}

/* 4) Le tableau “Résultat” : scroll horizontal si besoin */
#simulateur .table-wrap{
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
#simulateur .table-wrap table{
  min-width: 520px;          /* tu l’as déjà, on force le scroll */
  width: max-content;
}
/* ============================================================
   SIMULATEUR — en pleine largeur (1 colonne) comme le reste
   ============================================================ */

/* 1) Dans la section simulateur : la grille = 1 colonne */
#simulateur .grid{
  grid-template-columns: 1fr !important;
}

/* 2) Le bloc calc (form + résultat) = 1 colonne aussi */
#simulateur .calc{
  grid-template-columns: 1fr !important;
}

/* 3) Les lignes de saisie : label + 2 champs, mais sans chevauchement */
#simulateur .field-row{
  grid-template-columns: minmax(0, 1fr) 160px 160px !important;
  gap: 10px;
}

/* 4) Mobile : tout en colonne pour être nickel */
@media (max-width: 720px){
  #simulateur .field-row{
    grid-template-columns: 1fr !important;
  }
}

/* 5) Sécurité anti-débordement */
#simulateur .input{
  min-width: 0;
}

/* 6) Résultat : tableau scrollable si besoin */
#simulateur .table-wrap{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
#simulateur .table-wrap table{
  min-width: 520px;
}
/* ============================================================
   SIMULATEUR — FIX MOBILE (évite coupe à droite + inputs trop larges)
   ============================================================ */
@media (max-width: 520px){

  /* 1) Empêche toute fuite horizontale */
  #simulateur, #simulateur *{
    max-width: 100%;
  }

  /* 2) Formulaire en 1 colonne (zéro risque de débordement) */
  #simulateur .field-row{
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  /* 3) Inputs vraiment “responsive” */
  #simulateur .input{
    width: 100%;
    min-width: 0;
  }

  /* 4) Le bloc calc ne doit pas forcer une largeur */
  #simulateur .calc{
    grid-template-columns: 1fr !important;
  }

  /* 5) Résultat : scroll horizontal si nécessaire */
  #simulateur .table-wrap{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  #simulateur .table-wrap table{
    min-width: 520px;
    width: max-content;
  }
}
@media (max-width: 520px){
  #simulateur .card,
  #simulateur .note{
    overflow: visible !important;
  }
}
/* ==========================================================
   TEAM — STRUCTURE (grille + photo cadrée)
   (à remettre si tu as supprimé trop de code)
========================================================== */

.team-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-top: 18px;
}

.team-card{
  grid-column: span 12;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  overflow: hidden;
}

@media (min-width: 520px){
  .team-card{ grid-column: span 6; }
}
@media (min-width: 900px){
  .team-card{ grid-column: span 4; }
}

.team-card__btn{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  display: block;
  color: inherit;
}

.team-card__media{
  position: relative;
  aspect-ratio: 4 / 5;  /* ✅ garde une carte homogène */
  background: #f2f4f7;
}

.team-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;    /* ✅ recadre correctement */
  display: block;
}

/* ==========================================================
   TEAM — RESET PROPRE (à coller TOUT EN BAS de styles.css)
   - Nom/métier fixes en bas
   - Phrase+engagement en haut au survol
   - Mot-clé seulement au survol
========================================================== */

/* 0) Carte */
.team-card{
  position: relative;
  overflow: hidden;
}

/* 1) MOT-CLÉ (bandeau vertical) : caché par défaut */
.team-card::before{
  content: attr(data-keyword);
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 42px;

  display: grid;
  place-items: center;

  writing-mode: vertical-rl;
  transform: rotate(180deg);

  font-family: "Oregano", cursive;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0f0f10;

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

  border-right: 1px solid rgba(15,15,16,.12);
  box-shadow: 6px 0 18px rgba(0,0,0,.12);
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;

  opacity: 0;                 /* ✅ caché */
  transition: opacity .2s ease;

  z-index: 6;
}

/* 2) NOM / MÉTIER : fixes en bas */
.team-card__meta{
  position: absolute;
  left: 58px;         /* laisse la place au bandeau vertical */
  right: 14px;
  bottom: 12px;
  top: auto;

  display: flex;
  flex-direction: column;
  gap: 2px;

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

  background: rgba(0,0,0,.60);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.7);

  z-index: 6;
}

/* 3) PHRASE + ENGAGEMENT : en HAUT mais cachés par défaut */
.team-card__overlay{
  position: absolute;
  top: 0; left: 0; right: 0; bottom: auto;

  display: flex;
  align-items: flex-start;

  padding: 14px 14px 64px; /* “dégradé” qui descend un peu */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.80),
    rgba(0,0,0,.45),
    rgba(0,0,0,0)
  );

  color: #fff;
  opacity: 0;               /* ✅ caché */
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease;

  z-index: 5;
}

/* panneau intérieur (si tu l’utilises) */
.team-card__overlay-inner{
  width: 100%;
  padding-left: 58px; /* place bandeau vertical */
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* 4) APPARITION au survol + focus clavier */
@media (hover:hover) and (pointer:fine){
  .team-card:hover::before,
  .team-card:focus-within::before{
    opacity: 1;
  }

  .team-card:hover .team-card__overlay,
  .team-card:focus-within .team-card__overlay{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (hover:none), (pointer:coarse){
  .team-card.is-open .team-card__overlay{
    opacity: 1;
    transform: translateY(0);
  }
  .team-card.is-open::before{
    opacity: 1;
  }
}
/* =========================
   AVANT / MAINTENANT — gros symbole translucide
========================= */
.before-after .card{
  position: relative;
  overflow: hidden;          /* pour que le symbole reste dans la carte */
  isolation: isolate;        /* protège les z-index */
}

/* La "couche" symbole */
.before-after .card::before{
  content: "";
  position: absolute;
  inset: 0;                  /* remplit la card */
  display: grid;
  place-items: center;
  font-size: clamp(90px, 18vw, 170px); /* énorme, responsive */
  font-weight: 900;
  opacity: .64;              /* transparence */
  z-index: 0;
  pointer-events: none;
}

/* Les contenus au-dessus du symbole */
.before-after .card > *{
  position: relative;
  z-index: 1;
}

/* Croix rouge (Avant) */
.before-after .is-before::before{
  content: "✖";
  color: #d83a3a;
}

/* Coche verte (Maintenant) */
.before-after .is-now::before{
  content: "✔";
  color: var(--c-brand);
}
.share-wrap{ position: relative; display:inline-block; }

.btn-share{
  padding:.55rem .9rem;
  border:0;
  border-radius:999px;
  cursor:pointer;
}

.share-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:220px;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  z-index:1000;
}

.share-menu a,
.share-menu button{
  border:0;
  background:transparent;
  text-decoration:none;
  text-align:left;
  cursor:pointer;
  padding:10px 10px;
  border-radius:10px;
  color:inherit;
  font:inherit;
}

.share-menu a:hover,
.share-menu button:hover{
  background:rgba(0,0,0,.06);
}
.hero{
  position: relative;
  overflow: hidden;
}

/* Ruban de victoire */
.victory-ribbon{
  position: absolute;
  left: 50%;
  bottom: 170px;
  transform: translateX(-50%) rotate(-12deg);
  width: min(92%, 1200px);
  z-index: 25;
  text-align: center;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,0.28);
 }

/* Fond type drapeau français flottant */
.victory-ribbon::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 180% at 0% 50%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 38%),
    radial-gradient(120% 180% at 100% 50%, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0) 42%),
    repeating-linear-gradient(
      -8deg,
      rgba(255,255,255,0.11) 0px,
      rgba(255,255,255,0.11) 14px,
      rgba(0,0,0,0.05) 14px,
      rgba(0,0,0,0.05) 28px
    ),
    linear-gradient(
      90deg,
      #1f4fbf 0%,
      #1f4fbf 33.33%,
      #ffffff 33.33%,
      #ffffff 66.66%,
      #d91e2e 66.66%,
      #d91e2e 100%
    );
  animation: flagWave 5s ease-in-out infinite;
  transform-origin: center center;
}

/* Léger voile pour améliorer la lisibilité du texte */
.victory-ribbon::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.03) 48%,
    rgba(0,0,0,0.08) 100%
  );
  pointer-events: none;
}

.victory-ribbon span{
  position: relative;
  z-index: 2;
  display: block;
  padding: 22px 34px;
  font-weight: 900;
  font-size: clamp(1rem, 2vw, 2rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #111;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.9),
    0 2px 8px rgba(255,255,255,0.35);
}

/* Animation légère type drapeau */
@keyframes flagWave{
  0%   { transform: perspective(900px) rotateX(0deg) skewY(0deg); }
  25%  { transform: perspective(900px) rotateX(2deg) skewY(-1deg); }
  50%  { transform: perspective(900px) rotateX(0deg) skewY(1deg); }
  75%  { transform: perspective(900px) rotateX(-2deg) skewY(-1deg); }
  100% { transform: perspective(900px) rotateX(0deg) skewY(0deg); }
}

/* Mobile / tablette */
@media (max-width:768px){

  .victory-ribbon{
    left:50%;
    bottom:40px;
    width:96%;
    
    /* correction centrage */
    transform:translate(-50%,0) rotate(-8deg);

  }

  .victory-ribbon span{
    padding:12px 16px;
    font-size:0.9rem;
  }

}

@media (max-width: 480px){
  .victory-ribbon{
    bottom: 222px;
    width: 98%;
    transform: translateX(-50%) rotate(-7deg);
  }

  .victory-ribbon span{
    padding: 12px 12px;
    font-size: 0.82rem;
    line-height: 1.1;
  }
}