/* Specific to the temoignages page.
   Extracted from the mockups by pilotage/extract-css.ts.
   Do not edit by hand while the theme is incomplete: the mockups are still
   the source, and an edit here would be overwritten on the next run. */

/* Meme regle que sur l'accueil, reprise a l'identique le 30/08 pour la mention de
     consentement posee sous le titre des videos. Le gris bleute tient 4,8 sur le creme.
   21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page
   takes the same running text size. Was 1.15rem (18.4 px), now the body size like the
   home page's .s-intro. */
  .s-intro{color:var(--ink-2);font-size:var(--body);margin-top:.4rem}

/* ============ PAGE TÉMOIGNAGES (spécifique) ============ */
  /* 21/10, Valérie: the filter bar and its count are gone from the page, and
     their rules with them. */

/* Rangée de vidéo-témoignages en tête */
  .vrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,.6rem + 2vw,2rem)}

/* Grille de cartes couple */
  .tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(1.25rem,.6rem + 2vw,2rem)}

.tcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);
    background:var(--surface);text-decoration:none;color:var(--ink);overflow:hidden;
    transition:border-color .18s ease}

@media (hover:hover){.tcard:hover{border-color:var(--line-strong)}}

@media (hover:hover){.tcard:hover .tc-name{color:var(--accent)}}

/* 21/10, Valérie: the initial on its warm block (.tc-photo) and the video
   thumbnail with its badge are gone. The filmed testimonials left the grid, and
   the written ones are text cards. */
.tc-body{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;flex:1}

.tc-name{font-family:"Source Serif 4",Georgia,serif;font-size:1.3rem;font-weight:500;letter-spacing:-.005em;line-height:1.15}

.tc-meta{color:var(--muted);font-size:.9rem;letter-spacing:.04em;margin-top:.4rem}

/* La coupe à 24 mots se fait côté serveur, dans archive-testimonial.php. Ce
   plafond de quatre lignes est la ceinture : à carte étroite, ou sur un extrait
   saisi à la main dans l'admin, il garde les cartes de la même hauteur.
   21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page
   takes the same running text size. The excerpt is running text: body size, and the
   body line-height (1.65) it already inherits. Was 1rem (16 px). */
.tc-quote{color:var(--ink-2);font-size:var(--body);margin-top:1rem;flex:1;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}

.tc-foot{margin-top:1.3rem;padding-top:.9rem;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:baseline;gap:1rem}

.tc-date{color:var(--muted);font-size:.82rem}

.tc-read{color:var(--accent);font-weight:600;font-size:.92rem;white-space:nowrap}

.load-more{margin-top:clamp(2.5rem,1.5rem + 2vw,3.5rem);text-align:center}

/* Bridge de transition vers le rappel */
  /* 22/10, Lucas: « ce titre est tout recroquevillé alors qu'il pourrait prendre
     plus de place ». The 24ch were measured in the wrapper's body size (about
     230 px) while the line is set at the display size: four lines of two words.
     The width is freed and the lines balanced: one line on a desktop, two even
     ones on a narrow screen. */
  .bridge{max-width:none;margin-bottom:clamp(2rem,1rem + 3vw,3rem)}
.bridge p{text-wrap:balance}

.bridge p{font-family:"Source Serif 4",Georgia,serif;font-weight:400;font-size:var(--display);line-height:1.24;
    letter-spacing:-.01em;color:var(--ink);max-width:none}

/* Hero editorial : pleine largeur, sans photo, contrairement a l'accueil.
     C'est ce qui distingue visuellement les deux pages des le premier ecran. */
  .hero .hero-grid{grid-template-columns:1fr}

.hero h1{max-width:20ch}

.hero .lead{max-width:58ch}

@media (max-width:900px){
    .hero-grid,.founder-grid,.cv-grid{grid-template-columns:1fr}
    .founder-photo{aspect-ratio:16/11;max-width:520px}
    .steps{grid-template-columns:1fr}
    .step{border-left:0;border-top:1px solid var(--line);padding:1.8rem 0}
    .step:first-child{padding-top:0;border-top:0}
    .quotes{grid-template-columns:1fr}
    .vrow{grid-template-columns:1fr}
    .cities{grid-template-columns:1fr 1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
  }

/* 12/10, Lucas: « plein d'espaces » between the « Être rappelé » button, the
   « 0 algorithme » line and the filters. Measured at 1440 px: the grid's row gap
   (72 px) and the note's own margin (64 px) stacked 136 px of blank above a single
   line, then the banner's bottom padding and the next section's top padding put
   92 px more before the filters. The three blocks now read as one strip. */
.hero{padding-bottom:clamp(1.2rem,.8rem + 1vw,1.8rem)}
.hero-grid{row-gap:0}
.hero-note{margin-top:clamp(1.6rem,1.2rem + 1vw,2.2rem);padding-top:1.1rem}
.hero + section{padding-top:clamp(1rem,.8rem + .6vw,1.4rem)}

/* 12/10, Lucas: « plein d'espaces » between the « Être rappelé » button, the
   « 0 algorithme » line and the filters. Measured at 1440 px: the grid's row gap
   (72 px) and the note's own margin (64 px) stacked 136 px of blank above a single
   line, then the banner's bottom padding and the next section's top padding put
   92 px more before the filters. The three blocks now read as one strip. */
.hero{padding-bottom:clamp(1.2rem,.8rem + 1vw,1.8rem)}
.hero-grid{row-gap:0}
.hero-note{margin-top:clamp(1.6rem,1.2rem + 1vw,2.2rem);padding-top:1.1rem}
.hero + section{padding-top:clamp(1rem,.8rem + .6vw,1.4rem)}

/* 22/10, Valérie: the list heading is her sentence, « en rouge ». A sentence, not
   a title: one step smaller than an h2, on the width of the grid. 7.5:1 on the
   light ground. */
.s-head-list{max-width:none}
.s-head-list h2{color:var(--logo-red);font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);line-height:1.25;max-width:40ch;text-wrap:balance}

/* 23/10, Valérie: « deux fois le témoignage sur la page, une fois en tronqué et une
   en entier ». The single page now prints the whole story once, inside the quote
   frame. The pull-quote size (up to 1.6rem) suited a few lines, not a story of
   several paragraphs: the story keeps the serif and the rule above it, at a reading
   size between the body and the pull quote. */
.quote-story blockquote{font-size:clamp(1.18rem,1.1rem + .35vw,1.32rem);line-height:1.55}
.quote-story blockquote > * + *{margin-top:1em}