/* ============================================================
   FocusLab — apropos.css · règles propres à la page À propos
   Chargé après focuslab.css, scopé sous body.apropos.
   Le contenu vient du tableau de bord (fiche « a-propos », moteur de
   blocs) : cette feuille ne fait que le mettre en page.
   Parti pris : une lettre. Une colonne de lecture centrée (720 px),
   des images à leur juste taille, pas de marge marginalia, pas de
   plein écran. La fiche projet, elle, est un dossier (bandeau large,
   marge de repères) : les deux pages ne se ressemblent pas.
   ============================================================ */

/* ── Échelle commune ── */
body.apropos .nav-r a.l{font-size:.7rem;white-space:nowrap}
body.apropos .theme-btn{font-size:.62rem;white-space:nowrap}
body.apropos .nav-cta{font-size:.64rem;white-space:nowrap;padding:10px 16px}
body.apropos #construction-bar .cb-close{white-space:nowrap;font-size:.56rem}
body.apropos .proj-loading{padding:240px 40px 160px}
/* Pas de révélation au scroll ici : tout le récit est visible d'emblée (lecture, impression, captures) */
body.apropos .r,body.apropos .proj-hero .r{opacity:1!important;transform:none!important;transition:none!important}

/* ── HERO : celui du socle (photo plein cadre, voile, titre posé dessus). On ne touche qu'à la typo. ── */
body.apropos .proj-hero-inner{max-width:1180px;margin:0 auto;width:100%}
body.apropos .proj-meta{font-size:.7rem;letter-spacing:.26em;gap:10px 22px;margin-bottom:26px}
body.apropos .proj-meta .ym{color:var(--o-text);border:0;padding:0}
body.apropos .proj-meta .tag,body.apropos .proj-meta .pill{border:0;padding:0;color:var(--muted)}
body.apropos .proj-hero h1{font-weight:400;font-style:italic;letter-spacing:-.03em;line-height:1;font-size:clamp(2.6rem,6vw,5.2rem);margin-bottom:0;max-width:14ch}
body.apropos .proj-hero h1 em{font-style:normal;color:var(--o-text)}
body.apropos .proj-lede{margin-top:26px;max-width:42ch;font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.6;text-wrap:pretty}

/* ── CORPS : une colonne de lecture centrée ── */
body.apropos .proj-body{padding:clamp(64px,8vw,104px) 0 0;max-width:1180px;margin:0 auto}
body.apropos .block{padding:0 40px;margin-bottom:0}
body.apropos .b-narrow{max-width:800px;margin-left:auto;margin-right:auto}
body.apropos .b-wide{max-width:1180px;margin-left:auto;margin-right:auto}

/* Titre de chapitre : sous-titre orange, court trait, titre en italique */
body.apropos .b-heading{margin-top:clamp(64px,8vw,104px);margin-bottom:clamp(24px,3vw,36px)}
body.apropos .b-heading:first-child{margin-top:0}
body.apropos .b-heading .sub{display:block;margin:0 0 16px;font-size:.7rem;letter-spacing:.26em;color:var(--o-text);white-space:normal;line-height:1.7}
body.apropos .b-heading .sub::after{display:none}
body.apropos .b-heading h2:empty{display:none}
body.apropos .b-heading h2{font-weight:400;font-style:italic;letter-spacing:-.025em;line-height:1.08;font-size:clamp(1.9rem,3.6vw,3rem);max-width:22ch;margin:0}
body.apropos .b-heading h2 em{font-style:normal;color:var(--o-text)}

/* Paragraphes : mesure de lettre, lettrine sur le premier */
body.apropos .b-paragraph{margin-bottom:clamp(32px,4vw,48px)}
body.apropos .b-paragraph p{font-size:clamp(1.05rem,1.3vw,1.18rem);line-height:1.8;max-width:62ch;text-wrap:pretty;color:var(--text)}
body.apropos .b-paragraph p + p{margin-top:1.2em}
body.apropos .b-paragraph p strong{color:var(--title);font-weight:500}
body.apropos .proj-body > .b-paragraph:first-child p:first-child::first-letter,body.apropos .proj-body > .b-heading:first-child + .b-paragraph p:first-child::first-letter{font-family:var(--display);font-weight:500;font-size:3.2em;line-height:.82;float:left;padding:.06em .14em 0 0;color:var(--o-text)}

/* Colonnes texte / image : deux colonnes égales, image 4:3, texte à taille de lecture */
body.apropos .b-columns{max-width:1100px;margin:clamp(32px,4vw,48px) auto clamp(56px,7vw,88px)}
body.apropos .b-columns .col-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(32px,5vw,64px);align-items:center}
body.apropos .b-columns .col img{width:100%;height:auto;background:var(--surface)}
body.apropos .b-columns .col .col-txt p{font-size:clamp(1rem,1.2vw,1.1rem);line-height:1.75;max-width:48ch;text-wrap:pretty;color:var(--text)}
body.apropos .b-columns .col .col-txt p + p{margin-top:1.1em}
body.apropos .b-columns .col figcaption{font-size:.62rem;letter-spacing:.2em;margin-top:12px}
body.apropos .b-columns .col h3{font-weight:400;font-style:italic;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;letter-spacing:-.02em}
body.apropos .b-columns .col blockquote{font-weight:500;font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.3;letter-spacing:-.02em;padding:0;border:0}

/* Citations : en romain, attribution orange */
body.apropos .b-quote{margin:clamp(40px,5vw,64px) auto clamp(48px,6vw,72px)}
body.apropos .b-quote blockquote{font-weight:500;font-style:normal;font-size:clamp(1.4rem,2.4vw,2.1rem);line-height:1.25;letter-spacing:-.02em;padding:0;border:0;max-width:28ch;text-wrap:balance}
body.apropos .b-quote blockquote em{font-style:italic;color:var(--o-text)}
body.apropos .b-quote .who{padding-left:0;margin-top:20px;font-size:.66rem;letter-spacing:.22em;color:var(--o-text)}
body.apropos .b-quote .who::before{display:none}

/* Image légendée : proportion native, aucun recadrage imposé */
body.apropos .b-image,body.apropos .b-image-caption{margin:clamp(32px,4vw,48px) auto clamp(56px,7vw,88px)}
body.apropos .b-image img,body.apropos .b-image-caption img{width:100%;height:auto;background:var(--surface)}
body.apropos .b-image figcaption,body.apropos .b-image-caption figcaption{font-size:.62rem;letter-spacing:.2em;margin-top:14px}

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

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

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

/* ── PIED : une grande phrase et le bouton ── */
body.apropos .proj-foot{background:transparent;border-top:1px solid var(--line);padding:0;margin-top:clamp(64px,8vw,104px)}
body.apropos .foot-cta-wrap{max-width:1180px;margin:0 auto;padding:clamp(64px,8vw,104px) 40px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(40px,6vw,96px);align-items:end}
body.apropos .foot-cta-wrap::before{content:'Envie de travailler ensemble ?';font-family:var(--display);font-weight:400;font-style:italic;letter-spacing:-.03em;line-height:1;font-size:clamp(2.2rem,5vw,4.4rem);color:var(--title);max-width:14ch;text-wrap:balance}
body.apropos .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-text);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s,border-color .25s;font-size:0}
body.apropos .foot-cta::after{content:'Parlons-en';font-size:.72rem}
body.apropos .foot-cta:hover{background:var(--title);border-color:var(--title);color:var(--bg)}

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

/* ── Tablette (820px) ── */
@media(max-width:820px){
  body.apropos .b-columns .col-grid{grid-template-columns:minmax(0,1fr)!important;gap:24px}
  body.apropos .b-columns .col-image,body.apropos .b-columns .col-gif{order:-1}
  body.apropos .b-columns .col .col-txt p{max-width:62ch}
  body.apropos .foot-cta-wrap{grid-template-columns:minmax(0,1fr);align-items:start}
}

/* ── Mobile (760px) ── */
@media(max-width:760px){
  body.apropos .proj-hero h1{font-size:clamp(2.2rem,10vw,3.2rem)}
  body.apropos .block{padding:0 20px}
  body.apropos .b-heading h2{font-size:clamp(1.7rem,7.5vw,2.3rem)}
  body.apropos .b-quote blockquote{font-size:1.35rem}
  body.apropos .b-credits li{grid-template-columns:minmax(0,1fr);gap:4px}
  body.apropos .foot-cta-wrap{padding:64px 20px}
  body.apropos .foot-cta-wrap::before{font-size:clamp(2rem,9vw,3rem)}
  body.apropos .foot-cta{width:100%;text-align:center}
  body.apropos .nav-cta{font-size:.58rem;padding:9px 12px}
  body.apropos .nav-r{gap:10px}
  body.apropos .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.apropos .nav{padding:12px 20px}
  body.apropos .nav-r{gap:8px}
  body.apropos .theme-btn{font-size:.56rem;padding:8px 10px}
  body.apropos .nav-cta{font-size:.56rem;letter-spacing:.12em;padding:9px 12px}
  body.apropos .wrap{padding:0 20px}
}