:root{
  --white:#FFFFFF;
  --paper:#F6F8FC;
  --paper-blue:#EEF3FF;
  --ink:#0A1128;
  --ink-soft:#525C74;
  --line:rgba(10,17,40,.11);
  --blue:#1748E0;
  --blue-dark:#0F34AD;
  --blue-light:#E4EBFD;
  --red:#E2766F;
  --red-dark:#C15850;
  --red-light:#FBEBE9;
  --shadow-sm:0 2px 10px rgba(10,17,40,.06);
  --shadow-md:0 16px 40px rgba(10,17,40,.10);
  --shadow-lg:0 24px 60px rgba(10,17,40,.16);
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:26px;
  --display:'Fraunces', serif;
  --body:'Inter', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--body); background:var(--paper); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased;}
a{color:inherit;} button{font-family:inherit; cursor:pointer;}
img{max-width:100%; display:block;}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px;}
.wrap{max-width:1200px; margin:0 auto; padding:0 28px;}
section{padding:100px 0;}
@media (max-width:680px){ section{padding:64px 0;} .wrap{padding:0 20px;} }
h1,h2,h3{font-family:var(--display); font-weight:600; letter-spacing:-.01em; color:var(--ink);}
/* h1 partage la taille de h2 par défaut : un h1 hors .hero (catalogue, panier, 404...) garde le
   même gabarit visuel qu'un h2 classique. .hero h1, plus spécifique, prend le dessus sur l'accueil. */
h1,h2{font-size:clamp(30px,3.6vw,44px); margin-bottom:16px;}
.lede{color:var(--ink-soft); max-width:560px; font-size:17px;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* KICKER (remplace l'ancien "eyebrow" mono/majuscule des templates vendus) */
.kicker{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; padding:7px 16px 7px 12px; border-radius:999px; background:var(--blue-light); color:var(--blue-dark); margin-bottom:18px;}
.kicker.red{background:var(--red-light); color:var(--red-dark);}
.kicker .dot{width:7px; height:7px; border-radius:50%; background:currentColor;}
.center .kicker{margin-left:auto; margin-right:auto;}

/* HEADER */
header{position:sticky; top:0; z-index:50; background:rgba(246,248,252,.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:24px;}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:21px; text-decoration:none;}
.logo-img{height:34px; width:auto; display:block;}
.logo-mark-img{height:26px; width:auto; display:block;}
nav.links{display:flex; gap:8px; font-size:14.5px; font-weight:500;}
nav.links a{text-decoration:none; color:var(--ink-soft); transition:.15s; padding:9px 14px; border-radius:999px;}
nav.links a:hover{color:var(--ink); background:var(--paper-blue);}
nav.links a.active{color:var(--blue-dark); background:var(--blue-light); font-weight:600;}
.nav-actions{display:flex; align-items:center; gap:16px;}
.cart-link{position:relative; display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--white); font-weight:600; font-size:14px; background:var(--ink); padding:10px 18px; border-radius:999px; transition:.15s;}
.cart-link:hover{background:var(--blue-dark);}
.cart-link svg{width:18px; height:18px;}
.cart-count{background:var(--red); color:var(--white); font-size:11px; font-weight:700; min-width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 4px;}
.menu-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:30px; height:26px; background:transparent; border:none; padding:0;}
.menu-toggle span{display:block; width:100%; height:2px; background:var(--ink); transition:transform .2s, opacity .2s;}
.menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.active span:nth-child(2){opacity:0;}
.menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:860px){
  nav.links{position:absolute; top:100%; left:0; right:0; display:flex; flex-direction:column; gap:4px; background:var(--white); border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 20px;}
  nav.links.open{max-height:280px; padding:10px 20px;}
  nav.links a{padding:12px 14px;}
  .menu-toggle{display:flex;}
}

/* BUTTONS — pilules pleines, à l'opposé des boutons carrés bordés des templates vendus */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 30px; font-size:14.5px; font-weight:600; text-decoration:none; border:none; border-radius:999px; transition:.15s; background:var(--paper-blue); color:var(--ink);}
.btn-primary{background:var(--blue); color:var(--white); box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--blue-dark); box-shadow:var(--shadow-md); transform:translateY(-1px);}
.btn-outline{background:var(--white); color:var(--ink); border:1.5px solid var(--line);}
.btn-outline:hover{border-color:var(--blue); color:var(--blue-dark);}
.btn-accent{background:var(--red); color:var(--white); box-shadow:var(--shadow-sm);}
.btn-accent:hover{background:var(--red-dark); box-shadow:var(--shadow-md); transform:translateY(-1px);}
.btn-block{width:100%;}
.btn-sm{padding:10px 18px; font-size:12.5px;}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none !important;}

/* HERO */
.hero{position:relative; padding:90px 0 110px; overflow:hidden;}
.hero::before{
  content:''; position:absolute; inset:-20% -10% auto -10%; height:140%;
  background:
    radial-gradient(ellipse 560px 420px at 12% 15%, rgba(23,72,224,.14), transparent 60%),
    radial-gradient(ellipse 480px 380px at 92% 8%, rgba(226,118,111,.14), transparent 60%);
  pointer-events:none;
}
.hero-grid{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center;}
@media (max-width:960px){ .hero-grid{grid-template-columns:1fr; gap:50px;} }
.hero h1{font-size:clamp(38px,5.2vw,64px); line-height:1.05; margin-bottom:22px; font-weight:600;}
.hero h1 em{font-style:italic; color:var(--blue); position:relative;}
.hero h1 .underline{position:relative; white-space:nowrap;}
.hero h1 .underline::after{content:''; position:absolute; left:0; right:0; bottom:6px; height:.32em; background:var(--red-light); z-index:-1; border-radius:4px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px;}
.hero-stats{display:flex; gap:44px; margin-top:56px; flex-wrap:wrap;}
.hstat b{display:block; font-family:var(--display); font-size:32px; font-weight:600; color:var(--ink);}
.hstat span{font-size:13px; color:var(--ink-soft);}

/* HERO MOCKUP STACK — remplace la grille pointillée "blueprint" des templates vendus */
.mockup-stack{position:relative; height:420px;}
.mock-card{position:absolute; width:78%; border-radius:var(--radius-md); background:var(--white); box-shadow:var(--shadow-lg); overflow:hidden; border:1px solid var(--line);}
.mock-card .mc-bar{display:flex; gap:6px; padding:12px 14px; background:var(--paper);}
.mock-card .mc-bar span{width:8px; height:8px; border-radius:50%; background:var(--line);}
.mock-card .mc-body{padding:18px;}
.mock-card .mc-line{height:10px; border-radius:5px; background:var(--paper-blue); margin-bottom:10px;}
.mock-card .mc-line.w60{width:60%;} .mock-card .mc-line.w80{width:80%;} .mock-card .mc-line.w40{width:40%;}
.mock-card .mc-block{height:70px; border-radius:10px; margin-top:14px;}
.mock-1{top:0; left:0; transform:rotate(-6deg); z-index:1;}
.mock-1 .mc-block{background:linear-gradient(135deg, var(--blue), var(--blue-dark));}
.mock-2{top:70px; right:0; left:auto; transform:rotate(4deg); z-index:2;}
.mock-2 .mc-block{background:linear-gradient(135deg, var(--red), var(--red-dark));}
.mock-3{top:190px; left:12%; transform:rotate(-2deg); z-index:3;}
.mock-3 .mc-block{background:linear-gradient(120deg, var(--blue) 0%, var(--red) 100%);}
@media (max-width:960px){ .mockup-stack{height:340px;} .mock-card{width:72%;} }
@media (max-width:520px){ .mockup-stack{display:none;} }

/* BENTO CATEGORIES */
.bento-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px;}
@media (max-width:820px){ .bento-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .bento-grid{grid-template-columns:1fr;} }
.bento-card{background:var(--white); border-radius:var(--radius-md); padding:30px 26px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm); transition:.2s; border:1px solid var(--line);}
.bento-card:hover{box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:transparent;}
.bento-icon{width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.bento-icon svg{width:22px; height:22px;}
.bento-card:nth-child(6n+1) .bento-icon, .bento-card:nth-child(6n+4) .bento-icon{background:var(--blue-light); color:var(--blue-dark);}
.bento-card:nth-child(6n+2) .bento-icon, .bento-card:nth-child(6n+5) .bento-icon{background:var(--red-light); color:var(--red-dark);}
.bento-card:nth-child(6n+3) .bento-icon, .bento-card:nth-child(6n+6) .bento-icon{background:var(--ink); color:var(--white);}
.bento-card h3{font-size:19px; font-weight:600; margin-bottom:6px;}
.bento-card p{font-size:14px; color:var(--ink-soft);}
.bento-card .count{font-size:12.5px; color:var(--blue-dark); font-weight:600; margin-top:14px; display:inline-flex; align-items:center; gap:6px;}

/* FILTERS (page catalogue en barre horizontale simple, conservés pour compat) */
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px;}
.chip{border:1.5px solid var(--line); background:var(--white); padding:9px 18px; font-size:13px; font-weight:600; border-radius:999px; cursor:pointer; transition:.15s; color:var(--ink-soft);}
.chip:hover{border-color:var(--blue); color:var(--blue-dark);}
.chip.active{background:var(--ink); border-color:var(--ink); color:var(--white);}

/* CATALOGUE LAYOUT — barre latérale, à l'opposé des pages vitrine mono-colonne des templates vendus */
.cat-layout{display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:start;}
@media (max-width:860px){ .cat-layout{grid-template-columns:1fr;} }
.filter-panel{background:var(--white); border-radius:var(--radius-md); border:1px solid var(--line); padding:26px; position:sticky; top:100px;}
.filter-panel h4{font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:22px 0 12px;}
.filter-panel h4:first-child{margin-top:0;}
.filter-list{list-style:none; display:flex; flex-direction:column; gap:2px;}
.filter-list button{display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; background:none; border:none; padding:10px 12px; border-radius:10px; font-size:14px; color:var(--ink-soft); font-weight:500;}
.filter-list button:hover{background:var(--paper);}
.filter-list button.active{background:var(--blue-light); color:var(--blue-dark); font-weight:600;}
.filter-list button .n{font-size:12px; color:var(--ink-soft); opacity:.8;}
.filter-list button.active .n{color:var(--blue-dark);}

/* PRODUCT GRID / CARDS */
.tpl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:900px){ .tpl-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .tpl-grid{grid-template-columns:1fr;} }
.tpl-card{background:var(--white); border-radius:var(--radius-md); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:.2s; border:1px solid var(--line);}
.tpl-card:hover{box-shadow:var(--shadow-md); transform:translateY(-4px);}
.tpl-thumb{aspect-ratio:16/10; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.tpl-thumb svg{width:34px; height:34px; color:rgba(255,255,255,.9); opacity:.9;}
/* Photo réelle du site (capture d'écran, voir img/thumbs/) : couvre tout le cadre, ancrée en
   haut pour toujours montrer l'en-tête + le hero plutôt qu'un recadrage arbitraire. */
.tpl-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;}
/* Dégradé + icône : n'apparaît que si l'image échoue à charger (voir data-img-fallback dans main.js). */
.tpl-thumb-fallback{display:none;}
.tpl-thumb.img-error .tpl-thumb-fallback{display:flex; align-items:center; justify-content:center; position:absolute; inset:0;}
.thumb-btp .tpl-thumb-fallback{background:linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);}
.thumb-restauration .tpl-thumb-fallback{background:linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);}
.thumb-entreprise .tpl-thumb-fallback{background:linear-gradient(135deg, var(--ink) 0%, var(--blue-dark) 100%);}
.thumb-beaute .tpl-thumb-fallback{background:linear-gradient(120deg, var(--red) 0%, var(--blue) 100%);}
.thumb-immobilier .tpl-thumb-fallback{background:linear-gradient(135deg, var(--blue-dark) 0%, var(--ink) 100%);}
.thumb-hotels .tpl-thumb-fallback{background:linear-gradient(135deg, var(--red-dark) 0%, var(--ink) 100%);}
.tpl-thumb .cat-tag{position:absolute; top:12px; left:12px; z-index:1; font-size:11px; font-weight:600; background:rgba(255,255,255,.92); color:var(--ink); padding:6px 12px; border-radius:999px; box-shadow:0 2px 8px rgba(10,17,40,.18);}
.tpl-thumb .tier-badge{position:absolute; top:12px; right:12px; z-index:1; box-shadow:0 2px 8px rgba(10,17,40,.18);}
.tpl-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1;}
.tpl-body h3{font-size:18px; font-weight:600;}
.tpl-body .tagline{font-size:12.5px; color:var(--ink-soft); font-weight:500;}
.tpl-body p.desc{font-size:13.5px; color:var(--ink-soft); flex:1; line-height:1.55;}
.tpl-foot{display:flex; align-items:center; justify-content:space-between; margin-top:6px;}
.tpl-price{font-family:var(--display); font-weight:600; font-size:19px;}
.tpl-actions .btn{padding:10px 16px; font-size:12.5px;}

.tier-badge{display:inline-flex; align-items:center; font-size:11px; border-radius:999px; padding:6px 12px; font-weight:700;}
.tier-essentiel{background:rgba(255,255,255,.92); color:var(--blue-dark);}
.tier-standard{background:rgba(255,255,255,.92); color:var(--ink);}
.tier-premium{background:var(--red); color:var(--white);}

.empty-state{text-align:center; padding:60px 20px; color:var(--ink-soft);}

/* PRODUCT DETAIL */
.pd-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:start;}
@media (max-width:900px){ .pd-grid{grid-template-columns:1fr; gap:36px;} }
.pd-preview{background:var(--white); border-radius:var(--radius-md); border:1px solid var(--line); aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; box-shadow:var(--shadow-sm);}
.pd-preview iframe{width:100%; height:100%; border:none;}
.pd-preview .pd-frame-label{position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:var(--paper); border-bottom:1px solid var(--line); font-size:12.5px; font-weight:500;}
.pd-preview .pd-frame-label a{color:var(--blue-dark); text-decoration:none; font-weight:600;}
.pd-frame-expand{background:none; border:none; color:var(--blue-dark); font-weight:600; font-size:12.5px; cursor:pointer; padding:0; font-family:inherit;}
.pd-frame-expand:hover{text-decoration:underline;}
.pd-side{position:sticky; top:100px;}
.pd-side .cat-tag{font-size:12.5px; font-weight:600; color:var(--blue-dark);}
.pd-side h1{font-size:clamp(28px,4vw,40px); margin:10px 0 6px; font-weight:600;}
.pd-side .tagline{font-size:13px; color:var(--ink-soft); margin-bottom:20px; display:block;}
.pd-price-row{display:flex; align-items:center; gap:14px; margin:22px 0;}
.pd-price{font-family:var(--display); font-size:34px; font-weight:600;}
.pd-includes{list-style:none; display:flex; flex-direction:column; gap:12px; margin:24px 0; padding:22px; background:var(--white); border-radius:var(--radius-md); border:1px solid var(--line);}
.pd-includes li{display:flex; gap:10px; align-items:flex-start; font-size:13.5px;}
.pd-includes svg{width:16px; height:16px; color:var(--blue); flex-shrink:0; margin-top:2px;}
.pd-actions{display:flex; flex-direction:column; gap:10px;}
.pd-back{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; text-decoration:none; color:var(--ink-soft); margin-bottom:24px;}
.pd-back:hover{color:var(--blue-dark);}
.related h2{font-size:24px;}

/* CART */
.table-scroll{overflow-x:auto; border-radius:var(--radius-md); box-shadow:var(--shadow-sm);}
.cart-table{width:100%; min-width:520px; border-collapse:separate; border-spacing:0; background:var(--white); border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line);}
.cart-table th{text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); padding:16px 18px; border-bottom:1px solid var(--line); background:var(--paper);}
.cart-table td{padding:16px 18px; border-bottom:1px solid var(--line); font-size:14.5px;}
.cart-table tr:last-child td{border-bottom:none;}
.cart-item-name{font-weight:600;}
.cart-item-meta{font-size:12px; color:var(--ink-soft); margin-top:3px;}
.cart-remove{background:none; border:none; color:var(--red); font-size:12.5px; font-weight:600; text-decoration:underline; padding:0;}
.cart-summary{background:var(--white); border-radius:var(--radius-md); border:1px solid var(--line); box-shadow:var(--shadow-sm); padding:26px; margin-top:24px; margin-left:auto; max-width:340px;}
.cart-summary-row{display:flex; justify-content:space-between; font-size:14px; margin-bottom:10px; color:var(--ink-soft);}
.cart-summary-row.total{font-family:var(--display); font-size:21px; color:var(--ink); font-weight:600; border-top:1px solid var(--line); padding-top:14px; margin-top:14px;}

/* CHECKOUT */
.checkout-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:50px; align-items:start; margin-top:30px;}
@media (max-width:900px){ .checkout-grid{grid-template-columns:1fr; gap:32px;} }
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:7px;}
.field input, .field select, .field textarea{width:100%; border:1.5px solid var(--line); background:var(--white); padding:13px 15px; border-radius:12px; font-family:var(--body); font-size:14.5px; color:var(--ink);}
.field input:focus, .field textarea:focus{border-color:var(--blue);}
.field textarea{resize:vertical; min-height:90px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:520px){ .field-row{grid-template-columns:1fr;} }

.pay-methods{display:flex; flex-direction:column; gap:12px; margin:20px 0 26px;}
.pay-method{border:1.5px solid var(--line); border-radius:14px; background:var(--white); padding:16px 18px; display:flex; align-items:center; gap:14px; cursor:pointer; transition:.15s;}
.pay-method:hover{border-color:var(--blue);}
.pay-method.selected{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-light);}
.pay-method input{accent-color:var(--blue);}
.pay-method .pm-label{flex:1;}
.pay-method .pm-label b{display:block; font-size:14.5px; font-weight:600;}
.pay-method .pm-label span{font-size:12.5px; color:var(--ink-soft);}
.pay-method .pm-icon{font-size:11px; font-weight:700; color:var(--blue-dark); background:var(--blue-light); padding:5px 10px; border-radius:999px; white-space:nowrap;}

.order-summary{background:var(--white); border-radius:var(--radius-md); border:1px solid var(--line); box-shadow:var(--shadow-sm); padding:26px; position:sticky; top:100px;}
.order-summary h3{font-size:15px; margin-bottom:16px; font-weight:600;}
.order-line{display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:10px; color:var(--ink-soft);}
.order-line b{color:var(--ink); font-weight:600;}

.notice{background:var(--blue-light); border-radius:12px; padding:16px 18px; font-size:13.5px; color:var(--blue-dark); margin-bottom:20px; line-height:1.6;}
.notice.warn{background:var(--red-light); color:var(--red-dark);}

/* TIMELINE (comment ça marche) — remplace la grille de cartes à numéros gravés des templates vendus */
.timeline{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:36px; position:relative;}
@media (max-width:820px){ .timeline{grid-template-columns:1fr; gap:34px;} }
.timeline::before{content:''; position:absolute; top:26px; left:calc(100%/6); right:calc(100%/6); height:2px; background:var(--line);}
@media (max-width:820px){ .timeline::before{display:none;} }
.tl-step{position:relative; padding:0 20px; text-align:center;}
.tl-step .tl-num{width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:600; font-size:20px; margin:0 auto 20px; position:relative; z-index:1; color:var(--white);}
.tl-step:nth-child(1) .tl-num{background:var(--blue);}
.tl-step:nth-child(2) .tl-num{background:var(--ink);}
.tl-step:nth-child(3) .tl-num{background:var(--red);}
.tl-step h3{font-size:17px; margin-bottom:8px; font-weight:600;}
.tl-step p{font-size:14px; color:var(--ink-soft);}

/* STATUS PAGES */
/* PAGES LÉGALES */
.legal-content{max-width:720px;}
.legal-content h3{font-size:18px; margin:34px 0 10px;}
.legal-content h3:first-of-type{margin-top:26px;}
.legal-content p{color:var(--ink-soft); font-size:14.5px; margin-bottom:6px;}
.legal-content ul{margin:8px 0 6px 20px; color:var(--ink-soft); font-size:14.5px;}
.legal-content li{margin-bottom:4px;}
.legal-content a{color:var(--blue-dark);}

.status-page{padding:130px 0; text-align:center;}
.status-page .lede{margin:0 auto 30px;}
.status-icon{width:60px; height:60px; margin:0 auto 24px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:14px;}
.status-icon.success{color:var(--white); background:var(--blue);}
.status-icon.cancel{color:var(--white); background:var(--red);}

/* UTILITAIRES
   Remplacent les attributs style="" en ligne pour permettre une Content-Security-Policy
   stricte (style-src sans 'unsafe-inline') — voir .htaccess. */
.hidden{display:none;}
.mt-md{margin-top:20px;}
.mt-lg{margin-top:44px;}
.mb-lg{margin-bottom:36px;}
.mb-md{margin-bottom:16px;}
.lede-sm{font-size:13.5px; margin-bottom:14px;}
.pb-0{padding-bottom:0;}
.pt-sm{padding-top:24px;}
.text-center{text-align:center;}
.justify-center{justify-content:center;}
.section-contrast{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-tint{background:var(--paper-blue);}
.section-dark{background:var(--ink); color:var(--paper); position:relative; overflow:hidden;}
.section-dark::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 500px 300px at 20% 20%, rgba(23,72,224,.35), transparent 60%),
    radial-gradient(ellipse 500px 300px at 80% 80%, rgba(226,118,111,.3), transparent 60%);}
.section-dark .wrap{position:relative;}
.narrow{max-width:560px;}
.on-dark{color:var(--white);}
.on-dark-soft{color:rgba(246,248,252,.75); margin:0 auto 26px;}
.cart-actions-row{text-align:right; margin-top:24px; display:flex; gap:14px; justify-content:flex-end; flex-wrap:wrap;}
.pd-frame{margin-top:38px; height:calc(100% - 38px);}
.pay-method-title{margin:30px 0 6px; font-size:16px; font-weight:600;}
.order-line-total{border-top:1px solid var(--line); padding-top:14px; margin-top:14px;}

footer{background:var(--ink); color:rgba(246,248,252,.62); padding:56px 0 34px; position:relative;}
footer::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--blue), var(--red));}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:34px;}
@media (max-width:700px){ .foot-grid{grid-template-columns:1fr; gap:26px;} }
.foot-grid h4{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:rgba(246,248,252,.42); margin-bottom:14px;}
.foot-grid .logo{color:var(--white); margin-bottom:10px;}
.foot-grid p{font-size:13.5px; max-width:280px;}
.foot-links{list-style:none; display:flex; flex-direction:column; gap:9px;}
.foot-links a{color:rgba(246,248,252,.78); text-decoration:none; font-size:13.5px;}
.foot-links a:hover{color:var(--white);}
.foot-row{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; flex-wrap:wrap; gap:10px; border-top:1px solid rgba(246,248,252,.12); padding-top:24px;}
.foot-legal{display:flex; gap:18px;}
.foot-legal a{color:rgba(246,248,252,.78); text-decoration:none;}
.foot-legal a:hover{color:var(--white);}