/* ============================================================
   Page Clients (refonte du 2026-10-16, telephone d'abord)
   Un cas = le resultat en gros, la video, une phrase du client.
   Rien d'autre (simplifiee le meme jour, retours de Thomas). Theme encre comme
   /a-propos, titres en Fraunces.
   Charge seulement par /clients, apres styles.css.
   ============================================================ */

.cl-serif { font-family: "Fraunces", Georgia, serif; font-weight: 500; letter-spacing: -0.02em; }

/* ---------- Ouverture ---------- */

.cl-ouverture { padding: 28px 0 20px; }
.cl-logo {
  display: block;
  height: 28px;
  width: auto;
  margin: 0 0 16px;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
.cl-ouverture h1 { font-size: 38px; line-height: 1.06; margin: 0 0 12px; }
.cl-ouverture h1 span { color: var(--accent); }
.cl-chapo { color: var(--texte-2); font-size: 16px; margin: 0; }

/* ---------- Sommaire colle sous l'en-tete ---------- */

.cl-sommaire {
  position: sticky;
  top: var(--haut-entete, 61px);
  z-index: 40;
  background: rgba(15, 23, 42, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}
.cl-sommaire .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.cl-pastille {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--texte-2);
  text-decoration: none;
  white-space: nowrap;
  padding: 7px 4px;
  border: 1px solid var(--trait);
  border-radius: 10px;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.cl-pastille b { color: var(--texte); font-size: 14px; font-weight: 700; }
.cl-pastille s { text-decoration-thickness: 1px; }
.cl-pastille small { font-size: inherit; }
.cl-pastille em { font-style: normal; margin: 0 3px; }
/* telephone : la case est etroite, seul le resultat final reste */
@media (max-width: 999px) { .cl-pastille s, .cl-pastille em { display: none; } }
.cl-pastille i { display: none; }
.cl-pastille.actif { border-color: var(--accent); background: rgba(77, 124, 255, 0.14); color: var(--texte); }

@media (min-width: 700px) {
  .cl-sommaire .wrap { display: flex; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .cl-pastille { flex-direction: row; gap: 6px; font-size: 14px; padding: 8px 16px; border-radius: 999px; }
}

/* ancres : le titre ne doit pas finir sous l'en-tete et le sommaire */
.cl-cas { scroll-margin-top: calc(var(--haut-entete, 61px) + 56px); }

/* ---------- Un cas ---------- */

.cl-cas { padding: 24px 0 28px; border-bottom: 1px solid var(--trait); }
.cl-cas:nth-of-type(even) { background: var(--fond-relief); }

.cl-grille { display: grid; gap: 14px; grid-template-areas: "tete" "media" "texte"; }
.cl-tete  { grid-area: tete; }
.cl-media { grid-area: media; }
.cl-texte { grid-area: texte; }
.cl-tete .cl-resultat { margin-bottom: 0; }

/* video bord a bord sur telephone : c'est elle qu'on doit avoir envie de toucher */
.cl-media { margin: 0 calc(var(--marge) * -1); }
.cl-media .video-facade { max-width: none; margin: 0; border-radius: 0; }

.cl-num {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}

.cl-resultat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 2px;
  margin: 0 0 20px;
  line-height: 1.1;
}
.cl-resultat s {
  font-size: 22px;
  font-weight: 700;
  color: var(--texte-2);
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(148, 163, 184, 0.7);
}
.cl-fleche { font-size: 22px; color: var(--texte-2); }
.cl-resultat strong {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 44px;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.cl-resultat em { flex-basis: 100%; font-style: normal; font-size: 14px; color: var(--texte-2); }

.cl-citation { margin: 0 0 14px; padding: 0 0 0 16px; border-left: 3px solid var(--accent); }
.cl-citation p { font-size: 19px; line-height: 1.45; margin: 0 0 6px; }
.cl-citation footer { font-size: 14px; color: var(--texte-2); }
.cl-citation footer strong { color: var(--texte); }


.cl-agence {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--texte-2);
  margin: 0 0 10px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--trait);
  border-radius: 999px;
}
.cl-agence b {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte);
  background: var(--fond-carte);
  padding: 3px 8px;
  border-radius: 999px;
}
.cl-texte { display: flex; flex-direction: column; align-items: flex-start; }

.cl-suivant {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  padding: 6px 0;
}
.cl-suivant::after { content: "\2193"; transition: transform 0.2s ease; }
.cl-suivant:hover::after { transform: translateY(3px); }

/* ---------- Fin ---------- */

.cl-fin { padding: 48px 0 56px; text-align: center; }
.cl-fin h2 { font-size: 38px; line-height: 1.08; margin: 0 0 14px; }
.cl-fin p { color: var(--texte-2); font-size: 17px; max-width: 26em; margin: 0 auto 28px; }

/* ---------- Apparitions (seulement si le script tourne) ---------- */

.cl-anime .cl-apparait { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.cl-anime .cl-apparait.vu { opacity: 1; transform: none; }

/* ---------- Petit telephone ---------- */

@media (max-width: 479px) {
  .cl-fin .btn { display: block; width: 100%; padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 399px) {
  .cl-ouverture h1 { font-size: 35px; }
}

@media (max-width: 339px) {
  .cl-ouverture h1 { font-size: 31px; }
  .cl-resultat strong { font-size: 38px; }
}

/* ---------- Tablette et ordinateur ----------
   La video reste la vedette : centree et large, le resultat au-dessus,
   la phrase du client dessous. Aucune colonne de texte a cote. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (min-width: 700px) {
  .cl-ouverture { padding: 48px 0 32px; text-align: center; }
  .cl-logo { margin: 0 auto 18px; }
  .cl-ouverture h1 { font-size: 54px; }
  .cl-sommaire .wrap { justify-content: center; }

  .cl-cas { padding: 44px 0; }
  .cl-grille { max-width: 880px; margin: 0 auto; gap: 18px; justify-items: center; text-align: center; }
  .cl-resultat { justify-content: center; }
  .cl-resultat strong { font-size: 56px; }
  .cl-media { margin: 0; width: 100%; }
  .cl-media .video-facade { border-radius: var(--rayon); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7); }
  .cl-media .video-facade img { transition: transform 0.5s ease; }
  .cl-media .video-facade:hover img { transform: scale(1.03); }
  .cl-texte { align-items: center; }
  .cl-citation { border-left: 0; padding: 0; }
  .cl-citation p { font-family: "Fraunces", Georgia, serif; font-size: 23px; line-height: 1.35; }
  .cl-fin { padding: 72px 0; }
}

/* ---------- Ordinateur : la salle de projection ----------
   Des l'arrivee, la video est a l'ecran : titre et 3 onglets a gauche,
   lecteur a droite. Un onglet change le cas sans faire defiler.
   Seulement si le script tourne (.cl-salle-js), sinon empilement. */

@media (min-width: 1000px) {
  .cl-salle-js {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "ouv cas" "som cas";
    column-gap: 56px;
    max-width: 1340px;
    margin: 0 auto;
    padding: 36px var(--marge) 56px;
  }
  .cl-salle-js .wrap { max-width: none; padding: 0; margin: 0; }

  .cl-salle-js .cl-ouverture { grid-area: ouv; padding: 0 0 24px; text-align: left; }
  .cl-salle-js .cl-logo { margin: 0 0 18px; height: 24px; }
  .cl-salle-js .cl-ouverture h1 { font-size: 40px; margin-bottom: 12px; }
  .cl-salle-js .cl-chapo { font-size: 16px; }

  .cl-salle-js .cl-sommaire {
    grid-area: som;
    position: static;
    background: none;
    border: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .cl-salle-js .cl-sommaire .wrap { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 0; }
  .cl-salle-js .cl-pastille {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    row-gap: 2px;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--fond-carte);
    white-space: normal;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
  }
  .cl-salle-js .cl-pastille b { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-2); }
  .cl-salle-js .cl-pastille i { display: block; grid-row: 1; grid-column: 2; font-style: normal; font-size: 13px; }
  .cl-salle-js .cl-pastille span {
    grid-column: 1 / -1;
    font-family: "Fraunces", Georgia, serif;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--texte);
  }
  .cl-salle-js .cl-pastille span s { font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--texte-2); }
  .cl-salle-js .cl-pastille em { font-family: "Manrope", sans-serif; font-size: 15px; color: var(--texte-2); margin: 0 8px; }
  .cl-salle-js .cl-pastille small { font-family: "Manrope", sans-serif; font-size: 14px; letter-spacing: 0; color: var(--texte-2); font-weight: 400; }
  .cl-salle-js .cl-pastille:hover { border-color: var(--accent); transform: translateX(4px); }
  .cl-salle-js .cl-pastille.actif { border-color: var(--accent); background: rgba(77, 124, 255, 0.14); }
  .cl-salle-js .cl-pastille.actif b { color: var(--accent); }
  .cl-salle-js .cl-pastille.actif span { color: var(--accent); }

  /* un seul cas a l'ecran, les autres attendent leur onglet */
  .cl-salle-js .cl-cas { grid-area: cas; padding: 0; border: 0; background: none; align-self: start; }
  .cl-salle-js .cl-cas:not(.cl-choisi) { display: none; }
  .cl-salle-js .cl-choisi { animation: cl-entree 0.35s ease; }
  .cl-salle-js .cl-grille {
    max-width: none;
    grid-template-columns: 1fr;
    grid-template-areas: "media" "texte";
    gap: 18px;
    justify-items: stretch;
    text-align: left;
  }
  .cl-salle-js .cl-tete { display: none; }
  /* la video tient toujours dans l'ecran, citation comprise */
  .cl-salle-js .cl-media { max-width: calc((100vh - 250px) * 16 / 9); }
  .cl-salle-js .cl-texte {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 24px;
    max-width: calc((100vh - 250px) * 16 / 9);
  }
  .cl-salle-js .cl-citation { grid-row: 1 / span 2; margin: 0; padding-left: 18px; border-left: 3px solid var(--accent); }
  .cl-salle-js .cl-citation p { font-size: 22px; }
  .cl-salle-js .cl-agence { margin: 0; justify-self: end; }
  .cl-salle-js .cl-suivant { justify-self: end; padding: 4px 0 0; }
  .cl-salle-js .cl-suivant::after { content: "\2192"; }
  .cl-salle-js .cl-suivant:hover::after { transform: translateX(3px); }

  .cl-fin { padding: 88px 0; }
  .cl-fin h2 { font-size: 52px; }
}

@keyframes cl-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cl-salle-js .cl-choisi { animation: none; } }