/* Le Studio : styles de la page « etude ».
   Fichier chargé dans l'ordre fixé par src/layouts/Base.astro : base.css, styles de la page, megamenu.css, ambiance.css. */
/* ==================================================================
   Gabarit d'étude de cas (v4). Une seule feuille pour toutes les études.
================================================================== */
h4{margin:0;font-weight:450}

/* Hero : le nom du client en géant à gauche, la fiche à droite. --n est le nombre de lettres du nom : la taille s'y adapte */
.phero__copy{max-inline-size:64rem}
.phero__foot{display:grid;gap:28px;align-items:end}
.phero .wordmark{font-size:clamp(3rem,calc(165vw / var(--n)),16rem);line-height:.9;padding-block:0 .16em;margin-block-end:-.1em;padding-inline-end:.07em}   /* .07em : le crochet du « y » de Solday dépassait de .05em */
.fiche > div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:16px;align-items:baseline;min-height:46px;padding-block:11px;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) */
.fiche dt{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;text-transform:uppercase;color:var(--on-night-2)}
.fiche dd{font-weight:450;letter-spacing:-.015em}
@media (min-width:1024px){
  .phero__foot{grid-template-columns:auto minmax(0,1fr);column-gap:calc(var(--gutter) * 2)}
  .phero .wordmark{font-size:clamp(3rem,min(calc(104vw / var(--n)),34svh),26rem)}
  .fiche{justify-self:end;inline-size:min(100%,32rem)}
}

/* Couverture */
.cover{position:relative;aspect-ratio:4/3;background:var(--grey)}
.cover img{position:absolute;inset:-9% 0;inline-size:100%;block-size:118%;height:118%;object-fit:cover;object-position:50% 0}
@media (min-width:768px){ .cover{aspect-ratio:16/8} }

/* Contexte et rôle */
.ctx{display:grid;gap:48px}
.ctx__side{display:grid;gap:28px;align-content:start}
.ctx__side dt{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2);margin-block-end:12px}
@media (min-width:1024px){ .ctx{grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:var(--gutter)} .ctx__side{padding-block-start:1.2vw} }

/* Enjeux et réponses : chaque problème du client en face de ce que nous avons fait */
.stakes{padding:clamp(72px,9vw,150px) calc(var(--gutter) - var(--inset));display:grid;gap:clamp(48px,6vw,96px)}
.stakes__head{display:grid;gap:24px;justify-items:start}
.stakes__list > li{display:grid;gap:18px 24px;padding-block:clamp(24px,2.8vw,40px)}
.stakes__list .rule{grid-column:1/-1;margin-block-end:clamp(8px,1vw,16px)}
.stakes__list > li.stakes__end{padding:0;display:block}
.stakes__end .rule{margin:0}
.stakes__n,.stakes__k{color:var(--on-night-2)}
.stakes__k{display:block;margin-block-end:12px}
.stakes__q{color:var(--on-night-2);font-size:var(--fs-lg);line-height:1.4;letter-spacing:-.015em;max-inline-size:22em}
.stakes__a{font-size:var(--fs-h3);font-weight:450;letter-spacing:-.035em;line-height:1.15;max-inline-size:20em}
@media (min-width:900px){ .stakes__list > li{grid-template-columns:3.5rem minmax(0,5fr) minmax(0,6fr);align-items:start} }

/* Approche : le sommaire reste collé à gauche et suit l'étape lue */
.acts{display:grid;gap:48px}
.acts__aside{display:grid;gap:clamp(24px,3vw,40px);align-content:start}
.acts__aside h2{font-size:var(--fs-h2s);max-inline-size:8em}
.acts__index{display:none}
.act{display:grid;gap:clamp(24px,2.6vw,36px);padding-block-end:clamp(64px,8vw,130px);scroll-margin-top:24px}
.act:last-child{padding-block-end:0}
.act__head{display:grid;gap:14px}
.act__k{display:flex;gap:14px;align-items:baseline;color:var(--ink-2)}
.act__title{font-size:var(--fs-h2m);letter-spacing:-.05em;line-height:1}
.act .lead{max-inline-size:32em}
.act__media{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/9;background:var(--grey)}
.act__media img{position:absolute;inset:-9% 0;inline-size:100%;block-size:118%;height:118%;object-fit:cover;object-position:50% 0}
@media (min-width:1024px){
  .acts{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--gutter)}
  .acts__aside{position:sticky;inset-block-start:clamp(96px,14vh,140px);align-self:start}
  .js .acts__index{display:grid}
  .acts__index li{display:flex;align-items:baseline;gap:14px;padding-block:11px;border-block-start:1px solid var(--line);color:var(--ink-2);transition:color var(--d-1) ease}
  /* filet final retiré : « le filet sépare, il ne ferme pas » (règle validée par Jeremy, 12 nov. 2026) */
  .acts__index li span:last-child{transition:transform var(--d-2) var(--ease-out)}
  .acts__index li.is-on{color:var(--ink)}
  .acts__index li.is-on span:last-child{transform:translateX(8px);font-weight:600}   /* actif en semi-gras noir, comme les sommaires des articles et des ressources (12 nov. 2026) */
}
@media (prefers-reduced-motion: reduce){ .acts__index li span:last-child{transition:none} }

/* Schéma : deux cartes reliées par une flèche */
.flow{margin:0;display:grid;gap:14px}
.flow ol{display:grid;gap:10px}
.flow__card{background:var(--white);border-radius:var(--r-md);padding:clamp(20px,2.4vw,36px);display:grid;gap:14px;align-content:start}
.flow__card .meta{color:var(--ink-2)}
.flow__card h4{font-size:var(--fs-h3);letter-spacing:-.04em;line-height:1.05}
.flow__card ul li{padding-block:10px;border-block-start:1px solid var(--line);color:var(--ink-2)}
.flow__link{display:flex;flex-direction:column;align-items:center}
.flow__link i{display:block;inline-size:1px;block-size:20px;background:var(--ink);transform-origin:left top}
.flow__link .round{inline-size:44px;block-size:44px;background:var(--ink);color:var(--bg);border-color:var(--ink)}
.flow__link .round svg{inline-size:16px;block-size:16px;rotate:90deg}
.flow figcaption{color:var(--ink-2)}
.anim .flow__link i{transform:scale(0)}
.anim .flow__link .round{opacity:0}
@media (min-width:700px){
  .flow ol{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch}
  .flow__link{flex-direction:row}
  .flow__link i{inline-size:clamp(16px,2.6vw,40px);block-size:1px}
  .flow__link .round svg{rotate:none}
}

/* Résultats */
.res{padding:clamp(72px,9vw,150px) calc(var(--gutter) - var(--inset));display:grid;gap:clamp(48px,6vw,96px)}
.res__head{display:grid;gap:24px;justify-items:start}
.res__head h2{max-inline-size:11em}
.res__kpis{display:grid;gap:40px}
.res__kpis dt{font-size:clamp(5rem,13.5vw,14.5rem);font-weight:450;letter-spacing:-.07em;line-height:.85;display:flex;align-items:flex-start;white-space:nowrap}
.res__kpis dt small{font-size:.36em;letter-spacing:-.04em;line-height:1;padding-block-start:.24em;margin-inline-end:.06em;color:var(--accent)}
.res__kpis dt .odo{block-size:.85em}
.res__kpis dt .odo__col span{block-size:.85em;line-height:.85}
.res__kpis dd{color:var(--on-night-2);margin-block-start:18px;max-inline-size:17em}
.res__proof{display:grid;gap:clamp(18px,2vw,28px)}
.res__bars{display:grid;gap:14px}
.res__bars p{display:grid;grid-template-columns:8.5rem minmax(0,1fr) 4.5rem;align-items:center;gap:16px;min-height:44px;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) */
.res__bars .meta,.res__unit{color:var(--on-night-2)}
.res__bars .num{text-align:end;font-weight:450;letter-spacing:-.02em}
.res__bars i{display:block;block-size:10px;border-radius:var(--r-pill);background:var(--on-night-2);transform-origin:left center;transform:scaleX(var(--w))}
.res__bars i.is-accent{background:var(--accent)}
.anim .res__bars i{transform:scaleX(0)}
.res__note{max-inline-size:24em}
@media (max-width:519.98px){ .res__bars p{grid-template-columns:minmax(0,1fr) auto;padding-block:10px} .res__bars i{grid-column:1 / -1;grid-row:2} }
@media (min-width:768px){ .res__kpis{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter)} .res__kpis--3{grid-template-columns:repeat(3,minmax(0,1fr))} .res__kpis--3 dt{font-size:clamp(4rem,6.6vw,8rem)} }   /* --3 : trois chiffres sur une rangée (Néo Viager) */
@media (min-width:1024px){
  .res__proof{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--gutter);align-items:end}
  .res__proof > *{grid-column:1}
  .res__note{grid-column:2;grid-row:1 / span 2;justify-self:end}
}

/* Suite : deux autres projets */
.suite__title{margin-block-end:clamp(40px,4.6vw,66px)}
.end{display:grid;gap:clamp(10px,1vw,16px)}
.next{display:grid;gap:clamp(18px,2vw,28px);align-content:space-between;background:var(--white);border-radius:var(--r-frame);padding:clamp(24px,2.6vw,44px)}
.next__top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.next__top .meta,.next__meta .meta{color:var(--ink-2)}
.next__media{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:var(--grey)}
.next__media img{position:absolute;inset:0;inline-size:100%;block-size:100%;height:100%;object-fit:cover;object-position:50% 0;transition:scale var(--d-3) var(--ease-out)}
.next__grey{filter:grayscale(1) sepia(.1) contrast(.94) brightness(1.03);clip-path:inset(0 0 0 0);transition:clip-path var(--d-3) var(--ease-out),scale var(--d-3) var(--ease-out)}
.next:focus-visible .next__grey{clip-path:inset(0 0 100% 0)}
.next__meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.next__meta h3{font-size:var(--fs-h2s);letter-spacing:-.045em;line-height:1}
.next .round svg{transition:transform var(--d-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .next:hover .next__grey{clip-path:inset(0 0 100% 0)}
  .next:hover .next__media img{scale:1.04}
  .next:hover .round{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .next:hover .round svg{transform:translate(3px,-3px)}
}
@media (prefers-reduced-motion: reduce){
  .next__grey{transition:opacity var(--d-1) ease}
  .next:hover .next__grey,.next:focus-visible .next__grey{clip-path:none;opacity:0}
  .next__media img{transition:none}
}
@media (min-width:768px){ .end{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ==================================================================
   Visuels : blocs empilés sous chaque étape
================================================================== */
.vis{margin:0;display:grid;gap:12px}
.vis + .vis,.flow + .vis{margin-block-start:clamp(4px,.6vw,10px)}
.vis figcaption{color:var(--ink-2)}
.vis__panel{position:relative;border-radius:var(--r-md);overflow:hidden}
.vis--tint{background:var(--tint,var(--grey))}
.vis--grey{background:var(--grey)}
.vis--white{background:var(--white)}
.vis--night{background:var(--night);color:var(--on-night)}

/* Fenêtre de navigateur et téléphone */
.screen{border-radius:var(--r-sm);overflow:hidden;background:#fff;box-shadow:0 26px 60px -22px rgb(13 13 13 / .3),0 0 0 1px rgb(13 13 13 / .06)}   /* une seule ombre, douce, pour toutes les fenêtres */
.screen__bar{display:flex;align-items:center;gap:6px;block-size:clamp(18px,2vw,28px);padding-inline:clamp(8px,1vw,14px);background:var(--white);border-block-end:1px solid var(--line)}
.screen__bar i{display:block;inline-size:7px;block-size:7px;border-radius:50%;background:rgb(13 13 13 / .16)}
.screen img{display:block;inline-size:100%;height:auto}
.phone{border-radius:clamp(18px,2.2vw,30px);border:clamp(4px,.5vw,7px) solid var(--ink);overflow:hidden;background:#fff;aspect-ratio:9/18.5;box-shadow:0 34px 60px -34px rgb(13 13 13 / .5)}
.phone img{display:block;inline-size:100%;block-size:100%;height:100%;object-fit:cover;object-position:0 0}

/* Un grand écran, cadré par le bas */
.vis--screen{padding:clamp(20px,5vw,72px) clamp(20px,5vw,72px) 0}
.vis--screen .screen{border-end-start-radius:0;border-end-end-radius:0}
.vis--target{padding:clamp(20px,5vw,72px) clamp(20px,5vw,72px) 0;display:grid;grid-template-columns:minmax(0,1fr);align-items:end}
.vis--target .screen{border-end-start-radius:0;border-end-end-radius:0;inline-size:min(100%,46rem)}
.vis--target .phone--back{position:absolute;inset-inline-end:clamp(20px,5vw,72px);inset-block-end:-8%;inline-size:clamp(84px,17%,170px);opacity:.38;border-color:rgb(13 13 13 / .55)}
.vis__duo{display:grid;gap:clamp(10px,1vw,16px)}
.vis__duo .vis--screen{padding:clamp(18px,3vw,44px) clamp(18px,3vw,44px) 0;display:grid;align-items:end;aspect-ratio:4/3.4}
/* Deux fenêtres côte à côte : même haut, même hauteur, la page est coupée par le bas (13 oct. 2026 : elles n'étaient pas alignées) */
.vis__duo .vis--screen{align-items:stretch}
.vis__duo .screen{block-size:100%;display:flex;flex-direction:column}
.vis__duo .screen__bar{flex:none}
.vis__duo .screen img{flex:1;min-block-size:0;height:auto;object-fit:cover;object-position:50% 0}
@media (min-width:700px){ .vis__duo{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Trois mobiles */
.vis--phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2.4vw,36px);padding:clamp(24px,5vw,72px) clamp(18px,6vw,96px) 0;align-items:start}
.vis--phones .phone:nth-child(2){margin-block-start:clamp(18px,4vw,60px)}
.vis--phones .phone{margin-block-end:-18%}

/* Wireframes dessinés en CSS */
.vis--wf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.6vw,24px);padding:clamp(18px,3.4vw,52px)}
.wf__item{display:grid;grid-template-rows:1fr auto;gap:10px;min-inline-size:0}
.wf__item .meta{color:var(--ink-2)}
.wf{background:var(--white);border-radius:var(--r-sm);padding:clamp(10px,1.6vw,22px);display:grid;gap:clamp(6px,.8vw,10px);align-content:start;min-inline-size:0;min-block-size:clamp(120px,17vw,250px);box-shadow:0 0 0 1px rgb(13 13 13 / .06)}
.wf i{display:block;border-radius:var(--r-xs);background:var(--grey)}
.wf__t{block-size:clamp(8px,1.1vw,14px);inline-size:62%;background:rgb(13 13 13 / .7) !important;margin-block-end:4px}
.wf__l{block-size:clamp(4px,.5vw,7px);inline-size:88%}
.wf__l + .wf__l{inline-size:54%}
.wf__f{block-size:clamp(16px,2.2vw,30px);background:none !important;box-shadow:inset 0 0 0 1px rgb(13 13 13 / .22);border-radius:var(--r-sm) !important}
.wf__b{block-size:clamp(16px,2.2vw,30px);inline-size:58%;background:var(--ink) !important;border-radius:var(--r-pill) !important;margin-block-start:4px}
.wf__n{block-size:clamp(28px,4.4vw,60px);inline-size:46%;background:rgb(13 13 13 / .7) !important}
.wf__c{block-size:clamp(26px,4vw,56px)}

/* Palette */
.palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1vw,16px)}
.palette li{display:grid;gap:4px}
.palette i{display:block;aspect-ratio:16/9;border-radius:var(--r-md);background:var(--c);box-shadow:inset 0 0 0 1px rgb(13 13 13 / .08);margin-block-end:8px}
.palette span{font-weight:450;letter-spacing:-.015em}
.palette .meta{color:var(--ink-2);font-weight:400}
@media (min-width:700px){ .palette{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* Mots en grand */
.vis--words{padding:clamp(28px,5vw,80px) clamp(22px,4vw,64px)}
.words{font-size:clamp(2.5rem,7.6vw,8rem);font-weight:450;letter-spacing:-.06em;line-height:1}

/* Un gabarit, des pages en série */
.vis--serie{display:grid;gap:clamp(10px,2vw,28px);padding:clamp(18px,3.4vw,52px);align-items:center}
.serie__src{inline-size:min(100%,13rem);justify-self:center}
.serie__src .wf{box-shadow:0 0 0 2px var(--ink)}
.vis--serie .flow__link{justify-self:center}
.serie__out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.2vw,18px)}
@media (min-width:700px){ .vis--serie{grid-template-columns:minmax(0,3fr) auto minmax(0,8fr)} .serie__src{inline-size:auto;justify-self:stretch} }

/* Courbe : deux mesures */
.chart{display:grid;gap:clamp(6px,1vw,14px);padding:clamp(22px,3.4vw,52px)}
.chart p{display:grid;gap:2px}
.chart strong{font-size:var(--fs-h2s);font-weight:450;letter-spacing:-.05em;line-height:1}
.chart .meta{color:var(--ink-2)}
.chart__end{justify-self:end;text-align:end}
.chart__plot{position:relative;block-size:clamp(150px,22vw,300px);margin-block:6px}
.chart svg{display:block;inline-size:100%;block-size:100%;overflow:visible}
.chart__line{fill:none;stroke:var(--accent);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.chart__area{fill:var(--accent);opacity:.08}
.chart__dot{position:absolute;inline-size:14px;block-size:14px;border-radius:50%;margin:-7px 0 0 -7px}
.chart__dot--a{inset-inline-start:0;inset-block-start:89.2%;background:var(--ink)}
.chart__dot--b{inset-inline-start:100%;inset-block-start:10.8%;background:var(--accent)}
.anim .chart__line{stroke-dashoffset:1}
.anim .chart__area,.anim .chart__dot--b{opacity:0}

/* Planche : trois colonnes d'écrans sur la couleur du client, qui glissent à des vitesses différentes */
.mosaic{background:var(--tint,var(--grey));block-size:clamp(420px,86vh,940px)}
.mosaic__in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,26px);padding-inline:clamp(12px,3vw,48px);block-size:100%;align-items:start}
.mosaic__col{display:grid;gap:clamp(10px,1.6vw,26px);align-content:start;will-change:transform}
.mosaic__col:nth-child(1){transform:translateY(-6%)}
.mosaic__col:nth-child(2){transform:translateY(-22%)}
.mosaic__col:nth-child(3){transform:translateY(-10%)}
.mosaic .phone{inline-size:62%;justify-self:center}
.mosaic .screen{border-radius:var(--r-sm)}

/* ==================================================================
   Design system : planche de typographie, de couleurs et de composants
================================================================== */
.ds__grid{display:grid;gap:clamp(10px,1vw,16px)}
.ds .vis__panel{padding:clamp(20px,2.6vw,40px);display:grid;gap:clamp(14px,1.6vw,24px);align-content:space-between}
.ds .vis__panel > .meta{color:var(--ink-2)}
.ds__aa{color:var(--ds-ink);min-block-size:clamp(260px,30vw,440px)}
.ds__aa > .meta{color:var(--ds-ink) !important;opacity:.8}
.ds__glyph{font-family:var(--ds-font);font-weight:700;font-size:clamp(7rem,17vw,17rem);line-height:.82;letter-spacing:-.05em}
.ds__font{font-family:var(--ds-font);font-weight:500;font-size:clamp(1.25rem,2vw,1.875rem);letter-spacing:-.02em}
.ds__weights ul{display:grid}
.ds__weights li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:clamp(8px,1vw,14px);border-block-start:1px solid var(--line);font-family:var(--ds-font);font-size:clamp(1.5rem,2.6vw,2.5rem);letter-spacing:-.03em;line-height:1.1;color:var(--ds-ink)}
.ds__weights .meta,.ds__scale .meta{color:var(--ink-2);font-weight:400;flex:none}
.ds__scale ul{display:grid}
.ds__scale li{display:grid;gap:6px;padding-block:clamp(12px,1.4vw,20px);border-block-start:1px solid var(--line)}
.ds__sample{font-family:var(--ds-font);line-height:1.05;color:var(--ds-ink);text-wrap:balance}
@media (min-width:700px){ .ds__scale li{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:24px} .ds__scale .meta{text-align:end} }

/* Couleurs : des colonnes hautes, bord à bord */
.ds .ds__colors{padding:0;display:block}
.ds__colors ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.ds__colors li{background:var(--c);display:grid;gap:3px;align-content:end;min-block-size:clamp(150px,22vw,340px);padding:clamp(12px,1.4vw,22px);box-shadow:inset 0 0 0 1px rgb(13 13 13 / .05)}
.ds__colors li.is-light{color:var(--ink)}
.ds__colors li.is-dark{color:#fff}
.ds__cname{font-weight:450;letter-spacing:-.015em}
.ds__colors .meta{opacity:.75}
.ds__use{font-size:.875rem;opacity:.75;margin-block-start:6px}
@media (min-width:560px){ .ds__colors ul{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:900px){ .ds__colors ul{grid-template-columns:repeat(6,minmax(0,1fr))} }

/* Composants */
.ds__buttons > div{display:flex;flex-wrap:wrap;gap:12px}
.ds__btn{display:inline-flex;align-items:center;min-height:clamp(48px,4.6vw,62px);padding-inline:clamp(20px,2.2vw,28px);border-radius:var(--ds-btn-r,100px);background:var(--b);color:var(--f);font-family:var(--ds-font);font-weight:500;white-space:nowrap}
.ds__btn--fl{gap:clamp(14px,1.6vw,22px);padding-inline-end:clamp(8px,.8vw,11px);font-size:clamp(1rem,1.25vw,1.1875rem)}
.ds__btn i{display:grid;place-items:center;inline-size:clamp(32px,3vw,40px);aspect-ratio:1;border-radius:50%;background:#fff;color:#23232B;flex:none}
.ds__btn i svg{inline-size:42%;block-size:42%}
.ds__nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-start;padding:clamp(12px,1.3vw,18px);border-radius:clamp(8px,.9vw,12px);background:var(--b)}
.ds__mini{display:inline-flex;align-items:center;min-height:clamp(38px,3.2vw,44px);padding-inline:clamp(16px,1.7vw,22px);border-radius:var(--ds-btn-r,100px);background:var(--b);color:var(--f);font-family:var(--ds-font);font-weight:500;font-size:clamp(.875rem,1.05vw,1rem);white-space:nowrap}
.ds__mini.is-line{box-shadow:inset 0 0 0 1.5px var(--f)}
.ds__btn.is-line{box-shadow:inset 0 0 0 1.5px var(--l)}   /* bouton en contour (Néo Viager) */
.ds__ico{inline-size:.8em;block-size:.8em;flex:none}   /* pictogramme du client devant le texte (Néo Viager : l'étoile) */
.ds__btn:has(.ds__ico),.ds__mini:has(.ds__ico){gap:.55em}
.ds__card{background:#93E7FF;background:var(--tint);color:var(--ds-ink);border-radius:8px;padding:clamp(14px,1.6vw,22px);display:grid;gap:6px;font-family:var(--ds-font)}
.ds__card strong{font-weight:700}
.ds__card span{font-size:.9375rem;line-height:1.4}
.ds__toc{list-style:decimal inside;display:grid;gap:6px;font-family:var(--ds-font);color:var(--ds-ink);font-size:.9375rem}
.ds__toc li{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:from-font}
@media (min-width:900px){
  .ds__grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .ds__aa{grid-column:span 7}
  .ds__weights{grid-column:span 5}
  .ds__scale,.ds .ds__colors{grid-column:1 / -1}
  .ds__buttons{grid-column:span 6}
  .ds__parts{grid-column:span 6}
}

/* ==================================================================
   Blocs ajoutés le 13 octobre 2026 (étude Octopush) : mise en situation, pages en série, arborescence
================================================================== */
/* Mise en situation : un mockup plein cadre, sur le noir du studio */
.vis--shot{aspect-ratio:4/3;background:none}   /* pas de fond : il dessinait un liseré sombre dans les coins arrondis, sous l'image */
.vis--shot img{position:absolute;inset:-9% 0;inline-size:100%;block-size:118%;height:118%;object-fit:cover}
@media (min-width:768px){ .vis--shot{aspect-ratio:16/11} }

/* Trois pages d'un même gabarit, coupées par le bas */
.vis--trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.4vw,22px);align-items:start;padding:clamp(18px,4vw,56px) clamp(14px,4vw,56px) 0}
.vis--trio .screen{border-end-start-radius:0;border-end-end-radius:0;margin-block-end:calc(-1 * clamp(24px,6vw,84px))}   /* la marge négative fait passer le bas de chaque page sous le bord du cadre */
.vis--trio .screen:nth-child(2){margin-block-start:clamp(14px,3vw,44px)}

/* Arborescence : la racine, puis une carte par rubrique */
.tree{margin:0;display:grid;gap:10px}
.tree__root{display:flex;align-items:center;min-height:48px;padding-inline:clamp(16px,1.8vw,24px);background:var(--night);color:var(--on-night);border-radius:var(--r-md)}
.tree ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tree__card{background:var(--white);border-radius:var(--r-md);padding:clamp(16px,1.8vw,24px);display:grid;gap:10px;align-content:start}
.tree__card .meta{color:var(--ink-2)}
.tree__card h4{font-size:clamp(1.25rem,1.7vw,1.625rem);letter-spacing:-.035em;line-height:1.05;text-wrap:balance}
.tree__card ul{margin-block-start:4px}
.tree__card ul li{padding-block:7px;border-block-start:1px solid var(--line);color:var(--ink-2);font-size:.875rem;line-height:1.3}
.tree figcaption{color:var(--ink-2);margin-block-start:2px}
@media (min-width:700px){ .tree ol{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1280px){ .tree ol{grid-template-columns:repeat(5,minmax(0,1fr))} }

/* ==================================================================
   Marque (13 octobre 2026) : logo écrit dans la page, grille de construction, déclinaisons, gammes de couleurs, spécimens
================================================================== */
.lg{display:block;inline-size:100%;height:auto;overflow:visible}
.lg-s{fill:var(--s,currentColor)}
.lg-t{fill:var(--t,currentColor)}
.lg.is-outline path{fill:none;stroke:var(--s,currentColor);stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.lg.is-outline .lg-t{stroke:var(--t,currentColor)}
.lg.is-orig .lg-s,.lg.is-orig .lg-t{fill:var(--o,var(--s))}   /* couleurs d'origine du logo, tracé par tracé (Arrago) */

/* Déclinaisons : le logo, ou le symbole seul, sur les fonds de la palette */
.brand{display:grid;gap:clamp(10px,1vw,16px);grid-template-columns:repeat(2,minmax(0,1fr))}
.brand__cell{aspect-ratio:16/10;display:grid;place-items:center}
.brand__cell .lg{inline-size:min(54%,15rem)}
.brand--sym .brand__cell{aspect-ratio:1}
.brand--sym .brand__cell .lg{inline-size:min(34%,5.5rem)}
@media (min-width:700px){ .brand--3{grid-template-columns:repeat(3,minmax(0,1fr))} .brand--4,.brand--sym{grid-template-columns:repeat(4,minmax(0,1fr))} .brand--4 .brand__cell{aspect-ratio:4/3} }

/* Grille de construction : le logo en contour, ses repères et ses cotes */
.cons{aspect-ratio:4/3;display:grid;place-items:center;--g:rgb(242 242 239 / .16)}
.cons__stage{position:relative;inline-size:62%;aspect-ratio:var(--r);--s:var(--on-night);--t:var(--on-night)}
.cons__v,.cons__h{position:absolute;display:block;background:var(--g)}
.cons__v{inset-block:-150%;inset-inline-start:calc(var(--p) * 1%);inline-size:1px}
.cons__h{inset-inline:-16%;inset-block-start:calc(var(--p) * 1%);block-size:1px}
.cons__geo{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible}
.cons__geo *{fill:none;stroke:var(--g);stroke-width:1;vector-effect:non-scaling-stroke}
.cons__k{position:absolute;inset-block-end:172%;inset-inline-start:calc(var(--a) * 1%);inline-size:calc((var(--b) - var(--a)) * 1%);text-align:center;color:var(--on-night-2);white-space:nowrap;padding-block-end:10px;border-block-end:1px solid var(--on-night-2)}
.cons__k::before,.cons__k::after{content:"";position:absolute;inset-block-end:-1px;inline-size:1px;block-size:7px;background:var(--on-night-2)}
.cons__k::before{inset-inline-start:0}
.cons__k::after{inset-inline-end:0}
@media (min-width:768px){ .cons{aspect-ratio:16/9} }
@media (max-width:519.98px){ .cons__stage{inline-size:74%} .cons__k{font-size:.625rem} }

/* Gammes de couleurs : une rangée par gamme, la couleur principale signalée */
.tones__box{padding:clamp(18px,2.6vw,40px);display:grid;gap:clamp(18px,2.4vw,32px)}
.tones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(4px,.5vw,8px) clamp(4px,.5vw,8px)}
.tones li{display:grid;gap:2px;align-content:start;min-inline-size:0}
.tones i{display:block;aspect-ratio:3/2;border-radius:clamp(4px,.5vw,8px);background:var(--c);box-shadow:inset 0 0 0 1px rgb(13 13 13 / .07);margin-block-end:8px}
.tones .num{font-weight:450;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.tones .meta{color:var(--ink-2);font-size:.6875rem}
.tones__role{color:var(--ink) !important}
@media (min-width:900px){ .tones{grid-template-columns:repeat(var(--n,9),minmax(0,1fr))} .tones i{aspect-ratio:1/1.25} }   /* --n : gamme de moins de neuf tons (Solday) */
.tones__role{overflow-wrap:anywhere;font-size:.625rem !important;letter-spacing:0 !important}

/* Spécimens typographiques : deux grands cadres, la police du client en très grand */
.spec{padding:clamp(20px,2.6vw,40px);display:grid;gap:clamp(18px,2.4vw,36px);align-content:space-between;min-block-size:clamp(380px,44vw,620px);color:var(--ink);font-family:var(--ds-font)}
.spec > *{min-inline-size:0}
.spec > .meta{color:var(--ink);opacity:.72}
.spec__big{font-size:clamp(3rem,6.2vw,5.75rem);line-height:1.1;letter-spacing:-.045em;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,#000 34%,transparent 96%);mask-image:linear-gradient(90deg,#000 34%,transparent 96%)}
.spec__foot{display:grid;gap:18px;min-inline-size:0;border-block-start:1px solid color-mix(in srgb,var(--ink) 22%,transparent);padding-block-start:clamp(14px,1.6vw,22px)}
.spec__w{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.8125rem}
.spec__w li{opacity:.6}   /* graisses non montrées : .6 tient 4,5:1 sur les fonds sombres des spécimens (.38 donnait 3,1 à 3,5:1) */
.spec__w li.is-on{opacity:1}
.spec__foot > *{min-inline-size:0}
.spec__say{font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1.1;letter-spacing:-.02em;text-wrap:balance;max-inline-size:14em}
.spec__abc{font-size:.6875rem;line-height:1.5;margin-block-start:14px;opacity:.72;overflow-wrap:anywhere}

/* Deux mises en situation côte à côte */
.vis--shot2{aspect-ratio:4/5 !important}

/* Planche inverse : positions de repos accordées au défilement inversé */
.mosaic--inv .mosaic__col:nth-child(1),.mosaic--inv .mosaic__col:nth-child(3){transform:translateY(-12%)}
.mosaic--inv .mosaic__col:nth-child(2){transform:translateY(-28%)}

/* Composants du client refaits dans la page (13 oct. 2026) : étiquettes, questions numérotées, avis, flèches de carrousel */
.kit{font-family:var(--ds-font);color:var(--ds-ink);align-content:start !important}
.kit > .meta,.kit__head .meta{font-family:var(--mono)}
.kit__tags{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.kit__tag{font-size:.8125rem;font-weight:500;line-height:1.2}
.kit__tag--pastille{padding:7px 14px;border-radius:100px;background:var(--k-pas-bg,#EBFFF4);box-shadow:inset 0 0 0 1px var(--k-pas-line,#AFEDCA);color:var(--k-pas-ink,#168647)}
.kit__tag--badge{padding:5px 10px;border-radius:6px;background:var(--k-badge-bg,#CFFFE4);color:var(--k-badge-ink,#168647)}
.kit__tag--surtitre{color:var(--k-acc,#009D45);text-transform:uppercase;letter-spacing:.01em}
.kit__faq{display:grid;gap:10px}
.kit__faq li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(12px,1.4vw,20px);padding:clamp(12px,1.3vw,18px) clamp(14px,1.5vw,20px);background:#fff;border-radius:12px;box-shadow:inset 0 0 0 1.5px #E9E9ED;font-weight:600;font-size:clamp(.9375rem,1.1vw,1.0625rem);line-height:1.25}
.kit__n{color:var(--k-acc,#009D45);font-variant-numeric:tabular-nums}
.kit__faq i,.kit__nav i{display:grid;place-items:center;flex:none}
.kit__faq i{inline-size:32px;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px #E9E9ED;color:var(--k-acc,#009D45)}
.kit__faq i svg,.kit__nav i svg{inline-size:44%;block-size:44%}
.kit--dark{color:#fff}
.ds .kit--dark > .kit__head .meta{color:rgb(255 255 255 / .62)}
.kit__head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.kit__nav{display:flex;gap:8px}
.kit__nav i{inline-size:clamp(36px,3vw,42px);aspect-ratio:1;border-radius:9px;background:#fff;color:#23232B}
.kit__nav i:first-child{background:#009D45;color:#fff}
.kit__nav i:first-child svg{rotate:180deg}
.kit__avis{display:grid;gap:clamp(10px,1vw,16px)}
.kit__avis li{display:grid;gap:clamp(14px,1.6vw,22px);align-content:space-between;padding:clamp(18px,2vw,28px);border-radius:14px;background:rgb(255 255 255 / .06)}
.kit__avis p{font-size:clamp(.9375rem,1.15vw,1.0625rem);line-height:1.45;text-wrap:pretty}
.kit__stars{display:flex;gap:4px}
.kit__stars svg{inline-size:18px;block-size:18px;fill:#009D45}
.kit__who{display:grid;gap:2px}
.kit__who strong{font-weight:600}
.kit__who span{color:rgb(255 255 255 / .55);font-size:.875rem}
@media (min-width:700px){ .kit__avis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:900px){ .ds .ds__wide{grid-column:1 / -1} }

/* Plan du site en arbre (13 oct. 2026) : l'accueil en tête, un rail, une colonne par entrée du menu, ses pages reliées par un trait.
   Les colonnes passent à la ligne d'elles-mêmes : un site de quinze rubriques tient sur deux ou trois rangées. */
.map{--trait:rgb(13 13 13 / .28);padding:clamp(20px,3vw,44px) clamp(16px,2.6vw,40px);display:grid;justify-items:center}
.map__root{position:relative;display:flex;gap:14px;align-items:baseline;padding:11px 20px;border-radius:8px;background:var(--ink);color:var(--bg);font-weight:500;letter-spacing:-.01em;margin-block-end:28px}
.map__root .meta{color:var(--on-night-2)}
.map__root::after{content:"";position:absolute;inset-block-start:100%;inset-inline-start:50%;inline-size:1.5px;block-size:28px;background:var(--trait)}
.map__cols{inline-size:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:34px 12px;align-items:start}
.map__col{position:relative;padding-block-start:20px;min-inline-size:0}
.map__col::before{content:"";position:absolute;inset-block-start:0;inset-inline:0 -12px;block-size:1.5px;background:var(--trait)}   /* le rail, prolongé dans la gouttière */
.map__col::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:14px;inline-size:1.5px;block-size:20px;background:var(--trait)}
.map__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:10px 12px;border-radius:8px;box-shadow:inset 0 0 0 1.5px var(--ink);font-weight:500;letter-spacing:-.015em;line-height:1.15}
.map__head .meta{color:var(--ink-2);font-size:.6875rem;flex:none}
/* 29 oct. (recette complète) : une étiquette longue (« ENTRÉE À PART », Edebex) passe sous le titre au lieu de déborder de la case sur mobile */
.map__head{flex-wrap:wrap;row-gap:4px;min-inline-size:0}
.map__col ul{margin-inline-start:14px}
.map__col ul li{position:relative;padding:6px 0 0 10px}
.map__col ul li::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:1.5px;block-size:100%;background:var(--trait)}
.map__col ul li:last-child::before{block-size:calc(6px + 1.05rem)}
.map__col ul li::after{content:"";position:absolute;inset-block-start:calc(6px + 1.05rem);inset-inline-start:0;inline-size:10px;block-size:1.5px;background:var(--trait)}
.map__page{display:flex;justify-content:space-between;align-items:baseline;gap:6px;padding:.5rem 9px;border-radius:6px;background:var(--bg);color:var(--ink);font-size:.75rem;line-height:1.25;min-inline-size:0;overflow-wrap:break-word;hyphens:auto}
.map__page.is-cms{background:none;box-shadow:inset 0 0 0 1.5px var(--trait);border-radius:6px}
.map__nb{font-family:var(--mono);font-size:.6875rem;color:var(--ink-2);white-space:nowrap;flex:none}
.map__key{inline-size:100%;display:flex;flex-wrap:wrap;gap:8px 24px;margin-block-start:clamp(22px,2.6vw,36px);padding-block-start:14px;border-block-start:1px solid var(--line);color:var(--ink-2)}
.map__key li{display:flex;align-items:center;gap:8px}
.map__k{display:block;inline-size:22px;block-size:12px;border-radius:3px}
.map__k--nav{box-shadow:inset 0 0 0 1.5px var(--ink)}
.map__k--page{background:var(--bg)}
.map__k--cms{box-shadow:inset 0 0 0 1.5px var(--trait)}

/* Déclinaisons et logo animé côte à côte (13 oct. 2026) */
.brand-mix{display:grid;gap:clamp(10px,1vw,16px)}
.brand-mix .brand{grid-template-columns:repeat(2,minmax(0,1fr))}
.brand__video{aspect-ratio:4/3}
.brand__video video{position:absolute;inset:0;inline-size:100%;block-size:100%;height:100%;object-fit:cover;display:block}
@media (min-width:700px){ .brand-mix{grid-template-columns:repeat(2,minmax(0,1fr))} .brand__video{aspect-ratio:auto} }

/* Logo animé dans la page : le SVG du logo, centré dans son cadre */
.brand__anim{display:grid;place-items:center;aspect-ratio:4/3}
.brand__anim .lg{inline-size:min(62%,26rem)}
@media (min-width:700px){ .brand__anim{aspect-ratio:auto} }

/* Composants sans numéros (Solday) : la question occupe la première colonne */
.kit__faq li.is-sans{grid-template-columns:minmax(0,1fr) auto}

/* 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}