/* =============================================================================
   accueil-nl.css
   CSS extrait tel quel des blocs <style> de nl-pages/index.php.
   Les blocs sont concatenes DANS LEUR ORDRE D'APPARITION : a specificite
   egale c'est la derniere regle qui gagne, l'ordre ne doit jamais changer.
   Rien n'a ete reecrit, dedoublonne ni reordonne.
   ============================================================================= */

/* ===== bloc 1, ex-ligne 186 de nl-pages/index.php ===== */

        body { font-family: 'Poppins', sans-serif; }

        .glass-card {
            background: rgba(30, 58, 87, 0.6);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .glass-card:hover {
            background: rgba(30, 58, 87, 0.8);
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(140, 198, 63, 0.2);
        }

        .badge-glow-red { background: linear-gradient(135deg, #FF6B6B 0%, #FF5252 100%); box-shadow: 0 4px 15px rgba(255, 82, 82, 0.4); }
        .badge-glow-green { background: linear-gradient(135deg, #8CC63F 0%, #7AB62F 100%); box-shadow: 0 4px 15px rgba(140, 198, 63, 0.4); }
        .badge-glow-blue { background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%); box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4); }

        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .animate-fade-in { animation: fadeInUp 0.6s ease-out; }

        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }
        .animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

        .gradient-text-green {
            background: linear-gradient(135deg, #8cc63f, #b8e986);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Hero animations */
        .hero-text-reveal {
            opacity: 0;
            transform: translateY(30px);
            animation: heroReveal 0.8s ease-out forwards;
        }
        @keyframes heroReveal { to { opacity: 1; transform: translateY(0); } }
        @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
        @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

        /* Traffic light animation */
        .light-on-red { background: #ef4444 !important; box-shadow: 0 0 30px rgba(239,68,68,0.6), 0 0 60px rgba(239,68,68,0.3) !important; }
        .light-on-orange { background: #f59e0b !important; box-shadow: 0 0 30px rgba(245,158,11,0.6), 0 0 60px rgba(245,158,11,0.3) !important; }
        .light-on-green { background: #8cc63f !important; box-shadow: 0 0 30px rgba(140,198,63,0.6), 0 0 60px rgba(140,198,63,0.3) !important; }

        /* Responsive hero */
        @media (max-width: 767px) {
            .hero-main-layout { flex-direction: column !important; text-align: left; }
            /* Hide decorative floating elements on mobile — improves LCP and reduces CLS */
            [style*="animation:float"] { display: none !important; }
            /* Hero mobile optimization */
            .hero-main-layout h1 { font-size: 1.75rem !important; line-height: 1.15 !important; margin-bottom: 1rem !important; }
            .hero-main-layout p { font-size: 0.95rem !important; margin-bottom: 1.25rem !important; }
            .hero-cta-wrap { flex-direction: column !important; gap: 10px !important; }
            .hero-cta-wrap { align-items: flex-start !important; }
            .hero-cta-wrap a { width: 100% !important; justify-content: flex-start !important; padding: 16px 20px !important; font-size: 16px !important; border-radius: 12px !important; text-align: left !important; }
            .hero-trust-bar { justify-content: flex-start !important; gap: 1rem !important; }
            /* Réduire les espacements hero sur mobile */
            .hero-section { padding-top: 1.5rem !important; padding-bottom: 2rem !important; }
            .hero-main-layout { margin-bottom: 2rem !important; }
            .hero-main-layout > div:first-child > div:first-child { margin-bottom: 0.75rem !important; }
        }
        @media (max-width: 374px) {
            .hero-main-layout h1 { font-size: 1.5rem !important; }
        }
    

/* ===== bloc 2, ex-ligne 313 de nl-pages/index.php ===== */

            /* Image en <img> pleine largeur, ratio respecté (jamais recadrée). */

            /* Mini-cartes à cheval sur la frontière hero / section suivante.
               --hmc-half = moitié d'une carte, soit ce qui déborde en dessous. */
            :root{ --hmc-half:152px; }

            /* Fond = couleur du fond de l'image (raccord invisible).
               min-height = hauteur affichée de l'image (ratio 821/1915), plafonnée à sa taille native. */
            #hero-v2{ position:relative; background:#f2f5f3; padding:0 !important; overflow:visible; min-height:calc(min(100vw, 1914px) * 0.4295); }

            /* Le <picture> recadre l'image (pas le hero) : les cartes débordent sans que l'image dépasse. */
            #hero-v2 .hv2-pic{ position:absolute; inset:0; display:block; overflow:hidden; z-index:0; }

            /* Image ancrée en bas à droite, jamais agrandie au-delà de sa taille native (nette).
               Le fond du hero, de même couleur, masque l'espace restant à gauche et en haut. */
            #hero-v2 .hv2-bg{ position:absolute; bottom:0; right:0; z-index:0; display:block; width:100%; max-width:1914px; height:auto; aspect-ratio:1914 / 822; object-fit:cover; object-position:center bottom; }
            /* Desktop : texte en haut, mini-cartes en bas */
            #hero-v2 > .container{
                position:relative; z-index:2;
                display:flex; flex-direction:column; justify-content:flex-start;
                padding-top:clamp(12px,2.6vw,38px); padding-bottom:0;
            }
            #hero-v2 .hero-main-layout{ width:100%; margin-bottom:0 !important; align-items:flex-start !important; }
            #hero-v2 .hero-text-col{ max-width:54%; margin-top:0; }

            /* Texte foncé (zone gauche de l'image claire) */
            #hero-v2 .hero-main-layout h1,
            #hero-v2 .hero-typewriter-line,
            #hero-v2 #heroTypewriter{ color:#0f2b46 !important; }
            #hero-v2 .gradient-text-green{ background:none !important; -webkit-text-fill-color:#4e7d1e !important; color:#4e7d1e !important; }
            #hero-v2 .hero-underline{ background:rgba(140,198,63,0.45); }
            #hero-v2 .hero-main-layout p{ color:#33485f !important; }
            /* « chaque étape » : forcé foncé pour rester lisible sur l'image claire */
            #hero-v2 .hero-main-layout p strong[style*="color:white"]{ color:#0f2b46 !important; }
            #hero-v2 .hero-main-layout p strong[style*="8cc63f"]{ color:#4e7d1e !important; }
            /* Espacements resserrés pour que les avis tiennent à l'écran */
            #hero-v2 .hero-text-col > p{ margin-bottom:1.2rem !important; }
            #hero-v2 .hero-cta-wrap{ margin-bottom:1.4rem !important; }
            #hero-v2 .hero-trust-bar strong{ color:#0f2b46 !important; }
            #hero-v2 .hero-cta-wrap a[href="/nl/theorie"]{ background:#ffffff !important; color:#0f2b46 !important; border:1px solid rgba(15,43,70,0.18) !important; }

            /* Mini-cartes produits */
            #hero-v2 .hero-mini-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; width:100%; margin-top:clamp(6px,1.4vw,16px);
                /* Décalage visuel vers le bas ; la place reste réservée dans le hero */
                position:relative; z-index:3; top:var(--hmc-half); }
            /* La section suivante accueille la moitié basse des cartes */
            .cx-section{ padding-top:calc(var(--hmc-half) + 2.75rem); }
            /* ── LES TROIS CARTES ─────────────────────────────────────────
               Copie conforme du bloc de accueil.css : seul le FOND a change,
               de bleu fonce a blanc. Les deux feuilles sont paralleles, toute
               retouche ici doit etre faite la-bas aussi. Le detail du pourquoi
               est commente dans la version francaise. */
            #hero-v2 .hmc{ background:#fff; border:1px solid rgba(15,43,70,0.10); border-radius:18px; overflow:hidden; text-decoration:none; display:flex; flex-direction:column; box-shadow:0 10px 26px rgba(15,43,70,0.12); transition:transform .15s, box-shadow .15s, border-color .15s; }
            #hero-v2 .hmc:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(15,43,70,0.18); border-color:rgba(140,198,63,0.55); }
            #hero-v2 .hmc-ill{ width:100%; height:162px; object-fit:contain; background:#f2f5f3; display:block; }
            /* Voir accueil.css : la taille du titre suit la largeur de la
               carte (cqi) pour qu'il tienne toujours sur une seule ligne. */
            #hero-v2 .hmc{ container-type:inline-size; }
            #hero-v2 .hmc-title{ font-weight:800; font-size:1.24rem; letter-spacing:-0.01em; color:#0f2b46;
                white-space:nowrap; }
            /* 2026-09-28 : meme formule que accueil.css (voir le detail la-bas).
               « Risicoperceptietest » est plus court que le titre francais : il
               garde plus de marge encore, et n'est plus rapetisse pour rien
               (14,5 px sur PC avec 4.3cqi, 18,5 px maintenant). */
            #hero-v2 .hmc-tpr .hmc-title{ font-size:min(1.24rem, calc(6.4cqi - 3px)); }
            #hero-v2 .hmc-body{ padding:13px 18px 18px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; }
            #hero-v2 .hmc-price{ font-weight:900; font-size:1.4rem; color:#6c9c22; letter-spacing:-0.02em; line-height:1.1; }
            #hero-v2 .hmc-btn{ margin-top:8px; background:#8cc63f; color:#0f2b46; font-weight:800; font-size:0.82rem; padding:9px 20px; border-radius:9999px; }
            #hero-v2 .hmc-tpr{ cursor:pointer; }
            /* 2026-09-28 : les trois cartes affichent un prix (ligne verte) et
               une pastille pour ce qui est offert, posee SUR l'image : elle ne
               change pas la hauteur des cartes, qui restent alignees.
               « Des » / « Vanaf » plus discret que le montant. */
            #hero-v2 .hmc{ position:relative; }
            #hero-v2 .hmc-tag{ position:absolute; top:12px; left:12px; z-index:1; padding:5px 11px; border-radius:9999px;
                background:#8cc63f; color:#0f2b46; font-size:0.7rem; font-weight:800; letter-spacing:.04em;
                text-transform:uppercase; line-height:1.2; box-shadow:0 4px 12px rgba(15,43,70,0.18); }
            #hero-v2 .hmc-des{ font-size:0.72em; font-weight:700; letter-spacing:0; }

            /* Illustration réservée au mobile ; en desktop c'est l'image de fond (.hv2-bg). */
            #hero-v2 .hero-mobile-illus{ display:none; }

            /* Hero mobile */
            @media (max-width:900px){
                /* Fond clair identique au fond de l'illustration (raccord invisible).
                   overflow:hidden évite tout scroll horizontal. */
                #hero-v2{ display:flex; flex-direction:column; padding:30px 0 30px !important; overflow:hidden; background:#f2f5f3; min-height:0; }

                /* Texte pleine largeur, aligné à gauche */
                #hero-v2 > .container{ order:1; position:static; transform:none; width:100%; height:auto; display:block; padding-bottom:0; }
                #hero-v2 .hero-text-col{ max-width:none; text-align:left; }
                #hero-v2 .hero-trust-bar{ justify-content:flex-start; }

                /* Image de fond desktop masquée ; l'illustration carrée prend le relais. */
                #hero-v2 .hv2-bg{ display:none !important; }
                #hero-v2 .hv2-pic{ display:none !important; }

                :root{ --hmc-half:0px; }

                /* Illustration en fond du bloc-texte : zone claire (haut) derrière le texte,
                   scène (bas) révélée sous le texte grâce au padding-bottom. */
                #hero-v2 .hero-main-layout{ position:relative; display:block; margin-bottom:0 !important; padding-bottom:58vw; }
                #hero-v2 .hero-text-col{ position:relative; z-index:2; }
                /* Pleine largeur écran : déborde la marge px-5 du conteneur. */
                #hero-v2 .hero-mobile-illus{ display:block; position:absolute; left:50%; right:auto; width:100vw; transform:translateX(-50%); bottom:0; top:auto; z-index:0; margin:0; }
                #hero-v2 .hero-mobile-illus img{ width:100%; height:auto; aspect-ratio:1 / 1; object-fit:contain; object-position:center bottom; }

                #hero-v2 .hero-text-col h1{ margin-bottom:1rem !important; }
                #hero-v2 .hero-text-col > p{ margin-bottom:1.4rem !important; max-width:none !important; }

                /* CTA pleine largeur, empilés, alignés à gauche */
                #hero-v2 .hero-cta-wrap{ flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:1.5rem !important; }
                #hero-v2 .hero-cta-wrap > a{ width:100%; justify-content:flex-start; padding:16px 22px !important; font-size:16px !important; border-radius:14px; }

                /* Preuve sociale conservée (en ligne + avis Google), paiement/accès masqués. */
                #hero-v2 .hero-trust-bar{ gap:10px 12px !important; }
                #hero-v2 .hero-trust-extra{ display:none !important; }

                #hero-v2 .hero-mini-cards{ grid-template-columns:1fr; gap:12px; margin-top:22px; }
            }
        

/* ===== bloc 3, ex-ligne 446 de nl-pages/index.php ===== */

                        /* Caret typewriter */
                        .hero-caret {
                            display: inline-block;
                            width: 0.05em;
                            height: 0.85em;
                            background: #8cc63f;
                            margin-left: 0.04em;
                            vertical-align: text-bottom;
                            animation: heroCaretBlink 0.85s steps(1) infinite;
                        }
                        @keyframes heroCaretBlink {
                            0%, 49% { opacity: 1; }
                            50%, 100% { opacity: 0; }
                        }

                        /* Ligne typewriter : la hauteur est réservée par un gabarit invisible
                           (.htw-sizer) contenant la phrase la plus longue, pour éviter le CLS. */
                        .hero-typewriter-line {
                            position: relative;
                            display: block;
                            color: #fff;
                            margin-bottom: 0.15em;
                            font-size: clamp(1.5rem, 5.2vw, 3.05rem);
                        }
                        .htw-sizer { visibility: hidden; }
                        .htw-anim {
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            width: 100%;
                        }
                        #heroTypewriter {
                            display: inline;
                            word-break: normal;
                            overflow-wrap: break-word;
                        }

                        /* Ligne 2 : "Réussis du premier coup" plus grand pour faire l'accroche */
                        .hero-second-line {
                            display: inline-block;
                            position: relative;
                            font-size: clamp(1.8rem, 5.9vw, 3.35rem);
                            line-height: 1.1;
                        }
                        .hero-underline {
                            position: absolute;
                            bottom: -4px;
                            left: 0;
                            width: 100%;
                            height: 6px;
                            background: rgba(140, 198, 63, 0.3);
                            border-radius: 3px;
                        }

                        /* Mobile : ajustements fins */
                        @media (max-width: 640px) {
                            /* Les deux lignes du titre gardent des tailles proches (ratio ~0,92). */
                            .hero-typewriter-line { font-size: clamp(1.6rem, 7.4vw, 2.2rem); }
                            .hero-second-line { font-size: clamp(1.75rem, 8vw, 2.4rem); }
                        }
                    

/* ===== bloc 4, ex-ligne 793 de nl-pages/index.php ===== */

        .cx-marquee {
            position: relative;
            width: 100%;
            overflow: hidden;
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
        }
        .cx-marquee + .cx-marquee { margin-top: 14px; }
        .cx-track {
            display: flex;
            width: max-content;
            gap: 12px;
            padding: 2px 0;
            animation: cxScroll 70s linear infinite;
            will-change: transform;
        }
        .cx-track.cx-rev { animation-direction: reverse; animation-duration: 88s; }
        .cx-marquee:hover .cx-track { animation-play-state: paused; }
        @keyframes cxScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        .cx-chip {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 11px 20px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 9999px;
            color: #e5e7eb;
            text-decoration: none;
            font-size: 15px;
            font-weight: 600;
            white-space: nowrap;
            transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
        }
        .cx-chip:hover {
            background: rgba(140,198,63,0.12);
            border-color: rgba(140,198,63,0.45);
            color: #fff;
            transform: translateY(-2px);
        }
        .cx-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
        @media (max-width: 640px) {
            .cx-chip { padding: 9px 16px; font-size: 13.5px; gap: 7px; }
            .cx-track { gap: 10px; animation-duration: 48s; }
            .cx-track.cx-rev { animation-duration: 60s; }
        }
        @media (prefers-reduced-motion: reduce) {
            .cx-track { animation: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
            .cx-track::-webkit-scrollbar { display: none; }
            .cx-marquee { -webkit-mask-image: none; mask-image: none; }
        }
    

/* ===== bloc 5, ex-ligne 890 de nl-pages/index.php ===== */

        /* ===== Section presse — structure (couleurs claires : theme-home.css) ===== */
        /* 6 médias : 6 se divise par 2 et par 3, donc aucune ligne bancale —
           2 col. mobile (3 lignes), 3 col. tablette (2 lignes), 6 col. desktop. */
        .pw-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }
        @media (min-width: 640px)  { .pw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
        @media (min-width: 1100px) { .pw-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } }

        /* Le fond / la bordure viennent de .glass-card : géré dans les 2 thèmes. */
        .pw-card {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            padding: 34px 20px 30px;
            border-radius: 18px;
            text-decoration: none;
            overflow: hidden;
            transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
        }
        /* Liseré aux couleurs du média, sur toute la largeur, au survol */
        .pw-card::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: var(--pw-accent, #8cc63f);
            transform: scaleX(0);
            transition: transform .35s cubic-bezier(.2,.7,.3,1);
        }
        .pw-card:hover::before,
        .pw-card:focus-visible::before { transform: scaleX(1); }
        .pw-card:hover,
        .pw-card:focus-visible {
            transform: translateY(-5px);
            box-shadow: 0 18px 34px -16px rgba(0,0,0,0.55);
        }

        /* Logos : VRAIES couleurs, aucun filtre.
           La plaque blanche garantit qu'un logo s'affiche correctement quelles que
           soient ses couleurs (le bleu RTBF #004296 serait illisible sur carte navy).
           En mode clair la carte est déjà blanche : la plaque ne se voit pas. */
        .pw-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 68px;
            padding: 11px 14px;
            background: #ffffff;
            border-radius: 12px;
            transition: transform .3s ease;
        }
        .pw-card:hover .pw-logo { transform: scale(1.04); }
        .pw-logo img { max-height: 46px; max-width: 100%; width: auto; height: auto; display: block; }

        /* Wordmarks de secours — n'apparaissent QUE si le fichier logo est absent.
           Posés sur la plaque blanche : couleurs identiques dans les deux thèmes. */
        .pw-mark { font-weight: 900; line-height: 1; white-space: nowrap; color: #14213a; }
        .pw-mark-rtbf        { font-size: 1.9rem;  letter-spacing: -.05em;  text-transform: lowercase; color: #004296; }
        .pw-mark-sudinfo     { font-size: 1.65rem; letter-spacing: -.035em; text-transform: uppercase; }
        .pw-mark-sudinfo b   { color: #0000ff; font-weight: 900; }
        .pw-mark-lacapitale  { font-size: 1.35rem; letter-spacing: -.02em; }
        .pw-mark-lacapitale b { color: #ee4023; font-weight: 900; }
        .pw-mark-bx1 {
            font-size: 1.2rem; letter-spacing: .04em;
            color: #ffffff; background: #20003f;
            padding: 9px 13px; border-radius: 6px;
        }
        /* Le logo BX1 est CARRÉ, les autres sont des mots-symboles très larges.
           À hauteur égale il paraîtrait deux fois plus petit : on lui accorde
           quelques pixels de plus pour équilibrer la ligne. */
        .pw-logo img[src*="bx1"] { max-height: 56px; }
        .pw-mark-belafrika   { font-size: 1.45rem; letter-spacing: -.02em; }
        .pw-mark-belafrika b { color: #e07d14; font-weight: 900; }
        .pw-mark-bruzz {
            font-size: 1.4rem;
            letter-spacing: .07em;
            color: #ffffff;
            background: #ed1d24;
            padding: 9px 14px;
            border-radius: 6px;
        }

        .pw-kind {
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: #94a3b8;
            text-align: center;
            margin: 0;
        }
        .pw-quote {
            font-size: .86rem;
            line-height: 1.55;
            color: #cbd5e1;
            text-align: center;
            font-style: italic;
            margin: 0;
        }
        .pw-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: auto;
            padding-top: 4px;
            font-size: .79rem;
            font-weight: 800;
            color: #8cc63f;
            transition: gap .25s ease;
        }
        .pw-card:hover .pw-link { gap: 10px; }

        @media (max-width: 420px) {
            .pw-card { padding: 26px 12px 22px; gap: 11px; }
            .pw-logo { min-height: 46px; }
            .pw-mark-rtbf      { font-size: 1.5rem; }
            .pw-mark-sudinfo   { font-size: 1.3rem; }
            .pw-mark-belafrika { font-size: 1.12rem; }
            .pw-mark-bruzz     { font-size: 1.1rem; padding: 7px 11px; }
        }

        @media (prefers-reduced-motion: reduce) {
            .pw-card, .pw-card::before, .pw-logo, .pw-link { transition: none; }
            .pw-card:hover { transform: none; }
        }
    

/* ===== bloc 6, ex-ligne 1142 de nl-pages/index.php ===== */

                    .pp-shock { max-width:760px; margin:2rem auto 0; display:flex; align-items:center; gap:26px; padding:24px 32px;
                        background:linear-gradient(135deg, rgba(239,68,68,0.12), rgba(239,68,68,0.04)); border:1px solid rgba(239,68,68,0.30); border-left:6px solid #ef4444; border-radius:16px; text-align:left; box-shadow:0 14px 36px -14px rgba(239,68,68,0.30); }
                    .pp-shock-num { font-size:4rem; font-weight:900; color:#f87171; line-height:0.9; flex-shrink:0; letter-spacing:-2.5px; }
                    .pp-shock-txt { font-size:16px; color:#e8edf3; line-height:1.55; margin:0; }
                    .pp-shock-txt strong { color:#fff; font-weight:800; }
                    @media (max-width:560px) { .pp-shock { flex-direction:column; text-align:center; gap:8px; padding:22px 20px; } .pp-shock-num { font-size:3.2rem; } .pp-shock-txt { font-size:14.5px; } }
                

/* ===== bloc 7, ex-ligne 1164 de nl-pages/index.php ===== */

                .pp-card { position:relative; display:flex; flex-direction:column; height:100%; min-height:388px;
                    background:#12314f; border:1px solid rgba(255,255,255,0.07); border-radius:18px; overflow:hidden; transition:border-color .25s; }
                .pp-card-media { position:relative; aspect-ratio:16/10; overflow:hidden; background:#1e3a57; flex-shrink:0; }
                .pp-card-media .pp-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
                .pp-card-media::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(15,43,70,0.5), transparent 45%); pointer-events:none; }
                /* Pastilles posées sur la photo : z-index 2 pour passer au-dessus du voile. */
                .pp-region, .pp-disc { position:absolute; top:10px; z-index:2; font-size:10.5px; font-weight:800;
                    letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:9999px; line-height:1.2; }
                .pp-region { left:10px; border:1px solid; }
                .pp-disc { right:10px; background:#8cc63f; color:#0a1929; border:1px solid rgba(10,25,41,0.2); }
                .pp-card-body { padding:16px 16px 15px; flex:1; display:flex; flex-direction:column; }
                .pp-card-title { font-size:1.05rem; font-weight:800; color:#fff; margin:0 0 9px; line-height:1.25; }
                .pp-card-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
                .pp-card-meta span { font-size:11.5px; color:#93a6bd; display:inline-flex; align-items:center; gap:5px; }
                .pp-card-desc { font-size:12.5px; color:#8497ad; line-height:1.5; margin:0 0 14px; flex:1;
                    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
                .pp-card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px;
                    padding-top:13px; border-top:1px solid rgba(255,255,255,0.07); }
                .pp-price { display:flex; align-items:baseline; gap:7px; }
                .pp-price-old { font-size:12px; color:#64748b; text-decoration:line-through; }
                .pp-price-new { font-size:20px; font-weight:800; color:#fff; line-height:1; }
                .pp-cta { display:inline-flex; align-items:center; gap:7px; background:#8cc63f; color:#0a1929;
                    font-weight:800; font-size:13px; padding:9px 15px; border-radius:10px; transition:background .2s; }
                .pp-cta i { font-size:11px; transition:transform .2s; }
                .pp-slide:hover .pp-card { border-color:rgba(140,198,63,0.4); }
                .pp-slide:hover .pp-cta { background:#7ab62f; }
                .pp-slide:hover .pp-cta i { transform:translateX(3px); }
            

/* ===== bloc 8, ex-ligne 1290 de nl-pages/index.php ===== */

                .pp-incl { max-width:64rem; margin:2.25rem auto 0; background:rgba(30,58,87,0.35);
                    border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding:20px 20px 16px; }
                .pp-incl-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:8px; flex-wrap:wrap; }
                .pp-incl-head h3 { font-size:1.1rem; font-weight:800; color:#fff; margin:0; line-height:1.2; }
                .pp-incl-head h3 span { color:#8cc63f; }
                .pp-incl-badge { flex-shrink:0; font-size:11px; font-weight:700; color:#8cc63f;
                    background:rgba(140,198,63,0.1); border:1px solid rgba(140,198,63,0.28); padding:4px 11px; border-radius:99px; white-space:nowrap; }
                /* 3 COLONNES en grille — identique à index.php (version FR).
                   C'est la grille qui aligne, pas le flux : toutes les
                   cellules font la même largeur, donc les colonnes tombent
                   exactement l'une sous l'autre. Les cartes remplissent leur
                   cellule, sinon le bord droit part en dents de scie. */
                .pp-incl-grid { display:grid; grid-template-columns:1fr; gap:8px; }
                .pp-incl-item { display:flex; align-items:center; gap:9px; min-width:0;
                    padding:8px 12px 8px 8px; border-radius:11px;
                    background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.07);
                    transition:border-color .15s, background .15s; }
                .pp-incl-item:hover { background:rgba(140,198,63,0.09); border-color:rgba(140,198,63,0.3); }
                /* Numéro en pastille */
                .pp-incl-item .n { flex-shrink:0; width:21px; height:21px; display:inline-flex; align-items:center; justify-content:center;
                    font-size:10.5px; font-weight:800; color:#0f2b46; background:#8cc63f; border-radius:50%; font-variant-numeric:tabular-nums; }
                /* Le texte peut revenir à la ligne : indispensable ici, où
                   « De valkuilen die je absoluut moet vermijden » dépasse la
                   largeur d'une colonne sur trois. */
                .pp-incl-item .t { font-size:13px; font-weight:600; color:#e7eef6; line-height:1.3; min-width:0; }
                .pp-incl-foot { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:14px; padding-top:13px; border-top:1px solid rgba(255,255,255,0.08); }
                .pp-incl-foot .perk { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:#cbd5e1; }
                .pp-incl-foot .perk strong { color:#fff; font-weight:700; }
                .pp-incl-foot .sep { color:#475569; }
                @media (min-width:560px){ .pp-incl-grid { grid-template-columns:repeat(2,1fr); } }
                @media (min-width:860px){ .pp-incl-grid { grid-template-columns:repeat(3,1fr); } }
                @media (min-width:960px){ .pp-incl { padding:22px 26px 18px; } }
            

/* ===== bloc 9, ex-ligne 1368 de nl-pages/index.php ===== */

    /* Le carrousel reste DANS la colonne de contenu, comme toutes les autres sections.
       Avant : width:100vw + marges négatives, ce qui faisait de cette section la seule
       de la page à toucher les deux bords de l'écran. */
    .pp-carousel-wrap { position: relative; }
    .pp-carousel-track {
        display: flex;
        gap: 18px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        /* Les 4px latéraux laissent respirer l'ombre des cartes aux extrémités. */
        padding: 8px 4px 24px;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .pp-carousel-track::-webkit-scrollbar { display: none; }
    .pp-slide {
        flex: 0 0 300px;
        scroll-snap-align: start;
        transition: opacity 0.25s, transform 0.25s;
    }
    .pp-slide.is-hidden { display: none; }
    .pp-slide > div:hover { transform: translateY(-5px); box-shadow: 0 16px 34px -16px rgba(0,0,0,0.55); }
    .pp-slide:hover .pp-img { transform: scale(1.05); }
    @media (min-width: 768px) {
        .pp-slide { flex: 0 0 320px; }
        .pp-arrow { display: flex !important; }
        /* Le translateY(-50%) doit etre repete : transform n'est pas cumulatif, et un
           simple scale() ici ferait retomber la fleche sous le centre du rail. */
        .pp-arrow:hover { background: rgba(140,198,63,0.25) !important; transform: translateY(-50%) scale(1.05) !important; }
        .pp-stat-hide-mobile { display: inline-flex !important; }
    }
    .pp-swipe-hint { display: none; }
    @media (max-width: 767px) {
        .pp-slide { flex: 0 0 280px; }
        .pp-slide > div { min-height: 340px !important; }
        .pp-swipe-hint {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 12px;
            font-weight: 600;
            color: #8cc63f;
            margin-bottom: 12px;
            opacity: 0.85;
        }
        .pp-swipe-hint i { font-size: 11px; }
    }

    /* ============ FILTRES + SEARCH ============ */
    .pp-filter {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.08);
        color: #cbd5e1;
        padding: 9px 14px;
        border-radius: 9999px;
        font-size: 13px;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
        white-space: nowrap;
        --accent: #8cc63f;
        --accent-bg: rgba(140,198,63,0.15);
        --accent-border: rgba(140,198,63,0.4);
    }
    .pp-filter:hover {
        background: rgba(255,255,255,0.07);
        color: #fff;
        border-color: rgba(255,255,255,0.18);
    }
    .pp-filter.active {
        background: var(--accent-bg);
        border-color: var(--accent-border);
        color: var(--accent);
    }
    .pp-filter.active i { color: var(--accent); }
    .pp-filter:active { transform: scale(0.97); }
    .pp-filter i { font-size: 12px; }
    .pp-filter-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        padding: 1px 6px;
        background: rgba(255,255,255,0.06);
        color: inherit;
        font-size: 11px;
        font-weight: 700;
        border-radius: 9999px;
        margin-left: 2px;
    }
    .pp-filter.active .pp-filter-count {
        background: rgba(0,0,0,0.25);
    }

    /* Search */
    .pp-search input:focus {
        border-color: rgba(140,198,63,0.5) !important;
        background: rgba(15,43,70,0.95) !important;
        box-shadow: 0 0 0 3px rgba(140,198,63,0.1);
    }
    .pp-search input::placeholder { color: #5a6878; }

    @media (max-width: 540px) {
        .pp-toolbar { flex-direction: column; align-items: stretch; }
        .pp-search { width: 100%; flex: 0 0 auto !important; }
        .pp-filters { justify-content: flex-start; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 4px; }
        .pp-filters::-webkit-scrollbar { display: none; }
        .pp-filter { padding: 8px 12px; font-size: 12px; }
    }
    

/* ===== bloc 10, ex-ligne 1704 de nl-pages/index.php ===== */

            /* ============================================================
               CARTE PRINCIPALE — la théorie occupe toute la largeur, avec
               l'image à gauche et le contenu à droite sur grand écran.
               ============================================================ */
            .prep-main {
                display:grid; grid-template-columns:1fr; gap:0;
                background:rgba(15,31,55,0.6);
                backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
                border:1px solid rgba(255,255,255,0.07); border-radius:22px;
                overflow:hidden; text-decoration:none; color:#fff;
                transition:transform .25s, border-color .25s, box-shadow .25s;
            }
            @media (min-width:860px){ .prep-main{ grid-template-columns:minmax(0,42%) minmax(0,1fr); } }
            .prep-main:hover { transform:translateY(-5px); border-color:rgba(140,198,63,0.45); box-shadow:0 22px 46px -14px rgba(0,0,0,0.6); }
            .prep-main-visual { position:relative; min-height:230px; overflow:hidden; background:#0b1f37; }
            .prep-main-visual img { width:100%; height:100%; object-fit:cover; object-position:50% 42%; display:block; transition:transform .55s ease; }
            .prep-main:hover .prep-main-visual img { transform:scale(1.05); }
            .prep-main-body { padding:26px 28px 28px; display:flex; flex-direction:column; }
            .prep-main-title { font-size:clamp(1.35rem,2.4vw,1.7rem); font-weight:800; line-height:1.2; margin-bottom:10px; }
            .prep-main-desc { font-size:0.95rem; color:#94a3b8; line-height:1.6; margin-bottom:20px; }

            /* Chiffres : ce qui prouve le sérieux du produit, en évidence
               plutôt que noyé dans des pastilles grises. */
            .prep-figs { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:24px; }
            @media (min-width:520px){ .prep-figs{ grid-template-columns:repeat(4,1fr); } }
            .prep-fig { text-align:center; padding:12px 6px; border-radius:12px;
                background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); }
            /* clamp : « dès 300 € » et « 2 échecs » sont plus longs que « 49 % ».
               Sans ça, la valeur débordait ou cassait sur deux lignes. */
            .prep-fig b { display:block; font-size:clamp(0.95rem,2.6vw,1.3rem); font-weight:900;
                color:#e2e8f0; line-height:1.15; white-space:nowrap; }
            .prep-fig span { font-size:11.5px; color:#94a3b8; display:block; margin-top:3px; line-height:1.3; }
            /* Les trois premières cases sont le problème, la dernière est la
               réponse : elle seule porte le vert de la marque. */
            .prep-fig-win { background:rgba(140,198,63,0.12); border-color:rgba(140,198,63,0.4); }
            .prep-fig-win b { color:#8cc63f; }
            .prep-main-foot { margin-top:auto; display:flex; flex-direction:column; }
            .prep-main-cta { display:inline-flex; flex-direction:column; align-items:center; gap:2px;
                padding:14px 22px; border-radius:14px; font-weight:800; font-size:0.98rem;
                background:linear-gradient(135deg,#8cc63f,#7ab62f); color:#0a1929; text-align:center; }

            /* Garantie sans-faute — mêmes teintes dorées que theorie/index.php,
               pour que l'engagement se reconnaisse d'une page à l'autre. */
            .prep-gar { display:flex; align-items:center; gap:12px; margin-top:12px;
                padding:12px 15px; border-radius:12px; text-align:left;
                /* Degrade a quatre bandes : un or plat fait sticker, un or veine fait lingot. */
                background:linear-gradient(135deg,rgba(245,158,11,0.22) 0%,rgba(252,211,77,0.13) 38%,
                    rgba(245,158,11,0.20) 58%,rgba(249,115,22,0.10) 100%);
                border:1.5px solid rgba(245,158,11,0.5);
                position:relative; overflow:hidden; isolation:isolate;
                animation:prepGarGlow 6s ease-in-out infinite; }
            /* Le reflet traverse, puis longue pause : sans elle l'effet devient un clignotant. */
            .prep-gar::after { content:''; position:absolute; inset:0; pointer-events:none;
                background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,0.40) 45%,
                    rgba(255,241,199,0.72) 50%,rgba(255,255,255,0.40) 55%,transparent 70%);
                transform:translateX(-115%);
                animation:prepGarSheen 6s ease-in-out infinite; }
            @keyframes prepGarSheen { 0%{transform:translateX(-115%)} 22%,100%{transform:translateX(115%)} }
            /* Le bord s'allume pile au passage du reflet : c'est ce qui donne le relief. */
            @keyframes prepGarGlow {
                0%,100% { box-shadow:0 2px 14px rgba(245,158,11,0.12); border-color:rgba(245,158,11,0.45) }
                14%     { box-shadow:0 3px 24px rgba(245,158,11,0.32); border-color:rgba(252,211,77,0.9) } }
            .prep-gar-ic { width:26px; height:26px; flex-shrink:0; fill:#fbbf24;
                transform-origin:50% 32%;
                animation:prepGarMedal 6s ease-in-out infinite; }
            .prep-gar-star { fill:#0f2b46; }
            /* La medaille accroche la lumiere et oscille : un metal suspendu ne reste pas fige. */
            @keyframes prepGarMedal {
                0%,100% { transform:rotate(0deg); filter:drop-shadow(0 0 3px rgba(251,191,36,0.45)) }
                12%     { transform:rotate(-8deg); filter:drop-shadow(0 0 9px rgba(252,211,77,0.95)) }
                24%     { transform:rotate(5deg) }
                34%     { transform:rotate(-2deg) }
                44%     { transform:rotate(0deg) } }
            /* Au survol on rapproche les passages : la lumiere repond au geste. */
            .prep-gar:hover,
            .prep-gar:hover::after,
            .prep-gar:hover .prep-gar-ic { animation-duration:2.2s; }
            @media (prefers-reduced-motion:reduce) {
                .prep-gar, .prep-gar::after, .prep-gar-ic { animation:none }
                .prep-gar::after { display:none } }
            .prep-gar-tag { display:block; font-size:10.5px; font-weight:800; letter-spacing:.06em;
                text-transform:uppercase; color:#fbbf24; margin-bottom:2px; }
            .prep-gar b { display:block; font-size:13.5px; font-weight:800; color:#fde68a; line-height:1.35; }
            .prep-gar b span { color:#fff; }
            .prep-main-desc strong { color:#e2e8f0; }

            /* Les chiffres, le bouton et la garantie vivaient DANS la carte,
               quand la carte entiere etait un lien. La carte est devenue un
               quiz : ils sont maintenant en dessous, toujours visibles sans
               avoir a jouer, et le bouton est redevenu un vrai lien.
               A garder identique a index.php (version FR). */
            .prep-after { display:flex; flex-direction:column; }
            a.prep-main-cta { text-decoration:none; }
            a.prep-main-cta:hover { filter:brightness(1.06); }

            /* ============================================================
               MODE CLAIR — volontairement ICI et non dans theme-home.css.
               Cette section a deja casse deux fois parce que ses couleurs
               claires vivaient dans un fichier separe : index.php uploade
               sans theme-home.css, et tout repassait en teintes sombres,
               illisibles sur le fond blanc. En les gardant a cote du
               balisage qu'elles habillent, les deux voyagent ensemble.
               ============================================================ */
            html[data-theme="light"] .prep-main       { background:#fff; border-color:rgba(16,42,69,.12); color:#112a45; }
            html[data-theme="light"] .prep-main:hover { box-shadow:0 20px 40px -16px rgba(16,42,69,.28); }
            html[data-theme="light"] .prep-main-title { color:#112a45; }
            html[data-theme="light"] .prep-main-desc  { color:#51647a; }
            html[data-theme="light"] .prep-main-desc strong { color:#112a45; }
            html[data-theme="light"] .prep-main-visual { background:#e8eef6; }
            html[data-theme="light"] .prep-fig        { background:#f4f7fb; border-color:rgba(16,42,69,.10); }
            html[data-theme="light"] .prep-fig b      { color:#112a45; }
            html[data-theme="light"] .prep-fig span   { color:#51647a; }
            html[data-theme="light"] .prep-fig-win    { background:rgba(140,198,63,.14); border-color:rgba(140,198,63,.5); }
            html[data-theme="light"] .prep-fig-win b  { color:#4e7d1f; }
            /* Le doré est conçu pour du navy : sur blanc, #fde68a disparaît.
               OR OPAQUE, et non plus quatre rgba à 10-20 % d'alpha. Cette section
               porte deux halos verts en radial-gradient flouté (rgba(140,198,63))
               posés derrière son contenu. Sur le fond sombre ils ne se voient pas,
               mais en mode clair ils traversaient le doré translucide : la garantie
               virait au vert pâle et perdait à la fois sa couleur et son relief.
               Un fond plein règle les deux d'un coup, rien ne passe plus au travers,
               et l'or est enfin un or, pas un voile.
               Valeurs identiques à accueil.css : c'est le même bloc, dans l'autre
               langue. Toute retouche se fait dans les deux fichiers. */
            html[data-theme="light"] .prep-gar        { background:linear-gradient(135deg,#fbe3a6 0%,
                                                            #f7d27c 38%,#f2c55e 58%,#ecb63f 100%);
                                                        border-color:#b4790d;
                                                        animation-name:prepGarGlowLight; }
            /* Le reflet passe sur de l'or saturé, plus sur un voile : un blanc à
               55 % le délavait le temps du passage. */
            html[data-theme="light"] .prep-gar::after { background:linear-gradient(105deg,transparent 30%,
                                                            rgba(255,255,255,.42) 44%,rgba(255,243,208,.80) 50%,
                                                            rgba(255,255,255,.42) 56%,transparent 70%); }
            @keyframes prepGarGlowLight {
                0%,100% { box-shadow:0 2px 12px rgba(146,94,8,.18); border-color:#b4790d }
                14%     { box-shadow:0 4px 22px rgba(180,111,7,.42); border-color:#e0a21a } }
            /* Teintes assombries en conséquence : sur l'ancien fond presque blanc,
               un brun moyen suffisait ; sur l'or plein il faut descendre. */
            html[data-theme="light"] .prep-gar-ic     { fill:#8a5308; }
            html[data-theme="light"] .prep-gar-star   { fill:#fde9b8; }
            html[data-theme="light"] .prep-gar-tag    { color:#7a4a06; }
            html[data-theme="light"] .prep-gar b      { color:#40260a; }
            html[data-theme="light"] .prep-gar b span { color:#0f2b46; }
            html[data-theme="light"] .prep-soon       { background:rgba(168,85,247,.08); border-color:rgba(147,51,234,.35); }
            html[data-theme="light"] .prep-soon:hover { background:rgba(168,85,247,.14); }
            html[data-theme="light"] .prep-soon-ic    { background:rgba(147,51,234,.14); color:#7e22ce; }
            html[data-theme="light"] .prep-soon-title { color:#112a45; }
            html[data-theme="light"] .prep-soon-desc  { color:#51647a; }
            /* Voir accueil.css : badge « Nieuw » lisible en mode clair. */
            html[data-theme="light"] .prep-badge-soon { background:rgba(147,51,234,.12); color:#6b21a8; border-color:rgba(147,51,234,.45); }
            .prep-main-cta-sub { font-size:11px; font-weight:600; opacity:.75; letter-spacing:.01em; }
            .prep-badge-free { background:rgba(34,197,94,0.22); color:#dcfbd4; border:1px solid rgba(34,197,94,0.55); }

            /* ============================================================
               BANDEAU SECONDAIRE — le TPR n'est pas encore sorti : il garde
               sa capture d'email sans occuper la moitié de la section.
               ============================================================ */
            /* 2026-09-28 : le bandeau est devenu un <a> (voir accueil.css). */
            .prep-soon { display:flex; align-items:center; gap:16px; flex-wrap:wrap;
                text-decoration:none; color:inherit;
                margin-top:18px; padding:16px 20px; border-radius:18px; cursor:pointer;
                background:rgba(168,85,247,0.07); border:1px solid rgba(168,85,247,0.28);
                transition:background .2s, border-color .2s; }
            .prep-soon:hover { background:rgba(168,85,247,0.13); border-color:rgba(168,85,247,0.5); }
            .prep-soon:focus-visible { outline:2px solid #c084fc; outline-offset:3px; }
            .prep-soon-ic { width:44px; height:44px; border-radius:12px; flex-shrink:0;
                display:flex; align-items:center; justify-content:center; font-size:18px;
                background:rgba(168,85,247,0.18); color:#c084fc; }
            .prep-soon-txt { flex:1; min-width:200px; }
            .prep-soon-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
                font-size:1rem; font-weight:800; color:#fff; margin:0 0 3px; }
            .prep-soon-desc { font-size:13px; color:#94a3b8; line-height:1.5; margin:0; }
            .prep-badge-soon { background:rgba(168,85,247,0.28); color:#efe0ff; border:1px solid rgba(168,85,247,0.6); }
            .prep-soon-cta { flex-shrink:0; display:inline-flex; align-items:center; gap:8px;
                padding:10px 18px; border-radius:11px; font-size:13.5px; font-weight:700;
                background:rgba(168,85,247,0.9); color:#fff; }
            .prep-card {
                display:flex; flex-direction:column;
                background:rgba(15,31,55,0.6);
                backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
                border:1px solid rgba(255,255,255,0.07); border-radius:22px;
                padding:0; overflow:hidden; text-decoration:none; color:#fff;
                transition:transform .25s, border-color .25s, box-shadow .25s; cursor:pointer;
            }
            .prep-card:hover { transform:translateY(-6px); box-shadow:0 22px 46px -14px rgba(0,0,0,0.6); }
            .prep-card:active { transform:translateY(-2px) scale(0.99); }
            .prep-theory:hover { border-color:rgba(140,198,63,0.45); }
            .prep-tpr:hover { border-color:rgba(168,85,247,0.45); }
            /* Visuel héros */
            .prep-visual { position:relative; height:208px; overflow:hidden; background:#0b1f37; }
            .prep-visual img { width:100%; height:100%; object-fit:cover; object-position:50% 40%; display:block; transition:transform .55s ease; }
            .prep-card:hover .prep-visual img { transform:scale(1.06); }
            /* Dégradé d'assombrissement retiré : les images s'affichent telles quelles. */
            .prep-visual .prep-badge { position:absolute; top:14px; right:14px; z-index:2; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); box-shadow:0 4px 16px rgba(0,0,0,0.4); }
            .prep-body { display:flex; flex-direction:column; flex:1; padding:22px 26px 26px; }
            .prep-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
            .prep-icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
            .prep-badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; padding:6px 12px; border-radius:9999px; white-space:nowrap; }
            .prep-title { font-size:1.4rem; font-weight:800; margin-bottom:10px; letter-spacing:-0.01em; line-height:1.2; }
            .prep-desc { font-size:0.95rem; color:#94a3b8; line-height:1.55; margin-bottom:18px; flex:1; }
            .prep-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
            .prep-chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:#cbd5e1; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); padding:6px 11px; border-radius:9999px; }
            .prep-cta { display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:800; font-size:14.5px; padding:13px 20px; border-radius:12px; transition:transform .2s, box-shadow .2s; box-shadow:0 8px 24px -8px rgba(0,0,0,0.5); }
            @media (max-width:480px){
                .prep-card { padding:22px 20px; border-radius:18px; }
                .prep-title { font-size:1.25rem; }
                .prep-icon { width:46px; height:46px; font-size:19px; }
            }
        

/* ===== bloc 11, ex-ligne 2046 de nl-pages/index.php ===== */

        /* ===== Carousel avis Google ===== */
        .gr-track {
            display: flex;
            gap: 18px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            padding: 8px 4px 24px;
            scrollbar-width: none;
            -ms-overflow-style: none;
            -webkit-overflow-scrolling: touch;
        }
        .gr-track::-webkit-scrollbar { display: none; }

        .gr-card {
            flex: 0 0 320px;
            scroll-snap-align: start;
            border-radius: 18px;
            padding: 22px 22px 24px;
            position: relative;
            display: flex;
            flex-direction: column;
            transition: transform 0.25s ease, border-color 0.25s ease;
        }
        .gr-card:hover {
            transform: translateY(-3px);
            border-color: rgba(140,198,63,0.3) !important;
        }

        .gr-google-badge {
            position: absolute;
            top: 14px;
            right: 14px;
            width: 30px;
            height: 30px;
            background: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 14px rgba(0,0,0,0.25);
        }

        .gr-card-head {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 14px;
            padding-right: 38px;
        }
        .gr-avatar, .gr-avatar-img {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 700;
            font-size: 16px;
            object-fit: cover;
        }
        .gr-author { min-width: 0; flex: 1; }
        .gr-name {
            color: #fff;
            font-weight: 700;
            font-size: 15px;
            margin: 0 0 3px;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .gr-stars {
            display: flex;
            align-items: center;
            gap: 2px;
            font-size: 11px;
            line-height: 1;
        }
        .gr-star-on  { color: #fbbf24; }
        .gr-star-off { color: #4b5563; }
        .gr-time {
            color: #6b7280;
            font-size: 11px;
            margin-left: 4px;
            white-space: nowrap;
        }

        .gr-text {
            color: #d1d5db;
            font-size: 14px;
            line-height: 1.55;
            font-style: italic;
            margin: 0;
            display: -webkit-box;
            -webkit-line-clamp: 7;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Dots pagination */
        .gr-dots {
            display: flex;
            justify-content: center;
            gap: 6px;
            margin-top: 4px;
        }
        .gr-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: rgba(255,255,255,0.18);
            border: 0;
            padding: 0;
            cursor: pointer;
            transition: all 0.25s ease;
        }
        .gr-dot.active {
            width: 22px;
            border-radius: 4px;
            background: #8cc63f;
        }

        /* Arrows: visibles uniquement desktop */
        @media (min-width: 1024px) {
            .gr-arrow-left, .gr-arrow-right { display: flex !important; }
            .gr-arrow-left:hover, .gr-arrow-right:hover {
                background: rgba(140,198,63,0.25) !important;
                transform: translateY(-50%) scale(1.05);
            }
        }
        @media (min-width: 768px) {
            .gr-card { flex: 0 0 360px; }
        }
        @media (max-width: 480px) {
            .gr-card { flex: 0 0 86%; padding: 18px 18px 20px; }
            .gr-text { font-size: 13.5px; -webkit-line-clamp: 8; }
        }
    

/* ===== bloc 12, ex-ligne 2286 de nl-pages/index.php ===== */

        .home-blog-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 22px;
        }
        @media (min-width: 768px) {
            .home-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
        }
        @media (min-width: 1024px) {
            .home-blog-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
        }
        .home-blog-grid > a {
            display: block;
            height: 100%;
        }
    

/* ===== bloc 13, ex-ligne 2440 de nl-pages/index.php ===== */

                /* ===== FAQ grille alignée (tuiles régulières) ===== */
                .faq-grid {
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 14px;
                    align-items: start; /* chaque tuile garde sa hauteur ; seule l'ouverte s'agrandit */
                }
                /* 2 colonnes max : plus lisible qu'une grille à 3 colonnes. */
                @media (min-width: 640px)  { .faq-grid { grid-template-columns: repeat(2, 1fr); } }

                /* Tuile : dégradé très léger plutôt qu'un aplat, angles plus généreux.
                   Le backdrop-filter a sauté : il coûte cher au GPU sur 16 tuiles alors
                   que le fond derrière est opaque, donc on ne floutait rien. */
                .faq-item {
                    position: relative;
                    background: linear-gradient(180deg, rgba(37, 68, 102, 0.55), rgba(23, 48, 79, 0.45));
                    border: 1px solid rgba(255, 255, 255, 0.07);
                    border-radius: 18px;
                    overflow: hidden;
                    transition: border-color 0.25s, background 0.25s, transform 0.25s, box-shadow 0.25s;
                }
                /* Liseré d'accent qui se déroule à l'ouverture : indique la tuile active
                   sans avoir à repeindre tout le fond en vert. */
                .faq-item::before {
                    content: '';
                    position: absolute;
                    left: 0; top: 0; bottom: 0;
                    width: 3px;
                    background: linear-gradient(180deg, #a3d95a, #4e7d1f);
                    transform: scaleY(0);
                    transform-origin: top;
                    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                }
                .faq-item:hover {
                    border-color: rgba(140, 198, 63, 0.28);
                    transform: translateY(-2px);
                    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.75);
                }
                .faq-item.is-open {
                    border-color: rgba(140, 198, 63, 0.34);
                    background: linear-gradient(180deg, rgba(47, 82, 120, 0.6), rgba(26, 53, 86, 0.5));
                }
                .faq-item.is-open::before { transform: scaleY(1); }

                .faq-item-btn {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 14px;
                    padding: 18px 20px;
                    background: transparent;
                    border: 0;
                    text-align: left;
                    color: #f1f5f9;
                    font-weight: 600;
                    font-size: 14.5px;
                    font-family: inherit;
                    cursor: pointer;
                }
                /* Pastille teintée au lieu du carré blanc : seize aplats blancs sur du
                   marine tapaient trop fort et datent la section. */
                .faq-icon-box {
                    width: 32px;
                    height: 32px;
                    border-radius: 10px;
                    background: rgba(140, 198, 63, 0.12);
                    border: 1px solid rgba(140, 198, 63, 0.2);
                    color: #a3d95a;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                    font-size: 13px;
                    transition: background 0.25s, border-color 0.25s, color 0.25s;
                }
                .faq-item:hover .faq-icon-box,
                .faq-item.is-open .faq-icon-box {
                    background: rgba(140, 198, 63, 0.2);
                    border-color: rgba(140, 198, 63, 0.38);
                    color: #b6e26b;
                }
                .faq-icon-box i {
                    font-size: 13px;
                    color: inherit;
                }
                .faq-question-text {
                    flex: 1;
                    min-width: 0;
                    line-height: 1.45;
                }
                /* Bascule « + » puis « × » dessinée en CSS : pas de glyphe à charger, et
                   le signe dit l'action (ouvrir / fermer) mieux qu'un chevron. */
                .faq-chevron {
                    position: relative;
                    width: 26px;
                    height: 26px;
                    border-radius: 50%;
                    background: rgba(255, 255, 255, 0.06);
                    border: 1px solid rgba(255, 255, 255, 0.1);
                    flex-shrink: 0;
                    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s, border-color 0.25s;
                }
                .faq-chevron::before,
                .faq-chevron::after {
                    content: '';
                    position: absolute;
                    top: 50%; left: 50%;
                    width: 11px; height: 2px;
                    border-radius: 2px;
                    background: #8cc63f;
                    transform: translate(-50%, -50%);
                }
                .faq-chevron::after { transform: translate(-50%, -50%) rotate(90deg); }
                .faq-item.is-open .faq-chevron {
                    background: rgba(140, 198, 63, 0.18);
                    border-color: rgba(140, 198, 63, 0.35);
                }
                /* Ouverture fluide. L'astuce grid 0fr -> 1fr anime vers la hauteur RÉELLE du
                   texte, ce qu'un max-height fixe ne sait pas faire : trop bas il coupe les
                   réponses longues, trop haut il rend l'animation molle sur les courtes.
                   On garde la classe .hidden du JS mais on la surcharge : deux classes
                   l'emportent sur .hidden seule, quel que soit l'ordre des feuilles. */
                .faq-answer-wrap {
                    display: grid;
                    grid-template-rows: 1fr;
                    padding: 0;
                    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                }
                .faq-answer-wrap.hidden {
                    display: grid;
                    grid-template-rows: 0fr;
                }
                /* Le padding descend sur le <p> : porté par le conteneur, il resterait
                   visible une fois la ligne repliée à 0 et laisserait un blanc. */
                /* Le découpage et l'espacement sont séparés, et doivent le rester :
                   overflow:hidden coupe à la boîte de PADDING. Tant que le padding était
                   sur l'élément découpé, la ligne repliée conservait la hauteur de ce
                   padding et la première ligne du texte y restait lisible. */
                .faq-answer-inner {
                    overflow: hidden;
                    min-height: 0;
                }
                /* 66px = 20 (padding) + 32 (pastille) + 14 (gap) : la réponse s'aligne
                   exactement sous la question, pas sous l'icône. */
                .faq-answer-inner > p {
                    padding: 0 20px 18px 66px;
                    font-size: 13.5px;
                    color: rgba(226, 232, 240, 0.68);
                    line-height: 1.7;
                    margin: 0;
                }
                /* Le focus clavier doit rester visible : la tuile est le seul repère. */
                .faq-item-btn:focus-visible {
                    outline: 2px solid #8cc63f;
                    outline-offset: -3px;
                    border-radius: 18px;
                }
                @media (prefers-reduced-motion: reduce) {
                    .faq-answer-wrap, .faq-item, .faq-item::before, .faq-chevron { transition: none; }
                    .faq-item:hover { transform: none; }
                }
                /* 135° et non 180° : c'est la rotation qui transforme le « + » en « × ».
                   À 180° le signe retomberait exactement sur lui-même, sans rien dire. */
                .faq-item.is-open .faq-chevron {
                    transform: rotate(135deg);
                }
                @media (max-width: 480px) {
                    .faq-item { border-radius: 16px; }
                    .faq-item-btn { padding: 15px 16px; gap: 12px; font-size: 14px; }
                    .faq-icon-box { width: 34px; height: 34px; border-radius: 10px; }
                    .faq-icon-box i { font-size: 14px; }
                    .faq-question-text { font-size: 14px; }
                    .faq-chevron { width: 24px; height: 24px; }
                    .faq-chevron::before, .faq-chevron::after { width: 10px; }
                    /* Le padding vit sur le <p> : la règle mobile doit suivre,
                       sinon la réponse repasse à l'indentation desktop de 66px. */
                    .faq-answer-inner > p { padding: 0 16px 16px 16px; font-size: 13.5px; }
                }
            

/* ===== bloc 14, ex-ligne 2696 de nl-pages/index.php ===== */

        /* ============ NOTIFY POPUP ============ */
        #notifyPopup {
            display: none;
            position: fixed;
            top: 0; right: 0; bottom: 0; left: 0;
            z-index: 9999;
        }
        #notifyPopup.is-open { display: block !important; }
        #notifyPopup .np-overlay {
            position: fixed;
            top: 0; right: 0; bottom: 0; left: 0;
            background: rgba(5, 14, 27, 0.75);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            animation: npFadeIn 0.2s ease-out;
            z-index: 1;
        }
        #notifyPopup .np-wrap {
            position: fixed;
            top: 0; right: 0; bottom: 0; left: 0;
            display: flex; align-items: center; justify-content: center;
            padding: 16px;
            pointer-events: none;
            z-index: 2;
        }
        #notifyPopup .np-modal {
            position: relative;
            width: 100%;
            max-width: 460px;
            background: linear-gradient(180deg, #1e3a57 0%, #15314a 100%);
            border: 1px solid rgba(140, 198, 63, 0.2);
            border-radius: 24px;
            box-shadow:
                0 30px 60px -15px rgba(0,0,0,0.5),
                0 0 0 1px rgba(255,255,255,0.04) inset,
                0 0 80px -20px rgba(140, 198, 63, 0.25);
            pointer-events: auto;
            overflow: hidden;
            animation: npScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes npFadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes npScaleIn {
            from { opacity: 0; transform: scale(0.94) translateY(8px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }
        /* Glow lime décoratif en haut */
        #notifyPopup .np-modal::before {
            content: '';
            position: absolute;
            top: -100px; left: 50%;
            width: 200px; height: 200px;
            background: radial-gradient(circle, rgba(140,198,63,0.25) 0%, transparent 70%);
            transform: translateX(-50%);
            pointer-events: none;
        }
        #notifyPopup .np-close {
            position: absolute;
            top: 14px; right: 14px;
            width: 36px; height: 36px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 50%;
            color: #94a3b8;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            transition: all 0.15s;
            z-index: 2;
            font-size: 14px;
        }
        #notifyPopup .np-close:hover { background: rgba(255,255,255,0.1); color: #fff; transform: rotate(90deg); }
        #notifyPopup .np-content {
            padding: 40px 32px 32px;
            text-align: center;
            position: relative;
            z-index: 1;
        }
        #notifyPopup .np-icon {
            width: 72px; height: 72px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, rgba(140,198,63,0.25), rgba(140,198,63,0.1));
            border: 1px solid rgba(140,198,63,0.35);
            border-radius: 22px;
            display: flex; align-items: center; justify-content: center;
            color: #8cc63f;
            font-size: 28px;
            box-shadow: 0 8px 28px rgba(140,198,63,0.2);
            position: relative;
        }
        #notifyPopup .np-icon::after {
            content: '';
            position: absolute;
            inset: -4px;
            border: 2px solid rgba(140,198,63,0.3);
            border-radius: 24px;
            animation: npPulse 2s ease-in-out infinite;
        }
        @keyframes npPulse {
            0%, 100% { transform: scale(1); opacity: 0.6; }
            50% { transform: scale(1.08); opacity: 0; }
        }
        #notifyPopup .np-eyebrow {
            display: inline-block;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #8cc63f;
            margin-bottom: 10px;
            padding: 4px 10px;
            background: rgba(140,198,63,0.1);
            border: 1px solid rgba(140,198,63,0.25);
            border-radius: 9999px;
        }
        #notifyPopup .np-title {
            font-size: 1.6rem;
            font-weight: 800;
            color: #fff;
            margin-bottom: 8px;
            line-height: 1.2;
            letter-spacing: -0.01em;
        }
        #notifyPopup .np-product {
            color: #8cc63f;
            font-weight: 700;
        }
        #notifyPopup .np-sub {
            font-size: 14px;
            color: #94a3b8;
            line-height: 1.55;
            margin-bottom: 24px;
            max-width: 360px;
            margin-left: auto;
            margin-right: auto;
        }
        #notifyPopup .np-form { display: flex; flex-direction: column; gap: 10px; }
        #notifyPopup .np-input {
            width: 100%;
            background: rgba(15, 31, 55, 0.7);
            border: 1.5px solid rgba(255,255,255,0.08);
            border-radius: 12px;
            padding: 14px 16px;
            color: #fff;
            font-size: 15px;
            font-family: inherit;
            outline: none;
            transition: border-color 0.2s, background 0.2s;
            box-sizing: border-box;
        }
        #notifyPopup .np-input::placeholder { color: #5a6878; }
        #notifyPopup .np-input:focus {
            border-color: rgba(140, 198, 63, 0.5);
            background: rgba(15, 31, 55, 0.9);
            box-shadow: 0 0 0 3px rgba(140, 198, 63, 0.1);
        }
        #notifyPopup .np-error {
            text-align: left;
            padding: 10px 14px;
            border-radius: 10px;
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #fca5a5;
            font-size: 13px;
        }
        #notifyPopup .np-submit {
            width: 100%;
            background: linear-gradient(135deg, #8cc63f, #7ab62f);
            color: #0a1929;
            font-weight: 800;
            padding: 14px 20px;
            border-radius: 12px;
            border: 0;
            cursor: pointer;
            font-size: 15px;
            box-shadow: 0 8px 22px -6px rgba(140, 198, 63, 0.5);
            transition: all 0.2s;
            font-family: inherit;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        #notifyPopup .np-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -6px rgba(140, 198, 63, 0.6); }
        #notifyPopup .np-submit:active { transform: translateY(0); }
        #notifyPopup .np-submit:disabled { opacity: 0.7; cursor: wait; transform: none; }

        #notifyPopup .np-perks {
            display: flex;
            justify-content: center;
            gap: 18px;
            margin-top: 18px;
            flex-wrap: wrap;
        }
        #notifyPopup .np-perk {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            color: #6b7280;
        }
        #notifyPopup .np-perk i { color: #8cc63f; font-size: 10px; }

        #notifyPopup .np-success { animation: npScaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
        #notifyPopup .np-success-icon {
            width: 80px; height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(34, 197, 94, 0.1));
            border: 1px solid rgba(34, 197, 94, 0.4);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: #22c55e;
            font-size: 32px;
            box-shadow: 0 8px 28px rgba(34, 197, 94, 0.25);
        }
        #notifyPopup .np-success-title {
            font-size: 1.5rem;
            font-weight: 800;
            color: #fff;
            margin-bottom: 8px;
        }
        #notifyPopup .np-success-text {
            font-size: 14px;
            color: #94a3b8;
            line-height: 1.55;
            max-width: 320px;
            margin: 0 auto;
        }

        /* Mobile */
        @media (max-width: 540px) {
            #notifyPopup .np-modal { border-radius: 20px; }
            #notifyPopup .np-content { padding: 32px 22px 24px; }
            #notifyPopup .np-icon { width: 64px; height: 64px; font-size: 24px; }
            #notifyPopup .np-title { font-size: 1.35rem; }
            #notifyPopup .np-perks { gap: 12px; }
        }

/* ============================================================
   ALTERNANCE DES SECTIONS (mode clair), 2026-09-28.
   Sur le site, une section sur deux est blanche, l'autre un peu
   bleutee. Ici presque toutes portaient le meme degrade #eef3f9 ->
   #e5edf5 : deux voisines se fondaient l'une dans l'autre (la theorie
   et le test de perception des risques en particulier).
   La regle suit le RANG des <section> soeurs du <body>, pas leurs id :
   si une section conditionnelle manque (avis Google sans avis, blog
   sans article), l'alternance se recale toute seule.
   Le hero (1re section) garde son propre fond.
   Bloc identique dans accueil.css et accueil-nl.css.
   ============================================================ */
html[data-theme="light"] body > section:nth-of-type(even) { background: #eef3f9 !important; }
html[data-theme="light"] body > section:nth-of-type(odd):not(:first-of-type) { background: #ffffff !important; }