/* ============================================================
   HISTOIRE (page article personnalité) — Caractère Libre
   Figma node : 1526-1280

   Dépendances chargées AVANT ce fichier :
     tokens.css · main.css · components.css · shared.css · hp.css
   hp.css fournit tous les styles .etl__* et .btn-lire
   shared.css fournit .col-lecture (colonne lecture 779px)

   Structure de page :
     · Fond page gris (#f7f7f6) : nav, retour, en-tête
     · Carte blanche (.histoire-card) border-radius 28px (tous les coins) :
         image · lead+player+share · texte · ETL · actuellement
     · Player fixe bleu #1e4b9c en position fixed bottom
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   FOND PAGE
══════════════════════════════════════════════════════════ */

body {
  background: var(--color-page); /* #f7f7f6 gris clair */
}


/* ══════════════════════════════════════════════════════════
   BLOC 1 — EN-TÊTE (désormais DANS la carte blanche)
   Le padding-top de la carte gère l'espace haut (70px).
══════════════════════════════════════════════════════════ */

.histoire-header {
  padding-top:    0;
  padding-bottom: var(--space-10);
  text-align:     center;            /* alignement centré comme les autres pages */
}

.histoire-header__date {
  font-family:    var(--font-display);
  font-size:      28px;
  font-weight:    var(--weight-regular);
  color:          var(--color-text);
  text-transform: uppercase;
  margin: 0px 0px 10px 0px;
}

.histoire-header__titre {
  font-family:    var(--font-display);
  font-size:      62px;              /* conforme à .bloc-entete__titre */
  font-weight:    var(--weight-black);
  color:          var(--color-text);
  line-height:    var(--leading-tight);
  margin-bottom:  var(--space-2);
  margin-top:     0;
}

.histoire-header__auteur {
  font-family:    var(--font-display);
  font-size:      28px;              /* conforme à l'en-tête domaine/shared */
  font-weight:    var(--weight-regular);
  color:          var(--color-text);
  line-height:    var(--leading-tight);
  text-transform: uppercase;
  margin:         0;
}


/* ══════════════════════════════════════════════════════════
   CARTE BLANCHE — enveloppe tous les blocs 2-6
══════════════════════════════════════════════════════════ */

.histoire-card {
  max-width:      var(--container-max); /* 1180px */
  margin-left:    auto;
  margin-right:   auto;
  margin-top:     var(--space-12);       /* espace sous le retour-wrap */
  background:     var(--color-white);
  border-radius:  28px;                 /* arrondi sur les 4 coins */
  overflow:       hidden;
  padding-top:    70px;                  /* marge haute interne de la carte */
  padding-bottom: var(--space-16);      /* espace sous l'ETL avant fermeture de la carte */

  /* Largeurs internes (référence : grille 12 col du site) :
     --gut-1 = 1 colonne (visuel + citation)
     --gut-2 = 2 colonnes (reste du contenu) */
  --gut-1: calc(var(--col) + var(--col-gap));        /* ≈ 100px  */
  --gut-2: calc(var(--col) * 2 + var(--col-gap) * 2); /* ≈ 200px */
}

/* Les blocs internes utilisent .container : on neutralise sa largeur
   pour appliquer des paddings latéraux par "colonnes" à la place. */
.histoire-card > .histoire-header > .container,
.histoire-card > section > .container,
.histoire-card > article > .container {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* Reste du contenu : 2 colonnes de chaque côté */
.histoire-card > .histoire-header,
.histoire-card > .histoire-lead,
.histoire-card > .histoire-texte {
  padding-left:  var(--gut-2);
  padding-right: var(--gut-2);
}

/* Visuel image à la une + citation (ETL) : 1 colonne de chaque côté */
.histoire-card > .histoire-image {
  padding-left:  var(--gut-1);
  padding-right: var(--gut-1);
}


/* ══════════════════════════════════════════════════════════
   BLOC 2 — IMAGE À LA UNE
══════════════════════════════════════════════════════════ */

.histoire-image {
  padding-top: var(--space-6);
  padding-bottom: var(--space-10);
}

.histoire-image-contenu {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.histoire-image__figure {
  margin: 0;
}

.histoire-image__photo {
  display:          block;
  width:            100%;
  height:           560px;
  object-fit:       cover;
  object-position:  top center;
  border-radius:    12px;
}

.histoire-image__credit {
  display:     block;
  margin-top:  var(--space-2);
  font-family: var(--font-body);
  font-size:   10px;
  color:       var(--color-text-tertiary);
}


/* ══════════════════════════════════════════════════════════
   BLOC 3 — LEAD + PLAYER INLINE + PARTAGE
══════════════════════════════════════════════════════════ */

.histoire-lead {
  /* padding-top réduit pour que l'écart crédit-photo → lead__texte soit
     identique à l'écart header__auteur → image__figure (space-10 + space-6). */
  padding-top: var(--space-6);
  padding-bottom: var(--space-20);
}

/* Citation d'intro — Big Shoulders Display Regular 49px/60px */
.histoire-lead__texte {
  font-family:   var(--font-display);
  font-size:     48px;
  font-weight:   var(--weight-regular);
  line-height:   60px;
  color:         var(--color-text); /* #36344C */
  margin-bottom: var(--space-20);
  margin-top:    0;
  text-align: center;
  /* Équilibre les lignes : évite qu'un mot court ou une ponctuation
     (, ; …) se retrouve seul sur une ligne, surtout sur mobile. */
  text-wrap: balance;
}

/* ── Ligne player + boutons share ── */

.histoire-player-row {
  display:      flex;
  align-items:  center;
  gap:          var(--space-6);
  border-top:   0px solid var(--color-border);
  padding-top:  var(--space-5);
  flex-wrap:    wrap;
}

/* Sans player audio : le bloc partage est centré dans la page. */
.histoire-player-row--no-player {
  justify-content: center;
}

/* ── Player inline (côté gauche de la ligne) ── */

.histoire-player {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  flex:        1;
  min-width:   220px;
}

.histoire-player__play {
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      var(--color-blue);
  color:           var(--color-white);
  border:          none;
  cursor:          pointer;
  transition:      background var(--transition-fast);
}

.histoire-player__play:hover,
.histoire-player__play:focus-visible {
  background: var(--color-blue-dark);
  outline:    none;
}

.histoire-player__play .icon-play,
.histoire-player__play .icon-pause {
  display: block;
}

/* Boutons ±15 s (player inline, fond clair → picto bleu via currentColor) */
.histoire-player__skip {
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  padding:         0;
  border:          none;
  background:      none;
  color:           var(--color-blue);
  cursor:          pointer;
  transition:      color var(--transition-fast), opacity var(--transition-fast);
}

.histoire-player__skip:hover,
.histoire-player__skip:focus-visible {
  color:   var(--color-blue-dark);
  outline: none;
}

.histoire-player__skip svg { display: block; }

.histoire-player__track-wrap {
  flex:    1;
  cursor:  pointer;
  padding: var(--space-3) 0;
}

.histoire-player__track {
  position:      relative;
  height:        4px;
  background:    var(--color-border);
  border-radius: var(--radius-pill);
  cursor:        pointer;
  touch-action:  none; /* permet le glissement tactile sans scroller la page */
}

/* Zone tactile élargie (invisible) : le rail visible ne fait que 4px, on
   agrandit la cible de préhension au doigt sans changer l'apparence. */
.histoire-player__track::before {
  content:  "";
  position: absolute;
  left: 0;
  right: 0;
  top:    -14px;
  bottom: -14px;
}

.histoire-player__fill {
  position:       absolute;
  left:           0;
  top:            0;
  height:         100%;
  width:          0%;
  background:     var(--color-blue);
  border-radius:  var(--radius-pill);
  transition:     width 0.1s linear;
  pointer-events: none;
}

.histoire-player__time {
  font-family:          var(--font-body);
  font-size:            14px;
  font-weight:          var(--weight-semibold);
  color:                var(--color-text);
  min-width:            34px;
  text-align:           right;
  font-variant-numeric: tabular-nums;
}

.histoire-player__sep {
  font-family: var(--font-body);
  font-size:   13px;
  color:       var(--color-text-tertiary);
}

.histoire-player__duration {
  font-family:          var(--font-body);
  font-size:            14px;
  color:                var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}


/* ── Boutons partage (côté droit de la ligne) ── */

.histoire-share {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  flex-shrink: 0;
}

.histoire-share__label {
  font-family:    var(--font-body);
  font-size:      11px;
  font-weight:    var(--weight-semibold);
  color:          var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  white-space:    nowrap;
}

.histoire-share__buttons {
  display: flex;
  gap:     var(--space-2);
}

.share-btn {
  padding:         8px 14px;
  border-radius:   var(--radius-pill);
  background:      var(--color-surface);
  color:           var(--color-text);
  text-decoration: none;
  font-family:     var(--font-body);
  font-size:       13px;
  font-weight:     var(--weight-semibold);
  transition:      background var(--transition-fast), color var(--transition-fast);
  border:          none;
}

.share-btn:hover,
.share-btn:focus-visible {
  background: var(--color-blue);
  color:      var(--color-white);
  outline:    none;
}




/* ══════════════════════════════════════════════════════════
   BLOC 4 — TEXTE LONG
══════════════════════════════════════════════════════════ */

.histoire-texte {
  padding-bottom: var(--space-12);
  padding-top: var(--space-8);
}

.histoire-texte .col-lecture > p {
  font-family:   var(--font-body);
  font-size:     20px;
  line-height:   36px;
  color:         var(--color-text);
  margin-bottom: var(--space-6);
}

.histoire-texte .col-lecture > p:last-child {
  margin-bottom: 0;
}

/* ── Interview (Q/R) ─────────────────────────────────────
   Filet gris clair FIN porté par le bloc : pas d'interview
   → pas de .interview → pas de filet (comportement voulu).
   Alignée sur la colonne lecture (779px, centrée). */
.interview {
  max-width: var(--col-8);            /* ≈ 779px, comme .col-lecture */
  margin: var(--space-10) auto 0;
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border);   /* 1px = plus fin que le <hr> par défaut */
}

.interview__item + .interview__item {
  margin-top: var(--space-6);
}

.interview__question {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 32px;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.interview__reponse > p {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 36px;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

.interview__reponse > p:last-child {
  margin-bottom: 0;
}

/* Vidéo embed */
.histoire-video {
  margin: var(--space-10) 0;
}

.histoire-video__wrap {
  position:        relative;
  aspect-ratio:    16 / 9;
  background:      var(--color-blue);
  border-radius:   var(--radius-lg);
  overflow:        hidden;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* Bouton play → .play-btn .play-btn--glass (components.css).
   Centré par .histoire-video__wrap (flex). Aucun style spécifique. */


/* ══════════════════════════════════════════════════════════
   BLOC 5 — ETL (col 2-11 ≈ 979px, centré dans la carte)
   Les styles .etl__* viennent de hp.css
══════════════════════════════════════════════════════════ */

.histoire-etl {
  padding: var(--space-12) 0 var(--space-10);
}

/* Conteneur centré : viewport ETL sur 10 colonnes pleines */
.histoire-etl__inner {
  max-width: calc(var(--col) * 10 + var(--col-gap) * 9); /* ≈ 979px = 10 col */
  margin-left:  auto;
  margin-right: auto;
}

/* Dots carrousel (carousel-dots est dans shared/components) */
.histoire-etl .carousel-dots {
  margin-top: var(--space-6);
}


/* ══════════════════════════════════════════════════════════
   BLOC 6 — ACTUELLEMENT (conditionnel)
   Figma : Titre 40px Black · Date 30px Black ·
           Event 40px Bold · Sub 30px Bold · Texte 20px/38px
══════════════════════════════════════════════════════════ */

.histoire-actuellement {
  /* margin-top géré par la classe .section-gap dans shared.css
     (180px desktop · 100px tablette · 64px mobile)             */
  padding-top:    var(--space-0);
  padding-bottom: 180px;   /* 180px entre la fin du texte et le footer */
}

/* Bloc Actualité absent : on reprend le même padding-bottom sur le <main> pour
   garder la respiration avant le footer (180 desktop / 100 tablette / 64 mobile). */
.histoire--sans-actualite { padding-bottom: 180px; }

/* Quand la nav entre histoires est présente, c'est elle qui porte la marge basse
   (on neutralise celle du bloc précédent pour éviter un double espacement). */
.histoire--with-nav .histoire-actuellement { padding-bottom: 0; }
.histoire--with-nav.histoire--sans-actualite { padding-bottom: 0; }

/* ══════════════════════════════════════════════════════════
   BLOC 7 — NAVIGATION ENTRE HISTOIRES (précédente / suivante)
   Flèches réutilisant le style « retour-nav » des Grands Rendez-Vous.
══════════════════════════════════════════════════════════ */
.histoire-nav {
  padding-top:    var(--space-20); /* respiration depuis le contenu au-dessus */
  padding-bottom: 180px;           /* marge avant le footer (cohérente avec la page) */
}
.histoire-nav > .container {
  max-width:       979px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-6);
}
.histoire-nav__link {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-4);
  font-family:     var(--font-body);
  font-size:       14px;
  font-weight:     var(--weight-semibold);
  color:           var(--color-text);
  text-decoration: none;
  transition:      color var(--transition-fast);
}
.histoire-nav__link:hover { color: var(--color-blue); }
.histoire-nav__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  border-radius:   50%;
  border:          1.5px solid #ccc;
  background:      #fff;
  color:           var(--color-text);
  flex-shrink:     0;
  transition:      border-color var(--transition-fast), color var(--transition-fast);
}
.histoire-nav__link:hover .histoire-nav__btn { border-color: var(--color-blue); color: var(--color-blue); }

@media (min-width: 768px) and (max-width: 1023px) {
  .histoire-nav { padding-bottom: 100px; }
}
@media (max-width: 767px) {
  .histoire-nav { padding-top: var(--space-12); padding-bottom: 64px; }
  .histoire-nav__label { display: none; } /* mobile : seulement les flèches, aux deux bords */
}

/* Même largeur que le conteneur de citation (colonne 2–11 ≈ 979px). */
.histoire-actuellement > .container {
  max-width: 979px;
}

/* Bouton Réserver : espace avant le filet */
.histoire-actuellement .article-event__btn-reserver {
  margin-top: var(--space-6);
}

/* Filet gris sous le bouton Réserver, 47px avant le texte */
.histoire-actuellement__filet {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0 47px;
}

.histoire-actuellement__titre {
  font-family:    var(--font-display);
  font-size:      40px;
  font-weight:    var(--weight-black);
  color:          var(--color-blue);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin:         0 0 var(--space-12);
}

.histoire-actuellement__date {
  font-family:    var(--font-display);
  font-size:      30px;
  font-weight:    var(--weight-black);
  color:          var(--color-blue);
  text-transform: uppercase;
  margin:         0 0 var(--space-0);
}

.histoire-actuellement__event {
  font-family:    var(--font-display);
  font-size:      40px;
  font-weight:    var(--weight-bold);
  color:          var(--color-blue);
  text-transform: uppercase;
  margin:         0 0 var(--space-0);
}

.histoire-actuellement__sub {
  font-family:    var(--font-display);
  font-size:      30px;
  font-weight:    var(--weight-bold);
  color:          var(--color-blue);
  text-transform: uppercase;
  margin:         0 0 var(--space-6);
}

/* Lignes d'actualité — liste à puces (couvre aussi les <ul>/<li> d'un wysiwyg) */
.histoire-actuellement__content {
  margin: 0;
  padding: 0;
}

/* Paragraphes : plus de puce automatique — le rédacteur ajoute une liste s'il en veut. */
.histoire-actuellement__content > p {
  font-family: var(--font-body);
  font-size:   12px;
  line-height: 20px;
  color:       var(--color-blue);
  margin:      0 0 var(--space-4);
  max-width:   490px; /* largeur de lecture définie (desktop) — conservée avec une image flottante */
}
.histoire-actuellement__content > p:last-child { margin-bottom: 0; }

/* Listes : rendu standard (puces/numéros), laissées au choix du rédacteur. */
.histoire-actuellement__content ul,
.histoire-actuellement__content ol {
  margin:       0 0 var(--space-4);
  padding-left: 1.3em;
  font-family:  var(--font-body);
  font-size:    12px;
  line-height:  20px;
  color:        var(--color-blue);
  max-width:    490px; /* même largeur de lecture que les paragraphes */
}
.histoire-actuellement__content ul { list-style: disc outside; }
.histoire-actuellement__content ol { list-style: decimal outside; }
.histoire-actuellement__content li { display: list-item; margin: 0 0 4px; }

/* Images : responsives + alignement au choix (bouton d'alignement de l'éditeur).
   « Aligner à gauche » → image à gauche, texte qui s'enroule à droite. */
.histoire-actuellement__content img { max-width: 100%; height: auto; border-radius: 8px; }
.histoire-actuellement__content .alignleft {
  float:  left;
  margin: 0 var(--space-6) var(--space-3) 0;
  max-width: 45%;
}
.histoire-actuellement__content .alignright {
  float:  right;
  margin: 0 0 var(--space-3) var(--space-6);
  max-width: 45%;
}
.histoire-actuellement__content .aligncenter { display: block; margin: 0 auto var(--space-3); }
.histoire-actuellement__content .alignnone   { display: block; margin: 0 0 var(--space-3); }
/* Le contenu qui suit une image flottante ne déborde pas de la section. */
.histoire-actuellement__content::after { content: ""; display: block; clear: both; }

/* Liens dans les actualités : soulignés */
.histoire-actuellement__content a {
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ══════════════════════════════════════════════════════════
   BLOC 7 — PLAYER FIXE (bleu, bas de page)
   Figma : background #1e4b9c · border-radius 23px 23px 0 0 · h 76px
   Layout : [identité] [contrôles centrés] [× fermer]
══════════════════════════════════════════════════════════ */

.histoire-player-fixe {
  position:      fixed;
  bottom:        0;
  left:          0;
  right:         0;
  z-index:       var(--z-modal); /* 300 */
  background:    #1e4b9c;
  border-radius: 23px 23px 0 0;
  display:       flex;
  align-items:   center;
  padding:       0 var(--space-8);
  min-height:    76px;
  gap:           var(--space-5);
  /* Apparition par slide-up — caché par défaut via [hidden] */
  transition:    transform 360ms cubic-bezier(.2,.9,.2,1),
                 opacity  300ms ease;
}

/* État visible (HTML sans [hidden]) */
.histoire-player-fixe:not([hidden]) {
  transform: translateY(0);
  opacity:   1;
}

/* Assurer que [hidden] cache bien l'élément (certains reset l'écrasent) */
.histoire-player-fixe[hidden] {
  display: none !important;
}

/* ── Identité : photo + auteur/titre ── */

.histoire-player-fixe__identity {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  flex-shrink: 0;
  width:       220px;
}

.histoire-player-fixe__photo {
  width:         47px;
  height:        47px;
  border-radius: 11px;
  object-fit:    cover;
  flex-shrink:   0;
}

.histoire-player-fixe__meta {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  overflow:       hidden;
}

.histoire-player-fixe__auteur {
  font-family:    var(--font-display);
  font-size:      14px;
  font-weight:    var(--weight-black);
  color:          var(--color-white);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height:    1;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.histoire-player-fixe__titre {
  font-family:    var(--font-display);
  font-size:      13px;
  font-weight:    var(--weight-regular);
  color:          rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  line-height:    1;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

/* ── Contrôles centrés : play · −15 · temps · barre · temps · +15 ── */

.histoire-player-fixe__controls {
  display:         flex;
  align-items:     center;
  gap:             var(--space-3);
  flex:            1;
  justify-content: center;
}

/* Bouton play — cercle 31px */
.histoire-player-fixe__play-btn {
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           31px;
  height:          31px;
  border-radius:   50%;
  border:          1.5px solid rgba(255, 255, 255, 0.5);
  background:      rgba(255, 255, 255, 0.15);
  color:           var(--color-white);
  cursor:          pointer;
  transition:      background var(--transition-fast), border-color var(--transition-fast);
}

.histoire-player-fixe__play-btn:hover,
.histoire-player-fixe__play-btn:focus-visible {
  background:   rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.9);
  outline:      none;
}

/* Icônes play/pause dans le bouton fixe */
.histoire-player-fixe__play-btn .icon-play,
.histoire-player-fixe__play-btn .icon-pause {
  display: block;
}

/* Boutons skip ±15s (picto flèche+15 ; fond bleu → picto blanc via currentColor) */
.histoire-player-fixe__skip {
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  padding:         0;
  background:      none;
  border:          none;
  color:           rgba(255, 255, 255, 0.85);
  cursor:          pointer;
  transition:      color var(--transition-fast), opacity var(--transition-fast);
}

.histoire-player-fixe__skip:hover,
.histoire-player-fixe__skip:focus-visible {
  color:   var(--color-white);
  outline: none;
}

.histoire-player-fixe__skip svg { display: block; }

/* Affichage temps courant */
.histoire-player-fixe__time-current {
  font-family:          var(--font-body);
  font-size:            13px;
  font-weight:          var(--weight-semibold);
  color:                rgba(255, 255, 255, 0.9);
  min-width:            32px;
  text-align:           right;
  font-variant-numeric: tabular-nums;
  flex-shrink:          0;
}

/* Barre de progression dans le player fixe */
.histoire-player-fixe__track-wrap {
  flex:       1;
  max-width:  311px;
  cursor:     pointer;
  padding:    var(--space-3) 0;
  flex-shrink: 1;
}

/* Override couleurs de la barre pour le fond bleu */
.histoire-player-fixe .histoire-player__track {
  background: rgba(255, 255, 255, 0.25);
}

.histoire-player-fixe .histoire-player__fill {
  background: var(--color-white);
}

/* Durée totale */
.histoire-player-fixe__time-total {
  font-family:          var(--font-body);
  font-size:            13px;
  color:                rgba(255, 255, 255, 0.6);
  font-variant-numeric: tabular-nums;
  flex-shrink:          0;
}

/* ── Bouton Fermer (extrême droite) ── */

.histoire-player-fixe__close {
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  background:      none;
  border:          none;
  color:           rgba(255, 255, 255, 0.7);
  cursor:          pointer;
  padding:         0;
  border-radius:   50%;
  transition:      color var(--transition-fast), background var(--transition-fast);
}

.histoire-player-fixe__close:hover,
.histoire-player-fixe__close:focus-visible {
  color:      var(--color-white);
  background: rgba(255, 255, 255, 0.12);
  outline:    none;
}

/* Barre de progression mobile (sous les contrôles) */
.histoire-player-fixe__bar-mobile {
  display:   none; /* cachée sur desktop */
  position:  absolute;
  bottom:    0;
  left:      0;
  right:     0;
  height:    3px;
  background: rgba(255, 255, 255, 0.2);
}

.histoire-player-fixe__bar-mobile .histoire-player__fill {
  background: var(--color-white);
  transition: width 0.1s linear;
}

/* Padding body — réservé quand le player fixe est visible */
body.has-player-fixe {
  padding-bottom: 76px;
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — TABLETTE (768–1023px)
══════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1023px) {

  /* Marges internes réduites sur tablette */
  .histoire-card {
    --gut-1: var(--space-8);   /* 32px */
    --gut-2: var(--space-12);  /* 48px */
    padding-top: var(--space-12);
  }

  .histoire-actuellement,
  .histoire--sans-actualite { padding-bottom: 100px; }

  .histoire-header__titre  { font-size: 60px; } /* bloc-entete__titre tablette */
  .histoire-header__auteur { font-size: 40px; }

  .histoire-image__photo { height: 420px; }

  .histoire-lead__texte {
    font-size:   38px;
    line-height: 48px;
  }

  .histoire-etl__inner {
    padding-left:  var(--container-gutter);
    padding-right: var(--container-gutter);
  }

  /* Player fixe tablette */
  .histoire-player-fixe__identity { width: 180px; }
  .histoire-player-fixe__track-wrap { max-width: 220px; }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE (< 768px)
══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  .histoire-card {
    margin-top: var(--space-6);
 
    
   
}

  /* Carte flottante à 12px de chaque côté (comme les conteneurs listing +
     article-event) au lieu du plein-cadre. Gouttières internes 16px :
     contenu à 12 + 16 = 28px, cohérent avec article-event. */
  .histoire-card {
    width: calc(100% - 24px);
    --gut-1: var(--space-4);  /* 16px */
    --gut-2: var(--space-4);  /* 16px */
    padding-top: var(--space-8);
  }

  .histoire-header { padding-top: 0; padding-bottom: var(--space-0); }
  .histoire-header__date {font-size: 16px;}
  .histoire-header__titre  { font-size: 40px; } /* bloc-entete__titre mobile */
  .histoire-header__auteur { font-size: 16px; }

  .histoire-image__photo {
    height:       auto;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }

  .histoire-image {
    padding-top: var(--space-8);
    padding-bottom: var(--space-6);
}


  .histoire-lead {
    padding-top: var(--space-6);
  padding-bottom: var(--space-10);
}

  .histoire-lead__texte {
    font-size:   28px;
    line-height: 36px;
    /* Marge sous le lead réduite à l'écart crédit→lead (48px) sur mobile. */
    margin-bottom: var(--space-12);
  }


  /* Sur mobile : player + share empilés */
  .histoire-player-row {
    flex-direction: column;
    align-items:    stretch;
    gap:            var(--space-4);
  }

  .histoire-player { min-width: 0; }

  .histoire-share {
    border-top:  1px solid var(--color-border);
    padding-top: var(--space-4);
    flex-wrap:   wrap;
    justify-content: center;
  }

  /* Pas de filet au-dessus du partage s'il n'y a pas de player audio au-dessus. */
  .histoire-player-row--no-player .histoire-share {
    border-top:  none;
    padding-top: 0;
  }

  .histoire-actuellement,
  .histoire--sans-actualite { padding-bottom: 64px; }
  .histoire-actuellement__filet { margin: var(--space-5) 0 var(--space-8); }

  .histoire-texte .col-lecture > p { font-size: 14px; line-height: 21px; }
  .interview__reponse > p           { font-size: 14px; line-height: 21px; }
  .interview__question              { font-size: 14px; line-height: 21px; }
  .histoire-actuellement__content > p,
  .histoire-actuellement__content ul,
  .histoire-actuellement__content ol,
  .histoire-actuellement__content li   { font-size: 14px; line-height: 21px; }

  /* Sur mobile : l'image ne flotte plus, elle passe pleine largeur au-dessus du texte. */
  .histoire-actuellement__content .alignleft,
  .histoire-actuellement__content .alignright {
    float: none;
    max-width: 100%;
    margin: 0 0 var(--space-3);
  }

  .histoire-actuellement__titre  { font-size: 30px; }
  .histoire-actuellement__event  { font-size: 28px; }
  .histoire-actuellement__date,
  .histoire-actuellement__sub    { font-size: 20px; }

  /* Player fixe mobile — identité masquée, barre mobile visible */
  .histoire-player-fixe {
    padding:    0 var(--space-4);
    min-height: 56px;
    border-radius: 16px 16px 0 0;
  }

  .histoire-player-fixe__identity { display: none; }

  .histoire-player-fixe__controls {
    gap: var(--space-2);
  }

  .histoire-player-fixe__track-wrap { max-width: none; }

  .histoire-player-fixe__bar-mobile {
    display:  block;
    position: absolute;
    top:      0;
    left:     0;
    right:    0;
    height:   3px;
  }

  body.has-player-fixe { padding-bottom: 56px; }
}


/* ══════════════════════════════════════════════════
   CITATION — cards reprenant le format card vin
   Types : vin · vigneron · domaine · région
══════════════════════════════════════════════════ */

/* Le centrage est assuré par le .container interne — pas de décalage en dur
   (l'ancien margin-left: 80px poussait la section hors alignement). */
.histoire-citation {
  margin-top: 140px;
}

.histoire-citation__titre {
  font-family: var(--font-display);
  font-size: var(--text-40);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-blue);
  line-height: var(--leading-tight);
  margin-bottom: 36px;
}

.histoire-citation__grid {
  display: grid;
  /* 334px en plafond (minmax), pas en largeur figée : sous 1180px les cards
     rétrécissent au lieu de déborder du container. */
  grid-template-columns: repeat(3, minmax(0, 334px));
  gap: clamp(24px, 4vw, 54px);
  justify-content: start;
}

.histoire-citation__grid .cave-card {
  width: 100%;
}





/* Variantes photo (vigneron / domaine / région) : l'image couvre la boîte */
.cave-card--photo .cave-card__img {
  border-radius: 12px;
  overflow: hidden;
}

.cave-card--photo .cave-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card région : pas d'appellation, un seul libellé */
.cave-card--region .cave-card__body {
  justify-content: flex-end;
}


/* Responsive Citation */
@media (min-width: 768px) and (max-width: 1023px) {
  .histoire-citation__grid { grid-template-columns: repeat(2, 1fr); justify-content: stretch; }
  .histoire-citation__grid .cave-card { width: 100%; }
}
@media (max-width: 767px) {
  .cave-card {
      max-width: 240px;
  }
}

@media (max-width: 767px) {
  .histoire-citation { margin-top: 56px;  margin-left: 0px;}
  .histoire-citation__titre { font-size: 26px; }
  .histoire-citation__grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 16px;
    padding-bottom: var(--space-4);
  }
 

}


/* ══════════════════════════════════════════════════
   AJUSTEMENTS THÈME WORDPRESS
══════════════════════════════════════════════════ */

/* Bloc Citation : sorti de la carte blanche — il vit désormais sur le fond
   gris de la page, et sa largeur revient à la colonne 2–11 (~979px) prévue
   par la maquette, au lieu de la pleine largeur de la carte (1180px). */
.histoire-citation {
  margin-top: 110px;
}

.histoire-citation > .container {
  max-width: 979px;
}

@media (max-width: 1023px) {
  .histoire-citation { margin-top: 80px; }
}

@media (max-width: 767px) {
  .histoire-citation { margin-top: 56px; }
}