/* Page d'arrondissement « Bureaux à Lyon 3e » — V1.22.0.
   Première page d'arrondissement du site. Même socle que les pages d'autorité :
   filets fins, respiration, aucune carte décorative, aucun module global ajouté.

   La composition est PROPRE à cette page, et c'est ce qui la sépare du hub
   Bureaux : une règle réglementaire mise en exergue (la polarité bureau), une
   carte de repères chiffrés à périmètre explicite, un tableau de géographie
   institutionnelle qui publie une distinction plutôt qu'un slogan. Le hub
   Bureaux, lui, déroule des familles de situations et un cahier des charges.
   La non-cannibalisation est éditoriale avant d'être graphique, et se vérifie
   dans check-bureaux-lyon-3e-1220.mjs. */

/* ---------- Rythme ---------- */
body[data-page="bureaux-lyon-3e"] main > section{padding-bottom:clamp(2.6rem,5.5vw,5rem)}
body[data-page="bureaux-lyon-3e"] section[id]{scroll-margin-top:calc(var(--nav-h) + 1rem)}
body[data-page="bureaux-lyon-3e"] .sec-intro{max-width:60ch}
body[data-page="bureaux-lyon-3e"] .sec-intro + .sec-intro{margin-top:1rem}

/* ---------- Héros ---------- */
.b3-hero{min-height:62vh;min-height:66svh}
.b3-hero-bg{background-image:url('../../assets/derived/b3-plateau-1150.jpg')}
.b3-hero h1{margin-bottom:.2rem}
.b3-hero p{max-width:56ch}
.b3-hero-actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:2rem}
.b3-hero-actions .btn{min-height:44px}
.b3-hero-more{display:inline-flex;align-items:center;min-height:44px;color:#cfd0d6;font-size:.95rem;text-decoration:none;border-bottom:1px solid transparent;transition:color .3s ease,border-color .3s ease;text-shadow:0 1px 12px rgba(0,0,0,.65)}
.b3-hero-more:hover,.b3-hero-more:focus-visible{color:var(--ink);border-color:rgba(255,213,98,.55)}
@media(max-width:760px){
  .b3-hero{min-height:68vh;min-height:72svh;padding-top:5.2rem;padding-bottom:2rem}
  .b3-hero-bg{background-image:url('../../assets/derived/b3-plateau-690.jpg')}
  .b3-hero p{margin-top:1.05rem}
  .b3-hero-actions{margin-top:1.2rem;gap:1rem}
}

/* ---------- Fil d'Ariane ---------- */
.b3-crumb{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:1.1rem 0 0;color:var(--grey-2);font-size:.85rem;letter-spacing:.02em}
.b3-crumb a{color:var(--grey);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.b3-crumb a:hover,.b3-crumb a:focus-visible{color:var(--gold);text-decoration:underline}
.b3-crumb span[aria-current]{color:var(--grey-2)}

/* ---------- La règle mise en exergue ---------- */
.b3-regle{border-left:2px solid var(--gold);padding:.2rem 0 .2rem 1.4rem;margin:2.2rem 0 0;max-width:62rem}
.b3-regle-quote{font-family:var(--display);font-weight:200;font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.35;color:var(--ink);margin:0 0 .9rem;letter-spacing:-.01em}
.b3-regle-src{display:block;color:var(--grey-2);font-size:.85rem;line-height:1.6;font-style:normal}
.b3-regle p{color:var(--grey);font-size:.95rem;line-height:1.7;font-weight:300;margin:0 0 .8rem;max-width:60ch}
.b3-regle p:last-child{margin-bottom:0}
@media(max-width:640px){.b3-regle{padding-left:1rem}}

/* ---------- Couverture comparée ---------- */
.b3-couverture{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.9rem;max-width:56rem}
.b3-couverture li{border-top:1px solid var(--line);padding:.9rem 0 .2rem}
.b3-couverture li[data-couvert="oui"]{border-top-color:rgba(255,213,98,.55)}
.b3-couverture b{display:block;font-size:.95rem;color:var(--ink)}
.b3-couverture span{display:block;margin-top:.3rem;color:var(--grey-2);font-size:.82rem;line-height:1.5}
.b3-couverture li[data-couvert="oui"] span{color:var(--gold)}

/* ---------- Repères chiffrés, périmètre explicite ---------- */
.b3-reperes{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,3vw,2.4rem);max-width:62rem}
.b3-reperes li{border-top:1px solid rgba(255,213,98,.4);padding:1.2rem 0 .2rem}
.b3-reperes b{display:block;font-family:var(--display);font-weight:200;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.05;color:var(--ink);letter-spacing:-.02em}
.b3-reperes .b3-quoi{display:block;margin-top:.5rem;color:var(--grey);font-size:.93rem;line-height:1.55}
.b3-reperes .b3-perimetre{display:block;margin-top:.45rem;color:var(--grey-2);font-size:.8rem;line-height:1.5;letter-spacing:.02em;text-transform:uppercase}
@media(max-width:700px){.b3-reperes{grid-template-columns:1fr;gap:1rem}}

/* ---------- Géographie institutionnelle ---------- */
.b3-geo{margin:2rem 0 0;max-width:62rem;overflow-x:auto}
.b3-geo table{width:100%;border-collapse:collapse;min-width:34rem}
.b3-geo caption{text-align:left;color:var(--grey);font-size:.92rem;line-height:1.65;font-weight:300;margin-bottom:1rem;max-width:60ch}
.b3-geo th,.b3-geo td{text-align:left;padding:.85rem .8rem .85rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.b3-geo th{color:var(--grey-2);font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.b3-geo td{color:var(--grey);font-size:.93rem;line-height:1.55;font-weight:300}
.b3-geo td:first-child{color:var(--ink)}
.b3-geo td[data-ici="non"]{color:var(--gold)}

/* Sous 700 px, le tableau devient une PILE. Motif : en défilement horizontal, la
   colonne « Arrondissement » sortait de l'écran — or c'est elle qui porte le fait
   décisif, « 5e — pas ici ». Un lecteur mobile pouvait donc lire la ligne de la
   cour d'appel en croyant qu'elle siège dans le 3e comme les autres. La donnée la
   plus importante ne doit jamais dépendre d'un geste de défilement. */
@media(max-width:700px){
  .b3-geo{overflow-x:visible}
  .b3-geo table{min-width:0}
  .b3-geo thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .b3-geo tr{display:block;border-bottom:1px solid var(--line);padding:1rem 0}
  .b3-geo tr:last-child{border-bottom:0}
  .b3-geo td{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:.8rem;border:0;padding:.2rem 0}
  .b3-geo td::before{content:attr(data-col);color:var(--grey-2);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding-top:.15rem}
  .b3-geo td:first-child{font-size:1rem;line-height:1.4}
}

/* ---------- Bloc texte + figure ---------- */
.b3-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(1.8rem,4vw,3.4rem);align-items:start;margin:2.2rem 0 0}
.b3-split p{color:var(--grey);font-size:.95rem;line-height:1.7;font-weight:300;max-width:60ch}
.b3-lede{margin-top:0}
.b3-split h3{margin:1.6rem 0 .5rem;font-size:clamp(1.02rem,1.3vw,1.16rem);line-height:1.4}
.b3-split h3:first-child{margin-top:0}
@media(max-width:900px){.b3-split{grid-template-columns:1fr;gap:1.6rem}}

/* ---------- Figures ---------- */
.b3-figure{margin:0;max-width:680px}
.b3-figure img{display:block;width:100%;height:auto;border-radius:.4rem;border:1px solid var(--line)}
.b3-figure figcaption{margin-top:.8rem;color:var(--grey);font-size:.88rem;line-height:1.65;font-weight:300;max-width:60ch}

/* ---------- Situations ---------- */
.b3-cases{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.4rem,3vw,2.4rem);margin:2.4rem 0 0}
.b3-case{border-top:1px solid var(--line);padding:1.3rem 0 .3rem}
.b3-case h3{margin:0 0 .5rem;font-size:clamp(1.02rem,1.3vw,1.16rem);line-height:1.4}
.b3-case p{margin:0;color:var(--grey);font-size:.94rem;line-height:1.68;font-weight:300;max-width:56ch}
.b3-case-qui{display:block;margin-top:.7rem;color:var(--gold);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
/* Le seul cas oriente vers Guillaume Hourcade porte son propre appel a l'action :
   sans lui, le lecteur d'un dossier d'investissement n'avait que des CTA menant a
   l'interlocutrice des missions d'occupation. */
.b3-case-cta{margin:.9rem 0 0}
.b3-case-cta a{display:inline-flex;align-items:center;min-height:44px;color:var(--gold);text-decoration:none;font-size:.92rem}
.b3-case-cta a:hover,.b3-case-cta a:focus-visible{text-decoration:underline}
@media(max-width:860px){.b3-cases{grid-template-columns:1fr;gap:1.2rem}}

/* ---------- Limite de preuve, assumée ---------- */
.b3-limite{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.4rem 0;margin:2.4rem 0 0;max-width:62rem}
.b3-limite p{color:var(--grey);font-size:.95rem;line-height:1.7;font-weight:300;margin:0 0 .8rem;max-width:60ch}
.b3-limite p:last-child{margin-bottom:0}
.b3-limite a{color:var(--gold);text-decoration:none}
.b3-limite a:hover,.b3-limite a:focus-visible{text-decoration:underline}

/* ---------- Interlocutrice ---------- */
.b3-person{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(1.4rem,3vw,2.6rem);align-items:center;margin:2.2rem 0 0;max-width:60rem}
.b3-person img{display:block;width:100%;height:auto;border-radius:.4rem;border:1px solid var(--line);filter:saturate(.92)}
.b3-person p{color:var(--grey);font-size:.95rem;line-height:1.7;font-weight:300;margin:0 0 .8rem;max-width:56ch}
.b3-person p:last-child{margin-bottom:0}
.b3-person a{color:var(--gold);text-decoration:none}
.b3-person a:hover,.b3-person a:focus-visible{text-decoration:underline}
@media(max-width:760px){.b3-person{grid-template-columns:120px minmax(0,1fr);gap:1.1rem;align-items:start}}

/* ---------- FAQ ---------- */
.b3-faq{margin-top:2rem;max-width:62rem}
.b3-faq details{border-top:1px solid var(--line)}
.b3-faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;min-height:44px;padding:1rem 2rem 1rem 0;font-size:1rem;line-height:1.45;color:var(--ink);position:relative}
.b3-faq summary::-webkit-details-marker{display:none}
.b3-faq summary::after{content:'+';position:absolute;right:0;color:var(--gold);font-size:1.2rem;line-height:1;transition:transform .3s var(--ease)}
.b3-faq details[open] summary::after{transform:rotate(45deg)}
.b3-faq summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.b3-faq p{margin:0 0 1.1rem;color:var(--grey);font-size:.95rem;line-height:1.7;font-weight:300;max-width:60ch}

/* ---------- Responsabilité éditoriale ---------- */
.b3-review{border-top:1px solid var(--line);padding-top:1.4rem;max-width:62rem}
.b3-review p{color:var(--grey);font-size:.94rem;line-height:1.7;font-weight:300;margin:0 0 .8rem}
.b3-review p:last-child{margin-bottom:0}
.b3-review a{color:var(--gold);text-decoration:none}
.b3-review a:hover,.b3-review a:focus-visible{text-decoration:underline}

/* ---------- CTA ---------- */
.b3-cta{margin:2rem 0 0;display:flex;flex-wrap:wrap;gap:1rem}
.b3-cta .btn,.b3-cta .btn-ghost{min-height:44px}

/* ---------- Mouvement réduit ---------- */
@media(prefers-reduced-motion:reduce){
  .b3-hero-more,.b3-faq summary::after,.b3-faq details[open] summary::after{transition:none;transform:none}
}