:root{
  --brand:linear-gradient(100deg,#4F46E5 0%,#9333EA 52%,#EC4899 100%);
  --brand-soft:linear-gradient(100deg,rgba(79,70,229,.12),rgba(147,51,234,.12),rgba(236,72,153,.12));

  /* ---- thème clair (par défaut) ---- */
  --bg:#ffffff;
  --card-bg:#ffffff;
  --text:#141414;
  --muted:#6b6b6b;
  --muted2:#8e8e8e;
  --line:#cfcfcf;
  --surface:#f2f2f2;
  --ink:20,20,20;      /* base rgb pour bordures / ombres / voiles sombres */
  --paper:255,255,255; /* base rgb pour le verre dépoli / reflets clairs */
  color-scheme:light;
}

/* ---- police persane : Vazirmatn auto-hébergée (fichiers fournis par le client),
   fiable même en ouverture locale file://, contrairement à Google Fonts qui échoue souvent sans réseau/serveur ---- */
@font-face{
  font-family:'Vazirmatn';font-style:normal;font-weight:100;font-display:swap;
  src:url('fonts/Vazirmatn-Thin.woff2') format('woff2');
}
@font-face{
  font-family:'Vazirmatn';font-style:normal;font-weight:200;font-display:swap;
  src:url('fonts/Vazirmatn-ExtraLight.woff2') format('woff2');
}
@font-face{
  font-family:'Vazirmatn';font-style:normal;font-weight:300;font-display:swap;
  src:url('fonts/Vazirmatn-Light.woff2') format('woff2');
}
@font-face{
  font-family:'Vazirmatn';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/Vazirmatn-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Vazirmatn';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/Vazirmatn-Medium.woff2') format('woff2');
}
@font-face{
  font-family:'Vazirmatn';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/Vazirmatn-SemiBold.woff2') format('woff2');
}
@font-face{
  font-family:'Vazirmatn';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/Vazirmatn-Bold.woff2') format('woff2');
}
@font-face{
  font-family:'Vazirmatn';font-style:normal;font-weight:800;font-display:swap;
  src:url('fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
}
@font-face{
  font-family:'Vazirmatn';font-style:normal;font-weight:900;font-display:swap;
  src:url('fonts/Vazirmatn-Black.woff2') format('woff2');
}
html[lang="fa"], html[lang="fa"] body, html[lang="fa"] *{
  font-family:'Vazirmatn',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif !important;
  /* l'espacement des lettres (letter-spacing) casse la liaison cursive des lettres persanes :
     des boutons comme "شروع" ou les libellés en majuscules espacées deviennent illisibles/déformés.
     On neutralise systématiquement l'espacement et la transformation en majuscules en persan. */
  letter-spacing:normal !important;
  text-transform:none !important;
}
html[data-theme="dark"]{
  --bg:#0b0b0d;
  --card-bg:#18181b;
  --text:#f3f1ec;
  --muted:#a6a6a6;
  --muted2:#8f8f92;
  --line:#3a3a3d;
  --surface:#1c1c1f;
  --ink:255,255,255;
  --paper:22,22,25;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:#0b0b0d;
    --card-bg:#18181b;
    --text:#f3f1ec;
    --muted:#a6a6a6;
    --muted2:#8f8f92;
    --line:#3a3a3d;
    --surface:#1c1c1f;
    --ink:255,255,255;
    --paper:22,22,25;
    color-scheme:dark;
  }
}
html{background:var(--bg);transition:background .35s ease;}
body,#intro,#home,#about,#book{transition:background .35s ease, color .35s ease;}

/* ---- support RTL (persan) ---- */
html[dir="rtl"] body{direction:rtl;text-align:right;}
html[dir="rtl"] .book-head p,html[dir="rtl"] .about-text p,html[dir="rtl"] .qnote,html[dir="rtl"] .faq-a>p{text-align:right;}
html[dir="rtl"] .quote{border-left:0;border-right:2px solid rgba(120,120,120,0.4);padding-left:0;padding-right:18px;}
html[dir="rtl"] .more-item{border-left:0;}
/* la direction de la flèche « retour » est déjà gérée dans le texte traduit lui-même
   (« → بازگشت » en persan) : on ne retourne jamais le bouton en miroir, cela inverserait aussi les lettres. */
html[dir="rtl"] .fields label,html[dir="rtl"] .rmodal-form .sr{align-items:flex-end;}
html[dir="rtl"] .choice{text-align:right;}
html[dir="rtl"] .promo-cta svg,html[dir="rtl"] .rt-open svg{transform:scaleX(-1);}
html[dir="rtl"] .rv-head{text-align:right;}
/* mise à jour finale : la structure globale de l'en-tête reste toujours la même
   (logo à gauche, langue/thème à droite), quelle que soit la langue — seul l'ordre
   des trois liens de page (Travail/À propos/Réserver) suit le sens de lecture persan. */
html[dir="rtl"] nav{direction:ltr;}
html[dir="rtl"] nav .links{direction:rtl;}
/* la galerie orbitale est un composant purement visuel (sans texte) : on la garde toujours en
   direction ltr, sinon le calcul des positions en pourcentage se décale en RTL et laisse un
   bandeau vide sur le côté droit de l'écran (surtout visible sur mobile). */
html[dir="rtl"] #home, html[dir="rtl"] .solar-stage{direction:ltr;}
.grad{
  background:var(--brand);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;background:var(--bg);}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--text);overflow-x:hidden;}
a{color:inherit;}
a,button{-webkit-tap-highlight-color:transparent;}
/* accessibilité clavier : un anneau de focus discret mais visible, cohérent dans tout le site */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid rgba(124,58,237,0.55);outline-offset:2px;border-radius:4px;
}
.g-star:focus-visible,.g-free:focus-visible{outline:2px solid rgba(124,58,237,0.65);outline-offset:3px;}

#intro{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .7s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
#intro.hide{opacity:0;pointer-events:none;}
#intro::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(0,0,0,0.035) 0%, transparent 62%);
  transform:scale(1.15);opacity:0;
  animation:introVignette 3.2s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes introVignette{0%{opacity:0;transform:scale(1.25);}30%{opacity:1;}100%{opacity:1;transform:scale(1);}}

#intro .iname{
  position:relative;font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:-0.01em;font-weight:800;
  color:var(--text);display:inline-flex;align-items:center;justify-content:center;
  min-height:1.3em;
}

/* --- glyphe graphique du "i" : anneau d'ouverture + point + hampe --- */
.ap{position:relative;display:inline-flex;align-items:flex-end;justify-content:center;
  width:.42em;height:1em;margin-right:.16em;flex:0 0 auto;}
.ap-stem{
  position:absolute;left:50%;bottom:0;width:.15em;height:.6em;border-radius:.1em;
  background:var(--brand);transform:translateX(-50%) scaleY(0);transform-origin:bottom center;
  animation:stemGrow .4s cubic-bezier(.16,1,.3,1) .18s forwards;
  transition:opacity .3s ease;
}
.ap-dot{
  position:absolute;left:50%;top:.02em;width:.26em;height:.26em;border-radius:50%;
  background:var(--brand);transform:translate(-50%,0) scale(0);
  animation:dotOpen .42s cubic-bezier(.16,1,.3,1) forwards;
  transition:opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
@keyframes dotOpen{0%{transform:translate(-50%,0) scale(0);}100%{transform:translate(-50%,0) scale(1);}}
@keyframes stemGrow{0%{transform:translateX(-50%) scaleY(0);}100%{transform:translateX(-50%) scaleY(1);}}


/* --- révélation cinétique : chaque segment se dévoile en un seul geste fluide --- */
#introText{display:inline-flex;white-space:pre;}
#introText .grp{
  display:inline-block;white-space:pre;position:relative;
  clip-path:inset(0 100% 0 0);
  transform:skewX(-8deg);
  animation:wipeIn .62s cubic-bezier(.65,0,.35,1) forwards;
  will-change:clip-path,transform;
}
@keyframes wipeIn{to{clip-path:inset(0 0 0 0);transform:skewX(0);}}
#introText .grp::after{
  content:'';position:absolute;top:-6%;bottom:-6%;left:-2%;width:22px;
  background:linear-gradient(90deg,transparent,rgba(var(--paper),.95) 45%,transparent);
  mix-blend-mode:overlay;pointer-events:none;
  animation:sheenMove .62s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes sheenMove{from{left:-2%;}to{left:102%;}}
#introText .grp.out{
  animation:wipeOut .32s cubic-bezier(.5,0,.75,0) forwards;
}
#introText .grp.out::after{display:none;}
@keyframes wipeOut{to{clip-path:inset(0 0 0 100%);opacity:.4;}}

/* --- forme finale : logo de marque --- */
.ap.final .ap-dot,.ap.final .ap-stem{animation:none;}
.ap.final .ap-dot{opacity:0;transform:translate(-50%,0) scale(.7);}
.ap.final .ap-stem{opacity:0;transform:translateX(-50%) scaleY(1);}
.ap-i{
  position:absolute;left:0;bottom:0;font-style:italic;font-weight:800;
  font-size:1.5em;line-height:1;
  background:var(--brand);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  opacity:0;transform:translateY(4px) scale(.9);
  transition:opacity .38s cubic-bezier(.16,1,.3,1) .1s, transform .38s cubic-bezier(.16,1,.3,1) .1s;
}
.ap.final .ap-i{opacity:1;transform:none;}

#intro .iline{width:0;height:1px;background:var(--muted);margin-top:18px;opacity:0;}
#intro .iline.on{animation:drawline .6s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes drawline{0%{width:0;opacity:1;}1%{opacity:1;}100%{width:64px;opacity:1;}}

nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:70;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  width:min(92vw,1180px);padding:11px 22px;
  background:rgba(var(--paper),0.7);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(var(--ink),0.07);border-radius:999px;
  box-shadow:0 10px 30px rgba(var(--ink),0.05);
  transition:background .4s ease, box-shadow .4s ease, border-color .4s ease, top .4s ease;
  opacity:0;animation:navIn .75s cubic-bezier(.2,.8,.2,1) .1s forwards;
}
@keyframes navIn{
  from{opacity:0;transform:translateX(-50%) translateY(-14px) scale(.97);}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}
}
nav.scrolled{
  top:10px;background:rgba(var(--paper),0.92);
  box-shadow:0 14px 36px rgba(var(--ink),0.1);border-color:rgba(var(--ink),0.1);
}
nav .name{font-size:17px;letter-spacing:-0.01em;font-weight:700;text-decoration:none;
  display:inline-flex;align-items:center;line-height:1.15;color:#6f6f6f;}
nav .name .nm{transition:color .35s ease;}
nav .name:hover .nm{color:var(--text);}
/* logotype : "i" en italique, le point devient un objectif au survol */
.bi{position:relative;display:inline-block;font-style:italic;font-weight:800;
  font-size:1.14em;line-height:1;margin-right:0.1em;
  background:var(--brand);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), filter .4s ease;
  filter:grayscale(1);}
nav .name:hover .bi{transform:rotate(-8deg) scale(1.12);filter:grayscale(0);}
nav .links{display:flex;gap:26px;}
nav .links a{position:relative;color:var(--text);font-size:12px;letter-spacing:0.06em;font-weight:400;
  cursor:pointer;opacity:0.55;text-decoration:none;padding-bottom:3px;transition:opacity 0.3s ease;}
nav .links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--text);
  transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
nav .links a:hover{opacity:0.85;}
nav .links a:hover::after{transform:scaleX(1);transform-origin:left;}
nav .links a.on{opacity:1;}
nav .links a.on::after{transform:scaleX(1);}

/* ---------- galerie orbitale (accueil) : les photos tournent comme des astres ---------- */
#home{position:relative;padding-top:96px;background:var(--bg);overflow:hidden;height:100vh;height:100dvh;overscroll-behavior:none;}
.solar-stage{
  position:relative;width:100%;height:calc(100vh - 96px);height:calc(100dvh - 96px);min-height:420px;
  overflow:hidden; /* la scène reste contenue dans un seul écran, sans zone vide accessible au défilement */
  --orbit-scale:1;
  user-select:none;-webkit-user-select:none; /* évite qu'un cliquer-glisser sur le fond vide ne sélectionne du texte / ne "déplace" visuellement la page */
}
.solar-stage::before{
  content:'';position:absolute;left:50%;top:50%;width:120vmin;height:120vmin;
  transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  background:radial-gradient(circle, rgba(var(--ink),0.05) 0%, rgba(var(--ink),0) 62%);
}
.ff-backdrop{
  position:fixed;inset:0;z-index:60;background:rgba(0,0,0,0);
  pointer-events:none;transition:background .45s ease;
}
.solar-stage.field-active .ff-backdrop{background:rgba(8,8,10,0.62);pointer-events:auto;}
.ff-close{
  /* décalé sous le bandeau de navigation : ne se superpose jamais à l'en-tête */
  position:fixed;top:78px;right:18px;z-index:90;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  background:rgba(255,255,255,0.94);color:#141414;font-size:18px;
  box-shadow:0 8px 22px rgba(0,0,0,0.18);
  opacity:0;pointer-events:none;transform:scale(.8);
  transition:opacity .3s ease, transform .3s ease;
}
.solar-stage.field-active .ff-close{opacity:1;pointer-events:auto;transform:scale(1);}
/* le bouton fermer des portraits ne doit jamais apparaître pendant le flux « coulisses »,
   qui a déjà son propre bouton fermer sur la carte */
.solar-stage.bts-flow .ff-close{opacity:0 !important;pointer-events:none !important;}
.solar-stage.field-active ~ .promo{opacity:0;pointer-events:none;transition:opacity .3s ease;}

/* astre central discret, rappel du "soleil" autour duquel tout tourne */
.solar-core{
  position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(var(--ink),0.18);
  box-shadow:0 0 0 1px rgba(var(--ink),0.06), 0 0 40px 14px rgba(var(--ink),0.05);
  z-index:1;pointer-events:none;
  transition:opacity .4s ease;
}
.solar-stage.field-active .solar-core{opacity:0;}

.orbit{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform:rotate(var(--angle0,0deg)); /* repli statique : garantit une matrice de rotation valide
    même quand l'animation est coupée (accessibilité) ou en cours de glisser-déposer */
  animation:orbitSpin var(--dur,30s) linear infinite;
}
@keyframes orbitSpin{
  from{transform:rotate(var(--angle0,0deg));}
  to{transform:rotate(calc(var(--angle0,0deg) + 360deg));}
}
.orbit-anchor{position:absolute;left:calc(var(--radius,140px) * var(--orbit-scale,1));top:0;transform:translate(-50%,-50%);}
.orbit-counter{
  transform:rotate(calc(var(--angle0,0deg) * -1));
  animation:orbitCounter var(--dur,30s) linear infinite;
}
@keyframes orbitCounter{
  from{transform:rotate(calc(var(--angle0,0deg) * -1));}
  to{transform:rotate(calc(var(--angle0,0deg) * -1 - 360deg));}
}

.g-star{
  position:relative;width:var(--w,84px);cursor:grab;z-index:2;display:block;
  transition:width .6s cubic-bezier(.2,.8,.2,1), height .6s cubic-bezier(.2,.8,.2,1),
             transform .6s cubic-bezier(.2,.8,.2,1), opacity .4s ease, filter .4s ease;
  animation:starIn .9s cubic-bezier(.2,.8,.2,1) backwards;
  animation-delay:var(--in-delay,0s);
  touch-action:none;
}
.g-star.dragging{cursor:grabbing;}
.g-star.dragging img{transition:none;}
@keyframes starIn{from{opacity:0;transform:scale(.5);}to{opacity:1;transform:scale(1);}}
.g-star img{
  width:100%;height:auto;display:block;border-radius:5px;
  box-shadow:0 8px 22px rgba(0,0,0,0.22);
  filter:grayscale(1) contrast(1.03);
  transition:filter .5s ease, border-radius .5s ease, box-shadow .5s ease;
}
.g-star:hover img{box-shadow:0 12px 28px rgba(0,0,0,0.3);}
.g-star.active{z-index:80;}
.g-star.active img{filter:none;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,0.4);}
.solar-stage.field-active .g-star:not(.active){opacity:.32;filter:blur(.5px);}
.solar-stage.field-active .orbit:has(.g-star.active){z-index:70;}

@media (min-width:860px){
  #home{padding-top:118px;}
  .solar-stage{height:calc(100vh - 118px);}
}
@media (max-width:640px){
  /* on garde les orbites proches de leur rayon normal (sinon la page devient bien trop
     haute et les photos débordent largement du cadre) ; l'espacement vient surtout du
     fait que les vignettes sont nettement plus petites sur petit écran. */
  .solar-stage{--orbit-scale:1.04;}
  .g-star{width:calc(var(--w,84px) * 0.66);}
  .ff-close{width:44px;height:44px;font-size:20px;}
}
@media (max-width:420px){
  .solar-stage{--orbit-scale:1.04;}
  .g-star{width:calc(var(--w,84px) * 0.58);}
}
@media (prefers-reduced-motion:reduce){
  .orbit, .orbit-counter{animation:none;}
  .promo-card::before{animation:none;}
  .g-free{animation:none;}
}

/* ---------- astres libres : aperçus de coulisses, en couleur, sans orbite fixe ----------
   Contrairement aux portraits (des « planètes » en orbite circulaire autour du centre),
   ce sont des « étoiles » : elles traversent rapidement tout l'écran, à l'horizontale
   comme à la verticale, avant de repartir dans l'autre sens. */
.g-free{
  position:absolute;left:var(--x,50%);top:var(--y,50%);width:var(--w,90px);
  cursor:grab;z-index:4;border-radius:6px;overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,0.24);
  transition:box-shadow .3s ease;
  touch-action:none;
}
.g-free img{width:100%;height:auto;display:block;pointer-events:none;}
.g-free:hover{box-shadow:0 16px 34px rgba(0,0,0,0.32);}
.g-free.dragging{cursor:grabbing;box-shadow:0 20px 46px rgba(0,0,0,0.4);transition:none;}
.g-free.path-a{animation:starCrossA 22s ease-in-out infinite;}
.g-free.path-b{animation:starCrossB 26s ease-in-out infinite;}
/* trajectoire qui change de direction et reste proche du centre de la scène,
   plutôt qu'une ligne droite qui filerait jusque dans les coins */
@keyframes starCrossA{
  0%{transform:translate(0,0) rotate(-2deg);}
  25%{transform:translate(15vw,-9vh) rotate(4deg);}
  50%{transform:translate(6vw,11vh) rotate(-3deg);}
  75%{transform:translate(-12vw,5vh) rotate(3deg);}
  100%{transform:translate(0,0) rotate(-2deg);}
}
@keyframes starCrossB{
  0%{transform:translate(0,0) rotate(2deg);}
  25%{transform:translate(-13vw,10vh) rotate(-4deg);}
  50%{transform:translate(-4vw,-12vh) rotate(3deg);}
  75%{transform:translate(11vw,-5vh) rotate(-3deg);}
  100%{transform:translate(0,0) rotate(2deg);}
}
.solar-stage.field-active .g-free{opacity:.25;filter:blur(.5px);pointer-events:none;}
.g-free.active-hidden{opacity:0;pointer-events:none;}

/* ---------- expansion en 2 temps : l'étoile grandit d'abord (comme un portrait),
   puis la galerie s'ouvre par-dessus, façon carte (même langage que les avis / le parcours) ---------- */
.bts-modal{
  position:fixed;inset:0;z-index:150;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
.bts-modal.open{opacity:1;visibility:visible;}
.bts-modal-backdrop{position:absolute;inset:0;background:rgba(10,10,16,0.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.bts-card{
  position:relative;z-index:1;width:min(760px,100%);max-height:88vh;overflow-y:auto;
  background:var(--card-bg);border-radius:22px;
  box-shadow:0 30px 70px rgba(0,0,0,0.28);
  opacity:0;transform:scale(.94) translateY(10px);
  transition:opacity .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1);
}
.bts-modal.open .bts-card{opacity:1;transform:scale(1) translateY(0);}
.bts-modal-close{
  position:absolute;top:16px;right:18px;z-index:3;width:34px;height:34px;
  background:none;border:0;cursor:pointer;font-size:26px;line-height:1;color:#fff;
  display:flex;align-items:center;justify-content:center;
  text-shadow:0 2px 10px rgba(0,0,0,0.55);opacity:.88;
  transition:transform .2s ease, opacity .2s ease;
}
.bts-modal-close:hover{opacity:1;transform:scale(1.12);}
.bts-hero{position:relative;border-radius:22px 22px 0 0;overflow:hidden;aspect-ratio:16/10;background:var(--surface);cursor:pointer;}
.bts-hero img{width:100%;height:100%;object-fit:cover;display:block;}
.bts-hero-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 85%);}
.bts-hero-text{position:absolute;left:0;right:0;bottom:0;padding:22px 26px;color:#fff;pointer-events:none;}
.bts-tag{
  display:inline-block;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  font-weight:700;color:#fff;background:var(--brand);padding:6px 13px;border-radius:999px;margin-bottom:12px;
}
/* police graphique et distincte pour le titre de la collection, différente du reste du site */
.bts-title{
  font-family:Georgia,'Iowan Old Style','Palatino Linotype',Palatino,serif;
  font-style:italic;font-weight:600;
  font-size:clamp(1.5rem,4vw,2.3rem);letter-spacing:-0.01em;line-height:1.15;margin-bottom:6px;
  text-shadow:0 2px 18px rgba(0,0,0,0.35);
}
.bts-subtitle{font-size:12.5px;color:rgba(255,255,255,0.85);}
.bts-body{padding:22px 24px 26px;}
.bts-actions{display:flex;justify-content:center;gap:10px;margin-top:20px;flex-wrap:wrap;}
.bts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.bts-grid figure{margin:0;border-radius:6px;overflow:hidden;aspect-ratio:3/2;background:var(--surface);cursor:pointer;}
.bts-grid img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.bts-grid figure:hover img{transform:scale(1.06);}
@media (max-width:640px){
  .bts-grid{grid-template-columns:repeat(2,1fr);}
  .bts-body{padding:18px 16px 22px;}
  .bts-hero-text{padding:18px 16px;}
}

/* ---------- visionneuse plein format : ouverte au clic sur une vignette de la galerie ---------- */
.bts-lightbox{
  position:fixed;inset:0;z-index:170;display:flex;align-items:center;justify-content:center;
  padding:24px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
.bts-lightbox.open{opacity:1;visibility:visible;}
.bts-lightbox-backdrop{position:absolute;inset:0;background:rgba(6,6,8,0.86);}
.bts-lightbox img{
  position:relative;z-index:1;max-width:100%;max-height:100%;border-radius:6px;
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
  opacity:0;transform:scale(.96);transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.bts-lightbox.open img{opacity:1;transform:scale(1);}
.bts-lightbox-close{
  position:fixed;top:18px;right:18px;z-index:2;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  background:rgba(255,255,255,0.92);color:#141414;font-size:18px;
}
.bts-lightbox-nav{
  position:fixed;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  background:rgba(255,255,255,0.16);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .2s ease, transform .2s ease;
}
.bts-lightbox-nav:hover{background:rgba(255,255,255,0.28);}
.bts-lightbox-nav.prev{left:16px;} .bts-lightbox-nav.prev:hover{transform:translateY(-50%) translateX(-2px);}
.bts-lightbox-nav.next{right:16px;} .bts-lightbox-nav.next:hover{transform:translateY(-50%) translateX(2px);}
.bts-lightbox-nav svg{width:20px;height:20px;}
.bts-lightbox-nav[hidden]{display:none;}
@media (max-width:600px){
  .bts-lightbox-nav{width:40px;height:40px;}
  .bts-lightbox-nav.prev{left:8px;} .bts-lightbox-nav.next{right:8px;}
}

/* ---------- à propos ---------- */
#about{background:var(--bg);color:var(--text);min-height:100vh;-webkit-overflow-scrolling:touch;}
#about.off{display:none;}
#about .glow{position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 30% 20%, rgba(120,120,120,0.08) 0%, transparent 55%);}
.about-wrap{max-width:960px;margin:0 auto;padding:130px 6vw 100px;
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:60px;align-items:start;position:relative;}
.about-photo{width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--surface);
  position:sticky;top:130px;border:1px solid rgba(var(--ink),0.1);}
.about-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(10%) contrast(1.05);}
.photo-credit{font-size:10px;letter-spacing:0.06em;color:rgba(var(--ink),0.4);
  margin-top:10px;font-style:italic;}
.about-text .eyebrow{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px;}
.quote{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-style:italic;font-weight:500;
  font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.5;color:var(--muted);
  margin-bottom:28px;border-left:2px solid rgba(120,120,120,0.4);padding-left:18px;}
.about-text h1{font-weight:800;letter-spacing:-0.02em;
  font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.18;margin-bottom:30px;
  background:var(--brand);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;}
.about-text p{font-size:14.5px;line-height:1.85;color:rgba(var(--ink),0.72);max-width:52ch;
  margin-bottom:18px;}
.about-list{list-style:none;margin-top:32px;border-top:1px solid rgba(var(--ink),0.12);}
.about-list li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  border-bottom:1px solid rgba(var(--ink),0.08);font-size:12px;letter-spacing:0.04em;
  color:rgba(var(--ink),0.5);}
.about-list b{font-weight:400;color:var(--text);}

/* ---------- pages légales (confidentialité / mentions légales) ---------- */
.legal-wrap{max-width:760px;margin:0 auto;padding:130px 6vw 60px;}
.legal-updated{font-size:12px;color:var(--muted);margin-top:10px;}
.legal-section{margin-top:34px;padding-top:26px;border-top:1px solid rgba(var(--ink),0.1);}
.legal-section:first-of-type{margin-top:40px;}
.legal-section h2{font-size:1.05rem;font-weight:700;letter-spacing:-0.01em;margin-bottom:10px;}
.legal-section p{font-size:14px;line-height:1.85;color:rgba(var(--ink),0.72);max-width:64ch;}

/* ---------- pied de page ---------- */
.site-footer{
  max-width:1240px;margin:0 auto;padding:36px 6vw 110px;
  text-align:center;font-size:11px;color:var(--muted);
}
.site-footer .footer-links{display:flex;gap:18px;justify-content:center;margin-top:10px;flex-wrap:wrap;}
.site-footer .footer-links a{color:var(--muted);text-decoration:none;transition:color .25s ease;}
.site-footer .footer-links a:hover{color:var(--text);}

/* ---------- bandeau confidentialité ---------- */
.cookie-notice{
  position:fixed;left:18px;right:18px;bottom:18px;z-index:85;
  max-width:640px;margin:0 auto;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 18px;border-radius:16px;
  background:rgba(var(--paper),0.92);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(var(--ink),0.08);
  box-shadow:0 20px 50px rgba(0,0,0,0.16);
  transform:translateY(140%);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}
.cookie-notice.show{transform:translateY(0);opacity:1;}
.cookie-notice p{font-size:12px;line-height:1.6;color:rgba(var(--ink),0.75);flex:1 1 260px;margin:0;}
.cookie-notice a{color:var(--text);text-decoration:underline;text-underline-offset:2px;}
.cookie-notice .row{display:flex;gap:10px;flex:0 0 auto;margin-left:auto;}
@media (max-width:520px){
  .cookie-notice{left:12px;right:12px;bottom:12px;padding:14px;}
  .cookie-notice .row{margin-left:0;width:100%;}
  .cookie-notice .row .btn{flex:1;}
}
.gear{margin-top:42px;}
.gear .eyebrow{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;}
.gear .about-list{margin-top:0;}

@media (max-width:760px){
  .about-wrap{grid-template-columns:1fr;padding-top:100px;gap:36px;}
  .about-photo{position:static;}
}
@media (max-width:640px){
  nav{padding:16px 5vw;} nav .name{font-size:12px;}
  nav .links{gap:18px;} nav .links a{font-size:11px;}
  .float-field{min-height:520px;}
  .about-wrap{padding:96px 6vw 70px;} .about-photo{aspect-ratio:4/5;}
  .quote{font-size:1.05rem;padding-left:14px;margin-bottom:22px;}
  .about-text h1{font-size:1.5rem;margin-bottom:22px;}
  .about-text p{font-size:14px;}
}

#book{background:var(--bg);color:var(--text);min-height:100vh;}
#book.off{display:none;}
.book-wrap{max-width:820px;margin:0 auto;padding:130px 6vw 90px;}
.book-head .eyebrow{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px;}
.book-head h1{font-weight:800;letter-spacing:-0.02em;
  font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:1.18;margin-bottom:16px;
  background:var(--brand);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;}
.book-head p{font-size:14.5px;line-height:1.8;color:rgba(var(--ink),0.7);max-width:56ch;}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px;}
.opt{display:flex;flex-direction:column;gap:0;}
.opt .n{font-size:10px;letter-spacing:0.22em;color:var(--muted);text-transform:uppercase;}
.opt h3{font-size:16px;font-weight:500;letter-spacing:0.01em;}
.opt p{font-size:13px;line-height:1.7;color:rgba(var(--ink),0.62);flex:1;}
.opt .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;
  padding:12px 20px;border-radius:999px;cursor:pointer;text-decoration:none;
  border:1px solid rgba(var(--ink),0.14);
  background:rgba(var(--paper),0.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--text);
  transition:background .35s ease, color .35s ease, border-color .35s ease,
             transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.btn::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--brand);opacity:.3;pointer-events:none;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  transition:opacity .35s ease;
}
.btn:hover,.btn:focus-visible,.btn:active{
  background:rgba(var(--ink),0.045);color:var(--text);border-color:transparent;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(var(--ink),0.09);
}
.btn:hover::after,.btn:focus-visible::after,.btn:active::after{opacity:.62;}
.btn.soft{background:rgba(var(--paper),0.32);color:rgba(var(--ink),0.7);border-color:rgba(var(--ink),0.12);}
.btn.soft::after{opacity:.16;}
.btn.soft:hover,.btn.soft:focus-visible,.btn.soft:active{
  background:rgba(var(--ink),0.045);color:var(--text);border-color:transparent;
  transform:translateY(-2px);box-shadow:0 8px 20px rgba(var(--ink),0.07);
}
.btn.soft:hover::after,.btn.soft:focus-visible::after,.btn.soft:active::after{opacity:.4;}
@media (max-width:700px){.opts{grid-template-columns:1fr;}}

#flow{margin-top:52px;border-top:1px solid rgba(var(--ink),0.14);padding-top:34px;}
#flow.hidden{display:none;}
.step-no{font-size:10px;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(var(--ink),0.4);margin-bottom:14px;}
#flow h2{font-size:clamp(1.15rem,2.4vw,1.6rem);font-weight:400;letter-spacing:-0.01em;
  margin-bottom:16px;}
.qnote{font-size:13px;line-height:1.75;color:rgba(var(--ink),0.6);max-width:56ch;
  border-left:2px solid rgba(120,120,120,0.4);padding-left:14px;margin-bottom:24px;}
.choices{display:flex;flex-wrap:wrap;gap:10px;}
.choice{font-size:14px;padding:13px 20px;border:1px solid rgba(var(--ink),0.16);
  background:none;cursor:pointer;text-align:left;
  transition:border-color .25s ease,background .25s ease,color .25s ease;}
.choice:hover{border-color:var(--text);}
.choice.on{background:var(--text);color:var(--bg);border-color:var(--text);}
.trail{font-size:11px;letter-spacing:0.1em;color:rgba(var(--ink),0.45);margin-bottom:22px;}
.trail b{color:var(--muted);font-weight:400;}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px;}
.fields label{display:flex;flex-direction:column;gap:7px;font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;color:rgba(var(--ink),0.5);}
.fields .full{grid-column:1 / -1;}
.fields input,.fields textarea{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:14px;color:var(--text);width:100%;
  border:1px solid rgba(var(--ink),0.16);background:rgba(var(--paper),0.7);
  border-radius:10px;padding:10px 12px;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.fields input:focus,.fields textarea:focus{
  outline:none;border-color:rgba(0,122,255,.5);box-shadow:0 0 0 3px rgba(0,122,255,.1);
}
.fields textarea{resize:vertical;min-height:92px;}
.send{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;align-items:center;}
.send .note{font-size:11px;color:rgba(var(--ink),0.45);letter-spacing:0.04em;}
.back{margin-top:26px;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(var(--ink),0.45);background:none;border:none;cursor:pointer;}
.back:hover{color:var(--text);}
@media (max-width:700px){.fields{grid-template-columns:1fr;}}


/* titre de référencement, discret en bas à gauche */
.seo-title{position:absolute;bottom:34px;left:5vw;z-index:20;max-width:46vw;
  font-size:10px;font-weight:400;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(var(--ink),0.32);line-height:1.6;}
@media (max-width:860px){.seo-title{position:static;padding:0 5vw;max-width:none;
  text-align:center;margin-top:0;display:none;}}

/* indication de navigation */
.hint .m{display:none;}
@media (max-width:860px){
  .hint{position:absolute;top:auto;left:0;right:0;bottom:74px;transform:none;
    writing-mode:horizontal-tb;text-align:center;font-size:10px;letter-spacing:0.2em;}
  .hint .d{display:none;}
  .hint .m{display:inline-block;}
  .hint b{display:inline-block;font-weight:400;animation:updown 1.8s ease-in-out infinite;}
}
@keyframes updown{0%,100%{transform:translateY(2px);}50%{transform:translateY(-3px);}}

/* ---------- bandeau promotionnel ---------- */
.promo{
  position:fixed;right:18px;bottom:18px;z-index:95;
  width:190px;touch-action:none;
  pointer-events:none; /* la carte masquée avant/après son animation ne doit jamais intercepter de clics */
}
.promo.on{pointer-events:auto;}
.promo.dragging{transition:none !important;}
.promo-ring{
  position:absolute;inset:-10px;border-radius:22px;
  background:radial-gradient(circle, rgba(140,140,140,0.4) 0%, rgba(140,140,140,0) 70%);
  opacity:0;pointer-events:none;
}
.promo.on .promo-ring{animation:promoPulse 2.6s ease-out infinite;}
@keyframes promoPulse{
  0%{opacity:.75;transform:scale(.88);}
  70%{opacity:0;transform:scale(1.14);}
  100%{opacity:0;transform:scale(1.14);}
}
.promo-card{
  position:relative;border-radius:16px;overflow:visible;
  box-shadow:0 16px 38px rgba(0,0,0,0.3);
  opacity:0;transform:scale(.75) translateY(26px) rotate(-4deg);
  transition:none;cursor:grab;
}
/* halo dégradé permanent : distingue nettement la carte-offre des vignettes en niveaux de gris
   de la galerie qui l'entoure, en particulier sur mobile où elles peuvent se croiser. */
.promo-card::before{
  content:'';position:absolute;inset:-3px;border-radius:19px;z-index:-1;
  background:var(--brand);
  animation:promoHue 9s linear infinite;
  box-shadow:0 4px 22px rgba(147,51,234,0.35);
}
@keyframes promoHue{0%{filter:hue-rotate(0deg);}100%{filter:hue-rotate(360deg);}}
.promo.dragging .promo-card{cursor:grabbing;}
/* état "soulevé" pendant le déplacement : reste visible et s'incline légèrement */
.promo.dragging .promo-card{
  animation:none !important;
  opacity:1 !important;
  transform:scale(1.06) rotate(-2deg) !important;
  box-shadow:0 26px 60px rgba(0,0,0,0.34) !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
.promo.dragging .promo-ring{animation:none;opacity:.9;transform:scale(1.05);}
.promo.on .promo-card{animation:promoIn .68s cubic-bezier(.2,1.6,.4,1) forwards;}
.promo.closing .promo-card{animation:promoOut .38s cubic-bezier(.5,0,1,.6) forwards;}
@keyframes promoIn{
  0%{opacity:0;transform:scale(.7) translateY(30px) rotate(-5deg);}
  60%{opacity:1;transform:scale(1.045) translateY(-4px) rotate(1deg);}
  100%{opacity:1;transform:scale(1) translateY(0) rotate(0);}
}
@keyframes promoOut{
  0%{opacity:1;transform:scale(1) translateY(0) rotate(0);}
  100%{opacity:0;transform:scale(.75) translateY(18px) rotate(4deg);}
}
.promo-frame{border-radius:16px;overflow:hidden;position:relative;}
.promo-badge{
  position:absolute;top:10px;left:10px;z-index:3;
  display:flex;align-items:center;gap:4px;
  background:#c8102e;color:#fff;border-radius:999px;
  font-size:8.5px;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;
  padding:4px 9px 4px 7px;white-space:nowrap;
  box-shadow:0 3px 10px rgba(200,16,46,0.4);
}
.promo-badge i{width:5px;height:5px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 rgba(var(--paper),0.6);animation:badgeDot 1.6s ease-in-out infinite;flex:0 0 auto;}
@keyframes badgeDot{0%,100%{opacity:1;}50%{opacity:.35;}}
.promo-drag{
  position:absolute;top:8px;right:36px;z-index:4;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  color:rgba(var(--paper),0.85);cursor:grab;
}
.promo-drag svg{width:14px;height:14px;}
.promo-img{position:relative;aspect-ratio:4/5;}
.promo-img img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none;}
.promo-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.22) 38%, rgba(0,0,0,0.9) 100%);
}
.promo-x{
  position:absolute;top:7px;right:7px;z-index:4;
  width:22px;height:22px;border-radius:50%;
  background:rgba(0,0,0,0.35);color:#fff;border:0;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;cursor:pointer;
  transition:background .25s ease,transform .25s ease;
}
.promo-x:hover{background:rgba(0,0,0,0.6);transform:rotate(90deg);}
.promo-txt{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:10px 11px 11px;color:#fff;
}
.promo-pct{
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-style:italic;font-weight:500;
  font-size:26px;line-height:1;color:#d8d8d8;margin-bottom:3px;
  text-shadow:0 2px 14px rgba(0,0,0,0.28);
}
.promo-line{font-size:10.5px;line-height:1.35;letter-spacing:0.01em;margin-bottom:9px;color:rgba(255,255,255,0.92);}
.promo-cta{
  display:flex;align-items:center;justify-content:center;gap:5px;
  background:#cfcfcf;color:#1a1408;text-decoration:none;
  font-size:10px;font-weight:600;letter-spacing:0.03em;
  padding:8px 10px;border-radius:9px;margin-bottom:7px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s ease;
}
.promo-cta:hover{background:#f0d488;transform:translateY(-1px);}
.promo-cta svg{width:11px;height:11px;flex:0 0 auto;}
.promo-mail{
  display:block;text-align:center;font-size:8.5px;letter-spacing:0.06em;text-transform:uppercase;
  color:rgba(255,255,255,0.65);text-decoration:none;
  transition:opacity .25s ease;
}
.promo-mail:hover{opacity:0.7;}
@media (max-width:640px){
  .promo{width:150px;right:12px;bottom:88px;}
  .promo.on .promo-card{animation:promoIn .68s cubic-bezier(.2,1.6,.4,1) forwards, promoFloat 3.4s ease-in-out .7s infinite;}
  .promo.dragging .promo-card{transform:scale(1.05) rotate(-2deg) !important;}
  .promo-pct{font-size:22px;}
  .promo-line{font-size:9.5px;}
  .promo-cta{font-size:9.5px;padding:7px 8px;}
  .promo-mail{font-size:7.5px;}
  .promo-txt{padding:9px 9px 10px;}
  .promo-badge{font-size:7.5px;padding:3.5px 8px 3.5px 6px;top:8px;left:8px;}
}
@keyframes promoFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-7px);}
}
@media (prefers-reduced-motion:reduce){
  .promo.on .promo-card{animation:none;opacity:1;transform:none;}
  .promo.on .promo-ring{animation:none;opacity:0;}
}

/* ---------- révélation au défilement ---------- */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);}
.rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none;}}

/* ---------- bloc photographie de rue ---------- */
.street-box{
  margin-top:34px;padding:26px 26px 28px;border-radius:16px;
  background:linear-gradient(155deg, rgba(120,120,120,0.06), rgba(120,120,120,0.015));
  border:1px solid rgba(120,120,120,0.18);
}
.street-head{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px 16px;margin-bottom:14px;}
.street-head .eyebrow{margin-bottom:0;}
.street-follow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;letter-spacing:0.05em;color:var(--muted);text-decoration:none;
  border-bottom:1px solid rgba(138,106,36,0.35);padding-bottom:2px;
  transition:opacity .25s ease,border-color .25s ease;
}
.street-follow svg{width:12px;height:12px;transition:transform .3s cubic-bezier(.2,.8,.2,1);}
.street-follow:hover{opacity:0.7;border-color:transparent;}
.street-follow:hover svg{transform:translate(2px,-2px);}
.street-text{font-size:14px;line-height:1.75;color:rgba(var(--ink),0.72);max-width:56ch;margin-bottom:18px;}
.street-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.street-cell{aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:var(--surface);}
.street-cell img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);}
.street-cell:hover img{transform:scale(1.07);}
@media (max-width:640px){
  .street-box{padding:20px 18px 22px;margin-top:26px;}
  .street-grid{grid-template-columns:repeat(2,1fr);gap:7px;}
}

/* ---------- animation des étapes du formulaire ---------- */
#flow{animation:flowIn .5s cubic-bezier(.2,.8,.2,1);}
@keyframes flowIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.choices .choice{opacity:0;animation:choiceIn .45s cubic-bezier(.2,.8,.2,1) forwards;}
.choices .choice:nth-child(1){animation-delay:.03s;}
.choices .choice:nth-child(2){animation-delay:.08s;}
.choices .choice:nth-child(3){animation-delay:.13s;}
.choices .choice:nth-child(4){animation-delay:.18s;}
.choices .choice:nth-child(5){animation-delay:.23s;}
.choices .choice:nth-child(6){animation-delay:.28s;}
@keyframes choiceIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  #flow{animation:none;}
  .choices .choice{opacity:1;animation:none;}
}

/* ---------- titre de référencement conservé mais invisible ---------- */
.seo-title{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* indication de défilement retirée sur toutes les tailles */
.hint{display:none !important;}

/* ---------- pastille réseaux sociaux (coin bas gauche) ---------- */
.dock{position:fixed;left:18px;bottom:18px;z-index:92;}
.dock-toggle{
  position:relative;z-index:2;
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(var(--ink),0.1);
  background:rgba(var(--paper),0.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 8px 24px rgba(var(--ink),0.12);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.dock-toggle:hover{box-shadow:0 12px 30px rgba(var(--ink),0.18);}
.dock.open .dock-toggle{transform:rotate(135deg);}
.dock-toggle span{position:absolute;background:var(--text);border-radius:2px;transition:background .3s ease;}
.dock-toggle span:nth-child(1){width:16px;height:1.6px;}
.dock-toggle span:nth-child(2){width:1.6px;height:16px;}
.dock.open .dock-toggle span{background:var(--text);}
.dock-items{
  position:absolute;left:0;bottom:56px;
  display:flex;flex-direction:column;gap:9px;
  pointer-events:none;
}
.dock.open .dock-items{pointer-events:auto;}
.dock-items a{
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(var(--ink),0.09);
  background:rgba(var(--paper),0.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 6px 18px rgba(var(--ink),0.1);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  opacity:0;transform:translateY(14px) scale(.6);pointer-events:none;
  transition:opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.dock.open .dock-items a{opacity:1;transform:none;pointer-events:auto;}
.dock.open .dock-items a:nth-child(1){transition-delay:.03s;}
.dock.open .dock-items a:nth-child(2){transition-delay:.07s;}
.dock.open .dock-items a:nth-child(3){transition-delay:.11s;}
.dock.open .dock-items a:nth-child(4){transition-delay:.15s;}
.dock.open .dock-items a:nth-child(5){transition-delay:.19s;}
.dock.open .dock-items a:nth-child(6){transition-delay:.23s;}
.dock-items svg{width:19px;height:19px;
  fill:none;stroke:var(--muted2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);}
.dock-items a:hover,.dock-items a:focus-visible,.dock-items a.tapped{
  box-shadow:0 10px 24px rgba(var(--ink),0.18);
}
.dock-items a:hover svg,.dock-items a:focus-visible svg,.dock-items a.tapped svg{transform:scale(1.12);}
/* couleurs de marque au survol / au toucher */
.dock-items a[data-net="instagram"]:hover svg,.dock-items a[data-net="instagram"].tapped svg{stroke:#dc2743;}
.dock-items a[data-net="youtube"]:hover svg,.dock-items a[data-net="youtube"].tapped svg{stroke:#ff0000;}
.dock-items a[data-net="tiktok"]:hover svg,.dock-items a[data-net="tiktok"].tapped svg{stroke:#00c7be;}
.dock-items a[data-net="pexels"]:hover svg,.dock-items a[data-net="pexels"].tapped svg{stroke:#05a081;}
.dock-items a[data-net="linkedin"]:hover svg,.dock-items a[data-net="linkedin"].tapped svg{stroke:#0a66c2;}
.dock-items a[data-net="mail"]:hover svg,.dock-items a[data-net="mail"].tapped svg{stroke:#af52de;}
.dock-label{
  position:absolute;left:56px;top:50%;transform:translateY(-50%) translateX(-6px);
  white-space:nowrap;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--text);background:rgba(var(--paper),0.92);border-radius:999px;
  padding:4px 10px;box-shadow:0 4px 12px rgba(var(--ink),0.1);
  opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;
}
.dock-items a:hover .dock-label{opacity:1;transform:translateY(-50%) translateX(0);}
@media (max-width:640px){
  .dock{left:12px;bottom:12px;}
  .dock-toggle{width:44px;height:44px;}
  .dock-items{bottom:52px;gap:8px;}
  .dock-items a{width:40px;height:40px;}
  .dock-items svg{width:17px;height:17px;}
  .dock-label{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .dock-toggle,.dock-items a,.dock-items svg{transition:none;}
}

/* ---------- cartes métier (à propos) ---------- */
.craft{margin-top:38px;}
.craft .eyebrow{margin-bottom:14px;}
.craft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.craft-card{
  position:relative;overflow:hidden;
  padding:22px 20px 20px;border-radius:16px;
  border:1px solid rgba(var(--ink),0.09);background:var(--card-bg);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .5s ease;
}
.craft-card::before{
  content:'';position:absolute;inset:0;opacity:0;
  background:var(--brand-soft);transition:opacity .5s ease;
}
.craft-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(var(--ink),0.1);border-color:transparent;}
.craft-card:hover::before{opacity:1;}
.craft-card > *{position:relative;z-index:1;}
.craft-ico{height:38px;margin-bottom:14px;color:var(--text);}
.craft-ico svg{height:100%;width:auto;overflow:visible;}
.craft-card h3{font-size:15px;font-weight:700;letter-spacing:-0.01em;margin-bottom:6px;}
.craft-card p{font-size:12.5px;line-height:1.65;color:rgba(var(--ink),0.62);margin:0;}
.craft-card p + p{margin-top:10px;}
.craft-card .craft-intro{margin-bottom:14px;}
.craft-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.craft-list li{
  position:relative;padding-left:16px;font-size:12.5px;line-height:1.5;
  color:rgba(var(--ink),0.72);
}
.craft-list li::before{
  content:'';position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;
  background:var(--brand);
}
html[dir="rtl"] .craft-list li{padding-left:0;padding-right:16px;}
html[dir="rtl"] .craft-list li::before{left:auto;right:0;}
/* appareil photo : l'obturateur se déclenche */
.craft-card[data-k="photo"]:hover .lens{animation:lensPulse 1.1s ease-in-out infinite;}
.craft-card[data-k="photo"]:hover .iris{animation:irisShut 1.1s ease-in-out infinite;transform-origin:20px 19.5px;}
.craft-card[data-k="photo"]:hover .flash{animation:flashBlink .9s ease-in-out infinite;}
@keyframes lensPulse{0%,100%{opacity:1;}50%{opacity:.55;}}
@keyframes irisShut{0%,100%{transform:scale(1);}45%{transform:scale(.35);}}
@keyframes flashBlink{0%,100%{opacity:.25;}50%{opacity:1;}}
/* caméra : les bobines tournent, le viseur respire */
.craft-card[data-k="video"]:hover .reel1{animation:reelSpin 1.6s linear infinite;transform-origin:10.5px 17.5px;}
.craft-card[data-k="video"]:hover .reel2{animation:reelSpin 1.6s linear infinite reverse;transform-origin:18.5px 17.5px;}
.craft-card[data-k="video"]:hover .wedge{animation:wedgeNudge 1.6s ease-in-out infinite;}
@keyframes reelSpin{to{transform:rotate(360deg);}}
@keyframes wedgeNudge{0%,100%{transform:translateX(0);}50%{transform:translateX(2.4px);}}
@media (max-width:760px){
  .craft-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .craft-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .craft-card:hover{transform:none;}
  .craft-card *{animation:none !important;}
}

/* ---------- bloc rue, version repensée ---------- */
.street-box{position:relative;overflow:hidden;}
.street-box::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--brand);
}
.street-grid{gap:8px;}
.street-cell{position:relative;}
.street-cell::after{
  content:'';position:absolute;inset:0;
  background:rgba(var(--ink),0.32);opacity:0;transition:opacity .45s ease;
}
.street-cell img{transition:transform .7s cubic-bezier(.2,.8,.2,1);}
.street-cell:hover img{transform:scale(1.06);}
.street-cell:hover::after{opacity:0;}

/* ---------- contact direct (page réserver) ---------- */
.sr{display:block;}
.sr > span{display:none;}
.direct{
  margin-top:34px;padding:26px;border-radius:18px;
  border:1px solid rgba(var(--ink),0.09);
  background:linear-gradient(160deg,rgba(79,70,229,.05),rgba(147,51,234,.05),rgba(236,72,153,.04));
  position:relative;overflow:hidden;
}
.direct::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--brand);}
.direct-in{display:grid;grid-template-columns:1fr 1.15fr;gap:22px 30px;align-items:start;}
.direct h2{font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:800;letter-spacing:-0.02em;margin-bottom:8px;
  background:var(--brand);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;}
.direct p{font-size:13px;line-height:1.7;color:rgba(var(--ink),0.65);margin:0;max-width:44ch;}
.direct-form{display:flex;flex-direction:column;gap:10px;}
.direct-form input,.direct-form textarea{
  font-family:inherit;font-size:14px;color:var(--text);width:100%;
  border:1px solid rgba(var(--ink),0.14);background:rgba(var(--paper),0.85);
  border-radius:10px;padding:11px 13px;transition:border-color .25s ease, box-shadow .25s ease;
}
.direct-form input:focus,.direct-form textarea:focus{
  outline:none;border-color:rgba(0,122,255,0.5);box-shadow:0 0 0 3px rgba(0,122,255,0.1);
}
.direct-form textarea{resize:vertical;min-height:84px;}
.direct-send{align-self:flex-start;border-radius:10px;}
.direct-note{font-size:11.5px;min-height:1em;margin:0;color:rgba(var(--ink),0.55);}
.direct-note.err{color:#c8102e;}
.direct-note.ok{color:#05a081;}
@media (max-width:760px){
  .direct{padding:20px 18px;}
  .direct-in{grid-template-columns:1fr;gap:16px;}
}

/* finitions du bloc contact direct */
.direct .eyebrow{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;}
.direct-form .sr{font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(var(--ink),0.5);display:flex;flex-direction:column;gap:6px;}

/* ================= verre dépoli : socle commun ================= */
/* fond entièrement blanc ; le verre garde son contour dégradé sans halo de couleur */
.glass{
  position:relative;
  background:rgba(var(--paper),0.52);
  -webkit-backdrop-filter:blur(22px) saturate(1.7);
  backdrop-filter:blur(22px) saturate(1.7);
  border-radius:20px;
  box-shadow:0 10px 34px rgba(var(--ink),0.07), inset 0 1px 0 rgba(var(--paper),0.65);
  border:0;
}
/* liseré dégradé façon verre */
.glass::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--brand);opacity:.34;pointer-events:none;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  transition:opacity .45s ease;
}
.glass:hover::after{opacity:.6;}

/* ================= page à propos, mise en page repensée ================= */
#about{background:var(--bg);}
#about .glow{display:none;}
.ab-wrap{max-width:1000px;margin:0 auto;padding:132px 5vw 36px;
  display:flex;flex-direction:column;gap:clamp(18px,2.6vw,28px);}
.ab-hero{text-align:center;}
.ab-hero .eyebrow{margin-bottom:12px;}
.ab-hero h1{
  font-weight:800;letter-spacing:-0.02em;
  font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.15;margin-bottom:22px;
  background:var(--brand);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.ab-quote{
  position:relative;max-width:640px;margin:0 auto;padding:26px 26px 22px;
}
.ab-quote blockquote{
  font-size:clamp(1.05rem,2.1vw,1.4rem);line-height:1.5;font-weight:500;
  letter-spacing:-0.01em;color:var(--text);margin:0;
}
.ab-quote blockquote::before,.ab-quote blockquote::after{
  content:'«';font-size:1.1em;color:var(--muted);margin-right:.18em;
}
.ab-quote blockquote::after{content:'»';margin:0 0 0 .18em;}
.ab-quote figcaption{
  margin-top:12px;font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(var(--ink),0.45);
}
.ab-intro{display:grid;grid-template-columns:0.82fr 1.18fr;gap:16px;align-items:start;}
.ab-portrait{overflow:hidden;padding:0;aspect-ratio:3/4;position:sticky;top:130px;}
.ab-portrait img{width:100%;height:100%;object-fit:cover;display:block;border-radius:20px;}
.ab-bio{padding:26px;}
.ab-bio p{font-size:14px;line-height:1.8;color:rgba(var(--ink),0.74);margin:0 0 14px;}
.ab-facts{list-style:none;margin:18px 0 0;padding:0;}
.ab-facts li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-top:1px solid rgba(var(--ink),0.08);font-size:12.5px;color:rgba(var(--ink),0.5);}
.ab-facts b{font-weight:500;color:var(--text);text-align:right;}
.ab-facts a{text-decoration:none;border-bottom:1px solid rgba(var(--ink),0.2);}
.ab-gear{padding:24px 26px;}
.ab-gear .eyebrow{margin-bottom:6px;}
.craft{margin-top:0;}
.craft .eyebrow{margin-bottom:12px;}
.craft-card{border:0;background:rgba(var(--paper),0.52);}
.craft-card::before{display:none;}
.street-box{margin-top:0;padding:26px;border:0;background:rgba(var(--paper),0.52);}
.street-box::before{display:none;}
.direct{margin-top:0;border:0;background:rgba(var(--paper),0.52);}
.direct::before{display:none;}
.direct-lead{font-size:13px;line-height:1.7;color:rgba(var(--ink),0.65);margin:0;max-width:42ch;}
@media (max-width:820px){
  .ab-intro{grid-template-columns:1fr;}
  .ab-portrait{aspect-ratio:3/4;max-width:280px;max-height:50vh;margin:0 auto;position:static;}
}
@media (max-width:640px){
  .ab-wrap{padding:108px 5vw 30px;}
  .ab-bio,.ab-gear,.street-box,.direct{padding:20px 18px;}
  .ab-quote{padding:22px 18px 18px;}
  .ab-portrait{max-width:220px;max-height:44vh;}
}

/* ---------- page réserver : cartes en verre ---------- */
#book{background:var(--bg);}
.opt{border:0;background:rgba(var(--paper),0.52);padding:26px 24px 24px;}
.choice{border-radius:11px;background:rgba(var(--paper),0.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.choice.on{background:var(--text);}
#flow{border-top:1px solid rgba(var(--ink),0.1);}

/* ---------- icônes pleines (logos officiels) ---------- */
.dock-items svg.solid{fill:var(--muted2);stroke:none;transition:fill .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);}
.dock-items a:hover svg.solid,.dock-items a:focus-visible svg.solid,.dock-items a.tapped svg.solid{transform:scale(1.12);}
.dock-items a[data-net="tiktok"]:hover svg.solid,.dock-items a[data-net="tiktok"].tapped svg.solid{fill:#000;}
.dock-items a[data-net="linkedin"]:hover svg.solid,.dock-items a[data-net="linkedin"].tapped svg.solid{fill:#0a66c2;}
.dock-items a[data-net="pexels"]:hover svg.solid,.dock-items a[data-net="pexels"].tapped svg.solid{fill:#05a081;}
.dock-items a[data-net="px500"]:hover svg.solid,.dock-items a[data-net="px500"].tapped svg.solid{fill:#0099e5;}
.dock-items a[data-net="pinterest"]:hover svg.solid,.dock-items a[data-net="pinterest"].tapped svg.solid{fill:#e60023;}

/* ---------- pastille réseaux : verre + déplaçable ---------- */
.dock{touch-action:none;}
.dock.dragging .dock-toggle,.dock.dragging .dock-items a{transition:none;}
.dock-toggle{
  background:rgba(var(--paper),0.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
  border-color:rgba(var(--paper),0.7);
  box-shadow:0 10px 30px rgba(var(--ink),0.12), inset 0 1px 0 rgba(var(--paper),0.7);
  cursor:grab;
}
.dock.dragging .dock-toggle{cursor:grabbing;}
.dock-items a{
  background:rgba(var(--paper),0.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
  border-color:rgba(var(--paper),0.7);
  box-shadow:0 8px 22px rgba(var(--ink),0.1), inset 0 1px 0 rgba(var(--paper),0.7);
}
/* si la pastille est déplacée vers le bas de l'écran, la liste s'ouvre vers le haut (défaut) */
.dock.flip .dock-items{bottom:auto;top:56px;flex-direction:column-reverse;}

/* ================= en-tête : bouton rond sur mobile ================= */
.nav-fab{display:none;}
@media (max-width:760px){
  nav{
    position:fixed;top:10px;left:12px;right:12px;transform:none;
    width:auto;
    flex-direction:row;align-items:center;justify-content:space-between;gap:10px;
    padding:9px 8px 9px 16px;border-radius:20px;overflow:visible;
    background:rgba(var(--paper),0.7);
    -webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
    border:1px solid rgba(var(--paper),0.7);
    box-shadow:0 10px 30px rgba(var(--ink),0.12);
    animation:none;opacity:1;
  }
  nav .name{display:inline-flex;font-size:15px;}
  .nav-fab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    width:40px;height:40px;border:0;background:none;cursor:pointer;padding:0;flex:0 0 auto;
  }
  .nav-fab span{width:16px;height:1.7px;background:var(--text);border-radius:2px;
    transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease;}
  nav.open .nav-fab span:nth-child(1){transform:translateY(5.3px) rotate(45deg);}
  nav.open .nav-fab span:nth-child(2){opacity:0;}
  nav.open .nav-fab span:nth-child(3){transform:translateY(-5.3px) rotate(-45deg);}
  /* le logotype reste toujours visible ; seul le menu des liens se déploie */
  nav .links{
    position:absolute;top:calc(100% + 8px);left:0;right:0;
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    background:rgba(var(--paper),0.85);
    -webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
    border:1px solid rgba(var(--paper),0.7);border-radius:16px;
    box-shadow:0 14px 34px rgba(var(--ink),0.14);
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;padding:0 16px;
    transition:max-height .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease, padding .4s ease;
  }
  nav.open .links{max-height:320px;opacity:1;pointer-events:auto;padding:12px 16px;}
  nav .links a{font-size:14px;opacity:0.65;padding:6px 0;}
  nav .links a.on{opacity:1;}
}

/* ---------- badges typographiques (500px, Pexels) ---------- */
.dock-mono{
  font-size:11px;font-weight:800;letter-spacing:-0.02em;color:var(--muted2);
  transition:color .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
.dock-mono-p{font-size:14px;}
.dock-items a:hover .dock-mono,.dock-items a.tapped .dock-mono{transform:scale(1.12);}
.dock-items a[data-net="px500"]:hover .dock-mono,.dock-items a[data-net="px500"].tapped .dock-mono{color:#0099e5;}
.dock-items a[data-net="pexels"]:hover .dock-mono-p,.dock-items a[data-net="pexels"].tapped .dock-mono-p{color:#05a081;}

/* ---------- "en savoir plus" (à propos) ---------- */
.more{margin:6px 0 14px;}
.more-btn{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;
  color:var(--text);background:none;border:1px solid rgba(var(--ink),0.16);
  border-radius:999px;padding:8px 14px;cursor:pointer;
  transition:background .3s ease, border-color .3s ease;
}
.more-btn:hover{border-color:var(--text);}
.more-btn svg{width:13px;height:13px;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.more[data-open="1"] .more-btn svg{transform:rotate(180deg);}
.more[data-open="1"] .more-btn{background:var(--text);color:var(--bg);border-color:var(--text);}
.more-panel{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
.more[data-open="1"] .more-panel{grid-template-rows:1fr;opacity:1;}
.more-in{overflow:hidden;}
.more-item{padding:14px 0;border-top:1px solid rgba(var(--ink),0.09);}
.more-item:first-child{border-top:none;}
.more-tag{
  display:inline-block;font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--muted);background:rgba(var(--ink),0.06);border-radius:999px;
  padding:3px 9px;margin-bottom:7px;
}
.more-item p{font-size:13px;line-height:1.7;color:rgba(var(--ink),0.72);margin:0;}
.more-item b{color:var(--text);font-weight:600;}
.more-item a{color:var(--text);text-decoration:none;border-bottom:1px solid rgba(var(--ink),0.25);
  transition:opacity .2s ease;white-space:nowrap;}
.more-item a:hover{opacity:0.6;}

/* ---------- étape "date précise" et code promo dans le parcours ---------- */
.datepick{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px;}
.datepick input[type="date"]{
  font-family:inherit;font-size:14px;color:var(--text);
  border:1px solid rgba(var(--ink),0.18);background:rgba(var(--paper),0.7);
  border-radius:10px;padding:10px 12px;
}
.promo-chip{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:16px;padding:10px 12px;border-radius:11px;
  background:rgba(var(--ink),0.04);border:1px dashed rgba(var(--ink),0.2);
  font-size:12px;
}
.promo-chip.on{background:rgba(5,160,129,0.08);border:1px solid rgba(5,160,129,0.3);color:#05a081;}
.promo-chip input{
  font-family:inherit;font-size:12.5px;border:1px solid rgba(var(--ink),0.18);
  border-radius:8px;padding:7px 10px;background:var(--card-bg);flex:1;min-width:140px;
}
.choice.priced{display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
.choice.priced .was{font-size:11.5px;color:rgba(var(--ink),0.4);text-decoration:line-through;}
.choice.priced .now{font-size:14px;font-weight:700;color:#05a081;}

/* ---------- page réserver : cartes d'option repensées ---------- */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px;}
.opt{
  padding:0;overflow:hidden;position:relative;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
}
.opt:hover{transform:translateY(-4px);}
.opt-top{padding:24px 24px 0;}
.opt-ico{
  width:46px;height:46px;border-radius:13px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--ink),0.05);color:var(--text);
}
.opt-ico svg{width:22px;height:22px;}
.opt .n{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);}
.opt h2{font-size:18px;font-weight:700;letter-spacing:-0.01em;margin:6px 0 8px;}
.opt-top p{font-size:13px;line-height:1.65;color:rgba(var(--ink),0.62);margin:0 0 20px;}
.opt .row{padding:0 24px 24px;}
.opt-1 .opt-ico{background:linear-gradient(135deg,rgba(79,70,229,.12),rgba(147,51,234,.12));}
.opt-2 .opt-ico{background:linear-gradient(135deg,rgba(147,51,234,.12),rgba(236,72,153,.12));}
@media (max-width:700px){.opts{grid-template-columns:1fr;}}

/* ---------- bandeau de confiance (page réserver) ---------- */
.trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;}
.trust span{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;letter-spacing:0.02em;color:rgba(var(--ink),0.62);font-weight:500;
}
.trust svg{width:15px;height:15px;flex:0 0 auto;color:var(--muted);}

/* ---------- avis clients (page réserver) ---------- */
.reviews{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin-top:26px;
}
.review{padding:20px 20px 18px;}
.review p{font-size:12.5px;line-height:1.65;color:rgba(var(--ink),0.72);margin:0 0 14px;
  font-style:italic;}
.review-who{display:flex;align-items:center;gap:10px;}
.review-who i{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-style:normal;color:#fff;
  background:var(--brand);
}
.review-who div{display:flex;flex-direction:column;min-width:0;}
.review-who b{font-size:12px;font-weight:600;}
.review-who span{font-size:10.5px;color:rgba(var(--ink),0.5);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:900px){.reviews{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.reviews{grid-template-columns:1fr;}}

/* ---------- FAQ (page réserver) ---------- */
.faq{margin-top:56px;padding-top:8px;border-top:1px solid rgba(var(--ink),0.1);}
.faq .eyebrow{margin:26px 0 6px;}
.faq-item{border-bottom:1px solid rgba(var(--ink),0.1);}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 2px;background:none;border:0;cursor:pointer;text-align:left;
  font-size:14.5px;font-weight:600;color:var(--text);
}
.faq-q svg{width:16px;height:16px;flex:0 0 auto;color:rgba(var(--ink),0.5);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.faq-item[data-open="1"] .faq-q svg{transform:rotate(180deg);}
.faq-a{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease;}
.faq-item[data-open="1"] .faq-a{grid-template-rows:1fr;opacity:1;}
.faq-a > p{overflow:hidden;margin:0 2px 16px;font-size:13px;line-height:1.7;
  color:rgba(var(--ink),0.62);max-width:60ch;}

/* ---------- aperçu compact des avis (page réserver) ---------- */
.reviews-teaser{margin-top:26px;}
.rt-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.rt-cards .review{padding:18px 18px 16px;}
.rt-cards .review p{font-size:12px;line-height:1.6;margin:0 0 12px;
  font-style:italic;color:rgba(var(--ink),0.7);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.rt-open{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;margin-top:12px;padding:13px 18px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(var(--ink),0.14);background:rgba(var(--paper),0.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;color:var(--text);
  transition:background .3s ease,transform .3s cubic-bezier(.2,.8,.2,1);
}
.rt-open svg{width:15px;height:15px;flex:0 0 auto;}
.rt-open:hover{background:rgba(var(--ink),0.045);transform:translateY(-2px);}
@media (max-width:900px){.rt-cards{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.rt-cards{grid-template-columns:1fr;}}

/* ---------- modale "avis clients" : lecture + dépôt d'un avis ---------- */
.rmodal{
  position:fixed;inset:0;z-index:150;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
.rmodal.open{opacity:1;visibility:visible;}
.rmodal-backdrop{position:absolute;inset:0;background:rgba(10,10,16,0.44);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.rmodal-card{
  position:relative;z-index:1;width:min(680px,100%);max-height:86vh;overflow-y:auto;
  background:var(--card-bg);border-radius:22px;
  box-shadow:0 30px 70px rgba(0,0,0,0.24);
  padding:26px 24px 30px;
  opacity:0;transform:scale(.94) translateY(10px);
  transition:opacity .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1);
}
.rmodal.open .rmodal-card{opacity:1;transform:scale(1) translateY(0);}
.rmodal-close{
  position:absolute;top:14px;right:16px;width:32px;height:32px;border-radius:50%;
  background:rgba(var(--ink),0.06);border:0;cursor:pointer;font-size:16px;color:var(--text);
  display:flex;align-items:center;justify-content:center;transition:background .25s ease;
}
.rmodal-close:hover{background:rgba(var(--ink),0.12);}
.rmodal-title{
  font-size:clamp(1.3rem,3vw,1.7rem);font-weight:800;letter-spacing:-0.02em;margin:2px 0 18px;
  background:var(--brand);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.rmodal-list{display:flex;flex-direction:column;gap:0;margin-bottom:30px;}
.rmodal-list .review{border-radius:0;border-top:1px solid rgba(var(--ink),0.09);
  padding:16px 2px;background:none;}
.rmodal-list .review:first-child{border-top:0;padding-top:0;}
.rmodal-list .review p{font-size:13px;line-height:1.65;margin:0 0 10px;
  font-style:italic;color:rgba(var(--ink),0.74);}
.review-pending{
  display:inline-block;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;
  color:#0a66c2;background:rgba(0,122,255,0.08);border-radius:999px;
  padding:2px 8px;margin-left:8px;vertical-align:middle;
}
.rmodal-form{border-top:1px solid rgba(var(--ink),0.1);padding-top:22px;}
.rmodal-form-lead{font-size:12px;line-height:1.6;color:rgba(var(--ink),0.55);margin:0 0 16px;max-width:52ch;}
.rform-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.rmodal-form .sr{display:flex;flex-direction:column;gap:6px;
  font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(var(--ink),0.5);}
.rmodal-form .sr.full{grid-column:1 / -1;}
.rmodal-form input,.rmodal-form textarea{
  font-family:inherit;font-size:14px;color:var(--text);width:100%;
  border:1px solid rgba(var(--ink),0.16);background:rgba(var(--paper),0.7);
  border-radius:10px;padding:10px 12px;transition:border-color .25s ease,box-shadow .25s ease;
}
.rmodal-form input:focus,.rmodal-form textarea:focus{
  outline:none;border-color:rgba(0,122,255,.5);box-shadow:0 0 0 3px rgba(0,122,255,.1);
}
.rmodal-form textarea{min-height:80px;resize:vertical;margin-bottom:10px;}
.rv-note{font-size:11.5px;min-height:1em;margin:10px 0 0;color:rgba(var(--ink),0.55);}
.rv-note.err{color:#c8102e;}
.rv-note.ok{color:#05a081;}

/* ---------- section avis (page à propos) ---------- */
.reviews-section{padding:26px;}
.reviews-section .eyebrow{margin-bottom:14px;}
.reviews-section .rt-cards{margin-bottom:14px;}
@media (max-width:640px){.reviews-section{padding:20px 18px;}}

/* ---------- liste des avis en accordéon (dans la modale) ---------- */
.rmodal-hint{font-size:11px;letter-spacing:0.04em;color:rgba(var(--ink),0.45);margin:0 0 18px;}
.rmodal-list{display:flex;flex-direction:column;margin-bottom:28px;}
.rv-item{border-top:1px solid rgba(var(--ink),0.09);
  opacity:0;transform:translateY(10px);
  animation:rvItemIn .45s cubic-bezier(.2,.8,.2,1) forwards;
}
.rv-item:first-child{border-top:0;}
.rmodal.open .rv-item:nth-child(1){animation-delay:.05s;}
.rmodal.open .rv-item:nth-child(2){animation-delay:.10s;}
.rmodal.open .rv-item:nth-child(3){animation-delay:.15s;}
.rmodal.open .rv-item:nth-child(4){animation-delay:.20s;}
.rmodal.open .rv-item:nth-child(5){animation-delay:.25s;}
.rmodal.open .rv-item:nth-child(6){animation-delay:.30s;}
.rmodal.open .rv-item:nth-child(n+7){animation-delay:.34s;}
@keyframes rvItemIn{to{opacity:1;transform:none;}}
.rv-head{
  width:100%;display:flex;align-items:center;gap:11px;
  padding:10px 2px;background:none;border:0;cursor:pointer;text-align:left;
}
.rv-head i{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-style:normal;color:#fff;background:var(--brand);
}
.rv-info{flex:1 1 auto;min-width:0;}
.rv-head b{display:block;font-size:13.5px;font-weight:600;}
.rv-head span{display:block;font-size:11px;color:rgba(var(--ink),0.5);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rv-chevron{width:15px;height:15px;flex:0 0 auto;color:rgba(var(--ink),0.4);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.rv-item[data-open="1"] .rv-chevron{transform:rotate(180deg);}
.rv-body{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease;}
.rv-item[data-open="1"] .rv-body{grid-template-rows:1fr;opacity:1;}
.rv-body > p{overflow:hidden;margin:0 2px 14px 41px;font-size:13px;line-height:1.65;
  font-style:italic;color:rgba(var(--ink),0.72);max-width:56ch;}
html[dir="rtl"] .rv-body > p{margin:0 41px 14px 2px;}
@media (prefers-reduced-motion:reduce){
  .rv-item{opacity:1;transform:none;animation:none;}
}

/* ================= réglages : thème & langue ================= */
.nav-tools{display:flex;align-items:center;gap:8px;}
.theme-btn{
  position:relative;width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(var(--ink),0.05);border:1px solid rgba(var(--ink),0.1);color:var(--text);
  transition:background .3s ease,border-color .3s ease,transform .3s ease;
}
.theme-btn:hover{background:rgba(var(--ink),0.1);transform:translateY(-1px);}
.theme-btn svg{width:16px;height:16px;}
.theme-btn .i-sun{display:none;}
html[data-theme="dark"] .theme-btn .i-moon{display:none;}
html[data-theme="dark"] .theme-btn .i-sun{display:block;}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]):not([data-theme="dark"]) .theme-btn .i-moon{display:none;}
  html:not([data-theme="light"]):not([data-theme="dark"]) .theme-btn .i-sun{display:block;}
}

.lang-switch{
  display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  background:rgba(var(--ink),0.05);border:1px solid rgba(var(--ink),0.1);
}
.lang-switch button{
  border:0;background:none;cursor:pointer;font-size:10.5px;font-weight:700;letter-spacing:0.03em;
  color:var(--muted);padding:5px 9px;border-radius:999px;transition:background .3s ease,color .3s ease;
}
.lang-switch button.on{background:var(--text);color:var(--bg);}
.lang-switch button:hover:not(.on){color:var(--text);}

/* copie mobile des réglages, affichée dans le menu déroulant (bouton "menu") plutôt que dans la barre */
.nav-tools-mobile{display:none;}
@media (max-width:760px){
  .nav-tools-desktop{display:none;}
  .nav-tools-mobile{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:100%;margin-top:8px;padding-top:14px;border-top:1px solid rgba(var(--ink),0.1);
  }
}


/* ================= pastille réseaux : rappel animé ================= */
@keyframes dockShake{
  0%,100%{transform:rotate(0);}
  4%{transform:rotate(-13deg);} 8%{transform:rotate(11deg);}
  12%{transform:rotate(-9deg);} 16%{transform:rotate(7deg);}
  20%{transform:rotate(-4deg);} 24%{transform:rotate(0);}
}
.dock.buzz .dock-toggle{animation:dockShake 1.7s ease-in-out infinite;}
.dock-toggle .dot{
  position:absolute;top:-2px;right:-2px;width:11px;height:11px;border-radius:50%;
  background:#c8102e;border:2px solid var(--bg);opacity:0;transform:scale(0);
  transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1);
}
.dock.buzz .dock-toggle .dot{opacity:1;transform:scale(1);animation:dotPulse 1.7s ease-in-out infinite;}
@keyframes dotPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.25);}}
@media (prefers-reduced-motion:reduce){
  .dock.buzz .dock-toggle{animation:none;}
  .dock.buzz .dock-toggle .dot{animation:none;}
}

/* ================= info-bulle tarifs ================= */
.trust span.hasinfo{cursor:pointer;position:relative;}
.trust span.hasinfo:hover,.trust span.hasinfo:focus-visible{color:var(--text);}
.price-pop{
  position:fixed;inset:0;z-index:160;display:flex;align-items:flex-end;justify-content:center;
  padding:0;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
.price-pop.open{opacity:1;visibility:visible;}
.price-pop-backdrop{position:absolute;inset:0;background:rgba(10,10,16,0.44);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.price-pop-card{
  position:relative;z-index:1;width:min(560px,100%);max-height:80vh;overflow-y:auto;
  background:var(--card-bg);border-radius:22px 22px 0 0;
  box-shadow:0 -20px 60px rgba(0,0,0,0.24);padding:24px 22px calc(28px + env(safe-area-inset-bottom));
  transform:translateY(16px);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s ease;
}
.price-pop.open .price-pop-card{transform:translateY(0);opacity:1;}
@media (min-width:640px){
  .price-pop{align-items:center;padding:20px;}
  .price-pop-card{border-radius:22px;transform:scale(.94) translateY(10px);}
  .price-pop.open .price-pop-card{transform:scale(1) translateY(0);}
}
.price-pop-close{
  position:absolute;top:14px;right:16px;width:32px;height:32px;border-radius:50%;
  background:rgba(var(--ink),0.06);border:0;cursor:pointer;font-size:16px;color:var(--text);
  display:flex;align-items:center;justify-content:center;
}
html[dir="rtl"] .price-pop-close{right:auto;left:16px;}
.price-pop-title{font-size:clamp(1.15rem,3vw,1.4rem);font-weight:800;letter-spacing:-0.02em;margin:2px 0 16px;}
.price-tiers{display:flex;flex-direction:column;gap:0;}
.price-tier{padding:16px 2px;border-top:1px solid rgba(var(--ink),0.09);}
.price-tier:first-child{border-top:0;padding-top:0;}
.price-tier-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:6px;}
.price-tier .pt-name{font-size:15px;font-weight:700;letter-spacing:-0.01em;}
.price-tier .pt-from{font-size:12.5px;font-weight:700;color:#05a081;flex:0 0 auto;white-space:nowrap;}
.price-tier .pt-desc{font-size:12.5px;line-height:1.7;color:rgba(var(--ink),0.65);text-align:left;}
html[dir="rtl"] .price-tier .pt-desc{text-align:right;}

/* petites descriptions d'aide sous chaque tranche de budget dans le parcours */
.choice .hint-line{display:block;font-size:11px;font-weight:400;color:rgba(var(--ink),0.5);margin-top:3px;}
.choice.priced .hint-line{margin-top:1px;}
.price-info-link{display:inline-flex;margin:14px 0 26px;}

/* ================= parcours "être guidé" en plein écran ================= */
.flow-modal{
  position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;
  padding:16px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
.flow-modal.open{opacity:1;visibility:visible;}
.flow-modal-backdrop{position:absolute;inset:0;background:rgba(10,10,16,0.44);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.flow-modal-card{
  position:relative;z-index:1;width:min(640px,100%);max-height:88vh;overflow-y:auto;
  background:var(--card-bg);border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,0.24);
  padding:26px 24px calc(30px + env(safe-area-inset-bottom));
  opacity:0;transform:scale(.94) translateY(10px);
  transition:opacity .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1);
}
.flow-modal.open .flow-modal-card{opacity:1;transform:scale(1) translateY(0);}
.flow-modal-close{
  position:absolute;top:14px;right:16px;width:32px;height:32px;border-radius:50%;
  background:rgba(var(--ink),0.06);border:0;cursor:pointer;font-size:16px;color:var(--text);
  display:flex;align-items:center;justify-content:center;z-index:2;
}
html[dir="rtl"] .flow-modal-close{right:auto;left:16px;}
#flow{margin-top:0;border-top:0;padding-top:6px;}
@media (max-width:640px){
  .flow-modal{padding:0;align-items:flex-end;}
  .flow-modal-card{max-height:92vh;border-radius:20px 20px 0 0;width:100%;padding:22px 18px calc(26px + env(safe-area-inset-bottom));}
}

/* ================= raffinements mobiles généraux ================= */
@media (max-width:640px){
  .btn,.choice,.faq-q,.rt-open,.more-btn{min-height:44px;}
  .theme-btn,.nav-fab,.dock-toggle{min-width:40px;min-height:40px;}
  .fields input,.fields textarea,.rmodal-form input,.rmodal-form textarea,.promo-chip input,#pickDate{font-size:16px;}
  .rform-row{grid-template-columns:1fr;}
  .opts{gap:12px;}
  .dock{bottom:calc(18px + env(safe-area-inset-bottom));}
  .rmodal-card,.flow-modal-card,.price-pop-card{padding-left:18px;padding-right:18px;}
}