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

/* 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}
    .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.
   Was 1.05rem (16.8 px); the paragraph now inherits var(--body) from body. */
.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}

/* 21/10: left at .95rem on purpose. The towns under each area name are the tile's
   secondary line, like .city .ca in base.css and the same rule in the three family
   sheets, all kept small when running text moved to the body size. */
.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{list-style:none;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}

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size.
   Step descriptions and the bullet list: both were 1.05rem (16.8 px), both now
   inherit var(--body). */
.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}
    }