/* ============================================================
   Martin — Portfolio  ·  Light Editorial Cream
   Palette & type harmonisées avec legal.css
   ============================================================ */

/* ============================================================
   RESET TACTILE GLOBAL
   Objectif : supprimer tout rectangle / surbrillance natif au toucher sur
   mobile (surbrillance de "tap", menu contextuel d'appui long, sélection
   de texte). Bloc unique, en tête de fichier — rien d'autre ailleurs.
   ============================================================ */
*{
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
}
/* Aucun contour de focus au toucher / à la souris.
   On épargne :focus-visible (navigation clavier) → accessibilité préservée,
   et les champs de formulaire gardent leur halo de focus défini plus bas. */
*:focus:not(:focus-visible),
*:active{
  outline: none !important;
}
/* Sélection de texte coupée sur écran tactile : c'est elle qui dessinait le
   "rectangle bleu" de sélection au maintien du doigt. Les champs de saisie
   restent sélectionnables ; sur ordinateur la sélection/copie reste normale. */
@media (hover:none), (pointer:coarse){
  body{ -webkit-user-select:none; -moz-user-select:none; user-select:none; }
  input, textarea, select, [contenteditable]{
    -webkit-user-select:text; -moz-user-select:text; user-select:text;
  }
}

:root{
  --bg:#FAFAF7; --bg-2:#F2F1EC; --bg-3:#EEEDE6;
  --ink:#0E1116; --ink-2:#2A2F38; --muted:#6B7280;
  --line:#E6E4DD; --line-strong:#D6D3CB;
  --primary:#0E5A6B; --primary-2:#0EA5A8; --primary-tint:#E6F4F4;
  --accent:#F25C2A; --accent-ink:#B23E15; --accent-tint:#FCEbe3;
  --shadow-sm:0 1px 2px rgba(14,17,22,.05);
  --shadow-md:0 10px 30px -12px rgba(14,17,22,.18);
  --shadow-lg:0 30px 60px -24px rgba(14,17,22,.22);
  --radius:16px; --radius-lg:22px;
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1180px;
  --page-bg-mobile:
    radial-gradient(80vmax 64vmax at 6% 6%, rgba(14,165,168,.58), transparent 58%),
    radial-gradient(72vmax 64vmax at 98% 12%, rgba(120,222,222,.62), transparent 60%),
    radial-gradient(80vmax 68vmax at 92% 90%, rgba(242,92,42,.46), transparent 58%),
    radial-gradient(80vmax 68vmax at 2% 94%, rgba(14,90,107,.44), transparent 60%),
    linear-gradient(155deg, #6FCFCC 0%, #AEE2DA 32%, #E7DCCE 60%, #F4C49E 100%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* overscroll-behavior:none → supprime le "rubber-band" / pull-to-refresh qui,
   en tirant la page vers le bas, révélait le fond derrière le dégradé fixe
   (c'était LA cause du rectangle bleu au maintien du doigt sur Android). */
html,body{overscroll-behavior:none}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:transparent; color:var(--ink);
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--primary-2); color:#fff}
a{color:inherit}
img{max-width:100%; display:block}

/* ---------- Fond global : dégradé fluide coloré (support du glassmorphism) ---------- */
/* Base dégradée froid → chaud sur la racine : c'est ce calque qui couvre aussi
   la zone d'overscroll, donc plus jamais de bleu plat révélé au scroll tactile.
   (Pas de background-attachment:fixed → évite le flash de rectangle blanc connu.) */
html{ background:linear-gradient(150deg, #6FCFCC 0%, #AEE2DA 30%, #E7DCCE 58%, #F4C49E 100%); }
/* Un seul calque de fond, fixe et STATIQUE : pas d'animation ni de background-attachment:fixed
   (les deux provoquaient un flash de rectangle blanc sur les cartes en verre lors du scroll) */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46vmax 46vmax at 12% 14%, rgba(14,165,168,.55), transparent 58%),
    radial-gradient(40vmax 40vmax at 90% 6%, rgba(120,222,222,.60), transparent 60%),
    radial-gradient(50vmax 50vmax at 84% 86%, rgba(242,92,42,.42), transparent 58%),
    radial-gradient(52vmax 52vmax at 6% 92%, rgba(14,90,107,.40), transparent 60%),
    linear-gradient(150deg, #6FCFCC 0%, #AEE2DA 30%, #E7DCCE 58%, #F4C49E 100%);
}
/* sur smartphone : nappes plus larges (vmax) pour rester perceptibles en portrait */
@media (max-width:640px){
  body::before{
    background:var(--page-bg-mobile);
  }
}
.serif{font-family:'Instrument Serif','Times New Roman',serif; font-weight:400; font-style:italic; letter-spacing:-.01em}
.accent{color:var(--accent)}
.container{max-width:880px; margin:0 auto; padding:0 28px}
.container-wide{max-width:var(--maxw); margin:0 auto; padding:0 28px}

/* ---------- reveal (robuste : visible sans JS) ---------- */
.reveal{opacity:1}
html.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
html.js .reveal.is-visible{opacity:1; transform:none}
html.js .stagger > *{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--n,0) * .09s)}
html.js .stagger.is-visible > *{opacity:1; transform:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:15px; line-height:1; cursor:pointer;
  padding:15px 26px; border-radius:999px; border:1px solid transparent;
  text-decoration:none; transition:transform .25s var(--ease), background .2s ease, box-shadow .25s ease, border-color .2s ease;
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.btn-sm{padding:11px 18px; font-size:14px}
.btn-block{width:100%}
.btn-primary{background:var(--ink); color:#fff; box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:#000; transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn-ghost:hover{background:#fff; border-color:var(--ink-2); transform:translateY(-2px)}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--primary);
}
.eyebrow::before{content:''; width:26px; height:1px; background:var(--primary); opacity:.55}

/* ---------- nav (desktop) ---------- */
.topnav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.45);
  -webkit-backdrop-filter:saturate(160%) blur(18px); backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid transparent;
  transition:background .3s ease, box-shadow .3s ease;
}
.topnav.scrolled{background:rgba(255,255,255,.62)}
.topnav-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px max(28px, env(safe-area-inset-right)) 14px max(28px, env(safe-area-inset-left))}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:700; font-size:18px; letter-spacing:-.01em}
.brand-mark{width:30px; height:30px; border-radius:8px; background:var(--ink); display:inline-flex; align-items:center; justify-content:center; flex:none}
.nav-links{display:flex; gap:30px}
.nav-links a{position:relative; text-decoration:none; color:var(--ink-2); font-size:15px; font-weight:500; transition:color .2s}
.nav-links a::after{content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--accent); transition:width .3s var(--ease); border-radius:2px}
.nav-links a:hover{color:var(--ink)} .nav-links a:hover::after{width:100%}

/* ---------- hero ---------- */
.hero{position:relative; padding:120px 0 110px; overflow:hidden}
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.42) 58%, rgba(255,255,255,.20) 88%, rgba(255,255,255,.14) 100%);
}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none}
.orb{position:absolute; border-radius:50%; filter:blur(60px); opacity:.55}
.orb-1{width:520px; height:520px; top:-160px; right:-120px; background:radial-gradient(circle at 30% 30%, rgba(14,165,168,.5), transparent 70%)}
.orb-2{width:460px; height:460px; bottom:-180px; left:-120px; background:radial-gradient(circle at 50% 50%, rgba(242,92,42,.32), transparent 70%)}
.grid-overlay{position:absolute; inset:0; opacity:.28;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 60% at 50% 35%, #000 0%, transparent 80%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 35%, #000 0%, transparent 80%);}
.hero-inner{position:relative; z-index:1; max-width:920px}
.hero-title{font-size:clamp(40px,6.4vw,82px); line-height:1.02; letter-spacing:-.035em; font-weight:600; margin:22px 0 0; text-wrap:balance}
.hero-title .serif{font-size:1.04em}
.hero-sub{margin:26px 0 0; max-width:640px; font-size:clamp(17px,2vw,21px); color:var(--ink-2); line-height:1.55; text-wrap:pretty}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px}
.hero-trust{display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:40px; color:var(--muted); font-size:14px; font-weight:500}
.hero-trust i{width:4px; height:4px; border-radius:50%; background:var(--line-strong)}
.scroll-hint{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); width:26px; height:42px; border:1.5px solid var(--line-strong); border-radius:14px; z-index:1; display:flex; justify-content:center; padding-top:8px}
.scroll-hint span{width:4px; height:8px; border-radius:2px; background:var(--primary); animation:scrolldot 1.6s var(--ease) infinite}
@keyframes scrolldot{0%{opacity:0; transform:translateY(-4px)}40%{opacity:1}80%{opacity:0; transform:translateY(10px)}100%{opacity:0}}

/* ---------- sections ---------- */
.section{padding:104px 0; position:relative}
.section-alt{background:transparent}
#services::before{
  content:""; position:absolute; left:0; right:0; top:0; height:260px;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.08) 46%, rgba(255,255,255,0) 100%);
}
#services > .container-wide{position:relative; z-index:1}
.section-head{max-width:720px; margin-bottom:54px}
.section-title{font-size:clamp(30px,3.8vw,46px); line-height:1.1; letter-spacing:-.03em; font-weight:700; margin:18px 0 0; text-wrap:balance}
.section-lead{margin:18px 0 0; color:var(--muted); font-size:17px; max-width:620px}

/* ---------- services cards ---------- */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:34px 32px; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--line-strong)}
.card-ico{width:52px; height:52px; border-radius:14px; background:var(--primary-tint); display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:20px}
.card h3{font-size:21px; letter-spacing:-.02em; margin:0 0 10px}
.card p{margin:0 0 16px; color:var(--ink-2); font-size:15.5px}
.card-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.card-list li{position:relative; padding-left:22px; color:var(--muted); font-size:14.5px}
.card-list li::before{content:''; position:absolute; left:0; top:9px; width:8px; height:8px; border-radius:50%; background:var(--primary-2); opacity:.7}
.muted-tag{color:var(--accent-ink); font-style:italic}

/* ---------- process steps ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.step{position:relative; padding:28px 24px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.step-num{font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:13px; font-weight:600; color:var(--accent); background:var(--accent-tint); padding:4px 9px; border-radius:8px}
.step h4{margin:16px 0 8px; font-size:17px; letter-spacing:-.01em}
.step p{margin:0; color:var(--muted); font-size:14.5px}
.process-note{margin:36px auto 0; max-width:720px; text-align:center; color:var(--ink-2); font-size:17px}
.process-note strong{color:var(--ink)}

/* ---------- work ---------- */
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.work-card{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.work-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.work-preview{position:relative; height:210px; overflow:hidden; display:flex; align-items:center; justify-content:center}
.work-preview-crm{background:linear-gradient(135deg,#0E5A6B,#0EA5A8)}
.work-preview-3d{background:radial-gradient(circle at 50% 45%, #15323a, #0b1418)}
.work-preview-immo{background:linear-gradient(135deg,#7D5A34,#B98D61)}
.work-preview-tajmahal{background:radial-gradient(circle at 50% 40%,#241a12,#12100e)}
.wp-logo{max-width:80%; max-height:82%; object-fit:contain; filter:drop-shadow(0 8px 24px rgba(0,0,0,.35))}
.wp-3d{position:absolute; width:150px; height:150px; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(14,165,168,.9), rgba(242,92,42,.85), rgba(157,236,236,.9), rgba(14,165,168,.9));
  filter:blur(14px); opacity:.8; box-shadow:0 0 50px rgba(14,165,168,.5); animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* cadre navigateur avec vraie capture */
.work-shot{
  position:absolute; left:20px; right:20px; top:26px; bottom:-12px;
  border-radius:10px 10px 0 0; overflow:hidden; background:#fff;
  box-shadow:0 18px 40px -12px rgba(8,12,16,.45);
  transform:translateY(8px); transition:transform .5s var(--ease);
}
.work-card:hover .work-shot{transform:translateY(0) scale(1.015)}
.shot-bar{height:20px; background:#ECEAE4; display:flex; align-items:center; gap:5px; padding:0 9px; border-bottom:1px solid #E0DDD5}
.shot-bar span{width:7px; height:7px; border-radius:50%; background:#D2CFC6}
.work-shot img{width:100%; height:calc(100% - 20px); object-fit:cover; object-position:top left}
.work-preview-soon{background:repeating-linear-gradient(45deg,var(--bg-2),var(--bg-2) 12px,var(--bg-3) 12px,var(--bg-3) 24px)}
.work-preview-soon span{font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:#fff; padding:7px 14px; border-radius:999px; border:1px solid var(--line)}
.wp-badge{position:absolute; top:14px; right:14px; font-size:11px; font-weight:700; letter-spacing:.08em; color:#fff; background:rgba(0,0,0,.28); padding:5px 10px; border-radius:8px; backdrop-filter:blur(4px)}
.work-body{padding:24px 26px 28px}
.work-tags{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px}
.work-tags span{font-size:12px; font-weight:500; color:var(--primary); background:var(--primary-tint); padding:4px 10px; border-radius:999px}
.work-body h3{margin:0 0 8px; font-size:19px; letter-spacing:-.02em}
.work-body p{margin:0 0 18px; color:var(--ink-2); font-size:14.5px}
.work-link{display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:14.5px; color:var(--primary); text-decoration:none; transition:gap .25s var(--ease)}
.work-link:hover{gap:11px}
.work-card-soon{opacity:.78}

/* ---------- why ---------- */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.why-item{padding-top:22px; border-top:2px solid var(--ink)}
.why-item h4{margin:0 0 10px; font-size:18px; letter-spacing:-.01em}
.why-item p{margin:0; color:var(--muted); font-size:15px}

/* ---------- contact ---------- */
.section-contact{padding-bottom:120px}
.contact-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:48px clamp(24px,4vw,56px); box-shadow:var(--shadow-md);
  background-image:radial-gradient(60% 50% at 100% 0%, rgba(14,165,168,.06), transparent 60%), radial-gradient(50% 40% at 0% 100%, rgba(242,92,42,.05), transparent 60%);}
.contact-card .section-title{font-size:clamp(26px,3.4vw,38px)}
#contact-form{margin-top:30px; display:flex; flex-direction:column; gap:18px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.field{display:flex; flex-direction:column; gap:8px; min-width:0}
.field label{font-size:13px; font-weight:600; color:var(--ink-2)}
.field .opt{color:var(--muted); font-weight:400}
.field input,.field textarea{
  font-family:inherit; font-size:15px; color:var(--ink);
  padding:13px 15px; border:1px solid rgba(14,17,22,.14); border-radius:12px; background:rgba(255,255,255,.45);
  transition:border-color .2s, box-shadow .2s, background .2s; resize:vertical;
}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--primary-2); background:rgba(255,255,255,.92); box-shadow:0 0 0 4px var(--primary-tint)}
.field input::placeholder,.field textarea::placeholder{color:#9aa1ab}
.phone-row{display:flex; gap:10px; min-width:0}
.phone-row input{flex:1 1 0; min-width:0; width:auto}
.phone-row select{
  font-family:inherit; font-size:15px; color:var(--ink);
  padding:13px 12px; border:1px solid rgba(14,17,22,.14); border-radius:12px; background:rgba(255,255,255,.55);
  transition:border-color .2s, box-shadow .2s, background .2s; cursor:pointer;
  flex:none; width:118px;
}
.phone-row select:focus{outline:none; border-color:var(--primary-2); background:#fff; box-shadow:0 0 0 4px var(--primary-tint)}
.phone-hint{margin:8px 0 0; font-size:13px; color:var(--accent-ink)}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.form-status{margin:4px 0 0; font-size:14px; min-height:18px; text-align:center}
.form-status.ok{color:var(--primary)}
.form-status.err{color:var(--accent-ink)}
.contact-alt{margin:22px 0 0; text-align:center; color:var(--muted); font-size:14.5px}
.contact-alt a{color:var(--primary); text-decoration:none; border-bottom:1px solid rgba(14,90,107,.3)}
.contact-alt a:hover{border-bottom-color:var(--primary)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink); color:#cfd3da; padding:54px 0 30px}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand{display:flex; align-items:center; gap:14px}
.footer-brand .brand-mark{background:rgba(255,255,255,.08)}
.footer-brand strong{display:block; color:#fff; font-size:16px}
.footer-brand span{font-size:13px; color:#9aa1ab}
.footer-links{display:flex; flex-wrap:wrap; gap:22px}
.footer-links a{color:#cfd3da; text-decoration:none; font-size:14px; font-weight:500; transition:color .2s}
.footer-links a:hover{color:#fff}
.footer-base{padding-top:22px; font-size:13px; color:#7d828c}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-links{display:none}
  .cards,.work-grid,.steps,.why-grid{grid-template-columns:1fr 1fr}
  .section{padding:80px 0}
  .hero{padding:90px 0 80px}
}
@media (max-width:640px){
  body{font-size:16px}
  .cards,.work-grid,.steps,.why-grid,.form-row{grid-template-columns:1fr}
  .topnav .nav-cta{display:none}
  .hero{padding:70px 0 60px}
  .hero-cta{flex-direction:column; align-items:stretch}
  .hero-cta .btn{width:100%}
  .section-head{margin-bottom:38px}
  .contact-card{padding:32px 22px}
  .field input,.field textarea,.phone-row select{font-size:16px}
  .footer-inner{flex-direction:column; align-items:flex-start}
  .scroll-hint{display:none}
}

/* ============================================================
   Niveau « wow » — hero orchestré, stagger, curseur, menu mobile
   ============================================================ */

/* ---------- hero : entrée orchestrée ---------- */
html.js .hero .eyebrow.reveal{transition-delay:.05s}
html.js .hero-sub.reveal{transition-delay:.55s}
html.js .hero-cta.reveal{transition-delay:.72s}
html.js .hero-trust.reveal{transition-delay:.9s}

/* titre splitté mot à mot (classes posées par le JS uniquement) */
.split-word{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em}
.split-inner{display:inline-block}
html.js [data-split].is-split{opacity:1; transform:none; transition:none}
html.js [data-split].is-split .split-inner{
  transform:translateY(112%); opacity:0;
  transition:transform .85s var(--ease), opacity .5s ease;
  transition-delay:calc(.12s + var(--i,0) * .055s);
}
html.js [data-split].is-split.is-visible .split-inner{transform:none; opacity:1}

/* trait des eyebrows qui se dessine */
html.js .reveal .eyebrow::before{width:0; transition:width .9s var(--ease) .35s}
html.js .reveal.is-visible .eyebrow::before{width:26px}

/* orbes : respiration continue (opacité seulement — le transform reste au JS) */
@keyframes orb-breathe{0%,100%{opacity:.34}50%{opacity:.22}}
.orb{animation:orb-breathe 9s ease-in-out infinite}
.orb-2{animation-delay:-4.5s}

/* ---------- glow des cartes suivant la souris ---------- */
.glow{position:relative}
html.js .glow::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .4s ease; z-index:1;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(14,165,168,.12), transparent 65%);
}
html.js .glow:hover::after{opacity:1}

/* ---------- curseur personnalisé (halo unique collé au curseur natif) ---------- */
.cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; border-radius:50%;
  z-index:9999; opacity:0;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1.5px solid rgba(14,90,107,.4);
  transition:width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), border-color .25s ease, background .25s ease;
}
html.cursor-on .cursor-ring{opacity:1}
html.cursor-hover .cursor-ring{
  width:52px; height:52px; margin:-26px 0 0 -26px;
  border-color:rgba(242,92,42,.55); background:rgba(242,92,42,.06);
}
@media (hover:none), (pointer:coarse){.cursor-ring{display:none}}

/* ---------- burger & menu mobile ---------- */
.nav-burger{
  display:none; flex-direction:column; justify-content:center; gap:6px;
  width:44px; height:44px; padding:10px; flex:none;
  background:transparent; border:none; border-radius:10px; cursor:pointer;
  -webkit-appearance:none; appearance:none; outline:none;
  -webkit-tap-highlight-color:transparent;
}
.nav-burger:hover{background:var(--bg-2)}
.nav-burger span{display:block; height:2px; border-radius:2px; background:var(--ink); transition:transform .35s var(--ease), opacity .25s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
@media (max-width:900px){.nav-burger{display:inline-flex}}
html:not(.js) .nav-burger{display:none !important}

.mobile-menu{
  position:fixed; inset:0; top:0; padding-top:calc(86px + env(safe-area-inset-top)); z-index:-1;
  min-height:100vh; min-height:100dvh; overflow-y:auto;
  background:#FAFAF7; /* fond solide opaque — pas de backdrop-filter (perf + zéro artefact tactile) */
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.mobile-menu.open{opacity:1; pointer-events:auto}
.mobile-menu nav{
  display:flex; flex-direction:column; gap:6px;
  padding:24px max(28px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
}
.mobile-menu nav > a:not(.btn){
  font-family:'Instrument Serif','Times New Roman',serif; font-style:italic;
  font-size:clamp(30px,8vw,42px); letter-spacing:-.01em;
  color:var(--ink); text-decoration:none; padding:10px 0;
  border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .2s ease;
  transition-delay:calc(var(--n,0) * .06s + .08s);
}
.mobile-menu.open nav > a:not(.btn){opacity:1; transform:none}
.mobile-menu nav > a:not(.btn):hover{color:var(--accent)}
.mobile-menu-cta{
  margin-top:26px; opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--ease) .35s, transform .5s var(--ease) .35s, background .2s ease;
}
.mobile-menu.open .mobile-menu-cta{opacity:1; transform:none}
html.menu-open,
html.menu-open body{overflow:hidden}
html.menu-open .topnav{background:#FAFAF7}
html.menu-open .mobile-menu{z-index:55}

/* ---------- focus visible ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--primary-2); outline-offset:3px; border-radius:4px;
}
.btn:focus-visible{outline-offset:4px; border-radius:999px}

/* ---------- accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  html.js .reveal, html.js .stagger > *{opacity:1 !important; transform:none !important; transition:none !important}
  html.js [data-split].is-split .split-inner{transform:none !important; opacity:1 !important; transition:none !important}
  html.js .reveal .eyebrow::before{width:26px; transition:none}
  .orb,.wp-3d,.scroll-hint span,body::before{animation:none !important}
  .cursor-ring{display:none}
  .work-shot,.card,.work-card,.btn{transition:none !important}
}

/* ============================================================
   Glassmorphism — surfaces translucides « givrées » unifiées
   (placé en fin de fichier pour primer sur les fonds blancs)
   ============================================================ */
.card,
.step,
.work-card,
.contact-card{
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 10px 34px -14px rgba(14,17,22,.20), inset 0 1px 0 rgba(255,255,255,.5);
}
/* contact : un peu plus opaque (beaucoup de texte + formulaire) */
.contact-card{background:rgba(255,255,255,.62); background-image:none}
/* hover : le verre s'éclaircit légèrement */
.card:hover,
.work-card:hover{
  background:rgba(255,255,255,.68);
  border-color:rgba(255,255,255,.85);
  box-shadow:0 26px 52px -22px rgba(14,17,22,.30), inset 0 1px 0 rgba(255,255,255,.6);
}
/* sur mobile : flou plus léger pour préserver les performances */
@media (max-width:640px){
  .card,.step,.work-card,.contact-card{
    -webkit-backdrop-filter:blur(12px) saturate(140%);
    backdrop-filter:blur(12px) saturate(140%);
  }
}
/* repli : navigateurs sans backdrop-filter → surfaces opaques (lisibilité garantie) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.step,.work-card{background:rgba(255,255,255,.93)}
  .contact-card{background:rgba(255,255,255,.95)}
  .topnav{background:rgba(250,250,247,.95)}
}

/* ============================================================
   Appareils tactiles : aucun backdrop-filter (cause du « rectangle »
   blanc/bleuté qui clignote au scroll tactile sur mobile).
   Surfaces translucides sans flou → look préservé, zéro re-rendu.
   ============================================================ */
@media (hover: none), (pointer: coarse){
  html{
    background:var(--page-bg-mobile);
  }
  body{
    min-height:100vh;
    min-height:100dvh;
    background:var(--page-bg-mobile);
    background-repeat:no-repeat;
    background-size:100% 100%;
  }
  body::before{display:none;}
  .card, .step, .work-card, .contact-card, .topnav, .topnav.scrolled, .mobile-menu{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  .card, .step, .work-card{background:rgba(255,255,255,.74)}
  .contact-card{background:rgba(255,255,255,.82)}
  /* Nav tactile : transparente en haut, voile léger au scroll, SANS flou ni bordure
     → plus de rectangle blanc qui clignote, et elle redevient bien transparente */
  .topnav{background:transparent}
  .topnav.scrolled{background:rgba(255,255,255,.6)}
  .mobile-menu{background:#FAFAF7}
  /* pas d'états de survol « collants » au toucher (autre source de re-rendu) */
  .glow::after{display:none}
  .card:hover, .work-card:hover{transform:none; box-shadow:0 10px 34px -14px rgba(14,17,22,.18)}
}

/* ============================================================
   Améliorations visuelles — 2026-06-14 (additif, non destructif)
   ============================================================ */

/* 1) Mot accentué des TITRES DE SECTION : dégradé chaud subtil plutôt qu'un
   orange plat. Volontairement PAS appliqué au titre hero (mots animés/clippés
   → background-clip:text y est instable). Garde-fou @supports → sinon orange plein. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .section-title .accent{
    background-image:linear-gradient(105deg, #F25C2A 0%, #FF8A3D 55%, #E0481B 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}

/* 2) Bouton primaire : léger dégradé de profondeur + retour d'appui net */
.btn-primary{ background-image:linear-gradient(135deg, #20242c 0%, #0E1116 70%); }
.btn-primary:active{ transform:translateY(0) scale(.985); }

/* 3) Titres de section : la barre de l'eyebrow passe en dégradé de marque */
.eyebrow::before{ background:linear-gradient(90deg, var(--primary-2), var(--accent)); opacity:.8; }

/* Respect du « mouvement réduit » : pas d'effet d'appui animé */
@media (prefers-reduced-motion: reduce){
  .btn-primary:active{ transform:none; }
}