/* Family office: bourgoin-jallieu, grenoble, lyon, voiron.
   Cities with a real office: photo, address, opening hours. 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 de bureau (tokens existants uniquement) ====== */
    /* Photo du vrai bureau. Les fichiers d'origine font 480 px de cote : ils
       tiennent dans une colonne, jamais en bandeau pleine largeur, ou ils
       seraient flous. C'est la raison pour laquelle ces pages n'ont pas le hero
       photo des pages departement. */
    .office-photo{aspect-ratio:1/1;border:1px solid var(--line-strong);border-radius:var(--r);
      background:#E6E2D8 center/cover no-repeat}

.office-photo-cap{margin-top:.8rem;color:var(--muted);font-size:.95rem;max-width:40ch}

/* Fiche pratique : c'est l'information que l'on vient chercher sur une page
       de bureau, elle passe donc avant le discours. */
    .venue{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,1rem + 4vw,4rem);align-items:start}

.venue-card{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
      padding:clamp(1.6rem,1rem + 2vw,2.2rem)}

.venue-card address{font-style:normal;font-family:"Source Serif 4",Georgia,serif;
      font-size:1.35rem;line-height:1.45;color:var(--ink)}

.venue-dl{margin:1.6rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line);display:grid;gap:1.1rem}

.venue-dl dt{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted)}

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size. The opening hours inherit the body size (var(--body), line-height 1.65). Was 1.05rem (16.8 px). */
.venue-dl dd{margin:.25rem 0 0;color:var(--ink-2)}

.venue-tel{display:inline-block;min-height:var(--target);line-height:var(--target);
      font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.25rem,1.15rem + .35vw,1.4rem);font-weight:600;
      text-decoration:none;color:var(--ink);border-bottom:3px solid var(--accent)}

/* 07/10, « partout pareil », then 08/10 « trop gros »: the office number keeps the
   size of the callback block's number (base.css .cv-tel), about 20 px on a phone
   and 22 px on a desktop. */

@media (hover:hover){.venue-tel:hover{color:var(--accent)}}

.venue-actions{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center}

/* Carte. Leaflet est servi depuis le site, les tuiles ne posent aucun cookie,
       contrairement a l'iframe Google Maps de l'ancien site. Le conteneur cree son
       propre contexte d'empilement pour ne pas passer devant le header sticky. */
    .map-wrap{position:relative;z-index:0}

#map{width:100%;aspect-ratio:4/3;min-height:320px;
      border:1px solid var(--line-strong);border-radius:var(--r);background:var(--tint)}

#map .leaflet-container{font:inherit}

/* Les tuiles OpenStreetMap sont tres colorees : desaturees et eclaircies,
       elles redeviennent un fond neutre qui laisse le reperage rouge ressortir.
       CARTO, qui servait ce gris clair nativement, filigrane depuis peu les
       requetes sans cle d'API. */
    /* 23/10, Lucas: « avoir toutes les maps du site en couleur » (Valérie on
       the phone: « le plan en couleur »). The grey filter goes; the tiles stay
       OpenStreetMap's, so no new third party sees the visitors. */

.pin-office{display:block;width:20px;height:20px;border-radius:50%;background:var(--accent);
      border:3px solid #fff;box-shadow:0 1px 4px rgba(12,14,16,.35)}

.leaflet-popup-content{margin:.85rem 1rem;font-size:.95rem;line-height:1.5;color:var(--ink-2)}

.leaflet-popup-content b{display:block;font-family:"Source Serif 4",Georgia,serif;font-size:1.15rem;
      font-weight:600;color:var(--ink);margin-bottom:.2rem}

.leaflet-popup-content-wrapper{border-radius:var(--r)}

.map-fallback{display:flex;align-items:center;justify-content:center;height:100%;padding:1.5rem;
      text-align:center;color:var(--ink-2)}

/* Etapes et listes reprises du gabarit territoire */
    .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)}

.vstep .vnum{font-family:"Source Serif 4",Georgia,serif;font-size:1.1rem;font-weight:600;
      color:var(--accent);display:block;margin-bottom:.5rem}

.vsteps-2{grid-template-columns:repeat(2,1fr)}

.vsteps-2 .vstep:nth-child(odd){border-left:0;padding-left:0}

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

/* 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-fit,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}

/* Emplacement laisse volontairement vide : l'information manque dans la base
       recuperee, on la demande a la cliente plutot que de l'inventer. A retirer
       une fois la reponse obtenue. */
    .to-confirm{border:1px dashed var(--line-strong);border-radius:var(--r);
      background:var(--surface);padding:1.4rem 1.5rem;max-width:60ch}

.to-confirm .ac-h{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
      font-weight:600;color:var(--accent);margin-bottom:.5rem}

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size. Inherits the body size. Was 1rem (16 px). */
.to-confirm p{color:var(--ink-2);margin:0}

@media (max-width:900px){
      /* minmax(0,1fr) et non 1fr : la carte porte aspect-ratio 4/3 et min-height 320px,
         ce qui donnait a la piste un minimum automatique de 427 px. La fiche s'y
         etirait et la page debordait de 57 px a 390 px. */
      .venue{grid-template-columns:minmax(0,1fr)}
      .vsteps,.vsteps-2{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}
      .office-photo{aspect-ratio:16/11;max-width:520px}
    }

/* 22/10, Valérie: the old site's panorama of the town as the banner of an office
   page (parts/agency-hero.php). The pictures are 1920x365: a band lower than the
   other banners keeps most of the town in view instead of its middle only. The
   title sits at the bottom (base.css, .hero-title-only). */
.has-bg.hero.hero-pano{min-height:clamp(13rem,15vw + 6rem,21rem)}
/* 24/10, Valérie and Lucas: « enlever l'assombrissement du dégradé noir », on
   every office, as on her old site, where « Agence de Lyon » stood in white on
   the bare panorama. The full-height veil of 23/10 goes (it was there for the
   eyebrow on Grenoble's yellow fronts; the eyebrow went too): the photo alone, in its own colours.
   What keeps the white title readable is a shadow hugging the letters, the old
   site's device made a little firmer, not a darkened band. The title is shorter
   and smaller (« trop long et trop gros »): « Agence de Lyon » on one line. */
.has-bg.hero-title-only.hero-pano{
  background-image:var(--hero-img,linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)));
  background-position:var(--hero-pos,center 50%);background-size:cover}
.hero-pano h1{font-size:clamp(1.9rem,1.35rem + 2.2vw,3rem);line-height:1.1;font-weight:500;
  text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 10px rgba(0,0,0,.6),0 0 26px rgba(0,0,0,.45)}
.hero-after-pano{padding-top:clamp(2rem,1.4rem + 2vw,3rem)}
/* The band is low: the title takes the full width so it holds on two lines,
   instead of three that would fill the band up to its edges. */
.hero-pano .s-head{max-width:none!important}
/* 23/10: no narrower measure, as on every banner (base.css). */
/* Under the banner the text starts at the top, next to the office photo, rather
   than centred on its height with a void above it. */
.hero-after-pano .hero-grid{align-items:start}
/* 23/10, Lucas: « trop d'espace vide entre Être rappelé et Venir nous voir ».
   The square office photo stood about 430 px tall beside a text of about 230:
   under the button, some 400 px of nothing before the next section. The photo
   goes 3:2 on a wide screen, as tall as the text and its caption. */
@media (min-width:901px){.hero-after-pano .office-photo{aspect-ratio:3/2}}
.hero-after-pano{padding-bottom:clamp(1.5rem,1rem + 1.5vw,2.25rem)}
/* On a narrow screen only a third of a panorama shows. The landmarks of the four
   (Fourvière, Saint-Bruno, the church of Bourgoin) stand left of centre, so the
   frame slides left instead of showing the sky between them. */
@media (max-width:900px){.has-bg.hero-pano{background-position:center,28% 50%}
  .has-bg.hero-title-only.hero-pano{background-image:var(--hero-img,linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)));background-position:28% 50%}}

/* 23/10, Lucas: « sur les pages des agences je pense qu'on peut encore réduire
   de l'espace ». Three voids, measured at 1440 px on Lyon:
   - between sections, 84 px of cream every time (--sp 48 + --sp-joined 36): the
     office pages take a tighter rhythm, about 60 px;
   - the map, 4:3 and at least 320 px, stood a third taller than the address card
     beside it, leaving a blank under the card: on a wide screen it now takes the
     card's height;
   - the office photo goes 16:10, a little lower again beside its short text. */
.single-agency main{--sp:clamp(1.6rem,1.2rem + 1.2vw,2.2rem);--sp-joined:clamp(1.1rem,.8rem + 1vw,1.6rem)}
.single-agency .segment-line{padding-block:var(--sp-joined)}
@media (min-width:901px){
  .single-agency .venue{align-items:stretch}
  .single-agency .venue #map{aspect-ratio:auto;height:100%;min-height:300px}
  /* 24/10, Lucas: « on la voit pas en entier sur la photo » (Lyon). The office
     photos are square and Valérie sits in their upper part: a centred 16:10 crop
     cut her head. The crop keeps the upper part (checked on the three offices). */
  .hero-after-pano .office-photo{aspect-ratio:4/3;background-position:center 30%}}
/* 24/10, later, Lucas: « la photo de l'agence de Voiron est pas bien cadrée ».
   16:10 cut her hands and the desk on the Voiron photo (456 x 400). 4:3 framed
   at 30 % from the top shows all three offices whole: Lyon at her desk, Grenoble
   in the armchair, Voiron with her hands on the table. Same on a phone. */
@media (max-width:900px){.hero-after-pano .office-photo{background-position:center 30%}}
/* The section under the panorama keeps its own padding (base .hero): tightened
   to the same rhythm, so the address block comes up under the photo caption. */
.single-agency .hero-after-pano{padding-top:clamp(1.6rem,1.2rem + 1.2vw,2.2rem);padding-bottom:var(--sp-joined)}
/* 24/10: an office with its video shows it under the text (agency-hero.php); the
   text column is then the taller one, so the photo goes back to its own square
   format beside it, uncropped. */
.office-video{margin-top:clamp(1.6rem,1.2rem + 1vw,2.2rem);max-width:620px}
/* 27/10, Valérie: « tu peux la faire plus claire », the office video. Its frame
   is a sunlit street in front of a dark door: the grey veil every thumbnail
   carries (.video::before, base.css) is kept faint here. */
.office-video .video::before{background:rgba(12,14,16,.12)}
@media (min-width:901px){.hero-after-pano .hero-grid:has(.office-video) .office-photo{aspect-ratio:1/1}}
/* 24/10, Valérie: « pour Bourgoin-Jallieu, peux-tu utiliser les mêmes couleurs
   que pour les autres agences ? il faut mettre du blanc comme pour les autres ».
   The towns block (parts/agency-towns.php, only Bourgoin fills it) came on the
   taupe band, the only dark section above « Confidentialité » on an office page.
   It now sits on the page ground with the page's own colours, like the rest of
   the office pages; the taupe of the shared « Confidentialité » band stays. */
.single-agency section.band-taupe:has(.city-list){background:transparent;color:var(--ink-2);--line:inherit}
.single-agency section.band-taupe:has(.city-list) h2{color:var(--ink)}
.single-agency section.band-taupe:has(.city-list) .eyebrow{color:var(--accent)}
.single-agency section.band-taupe:has(.city-list) .lead{color:var(--ink-2)}

/* 25/10, Lucas: « dans les pages des agences, il faut que Venir nous voir soit en
   fond blanc ». The address card keeps its --paper fill and stands out on it. */
.venue-band{background:#fff}