/* ==========================================================================
   DEPOSIUM — POLISH PATCH · Direction C "Contrasté tech"
   --------------------------------------------------------------------------
   Charge ce fichier APRÈS style.css :

   <link rel="stylesheet" href="css/style.css?v=XX">
   <link rel="stylesheet" href="css/style.polish.css?v=1">

   Aucun touche aux canvas animés, à la palette, ni à Inter.
   Ajoute uniquement : font mono système + raffinements visuels.
   ========================================================================== */

:root {
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', Consolas, monospace;
}

/* ==========================================================================
   HERO — h1 800 / post-title 40 / caret terminal / mono eyebrow
   ========================================================================== */
.hero { padding: 72px 0 56px; }
.hero::before {
    background: radial-gradient(circle, rgba(var(--brand-teal-rgb), 0.14) 0%, rgba(var(--brand-teal-rgb), 0.04) 30%, transparent 70%);
}

/* Atténue légèrement les fibres dans la zone du titre, sans les masquer */
.hero-blobs-canvas {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.7) 30%, #000 50%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.7) 30%, #000 50%);
}

.hero-logo-inline .hero-logo-img { width: 52px; }

.hero h1.hero-brand-text {
    font-size: 28px; font-weight: 800; letter-spacing: 0.02em;
    text-shadow: 0 0 32px rgba(var(--brand-teal-rgb), 0.5);
}

.hero-post-title {
    font-size: 34px; font-weight: 800; letter-spacing: -0.03em;
    line-height: 1.05; color: #fff; margin-bottom: 16px;
    text-shadow: 0 0 48px rgba(var(--brand-teal-rgb), 0.18);
}
.hero-post-title::after {
    content: '_'; color: var(--brand-teal); margin-left: 4px;
    animation: deposium-caret 1s steps(1) infinite;
}
@keyframes deposium-caret { 50% { opacity: 0; } }

.hero-positioning {
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--brand-teal); opacity: 0.85; font-weight: 500;
    margin-bottom: 24px;
}
.hero-positioning::before { content: '> '; opacity: 0.6; }

.hero .subtitle {
    font-size: 18px; line-height: 1.55; max-width: 580px;
    font-weight: 400; margin-bottom: 28px;
}

.hero-keywords {
    font-family: var(--font-mono);
    font-size: 11.5px; letter-spacing: 0.06em; margin-bottom: 32px;
}

.hero-benchmark-badge {
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.04em;
    background: rgba(var(--brand-teal-rgb), 0.08);
    border-color: rgba(var(--brand-teal-rgb), 0.2);
    margin-top: 24px;
}
.hero-benchmark-badge::before {
    content: '✓ '; color: var(--brand-teal); font-weight: 700;
}

/* ==========================================================================
   BUTTONS — radius 6 + glow renforcé sur primary
   ========================================================================== */
.btn { border-radius: 6px; font-weight: 600; }
.btn-lg { padding: 0.95rem 1.8rem; font-size: 0.95rem; }

.btn-primary {
    background: var(--brand-teal); color: #0a1820;
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 1px var(--brand-teal-light), 0 8px 28px rgba(var(--brand-teal-rgb), 0.35);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
    background: #0a1820; color: var(--brand-teal);
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 1px var(--brand-teal), 0 12px 36px rgba(var(--brand-teal-rgb), 0.45);
}

.btn-outline {
    color: var(--brand-teal); border-color: rgba(var(--brand-teal-rgb), 0.4);
    background: rgba(var(--brand-teal-rgb), 0.04);
}

/* Boutons header (Créer un compte + Demander une démo) — même design que
   .btn-primary : carré 6px, fond teal, fond dark au survol. (display/responsive
   restent gérés par style.css.) */
.login-btn,
.demo-btn {
    padding: 0.42rem 0.95rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    align-items: center;
    gap: 0.4rem;
    color: #0a1820;
    background: var(--brand-teal);
    border: 1px solid var(--brand-teal);
    border-radius: 6px;
    box-shadow: none;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.login-icon { flex-shrink: 0; }
.login-btn:hover,
.demo-btn:hover {
    color: var(--brand-teal);
    background: #0a1820;
    border-color: var(--brand-teal);
    box-shadow: none;
    transform: none;
}

/* CTA final : "Essayer gratuitement" — même survol dark que le bouton hero. */
.cta-section .btn-primary:hover {
    background: #0a1820;
    color: var(--brand-teal);
    box-shadow: 0 0 0 1px var(--brand-teal), 0 12px 36px rgba(var(--brand-teal-rgb), 0.45);
    transform: none;
}

/* ==========================================================================
   VIDÉO — bouton « Voir la vidéo » + popup YouTube (lazy, sans cookie tiers
   tant que l'utilisateur ne clique pas). L'iframe est injectée par main.js à
   l'ouverture et retirée à la fermeture (la lecture s'arrête).
   ========================================================================== */

/* Déclencheur : icône play + libellé alignés (comme .login-btn). */
.js-video-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
}
.js-video-trigger .video-play-icon { flex-shrink: 0; }

/* « Comment ça marche » : bloc d'action entre le H1 et le sous-titre. */
.how-hero-actions {
    display: flex;
    justify-content: center;
    margin: var(--space-6) 0 var(--space-4);
}

/* Overlay plein écran (au-dessus de la navbar et des en-têtes collants). */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}
.video-modal.active { display: flex; }
.video-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 13, 24, 0.82);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* Boîte de dialogue : largeur max ~900, coins arrondis, halo teal discret. */
.video-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 900px;
    background: #0a1424;
    border: 1px solid rgba(var(--brand-teal-rgb), 0.3);
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(var(--brand-teal-rgb), 0.1);
    overflow: hidden;
    animation: video-modal-in 0.22s ease;
}
@keyframes video-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Cadre 16/9 où l'iframe est injectée par JS. */
.video-modal__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}
.video-modal__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Bouton fermer en surimpression (coin haut-droit de la vidéo). */
.video-modal__close {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    color: #0a1820;
    background: var(--brand-teal);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.video-modal__close:hover {
    color: var(--brand-teal);
    background: #0a1820;
    box-shadow: 0 0 0 1px var(--brand-teal), 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* Fige le défilement de l'arrière-plan quand la popup est ouverte. */
body.modal-open { overflow: hidden; }

@media (max-width: 600px) {
    .video-modal { padding: 0.75rem; }
    .video-modal__close { width: 2.1rem; height: 2.1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .video-modal__dialog { animation: none; }
}

/* ==========================================================================
   TARIFS — transparence annuelle (façon popup app) : prix mensuel barré +
   total annuel. Cachés par défaut, révélés en vue annuelle via .is-annual
   (posé par le toggle dans main.js).
   ========================================================================== */
.pricing-strike {
    display: none;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-faint);
    text-decoration: line-through;
    text-decoration-color: rgba(248, 113, 113, 0.75);
    -webkit-text-fill-color: var(--text-faint); /* annule tout gradient hérité */
    margin-right: 0.45rem;
    vertical-align: middle;
    letter-spacing: -0.01em;
}
.pricing-annual-total {
    display: none;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--brand-teal);
    margin-top: calc(var(--space-1) * -1);
    margin-bottom: var(--space-1);
}
.pricing-grid.is-annual .pricing-strike {
    display: inline;
}
.pricing-grid.is-annual .pricing-annual-total {
    display: block;
}

/* Couleur de la note annuelle par plan : Starter violet, Pro garde le teal. */
.pricing-grid .pricing-card:nth-child(2) .pricing-annual-total {
    color: #a855f7;
}
/* Teams : note annuelle en gold (couleur du prix Teams). */
.pricing-grid .pricing-card:nth-child(4) .pricing-annual-total {
    color: #fbbf24;
    font-weight: 600;
}
/* « Taxes selon votre pays » — petite mention discrète sous le prix. */
.pricing-tax-note {
    font-size: var(--font-size-xs);
    color: var(--text-faint);
    margin-bottom: var(--space-3);
}

/* ==========================================================================
   SECTIONS — titles 800 / underline marquée
   ========================================================================== */
.section-title {
    font-size: 36px; font-weight: 800; letter-spacing: -0.035em;
    line-height: 1.1; color: #fff;
}
.section-title::after {
    width: 60px; height: 3px;
    background: var(--brand-teal); border-radius: 0;
}
.section-subtitle { color: var(--text-muted); font-size: 16px; }

/* ==========================================================================
   CARDS — index 01/02/03 mono + halo teal au hover + bullets flèches
   ========================================================================== */
.grid-3 { counter-reset: deposium-card; }

.grid-3 .card {
    counter-increment: deposium-card;
    background: linear-gradient(168deg, rgba(30,41,59,0.9) 0%, rgba(15,23,42,0.6) 100%);
    border-color: rgba(var(--brand-teal-rgb), 0.1);
    border-radius: 8px;
}

.grid-3 .card::before {
    content: counter(deposium-card, decimal-leading-zero);
    position: absolute; top: 14px; right: 16px;
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.1em;
    color: var(--brand-teal); opacity: 0.5;
    background: none; height: auto; left: auto; width: auto;
    z-index: 2;
}

.grid-3 .card:hover {
    border-color: rgba(var(--brand-teal-rgb), 0.3);
    box-shadow: 0 24px 48px rgba(0,0,0,0.3), 0 0 32px rgba(var(--brand-teal-rgb), 0.08);
    transform: translateY(-4px);
}

.card h3 {
    font-size: 21px; font-weight: 700; letter-spacing: -0.02em;
    line-height: 1.2; color: #fff;
    margin-top: 14px; margin-bottom: 12px;
}

.card li {
    font-size: 13.5px; line-height: 1.65; color: var(--text-muted);
    padding-left: 22px;
}
.card li::before {
    content: '→'; color: var(--brand-teal); font-weight: 600;
    top: 0;
}

/* ==========================================================================
   METRICS — numbers 52px gradient blanc→teal + labels mono uppercase
   ========================================================================== */
.metric-item {
    background: linear-gradient(168deg, rgba(15,23,42,0.85) 0%, rgba(15,23,42,0.4) 100%);
    border-color: rgba(var(--brand-teal-rgb), 0.12);
    border-radius: 6px;
}

.metric-number {
    font-size: 52px; font-weight: 800; letter-spacing: -0.03em;
    background: linear-gradient(135deg, #fff 0%, var(--brand-teal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.metric-label {
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--brand-teal); opacity: 0.85; margin-top: 10px;
}
.metric-context { color: var(--text-muted); font-size: 12px; }

.metrics-ref {
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
    background: rgba(var(--brand-teal-rgb), 0.08);
}

/* ==========================================================================
   CTA FINAL — h2 800 + glow
   ========================================================================== */
.cta-section h2 {
    font-size: 40px; font-weight: 800; letter-spacing: -0.035em;
}
.cta-section .btn-primary {
    background: var(--brand-teal); color: #0a1820;
    box-shadow: 0 0 0 1px var(--brand-teal-light), 0 8px 32px rgba(var(--brand-teal-rgb), 0.4);
}

/* ==========================================================================
   RESPONSIVE — réduit les tailles agressives en mobile
   ========================================================================== */
@media (max-width: 768px) {
    .hero-post-title { font-size: 28px; letter-spacing: -0.02em; }
    .hero h1.hero-brand-text { font-size: 24px; }
    .section-title { font-size: 28px; }
    .cta-section h2 { font-size: 30px; }
    .metric-number { font-size: 40px; }
}

/* « 10 utilisateurs inclus » au-dessus du nom des plans payants. */
.pricing-seats {
    display: inline-block;
    align-self: flex-start;
    width: fit-content;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--brand-teal);
    background: rgba(85, 199, 204, 0.10);
    border: 1px solid rgba(85, 199, 204, 0.35);
    border-radius: 999px;
    padding: 2px 10px;
    margin-bottom: var(--space-3);
    position: relative;
    z-index: 1;
}
/* Carte Essai gratuit : même hauteur, invisible, pour garder les noms de plans alignés. */
.pricing-seats--spacer {
    visibility: hidden;
}

/* Prix ramené par utilisateur : encadré discret sous le total, information
   secondaire jamais confondue avec le prix facturé (base 10 utilisateurs explicite). */
.pricing-per-user {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    line-height: 1.35;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    padding: 6px 10px;
    margin: var(--space-2) 0;
    position: relative;
    z-index: 1;
}
.pricing-per-user-amount {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-primary);
    transition: opacity 0.25s ease;
}
.pricing-per-user-amount.switching {
    opacity: 0;
}
.pricing-per-user-base {
    color: var(--text-faint);
}
/* « Hors Taxes /mois » ne se coupe plus au milieu : passe en bloc à la ligne si besoin. */
.pricing-price .period {
    white-space: nowrap;
}
.pricing-per-user-unit {
    display: block;
    white-space: nowrap;
}

/* Prix par utilisateur aux couleurs du plan : Starter violet, Pro teal, Teams gold. */
.pricing-grid .pricing-card:nth-child(2) .pricing-per-user-amount { color: #a855f7; }
.pricing-grid .pricing-card:nth-child(3) .pricing-per-user-amount { color: var(--brand-teal); }
.pricing-grid .pricing-card:nth-child(4) .pricing-per-user-amount { color: #fbbf24; }
/* « HT /mois » ↔ « HT /an » suit le toggle. */
.pricing-price .period { transition: opacity 0.25s ease; }
.pricing-price .period.switching { opacity: 0; }