/* ============================================================
   VYRION — design system

   Deux thèmes : sombre (par défaut) et clair.
   - Dark  : fond #080808, texte blanc
   - Light : fond #FFFFFF, texte #080808
   - Accents brand identiques dans les deux thèmes
   - Logo swap automatique via CSS (deux <img>, visibilité contrôlée)

   Hiérarchie typographique (charte graphique) :
   - Titres principaux   : Unbounded 900
   - Sous-titres         : Unbounded 800
   - Wordmark / labels   : Rajdhani 700
   - Corps / interface   : Rajdhani 500–600
   ============================================================ */

/* ---------- Variables — thème sombre (défaut) ---------- */
:root {
  /* Surfaces */
  --bg:         #080808;
  --bg-elev:    #0f0f0f;
  --bg-card:    #161616;
  --bg-deep:    #000000;

  /* Texte */
  --text:        #ffffff;
  --text-inv:    #080808;
  --muted:       rgba(255,255,255,.55);
  --dim:         rgba(255,255,255,.28);

  /* Lignes et overlays */
  --line:        rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.18);
  --hover-bg:    rgba(255,255,255,.05);
  --nav-bg:      rgba(8,8,8,.72);
  --selection-bg:   var(--blue);
  --selection-text: #000;

  /* Accents brand */
  --blue:   #00AAFF;
  --purple: #7C4DFF;
  --pink:   #FF2D78;
  --green:  #39FF14;
  --yellow: #FFE600;

  /* Accents sémantiques (warning, erreur, etc.) */
  --warn:   #FFB347;
  --warn-2: #FF6B35;
  --danger: #FF4D4D;

  /* Typographie */
  --font-d: 'Unbounded', sans-serif;
  --font-b: 'Rajdhani', sans-serif;

  /* Animation */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t:    .4s var(--ease);

  /* Espacements responsives — escaliers décroissants pour mobile */
  --pad-x:    2rem;   /* container horizontal */
  --pad-x-sm: 1rem;   /* container mobile */
  --sec-y:    7rem;   /* section padding vertical */
  --sec-y-md: 9rem;   /* section padding desktop */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* Tap target minimum (Apple HIG / Material) */
  --tap: 44px;
}

/* ---------- Variables — thème clair ---------- */
[data-theme="light"] {
  --bg:         #ffffff;
  --bg-elev:    #f6f6f6;
  --bg-card:    #ececec;
  --bg-deep:    #080808;

  --text:     #080808;
  --text-inv: #ffffff;
  --muted:    rgba(8,8,8,.6);
  --dim:      rgba(8,8,8,.32);

  --line:        rgba(8,8,8,.10);
  --line-strong: rgba(8,8,8,.22);
  --hover-bg:    rgba(0,0,0,.04);
  --nav-bg:      rgba(255,255,255,.78);
  --selection-text: #fff;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-b);
  font-weight:600;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  transition:background-color .35s ease,color .35s ease;
}
img,svg{max-width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer;border:0;background:0;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--selection-bg);color:var(--selection-text)}

/* ---------- Typographie (charte) ---------- */
h1,h2{font-family:var(--font-d);font-weight:900;line-height:.95;letter-spacing:-.02em;word-break:break-word;overflow-wrap:break-word}
h3,h4,h5,h6{font-family:var(--font-d);font-weight:800;line-height:1.1;letter-spacing:-.01em;word-break:break-word;overflow-wrap:break-word}
h1{font-size:clamp(2.1rem,9vw,6rem);line-height:.92}
h2{font-size:clamp(1.75rem,5.2vw,4rem)}
h3{font-size:clamp(1.25rem,2.4vw,2rem)}
.eyebrow{
  font-family:var(--font-b);font-weight:700;
  font-size:.8rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--muted);
}
em{font-style:italic;color:var(--muted)}
p{font-weight:500}

/* Force l'attribut HTML [hidden] à gagner contre toute règle display:flex/block
 * plus spécifique. Sans ce filet de sécurité global, certains éléments (comme
 * les .service-desc) pourraient rester affichés malgré [hidden] si un futur
 * override CSS ou une spécificité plus élevée les ciblait. La règle équivalente
 * pour la modale projet existe déjà plus bas (ligne ~1688). */
[hidden]{display:none !important}

/* ---------- Layout ---------- */
.container{
  max-width:1400px;
  margin:0 auto;
  padding-top:0;
  padding-bottom:0;
  padding-right:max(var(--pad-x-sm), var(--safe-right));
  padding-left:max(var(--pad-x-sm), var(--safe-left));
  position:relative;
  width:100%;
}
@media(min-width:640px){
  .container{padding-left:1.25rem;padding-right:1.25rem}
}
@media(min-width:880px){
  .container{padding-left:1.75rem;padding-right:1.75rem}
}
@media(min-width:1100px){
  .container{padding-left:2rem;padding-right:2rem}
}
main{flex:1;overflow-x:hidden}
section{padding:4rem 0;position:relative}
@media(min-width:640px){section{padding:5rem 0}}
@media(min-width:880px){section{padding:6.5rem 0}}
@media(min-width:1100px){section{padding:7rem 0}}
@media(min-width:1400px){section{padding:9rem 0}}

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--blue),var(--purple),var(--pink),var(--green),var(--yellow));
  transition:width .05s linear;
}

/* ---------- Navigation ----------
 * IMPORTANT : backdrop-filter est placé sur ::before (et NON sur .nav),
 * sinon il crée un "containing block" pour les descendants position:fixed
 * (le menu mobile). Conséquence : le menu mobile était confiné aux ~56px
 * de hauteur du header au lieu de couvrir tout le viewport, ce qui rendait
 * la navigation impossible sur mobile. Le ::before est un FRÈRE du menu,
 * pas un ANCÊTRE, donc il ne confine pas le menu.
 */
.nav{
  position:sticky;top:0;z-index:50;
  padding-top:var(--safe-top);
  background-color:transparent;
  border-bottom:1px solid var(--line);
  transition:border-color .35s ease;
}
.nav::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--nav-bg);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
          backdrop-filter:blur(14px) saturate(140%);
  z-index:-1;
  pointer-events:none;
  transition:background-color .35s ease;
}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding-top:.8rem;
  padding-bottom:.8rem;
  padding-right:max(var(--pad-x-sm), var(--safe-right));
  padding-left:max(var(--pad-x-sm), var(--safe-left));
  max-width:1400px;margin:0 auto;
  min-height:calc(56px + var(--safe-top));
}
@media(min-width:640px){
  .nav__inner{gap:1.5rem;padding-left:1.25rem;padding-right:1.25rem;min-height:calc(64px + var(--safe-top))}
}
@media(min-width:1100px){
  .nav__inner{gap:2rem;padding:1.2rem 2rem}
}
.nav__logo{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--font-b);font-weight:700;font-size:1rem;
  letter-spacing:.18em;color:var(--text);
  min-height:var(--tap);
  flex-shrink:1;
}
@media(min-width:880px){
  .nav__logo{font-size:1.05rem;gap:.7rem}
}
.nav__logo-mark{height:26px;width:auto;display:block;flex-shrink:0}
@media(min-width:880px){.nav__logo-mark{height:30px}}
.nav__logo > span{white-space:nowrap}
.nav__logo-mark--light{display:none}
[data-theme="light"] .nav__logo-mark--dark{display:none}
[data-theme="light"] .nav__logo-mark--light{display:block}

.nav__menu{display:flex;gap:2.2rem;align-items:center}
.nav__link{
  font-family:var(--font-b);font-weight:700;
  font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);transition:color var(--t);position:relative;
  min-height:var(--tap);display:inline-flex;align-items:center;
}
.nav__link:hover,.nav__link.is-active{color:var(--text)}
.nav__link.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--blue);
}

/* Bouton bascule de thème */
.nav__theme{
  display:flex;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);min-width:var(--tap);min-height:var(--tap);
  border:1px solid var(--line);color:var(--text);
  transition:all var(--t);margin-left:.4rem;flex-shrink:0;
}
.nav__theme:hover{border-color:var(--text);color:var(--blue);background:var(--hover-bg)}
.nav__theme-svg{width:18px;height:18px}
.nav__theme-moon{display:none}
[data-theme="light"] .nav__theme-sun{display:none}
[data-theme="light"] .nav__theme-moon{display:inline}

/* Burger mobile */
.nav__burger{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:var(--tap);height:var(--tap);min-width:var(--tap);min-height:var(--tap);
  padding:8px;z-index:51;margin-left:.2rem;flex-shrink:0;
}
.nav__burger span{
  display:block;width:24px;height:2px;background:var(--text);
  transition:transform var(--t),opacity var(--t);
}
@media(min-width:880px){
  .nav__burger{display:none}
}

/* Menu mobile (off-canvas plein écran) */
@media(max-width:880px){
  .nav__menu{
    position:fixed;
    inset:0;
    padding-top:calc(80px + var(--safe-top));
    padding-bottom:calc(2rem + var(--safe-bottom));
    padding-left:max(1.25rem, var(--safe-left));
    padding-right:max(1.25rem, var(--safe-right));
    background:var(--bg);
    flex-direction:column;justify-content:flex-start;align-items:stretch;gap:.5rem;
    transform:translateX(100%);
    transition:transform .45s var(--ease);
    z-index:49;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav__menu.is-open{transform:translateX(0)}
  .nav__menu .nav__link{
    font-family:var(--font-d);font-weight:900;
    font-size:clamp(1.6rem, 8vw, 2.2rem);
    letter-spacing:0;
    padding:1.1rem 0;
    border-bottom:1px solid var(--line);
    width:100%;
    justify-content:flex-start;
  }
  .nav__menu .nav__link.is-active::after{display:none}
  .nav__menu .nav__link.is-active{color:var(--blue)}
  .nav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__burger.is-open span:nth-child(2){opacity:0}
  .nav__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
/* En dessous de 480px (très petits téléphones) on resserre encore */
@media(max-width:479px){
  .nav__menu{padding-top:calc(72px + var(--safe-top))}
  .nav__menu .nav__link{padding:.95rem 0}
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.5rem;min-height:var(--tap);
  font-family:var(--font-b);font-weight:700;font-size:.88rem;
  letter-spacing:.1em;text-transform:uppercase;
  transition:all var(--t);
  border:1px solid transparent;position:relative;overflow:hidden;
  white-space:nowrap;
}
@media(min-width:880px){
  .btn{padding:1rem 1.8rem;font-size:.92rem;letter-spacing:.12em;gap:.6rem}
}
.btn__arrow{transition:transform var(--t)}
.btn:hover .btn__arrow{transform:translateX(5px)}
.btn--primary{background:var(--blue);color:var(--text-inv);border-color:var(--blue)}
.btn--primary:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn--ghost{color:var(--text);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--text);background:var(--hover-bg)}
.btn--large{padding:1.15rem 2rem;font-size:.95rem}
@media(min-width:880px){
  .btn--large{padding:1.3rem 2.4rem;font-size:1rem}
}
/* Sur tactile : seul l'état actif déclenche la transformation */
@media(hover:none){
  .btn:hover .btn__arrow{transform:none}
  .btn:active .btn__arrow{transform:translateX(5px)}
  .btn--primary:hover{background:var(--blue);color:var(--text-inv);border-color:var(--blue)}
  .btn--ghost:hover{border-color:var(--line);background:transparent}
}

/* ---------- Hero ---------- */
.hero{
  min-height:78vh;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  padding:calc(7rem + var(--safe-top)) 0 4rem;
}
@media(min-width:640px){
  .hero{min-height:88vh;padding:8rem 0 6rem}
}
@media(min-width:1100px){
  .hero{min-height:92vh;padding:8rem 0 6rem}
}
/* Paysage mobile : éviter que le hero devienne ridiculement haut */
@media(max-height:500px) and (orientation:landscape){
  .hero{min-height:100vh;padding:calc(6rem + var(--safe-top)) 0 3rem}
}
.hero__bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero__bg-mark{
  --py:0px;
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,calc(-50% + var(--py)));
  width:min(95vw,1000px);
  aspect-ratio:390/470;
  -webkit-mask:url('/images/logo-mask.svg') no-repeat center / contain;
          mask:url('/images/logo-mask.svg') no-repeat center / contain;
  background:var(--text);
  opacity:.06;
  will-change:transform;
}
.hero__bg-glow{
  position:absolute;top:30%;left:50%;transform:translateX(-50%);
  width:60vw;height:60vw;max-width:900px;max-height:900px;
  background:radial-gradient(circle,rgba(0,170,255,.14),transparent 60%);
  filter:blur(60px);
}
.hero__bg-glow--pink{
  background:radial-gradient(circle,rgba(255,45,120,.10),transparent 60%);
  top:auto;bottom:10%;left:auto;right:10%;transform:none;
}
.hero__content{
  position:relative;z-index:1;text-align:center;width:100%;
}
.hero__title{margin:1.25rem 0 1.5rem;display:flex;flex-direction:column;gap:.05em}
@media(min-width:880px){
  .hero__title{margin:1.5rem 0 2rem}
}
.hero__title-line{display:block}
.hero__title-line:nth-child(1){color:var(--text)}
.hero__title-line:nth-child(2){color:var(--muted)}
.hero__dot{color:var(--blue)}
.hero__subtitle{
  font-family:var(--font-b);font-weight:500;
  font-size:clamp(.98rem,1.6vw,1.25rem);color:var(--muted);
  max-width:620px;margin:0 auto 2rem;padding:0 .25rem;
}
@media(min-width:880px){
  .hero__subtitle{margin-bottom:2.5rem}
}
.hero__cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
@media(min-width:640px){
  .hero__cta{gap:1rem}
}
@media(max-width:479px){
  .hero__cta .btn{padding:.85rem 1.2rem;font-size:.82rem}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{justify-content:center}
}

/* ---------- Bande de couleurs ---------- */
.color-band{
  height:6px;
  background:linear-gradient(90deg,
    var(--blue) 0 20%,var(--purple) 20% 40%,var(--pink) 40% 60%,
    var(--green) 60% 80%,var(--yellow) 80%);
}
@media(min-width:880px){
  .color-band{height:8px}
}

/* ---------- Section heads ---------- */
.section-head{margin-bottom:2.5rem;display:flex;flex-direction:column;gap:1rem;max-width:900px}
@media(min-width:880px){.section-head{margin-bottom:4rem}}
.section-head .section-title{margin-top:.5rem}

/* ---------- Positioning ---------- */
.positioning{padding:4rem 0}
@media(min-width:880px){.positioning{padding:6rem 0}}
@media(min-width:1100px){.positioning{padding:8rem 0}}
.positioning__title{margin:1.25rem 0;font-size:clamp(1.75rem,4.5vw,3.5rem)}
.positioning__text{
  font-family:var(--font-b);font-weight:500;
  font-size:clamp(1.05rem,1.55vw,1.35rem);color:var(--muted);
  max-width:720px;line-height:1.5;
}

/* ---------- Services grid (home) ---------- */
.services-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
@media(min-width:560px){
  .services-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem}
}
@media(min-width:1024px){
  .services-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}
}
.service-card{
  position:relative;padding:2rem 1.75rem 2rem;
  background:var(--bg-elev);border:1px solid var(--line);
  transition:all var(--t);overflow:hidden;display:block;
  min-height:auto;
}
@media(min-width:880px){
  .service-card{padding:2.5rem 2rem 2.2rem}
}
.service-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--card-accent,var(--blue));
  transform:scaleX(0);transform-origin:left;transition:transform var(--t);
}
.service-card:hover{
  background:var(--bg-card);border-color:var(--card-accent,var(--blue));
  transform:translateY(-4px);
}
.service-card:hover::before{transform:scaleX(1)}
/* Tactile : pas de translation au hover, fond et bordure changent à l'appui */
@media(hover:none){
  .service-card:hover{transform:none}
  .service-card:active{
    background:var(--bg-card);border-color:var(--card-accent,var(--blue));
  }
  .service-card:active::before{transform:scaleX(1)}
}
.service-card__num{
  display:block;font-family:var(--font-d);font-size:2.2rem;font-weight:900;
  color:var(--card-accent,var(--blue));margin-bottom:1rem;
}
.service-card__title{margin-bottom:.5rem}
.service-card__desc{
  font-family:var(--font-b);font-weight:500;
  color:var(--muted);font-size:1rem;margin-bottom:1.5rem;
}
.service-card__arrow{
  position:absolute;bottom:1.5rem;right:1.5rem;
  font-size:1.4rem;color:var(--card-accent,var(--blue));
  transition:transform var(--t);
}
.service-card:hover .service-card__arrow{transform:translate(4px,-4px)}

/* ---------- Video placeholder ---------- */
.video-block{padding:3rem 0}
@media(min-width:880px){.video-block{padding:6rem 0}}
.video-frame{
  position:relative;aspect-ratio:16/9;
  background:var(--bg-deep);border:1px solid var(--line);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.video-frame::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(0,170,255,.10),transparent 70%);
}
.video-frame__inner{text-align:center;position:relative;z-index:1}
.video-frame__play{
  width:80px;height:80px;border:2px solid var(--text);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1.5rem;color:var(--text);transition:all var(--t);
}
.video-frame:hover .video-frame__play{background:var(--text);color:var(--bg)}
.video-frame__play svg{width:30px;height:30px;margin-left:4px}
.video-frame__text{
  font-family:var(--font-d);font-size:clamp(1.5rem,3vw,2.5rem);
  font-weight:900;margin-top:1rem;
}

/* ---------- CTA block ---------- */
.cta-block{padding:4rem 0}
@media(min-width:880px){.cta-block{padding:6rem 0}}
@media(min-width:1100px){.cta-block{padding:8rem 0}}
.cta-block__inner{text-align:center}
.cta-block__title{
  margin-bottom:1.75rem;
  font-size:clamp(1.6rem,5vw,3.5rem);
}
@media(min-width:880px){.cta-block__title{margin-bottom:2.5rem}}

/* ---------- Reveal ----------
   Stratégie "fail-safe" : .reveal reste VISIBLE par défaut.
   JS ajoute la classe .reveal--armed uniquement APRÈS avoir armé l'observer,
   ce qui rend l'élément opacity:0 et déclenche l'animation au scroll.
   Si JS ne charge pas (panne CDN, erreur, etc.), tout reste lisible. */
.reveal{
  /* visible par défaut (pas de cache si JS échoue) */
  opacity:1;transform:translateY(0);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
/* Quand JS confirme que l'IntersectionObserver est prêt, il arme l'animation */
.reveal.reveal--armed{
  opacity:0;transform:translateY(40px);
}
.reveal.reveal--armed.is-visible{
  opacity:1;transform:translateY(0);
}
.reveal--d1{transition-delay:.1s}
.reveal--d2{transition-delay:.2s}
.reveal--d3{transition-delay:.3s}
.reveal--d4{transition-delay:.4s}

/* Accessibilité : pas d'animation si l'utilisateur préfère une motion réduite */
@media(prefers-reduced-motion:reduce){
  .reveal,
  .reveal.reveal--armed{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
}

/* ---------- Filters ---------- */
.filter-bar{
  display:flex;gap:.5rem;flex-wrap:wrap;
  margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line);
}
@media(min-width:880px){
  .filter-bar{margin-bottom:3rem;padding-bottom:2rem;gap:.6rem}
}
.filter-bar.filters--shifted{margin-top:2rem}
@media(max-width:767px){
  .filter-bar.filters--shifted{margin-top:1.25rem}
}
.filter-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1rem;min-height:var(--tap);
  background:transparent;
  border:1px solid var(--line);color:var(--muted);
  cursor:pointer;
  font-family:var(--font-b);font-weight:600;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;
  transition:all var(--t);
  white-space:nowrap;
}
@media(min-width:880px){
  .filter-btn{padding:.65rem 1.1rem;min-height:auto;font-size:.85rem;letter-spacing:.08em}
}
.filter-btn:hover{color:var(--text);border-color:var(--text)}
.filter-btn__num{
  font-family:var(--font-d);font-weight:800;font-size:.65rem;
  letter-spacing:.05em;opacity:.5;
  transition:all var(--t);
}
@media(min-width:880px){.filter-btn__num{font-size:.7rem}}
.filter-btn__label{line-height:1}
.filter-btn.is-active{
  background:var(--text);color:var(--bg);border-color:var(--text);
}
.filter-btn.is-active .filter-btn__num{opacity:1;color:var(--bg)}

/* ---------- Projects grid ---------- */
.projects-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
@media(min-width:560px){
  .projects-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem}
}
@media(min-width:1024px){
  .projects-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}
}
.project-card{
  position:relative;aspect-ratio:4/3;
  background:var(--bg-elev);
  background-image:var(--card-bg);
  background-size:cover;background-position:center;
  border:1px solid var(--line);
  overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  padding:1.5rem;transition:all var(--t);color:#fff;
}
.project-card::before{
  content:"";position:absolute;inset:0;
  background:
    /* Diagonales "aperçu / wip" subtiles */
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.035) 0 6px,
      transparent 6px 20px),
    /* Voile bleuté "preview" + lisibilité texte */
    linear-gradient(180deg,rgba(8,11,18,.55) 0%,rgba(8,11,18,.35) 35%,rgba(8,11,18,.45) 60%,rgba(8,11,18,.85) 100%);
  pointer-events:none;transition:background var(--t);
}
/* (Le watermark "EXEMPLE" était appliqué aux anciennes cartes placeholder
   hardcodées. La grille est désormais dynamique : les cartes générées par
   /api/projects ne portent plus cette classe. On désactive donc le pseudo-élément. */
.project-card::after{display:none}
.project-card:hover{border-color:var(--text);transform:translateY(-3px)}
.project-card:hover::before{
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.025) 0 6px,
      transparent 6px 20px),
    linear-gradient(180deg,rgba(8,11,18,.4) 0%,rgba(8,11,18,.2) 35%,rgba(8,11,18,.3) 60%,rgba(8,11,18,.65) 100%);
}
/* Désactiver les translations hover sur les appareils tactiles (évite le « collage » du doigt) */
@media(hover:none){
  .project-card:hover{transform:none}
  .project-card:active{border-color:var(--text)}
}
.project-card__type{
  position:relative;z-index:1;
  display:inline-block;padding:.4rem .9rem;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.2);
  font-family:var(--font-b);font-weight:700;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;align-self:flex-start;
}
.project-card__body{position:relative;z-index:1;margin-top:auto}
.project-card__title{
  font-family:var(--font-d);font-size:1.3rem;font-weight:900;margin-bottom:.4rem;
  color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.55);
}
.project-card__desc{
  font-size:.85rem;line-height:1.45;color:rgba(255,255,255,.78);
  margin-bottom:.6rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.project-card__status{
  font-family:var(--font-b);font-weight:700;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);
}
.project-card__status::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent,#fff);margin-right:.6rem;vertical-align:middle;
  box-shadow:0 0 8px var(--accent,#fff);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- Grid states (loading / empty / error) ---------- */
.projects-grid--state{
  display:flex;align-items:center;justify-content:center;
  min-height:240px;width:100%;
  padding:2rem 1.5rem;
  border:1px dashed var(--line);
  background:var(--bg-elev);
  color:var(--muted);
  font-family:var(--font-b);font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;font-size:.9rem;
  text-align:center;
}
.projects-grid--state--error{
  border-color:rgba(220,80,80,.4);
  color:#ffb4b4;
}
.projects-grid--loading::before{
  content:"";
  display:inline-block;width:18px;height:18px;
  border:2px solid var(--line);border-top-color:var(--text);
  border-radius:50%;margin-right:.7rem;
  animation:spin .8s linear infinite;vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- About ---------- */
.about-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  align-items:start;
  padding:1rem 0;
}
@media(min-width:880px){
  .about-grid{grid-template-columns:1fr 1.5fr;gap:4rem;padding:4rem 0}
}
@media(max-width:879px){
  /* Sur mobile : portrait en premier, plus petit et centré */
  .about-portrait{max-width:280px;margin:0 auto;width:100%}
}
.about-portrait{
  aspect-ratio:3/4;
  background:linear-gradient(135deg,var(--bg-card),var(--bg-elev));
  border:1px solid var(--line);position:relative;overflow:hidden;
}
.about-portrait::after{
  content:"PORTRAIT";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-d);font-weight:900;font-size:1.1rem;
  color:var(--dim);letter-spacing:.25em;
  pointer-events:none;transition:opacity .25s var(--ease);
}
/* Quand le JS a chargé un portrait : on masque le texte fallback.
   L'image injectée occupe tout le conteneur (position:absolute inset:0). */
.about-portrait--has-image::after{
  content:none;opacity:0;
}
.about-name{font-family:var(--font-d);font-size:clamp(1.75rem,4vw,3rem);font-weight:900;margin-bottom:.5rem}
.about-role{
  font-family:var(--font-b);font-weight:700;color:var(--muted);
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.5rem;
  font-size:.85rem;
}
@media(min-width:880px){
  .about-role{margin-bottom:2rem;font-size:1rem}
}
.about-text{
  font-family:var(--font-b);font-weight:500;
  font-size:1.05rem;color:var(--muted);line-height:1.65;margin-bottom:1.2rem;
}
@media(min-width:880px){
  .about-text{font-size:1.1rem;margin-bottom:1.3rem}
}
.about-text strong{color:var(--text);font-weight:700}
.about-process{margin:3rem 0 0;padding-top:2rem;border-top:1px solid var(--line)}
@media(min-width:880px){
  .about-process{margin:5rem 0 0;padding-top:3rem}
}
.about-process__list{display:grid;grid-template-columns:1fr;gap:1rem;list-style:none;margin-top:1.5rem}
@media(min-width:560px){
  .about-process__list{grid-template-columns:repeat(2,1fr);gap:1.25rem}
}
@media(min-width:1024px){
  .about-process__list{grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:2rem}
}
.about-process__step{padding:1.5rem 0 1rem;position:relative;border-top:6px solid var(--accent,var(--blue))}
@media(min-width:880px){
  .about-process__step{padding:1.8rem 0 1.2rem}
}
.about-process__num{
  display:block;font-family:var(--font-d);font-size:1.6rem;font-weight:900;
  color:var(--accent,var(--blue));margin-bottom:.6rem;
}
@media(min-width:880px){.about-process__num{font-size:1.8rem;margin-bottom:.8rem}}
.about-process__title{
  font-family:var(--font-d);font-size:1.05rem;font-weight:900;letter-spacing:-.01em;
  color:var(--text);
}
@media(min-width:880px){.about-process__title{font-size:1.15rem}}

/* ---------- Contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  padding:1rem 0;
  align-items:start;
}
@media(min-width:880px){
  .contact-grid{grid-template-columns:1.5fr 1fr;gap:4rem;padding:4rem 0}
}
.form{display:flex;flex-direction:column;gap:1.5rem}
@media(min-width:880px){.form{gap:2rem}}
.form__row{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:560px){
  .form__row{grid-template-columns:1fr 1fr}
}
.form__field{display:flex;flex-direction:column;gap:.5rem}
.form__label{
  font-family:var(--font-b);font-weight:700;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
@media(min-width:880px){
  .form__label{font-size:.8rem;letter-spacing:.18em}
}
.form__input,.form__textarea,.form__select{
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.9rem 0;color:var(--text);font-size:1rem;font-weight:600;
  transition:border-color var(--t);width:100%;border-radius:0;
  min-height:var(--tap);
}
@media(min-width:880px){
  .form__input,.form__textarea,.form__select{font-size:1.05rem;padding:1rem 0}
}
/* iOS : empêcher le zoom forcé sur focus */
@supports(-webkit-touch-callout:none){
  .form__input,.form__textarea,.form__select{font-size:16px}
}
.form__input:focus,.form__textarea:focus,.form__select:focus{outline:none;border-color:var(--blue)}
.form__textarea{min-height:140px;resize:vertical}
.form__select{
  appearance:none;cursor:pointer;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--text) 50%),
    linear-gradient(135deg,var(--text) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;
  background-size:6px 6px;background-repeat:no-repeat;padding-right:30px;
}
.form__select option{background:var(--bg-elev);color:var(--text)}
.form__submit{align-self:flex-start;margin-top:.5rem}
.form__msg{
  padding:1rem 1.5rem;border:1px solid var(--green);color:var(--green);
  background:rgba(57,255,20,.08);
  font-family:var(--font-b);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;font-size:.85rem;
}
.form__msg--error{border-color:var(--pink);color:var(--pink);background:rgba(255,45,120,.08)}

.contact-info{
  display:flex;flex-direction:column;gap:2rem;
  padding:1.75rem 1.5rem;background:var(--bg-elev);border:1px solid var(--line);
}
@media(min-width:880px){
  .contact-info{padding:2.5rem;gap:2.5rem}
}
.contact-info__block{display:flex;flex-direction:column;gap:.5rem}
.contact-info__label{
  font-family:var(--font-b);font-weight:700;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
@media(min-width:880px){
  .contact-info__label{font-size:.8rem;letter-spacing:.2em}
}
.contact-info__value{
  font-family:var(--font-d);font-weight:900;font-size:1.05rem;color:var(--text);
  word-break:break-word;
}
@media(min-width:880px){
  .contact-info__value{font-size:1.15rem}
}
.contact-info__value a{transition:color var(--t);min-height:var(--tap);display:inline-flex;align-items:center}
.contact-info__value a:hover{color:var(--blue)}
.contact-info__social{display:flex;gap:.6rem;margin-top:.5rem;flex-wrap:wrap}
.contact-info__social a{
  width:var(--tap);height:var(--tap);min-width:var(--tap);min-height:var(--tap);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t);
}
.contact-info__social a:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
.contact-info__social svg{width:20px;height:20px}
@media(hover:none){
  /* Pas de translation au hover sur tactile — seul l'état actif donne du feedback */
  .contact-info__social a:hover{background:transparent;color:inherit;border-color:var(--line)}
  .contact-info__social a:active{background:var(--text);color:var(--bg);border-color:var(--text)}
}

/* ---------- Footer ---------- */
.footer{
  margin-top:auto;position:relative;
  padding-bottom:var(--safe-bottom);
  overflow:hidden;
}

/* Protection anti-débordement des colonnes du footer */
.footer__col{min-width:0}

/* ----- Grille ----- */
.footer__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.75rem;
  padding:2.25rem 0 1.25rem;
  padding-left:.5rem;
  padding-right:.5rem;
}
@media(min-width:560px){
  .footer__grid{
    grid-template-columns:1fr 1fr;
    gap:2rem;
    padding:2.75rem 0 1.75rem;
    padding-left:.5rem;
    padding-right:.5rem;
  }
}
@media(min-width:880px){
  .footer__grid{
    grid-template-columns:2fr 1fr;
    gap:3rem;
    padding:5rem 0 3rem;
    padding-left:1rem;
    padding-right:1rem;
  }
}
@media(min-width:1200px){
  .footer__grid{
    gap:4rem;
    padding-left:1.5rem;
    padding-right:1.5rem;
  }
}

/* ----- Mobile : brand et réseaux sur la même ligne ----- */
@media(max-width:559px){
  .footer__grid{
    grid-template-columns:1fr auto;
    gap:1.25rem;
    align-items:start;
    padding-left:0;
    padding-right:0;
  }
  .footer__col:not(.footer__col--brand){
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:.4rem;
  }
  .footer__col:not(.footer__col--brand) .footer__social{
    justify-content:flex-end;
    margin-top:0;
    padding:0;
    list-style:none;
  }
  .footer__col:not(.footer__col--brand) > .eyebrow{
    margin:0;
    font-size:.7rem;
    letter-spacing:.18em;
  }
}

/* ----- Colonne brand ----- */
.footer__col--brand .nav__logo{
  margin-bottom:.85rem;
  /* Pas de min-height dans le footer — le logo a une ligne simple */
  font-size:1rem;
}

/* Tagline : passe en colonne sur mobile, en ligne sur desktop */
.footer__tagline{
  font-family:var(--font-b);font-weight:500;
  color:var(--muted);
  line-height:1.45;
  max-width:100%;
  font-size:.85rem;
  display:flex;
  flex-direction:column;
  gap:.15rem;
  overflow-wrap:break-word;
  word-break:break-word;
}
@media(min-width:560px){
  .footer__tagline{font-size:.95rem;max-width:32ch}
}
@media(min-width:880px){
  .footer__tagline{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:baseline;
    column-gap:.55rem;
    font-size:1rem;
    max-width:36ch;
  }
  /* Le séparateur "·" s'affiche uniquement en desktop (caché sur mobile) */
  .footer__tagline-sep{display:inline;color:var(--dim)}
}
/* Mobile : le séparateur est masqué (les 2 parties sont sur 2 lignes de toute façon) */
.footer__tagline-sep{display:none}

/* ----- Réseaux sociaux (icônes en row) ----- */
.footer__social{
  display:flex;flex-direction:row;flex-wrap:wrap;
  gap:.5rem;margin-top:.7rem;
}
@media(min-width:880px){
  .footer__social{margin-top:1rem;gap:.8rem}
}

/* ----- Réseau sociaux (icônes en row) ----- */
.footer__social{
  flex-direction:row;flex-wrap:wrap;
  gap:.5rem;
}
@media(min-width:560px){.footer__social{gap:.6rem}}
@media(min-width:880px){.footer__social{gap:.8rem}}
.footer__social a{
  width:var(--tap);height:var(--tap);
  min-width:var(--tap);min-height:var(--tap);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t);
}
.footer__social a:hover{background:var(--text);color:var(--bg);border-color:var(--text)}
.footer__social svg{width:18px;height:18px}
@media(hover:none){
  .footer__social a:hover{background:transparent;color:inherit;border-color:var(--line)}
  .footer__social a:active{background:var(--text);color:var(--bg);border-color:var(--text)}
}

/* ----- Bandeau bas (copyright + ville) ----- */
.footer__bottom{
  border-top:1px solid var(--line);
  padding:1.5rem 0;
  padding-bottom:calc(1.5rem + var(--safe-bottom));
}
.footer__bottom-inner{
  display:flex;
  flex-direction:column;
  align-items:center;justify-content:center;
  gap:.6rem;
  text-align:center;
  color:var(--dim);
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-family:var(--font-b);font-weight:600;
  overflow-wrap:break-word;word-break:break-word;
  row-gap:.5rem;
  word-spacing:.02em;
}
.footer__bottom-inner > *{margin:0}
@media(min-width:560px){
  .footer__bottom-inner{
    flex-direction:row;justify-content:space-between;
    align-items:center;
    text-align:left;
    font-size:.78rem;letter-spacing:.12em;
    gap:1.5rem;
  }
}

/* ----- Variante très petits écrans (≤360px) ----- */
@media(max-width:359px){
  .footer__grid{gap:1rem;padding:1.75rem 0 1rem;grid-template-columns:1fr auto}
  .footer__tagline{font-size:.85rem}
  .footer__social{gap:.4rem}
  .footer__social a{width:42px;height:42px;min-width:42px;min-height:42px}
  .footer__social svg{width:16px;height:16px}
  .footer__bottom-inner{font-size:.62rem;letter-spacing:.06em;gap:.35rem}
}

/* ----- Variante paysage mobile (hauteur ≤ 480px) ----- */
@media(max-height:480px) and (max-width:920px){
  .footer__grid{padding:1.5rem 0 1rem;gap:1.25rem}
  .footer__bottom{padding:.85rem 0;padding-bottom:calc(.85rem + var(--safe-bottom))}
}

/* ---------- 404 ---------- */
.error-page{
  min-height:70vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:3rem 0;
}
@media(min-width:880px){
  .error-page{min-height:80vh;padding:4rem 0}
}

/* ---------- Service descriptions (sous la grille Réalisations) ---------- */
.service-desc-wrap{
  margin-top:2rem;display:flex;flex-direction:column;gap:1rem;
  animation:serviceDescIn .35s var(--ease);
}
@media(min-width:880px){
  .service-desc-wrap{margin-top:3rem;gap:1.5rem}
}
.service-desc{
  position:relative;
  background:var(--bg-elev);
  border:1px solid var(--line);
  padding:1.5rem 1.25rem;
  overflow:hidden;
  transition:all var(--t);
}
@media(min-width:880px){
  .service-desc{padding:2rem 2.5rem}
}
.service-desc::before{
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:5px;background:var(--accent,var(--purple));
  transition:width var(--t);
}
.service-desc:hover{border-color:var(--line-strong)}
.service-desc:hover::before{width:8px}
.service-desc[data-service="photo"]{--accent:var(--blue)}
.service-desc[data-service="video"]{--accent:var(--pink)}
.service-desc[data-service="drone"]{--accent:var(--green)}
.service-desc__inner{
  display:flex;align-items:flex-start;gap:1.75rem;
}
.service-desc__num{
  font-family:var(--font-d);font-weight:900;font-size:clamp(2rem,4vw,3rem);
  color:var(--accent);line-height:1;flex-shrink:0;
  letter-spacing:-.02em;
}
.service-desc__body{flex:1;min-width:0}
.service-desc__title{
  font-family:var(--font-d);font-weight:800;font-size:clamp(1.3rem,2vw,1.65rem);
  margin:0 0 .75rem;color:var(--text);
  letter-spacing:-.01em;
}
.service-desc__text{
  font-family:var(--font-b);font-weight:500;font-size:1rem;
  line-height:1.65;color:var(--muted);
  margin:0 0 1.25rem;max-width:70ch;
}
.service-desc__tags{display:flex;flex-wrap:wrap;gap:.5rem}
.service-desc__tag{
  font-family:var(--font-b);font-weight:700;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;
  padding:.35rem .85rem;
  background:var(--hover-bg);
  border:1px solid var(--line);
  color:var(--text);
  transition:all var(--t);
}
.service-desc__tag:hover{border-color:var(--accent);color:var(--accent)}
@keyframes serviceDescIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- Empty state (drone, etc.) ---------- */
.projects-empty{
  text-align:center;padding:4rem 1rem;
  border:1px dashed var(--line);
  background:var(--hover-bg);
  margin-top:1rem;
}
.projects-empty__text{
  font-family:var(--font-d);font-weight:700;font-size:1.1rem;
  color:var(--text);margin:0 0 .5rem;
}
.projects-empty__sub{
  font-family:var(--font-b);font-weight:500;
  color:var(--muted);margin:0;font-size:.95rem;
}

@media(max-width:640px){
  .service-desc__inner{flex-direction:column;gap:.75rem}
}
.error-page__code{
  font-family:var(--font-d);font-size:clamp(6rem,20vw,12rem);
  font-weight:900;line-height:1;margin-bottom:1rem;
  background:linear-gradient(135deg,var(--blue),var(--purple),var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.error-page__title{margin-bottom:1rem}
.error-page__text{
  font-family:var(--font-b);font-weight:500;
  color:var(--muted);margin-bottom:2rem;
  font-size:1rem;padding:0 .25rem;
}
@media(min-width:880px){
  .error-page__text{font-size:1.1rem;margin-bottom:2.5rem}
}

/* ---------- 503 (indisponibilité temporaire) ---------- */
.error-page--503 .error-page__code{
  /* Dégradé chaud pour signaler un état temporaire (≠ 404 qui est définitif). */
  background:linear-gradient(135deg,var(--warn) 0%,var(--warn-2) 55%,var(--pink) 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:error503Shift 6s ease-in-out infinite;
}
@keyframes error503Shift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.error-page__status{
  display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--font-b);font-weight:700;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--warn-2);
  margin:0 0 1.25rem;
  padding:.5rem 1rem;
  border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);
  background:color-mix(in srgb,var(--warn) 8%,transparent);
  border-radius:999px;
}
.error-page__pulse{
  width:.65rem;height:.65rem;border-radius:50%;
  background:var(--warn-2);
  box-shadow:0 0 12px color-mix(in srgb,var(--warn-2) 60%,transparent);
  animation:error503Pulse 1.4s ease-in-out infinite;
}
@keyframes error503Pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.7)}
}
.error-page__status-text{line-height:1}
.error-page__actions{
  display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;
  margin-bottom:1.75rem;
}
@media(min-width:880px){
  .error-page__actions{margin-bottom:2.25rem}
}
.error-page__retry-meta{
  font-family:var(--font-b);font-weight:600;
  font-size:.85rem;color:var(--dim);
  margin:0;letter-spacing:.04em;
}
.error-page__retry-meta #retry-countdown{
  color:var(--warn-2);font-variant-numeric:tabular-nums;
  font-weight:800;
}
@media (prefers-reduced-motion: reduce){
  .error-page--503 .error-page__code,
  .error-page__pulse{animation:none}
}

/* ============================================================
   VYRION — Responsive global addendum
   Règles transverses pour éviter les débordements horizontaux,
   respecter les zones safe iOS, gérer la réduction de mouvement,
   garantir la visibilité focus, et tenir compte des très petits
   écrans (≤360px) comme l'iPhone SE 1ère génération.
   ============================================================ */

/* Empêche tout débordement horizontal accidentel (videos, images, blocs) */
html, body { overflow-x: hidden; }
img, video, svg, iframe, table { max-width: 100%; }

/* Sur iOS la barre Safari défile par-dessus le contenu : on prévoit
   un padding-bottom sur le dernier élément cliquable. */
body { padding-bottom: env(safe-area-inset-bottom); }

/* Scroll progress : z-index supérieur au header pour rester visible */
.scroll-progress{ z-index: 110; }

/* Très petits écrans (≤360px) — derniers ajustements */
@media (max-width: 359px) {
  :root {
    --pad-x-sm: 1rem;
  }
  .nav__inner { gap: .4rem; }
  .hero__title-line { font-size: clamp(1.85rem, 10vw, 3rem); }
  .service-card { padding: 1.75rem 1.25rem 1.75rem; }
  .contact-info { padding: 1.5rem 1.1rem; }
  .service-desc { padding: 1.25rem 1rem; }
  .filter-btn { font-size: .76rem; padding: .6rem .8rem; letter-spacing: .04em; }
  .btn { padding: .85rem 1.1rem; font-size: .82rem; }
  .footer__bottom-inner { font-size: .7rem; letter-spacing: .08em; }
}

/* Paysage mobile (orientation paysage, hauteur réduite) :
   éviter que le hero ou les CTA débordent */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: 100vh; padding-top: calc(5rem + var(--safe-top)); padding-bottom: 2rem; }
  .hero__title { margin: .8rem 0 1rem; }
  .hero__subtitle { margin-bottom: 1.25rem; }
  section { padding: 2.5rem 0; }
}

/* Impression — version noir et blanc propre */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .nav, .footer, .color-band, .scroll-progress, .hero__bg, .reveal { display: none !important; }
  a { color: #000 !important; text-decoration: underline; }
  h1, h2, h3 { color: #000 !important; }
}

/* Respect de la préférence « reduced motion » */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Focus visible pour l'accessibilité au clavier */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.btn:focus-visible,
.filter-btn:focus-visible,
.nav__link:focus-visible,
.nav__burger:focus-visible,
.nav__theme:focus-visible {
  outline-offset: 4px;
}

/* Empêche le débordement des très longs mots/emails dans les blocs étroits */
.contact-info__value,
.hero__title,
.hero__subtitle,
.footer__tagline {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Quand le menu mobile est ouvert, masquer le scroll progress pour qu'il
   ne dépasse pas du viewport quand le scroll est verrouillé */
body.menu-open .scroll-progress { opacity: 0; pointer-events: none; }

/* ============================================================
   FOOTER — Liens légaux (footer__legal)
   ============================================================ */
.footer__legal {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .9rem;
  align-items: center;
  font-family: var(--font-b);
  font-weight: 600;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.footer__legal li {
  display: inline-flex;
  align-items: center;
}
.footer__legal li:not(:last-child)::after {
  content: "·";
  margin-left: .9rem;
  margin-right: 0;
  opacity: .6;
}
.footer__legal a {
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
  min-height: 44px; /* tap target mobile */
  display: inline-flex;
  align-items: center;
}
.footer__legal a:hover,
.footer__legal a:focus-visible {
  color: var(--accent);
}
.footer__legal a:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Le footer bottom respire sur toutes les tailles d'écran */

@media (max-width: 559px) {
  .footer__bottom-inner {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
    gap: .85rem;
    padding-left: .5rem;
    padding-right: .5rem;
  }
  .footer__bottom-inner > ul.footer__legal {
    justify-content: center;
  }
}

@media (min-width: 560px) and (max-width: 879px) {
  .footer__bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding-left: .5rem;
    padding-right: .5rem;
  }
}

@media (min-width: 880px) {
  .footer__bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 1200px) {
  .footer__bottom-inner {
    gap: 3rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Très petits */
@media (max-width: 359px) {
  .footer__legal { font-size: .68rem; gap: .25rem .55rem; }
  .footer__legal li:not(:last-child)::after { margin-left: .55rem; }
}

/* ============================================================
   BANDEAU COOKIES (cookies-banner + cookies-*)
   ============================================================ */
.cookies-banner {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translate(-50%, 1.5rem);
  z-index: 9999;
  max-width: min(720px, calc(100% - 2rem));
  width: calc(100% - 2rem);
  background: var(--bg, #0a0a0a);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45),
              0 4px 12px rgba(0, 0, 0, .25);
  padding: 1rem 1.1rem;
  font-family: var(--font-b, 'Rajdhani', sans-serif);
  color: var(--white, #fff);
  opacity: 0;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s;
  margin-bottom: env(safe-area-inset-bottom, 0);
}
.cookies-banner.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.cookies-banner.is-leaving {
  opacity: 0;
  transform: translate(-50%, 1.2rem);
}
.cookies-banner__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
}
.cookies-banner__body {
  min-width: 0;
}
.cookies-banner__title {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-a, 'Unbounded', sans-serif);
  font-weight: 800;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: .35rem;
}
.cookies-banner__icon {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}
.cookies-banner__text {
  font-size: .85rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.cookies-banner__link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  margin-left: .25rem;
}
.cookies-banner__link:hover,
.cookies-banner__link:focus-visible {
  color: var(--white);
}
.cookies-banner__actions {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.cookies-banner__btn {
  font-family: var(--font-b);
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: transform .15s, background .2s, color .2s, border-color .2s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cookies-banner__btn:active { transform: scale(.97); }
.cookies-banner__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cookies-banner__btn--accept {
  background: var(--accent);
  color: var(--white);
  padding: .85rem 1.4rem;
}
.cookies-banner__btn--accept:hover,
.cookies-banner__btn--accept:focus-visible {
  background: var(--white);
  color: var(--bg, #0a0a0a);
}
.cookies-banner__btn--decline {
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, .15);
  width: 44px;
  padding: 0;
  font-size: 1.3rem;
  font-weight: 600;
}
.cookies-banner__btn--decline:hover,
.cookies-banner__btn--decline:focus-visible {
  color: var(--white);
  border-color: rgba(255, 255, 255, .35);
}

/* Empilement sur petit mobile */
@media (max-width: 559px) {
  .cookies-banner {
    padding: .85rem .9rem;
    bottom: .75rem;
    width: calc(100% - 1.5rem);
  }
  .cookies-banner__inner {
    grid-template-columns: 1fr;
    gap: .65rem;
  }
  .cookies-banner__actions {
    justify-self: end;
  }
  .cookies-banner__text { font-size: .82rem; }
  .cookies-banner__btn--accept { padding: .8rem 1.2rem; font-size: .78rem; }
}

/* Très petits écrans */
@media (max-width: 359px) {
  .cookies-banner__text { font-size: .76rem; line-height: 1.5; }
  .cookies-banner__title { font-size: .75rem; }
}

/* ============================================================
   VE PROJECT MODAL — Galerie immersive
   Média dominant à gauche (~75%), colonne d'infos à droite (~25%)
   Polices/couleurs du site conservées (var(--font-*), var(--bg-elev), etc.)
   ============================================================ */

/* ---- Overlay root (plein écran, fond sombre) ---- */
.ve-project-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: stretch;
  justify-content: stretch;
  background: rgba(4, 4, 6, .92);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  opacity: 0;
  transition: opacity .25s ease;
}
.ve-project-modal.is-open {
  display: block;
  opacity: 1;
}
body.ve-no-scroll {
  overflow: hidden;
  touch-action: none;
}

/* ---- Backdrop (couche clic-pour-fermer) ---- */
.ve-project-modal__backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: zoom-out;
}

/* ---- Dialog (fenêtre plein écran) ---- */
.ve-project-modal__dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 25%, 320px);
  /* Row 1 (média) prend toute la hauteur disponible, row 2 (miniatures)
   * reste à hauteur intrinsèque. Sans cela, le track s'ajuste au contenu
   * et le média se retrouve comprimé. */
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "media body"
    "thumbs body";
  background: var(--bg, #080808);
  color: var(--text, #f5f6f7);
  font-family: var(--font-b, 'Rajdhani', system-ui, sans-serif);
  overflow: hidden;
  transform: translateY(6px) scale(.995);
  opacity: 0;
  animation: veModalIn .35s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes veModalIn {
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* ---- Bouton fermeture (haut droite, toujours accessible) ---- */
.ve-project-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 30;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 10, .65);
  color: var(--text, #fff);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.ve-project-modal__close:hover,
.ve-project-modal__close:focus-visible {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .35);
  transform: scale(1.05);
}
.ve-project-modal__close:focus-visible {
  outline: 2px solid var(--text, #fff);
  outline-offset: 2px;
}

/* ---- Navigation projets (haut gauche, compacte) ---- */
.ve-project-modal__nav--prev,
.ve-project-modal__nav--next {
  position: absolute;
  top: 1rem;
  z-index: 30;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 8, 10, .65);
  color: var(--text, #fff);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.ve-project-modal__nav--prev { left: 1rem; }
.ve-project-modal__nav--next { left: calc(1rem + 44px + .4rem); }
.ve-project-modal__nav--prev:hover,
.ve-project-modal__nav--next:hover,
.ve-project-modal__nav--prev:focus-visible,
.ve-project-modal__nav--next:focus-visible {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .35);
  transform: scale(1.05);
}
.ve-project-modal__nav--prev:focus-visible,
.ve-project-modal__nav--next:focus-visible {
  outline: 2px solid var(--text, #fff);
  outline-offset: 2px;
}

/* ---- Compteur (entre les flèches) ---- */
.ve-project-modal__counter {
  position: absolute;
  top: 1rem;
  left: calc(1rem + (44px * 2) + (.4rem * 2));
  z-index: 30;
  height: 44px;
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-m, 'JetBrains Mono', monospace);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--text, #fff);
  background: rgba(8, 8, 10, .65);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

/* ============================================================
   COLONNE MÉDIA (gauche, ~75%)
   ============================================================ */

.ve-project-modal__media {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #000;
  overflow: hidden;
  grid-area: media;
}

/* Vidéo : 16/9, centrée, fill la zone dispo */
.ve-project-modal__video {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: #000;
}
.ve-project-modal__video > iframe,
.ve-project-modal__video > video,
.ve-project-modal__video > .ve-project-modal__video-poster,
.ve-project-modal__video > .ve-project-modal__video-frame {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

/* Force l'attribut HTML hidden à prendre le dessus sur les règles
 * display:flex/block plus spécifiques (sinon le poster et le bouton Play
 * restent affichés à côté de l'iframe après le clic sur Play). */
.ve-project-modal__video > [hidden],
.ve-project-modal [hidden] {
  display: none !important;
}

/* État explicite "lecture en cours" : posé par le JS au clic sur Play,
 * retiré par stopPlayback() à la fermeture/au changement de projet.
 * Permet de cibler le poster et le bouton Play avec un sélecteur lisible
 * même si l'attribut hidden n'est pas posé. */
.ve-project-modal__video.is-playing > .ve-project-modal__video-poster,
.ve-project-modal__video.is-playing > .ve-project-modal__play {
  display: none !important;
}

/* ---- Poster vidéo (avant lecture) ----
 * Bloc qui occupe la même place que l'iframe. Une image d'aperçu en
 * background + un bouton Play centré. Au clic, on swappe vers l'iframe
 * (cf. public/js/projects-modal.js, branche YouTube/Vimeo). */
.ve-project-modal__video-poster {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
}
.ve-project-modal__video-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  transition: transform .35s ease, filter .25s ease;
}
.ve-project-modal__video-poster:hover .ve-project-modal__video-thumb,
.ve-project-modal__video-poster:focus-within .ve-project-modal__video-thumb {
  transform: scale(1.02);
  filter: brightness(.78);
}
.ve-project-modal__video-thumb--placeholder {
  background:
    radial-gradient(ellipse at center, #1a1a1c 0%, #050506 70%);
}

/* Bouton Play centré (cercle transparent + triangle blanc) */
.ve-project-modal__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(64px, 11vw, 96px);
  height: clamp(64px, 11vw, 96px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #fff;
  transition: transform .2s ease;
}
.ve-project-modal__play:hover,
.ve-project-modal__play:focus-visible {
  transform: scale(1.08);
}
.ve-project-modal__play:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
  border-radius: 50%;
}
.ve-project-modal__play-icon {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.5));
}
.ve-project-modal__play-label {
  position: absolute;
  bottom: -1.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-m, 'JetBrains Mono', monospace);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  white-space: nowrap;
}

/* Container d'iframe (apparaît après clic sur Play) */
.ve-project-modal__video-frame {
  position: relative;
}
.ve-project-modal__video-frame > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* <video> natif (MP4) : occupe 16/9, contrôles natifs (pause, son,
 * progression, plein écran) — conforme à la demande. */
.ve-project-modal__video-native {
  width: 100%;
  height: 100%;
  background: #000;
}

/* Lien de repli compact (caché par défaut, révélé en cas d'échec embed) */
.ve-project-modal__open-link--small {
  position: absolute;
  bottom: clamp(1rem, 2vw, 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: .7rem;
  padding: .35rem .7rem;
  background: rgba(0,0,0,.55);
  border-radius: 4px;
  z-index: 4;
}

/* Image : pas de déformation, jamais recadrée */
.ve-project-modal__img-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  padding: clamp(1rem, 2vw, 1.5rem);
}
.ve-project-modal__img-wrap.is-empty,
.ve-project-modal__img-wrap.is-missing {
  color: rgba(255, 255, 255, .35);
  font-family: var(--font-m, 'JetBrains Mono', monospace);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ve-project-modal__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #000;
}

.ve-project-modal__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  color: rgba(255, 255, 255, .35);
  font-family: var(--font-m, monospace);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Fallback vidéo : l'URL n'est pas intégrable (format inconnu / CSP bloquant)
 * On affiche un message + un lien « Ouvrir la vidéo » vers l'URL d'origine.
 * Mise en page respectée : centrée dans la zone média 16/9. */
.ve-project-modal__video-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  text-align: center;
  padding: clamp(1rem, 2vw, 1.5rem);
}
.ve-project-modal__placeholder-text {
  color: rgba(255, 255, 255, .55);
  font-family: var(--font-b, sans-serif);
  font-size: .9rem;
}
.ve-project-modal__placeholder-reason {
  color: rgba(255, 255, 255, .35);
  font-family: var(--font-m, 'JetBrains Mono', monospace);
  font-size: .68rem;
  letter-spacing: .08em;
  max-width: 32em;
  line-height: 1.5;
}
.ve-project-modal__open-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 6px;
  color: var(--text, #fff);
  text-decoration: none;
  font-family: var(--font-m, 'JetBrains Mono', monospace);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .06);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.ve-project-modal__open-link:hover,
.ve-project-modal__open-link:focus-visible {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .35);
  transform: translateY(-1px);
}
.ve-project-modal__open-link:focus-visible {
  outline: 2px solid var(--text, #fff);
  outline-offset: 2px;
}

/* ---- Miniatures compactes (sous le média, dans sa colonne) ---- */
.ve-project-modal__thumbs {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: .65rem clamp(.75rem, 1.5vw, 1rem);
  background: rgba(0, 0, 0, .55);
  border-top: 1px solid rgba(255, 255, 255, .06);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
  grid-area: thumbs;
}
.ve-project-modal__thumbs::-webkit-scrollbar { height: 4px; }
.ve-project-modal__thumbs::-webkit-scrollbar-track { background: transparent; }
.ve-project-modal__thumbs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .18);
  border-radius: 2px;
}
.ve-project-modal__thumb {
  position: relative;
  flex: 0 0 auto;
  width: 80px;
  height: 56px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 4px;
  background: #000;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.ve-project-modal__thumb > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ve-project-modal__thumb:hover {
  border-color: rgba(255, 255, 255, .35);
}
.ve-project-modal__thumb.is-active {
  border-color: var(--text, #fff);
  box-shadow: 0 0 0 1px var(--text, #fff);
}
.ve-project-modal__thumb--video {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text, #fff);
  font-size: 1.1rem;
  background: #000;
}
.ve-project-modal__thumb--video::after {
  content: "▶";
}

/* ============================================================
   COLONNE INFOS (droite, ~25%, 280-320px)
   ============================================================ */

.ve-project-modal__body {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 0;
  min-height: 0;
  padding: 2rem 1.5rem;
  overflow-y: auto;
  background: var(--bg-elev, #0e1117);
  border-left: 1px solid rgba(255, 255, 255, .06);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .15) transparent;
  grid-area: body;
}
.ve-project-modal__body::-webkit-scrollbar { width: 4px; }
.ve-project-modal__body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .15);
  border-radius: 2px;
}

.ve-project-modal__type {
  align-self: flex-start;
  margin: 0 0 .25rem;
  padding: .3rem .6rem;
  font-family: var(--font-m, 'JetBrains Mono', monospace);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 3px;
  line-height: 1;
}

.ve-project-modal__title {
  margin: 0;
  font-family: var(--font-d, 'Unbounded', sans-serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.7vw, 1.75rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--text, #f5f6f7);
}

.ve-project-modal__sub {
  margin: 0;
  font-family: var(--font-b, 'Rajdhani', sans-serif);
  font-size: .85rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .55);
}

.ve-project-modal__desc {
  margin: 0;
  font-family: var(--font-b, 'Rajdhani', sans-serif);
  font-size: .875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .7);
}

.ve-project-modal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  padding: 1rem 0;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-family: var(--font-b, 'Rajdhani', sans-serif);
  font-size: .8rem;
  color: rgba(255, 255, 255, .55);
}
.ve-project-modal__meta span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.ve-project-modal__meta strong {
  font-family: var(--font-d, 'Unbounded', sans-serif);
  font-weight: 500;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text, #f5f6f7);
}

.ve-project-modal__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
}
.ve-project-modal__tag {
  display: inline-block;
  padding: .3rem .65rem;
  font-family: var(--font-m, 'JetBrains Mono', monospace);
  font-size: .65rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 99px;
  line-height: 1;
}

/* ============================================================
   MOBILE (≤559px) — une seule colonne, média d'abord
   ============================================================ */
@media (max-width: 559px) {
  .ve-project-modal__dialog {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas: "media" "thumbs" "info";
  }
  .ve-project-modal__media { grid-area: media; }
  .ve-project-modal__thumbs { grid-area: thumbs; }
  .ve-project-modal__body {
    grid-area: info;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding: 1.25rem 1.25rem 1.5rem;
    max-height: 50vh;
    gap: .65rem;
  }
  .ve-project-modal__title {
    font-size: 1.25rem;
  }
  .ve-project-modal__desc {
    font-size: .82rem;
    /* description compacte : tronquée à 4 lignes max, scroll si plus */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ve-project-modal__close {
    top: .75rem;
    right: .75rem;
    width: 40px;
    height: 40px;
  }
  .ve-project-modal__nav--prev,
  .ve-project-modal__nav--next {
    top: .75rem;
    width: 40px;
    height: 40px;
  }
  .ve-project-modal__nav--prev { left: .75rem; }
  .ve-project-modal__nav--next { left: calc(.75rem + 40px + .4rem); }
  .ve-project-modal__counter {
    top: .75rem;
    left: calc(.75rem + (40px * 2) + (.4rem * 2));
    height: 40px;
    font-size: .68rem;
    padding: 0 .8rem;
  }
  .ve-project-modal__thumbs { padding: .5rem .75rem; }
  .ve-project-modal__thumb {
    width: 64px;
    height: 44px;
  }
}

/* ============================================================
   REDUCED MOTION — animations désactivées
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ve-project-modal { transition: none; }
  .ve-project-modal__dialog {
    animation: none;
    transform: none;
    opacity: 1;
  }
  .ve-project-modal__close,
  .ve-project-modal__nav--prev,
  .ve-project-modal__nav--next,
  .ve-project-modal__thumb {
    transition: none;
  }
}

/* ---------- Section « Galerie Photo » (page d'accueil) ---------- */
.section-head{
  text-align:center;
  margin-bottom:2rem;
}
@media(min-width:880px){
  .section-head{margin-bottom:3rem}
}
.section-head .eyebrow{margin-bottom:.75rem}
.section-head__title{
  margin:0 auto;
  font-size:clamp(1.6rem,4.4vw,3rem);
  max-width:780px;
}
.section-head__intro{
  max-width:620px;
  margin:1rem auto 0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.6;
}

.photos-access{padding:4rem 0;position:relative}
@media(min-width:880px){.photos-access{padding:6rem 0}}
@media(min-width:1100px){.photos-access{padding:7rem 0}}

.photos-access__inner{
  text-align:center;
}
.photos-access__title{
  font-family:var(--font-a);
  font-size:clamp(1.5rem,4vw,2.4rem);
  font-weight:800;
  letter-spacing:-.01em;
  margin:.25rem 0 1rem;
  color:var(--text);
}
.photos-access__intro{
  max-width:60ch;
  margin:0 auto 1.75rem;
  color:var(--muted);
  font-family:var(--font-b);
  font-size:1rem;
  line-height:1.55;
}

.photos-access__card{
  max-width:560px;margin:0 auto;
  padding:1.75rem 1.25rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
@media(min-width:880px){
  .photos-access__card{padding:2.25rem 2rem}
}

.photos-access__card--empty{
  text-align:center;
  padding:2rem 1.25rem;
}
@media(min-width:880px){
  .photos-access__card--empty{padding:2.75rem 2rem}
}
.photos-access__empty-icon{
  font-size:2rem;
  line-height:1;
  margin:0 0 .75rem;
  opacity:.75;
}
.photos-access__empty-msg{
  margin:0;
  font-family:var(--font-b);
  font-size:.95rem;
  line-height:1.55;
  color:var(--muted);
  max-width:42ch;
  margin-inline:auto;
}

.photos-access__form{display:block}

.photos-access__label{
  display:block;
  font-family:var(--font-b);
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.6rem;
  text-align:left;
}

.photos-access__note{
  max-width:60ch;
  margin:1.25rem auto 0;
  color:var(--muted);
  font-family:var(--font-b);
  font-size:.85rem;
  line-height:1.55;
}

.photos-access__message{
  min-height:1.4em;
  margin:1rem 0 0;
  font-family:var(--font-b);
  font-size:.95rem;
  line-height:1.4;
  color:var(--muted);
  word-break:break-word;
  overflow-wrap:anywhere;
}
.photos-access__message--error{color:#ff8b8b}
.photos-access__message--ok{color:var(--green)}
.photos-access__message--loading{color:var(--muted);font-style:italic}

.photos-access__row{
  display:flex;
  gap:.6rem;
  flex-direction:column;
}
@media(min-width:520px){
  .photos-access__row{flex-direction:row;align-items:stretch}
}

.photos-access__input{
  flex:1;min-width:0;
  font-family:var(--font-b);
  font-size:1rem;
  padding:.85rem 1rem;
  background:rgba(0,0,0,.25);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text);
  transition:border-color var(--t),background var(--t);
}
.photos-access__input::placeholder{color:rgba(255,255,255,.35)}
.photos-access__input:focus{
  outline:none;
  border-color:var(--blue);
  background:rgba(0,0,0,.4);
}
.photos-access__input:disabled{opacity:.6;cursor:not-allowed}

.photos-access__submit{
  white-space:nowrap;
  min-width:120px;
}
.photos-access__submit:disabled{opacity:.6;cursor:not-allowed}

.photos-access__msg{
  min-height:1.4em;
  margin-top:1rem;
  font-family:var(--font-b);
  font-size:.95rem;
  line-height:1.4;
  color:var(--muted);
  word-break:break-word;
  overflow-wrap:anywhere;
}
.photos-access__msg.is-error{color:#ff8b8b}
.photos-access__msg.is-success{color:var(--green)}
.photos-access__msg.is-info{color:var(--muted)}

.photos-access__unlocked{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
  margin-top:1rem;
  padding:1.5rem 1rem;
  border:1px dashed var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.015);
}
.photos-access__unlocked[hidden]{display:none}
.photos-access__unlocked-label{
  margin:0;
  font-family:var(--font-b);
  font-weight:600;
  color:var(--green);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.85rem;
}
.photos-access__open{
  min-width:240px;
}
.photos-access__lock{
  min-width:140px;
}
.photos-access__hint{
  margin:.25rem 0 0;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.5;
  max-width:42ch;
}

.photos-access--empty .photos-access__card{
  background:rgba(255,255,255,.015);
  border-style:dashed;
}

/* =========================================================================
 * Page « Galerie Photo » — vue dédiée /photos-access
 * Client : public/js/photos-access-page.js
 *
 * S'aligne sur le design system VYRION : tokens partagés (--bg-card,
 * --bg-elev, --text, --muted, --line, --blue, --green, --danger, --font-b,
 * --font-d), style brutaliste border-radius:0, et structure de page
 * identique aux autres pages publiques (.hero + .color-band + section).
 * ========================================================================= */

/* ----- Section principale ----- */
.pa-main{
  display:block;
}

/* ----- Bandeau d'en-tête (réutilise le pattern hero du site) ----- */
.pa-hero{
  min-height:50vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  padding:calc(7rem + var(--safe-top)) 0 3rem;
  text-align:center;
}
@media(min-width:880px){
  .pa-hero{min-height:55vh;padding:8rem 0 4rem}
}
.pa-hero__bg{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
.pa-hero__bg-glow{
  position:absolute;top:30%;left:50%;transform:translateX(-50%);
  width:60vw;height:60vw;max-width:900px;max-height:900px;
  background:radial-gradient(circle,rgba(0,170,255,.14),transparent 60%);
  filter:blur(60px);
}
.pa-hero__bg-glow--pink{
  background:radial-gradient(circle,rgba(255,45,120,.10),transparent 60%);
  top:auto;bottom:10%;left:auto;right:10%;transform:none;
}
.pa-hero__chevron{
  position:absolute;
  font-family:var(--font-d,'Unbounded',sans-serif);
  font-weight:900;
  font-size:clamp(20rem,55vw,38rem);
  line-height:1;
  color:var(--text);
  user-select:none;
  pointer-events:none;
  animation:paChevronDrift 18s ease-in-out infinite;
  will-change:transform;
}
.pa-hero__chevron--1{
  top:-15%;left:-8%;
  opacity:.05;
  animation-delay:0s;
}
.pa-hero__chevron--2{
  top:8%;right:-12%;
  opacity:.07;
  animation-delay:-6s;
  transform:rotate(180deg);
}
.pa-hero__chevron--3{
  bottom:-28%;left:28%;
  opacity:.04;
  animation-delay:-12s;
}
@keyframes paChevronDrift{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(40px,-30px)}
}
.pa-hero__chevron--2{animation-name:paChevronDrift2}
@keyframes paChevronDrift2{
  0%,100%{transform:rotate(180deg) translate(0,0)}
  50%{transform:rotate(180deg) translate(-30px,40px)}
}
.pa-hero__logo{
  font-family:var(--font-d,'Unbounded',sans-serif);
  font-weight:900;
  font-size:clamp(4rem,12vw,8rem);
  line-height:.8;
  letter-spacing:-.04em;
  color:var(--text);
  position:relative;
  margin-bottom:.5rem;
  animation:paLogoIn .8s cubic-bezier(.16,1,.3,1) both;
}
.pa-hero__logo::after{
  content:"";
  position:absolute;
  inset:-40px;
  background:radial-gradient(circle,rgba(0,170,255,.22),transparent 70%);
  filter:blur(50px);
  z-index:-1;
  animation:paLogoPulse 4s ease-in-out infinite;
}
@keyframes paLogoIn{
  0%{transform:scale(.7);opacity:0}
  100%{transform:scale(1);opacity:1}
}
@keyframes paLogoPulse{
  0%,100%{opacity:.5}
  50%{opacity:1}
}
.pa-hero__title-dot{
  color:var(--blue);
  font-size:1.2em;
  display:inline-block;
  margin-left:.05em;
}
.pa-hero .eyebrow{
  animation:paFadeUp .6s cubic-bezier(.16,1,.3,1) .1s both;
}
.pa-hero__title{
  animation:paFadeUp .6s cubic-bezier(.16,1,.3,1) .2s both;
}
.pa-hero__lede{
  animation:paFadeUp .6s cubic-bezier(.16,1,.3,1) .4s both;
}
@keyframes paFadeUp{
  0%{transform:translateY(20px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
@media(max-width:600px){
  .pa-hero__logo{font-size:clamp(3rem,16vw,5rem)}
  .pa-hero__chevron--1{font-size:clamp(14rem,90vw,22rem)}
  .pa-hero__chevron--2{font-size:clamp(10rem,70vw,18rem)}
  .pa-hero__chevron--3{font-size:clamp(12rem,80vw,20rem)}
}
.pa-hero__content{
  position:relative;z-index:1;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:1.25rem;
}
.pa-hero .eyebrow{
  margin:0;
}
.pa-hero__title{
  font-family:var(--font-d,'Unbounded',sans-serif);
  font-weight:900;
  font-size:clamp(2rem,7vw,4.2rem);
  line-height:.95;
  letter-spacing:-.02em;
  color:var(--text);
  margin:0;
  word-break:break-word;
  overflow-wrap:break-word;
}
.pa-hero__lede{
  font-family:var(--font-b,'Rajdhani',sans-serif);
  font-weight:500;
  font-size:clamp(1rem,1.6vw,1.2rem);
  color:var(--muted);
  margin:0;
  max-width:620px;
  line-height:1.5;
}

/* ----- Section contenu ----- */
.pa-section{
  padding:3rem 0 6rem;
}
@media(min-width:880px){
  .pa-section{padding:4rem 0 8rem}
}

/* ----- Grille de cartes ----- */
.pa-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:3rem;
  margin:0 auto;
  max-width:1200px;
}
@media(min-width:720px){
  .pa-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:3.5rem}
}
@media(min-width:1100px){
  .pa-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:4rem}
}

/* ----- Recherche ----- */
.pa-search-wrap{
  margin:0 auto 3rem;
  max-width:520px;
}
@media(min-width:880px){
  .pa-search-wrap{margin-bottom:4rem}
}
.pa-search{
  position:relative;
  display:flex;
  align-items:center;
}
.pa-search-icon{
  position:absolute;
  left:1rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
.pa-search-input{
  width:100%;
  box-sizing:border-box;
  background:var(--bg-elev);
  color:var(--text);
  border:1px solid var(--line-strong);
  border-radius:0;
  padding:.85rem 2.5rem .85rem 2.85rem;
  font-family:var(--font-b,'Rajdhani',sans-serif);
  font-size:1rem;
  font-weight:500;
  letter-spacing:.04em;
  transition:border-color .15s ease, background .15s ease;
}
.pa-search-input::placeholder{
  color:var(--dim);
  letter-spacing:.05em;
}
.pa-search-input::-webkit-search-cancel-button{display:none}
.pa-search-input:focus{
  outline:none;
  border-color:var(--blue);
  background:var(--bg-card);
  box-shadow:0 0 0 3px rgba(0,170,255,.15);
}
.pa-search-clear{
  position:absolute;
  right:.5rem;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:none;
  color:var(--muted);
  cursor:pointer;
  padding:.45rem;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
  border-radius:0;
  transition:color .15s ease, background .15s ease;
}
.pa-search-clear:hover{color:var(--text);background:rgba(255,255,255,.05)}
.pa-search-count{
  margin:.85rem 0 0;
  text-align:center;
  font-family:var(--font-b,'Rajdhani',sans-serif);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dim);
  min-height:1em;
}
.pa-no-result{
  margin:1rem auto 0;
  max-width:520px;
  text-align:center;
  padding:1.25rem 1rem;
  border:1px dashed var(--line-strong);
  background:rgba(255,255,255,.02);
  font-family:var(--font-b,'Rajdhani',sans-serif);
  font-size:.9rem;
  color:var(--muted);
}
.pa-no-result[data-pa-no-result-q]{color:var(--text);font-weight:600}

/* ----- Carte (carré brutaliste, cohérent avec le reste) ----- */
.pa-card{
  display:flex;
  flex-direction:column;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:0;
  padding:1.5rem 1.5rem 1.4rem;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
  min-height:100%;
}
.pa-card[data-state="unlocked"]{
  border-color:rgba(57,255,20,.45);
  background:rgba(57,255,20,.04);
}
@media(hover:hover){
  .pa-card:not([data-state="unlocked"]):hover{
    border-color:var(--line-strong);
    transform:translateY(-2px);
  }
}

.pa-card-head{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:1.1rem;
}
.pa-card-head-text{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  min-width:0;
  flex:1 1 auto;
}
.pa-card-icon{
  flex:0 0 auto;
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  border-radius:0;
  background:rgba(0,170,255,.12);
  color:var(--blue);
  border:1px solid rgba(0,170,255,.3);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.pa-card[data-state="unlocked"] .pa-card-icon{
  background:rgba(57,255,20,.14);
  color:var(--green);
  border-color:rgba(57,255,20,.45);
}
.pa-card-icon svg{width:20px;height:20px}

.pa-card-title{
  font-family:var(--font-b,'Rajdhani',sans-serif);
  font-size:1.1rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--text);
  margin:0;
  line-height:1.25;
  word-break:break-word;
  overflow-wrap:break-word;
}
.pa-card-date{
  font-family:var(--font-b,'Rajdhani',sans-serif);
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
  margin:0;
}

.pa-card-body{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  margin-top:auto;
}

/* ----- Formulaire ----- */
.pa-form{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  margin:0;
}
.pa-form-label{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.pa-form-label > span{
  font-family:var(--font-b,'Rajdhani',sans-serif);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.pa-input{
  width:100%;
  box-sizing:border-box;
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--line-strong);
  border-radius:0;
  padding:.95rem 1.1rem;
  font-family:var(--font-b,'Rajdhani',sans-serif);
  font-size:1.05rem;
  letter-spacing:.18em;
  transition:border-color .15s ease, background .15s ease;
}
.pa-input::placeholder{
  color:var(--dim);
  letter-spacing:.3em;
}
.pa-input:focus{
  outline:none;
  border-color:var(--blue);
  background:var(--bg-elev);
}
.pa-input:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
}

.pa-form-actions{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  align-items:center;
}

/* ----- Boutons ----- */
.pa-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1.3rem;
  min-height:var(--tap);
  border-radius:0;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  font-family:var(--font-b,'Rajdhani',sans-serif);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
  text-decoration:none;
  line-height:1.1;
}
.pa-btn:disabled{opacity:.55;cursor:not-allowed}
.pa-btn:active:not(:disabled){transform:translateY(1px)}

.pa-btn--primary{
  background:var(--blue);
  color:var(--text-inv);
  border-color:var(--blue);
}
.pa-btn--primary:hover:not(:disabled){
  background:var(--text);
  color:var(--bg);
  border-color:var(--text);
}

.pa-btn--success{
  background:rgba(57,255,20,.14);
  color:var(--green);
  border-color:var(--green);
}
.pa-btn--success:hover:not(:disabled){
  background:var(--green);
  color:var(--bg);
}

.pa-btn--ghost{
  background:transparent;
  color:var(--muted);
  border-color:var(--line);
}
.pa-btn--ghost:hover:not(:disabled){
  border-color:var(--line-strong);
  color:var(--text);
  background:var(--hover-bg);
}

/* ----- État déverrouillé ----- */
.pa-unlocked{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  align-items:stretch;
}
.pa-hint{
  margin:0;
  font-family:var(--font-b,'Rajdhani',sans-serif);
  font-size:.9rem;
  font-weight:500;
  color:var(--muted);
  line-height:1.45;
}
.pa-hint--ok{
  color:var(--green);
  font-weight:600;
  letter-spacing:.05em;
}

/* ----- Message d'erreur ----- */
.pa-error{
  margin:0;
  padding:.7rem .9rem;
  background:rgba(255,77,77,.08);
  border-left:3px solid var(--danger);
  color:var(--danger);
  font-family:var(--font-b,'Rajdhani',sans-serif);
  font-size:.88rem;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.4;
}

/* ----- État vide ----- */
.pa-empty{
  text-align:center;
  padding:3rem 1.5rem;
  border:1px dashed var(--line-strong);
  background:rgba(255,255,255,.015);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
  max-width:520px;
  margin:0 auto;
}
.pa-empty-icon{
  font-size:2.4rem;
  line-height:1;
  opacity:.7;
}
.pa-empty-title{
  margin:0;
  font-family:var(--font-b,'Rajdhani',sans-serif);
  font-size:1rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text);
}
.pa-empty-sub{
  margin:0;
  font-family:var(--font-b,'Rajdhani',sans-serif);
  font-size:.9rem;
  line-height:1.5;
  color:var(--muted);
  max-width:42ch;
}

/* ----- Disclaimer ----- */
.pa-disclaimer{
  margin-top:5rem;
  padding:1.5rem 1.5rem;
  background:var(--bg-elev);
  border-left:3px solid var(--blue);
  font-family:var(--font-b,'Rajdhani',sans-serif);
  font-size:.9rem;
  font-weight:500;
  line-height:1.6;
  color:var(--muted);
  border-radius:0;
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
}
@media(min-width:880px){
  .pa-disclaimer{margin-top:6rem;padding:1.75rem 1.75rem}
}
.pa-disclaimer p{margin:0}
.pa-disclaimer strong{color:var(--text);font-weight:700}

/* ----- Loading ----- */
.pa-loading{
  text-align:center;
  padding:2.5rem 0;
  margin:0;
  font-family:var(--font-b,'Rajdhani',sans-serif);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--muted);
}
.pa-loading::before{
  content:"";
  display:block;
  width:24px;height:24px;
  margin:0 auto .75rem;
  border:2px solid var(--line-strong);
  border-top-color:var(--blue);
  border-radius:50%;
  animation:pa-spin .8s linear infinite;
}
@keyframes pa-spin{to{transform:rotate(360deg)}}

/* ----- Adaptations mobiles ----- */
@media(max-width:520px){
  .pa-card{padding:1.25rem 1.2rem}
  .pa-form-actions{flex-direction:column;align-items:stretch}
  .pa-form-actions .pa-btn{width:100%}
  .pa-unlocked .pa-btn{width:100%}
  .pa-hero{padding:calc(6rem + var(--safe-top)) 0 2.5rem}
  .pa-hero__title{font-size:clamp(1.8rem,9vw,2.6rem)}
}

/* ----- Thème clair ----- */
[data-theme="light"] .pa-card{background:var(--bg-card);border-color:var(--line)}
[data-theme="light"] .pa-input{background:var(--bg)}
[data-theme="light"] .pa-empty{background:rgba(0,0,0,.02)}
[data-theme="light"] .pa-disclaimer{background:var(--bg-elev)}