/* ==========================================================================
   IDENTITÉ VISUELLE : styles propres à la page (le reste vient de pages.css).
   Mesures en --m, comme partout. Une idée par écran, trois animations qui
   racontent le métier :
     en-tête · .forge : la naissance d'un logo (l'emblème du studio), du
                     croquis aux supports, à la place du décor photo
                     (piloté par assets/js/modules/identite.js)
     01 · .pistes  : quarante pistes qui se resserrent sur une seule (idem)
     02 · .lf-*    : les logos clients se reconstruisent (logoforge.js)
     03 · .idv-kit : ce qu'on livre (six icônes animées)
     04 · questions

   LOGOFORGE (bloc « LOGOFORGE » plus bas) est un composant réutilisable :
   une autre page (ex. realisations.html) peut charger ce fichier et poser
   data-logoforge sur le conteneur de ses tuiles .logo-tile > img (voir l'en-tête
   de assets/js/modules/logoforge.js). Tout le reste est limité à cette page
   par body[data-page="identite-visuelle"] ou par des classes qui lui sont
   propres (.forge, .pistes, .idv-*).

   Langage du mouvement (aligné sur la vitrine de l'accueil) :
   arrivées --e-out, tracés et remplissages --e-io, petits objets --e-pop.
   ========================================================================== */
[data-page="identite-visuelle"],.lf-tile{
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --e-pop:cubic-bezier(.34,1.4,.64,1);
}

/* corps de section : même grille que .blk, sans le haut */
.idv-body{padding-top:0}
/* formes de la marque (symboles réutilisés par <use>) : jamais affichées seules */
.yn-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* --------------------------------------------------------------------------
   EN-TÊTE : le texte à gauche, la naissance du logo à droite (à la place du
   décor photo). Sur ordinateur, l'en-tête occupe l'écran : la section 01
   commence à l'écran suivant. --show-h = hauteur utile sous les onglets
   (en-tête du site, onglets et marges déduits).
   -------------------------------------------------------------------------- */
.phero__show{position:relative;z-index:3}
html.js .phero__show{animation:hPlanet 1.6s var(--ease-out) .15s both}
/* ?calage : l'en-tête d'origine (décor photo), sans l'animation ; ailleurs,
   l'animation remplace le décor (même règle que sites-web et réalisations) */
html:not(.calage) .phero--show .phero__scene{display:none}
html.calage .phero__show{display:none}
/* la hauteur de l'en-tête (un écran, plafonné en 4:3) vient de pages.css */
@media (min-width:1024px){
  html:not(.calage) .phero.phero--show{--show-h:calc(min(100svh,75vw) - 112px - 62 * var(--m));display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:calc(34 * var(--m));padding-right:calc(52 * var(--m))}
  html:not(.calage) .phero.phero--show > .ptabs{grid-column:1 / -1;margin-right:0}
  html:not(.calage) .phero.phero--show > .phero__content{grid-column:1;grid-row:2;align-self:center;margin-block:0}
  html:not(.calage) .phero.phero--show > .phero__show{grid-column:2;grid-row:2;align-self:center;justify-self:center;margin:0}
}

/* --------------------------------------------------------------------------
   LA NAISSANCE D'UN LOGO
   Sans JavaScript (et dans l'éditeur, en animations réduites) : l'état final,
   le logo posé sur ses supports. .is-live active les étapes p1 à p5.
   -------------------------------------------------------------------------- */
.forge{position:relative;margin-top:max(calc(var(--mins) * 8px),calc(4 * var(--m)))}
.forge__stage{position:relative;aspect-ratio:2/1;overflow:hidden;isolation:isolate;border:1px solid var(--line-2);border-radius:4px;
  background:
    radial-gradient(52% 64% at 50% 46%,rgba(246,43,62,.075),transparent 72%),
    linear-gradient(180deg,#0c0c0d,#070708);
  perspective:1600px;perspective-origin:62% 40%}
/* les coins du plan de travail, comme une planche */
.forge__stage::before{content:"";position:absolute;inset:14px;z-index:0;pointer-events:none;
  background:
    linear-gradient(var(--ink-4),var(--ink-4)) left top/14px 1px no-repeat,
    linear-gradient(var(--ink-4),var(--ink-4)) left top/1px 14px no-repeat,
    linear-gradient(var(--ink-4),var(--ink-4)) right top/14px 1px no-repeat,
    linear-gradient(var(--ink-4),var(--ink-4)) right top/1px 14px no-repeat,
    linear-gradient(var(--ink-4),var(--ink-4)) left bottom/14px 1px no-repeat,
    linear-gradient(var(--ink-4),var(--ink-4)) left bottom/1px 14px no-repeat,
    linear-gradient(var(--ink-4),var(--ink-4)) right bottom/14px 1px no-repeat,
    linear-gradient(var(--ink-4),var(--ink-4)) right bottom/1px 14px no-repeat}

/* l'emblème au centre ; à l'étape 5 il se range à gauche */
.forge__art{position:absolute;z-index:1;left:50%;top:50%;height:76%;aspect-ratio:769/740;
  transform:translate(calc(-50% + var(--ax,0%)),calc(-50% + var(--ay,0%))) scale(var(--as,1));
  transition:transform 1.5s var(--e-io)}
.forge__svg{display:block;width:100%;height:100%;overflow:visible}
.forge:not(.is-live) .forge__art,.forge.p5 .forge__art{--ax:-84%;--as:.56}

/* calques de construction (dessinés par identite.js ; --px = 1 px d'écran) */
.forge__svg{--px:1.4}
.fg-grid line{stroke:rgba(255,255,255,.075);stroke-width:var(--px)}
.fg-grid .fg-band{stroke:rgba(255,255,255,.17)}
.fg-guides *{fill:none;stroke:rgba(246,43,62,.62);stroke-width:var(--px)}
.fg-guides .fg-axis{stroke:rgba(245,243,238,.24);stroke-dasharray:calc(var(--px) * 5) calc(var(--px) * 5)}
.fg-guides .fg-dot{fill:#FFD60A;stroke:none}
.fg-sketch path{fill:none;stroke:rgba(244,241,234,.8);stroke-width:calc(var(--px) * 1.55);stroke-linecap:round;stroke-linejoin:round}
.fg-sketch path.fg-s2{stroke:rgba(244,241,234,.4)}
.fg-vec *{fill:none;stroke:var(--red);stroke-width:calc(var(--px) * 1.5);stroke-linejoin:round}
.fg-nodes .fg-h{stroke:rgba(245,243,238,.55);stroke-width:var(--px)}
.fg-nodes .fg-hd{fill:var(--red);stroke:none}
.fg-nodes .fg-a{fill:#0a0a0b;stroke:#f5f3ee;stroke-width:var(--px)}
.fg-glow{fill:rgba(255,214,10,.16);opacity:0;filter:blur(18px)}

/* tracés « dessinés » : pathLength = 1 */
.forge.is-live .fg-draw{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset var(--t,1.2s) var(--e-io) var(--d,0ms)}
.forge.is-live .fg-grid,.forge.is-live .fg-guides,.forge.is-live .fg-sketch,.forge.is-live .fg-vec,.forge.is-live .fg-nodes{opacity:0;transition:opacity .9s var(--e-io)}
.forge.is-live .fg-grid line{opacity:0;transition:opacity .7s var(--e-io) var(--d,0ms)}
.forge.is-live .fg-nodes > *{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;transition:opacity .35s var(--e-out) var(--d,0ms),transform .5s var(--e-pop) var(--d,0ms)}
.forge.is-live .fg-rise{transform:translateY(860px);transition:transform 1.9s var(--e-io)}
.forge.is-live .fg-glow{transition:opacity 1.2s var(--e-io) .9s}

/* 1 · croquis */
.forge.p1 .fg-sketch{opacity:1}
.forge.p1 .fg-sketch .fg-draw{stroke-dashoffset:0}
/* 2 · grille et tracés de construction */
.forge.p2 .fg-sketch{opacity:.38}
.forge.p2 .fg-grid,.forge.p2 .fg-guides{opacity:1}
.forge.p2 .fg-grid line{opacity:1}
.forge.p2 .fg-guides .fg-draw{stroke-dashoffset:0}
/* 3 · vecteurs et poignées */
.forge.p3 .fg-sketch{opacity:.1}
.forge.p3 .fg-guides{opacity:.5}
.forge.p3 .fg-vec,.forge.p3 .fg-nodes{opacity:1}
.forge.p3 .fg-vec .fg-draw{stroke-dashoffset:0}
.forge.p3 .fg-nodes > *{opacity:1;transform:none}
/* 4 · couleur : l'encre monte comme un lever de soleil */
.forge.p4 .fg-sketch{opacity:0}
.forge.p4 .fg-grid{opacity:.45}
.forge.p4 .fg-guides{opacity:.2}
.forge.p4 .fg-vec{opacity:.3}
.forge.p4 .fg-nodes{opacity:0}
.forge.p4 .fg-rise{transform:none}
.forge.p4 .fg-glow{opacity:1}
/* 5 · supports */
.forge.p5 .fg-grid,.forge.p5 .fg-guides,.forge.p5 .fg-vec,.forge.p5 .fg-nodes,.forge.p5 .fg-sketch{opacity:0}
.forge.p5 .fg-rise{transform:none}
.forge.p5 .fg-glow{opacity:.6}
/* remise à zéro entre deux boucles : tout s'éteint, puis repart sans transition */
.forge.is-fade .forge__art,.forge.is-fade .forge__decl,.forge.is-fade .forge__pal{opacity:0;transition:opacity .6s var(--e-io)}
.forge.is-reset *,.forge.is-reset *::before,.forge.is-reset *::after{transition:none!important}

/* palette (étape 4) */
.forge__pal{position:absolute;z-index:2;right:6%;top:50%;display:grid;gap:max(calc(var(--mins) * 8px),calc(5 * var(--m)));width:max(calc(var(--mins) * 128px),calc(78 * var(--m)));transform:translateY(-50%)}
.forge__pal li{display:grid;grid-template-columns:max(calc(var(--mins) * 30px),calc(20 * var(--m))) 1fr;align-items:center;column-gap:10px;
  opacity:0;transform:translate3d(18px,0,0);transition:opacity .6s var(--e-out),transform .8s var(--e-out)}
.forge__pal li::before{content:"";grid-row:span 2;aspect-ratio:1;border:1px solid rgba(255,255,255,.18);background:var(--c);border-radius:2px}
.forge__pal b{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.08em;color:var(--ink);line-height:1.2}
.forge__pal span{font-family:var(--f-mono);font-size:var(--fs-nano);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);line-height:1.2}
.forge.p4:not(.p5) .forge__pal li{opacity:1;transform:none;transition-delay:calc(.8s + var(--i,0) * 110ms)}
.forge__pal li:nth-child(2){--i:1}.forge__pal li:nth-child(3){--i:2}.forge__pal li:nth-child(4){--i:3}

/* supports (étape 5) : enseigne, carte, écran, qui arrivent de la profondeur */
.forge__decl{position:absolute;inset:0;z-index:2;transform-style:preserve-3d;pointer-events:none}
.fd{position:absolute;transform-style:preserve-3d;opacity:0;transform:var(--fd-out);
  transition:opacity .45s var(--e-io),transform .8s var(--e-io)}
.forge:not(.is-live) .fd,.forge.p5 .fd{opacity:1;transform:var(--fd-in);
  transition:opacity .9s var(--e-out) var(--fd-d,0ms),transform 1.5s var(--e-out) var(--fd-d,0ms)}
.fd__face{position:relative;width:100%;height:100%;display:grid;place-items:center}
.fd--sign{left:37%;top:10%;width:39%;aspect-ratio:2.6/1;--fd-d:780ms;
  --fd-out:translate3d(4%,0,-520px) rotateY(-34deg);--fd-in:translate3d(0,0,0) rotateY(-14deg)}
.fd--sign .fd__face{background:linear-gradient(180deg,#141416,#0c0c0e);border:1px solid rgba(255,255,255,.09);border-radius:3px;
  box-shadow:0 40px 70px -34px #000,0 0 0 1px rgba(0,0,0,.6),0 18px 70px -26px rgba(246,43,62,.55)}
.fd--sign .fd__face::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}
.fd--sign .fd__face::after{content:"";position:absolute;left:12%;right:12%;bottom:-26%;height:30%;background:radial-gradient(50% 50% at 50% 0,rgba(246,43,62,.3),transparent 70%);filter:blur(8px)}
.fd--sign svg{width:74%;height:auto;filter:drop-shadow(0 0 14px rgba(244,241,234,.18))}
.fd--card{left:40%;top:58%;width:25%;aspect-ratio:85/55;--fd-d:1020ms;
  --fd-out:translate3d(-6%,30%,-380px) rotateX(38deg) rotateZ(-14deg);--fd-in:translate3d(0,0,0) rotateX(14deg) rotateZ(-5deg)}
.fd--card .fd__face{background:#F4F1EA;border-radius:3px;--mk-ink:#060606;
  box-shadow:0 30px 50px -24px rgba(0,0,0,.95),0 2px 0 rgba(255,255,255,.4) inset}
.fd--card svg{width:66%;height:auto;margin-top:-8%}
.fd--card span{position:absolute;left:9%;bottom:10%;font-family:var(--f-mono);font-size:max(calc(var(--mins) * 7px),calc(4 * var(--m)));letter-spacing:.1em;color:#3a3a3d}
.fd--phone{left:77%;top:20%;width:12.5%;aspect-ratio:9/19;--fd-d:1260ms;
  --fd-out:translate3d(30%,8%,-460px) rotateY(-40deg);--fd-in:translate3d(0,0,0) rotateY(-16deg)}
.fd--phone .fd__face{align-content:start;justify-items:center;gap:7%;padding-top:30%;background:#060606;border:max(4px,calc(3.2 * var(--m))) solid #18181b;border-radius:16% / 7.5%;
  box-shadow:0 34px 60px -26px #000,0 0 0 1px rgba(255,255,255,.08),0 0 50px -24px rgba(246,43,62,.5)}
.fd--phone .fd__face::before{content:"";position:absolute;left:50%;top:3%;width:30%;height:3.2%;border-radius:20px;background:#18181b;transform:translateX(-50%)}
.fd--phone svg{width:56%;height:auto}
.fd--phone .fd__word{width:66%}
.fd--phone i{display:block;width:70%;height:max(3px,calc(2.2 * var(--m)));border-radius:2px;background:rgba(255,255,255,.08)}
.fd--phone i:first-of-type{margin-top:16%;background:rgba(246,43,62,.55);width:46%}

/* barre des étapes + légende : les étapes se lisent (police des titres), celle
   en cours en blanc plein, les autres restent lisibles */
.forge__bar{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px 28px;margin-top:max(calc(var(--mins) * 14px),calc(9 * var(--m)))}
.forge__steps{flex:1 1 520px;max-width:max(calc(var(--mins) * 760px),calc(470 * var(--m)));display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line-2)}
.forge__steps button{position:relative;display:flex;align-items:baseline;gap:.42em;width:100%;padding:max(calc(var(--mins) * 12px),calc(7 * var(--m))) 8px 4px 0;text-align:left;
  font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 17px),calc(9.6 * var(--m)));line-height:1.1;letter-spacing:.02em;text-transform:uppercase;color:rgba(245,243,238,.76);transition:color .4s var(--e-io)}
.forge__steps small{font-family:var(--f-mono);font-weight:500;font-size:.66em;letter-spacing:.06em;color:var(--red)}
.forge__steps i{position:absolute;left:0;right:10px;top:-1px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left center}
.forge__steps button:hover,.forge__steps button:focus-visible{color:var(--ink)}
.forge__steps .is-done i{transform:scaleX(1);opacity:.4}
.forge__steps .is-on{color:var(--ink);text-shadow:0 0 18px rgba(246,43,62,.35)}
.forge__steps .is-on i{animation:fgBar var(--dur,2s) linear forwards;box-shadow:0 0 10px rgba(246,43,62,.6)}
.forge.is-paused .forge__steps .is-on i{animation-play-state:paused}
@keyframes fgBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.forge__bar .cap{margin-top:max(calc(var(--mins) * 12px),calc(7 * var(--m)))}

/* Dans l'en-tête : une planche presque carrée, à la hauteur de l'écran.
   Couleur : l'emblème se décale pour laisser la palette à droite ;
   supports : l'emblème se range en haut à gauche, l'enseigne en haut à
   droite, la carte en bas, l'écran du téléphone à droite. */
.forge--hero{margin-top:0;container-type:inline-size}
.forge--hero .forge__bar{flex-direction:column;align-items:stretch;gap:0}
/* planche étroite (1024 à 1280 px, tablette) : le numéro passe au-dessus du nom de l'étape */
@container (max-width:600px){
  .forge--hero .forge__steps button{flex-direction:column;gap:2px;padding-right:4px;font-size:15px}
}
@container (max-width:420px){
  .forge--hero .forge__steps button{font-size:13px;letter-spacing:0;padding-right:2px}
}
.forge--hero .forge__steps{flex:none;max-width:none}
.forge--hero .forge__bar .cap{margin-top:max(calc(var(--mins) * 10px),calc(6 * var(--m)))}
@media (min-width:1024px){
  .forge--hero{--fr:1.08;width:min(100%,calc(540 * var(--m)),calc((var(--show-h) - max(calc(var(--mins) * 96px),calc(48 * var(--m)))) * var(--fr)))}
  .forge--hero .forge__stage{aspect-ratio:var(--fr)}
  .forge--hero .forge__art{height:64%;top:47%}
  .forge--hero.p4:not(.p5) .forge__art{--ax:-17%}
  .forge--hero:not(.is-live) .forge__art,.forge--hero.p5 .forge__art{--ax:-49%;--ay:-43%;--as:.46}
  .forge--hero .forge__pal{right:5%;width:max(calc(var(--mins) * 118px),calc(74 * var(--m)))}
  .forge--hero .fd--sign{left:41%;top:7%;width:53%;--fd-in:translate3d(0,0,0) rotateY(-13deg)}
  .forge--hero .fd--card{left:7%;top:53%;width:52%;--fd-in:translate3d(0,0,0) rotateX(13deg) rotateZ(-5deg)}
  .forge--hero .fd--phone{left:69%;top:39%;width:22%;--fd-in:translate3d(0,0,0) rotateY(-15deg)}
}

/* 03 · ce qu'on livre : six points, une icône animée chacun (liste commune .icos) */
.idv-kit{margin-top:max(calc(var(--mins) * 8px),calc(4 * var(--m)))}

/* --------------------------------------------------------------------------
   02 · QUARANTE PISTES, UNE SEULE GARDÉE
   -------------------------------------------------------------------------- */
.pistes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,calc(250 * var(--m)));column-gap:max(calc(var(--mins) * 28px),calc(26 * var(--m)));align-items:center}
.pistes__fig{min-width:0;margin:0}
.pistes__board{position:relative;overflow:hidden;border:1px solid var(--line-2);border-radius:4px;background:#000;box-shadow:0 30px 70px -30px rgba(0,0,0,.9),0 0 60px -30px rgba(246,43,62,.35)}
.pistes__board img{display:block;width:100%;height:auto}
.pv{position:absolute;inset:0;pointer-events:none}
.pv i{position:absolute;display:block;background:rgba(5,5,6,.86);opacity:0}
/* trait rouge qui raye une piste écartée */
.pv i::after{content:"";position:absolute;left:16%;right:16%;top:50%;height:1.5px;background:var(--red);box-shadow:0 0 8px rgba(246,43,62,.6);transform:rotate(-24deg) scaleX(0);transform-origin:left center;transition:transform .45s var(--e-io)}
.pv i.is-keep{background:none;outline:2px solid var(--red);outline-offset:-2px;box-shadow:inset 0 0 30px rgba(246,43,62,.35),0 0 26px rgba(246,43,62,.6)}
.pistes.is-live .pv i{opacity:1;background:#050506;transition:opacity .5s var(--e-io) var(--d,0ms)}
.pistes.ph-listen .pv i{opacity:.92}
.pistes.ph-explore .pv i,.pistes.ph-choose .pv i,.pistes.ph-keep .pv i{opacity:0}
.pistes.ph-choose .pv i.is-out,.pistes.ph-keep .pv i.is-out{opacity:1;background:rgba(5,5,6,.82);transition-delay:var(--e,0ms)}
.pistes.ph-choose .pv i.is-out::after,.pistes.ph-keep .pv i.is-out::after{transform:rotate(-24deg) scaleX(1);transition-delay:var(--e,0ms)}
.pistes.ph-keep .pv i.is-keep{opacity:1;background:none;transition:opacity .5s var(--e-io)}
/* la piste gardée, à la loupe */
.pistes__loupe{position:absolute;left:50%;top:50%;width:34%;opacity:0;pointer-events:none;border:2px solid var(--red);border-radius:3px;background-repeat:no-repeat;
  box-shadow:0 30px 60px -18px #000,0 0 50px -10px rgba(246,43,62,.6);transform:var(--l0,translate(-50%,-50%) scale(.3));
  transition:transform 1.1s var(--e-out),opacity .5s var(--e-io)}
.pistes.ph-keep .pistes__loupe{opacity:1;transform:translate(-50%,-50%);transition-delay:.55s}
.pistes.is-fade .pv i{opacity:1!important;background:#050506;transition:opacity .5s var(--e-io)!important}
.pistes.is-fade .pistes__loupe{opacity:0;transition-delay:0s}
.pistes.is-reset *,.pistes.is-reset *::after{transition:none!important}

/* les quatre temps, qui s'allument avec la planche */
.pistes__steps{display:grid;gap:max(calc(var(--mins) * 18px),calc(13 * var(--m)))}
.pistes__steps li{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:max(calc(var(--mins) * 14px),calc(10 * var(--m)));align-items:start;
  padding-left:max(calc(var(--mins) * 14px),calc(9 * var(--m)));border-left:1px solid var(--line-2);transition:border-color .5s var(--e-io)}
.pistes__steps .ico{grid-row:span 2;--ico-size:clamp(48px,calc(34 * var(--m)),60px)}
.pistes__steps b{display:block;margin-top:max(calc(var(--mins) * 6px),calc(3 * var(--m)));font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 19px),calc(11 * var(--m)));line-height:1;text-transform:uppercase;letter-spacing:.005em;color:var(--ink)}
.pistes__steps li > span:last-child{display:block;margin-top:max(calc(var(--mins) * 5px),calc(3 * var(--m)));font-size:max(calc(var(--mins) * 14px),calc(6.6 * var(--m)));line-height:1.5;color:var(--ink-3)}
.pistes.is-live .pistes__steps li.rv.is-in{opacity:.62;transition:opacity .5s var(--e-io),border-color .5s var(--e-io),transform 1.1s var(--e-out)}
.pistes.is-live .pistes__steps li.rv.is-in.is-done{opacity:.82}
.pistes.is-live .pistes__steps li.rv.is-in.is-on{opacity:1;border-left-color:var(--red)}

/* --------------------------------------------------------------------------
   03 · IDENTITÉS CRÉÉES (grille) + lien vers l'exemple complet
   -------------------------------------------------------------------------- */
/* Les fichiers n'ont pas tous les mêmes marges : chaque logo reçoit sa largeur
   (--w, en % de la tuile) et un léger recalage vertical (--dy) pour que l'encre
   ait le même poids d'une tuile à l'autre. */
.logos--id{--cols:4}
.logos--id figure{display:flex;flex-direction:column;min-width:0}
.logos--id .logo-tile{position:relative;padding:0;overflow:hidden}
.logos--id .logo-tile img{position:absolute;left:50%;top:50%;width:var(--w,70%);height:auto;max-width:none;max-height:none;transform:translate(-50%,calc(-50% + var(--dy,0%)))}
/* logos livrés sur fond blanc : le blanc se fond dans la tuile crème */
.logos--id .logo-tile:not(.logo-tile--dark) img{mix-blend-mode:multiply;filter:brightness(1.035)}
.logos--id .logo-tile--dark{background:var(--tile,#18181b);border-color:rgba(255,255,255,.08)}
.logos--id .logo--wide{grid-column:span 2}
.logos--id .logo--wide .logo-tile{flex:1;aspect-ratio:auto;min-height:0}

.idv-ex{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;margin-top:max(calc(var(--mins) * 34px),calc(24 * var(--m)));
  border:1px solid var(--line-2);border-radius:4px;background:linear-gradient(90deg,#0d0d0e,#09090a);overflow:hidden;isolation:isolate;transition:border-color .45s var(--e-io),box-shadow .45s var(--e-io)}
.idv-ex:hover{border-color:rgba(246,43,62,.55);box-shadow:0 26px 60px -30px rgba(246,43,62,.5)}
.idv-ex__shot{display:block;aspect-ratio:16/8.4;overflow:hidden;border-right:1px solid var(--line)}
.idv-ex__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:scale(1.02);transition:transform 1.2s var(--e-out)}
.idv-ex:hover .idv-ex__shot img{transform:scale(1.06)}
.idv-ex__body{display:block;padding:max(calc(var(--mins) * 22px),calc(18 * var(--m))) max(calc(var(--mins) * 24px),calc(22 * var(--m)))}
.idv-ex__body small{display:block;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.idv-ex__body b{display:block;margin-top:max(calc(var(--mins) * 10px),calc(7 * var(--m)));font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 26px),calc(17 * var(--m)));line-height:.95;text-transform:uppercase;color:var(--ink)}
.idv-ex__txt{display:block;margin-top:max(calc(var(--mins) * 10px),calc(6 * var(--m)));font-size:max(calc(var(--mins) * 15px),calc(7 * var(--m)));color:var(--ink-2);line-height:1.55}
.idv-ex__sw{display:flex;gap:6px;margin-top:max(calc(var(--mins) * 16px),calc(11 * var(--m)))}
.idv-ex__sw i{display:block;width:max(calc(var(--mins) * 26px),calc(16 * var(--m)));aspect-ratio:1;background:var(--c);border:1px solid rgba(255,255,255,.14);border-radius:2px;transition:transform .5s var(--e-pop)}
.idv-ex:hover .idv-ex__sw i{transform:translateY(-4px)}
.idv-ex:hover .idv-ex__sw i:nth-child(2){transition-delay:40ms}
.idv-ex:hover .idv-ex__sw i:nth-child(3){transition-delay:80ms}
.idv-ex:hover .idv-ex__sw i:nth-child(4){transition-delay:120ms}
.idv-ex .more{margin-top:max(calc(var(--mins) * 18px),calc(12 * var(--m)))}
.idv-ex:hover .more{gap:16px;border-color:var(--red)}

/* ==========================================================================
   LOGOFORGE — composant réutilisable (module assets/js/modules/logoforge.js)
   Chaque tuile .logo-tile reçoit .lf-tile et un calque <svg class="lf"> calé
   au pixel sur l'image (mêmes coordonnées que le fichier). À l'arrivée
   (.lf-go) : la grille et les tracés de construction se dessinent, le logo
   apparaît au trait avec ses points d'ancrage et ses poignées, puis s'encre
   (masque qui glisse) et prend sa couleur ; .lf-done efface la construction.
   Au survol, elle revient par-dessus le logo.
   Variables : --lf-d (décalage de la tuile), --px (1 px d'écran en unités du
   fichier), --lf-b (luminosité finale de l'image, 1 par défaut). Les images ne
   sont jamais modifiées : seuls un masque et un filtre passagers s'appliquent.
   ========================================================================== */
.lf{position:absolute;z-index:2;max-width:none;max-height:none;overflow:visible;pointer-events:none;--px:1}
.lf *{fill:none;stroke-linecap:round;stroke-linejoin:round}
.lf-grid line{stroke:rgba(20,20,30,.08);stroke-width:var(--px)}
.lf-guides *{stroke:rgba(246,43,62,.8);stroke-width:var(--px)}
.lf-guides .lf-ax{stroke:rgba(20,20,30,.3);stroke-dasharray:calc(var(--px) * 4) calc(var(--px) * 4)}
.lf-sketch path{stroke:rgba(26,28,40,.82);stroke-width:calc(var(--px) * 1.1)}
.lf-nodes .lf-h{stroke:rgba(246,43,62,.6);stroke-width:var(--px)}
.lf-nodes .lf-hd{fill:var(--red);stroke:none}
.lf-nodes .lf-a{fill:#fff;stroke:var(--red);stroke-width:var(--px)}
.logo-tile--dark .lf-grid line,.logo-tile--night .lf-grid line,.logo-tile--navy .lf-grid line{stroke:rgba(255,255,255,.085)}
.logo-tile--dark .lf-guides .lf-ax,.logo-tile--night .lf-guides .lf-ax,.logo-tile--navy .lf-guides .lf-ax{stroke:rgba(255,255,255,.32)}
.logo-tile--dark .lf-sketch path,.logo-tile--night .lf-sketch path,.logo-tile--navy .lf-sketch path{stroke:rgba(245,243,238,.88)}
.logo-tile--dark .lf-nodes .lf-a,.logo-tile--night .lf-nodes .lf-a,.logo-tile--navy .lf-nodes .lf-a{fill:#141416}

/* avant l'arrivée : logo masqué et sans couleur, tracés repliés */
.lf-tile.lf-wait img{filter:grayscale(1) brightness(var(--lf-b,1));
  -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 40%,transparent 60%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.lf-tile.lf-wait .lf-draw{stroke-dasharray:1 1;stroke-dashoffset:1}
.lf-tile.lf-wait .lf-grid line{opacity:0}
.lf-tile.lf-wait .lf-nodes > *{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center}
/* arrivée : construction (0 à 1,6 s), encre (1,5 à 2,5 s), couleur (2,35 à 3,15 s) */
.lf-tile.lf-wait.lf-go img{-webkit-mask-position:0 0;mask-position:0 0;filter:grayscale(0) brightness(var(--lf-b,1));
  transition:-webkit-mask-position 1s var(--e-io) calc(var(--lf-d,0ms) + 1500ms),mask-position 1s var(--e-io) calc(var(--lf-d,0ms) + 1500ms),filter .8s var(--e-io) calc(var(--lf-d,0ms) + 2350ms)}
.lf-tile.lf-go .lf-draw{stroke-dashoffset:0;transition:stroke-dashoffset var(--t,1.1s) var(--e-io) calc(var(--lf-d,0ms) + var(--d,0ms))}
.lf-tile.lf-go .lf-grid line{opacity:1;transition:opacity .6s var(--e-io) calc(var(--lf-d,0ms) + var(--d,0ms))}
.lf-tile.lf-go .lf-nodes > *{opacity:1;transform:none;transition:opacity .3s var(--e-out) calc(var(--lf-d,0ms) + var(--d,0ms)),transform .45s var(--e-pop) calc(var(--lf-d,0ms) + var(--d,0ms))}
/* fin : la construction s'efface (.lf-done, posé par le module) */
.lf-tile .lf > g{transition:opacity .9s var(--e-io)}
.lf-tile.lf-done .lf > g{opacity:0}
/* au survol : la construction revient par-dessus le logo */
figure:hover > .lf-tile.lf-done .lf > g,.lf-tile.lf-done:hover .lf > g{opacity:1;transition:opacity .35s var(--e-out)}
figure:hover > .lf-tile.lf-done .lf > .lf-sketch,.lf-tile.lf-done:hover .lf > .lf-sketch{opacity:.5}
.logos--id .lf-tile:not(.logo-tile--dark){--lf-b:1.035}

/* ==========================================================================
   Tablette et téléphone
   ========================================================================== */
@media (max-width:1180px) and (min-width:1024px){
  .idv-kit{--cols:3!important}
}
@media (max-width:1023px){
  .phero__show{margin:34px 24px 0}
  .forge__stage{aspect-ratio:16/10}
  .forge:not(.is-live) .forge__art,.forge.p5 .forge__art{--ax:-61%;--ay:-13%;--as:.5}
  .fd--sign{left:34%;top:8%;width:46%}
  .fd--card{left:30%;top:58%;width:32%}
  .fd--phone{left:76%;top:30%;width:16%}
  .forge__pal{right:4%}
  .pistes{grid-template-columns:1fr;row-gap:30px}
  .pistes__steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px}
  .logos--id .logo--wide .logo-tile{flex:none;aspect-ratio:12/5}
  .idv-ex{grid-template-columns:1fr}
  .idv-ex__shot{border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:767px){
  .forge__stage{aspect-ratio:4/5}
  .forge__art{height:58%;top:44%}
  .forge:not(.is-live) .forge__art,.forge.p5 .forge__art{--ax:-37%;--ay:-41%;--as:.5}
  .forge__pal{left:5%;right:5%;top:auto;bottom:4%;width:auto;transform:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .forge__pal li{grid-template-columns:1fr;row-gap:5px;transform:translate3d(0,12px,0)}
  .forge__pal li::before{grid-row:auto;width:100%;aspect-ratio:2/1}
  .forge__pal b{font-size:9.5px;letter-spacing:.02em}
  .forge__pal span{font-size:9px;letter-spacing:.1em}
  .fd--sign{left:40%;top:6%;width:56%;--fd-in:translate3d(0,0,0) rotateY(-12deg)}
  .fd--card{left:6%;top:51%;width:58%;--fd-in:translate3d(0,0,0) rotateX(12deg) rotateZ(-5deg)}
  .fd--phone{left:68%;top:43%;width:26%;--fd-in:translate3d(0,0,0) rotateY(-14deg)}
  .fd--card span{font-size:7px}
  .forge__steps{flex-basis:100%;max-width:none}
  .forge__steps button{flex-direction:column;gap:3px;padding-right:2px;font-size:14px;letter-spacing:.01em}
  .forge__steps small{font-size:10px}
  .forge__bar .cap{margin-top:0}
  .pistes__steps{grid-template-columns:1fr 1fr;gap:20px 14px}
  .pistes__steps li{grid-template-columns:1fr;row-gap:6px}
  .pistes__steps .ico{grid-row:auto}
  .pistes__loupe{width:46%}
  .logos--id .logo--wide .logo-tile{aspect-ratio:2/1}
}
@media (max-width:400px){
  .forge__steps button{font-size:13px;letter-spacing:0}
}