/* Styles partagés des pages statiques (landings, futures pages SEO — T-018).
   Extraits des trois landing.html le 2026-08-15 (blocs vérifiés identiques ×3) : une seule
   copie à maintenir au lieu d'une par page et par locale. */
.consent-banner {
            position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
            display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
            gap: 12px 20px; padding: 14px 20px;
            background: #161B22; border-top: 1px solid #30363D;
            color: #C9D1D9; font-size: 14px; line-height: 1.5;
        }
        .consent-banner p { margin: 0; max-width: 720px; }
        .consent-banner a { color: #58A6FF; }
        .consent-actions { display: flex; gap: 10px; }
        .consent-btn {
            border: 0; border-radius: 8px; padding: 9px 16px;
            font-size: 14px; font-weight: 600; cursor: pointer;
        }
        .consent-accept { background: #2EA043; color: #fff; }
        .consent-decline { background: transparent; color: #C9D1D9; border: 1px solid #30363D; }

*, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0; padding: 0;
            background: #0D1117;
            color: #E6EDF3;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
            -webkit-font-smoothing: antialiased;
            line-height: 1.5;
        }
        a { text-decoration: none; color: inherit; }
        ul { list-style: none; padding: 0; margin: 0; }
        p, h1, h2, h3 { margin: 0; }

        :root {
            --bg:            #0D1117;
            --surface:       #161B22;
            --surface2:      #1C2128;
            --border:        #30363D;
            --border2:       #21262D;
            --orange:        #FF9800;
            --orange2:       #FFAB40;
            --orange-dim:    rgba(255, 152, 0, 0.12);
            --orange-border: rgba(255, 152, 0, 0.35);
            --text:          #E6EDF3;
            --text2:         #8B949E;
            --text3:         #484F58;
            --green:         #4CAF50;
        }

        /* Nav */
        nav {
            display: flex; align-items: center; justify-content: space-between;
            padding: 14px 5%; border-bottom: 1px solid var(--border);
            position: sticky; top: 0;
            background: rgba(13, 17, 23, 0.96);
            backdrop-filter: blur(12px); z-index: 10;
            /* Filet de sécurité (T-435) : si un libellé traduit grandit un jour au point de ne
               plus tenir, la nav passe à la ligne au lieu de faire défiler TOUTE la page
               latéralement. Sans effet tant que tout rentre — ce que les seuils ci-dessous
               garantissent pour les trois langues actuelles. */
            flex-wrap: wrap; row-gap: 8px;
        }
        .logo { font-size: 1rem; font-weight: 700; letter-spacing: 3px; }
        .nav-links { display: flex; gap: 24px; font-size: 0.875rem; color: var(--text2); }
        .nav-links a:hover { color: var(--text); }
        .btn-nav {
            background: var(--orange); color: #000; border: none;
            padding: 8px 18px; border-radius: 6px; font-size: 0.85rem;
            font-weight: 700; cursor: pointer; white-space: nowrap;
            transition: background 0.15s;
        }
        .btn-nav:hover { background: var(--orange2); }

        /* Hero */
        .hero {
            text-align: center; padding: 72px 5% 64px;
            max-width: 760px; margin: 0 auto;
        }
        .badge {
            display: inline-block;
            background: var(--orange-dim); color: var(--orange2);
            border: 1px solid var(--orange-border); border-radius: 20px;
            padding: 5px 14px; font-size: 0.75rem; font-weight: 500; margin-bottom: 22px;
        }
        h1 {
            font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 700;
            line-height: 1.2; letter-spacing: -0.5px; margin-bottom: 18px;
        }
        h1 em { color: var(--orange); font-style: normal; }
        .tagline {
            font-size: clamp(0.9rem, 1.8vw, 1.05rem); color: var(--text2);
            line-height: 1.7; margin-bottom: 32px;
        }
        .ctas {
            display: flex; gap: 10px; justify-content: center;
            flex-wrap: wrap; margin-bottom: 24px;
        }
        .btn-primary {
            background: var(--orange); color: #000; border: none;
            padding: 12px 24px; border-radius: 7px; font-size: 0.95rem;
            font-weight: 700; cursor: pointer; white-space: nowrap;
            transition: background 0.15s, transform 0.1s; display: inline-block;
        }
        .btn-primary:hover { background: var(--orange2); transform: translateY(-1px); }
        .btn-secondary {
            background: var(--surface); color: var(--text);
            padding: 12px 20px; border-radius: 7px; font-size: 0.9rem;
            font-weight: 500; border: 1px solid var(--border); white-space: nowrap;
            transition: background 0.15s; display: inline-flex; align-items: center; gap: 7px;
        }
        .btn-secondary:hover { background: var(--surface2); }
        .trust {
            display: flex; gap: 18px; justify-content: center;
            flex-wrap: wrap; font-size: 0.78rem; color: var(--text3);
        }
        .trust span::before { content: '✓ '; color: var(--orange); }

        /* Sections */
        .sep { height: 1px; background: var(--border2); margin: 0 5%; }
        .section { padding: 60px 5%; max-width: 1060px; margin: 0 auto; }
        .label {
            display: block; font-size: 0.7rem; font-weight: 700;
            letter-spacing: 2px; text-transform: uppercase;
            color: var(--orange); margin-bottom: 10px;
        }
        h2 {
            font-size: clamp(1.45rem, 2.8vw, 2rem); font-weight: 700;
            line-height: 1.25; margin-bottom: 10px;
        }
        .h2-sub { font-size: 0.95rem; color: var(--text2); line-height: 1.7; max-width: 520px; }

        /* Feature grid */
        .grid {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 12px; margin-top: 36px;
        }
        @media (max-width: 840px) { .grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 520px) { .grid { grid-template-columns: 1fr; } }
        .card {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 10px; padding: 20px; transition: border-color 0.2s;
        }
        .card:hover { border-color: var(--orange-border); }
        .card-icon { display: block; width: 30px; height: 30px; margin-bottom: 12px; color: var(--orange); }
        .card-icon svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none;
            stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
        .card-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 6px; }
        .card-desc { font-size: 0.82rem; color: var(--text2); line-height: 1.6; }


        /* Tarifs */
        .plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 36px; }
        @media (max-width: 620px) { .plans { grid-template-columns: 1fr; } }
        .plan {
            background: var(--surface); border: 1px solid var(--border);
            border-radius: 10px; padding: 24px; display: flex; flex-direction: column;
        }
        .plan.featured { border-color: var(--orange-border); background: var(--surface2); }
        .plan-name { font-size: 0.75rem; font-weight: 700; letter-spacing: 1.5px;
            text-transform: uppercase; color: var(--text2); margin-bottom: 10px; }
        .plan.featured .plan-name { color: var(--orange); }
        .plan-price { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
        .plan-period { font-size: 0.82rem; color: var(--text2); margin-bottom: 4px; }
        .plan-alt { font-size: 0.78rem; color: var(--text3); margin-bottom: 18px; }
        .plan ul { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; flex: 1; }
        .plan li { font-size: 0.85rem; color: var(--text2); line-height: 1.5; }
        .plan li::before { content: '\2713 '; color: var(--orange); font-weight: 700; }
        .plan .btn-primary, .plan .btn-secondary { width: 100%; text-align: center; }

        /* AI steps */
        .ai-block {
            background: var(--surface); border: 1px solid var(--border);
            border-left: 3px solid var(--orange); border-radius: 10px;
            padding: 36px; margin-top: 36px;
        }
        .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
        @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .ai-block { padding: 22px; } }
        .step { text-align: center; }
        .step-n {
            width: 36px; height: 36px; border-radius: 50%;
            background: var(--orange); color: #000; font-weight: 700;
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 10px; font-size: 0.95rem;
        }
        .step-title { font-size: 0.88rem; font-weight: 600; margin-bottom: 5px; }
        .step-desc { font-size: 0.8rem; color: var(--text2); line-height: 1.55; }

        /* Comparison */
        .compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 32px; }
        @media (max-width: 680px) { .compare { grid-template-columns: 1fr; } }
        .comp { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
        .comp.hl { border-color: var(--orange); }
        .comp-name { font-size: 0.9rem; font-weight: 700; margin-bottom: 14px; }
        .comp.hl .comp-name { color: var(--orange); }
        .comp li { font-size: 0.8rem; color: var(--text2); padding: 4px 0; border-top: 1px solid var(--border2); }
        .comp li:first-child { border-top: none; }
        .comp li.y::before { content: '✓ '; color: var(--green); }
        .comp li.n { color: var(--text3); }
        .comp li.n::before { content: '✗ '; color: var(--text3); }

        /* Footer */
        footer {
            padding: 28px 5%; border-top: 1px solid var(--border);
            display: flex; align-items: center; justify-content: space-between;
            flex-wrap: wrap; gap: 10px; color: var(--text3); font-size: 0.8rem;
        }
        .footer-links { display: flex; gap: 16px; }
        .footer-links a:hover { color: var(--text2); }

        /* Les liens d'ancre tombent à 710px, pas à 540 (T-435). L'ancien seuil était calé sur
           l'ANGLAIS : la nav complète a besoin de 544px de contenu en anglais, 568 en espagnol et
           589 en français (mesuré), et elle n'a que 90% de la fenêtre. Entre 541 et 653px, le
           français faisait donc déborder la page horizontalement, et c'est le CTA qui sortait.
           710 est mesuré, pas déduit : à 660 le balayage montrait la nav repliée sur DEUX lignes
           de 665 à 705px en français — plus de débordement, mais un saut de mise en page. Le
           seuil est celui où la langue la plus longue tient encore sur une ligne.
           Ce sont les liens qui tombent, et pas le CTA ni le sélecteur de langue : ils dupliquent
           des sections qu'on atteint en faisant défiler, alors que le CTA est la raison d'être de
           la page (campagnes Google Ads, T-341). */
        @media (max-width: 710px) { .nav-links { display: none; } }
        @media (max-width: 540px) { .hero { padding: 48px 5%; } }

        /* Aperçu produit : captures réelles de l'app web, pas des maquettes. */
        .shot {
            max-width: 1120px; margin: 56px auto 0; padding: 0 24px;
        }
        .shot figure, .shots-2 figure { margin: 0; min-width: 0; }
        .shot img, .shots-2 img {
            width: 100%; height: auto; display: block; border-radius: 12px;
            border: 1px solid #30363D; box-shadow: 0 24px 64px rgba(0,0,0,.55);
            background: #0D1117;
        }
        .shot figcaption, .shots-2 figcaption {
            margin-top: 14px; text-align: center; color: #8B949E; font-size: 14px;
        }
        .shots-2 {
            display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
            max-width: 1120px; margin: 0 auto; padding: 0 24px;
        }
        @media (max-width: 840px) { .shots-2 { grid-template-columns: 1fr; } }

        .faq { max-width: 780px; margin: 0 auto; }
        .faq details {
            border: 1px solid #30363D; border-radius: 10px; background: #161B22;
            padding: 0 18px; margin-bottom: 12px;
        }
        .faq details[open] { background: #1C2128; }
        .faq summary {
            cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 16px;
            list-style: none; display: flex; justify-content: space-between; align-items: center;
            gap: 16px;
        }
        .faq summary::-webkit-details-marker { display: none; }
        .faq summary::after {
            content: '+'; color: #FF9800; font-size: 22px; font-weight: 400; line-height: 1;
        }
        .faq details[open] summary::after { content: '\2212'; }
        .faq p {
            margin: 0 0 16px; color: #8B949E; font-size: 15px; line-height: 1.65;
        }
        /* Sélecteur de langue (généré par build.py) */
        .lang-switch { display: inline-flex; gap: 2px; margin-right: 6px; }
        .lang-link {
            font-size: 13px; font-weight: 600; color: #8B949E; padding: 6px 8px;
            border-radius: 6px; letter-spacing: .02em;
        }
        .lang-link:hover { color: #E6EDF3; }
        .lang-link.lang-cur { color: #FF9800; }
        @media (max-width: 560px) { .lang-switch { display: none; } }

        /* Démo animée audio → tab (T-281). Illustration CSS, zéro asset externe. */
        .ai-demo { max-width: 640px; margin: 32px auto 0; }
        .ai-demo-card {
            background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
            padding: 18px 20px; box-shadow: 0 20px 50px rgba(0,0,0,.45); overflow: hidden;
        }
        .ai-demo-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
        .ai-demo-file {
            font-size: 12px; color: var(--text2); background: var(--surface2);
            border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; white-space: nowrap;
        }
        .ai-demo-wave { display: flex; align-items: center; gap: 2px; height: 28px; flex: 1; }
        .ai-demo-wave i {
            flex: 1; background: var(--orange); border-radius: 1px; opacity: .8;
            height: calc(12% + var(--h) * 76%); transform-origin: center;
        }
        .ai-demo-tab {
            position: relative; height: 130px;
            background: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px 22px);
            background-position: 0 10px; background-repeat: no-repeat; background-size: 100% 121px;
        }
        .ai-demo-tab .fr {
            position: absolute; left: calc(6% + var(--t) * 82%); top: calc(10px + var(--s) * 22px);
            transform: translate(-50%, -50%); font-size: 13px; font-weight: 700; color: var(--text);
            background: var(--bg); padding: 0 3px; line-height: 1;
        }
        .ai-demo-scan {
            position: absolute; top: 4px; bottom: 4px; width: 2px; left: 6%;
            background: linear-gradient(var(--orange), transparent); opacity: 0; border-radius: 2px;
        }
        .ai-demo-cap { text-align: center; color: var(--text2); font-size: 13px; margin: 14px 0 0; }

        /* Statique par défaut (respecte prefers-reduced-motion) : tab déjà remplie, pas de scan. */
        @media (prefers-reduced-motion: no-preference) {
            .ai-demo-tab .fr { opacity: 0; animation: aiFret 6s linear infinite; animation-delay: calc(var(--t) * 4.4s); }
            .ai-demo-scan { animation: aiScan 6s linear infinite; }
            .ai-demo-wave i { animation: aiWave 1.2s ease-in-out infinite alternate; animation-delay: calc(var(--d) * 60ms); }
        }
        @keyframes aiFret {
            0%, 4% { opacity: 0; transform: translate(-50%,-50%) scale(.3); }
            9% { opacity: 1; transform: translate(-50%,-50%) scale(1.25); }
            13%, 86% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
            94%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(.6); }
        }
        @keyframes aiScan {
            0% { left: 6%; opacity: 0; }
            4% { opacity: .9; }
            88% { left: 88%; opacity: .9; }
            96%, 100% { left: 88%; opacity: 0; }
        }
        @keyframes aiWave { from { transform: scaleY(.75); opacity: .6; } to { transform: scaleY(1.05); opacity: .95; } }