/* =========================================================
   Aurélien Taché - feuille de style unique
   Couleurs de la charte LFI (violet, rouge), mise en page dans
   l'esprit des sites de députés les mieux faits : capitales
   condensées, cartes arrondies, pastilles, filet rouge.

   PLAN
   1.  Réglages : couleurs, polices, échelles, bases HTML
   2.  Structure et en-tête
   3.  Pastilles, boutons, liens d'action
   4.  Héros de l'accueil
   5.  Cadre commun des sections
   6.  Bandeau de soutien et formulaires
   7.  Cartes et « à la une »
   8.  Fil daté
   9.  Vidéos
   10. Bande sombre « Ce que je défends »
   11. Contact et réseaux
   12. Annonce du livre
   13. Pages intérieures
   14. Pied de page
   15. Impression
   ========================================================= */

:root {
  /* Charte LFI */
  --violet: #4c0297;
  --violet-fonce: #260150;
  --violet-clair: #f5f3f8;
  --violet-trait: #e2dee8;
  --rouge: #d1271c;
  --rouge-fonce: #a51e15;
  --charbon: #1b1a1f;
  --charbon-doux: #5c5a63;
  --creme: #ffffff;

  --gris: #f1f0f2;          /* fond des cartes */
  --gris-fonce: #e6e4e9;
  --creme-doux: #faf8ea;    /* second ton des cartes à la une */
  --trait: #e4e2e6;

  --rayon: 16px;
  --rayon-petit: 11px;
  --pastille: 999px;
  --ombre: 0 1px 2px rgba(27, 26, 31, 0.04), 0 10px 30px rgba(27, 26, 31, 0.06);
  --transition: 160ms ease;

  --max: 1240px;
  --gouttiere: clamp(1.25rem, 4vw, 3rem);

  --t-xs: 0.875rem;
  --t-s: 1rem;
  --t-base: 1.0625rem;
  --t-m: 1.25rem;
  --t-l: clamp(1.5rem, 2.6vw, 2.1rem);
  --t-xl: clamp(1.9rem, 3.8vw, 2.9rem);
  --t-xxl: clamp(2.5rem, 7vw, 5.25rem);

  /* Titres : Public Sans Black (substitut libre de Config Variable Black) */
  --titres: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Corps de texte : Gowun Batang (substitut libre de Config Variable) */
  --corps: "Gowun Batang", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--charbon);
  font-family: var(--corps);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--titres);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* Respiration autour des titres courants (hors composants) */
h2 + p, h3 + p, h4 + p, h2 + ul, h3 + ul { margin-top: 0.9rem; }
/* Un titre suivi d'un formulaire ou d'une liste de pastilles a besoin
   de plus d'air qu'un titre suivi d'un paragraphe. */
h2 + form, h3 + form, h2 + .communes, h2 + p + h2, ul + h2, p + h3, ul + h3 { margin-top: 2rem; }
.section__tete + *, .carte h3 + p, .coordonnee h3 + p, .dossiers h3 + p,
.transparence h3 + p, .video h3 + p { margin-top: 0; }

a { color: inherit; }
a, .bouton, .nav a, .combats a, .sommaire a, .reseaux a, .carte, .fleche {
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition);
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
}

img, svg { max-width: 100%; }

.contenu {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  background: var(--violet);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

.intro { font-size: var(--t-m); max-width: 46rem; }
.mention { font-size: var(--t-xs); color: var(--charbon-doux); }

/* =========================================================
   2. Structure et en-tête
   ========================================================= */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--creme);
}
.entete[data-defile="true"] { box-shadow: var(--ombre); }

.entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 78px;
}

.marque { display: inline-flex; align-items: center; text-decoration: none; }
.marque img { height: 40px; width: auto; display: block; }
.logo--clair { display: none; }

.nav ul { display: flex; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  border-radius: var(--pastille);
  font-family: var(--titres);
  font-weight: 700;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.nav a:hover { background: var(--gris); }
.nav a[aria-current="page"] { background: var(--violet); color: #fff; }

.burger {
  display: none;
  font-family: var(--titres);
  font-weight: 600;
  font-size: var(--t-s);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: transparent;
  border: 2px solid currentColor;
  border-radius: var(--pastille);
  padding: 0.4rem 1.1rem;
  cursor: pointer;
  color: inherit;
}

@media (max-width: 900px) {
  .burger { display: inline-block; }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--creme);
    border-bottom: 1px solid var(--trait);
    padding: 0.75rem var(--gouttiere) 1.25rem;
  }
  .nav[data-ouvert="true"] { display: block; }
  .nav ul { flex-direction: column; gap: 0.15rem; }
  .nav a { display: block; }
}

/* En-tête posé sur le héros, page d'accueil */
body.accueil .entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: 0;
  color: #fff;
}
body.accueil .entete .logo--sombre { display: none; }
body.accueil .entete .logo--clair { display: block; }
body.accueil .nav a:hover { background: rgba(255, 255, 255, 0.18); }
body.accueil .nav a[aria-current="page"] { background: #fff; color: var(--violet); }
body.accueil .entete[data-defile="true"] {
  background: var(--creme);
  color: var(--charbon);
  box-shadow: var(--ombre);
}
body.accueil .entete[data-defile="true"] .logo--sombre { display: block; }
body.accueil .entete[data-defile="true"] .logo--clair { display: none; }
body.accueil .entete[data-defile="true"] .nav a:hover { background: var(--gris); }

@media (max-width: 900px) {
  body.accueil .entete {
    position: sticky;
    background: var(--creme);
    color: var(--charbon);
  }
  body.accueil .entete .logo--sombre { display: block; }
  body.accueil .entete .logo--clair { display: none; }
}

/* =========================================================
   3. Pastilles, boutons, liens d'action
   ========================================================= */

.bouton {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  background: var(--rouge);
  color: #fff;
  text-decoration: none;
  font-family: var(--titres);
  font-weight: 800;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 2px solid var(--rouge);
  border-radius: var(--pastille);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.bouton:hover { background: var(--rouge-fonce); border-color: var(--rouge-fonce); }
.bouton--creux { background: transparent; color: var(--violet); border-color: var(--violet); }
.bouton--creux:hover { background: var(--violet); color: #fff; }
.section--encre .bouton--creux { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.section--encre .bouton--creux:hover { background: #fff; color: var(--violet-fonce); }

.lire {
  font-family: var(--titres);
  font-size: var(--t-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--rouge);
}
.lire:hover { text-decoration: underline; }
span.lire { color: var(--charbon-doux); }

/* =========================================================
   4. Héros de l'accueil
   ========================================================= */

.heros {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(84vh, 700px);
  background: var(--violet-fonce);
  overflow: hidden;
}
.heros__fond, .heros__fond img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 16%;
  display: block;
}
.heros::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(92deg,
      rgba(24, 4, 48, 0.94) 0%,
      rgba(24, 4, 48, 0.84) 30%,
      rgba(24, 4, 48, 0.32) 52%,
      rgba(24, 4, 48, 0.04) 68%),
    linear-gradient(180deg, rgba(24, 4, 48, 0.6) 0%, rgba(24, 4, 48, 0) 26%);
}
.heros__contenu {
  position: relative;
  z-index: 2;
  color: #fff;
  padding-block: clamp(6rem, 12vw, 9rem) clamp(3.5rem, 7vw, 5.5rem);
}
/* Le nom est le logotype lui-même, pas un texte composé : le dessin est
   donc rigoureusement identique à celui de l'en-tête et du pied de page. */
.heros__titre { margin: 0; }
.heros__titre img {
  display: block;
  width: clamp(15rem, 34vw, 26rem);
  height: auto;
}
.heros__role {
  margin-top: 1.1rem;
  font-size: var(--t-m);
  color: #efeaf5;
}

@media (max-width: 900px) {
  .heros { display: block; min-height: 0; }
  /* La photo reprend le flux : plus de recadrage en bandeau,
     le visage reste entier quelle que soit la hauteur d'écran. */
  .heros__fond {
    position: relative;
    inset: auto;
    display: block;
    height: auto;
  }
  .heros__fond img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    max-height: 62vh;
    object-fit: cover;
    object-position: 50% 6%;
  }
  /* Le dégradé est porté par la photo elle-même : la jonction avec
     le bloc violet est continue, sans arête. */
  .heros__fond::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 42%;
    background: linear-gradient(180deg,
      rgba(38, 1, 80, 0) 0%,
      rgba(38, 1, 80, 0.75) 55%,
      var(--violet-fonce) 100%);
    pointer-events: none;
  }
  .heros::after { display: none; }
  .heros__contenu {
    background: var(--violet-fonce);
    padding-block: 0 clamp(2.25rem, 7vw, 3rem);
    margin-top: -2.5rem;
  }
}

/* =========================================================
   5. Cadre commun des sections
   ========================================================= */

.section { padding-block: clamp(3rem, 6vw, 5rem); }
.section--gris { background: var(--gris); }
.section--sable { background: transparent; }
.section--encre { background: var(--violet-fonce); color: #fff; }
.section--encre a { color: #fff; }

.section__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.section__titre { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.section__titre.section__titre--petit { font-size: var(--t-m); }
.section__tete--sous { margin-top: 3rem; }

.section__lien {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border-radius: var(--pastille);
  background: transparent;
  border: 2px solid var(--violet);
  color: var(--violet);
  font-family: var(--titres);
  font-weight: 800;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.section__lien:hover { background: var(--violet); color: #fff; }
.section--encre .section__lien { border-color: rgba(255,255,255,0.55); color: #fff; }
.section--encre .section__lien:hover { background: #fff; color: var(--violet-fonce); }

.sommaire { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.sommaire a {
  display: inline-block;
  padding: 0.45rem 1.15rem;
  border: 2px solid var(--violet);
  border-radius: var(--pastille);
  color: var(--violet);
  font-family: var(--titres);
  font-weight: 800;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.sommaire a:hover { background: var(--violet); color: #fff; }

.duo {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }

.encadre { border-top: 1px solid var(--trait); padding: 1.35rem 0 0; }
.bloc-espace { margin-top: 2rem; }
.p-espace { margin-top: 0.75rem; }

/* =========================================================
   6. Bandeau de soutien et formulaires
   ========================================================= */

.soutien { background: var(--gris); padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.soutien__tete { max-width: 46rem; margin-bottom: 1.75rem; }
.soutien__tete .mention { margin-top: 0.6rem; }
.soutien h2 { font-size: var(--t-l); }
.soutien .mention { margin: 0; }

.formulaire {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  align-items: end;
}
.champ { display: flex; flex-direction: column; gap: 0.25rem; }
.champ label {
  font-family: var(--titres);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--charbon-doux);
}
.champ input, .champ select, .champ textarea {
  font-family: var(--corps);
  font-size: var(--t-base);
  color: var(--charbon);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--charbon-doux);
  padding: 0.5rem 0;
  border-radius: 0;
}
.champ textarea { min-height: 9rem; resize: vertical; }
.soutien .bouton { width: 100%; }
.formulaire--colonne { grid-template-columns: 1fr; }
.formulaire--colonne .bouton { width: auto; }
@media (max-width: 760px) { .formulaire { grid-template-columns: 1fr; } }

/* =========================================================
   7. Cartes et « à la une »
   ========================================================= */

.cartes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 900px) { .cartes { grid-template-columns: 1fr; } }

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--trait);
  padding: 1.1rem 0 0;
  min-height: 0;
}
.carte:hover .carte__titre a { color: var(--violet); text-decoration: underline; }
.carte__date { font-size: var(--t-s); color: var(--rouge); margin: 0; }
.carte__titre { font-size: 1.5rem; line-height: 1.05; margin: 0; }
.carte__titre a { text-decoration: none; }
.carte__titre a::after { content: ""; position: absolute; inset: 0; }
.carte p:not(.carte__date) { font-size: var(--t-s); color: var(--charbon-doux); margin: 0; }
/* Bouton flèche, en bas des cartes */
.fleche {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--violet-trait);
  color: var(--violet);
  flex: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  margin-top: auto;
  align-self: flex-end;
}
.carte:hover .fleche { background: var(--violet); border-color: var(--violet); color: #fff; }
.fleche svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* À la une : deux panneaux, crème pour le titre du livre, gris pour le
   texte. Le titre porte le lien, étiré sur tout le bloc. */
.une {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0 3rem;
  align-items: start;
  margin-bottom: 2rem;
}
/* Le panneau porte la couverture, posée sur le crème du site. */
.une__visuel {
  display: grid;
  place-items: center;
  background: var(--creme-doux);
  border-top: 1px solid var(--trait);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  margin: 0;
}
.une__visuel img { width: 100%; max-width: 15rem; height: auto; display: block; box-shadow: 0 10px 28px rgba(27, 26, 31, 0.18); }
.une__corps {
  border-top: 1px solid var(--trait);
  padding: clamp(1.4rem, 2.5vw, 2rem) 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
/* Date de parution : c'est l'information qui doit accrocher en premier */
.une__date {
  font-family: var(--titres);
  font-size: var(--t-xs);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rouge);
  margin: 0;
}
.une__titre {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.05;
  margin: 0;
}
.une__titre a { text-decoration: none; }
.une__titre a::after { content: ""; position: absolute; inset: 0; }
.une__texte { font-size: var(--t-s); color: var(--charbon-doux); margin: 0; }
.une__action {
  align-self: flex-start;
  margin-top: 0.4rem;
  font-family: var(--titres);
  font-size: var(--t-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rouge);
}
@media (max-width: 900px) { .une { grid-template-columns: 1fr; } }

/* ---------- Bande défilante des ouvrages ---------- */

.ouvrages {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(50% - 0.75rem);
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0 0 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--violet) var(--gris);
}
.ouvrages::-webkit-scrollbar { height: 6px; }
.ouvrages::-webkit-scrollbar-track { background: var(--gris); border-radius: var(--pastille); }
.ouvrages::-webkit-scrollbar-thumb { background: var(--violet); border-radius: var(--pastille); }

.ouvrage {
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 0 1.5rem;
  border-top: 1px solid var(--trait);
  padding-top: 1.35rem;
}
/* Ouvrage sans couverture disponible : une seule colonne, pas de dos
   typographique qui répéterait le titre juste à côté. */
.ouvrage__couverture {
  margin: 0;
  display: grid;
  place-items: start;
  min-height: 0;
}
.ouvrage__couverture img { width: 100%; height: auto; display: block; }
.ouvrage__texte { padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; }
.ouvrage__date { font-size: var(--t-s); color: var(--rouge); margin: 0; }
.ouvrage__texte h3 { font-size: 1.25rem; line-height: 1.12; overflow-wrap: break-word; }
.ouvrage__texte p:not(.ouvrage__date) { font-size: var(--t-s); color: var(--charbon-doux); margin: 0; }

@media (max-width: 900px) {
  .ouvrages { grid-auto-columns: 88%; }
  .ouvrage { grid-template-columns: 1fr; }
  /* Ouvrage sans couverture disponible : une seule colonne, pas de dos
   typographique qui répéterait le titre juste à côté. */
.ouvrage--sans-couverture { grid-template-columns: 1fr; align-content: start; }

.ouvrage__dos { min-height: 13rem; }
  .ouvrage__couverture img { max-width: 14rem; }
  .ouvrage__texte { padding-top: 1rem; }
}

/* =========================================================
   8. Presse et travaux : liste dense sur deux colonnes
   Un filet sépare les lignes, aucun ne ferme la liste.
   ========================================================= */

.presse {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.presse li + li, .presse li:nth-child(n + 3) { border-top: 1px solid var(--trait); }
.presse a {
  display: grid;
  gap: 0.1rem;
  padding: 0.7rem 0;
  text-decoration: none;
}
.presse a:hover .presse__titre { color: var(--violet); text-decoration: underline; }
/* Entrées sans lien : même gabarit que les entrées cliquables */
.presse li > .presse__meta { display: block; padding-top: 0.7rem; }
.presse li > .presse__titre { display: block; padding-bottom: 0.7rem; margin-top: 0.1rem; }
.presse__meta {
  font-family: var(--titres);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rouge);
}
.presse__titre { font-size: var(--t-s); line-height: 1.25; }
@media (max-width: 760px) {
  .presse { grid-template-columns: 1fr; gap: 0; }
  .presse li:nth-child(n + 3) { border-top: 1px solid var(--trait); }
}

/* ---------- Flèches des bandes défilantes ---------- */

/* Elles prennent la couleur du texte de leur section : blanches sur la
   bande vidéo en fond violet, sombres sur fond clair. */
.defil { display: flex; gap: 0.4rem; margin: 0; }
.defil button {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity var(--transition);
}
.defil button:hover { opacity: 1; }
.defil button[disabled] { opacity: 0.25; cursor: default; }
.defil svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Les flèches se collent au titre, le lien « voir tout » reste à droite */
.section__tete .defil { margin-right: auto; }

/* =========================================================
   9. Vidéos
   ========================================================= */

/* Bande défilante : cinq vidéos visibles à la fois, les autres
   s'atteignent avec les flèches ou en faisant glisser.
   La barre de défilement est blanche, la bande étant sur fond violet. */
.videos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 1.1rem) / 4);
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0 0 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #fff rgba(255, 255, 255, 0.22);
}
.videos::-webkit-scrollbar { height: 6px; }
.videos::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.22); border-radius: var(--pastille); }
.videos::-webkit-scrollbar-thumb { background: #fff; border-radius: var(--pastille); }

/* Sélection de trois sur l'accueil : pas de défilement, une simple grille */
.videos--trois {
  grid-auto-flow: row;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: visible;
  padding-bottom: 0;
}
@media (max-width: 760px) { .videos--trois { grid-template-columns: 1fr; } }

.video { scroll-snap-align: start; }
@media (max-width: 1100px) { .videos { grid-auto-columns: calc((100% - 2 * 1.1rem) / 3); } }
@media (max-width: 820px) { .videos { grid-auto-columns: calc((100% - 1.1rem) / 2); } }
@media (max-width: 620px) { .videos { grid-auto-columns: 76%; } }

.video h3 { font-size: 1.0625rem; line-height: 1.18; margin: 0.7rem 0 0.25rem; }
.video p { font-size: 0.875rem; color: var(--charbon-doux); margin: 0; }
.section--encre .video p, .section--encre .mention { color: #b3a8c4; }

.video__lecteur {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--rayon-petit);
  padding: 0;
  border: 0;
  border-radius: var(--rayon-petit);
  overflow: hidden;
  background: #000;
  cursor: pointer;
  position: relative;
}
.video__lecteur img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.12);
  color: #fff;
  font-size: 1.6rem;
}
/* Miniature indisponible : un aplat sobre plutôt qu'une icône cassée */
.video__lecteur--sans-image {
  background: linear-gradient(140deg, var(--violet) 0%, var(--violet-fonce) 100%);
}
.video__lecteur--sans-image .video__play { background: transparent; }
.video__play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.12); }
.video__play {
  font-size: 1.1rem;
  color: #fff;
}
.video__play span {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--rouge);
  color: #fff;
}
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--rayon-petit); display: block; }

/* =========================================================
   10. Bande sombre « Ce que je défends »
   ========================================================= */

.bande { position: relative; background: var(--violet-fonce); color: #fff; overflow: hidden; }
.bande__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.bande__texte { padding-block: clamp(2rem, 3.5vw, 2.75rem); padding-inline: var(--gouttiere); }
.bande__texte > * { max-width: 34rem; margin-inline: auto; }
.bande__texte h2 { font-size: var(--t-l); }
.bande__texte p { margin-top: 0.75rem; color: #ded3ef; }
/* La photo est en position absolue dans sa colonne : la hauteur de la bande
   est donnée par le texte, pas par les proportions de l'image. */
.bande__photo { position: relative; align-self: stretch; min-height: 15rem; }
.bande__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 48% 30%; display: block; }

.combats { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 1.35rem 0 0; padding: 0; }
.combats a {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  border-radius: var(--pastille);
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-family: var(--titres);
  font-weight: 800;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.combats a:hover { background: #fff; color: var(--violet-fonce); border-color: #fff; }
.combats li:first-child a { background: var(--rouge); border-color: var(--rouge); }
.combats li:first-child a:hover { background: #fff; border-color: #fff; color: var(--rouge); }

@media (max-width: 900px) {
  .bande__grille { grid-template-columns: 1fr; gap: 0; }
  .bande__photo { min-height: 13rem; order: -1; }
  .bande__texte > * { max-width: none; }
}

/* =========================================================
   11. Contact et réseaux
   ========================================================= */

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

.coordonnees { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
/* Permanence sur l'accueil : une bande pleine largeur, pour ne pas
   laisser une carte isolée flotter dans la moitié gauche de la page. */
.permanence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 3rem;
  align-items: start;
  border-top: 1px solid var(--trait);
  padding: 1.35rem 0 0;
}
.permanence h3 { font-size: 1.2rem; margin-bottom: 0.3rem; }
.permanence p { font-size: var(--t-s); color: var(--charbon-doux); margin: 0; }
@media (max-width: 820px) { .permanence { grid-template-columns: 1fr; } }
.coordonnee {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1.25rem;
  border-top: 1px solid var(--trait);
  padding: 1.35rem 0 0;
}
.coordonnee__icone {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  grid-row: span 2;
}
.coordonnee__icone svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
.coordonnee h3 { font-size: 1.4rem; margin-bottom: 0.25rem; }
.coordonnee p { margin: 0; }
.coordonnee p + p { margin-top: 0.6rem; }
.coordonnee .lire { grid-column: 2; justify-self: end; margin-top: 0.75rem; }

.reseaux {
  display: grid;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.reseaux a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.45rem 0.5rem;
  border-radius: var(--rayon-petit);
  font-family: var(--titres);
  font-weight: 600;
  font-size: 1.3rem;
  text-decoration: none;
}
.reseaux a:hover { color: var(--violet); }
.reseaux span[data-marque] {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  color: #fff;
  flex: none;
}
.reseaux svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
[data-marque="facebook"] { background: #1877f2; }
[data-marque="x"] { background: #000; }
[data-marque="instagram"] { background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); }
[data-marque="youtube"] { background: #ff0000; }

/* =========================================================
   12. Annonce du livre
   ========================================================= */

/* Renvoi vers le programme du mouvement */
.programme { margin: 1.25rem 0 0; }
.programme--espace { margin-top: 2rem; }
.programme a { display: block; text-decoration: none; }
.programme img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--rayon-petit);
}
.programme span {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--titres);
  font-size: var(--t-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rouge);
}
.programme a:hover span { text-decoration: underline; }

/* Liste à tirets, à la place des puces rondes */
.tirets { list-style: none; margin: 0.9rem 0 1rem; padding: 0; }
.tirets li { position: relative; padding-left: 1.1rem; margin-bottom: 0.4rem; }
.tirets li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: var(--rouge);
  font-weight: 700;
}

/* Champ piège anti-robot : invisible à l'écran, ignoré au clavier */
.piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Photographies dans le corps des pages */
.portrait, .illustration { border-radius: var(--rayon); overflow: hidden; margin: 0; }
.portrait img, .illustration img { width: 100%; height: auto; display: block; }
.illustration { margin-top: 0; }
.illustration--carree { max-width: 25rem; }

/* =========================================================
   13. Pages intérieures
   ========================================================= */

.tete-page { background: var(--gris); padding-block: clamp(2.5rem, 6vw, 4rem); }
.tete-page h1 { font-size: var(--t-xl); text-transform: uppercase; }
.tete-page h1 + p { margin-top: 1rem; max-width: 46rem; font-size: var(--t-m); }

.dossiers { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.dossiers li { border-top: 1px solid var(--trait); padding: 1.35rem 0 0; }
.dossiers h3 { font-size: 1.45rem; margin-bottom: 0.4rem; }
.dossiers p { font-size: var(--t-s); color: var(--charbon-doux); margin: 0; }

.communes {
  list-style: none;
  margin: 1.35rem 0 1.75rem;
  padding: 0;
  line-height: 1.9;
}
.communes li {
  display: inline;
  font-family: var(--titres);
  font-weight: 700;
  font-size: var(--t-m);
  color: var(--violet);
}
.communes li + li::before { content: " · "; color: var(--violet-trait); }

.agenda { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.agenda li { border-top: 1px solid var(--trait); padding: 1.25rem 0 0; }
.agenda time, .agenda .heure {
  font-family: var(--titres);
  font-size: var(--t-s);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rouge);
  margin-right: 1rem;
}
.agenda h3 { font-size: 1.35rem; margin: 0.5rem 0 0.25rem; }
.agenda p { font-size: var(--t-s); color: var(--charbon-doux); margin: 0; }

.transparence, .transparence li {
  position: relative;
  border-top: 1px solid var(--trait);
  padding: 1.35rem 0 0;
}
.transparence h3 { font-size: 1.35rem; margin-bottom: 0.35rem; }
.transparence p { font-size: var(--t-s); color: var(--charbon-doux); }
/* La carte entière est cliquable : elle doit réagir au survol */
@media (max-width: 900px) { .transparence { grid-template-columns: 1fr; } }

/* =========================================================
   14. Pied de page
   15. Impression
   ========================================================= */

.pied {
  background: var(--charbon);
  color: #c9c6cf;
  padding-block: 2.75rem 1.75rem;
  font-size: var(--t-s);
}
.pied a { color: #fff; }
.pied__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 0.7fr);
  gap: 2rem 3rem;
  align-items: start;
}
.pied h2 {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.8rem;
  color: #fff;
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.pied li { overflow-wrap: anywhere; }
.pied__logo img { height: 54px; width: auto; display: block; }
.pied__logo p { margin-top: 0.75rem; }
.logo-lfi { display: inline-block; margin-top: 1.5rem; }
.logo-lfi img { height: 34px; width: auto; display: block; }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: 2.75rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #8f8b99;
}
.pied__bas a { color: #b5b1bd; }
.pied__bas p { margin: 0; }
@media (max-width: 900px) { .pied__grille { grid-template-columns: 1fr; } }

/* =========================================================
   15. Impression
   Un habitant imprime surtout pour garder une adresse ou un
   relevé. On retire la navigation, les fonds sombres et les
   éléments décoratifs, et on fait apparaître l'adresse des
   liens après leur libellé.
   ========================================================= */

@media print {
  .entete, .pied, .heros, .bande, .soutien, .defil,
  .section__lien, .sommaire, .video__lecteur, .programme { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.35; }
  .section, .tete-page { padding-block: 0.6cm; background: #fff !important; }
  .section + .section { border-top: 1px solid #ccc; }
  .contenu { max-width: none; padding-inline: 0; }

  .carte, .coordonnee, .dossiers li, .transparence li,
  .agenda li, .encadre, .ouvrage, .une__texte, .une__visuel {
    background: #fff !important;
    border: 1px solid #ccc;
    border-radius: 0;
    page-break-inside: avoid;
  }

  .presse { grid-template-columns: 1fr; }
  .presse li,   .presse__meta, .fil__date, .carte__date, .lire { color: #000 !important; }

  h1, h2, h3 { page-break-after: avoid; color: #000 !important; }
  img { max-width: 8cm; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  a[href^="mailto"]::after { content: ""; }
}