/* ========================================================================== Mes Lunettes Éclipse — Design system (Phase 1, vitrine) Univers : corona d'éclipse — noir profond, or, orange, rose, violet. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap"); :root { /* Couleurs */ --void-950: #030308; --void-900: #06060f; --void-800: #0b0b18; --void-700: #121226; --void-600: #1b1b35; --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.16); --ink: #f5f4f8; --ink-dim: rgba(245, 244, 248, 0.72); --ink-faint: rgba(245, 244, 248, 0.48); --gold: #f5b942; --amber: #ff9d3d; --coral: #ff7a5c; --rose: #ff5c8a; --violet: #9a6bff; --deep-violet: #5b3bd6; --corona: linear-gradient(120deg, var(--gold), var(--coral) 45%, var(--rose) 70%, var(--violet)); --corona-soft: linear-gradient(120deg, rgba(245, 185, 66, 0.9), rgba(255, 122, 92, 0.85) 45%, rgba(255, 92, 138, 0.85) 70%, rgba(154, 107, 255, 0.9)); --glass: rgba(18, 18, 38, 0.55); /* Typo */ --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; /* Échelle */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 7rem; --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-full: 999px; --shadow-glow: 0 0 80px rgba(245, 157, 61, 0.18), 0 0 160px rgba(154, 107, 255, 0.12); --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.45); --container-w: 1180px; --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--void-950); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* Un mot que le navigateur ne sait pas couper — l'allemand et le finnois en produisent beaucoup (« Sonnenfinsternisbrillen », « Auringonpimennyslasit ») — dépasse de son bloc SANS élargir le bloc. Comme `overflow-x: hidden` ci-dessus interdit tout défilement latéral, les dernières lettres n'étaient tout simplement pas affichées : mesuré le 22/08/2026 sur le titre de la Boutique (66 px hors écran en allemand à 360 px) et sur les titres des CGV et de la Confidentialité. `break-word` ne coupe QUE lorsqu'un mot seul ne tient pas sur sa ligne, et — contrairement à `anywhere` — ne change pas la taille min-content : il n'a donc aucun effet sur les textes qui tiennent déjà, ni sur le dimensionnement des grilles. */ overflow-wrap: break-word; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -0.01em; } p { margin: 0; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ---------- Layout helpers ---------- */ .container { width: 100%; max-width: var(--container-w); margin-inline: auto; padding-inline: var(--space-5); } .section { padding-block: var(--space-9); position: relative; } .section-head { max-width: 640px; margin-bottom: var(--space-7); } .section-head.center { margin-inline: auto; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-4); } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--corona); } h2.section-title { font-size: clamp(1.9rem, 3.2vw, 2.75rem); } .section-sub { margin-top: var(--space-4); color: var(--ink-dim); font-size: 1.05rem; max-width: 52ch; } .center .section-sub { margin-inline: auto; } .grad-text { background: var(--corona); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-delay-1.is-visible { transition-delay: 0.08s; } .reveal-delay-2.is-visible { transition-delay: 0.16s; } .reveal-delay-3.is-visible { transition-delay: 0.24s; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 1.7rem; border-radius: var(--radius-full); font-weight: 600; font-size: 0.98rem; white-space: nowrap; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease); } .btn-sm { padding: 0.6rem 1.15rem; font-size: 0.88rem; } .btn-primary { background: var(--corona); color: var(--void-950); box-shadow: 0 10px 30px rgba(255, 122, 92, 0.28); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255, 122, 92, 0.4); } .btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); } .btn-outline:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); } .btn-ghost { color: var(--ink-dim); } .btn-ghost:hover { color: var(--gold); } .btn-block { width: 100%; } .btn[disabled], .btn.is-disabled { opacity: 0.5; cursor: not-allowed; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; padding-block: var(--space-4); background: rgba(5, 5, 10, 0.4); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid transparent; transition: border-color 0.4s var(--ease), background 0.4s var(--ease); } .site-header.is-scrolled { background: rgba(5, 5, 10, 0.75); border-bottom-color: var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); } .brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; } .brand-mark { width: 30px; height: 30px; border-radius: 50%; position: relative; flex-shrink: 0; background: radial-gradient(circle at 35% 35%, #0a0a12 0%, #0a0a12 38%, transparent 40%), conic-gradient(from 0deg, var(--gold), var(--coral), var(--rose), var(--violet), var(--gold)); box-shadow: 0 0 18px rgba(245, 157, 61, 0.55); } .brand-name-accent { background: var(--corona); -webkit-background-clip: text; background-clip: text; color: transparent; } .main-nav ul { display: flex; gap: var(--space-6); } .main-nav a { font-size: 0.94rem; color: var(--ink-dim); transition: color 0.25s var(--ease); position: relative; } .main-nav a:hover, .main-nav a.is-active { color: var(--ink); } .main-nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--corona); border-radius: 2px; } .mobile-nav-phone { display: none; } .header-actions { display: flex; align-items: center; gap: var(--space-4); } .header-phone { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--ink-dim); } .header-phone:hover { color: var(--gold); } .header-phone svg { width: 16px; height: 16px; } /* ---------- Sélecteur de langue ---------- */ .lang-switcher { position: relative; } .lang-trigger { display: flex; align-items: center; gap: 6px; padding: 0.5rem 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--glass); backdrop-filter: blur(8px); font-size: 0.82rem; color: var(--ink-dim); transition: border-color 0.25s var(--ease), color 0.25s var(--ease); } .lang-trigger:hover { border-color: var(--gold); color: var(--ink); } .lang-flag { font-size: 1rem; line-height: 1; } .lang-code { font-weight: 600; letter-spacing: 0.02em; } .lang-panel { position: absolute; top: calc(100% + 10px); right: 0; width: 260px; max-height: 360px; background: rgba(10, 10, 20, 0.97); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-card); backdrop-filter: blur(20px); overflow: hidden; z-index: 200; display: flex; flex-direction: column; } .lang-panel[hidden] { display: none; } .lang-search { margin: 10px; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: rgba(255,255,255,0.03); color: var(--ink); font-size: 0.85rem; } .lang-search:focus { outline: none; border-color: var(--gold); } .lang-list { list-style: none; margin: 0; padding: 0 6px 10px; overflow-y: auto; } .lang-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.88rem; color: var(--ink-dim); text-align: left; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .lang-option:hover, .lang-option:focus-visible { background: rgba(255,255,255,0.06); color: var(--ink); } .lang-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: rgba(10, 10, 20, 0.96); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 0.85rem 1.3rem; font-size: 0.85rem; color: var(--ink-dim); box-shadow: var(--shadow-card); opacity: 0; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); z-index: 300; max-width: 90vw; text-align: center; } .lang-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } /* ---------- Fenêtre de paiement (iframe Stancer) ---------- */ .payment-modal-overlay { position: fixed; inset: 0; z-index: 500; background: rgba(4, 4, 10, 0.85); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: var(--space-5); opacity: 0; transition: opacity 0.25s var(--ease); } .payment-modal-overlay.is-visible { opacity: 1; } .payment-modal { position: relative; width: 100%; max-width: 480px; height: min(680px, 90vh); background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.5); } .payment-modal iframe { width: 100%; height: 100%; border: 0; display: block; } .payment-modal-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; line-height: 1; background: rgba(4, 4, 10, 0.75); color: #fff; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; } .payment-modal-close:hover { background: rgba(4, 4, 10, 0.92); } @media (max-width: 560px) { .payment-modal-overlay { padding: 0; } .payment-modal { max-width: none; height: 100dvh; border-radius: 0; } } @media (max-width: 880px) { .lang-code { display: none; } .lang-panel { right: -70px; width: 240px; } } /* ---------- Numéro de téléphone (compact, header, toutes les pages) ---------- */ /* Simple lien tel: statique (France uniquement depuis le 18/08/2026, plus de sélecteur par pays) — garde la même apparence "pilule" qu'avant. */ .phone-mini-trigger { display: flex; align-items: center; gap: 6px; padding: 0.5rem 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--glass); backdrop-filter: blur(8px); font-size: 0.85rem; color: var(--ink-dim); transition: border-color 0.25s var(--ease), color 0.25s var(--ease); } .phone-mini-trigger:hover { border-color: var(--gold); color: var(--ink); } .phone-mini-trigger svg:first-child { width: 15px; height: 15px; flex-shrink: 0; } .phone-mini-flag { font-size: 1rem; line-height: 1; } .phone-mini-number { white-space: nowrap; } /* ---------- Icône panier (header, toutes les pages) ---------- */ .cart-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--ink-dim); transition: color 0.25s var(--ease); } .cart-icon:hover { color: var(--gold); } .cart-icon svg { width: 21px; height: 21px; } .cart-badge { position: absolute; top: -2px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--corona); color: var(--void-950); font-size: 0.68rem; font-weight: 700; line-height: 1; box-shadow: 0 0 10px rgba(245, 157, 61, 0.6); } .cart-badge[hidden] { display: none; } .cart-badge.is-pulse { animation: cartPulse 0.5s var(--ease); } @keyframes cartPulse { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } } /* ---------- Sélecteur de pays / téléphone ---------- */ .phone-switcher-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-5); } .phone-tab { padding: 0.5rem 0.9rem; border-radius: var(--radius-full); border: 1px solid var(--line-strong); background: rgba(255,255,255,0.02); color: var(--ink-dim); font-size: 0.85rem; transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease); } .phone-tab:hover { border-color: var(--gold); color: var(--ink); } .phone-tab.is-active { border-color: var(--gold); background: rgba(245, 185, 66, 0.1); color: var(--ink); font-weight: 600; } .phone-switcher-panel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6) var(--space-5); background-color: rgba(6, 6, 15, 0.72); transition: opacity 0.2s var(--ease); } .phone-flag { font-size: 2.2rem; line-height: 1; } .phone-info { max-width: 460px; } .phone-number { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; } .phone-hours { font-size: 0.85rem; color: var(--ink-faint); margin-top: 0.4rem; line-height: 1.5; } .nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 6px; } .nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 880px) { .header-phone span { display: none; } /* Le header en pleine largeur ne peut pas accueillir en même temps le numéro de téléphone, le sélecteur de langue, le panier ET le bouton menu sur un écran de téléphone (~375-390px) — ça déborde/écrase tout. On garde le sélecteur de langue directement visible dans la barre (compact : drapeau + chevron, sans le code façon "FR") car c'est un réglage qu'on doit pouvoir changer sans ouvrir le menu. Le numéro de téléphone, lui, n'est affiché que dans le menu plein écran (voir .mobile-nav-phone plus bas) — pas besoin de le déplacer par JS puisque c'est maintenant un simple lien statique. */ .header-actions > .phone-mini-trigger { display: none; } .header-actions > .lang-switcher { display: block; } /* Le header (.site-header) a un backdrop-filter, ce qui crée un containing block pour tout descendant en position:fixed (spec CSS) : ce menu se retrouvait donc "fixé" par rapport au header (~68px de haut) au lieu du viewport entier, et n'affichait que les 1-2 premiers liens. JS ajoute .nav-open sur le header pendant que le menu est ouvert pour désactiver temporairement ce filtre et rendre le fixed réellement plein écran. */ .site-header.nav-open { backdrop-filter: none; -webkit-backdrop-filter: none; } .main-nav { position: fixed; inset: 0; top: 68px; z-index: 90; background: rgba(4, 4, 10, 0.97); backdrop-filter: blur(20px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-7); transform: translateX(100%); transition: transform 0.4s var(--ease); overflow-y: auto; padding-block: var(--space-7); } .main-nav.is-open { transform: translateX(0); } .main-nav ul { flex-direction: column; align-items: center; gap: var(--space-6); } .main-nav a { font-size: 1.3rem; } /* Numéro de téléphone affiché dans le menu plein écran mobile (seul endroit où il apparaît en dessous de 880px, voir plus haut). */ .mobile-nav-phone { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; max-width: 320px; padding: 0.85rem 1.2rem; font-size: 0.95rem; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: rgba(255,255,255,0.03); color: var(--ink-dim); } .mobile-nav-phone svg { width: 18px; height: 18px; flex-shrink: 0; } .header-actions { gap: var(--space-3); } .header-actions .btn-primary { display: none; } .nav-toggle { display: flex; } } @media (max-width: 400px) { /* iPhone SE / mini et écrans très étroits : encore un peu de marge en moins. */ .header-actions { gap: var(--space-2); } .brand-name { font-size: 0.98rem; } /* `.btn` est en `white-space: nowrap` : un libellé long ne peut pas se replier et sort de l'écran. Trouvé en passant les 23 langues actives — les quatre langues de mon premier échantillon (fr, de, pl, fi) ne le montraient pas. Mesuré à 320 px : « Μάθετε περισσότερα για την πιστοποίηση » dépasse de 29 px en grec, « Más información sobre la certificación » de 2 px en espagnol. La règle est volontairement enfermée sous 400 px : au-dessus, les boutons gardent exactement le `nowrap` d'origine, donc aucun rendu grand écran ne bouge. */ .btn { white-space: normal; } /* Il manquait cinq pixels : à 320 et 360 px, « Eclipse Houses » passait à la ligne, le header grandissait de 71 à 83 px, et le menu plein écran (dont le `top: 68px` est fixe) recouvrait alors le bas de la barre sur 15 px. On resserre les gouttières du header plutôt que de rapetisser encore le texte de la marque. */ .header-inner { gap: var(--space-3); } .brand { gap: 0.45rem; } } /* ---------- Hero & Halo (effet éclipse au scroll) ---------- */ .halo-scroll-wrap { position: relative; } /* ---------- Fond ambiant (pages internes) ---------- */ .page-ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .page-ambient .halo-ambient { top: 30%; opacity: 0.14; } .hero { position: relative; padding-top: var(--space-9); padding-bottom: var(--space-9); } .halo-field { position: sticky; top: 0; left: 0; width: 100%; height: 100vh; margin-bottom: -100vh; /* Sur iOS Safari, 100vh compte la hauteur AVEC la barre d'adresse visible ; comme cet élément est "sticky" et sert de fond à toute la hero, ça provoque un décalage/saut visible pendant le scroll (la barre se rétracte). 100dvh (dynamic viewport height, supporté iOS 15.4+) suit la vraie hauteur visible en temps réel — on la met en second pour qu'elle prenne le dessus quand le navigateur la supporte, sans rien casser sur les navigateurs plus anciens qui gardent juste 100vh. */ height: 100dvh; margin-bottom: -100dvh; z-index: -1; pointer-events: none; overflow: visible; } .stars { position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.5) 0, transparent 100%), radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.4) 0, transparent 100%), radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,0.35) 0, transparent 100%), radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,0.45) 0, transparent 100%), radial-gradient(1.5px 1.5px at 55% 15%, rgba(255,255,255,0.3) 0, transparent 100%), radial-gradient(1px 1px at 10% 65%, rgba(255,255,255,0.4) 0, transparent 100%); background-repeat: repeat; background-size: 100% 100%; opacity: 0.8; } .halo-ambient { position: absolute; top: 50%; left: 50%; width: min(1700px, 240vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: conic-gradient(from 0deg, var(--gold), var(--amber), var(--coral), var(--rose), var(--violet), var(--deep-violet), var(--gold)); filter: blur(140px) saturate(115%); opacity: 0.16; animation: spin 90s linear infinite reverse; } .halo { position: absolute; top: 50%; left: 50%; width: min(920px, 130vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: conic-gradient(from 0deg, var(--gold), var(--amber), var(--coral), var(--rose), var(--violet), var(--deep-violet), var(--gold)); filter: blur(70px) saturate(115%); opacity: 0.42; animation: spin 40s linear infinite; } .sun-disk { position: absolute; top: 50%; left: 50%; width: min(500px, 68vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fff1d6, var(--gold) 45%, var(--coral) 82%, var(--rose) 100%); box-shadow: 0 0 110px rgba(245, 157, 61, 0.32); opacity: 0.85; } .moon-disk { position: absolute; top: 50%; left: 50%; width: min(540px, 74vw); aspect-ratio: 1; transform: translate(calc(-50% + var(--moon-x, 34%)), -50%); border-radius: 50%; background: radial-gradient(circle at 38% 34%, #17172a, var(--void-950) 70%); box-shadow: 0 0 90px rgba(0, 0, 0, 0.65), inset 0 0 60px rgba(0,0,0,0.6); } @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } } .hero-inner { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-full); font-size: 0.82rem; color: var(--ink-dim); margin-bottom: var(--space-5); background: var(--glass); backdrop-filter: blur(8px); } .hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.65); } .hero h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); max-width: 16ch; } .hero-sub { margin-top: var(--space-5); font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink-dim); max-width: 46ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-7); } .hero-trust { display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: center; margin-top: var(--space-8); color: var(--ink-faint); font-size: 0.85rem; } .hero-trust li { display: flex; align-items: center; gap: 0.5rem; } .hero-trust svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; } /* ---------- Cards ---------- */ .card { background-color: rgba(6, 6, 15, 0.72); background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); position: relative; overflow: hidden; transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); } .card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-card); } .card-icon { width: 48px; height: 48px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--corona-soft); margin-bottom: var(--space-4); } .card-icon svg { width: 24px; height: 24px; color: var(--void-950); } .card h3 { font-size: 1.2rem; margin-bottom: var(--space-3); } .card p { color: var(--ink-dim); font-size: 0.96rem; } /* `1fr` vaut `minmax(auto, 1fr)` : le minimum d'une telle piste est le min-content de son contenu, si bien qu'une piste PEUT ÊTRE PLUS LARGE QUE SA GRILLE et pousser tout ce qu'elle contient hors de l'écran. Avec `overflow-x: hidden` sur body, rien ne défile : le contenu est simplement perdu. C'est ce qui rendait le Panier incommandable — mesuré le 22/08/2026 : entre 641 et 1024 px, le bouton « Commander et payer » était hors du viewport (à 641-700 px, zéro pixel visible sur 303). `minmax(0, 1fr)` autorise la piste à rétrécir jusqu'à sa part réelle. Sur grand écran, où le contenu tient déjà, les deux écritures donnent exactement le même rendu. */ .grid { display: grid; gap: var(--space-5); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } } /* Grille à deux colonnes IMBRIQUÉE dans une autre : à 768 px, les quatre cartes « professionnels » de l'accueil se retrouvaient dans des colonnes de 152 px, où le texte allemand et finnois était coupé (.card a `overflow: hidden`). Une seule colonne pour la grille intérieure tant que la grille extérieure en a encore deux. */ @media (max-width: 980px) { .grid-2 .grid-2 { grid-template-columns: minmax(0, 1fr); } } /* Panier : les deux colonnes (coordonnées / récapitulatif) doivent avoir la même hauteur visuelle, chacune dans sa propre carte. */ .qty-scope.grid-2 { align-items: stretch; } /* Le formulaire de commande a été dessiné pour 960 px (max-width posée sur le
), gouttière de 72 px comprise. En dessous, deux colonnes ne laissent pas la place au récapitulatif : sur une tablette en portrait (768 px), le client voyait le formulaire de coordonnées et RIEN d'autre — ni quantité, ni prix, ni bouton de paiement. On empile. Au-dessus de 1010 px, la mise en page à deux colonnes est inchangée. */ @media (max-width: 1010px) { .qty-scope.grid-2 { grid-template-columns: minmax(0, 1fr); } } .qty-scope.grid-2 > .reveal { display: flex; flex-direction: column; height: 100%; } .qty-scope .form-card, .qty-scope .card { display: flex; flex-direction: column; height: 100%; flex: 1; } .qty-scope .form-card:hover, .qty-scope .card:hover { transform: none; } .qty-scope .form-card .form-grid { flex: 1; } /* ---------- Badges / pills ---------- */ .badge[hidden] { display: none; } .badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 600; border: 1px solid var(--line-strong); color: var(--ink-dim); } .badge-gold { color: var(--gold); border-color: rgba(245, 185, 66, 0.4); background: rgba(245, 185, 66, 0.08); } .badge-todo { color: #ffb4b4; border-color: rgba(255, 120, 120, 0.4); background: rgba(255, 120, 120, 0.08); } /* ---------- Spec card (accueil, bloc sécurité) ---------- */ .spec-card { display: flex; align-items: center; gap: var(--space-4); background-color: rgba(6, 6, 15, 0.72); background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); } .spec-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-card); } .spec-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--corona-soft); flex-shrink: 0; } .spec-icon svg { width: 22px; height: 22px; color: var(--void-950); } .spec-body { flex: 1; min-width: 0; } .spec-card .doc-name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; } .spec-card .doc-desc { color: var(--ink-dim); font-size: 0.85rem; margin-top: 0.25rem; } /* Le badge ne rétrécit pas et ne se coupe pas : entre 641 et 800 px, où la grille parente a encore deux colonnes, il sortait de l'écran — mesuré le 22/08/2026 : 16 px hors écran à 768 px en allemand (« Konform », « Empfehlung: 3 Jahre »), et totalement invisible à 641-700 px. En français le même badge ne dépassait qu'à 641-700 px, en polonais jamais. On autorise le badge à passer sur sa propre ligne dans la carte plutôt qu'à déborder. */ .spec-card { flex-wrap: wrap; } .spec-card .badge { flex-shrink: 0; white-space: normal; } @media (max-width: 640px) { /* Le badge (largeur fixe, nowrap) se battait avec le texte pour l'espace restant sur la ligne : .doc-desc n'avait presque plus de place et le texte s'affichait sur une colonne d'un mot de large. On passe en grille pour que le texte occupe toute la largeur disponible et que le badge se place sur sa propre ligne en dessous. */ .spec-card { display: grid; grid-template-columns: 44px 1fr; grid-template-areas: "icon body" "badge badge"; align-items: start; gap: var(--space-2) var(--space-4); } .spec-icon { grid-area: icon; } .spec-body { grid-area: body; min-width: 0; } .spec-card .badge { grid-area: badge; margin-left: 0; white-space: normal; justify-self: start; } } /* ---------- Pricing table ---------- */ .pricing-table { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); background-color: rgba(6, 6, 15, 0.78); } table.pricing { width: 100%; border-collapse: collapse; min-width: 640px; } table.pricing th, table.pricing td { padding: 1.1rem 1.4rem; text-align: left; border-bottom: 1px solid var(--line); font-size: 0.95rem; } table.pricing thead th { font-family: var(--font-display); font-weight: 600; color: var(--ink-dim); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; background: rgba(255,255,255,0.02); } table.pricing tbody tr { transition: background 0.25s var(--ease); } table.pricing tbody tr:hover { background: rgba(255,255,255,0.03); } table.pricing tbody tr:last-child td { border-bottom: none; } table.pricing .qty { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; } table.pricing .save { color: var(--gold); font-weight: 600; } table.pricing tr.is-best td { background: rgba(245, 185, 66, 0.06); } /* Grille des délais Express par pays (page Livraison) : même habillage que le tableau de tarifs, mais deux colonnes seulement. La largeur minimale de 640px prévue pour les quatre colonnes du tableau de tarifs imposerait ici un défilement horizontal inutile sur mobile. */ table.pricing.delivery-grid { min-width: 0; } table.pricing.delivery-grid td { font-size: 0.95rem; } table.pricing.delivery-grid td:last-child { white-space: nowrap; color: var(--ink-dim); } table.pricing tr.is-best .qty::after { content: var(--populaire-label, "Populaire"); margin-left: 0.6rem; font-size: 0.68rem; padding: 0.2rem 0.55rem; border-radius: var(--radius-full); background: var(--corona); color: var(--void-950); font-weight: 700; vertical-align: middle; } /* En dessous de 640px, le tableau (min-width:640px) obligeait à faire défiler horizontalement pour voir toutes les colonnes. On transforme chaque ligne en petite carte empilée (une paire libellé/valeur par ligne) — le rendu desktop ci-dessus n'est pas touché. */ @media (max-width: 640px) { /* Chaque ligne devient une vraie carte (fond, bord arrondi, marge) au lieu d'une simple liste plate de libellé/valeur — même langage visuel que .price-card / .spec-card ailleurs sur le site. La quantité sert de titre de carte ; le total TTC et l'économie sont mis en valeur. */ .pricing-table { overflow-x: visible; background: transparent; border: none; } table.pricing { min-width: 0; display: block; } table.pricing thead { display: none; } table.pricing tbody { display: block; } table.pricing tbody tr { display: block; border-radius: var(--radius-lg); border: 1px solid var(--line); background-color: rgba(6, 6, 15, 0.72); background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); padding: var(--space-5); margin-bottom: var(--space-4); } table.pricing tbody tr:last-child { margin-bottom: 0; } table.pricing tr.is-best { border-color: rgba(245, 185, 66, 0.45); background-image: linear-gradient(180deg, rgba(245,185,66,0.1), transparent 65%); } table.pricing tr.is-best td { background: transparent; } table.pricing td { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0.5rem 0; border-bottom: 1px solid var(--line); } table.pricing td:last-child { border-bottom: none; padding-bottom: 0; } table.pricing td::before { content: attr(data-label); color: var(--ink-faint); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; } /* La quantité fait office de titre de carte : on masque son libellé et on l'agrandit, le badge "Populaire" vient se placer à sa droite. */ table.pricing td.qty { padding-top: 0; padding-bottom: 0.65rem; margin-bottom: 0.2rem; } table.pricing td.qty::before { display: none; } table.pricing .qty { font-size: 1.3rem; } table.pricing .qty::after { margin-left: 0.5rem; } table.pricing td[data-col="totalTTC"] { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; } table.pricing .save { font-size: 1rem; } } .pricing-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } @media (max-width: 980px) { .pricing-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .pricing-cards { grid-template-columns: minmax(0, 1fr); } } .price-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); position: relative; transition: transform 0.4s var(--ease), border-color 0.4s var(--ease); background-color: rgba(6, 6, 15, 0.72); } .price-card:hover { transform: translateY(-4px); border-color: var(--line-strong); } .price-card.is-featured { border-color: rgba(245, 185, 66, 0.5); background: linear-gradient(180deg, rgba(245,185,66,0.08), transparent 60%); } .price-card .qty-label { font-size: 0.85rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; } .price-card .qty-value { font-family: var(--font-display); font-size: 1.6rem; margin-top: 0.3rem; } .price-card .amount { font-family: var(--font-display); font-size: 2.4rem; margin-top: var(--space-4); } .price-card .unit { color: var(--ink-faint); font-size: 0.85rem; margin-top: 0.2rem; } /* ---------- Quantity selector ---------- */ .qty-selector { display: inline-flex; align-items: stretch; height: 46px; background: rgba(255,255,255,0.035); border: 1px solid var(--line-strong); border-radius: var(--radius-full); box-shadow: inset 0 1px 3px rgba(0,0,0,0.25); overflow: hidden; } .qty-selector button { flex: 0 0 46px; width: 46px; margin: 0; padding: 0; border: 0; outline: none; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 600; line-height: 1; color: var(--ink-dim); background: transparent; transition: background 0.25s var(--ease), color 0.25s var(--ease); } .qty-selector button svg { width: 18px; height: 18px; flex-shrink: 0; display: block; } .qty-selector button:hover { background: rgba(245, 185, 66, 0.14); color: var(--gold); } .qty-selector button:active { background: rgba(245, 185, 66, 0.22); } .qty-selector button:focus-visible { background: rgba(245, 185, 66, 0.18); color: var(--gold); } .qty-selector input { width: 96px; text-align: center; background: transparent; border: none; border-left: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); } .qty-selector input:focus { outline: none; background: rgba(245, 185, 66, 0.05); } .qty-selector input::-webkit-outer-spin-button, .qty-selector input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty-selector input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .qty-hint { font-size: 0.82rem; color: var(--ink-faint); margin-top: 0.6rem; } .qty-price-row { display: flex; align-items: baseline; gap: 0.75rem; margin-top: var(--space-4); flex-wrap: wrap; } .qty-price-amount { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; } .qty-price-unit { font-size: 0.8rem; color: var(--ink-faint); } /* « Vider le panier » (Panier) — seconde moitié de M3. Volontairement discret : c'est une sortie, pas une action à concurrencer le bouton de commande. `align-self: flex-start` et aucune largeur explicite : il ne peut donc pas élargir sa colonne, ce que surveille le contrôle de débordement horizontal (mesuré par scrollX, jamais par scrollWidth). */ .cart-clear { display: inline-block; margin-top: var(--space-3); padding: 0; background: none; border: none; font-size: 0.8rem; color: var(--ink-faint); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color 0.25s var(--ease); } .cart-clear:hover { color: var(--ink); } .cart-clear[hidden] { display: none; } /* Mention sur la langue de la page de paiement (M2). La consigne de la cliente EST la spécification visuelle : « courte et discrète », « rien d'alarmant » — donc pas de cadre, pas de couleur d'alerte, la même discrétion que la note de paiement sécurisé juste en dessous. */ .payment-language-note { margin-top: var(--space-4); font-size: 0.8rem; line-height: 1.5; color: var(--ink-faint); } .payment-language-note[hidden] { display: none; } /* Recommandation de quantité (Panier) : signalée quand une quantité supérieure coûte moins cher que celle choisie. Ton positif et non alarmant — c'est une bonne nouvelle pour le client, pas une erreur de sa part. Reste discrète : elle ne doit pas concurrencer visuellement le bouton de commande, qui demeure l'action principale. */ .upsell-hint { margin-top: var(--space-4); padding: 0.9rem 1rem; border: 1px solid rgba(245, 185, 66, 0.35); border-radius: var(--radius-sm); background: rgba(245, 185, 66, 0.07); } .upsell-hint[hidden] { display: none; } .upsell-hint-text { font-size: 0.85rem; line-height: 1.5; color: var(--ink-dim); margin: 0; } .upsell-hint-button { margin-top: 0.7rem; width: 100%; padding: 0.6rem 1rem; border: 1px solid var(--gold); border-radius: var(--radius-sm); background: transparent; color: var(--gold); font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.25s var(--ease), color 0.25s var(--ease); } .upsell-hint-button:hover { background: var(--gold); color: var(--void-950); } /* ---------- Panier / Checkout ---------- */ .tel-input-group { display: flex; gap: 0.6rem; } .dial-switcher { position: relative; flex-shrink: 0; } .dial-trigger { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: rgba(255,255,255,0.03); color: var(--ink); font-size: 0.92rem; transition: border-color 0.25s var(--ease); } .dial-trigger:hover, .dial-trigger:focus-visible { border-color: var(--gold); outline: none; } .dial-code { font-weight: 600; } .dial-panel { position: absolute; top: calc(100% + 8px); left: 0; width: 260px; max-height: 320px; background: rgba(10, 10, 20, 0.97); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-card); backdrop-filter: blur(20px); overflow: hidden; z-index: 200; display: flex; flex-direction: column; } .dial-panel[hidden] { display: none; } .dial-search { margin: 10px; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: rgba(255,255,255,0.03); color: var(--ink); font-size: 0.85rem; } .dial-search:focus { outline: none; border-color: var(--gold); } .dial-list { list-style: none; margin: 0; padding: 0 6px 10px; overflow-y: auto; } .dial-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.85rem; color: var(--ink-dim); text-align: left; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .dial-option:hover, .dial-option:focus-visible { background: rgba(255,255,255,0.06); color: var(--ink); } .dial-option-code { margin-left: auto; color: var(--ink-faint); font-size: 0.8rem; } .tel-input-group input { flex: 1; min-width: 0; } /* Sélecteur de pays custom (remplace le d'origine reste dans le DOM, invisible, pour que tout le reste du code (verrouillage, valeur, etc.) continue de fonctionner sans changement. */ .country-select { position: relative; } .country-select-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .country-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; padding: 0.85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: rgba(255,255,255,0.03); color: var(--ink); font-size: 0.95rem; text-align: left; transition: border-color 0.25s var(--ease), background 0.25s var(--ease); } .country-select-trigger:hover, .country-select-trigger:focus-visible { border-color: var(--gold); outline: none; } .country-select-trigger svg { flex-shrink: 0; color: var(--ink-faint); transition: transform 0.2s var(--ease); } .country-select-trigger[aria-expanded="true"] svg { transform: rotate(180deg); } .country-select-trigger.is-locked { color: var(--ink-dim); background: rgba(245, 185, 66, 0.06); border-color: rgba(245, 185, 66, 0.3); cursor: not-allowed; } .country-select-panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 300px; background: rgba(10, 10, 20, 0.97); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-card); backdrop-filter: blur(20px); overflow: hidden; z-index: 200; display: flex; flex-direction: column; } .country-select-panel[hidden] { display: none; } .country-select-search { margin: 10px; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: rgba(255,255,255,0.03); color: var(--ink); font-size: 0.85rem; } .country-select-search:focus { outline: none; border-color: var(--gold); } .country-select-list { list-style: none; margin: 0; padding: 0 6px 10px; overflow-y: auto; } .country-select-option { display: block; width: 100%; padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.87rem; color: var(--ink-dim); text-align: left; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .country-select-option:hover, .country-select-option:focus-visible { background: rgba(255,255,255,0.06); color: var(--ink); } .country-select-option.is-active { color: var(--gold); background: rgba(245, 185, 66, 0.08); } .address-autocomplete { position: relative; } .address-suggestions { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 150; list-style: none; margin: 0; padding: 6px; background: rgba(10, 10, 20, 0.97); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-card); backdrop-filter: blur(20px); max-height: 260px; overflow-y: auto; } .address-suggestions[hidden] { display: none; } .address-suggestion { display: block; width: 100%; padding: 0.6rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.86rem; color: var(--ink-dim); text-align: left; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .address-suggestion:hover, .address-suggestion:focus-visible { background: rgba(255,255,255,0.06); color: var(--ink); } .billing-toggle-row { display: flex; align-items: center; gap: 0.7rem; margin-top: var(--space-5); } .billing-toggle-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold); } .billing-toggle-row label { font-size: 0.9rem; color: var(--ink-dim); } .billing-fields { margin-top: var(--space-4); } .billing-fields[hidden] { display: none; } .pro-toggle-row { display: flex; align-items: center; gap: 0.7rem; margin-top: var(--space-5); } .pro-toggle-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--gold); } .pro-toggle-row label { font-size: 0.9rem; color: var(--ink-dim); } .buyer-tabs { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--line); } .buyer-tab { /* Sans `min-width: 0`, le minimum automatique d'un élément flex est son min-content : « Privatperson / Unternehmen » débordait de la carte de 17 px à 320 px. */ flex: 1; min-width: 0; padding: 0.85rem 1rem; font-size: 0.9rem; font-weight: 600; color: var(--ink-faint); background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); } .buyer-tab:hover { color: var(--ink-dim); } .buyer-tab.is-active { color: var(--gold); border-bottom-color: var(--gold); } .pro-choice-label { font-size: 0.85rem; color: var(--ink-dim); margin-bottom: 0.6rem; } .pro-choice-row { display: flex; flex-wrap: wrap; gap: 0.6rem; } .pro-choice { display: flex; align-items: center; gap: 0.55rem; flex: 1; min-width: 200px; padding: 0.75rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: rgba(255,255,255,0.03); cursor: pointer; font-size: 0.88rem; color: var(--ink-dim); transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease); } .pro-choice:has(input:checked) { border-color: var(--gold); background: rgba(245, 185, 66, 0.08); color: var(--ink); } .pro-choice input[type="radio"] { width: 16px; height: 16px; accent-color: var(--gold); flex-shrink: 0; } .pro-choice em { font-style: normal; color: var(--ink-faint); font-size: 0.82rem; } .pro-fields { margin-top: var(--space-4); } .pro-fields[hidden] { display: none; } .field[hidden] { display: none; } .form-grid[hidden] { display: none; } .vat-verify-row { display: flex; gap: 0.6rem; align-items: flex-start; } .vat-verify-row .field { flex: 1; } .vat-status { margin-top: var(--space-3); font-size: 0.85rem; padding: 0.7rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--line); } .vat-status[hidden] { display: none; } .vat-status.is-pending { color: var(--ink-dim); background: rgba(255,255,255,0.03); } .vat-status.is-error { color: #ffb4b4; border-color: rgba(255, 120, 120, 0.4); background: rgba(255, 120, 120, 0.08); } .vat-status.is-success { color: #8ee6b0; border-color: rgba(120, 255, 170, 0.35); background: rgba(120, 255, 170, 0.08); } .field input.is-locked, .field select.is-locked { color: var(--ink-dim); background: rgba(245, 185, 66, 0.06); border-color: rgba(245, 185, 66, 0.3); cursor: not-allowed; opacity: 1; -webkit-text-fill-color: var(--ink-dim); } .payment-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: var(--space-5); } .payment-logo { display: flex; align-items: center; justify-content: center; height: 30px; min-width: 46px; padding: 0 0.6rem; border-radius: 6px; background: #ffffff; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 1px 2px rgba(0,0,0,0.12); } .payment-logo svg { height: 13px; width: auto; display: block; } .payment-secure-note { display: flex; align-items: center; gap: 0.5rem; margin-top: var(--space-4); font-size: 0.8rem; color: var(--ink-faint); } .payment-secure-note svg { width: 14px; height: 14px; flex-shrink: 0; } .payment-methods { display: flex; flex-wrap: wrap; gap: var(--space-3); } .payment-option { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.2rem; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: rgba(255,255,255,0.02); color: var(--ink-dim); font-size: 0.92rem; font-weight: 600; transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease); } .payment-option svg { width: 22px; height: 22px; flex-shrink: 0; } .payment-option:hover { border-color: var(--gold); color: var(--ink); } .payment-option.is-selected { border-color: var(--gold); background: rgba(245, 185, 66, 0.1); color: var(--ink); } .payment-option-apple svg { color: var(--ink); } .payment-card-fields { margin-top: var(--space-5); transition: opacity 0.2s var(--ease); } .payment-card-fields[hidden] { display: none; } .payment-redirect-note { margin-top: var(--space-5); font-size: 0.9rem; color: var(--ink-dim); background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); } .payment-redirect-note[hidden] { display: none; } .checkout-line { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.65rem 0; border-top: 1px solid var(--line); margin-top: var(--space-3); } .checkout-line span:first-child { font-size: 0.74rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; } .checkout-line span:last-child { font-size: 0.9rem; color: var(--ink); } /* ---------- FAQ / Accordion ---------- */ .accordion { border-top: 1px solid var(--line); } .accordion-item { border-bottom: 1px solid var(--line); } .accordion-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; } .accordion-trigger .plus { width: 22px; height: 22px; position: relative; flex-shrink: 0; } .accordion-trigger .plus::before, .accordion-trigger .plus::after { content: ""; position: absolute; background: var(--gold); border-radius: 2px; transition: transform 0.3s var(--ease); } .accordion-trigger .plus::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); } .accordion-trigger .plus::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); } .accordion-item.is-open .plus::after { transform: translateX(-50%) rotate(90deg); opacity: 0; } .accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); } .accordion-panel-inner { padding-bottom: var(--space-5); color: var(--ink-dim); max-width: 66ch; } .accordion-item.is-open .accordion-panel { max-height: 600px; } /* ---------- CTA banner ---------- */ .cta-banner { position: relative; border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); text-align: center; overflow: hidden; border: 1px solid var(--line-strong); background-color: rgba(6, 6, 15, 0.55); background-image: radial-gradient(circle at 50% 0%, rgba(154,107,255,0.18), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .cta-banner h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); max-width: 22ch; margin-inline: auto; } .cta-banner p { margin-top: var(--space-4); color: var(--ink-dim); max-width: 50ch; margin-inline: auto; } .cta-banner .hero-cta { margin-top: var(--space-6); } /* ---------- Steps / process ---------- */ .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); counter-reset: step; } @media (max-width: 980px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .steps { grid-template-columns: minmax(0, 1fr); } } .step { counter-increment: step; } .step .num { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); margin-bottom: var(--space-4); color: var(--gold); } .step h4 { font-size: 1.05rem; margin-bottom: var(--space-2); } .step p { color: var(--ink-dim); font-size: 0.92rem; } /* ---------- Forms ---------- */ .form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); } @media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } } .field { display: flex; flex-direction: column; gap: 0.5rem; } .field.full { grid-column: 1 / -1; } .field label { font-size: 0.85rem; color: var(--ink-dim); } .field label .req { color: var(--rose); } .field input, .field select, .field textarea { background: rgba(255,255,255,0.03); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0.85rem 1rem; color: var(--ink); transition: border-color 0.25s var(--ease), background 0.25s var(--ease); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,0.05); } .field textarea { resize: vertical; min-height: 120px; } /* Le menu déroulant natif d'un