@import url("/fonts/fonts.css");

:root{
  --fond:#ffffff; --papier:#ffffff; --gris:#edf4fa; --encre:#14243a; --encre2:#4a5b70;
  --anthracite:#0e2a47; --anthracite2:#173b61; --blanc-pvc:#f4f7fb; --verre:#8fd0ff; --verre-pale:#e2f1fc;
  --bleu:#1765b0; --bleu-fonce:#0e4a85; --vert:#1d7a4c; --vert-pale:#e4f4ea; --rouge:#b0452e;
  --laiton:#ffb547; --laiton-fonce:#f09a1a;
  --titre:"Barlow Condensed","Arial Narrow",sans-serif;
  --texte:"Barlow",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --marge:clamp(16px,4vw,40px); --max:1240px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--encre);font:400 17px/1.55 var(--texte)}
a{color:var(--bleu);text-underline-offset:3px}
a:hover{color:var(--bleu-fonce)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--titre);font-weight:700;line-height:1.02;letter-spacing:-.01em;margin:0 0 .4em}
h1{font-size:clamp(40px,5.6vw,76px)}
h2{font-size:clamp(28px,3.2vw,44px)}
h3{font-size:24px;line-height:1.1}
p{margin:0 0 1em}
.cadre{max-width:var(--max);margin:0 auto;padding:0 var(--marge)}
.etroit{max-width:820px}
.vh,.evitement{position:absolute;left:-9999px}
.evitement:focus{left:16px;top:16px;z-index:10;background:#fff;padding:8px 12px}
:focus-visible{outline:3px solid var(--verre);outline-offset:2px}

/* En-tête */
.entete{background:var(--anthracite);color:var(--blanc-pvc);position:sticky;top:0;z-index:5}
.entete-in{display:flex;align-items:center;gap:24px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;color:var(--blanc-pvc);text-decoration:none;font:600 22px/1 var(--titre);letter-spacing:.01em}
.logo b{font-weight:700;color:var(--verre)}
.logo:hover{color:#fff}
.menu{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.menu a{color:var(--blanc-pvc);text-decoration:none;font-weight:500;font-size:16px;padding:8px 12px}
.menu a:hover,.menu a[aria-current]{color:#fff;background:var(--anthracite2)}
.menu-bouton{display:none;margin-left:auto;background:none;border:2px solid var(--blanc-pvc);color:var(--blanc-pvc);font:600 16px var(--texte);padding:6px 14px;cursor:pointer}
@media(max-width:900px){
  .menu-bouton{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:64px;background:var(--anthracite);flex-direction:column;padding:8px var(--marge) 16px}
  .menu.ouvert{display:flex}
  .menu a{padding:12px 0;font-size:18px}
}

/* Hero */
.hero{background:var(--anthracite) url(/img/ciel-nuit.svg) center/cover no-repeat;color:var(--blanc-pvc);padding:clamp(40px,7vw,96px) 0 clamp(48px,7vw,96px)}
.hero-grille{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{color:#fff;max-width:11em}
.hero .chapo{font-size:clamp(18px,1.6vw,21px);color:#d7dcda;max-width:34em}
.recherche{display:grid;grid-template-columns:1fr 1fr 1.2fr auto;gap:10px;margin-top:28px;align-items:end}
.recherche label{display:flex;flex-direction:column;gap:6px;position:relative;font-size:15px;color:#c3cac8}
.recherche input,.recherche select{font:600 22px var(--texte);padding:12px 14px;border:0;background:var(--blanc-pvc);color:var(--encre);width:100%;border-radius:0;appearance:none}
.recherche select{font-size:18px;padding:15px 14px}
.recherche i{position:absolute;right:12px;bottom:15px;font-style:normal;color:var(--encre2);font-size:16px}
.recherche button,.bouton{font:700 19px var(--texte);background:var(--laiton);color:#1b1407;border:0;padding:15px 22px;cursor:pointer;text-decoration:none;display:inline-block;transition:background .15s,transform .15s}
.recherche button:hover,.bouton:hover{background:var(--laiton-fonce);color:#1b1407}
.recherche button:active,.bouton:active{transform:translateY(1px)}
.bouton{background:var(--laiton);color:#1b1407}

/* La fenêtre interactive */
.vitre-zone{display:flex;flex-direction:column;align-items:center;gap:18px}
.vitre{--echelle:2.6px;position:relative;width:calc(var(--l)*var(--echelle));height:calc(var(--h)*var(--echelle));max-width:100%;transition:width .08s,height .08s;margin:28px 34px 0 0;touch-action:none}
.vitre-dormant{position:absolute;inset:0;background:var(--blanc-pvc);padding:9%}
.vitre-ouvrant{position:absolute;inset:7%;background:var(--blanc-pvc);border:solid #d9ddd8;border-width:6px;box-shadow:inset 0 0 0 7px var(--blanc-pvc)}
.vitre-ouvrant::before{content:"";position:absolute;inset:7px;background:linear-gradient(160deg,#cfe6ef 0%,#a7cfdf 55%,#8fbfd3 100%)}
.vitre-ouvrant::after{content:"";position:absolute;top:7px;bottom:7px;left:18%;width:14%;background:rgba(255,255,255,.28);transform:skewX(-12deg)}
.vitre-poignee{position:absolute;right:-2px;top:50%;width:7px;height:34px;margin-top:-17px;background:var(--laiton);z-index:1}
.vitre-coin{position:absolute;right:-18px;bottom:-18px;width:38px;height:38px;border-radius:50%;background:var(--laiton);border:4px solid var(--anthracite);cursor:nwse-resize;padding:0}
.vitre-coin:hover{background:#fff}
.cote{position:absolute;font:700 18px var(--titre);color:var(--verre);white-space:nowrap}
.cote-l{left:0;right:0;top:-30px;text-align:center}
.cote-h{right:-70px;top:50%;transform:translateY(-50%)}
.vitre-resultat{font-size:18px;text-align:center;min-height:3.2em;max-width:26em;color:#e3e7e5}
.vitre-resultat b{font:700 30px/1.1 var(--titre);color:#fff;display:block}
.vitre-resultat a{color:var(--verre)}
@media(max-width:900px){
  .hero-grille{grid-template-columns:1fr}
  .recherche{grid-template-columns:1fr 1fr}
  .recherche .r-mat,.recherche button{grid-column:span 2}
  .vitre{--echelle:1.9px}
}

/* Blocs */
.bloc{padding:clamp(56px,8vw,112px) 0}
.bloc-gris{background:var(--gris)}
.bloc-sombre{background:var(--anthracite);color:var(--blanc-pvc)}
.bloc-sombre h2{color:#fff}
.intro{font-size:19px;max-width:46em;color:var(--encre)}
.note{font-size:15px;color:var(--encre2);max-width:60em;margin-top:16px}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
@media(max-width:900px){.deux{grid-template-columns:1fr}}
.tete-page{padding:clamp(32px,5vw,64px) 0 8px}
.tete-page .chapo{font-size:20px;max-width:46em}
.chapo b{color:var(--vert);font-weight:600}
.fil ol{list-style:none;margin:0;padding:18px var(--marge) 0;max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;gap:6px;font-size:15px;color:var(--encre2)}
.fil li+li::before{content:"›";margin-right:6px}
.fil a{color:var(--encre2)}
figure{margin:0}
figcaption{font-size:15px;color:var(--encre2);margin-top:8px}
.photo-haute img{aspect-ratio:4/5;object-fit:cover;width:100%}
.photo-large img{aspect-ratio:4/3;object-fit:cover;width:100%}
.lien-fort{font-weight:600;font-size:18px}

/* Tableaux */
.tableau{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--papier);margin-top:24px}
table{border-collapse:collapse;width:100%;font-size:16px}
th,td{padding:14px 16px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--gris)}
thead th{background:var(--anthracite2);color:var(--blanc-pvc);font-weight:600;font-size:15px;white-space:nowrap;cursor:default}
table[data-tri] thead th{cursor:pointer}
tbody tr:hover{background:#f8faf9}
tr.meilleur{background:var(--vert-pale)}
tr.meilleur:hover{background:#d8ecdf}
tr.meilleur .t-prix{color:var(--vert)}
.t-boutique a{font-weight:600;text-decoration:none}
td small{display:block;color:var(--encre2);font-size:14px}
.t-prix{font:700 22px var(--titre);white-space:nowrap}
.t-num{white-space:nowrap;font-variant-numeric:tabular-nums}
.t-modele{min-width:14em}
.bouton-offre{display:inline-block;white-space:nowrap;font-weight:700;font-size:15px;padding:9px 14px;background:var(--laiton);color:#1b1407;text-decoration:none;transition:background .15s}
.bouton-offre:hover{background:var(--laiton-fonce);color:#1b1407}
.nd{color:#7a8589;font-style:italic;font-size:15px}
table.fiche th{width:36%;background:none;color:var(--encre2);font-weight:500}
@media(max-width:700px){
  th,td{padding:11px 10px}
  .t-prix{font-size:20px}
}

/* Listes de liens */
.tailles,.cats,.guides{list-style:none;padding:0;margin:24px 0;display:grid;gap:8px}
.tailles{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.tailles a,.cats a,.guides a{display:flex;flex-direction:column;gap:2px;background:var(--papier);padding:16px 18px;text-decoration:none;color:var(--encre);transition:background .15s,transform .15s}
.tailles a:hover,.cats a:hover,.guides a:hover{background:var(--verre-pale);transform:translateY(-2px)}
.tailles b,.cats b{font:700 24px var(--titre)}
.tailles span{color:var(--vert);font-weight:700}
.tailles a{border-left:4px solid var(--verre)}
.tailles a:hover{border-left-color:var(--laiton)}
.tailles small,.guides small{color:var(--encre2);font-size:14px}
.bloc-gris .tailles a{background:var(--papier)}
.cats b{font-size:28px}
.cats span{color:var(--encre2)}
.guides b{font:700 26px var(--titre)}
.depts{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.depts b{font-size:21px}

/* Chiffres */
.chiffres dl{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:32px 0 0}
.chiffres dt{font:700 clamp(48px,6vw,88px)/1 var(--titre);color:var(--laiton);font-variant-numeric:tabular-nums}
.chiffres dd{margin:8px 0 0;font-size:18px;color:#d7dcda}
@media(max-width:800px){.chiffres dl{grid-template-columns:1fr 1fr}}

/* Étapes */
.etapes{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.etapes figure img{aspect-ratio:4/3;object-fit:cover;width:100%;margin-bottom:16px;filter:grayscale(.2)}
.etapes p{color:var(--encre)}
@media(max-width:900px){.etapes{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.etapes{grid-template-columns:1fr}}

/* FAQ */
.faq-grille{display:grid;grid-template-columns:1fr 3fr;gap:40px}
.faq-texte{columns:2;column-gap:48px}
.faq-texte p{break-inside:avoid;margin-bottom:22px}
.faq-texte b{font-weight:600}
@media(max-width:900px){.faq-grille{grid-template-columns:1fr;gap:8px}.faq-texte{columns:1}}

/* Fiches boutique */
.liste-plus,.liste-moins{padding-left:22px;margin:12px 0 32px}
.liste-plus li,.liste-moins li{margin:8px 0}
.liste-plus li::marker{color:var(--vert);content:"+  "}
.liste-moins li::marker{color:var(--rouge);content:"–  "}

/* Poseurs */
.sommaire{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:15px}
.ville{margin-bottom:40px}
.ville h2{font-size:32px}
.ville h2 small{font:500 18px var(--texte);color:var(--encre2)}
.poseurs{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.poseurs li{background:var(--papier);padding:14px 16px;display:flex;flex-direction:column;gap:2px;font-size:16px}
.poseurs b{font-weight:600}
.poseurs small{color:var(--encre2);font-size:14px}

/* Articles */
.article{padding:clamp(32px,5vw,64px) 0 clamp(56px,8vw,96px)}
.article h1{font-size:clamp(36px,4.6vw,60px)}
.article h2{margin-top:1.4em;font-size:32px}
.article p,.article li{font-size:18px;line-height:1.65}
.signature{color:var(--encre2);font-size:16px}
.sources{font-size:15px;word-break:break-all}

/* Pied */
.pied{background:#0a2038;color:#cfd5d3;padding:64px 0 40px;font-size:16px}
.pied a{color:var(--blanc-pvc)}
.pied-nom{font:700 clamp(44px,8vw,120px)/.9 var(--titre);color:#fff;margin:0 0 40px;letter-spacing:-.02em}
.pied-grille{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
.pied ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.pied-contact{font:700 26px var(--titre);color:var(--laiton)!important}
.pied-legal{margin-top:40px;font-size:14px;color:#a9b2b0}
.pied-credits{font-size:13px;color:#8e9896}
.pied-credits a{color:#a9b2b0}
@media(max-width:800px){.pied-grille{grid-template-columns:1fr}}

/* Apparition */
@media(prefers-reduced-motion:no-preference){
  .apparait{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease}
  .apparait.vu{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* Tableaux en fiches sur téléphone */
@media(max-width:700px){
  .tableau{background:none}
  table.t-cartes thead{display:none}
  table.t-cartes,table.t-cartes tbody,table.t-cartes tr,table.t-cartes td{display:block;width:100%}
  table.t-cartes tr{background:var(--papier);margin-bottom:10px;padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
  table.t-cartes tr.meilleur{background:var(--vert-pale)}
  table.t-cartes td{border:0;padding:0}
  table.t-cartes td.t-boutique{grid-column:1}
  table.t-cartes td.t-prix{grid-column:2;grid-row:1;text-align:right;font-size:24px}
  table.t-cartes td.t-modele{grid-column:1/-1;min-width:0;color:var(--encre2);font-size:15px}
  table.t-cartes td[data-label="Uw"]::before,table.t-cartes td[data-label="Prix livré"]::before,table.t-cartes td[data-label="Avis"]::before,table.t-cartes td[data-label="Dimension"]::before{content:attr(data-label) " : ";color:var(--encre2)}
  table.t-cartes td.t-num,table.t-cartes td[data-label="Avis"],table.t-cartes td[data-label="Dimension"]{grid-column:1/-1;font-size:15px}
  table.t-cartes td.t-lien{grid-column:1/-1;margin-top:6px}
  table.t-cartes .bouton-offre{display:block;text-align:center;padding:12px}
}

/* Touches de couleur */
.tete-page{background:var(--gris);padding-bottom:clamp(28px,4vw,48px)}
.fil{background:var(--gris)}
.tete-page h1{color:var(--anthracite)}
.bloc-gris{background:var(--gris)}
.cats a{border-top:4px solid var(--bleu)}
.cats a:hover{border-top-color:var(--laiton)}
.cats a,.tailles a,.guides a{box-shadow:0 1px 0 rgba(14,42,71,.08)}
.intro b,.chapo b{color:var(--vert)}
.etapes h3{color:var(--anthracite)}
.etapes li{border-top:4px solid var(--laiton);padding-top:18px}
.bloc-sombre{background:var(--anthracite) url(/img/ciel-nuit.svg) center/cover no-repeat}
.signature a{font-weight:600}
.duels{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.duels b{font-size:21px}
table.duel th[scope=row]{width:22%;color:var(--encre2);font-weight:500;background:none}
table.duel td{width:39%}
.dim-tete{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center}
.dim-dessin{width:100%;max-width:420px;justify-self:end}
@media(max-width:800px){.dim-tete{grid-template-columns:1fr}.dim-dessin{max-width:260px;justify-self:start}}