/* Specific to the pourquoi-agence 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. */

/* .cf-photo : règle conservée à l'identique des autres pages de segment, mais
     non utilisée sur celle-ci. La seule image retenue part en bandeau de hero, et
     une même photo ne peut pas servir deux fois sur la même page. */
  .cf-photo{aspect-ratio:3/2;border:1px solid var(--line-strong);border-radius:var(--r);
    background:#E6E2D8 center/cover no-repeat}

/* ============ AGENCES ============ */
  /* Le nombre de colonnes vient de la page, par une variable et non par un style
     inline sur la grille : un style inline battait les deux media queries qui
     repliaient la grille, et les villes debordaient de 126 px a 390 px. */
  .cities{display:grid;grid-template-columns:repeat(var(--cities-cols,4),1fr);gap:1px;background:var(--line);border:1px solid var(--line)}

/* T14 a T16 : micro-conversions */
  .micro{margin-top:2.2rem;padding:1.6rem 1.7rem;border:1px solid var(--line);
    border-radius:var(--r);background:var(--surface)}

.micro h3{font-size:1.2rem;margin-bottom:.6rem}

.micro p{color:var(--ink-2);max-width:var(--measure)}

.micro form{margin-top:1.1rem;display:grid;gap:.9rem}

.micro .m-row{display:flex;flex-wrap:wrap;gap:.8rem}

.micro input[type=text],.micro input[type=email],.micro textarea{
    flex:1;min-width:13rem;min-height:var(--target);padding:.7rem .9rem;
    border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper);
    font:inherit;color:var(--ink)}

.micro textarea{min-height:110px;width:100%}

@media (hover:hover){.micro input:hover,.micro textarea:hover{border-color:var(--muted)}}

.micro .m-note{font-size:.9rem;color:var(--muted)}

.micro .m-neutral{font-weight:600;color:var(--ink)}

/* Numerotation des stages. Le <ol> porte deja l'ordre pour les lecteurs
     d'ecran ; ce compteur ne fait que le rendre visible. */
  .vsteps{counter-reset:etape;list-style:none;padding:0;margin:0}

.vstep{counter-increment:etape}

.vstep::before{content:counter(etape);display:block;
    font-family:"Source Serif 4",Georgia,serif;font-size:2.1rem;font-weight:500;
    line-height:1;color:var(--accent);margin-bottom:.8rem}

@media (max-width:900px){
    .hero-grid,.founder-grid,.cv-grid{grid-template-columns:1fr}
    .founder-photo{aspect-ratio:16/11;max-width:520px}
    .cf-photo{aspect-ratio:16/10;max-width:560px}
    .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}
    .cities{grid-template-columns:1fr 1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
    .segblock,.segblock.flip{grid-template-columns:1fr}
    .segblock-media,.segblock.flip .segblock-media{order:-1;aspect-ratio:16/11;max-width:520px}
  }

/* ====== Page question-reponse (jetons existants uniquement) ======
       Une question par bloc, chacune avec son ancre, parce que les sept liens de
       l'accueil pointent chacun vers la sienne. Le rythme des fonds suit celui des
       pages soeurs : deux blocs par fond, jamais deux fonds identiques a la suite. */
    .qa-wrap{max-width:var(--measure)}

/* 06/10: the gap between two questions follows the site-wide cut, about a quarter. */
.qa + .qa{margin-top:clamp(2rem,1.5rem + 1.5vw,3rem);padding-top:clamp(1.8rem,1.35rem + 1.5vw,2.7rem);
      border-top:1px solid var(--line)}

/* 07/10: the size moved to base.css, the home page's smallest section title. */
.qa h2{margin-bottom:1rem}

/* 06/10: anchors land under the site-wide offset of base.css. The second question of
   a band already carries its rule and padding above the title (54px of air at
   1 440px); the first has none and stopped 10px under the header. It gets the
   difference back, so both land at a comparable distance. */
.qa[id]:not(.qa + .qa){scroll-margin-top:1.75rem}

.qa p{margin-bottom:1rem;line-height:1.65}

.qa p:last-child{margin-bottom:0}

.qa b{color:var(--ink)}

/* 06/10: every other pair of questions now sits on the taupe band (base.css). */
.band-taupe .qa b{color:#fff}

/* Les cinq stages sont numerotees parce que l'ordre porte l'information : c'est le
       deroule d'un accompagnement, pas une liste de points. */
    .stages{margin:1.2rem 0;padding-left:0;list-style:none;counter-reset:et}

.stages li{counter-increment:et;position:relative;padding-left:2.6rem;margin-bottom:.9rem;
      line-height:1.6}

.stages li::before{content:counter(et);position:absolute;left:0;top:.05em;
      width:1.8rem;height:1.8rem;border-radius:50%;background:var(--tint);color:var(--brand);
      font-weight:600;font-size:.95rem;display:grid;place-items:center}

/* La bande vidéo ajoutée le 24/09, à sa demande : les deux reportages télé sous
   les questions. Deux colonnes qui retombent à une seule quand la place manque,
   plutôt qu'une grille fixe qui casserait sur une seule vidéo remplie. */
.qa-videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1.6rem}

/* 23/10: three videos since the third slot; on a wide screen they share one row
   rather than two and a lone one under them. */
@media (min-width:1000px){.qa-videos:has(> :nth-child(3)){grid-template-columns:repeat(3,1fr)}}