/* ============================================================
   FocusLab — apropos.css · règles propres à la page À propos
   Chargé après focuslab.css, scopé sous body.projet.
   Le contenu vient du tableau de bord (fiche « a-propos », moteur de
   blocs) : cette feuille ne fait que le mettre en page, dans la même
   grammaire que l'accueil et les services : label à gauche, texte à
   droite, filets, une image forte par temps du récit.
   ============================================================ */

/* ── Échelle commune ── */
body.projet .nav-r a.l{font-size:.7rem;white-space:nowrap}
body.projet .theme-btn{font-size:.62rem;white-space:nowrap}
body.projet .nav-cta{font-size:.64rem;white-space:nowrap;padding:10px 16px}
body.projet #construction-bar .cb-close{white-space:nowrap;font-size:.56rem}
body.projet .proj-loading{padding:240px 40px 160px}
body.projet .proj-hero .r{opacity:1;transform:none}

/* ── HERO : celui du socle (photo plein cadre, voile, titre posé dessus). On ne touche qu'à la typo. ── */
body.projet .proj-hero-inner{max-width:1180px;margin:0 auto;width:100%}
body.projet .proj-meta{font-size:.7rem;letter-spacing:.26em;gap:10px 22px;margin-bottom:26px}
body.projet .proj-meta .ym{color:var(--o);border:0;padding:0}
body.projet .proj-meta .tag,body.projet .proj-meta .pill{border:0;padding:0;color:var(--muted)}
body.projet .proj-meta .pill{color:var(--title)}
body.projet .proj-hero h1{font-weight:500;letter-spacing:-.035em;line-height:.96;font-size:clamp(2.8rem,7vw,6rem);margin-bottom:0;max-width:16ch}
body.projet .proj-hero h1 em{font-style:italic;color:var(--o)}
body.projet .proj-lede{margin-top:28px;max-width:44ch;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.6;text-wrap:pretty}

/* ── CORPS : colonne de récit calée à droite, labels dans la marge gauche ── */
body.projet .proj-body{padding:clamp(72px,9vw,120px) 0 0;max-width:1180px;margin:0 auto}
body.projet .block{padding:0 40px;margin-bottom:0}
body.projet .b-narrow{max-width:1180px;--gut:calc(clamp(150px,18vw,220px) + clamp(32px,5vw,72px));padding-left:calc(40px + var(--gut))}
body.projet .b-narrow > *{max-width:760px}

/* Titre de section : filet pleine largeur, sous-titre dans la marge, titre à droite */
body.projet .b-heading{position:relative;margin-top:clamp(72px,9vw,120px);padding-top:clamp(28px,3vw,40px);margin-bottom:clamp(28px,3.5vw,44px)}
body.projet .b-heading::before{content:'';position:absolute;left:40px;right:40px;top:0;height:1px;background:var(--line)}
body.projet .b-heading:first-child{margin-top:0}
body.projet .b-heading:first-child::before{display:none}
body.projet .b-heading .sub{position:static;display:block;margin:0 0 16px;max-width:60ch;font-size:.7rem;letter-spacing:.26em;white-space:normal;line-height:1.8}
body.projet .b-heading .sub::after{display:none}
body.projet .b-heading h2:empty{display:none}
body.projet .b-heading h2{font-weight:500;letter-spacing:-.03em;line-height:1.02;font-size:clamp(2.1rem,4.4vw,3.8rem);max-width:18ch;margin:0}
body.projet .b-heading h2 em{font-style:italic;color:var(--o)}

/* Paragraphes : mesure confortable, interligne calme */
body.projet .b-paragraph{margin-bottom:clamp(40px,5vw,64px)}
body.projet .b-paragraph p{font-size:clamp(1.02rem,1.3vw,1.15rem);line-height:1.75;max-width:60ch;text-wrap:pretty}
body.projet .b-paragraph p + p{margin-top:1.2em}
body.projet .b-paragraph p strong{color:var(--title);font-weight:500}

/* Colonnes : pleine largeur, image franche, texte en regard */
body.projet .b-columns{margin:clamp(24px,3vw,40px) auto clamp(56px,7vw,96px)}
body.projet .b-columns .col-grid{gap:clamp(32px,5vw,72px)}
body.projet .b-columns[data-ratio="1-1"] .col-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
body.projet .b-columns .col-image:first-child + .col-text,body.projet .b-columns .col-text:first-child{align-self:center}
body.projet .b-columns .col img{width:100%;height:auto;background:var(--surface)}
body.projet .b-columns .col .col-txt p{font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.75;max-width:52ch;text-wrap:pretty}
body.projet .b-columns .col figcaption{font-size:.62rem;letter-spacing:.2em;margin-top:12px}

/* Citations : grandes, sans barre, dans la colonne de récit */
body.projet .b-quote{margin:clamp(40px,5vw,64px) auto clamp(56px,7vw,96px)}
body.projet .b-quote blockquote{font-weight:400;font-style:italic;font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.25;letter-spacing:-.02em;padding:0;border:0;max-width:26ch;text-wrap:balance}
body.projet .b-quote .who{padding-left:0;margin-top:22px;font-size:.66rem;letter-spacing:.22em}
body.projet .b-quote .who::before{width:32px;background:var(--o)}

/* Image légendée : bandeau large, légende discrète */
body.projet .b-image,body.projet .b-image-caption{margin:clamp(24px,3vw,40px) auto clamp(56px,7vw,96px)}
body.projet .b-image img,body.projet .b-image-caption img{width:100%;height:auto;background:var(--surface)}
body.projet .b-image figcaption,body.projet .b-image-caption figcaption{font-size:.62rem;letter-spacing:.2em;margin-top:14px}

/* Galerie défilante : plus de bordures ni de zoom, juste les images */
body.projet .b-gallery-2,body.projet .b-gallery-3{margin:clamp(40px,5vw,64px) auto clamp(56px,7vw,96px)}
body.projet .b-gallery figure{border:0;background:var(--surface)}
body.projet .b-gallery figure:hover img{transform:none}

/* Crédits : filets, rôle à gauche, nom à droite */
body.projet .b-credits{margin:clamp(40px,5vw,64px) auto 0}
body.projet .b-credits .c-h{font-size:.7rem;letter-spacing:.26em;margin-bottom:8px}
body.projet .b-credits .c-h::after{display:none}
body.projet .b-credits ul{grid-template-columns:minmax(0,1fr);gap:0}
body.projet .b-credits li{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
body.projet .b-credits .role{font-size:.66rem;letter-spacing:.2em}
body.projet .b-credits .name{font-weight:500;font-size:1.15rem;letter-spacing:-.01em}

/* Bouton / lien, espaceurs, HTML libre : alignés sur la colonne de récit */
body.projet .b-cta{text-align:left;padding-top:0;padding-bottom:0;margin:clamp(24px,3vw,40px) auto clamp(56px,7vw,96px)}
body.projet .b-cta a{padding:16px 30px;font-size:.72rem}
body.projet .b-cta a:hover{background:var(--title);border-color:var(--title);color:var(--bg)}
body.projet .b-video-embed,body.projet .b-video-local,body.projet .b-gif,body.projet .b-audio,body.projet .b-html{margin-bottom:clamp(56px,7vw,96px)}

/* ── PIED : retour, précédent / suivant en filets, puis la grande phrase ── */
body.projet .proj-foot{background:transparent;border-top:1px solid var(--line);padding:0;margin-top:clamp(72px,9vw,120px)}
body.projet .proj-foot-back{max-width:1180px;margin:0 auto;padding:clamp(36px,4vw,56px) 40px 0;text-align:left}
body.projet .proj-foot-back a{font-size:.7rem;letter-spacing:.24em;gap:10px}
body.projet .proj-foot-nav{max-width:1180px;margin:clamp(28px,3vw,40px) auto 0;padding:0 40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,40px)}
body.projet .pfn{border:0;border-top:1px solid var(--line);background:transparent;padding:22px 0 0;text-align:left;transition:none}
body.projet .pfn.next{text-align:right}
body.projet .pfn:hover{background:transparent;border-color:var(--o)}
body.projet .pfn .lbl{font-size:.66rem;letter-spacing:.22em;color:var(--muted);white-space:nowrap}
body.projet .pfn .ttl{font-weight:500;font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:-.02em;line-height:1.2;margin-top:10px;text-wrap:balance}
body.projet .pfn:hover .ttl{color:var(--o)}
body.projet .pfn.disabled{opacity:.4}
body.projet .foot-cta-wrap{max-width:1180px;margin:0 auto;padding:clamp(72px,9vw,120px) 40px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(40px,6vw,96px);align-items:end}
body.projet .foot-cta-wrap::before{content:'Un projet similaire ?';font-family:var(--display);font-weight:500;letter-spacing:-.035em;line-height:.98;font-size:clamp(2.4rem,6vw,5.4rem);color:var(--title);max-width:12ch;text-wrap:balance}
body.projet .foot-cta{justify-self:start;font-family:var(--label);font-weight:600;display:inline-block;padding:16px 30px;border:1px solid var(--o);color:var(--o);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s,border-color .25s;font-size:0}
body.projet .foot-cta::after{content:'Parlons-en';font-size:.72rem}
body.projet .foot-cta:hover{background:var(--title);border-color:var(--title);color:var(--bg)}

/* ── FOOTER ── */
body.projet .foot{padding:clamp(56px,7vw,88px) 0 44px}
body.projet .foot-tag{font-size:1.35rem;color:var(--title)}
body.projet .foot-leg{font-size:.62rem;white-space:nowrap;flex-shrink:0}

/* ── Portrait / tablette (1100px) : marge gauche repliée ── */
@media(max-width:1100px){
  body.projet .b-narrow{padding-left:40px}
  body.projet .b-narrow > *{max-width:none}
}
@media(max-width:960px){
  body.projet .b-columns[data-ratio="1-1"] .col-grid{grid-template-columns:minmax(0,1fr)}
  body.projet .b-columns .col-image{order:-1}
}

/* ── Tablette étroite (820px) : hero en une colonne ── */
@media(max-width:820px){
  body.projet .foot-cta-wrap{grid-template-columns:minmax(0,1fr);align-items:start}
}

/* ── Mobile (760px) ── */
@media(max-width:760px){
  body.projet .proj-hero h1{font-size:clamp(2.4rem,11vw,3.4rem)}
  body.projet .proj-foot-back,body.projet .proj-foot-nav{padding-left:20px;padding-right:20px}
  body.projet .proj-foot-nav{grid-template-columns:minmax(0,1fr);gap:0}
  body.projet .pfn.next{text-align:left}
  body.projet .proj-hero h1{font-size:clamp(2.4rem,11vw,3.4rem)}
  body.projet .block{padding:0 20px}
  body.projet .b-narrow{padding-left:20px}
  body.projet .b-heading::before{left:20px;right:20px}
  body.projet .b-heading h2{font-size:clamp(1.9rem,8.5vw,2.6rem)}
  body.projet .b-quote blockquote{font-size:1.45rem}
  body.projet .b-credits li{grid-template-columns:minmax(0,1fr);gap:4px}
  body.projet .foot-cta-wrap{padding:64px 20px}
  body.projet .foot-cta-wrap::before{font-size:clamp(2.2rem,10vw,3.2rem)}
  body.projet .foot-cta{width:100%;text-align:center}
  body.projet .nav-cta{font-size:.58rem;padding:9px 12px}
  body.projet .nav-r{gap:10px}
  body.projet .foot-tag{font-size:1.15rem}
}

/* Smartphone étroit (≈395 px) : nav compacte, même réglage que les pages légales */
@media(max-width:480px){
  body.projet .nav{padding:12px 20px}
  body.projet .nav-r{gap:8px}
  body.projet .theme-btn{font-size:.56rem;padding:8px 10px}
  body.projet .nav-cta{font-size:.56rem;letter-spacing:.12em;padding:9px 12px}
  body.projet .wrap{padding:0 20px}
}