/* ========================================================================== F.C Metal Arts : feuille de style de la vitrine -------------------------------------------------------------------------- Reprise de la maquette approuvée (documentation/maquette/maquette.html) : mêmes tokens, mêmes composants, mêmes points de rupture (860 / 760 / 560 / 520 / 480 px). Seule feuille de la vitrine depuis la tâche 6 : aucune page publique ne charge plus tailwind.css, réservé au back-office (tests/test_pages_vitrine.py). Toute classe employée par un gabarit public doit donc être définie ici. Thème : SOMBRE PAR DÉFAUT, quel que soit prefers-color-scheme (Global Constraint 3). Les tokens sombres sont sur :root ; le clair n'existe que sous :root[data-theme="light"], posé avant le rendu par le script en ligne du (localStorage « fcm-theme ») puis par le bouton soleil/lune. Composants (classes réutilisables par les pages des tâches 4 à 6) : - mise en page : .wrap, .sec (+ .sec-head, .link-arrow), .page-head, .two, .prose, .temper (bandeau « revenu de l'acier »), .eyebrow, .mono, .sr (masqué accessible), .empty - boutons : .btn + .btn-primary / .btn-ghost / .btn-blue / .btn-block, .icon-btn (+ .count[data-n]), .linkish, .switch (interrupteur) - visuels : .plate + img.ph (photo en object-fit: cover), .rivet - produits : .product-grid de .card (partials/fc_product_card.html), .price, .badge.unique / .made / .stock / .out, .fav (favori), .chips / .chip, .toolbar, .crumbs, .pdp*, .opt / .opt-vals, .qty, .buy-row, .reassure, .specs (fiche technique dl) + .specs-title, details.acc, .sticky-buy, .lightbox - panier / commande : .scrim + .drawer (.drawer-head/-body/-foot, piloté par fcm.js), .line, .totals, .ship-meter, .promo, .msg, .co*, .ship-opt, .summary, .stripe-note, .done-box, .redirect + .spin ; tâche 5 : .drawer-slot / .drawer-content (tiroir chargé par fcm.js), .cart-grid (page /panier/), .co-step / .co-sum-toggle (tunnel), .ship-blockers, .done-recap (confirmation) - formulaires : .field (+ label, .hint), .legend, .form-grid (+ .full), .check, .inline-form, .form-ok, .form-card, .drop ; tâche 6 (macros de partials/fc_form.html) : .form-stack, .form-alert, .form-done, .form-foot, .text-link, .pwd + .pwd-btn, .captcha, .hp (piège), .or-sep, .auth + .auth-art (connexion…), .narrow - retours : .toasts > .toast (fcm.js + messages flash), .ops-strip (bandeaux d'exploitation : pause boutique, impersonation, aperçu) - tâche 6 : .acct-grid / .panel / .orders / .order (mon compte), .page-blocks / .page-hero / .page-figure (pages dynamiques), .legal (pages légales), .err-code (erreurs), .rating / .stars-input (avis), .review-piece, .note-box, .back-link, .sec-title ========================================================================== */ /* ---------- tokens : sombre par défaut ---------- */ :root, :root[data-theme="dark"]{ color-scheme: dark; --bg:#0f1216; --bg-2:#141820; --surface:#181d24; --surface-2:#212833; --line:#2a323d; --line-2:#3a4450; --text:#eef1f4; --muted:#9ba6b3; --faint:#6f7a87; --accent:#f0561f; --accent-2:#ff7440; --accent-ink:#1a0802; --blue:#1e8fd8; --blue-2:#56b4f0; --blue-ink:#03101b; --art-line:#d3dbe3; --plate-a:#1e252e; --plate-b:#12161c; --ok:#62c98a; --warn:#f0c14b; --danger:#ff7a6b; --t1:#ff9a4a; --t2:#f0561f; --t3:#9c4f95; --t4:#1e8fd8; --t5:#56b4f0; --shadow:0 18px 40px rgba(0,0,0,.5); --overlay:rgba(4,6,9,.7); } :root{ --f-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif; --f-stencil:"Big Shoulders Stencil Display","Big Shoulders Display","Arial Narrow",Impact,sans-serif; --f-body:"Barlow","Segoe UI",system-ui,-apple-system,sans-serif; --f-cond:"Barlow Condensed","Arial Narrow","Segoe UI",sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace; --gut:clamp(16px,4vw,40px); --cut:10px; /* bandeau sous la barre d'état iOS (app ajoutée à l'écran d'accueil) : sombre dans les deux thèmes, le texte de la barre y est toujours blanc */ --status-bar:#0f1216; } /* ---------- tokens : clair (uniquement sur choix explicite) ---------- */ :root[data-theme="light"]{ color-scheme: light; --bg:#f3f5f7; --bg-2:#e9edf1; --surface:#ffffff; --surface-2:#eef1f4; --line:#d5dce3; --line-2:#b9c3cd; --text:#10141a; --muted:#505b67; --faint:#7d8793; --accent:#c9430f; --accent-2:#dd531a; --accent-ink:#ffffff; --blue:#0f72b0; --blue-2:#1683c8; --blue-ink:#ffffff; --art-line:#1f2730; --plate-a:#e6ebf0; --plate-b:#d2d9e1; --ok:#1d7a45; --warn:#8a6100; --danger:#b3372a; --t1:#ec8a36; --t2:#c9430f; --t3:#8c4386; --t4:#0f72b0; --t5:#1e8fd8; --shadow:0 18px 40px rgba(20,30,45,.14); --overlay:rgba(15,20,28,.45); } /* ---------- base ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%} @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}} body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit} img,svg{max-width:100%} h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:.98;letter-spacing:.005em;text-wrap:balance;margin:0;text-transform:uppercase} p{margin:0} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} [hidden]{display:none!important} .wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--gut)} .mono{font-family:var(--f-mono);font-size:.82em;letter-spacing:0} .eyebrow{font:600 .8rem/1.2 var(--f-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .eyebrow b{color:var(--accent);font-weight:700} .eyebrow i{font-style:normal;color:var(--blue-2)} .temper{height:3px;background:linear-gradient(90deg,var(--t1),var(--t2) 28%,var(--t3) 52%,var(--t4) 76%,var(--t5))} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip-link{position:absolute;left:8px;top:-60px;z-index:100;display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;background:var(--accent);color:var(--accent-ink);font:700 .9rem/1 var(--f-cond);letter-spacing:.1em;text-transform:uppercase;text-decoration:none} .skip-link:focus{top:8px} /* ---------- boutons : tôle chanfreinée ---------- */ .btn{--c:var(--cut);display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:.7em 1.35em;border:0;cursor:pointer;text-decoration:none; font:700 .95rem/1 var(--f-cond);letter-spacing:.1em;text-transform:uppercase; clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));transition:background .15s,color .15s,transform .15s} .btn:focus-visible{clip-path:none} .btn-primary{background:var(--accent);color:var(--accent-ink)} .btn-primary:hover{background:var(--accent-2)} .btn-ghost{background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)} .btn-ghost:hover{background:var(--surface);box-shadow:inset 0 0 0 1px var(--blue)} .btn-blue{background:var(--blue);color:var(--blue-ink)} .btn-blue:hover{background:var(--blue-2)} .btn-block{width:100%} .btn[disabled]{opacity:.45;cursor:not-allowed} .icon-btn{width:44px;height:44px;display:inline-grid;place-items:center;background:none;border:0;padding:0;cursor:pointer;position:relative;color:var(--text);border-radius:2px;text-decoration:none} .icon-btn:hover{background:var(--surface-2)} .icon-btn svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .count{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 4px;background:var(--accent);color:var(--accent-ink);font:700 11px/18px var(--f-mono);text-align:center;border-radius:9px} .count[data-n="0"]{display:none} /* bouton de thème : soleil en sombre (passer au clair), lune en clair */ .theme-btn .ico-moon{display:none} :root[data-theme="light"] .theme-btn .ico-sun{display:none} :root[data-theme="light"] .theme-btn .ico-moon{display:block} /* ---------- interrupteur ---------- */ .switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;color:var(--text);font-weight:600} .switch input{appearance:none;-webkit-appearance:none;width:40px;height:22px;border-radius:11px;background:var(--line-2);position:relative;cursor:pointer;transition:background .15s;margin:0;flex:none} .switch input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--text);transition:transform .15s} .switch input:checked{background:var(--accent)} .switch input:checked::after{transform:translateX(18px);background:var(--accent-ink)} /* ---------- bandeaux d'exploitation (pause, impersonation, aperçu) ---------- */ .ops-strip{background:var(--surface-2);border-bottom:1px solid var(--line-2);font:500 .9rem/1.4 var(--f-body);color:var(--text)} .ops-strip .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;padding-block:10px;text-align:center} .ops-strip strong{font-weight:700} .ops-strip small{display:block;color:var(--muted);font-size:.82rem} .ops-strip a{color:var(--accent);font-weight:700} .ops-strip.warn{background:color-mix(in srgb,var(--warn) 16%,var(--surface));border-color:color-mix(in srgb,var(--warn) 45%,transparent)} .ops-strip.info{background:color-mix(in srgb,var(--blue) 16%,var(--surface));border-color:color-mix(in srgb,var(--blue) 45%,transparent)} /* ---------- en-tête ---------- */ .announce{margin:0;background:var(--surface);font:600 .82rem/1.2 var(--f-cond);letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:8px var(--gut);color:var(--muted)} .announce b{color:var(--accent)} .site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} /* App ajoutée à l'écran d'accueil (iOS, barre d'état « black-translucent », templates/base.html) : la page commence sous la barre d'état, couverte d'un bandeau sombre. Sans effet ailleurs (encart nul). */ @media (display-mode: standalone){body{padding-top:env(safe-area-inset-top,0px)}body::before{content:"";position:fixed;z-index:100;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:var(--status-bar);pointer-events:none}} .head-row{display:flex;align-items:center;gap:12px;min-height:68px} .brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;margin-right:auto;min-width:0} .brand img{display:block;width:48px;height:48px;flex:none;border-radius:50%;object-fit:cover} .brand-name{font:900 1.6rem/.85 var(--f-stencil);letter-spacing:.03em;text-transform:uppercase} .brand-name small{display:block;font:600 .62rem/1.2 var(--f-cond);letter-spacing:.2em;color:var(--muted);margin-top:4px} .main-nav{display:flex;gap:4px} .main-nav a{font:600 .95rem/1 var(--f-cond);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:12px 14px;color:var(--muted);position:relative} .main-nav a:hover{color:var(--text)} .main-nav a[aria-current="page"]{color:var(--text)} .main-nav a[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:linear-gradient(90deg,var(--accent),var(--blue))} .head-tools{display:flex;gap:2px;flex:none} .burger{display:none} .burger .ico-close{display:none} .burger[aria-expanded="true"] .ico-open{display:none} .burger[aria-expanded="true"] .ico-close{display:block} @media (max-width:860px){ .main-nav{display:none} .burger{display:inline-grid} .brand-name{font-size:1.35rem} .brand img{width:40px;height:40px} .hide-sm{display:none} } @media (max-width:400px){ .head-row{gap:6px} .brand{gap:8px} .brand-name small{letter-spacing:.14em} } .mobile-nav{border-top:1px solid var(--line);padding-block:8px 16px} .mobile-nav a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font:700 1.5rem/1 var(--f-display);text-transform:uppercase;text-decoration:none} .mobile-nav a[aria-current="page"]{color:var(--accent)} .mobile-nav a.sub{font:600 .95rem/1 var(--f-cond);letter-spacing:.12em;color:var(--muted)} /* ---------- plaques (visuels produits) ---------- */ .plate{position:relative;display:block;overflow:hidden; background: radial-gradient(70% 60% at 78% 12%,color-mix(in srgb,var(--blue) 16%,transparent),transparent 65%), radial-gradient(80% 60% at 15% 95%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 65%), repeating-linear-gradient(90deg,color-mix(in srgb,var(--text) 3%,transparent) 0 1px,transparent 1px 4px), linear-gradient(165deg,var(--plate-a),var(--plate-b));} .ph{display:block;width:100%;height:100%;max-width:100%;object-fit:cover} .plate video{display:block;width:100%;height:100%;object-fit:cover;background:#000} .rivet{position:absolute;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--line-2),var(--plate-b));box-shadow:0 0 0 1px color-mix(in srgb,var(--text) 10%,transparent)} .rivet.tl{top:10px;left:10px}.rivet.tr{top:10px;right:10px}.rivet.bl{bottom:10px;left:10px}.rivet.br{bottom:10px;right:10px} .photo-tag{position:absolute;left:10px;bottom:10px;font:500 10px/1 var(--f-mono);color:var(--faint);background:color-mix(in srgb,var(--bg) 60%,transparent);padding:4px 6px} /* ---------- hero ---------- */ .hero{padding-block:clamp(28px,5vw,64px) clamp(32px,5vw,72px)} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center} .hero h1{font:900 clamp(3rem,8.4vw,7.2rem)/.86 var(--f-display);letter-spacing:-.005em} .hero .eyebrow + h1{margin-top:16px} .hero h1 .hot{color:var(--accent);display:block} .hero h1 .arc{color:var(--blue-2)} .hero-lead{margin-top:22px;max-width:34rem;font-size:1.13rem;color:var(--muted)} .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .hero-facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font:600 .9rem/1.2 var(--f-cond);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .hero-facts span b{display:block;font:800 1.7rem/1 var(--f-display);color:var(--text);letter-spacing:0} .hero-facts .fact-blue b{color:var(--blue-2)} .hero-art{position:relative;aspect-ratio:1/1.05;max-width:100%;clip-path:polygon(28px 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%,0 28px)} .hero-art .ph{position:absolute;inset:0} .spec-tag{position:absolute;right:16px;top:16px;background:color-mix(in srgb,var(--bg) 82%,transparent);border:1px solid var(--line-2);padding:10px 12px;font:400 11px/1.55 var(--f-mono);color:var(--muted);max-width:60%} .spec-tag b{display:block;color:var(--text);font:800 1.05rem/1.05 var(--f-display);text-transform:uppercase;margin-bottom:4px} .spec-tag a{display:inline-block;padding-block:8px;margin-block:-8px;color:var(--accent);text-decoration:underline;text-underline-offset:2px} @media (max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-art{aspect-ratio:1/0.9}} /* ---------- sections ---------- */ .sec{padding-block:clamp(40px,6vw,80px)} .sec + .sec{border-top:1px solid var(--line)} .sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px;margin-bottom:28px} .sec-head h2{font-size:clamp(2.1rem,4.6vw,3.4rem)} .eyebrow + h2,.page-head .eyebrow + h1{margin-top:8px} .sec-head p{max-width:34rem;color:var(--muted)} /* zone tactile de 44 px (Global Constraint 4) sans décaler la mise en page */ .link-arrow{display:inline-block;padding-block:15px;margin-block:-15px;font:700 .9rem/1 var(--f-cond);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);text-decoration:none;white-space:nowrap} .link-arrow:hover{text-decoration:underline;text-underline-offset:4px} /* ---------- cartes produits ---------- */ /* .product-grid = « .grid » de la maquette, renommée : `.grid` est aussi un utilitaire Tailwind, et ses 2 colonnes mobiles cassaient les grilles LPME. */ .product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:clamp(12px,2vw,22px)} @media (max-width:560px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}} .card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);transition:border-color .2s,transform .2s;min-width:0} .card:hover{border-color:var(--line-2);transform:translateY(-2px)} .card .plate{aspect-ratio:1/1} .card .plate .ph{transition:transform .45s ease} .card:hover .plate .ph{transform:scale(1.05)} .card-body{display:flex;flex-direction:column;gap:4px;padding:14px 14px 16px;flex:1} .card-cat{font:600 .72rem/1.2 var(--f-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .card h3{font:800 1.35rem/1 var(--f-display);overflow-wrap:anywhere} .card h3 a{text-decoration:none} .card h3 a::after{content:"";position:absolute;inset:0;z-index:1} .card-meta{color:var(--faint)} .card-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:10px} .price{font:800 1.3rem/1 var(--f-display);letter-spacing:.01em;white-space:nowrap} .price small{font:500 .75rem/1 var(--f-cond);letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin-right:4px} .price s{font:500 .85rem/1 var(--f-mono);color:var(--faint);margin-right:6px} .badge{display:inline-flex;align-items:center;gap:6px;font:700 .68rem/1 var(--f-cond);letter-spacing:.12em;text-transform:uppercase;padding:5px 7px;border:1px solid var(--line-2);color:var(--muted)} .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .badge.unique{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)} .badge.stock{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)} .badge.made{color:var(--blue-2);border-color:color-mix(in srgb,var(--blue) 50%,transparent)} .badge.out{color:var(--faint)} :root[data-theme="light"] .badge.made{color:var(--blue)} .fav{position:absolute;top:8px;right:8px;z-index:2;width:44px;height:44px;display:grid;place-items:center;border:0;padding:0;cursor:pointer;background:color-mix(in srgb,var(--bg) 70%,transparent);color:var(--text);text-decoration:none} .fav svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8} .fav:hover{color:var(--accent)} .fav[aria-pressed="true"]{color:var(--accent)} .fav[aria-pressed="true"] svg{fill:currentColor} .fav.htmx-request{opacity:.6} @media (max-width:560px){.card h3{font-size:1.1rem}.card-body{padding:10px 10px 12px}.price{font-size:1.1rem}.card-meta{display:none}} /* ---------- catégories ---------- */ .cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:12px} .cat{position:relative;display:flex;align-items:end;min-height:190px;text-decoration:none;border:1px solid var(--line);overflow:hidden} .cat .plate{position:absolute;inset:0} .cat .plate .ph{transition:transform .45s ease} .cat:hover .plate .ph{transform:scale(1.05)} .cat::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--bg) 92%,transparent) 8%,transparent 70%)} .cat span{position:relative;z-index:1;padding:14px;font:800 1.45rem/1 var(--f-display);text-transform:uppercase} .cat span small{display:block;font:500 .75rem/1.4 var(--f-mono);color:var(--muted);text-transform:none;margin-top:4px} .cat:hover{border-color:var(--accent)} /* ---------- procédé ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s;border:1px solid var(--line);list-style:none;margin:0;padding:0} .step{padding:24px 22px 26px;border-right:1px solid var(--line);position:relative;list-style:none} .step:last-child{border-right:0} .step::before{counter-increment:s;content:"0" counter(s);font:500 .8rem/1 var(--f-mono);color:var(--accent)} .step h3{font-size:1.7rem;margin:12px 0 8px} .step p{color:var(--muted);font-size:.97rem} .step .heat{position:absolute;left:0;right:0;top:0;height:3px} .step:nth-child(1) .heat{background:var(--t1)} .step:nth-child(2) .heat{background:var(--t2)} .step:nth-child(3) .heat{background:var(--t3)} .step:nth-child(4) .heat{background:var(--t4)} @media (max-width:860px){.steps{grid-template-columns:1fr 1fr}.step:nth-child(2){border-right:0}.step:nth-child(-n+2){border-bottom:1px solid var(--line)}} @media (max-width:520px){.steps{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}} /* ---------- bandeau sur-mesure ---------- */ .custom-band{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(20px,4vw,48px);align-items:center;background:var(--surface);border:1px solid var(--line);padding:clamp(22px,4vw,48px);position:relative;overflow:hidden} .custom-band h2{font-size:clamp(2.2rem,5vw,3.8rem)} .custom-band .eyebrow + h2{margin-top:10px} .custom-band p{color:var(--muted);margin-top:14px;max-width:36rem} .custom-band ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font:500 .85rem/1.4 var(--f-mono);color:var(--muted)} .custom-band li{display:flex;gap:10px;padding-bottom:10px;border-bottom:1px dashed var(--line-2)} .custom-band li b{color:var(--text);font-weight:500;min-width:7.5em} @media (max-width:760px){.custom-band{grid-template-columns:1fr}} /* ---------- avis ---------- */ .reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px} .review{margin:0;border-top:2px solid var(--line-2);padding-top:16px} .stars{color:var(--accent);letter-spacing:2px;font-size:.95rem} .stars .mono{color:var(--muted)} .review blockquote{margin:10px 0 12px;font-size:1.06rem} .review cite{font:600 .82rem/1.3 var(--f-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-style:normal} /* ---------- instagram ---------- */ .insta{display:grid;grid-template-columns:repeat(6,1fr);gap:8px} .insta > *{position:relative;aspect-ratio:1/1;display:block;text-decoration:none;border:1px solid var(--line)} .insta > * .plate{position:absolute;inset:0} .insta > * > span{position:absolute;inset:auto 0 0 0;padding:8px;font:500 11px/1.3 var(--f-mono);color:var(--text);background:linear-gradient(transparent,color-mix(in srgb,var(--bg) 85%,transparent));opacity:0;transition:opacity .2s} .insta a:hover span,.insta a:focus-visible span{opacity:1} @media (max-width:760px){.insta{grid-template-columns:repeat(3,1fr)}} /* ---------- newsletter ---------- */ .news{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center} .news h2{font-size:clamp(1.9rem,4vw,2.8rem)} .news p{color:var(--muted);margin-top:8px} .inline-form{display:flex;gap:8px;flex-wrap:wrap} .inline-form input{flex:1 1 220px;min-width:0} .form-ok{margin-top:10px;font-size:.95rem;color:var(--ok)} .news-hint{margin-top:10px} @media (max-width:760px){.news{grid-template-columns:1fr}} /* ---------- champs ---------- */ .field{display:flex;flex-direction:column;gap:6px} .field label,.legend{font:600 .8rem/1.2 var(--f-cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],input[type=password],select,textarea{ width:100%;min-height:48px;padding:12px 14px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:0;color:var(--text);font-size:16px} input::placeholder,textarea::placeholder{color:var(--faint);opacity:1} textarea{min-height:120px;resize:vertical} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .hint{font-size:.85rem;color:var(--faint)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-grid .full{grid-column:1/-1} @media (max-width:560px){.form-grid{grid-template-columns:1fr}} .check{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--muted)} .check input{width:20px;height:20px;margin-top:2px;accent-color:var(--accent);flex:none} /* ---------- boutique ---------- */ .page-head{padding-block:clamp(28px,4vw,48px) 20px} .page-head h1{font-size:clamp(2.6rem,7vw,5rem)} .page-head p{color:var(--muted);margin-top:10px;max-width:40rem} .toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding-block:14px;border-block:1px solid var(--line);margin-bottom:22px} .chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:2px;max-width:100%} .chips::-webkit-scrollbar{display:none} .chip{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line-2);background:none;cursor:pointer;font:600 .85rem/1 var(--f-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none} .chip:hover{color:var(--text)} .chip[aria-pressed="true"],.chip[aria-current="page"]{background:var(--text);color:var(--bg);border-color:var(--text)} .tool-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap} /* largeur fixe plafonnée (la maquette avait min(240px,100%) : pourcentage indéfini au calcul de la largeur de la barre, d'où un tri renvoyé seul sur une 3e ligne en bureau) */ .tool-right input[type=search]{width:240px;max-width:100%;min-height:44px;padding:8px 12px} .tool-right select{width:auto;min-height:44px;padding:8px 10px} .tool-right .btn{min-height:44px;padding:0 14px} /* interrupteur compact de la barre d'outils (« Pièces uniques ») */ .switch-sm{min-height:44px;font:600 .85rem/1 var(--f-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .sub-chips{margin:-8px 0 22px} .crumb-up{display:inline-block;padding-block:15px;margin-block:-15px;color:inherit;text-decoration:none} .crumb-up:hover{color:var(--accent)} .empty{padding:48px 0;color:var(--muted);text-align:center} .empty a{color:var(--accent)} /* ---------- fiche produit ---------- */ .crumbs{display:flex;flex-wrap:wrap;gap:6px;padding-block:18px;font:500 .78rem/1.3 var(--f-mono);color:var(--faint)} .crumbs a{text-decoration:none;color:var(--muted);display:inline-block;padding-block:14px;margin-block:-14px} .crumbs a:hover{color:var(--accent)} .pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,56px);align-items:start;padding-bottom:40px} .pdp > *,.co > *,.two > *,.hero-grid > *,.custom-band > *,.news > *{min-width:0} .specs dd{overflow-wrap:anywhere} .pdp-gallery{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px);display:grid;gap:10px} .pdp-main{aspect-ratio:4/5;border:1px solid var(--line)} .pdp-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px} .pdp-thumbs button{position:relative;aspect-ratio:1/1;padding:0;border:1px solid var(--line);cursor:pointer;background:none} .pdp-thumbs .vid{position:absolute;right:4px;bottom:4px;background:var(--accent);color:var(--accent-ink);font:700 10px/1 var(--f-cond);letter-spacing:.08em;padding:4px 5px} .pdp-thumbs button[aria-current="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)} .pdp-thumbs .plate{width:100%;height:100%} .zoom{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in} .pdp-title{font-size:clamp(2.6rem,6vw,4.4rem);margin-top:8px} .pdp-rating{display:flex;gap:8px;align-items:center;margin-top:10px;color:var(--muted);font-size:.95rem} .pdp-price{font:800 2.2rem/1 var(--f-display);margin-top:18px} .pdp-price small{font:500 .85rem/1 var(--f-body);color:var(--muted);margin-left:8px;text-transform:none} .pdp-price s{font:500 1rem/1 var(--f-mono);color:var(--faint);margin-right:10px} .pdp-rating a{color:inherit;display:inline-block;padding-block:12px;margin-block:-12px} .pdp-stock{margin-top:12px} .pdp-lead{margin-top:18px;color:var(--muted);font-size:1.06rem} /* description riche (Quill, nettoyée par bleach) */ .pdp-lead > * + *{margin-top:.7em} .pdp-lead ul,.pdp-lead ol{padding-left:1.3em;margin-bottom:0} .pdp-lead a{color:var(--accent)} .pdp-lead strong,.pdp-lead b{color:var(--text)} .opt{margin:22px 0 0;padding:0;border:0} .opt .legend{display:block;margin-bottom:10px} .opt-vals{display:flex;flex-wrap:wrap;gap:8px} .opt-vals label{position:relative;cursor:pointer} .opt-vals input{position:absolute;opacity:0;inset:0;cursor:pointer} .opt-vals span{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--line-2);font:600 .9rem/1 var(--f-cond);letter-spacing:.06em} .opt-vals span em{font-style:normal;font-family:var(--f-mono);font-size:.75rem;color:var(--muted)} .opt-vals input:checked + span{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--text)} .opt-vals input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px} .opt-vals input:disabled + span{opacity:.45;cursor:not-allowed;text-decoration:line-through} .opt-vals input:disabled + span em{text-decoration:none} .opt-vals .sw{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 25%,transparent)} /* personnalisation (texte gravé / soudé) */ .perso{margin-top:22px} .perso input{font-family:var(--f-mono);max-width:280px} .perso input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)} .buy-row{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap} .qty{display:inline-flex;border:1px solid var(--line-2);height:48px} .qty button{width:44px;border:0;background:none;cursor:pointer;font-size:1.2rem;color:var(--text)} .qty button:disabled{opacity:.3;cursor:not-allowed} .qty output{min-width:34px;display:grid;place-items:center;font-family:var(--f-mono)} /* quantité : vrai champ numérique (envoyé sans JS), habillé comme */ .qty input[type=number]{width:44px;min-height:0;height:100%;padding:0;border:0;background:none;text-align:center;font-family:var(--f-mono);font-size:1rem;-moz-appearance:textfield;appearance:textfield} .qty input[type=number]::-webkit-inner-spin-button,.qty input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} .qty input[type=number]:focus{box-shadow:inset 0 0 0 1px var(--accent)} .buy-row .btn-primary{flex:1 1 200px} .buy-row .fav{position:static;width:48px;height:48px;border:1px solid var(--line-2);background:none} .restock{display:grid;gap:8px;justify-items:start;margin-top:14px} .reassure{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;font-size:.95rem;color:var(--muted)} .reassure li{display:flex;gap:10px;align-items:flex-start} .reassure svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.8;margin-top:2px} .specs{margin:26px 0 0;border:1px solid var(--line);display:grid;grid-template-columns:auto 1fr} .specs dt,.specs dd{margin:0;padding:10px 14px;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:.82rem} .specs dt{color:var(--muted);border-right:1px solid var(--line);white-space:nowrap} .specs dt:nth-last-of-type(1),.specs dd:last-of-type{border-bottom:0} .specs-title{font:700 .82rem/1 var(--f-cond);letter-spacing:.14em;text-transform:uppercase;margin-top:26px;color:var(--text);display:flex;justify-content:space-between;gap:8px} .specs-title span{font-family:var(--f-mono);letter-spacing:0;text-transform:none;color:var(--faint);font-weight:400} details.acc{border-bottom:1px solid var(--line)} details.acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:16px 0;font:700 .95rem/1 var(--f-cond);letter-spacing:.12em;text-transform:uppercase} details.acc summary::-webkit-details-marker{display:none} details.acc summary::after{content:"+";font:400 1.4rem/1 var(--f-mono);color:var(--accent)} details.acc[open] summary::after{content:"–"} details.acc div{padding-bottom:16px;color:var(--muted)} details.acc a{color:var(--accent);display:inline-block;padding-block:13px;margin-block:-13px} .accs{margin-top:18px;border-top:1px solid var(--line)} .sticky-buy{display:none} .sticky-name{color:var(--muted);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52vw} .pdp-sec{border-top:1px solid var(--line)} .sec-note{color:var(--muted)} @media (max-width:860px){ .pdp{grid-template-columns:1fr} .pdp-gallery{position:static} .sticky-buy{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;gap:12px;align-items:center;justify-content:space-between;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line-2);box-shadow:0 -10px 30px rgba(0,0,0,.25)} .sticky-buy .price{font-size:1.4rem} .sticky-buy .btn{flex:0 1 auto} body.has-sticky .site-foot{padding-bottom:90px} } .lightbox{position:fixed;inset:0;z-index:80;background:var(--overlay);display:grid;place-items:center;padding:var(--gut)} .lightbox .plate .ph{max-height:88vh;width:auto;max-width:100%;object-fit:contain} .lightbox .plate{max-width:100%;border:1px solid var(--line-2);box-shadow:var(--shadow)} .lightbox .icon-btn{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:12px;background:var(--surface)} /* ---------- tiroir (panier) : ouvert/fermé par fcm.js ---------- */ .scrim{position:fixed;inset:0;background:var(--overlay);z-index:60} .drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);z-index:61;background:var(--bg);border-left:1px solid var(--line-2);display:flex;flex-direction:column;box-shadow:var(--shadow);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);animation:slide .22s ease} @keyframes slide{from{transform:translateX(30px);opacity:.4}} .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)} .drawer-head h2{font-size:1.9rem} .drawer-body{flex:1;overflow-y:auto;padding:6px 18px} .drawer-foot{border-top:1px solid var(--line);padding:16px 18px;display:grid;gap:12px;background:var(--surface)} body.drawer-open{overflow:hidden} .line{display:grid;grid-template-columns:76px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start} .line .plate{width:76px;height:76px;border:1px solid var(--line)} .line h3{font:800 1.12rem/1.05 var(--f-display)} .line .opts{font:400 .75rem/1.4 var(--f-mono);color:var(--muted);margin-top:4px} .line .line-price{font:800 1.1rem/1 var(--f-display);text-align:right} .line .ctrl{display:flex;gap:8px;align-items:center;margin-top:8px} .line .qty{height:44px} .line .qty button{width:44px} .linkish{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:0;cursor:pointer;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:.85rem} .linkish:hover{color:var(--accent)} .totals{display:grid;gap:6px;font-size:.95rem} .totals div{display:flex;justify-content:space-between;gap:10px} .totals .grand{font:800 1.5rem/1 var(--f-display);padding-top:8px;border-top:1px solid var(--line);margin-top:4px;text-transform:uppercase} .totals .muted{color:var(--muted)} .totals .good{color:var(--ok)} .ship-meter{font-size:.85rem;color:var(--muted)} .ship-meter .bar{height:4px;background:var(--line);margin-top:6px;overflow:hidden} .ship-meter .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--t1),var(--t2),var(--accent))} .promo{display:flex;gap:8px} .promo input{min-height:44px;padding:8px 12px;text-transform:uppercase;font-family:var(--f-mono);font-size:.9rem} .promo .btn{min-height:44px;padding:0 14px} .msg{font-size:.85rem} .msg.ok{color:var(--ok)}.msg.err{color:var(--danger)} /* ---------- commande ---------- */ .co{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(20px,4vw,48px);align-items:start;padding-bottom:60px} .co-steps{display:flex;gap:0;margin:0 0 24px;padding:0;border:1px solid var(--line)} .co-steps li{flex:1;list-style:none;padding:12px 10px;font:700 .8rem/1.2 var(--f-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);border-right:1px solid var(--line);text-align:center} .co-steps li:last-child{border-right:0} .co-steps li b{display:block;font:500 .72rem/1 var(--f-mono);margin-bottom:4px} .co-steps li[aria-current="step"]{color:var(--text);background:var(--surface);box-shadow:inset 0 -2px 0 var(--accent)} .co-steps li.done{color:var(--ok)} .co-panel h2{font-size:2rem;margin-bottom:18px} .co-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-top:24px} .ship-opts{display:grid;gap:10px} .ship-opt{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:16px;border:1px solid var(--line-2);cursor:pointer;background:var(--surface)} .ship-opt input{margin-top:3px;width:20px;height:20px;accent-color:var(--accent)} .ship-opt b{display:block;font:700 1rem/1.2 var(--f-cond);letter-spacing:.06em;text-transform:uppercase} .ship-opt span.d{color:var(--muted);font-size:.9rem} .ship-opt .p{font:800 1.2rem/1 var(--f-display)} .ship-opt:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} .ship-opt.off{opacity:.5;cursor:not-allowed} .summary{background:var(--surface);border:1px solid var(--line);padding:18px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px)} .summary h2{font-size:1.6rem;margin-bottom:6px} .summary .line{grid-template-columns:56px 1fr auto} .summary .line .plate{width:56px;height:56px} .stripe-note{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--muted);padding:12px;border:1px dashed var(--line-2);margin-top:16px} .stripe-note svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.8} .done-box{text-align:center;padding:clamp(30px,6vw,70px) 0;max-width:40rem;margin-inline:auto} .done-box h1{font-size:clamp(2.6rem,7vw,4.6rem)} .done-box p{color:var(--muted);margin-top:14px} .done-box .ref{display:inline-block;margin-top:18px;font-family:var(--f-mono);padding:8px 14px;border:1px solid var(--line-2)} .redirect{position:fixed;inset:0;z-index:90;background:var(--overlay);display:grid;place-items:center;padding:var(--gut)} .redirect div{background:var(--surface);border:1px solid var(--line-2);padding:28px;max-width:360px;text-align:center} .spin{width:36px;height:36px;margin:0 auto 14px;border:3px solid var(--line-2);border-top-color:var(--accent);border-radius:50%;animation:rot .8s linear infinite} @keyframes rot{to{transform:rotate(360deg)}} @media (max-width:860px){.co{grid-template-columns:1fr}.summary{position:static;order:-1}} /* ---------- panier et commande : compléments de la tâche 5 ---------- */ /* tiroir : contenu chargé par fcm.js (/panier/tiroir) sous l'en-tête fixe */ .drawer-slot,.drawer-content{flex:1;min-height:0;display:flex;flex-direction:column} .drawer-body .spin{margin:48px auto} .drawer-status{padding:12px 0 2px} /* lignes : textes longs (personnalisation) sans débordement */ .line > *{min-width:0} .line .opts{overflow-wrap:anywhere} .line .ctrl{flex-wrap:wrap} .line .ctrl-unique{margin:0} .line .qty{height:46px} .line .qty output{min-width:30px} .linkish{min-width:44px} .line .plate{flex:none} .good-text{color:var(--ok)} .ship-meter b{color:var(--text)} .ship-meter b.good-text{color:var(--ok)} /* 16 px : sous cette taille, Safari iOS zoome sur le champ */ .promo input{flex:1 1 auto;min-width:0;font-size:1rem} .promo-on{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px} .cart-hint{text-align:center} /* page /panier/ : lignes à gauche, récapitulatif à droite (en dessous en mobile) */ .cart-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(20px,4vw,48px);align-items:start;padding-bottom:60px} .cart-grid > *{min-width:0} .cart-lines{border-top:1px solid var(--line)} .cart-more{margin-top:22px} .cart-summary{display:grid;gap:12px} .empty-cta{margin-top:14px} @media (max-width:860px){.cart-grid{grid-template-columns:1fr}.cart-summary{position:static;order:0}} /* tunnel en 3 étapes (fcm-commande.js ; sans JS, étapes l'une sous l'autre) */ .co-head{padding-bottom:16px} .co-head h1{font-size:clamp(2.2rem,5vw,3.6rem)} .co-step{border:0;margin:0;padding:0;min-width:0} .co-step + .co-step{margin-top:40px} .co-js .co-step + .co-step{margin-top:0} .co-step h2:focus{outline:none} .co-intro{margin:-8px 0 18px} .co-intro .linkish{font-size:inherit} .co-addr{margin-top:22px} .co-notes{margin-top:18px} .field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)} .field .msg.err{margin:0} .ship-opts .msg.err{margin:0} .ship-opt > span{min-width:0} .ship-opt.off input{cursor:not-allowed} .ship-blockers{margin:0;padding:10px 14px;list-style:none;display:grid;gap:4px;border-left:3px solid var(--warn);background:var(--surface);font-size:.88rem;color:var(--muted);overflow-wrap:anywhere} .ship-blockers b{color:var(--text);font-weight:600} .co-recap{margin-top:0} .co-cgv{display:grid;margin-top:18px} .co-cgv .linkish{justify-self:start} .co .check{min-height:44px;align-items:center} .co-summary .totals{margin-top:12px} .btn.is-sending{opacity:.6;cursor:progress} .co-sum-toggle{display:none} .co-sum-toggle .chev{display:inline-block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;vertical-align:-3px;transition:transform .15s} .co-sum-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)} @media (max-width:860px){ .co-sum-toggle:not([hidden]){display:flex;width:100%;min-height:48px;align-items:center;justify-content:space-between;gap:12px;padding:0;border:0;background:none;cursor:pointer;color:var(--text);font:700 .9rem/1.2 var(--f-cond);letter-spacing:.1em;text-transform:uppercase;text-align:left} .co-sum-total{font:800 1.25rem/1 var(--f-display);white-space:nowrap} .co-summary.is-collapsed .co-sum-body{display:none} .co-summary:not(.is-collapsed) .co-sum-toggle + .co-sum-body{margin-top:8px} .co-summary .co-sum-toggle:not([hidden]) + .co-sum-body h2{display:none} } @media (max-width:420px){.co-steps li{padding:10px 4px;letter-spacing:.04em;font-size:.72rem}} /* confirmation (maquette, done) : récapitulatif sous le message */ .done-box h1{margin-top:10px} .done-lead{color:var(--text)!important;font-size:1.08rem} .done-cta{justify-content:center} .done-recap{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(16px,3vw,32px);align-items:start;max-width:56rem;margin:0 auto 60px} .done-recap > *{min-width:0} .done-recap .summary{position:static} .done-recap .line{grid-template-columns:56px 1fr auto} .done-recap .line .plate{width:56px;height:56px} .done-text{font-style:normal;color:var(--muted);margin-top:8px;overflow-wrap:anywhere} @media (max-width:760px){.done-recap{grid-template-columns:1fr}} /* ---------- atelier / sur-mesure ---------- */ .two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start} @media (max-width:860px){.two{grid-template-columns:1fr}} .prose{max-width:38rem;display:grid;gap:14px;color:var(--muted);font-size:1.06rem} .prose strong{color:var(--text)} .tech-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;margin-top:26px} .tech{border:1px solid var(--line);padding:16px;background:var(--surface)} .tech b{display:block;font:800 1.3rem/1 var(--f-display);text-transform:uppercase} .tech span{font:400 .8rem/1.5 var(--f-mono);color:var(--muted)} .form-card{background:var(--surface);border:1px solid var(--line);padding:clamp(18px,3vw,32px)} .drop{display:grid;place-items:center;gap:6px;min-height:110px;border:1px dashed var(--line-2);text-align:center;padding:16px;color:var(--muted);cursor:pointer;position:relative} .drop input{position:absolute;inset:0;opacity:0;cursor:pointer} .drop:focus-within{border-color:var(--accent)} /* ---------- pied de page ---------- */ .site-foot{margin-top:40px;background:var(--bg-2);border-top:1px solid var(--line)} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;padding-block:44px} .foot-grid h3{font:700 .85rem/1 var(--f-cond);letter-spacing:.14em;margin-bottom:14px;color:var(--muted)} .foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} .foot-grid a{text-decoration:none;color:var(--text);font-size:.95rem} .foot-grid a:hover{color:var(--accent)} .foot-grid p{color:var(--muted);font-size:.95rem;margin-top:12px;max-width:22rem} .foot-grid .brand{margin:0} .foot-grid p.mono a{font-size:inherit;color:var(--muted);overflow-wrap:anywhere} .foot-grid p.mono a:hover{color:var(--accent)} .foot-bottom{border-top:1px solid var(--line);padding-block:18px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font:400 .78rem/1.4 var(--f-mono);color:var(--faint)} @media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}} @media (max-width:860px),(pointer:coarse){ .foot-grid ul{gap:0} .foot-grid li a,.foot-grid p.mono a{display:inline-flex;align-items:center;min-height:44px;min-width:44px} } @media (max-width:480px){.foot-grid{grid-template-columns:1fr}} /* ---------- messages (toasts) : fcm.js + messages flash ---------- */ .toasts{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:95;display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 32px);pointer-events:none} .toast{pointer-events:auto;display:flex;align-items:center;gap:12px;background:var(--text);color:var(--bg);padding:12px 12px 12px 16px;font:600 .9rem/1.3 var(--f-cond);letter-spacing:.06em;box-shadow:var(--shadow);max-width:100%;border-left:4px solid var(--blue);animation:toast-in .2s ease} .toast.success{border-left-color:var(--ok)} .toast.error{border-left-color:var(--danger)} .toast.warning{border-left-color:var(--warn)} .toast p{margin:0;overflow-wrap:anywhere} .toast button{flex:none;width:44px;height:44px;margin:-10px -8px -10px 0;display:grid;place-items:center;border:0;padding:0;background:none;color:inherit;cursor:pointer;opacity:.7} .toast button:hover{opacity:1} .toast button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .toast.leaving{opacity:0;transition:opacity .2s} @keyframes toast-in{from{transform:translateY(8px);opacity:0}} @media (max-width:860px){body.has-sticky .toasts{bottom:calc(90px + env(safe-area-inset-bottom,0px))}} /* ---------- tâche 6 : formulaires, compte, pages de contenu, erreurs ---------- */ .page-body{padding-bottom:60px} .art-4-5{aspect-ratio:4/5;border:1px solid var(--line)} .art-4-3{aspect-ratio:4/3;border:1px solid var(--line)} .art-caption{margin-top:8px} /* formulaires : « (facultatif) », consentement, calcul anti-robot, piège à robots */ .field label small{font:500 .8rem/1.2 var(--f-body);letter-spacing:0;text-transform:none;color:var(--faint)} .form-card .check{min-height:44px} .check span{min-width:0} .check + .msg.err{margin-top:6px} .captcha input{max-width:10rem} .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;visibility:hidden} .form-alert{margin:0 0 16px;padding:12px 14px;border-left:3px solid var(--danger);background:var(--bg-2);font-size:.95rem;overflow-wrap:anywhere} .form-done h2{font-size:clamp(2rem,5vw,2.4rem)} .form-done p{color:var(--muted);margin-top:10px} .form-done strong{color:var(--text);overflow-wrap:anywhere} .form-done .co-actions{align-items:center} .form-foot{margin-top:18px;color:var(--muted);font-size:.95rem} .text-link{display:inline-block;padding-block:13px;margin-block:-13px;color:var(--accent);font-weight:600} .btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:24px} /* mot de passe + bouton « Afficher » (fcm.js) */ .pwd{position:relative} .pwd input{padding-right:52px} .pwd-btn{position:absolute;top:2px;right:2px} .pwd-btn[aria-pressed="true"]{color:var(--accent)} /* connexion Google : séparateur « ou » */ .or-sep{display:flex;align-items:center;gap:12px;margin:18px 0;font:600 .8rem/1 var(--f-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} .or-sep::before,.or-sep::after{content:"";flex:1;height:1px;background:var(--line)} .google-logo{width:20px;height:20px;flex:none} /* connexion, inscription, invitation : formulaire + photo (masquée en mobile) */ .auth{display:grid;grid-template-columns:minmax(0,32rem) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start;padding-bottom:60px} .auth-art{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px);aspect-ratio:4/5;max-height:70vh;border:1px solid var(--line)} @media (max-width:860px){.auth{grid-template-columns:1fr}.auth-art{display:none}} .narrow{max-width:40rem;padding-bottom:60px} /* mon compte */ .acct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px} .panel{display:flex;flex-direction:column;gap:8px;min-width:0;padding:18px;background:var(--surface);border:1px solid var(--line)} .panel h2{font-size:1.5rem} .panel p{color:var(--muted);overflow-wrap:anywhere} .panel .big{font:800 2.6rem/1 var(--f-display);color:var(--text)} .panel-links{list-style:none;margin:auto 0 0;padding:0} .panel-links a{display:flex;align-items:center;min-height:44px;color:var(--accent);text-decoration:none;font:700 .88rem/1.1 var(--f-cond);letter-spacing:.1em;text-transform:uppercase} .panel-links a:hover{text-decoration:underline;text-underline-offset:4px} .sec-title{font-size:clamp(1.9rem,4vw,2.6rem);margin:44px 0 16px} .orders{list-style:none;margin:0;padding:0;display:grid;gap:10px} .order{display:grid;gap:6px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);min-width:0} .order-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px} .order-ref{font:500 .9rem/1.3 var(--f-mono)} .order-ref small{display:block;color:var(--faint);font-size:.78rem} .order-items{color:var(--muted);font-size:.92rem;overflow-wrap:anywhere} .order .price{font-size:1.2rem} .back-link{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none;font:600 .85rem/1 var(--f-cond);letter-spacing:.12em;text-transform:uppercase} .back-link:hover{color:var(--accent)} /* pages dynamiques (L'atelier…) : texte riche nettoyé par bleach */ .prose h2{font-size:1.8rem;color:var(--text)} .prose h3{font-size:1.35rem;color:var(--text)} .prose ul,.prose ol{margin:0;padding-left:1.3em;display:grid;gap:6px} .prose a{color:var(--accent);overflow-wrap:anywhere} .prose img{height:auto} .page-blocks{display:grid;gap:36px;padding-bottom:60px} .page-blocks > *{min-width:0} .page-wide .prose{max-width:none} .page-figure{margin:0} .page-figure .plate{border:1px solid var(--line)} .page-figure .ph{height:auto} .page-figure figcaption{margin-top:8px} .page-hero{position:relative;display:grid;align-items:end;min-height:clamp(220px,40vw,380px);border:1px solid var(--line);overflow:hidden} .page-hero .ph{position:absolute;inset:0} .page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--bg) 90%,transparent) 10%,transparent 75%)} .page-hero > div{position:relative;z-index:1;padding:clamp(16px,3vw,32px)} .page-hero h2{font-size:clamp(2rem,5vw,3.4rem)} .page-hero p{color:var(--muted);margin-top:8px} /* pages légales */ .legal{max-width:46rem;padding-bottom:60px} .legal section{padding-block:20px;border-top:1px solid var(--line)} .legal h2{font-size:1.55rem;margin-bottom:10px} .legal p,.legal li{color:var(--muted)} .legal p + p,.legal ul + p,.legal p + ul{margin-top:10px} .legal strong{color:var(--text)} .legal ul{margin:0;padding-left:1.2em;display:grid;gap:6px} .legal a{color:var(--accent);overflow-wrap:anywhere} .legal .note{font-size:.9rem;color:var(--faint)} .updated{font:400 .8rem/1.4 var(--f-mono);color:var(--faint);margin-top:12px} /* pages d'erreur et de retour (avis) */ .err-code{display:block;font:900 clamp(6rem,26vw,12rem)/.85 var(--f-stencil);letter-spacing:.02em;color:var(--accent);background:linear-gradient(90deg,var(--t1),var(--t2) 35%,var(--t3) 65%,var(--t4));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .err-code + h1{margin-top:18px} .done-box .ref{overflow-wrap:anywhere} /* avis : note en étoiles (radios, sans JS) */ .rating{border:0;margin:0;padding:0;min-width:0} .rating .legend{display:block;margin-bottom:6px} .stars-input{display:flex;flex-direction:row-reverse;justify-content:flex-end;flex-wrap:wrap} .stars-input label{position:relative;display:grid;place-items:center;width:48px;height:48px;cursor:pointer;color:var(--line-2)} .stars-input input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer} .stars-input svg{width:34px;height:34px;fill:currentColor} .stars-input label:has(input:checked),.stars-input label:has(input:checked) ~ label, .stars-input label:hover,.stars-input label:hover ~ label{color:var(--accent)} .stars-input label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:-2px} .review-piece{display:flex;align-items:center;gap:12px;margin:18px 0;padding-block:14px;border-block:1px solid var(--line)} .review-piece .plate{width:64px;height:64px;flex:none;border:1px solid var(--line)} .review-piece b{display:block;font:800 1.2rem/1.1 var(--f-display);text-transform:uppercase;overflow-wrap:anywhere} .review-piece span{font:400 .8rem/1.4 var(--f-mono);color:var(--faint)} .review-piece > div{min-width:0} .note-box{margin-top:18px;padding:12px 14px;border:1px dashed var(--line-2);font-size:.9rem;color:var(--muted)} .note-box strong{color:var(--text)} .form-stack{display:grid;gap:16px} .form-stack > *{min-width:0} .contact-aside{margin-top:0;align-content:start} .page-head .back-link + h1{margin-top:4px} .two .plate + .prose{margin-top:16px} .form-stack .co-actions{margin-top:8px} .form-stack .note-box{margin-top:0} .rating legend{padding:0} .form-card > .review-piece:first-child{margin-top:0;padding-top:0;border-top:0} .ops-strip a{display:inline-flex;align-items:center;min-height:44px} input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed}