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

/* Hero : les quatre métiers, en liste informative */
.phero__aside{display:grid}
.toc li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;min-height:48px;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) */
.toc .meta{color:var(--on-night-2)}
.toc__name{font-size:var(--fs-lg);letter-spacing:-.03em;font-weight:450;transition:transform var(--d-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .toc li:hover .toc__name{transform:translateX(8px)} }
/* Principe : le texte, puis la chaîne */
.prin__text{font-size:var(--fs-h2m);font-weight:450;letter-spacing:-.045em;line-height:1.04;max-inline-size:21em}
.chain{margin-block-start:clamp(56px,7vw,120px);display:grid;gap:clamp(24px,2.6vw,36px)}
.chain__line{block-size:2px;background:var(--line)}
.chain__line i{display:block;block-size:100%;background:var(--accent);transform-origin:left center}
.anim .chain__line i{transform:scaleX(0)}
.chain ol{display:grid;gap:28px}
.chain li{display:grid;gap:10px;align-content:start}
.chain p{color:var(--ink-2);max-inline-size:17em}
@media (min-width:900px){ .chain ol{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--gutter)} }

/* Chapitres : une expertise par cadre, empilés au défilement */
.stack{padding-inline:var(--inset)}
.anchor{display:block;block-size:0}
.chap{border-radius:var(--r-frame);overflow:clip;background:var(--white);margin-block-end:var(--inset);padding:clamp(28px,3.2vw,52px) calc(var(--gutter) - var(--inset));display:grid;gap:clamp(28px,4vh,52px);transform-origin:50% 0}
.chap.night{background:var(--night)}
.chap:last-child{margin-block-end:0}
.chap__head{display:flex;flex-direction:column-reverse;gap:10px}
@media (min-width:700px){ .chap__head{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:24px} }
.chap__head sup{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;vertical-align:top;position:relative;inset-block-start:.9em;margin-inline-start:.6em;color:var(--ink-2);font-weight:400}
.night .chap__head sup{color:var(--on-night-2)}
.chap__head .meta{color:var(--ink-2);flex:none}
@media (min-width:700px){ .chap__head .meta{padding-block-start:.9em;text-align:end} }
.night .chap__head .meta{color:var(--on-night-2)}
.chap__body{display:grid;gap:32px}
.chap__text{display:grid;gap:24px;align-content:start}
.chap__text .lead{max-inline-size:29em}
.chap__media{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/10;background:var(--grey)}
.night .chap__media{background:var(--night-2)}
.chap__media img{position:absolute;inset:-9% 0;inline-size:100%;block-size:118%;height:118%;object-fit:cover;object-position:50% 0}
.facts{display:grid;gap:24px;border-block-start:1px solid var(--line);padding-block-start:clamp(20px,2.2vw,30px)}
.night .facts{border-color:var(--line-night)}
.facts dt{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2);margin-block-end:8px}
.night .facts dt{color:var(--on-night-2)}
.facts dd{max-inline-size:24em}
@media (min-width:768px){ .facts{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)} }
@media (min-width:1024px){
  .chap__body{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:var(--gutter);align-items:start}
}
@media (min-width:1024px) and (min-height:760px){
  .chap{position:sticky;inset-block-start:var(--inset);min-block-size:calc(100svh - var(--inset) * 2);align-content:space-between}
  .chap__media{aspect-ratio:auto;block-size:clamp(260px,42vh,520px)}
}

/* Offres : une grande, deux petites */
.offers__head{display:grid;gap:20px;margin-block-end:clamp(40px,5vw,80px);justify-items:start}
.offers__head .lead{max-inline-size:30em}
.offers{display:grid;gap:clamp(10px,1vw,16px)}
.offer{display:grid;gap:clamp(36px,6vh,72px);align-content:space-between;padding:clamp(24px,2.6vw,44px);border-radius:var(--r-frame);background:var(--white);color:var(--ink)}
.offer--main{background:var(--night);color:var(--on-night)}
.offer__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.offer__top .meta{color:var(--ink-2)}
.offer--main .offer__top .meta{color:var(--on-night-2)}
.offer__tag{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;text-transform:uppercase;border-radius:var(--r-pill);padding:7px 14px;background:var(--accent);color:var(--on-accent);white-space:nowrap}
.offer__body{display:grid;gap:18px;justify-items:start}
.offer h3{font-size:var(--fs-h2s);letter-spacing:-.045em;line-height:1}
.offer--main h3{font-size:var(--fs-h2m);letter-spacing:-.055em;max-inline-size:9em}
.offer p{color:var(--ink-2);max-inline-size:26em}
.offer--main .tags li{border-color:var(--line-night)}
.offer--main p{color:var(--on-night-2);font-size:var(--fs-lg);line-height:1.4}
.offer__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.offer .round svg{transition:transform var(--d-2) var(--ease-out)}
.offer--main .round{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
@media (hover:hover) and (pointer:fine){
  .offer:hover .round{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .offer--main:hover .round{background:var(--on-night);border-color:var(--on-night);color:var(--night)}
  .offer:hover .round svg{transform:translate(3px,-3px)}
}
.offer:active{scale:.995}
.offers__note{margin-block-start:clamp(20px,2vw,32px);color:var(--ink-2)}
@media (min-width:1024px){
  .offers{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .offer--main{grid-row:1 / span 2}
}

/* Engagements */
.eng{display:grid;gap:48px}
.eng__head h2{max-inline-size:9em}
.eng li{display:grid;gap:10px 24px;padding-block:clamp(22px,2.4vw,34px)}
.eng li .rule{grid-column:1/-1;margin-block-end:clamp(12px,1.4vw,20px)}
.eng p{color:var(--ink-2);max-inline-size:28em}
@media (min-width:700px){ .eng li{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:baseline} }
@media (min-width:1024px){
  .eng{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--gutter)}
  .eng__head{position:sticky;inset-block-start:120px;align-self:start}
}

/* Questions */
.faq__head{display:grid;gap:20px;margin-block-end:clamp(32px,4vw,64px);justify-items:start}
.q{border-block-start:1px solid var(--line)}
.q:last-child{border-block-end:1px solid var(--line)}
.q summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:clamp(18px,2vw,30px);cursor:pointer;list-style:none;font-size:var(--fs-h3l);font-weight:450;letter-spacing:-.04em;line-height:1.08}
.q summary::-webkit-details-marker{display:none}
.q summary svg{inline-size:clamp(20px,2vw,30px);block-size:clamp(20px,2vw,30px);flex:none;transition:rotate var(--d-2) var(--ease-out),color var(--d-1) ease}
.q[open] summary svg{rotate:45deg}
.q p{color:var(--ink-2);max-inline-size:36em;padding-block-end:clamp(22px,2.4vw,36px);font-size:var(--fs-md);line-height:1.5}
@media (hover:hover) and (pointer:fine){ .q summary:hover svg{color:var(--accent)} }
@supports (interpolate-size:allow-keywords){
  @media (prefers-reduced-motion: no-preference){
    :root{interpolate-size:allow-keywords}
    .q::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--ease-out),content-visibility .45s allow-discrete}
    .q[open]::details-content{block-size:auto}
  }
}

/* ==================================================================
   Motion des expertises, variante 2 (essai du 10 oct. 2026, à comparer avec la variante 1 par le sélecteur en bas à gauche).
   Outil de travail : une fois le choix fait, retirer le sélecteur et la variante écartée.
   Les deux cadres d'un chapitre occupent la même case de la grille ; un seul est visible, l'autre est mis en pause
   (attribut data-open="false", lu par le lanceur commun). Sans animation, seule la variante 1 existe (ses positions de repos).
   Ce bloc est placé avant « Motifs des cinq expertises » : l'accueil ne reprend que ce qui suit ce repère.
================================================================== */
.chap__body > .chap__media{grid-column:1;grid-row:2}   /* colonne nommée : sinon le second cadre ouvre une colonne à côté du premier */
@media (min-width:1024px){ .chap__body > .chap__media{grid-column:2;grid-row:1} }
.motif--b{display:none}
.anim .motif--b{display:grid}
#stack[data-variant="a"] .motif--b,#stack[data-variant="b"] .chap__media:not(.motif--b){visibility:hidden}

.vswitch{display:none}
.anim .vswitch{position:fixed;z-index:var(--z-dock);inset-inline-start:max(16px,env(safe-area-inset-left));inset-block-end:calc(84px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:var(--r-pill);background:var(--night);color:var(--on-night);box-shadow:0 10px 30px rgb(13 13 13 / .18)}
.vswitch__label{padding-inline:12px 8px;font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.02em;text-transform:uppercase;color:var(--on-night-2);white-space:nowrap}
.vswitch button{min-height:36px;padding:0 14px;border-radius:var(--r-pill);font-size:var(--fs-sm);letter-spacing:-.01em;white-space:nowrap;color:var(--on-night);transition:background-color var(--d-1) ease,color var(--d-1) ease,transform var(--d-1) var(--ease-out)}
.vswitch button[aria-pressed="true"]{background:var(--on-night);color:var(--ink)}
.vswitch button:active{transform:scale(.97)}
@media (max-width:519.98px){ .vswitch__label{display:none} }
@media (min-width:1024px){ .anim .vswitch{inset-block-end:calc(16px + env(safe-area-inset-bottom))} }

.motif--b .m-grp,.motif--b .m-col{position:absolute;inset:0;display:block}
/* 01 Stratégie et UX : du désordre au chemin. Cinq points épars, le carré les range, puis file le long du trait */
[data-motif="parcours-b"] .m-dot{inline-size:1.1em;block-size:1.1em;margin:-.55em 0 0 -.55em;border-radius:50%}
[data-motif="parcours-b"] .m-path{inline-size:15.2em;block-size:.5em;margin:-.25em 0 0 -7.6em}
[data-motif="parcours-b"] .m-sq,[data-motif="parcours-b"] .m-gh,[data-motif="parcours-b"] .m-ping{inline-size:1.9em;block-size:1.9em;margin:-.95em 0 0 -.95em}
.m-gh{background:var(--sq);opacity:0}
/* 02 Branding : du mot au sigle. Trois formes montent dans un masque, le carré signe ; puis tout se range en bloc */
[data-motif="identite-b"] .m-mask{position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:13em;block-size:3.3em;margin:-1.65em 0 0 -6.5em;display:block}
[data-motif="identite-b"] .m-o{inline-size:3em;block-size:3em;margin:-1.5em 0 0 -1.5em;border-radius:50%}
[data-motif="identite-b"] .m-b{inline-size:4.2em;block-size:3em;margin:-1.5em 0 0 -2.1em}
[data-motif="identite-b"] .m-l{inline-size:1.1em;block-size:3em;margin:-1.5em 0 0 -.55em}
[data-motif="identite-b"] .m-sq,[data-motif="identite-b"] .m-ping{inline-size:1.3em;block-size:1.3em;margin:-.65em 0 0 -.65em}
/* 03 Design d'interface : l'écran s'ouvre, se compose, on appuie, il passe au format mobile, on fait défiler, il revient */
/* la découpe de l'écran est pilotée par deux variables (haut-bas, gauche-droite, en %) : le script les anime, les coins restent arrondis */
[data-motif="interface-b"] .m-view{position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:12em;block-size:9.4em;margin:-4.7em 0 0 -6em;display:block;--it:50;--ir:0;clip-path:inset(calc(var(--it) * 1%) calc(var(--ir) * 1%) calc(var(--it) * 1%) calc(var(--ir) * 1%) round .6em)}
[data-motif="interface-b"] .m-bg{position:absolute;inset:0;display:block;background:currentColor;opacity:.12}
[data-motif="interface-b"] .m-img{inline-size:5em;block-size:5.6em;margin:-2.8em 0 0 -2.5em}
[data-motif="interface-b"] .m-t1{inline-size:4.4em;block-size:.8em;margin:-.4em 0 0 -2.2em}
[data-motif="interface-b"] .m-t2{inline-size:3em;block-size:.8em;margin:-.4em 0 0 -1.5em}
[data-motif="interface-b"] .m-img2{inline-size:4em;block-size:3em;margin:-1.5em 0 0 -2em}
[data-motif="interface-b"] .m-sq,[data-motif="interface-b"] .m-ping{inline-size:1.3em;block-size:1.3em;margin:-.65em 0 0 -.65em}
[data-motif="interface-b"] .m-cur{inline-size:.9em;block-size:.9em;margin:-.45em 0 0 -.45em;border-radius:50%;z-index:2}
/* 04 Développement Webflow : les blocs tombent et s'emboîtent, la page se soude, fait un quart de tour et part en ligne */
[data-motif="construction-b"] .m-h{inline-size:8.6em;block-size:1.6em;margin:-.8em 0 0 -4.3em}
[data-motif="construction-b"] .m-a{inline-size:2.7em;block-size:4.6em;margin:-2.3em 0 0 -1.35em}
[data-motif="construction-b"] .m-main{inline-size:5.5em;block-size:4.6em;margin:-2.3em 0 0 -2.75em}
[data-motif="construction-b"] .m-f{inline-size:6.6em;block-size:1.6em;margin:-.8em 0 0 -3.3em}
[data-motif="construction-b"] .m-sq,[data-motif="construction-b"] .m-ping{inline-size:1.6em;block-size:1.6em;margin:-.8em 0 0 -.8em}
/* 05 Optimisation SEO : la marche monte. Chaque barre s'élève sous le carré, qui saute à la suivante, de plus en plus vite */
[data-motif="classement-b"] .m-bar{inline-size:1.5em;block-size:7.2em;margin:-3.6em 0 0 -.75em}
[data-motif="classement-b"] .m-sq,[data-motif="classement-b"] .m-ping{inline-size:1.5em;block-size:1.5em;margin:-.75em 0 0 -.75em}

/* ==================================================================
   Motifs des cinq expertises (socle dans common.css, lancement dans core.js, boucles dans scroll.js).
   Chaque motif dit le métier par un geste : avancer, signer, composer, assembler, monter.
   Les règles « html:not(.anim) » donnent la position de repos, sans animation.
================================================================== */
/* 01 Stratégie et UX : un parcours. Le carré avance d'étape en étape */
[data-motif="parcours"] .m-dot,[data-motif="parcours"] .m-ping{inline-size:1.5em;block-size:1.5em;border-radius:50%;margin:.45em 0 0 -.75em}
[data-motif="parcours"] .m-dot:nth-child(1){margin-inline-start:calc(-.75em - 4.6em)}
[data-motif="parcours"] .m-dot:nth-child(3),[data-motif="parcours"] .m-ping{margin-inline-start:calc(-.75em + 4.6em)}
[data-motif="parcours"] .m-sq{inline-size:2.2em;block-size:2.2em;margin:-1.1em 0 0 -1.1em}
html:not(.anim) [data-motif="parcours"] .m-sq{translate:0 -43%}
/* 02 Branding et direction artistique : deux formes deviennent une signature (un mot et son carré), puis un sigle */
[data-motif="identite"] .m-cap,[data-motif="identite"] .m-ping{inline-size:3.4em;block-size:3.4em;margin:-1.7em 0 0 -1.7em;border-radius:50%}
[data-motif="identite"] .m-word{inline-size:5em;block-size:3.4em;margin:-1.7em 0 0 -2.5em}
[data-motif="identite"] .m-sq{inline-size:1.5em;block-size:1.5em;margin:-.75em 0 0 -.75em}
html:not(.anim) [data-motif="identite"] .m-cap:nth-child(2){translate:-112% 0}
html:not(.anim) [data-motif="identite"] .m-cap:nth-child(3){translate:35% 0}
html:not(.anim) [data-motif="identite"] .m-word{translate:-26% 0}
html:not(.anim) [data-motif="identite"] .m-sq{translate:320% 0}
/* 03 Design d'interface : les mêmes blocs se recomposent, de l'écran large à l'écran mobile */
[data-motif="interface"] .m-img{inline-size:5em;block-size:5.6em;margin:-2.8em 0 0 -2.5em}
[data-motif="interface"] .m-t1{inline-size:4.6em;block-size:1em;margin:-.5em 0 0 -2.3em}
[data-motif="interface"] .m-t2{inline-size:3.2em;block-size:1em;margin:-.5em 0 0 -1.6em}
[data-motif="interface"] .m-sq,[data-motif="interface"] .m-ping{inline-size:1.5em;block-size:1.5em;margin:-.75em 0 0 -.75em}
html:not(.anim) [data-motif="interface"] .m-img{translate:-60% 0}
html:not(.anim) [data-motif="interface"] .m-t1{translate:63% -230%}
html:not(.anim) [data-motif="interface"] .m-t2{translate:68.75% -80%}
html:not(.anim) [data-motif="interface"] .m-sq{translate:90% 137%}
/* 04 Développement Webflow : une grille se construit case après case */
[data-motif="construction"] .m-c{inline-size:1.7em;block-size:1.7em}
[data-motif="construction"] .m-c:nth-child(1){margin:calc(-.85em + -2.05em) 0 0 calc(-.85em + -2.05em)}
[data-motif="construction"] .m-c:nth-child(2){margin:calc(-.85em + -2.05em) 0 0 calc(-.85em + 0.0em)}
[data-motif="construction"] .m-c:nth-child(3){margin:calc(-.85em + -2.05em) 0 0 calc(-.85em + 2.05em)}
[data-motif="construction"] .m-c:nth-child(4){margin:calc(-.85em + 0.0em) 0 0 calc(-.85em + -2.05em)}
[data-motif="construction"] .m-c:nth-child(5){margin:calc(-.85em + 0.0em) 0 0 calc(-.85em + 0.0em)}
[data-motif="construction"] .m-c:nth-child(6){margin:calc(-.85em + 0.0em) 0 0 calc(-.85em + 2.05em)}
[data-motif="construction"] .m-c:nth-child(7){margin:calc(-.85em + 2.05em) 0 0 calc(-.85em + -2.05em)}
[data-motif="construction"] .m-c:nth-child(8){margin:calc(-.85em + 2.05em) 0 0 calc(-.85em + 0.0em)}
[data-motif="construction"] .m-c:nth-child(9){margin:calc(-.85em + 2.05em) 0 0 calc(-.85em + 2.05em)}
/* 05 Optimisation SEO : trois résultats ; le vôtre remonte jusqu'à la première place */
[data-motif="classement"] .m-row{position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:8.2em;block-size:1.4em;margin:-.7em 0 0 -4.1em;display:flex;gap:.6em}
[data-motif="classement"] .m-row:not(.m-you){opacity:.34}
.m-pt,.m-ln{display:block;background:currentColor}
.m-pt{flex:none;inline-size:1.4em}
.m-ln{inline-size:6.2em}
.m-row:nth-child(1) .m-ln{inline-size:5.2em}
.m-row:nth-child(2) .m-ln{inline-size:4.4em}
.m-you .m-pt{background:var(--sq)}
[data-motif="classement"] .m-ping{inline-size:1.4em;block-size:1.4em;margin:calc(-.7em - 2.3em) 0 0 calc(-.7em - 3.4em)}
html:not(.anim) [data-motif="classement"] .m-you{translate:0 -164%}
html:not(.anim) [data-motif="classement"] .m-row:nth-child(2){translate:0 164%}

/* Titre du hero sur deux lignes de sens (15 oct. 2026) : il prend la largeur de ses lignes, sans atteindre la liste à droite */
#titre{width:max-content;max-width:calc(100vw - 88px)}

/* Motifs en vidéo (15 oct. 2026) */
.chap__vid,.night .chap__vid{background:#191918}
.chap__vid video{position:absolute;inset:0;inline-size:100%;block-size:100%;height:100%;object-fit:cover;display:block}

/* Grand mot : déjà calé au bas du cadre par les réglages de cette page, il ne prend pas la descente commune de base.css (10 nov. 2026) */
.phero .wordmark{translate:none}

/* Mobile (12 nov. 2026, retour de Jeremy) : le grand mot « Nos expertises » était coupé ; il tient dans la largeur utile */
@media (max-width:767.98px){ .phero .wordmark{font-size:calc((100vw - 2 * var(--gutter)) / 6.25)} }
/* Visuels des expertises plus hauts sur mobile : l'interface au centre de l'image ressort davantage */
@media (max-width:767.98px){ .chap__body > .chap__media.chap__vid{aspect-ratio:1 / 1} }