/* ============================================================
   FocusLab — home.css · règles propres à la page d'accueil
   Chargé après focuslab.css, scopé sous body.home.
   Aucune couleur en dur, aucune police nouvelle, aucun coin viseur.
   ============================================================ */

/* ── Échelle typographique : labels lisibles, titres qui portent ── */
body.home .lbl{font-size:.7rem;letter-spacing:.26em;white-space:nowrap}
body.home .h2{font-size:clamp(2.1rem,4.4vw,3.8rem);font-weight:500;letter-spacing:-.03em;line-height:1.02;max-width:18ch;text-wrap:balance}
body.home .lead{font-size:clamp(1.02rem,1.35vw,1.18rem);line-height:1.65;max-width:52ch;text-wrap:pretty}
body.home .nav-r a.l{font-size:.7rem;white-space:nowrap}
body.home .theme-btn{font-size:.62rem;white-space:nowrap}
body.home .nav-cta{font-size:.64rem;white-space:nowrap;padding:10px 16px}
body.home .btn{font-size:.72rem;padding:16px 30px;white-space:nowrap}
body.home .ghost{font-size:.72rem;white-space:nowrap}
body.home #construction-bar .cb-close{white-space:nowrap;font-size:.56rem}

/* ── Rythme des sections : filets fins au lieu d'aplats alternés ── */
body.home .sec{padding:clamp(88px,11vw,150px) 0;border-top:1px solid var(--line)}
body.home #manifeste{border-top:0}
body.home .sec.alt{background:transparent}
body.home #projets.sec.alt{background:var(--bg2)}
body.home .sec-head{display:grid;grid-template-columns:minmax(160px,220px) minmax(0,1fr);gap:14px 48px;align-items:start;margin-bottom:clamp(48px,6vw,84px)}
body.home .sec-head .lbl{grid-column:1;grid-row:1;padding-top:.7em}
body.home .sec-head .h2{grid-column:2;grid-row:1}
body.home .sec-head .lead{grid-column:2;grid-row:2;margin-top:6px}

/* ── HERO : l'image mène, le texte s'ancre en bas ── */
body.home .hero{justify-content:flex-end;padding-top:220px;padding-bottom:clamp(40px,6vh,72px)}
body.home.has-banner .hero{padding-top:258px}
body.home.has-disclaimer .hero{padding-top:253px}
body.home.has-banner.has-disclaimer .hero{padding-top:290px}
body.home .hero-top .wrap{flex-wrap:wrap;row-gap:12px;justify-content:flex-start}
body.home .hero-top .lbl{white-space:nowrap;margin-right:auto}
body.home .hero-top .wrap > *:last-child{flex-shrink:0}
body.home .hero::after{display:none}
body.home .hero-reel{background:#0a0908}
body.home .hero-scrim{background:linear-gradient(0deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 78%,transparent) 34%,color-mix(in srgb,var(--bg) 22%,transparent) 70%,color-mix(in srgb,var(--bg) 8%,transparent) 100%),linear-gradient(180deg,color-mix(in srgb,var(--bg) 82%,transparent) 0%,color-mix(in srgb,var(--bg) 55%,transparent) 160px,transparent 320px)}
body.home .hero-top .lbl{padding:8px 0}
body.home .hero-caption{font-size:.66rem;white-space:nowrap;color:var(--text)}
body.home .hero-caption::before{display:none}
body.home .hero-play{margin-left:0;background:color-mix(in srgb,var(--bg) 62%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-color:color-mix(in srgb,var(--title) 55%,transparent);color:var(--title);font-size:.66rem;padding:11px 18px;white-space:nowrap}
body.home .hero-play:hover{background:var(--title);border-color:var(--title);color:var(--bg)}
body.home .hero-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:clamp(32px,5vw,72px);align-items:end}
body.home .hero-id{grid-column:1/-1;grid-row:1;margin-bottom:clamp(28px,4vh,48px)}
/* Écart au contrat, validé le 02/09/2026 : lockup ramené à 320px et tagline masquée,
   le H1 redevient l'unique grande phrase du hero. Le slot reste vide et en place,
   l'intro y atterrit ; .hero-tag reste dans le DOM et hydratée par le tableau de bord. */
body.home .hero-logo-slot{width:min(320px,60vw)}
body.home .hero-tag{display:none}
body.home .hero-top .lbl{color:var(--text)}
body.home .hero-top .lbl .dot{background:var(--o)}
body.home .hero-tag{margin-top:12px;font-size:.9rem;font-weight:500;color:var(--title);letter-spacing:.01em}
body.home .hero-h1{grid-column:1;grid-row:2/4;font-size:clamp(2.8rem,7.2vw,6.6rem);font-weight:500;letter-spacing:-.035em;line-height:.96;max-width:13ch;text-wrap:balance}
body.home .hero-sub{grid-column:2;grid-row:2;margin:0 0 6px;max-width:38ch;font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.6;text-wrap:pretty}
body.home .cta-row{grid-column:2;grid-row:3;margin-top:22px}
body.home .proof{grid-column:1/-1;grid-row:4;margin-top:clamp(36px,5vh,56px);padding-top:22px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);display:flex;flex-direction:column;align-items:flex-start;gap:16px}
body.home .proof-l{font-size:.7rem;letter-spacing:.12em;line-height:1.9;max-width:none}
body.home .proof-l b{font-weight:600;color:var(--title)}
body.home .assure{margin:0;gap:12px 28px}
body.home .assure span{border:0;background:none;padding:0;font-size:.84rem;color:var(--muted);gap:10px;white-space:nowrap}
body.home .sec-head .lbl .dot,body.home .contact .lbl .dot{display:none}
body.home .assure span::before{width:14px;height:1px;border:0;background:var(--muted)}

/* ── MANIFESTE : titre à gauche, citation en respiration à droite ── */
body.home .mani{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:start}
body.home .mani .sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:22px}
body.home .mani .h2{max-width:16ch}
body.home .mani-quote{font-size:clamp(1.5rem,2.4vw,2.15rem);line-height:1.3;padding-top:.4em;border-top:1px solid var(--line);margin-top:.35em}
body.home .mani-quote cite{font-size:.68rem;margin-top:22px}

/* ── POUR QUI : quatre lignes éditoriales, plus de cartes ── */
body.home .grid2{gap:0 clamp(28px,4vw,56px)}
body.home .grid2 .card{background:transparent;border-top:1px solid var(--line);padding:30px 0 42px;overflow:visible}
body.home .grid2 .card:hover{transform:none}
body.home .grid2 .card .frame{margin-bottom:24px}
body.home .card-b{padding:0}
body.home .card-tag{border:0;background:none;padding:0;font-size:.68rem;letter-spacing:.22em;color:var(--muted);white-space:nowrap}
body.home .grid2 .card-h{font-size:clamp(1.45rem,2.1vw,1.9rem);font-weight:500;letter-spacing:-.02em;margin:14px 0 12px;max-width:16ch}
body.home .card-t{font-size:.98rem;line-height:1.65;max-width:40ch;text-wrap:pretty}

/* ── SERVICES : trois colonnes, numéros en grand ── */
body.home .serv{gap:0 clamp(28px,4vw,48px)}
body.home .tier{background:transparent;border:0;border-top:1px solid var(--line);padding:26px 0 0}
body.home .tier::before{content:'';position:absolute;top:-1px;left:0;width:44px;height:1px;background:var(--o)}
body.home .tier:hover{transform:none}
body.home .tier .cor{display:none}
body.home .tier-n{font-family:var(--display);font-weight:400;font-size:2.6rem;letter-spacing:-.03em;line-height:1;color:var(--muted2)}
body.home .tier-h{font-size:clamp(1.4rem,1.9vw,1.7rem);font-weight:500;letter-spacing:-.02em;margin:20px 0 6px}
body.home .tier-sub{font-size:.66rem;letter-spacing:.18em;margin-bottom:16px;white-space:nowrap}
body.home .tier-t{font-size:.98rem;line-height:1.65;text-wrap:pretty}
body.home #services .wrap > .lead{margin-top:clamp(40px,5vw,64px)!important;max-width:60ch}

/* ── RÉALISATIONS : un projet en très grand, deux en écho ── */
body.home .grid3{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-rows:auto auto auto;gap:18px clamp(20px,3vw,32px);align-items:start}
body.home .grid3 .card{background:transparent;display:flex;flex-direction:column}
body.home .grid3 .card:hover{transform:none}
body.home .grid3 > .card:first-child{grid-column:1;grid-row:1/4;align-self:stretch;display:grid;grid-template-rows:subgrid;row-gap:0}
body.home .grid3 > .card:first-child .frame{grid-row:1/3;aspect-ratio:auto;min-height:0;height:100%}
body.home .grid3 > .card:first-child .card-b{grid-row:3;padding-top:0}
body.home .grid3 > .card:nth-child(2){grid-column:2;grid-row:1}
body.home .grid3 > .card:nth-child(3){grid-column:2;grid-row:2/4;display:grid;grid-template-rows:subgrid;row-gap:0}
body.home .grid3 > .card:nth-child(3) .frame{grid-row:1}
body.home .grid3 > .card:nth-child(3) .card-b{grid-row:2;padding-top:0}
body.home .grid3 > .card:not(:first-child) .frame{aspect-ratio:16/9}
body.home .grid3 .frame{background:var(--surface)}
body.home .grid3 .frame .ph{font-size:.66rem}
body.home .grid3 .card-b{padding:18px 0 0}
body.home .grid3 > .card:nth-child(2) .card-b{padding-bottom:clamp(14px,2vw,26px)}
body.home .grid3 .card-h{font-size:clamp(1.3rem,1.8vw,1.6rem);font-weight:500;letter-spacing:-.02em;margin:10px 0 8px}
body.home .grid3 > .card:first-child .card-h{font-size:clamp(1.6rem,2.6vw,2.4rem);max-width:18ch}
body.home .grid3 .card-t{font-size:.94rem;max-width:44ch}
body.home #projets .wrap > div[style]{margin-top:clamp(40px,5vw,64px)!important}

/* ── PARTENAIRES : bande sobre, même respiration que le reste ── */
body.home .prt-band{padding:clamp(64px,8vw,110px) 0;border-bottom:0}
body.home .prt-band .sec-head{margin-bottom:clamp(36px,4vw,56px)}
body.home .prt-quote{margin-top:clamp(40px,5vw,64px)}
body.home .prt-quote-who{font-size:.66rem}

/* ── VALEURS : mosaïque sans aplats, filets seuls ── */
body.home .vals{background:transparent;border:0;border-top:1px solid var(--line);gap:0 clamp(28px,4vw,48px)}
body.home .val,body.home .val.alt2{background:transparent;padding:30px 0 38px;border-bottom:1px solid var(--line)}
body.home .vals .val:hover,body.home .vals .val:last-child:hover{background:transparent}
body.home .val-star{font-size:.64rem;letter-spacing:.2em;white-space:nowrap}
body.home .val-h{font-size:clamp(1.35rem,1.8vw,1.6rem);font-weight:500;letter-spacing:-.02em;margin-bottom:10px}
body.home .val-t{font-size:.96rem;line-height:1.65;text-wrap:pretty}
body.home .val-t .o{color:var(--o);font-weight:600}

/* ── À PROPOS : portrait franc, texte en regard ── */
body.home .about{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,88px);align-items:end}
body.home .about .pf{background:var(--surface);max-width:520px}
body.home .about .sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:10px}
body.home .about-t{font-size:clamp(1.02rem,1.35vw,1.18rem);line-height:1.7;max-width:50ch;text-wrap:pretty}

/* ── PROCESS : quatre temps numérotés en grand ── */
body.home .steps{gap:0 clamp(24px,3vw,40px)}
body.home .step{border-top:1px solid var(--line);padding-top:24px}
body.home .step::before{width:44px;height:1px;top:-1px}
body.home .step-n{font-size:clamp(2.4rem,3.4vw,3.2rem);color:var(--muted2);letter-spacing:-.03em}
body.home .step-h{font-family:var(--display);font-weight:500;font-size:clamp(1.2rem,1.6vw,1.45rem);letter-spacing:-.02em;text-transform:none;margin:18px 0 8px}
body.home .step-t{font-size:.96rem;line-height:1.65;text-wrap:pretty}

/* ── CONTACT : plus de boîte, une grande phrase et le bouton ── */
body.home .contact{overflow:visible;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 clamp(40px,6vw,96px);align-items:end;text-align:left;border:0;background:transparent;padding:0}
body.home .contact .lbl{grid-column:1/-1;grid-row:1;justify-content:flex-start;margin-bottom:22px}
body.home .contact .h2{grid-column:1;grid-row:2/4;margin:0;font-size:clamp(2.6rem,6.6vw,5.8rem);max-width:12ch;line-height:.98}
body.home .contact .lead{grid-column:2;grid-row:2;margin:0 0 30px;max-width:34ch}
body.home .contact .btn{grid-column:2;grid-row:3;justify-self:start}

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

/* ── Tablette (820px) : les grilles à deux colonnes s'empilent ── */
@media(max-width:820px){
  body.home .sec-head{grid-template-columns:minmax(0,1fr)}
  body.home .sec-head .lbl,body.home .sec-head .h2,body.home .sec-head .lead{grid-column:1;grid-row:auto}
  body.home .sec-head .lbl{padding-top:0}
  body.home .hero-in{grid-template-columns:minmax(0,1fr)}
  body.home .hero-id,body.home .hero-h1,body.home .hero-sub,body.home .cta-row,body.home .proof{grid-column:1;grid-row:auto}
  body.home .hero-sub{margin-top:22px}
  body.home .proof{flex-direction:column;align-items:flex-start}
  body.home .vals{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.home .grid3{grid-template-columns:minmax(0,1fr)}
  body.home .grid3 > .card:first-child,body.home .grid3 > .card:nth-child(2),body.home .grid3 > .card:nth-child(3){grid-column:auto;grid-row:auto;align-self:auto;display:flex}
  body.home .grid3 > .card:first-child .frame{flex:none;aspect-ratio:16/10;height:auto}
  body.home .grid3 > .card:first-child .card-b,body.home .grid3 > .card:nth-child(3) .card-b{padding-top:18px}
  body.home .about{align-items:start}
  body.home .about .pf{max-width:360px}
  body.home .contact{grid-template-columns:minmax(0,1fr)}
  body.home .contact .lbl,body.home .contact .h2,body.home .contact .lead,body.home .contact .btn{grid-column:1;grid-row:auto}
  body.home .contact .lead{margin:22px 0 28px}
}

/* ── Mobile (760px) : flux vertical, tailles resserrées ── */
@media(max-width:760px){
  body.home .hero{justify-content:flex-start;padding-top:104px;padding-bottom:56px}
  body.home.has-banner .hero{padding-top:142px}
  body.home.has-disclaimer .hero{padding-top:137px}
  body.home.has-banner.has-disclaimer .hero{padding-top:174px}
  body.home .hero-top .wrap{flex-wrap:wrap}
  body.home .hero-top .lbl{white-space:normal}
  body.home .hero-id{margin-bottom:26px}
  body.home .hero-logo-slot{width:min(240px,64vw)}
  body.home .hero-h1{font-size:clamp(2.4rem,11vw,3.4rem)}
  body.home .assure{flex-direction:column;gap:10px}
  body.home .assure span{white-space:normal}
  body.home .nav-cta{font-size:.58rem;padding:9px 12px}
  body.home .nav-r{gap:10px}
  body.home .grid2{gap:0}
  body.home .grid2 .card{padding:26px 0 32px}
  body.home .val,body.home .val.alt2{padding:24px 0 28px}
  body.home .contact .h2{font-size:clamp(2.2rem,10vw,3.2rem)}
  body.home .foot-tag{font-size:1.15rem}
}

/* ── Portrait étroit (600px) : une colonne partout ── */
@media(max-width:600px){
  body.home .vals{grid-template-columns:minmax(0,1fr)}
  body.home .hero-top .lbl{white-space:normal}
  body.home .lbl{white-space:normal}
  body.home .sec-head .h2{font-size:clamp(1.9rem,8.5vw,2.6rem)}
  body.home .grid2 .card-h,body.home .val-h,body.home .tier-h{font-size:1.35rem}
  body.home .grid3 > .card:first-child .card-h{font-size:1.55rem}
  body.home .mani-quote{font-size:1.35rem}
  body.home .about .pf{max-width:none}
  body.home .btn{width:100%;text-align:center}
  body.home .cta-row{width:100%;flex-direction:column;align-items:flex-start;gap:18px}
}