/* =========================================================================
   JLP Décryptage — Interviews : « le grand livre des entretiens »
   -------------------------------------------------------------------------
   Registre de magazine culturel imprimé : papier blanc, encre noire, filets
   fins, photographie en noir et blanc (filtre CSS, fichiers source intacts),
   une seule famille — Cormorant Garamond, déjà chargée par le site — et le
   lettrage « Interviews » tiré du visuel officiel de transition.
   Aucune carte arrondie, aucun verre, aucun doré.
   ========================================================================= */

.ivb-vue{
  --ivb-papier:#FBFAFA;      /* le blanc exact du visuel de transition */
  --ivb-encre:#0A0A0A;
  --ivb-gris:#5F5C57;
  --ivb-pale:#8E8A84;
  --ivb-filet:#D9D6D1;
  --ivb-serif:'Cormorant Garamond',Garamond,'Times New Roman',serif;
  background:var(--ivb-papier);color:var(--ivb-encre)}
.jlpn-vue.ivb-vue{background:var(--ivb-papier)}

/* le conteneur défilant reste #ivxDefile (position mémorisée par
   js/interviews-phase2.js) ; seule sa peau change */
.ivx-defile.ivb{background:var(--ivb-papier);color:var(--ivb-encre);
  font-family:var(--ivb-serif);-webkit-font-smoothing:antialiased;
  scroll-padding-top:56px}
.ivb *,.ivb *::before,.ivb *::after{box-sizing:border-box}
.ivb a{color:inherit}
.ivb button{font-family:inherit;font-size:inherit;font-weight:inherit;font-style:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;margin:0;padding:0;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.ivb :focus-visible{outline:2px solid var(--ivb-encre);outline-offset:3px}
.ivb-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* -------------------------------------------------------- bandeau noir */
.ivb-barre{position:sticky;top:0;z-index:5;display:flex;align-items:center;
  justify-content:space-between;gap:24px;height:46px;
  padding:env(safe-area-inset-top,0px) clamp(18px,3.4vw,52px) 0;
  min-height:calc(46px + env(safe-area-inset-top,0px));
  background:#000;color:#fff}
.ivb-marque{font-family:var(--ivb-serif);font-weight:500;font-size:13.5px;
  letter-spacing:.42em;text-decoration:none;color:#fff;white-space:nowrap}
.ivb .ivx-retour-zone{position:static;top:auto;left:auto;z-index:auto}
.ivb .ivx-retour{display:inline-flex;align-items:center;gap:6px;color:#fff;
  text-decoration:none;min-height:44px;transform:none}
.ivb .ivx-retour-rond{width:18px;height:18px;background:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0}
.ivb .ivx-retour-anneau{stroke:none}
.ivb .ivx-retour-fleche{stroke:#fff;stroke-width:1.6}
.ivb .ivx-retour-mot{display:inline;font-family:var(--ivb-serif);font-weight:500;
  font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;text-shadow:none}
@media (hover:hover){
  .ivb .ivx-retour:hover{color:#fff;transform:none}
  .ivb .ivx-retour:hover .ivx-retour-mot{text-decoration:underline;text-underline-offset:5px;
    text-decoration-thickness:1px}
}
.ivb-barre :focus-visible{outline-color:#fff}

/* -------------------------------------------------------- page */
.ivb-page{max-width:1480px;margin:0 auto;
  padding:0 clamp(18px,4.6vw,76px) calc(110px + env(safe-area-inset-bottom,0px))}

/* zone éditoriale haute : principal | filet | index */
.ivb-une{display:grid;grid-template-columns:minmax(0,1fr) 1px clamp(250px,22vw,340px);
  column-gap:clamp(28px,3.4vw,56px);padding-top:clamp(28px,4vh,44px)}
.ivb-une-principal{--wm:clamp(260px,30vw,470px);position:relative;min-width:0;padding-top:calc(var(--wm) * .15)}
.ivb-filet-v{background:var(--ivb-encre);margin-top:clamp(44px,6.5vh,78px);
  margin-bottom:clamp(40px,6vh,60px)}

/* titre : lettrage du visuel de transition */
.ivb-titre{position:absolute;z-index:2;margin:0;top:0;
  left:calc(46% - clamp(26px,2.6vw,44px));width:var(--wm);
  line-height:0;pointer-events:none}
.ivb-titre-img{display:block;width:100%;height:auto}
.ivb-titre-filet{position:absolute;left:96%;top:38%;width:clamp(50px,6vw,96px);
  height:1px;background:var(--ivb-encre)}
.ivb-titre-eu{margin:0}
.ivb-titre-eu:empty{display:none}
.ivb-titre-eu{position:absolute;z-index:2;top:0;right:0;font-style:italic;
  font-size:15px;letter-spacing:.04em;color:var(--ivb-gris)}

/* vedette */
.ivb-vedette{position:relative;display:grid;grid-template-columns:46% minmax(0,1fr);
  column-gap:clamp(22px,2.4vw,36px);align-items:start}
.ivb-v-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:#E9E7E3}
.ivb-v-texte{min-width:0;padding-top:calc(var(--wm) * .47);padding-bottom:4px}
.ivb-sur{margin:0 0 10px;font-size:12.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ivb-encre);line-height:1.5}
.ivb-v-nom{margin:0;font-weight:500;font-size:clamp(46px,5.1vw,84px);line-height:.94;
  letter-spacing:-.012em;max-width:5.4em}
.ivb-lien{text-decoration:none}
.ivb-lien::after{content:"";position:absolute;inset:0;z-index:1}
.ivb-v-accroche{margin:14px 0 0;font-style:italic;font-weight:400;
  font-size:clamp(23px,2.15vw,34px);line-height:1.1;max-width:16em}
.ivb-trait{display:block;width:min(270px,82%);height:clamp(10px,1vw,15px);
  background:var(--ivb-encre);margin:22px 0 20px}
.ivb-v-chapo{margin:0;font-size:clamp(16px,1.12vw,17.5px);line-height:1.48;
  max-width:44ch;color:#1C1B19}

/* langues réellement publiées */
.ivb-langues{position:relative;z-index:2;margin:16px 0 0;font-size:13px;font-weight:500;
  letter-spacing:.14em;line-height:1}
.ivb-lg{display:inline-block;padding:8px 0;text-decoration:none}
.ivb-lg:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ivb-sep{display:inline-block;margin:0 12px;font-weight:400;color:var(--ivb-pale)}

/* photographies : noir et blanc par CSS uniquement */
.ivb-v-photo img,.ivb-sel-photo img,.ivb-photo img{display:block;width:100%;height:100%;
  object-fit:cover;object-position:var(--cadre,50% 30%);
  filter:grayscale(100%) contrast(1.05);transition:filter .6s ease}
@media (hover:hover){
  .ivb-vedette:hover img,.ivb-sel:hover img,.ivb-fiche:hover img{filter:grayscale(0%) contrast(1)}
  .ivb-vedette:hover .ivb-lien,.ivb-sel:hover .ivb-lien,.ivb-fiche:hover .ivb-lien{
    text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em}
}
.ivb-vedette:focus-within img,.ivb-sel:focus-within img,.ivb-fiche:focus-within img{filter:none}

/* sélection : quatre entretiens alignés sous la vedette */
.ivb-selection{list-style:none;margin:clamp(22px,3vh,30px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,28px)}
.ivb-sel{position:relative;min-width:0}
.ivb-sel-photo{position:relative;aspect-ratio:16/9;overflow:hidden;background:#E9E7E3}
.ivb-sel-nom{margin:14px 0 0;font-weight:500;font-size:clamp(19px,1.45vw,23px);line-height:1.12}
.ivb-accroche{margin:5px 0 0;font-style:italic;font-size:clamp(15.5px,1.08vw,17px);line-height:1.3;
  color:#1C1B19}
.ivb-sel .ivb-langues{margin-top:10px;font-size:12px}

.ivb-fleche{display:block;width:24px;height:48px;margin:clamp(30px,5vh,52px) auto 0;color:var(--ivb-encre)}
.ivb-fleche svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2}

/* index : catégories, recherche, alphabet */
.ivb-index{display:flex;flex-direction:column;min-width:0;
  padding-top:clamp(44px,6.5vh,78px);padding-bottom:clamp(40px,6vh,60px)}
.ivb-cats{list-style:none;margin:0;padding:0}
.ivb .ivb-cat{display:block;text-align:left;font-weight:400;text-transform:uppercase;
  font-size:clamp(19px,1.55vw,26px);line-height:1.26;letter-spacing:.005em;
  padding:1px 0;text-decoration:none}
.ivb .ivb-cat[aria-pressed="true"]{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.16em}
@media (hover:hover){.ivb-cat:hover{color:var(--ivb-gris)}}
.ivb-court{display:block;width:74px;height:1px;background:var(--ivb-encre);margin:26px 0 0}
.ivb-recherche{margin-top:auto;padding-top:48px}
.ivb-etiquette{display:block;font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 10px}
.ivb-champ{position:relative}
.ivb-champ svg{position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;
  fill:none;stroke:var(--ivb-encre);stroke-width:1.7;stroke-linecap:round;pointer-events:none}
.ivb-q{width:100%;height:46px;margin:0;padding:0 12px 0 44px;border:1px solid #C9C6C1;
  border-radius:0;background:#fff;color:var(--ivb-encre);font-family:var(--ivb-serif);
  font-size:17px;-webkit-appearance:none;appearance:none}
.ivb-q::placeholder{font-style:italic;color:var(--ivb-pale);opacity:1}
.ivb-q:focus{outline:none;border-color:var(--ivb-encre)}
.ivb-q:focus-visible{outline:2px solid var(--ivb-encre);outline-offset:2px}
.ivb-q::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.ivb-q-retour{margin:10px 0 0;font-size:15px;font-style:italic;color:var(--ivb-gris)}
.ivb .ivb-q-voir{font-style:normal;font-weight:500;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ivb-encre);text-decoration:underline;
  text-underline-offset:4px;margin-left:6px;padding:6px 0}
.ivb-alpha{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));row-gap:2px;
  margin-top:24px;padding-top:22px;border-top:1px solid #BDBAB5}
.ivb .ivb-a{height:32px;font-size:14px;font-weight:500;letter-spacing:.02em;text-align:center}
.ivb .ivb-a[disabled]{color:#C3C0BB;cursor:default}
.ivb .ivb-a.ivb-a-vide{color:#B5B1AB}
.ivb .ivb-a[aria-pressed="true"]{background:var(--ivb-encre);color:#fff}
@media (hover:hover){.ivb-a:not([disabled]):not([aria-pressed="true"]):hover{text-decoration:underline;text-underline-offset:4px}}

/* -------------------------------------------------------- bibliothèque */
.ivb-biblio{margin-top:clamp(64px,10vh,120px)}
.ivb-biblio-tete{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 28px;
  padding-bottom:16px;border-bottom:1px solid var(--ivb-encre)}
.ivb-biblio-titre{margin:0;margin-right:auto;font-weight:400;font-style:italic;
  font-size:clamp(34px,4.1vw,60px);line-height:1}
.ivb-compte{margin:0;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.ivb .ivb-tout{font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:underline;text-underline-offset:4px;padding:10px 0}
.ivb-tout[hidden]{display:none}
.ivb-vide{margin:48px 0;font-style:italic;font-size:22px;color:var(--ivb-gris)}
.ivb-vide[hidden]{display:none}

/* répertoire : un seul flux de colonnes, chaque lettre ouvre sa propre
   case — un dictionnaire plutôt qu'une grille de cartes */
.ivb-repertoire{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(34px,4.6vh,52px) clamp(18px,2vw,30px);padding-top:clamp(28px,4vh,40px);align-items:start}
.ivb-lettre,.ivb-repertoire .ivb-fiches{display:contents}
.ivb-lettre[hidden]{display:none}
.ivb-l{margin:0;padding-top:14px;border-top:1px solid var(--ivb-encre);
  font-weight:300;font-size:clamp(84px,8.4vw,138px);line-height:.8;letter-spacing:-.02em}
.ivb-derniers{padding:clamp(30px,4vh,44px) 0 0}
.ivb-derniers[hidden],.ivb-repertoire[hidden]{display:none}
.ivb-derniers-titre{margin:0 0 28px;font-weight:400;font-size:clamp(26px,2.4vw,36px);
  text-transform:uppercase;letter-spacing:.01em}

.ivb-fiches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(30px,4vh,46px) clamp(18px,2vw,30px);align-items:start}
.ivb-fiche{position:relative;min-width:0;padding-top:14px;border-top:1px solid var(--ivb-filet)}
.ivb-fiche[hidden]{display:none}
.ivb-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:#E9E7E3;margin:0 0 14px}
.ivb-photo.ivb-natif{max-width:var(--natif)}
.ivb-fiche .ivb-sur{font-size:11px;letter-spacing:.18em;margin-bottom:7px;color:var(--ivb-gris)}
.ivb-nom{margin:0;font-weight:500;font-size:clamp(20px,1.5vw,24px);line-height:1.1}
.ivb-fiche .ivb-langues{font-size:12px;margin-top:10px}

/* grande fiche : second et dernier niveau de hiérarchie */
.ivb-grande{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  column-gap:clamp(16px,1.8vw,28px);padding-bottom:4px}
.ivb-grande .ivb-photo{aspect-ratio:4/5;margin:0}
.ivb-grande .ivb-fiche-texte{align-self:end;padding-bottom:2px}
.ivb-grande .ivb-nom{font-size:clamp(28px,2.4vw,40px);line-height:1}
.ivb-grande .ivb-accroche{font-size:clamp(18px,1.3vw,21px);margin-top:8px}
.ivb-paysage{display:block}
.ivb-paysage .ivb-photo{aspect-ratio:16/10;margin:0 0 14px}
.ivb-paysage .ivb-fiche-texte{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(16px,1.8vw,28px)}
.ivb-paysage .ivb-chapo{grid-column:2;grid-row:1 / span 5;margin:0;padding:0 0 0 clamp(14px,1.4vw,22px);border-top:0;border-left:1px solid var(--ivb-encre)}
.ivb-chapo{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--ivb-encre);
  font-size:16px;line-height:1.45;color:#1C1B19}

/* -------------------------------------------------------- tablette */
@media (max-width:1180px){
  .ivb-selection{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ivb-fiches,.ivb-repertoire{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1180px) and (min-width:821px){
  .ivb-alpha{grid-template-columns:repeat(7,minmax(0,1fr))}
  .ivb .ivb-a{height:36px}
}

/* -------------------------------------------------------- mobile
   Ordre imposé : bandeau, titre, vedette, sélection, recherche, A–Z,
   filtres, bibliothèque. Composition propre, pas une réduction. */
@media (max-width:820px){
  .ivb-barre{height:auto;min-height:calc(48px + env(safe-area-inset-top,0px));gap:12px}
  .ivb-marque{font-size:12px;letter-spacing:.34em}
  .ivb .ivx-retour-mot{font-size:12px;letter-spacing:.16em}
  .ivb-page{padding-left:max(18px,env(safe-area-inset-left,0px));
    padding-right:max(18px,env(safe-area-inset-right,0px))}

  .ivb-une{display:flex;flex-direction:column;padding-top:18px}
  .ivb-une-principal{padding-top:0}
  .ivb-filet-v{display:none}
  .ivb-titre{position:relative;left:auto;top:auto;width:min(74vw,360px);margin:6px 0 10px -4px}
  .ivb-titre-filet{left:auto;right:-28%;width:22%;top:40%}
  .ivb-titre-eu{position:static;margin:-4px 0 16px}

  .ivb-vedette{display:block}
  .ivb-v-photo{aspect-ratio:4/5;margin:0 -4px}
  .ivb-v-texte{padding-top:20px}
  .ivb-sur{font-size:11.5px;letter-spacing:.2em}
  .ivb-v-nom{font-size:clamp(44px,13vw,62px);max-width:none}
  .ivb-v-accroche{font-size:clamp(22px,6.4vw,28px)}
  .ivb-trait{margin:18px 0 16px;height:10px;width:200px}
  .ivb-v-chapo{font-size:17px;max-width:none}
  .ivb-langues{font-size:13.5px}
  .ivb-lg{padding:12px 0;min-width:28px}

  .ivb-selection{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px;
    margin-top:34px;padding-top:26px;border-top:1px solid var(--ivb-encre)}
  .ivb-sel-photo{aspect-ratio:4/3}
  .ivb-sel-nom{font-size:19px;margin-top:10px}
  .ivb-accroche{font-size:16px}
  .ivb-sel .ivb-langues{font-size:12.5px;margin-top:4px}
  .ivb-fleche{display:none}

  .ivb-index{padding:34px 0 0;margin-top:34px;border-top:1px solid var(--ivb-encre)}
  .ivb-recherche{order:1;margin-top:0;padding-top:0}
  .ivb-alpha{order:2;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;
    margin-top:20px;padding-top:16px}
  .ivb .ivb-a{height:44px;font-size:16px}
  .ivb-cats-zone{order:3;margin-top:24px;padding-top:18px;border-top:1px solid #BDBAB5}
  .ivb-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
  .ivb .ivb-cat{font-size:19px;min-height:44px;padding:10px 0;line-height:1.15;letter-spacing:.02em}
  .ivb-court{display:none}
  .ivb-q{height:50px;font-size:17px}

  .ivb-biblio{margin-top:56px}
  .ivb-biblio-titre{font-size:clamp(30px,9vw,40px);width:100%}
  .ivb-fiches,.ivb-repertoire{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
  .ivb-l{grid-column:1 / -1;font-size:72px;margin-top:8px}
  .ivb-nom{font-size:19px}
  .ivb-fiche .ivb-sur{font-size:10.5px;letter-spacing:.14em}
  .ivb-fiche .ivb-accroche{font-size:15.5px}
  .ivb-grande{grid-column:1 / -1;display:block}
  .ivb-paysage .ivb-fiche-texte{display:block}
  .ivb-paysage .ivb-chapo{padding:14px 0 0;border-left:0;border-top:1px solid var(--ivb-encre);margin-top:14px}
  .ivb-grande .ivb-photo{aspect-ratio:3/2;margin-bottom:14px}
  .ivb-grande .ivb-nom{font-size:28px}
  .ivb-chapo{font-size:16px}
}
@media (max-width:380px){
  .ivb-marque{letter-spacing:.26em;font-size:11.5px}
  .ivb .ivx-retour-mot{letter-spacing:.12em}
  .ivb .ivb-cat{font-size:17.5px}
  .ivb-fiches{gap:26px 12px}
}

@media (prefers-reduced-motion:reduce){
  .ivb-v-photo img,.ivb-sel-photo img,.ivb-photo img{transition:none}
}

/* -------------------------------------------------------- arrivée
   Le lettrage de la page se pose pendant que les bandes du visuel s'écartent.
   L'état de base est visible : ces classes n'ajoutent que du mouvement et
   sont retirées à la fin de la transition. */
.ivb-vue.ivb-attente{visibility:hidden}
.ivb-vue.ivb-entree .ivb-titre-img{opacity:0;transform:translateY(14px)}
.ivb-vue.ivb-entree.ivb-revele .ivb-titre-img{opacity:1;transform:none;
  transition:opacity .8s ease,transform 1s cubic-bezier(.2,.7,.2,1)}

/* -------------------------------------------------------- transition en bandes */
.ivb-bandes{position:fixed;inset:0;z-index:90;width:100vw;height:100vh;height:100dvh;
  overflow:hidden;pointer-events:none;background:transparent;contain:strict}
.ivb-bandes[hidden]{display:none}
.ivb-bande{position:absolute;top:0;height:100%;overflow:hidden;
  will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0)}
.ivb-bande i{position:absolute;top:0;display:block;background-repeat:no-repeat}
.ivb-bande b.ivb-prolonge{position:absolute;display:block;height:1px;
  background-repeat:no-repeat;transform-origin:0 0;backface-visibility:hidden}
.ivb-bandes.ivb-ouvre .ivb-bande{transition:transform 1050ms cubic-bezier(.77,0,.18,1)}