*{box-sizing:border-box}
html{color-scheme:dark light}
body{margin:0;background:var(--page);color:var(--texte);
  font:400 15px/1.6 var(--corps);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

.site{max-width:1180px;margin:0 auto;background:var(--fond);
  border-left:1px solid var(--trait);border-right:1px solid var(--trait);min-height:100vh}

/* ---------- éléments de langage ---------- */
.eyebrow{font:600 11px/1 var(--label);letter-spacing:.26em;text-transform:uppercase;color:var(--bleu-vif)}
.btn{display:inline-block;background:var(--bleu);color:#fff;padding:14px 24px;
  font:600 13px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;
  clip-path:var(--chanfrein);transition:background .15s}
.btn:hover{background:var(--bleu-vif)}
.btn.alt{background:var(--panneau-2);color:var(--texte);box-shadow:inset 0 0 0 1px var(--trait)}
.btn.alt:hover{background:var(--panneau)}
.btn.plein{width:100%;text-align:center}
.tag{display:inline-block;background:var(--bleu);color:#fff;padding:5px 10px;
  font:600 10px/1 var(--label);letter-spacing:.14em;text-transform:uppercase}
.tag.sombre{background:rgba(10,10,12,.88);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.legend{color:var(--gris);font-size:14px}

.titre-section{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.titre-section h2{font:400 24px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;margin:0}
.titre-section .dash{display:flex;flex-direction:column;gap:4px}
.titre-section .dash i{display:block;width:26px;height:3px;background:var(--bleu-vif)}
.titre-section .all{margin-left:auto;font:500 11px/1 var(--label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris)}

/* ---------- navigation ---------- */
.nav{display:flex;align-items:center;gap:22px;padding:14px var(--pas);
  background:var(--noir);color:#ECEEF1;border-bottom:2px solid var(--bleu);flex-wrap:wrap}
.nav .logo{width:158px;height:52px;flex:none;
  background:url(/img/wbd-collections-lockup.png) no-repeat center/contain}
.nav .links{display:flex;gap:18px;font:500 12px/1 var(--label);letter-spacing:.14em;text-transform:uppercase}
.nav .links a:hover{color:var(--bleu-vif)}
.nav .links a.on{color:var(--bleu-vif)}
.nav .spacer{flex:1}
.recherche{display:flex;align-items:center;background:var(--panneau-2);
  box-shadow:inset 0 0 0 1px var(--nav-trait)}
.recherche input{border:0;outline:0;background:transparent;color:var(--texte);
  padding:10px 13px;font:400 13px var(--corps);width:168px}
.recherche input::placeholder{color:var(--placeholder)}
.recherche button{background:var(--bleu);color:#fff;padding:10px 14px;
  font:600 11px var(--label);letter-spacing:.1em}
.bascule-theme{display:flex;align-items:center;gap:7px;padding:8px 11px;
  box-shadow:inset 0 0 0 1px var(--nav-trait);color:#ECEEF1;
  font:600 10px/1 var(--label);letter-spacing:.14em;text-transform:uppercase}
.bascule-theme:hover{box-shadow:inset 0 0 0 1px var(--bleu-vif);color:var(--bleu-vif)}
.bascule-theme svg{display:block}
[data-theme="sombre"] .icone-clair{display:none}
[data-theme="clair"] .icone-sombre{display:none}
.lang{font:500 11px/1 var(--mono);letter-spacing:.12em;color:#8C9099}
.lang b{color:#fff}

/* ---------- accueil ---------- */
.hero{position:relative;padding:46px var(--pas) 40px;overflow:hidden;background:var(--hero)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--bruit);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.5'/></svg>")}
.hero::after{content:"";position:absolute;top:-40%;left:40%;width:190px;height:190%;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--hero-slash),transparent);transform:rotate(14deg)}
.hero-in{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:center}
.hero h1{font:400 52px/0.96 var(--display);letter-spacing:.01em;text-transform:uppercase;margin:0}
.hero h1 span{color:var(--bleu-vif)}
.hero p{color:var(--texte-doux);max-width:40ch;margin:16px 0 0}
.hero .actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.hero .stats{display:flex;gap:26px;margin-top:30px;padding-top:20px;border-top:1px solid var(--filet-clair)}
.hero .stats b{display:block;font:400 26px/1 var(--display);letter-spacing:.02em}
.hero .stats span{font:500 10px/1.4 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.mosaique{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:132px;gap:10px}
.tuile{position:relative;overflow:hidden;clip-path:var(--chanfrein);background:var(--vide)}
.tuile img{width:100%;height:100%;object-fit:cover}
.tuile .tag{position:absolute;left:0;bottom:0;z-index:2}
.tuile.haute{grid-row:span 2}

.section{padding:36px var(--pas)}
.section.serree{padding-top:0}
.rubriques{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rubriques a{position:relative;height:158px;overflow:hidden;clip-path:var(--chanfrein);background:var(--vide)}
.rubriques img{width:100%;height:100%;object-fit:cover;opacity:var(--media-opacite)}
.rubriques .bas{position:absolute;inset:auto 0 0 0;padding:14px 13px 11px;z-index:2;color:#fff;
  background:var(--voile);display:flex;align-items:flex-end;gap:8px}
.rubriques .bas b{font:500 14px/1.1 var(--label);letter-spacing:.09em;text-transform:uppercase}
.rubriques .bas span{margin-left:auto;font:500 12px/1 var(--mono);color:var(--bleu-vif)}

/* ---------- carte lot ---------- */
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gouttiere)}
.grille.quatre{grid-template-columns:repeat(4,1fr)}
.carte{background:var(--panneau);border:1px solid var(--trait);display:flex;flex-direction:column;
  box-shadow:var(--ombre);transition:border-color .15s}
.carte:hover{border-color:var(--bleu-vif)}
.carte .vue{position:relative;aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--trait)}
.carte .vue img{width:100%;height:100%;object-fit:cover}
.carte .vue .tag{position:absolute;left:0;top:0;z-index:2}
.carte .corps{padding:13px 14px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.carte .sur{font:600 10px/1 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--bleu-vif)}
.carte .titre{font:600 14.5px/1.32 var(--corps)}
.carte .spec{font:400 11px/1.45 var(--mono);color:var(--gris)}
.carte .pied{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;
  border-top:1px solid var(--trait)}
.carte .est{font:600 15px/1 var(--mono)}
.carte .dispo{margin-left:auto;font:400 10px/1 var(--mono);color:var(--gris)}

/* ---------- catalogue ---------- */
.cat{display:grid;grid-template-columns:246px 1fr}
.filtres{border-right:1px solid var(--trait);padding:24px 20px;background:var(--panneau-2)}
.filtres h3{font:400 17px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;
  margin:0 0 18px;padding-bottom:10px;border-bottom:2px solid var(--bleu)}
.fgroup{margin-bottom:24px}
.fgroup .lbl{font:600 10px/1 var(--label);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gris);margin-bottom:10px}
.fopt{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:13.5px}
.fopt i{width:13px;height:13px;flex:none;display:block;box-shadow:inset 0 0 0 1px var(--gris)}
.fopt.on i{background:var(--bleu-vif);box-shadow:none}
.fopt.on{font-weight:600}
.fopt b{margin-left:auto;font:400 11px var(--mono);color:var(--gris)}
.reset{font:600 10px/1 var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--bleu-vif)}

.resultats{padding:24px var(--pas) 32px}
.res-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;
  padding-bottom:14px;border-bottom:1px solid var(--trait)}
.res-head h1{margin:0;font:400 24px/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.res-head .count{font:400 12px var(--mono);color:var(--gris)}
.res-head .tri{margin-left:auto;display:flex;align-items:center;gap:9px;
  font:500 11px var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.res-head select{background:var(--panneau-2);box-shadow:inset 0 0 0 1px var(--trait);border:0;
  padding:8px 12px;font:500 11px var(--mono);color:var(--texte)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{background:var(--panneau-2);box-shadow:inset 0 0 0 1px var(--trait);
  padding:6px 10px;font:500 11px/1 var(--mono)}
.chip b{color:var(--bleu-vif);margin-left:7px}
.vide-msg{padding:40px 0;color:var(--gris)}

/* ---------- fiche lot ---------- */
.fil{padding:14px var(--pas);border-bottom:1px solid var(--trait);font:400 12px var(--mono);color:var(--gris)}
.fil b{color:var(--texte);font-weight:400}
.detail{display:grid;grid-template-columns:1.12fr 1fr}
.visuels{padding:var(--pas);border-right:1px solid var(--trait)}
.grand{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--trait);background:var(--vide)}
.grand img{width:100%;height:100%;object-fit:cover}
.grand .tag{position:absolute;left:0;top:0;z-index:2}
.vignettes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.vignettes span{aspect-ratio:1/1;overflow:hidden;border:1px solid var(--trait);display:block}
.vignettes span.on{border-color:var(--bleu-vif);box-shadow:0 0 0 1px var(--bleu-vif)}
.vignettes img{width:100%;height:100%;object-fit:cover}
.infos{padding:26px 24px}
.infos h1{font:400 32px/1.04 var(--display);letter-spacing:.02em;text-transform:uppercase;margin:12px 0 0}
.infos .sous{color:var(--texte-doux);margin-top:12px;font-size:14.5px}
table.specs{width:100%;border-collapse:collapse;margin:24px 0}
table.specs th,table.specs td{text-align:left;padding:10px 0;border-bottom:1px solid var(--trait);vertical-align:top}
table.specs th{font:500 10px/1.5 var(--label);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris);width:44%}
table.specs td{font:500 13.5px/1.45 var(--corps)}
table.specs td.m{font-family:var(--mono);font-size:12.5px}
.estim{display:flex;align-items:center;gap:16px;background:var(--panneau);
  box-shadow:inset 0 0 0 1px var(--trait);border-left:4px solid var(--bleu);
  padding:16px 18px;margin-bottom:14px}
.estim .k{font:600 10px/1.4 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.estim .v{font:400 28px/1 var(--display);letter-spacing:.02em}
.actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- formulaires ---------- */
.deux{display:grid;grid-template-columns:1fr 1.15fr}
.colonne-texte{padding:34px 26px;border-right:1px solid var(--trait);background:var(--panneau-2)}
.colonne-texte h1{font:400 36px/1 var(--display);letter-spacing:.02em;text-transform:uppercase;margin:14px 0 0}
.colonne-texte p{color:var(--texte-doux);margin-top:14px}
.etapes{margin-top:28px;counter-reset:e}
.etapes div{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--trait)}
.etapes div::before{counter-increment:e;content:counter(e,decimal-leading-zero);
  font:500 11px/1.6 var(--mono);color:var(--bleu-vif);flex:none}
.etapes b{display:block;font:500 14px/1.3 var(--label);letter-spacing:.08em;text-transform:uppercase}
.etapes em{font-style:normal;font-size:13.5px;color:var(--gris)}
.encart{margin-top:26px;background:var(--panneau);border-left:4px solid var(--bleu);
  padding:14px 16px;font-size:13.5px;color:var(--texte-doux)}

.formulaire{padding:30px 26px}
.form-head{display:flex;align-items:center;gap:12px;margin-bottom:22px;
  padding-bottom:14px;border-bottom:2px solid var(--bleu)}
.form-head h2{font:400 20px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;margin:0}
.form-head .pas{margin-left:auto;font:500 11px var(--mono);color:var(--gris)}
.ligne{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.ligne.un{grid-template-columns:1fr}
.champ label{display:block;font:600 10px/1 var(--label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris);margin-bottom:8px}
.champ input,.champ select,.champ textarea{width:100%;border:0;outline:0;
  background:var(--panneau-2);box-shadow:inset 0 0 0 1px var(--trait);
  padding:12px 13px;font:400 14px var(--corps);color:var(--texte)}
.champ input::placeholder,.champ textarea::placeholder{color:var(--placeholder)}
.champ input:focus,.champ select:focus,.champ textarea:focus{box-shadow:inset 0 0 0 2px var(--bleu-vif)}
.champ textarea{min-height:92px;resize:vertical}
.choix{display:flex;gap:8px;flex-wrap:wrap}
.choix label{display:block;margin:0}
.choix input{position:absolute;opacity:0;pointer-events:none}
.choix span{display:block;background:var(--panneau-2);box-shadow:inset 0 0 0 1px var(--trait);
  padding:9px 13px;font:500 12px var(--corps)}
.choix input:checked + span{background:var(--bleu);box-shadow:none;color:#fff;font-weight:600}
.depot{border:1px dashed var(--depot-bord);background:var(--depot-fond);padding:24px;text-align:center}
.depot b{display:block;font:500 14px/1.3 var(--label);letter-spacing:.08em;text-transform:uppercase}
.depot em{font-style:normal;font-size:13px;color:var(--gris)}
.depot .fichiers{display:flex;gap:8px;justify-content:center;margin-top:14px}
.depot .fichiers i{width:52px;height:52px;background:var(--panneau-2);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--trait);overflow:hidden;color:var(--gris);font:400 20px var(--mono)}
.depot .fichiers img{width:100%;height:100%;object-fit:cover}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--gris);margin:18px 0 20px}
.consent input{width:14px;height:14px;flex:none;margin-top:4px;accent-color:var(--bleu)}
.recu{background:var(--panneau);border-left:4px solid var(--bleu-vif);padding:16px 18px;margin-bottom:20px}
.recu b{display:block;font:500 14px var(--label);letter-spacing:.08em;text-transform:uppercase}
.recu span{font-size:13.5px;color:var(--texte-doux)}

/* alertes */
.mots{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.mots a{background:var(--panneau-2);box-shadow:inset 0 0 0 1px var(--trait);
  padding:7px 11px;font:500 12px var(--corps);color:var(--gris)}
.mots a.on{background:var(--mot-actif-fond);box-shadow:inset 0 0 0 1px var(--bleu-vif);
  color:var(--mot-actif-texte)}
.apercu{background:var(--panneau);border:1px solid var(--trait);padding:16px;margin-top:6px}
.apercu .t{display:flex;align-items:center;gap:10px;margin-bottom:12px;
  font:600 10px/1 var(--label);letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.apercu .t b{color:var(--bleu-vif)}
.mini{display:flex;gap:11px;align-items:center;padding:9px 0;border-top:1px solid var(--trait)}
.mini .vig{width:54px;height:42px;flex:none;overflow:hidden;background:var(--vide)}
.mini .vig img{width:100%;height:100%;object-fit:cover}
.mini .txt b{display:block;font:600 13px/1.3 var(--corps)}
.mini .txt em{font-style:normal;font:400 11px var(--mono);color:var(--gris)}
.mini .pr{margin-left:auto;font:600 13px var(--mono)}
.alerte{display:flex;align-items:center;gap:14px;padding:15px 16px;background:var(--panneau);
  border:1px solid var(--trait);margin-bottom:9px}
.alerte .cle{display:block;font:600 15px/1.2 var(--corps);margin-bottom:3px}
.alerte .det{display:block;font:400 11px/1.5 var(--mono);color:var(--gris)}
.alerte .nb{margin-left:auto;font:500 12px var(--mono);color:var(--bleu-vif)}
.interrupteur{width:40px;height:21px;background:var(--bleu);position:relative;flex:none}
.interrupteur::after{content:"";position:absolute;top:3px;right:3px;width:15px;height:15px;
  background:var(--bascule-bouton)}
.interrupteur.off{background:var(--bascule-off)}
.interrupteur.off::after{right:auto;left:3px}

/* ---------- applications ---------- */
.apps-tete{padding:44px 26px 34px;position:relative;overflow:hidden;background:var(--hero)}
.apps-tete h1{font:400 40px/1 var(--display);letter-spacing:.02em;text-transform:uppercase;margin:14px 0 0}
.apps-tete p{color:var(--texte-doux);max-width:56ch;margin-top:14px}
.telech{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gouttiere);padding:0 26px 8px}
.plateforme{background:var(--panneau);border:1px solid var(--trait);padding:22px 22px 24px;
  display:flex;flex-direction:column;gap:13px;box-shadow:var(--ombre)}
.plateforme .haut{display:flex;align-items:center;gap:14px}
.plateforme .ico{width:46px;height:46px;flex:none;background:var(--panneau-2);
  box-shadow:inset 0 0 0 1px var(--trait);display:grid;place-items:center;color:var(--bleu-vif)}
.plateforme h2{margin:0;font:400 20px/1 var(--display);letter-spacing:.05em;text-transform:uppercase}
.plateforme .req{font:400 13px/1.4 var(--corps);color:var(--gris)}
.plateforme .meta{display:flex;gap:14px;flex-wrap:wrap;font:400 11px/1 var(--mono);color:var(--gris);
  padding-top:12px;border-top:1px solid var(--trait);margin-top:auto}
.plateforme .meta b{color:var(--texte);font-weight:500}
.notes{padding:26px}
.notes .bloc{background:var(--panneau);border:1px solid var(--trait);border-left:4px solid var(--bleu);
  padding:20px 22px}
.notes .v{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.notes .v b{font:400 19px/1 var(--display);letter-spacing:.04em}
.notes .v span{font:400 11px var(--mono);color:var(--gris)}
.notes ul{margin:0;padding-left:18px;color:var(--texte-doux);font-size:14px}
.notes li{margin-bottom:5px}

/* ---------- pied de page ---------- */
.piedpage{border-top:2px solid var(--bleu);background:var(--noir);padding:28px var(--pas);
  display:flex;gap:44px;flex-wrap:wrap;color:#9AA0A8}
.piedpage .logo{width:150px;height:52px;flex:none;
  background:url(/img/wbd-collections-bandeau.png) no-repeat center/contain}
.piedpage .col{font-size:13.5px;line-height:2}
.piedpage .col b{display:block;color:#ECEEF1;font:600 10px/1 var(--label);
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:11px}
.piedpage .col a:hover{color:var(--bleu-vif)}

@media (max-width:900px){
  .hero-in,.cat,.detail,.deux,.telech{grid-template-columns:1fr}
  .hero h1{font-size:36px}
  .rubriques,.grille,.grille.quatre{grid-template-columns:repeat(2,1fr)}
  .filtres,.visuels,.colonne-texte{border-right:0;border-bottom:1px solid var(--trait)}
  .ligne{grid-template-columns:1fr}
  .nav .links{order:3;width:100%;gap:14px;flex-wrap:wrap}
}