/* Le Studio : styles de la page « studio ».
   Fichier chargé dans l'ordre fixé par src/layouts/Base.astro : base.css, styles de la page, megamenu.css, ambiance.css. */
/* ==================================================================
   Page Studio (v4)
================================================================== */

/* Hero : le mot géant et la liste des personnes partagent la dernière rangée */
.phero__foot{display:grid;gap:28px;align-items:end}
.phero .wordmark{font-size:clamp(4rem,35vw,26rem);margin-block-end:-.07em;padding-inline-end:.06em}
@media (max-width:767.98px){ .phero .wordmark{font-size:33.2vw} }   /* marges mobiles élargies (recette du 26 oct.) : le mot tient sans être rogné */
.duo li{display:grid;row-gap:4px;align-content:center;min-height:56px;padding-block:12px;border-block-start:1px solid var(--line-night)}
/* filet final retiré : « le filet sépare, il ne ferme pas » (règle validée par Jeremy, 12 nov. 2026) */
.duo__name{font-size:var(--fs-xl);font-weight:450;letter-spacing:-.035em;line-height:1.1;transition:transform var(--d-2) var(--ease-out)}
.duo .meta{color:var(--on-night-2);transition:transform var(--d-2) var(--ease-out)}
@media (min-width:1024px){
  .phero__foot{grid-template-columns:auto minmax(0,1fr);column-gap:calc(var(--gutter) * 2)}
  .phero .wordmark{font-size:clamp(4rem,min(25vw,40svh),30rem)}
  .duo{justify-self:end;inline-size:min(100%,30rem);padding-block-end:clamp(20px,3.2vw,56px)}
}
@media (hover:hover) and (pointer:fine){
  .duo li:hover .duo__name,.duo li:hover .meta{transform:translateX(8px)}
}

/* Portraits : la photo remplit le cadre (4/5). Elle est plus haute que lui : le cadrage garde le visage, dans le tiers haut. */
.portrait{position:relative;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;background:var(--grey)}
.portrait--dark{background:var(--night)}
.portrait__photo{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 22%}

/* Les associés : le portrait suit la personne lue au centre de l'écran */
.team{display:grid;gap:48px}
.team__aside{display:none}
.person{display:grid;gap:clamp(24px,2.6vw,36px);padding-block-end:clamp(72px,9vw,150px);scroll-margin-top:24px}
.person:last-child{padding-block-end:0}
.person__media .portrait{max-inline-size:min(100%,17rem)}
.person__head{display:grid;gap:12px}
.person__name{font-size:clamp(2.5rem,6vw,6.25rem);letter-spacing:-.055em;line-height:.95}
.person__head .meta{color:var(--ink-2)}
.person .lead{max-inline-size:30em}
.person__facts{display:grid;gap:24px}
.person__facts dt{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2);margin-block-end:10px}
.person__facts dd{max-inline-size:24em}
/* 29 oct. (Jeremy) : le trait était posé au bas d'une boîte de 44 px, loin du texte. Il suit maintenant le texte (4 px dessous) ;
   la zone de clic garde 44 px grâce au pseudo-élément, sans changer la place du lien. */
.person__link{position:relative;justify-self:start;display:inline-flex;align-items:center;gap:10px;padding-block-end:4px;font-weight:450;line-height:1.3;border-block-end:1px solid currentColor}
.person__link::before{content:"";position:absolute;inset:-10px -4px -9px}
/* Le bloc de chaque associé est allongé pour suivre la photo (static.js) : le lien ne doit pas s'étirer avec sa rangée, sinon le trait s'éloigne du texte */
.person__link{align-self:start}
.person__link svg{inline-size:16px;block-size:16px;transition:transform var(--d-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .person__link:hover svg{transform:translate(3px,-3px)} }
@media (min-width:700px){ .person__facts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter)} }
@media (min-width:1024px){
  .team{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--gutter)}
  .js .team__aside{display:grid;gap:16px;position:sticky;inset-block-start:clamp(96px,14vh,140px);align-self:start;justify-items:start}
  .js .person__media{display:none}
  .team__stage{display:grid;inline-size:min(100%,calc((100svh - 240px) * .8))}
  .team__stage .portrait{grid-area:1 / 1;clip-path:inset(100% 0 0 0);transition:clip-path 1s var(--ease-out)}
  .team__stage .portrait.is-on{clip-path:inset(0 0 0 0)}
  /* la photo arrive un peu plus grande et se pose pendant que le cadre se dévoile */
  .team__stage .portrait__photo{scale:1.08;transition:scale 1.4s var(--ease-out)}
  .team__stage .portrait.is-on .portrait__photo{scale:1}
  .team__who{block-size:1.3em;overflow:hidden;line-height:1.3}
  .team__strip{display:block;transition:transform .7s var(--ease-out)}
  .team__strip span{display:block;block-size:1.3em}
}
@media (prefers-reduced-motion: reduce){
  .team__stage .portrait{clip-path:none;opacity:0;transition:opacity var(--d-1) ease}
  .team__stage .portrait.is-on{clip-path:none;opacity:1}
  .team__stage .portrait__photo{scale:none;transition:none}
  .team__strip{transition:none}
}

/* Différence : comparaison en tableau */
.diff{padding:clamp(72px,9vw,150px) calc(var(--gutter) - var(--inset));display:grid;gap:clamp(48px,6vw,96px)}
.diff__head{display:grid;gap:24px;justify-items:start}
.diff__head h2{max-inline-size:10em}
.cmp{inline-size:100%;border-collapse:collapse;text-align:start}
.cmp thead th{font-family:var(--mono);font-size:var(--fs-xs);font-weight:400;letter-spacing:.02em;text-transform:uppercase;color:var(--on-night-2);text-align:start;padding:0 var(--gutter) 20px 0;vertical-align:bottom}
.cmp thead th.cmp__us{color:var(--on-night)}
.cmp thead th.cmp__us::before{content:"";display:inline-block;inline-size:8px;block-size:8px;background:var(--accent);margin-inline-end:10px;vertical-align:.1em}
.cmp tbody tr{border-block-start:1px solid var(--line-night)}
.cmp tbody tr:last-child{border-block-end:1px solid var(--line-night)}
.cmp tbody th{font-size:var(--fs-xl);font-weight:450;letter-spacing:-.035em;line-height:1.1;text-align:start}
.cmp tbody th,.cmp tbody td{padding:clamp(24px,2.6vw,38px) var(--gutter) clamp(24px,2.6vw,38px) 0;vertical-align:top}
/* 12 nov. 2026 (demande de Sacha validée par Jeremy) : Le Studio ressort, agence et indépendant passent en retrait.
   Retrait = blanc à 52 % sur le fond noir, contraste mesuré au-dessus de 4,5:1 ; Le Studio sur un fond légèrement éclairci. */
.cmp{--cmp-retrait:rgb(242 242 239 / .52);--cmp-us-bg:rgb(242 242 239 / .055)}
.cmp td{color:var(--cmp-retrait)}
.cmp td.cmp__us{color:var(--on-night);font-size:var(--fs-lg);line-height:1.35;letter-spacing:-.015em}
@media (min-width:900px){
  .cmp tbody th{inline-size:28%}
  .cmp td{inline-size:22%}
  .cmp td.cmp__us{inline-size:28%}
  .cmp td:last-child,.cmp th:last-child{padding-inline-end:0}
  /* colonne Le Studio en carte : fond éclairci, coins arrondis en haut et en bas (filets portés par les cellules) */
  .cmp{border-collapse:separate;border-spacing:0}
  .cmp tbody th,.cmp tbody td{border-block-start:1px solid var(--line-night)}
  .cmp tbody tr:last-child > *{border-block-end:1px solid var(--line-night)}
  .cmp thead th:not(.cmp__us){color:var(--cmp-retrait)}
  .cmp .cmp__us{background:var(--cmp-us-bg);padding-inline:clamp(22px,2vw,32px)!important}
  .cmp thead th.cmp__us{padding-block-start:22px;border-start-start-radius:var(--r-md);border-start-end-radius:var(--r-md)}
  .cmp tbody tr:last-child td.cmp__us{border-end-start-radius:var(--r-md);border-end-end-radius:var(--r-md)}
}
@media (max-width:899.98px){
  .cmp thead{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
  .cmp tbody,.cmp tr,.cmp th,.cmp td{display:block}
  .cmp tbody tr{display:grid;gap:14px;padding-block:clamp(30px,8vw,36px)}   /* plus aéré (retour de Jeremy, 12 nov. 2026) */
  .cmp tbody th,.cmp tbody td{padding:0}
  .cmp tbody th{order:-2;margin-block-end:10px}   /* plus d'air entre la question et les réponses */
  .cmp td{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:16px}
  .cmp td::before{content:attr(data-col);font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;text-transform:uppercase;color:var(--on-night-2);padding-block-start:.3em}
  .cmp td.cmp__us{order:-1;font-size:1.125rem;grid-template-columns:calc(8.5rem - 16px) minmax(0,1fr);padding:14px 16px;margin-block-end:6px;border-radius:var(--r-sm);background:var(--cmp-us-bg)}
  /* étiquette « Le Studio » : carré orange centré sur le texte, comme le logo */
  .cmp td.cmp__us::before{color:var(--on-night);padding-inline-start:18px;background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 calc(.3em + .5lh - 4px) / 8px 8px}
  .cmp td:not(.cmp__us)::before{color:var(--cmp-retrait)}
}

/* ---------- Outils (12 nov. 2026, variante retenue par Jeremy) ----------
   Deux rangées de cartes blanches arrondies (fond --white comme les cartes de témoignage, rayon --r-md), logo encre au-dessus du nom,
   qui défilent lentement en sens inverse, sans pause au survol ; sans animation si l'utilisateur la refuse (défilement à la main). */
.outils-b{padding-block-start:0;display:grid;gap:12px;overflow:hidden}
.outils-b__titre{font-size:var(--fs-h2s);max-inline-size:16em;margin-block-end:clamp(28px,3.4vw,52px)}
.outils-b__rang{overflow:hidden}
.outils-b__piste{display:flex;gap:12px;inline-size:max-content;animation:outils-defile 70s linear infinite}
.outils-b__rang--inverse .outils-b__piste{animation-direction:reverse;animation-duration:80s}
.outils-b__piste li{display:grid;place-items:center;align-content:center;gap:14px;inline-size:clamp(150px,15vw,232px);block-size:clamp(124px,11vw,168px);border-radius:var(--r-md);background:var(--white);color:var(--ink)}
.outils-b__piste svg{inline-size:clamp(30px,2.6vw,40px);block-size:clamp(30px,2.6vw,40px);fill:currentColor}
.outils-b__sigle{display:grid;place-items:center;block-size:clamp(30px,2.6vw,40px);font-size:clamp(1.25rem,1.7vw,1.625rem);font-weight:600;letter-spacing:-.04em}
.outils-b__piste li > span{font-size:var(--fs-sm);color:var(--ink-2);letter-spacing:-.01em}
.outils-b__piste li:is(.outils-b__mot,:has(.outils-b__sigle)) > span{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}   /* logotype : le nom est déjà dessiné */
.outils-b__mot svg{inline-size:clamp(84px,7vw,112px);block-size:clamp(84px,7vw,112px)}
@keyframes outils-defile{to{transform:translateX(calc(-50% - 6px))}}
@media (prefers-reduced-motion:reduce){
  .outils-b__piste{animation:none}
  .outils-b__rang{overflow-x:auto;padding-inline:var(--gutter)}
}