/* =============================================================================
   contact.css
   CSS extrait tel quel des blocs <style> de contact.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 600 de contact.php ===== */

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

        /* Icône de carte — UN SEUL style partout : fond blanc, glyphe vert foncé,
           contour discret (indispensable en mode clair, sinon carré blanc sur carte
           blanche = invisible). Remplace le mélange fond-vert / fond-blanc. */
        .ct-ico {
            width: 48px; height: 48px; border-radius: 12px;
            background: #ffffff;
            border: 1px solid rgba(16, 42, 69, 0.12);
            color: #4e7d1f;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            font-size: 18px;
            box-shadow: 0 1px 3px rgba(16, 42, 69, 0.06);
        }

        /* Hero 2 colonnes (texte + illustration) — même structure que /shop.
           L'espacement remplace space-y-* / pt-4, absents de la build Tailwind purgée
           (sinon badge, titre, sous-titre et stats se collent). */
        .contact-hero-stack > * + * { margin-top: 1rem; }
        @media (min-width: 640px) {
            .contact-hero-stack > * + * { margin-top: 1.25rem; }
            .contact-hero-stack .contact-hero-stats { margin-top: 1.75rem; }
        }
        @media (max-width: 767px) {
            .contact-hero { padding-top: 2.25rem !important; padding-bottom: 2.5rem !important; }
            .contact-hero-top { gap: 1.5rem !important; text-align: center !important; }
            .contact-hero-top h1 { font-size: 2rem !important; line-height: 1.15 !important; }
            .contact-hero-top p { font-size: 1rem !important; }
            .contact-hero-stats { justify-content: center !important; }
            .contact-hero-fig { max-width: 280px !important; margin-left: auto !important; margin-right: auto !important; }
        }

        .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);
            border-color: rgba(140, 198, 63, 0.3);
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animate-fade-in {
            animation: fadeInUp 0.6s ease-out;
        }

        .input-field {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
        }

        .input-field:focus {
            background: rgba(255, 255, 255, 0.08);
            border-color: #8cc63f;
            outline: none;
            box-shadow: 0 0 0 3px rgba(140, 198, 63, 0.18);
        }
        /* Champ en erreur (validation navigateur), une fois le champ quitté.
           Restreint à input/textarea : :placeholder-shown ne s'applique pas à un
           <select>, donc :not(:placeholder-shown) y est toujours vrai et le
           sujet obligatoire, vide au chargement, s'affichait cerclé de rouge
           avant même que le visiteur ait touché au formulaire. */
        input.input-field:not(:placeholder-shown):invalid:not(:focus),
        textarea.input-field:not(:placeholder-shown):invalid:not(:focus) {
            border-color: rgba(220, 38, 38, .55);
        }

        /* ------------------------------------------------------------------
           LIBELLÉS FLOTTANTS — plus aucune fausse donnée dans les champs.

           L'ancienne version affichait « Jean Dupont », « jean@email.be » et un
           exemple de message en indication. Même en italique et en gris clair,
           un champ qui contient du texte se lit comme un champ déjà rempli :
           le visiteur clique dedans pour effacer avant d'écrire. C'est la
           première chose qui distingue un formulaire amateur d'un formulaire
           de grand site, et aucune retouche de couleur ne la corrige.

           Le libellé vit donc DANS le champ, au repos, et remonte au-dessus
           dès qu'on écrit. Le champ n'est jamais menteur, et le libellé reste
           visible pendant la saisie — ce qu'une simple indication ne fait pas.

           Mécanique : chaque champ porte placeholder=" " (une espace), ce qui
           rend :placeholder-shown vrai tant que le champ est vide. Le <label>
           est placé APRÈS le champ dans le HTML pour que le sélecteur « ~ »
           puisse l'atteindre ; l'ordre visuel, lui, est fixé par le CSS.
           Aucune classe Tailwind ici : la build du site est purgée.
           ------------------------------------------------------------------ */
        .ct-field { position: relative; }

        .ct-field .input-field {
            width: 100%;
            padding: 25px 16px 9px;
            font-size: 15px;
            line-height: 1.3;
            color: #ffffff;
        }
        .ct-field textarea.input-field { padding-top: 28px; resize: none; }

        /* L'espace du placeholder ne doit jamais se voir sous le libellé. */
        .ct-field .input-field::placeholder { color: transparent; }

        .ct-float {
            position: absolute;
            left: 17px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 15px;
            font-weight: 500;
            color: #94a3b8;
            pointer-events: none;
            transition: top .15s ease, font-size .15s ease, color .15s ease, transform .15s ease;
        }
        /* Dans un textarea le libellé se cale en haut : centrer sur cinq lignes
           le placerait au milieu du bloc de texte. */
        .ct-field textarea.input-field ~ .ct-float { top: 20px; transform: none; }

        .ct-field .input-field:focus ~ .ct-float,
        .ct-field .input-field:not(:placeholder-shown) ~ .ct-float,
        .ct-field select.input-field ~ .ct-float {
            top: 9px;
            transform: none;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: #94a3b8;
        }
        .ct-field .input-field:focus ~ .ct-float { color: #8cc63f; }

        /* L'astérisque du champ obligatoire, et la mention « optionnel ». */
        .ct-float .req { color: #f87171; }
        .ct-float .opt { color: #64748b; font-weight: 500; text-transform: none; letter-spacing: 0; }

        /* Le <select> garde son libellé toujours en haut (règle ci-dessus) :
           il affiche une valeur dès l'ouverture, il n'a donc pas d'état « vide »
           lisible. Son option vide reste sans texte pour ne rien annoncer. */
        .ct-field select.input-field { padding-right: 40px; }

        /* Bouton d'envoi — vert plein #4e7d1f, AUCUN dégradé, AUCUN halo.
           Écrit en CSS et pas en classes Tailwind : la build est purgée, donc une
           valeur arbitraire jamais compilée (bg-[#4e7d1f]) ne produit AUCUNE règle
           et le bouton reste transparent. Le fond et la couleur sont posés ici, ce
           qui évite aussi que le mode clair remappe .text-white en navy.
           Texte blanc : sur ce vert, le navy ne donnait que 3:1 (illisible), le
           blanc donne 4.9:1. */
        .ct-submit {
            width: 100%;
            display: block;
            background: #4e7d1f;
            color: #ffffff;
            font-weight: 900;
            font-size: 17px;
            font-family: inherit;
            border: none;
            border-radius: 9999px;
            padding: 18px;
            cursor: pointer;
            transition: background-color .2s ease;
        }
        .ct-submit:hover { background: #3d6318; }
        .ct-submit:disabled { opacity: .6; cursor: not-allowed; }

        /* Bandeau de réassurance sous le bouton — aligné à gauche, jamais centré */
        .ct-reassure {
            display: flex; flex-wrap: wrap;
            gap: .55rem 1.5rem;
            padding-top: .35rem;
        }
        .ct-reassure span {
            display: inline-flex; align-items: center; gap: .45rem;
            font-size: 12px; color: #94a3b8; font-weight: 500;
        }
        .ct-reassure i { color: #8cc63f; font-size: 12px; }
        /* #64748b (l'ancien text-gray-500) ne donnait que 2.45:1 sur la carte navy
           du mode SOMBRE = illisible. Ce gris-ci passe dans le sombre ; le mode
           clair le fonce via theme-theorie.css. */
        .ct-privacy {
            display: flex; align-items: center; gap: .45rem;
            font-size: 12px; color: #94a3b8;
        }

        .alert-success {
            background: linear-gradient(135deg, rgba(140, 198, 63, 0.15), rgba(122, 182, 47, 0.1));
            border: 2px solid rgba(140, 198, 63, 0.5);
            box-shadow: 0 0 30px rgba(140, 198, 63, 0.2);
        }

        .alert-error {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1));
            border: 2px solid rgba(239, 68, 68, 0.5);
            box-shadow: 0 0 20px rgba(239, 68, 68, 0.15);
        }

        @keyframes successPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .success-icon {
            animation: successPulse 2s ease-in-out infinite;
        }

        /* Loading animation */
        .btn-loading {
            position: relative;
            pointer-events: none;
            opacity: 0.8;
        }

        .btn-loading .btn-text {
            visibility: hidden;
        }

        .btn-loading::after {
            content: "";
            position: absolute;
            width: 24px;
            height: 24px;
            top: 50%;
            left: 50%;
            margin-left: -12px;
            margin-top: -12px;
            border: 3px solid transparent;
            /* Blanc comme le texte du bouton : le navy d'avant était fait pour
               l'ancien fond vert clair, il disparaissait sur le #4e7d1f. */
            border-top-color: #ffffff;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Success animation */
        @keyframes successSlideIn {
            0% { opacity: 0; transform: translateY(-30px) scale(0.9); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        @keyframes checkmarkDraw {
            0% { stroke-dashoffset: 100; }
            100% { stroke-dashoffset: 0; }
        }

        @keyframes circlePop {
            0% { transform: scale(0); opacity: 0; }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); opacity: 1; }
        }

        @keyframes confetti {
            0% { transform: translateY(0) rotate(0deg); opacity: 1; }
            100% { transform: translateY(-100px) rotate(720deg); opacity: 0; }
        }

        .success-container {
            animation: successSlideIn 0.5s ease-out;
        }

        .success-circle {
            animation: circlePop 0.4s ease-out 0.2s both;
        }

        .success-checkmark {
            stroke-dasharray: 100;
            stroke-dashoffset: 100;
            animation: checkmarkDraw 0.5s ease-out 0.5s forwards;
        }

        .confetti-piece {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            animation: confetti 1s ease-out forwards;
        }

        /* ============ LAYOUT CONTACT — Float (vieille école = bulletproof) ============ */
        /* Mobile : flex column-reverse pour que le form passe AVANT la sidebar */
        #ctRow {
            display: flex;
            flex-direction: column-reverse;
            gap: 24px;
            width: 100%;
        }
        #ctSide > * { margin-bottom: 16px; }
        #ctSide > *:last-child { margin-bottom: 0; }
        /* Desktop : float right pour la sidebar */
        @media (min-width: 1024px) {
            #ctRow {
                display: block !important;
                gap: 0 !important;
            }
            #ctRow::after { content: "" !important; display: table !important; clear: both !important; }
            #ctSide  { float: right !important; width: 320px !important; margin-left: 24px !important; margin-bottom: 0 !important; }
            #ctSide > * { margin-bottom: 16px !important; }
            #ctSide > *:last-child { margin-bottom: 0 !important; }
            #ctForm  { overflow: hidden !important; width: auto !important; }
        }
    

/* ===== bloc 2, ex-ligne 1141 de contact.php ===== */
#subject option { background-color:#0f2b46; color:#ffffff; }

/* ===== bloc 3, ex-ligne 1245 de contact.php ===== */

                .faq-card {
                    background: rgba(30, 58, 87, 0.5);
                    backdrop-filter: blur(10px);
                    border: 1px solid rgba(255, 255, 255, 0.08);
                    border-radius: 14px;
                    overflow: hidden;
                    transition: border-color 0.2s, background 0.2s;
                }
                .faq-card[open] {
                    border-color: rgba(140, 198, 63, 0.35);
                    background: rgba(30, 58, 87, 0.7);
                }
                .faq-card summary {
                    padding: 16px 20px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 14px;
                    font-weight: 600;
                    font-size: 14px;
                    color: #fff;
                    list-style: none;
                }
                .faq-card summary::-webkit-details-marker { display: none; }
                /* Même parti pris que .ct-ico : fond blanc + contour, pas de fond vert */
                .faq-card summary .faq-icon {
                    width: 32px; height: 32px;
                    border-radius: 8px;
                    background: #ffffff;
                    border: 1px solid rgba(16, 42, 69, 0.12);
                    color: #4e7d1f;
                    display: flex; align-items: center; justify-content: center;
                    flex-shrink: 0;
                    font-size: 13px;
                }
                .faq-card summary .faq-q { flex: 1; min-width: 0; line-height: 1.4; }
                .faq-card summary .faq-chevron {
                    color: #8cc63f;
                    font-size: 12px;
                    transition: transform 0.2s;
                    flex-shrink: 0;
                }
                .faq-card[open] summary .faq-chevron { transform: rotate(180deg); }
                .faq-card .faq-body {
                    padding: 0 20px 18px 64px;
                    font-size: 13px;
                    color: rgba(255, 255, 255, 0.7);
                    line-height: 1.65;
                }
                .faq-card .faq-body a {
                    color: #8cc63f;
                    font-weight: 600;
                    text-decoration: underline;
                    text-underline-offset: 2px;
                }
                .faq-grid {
                    display: grid;
                    grid-template-columns: minmax(0, 1fr);
                    gap: 12px;
                    /* align-items:start — sans ça, la grille est en "stretch" par défaut :
                       ouvrir une carte étirait sa VOISINE à la même hauteur, qui semblait
                       s'ouvrir aussi (grande boîte vide). Chaque carte garde sa hauteur. */
                    align-items: start;
                }
                @media (min-width: 768px) {
                    .faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
                }
                @media (max-width: 767px) {
                    .faq-card .faq-body { padding-left: 20px; }
                }
                .faq-card { min-width: 0; }