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

/* ============ 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)}

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

/* ============ PAGE : NOS AGENCES ============ */
  /* Façade de carte : placeholder éditorial sobre, jamais d'iframe en aperçu */
  /* Carte des bureaux. Leaflet est servi depuis le site (pas de CDN) et les
     tuiles ne posent aucun cookie, contrairement a une iframe Google Maps.
     Le conteneur cree son propre contexte d'empilement : les z-index internes
     de Leaflet ne peuvent pas passer devant le header sticky. */
  .map-wrap{position:relative;z-index:0}

/* 22/10, Lucas: « la map est trop grosse et grise : plus petit et couleur ».
   Was a 16/7 ratio, 480 px high on a desktop; now a third lower. The Drôme gone,
   the pins fit a tighter frame and the map zooms in by itself. */
#map{width:100%;height:clamp(250px,22vw + 60px,340px);
    border:1px solid var(--line-strong);border-radius:var(--r);background:var(--tint)}

#map .leaflet-container{font:inherit}

/* 22/10: the OpenStreetMap tiles keep their own colours. The grey filter that
     stood here (grayscale, contrast .92, brightness 1.06) is removed; the red
     office pins keep their white ring, which holds on any background. */

.pin{display:grid;place-items:center;border-radius:50%;font-weight:700;
    box-shadow:0 1px 4px rgba(12,14,16,.35)}

.pin-office{width:20px;height:20px;background:var(--accent);border:3px solid #fff}

.pin-visit{width:13px;height:13px;background:#fff;border:3px solid var(--ink-2)}

.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 a{color:var(--accent);font-weight:600}

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

.map-legend{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;
    margin-top:.9rem;color:var(--muted);font-size:.95rem}

.map-legend span{display:inline-flex;align-items:center;gap:.5rem}

.map-legend i{display:block;border-radius:50%}

.map-legend .i-office{width:14px;height:14px;background:var(--accent);border:2px solid #fff;box-shadow:0 0 0 1px var(--line-strong)}

.map-legend .i-visit{width:12px;height:12px;background:#fff;border:2px solid var(--ink-2)}

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

/* Cartes bureaux */
  .offices{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(2.5rem,1.5rem + 2vw,3.5rem)}

.office{background:var(--paper);padding:clamp(1.6rem,1rem + 1.5vw,2.2rem);display:flex;flex-direction:column}

.office h3{font-family:"Source Serif 4",Georgia,serif;font-size:var(--h3);font-weight:500;letter-spacing:-.005em;margin-bottom:.9rem}

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size.
   Address and opening hours are content: var(--body). Were 1.05rem (16.8 px) and
   .95rem (15.2 px). */
.office address{font-style:normal;color:var(--ink-2);font-size:var(--body);line-height:1.6}

/* 22/10: a department followed in visio shows its towns where an office shows its address. */
.office .o-area{color:var(--ink-2);font-size:var(--body);line-height:1.6}

.office .o-tel{display:inline-block;margin-top:1rem;text-decoration:none;color:var(--ink);font-weight:600;border-bottom:1px solid var(--line-strong)}

@media (hover:hover){.office .o-tel:hover{border-bottom-color:var(--accent);color:var(--accent)}}

.office .o-hours{color:var(--muted);font-size:var(--body);margin-top:.9rem}

.office .o-links{margin-top:auto;padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center}

/* Zones desservies : bloc léger */
  .zones{border-top:1px solid var(--line)}

.zones .zone-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}

.zone-item{padding-top:1.3rem;border-top:2px solid var(--ink)}

.zone-item .zn{font-family:"Source Serif 4",Georgia,serif;font-size:1.5rem;font-weight:500;color:var(--ink)}

/* 21/10, Valérie on /label-oncrh/: « la typo et la taille sont parfaites », every page takes the same running text size.
   Was 1rem (16 px). No template renders .zone-item today (the zones section uses
   .cities), aligned anyway so a revived block cannot come back small. */
.zone-item .zd{color:var(--ink-2);font-size:var(--body);margin-top:.5rem}

@media (max-width:900px){
    .offices{grid-template-columns:1fr}
    .zones .zone-list{grid-template-columns:1fr}
  }

/* 23/10, Lucas: « mettre en rouge les localisations (Lyon, Grenoble, etc.) ». The
   town at the head of each address card takes the logo red: 7.5:1 on the band. */
.offices .office h3{color:var(--logo-red)}