/*! AM - ENSEIGNE — © 2026 AM ENSEIGNE · RCS Nîmes 130 898 927 · tous droits réservés.
 *  Logiciel protégé par le droit d’auteur (CPI art. L112-2, 13°). Reproduction, adaptation
 *  ou diffusion du code, totale ou partielle, interdites sans autorisation écrite.
 *  contact@am-enseigne.com */
/* ═══════════════════════════════════════════════════════════════════════════
   ENSEIGNE.PRO — BOUTIQUE · design system « liquid glass »
   Verre translucide (blur + saturation), reflet spéculaire haut, rayons
   généreux, sheen animé sur les boutons. Tokens repris du site (maquette).
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#0a0b0d; --bg2:#111319; --ink:#f4f5f7; --muted:#9aa0ab;
  --line:rgba(255,255,255,.10);
  --cyan:#37e0ff; --pink:#ff2fb0; --gold:#ffcf5a; --violet:#9b6bff;
  --accent:var(--cyan);
  --maxw:1240px;

  /* liquid glass */
  --glass-bg:rgba(255,255,255,.07);
  --glass-bg-strong:rgba(255,255,255,.12);
  --glass-line:rgba(255,255,255,.14);
  --glass-hi:rgba(255,255,255,.55);          /* reflet spéculaire */
  --glass-blur:22px;
  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(1100px 700px at 75% -5%, rgba(55,224,255,.13), transparent 60%),
    radial-gradient(900px 640px at 8% 100%, rgba(255,47,176,.11), transparent 60%),
    linear-gradient(180deg,#12151d,#0c0e14 60%,#0a0b0d);
  background-attachment:fixed;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.display{font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.01em;line-height:.95}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:600}

/* ── VERRE : la brique de base ─────────────────────────────────────────── */
.glass{
  position:relative;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.6);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.6);
  border:1px solid var(--glass-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.16);
  overflow:hidden;
}
.glass::before{                /* reflet spéculaire haut, façon verre bombé */
  content:""; position:absolute; inset:0 0 auto 0; height:46%;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  pointer-events:none; border-radius:inherit;
}

/* ── boutons glass ─────────────────────────────────────────────────────── */
.gbtn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:100px; cursor:pointer; user-select:none;
  font:600 14px/1 'Inter',sans-serif; letter-spacing:.02em; color:var(--ink);
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid var(--glass-line);
  box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, background .22s;
  overflow:hidden;
}
.gbtn::after{                  /* sheen qui glisse au survol */
  content:""; position:absolute; top:0; bottom:0; left:-70%; width:50%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-18deg); transition:left .55s ease; pointer-events:none;
}
.gbtn:hover{ transform:translateY(-2px) scale(1.015); box-shadow:0 14px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3) }
.gbtn:hover::after{ left:130% }
.gbtn:active{ transform:translateY(0) scale(.985) }
.gbtn.cta{
  background:linear-gradient(135deg, rgba(55,224,255,.85), rgba(55,150,255,.85));
  color:#04222b; border-color:rgba(255,255,255,.35);
  box-shadow:0 10px 30px rgba(55,224,255,.35), inset 0 1px 0 rgba(255,255,255,.5);
}
.gbtn.cta:hover{ box-shadow:0 16px 40px rgba(55,224,255,.5), inset 0 1px 0 rgba(255,255,255,.55) }
.gbtn.dark{ background:rgba(10,12,16,.66); }
.gbtn.small{ padding:10px 18px; font-size:13px }
.gbtn[disabled]{ opacity:.45; pointer-events:none }

/* ── header glass flottant ─────────────────────────────────────────────── */
.gheader{
  position:fixed; top:50px; left:50%; transform:translateX(-50%);   /* sous la top-bar ; remonte en .shrunk */
  width:min(var(--maxw), calc(100% - 28px)); z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:10px 12px 10px 22px; border-radius:100px;
  background:rgba(16,18,24,.55);
  -webkit-backdrop-filter:blur(26px) saturate(1.7); backdrop-filter:blur(26px) saturate(1.7);
  border:1px solid var(--glass-line);
  box-shadow:0 14px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
}
.brand{font-family:'Bebas Neue',sans-serif;font-size:21px;letter-spacing:.06em;display:flex;align-items:center;gap:8px;white-space:nowrap}
.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.gnav{display:flex;align-items:center;gap:24px}
.gnav a{font-size:13.5px;color:var(--muted);font-weight:500;transition:color .2s}
.gnav a:hover,.gnav a.on{color:var(--ink)}
.hright{display:flex;align-items:center;gap:10px}
.hicon{
  position:relative; width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--glass-bg-strong); border:1px solid var(--glass-line);
  transition:transform .2s, background .2s;
}
.hicon:hover{transform:translateY(-2px);background:rgba(255,255,255,.18)}
.hicon svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.7}
.cartCount{
  position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  display:grid;place-items:center;font:700 11px/1 Inter;
  background:linear-gradient(135deg,var(--cyan),#3796ff);color:#04222b;
  box-shadow:0 2px 8px rgba(55,224,255,.5); transform:scale(0); transition:transform .25s cubic-bezier(.5,1.6,.4,1);
}
.cartCount.on{transform:scale(1)}
.gheader .hcta{padding:9px 16px;font-size:13px;white-space:nowrap}
@media(max-width:860px){ .gnav{display:none} }
@media(max-width:600px){ .gheader .hcta{display:none} }

/* ── page ──────────────────────────────────────────────────────────────── */
.page{padding:130px 0 90px}
.crumb{font-size:12.5px;color:var(--muted);margin-bottom:26px}
.crumb a:hover{color:var(--ink)}
.pageTitle{font-size:clamp(40px,6vw,72px);margin:0 0 8px}
.pageSub{color:var(--muted);font-weight:300;max-width:560px;margin:0 0 40px}

/* barre outils boutique (filtres + tri) */
.shopbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:9px 18px;border-radius:100px;font:600 13px/1 Inter;cursor:pointer;color:var(--muted);
  background:var(--glass-bg); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:all .2s;
}
.chip:hover{color:var(--ink);transform:translateY(-1px)}
.chip.on{
  color:#04222b;background:linear-gradient(135deg,rgba(55,224,255,.9),rgba(55,150,255,.9));
  border-color:rgba(255,255,255,.35); box-shadow:0 6px 18px rgba(55,224,255,.35);
}
.gselect{
  appearance:none;padding:10px 38px 10px 16px;border-radius:100px;color:var(--ink);cursor:pointer;
  background:var(--glass-bg-strong) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%23f4f5f7' fill='none' stroke-width='1.6' stroke-linecap='round'/></svg>") no-repeat right 16px center;
  border:1px solid var(--glass-line); font:600 13px Inter;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.gselect option{background:#14161c;color:var(--ink)}

/* ── grille produits ───────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:22px}
.pcard{
  display:flex;flex-direction:column; border-radius:var(--r-lg); cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.pcard:hover{transform:scale3d(1.01,1.01,1.01); box-shadow:2px 4px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16)}
.pvisual{
  position:relative; aspect-ratio:1/.86; display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(70% 90% at 50% 30%, rgba(255,255,255,.05), transparent),
    linear-gradient(180deg,#171a22,#101219);
}
.pvisual svg{width:76%;height:auto;transition:transform .45s cubic-bezier(.2,.8,.2,1)}

.badge{
  position:absolute;top:14px;left:14px;padding:6px 13px;border-radius:100px;
  font:700 11px/1 Inter;letter-spacing:.06em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.25);
}
.badge.pop{background:rgba(255,207,90,.22);color:var(--gold)}
.badge.new{background:rgba(55,224,255,.2);color:var(--cyan)}
.badge.out{background:rgba(255,255,255,.12);color:var(--muted)}
.pbody{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcat{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pname{font:600 16.5px/1.35 Inter;margin:0}
.pprice{display:flex;align-items:baseline;gap:9px;margin-top:auto;padding-top:10px}
.pprice b{font-size:19px;font-weight:700}
.pprice s{color:var(--muted);font-size:14px;font-weight:400}
.pprice .ttc{font-size:11.5px;color:var(--muted)}
.pcolors{display:flex;gap:5px;margin-top:4px}
.pcolors i{width:13px;height:13px;border-radius:50%;border:1px solid rgba(255,255,255,.3)}
.paddbar{padding:0 20px 20px}
.paddbar .gbtn{width:100%}

/* ── page produit ──────────────────────────────────────────────────────── */
.pd{display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:start}
@media(max-width:900px){.pd{grid-template-columns:1fr}}
.pdVisual{position:sticky;top:110px; aspect-ratio:1/.82;display:grid;place-items:center;padding:30px}
.pdVisual svg{width:82%;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5))}
.pdInfo{padding:34px}
.pdInfo h1{font-size:clamp(30px,4vw,44px);margin:6px 0 12px}
.pdInfo .desc{color:var(--muted);font-weight:300;margin:0 0 24px}
.price-line{display:flex;align-items:baseline;gap:12px;margin-bottom:26px}
.price-line b{font-size:32px}
.price-line s{color:var(--muted);font-size:19px;font-weight:300}
.opt-label{font:600 13px Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.swRow{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:26px}
.swb{
  width:38px;height:38px;border-radius:50%;cursor:pointer;position:relative;
  border:2px solid rgba(255,255,255,.18); transition:transform .18s, box-shadow .18s;
}
.swb:hover{transform:scale(1.12)}
.swb.on{border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.18), 0 0 18px var(--swc,transparent)}
.qtyRow{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.qty{
  display:flex;align-items:center;border-radius:100px;overflow:hidden;
  background:var(--glass-bg-strong);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.qty button{width:44px;height:46px;background:none;border:0;color:var(--ink);font-size:19px;cursor:pointer;transition:background .15s}
.qty button:hover{background:rgba(255,255,255,.1)}
.qty span{min-width:38px;text-align:center;font:700 16px Inter}
.trustRow{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.trust{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted)}
.trust svg{width:17px;height:17px;stroke:var(--cyan);fill:none;stroke-width:1.6;flex:none}

/* ── drawer panier ─────────────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(5,6,9,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .3s;z-index:90}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:12px;right:12px;bottom:12px;width:min(430px,calc(100vw - 24px));z-index:95;
  display:flex;flex-direction:column; border-radius:var(--r-lg);
  transform:translateX(calc(100% + 24px)); transition:transform .42s cubic-bezier(.3,.9,.25,1);
}
.drawer.on{transform:none}
.dhead{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line)}
.dhead h3{margin:0;font:600 17px Inter}
.dclose{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:1px solid var(--glass-line);background:var(--glass-bg);color:var(--ink);font-size:15px;transition:background .2s}
.dclose:hover{background:rgba(255,255,255,.15)}
.dbody{flex:1;overflow:auto;padding:14px 20px;display:flex;flex-direction:column;gap:12px}
.dline{display:flex;gap:14px;align-items:center;padding:12px;border-radius:var(--r-md);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.dthumb{width:70px;height:62px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#171a22,#101219);display:grid;place-items:center;flex:none}
.dthumb svg{width:82%;height:auto}
.dmeta{flex:1;min-width:0}
.dmeta b{display:block;font:600 14px/1.3 Inter;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmeta small{color:var(--muted);font-size:12px}
.dqty{display:flex;align-items:center;gap:2px;margin-top:6px}
.dqty button{width:24px;height:24px;border-radius:8px;border:1px solid var(--glass-line);background:var(--glass-bg);color:var(--ink);cursor:pointer;font-size:13px;line-height:1}
.dqty span{min-width:26px;text-align:center;font:700 13px Inter}
.dline .rm{background:none;border:0;color:var(--muted);cursor:pointer;font-size:16px;padding:4px;transition:color .2s}
.dline .rm:hover{color:var(--pink)}
.dprice{font:700 14px Inter;white-space:nowrap}
.dempty{margin:auto;text-align:center;color:var(--muted)}
.dempty svg{width:52px;height:52px;stroke:var(--muted);fill:none;stroke-width:1.2;margin:0 auto 14px}
.dfoot{padding:20px 24px;border-top:1px solid var(--line)}
.dtotal{display:flex;justify-content:space-between;font:600 15px Inter;margin-bottom:16px}
.dtotal b{font-size:19px}
.dfoot .gbtn{width:100%;margin-bottom:9px}

/* ── panier / checkout / compte ────────────────────────────────────────── */
.two{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:start}
@media(max-width:920px){.two{grid-template-columns:1fr}}
.card{padding:28px}
.card h2{font:600 18px Inter;margin:0 0 20px}
/* Champs de saisie — l'intitulé vit DANS le champ : au repos il en occupe la ligne,
   dès qu'on clique ou qu'on écrit il remonte et rapetisse. Le nom du champ reste
   donc sous les yeux une fois rempli, ce qu'un texte d'exemple seul ne sait pas faire. */
.finput{position:relative;margin-bottom:14px;--lbl-y:-9px}
.finput label{
  position:absolute;left:18px;top:17px;z-index:1;margin:0;
  font:500 15px Inter;letter-spacing:0;text-transform:none;color:var(--muted);
  pointer-events:none;transform-origin:left top;
  transition:transform .16s ease,color .16s ease;
}
/* Le titre remonte : champ actif, champ rempli, ou liste déroulante — toujours pleine. */
.finput:has(input:focus) label,
.finput:has(input:not(:placeholder-shown)) label,
.finput:has(textarea:focus) label,
.finput:has(textarea:not(:placeholder-shown)) label,
.finput:has(select) label{transform:translateY(var(--lbl-y)) scale(.76)}
.finput input,.finput select,.finput textarea{
  width:100%;padding:24px 17px 8px;border-radius:var(--r-md);color:var(--ink);font:500 15px Inter;
  background:rgba(255,255,255,.06);border:1px solid var(--glass-line);outline:none;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.finput input:focus{border-color:rgba(55,224,255,.6);box-shadow:0 0 0 4px rgba(55,224,255,.14);background:rgba(255,255,255,.09)}
/* Sans cela, le texte d'exemple et l'intitulé se superposeraient au repos. */
.finput input::placeholder,.finput textarea::placeholder{color:rgba(255,255,255,.28);opacity:0;transition:opacity .15s}
.finput:has(input:focus) input::placeholder,
.finput:has(textarea:focus) textarea::placeholder{opacity:1}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sumline{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);padding:7px 0}
.sumline.total{border-top:1px solid var(--line);margin-top:10px;padding-top:15px;color:var(--ink);font:600 16px Inter}
.sumline.total b{font-size:22px}
.freeship{display:flex;align-items:center;gap:9px;margin:14px 0 0;padding:11px 15px;border-radius:var(--r-md);
  background:rgba(55,224,255,.08);border:1px solid rgba(55,224,255,.2);font-size:13px;color:var(--cyan)}

/* express pay */
.express{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:18px}
.xpay{
  height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font:600 15px/1 -apple-system,'Inter',sans-serif; border:1px solid rgba(255,255,255,.16);
  transition:transform .2s, box-shadow .2s; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.xpay:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.4)}
.xpay.apple{background:#000;color:#fff}
.xpay.gpay{background:#fff;color:#1f1f1f}
.orsep{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:4px 0 18px}
.orsep::before,.orsep::after{content:"";flex:1;height:1px;background:var(--line)}
.securepay{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:14px;font-size:12px;color:var(--muted)}
.securepay svg{width:14px;height:14px;stroke:var(--muted);fill:none;stroke-width:1.6}
.demoNote{margin-top:12px;padding:10px 14px;border-radius:var(--r-md);background:rgba(255,207,90,.08);
  border:1px solid rgba(255,207,90,.22);font-size:12.5px;color:var(--gold)}

/* compte */
.authTabs{display:flex;gap:6px;padding:6px;border-radius:100px;background:rgba(255,255,255,.06);border:1px solid var(--glass-line);margin-bottom:26px}
.authTabs button{flex:1;padding:11px;border-radius:100px;border:0;background:none;color:var(--muted);font:600 14px Inter;cursor:pointer;transition:all .25s}
.authTabs button.on{background:rgba(255,255,255,.14);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.gsoc{
  width:100%;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:11px;cursor:pointer;
  background:#fff;color:#1f1f1f;font:600 14.5px Inter;border:0;transition:transform .2s, box-shadow .2s;margin-bottom:10px;
}
.gsoc:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.4)}

/* ── écran connexion / création : carte deux panneaux ── */
.auth2{display:grid;grid-template-columns:1fr 1.08fr;max-width:940px;margin:6px auto 0;border-radius:26px;overflow:hidden}
@media(max-width:760px){.auth2{grid-template-columns:1fr}}
.authAside{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:30px;
  padding:40px 34px;color:#fff;border-right:1px solid var(--glass-line);
  background:linear-gradient(160deg,rgba(10,12,18,.94),rgba(16,20,30,.82));
}
.authAside::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--cyan),var(--pink))}
.authBrand{font-family:'Bebas Neue',sans-serif;font-size:36px;letter-spacing:.02em;line-height:1;margin:0 0 14px}
.authLead{color:#aeb4c0;font-weight:300;font-size:15px;margin:0 0 28px;line-height:1.5}
.authBenefits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:17px}
.authBenefits li{display:flex;align-items:center;gap:13px;font-size:15px;color:#e9ecf1}
.authBenefits .ck{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(55,224,255,.16);color:var(--cyan);font-size:13px;font-weight:700;border:1px solid rgba(55,224,255,.35)}
.authFoot{color:var(--muted);font-size:12.5px;margin:0}
.authMain{padding:34px 32px}
.authTabs.big{margin-bottom:22px}
.authTabs.big button{padding:13px;text-transform:uppercase;letter-spacing:.05em;font-size:13px}
.pwWrap{position:relative}
.pwWrap input{padding-right:46px}
.pwEye{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:none;cursor:pointer;color:var(--muted);display:grid;place-items:center}
.pwEye:hover{color:var(--ink)}
.pwEye svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
.authPrivacy{font-size:12px;color:var(--muted);margin:2px 0 12px;line-height:1.5}
.authPrivacy a{color:var(--cyan)}

/* centrage vertical de l'écran connexion/création (sans scroll) + compactage */
.authPage{padding-top:90px!important;padding-bottom:20px!important}
.authWrap{min-height:calc(100vh - 116px);display:flex;align-items:safe center;justify-content:center;padding:10px 0 24px}
.authWrap .auth2{margin:0 auto;width:100%}
.authMain{padding:24px 30px}
.authMain .finput{margin-bottom:10px;--lbl-y:-8px}
.authMain .finput label{left:15px;top:15px;font-size:14px}
.authMain input,.authMain select{padding:21px 14px 7px}
.authMain .orsep{margin:4px 0 10px}
.authMain .gsoc{height:44px;margin-bottom:8px}
.authMain .ac-hint{margin:4px 0 0}
.authMain .authPrivacy{margin:2px 0 10px}
.authTabs.big{margin-bottom:12px}
.authTabs.big button{padding:11px}
.acAddMore{display:block;width:100%;text-align:left;background:none;border:0;color:var(--cyan);font:600 13px Inter;cursor:pointer;padding:4px 2px;margin:2px 0 8px}
.acAddMore:hover{text-decoration:underline}
.authAside{padding:30px 30px}
@media(max-width:760px){.authPage{padding-top:80px!important}.authWrap{min-height:0}}
.acctGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.acctTile{padding:22px;cursor:pointer;transition:transform .25s}
.acctTile:hover{transform:translateY(-4px)}
.acctTile h3{margin:0 0 6px;font:600 15.5px Inter}
.acctTile p{margin:0;font-size:13px;color:var(--muted)}

/* ── espace compte à onglets (sidebar + contenu) ── */
.acct{display:grid;grid-template-columns:248px 1fr;gap:22px;align-items:start}
@media(max-width:820px){.acct{grid-template-columns:1fr}}
.acctNav{padding:12px;display:flex;flex-direction:column;gap:3px;position:sticky;top:100px}
@media(max-width:820px){.acctNav{position:static;flex-direction:row;overflow-x:auto;gap:6px}}
.acctNav button{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:12px 15px;border-radius:14px;border:0;background:none;color:var(--muted);
  font:600 14.5px Inter;cursor:pointer;transition:color .2s, background .2s;white-space:nowrap;
}
.acctNav button:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.acctNav button.on{
  color:var(--ink);
  background:linear-gradient(135deg,rgba(55,224,255,.2),rgba(55,150,255,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.acctNav button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none}
.acctNav .sep{height:1px;background:var(--line);margin:6px 10px}
.acctBody{min-width:0}
.acctBody .card{margin-bottom:18px}
.acctBody .card h2{display:flex;align-items:center;gap:10px}
.cardNote{font-size:12.5px;color:var(--muted);margin:-6px 0 18px}

/* interrupteur (entreprise / facturation identique) */
.switchRow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:6px 0 16px}
.switchRow .lab b{display:block;font:600 14.5px Inter;color:var(--ink)}
.switchRow .lab small{color:var(--muted);font-size:12.5px}
.toggle{position:relative;width:46px;height:27px;flex:none;cursor:pointer}
.toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.toggle i{position:absolute;inset:0;border-radius:100px;background:rgba(255,255,255,.14);border:1px solid var(--glass-line);transition:background .2s;pointer-events:none}
.toggle i::after{content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:#fff;transition:transform .22s cubic-bezier(.4,1.3,.5,1)}
.toggle input:checked + i{background:linear-gradient(135deg,var(--cyan),#3796ff)}
.toggle input:checked + i::after{transform:translateX(19px)}
.foldable{overflow:hidden;transition:max-height .3s ease, opacity .25s, margin .25s;max-height:600px}
.foldable.closed{max-height:0;opacity:0;margin:0!important;pointer-events:none}
.saveBar{display:flex;gap:10px;align-items:center;margin-top:6px}
.saveBar .saved{color:var(--cyan);font-size:13px;opacity:0;transition:opacity .3s}
.saveBar .saved.on{opacity:1}

/* recherche auto adresse / entreprise */
.ac-menu{
  position:fixed;z-index:120;display:none;flex-direction:column;gap:2px;padding:6px;
  max-height:290px;overflow:auto;
  background:rgba(18,22,30,.94);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid var(--glass-line);border-radius:14px;
  box-shadow:0 20px 48px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14);
}
.ac-menu.on{display:flex}
.ac-item{
  display:flex;flex-direction:column;gap:1px;text-align:left;width:100%;
  padding:10px 12px;border:0;border-radius:10px;background:none;color:var(--ink);cursor:pointer;
}
.ac-item:hover,.ac-item.on{background:rgba(255,255,255,.09)}
.ac-main{font:600 14px Inter;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-sub{font-size:12px;color:var(--muted)}
.ac-field{position:relative}
.ac-hint{font-size:11.5px;color:var(--muted);margin:6px 0 0;display:flex;align-items:center;gap:6px}
.ac-hint svg{width:13px;height:13px;stroke:var(--cyan);fill:none;stroke-width:1.7;flex:none}

/* toast */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translate(-50%,80px);z-index:99;
  padding:14px 24px;border-radius:100px;font:600 14px Inter;
  background:rgba(20,24,32,.8);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid var(--glass-line);box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .4s cubic-bezier(.3,1.3,.4,1); display:flex;align-items:center;gap:10px;
}
.toast.on{transform:translate(-50%,0)}
.toast .ok{color:var(--cyan)}

/* footer multi-colonnes */
.gfoot{margin-top:90px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px}
.gfootTop{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:30px;padding:46px 28px 32px}
@media(max-width:820px){.gfootTop{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.gfootTop{grid-template-columns:1fr}}
.gcol{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.gcol h4{font:600 12px Inter;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin:0 0 3px}
.gcol a{color:var(--muted);transition:color .2s}
.gcol a:hover{color:var(--ink)}
.brandCol .brand{color:var(--ink);margin-bottom:2px}
.brandCol p{margin:0;max-width:290px;line-height:1.65}
.brandCol .fbadges{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.fbadge{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:100px;font-size:11.5px;
  background:var(--glass-bg);border:1px solid var(--glass-line);color:var(--ink)}
.fbadge svg{width:13px;height:13px;stroke:var(--cyan);fill:none;stroke-width:1.7}
.gfootBot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;
  padding:16px 28px;border-top:1px solid var(--line)}
.legalLinks{display:flex;gap:8px;flex-wrap:wrap}
.legalLinks a{color:var(--muted)} .legalLinks a:hover{color:var(--ink)}

/* pages légales (CGV, mentions, confidentialité, retours) */
.legal{max-width:840px;margin:0 auto}
.legal .card{padding:40px 42px}
@media(max-width:600px){.legal .card{padding:28px 22px}}
.legal h1{font-size:clamp(32px,5vw,50px);margin:0 0 6px}
.legal .updated{color:var(--muted);font-size:13px;margin:0 0 8px}
.legal .lead{color:var(--muted);font-weight:300;margin:0 0 20px;font-size:15px;line-height:1.6}
.legal h2{font:600 19px/1.3 Inter;margin:30px 0 10px;color:var(--ink);padding-top:8px;border-top:1px solid var(--line)}
.legal h2:first-of-type{border-top:0;padding-top:0}
.legal h3{font:600 15px Inter;margin:18px 0 6px;color:var(--ink)}
.legal p,.legal li{color:#c9ced8;font-size:14.5px;line-height:1.72}
.legal p{margin:8px 0}
.legal ul{margin:8px 0 12px 20px;padding:0}
.legal li{margin:5px 0}
.legal a{color:var(--cyan)}
.legal .idtable{width:100%;border-collapse:collapse;margin:12px 0 4px}
.legal .idtable td{padding:9px 12px;border:1px solid var(--line);font-size:13.5px;vertical-align:top}
.legal .idtable td:first-child{color:var(--muted);width:220px;white-space:nowrap}
.legal .note{margin:14px 0;padding:12px 16px;border-radius:var(--r-md);
  background:rgba(255,207,90,.08);border:1px solid rgba(255,207,90,.22);color:var(--gold);font-size:13px}

/* reveal doux */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rise{animation:rise .6s cubic-bezier(.2,.8,.2,1) backwards}

/* transition fluide entre écran connexion et tableau de bord (déconnexion) */
#zone.zfade{animation:zoneFade .42s cubic-bezier(.2,.8,.2,1)}
@keyframes zoneFade{from{opacity:0;transform:translateY(12px) scale(.992)}to{opacity:1;transform:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   THÈME « GRIS CLAIR PREMIUM » — surcouche en fin de feuille (l'emporte sur le
   sombre). Fond gris-bleu clair, cartes verre blanches, texte foncé, CTA bleu.
   Retirer ce bloc restaure le thème nuit d'origine.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#16181d; --muted:#666c78;
  --line:rgba(0,0,0,.08);
  --cyan:#0891b2;                         /* teinte lisible sur clair (texte/success) */
  --accent:#0a84ff;                       /* bleu interactif (CTA, focus) */
  --glass-bg:rgba(255,255,255,.66);
  --glass-bg-strong:rgba(255,255,255,.84);
  --glass-line:rgba(255,255,255,.9);
  --shadow:0 16px 44px rgba(20,28,45,.12);
}
body{
  color:var(--ink);
  background:
    radial-gradient(1000px 640px at 78% -8%, rgba(55,150,255,.10), transparent 60%),
    radial-gradient(820px 560px at 6% 104%, rgba(255,47,176,.06), transparent 60%),
    linear-gradient(180deg,#eef1f6,#e9ecf2 60%,#e6e9f0);
}
.glass{border-color:rgba(0,0,0,.06);box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.9)}
.glass::before{background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0))}

.gbtn{color:var(--ink);border-color:rgba(0,0,0,.08);
  box-shadow:0 6px 18px rgba(20,28,45,.10), inset 0 1px 0 rgba(255,255,255,.75)}
.gbtn::after{background:linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent)}
.gbtn:hover{box-shadow:0 12px 26px rgba(20,28,45,.16), inset 0 1px 0 rgba(255,255,255,.85)}
.gbtn.cta{background:linear-gradient(135deg,#0a84ff,#0071e3);color:#fff;border-color:transparent;
  box-shadow:0 10px 26px rgba(10,120,255,.30), inset 0 1px 0 rgba(255,255,255,.35)}
.gbtn.cta:hover{box-shadow:0 14px 32px rgba(10,120,255,.42), inset 0 1px 0 rgba(255,255,255,.4)}
.gbtn.dark{background:rgba(0,0,0,.055);color:var(--ink)}

.gheader{background:rgba(255,255,255,.68);border-color:rgba(255,255,255,.9);
  box-shadow:0 10px 30px rgba(20,28,45,.10), inset 0 1px 0 rgba(255,255,255,.9)}
.gnav a{color:var(--muted)} .gnav a:hover,.gnav a.on{color:var(--ink)}
.hicon{background:rgba(255,255,255,.72);border-color:rgba(0,0,0,.06)}
.hicon:hover{background:#fff} .hicon svg{stroke:var(--ink)}
.cartCount{background:linear-gradient(135deg,#0a84ff,#0071e3);color:#fff;box-shadow:0 2px 8px rgba(10,120,255,.45)}

/* surfaces produit → claires */
.pvisual,.pdVisual,.dthumb{background:radial-gradient(75% 92% at 50% 22%, #ffffff, #eaeef5)}
.pcard:hover{box-shadow:0 24px 48px rgba(20,28,45,.14), inset 0 1px 0 rgba(255,255,255,.9)}

/* barre outils, chips, select */
.chip{color:var(--muted);background:rgba(255,255,255,.72);border-color:rgba(0,0,0,.06)}
.chip:hover{color:var(--ink)}
.chip.on{color:#04263b;background:linear-gradient(135deg,#37e0ff,#39a0ff);border-color:rgba(255,255,255,.6);box-shadow:0 6px 16px rgba(10,150,255,.28)}
.gselect{color:var(--ink);background-color:rgba(255,255,255,.84);border-color:rgba(0,0,0,.08);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%2316181d' fill='none' stroke-width='1.6' stroke-linecap='round'/></svg>")}
.gselect option{background:#fff;color:#16181d}

/* champs de formulaire */
.finput input,.finput select,.finput textarea{background:rgba(255,255,255,.75);border-color:rgba(0,0,0,.1)}
.finput label{color:#6b7280}
.finput input:focus{border-color:rgba(10,120,255,.55);box-shadow:0 0 0 4px rgba(10,120,255,.14);background:#fff}
.finput input::placeholder,.finput textarea::placeholder{color:rgba(0,0,0,.32)}

/* panier / lignes / récap / express */
.dline{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.06)}
.dqty button{background:rgba(255,255,255,.8);border-color:rgba(0,0,0,.1)}
.freeship{background:rgba(8,145,178,.09);border-color:rgba(8,145,178,.28);color:#07627a}
.xpay{border-color:rgba(0,0,0,.12)}

/* drawer close, quantité */
.dclose{background:rgba(255,255,255,.7);border-color:rgba(0,0,0,.08)}
.dclose:hover{background:#fff}
.qty{background:rgba(255,255,255,.8);border-color:rgba(0,0,0,.1)}

/* toast + menu autocomplete → clairs */
.toast{background:rgba(255,255,255,.92);color:var(--ink);border-color:rgba(0,0,0,.06);
  box-shadow:0 16px 40px rgba(20,28,45,.18), inset 0 1px 0 rgba(255,255,255,.9)}
.ac-menu{background:rgba(255,255,255,.97);border-color:rgba(0,0,0,.08);
  box-shadow:0 18px 42px rgba(20,28,45,.18), inset 0 1px 0 rgba(255,255,255,.9)}
.ac-item{color:var(--ink)} .ac-item:hover,.ac-item.on{background:rgba(0,0,0,.05)}

/* compte : onglets + interrupteurs */
.authTabs{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.07)}
.authTabs button.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(20,28,45,.14)}
.acctNav button:hover{background:rgba(0,0,0,.05)}
.acctNav button.on{background:linear-gradient(135deg,rgba(10,132,255,.16),rgba(10,132,255,.08))}
.toggle i{background:rgba(0,0,0,.14);border-color:rgba(0,0,0,.1)}
.toggle input:checked + i{background:linear-gradient(135deg,#0a84ff,#0071e3)}
.gsoc{box-shadow:0 6px 18px rgba(20,28,45,.12)}

/* le panneau latéral gauche du compte reste sombre (contraste) → inchangé */

/* pages légales : texte foncé */
.legal p,.legal li{color:#3d434e}
.legal .lead{color:var(--muted)}

/* footer */
.fbadge{background:rgba(255,255,255,.7);border-color:rgba(0,0,0,.06)}

/* ══════════ BLOG LOCAL — structure T-Lab (bande sombre, filtres, cartes) ══════════ */
.bg-hero{ background:radial-gradient(900px 420px at 50% -10%, rgba(10,132,255,.16), transparent 60%),
  linear-gradient(180deg,#141821,#0e1017); color:#f4f5f7; text-align:center; padding:150px 28px 60px; }
.bg-hero .bg-title{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(48px,7vw,84px); margin:0; }
.bg-hero h1{ font:700 clamp(26px,4vw,40px)/1.25 'Inter',sans-serif; max-width:820px; margin:0 auto; letter-spacing:-.01em; }
.bg-hero p{ max-width:660px; margin:16px auto 0; color:#9aa0ab; font-size:16.5px; font-weight:300; }
.bg-cat{ font:700 11.5px 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:#37e0ff; margin-bottom:14px; }
.bg-meta{ color:#8a8f98!important; font-size:13.5px!important; }
.bg-filters{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; padding:30px 28px 6px; }
.bg-chip{ padding:10px 20px; border-radius:100px; font:600 13.5px 'Inter',sans-serif; cursor:pointer;
  color:#666c78; background:#fff; border:1px solid rgba(0,0,0,.12); transition:all .18s; }
.bg-chip:hover{ color:#16181d; border-color:rgba(0,0,0,.28); }
.bg-chip.on{ background:linear-gradient(135deg,#0a84ff,#0071e3); border-color:transparent; color:#fff;
  box-shadow:0 6px 18px rgba(10,120,255,.28); }
.bg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; padding:26px 0 90px; }
.bg-card{ display:flex; flex-direction:column; background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:18px; padding:28px; box-shadow:0 10px 26px rgba(20,28,45,.05); transition:all .2s; }
.bg-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(20,28,45,.10); }
.bg-ccat{ font:700 11px 'Inter',sans-serif; letter-spacing:.13em; color:#0064cc; margin-bottom:12px; }
.bg-card h2{ font:700 21px/1.3 'Inter',sans-serif; margin:0 0 12px; }
.bg-card h2 a{ color:#16181d; text-decoration:none; }
.bg-card h2 a:hover{ color:#0071e3; }
.bg-cex{ color:#666c78; font-size:15px; line-height:1.6; margin:0 0 18px; flex:1; }
.bg-cmeta{ color:#8a8f98; font-size:13px; margin:0 0 14px; } .bg-cmeta span{ margin:0 7px; }
.bg-cread{ font:700 14.5px 'Inter',sans-serif; color:#0071e3; text-decoration:none; }

/* contenu d'article (mêmes classes que la prod) */
.de-pillar{ max-width:780px; margin:0 auto; padding:36px 24px 80px; color:#2a2f37; font-size:16.5px; line-height:1.75; }
.de-pillar h2{ font:700 27px/1.25 'Inter',sans-serif; color:#16181d; margin:44px 0 14px; }
.de-pillar h3{ font:700 19px/1.3 'Inter',sans-serif; color:#16181d; margin:28px 0 10px; }
.de-pillar p{ margin:0 0 16px; } .de-pillar a{ color:#0071e3; text-decoration:none; }
.de-toc{ background:#fff; border:1px solid rgba(0,0,0,.09); border-radius:14px; padding:16px 20px;
  margin:8px 0 26px; font-size:14px; display:flex; flex-wrap:wrap; gap:6px 16px; }
.de-ptable{ width:100%; border-collapse:collapse; margin:18px 0 24px; font-size:14.5px; background:#fff;
  border:1px solid rgba(0,0,0,.09); border-radius:12px; overflow:hidden; }
.de-ptable th{ background:#16181d; color:#fff; text-align:left; padding:11px 14px; }
.de-ptable td{ padding:10px 14px; border-top:1px solid rgba(0,0,0,.07); }
.de-faq-i{ background:#fff; border:1px solid rgba(0,0,0,.09); border-radius:13px; margin:0 0 10px; padding:0 18px; }
.de-faq-i summary{ cursor:pointer; font-weight:600; color:#16181d; padding:15px 0; }
.de-faq-i p{ padding:0 0 16px; margin:0; }
.de-pcta{ margin-top:48px; background:linear-gradient(180deg,#141821,#0e1017); border-radius:20px;
  padding:34px 30px; text-align:center; color:#f4f5f7; }
.de-pcta p{ color:#c7ccd4; margin:0 0 20px; }
.de-pcta-b{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.de-pcta-btn{ display:inline-flex; padding:14px 26px; border-radius:100px; font:600 14px 'Inter',sans-serif;
  color:#fff!important; text-decoration:none; background:linear-gradient(135deg,#0a84ff,#0071e3); }
.de-pcta-btn.ghost{ background:transparent; border:1px solid rgba(255,255,255,.35); }


/* Pilule condensée au défilement (06/08) — même logique que l'accueil. */
.gheader{ transition:padding .25s ease, box-shadow .25s ease, top .25s ease; }
.gheader.shrunk{ padding-top:5px; padding-bottom:5px; box-shadow:0 6px 20px rgba(20,28,45,.16); top:14px; }


/* ── Top-bar de réassurance (style « Bleu confiance », choix Waël 06/08) ──
 * Statique : elle défile avec la page et disparaît ; la pilule, elle, reste. */
.topbar{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:12.5px; line-height:1.6; padding:6px 16px; font-weight:500;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background:linear-gradient(135deg,#0a84ff,#0071e3); color:#eaf3ff; }
.topbar b{ color:#fff; font-weight:700 }
.topbar a{ color:#fff; font-weight:700; text-decoration:none }
.topbar .sep{ opacity:.45 }
.topbar .tb-ast{ color:inherit; text-decoration:none; font-size:.8em; vertical-align:super;
  margin-left:1px; opacity:.85 }
.topbar .tb-ast:hover{ opacity:1; text-decoration:underline }
.freeship a{ color:inherit; text-decoration:none; font-size:.85em; vertical-align:super; opacity:.8 }

@media(max-width:640px){ .topbar .tb-devis{ display:none } }


/* ── E3 : en-tête à deux étages ───────────────────────────────────
   Même en-tête que sur l'accueil : barre d'annonces en haut, qui défile ; barre
   de navigation collée, menu centré. La page perd le grand vide qui compensait
   la pilule flottante — elle n'a plus rien à compenser. */
.gheader{
  position:sticky; top:0; left:auto; transform:none;
  width:100%; max-width:none;
  display:grid; grid-template-columns:1fr auto 1fr; gap:18px;
  padding:12px 28px; border-radius:0;
  background:rgba(255,255,255,.94);
  border:0; border-bottom:1px solid rgba(20,28,45,.10);
  box-shadow:none;
}
.gnav{ justify-content:center }
.gheader .hright{ justify-content:flex-end }
.gheader.shrunk{ padding:8px 28px; top:0; box-shadow:0 6px 18px rgba(20,28,45,.09) }
.page{ padding-top:36px }
.authPage{ padding-top:36px!important }
@media(max-width:860px){ .gheader{ display:flex; justify-content:space-between } }


/* ── Visuels produit venus de WooCommerce ─────────────────────────────────────
   La grille montrait jusqu ici des dessins SVG qui epousaient leur cadre. Les
   photos, elles, sont carrees : on les fait tenir SANS les recadrer — un neon
   coupe sur ses bords ne dit plus ce qu il est. */
.pvisual img{
  width:100%; height:100%; object-fit:contain; display:block; padding:6%;
  align-self:stretch; justify-self:stretch; background:transparent;
}
.pvisual{ overflow:hidden }


/* ══════════ FICHE PRODUIT ══════════════════════════════════════════════════
   Deux colonnes : le visuel tient tout seul a gauche pendant qu on lit et qu on
   configure a droite. Sous la ligne de flottaison, onglets puis produits de la
   meme rubrique. Structure calquee sur les fiches marchandes qui marchent.
   ═══════════════════════════════════════════════════════════════════════════ */
.pdp{max-width:1180px}
.pdp-haut{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:52px;align-items:start;margin:4px 0 64px}

.pdp-media{position:sticky;top:104px}
.pdp-visuel{aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(75% 92% at 50% 22%, #ffffff, #eaeef5);border:1px solid rgba(0,0,0,.05)}
.pdp-visuel img{width:100%;height:100%;object-fit:contain;padding:6%}
.pdp-vignettes{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pdp-vignettes button{width:76px;height:76px;padding:6px;border-radius:12px;cursor:pointer;
  background:#fff;border:1px solid rgba(0,0,0,.08);transition:border-color .2s,box-shadow .2s}
.pdp-vignettes button.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(10,132,255,.16)}
.pdp-vignettes img{width:100%;height:100%;object-fit:contain}

.pdp-cat{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pdp-titre{font:700 clamp(25px,3.1vw,37px)/1.2 'Inter',sans-serif;letter-spacing:-.015em;margin:8px 0 14px}
.pdp-prix{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.pdp-prix .amount,.pdp-prix bdi{font-size:29px;font-weight:700;color:var(--ink)}
.pdp-prix del{opacity:.45;font-size:18px} .pdp-prix ins{text-decoration:none}
.pdp-prix .ttc{font-size:13px;color:var(--muted);font-weight:500}
.pdp-chapo{color:#4a505c;font-size:15.5px;line-height:1.65;margin:0 0 22px}

/* le bloc de configuration : taille, personnalisation, quantite, achat */
.pdp-config{border:1px solid rgba(0,0,0,.10);border-radius:16px;padding:20px;background:rgba(255,255,255,.62);margin:0 0 16px}
.pdp-config .variations{width:100%;border-collapse:collapse;margin:0 0 4px}
.pdp-config .variations tr{display:block;margin:0 0 14px}
.pdp-config .variations th,.pdp-config .variations td{display:block;padding:0;text-align:left}
.pdp-config .variations th label,.pdp-config .variations label{font-size:12px;font-weight:600;letter-spacing:.02em;color:#444;margin:0 0 5px;display:block}
.pdp-config select{width:100%;padding:11px 12px;border-radius:10px;border:1px solid rgba(0,0,0,.16);
  background:#fff;color:#16181d;font:inherit;font-size:15px;line-height:1.3}
.pdp-config select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(10,132,255,.16)}
.pdp-config .reset_variations{font-size:12.5px;color:var(--muted);display:inline-block;margin-top:6px}
.pdp-config .woocommerce-variation-price{margin:2px 0 14px;font-size:22px;font-weight:700}
.pdp-config .woocommerce-variation-description p{margin:0 0 12px;font-size:14px;color:#5a6069}
.pdp-config .woocommerce-variation-availability{font-size:13px;color:#5a6069}

.pdp-config .single_variation_wrap{display:block}
.pdp-config form.cart{margin:0}
.pdp-achat{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.pdp-config .quantity{display:inline-flex;align-items:stretch;border:1px solid rgba(0,0,0,.16);
  border-radius:12px;overflow:hidden;background:#fff}
.pdp-config .quantity input.qty{width:52px;border:0;text-align:center;font:600 15px/1 'Inter',sans-serif;
  padding:0;background:transparent;color:#16181d;-moz-appearance:textfield}
.pdp-config .quantity input.qty::-webkit-outer-spin-button,
.pdp-config .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdp-qbtn{width:42px;border:0;background:transparent;font-size:19px;line-height:1;cursor:pointer;color:#444}
.pdp-qbtn:hover{background:rgba(0,0,0,.05)}
.pdp-config button.single_add_to_cart_button{flex:1 1 220px;min-height:50px;border:0;border-radius:100px;cursor:pointer;
  font:700 15px/1 'Inter',sans-serif;letter-spacing:.01em;color:#fff;
  background:linear-gradient(135deg,#0a84ff,#0071e3);
  box-shadow:0 10px 26px rgba(10,120,255,.30), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s}
.pdp-config button.single_add_to_cart_button:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(10,120,255,.42)}
.pdp-config button.single_add_to_cart_button:disabled{opacity:.45;box-shadow:none;transform:none;cursor:not-allowed}
.pdp-config .woocommerce-variation.single_variation{margin:0 0 4px}

.pdp-livraison{display:flex;align-items:center;gap:10px;border:1px solid rgba(0,0,0,.09);border-radius:12px;
  padding:13px 16px;background:rgba(255,255,255,.55);font-size:14px;color:#3d434e;margin:0 0 16px}
.pdp-livraison svg{width:22px;height:22px;flex:none;stroke:#0a84ff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pdp-livraison b{font-weight:700}

.pdp-atouts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;list-style:none;padding:0;margin:0 0 22px}
.pdp-atouts li{border:1px solid rgba(0,0,0,.08);border-radius:12px;background:rgba(255,255,255,.6);
  padding:15px 8px;text-align:center;font-size:12.5px;font-weight:600;color:#3d434e;line-height:1.35}
.pdp-atouts svg{width:22px;height:22px;stroke:#0a84ff;fill:none;stroke-width:1.6;stroke-linecap:round;
  stroke-linejoin:round;margin:0 auto 8px;display:block}

.pdp-ref{font-size:12.5px;color:var(--muted);margin:0}
.pdp-ref span{color:#3d434e}

/* onglets */
.pdp-onglets{display:flex;gap:28px;border-bottom:1px solid rgba(0,0,0,.10);margin:0 0 26px;flex-wrap:wrap}
.pdp-onglets button{background:none;border:0;padding:0 0 13px;cursor:pointer;font:600 12.5px/1 'Inter',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.pdp-onglets button:hover{color:var(--ink)}
.pdp-onglets button.on{color:var(--ink);border-bottom-color:var(--accent)}
.pdp-panneau{padding:34px 38px;border-radius:var(--r-lg);background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.06)}
.pdp-panneau[hidden]{display:none}
.pdp-panneau > :first-child{margin-top:0}
.pdp-panneau h3{font:700 19px/1.35 'Inter',sans-serif;margin:26px 0 10px}
.pdp-panneau p,.pdp-panneau li{color:#3d434e;font-size:15px;line-height:1.7}
.pdp-panneau ul{padding-left:20px;margin:0}
.pdp-panneau li{margin:0 0 6px}
.pdp-carac{width:100%;border-collapse:collapse}
.pdp-carac th{text-align:left;width:38%;padding:13px 0;font:600 14px/1.4 'Inter',sans-serif;color:#3d434e;
  border-bottom:1px solid rgba(0,0,0,.07);vertical-align:top}
.pdp-carac td{padding:13px 0;border-bottom:1px solid rgba(0,0,0,.07);color:#5a6069;font-size:14.5px}
.pdp-carac tr:last-child th,.pdp-carac tr:last-child td{border-bottom:0}

.pdp-assoc{margin-top:70px}
.pdp-assoc h2{font:700 22px/1.3 'Inter',sans-serif;margin:0 0 22px}

@media (max-width:980px){
  .pdp-haut{grid-template-columns:1fr;gap:30px;margin-bottom:48px}
  .pdp-media{position:static}
  .pdp-panneau{padding:26px 22px}
}
@media (max-width:520px){
  .pdp-atouts{grid-template-columns:1fr}
  .pdp-achat{flex-direction:column}
  .pdp-config .quantity{align-self:flex-start}
}


/* le tableau des variations de WooCommerce redevient une pile de blocs pleine largeur */
.pdp-config .variations,.pdp-config .variations tbody{display:block;width:100%}
.pdp-config .variations td.value{width:100%}
.pdp-config select{width:100%;max-width:100%}

/* ══════════ BOUTIQUE — bande signaletique en tete de page ══════════════════
   La rubrique la plus fournie du magasin passait apres les neons dans la
   grille : on la presente d abord, avec ses visuels, et un bouton qui filtre
   la grille en dessous. */
.sigband{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:36px;align-items:center;
  padding:30px 34px;margin:0 0 34px}
.sigband-titre{font:700 clamp(22px,2.6vw,30px)/1.2 'Inter',sans-serif;letter-spacing:-.015em;margin:10px 0}
.sigband-sub{color:var(--muted);font-weight:300;font-size:15px;line-height:1.62;margin:0 0 20px}
.sigband-actions{display:flex;gap:10px;flex-wrap:wrap}
.sigband-vitrine{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sigband-vitrine a{display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;padding:8%;
  background:radial-gradient(75% 92% at 50% 22%, #ffffff, #eaeef5);border:1px solid rgba(0,0,0,.06);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s}
.sigband-vitrine a:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,28,45,.14)}
.sigband-vitrine img{width:100%;height:100%;object-fit:contain}
@media (max-width:900px){
  .sigband{grid-template-columns:1fr;gap:24px;padding:24px}
}
@media (max-width:560px){
  .sigband-vitrine{grid-template-columns:repeat(2,1fr)}
}


/* messages de WooCommerce sur la fiche produit */
.pdp .woocommerce-notices-wrapper{margin:0 0 22px}
.pdp .woocommerce-error,.pdp .woocommerce-message,.pdp .woocommerce-info{
  list-style:none;margin:0 0 12px;padding:14px 18px;border-radius:12px;font-size:14.5px;line-height:1.5;
  border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.72);color:#3d434e}
.pdp .woocommerce-error{border-color:rgba(192,57,43,.32);background:rgba(192,57,43,.07);color:#8e2a21}
.pdp .woocommerce-message{border-color:rgba(16,150,90,.30);background:rgba(16,150,90,.08);color:#12633f}
.pdp .woocommerce-error li,.pdp .woocommerce-message li,.pdp .woocommerce-info li{margin:0 0 4px}
.pdp .woocommerce-error a,.pdp .woocommerce-message a{text-decoration:underline}

/* WooCommerce sert ses messages en blocs : on les habille comme le reste */
.pdp .wc-block-components-notice-banner{display:flex;gap:12px;align-items:flex-start;margin:0 0 12px;
  padding:14px 18px;border-radius:12px;font-size:14.5px;line-height:1.5;border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.72);color:#3d434e}
.pdp .wc-block-components-notice-banner.is-error{border-color:rgba(192,57,43,.32);background:rgba(192,57,43,.07);color:#8e2a21}
.pdp .wc-block-components-notice-banner.is-success{border-color:rgba(16,150,90,.30);background:rgba(16,150,90,.08);color:#12633f}
.pdp .wc-block-components-notice-banner svg{width:20px;height:20px;flex:none;fill:currentColor}
.pdp .wc-block-components-notice-banner__content{margin:0}

/* .page remet la marge laterale a zero : la fiche produit la retablit, sans quoi
   le texte touche le bord sur mobile. */
.pdp{padding-left:28px;padding-right:28px}
@media (max-width:520px){ .pdp{padding-left:18px;padding-right:18px} }

/* .page (ligne 123) posait « padding:130px 0 90px » et effacait donc la marge
   laterale de .wrap : sur mobile le titre touchait le bord de l ecran. */
.page.wrap{padding-left:28px;padding-right:28px}
@media (max-width:520px){ .page.wrap{padding-left:18px;padding-right:18px} }


/* ══════════ FICHE PRODUIT — le premier bloc tient dans l ecran ════════════
   A l arrivee, on doit voir le produit, son prix, sa configuration et le
   bouton d achat sans defiler — comme le hero de l accueil. Le decalage au
   dessus du bloc (bandeau 32 + entete 67 + marge 36 + fil d ariane 46) vaut
   181 px : c est lui qu on retranche, et qu on reduit quand l ecran est bas.
   La compression se fait par paliers de hauteur, du plus doux au plus serre.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:981px){
  .pdp-haut{
    --ame-hors:181px;
    min-height:calc(100vh - var(--ame-hors));
    min-height:calc(100svh - var(--ame-hors));
    align-items:center;
    margin-bottom:52px;
  }
  /* le visuel reste carre : c est sa largeur qu on borne pour tenir en hauteur */
  .pdp-media{justify-self:center;width:100%;
    max-width:calc(100vh - var(--ame-hors) - 20px);
    max-width:calc(100svh - var(--ame-hors) - 20px)}
}

@media (max-height:900px){
  .pdp-titre{font-size:clamp(23px,2.5vw,30px);margin:4px 0 9px}
  .pdp-prix{margin-bottom:13px}
  .pdp-prix .amount,.pdp-prix bdi{font-size:26px}
  .pdp-chapo{margin-bottom:15px;font-size:14.5px;line-height:1.55}
  .pdp-config{padding:16px;margin-bottom:12px}
  .pdp-config .variations tr{margin-bottom:10px}
  .pdp-config select{padding:10px 12px}
  .pdp-config .woocommerce-variation-price{margin:0 0 10px;font-size:20px}
  .pdp-config .woocommerce-variation-description p{margin:0 0 9px;font-size:13.5px}
  .pdp-config button.single_add_to_cart_button{min-height:46px}
  .pdp-atouts{margin-bottom:0;gap:8px}
  .pdp-atouts li{padding:11px 8px;font-size:12px}
  .pdp-atouts svg{margin-bottom:5px;width:20px;height:20px}
  .ame-perso{padding:14px 16px;margin-bottom:14px}
  .ame-perso-intro{margin-bottom:10px;font-size:13.5px;line-height:1.45}
  .ame-perso-grille{gap:9px 12px}
  .ame-perso-champ{gap:4px}
  .ame-perso-champ input{padding:8px 11px;font-size:14.5px}
  .ame-perso-note{margin-top:9px;font-size:12px}
}

@media (max-height:800px){
  .page.wrap{padding-top:24px}
  .crumb{margin-bottom:16px}
  .pdp-haut{--ame-hors:157px}
  .pdp-titre{font-size:clamp(21px,2.3vw,27px)}
  .pdp-prix .amount,.pdp-prix bdi{font-size:24px}
  .pdp-chapo{margin-bottom:13px;font-size:14px}
  .pdp-config{padding:14px;margin-bottom:10px}
  /* les garanties passent en une ligne compacte plutot qu en trois tuiles hautes */
  .pdp-atouts li{display:flex;align-items:center;gap:8px;text-align:left;padding:9px 11px;line-height:1.25}
  .pdp-atouts svg{margin:0;flex:none;width:18px;height:18px}
  .ame-perso{padding:12px 14px;margin-bottom:12px}
  .ame-perso-champ input{padding:7px 10px;font-size:14px}
  .ame-perso-champ label{font-size:11.5px}
}

@media (max-height:720px){
  .pdp-haut{--ame-hors:145px}
  .crumb{margin-bottom:12px}
  .pdp-titre{font-size:clamp(20px,2.1vw,24px);margin:2px 0 7px}
  .pdp-prix{margin-bottom:11px}
  .pdp-prix .amount,.pdp-prix bdi{font-size:22px}
  .pdp-chapo{margin-bottom:11px;font-size:13.5px}
  /* trois colonnes : les libelles de personnalisation sont courts */
  .ame-perso-grille{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
  .ame-perso-intro{margin-bottom:8px;font-size:13px}
  .ame-perso-note{margin-top:7px}
  .pdp-atouts li{padding:8px 10px;font-size:11.5px}
}


/* ── Fiche personnalisable : le formulaire se resserre avec la hauteur ─────
   Trois champs seulement sont deplies au depart ; sur un ecran bas ils
   passent sur une seule ligne, et les redites disparaissent. */
@media (max-height:860px){
  .ame-perso-grille{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .ame-perso-intro{font-size:13px;line-height:1.4;margin-bottom:9px}
  .ame-perso-note{font-size:11.5px;line-height:1.35;margin-top:8px}
  .pdp-config .variations tr{margin-bottom:8px}
  .pdp-config .reset_variations{font-size:12px;margin-top:2px}
}
@media (max-height:820px){
  .ame-perso-note{display:none}            /* l asterisque rouge dit deja la meme chose */
  .ame-perso-plus{margin-top:9px;padding:7px 13px}
  .ame-perso{padding:11px 13px;margin-bottom:11px}
  .pdp-config{padding:12px;margin-bottom:10px}
}
@media (max-height:760px){
  .pdp-titre{font-size:clamp(19px,2vw,23px);margin:0 0 6px}
  .pdp-prix{margin-bottom:9px}
  .pdp-prix .amount,.pdp-prix bdi{font-size:21px}
  .pdp-chapo{margin-bottom:9px;font-size:13px;line-height:1.45}
  .pdp-atouts{gap:7px}
  .pdp-atouts li{padding:7px 9px;font-size:11px}
  .pdp-atouts svg{width:16px;height:16px}
  .pdp-config .variations th label,.pdp-config .variations label{margin-bottom:3px}
  .pdp-config select{padding:9px 11px}
  .pdp-config button.single_add_to_cart_button{min-height:44px;font-size:14.5px}
  .ame-perso-champ input{padding:7px 10px}
}

/* dernier cran : le second selecteur (finition) coute une ligne de plus */
@media (max-height:760px){
  .crumb{margin-bottom:10px}
  .pdp-config{padding:11px}
  .pdp-config .woocommerce-variation-price{margin:0 0 8px;font-size:19px}
  .pdp-config .woocommerce-variation-description p{margin:0 0 7px;font-size:13px;line-height:1.4}
  .pdp-chapo{margin-bottom:8px}
  .pdp-atouts li{padding:6px 9px}
  .pdp-haut{margin-bottom:44px}
}

/* les derniers pixels : deux selecteurs + une personnalisation, c est le cas le plus charge */
@media (max-height:760px){
  .pdp-titre{margin:0 0 5px}
  .pdp-prix{margin-bottom:8px}
  .pdp-chapo{margin-bottom:7px}
  .pdp-config{margin-bottom:8px}
  .pdp-config .variations tr{margin-bottom:6px}
  .pdp-config button.single_add_to_cart_button{min-height:42px}
  .pdp-atouts{gap:6px}
  .pdp-atouts li{padding:5px 9px}
  .ame-perso{margin-bottom:9px}
}

/* Le theme habille tableaux et champs de formulaire avec plus de poids que nos
   regles : on reprend la main, sinon chaque ligne de variation coute 40 px de
   remplissage invisible. */
.pdp .pdp-config .variations th,
.pdp .pdp-config .variations td{padding:0;border:0;background:none}
.pdp .pdp-config select{padding:11px 12px;line-height:1.3;height:auto}
.pdp .ame-perso-champ input{padding:9px 11px;line-height:1.3;height:auto}
@media (max-height:900px){
  .pdp .pdp-config select{padding:10px 12px}
  .pdp .ame-perso-champ input{padding:8px 11px}
}
@media (max-height:800px){
  .pdp .ame-perso-champ input{padding:7px 10px}
}
@media (max-height:760px){
  .pdp .pdp-config select{padding:9px 11px}
  .pdp .ame-perso-champ input{padding:7px 10px}
}

/* « Effacer » de WooCommerce reste invisible tant qu aucune option n est
   choisie, mais occupait sa ligne : on le pose au niveau de l intitule. */
.pdp .pdp-config .variations td{position:relative}
.pdp .pdp-config .reset_variations{position:absolute;top:-23px;right:0;margin:0;font-size:12px}

@media (max-height:760px){
  .ame-perso-plus{margin-top:8px;padding:6px 12px;font-size:12px}
  .pdp-config{padding:10px}
  /* Sur une fiche personnalisable et un ecran bas, les trois pastilles de
     reassurance cedent la place au formulaire : elles redisent le bandeau. */
  .pdp-perso .pdp-atouts{display:none}
}

@media (max-height:760px){
  .pdp-perso .pdp-config{margin-bottom:0}
  .pdp-perso .pdp-chapo{margin-bottom:6px}
}

@media (max-height:760px){
  /* les valeurs saisies sont courtes (un jour, une heure, une surface) :
     sur un ecran bas elles tiennent en une seule rangee */
  .pdp-perso .ame-perso-grille{grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px 10px}
  .pdp-perso .ame-perso{padding:9px 12px}
  .pdp-perso .ame-perso-intro{margin-bottom:7px}
  .pdp-perso .ame-perso-champ{gap:3px}
  .pdp-perso .ame-perso-champ label{font-size:11px}
  .pdp-perso .pdp-titre{font-size:clamp(18px,1.9vw,22px)}
  .pdp-perso .pdp-prix{margin-bottom:7px}
  .pdp-perso .pdp-prix .amount,.pdp-perso .pdp-prix bdi{font-size:20px}
  .pdp-perso .pdp-config button.single_add_to_cart_button{min-height:40px}
}

/* ── Fiche personnalisable : compactage permanent ─────────────────────────
   Le formulaire coute une bonne moitie du bloc d achat. Sur tout ecran
   d ordinateur portable ou de bureau (moins de 1000 px de haut), la fiche
   personnalisable adopte donc une mise en page resserree : trois champs par
   rangee, intitules discrets, redites supprimees. Les libelles saisis sont
   courts — un jour, une heure, une surface, un numero. */
@media (min-width:981px) and (max-height:1000px){
  .pdp-perso .ame-perso-grille{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px 10px}
  .pdp-perso .ame-perso{padding:10px 13px;margin-bottom:10px}
  .pdp-perso .ame-perso-intro{margin-bottom:7px;font-size:13px;line-height:1.4}
  .pdp-perso .ame-perso-champ{gap:3px}
  .pdp-perso .ame-perso-champ label{font-size:11.5px}
  .pdp-perso .ame-perso-note{display:none}
  .pdp-perso .ame-perso-plus{margin-top:8px;padding:6px 12px;font-size:12px}
  .pdp-perso .pdp-config{padding:12px;margin-bottom:8px}
  .pdp-perso .pdp-titre{font-size:clamp(19px,2vw,25px);margin:0 0 6px}
  .pdp-perso .pdp-prix{margin-bottom:8px}
  .pdp-perso .pdp-prix .amount,.pdp-perso .pdp-prix bdi{font-size:22px}
  .pdp-perso .pdp-chapo{margin-bottom:8px;font-size:14px}
  .pdp-perso .pdp-atouts{gap:7px}
  .pdp-perso .pdp-atouts li{padding:7px 9px;font-size:11.5px}
  .pdp-perso .pdp-atouts svg{width:17px;height:17px;margin-bottom:4px}
}

/* Dernier cran, pour les ecrans tres bas (portable 768 px avec beaucoup de
   chrome navigateur) : on resserre encore plutot que de retirer du contenu. */
@media (min-width:981px) and (max-height:690px){
  .pdp-perso .pdp-titre{font-size:17px;margin:0 0 4px}
  .pdp-perso .pdp-prix{margin-bottom:6px}
  .pdp-perso .pdp-prix .amount,.pdp-perso .pdp-prix bdi{font-size:19px}
  .pdp-perso .pdp-chapo{font-size:13px;margin-bottom:5px}
  .pdp-perso .pdp-config{padding:8px;margin-bottom:0}
  .pdp-perso .pdp-config .variations tr{margin-bottom:4px}
  .pdp-perso .pdp-config select{padding:8px 11px}
  .pdp-perso .pdp-config button.single_add_to_cart_button{min-height:36px}
  .pdp-perso .ame-perso{padding:7px 11px;margin-bottom:8px}
  .pdp-perso .ame-perso-intro{margin-bottom:5px;font-size:12.5px}
  .pdp-perso .ame-perso-champ label{font-size:11px}
  .pdp-perso .ame-perso-champ input{padding:6px 9px;font-size:13.5px}
  .pdp-perso .ame-perso-plus{margin-top:6px;padding:5px 11px}
}

/* ── Sélecteurs de variation : le texte se recentre ────────────────────────
   woocommerce-blocktheme.css impose « height:3em » avec « padding:0.9em » sur
   .woocommerce table.variations tr td select : la hauteur est figee alors que
   le remplissage mange plus que la place disponible, et le libelle se retrouve
   pousse hors de son axe. Nos regles precedentes (deux classes) perdaient face
   a la sienne (deux classes, quatre elements) : on passe a trois classes. */
.pdp .pdp-config .variations select,
.pdp .pdp-config .variations td select{
  height:auto;
  min-height:0;
  padding:10px 12px;
  font-size:15px;
  line-height:1.35;
}
@media (max-height:900px){
  .pdp .pdp-config .variations select,
  .pdp .pdp-config .variations td select{padding:9px 12px}
}
@media (max-height:760px){
  .pdp .pdp-config .variations select,
  .pdp .pdp-config .variations td select{padding:8px 11px}
}
@media (min-width:981px) and (max-height:690px){
  .pdp-perso .pdp-config .variations select,
  .pdp-perso .pdp-config .variations td select{padding:7px 11px}
}

/* ── Choix des options : pastilles plutot que liste deroulante ─────────────
   Trois tailles, deux finitions : tout tient a l ecran. Une pastille montre
   l offre entiere d un coup d oeil et se choisit en un clic, la ou une liste
   deroulante demandait d ouvrir pour decouvrir. Le select d origine reste dans
   la page, masque : c est toujours lui que WooCommerce lit. */
.pdp-choix{display:flex;flex-wrap:wrap;gap:8px}
.pdp-choix-op{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  padding:9px 15px;border-radius:100px;
  font:600 13.5px/1 'Inter',sans-serif;letter-spacing:.01em;
  color:var(--muted);background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.10);
  transition:color .18s, background .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.pdp-choix-op:hover:not(:disabled){color:var(--ink);transform:translateY(-1px)}
.pdp-choix-op[aria-pressed="true"]{
  color:#fff;background:linear-gradient(135deg,#0a84ff,#0071e3);
  border-color:transparent;box-shadow:0 6px 16px rgba(10,120,255,.28)
}
.pdp-choix-op:disabled{opacity:.38;cursor:not-allowed;text-decoration:line-through}
.pdp-choix-op:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* le select d origine reste lisible par les technologies d assistance */
.pdp-select-cache{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-height:900px){ .pdp-choix-op{padding:8px 14px;font-size:13px} }
@media (max-height:760px){ .pdp-choix{gap:7px} .pdp-choix-op{padding:7px 13px;font-size:12.5px} }
@media (min-width:981px) and (max-height:690px){ .pdp-perso .pdp-choix-op{padding:6px 12px} }

/* WooCommerce desactive parfois le bouton par une classe et non par l attribut :
   sans cette regle il reste bleu vif alors qu il ne fait rien. */
.pdp-config button.single_add_to_cart_button.disabled,
.pdp-config button.single_add_to_cart_button.wc-variation-selection-needed,
.pdp-config button.single_add_to_cart_button[disabled]{
  opacity:.45;box-shadow:none;transform:none;cursor:not-allowed
}

/* Le select masque doit l emporter sur nos propres regles de mise en forme,
   plus specifiques que la classe seule : on cible la meme profondeur. */
.pdp .pdp-config .variations select.pdp-select-cache,
.pdp .pdp-config .variations td select.pdp-select-cache{
  position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0
}

/* Le tiroir affiche desormais de vraies photos produit, plus des dessins SVG. */
.dthumb img{width:100%;height:100%;object-fit:contain;padding:8%;display:block}
.dline .dmeta small{display:block;color:var(--muted);font-size:12px;line-height:1.4;margin:2px 0 6px}
.dtotal b small{font-size:11.5px;font-weight:500;color:var(--muted);margin-left:4px}
.dfoot .freeship{margin:0 0 12px;padding:9px 12px;border-radius:10px;font-size:12.5px;text-align:center}
.dfoot .gbtn{width:100%;margin-top:8px}


/* ══════════ CONFIGURATEUR ÉTIQUETTE 3D ════════════════════════════════════
   Tout est prefixe « etq- » : cette feuille sert aussi la boutique, les fiches
   produit et le panier, et rien ici ne doit deborder ailleurs.
   Le dome est fait de degrades radiaux et d ombres internes — pas de moteur 3D
   pour un objet qui tient dans un rectangle arrondi. */
.etq{max-width:1280px; margin:0 auto; padding:18px 22px 140px;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,440px); gap:26px; align-items:start}

.etq-scene-boite{position:sticky; top:96px}
.etq-scene{position:relative; aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden;
  display:grid; place-items:center; padding:7%;
  background:radial-gradient(120% 90% at 50% 0%, #fdfdfe, #eceff4 55%, #dfe4ec), #e9edf3;
  box-shadow:var(--shadow)}
.etq-scene::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.55) 0 2px, transparent 2px 26px)}

#etqObjet{position:relative; width:120px; height:80px; touch-action:none;
  filter:drop-shadow(0 2px 2px rgba(16,28,48,.34)) drop-shadow(0 16px 26px rgba(16,28,48,.34));
  transition:width .18s ease, height .18s ease, border-radius .18s ease}
#etqImprime{position:absolute; inset:0; overflow:hidden; border-radius:inherit; background:#fff}
/* Le dome grossit legerement ce qu il recouvre : c est ce detail qui distingue
   une resine d un autocollant plat. */
#etqCalques{position:absolute; inset:0; transform:scale(1.045); transform-origin:50% 50%}
.etq-objet{position:absolute; user-select:none; cursor:grab; touch-action:none}
.etq-objet.attrape{cursor:grabbing}
#etqLogoImg{display:block; width:100%; height:100%; object-fit:contain; pointer-events:none}
#etqTexte{white-space:pre-wrap; text-align:center; line-height:1.1; word-break:break-word; pointer-events:none}

/* Trois choses font lire un dome : le bord qui s assombrit, un eclat speculaire
   decentre, et un rebond lumineux a l oppose. Le reste n est que dosage. */
#etqResine{position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:
    radial-gradient(46% 34% at 27% 17%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.58) 38%, rgba(255,255,255,0) 72%),
    radial-gradient(38% 30% at 74% 84%, rgba(255,255,255,.46), rgba(255,255,255,0) 70%),
    radial-gradient(118% 112% at 50% 46%, rgba(10,18,32,0) 50%, rgba(10,18,32,.07) 70%, rgba(10,18,32,.21) 87%, rgba(10,18,32,.36) 100%);
  box-shadow:inset 0 3px 5px rgba(255,255,255,.95), inset 0 -7px 13px rgba(10,18,32,.30),
    inset 7px 0 13px rgba(255,255,255,.34), inset -7px 0 13px rgba(10,18,32,.20)}
#etqResine::after{content:""; position:absolute; left:12%; top:10%; width:26%; height:18%;
  border-radius:50%; filter:blur(1.5px);
  background:radial-gradient(closest-side, rgba(255,255,255,1), rgba(255,255,255,.15) 62%, rgba(255,255,255,0))}
/* Le menisque : le bourrelet de resine qui deborde du bord imprime. */
#etqObjet::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.92), inset 0 0 0 3.5px rgba(10,18,32,.12),
    inset 0 0 9px 3px rgba(255,255,255,.30)}
#etqZone{position:absolute; pointer-events:none; border:1px dashed rgba(10,132,255,.7);
  border-radius:inherit; opacity:0; transition:opacity .2s ease; z-index:4}
#etqZone.on{opacity:1}

.etq-cote{position:absolute; color:var(--muted); font-size:11.5px; font-weight:600;
  letter-spacing:.06em; font-variant-numeric:tabular-nums}
.etq-legende{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:12px;
  color:var(--muted); font-size:12.5px}
.etq-legende b{color:var(--ink); font-weight:600}

.etq-reglages{display:flex; flex-direction:column; gap:14px}
.etq-carte{background:rgba(255,255,255,.72); border:1px solid rgba(0,0,0,.09);
  border-radius:var(--r-md); padding:16px 18px}
.etq-carte h3{display:flex; align-items:center; gap:10px; margin:0 0 12px;
  font:700 12px/1 'Inter',sans-serif; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}
.etq-carte h3 b{display:grid; place-items:center; width:20px; height:20px; border-radius:6px;
  background:rgba(0,0,0,.05); color:var(--accent); font-size:11.5px; letter-spacing:0}

.etq-seg{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.etq-seg.deux{grid-template-columns:repeat(2,1fr)}
.etq-seg.quatre{grid-template-columns:repeat(4,1fr)}
.etq-seg button{border:0; padding:11px 6px; border-radius:var(--r-sm); cursor:pointer;
  background:rgba(0,0,0,.05); color:#3a3f47; font:600 12.5px/1.2 'Inter',sans-serif;
  transition:background .18s, color .18s, box-shadow .18s}
.etq-seg button:hover{background:rgba(10,132,255,.12)}
.etq-seg button.on{background:linear-gradient(135deg,#0a84ff,#0071e3); color:#fff;
  box-shadow:0 6px 16px rgba(10,120,255,.28)}
.etq-seg button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.etq-rang{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.etq-champ{display:flex; flex-direction:column; gap:5px}
.etq-champ label{font-size:11.5px; font-weight:600; color:var(--muted)}
.etq .etq-champ input[type=number], .etq .etq-champ input[type=text],
.etq .etq-champ select, .etq .etq-champ textarea{
  width:100%; padding:10px 12px; border-radius:var(--r-sm); font:inherit; font-size:15px;
  line-height:1.3; height:auto; border:1px solid rgba(0,0,0,.14); background:#fff; color:var(--ink)}
.etq .etq-champ textarea{resize:vertical; min-height:70px}
.etq .etq-champ input:focus, .etq .etq-champ select:focus, .etq .etq-champ textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(10,132,255,.16)}

.etq-note{margin:10px 0 0; font-size:12.5px; color:var(--muted); line-height:1.5}
.etq-note.alerte{color:#b4471f}
.etq-note.ok{color:#12633f}

.etq-curseur{display:flex; align-items:center; gap:10px; margin-top:10px}
.etq-curseur input[type=range]{flex:1; accent-color:var(--accent)}
.etq-curseur span{min-width:46px; text-align:right; font-size:12.5px; color:var(--muted);
  font-variant-numeric:tabular-nums}

.etq-mini{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.etq-mini button{border:1px solid rgba(0,0,0,.10); background:rgba(0,0,0,.04); color:#3a3f47;
  padding:7px 12px; border-radius:100px; font:600 12px/1 'Inter',sans-serif; cursor:pointer}
.etq-mini button:hover{background:rgba(10,132,255,.12); color:var(--ink)}
.etq-mini button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.etq-depot{display:grid; place-items:center; gap:6px; padding:20px 14px; cursor:pointer;
  border:1.5px dashed rgba(0,0,0,.14); border-radius:var(--r-sm); background:rgba(0,0,0,.02);
  color:var(--muted); font-size:13px; text-align:center; transition:border-color .18s, background .18s}
.etq-depot:hover, .etq-depot.survol{border-color:var(--accent); background:rgba(10,132,255,.06)}
.etq-depot b{color:var(--ink); font-weight:600; font-size:13.5px}
.etq-depot small{font-size:11.5px; color:var(--muted)}

.etq-couleurs{display:flex; gap:14px; flex-wrap:wrap}
.etq-couleur{display:flex; align-items:center; gap:9px}
/* La couleur doit occuper tout le rectangle. Le controle natif dessine sa
   pastille en retrait, avec une marge que seul le pseudo-element expose. */
.etq-couleur input[type=color]{-webkit-appearance:none; -moz-appearance:none; appearance:none;
  width:44px; height:32px; padding:0; border:1px solid rgba(0,0,0,.14);
  border-radius:8px; background:none; cursor:pointer; overflow:hidden}
.etq-couleur input[type=color]::-webkit-color-swatch-wrapper{padding:0; border-radius:7px}
.etq-couleur input[type=color]::-webkit-color-swatch{border:0; border-radius:7px}
.etq-couleur input[type=color]::-moz-color-swatch{border:0; border-radius:7px}
.etq-couleur input[type=color]:hover{border-color:rgba(0,0,0,.28)}
.etq-couleur input[type=color]:focus-visible{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(10,132,255,.18)}
.etq-couleur label{font-size:12.5px; color:var(--muted); font-weight:600}

.etq-faits{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.etq-fait{border:1px solid rgba(0,0,0,.08); border-radius:var(--r-sm); padding:11px 13px;
  background:rgba(0,0,0,.02)}
.etq-fait small{display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:700}
.etq-fait b{font-size:13.5px; font-weight:600}

.etq-prix-carte{border-color:rgba(10,132,255,.28); box-shadow:0 8px 24px rgba(10,120,255,.10)}
.etq-prix{display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-top:14px}
.etq-unit{font-size:13px; color:var(--muted)}
.etq-unit b{font-size:19px; color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}
.etq-total{text-align:right}
.etq-total small{display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:700}
.etq-total b{font-size:30px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.etq-total span{font-size:13px; color:var(--muted); font-weight:500}

.etq-cta{width:100%; margin-top:14px; padding:15px 20px; border:0; border-radius:100px;
  cursor:pointer; background:linear-gradient(135deg,#0a84ff,#0071e3); color:#fff;
  font:700 15px/1 'Inter',sans-serif; box-shadow:0 10px 26px rgba(10,120,255,.30);
  transition:transform .18s, box-shadow .18s}
.etq-cta:hover{transform:translateY(-1px); box-shadow:0 14px 32px rgba(10,120,255,.42)}
.etq-cta:disabled{opacity:.45; transform:none; box-shadow:none; cursor:not-allowed}
.etq-cta:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

.etq-barre{display:none}

@media (max-width:940px){
  .etq{grid-template-columns:1fr; gap:18px; padding-bottom:110px}
  .etq-scene-boite{position:static}
  .etq-scene{aspect-ratio:1/1}
  .etq-rang{grid-template-columns:1fr}
  .etq-faits{grid-template-columns:1fr}
  .etq-barre{display:flex; align-items:center; gap:12px; position:fixed; left:0; right:0; bottom:0;
    z-index:60; padding:11px 16px calc(11px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94); border-top:1px solid rgba(0,0,0,.08);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    box-shadow:0 -8px 24px rgba(20,28,45,.10)}
  .etq-barre .etq-bm{flex:1; line-height:1.25}
  .etq-barre .etq-bm b{display:block; font-size:20px; font-weight:700; font-variant-numeric:tabular-nums}
  .etq-barre .etq-bm small{color:var(--muted); font-size:11.5px}
  .etq-barre .etq-cta{width:auto; margin:0; padding:13px 22px; font-size:14px}
}
@media (max-width:520px){ .etq{padding-left:18px; padding-right:18px} }
@media (prefers-reduced-motion: reduce){ .etq *{transition:none !important} }

/* Le texte de la page Étiquette 3D : colonne lisible, sous le configurateur. */
.etq-texte{max-width:760px; padding-top:10px; padding-bottom:70px}
.etq-texte h2{font:700 clamp(22px,2.6vw,30px)/1.25 'Inter',sans-serif; letter-spacing:-.015em; margin:0 0 14px}
.etq-texte h3{font:700 17px/1.35 'Inter',sans-serif; margin:26px 0 8px}
.etq-texte p{color:#3d434e; font-size:15.5px; line-height:1.72; margin:0 0 12px; max-width:68ch}
.etq-texte b{font-weight:600; color:var(--ink)}
@media (max-width:940px){ .etq-texte{padding-bottom:40px} }


/* ══════════ BOUTIQUE — LE CARREFOUR ═══════════════════════════════════════
   Quatre branches : deux rayons de catalogue, deux configurateurs. Les cartes
   de configurateur se distinguent des rayons — on n y choisit pas un produit,
   on en fabrique un. */
.hub{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:0 0 10px}
.hub-carte{position:relative; display:flex; flex-direction:column; gap:12px;
  padding:26px 28px; border-radius:var(--r-lg); text-decoration:none; color:inherit;
  border:1px solid rgba(0,0,0,.07); background:rgba(255,255,255,.66);
  box-shadow:var(--shadow); transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s}
.hub-carte:hover{transform:translateY(-3px); box-shadow:0 24px 52px rgba(20,28,45,.16)}
.hub-carte .eyebrow{color:var(--muted)}
.hub-titre{font:700 clamp(20px,2.3vw,26px)/1.2 'Inter',sans-serif; letter-spacing:-.015em; margin:0}
.hub-texte{color:var(--muted); font-size:14.5px; line-height:1.6; margin:0; flex:1}
.hub-pied{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:2px}
.hub-compte{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}

.hub-vitrine{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.hub-vitrine span{display:block; aspect-ratio:1; border-radius:12px; overflow:hidden; padding:8%;
  background:radial-gradient(75% 92% at 50% 22%, #ffffff, #eaeef5); border:1px solid rgba(0,0,0,.06)}
.hub-vitrine img{width:100%; height:100%; object-fit:contain}

/* Un configurateur n est pas un rayon : fond bleuté, et le geste est « créer ». */
.hub-carte.config{background:linear-gradient(140deg, rgba(10,132,255,.10), rgba(255,255,255,.72) 58%);
  border-color:rgba(10,132,255,.22)}
.hub-carte.config .eyebrow{color:var(--accent)}
.hub-croquis{height:104px; border-radius:14px; display:grid; place-items:center;
  background:radial-gradient(120% 90% at 50% 0%, #fdfdfe, #eceff4 55%, #dfe4ec)}
.hub-croquis i{display:block; background:#fff; border:1px solid rgba(0,0,0,.10);
  box-shadow:0 2px 2px rgba(16,28,48,.20), 0 10px 18px rgba(16,28,48,.22)}
.hub-croquis i.dome{width:104px; height:44px; border-radius:22px;
  background:
    radial-gradient(46% 34% at 27% 17%, rgba(255,255,255,.98), rgba(255,255,255,0) 70%),
    radial-gradient(118% 112% at 50% 46%, rgba(10,18,32,0) 52%, rgba(10,18,32,.22) 90%, rgba(10,18,32,.34) 100%),
    #eef2f7}
.hub-croquis i.plaque{width:112px; height:46px; border-radius:6px;
  background:linear-gradient(100deg,#c6ccd4,#f0f3f7 18%,#b7bfc9 38%,#e8ecf1 58%,#adb5c0 82%,#d9dee5)}

@media (max-width:820px){
  .hub{grid-template-columns:1fr; gap:14px}
  .hub-carte{padding:20px 22px}
}

/* Nuancier de fond : le choix se fait au doigt, pas dans un sélecteur système. */
.etq-nuancier{display:grid; grid-template-columns:repeat(auto-fit,minmax(44px,1fr)); gap:8px}
.etq-nuancier button{position:relative; aspect-ratio:1; border-radius:11px; cursor:pointer;
  border:1px solid rgba(0,0,0,.16); padding:0; transition:transform .16s, box-shadow .16s}
.etq-nuancier button:hover{transform:translateY(-2px)}
.etq-nuancier button.on{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--accent)}
.etq-nuancier button.on::after{content:"✓"; position:absolute; inset:0; display:grid; place-items:center;
  font:700 15px/1 'Inter',sans-serif; color:var(--marque, #16181d)}
.etq-nuancier button:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* Deux photos du produit fini, dans le même emplacement que la vitrine des rayons. */
/* La vitrine s adapte au nombre de photos : une carte peut en porter une,
   deux ou trois. Un gabarit fige a trois colonnes laissait des trous. */
/* Cases carrees : vos photos le sont aussi, elles remplissent donc la vignette
   exactement, sans rien rogner. Une case plus large que haute coupait le haut
   du sujet — le logo Google s y perdait. */
/* Cases carrees de taille fixe. En largeur libre, une carte a une seule photo
   lui donnait 525 px de cote et une carte a trois, 170 : les vignettes doivent
   garder la meme taille quel que soit leur nombre. Le minmax les laisse
   retrecir sur un ecran etroit sans jamais deborder. */
.hub-photos{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,156px);
  gap:8px; justify-content:start}
.hub-photos span{aspect-ratio:1}
/* La photo occupe toute la vignette. Un lisere et une image posee en retrait
   donnaient l impression d un cadre autour de chaque cliche. */
.hub-photos span{display:block; border-radius:12px; overflow:hidden; border:0;
  background:radial-gradient(75% 92% at 50% 22%, #ffffff, #eaeef5)}
.hub-photos img{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width:820px){ .hub-photos{gap:6px} }


/* ══════════ ÉTIQUETTE 3D — LE DÔME, D'APRÈS PHOTO ═════════════════════════
   Reprise du rendu d'après les visuels de production. Trois choses manquaient :
   le liseré de résine qui déborde de l'imprimé, un reflet en bandeau large au
   lieu d'un éclat ponctuel, et des angles bien plus ronds. Toujours zéro
   bibliothèque : des dégradés et des ombres internes suffisent.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le corps de résine. Il est plus grand que l'imprimé, et laisse voir le mur
   au travers de son bord — d'où ce fond très clair, à peine teinté. */
#etqObjet{
  background:linear-gradient(158deg, rgba(255,255,255,.86), rgba(223,232,243,.62) 52%, rgba(255,255,255,.78));
  filter:drop-shadow(0 1px 1px rgba(16,28,48,.30)) drop-shadow(0 14px 24px rgba(16,28,48,.30));
}

/* L'imprimé est en retrait : le liseré transparent tout autour, c'est lui qui
   fait reconnaître un doming plutôt qu'un autocollant. */
#etqImprime{
  inset:var(--etq-rim, 5px);
  border-radius:var(--etq-rim-r, 9px);
  box-shadow:0 0 0 1px rgba(16,28,48,.07), inset 0 1px 2px rgba(16,28,48,.10);
}

/* La résine par-dessus tout : bandeau clair en haut, rebond en bas, bord qui
   s'assombrit là où la lumière se courbe. */
#etqResine{
  background:
    radial-gradient(78% 52% at 40% -6%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.60) 42%, rgba(255,255,255,0) 74%),
    radial-gradient(64% 26% at 52% 104%, rgba(255,255,255,.55), rgba(255,255,255,0) 72%),
    radial-gradient(124% 118% at 50% 44%, rgba(10,18,32,0) 54%, rgba(10,18,32,.06) 74%, rgba(10,18,32,.18) 90%, rgba(10,18,32,.30) 100%);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.98),
    inset 0 -3px 6px rgba(255,255,255,.80),
    inset 0 -10px 16px rgba(10,18,32,.16),
    inset 9px 0 16px rgba(255,255,255,.40),
    inset -9px 0 16px rgba(10,18,32,.16);
}
/* Le bandeau spéculaire : long, incliné, adouci — pas une pastille. */
#etqResine::after{
  content:""; position:absolute; left:6%; right:22%; top:5%; height:26%;
  border-radius:50% / 60%; filter:blur(3px);
  background:linear-gradient(103deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 22%,
    rgba(255,255,255,.96) 58%, rgba(255,255,255,.35) 82%, rgba(255,255,255,0) 100%);
}
/* Le ménisque : l'arête vive de la résine, plus le trait clair du bord bas. */
#etqObjet::after{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.96),
    inset 0 0 0 2.5px rgba(10,18,32,.10),
    inset 0 -2px 4px rgba(255,255,255,.75),
    inset 0 0 14px 4px rgba(255,255,255,.28);
}

/* Les cotes s'accrochent à l'étiquette, plus à des coordonnées calculées. */
.etq-cote{position:absolute; z-index:5; white-space:nowrap}
.etq-cote-l{left:50%; top:100%; transform:translate(-50%, 9px)}
.etq-cote-h{right:100%; top:50%; transform-origin:100% 50%; transform:translate(-11px,-50%) rotate(-90deg)}
.etq-cote-h:empty{display:none}

/* Sur un imprimé blanc, un reflet blanc ne se voit pas : c'est l'ombrage qui
   donne la courbure. On creuse donc le bas et les flancs du dôme, comme sur les
   photos de production, où le blanc vire au gris sous le bourrelet. */
#etqResine{
  background:
    radial-gradient(80% 54% at 38% -8%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.62) 40%, rgba(255,255,255,0) 72%),
    radial-gradient(60% 24% at 52% 103%, rgba(255,255,255,.62), rgba(255,255,255,0) 74%),
    linear-gradient(184deg, rgba(10,18,32,0) 34%, rgba(10,18,32,.05) 62%, rgba(10,18,32,.13) 88%, rgba(10,18,32,.05) 100%),
    radial-gradient(126% 120% at 50% 42%, rgba(10,18,32,0) 50%, rgba(10,18,32,.07) 72%, rgba(10,18,32,.20) 89%, rgba(10,18,32,.34) 100%);
  box-shadow:
    inset 0 3px 5px rgba(255,255,255,.98),
    inset 0 -4px 7px rgba(255,255,255,.85),
    inset 0 -14px 22px rgba(10,18,32,.20),
    inset 12px 0 20px rgba(255,255,255,.45),
    inset -12px 0 20px rgba(10,18,32,.20);
}

/* ══════════ ÉTIQUETTE 3D — LA GALERIE DE PRODUCTION ═════════════════
   Le configurateur dessine le dôme ; ces photos montrent la pièce réelle. On
   les pose juste dessous, là où le client vient de composer son étiquette, pour
   qu il rapproche son aperçu de ce qu il recevra. Quatre vues : deux logos
   différents, une prise de face et une de trois quarts qui montre le bombé.
   ═════════════════════════════════════════════════════════════════════════ */
.etq-galerie{margin:44px 0 0}
.etq-galerie h2{margin:0 0 12px; font-size:30px; font-weight:700; line-height:1.2; letter-spacing:-.015em}
.etq-galerie .etq-galerie-intro{margin:0 0 22px; font-size:15.5px; line-height:1.72; color:#5a6070; max-width:651px}
.etq-galerie-grille{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.etq-vue{margin:0; display:flex; flex-direction:column; gap:9px}
.etq-vue span{display:block; aspect-ratio:4/3; border-radius:16px; overflow:hidden;
  border:1px solid rgba(0,0,0,.07); background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.04)}
.etq-vue img{width:100%; height:100%; object-fit:contain; display:block}
.etq-vue figcaption{font-size:12.5px; line-height:1.4; color:#6b7280}
@media (max-width:900px){ .etq-galerie-grille{grid-template-columns:repeat(2,1fr); gap:12px} }
@media (max-width:520px){ .etq-galerie-grille{grid-template-columns:1fr} }
@media (max-width:480px){ .etq-galerie{margin-top:34px} .etq-galerie h2{font-size:20px} }

/* Quatre formes au lieu de trois : deux par ligne, plutot qu une rangee de
   trois suivie d une orpheline. Le champ hauteur se verrouille des que la forme
   n a plus de hauteur libre. */
.etq #etqForme{grid-template-columns:repeat(2,1fr)}
.etq .etq-champ input:disabled{background:#f4f6fa; color:#8b91a1; cursor:not-allowed}

/* ══════════ PLAQUE AVIS GOOGLE ═════════════════════════════════
   L aperçu reprend la maquette validée : le G Google, le titre, le filet à
   quatre points, le QR, les cinq étoiles, le filet au coeur, le remerciement.
   Une plaque d avis reste toujours claire — un QR se lit par contraste, un fond
   sombre fait échouer beaucoup d appareils photo. Il n y a donc pas de variante
   sombre, et le dôme de résine n existe qu en brillant.
   ═════════════════════════════════════════════════════════════════ */
.pag{max-width:1240px;margin:0 auto;padding:0 28px;display:grid;
  grid-template-columns:1fr 470px;gap:26px;align-items:start}
.pag-scene{background:#fff;border:1px solid rgba(16,24,40,.08);border-radius:26px;
  padding:30px;position:sticky;top:22px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.pag-plan{aspect-ratio:1/1;min-height:500px;padding:26px;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 8%, #fff 0%, #eef1f7 62%, #e6eaf3 100%);
  border-radius:18px;position:relative;overflow:hidden}
.pag-plan::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.55) 0 2px,transparent 2px 26px)}

.pag-plaque{position:relative;z-index:2;width:300px;height:440px;border-radius:20px;
  background:#fff;border:1px solid rgba(16,24,40,.10);
  box-shadow:0 20px 46px rgba(16,24,40,.17), 0 2px 6px rgba(16,24,40,.10);
  transition:width .25s,height .25s,border-radius .25s,transform .25s,background .25s}
.pag-corps{position:absolute;inset:24px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;transition:transform .25s}
.pag-corps>*{flex:none}
.pag-plaque.rect{width:300px;height:440px}
.pag-plaque.carre{width:380px;height:380px;border-radius:22px}
.pag-plaque.rond{width:380px;height:380px;border-radius:50%}
.pag-plaque.rond .pag-corps{inset:46px}
/* Le losange tourne au lieu d etre découpé : bordure et ombre suivent alors la
   silhouette, ce qu un clip-path ne permet pas. Sa diagonale égale le côté du
   carré (380 / racine 2 = 268) pour que deux plaques annoncées à la même
   dimension aient la même emprise à l écran. */
.pag-plaque.losange{width:268px;height:268px;border-radius:22px;transform:rotate(45deg)}
.pag-plaque.losange .pag-corps{inset:26px;transform:rotate(-45deg)}

.pag-plaque.m-alu{background:linear-gradient(128deg,#eaedf1 0%,#f9fafc 26%,#dce1e7 52%,#f3f5f8 74%,#e2e6ec 100%)}
.pag-plaque.m-plexi{background:linear-gradient(140deg,rgba(255,255,255,.96),rgba(232,240,249,.92));
  box-shadow:0 20px 46px rgba(16,24,40,.15), inset 0 0 0 1px rgba(255,255,255,.9)}
.pag-plaque.m-dibond{background:linear-gradient(150deg,#fdfdfe,#eff2f6)}
.pag-plaque.m-pvc{background:#fff}
.pag-plaque.m-doming{background:#fff;box-shadow:0 20px 46px rgba(16,24,40,.19),
  inset 0 -16px 28px rgba(16,24,40,.07), inset 0 12px 24px rgba(255,255,255,.95)}
.pag-plaque.m-doming::before{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:5;background:
    radial-gradient(78% 50% at 38% -6%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(58% 20% at 52% 104%, rgba(255,255,255,.5), rgba(255,255,255,0) 70%)}
.pag-plaque.f-mat{filter:saturate(.97)}
.pag-plaque.f-mat.m-alu{background:linear-gradient(128deg,#eaecef,#f3f4f6 50%,#e5e8ec)}

.pag-logo{width:52px;height:52px;border-radius:50%;display:none;place-items:center;
  overflow:hidden;margin-bottom:10px}
.pag-plaque.avec-logo .pag-logo{display:grid}
.pag-logo img{width:100%;height:100%;object-fit:contain}
.pag-g{width:46px;height:46px;margin-bottom:8px;flex:none}
.pag-titre{font:800 22px/1.16 Inter,system-ui,sans-serif;letter-spacing:-.02em;
  text-align:center;margin:0;color:#16181d;text-wrap:balance}
.pag-filet{display:flex;align-items:center;gap:11px;width:82%;margin:12px 0}
.pag-filet .trait{flex:1;height:1px;background:rgba(16,24,40,.16)}
.pag-points{display:flex;gap:5px}
.pag-points i{width:6px;height:6px;border-radius:50%;display:block}
.pag-points i:nth-child(1){background:#4285F4}
.pag-points i:nth-child(2){background:#EA4335}
.pag-points i:nth-child(3){background:#FBBC04}
.pag-points i:nth-child(4){background:#34A853}
.pag-sous{font:400 13.5px/1.3 Inter,system-ui,sans-serif;color:#6b7280;text-align:center;margin:0 0 14px}
.pag-qr{width:136px;height:136px;display:grid;grid-template:repeat(25,1fr)/repeat(25,1fr);
  background:#fff;padding:5px;border-radius:4px}
.pag-qr i{background:transparent;display:block}
.pag-qr i.on{background:#101114}
.pag-etoiles{display:flex;gap:5px;font-size:24px;line-height:1;color:#fbbc04;margin-top:14px}
.pag-coeur{width:15px;height:15px;color:rgba(16,24,40,.4)}
.pag-merci{font:700 16px/1.2 Inter,system-ui,sans-serif;text-align:center;margin:0;color:#16181d}
.pag-nfc{position:absolute;right:13px;bottom:11px;z-index:4;display:flex;align-items:center;
  gap:4px;font:600 8px/1 Inter,system-ui,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:#8b91a1}
.pag-nfc svg{width:11px;height:11px}
.pag-plaque.losange .pag-nfc{display:none}
.pag-plaque.carre .pag-titre{font-size:21px}
.pag-plaque.carre .pag-qr{width:124px;height:124px}
.pag-plaque.carre .pag-merci,.pag-plaque.carre .pag-filet.bas{display:none}
.pag-plaque.rond .pag-g{width:40px;height:40px}
.pag-plaque.rond .pag-titre{font-size:20px}
.pag-plaque.rond .pag-qr{width:110px;height:110px}
.pag-plaque.rond .pag-etoiles{font-size:21px;margin-top:10px}
.pag-plaque.rond .pag-merci,.pag-plaque.rond .pag-filet.bas{display:none}
.pag-plaque.losange .pag-g{width:32px;height:32px;margin-bottom:6px}
.pag-plaque.losange .pag-titre{font-size:15px}
.pag-plaque.losange .pag-qr{width:90px;height:90px;margin-top:7px}
.pag-plaque.losange .pag-etoiles{font-size:17px;margin-top:8px}
.pag-plaque.losange .pag-sous,.pag-plaque.losange .pag-merci,
.pag-plaque.losange .pag-filet,.pag-plaque.losange .pag-logo{display:none}
.pag-aide{text-align:center;font-size:13px;color:#8b91a1;margin:18px 0 0}

@media (max-width:1040px){ .pag{grid-template-columns:1fr} .pag-scene{position:static} }
@media (max-width:640px){
  .pag{padding:0 18px}
  .pag-scene{padding:18px}
  .pag-plan{min-height:400px;padding:16px}
  .pag-plaque.rect{width:242px;height:352px}
  .pag-plaque.rect .pag-corps{inset:18px}
  .pag-plaque.carre,.pag-plaque.rond{width:300px;height:300px}
  .pag-plaque.rond .pag-corps{inset:36px}
  .pag-plaque.losange{width:212px;height:212px}
  .pag-plaque.losange .pag-corps{inset:20px}
  .pag-titre{font-size:19px}
  .pag-qr{width:112px;height:112px}
}

/* ══════════ CHAMPS DES CONFIGURATEURS ═══════════════════════════
   Les regles de champ etaient portees par .etq seul. La fiche Plaque Avis
   Google, dont le conteneur est .pag, se retrouvait avec les champs natifs du
   navigateur : bord carre, hauteur differente, fleche systeme. On etend la
   regle aux deux conteneurs, et on dessine la fleche du menu deroulant plutot
   que de laisser celle du systeme, qui change d une machine a l autre.
   ══════════════════════════════════════════════════════════════════ */
.pag .etq-champ input[type=number], .pag .etq-champ input[type=text],
.pag .etq-champ input[type=url], .pag .etq-champ select{
  width:100%; padding:10px 12px; border-radius:var(--r-sm); font:inherit; font-size:15px;
  line-height:1.3; height:auto; border:1px solid rgba(0,0,0,.14); background:#fff;
  color:var(--ink); transition:border-color .15s, box-shadow .15s, background-color .15s}
.pag .etq-champ input:focus, .pag .etq-champ select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(10,132,255,.16)}
.pag .etq-champ input:disabled{background:#f4f6fa; color:var(--muted); cursor:not-allowed}

/* Le menu deroulant : fleche dessinee, place reservee a droite, et le meme
   comportement au survol que les pastilles de choix juste au-dessus. */
.etq .etq-champ select, .pag .etq-champ select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:38px; cursor:pointer; text-overflow:ellipsis;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235a6070' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:12px 8px}
.etq .etq-champ select:hover, .pag .etq-champ select:hover{
  border-color:rgba(0,0,0,.26); background-color:#fbfcfe}
.etq .etq-champ select:focus, .pag .etq-champ select:focus{background-color:#fff}
.etq .etq-champ select::-ms-expand, .pag .etq-champ select::-ms-expand{display:none}

/* ══════════ TUNNEL DE COMMANDE ═══════════════════════════════════════════
   La page /commander/ sert le tunnel classique de WooCommerce dans la coquille
   de la boutique. On habille son balisage d origine plutot que de le refaire :
   deux colonnes, coordonnees a gauche, recapitulatif colle a droite, et les
   champs alignes sur ceux des configurateurs.
   ═════════════════════════════════════════════════════════════════════════ */
.cmd{max-width:1240px; margin:0 auto; padding:18px 28px 120px}

/* L etat vide, et l avis quand aucun paiement n est branche */
.cmd-vide{background:#fff; border:1px solid rgba(0,0,0,.09); border-radius:var(--r-md);
  padding:40px 34px; text-align:center; max-width:620px; margin:14px auto 0}
.cmd-vide h2{margin:0 0 8px; font-size:22px; letter-spacing:-.01em}
.cmd-vide p{margin:0 auto 20px; max-width:46ch; color:var(--muted); line-height:1.6}

.cmd-avis{display:flex; gap:16px; align-items:flex-start; margin:0 0 22px;
  background:rgba(10,132,255,.07); border:1px solid rgba(10,132,255,.20);
  border-radius:var(--r-md); padding:18px 22px}
.cmd-avis-ico{flex:none; width:34px; height:34px; border-radius:50%; display:grid;
  place-items:center; background:rgba(10,132,255,.14); color:var(--accent)}
.cmd-avis-ico svg{width:19px; height:19px}
.cmd-avis h2{margin:0 0 5px; font-size:17px; letter-spacing:-.01em}
.cmd-avis p{margin:0 0 10px; font-size:14.5px; line-height:1.6; color:#3f4552; max-width:76ch}
.cmd-avis-cta{display:inline-block; font-weight:600; font-size:14.5px; color:var(--accent);
  text-decoration:none}
.cmd-avis-cta:hover{text-decoration:underline}

/* Deux colonnes : coordonnees a gauche, recapitulatif colle a droite */
.ame-cmd form.checkout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,410px);
  gap:18px 26px; align-items:start}
.ame-cmd #customer_details{grid-column:1; grid-row:1 / span 2}
.ame-cmd #order_review_heading{grid-column:2; grid-row:1; margin:0}
.ame-cmd #order_review{grid-column:2; grid-row:2; position:sticky; top:22px}
.ame-cmd #customer_details, .ame-cmd #order_review{
  background:#fff; border:1px solid rgba(0,0,0,.09); border-radius:var(--r-md); padding:22px 24px}
.ame-cmd #customer_details .col2-set{display:grid; grid-template-columns:1fr; gap:0}
.ame-cmd #customer_details .col-1, .ame-cmd #customer_details .col-2{width:auto; float:none}
.ame-cmd h3, .ame-cmd #order_review_heading{font:700 12.5px/1 'Inter',sans-serif;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin:0 0 14px}
.ame-cmd #customer_details .col-2 h3{margin-top:24px}

/* Les champs : memes reglages que les configurateurs */
.ame-cmd .form-row{display:flex; flex-direction:column; gap:5px; margin:0 0 12px; padding:0}
.ame-cmd .form-row label{font-size:11.5px; font-weight:600; color:var(--muted)}
.ame-cmd .form-row label .required{color:#b4471f; text-decoration:none}
.ame-cmd .form-row .input-text, .ame-cmd .form-row select,
.ame-cmd .form-row textarea, .ame-cmd .select2-selection{
  width:100%; padding:10px 12px; border-radius:var(--r-sm); font:inherit; font-size:15px;
  line-height:1.3; height:auto; border:1px solid rgba(0,0,0,.14); background:#fff;
  color:var(--ink); box-sizing:border-box}
.ame-cmd .form-row textarea{min-height:84px; resize:vertical}
.ame-cmd .form-row .input-text:focus, .ame-cmd .form-row select:focus,
.ame-cmd .form-row textarea:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(10,132,255,.16)}
.ame-cmd .form-row-first, .ame-cmd .form-row-last{width:100%; float:none}
.ame-cmd .woocommerce-billing-fields__field-wrapper,
.ame-cmd .woocommerce-shipping-fields__field-wrapper{display:grid;
  grid-template-columns:1fr 1fr; gap:0 14px}
.ame-cmd .form-row-wide, .ame-cmd #billing_address_1_field, .ame-cmd #billing_address_2_field,
.ame-cmd #billing_company_field{grid-column:1 / -1}
.ame-cmd .select2-container .select2-selection--single{height:auto; padding:10px 12px}
.ame-cmd .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:1.3; padding:0; color:var(--ink)}
.ame-cmd .select2-container--default .select2-selection--single .select2-selection__arrow{top:9px; right:8px}

/* Le recapitulatif */
.ame-cmd .woocommerce-checkout-review-order-table{width:100%; border-collapse:collapse; font-size:14.5px}
.ame-cmd .woocommerce-checkout-review-order-table th,
.ame-cmd .woocommerce-checkout-review-order-table td{padding:10px 0; text-align:left;
  border-bottom:1px solid rgba(0,0,0,.08); vertical-align:top}
.ame-cmd .woocommerce-checkout-review-order-table td:last-child,
.ame-cmd .woocommerce-checkout-review-order-table th:last-child{text-align:right; white-space:nowrap}
.ame-cmd .woocommerce-checkout-review-order-table thead th{font:600 11.5px/1 'Inter',sans-serif;
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.ame-cmd .woocommerce-checkout-review-order-table .order-total td,
.ame-cmd .woocommerce-checkout-review-order-table .order-total th{border-bottom:0;
  font-size:17px; font-weight:800; padding-top:14px}
.ame-cmd .woocommerce-checkout-review-order-table dl.variation{margin:6px 0 0;
  font-size:12.5px; color:var(--muted); line-height:1.5}
/* La liste de definitions garde ses paires : un libelle par ligne, sa valeur
   en face. Les passer toutes en inline les melangeait au retour a la ligne, et
   le recapitulatif annoncait la matiere sous le libelle des cotes. */
.ame-cmd dl.variation{display:grid; grid-template-columns:auto minmax(0,1fr); gap:1px 6px}
.ame-cmd dl.variation dt{grid-column:1; margin:0; font-weight:600; white-space:nowrap}
.ame-cmd dl.variation dd{grid-column:2; margin:0; min-width:0; overflow-wrap:anywhere}
.ame-cmd dl.variation dd p{margin:0}

/* Le paiement : tant qu aucune passerelle n est active, WooCommerce affiche
   son propre message. On l habille au lieu de le laisser brut. */
.ame-cmd #payment{background:var(--puits, #f6f8fb); border:1px solid rgba(0,0,0,.08);
  border-radius:var(--r-sm); padding:16px 18px; margin-top:18px}
.ame-cmd #payment .wc_payment_methods{list-style:none; margin:0 0 12px; padding:0}
.ame-cmd #payment .wc_payment_method{margin-bottom:8px}
.ame-cmd #payment .woocommerce-notice, .ame-cmd #payment li.woocommerce-notice{
  margin:0; padding:0; font-size:14px; line-height:1.6; color:#8a6410; background:none; border:0}
.ame-cmd .place-order{margin:14px 0 0; padding:0}
.ame-cmd #place_order{width:100%; border:0; border-radius:var(--r-sm); cursor:pointer;
  padding:15px 18px; font:600 16px/1 'Inter',sans-serif; color:#fff;
  background:var(--accent); box-shadow:0 8px 22px rgba(10,132,255,.28)}
.ame-cmd #place_order:hover{filter:brightness(.95)}
.ame-cmd #place_order:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
.ame-cmd .woocommerce-terms-and-conditions-wrapper{margin:12px 0 0; font-size:13px;
  color:var(--muted); line-height:1.55}

/* Messages de WooCommerce */
.ame-cmd .woocommerce-info, .ame-cmd .woocommerce-message, .ame-cmd .woocommerce-error{
  list-style:none; margin:0 0 16px; padding:13px 18px; border-radius:var(--r-sm);
  font-size:14.5px; line-height:1.55; border:1px solid}
.ame-cmd .woocommerce-info{background:rgba(10,132,255,.07); border-color:rgba(10,132,255,.20); color:#1c4f8f}
.ame-cmd .woocommerce-message{background:rgba(16,150,90,.10); border-color:rgba(16,150,90,.24); color:#12633f}
.ame-cmd .woocommerce-error{background:rgba(192,57,43,.09); border-color:rgba(192,57,43,.22); color:#8e2a21}
.ame-cmd .woocommerce-form-coupon-toggle{margin-bottom:16px}

@media (max-width:1000px){
  .ame-cmd form.checkout{grid-template-columns:1fr}
  .ame-cmd #customer_details{grid-column:1; grid-row:auto}
  .ame-cmd #order_review_heading{grid-column:1; grid-row:auto; margin-top:6px}
  .ame-cmd #order_review{grid-column:1; grid-row:auto; position:static}
}
@media (max-width:620px){
  .cmd{padding:14px 18px 100px}
  .ame-cmd .woocommerce-billing-fields__field-wrapper,
  .ame-cmd .woocommerce-shipping-fields__field-wrapper{grid-template-columns:1fr}
  .cmd-avis{flex-direction:column; gap:12px}
}

/* Le relais quand le paiement n est pas branche : le bouton de WooCommerce est
   grise, celui-ci prend le relais et mene au devis. */
.ame-cmd .cmd-devis{display:block; margin-top:10px; padding:13px 18px; border-radius:var(--r-sm);
  text-align:center; text-decoration:none; font:600 15px/1 'Inter',sans-serif;
  color:var(--accent); background:rgba(10,132,255,.09);
  border:1px solid rgba(10,132,255,.24)}
.ame-cmd .cmd-devis:hover{background:rgba(10,132,255,.15)}

/* Les rendus dessines des cartes du carrefour : ils occupent la vignette
   comme le ferait une photo. */
.hub-croquis .hub-rendu{width:100%; height:100%; display:block}

/* Le bouton de devis ne doit pas rivaliser avec l ajout au panier : meme
   forme, moins de poids. Deux boutons pleins l un sous l autre auraient
   partage l attention au lieu de la hierarchiser. */
.etq-cta.doux{background:rgba(10,132,255,.09); color:var(--accent);
  border:1px solid rgba(10,132,255,.26); box-shadow:none}
.etq-cta.doux:hover{background:rgba(10,132,255,.16)}
.etq-cta.doux:disabled{opacity:.55; cursor:progress}


/* ── Blog : sommaire, articles liés, illustrations (03/09) ── */

/* Sommaire — bloc identifiable sur desktop, accordéon replié sur mobile.
   Une seule structure pour les 7 contenus : bouton + liste. */
.de-toc{ background:#fff; border:1px solid rgba(0,0,0,.09); border-radius:14px;
  padding:0; margin:10px 0 28px; font-size:14px; display:block; overflow:hidden; }
.de-toc-b{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  background:none; border:0; margin:0; padding:15px 20px; text-align:left; cursor:default;
  font:700 12px/1 'Inter',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#16181d; }
.de-toc-b::after{ content:''; flex:0 0 auto; width:9px; height:9px; display:none;
  border-right:2px solid #8b8f98; border-bottom:2px solid #8b8f98;
  transform:rotate(45deg); transition:transform .2s ease; }
.de-toc-l{ display:flex; flex-wrap:wrap; gap:9px 20px; padding:0 20px 18px; }
.de-toc-l a{ color:#0071e3; text-decoration:none; }
.de-toc-l a:hover{ text-decoration:underline; }
@media (max-width:760px){
  .de-toc-b{ cursor:pointer; }
  .de-toc-b::after{ display:block; }
  .de-toc.ouvert .de-toc-b::after{ transform:rotate(-135deg); }
  .de-toc-l{ display:none; flex-direction:column; flex-wrap:nowrap; gap:0; padding:0 20px 8px; }
  .de-toc-l a{ padding:12px 2px; border-top:1px solid rgba(0,0,0,.07); }
  .de-toc.ouvert .de-toc-l{ display:flex; }
}

/* Ancrage propre : sans marge, le titre visé se colle sous la pilule d'en-tête. */
html{ scroll-behavior:smooth; }
.de-pillar [id], .tlpe-texte [id], .tlpe-calc[id]{ scroll-margin-top:96px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* Articles liés — trois cartes simples, pas de carrousel. */
.de-liens{ margin:46px 0 0; padding:30px 0 0; border-top:1px solid rgba(0,0,0,.09); }
.de-liens h2{ font:700 12px/1 'Inter',sans-serif; letter-spacing:.1em; text-transform:uppercase;
  color:#6b7280; margin:0 0 16px; }
.de-liens-g{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.de-lien{ display:block; background:#fff; border:1px solid rgba(0,0,0,.09); border-radius:14px;
  padding:16px 18px; text-decoration:none; transition:border-color .16s ease, transform .16s ease; }
.de-lien:hover{ border-color:rgba(0,0,0,.24); transform:translateY(-2px); }
.de-lien-c{ display:block; font:700 10.5px/1 'Inter',sans-serif; letter-spacing:.11em;
  text-transform:uppercase; color:#0071e3; margin:0 0 8px; }
.de-lien b{ display:block; font:600 15px/1.35 'Inter',sans-serif; color:#16181d; }
@media (max-width:860px){ .de-liens-g{ grid-template-columns:1fr; } }

/* Illustrations d'article — emplacement normalisé, légende sous l'image. */
.de-fig{ margin:24px 0 26px; }
.de-fig img{ display:block; width:100%; height:auto; border-radius:16px;
  border:1px solid rgba(0,0,0,.08); background:#f2f4f7; }
.de-fig figcaption{ margin:9px 2px 0; font-size:13px; color:#6b7280; }
.de-fig.vide{ display:flex; align-items:center; justify-content:center; min-height:190px;
  border:1px dashed rgba(0,0,0,.18); border-radius:16px; background:#f7f8fa;
  font-size:13px; color:#9aa0aa; text-align:center; padding:20px; }

.bg-card[hidden]{ display:none !important; }

/* Vignette des cartes du blog. */
.bg-cimg{ display:block; margin:-4px 0 14px; border-radius:12px; overflow:hidden;
  aspect-ratio:16/9; background:radial-gradient(75% 92% at 50% 22%, #ffffff, #e9edf4); }
.bg-cimg img{ width:100%; height:100%; object-fit:cover; display:block; }
.bg-card:has(.bg-cimg){ padding-top:18px; }

/* Filtres — défilement horizontal maîtrisé sur mobile, jamais de débordement de page. */
.bg-filters{ display:flex; flex-wrap:wrap; gap:9px; }
@media (max-width:640px){
  .bg-filters{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  .bg-filters::-webkit-scrollbar{ display:none; }
  .bg-chip{ flex:0 0 auto; white-space:nowrap; }
}


/* ── Guide d’achat : à retenir, cartes, accordéons (03/09) ── */

/* Un tableau large ne pousse plus la page : il défile dans son propre cadre. */
.de-tw{ overflow-x:auto; margin:18px 0 26px; border-radius:12px; -webkit-overflow-scrolling:touch; }
.de-tw .de-ptable{ margin:0; min-width:100%; }

/* « À retenir » — ce que retient celui qui ne lira pas l'article. */
.de-cle{ background:linear-gradient(180deg,#f4f8ff,#edf2fb); border:1px solid rgba(10,132,255,.22);
  border-radius:16px; padding:20px 24px; margin:26px 0 34px; }
.de-cle > b{ display:block; font:700 11.5px/1 'Inter',sans-serif; letter-spacing:.12em;
  text-transform:uppercase; color:#0071e3; margin:0 0 13px; }
.de-cle ul{ margin:0; padding:0; list-style:none; display:grid; gap:11px; }
.de-cle li{ position:relative; padding-left:26px; font-size:16px; line-height:1.55; color:#1d2229; }
.de-cle li::before{ content:''; position:absolute; left:3px; top:8px; width:9px; height:9px;
  border-radius:50%; background:#0a84ff; }

/* Cartes de comparaison — on scanne, on ne lit pas quatre paragraphes. */
.de-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(214px,1fr)); gap:14px; margin:24px 0 32px; }
.de-cards.deux{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.de-cards.paire{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:560px){ .de-cards.paire{ grid-template-columns:1fr; } }
.de-card{ display:flex; flex-direction:column; background:#fff; border:1px solid rgba(0,0,0,.09);
  border-radius:16px; overflow:hidden; text-decoration:none; color:inherit;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
a.de-card:hover{ border-color:rgba(0,0,0,.22); transform:translateY(-2px); box-shadow:0 12px 28px rgba(20,28,45,.09); }
.de-card-v{ aspect-ratio:4/3; background:radial-gradient(72% 88% at 50% 24%, #ffffff, #e8edf5);
  display:flex; align-items:center; justify-content:center; border-bottom:1px solid rgba(0,0,0,.06); }
.de-card-v img{ width:100%; height:100%; object-fit:cover; display:block; }
.de-card-v svg{ width:74%; height:74%; }
.de-card-c{ padding:15px 17px 17px; display:flex; flex-direction:column; gap:7px; flex:1; }
.de-card-c b{ font:700 16px/1.3 'Inter',sans-serif; color:#16181d; }
.de-card-c p{ margin:0; font-size:14.5px; line-height:1.5; color:#565c66; }
.de-card-u{ margin-top:auto; padding-top:11px; font:600 13.5px/1.35 'Inter',sans-serif; color:#1d2229; }
.de-card-u span{ display:block; font-weight:400; color:#9aa0aa; text-transform:uppercase;
  letter-spacing:.09em; font-size:10.5px; margin-bottom:3px; }
.de-card-l{ margin-top:9px; font-size:13px; font-weight:600; color:#0071e3; }

/* Accordéon sobre : l'information reste dans le HTML, pas dans le champ de vision. */
.de-acc{ border:1px solid rgba(0,0,0,.09); border-radius:14px; background:#fff; margin:0 0 11px; }
.de-acc > summary{ cursor:pointer; list-style:none; padding:16px 20px; gap:14px;
  font:600 15.5px/1.35 'Inter',sans-serif; color:#16181d; display:flex; align-items:center; justify-content:space-between; }
.de-acc > summary::-webkit-details-marker{ display:none; }
.de-acc > summary::after{ content:''; flex:0 0 auto; width:9px; height:9px;
  border-right:2px solid #9aa0aa; border-bottom:2px solid #9aa0aa;
  transform:rotate(45deg); transition:transform .2s ease; }
.de-acc[open] > summary::after{ transform:rotate(-135deg); }
.de-acc-c{ padding:14px 20px 18px; border-top:1px solid rgba(0,0,0,.06); }
.de-acc-c > :last-child{ margin-bottom:0; }
.de-acc-c h4{ font:700 14.5px/1.35 'Inter',sans-serif; color:#16181d; margin:18px 0 7px; }
.de-acc-c h4:first-child{ margin-top:0; }

/* Hiérarchie : un H2 doit se voir de loin, un H3 rester un sous-titre. */
.de-pillar h2{ font-size:30px; margin:64px 0 16px; letter-spacing:-.01em; }
.de-pillar h2::after{ content:''; display:block; width:46px; height:3px; border-radius:2px;
  background:#0a84ff; margin:14px 0 0; }
.de-pillar h3{ font-size:18px; margin:32px 0 8px; }
.de-liens h2::after, .de-toc h2::after{ display:none; }
.de-pillar .de-cle + h2{ margin-top:44px; }
@media (max-width:640px){
  .de-pillar{ font-size:16px; padding:28px 20px 70px; }
  .de-pillar h2{ font-size:25px; margin-top:50px; }
  .de-cle{ padding:18px 18px; }
}

/* Étapes numérotées — une liste qui se scanne. */
.de-etapes{ list-style:none; margin:20px 0 22px; padding:0; counter-reset:et; display:grid; gap:11px; }
.de-etapes li{ counter-increment:et; position:relative; padding:13px 18px 13px 52px;
  background:#fff; border:1px solid rgba(0,0,0,.09); border-radius:13px; font-size:15.5px; line-height:1.55; }
.de-etapes li::before{ content:counter(et); position:absolute; left:16px; top:12px;
  width:23px; height:23px; border-radius:50%; background:#0a84ff; color:#fff;
  font:700 12.5px/23px 'Inter',sans-serif; text-align:center; }

/* Note discrète sous un tableau ou un visuel. */
.de-note{ font-size:13.5px; line-height:1.55; color:#6b7280; margin:-12px 0 26px; }
.de-note b{ color:#4b5563; }

/* Repère de lecture rapide : distance → hauteur, budget, etc. */
.de-echelle{ display:grid; gap:10px; margin:22px 0 30px; }
.de-echelle div{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px;
  background:#fff; border:1px solid rgba(0,0,0,.09); border-radius:13px; padding:13px 18px; }
.de-echelle b{ font:700 15px/1.3 'Inter',sans-serif; color:#16181d; }
.de-echelle span{ font:600 14px/1.3 'Inter',sans-serif; color:#0071e3; white-space:nowrap; }
.de-echelle em{ display:block; font-style:normal; font-size:13.5px; color:#6b7280; margin-top:2px; }

/* ══ LOT 227 — LE MENU DEROULANT DE « NOS SERVICES » ═══════════════════════════
   Pose en FIN de feuille, et non a cote de `.gnav` : la feuille redefinit plus bas
   `.gheader` en clair, et cette redefinition gagne. Un menu ecrit plus haut aurait
   herite du vocabulaire sombre de la premiere definition, celui que la page
   n affiche pas. */
.gnav-sm{position:relative; display:flex; align-items:center}
.gnav-sm > a{display:inline-flex; align-items:center; gap:6px}
/* Le chevron dit qu il y a quelque chose dessous, et se retourne quand c est ouvert. */
.gnav-sm > a::after{
  content:""; width:5px; height:5px; margin-top:-2px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform .18s ease;
}
.gnav-sm.ouvert > a::after{transform:rotate(-135deg); margin-top:1px}

.gnav-menu{
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(2px);
  min-width:246px; padding:8px; border-radius:18px; z-index:90;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(26px) saturate(1.7); backdrop-filter:blur(26px) saturate(1.7);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 44px rgba(20,28,45,.18), inset 0 1px 0 rgba(255,255,255,.9);
  opacity:0; visibility:hidden;
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.gnav-sm.ouvert .gnav-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(10px)}

/* LE PONT. Le menu s ouvre 10 px sous le lien ; sans cette zone invisible, la souris
   qui descend traverse un vide, mouseleave part, et le menu se ferme juste avant
   d etre atteint. C est le defaut classique de ce composant. */
.gnav-menu::before{content:""; position:absolute; left:0; right:0; top:-14px; height:14px}

.gnav-menu a{
  display:block; padding:9px 12px; border-radius:11px;
  font-size:13.5px; font-weight:500; color:var(--muted); white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.gnav-menu a:hover{background:rgba(10,132,255,.09); color:var(--ink)}
.gnav-menu a:focus-visible{outline:2px solid #0a84ff; outline-offset:-2px; color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .gnav-menu{transition:none}
  .gnav-sm > a::after{transition:none}
}