/* ============================================================
DoraVPN — Refonte Alpine Light Edition
Palette : cream chaud + ink navy + rouge suisse + montagnes
Typo : Fraunces (serif éditorial) + Geist (sans) + Geist Mono
Style : éditorial suisse, boutons carrés, bordures fines,
illustrations vectorielles parallaxées.
============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");
:root {
/* Palette Alpine Light */
--bg: #f4f1e8; /* cream chaud */
--bg-2: #ebe5d7; /* cream profond */
--paper: #fbf9f3; /* page */
--ink: #1a1f2c; /* navy texte principal */
--ink-dim: #5a6273; /* texte secondaire */
--ink-mute: #8b91a0; /* discret */
--line: #d8d2c2; /* trait */
--line-2: #c2bba7; /* trait fort */
--accent: #c8311a; /* rouge suisse */
--accent-h: #a82514; /* rouge hover */
--alpine: #3d6e9c; /* bleu alpin */
--moss: #5e7a4a; /* vert forêt */
--gold: #c8954a; /* or */
--snow: #fbfaf7; /* neige */
--signal: #5e7a4a; /* succès (= moss) */
--warn: #c8954a; /* avert */
--error: #c8311a; /* erreur (= accent) */
/* Ciel (par défaut noon — surchargé en JS selon l'heure) */
--sky-top: #9cd4f0;
--sky-mid: #c2e2f0;
--sky-bot: #e0eef3;
/* Montagnes */
--mt-far: #b9b3d4; /* lavande lointain */
--mt-mid: #6e7eab; /* bleu-violet médian */
--mt-near: #4d6b48; /* vert sapin proche */
/* Lac */
--lk-top: #8ec4d8;
--lk-bot: #426a90;
/* Astre céleste (soleil / lune) */
--celest: radial-gradient(circle at 38% 38%, #fffef0, #fff3b0 38%, #ffd96a 62%, #f3b03c 88%);
--celest-glow: rgba(255, 230, 140, 0.55);
--sun-left: 58%;
--sun-top: 16%;
/* Étoiles / brume — variables pilotables */
--stars-opacity: 0;
--haze-opacity: 0.55;
/* Couleur du texte du hero — varie selon le moment du jour */
--hero-ink: #1a1f2c;
--hero-ink-dim: #5a6273;
--hero-ink-mute: #8b91a0;
/* Typo */
--font: "Geist", "Helvetica Neue", Arial, sans-serif;
--font-serif:"Fraunces", "Georgia", serif;
--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--max-w: 1280px;
--gutter: 32px;
--easing: cubic-bezier(0.2, 0.7, 0, 1);
/* Radius : 0 partout — style architecture suisse */
--radius: 0px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
margin: 0; padding: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
html { scroll-behavior: smooth; }
body { display: flex; flex-direction: column; min-height: 100vh; }
::selection { background: var(--accent); color: #fff; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
code, pre, .mono { font-family: var(--font-mono); }
.uc { text-transform: uppercase; letter-spacing: 0.12em; }
.serif{ font-family: var(--font-serif); }
.muted { color: var(--ink-dim); }
.discret { color: var(--ink-mute); }
/* ============================================================
CHECK BANNER — bandeau "Vous utilisez/n'utilisez pas DoraVPN"
============================================================ */
.check-banner {
position: relative; z-index: 31;
width: 100%;
background: var(--ink);
color: var(--paper);
font-family: var(--font-mono); font-size: 12px;
letter-spacing: 0.08em;
}
.check-banner-inner {
max-width: var(--max-w); margin: 0 auto;
padding: 8px var(--gutter);
display: flex; align-items: center; justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.check-banner .status {
display: inline-flex; align-items: center; gap: 8px;
font-weight: 500;
}
.check-banner .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--ink-mute);
}
.check-banner.using { background: linear-gradient(90deg, #2f7a55 0%, #1f5e3f 100%); }
.check-banner.using .dot { background: #88e0a6; box-shadow: 0 0 8px rgba(136, 224, 166, 0.6); }
.check-banner.notvpn { background: var(--ink); }
.check-banner.notvpn .dot { background: var(--accent); }
.check-banner.checking .dot { background: var(--ink-mute); animation: pulse 1s ease-in-out infinite; }
.check-banner.tor { background: linear-gradient(90deg, #6b3aa0 0%, #4a276f 100%); }
.check-banner.tor .dot { background: #c89df0; box-shadow: 0 0 8px rgba(200, 157, 240, 0.65); }
.check-banner .meta {
font-family: var(--font-mono); font-size: 11px;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.08em;
}
.check-banner .meta strong { color: var(--paper); }
.check-banner a.check-more {
color: var(--paper); text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.35);
text-underline-offset: 3px;
}
.check-banner a.check-more:hover { text-decoration-color: var(--paper); color: var(--paper); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (max-width: 720px) {
/* Bandeau check mobile : compact, 1 ligne, juste l'essentiel */
.check-banner .meta { display: none; }
.check-banner a.check-more { font-size: 10px; }
.check-banner-inner {
padding: 6px 14px;
gap: 10px;
flex-wrap: nowrap;
white-space: nowrap;
overflow: hidden;
}
.check-banner .status { font-size: 11px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.check-banner .status strong { font-weight: 600; }
}
/* ============================================================
TOPBAR
============================================================ */
.topbar {
position: sticky; top: 0; z-index: 30;
background: rgba(244, 241, 232, 0.86);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom: 1px solid rgba(216, 210, 194, 0.6);
}
.topbar-inner {
max-width: var(--max-w); margin: 0 auto;
padding: 14px var(--gutter);
display: grid; grid-template-columns: auto 1fr auto;
align-items: center; gap: 32px;
}
.brand {
display: flex; align-items: center; gap: 10px;
font-weight: 600; font-size: 16px; letter-spacing: -0.01em;
color: var(--ink); cursor: pointer; text-decoration: none;
}
.brand-tag {
font-family: var(--font-mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-mute);
margin-left: 6px; padding-left: 10px;
border-left: 1px solid var(--line-2);
}
.topbar-nav {
display: flex; gap: 0;
justify-content: center; align-items: stretch;
flex-wrap: wrap;
}
.topbar-nav a {
position: relative;
padding: 8px 18px 10px;
display: flex; flex-direction: column; align-items: center; gap: 1px;
color: var(--ink-dim);
text-decoration: none; cursor: pointer; line-height: 1.15;
transition: color 0.22s ease;
}
.topbar-nav a .lab {
font-size: 13.5px;
letter-spacing: -0.005em;
}
.topbar-nav a .sub {
display: block;
font-family: var(--font-mono);
font-size: 8.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-mute);
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 0.25s ease, max-height 0.25s ease, color 0.22s ease;
margin-top: 1px;
}
/* Subtle vertical separator between items (very light hairline) */
.topbar-nav a + a::before {
content: "";
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 1px; height: 18px;
background: rgba(58, 55, 49, 0.08);
}
/* Animated underline below the label — scales from 0 to 1 */
.topbar-nav a::after {
content: "";
position: absolute;
left: 18px; right: 18px; bottom: 0;
height: 1px;
background: var(--accent);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.topbar-nav a:hover { color: var(--ink); }
.topbar-nav a:hover::after { transform: scaleX(0.35); }
.topbar-nav a:hover .sub { opacity: 0.55; max-height: 14px; }
.topbar-nav a.active { color: var(--ink); }
.topbar-nav a.active::after { transform: scaleX(1); }
.topbar-nav a.active .sub {
opacity: 1;
max-height: 14px;
color: var(--accent);
}
.topbar-cta { display: flex; gap: 8px; align-items: center; }
/* Stripe Checkout — sélection durée + bouton paiement */
.pay-stripe-section { margin-top: 24px; }
.pay-stripe-plans {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin: 14px 0 12px;
}
.stripe-plan {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 14px 10px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 0;
cursor: pointer;
font-family: var(--font-sans);
transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.stripe-plan:hover { border-color: var(--ink); }
.stripe-plan.active {
border-color: var(--accent);
background: rgba(200, 49, 26, 0.06);
transform: scale(1.02);
}
.stripe-plan.active .stripe-plan-price { color: var(--accent); }
.stripe-plan-months {
font-family: var(--font-mono);
font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-dim);
}
.stripe-plan-price {
font-family: var(--font-serif, var(--font-sans));
font-size: 18px; font-weight: 500;
color: var(--ink);
}
.stripe-plan-bonus {
font-family: var(--font-mono);
font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em;
color: var(--signal); font-weight: 600;
margin-top: 2px;
}
/* Sélecteur de palier pour la génération de jeton (toutes méthodes hors Stripe). */
.paytier-block { margin: 16px 0 14px; }
.paytier-label {
font-family: var(--font-mono);
font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-mute); margin: 0 0 8px;
}
.paytier-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.paytier-plan {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 12px 8px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 0;
cursor: pointer;
font-family: var(--font-sans);
transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.paytier-plan:hover { border-color: var(--ink); }
.paytier-plan.active {
border-color: var(--accent);
background: rgba(200, 49, 26, 0.06);
transform: scale(1.02);
}
.paytier-plan.active .paytier-price { color: var(--accent); }
.paytier-months {
font-family: var(--font-mono);
font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-mute);
}
.paytier-price {
font-family: var(--font-serif, var(--font-sans));
font-size: 16px; font-weight: 500;
color: var(--ink);
}
.paytier-bonus {
font-family: var(--font-mono);
font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em;
color: var(--signal); font-weight: 600;
text-align: center; line-height: 1.2;
}
@media (max-width: 640px) {
.paytier-grid { grid-template-columns: repeat(2, 1fr); }
}
/* État « preuve soumise — en cours de validation » qui remplace le formulaire
de soumission après envoi (lecture rapide + apparence designée). */
.proof-success {
display: grid;
justify-items: center;
text-align: center;
gap: 10px;
padding: 24px 18px 18px;
animation: proofSuccessIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes proofSuccessIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.proof-success-badge {
width: 48px; height: 48px;
border-radius: 50%;
background: rgba(94, 122, 74, 0.14);
color: var(--signal, #5e7a4a);
display: flex; align-items: center; justify-content: center;
margin-bottom: 6px;
position: relative;
}
.proof-success-badge::before {
content: '';
position: absolute; inset: -4px;
border-radius: 50%;
border: 2px solid var(--signal, #5e7a4a);
opacity: 0.35;
animation: proofPulse 1.8s ease-out infinite;
}
@keyframes proofPulse {
0% { transform: scale(0.85); opacity: 0.55; }
70% { transform: scale(1.2); opacity: 0; }
100% { transform: scale(1.2); opacity: 0; }
}
.proof-success-title {
margin: 0;
font-size: 16px; font-weight: 600;
color: var(--ink);
}
.proof-success-line {
margin: 0;
font-size: 13.5px; line-height: 1.55;
color: var(--ink);
max-width: 460px;
}
.proof-success-meta {
margin: 4px 0 0;
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.06em;
word-break: break-all;
}
.proof-success-hint {
margin: 8px 0 0;
}
/* Bannière post-récupération dans le dashboard du compte cible.
Reste affichée jusqu'au clic explicite « J'ai compris ». */
.banner-recov {
background: rgba(94, 122, 74, 0.10);
border: 1px solid rgba(94, 122, 74, 0.50);
border-left: 3px solid var(--signal, #5e7a4a);
padding: 12px 14px;
}
.banner-recov-header {
font-weight: 700;
font-size: 13px;
color: var(--signal, #5e7a4a);
margin-bottom: 8px;
}
.banner-recov-line {
margin: 0 0 8px;
font-size: 12px;
line-height: 1.55;
color: var(--ink);
}
.banner-recov-warn {
margin: 8px 0 0;
padding: 8px 10px;
background: rgba(200, 149, 74, 0.10);
border-left: 2px solid var(--warn, #c8954a);
font-size: 11.5px;
line-height: 1.55;
color: var(--ink);
}
/* Cartes statut soumission de preuve (vue user dashboard). */
.proof-mine-pending { border-left: 3px solid var(--warn, #c8954a) !important; }
.proof-mine-approved { border-left: 3px solid var(--signal, #5e7a4a) !important; background: rgba(94,122,74,0.06) !important; }
.proof-mine-rejected { border-left: 3px solid var(--accent, #c8311a) !important; background: rgba(200,49,26,0.04) !important; }
/* Bloc alternatif sur l'écran de connexion : créer un nouveau compte. */
.login-alt {
margin-top: 24px;
padding-top: 4px;
}
.login-alt-divider {
display: flex; align-items: center; gap: 14px;
margin-bottom: 14px;
font-family: var(--font-mono);
font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em;
color: var(--ink-mute);
}
.login-alt-divider::before,
.login-alt-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--line);
}
.login-alt-lead {
margin: 0 0 10px;
font-size: 13px;
color: var(--ink);
text-align: center;
}
/* Sélecteur de montant payé sur les formulaires de récupération. */
.recover-amount {
display: flex; flex-direction: column; gap: 4px;
margin-top: 8px;
}
.recover-amount label {
font-family: var(--font-mono);
font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-mute);
}
.recover-amount select {
font-family: var(--font-sans);
font-size: 13px;
padding: 9px 10px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 0;
color: var(--ink);
cursor: pointer;
}
.recover-amount select:hover, .recover-amount select:focus {
border-color: var(--ink);
outline: none;
}
/* ============================================================
REFERRALS / Cooptation P2P
============================================================ */
.hero-referral {
margin-top: 20px; font-size: 13px;
display: flex; flex-direction: column; align-items: flex-start;
gap: 10px;
}
.link-soft {
background: none; border: 0; padding: 0; cursor: pointer;
color: var(--hero-ink-mute, #c8c8c8);
text-decoration: underline; text-underline-offset: 3px;
font-family: inherit; font-size: 13px;
}
.link-soft:hover { color: var(--hero-ink, #fff); }
/* Bouton parrainage dans le hero — pastille sombre voyante, lisible sur n'importe quel fond */
.hero-referral .link-soft#hero-ref-toggle {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px;
background: rgba(20, 28, 40, 0.78);
border: 1px solid #ffb86b;
color: #fff;
text-decoration: none;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
text-transform: uppercase; letter-spacing: 0.1em;
border-radius: 999px;
box-shadow: 0 4px 14px rgba(20, 28, 40, 0.18);
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}
.hero-referral .link-soft#hero-ref-toggle .ref-bonus {
color: #ffb86b;
font-weight: 700;
}
.hero-referral .link-soft#hero-ref-toggle::before {
content: "🎁";
font-size: 14px;
filter: none;
}
.hero-referral .link-soft#hero-ref-toggle:hover {
background: #ffb86b;
border-color: #ffb86b;
color: #1a1d23;
transform: translateY(-1px);
}
.hero-referral .link-soft#hero-ref-toggle:hover .ref-bonus { color: #1a1d23; }
.hero-referral .link-soft#hero-ref-toggle.applied {
background: #2f7a55;
border-color: #2f7a55;
color: #fff;
}
.hero-referral .link-soft#hero-ref-toggle.applied::before {
content: "✓";
}
.hero-referral .link-soft#hero-ref-toggle.applied .ref-bonus { color: #fff; }
.hero-ref-input-wrap {
display: flex; align-items: center; gap: 10px;
margin-top: 10px; max-width: 360px;
}
.hero-ref-input {
flex: 1; padding: 10px 14px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-family: var(--font-mono); font-size: 14px;
letter-spacing: 0.06em;
border-radius: 6px;
}
.hero-ref-input:focus { outline: none; border-color: var(--accent); }
.hero-ref-status {
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.10em;
color: var(--hero-ink-mute, #c8c8c8);
white-space: nowrap;
}
.hero-ref-status.ok { color: #6ee08a; }
.hero-ref-status.bad { color: #ff8466; }
.ref-stats {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 12px; margin: 20px 0 24px;
}
.ref-stat {
background: var(--paper, #fff);
border: 1px solid var(--line);
border-radius: 8px;
padding: 14px 16px;
display: flex; flex-direction: column; gap: 4px;
}
.ref-stat-label {
font-family: var(--font-mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-mute);
}
.ref-stat-value {
font-size: 24px; font-weight: 600; color: var(--ink);
font-variant-numeric: tabular-nums;
}
.ref-stat-highlight { border-color: var(--signal); background: rgba(35,134,54,0.04); }
.ref-stat-highlight .ref-stat-value { color: var(--signal); }
.ref-actions { margin: 16px 0; }
.ref-new-code {
margin: 16px 0;
padding: 20px;
background: rgba(35,134,54,0.06);
border: 1px dashed var(--signal);
border-radius: 8px;
text-align: center;
}
.ref-code-display {
font-family: var(--font-mono); font-size: 28px;
letter-spacing: 0.15em; color: var(--signal);
margin: 12px 0 16px;
word-break: break-all;
}
.ref-table-wrap { margin-top: 16px; }
.ref-table { width: 100%; border-collapse: collapse; }
.ref-table th, .ref-table td {
text-align: left; padding: 10px 12px;
border-bottom: 1px solid var(--line);
}
.ref-table th {
font-family: var(--font-mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-mute); font-weight: 500;
}
.ref-table td code {
font-family: var(--font-mono); font-size: 13px;
background: var(--bg-2); padding: 3px 8px; border-radius: 4px;
}
.ref-status {
display: inline-block; padding: 3px 8px; border-radius: 999px;
font-family: var(--font-mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.10em;
border: 1px solid var(--line);
}
.ref-status-pen { color: var(--ink-mute); }
.ref-status-used{ color: #b8860b; border-color: #b8860b; }
.ref-status-rew { color: var(--signal); border-color: var(--signal); background: rgba(35,134,54,0.08); }
.ref-status-exp { color: var(--accent); border-color: var(--accent); }
@media (max-width: 720px) {
.ref-stats { grid-template-columns: repeat(2, 1fr); }
.ref-code-display { font-size: 22px; }
}
.stripe-plan.active .stripe-plan-bonus { color: var(--accent); }
.btn-stripe-pay { margin-top: 10px; font-size: 16px; padding: 14px 20px; }
.btn-stripe-pay:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 540px) {
.pay-stripe-plans { grid-template-columns: repeat(2, 1fr); }
}
/* Bouton trigger globe + langue active (ouvre la modale) */
.lang-trigger {
display: inline-flex; align-items: center; gap: 6px;
background: transparent;
border: 1px solid var(--line-2);
padding: 6px 12px;
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-dim);
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.lang-trigger:hover { color: var(--ink); border-color: var(--ink); }
.lang-trigger svg { display: block; flex-shrink: 0; }
.lang-trigger-flag { font-size: 14px; line-height: 1; }
/* ============================================================
DVP DIALOG — alert / confirm / prompt modals
============================================================ */
.dvp-dialog {
position: fixed; inset: 0; z-index: 200;
background: rgba(20, 30, 45, 0.55);
backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
padding: 20px;
animation: dvpFade 180ms ease-out;
}
@keyframes dvpFade { from { opacity: 0; } to { opacity: 1; } }
.dvp-dialog.dvp-dialog-closing { animation: dvpFadeOut 120ms ease-in forwards; }
@keyframes dvpFadeOut { to { opacity: 0; } }
.dvp-dialog-card {
background: var(--paper, #fff);
border: 1px solid var(--line-2, #d4d8de);
max-width: 440px; width: 100%;
padding: 22px 24px;
box-shadow: 0 24px 56px rgba(20, 30, 45, 0.22);
animation: dvpRise 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
border-top: 3px solid var(--ink, #1a1d23);
}
@keyframes dvpRise { from { transform: translateY(8px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.dvp-dialog-card.dvp-tone-danger { border-top-color: #c0392b; }
.dvp-dialog-card.dvp-tone-success { border-top-color: var(--accent, #2c8a3f); }
.dvp-dialog-kicker {
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-mute, #6a7280); margin: 0 0 8px;
}
.dvp-dialog-msg {
font-size: 14.5px; line-height: 1.55; color: var(--ink, #1a1d23);
margin: 0 0 14px;
white-space: pre-line;
}
.dvp-dialog-msg code {
font-size: 12.5px; padding: 1px 5px;
background: var(--bg, #f5f6f7); border: 1px solid var(--line, #e3e5e8);
}
.dvp-dialog-input {
display: block; width: 100%;
margin: 0 0 14px;
padding: 9px 11px;
font-family: var(--font-mono, ui-monospace, Menlo, monospace);
font-size: 13.5px;
background: var(--bg, #f5f6f7);
border: 1px solid var(--line-2, #d4d8de);
color: var(--ink, #1a1d23);
outline: none;
transition: border-color 0.12s;
}
.dvp-dialog-input:focus { border-color: var(--ink, #1a1d23); }
.dvp-dialog-input[rows] { font-family: inherit; line-height: 1.5; resize: vertical; }
.dvp-dialog-actions {
display: flex; justify-content: flex-end; gap: 8px;
margin-top: 4px;
}
.dvp-dialog-actions .btn { min-width: 72px; }
/* Danger button if not already defined elsewhere */
.btn.btn-danger {
background: #c0392b; color: #fff; border-color: #c0392b;
}
.btn.btn-danger:hover { background: #a83224; border-color: #a83224; }
@media (max-width: 540px) {
.dvp-dialog { padding: 14px; }
.dvp-dialog-card { padding: 18px 18px; }
}
/* Modale sélecteur de langue */
.lang-modal[hidden] { display: none !important; }
.lang-modal {
position: fixed; inset: 0; z-index: 100;
background: rgba(20, 30, 45, 0.55);
backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
padding: 20px;
animation: lmFade 180ms ease-out;
}
@keyframes lmFade { from { opacity: 0; } to { opacity: 1; } }
.lang-modal-card {
background: var(--paper);
border: 1px solid var(--line-2);
max-width: 380px; width: 100%;
padding: 24px;
box-shadow: 0 30px 64px rgba(20, 30, 45, 0.2);
animation: lmRise 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes lmRise { from { transform: translateY(8px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.lang-modal-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 12px;
}
.lang-modal-close {
background: transparent; border: 0; cursor: pointer;
font-size: 24px; line-height: 1; color: var(--ink-mute);
padding: 0 4px;
}
.lang-modal-close:hover { color: var(--ink); }
.lang-modal-list {
list-style: none; padding: 0; margin: 0;
}
.lang-modal-list li {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
cursor: pointer;
border: 1px solid transparent;
transition: background 0.12s, border-color 0.12s;
}
.lang-modal-list li:hover { background: var(--bg); }
.lang-modal-list li.active {
border-color: var(--line-2);
background: var(--bg);
}
.lang-modal-list li.active::after {
content: "✓"; margin-left: auto;
color: var(--accent); font-weight: 700;
}
.lang-modal-list .flag { font-size: 22px; line-height: 1; }
.lang-modal-list .name {
font-size: 15px; font-weight: 500; color: var(--ink);
}
.lang-modal-list .native {
font-family: var(--font-mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-mute); margin-left: auto;
}
.lang-modal-list li.active .native { color: var(--accent); }
/* ============================================================
BOUTONS — carrés, à la suisse
============================================================ */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px;
font: inherit; font-family: var(--font); font-weight: 500;
font-size: 14px; letter-spacing: -0.005em;
padding: 11px 18px;
border: 1px solid transparent;
background: transparent;
color: var(--ink);
cursor: pointer;
border-radius: 0;
transition: transform 0.15s var(--easing), background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.2s;
text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-accent {
background: var(--accent); color: #fff;
}
.btn-accent:hover { background: var(--accent-h); color: #fff; box-shadow: 0 6px 18px rgba(200, 49, 26, 0.22); }
.btn-ink {
background: var(--ink); color: var(--paper);
}
.btn-ink:hover { background: #000; color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.btn-ghost {
background: transparent; color: var(--ink);
border-color: var(--line-2);
}
.btn-ghost:hover { border-color: var(--ink); background: var(--paper); }
/* Bouton secondaire dans la même famille rouge — pour la hiérarchie lisible côté hero */
.btn-accent-soft {
background: var(--paper); color: var(--accent);
border: 1px solid var(--accent);
font-weight: 500;
}
.btn-accent-soft:hover { background: rgba(200, 49, 26, 0.08); color: var(--accent); }
.btn-primary { /* alias historique → variante principale rouge */
background: var(--accent); color: #fff;
}
.btn-primary:hover:not(:disabled) {
background: var(--accent-h); color: #fff;
box-shadow: 0 6px 18px rgba(200, 49, 26, 0.22);
}
.btn-primary:disabled { background: var(--line-2); color: #fff; }
.btn-danger { color: var(--accent); border-color: var(--line-2); background: transparent; }
.btn-danger:hover { border-color: var(--accent); background: rgba(200, 49, 26, 0.06); }
.btn-success { color: var(--signal); border-color: var(--line-2); background: transparent; }
.btn-success:hover { border-color: var(--signal); background: rgba(94, 122, 74, 0.06); }
.btn-sm { padding: 8px 12px; font-size: 12px; }
.btn-block { width: 100%; }
.btn .spinner {
display: inline-block; width: 12px; height: 12px;
border: 2px solid currentColor; border-right-color: transparent;
border-radius: 50%;
animation: spin 0.65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn.is-loading { pointer-events: none; opacity: 0.85; }
/* ============================================================
LAYOUT
============================================================ */
main { width: 100%; flex: 1; }
.container {
width: 100%; max-width: var(--max-w); margin: 0 auto;
padding: 64px var(--gutter);
}
/* Chaque écran (sauf welcome) est wrappé par défaut */
.screen {
width: 100%; max-width: var(--max-w); margin: 0 auto;
padding: 64px var(--gutter);
animation: slideUp 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Welcome casse le wrapper et étend ses sous-sections en full-width */
.screen.full-width { max-width: none; padding: 0; }
.screen.full-width > .container,
.screen.full-width > .section { display: block; }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.section { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 100px var(--gutter); }
.section-divider { border-top: 1px solid var(--line); }
.section-bg-2 { background: var(--bg-2); }
/* ============================================================
TYPO
============================================================ */
h1, h2, h3, h4 { margin: 0 0 16px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(48px, 7vw, 120px); letter-spacing: -0.035em; line-height: 0.94; }
h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(34px, 4.6vw, 64px); letter-spacing: -0.025em; line-height: 1.05; }
h3 { font-family: var(--font-serif); font-weight: 500; font-size: 24px; letter-spacing: -0.015em; }
h4 { font-size: 16px; }
.it { font-style: italic; font-weight: 400; }
.accent { color: var(--accent); }
.dim { color: var(--ink-dim); }
p { margin: 0 0 16px; color: var(--ink-dim); line-height: 1.55; }
.lead { font-size: 19px; color: var(--ink); max-width: 62ch; }
.lead em { font-family: var(--font-serif); font-style: italic; color: var(--accent); }
.small { font-size: 13px; }
.error { color: var(--error); font-size: 14px; }
/* ============================================================
EYEBROW (kicker numéroté style suisse)
============================================================ */
.eyebrow, .kicker {
display: inline-flex; align-items: center; gap: 12px;
margin: 0 0 18px;
font-family: var(--font-mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.16em;
color: var(--ink-dim);
}
.eyebrow .sq, .kicker::before {
content: ""; width: 8px; height: 8px; background: var(--accent);
display: inline-block; flex-shrink: 0;
}
.eyebrow .idx, .kicker .idx { color: var(--ink-mute); }
/* ============================================================
HERO ALPINE — illustration animée
============================================================ */
.hero {
position: relative;
/* Full-bleed : sort de tout conteneur centré (ex: .screen 1280px max).
Si le parent fait déjà 100vw, ces calculs résolvent à 0 → no-op. */
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
min-height: 720px; height: 100vh; max-height: 920px;
overflow: hidden;
background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 38%, var(--sky-bot) 78%, var(--lk-top) 100%);
/* Pas de border : on enchaîne directement sur le bandeau trust-strip */
transition: background 1.6s ease;
}
/* Astre céleste (soleil le jour / lune la nuit) */
.hero-sun {
position: absolute; left: var(--sun-left); top: var(--sun-top);
width: 110px; height: 110px; border-radius: 50%;
background: var(--celest);
box-shadow: 0 0 80px var(--celest-glow), 0 0 160px rgba(255, 180, 120, 0.18);
animation: sunBob 12s ease-in-out infinite;
pointer-events: none; z-index: 1;
transition: background 1.6s ease, box-shadow 1.6s ease, left 1.6s ease, top 1.6s ease;
}
@keyframes sunBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* Nuages — conteneur transparent, le SVG dedans dessine les ellipses chevauchées
(anciens styles bg + border-radius + ::before/::after retirés : ils faisaient
un double rendu superposé au SVG des nouveaux nuages randomisés) */
.cloud {
position: absolute;
pointer-events: none; z-index: 1;
filter: drop-shadow(0 6px 14px rgba(40, 60, 90, 0.08));
will-change: transform;
}
.cloud svg {
width: 100%; height: 100%; display: block; overflow: visible;
}
@keyframes driftSlow { 0% { transform: translateX(0); } 100% { transform: translateX(125vw); } }
/* Drapeau suisse planté */
.hero-flag {
position: absolute; left: 57.3%; top: 18%;
width: 30px; height: 40px; pointer-events: none; z-index: 4;
transform: translate(-50%, -100%);
}
.hero-flag .pole {
position: absolute; left: 50%; top: 0; width: 1.5px; height: 40px;
background: #3a3a48; transform: translateX(-50%);
}
.hero-flag .cloth {
position: absolute; left: calc(50% + 1px); top: 2px;
width: 15px; height: 11px; background: var(--accent);
transform-origin: left center;
animation: flagWave 2.6s ease-in-out infinite;
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12);
}
.hero-flag .cloth::before, .hero-flag .cloth::after { content: ""; position: absolute; background: #fff; }
.hero-flag .cloth::before { left: 6px; top: 2px; width: 3px; height: 7px; }
.hero-flag .cloth::after { left: 4px; top: 4px; width: 7px; height: 3px; }
@keyframes flagWave {
0%, 100% { transform: skewX(0deg) scaleX(1); }
50% { transform: skewX(-14deg) scaleX(0.92); }
}
/* Brume horizon — opacity pilotée par --haze-opacity selon l'heure */
.hero-haze {
position: absolute; left: 0; right: 0; bottom: 38%;
height: 120px; pointer-events: none; z-index: 2;
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18) 60%, rgba(255, 255, 255, 0.32));
mix-blend-mode: screen;
opacity: var(--haze-opacity, 0.55);
transition: opacity 1.6s ease;
}
/* Couches montagnes (les fills SVG sont des var() — transitions douces) */
.mt { position: absolute; left: 0; right: 0; width: 100%; pointer-events: none; }
.mt svg { width: 100%; height: 100%; display: block; }
.mt svg path { transition: fill 1.6s ease; }
.mt-far { bottom: 38%; height: 30%; z-index: 2; }
.mt-mid { bottom: 32%; height: 36%; z-index: 3; }
.mt-near { bottom: 30%; height: 24%; z-index: 4; }
/* Étoiles (visibles via --stars-opacity, contrôlable JS selon l'heure) */
.hero-stars {
position: absolute; inset: 0 0 35% 0; pointer-events: none; z-index: 1;
opacity: var(--stars-opacity, 0);
transition: opacity 1.6s ease;
background-image:
radial-gradient(1px 1px at 12% 18%, #fff, transparent),
radial-gradient(1px 1px at 26% 32%, #fff, transparent),
radial-gradient(1.5px 1.5px at 38% 12%, #fff, transparent),
radial-gradient(1px 1px at 52% 28%, #fff, transparent),
radial-gradient(1px 1px at 64% 8%, #fff, transparent),
radial-gradient(1.5px 1.5px at 76% 22%, #fff, transparent),
radial-gradient(1px 1px at 88% 14%, #fff, transparent),
radial-gradient(1px 1px at 18% 8%, #fff, transparent),
radial-gradient(1px 1px at 44% 38%, #fff, transparent),
radial-gradient(1.5px 1.5px at 8% 28%, #fff, transparent),
radial-gradient(1px 1px at 92% 30%, #fff, transparent),
radial-gradient(1px 1px at 32% 22%, #fff, transparent),
radial-gradient(1.5px 1.5px at 70% 34%, #fff, transparent);
animation: starsTwinkle 6s ease-in-out infinite;
}
@keyframes starsTwinkle { 0%, 100% { filter: brightness(0.85); } 50% { filter: brightness(1.15); } }
/* Oiseaux en formation V */
.birds {
position: absolute; top: 24%; right: -200px;
width: 200px; height: 60px; pointer-events: none; z-index: 3;
animation: birdsFly 28s linear infinite; animation-delay: 6s;
}
@keyframes birdsFly {
0% { transform: translateX(0) translateY(0); }
50% { transform: translateX(-60vw) translateY(-30px); }
100% { transform: translateX(-120vw) translateY(0); }
}
.bird { position: absolute; width: 22px; height: 10px; }
.bird svg { width: 100%; height: 100%; display: block; }
.bird path { animation: birdFlap 0.42s ease-in-out infinite; transform-origin: center; }
.bird-1 { top: 10px; left: 0; }
.bird-2 { top: 24px; left: 32px; } .bird-2 path { animation-delay: 0.08s; }
.bird-3 { top: 38px; left: 64px; } .bird-3 path { animation-delay: 0.16s; }
.bird-4 { top: 24px; left: 96px; } .bird-4 path { animation-delay: 0.08s; }
.bird-5 { top: 10px; left: 128px; }
@keyframes birdFlap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.35); } }
/* Grain — texture subtile sur le hero */
.hero-grain {
position: absolute; inset: 0; pointer-events: none; z-index: 7;
opacity: 0.22; mix-blend-mode: multiply;
background-image:
radial-gradient(circle at 20% 30%, rgba(0, 0, 0, 0.08), transparent 40%),
radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.05), transparent 40%);
}
/* Reflet des montagnes dans le lac (montagne inversée verticalement) */
.hero-lake .reflection {
position: absolute; top: 0; left: 0; right: 0; height: 60%;
transform: scaleY(-1); transform-origin: top;
opacity: 0.28; filter: blur(2px);
pointer-events: none;
}
.hero-lake .reflection svg { width: 100%; height: 100%; }
/* Bateaux à voile qui traversent le lac */
.boat {
position: absolute; bottom: 8%;
width: 46px; height: 38px;
z-index: 6; pointer-events: none;
will-change: transform;
}
.boat svg { width: 100%; height: 100%; display: block;
filter: drop-shadow(0 3px 4px rgba(40, 60, 90, 0.18));
}
.boat-1 { animation: sailRight 70s linear infinite; }
.boat-2 { animation: sailLeft 90s linear infinite; bottom: 12%; transform: scale(0.7); }
.boat-3 { animation: sailRight 110s linear infinite; bottom: 5%; transform: scale(0.55); animation-delay: -35s; }
.boat .hull { animation: boatBob 3.2s ease-in-out infinite; transform-origin: center bottom; }
.boat-2 .hull { animation-delay: -1s; }
.boat-3 .hull { animation-delay: -2s; }
/* sailRight/sailLeft : on n'anime que la position, le scale/flip est sur .boat-inner */
@keyframes sailRight { 0% { left: -6%; } 100% { left: 106%; } }
@keyframes sailLeft { 0% { left: 106%; } 100% { left: -6%; } }
@keyframes boatBob {
0%, 100% { transform: translateY(0) rotate(-1.2deg); }
50% { transform: translateY(-2px) rotate(1.2deg); }
}
/* ============================================================
EASTER EGG — Bunkers suisses + tir aux oiseaux
============================================================ */
/* Curseur cible sur tout le hero (sauf textes et UI) */
.hero {
cursor: url("data:image/svg+xml;utf8,") 15 15, crosshair;
}
.hero .hero-text, .hero .scroll-tip, .hero .hit-counter, .hero .hit-toast { cursor: default; }
.hero .hero-text button, .hero .hero-text .btn, .hero .hero-text a { cursor: pointer; }
/* Bunker — caisson béton + portes acier */
.bunker {
position: absolute;
width: 44px; height: 28px;
z-index: 3;
pointer-events: none;
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}
/* Plateforme béton qui ancre le bunker dans la pente */
.bunker::after {
content: ""; position: absolute;
left: -10px; right: -10px;
top: 100%; height: 10px;
background: linear-gradient(180deg, #7a7164 0%, #4a4338 50%, #241f17 100%);
border: 1px solid rgba(0, 0, 0, 0.55); border-top: none;
clip-path: polygon(7% 0%, 93% 0%, 100% 100%, 0% 100%);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}
.bunker::before {
content: ""; position: absolute;
left: -18px; right: -18px;
top: calc(100% + 9px); height: 5px;
background: radial-gradient(ellipse at center top, rgba(40, 35, 25, 0.35), transparent 70%);
pointer-events: none;
}
.bunker-frame {
position: relative; width: 100%; height: 100%;
background: #1f1c18;
border: 1.5px solid rgba(0, 0, 0, 0.5);
overflow: hidden;
box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.bunker-frame::before {
content: ""; position: absolute; inset: -3px;
background: linear-gradient(180deg, #9a9384, #6b6558);
z-index: -1;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.bunker-door {
position: absolute; top: 0; width: 51%; height: 100%;
background: linear-gradient(180deg, #6c6d68, #3f4037);
border-right: 1px solid rgba(0, 0, 0, 0.5);
transition: transform 1s cubic-bezier(0.6, 0, 0.3, 1);
z-index: 3;
}
.door-r {
left: auto; right: 0;
border-right: none; border-left: 1px solid rgba(0, 0, 0, 0.5);
background: linear-gradient(180deg, #5a5b56, #37382f);
}
.bunker-door::before, .bunker-door::after {
content: ""; position: absolute; width: 3px; height: 3px;
background: #1a1a1a; border-radius: 50%;
box-shadow: 0 6px 0 #1a1a1a, 0 12px 0 #1a1a1a, 0 18px 0 #1a1a1a;
top: 4px;
}
.bunker-door::before { left: 4px; }
.bunker-door::after { right: 4px; }
.door-l.open { transform: translateX(-96%); }
.door-r.open { transform: translateX(96%); }
.bunker-interior {
position: absolute; inset: 2px;
display: flex; align-items: flex-end; justify-content: center;
overflow: hidden;
background: radial-gradient(ellipse at center top, rgba(255, 180, 80, 0.35), transparent 60%), #0a0907;
}
.soldier {
transform: translateY(120%);
transition: transform 1s cubic-bezier(0.2, 0.7, 0, 1);
width: 24px; height: 30px;
position: relative;
}
.soldier.up { transform: translateY(15%); animation: peek 3s ease-in-out infinite; }
@keyframes peek {
0%, 100% { transform: translateY(15%) rotate(-2deg); }
50% { transform: translateY(12%) rotate(2deg); }
}
/* Oiseaux cliquables — pointer-events enabled */
.bird { pointer-events: auto; transition: filter 0.15s; }
.bird:hover { filter: drop-shadow(0 0 4px rgba(200, 49, 26, 0.6)); }
.bird.shot {
animation: birdFall 1.8s cubic-bezier(0.5, 0, 0.7, 1) forwards !important;
pointer-events: none;
}
.bird.shot path { animation: none !important; }
@keyframes birdFall {
0% { transform: translateY(0) rotate(0); opacity: 1; }
8% { transform: translateY(6px) rotate(-20deg); }
100% { transform: translateY(85vh) rotate(900deg); opacity: 0; }
}
/* Flash visuel au point de clic */
.shot-flash {
position: fixed;
width: 30px; height: 30px; border-radius: 50%;
pointer-events: none; z-index: 14;
transform: translate(-50%, -50%) scale(0.3);
animation: flashOut 0.55s ease-out forwards;
}
.shot-flash.hit { background: radial-gradient(circle, rgba(255, 200, 90, 1) 0%, rgba(255, 120, 40, 0.65) 35%, rgba(255, 60, 20, 0.25) 60%, transparent 75%); }
.shot-flash.miss { background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 40%, transparent 70%); }
@keyframes flashOut {
0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}
/* Puff de fumée au canon */
.muzzle-puff {
position: fixed; width: 14px; height: 14px; border-radius: 50%;
pointer-events: none; z-index: 13;
background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(220, 220, 220, 0.5) 45%, transparent 75%);
filter: blur(0.6px);
transform: translate(-50%, -50%) scale(0.25);
animation: puffRise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
will-change: transform, opacity;
}
.muzzle-flash {
position: fixed; width: 18px; height: 18px; border-radius: 50%;
pointer-events: none; z-index: 13;
background: radial-gradient(circle, rgba(255, 230, 140, 1) 0%, rgba(255, 160, 40, 0.7) 40%, transparent 70%);
transform: translate(-50%, -50%) scale(0.2);
animation: muzzleFlash 0.18s ease-out forwards;
}
@keyframes puffRise {
0% { transform: translate(-50%, -50%) scale(0.25); opacity: 0; }
12% { transform: translate(-30%, -90%) scale(1); opacity: 1; }
55% { transform: translate(0, -180%) scale(2); opacity: 0.7; }
100% { transform: translate(30%, -300%) scale(3.4); opacity: 0; }
}
@keyframes muzzleFlash {
0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}
/* Compteur + toast forteresse */
.hit-counter {
position: absolute; bottom: 24px; right: 32px; z-index: 12;
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--hero-ink-dim);
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(8px);
border: 1px solid rgba(0, 0, 0, 0.08);
padding: 8px 14px;
display: flex; align-items: center; gap: 10px;
opacity: 0; transform: translateY(6px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.hit-counter.in { opacity: 1; transform: translateY(0); }
.hit-counter .sq { width: 6px; height: 6px; background: var(--accent); display: inline-block; }
.hit-toast {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.9);
font-family: var(--font-serif); font-style: italic;
font-size: clamp(22px, 2.4vw, 32px);
background: rgba(20, 20, 28, 0.78);
color: #fbf6ec; padding: 18px 32px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
opacity: 0; pointer-events: none;
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0, 1);
z-index: 14; max-width: 80%;
text-align: center; text-wrap: balance;
}
.hit-toast.in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hit-toast small {
display: block;
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase; font-style: normal;
color: #c8cee0; margin-top: 12px;
}
/* Boat-inner wrapper pour gérer scaleX(-1) sans tordre l'animation */
.boat-inner {
width: 100%; height: 100%;
display: block;
}
.boat-inner svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 4px rgba(40, 60, 90, 0.18)); }
.boat-inner .hull { animation: boatBob 3.2s ease-in-out infinite; transform-origin: center bottom; }
/* Lac */
.hero-lake {
position: absolute; left: 0; right: 0; bottom: 0;
height: 30%; z-index: 5;
background: linear-gradient(180deg, var(--lk-top) 0%, var(--lk-bot) 100%);
overflow: hidden;
}
.hero-lake::before {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 30%),
repeating-linear-gradient(180deg, transparent 0, transparent 14px, rgba(255, 255, 255, 0.06) 14px, rgba(255, 255, 255, 0.06) 15px);
}
.hero-lake::after {
content: ""; position: absolute; inset: 0;
background: repeating-linear-gradient(90deg,
transparent 0, transparent 80px,
rgba(255, 255, 255, 0.18) 80px, rgba(255, 255, 255, 0.18) 82px,
transparent 82px, transparent 200px);
animation: lakeShimmer 14s linear infinite;
opacity: 0.5; mix-blend-mode: overlay;
}
@keyframes lakeShimmer { 0% { transform: translateX(0); } 100% { transform: translateX(-200px); } }
/* Texte du hero — couleur var pilotée par l'heure (cream la nuit, ink le jour) */
.hero-text {
position: absolute; inset: 0; z-index: 10;
display: grid; grid-template-rows: auto auto auto 1fr;
padding: 72px var(--gutter) 0;
max-width: var(--max-w); margin: 0 auto;
color: var(--hero-ink);
transition: color 1.6s ease, opacity 0.2s ease;
}
.hero-eyebrow { margin-top: 0; margin-bottom: 28px; color: var(--hero-ink-dim); }
.hero-eyebrow span { color: inherit; }
.hero h1 {
font-family: var(--font-serif); font-weight: 400;
font-size: clamp(56px, 9vw, 152px); line-height: 0.92;
letter-spacing: -0.035em;
margin: 0 0 28px;
text-wrap: balance;
max-width: 1100px;
color: var(--hero-ink);
transition: color 1.6s ease;
}
.hero h1 .it { font-style: italic; font-weight: 400; }
.hero h1 .accent { color: var(--accent); }
.hero h1 .softer { color: var(--hero-ink-dim); transition: color 1.6s ease; }
.hero-sub {
display: flex; justify-content: space-between; align-items: flex-start;
padding-bottom: 0;
gap: 32px 48px; flex-wrap: wrap;
}
.hero-sub .lead { font-size: 19px; color: var(--hero-ink); max-width: 480px; margin: 0; transition: color 1.6s ease; }
.hero-sub .lead em { font-family: var(--font-serif); font-style: italic; color: var(--accent); }
.hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; row-gap: 12px; justify-content: flex-end; }
/* Colonne droite du hero : CTA en haut, pastille parrainage en dessous, alignées à droite */
.hero-actions {
display: flex; flex-direction: column;
align-items: flex-end;
gap: 14px;
}
.hero-actions .hero-referral { margin-top: 0; align-items: flex-end; }
@media (max-width: 720px) {
.hero-actions { align-items: stretch; }
.hero-actions .hero-referral { align-items: flex-start; }
}
/* Le scroll-tip suit aussi le hero-ink */
.scroll-tip { color: var(--hero-ink-mute); transition: color 1.6s ease; }
.scroll-tip .line { background: var(--hero-ink-mute); transition: background 1.6s ease; }
/* Scroll hint */
.scroll-tip {
position: absolute; bottom: 24px; left: 50%; z-index: 11;
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 10px;
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--ink-mute);
animation: scrollHint 2s ease-in-out infinite;
}
.scroll-tip .line { width: 1px; height: 36px; background: var(--ink-mute); }
@keyframes scrollHint {
0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.8; }
50% { transform: translateX(-50%) translateY(6px); opacity: 1; }
}
/* ============================================================
PILLIERS — 4 colonnes bordées
============================================================ */
.pillars {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
margin-top: 24px;
}
.pillar {
padding: 32px 28px; min-height: 240px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
/* Layout uniforme : num en haut → gap fixe → titre/desc alignés sous le num.
Plus de justify-content space-between qui éloignait les textes selon leur
longueur et créait un décalage visible entre cards. */
display: grid;
grid-template-rows: auto auto 1fr;
gap: 24px;
background: transparent;
transition: background 0.25s;
}
.pillar > div { align-self: start; }
.pillar:hover { background: var(--paper); }
.pillar .num {
font-family: var(--font-mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-mute);
}
.pillar:hover .num { color: var(--accent); }
.pillar h3 {
font-family: var(--font-serif); font-weight: 400; font-size: 26px;
letter-spacing: -0.015em; margin: 0 0 12px;
line-height: 1.0;
}
/* Pillars harmonisés : titre forcé sur 2 lignes, 2e en italique gris */
.pillar-title { display: flex; flex-direction: column; }
.pillar-title .line-1 { color: var(--ink); }
.pillar-title .line-2 {
font-style: italic; color: var(--ink-dim);
display: block; margin-top: 2px;
}
.pillar p { font-size: 14px; color: var(--ink-dim); margin: 0; line-height: 1.55; }
/* ============================================================
KEY-VALUE GRID (dashboard / admin)
============================================================ */
.kv-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
margin: 16px 0 32px;
}
.kv {
padding: 18px 22px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.kv .kv-label {
font-family: var(--font-mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-mute); margin: 0 0 8px;
}
.kv .kv-value {
font-size: 22px; font-weight: 500; letter-spacing: -0.015em;
margin: 0; color: var(--ink);
}
.kv .kv-value.signal { color: var(--signal); }
.kv .kv-value.warn { color: var(--warn); }
.kv .kv-value.muted { color: var(--ink-mute); }
.kv .kv-value.accent { color: var(--accent); }
/* ============================================================
ID CARD — bloc sombre style "passeport"
============================================================ */
.id-card {
position: relative;
background: linear-gradient(155deg, #131720 0%, #0c0f15 100%);
border: 1px solid var(--line-2);
padding: 32px;
aspect-ratio: 1.586 / 1;
max-width: 600px;
color: var(--paper);
}
.id-card .corner {
position: absolute; width: 12px; height: 12px;
border-color: rgba(255, 255, 255, 0.35); border-style: solid;
}
.id-card .corner.nw { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.id-card .corner.ne { top: 10px; right: 10px; border-width: 1px 1px 0 0; }
.id-card .corner.sw { bottom: 10px; left: 10px; border-width: 0 0 1px 1px; }
.id-card .corner.se { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }
.id-card-head {
display: flex; justify-content: space-between; align-items: flex-start;
}
.id-card-head .label {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin: 0;
}
.id-card-id {
font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.08em;
font-size: clamp(22px, 3.4vw, 38px);
margin: 48px 0 0;
user-select: text;
transition: filter 0.2s;
}
.id-card-id.blurred { filter: blur(12px); user-select: none; }
.id-card-foot {
display: flex; justify-content: space-between; align-items: flex-end;
margin-top: 32px;
}
.id-card-foot .meta {
font-family: var(--font-mono); font-size: 11px;
color: rgba(255, 255, 255, 0.7);
}
.id-card-foot .meta p { margin: 0; color: rgba(255, 255, 255, 0.7); }
.id-card-foot .meta p + p { margin-top: 4px; }
.id-card-foot .actions { display: flex; gap: 8px; }
.id-card .btn-ghost {
color: rgba(255, 255, 255, 0.85);
border-color: rgba(255, 255, 255, 0.25);
padding: 8px 12px; font-size: 11px;
}
.id-card .btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.05); }
/* ============================================================
CARDS / BORDERED PANELS
============================================================ */
.card, .info-card, .form-card, .pay-category, .empty-card,
.dash-sidebar, .pay-token-card, .claim-pane, .step,
.advanced-section, .compare-table-wrap, .spec-strip, details {
background: var(--paper);
border: 1px solid var(--line);
padding: 24px;
margin-bottom: 16px;
}
.info-card { padding: 18px 22px; }
.empty-card { padding: 16px 20px; }
/* Spec strip — marquee infinie (défilement horizontal continu) */
.spec-strip {
position: relative;
padding: 16px 0;
font-family: var(--font-mono); font-size: 12px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-dim);
background: var(--bg-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
overflow: hidden;
white-space: nowrap;
}
.spec-strip .marquee-track {
display: flex; gap: 36px;
width: max-content;
animation: specMarquee 38s linear infinite;
}
.spec-strip .marquee-track span {
display: inline-flex; align-items: center; gap: 14px;
white-space: nowrap;
}
.spec-strip .marquee-track span::after {
content: "·"; color: var(--line-2); margin-left: 22px;
}
.spec-strip .marquee-track span .dot {
width: 5px; height: 5px; background: var(--signal); border-radius: 50%;
display: inline-block;
}
@keyframes specMarquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.spec-strip .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; }
}
/* ============================================================
FORMULAIRES
============================================================ */
.field, label.field {
display: block;
margin: 14px 0;
color: var(--ink-dim);
font-size: 13px;
}
.field span, label > span {
display: block;
margin-bottom: 6px;
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--ink-dim);
}
input[type="text"], input:not([type]), input[type="email"], input[type="number"],
input[type="password"], textarea, select,
.text-input, .num-input {
display: block; width: 100%;
padding: 12px 14px;
font-family: var(--font); font-size: 15px;
color: var(--ink);
background: var(--snow);
border: 1px solid var(--line);
border-radius: 0;
outline: none;
transition: border-color 0.15s;
}
input.mono, .mono input { font-family: var(--font-mono); letter-spacing: 0.05em; }
input:focus, textarea:focus, select:focus, .text-input:focus, .num-input:focus {
border-color: var(--ink);
}
input.invalid { border-color: var(--error); }
input.match { border-color: var(--signal); }
/* ============================================================
INPUT IDENTIFIANT — élégant, slim, underline rouge animé
Appliqué à #id-input (login) et #claim-login-input (claim-result)
============================================================ */
.id-field {
position: relative;
display: block;
margin: 28px 0 6px;
}
.id-field::after {
content: "";
position: absolute;
left: 50%; bottom: -2px;
width: 0; height: 2px;
background: var(--accent);
transform: translateX(-50%);
transition: width 0.45s var(--easing-bouncy, cubic-bezier(0.34, 1.56, 0.64, 1));
pointer-events: none;
}
.id-field:focus-within::after { width: 100%; }
.id-field .id-input,
input.id-input {
display: block; width: 100%;
background: transparent;
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
padding: 14px 4px 12px;
font-family: var(--font-mono);
/* Réduit pour faire tenir 16 chiffres + 3 espaces (= 19 caractères)
dans la largeur du form-card 460px max. */
font-size: clamp(15px, 2.2vw, 20px);
letter-spacing: 0.18em;
font-weight: 400;
text-align: center;
color: var(--ink);
caret-color: var(--accent);
outline: none;
transition: border-color 0.2s, color 0.2s;
}
.id-field .id-input::placeholder,
input.id-input::placeholder {
color: var(--ink-mute);
letter-spacing: 0.18em;
font-weight: 300;
}
.id-field .id-input:disabled,
input.id-input:disabled {
color: var(--ink-mute);
cursor: not-allowed;
}
.id-field .id-input:focus,
input.id-input:focus {
border-bottom-color: transparent;
}
.id-field .id-input.match,
input.id-input.match {
color: var(--signal);
border-bottom-color: transparent;
}
.id-field:focus-within.match::after,
.id-field.match::after {
background: var(--signal); width: 100%;
}
.id-field .id-input.invalid,
input.id-input.invalid {
color: var(--error);
border-bottom-color: transparent;
}
.id-field.invalid::after {
background: var(--error); width: 100%;
}
/* Caption discrète sous l'input */
.id-field-hint {
margin: 8px 0 0;
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-mute);
text-align: center;
}
/* Screen login : carte centrée horizontalement, contenu aussi centré */
#screen-login {
display: flex; flex-direction: column; align-items: center; justify-content: center;
min-height: calc(100vh - 200px);
padding: 48px var(--gutter);
}
#screen-login .form-card {
max-width: 460px; width: 100%;
padding: 40px 40px 32px;
text-align: center;
margin: 0;
}
#screen-login .form-card h2 { font-size: clamp(26px, 3vw, 34px); margin: 4px 0 12px; }
#screen-login .form-card .muted { font-size: 14px; line-height: 1.5; }
#screen-login .form-card .kicker, #screen-login .form-card .eyebrow { justify-content: center; }
#screen-login .form-card form { text-align: center; }
#screen-login .form-card .form-close { text-align: left; }
/* ============================================================
CLAIM-ID DISPLAY — effet de génération slot-machine
Surcharge de l'existant pour le rendu en cells animées
============================================================ */
.claim-id-display.is-rolling {
filter: none !important;
user-select: none;
}
.claim-id-display .digit-cell {
display: inline-block;
min-width: 0.6em;
text-align: center;
font-variant-numeric: tabular-nums;
transition: transform 0.18s var(--easing-bouncy, cubic-bezier(0.34, 1.56, 0.64, 1)), color 0.2s;
will-change: transform;
}
.claim-id-display .digit-cell.spinning {
color: var(--accent);
text-shadow: 0 0 18px rgba(200, 49, 26, 0.45);
animation: digitSpin 0.1s linear infinite;
}
@keyframes digitSpin {
0% { transform: translateY(0); }
50% { transform: translateY(-2px); }
100% { transform: translateY(0); }
}
.claim-id-display .digit-cell.settled {
animation: digitSettle 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes digitSettle {
0% { transform: translateY(-8px) scale(1.18); color: var(--accent); text-shadow: 0 0 22px rgba(200, 49, 26, 0.55); }
50% { transform: translateY(2px) scale(0.96); color: var(--accent); }
100% { transform: translateY(0) scale(1); color: inherit; text-shadow: none; }
}
.claim-id-display .digit-sep {
display: inline-block;
width: 0.55em;
color: rgba(255, 255, 255, 0.3);
}
/* Cursor "scan" sous l'ID en cours de génération */
.claim-id-display .scan-line {
display: block; height: 2px;
margin: 14px auto 0;
width: 60px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
animation: scanPulse 1.2s ease-in-out infinite;
}
@keyframes scanPulse {
0%, 100% { opacity: 0.4; transform: scaleX(0.8); }
50% { opacity: 1; transform: scaleX(1.4); }
}
/* Status text sous le display pendant la génération */
.claim-id-status {
margin: 12px 0 0;
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-mute);
text-align: center;
min-height: 16px;
transition: color 0.2s;
}
.claim-id-status .blink {
display: inline-block;
width: 8px; height: 8px;
margin-right: 8px;
background: var(--accent);
border-radius: 50%;
animation: blinkPulse 1s ease-in-out infinite;
vertical-align: middle;
}
@keyframes blinkPulse {
0%, 100% { opacity: 0.3; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 16px rgba(200, 49, 26, 0.5); }
}
.claim-id-status.done .blink { background: var(--signal); animation: none; opacity: 1; }
.claim-id-status.done { color: var(--signal); }
/* ============================================================
TOAST
============================================================ */
.toast {
position: fixed; bottom: 24px; left: 50%;
transform: translateX(-50%) translateY(20px);
background: var(--ink); color: var(--paper);
border: 1px solid var(--ink);
padding: 12px 20px;
font-size: 13px; font-weight: 500;
opacity: 0; pointer-events: none;
transition: opacity 0.2s, transform 0.2s;
z-index: 1000;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { background: var(--signal); border-color: var(--signal); }
.toast.error { background: var(--accent); border-color: var(--accent); }
/* ============================================================
FEATURES (cartes du welcome — 2 colonnes)
============================================================ */
.features {
list-style: none; padding: 0; margin: 40px 0 0;
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.features li {
padding: 28px 30px;
background: transparent;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
color: var(--ink-dim);
transition: background 0.2s;
}
.features li:hover { background: var(--paper); }
.features strong {
display: block; margin-bottom: 8px;
font-family: var(--font-serif); font-weight: 500; font-size: 22px;
color: var(--ink); letter-spacing: -0.015em;
}
/* ============================================================
ABOUT GRID — cartes bordées style suisse (réutilisé pour paiements)
============================================================ */
.about-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 0;
margin-top: 32px;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.about-card {
padding: 28px;
background: transparent;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
transition: background 0.2s;
margin: 0;
}
.about-card:hover { background: var(--paper); }
.about-card strong {
display: block; margin-bottom: 10px;
font-family: var(--font-serif); font-weight: 500; font-size: 20px;
letter-spacing: -0.015em; color: var(--ink);
}
.about-card p { font-size: 14px; color: var(--ink-dim); margin: 0; line-height: 1.55; }
.about { margin: 0; padding: 0; background: transparent; border: 0; }
/* ============================================================
COMPARE TABLE
============================================================ */
.compare-table-wrap {
overflow-x: auto;
margin: 24px 0;
padding: 0;
background: var(--paper);
border: 1px solid var(--line);
}
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14px; }
.compare-table th, .compare-table td {
padding: 14px 18px;
text-align: left;
border-bottom: 1px solid var(--line);
}
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table thead th {
font-family: var(--font-mono); font-weight: 500; font-size: 11px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-mute);
background: var(--bg-2);
}
.compare-table th.ours, .compare-table td.ours {
background: rgba(200, 49, 26, 0.05);
color: var(--ink); font-weight: 500;
border-left: 2px solid var(--accent);
border-right: 2px solid var(--accent);
}
.compare-table thead th.ours { color: var(--accent); border-top: 2px solid var(--accent); }
.compare-table tbody tr:last-child td.ours { border-bottom: 2px solid var(--accent); }
.compare-table td.dim { color: var(--ink-dim); }
.compare-table .yes { color: var(--signal); font-weight: 500; }
.compare-table .no { color: var(--ink-mute); }
.compare-table .warn { color: var(--warn); font-weight: 500; }
/* ── Badge True Security (cellule DoraVPN Dataleak quand zéro fuite) ── */
.true-security-badge {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 10px 12px;
border: 1.5px solid var(--signal);
border-radius: 4px;
background:
linear-gradient(135deg, rgba(94,122,74,0.10), rgba(94,122,74,0.04));
box-shadow:
0 0 0 1px rgba(94,122,74,0.20) inset,
0 6px 18px rgba(94,122,74,0.22);
position: relative;
min-width: 120px;
line-height: 1.2;
animation: truesec-glow 3.4s ease-in-out infinite;
}
.true-security-badge .ts-shield {
width: 28px; height: 28px;
display: block;
filter: drop-shadow(0 1px 2px rgba(94,122,74,0.40));
}
.true-security-badge .ts-label {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--signal);
white-space: nowrap;
}
.true-security-badge .ts-sub {
font-family: 'Geist Mono', ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.08em;
color: var(--ink-dim);
text-transform: uppercase;
}
.true-security-badge .ts-check {
position: absolute;
top: -6px; right: -6px;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--signal, #5e7a4a);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
box-shadow: 0 0 0 2px var(--paper, #fbf9f3);
}
@keyframes truesec-glow {
0%, 100% { box-shadow: 0 0 0 1px rgba(94,122,74,0.20) inset, 0 6px 18px rgba(94,122,74,0.22); }
50% { box-shadow: 0 0 0 1px rgba(94,122,74,0.36) inset, 0 8px 26px rgba(94,122,74,0.42); }
}
/* ============================================================
STEPS — 3 colonnes numérotées
============================================================ */
.steps {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
margin-top: 24px;
}
.step {
padding: 28px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: flex; gap: 16px; align-items: flex-start;
margin: 0; background: transparent;
}
.step-num {
font-family: var(--font-serif); font-style: italic; font-weight: 400;
font-size: 38px; line-height: 1;
color: var(--accent);
width: 50px; flex-shrink: 0;
}
.step strong {
display: block; margin-bottom: 6px;
font-family: var(--font-serif); font-weight: 500; font-size: 20px;
letter-spacing: -0.015em;
}
.step p { margin: 0; font-size: 14px; color: var(--ink-dim); }
/* ============================================================
PRICE
============================================================ */
.price-banner {
display: flex; justify-content: space-between; align-items: center;
gap: 24px;
margin: 24px 0;
padding: 36px 40px;
background: var(--paper);
border: 1px solid var(--line);
border-top: 2px solid var(--accent);
}
.price-card {
background: var(--paper);
border: 1px solid var(--line);
padding: 48px 36px 36px;
margin: 24px 0;
text-align: center;
}
.price-big {
font-family: var(--font-serif); font-weight: 400;
font-size: 64px; line-height: 1;
color: var(--ink);
}
.price-big span {
font-family: var(--font); font-size: 18px; font-weight: 400;
color: var(--ink-dim); margin-left: 8px;
}
.price-card .price-big { font-size: 96px; margin-bottom: 8px; }
.duration-list {
list-style: none; padding: 0; margin: 28px auto 20px; max-width: 380px;
border-top: 1px solid var(--line); text-align: left;
}
.duration-list li {
display: flex; justify-content: space-between; align-items: baseline;
padding: 14px 4px;
border-bottom: 1px solid var(--line);
font-size: 15px;
}
.duration-list li > span:first-child { color: var(--ink-dim); }
.duration-list li small { color: var(--ink-mute); margin-left: 6px; font-size: 12px; font-family: var(--font); }
/* ============================================================
CLAIM — split-screen
============================================================ */
.claim-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch;
border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.claim-pane {
background: var(--paper);
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 36px; display: flex; flex-direction: column;
margin: 0;
}
.claim-pane h2 { margin: 12px 0 0; font-size: 26px; }
.claim-pane .kicker, .claim-pane .eyebrow { margin-bottom: 0; }
.claim-id-display {
background: linear-gradient(155deg, #131720 0%, #0c0f15 100%);
border: 1px solid var(--line-2);
padding: 28px 14px;
margin: 24px 0 16px;
text-align: center;
font-family: var(--font-mono); font-size: 26px; font-weight: 500;
letter-spacing: 0.1em; color: var(--paper);
user-select: text;
transition: filter 0.25s ease;
}
.claim-id-display.blurred { filter: blur(12px); pointer-events: none; user-select: none; }
.claim-id-display.generating { animation: pulse 1.2s ease-in-out infinite; }
.claim-id-display.arrived { animation: pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes pop { 0% { transform: scale(0.92); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
.claim-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.claim-actions .btn { flex: 1; min-width: 140px; }
.btn.copy-success { background: var(--signal); color: #fff; border-color: var(--signal); }
.confirm-question { margin: 16px 0 4px; font-weight: 500; }
.confirm-row {
display: flex; align-items: flex-start; gap: 10px;
margin: 8px 0 20px;
cursor: pointer; user-select: none;
padding: 14px;
border: 1px solid var(--line);
background: var(--bg-2);
transition: border-color 0.15s;
}
.confirm-row:hover { border-color: var(--ink-dim); }
.confirm-row input[type=checkbox] {
width: 18px; height: 18px; margin: 1px 0 0;
accent-color: var(--accent); flex-shrink: 0; cursor: pointer;
}
.confirm-row span { color: var(--ink); line-height: 1.4; }
/* ============================================================
DASHBOARD — sidebar verticale
============================================================ */
.dashboard-shell { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: flex-start; }
.dash-sidebar {
position: sticky; top: 88px;
display: flex; flex-direction: column; gap: 20px;
padding: 24px;
margin: 0;
background: var(--paper);
border: 1px solid var(--line);
}
.dash-account-card .kicker { margin: 0 0 4px; }
.dash-account-label {
margin: 12px 0 4px;
font-family: var(--font-mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-mute);
}
.dash-account-status { font-size: 18px; font-weight: 500; margin: 0; color: var(--ink); }
.dash-account-status.expired { color: var(--accent); }
.dash-nav {
display: flex; flex-direction: column; gap: 2px;
border-top: 1px solid var(--line); padding-top: 16px;
}
.dash-nav-section {
font-family: var(--font-mono); font-size: 10px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-mute); margin: 12px 0 4px;
}
.dash-nav-section:first-child { margin-top: 0; }
.dash-nav-link {
display: block; padding: 8px 10px;
color: var(--ink-dim);
font-size: 14px; text-decoration: none;
border-left: 2px solid transparent;
transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.dash-nav-link:hover { color: var(--ink); background: var(--bg); }
.dash-nav-link.active { color: var(--ink); border-left-color: var(--accent); font-weight: 500; }
.dash-account-meta { border-top: 1px solid var(--line); padding-top: 16px; }
.dash-id-small { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.08em; }
.dash-main { min-height: 400px; }
.dash-view h2 { margin-top: 0; }
.back-link {
display: inline-flex; align-items: center; gap: 6px;
color: var(--ink-dim);
margin-bottom: 16px; font-size: 13px;
font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em;
}
.back-link:hover { color: var(--accent); }
/* Bouton retour pay-detail — plus visible que back-link, mais discret */
.btn-back {
display: inline-flex; align-items: center; gap: 8px;
background: var(--paper);
border: 1px solid var(--line-2);
padding: 8px 14px 8px 12px;
font-family: var(--font-mono); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-dim);
cursor: pointer;
margin-bottom: 22px;
transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.15s;
}
.btn-back:hover {
color: var(--ink);
border-color: var(--ink);
background: var(--bg-2);
transform: translateX(-2px);
}
.btn-back svg { color: var(--accent); flex-shrink: 0; }
/* Liste des devises acceptées — pills discrètes */
.pay-currencies {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 12px 0 4px;
}
.pay-curr {
display: inline-flex; align-items: center;
padding: 5px 11px;
background: var(--paper);
border: 1px solid var(--line);
font-family: var(--font-mono); font-size: 11px;
letter-spacing: 0.08em;
color: var(--ink-dim);
white-space: nowrap;
}
.pay-curr:hover { color: var(--ink); border-color: var(--line-2); }
/* ============================================================
BANNERS (avertissements, infos)
============================================================ */
.banner-warn {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px;
padding: 18px 22px;
margin-bottom: 24px;
background: var(--paper);
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
}
.banner-warn strong { display: block; color: var(--ink); font-weight: 500; }
.banner-warn .btn { flex-shrink: 0; }
/* ============================================================
DEVICES LIST
============================================================ */
.devices-list {
display: flex; flex-direction: column; gap: 0;
margin: 16px 0;
border-top: 1px solid var(--line);
}
.device-row {
display: flex; justify-content: space-between; align-items: center;
gap: 12px;
background: transparent;
border: 0; border-bottom: 1px solid var(--line);
padding: 18px 0;
}
.device-info { flex: 1; min-width: 0; }
.device-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.device-name {
font-weight: 500; color: var(--ink); cursor: pointer;
padding: 2px 6px; margin-left: -6px;
transition: background 0.12s;
}
.device-name:hover { background: var(--bg-2); }
.device-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); margin-top: 2px; word-break: break-all; }
.btn-icon-sm {
width: 24px; height: 24px; padding: 0;
font-size: 12px;
color: var(--ink-mute);
background: transparent;
border: 1px solid var(--line);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 0;
}
.btn-icon-sm:hover { color: var(--accent); border-color: var(--accent); }
.inline-rename { display: inline-flex; align-items: center; gap: 6px; }
.inline-rename-input {
background: var(--snow);
border: 1px solid var(--accent);
padding: 6px 10px;
color: var(--ink);
font: inherit; font-size: 14px;
width: 220px;
}
/* ============================================================
ADVANCED — détails dépliables
============================================================ */
details summary { cursor: pointer; font-weight: 500; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::before {
content: "+"; display: inline-block; width: 16px;
color: var(--accent); font-weight: 600; margin-right: 4px;
}
details[open] summary::before { content: "−"; }
details p { color: var(--ink-dim); margin: 12px 0 0; }
.advanced-section { padding: 0; }
.advanced-section > summary { padding: 14px 20px; }
.advanced-section[open] > summary { border-bottom: 1px solid var(--line); }
.advanced-body { padding: 16px 20px; color: var(--ink-dim); }
.advanced-body .field input { font-family: var(--font-mono); font-size: 13px; }
/* ============================================================
TABS — Mullvad style (sous-onglets)
============================================================ */
.tabs-row {
display: flex; gap: 0;
border-bottom: 1px solid var(--line);
margin: 16px 0 20px;
overflow-x: auto;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
/* Companion