/* ============================================================================
   detail.css — pages détail projet, direction D1 (récit produit, rythme
   horizontal aéré, charte DUO par projet). Remplace l'ancien microsoft.css.
   Chaque page pose --brand / --brand2 / --g2 en inline (charte réelle du projet).
   Se raccorde aux tokens du site (--bg, --text, --text-muted, --accent, --accent-ms,
   --border) → suit le thème. Dark = priorité ; light = passe finale.
   ============================================================================ */
[data-detail]{
  --gut:9%;
  --disp:"Archivo",sans-serif;--mono:"JetBrains Mono",monospace;--body:"Poppins",sans-serif;
  /* garde-fous si un projet n'a pas de duo : mono sur la principale */
  --brand:var(--accent);--brand2:var(--brand);--g2:var(--brand2);
  --ink2:#0a0708; /* base sombre des panneaux colorés (médias) */
  background:var(--bg);color:var(--text);font-family:var(--body);overflow-x:hidden;
}
[data-detail] .dt-wrap{max-width:1140px;margin:0 auto;padding:0 var(--gut)}

/* Fonds — « souffle » : lueurs couleur-projet + rose décalées derrière tout le
   contenu (sous le nav). Subtil, GPU, jamais sur le texte. reduced-motion → calme. */
[data-detail] main{position:relative;isolation:isolate}
[data-detail] main::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;will-change:opacity;
  background:
    radial-gradient(50% 28% at 88% 7%, color-mix(in srgb,var(--brand) 4%,transparent), transparent 56%),
    radial-gradient(56% 30% at 10% 44%, color-mix(in srgb,var(--accent) 3%,transparent), transparent 58%),
    radial-gradient(52% 28% at 86% 82%, color-mix(in srgb,var(--brand) 3%,transparent), transparent 56%);
  animation:dt-page-breathe 16s ease-in-out infinite alternate;
}
@keyframes dt-page-breathe{from{opacity:.4}to{opacity:.72}}
@media(prefers-reduced-motion:reduce){[data-detail] main::before{animation:none;opacity:.6}}

/* nav — VISUELLEMENT IDENTIQUE à la barre de l'index (.header-sticky) : même fond
   (bg 80%→92% au scroll), même blur 10px, même hauteur 72→58px au scroll, même filet
   (transparent→border), même gouttière clamp. Le blur est sur ::before (un pseudo,
   PAS un ancêtre du #sidemenu fixed) → il ne recrée pas le containing-block qui piégeait
   le menu. .dt-nav-shell reste sticky (in-flow → réserve sa hauteur, pas de padding-top
   à gérer). Menu : aucun ancêtre backdrop-filter → #sidemenu relatif au viewport, fermé
   = display:none (style.css) → pas d'overflow. Scroll : app.js pose .scrolled ici. */
[data-detail] .dt-nav-shell{position:sticky;top:0;z-index:200;height:72px;display:flex;align-items:stretch;background:transparent;border-bottom:1px solid transparent;transition:height .3s ease,border-color .3s ease}
[data-detail] .dt-nav-shell::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .3s ease;pointer-events:none}
[data-detail] .dt-nav-shell.scrolled{height:58px;border-bottom-color:var(--border)}
[data-detail] .dt-nav-shell.scrolled::before{background:color-mix(in srgb,var(--bg) 92%,transparent)}
[data-detail] .dt-nav-shell .container{max-width:none;margin:0;padding:0 clamp(20px,5vw,64px);display:flex;align-items:center;width:100%}
[data-detail] .dt-nav-shell .header-sticky{position:static;width:100%;height:auto;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;display:flex;align-items:center;justify-content:space-between}

/* bouton RETOUR en haut (sous le nav, intégré au hero) — mono, accent charte */
[data-detail] .dt-topback{display:inline-flex;align-items:center;gap:9px;margin-top:28px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);text-decoration:none;transition:color .25s,gap .25s}
[data-detail] .dt-topback i{color:var(--brand);transition:transform .3s}
[data-detail] .dt-topback:hover{color:var(--text);gap:13px}
[data-detail] .dt-topback:hover i{transform:translateX(-3px)}

/* petits utilitaires typo */
[data-detail] .dt-eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:14px;margin-bottom:22px}
[data-detail] .dt-eyebrow::before{content:"";width:38px;height:2px;background:linear-gradient(90deg,var(--brand),var(--g2))}
[data-detail] .dt-sec-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:12px;margin-bottom:30px}
[data-detail] .dt-sec-eyebrow .dt-num{color:var(--brand);font-weight:600}
[data-detail] .dt-sec-eyebrow::before{content:"";width:28px;height:2px;background:linear-gradient(90deg,var(--brand),var(--g2))}
[data-detail] .dt-prose{font-size:clamp(16px,1.7vw,19px);line-height:1.74;color:var(--text-muted);font-weight:300}
[data-detail] .dt-prose b{color:var(--text);font-weight:500}

/* placeholders duotone (duo brand → brand2) + vraie image */
[data-detail] .dt-ph{position:absolute;inset:0;background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 58%,var(--ink2)),color-mix(in srgb,var(--brand2) 34%,var(--ink2)) 84%)}
[data-detail] .dt-ph::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px)}
[data-detail] .dt-ph-label{position:absolute;left:16px;bottom:13px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72)}
[data-detail] .dt-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ===== HERO ===== */
[data-detail] .dt-hero{padding:5vh 0 9vh}
[data-detail] .dt-hero--app{display:grid;grid-template-columns:1.05fr .82fr;gap:56px;align-items:center}
[data-detail] .dt-hero--web{padding-bottom:0}
[data-detail] .dt-htext{max-width:60ch}
[data-detail] .dt-hero h1{font-family:var(--disp);font-weight:900;font-size:clamp(50px,8vw,112px);line-height:.9;letter-spacing:-.035em}
[data-detail] .dt-hero h1 .dt-b{background:linear-gradient(120deg,var(--brand),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}
[data-detail] .dt-sub{font-family:var(--disp);font-weight:700;font-size:clamp(19px,2.5vw,29px);color:#e6e1e9;letter-spacing:-.01em;margin:10px 0 20px;max-width:24ch}
[data-detail] .dt-lead{font-size:clamp(15px,1.5vw,18px);line-height:1.72;color:var(--text-muted);font-weight:300;max-width:52ch}
[data-detail] .dt-meta{margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
[data-detail] .dt-meta b{color:var(--brand);font-weight:600}
[data-detail] .dt-meta .dt-dot{width:4px;height:4px;border-radius:50%;background:var(--border)}
[data-detail] .dt-meta a{color:var(--brand);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--brand) 50%,transparent)}
/* visuel app : device portrait */
[data-detail] .dt-device{position:relative;aspect-ratio:4/5;border-radius:26px;overflow:hidden;border:1px solid color-mix(in srgb,var(--brand) 34%,var(--border));box-shadow:0 40px 80px -44px color-mix(in srgb,var(--brand) 50%,transparent)}
[data-detail] .dt-device .dt-cap{position:absolute;right:18px;top:16px;font-family:var(--disp);font-weight:900;font-size:32px;color:#fff;opacity:.9;letter-spacing:-.02em}
/* visuel web : navigateur paysage */
[data-detail] .dt-browser{margin-top:44px;border-radius:16px;overflow:hidden;border:1px solid color-mix(in srgb,var(--brand) 30%,var(--border));box-shadow:0 40px 80px -46px color-mix(in srgb,var(--brand) 46%,transparent)}
[data-detail] .dt-browser-bar{height:40px;background:#121014;display:flex;align-items:center;gap:7px;padding:0 15px;border-bottom:1px solid var(--border)}
[data-detail] .dt-browser-bar i{width:11px;height:11px;border-radius:50%;background:#3a3a3a;display:block}
[data-detail] .dt-browser-bar .dt-url{margin-left:14px;font-family:var(--mono);font-size:11px;color:var(--text-muted)}
[data-detail] .dt-browser-shot{position:relative;aspect-ratio:16/9}
[data-detail] .dt-browser-shot .dt-cap{position:absolute;right:20px;bottom:15px;font-family:var(--disp);font-weight:900;font-size:clamp(22px,4vw,42px);color:#fff;opacity:.9;letter-spacing:-.02em}

/* ===== BAND promesse (secondaire dominante) ===== */
[data-detail] .dt-band{position:relative;overflow:hidden;padding:14vh 0;margin-top:12vh;background:linear-gradient(115deg,color-mix(in srgb,var(--brand2) 22%,var(--bg)),var(--bg) 74%);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
[data-detail] .dt-hero--app + .dt-band{margin-top:0}
[data-detail] .dt-band .dt-wm{position:absolute;right:2%;top:50%;transform:translateY(-50%);font-family:var(--disp);font-weight:900;font-size:30vw;line-height:1;color:color-mix(in srgb,var(--brand2) 15%,transparent);pointer-events:none;user-select:none}
[data-detail] .dt-band .dt-k{position:relative;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin-bottom:20px}
[data-detail] .dt-band h2{position:relative;font-family:var(--disp);font-weight:900;font-size:clamp(32px,5.4vw,68px);line-height:1.02;letter-spacing:-.025em;max-width:16ch}
[data-detail] .dt-band h2 em{font-style:normal;background:linear-gradient(120deg,var(--brand),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}

[data-detail] .dt-section{padding:12vh 0;border-top:1px solid var(--border)}

/* ===== 01 POURQUOI ===== */
[data-detail] .dt-why{padding:12vh 0}
[data-detail] .dt-why .dt-txt{max-width:46ch}
[data-detail] .dt-why .dt-quote{margin:6vh 0 0 auto;max-width:66%;padding:40px 44px;border-radius:18px;background:color-mix(in srgb,var(--brand) 9%,var(--bg));border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border));border-left:3px solid var(--brand)}
[data-detail] .dt-pullquote{font-family:var(--disp);font-weight:900;font-size:clamp(24px,3.2vw,40px);line-height:1.08;letter-spacing:-.02em;color:var(--text);max-width:22ch}
[data-detail] .dt-pullquote em{font-style:normal;background:linear-gradient(120deg,var(--brand),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== 02 DÉMARCHE ===== */
[data-detail] .dt-how{display:grid;grid-template-columns:.82fr 1.18fr;gap:52px;align-items:center;padding:11vh 0}
[data-detail] .dt-how--web{grid-template-columns:1fr 1fr}
[data-detail] .dt-how-media{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 40%,var(--ink2)),color-mix(in srgb,var(--brand2) 30%,var(--ink2)) 86%);border:1px solid color-mix(in srgb,var(--brand) 28%,var(--border))}
[data-detail] .dt-how--web .dt-how-media{aspect-ratio:4/3}
[data-detail] .dt-how-media::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 24px)}
[data-detail] .dt-how-media .dt-float{position:relative;width:66%;aspect-ratio:9/16;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.2);box-shadow:0 30px 60px -26px rgba(0,0,0,.6)}
[data-detail] .dt-how--web .dt-how-media .dt-float{width:82%;aspect-ratio:16/10;border-radius:12px}
/* Démarche : VRAIE image de process (remplace le placeholder codé en dur). Image entière
   (contain), fond sombre pour un léger letterbox propre, cliquable → lightbox. */
[data-detail] .dt-how-media--img{cursor:pointer}
[data-detail] .dt-how-media--img .dt-float{background:#0a0809}
[data-detail] .dt-how-media--img .dt-img{object-fit:contain;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
[data-detail] .dt-how-media--img .dt-sweep{position:absolute;inset:0;background:linear-gradient(100deg,transparent 34%,color-mix(in srgb,var(--brand) 55%,transparent) 50%,transparent 66%);background-size:250% 100%;background-position:130% 0;transition:background-position 1s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover){[data-detail] .dt-how-media--img:hover .dt-img{transform:scale(1.04)}[data-detail] .dt-how-media--img:hover .dt-sweep{background-position:-30% 0}}
/* Démarche SANS image → 1 colonne, texte seul (fini le faux placeholder « Galerie »). */
[data-detail] .dt-how--solo{grid-template-columns:1fr}
[data-detail] .dt-choice{padding:20px 0;border-bottom:1px solid var(--border)}
[data-detail] .dt-choice:first-of-type{border-top:1px solid var(--border)}
[data-detail] .dt-choice h3{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.01em;margin-bottom:6px}
[data-detail] .dt-choice h3 span{color:var(--brand);font-family:var(--mono);font-size:12px;margin-right:8px}
[data-detail] .dt-choice p{font-size:14.5px;line-height:1.6;color:var(--text-muted);font-weight:300}

/* ===== 03 RÉSULTAT ===== */
[data-detail] .dt-result{padding:12vh 0}
[data-detail] .dt-features{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
[data-detail] .dt-features--one{grid-template-columns:1fr}
[data-detail] .dt-feat{position:relative;padding:18px 0 18px 22px;border-bottom:1px solid var(--border)}
[data-detail] .dt-feat::before{content:"";position:absolute;left:0;top:22px;width:9px;height:9px;border-radius:2px;background:linear-gradient(135deg,var(--brand),var(--g2))}
[data-detail] .dt-feat b{display:block;font-weight:500;color:var(--text);margin-bottom:3px}
[data-detail] .dt-feat span{font-size:14px;color:var(--text-muted);font-weight:300;line-height:1.55}

/* ===== STATUT (bande secondaire) ===== */
[data-detail] .dt-statusband{padding:9vh 0;background:linear-gradient(250deg,color-mix(in srgb,var(--brand2) 18%,var(--bg)),var(--bg) 72%);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
[data-detail] .dt-statusband .dt-in{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 30px}
[data-detail] .dt-statusband .dt-lab{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
[data-detail] .dt-statusband p{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.6vw,32px);letter-spacing:-.01em;color:var(--text);max-width:30ch;line-height:1.15}

/* ===== GALERIE ===== */
[data-detail] .dt-gallery{padding:12vh 0}
[data-detail] .dt-gal{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr;gap:16px;aspect-ratio:16/9}
[data-detail] .dt-shot{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border);cursor:pointer;background:var(--ink2)}
[data-detail] .dt-shot:nth-child(1){grid-row:1/3}
/* galerie réelle (N images) — grille adaptative, s'ajuste au nombre */
[data-detail] .dt-gal--full{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-template-rows:auto;aspect-ratio:auto}
[data-detail] .dt-gal--full .dt-shot{aspect-ratio:16/10}
[data-detail] .dt-gal--full .dt-shot:nth-child(1){grid-row:auto}
/* ===== Apps (data-kind="app") : médias PORTRAIT — captures téléphone ENTIÈRES ===== */
/* Héros : le device devient un vrai format téléphone, image en contain (jamais recadrée,
   le haut/logo n'est pas coupé). Hauteur pilotée → largeur dérivée, centré dans sa colonne. */
[data-detail][data-kind="app"] .dt-device{aspect-ratio:9/19.5;height:min(68vh,600px);width:auto;justify-self:center;align-self:center;background:#0a0809}
[data-detail][data-kind="app"] .dt-device .dt-img{object-fit:contain}
/* Galerie : tuiles portrait, image entière (contain), fond sombre pour un léger letterbox propre. */
[data-detail][data-kind="app"] .dt-gal--full{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
[data-detail][data-kind="app"] .dt-gal--full .dt-shot{aspect-ratio:9/18;background:#0a0809}
[data-detail][data-kind="app"] .dt-gal--full .dt-shot .dt-img{object-fit:contain}
/* cover LOGO d'outil → carte de marque (logo centré, contain, de l'air — pas d'étirement) */
[data-detail] .dt-logofield{position:absolute;inset:0;display:grid;place-items:center;padding:11%;background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 16%,var(--ink2)),var(--ink2) 88%)}
[data-detail] .dt-logofield::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 1px,transparent 1px 26px)}
[data-detail] .dt-logo{position:relative;max-width:56%;max-height:60%;object-fit:contain;filter:drop-shadow(0 12px 34px rgba(0,0,0,.45))}
[data-detail] .dt-shot .dt-ph,[data-detail] .dt-shot .dt-img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
[data-detail] .dt-shot .dt-sweep{position:absolute;inset:0;background:linear-gradient(100deg,transparent 34%,color-mix(in srgb,var(--brand) 55%,transparent) 50%,transparent 66%);background-size:250% 100%;background-position:130% 0;transition:background-position 1s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover){[data-detail] .dt-shot:hover .dt-ph,[data-detail] .dt-shot:hover .dt-img{transform:scale(1.05)}[data-detail] .dt-shot:hover .dt-sweep{background-position:-30% 0}}

/* ===== STACK discrète ===== */
[data-detail] .dt-stack{padding:8vh 0;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;align-items:center;gap:14px}
[data-detail] .dt-stack .dt-lab{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
[data-detail] .dt-stack .dt-chips{display:flex;flex-wrap:wrap;gap:8px}
[data-detail] .dt-chip{font-family:var(--mono);font-size:12px;color:var(--text-muted);border:1px solid var(--border);border-radius:999px;padding:6px 12px}

[data-detail] .dt-end{padding:8vh 0;border-top:1px solid var(--border);text-align:center}
[data-detail] .dt-back{display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border-radius:8px;font-family:var(--body);font-weight:500;text-decoration:none;color:var(--text);border:1px solid var(--border);transition:border-color .3s,color .3s}
[data-detail] .dt-back:hover{border-color:var(--brand);color:var(--brand)}
[data-detail] footer{padding:36px var(--gut);border-top:1px solid var(--border);text-align:center;font-family:var(--mono);font-size:12px;color:var(--text-muted)}
[data-detail] footer .dt-r{background:linear-gradient(90deg,var(--accent),var(--accent-ms));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== VIDÉO — carte "play" (ouvre la modale via lightbox.js) ; s'efface si absente ===== */
[data-detail] .dt-video{padding:12vh 0}
[data-detail] .dt-videocard{position:relative;display:block;width:100%;aspect-ratio:16/9;border:1px solid color-mix(in srgb,var(--brand) 30%,var(--border));border-radius:16px;overflow:hidden;cursor:pointer;background:var(--ink2);padding:0}
[data-detail] .dt-videocard .dt-ph{background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 46%,var(--ink2)),color-mix(in srgb,var(--brand2) 30%,var(--ink2)) 86%)}
[data-detail] .dt-playbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:76px;height:76px;border-radius:999px;background:linear-gradient(135deg,var(--brand),var(--g2));color:#160d02;font-size:23px;box-shadow:0 20px 50px -14px color-mix(in srgb,var(--brand) 60%,transparent);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
[data-detail] .dt-playbtn i{margin-left:4px}
@media(hover:hover){[data-detail] .dt-videocard:hover .dt-playbtn{transform:translate(-50%,-50%) scale(1.08)}}
[data-detail] .dt-videobody{margin-top:18px;max-width:60ch;font-size:15px;line-height:1.7;color:var(--text-muted);font-weight:300}

/* ===== LIGHTBOX (DA) — construit par lightbox.js, appended au body[data-detail] ===== */
[data-detail] .dt-lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:5vh 5vw;
  background:color-mix(in srgb,var(--ink2) 90%,transparent);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s}
[data-detail] .dt-lb.open{opacity:1;visibility:visible;pointer-events:auto}
[data-detail] .dt-lb-fig{margin:0;max-width:min(1100px,94vw);display:flex;flex-direction:column;align-items:center;gap:14px;transform:scale(.96);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
[data-detail] .dt-lb.open .dt-lb-fig{transform:none}
[data-detail] .dt-lb img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:14px;border:1px solid color-mix(in srgb,var(--brand) 40%,var(--border));box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
[data-detail] .dt-lb-video{display:none;width:min(1040px,92vw);aspect-ratio:16/9;transform:scale(.96);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
[data-detail] .dt-lb.open .dt-lb-video{transform:none}
[data-detail] .dt-lb-video iframe{width:100%;height:100%;border:1px solid color-mix(in srgb,var(--brand) 40%,var(--border));border-radius:14px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
[data-detail] .dt-lb figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);text-align:center}
[data-detail] .dt-lb-close{position:absolute;top:20px;right:24px;display:grid;place-items:center;width:42px;height:42px;font-family:var(--mono);font-size:15px;color:#fff;background:rgba(0,0,0,.35);border:1px solid var(--border);border-radius:999px;cursor:pointer;transition:border-color .25s,color .25s,transform .25s}
[data-detail] .dt-lb-close:hover{border-color:var(--brand);color:var(--brand);transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){[data-detail] .dt-lb,[data-detail] .dt-lb-fig,[data-detail] .dt-lb-close{transition:none}}

/* ===== motion — famille du site ===== */
[data-detail] .rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
[data-detail] .rv.in{opacity:1;transform:none}
@supports(animation-timeline:view()){@media(prefers-reduced-motion:no-preference) and (min-width:769px){
  [data-detail] .dt-why .rv,[data-detail] .dt-result .rv,[data-detail] .dt-gallery .rv,[data-detail] .dt-hero .rv,[data-detail] .dt-band .rv{animation:dt-exit linear both;animation-timeline:view();animation-range:exit 8% exit 100%;animation-fill-mode:forwards}
  @keyframes dt-exit{to{opacity:0;transform:translateY(-16px);filter:blur(3px)}}
}}

/* ===== DÉTAIL — tablette/mobile (≤768, breakpoint unifié) ===== */
@media(max-width:768px){
  [data-detail]{--gut:7%}
  /* HERO 1 colonne ; titres longs (Ticketing IT) ne débordent pas → min réduit */
  [data-detail] .dt-hero{padding:4vh var(--gut) 7vh} /* rend la gouttière : sinon le shorthand écrase le padding de .dt-wrap → hero collé aux bords (texte à gauche, vide à droite) */
  [data-detail] .dt-hero--app{grid-template-columns:1fr;gap:30px}
  [data-detail] .dt-hero h1{font-size:clamp(33px,9vw,60px)}
  [data-detail] .dt-device{max-width:300px;justify-self:center;margin-inline:auto}
  /* POURQUOI : citation pleine largeur */
  [data-detail] .dt-why{padding:8vh 0}
  [data-detail] .dt-why .dt-quote{max-width:100%;margin:5vh 0 0;padding:26px 24px}
  /* DÉMARCHE (split) 1 colonne */
  [data-detail] .dt-how{grid-template-columns:1fr;gap:28px;padding:8vh 0}
  [data-detail] .dt-how-media{max-width:320px;justify-self:center;margin-inline:auto}
  /* RÉSULTAT 1 colonne */
  [data-detail] .dt-result{padding:8vh 0}
  [data-detail] .dt-features{grid-template-columns:1fr}
  /* BANDES : moins d'air ; watermark géant contenu (poussé hors champ à droite,
     overflow:hidden → aucun scroll horizontal, pas de clash avec le titre) */
  [data-detail] .dt-band{padding:7vh 0;margin-top:7vh}
  /* watermark géant : plaisir desktop, mais sa boîte (absolute, right négatif + 42vw)
     déborde le viewport sur mobile → décale la page. On le masque sur mobile. */
  [data-detail] .dt-band .dt-wm{display:none}
  [data-detail] .dt-statusband{padding:7vh 0}
  /* GALERIE 1 colonne, images cadrées */
  [data-detail] .dt-gallery{padding:8vh 0}
  [data-detail] .dt-gal{grid-template-columns:1fr;grid-template-rows:none;aspect-ratio:auto}
  [data-detail] .dt-shot{aspect-ratio:16/10}
  [data-detail] .dt-shot:nth-child(1){grid-row:auto}
  /* VIDÉO / sections : padding réduit */
  [data-detail] .dt-video{padding:8vh 0}
  [data-detail] .dt-section{padding:8vh 0}
  /* STACK / RETOUR / CTA : lisibles, cibles tactiles ≥44px */
  [data-detail] .dt-stack{padding:6vh 0}
  [data-detail] .dt-end{padding:7vh 0}
  [data-detail] .dt-topback{margin-top:20px;padding:13px 0} /* zone de tap ≥44px */
  [data-detail] .dt-lb-close{width:44px;height:44px;top:14px;right:14px}
}
@media(prefers-reduced-motion:reduce){[data-detail] .rv{opacity:1;transform:none;transition:none}[data-detail] .dt-shot .dt-sweep{display:none}}

/* Grands écrans (≥1680px) — le case-study gagne un peu de largeur (13" inchangé). */
@media (min-width: 1680px) {
  [data-detail] .dt-wrap { max-width: 1300px; }
}

/* MOBILE (≤768) — sorties allégées sur les pages détail : dissolve simple (fondu +
   translate), SANS le blur du desktop (coûteux au scroll tactile). Fluide. */
@media(max-width:768px) and (prefers-reduced-motion:no-preference){@supports(animation-timeline:view()){
  [data-detail] .dt-band{overflow:clip} /* clip ≠ scrollport → view() des .rv internes retrouve la racine */
  [data-detail] .dt-why .rv,[data-detail] .dt-result .rv,[data-detail] .dt-gallery .rv,[data-detail] .dt-hero .rv,[data-detail] .dt-band .rv{animation:dt-exit-m linear both;animation-timeline:view();animation-range:exit 10% exit 100%;animation-fill-mode:forwards}
  @keyframes dt-exit-m{to{opacity:.05;transform:scale(.94) translateY(16px);filter:blur(2px)}}
}}


/* ===================================================================
   CHARTE PROJET — LIGHT. Additif : ne touche PAS le dark. Les vars --brand-ink /
   --brand2-ink sont injectées inline par build_detail.py (assombries AA). Principe :
   couleur brute pour thumbs/placeholders (pastel clair), variante -ink pour tout
   accent/texte, panneaux médias clairs teintés, bandes claires teintées, navy en
   accent. La lightbox reste sombre (l'image ressort).
   =================================================================== */
[data-theme="light"] [data-detail] {
  --ink2: #efece8; /* base panneaux médias : neutre clair chaud (au lieu du noir) */
}
[data-theme="light"] [data-detail] main::before { display: none; } /* souffle coloré coupé */

/* Texte "dur codé pour le dark" à corriger */
[data-theme="light"] [data-detail] .dt-sub { color: #2a2622; }
[data-theme="light"] [data-detail] .dt-device .dt-cap,
[data-theme="light"] [data-detail] .dt-browser-shot .dt-cap { color: color-mix(in srgb, var(--brand-ink) 78%, transparent); }
[data-theme="light"] [data-detail] .dt-how-media .dt-float { border-color: rgba(26, 22, 19, 0.14); }

/* Accents texte → ink */
[data-theme="light"] [data-detail] .dt-topback i,
[data-theme="light"] [data-detail] .dt-sec-eyebrow .dt-num,
[data-theme="light"] [data-detail] .dt-meta b,
[data-theme="light"] [data-detail] .dt-choice h3 span,
[data-theme="light"] [data-detail] .dt-band .dt-k,
[data-theme="light"] [data-detail] .dt-statusband .dt-lab,
[data-theme="light"] [data-detail] .dt-ph-label { color: var(--brand-ink); }
[data-theme="light"] [data-detail] .dt-meta a { color: var(--brand-ink); border-bottom-color: color-mix(in srgb, var(--brand-ink) 45%, transparent); }

/* Filets (::before) → dégradé ink */
[data-theme="light"] [data-detail] .dt-eyebrow::before,
[data-theme="light"] [data-detail] .dt-sec-eyebrow::before,
[data-theme="light"] [data-detail] .dt-feat::before { background: linear-gradient(90deg, var(--brand-ink), var(--brand2-ink)); }

/* Titres/em en dégradé → ink */
[data-theme="light"] [data-detail] .dt-hero h1 .dt-b,
[data-theme="light"] [data-detail] .dt-band h2 em,
[data-theme="light"] [data-detail] .dt-pullquote em { background: linear-gradient(120deg, var(--brand-ink), var(--brand2-ink)); -webkit-background-clip: text; background-clip: text; }

/* Bandes → panneau clair à peine teinté + watermark très doux */
[data-theme="light"] [data-detail] .dt-band { background: linear-gradient(115deg, color-mix(in srgb, var(--brand2) 12%, var(--bg)), var(--bg) 74%); }
[data-theme="light"] [data-detail] .dt-statusband { background: linear-gradient(250deg, color-mix(in srgb, var(--brand2) 11%, var(--bg)), var(--bg) 72%); }
[data-theme="light"] [data-detail] .dt-band .dt-wm { color: color-mix(in srgb, var(--brand2) 10%, transparent); }

/* Citation (pourquoi) : tint clair + filet ink */
[data-theme="light"] [data-detail] .dt-why .dt-quote { background: color-mix(in srgb, var(--brand) 7%, var(--bg)); border-color: color-mix(in srgb, var(--brand) 22%, var(--border)); border-left-color: var(--brand-ink); }

/* Panneaux médias : liseré ink + ombre douce (bg suit --ink2 clair pour dt-shot) */
[data-theme="light"] [data-detail] .dt-device,
[data-theme="light"] [data-detail] .dt-browser,
[data-theme="light"] [data-detail] .dt-videocard,
[data-theme="light"] [data-detail] .dt-shot { border-color: color-mix(in srgb, var(--brand) 24%, var(--border)); box-shadow: 0 26px 56px -34px color-mix(in srgb, var(--brand-ink) 28%, transparent); }
/* placeholders / panneaux teintés → tint léger clair */
[data-theme="light"] [data-detail] .dt-how-media { background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 14%, #f1eee9), color-mix(in srgb, var(--brand2) 11%, #f1eee9) 86%); }
[data-theme="light"] [data-detail] .dt-videocard .dt-ph { background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 16%, #f1eee9), color-mix(in srgb, var(--brand2) 12%, #f1eee9) 86%); }
[data-theme="light"] [data-detail] .dt-logofield { background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 8%, #f1eee9), #f1eee9 88%); }
/* placeholder duotone → pastel clair (orange→teal clairs) */
[data-theme="light"] [data-detail] .dt-ph { background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 22%, #fff), color-mix(in srgb, var(--brand2) 15%, #fff) 84%); }
/* meshes : lignes claires → lignes sombres discrètes sur clair */
[data-theme="light"] [data-detail] .dt-ph::after,
[data-theme="light"] [data-detail] .dt-how-media::before,
[data-theme="light"] [data-detail] .dt-logofield::after { background: repeating-linear-gradient(135deg, rgba(26, 22, 19, 0.04) 0 1px, transparent 1px 24px); }

/* Sweep hover → ink, doux */
[data-theme="light"] [data-detail] .dt-shot .dt-sweep { background: linear-gradient(100deg, transparent 34%, color-mix(in srgb, var(--brand-ink) 26%, transparent) 50%, transparent 66%); background-size: 250% 100%; background-position: 130% 0; }

/* Boutons play / retour / lightbox-close → ink */
[data-theme="light"] [data-detail] .dt-playbtn { background: linear-gradient(135deg, var(--brand-ink), var(--brand2-ink)); color: #fff; }
[data-theme="light"] [data-detail] .dt-back:hover { border-color: var(--brand-ink); color: var(--brand-ink); }
[data-theme="light"] [data-detail] .dt-lb-close:hover { border-color: var(--brand-ink); color: var(--brand-ink); }

/* Lightbox : reste SOMBRE en light (l'image zoomée ressort), liseré ink */
[data-theme="light"] [data-detail] .dt-lb { background: color-mix(in srgb, #0a0708 88%, transparent); }
[data-theme="light"] [data-detail] .dt-lb img,
[data-theme="light"] [data-detail] .dt-lb-video iframe { border-color: color-mix(in srgb, var(--brand-ink) 42%, var(--border)); }