/* Family territory: drome, haute-savoie, savoie.
   Departments without an office: no address to show. Overlap measured at extraction, once the hero was pulled out into variables: 100.0 %.
   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. */

@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}
    .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}
  }

/* ====== Composants des pages territoire (tokens existants uniquement) ====== */
    /* L'encadre qui remplace l'adresse et les horaires : ici il n'y a pas de bureau,
       ce qu'on affiche a la place, c'est la facon dont le premier rendez-vous se passe. */
    .visio-box{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
      padding:clamp(1.6rem,1rem + 2vw,2.4rem);max-width:none}

.visio-box .kicker{font-size:var(--step--1);font-weight:600;letter-spacing:.14em;
      text-transform:uppercase;color:var(--accent);margin-bottom:.7rem}

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

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size. The box text inherits the body size (var(--body), line-height 1.65). Was 1.05rem (16.8 px). */
.visio-box p{color:var(--ink-2);max-width:60ch}

.visio-box .row{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);
      display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center}

/* 10/10: the hairlines were the container's background showing through the 1px
   gaps, so an empty track (four towns in five columns) painted a whole block of
   that darker sand. Each tile now draws its own outline, the 1px gap and the 1px
   padding make neighbouring outlines land on the same pixel, and an empty track
   stays plain. */
.city-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1px;
      padding:1px;margin-top:clamp(2rem,1.2rem + 2vw,3rem)}

.city-list div{background:var(--paper);padding:1.3rem 1.4rem;outline:1px solid var(--line)}

.city-list .cn{font-family:"Source Serif 4",Georgia,serif;font-size:1.25rem;font-weight:500}

.city-list .cd{color:var(--muted);font-size:.95rem;margin-top:.25rem}

.vsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(2rem,1.2rem + 2vw,3rem)}

.vstep{padding:2rem 1.8rem 2.2rem;border-left:1px solid var(--line)}

.vstep:first-child{border-left:0;padding-left:0}

.vstep h3{margin-bottom:.6rem}

/* 27/10, Valérie on Bourgoin-Jallieu: « un point rouge devant les 4 blocs ». An unnumbered step opens on the red dot of the lists; a numbered one keeps its number, which comes first and leaves the title unmarked. */
.vstep h3:first-child::before{content:"";display:inline-block;width:8px;height:8px;margin-right:.6rem;
      border-radius:50%;background:var(--accent);vertical-align:.2em}

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size. Step texts and list items inherit the body size (var(--body), line-height 1.65). Both were 1.05rem (16.8 px). */
.vstep p{color:var(--ink-2)}

.vlist{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.9rem;max-width:56ch}

.vlist li{padding-left:1.6rem;position:relative;color:var(--ink-2)}

.vlist li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
      border-radius:50%;background:var(--accent)}

.vlist b{color:var(--ink);font-weight:600}

@media (max-width:900px){
      .vsteps{grid-template-columns:1fr}
      .vstep{border-left:0;border-top:1px solid var(--line);padding:1.8rem 0}
      .vstep:first-child{padding-top:0;border-top:0}
    }