/* ==========================================================================
PAGES INTÉRIEURES — mêmes codes que l'accueil (maquette validée) :
numéro rouge + filet, étiquette encadrée, titres condensés en capitales,
rouge YNEL, micro-texte en chasse fixe, décors issus des fonds fournis.
Toutes les mesures en --m (1 px de maquette) avec planchers de lisibilité.
========================================================================== */
/* ---------- EN-TÊTE DE PAGE ------------------------------------------------ */
.phero{position:relative;overflow:hidden;isolation:isolate;min-height:calc(335 * var(--m));padding:calc(var(--hdr) + 22 * var(--m)) 0 calc(22 * var(--m));background:#060606}
.phero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.phero__scene{position:absolute;top:0;right:0;bottom:0;width:68%;background-position:var(--pos,60% 50%);background-size:cover;background-repeat:no-repeat;filter:brightness(.6) saturate(1.1) contrast(1.05);-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 22%,#000 46%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 22%,#000 46%)}
.phero__shade{position:absolute;inset:0;background:
linear-gradient(180deg,rgba(6,6,6,.72) 0,transparent 26%,transparent 62%,#060606 100%),
radial-gradient(calc(300 * var(--m)) calc(200 * var(--m)) at 74% 46%,rgba(170,16,30,.22),transparent 70%)}
.phero__particles{position:absolute;inset:0;width:100%;height:100%}
.phero .hero__rail{top:calc(var(--hdr) + 26 * var(--m))}
.phero__idx{position:absolute;z-index:2;right:calc(52 * var(--m));bottom:calc(24 * var(--m));font-family:var(--f-mono);font-size:var(--fs-nano);color:var(--red);letter-spacing:.08em}
.phero__content{position:relative;z-index:3;padding-left:calc(152 * var(--m));max-width:max(calc(620 * var(--m)),calc(152 * var(--m) + var(--mins) * 520px))}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.crumbs li{display:flex;align-items:center;gap:10px}
.crumbs li + li::before{content:"/";color:var(--red)}
.crumbs a{transition:color .3s}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink-2)}
.phero .hero__badge{margin-top:max(calc(var(--mins) * 18px),calc(12 * var(--m)))}
/* nom de la page (h1) : le premier mot qu'on lit, derrière le même trait rouge
que le repère de l'en-tête ; le slogan (.phero__title) vient dessous */
.phero__head{display:flex;flex-wrap:wrap;align-items:center;gap:6px max(calc(var(--mins) * 16px),calc(11 * var(--m)));margin-top:max(calc(var(--mins) * 20px),calc(13 * var(--m)))}
.phero__name{display:flex;align-items:center;gap:.36em;margin-left:calc(-.36em - 2px);font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 30px),calc(20 * var(--m)));line-height:1;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.phero__name::before{content:"";flex:none;width:2px;height:.95em;background:var(--red);transform:skewX(-22deg);box-shadow:0 0 10px rgba(246,43,62,.6)}
.phero__meta{display:flex;align-items:center;gap:max(calc(var(--mins) * 12px),calc(8 * var(--m)));font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.phero__meta::before{content:"";width:max(calc(var(--mins) * 28px),calc(22 * var(--m)));height:1px;background:linear-gradient(90deg,rgba(246,43,62,.8),rgba(246,43,62,.12))}
.phero__title{margin-top:max(calc(var(--mins) * 14px),calc(11 * var(--m)));font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 44px),calc(51 * var(--m)));line-height:.84;letter-spacing:.015em;text-transform:uppercase}
.phero__title > span{display:block}
.phero__title .t1{color:var(--ink);-webkit-text-stroke:.018em currentColor}
.phero__title .t2{color:var(--red);-webkit-text-stroke:.018em currentColor}
.phero__title .t3{color:transparent;-webkit-text-stroke:max(1px,calc(1.05 * var(--m))) var(--ink)}
.phero__lede{margin-top:max(calc(var(--mins) * 18px),calc(11 * var(--m)));max-width:max(calc(var(--mins) * 470px),calc(250 * var(--m)));font-size:max(calc(var(--mins) * 16px),calc(7.8 * var(--m)));line-height:1.62;color:var(--ink-2)}
.phero__lede strong{color:var(--ink);font-weight:500}
.phero .hero__ctas{margin-top:max(calc(var(--mins) * 26px),calc(15 * var(--m)))}
/* sommaire de la page : des liens vers les parties plus bas (flèche vers le
bas, soulignés), pas des boutons : on ne les confond plus avec le menu */
.toc{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:8px max(calc(var(--mins) * 22px),calc(14 * var(--m)));margin:max(calc(var(--mins) * 34px),calc(24 * var(--m))) 0 0 calc(50 * var(--m));padding-left:calc(10 * var(--m));border-left:1.5px solid var(--red)}
.toc > span{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-right:4px}
.toc a{display:inline-flex;align-items:center;gap:9px;padding:6px 0 5px;border-bottom:1px solid var(--line-2);font-family:var(--f-mono);font-weight:500;font-size:max(calc(var(--mins) * 11.5px),calc(5.4 * var(--m)));letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);transition:border-color .3s,color .3s}
.toc a::before{content:"";flex:none;width:5px;height:5px;margin-top:-3px;border-right:1.5px solid var(--red);border-bottom:1.5px solid var(--red);transform:rotate(45deg);transition:transform .35s var(--ease)}
.toc a:hover,.toc a:focus-visible{color:var(--ink);border-color:var(--red)}
.toc a:hover::before{transform:translateY(3px) rotate(45deg)}
.toc--pages a::before{transform:rotate(-45deg);margin-top:0} /* liens vers d'autres pages (404) : flèche à droite */
.toc--pages a:hover::before{transform:translateX(3px) rotate(-45deg)}
/* pages d'expertise : la numérotation « 0X / 04 » occupe le coin bas droit de l'en-tête ;
le sommaire passe à la ligne avant elle au lieu de passer dessous (1024 à 1200 px) */
@media (min-width:1024px){.phero__idx ~ .toc{margin-right:calc(52 * var(--m) + 90px)}}
/* onglets des quatre expertises (bloc commun partials/ptabs.html) */
.ptabs{position:relative;z-index:3;display:flex;align-items:stretch;margin:0 calc(52 * var(--m)) max(calc(var(--mins) * 22px),calc(14 * var(--m))) calc(50 * var(--m));border-bottom:1px solid var(--line-2);font-family:var(--f-mono);font-weight:500;font-size:max(calc(var(--mins) * 12px),calc(6 * var(--m)));letter-spacing:.14em;text-transform:uppercase}
.ptabs a{position:relative;display:flex;align-items:center;gap:max(calc(var(--mins) * 10px),calc(6 * var(--m)));height:100%;padding:max(calc(var(--mins) * 14px),calc(8 * var(--m))) max(calc(var(--mins) * 16px),calc(10 * var(--m)));color:var(--ink-3);white-space:nowrap;transition:color .3s var(--ease),background-color .3s var(--ease)}
.ptabs a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.ptabs a:hover,.ptabs a:focus-visible{color:var(--ink)}
.ptabs a:hover::after{transform:scaleX(.3)}
.ptabs a[aria-current="page"]{color:var(--ink);background:linear-gradient(180deg,rgba(246,43,62,0),rgba(246,43,62,.13))}
.ptabs a[aria-current="page"]::after{transform:none;box-shadow:0 0 12px rgba(246,43,62,.7)}
.ptabs small{font-size:inherit;color:var(--red);letter-spacing:.08em}
.ptabs__all{flex:none;padding-left:0!important;margin-right:max(calc(var(--mins) * 6px),calc(4 * var(--m)));border-right:1px solid var(--line-2)}
.ptabs__all.is-parent{color:var(--ink-2)}
.ptabs__list{display:flex;flex:1 1 auto;min-width:0}
.ptabs__list li{flex:1 1 0;min-width:0}
.phero:has(.ptabs) .hero__rail{top:calc(var(--hdr) + 62 * var(--m))}
/* ouverture (même cadence que l'accueil) */
html.js .phero .crumbs{animation:hRise .8s var(--ease-out) .25s both}
html.js .phero .hero__badge,html.js .phero__head{animation:hRise .8s var(--ease-out) .4s both}
html.js .ptabs{animation:hFade 1s var(--ease-out) .15s both}
html.js .phero__title .t1{animation:hLine .9s var(--ease-out) .5s both}
html.js .phero__title .t2{animation:hLine .9s var(--ease-out) .65s both}
html.js .phero__title .t3{animation:hLine .9s var(--ease-out) .8s both}
html.js .phero__lede{animation:hRise .9s var(--ease-out) 1s both}
html.js .phero .hero__ctas{animation:hRise .9s var(--ease-out) 1.1s both}
html.js .phero .toc{animation:hRise .9s var(--ease-out) 1.2s both}
html.js .phero__scene{animation:hPlanet 1.6s var(--ease-out) .1s both}
html.js .phero__particles,html.js .phero__idx{animation:hFade 1.4s var(--ease-out) 1.1s both}
/* ---------- BLOCS DE SECTION -------------------------------------------------- */
.blk{position:relative;z-index:2;padding:calc(24 * var(--m)) calc(55 * var(--m)) calc(30 * var(--m)) calc(97 * var(--m))}
.blk__title{margin-top:max(calc(var(--mins) * 18px),calc(13 * var(--m)))}
.blk__intro{margin-top:max(calc(var(--mins) * 16px),calc(11 * var(--m)));max-width:max(calc(var(--mins) * 600px),calc(340 * var(--m)))}
.blk__intro.txt,.blk .txt{font-size:max(calc(var(--mins) * 15.5px),calc(7.4 * var(--m)))}
.blk--split{display:grid;grid-template-columns:calc(279 * var(--m)) minmax(0,1fr);column-gap:calc(24 * var(--m))}
.blk--split .blk__side{padding-top:max(calc(var(--mins) * 8px),calc(19 * var(--m)));max-width:max(calc(var(--mins) * 640px),calc(420 * var(--m)))}
.blk__body{margin-top:max(calc(var(--mins) * 34px),calc(22 * var(--m)))}
.sec--tint{background:linear-gradient(180deg,#0a0a0b,#070708)}
.sec--glow::before{content:"";position:absolute;inset:0;background:radial-gradient(calc(380 * var(--m)) calc(160 * var(--m)) at 80% 40%,rgba(160,14,28,.16),transparent 70%);pointer-events:none}
.more{display:inline-flex;align-items:center;gap:10px;margin-top:max(calc(var(--mins) * 20px),calc(13 * var(--m)));font-family:var(--f-mono);font-weight:500;font-size:max(calc(var(--mins) * 11px),calc(5.2 * var(--m)));letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid rgba(246,43,62,.6);padding-bottom:4px;transition:gap .3s var(--ease),border-color .3s}
.more svg{width:14px;height:14px}
.more:hover{gap:16px;border-color:var(--red)}
/* ---------- LISTE DE POINTS (numérotés) ---------------------------------------- */
.feats{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:max(calc(var(--mins) * 18px),calc(12 * var(--m)))}
.feat{position:relative;padding-top:max(calc(var(--mins) * 18px),calc(12 * var(--m)));border-top:1px solid var(--line-2)}
.feat::before{content:"";position:absolute;left:0;top:-1px;width:28px;height:2px;background:var(--red);transition:width .5s var(--ease)}
.feat:hover::before{width:60px}
.feat__n{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.1em;color:var(--red)}
.feat h3{margin-top:max(calc(var(--mins) * 8px),calc(5 * var(--m)));font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 20px),calc(12.2 * var(--m)));line-height:1.02;text-transform:uppercase;letter-spacing:.005em}
.feat p{margin-top:max(calc(var(--mins) * 8px),calc(6 * var(--m)));font-size:max(calc(var(--mins) * 14.5px),calc(6.8 * var(--m)));line-height:1.65;color:var(--ink-2)}
/* ---------- CAPTURES : NAVIGATEUR, TÉLÉPHONE ---------------------------------- */
.frame{position:relative;border:1px solid var(--line-2);background:#0c0c0d;border-radius:5px;overflow:hidden;box-shadow:0 30px 70px -24px rgba(0,0,0,.9),0 0 60px -26px rgba(246,43,62,.35)}
.frame__bar{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;background:#141416;border-bottom:1px solid var(--line)}
.frame__bar i{width:8px;height:8px;border-radius:50%;background:#34343a}
.frame__bar i:first-child{background:rgba(246,43,62,.7)}
.frame__bar span{margin-left:10px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame img{width:100%;height:auto}
.frame--scroll{max-height:min(70vh,640px);overflow-y:auto;overscroll-behavior:contain}
.phone{position:relative;border-radius:30px;border:7px solid #151517;background:#000;overflow:hidden;box-shadow:0 30px 60px -18px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08),0 0 50px -24px rgba(246,43,62,.45)}
/* téléphones façon iPhone (Yann, 10/10 : « je préfère l'encoche des iPhone ») : Dynamic Island au centre
et, sur les captures de sites, la barre d'état d'iOS (9:41, réseau, wifi, batterie) dans la couleur de
l'en-tête du site, comme Safari : l'écran est plein, sans bande noire vide, et l'île ne cache rien.
Tailles en % de la largeur de l'écran (margin et padding en % suivent la largeur) : toutes les tailles
de téléphone du site sont justes sans réglage par page. */
.phone::before{content:"";position:absolute;left:50%;top:0;margin-top:3.3%;width:30%;aspect-ratio:3.3;border-radius:999px;background:#000;transform:translateX(-50%);z-index:2}
.phone:has(img[src*="projects/mobile/"]){background:var(--sb,#000) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 393 49'%3E%3Cg fill='%23fff'%3E%3Ctext x='52' y='31.5' font-family='-apple-system,SF Pro Text,Helvetica Neue,Segoe UI,Arial,sans-serif' font-size='16.5' font-weight='600' letter-spacing='-.2'%3E9:41%3C/text%3E%3Crect x='287' y='27' width='3.2' height='4.6' rx='.9'/%3E%3Crect x='292' y='24.6' width='3.2' height='7' rx='.9'/%3E%3Crect x='297' y='22' width='3.2' height='9.6' rx='.9'/%3E%3Crect x='302' y='19.4' width='3.2' height='12.2' rx='.9'/%3E%3Cpath d='M318.2 31.4l-2.7-3a3.9 3.9 0 0 1 5.4 0z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M311.6 24.9a9.3 9.3 0 0 1 13.2 0' stroke-width='2.1'/%3E%3Cpath d='M314 27.5a5.8 5.8 0 0 1 8.4 0' stroke-width='2.1'/%3E%3Crect x='331' y='19.6' width='24.5' height='12' rx='3.6' stroke-opacity='.45' stroke-width='1.1'/%3E%3C/g%3E%3Crect x='333.1' y='21.7' width='18.5' height='7.8' rx='2' fill='%23fff'/%3E%3Crect x='356.6' y='23.6' width='1.6' height='4.2' rx='.8' fill='%23fff' fill-opacity='.45'/%3E%3C/svg%3E") top center/100% auto no-repeat}
.phone:has(img[src*="photographe-immobilier"]){--sb:#777a7a}
.phone:has(img[src*="cuisiniste-moselle"]){--sb:#26282c}
.phone:has(img[src*="artisan-boucher"]){--sb:#1b2632}
.phone:has(img[src*="salon-vignerons"]){--sb:#12240a}
.phone img[src*="projects/mobile/"]{display:block;padding-top:12.5%!important;background:transparent!important}
.phone img{width:100%;height:auto}
.cap{display:flex;align-items:center;gap:8px;margin-top:12px;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.cap::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
.cap--demo::before{background:var(--yellow)}
/* scène : grande capture + téléphone qui déborde */
.showcase{position:relative;padding-right:14%}
.showcase .phone{position:absolute;right:0;bottom:-7%;width:21%}
/* grille de captures */
.shots{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:max(calc(var(--mins) * 22px),calc(16 * var(--m)))}
.shots figure{min-width:0}
.phones{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:max(calc(var(--mins) * 18px),calc(14 * var(--m)));align-items:start}
.phones figure:nth-child(even){margin-top:max(calc(var(--mins) * 34px),calc(24 * var(--m)))}
/* ---------- PHRASE FORTE --------------------------------------------------------- */
.bigline{position:relative;z-index:2;padding:calc(34 * var(--m)) calc(55 * var(--m)) calc(36 * var(--m)) calc(97 * var(--m))}
.bigline p{font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 34px),calc(34 * var(--m)));line-height:.92;text-transform:uppercase;letter-spacing:-.005em;-webkit-text-stroke:.01em currentColor;max-width:calc(760 * var(--m))}
.bigline p .red{color:var(--red)}
.bigline p .out{color:transparent;-webkit-text-stroke:max(1px,calc(1 * var(--m))) var(--ink)}
.bigline small{display:block;margin-top:max(calc(var(--mins) * 18px),calc(12 * var(--m)));font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
/* ---------- FAITS (bande façon « chiffres » de l'accueil) ---------------------- */
.facts{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:max(calc(var(--mins) * 18px),calc(12 * var(--m)))}
.fact{position:relative;padding-left:max(calc(var(--mins) * 14px),calc(10 * var(--m)))}
.fact::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1.5px;background:var(--red);box-shadow:0 0 8px rgba(246,43,62,.45)}
.fact b{display:block;font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 22px),calc(14 * var(--m)));line-height:1;text-transform:uppercase;color:var(--ink)}
.fact span{display:block;margin-top:max(calc(var(--mins) * 7px),calc(5 * var(--m)));font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);line-height:1.45}
/* ---------- ENCHAÎNEMENT (comprendre → … → rester joignable) ------------------ */
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;counter-reset:ch}
.chain li{display:flex;align-items:center;font-family:var(--f-mono);font-weight:500;font-size:max(calc(var(--mins) * 11.5px),calc(5.6 * var(--m)));letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.chain li::before{counter-increment:ch;content:"0" counter(ch);color:var(--red);margin-right:8px}
.chain li + li::after{content:none}
.chain li:not(:last-child)::after{content:"";width:max(calc(var(--mins) * 26px),calc(18 * var(--m)));height:1px;margin:0 12px;background:linear-gradient(90deg,var(--red),rgba(246,43,62,.2))}
/* ---------- QUESTIONS FRÉQUENTES ------------------------------------------------ */
.faq{max-width:max(calc(var(--mins) * 820px),calc(560 * var(--m)));border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;padding:max(calc(var(--mins) * 20px),calc(12 * var(--m))) 0;cursor:pointer;font-weight:600;font-size:max(calc(var(--mins) * 17px),calc(8.6 * var(--m)));line-height:1.35;color:var(--ink);transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:#fff}
.faq summary svg{width:20px;height:20px;color:var(--red);transition:transform .4s var(--ease)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details > div{padding:0 0 max(calc(var(--mins) * 22px),calc(14 * var(--m)));max-width:680px}
.faq details > div p{font-size:max(calc(var(--mins) * 15.5px),calc(7.4 * var(--m)));line-height:1.7;color:var(--ink-2)}
.faq details > div p + p{margin-top:.8em}
/* ---------- LOGOS (identités) ---------------------------------------------------- */
.logos{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:max(calc(var(--mins) * 16px),calc(12 * var(--m)))}
.logo-tile{display:grid;place-items:center;aspect-ratio:4/3;padding:12%;background:#f4f1ea;border:1px solid rgba(255,255,255,.1);transition:transform .6s var(--ease-out),box-shadow .5s var(--ease)}
.logo-tile img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
.logos figure:hover .logo-tile{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(246,43,62,.55)}
.logos figcaption{margin-top:10px;font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
/* ---------- NUANCIER --------------------------------------------------------------- */
.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:max(calc(var(--mins) * 12px),calc(8 * var(--m)))}
.swatch{aspect-ratio:1/1.1;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;border:1px solid rgba(255,255,255,.1);background:var(--c)}
.swatch b{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--t,#fff)}
.swatch span{font-size:12px;color:var(--t,rgba(255,255,255,.75))}
/* ---------- LIENS VERS LES PAGES (cartes) --------------------------------------- */
.pcards{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:max(calc(var(--mins) * 14px),calc(12 * var(--m)))}
a.xcard{color:inherit}
.xcard__text{margin-top:max(calc(var(--mins) * 10px),calc(7 * var(--m)));max-width:62%;font-size:max(calc(var(--mins) * 14px),calc(6.6 * var(--m)));line-height:1.6;color:var(--ink-2);text-shadow:0 1px 8px rgba(0,0,0,.9)}
.pcards .xcard{min-height:max(calc(var(--mins) * 260px),calc(150 * var(--m)))}
/* ---------- PAGE SUIVANTE --------------------------------------------------------- */
.nextpage{position:relative;display:block;border-top:1px solid var(--line);padding:calc(26 * var(--m)) calc(55 * var(--m)) calc(28 * var(--m)) calc(97 * var(--m));overflow:hidden;isolation:isolate}
.nextpage::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(calc(340 * var(--m)) calc(120 * var(--m)) at 70% 50%,rgba(246,43,62,.14),transparent 70%);opacity:0;transition:opacity .6s var(--ease)}
.nextpage:hover::before{opacity:1}
.nextpage > 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)}
.nextpage > b{display:flex;align-items:center;gap:.35em;margin-top:max(calc(var(--mins) * 10px),calc(6 * var(--m)));font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 38px),calc(38 * var(--m)));line-height:.9;text-transform:uppercase;letter-spacing:-.005em;transition:color .4s var(--ease)}
.nextpage > b > svg{width:.62em;height:.62em;color:var(--red);transition:transform .5s var(--ease)}
.nextpage:hover > b{color:#fff}
.nextpage:hover > b > svg{transform:translateX(10px)}
.nextpage > span{display:block;margin-top:max(calc(var(--mins) * 10px),calc(7 * var(--m)));font-size:max(calc(var(--mins) * 15px),calc(7 * var(--m)));color:var(--ink-3)}
/* ---------- RÉALISATIONS : filtres + grille ------------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{font-family:var(--f-mono);font-weight:500;font-size:max(calc(var(--mins) * 11px),calc(5.2 * var(--m)));letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line-2);padding:9px 14px;transition:color .3s,border-color .3s,background-color .3s}
.filters button:hover{color:var(--ink);border-color:rgba(255,255,255,.35)}
.filters button[aria-pressed="true"]{color:#fff;background:var(--red);border-color:var(--red)}
.wgrid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:max(calc(var(--mins) * 26px),calc(16 * var(--m))) max(calc(var(--mins) * 18px),calc(14 * var(--m)));margin-top:max(calc(var(--mins) * 26px),calc(18 * var(--m)))}
.wcard{min-width:0;transition:opacity .45s var(--ease),transform .55s var(--ease-out)}
.wcard[hidden]{display:none}
.wcard .proj__shot{height:auto;aspect-ratio:16/10}
.wcard .proj__shot img{transition:transform .9s var(--ease-out),filter .6s}
.wcard:hover .proj__shot img{transform:scale(1.035);filter:none}
.wcard h3{margin-top:max(calc(var(--mins) * 12px),calc(8 * var(--m)));font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 21px),calc(11.5 * var(--m)));line-height:1;text-transform:uppercase}
.wcard p{margin-top:6px;font-size:max(calc(var(--mins) * 14px),calc(6.6 * var(--m)));color:var(--ink-2);line-height:1.55}
.wcard .proj__type{margin-top:8px}
/* ---------- CONTACT : l'adresse, en grand ---------------------------------------- */
.mailbig{display:block;margin-top:max(calc(var(--mins) * 22px),calc(16 * var(--m)));font-family:var(--f-title);font-weight:700;font-size:clamp(34px,calc(64 * var(--m)),128px);line-height:.95;letter-spacing:-.01em;color:var(--ink);word-break:break-word;transition:color .35s var(--ease)}
.mailbig span{color:var(--red)}
.mailbig:hover{color:#fff}
.mailbig:hover span{text-shadow:0 0 30px rgba(246,43,62,.6)}
.mailbar{display:flex;flex-wrap:wrap;gap:12px;margin-top:max(calc(var(--mins) * 26px),calc(16 * var(--m)))}
/* ---------- PAGES LÉGALES ---------------------------------------------------------- */
.legal{max-width:820px;padding:calc(20 * var(--m)) 24px calc(40 * var(--m)) calc(97 * var(--m))}
.legal h2{margin:2.2em 0 .7em;font-family:var(--f-title);font-weight:700;font-size:26px;line-height:1.05;text-transform:uppercase;color:var(--ink)}
.legal h2:first-child{margin-top:0}
.legal h3{margin:1.6em 0 .5em;font-weight:600;font-size:17px;color:var(--ink)}
.legal p,.legal li,.legal td,.legal th{font-size:15.5px;line-height:1.72;color:var(--ink-2)}
.legal p + p{margin-top:.8em}
.legal ul{margin:.6em 0 .9em;padding-left:1.2em;list-style:disc}
.legal li::marker{color:var(--red)}
.legal a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(246,43,62,.7);text-underline-offset:3px}
.legal strong{color:var(--ink);font-weight:600}
.legal .lead{font-size:17px;color:var(--ink)}
.legal-info-block{margin:1em 0;padding:18px 20px;border:1px solid var(--line-2);border-left:2px solid var(--red);background:rgba(255,255,255,.02)}
.legal-info-block p{margin:0}
.legal table{width:100%;margin:1em 0;border-collapse:collapse;display:block;overflow-x:auto}
.legal th,.legal td{padding:10px 12px;border:1px solid var(--line-2);text-align:left;vertical-align:top;font-size:14px}
.legal th{color:var(--ink);background:rgba(255,255,255,.03);font-weight:600}
.legal-last-update{margin-top:2em!important;font-family:var(--f-mono);font-size:12px!important;letter-spacing:.1em;color:var(--ink-3)!important}
.legal-cta-manage{margin-top:14px;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;background:var(--red);color:#fff;font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
/* ==========================================================================
Tablette et mobile
========================================================================== */
@media (max-width:1023px){
.phero{min-height:0;padding:calc(var(--hdr) + 26px) 0 40px}
.phero__scene{width:100%;opacity:.5;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 40%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 40%,transparent 100%)}
.phero__shade{background:linear-gradient(180deg,rgba(6,6,6,.55),rgba(6,6,6,.75) 55%,#060606)}
.phero__idx,.phero .hero__rail{display:none}
.phero__content{padding:0 24px;max-width:680px}
.phero .hero__badge{margin-left:0}
.phero__name{font-size:clamp(28px,6vw,40px)}
.phero__title{font-size:clamp(44px,12.5vw,92px)}
.phero__lede{font-size:16.5px}
.toc{margin:30px 24px 0;padding-left:12px;gap:6px 18px}
.toc a{font-size:11.5px}
.ptabs{margin:0 24px 24px;border-bottom:0;font-size:11.5px}
.ptabs .ptabs__all{display:none}
.ptabs__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%}
.ptabs a{flex-direction:column;align-items:flex-start;gap:5px;padding:11px 12px 10px;border:1px solid var(--line-2);background:rgba(6,6,6,.45);white-space:normal;line-height:1.25}
.ptabs a::after{left:-1px;right:-1px}
.ptabs a[aria-current="page"]{border-color:rgba(246,43,62,.75);background:rgba(246,43,62,.14)}
.blk{padding:56px 24px 52px}
.blk--split{grid-template-columns:1fr}
.blk--split .blk__side{padding-top:22px}
.blk__intro{max-width:620px}
.feats{grid-template-columns:repeat(2,minmax(0,1fr))}
.bigline{padding:52px 24px}
.bigline p{font-size:clamp(32px,8vw,56px)}
.facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
.showcase{padding-right:10%}
.showcase .phone{width:26%}
.shots{grid-template-columns:1fr}
.phones{grid-template-columns:repeat(2,minmax(0,1fr))}
.logos{grid-template-columns:repeat(2,minmax(0,1fr))}
.pcards{grid-template-columns:1fr}
.xcard__text{max-width:70%}
.nextpage{padding:44px 24px 48px}
.nextpage > b{font-size:clamp(34px,9vw,60px)}
.wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.legal{padding:40px 24px 60px}
}
@media (max-width:640px){
.ptabs__list{grid-template-columns:repeat(2,minmax(0,1fr))}
.feats,.wgrid,.facts{grid-template-columns:1fr}
.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
.xcard__text{max-width:none}
.chain{flex-direction:column;align-items:flex-start;gap:12px}
.chain li:not(:last-child)::after{display:none}
.showcase{padding-right:0}
.showcase .phone{position:relative;right:auto;bottom:auto;width:46%;margin:-22% 0 0 auto}
}
/* en-tête réduit (pages légales) */
.phero--compact{min-height:calc(250 * var(--m))}
.phero--compact .phero__title{font-size:max(calc(var(--mins) * 40px),calc(42 * var(--m)))}
/* ==========================================================================
VAGUE 3 — ICÔNES ANIMÉES ET MOUVEMENTS COMMUNS DES PAGES INTÉRIEURES
Courbes et durées alignées sur le « langage commun » de l'accueil.
========================================================================== */
:root{--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)}
/* ---------- ICÔNES ANIMÉES (assets/js/modules/icons.js + icons-lib.js) ---------
Grille 48, trait 1,5 à extrémités franches, blanc chaud + rouge, un point jaune
au plus. Le trait se dessine à l'arrivée (.is-drawn), puis une courte action
raconte le sujet (.is-play, une icône à la fois dans un groupe, et au survol).
Classes des tracés : s (trait blanc) r (trait rouge) t (trait fin) g (repère de
construction) gd (repère pointillé) w (surface claire) wi (blanc plein)
f (rouge plein) fr (rouge léger) o (apparaît en fondu) k (fond, masque)
a / ar (point d'ancrage) y (point jaune) x (tracé piloté en SMIL) l (visible
seulement pendant l'action). */
.ico{--ico-size:clamp(56px,calc(46 * var(--m)),88px);--ico-ink:var(--ink);--ico-red:var(--red);--ico-y:#ffd60a;--ico-bg:#060606;position:relative;display:block;flex:none;width:var(--ico-size);height:var(--ico-size);pointer-events:none}
.ico--s{--ico-size:clamp(40px,calc(30 * var(--m)),56px)}
.ico--l{--ico-size:clamp(84px,calc(64 * var(--m)),120px)}
.ico--xl{--ico-size:clamp(112px,calc(92 * var(--m)),168px)}
.ico:empty{visibility:hidden}
.ico > svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke-width:calc(1.5 * var(--ico-k,1));stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:6;transition:translate .7s var(--e-out)}
.ico svg *{transform-box:fill-box;transform-origin:center}
.ico svg [transform]{transform-box:view-box;transform-origin:0 0}
.ico svg .s{stroke:var(--ico-ink)}
.ico svg .r{stroke:var(--ico-red)}
.ico svg .t{stroke:var(--ico-ink);stroke-width:calc(1 * var(--ico-k,1));stroke-opacity:.62}
.ico svg .g,.ico svg .gd{stroke:var(--ico-ink);stroke-width:calc(.6 * var(--ico-k,1));stroke-opacity:.34}
.ico svg .gd{stroke-dasharray:1.2 1.5}
.ico svg .w{fill:var(--ico-ink);fill-opacity:.09}
.ico svg .wi{fill:var(--ink)}
.ico svg .f{fill:var(--ico-red)}
.ico svg .fr{fill:var(--ico-red);fill-opacity:.2}
.ico svg .k{fill:var(--ico-bg)}
.ico svg .a{fill:var(--ico-bg);stroke:var(--ico-ink);stroke-width:calc(1 * var(--ico-k,1))}
.ico svg .ar{fill:var(--ico-red)}
.ico svg .y{fill:var(--ico-y)}
/* arrivée : le trait se dessine, les surfaces s'allument, les points se posent */
.ico svg :is(.s,.r,.t,.g){stroke-dasharray:1.02 1;stroke-dashoffset:1}
.ico svg :is(.s,.r,.t,.g,.gd,.x,.w,.wi,.f,.fr,.o){opacity:0}
.ico svg :is(.a,.ar,.y){scale:0}
.ico svg *{transition:stroke-dashoffset 1s var(--e-io) calc(var(--ico-delay,0ms) + var(--t,0ms)),opacity .35s linear calc(var(--ico-delay,0ms) + var(--t,0ms)),scale .6s var(--e-pop) calc(var(--ico-delay,0ms) + var(--t,0ms)),stroke .3s var(--ease),fill .3s var(--ease)}
.ico.is-drawn svg :is(.s,.r,.t,.g){stroke-dashoffset:0}
.ico.is-drawn svg :is(.s,.r,.t,.g,.gd,.x,.w,.wi,.f,.fr,.o){opacity:1}
.ico.is-drawn svg :is(.a,.ar,.y){scale:1}
.ico svg .l,.ico.is-drawn svg .l{opacity:0}
.ico svg .nd{stroke-dasharray:none;vector-effect:non-scaling-stroke}
/* survol de l'élément parent : le trait s'allume en rouge, l'icône se soulève */
:is(.ico-host,.ico-item,.feat,.fact,.route,.step,.chain li,.xcard):hover .ico{--ico-ink:var(--red);--ico-red:#ffd9dc}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
:is(.ico-host,.ico-item,.feat,.fact,.route,.step,.chain li,.xcard):hover .ico > svg{translate:0 -3px}
}
@media (prefers-reduced-motion:reduce){.ico > svg,.ico svg *{transition:none!important;animation:none!important}}
/* ---------- LISTE VISUELLE : icône + libellé court (+ une ligne) -----------------
-
Une palette
Une ligne courte.
*/
.icos{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:max(calc(var(--mins) * 34px),calc(24 * var(--m))) max(calc(var(--mins) * 24px),calc(18 * var(--m)))}
.ico-item{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding-top:max(calc(var(--mins) * 22px),calc(15 * var(--m)));background:linear-gradient(var(--line-2),var(--line-2)) 0 0/100% 1px no-repeat}
.ico-item::before{content:"";position:absolute;left:0;top:-.5px;width:28px;height:2px;background:var(--red);transition:width .5s var(--ease)}
.ico-item:hover::before{width:60px}
.ico-item > .ico{margin-bottom:max(calc(var(--mins) * 16px),calc(11 * var(--m)))}
.ico-item__n{position:absolute;right:0;top:max(calc(var(--mins) * 22px),calc(15 * var(--m)));font-family:var(--f-mono);font-weight:500;font-size:var(--fs-nano);letter-spacing:.1em;color:var(--red)}
.ico-item :is(h3,b,strong):not(.ico-item__d){display:block;font-family:var(--f-title);font-weight:700;font-size:max(calc(var(--mins) * 20px),calc(12.4 * var(--m)));line-height:1.02;letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
.ico-item p{margin-top:max(calc(var(--mins) * 7px),calc(5 * var(--m)));font-size:max(calc(var(--mins) * 14.5px),calc(6.8 * var(--m)));line-height:1.55;color:var(--ink-2)}
.icos--plain .ico-item{padding-top:0;background:none}
.icos--plain .ico-item::before{display:none}
.icos--center .ico-item{align-items:center;text-align:center}
.icos--center .ico-item::before{left:50%;translate:-50% 0}
.icos--row .ico-item{flex-direction:row;align-items:flex-start;gap:max(calc(var(--mins) * 16px),calc(12 * var(--m)))}
.icos--row .ico-item > .ico{margin-bottom:0}
.icos--row .ico-item > div{min-width:0;padding-top:max(calc(var(--mins) * 6px),calc(4 * var(--m)))}
/* ---------- ICÔNES DANS LES COMPOSANTS EXISTANTS --------------------------------- */
.feat > .ico{margin-bottom:max(calc(var(--mins) * 14px),calc(10 * var(--m)))}
.feat:has(> .ico) > .feat__n{position:absolute;right:0;top:max(calc(var(--mins) * 18px),calc(12 * var(--m)))}
.fact:has(> .ico){padding-left:0}
.fact:has(> .ico)::before{display:none}
.fact > .ico{margin-bottom:max(calc(var(--mins) * 12px),calc(9 * var(--m)))}
.step > .ico{margin-top:max(calc(var(--mins) * 16px),calc(12 * var(--m)))}
.route > .ico{align-self:start}
/* chaîne d'étapes illustrée : icône, numéro, libellé ; le filet relie les icônes */
.chain:has(.ico){--cs:clamp(48px,calc(36 * var(--m)),68px);display:grid;grid-template-columns:repeat(auto-fit,minmax(max(calc(var(--mins) * 112px),calc(78 * var(--m))),1fr));align-items:start;gap:26px 0}
.chain:has(.ico) li{position:relative;flex-direction:column;align-items:flex-start;gap:10px;padding-right:14px;line-height:1.35}
.chain:has(.ico) li > .ico{--ico-size:var(--cs);order:-1;margin-bottom:4px}
.chain:has(.ico) li::before{margin:0}
.chain:has(.ico) li:not(:last-child)::after{position:absolute;left:calc(var(--cs) + 10px);right:12px;top:calc(var(--cs) / 2);width:auto;margin:0}
/* ---------- ARRIVÉES EN CASCADE ---------------------------------------------------
Décalage automatique des éléments d'une grille (un style="--i:N" écrit à la main
reste prioritaire). */
:is(.icos,.feats,.facts,.shots,.phones,.logos,.pcards,.wgrid,.chain,.steps__list) > :nth-child(2){--i:1}
:is(.icos,.feats,.facts,.shots,.phones,.logos,.pcards,.wgrid,.chain,.steps__list) > :nth-child(3){--i:2}
:is(.icos,.feats,.facts,.shots,.phones,.logos,.pcards,.wgrid,.chain,.steps__list) > :nth-child(4){--i:3}
:is(.icos,.feats,.facts,.shots,.phones,.logos,.pcards,.wgrid,.chain,.steps__list) > :nth-child(5){--i:4}
:is(.icos,.feats,.facts,.shots,.phones,.logos,.pcards,.wgrid,.chain,.steps__list) > :nth-child(6){--i:5}
:is(.icos,.feats,.facts,.shots,.phones,.logos,.pcards,.wgrid,.chain,.steps__list) > :nth-child(7){--i:6}
:is(.icos,.feats,.facts,.shots,.phones,.logos,.pcards,.wgrid,.chain,.steps__list) > :nth-child(8){--i:7}
:is(.icos,.feats,.facts,.shots,.phones,.logos,.pcards,.wgrid,.chain,.steps__list) > :nth-child(n+9){--i:8}
/* objets principaux (captures, téléphones) : arrivent de la profondeur, pas d'un simple fondu */
html.js .rv:is(.frame,.phone,.showcase,.shots > figure,.phones > figure):not(.is-in){transform:perspective(1400px) translate3d(0,46px,0) rotateX(7deg);transform-origin:50% 100%}
/* ---------- FILETS QUI SE TRACENT ------------------------------------------------- */
.feat{border-top:0;background:linear-gradient(var(--line-2),var(--line-2)) 0 0/100% 1px no-repeat}
html.js :is(.feat,.ico-item){transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out),background-size 1.3s var(--e-io);transition-delay:calc(var(--i,0) * 90ms)}
html.js :is(.rv:not(.is-in) :is(.feat,.ico-item),:is(.feat,.ico-item).rv:not(.is-in)){background-size:0 1px}
html.js :is(.feat,.ico-item)::before{transform-origin:left center;transition:scale .8s var(--e-out) calc(var(--i,0) * 90ms + .5s),width .5s var(--ease)}
html.js :is(.rv:not(.is-in) :is(.feat,.ico-item),:is(.feat,.ico-item).rv:not(.is-in))::before{scale:0 1}
.fact::before{transform-origin:center top}
html.js .fact::before{transition:scale 1s var(--e-io) calc(var(--i,0) * 110ms + .3s)}
html.js :is(.rv:not(.is-in) .fact,.fact.rv:not(.is-in))::before{scale:1 0}
html.js .chain li::after{transform-origin:left center;transition:scale .8s var(--e-io) calc(var(--i,0) * 120ms + .45s)}
html.js :is(.chain.rv:not(.is-in),.rv:not(.is-in) .chain) li::after{scale:0 1}
html.js .chain li{transition:opacity .7s var(--ease-out) calc(var(--i,0) * 110ms + .15s),translate .9s var(--e-out) calc(var(--i,0) * 110ms + .15s)}
html.js :is(.chain.rv:not(.is-in),.rv:not(.is-in) .chain) li{opacity:0;translate:0 12px}
/* filet vertical du rail : se trace pendant que la section entre (navigateurs récents) */
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
html.js:not(.calage) main .sec__rail::after{transform-origin:center top;animation:pgRail linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
}
}
@keyframes pgRail{from{scale:1 0}to{scale:1 1}}
@media (prefers-reduced-motion:reduce){
html.js :is(.feat,.ico-item){background-size:100% 1px!important}
html.js :is(.feat,.ico-item,.fact,.chain li)::before,html.js .chain li::after{scale:none!important}
html.js .chain li{opacity:1!important;translate:none!important}
html.js .rv:is(.frame,.phone,.showcase,.shots > figure,.phones > figure){transform:none!important}
}
/* ---------- RELIEF AU SURVOL DES VISUELS (.frame, .phone) ---------------------------
Une lumière suit le pointeur (--mx / --my, écrits par icons.js) ; les visuels
qui ne portent pas eux-mêmes .rv se soulèvent légèrement. Une page qui anime
ses captures peut s'en passer avec la classe .no-relief. */
:where(.frame,.phone)::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .6s var(--ease);background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(255,236,238,.11),transparent 46%),linear-gradient(180deg,rgba(255,255,255,.045),transparent 34%)}
:where(.frame,.phone):not(.rv,.no-relief){transition:translate .8s var(--e-out),box-shadow .8s var(--ease)}
@media (hover:hover) and (pointer:fine){
:where(.frame,.phone):not(.no-relief):hover::after{opacity:1}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
:where(.frame):not(.rv,.no-relief,[data-depth]):hover{translate:0 -6px;box-shadow:0 44px 80px -30px rgba(0,0,0,.95),0 0 76px -24px rgba(246,43,62,.5)}
:where(.phone):not(.rv,.no-relief,[data-depth]):hover{translate:0 -6px;box-shadow:0 40px 70px -22px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.1),0 0 64px -22px rgba(246,43,62,.55)}
}
/* ---------- EN-TÊTE DE PAGE ALLÉGÉ ---------------------------------------------------
Nom de la page, slogan, une phrase, un bouton (plus de fil d'Ariane ni de sommaire).
Sur ordinateur, l'en-tête respire : le bloc se centre dans la hauteur disponible. */
.phero__content > .phero__head:first-child{margin-top:0}
@media (min-width:1024px){
.phero:not(.phero--compact){display:flex;flex-direction:column;min-height:max(calc(335 * var(--m)),min(84svh,calc(480 * var(--m))))}
.phero:not(.phero--compact) > .phero__content{margin-block:auto;padding-bottom:max(calc(var(--mins) * 24px),calc(16 * var(--m)))}
.phero__lede{max-width:max(calc(var(--mins) * 440px),calc(236 * var(--m)))}
}
@media (max-width:1023px){
.icos{grid-template-columns:repeat(var(--cols-t,3),minmax(0,1fr));gap:32px 22px}
.ico-item :is(h3,b,strong):not(.ico-item__d){font-size:20px}
.ico-item p{font-size:15px}
}
@media (max-width:640px){
.icos{grid-template-columns:repeat(var(--cols-m,2),minmax(0,1fr));gap:28px 16px}
.icos--row{grid-template-columns:1fr}
.chain:has(.ico){grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
.chain:has(.ico) li:not(:last-child)::after{display:none}
.facts:has(> .fact > .ico){grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
}
/* ==========================================================================
VAGUE 3 BIS — EN-TÊTES PLEIN ÉCRAN, VRAIS TITRES DE SECTION, REPÈRES ALLÉGÉS
(relecture « clarté » du 01/10 : « les pages sont pas assez grandes »).
Rien ici ne touche l'accueil (main.home) ; tout est neutre en ?calage.
========================================================================== */
/* L'en-tête de page est un écran entier, comme une section de l'accueil : la
section 01 commence à l'écran suivant. Plafond 4:3 pour les écrans debout (une
tablette en portrait n'a pas 1 366 px d'en-tête pour 500 px de contenu). */
@media (min-width:1024px){
html:not(.calage) .phero:not(.phero--compact){min-height:min(100vh,75vw);min-height:min(100svh,75vw)}
}
/* téléphone et tablette : un écran aussi ; le décor reste en haut, le texte se pose en bas */
@media (max-width:1023px){
html:not(.calage) .phero:not(.phero--compact){display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
html:not(.calage) .phero:not(.phero--compact) > .phero__content{margin-top:auto}
/* le texte est en bas : le décor du haut peut se montrer franchement */
html:not(.calage) .phero:not(.phero--compact) .phero__scene{opacity:.82;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 92%);mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 92%)}
html:not(.calage) .phero:not(.phero--compact) .phero__shade{background:linear-gradient(180deg,rgba(6,6,6,.5) 0,rgba(6,6,6,.12) 22%,rgba(6,6,6,.2) 38%,rgba(6,6,6,.82) 62%,#060606 88%)}
}
/* Le décor vit : il avance très lentement vers vous (propriété « scale », qui se
compose avec la parallaxe écrite dans « translate »). */
@media (prefers-reduced-motion:no-preference){
html.js:not(.calage) .phero__scene{animation:hPlanet 1.6s var(--ease-out) .1s both,phDrift 38s ease-in-out 1.7s infinite alternate}
/* en-tête sorti de l'écran (parallax.js) : la dérive s'arrête, rien de visible */
html.js:not(.calage) .phero.is-off .phero__scene{animation-play-state:paused}
}
@keyframes phDrift{from{scale:1}to{scale:1.08}}
/* Repère de défilement (ordinateur) : un filet part du titre vers le bas de l'écran,
une lumière rouge y descend vers la suite (seulement s'il y a une suite, donc pas sur la
404, et pas quand l'en-tête porte déjà l'animation de la page, .phero__show). Immobile en animations réduites. */
@media (min-width:1024px){
html:not(.calage) .phero:not(.phero--compact):has(~ .sec):not(:has(.phero__show)){--cue:max(56px,calc(48 * var(--m)))}
html:not(.calage) .phero:not(.phero--compact):has(~ .sec):not(:has(.phero__show))::before,
html:not(.calage) .phero:not(.phero--compact):has(~ .sec):not(:has(.phero__show))::after{content:"";position:absolute;z-index:3;left:calc(152 * var(--m));width:1px;pointer-events:none}
html:not(.calage) .phero:not(.phero--compact):has(~ .sec):not(:has(.phero__show))::before{bottom:0;height:var(--cue);background:linear-gradient(rgba(245,243,238,0),rgba(245,243,238,.3))}
html:not(.calage) .phero:not(.phero--compact):has(~ .sec):not(:has(.phero__show))::after{bottom:calc(var(--cue) * .62);height:calc(var(--cue) * .38);background:linear-gradient(rgba(246,43,62,0),var(--red));box-shadow:0 0 8px rgba(246,43,62,.75);opacity:0}
}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
html.js:not(.calage) .phero:not(.phero--compact):has(~ .sec):not(:has(.phero__show))::before{animation:hFade 1.2s var(--ease-out) 1.4s both}
html.js:not(.calage) .phero:not(.phero--compact):has(~ .sec):not(:has(.phero__show))::after{animation:phCue 2.6s var(--e-io) 2.2s infinite}
}
@keyframes phCue{0%{opacity:0;translate:0 0}25%{opacity:1}100%{opacity:0;translate:0 265%}}
/* Pages d'expertise : l'onglet actif dit déjà « 0X · nom de la page ». On retire les
doublons « Expertise 0X / 04 » (sous le titre) et « 0X / 04 » (coin bas droit). */
html:not(.calage) body[data-section="expertises"] :is(.phero__meta,.phero__idx){display:none}
/* Onglets au téléphone : UNE ligne de quatre au lieu d'une grille 2 × 2 de 135 px au-dessus
du titre ; les noms passent sur deux lignes, en police des titres, sans cadres. */
@media (max-width:1023px){
html:not(.calage) .ptabs{margin:0 24px 22px;border-bottom:1px solid var(--line-2);font-size:clamp(12.5px,3.4vw,15px)}
html:not(.calage) .ptabs__list{display:flex;gap:0}
html:not(.calage) .ptabs a{justify-content:flex-start;gap:4px;padding:9px 8px 10px 0;border:0;background:none;font-family:var(--f-title);font-weight:700;letter-spacing:.03em;line-height:1.08}
html:not(.calage) .ptabs li + li a{padding-left:8px;border-left:1px solid var(--line)}
html:not(.calage) .ptabs a::after{left:0;right:0}
html:not(.calage) .ptabs small{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.1em}
html:not(.calage) .ptabs a[aria-current="page"]{background:linear-gradient(180deg,rgba(246,43,62,0),rgba(246,43,62,.16))}
}
/* Le secteur du client, seule indication sous chaque logo : lisible (police des titres) */
html:not(.calage) .logos figcaption{margin-top:max(10px,calc(7 * var(--m)));font-family:var(--f-title);font-weight:700;font-size:max(16px,calc(9.2 * var(--m)));line-height:1.15;letter-spacing:.04em;color:var(--ink-2)}
/* Titres de section : une vraie hiérarchie, comme à l'accueil (environ 61 px à 1440,
81 px à 1920, contre 36 et 48 avant). Le bloc de fin commun (.cta__title) garde sa
taille. Dans une section en deux colonnes, la colonne du titre s'élargit d'autant. */
html:not(.calage) main:not(.home) .sec .h2:not(.cta__title){font-size:max(40px,calc(46 * var(--m)));line-height:.88}
@media (min-width:1024px){
html:not(.calage) main:not(.home) .blk--split{grid-template-columns:calc(400 * var(--m)) minmax(0,1fr)}
}
@media (max-width:1023px){
html:not(.calage) main:not(.home) .sec .h2:not(.cta__title){font-size:clamp(36px,10vw,46px)}
}
/* @nextpage:debut */
/* PAGE SUIVANTE · ÉCRAN-APERÇU : le vide à droite du bloc devient un écran (famille
de la télé de l'accueil) qui s'allume à l'arrivée et passe un aperçu de la page
suivante (scène de son en-tête, image phare animée). Décoratif, dans le , sans
pointeur. nextpage.js pose .is-armed (éteint en attente), .is-on (allumage puis
boucles), .is-vis (à l'écran, sinon pause) ; sans JS, éditeur, animations
réduites : image fixe, seul l'éclat répond au survol. np--deck : pages/podcast.css */
.np{--mw:calc(340 * var(--m));--mh:calc(var(--mw) * .6467);--chin:calc(var(--mw) * .05);--bz:calc(var(--mw) * .014);--tilt:-17deg;--slide:calc(-18 * var(--m));
--sh:0 0 0 1px rgba(255,255,255,.18),0 calc(var(--mw) * .03) calc(var(--mw) * .07) rgba(0,0,0,.75),0 0 calc(var(--mw) * .06) rgba(246,43,62,.5)}
.nextpage.np:focus-visible{outline-offset:-4px}
:where(.np-vis),:where(.np-vis) i{display:block;font-style:normal}
.np-vis{position:relative;pointer-events:none;perspective:calc(var(--mw) * 2.4);perspective-origin:62% 50%}
.np-vis img{max-width:none}
.np-vis > svg{position:absolute;width:0;height:0;overflow:hidden}
@media (min-width:1024px){
.nextpage.np{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--mw) * 1.1);grid-template-rows:1fr auto auto auto 1fr;
column-gap:calc(28 * var(--m));padding-top:calc(16 * var(--m));padding-bottom:calc(16 * var(--m))}
.np > :is(small,b,span){grid-column:1}
.np > small{grid-row:2}
.np > b{grid-row:3}
.np > span{grid-row:4}
.np > .np-vis{grid-column:2;grid-row:1 / -1;height:calc(var(--mh) + var(--chin) + 44 * var(--m))}
/* filet rouge : de la flèche du titre jusque sous l'écran */
.np > b::after{content:"";flex:1 1 0;min-width:calc(30 * var(--m));height:1px;margin:0 calc(-1 * (28 * var(--m) + var(--mw) * .26)) 0 .1em;
background:linear-gradient(90deg,rgba(246,43,62,.12),rgba(246,43,62,.55) 55%,#ff5a6a);box-shadow:0 0 6px rgba(246,43,62,.35);transform-origin:0 50%;opacity:.85;transition:opacity .5s var(--ease)}
.np:is(:hover,:focus-visible) > b::after{opacity:1}
}
/* grands écrans : l'écran grandit (pas en dessous : la description passerait sur 2 lignes) */
@media (min-width:1600px){.nextpage.np{--mw:calc(400 * var(--m))}}
.np-mon{position:absolute;right:calc(20 * var(--m));top:calc(18 * var(--m));width:var(--mw);height:calc(var(--mh) + var(--chin));
transform-origin:100% 50%;transform:rotateY(var(--tilt));transform-style:preserve-3d;transition:transform 1s var(--ease-out)}
.np-tilt{position:absolute;inset:0;transform-style:preserve-3d}
.np-halo{position:absolute;inset:-22% -16%;background:radial-gradient(closest-side,rgba(246,43,62,.46),rgba(246,43,62,.14) 52%,transparent);opacity:.5;transition:opacity .7s var(--ease)}
.np-body{position:absolute;inset:0;border-radius:calc(var(--mw) * .012);padding:var(--bz) var(--bz) calc(var(--bz) + var(--chin));background:linear-gradient(#161618,#0b0b0c 62%,#0e0e10);
box-shadow:0 0 0 1px rgba(255,255,255,.13),calc(var(--mw) * -.05) calc(var(--mw) * .07) calc(var(--mw) * .15) rgba(0,0,0,.85),0 0 calc(var(--mw) * .12) calc(var(--mw) * .01) rgba(246,43,62,.2)}
.np-body::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent)}
.np-body::after,.np-hit{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 1px rgba(246,43,62,.75),0 0 calc(var(--mw) * .07) rgba(246,43,62,.55);opacity:0;transition:opacity .6s var(--ease)}
.np-hit{box-shadow:0 0 0 2px #ff5a6a,0 0 calc(var(--mw) * .1) calc(var(--mw) * .01) rgba(246,43,62,.85);transition:none}
/* netteté : Chrome peint l'écran incliné (perspective) à l'échelle 1, flou sur écran haute
densité ; il est dessiné au double puis réduit de moitié (même cadrage). html.np-ss : posé
par nextpage.js dans les navigateurs Chromium où zoom agrandit aussi les vw ; sinon rien */
.np-ss .np-body{zoom:2;inset:auto;left:0;top:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0}
.np-scr{position:relative;height:100%;overflow:hidden;border-radius:calc(var(--mw) * .005);background:#040405;isolation:isolate}
:where(.np-scr,.np-pic,.np-jit,.np-zoom,.np-ph) > i{position:absolute;inset:0}
.np-zoom{transition:transform 1.1s var(--ease-out)}
.np-scene{position:absolute;left:-14%;top:-14%;width:128%;height:128%;object-fit:cover;object-position:var(--pos,50% 50%);transform:scale(1.1);filter:saturate(1.2) contrast(1.08) brightness(1.1)}
.np-shade{background:radial-gradient(118% 125% at 62% 46%,transparent 52%,rgba(3,2,3,.6)),linear-gradient(90deg,rgba(4,3,4,.4),transparent 42%)}
/* verre */
.np-veil{background:#030304;opacity:0}
.np-scr :is(.np-snow,.np-zs){position:absolute;inset:-40%;background:var(--np-snow,none) 0 0/calc(var(--mw) * .42) auto;opacity:0}
.np-lines{background:repeating-linear-gradient(rgba(0,0,0,.2) 0 1px,transparent 1px 3px),radial-gradient(130% 125%,transparent 60%,rgba(0,0,0,.5))}
.np-roll{bottom:auto;height:34%;opacity:0;background:linear-gradient(transparent,rgba(255,255,255,.045) 35%,rgba(255,236,238,.12) 52%,rgba(255,255,255,.03) 64%,transparent)}
.np-sweep{opacity:0}
.np-sweep::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--red) 16%,#ffd9dc,var(--red) 84%,transparent);box-shadow:0 0 14px 2px rgba(246,43,62,.6)}
.np-glare{inset:-12%;background:linear-gradient(118deg,rgba(255,255,255,.11),rgba(255,255,255,.035) 30%,transparent 46%)}
.np-sheen{right:auto;width:34%;opacity:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16) 46%,rgba(255,255,255,.05) 56%,transparent)}
.np-beam{opacity:0;background:radial-gradient(50% 50%,#fff,#ffe3e6 30%,rgba(246,43,62,.85) 62%,transparent 74%)}
.np-chin{position:absolute;left:var(--bz);right:var(--bz);bottom:0;height:var(--chin);display:flex;align-items:center;justify-content:flex-end;gap:calc(var(--chin) * .5);padding-right:calc(var(--mw) * .018);border-top:1px solid rgba(255,255,255,.07)}
.np-grille{margin-right:auto;width:11%;height:32%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,transparent 1px 4px)}
.np-led{position:relative;width:calc(var(--chin) * .2);height:calc(var(--chin) * .2);border-radius:50%;background:#2b0c11}
.np-led::after,.np-key::after{content:"";position:absolute;inset:0;border-radius:50%;background:#ff3448;box-shadow:0 0 4px rgba(246,43,62,.95),0 0 10px rgba(246,43,62,.55)}
.np-keys{display:flex;gap:calc(var(--chin) * .28)}
.np-key{position:relative;width:calc(var(--chin) * .95);height:calc(var(--chin) * .42);border:1px solid rgba(255,255,255,.13);border-radius:2px;background:#121214}
.np-key::after{inset:auto;width:calc(var(--chin) * .13);height:calc(var(--chin) * .13);left:calc(50% - var(--chin) * .065);top:calc(var(--chin) * -.22);opacity:0}
.np-key:first-child::after{opacity:1}
/* sol rouge, repères de visée */
.np-floor{position:absolute;right:calc(20 * var(--m));width:calc(var(--mw) * .92);top:calc(28 * var(--m) + var(--mh) + var(--chin));height:2px;
background:linear-gradient(90deg,transparent,rgba(246,43,62,.85) 28%,#ff7482 58%,rgba(246,43,62,.85) 82%,transparent);opacity:.7;transition:opacity .7s var(--ease)}
.np-floor::after{content:"";position:absolute;left:6%;right:6%;top:-10px;height:24px;background:radial-gradient(closest-side,rgba(246,43,62,.38),transparent);opacity:.6;transition:opacity .7s var(--ease)}
.np-crop{position:absolute;right:calc(10 * var(--m));top:calc(8 * var(--m));width:calc(var(--mw) + 20 * var(--m));height:calc(var(--mh) + var(--chin) + 20 * var(--m));transition:transform 1s var(--ease-out)}
.np-crop > i{position:absolute;width:max(9px,calc(10 * var(--m)));height:max(9px,calc(10 * var(--m)));left:0;top:0;transform-origin:0 0;--b:1px 0 0 1px}
.np-crop > i::before,.np-crop > i::after{content:"";position:absolute;inset:0;border:solid rgba(245,243,238,.34);border-width:var(--b)}
.np-crop > i::after{border-color:var(--red);opacity:0;transition:opacity .5s var(--ease)}
.np-crop > i:nth-child(2){left:auto;right:0;transform-origin:100% 0;--b:1px 1px 0 0;--d:1}
.np-crop > i:nth-child(3){left:auto;top:auto;right:0;bottom:0;transform-origin:100% 100%;--b:0 1px 1px 0;--d:2}
.np-crop > i:nth-child(4){top:auto;bottom:0;transform-origin:0 100%;--b:0 0 1px 1px;--d:3}
/* plume du filet (départ et course : nextpage.js) */
.np-pen{position:absolute;left:var(--pen-x,0);top:var(--pen-y,50%);width:64px;height:3px;margin:-1.5px 0 0 -58px;border-radius:2px;opacity:0;
background:linear-gradient(90deg,transparent,rgba(246,43,62,.75) 55%,#ffd9dc 88%);box-shadow:0 0 10px rgba(246,43,62,.8)}
.np-pen::after{content:"";position:absolute;right:-4px;top:-4px;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px rgba(255,255,255,.8),0 0 22px 8px rgba(246,43,62,.9)}
@media (max-width:1023px){
.np{--mw:min(calc(100vw - 64px),560px);--tilt:-13deg;--slide:0px}
.np > .np-vis{margin-top:30px;height:calc(var(--mh) + var(--chin) + 40px);perspective:calc(var(--mw) * 2.8)}
.np-mon{right:auto;left:calc(50% - var(--mw) / 2 - 6px);top:14px}
.np-floor{right:auto;left:calc(50% - var(--mw) * .46 - 6px);top:calc(26px + var(--mh) + var(--chin))}
.np-crop{right:auto;left:calc(50% - var(--mw) / 2 - 14px);top:4px;width:calc(var(--mw) + 12px)}
.np-pen{display:none}
}
/* images phares */
.np-win,.np-vert{position:absolute;overflow:hidden;border-radius:calc(var(--mw) * .008);background:#0b0b0c;box-shadow:var(--sh)}
.np-win{right:6%;top:12%;width:63%;aspect-ratio:16/10.4}
.np-win__bar{position:relative;z-index:1;height:calc(var(--mw) * .028);display:flex;align-items:center;gap:calc(var(--mw) * .007);padding-left:calc(var(--mw) * .012);background:#141416;border-bottom:1px solid rgba(255,255,255,.08)}
.np-win__bar i{width:max(3px,calc(var(--mw) * .008));height:max(3px,calc(var(--mw) * .008));border-radius:50%;background:rgba(255,255,255,.22)}
.np-win__bar i:first-child{background:var(--red)}
.np-win img{display:block;width:100%;height:auto}
.np-port,.np-shot{position:relative;overflow:hidden}
.np-shot{overflow:visible}
/* cadre vertical 9:16 */
.np-vert{left:50%;top:8%;height:84%;aspect-ratio:9/16;transform:translateX(-50%)}
.np-vert img,.np-win--v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.np-vf{position:absolute;inset:0;opacity:0}
.np-vf:first-child,.np-ch:first-child,.np-zone:first-of-type{opacity:1}
.np-rec{position:absolute;left:9%;top:9%;width:max(6px,calc(var(--mw) * .02));height:max(6px,calc(var(--mw) * .02));border-radius:50%;background:#ff3448;box-shadow:0 0 6px rgba(246,43,62,.95)}
.np-wave{position:absolute;left:9%;right:9%;bottom:5%;height:9%;display:flex;align-items:center;gap:4%}
.np-wave i{flex:1;height:100%;border-radius:1px;background:linear-gradient(#ff5a6a,#f62b3e);box-shadow:0 0 6px rgba(246,43,62,.6);transform:scaleY(.4)}
.np-wave i:nth-child(odd){transform:scaleY(.75)}
.np-segs,.np-prog{position:absolute;left:6%;right:6%;top:auto;bottom:6.5%;height:2px;display:flex;gap:calc(var(--mw) * .012);background:rgba(255,255,255,.26)}
.np-segs{background:none}
.np-vert .np-segs{top:3.5%;bottom:auto;left:7%;right:7%}
.np-segs > i{position:relative;flex:1;background:rgba(255,255,255,.3)}
.np-segs > i::after,.np-prog > i{content:"";position:absolute;inset:0;background:var(--red);box-shadow:0 0 8px rgba(246,43,62,.8);transform-origin:0 50%;transform:scaleX(0)}
.np-segs > i:first-child::after{transform:none}
.np-prog > i{transform:scaleX(.62)}
.np-cur{position:absolute;inset:0;transform:translate(52%,22%)}
.np-cur > i{position:absolute;width:max(14px,calc(var(--mw) * .045));height:max(14px,calc(var(--mw) * .045));transform-origin:20% 15%}
.np-cur svg{width:100%;height:100%;fill:#fff;stroke:#060606;stroke-width:1.4;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.np-tap,.np-pop{position:absolute;left:var(--x);top:var(--y,50%);width:calc(var(--mw) * .09);height:calc(var(--mw) * .09);margin:calc(var(--mw) * -.045);border-radius:50%;border:2px solid #ff5a6a;box-shadow:0 0 10px rgba(246,43,62,.8);opacity:0}
/* Expertises : planche de l'emblème (chaîne 1) */
.np-win--board{background:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/10% 15.4%,linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/10% 15.4%,radial-gradient(70% 90% at 58% 40%,#1b1012,#0b0b0c 70%)}
.np-art,.np-idv{position:absolute;left:50%;top:50%;height:74%;aspect-ratio:769/740;transform:translate(-50%,-50%)}
:is(.np-art,.np-idv) svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
:is(.np-art,.np-idv) :is(.np-r1,.np-r2) circle{fill:none;stroke:rgba(246,43,62,.8);stroke-width:2.6;stroke-dasharray:1.2 1.4}
:is(.np-art,.np-idv) .np-r2 circle{stroke:rgba(255,214,10,.65);stroke-dasharray:2 2}
.np-ch{position:absolute;inset:0;opacity:0}
.np-ch .np-vert{height:78%;top:11%}
.np-r1,.np-idv__orbit{transform-origin:50% 50%}
.np-r2,.np-idv__sunw,.np-idv__sun{transform-origin:59.92% 29.97%}
/* Identité visuelle : l'emblème et ses tracés */
.np-idv{left:auto;right:15%;height:68%;transform:translateY(-50%)}
.np-idv svg *{vector-effect:non-scaling-stroke}
.np-idv__guides :is(line,circle){fill:none;stroke:rgba(245,243,238,.32);stroke-width:2.2}
.np-idv__guides .np-g-diag{stroke:rgba(245,243,238,.18)}
.np-idv__guides line{transform-box:fill-box;transform-origin:50% 50%}
.np-g-nodes rect{fill:#060606;stroke:var(--red);stroke-width:2}
.np-idv__line{--mk-ink:transparent;--mk-sun:transparent;fill:none;stroke:#ff4b5c;stroke-width:4;opacity:.9}
.np-idv__fill{--mk-sun:transparent}
.np-idv__sun circle{fill:#ffd60a}
/* ce qui tourne ou respire est un autour du