/* Tubi Twister — feuille de style principale (v2 : palette crème / cuivre) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Jost:wght@400;500;600&display=swap');

:root{
  --cream:#fffdfb;
  --cream-alt:#fdeef3;
  --blush:#f8cddc;
  --blush-soft:#fdf0f4;
  --card:#ffffff;
  --border:#f6d9e3;
  --copper:#f0a63e;
  --copper-dark:#8f4c28;
  --copper-soft:#f7c987;
  --ink:#3a2a20;
  --ink-soft:#7a695d;
  --mauve:#c98fc4;
  --band-gradient:linear-gradient(135deg, var(--mauve) 0%, var(--blush) 55%, var(--cream) 100%);
  --radius:16px;
  --max:1200px;
  --header-h:80px; /* recalculée en JS (initHeaderOffset) selon la vraie hauteur du menu sticky */
  font-size:16px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* Empêche le menu sticky (position:sticky, voir header.top) de recouvrir le haut des sections
   quand on y saute via un lien du menu ou un scrollIntoView JS. */
section[id], #cart-recap, .shop-card{scroll-margin-top:var(--header-h);}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Jost', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
h1,h2,h3{font-family:'Fraunces', Georgia, serif;font-weight:500;letter-spacing:.2px;margin:0 0 .5em;color:var(--ink);}
h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.12;}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem);}
h3{font-size:1.25rem;}
p{color:var(--ink-soft);}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:.75rem;
  color:var(--copper-dark);
  font-weight:600;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:2px;border:1px solid var(--ink);
  background:var(--ink);color:var(--cream);font-weight:500;
  cursor:pointer;font-size:.85rem;text-decoration:none;letter-spacing:.5px;text-transform:uppercase;
  transition:.18s ease;
}
.btn:hover{background:var(--copper-dark);border-color:var(--copper-dark);}
.btn.secondary{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn.secondary:hover{background:var(--ink);color:var(--cream);}
.btn.copper{background:transparent;color:var(--copper-dark);border-color:var(--copper);}
.btn.copper:hover{background:var(--copper);color:#fff;border-color:var(--copper);}
.btn.paypal{background:#ffc439;border-color:#ffc439;color:#111;}
.btn.paypal:hover{background:#ffd76a;border-color:#ffd76a;}
.btn[disabled], .btn.disabled{opacity:.55;cursor:not-allowed;}

/* ---------- Password gate ---------- */
#gate{
  position:fixed;inset:0;z-index:999;
  background:linear-gradient(160deg, var(--blush), var(--cream) 60%);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
#gate .box{
  max-width:400px;width:100%;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:40px 34px;text-align:center;
  box-shadow:0 30px 60px -30px rgba(58,42,32,.25);
}
#gate .box .mark{font-family:'Fraunces',serif;font-size:1.6rem;letter-spacing:1px;margin-bottom:18px;color:var(--copper-dark);}
#gate input{
  width:100%;padding:13px 14px;border-radius:2px;border:1px solid var(--border);
  background:var(--cream-alt);color:var(--ink);font-size:1rem;margin:18px 0 10px;text-align:center;
  letter-spacing:2px;
}
#gate .err{color:#a8402c;font-size:.85rem;min-height:1.2em;}
body.locked #site{display:none;}
body:not(.locked) #gate{display:none;}

/* ---------- Header ---------- */
.announce{
  background:var(--ink);color:var(--cream);text-align:center;
  font-size:.72rem;letter-spacing:1px;padding:8px 12px;text-transform:uppercase;
}
header.top{
  position:sticky;top:0;z-index:50;
  background:var(--band-gradient);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
header.top .inner{
  display:flex;align-items:center;gap:28px;padding:12px 24px;
}
.logo{font-family:'Fraunces',serif;font-size:1.35rem;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;}
.logo span{color:var(--copper);}

/* Colonne de gauche (mobile uniquement) : logo + mot-symbole, avec le sélecteur de langue à côté.
   Au-delà de 900px, langue et logo sortent du flux (position:absolute, voir plus bas) : le logo est
   alors positionné exactement à mi-chemin entre les langues et le menu par initLogoCentering() en JS,
   recalculé à chaque redimensionnement pour que la distance reste toujours strictement égale. */
.header-left{display:flex;align-items:center;gap:26px;flex:0 0 auto;}

.brand-lockup{display:flex;align-items:center;gap:14px;text-decoration:none;position:relative;z-index:5;}
.brand-icon{position:relative;width:72px;height:72px;flex:0 0 72px;margin:-14px 0;filter:drop-shadow(0 6px 14px rgba(58,42,32,.18));}
.brand-icon img{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:1;}
footer .brand-icon{filter:none;}
.brand-word{
  font-family:'Fraunces',serif;font-weight:700;font-size:2.1rem;line-height:1;
  letter-spacing:1px;text-transform:uppercase;color:var(--copper-dark);white-space:nowrap;
}
.brand-word span{color:var(--copper);-webkit-text-stroke:1.2px #2a1c14;paint-order:stroke fill;}
@media(max-width:700px){
  .brand-icon{width:52px;height:52px;flex:0 0 52px;margin:-9px 0;}
  .brand-word{font-size:1.4rem;letter-spacing:.6px;}
}
/* Groupe menu + panier + Acheter : sur mobile, flux normal (voir media query plus bas).
   Au-delà de 900px, ce bloc entier est centré par rapport à l'écran (position:absolute + translateX),
   indépendamment du logo/langues à gauche — c'est ce qui garantit qu'il est "centré par rapport à
   l'écran" quel que soit ce qu'il y a à gauche. */
.nav-group{display:flex;align-items:center;}
nav.main{display:flex;gap:34px;align-items:center;}
nav.main a{font-size:.82rem;color:var(--ink-soft);text-decoration:none;letter-spacing:.3px;white-space:nowrap;}
nav.main a:hover{color:var(--copper-dark);}
.lang-switch{display:flex;gap:6px;flex:0 0 auto;}
.lang-switch button{
  background:none;border:none;color:var(--ink-soft);padding:4px 8px;
  cursor:pointer;font-size:.78rem;font-weight:600;letter-spacing:.5px;
}
.lang-switch button.active{color:var(--copper-dark);border-bottom:1px solid var(--copper-dark);}
/* Au-delà de 900px : le sélecteur de langue se colle au tout bord gauche de l'écran (toujours, quelle
   que soit la largeur — c'est une demande explicite). Le placement du logo et du bloc menu dépend
   ensuite de la largeur disponible :
   - Entre 901px et 1649px (la grande majorité des ordinateurs portables : 1280, 1366, 1440...), il n'y
     a mathématiquement pas assez de place pour à la fois coller les langues au bord ET centrer le menu
     par rapport à l'écran entier sans faire chevaucher le logo (calcul vérifié : avec la largeur réelle
     du logo et du menu, un vrai centrage écran ferait chevaucher le logo sur les langues et/ou le menu
     en dessous de ~1650px). On utilise donc ici un centrage "dans l'espace disponible" (flux normal,
     flexbox) : aucun chevauchement possible par construction, et visuellement très proche d'un centrage
     écran complet.
   - À partir de 1650px, il y a assez de place : le logo est positionné en JS exactement à mi-chemin
     entre langues et menu (voir initLogoCentering), et le bloc menu+panier+Acheter est centré sur
     l'écran entier (position:absolute + left:50%). */
@media(min-width:901px){
  header.top{min-height:94px;}
  .lang-switch{position:absolute;left:24px;top:50%;transform:translateY(-50%);z-index:6;}
}
@media(min-width:901px) and (max-width:1649px){
  header.top .inner{padding-left:150px;padding-right:12px;} /* réserve la place des langues collées au bord (24px + ~114px + air) */
  .header-left{gap:0;}
  .nav-group{flex:1 1 auto;display:flex;justify-content:center;}
  /* Le logo et le menu, ensemble, sont trop larges pour tenir sur une seule ligne à ces largeurs sans
     empiéter les uns sur les autres (vérifié : sans ce resserrement, le menu déborde par-dessus le logo
     dès 901px). On les resserre donc légèrement ici — juste assez pour que tout tienne sans jamais se
     chevaucher ni provoquer de défilement horizontal — sans toucher à la taille "confortable" utilisée
     au-delà de 1650px, là où il y a largement la place. */
  .brand-icon{width:46px;height:46px;flex:0 0 46px;margin:-9px 0;}
  .brand-word{font-size:1.3rem;letter-spacing:.5px;}
  .brand-lockup{gap:8px;}
  nav.main{gap:8px;}
  nav.main a{font-size:.76rem;}
  .nav-actions{padding-left:30px;gap:8px;} /* garde un vrai espace visible avant la barre verticale, pas collée à FAQ */
  .nav-actions .btn{padding:7px 14px;font-size:.82rem;}
}
@media(min-width:1650px){
  /* Important : bien cibler "header .brand-lockup" et pas juste ".brand-lockup" — ce même bloc
     logo+mot est réutilisé dans le footer (même style, même balisage), et un sélecteur non ciblé
     ferait sortir AUSSI le logo du footer de son emplacement normal pour le positionner en absolu
     par rapport à la page entière (bug trouvé le 09/09/2026 : sur très grand écran, le logo du
     footer se retrouvait ainsi téléporté au milieu du hero, en haut de page, laissant le footer
     vide à cet endroit). */
  header .brand-lockup{position:absolute;left:24px;top:50%;transform:translateY(-50%);}
  .nav-group{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
}

/* Colonne de droite : panier + bouton Acheter, alignés à droite, largeur fixe */
/* Pas de séparateur vertical (retiré à la demande) : juste un espace généreux après le dernier
   lien du menu. */
.nav-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto;padding-left:44px;}
.nav-actions .btn{padding:9px 20px;}
.cart-btn{
  position:relative;background:none;border:none;color:var(--ink);cursor:pointer;
  padding:6px;display:flex;align-items:center;justify-content:center;
}
.cart-btn svg{width:22px;height:22px;}
.cart-btn:hover{color:var(--copper-dark);}
.cart-count{
  position:absolute;top:-2px;right:-2px;background:var(--copper-dark);color:#fff;
  font-size:.65rem;font-weight:600;min-width:16px;height:16px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1;
}
.cart-count[hidden]{display:none;}

@media(max-width:900px){
  header.top .inner{
    display:flex;flex-wrap:wrap;row-gap:10px;padding:16px 20px;
  }
  /* flex-wrap en filet de sécurité : si jamais logo + langues ne tiennent pas sur une ligne
     (très petits téléphones), le sélecteur de langue redescend proprement plutôt que déborder. */
  .header-left{order:1;gap:18px;flex-wrap:wrap;row-gap:6px;max-width:100%;}
  /* Le groupe menu+panier+Acheter redevient un bloc normal en pleine largeur (order:3), avec le
     panier/Acheter sur sa propre ligne au-dessus du menu (qui s'enroule sur plusieurs lignes). */
  .nav-group{order:3;width:100%;flex-wrap:wrap;}
  nav.main{order:2;flex-wrap:wrap;gap:12px 16px;row-gap:10px;width:100%;justify-content:flex-start;}
  nav.main a{font-size:.78rem;}
  .nav-actions{order:1;margin-left:auto;padding-left:0;border-left:none;}
}
/* Très petits téléphones (iPhone SE, petits Android ~360-390px) : le logo seul suffit à remplir la
   largeur disponible, on resserre les langues pour éviter tout débordement horizontal. */
@media(max-width:400px){
  .header-left{gap:10px;}
  .lang-switch{gap:2px;}
  .lang-switch button{padding:4px 5px;font-size:.72rem;}
}

/* ---------- Hero (carrousel plein écran) ---------- */
.hero{position:relative;height:92vh;min-height:560px;max-height:900px;overflow:hidden;background:var(--ink);}
.hero .slides{position:absolute;inset:0;}
.hero .slide{
  position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .7s ease;
}
.hero .slide.active{opacity:1;pointer-events:auto;}
.hero .slide video, .hero .slide img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(58,42,32,.28) 0%, rgba(58,42,32,0) 26%, rgba(58,42,32,0) 55%, rgba(58,42,32,.62) 100%);
}
.hero .content{
  position:absolute;left:0;right:0;bottom:0;z-index:3;color:#fff;
  padding:0 48px 56px;max-width:640px;
}
.hero .badge{
  display:inline-block;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.65);
  font-size:.72rem;padding:6px 14px;border-radius:999px;margin-bottom:20px;letter-spacing:1px;text-transform:uppercase;
  backdrop-filter:blur(3px);
}
.hero h1{color:#fff;}
.hero p{color:rgba(255,255,255,.88);}
.hero .cta-row{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;}
.hero .cta-row .btn.secondary{border-color:#fff;color:#fff;}
.hero .cta-row .btn.secondary:hover{background:#fff;color:var(--ink);}

.hero .arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.7);
  background:rgba(58,42,32,.25);color:#fff;font-size:1.3rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);
  transition:.15s ease;
}
.hero .arrow:hover{background:rgba(58,42,32,.55);}
.hero .arrow.prev{left:24px;}
.hero .arrow.next{right:24px;}

.hero .dots{position:absolute;bottom:20px;right:48px;z-index:4;display:flex;gap:8px;}
.hero .dots button{
  width:8px;height:8px;border-radius:50%;border:1px solid rgba(255,255,255,.8);background:transparent;
  padding:0;cursor:pointer;
}
.hero .dots button.active{background:#fff;}

@media(max-width:700px){
  .hero{height:78vh;}
  .hero .content{padding:0 24px 40px;max-width:100%;}
  .hero .arrow{width:38px;height:38px;}
  .hero .arrow.prev{left:12px;}
  .hero .arrow.next{right:12px;}
  .hero .dots{right:24px;}
}

/* ---------- Bouton flottant précommander ---------- */
.floating-cta{
  position:fixed;right:22px;bottom:22px;z-index:80;
  box-shadow:0 14px 30px -10px rgba(58,42,32,.5);border-radius:2px;
  opacity:0;transform:translateY(14px);pointer-events:none;transition:.25s ease;
}
.floating-cta.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
body.video-lightbox-open .floating-cta,
body.video-lightbox-open .scroll-fab{opacity:0!important;pointer-events:none!important;}
@media(max-width:700px){.floating-cta{right:16px;bottom:16px;}}

/* ---------- Bouton flottant haut/bas de page ---------- */
.scroll-fab{
  position:fixed;right:22px;bottom:92px;z-index:79;
  width:46px;height:46px;border-radius:50%;
  background:var(--ink);color:var(--cream);border:1px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;line-height:1;cursor:pointer;
  opacity:0;transform:translateY(8px);pointer-events:none;transition:.25s ease;
  box-shadow:0 14px 30px -10px rgba(58,42,32,.45);
}
.scroll-fab:hover{background:var(--copper-dark);}
.scroll-fab.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
@media(max-width:700px){.scroll-fab{right:16px;bottom:78px;width:40px;height:40px;font-size:1.05rem;}}

/* ---------- Popup promo ---------- */
.promo-popup{
  position:fixed;left:22px;bottom:22px;z-index:80;
  background:var(--band-gradient);color:var(--ink);
  padding:16px 18px;border-radius:2px;max-width:280px;
  display:flex;align-items:center;gap:14px;
  box-shadow:0 14px 30px -10px rgba(58,42,32,.35);
  cursor:pointer;font-size:.85rem;letter-spacing:.3px;
}
.promo-popup .close{background:none;border:none;color:var(--ink);opacity:.65;font-size:1rem;cursor:pointer;line-height:1;}
.promo-popup .close:hover{opacity:1;}
.promo-popup[hidden]{display:none;}
.promo-popup{opacity:0;transform:translateY(14px);transition:.25s ease;}
.promo-popup.visible{opacity:1;transform:translateY(0);}
@media(max-width:700px){.promo-popup{left:16px;bottom:16px;max-width:calc(100vw - 32px);}}

/* ---------- Sections ---------- */
section{padding:76px 0;border-top:1px solid var(--border);}
section#concept{background:var(--cream-alt);}
.section-head{max-width:640px;margin-bottom:44px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
@media(max-width:860px){.problem-grid{grid-template-columns:1fr;}}
.problem-grid img{border-radius:var(--radius);border:1px solid var(--border);}
.concept-divider{max-width:120px;height:1px;background:var(--border);margin:60px auto;}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:860px){.steps{grid-template-columns:1fr;}}
.step{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:30px;}
.step .num{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--copper);color:var(--copper-dark);
  display:flex;align-items:center;justify-content:center;font-weight:600;margin-bottom:16px;font-family:'Fraunces',serif;
}

/* ---------- Galerie photos (carrousel) ---------- */
.photo-carousel{position:relative;max-width:900px;margin:0 auto;}
.photo-carousel .track-wrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);}
.photo-carousel .track{display:flex;transition:transform .5s ease;}
.photo-carousel .track > div{flex:0 0 100%;aspect-ratio:16/9;background:var(--card);}
.photo-carousel .track img{width:100%;height:100%;object-fit:cover;}
.photo-carousel .caption{padding:16px 4px 0;font-size:.85rem;color:var(--ink-soft);text-align:center;}
.photo-carousel .arrow{
  position:absolute;top:38%;transform:translateY(-50%);z-index:2;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--border);
  background:#fff;color:var(--ink);font-size:1.2rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px -8px rgba(58,42,32,.25);
}
.photo-carousel .arrow.prev{left:-20px;}
.photo-carousel .arrow.next{right:-20px;}
@media(max-width:620px){
  .photo-carousel .arrow.prev{left:6px;}
  .photo-carousel .arrow.next{right:6px;}
}

/* ---------- Galerie vidéos (bande défilante, vidéos côte à côte, lecture séquentielle) ---------- */
.video-carousel{position:relative;}
.video-carousel .vc-track-wrap{
  overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  -ms-overflow-style:none;scrollbar-width:none;
  margin:0 -24px;padding:0 24px;
}
.video-carousel .vc-track-wrap::-webkit-scrollbar{display:none;}
.video-carousel .vc-track{display:flex;gap:18px;}
.video-carousel .vc-track > .video-card{flex:0 0 240px;scroll-snap-align:start;}
.video-card{
  position:relative;aspect-ratio:9/16;background:var(--ink);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);transition:box-shadow .2s ease,transform .2s ease;cursor:pointer;
}
.video-card::after{
  content:'▶';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:rgba(58,42,32,.45);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;pointer-events:none;
  opacity:.9;transition:opacity .2s ease,transform .2s ease;
}
.video-card:hover::after{opacity:1;transform:translate(-50%,-50%) scale(1.08);}
.video-card.active{box-shadow:0 0 0 2px var(--copper);}
.video-card video, .video-card img{width:100%;height:100%;object-fit:cover;display:block;}
.video-card .label{
  position:absolute;left:12px;bottom:12px;color:#fff;font-size:.72rem;letter-spacing:.5px;
  background:rgba(58,42,32,.5);padding:5px 10px;border-radius:999px;
}
.video-carousel .arrow{
  position:absolute;top:38%;transform:translateY(-50%);z-index:2;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--border);
  background:#fff;color:var(--ink);font-size:1.2rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 20px -8px rgba(58,42,32,.25);
}
.video-carousel .arrow.prev{left:-20px;}
.video-carousel .arrow.next{right:-20px;}
@media(max-width:900px){
  .video-carousel .vc-track > .video-card{flex:0 0 200px;}
  .video-carousel .arrow.prev{left:0;}
  .video-carousel .arrow.next{right:0;}
}
@media(max-width:620px){
  .video-carousel .vc-track > .video-card{flex:0 0 62vw;}
  .video-carousel .arrow{width:36px;height:36px;font-size:1.05rem;}
}

.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;}
.spec{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
.spec .k{color:var(--copper-dark);font-size:.76rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-weight:600;}

/* ---------- Boutique (fiche produit + panier) ---------- */
.shop-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  max-width:960px;margin:0 auto;
}
@media(max-width:860px){.shop-card{grid-template-columns:1fr;}}
.shop-media{background:var(--cream-alt);min-height:280px;}
.shop-media img{width:100%;height:100%;object-fit:cover;display:block;}
.shop-info{padding:40px;}
.shop-info h3{margin-bottom:12px;}
.price{font-size:2.2rem;font-family:'Fraunces',serif;color:var(--copper-dark);margin:18px 0 4px;}
.price small{font-size:1rem;color:var(--ink-soft);font-family:inherit;}

.qty-row{display:flex;align-items:center;gap:16px;margin:22px 0;}
.qty-label{font-size:.82rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.5px;}
.qty-control{
  display:flex;align-items:center;border:1px solid var(--border);border-radius:999px;overflow:hidden;
}
.qty-control button{
  width:36px;height:36px;border:none;background:var(--cream-alt);color:var(--ink);
  font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.qty-control button:hover{background:var(--blush);}
.qty-control span{width:36px;text-align:center;font-weight:500;}

#btn-add-cart{width:100%;}

.cart-recap{
  max-width:560px;margin:32px auto 0;background:var(--cream-alt);border:1px solid var(--border);
  border-radius:var(--radius);padding:30px 32px;
}
.cart-recap h3{font-size:1.1rem;margin-bottom:18px;}
.recap-line{
  display:flex;justify-content:space-between;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--border);font-size:.92rem;
}
.recap-line.muted{color:var(--ink-soft);font-size:.82rem;}
.recap-line.total{border-bottom:none;font-family:'Fraunces',serif;font-size:1.2rem;color:var(--copper-dark);padding-top:16px;}
.cart-recap .buy-actions{display:flex;flex-direction:column;gap:12px;margin-top:22px;}

.faq details{border-bottom:1px solid var(--border);padding:18px 0;}
.faq summary{cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between;font-family:'Fraunces',serif;font-size:1.05rem;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:after{content:'+';color:var(--copper);font-size:1.2rem;}
.faq details[open] summary:after{content:'–';}
.faq p{margin-top:12px;}

/* ---------- Newsletter ---------- */
.newsletter{background:var(--band-gradient);color:var(--ink);padding:60px 0;}
.newsletter h2{color:var(--ink);}
.newsletter p{color:var(--ink-soft);max-width:520px;}
.newsletter form{
  display:flex;gap:0;margin-top:26px;max-width:560px;border-bottom:1px solid rgba(58,42,32,.3);
  padding-bottom:12px;
}
.newsletter input{
  flex:1;background:transparent;border:none;color:var(--ink);font-size:1rem;padding:10px 0;
  font-family:'Jost',sans-serif;
}
.newsletter input::placeholder{color:rgba(58,42,32,.5);}
.newsletter input:focus{outline:none;}
.newsletter button{
  background:none;border:none;color:var(--ink);text-transform:uppercase;letter-spacing:1px;
  font-size:.82rem;cursor:pointer;border-bottom:1px solid var(--ink);padding-bottom:2px;white-space:nowrap;
}
.newsletter button:hover{color:var(--copper-dark);border-color:var(--copper-dark);}
.newsletter .thanks{margin-top:16px;color:var(--copper-dark);font-size:.9rem;display:none;}
.newsletter.sent .thanks{display:block;}
.newsletter.sent form{display:none;}

footer{padding:50px 0;border-top:1px solid var(--border);background:var(--cream-alt);}
footer .inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center;}
footer .social{display:flex;flex-wrap:wrap;gap:12px;}
footer .social a{
  opacity:.5;filter:grayscale(1);color:var(--ink);cursor:pointer;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:50%;
  transition:opacity .2s ease,filter .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
footer .social a:hover{opacity:1;filter:none;transform:translateY(-2px);}
footer .social a.social-ig:hover{color:#d6249f;border-color:#d6249f;}
footer .social a.social-tiktok:hover{color:#000;border-color:#000;}
footer .social a.social-fb:hover{color:#1877f2;border-color:#1877f2;}
footer .social a.social-yt:hover{color:#ff0000;border-color:#ff0000;}
footer .social svg{width:18px;height:18px;display:block;}
footer .legal{font-size:.78rem;color:var(--ink-soft);margin-top:20px;}

.confidential-banner{
  background:#5a2a20;color:#f5dcd2;text-align:center;font-size:.82rem;
  padding:8px 12px;
}

/* ---------- Lecteur vidéo flottant (galerie vidéos) ---------- */
.video-lightbox{position:fixed;right:22px;bottom:22px;z-index:90;}
.video-lightbox[hidden]{display:none;}
.vl-frame{
  position:relative;width:min(260px,78vw);aspect-ratio:9/16;background:#000;
  border-radius:var(--radius);overflow:hidden;box-shadow:0 24px 50px -14px rgba(58,42,32,.55);
  opacity:0;transform:translateY(16px);transition:.25s ease;
}
.video-lightbox.visible .vl-frame{opacity:1;transform:translateY(0);}
.vl-frame video{width:100%;height:100%;object-fit:cover;display:block;}
.vl-close, .vl-mute{
  position:absolute;width:32px;height:32px;border-radius:50%;border:none;
  background:rgba(0,0,0,.5);color:#fff;font-size:.85rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.vl-close{top:10px;right:10px;}
.vl-mute{bottom:10px;right:10px;font-size:1rem;}
.vl-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;
  border:none;background:rgba(0,0,0,.4);color:#fff;font-size:1.2rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.vl-prev{left:8px;}
.vl-next{right:8px;}
@media(max-width:700px){
  .video-lightbox{right:16px;bottom:16px;}
  .vl-frame{width:min(200px,60vw);}
}

/* ---------- Popup -10% (modal après 10s) ---------- */
.promo-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;}
.promo-modal[hidden]{display:none;}
.promo-modal-backdrop{position:absolute;inset:0;background:rgba(58,42,32,.45);}
.promo-modal-box{
  position:relative;max-width:420px;width:100%;background:var(--card);border-radius:var(--radius);
  padding:38px 34px;text-align:center;box-shadow:0 30px 70px -20px rgba(58,42,32,.4);
  opacity:0;transform:translateY(12px) scale(.98);transition:.25s ease;
}
.promo-modal.visible .promo-modal-box{opacity:1;transform:translateY(0) scale(1);}
.promo-modal-close{
  position:absolute;top:14px;right:14px;background:none;border:none;color:var(--ink-soft);
  font-size:1rem;cursor:pointer;
}
.promo-modal-close:hover{color:var(--ink);}
.promo-modal-box h3{margin-top:10px;}
.promo-modal-box p{max-width:340px;margin:0 auto;}
.promo-modal-box form{display:flex;flex-direction:column;gap:12px;margin-top:22px;}
.promo-modal-box input{
  padding:13px 14px;border-radius:2px;border:1px solid var(--border);background:var(--cream-alt);
  color:var(--ink);font-size:.95rem;text-align:center;
}
.promo-modal-thanks{color:var(--copper-dark);font-weight:500;margin-top:18px;}
.promo-modal-thanks[hidden]{display:none;}