/*
 * ie24 — Rubrique des entretiens (Talents) : sommaire, face-à-face, galerie.
 * Chargée sur cette seule rubrique (inc/entretiens.php).
 */

/* ---------- Commun ---------- */
.lj-itw a { text-decoration: none; }
.itw-sep { opacity: .5; margin: 0 .15em; }
.itw-kicker { margin: 0 0 .5rem; font: 700 .7rem/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.itw-titre { margin: 0; font: 900 clamp(3.2rem, 7vw, 6.2rem)/.92 var(--font-display); letter-spacing: -.03em; color: var(--ink); }
.itw-compte { margin: 0 0 .9rem auto; font: 600 .72rem/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); }
.itw-chapo { display: none; margin: 1.3rem 0 0; max-width: 30rem; font: 400 1.18rem/1.5 var(--font-serif); color: var(--ink-soft); }
.itw-tete { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0 1.5rem; padding: 1.6rem 0 1.4rem; border-bottom: 1px solid var(--rule-strong); }
.itw-tete .itw-kicker { width: 100%; }
.itw-vide { padding: 3rem 0; font-style: italic; color: var(--ink-mute); }

/* Le portrait suit le mode d'image réglé pour les rubriques. */
.itw-img img { transition: filter .6s var(--ease), transform 1.2s var(--ease); }
.itw-img.is-bw img { filter: var(--img-filter-bw); }
.itw-img.is-sepia img { filter: var(--img-filter-sepia); }

.itw-lire { display: inline-block; align-self: flex-start; margin-top: 2rem; padding: .8rem 1.25rem; border: 1px solid var(--ink); font: 700 .72rem/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); transition: background .3s, color .3s; }
.itw-lire span { display: inline-block; margin-left: .4rem; transition: transform .3s var(--ease); }
.itw-lire:hover { background: var(--ink); color: var(--paper); }
.itw-lire:hover span { transform: translateX(5px); }

.itw-questions { list-style: none; margin: 2rem 0 0; padding: 0; max-width: 37rem; }
.itw-questions li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .2rem; padding: .9rem 0; border-top: 1px solid var(--rule); font: italic 400 1.02rem/1.5 var(--font-serif); color: var(--ink-soft); }
.itw-questions li:last-child { border-bottom: 1px solid var(--rule); }
.itw-q { font: 700 .68rem/1.9 var(--font-sans); font-style: normal; letter-spacing: .14em; color: var(--accent); }

.lj-itw .lj-pagination { margin-top: 3rem; }

/* ---------- 1. Le sommaire ---------- */
.itw-so-une { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; padding: 3.2rem 0 3.6rem; border-bottom: 3px double var(--rule-strong); }
.itw-so-une-texte { position: relative; z-index: 2; padding-right: 1.5rem; }
.itw-so-une-label { margin: 0 0 1.4rem; font: 700 .7rem/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.itw-so-une-nom { margin: 0; font: 900 clamp(3rem, 8.2vw, 7.4rem)/.88 var(--font-display); letter-spacing: -.035em; color: var(--ink); }
/* Garde-fou : un nom ne se coupe jamais au milieu (base.css permet « overflow-wrap:
   break-word » sur les titres). Il rapetisse pour tenir : estimation par sa longueur
   (--itw-lettres, posée par le gabarit ; 0,6 corps par lettre, mesuré sur Playfair
   Display de 0,46 à 0,60), puis ajustement exact par entretiens.js. */
.itw-so-une-texte { container-type: inline-size; }
.itw-so-une-nom { font-size: min(clamp(3rem, 8.2vw, 7.4rem), calc(100cqi / var(--itw-lettres, 6) / .6)); }
.itw-so-une-nom span { white-space: nowrap; }
.itw-so-une-nom, .itw-so-qui strong, .itw-ff-nom, .itw-ff-qui strong, .itw-ga-nom, .itw-so-une-roles b { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.itw-so-une-nom a { color: inherit; }
.itw-so-une-nom span { display: block; }
/* Entretien à plusieurs voix : un nom par ligne, plus petit pour tenir dans la colonne ; chacun sa fonction. */
.itw-so-une-nom--plusieurs { font-size: min(clamp(2.3rem, 5vw, 4.4rem), calc(100cqi / var(--itw-lettres, 6) / .6)); line-height: .98; }
.itw-so-une-nom--plusieurs span + span { margin-top: .12em; }
.itw-so-une-nom--plusieurs i { font: italic 400 .55em/1 var(--font-serif); letter-spacing: 0; color: var(--ink-mute); }
.itw-so-une-roles { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.itw-so-une-roles li { margin: 0 0 .35rem; font: 600 .78rem/1.45 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.itw-so-une-roles b { color: var(--ink); font-weight: 700; }
.itw-so-une-titre { margin: 0; font: 800 clamp(2rem, 4vw, 3.4rem)/1.05 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.itw-so-une-titre a { color: inherit; }
.itw-so-une-role { margin: 1.6rem 0 0; font: 600 .8rem/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.itw-so-une-sujet { margin: .9rem 0 0; max-width: 31rem; font: 400 1.3rem/1.42 var(--font-serif); color: var(--ink-soft); }
.itw-so-une-meta { margin: 1.2rem 0 0; font: 600 .7rem/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.itw-so-une .itw-lire { margin-top: 1.6rem; }
.itw-so-une-portrait { position: relative; margin: 0; }
.itw-so-une-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.itw-so-une-portrait::after { content: ""; position: absolute; left: -14px; top: 14px; right: 14px; bottom: -14px; border: 1px solid var(--rule-strong); z-index: -1; }
.itw-so-une-portrait.a-survol:hover img { filter: none; }

.itw-so-liste-titre { margin: 2.6rem 0 .6rem; font: 700 .7rem/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); }
.itw-so-ligne { display: grid; grid-template-columns: 68px minmax(0, 1.05fr) minmax(0, 1.4fr) 8.5rem 1.5rem; align-items: center; gap: 1.3rem; padding: 1.15rem .4rem; border-top: 1px solid var(--rule); color: inherit; transition: background .3s, padding .35s var(--ease); }
.itw-so-ligne:last-of-type { border-bottom: 1px solid var(--rule); }
.itw-so-ligne:hover, .itw-so-ligne:focus-visible { background: var(--paper-2); padding-left: 1rem; }
.itw-so-vignette { display: block; width: 68px; height: 68px; border-radius: 50%; overflow: hidden; background: var(--paper-3); }
.itw-so-vignette img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.itw-so-qui strong { display: block; font: 700 1.5rem/1.1 var(--font-display); letter-spacing: -.01em; color: var(--ink); transition: color .3s; }
.itw-so-qui--titre strong { font-size: 1.2rem; line-height: 1.25; }
.itw-so-ligne:hover .itw-so-qui strong { color: var(--accent); }
.itw-so-qui em { display: block; margin-top: .3rem; font: 500 .68rem/1.4 var(--font-sans); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.itw-so-sujet { font: 400 1rem/1.45 var(--font-serif); color: var(--ink-soft); }
.itw-so-date { font: 500 .72rem/1.3 var(--font-sans); letter-spacing: .06em; color: var(--ink-mute); text-align: right; }
.itw-so-fleche { font: 400 1.2rem/1 var(--font-sans); color: var(--ink); transition: transform .3s var(--ease); }
.itw-so-ligne:hover .itw-so-fleche { transform: translateX(6px); }
.itw-so-flottant { position: fixed; left: 0; top: 0; width: 230px; pointer-events: none; opacity: 0; transform: translate(-999px, -999px) rotate(-2deg); transition: opacity .25s; z-index: 40; box-shadow: 0 18px 40px rgba(0, 0, 0, .28); background: var(--paper-3); }
.itw-so-flottant img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; filter: var(--img-filter-bw); }
.itw-so-flottant.is-on { opacity: 1; }

/* ---------- 2. Le face-à-face ---------- */
.lj-itw--faceaface .itw-tete { display: block; padding: 3.4rem 0 3rem; }
.lj-itw--faceaface .itw-chapo { display: block; }
.lj-itw--faceaface .itw-compte { display: none; }
.itw-ff { display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); margin-inline: calc(-1 * clamp(1rem, .4rem + 2vw, 2.25rem)); }
.itw-ff-scene { background: var(--ink); }
.itw-ff-cadre { position: sticky; top: 0; height: 100vh; overflow: hidden; color: #f7f5ee; }
.lj-sticky-header .itw-ff-cadre { top: var(--lj-sticky-offset, 96px); height: calc(100vh - var(--lj-sticky-offset, 96px)); }
.admin-bar .itw-ff-cadre { top: 32px; height: calc(100vh - 32px); }
.itw-ff-portrait { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.045); transition: opacity .9s var(--ease), transform 6s linear; }
.itw-ff-portrait.is-on { opacity: 1; transform: scale(1); }
.itw-ff-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.itw-ff-voile { position: absolute; left: 0; right: 0; top: 0; bottom: calc(100% - var(--itw-vis, 100%)); background: linear-gradient(180deg, rgba(22, 20, 13, .28) 0%, rgba(22, 20, 13, 0) 30%, rgba(22, 20, 13, .2) 55%, rgba(22, 20, 13, .94) 100%); }
.itw-ff-idents { position: absolute; inset: 0; pointer-events: none; }
.itw-ff-ident { position: absolute; left: 4.4rem; right: 2.6rem; bottom: calc(100% - var(--itw-vis, 100%) + 2.6rem); opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.itw-ff-ident.is-on { opacity: 1; transform: none; }
.itw-ff-no { margin: 0 0 .7rem; font: 700 .68rem/1 var(--font-sans); letter-spacing: .24em; text-transform: uppercase; color: #e9c9a8; }
.itw-ff-nom { margin: 0; font: 800 clamp(2.2rem, 3.6vw, 3.5rem)/1.02 var(--font-display); letter-spacing: -.015em; color: #f7f5ee; }
.itw-ff-role { margin: .8rem 0 0; max-width: 26rem; font: 500 .78rem/1.45 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; opacity: .82; }
.itw-ff-rail { position: absolute; left: 1.5rem; top: calc(var(--itw-vis, 100%) / 2); transform: translateY(-50%); display: flex; flex-direction: column; gap: .15rem; z-index: 2; }
.itw-ff-tick { display: flex; align-items: center; padding: .5rem 0; color: rgba(247, 245, 238, .5); transition: color .3s; }
.itw-ff-tick::before { content: ""; width: 14px; height: 1px; background: currentColor; transition: width .35s var(--ease); }
.itw-ff-tick.is-on { color: #f7f5ee; }
.itw-ff-tick.is-on::before { width: 34px; }
.itw-ff-fil { padding: 0 clamp(1.5rem, 4.5vw, 4.5rem); }
.itw-ff-bloc { position: relative; min-height: 82vh; padding: 4.4rem 0 4rem; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; justify-content: center; }
.itw-ff-bloc:last-child { border-bottom: 0; }
/* Le premier entretien suit l'en-tête de la rubrique : pas de grand vide au-dessus. */
.itw-tete + .itw-ff-bloc { min-height: 0; padding-top: 3.2rem; justify-content: flex-start; }
.itw-ff-bloc > *:not(.itw-ff-marque) { position: relative; }
/* Le guillemet de la parole donnée : aucun entretien ne porte de numéro. */
.itw-ff-marque { position: absolute; right: 0; top: 1.2rem; margin: 0; font: 900 clamp(5rem, 8vw, 8rem)/.8 var(--font-display); color: transparent; -webkit-text-stroke: 1px var(--rule); user-select: none; transition: -webkit-text-stroke-color .5s; }
.itw-ff-bloc.is-on .itw-ff-marque { -webkit-text-stroke-color: var(--accent); }
.itw-ff-meta { max-width: calc(100% - 7rem); margin: 0 0 1.5rem; font: 600 .7rem/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.itw-ff-qui { margin: 0 0 .5rem; font: 500 .8rem/1.5 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.itw-ff-qui strong { margin-right: .5rem; font-weight: 700; color: var(--accent); }
.itw-ff-sujet { margin: 0; max-width: 36rem; font: 700 clamp(1.7rem, 2.5vw, 2.45rem)/1.14 var(--font-display); letter-spacing: -.012em; color: var(--ink); }
.itw-ff-sujet a { color: inherit; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.itw-ff-sujet a:hover { background-size: 100% 1px; }
.itw-ff-mobile { display: none; margin: 0 0 1.6rem; }
.itw-ff-mobile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 22%; }

/* ---------- 3. La galerie ---------- */
.itw-ga-mur { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 21vw, 300px); gap: 10px; margin-top: 2.2rem; }
.itw-ga-carte { position: relative; grid-column: span 4; overflow: hidden; background: var(--ink); color: #f7f5ee; }
.itw-ga-voisine { grid-column: span 5; }
.itw-ga-grande { grid-column: span 7; grid-row: span 2; }
.itw-ga-demi { grid-column: span 6; }
.itw-ga-pleine { grid-column: span 12; }
.itw-ga-carte img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.itw-ga-carte.a-survol:hover img { filter: none; }
.itw-ga-carte:hover img { transform: scale(1.045); }
.itw-ga-carte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 20, 13, 0) 38%, rgba(22, 20, 13, .92) 100%); }
.itw-ga-bas { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; z-index: 2; display: flex; flex-direction: column; }
.itw-ga-nom { font: 800 1.45rem/1.05 var(--font-display); letter-spacing: -.01em; }
.itw-ga-nom--titre { font-size: 1.15rem; line-height: 1.2; }
.itw-ga-grande .itw-ga-nom { font-size: clamp(2.2rem, 3.6vw, 3.4rem); }
.itw-ga-role { margin-top: .45rem; font: 500 .64rem/1.4 var(--font-sans); letter-spacing: .13em; text-transform: uppercase; opacity: .85; }
.itw-ga-sujet { max-height: 0; overflow: hidden; opacity: 0; font: 400 .92rem/1.4 var(--font-serif); transition: max-height .5s var(--ease), opacity .4s, margin .4s; }
.itw-ga-grande .itw-ga-sujet { max-width: 30rem; font-size: 1.1rem; }
.itw-ga-carte:hover .itw-ga-sujet, .itw-ga-carte:focus-visible .itw-ga-sujet, .itw-ga-grande .itw-ga-sujet { max-height: 9rem; opacity: .95; margin-top: .7rem; }

/* ---------- Écrans étroits (même seuil que le reste du thème) ---------- */
@media (max-width: 860px) {
	.itw-so-une { grid-template-columns: 1fr; padding: 2rem 0 2.4rem; }
	.itw-so-une-texte { padding-right: 0; }
	.itw-so-une-portrait { order: -1; margin-bottom: 1.8rem; }
	.itw-so-une-portrait img { aspect-ratio: 4 / 3; } /* cadre moins haut : la photo entière, et un fichier plus léger. */
	.itw-so-une-portrait::after { display: none; }
	.itw-so-ligne { grid-template-columns: 56px minmax(0, 1fr); gap: .9rem; padding: .95rem 0; }
	.itw-so-ligne:hover { padding-left: 0; }
	.itw-so-sujet, .itw-so-date, .itw-so-fleche { display: none; }
	.itw-so-vignette { width: 56px; height: 56px; }
	.itw-so-flottant { display: none; }

	.itw-ff { display: block; margin-inline: 0; }
	.itw-ff-scene { display: none; }
	.itw-ff-fil { padding: 0; }
	.itw-ff-mobile { display: block; }
	.itw-ff-bloc { min-height: 0; padding: 2.6rem 0; }
	.itw-ff-marque { top: auto; bottom: 1.6rem; font-size: 4.6rem; }
	.itw-ff-meta { max-width: none; }
	.lj-itw--faceaface .itw-tete { padding: 1.6rem 0 2rem; }

	.itw-ga-mur { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 62vw; }
	.itw-ga-carte, .itw-ga-voisine, .itw-ga-demi { grid-column: span 1; }
	.itw-ga-grande, .itw-ga-pleine { grid-column: span 2; grid-row: span 1; }
	.itw-ga-sujet { max-height: 9rem; opacity: .95; margin-top: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.lj-itw *, .itw-so-flottant { transition: none !important; }
}