/* ============================================================
   LMA Architecture — habillage « Studio »
   Deuxième version graphique : fond blanc, grotesque, titres gras,
   composition centrée. Mêmes textes, mêmes images que la version
   éditoriale ; seul le style change (`<html data-style="studio">`).
   ============================================================ */

:root[data-style="studio"]{
  --ink:#ffffff;
  --ink-2:#ffffff;
  --ink-3:#f1f1ef;
  --paper:#070d12;
  --paper-dim:#4c545c;
  --muted:#8d949b;
  --brass:#070d12;
  --line:rgba(7,13,18,.14);
  --line-2:rgba(7,13,18,.3);
  --ink-rgb:255,255,255;
  --paper-rgb:7,13,18;
  --brass-rgb:7,13,18;

  --f-display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --max:1280px;
}

/* ── ton général ───────────────────────────────────────────── */
:root[data-style="studio"] body{font-weight:400;line-height:1.8}
:root[data-style="studio"] .grain{display:none}

:root[data-style="studio"] ::selection{background:#070d12;color:#fff}

/* titres : gras, bas de casse, sans interlettrage */
:root[data-style="studio"] .sec__title,
:root[data-style="studio"] .hero__title,
:root[data-style="studio"] .statement,
:root[data-style="studio"] .card__title,
:root[data-style="studio"] .service h3,
:root[data-style="studio"] .step h3,
:root[data-style="studio"] .intro__col h3,
:root[data-style="studio"] .cta__title,
:root[data-style="studio"] .page__title{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.015em;line-height:1.2;font-style:normal;
}
:root[data-style="studio"] .sec__title{font-size:clamp(1.9rem,3.2vw,2.9rem)}
:root[data-style="studio"] .sec__title--sm{font-size:clamp(1.5rem,2.4vw,2.1rem)}
:root[data-style="studio"] .statement{font-size:clamp(1.25rem,2.1vw,1.9rem);font-weight:400;line-height:1.45;max-width:46ch}
:root[data-style="studio"] .cta__title{font-size:clamp(1.9rem,3.6vw,3.2rem)}
:root[data-style="studio"] .card__title{font-size:clamp(1.1rem,1.5vw,1.35rem)}
:root[data-style="studio"] .card__title a{border:0}

/* étiquettes de section : plus de numéros ni de capitales espacées */
:root[data-style="studio"] .tag{
  font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:0;text-transform:none;
  color:var(--paper);gap:0;margin-bottom:1.2rem;
}
:root[data-style="studio"] .tag i,
:root[data-style="studio"] .tag::after{display:none}
:root[data-style="studio"] .sec__lede{font-size:1rem;color:var(--paper-dim);max-width:60ch}

/* ── en-tête ───────────────────────────────────────────────── */
:root[data-style="studio"] .head__nav a,
:root[data-style="studio"] .head__cta{font-family:var(--f-display);font-weight:700;font-size:.95rem;letter-spacing:0;text-transform:none}
:root[data-style="studio"] .head__nav a i{display:none}
:root[data-style="studio"] .head__nav{gap:2.4rem}
:root[data-style="studio"] .head .logo--head{background:#fff}
:root[data-style="studio"] .head.is-solid{background:#fff;border-bottom:1px solid var(--line)}
:root[data-style="studio"] .head.is-solid .logo--head{background:var(--paper)}
:root[data-style="studio"] .head:not(.is-solid) .head__nav a{color:#fff}
:root[data-style="studio"] .head:not(.is-solid) .head__nav a::after{background:#fff}
:root[data-style="studio"] .head:not(.is-solid) .head__cta{color:#fff;border-color:rgba(255,255,255,.6)}
:root[data-style="studio"] .head:not(.is-solid) .head__cta::before{background:#fff}
:root[data-style="studio"] .head:not(.is-solid) .head__cta:hover{color:#070d12}
:root[data-style="studio"] .burger i{background:#fff}
:root[data-style="studio"] .head.is-solid .burger i{background:var(--paper)}

/* ── boutons & filtres : angles droits ─────────────────────── */
:root[data-style="studio"] .btn,
:root[data-style="studio"] .chip{
  border-radius:0;font-family:var(--f-display);font-weight:700;letter-spacing:0;text-transform:none;font-size:.9rem;
}
:root[data-style="studio"] .btn{padding:1em 1.8em}
:root[data-style="studio"] .btn--xl{font-size:1rem;padding:1.15em 2.2em}
:root[data-style="studio"] .chip{padding:.6em 1.1em;font-size:.85rem}

/* ── héros : image pleine page, bloc centré ────────────────── */
:root[data-style="studio"] .hero{min-height:88svh;align-items:center}
:root[data-style="studio"] .hero__veil{
  background:linear-gradient(180deg,rgba(7,13,18,.58) 0%,rgba(7,13,18,.34) 42%,rgba(7,13,18,.62) 100%);
}
:root[data-style="studio"] .hero__body{text-align:center;padding-bottom:0;max-width:940px;color:#fff}
:root[data-style="studio"] .hero__kicker{justify-content:center;color:rgba(255,255,255,.82);text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:400}
:root[data-style="studio"] .hero__kicker i{display:none}
:root[data-style="studio"] .hero__title{font-size:clamp(2.4rem,6vw,5.2rem);color:#fff;font-weight:700}
:root[data-style="studio"] .hero__title .line{display:inline-block}
:root[data-style="studio"] .hero__title em{color:#fff}
:root[data-style="studio"] .hero__lede{
  font-family:var(--f-display);font-weight:400;color:rgba(255,255,255,.92);
  font-size:clamp(1rem,1.3vw,1.18rem);margin-inline:auto;max-width:66ch;
}
:root[data-style="studio"] .hero__note{color:rgba(255,255,255,.75);margin-inline:auto;max-width:50ch}
:root[data-style="studio"] .hero__actions{justify-content:center}
:root[data-style="studio"] .hero__actions .btn{color:#fff;border-color:rgba(255,255,255,.65)}
:root[data-style="studio"] .hero__actions .btn:hover{color:#070d12}
:root[data-style="studio"] .hero__actions .btn--fill{background:#fff;color:#070d12;border-color:#fff}
:root[data-style="studio"] .hero__actions .btn--fill::before{background:#070d12}
:root[data-style="studio"] .hero__actions .btn--fill:hover{color:#fff}
:root[data-style="studio"] .hero__caption,
:root[data-style="studio"] .hero__index,
:root[data-style="studio"] .hero__scroll{color:rgba(255,255,255,.8)}
:root[data-style="studio"] .hero__caption i{color:#fff}

/* ── bandeau défilant : filet discret ──────────────────────── */
:root[data-style="studio"] .ticker{border-block:1px solid var(--line);background:#fff}
:root[data-style="studio"] .ticker__row span{
  font-family:var(--f-display);font-weight:400;text-transform:none;letter-spacing:0;
  font-size:clamp(1.05rem,1.6vw,1.45rem);padding-block:1.5rem;color:var(--paper-dim);
}

/* ── grille projets : légendes sobres ──────────────────────── */
:root[data-style="studio"] .card__media{margin-bottom:.9rem}
:root[data-style="studio"] .card__media::after{opacity:0}
:root[data-style="studio"] .card__meta{
  font-family:var(--f-display);font-weight:400;font-size:.9rem;letter-spacing:0;text-transform:none;
  color:var(--paper-dim);border:0;padding:0;margin-bottom:.15rem;
}
:root[data-style="studio"] .card__num{display:none}
:root[data-style="studio"] .card__cat{margin-left:0;text-align:left}
:root[data-style="studio"] .card__go{
  font-family:var(--f-display);font-weight:700;font-size:.9rem;letter-spacing:0;text-transform:none;
  opacity:1;transform:none;color:var(--paper);
}

/* ── sections de contenu ───────────────────────────────────── */
:root[data-style="studio"] .intro__col h3,
:root[data-style="studio"] .service h3,
:root[data-style="studio"] .step h3{font-size:1.15rem}
:root[data-style="studio"] .service__n,
:root[data-style="studio"] .step__n{font-family:var(--f-display);font-weight:700;color:var(--muted);letter-spacing:0}
:root[data-style="studio"] .service ul li,
:root[data-style="studio"] .tools__list li{font-family:var(--f-display);text-transform:none;letter-spacing:0;font-size:.92rem}
:root[data-style="studio"] .tools__lab,
:root[data-style="studio"] .about__nom,
:root[data-style="studio"] .facts dt,
:root[data-style="studio"] .form__intro,
:root[data-style="studio"] .cta__reassure li{font-family:var(--f-display);letter-spacing:0;text-transform:none}
:root[data-style="studio"] .facts dt{font-size:.85rem;color:var(--muted)}
:root[data-style="studio"] .facts dd{font-family:var(--f-display);font-weight:700;font-size:1rem}
:root[data-style="studio"] .about__nom{font-size:.95rem;font-weight:700}

/* ── appel à l'action & pied ───────────────────────────────── */
:root[data-style="studio"] .cta{background:#f1f1ef;border-top:1px solid var(--line)}
:root[data-style="studio"] .cta__bg{display:none}
:root[data-style="studio"] .tag--light{color:var(--paper)}
:root[data-style="studio"] .foot{background:#fff;border-top:1px solid var(--line)}
:root[data-style="studio"] .foot__nav a,
:root[data-style="studio"] .foot__contact a,
:root[data-style="studio"] .foot__contact span,
:root[data-style="studio"] .foot__bar{font-family:var(--f-display);letter-spacing:0;text-transform:none;font-size:.92rem}

/* ── préchargement & visionneuse ───────────────────────────── */
:root[data-style="studio"] .loader{background:#fff}
:root[data-style="studio"] .loader__name{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;color:var(--paper)}
:root[data-style="studio"] .loader__name span:nth-child(2),
:root[data-style="studio"] .loader__name span:nth-child(3){color:var(--paper);font-style:normal}
:root[data-style="studio"] .viewer{background:rgba(255,255,255,.98)}

/* ── sélecteur de version ──────────────────────────────────── */
.styleswitch{
  position:fixed;left:1rem;bottom:1rem;z-index:8000;display:flex;align-items:center;gap:.4rem;
  padding:.35rem .4rem;border-radius:999px;background:rgba(7,13,18,.86);backdrop-filter:blur(10px);
  font-family:"Jost","Inter",sans-serif;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
}
.styleswitch b{color:rgba(255,255,255,.55);font-weight:400;padding-left:.6rem}
.styleswitch button{
  color:rgba(255,255,255,.62);padding:.45em .9em;border-radius:999px;line-height:1;
  letter-spacing:.14em;text-transform:uppercase;font-size:.62rem;transition:color .3s,background .3s;
}
.styleswitch button:hover{color:#fff}
.styleswitch button.is-on{background:#fff;color:#070d12}
@media (max-width:860px){
  .styleswitch{left:.6rem;bottom:.6rem;font-size:.56rem}
  .styleswitch b{display:none}
}

/* ── parcours plus compact ─────────────────────────────────── */
:root[data-style="studio"] .hero{min-height:86svh}
@media (max-width:860px){
  :root[data-style="studio"] .hero{min-height:100svh}
  :root[data-style="studio"] .ticker__row span{padding-block:1.25rem}
}
:root[data-style="studio"] .intro,
:root[data-style="studio"] .skills,
:root[data-style="studio"] .method,
:root[data-style="studio"] .about{padding-block:clamp(3.2rem,7vh,5.4rem)}
:root[data-style="studio"] .projects{padding-block:clamp(2.6rem,5vh,4rem) clamp(3.2rem,7vh,5.4rem)}
:root[data-style="studio"] .cta{padding-block:clamp(3.4rem,8vh,6rem)}
:root[data-style="studio"] .sec__head{margin-bottom:clamp(1.8rem,3.4vw,3rem)}
:root[data-style="studio"] .intro__grid{margin-top:clamp(2rem,4vw,3.4rem);gap:clamp(1.6rem,3vw,3rem)}
:root[data-style="studio"] .grid{gap:clamp(1.8rem,3vw,3.2rem) var(--gap)}
:root[data-style="studio"] .services{gap:clamp(1.6rem,2.8vw,2.6rem)}
:root[data-style="studio"] .foot{padding-top:clamp(2.2rem,5vw,3.4rem)}
:root[data-style="studio"] .statement{max-width:52ch}

/* ── mobile : filtres sur une ligne, faisable au doigt ─────── */
@media (max-width:860px){
  :root[data-style="studio"] .filters{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
    margin-bottom:1.6rem;
  }
  :root[data-style="studio"] .filters::-webkit-scrollbar{display:none}
  :root[data-style="studio"] .chip{flex:0 0 auto}
}

/* ── survol d une carte : le curseur reste un cercle fin ───── */
/* (le grand disque blanc inversait la photo en négatif) */
:root[data-style="studio"] .cursor.is-view .cursor__ring{
  width:58px;height:58px;background:transparent;border-color:rgba(255,255,255,.75);  /* pas d inversion */
}
:root[data-style="studio"] .cursor.is-view .cursor__label{opacity:0}
:root[data-style="studio"] .cursor.is-view .cursor__dot{opacity:1}

/* ── légende du héros : 18 projets, les tirets de progression
      devenaient si larges qu ils chevauchaient « Défiler » ── */
:root[data-style="studio"] .hero__dots{display:none}
:root[data-style="studio"] .hero__caption{max-width:46vw;justify-content:flex-end;text-align:right}