/* Témoignages — le Sélecteur, VALIDÉ par Theo le 18/09 : version « curseur », panneau noir, bloc de 520 px ; le lien LinkedIn, sur la photo jusqu'au 25/09, est un bouton à droite de la cellule.
   Un bloc contenu dans la largeur de la page, à filet. À gauche un panneau noir porte l'avis actif, sur un fond de petites pièces du logo (/patterns.js) ; à droite trois personnes
   en cellules à filets servent à choisir. Rien ne tourne tout seul : clic, clavier (Entrée, Espace) ou flèches. html[data-temoignages="selecteur"] est posé par le script.
   Écartés en route et sortis du code (l'historique git les garde) : la mise en avant en cartes, mosaïque, registre, panneau, tribune, la version « par marque »,
   les palettes terre brûlée, olive, crème, sauge et brun, la hauteur de 440 px, le bouton LinkedIn à part. */

/* ---------- Les couleurs du panneau. --tp-curseur : le curseur de la personne active est un accent terre brûlée, qui tranche à la fois sur le panneau noir et sur la cellule claire
   (de la couleur du panneau, il s'y fondait). ---------- */
html[data-temoignages="selecteur"] .temoignages { --tp-fond: #14130e; --tp-texte: #f6f4ec; --tp-doux: rgba(246, 244, 236, 0.5); --tp-trait: rgba(246, 244, 236, 0.35); --tp-survol-fond: #f6f4ec; --tp-survol-texte: #14130e; --tp-curseur: #772406; }

/* ---------- Le bloc ---------- */
html[data-temoignages="selecteur"] .temoignages .liste { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); grid-template-rows: repeat(3, minmax(116px, 1fr)); gap: 0; border: 1px solid var(--trait); }
html[data-temoignages="selecteur"] .temoignages .temoignage { display: contents; border: 0; border-radius: 0; background: none; padding: 0; }
html[data-temoignages="selecteur"] .temoignages .num, html[data-temoignages="selecteur"] .temoignages .provisoire { display: none !important; }
html[data-temoignages="selecteur"] .temoignages .logo-client { transform: none; }
.temoignages .temo-fond, .temoignages .temo-nav, .temoignages .temo-curseur { display: none; }
html[data-temoignages="selecteur"] .temoignages .temo-fond { display: block; grid-column: 1; grid-row: 1 / 4; position: relative; overflow: hidden; background: var(--tp-fond); }
/* Les pièces passent aussi sous la citation, atténuées de ce côté, et restent franches à droite */
html[data-temoignages="selecteur"] .temoignages .temo-fond canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-mask-image: linear-gradient(112deg, rgba(0,0,0,0.18) 0, rgba(0,0,0,0.45) 45%, #000 82%); mask-image: linear-gradient(112deg, rgba(0,0,0,0.18) 0, rgba(0,0,0,0.45) 45%, #000 82%); }
/* 520 px (Theo, 18/09 : « un poil plus de height ») ; la hauteur réelle est de plus verrouillée par le script */
html[data-temoignages="selecteur"] .temoignages blockquote { grid-column: 1; grid-row: 1 / 4; position: relative; z-index: 1; display: flex; align-items: flex-start; min-height: 520px; padding: 72px 56px 120px 48px; color: var(--tp-texte); }
/* Les avis inactifs restent dans la grille, invisibles : les trois citations partagent la même cellule, qui prend donc la hauteur de la plus longue.
   Retirés du flux (display: none), le panneau changeait de hauteur à chaque changement d'avis. visibility les sort aussi du clavier et des lecteurs d'écran. */
html[data-temoignages="selecteur"] .temoignages .temoignage:not([data-actif]) blockquote, html[data-temoignages="selecteur"] .temoignages .temoignage:not([data-actif]) .pied { visibility: hidden; }
/* text-wrap: wrap et non « pretty » (la règle de la page) : le découpage en lignes de la transition doit tomber exactement comme le texte au repos, sinon une ligne de plus apparaît
   pendant le mouvement et le bloc change de hauteur (mesuré sur le site déployé le 17/09 : 442 → 470 px à 1512 px de large). */
html[data-temoignages="selecteur"] .temoignages .citation { font-size: clamp(20px, 1.65vw, 26px); line-height: 1.3; letter-spacing: -0.01em; max-width: 38ch; color: var(--tp-texte); text-wrap: wrap; }
html[data-temoignages="selecteur"] .temoignages .citation::before, html[data-temoignages="selecteur"] .temoignages .citation::after, .temoignages .citation i.m-g { color: var(--tp-doux); }
.temoignages .citation i.m-g { font-style: normal; }
/* Guillemets à espaces insécables, comme le veut la typographie française : jamais de « » » seul sur sa ligne en fin de citation (le script découpe avec les mêmes espaces) */
html[data-temoignages="selecteur"] .temoignages .citation::before { content: "«\00a0"; } html[data-temoignages="selecteur"] .temoignages .citation::after { content: "\00a0»"; }
/* Le logo du client signe l'avis, en bas du panneau. L'écart au bas du panneau est une marge et non un padding (04/10) : le masque de la transition (overflow du .pied)
   s'arrête ainsi au ras du logo ; avec 40 px de padding, le logo qui monte depuis 130 % de sa hauteur partait à découvert, sous sa place (vu par Theo sur mobile). */
html[data-temoignages="selecteur"] .temoignages .pied { grid-column: 1; grid-row: 1 / 4; align-self: end; z-index: 1; padding: 0 0 0 48px; margin-bottom: 40px; pointer-events: none; }
html[data-temoignages="selecteur"] .temoignages .pied .logo-client { background: var(--tp-texte); }
/* Les flèches, dans le coin du panneau */
html[data-temoignages="selecteur"] .temoignages .temo-nav { display: flex; gap: 8px; grid-column: 1; grid-row: 1 / 4; align-self: end; justify-self: end; z-index: 2; padding: 0 40px 36px 0; }
.temoignages .temo-nav button { width: 40px; height: 40px; display: grid; place-items: center; font: inherit; font-size: 18px; line-height: 1; color: var(--tp-texte); background: none; border: 1px solid var(--tp-trait); border-radius: 0 0 12px 0; cursor: pointer; transition: background var(--m-vite, 220ms) ease, color var(--m-vite, 220ms) ease, border-color var(--m-vite, 220ms) ease; }
.temoignages .temo-nav button:first-child { border-radius: 0 0 0 12px; }
.temoignages .temo-nav button:hover { background: var(--tp-survol-fond); border-color: var(--tp-survol-fond); color: var(--tp-survol-texte); }
.temoignages .temo-nav button:focus-visible { outline: 2px solid var(--tp-texte); outline-offset: 2px; }

/* ---------- Les trois personnes. La personne active est en couleur et en encre pleine sur fond teinté, les deux autres en gris. Un curseur vertical court le long du bord gauche
   des cellules et glisse d'une personne à l'autre. ---------- */
html[data-temoignages="selecteur"] .temoignages .auteur { grid-column: 2; position: relative; align-items: center; gap: 16px; padding: 22px 28px 22px 34px; border-left: 1px solid var(--trait); border-bottom: 1px solid var(--trait); cursor: pointer; color: rgba(22, 21, 16, 0.5); transition: background var(--m-vite, 220ms) ease, color var(--m-vite, 220ms) ease; }
html[data-temoignages="selecteur"] .temoignages .temoignage:nth-child(1) .auteur { grid-row: 1; } html[data-temoignages="selecteur"] .temoignages .temoignage:nth-child(2) .auteur { grid-row: 2; } html[data-temoignages="selecteur"] .temoignages .temoignage:nth-child(3) .auteur { grid-row: 3; border-bottom: 0; }
html[data-temoignages="selecteur"] .temoignages .auteur > span { padding-bottom: 0; }
html[data-temoignages="selecteur"] .temoignages .auteur .portrait { width: 64px; height: 64px; }
/* Le bouton LinkedIn, à droite de la cellule (Theo, 25/09 : « enlève le lien de la photo de LinkedIn, et passe le bouton LinkedIn à droite dans le tab avec un style Meleï ») :
   la pièce des boutons du site, un carré à filet au seul angle arrondi, en bas à droite, qui change de coin au survol pendant que le bouton se remplit d'encre, comme « Parlons de votre projet ».
   Le « in » est un masque dans la couleur de la cellule : gris pour les deux personnes au repos, encre pour la personne active. Un clic sur le bouton ouvre le profil sans changer d'avis. */
html[data-temoignages="selecteur"] .temoignages .auteur .profil-in { flex: none; margin-left: auto; width: 40px; height: 40px; display: grid; place-items: center; color: inherit; border: 1px solid var(--trait); border-radius: 4px 4px 16px 4px; transition: background var(--m-vite, 220ms) ease, color var(--m-vite, 220ms) ease, border-color var(--m-vite, 220ms) ease, border-radius var(--m-vite, 220ms) ease; }
html[data-temoignages="selecteur"] .temoignages .auteur .profil-in::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url('/assets/icone-linkedin.svg') center / contain no-repeat; mask: url('/assets/icone-linkedin.svg') center / contain no-repeat; }
html[data-temoignages="selecteur"] .temoignages .auteur .profil-in:hover { background: var(--on-light); border-color: var(--on-light); color: var(--fond); border-radius: 16px 4px 4px 4px; }
html[data-temoignages="selecteur"] .temoignages .auteur .profil-in:focus-visible { outline: 2px solid var(--on-light); outline-offset: 2px; }
html[data-temoignages="selecteur"] .temoignages .auteur .portrait img { filter: grayscale(1); transition: filter var(--m-base, 440ms) ease; }
html[data-temoignages="selecteur"] .temoignages .auteur :is(.nom, .role, .role b) { color: inherit; }
html[data-temoignages="selecteur"] .temoignages .auteur:hover { background: var(--surface); color: rgba(22, 21, 16, 0.8); }
html[data-temoignages="selecteur"] .temoignages .temoignage[data-actif] .auteur { background: var(--surface); color: var(--on-light); }
html[data-temoignages="selecteur"] .temoignages .temoignage[data-actif] .auteur .portrait img { filter: none; }
html[data-temoignages="selecteur"] .temoignages .temoignage[data-actif] .auteur .role { color: var(--muted); }
html[data-temoignages="selecteur"] .temoignages .auteur:focus-visible { outline: 2px solid var(--on-light); outline-offset: -2px; }
html[data-temoignages="selecteur"] .temoignages .temo-curseur { display: block; grid-column: 2; grid-row: 1; justify-self: start; width: 6px; z-index: 2; background: var(--tp-curseur); transform: translateY(calc(var(--actif, 0) * 100%)); transition: transform var(--m-base, 440ms) var(--m-sortie, ease); pointer-events: none; }

/* ---------- La transition entre deux avis, dans le vocabulaire du site : pas de fondu. L'avis qui part monte ligne par ligne derrière son masque, vite et en accélérant (200 ms) ;
   l'avis qui arrive monte ligne par ligne depuis le bas, à une cadence serrée de 40 ms. Les lignes sont de vraies lignes, découpées par le script le temps du mouvement (guillemets compris),
   puis le texte d'origine est rendu. Le logo du client part derrière son masque juste après la dernière ligne, et le nouveau monte à son tour.
   04/10 (Theo, sur mobile : « pas très fluide », « le logo client saute à chaque changement ») : l'ancien logo disparaissait d'un coup au changement d'avis et le nouveau
   surgissait sous sa place (voir .pied) ; la cascade d'entrée tient désormais en 320 ms quel que soit le nombre de lignes (--cadence, posée par le script : 40 ms au plus,
   moins au-delà de neuf lignes). Sur mobile, une citation de 14 lignes mettait 1,1 s à entrer, une ligne après l'autre. ---------- */
@keyframes m-partir { from { transform: translateY(0); } to { transform: translateY(-130%); } }
.temoignages .citation[data-anime]::before, .temoignages .citation[data-anime]::after { content: none !important; }
.temoignages .citation[data-anime="sort"] i.m-ligne i.m-int { animation: m-partir 200ms cubic-bezier(0.5, 0, 0.9, 0.3) both; animation-delay: calc(var(--i) * 12ms); }
.temoignages .citation[data-anime="entre"] i.m-ligne i.m-int { animation: m-monter 520ms var(--m-sortie) both; animation-delay: calc(var(--i) * var(--cadence, 40ms)); }
.temoignages .pied[data-anime] { overflow: hidden; }
.temoignages .pied[data-anime="part"] > * { animation: m-partir 200ms cubic-bezier(0.5, 0, 0.9, 0.3) both; animation-delay: calc(var(--i, 0) * 12ms); }
.temoignages .pied[data-anime="signe"] > * { animation: m-monter var(--m-base) var(--m-sortie) 160ms both; }

/* ---------- Tablette et mobile : le panneau en haut, les trois personnes dessous, on choisit au doigt ; la section reste courte. ---------- */
@media (max-width: 1100px) {
  html[data-temoignages="selecteur"] .temoignages .liste { gap: 0 !important; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; } /* la page pose 16 px entre les cartes sur mobile : ici les cellules se touchent */
  html[data-temoignages="selecteur"] .temoignages :is(blockquote, .temo-fond, .temo-nav, .pied) { grid-column: 1; grid-row: 1; }
  html[data-temoignages="selecteur"] .temoignages blockquote { padding: 36px 24px 104px; min-height: 0; }
  html[data-temoignages="selecteur"] .temoignages .citation { font-size: 19px; max-width: none; }
  html[data-temoignages="selecteur"] .temoignages .pied { padding: 0 0 0 24px; margin-bottom: 32px; }
  html[data-temoignages="selecteur"] .temoignages .temo-nav { padding: 0 20px 24px 0; }
  html[data-temoignages="selecteur"] .temoignages .temo-fond canvas { opacity: 0.5; } /* panneau étroit : le texte couvre tout, le motif se fait plus léger */
  html[data-temoignages="selecteur"] .temoignages .temoignage .auteur { grid-column: 1; border-left: 0; padding: 16px 20px 16px 24px; }
  html[data-temoignages="selecteur"] .temoignages .temoignage:nth-child(1) .auteur { grid-row: 2; } html[data-temoignages="selecteur"] .temoignages .temoignage:nth-child(2) .auteur { grid-row: 3; } html[data-temoignages="selecteur"] .temoignages .temoignage:nth-child(3) .auteur { grid-row: 4; }
  html[data-temoignages="selecteur"] .temoignages .temo-curseur { display: none; } /* les cellules n'ont plus la même hauteur : le curseur devient le bord de la cellule active */
  html[data-temoignages="selecteur"] .temoignages .temoignage[data-actif] .auteur { box-shadow: inset 6px 0 0 var(--tp-curseur); }
}
@media (prefers-reduced-motion: reduce) { .temoignages .citation i.m-int, .temoignages .pied[data-anime] > * { animation: none !important; } }