/* GOOD ALLURE STUDIO, la feuille du site.
   Écrite le 2026-09-12 sur la DA de la marketplace : blanc, encre, Archivo, la
   voix en italique. Refaite le soir même : haut de gamme, plus de mouvement au
   survol et au défilement, moins de traits, rien qui ressemble à un gabarit.
   Ce qui tient la page : la taille du texte, le blanc, l'asymétrie, la
   photographie et le dessin. Un seul filet structurel, sous la barre. */

@font-face{font-family:"Archivo";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("fonts/archivo-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("fonts/archivo-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Voix";font-style:italic;font-weight:400;font-display:swap;
  src:url("fonts/open-sans-italic-latin.woff2") format("woff2")}

:root{
  --fond:#ffffff;
  --fond-2:#f5f5f4;
  --fond-3:#ebebe9;
  --encre:#0a0a0b;
  --encre-2:#6b6d70;
  --encre-3:#7a7c80;
  --trait:#e6e6e4;
  --inverse:#ffffff;
  --verre-fond:rgba(255,255,255,.74);
  --verre-flou:blur(22px) saturate(1.6);
  --ombre:0 30px 70px -30px rgba(10,10,11,.28);
  --marge:clamp(18px,4.2vw,72px);
  --max:1440px;
  --font:"Archivo",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --voix:"Voix","Open Sans",Georgia,serif;
  --r:12px;
  --r-pill:999px;
  --expo:cubic-bezier(.16,1,.3,1);
  --lent:.9s var(--expo);
  --vif:.32s var(--expo);
}

@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--font);
  font-size:16px;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.035em;line-height:1;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0}
:focus-visible{outline:2px solid var(--encre);outline-offset:4px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;padding:10px 14px;background:var(--encre);color:var(--inverse);border-radius:var(--r-pill);z-index:100}
.skip:focus{top:12px}
::selection{background:var(--encre);color:var(--inverse)}

.voix{font-family:var(--voix);font-style:italic;font-weight:400;letter-spacing:0}

/* La grille et l'échelle */
.in{width:min(var(--max),100% - 2*var(--marge));margin-inline:auto}
section{padding-block:clamp(80px,12vw,168px)}
section + section{padding-top:0}
.sequence-bloc + section{padding-top:clamp(80px,12vw,168px)}
.eyebrow{display:block;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-2);margin-bottom:26px}
.titre{font-size:clamp(40px,6.4vw,96px);letter-spacing:-.045em}
.titre-2{font-size:clamp(30px,4.2vw,60px);max-width:22ch}
.titre-3{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.025em;line-height:1.1}
.lede{font-size:clamp(17px,1.45vw,21px);line-height:1.5;color:var(--encre-2);max-width:58ch;text-wrap:pretty;margin-top:22px}
.petit{font-size:13.5px;color:var(--encre-2);line-height:1.55}
@media (min-width:1000px){.entete-page .lede{margin-left:41.7%}}
.titre-ligne{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.titre-ligne .eyebrow{margin-bottom:0}

/* Les liens : un trait qui part de la gauche, une flèche qui avance. */
.lien{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;letter-spacing:-.01em;position:relative;padding-bottom:3px}
.lien::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:currentColor;transform:scaleX(.28);transform-origin:left;transition:transform var(--vif)}
.lien:hover::after{transform:scaleX(1)}
.lien .fl{width:15px;height:15px;transition:transform var(--vif)}
.lien:hover .fl{transform:translateX(4px)}
.lien-blanc{color:var(--inverse)}
.lien-texte{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* Les boutons : deux formes, une flèche qui avance. */
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:var(--r-pill);
  font-size:15px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:transform var(--vif),background var(--vif),color var(--vif),box-shadow var(--vif)}
.btn .fl{width:15px;height:15px;flex:none;transition:transform var(--vif)}
.btn:hover .fl{transform:translateX(4px)}
.btn-plein{background:var(--encre);color:var(--inverse)}
.btn-plein:hover{transform:translateY(-2px);box-shadow:var(--ombre)}
.btn-plein:active{transform:translateY(0)}
.btn-vide{background:var(--fond-2);color:var(--encre)}
.btn-vide:hover{background:var(--fond-3)}
.btn-court{height:42px;padding:0 18px;font-size:14px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;align-items:center}

/* La barre */
.tete{position:sticky;top:0;z-index:50;background:var(--verre-fond);-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);
  border-bottom:1px solid var(--trait);transition:transform .5s var(--expo)}
body.barre-cachee .tete{transform:translateY(-100%)}
.tete-in{width:min(var(--max),100% - 2*var(--marge));margin-inline:auto;height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo img{height:26px;width:auto}
.nav{display:flex;gap:30px;font-size:14.5px;font-weight:500}
.nav a{position:relative;opacity:.7;transition:opacity var(--vif)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--vif)}
.nav a:hover,.nav a[aria-current="page"]{opacity:1}
.nav a[aria-current="page"]::after,.nav a:hover::after{transform:scaleX(1)}
.nav .nav-mobile{display:none}
.tete-act{display:flex;align-items:center;gap:14px}
.burger{display:none;width:44px;height:44px;border-radius:var(--r-pill);background:var(--fond-2);align-items:center;justify-content:center}
.burger span{display:block;width:16px;height:2px;background:var(--encre);border-radius:2px;position:relative;transition:background var(--vif)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:2px;background:var(--encre);border-radius:2px;transition:transform var(--vif),top var(--vif)}
.burger span::before{top:-5px}.burger span::after{top:5px}
body.menu-ouvert .burger span{background:transparent}
body.menu-ouvert .burger span::before{top:0;transform:rotate(45deg)}
body.menu-ouvert .burger span::after{top:0;transform:rotate(-45deg)}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:inline-flex}
  .tete .btn-tete{display:none}
  body.menu-ouvert .nav{display:flex;position:fixed;inset:70px 0 0 0;background:var(--fond);flex-direction:column;padding:34px var(--marge);gap:20px;font-size:30px;letter-spacing:-.03em;z-index:49}
  body.menu-ouvert .nav a{opacity:1;animation:monte .7s var(--expo) both}
  body.menu-ouvert .nav a:nth-child(2){animation-delay:.05s}body.menu-ouvert .nav a:nth-child(3){animation-delay:.1s}body.menu-ouvert .nav a:nth-child(4){animation-delay:.15s}body.menu-ouvert .nav a:nth-child(5){animation-delay:.2s}body.menu-ouvert .nav a:nth-child(6){animation-delay:.25s}body.menu-ouvert .nav a:nth-child(7){animation-delay:.3s}
  body.menu-ouvert .nav .nav-mobile{display:block}
  body.menu-ouvert .nav a::after{display:none}
  body.menu-ouvert{overflow:hidden}
}
@keyframes monte{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Le hero : des mots qui montent, un lede décalé, la bande qui court. */
.hero{padding-block:clamp(56px,9vw,128px) 0;overflow:hidden}
.hero .mark{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--encre-2);margin-bottom:30px;font-weight:500}
.hero h1{font-size:clamp(46px,8.4vw,136px);letter-spacing:-.05em;max-width:12ch;line-height:.94}
.mots .m{display:inline-block;animation:mot .9s var(--expo) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes mot{from{opacity:0;transform:translateY(.45em) rotate(.6deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mots .m{animation:none}}
/* La bannière photo du héros : pleine largeur, noir et blanc, elle glisse un
   peu au défilement et arrive par un lent zoom arrière. Enzo, 2026-09-18. */
.hero-photo{position:relative;margin-top:clamp(44px,6vw,88px);height:clamp(300px,54vh,720px);overflow:hidden;background:var(--fond-2)}
.hero-photo img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;transform:translateY(calc(var(--p,0) * .6px)) scale(1);animation:heroZoom 2.2s var(--expo) both}
@keyframes heroZoom{from{transform:scale(1.08);opacity:.6}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-photo img{animation:none}}
/* La page À propos, refaite le 2026-09-18 : une bande photo pleine largeur
   avec la voix du studio, un manifeste qui se révèle mot à mot au défilement,
   quatre principes en liste éditoriale, la maison en duo. */
.apropos-bande{position:relative;margin-top:clamp(40px,6vw,88px);height:clamp(320px,56vh,700px);overflow:hidden;display:flex;align-items:flex-end;color:var(--inverse)}
.apropos-bande-img{position:absolute;inset:-8% 0}
.apropos-bande-img img{width:100%;height:100%;object-fit:cover;transform:translateY(calc(var(--p,0) * .7px))}
.apropos-bande::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,11,.72) 0%,rgba(10,10,11,.18) 45%,rgba(10,10,11,0) 70%)}
.apropos-bande .in{position:relative;z-index:1;width:100%;padding-bottom:clamp(28px,4vw,64px)}
.apropos-voix{font-size:clamp(22px,2.6vw,40px);line-height:1.2;max-width:26ch;margin-left:auto}
.apropos-manifeste{padding-top:clamp(64px,9vw,140px)}
.manifeste{font-size:clamp(28px,4.2vw,64px);letter-spacing:-.035em;line-height:1.06;max-width:22ch;margin-top:20px;font-weight:500}
.manifeste .mw{display:inline-block;opacity:.16;transform:translateY(.12em);transition:opacity .7s var(--expo),transform .7s var(--expo)}
.manifeste .mw.on{opacity:1;transform:none}
.principes{margin-top:clamp(28px,4vw,48px);counter-reset:p}
.principes li{display:grid;grid-template-columns:72px 1fr 1.3fr;gap:24px;align-items:baseline;padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--trait);position:relative;transition:padding-left .6s var(--expo)}
.principes .num{font-size:12px;letter-spacing:.14em;color:var(--encre-2);transition:transform .6s var(--expo)}
.principes h2{font-size:clamp(26px,3.4vw,52px);letter-spacing:-.035em;line-height:1;transition:transform .6s var(--expo)}
.principes p{font-size:16px;line-height:1.55;color:var(--encre-2);max-width:52ch}
.principes li::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--encre);transition:width .9s var(--expo)}
.principes li:hover::before{width:100%}
.principes li:hover h2{transform:translateX(10px)}
.principes li:hover .num{transform:translateX(6px)}
.apropos-duo .prose .eyebrow{margin-bottom:18px}
.apropos-duo .prose .titre-2{margin-bottom:20px}
.apropos-duo .prose p{font-size:17px;line-height:1.6;color:var(--encre-2);max-width:48ch}
.apropos-duo .actions{margin-top:28px}
@media (max-width:900px){.principes li{grid-template-columns:48px 1fr;gap:12px 18px}.principes p{grid-column:2}.apropos-voix{margin-left:0}}
/* Services : la liste à gauche, une photo qui reste à l'écran à droite. */
.services-duo{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,5vw,88px);align-items:start}
.services-photo{position:sticky;top:96px}
.services-photo .cadre{border-radius:var(--r);overflow:hidden;background:var(--fond-2);aspect-ratio:4/5;position:relative}
.services-photo .cadre img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;transform:translateY(calc(var(--p,0) * 1px))}
@media (max-width:900px){.services-duo{grid-template-columns:1fr}.services-photo{position:static}}
/* Le journal, 2026-09-18 : une liste éditoriale d'articles, puis l'article en
   deux colonnes, la prose et ce dont elle parle. Même blanc, même encre. */
.journal-liste{margin-top:clamp(28px,4vw,48px)}
.art-ligne{display:grid;grid-template-columns:220px 1fr auto;gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(24px,3vw,40px) 0;border-top:1px solid var(--trait);position:relative}
.art-ligne::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--encre);transition:width .9s var(--expo)}
.art-ligne:hover::before{width:100%}
.art-visuel{display:block;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--casse);position:relative}
.art-visuel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--expo)}
.art-visuel.piece{display:flex;align-items:center;justify-content:center;padding:10%}
.art-visuel.piece img{object-fit:contain;height:100%}
.art-ligne:hover .art-visuel img{transform:scale(1.04)}
/* Les couches d'un article : une pièce en grand, une ou deux posées dessus. */
.art-visuel.compo{background:var(--casse)}
.art-visuel.compo .couche{position:absolute;display:block;transition:transform 1s var(--expo)}
.art-visuel.compo .couche img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 14px 24px rgba(10,10,11,.10))}
.art-visuel.compo .couche[style*="--k:0"]{width:60%;left:5%;top:8%;z-index:1;transform:translateY(calc(var(--p,0) * .5px))}
.art-visuel.compo .couche[style*="--k:1"]{width:40%;right:4%;bottom:6%;z-index:2;transform:translateY(calc(var(--p,0) * -.4px))}
.art-visuel.compo .couche[style*="--k:2"]{width:24%;right:8%;top:8%;z-index:2;transform:translateY(calc(var(--p,0) * .9px))}
.art-ligne:hover .art-visuel.compo .couche[style*="--k:0"]{transform:translateY(calc(var(--p,0) * .5px)) translateX(-2%)}
.art-ligne:hover .art-visuel.compo .couche[style*="--k:1"]{transform:translateY(calc(var(--p,0) * -.4px)) translate(3%,2%)}
.art-grand .art-visuel.compo .couche[style*="--k:0"]{width:44%;left:6%;top:6%}
.art-grand .art-visuel.compo .couche[style*="--k:1"]{width:30%;right:22%;bottom:6%}
.art-grand .art-visuel.compo .couche[style*="--k:2"]{width:20%;right:4%;top:10%}
@media (max-width:900px){.art-grand .art-visuel.compo .couche[style*="--k:0"]{width:60%;left:5%;top:8%}.art-grand .art-visuel.compo .couche[style*="--k:1"]{width:40%;right:4%;bottom:6%}.art-grand .art-visuel.compo .couche[style*="--k:2"]{width:24%;right:8%;top:8%}}
.art-txt .type{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);font-weight:500;margin-bottom:10px}
.art-txt h2{font-size:clamp(22px,2.6vw,38px);letter-spacing:-.03em;line-height:1.05;transition:transform .6s var(--expo)}
.art-ligne:hover .art-txt h2{transform:translateX(8px)}
.art-txt p{margin-top:10px;font-size:15px;color:var(--encre-2);line-height:1.5;max-width:64ch}
.art-ligne .lien{white-space:nowrap}
.article{padding-top:clamp(20px,3vw,40px)}
.art-tete{padding-block:clamp(24px,4vw,56px) clamp(28px,4vw,48px)}
.art-tete .titre{max-width:16ch}
.art-tete .lede{margin-left:auto}
.art-grand .art-visuel{aspect-ratio:16/8;height:clamp(300px,50vh,620px)}
.art-grand .art-visuel.photo img{position:absolute;inset:-8% 0;height:116%;transform:translateY(calc(var(--p,0) * .7px))}
.art-corps{display:grid;grid-template-columns:7fr 4fr;gap:clamp(32px,6vw,110px);margin-top:clamp(40px,6vw,88px);align-items:start}
.art-prose{max-width:66ch}
.art-prose h2{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.03em;margin:44px 0 14px}
.art-prose h2:first-child{margin-top:0}
.art-prose p{font-size:17.5px;line-height:1.65;margin-bottom:16px}
.art-aside{position:sticky;top:96px;display:grid;gap:34px}
.art-liens{display:grid;gap:14px;margin-top:14px}
.art-liens .lien{font-size:16px}
.art-appel{padding:26px;border-radius:var(--r);background:var(--casse)}
.art-appel p{font-size:15px;color:var(--encre-2);line-height:1.5;margin:10px 0 18px}
@media (max-width:900px){.art-ligne{grid-template-columns:1fr;gap:14px}.art-ligne .lien{justify-self:start}.art-corps{grid-template-columns:1fr}.art-aside{position:static}.art-grand .art-visuel{height:auto;aspect-ratio:4/3}}
.hero-bas{display:grid;grid-template-columns:5fr 7fr;gap:32px;align-items:end;margin-top:clamp(28px,4vw,56px)}
.hero-bas .lede{grid-column:2;margin-top:0;animation:monte .9s var(--expo) .5s both}
.hero-bas .actions{grid-column:2;margin-top:28px;animation:monte .9s var(--expo) .6s both}
@media (max-width:860px){.hero-bas{grid-template-columns:1fr}.hero-bas .lede,.hero-bas .actions{grid-column:1}}
.bande{margin-top:clamp(56px,8vw,110px);margin-bottom:clamp(56px,8vw,110px);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);padding:18px 0;overflow:hidden;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.bande-in{display:inline-flex;animation:defile 70s linear infinite}
.bande:hover .bande-in{animation-play-state:paused}
.bande span{font-size:clamp(14px,1.3vw,18px);font-weight:500;letter-spacing:-.01em;padding:0 22px;color:var(--encre)}
.bande span::after{content:"·";margin-left:44px;color:var(--encre-3)}
@keyframes defile{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bande-in{animation:none}}

/* Les familles : une liste éditoriale, le nom en très grand, un aperçu qui suit. */
.familles{margin-top:28px}
.famille{display:grid;grid-template-columns:64px 1fr auto;gap:24px;align-items:center;padding:clamp(20px,2.6vw,34px) 0;border-top:1px solid var(--trait);position:relative;transition:padding-left var(--vif)}
.famille:last-child{border-bottom:1px solid var(--trait)}
.famille:hover{padding-left:12px}
.famille .num{font-size:13px;color:var(--encre-2);letter-spacing:.06em;margin:0}
.famille h3{font-size:clamp(30px,5vw,72px);letter-spacing:-.04em;font-weight:500}
.famille .ligne{display:block;font-size:14.5px;color:var(--encre-2);margin-top:8px;font-weight:400;letter-spacing:0}
.famille .fl{width:28px;height:28px;color:var(--encre);transition:transform var(--vif),opacity var(--vif);opacity:.4}
.famille:hover .fl{transform:translateX(8px);opacity:1}
.famille .apercu{position:absolute;right:12%;top:50%;transform:translateY(-50%);display:flex;gap:6px;pointer-events:none;opacity:0;transition:opacity var(--vif)}
.famille .apercu span{width:110px;background:var(--fond);border-radius:10px;padding:8px;transform:translateY(16px) rotate(2deg);transition:transform .6s var(--expo);transition-delay:calc(var(--i)*40ms);box-shadow:var(--ombre)}
.famille:hover .apercu{opacity:1}
.famille:hover .apercu span{transform:translateY(0) rotate(calc(var(--i)*2deg - 2deg))}
@media (max-width:900px){.famille .apercu{display:none}.famille{grid-template-columns:44px 1fr auto}}

/* Trois temps : de grands numéros, une révélation en escalier. */
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);margin-top:clamp(40px,5vw,72px)}
.trois li{padding-top:0}
.num{display:block;font-size:13px;letter-spacing:.1em;color:var(--encre-2);margin-bottom:22px}
.trois h3{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.025em;line-height:1.1;margin-bottom:14px}
.trois p{font-size:15.5px;color:var(--encre-2);line-height:1.55;max-width:34ch}
@media (max-width:760px){.trois{grid-template-columns:1fr;gap:28px}}

/* Les clients : deux grands blocs, la photo respire au défilement et au survol. */
.clients{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(40px,5vw,72px)}
.client{position:relative;border-radius:var(--r);overflow:hidden;background:var(--fond-2);aspect-ratio:4/5;color:var(--inverse);display:flex;align-items:flex-end;isolation:isolate}
.client-img{position:absolute;inset:-8% 0;transform:translateY(calc(var(--p,0) * 1px))}
.client-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--expo)}
.client:hover .client-img img{transform:scale(1.04)}
.client::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,11,.74) 0%,rgba(10,10,11,.12) 46%,rgba(10,10,11,0) 68%);z-index:0}
.client .txt{position:relative;padding:clamp(24px,3vw,44px);z-index:1;transform:translateY(12px);transition:transform .7s var(--expo)}
.client:hover .txt{transform:translateY(0)}
.client .txt .eyebrow{color:rgba(255,255,255,.72);margin-bottom:14px}
.client h3{font-size:clamp(22px,2.3vw,32px);margin-bottom:18px;letter-spacing:-.03em;line-height:1.08}
.client .lien{opacity:0;transform:translateY(6px);transition:opacity var(--vif),transform var(--vif)}
.client:hover .lien,.client:focus-visible .lien{opacity:1;transform:none}
.client.clair{color:var(--encre);background:var(--fond-2)}
.client.clair::after{display:none}
.client.clair .client-img{inset:6% 6% 30%}
.client.clair .client-img img{object-fit:contain}
.client.clair .txt .eyebrow{color:var(--encre-2)}
@media (max-width:760px){.clients{grid-template-columns:1fr}.client{aspect-ratio:4/4.4}.client .lien{opacity:1;transform:none}.client .txt{transform:none}}
@media (hover:none){.client .lien{opacity:1;transform:none}.client .txt{transform:none}}

/* La démonstration : la pièce à droite, les commandes à gauche. */
.demo{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,80px);align-items:center;background:var(--fond-2);border-radius:var(--r);padding:clamp(24px,4vw,64px)}
.demo-ctrl{display:grid;gap:18px;margin-top:30px}
.demo-scene{aspect-ratio:1;background:var(--fond);border-radius:var(--r);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.demo-scene svg{width:74%;height:auto;transition:transform .8s var(--expo)}
.demo-scene:hover svg{transform:scale(1.02)}
.pilules{display:flex;flex-wrap:wrap;gap:8px}
.pilules button{height:40px;padding:0 16px;border-radius:var(--r-pill);background:var(--fond);font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px;transition:background var(--vif),color var(--vif),transform var(--vif)}
.pilules button:hover{transform:translateY(-1px)}
.pilules button[aria-pressed="true"]{background:var(--encre);color:var(--inverse)}
.pilules button i{width:12px;height:12px;border-radius:50%;border:1px solid var(--trait);display:inline-block}
@media (max-width:900px){.demo{grid-template-columns:1fr}.demo-scene{order:-1}}

/* Les raisons : une liste qui s'indente au survol. */
.raisons{margin-top:clamp(36px,5vw,64px)}
.raisons li{display:grid;grid-template-columns:1fr 1.4fr;gap:24px;padding:22px 0;transition:padding-left var(--vif)}
.raisons li{position:relative}
.raisons li::before{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--encre);transition:width .9s var(--expo)}
.raisons li:hover::before{width:100%}
.raisons li:hover h3{transform:translateX(12px)}
.raisons h3{transition:transform .6s var(--expo)}
.raisons h3{font-size:clamp(20px,2.2vw,30px);letter-spacing:-.025em}
.raisons p{font-size:15.5px;color:var(--encre-2);line-height:1.55;max-width:52ch}
@media (max-width:700px){.raisons li{grid-template-columns:1fr;gap:10px}}

/* Le catalogue : tuiles, le dessin bouge au survol. */
.filtres-barre{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin:8px 0 36px;position:sticky;top:70px;z-index:5;background:var(--verre-fond);-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);padding:14px 0}
.filtres{display:flex;flex-wrap:wrap;gap:8px}
.filtres button{height:40px;padding:0 16px;border-radius:var(--r-pill);background:var(--fond-2);font-size:14px;font-weight:500;transition:background var(--vif),color var(--vif)}
.filtres button:hover{background:var(--fond-3)}
.filtres button[aria-pressed="true"]{background:var(--encre);color:var(--inverse)}
.compte{font-size:13px;color:var(--encre-2);letter-spacing:.04em}
.grille{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
/* Le catalogue casse la grille : une tuile sur sept s'étire sur deux colonnes,
   au premier rang puis au troisième, le rythme est 2-1-1 puis 1-1-2. */
.tuile.large{grid-column:span 2}
.tuile.large .dessin{aspect-ratio:1.66}
@media (max-width:720px){.tuile.large{grid-column:span 2}.tuile.large .dessin{aspect-ratio:1.5}}
.tuile{background:var(--fond-2);border-radius:var(--r);padding:22px 22px 20px;display:flex;flex-direction:column;gap:16px;text-align:left;position:relative;overflow:hidden;
  transition:background var(--vif);animation:monte .8s var(--expo) both;animation-delay:calc(var(--i,0) * 35ms)}
.tuile:hover{background:var(--fond-3)}
.tuile .dessin{aspect-ratio:5/6;display:flex;align-items:center;justify-content:center}
.tuile .dessin svg{width:76%;height:auto;transition:transform .9s var(--expo)}
.tuile:hover .dessin svg{transform:translateY(-6px) rotate(-1.5deg) scale(1.04)}
.tuile .dessin.photo{background:var(--fond);border-radius:8px;overflow:hidden}
.tuile .dessin.photo img{width:100%;height:100%;object-fit:contain;transition:transform .9s var(--expo)}
.tuile:hover .dessin.photo img{transform:scale(1.05)}
.tuile .nom{font-size:16.5px;font-weight:600;letter-spacing:-.015em;line-height:1.2;display:flex;justify-content:space-between;align-items:center;gap:8px}
.tuile .nom .fl{width:16px;height:16px;flex:none;opacity:0;transform:translateX(-6px);transition:opacity var(--vif),transform var(--vif)}
.tuile:hover .nom .fl{opacity:1;transform:none}
.tuile .cat{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-2);font-weight:500;margin-top:4px}
.tuile .badge{position:absolute;top:16px;right:16px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;padding:5px 9px;border-radius:var(--r-pill);background:var(--fond);color:var(--encre-2)}
@media (max-width:1100px){.grille{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.grille{grid-template-columns:repeat(2,1fr);gap:10px}.tuile{padding:16px 16px 14px}.filtres-barre{position:static}}
.vide{padding:40px 0;color:var(--encre-2)}
.absent{margin-top:clamp(56px,8vw,110px);display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;padding-top:40px;border-top:1px solid var(--encre)}
@media (max-width:760px){.absent{grid-template-columns:1fr}}

/* La fiche, panneau de verre. */
.voile{position:fixed;inset:0;background:rgba(10,10,11,.36);opacity:0;pointer-events:none;transition:opacity var(--vif);z-index:80}
.voile.on{opacity:1;pointer-events:auto}
.panneau{position:fixed;top:0;right:0;bottom:0;width:min(600px,100vw);background:var(--fond);z-index:90;transform:translateX(104%);
  transition:transform .7s var(--expo);overflow-y:auto;overscroll-behavior:contain;box-shadow:var(--ombre)}
.panneau.on{transform:none}
.panneau-in{padding:26px clamp(22px,4vw,48px) 48px;display:flex;flex-direction:column;gap:26px;min-height:100%}
.panneau-tete{display:flex;justify-content:space-between;align-items:center}
.panneau .fermer,.panneau .nav-fiche button{width:44px;height:44px;border-radius:var(--r-pill);background:var(--fond-2);display:inline-flex;align-items:center;justify-content:center;transition:background var(--vif)}
.panneau .fermer:hover,.panneau .nav-fiche button:hover{background:var(--fond-3)}
.panneau .nav-fiche{display:flex;gap:8px}
.panneau .dessin{background:var(--fond-2);border-radius:var(--r);aspect-ratio:5/4;display:flex;align-items:center;justify-content:center;overflow:hidden}
.panneau .dessin svg{width:50%;height:auto;animation:monte .8s var(--expo) both}
.panneau .dessin.photo{background:var(--fond)}
.panneau .dessin.photo img{width:100%;height:100%;object-fit:contain;animation:monte .8s var(--expo) both}
.panneau h2{font-size:clamp(30px,3.2vw,42px)}
.panneau dl{display:grid;grid-template-columns:1fr;gap:18px}
.panneau dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);font-weight:500;margin-bottom:6px}
.panneau dd{margin:0;font-size:15px;line-height:1.55}
.panneau .options{display:flex;flex-wrap:wrap;gap:6px}
.panneau .options span{font-size:13px;padding:6px 11px;border-radius:var(--r-pill);background:var(--fond-2)}
.panneau .proches{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.panneau .proches button{flex:none;width:96px;background:var(--fond-2);border-radius:10px;padding:10px;text-align:left;font-size:12px;font-weight:500;line-height:1.2;transition:background var(--vif)}
.panneau .proches button:hover{background:var(--fond-3)}
.panneau .proches svg,.panneau .proches img{width:100%;height:auto;margin-bottom:6px}
.panneau .actions{margin-top:auto;padding-top:8px}
@media (prefers-reduced-motion:reduce){.panneau{transition:none}}

/* Les services : une liste numérotée, rien de plus. */
.services li{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:clamp(24px,3vw,40px) 0;border-top:1px solid var(--trait);transition:padding-left var(--vif)}
.services li:hover{padding-left:12px}
.services .num{margin:0;font-size:clamp(28px,3.6vw,52px);font-weight:300;letter-spacing:-.04em;color:var(--encre);line-height:1}
.services h3{font-size:clamp(22px,2.6vw,36px);letter-spacing:-.03em;margin-bottom:10px}
.services p{font-size:15.5px;color:var(--encre-2);line-height:1.55;max-width:60ch}
@media (max-width:640px){.services li{grid-template-columns:1fr;gap:8px}}

/* La méthode : le titre reste, les étapes défilent, une ligne avance. */
.methode{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,110px);align-items:start}
.methode-fixe{position:sticky;top:110px}
.etapes{position:relative;padding-left:44px}
.etapes::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:1px;background:var(--trait)}
.etapes::after{content:"";position:absolute;left:8px;top:8px;height:calc((100% - 16px) * var(--avancee,0));width:1px;background:var(--encre);transition:height .3s linear}
.etapes li{position:relative;padding:0 0 clamp(40px,6vw,80px)}
.etapes li::before{content:"";position:absolute;left:-40px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--fond);border:1px solid var(--encre);transition:background var(--vif)}
.etapes li.passe::before{background:var(--encre)}
.etapes .num{margin-bottom:12px}
.etapes h3{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.03em;margin-bottom:10px}
.etapes p{font-size:15.5px;color:var(--encre-2);line-height:1.55;max-width:44ch}
@media (max-width:860px){.methode{grid-template-columns:1fr}.methode-fixe{position:static}}

/* Deux colonnes, texte et image avec parallaxe douce. */
.duo{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,88px);align-items:center}
.duo .cadre,.client-hero .cadre{border-radius:var(--r);overflow:hidden;background:var(--fond-2);aspect-ratio:4/5;position:relative}
.duo .cadre img,.client-hero .cadre img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;transform:translateY(calc(var(--p,0) * 1px))}
.cadre.contenu{background:var(--fond);border:1px solid var(--trait)}
.cadre.contenu img{object-fit:contain;inset:0;height:100%;width:100%;transform:none}
@media (max-width:860px){.duo{grid-template-columns:1fr}.duo .cadre{aspect-ratio:4/3}}
.liste-check{display:grid;margin-top:30px}
.liste-check li{display:grid;grid-template-columns:1fr 1.2fr;gap:16px;padding:16px 0;border-top:1px solid var(--trait);font-size:15px}
.liste-check strong{font-weight:600;letter-spacing:-.01em}
.liste-check span{color:var(--encre-2)}
.liste-check + .petit{margin-top:18px}
@media (max-width:520px){.liste-check li{grid-template-columns:1fr;gap:4px}}

/* Le bloc sombre, une fois par page. */
.sombre{background:var(--encre);color:var(--inverse);border-radius:var(--r);padding:clamp(40px,6vw,96px) clamp(24px,5vw,88px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:end;overflow:hidden;position:relative}
.sombre .eyebrow{color:rgba(255,255,255,.6)}
.sombre .lede{color:rgba(255,255,255,.76)}
.sombre .actions{margin-top:0;justify-self:end}
.sombre .btn-plein{background:var(--inverse);color:var(--encre)}
.sombre .btn-vide{background:rgba(255,255,255,.12);color:var(--inverse)}
.sombre .btn-vide:hover{background:rgba(255,255,255,.2)}
.sombre.clair{background:var(--fond-2);color:var(--encre)}
.sombre.clair .eyebrow{color:var(--encre-2)}
.sombre.clair .lede{color:var(--encre-2)}
.sombre.clair .btn-plein{background:var(--encre);color:var(--inverse)}
@media (max-width:860px){.sombre{grid-template-columns:1fr}.sombre .actions{justify-self:start}}

/* Les projets : courts sur l'accueil, longs sur leur page. */
.projets{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.projets-liste{margin-top:28px}
.projet-ligne{display:grid;grid-template-columns:56px 280px 1fr auto;gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(22px,2.6vw,34px) 0;border-top:1px solid var(--trait);position:relative}
.projet-ligne::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--encre);transition:width .9s var(--expo)}
.projet-ligne:hover::before{width:100%}
.projet-ligne .num{font-size:12px;letter-spacing:.14em;color:var(--encre-2)}
.projet-ligne .dessins{height:96px;justify-content:flex-start;gap:8px;overflow:hidden}
.projet-ligne .dessins span{height:100%;flex:none}
.projet-ligne .dessins img{height:100%;width:auto;max-width:84px;object-fit:contain;display:block}
.projet-ligne .dessins span{transition:transform .8s var(--expo)}
.projet-ligne:hover .dessins span{transform:translateY(-4px) rotate(calc(var(--i)*2deg - 2deg))}
.projet-ligne .type{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);font-weight:500;display:block;margin-bottom:8px}
.projet-ligne h3{font-size:clamp(22px,2.4vw,34px);letter-spacing:-.03em;line-height:1.05;transition:transform .6s var(--expo)}
.projet-ligne:hover h3{transform:translateX(8px)}
.projet-ligne .petit{margin-top:8px;color:var(--encre-2)}
.projet-ligne .lien{white-space:nowrap}
@media (max-width:900px){.projet-ligne{grid-template-columns:1fr;gap:14px}.projet-ligne .num{display:none}.projet-ligne .dessins{height:72px}}
.projet{background:var(--fond-2);border-radius:var(--r);padding:28px 28px 30px;display:flex;flex-direction:column;gap:18px;transition:background var(--vif)}
.projet:hover{background:var(--fond-3)}
.projet .type,.projet-long .type{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);font-weight:500}
.dessins{display:flex;gap:6px;height:130px;align-items:center;justify-content:center}
.dessins span{height:100%;display:flex;transition:transform .8s var(--expo)}
.dessins svg{height:100%;width:auto}
.projet:hover .dessins span{transform:translateY(-6px) rotate(calc(var(--i)*3deg - 3deg))}
.projet h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.03em}
.projet .lien{margin-top:auto}
.projets-longs{display:grid;gap:clamp(40px,6vw,96px)}
.projet-long{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,88px);align-items:center;scroll-margin-top:100px}
.projet-long:nth-child(even) .projet-visuel{order:2}
.projet-visuel{background:var(--fond-2);border-radius:var(--r);aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:14%}
/* La composition d'un projet type : trois couches de pièces détourées, la
   première en grand, les deux autres posées en décalé ; au défilement elles
   glissent à des vitesses différentes, au survol elles s'écartent. */
.projet-visuel.compo{display:block;padding:0;position:relative;overflow:hidden;border:1px solid var(--trait);background:var(--casse)}
.projet-visuel.compo .num{position:absolute;left:24px;top:22px;font-size:12px;letter-spacing:.14em;color:var(--encre-2);z-index:3}
.projet-visuel.compo .legende{position:absolute;left:24px;bottom:22px;font-size:12.5px;color:var(--encre-2);z-index:3;max-width:60%}
.projet-visuel.compo .couche{position:absolute;display:block;transition:transform 1.1s var(--expo)}
.projet-visuel.compo .couche img{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 30px rgba(10,10,11,.10))}
.projet-visuel.compo .couche[style*="--k:0"]{width:64%;left:8%;top:14%;transform:translateY(calc(var(--p,0) * .6px));z-index:1}
.projet-visuel.compo .couche[style*="--k:1"]{width:40%;right:6%;bottom:8%;transform:translateY(calc(var(--p,0) * -.5px));z-index:2}
.projet-visuel.compo .couche[style*="--k:2"]{width:26%;right:10%;top:9%;transform:translateY(calc(var(--p,0) * 1px));z-index:2}
.projet-long:hover .compo .couche[style*="--k:0"]{transform:translateY(calc(var(--p,0) * .6px)) translateX(-2%) scale(1.03)}
.projet-long:hover .compo .couche[style*="--k:1"]{transform:translateY(calc(var(--p,0) * -.5px)) translate(3%,3%)}
.projet-long:hover .compo .couche[style*="--k:2"]{transform:translateY(calc(var(--p,0) * 1px)) translate(4%,-3%)}
.projet-visuel .dessins{height:100%;width:100%;gap:4%}
.projet-corps h2{margin:16px 0 26px}
.projet-corps dl{display:grid;gap:16px;margin-bottom:30px}
.projet-corps dt{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);font-weight:500;margin-bottom:4px}
.projet-corps dd{margin:0;font-size:15.5px;line-height:1.55;max-width:56ch}
@media (max-width:960px){.projets{grid-template-columns:1fr}.projet-long{grid-template-columns:1fr}.projet-long:nth-child(even) .projet-visuel{order:0}}

/* Le brief : trois écrans, des champs soulignés. */
.brief-bloc{padding-top:0}
.form{max-width:920px}
.brief-contexte{font-size:15px;color:var(--encre);padding:14px 18px;border:1px solid var(--trait);border-radius:var(--r);margin-bottom:28px;background:var(--casse)}
.brief-contexte::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--encre);margin-right:12px;vertical-align:middle}
body.page-demarrer .tete .btn,body.page-demarrer .pied-haut{display:none}
.jalons{display:flex;gap:28px;margin-bottom:clamp(32px,4vw,56px);font-size:14px;color:var(--encre-2);font-weight:500}
.jalons li{display:flex;align-items:center;gap:10px;transition:color var(--vif)}
.jalons li span{width:28px;height:28px;border-radius:50%;background:var(--fond-2);display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;transition:background var(--vif),color var(--vif)}
.jalons li[aria-current="step"]{color:var(--encre)}
.jalons li[aria-current="step"] span,.jalons li.fait span{background:var(--encre);color:var(--inverse)}
.jalons li.fait{color:var(--encre-2)}
.ecran{animation:monte .7s var(--expo) both}
.ecran legend{margin-bottom:30px;float:left;width:100%}
.grille-champs{display:grid;grid-template-columns:1fr 1fr;gap:28px 36px;clear:both}
.grille-champs .large{grid-column:1/-1}
.champ{display:flex;flex-direction:column;gap:8px}
.champ label,.champ .label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);font-weight:500}
.champ input,.champ select,.champ textarea{font:inherit;color:inherit;background:transparent;border:0;border-bottom:1.5px solid var(--trait);padding:12px 0;border-radius:0;
  transition:border-color var(--vif);width:100%;font-size:17px}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--encre)}
.champ textarea{min-height:130px;resize:vertical}
.champ .aide{font-size:13px;color:var(--encre-2)}
.choix{display:flex;flex-wrap:wrap;gap:8px}
.choix label{position:relative}
.choix input{position:absolute;opacity:0;width:1px;height:1px}
.choix span{display:inline-flex;height:44px;align-items:center;padding:0 18px;border-radius:var(--r-pill);background:var(--fond-2);font-size:15px;font-weight:500;cursor:pointer;transition:background var(--vif),color var(--vif),transform var(--vif)}
.choix span:hover{transform:translateY(-1px)}
.choix input:checked + span{background:var(--encre);color:var(--inverse)}
.choix input:focus-visible + span{outline:2px solid var(--encre);outline-offset:3px}
.depot{border-radius:var(--r);background:var(--fond-2);padding:26px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;cursor:pointer;transition:background var(--vif);clear:both}
.depot:hover{background:var(--fond-3)}
.depot.sur{outline:2px dashed var(--encre)}
.depot input{position:absolute;width:1px;height:1px;opacity:0}
.depot .liste{font-size:13.5px;color:var(--encre-2);width:100%}
.depot .liste span{display:inline-block;margin:6px 8px 0 0;padding:5px 10px;border-radius:var(--r-pill);background:var(--fond)}
.recap{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px 24px;font-size:14px}
.recap div{padding-top:10px;border-top:1px solid var(--trait)}
.recap dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);margin-bottom:4px;font-weight:500}
.recap dd{margin:0;font-weight:500}
.ecran-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:36px}
.etat{font-size:14px;color:var(--encre-2)}
.etat.err{color:#b3261e}
.ecran .petit{margin-top:22px}
.merci{display:none;background:var(--fond-2);border-radius:var(--r);padding:clamp(28px,4vw,48px);animation:monte .7s var(--expo) both}
.merci.on{display:block}
@media (max-width:700px){.grille-champs{grid-template-columns:1fr}.recap{grid-template-columns:1fr 1fr}.jalons{gap:16px}}

/* Les pages intérieures : un titre haut, le lede décalé. */
.entete-page{padding-block:clamp(56px,8vw,120px) clamp(28px,4vw,56px)}

/* Le texte long. */
.prose{max-width:62ch}
.prose p{margin-bottom:18px;line-height:1.65;font-size:17px}
.prose h2{font-size:clamp(24px,3vw,36px);margin:52px 0 16px}
.prose h2:first-child{margin-top:0}
.prose strong{font-weight:600}

/* Les pages client : un hero image, des packs, une liste de temps, des idées. */
.client-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end;padding-top:clamp(28px,4vw,56px)}
.client-hero .lede{margin-left:0}
@media (max-width:860px){.client-hero{grid-template-columns:1fr}.client-hero .cadre{aspect-ratio:4/3}}
.packs-liste{margin-top:clamp(36px,5vw,64px)}
.pack-ligne{display:grid;grid-template-columns:1.2fr 1fr auto;gap:clamp(24px,4vw,64px);padding:clamp(30px,4vw,52px) 0;border-top:1px solid var(--trait);align-items:start;position:relative}
.pack-ligne::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--encre);transition:width .9s var(--expo)}
.pack-ligne:hover::before{width:100%}
.pack-tete .num{display:block;font-size:12px;letter-spacing:.14em;color:var(--encre-2);margin-bottom:14px}
.pack-tete .type{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);font-weight:500;margin-bottom:10px}
.pack-tete h3{font-size:clamp(28px,3.4vw,52px);letter-spacing:-.035em;line-height:1;transition:transform .6s var(--expo)}
.pack-ligne:hover .pack-tete h3{transform:translateX(10px)}
.pack-tete .pour{margin-top:16px;font-size:15.5px;color:var(--encre-2);line-height:1.5;max-width:40ch}
.pack-contenu{display:grid;gap:14px;padding-top:6px}
.pack-contenu li{display:grid;gap:3px;font-size:15.5px}
.pack-contenu strong{font-weight:500}
.pack-contenu span{color:var(--encre-2);font-size:14px;line-height:1.45}
.pack-action{display:grid;gap:12px;justify-items:start;padding-top:6px}
.pack-action .devis{font-size:13px;color:var(--encre-2);max-width:24ch;line-height:1.45}
@media (max-width:900px){.pack-ligne{grid-template-columns:1fr;gap:20px}}
.pack{background:var(--fond-2);border-radius:var(--r);padding:30px 28px;display:flex;flex-direction:column;gap:20px;transition:background var(--vif)}
.pack:hover{background:var(--fond-3)}
.pack .type{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);font-weight:500}
.pack h3{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.03em}
.pack .pour{font-size:15px;color:var(--encre-2);line-height:1.5}
.pack ul{display:grid;gap:8px;font-size:15px}
.pack li{display:flex;gap:12px;align-items:flex-start}
.pack li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--encre);margin-top:9px}
.pack li small{color:var(--encre-2);display:block;font-size:13px}
.pack .devis{margin-top:auto;font-size:13px;color:var(--encre-2);padding-top:14px}
.pack .btn{align-self:flex-start}
@media (max-width:960px){.packs{grid-template-columns:1fr}}
.temps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(36px,5vw,64px)}
.temps li{padding-top:18px;border-top:1px solid var(--encre)}
.temps .num{margin-bottom:14px}
.temps h3{font-size:clamp(19px,1.8vw,24px);letter-spacing:-.02em;line-height:1.15;margin-bottom:10px}
.temps p{font-size:14.5px;color:var(--encre-2);line-height:1.5}
@media (max-width:960px){.temps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.temps{grid-template-columns:1fr}}
.idees{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:clamp(36px,5vw,64px)}
.idee{border-radius:var(--r);padding:28px;background:var(--fond-2);display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:center;transition:background var(--vif)}
.idee:hover{background:var(--fond-3)}
.idee.sans-visuel{grid-template-columns:1fr}
.idee .dessin.photo img{width:100%;height:auto;transition:transform .8s var(--expo)}
.idee:hover .dessin.photo img{transform:translateY(-4px) rotate(-2deg)}
.projet .dessins img,.projet-visuel .dessins img{height:100%;width:auto;max-width:100%;object-fit:contain}
.projet-visuel .dessins span{flex:1;height:100%;justify-content:center}
.projet-visuel .dessins img{width:100%;height:100%}
.idee .dessin svg{width:100%;height:auto;transition:transform .8s var(--expo)}
.idee:hover .dessin svg{transform:translateY(-4px) rotate(-2deg)}
.idee h3{font-size:clamp(19px,1.8vw,24px);letter-spacing:-.02em;margin-bottom:8px;line-height:1.15}
.idee p{font-size:14.5px;color:var(--encre-2);line-height:1.5}
@media (max-width:760px){.idees{grid-template-columns:1fr}}

/* Le pied : l'appel, puis les colonnes. */
.pied{padding:clamp(56px,8vw,110px) 0 40px;margin-top:clamp(40px,6vw,80px)}
.pied-haut{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;padding-bottom:clamp(40px,6vw,80px);border-bottom:1px solid var(--encre);margin-bottom:clamp(40px,5vw,64px)}
.pied-haut .actions{margin-top:0}
.pied-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;align-items:start}
.pied .logo img{height:22px;margin-bottom:16px}
.pied .ligne{font-size:14px;color:var(--encre-2);line-height:1.6}
.pied h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);font-weight:500;margin-bottom:14px}
.pied ul{display:grid;gap:9px;font-size:14.5px;font-weight:500}
.pied ul a{transition:opacity var(--vif)}
.pied ul a:hover{opacity:.6}
/* La ligne du bas : la marque et l'année, les deux pages légales, le crédit.
   Un filet fin au-dessus, trois blocs qui se partagent la largeur. Enzo, 2026-09-18. */
.pied .bas{margin-top:56px;padding-top:22px;border-top:1px solid var(--trait);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px 24px;font-size:12.5px;color:var(--encre-2)}
.pied .bas-marque{display:inline-flex;align-items:baseline;gap:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:11.5px;color:var(--encre)}
.pied .bas-marque em{font-style:normal;font-family:'Open Sans',sans-serif;font-style:italic;font-weight:400;letter-spacing:0;text-transform:none;font-size:13px;color:var(--encre-2)}
.pied .bas-liens{display:inline-flex;gap:22px;justify-self:center}
.pied .bas-liens a,.pied .bas-credit a{position:relative;transition:color var(--vif)}
.pied .bas-liens a::after,.pied .bas-credit a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--expo)}
.pied .bas-liens a:hover::after,.pied .bas-credit a:hover::after{transform:scaleX(1)}
.pied .bas-credit{justify-self:end;color:var(--encre-3)}
.pied .bas-credit a{color:var(--encre);font-weight:500}
@media (max-width:720px){.pied .bas{grid-template-columns:1fr;gap:14px}.pied .bas-liens,.pied .bas-credit{justify-self:start}}
@media (max-width:760px){.pied-in{grid-template-columns:1fr 1fr}.pied-in > :first-child{grid-column:1/-1}}

/* L'appel qui suit sur téléphone. */
.cta-mobile{display:none}
@media (max-width:900px){
  .cta-mobile{display:inline-flex;white-space:nowrap;position:fixed;left:50%;bottom:16px;transform:translate(-50%,120px);z-index:40;height:50px;padding:0 22px;border-radius:var(--r-pill);background:var(--encre);color:var(--inverse);font-size:15px;font-weight:500;align-items:center;gap:10px;box-shadow:var(--ombre);transition:transform .6s var(--expo)}
  .cta-mobile .fl{width:15px;height:15px}
  body.cta-visible .cta-mobile{transform:translate(-50%,0)}
  body.page-demarrer .cta-mobile,body.page-arche .cta-mobile{display:none}
}

/* Le mouvement : tout est visible au repos, le décalage n'existe que sous le
   pli, posé par le script, jamais par le HTML. L'escalier vient de --i. */
.reveal{transition:opacity var(--lent),transform var(--lent);transition-delay:calc(var(--i,0) * 90ms)}
.reveal.pre{opacity:0;transform:translateY(28px)}
@media (prefers-reduced-motion:reduce){.reveal{transition:none}.reveal.pre{opacity:1;transform:none}.tuile,.projet,.pack,.ecran,.merci{animation:none}}

/* Enzo, 2026-09-12 au soir : le fond en blanc partout, le blanc cassé réservé
   aux fiches produits, tuile et panneau. Les blocs qui vivaient sur un gris
   clair passent au blanc et se tiennent par un filet fin ; les pilules aussi. */
:root{--casse:#f5f5f4}
.pack,.projet,.idee,.demo,.client.clair,.sombre.clair,.depot,.merci,.projet-visuel{background:var(--fond);border:1px solid var(--trait)}
.pack:hover,.projet:hover,.idee:hover,.depot:hover{background:var(--fond);border-color:var(--encre-3)}
.demo-scene{border:1px solid var(--trait)}
.btn-vide,.filtres button,.pilules button,.choix span,.burger,.panneau .fermer,.panneau .nav-fiche button,.jalons li span{background:var(--fond);border:1px solid var(--trait)}
.btn-vide:hover,.filtres button:hover,.pilules button:hover,.choix span:hover,.panneau .fermer:hover,.panneau .nav-fiche button:hover{background:var(--fond);border-color:var(--encre)}
.filtres button[aria-pressed="true"],.pilules button[aria-pressed="true"],.choix input:checked + span,.jalons li[aria-current="step"] span,.jalons li.fait span{background:var(--encre);border-color:var(--encre);color:var(--inverse)}
.sombre .btn-vide{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.sombre .btn-vide:hover{background:rgba(255,255,255,.2)}
.depot .liste span{background:var(--fond);border:1px solid var(--trait)}
.tuile .badge{background:var(--fond);border:1px solid var(--trait)}
.panneau .options span,.panneau .proches button{background:var(--fond);border:1px solid var(--trait)}
.panneau .proches button:hover{border-color:var(--encre)}
/* Les fiches produits, en blanc cassé. */
.tuile{background:var(--casse)}
.tuile:hover{background:#efefed}
.tuile .dessin.photo{background:var(--casse)}
.panneau .dessin,.panneau .dessin.photo{background:var(--casse)}
.famille .apercu span{background:var(--casse)}

/* Enzo, 2026-09-12 au soir : les produits en avant, plus de mouvement.
   La vitrine sous le titre, la séquence épinglée des familles, les tuiles qui
   basculent à l'encre au survol, le relief de la fiche. */
.vitrine{margin-top:clamp(56px,7vw,96px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.vitrine-in{display:flex;gap:14px;width:max-content;animation:defile 90s linear infinite;padding:6px 0 18px}
.vitrine:hover .vitrine-in{animation-play-state:paused}
.vitrine-carte{width:clamp(200px,20vw,280px);flex:none;background:transparent;border-radius:0;padding:12px 20px 18px;display:flex;flex-direction:column;gap:12px;transition:transform .7s var(--expo),background var(--vif)}
.vitrine-carte:hover{transform:translateY(-8px)}
.vitrine-carte .dessin{aspect-ratio:5/6;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:8px}
.vitrine-carte .dessin svg{width:74%;height:auto;transition:transform .8s var(--expo)}
.vitrine-carte:hover .dessin svg{transform:scale(1.06) rotate(-2deg)}
.vitrine-carte .dessin.photo img{width:100%;height:100%;object-fit:contain;transition:transform .8s var(--expo)}
.vitrine-carte:hover .dessin.photo img{transform:scale(1.06)}
.vitrine-carte .nom{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
@media (prefers-reduced-motion:reduce){.vitrine-in{animation:none}}

.sequence-bloc{padding-block:0}
.sequence{height:400vh;position:relative}
.sequence-colle{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.sequence-in{display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,80px);align-items:center;width:min(var(--max),100% - 2*var(--marge))}
/* Les titres sont posés les uns sur les autres : le bloc prend la hauteur du
   plus haut, mesurée par site.js, pour que « Tout le catalogue » reste
   dessous. Défaut large en attendant la mesure. */
.sequence-titres{position:relative;min-height:340px;margin:8px 0 26px}
.sequence-titre{position:absolute;inset:0;opacity:0;transform:translateY(24px);transition:opacity .6s var(--expo),transform .8s var(--expo);pointer-events:none}
.sequence-titre.on{opacity:1;transform:none;pointer-events:auto}
.sequence-titre .num{margin-bottom:14px}
.sequence-titre h2{font-size:clamp(40px,6vw,92px);letter-spacing:-.045em}
.sequence-titre .lede{margin-top:18px}
.sequence-titre .lien{margin-top:22px}
.sequence-scene{position:relative;aspect-ratio:1;max-height:76vh;width:100%}
.sequence-groupe{position:absolute;inset:0;display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:14px;opacity:0;pointer-events:none}
.sequence-groupe.on{opacity:1;pointer-events:auto}
.sequence-groupe .piece{background:var(--casse);border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden;position:relative;opacity:0;transform:translateY(40px) scale(.96);transition:opacity .7s var(--expo),transform .9s var(--expo)}
.sequence-groupe.on .piece{opacity:1;transform:none;transition-delay:calc(var(--j) * 90ms)}
.sequence-groupe .piece:first-child{grid-row:1/3}
.sequence-groupe .piece .dessin{flex:1;display:flex;align-items:center;justify-content:center;padding:10%}
.sequence-groupe .piece .dessin svg{width:100%;height:auto;max-height:100%;transition:transform .8s var(--expo)}
.sequence-groupe .piece:hover .dessin svg{transform:scale(1.05) rotate(-1.5deg)}
.sequence-groupe .piece .dessin.photo{padding:6%}
.sequence-groupe .piece .dessin.photo img{width:100%;height:100%;object-fit:contain}
.sequence-groupe .piece .nom{position:absolute;left:18px;bottom:16px;font-size:14px;font-weight:600;letter-spacing:-.01em}
.sequence-jauge{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--trait)}
.sequence-jauge span{display:block;height:100%;background:var(--encre);transform:scaleX(0);transform-origin:left}
.familles-mobile{display:none}
@media (max-width:900px),(max-height:600px){
  .sequence{display:none}
  .familles-mobile{display:block;padding-block:clamp(56px,10vw,110px) 0}
}

.tuile .dessin{position:relative}
.tuile .dessin .encre{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .45s var(--expo)}
.tuile .dessin .encre svg{width:76%;height:auto;transform:translateY(-6px) rotate(-1.5deg) scale(1.04)}
.tuile:hover{background:var(--encre);color:var(--inverse)}
.tuile:hover .dessin > svg,.tuile:hover .dessin > picture{opacity:0}
.tuile:hover .dessin .encre{opacity:1}
.tuile:hover .cat{color:rgba(255,255,255,.62)}
.tuile:hover .badge{background:var(--encre);border-color:rgba(255,255,255,.3);color:var(--inverse)}
.tuile .dessin > svg,.tuile .dessin > picture{transition:opacity .35s var(--expo),transform .9s var(--expo)}
/* Les tuiles photo passent à l'encre au survol : la pièce blanche détourée
   ressort sur le noir, la pièce photographiée en noir prend la place de la
   claire. La signature du catalogue, revue du 2026-09-18. */
.tuile.photo-tuile:hover{background:var(--encre);color:var(--inverse)}
.tuile.photo-tuile:hover .dessin > img,.tuile.photo-tuile:hover .dessin > picture{opacity:1;transform:scale(1.04) translateY(-4px)}
.tuile.photo-tuile:hover .dessin .encre{opacity:1}
.tuile.photo-tuile:hover .dessin .encre ~ *,.tuile.photo-tuile .dessin:has(.encre) > img{transition:opacity .35s var(--expo)}
.tuile.photo-tuile:hover .dessin:has(.encre) > img{opacity:0}
.tuile.photo-tuile .dessin.photo{background:transparent}
/* Les rendus du studio : au survol, la tuile reste claire et la pièce passe à l'encre. */
.tuile.rendu-tuile:hover{background:var(--casse);color:var(--encre)}
.tuile.rendu-tuile:hover .cat{color:var(--encre-2)}
.tuile .dessin .encre picture{width:100%;height:100%}.tuile .dessin .encre img{width:100%;height:100%;object-fit:contain;transform:scale(1.05)}
.fiche-visuel.rendu .fiche-scene{background:var(--casse)}
.fiche-visuel.rendu .vue-encre{background:var(--casse)}
.fiche-visuel.rendu .vue-encre picture,.fiche-visuel.rendu .vue-clair picture{width:100%;height:100%}
.fiche-visuel.rendu .vue-encre img{width:100%;height:100%;object-fit:contain;animation:monte .9s var(--expo) both}

.panneau .dessin{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--expo);transform-style:preserve-3d}

/* La fiche produit, une vraie page : le visuel, le devis en premier, les
   garanties, le détail, le déroulé, la famille. Enzo, 2026-09-12 au soir. */
.fiche{padding-top:clamp(20px,3vw,40px)}
.fil{display:flex;gap:10px;font-size:13px;color:var(--encre-2);margin-bottom:clamp(24px,3vw,40px);flex-wrap:wrap}
.fil a:hover{color:var(--encre)}
.fil [aria-current]{color:var(--encre)}
.fiche-haut{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,5vw,88px);align-items:start}
.fiche-visuel{position:sticky;top:96px}
.fiche-scene{background:var(--casse);border-radius:var(--r);aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--expo);transform-style:preserve-3d}
.fiche-scene .vue-clair,.fiche-scene .vue-encre{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .5s var(--expo)}
.fiche-scene svg{width:62%;height:auto;animation:monte .9s var(--expo) both}
.fiche-scene picture,.fiche-scene img{width:100%;height:100%;object-fit:contain}
.fiche-visuel.photo .fiche-scene{background:var(--fond);border:1px solid var(--trait)}
.fiche-scene .vue-encre{opacity:0;background:var(--encre)}
.fiche-visuel.encre .vue-encre{opacity:1}
.fiche-visuel.photo .vue-encre{background:var(--fond)}
.fiche-visuel.encre .vue-clair{opacity:0}
.fiche-scene .vue-3d{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .6s var(--expo);cursor:grab}
.fiche-visuel.en-3d .vue-3d{opacity:1;pointer-events:auto}
.fiche-visuel.en-3d .vue-clair{opacity:0}
.fiche-visuel.en-3d .fiche-scene{transform:none}
.fiche-vues{display:flex;gap:8px;margin-top:14px}
.fiche-vues .vue{height:38px;padding:0 14px;border-radius:var(--r-pill);background:var(--fond);border:1px solid var(--trait);font-size:13.5px;font-weight:500;display:inline-flex;align-items:center;gap:8px;transition:border-color var(--vif),background var(--vif),color var(--vif)}
.fiche-vues .vue i{width:12px;height:12px;border-radius:50%;border:1px solid var(--trait)}
.fiche-vues .vue.on{background:var(--encre);border-color:var(--encre);color:var(--inverse)}
.fiche-note{font-size:13px;color:var(--encre-2);margin-top:12px}
.fiche-corps .titre-2{margin-top:2px;max-width:none}
.fiche-corps .lede{margin-top:16px}
/* Les choix de la fiche : une taille, une contenance, une forme, en pilules. */
.fiche-choix{display:grid;gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid var(--trait)}
.fiche-choix-groupe{display:grid;gap:10px;border:0;padding:0;margin:0}
.fiche-choix-groupe legend{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);margin-bottom:4px}
.fiche-choix .petit{font-size:13px;color:var(--encre-2);margin:0}
.fiche-prix{margin-top:30px;padding-top:22px;border-top:1px solid var(--encre);display:grid;gap:6px}
.fiche-prix strong{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--encre-2)}
.fiche-prix .donnee{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.03em;font-weight:500;line-height:1.1}
.fiche-prix span{font-size:14.5px;color:var(--encre-2);line-height:1.5;max-width:46ch}
.fiche-corps .actions{margin-top:26px}
.garanties{margin-top:34px;display:grid;gap:0}
.garanties li{display:grid;grid-template-columns:1fr 1.3fr;gap:14px;padding:14px 0;border-top:1px solid var(--trait);font-size:14.5px}
.garanties strong{font-weight:600;letter-spacing:-.01em}
.garanties span{color:var(--encre-2)}
.fiche-detail{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(56px,8vw,110px);padding-top:clamp(28px,4vw,48px);border-top:1px solid var(--encre)}
.fiche-bloc h2{margin-bottom:14px}
.fiche-bloc p{font-size:15px;color:var(--encre-2);line-height:1.6;margin-bottom:10px}
.puces{display:grid;gap:8px;font-size:15px;line-height:1.5}
.puces li{padding-left:16px;position:relative}
.puces li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--encre)}
.fiche-trois{margin-top:clamp(56px,8vw,110px)}
.grille-proches{margin-top:28px}
@media (max-width:1100px){.fiche-detail{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.fiche-haut{grid-template-columns:1fr}.fiche-visuel{position:static}.garanties li{grid-template-columns:1fr;gap:2px}
  /* Le studio 3D : la scène reste en haut de l'écran pendant qu'on règle en dessous. */
  .page-arche .arche-visuel{position:sticky;top:60px;z-index:5;background:var(--fond);padding-bottom:10px}
  .page-arche .arche-scene{aspect-ratio:auto;height:38vh}}
@media (max-width:640px){.fiche-detail{grid-template-columns:1fr}}

/* Arche, le studio 3D. Refait le 2026-09-18 sur le gabarit de la fiche
   produit : le fil d'Ariane, la scène à gauche qui reste sous la main, les
   réglages à droite comme un corps de fiche, séparés par des filets fins,
   des champs soulignés comme le brief, les choix en pilules comme partout.
   Rien qui ressemble à un panneau de réglages. */
.arche-config{padding-top:clamp(20px,3vw,40px)}
.arche-scene{background:var(--fond);border:1px solid var(--trait);transform:none;cursor:grab;aspect-ratio:5/4}
.arche-scene:active{cursor:grabbing}
.arche-webgl{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity 1.1s var(--expo)}.arche-webgl.pret{opacity:1}.arche-webgl canvas:focus-visible{outline:none}.arche-scene:has(.arche-webgl canvas:focus-visible){outline:2px solid var(--encre);outline-offset:4px}

.arche-scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;animation:none;filter:drop-shadow(0 22px 20px rgba(0,0,0,.22))}
.arche-statut{position:absolute;top:16px;left:18px;z-index:3;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);pointer-events:none}
.arche-marque{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;transform-origin:center;pointer-events:none}
.arche-marque span{width:100%;font-weight:700;font-size:clamp(9px,1.7vw,25px);line-height:1;text-align:center;letter-spacing:-.055em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:currentColor}
.arche-marque img{max-width:100%;max-height:100%;object-fit:contain}
.arche-visuel .fiche-vues .vue[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:var(--inverse)}
.arche-visuel .fiche-vues .vue:disabled{opacity:.4;pointer-events:none}
.arche-corps .lede{margin-top:16px}
.arche-commandes{margin-top:30px;display:grid}
.arche-groupe{display:grid;gap:18px;padding:22px 0;border-top:1px solid var(--trait)}
.arche-groupe:last-child{border-bottom:1px solid var(--trait)}
.arche-groupe legend{float:left;width:100%;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);margin-bottom:4px}
.arche-groupe>*{clear:both}
.choix-vues{display:flex;flex-wrap:wrap;gap:8px}
.choix-vues button{height:40px;padding:0 16px;border-radius:var(--r-pill);background:var(--fond);border:1px solid var(--trait);font-size:14px;font-weight:500;transition:background var(--vif),color var(--vif),border-color var(--vif),transform var(--vif)}
.choix-vues button:hover{transform:translateY(-1px);border-color:var(--encre)}
.choix-vues button[aria-selected="true"]{background:var(--encre);border-color:var(--encre);color:var(--inverse)}
.arche-texte input{text-transform:uppercase}
.arche-texte input::placeholder{color:var(--encre-3);text-transform:uppercase}
.arche-fichier{position:relative;display:grid;gap:8px;padding:12px 0;border-bottom:1.5px solid var(--trait);cursor:pointer;transition:border-color var(--vif)}
.arche-fichier:hover{border-color:var(--encre)}
.arche-fichier .label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);font-weight:500}
.arche-fichier input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.arche-fichier-nom{font-size:15px;color:var(--encre-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arche-logo-import{display:grid;grid-template-columns:80px minmax(0,1fr);gap:16px;align-items:center}
.arche-logo-import img{width:80px;height:64px;object-fit:contain;background:var(--casse);border-radius:8px;padding:6px}
.arche-logo-import div{display:grid;gap:8px;min-width:0}
.arche-logo-import strong{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arche-logo-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.arche-recentrer,.arche-remplacer{position:relative;padding:0 0 2px;border-bottom:1px solid currentColor;font:inherit;font-size:13.5px;font-weight:500;color:var(--encre);line-height:1.35;cursor:pointer;background:none;border-radius:0}
.arche-remplacer input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.arche-couleurs .aide{margin-top:2px}
.arche-faces{display:grid;gap:10px}.arche-faces .label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2);font-weight:500}
/* Le nuancier : un carré, une barre, un code. Le curseur porte la couleur. */
.nuancier{display:grid;gap:14px;margin-top:6px;--couleur:#F6F4EE}
.nuancier-carre{position:relative;height:150px;border-radius:10px;cursor:crosshair;touch-action:none;overflow:hidden;
  background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,var(--teinte,#f00))}
.nuancier-carre:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.nuancier-curseur{position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(10,10,11,.45),0 4px 12px rgba(10,10,11,.28);transform:translate(-50%,-50%);pointer-events:none;transition:width var(--vif),height var(--vif)}
.nuancier-carre:active .nuancier-curseur{width:24px;height:24px}
.nuancier-teinte-ligne{display:block}
.champ .nuancier-teinte,.nuancier-teinte{-webkit-appearance:none;appearance:none;width:100%;height:14px;padding:0;border:0;border-radius:var(--r-pill);margin:0;cursor:pointer;
  background:linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)}
.nuancier-teinte::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--couleur);border:2px solid #fff;box-shadow:0 0 0 1px rgba(10,10,11,.45),0 4px 12px rgba(10,10,11,.28)}
.nuancier-teinte::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--couleur);border:2px solid #fff;box-shadow:0 0 0 1px rgba(10,10,11,.45),0 4px 12px rgba(10,10,11,.28)}
.nuancier-teinte:focus-visible{outline:2px solid var(--encre);outline-offset:4px}
.nuancier-ligne{display:flex;align-items:center;gap:14px}
.nuancier-apercu{flex:none;width:44px;height:44px;border-radius:50%;background:var(--couleur);border:1px solid var(--trait);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.nuancier-hex{flex:1;display:flex;align-items:center;gap:2px;border-bottom:1.5px solid var(--trait);transition:border-color var(--vif)}
.nuancier-hex:focus-within{border-color:var(--encre)}
.nuancier-diese{font-size:17px;color:var(--encre-3);padding:12px 0}
.champ .nuancier-hex input,.nuancier-hex input{flex:1;min-width:0;border-radius:0;font:inherit;font-size:17px;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--encre);background:transparent;border:0;padding:12px 0;outline:none}
.nuancier-hex input[aria-invalid="true"]{color:#b3261e}
.nuancier-pipette{flex:none;height:40px;padding:0 16px;border-radius:var(--r-pill);background:var(--fond);border:1px solid var(--trait);font-size:14px;font-weight:500;transition:border-color var(--vif),transform var(--vif)}
.nuancier-pipette:hover{border-color:var(--encre);transform:translateY(-1px)}
.nuancier-erreur{margin:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.arche-ajustements label{display:grid;grid-template-columns:1fr auto;gap:10px 12px;align-items:center;font-size:14.5px;font-weight:500}
.arche-ajustements label input{grid-column:1/-1}
.arche-ajustements output{font-size:13px;font-variant-numeric:tabular-nums;color:var(--encre-2)}
.arche-ajustements input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:none;margin:0;cursor:pointer}
.arche-ajustements input[type="range"]::-webkit-slider-runnable-track{height:1.5px;background:var(--trait)}
.arche-ajustements input[type="range"]::-moz-range-track{height:1.5px;background:var(--trait)}
.arche-ajustements input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--encre);border:0;margin-top:-7px;transition:transform var(--vif)}
.arche-ajustements input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--encre);border:0}
.arche-ajustements input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.2)}
.arche-ajustements input[type="range"]:focus-visible{outline:none}
.arche-ajustements input[type="range"]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--encre);outline-offset:3px}
.arche-ajustements details{display:grid;gap:14px}
.arche-ajustements summary{font-size:14.5px;font-weight:500;cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;color:var(--encre-2);transition:color var(--vif)}
.arche-ajustements summary::-webkit-details-marker{display:none}
.arche-ajustements summary::before{content:"";position:relative;top:-1px;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform var(--vif)}
.arche-ajustements details[open] summary{color:var(--encre)}
.arche-ajustements details[open] summary::before{transform:rotate(45deg)}
.arche-ajustements summary:hover{color:var(--encre)}
.arche-precision{display:grid;gap:14px}.arche-ajustements input[type="range"]:disabled{opacity:.35;cursor:default}.arche-ajustements input[type="range"]:disabled:hover::-webkit-slider-thumb{transform:none}
.arche-actions{margin-top:30px}
.arche-actions [aria-busy="true"]{pointer-events:none;opacity:.6}
.arche-mention{margin-top:18px;max-width:46ch}
@media (max-width:900px){.arche-scene{aspect-ratio:1}.arche-corps{padding-top:8px}.arche-corps .titre-2{max-width:none}}