/* ------------------------------------------------------------------
   Charte Alliage — compte rendu du groupe Pilote.
   Bleu #020584, vert #006233, rouge #C1272D : les trois couleurs des
   deux drapeaux, le rouge en dénominateur commun. Elles s'emploient
   par touches — filets, accents, catégories — jamais en aplats larges,
   à l'exception de la bande Almanach.
   ------------------------------------------------------------------ */

:root {
  --bleu: #020584;
  --vert: #006233;
  --rouge: #c1272d;

  --encre: #10131f;
  --encre-douce: #3a3a38;
  --gris: #6b6a66;

  --ivoire: #faf7f2;
  --ivoire-fonce: #f3efe8;
  --creme: #efe9e0;
  --ligne: #e4ded4;
  --ligne-forte: #d8d1c6;

  --titre: var(--font-garamond), Georgia, 'Times New Roman', serif;
  --texte: var(--font-grotesk), 'Helvetica Neue', Arial, sans-serif;

  --marge: 88px;
  --largeur: 1440px;
}

@media (max-width: 1100px) {
  :root {
    --marge: 40px;
  }
}
@media (max-width: 720px) {
  :root {
    --marge: 20px;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--texte);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Le corps du site est en graisse 300. Or les navigateurs rendent <strong> en
   « plus gras que le parent », ce qui depuis 300 ne donne que 400 : le gras ne
   se voyait pas. On fixe donc une valeur absolue. Les règles qui suivent, plus
   loin dans cette feuille, gardent leurs propres choix — l'énoncé de l'Almanach
   et la signature de l'Édito emploient <strong> pour la couleur, pas la graisse. */
strong,
b {
  font-weight: 600;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 3px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bleu);
  color: #fff;
  padding: 12px 20px;
  z-index: 100;
}
.saut-contenu:focus {
  left: 12px;
  top: 12px;
}

/* ---------------------------- Structure ---------------------------- */

.enveloppe {
  max-width: var(--largeur);
  margin: 0 auto;
}

.section {
  padding: 110px var(--marge);
}
.section--serree {
  padding: 72px var(--marge);
}
.section--haut {
  padding-top: 0;
}

@media (max-width: 900px) {
  .section {
    padding: 64px var(--marge);
  }
  .section--serree {
    padding: 48px var(--marge);
  }
}

.bande-sombre {
  background: var(--encre);
  color: #fff;
}
.bande-bleue {
  background: var(--bleu);
  color: #fff;
}
.bande-creme {
  background: var(--ivoire-fonce);
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
}

/* ------------------------------ Texte ------------------------------ */

.surtitre {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0;
}
.surtitre--clair {
  color: #a8aef0;
}

h1,
h2,
h3 {
  font-family: var(--titre);
  font-weight: 400;
  margin: 0;
  text-wrap: pretty;
}

.titre-geant {
  font-size: clamp(38px, 5.4vw, 78px);
  line-height: 1.07;
  letter-spacing: -0.01em;
}
.titre-section {
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.1;
}
.titre-carte {
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.25;
}

.italique-bleu {
  font-style: italic;
  color: var(--bleu);
}

/* Textes justifiés : uniquement la prose suivie. La césure française est
   indispensable, sans elle le justifié écarte les mots et creuse des trous.
   Les libellés courts en colonne étroite (cartes de domaines, fonctions sous
   les portraits, étapes) restent au fer à gauche : sur deux ou trois lignes,
   justifier ne produit que des blancs. */
.chapo {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
  color: var(--encre-douce);
  margin: 0;
  max-width: 700px;
  text-align: justify;
  hyphens: auto;
}

.corps {
  font-size: 16px;
  line-height: 1.75;
  color: var(--encre-douce);
}
/* La classe est tantôt sur le conteneur, tantôt sur le paragraphe lui-même :
   les deux cas doivent être justifiés. */
.corps,
.corps p,
.corps li {
  text-align: justify;
  hyphens: auto;
}
.corps p {
  margin: 0 0 1.1em;
}
.corps p:last-child {
  margin-bottom: 0;
}
.corps h2 {
  font-size: 32px;
  margin: 1.6em 0 0.5em;
}
.corps h3 {
  font-size: 24px;
  margin: 1.5em 0 0.4em;
}
.corps ul,
.corps ol {
  padding-left: 1.2em;
  margin: 0 0 1.1em;
}
.corps li {
  margin-bottom: 0.4em;
}
.corps a {
  color: var(--bleu);
  border-bottom: 1px solid var(--bleu);
}
.corps blockquote {
  margin: 1.6em 0;
  padding-left: 24px;
  border-left: 3px solid var(--rouge);
  font-family: var(--titre);
  font-size: 24px;
  line-height: 1.4;
  color: var(--encre);
}

.mention {
  font-size: 13px;
  font-weight: 300;
  color: var(--gris);
  line-height: 1.6;
}

/* ------------------------- Filet tricolore ------------------------- */

.filet {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.filet span {
  display: block;
  height: 3px;
}
.filet span:nth-child(1) {
  width: 30px;
  background: var(--vert);
}
.filet span:nth-child(2) {
  width: 14px;
  background: var(--rouge);
}
.filet span:nth-child(3) {
  width: 46px;
  background: var(--bleu);
}

/* Sur fond bleu, les trois couleurs de la charte s'effondrent : le bleu
   disparaît complètement, le vert foncé presque. Le filet garde ses trois
   segments mais en teintes éclaircies, seule façon de rester lisible. */
.filet--clair span:nth-child(1) {
  background: #3fa46e;
}
.filet--clair span:nth-child(2) {
  background: #e8535a;
}
.filet--clair span:nth-child(3) {
  background: #ffffff;
}

.entete-bloc {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

/* ----------------------------- Boutons ----------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 15px 32px;
  font-family: var(--texte);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--bleu);
  background: var(--bleu);
  color: #fff;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.bouton:hover {
  background: #01046a;
  border-color: #01046a;
}
.bouton--vide {
  background: transparent;
  color: var(--encre);
  border-color: var(--encre);
  font-weight: 500;
}
.bouton--vide:hover {
  background: var(--encre);
  color: var(--ivoire);
}
.bouton--clair {
  background: #fff;
  color: var(--bleu);
  border-color: #fff;
}
.bouton--clair:hover {
  background: #e8e9fb;
  border-color: #e8e9fb;
}
.bouton--videclair {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}
.bouton--videclair:hover {
  background: rgba(255, 255, 255, 0.12);
}
.bouton[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.lien-fleche {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--bleu);
  border-bottom: 1px solid var(--bleu);
  padding: 8px 0 3px;
}
.lien-fleche:hover {
  color: var(--rouge);
  border-color: var(--rouge);
}

/* ------------------------------ Grilles ---------------------------- */

.grille {
  display: grid;
  gap: 34px;
}
.grille--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grille--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grille--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grille--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .grille--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grille--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .grille--5,
  .grille--4,
  .grille--3,
  .grille--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .grille--5,
  .grille--4,
  .grille--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grille--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.barre-titre {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  border-bottom: 1px solid var(--ligne);
  padding-bottom: 26px;
  margin-bottom: 46px;
  flex-wrap: wrap;
}

/* ------------------------------ En-tête ---------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 247, 242, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ligne);
}
.entete__interieur {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 14px var(--marge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.entete__logo img {
  height: 56px;
  width: auto;
  display: block;
}
.nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover {
  color: var(--bleu);
}
.nav a[aria-current='page'] {
  font-weight: 600;
  color: var(--bleu);
  border-bottom-color: var(--bleu);
}
.entete__bouton {
  min-height: 44px;
  padding: 12px 22px;
  font-size: 13px;
}

.menu-bascule {
  display: none;
  width: 46px;
  height: 46px;
  border: 0;
  background: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.menu-bascule span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--encre);
}

@media (max-width: 1080px) {
  .menu-bascule {
    display: flex;
  }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ivoire);
    border-bottom: 1px solid var(--ligne);
    padding: 8px var(--marge) 20px;
  }
  .nav--ouvert {
    display: flex;
  }
  .nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--ligne);
  }
  .nav a[aria-current='page'] {
    border-bottom-color: var(--ligne);
  }
  .entete__bouton {
    display: none;
  }
}

/* ------------------------------- Héros ----------------------------- */

.heros {
  position: relative;
  overflow: hidden;
  padding: 96px var(--marge);
}
.heros__marque {
  position: absolute;
  right: -60px;
  top: 40px;
  width: 540px;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}
.heros__contenu {
  position: relative;
  max-width: 1000px;
}
.heros__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
}
@media (max-width: 760px) {
  .heros__marque {
    width: 260px;
    right: -70px;
  }
}

/* --------------------------- Bandeau chiffres ---------------------- */

.chiffres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.chiffres > div {
  padding: 40px 56px;
  border-right: 1px solid var(--ligne);
}
.chiffres > div:first-child {
  padding-left: var(--marge);
}
.chiffres > div:last-child {
  border-right: 0;
}
.chiffres__valeur {
  font-family: var(--titre);
  font-size: 46px;
  line-height: 1;
}
.chiffres__legende {
  font-size: 14px;
  font-weight: 500;
  color: var(--encre-douce);
  margin-top: 10px;
}
@media (max-width: 760px) {
  .chiffres > div {
    padding: 22px 14px;
  }
  .chiffres > div:first-child {
    padding-left: var(--marge);
  }
  .chiffres__valeur {
    font-size: 32px;
  }
  .chiffres__legende {
    font-size: 12px;
  }
}

/* ------------------------------ Domaines --------------------------- */

/* Trois colonnes : huit domaines plus la carte « votre domaine n'y figure
   pas ? » font neuf cases, soit trois rangées pleines. À quatre colonnes,
   la dernière rangée n'aurait plus qu'une carte esseulée. */
.domaines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--ligne);
  border: 1px solid var(--ligne);
}
.domaine {
  background: var(--ivoire);
  padding: 32px 28px 36px;
}
.domaine__nom {
  font-family: var(--titre);
  font-size: 24px;
  margin: 18px 0 10px;
}
.domaine__texte {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gris);
}
@media (max-width: 1000px) {
  .domaines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Neuf cases sur deux colonnes laisseraient la dernière seule : l'invitation
     à écrire prend alors toute la largeur, ce qui la met d'ailleurs en valeur. */
  .domaines > :last-child {
    grid-column: 1 / -1;
  }
}

/* ------------------------------ Membres ---------------------------- */

.membre__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--creme);
  border: 1px solid var(--ligne);
  display: flex;
  align-items: center;
  justify-content: center;
}
.membre__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.membre__initiales {
  font-family: var(--titre);
  font-size: 42px;
  color: var(--bleu);
}
/* Le nom et la fonction se centrent sous le portrait : la photo est ronde,
   un texte ferré à gauche paraît décalé par rapport à son centre visuel. */
.membre__nom {
  font-family: var(--titre);
  font-size: 22px;
  line-height: 1.2;
  margin-top: 16px;
  text-align: center;
}
.membre__fonction {
  font-size: 13px;
  line-height: 1.55;
  color: var(--gris);
  margin-top: 6px;
  text-align: center;
  text-wrap: pretty;
}

/* ------------------------------ Cartes ----------------------------- */

.carte {
  background: var(--ivoire);
  border: 1px solid var(--ligne);
  border-top: 3px solid var(--bleu);
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  height: 100%;
}
.carte__entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.etiquette {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.carte__pied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--ligne);
}

.article-liste {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.article-ligne {
  border-top: 1px solid var(--ligne);
  padding-top: 22px;
}
.article-ligne__meta {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.article-ligne__titre {
  font-family: var(--titre);
  font-size: 24px;
  line-height: 1.3;
}
.article-ligne:hover .article-ligne__titre {
  color: var(--bleu);
}

/* --------------------- Texte de présentation ----------------------- */

/* Quatre paragraphes d'un seul tenant : une seule police, un seul corps. */
.presentation p,
.enonce p {
  text-align: justify;
  hyphens: auto;
  font-family: var(--titre);
  font-size: clamp(19px, 1.95vw, 26px);
  line-height: 1.5;
  color: var(--encre);
  margin: 0 0 0.75em;
}
.presentation p:last-child,
.enonce p:last-child {
  margin-bottom: 0;
}

/* Dans un énoncé, l'italique et le gras portent la couleur :
   à l'éditeur de choisir ce qu'il met en avant, depuis l'éditeur de texte. */
.enonce em {
  font-style: italic;
  color: var(--bleu);
}
.enonce strong {
  font-weight: 400;
  font-style: italic;
  color: var(--rouge);
}

/* --------------------------- Formulaires --------------------------- */

.champ {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.champ__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--encre);
}
.champ__aide {
  font-size: 12.5px;
  color: var(--gris);
  line-height: 1.5;
}
.champ input[type='text'],
.champ input[type='email'],
.champ input[type='url'],
.champ select,
.champ textarea {
  font-family: var(--texte);
  font-size: 15px;
  font-weight: 400;
  color: var(--encre);
  background: #fff;
  border: 1px solid var(--ligne-forte);
  padding: 14px 16px;
  min-height: 48px;
  width: 100%;
}
.champ textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}
.champ input::placeholder,
.champ textarea::placeholder {
  color: #8d887f;
}
.champ--erreur input,
.champ--erreur select,
.champ--erreur textarea {
  border-color: var(--rouge);
}
.erreur {
  font-size: 13px;
  color: #8c2a2f;
  font-weight: 500;
}

.puces {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.puce {
  position: relative;
  display: inline-flex;
}
.puce input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.puce span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid var(--ligne-forte);
  border-radius: 999px;
  font-size: 14px;
  color: var(--encre-douce);
  background: #fff;
  cursor: pointer;
}
.puce input:checked + span {
  background: var(--bleu);
  border-color: var(--bleu);
  color: #fff;
  font-weight: 500;
}
.puce input:focus-visible + span {
  outline: 2px solid var(--bleu);
  outline-offset: 2px;
}

.case {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.case input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--bleu);
}
.case label {
  font-size: 13px;
  line-height: 1.6;
  color: var(--gris);
}

.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.message {
  padding: 16px 18px;
  font-size: 14.5px;
  line-height: 1.6;
  border: 1px solid;
}
.message--ok {
  background: #eff8f2;
  border-color: #c6e6d3;
  color: #0a6b39;
}
.message--ko {
  background: #fbeff0;
  border-color: #efcbce;
  color: #8c2a2f;
}

/* ---------------------------- Pied de page ------------------------- */

.pied {
  background: var(--encre);
  color: #fff;
  padding: 72px var(--marge) 36px;
}
.pied__grille {
  max-width: var(--largeur);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px repeat(3, minmax(0, 1fr));
  gap: 56px;
  padding-bottom: 52px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.pied__logo {
  height: 88px;
  width: auto;
  display: block;
}
.pied__titre {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9096ae;
  margin-bottom: 16px;
}
.pied__liens {
  display: flex;
  flex-direction: column;
}
.pied__liens a,
.pied__liens span {
  font-size: 14px;
  font-weight: 300;
  color: #e6e7ee;
  line-height: 44px;
}
.pied__liens a:hover {
  color: #fff;
  text-decoration: underline;
}
.pied__reseaux {
  display: flex;
  gap: 2px;
  margin-top: 14px;
}
.pied__reseaux a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pied__bas {
  max-width: var(--largeur);
  margin: 0 auto;
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12.5px;
  font-weight: 300;
  color: #9096ae;
}
.pied__bas a:hover {
  color: #fff;
}
@media (max-width: 900px) {
  .pied__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}
@media (max-width: 520px) {
  .pied__grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------ Divers ----------------------------- */

.deux-colonnes {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 80px;
}
.deux-colonnes--inverse {
  /* Autonome : la variante est employée sans .deux-colonnes à plusieurs
     endroits. Sans display et gap ici, ces blocs s'empilaient sans gouttière. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 80px;
}
@media (max-width: 1000px) {
  .deux-colonnes,
  .deux-colonnes--inverse {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

.encadre {
  border: 1px solid var(--ligne);
  background: #fff;
  padding: 30px;
}
.encadre--clair {
  border-color: rgba(255, 255, 255, 0.28);
  background: transparent;
}

.etapes {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.etape {
  display: flex;
  gap: 16px;
  align-items: baseline;
}
.etape__numero {
  font-family: var(--titre);
  font-size: 22px;
  width: 26px;
  flex-shrink: 0;
}
.etape__titre {
  font-size: 15px;
  font-weight: 600;
}
.etape__texte {
  font-size: 13px;
  line-height: 1.55;
  color: #c7cbf0;
}
.etape__texte--sombre {
  color: var(--gris);
}

.vide {
  border: 1px dashed var(--ligne-forte);
  padding: 40px;
  text-align: center;
  color: var(--gris);
  font-size: 15px;
}

/* ------------------- Bandeau de photos qui défile ------------------- */

.bandeau {
  overflow: hidden;
  padding: 44px 0;
  /* Les bords s'estompent : le ruban semble venir de plus loin que l'écran. */
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.bandeau__ruban {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: bandeau-defile var(--duree, 60s) linear infinite;
}

/* Au survol, on s'arrête : sinon impossible de regarder une photo. */
.bandeau:hover .bandeau__ruban,
.bandeau:focus-within .bandeau__ruban {
  animation-play-state: paused;
}

.bandeau__photo {
  margin: 0;
  flex: 0 0 auto;
  width: 340px;
}

.bandeau__photo img {
  display: block;
  width: 100%;
  height: 226px;
  object-fit: cover;
  background: var(--creme);
}

.bandeau__photo figcaption {
  font-size: 12.5px;
  color: var(--gris);
  margin-top: 10px;
  line-height: 1.5;
}

@keyframes bandeau-defile {
  from {
    transform: translateX(0);
  }
  /* La moitié exactement : le ruban est dupliqué, la boucle est invisible. */
  to {
    transform: translateX(calc(-50% - 11px));
  }
}

/* Un défilement perpétuel peut provoquer un malaise réel. Quand la personne
   a demandé moins d'animations, le ruban ne bouge plus et devient une
   galerie que l'on fait défiler soi-même. */
@media (prefers-reduced-motion: reduce) {
  .bandeau__ruban {
    animation: none;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .bandeau__photo {
    scroll-snap-align: start;
  }
  .bandeau {
    mask-image: none;
    -webkit-mask-image: none;
  }
}

@media (max-width: 720px) {
  .bandeau__photo {
    width: 260px;
  }
  .bandeau__photo img {
    height: 174px;
  }
}

/* ---------------------- Bouton de soutien -------------------------- */

.bouton-soutien {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 4px 8px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--bleu);
  font-family: var(--texte);
  font-size: 13px;
  font-weight: 600;
}
.bouton-soutien:hover {
  color: var(--rouge);
}

/* ---------------------------------------------------------------------------
   L'Édito — panneaux façon diaporama.

   Reprend la mise en page des éditos d'Alliage : le texte à gauche, la phrase
   forte détachée à droite dans un aplat coloré, le numéro en bas. Ce n'est pas
   une image : c'est du texte, lisible par un moteur de recherche comme par un
   lecteur d'écran, et qui se réorganise sur un téléphone.
   --------------------------------------------------------------------------- */

.edito__panneau {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 74px var(--marge) 80px;
  border-top: 1px solid var(--ligne);
  position: relative;
}
.edito__panneau:first-child { border-top: 0; }

/* Un panneau sur deux inverse le fond, pour marquer le changement de page. */
.edito__panneau--creme { background: var(--ivoire-fonce); }

.edito__texte p {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.8;
  color: var(--encre-douce);
  text-align: justify;
  hyphens: auto;
  margin: 0 0 1.15em;
}
.edito__texte p:last-child { margin-bottom: 0; }

.edito__citation {
  margin: 0;
  padding: 38px 34px;
  background: var(--bleu);
  color: #fff;
  font-family: var(--titre);
  font-size: clamp(21px, 2vw, 29px);
  line-height: 1.32;
  text-wrap: pretty;
  position: relative;
}
.edito__citation--vert  { background: var(--vert); }
.edito__citation--rouge { background: var(--rouge); }

.edito__numero {
  position: absolute;
  right: var(--marge);
  bottom: 26px;
  font-family: var(--titre);
  font-size: 15px;
  color: var(--encre-legere, #9a958c);
  letter-spacing: .08em;
}

.edito__signature {
  padding: 56px var(--marge) 8px;
  border-top: 1px solid var(--ligne);
}

@media (max-width: 900px) {
  .edito__panneau {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding: 46px var(--marge) 58px;
  }
  .edito__citation { padding: 28px 24px; }
  .edito__numero { bottom: 18px; }
}

/* En-tête de l'Édito : le titre à gauche, le portrait de l'auteur à droite.
   Savoir qui signe fait partie du propos — d'où le portrait dès l'ouverture,
   et non relégué en bas de page. */
.edito__entete {
  padding: 72px var(--marge) 56px;
}
.edito__entete__grille {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: 60px;
  align-items: center;
}
.edito__portrait {
  margin: 0;
}
.edito__portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 4px solid var(--bleu);
}
/* La signature ferme l'édito, comme la dernière page du document imprimé. */
.edito__signataire {
  line-height: 1.5;
  padding-top: 6px;
  border-top: 3px solid var(--bleu);
  display: inline-block;
}
.edito__signataire strong {
  display: block;
  font-family: var(--titre);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  color: var(--encre);
}
.edito__signataire span {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--encre-douce);
}

@media (max-width: 900px) {
  .edito__entete { padding: 46px var(--marge) 34px; }
  .edito__entete__grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .edito__portrait { max-width: 240px; }
}

/* ---------------------------------------------------------------------------
   Vidéo en façade : une image et un bouton, le lecteur YouTube ne se charge
   qu'au clic. Même cadre 16:9 avant et après, pour que la page ne saute pas.
   --------------------------------------------------------------------------- */
.video__facade,
.video__lecteur {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--bleu);
  overflow: hidden;
}
.video__facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.video__facade:hover img { transform: scale(1.02); }
.video__fond {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.video__fond img {
  width: 22%;
  height: auto;
  object-fit: contain;
  opacity: .25;
}
.video__bouton {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 5, 132, .08);
  transition: background .2s ease;
}
.video__facade:hover .video__bouton { background: rgba(2, 5, 132, .18); }
.video__bouton svg {
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .3));
  transition: transform .2s ease;
}
.video__facade:hover .video__bouton svg { transform: scale(1.08); }
.video__facade:focus-visible {
  outline: 3px solid var(--rouge);
  outline-offset: 3px;
}