/* Page /kit-media (mobile d'abord). Reprend les composants de l'accueil (accueil.css). */

/* ---------- Hero ---------- */
.kit-hero {
  display: flex; flex-direction: column; gap: var(--s-6);
  padding-top: var(--s-14); padding-bottom: var(--s-14);
}
.kit-hero .titre-display { max-width: 15em; }
.kit-hero .texte-large { max-width: 40em; }
@media (min-width: 1024px) {
  .kit-hero { padding-top: var(--s-24); padding-bottom: var(--s-24); }
}

/* ---------- Bandeau chiffres : 4 preuves ---------- */
.chiffres-kit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .chiffres-kit { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .chiffres-kit { display: grid; } }

/* ---------- Grilles à deux colonnes ---------- */
.grille-deux { grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 768px) { .grille-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Audience ---------- */
.audience-chiffre { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.audience-chiffre .chiffre-valeur { font-size: 2.5rem; }
.audience-libelle { font-weight: 600; color: var(--texte); }
@media (min-width: 768px) { .audience-chiffre .chiffre-valeur { font-size: 3rem; } }

.kit-intertitre {
  font-family: var(--font-titre); font-weight: 900; text-transform: uppercase;
  font-size: 1.125rem; line-height: 1.25; margin: var(--s-14) 0 var(--s-6);
}
.chiffres-relais {
  list-style: none; margin: 0; padding: var(--s-6) 0;
  border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6);
}
.chiffres-relais .chiffre-valeur { white-space: nowrap; }
@media (min-width: 1024px) { .chiffres-relais { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.legende-sources { margin-top: var(--s-4); }

/* ---------- Résultats ---------- */
.kit-resultats { display: grid; gap: var(--s-8); }
.kit-resultats-texte { display: flex; flex-direction: column; gap: var(--s-4); }
.carte-exemple .carte-episode-titre { font-size: 1.125rem; }
@media (min-width: 1024px) {
  .kit-resultats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s-14); }
}

/* ---------- Logos : cartes crème (choix validé par Vanessa le 09/11/2026) ---------- */
.grille-logos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3);
}
@media (min-width: 640px) { .grille-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }
/* 4 colonnes (pas 5) : avec Unlocker sur deux cases, la grille reste sans trou et dans l'ordre du brief. */
@media (min-width: 1024px) { .grille-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.carte-logo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 112px; padding: var(--s-4) var(--s-6);
  background: var(--creme); border-radius: var(--r-md);
  transition: transform .25s ease;
}
.carte-logo:hover { transform: translateY(-4px); }
.carte-logo img { width: auto; height: auto; max-width: 100%; max-height: 44px; }
/* Logo très allongé (Unlocker) : la carte prend deux colonnes pour rester lisible. */
.carte-logo-large { grid-column: span 2; }
.carte-logo-large img { width: 100%; max-width: 300px; max-height: none; }
.logo-nom {
  font-family: var(--font-titre); font-weight: 800; font-size: 1.0625rem; line-height: 1.2;
  color: var(--nuit); text-align: center;
}
.carte-logo img + .logo-nom { font-size: .875rem; }

/* ---------- Témoignages ---------- */
.temoignage { margin: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.temoignage blockquote { margin: 0; flex-grow: 1; }
.temoignage blockquote p { font-size: 1.0625rem; line-height: 1.55; color: var(--texte); }
.temoignage figcaption { font-size: .9375rem; color: var(--texte-2); }
.temoignage figcaption strong { color: var(--texte); font-weight: 600; }
/* Carrousel des recommandations : défilement horizontal natif (glisser au doigt, molette, clavier).
   Sans JavaScript, la piste défile quand même ; les boutons n'apparaissent qu'avec JavaScript. */
.carrousel { display: flex; flex-direction: column; gap: var(--s-4); }
.carrousel-piste {
  display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: var(--s-4);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none;
  padding: var(--s-1) 0 var(--s-2);
}
.carrousel-piste::-webkit-scrollbar { display: none; }
.carrousel-piste:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: var(--r-md); }
.carrousel-piste > .temoignage { scroll-snap-align: start; }
@media (min-width: 768px) { .carrousel-piste { grid-auto-columns: calc((100% - var(--s-4)) / 2); } }
.carrousel-commandes { display: flex; gap: var(--s-2); justify-content: flex-end; }
.carrousel-commandes[hidden] { display: none; }
.carrousel-bouton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  background: transparent; color: var(--texte); font-size: 1.125rem; cursor: pointer;
  border: 1px solid var(--bordure-forte); border-radius: var(--r-full);
  transition: border-color .2s ease, color .2s ease;
}
.carrousel-bouton:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); }
.carrousel-bouton:focus-visible { outline: none; box-shadow: var(--focus); }
.carrousel-bouton:disabled { opacity: .35; cursor: default; }
@media (prefers-reduced-motion: reduce) { .carrousel-piste { scroll-behavior: auto; } }

.episodes-partenaires { margin-top: var(--s-10); display: flex; flex-direction: column; gap: var(--s-3); }
.episodes-partenaires ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-8); }
.episodes-partenaires .lien-fleche { display: inline-flex; align-items: center; min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .carte-logo { transition: none; }
  .carte-logo:hover { transform: none; }
}