/* La Baraque TV — sections de la page principale */

/* ---------- Une seule section affichée à la fois (choisie dans le menu, voir menu.js) ---------- */
main > section:not(.active) { display: none !important; }
main > section.active {
  min-height: 100vh;
  min-height: 100svh;
  animation: entree-section .45s cubic-bezier(.2,.7,.2,1);
}
@keyframes entree-section {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  main > section.active { animation: none; }
}

/* Petit libellé orange au-dessus des titres, avec le carré de la charte */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 1rem;
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange-vif);
}
.surtitre::before {
  content: '';
  width: .6em; height: .6em;
  border: 2px solid var(--orange);
  background: radial-gradient(var(--orange) 0 30%, transparent 33%);
}

/* ---------- COUP DE PROJECTEUR ---------- */

main .projecteur {
  display: block;
  min-height: 0;
  padding: 84px clamp(16px, 5vw, 64px) clamp(40px, 7vh, 72px);
}
.projecteur__conteneur {
  max-width: 1040px;
  margin: 0 auto;
}
.projecteur .surtitre { margin-bottom: .6rem; }
.projecteur__titre {
  margin: 0 0 .6rem;
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: clamp(1.45rem, 1rem + 1.5vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: .01em;
  color: var(--texte-menu-vif);
  text-wrap: balance;
}
.projecteur__description {
  max-width: 80ch;
  margin-bottom: clamp(1rem, 2.5vh, 1.6rem);
  font-size: clamp(.9rem, .8rem + .3vw, 1rem);
  line-height: 1.55;
  color: var(--texte-menu);
}
.projecteur__description p { margin: 0 0 .6em; }
.projecteur__description p:last-child { margin-bottom: 0; }

/* Vidéo 16/9 : image d'aperçu + bouton lecture ; le lecteur Vimeo ne se charge qu'au clic */
.projecteur__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  background: #000;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

/* Description longue (« Lire la suite ») : fondu en bas du texte tronqué */
.projecteur__description.longue {
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
          mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.projecteur__item.deplie .projecteur__description { max-height: none; -webkit-mask-image: none; mask-image: none; }

/* ----- UNE SEULE VIDÉO ----- */
/* Écran en paysage (ordinateur, tablette couchée) : toute la section tient dans la hauteur de l'écran.
   Titre et description prennent leur place, la vidéo occupe tout l'espace restant
   en gardant ses proportions (elle se réduit si la description est longue). */
@media (min-aspect-ratio: 1/1) and (min-height: 480px) {
  main .projecteur--une { height: 100vh; height: 100svh; }
  /* Colonne à la largeur de la vidéo : titre et description s'alignent sur elle.
     Largeur calculée pour qu'une vidéo 16/9 tienne sous le texte dans la hauteur de l'écran. */
  .projecteur--une .projecteur__conteneur {
    /* valeur de départ ; ajustée précisément par sections.js (ajusterLargeur) */
    width: min(100%, 1120px, max(560px, (100svh - 380px) * 16 / 9));
    max-width: none;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .projecteur--une .projecteur__grille,
  .projecteur--une .projecteur__item {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .projecteur--une .projecteur__titre { margin-bottom: .8rem; }
  .projecteur--une .projecteur__description { max-width: none; }
  .projecteur--une .projecteur__zone {
    flex: 1 1 auto;
    min-height: 200px;
    container-type: size;
  }
  .projecteur--une .projecteur__video {
    width: min(100cqw, 100cqh * 16 / 9);
  }

  /* Description longue : limitée à 5 lignes (3 sur écran bas), avec « Lire la suite » */
  .projecteur--une .projecteur__description {
    max-height: calc(1.55em * 5 + .6em);
    overflow: hidden;
    margin-bottom: clamp(1.1rem, 3vh, 1.8rem);
  }
  .projecteur--une .projecteur__description.longue { margin-bottom: .4rem; }
  @media (max-height: 820px) {
    .projecteur--une .projecteur__description { max-height: calc(1.55em * 3 + .6em); }
  }
  .projecteur--une.deplie { height: auto; }
  .projecteur--une.deplie .projecteur__zone { flex: none; container-type: normal; }
  .projecteur--une.deplie .projecteur__video { width: 100%; }
}

/* ----- PLUSIEURS VIDÉOS : une colonne par vidéo (3 par rangée au plus) ----- */
.projecteur--multi .projecteur__conteneur { max-width: 1400px; }
.projecteur--multi .projecteur__grille {
  display: grid;
  grid-template-columns: repeat(var(--colonnes, 2), minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 44px);
  row-gap: 0;   /* l'espace entre rangées de vidéos est porté par la marge sous chaque vidéo */
}
/* Chaque colonne partage les rangées de la grille (sous-grille) :
   titres, descriptions et vidéos restent alignés d'une colonne à l'autre */
.projecteur--multi .projecteur__item {
  display: grid;
  /* position calculée par sections.js (rangées de 3, rangées de 2 centrées) */
  grid-column: var(--col, auto);
  grid-row: var(--ligne, auto) / span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
}
/* Chaque élément sur sa rangée, même si « Lire la suite » est absent dans une colonne */
.projecteur--multi .projecteur__titre       { grid-row: 1; }
.projecteur--multi .projecteur__description { grid-row: 2; }
.projecteur--multi .projecteur__actions     { grid-row: 3; }
.projecteur--multi .projecteur__zone        { grid-row: 4; }
.projecteur--multi .projecteur__titre { font-size: clamp(1.2rem, .85rem + .9vw, 1.75rem); }
.projecteur--multi .projecteur__description {
  max-width: none;
  max-height: calc(1.55em * 5 + .6em);
  overflow: hidden;
}
.projecteur--multi .projecteur__description.longue { margin-bottom: .4rem; }
.projecteur--multi .projecteur__zone { align-self: start; margin-bottom: clamp(36px, 6vh, 64px); }

@media (max-width: 760px) {
  .projecteur--multi .projecteur__grille { grid-template-columns: 1fr; }
  .projecteur--multi .projecteur__item { grid-column: auto; grid-row: span 4; }
}

.projecteur__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.4rem;
  margin: 0 0 clamp(.8rem, 2vh, 1.3rem);
}
.projecteur__suite {
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: .95rem;
  color: var(--orange-vif);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}
.projecteur__suite:hover, .projecteur__suite:focus-visible { color: #fff; outline: none; }
.projecteur__suite[hidden] { display: none; }
.projecteur__video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

.facade {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}
.facade img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s;
}
.facade:hover img, .facade:focus-visible img { transform: scale(1.03); filter: brightness(.85); }

.facade__lecture {
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(64px, 8vw, 92px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background-color .2s;
}
.facade__lecture::after {                 /* triangle « lecture » */
  content: '';
  position: absolute;
  left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: .9em 0 .9em 1.5em;
  border-color: transparent transparent transparent #fff;
  font-size: clamp(14px, 1.6vw, 18px);
}
.facade:hover .facade__lecture,
.facade:focus-visible .facade__lecture { transform: translate(-50%, -50%) scale(1.08); background: var(--orange-vif); }
.facade:focus-visible { outline: 3px solid var(--orange-vif); outline-offset: 4px; }

/* ---------- DERNIÈRES VIDÉOS (bandeau défilant) ---------- */

main .dernieres {
  /* bandeau centré verticalement dans l'écran */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px 0 clamp(48px, 9vh, 96px);
  --marge: clamp(16px, 5vw, 64px);
}
.dernieres__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--marge);
  margin-bottom: 1.2rem;
}
.dernieres .surtitre { margin: 0; font-size: 1.05rem; }

.dernieres__fleches { display: flex; gap: 10px; }
.fleche {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, opacity .2s;
}
.fleche svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.fleche:hover:not(:disabled), .fleche:focus-visible { background: var(--orange); border-color: var(--orange); outline: none; }
.fleche:disabled { opacity: .25; cursor: default; }
.fleche[hidden] { display: none; }

.bandeau {
  list-style: none;
  margin: 0;
  padding: 4px var(--marge) 12px;
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--marge);
  scroll-behavior: smooth;
  scrollbar-width: none;                       /* barre de défilement masquée (Firefox) */
  -webkit-overflow-scrolling: touch;
}
.bandeau::-webkit-scrollbar { display: none; } /* idem Chrome, Edge, Safari */
.bandeau > li {
  flex: 0 0 clamp(250px, 30vw, 440px);
  scroll-snap-align: start;
}

.vignette {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.vignette__image {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.vignette__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .3s;
}
.vignette:hover .vignette__image img,
.vignette:focus-visible .vignette__image img { transform: scale(1.05); filter: brightness(.8); }
.vignette .facade__lecture {
  width: 56px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8);
  transition: opacity .25s, transform .25s cubic-bezier(.2,.7,.2,1);
}
.vignette .facade__lecture::after { font-size: 11px; }
.vignette:hover .facade__lecture,
.vignette:focus-visible .facade__lecture { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.vignette:focus-visible { outline: none; }
.vignette:focus-visible .vignette__image { outline: 3px solid var(--orange-vif); outline-offset: 3px; }

.vignette__titre {
  display: block;
  margin-top: .7em;
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: clamp(1rem, .9rem + .3vw, 1.2rem);
  line-height: 1.25;
  color: var(--texte-menu-vif);
}
.vignette__date {
  display: block;
  margin-top: .25em;
  font-size: .85rem;
  color: var(--texte-menu);
}

/* ---------- PARTENAIRES ---------- */
/* Repris du site actuel : logos dans des carrés blancs bordés d'orange, nom en orange dessous */

main .partenaires {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px clamp(16px, 5vw, 64px) clamp(40px, 7vh, 72px);
}
.partenaires__conteneur {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}
.partenaires .surtitre { margin-bottom: clamp(1.4rem, 4vh, 2.4rem); font-size: 1.05rem; }

.partenaires__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;            /* dernière rangée incomplète : centrée */
  gap: clamp(14px, 2.4vh, 28px) clamp(14px, 2vw, 28px);
}
.partenaire {
  width: clamp(100px, min(9.6vw, 15vh), 136px);
  text-align: center;
}
.partenaire__logo {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 10%;
  background: #fff;
  border: 2px solid var(--orange);
  border-radius: 12px;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s;
}
.partenaire__logo img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.partenaire__lien { display: block; text-decoration: none; }
.partenaire__lien:focus-visible { outline: 3px solid var(--orange-vif); outline-offset: 4px; border-radius: 12px; }
.partenaire:hover .partenaire__logo {
  transform: translateY(-4px);
  border-color: var(--orange-vif);
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}
.partenaire__nom {
  display: block;
  margin-top: .55em;
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: clamp(.82rem, .75rem + .2vw, .95rem);
  line-height: 1.2;
  color: var(--orange-vif);
}

/* ---------- ÉQUIPE ---------- */
/* Repris du site actuel : photo carrée aux coins arrondis, nom en orange (Oswald), rôle dessous */

main .equipe {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px clamp(16px, 5vw, 64px) clamp(40px, 7vh, 72px);
}
.equipe__conteneur {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.equipe .surtitre { margin-bottom: .8rem; font-size: 1.05rem; }
.equipe__entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(1.4rem, 4vh, 2.4rem);
}
.equipe__intro {
  margin: 0;
  font-family: var(--f-menu);
  font-weight: 400;
  font-size: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  line-height: 1.25;
  color: var(--texte-menu-vif);
}
/* Carrousel : reprend .bandeau (Dernières vidéos), sans marges latérales */
.equipe .bandeau {
  --marge: 0px;
  padding-top: 6px;
  padding-bottom: 18px;              /* place pour l'ombre des photos */
  gap: clamp(18px, 2.4vw, 36px);
}
.equipe .bandeau > li.membre {
  flex: 0 0 clamp(150px, min(18vw, 28vh), 220px);
  text-align: center;
}
.membre__photo {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  background: #2a211d;
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
}
.membre__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.25);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .4s;
}
.membre:hover .membre__photo img { transform: scale(1.05); filter: none; }
.membre__nom {
  display: block;
  margin-top: .7em;
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: clamp(1rem, .9rem + .35vw, 1.25rem);
  line-height: 1.2;
  color: var(--orange-vif);
}
.membre__role {
  display: block;
  margin-top: .25em;
  font-size: clamp(.8rem, .75rem + .15vw, .9rem);
  line-height: 1.35;
  color: var(--texte-menu);
}

/* ---------- VIDÉOTHÈQUE (piste B : ronds en bandeau + grille de vidéos) ---------- */

main .videotheque {
  display: block;
  padding: 92px clamp(16px, 5vw, 64px) clamp(32px, 6vh, 64px);
}
.videotheque__conteneur { max-width: 1320px; margin: 0 auto; }

.videotheque__entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: clamp(12px, 2.5vh, 24px);
}
.videotheque .surtitre { margin-bottom: .5rem; font-size: 1.05rem; }
.videotheque__titre {
  margin: 0;
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
  line-height: 1.1;
  color: var(--texte-menu-vif);
}

/* Recherche */
.recherche {
  position: relative;
  flex: 0 1 380px;
  min-width: 240px;
}
.recherche svg {
  position: absolute;
  left: 14px; top: 50%;
  width: 20px; height: 20px;
  transform: translateY(-50%);
  fill: none; stroke: var(--texte-menu); stroke-width: 2;
  pointer-events: none;
}
.recherche input {
  width: 100%;
  padding: .75em 1em .75em 44px;
  font: inherit;
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.recherche input::placeholder { color: rgba(191,177,166,.8); }
.recherche input:focus {
  outline: none;
  border-color: var(--orange-vif);
  background: rgba(0,0,0,.3);
  box-shadow: 0 0 0 3px rgba(239,106,26,.2);
}

/* Bandeau des ronds */
.rubriques {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(10px, 2vh, 20px);
}
.rubriques__fleche { flex: none; }
.rubriques__fleche[hidden] { display: flex; visibility: hidden; }   /* garde la place, évite un saut */
.videotheque .bandeau.rubriques__liste {
  --marge: 0px;
  flex: 1;
  padding: 8px 4px 6px;
  gap: clamp(10px, 1.6vw, 22px);
}
.rubriques__liste > li { flex: 0 0 clamp(92px, 9vw, 122px); }
/* Ordinateur : toutes les rubriques sur une seule ligne, sans flèches (comme sur l'accueil) ;
   chaque rond fait au plus 122 px et rétrécit si la place manque */
@media (min-width: 900px) {
  .rubriques__fleche, .rubriques__fleche[hidden] { display: none; }
  .videotheque .bandeau.rubriques__liste {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 122px);
    justify-content: center;
    overflow: visible;
  }
}
.rubrique {
  display: block;
  width: 100%;
  padding: 0;
  text-align: center;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.rubrique img {
  display: block;
  width: 78%;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 0 3px transparent, 0 8px 20px rgba(0,0,0,.45);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.rubrique:hover img { transform: scale(1.06); }
.rubrique[aria-pressed="true"] img { box-shadow: 0 0 0 3px var(--orange), 0 8px 20px rgba(0,0,0,.45); }
.rubrique:focus-visible { outline: none; }
.rubrique:focus-visible img { box-shadow: 0 0 0 3px #fff, 0 8px 20px rgba(0,0,0,.45); }
.rubrique__nom {
  display: block;
  margin-top: .55em;
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: clamp(.8rem, .72rem + .2vw, .95rem);
  line-height: 1.15;
  color: var(--texte-menu);
  transition: color .2s;
}
.rubrique:hover .rubrique__nom,
.rubrique[aria-pressed="true"] .rubrique__nom { color: var(--orange-vif); }
.rubrique__nb { display: block; margin-top: .15em; font-size: .86rem; color: var(--texte-menu); }

/* Grille des vidéos */
.videotheque__compte {
  margin: 0 0 12px;
  font-size: .95rem;
  color: var(--texte-menu);
}
.videotheque__compte strong { color: var(--texte-menu-vif); font-weight: 600; }
.grille-vt {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: clamp(16px, 2.5vh, 26px) clamp(14px, 1.6vw, 22px);
}
.grille-vt .vignette__titre { font-size: clamp(.92rem, .85rem + .2vw, 1.05rem); }
.grille-vt .vignette .facade__lecture { width: 50px; }
.videotheque__vide { grid-column: 1 / -1; padding: 2em 0; color: var(--texte-menu); }

.vt-plus {
  display: block;
  margin: clamp(18px, 3vh, 30px) auto 0;
  padding: .7em 1.8em;
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.vt-plus:hover, .vt-plus:focus-visible { background: var(--orange); border-color: var(--orange); outline: none; }
.vt-plus[hidden] { display: none; }

@media (max-width: 700px) {
  .recherche { flex-basis: 100%; }
  /* Téléphone : flèches gardées (elles signalent qu'il y a d'autres rubriques), en plus petit */
  .rubriques { gap: 4px; }
  .rubriques__fleche { width: 34px; height: 34px; }
  .rubriques__fleche svg { width: 17px; height: 17px; }
  .grille-vt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- REPLAY ---------- */

main .replay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px clamp(16px, 5vw, 64px) clamp(32px, 6vh, 64px);
}
.replay__conteneur {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
}
.replay .surtitre { margin-bottom: .7rem; font-size: 1.05rem; }
.replay__accroche {
  margin: 0 0 .7em;
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  line-height: 1.12;
  color: var(--texte-menu-vif);
  text-wrap: balance;
}
.replay__paragraphes p {
  margin: 0 0 .7em;
  font-size: clamp(.9rem, .82rem + .25vw, 1.02rem);
  line-height: 1.55;
  color: var(--texte-menu);
}
.replay__resume-titre {
  margin: 1.1em 0 .6em;
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange-vif);
}
/* « En résumé » : trois étiquettes côte à côte */
.replay__resume {
  list-style: none;
  margin: 0 0 1.1em;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.replay__resume li {
  padding: .45em .95em;
  font-size: .92rem;
  color: var(--texte-menu-vif);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
}
.replay__question {
  margin: 0;
  font-size: clamp(.92rem, .85rem + .25vw, 1.05rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--texte-menu-vif);
}

/* Le film de la semaine OU Surprenez-moi ! : deux étiquettes-boutons, celle choisie en plein */
.replay__choix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .8rem;
  margin: 0 0 .8rem;
}
.replay__etiquette {
  display: inline-block;
  margin: 0;
  padding: .3em .8em;
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--orange);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
}
/* celle qui n'est pas choisie : contour orange (lisible), au lieu d'un orange estompé */
.replay__etiquette[aria-pressed="false"] { color: var(--orange-vif); background: transparent; box-shadow: inset 0 0 0 1.5px var(--orange-vif); }
.replay__etiquette[aria-pressed="false"]:hover { color: #fff; background: var(--orange); box-shadow: none; }
.replay__etiquette[aria-pressed]:focus-visible { box-shadow: 0 0 0 2px #fff; }
.replay__etiquette:hover, .replay__etiquette:focus-visible { opacity: 1; transform: translateY(-1px); outline: none; }
.replay__etiquette:focus-visible { box-shadow: 0 0 0 2px #fff; }
.replay__ou {
  font-family: var(--f-menu);
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-menu);
}
.replay__etiquette[hidden], .replay__ou[hidden] { display: none; }
.replay__titre-film {
  margin: .9em 0 .3em;
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: clamp(1.1rem, .95rem + .5vw, 1.45rem);
  line-height: 1.2;
  color: var(--texte-menu-vif);
}
.replay__conclusion { margin: 0; font-size: .95rem; color: var(--orange-vif); }

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

/* ---------- CONTACT ---------- */

main .contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px clamp(16px, 5vw, 64px) clamp(32px, 6vh, 64px);
}
.contact__conteneur {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}

/* Accroche (colonne de gauche) */
.contact .surtitre { margin-bottom: .8rem; font-size: 1.05rem; }
.contact__titre {
  margin: 0 0 .5em;
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem);
  line-height: 1.05;
  color: var(--texte-menu-vif);
}
.contact__texte {
  margin: 0 0 1.8em;
  font-size: clamp(1rem, .9rem + .3vw, 1.15rem);
  line-height: 1.6;
  color: var(--texte-menu);
}
.contact__infos { list-style: none; margin: 0; padding: 0; display: grid; gap: .8em; }
.contact__infos li { display: flex; align-items: center; gap: .7em; color: var(--texte-menu); }
.contact__infos svg {
  flex: none;
  width: 22px; height: 22px;
  fill: none; stroke: var(--orange-vif); stroke-width: 1.8;
}
.contact__infos a {
  color: var(--texte-menu-vif);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.3);
  transition: color .2s, border-color .2s;
}
.contact__infos a:hover, .contact__infos a:focus-visible { color: var(--orange-vif); border-color: currentColor; outline: none; }

/* Carte du formulaire (colonne de droite) */
.contact__carte {
  position: relative;
  padding: clamp(20px, 3vw, 36px);
  background: #271e1a;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.formulaire { display: grid; gap: clamp(14px, 2.2vh, 20px); }
.formulaire[hidden] { display: none; }
.formulaire__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formulaire__champ { display: grid; gap: 6px; }
.formulaire label,
.formulaire legend {
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-menu);
}
.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire textarea {
  width: 100%;
  padding: .75em .9em;
  font: inherit;
  font-size: 1rem;
  color: #fff;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.formulaire textarea { resize: vertical; min-height: 7.5em; line-height: 1.5; }
.formulaire input:focus,
.formulaire textarea:focus {
  outline: none;
  border-color: var(--orange-vif);
  background: rgba(0,0,0,.35);
  box-shadow: 0 0 0 3px rgba(239,106,26,.2);
}
.formulaire [aria-invalid="true"] { border-color: #e5484d; }

/* Motif : boutons « pilule » à choisir */
.formulaire__motifs { margin: 0; padding: 0; border: 0; min-width: 0; }
.formulaire__motifs legend { padding: 0; margin-bottom: 8px; }
.motifs { display: flex; flex-wrap: wrap; gap: 8px; }
.formulaire .motif {
  font-family: var(--f-texte);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
.motif input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.motif span {
  display: inline-block;
  padding: .45em 1em;
  font-size: .92rem;
  color: var(--texte-menu);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s;
}
.motif span:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.motif input:checked + span { color: #fff; background: var(--orange); border-color: var(--orange); }
.motif input:focus-visible + span { outline: 2px solid var(--orange-vif); outline-offset: 2px; }

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

.formulaire__erreur { margin: 0; min-height: 0; font-size: .92rem; color: #ff8a80; }
.formulaire__erreur:empty { display: none; }

.formulaire__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.formulaire__rgpd { margin: 0; flex: 1 1 220px; font-size: .88rem; line-height: 1.45; color: var(--texte-menu); }
.formulaire__envoyer {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .8em 1.7em;
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--orange);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.formulaire__envoyer svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .25s; }
.formulaire__envoyer:hover, .formulaire__envoyer:focus-visible { background: var(--orange-vif); outline: none; }
.formulaire__envoyer:hover svg { transform: translateX(4px); }
.formulaire__envoyer:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.6); }
.formulaire__envoyer[aria-busy="true"] { opacity: .7; cursor: progress; }

/* Message de remerciement après l'envoi */
.merci { text-align: center; padding: clamp(20px, 5vh, 48px) 8px; }
.merci:focus { outline: none; }
.merci svg { width: 64px; height: 64px; fill: none; stroke: var(--orange-vif); stroke-width: 1.6; }
.merci h3 {
  margin: .5em 0 .3em;
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  color: #fff;
}
.merci p { margin: 0 0 1.5em; color: var(--texte-menu); }
.formulaire__autre {
  padding: .6em 1.3em;
  font: inherit;
  color: var(--texte-menu-vif);
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  cursor: pointer;
}
.formulaire__autre:hover, .formulaire__autre:focus-visible { border-color: var(--orange-vif); color: var(--orange-vif); outline: none; }

@media (max-width: 860px) {
  .contact__conteneur { grid-template-columns: 1fr; }
  .contact__texte { margin-bottom: 1.2em; }
}
@media (max-width: 560px) {
  .formulaire__ligne { grid-template-columns: 1fr; }
  .formulaire__envoyer { width: 100%; justify-content: center; }
}

/* ---------- Fenêtre de lecture ---------- */

.lecture {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0;
  padding: clamp(12px, 3vw, 40px);
  border: 0;
  background: transparent;
  color: #fff;
}
.lecture[open] { display: grid; place-items: center; }
.lecture::backdrop { background: rgba(12, 9, 8, .92); backdrop-filter: blur(4px); }
.lecture__cadre {
  position: relative;
  width: min(100%, 1280px, (100vh - 140px) * 16 / 9);
}
.lecture__video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.lecture__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lecture__pied {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .8em;
}
.lecture__titre {
  margin: 0;
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: clamp(1rem, .9rem + .4vw, 1.3rem);
  color: var(--texte-menu-vif);
}
.lecture__fermer {
  position: absolute;
  right: 0; bottom: calc(100% + 10px);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.lecture__fermer svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.lecture__fermer:hover, .lecture__fermer:focus-visible { background: var(--orange); border-color: var(--orange); outline: none; }

.facade__duree {
  position: absolute;
  right: 12px; bottom: 12px;
  padding: .2em .55em;
  font-family: var(--f-menu);
  font-size: .9rem;
  letter-spacing: .05em;
  color: #fff;
  background: rgba(0,0,0,.65);
  border-radius: 3px;
}

/* ---------- Bouton « Partager » (Coup de projecteur, Replay, fenêtre de lecture) ---------- */
.partage { position: relative; flex: none; width: fit-content; }
.replay__film .partage { margin-top: .6rem; }
.partage__bouton {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .38em .95em;
  font-family: var(--f-menu);
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.partage__bouton svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; }
.partage__bouton:hover, .partage__bouton:focus-visible,
.partage__bouton[aria-expanded="true"] { background: var(--orange); border-color: var(--orange); outline: none; }
.partage__menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  min-width: 11rem;
  display: grid;
  padding: .35rem;
  background: #221a17;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.partage__menu[hidden] { display: none; }
.lecture .partage__menu { left: auto; right: 0; top: auto; bottom: calc(100% + 6px); }
.partage__menu a, .partage__menu button {
  display: block;
  padding: .55em .8em;
  font: inherit;
  font-size: .95rem;
  text-align: left;
  color: #fff;
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.partage__menu a:hover, .partage__menu button:hover,
.partage__menu a:focus-visible, .partage__menu button:focus-visible { background: var(--orange); outline: none; }

/* ---------- ACCUEIL QUI DÉFILE (voir menu.js) ----------
   Coup de projecteur garde l'écran entier ; les sections suivantes s'enchaînent en dessous,
   à leur hauteur naturelle, séparées par un filet. */
.mode-accueil main > section.active ~ section.active {
  min-height: 0;
  padding-top: clamp(40px, 7vh, 64px);
  padding-bottom: clamp(32px, 5vh, 48px);
  border-top: 1px solid rgba(255,255,255,.07);
  scroll-margin-top: 64px;                     /* le titre n'arrive pas sous la barre du haut */
}
.mode-accueil main .dernieres.active { justify-content: flex-start; }

/* ---------- À DÉCOUVRIR (accueil) : porte d'entrée de la vidéothèque ---------- */
main .decouvrir { display: block; padding: 92px clamp(16px, 5vw, 64px) clamp(32px, 6vh, 64px); }
.decouvrir__conteneur { max-width: 1320px; margin: 0 auto; }
.decouvrir__entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: clamp(20px, 3.5vh, 34px);
}
.decouvrir__titre {
  margin: 0;
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
  line-height: 1.15;
  color: var(--texte-menu-vif);
}
/* Ronds centrés : les 11 tiennent sur une rangée dès ~1280 px ; sinon les rangées restent équilibrées */
.decouvrir__rubriques {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 2.2vw, 28px) 12px;
}
.decouvrir__rubriques li { width: clamp(88px, 7.2vw, 112px); }
/* Ordinateur : toujours une seule rangée ; chaque rond fait au plus 112 px et rétrécit si la place manque */
@media (min-width: 900px) {
  .decouvrir__rubriques {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 112px);
    justify-content: center;
  }
  .decouvrir__rubriques li { width: auto; }
}
a.rubrique { text-decoration: none; }
/* Téléphone : les ronds en une rangée qui glisse, plutôt que quatre lignes */
/* Flèches autour des ronds : seulement quand la rangée déborde (téléphone) */
.decouvrir__bandeau { display: flex; align-items: center; gap: 4px; }
.decouvrir__bandeau > .decouvrir__rubriques { flex: 1; min-width: 0; }
.decouvrir__bandeau .rubriques__fleche[hidden] { display: none; }
@media (min-width: 641px) { .decouvrir__bandeau .rubriques__fleche { display: none; } }
@media (max-width: 640px) {
  .decouvrir__rubriques {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .decouvrir__rubriques::-webkit-scrollbar { display: none; }
  .decouvrir__rubriques { flex-wrap: nowrap; justify-content: flex-start; }
  .decouvrir__rubriques li { flex: 0 0 96px; width: auto; scroll-snap-align: start; }
  .decouvrir__bandeau .rubriques__fleche { width: 34px; height: 34px; }
  .decouvrir__bandeau .rubriques__fleche svg { width: 17px; height: 17px; }
}
.decouvrir__tout { margin: clamp(22px, 4vh, 36px) 0 0; text-align: center; }
.decouvrir__tout a {
  display: inline-block;
  padding: .7em 1.6em;
  font-family: var(--f-menu);
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  border: 1px solid var(--orange);
  border-radius: 999px;
  transition: background-color .2s;
}
.decouvrir__tout a:hover, .decouvrir__tout a:focus-visible { background: var(--orange); outline: none; }

/* ---------- PIED DE PAGE ---------- */
.pied {
  padding: clamp(28px, 5vh, 44px) clamp(16px, 5vw, 64px) clamp(70px, 10vh, 90px);   /* place pour la mascotte */
  background: #120d0b;
  border-top: 1px solid rgba(255,255,255,.07);
}
.pied__conteneur { max-width: 1240px; margin: 0 auto; display: grid; gap: 22px; text-align: center; }
.pied__partenaires { display: grid; gap: 12px; text-decoration: none; }
.pied__partenaires[hidden] { display: none; }
.pied__titre {
  font-family: var(--f-menu);
  font-size: .85rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texte-menu);
}
.pied__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pied__logos img {
  width: 44px; height: 44px;
  object-fit: contain;
  padding: 3px;
  background: #fff;
  border-radius: 8px;
  opacity: .75;
  transition: opacity .2s, transform .2s;
}
.pied__partenaires:hover img, .pied__partenaires:focus-visible img { opacity: 1; }
.pied__liens { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem; }
.pied__liens a {
  font-family: var(--f-menu);
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte-menu-vif);
  text-decoration: none;
}
.pied__liens a:hover, .pied__liens a:focus-visible { color: var(--orange-vif); outline: none; }
.pied__signature { margin: 0; font-size: .9rem; color: var(--texte-menu); }

/* ---------- COUP DE PROJECTEUR « À LA UNE » (une seule vidéo, façon Arte) ----------
   Extrait vidéo à droite, bords fondus dans le fond ; texte à gauche qui déborde dessus. */
main .projecteur--vedette { padding: 0; min-height: 100vh; min-height: 100svh; }
.vedette {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.vedette__media {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 70%;
  overflow: hidden;
  clip-path: inset(0);             /* rogne aussi le lecteur Vimeo (sinon il déborde à gauche) */
  container-type: size;
  background: var(--fond-menu);
}
.vedette__image, .vedette__extrait {
  position: absolute;
  top: 50%; left: 50%;
  border: 0;
  transform: translate(-50%, -50%);
}
.vedette__image {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: zoom-lent 24s ease-in-out infinite alternate;   /* léger mouvement en attendant l'extrait */
}
@keyframes zoom-lent { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(1.08); } }
/* Lecteur 16/9 qui couvre toute la zone, comme une image « cover » */
.vedette__extrait {
  width: max(100cqw, 177.78cqh);
  height: max(56.25cqw, 100cqh);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.vedette__media.extrait-pret .vedette__extrait { opacity: 1; }
/* Bords fondus : dégradés couleur du fond par-dessus l'image */
.vedette__media::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--fond-menu) 0%, var(--fond-menu) 2%, rgba(29,22,19,.85) 18%, rgba(29,22,19,.35) 40%, transparent 60%),
    linear-gradient(to top, var(--fond-menu) 0%, transparent 28%),
    linear-gradient(to bottom, var(--fond-menu) 0%, transparent 22%),
    linear-gradient(to left, rgba(29,22,19,.6) 0%, transparent 12%);
}

.vedette__texte {
  position: relative;
  z-index: 1;
  width: min(46%, 640px);
  margin-left: clamp(16px, 5vw, 80px);
  padding: 100px 0 clamp(40px, 7vh, 72px);
}
.vedette__rubrique {
  margin: 0 0 .35em;
  font-family: var(--f-titre);
  font-size: clamp(2.4rem, 1rem + 4.2vw, 5.4rem);
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.vedette__titre {
  margin: 0 0 .55em;
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: clamp(1.35rem, .9rem + 1.4vw, 2.3rem);
  line-height: 1.12;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,.6);
}
.vedette__description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  font-size: clamp(1rem, .92rem + .3vw, 1.18rem);
  line-height: 1.55;
  color: #f1e9e3;
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
}
.vedette__description p { margin: 0 0 .6em; }
.vedette__description.deplie { display: block; -webkit-line-clamp: unset; }
.vedette__texte .projecteur__suite { margin: .2em 0 0; }
.vedette__texte .projecteur__suite:not([hidden]) { display: table; }   /* seul sur sa ligne */
.vedette__infos {
  display: inline-block;
  margin: 1.1em 0 0;
  padding: .3em .7em;
  font-size: .9rem;
  color: #fff;
  background: rgba(0,0,0,.75);
  border-radius: 4px;
}
.vedette__infos[hidden] { display: none; }
.vedette__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 1.4em; }
.vedette__regarder {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .6em 1.3em;
  font-family: var(--f-menu);
  font-size: 1.15rem;
  color: #111;
  background: #fff;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.vedette__regarder svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.vedette__regarder:hover, .vedette__regarder:focus-visible { background: var(--orange); color: #fff; outline: none; }
/* Partager, dans le même esprit que « Regarder » (bouton rectangulaire à contour) */
.vedette .partage__bouton {
  padding: .6em 1.2em;
  font-size: 1.15rem;
  letter-spacing: 0;
  text-transform: none;
  background: rgba(0,0,0,.25);
  border: 1px solid #fff;
  border-radius: 4px;
}

/* Tablette en portrait et téléphone : l'extrait au-dessus, le texte dessous */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .vedette { display: block; min-height: 0; }
  main .projecteur--vedette { min-height: 0; }
  .vedette__media { position: relative; width: 100%; aspect-ratio: 16 / 9; }
  .vedette__media::after {
    background:
      linear-gradient(to top, var(--fond-menu) 0%, transparent 35%),
      linear-gradient(to bottom, rgba(29,22,19,.8) 0%, transparent 30%);
  }
  .vedette__texte { width: auto; margin: -2.2em clamp(16px, 5vw, 64px) 0; padding: 0 0 clamp(32px, 6vh, 56px); }
}
@media (prefers-reduced-motion: reduce) { .vedette__image { animation: none; } }

/* ---------- Lien « Suivant » en bas des écrans séparés (voir menu.js) ---------- */
.suite-ecran {
  padding: clamp(22px, 4vh, 36px) clamp(16px, 5vw, 64px);
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.07);
}
.suite-ecran[hidden] { display: none; }
.suite-ecran a {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3em .7em;
  font-family: var(--f-menu);
  text-transform: uppercase;
  text-decoration: none;
}
.suite-ecran__etiquette { font-size: .9rem; letter-spacing: .18em; color: var(--texte-menu); }
.suite-ecran__nom {
  font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  font-weight: 500;
  letter-spacing: .06em;
  color: #fff;
  transition: color .2s;
}
.suite-ecran__fleche {
  font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  color: var(--orange-vif);
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.suite-ecran a:hover .suite-ecran__nom, .suite-ecran a:focus-visible .suite-ecran__nom { color: var(--orange-vif); }
.suite-ecran a:hover .suite-ecran__fleche, .suite-ecran a:focus-visible .suite-ecran__fleche { transform: translateX(6px); }
.suite-ecran a:focus-visible { outline: none; }

/* ---------- QUI SOMMES-NOUS : présentation au-dessus de l'équipe ---------- */
.equipe [hidden] { display: none !important; }
.apropos {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-bottom: clamp(40px, 7vh, 72px);
}
.apropos__titre {
  margin: 0 0 .6em;
  font-family: var(--f-menu);
  font-weight: 500;
  font-size: clamp(1.6rem, 1rem + 1.8vw, 2.6rem);
  line-height: 1.15;
  color: #fff;
}
.apropos__paragraphes p {
  margin: 0 0 .9em;
  font-size: clamp(1rem, .94rem + .25vw, 1.12rem);
  line-height: 1.6;
  color: #e6dcd4;
}
.apropos__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.3em 0 0; }
.apropos__bouton {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .65em 1.4em;
  font-family: var(--f-menu);
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--orange);
  border: 1px solid var(--orange);
  border-radius: 999px;
  transition: background-color .2s, color .2s, border-color .2s;
}
.apropos__bouton--discret { background: transparent; border-color: rgba(255,255,255,.35); }
.apropos__bouton:hover, .apropos__bouton:focus-visible { color: #111; background: #fff; border-color: #fff; outline: none; }
.apropos__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.apropos__points li {
  padding: 14px 18px;
  font-size: 1rem;
  line-height: 1.45;
  color: #efe7e1;
  background: #271e1a;
  border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid var(--orange-vif);
  border-radius: 10px;
}
.apropos__points strong { font-family: var(--f-titre); font-weight: 400; font-size: 1.3em; color: var(--orange-vif); }
.equipe__surtitre { margin-top: 0; }
@media (max-width: 900px) { .apropos { grid-template-columns: 1fr; } }

/* Liens discrets vers les mentions légales (pied de page, formulaire de contact) */
.pied__signature a, .formulaire__rgpd a { color: inherit; text-underline-offset: 2px; }
.pied__signature a:hover, .pied__signature a:focus-visible,
.formulaire__rgpd a:hover, .formulaire__rgpd a:focus-visible { color: var(--orange-vif); outline: none; }