/* Hijabforyou by Salima — « Deux rives » */
:root{
  --nuit:#110D0B;--nuit-2:#1B1512;--ivoire:#F3ECE2;--ivoire-2:#EAE0D2;--encre:#1D1714;--gris:#6F625A;
  --sable:#D8C3A8;--cuivre:#A2603C;--cuivre-clair:#D79A72;--soie:#F0DCCB;--ligne:rgba(29,23,20,.14);
  --titre:'Italiana',Didot,'Bodoni 72',Georgia,serif;--texte:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gouttiere:clamp(16px,4.2vw,64px);--rayon:22px;--ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--ivoire);color:var(--encre);font:400 16px/1.6 var(--texte);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.fige{overflow:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--cuivre);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,1%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
.titre{font:400 clamp(2.6rem,7.4vw,6.6rem)/.96 var(--titre);letter-spacing:-.01em;margin:0}
.surtitre{display:inline-flex;align-items:center;gap:12px;font:600 .74rem/1 var(--texte);letter-spacing:.24em;text-transform:uppercase;color:var(--cuivre)}
.surtitre::before{content:"";width:34px;height:1px;background:currentColor}
.ligne-masque{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ligne-masque>span{display:block}
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 28px;border-radius:99px;background:var(--encre);color:var(--ivoire);font:700 .92rem/1 var(--texte);letter-spacing:.02em;text-decoration:none;position:relative;overflow:hidden;isolation:isolate;transition:color .45s var(--ease)}
.bouton::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cuivre);border-radius:inherit;transform:translateY(102%);transition:transform .55s var(--ease)}
.bouton:hover::before,.bouton:focus-visible::before{transform:translateY(0)}
.bouton.clair{background:var(--ivoire);color:var(--encre)}
.bouton.clair:hover{color:var(--ivoire)}
.bouton.contour{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.bouton.contour:hover{color:var(--ivoire)}
.bouton svg{width:18px;height:18px;flex:none}
.lien{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px)/100% 1px no-repeat;transition:background-size .5s var(--ease)}
.lien:hover{background-size:0 1px;background-position:100% calc(100% - 10px)}

/* ---------- Ouverture ---------- */
.ouverture{position:fixed;inset:0;z-index:100;color:var(--ivoire);pointer-events:auto}
.ouverture .fond{position:absolute;inset:0;background:var(--nuit)}
.ouverture .rideau{position:absolute;left:0;width:100%;height:22vh;top:100%;fill:var(--nuit)}
.ouverture svg.voile{position:absolute;inset:0;width:100%;height:100%}
.ouverture .marque{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:0 var(--gouttiere)}
.ouverture .nom{font:400 clamp(2.7rem,11vw,9rem)/.9 var(--titre);letter-spacing:.02em;display:flex;justify-content:center;overflow:hidden;padding-bottom:.06em}
.ouverture .nom span{display:inline-block;transform:translateY(105%)}
.ouverture .par{font:italic 400 clamp(1rem,2.4vw,1.4rem)/1 Georgia,serif;opacity:0;margin-top:10px;color:var(--soie)}
.ouverture .villes{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:28px;font:600 .72rem/1 var(--texte);letter-spacing:.3em;text-transform:uppercase;opacity:0}
.ouverture .villes i{display:block;width:clamp(40px,10vw,120px);height:1px;background:var(--cuivre-clair);transform:scaleX(0);transform-origin:left}
.ouverture .passer{position:absolute;right:var(--gouttiere);bottom:calc(22px + env(safe-area-inset-bottom));min-height:44px;padding:0 6px;font:600 .74rem/1 var(--texte);letter-spacing:.2em;text-transform:uppercase;color:var(--sable)}
.ouverture .compteur{position:absolute;left:var(--gouttiere);bottom:calc(34px + env(safe-area-inset-bottom));font:400 .9rem/1 var(--texte);color:var(--sable);font-variant-numeric:tabular-nums}

/* ---------- En-tête ---------- */
.entete{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--gouttiere);color:var(--ivoire);text-shadow:0 1px 14px rgba(0,0,0,.35);pointer-events:none;transition:color .5s var(--ease)}
.entete.sur-clair{color:var(--encre);text-shadow:none}
.entete::before{content:"";position:absolute;inset:0 0 -30px;z-index:-1;background:linear-gradient(rgba(17,13,11,.45),transparent);transition:opacity .5s;pointer-events:none}
.entete.sur-clair::before{opacity:0}
.entete>*{pointer-events:auto}
.logo{font:400 1.5rem/1 var(--titre);letter-spacing:.04em;text-decoration:none;display:inline-flex;align-items:baseline;gap:8px;min-height:44px;align-items:center}
.logo small{font:italic 400 .8rem/1 Georgia,serif;opacity:.8}
.actions{display:flex;align-items:center;gap:clamp(8px,2vw,22px)}
.devise{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;border-radius:99px;box-shadow:inset 0 0 0 1px currentColor;min-height:40px;font:700 .72rem/1 var(--texte);letter-spacing:.12em}
.devise button{position:relative;z-index:1;min-width:52px;min-height:40px;padding:0 12px;transition:color .4s var(--ease)}
.devise .pastille{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:99px;background:currentColor;transition:transform .5s var(--ease)}
.devise[data-devise="mru"] .pastille{transform:translateX(100%)}
.devise button[aria-pressed="true"]{color:var(--nuit);text-shadow:none}
.sur-clair .devise button[aria-pressed="true"]{color:var(--ivoire)}
.menu-ouvert .entete{color:var(--ivoire)}
.menu-ouvert .entete .devise button[aria-pressed="true"]{color:var(--nuit)}
.menu-bouton{display:inline-flex;align-items:center;gap:12px;min-height:44px;font:700 .78rem/1 var(--texte);letter-spacing:.2em;text-transform:uppercase}
.menu-bouton .traits{position:relative;width:28px;height:10px}
.menu-bouton .traits i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .5s var(--ease)}
.menu-bouton .traits i:first-child{top:0}.menu-bouton .traits i:last-child{bottom:0}
.menu-ouvert .menu-bouton .traits i:first-child{transform:translateY(4.25px) rotate(45deg)}
.menu-ouvert .menu-bouton .traits i:last-child{transform:translateY(-4.25px) rotate(-45deg)}

/* ---------- Menu ---------- */
.menu{position:fixed;inset:0;z-index:55;visibility:hidden;color:var(--ivoire)}
.menu svg.vague{position:absolute;inset:0;width:100%;height:100%}
.menu svg.vague path{fill:var(--nuit-2)}
.menu nav{position:relative;height:100%;display:grid;grid-template-columns:1fr;align-content:safe center;padding:90px var(--gouttiere) 40px;overflow:auto}
.menu ol{list-style:none;margin:0;padding:0;counter-reset:m}
.menu li{overflow:hidden;border-bottom:1px solid rgba(243,236,226,.12)}
.menu li a{display:flex;align-items:baseline;gap:18px;padding:10px 0;text-decoration:none;font:400 clamp(2rem,6.4vw,4.6rem)/1.05 var(--titre);transform:translateY(110%)}
.menu li a small{font:600 .7rem/1 var(--texte);letter-spacing:.2em;color:var(--cuivre-clair);min-width:2.2em}
.menu li a:hover em{transform:translateX(14px);color:var(--soie)}
.menu li a em{font-style:normal;transition:transform .5s var(--ease),color .4s}
.menu .pied-menu{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:28px;opacity:0;color:var(--sable)}

/* ---------- Héros ---------- */
.heros{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--nuit);color:var(--ivoire)}
.heros .cadre{position:absolute;inset:0;overflow:hidden;will-change:clip-path}
.heros video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.heros .flou{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);max-width:none;object-fit:cover;filter:blur(34px) brightness(.5) saturate(1.2);display:none}
.heros .portrait{position:absolute;inset:0;overflow:hidden}
@media (min-aspect-ratio:1/1){
  .heros .flou{display:block}
  .heros .portrait{inset:auto;right:calc(var(--gouttiere) + 4vw);top:max(80px,9vh);height:min(82vh,1000px);aspect-ratio:9/16;border-radius:28px;box-shadow:0 50px 120px -30px rgba(0,0,0,.7)}
  .heros .contenu{padding-right:calc(var(--gouttiere) + 4vw + min(82vh,1000px) * .5625 + 40px)}
  .heros .bas{flex-direction:column;align-items:flex-start}
  .heros .defiler{display:none}
}
.heros .cadre::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,13,11,.55) 0%,rgba(17,13,11,.08) 38%,rgba(17,13,11,.25) 62%,rgba(17,13,11,.86) 100%)}
.heros .contenu{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gouttiere) clamp(28px,6vh,64px);display:grid;gap:18px}
.heros h1{font:400 clamp(2.5rem,7.6vw,7.4rem)/.94 var(--titre);margin:0;max-width:13ch}
.heros h1 .mot{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.heros h1 .mot>span{display:inline-block}
.heros .traduction{font:italic 400 clamp(1rem,1.8vw,1.25rem)/1.4 Georgia,serif;color:var(--soie);margin:0}
.heros .bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.heros .infos{display:flex;flex-wrap:wrap;gap:6px 18px;font:600 .72rem/1.4 var(--texte);letter-spacing:.2em;text-transform:uppercase;color:var(--sable)}
.heros .boutons{display:flex;flex-wrap:wrap;gap:10px}
.defiler{position:absolute;right:var(--gouttiere);top:50%;display:flex;flex-direction:column;align-items:center;gap:12px;font:600 .64rem/1 var(--texte);letter-spacing:.3em;text-transform:uppercase;writing-mode:vertical-rl;color:var(--sable)}
.defiler i{width:1px;height:70px;background:linear-gradient(var(--sable),transparent);animation:goutte 2.2s var(--ease) infinite;transform-origin:top}
@keyframes goutte{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- Ruban ---------- */
.ruban{background:var(--encre);color:var(--ivoire);overflow:hidden;padding:20px 0;border-block:1px solid rgba(243,236,226,.08)}
.ruban .piste{display:flex;width:max-content;will-change:transform}
.ruban span{display:flex;align-items:center;gap:28px;padding-right:28px;font:400 clamp(1.5rem,3.4vw,2.6rem)/1 var(--titre);white-space:nowrap}
.ruban span svg{width:18px;height:18px;fill:var(--cuivre-clair)}

/* ---------- Sections ---------- */
section{position:relative}
.bloc{padding:clamp(80px,13vh,150px) var(--gouttiere)}
.entete-bloc{display:grid;gap:22px;margin-bottom:clamp(36px,6vh,64px)}
.entete-bloc p{max-width:36em;margin:0;color:var(--gris)}
@media (min-width:900px){.entete-bloc{grid-template-columns:1.2fr 1fr;align-items:end}}

/* ---------- Le film des collections (défilement horizontal) ---------- */
.film{background:var(--nuit);color:var(--ivoire);overflow:hidden}
.film .tete{padding:clamp(80px,12vh,130px) var(--gouttiere) 34px;display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px}
.film .tete p{max-width:30em;margin:0;color:var(--sable)}
.film .scene{height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:22px}
.film .piste{display:flex;gap:clamp(14px,2.4vw,34px);padding:0 var(--gouttiere);width:max-content;will-change:transform}
.plan{position:relative;flex:none;width:clamp(250px,27vw,420px);aspect-ratio:9/16;max-height:72vh;border-radius:var(--rayon);overflow:hidden;background:var(--nuit-2);text-decoration:none;color:var(--ivoire)}
.plan video,.plan img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.plan:hover video,.plan:hover img{transform:scale(1.04)}
.plan::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(17,13,11,.88))}
.plan .legende{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:20px;display:grid;gap:6px}
.plan .numero{position:absolute;top:16px;left:18px;z-index:1;font:600 .7rem/1 var(--texte);letter-spacing:.24em;color:var(--sable)}
.plan h3{margin:0;font:400 clamp(1.5rem,2.3vw,2.1rem)/1.02 var(--titre)}
.plan .prix{font-weight:700}
.plan .quand{font:600 .68rem/1 var(--texte);letter-spacing:.2em;text-transform:uppercase;color:var(--sable)}
.film .barre{margin:0 var(--gouttiere);height:1px;background:rgba(243,236,226,.16);position:relative}
.film .barre i{position:absolute;inset:0;background:var(--cuivre-clair);transform:scaleX(0);transform-origin:left}
.film .annee{position:absolute;right:-2vw;top:8vh;font:400 clamp(8rem,26vw,24rem)/.8 var(--titre);color:transparent;-webkit-text-stroke:1px rgba(243,236,226,.09);pointer-events:none;white-space:nowrap}

/* ---------- Shinny ---------- */
.shinny{display:grid;gap:clamp(28px,5vw,80px);align-items:start}
@media (min-width:900px){.shinny{grid-template-columns:minmax(300px,.9fr) 1.1fr}}
.shinny .ecran{position:relative;border-radius:var(--rayon);overflow:hidden;aspect-ratio:9/16;max-height:82vh;background:var(--nuit);box-shadow:0 40px 80px -40px rgba(29,23,20,.5)}
@media (min-width:900px){.shinny .ecran{position:sticky;top:12vh}}
.shinny .ecran video{width:100%;height:100%;object-fit:cover}
.shinny .temps{position:absolute;left:16px;bottom:16px;padding:8px 12px;border-radius:99px;background:rgba(17,13,11,.6);color:var(--ivoire);font:600 .72rem/1 var(--texte);letter-spacing:.1em;backdrop-filter:blur(8px)}
.shinny .texte{display:grid;gap:22px;padding-top:2vh}
.shinny .texte p{margin:0;color:var(--gris);max-width:32em}
.nuancier{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:14px;margin:8px 0 6px;padding:0;list-style:none}
@media (min-width:1100px){.nuancier{grid-template-columns:repeat(9,minmax(0,1fr));gap:10px}}
.teinte{position:relative;display:grid;justify-items:center;gap:8px;min-height:44px;font:600 .66rem/1.2 var(--texte);letter-spacing:.06em;color:var(--gris);text-align:center}
.teinte .disque{position:relative;width:56px;height:56px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .5s var(--ease)}
.teinte svg{position:absolute;inset:-6px;width:68px;height:68px;transform:rotate(-90deg)}
.teinte svg circle{fill:none;stroke:var(--encre);stroke-width:1.5;stroke-dasharray:201;stroke-dashoffset:201;transition:stroke-dashoffset .7s var(--ease)}
.teinte[aria-pressed="true"] svg circle{stroke-dashoffset:0}
.teinte:hover .disque{transform:scale(1.08)}
.teinte[aria-pressed="true"]{color:var(--encre)}
.carte-prix{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding:22px 0;border-block:1px solid var(--ligne)}
.carte-prix .montant{font:400 clamp(2rem,4vw,3rem)/1 var(--titre)}

/* ---------- Vestiaire ---------- */
.vestiaire{background:var(--ivoire)}
.filtres{position:relative;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:clamp(26px,4vh,44px)}
.filtres button{position:relative;z-index:1;min-height:44px;padding:0 18px;border-radius:99px;font:600 .82rem/1 var(--texte);letter-spacing:.02em;transition:color .4s var(--ease)}
.filtres button[aria-pressed="true"]{color:var(--ivoire)}
.filtres button sup{font-size:.62rem;margin-left:4px;opacity:.6}
.filtres .curseur{position:absolute;top:0;left:0;height:44px;border-radius:99px;background:var(--encre);transition:transform .6s var(--ease),width .6s var(--ease)}
.grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,28px) clamp(10px,1.6vw,22px)}
@media (min-width:768px){.grille{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.grille{grid-template-columns:repeat(4,minmax(0,1fr))}}
.article{display:grid;gap:12px;text-decoration:none;color:inherit;text-align:left;width:100%}
.article[hidden]{display:none}
.article .visuel{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--ivoire-2)}
.article .visuel img,.article .visuel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s var(--ease),transform 1.1s var(--ease)}
.article .visuel .b{opacity:0}
.article:hover .visuel .b{opacity:1}
.article:hover .visuel img{transform:scale(1.035)}
.article .pastilles{position:absolute;left:10px;top:10px;display:flex;flex-wrap:wrap;gap:6px;z-index:1}
.article .pastilles span{padding:6px 10px;border-radius:99px;background:rgba(243,236,226,.9);font:700 .6rem/1 var(--texte);letter-spacing:.14em;text-transform:uppercase}
.article .pastilles .video-p{background:rgba(17,13,11,.72);color:var(--ivoire)}
.article .nb{position:absolute;right:10px;bottom:10px;z-index:1;padding:6px 9px;border-radius:99px;background:rgba(17,13,11,.6);color:var(--ivoire);font:700 .62rem/1 var(--texte)}
.article h3{margin:0;font:400 clamp(1.15rem,1.8vw,1.5rem)/1.1 var(--titre)}
.article .ligne-prix{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;font-size:.86rem}
.article .ligne-prix b{font-weight:700}
.article .ligne-prix span{color:var(--gris)}

/* ---------- Fiche ---------- */
.fiche{position:fixed;inset:0;z-index:80;visibility:hidden}
.fiche .voile-fond{position:absolute;inset:0;background:rgba(17,13,11,.55);opacity:0;backdrop-filter:blur(6px)}
.fiche .panneau{position:absolute;inset:0;background:var(--ivoire);display:grid;grid-template-rows:auto 1fr;overflow:auto;overscroll-behavior:contain;clip-path:inset(100% 0 0 0)}
@media (min-width:900px){.fiche .panneau{inset:16px;border-radius:26px;grid-template-columns:1.1fr 1fr;grid-template-rows:1fr;overflow:hidden}}
.fiche .galerie{position:relative;background:var(--nuit);min-height:62vh;overflow:hidden}
@media (min-width:900px){.fiche .galerie{min-height:0}}
.fiche .galerie .vue{position:absolute;inset:0}
.fiche .galerie .vue>*{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .6s var(--ease)}
.fiche .galerie .vue>.actif{opacity:1}
.fiche .vignettes{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;padding:14px;overflow-x:auto;scrollbar-width:none}
.fiche .vignettes button{flex:none;width:52px;height:64px;border-radius:10px;overflow:hidden;opacity:.55;box-shadow:0 0 0 1px rgba(243,236,226,.3);transition:opacity .3s}
.fiche .vignettes button[aria-current="true"]{opacity:1;box-shadow:0 0 0 2px var(--ivoire)}
.fiche .vignettes img{width:100%;height:100%;object-fit:cover}
.fiche .vignettes .jouer{display:grid;place-items:center;background:var(--nuit-2);color:var(--ivoire);font:700 .6rem/1 var(--texte);letter-spacing:.1em}
.fiche .infos{padding:clamp(26px,4vw,56px) var(--gouttiere) 40px;display:grid;align-content:start;gap:20px;overflow:auto}
@media (min-width:900px){.fiche .infos{padding:clamp(40px,5vw,72px)}}
.fiche h2{font:400 clamp(2.4rem,4.8vw,4.2rem)/.98 var(--titre);margin:0}
.fiche .prix-fiche{font:400 clamp(1.6rem,2.6vw,2.2rem)/1 var(--titre)}
.fiche .prix-fiche small{display:block;margin-top:8px;font:500 .84rem/1.4 var(--texte);color:var(--gris)}
.fiche p{margin:0;color:var(--gris)}
.fiche .fermer{position:absolute;top:12px;right:12px;z-index:3;width:48px;height:48px;border-radius:50%;background:var(--ivoire);color:var(--encre);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.fiche .fermer svg{width:18px;height:18px}
.champ{display:grid;gap:8px}
.champ label,.champ legend{font:700 .7rem/1 var(--texte);letter-spacing:.18em;text-transform:uppercase;padding:0}
.champ input{min-height:50px;border-radius:14px;border:1px solid var(--ligne);background:#fff;padding:0 16px;font:500 1rem/1 var(--texte);color:var(--encre);width:100%}
fieldset.champ{border:0;margin:0;padding:0}
.choix{display:flex;flex-wrap:wrap;gap:8px}
.choix button{min-height:44px;padding:0 16px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--ligne);font-weight:600;font-size:.88rem;transition:background .3s,color .3s}
.choix button[aria-pressed="true"]{background:var(--encre);color:var(--ivoire);box-shadow:none}
.quantite{display:inline-flex;align-items:center;border-radius:99px;box-shadow:inset 0 0 0 1px var(--ligne)}
.quantite button{width:48px;height:48px;font-size:1.3rem}
.quantite output{min-width:2.4em;text-align:center;font-weight:700}
.fiche .source{font-size:.86rem}

/* ---------- Voiles ---------- */
.voiles{background:var(--ivoire-2);overflow:hidden}
.drapes{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,19vw,260px);gap:clamp(10px,1.4vw,18px);overflow-x:auto;padding-bottom:12px;margin-inline:calc(var(--gouttiere) * -1);padding-inline:var(--gouttiere);scrollbar-width:none;scroll-snap-type:x mandatory}
.drape{position:relative;aspect-ratio:9/16;border-radius:999px 999px 18px 18px;overflow:hidden;background:var(--sable);scroll-snap-align:start}
.drape video,.drape img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (hover:hover) and (pointer:fine){.drape:hover .onde{filter:url(#onde-tissu)}}
.calme .film .scene{height:auto;padding-bottom:60px}
.calme .film .piste{width:auto;overflow-x:auto;scroll-snap-type:x mandatory}
.calme .plan{scroll-snap-align:start}
.calme .heros h1 .mot>span,.calme .ouverture .nom span{transform:none}
.drape figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px;color:var(--ivoire);font:600 .66rem/1.3 var(--texte);letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(transparent,rgba(17,13,11,.7))}
.calcul{display:grid;gap:24px;margin-top:clamp(36px,6vh,64px);padding:clamp(22px,3vw,40px);border-radius:var(--rayon);background:var(--ivoire);align-items:center}
@media (min-width:900px){.calcul{grid-template-columns:auto 1fr auto}}
.calcul .total{font:400 clamp(2.2rem,5vw,3.6rem)/1 var(--titre)}
.calcul .detail{color:var(--gris);font-size:.92rem}
.calcul .remise{display:inline-block;margin-left:8px;padding:5px 10px;border-radius:99px;background:var(--cuivre);color:var(--ivoire);font:700 .64rem/1 var(--texte);letter-spacing:.14em;text-transform:uppercase;transform:scale(0);transition:transform .5s var(--ease)}
.calcul .remise.on{transform:scale(1)}

/* ---------- Bouquets ---------- */
.bouquets{background:var(--nuit);color:var(--ivoire);overflow:hidden}
.bouquets .grille-b{display:grid;gap:clamp(30px,5vw,80px);align-items:center}
@media (min-width:900px){.bouquets .grille-b{grid-template-columns:1fr 1fr}}
.bouquets .ecrin{position:relative;justify-self:center;width:min(100%,420px);aspect-ratio:9/16;max-height:80vh;border-radius:220px 220px 26px 26px;overflow:hidden;background:var(--nuit-2)}
.bouquets .ecrin video{width:100%;height:100%;object-fit:cover}
.bouquets p{color:var(--sable);max-width:30em}
.petales{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.petales svg{position:absolute;width:22px;height:22px;fill:var(--soie);opacity:.75}

/* ---------- Deux rives ---------- */
.rives{background:var(--ivoire);overflow:hidden}
.rives .disposition{display:grid;gap:clamp(30px,4vw,60px);align-items:center}
@media (min-width:900px){.rives .disposition{grid-template-columns:.8fr 1.2fr}}
.rives .carte{position:relative;width:100%;max-width:780px;justify-self:center}
.rives .carte svg{width:100%;height:auto;max-height:84vh;overflow:visible}
.rives .terre path{fill:#E2D4C0;stroke:rgba(29,23,20,.22);stroke-width:1.4}
.rives .cote{fill:none;stroke:rgba(29,23,20,.35);stroke-width:2;stroke-dasharray:6 8}
.rives .fleuve{fill:none;stroke:#7FA3B5;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.rives .fil{fill:none;stroke:var(--cuivre);stroke-width:6;stroke-linecap:round}
.rives .fil-ombre{fill:none;stroke:var(--cuivre-clair);stroke-width:22;stroke-linecap:round;opacity:.18}
.rives .ville circle.coeur{fill:var(--encre);stroke:var(--ivoire);stroke-width:5}
.rives .ville circle.onde{fill:none;stroke:var(--cuivre);stroke-width:2}
.rives .ville text{font:400 92px var(--titre);fill:var(--encre)}
.rives .ville text.petit{font:700 30px var(--texte);letter-spacing:6px;fill:var(--cuivre)}
.rives .monde path{fill:none;stroke:var(--encre);stroke-width:1.6;stroke-dasharray:4 9;opacity:.5}
.rives .monde text{font:700 30px var(--texte);letter-spacing:6px;fill:var(--gris)}
.rives .eau text{font:italic 400 48px Georgia,serif;fill:#6F93A5}
.villes-liste{display:grid;gap:14px;margin-top:10px}
.villes-liste div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid var(--ligne)}
.villes-liste strong{font:400 clamp(1.6rem,3vw,2.2rem)/1 var(--titre)}
.villes-liste span{font:700 .7rem/1 var(--texte);letter-spacing:.18em;text-transform:uppercase;color:var(--cuivre)}
.rives .source-carte{font-size:.72rem;color:var(--gris);margin-top:10px}

/* ---------- Contact ---------- */
.contact{background:var(--encre);color:var(--ivoire);padding:clamp(90px,14vh,160px) var(--gouttiere) 40px;overflow:hidden}
.contact .grand{font:400 clamp(3rem,12vw,11rem)/.9 var(--titre);margin:0 0 34px}
.contact .grand span{display:block}
.contact .grand em{font-style:normal;color:var(--cuivre-clair)}
.contact .rangee{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:60px}
.contact .colonnes{display:grid;gap:26px;padding-top:30px;border-top:1px solid rgba(243,236,226,.14);color:var(--sable);font-size:.92rem}
@media (min-width:768px){.contact .colonnes{grid-template-columns:repeat(3,1fr)}}
.contact .colonnes b{display:block;color:var(--ivoire);font:700 .7rem/1 var(--texte);letter-spacing:.2em;text-transform:uppercase;margin-bottom:10px}
.contact .colonnes a{text-decoration:none;display:inline-flex;min-height:44px;align-items:center}
.contact .colonnes a:hover{color:var(--ivoire)}
.contact .mention{margin-top:40px;font-size:.76rem;color:rgba(216,195,168,.7)}


@media (max-width:899px){
  .shinny .texte{display:contents}
  .shinny .surtitre{order:1}.shinny h2{order:2}.shinny .texte>p{order:3}.shinny .nuancier{order:4}.shinny .ecran{order:5;width:min(100%,calc(64vh * .5625));justify-self:center}.shinny .carte-prix{order:6}
}
@media (max-width:767px){
  .logo small{display:none}
  .menu-bouton b{display:none}
  .defiler{display:none}
  .heros .boutons .bouton{flex:1 1 auto}
  .devise button{min-width:46px;padding:0 10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .grain{display:none}
}