/* Pages « récit » (.jd-story-page) et calque du personnage (.mascot-layer, moteur de sebg.ch). Variables du site : --color-*, --font-mono ;
   --jd-accent = couleur de l'entreprise. Le personnage reste dans une pastille claire : ses points d'encre ne se verraient pas sur le noir. */

/* ---------- le calque du personnage ---------- */
.mascot-layer{position:fixed;left:0;right:0;bottom:0;z-index:30;height:100svh;pointer-events:none;visibility:hidden}
.mascot-layer.jd-on>*{visibility:visible}
.mascot-badge{display:none;position:absolute;left:0;top:0;z-index:20;width:160px;height:160px;pointer-events:none}
/* contour en chrome liquide : reflets métalliques qui tournent lentement, avec un léger reflet de la couleur du projet */
@property --jd-rot{syntax:"<angle>";inherits:false;initial-value:0deg}
.mascot-badge>div{position:relative;width:100%;height:100%;border-radius:50%;background:var(--paper);box-shadow:0 0 0 4px var(--paper);opacity:0}
.mascot-badge>div::before{content:"";position:absolute;inset:-8px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 24% 16%,color-mix(in srgb,var(--jd-accent,#fff) 70%,transparent),transparent 34%),
    conic-gradient(from var(--jd-rot),#fff 0,#8d919c 7%,#16181d 15%,#b4b8c2 24%,#fff 31%,#5a5e69 42%,#101216 52%,#cdd0d8 63%,#fff 69%,#7b7f8b 80%,#1a1c21 90%,#fff 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  filter:drop-shadow(0 2px 3px #0008);animation:jd-chrome 16s linear infinite}
@keyframes jd-chrome{to{--jd-rot:360deg}}
@media (max-width:767px){.mascot-badge>div::before{inset:-6px;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px))}}
@media (prefers-reduced-motion:reduce){.mascot-badge>div::before{animation:none}}
.mascot{position:absolute;left:0;bottom:0;z-index:30;width:100%;height:100lvh;image-rendering:pixelated;pointer-events:none}
.mascot-handle{position:absolute;left:0;top:0;z-index:30;display:block;cursor:grab;touch-action:pan-y;border-radius:999px 999px 0 0;user-select:none;pointer-events:auto}
.mascot-hand{position:absolute;left:0;top:0;z-index:50;pointer-events:none}
.mascot-hand svg{display:block;width:100%}
.mascot-hand .hidden{display:none}
.mascot-hand .fill-paper{fill:#fbfbf8}
.mascot-hand .fill-ink{fill:#0b0b0c}
@media (prefers-reduced-motion:reduce){.mascot-handle{display:none}}

/* bulle, réactions et menu : verre liquide, comme les boutons du site (reflet, teinte de la couleur du projet en bas, flou, liseré) */
.mascot-bubble{position:absolute;left:0;top:0;z-index:40;width:fit-content;pointer-events:none;color:#fff}
.mascot-bubble__body,.mascot-quip,.mascot-menu{position:relative;isolation:isolate;padding:.7rem .95rem .8rem;border-radius:1rem;transform-origin:var(--tail,50%) 100%;
  background:radial-gradient(115% 115% at 18% 0%,#ffffff52,#ffffff0d 36%,#fff0 60%),#2a2a30c4;
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border:1px solid #ffffff38;
  box-shadow:0 10px 22px -10px #000000e6,inset 0 1px #ffffff80,inset 0 -8px 12px -10px #000000d9}
.mascot-bubble__tail{position:absolute;top:calc(100% - .42rem);left:var(--tail,50%);z-index:1;width:.8rem;height:.8rem;translate:-50% 0;rotate:45deg;border:solid #ffffff38;border-width:0 1px 1px 0;border-bottom-right-radius:3px;background:#2a2a30}
.mascot-bubble__tail--shadow{display:none}
.mascot-bubble[data-tail] .mascot-bubble__tail{top:var(--tail);left:-.42rem;translate:0 -50%;border-width:0 0 1px 1px;border-radius:0 0 0 3px;background:#2a2a30}
.mascot-bubble[data-tail=right] .mascot-bubble__tail{left:auto;right:-.42rem;border-width:1px 1px 0 0;border-radius:0 3px 0 0}
.mascot-bubble[data-tail=left] .mascot-bubble__body,.mascot-bubble[data-tail=left] .mascot-quip{transform-origin:0 var(--tail)}
.mascot-bubble[data-tail=right] .mascot-bubble__body,.mascot-bubble[data-tail=right] .mascot-quip{transform-origin:100% var(--tail)}
.mascot-text,.mascot-text p{margin:0;font-size:clamp(.85rem,1vw,1.1rem);line-height:1.22;font-weight:560;letter-spacing:-.012em;text-shadow:0 1px 2px #0008}
.mascot-text b{font-weight:680;color:#fff}
.mascot-menu{pointer-events:auto}
.mascot-menu__grid{display:grid;grid-template-columns:repeat(3,auto);gap:.1rem .9rem;margin-top:.75rem}
.mascot-menu__grid button{margin-left:-.6rem;padding:.12rem .6rem;border:0;border-radius:99px;background:none;color:#fff;font:500 .82rem/1.4 inherit;text-align:left;cursor:pointer}
.mascot-menu__grid button:hover,.mascot-menu__grid button:focus-visible{background:#ffffffd9;color:#0b0b0c}
@media (max-width:767px){.mascot-menu__grid{grid-template-columns:repeat(2,auto)}}

/* images qui se développent */
.jdg-veil{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none;z-index:3}

/* ---------- la page récit ---------- */
.jd-story-page{background:var(--color-bg,#000);color:var(--color-text,#fff)}
.jd-story-page{position:relative}
.jd-story-back{position:absolute!important;left:var(--jd-pad,24px);top:84px;z-index:30}
.jd-story{--jd-pad:clamp(20px,4vw,64px);position:relative}
.jd-story::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--color-text,#fff) 5%,transparent) 0 1px,transparent 1px calc(100% / 12))}
.jd-scene{position:relative;z-index:1;min-height:100svh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);align-items:center;padding:14svh var(--jd-pad)}
.jd-inner{display:grid;gap:clamp(24px,4vw,56px);align-items:center;min-width:0}
.jd-side-right .jd-inner{grid-column:1/10}
.jd-side-left .jd-inner{grid-column:4/13}
.jd-tint{background:color-mix(in srgb,var(--jd-accent) 9%,var(--color-bg,#000))}
.jd-label{margin:0 0 1.4rem;font:500 12px/1 var(--font-mono,ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-60,#fff9)}
.jd-label b{color:var(--jd-accent);font-weight:500;margin-right:.7em}
.jd-words{margin:0;font-size:clamp(26px,3.2vw,48px);line-height:1.18;letter-spacing:-.025em;font-weight:560}
.jw{opacity:.14;transition:opacity .3s}
.jw.on{opacity:1}
.jd-dith{position:relative;overflow:hidden;border-radius:14px;background:var(--color-surface,#111)}
.jd-dith img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:9/16}

/* ouverture */
.jd-open{padding:0;align-items:end;overflow:hidden}
.jd-open-media,.jd-open-shade{position:absolute;inset:0}
.jd-open-media video,.jd-open-media img{width:100%;height:100%;object-fit:cover;display:block}
.jd-open-shade{background:linear-gradient(0deg,#000 0%,#0009 34%,#0000 70%),linear-gradient(90deg,#0008,#0000 60%)}
.jd-open .jd-copy{position:relative;grid-column:1/9;padding:0 var(--jd-pad) 11svh}
.jd-kicker{margin:0 0 1rem;font:500 12px/1 var(--font-mono,ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase;color:#fffc}
.jd-big{margin:0 0 2rem;font-size:clamp(48px,8.4vw,132px);line-height:.94;letter-spacing:-.045em;font-weight:620;color:#fff}
.jd-meta{display:flex;flex-wrap:wrap;gap:1.4rem 3rem;margin:0}
.jd-meta dt{font:500 11px/1 var(--font-mono,ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase;color:#fff9;margin-bottom:.5rem}
.jd-meta dd{margin:0;font-size:1rem;color:#fff}
.jd-cue{position:absolute;left:var(--jd-pad);bottom:3svh;margin:0;font:500 11px/1 var(--font-mono,ui-monospace,monospace);letter-spacing:.16em;text-transform:uppercase;color:#fff9}

/* contexte : texte + image verticale */
.jd-text .jd-inner{grid-template-columns:1.5fr 1fr}
.jd-side-left.jd-text .jd-vis{order:-1}

/* ce que j'ai fait : texte, puces, trois images décalées */
.jd-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:2rem 0 0;padding:0;list-style:none}
.jd-chips li{padding:.5rem .9rem;border:1px solid var(--jd-accent);border-radius:99px;font-size:.9rem}
.jd-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px)}
.jd-trio .jd-dith:nth-child(2){transform:translateY(9%)}

/* résultat : navigateur + téléphone */
.jd-devices{position:relative;padding-bottom:6%}
.jd-browser{width:86%;border:1px solid var(--color-border,#fff3);border-radius:14px;overflow:hidden;background:#0b0b0d}
.jd-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--color-border,#fff3)}
.jd-bar i{width:9px;height:9px;border-radius:50%;background:#fff3}
.jd-bar em{margin-left:auto;font:500 11px/1 var(--font-mono,ui-monospace,monospace);letter-spacing:.1em;color:#fff9;font-style:normal;text-transform:uppercase}
.jd-browser .case-media-well{padding:0}
.jd-browser .case-media-stage{box-shadow:none;transform:none}
.jd-phone{position:absolute;right:0;bottom:0;width:23%;aspect-ratio:9/19;border:6px solid #101012;border-radius:28px;overflow:hidden;background:#000;box-shadow:0 30px 60px -20px #000c}
.jd-phone video{display:block;width:100%;height:100%;object-fit:cover}

/* les six visuels */
.jd-strip{display:grid;grid-template-columns:repeat(var(--n,6),1fr);gap:clamp(8px,1vw,14px)}
.jd-side-right .jd-strip{max-width:93%}
.jd-strip .jd-dith{border-radius:10px}
.jd-next .jd-inner{grid-template-columns:1fr;gap:1.6rem}
.jd-nextcard{position:relative;display:block;aspect-ratio:16/9;border-radius:16px;overflow:hidden;color:#fff;text-decoration:none;background:#000}
.jd-nextmedia,.jd-nextshade{position:absolute;inset:0}
.jd-nextmedia video,.jd-nextmedia img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.jd-nextcard:hover .jd-nextmedia video,.jd-nextcard:hover .jd-nextmedia img{transform:scale(1.04)}
.jd-nextshade{background:linear-gradient(0deg,#000d 0%,#0004 45%,#0000 75%)}
.jd-nextcopy{position:absolute;left:clamp(18px,3vw,40px);right:clamp(18px,3vw,40px);bottom:clamp(18px,3vw,36px);display:grid;gap:.5rem;justify-items:start}
.jd-nextcopy strong{font-size:clamp(28px,4.6vw,68px);line-height:1;letter-spacing:-.035em;font-weight:620}
.jd-nextcopy em{font-style:normal;max-width:34rem;color:#fffc;font-size:clamp(14px,1.2vw,17px)}
.jd-nextcta{margin-top:.6rem;padding:.55rem 1.1rem;border-radius:99px;background:#fbfbf8;color:#0b0b0c;font-weight:600;font-size:.9rem}

/* mobile : tout en une colonne, le guide devient une pastille en bas à gauche */
@media (max-width:1023px){
  .jd-scene{display:block;padding:12svh var(--jd-pad) 150px}
  .jd-open{display:flex;padding:0}
  .jd-open .jd-copy{padding-bottom:150px;width:100%}
  .jd-text .jd-inner{grid-template-columns:1fr}
  .jd-text .jd-vis{max-width:62%}
  .jd-side-left.jd-text .jd-vis{order:0}
  .jd-trio .jd-dith:nth-child(2){transform:none}
  .jd-browser{width:100%}
  .jd-phone{width:30%;right:2%;bottom:-3%}
  .jd-strip{grid-template-columns:repeat(3,1fr)}
  .jd-story::before{background:none}
  .jd-story-back{top:72px}
}
@media (prefers-reduced-motion:reduce){.jw{opacity:1;transition:none}}
/* pied de page des récits : à la taille de son contenu (le site le cale sur un écran entier, vide autour de 4 boutons) */
.jd-story-page .agency-footer{min-height:0!important;height:auto!important;padding-top:clamp(4rem,9vh,6.5rem);padding-bottom:1.25rem}
.jd-story-page .agency-footer .footer-content{min-height:0;height:auto;justify-content:flex-start;gap:clamp(3rem,7vh,5rem)}

/* images larges (captures d'écran, plans 16/9) */
.jd-dith.jd-wide img{aspect-ratio:16/10}
.jd-text .jd-inner:has(.jd-wide){grid-template-columns:1fr 1.25fr}
.jd-did .jd-inner:has(.jd-trio.jd-wide){grid-template-columns:1fr 1.15fr}
.jd-side-left.jd-did .jd-trio.jd-wide{order:-1}
.jd-trio.jd-wide{grid-template-columns:1fr 1fr}
.jd-trio.jd-wide .jd-dith:first-child{grid-column:1/-1}
.jd-trio.jd-wide .jd-dith:nth-child(2){transform:none}
.jd-strip.jd-wide{grid-template-columns:repeat(min(var(--n),3),1fr)}
/* résultat sans téléphone : le navigateur seul, pleine largeur ; lien vers le site */
.jd-devices.jd-solo{padding-bottom:0}
.jd-solo .jd-browser{width:100%}
.jd-site{display:inline-block;margin-top:2rem;padding:.6rem 1.2rem;border-radius:99px;background:#fbfbf8;color:#0b0b0c;font-weight:600;font-size:.95rem;text-decoration:none}
/* chiffres clés */
.jd-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:clamp(18px,3vw,40px);margin:0}
.jd-figs div{border-top:1px solid var(--jd-accent);padding-top:1.2rem}
.jd-figs dd{margin:0;white-space:nowrap;font-size:clamp(36px,4.6vw,80px);line-height:1;letter-spacing:-.04em;font-weight:620}
.jd-figs dt{margin-top:.8rem;color:var(--color-text-60,#fff9);font-size:clamp(14px,1.1vw,17px)}
/* films de marque */
.jd-brandgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,34px)}
.jd-brand{margin:0}
.jd-brand .case-media-well{padding:0}
.jd-brand .case-media-stage{box-shadow:none;transform:none;border-radius:12px;overflow:hidden}
.jd-brand figcaption{display:grid;gap:.3rem;margin-top:.9rem}
.jd-brand strong{font-size:1.15rem;font-weight:620}
.jd-brand span{color:var(--color-text-60,#fff9);font-size:.95rem;line-height:1.4}
@media (max-width:1023px){
  .jd-text .jd-inner:has(.jd-wide),.jd-did .jd-inner:has(.jd-trio.jd-wide){grid-template-columns:1fr}
  .jd-side-left.jd-did .jd-trio.jd-wide{order:0}
  .jd-text .jd-vis.jd-wide{max-width:none}
  .jd-strip.jd-wide{grid-template-columns:1fr}
  .jd-brandgrid{grid-template-columns:1fr}
}