/* Style ÉPURÉ « lumière et précision » (maquette page blanche, 28/09/2026) — chargé après socle.css.
   Jetons + signatures : grille fine apparente, sur-titres numérotés « 01 —— », repères de coupe autour des photos,
   halo de la couleur du cabinet, entrée du héros. Plus de « Fig. 01 » devant les légendes (30/09/2026 : Bertrand ne
   voyait pas pourquoi) ; la carte d'infos du héros se range sous la photo au lieu de la couvrir. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/Archivo-wdth.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/Inter.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/JetBrainsMono.woff2) format('woff2')}
:root{--ds-stretch:100%;--ds-w-title:620;--ds-grid-c:color-mix(in srgb, var(--ds-ink) 5%, transparent);--ds-grid:linear-gradient(to right,var(--ds-grid-c) 1px,transparent 1px)}
body{counter-reset:epsec}

/* sur-titres numérotés : « 01 —— Le cabinet » */
.ds-eb{counter-increment:epsec}
.ds-eb::before{content:counter(epsec, decimal-leading-zero);color:var(--ds-accent);padding-right:40px;margin-right:12px;background:linear-gradient(var(--ds-accent),var(--ds-accent)) right center/26px 1.5px no-repeat;transition:background-size .9s var(--ds-ease) .15s}
html.dsa .ds-eb.rv::before{background-size:0 1.5px}
html.dsa .ds-eb.rv.vu::before{background-size:26px 1.5px}
.ds-eb--n{counter-increment:none}
.ds-eb--n::before{content:"";padding-right:26px;min-height:1em;background-position:left center}
.ds-cta .ds-eb::before,.ds-note--urg .ds-eb::before{color:rgba(255,255,255,.75);background-image:linear-gradient(#fff,#fff)}
.ds-ftr .ds-eb{counter-increment:none}

/* grille fine : héros, hauts de page, sections grises */
.ds-hero::before,.ds-phero::before,.ds-sec--alt::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ds-grid);background-size:calc(100% / 12) 100%;pointer-events:none}
.ds-sec--alt{isolation:isolate}
.ds-hero::after,.ds-phero::after{content:"";position:absolute;z-index:-1;right:-10%;top:-35%;width:65%;height:130%;background:radial-gradient(closest-side,color-mix(in srgb, var(--ds-accent) 11%, transparent),transparent);pointer-events:none}
.ds-cta{background-image:linear-gradient(to right,rgba(255,255,255,.08) 1px,transparent 1px);background-size:calc(100% / 12) 100%}
@media (max-width:900px){.ds-hero::before,.ds-phero::before,.ds-sec--alt::before{background-size:calc(100% / 6) 100%}}

/* repères de coupe autour des photos */
.ds-hero-media::before,.ds-fig::before{content:"";position:absolute;z-index:2;pointer-events:none;--c:var(--ds-accent);--l:18px;--e:1.5px;
  background:linear-gradient(var(--c),var(--c)) left top/var(--l) var(--e) no-repeat,linear-gradient(var(--c),var(--c)) left top/var(--e) var(--l) no-repeat,
  linear-gradient(var(--c),var(--c)) right top/var(--l) var(--e) no-repeat,linear-gradient(var(--c),var(--c)) right top/var(--e) var(--l) no-repeat,
  linear-gradient(var(--c),var(--c)) left bottom/var(--l) var(--e) no-repeat,linear-gradient(var(--c),var(--c)) left bottom/var(--e) var(--l) no-repeat,
  linear-gradient(var(--c),var(--c)) right bottom/var(--l) var(--e) no-repeat,linear-gradient(var(--c),var(--c)) right bottom/var(--e) var(--l) no-repeat}
.ds-fig::before{inset:-12px -12px calc(-12px + 1.4em + 14px) -12px}
.ds-fig:not(:has(figcaption))::before{inset:-12px}

/* héros : la carte d'infos sous la photo, jamais dessus (la photo du cabinet reste entière) */
.ds-hero-media{display:grid;grid-template-rows:minmax(0,1fr) auto;row-gap:26px;padding:52px 56px 44px 0}
.ds-hero-media > img{grid-area:1 / 1;position:relative;inset:auto;width:100%;height:100%;min-height:0}
.ds-hero-media::before{grid-area:1 / 1;position:relative;inset:auto;margin:-12px}
.ds-fiche{grid-area:2 / 1;position:relative;left:auto;bottom:auto;width:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.ds-fiche > .ds-open,.ds-fiche > hr{grid-column:1 / -1}
@media (max-width:1180px){.ds-fiche{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
  .ds-hero-media{grid-template-rows:auto auto;row-gap:22px;padding:0 20px 44px}
  .ds-hero-media > img{height:auto;aspect-ratio:4/3}
  .ds-hero-media::before{margin:-10px;--l:14px}
  .ds-fiche{margin:0}
}

/* entrée du héros et des hauts de page (une fois, au chargement) */
@keyframes ep-monte{from{transform:translate3d(0,22px,0)}to{transform:none}}
@keyframes ep-fond{from{opacity:0}to{opacity:1}}
@keyframes ep-grille{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ep-rideau{from{clip-path:inset(0 0 0 100% round var(--ds-r-l))}to{clip-path:inset(0 0 0 0 round var(--ds-r-l))}}
@keyframes ep-zoom{from{transform:scale(1.08)}to{transform:none}}
@keyframes ep-trait{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ds-hero .ds-h1 .ds-acc{position:relative}
.ds-hero .ds-h1 .ds-acc::after{content:"";position:absolute;left:.02em;right:.02em;bottom:.02em;height:.07em;border-radius:.04em;background:currentColor;transform-origin:0 50%}
html.dsa .ds-hero::before,html.dsa .ds-phero::before{animation:ep-grille 1.6s var(--ds-ease) both}
html.dsa .ds-hero::after,html.dsa .ds-phero::after{animation:ep-fond 1.8s ease-out .2s both}
html.dsa .ds-hero-txt > *{animation:ep-monte .9s var(--ds-ease) both}
html.dsa .ds-hero-txt > :nth-child(1){animation-delay:.1s}
html.dsa .ds-hero-txt > :nth-child(2){animation-delay:.22s}
html.dsa .ds-hero-txt > :nth-child(3){animation-delay:.42s}
html.dsa .ds-hero-txt > :nth-child(4){animation-delay:.56s}
html.dsa .ds-hero-txt > :nth-child(5){animation-delay:.7s}
html.dsa .ds-hero .ds-h1 .ds-ville{animation:ep-monte .9s var(--ds-ease) .36s both}
html.dsa .ds-hero .ds-h1 .ds-acc::after{animation:ep-trait .9s var(--ds-ease) 1.05s both}
html.dsa .ds-hero-media > img{animation:ep-rideau 1.25s cubic-bezier(.7,0,.2,1) .25s both,ep-zoom 2.2s var(--ds-ease) .25s both}
html.dsa .ds-hero-media::before{animation:ep-fond .8s ease-out 1.25s both}
html.dsa .ds-fiche{animation:ep-monte .9s var(--ds-ease) 1.1s both}
html.dsa .ds-phero .ds-wrap > *,html.dsa .ds-phero--split .ds-wrap > div > *{animation:ep-monte .85s var(--ds-ease) both}
html.dsa .ds-phero .ds-wrap > :nth-child(2),html.dsa .ds-phero--split .ds-wrap > div > :nth-child(2){animation-delay:.1s}
html.dsa .ds-phero .ds-wrap > :nth-child(3),html.dsa .ds-phero--split .ds-wrap > div > :nth-child(3){animation-delay:.2s}
html.dsa .ds-phero .ds-wrap > :nth-child(n+4),html.dsa .ds-phero--split .ds-wrap > div > :nth-child(n+4){animation-delay:.32s}
html.dsa .ds-phero-media img{animation:ep-rideau 1.2s cubic-bezier(.7,0,.2,1) .2s both}
