/* Styles spécifiques — Boîte aux Lettres Normalisée S'appuie sur la charte brand.css (palette, polices, boutons), chargée dans le des pages via , + rétro-moderne. NB : les variables (--bg, --accent, etc.) sont définies dans brand.css qui DOIT être chargé. */ /* ---------- Bandeau haut ---------- */ .topbar { background: var(--dark); color: #dbe5f4; font-size: var(--step--1); padding: .5rem 0; } .topbar .container { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .topbar span { opacity: .85; } .topbar .accent { opacity: 1; } /* ---------- Header ---------- */ .site-header { background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; } .site-header .container { display: flex; align-items: center; gap: 1.5rem; padding-block: .75rem; flex-wrap: wrap; } .logo { display: flex; align-items: center; gap: .75rem; text-decoration: none; } .logo svg { flex: 0 0 auto; } .logo .logo-name { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; line-height: 1.1; } .logo .logo-tag { font-size: var(--step--1); color: var(--muted); } .main-nav { display: flex; gap: .5rem; margin-left: auto; flex-wrap: wrap; } .main-nav a { text-decoration: none; font-weight: 600; font-size: var(--step--1); color: var(--text); padding: .5rem .9rem; border-radius: 999px; transition: background .15s ease, color .15s ease; } .main-nav a:hover { background: rgba(30,111,224,.08); color: var(--text); } .main-nav a.active { background: var(--accent); color: #fff; } .cart-btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--border); padding: .55rem 1rem; border-radius: 999px; cursor: pointer; font-weight: 600; transition: border-color .15s ease; } .cart-btn:hover { border-color: var(--accent); } .cart-btn .cart-count { background: var(--accent); color: #fff; font-size: var(--step--1); border-radius: 999px; min-width: 1.3rem; text-align: center; padding: 0 .3rem; } /* ---------- Hero (accueil) ---------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(115deg, rgba(15,27,45,.9), rgba(21,48,82,.65)), url("https://jhpyevwucreerdlihoaf.supabase.co/storage/v1/object/public/site-visuals/00a6523f-ca2b-4d65-a105-048c8da16b15/professional-business-scene-6xg2m5-jbsxnu.jpg") center/cover; color: #fff; padding: var(--space-6) 0; } .hero .container { display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--space-4); align-items: end; } .hero .kicker { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: var(--step--1); color: #ffd8c4; background: rgba(255,122,61,.22); border: 1px solid rgba(255,122,61,.4); display: inline-block; padding: .4rem 1rem; border-radius: 999px; } .hero h1 { font-size: var(--step-4); margin-bottom: var(--space-3); max-width: 16ch; } .hero p { font-size: var(--step-1); max-width: 46ch; color: #e7eefb; } .hero .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: var(--space-4); } .hero-meta { display: grid; gap: .75rem; margin-top: var(--space-4); border-top: 1px solid rgba(255,255,255,.22); padding-top: var(--space-3); font-size: var(--step--1); max-width: 38ch; } .hero-meta strong { color: #ffb98f; } /* ---------- Bandeau réassurance (3 colonnes asymétriques) ---------- */ .reassurance { background: var(--accent); color: var(--bg); padding: var(--space-4) 0; } .reassurance .container { display: grid; grid-template-columns: 1.2fr 1fr .8fr; gap: var(--space-3); align-items: center; } .reass-item { display: flex; gap: .9rem; align-items: flex-start; } .reass-item svg { flex: 0 0 auto; margin-top: .2rem; } .reass-item h3 { font-size: var(--step-1); margin-bottom: .25rem; } .reass-item p { margin: 0; font-size: var(--step--1); opacity: .92; } /* ---------- Gammes (grille asymétrique) ---------- */ .gammes-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--space-3); } .gamme-card { position: relative; border-radius: 14px; overflow: hidden; min-height: 340px; display: flex; align-items: flex-end; padding: var(--space-4); color: #fff; box-shadow: var(--shadow); } .gamme-card.corail { background: linear-gradient(200deg, rgba(30,111,224,.8), rgba(15,27,45,.94)), url("https://jhpyevwucreerdlihoaf.supabase.co/storage/v1/object/public/site-visuals/00a6523f-ca2b-4d65-a105-048c8da16b15/professional-business-scene-55lwqn-m8a98j.jpg") center/cover; } .gamme-card.lagon { background: linear-gradient(200deg, rgba(255,122,61,.72), rgba(15,27,45,.92)), url("https://jhpyevwucreerdlihoaf.supabase.co/storage/v1/object/public/site-visuals/00a6523f-ca2b-4d65-a105-048c8da16b15/professional-business-scene-ptzpmi-ax475h.jpg") center/cover; } .gamme-card h3 { font-size: var(--step-3); margin-bottom: .5rem; } .gamme-card p { max-width: 40ch; font-size: var(--step--1); color: #eef3fb; } /* ---------- Section titres ---------- */ .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: var(--space-4); flex-wrap: wrap; } .section-head .sec-note { color: var(--muted); font-size: var(--step--1); } /* ---------- Grille produits ---------- */ .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .product-grid.charging .product-card { opacity: .4; pointer-events: none; } .product-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; } .product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); border-color: var(--accent); } .product-card .thumb { aspect-ratio: 4/3; background: #f5f2ec; padding: var(--space-2); } .product-card .thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; } .product-card:hover .thumb img { transform: scale(1.04); } .product-card .badge { background: var(--accent); color: #fff; font-size: var(--step--1); padding: .18rem .65rem; border-radius: 999px; position: absolute; top: var(--space-2); left: var(--space-2); font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,.2); } .product-card .thumb { position: relative; } .product-card .body { padding: var(--space-3); display: flex; flex-direction: column; flex: 1; } .product-card .gamme-tag { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--muted); font-weight: 700; } .product-card h3 { font-size: var(--step-1); margin: .25rem 0 .5rem; line-height: 1.25; } .product-card .price { font-family: var(--font-heading); font-weight: 800; font-size: var(--step-2); color: var(--accent); } .product-card .free-ship { color: var(--muted); font-size: var(--step--1); } .product-card .row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--space-2); gap: .75rem; } .quantity { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); } .quantity button { border: 0; background: transparent; padding: .35rem .6rem; cursor: pointer; font-size: var(--step-0); color: var(--text); border-radius: 999px; } .quantity button:hover { background: rgba(30,111,224,.1); } .quantity span { min-width: 2em; text-align: center; } .add-btn { background: var(--accent); color: #fff; border: 0; padding: .6rem 1.1rem; border-radius: 999px; cursor: pointer; font-weight: 700; transition: background .15s ease, transform .12s ease, box-shadow .15s ease; } .add-btn:hover { background: #1757bb; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(30,111,224,.28); } .grid-error { text-align: center; padding: var(--space-5); color: var(--muted); } .grid-error button { margin-top: var(--space-2); } .spinner { width: 44px; height: 44px; border: 4px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin: var(--space-4) auto; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Engagement (chiffres clés) ---------- */ .engagement { background: linear-gradient(120deg, var(--dark), var(--dark-2)); color: #fff; } .engagement .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); text-align: center; } .kpi .kpi-num { font-family: var(--font-heading); font-weight: 800; font-size: var(--step-4); color: #ffb98f; display: block; line-height: 1; } .kpi .kpi-label { margin-top: var(--space-1); font-size: var(--step--1); opacity: .85; } /* ---------- Avis ---------- */ .reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .review { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: var(--space-3); box-shadow: 0 2px 8px rgba(0,0,0,.04); } .review .stars { color: var(--accent); margin-bottom: .5rem; letter-spacing: .1em; } .review p { font-style: italic; margin-bottom: var(--space-2); } .review .who { font-weight: 700; font-size: var(--step--1); color: var(--muted); } /* ---------- FAQ accordéon ---------- */ .faq-wrap { max-width: 780px; margin-inline: auto; } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; margin-bottom: var(--space-2); overflow: hidden; transition: box-shadow .15s ease; } .faq-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.05); } .faq-q { width: 100%; text-align: left; background: none; border: 0; padding: var(--space-3); font-family: var(--font-heading); font-weight: 600; font-size: var(--step-0); cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center; } .faq-q .chev { transition: transform .2s ease; flex: 0 0 auto; } .faq-item.open .chev { transform: rotate(180deg); } .faq-a { display: none; padding: 0 var(--space-3) var(--space-3); color: var(--muted); } .faq-item.open .faq-a { display: block; } /* ---------- CTA final ---------- */ .cta-final { background: linear-gradient(120deg, var(--dark), var(--dark-2)); color: #fff; text-align: center; padding: var(--space-6) 0; } .cta-final h2 { font-size: var(--step-3); } .cta-final p { max-width: 46ch; margin-inline: auto; color: #d7e2f5; } .cta-final .btn { background: var(--accent-2); color: #fff; border-color: var(--accent-2); box-shadow: 0 6px 16px rgba(255,122,61,.3); } .cta-final .btn:hover { background: #f06b2c; } .cta-final .cta-phone { font-family: var(--font-heading); font-weight: 800; font-size: var(--step-2); margin-top: var(--space-2); color: #ffb98f; } /* ---------- Hero catégorie ---------- */ .hero-cat { position: relative; overflow: hidden; background: linear-gradient(115deg, rgba(15,27,45,.88), rgba(30,111,224,.55)), url("https://jhpyevwucreerdlihoaf.supabase.co/storage/v1/object/public/site-visuals/00a6523f-ca2b-4d65-a105-048c8da16b15/professional-business-scene-20mr3m-xgk3te.jpg") center/cover; color: #fff; padding: var(--space-5) 0; } .hero-cat h1 { font-size: var(--step-4); max-width: 14ch; } .hero-cat p { font-size: var(--step-1); max-width: 52ch; color: #e7eefb; } .breadcrumb { font-size: var(--step--1); margin-bottom: var(--space-2); opacity: .85; } /* ---------- Barre filtres ---------- */ .filterbar { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: var(--space-3); margin: var(--space-4) 0; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.04); } .filterbar .group { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .filterbar .label { font-weight: 700; font-size: var(--step--1); } .filterbar select, .filterbar .chip { border: 1px solid var(--border); background: var(--bg); border-radius: 999px; padding: .5rem .95rem; font-family: var(--font-body); font-size: var(--step--1); cursor: pointer; transition: all .15s ease; } .filterbar .chip:hover { border-color: var(--accent); } .filterbar .chip.active { background: var(--accent); color: #fff; border-color: var(--accent); } .result-count { margin-left: auto; color: var(--muted); font-size: var(--step--1); } /* ---------- Pagination ---------- */ .pagination { display: flex; gap: .5rem; justify-content: center; margin-top: var(--space-4); } .pagination button { border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: .55rem .95rem; cursor: pointer; font-weight: 600; min-width: 2.6rem; transition: all .15s ease; } .pagination button:hover:not(:disabled):not(.active) { border-color: var(--text); } .pagination button.active { background: var(--accent); color: #fff; border-color: var(--accent); } .pagination button:disabled { opacity: .5; cursor: not-allowed; } /* ---------- Modales ---------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(15,27,45,.55); backdrop-filter: blur(4px); display: none; align-items: flex-start; justify-content: center; padding: var(--space-4); z-index: 60; overflow-y: auto; } .modal-overlay.open { display: flex; } .modal { background: var(--surface); border-radius: 18px; padding: var(--space-4); width: 100%; max-width: 980px; position: relative; box-shadow: 0 24px 60px rgba(0,0,0,.25); } .modal .close { position: absolute; top: var(--space-2); right: var(--space-2); background: none; border: 0; cursor: pointer; color: var(--muted); width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px; transition: background .15s ease; } .modal .close:hover { background: rgba(30,111,224,.1); } .modal-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .modal-split .thumb img { width: 100%; border-radius: 14px; background: #f5f2ec; } .modal .price { font-family: var(--font-heading); font-weight: 800; font-size: var(--step-3); color: var(--accent); } .modal .desc { color: var(--muted); } .modal .modal-cta { display: flex; gap: 1rem; align-items: center; margin-top: var(--space-3); flex-wrap: wrap; } .cart-pop { list-style: none; margin: 0; padding: 0; } .cart-pop li { display: flex; gap: 1rem; align-items: center; border-bottom: 1px solid var(--border); padding-block: var(--space-2); } .cart-pop img { width: 56px; height: 56px; object-fit: contain; background: #f5f2ec; border-radius: 10px; } .cart-pop .ci-name { font-weight: 600; flex: 1; font-size: var(--step--1); } .cart-pop .ci-price { font-weight: 700; white-space: nowrap; } .cart-pop .ci-remove { background: none; border: 0; color: var(--accent); cursor: pointer; font-weight: 600; } .cart-pop .ci-remove:hover { text-decoration: underline; } .cart-total { display: flex; justify-content: space-between; font-family: var(--font-heading); font-weight: 800; font-size: var(--step-1); padding-top: var(--space-2); } .cart-checkout { margin-top: var(--space-3); } .cart-empty { text-align: center; padding: var(--space-4); color: var(--muted); } .cart-empty .btn { margin-top: var(--space-2); } /* ---------- Footer ---------- */ .site-footer { background: var(--dark); color: #c4d2e6; padding-top: var(--space-5); font-size: var(--step--1); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-4); } .footer-grid h4 { color: #fff; font-size: var(--step-0); } .footer-grid a { color: inherit; text-decoration: none; display: block; margin-bottom: .4rem; } .footer-grid a:hover { color: #ffb98f; } .footer-brand { display: flex; align-items: center; gap: .75rem; margin-bottom: var(--space-2); color: #fff; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: var(--space-4); padding-block: var(--space-3); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .hero .container, .gammes-grid, .modal-split { grid-template-columns: 1fr; } .reassurance .container { grid-template-columns: 1fr; } .product-grid { grid-template-columns: repeat(2, 1fr); } .engagement .container { grid-template-columns: 1fr; gap: var(--space-3); } .reviews, .footer-grid { grid-template-columns: 1fr; } .main-nav { margin-left: 0; width: 100%; gap: .75rem; } } @media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; } .hero h1, .hero-cat h1 { font-size: var(--step-3); } }