/* Elginux — l'IA sous toutes ses formes. */
@font-face{font-family:"Anton";src:url("/fonts/Anton-Regular-latin.woff2") format("woff2");font-display:swap;unicode-range:U+0000, U+000D, U+0020-007E, U+00A0-0181, U+0186-018A, U+018E-0194, U+0196-01A1, U+01A4-01A5, U+01A9, U+01AC-01B9, U+01C0-01F5, U+01F8-021B, U+021E-0220, U+0222-0223, U+0226-0233, U+0237, U+023A-023E, U+0241-024F, U+0251, U+0253-0254, U+0256-0257, U+0259, U+025B, U+0260, U+0263, U+0265-0266, U+0268-026C, U+026F, U+0272, U+0275, U+027D-027E, U+0283, U+0288-028C, U+0292, U+0294-0295, U+0298, U+029D, U+02B0, U+02B7, U+02B9-02BC, U+02BE-02C0, U+02C6-02CC, U+02D7-02DD, U+02EE, U+0300-0304, U+0306-030D, U+030F-0313, U+031B, U+0323-0329, U+032D-0332, U+0334-0335, U+0358, U+1E00-1E95, U+1E97, U+1E9E, U+1EA0-1EF9, U+2007-200B, U+2010, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+2070, U+2074-2079, U+2080-2089, U+20A1, U+20A3-20A4, U+20A6-20A7, U+20A9, U+20AB-20AD, U+20B1-20B2, U+20B5, U+20B9-20BA, U+20BC-20BD, U+2113, U+2116, U+2122, U+2126, U+212E, U+2153-2154, U+215B-215E, U+2190-2193, U+2202, U+2205-2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25A0-25A1, U+25B2-25B3, U+25B6-25B7, U+25BC-25BD, U+25C0-25C1, U+25C6-25C7, U+25CA, U+2C60-2C66, U+2C6D, U+2C72-2C73, U+A726-A727, U+A740-A741, U+A789-A78D, U+A7A8-A7AA, U+A7AD-A7AE, U+A7B2-A7B9, U+FB01-FB02}
@font-face{font-family:"Anton";src:url("/fonts/Anton-Regular-autres.woff2") format("woff2");font-display:swap;unicode-range:U+0394, U+03A3, U+03A9, U+03C0, U+1D7D, U+1DBB, U+1DC4-1DC7, U+1DCA, U+27E8-27E9, U+AB53}
@font-face{font-family:"Sofia Sans Extra Condensed";src:url("/fonts/SofiaSansExtraCondensed-wght-latin.woff2") format("woff2");font-weight:1 1000;font-style:normal;font-display:swap;unicode-range:U+000D, U+0020-007E, U+00A0-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0133, U+0136-013E, U+0141-0148, U+014A-014D, U+0150-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+0237, U+02BC, U+02C6-02C7, U+02D8-02DD, U+0300-0304, U+0306-0308, U+030A-030C, U+0312-0313, U+0324-0328, U+0330-0331, U+0335-0336, U+1E80-1E85, U+1E9E, U+1EF2-1EF3, U+2007-2008, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2070, U+2074-2079, U+2080-2089, U+20AC, U+2116, U+2122, U+212E, U+2153-2154, U+2190-2199, U+2202, U+2206, U+220F, U+2211-2212, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA-25CB, U+25CF, U+FB00-FB02}
@font-face{font-family:"Sofia Sans Extra Condensed";src:url("/fonts/SofiaSansExtraCondensed-wght-autres.woff2") format("woff2");font-weight:1 1000;font-style:normal;font-display:swap;unicode-range:U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE, U+0400-045F, U+0490-0491, U+04C0, U+04CF, U+04E2-04E3, U+04EE-04EF, U+2460-2468, U+24EA, U+24FF, U+2776-277E}
@font-face{font-family:"Sofia Sans Extra Condensed";src:url("/fonts/SofiaSansExtraCondensed-Italic-wght-latin.woff2") format("woff2");font-weight:1 1000;font-style:italic;font-display:swap;unicode-range:U+000D, U+0020-007E, U+00A0-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0133, U+0136-013E, U+0141-0148, U+014A-014D, U+0150-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+0237, U+02BC, U+02C6-02C7, U+02D8-02DD, U+0300-0304, U+0306-0308, U+030A-030C, U+0312-0313, U+0324-0328, U+0330-0331, U+0335-0336, U+1E80-1E85, U+1E9E, U+1EF2-1EF3, U+2007-2008, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2070, U+2074-2079, U+2080-2089, U+20AC, U+2116, U+2122, U+212E, U+2153-2154, U+2190-2199, U+2202, U+2206, U+220F, U+2211-2212, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB00-FB02}
@font-face{font-family:"Sofia Sans Extra Condensed";src:url("/fonts/SofiaSansExtraCondensed-Italic-wght-autres.woff2") format("woff2");font-weight:1 1000;font-style:italic;font-display:swap;unicode-range:U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE, U+0400-045F, U+0490-0491, U+04C0, U+04CF, U+04E2-04E3, U+04EE-04EF, U+2460-2468, U+24EA, U+24FF, U+2776-277E}
@font-face{font-family:"Sofia Sans Semi Condensed";src:url("/fonts/SofiaSansSemiCondensed-wght-latin.woff2") format("woff2");font-weight:1 1000;font-display:swap;unicode-range:U+000D, U+0020-007E, U+00A0-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-0127, U+012A-012B, U+012E-0133, U+0136-013E, U+0141-0148, U+014A-014D, U+0150-015B, U+015E-0167, U+016A-016B, U+016E-017E, U+0192, U+0218-021B, U+0237, U+02BC, U+02C6-02C7, U+02D8-02DD, U+0300-0304, U+0306-0308, U+030A-030C, U+0312-0313, U+0324-0328, U+0330-0331, U+0335-0336, U+1E80-1E85, U+1E9E, U+1EF2-1EF3, U+2007-2008, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2070, U+2074-2079, U+2080-2089, U+20AC, U+2116, U+2122, U+212E, U+2153-2154, U+2190-2199, U+2202, U+2206, U+220F, U+2211-2212, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA-25CB, U+25CF, U+FB00-FB02}
@font-face{font-family:"Sofia Sans Semi Condensed";src:url("/fonts/SofiaSansSemiCondensed-wght-autres.woff2") format("woff2");font-weight:1 1000;font-display:swap;unicode-range:U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE, U+0400-045F, U+0490-0491, U+04C0, U+04CF, U+04E2-04E3, U+04EE-04EF, U+2460-2468, U+24EA, U+24FF, U+2776-277E}

:root{
  --tempo:1.4; --oscil-amp:.7deg; --oscil-duree:7s;
  --ground:#F0EEE8; --card:#F3F1EC; --slip:#EDEAE3; --ink:#0C0C0C; --ink-2:#3B3A37; --ink-3:#5F5D58; --ink-4:#6A6761;
  --vermillon:#E5311A; --safran:#F2B707; --outremer:#0341B3; --emeraude:#0D8B55; --magenta:#D62675; --sarcelle:#028089; --violet:#59279C; --encre:#1B1A1A;
  --cta:#E53521;
  --display:"Anton", "Impact", sans-serif;
  --ui:"Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --text:"Sofia Sans Semi Condensed", "Arial Narrow", sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:#2A2927 var(--ground)}
body{margin:0;background:var(--ground) url("/assets/plates/ground-texture.webp") repeat;color:var(--ink);font-family:var(--text);font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:var(--safran);color:var(--ink)}
a{color:inherit}
:focus-visible{outline:3px solid var(--outremer);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Échelle commune : 1 unité = 1 px de la maquette (1536 px de large) ---------- */
.stage{width:min(100%, 169.2svh);margin-inline:auto;container-type:inline-size}
.stage>*{--u:calc(100cqw / 1536)}
.hero{position:relative;aspect-ratio:1536/908;overflow:hidden}
.t{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));font-size:calc(var(--fs) * var(--u));line-height:1;white-space:nowrap;margin:0}

/* En-tête */
.masthead{position:absolute;inset:0 0 auto 0;height:calc(62 * var(--u));z-index:20;border-bottom:1px solid #747371}
.masthead .t{--fs:22.7}
.wordmark{--x:33.4;--y:8;--fs:38.2!important;--nom-dy:.5;display:flex;align-items:center;gap:calc(9.8 * var(--u));height:calc(41 * var(--u));font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;color:var(--ink)}
.wordmark__nom{position:relative;top:calc(var(--nom-dy, 0) * var(--u))}
/* X du logo en rouge de la lame, partout où le nom Elginux sert de logo ; reprend la couleur du texte quand l'en-tête prend la teinte d'une lame. */
.marque-x{color:var(--lame-fond,#E5311A)}
.masthead.is-drenched .marque-x{color:inherit}
/* Lame E : tracés peints par les variables --lame-* ; sur un bain de couleur, version une couleur du kit (le E devient un vide) */
.lame-e{display:block;height:100%;width:auto;flex:none}
.lame-e__fond{fill:var(--lame-fond,#E5311A)} .lame-e__marque{fill:var(--lame-marque,#FFF8F3)} .lame-e__rivet{fill:var(--lame-rivet,#967137)}
/* Logo de l'en-tête de la page d'accueil : la lame pivote sur son rivet, puis les lettres montent une à une (pas sur les pages légales ni dans le pied). */
.masthead .wordmark .lame-e{transform-origin:50% 86.53%;animation:lame-pivot calc(.95s * var(--tempo)) cubic-bezier(.2,.85,.25,1) both}
.masthead .wordmark__nom{overflow:hidden}
.masthead .wordmark__nom>span{display:inline-block;animation:lettre-monte calc(.6s * var(--tempo)) cubic-bezier(.2,.8,.2,1) both}
.masthead .wordmark__nom>span:nth-child(1){animation-delay:calc(.30s * var(--tempo))}
.masthead .wordmark__nom>span:nth-child(2){animation-delay:calc(.35s * var(--tempo))}
.masthead .wordmark__nom>span:nth-child(3){animation-delay:calc(.40s * var(--tempo))}
.masthead .wordmark__nom>span:nth-child(4){animation-delay:calc(.45s * var(--tempo))}
.masthead .wordmark__nom>span:nth-child(5){animation-delay:calc(.50s * var(--tempo))}
.masthead .wordmark__nom>span:nth-child(6){animation-delay:calc(.55s * var(--tempo))}
.masthead .wordmark__nom>span:nth-child(7){animation-delay:calc(.60s * var(--tempo))}
@keyframes lame-pivot{0%{transform:rotate(30deg);opacity:0}16%{opacity:1}64%{transform:rotate(-4deg)}100%{transform:rotate(0deg)}}
@keyframes lettre-monte{from{transform:translateY(110%);opacity:0}to{transform:none;opacity:1}}
.navlink{font-family:var(--ui);font-weight:600;text-decoration:none;color:var(--ink)}
.navlink--formes{--x:880;--y:18.7}
.navlink--methode{--x:992;--y:19.5}
.navlink--questions{--x:1089;--y:18.5}
.navlink--blog{--x:1198;--y:18.7}
@media (hover: hover) and (pointer: fine){.navlink:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:2px}}
.cta-top{position:absolute;left:calc(1290 * var(--u));top:calc(8 * var(--u));width:calc(212 * var(--u));height:calc(41 * var(--u));display:grid;place-items:center;background:var(--ink);color:#F5F3EE;border-radius:calc(3 * var(--u));font-family:var(--ui);font-weight:700;font-size:calc(24.4 * var(--u));letter-spacing:.012em;text-decoration:none;line-height:1;padding-top:calc(4 * var(--u))}
@media (hover: hover) and (pointer: fine){.cta-top:hover{background:#2A2926}}

/* Titre */
.headline{--x:28.6;--y:79;--fs:142.3;font-family:var(--display);font-weight:400;letter-spacing:-.03em}

/* Lames dessinées en code */
.fan{position:absolute;inset:0}
.blade{position:absolute;display:block;width:calc(200 * var(--u));height:calc((var(--dout) - var(--din)) * var(--u));left:calc(596.2 * var(--u) - var(--ox, 0px));top:calc((1199.4 - var(--dout)) * var(--u) - var(--oy, 0px));transform-origin:50% calc(var(--dout) * var(--u));transform:rotate(calc(var(--th) * 1deg));transition:transform .45s var(--ease-out), filter .45s var(--ease-out);border-radius:calc(18 * var(--u)) calc(18 * var(--u)) 0 0;background:linear-gradient(var(--card),var(--card)) top/100% calc(var(--band, 122) * var(--u)) no-repeat, var(--hue);filter:drop-shadow(0 calc(5 * var(--u)) calc(7 * var(--u)) rgba(30,25,15,.22));text-decoration:none;color:var(--ink)}
.blade::before{content:"";position:absolute;inset:0;border-radius:inherit;background:url("/assets/plates/blade-grain.webp") repeat;background-size:calc(380 * var(--u)) auto;mix-blend-mode:soft-light;opacity:var(--grain, 1);pointer-events:none}
.blade__tints{position:absolute;left:50%;top:calc((var(--band, 122) + 22) * var(--u));width:calc(64 * var(--u));transform:translateX(-50%);display:grid;gap:calc(8 * var(--u))}
.blade__tints i{display:block;height:calc(50 * var(--u));border-radius:calc(5 * var(--u));background:var(--t1)}
.blade__tints i:nth-child(2){background:var(--t2)} .blade__tints i:nth-child(3){background:var(--t3)} .blade__tints i:nth-child(4){background:var(--t4)} .blade__tints i:nth-child(5){background:var(--t5)}
.blade__label{position:absolute;left:calc(22 * var(--u));top:calc(14 * var(--u));line-height:1;color:#0E0D0E}
.blade__code,.blade__name{display:block;font-family:var(--ui);font-weight:820;letter-spacing:.005em}
.blade__code{font-size:var(--code-fs, calc(27 * var(--u)));font-variant-numeric:tabular-nums}
.blade__name{font-size:var(--name-fs, calc(34 * var(--u)));margin-top:calc(1 * var(--u))}
.blade__note{display:block;margin-top:calc(7 * var(--u));font-family:var(--text);font-weight:450;font-size:calc(15.6 * var(--u));line-height:1.08;color:#1F1E1C;white-space:nowrap}
.blade--02{--th:-27.86;--dout:970.9;--din:200;--hue:#F2B707;--t1:#F8E0A4;--t2:#F8D77E;--t3:#F7C943;--t4:#C58E04;--t5:#B67F02;z-index:7}
.blade--03{--th:-15.29;--dout:977.2;--din:200;--hue:#0341B3;--t1:#8DA6E6;--t2:#6889DF;--t3:#3F6AC3;--t4:#011E64;--t5:#011A57;z-index:6}
.blade--04{--th:-1.76;--dout:984.8;--din:200;--hue:#0D8B55;--t1:#9BCFB5;--t2:#7CC09F;--t3:#57AF87;--t4:#03683B;--t5:#014623;z-index:5}
.blade--05{--th:10.37;--dout:999.5;--din:200;--hue:#D62675;--t1:#EA8FBE;--t2:#E875AE;--t3:#E35699;--t4:#AA1256;--t5:#910141;z-index:4}
.blade--06{--th:23.61;--dout:1010.9;--din:200;--hue:#028089;--t1:#90CED1;--t2:#60BBBF;--t3:#35A7AC;--t4:#015A60;--t5:#01474C;z-index:3}
.blade--07{--th:36.85;--dout:1022.2;--din:200;--hue:#59279C;--t1:#B695DA;--t2:#9969CC;--t3:#7C43BD;--t4:#361661;--t5:#270D4E;z-index:2}
/* Les deux lames du bord : vermillon devant, encre derrière. --band = hauteur de la bande carte (122 par défaut) */
.blade--01{--th:-39.69;--dout:992;--din:200;--band:148;--hue:#E5311A;--t1:#F7A590;--t2:#F18167;--t3:#E95F46;--t4:#AA160B;--t5:#980805;z-index:9}
.blade--08{--th:50.05;--dout:1046;--din:200;--hue:#1B1A1A;--t1:#C9C7C2;--t2:#A3A19C;--t3:#7D7B77;--t4:#575551;--t5:#3A3936;z-index:1}

/* Rivet en laiton dessiné en CSS (remplace l'image form-rivet.webp le 19/10/2026) : net à toutes les tailles et dans la 3D des lames,
   bombé, avec ombre de contact ; épaisseur seulement pendant un spectacle (lames/lames.css). Élément = rondelle et ombre portée ; ::before = flanc de la tête ;
   ::after = dessus de la tête (laiton tourné, dôme, point chaud déplacé par background-position). Variables reprises par le tampon d'EL-02. */
:root{
  --rivet-tete:
    radial-gradient(closest-side, rgb(255 255 255 / .6), rgb(255 255 255 / .18) 52%, rgb(255 255 255 / 0)),
    radial-gradient(circle at 40% 34%, rgb(40 24 6 / 0) 42%, rgb(40 24 6 / .16) 68%, rgb(28 14 2 / .58) 100%),
    conic-gradient(from -38deg, #FFEDBD, #EFCB80 10%, #B5832F 19%, #66410F 25%, #B5832F 31%, #DCAF5C 42%, #F0D08B 50%, #C7974A 59%, #895B1E 69%, #5A390C 75%, #895B1E 81%, #D6A95C 92%, #FFEDBD);
  --rivet-tete-taille:58% 58%, 100% 100%, 100% 100%;
  --rivet-tete-pos:24% 20%, 0 0, 0 0;
  --rivet-arete:inset .8px 1.2px 1px rgb(255 240 205 / .55), inset -1px -1.7px 1.6px rgb(32 16 2 / .62);
  --rivet-rondelle:inset 0 .6px .4px rgb(255 240 205 / .6), inset 0 -.9px .9px rgb(30 18 4 / .55);
  --rivet-rondelle-fond:radial-gradient(closest-side, rgb(30 18 4 / 0) 78%, rgb(30 18 4 / .32) 100%), conic-gradient(from -38deg, #ECCB88, #B2823A 15%, #684313 25%, #A87A35 38%, #D3AC66 50%, #A07332 63%, #5C3B10 75%, #A87A35 88%, #ECCB88);
}
.rivet{position:absolute;border-radius:50%;pointer-events:none;
  background:var(--rivet-rondelle-fond);
  box-shadow:var(--rivet-rondelle), 0 1px 1px rgb(0 0 0 / .34), 0 3px 6px -1px rgb(0 0 0 / .3)}
.rivet::before,.rivet::after{content:"";position:absolute;inset:9%;border-radius:50%}
.rivet::before{background:radial-gradient(circle at 40% 35%, #8C672E, #5E4119)}
.rivet::after{background-image:var(--rivet-tete);background-size:var(--rivet-tete-taille);background-position:var(--rivet-tete-pos);background-repeat:no-repeat;box-shadow:var(--rivet-arete), 0 .8px 1.2px rgb(36 20 4 / .55), .6px 1.6px 2.6px rgb(36 20 4 / .3)}
/* Rivet en relief (rivet3d.js, 19/10/2026) : quand une grande lame s'incline (spectacle, défilement, lampe, entrée), le volume du rivet
   (ombre portée, fût, tête bombée) est dessiné à plat dans son plan, déformé comme la caméra le voit ; rien en profondeur, le texte
   reste net. Au repos, ces éléments ne s'affichent pas : rivet plat d'origine. */
.rivet__repere{position:absolute;width:0;height:0;visibility:hidden}
.rivet__vol{display:none;position:absolute;left:0;top:0;pointer-events:none}
.rivet.is-vol>.rivet__vol{display:block}
.rivet.is-vol::after{visibility:hidden}
.rivet__ombre{border-radius:50%}
.rivet__dome{background-repeat:no-repeat}

/* Lame blanche : le formulaire */
.slip{position:absolute;left:calc(397 * var(--u));top:calc(718 * var(--u));width:calc(1092 * var(--u));height:calc(178 * var(--u));border-radius:calc(20 * var(--u));background:var(--slip);box-shadow:0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(30,25,15,.16), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(30,25,15,.10);z-index:10}
.slip::before{content:"";position:absolute;inset:0;border-radius:inherit;background:url("/assets/plates/ground-texture.webp") repeat;mix-blend-mode:multiply;opacity:.3;pointer-events:none}
.slip>*{position:absolute}
.slip__rivet{left:calc(20 * var(--u));top:calc(75 * var(--u));width:calc(52 * var(--u));height:calc(52 * var(--u))}
.slip__title{left:calc(99.6 * var(--u));top:calc(21.5 * var(--u));font-family:var(--ui);font-weight:760;font-size:calc(24 * var(--u));line-height:1;margin:0;color:var(--ink)}
.field{display:block;left:calc(101 * var(--u));width:calc(515 * var(--u));border:0;border-bottom:calc(2 * var(--u)) solid #5E5C57;background:transparent;font-family:var(--ui);font-size:calc(20 * var(--u));line-height:1;color:var(--ink);padding:0 0 calc(3 * var(--u)) 0;margin:0;border-radius:0;resize:none;overflow:hidden}
.field::placeholder{color:var(--ink-4);opacity:1}
.field:focus{outline:none;border-bottom-color:var(--outremer);box-shadow:0 2px 0 var(--outremer)}
.field:focus-visible{outline:none}
.field--need{top:calc(53 * var(--u));height:max(calc(24 * var(--u)), 22px);font-style:italic;font-size:max(calc(20.5 * var(--u)), 16px);letter-spacing:.035em}
.field--need:not(:placeholder-shown){font-style:normal}
.field--email{top:calc(95 * var(--u));height:max(calc(26 * var(--u)), 24px);font-size:max(calc(21 * var(--u)), 16px);letter-spacing:.03em}
.choice{left:calc(634 * var(--u));top:calc(76 * var(--u));display:flex;gap:calc(12 * var(--u));border:0;margin:0;padding:0}
.chip{position:relative;display:flex;align-items:center;gap:calc(9 * var(--u));height:calc(47 * var(--u));padding:0 calc(14 * var(--u)) 0 calc(12 * var(--u));border:calc(1.5 * var(--u)) solid #4A4844;border-radius:calc(7 * var(--u));font-family:var(--ui);font-weight:500;font-size:calc(20 * var(--u));line-height:1;color:var(--ink-2);cursor:pointer;background:transparent}
.chip--devis{width:calc(109 * var(--u))} .chip--audit{width:calc(104 * var(--u))}
.chip input{appearance:none;-webkit-appearance:none;margin:0;width:calc(18 * var(--u));height:calc(18 * var(--u));border:calc(1.5 * var(--u)) solid #3B3A37;border-radius:50%;flex:none;background:transparent;display:grid;place-items:center}
.chip input:checked{border-color:var(--ink)}
.chip input:checked::after{content:"";width:calc(9 * var(--u));height:calc(9 * var(--u));border-radius:50%;background:var(--cta)}
.chip:has(input:checked){border-color:var(--ink);color:var(--ink)}
.chip:has(input:focus-visible){outline:3px solid var(--outremer);outline-offset:2px}
.submit{left:calc(871 * var(--u));top:calc(76 * var(--u));width:calc(198 * var(--u));height:calc(47 * var(--u));border:0;border-radius:calc(3 * var(--u));background:var(--cta);color:#FFF8F3;font-family:var(--ui);font-weight:700;font-size:calc(25.8 * var(--u));line-height:1;cursor:pointer}
@media (hover: hover) and (pointer: fine){.submit:hover{background:#C92A18}}
.slip__offer{left:calc(101.6 * var(--u));top:calc(137 * var(--u));margin:0;font-family:var(--ui);font-weight:450;font-size:calc(22.6 * var(--u));line-height:1;white-space:nowrap;color:#1D1C1A}
.slip__offer strong{font-weight:760}

/* Section suivante */
.forms{border-top:1px solid #2A2927;margin-top:calc(3 * var(--u))}
.forms__head{position:relative}
.forms__title{--x:30.6;--y:17;--fs:78.2;font-family:var(--display);font-weight:400;letter-spacing:-.03em}
.blade--01 .blade__label{left:calc(22.4 * var(--u));top:calc(32 * var(--u))}
.blade--02 .blade__label{left:calc(37.7 * var(--u));top:calc(9.9 * var(--u))}
.blade--03 .blade__label{left:calc(36.1 * var(--u));top:calc(11.6 * var(--u))}
.blade--04 .blade__label{left:calc(17.9 * var(--u));top:calc(16.9 * var(--u))}
.blade--05 .blade__label{left:calc(38.1 * var(--u));top:calc(18.2 * var(--u))}
.blade--06 .blade__label{left:calc(33.7 * var(--u));top:calc(13.3 * var(--u))}
.blade--07 .blade__label{left:calc(15.2 * var(--u));top:calc(11.6 * var(--u))}
.blade--08 .blade__label{left:calc(4 * var(--u));top:calc(18 * var(--u))}

/* ---------- Éléments transverses ---------- */
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;background:var(--ink);color:#fff;font:700 18px/1 var(--ui);text-decoration:none;border-radius:4px}
.skip:focus{top:12px}
section[id],.explorer{scroll-margin-top:72px}
::-webkit-scrollbar{width:12px;height:10px}
::-webkit-scrollbar-track{background:var(--ground)}
::-webkit-scrollbar-thumb{background:#2A2927;border-radius:6px;border:3px solid var(--ground)}
input,textarea,button{font:inherit}
input,textarea{caret-color:var(--cta)}

/* Survol : la lame sort de l'éventail */
.blade:focus-visible{transform:rotate(calc(var(--th) * 1deg)) translateY(calc(-18 * var(--u)));filter:drop-shadow(0 calc(16 * var(--u)) calc(16 * var(--u)) rgba(30,25,15,.30))}
@media (hover: hover) and (pointer: fine){.blade:hover{transform:rotate(calc(var(--th) * 1deg)) translateY(calc(-18 * var(--u)));filter:drop-shadow(0 calc(16 * var(--u)) calc(16 * var(--u)) rgba(30,25,15,.30))}}
.blade:focus-visible{outline:3px solid var(--ink);outline-offset:calc(4 * var(--u))}

/* Ouverture de l'éventail au chargement */
@keyframes fan-in{from{transform:rotate(4deg)}}
@keyframes slip-in{from{transform:translateY(calc(30 * var(--u)));opacity:0}}
@keyframes rise{from{transform:translateY(14px);opacity:0}}
.js .fan>.blade{animation:fan-in calc(1.2s * var(--tempo)) cubic-bezier(.4,0,.2,1) backwards, oscille var(--oscil-duree) linear infinite;animation-delay:calc(300ms * var(--tempo)), calc((300ms + 1.2s) * var(--tempo))}
/* Oscillation continue : propriété "rotate" (s'ajoute au transform), courbe proche d'une sinusoïde. Pause (2e animation seulement) au survol/focus d'une lame et quand le premier écran est hors champ (.is-repos, posé par app.js). */
@keyframes oscille{0%{rotate:0deg;animation-timing-function:cubic-bezier(.61,1,.88,1)}25%{rotate:var(--oscil-amp);animation-timing-function:cubic-bezier(.37,0,.63,1)}75%{rotate:calc(var(--oscil-amp) * -1);animation-timing-function:cubic-bezier(.12,0,.39,0)}100%{rotate:0deg}}
.js .fan:has(.blade:hover)>.blade,.js .fan:has(.blade:focus-visible)>.blade,.js .fan.is-repos>.blade{animation-play-state:running,paused}
/* ===== Relief de l'éventail — chantier A1 (début) =====
   Actif seulement si relief.js a posé .is-relief sur .hero (souris précise, 1001 px et plus, mouvement autorisé) : sinon rien ne change.
   Ordre de composition d'une lame : translate (profondeur) > rotate (oscillation, inchangée) > scale (taille apparente compensée) > transform (rotation d'éventail, sortie au survol, rotation propre).
   --r-lift et --r-sh sont déclarées pour que la sortie au survol garde sa transition de .45 s pendant que le reste suit le pointeur sans transition. */
@property --r-lift{syntax:"<length>";inherits:false;initial-value:0px}
@property --r-sh{syntax:"<number>";inherits:false;initial-value:0}
/* Variables du pointeur : non héritées, pour que chaque mise à jour ne recalcule que la lame concernée (et non ses 15 descendants). */
@property --r-z0{syntax:"<length>";inherits:false;initial-value:0px}
@property --r-av{syntax:"<length>";inherits:false;initial-value:0px}
@property --r-sc{syntax:"<number>";inherits:false;initial-value:1}
@property --r-ry{syntax:"<number>";inherits:false;initial-value:0}
@property --r-lum{syntax:"<number>";inherits:false;initial-value:1}
@property --r-sx{syntax:"<length>";inherits:false;initial-value:0px}
@property --r-sy{syntax:"<length>";inherits:false;initial-value:0px}
@property --r-sb{syntax:"<length>";inherits:false;initial-value:0px}
@property --r-fx{syntax:"<number>";inherits:false;initial-value:0}
@property --r-fy{syntax:"<number>";inherits:false;initial-value:0}
@property --r-lx{syntax:"<length>";inherits:false;initial-value:0px}
@property --r-ly{syntax:"<length>";inherits:false;initial-value:0px}
@property --r-lo{syntax:"<number>";inherits:false;initial-value:0}
@media (min-width: 1001px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){
  .hero.is-relief .fan{z-index:9;transform-style:preserve-3d;transform-origin:calc(696.2 * var(--u)) calc(1199.4 * var(--u));transform:perspective(1800px) rotateX(calc(var(--r-fx, 0) * 1deg)) rotateY(calc(var(--r-fy, 0) * 1deg))}
  .hero.is-relief .fan>.blade{translate:0 0 calc(var(--r-z0, 0px) + var(--r-av, 0px));scale:var(--r-sc, 1);transform:rotate(calc(var(--th) * 1deg)) translateY(var(--r-lift)) rotateY(calc(var(--r-ry, 0) * 1deg));filter:brightness(var(--r-lum, 1)) drop-shadow(var(--r-sx, 0px) calc((5 + 11 * var(--r-sh)) * var(--u) + var(--r-sy, 0px)) calc((7 + 9 * var(--r-sh)) * var(--u) + var(--r-sb, 0px)) rgba(30, 25, 15, calc(.22 + .08 * var(--r-sh))));transition:--r-lift .45s var(--ease-out), --r-sh .45s var(--ease-out)}
  .hero.is-relief .fan>.blade:focus-visible{--r-lift:calc(-18 * var(--u));--r-sh:1}
  .hero.is-relief .fan>.blade:hover{--r-lift:calc(-18 * var(--u));--r-sh:1}
  /* Large tache de lumière très douce sous le pointeur (soft-light, alpha <= .14, aucun bord net) ; au-dessus de l'éventail, sous la lame blanche */
  .relief-lueur{position:absolute;left:0;top:0;width:calc(1100 * var(--u));height:calc(1100 * var(--u));z-index:9;pointer-events:none;translate:var(--r-lx, 0px) var(--r-ly, 0px);opacity:var(--r-lo, 0);mix-blend-mode:soft-light;background:radial-gradient(closest-side, rgba(255, 248, 235, .14), rgba(255, 248, 235, .115) 25%, rgba(255, 248, 235, .065) 50%, rgba(255, 248, 235, .022) 75%, rgba(255, 248, 235, 0))}
  /* will-change seulement pendant le mouvement */
  .hero.is-relief-actif .fan,.hero.is-relief-actif .fan>.blade,.hero.is-relief-actif .relief-lueur{will-change:transform}
  /* Pendant le relief, l'oscillation est en pause (comme au survol) ; elle reprend seule, sans saut, quand .is-relief-actif disparaît. */
  .hero.is-relief-actif .fan>.blade{animation-play-state:running,paused}
}
/* ===== Relief de l'éventail — chantier A1 (fin) ===== */
.js .slip{animation:slip-in calc(.9s * var(--tempo)) var(--ease-out) calc(.62s * var(--tempo)) backwards}

/* Barre collante (bureau) */
@keyframes drop{from{transform:translate(-50%,-100%)}}
.masthead.is-stuck{position:fixed;top:0;left:50%;width:min(100vw, 169.2svh);transform:translateX(-50%);background:var(--ground) url("/assets/plates/ground-texture.webp") repeat;box-shadow:0 10px 24px -14px rgba(20,18,12,.35);animation:drop .4s var(--ease-out)}

/* États de la lame blanche */
.slip__error{left:auto;right:calc(26 * var(--u));top:calc(20 * var(--u));margin:0;font:700 calc(18 * var(--u))/1 var(--ui);color:#B4200E}
.field[aria-invalid="true"]{border-bottom-color:#B4200E}
.slip__done{inset:0;display:grid;align-content:center;gap:calc(10 * var(--u));padding:0 calc(40 * var(--u)) 0 calc(100 * var(--u));background:var(--slip);border-radius:inherit;z-index:3}
.slip__done[hidden]{display:none}
.slip__stamp{justify-self:start;margin:0;padding:calc(4 * var(--u)) calc(14 * var(--u));border:calc(3 * var(--u)) solid var(--cta);color:var(--cta);font:400 calc(38 * var(--u))/1 var(--display);transform:rotate(-3deg);text-transform:uppercase;letter-spacing:.01em}
.slip__recap{margin:0;font:500 calc(21 * var(--u))/1.3 var(--text)}
.slip__demo{margin:0;font:500 calc(17 * var(--u))/1.3 var(--ui);color:var(--ink-3)}
.slip__demo a{color:var(--ink);font-weight:700;text-underline-offset:.18em}
.js .slip__done:not([hidden]) .slip__stamp{animation:stamp .5s var(--ease-out)}
@keyframes stamp{from{transform:rotate(-14deg) scale(1.6);opacity:0}}
.slip__stamp,.order__stamp{-webkit-mask-image:url("/assets/plates/stamp-ink.webp");mask-image:url("/assets/plates/stamp-ink.webp");-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* ---------- Les huit formes ---------- */
.forms{position:relative}
.forms__head{padding-top:calc(113 * var(--u))}
.forms__intro{margin:calc(6 * var(--u)) 0 0 calc(34 * var(--u));max-width:52ch;font:400 clamp(18px, 1.35vw, 21px)/1.5 var(--text);color:var(--ink-2)}
.explorer{position:relative;margin-top:clamp(28px, 3vw, 48px);display:grid;grid-template-columns:auto minmax(0, 1fr);gap:clamp(32px, 3.4vw, 56px);padding:clamp(48px, 5vw, 80px) clamp(18px, 2.2vw, 34px) clamp(56px, 5.4vw, 88px);background-color:var(--drench);color:var(--on);transition:background-color .8s var(--ease-out), color .5s var(--ease-out);overflow:hidden;isolation:isolate}
.explorer::before{content:"";position:absolute;inset:0;background:url("/assets/plates/blade-grain.webp") repeat;background-size:380px auto;mix-blend-mode:soft-light;opacity:.85;pointer-events:none;z-index:-1}
.spine{position:relative;display:flex;align-items:flex-start;gap:0;height:540px;padding-top:40px;filter:drop-shadow(0 16px 18px rgba(0,0,0,.30))}
.strip{position:relative;flex:0 0 34px;height:calc(452px + var(--k, 0) * 5px);padding:0;border:0;border-radius:9px 9px 4px 4px;background:var(--hue);color:var(--on);cursor:pointer;box-shadow:inset -1px 0 0 rgba(0,0,0,.26), inset 1px 0 0 rgba(255,255,255,.12);transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out)}
.strip::before{content:"";position:absolute;inset:0 0 auto 0;height:96px;border-radius:9px 9px 0 0;background:var(--card);box-shadow:inset -1px 0 0 rgba(0,0,0,.16)}
.strip::after{content:"";position:absolute;inset:0;border-radius:inherit;background:url("/assets/plates/blade-grain.webp") repeat;background-size:380px auto;mix-blend-mode:soft-light;pointer-events:none}
.strip span{position:absolute;left:50%;bottom:calc(66px + var(--k, 0) * 5px);transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;white-space:nowrap;font:800 19px/1 var(--ui);letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:tabular-nums}
@media (hover: hover) and (pointer: fine){.strip:hover{transform:translateY(-10px)}}
.strip[aria-selected="true"]{z-index:1;transform:translateY(-40px);box-shadow:0 0 0 2px var(--on), 0 18px 22px -10px rgba(0,0,0,.45)}
.spine__rivet{position:absolute;left:50%;bottom:var(--rivet-b, 44px);z-index:2;width:40px;height:40px;transform:translateX(-50%);pointer-events:none}
.strip:focus-visible{outline:3px solid var(--on);outline-offset:3px}
.panels{position:relative;min-width:0}
.panel{display:grid;gap:clamp(36px, 3.6vw, 60px)}
.panel[hidden]{display:none}
.no-js .panel[hidden]{display:grid}
.bigblade{position:relative;display:grid;grid-template-columns:minmax(0, 1fr) clamp(250px, 20vw, 310px);min-height:340px;margin-top:22px;border-radius:26px;background:var(--field, var(--hue));color:var(--on);box-shadow:0 40px 60px -26px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.18);transform:rotate(-3deg);transform-origin:0 100%}
.bigblade::before{content:"";position:absolute;inset:0;border-radius:inherit;background:url("/assets/plates/blade-grain.webp") repeat;background-size:380px auto;mix-blend-mode:soft-light;opacity:var(--grain, 1);pointer-events:none}
.bigblade__rivet{position:absolute;left:26px;top:50%;width:46px;height:46px;transform:translateY(-50%);z-index:2}
.bigblade__field{position:relative;display:grid;grid-template-columns:minmax(0, 1fr);gap:24px;align-content:center;padding:30px 32px 30px 88px;min-width:0}
.bigblade__tip{position:relative;display:flex;flex-direction:column;justify-content:center;padding:28px 30px;border-radius:0 26px 26px 0;background:var(--card);color:var(--ink)}
.bigblade__code{font:820 24px/1 var(--ui);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.bigblade__name{margin:6px 0 12px;font:400 clamp(44px, 4vw, 62px)/.95 var(--display);letter-spacing:-.01em}
.bigblade__def{margin:0;font:400 18px/1.45 var(--text);color:var(--ink-2)}
.levels__title{margin:0 0 12px;font:800 14px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase}
.levels ol{display:grid;grid-template-columns:repeat(5, minmax(0, 96px));gap:14px;margin:0;padding:0;list-style:none}
.levels li{font:650 15px/1.2 var(--ui);letter-spacing:.01em;hyphens:none;-webkit-hyphens:none;overflow-wrap:normal;word-break:normal}
.levels i{display:block;width:100%;height:auto;aspect-ratio:1;margin-bottom:10px;border-radius:9px;background:var(--t1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.levels li:nth-child(2) i{background:var(--t2)} .levels li:nth-child(3) i{background:var(--t3)} .levels li:nth-child(4) i{background:var(--t4)} .levels li:nth-child(5) i{background:var(--t5)}
.uses{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) auto;gap:clamp(24px, 3vw, 48px);align-items:end;padding-left:6px}
.uses p{margin:0;max-width:40ch;font:400 clamp(18px, 1.3vw, 20px)/1.45 var(--text)}
.uses strong{font-weight:700}
.uses__cta{display:inline-flex;align-items:center;gap:12px;padding:18px 26px;border-radius:4px;background:var(--on);color:var(--drench);font:800 21px/1 var(--ui);letter-spacing:.01em;text-decoration:none;white-space:nowrap;box-shadow:0 10px 20px -12px rgba(0,0,0,.5);transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out)}
.ico{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease-out)}
@media (hover: hover) and (pointer: fine){.uses__cta:hover .ico{transform:translateX(3px)}.uses__cta:hover{transform:translateY(-2px);box-shadow:0 16px 26px -12px rgba(0,0,0,.55)}}
.uses__cta:focus-visible{outline:3px solid var(--on);outline-offset:4px}
@keyframes blade-in{from{transform:translateX(-80px) rotate(-12deg);opacity:0}}
@keyframes uses-in{from{transform:translateY(18px);opacity:0}}
.panel.is-entering .bigblade{animation:blade-in calc(.8s * var(--tempo)) var(--ease-out) both}
@keyframes blade-in-back{from{transform:translateX(80px) rotate(4deg);opacity:0}}
.panel.is-entering[data-dir="-1"] .bigblade{animation-name:blade-in-back}
.panel.is-entering .uses{animation:uses-in calc(.7s * var(--tempo)) var(--ease-out) calc(.18s * var(--tempo)) both}

/* ---------- Démonstrations (testeurs) ---------- */
.demo{position:relative;min-width:0;min-height:206px;display:grid;align-content:center;padding-top:30px}
.demo__tag{position:absolute;top:0;left:0;padding:5px 8px;border:1.5px solid currentColor;border-radius:3px;font:800 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase}
.demo.is-anim [data-step]{opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease-out), transform .45s var(--ease-out)}
.demo.is-anim [data-step].on{opacity:1;transform:none}
.demo--chat{display:flex;flex-direction:column;justify-content:center;gap:8px}
.bubble{margin:0;max-width:82%;padding:9px 13px;border-radius:15px;font:500 17px/1.3 var(--text)}
.bubble--in{align-self:flex-start;background:#FFFFFF;color:#0C0C0C;border-bottom-left-radius:4px}
.bubble--out{align-self:flex-end;background:#0C0C0C;color:#FFFFFF;border-bottom-right-radius:4px}
.tasks{display:grid;gap:13px;margin:0;padding:0;list-style:none}
.tasks li{display:flex;align-items:center;gap:13px;font:650 20px/1.2 var(--ui)}
.tasks i{flex:none;display:grid;place-items:center;width:24px;height:24px;border:2.5px solid currentColor;border-radius:5px}
.tasks svg{width:16px;height:16px;fill:none;stroke:var(--field, var(--hue));stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.tasks li:not(.tasks__wait) i{background:currentColor}

.demo.is-anim .tasks li:not(.on) i{background:transparent}
.demo.is-anim .tasks li:not(.on) svg{opacity:0}
.tasks__wait i{border-style:dashed;border-radius:50%}
.tasks__wait.on i{animation:pulse calc(1.3s * var(--tempo)) var(--ease-out) infinite}
@keyframes pulse{50%{transform:scale(1.25)}}
.wave{display:flex;align-items:center;gap:3px;width:100%;max-width:320px;height:74px}
.wave i{flex:1 1 0;min-width:2px;max-width:6px;height:100%;border-radius:3px;background:currentColor;transform:scaleY(calc(.22 + .7 * (sin(var(--k) * 0.9) * .5 + .5)))}
.panel.is-playing .wave i{animation:wave calc(1.05s * var(--tempo)) ease-in-out infinite;animation-delay:calc(var(--k) * -61ms * var(--tempo))}
.panel.is-playing .wave i:nth-child(3n){animation-duration:calc(1.35s * var(--tempo))}
.panel.is-playing .wave i:nth-child(4n+1){animation-duration:calc(.85s * var(--tempo))}
@keyframes wave{0%,100%{transform:scaleY(.16)}50%{transform:scaleY(1)}}
.transcript{margin:14px 0 0;max-width:34ch;font:500 21px/1.35 var(--text)}
.demo.is-anim .transcript [data-step]{transform:none}
.demo--image{grid-template-columns:minmax(0, 1fr);align-content:center;gap:14px}
.prompt{margin:0;max-width:30ch;font:500 19px/1.35 var(--text)}
.develop{width:min(100%, 168px);aspect-ratio:1;margin:0;overflow:hidden;border-radius:8px;box-shadow:0 14px 26px -10px rgba(0,0,0,.55)}
.develop img{display:block;width:100%;height:100%;object-fit:cover}
.demo.is-anim .develop{transform:none}
.demo.is-anim .develop img{filter:blur(16px) saturate(.25);transform:scale(1.12);transition:filter 1.9s var(--ease-out), transform 1.9s var(--ease-out)}
.demo.is-anim .develop.on img{filter:none;transform:none}
/* Lecteur vidéo vertical 9:16 (EL-05) : le tag, la vidéo et la liste des niveaux se rangent dans la grille du champ. */
.bigblade__field:has(.demo--video){grid-template-columns:var(--vw, 220px) minmax(0, 1fr);grid-template-rows:auto 1fr;column-gap:clamp(16px, 3vw, 44px);row-gap:14px;align-content:center;padding-block:24px}
.demo--video{display:contents}
.demo--video .demo__tag{position:static;grid-column:2;grid-row:1;justify-self:start;align-self:start;max-width:100%;font-size:12px;line-height:1.25}
.bigblade__field:has(.demo--video) .levels{grid-column:2;grid-row:2;align-self:center}
.ugc{grid-column:1;grid-row:1 / span 2;min-width:0}
.ugc__frame{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;border-radius:6px;background:#000;box-shadow:0 14px 26px -10px rgba(0,0,0,.55)}
.ugc__video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
/* chantier VIDÉO EN DIRECT (début) : la toile de la scène en temps réel recouvre la vidéo ; créée par app.js seulement sur grand écran avec souris */
.ugc__canvas{position:absolute;inset:0;display:block;width:100%;height:100%;background:#000}
.ugc__canvas[hidden]{display:none}
/* chantier VIDÉO EN DIRECT (fin) */
.ugc__cap{position:absolute;left:10px;right:10px;bottom:68px;margin:0;text-align:center;font:800 17px/1.15 var(--ui);color:#FFFFFF;-webkit-text-stroke:4px #000;paint-order:stroke fill;text-shadow:0 2px 6px rgba(0,0,0,.85);pointer-events:none;white-space:pre-line}
.ugc__cap[hidden],.ugc__play[hidden],.ugc__sound[hidden]{display:none}
.ugc__sound{position:absolute;right:10px;bottom:14px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(12,12,12,.74);color:#FFFFFF;cursor:pointer}
.ugc__sound:focus-visible,.ugc__play:focus-visible{outline:3px solid #FFFFFF;outline-offset:2px;box-shadow:0 0 0 5px #0C0C0C}
.ugc__ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ugc__sound[aria-pressed="true"] .ugc__ico--off,.ugc__sound[aria-pressed="false"] .ugc__ico--on{display:none}
.ugc__play{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);min-height:48px;padding:14px 20px;border:0;border-radius:4px;background:var(--on);color:var(--drench);font:800 21px/1 var(--ui);letter-spacing:.01em;white-space:nowrap;cursor:pointer;box-shadow:0 10px 20px -12px rgba(0,0,0,.5)}
.ugc__bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.3)}
.ugc__bar i{display:block;height:100%;background:#FFFFFF;transform:scaleX(0);transform-origin:0 50%}
.ugc__plans{display:flex;gap:4px;margin:10px 0 0;padding:0;list-style:none}
.ugc__plans li{flex:1 1 0;min-width:0;padding:7px 4px;border-radius:3px;background:var(--t4);color:var(--on);text-align:center;font:700 14px/1.1 var(--ui);letter-spacing:.02em;transition:background .25s var(--ease-out), color .25s var(--ease-out)}
.ugc__plans li.is-on{background:var(--on);color:var(--drench)}
.chart{display:block;width:100%;max-width:420px;height:auto;overflow:visible}
.chart__grid line{stroke:currentColor;stroke-width:1;opacity:.28}
.chart__band{fill:currentColor;fill-opacity:.16}
.chart__line,.chart__fore{fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.chart__fore{stroke-dasharray:1 8}
.chart__labels text{fill:currentColor;font:700 11px/1 var(--ui);opacity:.92}
.chart__note{margin:8px 0 0;font:650 17px/1.3 var(--ui)}
.demo.is-anim .chart__line{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:1;transform:none;transition:stroke-dashoffset 1.6s var(--ease-out)}
.demo.is-anim .chart__line.on{stroke-dashoffset:0}
.vault{display:block;width:100%;max-width:420px;height:auto;overflow:visible}
.vault__wall{fill:none;stroke:currentColor;stroke-width:2.5;stroke-dasharray:7 6}
.vault__label{fill:currentColor;font:800 13px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase}
.vault__docs rect{fill:#FFFFFF;stroke:rgba(0,0,0,.18)}
.vault__chip{fill:#0C0C0C}
.vault__chiptext{fill:#FFFFFF;font:400 24px/1 var(--display);text-anchor:middle}
.vault__dot{fill:#FFFFFF}
.panel.is-playing .vault__dot{animation:shuttle calc(2.6s * var(--tempo)) var(--ease-out) infinite}
.panel.is-playing .vault__dot--2{animation-delay:calc(-1.3s * var(--tempo))}
@keyframes shuttle{50%{transform:translateX(72px)}}
.vault__out{stroke:currentColor;stroke-width:2.5;stroke-dasharray:4 5;opacity:.65}
.vault__stop{fill:none;stroke:#FFFFFF;stroke-width:4.5;stroke-linecap:round}
.quiz{max-width:380px}
.quiz__q{margin:0 0 12px;font:600 20px/1.3 var(--text)}
.quiz__row{display:flex;align-items:flex-end;gap:18px}
.quiz__a{flex:1;display:grid;gap:6px;margin:0;padding:0;list-style:none}
.quiz__step{margin:0;font:400 46px/1 var(--display);white-space:nowrap;font-variant-numeric:tabular-nums}
.quiz__a li{padding:9px 12px;border:1.5px solid rgba(255,255,255,.45);border-radius:6px;font:500 17px/1.2 var(--text)}
.quiz__a li.is-right{border-color:#FFFFFF;background:#FFFFFF;color:#0C0C0C;font-weight:650}
.demo.is-anim .quiz__a li.is-right{opacity:1;transform:none;border-color:rgba(255,255,255,.45);background:transparent;color:inherit;transition:background-color .4s, border-color .4s, color .4s}
.demo.is-anim .quiz__a li.is-right.on{border-color:#FFFFFF;background:#FFFFFF;color:#0C0C0C}
.quiz__fb{margin:12px 0 0;font:700 17px/1.3 var(--ui);color:#FFFFFF}

/* ---------- Méthode ---------- */
.method,.people,.faq,.request{padding:clamp(96px, 9vw, 150px) clamp(18px, 2.2vw, 34px) 0}
.sec-title{margin:0 0 18px;font:400 clamp(46px, 5.1vw, 78px)/.95 var(--display);letter-spacing:-.02em;text-wrap:balance}
.sec-intro{max-width:56ch;margin:0 0 clamp(32px, 3.4vw, 52px);font:400 clamp(18px, 1.35vw, 21px)/1.5 var(--text);color:var(--ink-2)}
.ticket{position:relative;padding:44px 44px 44px 108px;border-radius:24px;background:linear-gradient(rgb(237 234 227 / .7), rgb(237 234 227 / .7)), url("/assets/plates/ground-texture.webp") repeat, var(--slip);background-blend-mode:normal, multiply, normal;box-shadow:0 22px 44px -26px rgba(30,25,15,.45), 0 2px 4px rgba(30,25,15,.08)}
/* Texture du ticket : en couches de fond sur le ticket lui-même (rgb(237 234 227) = --slip). Même rendu que l'ancien ::before en
   mix-blend-mode multiply à 30 %, qui aplatissait la 3D du spectacle « escalier » : 0,7 × papier + 0,3 × (papier × texture). */
:root{--m3d-tempo:var(--tempo)}   /* tempo du moteur Motion3D (motion3d/) : le même que le reste du site */
/* Place de l'escalier (spectacle de la Méthode) : sur grand écran avec souris, là seulement où le spectacle peut jouer, de l'air
   au-dessus et au-dessous du ticket, pour que les marches, le pion, le sol et son reflet ne touchent jamais le texte voisin.
   Réglage : --esc-haut et --esc-bas (mesurés par work/methode/mesure-place.mjs, zéro contact avec le texte). */
@media (min-width: 1001px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){
  .js .method{--esc-haut:0px;--esc-bas:64px}
  .js .method .sec-intro{margin-bottom:calc(clamp(32px, 3.4vw, 52px) + var(--esc-haut))}
  .js .method .versus{position:relative;z-index:1;margin-top:calc(clamp(28px, 3vw, 44px) + var(--esc-bas))}   /* le reflet des chiffres, qui peut déborder, passe sous ce texte */
}
.ticket__rivet{position:absolute;left:34px;top:46px;width:46px;height:46px}
.ticket__steps{position:relative;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));margin:0;padding:0;list-style:none}
.ticket__steps li{padding:0 clamp(18px, 2vw, 32px);border-left:2px dashed #B7B2A8}
.ticket__steps li:first-child{padding-left:0;border-left:0}
.ticket__n{display:block;margin-bottom:16px;font:400 clamp(54px, 5vw, 76px)/.9 var(--display)}
.ticket__steps li:nth-child(1) .ticket__n{color:var(--vermillon)}
.ticket__steps li:nth-child(2) .ticket__n{color:#A37202}
.ticket__steps li:nth-child(3) .ticket__n{color:var(--outremer)}
.ticket__steps li:nth-child(4) .ticket__n{color:var(--emeraude)}
.ticket__steps h3{margin:0 0 10px;font:820 clamp(23px, 1.8vw, 27px)/1.08 var(--ui)}
.ticket__steps p{margin:0;font:400 18px/1.48 var(--text);color:var(--ink-2)}
.versus{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:clamp(24px, 3vw, 48px);margin-top:clamp(28px, 3vw, 44px)}
.versus p{margin:0;padding-top:16px;border-top:3px solid var(--ink);max-width:46ch;font:400 clamp(18px, 1.3vw, 20px)/1.5 var(--text);color:var(--ink-2)}
.versus strong{display:block;margin-bottom:8px;font:400 clamp(30px, 2.6vw, 40px)/1 var(--display);color:var(--ink)}

/* ---------- Pour qui ---------- */
.people__list{margin:0;padding:0;list-style:none;border-top:1.5px solid var(--ink)}
.people__list li{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr) auto;gap:clamp(20px, 3vw, 48px);align-items:center;padding:clamp(22px, 2.2vw, 34px) 0;border-bottom:1px solid #8C8983}
.people__list h3{margin:0;font:400 clamp(34px, 3.7vw, 58px)/1 var(--display);letter-spacing:-.01em}
.people__list p{margin:0;max-width:44ch;font:400 clamp(18px, 1.3vw, 20px)/1.45 var(--text);color:var(--ink-2)}
.minis{display:flex;align-items:flex-end;height:104px;padding:0 14px 0 24px}
.mini{position:relative;width:38px;height:100px;margin-left:-10px;border-radius:8px 8px 2px 2px;background:var(--hue);box-shadow:0 8px 14px -6px rgba(0,0,0,.35);transform-origin:50% 100%;transition:transform .5s var(--ease-out)}
.mini::before{content:"";position:absolute;inset:0 0 auto 0;height:30px;border-radius:8px 8px 0 0;background:var(--card)}
.mini span{position:absolute;left:50%;bottom:9px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font:800 11px/1 var(--ui);letter-spacing:.06em;color:var(--mini-on, #FFFFFF)}
.mini:nth-child(1){transform:rotate(-13deg)}
.mini:nth-child(3){transform:rotate(13deg)}
@media (hover: hover) and (pointer: fine){.people__list li:hover .mini:nth-child(1){transform:rotate(-24deg)}.people__list li:hover .mini:nth-child(3){transform:rotate(24deg)}.people__list li:hover .mini:nth-child(2){transform:translateY(-8px)}}

/* ---------- Questions ---------- */
.faq{display:grid;grid-template-columns:minmax(0, .85fr) minmax(0, 1.4fr);gap:clamp(28px, 4vw, 72px);align-items:start}
.faq .sec-title{position:sticky;top:96px}
.faq__list{border-top:1.5px solid var(--ink)}
.faq details{border-bottom:1px solid #8C8983}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;list-style:none;font:800 clamp(21px, 1.7vw, 26px)/1.2 var(--ui)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:22px;height:22px;background:linear-gradient(currentColor, currentColor) center/100% 3px no-repeat, linear-gradient(currentColor, currentColor) center/3px 100% no-repeat;transition:transform .35s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
@media (hover: hover) and (pointer: fine){.faq summary:hover{color:var(--outremer)}}
.faq details p{max-width:60ch;margin:0 0 26px;font:400 clamp(18px, 1.3vw, 20px)/1.55 var(--text);color:var(--ink-2)}
.faq details[open] p{animation:rise .45s var(--ease-out)}

/* ---------- Fiche de demande ---------- */
.order{position:relative;padding:46px 52px 48px 116px;border-radius:26px;background:var(--slip);box-shadow:0 26px 50px -28px rgba(30,25,15,.5), 0 2px 4px rgba(30,25,15,.08)}
.order::before{content:"";position:absolute;inset:0;border-radius:inherit;background:url("/assets/plates/ground-texture.webp") repeat;mix-blend-mode:multiply;opacity:.3;pointer-events:none}
.order>*{position:relative}
.order__rivet{position:absolute;left:36px;top:50px;width:48px;height:48px}
.order fieldset{min-width:0;margin:0;padding:0;border:0}
.order legend,.ofield>label{display:block;margin:0 0 10px;padding:0;font:820 19px/1.2 var(--ui)}
.order legend span,.ofield label span{font-weight:500;color:var(--ink-3)}
.order .order__picks{margin-bottom:34px}
.picks{display:flex;flex-wrap:wrap;gap:10px}
.pick{position:relative;display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 18px 0 12px;border:1.5px solid #C9C4BA;border-radius:8px;background:#F7F5F0;cursor:pointer;font:700 19px/1 var(--ui);transition:border-color .2s, box-shadow .2s, background-color .2s}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick__swatch{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:var(--hue);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.pick__swatch svg{width:17px;height:17px;fill:none;stroke:var(--mark, #FFFFFF);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.5);transition:opacity .2s, transform .3s var(--ease-out)}
.pick__code{color:var(--ink-3);font-variant-numeric:tabular-nums}
@media (hover: hover) and (pointer: fine){.pick:hover{border-color:#6E6C67}}
.pick:has(input:checked){border-color:var(--ink);background:#FFFFFF;box-shadow:inset 0 0 0 1.5px var(--ink)}
.pick:has(input:checked) .pick__swatch svg{opacity:1;transform:none}
.pick:has(input:checked) .pick__code{color:var(--ink)}
.pick:has(input:focus-visible){outline:3px solid var(--outremer);outline-offset:2px}
.order__grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:28px 36px}
.ofield--wide{grid-column:1 / -1}
.ofield input,.ofield textarea{display:block;width:100%;padding:9px 0;border:0;border-bottom:2px solid #5E5C57;border-radius:0;background:transparent;color:var(--ink);font:400 19px/1.4 var(--text)}
.ofield textarea{min-height:96px;resize:vertical}
.ofield input:focus,.ofield textarea:focus{outline:none;border-bottom-color:var(--outremer);box-shadow:0 2px 0 var(--outremer)}
.ofield input::placeholder,.ofield textarea::placeholder{color:var(--ink-4);opacity:1}
.ofield [aria-invalid="true"]{border-bottom-color:#B4200E}
.ofield__err{min-height:1.2em;margin:7px 0 0;font:700 15px/1.2 var(--ui);color:#B4200E}
.seg{display:flex;flex-wrap:wrap}
.seg legend{width:100%}
.seg label{position:relative;display:inline-flex}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-block;padding:13px 18px;border:1.5px solid #4A4844;font:650 18px/1 var(--ui);cursor:pointer;transition:background-color .2s, color .2s}
.seg label:first-of-type span{border-radius:7px 0 0 7px}
.seg label:last-of-type span{margin-left:-1.5px;border-radius:0 7px 7px 0}
.seg input:checked+span{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.seg input:focus-visible+span{outline:3px solid var(--outremer);outline-offset:2px}
.order__foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:38px}
.order__submit{height:62px;padding:0 36px;border:0;border-radius:4px;background:var(--cta);color:#FFF8F3;font:820 24px/1 var(--ui);letter-spacing:.01em;cursor:pointer;transition:background-color .2s, transform .2s var(--ease-out)}
@media (hover: hover) and (pointer: fine){.order__submit:hover{background:#C92A18;transform:translateY(-2px)}}
.order__submit:focus-visible,.submit:focus-visible,.cta-top:focus-visible{outline:3px solid var(--outremer);outline-offset:3px}
.order__note{max-width:48ch;margin:0;font:400 16px/1.45 var(--text);color:var(--ink-3)}
.order__done{position:absolute;inset:0;z-index:2;display:grid;align-content:center;scroll-margin-top:96px;justify-items:start;gap:14px;padding:46px 52px 48px 116px;border-radius:inherit;background:var(--slip)}
.order__done[hidden]{display:none}
.order__stamp{margin:0 0 6px;padding:6px 16px;border:3px solid var(--cta);color:var(--cta);font:400 46px/1 var(--display);text-transform:uppercase;transform:rotate(-3deg)}
.js .order__done:not([hidden]) .order__stamp{animation:stamp .5s var(--ease-out)}
.order__recap{max-width:60ch;margin:0;font:500 20px/1.5 var(--text)}
.order__demo{margin:0;font:600 16px/1.4 var(--ui);color:var(--ink-3)}
.order__again{margin-top:8px;padding:12px 18px;border:1.5px solid var(--ink);border-radius:4px;background:transparent;font:700 18px/1 var(--ui);cursor:pointer}
@media (hover: hover) and (pointer: fine){.order__again:hover{background:var(--ink);color:#FFFFFF}}

/* ---------- Pied de page ---------- */
.foot{display:grid;grid-template-columns:auto minmax(0, 1fr) auto;gap:14px 40px;align-items:baseline;margin-top:clamp(96px, 9vw, 150px);padding:56px clamp(18px, 2.2vw, 34px) 48px;border-top:1.5px solid var(--ink)}
.foot__mark{--fm:clamp(48px, 4.4vw, 68px);margin:0;font:400 var(--fm)/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.foot__mark .lame-e{display:inline-block;height:calc(var(--fm) * 1.074);vertical-align:calc(var(--fm) * -.1075);margin-right:calc(var(--fm) * .257)}
.foot__line{margin:0;font:400 20px/1.3 var(--text);color:var(--ink-2)}
.foot__nav{display:flex;flex-wrap:wrap;gap:8px 24px;font:700 18px/1 var(--ui)}
.foot__nav a{text-decoration:none}
@media (hover: hover) and (pointer: fine){.foot__nav a:hover{text-decoration:underline;text-underline-offset:.2em}}
.foot__todo{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px 28px;margin:22px 0 0;font:650 17px/1.3 var(--ui)}
.foot__todo em{font-style:normal;margin-left:4px;padding:3px 9px;border:1.5px dashed var(--ink-3);border-radius:4px;color:var(--ink-2)}
.foot__legal{grid-column:1 / -1;max-width:80ch;margin:18px 0 0;font:400 15px/1.5 var(--text);color:var(--ink-3)}
.foot__todo a{text-underline-offset:.2em;text-decoration-thickness:1.5px}
@media (hover: hover) and (pointer: fine){.foot__todo a:hover{text-decoration-thickness:3px}}
.envoi-actif [data-demo-seulement]{display:none}

@media (min-width: 1001px){
  .explorer{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50% + clamp(18px, 2.2vw, 34px))}
}

/* Défilement : l'éventail tourne lame par lame (grand écran) */
@media (min-width: 1001px) and (min-height: 780px){
  .forms.is-scrolly .scrolly{height:calc(8 * 64vh + 100vh)}
  .forms.is-scrolly .explorer{position:sticky;top:calc(62 * var(--u));height:calc(100vh - 62 * var(--u));margin-top:0;align-content:center;padding-block:clamp(24px, 3vh, 48px)}
  .forms.is-scrolly .spine{height:min(540px, calc(100vh - 62 * var(--u) - 120px))}
  .forms.is-scrolly .strip{height:calc(100% - 88px + var(--k, 0) * 5px)}
  .forms.is-scrolly .spine{--rivet-b:84px}
  .forms.is-scrolly .forms__head{padding-bottom:clamp(28px, 3vw, 48px)}
}

/* >>> A2 « Les huit formes en relief » (début) : lampe sur la grande lame, entrées en relief, caméra au défilement */
/* Inclinaison de repos de la grande lame (reprise des règles existantes) et pivot de l'entrée : le rivet */
.bigblade{--base:-3deg;--piv:49px}
@media (max-width: 1180px){.bigblade{--base:-1.5deg}}
@media (max-width: 720px){.bigblade{--base:0deg;--piv:0px}}

/* Entrée d'une forme (modes sans caméra) : la lame pivote depuis son rivet, environ -20° autour de l'axe vertical */
@keyframes blade-relief{from{transform:perspective(1800px) translateX(-36px) rotate(var(--base)) translate(var(--piv), calc(var(--bh, 340px) / -2)) rotateY(-20deg) translate(calc(var(--piv) * -1), calc(var(--bh, 340px) / 2));opacity:0}}
@keyframes blade-relief-back{from{transform:perspective(1800px) translateX(36px) rotate(var(--base)) translate(var(--piv), calc(var(--bh, 340px) / -2)) rotateY(20deg) translate(calc(var(--piv) * -1), calc(var(--bh, 340px) / 2));opacity:0}}
.panel.is-entering .bigblade{animation-name:blade-relief}
.panel.is-entering[data-dir="-1"] .bigblade{animation-name:blade-relief-back}

/* Pastilles de niveaux : elles se retournent comme des pastilles de nuancier, une après l'autre (50 ms), au plus 450 ms x tempo */
@keyframes pastille{from{transform:perspective(420px) rotateY(80deg)}}
.panel.is-flip{--fb:.12}
.panel.is-flip .levels i{animation:pastille calc(.25s * var(--tempo)) var(--ease-out) both;animation-delay:calc((var(--fb, 0) + var(--n, 0) * .05) * 1s * var(--tempo))}
.levels li:nth-child(2) i{--n:1}.levels li:nth-child(3) i{--n:2}.levels li:nth-child(4) i{--n:3}.levels li:nth-child(5) i{--n:4}

/* Étapes des démonstrations : elles arrivent depuis la profondeur (les formes SVG gardent leur petit glissé) */
.demo.is-anim :is(.bubble, .tasks li, .prompt, .quiz__fb)[data-step]{transform:perspective(900px) translateZ(-60px) rotateX(14deg);transition:opacity calc(.45s * var(--tempo)) cubic-bezier(.16, 1, .3, 1), transform calc(.45s * var(--tempo)) cubic-bezier(.16, 1, .3, 1)}
.demo.is-anim :is(.bubble, .tasks li, .prompt, .quiz__fb)[data-step].on{transform:none}

/* Lampe (souris seulement, la classe is-lit n'existe que pendant l'inclinaison) : profondeur, ombre et tache de lumière */
.bigblade.is-lit{will-change:transform;transform-style:preserve-3d;box-shadow:calc(var(--sx, 0) * 1px) calc(40px + var(--sy, 0) * 1px) 60px -26px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.18);transform:perspective(1800px) rotate(var(--base)) translate(calc(var(--bw, 0px) / 2), calc(var(--bh, 0px) / -2)) rotateX(var(--ax, 0deg)) rotateY(var(--ay, 0deg)) translate(calc(var(--bw, 0px) / -2), calc(var(--bh, 0px) / 2))}
.bigblade.is-lit::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-color:rgb(var(--lc, 255 255 255) / var(--la, 0));background-image:radial-gradient(ellipse 55% 70% at var(--lx, 50%) var(--ly, 50%), rgb(255 255 255 / calc(var(--lift, 0) * .14)), rgb(255 255 255 / 0) 100%);mix-blend-mode:soft-light}
.bigblade.is-lit .bigblade__field{transform-style:preserve-3d}
.bigblade.is-lit .bigblade__rivet{transform:translateY(-50%) translateZ(calc(var(--lift, 0) * 2px));box-shadow:var(--rivet-rondelle), calc(var(--sx, 0) * .06px) calc(1px + var(--sy, 0) * .06px) 1px rgb(0 0 0 / .34), calc(var(--sx, 0) * .12px) calc(3px + var(--sy, 0) * .12px + var(--lift, 0) * 2px) calc(6px + var(--lift, 0) * 4px) -1px rgb(0 0 0 / .3)}
.bigblade.is-lit .bigblade__rivet::after{background-position:calc(24% - var(--sx, 0) * 1%) calc(20% - var(--sy, 0) * 1%), 0 0, 0 0}   /* le point chaud du rivet suit la lampe */
.bigblade.is-lit .bigblade__field > .demo,.bigblade.is-lit .bigblade__field > .levels,.bigblade.is-lit .demo--video > .demo__tag,.bigblade.is-lit .demo--video > .ugc{transform:translateZ(calc(var(--lift, 0) * 10px))}
.bigblade.is-lit .bigblade__tip{transform:translateZ(calc(var(--lift, 0) * 9px));box-shadow:calc(var(--sx, 0) * .2px) calc(var(--lift, 0) * 3px + var(--sy, 0) * .2px) calc(var(--lift, 0) * 8px) rgb(30 25 15 / calc(var(--lift, 0) * .32))}

/* Caméra au défilement : les huit lames dans un espace 3D, une seule ou deux affichées */
@media (min-width: 1001px) and (min-height: 780px){
  .forms.is-scrolly .panels{height:var(--stage-h, auto);perspective:1800px;transform-style:preserve-3d}
  .forms.is-scrolly .panel{position:absolute;left:0;right:0;top:50%;translate:0 -50%;transform-style:preserve-3d}
  .forms.is-scrolly .panels{pointer-events:none}
  .forms.is-scrolly .panel{pointer-events:auto}
  .forms.is-scrolly .panel.is-voisine{pointer-events:none}
  .forms.is-scrolly .panels .panel[hidden].is-voisine{display:grid}
  .forms.is-scrolly .panel.is-entering .bigblade,.forms.is-scrolly .panel.is-entering .uses{animation:none}
  .forms.is-scrolly .panel.is-flip{--fb:0}
  .forms.is-scrolly .spine{z-index:3}
  .forms.is-scrolly .explorer{transition:none}
  .forms.is-scrolly .bigblade.is-lit{transform:rotate(var(--base)) translate(calc(var(--bw, 0px) / 2), calc(var(--bh, 0px) / -2)) rotateX(var(--ax, 0deg)) rotateY(var(--ay, 0deg)) translate(calc(var(--bw, 0px) / -2), calc(var(--bh, 0px) / 2))}
  .forms.is-scrolly.is-mesure .panels{height:auto}
  .forms.is-scrolly.is-mesure .panel{position:relative;top:auto;left:auto;right:auto;translate:none;transform:none!important;opacity:1!important}
}
/* Mode défilement entre 1001 et 1180 px : la bande des huit lames est une barre horizontale (comme hors défilement) ; sans ces règles elle gardait sa hauteur verticale et poussait la lame hors de l'explorateur */
@media (min-width: 1001px) and (max-width: 1180px) and (min-height: 780px){
  .forms.is-scrolly .spine{height:auto}
  .forms.is-scrolly .strip{height:50px}
  .forms.is-scrolly .explorer{gap:14px;padding-block:clamp(14px, 2vh, 24px)}
  .forms.is-scrolly .spine{padding-block:6px 4px}
}
.masthead.is-fouet{transition:none}
@media (prefers-reduced-motion: reduce){
  .panel.is-flip .levels i{animation:none!important}
}
/* <<< A2 (fin) */


/* ---------- Explorateur : écrans moyens ---------- */
@media (max-width: 1180px){
  .explorer{grid-template-columns:minmax(0, 1fr);gap:26px}
  .spine{flex-direction:row;align-items:stretch;height:auto;gap:0;padding:10px 0 8px;overflow-x:auto;scrollbar-width:none;filter:none}
  .spine::-webkit-scrollbar{display:none}
  .strip{flex:0 0 auto;height:50px;padding:0 16px 0 26px;border-radius:0;box-shadow:inset -1px 0 0 rgba(0,0,0,.26)}
  .strip:first-of-type{border-radius:9px 0 0 9px}
  .strip:last-of-type{border-radius:0 9px 9px 0}
  .spine__rivet{display:none}
  .strip::before{inset:0 auto 0 0;width:12px;height:auto;border-radius:0}
  .strip:first-of-type::before{border-radius:9px 0 0 9px}
  .strip span{position:static;transform:none;writing-mode:horizontal-tb;font-size:19px}
  @media (hover: hover) and (pointer: fine){.strip:hover{transform:translateY(-3px)}}
  .strip[aria-selected="true"]{transform:translateY(-6px);box-shadow:0 0 0 3px var(--on)}
  .bigblade{transform:rotate(-1.5deg)}
  .bigblade__field{grid-template-columns:minmax(0, 1fr)}
}

/* ---------- Mobile et tablette : composition verticale ---------- */
@media (max-width: 1000px){
  .stage{width:100%}
  .hero{display:flex;flex-direction:column;aspect-ratio:auto;overflow:visible}
  .masthead{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;height:auto;padding:10px 16px;background:var(--ground) url("/assets/plates/ground-texture.webp") repeat}
  .masthead.is-stuck{position:sticky;left:auto;width:auto;transform:none;animation:none}
  .masthead .t{position:static}
  .wordmark{font-size:28px!important;height:30px;gap:7px}
  .wordmark__nom{top:0}
  .mainnav{display:none}
  .cta-top{position:static;width:auto;height:42px;padding:3px 16px 0;font-size:19px;border-radius:4px}
  .headline{position:static;padding:22px 16px 0;font-size:min(16.2vw, 128px);line-height:.9;letter-spacing:-.02em;white-space:normal}
  .fan{position:relative;inset:auto;height:calc(700 * var(--u));margin-top:4px;overflow:hidden;--u:calc(min(100vw, 860px) / 1030);--ox:calc(768 * var(--u) - 50vw);--oy:calc(196 * var(--u));--code-fs:max(calc(27 * var(--u)), 13.5px);--name-fs:max(calc(34 * var(--u)), 17px)}
  .blade__note{display:none}
  .blade--01{--band:140}
  .slip{position:relative;left:auto;top:auto;width:auto;height:auto;margin:calc(-178 * min(100vw, 860px) / 1030) 12px 0;padding:22px 18px 22px;display:grid;gap:16px;border-radius:18px}
  .slip>*{position:static}
  .slip__rivet{position:absolute;right:15px;top:18px;left:auto;width:32px;height:32px}
  .slip__title{font-size:21px}
  .field{width:100%;height:auto;padding-bottom:7px;font-size:19px}
  .field--need{min-height:56px;font-size:19px;letter-spacing:0;white-space:normal}
  .field--email{font-size:19px;letter-spacing:0}
  .choice{display:flex;gap:10px}
  .chip{width:auto!important;height:46px;padding:0 16px 0 14px;font-size:19px;gap:10px}
  .chip input{width:20px;height:20px}
  .submit{width:100%;height:54px;font-size:23px}
  .slip__offer{white-space:normal;font-size:17px;line-height:1.35}
  .slip__error{font-size:17px}
  .slip__error:empty{display:none}
  .slip__done{position:absolute;padding:22px 18px;gap:10px}
  .slip__stamp{font-size:30px}
  .slip__recap{font-size:18px}
  .slip__demo{font-size:16px}
  .forms__head{padding-top:0}
  .forms__title{position:static;padding:72px 16px 0;font-size:min(12.4vw, 96px);line-height:.95;letter-spacing:-.02em;white-space:normal}
  .forms__intro{margin:14px 16px 0;font-size:18px}
  .explorer{padding:26px 0 44px}
  .spine{padding:0 16px 6px}
  .panel{gap:26px;padding:0 16px}
  .bigblade{grid-template-columns:minmax(0, 1fr);min-height:0;margin-top:6px;border-radius:18px;transform:none}
  .bigblade__tip{order:-1;padding:20px 20px 22px;border-radius:18px 18px 0 0}
  .bigblade__name{font-size:46px}
  .bigblade__rivet{display:none}
  .bigblade__field{padding:22px 18px 26px}
  .levels ol{grid-template-columns:minmax(0, 1fr);gap:8px}
  .levels li{display:flex;align-items:center;gap:12px;font-size:16px}
  .levels i{flex:none;width:40px;height:40px;aspect-ratio:auto;margin:0;border-radius:7px}
  .uses{grid-template-columns:minmax(0, 1fr);gap:16px;padding-left:0}
  .uses__cta{justify-self:start}
  .method,.people,.faq,.request{padding:84px 16px 0}
  .ticket{padding:26px 20px}
  .ticket__rivet{display:none}
  .ticket__steps{grid-template-columns:minmax(0, 1fr)}
  .ticket__steps li{padding:22px 0;border-left:0;border-top:2px dashed #B7B2A8}
  .ticket__steps li:first-child{padding-top:0;border-top:0}
  .ticket__n{margin-bottom:10px;font-size:52px}
  .versus{grid-template-columns:minmax(0, 1fr);gap:26px}
  .people__list li{grid-template-columns:minmax(0, 1fr) auto;gap:10px 14px}
  .people__list p{grid-column:1 / -1;grid-row:2}
  .minis{height:84px;padding-right:6px}
  .mini{width:30px;height:80px}
  .faq{grid-template-columns:minmax(0, 1fr);gap:20px}
  .faq .sec-title{position:static}
  .order{padding:26px 18px 30px}
  .order__rivet{display:none}
  .order__grid{grid-template-columns:minmax(0, 1fr);gap:22px}
  .pick{height:50px;font-size:18px}
  .order__done{padding:26px 18px}
  .order__stamp{font-size:36px}
  .foot{grid-template-columns:minmax(0, 1fr);padding:44px 16px 40px}
  .foot__nav{gap:0 24px}
  .foot__nav a,.foot__todo a{display:inline-flex;align-items:center;min-height:44px}
  .foot__todo{align-items:center;gap:0 28px}
}

/* ---------- Téléphone en paysage : le titre cède de la place à l'éventail ---------- */
@media (max-width: 1000px) and (orientation: landscape) and (max-height: 500px){
  .masthead,.masthead.is-stuck{position:relative;padding-block:1px}
  .headline{padding-top:10px;font-size:min(16.2vw, 128px, 21vh)}
}

/* ---------- Animations réduites ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .masthead .wordmark .lame-e,.masthead .wordmark__nom>span,.js .fan>.blade,.js .slip,.panel.is-entering .bigblade,.panel.is-entering .uses,.masthead.is-stuck,.faq details[open] p,.js .slip__done:not([hidden]) .slip__stamp,.js .order__done:not([hidden]) .order__stamp{animation:none!important}
  .blade,.strip,.mini,.uses__cta,.order__submit{transition:none!important}
  .panel.is-playing .wave i,.panel.is-playing .vault__dot,.tasks__wait.on i{animation:none!important}
}
.blade--01 .blade__code{font-size:var(--code-fs, calc(29 * var(--u)))}
.blade--08 .blade__code{font-size:var(--code-fs, calc(23 * var(--u)))}
.blade--01 .blade__name{font-size:var(--name-fs, calc(36 * var(--u)))}
.blade--08 .blade__name{font-size:var(--name-fs, calc(29 * var(--u)))}
.blade--01 .blade__note{margin-top:calc(6 * var(--u));font-size:calc(17 * var(--u))}
.blade--08 .blade__note{margin-top:calc(5 * var(--u));font-size:calc(13.6 * var(--u))}

/* En-tête noyé dans la teinte de la lame choisie */
.masthead{transition:background-color .6s var(--ease-out), border-color .4s var(--ease-out)}
.wordmark,.navlink{transition:color .4s var(--ease-out)}
.lame-e__fond,.lame-e__marque,.lame-e__rivet{transition:fill .4s var(--ease-out)}
.masthead.is-drenched,.masthead.is-stuck.is-drenched{background:var(--m-drench, var(--ground));border-bottom-color:color-mix(in srgb, var(--m-on, #FFFFFF) 32%, transparent);box-shadow:none}
.masthead.is-drenched::before{content:"";position:absolute;inset:0;background:url("/assets/plates/blade-grain.webp") repeat;background-size:380px auto;mix-blend-mode:soft-light;opacity:.85;pointer-events:none}
.masthead.is-drenched .wordmark,.masthead.is-drenched .navlink{color:var(--m-on, #FFFFFF)}
.masthead.is-drenched .lame-e{--lame-fond:var(--m-on, #FFFFFF);--lame-marque:transparent;--lame-rivet:var(--m-on, #FFFFFF)}
.masthead.is-drenched .cta-top{background:#FFFFFF;color:#0C0C0C}
@media (hover: hover) and (pointer: fine){.masthead.is-drenched .cta-top:hover{background:#F0EEE8}}
@media (prefers-reduced-motion: reduce){.masthead,.wordmark,.navlink,.lame-e__fond,.lame-e__marque,.lame-e__rivet{transition:none}}
/* === Envoi des formulaires === */
/* Pendant l'envoi : bouton en encre adoucie, avec un trait crème qui avance le long du bas */
.submit:disabled,.order__submit:disabled{background-color:#3B3A37;cursor:progress;transform:none}
.submit:disabled:hover,.order__submit:disabled:hover{background-color:#3B3A37;transform:none}
.submit[aria-busy="true"],.order__submit[aria-busy="true"]{background-image:linear-gradient(#FFF8F3,#FFF8F3);background-repeat:no-repeat;background-size:34% 3px;background-position:-40% 100%;animation:envoi-trait 1.3s var(--ease-out) infinite}
@keyframes envoi-trait{to{background-position:140% 100%}}
/* Message d'échec de la lame blanche (en haut à droite) et de la fiche (au-dessus du bouton) */
.slip__error{max-width:calc(640 * var(--u));text-align:right;overflow-wrap:anywhere}
.order__send-error{margin:28px 0 0;max-width:62ch;font:700 19px/1.35 var(--ui);color:#B4200E;overflow-wrap:anywhere}
.order__send-error[hidden]{display:none}
.order__send-error:not([hidden])+.order__foot{margin-top:20px}
.ofield__err{overflow-wrap:anywhere}
#o-nom-err:empty,#o-tel-err:empty{display:none}
/* Textes très longs ou sans espace : les récapitulatifs ne débordent pas */
.order__recap,.order__demo,.slip__demo,.slip__recap{overflow-wrap:anywhere}
.slip__recap.is-long{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
@media (max-width: 1000px){
  .slip__error{max-width:none;text-align:left}
  .slip__error.is-envoi{line-height:1.25}
  .slip__recap.is-long{-webkit-line-clamp:4;line-clamp:4}
}
@media (prefers-reduced-motion: reduce){
  .submit[aria-busy="true"],.order__submit[aria-busy="true"]{animation:none;background-position:50% 100%}
}
/* === fin envoi === */

/* Lecteur vidéo : empilé sous 721 px (étiquette, vidéo, niveaux) ; le bouton son est retiré quand data-son="non" ; le calque de sous-titres n'existe que si data-soustitres="oui". */
@media (max-width: 720px){
  .bigblade__field:has(.demo--video){--vw:150px;grid-template-columns:var(--vw) minmax(0, 1fr);grid-template-rows:auto 1fr;column-gap:14px;padding-block:22px 26px}
  .demo--video .demo__tag{grid-column:1 / -1;grid-row:1}
  .bigblade__field:has(.demo--video) .levels{grid-column:2;grid-row:2}
  .ugc{grid-column:1;grid-row:2}
  .ugc__cap{font-size:15px;bottom:60px}
  .ugc__plans li{font-size:12px;padding:6px 2px}
}
.demo--video[data-son="non"] .ugc__sound{display:none}
.demo--video[data-soustitres="non"] .ugc__cap{display:none}
@media (prefers-reduced-motion: reduce){.ugc__plans li{transition:none}}


.bigblade__field:has(.demo--video) .levels ol{grid-template-columns:minmax(0, 1fr);gap:8px}
.bigblade__field:has(.demo--video) .levels li{display:flex;align-items:center;gap:12px;font-size:16px}
.bigblade__field:has(.demo--video) .levels i{flex:none;width:36px;height:36px;aspect-ratio:auto;margin:0;border-radius:7px}

/* Verre dépoli — chantier V (début) */
/* Deux endroits seulement : la lame blanche (elle laisse deviner le bas des lames de l'éventail) et l'en-tête collé (il laisse deviner la page qui défile). Sans backdrop-filter : les fonds pleins d'avant. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .slip{--verre:78%;--verre-flou:22px;background:color-mix(in srgb, var(--slip) var(--verre), transparent);-webkit-backdrop-filter:blur(var(--verre-flou)) saturate(1.6);backdrop-filter:blur(var(--verre-flou)) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 0 0 1px rgba(255,255,255,.35), 0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(30,25,15,.16), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(30,25,15,.10)}
  .slip__done{background:transparent}
  /* Lisibilité AA sur le pire fond : textes secondaires de la lame un cran plus encrés, rouges du message et du tampon un cran plus profonds */
  .slip .field::placeholder{color:#4F4D49}
  .slip__demo{color:var(--ink-2)}
  .slip__error{color:#961A0A}
  .slip__stamp{color:#C42A17;border-color:#C42A17}
  .slip:has(.slip__done:not([hidden])) > :not(.slip__done){visibility:hidden}
  .masthead.is-stuck{--verre:72%;--verre-flou:18px;background:color-mix(in srgb, var(--ground) var(--verre), transparent);-webkit-backdrop-filter:blur(var(--verre-flou)) saturate(1.5);backdrop-filter:blur(var(--verre-flou)) saturate(1.5);border-bottom-color:rgba(255,255,255,.6)}
  .masthead.is-stuck::before{content:"";position:absolute;inset:0;background:url("/assets/plates/ground-texture.webp") repeat;mix-blend-mode:multiply;opacity:.3;pointer-events:none}
  /* Teinté : le fond entrevu est assombri (brightness) pour que le texte blanc tienne même sur le contenu clair qui passe dessous */
  .masthead.is-drenched,.masthead.is-stuck.is-drenched{--verre:80%;background:color-mix(in srgb, var(--m-drench, var(--ground)) var(--verre), transparent);-webkit-backdrop-filter:blur(var(--verre-flou, 18px)) saturate(1.5) brightness(.35);backdrop-filter:blur(var(--verre-flou, 18px)) saturate(1.5) brightness(.35)}
  .masthead.is-drenched::before{background:url("/assets/plates/blade-grain.webp") repeat;background-size:380px auto;mix-blend-mode:soft-light;opacity:.4}
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  @media (max-width: 1000px){
    .masthead{--verre:72%;--verre-flou:18px;background:color-mix(in srgb, var(--ground) var(--verre), transparent);-webkit-backdrop-filter:blur(var(--verre-flou)) saturate(1.5);backdrop-filter:blur(var(--verre-flou)) saturate(1.5);border-bottom-color:rgba(255,255,255,.6)}
    .masthead::before{content:"";position:absolute;inset:0;background:url("/assets/plates/ground-texture.webp") repeat;mix-blend-mode:multiply;opacity:.3;pointer-events:none}
    .masthead.is-drenched,.masthead.is-stuck.is-drenched{--verre:80%;background:color-mix(in srgb, var(--m-drench, var(--ground)) var(--verre), transparent);-webkit-backdrop-filter:blur(var(--verre-flou)) saturate(1.5) brightness(.35);backdrop-filter:blur(var(--verre-flou)) saturate(1.5) brightness(.35)}
    .masthead.is-drenched::before{background:url("/assets/plates/blade-grain.webp") repeat;background-size:380px auto;mix-blend-mode:soft-light;opacity:.4}
    .slip{--verre-flou:16px}
  }
}
/* Verre dépoli — chantier V (fin) */

/* ===== Lames plantées au repos : bloc « Une teinte pour chacun » (20/10/2026) =====
   Seulement là où le tour de la roue joue (même condition que data-m3d-media dans index.html) : grand écran, souris, mouvement autorisé.
   Chaque mini-lame est plus longue : sa partie visible (38 x 100, inchangée) pose son bas sur le trait sous la ligne ; sa partie cachée
   (nuances de la teinte, ::after) est plantée sous le trait, coupée net par un clip statique de span.minis (jamais animé : les vraies lames
   ne bougent donc que dans le plan de la page). La hauteur des lignes ne change pas : la marge basse négative reprend le padding bas du li. */
@media (min-width: 1001px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){
  .people__list{--pied:clamp(22px, 2.2vw, 34px)}
  .minis{align-self:end;height:calc(104px + var(--pied));margin-bottom:calc(-1 * var(--pied));clip-path:inset(-420px -140px 0 -140px)}
  .mini{box-shadow:none}
  /* la partie cachée chevauche l'encre de 1 px : sans ce chevauchement, les deux bords adoucis laissent voir un filet clair du fond */
  .mini::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:101px;border-radius:0 0 2px 2px;
    background:linear-gradient(to bottom,
      color-mix(in srgb, var(--hue) 85%, #1A1208) 0 25.5px, var(--card) 25.5px 27px,
      color-mix(in srgb, var(--hue) 70%, #1A1208) 27px 51.5px, var(--card) 51.5px 53px,
      color-mix(in srgb, var(--hue) 55%, #1A1208) 53px 77px, var(--card) 77px 78.5px,
      color-mix(in srgb, var(--hue) 40%, #1A1208) 78.5px 101px)}
}
/* ===== Lames plantées au repos (fin) ===== */


/* ===== Retouches du 20/10/2026 : lames de l'éventail toutes cliquables, en-tête d'un bord à l'autre ===== */
/* Éventail en relief : relief.js place les lames EL-05 à EL-08 derrière le plan du cadre de l'éventail. Ce cadre transparent laisse passer la souris ; seules les lames la reçoivent. */
.hero.is-relief .fan{pointer-events:none}
.hero.is-relief .fan>.blade{pointer-events:auto}
/* Écran plus large que la plaque (169,2 % de la hauteur) : la barre collée couvre toute la fenêtre, avec 2 px de plus de chaque côté pour sortir de l'écran le liseré sombre du verre teinté.
   Le logo, les liens et le bouton restent dans la colonne de la plaque. En haut de page, le filet de l'en-tête se prolonge jusqu'aux bords. */
@media (min-width: 1001px){
  .masthead.is-stuck{width:calc(100% + 4px)}
  .masthead.is-stuck .t,.masthead.is-stuck .cta-top{margin-left:calc((100% - min(100% - 4px, 169.2svh)) / 2)}
  .stage:has(> .hero > .masthead)::before{content:"";position:absolute;left:0;right:0;top:calc(62 * 100cqw / 1536 - 1px);height:1px;background:#747371;pointer-events:none}
}
/* ===== Retouches du 20/10/2026 (fin) ===== */

/* « Questions au comptoir » de nuit, avec son fond animé en 3D (fond F « Autoportrait » : questions3d.js et assets/3d/fond-questions.js).
   La bande de nuit va d'un bord à l'autre de l'écran, comme la section des formes ; sans 3D (économiseur de données, WebGL absent),
   elle reste, avec le texte en clair. La toile apparaît en fondu quand tout est prêt. */
.faq.fq-section{position:relative;isolation:isolate;margin-top:clamp(72px, 7vw, 120px);margin-bottom:72px;padding-bottom:clamp(96px, 9vw, 150px);background-color:#0C0B0B;color:#F3F1EC}
/* margin-bottom : 72 px de papier sous la nuit (la marge de défilement des sections) : un saut vers #demande montre le papier sous l'en-tête, comme avant */
.fq-fond{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fq-toile{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .9s var(--ease-out)}
.fq-toile.is-pret{opacity:1}
/* Image fixe de la pose : elle tient la bande pendant que la 3D se prépare, puis s'efface sous la toile. */
.fq-pose{position:absolute;inset:0;display:block;pointer-events:none}
.fq-pose__image{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.fq-section>.sec-title{z-index:1}
.fq-section>.faq__list{position:relative;z-index:1;border-top-color:rgb(243 241 236 / .78)}
.fq-section details{border-bottom-color:rgb(243 241 236 / .26)}
.fq-section details p{color:rgb(243 241 236 / .88)}
.fq-section :focus-visible{outline-color:#F2B707}
@media (hover: hover) and (pointer: fine){.fq-section summary:hover{color:#F2B707}}
@media (min-width: 1001px){.faq.fq-section{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50% + clamp(18px, 2.2vw, 34px))}}
/* Téléphone : le titre reste en position normale, mais positionné pour passer devant la 3D (sans le décalage du titre collant) */
@media (max-width: 1000px){.fq-section>.sec-title{position:relative;top:0}}
@media (prefers-reduced-motion: reduce){.fq-toile{transition:none}}