/* =========================================================================
   Chinou Eye · chinoueye.com
   Studio photo & vidéo, Cointrin (Genève)
   Design system : noir profond, grille suisse (u = 28px), DM Serif + Manrope
   ========================================================================= */

/* ------------------------------ 1. Tokens ------------------------------ */
:root{
  /* couleurs */
  --ink:        #0d0d0d;   /* noir, fond principal */
  --ink-2:      #111111;   /* noir de charte, fond alterné */
  --ink-3:      #171717;   /* surfaces */
  --paper:      #ffffff;   /* blanc du logo */
  --mid:        #9d9a95;   /* texte secondaire */
  --faint:      #827e77;   /* texte tertiaire, contraste AA 4,81:1 */
  --line:       rgba(255,255,255,.13);
  --line-soft:  rgba(255,255,255,.06);
  --gold:       #a08b6b;   /* or / taupe, accent principal */
  --gold-hi:    #c9ae83;   /* or clair, survol */
  --gold-soft:  rgba(160,139,107,.16);
  --red:        #dc0000;   /* rouge, réservé aux interactions */

  /* grille suisse : corps 17 / interligne 28 */
  --u:      28px;          /* unité verticale */
  --u2:     56px;
  --u3:     84px;
  --u4:     112px;
  --u5:     140px;
  --u6:     168px;
  --gut:    28px;          /* gouttière = 1 ligne (Brockmann) */
  --maxw:   1244px;        /* zone de texte sur 12 champs */
  --pad:    98px;          /* marge latérale */

  /* typo */
  --serif: "DM Serif Display", "Times New Roman", serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease:  cubic-bezier(.22,.61,.36,1);
}

/* --------------------------- 2. Réinitialisation ----------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font:400 17px/28px var(--sans);
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,ul{margin:0;padding:0}
ul{list-style:none}
::selection{background:var(--gold);color:#0d0d0d}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Le theme WordPress espace les enfants directs du contenu de 40px. Nos pages
   ne sont qu'un seul bloc HTML personnalise, precede des balises <link> et
   <script> : cet espacement tombait donc au-dessus du hero et decalait toute
   la couche en position fixe de 40px. */
.wp-site-blocks,.entry-content{margin-block:0;padding-block:0}
.entry-content > *{margin-block:0}

/* ------------------------------ 3. Layout ------------------------------ */
.wrap{width:100%;max-width:calc(var(--maxw) + var(--pad)*2);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--u5)}
.section--tight{padding-block:var(--u4)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* --------------------------- 4. Typographie ---------------------------- */
.eyebrow{
  font:700 11px/28px var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--mid);margin:0;
}
.eyebrow .dot{color:var(--gold)}
.display{
  font:400 clamp(2.9rem,7.2vw,6rem)/1.02 var(--serif);
  letter-spacing:-.02em;margin:0;
}
.display em{font-style:italic;color:var(--gold)}
.h2{
  font:400 clamp(1.9rem,3.4vw,3rem)/1.1 var(--serif);
  letter-spacing:-.015em;margin:0;
}
.h2 em{font-style:italic;color:var(--gold)}
.h3{font:400 clamp(1.3rem,1.9vw,1.66rem)/28px var(--serif);letter-spacing:-.01em;margin:0}
.lead{font:300 clamp(1.05rem,1.5vw,1.22rem)/32px var(--sans);color:var(--mid);max-width:32em}
.body{font:400 17px/28px var(--sans);color:var(--mid);max-width:34em}
.small{font:400 13px/28px var(--sans);color:var(--faint)}
.num{
  font:700 11px/28px var(--sans);letter-spacing:.12em;color:var(--gold);
  font-variant-numeric:tabular-nums;
}

/* ------------------------------ 5. Boutons ----------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  height:52px;padding-inline:26px;border:1px solid var(--paper);
  font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  border-radius:0;background:var(--paper);color:var(--ink);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn--ghost:hover{background:none}
.btn--ghost{background:none;color:var(--paper);border-color:var(--line)}
.btn--ghost:hover{background:none;border-color:var(--paper);color:var(--paper)}
.btn .arw{transition:transform .35s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

.link{
  display:inline-flex;align-items:center;gap:10px;
  font:700 12px/28px var(--sans);letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--line);padding-bottom:2px;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.link:hover{border-color:var(--gold);color:var(--gold-hi)}

/* ----------------------------- 6. Navigation --------------------------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;
  display:flex;align-items:center;gap:var(--gut);
  height:var(--u3);padding-inline:var(--pad);
  background:rgba(13,13,13,0);backdrop-filter:blur(0);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),height .4s var(--ease);
}
.nav.is-stuck{
  height:var(--u2);background:rgba(13,13,13,.74);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand img{height:26px;width:auto}
.brand b{
  font:800 13px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
}
.nav-links{display:flex;align-items:center;gap:var(--gut)}
.nav-links a{
  font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--mid);transition:color .3s var(--ease);
}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--paper)}
.lang{display:flex;align-items:center;gap:8px;font:700 11px/1 var(--sans);letter-spacing:.1em}
.lang a{color:var(--faint)}
.lang a.on,.lang .on{color:var(--paper)}
.lang span{color:var(--faint)}
.nav .btn{height:40px;padding-inline:18px}
.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center}
.burger i{display:block;width:20px;height:1px;background:var(--paper);position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:20px;height:1px;background:var(--paper)}
.burger i::before{top:-6px}.burger i::after{top:6px}

.drawer{
  position:fixed;inset:0;z-index:90;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:var(--u);
  padding:var(--pad);transform:translateY(-100%);
  /* Le theme WordPress decale de 40px le reperage des elements en position
     fixe : le seul translateY(-100%) laissait depasser le haut du tiroir en
     permanence, visible sur telephone. visibility le neutralise, quel que
     soit le decalage, et la transition retardee garde le glissement. */
  visibility:hidden;
  transition:transform .5s var(--ease),visibility 0s linear .5s;
}
.drawer.open{
  transform:none;visibility:visible;
  transition:transform .5s var(--ease),visibility 0s;
}
.drawer a{font:400 2rem/1.2 var(--serif)}
.drawer .close{position:absolute;top:28px;right:28px;font:700 12px/1 var(--sans);letter-spacing:.1em}

/* ------------------------------- 7. Hero ------------------------------- */
/* Le hero est le fonds tout entier : 110 tirages en sept colonnes qui
   derivent, sens et vitesses alternes. Au survol, le tirage vise reprend sa
   lumiere, les autres reculent et la colonne se fige.
   Aucune colonne n'a overflow:hidden : la lueur doit pouvoir deborder.
   C'est .hero qui masque, et lui seul. */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;padding-top:0;overflow:hidden;isolation:isolate;
}

.hero-plane{
  /* pas de z-index ici : le tirage survole doit pouvoir passer AU-DESSUS
     du voile. Sans contexte d'empilement, .hero-cell:hover{z-index:3} y arrive. */
  position:absolute;inset:-7% -2%;
  display:grid;grid-template-columns:repeat(7,1fr);gap:10px;
}
.hero-col{min-width:0;min-height:0}
.hero-run{
  display:grid;gap:10px;will-change:transform;
  animation:heroDrift calc(96s + var(--i) * 14s) linear infinite;
}
.hero-col:nth-child(even) .hero-run{animation-direction:reverse}
.hero-col:nth-child(3n)   .hero-run{animation-duration:calc(126s + var(--i) * 9s)}
.hero-col:hover .hero-run{animation-play-state:paused}
@keyframes heroDrift{from{transform:translateY(0)}to{transform:translateY(-50%)}}

.hero-cell{position:relative;display:block;width:100%;padding:0;border:0;background:none}
.hero-cell img{
  width:100%;aspect-ratio:2/3;object-fit:cover;
  filter:grayscale(.34) brightness(.5) saturate(.86) contrast(1.05);
  transition:filter .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
/* les voisins reculent des qu'on entre dans le plan */
.hero-plane:hover .hero-cell img{filter:grayscale(.6) brightness(.24) saturate(.6)}
/* le tirage vise s'allume et passe devant le voile */
.hero-cell:hover,.hero-cell:focus-visible{z-index:3}
.hero-plane .hero-cell:hover img,
.hero-plane .hero-cell:focus-visible img{
  filter:grayscale(0) brightness(1.06) saturate(1.1) contrast(1.03);
  transform:scale(1.06);
  box-shadow:0 0 0 1px rgba(201,174,131,.6),
             0 30px 80px -20px rgba(0,0,0,.95),
             0 0 120px -10px rgba(201,174,131,.5);
}
.hero-cell::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(78% 58% at 50% 38%,rgba(255,246,228,.15),transparent 72%);
  opacity:0;transition:opacity .5s var(--ease);
}
.hero-cell:hover::after,.hero-cell:focus-visible::after{opacity:1}

/* le voile qui tient le texte, et qui se leve un peu quand on entre dans le plan */
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  transition:opacity .6s var(--ease);
  background:
    linear-gradient(90deg,rgba(13,13,13,.96) 0%,rgba(13,13,13,.82) 28%,
                          rgba(13,13,13,.2) 58%,rgba(13,13,13,.34) 100%),
    linear-gradient(0deg,rgba(13,13,13,.95) 0%,rgba(13,13,13,.22) 46%,rgba(13,13,13,.55) 100%),
    radial-gradient(130% 95% at 20% 80%,rgba(160,139,107,.13),transparent 56%);
}
.hero-vign{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 190px 70px rgba(6,6,6,.72);
}

.hero-inner{position:relative;z-index:4;padding-block:var(--u4) var(--u2)}
.hero .display{margin-block:var(--u) 0;max-width:14ch}
.hero-inner .eyebrow,.hero-inner .display,.hero-inner .lead{
  text-shadow:0 1px 24px rgba(6,6,6,.8);
}
.hero-foot{
  display:grid;grid-template-columns:1fr auto;gap:var(--u2);align-items:end;
  margin-top:var(--u2);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--u)}
.hero-note{
  margin-top:var(--u);font:600 10px/18px var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);
}
/* au doigt, « survolez » ne veut rien dire */
.hero-note .on-touch{display:none}
@media (hover:none){
  .hero-note .on-hover{display:none}
  .hero-note .on-touch{display:inline}
}
.facts{
  display:flex;flex-wrap:wrap;gap:0 var(--u2);
  border-top:1px solid rgba(255,255,255,.22);padding-top:12px;
  text-shadow:0 1px 16px rgba(6,6,6,.95);
}
.facts div{min-width:0}
.facts b{display:block;font:400 1.5rem/28px var(--serif)}
.facts span{display:block;font:600 11px/20px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* le compteur du fonds, bord droit, sous la barre de navigation */
.hero-count{
  position:absolute;z-index:4;right:var(--pad);top:var(--u4);text-align:right;
  font:600 10px/18px var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--mid);pointer-events:none;
  text-shadow:0 1px 14px rgba(6,6,6,.92),0 0 40px rgba(6,6,6,.8);
}
.hero-count b{display:block;font:400 2.6rem/1 var(--serif);color:var(--paper);letter-spacing:0}
.hero-count i{font-style:normal;color:var(--gold)}


/* ------------------- 8. Planche contact (galerie) ---------------------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--u)}
.chip{
  height:36px;padding-inline:16px;border:1px solid var(--line);
  font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mid);
  display:inline-flex;align-items:center;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.chip:hover{border-color:var(--paper);color:var(--paper)}
.chip[aria-pressed="true"]{background:var(--paper);border-color:var(--paper);color:var(--ink)}

.sheet{
  display:grid;grid-template-columns:repeat(5,1fr);
  column-gap:var(--gut);row-gap:var(--u2);margin-top:var(--u2);
}
.frame{display:block;position:relative;text-align:left;width:100%}
.frame figure{margin:0;position:relative;overflow:hidden;background:var(--ink-3)}
.frame img{
  width:100%;aspect-ratio:2/3;object-fit:cover;
  transition:transform .9s var(--ease),opacity .5s var(--ease);
  opacity:.92;
}
.frame:hover img{transform:scale(1.035);opacity:1}
.frame figure::after{
  content:"";position:absolute;inset:0;border:1px solid transparent;
  transition:border-color .35s var(--ease);pointer-events:none;
}
.frame:hover figure::after{border-color:var(--gold)}
.frame figcaption{
  display:flex;gap:10px;align-items:baseline;padding-top:10px;
  font:500 11px/16px var(--sans);letter-spacing:.04em;color:var(--mid);
}
.frame figcaption .num{line-height:16px}
.frame.is-hidden{display:none}
.frame--wide{grid-column:span 2}
.frame--wide img{aspect-ratio:3/2}

/* ------------------------------ 9. Lightbox ---------------------------- */
.lb{
  position:fixed;inset:0;z-index:100;background:#080808;
  display:none;align-items:center;justify-content:center;padding:var(--u2);
}
.lb.open{display:flex}
.lb img{max-width:min(1200px,92vw);max-height:80vh;width:auto;object-fit:contain}
.lb-cap{
  position:absolute;left:var(--pad);bottom:var(--u);right:var(--pad);
  display:flex;gap:14px;align-items:baseline;
  font:500 12px/20px var(--sans);letter-spacing:.06em;color:var(--mid);
}
.lb-x{position:absolute;top:var(--u);right:var(--pad);font:700 12px/1 var(--sans);letter-spacing:.12em}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;color:var(--mid);font-size:22px}
.lb-nav:hover{color:var(--paper)}
.lb-prev{left:14px}.lb-next{right:14px}

/* ----------------------------- 10. Services ---------------------------- */
.svc{border-top:1px solid var(--line);margin-top:var(--u2)}
.svc-row{
  display:grid;grid-template-columns:56px 4fr 5fr 2fr;gap:var(--gut);
  align-items:start;padding-block:var(--u);border-bottom:1px solid var(--line-soft);
  transition:background .4s var(--ease),padding-inline .4s var(--ease);
}
.svc-row:hover{background:var(--ink-2)}
.svc-row .svc-link{display:inline-flex;align-items:baseline;gap:10px;transition:color .3s var(--ease)}
.svc-row:hover .svc-link{color:var(--gold-hi)}
.svc-link .arw{font:700 .62em/1 var(--sans);color:var(--gold);opacity:0;transform:translateX(-8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.svc-row:hover .svc-link .arw{opacity:1;transform:none}
.svc-row .price{text-align:right;font:400 1.1rem/28px var(--serif);color:var(--paper);white-space:nowrap}
.svc-row .price small{display:block;font:600 10px/16px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ------------------------------ 11. Studio ----------------------------- */
.split{display:grid;grid-template-columns:5fr 6fr;gap:var(--u2) var(--u2);align-items:start}
.split figure{margin:0;position:relative}
.split figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.split figcaption{font:500 11px/28px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut);margin-top:var(--u2)}
.step{border-top:1px solid var(--line);padding-top:14px}
.step h3{margin-block:6px}

/* ------------------------------- 12. Avis ------------------------------ */
.rating{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px var(--u)}
.stars{color:var(--gold);letter-spacing:.18em;font-size:15px}

/* -------------------------------- 13. FAQ ------------------------------ */
.faq{border-top:1px solid var(--line);margin-top:var(--u2)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  display:flex;justify-content:space-between;gap:var(--gut);align-items:baseline;
  padding-block:var(--u);cursor:pointer;list-style:none;
  font:400 clamp(1.1rem,1.6vw,1.35rem)/28px var(--serif);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font:400 1.4rem/1 var(--sans)}
.faq details[open] summary::after{content:"–"}
.faq p{padding-bottom:var(--u);max-width:60ch;color:var(--mid)}

/* ------------------------------ 14. Contact ---------------------------- */
.contact{display:grid;grid-template-columns:5fr 6fr;gap:var(--u2)}
.cinfo dt{font:600 10px/28px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.cinfo dd{margin:0 0 var(--u) 0;font:400 1.05rem/28px var(--sans)}
.cinfo dd a:hover{color:var(--red)}

.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--u) var(--gut)}
.field{display:flex;flex-direction:column;gap:6px}
.field--full{grid-column:1/-1}
.field label{font:600 10px/20px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.field input,.field select,.field textarea{
  background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--paper);font:400 16px/28px var(--sans);padding:8px 0;border-radius:0;
  transition:border-color .3s var(--ease);
}
.field textarea{resize:vertical;min-height:84px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold)}
.field select option{background:var(--ink)}
.form .btn{justify-self:start}

/* ------------------------------ 15. Footer ----------------------------- */
.foot{border-top:1px solid var(--line);padding-block:var(--u2) var(--u)}
.foot-grid{display:grid;grid-template-columns:4fr 2fr 2fr 4fr;gap:var(--gut)}
.foot h4{font:700 10px/28px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.foot li a{font:400 14px/28px var(--sans);color:var(--mid)}
.foot li a:hover{color:var(--paper)}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  border-top:1px solid var(--line-soft);margin-top:var(--u2);padding-top:16px}
.foot-bar,.foot-bar a{font:400 12px/20px var(--sans);color:var(--faint)}
.foot-bar a:hover{color:var(--paper)}

/* --------------------------- 16. Page galerie -------------------------- */
.crumb{font:500 11px/28px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.crumb a:hover{color:var(--paper)}
.pagehead{padding-top:var(--u6);padding-bottom:var(--u2)}
.pagehead .display{max-width:16ch;margin-top:12px}
.nextprev{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--u);
  border-top:1px solid var(--line);padding-top:var(--u)}

/* ------------------------- 17. Apparition douce ------------------------ */
.rise{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* ---------------------------- 18. Responsive --------------------------- */
@media (max-width:1180px){
  :root{--pad:56px}
  .sheet{grid-template-columns:repeat(4,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero-plane{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:900px){
  :root{--pad:32px;--u5:112px;--u6:140px}
  body{font-size:16px}
  .nav-links,.nav .btn{display:none}
  .burger{display:flex}
  .sheet{grid-template-columns:repeat(3,1fr);row-gap:var(--u)}
  .svc-row{grid-template-columns:40px 1fr;row-gap:8px}
  .svc-row .price{text-align:left;grid-column:2}
  .svc-row .body{grid-column:2}
  .split,.contact{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .hero-foot{grid-template-columns:1fr;gap:var(--u2)}
  .facts{gap:0 var(--u)}
  .hero-count{display:none}
  .hero-plane{grid-template-columns:repeat(4,1fr);gap:7px}
  /* sur telephone le texte occupe presque tout : le voile doit tenir dessous */
  .hero-scrim{background:
    linear-gradient(0deg,rgba(13,13,13,.96) 0%,rgba(13,13,13,.84) 34%,
                         rgba(13,13,13,.38) 66%,rgba(13,13,13,.72) 100%),
    radial-gradient(120% 80% at 30% 85%,rgba(160,139,107,.12),transparent 60%)}
  .lb-cap{left:24px;right:24px}
  .lb-x{right:24px}
}
@media (max-width:600px){
  :root{--pad:20px}
  .sheet{grid-template-columns:repeat(2,1fr)}
  .form{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero-plane{grid-template-columns:repeat(3,1fr)}
}

/* =========================================================================
   19. Hero : entree des mots, et sobriete si le visiteur la demande
   ========================================================================= */
.display .w{display:inline-block;opacity:0;transform:translateY(.42em);
  animation:wordUp .9s var(--ease) forwards;animation-delay:calc(var(--n) * 70ms)}
@keyframes wordUp{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .display .w{animation:none;opacity:1;transform:none}
  .hero-run{animation:none}
  .hero-cell img{transition:none}
}

/* =========================================================================
   20. Archives, planche infinie déplaçable
   ========================================================================= */
.archive{
  position:relative;height:min(82vh,760px);overflow:hidden;
  border-block:1px solid var(--line);cursor:grab;background:var(--ink-2);
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.archive.drag{cursor:grabbing}
.archive::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    linear-gradient(to right,var(--ink-2),transparent 9%,transparent 91%,var(--ink-2)),
    linear-gradient(to bottom,var(--ink-2),transparent 11%,transparent 89%,var(--ink-2));
}
.arc-plane{position:absolute;top:0;left:0;will-change:transform}
.arc-block{position:absolute;top:0;left:0;display:grid;gap:22px 18px}
.arc-cell{position:relative;display:block}
.arc-cell img{
  width:100%;aspect-ratio:2/3;object-fit:cover;
  filter:grayscale(.32) brightness(.74);opacity:.92;
  transition:filter .5s var(--ease),opacity .5s var(--ease),transform .5s var(--ease);
  outline:1px solid rgba(255,255,255,.06);outline-offset:-1px;
}
.arc-cell:hover img{filter:none;opacity:1;transform:scale(1.03);outline-color:var(--gold)}
.arc-cap{
  display:flex;gap:8px;padding-top:7px;
  font:500 9px/14px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.arc-cap b{color:var(--gold);font-weight:700}
.arc-hint{
  position:absolute;z-index:4;left:var(--pad);bottom:var(--u);pointer-events:none;
  font:600 10px/28px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--faint);
}
.arc-count{position:absolute;z-index:4;right:var(--pad);bottom:var(--u);pointer-events:none;
  font:600 10px/28px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}

/* =========================================================================
   21. Formats verticaux, mockup téléphone
   ========================================================================= */
.vert{display:grid;grid-template-columns:5fr 6fr;gap:var(--u2) var(--u3);align-items:center}
.phone-stage{display:flex;justify-content:center;perspective:1500px}
.phone{
  position:relative;width:clamp(220px,22vw,286px);aspect-ratio:9/19;
  border-radius:34px;background:#050505;padding:9px;
  box-shadow:0 0 0 1px rgba(255,255,255,.13),0 46px 80px -28px rgba(0,0,0,.95),
             inset 0 0 0 2px rgba(255,255,255,.05);
  transform-style:preserve-3d;
  animation:phoneSway 9s var(--ease) infinite alternate;
}
@keyframes phoneSway{
  from{transform:rotateY(-17deg) rotateX(5deg) rotateZ(-1.5deg)}
  to{transform:rotateY(15deg) rotateX(-3deg) rotateZ(1.5deg)}
}
.phone::before{ /* encoche */
  content:"";position:absolute;top:16px;left:50%;transform:translateX(-50%);
  width:78px;height:20px;border-radius:12px;background:#050505;z-index:3;
}
.phone-screen{position:relative;width:100%;height:100%;border-radius:26px;overflow:hidden;background:#111}
.phone-screen img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;animation:reelCycle 15s linear infinite;
}
@keyframes reelCycle{
  0%,2%{opacity:0;transform:scale(1.06)}
  6%,26%{opacity:1;transform:scale(1)}
  32%,100%{opacity:0;transform:scale(1)}
}
.phone-ui{
  position:absolute;inset:auto 0 0 0;z-index:2;padding:14px 14px 18px;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent);
  font:600 9px/16px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
.phone-bar{height:2px;background:rgba(255,255,255,.25);margin-top:8px;overflow:hidden}
.phone-bar i{display:block;height:100%;width:40%;background:var(--gold);
  animation:barMove 3s linear infinite}
@keyframes barMove{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){
  .phone,.phone-screen img,.phone-bar i{animation:none}
  .phone-screen img:first-child{opacity:1}
}

@media (max-width:900px){
  .vert{grid-template-columns:1fr}
  .deck{height:clamp(160px,42vw,230px)}
  .deck-card{margin-inline:-34px}
  .archive{height:64vh}
  .arc-hint,.arc-count{left:20px;right:auto;bottom:14px}
  .arc-count{display:none}
}

/* liste des galeries, sous la planche contact */
.gal-links{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--u) var(--gut);margin-top:var(--u3)}
@media (max-width:900px){.gal-links{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.gal-links{grid-template-columns:1fr}}


/* =========================================================================
   22. Signature du photographe
   ========================================================================= */
.sig{
  display:grid;grid-template-columns:230px 1fr;gap:var(--u2);align-items:center;
  margin-top:var(--u4);padding-top:var(--u3);
  border-top:1px solid rgba(255,255,255,.09);
}
.sig-img{margin:0;position:relative;aspect-ratio:2/3;overflow:hidden;
  outline:1px solid rgba(255,255,255,.1);outline-offset:-1px}
.sig-img img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.4) brightness(.92);transition:filter .7s var(--ease),transform .9s var(--ease)}
.sig:hover .sig-img img{filter:none;transform:scale(1.04)}
.sig-txt{max-width:62ch}
.sig-name{
  margin-top:var(--u2);font:600 12px/20px var(--sans);
  letter-spacing:.14em;text-transform:uppercase;color:var(--paper);
}
.sig-name span{display:block;color:var(--faint);letter-spacing:.16em;margin-top:3px}
@media (max-width:820px){
  .sig{grid-template-columns:1fr;gap:var(--u)}
  .sig-img{max-width:200px}
}

/* =========================================================================
   20. Menu telephone et cibles tactiles
   Douze liens en DM Serif 32 px remplissaient l'ecran au pixel pres, sans
   hierarchie et sans defilement possible : sur un telephone court le haut et
   le bas du menu devenaient inatteignables. On garde le plein ecran noir,
   mais on separe les quatre entrees principales des sept univers, chaque
   lien recoit une cible d'au moins 44 px, et le devis devient un bouton.
   Ces regles vivent en fin de fichier pour passer apres les blocs de base.
   ========================================================================= */
@media (max-width:900px){
  .drawer{
    justify-content:flex-start;
    gap:0;
    padding:calc(env(safe-area-inset-top,0px) + 72px) var(--pad)
            calc(env(safe-area-inset-bottom,0px) + 28px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .drawer .close{
    position:fixed;
    top:calc(env(safe-area-inset-top,0px) + 12px);
    right:calc(var(--pad) - 12px);
    padding:14px 12px;
    font:600 11px/1 var(--sans);letter-spacing:.18em;color:var(--mid);
  }
  .drawer a{display:block;font:400 25px/1.15 var(--serif);padding:8px 0}
  /* Cible par classes, plus par rang. Les selecteurs nth-of-type d'origine
     supposaient douze liens : des que des pages hors menu se sont ajoutees,
     le bouton or du devis tombait sur "Studio de shooting" et les nouvelles
     pages restaient en serif 25 px, ce qui rallongeait le menu. */
  .drawer a.u{
    font:500 15px/1.25 var(--sans);color:var(--mid);padding:13px 0;
  }
  .drawer a.u-first{
    margin-top:22px;padding-top:44px;
    border-top:1px solid var(--line);position:relative;
  }
  .drawer a.u-first::before{
    content:"Univers";position:absolute;top:20px;left:0;
    font:600 10px/1 var(--sans);letter-spacing:.24em;
    text-transform:uppercase;color:var(--gold);
  }
  .drawer a.devis{
    margin-top:24px;text-align:center;
    border:1px solid var(--gold);color:var(--gold);
    font:600 12px/1 var(--sans);letter-spacing:.16em;
    text-transform:uppercase;padding:17px 12px;
  }
  /* le selecteur de langue faisait 15 x 11 px, intappable au pouce */
  .lang{gap:2px}
  .lang a,.lang .on{padding:12px 6px}
}

/* La croix de la lightbox faisait 14 px de haut. On elargit la zone tactile
   sans deplacer le texte, en compensant le retrait par la position. */
.lb-x{padding:14px 10px;top:calc(var(--u) - 14px);right:calc(var(--pad) - 10px)}
@media (max-width:900px){.lb-x{right:calc(24px - 10px)}}


/* ================== 18. Pages de service : blocs redactionnels ============ */
.prose{display:grid;grid-template-columns:5fr 6fr;gap:var(--u2);align-items:start}
.prose-body{max-width:62ch}
.prose-body p+p{margin-top:var(--u)}
.ticks{list-style:none;margin-top:var(--u);padding:0;border-top:1px solid var(--line-soft)}
.ticks li{
  position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--line-soft);
  color:var(--mid);font:400 1rem/26px var(--sans);
}
.ticks li::before{content:"";position:absolute;left:0;top:24px;width:12px;height:1px;background:var(--gold)}
@media(max-width:900px){.prose{grid-template-columns:1fr;gap:var(--u)}}

/* ==================== 19. Hero video, page mariage ======================= */
.vhero{
  position:relative;overflow:hidden;background:var(--ink);
  min-height:min(88vh,780px);display:flex;align-items:flex-end;
  padding-block:var(--u4) var(--u3);
}
.vhero-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.12) contrast(1.04) brightness(.92);
}
.vhero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(13,13,13,.86) 0%,rgba(13,13,13,.52) 34%,rgba(13,13,13,.97) 100%),
    linear-gradient(90deg,rgba(13,13,13,.80) 0%,rgba(13,13,13,.32) 55%,rgba(13,13,13,0) 86%);
}
.vhero-inner{position:relative;z-index:2;width:100%}
.vhero-tag{
  margin-top:var(--u2);max-width:56ch;padding-left:14px;
  border-left:1px solid var(--gold);font:400 12px/20px var(--sans);color:var(--faint);
}
.vhero-tag b{
  display:block;color:var(--gold);letter-spacing:.16em;text-transform:uppercase;
  font:600 10px/20px var(--sans);
}
@media(max-width:760px){
  .vhero{
    min-height:auto;padding-block:var(--u3);
    background:#0d0d0d url("../../img/mariage-hero-poster-s.webp") center/cover no-repeat;
  }
  .vhero-bg{display:none}
}
@media(prefers-reduced-motion:reduce){.vhero-bg{display:none}}


/* ------------------- 20. Lecteur video, page videaste ------------------- */
/* Le film est en preload="none" : rien ne se telecharge tant que le visiteur
   n'a pas clique. Le poster tient lieu d'image, le bouton tient lieu d'appel.
   Sur mobile, ou le fond video du hero est desactive, c'est le seul acces au
   film : il doit donc rester lisible et large. */
.player{position:relative;margin:0;max-width:1040px}
.player-v{
  display:block;width:100%;height:auto;aspect-ratio:16/9;
  background:var(--ink);border:1px solid var(--line);object-fit:cover;
}
.player-go{
  position:absolute;left:0;top:0;width:100%;aspect-ratio:16/9;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:0;color:var(--paper);
  background:linear-gradient(180deg,rgba(13,13,13,.12) 0%,rgba(13,13,13,.58) 100%);
  transition:background .4s var(--ease);
}
.player-go[hidden]{display:none}
.player-go:hover{background:linear-gradient(180deg,rgba(13,13,13,.06) 0%,rgba(13,13,13,.5) 100%)}
.player-ico{
  position:relative;width:74px;height:74px;border-radius:50%;
  border:1px solid rgba(255,255,255,.62);background:rgba(13,13,13,.38);
  transition:transform .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease);
}
.player-ico::after{
  content:"";position:absolute;top:50%;left:50%;
  transform:translate(-40%,-50%);
  border-style:solid;border-width:11px 0 11px 19px;
  border-color:transparent transparent transparent var(--paper);
}
.player-go:hover .player-ico{
  transform:scale(1.07);background:var(--gold);border-color:var(--gold-hi);
}
.player-txt{
  font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper);
}
.player-cap{
  margin-top:14px;max-width:62ch;padding-left:14px;border-left:1px solid var(--gold);
  font:400 12px/20px var(--sans);color:var(--faint);
}
@media(max-width:760px){
  .player-ico{width:60px;height:60px}
  .player-cap{margin-top:12px}
}


/* ------------- 21. Photo d'identite et naissance, pages hors menu -------- */
/* Un hero typographique pour l'identite : aucune photographie ne raconte
   mieux un gabarit qu'un gabarit dessine. */
.thero{
  position:relative;background:var(--ink);
  padding-block:var(--u4) var(--u3);border-bottom:1px solid var(--line-soft);
}
.thero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--u2);align-items:center;
}
.spec-fig{margin:0;display:flex;justify-content:flex-end}
.spec-svg{width:100%;max-width:300px;height:auto}
.pricetag{
  margin-top:var(--u2);display:inline-block;padding:7px 15px;
  border:1px solid var(--gold);color:var(--gold-hi);
  font:600 11px/18px var(--sans);letter-spacing:.18em;text-transform:uppercase;
}

/* Deux colonnes : ce dont on n'a pas besoin, ce dont on a besoin. */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--u2)}
.split-col{padding-top:16px;border-top:2px solid var(--line)}
.split-col--no{border-top-color:var(--faint)}
.split-col--yes{border-top-color:var(--gold)}
.deflist{margin-top:var(--u);display:flex;flex-direction:column;gap:16px}
.deflist li{display:flex;flex-direction:column;gap:4px}
.deflist b{font:600 15px/24px var(--sans);color:var(--paper)}
.deflist span{font:400 14px/24px var(--sans);color:var(--mid)}

/* La liste des criteres, en deux colonnes de termes et definitions. */
.spec{margin-top:var(--u2);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--u2)}
.spec-row{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;
  padding-block:13px;border-top:1px solid var(--line-soft);
}
.spec-row dt{
  font:600 10px/20px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
}
.spec-row dd{margin:0;font:400 15px/24px var(--sans);color:var(--mid)}

/* Le tableau des formats. Chiffres alignes, defilement horizontal isole. */
.tablewrap{margin-top:var(--u2);overflow-x:auto}
table.fmt{border-collapse:collapse;width:100%;min-width:560px;font-variant-numeric:tabular-nums}
table.fmt th,table.fmt td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line-soft)}
table.fmt thead th{
  font:600 10px/16px var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);border-bottom:1px solid var(--line);
}
table.fmt td{font:400 15px/24px var(--sans);color:var(--mid)}
table.fmt td:first-child{color:var(--paper)}
.note{
  margin-top:var(--u);max-width:66ch;padding-left:15px;border-left:1px solid var(--gold);
  font:400 13px/23px var(--sans);color:var(--faint);
}
.note b{color:var(--gold);font-weight:600}

/* La planche d'illustration de la page naissance. Jamais une ImageGallery :
   ces images ne sont pas de Chinou Eye, la mention sous la planche le dit. */
.illus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.illus-item{margin:0;overflow:hidden;background:var(--ink-3)}
.illus-item img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;display:block}

@media(max-width:900px){
  .thero-grid{grid-template-columns:1fr;gap:var(--u2)}
  .spec-fig{justify-content:flex-start}
  .spec{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:var(--u2)}
  .illus{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .spec-row{grid-template-columns:1fr;gap:2px}
  .illus{grid-template-columns:1fr}
}
/* La page naissance reprend le hero image, avec son propre repli mobile. */
@media(max-width:760px){
  .vhero--nn{background-image:url("../../img/ill/photographe-nouveau-ne-geneve-hero-s.webp")}
  .vhero--nn .vhero-bg{display:none}
}


/* ------- 22. Menu deroulant, bande de deux photos, liste de prestations --- */
/* Le menu deroulant des services. Il s'ouvre au survol ET au focus clavier,
   sinon il est inaccessible au clavier. Le lien parent reste cliquable et mene
   a la section services de l'accueil : le survol enrichit, il ne remplace pas. */
.nav-drop{position:relative;display:inline-flex;align-items:center}
.mega{
  position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
  z-index:95;min-width:280px;padding:18px 0;margin-top:10px;
  display:grid;grid-template-columns:repeat(2,max-content);
  background:rgba(17,17,17,.97);border:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
/* La zone morte entre le lien et le panneau ferait retomber le survol.
   Ce pseudo-element la comble sans etre visible. */
.mega::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-drop:hover .mega,
.nav-drop:focus-within .mega{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.mega a{
  display:block;padding:9px 22px;
  font:500 12px/18px var(--sans);letter-spacing:.04em;text-transform:none;
  color:var(--mid);white-space:nowrap;
}
.mega a:hover{color:var(--paper);background:var(--line-soft)}

/* Deux photographies cote a cote, avec legende. */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut)}
.duo-fig{margin:0;display:flex;flex-direction:column;gap:12px}
.duo-fig img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;
  background:var(--ink-3);
}
.duo-fig figcaption{
  font:400 13px/22px var(--sans);color:var(--faint);max-width:46ch;
  padding-left:14px;border-left:1px solid var(--gold);
}

/* La liste des prestations du studio. */
.svcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--u2) var(--gut)}
.svc{padding-top:16px;border-top:1px solid var(--line)}
.svc .h3{margin-bottom:8px}
.svc .link{display:inline-block;margin-top:12px}

@media(max-width:1100px){
  .svcs{grid-template-columns:1fr;gap:var(--u) var(--gut)}
}
@media(max-width:860px){
  .duo{grid-template-columns:1fr;gap:var(--u2)}
}
/* Sous 980 px la barre de navigation disparait au profit du tiroir : le menu
   deroulant n'a plus lieu d'etre, et il generait un panneau fantome au toucher. */
@media(max-width:980px){
  .mega{display:none}
  .nav-drop{display:contents}
}