@font-face{font-family:"Bodoni Moda";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/bodoni-moda-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/bodoni-moda-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-weight:500;font-style:italic;font-display:swap;src:url(../fonts/bodoni-moda-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-weight:400;font-display:swap;src:url(../fonts/manrope-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-weight:600;font-display:swap;src:url(../fonts/manrope-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Allura";font-weight:400;font-display:swap;src:url(../fonts/allura-latin-400-normal.woff2) format("woff2")}

:root{
  --ink:#1A1A1A; --ink-2:#232120; --ivory:#F6F4EF; --white:#fff;
  --bord:#5A0F23; --bord-soft:#8C2E45; --forest:#123A32; --brass:#C2A16B;
  --mute-d:rgba(246,244,239,.72); --mute-l:#5C5651;
  --titre:"Bodoni Moda",Didot,"Times New Roman",serif;
  --texte:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --script:"Allura",cursive;
  --bandeau:0px; --g:clamp(16px,5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--ivory);font:400 16px/1.65 var(--texte);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* bandeau d'aperçu */
.tao-preview{position:relative;z-index:60;background:#fff;color:#111;font:500 13px/1.4 var(--texte);text-align:center;padding:9px 16px}
.tao-preview b{font-weight:600}
.tao-preview a{text-decoration:underline;margin-left:6px}

/* navigation */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:20px;padding:14px var(--g);transition:background .4s,padding .4s,top .2s}
.nav.solid{background:rgba(26,26,26,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding-top:10px;padding-bottom:10px}
.nav .logo{display:block;height:38px;width:auto;flex:none}
.nav .logo img{height:100%;width:auto}
.nav ul{display:none;list-style:none;gap:28px;margin-left:auto;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.nav ul a{text-decoration:none;opacity:.8;transition:opacity .2s}
.nav ul a:hover{opacity:1}
.lang{margin-left:auto;display:flex;border:1px solid rgba(246,244,239,.35);border-radius:99px;font-size:12px;letter-spacing:.12em}
.lang button{min-width:44px;min-height:36px;border-radius:99px;opacity:.7}
.lang button[aria-pressed=true]{background:var(--ivory);color:var(--ink);opacity:1}
.nav .cta-nav{display:none}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:99px;font:600 15px/1 var(--texte);letter-spacing:.02em;text-decoration:none;transition:transform .25s,background .25s,color .25s}
.btn:hover{transform:translateY(-2px)}
.btn-plein{background:var(--ivory);color:var(--ink)}
.btn-plein:hover{background:#fff}
.btn-trait{border:1px solid rgba(246,244,239,.55);color:var(--ivory)}
.btn-trait:hover{background:rgba(246,244,239,.08)}
.btn-bord{background:var(--bord);color:#fff}
.btn-bord:hover{background:var(--bord-soft)}
.btn svg{width:18px;height:18px;flex:none}

/* le fil : une ligne qui ne s'interrompt pas */
main{position:relative}
#fil{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:0;overflow:visible}
#fil path{fill:none;stroke:var(--brass);stroke-width:1.2;opacity:.6}
.wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:0 var(--g)}
.kicker{display:flex;align-items:center;gap:14px;font:600 12px/1 var(--texte);letter-spacing:.24em;text-transform:uppercase;margin-bottom:22px}
.kicker::before{content:"";width:34px;height:2px;background:currentColor}
h1,h2,h3{font-family:var(--titre);font-weight:500;line-height:1.06;letter-spacing:-.01em}
h2{font-size:clamp(36px,6.4vw,76px)}
.lead{font-size:clamp(17px,1.6vw,20px);max-width:36em}

/* hero : la couverture de la Maison, plein cadre */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:calc(96px + var(--bandeau)) 0 calc(40px + env(safe-area-inset-bottom));overflow:hidden;background:#171312}
.hero-photo{position:absolute;left:0;right:0;top:0;height:74svh;z-index:0;overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;animation:approche 18s cubic-bezier(.2,.6,.2,1) both}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,19,18,.5) 0%,rgba(23,19,18,0) 22%,rgba(23,19,18,0) 52%,#171312 98%)}
@keyframes approche{from{transform:scale(1.14)}to{transform:scale(1.02)}}
.hero .wrap{width:100%}
.hero .kicker{color:var(--brass)}
.hero h1{font-size:clamp(46px,12.4vw,120px);font-weight:500;line-height:1;max-width:9.5em}
.hero h1 em{font-style:italic}
.hero h1 .ligne{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ligne>span{display:block;animation:leve 1.4s cubic-bezier(.2,.7,.1,1) both}
.hero h1 .ligne:nth-child(2)>span{animation-delay:.18s}
@keyframes leve{from{transform:translateY(105%)}}
.hero .kicker,.hero .lead,.hero .actions{animation:monte 1.2s .6s both}
.hero .lead{animation-delay:.9s}.hero .actions{animation-delay:1.1s}
.tenue{display:block;height:3px;width:min(200px,42vw);background:var(--ivory);margin:22px 0 20px;transform-origin:left;animation:tenir 2.6s cubic-bezier(.2,.7,.1,1) .7s both}
@keyframes tenir{from{transform:scaleX(0)}}
.hero .lead{color:var(--mute-d);max-width:30em}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.defile{display:none}

/* manifeste */
.ivoire{background:var(--ivory);color:var(--ink)}
.manifeste{padding:clamp(96px,14vw,180px) 0}
.manifeste .kicker{color:var(--bord)}
.definition{font-family:var(--titre);font-size:clamp(34px,6vw,72px);line-height:1.12;max-width:15em}
.definition i{font-style:italic;color:var(--bord)}
.definition .phon{font:400 .4em/1 var(--texte);letter-spacing:.06em;color:var(--mute-l);vertical-align:middle;white-space:nowrap}
.manifeste .lead{margin-top:36px;color:#3A3532}
.trio{display:grid;gap:1px;background:rgba(26,26,26,.14);margin-top:64px;border:1px solid rgba(26,26,26,.14)}
.trio div{background:var(--ivory);padding:26px 24px}
.trio b{display:block;font:500 28px/1 var(--titre);margin-bottom:8px}
.trio span{color:var(--mute-l);font-size:15px}

/* compositeur */
.compo{padding:clamp(96px,13vw,170px) 0;background:radial-gradient(120% 80% at 50% 0%,#2A2321 0%,var(--ink) 60%)}
.vers{font-family:var(--titre);font-size:clamp(34px,6.2vw,74px);line-height:1.1}
.vers span{display:block}
.vers span:nth-child(2){padding-left:.6em}
.vers span:nth-child(3){padding-left:1.2em;font-style:italic;color:var(--brass)}
.compo .lead{color:var(--mute-d);margin-top:28px}
.studio{margin-top:56px;display:grid;gap:28px}
.scene{position:relative;border:1px solid rgba(246,244,239,.16);border-radius:28px;padding:28px 20px 24px;overflow:hidden;background:rgba(0,0,0,.18)}
.sillage{position:absolute;inset:-20%;z-index:0;filter:blur(46px);opacity:.9;pointer-events:none}
.sillage i{position:absolute;width:46%;aspect-ratio:1;border-radius:50%;opacity:0;transform:scale(.6);transition:opacity 1.2s,transform 1.6s}
.sillage i.on{opacity:.55;transform:scale(1)}
.portee{position:relative;z-index:1;display:block;width:100%;height:auto;max-height:230px;margin:0 auto}
.portee line.l{stroke:rgba(246,244,239,.38);stroke-width:1.5}
.portee ellipse{fill:var(--ivory);transition:opacity .5s,transform .5s;transform-box:fill-box;transform-origin:center}
.portee .tbar{stroke:var(--ivory);stroke-width:5;stroke-linecap:round;transform-box:fill-box;transform-origin:center;transform:scaleX(0);transition:transform .6s}
.scene.tenu .portee .tbar{transform:scaleX(1)}
.lecture{position:relative;z-index:1;text-align:center;margin-top:10px;min-height:118px}
.lecture h3{font-size:clamp(28px,4.5vw,40px)}
.lecture p{color:var(--mute-d);margin-top:8px;font-size:16px;max-width:30em;margin-left:auto;margin-right:auto}
.dyn{position:relative;z-index:1;display:flex;justify-content:space-between;max-width:420px;margin:20px auto 0;font:italic 500 18px/1 var(--titre);color:rgba(246,244,239,.35)}
.dyn span{transition:color .3s,transform .3s}
.dyn span.on{color:var(--ivory);transform:translateY(-3px)}
.jauge{position:relative;z-index:1;height:2px;max-width:420px;margin:12px auto 0;background:rgba(246,244,239,.14);border-radius:2px;overflow:hidden}
.jauge i{position:absolute;inset:0;background:var(--brass);transform-origin:left;transform:scaleX(0)}
.clavier{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.touche{position:relative;min-height:168px;border-radius:12px 12px 16px 16px;background:linear-gradient(180deg,#F6F4EF 0%,#E9E4DA 100%);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;padding:12px 0 14px;box-shadow:0 6px 0 #B9B2A6,0 10px 24px rgba(0,0,0,.35);transition:transform .15s,box-shadow .15s,background .3s,color .3s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.touche .nom{writing-mode:vertical-rl;transform:rotate(180deg);font:600 12.5px/1 var(--texte);letter-spacing:.16em;text-transform:uppercase}
.touche .pt{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(26,26,26,.25)}
.touche .fam{font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.touche:active,.touche.frappe{transform:translateY(4px);box-shadow:0 2px 0 #B9B2A6,0 4px 10px rgba(0,0,0,.3)}
.touche[aria-pressed=true]{background:linear-gradient(180deg,var(--bord-soft) 0%,var(--bord) 100%);color:#fff;box-shadow:0 6px 0 #33070F,0 10px 24px rgba(0,0,0,.4)}
.touche[aria-pressed=true] .pt{box-shadow:0 0 0 2px #fff}
.commandes{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}
.tenir{position:relative;min-width:240px;user-select:none;-webkit-user-select:none;touch-action:none;overflow:hidden}
.tenir.actif{background:#fff;transform:scale(.98)}
.son{min-height:44px;padding:0 16px;border-radius:99px;font-size:13px;letter-spacing:.08em;color:var(--mute-d);display:inline-flex;align-items:center;gap:8px}
.son svg{width:18px;height:18px}
.apres{display:none;text-align:center}
.apres.on{display:block;animation:monte .8s both}
@keyframes monte{from{opacity:0;transform:translateY(12px)}}
.note-ex{text-align:center;font-size:13px;color:rgba(246,244,239,.55)}

/* manifeste avec portrait */
.man-grid{display:grid;gap:44px}
.man-portrait{border-radius:24px;overflow:hidden;aspect-ratio:4/5}
.man-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}

/* passage vers le compositeur */
.signature{padding:clamp(96px,13vw,170px) 0;background:radial-gradient(110% 80% at 80% 10%,#2A2321 0%,var(--ink) 60%)}
.sig-grid{display:grid;gap:44px;align-items:center}
.sig-photo{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5}
.sig-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.signature .lead{color:var(--mute-d);margin-top:24px}
.signature .actions{margin-top:34px}

/* page Composer */
.compo-page{padding-top:calc(120px + var(--bandeau))}
.compo-tete{display:grid;gap:36px}
.compo-tete figure{display:none;border-radius:24px;overflow:hidden;aspect-ratio:4/5;max-height:520px}
.compo-tete figure img{width:100%;height:100%;object-fit:cover}
.etapes{list-style:none;display:grid;gap:12px;margin-top:64px;counter-reset:e}
.etapes li{border:1px solid rgba(246,244,239,.16);border-radius:20px;padding:22px 22px 22px 70px;position:relative;color:var(--mute-d)}
.etapes li::before{counter-increment:e;content:counter(e);position:absolute;left:22px;top:18px;font:italic 500 30px/1 var(--titre);color:var(--brass)}
.etapes b{display:block;color:var(--ivory);font-weight:600;margin-bottom:4px}

/* collection */
.collection{padding:clamp(96px,13vw,170px) 0}
.collection .kicker{color:var(--bord)}
.col-grid{display:grid;gap:40px;margin-top:48px}
.col-visuel{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1/1.05}
.col-visuel img{width:100%;height:100%;object-fit:cover}
.col-visuel figcaption{position:absolute;left:16px;bottom:16px;background:rgba(26,26,26,.72);color:var(--ivory);font-size:12px;letter-spacing:.08em;padding:8px 14px;border-radius:99px}
.cartes{display:grid;gap:16px}
.carte{background:#fff;border:1px solid rgba(26,26,26,.1);border-radius:20px;padding:26px 24px;transition:transform .4s,box-shadow .4s}
.carte:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(26,26,26,.08)}
.carte .no{font:500 13px/1 var(--texte);letter-spacing:.22em;text-transform:uppercase;color:var(--bord)}
.carte h3{font-size:clamp(32px,4vw,44px);margin:10px 0 8px}
.carte p{color:var(--mute-l)}
.pyr{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin-top:16px;font-size:15px}
.pyr dt{font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:11px;color:var(--bord);padding-top:3px}
.pyr dd{color:var(--ink)}
.bientot{display:inline-block;margin-top:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(26,26,26,.25);border-radius:99px;padding:7px 12px}
.formats{margin-top:40px;background:var(--forest);color:var(--ivory);border-radius:24px;padding:30px 26px;display:grid;gap:18px}
.formats h3{font-size:clamp(26px,3.4vw,36px)}
.formats p{color:rgba(246,244,239,.8)}
.formats ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.formats li{border:1px solid rgba(246,244,239,.35);border-radius:99px;padding:8px 16px;font-size:14px}
.formats li b{font-family:var(--titre);font-weight:500;font-size:17px;margin-right:6px}

/* écrin */
.ecrin{padding:clamp(96px,12vw,160px) 0}
.ecrin .kicker{color:var(--brass)}
.ecrin .lead{color:var(--mute-d);margin-top:24px}
.mosaique{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:48px}
.mosaique .r{grid-column:1/-1;aspect-ratio:16/9}
.mosaique figure{border-radius:20px;overflow:hidden;background:#111}
.mosaique img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.mosaique figure:hover img{transform:scale(1.04)}
.mosaique .a{grid-column:1/-1;aspect-ratio:1/.95}
.mosaique .b,.mosaique .c{aspect-ratio:3/4}

/* histoire */
.histoire{padding:clamp(96px,13vw,170px) 0}
.histoire .kicker{color:var(--bord)}
.hist-grid{display:grid;gap:40px}
.hist-photo{border-radius:24px;overflow:hidden;aspect-ratio:1}
.hist-photo img{width:100%;height:100%;object-fit:cover}
.hist-texte p{margin-top:18px;color:#3A3532;font-size:17px;max-width:34em}
.hist-texte p.fort{font:italic 500 clamp(22px,2.6vw,28px)/1.35 var(--titre);color:var(--ink)}

/* valeurs */
.valeurs{padding:clamp(96px,13vw,170px) 0}
.valeurs .kicker{color:var(--brass)}
.lettres{list-style:none;margin-top:48px;border-top:1px solid rgba(246,244,239,.16)}
.lettres li{display:grid;grid-template-columns:clamp(64px,12vw,140px) 1fr;align-items:center;gap:8px 20px;padding:18px 0;border-bottom:1px solid rgba(246,244,239,.16)}
.lettres .L{font:500 clamp(56px,11vw,128px)/.9 var(--titre);color:rgba(246,244,239,.14);transition:color 1s}
.lettres li.vu .L{color:var(--ivory)}
.lettres b{display:block;font:italic 500 clamp(20px,2.4vw,26px)/1.2 var(--titre);color:var(--brass)}
.lettres span{color:var(--mute-d);font-size:16px}

/* son */
.ecoute{padding:clamp(80px,11vw,140px) 0}
.ecoute .kicker{color:var(--bord)}
.ecoute-grid{display:grid;gap:32px;align-items:center}
.ecoute .lead{margin-top:22px;color:#3A3532}
.disques{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.disques figure{border-radius:18px;overflow:hidden;aspect-ratio:1}
.disques img{width:100%;height:100%;object-fit:cover}
.pistes{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pistes span{font:italic 500 18px/1 var(--titre);border:1px solid rgba(26,26,26,.25);border-radius:99px;padding:10px 16px}

/* liste d'attente */
.signature-img{position:relative;z-index:1;aspect-ratio:4/3;max-height:92vh;width:100%;overflow:hidden}
.signature-img img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.liste{padding:clamp(80px,11vw,140px) 0 clamp(110px,12vw,150px)}
.liste-grid{display:grid;gap:36px}
.liste .lead{color:var(--mute-d);margin-top:22px}
form{display:grid;gap:14px;background:var(--ink-2);border:1px solid rgba(246,244,239,.12);border-radius:24px;padding:26px 22px}
label{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute-d)}
input{width:100%;min-height:52px;margin-top:6px;padding:0 18px;border-radius:14px;border:1px solid rgba(246,244,239,.28);background:transparent;color:var(--ivory);font:400 16px var(--texte)}
input:focus{outline:none;border-color:var(--brass)}
.puce{display:none;font-size:14px;color:var(--ivory);border:1px dashed rgba(194,161,107,.6);border-radius:14px;padding:12px 16px}
.puce.on{display:block}
.puce b{font-family:var(--titre);font-weight:500;font-size:17px}
.merci{display:none;font:italic 500 22px/1.4 var(--titre)}
form.fait .champ,form.fait button[type=submit],form.fait .puce{display:none}
form.fait .merci{display:block}
.petit{font-size:13px;color:rgba(246,244,239,.55)}

/* pied */
footer{position:relative;z-index:1;border-top:1px solid rgba(246,244,239,.12);padding:56px var(--g) calc(110px + env(safe-area-inset-bottom));text-align:center;background:var(--ink)}
footer .bloc{height:120px;width:auto;margin:0 auto}
footer .allyours{font:400 48px/1 var(--script);color:var(--brass);margin-top:18px}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin-top:28px;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
footer nav a{text-decoration:none;opacity:.75;padding:10px 0}
footer .credits{margin-top:28px;font-size:13px;color:rgba(246,244,239,.55)}
footer .credits a{color:var(--ivory)}

/* barre d'action mobile */
.barre{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(26,26,26,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(246,244,239,.1);transform:translateY(110%);transition:transform .4s}
.barre.on{transform:none}
.barre .btn{flex:1;min-height:48px;padding:0 12px;font-size:14px}

/* apparitions */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.1,1)}
.rv.vu{opacity:1;transform:none}

@media (min-width:760px){
  .trio{grid-template-columns:repeat(3,1fr)}
  .signature-img{aspect-ratio:16/9}
  .mosaique{grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:380px 380px}
  .mosaique .r{grid-column:1;grid-row:1/3;aspect-ratio:auto}
  .mosaique .a{grid-column:2/4;aspect-ratio:auto}
  .mosaique .b,.mosaique .c{aspect-ratio:auto}
  .compo-tete figure{display:block}
  .touche{min-height:220px}
  .touche .nom{font-size:13.5px}
}
@media (min-width:1000px){
  .nav ul{display:flex}
  .lang{margin-left:12px}
  .nav .cta-nav{display:inline-flex;min-height:44px;padding:0 20px;font-size:14px}
  .hero{align-items:center;padding-top:calc(80px + var(--bandeau))}
  .hero-photo{height:auto;bottom:0}
  .hero-photo img{object-position:20% 30%}
  .hero-photo::after{background:linear-gradient(90deg,rgba(23,19,18,0) 34%,rgba(23,19,18,.55) 58%,rgba(23,19,18,.82) 100%),linear-gradient(0deg,rgba(23,19,18,.7),rgba(23,19,18,0) 28%),linear-gradient(180deg,rgba(23,19,18,.45),rgba(23,19,18,0) 18%)}
  .hero .wrap{max-width:none;padding-left:47%;padding-right:var(--g)}
  .hero .wrap{container-type:inline-size}
  .hero h1{font-size:clamp(40px,13cqi,120px)}
  .hero h1 .ligne{white-space:nowrap}
  .signature .vers{font-size:clamp(38px,3.9vw,58px)}
  .defile{display:flex;position:absolute;left:50%;bottom:28px;z-index:1;flex-direction:column;align-items:center;gap:10px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute-d);text-decoration:none;transform:translateX(-50%)}
  .defile i{width:1px;height:46px;background:linear-gradient(var(--ivory),transparent);transform-origin:top;animation:goutte 2.4s ease-in-out infinite}
  @keyframes goutte{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
  .man-grid{grid-template-columns:1.25fr .75fr;align-items:end;gap:72px}
  .sig-grid{grid-template-columns:.8fr 1fr;gap:72px}
  .compo-tete{grid-template-columns:1.3fr .7fr;align-items:end}
  .studio{grid-template-columns:1.1fr 1fr;align-items:stretch}
  .studio .bas{display:grid;gap:24px;align-content:center}
  .col-grid{grid-template-columns:1fr 1fr;align-items:start}
  .col-visuel{position:sticky;top:110px;aspect-ratio:1/1.1}
  .formats{grid-template-columns:1fr 1fr;align-items:center}
  .hist-grid{grid-template-columns:1fr 1.1fr;align-items:center;gap:72px}
  .ecoute-grid{grid-template-columns:1.1fr 1fr;gap:64px}
  .liste-grid{grid-template-columns:1fr 1fr;align-items:center;gap:64px}
  .barre{display:none}
  footer{padding-bottom:56px}
}
@media (max-width:420px){
  .tao-preview{font-size:11.5px;padding:7px 12px}
  .clavier{gap:4px}
  .touche{border-radius:10px 10px 12px 12px}
  .touche .nom{font-size:11.5px;letter-spacing:.12em}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .lettres .L{color:var(--ivory)}
}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.merci.erreur{display:block;font:500 15px/1.5 var(--texte)}