/* fiable — l'atelier peint : ouverture selon l'heure, lumière, poussière, profondeur des peintures. */

/* ---------- Ouverture ---------- */
.hero{--handoff:.4s;position:relative;isolation:isolate;overflow:clip;display:flex;flex-direction:column;min-height:clamp(640px,100svh,1120px);margin-top:calc(-1 * var(--bar-h));padding-top:calc(var(--bar-h) + clamp(24px,5vh,72px));padding-bottom:clamp(120px,24svh,280px);color:var(--ink)}
.scene{position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--ink)}
.hero-poster{position:absolute;inset:0;transform:translate3d(0,var(--scene-shift,0px),0) scale(1.04)}
.hero-scene,.hero-noscript{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--scene-x,44%) 50%}
.hero-scene{opacity:0;transition:opacity 1.1s var(--ease-in-out)}
.hero-scene.is-current{opacity:1}
.hero[data-paused="true"] .hero-scene{transition:none}
.atelier-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity var(--handoff) cubic-bezier(.37,0,.63,1)}
.hero[data-scene-state="ready"][data-atmosphere="running"] .atelier-canvas{opacity:1}

/* Tonalité du texte selon la peinture : encre le matin et le jour, papier la nuit, halo léger pour la lecture. */
.hero-text,.hero-foot{--halo-rgb:244 241 234;--halo:.85;text-shadow:0 0 1px rgb(var(--halo-rgb)/var(--halo)),0 0 1px rgb(var(--halo-rgb)/var(--halo)),0 0 2px rgb(var(--halo-rgb)/var(--halo)),0 0 4px rgb(var(--halo-rgb)/calc(var(--halo) * .7));transition:color .6s var(--ease-out),text-shadow .6s var(--ease-out)}
/* Photo : un voile papier plat derrière le bloc de texte le matin et le jour (pas de dégradé), rien la nuit. */
.hero-text{position:relative;z-index:1}
.hero-text::before{content:"";position:absolute;inset:-28px -32px -28px -32px;z-index:-1;border-radius:4px;background:color-mix(in srgb,var(--paper) 78%,transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:1;transition:opacity .6s var(--ease-out);pointer-events:none}
.hero[data-scene="nuit"] .hero-text::before{opacity:0}
.hero[data-scene="nuit"] .hero-text{--halo:.95}
.hero-text .kicker{color:inherit;font-size:.72rem}
.hero[data-scene="nuit"] .hero-text,.hero[data-scene="nuit"] .hero-foot{--halo-rgb:29 32 36;--halo:.95;color:var(--night-ink)}
.hero-text .btn{text-shadow:none;transition:color .2s var(--ease-out),transform .16s var(--ease-out),box-shadow .6s var(--ease-out)}
.hero-text .btn.ghost{--btn-bg:color-mix(in srgb,var(--paper) 82%,transparent)}
.hero[data-scene="nuit"] .hero-text .btn.ghost{--btn-bg:color-mix(in srgb,var(--ink) 58%,transparent)}
.hero[data-scene="nuit"] .hero-text .btn:not(.ghost){box-shadow:0 0 0 1px color-mix(in srgb,var(--night-ink) 55%,transparent)}
@media (width<=820px){.hero-text::before{inset:-16px -12px -16px -12px}}

.hero-grid{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
.hero-text{grid-column:1/span 8}
.hero-title{font-size:min((100vw - 2 * var(--gutter)) / 5.75,11rem);line-height:.85;white-space:nowrap;margin-left:-.045em}
.hero-title .line{display:block;overflow:clip;overflow-clip-margin:.12em}
.hero-title .line>span{display:block}
@media (prefers-reduced-motion:no-preference){
  .js .hero-title .line>span{animation:rise 1s var(--ease-out) -180ms both}
  .js .hero-title .line+.line>span{animation-delay:-110ms}
}
@keyframes rise{0%{transform:translateY(100%)}}
.hero .lede{margin-top:clamp(18px,2.8vh,30px);max-width:21em;line-height:1.36;font-size:var(--t-lede);color:inherit;font-weight:460}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:clamp(22px,3.4vh,34px)}
.hero-fine{margin-top:20px}

/* Signature peinte : la pile dans l'angle, comme un peintre signe sa toile. */
.hero-foot{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:clamp(12px,2.5vh,36px);pointer-events:none}
.hero-foot>*{pointer-events:auto}
.hero-sign{margin:0;width:clamp(96px,12vw,188px);text-align:right}
.hero-sign svg{width:100%;height:auto;fill:var(--ink)}
.hero-sign .ia{fill:var(--accent)}
.hero-sign figcaption{margin-top:8px;opacity:.85;white-space:nowrap}
.atmosphere-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px 0 0;border:0;background:none;cursor:pointer;color:inherit;opacity:.85;touch-action:manipulation}
.atmosphere-toggle .od-icon{--od-icon-size:16px}
.atmosphere-toggle:disabled{opacity:.5;cursor:default}

@media (width<=820px){
  .hero{--scene-strip:clamp(220px,30svh,320px);padding-top:calc(var(--bar-h) + 23px);padding-bottom:var(--scene-strip)}
  .hero-grid{display:flex;flex-direction:column;align-items:stretch}
  .hero .lede{max-width:22em;margin-top:14px}
  .cta-row{gap:4px 24px;margin-top:24px}
  .hero-scene,.hero-noscript{--scene-x:30%}
  .hero-text,.hero-foot{--halo:1}
  .hero-sign{width:84px}
  .hero-foot{margin-top:24px}
  .hero-sign svg{fill:var(--paper);filter:drop-shadow(0 0 1px rgb(29 32 36/.75))}
  .hero-foot{color:var(--night-ink);--halo-rgb:29 32 36}
  .hero-fine{color:var(--night-ink);text-shadow:0 0 1px rgb(29 32 36/.9),0 0 2px rgb(29 32 36/.9),0 0 4px rgb(29 32 36/.7)}
}
@media (width<=480px){.cta-row .btn{flex:100%;justify-content:center}}

/* ---------- Profondeur et scènes ---------- */
[data-depth] .depth{transform:translate3d(var(--dx,0px),var(--dy,0px),0) scale(var(--zoom,1));transition:transform .9s var(--ease-out)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  [data-depth]:hover .depth{--zoom:1.04;transition:transform .25s var(--ease-out)}
  [data-depth]{will-change:transform}
}
:root[data-motion="reduce"] [data-depth] .depth{transform:none !important}

/* ---------- Hero animé : le nom devient la headline ---------- */
.hero-anim .hero-text{position:relative}
.hero-h1{display:block;font-weight:inherit}
.hero-name{position:relative;display:block;font-size:min(calc((100vw - 2 * var(--gutter)) / 3.5),11.5rem);line-height:.85;white-space:nowrap;margin-left:-.03em;cursor:pointer;user-select:text;-webkit-user-select:text}
.hero-name .part{display:inline-block;will-change:transform;transition:transform .6s var(--ease-out),opacity .45s var(--ease-out)}
.hero-name .part-ia{color:var(--accent)}
/* Les lettres partagées (le i de « fi », le a de « able ») sont des pseudo-éléments : le texte réel reste « fiable. ».
   Elles ne sont visibles que pendant la pile ; dans le mot, le i et le a rouges de « ia » prennent leur place. */
.hero-name .part-fi,.hero-name .part-ble{position:relative}
.hero-name .part-fi::after{content:"i";position:absolute;left:100%;top:0;opacity:0;transition:opacity .35s var(--ease-out);pointer-events:none}
.hero-name .part-ble::before{content:"a";position:absolute;right:100%;top:0;opacity:0;transition:opacity .35s var(--ease-out);pointer-events:none}
.hero-name.is-pile .part-fi::after,.hero-name.is-pile .part-ble::before{opacity:1}
.hero-name.is-flip .part-fi::after,.hero-name.is-flip .part-ble::before{opacity:0}
.hero-name .dot{display:inline-block}
@media (prefers-reduced-motion:no-preference){.hero-name .dot.flash{animation:dot-flash .9s var(--ease-out)}}
@keyframes dot-flash{0%{transform:scale(.6);opacity:0}30%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
.hero-notes{position:absolute;left:0;top:0;width:100%;height:0;pointer-events:none}
.hero-note{position:absolute;display:flex;align-items:flex-start;gap:8px;opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease-out),transform .45s var(--ease-out);white-space:nowrap}
.hero-note.is-on{opacity:1;transform:none}
.hero-note .hook{width:18px;height:28px;flex:none;overflow:visible}
.hero-note .hook path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s var(--ease-out) .1s}
.hero-note.is-on .hook path{stroke-dashoffset:0}
.hero-note .label{padding-top:12px;color:inherit}
.hero-promise{display:block;margin-top:clamp(18px,2.4vh,28px);font-size:var(--t-h2);line-height:.9;text-wrap:balance}
.hero-senses{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:14px}
.hero-senses>span{min-width:0;overflow-wrap:anywhere}
.hero-senses .replay{border:0;background:none;padding:0;min-height:32px;cursor:pointer;color:inherit;opacity:.75;text-decoration:underline 1px;text-underline-offset:.3em;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.hero-senses .replay:hover{opacity:1}
.hero-senses .replay:disabled{opacity:.4;cursor:default}
.hero-anim .lede{margin-top:clamp(16px,2.4vh,26px)}
/* Hauteurs réservées : les éléments de l'état final sont présents mais invisibles jusqu'à leur tour. */
.js .hero-anim[data-hero="pending"] [data-stage="final"],.js .hero-anim[data-hero="playing"] [data-stage="final"]{visibility:hidden;opacity:0}
.js .hero-anim [data-stage="final"]{transition:opacity .6s var(--ease-out),transform .7s var(--ease-out),visibility 0s linear .6s;transform:translateY(12px)}
.js .hero-anim [data-stage="final"].in{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.js .hero-anim[data-hero="pending"] .hero-name .part{opacity:0}
.hero-anim[data-hero="done"] .hero-name .part{opacity:1;transform:none}
.hero-anim[data-hero="done"] .hero-note{display:none}
@media (prefers-reduced-motion:reduce){.hero-anim [data-stage="final"]{visibility:visible !important;opacity:1 !important;transform:none !important}.hero-name .part{opacity:1 !important;transform:none !important}.hero-note{display:none}}
:root[data-motion="reduce"] .hero-anim [data-stage="final"]{visibility:visible !important;opacity:1 !important;transform:none !important}
@media (width<=820px){.hero-note .label{padding-top:8px;font-size:.62rem}.hero-note .hook{width:14px;height:22px}.hero-promise{margin-top:14px}}

/* ---------- Bande peinte courte des pages internes ---------- */
.page-band{position:relative;height:clamp(150px,22vw,260px);margin-top:calc(-1 * var(--bar-h));overflow:clip;background:var(--ink)}
.page-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.page-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 18%,transparent),transparent 45%)}