:root{
  --encre:#123247;      /* bleu nuit lagon */
  --lagon:#0f7c80;      /* vert d'eau profond */
  --brume:#eef4f3;      /* fond des visuels */
  --soleil:#ffc531;     /* l'etiquette prix : le seul aplat vif */
  --corail:#d94a3d;     /* alertes */
  --papier:#ffffff;
  --gris:#5d6f7b;
  --trait:#d6e2e1;
  --r:14px;
  --f-titre:"Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --f-texte:"Figtree", "Segoe UI", system-ui, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:90px}
body{margin:0;background:var(--papier);color:var(--encre);font:16px/1.5 var(--f-texte);-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%;display:block}
a{color:var(--lagon)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--lagon);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--f-titre);line-height:1.08;margin:0 0 .4em;letter-spacing:-.01em}
[hidden]{display:none!important}

/* ---------------- barre */
.barre{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:12px clamp(14px,3vw,32px);
  padding-top:calc(12px + env(safe-area-inset-top,0px));background:var(--encre);color:#fff;border-bottom:10px solid var(--lagon)}
.marque{text-decoration:none;color:#fff;flex:none}
.marque-mot{font:800 28px/1 var(--f-titre);letter-spacing:-.04em}
.marque-mot::after{content:"";display:inline-block;width:.32em;height:.32em;margin-left:.06em;border-radius:50%;background:var(--soleil)}
.cherche{flex:1;max-width:620px;min-width:0}
.cherche input{width:100%;border:0;border-radius:999px;padding:11px 18px;background:#fff;color:var(--encre);font-size:16px}
.panier-lien{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:600;flex:none}
.panier-lien b{min-width:28px;height:28px;border-radius:999px;background:var(--soleil);color:var(--encre);display:grid;place-items:center;font-size:14px;padding:0 6px}
@media (max-width:640px){.panier-lien span{display:none}.marque-mot{font-size:23px}.barre{gap:10px}}
.bandeau-vendeur{background:var(--lagon);color:#fff;padding:7px clamp(14px,3vw,32px);font-size:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.bandeau-vendeur button,.bandeau-vendeur a{background:transparent;border:1px solid #fff9;color:#fff;border-radius:999px;padding:3px 12px;cursor:pointer;text-decoration:none}

main{max-width:1280px;margin:0 auto;padding:0 clamp(14px,3vw,32px) 48px;outline:none}

/* ---------------- accueil */
.ouverture{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:end;padding:44px 0 28px;border-bottom:1px solid var(--trait)}
.ouverture h1{font-size:clamp(36px,5.4vw,68px);font-weight:800;max-width:13ch}
.ouverture p{max-width:46ch;color:var(--gris);font-size:18px;margin:0}
.preuves{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.preuves li{display:flex;gap:12px;align-items:baseline}
.preuves li b{font-family:var(--f-titre);font-size:22px;min-width:3.6em}
@media (max-width:820px){.ouverture{grid-template-columns:1fr;padding-top:28px}}

.puces{display:flex;gap:8px;overflow-x:auto;padding:18px 0 6px;scrollbar-width:none}
.puces::-webkit-scrollbar{display:none}
.puce{flex:none;border:1.5px solid var(--encre);background:#fff;border-radius:999px;padding:8px 16px;cursor:pointer;font-weight:600;white-space:nowrap;text-decoration:none;color:var(--encre)}
.puce[aria-pressed="true"]{background:var(--encre);color:#fff}

.disposition{display:grid;grid-template-columns:240px 1fr;gap:32px;margin-top:18px}
@media (max-width:960px){.disposition{grid-template-columns:1fr}.rubriques{display:none}}
.rubriques{font-size:15px;position:sticky;top:96px;align-self:start;max-height:calc(100vh - 110px);overflow:auto;padding-right:6px}
.rubriques details{border-bottom:1px solid var(--trait)}
.rubriques summary{cursor:pointer;padding:9px 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:8px}
.rubriques summary small{color:var(--gris);font-weight:400}
.rubriques a{display:block;padding:4px 0 4px 10px;text-decoration:none;color:var(--encre)}
.rubriques a[aria-current]{color:var(--lagon);font-weight:600}

.entete-liste{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.entete-liste h2{font-size:26px;margin:0}
.entete-liste select{border:1px solid var(--trait);border-radius:999px;padding:6px 12px;background:#fff}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px 18px}
@media (max-width:480px){.grille{grid-template-columns:repeat(2,1fr);gap:16px 12px}}
.carte{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.carte .vis{aspect-ratio:1;background:var(--brume);border-radius:var(--r);overflow:hidden}
.carte .vis img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .25s}
.carte:hover .vis img{transform:scale(1.04)}
.carte h3{font:600 15px/1.3 var(--f-texte);margin:10px 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.carte .prix-appel{font-family:var(--f-titre);font-weight:700;font-size:18px}
.carte .prix-appel small{font:400 13px var(--f-texte);color:var(--gris)}
.pastilles{display:flex;gap:4px;margin-top:6px;align-items:center}
.pastilles i{width:12px;height:12px;border-radius:50%;border:1px solid #0002}
.pastilles em{font-size:12px;color:var(--gris);font-style:normal}
.vide{padding:48px 0;color:var(--gris)}
.plus{display:block;margin:28px auto 0;border:1.5px solid var(--encre);background:#fff;border-radius:999px;padding:10px 26px;font-weight:600;cursor:pointer}

/* ---------------- fiche produit */
.fil{font-size:14px;color:var(--gris);padding:18px 0 8px}
.fil a{color:var(--gris)}
.fiche{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start}
@media (max-width:900px){.fiche{grid-template-columns:1fr;gap:20px}}
.galerie .principale{aspect-ratio:1;background:var(--brume);border-radius:20px;overflow:hidden}
.galerie .principale img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.vignettes{display:flex;gap:8px;margin-top:10px;overflow-x:auto}
.vignettes button{flex:none;width:68px;height:68px;border-radius:10px;border:2px solid transparent;background:var(--brume);padding:0;cursor:pointer;overflow:hidden}
.vignettes button[aria-pressed="true"]{border-color:var(--encre)}
.vignettes img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.fiche h1{font-size:clamp(26px,3.2vw,38px);font-weight:700}
.ref{color:var(--gris);font-size:14px}
.desc{color:#2f4757;max-width:60ch}
.carac{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:15px;margin:12px 0 0}
.carac dt{color:var(--gris)}
.carac dd{margin:0}
.bloc{margin-top:22px}
.bloc>h2{font:600 15px var(--f-texte);margin-bottom:10px;color:var(--gris)}
.nuancier{display:flex;flex-wrap:wrap;gap:10px}
.nuancier button{width:38px;height:38px;border-radius:50%;border:1px solid #0003;cursor:pointer}
.nuancier button[aria-pressed="true"]{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--encre)}
.nuancier button:disabled{opacity:.3;cursor:not-allowed}
.nom-coloris{font-size:14px;margin-top:6px}
.options{display:grid;gap:8px}
.option{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;border:1.5px solid var(--trait);border-radius:12px;padding:10px 12px;cursor:pointer}
.option:has(input:checked){border-color:var(--encre);background:#f6fafa}
.option input{margin-top:4px;accent-color:var(--encre)}
.option b{display:block}
.option span{font-size:14px;color:var(--gris)}
.qte{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.qte input{width:120px;border:1.5px solid var(--encre);border-radius:12px;padding:10px 12px;font:700 20px var(--f-titre);text-align:center}
.qte .puce{padding:7px 13px}

/* l'etiquette : l'element memorable */
.etiquette{margin-top:24px;background:var(--soleil);border-radius:18px 18px 18px 4px;padding:20px 22px;position:relative}
.etiquette::before{content:"";position:absolute;top:18px;right:18px;width:14px;height:14px;border-radius:50%;background:var(--papier);box-shadow:inset 0 1px 2px #0003}
.etiquette .pu{font:800 clamp(40px,6vw,58px)/1 var(--f-titre);letter-spacing:-.03em}
.etiquette .pu small{font:600 16px var(--f-texte);letter-spacing:0}
.etiquette .tot{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px;font-size:15px}
.etiquette .tot b{font-family:var(--f-titre);font-size:18px}
.etiquette .dispo{margin-top:10px;font-size:14px}
.etiquette table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px}
.etiquette th,.etiquette td{text-align:left;padding:5px 4px;border-top:1px solid #12324722}
.etiquette td:last-child,.etiquette th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.etiquette tr[aria-current] td{font-weight:700}
.etiquette.charge .pu{opacity:.35}
.indicatif{font-size:13px;margin-top:8px}
.ajout{margin-top:14px;width:100%;border:0;border-radius:14px;background:var(--encre);color:#fff;padding:16px;font:700 18px var(--f-titre);cursor:pointer}
.ajout:disabled{opacity:.5}
.zones{display:flex;gap:8px;overflow-x:auto}
.zones img{width:110px;height:110px;object-fit:contain;background:var(--brume);border-radius:10px}
.page-cata{display:inline-block;background:var(--lagon);color:#fff;border-radius:999px;padding:2px 10px;font-size:13px;margin-left:8px}

/* ---------------- devis */
.devis{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;padding-top:24px}
@media (max-width:900px){.devis{grid-template-columns:1fr}}
.ligne{display:grid;grid-template-columns:84px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--trait);align-items:center}
.ligne img{width:84px;height:84px;object-fit:contain;background:var(--brume);border-radius:10px;mix-blend-mode:multiply}
.ligne h3{font:600 16px/1.3 var(--f-texte);margin:0}
.ligne p{margin:2px 0;font-size:14px;color:var(--gris)}
.ligne .montant{text-align:right;font-family:var(--f-titre);font-weight:700;font-size:18px}
.ligne .montant small{display:block;font:400 13px var(--f-texte);color:var(--gris)}
.ligne input{width:90px;border:1px solid var(--trait);border-radius:8px;padding:4px 8px}
.ligne .retirer{border:0;background:none;color:var(--corail);cursor:pointer;padding:0;font-size:14px}
@media (max-width:480px){.ligne{grid-template-columns:64px 1fr}.ligne img{width:64px;height:64px}.ligne .montant{grid-column:2;text-align:left}}
.recap{background:var(--brume);border-radius:18px;padding:22px;position:sticky;top:96px}
.recap .total{display:flex;justify-content:space-between;font-size:15px;padding:4px 0}
.recap .total.grand{font:800 26px var(--f-titre);border-top:2px solid var(--encre);margin-top:8px;padding-top:10px}
.form{display:grid;gap:10px;margin-top:18px}
.form label{display:grid;gap:4px;font-size:14px;font-weight:600}
.form input,.form textarea{border:1px solid #b9cbca;border-radius:10px;padding:10px 12px;background:#fff;font-weight:400}
.form .cache{position:absolute;left:-9999px}
.note{font-size:13px;color:var(--gris)}
.erreur{color:var(--corail);font-weight:600}
.merci{max-width:640px;padding:60px 0}
.merci h1{font-size:44px}

/* ---------------- divers */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,calc(100% + 40px));background:var(--encre);color:#fff;padding:12px 20px;border-radius:999px;transition:transform .25s;z-index:50;font-weight:600}
.toast{visibility:hidden}
.toast.vu{transform:translate(-50%,0);visibility:visible}
.pied{border-top:1px solid var(--trait);padding:22px clamp(14px,3vw,32px);color:var(--gris);font-size:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pied p{margin:0}
.pied a{margin-right:14px}
.connexion{max-width:360px;padding:60px 0}
.connexion input{width:100%;font:700 28px var(--f-titre);letter-spacing:.3em;text-align:center;border:2px solid var(--encre);border-radius:14px;padding:12px}
.reglages{max-width:620px;display:grid;gap:12px;padding:20px 0}
.reglages label{display:grid;grid-template-columns:1fr 200px;gap:12px;align-items:center}
.reglages input,.reglages select{border:1px solid var(--trait);border-radius:8px;padding:8px;min-width:0}
.detail-interne{font-size:12px;margin-top:8px;background:#ffffffa0;border-radius:8px;padding:6px 8px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}