/* Noir et blanc, rien d'autre. Une seule page au format portrait, pensée d'abord pour le téléphone et posée sur du noir
   sur grand écran : couverture plein écran, bandeau défilant, book en 3D sur fond blanc avec une fumée noire qui monte
   derrière les tirages, tournée composée comme une affiche, prise de rendez-vous en carton noir de fin.
   Pas de menu : on parcourt tout en faisant défiler ; le bouton « Prendre rendez-vous » reste à portée de pouce tout le long. */

/* Archivo (largeur 62 à 125 %, graisse 100 à 900), hébergée avec le site : licence SIL OFL, voir fonts/OFL.txt */
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url("fonts/archivo-latin.woff2") format("woff2-variations"),url("fonts/archivo-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --blanc:#FFFFFF;
  --noir:#000000;
  --gris:#6B6B6B;
  --argent:#B3B3B3;
  --trait:#E3E3E3;
  --ink:var(--noir);
  --paper:var(--blanc);
  --font:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --col:clamp(400px,62vh,640px);              /* largeur de la planche sur grand écran */
  --w:min(100vw,var(--col));                  /* largeur réelle de la planche */
  --pad:clamp(18px,calc(var(--w) * .065),40px);
  --step:56vh;                                /* défilement par photo dans le book */
  color-scheme:light;
}
@supports (height:1svh){:root{--step:56svh}}
@media (pointer:coarse){:root{--step:50vh}}
@supports (height:1svh){@media (pointer:coarse){:root{--step:50svh}}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--noir);-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.is-locked,html.is-locked body{overflow:hidden}
body{margin:0;background:var(--noir);color:var(--noir);font-family:var(--font);font-size:15px;line-height:1.5;font-stretch:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a,button,label{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1.5px solid currentColor;outline-offset:4px}
::selection{background:var(--noir);color:var(--blanc)}
.num{font-variant-numeric:tabular-nums}
.cond{font-weight:250;font-stretch:62%;letter-spacing:-.01em}

/* Grain argentique : grains noirs transparents (même rendu qu'un mode multiplier, sans son coût) ; immobile sur téléphone */
body::after{content:"";position:fixed;inset:-10%;z-index:70;pointer-events:none;opacity:.06;will-change:transform;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}17%{transform:translate(-5%,3%)}33%{transform:translate(4%,-6%)}
  50%{transform:translate(-2%,7%)}67%{transform:translate(6%,2%)}83%{transform:translate(-7%,-4%)}100%{transform:translate(2%,5%)}
}
@media (pointer:coarse){body::after{animation:none;will-change:auto}}

/* Planche portrait */
.page{position:relative;width:min(100%,var(--col));margin:0 auto;background:var(--blanc);color:var(--noir)}

/* Apparition au défilement */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .rv.is-in{opacity:1;transform:none}

/* Prendre rendez-vous, toujours à portée de pouce : apparaît dès que le nom s'est affiché, s'efface sur le formulaire */
.cta{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));z-index:45;display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:12px 22px;border:1px solid rgba(255,255,255,.32);border-radius:999px;background:var(--noir);color:var(--blanc);font-size:14px;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translate(-50%,18px);transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s linear .5s}
.cta.is-on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .4s var(--ease),transform .5s var(--ease)}
html:not(.js) .cta{opacity:1;visibility:visible;transform:translateX(-50%)}
.cta:active{transform:translate(-50%,0) scale(.96);transition-duration:.08s}
.cta::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--noir);opacity:0;pointer-events:none}
.cta.is-pulse::after{animation:cta-pulse 1.5s ease-out .15s 2}
@keyframes cta-pulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.45,1.9)}}
.cta:focus-visible{outline:1.5px solid var(--noir);outline-offset:3px;box-shadow:0 0 0 3px var(--blanc)}

/* Couverture plein écran */
.cover{position:relative;height:100vh;height:100svh;min-height:540px;overflow:hidden;background:#1A1A1A;color:var(--blanc)}
.cover__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;filter:grayscale(1) contrast(1.04)}
.js .cover__img{clip-path:inset(50% 0 50% 0);transform:scale(1.08)}
.js .cover.is-loaded .cover__img{animation:shutter 1.6s cubic-bezier(.76,0,.18,1) forwards,kenburns 16s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes shutter{to{clip-path:inset(0 0 0 0)}}
@keyframes kenburns{from{transform:scale(1.08)}to{transform:scale(1)}}
.cover::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:120px;background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,0));pointer-events:none}
.cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:58%;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.66));pointer-events:none}
.cover__txt{position:absolute;z-index:1;left:var(--pad);right:var(--pad);bottom:calc(max(16px,env(safe-area-inset-bottom)) + 70px)}
.cover__name{margin:0;font-size:calc(var(--w) * .29);line-height:.8;white-space:nowrap;overflow:hidden;padding-top:.1em;margin-top:-.1em}
.cover__name .ch{display:inline-block;transform:translateY(110%);animation:rise 1.1s var(--ease) forwards;animation-delay:calc(.55s + var(--i,0) * 55ms)}
@keyframes rise{to{transform:none}}
.cover__bio{margin:16px 0 0;max-width:30ch;font-size:clamp(15px,calc(var(--w) * .033),19px);line-height:1.4}
.cover__hint{display:flex;align-items:center;gap:10px;margin:22px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:0;animation:hint-in 1s var(--ease) 2.6s forwards;transition:opacity .4s}
.cover__hint.is-off{opacity:0!important}
.cover__hint i{position:relative;display:block;width:1px;height:26px;overflow:hidden;background:rgba(255,255,255,.25)}
.cover__hint i::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--blanc);animation:hint-drop 1.8s cubic-bezier(.65,0,.35,1) infinite}
@keyframes hint-in{to{opacity:.9}}
@keyframes hint-drop{to{top:100%}}

/* Bandeau défilant, en lettres creuses */
.marquee{overflow:hidden;white-space:nowrap;padding-top:calc(var(--pad) * 1.4);user-select:none;-webkit-user-select:none}
.marquee__track{display:inline-flex;will-change:transform;animation:mq 40s linear infinite}
.marquee.is-paused .marquee__track{animation-play-state:paused}
.marquee span{font-size:calc(var(--w) * .17);line-height:1;padding-right:.45em;color:transparent;-webkit-text-stroke:1px var(--noir);font-weight:200;font-stretch:62%;letter-spacing:-.01em}
.marquee span b{font-weight:200;color:var(--noir);-webkit-text-stroke:0}
@keyframes mq{to{transform:translateX(-50%)}}

/* Titres de rubrique */
.sect{padding:calc(var(--pad) * 2.4) var(--pad) var(--pad) var(--pad)}
.sect__h{margin:0;font-size:calc(var(--w) * .19);line-height:.84;white-space:nowrap}
.sect__p{margin:18px 0 0;max-width:36ch;font-size:14px;color:var(--gris)}

/* Book : tirages en 3D sur fond blanc, fumée noire derrière (un seul canvas) */
.depth{position:relative;height:calc(var(--n,10) * var(--step) + 100vh)}
@supports (height:1svh){.depth{height:calc(var(--n,10) * var(--step) + 100svh)}}
.depth__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--blanc)}
.depth__canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.depth__wait{position:absolute;inset:0;display:grid;place-items:center;margin:0;font-size:13px;color:var(--gris)}
.depth__ui{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 var(--pad) 86px var(--pad);pointer-events:none;opacity:0;transition:opacity .35s var(--ease)}
.depth.is-pinned .depth__ui{opacity:1}
.ticks{display:flex;align-items:flex-end;gap:5px;height:18px;flex-shrink:0}
.ticks i{display:block;width:1.5px;height:8px;background:var(--argent);transition:height .35s var(--ease),background-color .35s}
.ticks i.is-video{width:3px}
.ticks i.is-on{height:18px;background:var(--noir)}
html:not(.js) .depth{height:auto}
html:not(.js) .depth__sticky{display:none}

/* Repli sans 3D (WebGL absent ou mouvement réduit) : fil de tirages qui se développent en apparaissant */
.depth__flat{display:none}
.depth.is-flat{height:auto}
.depth.is-flat .depth__sticky{display:none}
.depth.is-flat .depth__flat{display:grid;gap:calc(var(--pad) * 1.1);padding-bottom:calc(var(--pad) * 1.5)}
.shot{margin:0}
.shot--r{padding-left:22%}
.shot--l{padding-right:22%}
.shot__open{display:block;width:100%;overflow:hidden}
.shot img,.shot video{width:100%;height:auto;background:#EFEFEF}
.js .shot img,.js .shot video{opacity:0;filter:grayscale(1) brightness(1.9) contrast(.45) blur(10px);transform:scale(1.04);transition:opacity 1s var(--ease),filter 2.2s cubic-bezier(.3,.7,.2,1),transform 2.4s var(--ease)}
.js .shot.is-in img,.js .shot.is-in video{opacity:1;filter:grayscale(1) contrast(1.04);transform:none}

/* Curseur « Voir » au survol des photos (souris uniquement) */
.ring{position:fixed;left:0;top:0;z-index:45;display:grid;place-items:center;width:86px;height:86px;margin:-43px 0 0 -43px;border:1px solid #fff;border-radius:50%;color:#fff;font-size:12px;mix-blend-mode:difference;pointer-events:none;opacity:0;transition:opacity .2s;will-change:transform}
.ring.is-on{opacity:1}
@media (hover:hover) and (pointer:fine){.shot__open{cursor:none}}
@media not ((hover:hover) and (pointer:fine)){.ring{display:none}}

/* Tournée, composée comme une affiche ; chaque ligne s'encre au survol et mène au rendez-vous */
.tour{padding-bottom:calc(var(--pad) * 2.2)}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--noir)}
.row{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);row-gap:8px;padding:calc(var(--pad) * .6) var(--pad);border-bottom:1px solid var(--trait);transition:color .45s var(--ease)}
.rows li:last-child .row{border-bottom-color:var(--noir)}
.row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--noir);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease)}
.row__t{font-size:calc(var(--w) * .115);line-height:.9;transition:transform .55s var(--ease)}
.row__d{font-size:clamp(15px,calc(var(--w) * .031),18px);line-height:1.4}
.row.is-past{color:var(--gris);cursor:default}
.row:active:not(.is-past){color:var(--blanc);transition-duration:.08s}
.row:active:not(.is-past)::before{transform:scaleY(1);transition-duration:.12s}
@media (hover:hover){
  .row:not(.is-past):hover{color:var(--blanc)}
  .row:not(.is-past):hover::before{transform:scaleY(1)}
  .row:not(.is-past):hover .row__t{transform:translateX(.06em)}
}

/* Prendre rendez-vous, carton noir de fin */
.end{--ink:var(--blanc);--paper:var(--noir);--gris:#9A9A9A;--trait:#262626;background:var(--noir);color:var(--blanc);color-scheme:dark}
.cf{display:grid;gap:calc(var(--pad) * .85);padding:0 var(--pad) calc(var(--pad) * 2.2) var(--pad)}
.cf__ctx{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:-4px 0 2px;font-size:14px;color:var(--gris)}
.cf__ctx-t{color:var(--ink)}
.cf__ctx-x{font-size:13px;color:var(--gris);text-decoration:underline;text-underline-offset:.25em}
.cf__row{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--pad) * .85)}
.cf__field{display:grid;gap:6px;min-width:0}
.cf__field label{font-size:13px;color:var(--gris)}
.cf__field input,.cf__field select{font:inherit;font-size:18px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid #4A4A4A;border-radius:0;min-height:48px;padding:10px 0;width:100%;min-width:0;-webkit-appearance:none;appearance:none;transition:border-color .2s}
.cf__field input:focus,.cf__field select:focus{border-color:var(--ink);outline:none}
.cf__field select{cursor:pointer;padding-right:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") right center/12px 8px no-repeat}
.cf__field select:invalid{color:var(--gris)}
.cf__field select option{color:var(--noir);background:var(--blanc)}
.cf__field input:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 1000px var(--paper) inset;caret-color:var(--ink)}
.cf__field input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);cursor:pointer}
.cf__send{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:6px}
.cf__btn{min-height:48px;border:1px solid var(--ink);border-radius:999px;padding:13px 28px;font-size:15px;background:var(--ink);color:var(--paper);transition:opacity .2s,transform .4s var(--ease)}
.cf__hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.cf__ts:empty{display:none}
.cf__ts{display:flex;justify-content:flex-start}
.cf__btn:hover{opacity:.85;transform:translateX(3px)}
.cf__btn:active{transform:scale(.97);transition-duration:.08s}
.cf__btn:disabled{opacity:.5;cursor:default}
.cf__note{margin:0;font-size:13px;color:var(--gris)}
.cf__note.is-error{color:var(--ink)}
.cf__done{margin:0 var(--pad) calc(var(--pad) * 2.2) var(--pad);max-width:26ch;font-size:clamp(22px,calc(var(--w) * .05),30px);line-height:1.25;outline:none}
.cf__done-t{display:block}
.cf__done-s{display:block;margin-top:14px;font-size:clamp(16px,calc(var(--w) * .035),19px);line-height:1.45;color:var(--gris)}
.end__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:18px var(--pad) 22px var(--pad);border-top:1px solid var(--trait);font-size:12.5px;color:var(--gris)}

/* Vue agrandie : la photo reprend sa couleur */
.lb{position:fixed;inset:0;z-index:60;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--blanc);color:var(--noir);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s linear .3s}
.lb.is-open{opacity:1;visibility:visible;transition:opacity .3s var(--ease)}
.lb__bar,.lb__foot{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:12px clamp(16px,3.6vw,56px)}
.lb__foot{padding-bottom:18px}
.lb__stage{min-height:0;padding:0 clamp(16px,3.6vw,56px);display:grid}
.lb__media{min-height:0;display:grid;place-items:center}
.lb__media img,.lb__media video{max-width:100%;max-height:calc(100vh - 150px);max-height:calc(100svh - 150px);width:auto;height:auto;object-fit:contain;opacity:0;transform:scale(.985);filter:grayscale(1);transition:opacity .5s var(--ease),transform .8s var(--ease),filter 1.6s ease .45s}
.lb__media .is-shown{opacity:1;transform:none;filter:grayscale(0)}
.lb__nav{display:flex;gap:8px}
.pill{display:inline-flex;align-items:center;border:1px solid var(--trait);border-radius:999px;padding:9px 16px;font-size:14px;transition:border-color .2s}
.pill:hover{border-color:var(--noir)}
@media (pointer:coarse){.pill{min-height:44px;padding:10px 18px}}

@media (max-width:480px){
  .cf__row{grid-template-columns:1fr}
  .shot--r{padding-left:14%}
  .shot--l{padding-right:14%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .cover__img{clip-path:none;transform:none}
  .cover__name .ch{transform:none}
  .marquee__track{animation:none}
  body::after{animation:none}
  .cover__hint{opacity:.9;animation:none}
  .cover__hint i::after{animation:none;top:0}
  .cta.is-pulse::after{animation:none}
}