/* ==========================================================================
   boutique.css — styles spécifiques à la boutique EASY 1 (easywot.com)
   --------------------------------------------------------------------------
   Complète le CSS inline commun à chaque page (bloc :root + header/footer/
   burger copié de index.html). Charte : cartes arrondies 28px, beige/bleu,
   pills, Archivo. Mobile-first, breakpoints 960 / 760 / 480 px.
   ========================================================================== */

/* L'attribut hidden prime toujours sur les display flex/grid des composants */
[hidden]{display:none!important}

/* ---------- Icône panier + badge dans le header (toutes les pages) ---------- */
.nav-panier{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:6px}
.nav-panier svg{width:22px;height:22px;display:block}
.nav-links a.nav-panier::after{display:none}
.badge-panier{position:absolute;top:-4px;right:-8px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--bleu);color:var(--blanc);font-size:.7rem;font-weight:800;line-height:19px;text-align:center;pointer-events:none}
.badge-panier[hidden]{display:none}
/* Variante pour les pages sans .nav-links (mentions légales, confidentialité) */
.nav-panier-simple{color:#fff;margin-left:18px}
.nav-panier-simple .badge-panier{background:var(--blanc);color:var(--bleu)}

/* ---------- En-tête de page boutique ---------- */
.page-hero{padding-top:132px;padding-bottom:clamp(28px,4vw,48px);text-align:left}
.page-hero h1{margin:14px 0 10px}
.page-hero .chapo{max-width:640px;color:#3a4272;font-size:1.02rem}

/* ---------- Barre d'outils du catalogue (recherche / filtre / pays) ---------- */
.toolbar-catalogue{display:flex;gap:14px;flex-wrap:wrap;align-items:center;background:var(--blanc);border-radius:20px;padding:16px 18px;margin-bottom:34px}
.toolbar-bas{margin:44px 0 0}
.toolbar-catalogue .champ-recherche{flex:1 1 240px;position:relative}
.toolbar-catalogue input[type=search],
.toolbar-catalogue select{width:100%;border:2px solid var(--beige-fonce);border-radius:12px;padding:12px 14px;font:inherit;font-size:.95rem;color:var(--texte);background:#fff;transition:border-color .2s}
.toolbar-catalogue input[type=search]:focus,
.toolbar-catalogue select:focus{border-color:var(--bleu);outline:none}
.toolbar-catalogue .champ-select{display:flex;align-items:center;gap:10px;flex:0 1 auto}
.toolbar-catalogue .champ-select label{font-weight:600;font-size:.85rem;color:var(--bleu);white-space:nowrap}

/* ---------- Grille et cartes produits ---------- */
.grille-produits{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:clamp(40px,6vw,64px)}
/* Anti-CLS : espace réservé pendant le chargement du catalogue (fetch produits.json),
   calibré sur les hauteurs réellement rendues (520/660 px dès 961 px de large) */
#configurateur{min-height:520px}
#grilleRobinets{min-height:660px}
.carte-produit{background:var(--blanc);border-radius:var(--rayon);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 24px rgba(29,38,102,.06);transition:transform .25s,box-shadow .25s}
.carte-produit:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(41,51,132,.12)}
.carte-visuel{background:var(--beige);padding:26px;display:grid;place-items:center}
.carte-visuel img{max-height:240px;width:auto;border-radius:14px}
.carte-corps{padding:26px 28px 30px;display:flex;flex-direction:column;gap:12px;flex:1}
.carte-corps h2,.carte-corps h3{font-size:1.3rem}
.pill-categorie{display:inline-flex;align-self:flex-start;background:var(--beige);color:var(--bleu);border-radius:999px;padding:6px 14px;font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.carte-desc{color:#3a4272;font-size:.95rem}
.carte-prix{font-size:1.45rem;font-weight:900;color:var(--bleu);margin:0}
.carte-pied{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:10px}
.btn-confirme{background:#2ea86b!important;border-color:#2ea86b!important;color:#fff!important}

/* Configurateur EASY 1 : carte large en 2 colonnes */
.carte-configurateur{display:grid;grid-template-columns:.9fr 1.1fr;margin-bottom:clamp(40px,6vw,64px)}
.carte-configurateur .carte-visuel{padding:clamp(24px,4vw,48px)}
.carte-configurateur .carte-visuel img{max-height:340px}
.carte-configurateur .carte-corps{padding:clamp(26px,4vw,44px)}

/* Pills de choix (configurateur) */
.choix-robinet{border:0;padding:0;margin:4px 0 0}
.choix-robinet legend{font-weight:700;font-size:.95rem;color:var(--bleu);margin-bottom:10px;padding:0}
.choix-pills{display:flex;flex-wrap:wrap;gap:10px}
.pill-choix{position:relative;display:inline-flex;align-items:center;border:2px solid var(--beige-fonce);border-radius:999px;padding:10px 18px;font-weight:600;font-size:.9rem;cursor:pointer;transition:border-color .2s,background .2s,color .2s;background:#fff}
.pill-choix input{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}
.pill-choix:has(input:checked){border-color:var(--bleu);background:var(--bleu);color:#fff}
.pill-choix:has(input:focus-visible){outline:3px solid var(--bleu);outline-offset:2px}

/* Selects d'options (finition, modèle) */
.options-produit{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.champ-option label{display:block;font-weight:600;font-size:.85rem;color:var(--bleu);margin-bottom:6px}
.champ-option select{width:100%;border:2px solid var(--beige-fonce);border-radius:12px;padding:10px 12px;font:inherit;font-size:.92rem;color:var(--texte);background:#fff}
.champ-option select:focus{border-color:var(--bleu);outline:none}
.config-options{background:var(--beige);border-radius:16px;padding:16px 18px}

/* ---------- Alertes / messages ---------- */
.alerte-info{background:var(--blanc);border-left:4px solid var(--bleu);border-radius:16px;padding:18px 22px;font-size:.95rem;margin-bottom:22px}
.alerte-info strong{display:block;color:var(--bleu);margin-bottom:4px}
.alerte-succes{background:#e9f7ef;border-left:4px solid #2ea86b;border-radius:16px;padding:18px 22px;font-size:.95rem;margin-bottom:22px}
.alerte-succes strong{display:block;color:#1d7a4a;margin-bottom:4px}
.alerte-attente{background:#fdf3e7;border-left:4px solid #d9930d;border-radius:16px;padding:18px 22px;font-size:.95rem;margin-bottom:22px}
.alerte-attente strong{display:block;color:#9a6a08;margin-bottom:4px}
.centrer{text-align:center;margin-top:22px}

/* ---------- Panier ---------- */
.grille-panier{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:start}
.ligne-panier{background:var(--blanc);border-radius:20px;padding:18px;display:grid;grid-template-columns:110px 1fr auto auto auto;gap:18px;align-items:center;margin-bottom:14px}
.ligne-visuel{background:var(--beige);border-radius:14px;padding:10px;display:grid;place-items:center}
.ligne-visuel img{max-height:80px;width:auto}
.ligne-infos h3{font-size:1.02rem;margin-bottom:2px}
.ligne-options{font-size:.85rem;color:#565f96}
.ligne-pu{font-size:.88rem;color:#3a4272;margin-top:4px}
.ligne-total{font-weight:900;color:var(--bleu);font-size:1.08rem;white-space:nowrap}
.qty-stepper{display:inline-flex;align-items:center;border:2px solid var(--beige-fonce);border-radius:999px;overflow:hidden;background:#fff}
.qty-btn{width:38px;height:40px;border:0;background:none;font-size:1.2rem;font-weight:800;color:var(--bleu);cursor:pointer;transition:background .2s}
.qty-btn:hover{background:var(--beige)}
.qty-stepper input{width:52px;border:0;text-align:center;font:inherit;font-weight:700;color:var(--texte);-moz-appearance:textfield;appearance:textfield}
.qty-stepper input::-webkit-outer-spin-button,.qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-stepper input:focus{outline:none;background:var(--beige)}
.btn-supprimer{border:0;background:none;color:#525cb0;font:inherit;font-size:.85rem;font-weight:600;text-decoration:underline;cursor:pointer;padding:6px}
.btn-supprimer:hover{color:#c0392b}
.recap{background:var(--blanc);border-radius:var(--rayon);padding:clamp(22px,3vw,32px);position:sticky;top:104px}
.recap h2{font-size:1.2rem;margin-bottom:16px}
.recap-ligne{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--beige-fonce);font-size:.95rem;align-items:flex-start}
.recap-libelle{display:flex;flex-direction:column;gap:2px}
.recap-libelle span{font-size:.83rem;color:#565f96}
.recap-montant{font-weight:700;white-space:nowrap;color:var(--bleu)}
.recap-soustotal,.recap-livraison{display:flex;justify-content:space-between;padding:12px 0;font-size:.95rem;color:#3a4272;border-bottom:1px solid var(--beige-fonce)}
.recap-livraison b{color:#2ea86b}
.recap-total{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 6px;font-weight:900;font-size:1.25rem;color:var(--bleu)}
p.recap-total{display:block;text-align:right;border-top:2px solid var(--beige-fonce);margin-top:8px;padding-top:16px}
.recap .btn{width:100%;text-align:center;margin-top:14px}
.recap .select-pays,#zonePaysPanier select,#champCommercial{width:100%;border:2px solid var(--beige-fonce);border-radius:12px;padding:12px 14px;font:inherit;font-size:.95rem;color:var(--texte);background:#fff;margin-top:6px}
/* Anti-CLS : le select pays est injecté en JS, on réserve sa hauteur */
#zonePaysPanier{min-height:52px}
.recap .select-pays:focus,#zonePaysPanier select:focus,#champCommercial:focus{border-color:var(--bleu);outline:none}
/* Confort mobile : cible tactile >= 48 px et font-size 16 px (évite le zoom auto iOS) */
@media (max-width:700px){#champCommercial{min-height:48px;font-size:16px}}
.recap label.titre-select{display:block;font-weight:600;font-size:.85rem;color:var(--bleu);margin-top:14px}
.panier-vide{background:var(--blanc);border-radius:var(--rayon);padding:clamp(36px,6vw,64px);text-align:center}
.panier-vide p{color:#3a4272;margin:10px 0 22px}

/* ---------- Formulaires boutique (commande, suivi, compte) ---------- */
.form-boutique{background:var(--blanc);border-radius:var(--rayon);padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:16px}
.form-boutique .champ label{display:block;font-weight:600;font-size:.88rem;color:var(--bleu);margin-bottom:6px}
.form-boutique input,.form-boutique select,.form-boutique textarea{width:100%;border:2px solid var(--beige-fonce);border-radius:12px;padding:12px 14px;font:inherit;font-size:.95rem;color:var(--texte);background:#fff;transition:border-color .2s}
.form-boutique input:focus,.form-boutique select:focus,.form-boutique textarea:focus{border-color:var(--bleu);outline:none}
.form-boutique .ligne{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-boutique .rgpd{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:#3a4272}
.form-boutique .rgpd input{width:auto;margin-top:4px;accent-color:var(--bleu)}
.form-boutique .rgpd a{text-decoration:underline}
/* Honeypot anti-spam : hors écran, jamais display:none (détecté par les bots) */
.form-boutique .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;padding:0;border:0;opacity:0;overflow:hidden}
.form-inline-email{flex-direction:row;flex-wrap:wrap;align-items:center;background:none;padding:0;gap:10px}
.form-inline-email input{flex:1 1 240px;width:auto}
.statut-paiement{font-weight:700;font-size:.95rem;min-height:1.4em;margin:0}
.statut-paiement.ok{color:#2ea86b}
.statut-paiement.ko{color:#c0392b}

/* ---------- Zone de paiement ---------- */
.zone-paiement{background:var(--blanc);border-radius:var(--rayon);padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:16px}
.zone-paiement h2{font-size:1.2rem}
.btn-stripe{width:100%;border:0;cursor:pointer;font-size:1.02rem;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.btn-stripe svg{width:20px;height:20px;flex:none}
.btn-stripe[disabled]{opacity:.6;cursor:wait}
.separateur-ou{display:flex;align-items:center;gap:14px;color:#525cb0;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.separateur-ou::before,.separateur-ou::after{content:"";flex:1;height:1px;background:var(--beige-fonce)}
/* Deux boutons PayPal empilés (~48 px chacun) : on réserve la place avant le SDK */
#paypal-button-container{min-height:96px}
.paiement-securise{display:flex;align-items:center;gap:8px;font-size:.82rem;color:#565f96;justify-content:center}
.paiement-securise svg{width:16px;height:16px;flex:none}

/* ---------- Timeline de suivi ---------- */
.timeline{list-style:none;margin:8px 0 0;padding:0}
.tl-etape{position:relative;display:flex;gap:16px;padding:0 0 26px 0}
.tl-etape:last-child{padding-bottom:0}
.tl-etape::before{content:"";position:absolute;left:11px;top:26px;bottom:2px;width:2px;background:var(--beige-fonce)}
.tl-etape:last-child::before{display:none}
.tl-etape.faite::before{background:var(--bleu)}
.tl-point{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--beige-fonce);background:var(--blanc);margin-top:2px;position:relative;z-index:1}
.tl-etape.faite .tl-point{border-color:var(--bleu);background:var(--bleu)}
.tl-etape.courante .tl-point{border-color:var(--bleu);background:var(--blanc);box-shadow:inset 0 0 0 4px var(--bleu)}
.tl-corps strong{display:block;color:var(--texte);font-size:.98rem}
.tl-etape.faite .tl-corps strong,.tl-etape.courante .tl-corps strong{color:var(--bleu)}
.tl-corps time{font-size:.82rem;color:#565f96}

/* ---------- Cartes de suivi / commandes ---------- */
.carte-suivi,.carte-commande{background:var(--blanc);border-radius:var(--rayon);padding:clamp(24px,4vw,40px);margin-bottom:20px}
.carte-commande{padding:22px 26px}
.h-carte{font-size:1.15rem;margin:0 0 14px}
.carte-suivi .h-carte:not(:first-child){margin-top:26px}
.suivi-tete{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.suivi-tete h2{margin:0}
.suivi-date{font-size:.85rem;color:#565f96;margin-bottom:14px}
.statut-pill{display:inline-flex;align-items:center;border-radius:999px;padding:7px 16px;font-weight:700;font-size:.82rem;background:var(--beige);color:var(--bleu)}
.statut-paid{background:#e9f7ef;color:#1d7a4a}
.statut-preparing{background:#eef0fb;color:var(--bleu)}
.statut-shipped{background:#fdf3e7;color:#9a6a08}
.statut-delivered{background:#e9f7ef;color:#1d7a4a}
.btn-sm{padding:10px 22px;font-size:.9rem}
.btn-lien{border:0;background:none;color:var(--bleu);font:inherit;font-size:.88rem;font-weight:600;text-decoration:underline;cursor:pointer;padding:8px 0;align-self:flex-start}

/* ---------- Grille checkout ---------- */
.grille-commande{display:grid;grid-template-columns:1.25fr .95fr;gap:24px;align-items:start}
.colonne-recap{display:flex;flex-direction:column;gap:24px}

/* ---------- Responsive ---------- */
/* Avec le lien Boutique + l'icône panier, la nav devient dense entre 761 et 960 px :
   on resserre les espacements avant le passage au burger (760 px). */
/* (règle tablette remplacée plus bas : 761–960 px) */
@media (max-width:960px){
  .grille-commande,.grille-panier{grid-template-columns:1fr}
  .recap{position:static}
  .carte-configurateur{grid-template-columns:1fr}
  .grille-produits{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  #configurateur{min-height:830px}
  #grilleRobinets{min-height:740px}
}
@media (max-width:760px){
  .page-hero{padding-top:104px}
  .grille-produits{grid-template-columns:1fr}
  #grilleRobinets{min-height:1500px}
  #configurateur{min-height:880px}
  .ligne-panier{grid-template-columns:80px 1fr;grid-template-rows:auto auto}
  .ligne-visuel{grid-row:1}
  .ligne-infos{grid-column:2}
  .qty-stepper{grid-column:1}
  .ligne-total{grid-column:2;justify-self:start}
  .btn-supprimer{grid-column:1/-1;justify-self:start}
  .form-boutique .ligne{grid-template-columns:1fr}
  .options-produit{grid-template-columns:1fr}
}
@media (max-width:480px){
  .toolbar-catalogue{flex-direction:column;align-items:stretch}
  .toolbar-catalogue .champ-recherche{flex:0 1 auto}
  .toolbar-catalogue .champ-select{flex-direction:column;align-items:stretch;gap:6px}
  .carte-pied{flex-direction:column;align-items:stretch}
  .carte-pied .btn{text-align:center}
}

/* ---------- Recherche enrichie ---------- */
.compteur-resultats{margin:10px 0 0;font-weight:700;font-size:.92rem;color:var(--bleu)}
.aucun-resultat{background:var(--blanc);border-radius:20px;padding:26px 28px;text-align:center}
.aucun-resultat .alerte-info{margin-bottom:8px}
.aucun-resultat-aide{font-size:.9rem;color:#3a4272;margin-bottom:14px}
.suggestions-recherche{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.chip-suggestion{border:2px solid var(--bleu);color:var(--bleu);background:var(--blanc);border-radius:999px;padding:9px 18px;font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.chip-suggestion:hover{background:var(--bleu);color:var(--blanc);transform:translateY(-1px)}
.chip-suggestion:focus-visible{outline:3px solid var(--bleu);outline-offset:2px}

/* ---------- Toast « Ajouté au panier » (injecté par boutique.js) ---------- */
.toast-panier{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:250;display:flex;align-items:center;gap:14px;background:var(--blanc);color:var(--texte);border:1px solid var(--beige-fonce);border-radius:16px;padding:13px 16px;box-shadow:0 14px 38px rgba(41,51,132,.22);font-size:.95rem;max-width:calc(100vw - 32px);animation:toast-panier-in .25s ease}
.toast-panier-msg{font-weight:700;color:var(--bleu);white-space:nowrap}
.toast-panier-lien{font-weight:700;color:var(--bleu);white-space:nowrap;text-decoration:underline;text-underline-offset:2px}
.toast-panier-lien:hover{color:var(--bleu-fonce)}
.toast-panier-fermer{border:0;background:none;font-size:1.25rem;line-height:1;color:#565f96;cursor:pointer;padding:4px 6px;border-radius:8px;flex:none}
.toast-panier-fermer:hover{color:var(--bleu)}
@keyframes toast-panier-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  /* Pleine largeur avec marges, au-dessus d'un éventuel CTA sticky
     (bottom ajusté en JS si .cta-sticky est visible) */
  .toast-panier{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));justify-content:space-between;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .toast-panier{animation:none}
}

/* ---------- Animation du badge panier à l'ajout ---------- */
/* ---------- Bouton panier flottant ---------- */
.panier-flottant{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:240;width:58px;height:58px;border-radius:50%;background:var(--bleu);color:var(--blanc);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(41,51,132,.35);transition:transform .2s,background .25s;animation:panier-flottant-in .3s ease}
.panier-flottant:hover{transform:scale(1.07);background:var(--bleu-fonce)}
.panier-flottant svg{width:26px;height:26px}
.panier-flottant .badge-panier{top:-3px;right:-3px;background:var(--beige);color:var(--bleu);box-shadow:0 2px 8px rgba(41,51,132,.3)}
.panier-flottant[hidden]{display:none}
@keyframes panier-flottant-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@media (max-width:560px){.panier-flottant{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:54px;height:54px}}
@media (prefers-reduced-motion:reduce){.panier-flottant{animation:none;transition:none}}

@keyframes badge-pulse{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}
.badge-panier.badge-pulse{animation:badge-pulse .5s ease}
@media (prefers-reduced-motion:reduce){
  .badge-panier.badge-pulse{animation:none}
}

/* ---------- Code promo (panier / commande) ---------- */
.bloc-promo{margin-top:14px;padding-top:14px;border-top:1px solid var(--beige-fonce)}
.promo-ligne{display:flex;gap:10px;margin-top:6px;align-items:stretch}
.promo-ligne input{flex:1;min-width:0;border:2px solid var(--beige-fonce);border-radius:12px;padding:10px 14px;font:inherit;font-size:.95rem;color:var(--texte);background:#fff;transition:border-color .2s}
.promo-ligne input:focus{border-color:var(--bleu);outline:none}
.promo-ligne .btn{flex:none;padding:10px 18px;font-size:.88rem;white-space:nowrap;border-radius:12px;margin-top:0;width:auto}
@media (max-width:560px){.promo-ligne{flex-direction:column}.promo-ligne .btn{width:100%}}
.promo-msg{font-size:.85rem;margin-top:8px}
.promo-msg:empty{margin-top:0}
.promo-msg.ko{color:#c0392b}
.promo-msg.ok{color:#2ea86b}
.recap-reduction{display:flex;justify-content:space-between;padding:12px 0;font-size:.95rem;color:#1d7a4a;border-bottom:1px solid var(--beige-fonce)}
.recap-reduction b{font-weight:700;white-space:nowrap}

/* ---------- Lien d’évitement (WCAG 2.4.1) : visible uniquement au focus ---------- */
.skip-link{position:absolute;left:16px;top:-80px;z-index:300;background:var(--bleu,#293384);color:#fff;padding:12px 20px;border-radius:14px;font-weight:700;font-size:.95rem;text-decoration:none;transition:top .2s ease}
.skip-link:focus{top:14px;color:#fff}

/* ---------- Bandeau de réassurance (funnel boutique) ---------- */
.reassurance{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 26px;font-size:.85rem;font-weight:600;color:#3a4272}
.reassurance li{display:flex;align-items:center;gap:8px}
.reassurance svg{width:17px;height:17px;flex:none;stroke:var(--bleu,#293384)}
.bande-reassurance{background:var(--beige-fonce,#efe2d7);border-radius:20px;padding:14px 22px;margin:0 auto clamp(28px,4vw,44px)}
/* Variante en colonne pour l’aside récapitulatif (panier / commande) */
.reassurance.colonne{flex-direction:column;align-items:flex-start;gap:8px;font-size:.82rem}
.recap .reassurance{margin-top:16px;padding-top:14px;border-top:1px solid var(--beige-fonce,#efe2d7)}

/* ---------- Bannière informationnelle « zéro cookie » (stockage local) ----------
   Non bloquante, en bas à gauche : le bas-droite est occupé par le toast panier
   (.toast-panier, z-index 250) et l'icône flottante (.panier-flottant, z-index 240). */
.notice-rgpd{position:fixed;left:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:230;max-width:380px;background:var(--blanc);color:var(--texte);border:1px solid var(--beige-fonce);border-radius:20px;padding:16px 18px;box-shadow:0 14px 38px rgba(41,51,132,.22);font-size:.85rem;line-height:1.5;opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease}
.notice-rgpd.notice-rgpd-in{opacity:1;transform:none}
.notice-rgpd.notice-rgpd-out{opacity:0;transform:translateY(12px)}
.notice-rgpd-texte{margin:0 0 10px}
.notice-rgpd-btn{display:inline-block;background:var(--bleu,#293384);color:#fff;border:0;border-radius:999px;padding:9px 20px;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;transition:background .25s}
.notice-rgpd-btn:hover{background:var(--bleu-fonce,#1d2666)}
@media (max-width:560px){
  .notice-rgpd{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .notice-rgpd{transition:none;transform:none}
}

/* La bannière notice se soulève au-dessus de l'icône panier flottant
   (58px + marge 16px) quand celui-ci est visible, et davantage (88px)
   quand l'icône est elle-même remontée au-dessus du CTA sticky. */
body.panier-flottant-visible .notice-rgpd{bottom:calc(98px + env(safe-area-inset-bottom,0px))}
body.panier-flottant-visible.panier-flottant-haut .notice-rgpd{bottom:calc(166px + env(safe-area-inset-bottom,0px))}

/* PayPal Pay Later messaging (injecté dynamiquement si Client ID configuré) */
.pp-message{margin-top:10px;font-size:.9rem;line-height:1.4}
.pp-message:empty{display:none}
.carte-pied .pp-message{width:100%;text-align:center}
.recap .pp-message{margin-top:12px;padding-top:10px;border-top:1px dashed var(--beige-fonce)}

/* ================= Sélecteur de robinet offert (53 modèles) ================= */
.intro-choix-robinet{max-width:640px;color:#3a4272;margin-bottom:18px}
.barre-filtres-robinets{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.chips-ligne{display:flex;flex-wrap:wrap;gap:8px}
.chip-filtre{border:2px solid var(--beige-fonce);background:#fff;color:var(--texte);border-radius:999px;padding:8px 16px;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s;min-height:40px}
.chip-filtre:hover{border-color:var(--bleu)}
.chip-filtre[aria-pressed="true"]{background:var(--bleu);border-color:var(--bleu);color:#fff}
.chip-filtre .nb{font-weight:400;opacity:.75;margin-left:4px}
.grille-robinets{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.carte-robinet{position:relative;background:var(--blanc);border:2px solid transparent;border-radius:var(--rayon);padding:14px 12px 16px;text-align:center;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.carte-robinet:hover{border-color:var(--bleu-clair);box-shadow:0 8px 24px rgba(41,51,132,.10)}
.carte-robinet:focus-visible{outline:3px solid var(--bleu);outline-offset:2px}
.carte-robinet .visuel-robinet{background:var(--beige);border-radius:18px;padding:10px;margin-bottom:10px}
.carte-robinet img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;display:block}
.carte-robinet .nom-robinet{font-weight:700;font-size:.92rem;line-height:1.25;color:var(--bleu)}
.carte-robinet .ref-robinet{font-size:.75rem;color:#3a4272;letter-spacing:.04em;margin-top:2px}
.carte-robinet .meta-robinet{font-size:.8rem;color:#3a4272;margin-top:6px}
.carte-robinet .pill-offert{display:inline-block;margin-top:8px;background:var(--beige);color:var(--bleu);border-radius:999px;padding:3px 12px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.carte-robinet[aria-pressed="true"]{border-color:var(--bleu);box-shadow:0 10px 28px rgba(41,51,132,.16)}
.carte-robinet[aria-pressed="true"]::after{content:"✓ Sélectionné";position:absolute;top:10px;right:10px;background:var(--bleu);color:#fff;border-radius:999px;padding:4px 12px;font-size:.72rem;font-weight:700}
.robinet-selection-resume{margin-top:18px;background:var(--blanc);border:2px solid var(--bleu);border-radius:var(--rayon);padding:14px 18px;font-weight:600;color:var(--bleu)}
.robinet-selection-resume .lien-modifier{font-weight:600;margin-left:10px;text-decoration:underline;cursor:pointer;background:none;border:0;font:inherit;color:var(--bleu);padding:0}
@media (max-width:700px){
  .grille-robinets{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
  .carte-robinet{padding:10px 8px 14px}
  .carte-robinet .nom-robinet{font-size:.85rem}
  .chip-filtre{padding:8px 14px;font-size:.82rem;min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .carte-robinet{transition:none}
}

/* Ligne robinet offert dans les récapitulatifs */
.recap-robinet{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;padding:10px 12px;background:var(--beige);border-radius:12px;font-size:.9rem}
.recap-robinet .lien-modifier{color:var(--bleu);font-weight:600;white-space:nowrap}
.recap-ligne-robinet .recap-montant{color:var(--bleu);font-weight:700}
.note-robinet-offert{margin-top:12px;background:var(--beige);border-radius:12px;padding:12px 16px;font-size:.92rem;color:var(--texte)}
.note-robinet-offert a{color:var(--bleu);font-weight:600}

/* Ligne robinet distincte dans le panier */
.ligne-panier-robinet{grid-template-columns:110px 1fr auto auto;background:var(--beige);border:1px solid var(--beige-fonce)}
.ligne-panier-robinet .ligne-visuel{background:var(--blanc)}
.ligne-panier-robinet .ligne-total{font-size:.95rem}
.lien-modifier-robinet{color:var(--bleu)}
@media (max-width:760px){.ligne-panier-robinet{grid-template-columns:80px 1fr;grid-template-rows:auto auto}}

/* Codes promo cumulables : chips des codes appliqués */
.titre-select-note{font-weight:400;color:#3a4272;font-size:.78rem}
.chips-promo{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chips-promo:empty{margin-top:0}
.chip-code{display:inline-flex;align-items:center;gap:8px;background:var(--bleu);color:#fff;border-radius:999px;padding:6px 8px 6px 14px;font-size:.85rem;font-weight:700;letter-spacing:.03em}
.chip-code-retirer{border:0;background:rgba(255,255,255,.18);color:#fff;border-radius:50%;width:22px;height:22px;font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.chip-code-retirer:hover{background:rgba(255,255,255,.35)}

/* ---------- En-tête : CTA et navigation tablette (correctif 26/09/2026) ---------- */
h1,h2,h3{text-wrap:balance}
.nav-links a.nav-cta{padding:10px 22px}
@media (max-width:960px) and (min-width:761px){.nav-links{gap:16px}
.nav-links a{font-size:.86rem;white-space:nowrap}
.nav-links a.nav-cta{padding:9px 16px}
.nav-logo img{height:46px}
.nav-links .nav-secondaire{display:none}
}


/* Sélecteur de moyen de paiement (commande) */
.choix-paiement{border:0;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:10px}
.choix-paiement legend{font-weight:700;font-size:.95rem;color:var(--bleu);margin-bottom:10px}
.option-paiement{display:flex;align-items:flex-start;gap:12px;background:var(--blanc);border:2px solid var(--beige-fonce);border-radius:16px;padding:14px 16px;cursor:pointer;transition:border-color .2s;font-size:.95rem}
.option-paiement:hover{border-color:var(--bleu-clair)}
.option-paiement:has(input[name="paiement"]:checked){border-color:var(--bleu);background:#f2f4ff}
.option-paiement input[type=radio]{margin-top:4px;width:18px;height:18px;accent-color:var(--bleu)}
.option-paiement small{color:#3a4272}
.sous-options-cheque{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--beige-fonce);width:100%}
.cheque-mode{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;cursor:pointer}
.numeros-cheque{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.aide-numeros{grid-column:1/-1;font-size:.82rem;color:#3a4272}
.numeros-cheque input{border:2px solid var(--beige-fonce);border-radius:10px;padding:9px 12px;font:inherit;font-size:.9rem;color:var(--texte);background:#fff;width:100%}
.numeros-cheque input:focus{border-color:var(--bleu);outline:none}
.bloc-instructions{background:var(--blanc);border-radius:var(--rayon);padding:clamp(20px,3vw,32px);margin-top:18px}
.bloc-instructions h2{margin-top:0}
.bloc-instructions table{border-collapse:collapse}
.bloc-instructions td,.bloc-instructions th{padding:6px 18px 6px 0;text-align:left;vertical-align:top}
.bloc-instructions .rib-ligne{color:#3a4272}
.bloc-instructions .rib-valeur{font-weight:700;color:var(--bleu)}
.bloc-instructions .note-part{margin-top:14px;background:var(--beige);border-radius:12px;padding:12px 16px;font-size:.92rem}
@media (max-width:560px){.numeros-cheque{grid-template-columns:1fr}}

/* Fix masquage : le récap sticky (desktop) recouvrait le haut de la zone de
   paiement sur la page commande (sélection du moyen de règlement inaccessible).
   Sur cette page, le récap défile normalement avec la page. */
.grille-commande .recap{position:static}

/* Choix « Chèque » : bloc sans labels imbriqués (HTML valide) — correctif 27/09/2026 */
.option-paiement-cheque{flex-direction:column;gap:0;cursor:default}
.option-paiement-principal{display:flex;align-items:flex-start;gap:12px;cursor:pointer;width:100%}
.option-paiement-cheque .sous-options-cheque{padding-left:30px}
.aide-numeros{margin:0}
.mention-credit{display:inline-block;margin-top:6px;font-size:.78rem;font-style:italic}
.option-paiement input[type=radio]{flex:none}
/* Commande : champs facultatifs, facturation, note (27/09/2026) */
.form-boutique .facultatif{font-weight:400;color:#565f96}
.form-boutique .aide{font-size:.83rem;color:#565f96;margin-top:6px}
.form-boutique .case-facturation{font-size:.92rem;font-weight:600;color:var(--bleu)}
.bloc-facturation{border:2px solid var(--beige-fonce);border-radius:16px;padding:14px 18px 18px;margin:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.bloc-facturation[hidden]{display:none}
.bloc-facturation legend{font-weight:800;color:var(--bleu);padding:0 6px;font-size:.95rem}
.form-boutique textarea{resize:vertical;min-height:88px;line-height:1.5}
.montants-cheque{grid-column:1/-1;font-size:.85rem;font-weight:600;color:var(--bleu);margin:0}
.montants-cheque:empty{display:none}
/* Livraison 27f : mode de livraison, disponibilité, reprise de paiement */
.mode-livraison{display:grid;gap:10px;border:0;padding:0;margin:0;min-width:0}
.mode-livraison legend{font-weight:700;color:var(--bleu);font-size:.95rem;margin-bottom:6px;padding:0}
.mode-option{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--beige-fonce);border-radius:16px;padding:14px 16px;cursor:pointer;background:#fff;font-size:.95rem;color:var(--texte)}
.mode-option:has(input:checked){border-color:var(--bleu);background:#f3f5ff}
.form-boutique .mode-option input{width:auto;margin-top:5px;accent-color:var(--bleu);flex:none}
.mode-option strong{display:block;color:var(--bleu)}
.mode-option small{display:block;color:#3a4272;font-size:.85rem;margin-top:2px}
.info-retrait{font-size:.88rem;color:#3a4272;background:#fdf3e7;border-left:4px solid #d9930d;border-radius:12px;padding:10px 14px;margin:0}
.pill-indispo{background:#fdeceb;color:#c0392b;font-weight:700;border-radius:999px;padding:4px 12px;font-size:.8rem;display:inline-block;margin:0 0 8px}
.carte-produit.indisponible img{opacity:.55;filter:grayscale(1)}
.btn[disabled],.btn-desactive{opacity:.55;cursor:not-allowed;pointer-events:none}
.ligne-indispo{opacity:.6}
.bloc-reprise{border:2px solid var(--bleu)}
.bloc-livraison-suivi{margin:14px 0;font-size:.95rem}