/* Carrousel du hero d'accueil (inc/hero-slider.php). Les diapositives sont
   empilées dans une même case de grille : la hauteur du hero est celle de la
   plus haute, et rien ne saute au changement. */
.esp-hs .esp-hs__piste { position: relative; z-index: 1; width: 100%; align-self: stretch; display: grid; }
.esp-hs .esp-hs__slide {
  grid-area: 1 / 1; position: relative; display: flex; align-items: flex-start;
  opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s;
}
.esp-hs .esp-hs__slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; }
/* Sans JavaScript : le hero du portail seul, comme avant. */
.esp-hs:not(.is-pret) .esp-hs__slide--actu { display: none; }

/* Diapositive d'actualité : la photo de l'article en plein cadre, un voile
   à gauche pour lire le texte, et le crédit en bas à droite. */
.esp-hs .esp-hs__slide--actu { color: var(--hero-1); }
.esp-hs .esp-hs__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.esp-hs .esp-hs__voile {
  position: absolute; inset: 0;
  /* Le noir du hero (--hero-bg, #141210), en voile dégradé. */
  background: linear-gradient(90deg, rgba(20,18,16,.88) 0%, rgba(20,18,16,.66) 42%, rgba(20,18,16,.12) 78%, rgba(20,18,16,0) 100%);
}
/* 🔴 Une BANDE RÉSERVÉE en bas de chaque actualité, où vivent les commandes
   (et, sur téléphone, le crédit) : le texte ne peut plus y descendre. Sans
   elle, un titre de quatre lignes poussait « Lire l'article » sous les
   commandes (reproche client du 30/09/2026). */
.esp-hs .esp-hs__slide--actu .hero__inner { position: relative; padding-bottom: 104px; }
/* Titre et chapô tenus : un titre long ne doit pas repousser tout le reste. */
.esp-hs .esp-hs__slide--actu .esp-hs__titre { font-size: clamp(28px, 3.5vw, 48px); line-height: 1.1; margin-bottom: 14px; }
/* Titre coupé après le « ? » (esp_hero_titre) : chaque partie est un bloc
   équilibré, pour qu'aucun mot ne reste seul en dernière ligne. */
.esp-hs .esp-hs__titre { text-wrap: balance; }
.esp-hs .esp-hs__l { display: block; text-wrap: balance; }
/* Deux lignes au plus (demande client du 30/09/2026). */
.esp-hs .esp-hs__chapo {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 22px;
}
.esp-hs .esp-hs__ey {
  font-family: var(--display); font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--hero-2); margin: 0 0 14px; text-shadow: none;
}
.esp-hs .esp-hs__slide--actu .esp-hs__titre { color: var(--hero-1); }
.esp-hs .esp-hs__titre a { color: inherit; text-decoration: none; }
.esp-hs .esp-hs__titre a:hover { text-decoration: underline; text-underline-offset: .12em; }
.esp-hs .esp-hs__slide--actu .esp-hs__chapo { color: var(--hero-2); }
.esp-hs .esp-hs__btn2 { border: 1.5px solid var(--hero-1); color: var(--hero-1); background: transparent; }
.esp-hs .esp-hs__btn2:hover { background: var(--hero-1); color: var(--ink); }
/* Une actualité sans photo garde le décor du portail : couleurs d'encre. */
.esp-hs .esp-hs__slide--nue { color: var(--ink); }
.esp-hs .esp-hs__slide--nue .esp-hs__titre, .esp-hs .esp-hs__slide--nue .esp-hs__chapo { color: var(--ink); }
.esp-hs .esp-hs__slide--nue .esp-hs__ey { color: var(--accent); }
.esp-hs .esp-hs__slide--nue .esp-hs__btn2 { border-color: var(--ink); color: var(--ink); }
.esp-hs .esp-hs__credit {
  /* En HAUT à droite : en bas, le panneau fixe de la newsletter le recouvrait
     (vu en production le 30/09/2026), et le crédit est obligatoire pour les
     photos CC BY-SA. Deux lignes au plus, la légende complète au survol. */
  position: absolute; right: 16px; top: 12px; margin: 0; max-width: min(42%, 520px);
  font-size: 11px; line-height: 1.35; color: var(--hero-2); text-shadow: 0 1px 4px rgba(0,0,0,.85);
  text-align: right;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Diapositive de LIVRE : fond au noir du hero, couverture à droite, posée. */
.esp-hs .esp-hs__slide--livre { background: radial-gradient(ellipse at 78% 45%, rgba(236,232,225,.09) 0%, rgba(236,232,225,0) 62%), var(--hero-bg); }
/* Couverture à GAUCHE du texte : à droite, le panneau fixe de la newsletter
   la cachait (30/09/2026). Le texte est borné pour s'arrêter avant lui. */
.esp-hs .esp-hs__livre { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: clamp(28px, 3.5vw, 56px); }
.esp-hs .esp-hs__livre .hero__content { flex: 0 1 540px; max-width: 540px; }
.esp-hs .esp-hs__auteur { font-family: var(--display); font-size: clamp(15px, 1.5vw, 18px); color: var(--hero-1); margin: 0 0 14px; }
.esp-hs .esp-hs__auteur span { color: var(--hero-2); opacity: .8; }
.esp-hs .esp-hs__couv { flex: 0 0 auto; display: block; }
.esp-hs .esp-hs__couv img {
  display: block; width: auto; height: auto; max-height: clamp(220px, 26vw, 380px); max-width: 240px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  transform: rotate(-2deg);
}

/* Commandes : en bas à DROITE (demande client du 30/09/2026), dans la bande
   réservée ; sur la diapositive du portail, sous les marcheurs, jamais sur eux. */
.esp-hs .esp-hs__nav {
  position: absolute; z-index: 2; right: var(--gutter); bottom: 22px;
  display: flex; align-items: center; gap: 8px;
  /* Sans cartouche, en blanc (demande client du 30/09/2026) : une ombre
     portée les garde lisibles sur le sable du portail comme sur les photos. */
  background: transparent; padding: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.65));
}
.esp-hs .esp-hs__nav[hidden] { display: none; }
.esp-hs .esp-hs__fleche, .esp-hs .esp-hs__pause {
  border: 0; background: transparent; color: var(--hero-1); cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%; font-size: 22px; line-height: 1;
}
/* Pause : deux barres dessinées en CSS (le glyphe « ❚❚ » n'existe pas dans
   Oswald et sortait en carré plein) ; en pause, un triangle « reprendre ». */
.esp-hs .esp-hs__pause span { display: inline-block; width: 10px; height: 12px; vertical-align: middle;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.esp-hs .esp-hs__pause[aria-pressed="true"] span { width: 0; height: 0; border-right: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid currentColor; }
.esp-hs .esp-hs__fleche:hover, .esp-hs .esp-hs__pause:hover { background: rgba(236,232,225,.16); }
/* VIGNETTES à la place des pastilles (demande client du 30/09/2026) : l'image
   de chaque diapositive et son titre, sur deux lignes au plus. La vignette
   active est pleine et soulignée, les autres en retrait. */
.esp-hs .esp-hs__points { display: flex; gap: 8px; }
.esp-hs .esp-hs__point { display: flex; align-items: center; gap: 8px; flex: 0 1 190px; min-width: 0; border: 0;
  background: transparent; cursor: pointer; padding: 4px; border-radius: 4px; color: var(--hero-1); text-align: left;
  opacity: .62; transition: opacity .2s, background .2s; }
.esp-hs .esp-hs__point:hover { opacity: .9; background: rgba(236,232,225,.12); }
.esp-hs .esp-hs__point[aria-current="true"] { opacity: 1; }
.esp-hs .esp-hs__vign { flex: none; display: block; width: 56px; height: 40px; object-fit: cover; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(236,232,225,.4); }
.esp-hs .esp-hs__vign--livre { object-position: 50% 30%; }
/* Le portail n'a pas de photo : son sable et son soleil, en miniature. */
.esp-hs .esp-hs__vign--portail { background: radial-gradient(circle at 74% 34%, #e9a15a 0 16%, rgba(233,161,90,0) 17%),
  linear-gradient(180deg, #efe4ce 0 58%, #d9c29a 58% 76%, #c9a878 76%); }
.esp-hs .esp-hs__point[aria-current="true"] .esp-hs__vign { box-shadow: 0 0 0 2px var(--hero-1); }
.esp-hs .esp-hs__vt { font-family: var(--display); font-size: 12.5px; line-height: 1.25; letter-spacing: .01em; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.esp-hs .esp-hs__point[aria-current="true"] .esp-hs__vt { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Écran moyen : six titres ne tiennent plus, l'image seule. */
@media (max-width: 1180px) { .esp-hs .esp-hs__vt { display: none; } }
@media (max-width: 620px) { .esp-hs .esp-hs__point { flex: none; } }
/* Même rendu que Strates (demande client du 30/09/2026) : une « liste
   d'articles » de site de presse mise à l'horizontale. Un panneau blanc
   bord à bord, collé au bas du bandeau, coins hauts arrondis ; dedans, pour
   chaque diapositive, une photo carrée et son titre en gras, séparés par de
   fins filets, alignés sur le texte du conteneur. Téléphone : la rangée de
   photos. */
@media (min-width: 621px) {
  .esp-hs { --hs-e: 10px; --hs-panel: 96px; }
  /* Le panneau ne RECOUVRE plus le bas de la photo (demande client du
     02/10/2026, « qu'on voie la photo ») : il passe SOUS le bandeau, dans le
     flux, sur une ligne à lui. La hauteur minimale passe du hero à la piste,
     sinon l'espace en trop gonflait le panneau. Le décor du portail (sable,
     dunes) s'arrête au-dessus du panneau pour garder ses dunes visibles. */
  .hero--charte.esp-hs { flex-wrap: wrap; min-height: 0; }
  .esp-hs .esp-hs__piste { flex: 0 0 100%; min-height: calc(580px - var(--hs-panel)); }
  .hero--charte.esp-hs .hero__scene { height: calc(100% - var(--hs-panel)); }
  .esp-hs .esp-hs__nav { position: relative; flex: 0 0 100%; left: auto; right: auto; bottom: auto; display: block; filter: none; }
  /* Angles droits et sans ombre depuis que le panneau est SOUS la photo
     (02/10/2026) : le coin arrondi laissait voir le sable du décor. */
  .esp-hs .esp-hs__points { gap: 0; background: #fff; border-radius: 0;
    padding: var(--hs-e) max(4px, calc((100% - var(--maxw)) / 2 + var(--gutter) - 14px));
    box-shadow: none; border-bottom: 1px solid var(--line); }
  .esp-hs .esp-hs__point { flex: 1 1 0; gap: 16px; padding: 0 18px; border-radius: 0; opacity: 1; color: var(--ink); background: transparent; }
  .esp-hs .esp-hs__point + .esp-hs__point { border-left: 1px solid var(--line); }
  .esp-hs .esp-hs__point:hover { background: transparent; }
  .esp-hs .esp-hs__point:hover .esp-hs__vt { color: var(--accent-dark); }
  /* Agrandies le 02/10/2026 (demande client) : 56 → 76 px, titres 15 → 18 px. */
  .esp-hs .esp-hs__vign { width: 76px; height: 76px; border-radius: 8px; box-shadow: none; }
  .esp-hs .esp-hs__point[aria-current="true"] .esp-hs__vign { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
  .esp-hs .esp-hs__vt { color: var(--ink); font-size: 18px; font-weight: 500; line-height: 1.25; letter-spacing: 0; }
  .esp-hs .esp-hs__point[aria-current="true"] .esp-hs__vt { text-decoration: none; color: var(--accent); }
  @media (max-width: 1180px) { .esp-hs .esp-hs__point { justify-content: center; } }
  /* Le panneau est désormais sous la photo : plus besoin de lui réserver
     une bande, un peu d'air suffit sous les boutons. */
  .esp-hs .esp-hs__slide--actu .hero__inner, .esp-hs .esp-hs__slide:first-child .hero__inner { padding-bottom: 56px; }
}
/* Ni flèches ni pause à l'écran, comme sur Strates : vignettes, balayage
   et flèches du clavier naviguent, et le défilement s'arrête au survol et
   au focus. La pause reste pour le clavier et les lecteurs d'écran (RGAA
   13.8), visible seulement au focus. */
.esp-hs .esp-hs__fleche { display: none; }
.esp-hs .esp-hs__pause:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.esp-hs .esp-hs__pause:focus-visible { position: absolute; right: 8px; bottom: calc(100% + 8px); }
.esp-hs button:focus-visible { outline: 2px solid var(--hero-1); outline-offset: 2px; }

@media (max-width: 620px) {
  /* Sur téléphone, le texte prend toute la largeur : le voile couvre tout. */
  .esp-hs .esp-hs__voile { background: linear-gradient(180deg, rgba(20,18,16,.55) 0%, rgba(20,18,16,.86) 100%); }
  .esp-hs .esp-hs__slide--actu .hero__content { max-width: 100%; }
  /* Téléphone : le hero a la hauteur de la diapositive du portail ; les
     autres centrent leur contenu au lieu de le coller en haut (« mal calé »,
     30/09/2026), et gardent en bas la place du crédit et des commandes. */
  /* −20 % de hauteur sur téléphone (demande client du 30/09/2026) : 626 px
     à 390 de large, 505 désormais. La diapositive du portail fixe la hauteur :
     marges, réserve au-dessus des dunes et tailles de texte resserrées. */
  .hero--charte.esp-hs { min-height: 0; }
  .esp-hs .hero__inner { padding-top: 26px; padding-bottom: 104px; }
  .esp-hs .hero__title { font-size: 30px; margin-bottom: 10px; }
  .esp-hs .hero__sub { font-size: 17px; margin-bottom: 10px; }
  .esp-hs .hero__lede { font-size: 15px; line-height: 1.5; margin-bottom: 18px; }
  .esp-hs .hero__cta { gap: 10px; }
  .esp-hs .hero__cta .btn { padding: 12px 16px; }
  .esp-hs .esp-hs__slide--actu { align-items: center; }
  .esp-hs .esp-hs__slide--actu .hero__inner { padding-top: 22px; padding-bottom: 100px; }
  .esp-hs .esp-hs__slide--actu .esp-hs__titre { font-size: 26px; }
  /* Deux boutons côte à côte : empilés, ils allongeaient la diapositive. */
  .esp-hs .esp-hs__slide--actu .hero__cta { gap: 10px; flex-wrap: nowrap; }
  .esp-hs .esp-hs__slide--actu .hero__cta .btn { padding: 12px 14px; letter-spacing: .08em; white-space: nowrap; }
  .esp-hs .esp-hs__nav { right: 12px; bottom: 14px; gap: 4px; }
  /* Téléphone : vignettes plus petites et pas de flèches (le balayage au
     doigt les remplace), pour que six vignettes et la pause tiennent. */
  .esp-hs .esp-hs__fleche { display: none; }
  .esp-hs .esp-hs__points { gap: 5px; }
  .esp-hs .esp-hs__point { padding: 2px; }
  .esp-hs .esp-hs__vign { width: 40px; height: 30px; }
  /* Livre sur téléphone : la couverture, petite, au-dessus du texte. */
  .esp-hs .esp-hs__livre { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
  .esp-hs .esp-hs__livre .hero__content { flex: none; max-width: 100%; }
  .esp-hs .esp-hs__couv { margin: 0; }
  .esp-hs .esp-hs__couv img { max-height: 88px; transform: none; }
  /* Le crédit, sur toute la largeur, juste au-dessus des commandes : en haut,
     une légende longue écrasait la rubrique. */
  .esp-hs .esp-hs__credit { top: auto; bottom: 58px; left: 16px; right: 16px; max-width: none; font-size: 10px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .esp-hs .esp-hs__slide, .esp-hs .esp-hs__slide.is-active { transition: none; }
}

/* Les vignettes INTÉGRÉES au bandeau (demande client du 06/10/2026, « plus
   naturellement dans le grand hero ») : plus de panneau blanc sous la photo,
   un voile translucide posé sur le bas de l'image, qui la laisse voir (la
   demande du 02/10 était qu'on voie la photo). Voile sombre et titres clairs
   sur les photos ; voile clair et titres foncés sur le portail, au décor de
   sable. La photo se prolonge derrière le voile. */
@media (min-width: 621px) {
  .hero--charte.esp-hs { position: relative; }
  .esp-hs .esp-hs__piste { min-height: 600px; }
  .hero--charte.esp-hs .hero__scene { height: 100%; }
  .esp-hs .esp-hs__nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; }
  .esp-hs .esp-hs__points { background: linear-gradient(180deg, rgba(18,16,14,0) 0, rgba(18,16,14,.58) 34%, rgba(18,16,14,.74) 100%);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    border-bottom: 0; padding-top: 40px; padding-bottom: 18px; transition: background .4s; }
  .esp-hs .esp-hs__point { color: var(--hero-1); }
  .esp-hs .esp-hs__point + .esp-hs__point { border-left-color: rgba(236,232,225,.2); }
  .esp-hs .esp-hs__vign { width: 60px; height: 60px; border-radius: 6px; opacity: .78; transition: opacity .2s, box-shadow .2s; }
  .esp-hs .esp-hs__point:hover .esp-hs__vign, .esp-hs .esp-hs__point[aria-current="true"] .esp-hs__vign { opacity: 1; }
  .esp-hs .esp-hs__point[aria-current="true"] .esp-hs__vign { box-shadow: 0 0 0 2px #e0a67a; }
  .esp-hs .esp-hs__vt { color: rgba(236,232,225,.82); font-size: 16px; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
  .esp-hs .esp-hs__point:hover .esp-hs__vt { color: #fff; }
  .esp-hs .esp-hs__point[aria-current="true"] .esp-hs__vt { color: #f0b98d; }
  /* Le texte de chaque diapositive remonte au-dessus du voile. */
  .esp-hs .esp-hs__slide--actu .hero__inner, .esp-hs .esp-hs__slide:first-child .hero__inner { padding-bottom: 150px; }
  /* Diapositive du portail, au décor clair : voile clair, titres foncés. */
  .esp-hs:has(.esp-hs__slide:first-child.is-active) .esp-hs__points { background: linear-gradient(180deg, rgba(250,246,238,0) 0, rgba(250,246,238,.7) 34%, rgba(250,246,238,.86) 100%); }
  .esp-hs:has(.esp-hs__slide:first-child.is-active) .esp-hs__point + .esp-hs__point { border-left-color: rgba(35,33,29,.14); }
  .esp-hs:has(.esp-hs__slide:first-child.is-active) .esp-hs__vt { color: var(--ink); text-shadow: none; }
  .esp-hs:has(.esp-hs__slide:first-child.is-active) .esp-hs__point[aria-current="true"] .esp-hs__vt { color: var(--accent); }
  .esp-hs:has(.esp-hs__slide:first-child.is-active) .esp-hs__point[aria-current="true"] .esp-hs__vign { box-shadow: 0 0 0 2px var(--accent); }
}