:root{
  --noir:#0A0A0C; --nuit:#101116; --carte:#131419; --trait:#24262D;
  --glace:#EDEFF2; --gris:#B9BEC6; --gris2:#9AA0A8; --or:#C9A96E;
  --titre:'Anton','Impact','Arial Narrow',sans-serif;
  --texte:'Manrope','Helvetica Neue',Helvetica,sans-serif;
  --marge:clamp(20px,4.5vw,64px);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --noir:#0A0A0C; --glace:#EDEFF2; } }
:root[data-theme="dark"]{ --noir:#0A0A0C; --glace:#EDEFF2; }
html{ scroll-padding-top:env(safe-area-inset-top,0px); background:var(--noir); }
*,*::before,*::after{ box-sizing:border-box; }
body{ margin:0; background:var(--noir); color:var(--glace); font-family:var(--texte); -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{ outline:2px solid var(--or); outline-offset:3px; }
[hidden]{ display:none !important; }

/* Navigation */
nav.barre{ position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:24px var(--marge); }
.logo{ font-family:var(--titre); font-size:clamp(20px,2vw,26px); letter-spacing:.08em; text-decoration:none; }
.logo{ position:relative; }
.logo-site{ position:absolute; left:0; top:100%; margin-top:-3px; font-family:var(--texte); font-size:12px; font-weight:500; letter-spacing:.03em; color:var(--gris); white-space:nowrap; }
.liens{ display:flex; align-items:center; gap:36px; }
.liens a{ font-size:15px; font-weight:500; text-decoration:none; }
.liens a:hover,.liens a[aria-current="page"]{ color:var(--or); }
.btn-contour{ padding:12px 22px; border:1px solid var(--or); color:var(--or); font-weight:600; }
.menu-btn{ display:none; width:44px; height:44px; align-items:center; justify-content:center; background:transparent; border:1px solid #3A3D46; color:var(--glace); cursor:pointer; }
.menu-mobile{ position:relative; z-index:3; display:flex; flex-direction:column; padding:0 var(--marge) 16px; }
.menu-mobile a{ padding:14px 0; border-bottom:1px solid var(--trait); font-size:17px; font-weight:600; text-decoration:none; }

/* Accueil */
.hero{ position:relative; margin-top:-92px; min-height:100svh; background:var(--nuit); overflow:hidden; display:flex; flex-direction:column; }
.neige{ position:absolute; inset:0; pointer-events:none; }
.neige span{ position:absolute; top:-12px; border-radius:50%; background:var(--glace); opacity:.5; animation:tombe linear infinite; }
@keyframes tombe{ to{ transform:translateY(110svh); } }
@media (prefers-reduced-motion: reduce){ .neige{ display:none; } }
.emplacement{ border:1px dashed #3A3D46; font-size:12px; line-height:1.5; color:var(--gris2); }
.hero .emplacement{ position:absolute; right:var(--marge); bottom:140px; max-width:300px; padding:10px 14px; }
.hero-espace{ height:92px; }
.hero-texte{ position:relative; z-index:2; margin-top:auto; padding:0 var(--marge) clamp(72px,10vh,110px); max-width:1040px; display:flex; flex-direction:column; gap:24px; }
h1{ margin:0; padding-top:.08em; font-family:var(--titre); font-weight:400; text-transform:uppercase; font-size:clamp(52px,8.4vw,120px); line-height:1.04; }
h1 .fin{ display:block; margin-top:.12em; }
.accroche{ margin:0; font-size:clamp(16px,1.5vw,20px); line-height:1.55; color:var(--gris); max-width:34em; }
.actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:6px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 28px; font-family:var(--texte); font-size:16px; font-weight:700; text-decoration:none; border:0; cursor:pointer; }
.btn-plein{ background:var(--or); color:var(--noir); }
.btn-plein:hover{ background:#D8BC86; }
.btn-ligne{ background:transparent; border:1px solid #5A5E68; color:var(--glace); font-weight:600; }
.btn-ligne:hover{ border-color:var(--glace); }
.fondu{ position:absolute; left:0; right:0; bottom:0; height:180px; background:linear-gradient(180deg,rgba(10,10,12,0),var(--noir)); z-index:1; }

.bloc{ padding:clamp(56px,8vw,96px) var(--marge); display:flex; flex-direction:column; gap:40px; }
.bloc.suite{ padding-top:0; }
.bloc-tete{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 48px; }
h2{ margin:0; padding-top:.06em; font-family:var(--titre); font-weight:400; text-transform:uppercase; font-size:clamp(38px,5vw,68px); line-height:1.08; }
.bloc-tete p{ margin:0; max-width:28em; font-size:17px; line-height:1.6; color:var(--gris); }
.grille{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.chemin{ display:flex; flex-direction:column; gap:18px; padding:26px; background:var(--carte); border:1px solid var(--trait); text-decoration:none; transition:border-color .2s; }
.chemin:hover{ border-color:var(--or); }
.sous{ font-size:14px; font-weight:600; color:var(--or); }
.visuel{ aspect-ratio:4/3; background:#0E0F13; display:flex; align-items:center; justify-content:center; padding:16px; text-align:center; }
.visuel-img{ padding:0; overflow:hidden; border:1px solid var(--trait); }
.visuel-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.chemin:hover .visuel-img img{ transform:scale(1.03); }
.chemin h3{ margin:0; padding-top:.06em; font-family:var(--titre); font-weight:400; text-transform:uppercase; font-size:clamp(34px,3vw,44px); line-height:1.08; }
.chemin p{ margin:0; font-size:16px; line-height:1.6; color:var(--gris); }
.entrer{ margin-top:auto; display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; }

/* Pages rubriques */
.page-tete{ position:relative; background:var(--nuit); overflow:hidden; }
.page-intro{ position:relative; z-index:2; padding:24px var(--marge) 64px; display:flex; flex-direction:column; gap:22px; max-width:980px; }
.retour{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; text-decoration:none; color:var(--gris); min-height:44px; }
.retour:hover{ color:var(--glace); }
.page-intro h1{ font-size:clamp(48px,7vw,104px); margin-top:4px; }
.video-cadre{ aspect-ratio:16/9; max-width:880px; display:flex; align-items:center; justify-content:center; padding:20px; text-align:center; background:#0E0F13; }
.section-titre{ font-family:var(--titre); font-weight:400; text-transform:uppercase; font-size:clamp(30px,3.4vw,46px); line-height:1.08; padding-top:.06em; margin:0; }
.liste{ display:flex; flex-direction:column; border-top:1px solid var(--trait); }
.item{ border-bottom:1px solid var(--trait); }
.item-ligne{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; }
.item-ligne strong{ font-size:clamp(17px,1.6vw,20px); font-weight:600; }
.item-ligne span.info{ display:block; margin-top:4px; font-size:15px; line-height:1.5; color:var(--gris2); font-weight:400; }
.etat{ flex-shrink:0; font-size:13px; font-weight:600; color:var(--gris2); }
.etat.dispo{ color:var(--or); }
details.item summary{ list-style:none; cursor:pointer; }
details.item summary::-webkit-details-marker{ display:none; }
details.item[open] .etat.dispo::after{ content:" (fermer)"; }
.fiche{ padding:4px 0 36px; max-width:760px; font-size:16px; line-height:1.7; color:var(--gris); }
.fiche h4{ margin:28px 0 8px; font-size:17px; color:var(--glace); }
.fiche p{ margin:0 0 12px; }
.fiche ul,.fiche ol{ margin:0 0 12px; padding-left:22px; }
.fiche li{ margin-bottom:6px; }
.fiche .cadre{ margin:6px 0 14px; padding:16px 18px; border:1px solid var(--trait); background:var(--carte); }
.fiche .cadre ul{ margin:8px 0 0; }
.fiche .mot{ margin-top:28px; padding-top:20px; border-top:1px solid var(--trait); font-family:var(--titre); font-size:22px; line-height:1.3; color:var(--glace); text-transform:uppercase; }
.outil{ padding:clamp(24px,3vw,40px); background:var(--carte); border:1px solid var(--trait); display:flex; flex-direction:column; gap:22px; }
.outil > p{ margin:0; color:var(--gris); line-height:1.6; max-width:40em; }
fieldset{ margin:0; padding:0; border:0; display:flex; flex-direction:column; gap:10px; }
legend{ margin-bottom:10px; font-size:17px; font-weight:600; }
.choix{ display:flex; flex-wrap:wrap; gap:10px; }
.choix label{ display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 16px; border:1px solid #3A3D46; cursor:pointer; font-size:15px; }
.choix input{ accent-color:var(--or); }
.choix label:has(input:checked){ border-color:var(--or); }
.resultat{ padding:20px; border:1px solid var(--or); line-height:1.6; }
.resultat strong{ color:var(--or); font-size:18px; }
.curseurs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.curseur label{ display:flex; justify-content:space-between; gap:12px; font-size:15px; font-weight:600; margin-bottom:10px; }
.curseur output{ color:var(--or); }
input[type=range]{ width:100%; accent-color:var(--or); min-height:44px; }
.chiffres{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.chiffre{ padding:18px; border:1px solid var(--trait); }
.chiffre span{ display:block; font-size:14px; color:var(--gris2); margin-bottom:6px; }
.chiffre b{ font-family:var(--titre); font-weight:400; font-size:clamp(28px,3vw,40px); }
.chiffre.fort b{ color:var(--or); }
.note{ font-size:13px; line-height:1.5; color:var(--gris2); margin:0; }
.jours{ display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:8px; }
.jours button{ aspect-ratio:1; min-height:44px; background:transparent; border:1px solid #3A3D46; color:var(--gris); font-family:var(--texte); font-size:14px; font-weight:600; cursor:pointer; }
.jours button[aria-pressed="true"]{ background:var(--or); border-color:var(--or); color:var(--noir); }
.compteur{ margin:0; font-weight:600; }
.fin-arc{ display:flex; flex-direction:column; gap:20px; }

/* Navigation entre rubriques, en bas de page */
.suite-nav{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:880px; margin-top:20px; }
.suite-lien{ display:flex; align-items:center; gap:18px; min-height:84px; padding:18px 24px; background:var(--carte); border:1px solid var(--trait); text-decoration:none; transition:border-color .2s; }
.suite-lien:hover{ border-color:var(--or); }
.suite-lien.precedent{ grid-column:1; }
.suite-lien.suivant{ grid-column:2; justify-content:flex-end; text-align:right; }
.suite-lien svg{ flex-shrink:0; color:var(--or); transition:transform .2s; }
.suite-lien.precedent:hover svg{ transform:translateX(-3px); }
.suite-lien.suivant:hover svg{ transform:translateX(3px); }
.suite-etiquette{ display:block; margin-bottom:4px; font-size:13px; font-weight:600; color:var(--gris2); }
.suite-nom{ display:block; padding-top:.06em; font-family:var(--titre); font-size:clamp(22px,2.2vw,28px); line-height:1.1; text-transform:uppercase; }

/* Pages légales */
.legal{ max-width:760px; }
.legal h2{ margin:32px 0 8px; padding:0; font-family:var(--texte); font-size:18px; font-weight:600; line-height:1.4; text-transform:none; color:var(--glace); }
.legal h2:first-child{ margin-top:0; }
.legal a{ color:var(--or); }
.a-remplir{ padding:1px 6px; border:1px dashed var(--or); color:var(--or); font-weight:600; white-space:normal; }
.maj{ margin-top:32px; font-size:14px; color:var(--gris2); }

/* Vidéo de fond : fondu depuis le noir au chargement, fondu enchaîné à chaque boucle */
.hero-fond{ position:absolute; inset:0; background:#000; opacity:0; transition:opacity 2.5s ease; }
.hero-fond.visible{ opacity:1; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.55); opacity:0; }
.hero-video:first-child{ opacity:1; }

/* Vidéos des rubriques : sans son, lues à chaque apparition, figées sur la dernière image avec « Revoir » */
.video-cadre.avec-video{ position:relative; padding:0; }
.video-cadre video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-cadre video.terminee{ cursor:pointer; }
.revoir{ position:absolute; right:12px; bottom:12px; z-index:1; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; background:rgba(10,10,12,.72); border:1px solid var(--or); color:var(--or); font-family:var(--texte); font-size:14px; font-weight:600; cursor:pointer; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s, background .2s, color .2s; }
.revoir.visible{ opacity:1; visibility:visible; }
.revoir:hover{ background:var(--or); color:var(--noir); }
/* Intro de Malik : vidéo en grand, avec le son */
.intro{ width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:clamp(64px,7vw,88px) var(--marge); border:0; background:transparent; color:var(--glace); }
.intro[open]{ display:flex; align-items:center; justify-content:center; }
.intro::backdrop{ background:rgba(5,5,7,.94); }
.intro-video{ display:block; width:100%; max-width:1280px; max-height:100%; aspect-ratio:16/9; background:#000; }
.intro-fermer{ position:absolute; top:max(16px,env(safe-area-inset-top,0px)); right:var(--marge); width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid #3A3D46; color:var(--glace); cursor:pointer; }
html:has(.intro[open]){ overflow:hidden; }
.intro-fermer:hover{ border-color:var(--or); color:var(--or); }

footer{ border-top:1px solid #1E2026; padding:36px var(--marge) 44px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 40px; }
.signature{ margin:0; font-family:var(--titre); font-size:clamp(18px,1.8vw,22px); letter-spacing:.05em; text-transform:uppercase; }
.pied-droite{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--gris2); }
.pied-droite a{ color:var(--glace); text-decoration:none; }
.pied-liens{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; }
.pied-site::before{ content:"·"; margin-right:10px; }
.pied-legal{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.pied-droite .pied-legal a{ color:var(--gris2); }
.pied-droite .pied-legal a:hover,.pied-droite .pied-legal a[aria-current="page"]{ color:var(--glace); }
@media (max-width:900px){
  .liens{ display:none; }
  .menu-btn{ display:inline-flex; }
  .grille,.curseurs,.chiffres{ grid-template-columns:1fr; }
  .hero .emplacement{ position:relative; right:auto; bottom:auto; margin:0 var(--marge); max-width:none; z-index:2; }
  .actions .btn{ width:100%; }
  .signature{ font-size:min(18px, calc((100vw - 48px) / 21.5)); }
  .jours{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .suite-nav{ grid-template-columns:1fr; }
  .suite-lien.precedent,.suite-lien.suivant{ grid-column:auto; }
}

/* Boutique */
.produits{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.produit{ position:relative; display:flex; flex-direction:column; gap:18px; padding:26px; background:var(--carte); border:1px solid var(--trait); }
.produit-phare{ border-color:var(--or); }
.badge{ position:absolute; top:-1px; right:-1px; z-index:1; padding:7px 12px; background:var(--or); color:var(--noir); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.produit-tete{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.produit-nom{ margin:0; padding-top:.06em; font-family:var(--titre); font-weight:400; text-transform:uppercase; font-size:clamp(34px,3vw,44px); line-height:1.08; }
.prix{ flex-shrink:0; font-family:var(--titre); font-size:clamp(30px,2.6vw,40px); color:var(--or); }
.produit-accroche{ margin:0; font-size:17px; line-height:1.6; color:var(--glace); font-weight:600; }
.produit-liste{ margin:0; padding-left:20px; font-size:16px; line-height:1.6; color:var(--gris); }
.produit-liste li{ margin-bottom:6px; }
.produit-liste li::marker{ color:var(--or); }
.produit-livraison{ margin:0; font-size:14px; line-height:1.5; color:var(--gris2); }
.produit-achat{ margin-top:auto; }
.produit-achat .btn{ width:100%; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-plein:disabled:hover{ background:var(--or); }
.banniere{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px; padding:22px 26px; background:var(--carte); border:1px solid var(--trait); }
.banniere p{ margin:0; font-size:17px; font-weight:600; line-height:1.5; }
.banniere a{ flex-shrink:0; text-decoration:none; white-space:nowrap; }
@media (max-width:900px){
  .produits{ grid-template-columns:1fr; }
  .banniere a{ width:100%; text-align:center; }
}