/* COMM-DZ boutique site chrome+templates+footer */
.site { min-height:100vh; display:flex; flex-direction:column; position:relative; z-index:1; }
.tpl { display:none; flex:1; flex-direction:column; min-height:0; }
html[data-tpl="1"] #tpl-1,
html[data-tpl="2"] #tpl-2,
html[data-tpl="3"] #tpl-3,
html[data-tpl="4"] #tpl-4 { display:flex; }
.btn {
  appearance:none; cursor:pointer; border:0; font-weight:800;
  padding:.7rem 1.15rem; border-radius:999px; color:#fff; background:var(--a1);
  box-shadow:0 8px 24px var(--glow); font:inherit;
}
.btn-ghost {
  background:transparent; color:var(--ink); border:1px solid var(--line); box-shadow:none;
}
body.sf-site {
  margin:0; min-height:100vh; font-family:var(--font-body); color:var(--ink);
  background: radial-gradient(900px 420px at 15% 0%, var(--glow), transparent 55%), var(--bg);
}
#tpl-1 .nav1, #tpl-2 .nav2 { top: 3.6rem; }

/* —— TPL 1 Glide : slider images —— */
    #tpl-1 .nav1 {
      display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
      padding:.85rem clamp(1rem,3vw,2.5rem);
      background:color-mix(in srgb, var(--panel) 94%, transparent);
      border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
    }
    #tpl-1 .brand1 {
      font-family:var(--font-display); font-weight:800; font-size:1.35rem;
      margin-right:auto; text-decoration:none;
      background:linear-gradient(120deg,var(--a2),var(--a1));
      -webkit-background-clip:text; background-clip:text; color:transparent;
    }
    #tpl-1 .nav1 button,
    #tpl-1 .nav1 a[data-page] {
      appearance:none; border:0; background:transparent; cursor:pointer;
      color:var(--mute); font-weight:700; padding:.45rem .75rem; border-radius:999px;
      text-decoration:none; font:inherit;
    }
    #tpl-1 .nav1 button.is-on, #tpl-1 .nav1 button:hover,
    #tpl-1 .nav1 a[data-page].is-on, #tpl-1 .nav1 a[data-page]:hover {
      color:var(--ink); background:color-mix(in srgb, var(--a1) 14%, transparent);
    }
    #tpl-1 .slider {
      /* FIGÉ 2026-07-28 — Glide hauteur = 45% largeur (~20:9). Ne pas retoucher sans OK. */
      position:relative; width:100%; height:0; padding-bottom:45%;
      overflow:hidden; background:#1a0a12;
    }
    #tpl-1 .slide {
      position:absolute; inset:0; opacity:0; pointer-events:none;
      transition:opacity .5s ease; z-index:0;
    }
    #tpl-1 .slide.on { opacity:1; pointer-events:auto; z-index:1; }
    #tpl-1 .slide img {
      width:100%; height:100%; object-fit:cover; object-position:center;
      position:absolute; inset:0;
    }
    #tpl-1 .slide .shade {
      position:absolute; inset:0; z-index:1;
      background:linear-gradient(90deg, rgba(20,8,16,.72) 0%, rgba(20,8,16,.35) 45%, transparent 75%);
    }
    #tpl-1 .slide .copy {
      position:relative; z-index:2; height:100%;
      display:flex; flex-direction:column; justify-content:flex-end;
      padding:clamp(2rem,5vw,4rem) clamp(1rem,3vw,2.5rem) 4.5rem;
      color:#fff; max-width:36rem;
    }
    #tpl-1 .slide h1 {
      margin:0; font-family:var(--font-display); font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.05;
    }
    #tpl-1 .slide p { margin:.75rem 0 0; color:rgba(255,255,255,.88); }
    #tpl-1 .slide-actions { margin-top:1.2rem; display:flex; gap:.55rem; flex-wrap:wrap; }
    #tpl-1 .slider-ctrl {
      position:absolute; z-index:6; bottom:1.15rem; left:50%; transform:translateX(-50%);
      display:flex; gap:.45rem; align-items:center;
    }
    #tpl-1 .slider-ctrl > button {
      appearance:none; cursor:pointer; border:0; width:2.6rem; height:2.6rem;
      border-radius:50%; background:rgba(255,255,255,.95); color:#2a0f1a; font-weight:800; font-size:1.2rem;
      box-shadow:0 8px 20px rgba(0,0,0,.2);
    }
    #tpl-1 .dots { display:flex; gap:.4rem; margin:0 .4rem; }
    #tpl-1 .dots button {
      width:.7rem; height:.7rem; border-radius:50%; padding:0; border:0; cursor:pointer;
      background:rgba(255,255,255,.45);
    }
    #tpl-1 .dots button.on { background:#fff; transform:scale(1.2); }
    #tpl-1 .sec { padding:clamp(1.75rem,4vw,3rem) clamp(1rem,3vw,2.5rem); }
    #tpl-1 .sec h2 { margin:0 0 1rem; font-family:var(--font-display); }
    #tpl-1 .cards {
      display:grid; gap:1rem;
      grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));
    }
    #tpl-1 .card {
      background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
      display:flex; flex-direction:column; height:100%;
    }
    #tpl-1 .card img {
      /* FIGÉ 2026-07-28 — cartes produit 3:2 (Glide + Orbit) */
      width:100%; aspect-ratio:3 / 2; height:auto; object-fit:cover; display:block;
    }
    #tpl-1 .card .pad {
      padding:1rem 1.1rem 1.15rem;
      display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
    }
    #tpl-1 .card .tag { font-size:.72rem; font-weight:800; color:var(--a1); text-transform:uppercase; }
    #tpl-1 .card h3 { margin:.3rem 0; font-family:var(--font-display); font-size:1.1rem; }
    #tpl-1 .card p {
      margin:0; color:var(--mute); font-size:.88rem;
      min-height:2.6em; /* réserve 2 lignes → boutons alignés entre cartes */
      flex:1 1 auto;
    }
    #tpl-1 .card .card-acts { margin-top:auto; padding-top:.55rem; }
    #tpl-1 .page-pane { display:none; }
    html[data-page="home"] #tpl-1 .page-home,
    html[data-page="products"] #tpl-1 .page-products,
    html[data-page="product"] #tpl-1 .page-product,
    html[data-page="about"] #tpl-1 .page-about,
    html[data-page="contact"] #tpl-1 .page-contact { display:block; }
    #tpl-1 .card { cursor:pointer; }
    #tpl-1 .card .card-acts { cursor:default; }
    .btn-back-prod {
      appearance:none; border:0; background:0; cursor:pointer;
      font-weight:750; color:var(--a1); font-size:.9rem; margin:0 0 1.15rem; padding:0;
      text-decoration:none; display:inline-block;
    }
    #tpl-1 .page-product.sec { max-width:78rem; margin:0 auto; width:100%; box-sizing:border-box; }
    .prod-detail { max-width:none; }
    .pd-layout {
      display:grid; gap:1.75rem;
      grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
      align-items:start;
    }
    @media (max-width:820px) {
      .pd-layout { grid-template-columns:1fr; }
    }
    .prod-detail .pd-media {
      border-radius:calc(var(--r) + 6px); overflow:hidden;
      border:1px solid var(--line); background:var(--panel);
      box-shadow:0 18px 40px color-mix(in srgb, var(--ink) 8%, transparent);
    }
    .prod-detail .pd-media img,
    .prod-detail .pd-ph {
      width:100%; aspect-ratio:3/2; object-fit:cover; display:block;
    }
    .prod-detail .pd-ph {
      background:linear-gradient(135deg,var(--a1),var(--a2));
    }
    .pd-panel {
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:calc(var(--r) + 6px);
      padding:1.35rem 1.4rem 1.5rem;
      box-shadow:0 14px 36px color-mix(in srgb, var(--ink) 6%, transparent);
    }
    .pd-kicker {
      margin:0 0 .45rem; font-size:.78rem; font-weight:800;
      letter-spacing:.06em; text-transform:uppercase; color:var(--a1);
    }
    .pd-badge {
      display:inline-block; margin:0 0 .55rem; padding:.2rem .55rem;
      border-radius:999px; font-size:.72rem; font-weight:800;
      background:color-mix(in srgb, var(--a1) 14%, transparent); color:var(--a1);
    }
    .pd-panel h1 {
      margin:0 0 .4rem; font-family:var(--font-display);
      font-size:clamp(1.55rem,3.4vw,2.15rem); line-height:1.12; letter-spacing:-.02em;
    }
    .pd-price {
      margin:0 0 .85rem; font-size:1.35rem; font-weight:800; color:var(--a1);
    }
    .pd-meta-row {
      display:flex; flex-wrap:wrap; gap:.55rem .9rem; align-items:center;
      margin:0 0 1rem; font-size:.88rem;
    }
    .pd-stock.is-ok { color:#0f7a45; font-weight:700; }
    .pd-stock.is-out { color:#b42318; font-weight:700; }
    .pd-ref { color:var(--mute); }
    .pd-desc {
      margin:0 0 1.15rem; color:var(--mute); line-height:1.55; font-size:.98rem;
    }
    .pd-buy {
      display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; margin:0 0 1.15rem;
    }
    .pd-qty {
      display:inline-flex; align-items:center; border:1px solid var(--line);
      border-radius:999px; overflow:hidden; background:color-mix(in srgb, var(--bg) 70%, var(--panel));
    }
    .pd-qty button {
      appearance:none; border:0; background:transparent; width:2.2rem; height:2.2rem;
      cursor:pointer; font-weight:800; color:var(--ink); font-size:1.05rem;
    }
    .pd-qty input {
      width:2.4rem; border:0; text-align:center; background:transparent;
      font:inherit; font-weight:700; color:var(--ink);
      -moz-appearance:textfield;
    }
    .pd-qty input::-webkit-outer-spin-button,
    .pd-qty input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
    .pd-add { min-width:10.5rem; }
    .pd-points {
      margin:0; padding:0 0 0 1.1rem; color:var(--mute); font-size:.86rem; line-height:1.55;
    }
    .pd-points li { margin:0 0 .25rem; }
    .pd-related {
      margin-top:2.25rem; padding-top:1.5rem; border-top:1px solid var(--line);
    }
    .pd-related h2 {
      margin:0 0 1rem; font-family:var(--font-display); font-size:1.35rem;
    }
    .pd-related .cards {
      display:grid; gap:1rem;
      grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));
    }

    /* —— TPL 2 Orbit : vrai carousel images —— */
    #tpl-2 { background:
      radial-gradient(ellipse 50% 40% at 10% 0%, color-mix(in srgb, var(--a1) 18%, transparent), transparent),
      var(--bg);
    }
    #tpl-2 .nav2 {
      display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
      padding:1rem clamp(1rem,3vw,2.5rem);
      border-bottom:2px solid var(--a1);
    }
    #tpl-2 .brand2 {
      font-family:var(--font-display); font-weight:800; font-size:1.45rem;
      letter-spacing:-.03em; margin-right:auto; color:var(--ink); text-decoration:none;
    }
    #tpl-2 .nav2 button,
    #tpl-2 .nav2 a[data-page] {
      appearance:none; border:0; background:0; cursor:pointer; font-weight:700;
      color:var(--mute); font-size:.9rem; padding:.35rem 0; border-bottom:2px solid transparent;
      text-decoration:none; font:inherit;
    }
    #tpl-2 .nav2 .is-on { color:var(--ink); border-bottom-color:var(--a2); }
    #tpl-2 .hero2 {
      padding:clamp(1.75rem,4vw,3rem) clamp(1rem,3vw,2.5rem) 1rem; max-width:40rem;
    }
    #tpl-2 .hero2 h1 {
      margin:0; font-family:var(--font-display); font-size:clamp(2rem,4.5vw,3.2rem);
      letter-spacing:-.03em; line-height:1.05;
    }
    #tpl-2 .hero2 p { margin:.75rem 0 0; color:var(--mute); }

    #tpl-2 .orbit-wrap {
      padding:0 0 2rem; position:relative;
    }
    #tpl-2 .orbit-lab {
      padding:0 clamp(1rem,3vw,2.5rem) .75rem;
      font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--a1);
    }
    #tpl-2 .orbit-shell {
      position:relative;
      margin:0 clamp(1rem,3vw,2.5rem);
    }
    #tpl-2 .orbit-viewport {
      overflow:hidden; width:100%; border-radius:var(--r);
    }
    #tpl-2 .orbit-track {
      display:flex; gap:1rem;
      transition:transform .4s cubic-bezier(.22,.8,.25,1);
      will-change:transform;
    }
    #tpl-2 .orbit-card {
      flex:0 0 calc((100% - 2rem) / 3);
      min-width:0;
      background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
      overflow:hidden; box-shadow:0 16px 40px color-mix(in srgb, var(--a1) 12%, transparent);
      display:flex; flex-direction:column;
    }
    @media (max-width:900px) {
      #tpl-2 .orbit-card { flex-basis:calc((100% - 1rem) / 2); }
    }
    @media (max-width:560px) {
      #tpl-2 .orbit-card { flex-basis:100%; }
    }
    #tpl-2 .orbit-card img {
      /* FIGÉ 2026-07-28 — Orbit carousel 3:2 */
      width:100%; aspect-ratio:3 / 2; height:auto; object-fit:cover; display:block; background:#eee;
    }
    #tpl-2 .orbit-card .body {
      padding:1rem 1.1rem 1.15rem;
      display:flex; flex-direction:column; flex:1 1 auto;
    }
    #tpl-2 .orbit-card h3 { margin:0 0 .3rem; font-family:var(--font-display); font-size:1.05rem; }
    #tpl-2 .orbit-card p { margin:0; color:var(--mute); font-size:.86rem; min-height:2.4em; flex:1 1 auto; }
    #tpl-2 .orbit-card .card-acts { margin-top:auto; padding-top:.55rem; }
    #tpl-2 .orbit-nav {
      position:absolute; top:50%; right:.35rem; left:.35rem; transform:translateY(-70%);
      display:flex; justify-content:space-between; pointer-events:none; z-index:5;
    }
    #tpl-2 .orbit-nav button {
      pointer-events:auto; appearance:none; cursor:pointer; border:0;
      width:2.85rem; height:2.85rem; border-radius:50%;
      background:var(--a1); color:#fff; font-weight:800; font-size:1.35rem; line-height:1;
      box-shadow:0 10px 28px var(--glow);
    }
    #tpl-2 .orbit-nav button:disabled {
      opacity:.35; cursor:default; box-shadow:none;
    }
    #tpl-2 .orbit-dots {
      display:flex; justify-content:center; gap:.4rem; margin-top:.85rem;
    }
    #tpl-2 .orbit-dots button {
      appearance:none; cursor:pointer; border:0; width:.65rem; height:.65rem;
      border-radius:50%; background:color-mix(in srgb, var(--a1) 30%, transparent); padding:0;
    }
    #tpl-2 .orbit-dots button.on { background:var(--a1); transform:scale(1.25); }

    #tpl-2 .sec2 { padding:1.5rem clamp(1rem,3vw,2.5rem) 2.5rem; }
    #tpl-2 .page-pane { display:none; }
    html[data-page="home"] #tpl-2 .page-home,
    html[data-page="products"] #tpl-2 .page-products,
    html[data-page="about"] #tpl-2 .page-about,
    html[data-page="contact"] #tpl-2 .page-contact { display:block; }
    #tpl-2 .grid2 {
      display:grid; gap:1rem;
      grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));
    }
    #tpl-2 .grid2 article {
      border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--panel); padding:0;
      display:flex; flex-direction:column; height:100%;
    }
    #tpl-2 .grid2 article img {
      /* FIGÉ 2026-07-28 — Orbit grille 3:2 */
      width:100%; aspect-ratio:3 / 2; height:auto; object-fit:cover; display:block;
    }
    #tpl-2 .grid2 article .pad {
      padding:1rem; display:flex; flex-direction:column; flex:1 1 auto;
    }
    #tpl-2 .grid2 article .pad p {
      min-height:2.4em; flex:1 1 auto; margin:0; color:var(--mute); font-size:.86rem;
    }
    #tpl-2 .grid2 article .card-acts { margin-top:auto; padding-top:.55rem; }

    /* —— TPL 3 Tiroir —— */
    #tpl-3 { position:relative; }
    #tpl-3 .stage3 {
      min-height:calc(100vh - 7rem);
      display:grid; place-items:center;
      padding:clamp(2rem,6vw,4rem) clamp(1rem,3vw,2.5rem);
      background:
        repeating-linear-gradient(-12deg, transparent, transparent 28px, color-mix(in srgb, var(--a1) 6%, transparent) 28px, color-mix(in srgb, var(--a1) 6%, transparent) 29px),
        var(--bg);
    }
    #tpl-3 .stage-card {
      width:min(36rem,100%); text-align:center;
      padding:2.5rem 1.75rem; background:var(--panel); border:1px solid var(--line);
      box-shadow:0 24px 60px color-mix(in srgb, var(--a1) 15%, transparent);
    }
    #tpl-3 .stage-card h1 {
      margin:0; font-family:var(--font-display); font-size:clamp(2.4rem,5vw,3.4rem); font-weight:700;
    }
    #tpl-3 .stage-card p { margin:1rem auto 0; color:var(--mute); max-width:28rem; }
    #tpl-3 .stage-card .hint {
      margin-top:1rem; font-size:.8rem; font-weight:700; color:var(--a1);
    }
    #tpl-3 .rail3 {
      position:fixed; left:0; right:0; bottom:0; z-index:30;
      display:flex; justify-content:center; gap:.45rem; flex-wrap:wrap;
      padding:.85rem 1rem calc(.85rem + env(safe-area-inset-bottom));
      background:color-mix(in srgb, var(--panel) 96%, transparent);
      border-top:1px solid var(--line); backdrop-filter:blur(12px);
    }
    #tpl-3 .rail3 button {
      appearance:none; cursor:pointer; border:1px solid var(--line);
      background:var(--bg); color:var(--ink); font-weight:750; font-size:.84rem;
      padding:.55rem 1rem; border-radius:var(--r);
      font-family:var(--font-display); letter-spacing:.04em; text-transform:uppercase;
    }
    #tpl-3 .rail3 button:hover, #tpl-3 .rail3 button.is-on {
      background:var(--a1); color:#fff; border-color:transparent;
    }
    #tpl-3 .drawer-root {
      position:fixed; inset:0; z-index:50; pointer-events:none; visibility:hidden;
    }
    #tpl-3 .drawer-root.on { pointer-events:auto; visibility:visible; }
    #tpl-3 .drawer-scrim {
      position:absolute; inset:0; background:rgba(20,8,16,.45); opacity:0; transition:opacity .3s;
    }
    #tpl-3 .drawer-root.on .drawer-scrim { opacity:1; }
    #tpl-3 .drawer {
      position:absolute; top:0; bottom:0; right:0; width:min(28rem,92vw);
      background:var(--panel); border-left:1px solid var(--line);
      transform:translateX(105%); transition:transform .38s cubic-bezier(.2,.8,.2,1);
      padding:1.35rem 1.4rem 2rem; overflow:auto;
      box-shadow:-20px 0 50px rgba(0,0,0,.18);
    }
    #tpl-3 .drawer-root.on .drawer { transform:translateX(0); }
    #tpl-3 .drawer-head { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.25rem; }
    #tpl-3 .drawer-head h2 {
      margin:0; flex:1; font-family:var(--font-display); font-size:1.75rem; font-weight:700;
    }
    #tpl-3 .drawer-x {
      appearance:none; cursor:pointer; border:1px solid var(--line);
      width:2.4rem; height:2.4rem; border-radius:var(--r); background:var(--bg);
      font-size:1.2rem; color:var(--ink); line-height:1;
    }
    #tpl-3 .drawer .prose { color:var(--mute); line-height:1.55; }
    #tpl-3 .drawer .plist { display:grid; gap:.75rem; margin-top:1rem; }
    #tpl-3 .drawer .plist article {
      display:grid; grid-template-columns:4.5rem 1fr; gap:.75rem; align-items:center;
      padding:.55rem; border:1px solid var(--line); background:var(--bg);
    }
    #tpl-3 .drawer .plist img { width:4.5rem; height:4.5rem; object-fit:cover; }
    #tpl-3 .field { margin-bottom:.85rem; text-align:left; }
    #tpl-3 .field label { display:block; font-size:.78rem; font-weight:750; color:var(--mute); margin:0 0 .3rem; }
    #tpl-3 .field .inp {
      width:100%; padding:.7rem .85rem; border:1px solid var(--line);
      background:var(--bg); color:var(--ink); border-radius:var(--r);
    }

    /* —— TPL 4 Lookbook —— */
    #tpl-4 { background:var(--bg); }
    #tpl-4 .look-shell {
      display:grid; min-height:calc(100vh - 2.5rem);
      grid-template-columns:minmax(0,1fr) minmax(4.5rem,5.5rem);
    }
    @media (max-width:720px) {
      #tpl-4 .look-shell { grid-template-columns:1fr; grid-template-rows:1fr auto; }
    }
    #tpl-4 .look-main {
      padding:clamp(1.5rem,4vw,3rem) clamp(1rem,3vw,2.5rem);
      display:flex; flex-direction:column; gap:1.25rem;
    }
    #tpl-4 .look-top {
      display:flex; flex-wrap:wrap; align-items:baseline; gap:.75rem 1.5rem;
    }
    #tpl-4 .brand4 {
      font-family:var(--font-display); font-size:clamp(1.8rem,3.5vw,2.6rem);
      font-style:italic; color:var(--ink); text-decoration:none;
    }
    #tpl-4 .look-top nav { display:flex; flex-wrap:wrap; gap:.35rem; margin-left:auto; }
    #tpl-4 .look-top nav button,
    #tpl-4 .look-top nav a[data-page] {
      appearance:none; border:0; background:0; cursor:pointer;
      font-weight:700; font-size:.82rem; color:var(--mute);
      text-transform:uppercase; letter-spacing:.08em; padding:.35rem .5rem;
      border-bottom:1px solid transparent; text-decoration:none; font:inherit;
    }
    #tpl-4 .look-top nav button.is-on,
    #tpl-4 .look-top nav a[data-page].is-on { color:var(--ink); border-bottom-color:var(--a1); }
    #tpl-4 .look-hero {
      flex:1; min-height:20rem; display:grid;
      grid-template-columns:1.2fr .8fr; gap:0; border:1px solid var(--line);
    }
    @media (max-width:800px) { #tpl-4 .look-hero { grid-template-columns:1fr; } }
    #tpl-4 .look-visual {
      min-height:0; position:relative; overflow:hidden; background:#1a0a12;
      height:0; padding-bottom:56.25%; /* 16:9 */
    }
    #tpl-4 .look-visual img {
      width:100%; height:100%; object-fit:cover; object-position:center;
      position:absolute; inset:0;
      transition:opacity .35s;
    }
    #tpl-4 .look-visual span {
      position:absolute; left:1.25rem; bottom:1.25rem; z-index:2;
      font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.4rem);
      font-style:italic; color:#fff;
      text-shadow:0 2px 12px rgba(0,0,0,.45);
    }
    #tpl-4 .look-copy {
      padding:clamp(1.25rem,3vw,2rem); background:var(--panel);
      display:flex; flex-direction:column; justify-content:center; gap:.75rem;
      border-left:1px solid var(--line);
    }
    @media (max-width:800px) { #tpl-4 .look-copy { border-left:0; border-top:1px solid var(--line); } }
    #tpl-4 .look-copy h1 {
      margin:0; font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.2rem);
      font-weight:600; line-height:1.15;
    }
    #tpl-4 .look-copy p { margin:0; color:var(--mute); line-height:1.5; }
    #tpl-4 .look-strip {
      border-left:1px solid var(--line); background:var(--panel);
      display:flex; flex-direction:column; gap:.35rem; padding:.5rem .4rem;
      align-items:stretch;
    }
    @media (max-width:720px) {
      #tpl-4 .look-strip {
        flex-direction:row; border-left:0; border-top:1px solid var(--line); overflow-x:auto;
      }
    }
    #tpl-4 .look-strip button {
      appearance:none; cursor:pointer; border:1px solid var(--line);
      background:var(--bg); color:var(--mute); font-size:.78rem; font-weight:800;
      letter-spacing:.04em; text-transform:uppercase;
      writing-mode:horizontal-tb; text-orientation:mixed;
      min-height:2.75rem; padding:.55rem .35rem;
    }
    @media (max-width:720px) {
      #tpl-4 .look-strip button {
        min-height:0; min-width:5rem; padding:.55rem .65rem;
      }
    }
    #tpl-4 .look-strip button.on {
      background:var(--a1); color:#fff; border-color:transparent;
    }
    #tpl-4 .page-pane { display:none; }
    html[data-page="home"] #tpl-4 .page-home,
    html[data-page="products"] #tpl-4 .page-products,
    html[data-page="about"] #tpl-4 .page-about,
    html[data-page="contact"] #tpl-4 .page-contact { display:block; }
    #tpl-4 .look-list { display:grid; gap:0; border:1px solid var(--line); }
    #tpl-4 .look-list article {
      display:grid; grid-template-columns:5rem 1fr auto; gap:1rem; align-items:center;
      padding:1rem 1.15rem; border-bottom:1px solid var(--line); background:var(--panel);
    }
    #tpl-4 .look-list article:last-child { border-bottom:0; }
    #tpl-4 .look-list img { width:5rem; height:3.5rem; object-fit:cover; }

    .foot {
      margin-top:auto; padding:1.5rem clamp(1rem,3vw,2.5rem) 1.2rem;
      border-top:1px solid var(--line);
      background:color-mix(in srgb, var(--panel) 92%, transparent);
    }
    html[data-tpl="3"] .foot { margin-bottom:4.5rem; }
    .foot-grid {
      display:grid; gap:1.25rem 2rem;
      grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.1fr);
    }
    @media (max-width:720px) { .foot-grid { grid-template-columns:1fr; } }
    .foot h3 {
      margin:0 0 .5rem; font-size:.72rem; font-weight:800; letter-spacing:.08em;
      text-transform:uppercase; color:var(--mute); font-family:var(--font-display);
    }
    .foot p, .foot a { margin:0 0 .35rem; font-size:.88rem; color:var(--ink); text-decoration:none; }
    .foot a:hover { color:var(--a1); }
    .foot-meta { color:var(--mute) !important; font-size:.84rem !important; }
    .foot-boost {
      display:flex; flex-direction:column; gap:.3rem; align-items:flex-start;
      padding:.9rem 1rem; border:1px solid var(--line); border-radius:12px;
      background:color-mix(in srgb, var(--a1) 8%, var(--panel));
    }
    html[data-tpl="4"] .foot-boost, html[data-tpl="3"] .foot-boost { border-radius:var(--r); }
    .foot-credit-label {
      margin:0; font-size:.7rem; font-weight:800; letter-spacing:.08em;
      text-transform:uppercase; color:var(--mute);
    }
    .foot-credit-host {
      font-family:var(--font-display); font-size:1.15rem; font-weight:800; color:var(--ink); text-decoration:none;
    }
    .foot-credit-host:hover { color:var(--a1); }
    .foot-credit-by { margin:0; font-size:.84rem; color:var(--mute); }
    .boost-link {
      font-family:var(--font-display); font-weight:800; color:var(--a1);
      border-bottom:1px solid color-mix(in srgb, var(--a1) 45%, transparent); text-decoration:none;
    }
    .foot-bottom {
      margin-top:1.15rem; padding-top:.85rem; border-top:1px solid var(--line);
      display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; justify-content:center;
      font-size:.78rem; color:var(--mute);
    }
    .foot-bottom a { color:var(--a1); font-weight:750; text-decoration:none; font-family:var(--font-display); }

    .toast {
      position:fixed; top:max(1rem, env(safe-area-inset-top, 0px)); right:max(1rem, env(safe-area-inset-right, 0px));
      left:auto; bottom:auto; transform:translateX(120%);
      z-index:var(--cd-z-toast, 200); padding:.65rem 1.1rem; border-radius:999px; font-size:.84rem; font-weight:750;
      background:var(--a2); color:#fff; transition:transform .25s; pointer-events:none;
      box-shadow:0 12px 32px rgba(0,0,0,.2); max-width:min(22rem, calc(100vw - 2rem));
    }
    .toast.on { transform:translateX(0); }

    /* —— Chrome site (navbar lib · recherche · auth) —— */
    .chrome {
      position:sticky; top:0; z-index:30;
      background:color-mix(in srgb, var(--panel) 94%, transparent);
      border-bottom:1px solid var(--line); backdrop-filter:blur(14px);
      padding:.65rem clamp(1rem,3vw,2.5rem) .75rem;
    }
    .chrome-row {
      display:flex; flex-wrap:wrap; align-items:center; gap:.55rem .75rem;
    }
    .chrome-brand {
      display:inline-flex; align-items:center; gap:.5rem;
      font-family:var(--font-display); font-weight:800; font-size:1.15rem;
      color:var(--ink); text-decoration:none; margin-right:.25rem;
    }
    .chrome-brand .logo {
      width:1.85rem; height:1.85rem; border-radius:10px; overflow:hidden;
      background:color-mix(in srgb, var(--a1) 18%, var(--panel));
      display:grid; place-items:center; font-size:.72rem; font-weight:800; color:var(--a2);
      flex:none;
    }
    .chrome-brand .logo img { width:100%; height:100%; object-fit:cover; display:block; }
    .chrome-brand .logo:empty { display:none; }
    .chrome-search {
      flex:1 1 14rem; position:relative; min-width:min(100%,12rem);
    }
    .chrome-search .box {
      display:flex; align-items:center; gap:.4rem;
      border:1px solid var(--line); border-radius:999px;
      background:color-mix(in srgb, var(--bg) 55%, var(--panel));
      padding:.2rem .2rem .2rem .9rem;
      box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
    }
    .chrome-search .box:focus-within {
      border-color:var(--a1); box-shadow:0 0 0 3px color-mix(in srgb, var(--a1) 22%, transparent);
    }
    .chrome-search input {
      flex:1; border:0; background:transparent; color:var(--ink); font:inherit;
      font-size:.9rem; padding:.45rem 0; min-width:0;
    }
    .chrome-search input::placeholder { color:var(--mute); }
    .lib-btn {
      appearance:none; cursor:pointer; border:0; font:inherit; font-weight:800;
      padding:.55rem 1rem; border-radius:999px; color:#fff;
      background:linear-gradient(120deg, var(--a1), var(--a2));
      box-shadow:0 8px 22px var(--glow);
      transition:transform .15s, filter .15s;
      white-space:nowrap;
    }
    .lib-btn:hover { transform:translateY(-1px); filter:brightness(1.06); }
    .lib-btn-ghost {
      appearance:none; cursor:pointer; font:inherit; font-weight:750;
      padding:.5rem .95rem; border-radius:999px; color:var(--ink);
      background:transparent; border:1px solid var(--line);
      transition:border-color .15s, background .15s;
      white-space:nowrap;
    }
    .lib-btn-ghost:hover {
      border-color:var(--a1); background:color-mix(in srgb, var(--a1) 10%, transparent);
    }
    .lib-icon {
      appearance:none; cursor:pointer; position:relative;
      width:2.45rem; height:2.45rem; border-radius:50%;
      border:1px solid var(--line); background:var(--panel); color:var(--ink);
      display:grid; place-items:center; font-size:1rem; padding:0;
      transition:border-color .15s, transform .15s, box-shadow .15s;
    }
    .lib-icon:hover {
      border-color:var(--a1); transform:translateY(-1px);
      box-shadow:0 8px 18px var(--glow);
    }
    .lib-icon .badge {
      position:absolute; top:-.2rem; right:-.2rem;
      min-width:1.1rem; height:1.1rem; padding:0 .25rem;
      border-radius:999px; background:var(--a2); color:#fff;
      font-size:.65rem; font-weight:800; display:grid; place-items:center;
      box-shadow:0 2px 8px var(--glow);
    }
    .lib-icon .badge:empty, .lib-icon .badge[data-n="0"] { display:none; }
    .chrome-auth { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-left:auto; }
    .chrome-auth[data-state="in"] .auth-out { display:none !important; }
    .chrome-auth[data-state="out"] .auth-in { display:none !important; }
    .avatar-wrap { position:relative; }
    .avatar-btn {
      appearance:none; cursor:pointer; border:1px solid var(--line);
      background:var(--panel); border-radius:999px; padding:.2rem .55rem .2rem .2rem;
      display:flex; align-items:center; gap:.4rem; font:inherit; color:var(--ink);
    }
    .avatar-btn .av {
      width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center;
      font-size:1rem; background:var(--a1); color:#fff; overflow:hidden; flex:none;
    }
    .avatar-btn .nm { font-size:.82rem; font-weight:750; max-width:7rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .avatar-menu {
      display:none; position:absolute; right:0; top:calc(100% + .4rem); z-index:40;
      min-width:13rem; padding:.4rem; border-radius:14px; border:1px solid var(--line);
      background:var(--panel); box-shadow:0 16px 40px rgba(0,0,0,.14);
    }
    .avatar-menu.on { display:grid; gap:.2rem; }
    .avatar-menu button {
      appearance:none; cursor:pointer; border:0; background:transparent; text-align:left;
      font:inherit; font-weight:700; font-size:.86rem; color:var(--ink);
      padding:.55rem .65rem; border-radius:10px;
    }
    .avatar-menu button:hover { background:color-mix(in srgb, var(--a1) 12%, transparent); }
    .search-drop {
      display:none; position:absolute; left:0; right:0; top:calc(100% + .4rem); z-index:35;
      border:1px solid var(--line); border-radius:16px; background:var(--panel);
      box-shadow:0 18px 44px rgba(0,0,0,.14); padding:.45rem; max-height:16rem; overflow:auto;
    }
    .search-drop.on { display:block; }
    .search-drop .lab {
      margin:.25rem .55rem .35rem; font-size:.68rem; font-weight:800;
      letter-spacing:.06em; text-transform:uppercase; color:var(--mute);
    }
    .search-drop button {
      appearance:none; cursor:pointer; border:0; background:transparent; width:100%;
      text-align:left; font:inherit; font-size:.88rem; font-weight:650; color:var(--ink);
      padding:.5rem .65rem; border-radius:10px;
    }
    .search-drop button:hover { background:color-mix(in srgb, var(--a1) 12%, transparent); }
    .search-drop button small { display:block; color:var(--mute); font-size:.75rem; font-weight:550; }

    #site-extra { display:none; padding:clamp(1.25rem,3vw,2.25rem) clamp(1rem,3vw,2.5rem); }
    html[data-page="login"] #site-extra,
    html[data-page="register"] #site-extra,
    html[data-page="cart"] #site-extra,
    html[data-page="wishlist"] #site-extra,
    html[data-page="account"] #site-extra,
    html[data-page="messages"] #site-extra { display:block; }
    html[data-page="login"] .tpl,
    html[data-page="register"] .tpl,
    html[data-page="cart"] .tpl,
    html[data-page="wishlist"] .tpl,
    html[data-page="account"] .tpl,
    html[data-page="messages"] .tpl { display:none !important; }
    .extra-pane { display:none; max-width:42rem; }
    html[data-page="cart"] #extra-cart,
    html[data-page="wishlist"] #extra-wish,
    html[data-page="account"] #extra-account { display:block; }
    .extra-pane h1 { margin:0 0 .75rem; font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2rem); }
    .extra-list { display:grid; gap:.65rem; }
    .extra-item {
      display:grid; grid-template-columns:4.5rem 1fr auto; gap:.75rem; align-items:center;
      padding:.65rem; border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
    }
    .extra-item img { width:4.5rem; height:4.5rem; object-fit:cover; border-radius:10px; }
    .extra-item .t { margin:0; font-weight:800; }
    .extra-item .m { margin:.2rem 0 0; font-size:.82rem; color:var(--mute); }
    .extra-empty { color:var(--mute); padding:1.5rem 0; }
    .card-acts { display:flex; gap:.35rem; margin-top:.55rem; flex-wrap:nowrap; align-items:center; }
    .card-acts .lib-btn, .card-acts .lib-btn-ghost { padding:.4rem .75rem; font-size:.78rem; }
    .av-grid { display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0; }
    .av-grid button {
      appearance:none; cursor:pointer; width:2.6rem; height:2.6rem; border-radius:50%;
      border:2px solid var(--line); background:var(--bg); font-size:1.15rem;
    }
    .av-grid button.is-on { border-color:var(--a1); box-shadow:0 0 0 3px color-mix(in srgb, var(--a1) 25%, transparent); }
    .acc-tabs {
      display:flex; flex-wrap:wrap; gap:.35rem; margin:0 0 1rem;
    }
    .acc-tabs button {
      appearance:none; cursor:pointer; font:inherit; font-weight:750; font-size:.82rem;
      padding:.45rem .85rem; border-radius:999px; border:1px solid var(--line);
      background:var(--panel); color:var(--ink);
    }
    .acc-tabs button.is-on {
      border-color:var(--a1); background:color-mix(in srgb, var(--a1) 14%, var(--panel));
      color:var(--a2);
    }
    .acc-pane { display:none; }
    .acc-pane.on { display:block; }
    .acc-form { display:grid; gap:.75rem; max-width:26rem; }
    .acc-form label { display:block; font-size:.78rem; font-weight:750; color:var(--mute); margin-bottom:.25rem; }
    .acc-form > label { display:flex; align-items:center; gap:.5rem; font-weight:650; color:var(--ink); margin:0; }
    .acc-form input[type="text"], .acc-form input[type="email"], .acc-form input[type="tel"],
    .acc-form input:not([type]), .acc-form select, .acc-form textarea {
      width:100%; border:1px solid var(--line); border-radius:12px; padding:.65rem .8rem;
      font:inherit; background:var(--panel); color:var(--ink);
    }
    .acc-form input:focus, .acc-form select:focus, .acc-form textarea:focus {
      outline:none; border-color:var(--a1); box-shadow:0 0 0 3px color-mix(in srgb, var(--a1) 22%, transparent);
    }
    .av-upload {
      display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
      padding:.85rem; border-radius:14px; border:1px dashed color-mix(in srgb, var(--a1) 40%, var(--line));
      background:color-mix(in srgb, var(--a1) 8%, var(--panel)); margin:.75rem 0;
    }
    .av-upload .big {
      width:4rem; height:4rem; border-radius:50%; overflow:hidden;
      display:grid; place-items:center; font-size:1.6rem;
      background:var(--panel); border:1px solid var(--line); flex:none;
    }
    .av-upload .big img { width:100%; height:100%; object-fit:cover; }
    .av-upload p { margin:0; font-size:.84rem; color:var(--mute); }
    .msg-thread {
      display:flex; flex-direction:column; gap:.55rem;
      max-height:20rem; overflow:auto; padding:.25rem 0 .85rem;
    }
    .msg-bubble {
      max-width:min(92%, 26rem); padding:.65rem .85rem; border-radius:14px;
      font-size:.88rem; line-height:1.45;
    }
    .msg-bubble.from-client {
      align-self:flex-end; background:color-mix(in srgb, var(--a1) 16%, var(--panel));
      border:1px solid color-mix(in srgb, var(--a1) 30%, var(--line));
    }
    .msg-bubble.from-seller {
      align-self:flex-start; background:var(--panel); border:1px solid var(--line);
    }
    .msg-bubble .who { display:block; font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--mute); margin-bottom:.2rem; }
    .msg-bubble .when { display:block; font-size:.72rem; color:var(--mute); margin-top:.35rem; }
    .msg-compose { display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-end; }
    .msg-compose textarea {
      flex:1 1 12rem; min-height:3rem; resize:vertical;
      border:1px solid var(--line); border-radius:12px; padding:.65rem .8rem;
      font:inherit; background:var(--panel); color:var(--ink);
    }
    html[data-page="messages"] #extra-messages { display:block; }

/* —— Landing produit FIGÉE (remplace la fiche faible) —— */
#landing-produit[hidden] { display:none !important; }
html[data-page="product"] #landing-produit {
  display:flex; flex-direction:column; min-height:100vh;
}
html[data-page="product"] .site > .chrome,
html[data-page="product"] .site > .tpl,
html[data-page="product"] .site > .foot,
html[data-page="product"] #site-extra {
  display:none !important;
}
html[data-page="product"] .site { display:none !important; }
.lp-back {
  position:relative; z-index:5; align-self:flex-start;
  margin:0 0 .75rem; font-weight:750; font-size:.88rem;
  color:var(--a1, #0d9488); text-decoration:none;
}
.hero-visual.has-photo {
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
.hero-visual.has-photo::after { display:none !important; }
.hero-thumb.has-photo {
  background-size:cover !important;
  background-position:center !important;
}
.hero-thumb.has-photo::after { display:none !important; }
.slider-layer.has-photo {
  background-size:cover !important;
  background-position:center !important;
}