/**
 * ================================================================
 * FICHIER : theme.css
 * EMPLACEMENT : 2027_B2B/_theme/theme.css
 * SHORT_DESC : Thème provisoire du squelette AnunaQi B2B (chantier)
 * DESCRIPTION : Base typographique et chromatique neutre, modes clair et sombre,
 *               header, tiroir et tab bar mobile façon application native, footer.
 *               Provisoire : remplacé par le design system issu de l'arbitrage des directions A/B/C.
 *               Règles JaxX : border-radius 0 à 2 px, snake_case, aucun style inline.
 *
 * SOMMAIRE :
 *   - VARIABLES_MODES     : Jetons clair / sombre
 *   - BASE                : Reset léger, typographie, liens
 *   - HEADER              : Barre supérieure et wordmark
 *   - TIROIR_MOBILE       : Menu plein écran mobile
 *   - TAB_BAR_MOBILE      : Barre d'onglets inférieure (safe areas)
 *   - FOOTER              : Pied de page
 *   - UTILITAIRES         : Conteneur, boutons, badges, barre de progression
 *   - GRILLE_FLUIDE       : Grille fluide
 *   - RESPONSIVE          : Points de rupture globaux
 *   - NAVIGATION_LANCEMENT : Méga-menu, header compact, tab bar 5 entrées, feuilles de fond, footer 4 colonnes
 *   - ICONES_SVG          : Taille des pictogrammes SVG en ligne (icone_em)
 *   - FOND_DEGRADE        : Lueurs de fond subtiles teintées par l'accent du thème, dérive lente (bureau)
 *   - HALO_SOURIS         : Halo suiveur (sombre), reflet dans les cartes, lumière et onde sur le fond (clair)
 *   - HALO_VAPOREUX       : Halo v2 : premier plan seulement (sombre), fond seulement (clair), onde au clic
 *   - HALO_APPARITION     : Éclosion du halo au toucher (mobile) et au clic (souris)
 *   - SECTIONS_TRANSLUCIDES : Sections de page laissant voir le fond animé et le halo
 *   - SATIN               : Légers dégradés satinés sur les aplats (cartes, boutons, en-tête)
 *   - PARALLAXE           : Parallaxe multiplan (fond, cartes, images, boutons) via la propriété translate
 *   - LOGO_THEME          : Couleurs du logo en ligne tirées de l'accent du thème
 *   - ADM_MENU            : Bouton de connexion à l'atelier et panneau déroulant d'administration
 *   - CONNEXION_POPIN     : Popin de connexion du module user aux couleurs du thème
 *   - LIGHTBOX_ZOOM       : Cadre, curseurs et transition du zoom des lightbox (module lightbox_zoom.js)
 *   - FORMES_THEMES       : Rayons, chanfreins (Cyberpunk), onglets de dossier (Matrix) et satiné d'accent (Champagne) de tout le site public
 *   - MATRIX_PLUIE        : Fond « pluie numérique » animé et menu resserré du thème Matrix (police machine à écrire)
 *   - MATRIX_LUEURS       : Lueurs vertes phosphore au survol du thème Matrix (cartes, boutons, liens, champs, tchat)
 *   - FLOU_ENCADRES       : Flou d'arrière-plan (backdrop-filter) sous les encadrés semi-transparents (n° 780)
 *   - VERRE_ENCADRES      : Effet verre sur les encarts (fond teinté translucide, flou, ombre) et images de fond plus transparentes (n° 1277, n° 1283)
 *   - HAUTEUR_AUTO_ZONES_TEXTE : Défilement des zones de texte en hauteur automatique (theme.js, n° 1301)
 *   - CARTES_DYNAMIQUES_THEME : Adaptation automatique de toute carte Leaflet / OpenStreetMap aux couleurs du thème et Dark/Bright mode (n° 1786)
 *
 * MODIFICATIONS :
 *   - 21/10/2026 16:30 : Section CARTES_DYNAMIQUES_THEME : règle générale pour toute carte Leaflet (.carte_dynamique_theme, .view_carte_osm)
 *     adaptée aux couleurs du thème actif (--accent, --surface, --ligne) et au Dark/Bright mode, tuiles OSM filtrées et teintées en temps réel,
 *     boutons de zoom, popups et attributions aux styles du thème (Dialogue n° 1786, Antigravity) — A VALIDER PAR JaxX
 *   - 14/10/2026 10:43 : Section HAUTEUR_AUTO_ZONES_TEXTE : pas d'ascenseur tant que le texte tient dans la zone, ascenseur au-delà
 *     du plafond (classes posées par theme.js) (Dialogue n° 1301, Claude) — A VALIDER PAR JaxX
 *   - 14/10/2026 03:50 : Section VERRE_ENCADRES : effet verre sur les encarts du site public dans tous les thèmes (teinte tirée de --surface,
 *     flou --flou_encadre, ombre douce, repli opaque sans backdrop-filter, verre opaque si moins de transparence demandée), textures de fond
 *     atténuées (× 0.6), Champagne à 0.05 en sombre et 0.04 en clair (Dialogue n° 1277 et n° 1283, Claude) — A VALIDER PAR JaxX
 *   - 11/10/2026 06:09 : Section FLOU_ENCADRES : backdrop-filter (--flou_encadre) sous les encadrés au fond semi-transparent de tout le site
 *     (Dialogue n° 780, Claude) — A VALIDER PAR JaxX
 *   - 10/10/2026 17:32 : Thème Matrix : lueurs vertes au survol (section MATRIX_LUEURS : cartes et boutons, liens, menu, icônes, champs,
 *     tchat de Jarvis) (Dialogue n° 684, Claude) — A VALIDER PAR JaxX
 *   - 10/10/2026 16:34 : Thème IA Slop : identifiant theme_futur2026 renommé theme_IAslop (sélecteurs html.theme_IAslop), couleurs sombre et clair de JaxX (accent #655cf6 dans les deux modes), pastille .pastille_IAslop (Dialogue n° 676, Claude) — A VALIDER PAR JaxX
 *   - 10/10/2026 13:24 : Thème Matrix : police machine à écrire Courier Prime (textes et titres, comme le terminal du film) et
 *                        fond « pluie numérique » animé, codé en SVG (section MATRIX_PLUIE ; figé si le visiteur demande
 *                        moins d'animations) (Dialogue n° 633, Claude) — A VALIDER PAR JaxX
 *   - 10/10/2026 07:03 : Section FORMES_THEMES et jetons de forme par thème (--rayon_badge, --rayon_p, --rayon_s/m/l, --calques_*) : chanfreins
 *                        caricaturaux Cyberpunk, étiquette de dossier Matrix, aucun rayon en Minimaliste, 2 px en Champagne, grands rayons IA Slop,
 *                        appliqués aux cartes, blocs, boutons, champs, badges et pied de page du site public ; Cyberpunk jaune / rose / cyan
 *                        à arrêts nets (plastique brillant, contrastes AA) ; Champagne accent #bc9c50 et aplats d'accent satinés ;
 *                        thème 5 renommé « IA Slop » (identifiant theme_futur2026 inchangé)
 *                        (Dialogue n° 569, 570, 550, 597, 599, 600, Claude) — A VALIDER PAR JaxX
 *   - 10/10/2026 02:52 : Section LIGHTBOX_ZOOM : zoom plein écran (cadre non rogné au-delà de 1×, débordement du conteneur coupé),
 *                        boutons, légende et compteur au-dessus de l'image zoomée (Dialogue n° 493 et 494, Claude) — A VALIDER PAR JaxX
 *   - 10/10/2026 02:39 : Section LIGHTBOX_ZOOM : cadre rognant l'image zoomée, curseurs zoom-in / zoom-out, transition de transform désactivée si prefers-reduced-motion (Dialogue n° 481, Claude) — A VALIDER PAR JaxX
 *   - 10/10/2026 02:19 : Menu du haut par paliers fixes (28, 20, 16 px ; burger et tiroir sous 961 px), bouton « Expertises » entier,
 *                        en-tête du méga-menu avec lien vers la page Expertises (demande de JaxX, Dialogue n° 466, session MONSTERJaxX #3) — A VALIDER PAR JaxX
 *   - 10/10/2026 01:30 : Tiroir mobile : bloc repliable du menu de l'atelier (.tiroir_adm), tiroir défilant si le menu dépasse
 *                        (demande de JaxX, Dialogue n° 456, session MONSTERJaxX #2) — A VALIDER PAR JaxX
 *   - 09/10/2026 21:52 : Nom de marque (.wordmark_anunaqi : en-tête, tiroir mobile, pied de page) en Syne, comme l'atelier
 *                        (demande de JaxX, Dialogue n° 366, session MONSTERJaxX #3) — A VALIDER PAR JaxX
 *   - 09/10/2026 18:25 : Lisibilité (Dialogue n° 308, suite de l'audit) : laiton du Chêne fumé clair --accent #b48a28 -> #856419
 *                        (textes dorés 3,0 -> 5,2:1, blanc des boutons 3,2 -> 5,5:1) — A VALIDER PAR JaxX
 *   - 09/10/2026 18:12 : Lisibilité clair / sombre (Dialogue n° 308) : --encre_attenuee passe de 2,1–3,4:1 à au moins 4,6:1
 *                        sur tous les fonds de chaque palette (texte secondaire, mentions, dates, aides) ; palette suisse
 *                        sombre : --encre_second propre (4,5 -> 5,8:1) ; règle commune ::placeholder (opacité 1) — A VALIDER PAR JaxX
 *   - 07/10/2026 22:08 : Texture de fond : calque de 150vh et décalage de défilement (--plx_defil, posé par parallaxe.js) ajouté à la parallaxe à la souris (demande de JaxX A.42) — A VALIDER PAR JaxX
 *   - 07/10/2026 20:36 : Popin de connexion : aperçu du profil Google et message de retour à la police du thème (au lieu de Times) — A VALIDER PAR JaxX
 *   - 07/10/2026 17:34 : Popin de connexion : retours du champ e-mail (« Email inconnu », erreurs, lien « mot de passe oublié ») aux couleurs du thème — A VALIDER PAR JaxX
 *   - 07/10/2026 13:11 : Habillage de la popin de connexion du module user (ouverte par le cadenas de l'en-tête) — A VALIDER PAR JaxX
 *   - 07/10/2026 12:28 : Éclosion du halo au toucher et au clic ; dégradé de fond animé en continu sur tous les écrans, seconde nappe en contretemps (demande de JaxX A.31) — A VALIDER PAR JaxX
 *   - 06/10/2026 17:52 : Halo vaporeux v2 (sombre : premier plan seulement ; clair : fond seulement), sections translucides, satiné des aplats, parallaxe multiplan, logo aux couleurs du thème, menu de l'atelier dans l'en-tête (demande de JaxX A.30) — A VALIDER PAR JaxX
 *   - 06/10/2026 17:26 : Halo de souris en mode sombre (repris du site 2027) avec reflet dans les cartes, lumière suiveuse et onde au clic en mode clair (demande de JaxX A.29) — A VALIDER PAR JaxX
 *   - 06/10/2026 16:15 : Fond de page en dégradé subtil teinté par l'accent, animé sur ordinateur (transform seul), statique sur mobile et si « réduire les animations » (demande de JaxX A.28) — A VALIDER PAR JaxX
 *   - 06/10/2026 13:35 : Méga-menu ancré pleine largeur, surcharge du bloc antérieur non attribué — A VALIDER PAR JaxX
 *   - 06/10/2026 13:33 : Navigation de lancement (méga-menu Expertises, bouton Devis, header compact, tab bar cinq entrées, feuilles de fond, footer quatre colonnes) — A VALIDER PAR JaxX
 *   - 06/10/2026 08:48 : Typographies Syne / Instrument Sans / JetBrains Mono, sélecteur de thèmes (classes, rayons 2 px), classes logo / bouton live / pastille, header en grille, navigation desktop insécable — A VALIDER PAR JaxX
 *   - 06/10/2026 05:02 : Création du thème provisoire — A VALIDER PAR JaxX
 *
 * ================================================================
 */

/* VARIABLES_MODES ===================================================== */
/* Principe MaBorneRecharge : le mode sombre est la base (:root), le mode clair surcharge.
   La classe est posée côté serveur sur <html> (module bright_dark_mode + template.php),
   donc aucun flash au chargement. color-scheme pilote les contrôles natifs et la scrollbar. */
:root,
html.dark_mode
{
    color-scheme: dark;

    /* Jetons chromatiques sémantiques — Haute Facture Numérique */
    --fond: #08090a;
    --fond_second: #0e0f12;
    --surface: #141519;
    --surface_carte: rgba(255, 255, 255, 0.02);
    --surface_input: #18191f;
    --encre: #ffffff;
    --encre_second: #8a8f98;
    /* --encre_attenuee: #525866; */
    --encre_attenuee: #80858f; /* 18:12 (n° 308) : 2,5 -> 4,7:1 */
    --ligne: rgba(255, 255, 255, 0.08);
    --ligne_forte: rgba(255, 255, 255, 0.16);
    --accent: #2563eb;
    --accent_texte: #ffffff;
    --accent_halo: rgba(37, 99, 235, 0.28);
    --succes: #10b981;
    --erreur: #ef4444;
    --header_fond: rgba(8, 9, 10, 0.82);
    --footer_fond: #050607;
    --ombre: 0 16px 40px rgba(0, 0, 0, 0.65);

    /* Jetons partagés (indépendants du mode) */
    /* 06/10/2026 08:32 (Claude) : typographie premium et avant-gardiste mais sobre (directive JaxX) :
       Syne (fonderie française Bonjour Monde) pour les titres, Instrument Sans pour le texte. A VALIDER PAR JaxX */
    --police_titres: 'Syne', 'Plus Jakarta Sans', -apple-system, sans-serif;
    --police_texte: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Rayons de courbure et géométries par thème (Demandes #569, #570) */
    --rayon: 2px;
    --rayon_carte: var(--rayon);
    --rayon_bouton: var(--rayon);
    --rayon_input: var(--rayon);
    --clip_carte: none;
    --clip_bouton: none;
    /* 07:03 (n° 569, 599, 600, Claude) : jetons complémentaires, appliqués dans la section FORMES_THEMES */
    --rayon_badge: var(--rayon);
    --rayon_p: var(--rayon);
    --rayon_s: var(--rayon_p);
    --rayon_m: var(--rayon_input);
    --rayon_l: var(--rayon_carte);
    /* Lignes redessinées sur les arêtes coupées par clip-path : deux calques invisibles hors Cyberpunk / Matrix */
    --calques_carte: linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);
    --calques_carte_taille: 0 0, 0 0;
    --calques_carte_position: 0 0, 0 0;
    --calques_bouton: linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);
    --calques_bouton_plein: linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);
    --calques_bouton_taille: 0 0, 0 0;
    --calques_bouton_position: 0 0, 0 0;
    --police_mono: 'JetBrains Mono', 'Geist Mono', monospace;
    --largeur_page: 1280px;
    --gouttiere: clamp(16px, 4vw, 48px);
    --hauteur_header: 64px;
    --hauteur_tab_bar: 60px;
    --duree: 220ms;
    --easing: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Grille fluide : espacements proportionnels au viewport, bornés */
    --espace_1: clamp(4px, 0.5vw, 8px);
    --espace_2: clamp(8px, 1vw, 16px);
    --espace_3: clamp(16px, 2vw, 32px);
    --espace_4: clamp(24px, 3vw, 48px);
    --espace_5: clamp(40px, 6vw, 96px);
    --espace_6: clamp(64px, 10vw, 160px);
    --gouttiere_grille: clamp(16px, 2vw, 32px);
    --colonne_min: 280px;

    /* Échelle typographique fluide */
    --texte_xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
    --texte_s: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
    --texte_m: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    --texte_l: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
    --texte_xl: clamp(1.5rem, 1.2rem + 1.6vw, 2.4rem);
    --texte_xxl: clamp(2.2rem, 1.4rem + 3.8vw, 4.6rem);
}

html.bright_mode
{
    color-scheme: light;

    --fond: #f8fafc;
    --fond_second: #f1f5f9;
    --surface: #ffffff;
    --surface_carte: #ffffff;
    --surface_input: #ffffff;
    --encre: #0f172a;
    --encre_second: #475569;
    /* --encre_attenuee: #94a3b8; */
    --encre_attenuee: #617084; /* 18:12 (n° 308) : 2,3 -> 4,6:1 */
    --ligne: rgba(15, 23, 42, 0.08);
    --ligne_forte: rgba(15, 23, 42, 0.16);
    --accent: #2563eb;
    --accent_texte: #ffffff;
    --accent_halo: rgba(37, 99, 235, 0.18);
    --succes: #10b981;
    --erreur: #ef4444;
    --header_fond: rgba(248, 250, 252, 0.86);
    --footer_fond: #f1f5f9;
    --ombre: 0 12px 32px rgba(15, 23, 42, 0.08);
}

/* TRANSITION UNIVERSELLE LORS DU CHANGEMENT DE THÈME (1 SECONDE STRICTE) */
html.transition_theme,
html.transition_theme *:not(.scroll_progress_bar):not(.barre_progression_valeur),
html.transition_theme *::before,
html.transition_theme *::after
{
    transition: all 1s ease !important;
}

html.transition_theme .scroll_progress_bar,
html.transition_theme .barre_progression_valeur
{
    transition: none !important;
}

/* THEMES_TRENDY_GRAPHIQUES ============================================ */

/* 1. THÈME CHÊNE FUMÉ & TEINTES CHAMPAGNE (PAR DÉFAUT - ÉBÉNISTERIE D'ART & COULEURS CHAMPAGNE) */
html.theme_champagne,
html.theme_atelier
{
    --police_titres: 'Syne', 'Plus Jakarta Sans', -apple-system, sans-serif;
    /* ancien (n° 550) : --accent: #cb9b51; --accent_halo: rgba(203, 155, 81, 0.22); --succes: #cb9b51; */
    --accent: #bc9c50;
    --accent_texte: #0a0a0b;
    --accent_halo: rgba(223, 193, 123, 0.28);
    --succes: #dfc17b;
    --rayon: 2px;
    --rayon_carte: 2px;
    --rayon_bouton: 2px;
    --rayon_input: 2px;
    --rayon_badge: 2px;
    --rayon_p: 2px;
    --clip_carte: none;
    --clip_bouton: none;
}

html.theme_champagne:not(.bright_mode),
html.theme_champagne.dark_mode,
html.theme_atelier:not(.bright_mode),
html.theme_atelier.dark_mode
{
    --fond: #0b0b0d;
    --fond_second: #141518;
    --surface: #1a1b20;
    --surface_carte: rgba(223, 193, 123, 0.035);
    --surface_input: #1d1e24;
    --ligne: rgba(223, 193, 123, 0.12);
    --ligne_forte: rgba(223, 193, 123, 0.26);
    --header_fond: rgba(11, 11, 13, 0.88);
    --footer_fond: #08080a;
    --encre_second: #b5ada3;
    --encre_attenuee: #8f877c;
}

html.theme_champagne.bright_mode,
html.theme_atelier.bright_mode
{
    --fond: #faf8f5;
    --fond_second: #f4efe6;
    --surface: #ffffff;
    --surface_carte: #ffffff;
    --surface_input: #ffffff;
    --encre: #1c1917;
    --encre_second: #57534e;
    --encre_attenuee: #6f6b66;
    --ligne: rgba(160, 125, 55, 0.14);
    --ligne_forte: rgba(160, 125, 55, 0.28);
    --accent: #926f22;
    --accent_texte: #ffffff;
    --succes: #856419; /* n° 550 : #dfc17b illisible sur fond clair (1,6:1), laiton foncé 5,2:1 */
    --accent_halo: rgba(223, 193, 123, 0.20);
    --header_fond: rgba(250, 248, 245, 0.9);
    --footer_fond: #f4efe6;
}

/* 2. THÈME MODERN MINIMALISTE (DIRECTION A - BLANC MINÉRAL & CONTRASTES SUISSES PURS) */
html.theme_minimaliste,
html.theme_suisse
{
    --police_titres: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --accent: #f8fafc;
    --accent_texte: #0c0d0e;
    --accent_halo: rgba(255, 255, 255, 0.20);
    --rayon: 0px;
    --rayon_carte: 0px;
    --rayon_bouton: 0px;
    --rayon_input: 0px;
    --rayon_badge: 0px;
    --rayon_p: 0px;
    --clip_carte: none;
    --clip_bouton: none;
}

html.theme_minimaliste:not(.bright_mode),
html.theme_minimaliste.dark_mode,
html.theme_suisse:not(.bright_mode),
html.theme_suisse.dark_mode
{
    --fond: #0c0d0e;
    --fond_second: #141517;
    --surface: #1b1d20;
    --surface_carte: rgba(255, 255, 255, 0.03);
    --surface_input: #1b1d20;
    --encre: #f8fafc;
    --encre_second: #94a3b8;
    --encre_attenuee: #64748b;
    --ligne: rgba(255, 255, 255, 0.10);
    --ligne_forte: rgba(255, 255, 255, 0.20);
    --accent: #f8fafc;
    --accent_texte: #0c0d0e;
    --accent_halo: rgba(255, 255, 255, 0.22);
    --header_fond: rgba(12, 13, 14, 0.90);
    --footer_fond: #09090a;
}

html.theme_minimaliste.bright_mode,
html.theme_suisse.bright_mode
{
    --fond: #ffffff;
    --fond_second: #f6f7f9;
    --surface: #ffffff;
    --surface_carte: #ffffff;
    --surface_input: #ffffff;
    --encre: #0f172a;
    --encre_second: #475569;
    --encre_attenuee: #64748b;
    --ligne: rgba(15, 23, 42, 0.09);
    --ligne_forte: rgba(15, 23, 42, 0.18);
    --accent: #0f172a;
    --accent_texte: #ffffff;
    --accent_halo: rgba(15, 23, 42, 0.12);
    --header_fond: rgba(255, 255, 255, 0.92);
    --footer_fond: #f6f7f9;
}

/* 2 bis. THÈME CORPORATE (STYLE ENTREPRISE : BLEU MARINE, GRIS ARDOISE, ANGLES FRANCS ET SOBRES, N° 839) */
html.theme_corporate
{
    --police_titres: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --accent: #1d4ed8;
    --accent_second: #0ea5e9;
    --accent_texte: #ffffff;
    --accent_halo: rgba(29, 78, 216, 0.22);
    --rayon: 6px;
    --rayon_carte: 8px;
    --rayon_bouton: 6px;
    --rayon_input: 6px;
    --rayon_badge: 4px;
    --rayon_p: 6px;
    --clip_carte: none;
    --clip_bouton: none;
}

html.theme_corporate:not(.bright_mode),
html.theme_corporate.dark_mode
{
    --fond: #0b1220;
    --fond_second: #101a2e;
    --surface: #16213a;
    --surface_carte: #14203a;
    --surface_input: #16213a;
    --encre: #f1f5f9;
    --encre_second: #b6c2d6;
    --encre_attenuee: #8696b0;
    --ligne: rgba(148, 163, 184, 0.22);
    --ligne_forte: rgba(148, 163, 184, 0.40);
    --accent: #3b82f6;
    --accent_texte: #06101f;
    --accent_halo: rgba(59, 130, 246, 0.28);
    --header_fond: rgba(11, 18, 32, 0.94);
    --footer_fond: #070d19;
}

html.theme_corporate.bright_mode
{
    --fond: #f4f6fa;
    --fond_second: #e9eef6;
    --surface: #ffffff;
    --surface_carte: #ffffff;
    --surface_input: #ffffff;
    --encre: #0f1b33;
    --encre_second: #40516e;
    --encre_attenuee: #5b6b86;
    --ligne: rgba(15, 27, 51, 0.12);
    --ligne_forte: rgba(15, 27, 51, 0.26);
    --accent: #1d4ed8;
    --accent_texte: #ffffff;
    --accent_halo: rgba(29, 78, 216, 0.18);
    --header_fond: rgba(255, 255, 255, 0.94);
    --footer_fond: #e9eef6;
}

/* 3. THÈME CYBERPUNK 2077 (JAUNE, ROSE & CYAN TRANCHÉS SANS DÉGRADÉ, EFFET PLASTIQUE BRILLANT, CHANFREINS #569/#570) */
html.theme_cyberpunk
{
    --police_titres: 'Syne', 'Plus Jakarta Sans', -apple-system, sans-serif;
    --accent: #ff007f;
    --accent_second: #00f0ff;
    --accent_jaune: #ffe600;
    --accent_texte: #05050a;
    --accent_halo: rgba(255, 0, 127, 0.40);
    --rayon: 0px;
    --rayon_carte: 0px;
    --rayon_bouton: 0px;
    --rayon_input: 0px;
    --rayon_badge: 0px;
    --rayon_p: 0px;
    /* ancien (n° 569) : --clip_carte: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); */
    /* ancien (n° 569) : --clip_bouton: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); */
    /* Chanfreins caricaturaux (n° 569) : 28 px sur les cartes, 14 px sur les boutons, en haut à droite et en bas à gauche */
    --clip_carte: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
    --clip_bouton: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    --surface_satin_carte: linear-gradient(135deg, rgba(255, 0, 127, 0.20) 0%, rgba(255, 0, 127, 0.20) 46%, rgba(255, 230, 0, 0.28) 46%, rgba(255, 230, 0, 0.28) 54%, rgba(0, 240, 255, 0.20) 54%, rgba(0, 240, 255, 0.20) 100%);
    --surface_satin_bouton: linear-gradient(135deg, #ff007f 0%, #ff007f 46%, #ffe600 46%, #ffe600 54%, #00f0ff 54%, #00f0ff 100%);
}

html.theme_cyberpunk:not(.bright_mode),
html.theme_cyberpunk.dark_mode
{
    --fond: #05050a;
    --fond_second: #0a0a14;
    --surface: #0e0e1a;
    --surface_carte: #121222;
    --surface_input: #151528;
    --encre: #ffffff;
    --encre_second: #00f0ff;
    --encre_attenuee: #ffe600;
    --ligne: #00f0ff;
    --ligne_forte: #ff007f;
    --accent: #ff007f;
    /* ancien (n° 570) : --accent_texte: #ffffff; (3,8:1 sur le rose, insuffisant) */
    --accent_texte: #05050a; /* 5,4:1 sur #ff007f */
    --accent_halo: rgba(255, 0, 127, 0.40);
    --header_fond: rgba(5, 5, 10, 0.94);
    --footer_fond: #030307;
}

html.theme_cyberpunk.bright_mode
{
    --fond: #faf5fa;
    --fond_second: #f3e6f3;
    --surface: #ffffff;
    --surface_carte: #ffffff;
    --surface_input: #ffffff;
    --encre: #1a0520;
    --encre_second: #d80073;
    /* ancien (n° 570) : --encre_attenuee: #0099b8; (3,1:1) */
    --encre_attenuee: #007a93; /* 4,6:1 */
    --ligne: #00b4d8;
    --ligne_forte: #ff007f;
    /* ancien (n° 570) : --accent: #ff007f; (3,6:1 en texte sur le fond clair, 3,8:1 sous du blanc) */
    --accent: #c2005b; /* 5,7:1 sur le fond, 6,1:1 sous du blanc */
    --accent_texte: #ffffff;
    --accent_halo: rgba(255, 0, 127, 0.25);
    --header_fond: rgba(250, 245, 250, 0.94);
    --footer_fond: #f3e6f3;
}

/* 4. THÈME MATRIX (TERMINAL VERT PHOSPHORE, ÉTIQUETTES DE DOSSIER EXPLORER #569) */
html.theme_matrix,
html.theme_matrice
{
    /* ancien (n° 633) : --police_titres: 'JetBrains Mono', 'Geist Mono', monospace; */
    /* 10/10/2026 13:24 (Claude, Dialogue n° 633) : police machine à écrire du terminal du film, textes et titres */
    --police_titres: 'Courier Prime', 'Courier New', Courier, monospace;
    --police_texte: 'Courier Prime', 'Courier New', Courier, monospace;
    --accent: #00ff66;
    --accent_texte: #030704;
    --accent_halo: rgba(0, 255, 102, 0.30);
    --rayon: 0px;
    --rayon_carte: 0px;
    --rayon_bouton: 0px;
    --rayon_input: 0px;
    --rayon_badge: 0px;
    --rayon_p: 0px;
    /* ancien (n° 569) : --clip_carte: polygon(0 14px, 14px 0, calc(100% - 10px) 0, 100% 6px, 100% 100%, 0 100%); */
    /* ancien (n° 569) : --clip_bouton: polygon(0 8px, 8px 0, calc(100% - 6px) 0, 100% 4px, 100% 100%, 0 100%); */
    /* Étiquette de dossier (n° 569) : onglet qui dépasse en haut à droite (120 px sur 10 px, boutons 34 px sur 6 px), biais oblique à gauche */
    --clip_carte: polygon(0 10px, calc(100% - 132px) 10px, calc(100% - 120px) 0, 100% 0, 100% 100%, 0 100%);
    --clip_bouton: polygon(0 6px, calc(100% - 42px) 6px, calc(100% - 34px) 0, 100% 0, 100% 100%, 0 100%);
}

html.theme_matrix:not(.bright_mode),
html.theme_matrix.dark_mode,
html.theme_matrice:not(.bright_mode),
html.theme_matrice.dark_mode
{
    --fond: #030704;
    --fond_second: #071109;
    --surface: #0c1a0f;
    --surface_carte: rgba(0, 255, 102, 0.035);
    --surface_input: #0c1a0f;
    --encre: #e6ffe6;
    --encre_second: #70b87c;
    --encre_attenuee: #4d8f59;
    --ligne: rgba(0, 255, 102, 0.16);
    --ligne_forte: rgba(0, 255, 102, 0.32);
    --accent: #00ff66;
    --accent_texte: #030704;
    --accent_halo: rgba(0, 255, 102, 0.30);
    --header_fond: rgba(3, 7, 4, 0.90);
    --footer_fond: #020402;
}

html.theme_matrix.bright_mode,
html.theme_matrice.bright_mode
{
    --fond: #f0fdf4;
    --fond_second: #dcfce7;
    --surface: #ffffff;
    --surface_carte: #ffffff;
    --surface_input: #ffffff;
    --encre: #064e3b;
    --encre_second: #047857;
    --encre_attenuee: #047e5b;
    --ligne: rgba(16, 185, 129, 0.18);
    --ligne_forte: rgba(16, 185, 129, 0.32);
    --accent: #059669;
    --accent_texte: #ffffff;
    --accent_halo: rgba(5, 150, 105, 0.20);
    --header_fond: rgba(240, 253, 244, 0.92);
    --footer_fond: #dcfce7;
}

/* ancien titre (n° 597) : 5. THÈME TENDANCES WEB 2026 (SPATIAL DESIGN & GRANDS BORDER-RADIUS IASLOP #569) */
/* ancien titre (n° 676) : 5. THÈME IA SLOP (libellé n° 597 ; identifiant technique theme_futur2026 inchangé) : SPATIAL DESIGN & GRANDS BORDER-RADIUS #569 */
/* 5. THÈME IA SLOP (identifiant theme_IAslop depuis le n° 676 ; ancien cookie theme_futur2026 converti par template.php et theme.js) : SPATIAL DESIGN & GRANDS BORDER-RADIUS #569 */
/* ancien sélecteur (n° 676) : html.theme_futur2026 */
html.theme_IAslop
{
    --police_titres: 'Syne', 'Plus Jakarta Sans', -apple-system, sans-serif;
    --accent: #8b5cf6;
    --accent_texte: #ffffff;
    --accent_halo: rgba(139, 92, 246, 0.30);
    --rayon: 24px;
    --rayon_carte: 28px;
    --rayon_bouton: 9999px;
    --rayon_input: 16px;
    --rayon_badge: 9999px;
    --rayon_p: 14px;
    --clip_carte: none;
    --clip_bouton: none;
}

/* anciens sélecteurs (n° 676) : html.theme_futur2026:not(.bright_mode), html.theme_futur2026.dark_mode */
html.theme_IAslop:not(.bright_mode),
html.theme_IAslop.dark_mode
{
    --fond: #090812;
    --fond_second: #121020;
    --surface: #1a172e;
    --surface_carte: rgba(168, 85, 247, 0.04);
    --surface_input: #1a172e;
    --encre: #f8fafc;
    --encre_second: #a79ec2;
    --encre_attenuee: #7e7399;
    --ligne: rgba(168, 85, 247, 0.16);
    --ligne_forte: rgba(168, 85, 247, 0.30);
    /* ancien (n° 676) : --accent: #8b5cf6; */
    --accent: #655cf6;
    --accent_texte: #ffffff;
    --accent_halo: rgba(139, 92, 246, 0.30);
    --header_fond: rgba(9, 8, 18, 0.88);
    --footer_fond: #05040a;
}

/* ancien sélecteur (n° 676) : html.theme_futur2026.bright_mode */
html.theme_IAslop.bright_mode
{
    --fond: #faf7ff;
    --fond_second: #f1ebff;
    --surface: #ffffff;
    --surface_carte: #ffffff;
    --surface_input: #ffffff;
    --encre: #1e123a;
    --encre_second: #523b7a;
    --encre_attenuee: #71559c;
    --ligne: rgba(124, 58, 237, 0.14);
    --ligne_forte: rgba(124, 58, 237, 0.28);
    /* ancien (n° 676) : --accent: #6d28d9; */
    --accent: #655cf6;
    --accent_texte: #ffffff;
    --accent_halo: rgba(109, 40, 217, 0.18);
    --header_fond: rgba(250, 247, 255, 0.92);
    --footer_fond: #f1ebff;
}

/* THÈME OBSIDIAN SIGNATURE (CONSERVÉ POUR COMPATIBILITÉ) */
html.theme_obsidian
{
    --police_titres: 'Syne', 'Plus Jakarta Sans', -apple-system, sans-serif;
    --accent: #2563eb;
    --accent_texte: #ffffff;
    --accent_halo: rgba(37, 99, 235, 0.28);
}

/* THEMES_TRENDY_GRAPHIQUES ============================================ */

/* BASE ================================================================ */
*,
*::before,
*::after
{
    box-sizing: border-box;
}

html
{
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body
{
    margin: 0;
    background: var(--fond);
    color: var(--encre);
    font-family: var(--police_texte);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    padding-top: var(--hauteur_header);
    transition: background var(--duree) var(--easing), color var(--duree) var(--easing);
}

/* 09/10/2026 18:12 (n° 308) : textes d'exemple lisibles partout, en clair comme en sombre (Firefox les grise à 54 % par défaut) */
::placeholder
{
    color: var(--encre_attenuee);
    opacity: 1;
}

h1, h2, h3
{
    margin: 0 0 0.5em;
    font-family: var(--police_titres, var(--police_texte));
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 700;
}

h1
{
    font-size: clamp(2.2rem, 5.5vw, 4.4rem);
}

h2
{
    font-size: clamp(1.5rem, 3vw, 2.4rem);
}

h3
{
    font-size: 1.15rem;
}

p
{
    margin: 0 0 1em;
}

a
{
    color: inherit;
    text-decoration: none;
    transition: color var(--duree) var(--easing), opacity var(--duree) var(--easing);
}

a:hover
{
    color: var(--accent);
}

img, video
{
    max-width: 100%;
    display: block;
}

ul
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.page_width_wrapper
{
    width: 100%;
    max-width: var(--largeur_page);
    margin: 0 auto;
    padding-left: var(--gouttiere);
    padding-right: var(--gouttiere);
}

.main_content_area
{
    min-height: 60vh;
}
/* BASE ================================================================ */

/* HEADER ============================================================== */
.scroll_progress_bar
{
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--accent);
    z-index: 1001;
}

.header_principal
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--hauteur_header);
    background: var(--header_fond);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ligne);
    z-index: 1000;
}

.header_container
{
    max-width: var(--largeur_page);
    margin: 0 auto;
    padding: 0 var(--gouttiere);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand_logo_link
{
    /* 06/10/2026 08:50 (Claude) : monogramme Q à gauche, wordmark + baseline empilés à droite */
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    align-items: center;
    line-height: 1.1;
    text-decoration: none;
    color: var(--encre);
}

.brand_logo_link .logo_monogram_q
{
    grid-row: 1 / span 2;
    margin-right: 0;
    /* max-width en % sur une image dans une piste de grille auto → largeur 0 : on force la taille */
    max-width: none;
    min-width: 28px;
    width: 28px;
    height: 28px;
}

.brand_logo_link .wordmark_baseline
{
    white-space: nowrap;
}

.wordmark_anunaqi
{
    /* 09/10/2026 21:52 (Claude, n° 366) : nom de marque toujours en Syne, comme .adm_marque_nom (héritait d'Instrument Sans) */
    font-family: var(--police_titres);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.03em;
}

.wordmark_baseline
{
    font-size: 0.7rem;
    color: var(--encre_second);
    letter-spacing: 0.04em;
}

.navigation_desktop
{
    display: flex;
    /* 06/10/2026 08:48 (Claude) : 9 entrées, écart fluide et libellés insécables (plus de retour à la ligne ni de troncature à 1440 px) */
    /* gap: clamp(10px, 1.5vw, 28px); */
    /* 10/10/2026 02:19 (Claude, Dialogue n° 466) : écarts fixes par palier (voir NAV_PALIERS), plus d'écart fluide */
    gap: 28px;
    flex-wrap: nowrap;
    min-width: 0;
}

.navigation_desktop .nav_lien
{
    white-space: nowrap;
}

/* Le conteneur est plafonné par --largeur_page : les badges « bientôt » (entrées déjà grisées, infobulle conservée)
   et le lien « Docs .md en direct » du header (le héros porte déjà ce bouton) cèdent la place à la navigation */
.navigation_desktop .nav_badge_bientot,
.header_actions .badge_chantier_lien
{
    display: none;
}

@media (max-width: 1800px)
{
    .navigation_desktop .nav_lien
    {
        font-size: 0.9rem;
    }
}

@media (max-width: 1200px)
{
    .navigation_desktop .nav_lien
    {
        font-size: 0.84rem;
    }

    .brand_logo_link .wordmark_baseline
    {
        display: none;
    }
}

.nav_lien
{
    font-size: 0.95rem;
    font-weight: 500;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.nav_lien.nav_actif
{
    border-bottom-color: var(--accent);
}

.nav_a_venir
{
    color: var(--encre_second);
    cursor: default;
}

.nav_badge_bientot
{
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 1px solid var(--ligne);
    padding: 1px 5px;
    border-radius: var(--rayon_badge, 2px); /* ancien (n° 599) : 2px */
}

/* MÉGA-MENU EXPERTISES DESKTOP ======================================= */
/* 06/10/2026 13:35 (Claude) : bloc antérieur non attribué, SURCHARGÉ par la section NAVIGATION_LANCEMENT
   (ancrage pleine largeur du header, intention de survol en JS, transitions). Conservé : à supprimer par JaxX. */
.nav_item_mega
{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nav_mega_toggle
{
    background: none;
    border: none;
    color: var(--encre_second);
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--duree) var(--easing), color var(--duree) var(--easing);
}

.nav_mega_toggle svg
{
    width: 14px;
    height: 14px;
    transition: transform var(--duree) var(--easing);
}

.nav_item_mega:hover .nav_mega_toggle svg,
.nav_item_mega.mega_ouvert .nav_mega_toggle svg
{
    transform: rotate(180deg);
    color: var(--accent);
}

.mega_menu
{
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-35%);
    width: min(1080px, calc(100vw - 48px));
    background: var(--surface);
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon_p, 2px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 28px 32px 20px 32px;
    z-index: 1005;
    display: none;
    animation: apparition_mega 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav_item_mega:hover .mega_menu,
.nav_item_mega.mega_ouvert .mega_menu
{
    display: block;
}

@keyframes apparition_mega
{
    from
    {
        opacity: 0;
        transform: translateX(-35%) translateY(-10px);
    }
    to
    {
        opacity: 1;
        transform: translateX(-35%) translateY(0);
    }
}

.mega_menu_grille
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 36px;
    margin-bottom: 24px;
}

.mega_colonne
{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mega_pole
{
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--police_titres);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--encre);
    border-bottom: 1px solid var(--ligne);
    padding-bottom: 6px;
    text-decoration: none;
    transition: color var(--duree) var(--easing);
}

.mega_pole:hover
{
    color: var(--accent);
}

.mega_pole_numero
{
    font-family: var(--police_mono);
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: 600;
}

.mega_liste
{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mega_prestation
{
    font-size: 0.82rem;
    color: var(--encre_second);
    text-decoration: none;
    padding: 3px 0;
    display: inline-block;
    transition: color var(--duree) var(--easing), transform var(--duree) var(--easing);
}

.mega_prestation:hover
{
    color: var(--encre);
    transform: translateX(3px);
}

.mega_menu_pied
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--ligne);
    padding-top: 16px;
    gap: 20px;
}

.mega_menu_promesse
{
    margin: 0;
    font-size: 0.82rem;
    color: var(--encre_attenuee);
}

.mega_menu_actions
{
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.mega_lien_tout
{
    font-size: 0.85rem;
    font-weight: 600;
}

.mega_bouton_devis
{
    font-size: 0.82rem;
    padding: 6px 14px;
    border-radius: var(--rayon_p, 2px);
}
/* MÉGA-MENU EXPERTISES DESKTOP ======================================= */

.header_actions
{
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.badge_chantier
{
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 5px 9px;
    border-radius: var(--rayon_badge, 2px); /* ancien (n° 599) : 2px */
    white-space: nowrap;
}

.bouton_mode_toggle,
.trigger_burger,
.close_tiroir_btn
{
    background: none;
    border: 1px solid var(--ligne);
    color: var(--encre);
    width: 40px;
    height: 40px;
    border-radius: var(--rayon_p, 2px); /* ancien (n° 599) : 2px */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* Principe MBR : en sombre on montre le soleil (invite à passer en clair), en clair la lune */
.mode_icon_bright
{
    display: inline;
}

.mode_icon_dark
{
    display: none;
}

html.bright_mode .mode_icon_bright
{
    display: none;
}

html.bright_mode .mode_icon_dark
{
    display: inline;
}

/* 06/10/2026 16:18 : pictogrammes SVG de l'en-tête (palette, lune, soleil) */
.palette_icon .icone_svg,
.mode_icon .icone_svg
{
    display: block;
}

.trigger_burger
{
    display: none;
    flex-direction: column;
    gap: 5px;
}

.burger_ligne
{
    width: 18px;
    height: 2px;
    background: var(--encre);
}

/* 06/10/2026 08:32 (Claude) : styles sortis des attributs inline (menus.php, Home_vue.php) */
.logo_monogram_q
{
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    width: 28px;
    height: 28px;
}

.bouton_docs_live
{
    background: var(--accent);
    border: 1px solid var(--accent);
    box-shadow: 0 0 15px var(--accent_halo);
}

.pastille_live
{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--succes);
    margin-right: 8px;
    animation: pulsation_live 1.5s infinite;
}

@keyframes pulsation_live
{
    0%
    {
        opacity: 1;
    }
    50%
    {
        opacity: 0.35;
    }
    100%
    {
        opacity: 1;
    }
}

.lien_accent
{
    color: var(--accent);
    text-decoration: underline;
}

/* SÉLECTEUR DE PALETTE DIRECTION ARTISTIQUE */
.palette_theme_selecteur_wrapper
{
    position: relative;
}

.palette_theme_bt
{
    background: none;
    border: 1px solid var(--ligne);
    color: var(--encre);
    width: 40px;
    height: 40px;
    border-radius: var(--rayon_p, 2px); /* ancien (n° 599) : 2px */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    transition: all var(--duree) var(--easing);
}

.palette_theme_bt:hover,
.palette_theme_bt.actif
{
    border-color: var(--accent);
    background: var(--surface_carte);
    box-shadow: 0 0 12px var(--accent_halo);
}

.palette_dropdown_menu
{
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 290px;
    background: var(--surface);
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon_carte, 2px); /* ancien (n° 599) : 2px */
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 12px;
    z-index: 1002;
    display: none;
    flex-direction: column;
    gap: 6px;
    transform-origin: top right;
    animation: apparition_palette 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 06/10/2026 08:32 (Claude) : ouverture pilotée par classe (zéro style inline) */
.palette_theme_selecteur_wrapper.palette_ouvert .palette_dropdown_menu
{
    display: flex;
}

@keyframes apparition_palette
{
    from
    {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }
    to
    {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.palette_dropdown_header
{
    padding: 6px 8px 10px 8px;
    border-bottom: 1px solid var(--ligne);
    margin-bottom: 4px;
}

.palette_dropdown_titre
{
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--encre);
    letter-spacing: -0.01em;
}

.palette_dropdown_desc
{
    display: block;
    font-size: 0.68rem;
    color: var(--encre_attenuee);
    margin-top: 2px;
}

.palette_liste_themes
{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.palette_item_theme
{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--rayon_p, 2px); /* ancien (n° 599) : 2px */
    background: transparent;
    border: 1px solid transparent;
    color: var(--encre);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: all 0.15s ease;
}

.palette_item_theme:hover
{
    background: var(--surface_carte);
    border-color: var(--ligne);
    transform: translateX(2px);
}

.palette_item_theme.theme_selectionne
{
    background: var(--surface_carte);
    border-color: var(--accent);
}

.palette_pastille
{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.pastille_champagne,
.pastille_atelier
{
    background: linear-gradient(135deg, #dfc17b 50%, #0b0b0d 50%);
}

.pastille_minimaliste,
.pastille_suisse
{
    background: linear-gradient(135deg, #f8fafc 50%, #0c0d0e 50%);
}

.pastille_corporate
{
    background: linear-gradient(135deg, #1d4ed8 50%, #0b1220 50%);
}

.pastille_cyberpunk
{
    background: linear-gradient(135deg, #ff007f 50%, #00f0ff 50%);
}

.pastille_matrix,
.pastille_matrice
{
    background: linear-gradient(135deg, #00ff66 50%, #030704 50%);
}

.pastille_futur2026,
.pastille_IAslop
{
    background: linear-gradient(135deg, #8b5cf6 50%, #06b6d4 50%);
}

.pastille_obsidian
{
    background: linear-gradient(135deg, #2563eb 50%, #08090a 50%);
}

.palette_textes
{
    display: flex;
    flex-direction: column;
}

.palette_nom
{
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--encre);
}

.palette_detail
{
    font-size: 0.68rem;
    color: var(--encre_second);
}
/* HEADER ============================================================== */

/* TIROIR_MOBILE ======================================================= */
.tiroir_mobile
{
    position: fixed;
    inset: 0;
    background: var(--fond);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    padding: 16px var(--gouttiere) calc(24px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    opacity: 0;
    transition: transform 320ms var(--easing), opacity 320ms var(--easing);
}

.tiroir_mobile.tiroir_ouvert
{
    transform: translateY(0);
    opacity: 1;
}

.tiroir_header
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
}

.tiroir_liens
{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.tiroir_item
{
    display: flex;
    align-items: baseline;
    gap: 14px;
    border-bottom: 1px solid var(--ligne);
    padding: 12px 0;
}

.tiroir_item_num
{
    font-family: var(--police_mono);
    font-size: 0.75rem;
    color: var(--encre_second);
}

.tiroir_lien
{
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
}

.tiroir_footer_infos
{
    font-size: 0.85rem;
    color: var(--encre_second);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 10/10/2026 01:30 (Claude, Dialogue n° 456) : menu de l'atelier en tête du tiroir mobile, repliable ;
   le tiroir défile quand l'atelier ouvert et les liens dépassent la hauteur de l'écran */
.tiroir_mobile
{
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tiroir_adm
{
    flex-shrink: 0;
    margin: 4px 0 8px;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon_p, 4px); /* ancien (n° 599) : 4px */
    background: var(--surface_carte);
}

.tiroir_adm_bascule
{
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: none;
    color: var(--encre);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.tiroir_adm_titre
{
    flex: 1;
    text-align: left;
}

.tiroir_adm_chevron
{
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--duree) var(--easing);
}

.tiroir_adm_ferme .tiroir_adm_chevron
{
    transform: rotate(-45deg);
}

/* .tiroir_adm_liens : sélecteur renforcé, la règle .adm_menu_liens plus bas imposait display:flex */
.tiroir_adm .tiroir_adm_liens
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 4px;
    padding: 0 6px 8px;
}

.tiroir_adm_liens .adm_menu_lien
{
    padding: 8px 6px;
    font-size: 0.8rem;
    min-width: 0;
}

.tiroir_adm_liens .adm_menu_lien span
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tiroir_adm_liens .adm_menu_lien_sortie
{
    grid-column: 1 / -1;
    border-top: 1px solid var(--ligne);
    margin-top: 4px;
}

.tiroir_adm_ferme .tiroir_adm_liens
{
    display: none;
}

.tiroir_mobile .tiroir_liens
{
    flex: 1 0 auto;
}
/* TIROIR_MOBILE ======================================================= */

/* TAB_BAR_MOBILE ====================================================== */
.tab_bar_mobile
{
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--hauteur_tab_bar) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--fond);
    border-top: 1px solid var(--ligne);
    z-index: 1000;
}

.tab_bar_item
{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: var(--encre_second);
}

.tab_bar_item.tab_actif
{
    color: var(--accent);
}

.tab_bar_icone
{
    font-size: 1.2rem;
    line-height: 1;
}
/* TAB_BAR_MOBILE ====================================================== */

/* FOOTER ============================================================== */
.footer_principal
{
    border-top: 1px solid var(--ligne);
    background: var(--fond_second);
    margin-top: 80px;
}

.footer_grille
{
    max-width: var(--largeur_page);
    margin: 0 auto;
    padding: var(--espace_5) var(--gouttiere) var(--espace_4);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--espace_4);
}

.footer_grille > :first-child
{
    grid-column: span 2;
}

@media (max-width: 900px)
{
    .footer_grille > :first-child
    {
        grid-column: span 1;
    }
}

.footer_manifeste,
.coord_item
{
    color: var(--encre_second);
    font-size: 0.95rem;
    max-width: 48ch;
}

.coord_item
{
    margin: 0 0 6px;
}

.footer_titre_colonne
{
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--encre_second);
    margin-bottom: 16px;
}

.footer_liste li
{
    padding: 4px 0;
    font-size: 0.95rem;
}

.footer_bas
{
    border-top: 1px solid var(--ligne);
    max-width: var(--largeur_page);
    margin: 0 auto;
    padding: 18px var(--gouttiere) calc(18px + env(safe-area-inset-bottom));
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--encre_second);
}

.footer_liens_legaux
{
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.footer_lien
{
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
}

/* 06/10/2026 17:21 : accès discret à l'atelier _adm (demande de JaxX) */
.footer_lien_atelier
{
    align-items: center;
    opacity: 0.6;
}

.footer_lien_atelier:hover,
.footer_lien_atelier:focus-visible
{
    opacity: 1;
}
/* FOOTER ============================================================== */

/* UTILITAIRES ========================================================= */
.bouton_principal
{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--accent);
    color: var(--accent_texte);
    padding: 14px 22px;
    border-radius: var(--rayon_bouton, var(--rayon, 2px));
    clip-path: var(--clip_bouton, none);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid var(--accent);
    transition: transform var(--duree) var(--easing), opacity var(--duree) var(--easing);
}

.bouton_principal:hover
{
    color: var(--accent_texte);
    transform: translateY(-1px);
}

.bouton_secondaire
{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: var(--rayon_bouton, var(--rayon, 2px));
    clip-path: var(--clip_bouton, none);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid var(--encre);
}

.sur_titre
{
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--encre_second);
    margin-bottom: 14px;
}

.barre_progression
{
    width: 100%;
    height: 6px;
    background: var(--ligne);
    border-radius: var(--rayon_badge, 2px); /* ancien (n° 599) : 2px */
    overflow: hidden;
}

.barre_progression_valeur
{
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width 900ms var(--easing);
}

.texte_mono
{
    font-family: var(--police_mono);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}
/* UTILITAIRES ========================================================= */

/* GRILLE_FLUIDE ======================================================= */
/* Système de grille fluide : les colonnes se créent et se replient d'elles-mêmes selon la
   largeur disponible (auto-fit + minmax), sans points de rupture codés en dur.
   min(100%, var(--colonne_min)) garantit qu'une colonne ne déborde jamais d'un écran étroit. */
.grille
{
    display: grid;
    gap: var(--gouttiere_grille);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--colonne_min)), 1fr));
}

.grille_2
{
    --colonne_min: 360px;
}

.grille_3
{
    --colonne_min: 280px;
}

.grille_4
{
    --colonne_min: 220px;
}

.grille_serree
{
    gap: 1px;
}

/* Grille 12 colonnes fluide pour les mises en page éditoriales */
.grille_12
{
    display: grid;
    gap: var(--gouttiere_grille);
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.col_4  { grid-column: span 4; }
.col_6  { grid-column: span 6; }
.col_8  { grid-column: span 8; }
.col_12 { grid-column: span 12; }

@media (max-width: 900px)
{
    .col_4,
    .col_6,
    .col_8
    {
        grid-column: span 12;
    }
}

/* Empilement vertical fluide */
.pile
{
    display: flex;
    flex-direction: column;
    gap: var(--espace_3);
}

/* Groupe d'actions : s'enroule proprement, boutons pleine largeur sur très petit écran */
.groupe_actions
{
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace_2);
}

@media (max-width: 480px)
{
    .groupe_actions > .bouton_principal,
    .groupe_actions > .bouton_secondaire
    {
        flex: 1 1 100%;
        justify-content: center;
    }
}
/* GRILLE_FLUIDE ======================================================= */

/* RESPONSIVE ========================================================== */
/* Les grilles sont fluides (auto-fit) : plus de règle de colonnes à 900 px pour le footer */

@media (max-width: 768px)
{
    body
    {
        padding-bottom: calc(var(--hauteur_tab_bar) + env(safe-area-inset-bottom));
    }

    .navigation_desktop,
    .badge_chantier
    {
        display: none;
    }

    .trigger_burger
    {
        display: inline-flex;
    }

    .tab_bar_mobile
    {
        display: flex;
    }

    .wordmark_baseline
    {
        display: none;
    }

    .footer_principal
    {
        margin-top: 48px;
    }
}
/* RESPONSIVE ========================================================== */

/* NAVIGATION_LANCEMENT ================================================ */
/* 06/10/2026 13:33 (Claude) : navigation de lancement (plan §4.4 à §4.6) — méga-menu Expertises, bouton Devis,
   compte, header compact, tab bar à cinq entrées, feuilles de fond (<dialog>), footer quatre colonnes */

/* --- Header : conteneur relatif pour ancrer le méga-menu --- */
.header_container
{
    position: relative;
}

.header_principal
{
    transition: box-shadow var(--duree) var(--easing), background var(--duree) var(--easing);
}

.header_principal.header_compact
{
    box-shadow: var(--ombre);
}

.header_principal.header_compact .wordmark_baseline
{
    display: none;
}

.header_compte
{
    width: 40px;
    height: 40px;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon_p, 2px); /* ancien (n° 599) : 2px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--encre);
    transition: border-color var(--duree) var(--easing), color var(--duree) var(--easing);
}

.header_compte:hover
{
    border-color: var(--accent);
    color: var(--accent);
}

.header_bouton_devis
{
    padding: 10px 18px;
    font-size: 0.88rem;
    white-space: nowrap;
}

.header_bouton_devis.nav_a_venir
{
    background: transparent;
    color: var(--encre_second);
    border-color: var(--ligne);
    cursor: default;
}

.header_bouton_devis .nav_badge_bientot
{
    display: none;
}

/* --- Méga-menu Expertises --- */
.nav_item_mega
{
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.nav_mega_toggle
{
    background: none;
    border: 0;
    padding: 4px 2px;
    color: var(--encre_second);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: transform 0.35s var(--easing), color var(--duree) var(--easing);
}

.nav_item_mega.mega_ouvert .nav_mega_toggle
{
    /* transform: rotate(180deg); */
    /* 10/10/2026 02:19 (Claude, n° 466) : le bouton entier est le déclencheur, seul le chevron pivote (règle « svg » du bloc MÉGA-MENU) */
    color: var(--accent);
}

.nav_item_mega.mega_ouvert .nav_lien_expertises
{
    border-bottom-color: var(--accent);
}

/* 10/10/2026 02:19 (Claude, Dialogue n° 466) : « Expertises » est un seul bouton (libellé + chevron) à l'aspect d'un lien de navigation */
.navigation_desktop .nav_lien_expertises.nav_mega_toggle
{
    /* la taille vient des paliers de .navigation_desktop .nav_lien */
    font-family: inherit;
    line-height: inherit;
    font-weight: 500;
    color: var(--encre);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 6px 0;
    gap: 4px;
    align-items: center;
    white-space: nowrap;
    cursor: pointer;
}

.navigation_desktop .nav_lien_expertises.nav_mega_toggle.nav_actif
{
    border-bottom-color: var(--accent);
}

.navigation_desktop .nav_lien_expertises.nav_mega_toggle:hover,
.navigation_desktop .nav_item_mega.mega_ouvert .nav_lien_expertises.nav_mega_toggle
{
    color: var(--accent);
}

.navigation_desktop .nav_lien_expertises.nav_mega_toggle:focus-visible
{
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.nav_mega_chevron
{
    display: inline-flex;
    align-items: center;
    color: var(--encre_second);
}

.nav_item_mega:hover .nav_mega_chevron,
.nav_item_mega.mega_ouvert .nav_mega_chevron
{
    color: var(--accent);
}

/* En-tête du panneau : lien vers la page Expertises */
.mega_menu_entete
{
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ligne);
}

.mega_lien_page
{
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 14px;
    row-gap: 4px;
}

.mega_lien_page .icone_svg,
.mega_lien_page svg
{
    color: var(--accent);
    transition: transform var(--duree) var(--easing);
}

.mega_lien_page:hover svg
{
    transform: translateX(3px);
}

.mega_entete_titre
{
    font-family: var(--police_titres);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--encre);
}

.mega_lien_page:hover .mega_entete_titre
{
    color: var(--accent);
}

.mega_entete_detail
{
    font-size: 0.88rem;
    color: var(--encre_second);
}

/* Ancrage sur .header_container (pleine largeur) : l'entrée Expertises ne doit pas être le bloc conteneur */
.navigation_desktop .nav_item_mega
{
    position: static;
}

.navigation_desktop .mega_menu
{
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    margin-top: 1px;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--ligne);
    border-top: 0;
    border-radius: 0 0 var(--rayon_carte, 2px) var(--rayon_carte, 2px); /* ancien (n° 599) : 0 0 2px 2px */
    box-shadow: var(--ombre);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    animation: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.3s var(--easing), transform 0.4s var(--easing), visibility 0s linear 0.3s;
    z-index: 5;
}

.navigation_desktop .nav_item_mega.mega_ouvert .mega_menu
{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity 0.3s var(--easing), transform 0.4s var(--easing), visibility 0s;
}

.navigation_desktop .mega_menu_grille
{
    margin-bottom: 0;
}

.navigation_desktop .mega_pole
{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.mega_menu_interieur
{
    padding: 28px 32px 24px;
}

.navigation_desktop .mega_menu_grille
{
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
}

.mega_colonne
{
    min-width: 0;
}

.mega_pole
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--ligne);
    color: var(--encre);
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.25;
    transition: color var(--duree) var(--easing);
}

a.mega_pole:hover
{
    color: var(--accent);
}

.mega_pole_numero
{
    font-family: var(--police_mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: var(--accent);
}

.mega_pole.nav_a_venir
{
    color: var(--encre_second);
}

.mega_pole .nav_badge_bientot,
.mega_prestation .nav_badge_bientot
{
    display: inline-block;
    align-self: flex-start;
    margin-top: 4px;
}

.mega_liste
{
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mega_prestation
{
    font-size: 0.84rem;
    line-height: 1.3;
    color: var(--encre_second);
    transition: color var(--duree) var(--easing), transform var(--duree) var(--easing);
    display: inline-block;
}

a.mega_prestation:hover
{
    color: var(--encre);
    transform: translateX(3px);
}

.mega_menu_pied
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--ligne);
}

.mega_menu_promesse
{
    margin: 0;
    font-size: 0.88rem;
    color: var(--encre_second);
    max-width: 60ch;
}

.mega_menu_actions
{
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.mega_lien_tout,
.lien_accent
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mega_bouton_devis
{
    padding: 11px 18px;
    font-size: 0.88rem;
}

.mega_bouton_devis.nav_a_venir
{
    background: transparent;
    color: var(--encre_second);
    border-color: var(--ligne);
    cursor: default;
}

@media (max-width: 1280px)
{
    .navigation_desktop .mega_menu_grille
    {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* --- Tiroir mobile : navigation secondaire --- */
.tiroir_secondaire
{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    padding: 18px var(--gouttiere) 0;
}

.tiroir_lien_secondaire
{
    font-size: 0.9rem;
    color: var(--encre_second);
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
}

/* --- Tab bar : cinq entrées, Devis central surélevé --- */
.tab_bar_mobile
{
    align-items: stretch;
}

button.tab_bar_item
{
    background: none;
    border: 0;
    font: inherit;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    padding: 0;
}

.tab_bar_item
{
    min-height: 48px;
    min-width: 48px;
    position: relative;
    transition: color var(--duree) var(--easing);
}

.tab_bar_item svg
{
    display: block;
}

.tab_bar_item.tab_actif .tab_bar_icone:not(.tab_bar_icone_cercle)
{
    transform: translateY(-1px);
}

.tab_bar_item.tab_a_venir
{
    opacity: 0.55;
}

.tab_bar_icone
{
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--duree) var(--easing);
}

.tab_bar_icone_cercle
{
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent_texte);
    margin-top: -22px;
    box-shadow: 0 8px 20px var(--accent_halo);
    border: 3px solid var(--fond);
}

.tab_bar_item_devis .tab_bar_label
{
    color: var(--accent);
    font-weight: 600;
}

.tab_bar_item_devis:active .tab_bar_icone_cercle
{
    transform: scale(0.94);
}

/* --- Feuilles de fond (bottom sheets natifs) --- */
dialog.feuille_fond
{
    position: fixed;
    inset: auto 0 0 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    max-height: 86dvh;
    border: 0;
    border-top: 1px solid var(--ligne);
    border-radius: 16px 16px 0 0;
    background: var(--surface);
    color: var(--encre);
    padding: 10px var(--gouttiere) calc(24px + env(safe-area-inset-bottom));
    box-shadow: var(--ombre);
    overflow-y: auto;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s var(--easing), overlay 0.45s allow-discrete, display 0.45s allow-discrete;
}

dialog.feuille_fond[open]
{
    opacity: 1;
    transform: none;
}

@starting-style
{
    dialog.feuille_fond[open]
    {
        opacity: 0;
        transform: translateY(100%);
    }
}

dialog.feuille_fond::backdrop
{
    background: rgba(5, 7, 12, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.feuille_poignee
{
    width: 40px;
    height: 4px;
    border-radius: var(--rayon_badge, 2px); /* ancien (n° 599) : 2px */
    background: var(--ligne_forte);
    margin: 0 auto 14px;
}

.feuille_entete
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}

.feuille_titre
{
    font-size: 1.25rem;
    margin: 0;
}

.feuille_fermer
{
    width: 40px;
    height: 40px;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon_p, 2px); /* ancien (n° 599) : 2px */
    background: none;
    color: var(--encre);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.feuille_liste
{
    list-style: none;
    margin: 0;
    padding: 0;
}

.feuille_item
{
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ligne);
    color: var(--encre);
}

.feuille_item.nav_a_venir
{
    color: var(--encre_second);
}

.feuille_item .nav_badge_bientot
{
    flex-shrink: 0;
}

.feuille_item_numero
{
    font-family: var(--police_mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--accent);
    width: 24px;
    flex-shrink: 0;
}

.feuille_item_textes
{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.feuille_item_nom
{
    font-weight: 600;
    font-size: 0.98rem;
}

.feuille_item_detail
{
    font-size: 0.82rem;
    color: var(--encre_second);
}

.feuille_item_detail a
{
    color: var(--accent);
}

.feuille_item > svg
{
    flex-shrink: 0;
    color: var(--encre_second);
}

.feuille_pied
{
    display: flex;
    justify-content: center;
    padding-top: 18px;
}

.feuille_pied .bouton_principal
{
    width: 100%;
    justify-content: center;
}

/* --- Footer quatre colonnes --- */
.footer_marque
{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--encre);
}

.footer_monogramme
{
    width: 32px;
    height: 32px;
    max-width: none;
}

.footer_signature
{
    font-family: var(--police_titres);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 14px 0 0;
}

.footer_titre_coulisses
{
    margin-top: 22px;
}

.footer_liste_coulisses li
{
    font-size: 0.86rem;
}

.footer_liste_coulisses .footer_lien
{
    color: var(--encre_second);
}

.footer_bouton_rdv
{
    margin-top: 12px;
    padding: 10px 16px;
    font-size: 0.86rem;
}

.footer_bouton_rdv.nav_a_venir
{
    color: var(--encre_second);
    border-color: var(--ligne);
    cursor: default;
}

.footer_mention_fabrication
{
    flex-basis: 100%;
    margin: 0;
    font-size: 0.76rem;
    color: var(--encre_attenuee);
}

@media (min-width: 1100px)
{
    .footer_grille
    {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
    }

    .footer_grille > :first-child
    {
        grid-column: auto;
    }
}

@media (min-width: 701px) and (max-width: 1099px)
{
    .footer_grille
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer_grille > :first-child
    {
        grid-column: span 2;
    }
}

@media (max-width: 700px)
{
    .footer_grille
    {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer_grille > :first-child
    {
        grid-column: auto;
    }
}

/* --- Responsive header --- */
@media (max-width: 1100px)
{
    .header_bouton_devis
    {
        padding: 10px 14px;
    }
}

@media (max-width: 768px)
{
    .header_compte,
    .header_adm_bt,
    .adm_menu_wrapper,
    .header_bouton_devis
    {
        display: none;
    }

    .header_actions
    {
        gap: 10px;
    }

    .tab_bar_mobile
    {
        display: flex;
    }
}

/* --- NAV_PALIERS --- */
/* 10/10/2026 02:19 (Claude, Dialogue n° 466) : menu du haut réactif par paliers fixes, sans écart fluide.
   Mesuré au navigateur : la navigation (environ 400 px) chevauchait les actions de 769 à 900 px ;
   sous 961 px elle passe donc au burger et au tiroir (la tab bar reste réservée aux 768 px et moins). */
@media (max-width: 1280px)
{
    .navigation_desktop
    {
        gap: 20px;
    }
}

@media (max-width: 1024px)
{
    .navigation_desktop
    {
        gap: 16px;
    }
}

@media (max-width: 960px)
{
    .navigation_desktop
    {
        display: none;
    }

    .trigger_burger
    {
        display: inline-flex;
    }
}
/* NAVIGATION_LANCEMENT ================================================ */

/* ICONES_SVG ========================================================== */
/* 06/10/2026 16:19 (A.28) : pictogrammes SVG de _includes/icones_svg.php. icone_em reprend
   la taille du texte environnant, comme l'émoji qu'elle remplace. */
.icone_svg
{
    flex-shrink: 0;
}

.icone_em
{
    width: 1em;
    height: 1em;
    vertical-align: -0.14em;
}
/* ICONES_SVG ========================================================== */

/* FOND_DEGRADE ======================================================== */
/*
 * 06/10/2026 16:15 (demande de JaxX A.28) : trois lueurs radiales très douces, teintées par
 * l'accent du thème actif, sur un calque fixe placé derrière tout le contenu (z-index -1).
 * Coût : le calque est peint une seule fois ; l'animation ne touche que transform, que le
 * navigateur confie à la carte graphique (ni recalcul de mise en page, ni repeinture).
 * Animation réservée aux écrans larges à pointeur fin ; statique sur mobile / tactile et
 * quand le visiteur demande moins d'animations.
 */
:root,
html.dark_mode
{
    --fond_lueur_1: color-mix(in srgb, var(--accent) 16%, transparent);
    --fond_lueur_2: color-mix(in srgb, var(--accent) 9%, transparent);
    --fond_lueur_3: rgba(255, 255, 255, 0.035);
}

html.bright_mode
{
    --fond_lueur_1: color-mix(in srgb, var(--accent) 10%, transparent);
    --fond_lueur_2: color-mix(in srgb, var(--accent) 6%, transparent);
    --fond_lueur_3: rgba(255, 255, 255, 0.9);
}

body::before
{
    content: '';
    position: fixed;
    top: -12vh;
    right: -12vw;
    bottom: -12vh;
    left: -12vw;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient( 55vw 50vh at 18% 14%, var(--fond_lueur_1, var(--accent_halo)), transparent 70% ),
        radial-gradient( 50vw 55vh at 84% 78%, var(--fond_lueur_2, transparent), transparent 70% ),
        radial-gradient( 40vw 38vh at 66% 18%, var(--fond_lueur_3, transparent), transparent 70% );
}

/* @media (min-width: 900px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) */
/* 07/10/2026 12:28 (A.31) : animation continue sur tous les écrans, téléphones compris (transform et opacity seuls,
   pris en charge par la carte graphique) ; coupée uniquement si le visiteur demande moins d'animations. */
@media (prefers-reduced-motion: no-preference)
{
    body::before
    {
        animation: fond_derive 60s ease-in-out infinite alternate;
        will-change: transform;
    }
}

/* 07/10/2026 12:28 (A.31) : seconde nappe en contretemps (période différente, jamais synchrone avec la première) :
   le dégradé ne se fige jamais, mais reste à peine perceptible. Même calque de fond (z-index -1). */
body::after
{
    content: '';
    position: fixed;
    top: -10vh;
    right: -10vw;
    bottom: -10vh;
    left: -10vw;
    z-index: -1;
    pointer-events: none;
    opacity: .55;
    background:
        radial-gradient( 42vw 40vh at 72% 34%, var(--fond_lueur_2, transparent), transparent 70% ),
        radial-gradient( 36vw 34vh at 26% 72%, var(--fond_lueur_1, transparent), transparent 72% );
}

@media (prefers-reduced-motion: no-preference)
{
    body::after
    {
        animation: fond_respiration 43s ease-in-out infinite alternate;
        will-change: transform, opacity;
    }
}

@keyframes fond_respiration
{
    0%
    {
        transform: translate3d( 0, 0, 0 ) rotate( 0deg );
        opacity: .35;
    }
    50%
    {
        transform: translate3d( -4vw, 3vh, 0 ) rotate( 4deg );
        opacity: .7;
    }
    100%
    {
        transform: translate3d( 3vw, -4vh, 0 ) rotate( -3deg );
        opacity: .45;
    }
}

@keyframes fond_derive
{
    0%
    {
        transform: translate3d( 0, 0, 0 ) scale( 1 );
    }
    50%
    {
        transform: translate3d( 5vw, -4vh, 0 ) scale( 1.06 );
    }
    100%
    {
        transform: translate3d( -4vw, 5vh, 0 ) scale( 1.03 );
    }
}
/* FOND_DEGRADE ======================================================== */

/* HALO_SOURIS ========================================================= */
/* 06/10/2026 17:52 (A.30) : version A.29 remplacée par HALO_VAPOREUX ci-dessous ; conservée en commentaire
   (commentaires internes neutralisés en « / * » et « * / »).
/ * HALO_SOURIS ========================================================= * /
/ *
 * 06/10/2026 17:26 (demande de JaxX A.29) : piloté par _theme/halo_souris.js, qui ne crée le
 * calque que sur ordinateur à souris sans « réduire les animations ».
 * Mode sombre : projecteur de 680 px repris du site 2027 (mix-blend-mode screen) + reflet
 * localisé dans la carte survolée (variables --halo_x / --halo_y posées par le script).
 * Mode clair : tache de lumière plus large et plus lente, teintée par l'accent (multiply),
 * et onde légère au clic sur le fond.
 * Formes rondes obtenues par dégradé radial (aucun border-radius, règle JaxX 0 à 2 px).
 * z-index 999 : au-dessus du contenu, sous l'en-tête (1000+) et les modales.
 * /
.halo_souris
{
    position: fixed;
    top: -340px;
    left: -340px;
    width: 680px;
    height: 680px;
    z-index: 999;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient( circle closest-side, color-mix(in srgb, var(--accent) 18%, transparent) 0%, color-mix(in srgb, var(--accent) 6%, transparent) 45%, transparent 100% );
    mix-blend-mode: screen;
    transition: opacity .5s ease;
    will-change: transform;
}

.halo_souris.halo_visible
{
    opacity: 1;
}

html.bright_mode .halo_souris
{
    top: -480px;
    left: -480px;
    width: 960px;
    height: 960px;
    background: radial-gradient( circle closest-side, color-mix(in srgb, var(--accent) 16%, transparent) 0%, color-mix(in srgb, var(--accent) 6%, transparent) 50%, transparent 100% );
    mix-blend-mode: multiply;
}

/ * Reflet localisé dans la carte survolée (mode sombre uniquement) * /
html:not(.bright_mode) .carte_halo
{
    background-image: radial-gradient( 360px circle at var(--halo_x, 50%) var(--halo_y, 50%), color-mix(in srgb, var(--accent) 18%, transparent), transparent 70% );
}

/ * Onde au clic sur le fond (mode clair uniquement, créée puis retirée par le script) * /
.fond_onde
{
    position: fixed;
    width: 360px;
    height: 360px;
    margin: -180px 0 0 -180px;
    z-index: 998;
    pointer-events: none;
    background: radial-gradient( circle closest-side, transparent 55%, color-mix(in srgb, var(--accent) 22%, transparent) 72%, transparent 100% );
    mix-blend-mode: multiply;
    animation: fond_onde_expansion .9s cubic-bezier( .2, .7, .3, 1 ) forwards;
}

@keyframes fond_onde_expansion
{
    0%
    {
        transform: scale( .1 );
        opacity: 1;
    }
    100%
    {
        transform: scale( 1 );
        opacity: 0;
    }
}
/ * HALO_SOURIS ========================================================= * /
*/
/* HALO_SOURIS ========================================================= */

/* HALO_VAPOREUX ======================================================= */
/*
 * 06/10/2026 17:52 (demande de JaxX A.30), piloté par _theme/halo_souris.js (ordinateur à souris seulement).
 * Mode sombre : le halo n'existe QUE sur le premier plan. Un calque unique (.halo_reflet) se cale
 * sur la carte, l'image ou le bouton survolé ; trois lobes elliptiques décalés (variables --lobeN_x/y)
 * suivent le curseur à des vitesses différentes : forme vaporeuse, jamais un disque.
 * Mode clair : le halo n'existe QUE sur le fond, derrière tout le contenu (z-index -1, au-dessus du
 * dégradé body::before) : trois nappes elliptiques qui glissent, plus l'onde au clic.
 * Formes douces par dégradés radiaux (aucun border-radius au-delà de 2 px, règle JaxX).
 */
.halo_reflet
{
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    background:
        radial-gradient( ellipse 210px 150px at var(--lobe1_x, 50%) var(--lobe1_y, 50%), color-mix(in srgb, var(--accent) 24%, transparent), transparent 72% ),
        radial-gradient( ellipse 160px 240px at var(--lobe2_x, 50%) var(--lobe2_y, 50%), color-mix(in srgb, var(--accent) 15%, transparent), transparent 74% ),
        radial-gradient( ellipse 300px 220px at var(--lobe3_x, 50%) var(--lobe3_y, 50%), rgba(255, 255, 255, 0.07), transparent 70% );
    mix-blend-mode: screen;
    transition: opacity .45s ease;
}

.halo_reflet.halo_visible
{
    opacity: 1;
}

/* Le reflet de premier plan n'a pas lieu d'être en mode clair */
html.bright_mode .halo_reflet
{
    display: none;
}

.halo_fond
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.2s ease;
}

html.bright_mode .halo_fond.halo_visible
{
    opacity: 1;
}

html:not(.bright_mode) .halo_fond
{
    display: none;
}

.halo_nappe
{
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
}

.halo_nappe_1
{
    width: 620px;
    height: 440px;
    margin: -220px 0 0 -310px;
    background: radial-gradient( ellipse closest-side, color-mix(in srgb, var(--accent) 13%, transparent), transparent );
}

.halo_nappe_2
{
    width: 480px;
    height: 680px;
    margin: -340px 0 0 -240px;
    background: radial-gradient( ellipse closest-side, color-mix(in srgb, var(--accent) 8%, transparent), transparent );
}

.halo_nappe_3
{
    width: 900px;
    height: 560px;
    margin: -280px 0 0 -450px;
    background: radial-gradient( ellipse closest-side, rgba(255, 255, 255, 0.85), transparent );
}

/* Onde au clic : désormais derrière le contenu, sur le fond seulement */
:root body .fond_onde
{
    z-index: -1;
    width: 420px;
    height: 300px;
    margin: -150px 0 0 -210px;
    background: radial-gradient( ellipse closest-side, transparent 50%, color-mix(in srgb, var(--accent) 20%, transparent) 70%, transparent 100% );
    animation-duration: 1.2s;
}
/* HALO_VAPOREUX ======================================================= */

/* HALO_APPARITION ===================================================== */
/*
 * 07/10/2026 12:28 (demande de JaxX A.31), créé puis retiré par _theme/halo_souris.js.
 * Au toucher (mobile) et au clic (souris), le halo éclot à l'endroit touché :
 *   - sombre : dans l'élément de premier plan (calque découpé à sa forme, overflow hidden) ;
 *   - clair : sur le fond, derrière le contenu (z-index -1).
 * Animation sur transform et opacity seulement ; forme vaporeuse en trois ellipses superposées.
 */
.halo_eclosion
{
    pointer-events: none;
    overflow: hidden;
}

.halo_eclosion_plan
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    mix-blend-mode: screen;
}

.halo_eclosion_fond
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.halo_eclosion_coeur
{
    position: absolute;
    width: 460px;
    height: 340px;
    margin: -170px 0 0 -230px;
    background:
        radial-gradient( ellipse 46% 40% at 44% 48%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 100% ),
        radial-gradient( ellipse 34% 50% at 60% 54%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 100% ),
        radial-gradient( ellipse 50% 46% at 50% 50%, rgba(255, 255, 255, 0.1), transparent 100% );
    animation: halo_eclosion_anim 1.1s cubic-bezier( .2, .7, .3, 1 ) forwards;
    will-change: transform, opacity;
}

html.bright_mode .halo_eclosion_coeur
{
    width: 620px;
    height: 440px;
    margin: -220px 0 0 -310px;
    background:
        radial-gradient( ellipse 46% 40% at 44% 48%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 100% ),
        radial-gradient( ellipse 34% 50% at 60% 54%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 100% ),
        radial-gradient( ellipse 50% 46% at 50% 50%, rgba(255, 255, 255, 0.9), transparent 100% );
    animation-duration: 1.5s;
}

@keyframes halo_eclosion_anim
{
    0%
    {
        transform: scale( .25 ) rotate( -6deg );
        opacity: 0;
    }
    30%
    {
        opacity: 1;
    }
    100%
    {
        transform: scale( 1.15 ) rotate( 4deg );
        opacity: 0;
    }
}
/* HALO_APPARITION ===================================================== */

/* SECTIONS_TRANSLUCIDES =============================================== */
/*
 * 06/10/2026 17:52 (A.30) : les sections peintes avec la couleur du fond (var(--fond)) masquaient le dégradé
 * animé et le halo du mode clair. Elles deviennent transparentes (rendu identique, fond vivant visible).
 * Les bandeaux alternés (var(--fond_second)) restent marqués mais légèrement translucides.
 * Restent opaques : barres collantes (filtres), lightbox, tiroir, tab bar, atelier _adm.
 * Sélecteur :root body :is(...) : plus spécifique que les feuilles de page chargées après theme.css.
 */
:root body :is( .expertise_prestations, .expertise_autres_poles, .expertise_methode, .expertise_autres, .expertises_methode,
    .prestation_benefices, .prestation_methode, .prestation_faq, .prestation_maillage )
{
    background: transparent;
}

:root body :is( .agence_parcours, .agence_methode, .article_lies, .section_journal, .contact_rdv, .devis_hero, .devis_section_faq,
    .engagements_mesures, .expertise_situation, .expertise_faq, .expertise_cta, .expertises_poles, .expertises_cta,
    .merci_suites_section, .offres_hero, .offres_groupe:nth-of-type(odd), .offres_methode, .offres_cta, .plan_rubriques,
    .prestation_pour_qui, .prestation_livrables, .prestation_prix_delais, .prestation_cta_final, .prestation_cta )
{
    background: color-mix(in srgb, var(--fond_second) 80%, transparent);
}
/* SECTIONS_TRANSLUCIDES =============================================== */

/* SATIN =============================================================== */
/*
 * 06/10/2026 17:52 (A.30) : léger dégradé satiné posé en background-image par-dessus la couleur d'aplat
 * (la couleur de chaque composant reste la sienne : seul un voile lumineux en biais s'ajoute).
 */
:root,
html.dark_mode
{
    --satin: linear-gradient( 155deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.015) 38%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.14) 100% );
    --satin_accent: linear-gradient( 155deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(0, 0, 0, 0.12) 100% );
    --satin_barre: linear-gradient( 180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100% );
}

html.bright_mode
{
    --satin: linear-gradient( 155deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(0, 0, 0, 0.025) 100% );
    --satin_accent: linear-gradient( 155deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.04) 45%, rgba(0, 0, 0, 0.1) 100% );
    --satin_barre: linear-gradient( 180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100% );
}

:root body :is( .home_bento_carte, .prestation_carte, .offres_carte, .devis_carte, .blog_carte, .phase_carte, .galerie_carte,
    .realisations_carte, .realisation_fiche_technique_carte, .expertise_carte, .expertise_prestation_carte, .contact_coord_carte,
    .contact_rdv_carte, .ds_icone_carte, .ds_logo_carte, .ds_mb_carte, .ds_ratio_carte, .ds_schema_logo_carte, .ds_typo_carte,
    .home_cta_option, .adm_carte, .adm_demande_carte, .adm_connexion_carte, .palette_dropdown_menu, .adm_menu_panneau )
{
    background-image: var(--satin);
}

:root body :is( .bouton_principal, .tab_bar_icone_cercle )
{
    background-image: var(--satin_accent);
}

:root body .header_principal
{
    background-image: var(--satin_barre);
}
/* SATIN =============================================================== */

/* PARALLAXE =========================================================== */
/*
 * 06/10/2026 17:52 (A.30), piloté par _theme/parallaxe.js : --plx_x / --plx_y (-1 à 1) sur <html>.
 * Plans : fond (le plus ample, sens inverse), cartes, images, boutons (sens du mouvement).
 * La propriété « translate » s'additionne aux « transform » existants (révélations, survols,
 * boutons magnétiques) sans les écraser. Aucune transition : le lissage est fait par le script.
 */
html.parallaxe_active body::before
{
    translate: calc( var(--plx_x, 0) * -16px ) calc( var(--plx_y, 0) * -12px );
}

html.parallaxe_active .arriere_plan_texture_globale
{
    /* translate: calc( var(--plx_x, 0) * -22px ) calc( var(--plx_y, 0) * -16px ); */
    /* 07/10/2026 22:08 (A.42) : + décalage de défilement (--plx_defil, en px, posé par parallaxe.js sur le calque) */
    translate: calc( var(--plx_x, 0) * -22px ) calc( var(--plx_y, 0) * -16px - var(--plx_defil, 0) * 1px );
}

html.parallaxe_active :is( .home_bento_carte, .prestation_carte, .offres_carte, .devis_carte, .blog_carte, .phase_carte,
    .galerie_carte, .realisations_carte, .expertise_carte, .expertise_prestation_carte, .contact_coord_carte, .contact_rdv_carte,
    .home_cta_option )
{
    translate: calc( var(--plx_x, 0) * 3px ) calc( var(--plx_y, 0) * 3px );
}

/* Image dans un cadre masqué : légèrement agrandie, elle glisse derrière la fenêtre du cadre */
html.parallaxe_active .plx_image_cadree
{
    scale: 1.05;
    translate: calc( var(--plx_x, 0) * -6px ) calc( var(--plx_y, 0) * -5px );
}

html.parallaxe_active .plx_image
{
    translate: calc( var(--plx_x, 0) * 5px ) calc( var(--plx_y, 0) * 4px );
}

html.parallaxe_active main :is( .bouton_principal, .bouton_secondaire )
{
    translate: calc( var(--plx_x, 0) * 4px ) calc( var(--plx_y, 0) * 3px );
}
/* PARALLAXE =========================================================== */

/* LOGO_THEME ========================================================== */
/*
 * 06/10/2026 17:52 (A.30) : le monogramme est désormais un SVG en ligne (logo_monogramme_svg(),
 * _includes/icones_svg.php) dont le dégradé suit l'accent du thème actif : Obsidian cobalt,
 * Atelier, Suisse et Matrice dans leurs propres teintes, en clair comme en sombre.
 */
.logo_monogramme
{
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.logo_arret_clair
{
    stop-color: color-mix(in srgb, var(--accent) 70%, white);
}

.logo_arret_accent
{
    stop-color: var(--accent);
}

.logo_arret_profond
{
    stop-color: color-mix(in srgb, var(--accent) 72%, black);
}

.logo_point_quantique
{
    fill: var(--accent);
    opacity: .5;
}
/* LOGO_THEME ========================================================== */

/* ADM_MENU ============================================================ */
/*
 * 06/10/2026 17:52 (A.30) : bouton cadenas dans l'en-tête (connexion), puis panneau déroulant de l'atelier
 * une fois connecté. Même gabarit que le sélecteur de thèmes. Sur mobile, le lien passe dans le tiroir.
 */
.header_adm_bt
{
    width: 40px;
    height: 40px;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon_p, 2px); /* ancien (n° 599) : 2px */
    background: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--encre_second);
    cursor: pointer;
    transition: border-color var(--duree) var(--easing), color var(--duree) var(--easing), box-shadow var(--duree) var(--easing);
}

.header_adm_bt:hover,
.header_adm_bt:focus-visible,
.adm_menu_ouvert .header_adm_bt
{
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 12px var(--accent_halo);
}

.header_adm_bt_ouvert
{
    color: var(--accent);
}

.adm_menu_wrapper
{
    position: relative;
    display: inline-flex;
}

.adm_menu_panneau
{
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background-color: var(--surface);
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon_carte, 2px); /* ancien (n° 599) : 2px */
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 10px;
    z-index: 1002;
    display: none;
    flex-direction: column;
    gap: 6px;
    transform-origin: top right;
    animation: apparition_palette 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.adm_menu_ouvert .adm_menu_panneau
{
    display: flex;
}

/* 15/10/2026 00:27 (Claude #3, Dialogue n° 1517 : « le menu admin doit avoir un overflow et ne pas dépasser du bas
   de la fenêtre ») : hauteur bornée à la fenêtre sous l'en-tête, défilement interne, le défilement ne passe pas à la page */
.adm_menu_panneau
{
    max-height: calc(100vh - var(--hauteur_header) - 24px);
    max-height: calc(100dvh - var(--hauteur_header) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.adm_menu_panneau > *
{
    flex-shrink: 0;
}

.adm_menu_entete
{
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px 8px;
    border-bottom: 1px solid var(--ligne);
}

.adm_menu_titre
{
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--encre);
}

.adm_menu_desc
{
    font-size: 0.75rem;
    color: var(--encre_attenuee);
}

.adm_menu_liens
{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.adm_menu_lien
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--rayon_p, 2px); /* ancien (n° 599) : 2px */
    font-size: 0.88rem;
    color: var(--encre_second);
    text-decoration: none;
    transition: background-color var(--duree) var(--easing), color var(--duree) var(--easing);
}

.adm_menu_lien svg
{
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.adm_menu_lien:hover,
.adm_menu_lien:focus-visible
{
    background-color: var(--surface_carte);
    color: var(--accent);
}

.adm_menu_pied
{
    padding-top: 6px;
    border-top: 1px solid var(--ligne);
}

.adm_menu_lien_sortie:hover,
.adm_menu_lien_sortie:focus-visible
{
    color: var(--encre);
}

.tiroir_lien_atelier
{
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 07/10/2026 12:29 (A.30) : sur mobile, l'atelier passe par le tiroir (cette section suit la règle RESPONSIVE et l'écraserait) */
@media (max-width: 768px)
{
    .header_adm_bt,
    .adm_menu_wrapper
    {
        display: none;
    }
}
/* ADM_MENU ============================================================ */

/* CONNEXION_POPIN ===================================================== */
/*
 * 07/10/2026 13:11 : popin de connexion du module user (_modules/user/user.js, open_connect_block) aux couleurs
 * du thème actif. Le module génère .connect_block > .close_connect_block + .modale.connect_form ; user.css ne
 * met en forme que l'ancien nom .connectForm, d'où cet habillage. Ouverte par le cadenas (.logIn_sucribe_bt).
 */
/* html > : user.css est chargé après theme.css, la popin est ajoutée directement sous <html> (user.js) */
html > .connect_block
{
    background-color: color-mix(in srgb, var(--fond) 72%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--encre);
    z-index: 3000;
}

.connect_block .connect_form
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(400px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 36px 28px 30px;
    background-color: var(--surface);
    background-image: var(--satin);
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon_carte, 2px); /* ancien (n° 599) : 2px */
    box-shadow: var(--ombre), 0 0 60px var(--accent_halo);
    z-index: 2;
    animation: connect_apparition 0.32s var(--easing);
}

@keyframes connect_apparition
{
    from
    {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 12px));
    }
    to
    {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.connect_marque
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.connect_marque_nom
{
    font-family: var(--police_titres);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.01em;
    color: var(--encre);
}

.connect_block .connect_form .title
{
    font-family: var(--police_texte);
    font-size: var(--texte_s);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--encre_second);
}

.connect_block .website_connect_block
{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.connect_block .input_wrapper
{
    width: 100%;
    margin: 0;
}

.connect_block .input_placeholder
{
    display: none;
}

.connect_block .connect_form input
{
    width: 100%;
    padding: 12px 14px;
    font-family: var(--police_texte);
    font-size: 1rem;
    color: var(--encre);
    background-color: var(--surface_input);
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon_input, 2px); /* ancien (n° 599) : 2px */
    outline: none;
    transition: border-color var(--duree) var(--easing), box-shadow var(--duree) var(--easing);
}

.connect_block .connect_form input:focus
{
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent_halo);
}

.connect_block .connect_form input::placeholder
{
    color: var(--encre_attenuee);
}

.connect_block .bt_display,
.connect_block .bt
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 16px;
    font-family: var(--police_texte);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--accent_texte);
    background-color: var(--accent);
    background-image: var(--satin_accent, none);
    border: 1px solid var(--accent);
    border-radius: var(--rayon_bouton, 2px); /* ancien (n° 599) : 2px */
    cursor: pointer;
    transition: filter var(--duree) var(--easing), box-shadow var(--duree) var(--easing);
}

.connect_block .bt_display:hover,
.connect_block .bt:hover
{
    filter: brightness(1.08);
    box-shadow: 0 0 18px var(--accent_halo);
}

.connect_block .link
{
    color: var(--encre_second);
    cursor: pointer;
}

.connect_block .link:hover
{
    color: var(--accent);
}

.connect_block .social_connect
{
    width: 100%;
    padding: 14px 0 0;
    border-top: 1px solid var(--ligne);
}

.connect_block .google_connect
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.connect_block .user_gg_preview
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    /* 07/10/2026 20:36 : police du thème (le module user n'en déclare pas) */
    font-family: var(--police_texte);
    font-size: var(--texte_s);
    color: var(--encre_second);
}

.connect_block .gg_avatar
{
    width: 44px;
    height: 44px;
    border-radius: 2px;
    background-size: cover;
    background-position: center;
}

.connect_block .gg_name
{
    color: var(--encre);
    font-weight: 600;
}

.connect_block .gg_response_block,
.connect_block .error_block
{
    margin-top: 6px;
    /* 07/10/2026 20:36 : police du thème */
    font-family: var(--police_texte);
    font-size: var(--texte_s);
    color: var(--encre);
}

.connect_block .error_block
{
    background-color: color-mix(in srgb, var(--erreur) 18%, transparent);
    border: 1px solid var(--erreur);
    border-radius: var(--rayon_p, 2px); /* ancien (n° 599) : 2px */
}
/* Retours du champ e-mail (module user : .suscribe_block « Email inconnu », .error, lien mot de passe oublié) */
.connect_block .suscribe_block,
.connect_block .website_connect_block .error
{
    margin-top: 10px;
    padding: 8px 12px;
    font-family: var(--police_texte);
    font-size: var(--texte_s);
    line-height: 1.5;
    color: var(--encre_second);
    text-align: center;
    border: 1px solid var(--ligne);
    border-radius: var(--rayon_p, 2px); /* ancien (n° 599) : 2px */
}

.connect_block .suscribe_block em
{
    font-family: var(--police_texte);
    font-style: normal;
    color: var(--encre_second);
}

.connect_block .website_connect_block .error
{
    color: var(--encre);
    background-color: color-mix(in srgb, var(--erreur) 18%, transparent);
    border-color: var(--erreur);
}

.connect_block .ok_connect_block .link
{
    margin-top: 8px;
    font-family: var(--police_texte);
    font-size: var(--texte_s);
    color: var(--accent);
    text-align: center;
    cursor: pointer;
}
/* CONNEXION_POPIN ===================================================== */

/* TEXTURES_ABSTRAITES ================================================= */
/*
 * 07/10/2026 : Calque de texture abstraite de fond (opacité réglable, 0.2 par défaut).
 * Adaptation automatique Dark Mode (screen) et Bright Mode (multiply + invert).
 * Mouvement de parallaxe multiplan fluide synchronisé sur _theme/parallaxe.js.
 */
.arriere_plan_texture_globale
{
    position: fixed;
    top: -5vh;
    left: -5vw;
    width: 110vw;
    /* height: 110vh; */
    height: 150vh; /* 07/10/2026 22:08 (A.42) : réserve de hauteur pour la parallaxe de défilement */
    translate: 0 calc( var(--plx_defil, 0) * -1px ); /* 07/10/2026 22:08 (A.42) : décalage posé par parallaxe.js */
    z-index: -1;
    pointer-events: none;
    background-image: var(--texture_fond_url, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--texture_fond_opacite, 0.2);
    mix-blend-mode: screen;
    filter: contrast(1.1) brightness(0.95);
    transition: opacity 0.4s ease, filter 0.4s ease;
    will-change: translate, opacity;
}

html.bright_mode .arriere_plan_texture_globale
{
    mix-blend-mode: multiply;
    filter: invert(1) contrast(1.15) brightness(1.05);
}
/* TEXTURES_ABSTRAITES ================================================= */

/* LIGHTBOX_ZOOM ======================================================= */
.lightbox_zoom_cadre
{
    display: flex;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    line-height: 0;
    touch-action: none;
    cursor: zoom-in;
}

.lightbox_zoom_cadre.lightbox_zoom_zoome
{
    cursor: zoom-out;
    /* 10/10/2026 02:52 (n° 493) : au-delà de 1×, le cadre ne rogne plus, l'image zoomée remplit toute la fenêtre de la lightbox */
    overflow: visible;
}

/* (n° 493) Pendant le zoom, le conteneur coupe ce qui dépasse de l'écran (pas de barres de défilement, y compris sur un <dialog> modal) */
.lightbox_zoom_conteneur.lightbox_zoom_plein_ecran
{
    overflow: hidden;
    overflow: clip;
}

/* (n° 494) Boutons fermer / précédent / suivant, légende et compteur restent visibles et cliquables au-dessus de l'image zoomée */
.lightbox_zoom_plein_ecran .lightbox_zoom_controle
{
    z-index: 3;
}

.lightbox_zoom_plein_ecran .lightbox_zoom_controle_relatif
{
    position: relative;
}

/* Légende lisible sur la photo : fond sombre sans marge interne (la mise en page ne bouge pas) */
.lightbox_zoom_plein_ecran figcaption.lightbox_zoom_controle
{
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.6);
    color: #ffffff;
    border-radius: var(--rayon_p, 2px); /* ancien (n° 599) : 2px */
}

/* Bouton fermer transparent de la visionneuse des dialogues : fond sombre pour rester visible sur une image claire */
.lightbox_zoom_plein_ecran .dialogue_visionneuse_fermer
{
    background: rgba(0, 0, 0, 0.55);
}

.lightbox_zoom_image
{
    transform-origin: 0 0;
    will-change: transform;
    transition: transform 0.12s ease-out;
    user-select: none;
    -webkit-user-select: none;
}

.lightbox_zoom_cadre.lightbox_zoom_direct .lightbox_zoom_image
{
    transition: none;
}

@media (prefers-reduced-motion: reduce)
{
    .lightbox_zoom_image
    {
        transition: none;
    }
}
/* LIGHTBOX_ZOOM ======================================================= */

/* FORMES_THEMES ======================================================= */
/*
 * 10/10/2026 07:03 (Dialogue n° 569, 570, 550, 599, 600, Claude) — A VALIDER PAR JaxX
 * Formes propres à chaque thème, appliquées à tout le site public depuis ce seul fichier :
 *   - rayons : --rayon_carte, --rayon_bouton, --rayon_input, --rayon_badge, --rayon_p (section THEMES_TRENDY_GRAPHIQUES) ;
 *   - Cyberpunk : chanfreins caricaturaux (clip-path), arêtes coupées redessinées par des calques de fond,
 *     plastique jaune / rose / cyan à arrêts nets (aucun fondu, n° 570) ;
 *   - Matrix : étiquette de dossier (onglet qui dépasse en haut à droite, biais oblique à gauche) ;
 *   - Champagne : aplats d'accent remplacés par un dégradé satiné subtil (n° 550) ;
 *   - Minimaliste : aucun rayon ; IA Slop (theme_futur2026) : grands rayons et pilules.
 * Spécificité « :root body :is(…) » = (0,2,1) : passe devant les feuilles de page chargées après theme.css.
 * Champs de formulaire : rayon seulement (jamais de clip-path, pour garder bordures et focus natifs).
 * Visuels (images, héros) et blocs ayant un enfant qui déborde : rayon seulement (clip-path couperait l'enfant).
 * Classes utilitaires réutilisables : forme_carte, forme_bouton, forme_bouton_plein, forme_champ, forme_badge.
 */

/* Jetons propres aux thèmes à découpe : lignes des arêtes coupées, satins tranchés */
html.theme_cyberpunk
{
    --calques_carte:
        linear-gradient(to top right, transparent calc(50% - 2px), var(--ligne_forte) calc(50% - 2px), var(--ligne_forte) 50%, transparent 50%),
        linear-gradient(to top right, transparent 50%, var(--ligne) 50%, var(--ligne) calc(50% + 2px), transparent calc(50% + 2px));
    --calques_carte_taille: 28px 28px, 28px 28px;
    --calques_carte_position: right 0 top 0, left 0 bottom 0;
    --calques_bouton:
        linear-gradient(to top right, transparent calc(50% - 2px), var(--ligne) calc(50% - 2px), var(--ligne) 50%, transparent 50%),
        linear-gradient(to top right, transparent 50%, var(--ligne) 50%, var(--ligne) calc(50% + 2px), transparent calc(50% + 2px));
    --calques_bouton_plein:
        linear-gradient(to top right, transparent calc(50% - 2px), var(--ligne_forte) calc(50% - 2px), var(--ligne_forte) 50%, transparent 50%),
        linear-gradient(to top right, transparent 50%, var(--ligne_forte) 50%, var(--ligne_forte) calc(50% + 2px), transparent calc(50% + 2px));
    --calques_bouton_taille: 14px 14px, 14px 14px;
    --calques_bouton_position: right 0 top 0, left 0 bottom 0;
    /* Plastique jaune brillant à arrêts nets : reflet clair en haut, ombre franche en bas (texte #0a0a12 : 12,5 à 15,6:1) */
    --satin_accent: linear-gradient(180deg, #fff6a6 0%, #fff6a6 16%, #ffe600 16%, #ffe600 60%, #e8cf00 60%, #e8cf00 100%);
}

html.theme_cyberpunk:not(.bright_mode),
html.theme_cyberpunk.dark_mode
{
    --satin: linear-gradient(165deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.09) 16%, rgba(255, 255, 255, 0.025) 16%, rgba(255, 255, 255, 0.025) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 86%, rgba(0, 240, 255, 0.08) 86%, rgba(0, 240, 255, 0.08) 100%);
    --satin_barre: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) calc(100% - 2px), #ff007f calc(100% - 2px), #ff007f 100%);
}

html.theme_cyberpunk.bright_mode
{
    --satin: linear-gradient(165deg, rgba(255, 0, 127, 0.06) 0%, rgba(255, 0, 127, 0.06) 16%, rgba(255, 255, 255, 0) 16%, rgba(255, 255, 255, 0) 86%, rgba(0, 180, 216, 0.08) 86%, rgba(0, 180, 216, 0.08) 100%);
    --satin_barre: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) calc(100% - 2px), #ff007f calc(100% - 2px), #ff007f 100%);
}

html.theme_matrix,
html.theme_matrice
{
    --calques_carte:
        linear-gradient(var(--ligne_forte), var(--ligne_forte)),
        linear-gradient(to bottom right, transparent 50%, var(--ligne_forte) 50%, var(--ligne_forte) calc(50% + 1.5px), transparent calc(50% + 1.5px));
    --calques_carte_taille: calc(100% - 131px) 1px, 12px 10px;
    --calques_carte_position: left 0 top 10px, right 120px top 0;
    --calques_bouton:
        linear-gradient(var(--encre), var(--encre)),
        linear-gradient(to bottom right, transparent 50%, var(--encre) 50%, var(--encre) calc(50% + 1.5px), transparent calc(50% + 1.5px));
    --calques_bouton_plein:
        linear-gradient(var(--accent), var(--accent)),
        linear-gradient(to bottom right, transparent 50%, var(--accent) 50%, var(--accent) calc(50% + 1.5px), transparent calc(50% + 1.5px));
    --calques_bouton_taille: calc(100% - 41px) 1px, 8px 6px;
    --calques_bouton_position: left 0 top 6px, right 34px top 0;
}

/* Champagne (n° 550) : dégradé satiné subtil à la place des aplats d'accent */
html.theme_champagne,
html.theme_atelier
{
    /* Sombre : accent éclairci, accent, accent assombri (texte #0a0a0b : 5,0 à 9,4:1) */
    --satin_accent: linear-gradient(155deg, color-mix(in srgb, var(--accent) 80%, #ffffff) 0%, var(--accent) 46%, color-mix(in srgb, var(--accent) 80%, #000000) 100%);
    --satin_vedette: linear-gradient(155deg, color-mix(in srgb, var(--accent) 14%, transparent) 0%, color-mix(in srgb, var(--accent) 3%, transparent) 50%, color-mix(in srgb, var(--accent) 9%, transparent) 100%);
}

html.theme_champagne.bright_mode,
html.theme_atelier.bright_mode
{
    /* Clair : assombri seulement, pour garder le texte blanc lisible (4,7 à 6,6:1) */
    --satin_accent: linear-gradient(155deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 88%, #000000) 55%, color-mix(in srgb, var(--accent) 76%, #000000) 100%);
}

/* Cartes et blocs du site public (n° 599, 600) */
:root body :is( .home_bento_carte, .home_telemetrie, .home_offre, .home_temoignage, .home_cta_cadre, .home_cta_option,
    .prestation_carte, .prestation_carte_situation, .prestation_item_livrable, .prestation_bloc_prix, .prestation_faq_item,
    .prestation_cta_bloc, .prestation_carte_voisine, .prestation_livrable, .prestation_prix_bloc, .prestation_voisine,
    .expertise_carte, .expertise_situation_item, .expertise_prestation_carte, .expertise_faq_item, .expertise_autre_lien,
    .expertise_prestation, .expertise_etape, .expertise_autre, .expertises_pole, .expertises_etape, .expertises_cta_bloc,
    .offres_carte, .offres_tableau_cadre, .offres_cta_cadre, .devis_carte, .devis_app_principal, .devis_recap,
    .blog_carte, .blog_newsletter_carte, .blog_commentaire, .blog_suivi_carte, .galerie_carte, .phase_carte,
    .realisations_carte, .realisations_carte_lien, .realisation_fiche_technique_carte, .realisation_interview_cadre, .realisation_liee_lien,
    .contact_coord_carte, .contact_coordonnees, .contact_rdv_carte, .agence_pilier, .cgv_fiche, .confid_fiche, .confid_tableau_cadre,
    .mentions_fiche, .merci_suite, .plan_pole, .interview_question_bloc, .interview_progression_cadre,
    .qwf_option, .qwf_depot, .qwf_recapitulatif, .qwf_confirmation, .lecture_vocale_lecteur, .taille_texte_panneau, .plein_ecran_invite,
    .forme_carte )
{
    border-radius: var(--rayon_carte, 2px);
    clip-path: var(--clip_carte, none);
    background-image: var(--calques_carte), var(--satin);
    background-size: var(--calques_carte_taille), auto;
    background-position: var(--calques_carte_position), 0 0;
    background-repeat: no-repeat;
    background-origin: border-box;
}

/* Visuels et blocs à enfant débordant : rayon seulement */
:root body :is( .home_hero_visuel, .home_real_visuel, .home_portrait_figure, .prestation_hero_visuel, .prestation_benefices_visuel,
    .prestation_frise_etape, .expertise_hero_visuel, .expertises_hero_visuel, .realisations_hero_visuel, .realisation_visuel_principal,
    .realisation_galerie_vignette, .realisation_galerie_scene_lien, .plan_entete_visuel, .galerie_hero_banniere, .interview_cloture_bloc )
{
    border-radius: var(--rayon_carte, 2px);
}

/* Pied de page : arrondi ou découpe en haut seulement */
:root body .footer_principal
{
    border-radius: var(--rayon_carte, 0px) var(--rayon_carte, 0px) 0 0;
    clip-path: var(--clip_carte, none);
    background-image: var(--calques_carte);
    background-size: var(--calques_carte_taille);
    background-position: var(--calques_carte_position);
    background-repeat: no-repeat;
    background-origin: border-box;
}

/* Boutons */
:root body :is( .bouton_principal, .bouton_secondaire, .blog_recherche_bouton, .bouton_docs_live, .connect_block .bt,
    .forme_bouton, .forme_bouton_plein )
{
    border-radius: var(--rayon_bouton, 2px);
    clip-path: var(--clip_bouton, none);
    background-size: var(--calques_bouton_taille), auto;
    background-position: var(--calques_bouton_position), 0 0;
    background-repeat: no-repeat;
    background-origin: border-box;
}

:root body :is( .bouton_secondaire, .forme_bouton )
{
    background-image: var(--calques_bouton), linear-gradient(transparent, transparent);
}

:root body :is( .bouton_principal, .blog_recherche_bouton, .bouton_docs_live, .connect_block .bt, .forme_bouton_plein )
{
    background-image: var(--calques_bouton_plein), var(--satin_accent);
}

/* Champs de formulaire */
:root body :is( .contact_champ input, .contact_champ select, .contact_champ textarea,
    .devis_champ input:not([type="checkbox"]):not([type="radio"]), .devis_champ select, .devis_champ textarea,
    .qwf_champ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .qwf_champ textarea,
    .blog_champ, .blog_recherche_champ, .docs_recherche_champ, .realisation_interview_textarea, .question_textarea,
    .connect_block .connect_form input, .forme_champ )
{
    border-radius: var(--rayon_input, 2px);
}

/* Badges, filtres, étiquettes */
:root body :is( .badge_chantier, .nav_badge_bientot, .blog_filtre, .blog_pagination_lien, .realisations_filtre, .offres_hero_sommaire a,
    .interview_badge_pill, .tag_dynamique, .galerie_badge_format, .docs_badge_compteur, .realisation_hero_pole, .forme_badge )
{
    border-radius: var(--rayon_badge, 2px);
}

/* Petits éléments : messages, cases, contrôles */
:root body :is( .contact_feedback, .devis_consentement, .devis_hero_points li, .qwf_alerte, .qwf_fichier, .qwf_fichier_retirer,
    .qwf_reassurance li, .markdown_body pre, .markdown_body blockquote, .vetq_bandeau, .lecture_vocale_commande, .taille_texte_pas,
    .realisation_visuel_principal_indice, .realisation_lightbox_nav, .realisation_lightbox_fermer, .home_heros_raccourci,
    .sommaire_lien, .docs_action_btn, .docs_lien_diaporama )
{
    border-radius: var(--rayon_p, 2px);
}

:root body .devis_carte_coche
{
    border-radius: min(var(--rayon_p, 2px), 6px);
}

/* Aplats d'accent : satin d'accent (Champagne satiné, Cyberpunk plastique jaune, voile léger ailleurs) */
:root body :is( .tab_bar_icone_cercle, .blog_filtre[aria-current="page"], .blog_pagination_lien[aria-current="page"],
    .scroll_progress_bar, .barre_progression_valeur )
{
    background-image: var(--satin_accent);
}

:root body .home_cta_option:first-child
{
    background-image: var(--calques_carte), var(--satin_accent);
}

/* Champagne : voile teinté pour les cartes mises en avant et les badges */
html:is(.theme_champagne, .theme_atelier) body :is( .offres_carte_mise_en_avant, .home_offre_vedette, .blog_carte_une )
{
    background-image: var(--calques_carte), var(--satin_vedette);
}

html:is(.theme_champagne, .theme_atelier) body :is( .badge_chantier, .nav_badge_bientot )
{
    background-image: var(--satin_vedette);
}

/* Cyberpunk : texte foncé sur le plastique jaune, liseré rose, contour cyan, survol plastique cyan */
html.theme_cyberpunk body :is( .bouton_principal, .blog_recherche_bouton, .bouton_docs_live, .connect_block .bt, .forme_bouton_plein,
    .blog_filtre[aria-current="page"], .blog_pagination_lien[aria-current="page"], .home_cta_option:first-child,
    .home_cta_option:first-child .home_cta_option_nom, .home_cta_option:first-child .home_cta_option_detail )
{
    color: #0a0a12;
}

html.theme_cyberpunk body :is( .bouton_principal, .blog_recherche_bouton, .bouton_docs_live, .connect_block .bt, .forme_bouton_plein,
    .blog_filtre[aria-current="page"], .blog_pagination_lien[aria-current="page"], .home_cta_option:first-child )
{
    border-color: var(--ligne_forte);
}

html.theme_cyberpunk body :is( .bouton_secondaire, .forme_bouton )
{
    border-color: var(--ligne);
}

html.theme_cyberpunk body :is( .bouton_secondaire, .forme_bouton ):is( :hover, :focus-visible )
{
    color: #0a0a12;
    background-color: #00f0ff;
    background-image: var(--calques_bouton), linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.45) 18%, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0) 100%);
}

/* Cyberpunk : fond de page en bandes nettes jaune / rose / cyan (aucune lueur fondue) */
html.theme_cyberpunk body::before
{
    background:
        linear-gradient(115deg, transparent 0%, transparent 56%, rgba(255, 230, 0, 0.06) 56%, rgba(255, 230, 0, 0.06) 59%, transparent 59%, transparent 100%),
        linear-gradient(115deg, transparent 0%, transparent 63%, rgba(255, 0, 127, 0.07) 63%, rgba(255, 0, 127, 0.07) 69%, transparent 69%, transparent 100%),
        linear-gradient(115deg, transparent 0%, transparent 72%, rgba(0, 240, 255, 0.06) 72%, rgba(0, 240, 255, 0.06) 74%, transparent 74%, transparent 100%);
}

html.theme_cyberpunk body::after
{
    background: none;
}

/* Pastille du sélecteur de thème : jaune, rose, cyan tranchés */
html body .palette_pastille.pastille_cyberpunk
{
    background: linear-gradient(135deg, #ffe600 0%, #ffe600 34%, #ff007f 34%, #ff007f 67%, #00f0ff 67%, #00f0ff 100%);
}

/* Focus visible à l'intérieur des éléments découpés (clip-path coupe l'outline extérieure) */
html:is(.theme_cyberpunk, .theme_matrix, .theme_matrice) body :is( .bouton_secondaire, .forme_bouton, .home_cta_option, .home_offre,
    .realisations_carte_lien, .realisation_liee_lien, .expertise_autre_lien, .expertise_autre, .prestation_carte_voisine,
    .prestation_voisine, .forme_carte ):focus-visible
{
    outline: 2px solid var(--encre);
    outline-offset: -4px;
}

html:is(.theme_cyberpunk, .theme_matrix, .theme_matrice) body :is( .bouton_principal, .blog_recherche_bouton, .bouton_docs_live,
    .connect_block .bt, .forme_bouton_plein ):focus-visible
{
    outline: 2px solid var(--accent_texte);
    outline-offset: -4px;
}

html.theme_cyberpunk body :is( .bouton_principal, .blog_recherche_bouton, .bouton_docs_live, .connect_block .bt,
    .forme_bouton_plein, .bouton_secondaire, .forme_bouton ):focus-visible
{
    outline-color: #0a0a12;
}
/* FORMES_THEMES ======================================================= */

/* MATRIX_PLUIE ======================================================== */
/*
 * 10/10/2026 13:24 (Claude, Dialogue n° 633) : fond d'écran inspiré de Matrix, codé (aucune image générée) : colonnes de
 * glyphes (katakana demi-chasse, chiffres) qui tombent, tête claire et traînée qui s'éteint. Motif SVG raccordé
 * verticalement (528 x 624 px) sur le calque de fond body::after, déplacé par transform seul (carte graphique) ;
 * figé si le visiteur demande moins d'animations. Discret (opacité 0.16 en sombre, 0.10 en clair) pour garder
 * le texte lisible. Les fonds d'Antigravity (n° 636) pourront s'y ajouter sur le calque de texture.
 */
html.theme_matrix,
html.theme_matrice
{
    --matrix_pluie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='528' height='624'%3E%3Cg font-family='monospace' font-size='18' fill='%2300ff66'%3E%3Ctext x='3' y='283' fill='%23d8ffe4'%3E%EF%BD%AC%3C/text%3E%3Ctext x='3' y='259' fill-opacity='0.78'%3E%EF%BE%92%3C/text%3E%3Ctext x='3' y='235' fill-opacity='0.66'%3E%EF%BD%A7%3C/text%3E%3Ctext x='3' y='211' fill-opacity='0.54'%3E%EF%BD%B0%3C/text%3E%3Ctext x='3' y='187' fill-opacity='0.41'%3E%EF%BD%A7%3C/text%3E%3Ctext x='3' y='163' fill-opacity='0.29'%3E%EF%BE%94%3C/text%3E%3Ctext x='3' y='139' fill-opacity='0.17'%3E%EF%BD%BE%3C/text%3E%3Ctext x='25' y='595' fill='%23d8ffe4'%3E8%3C/text%3E%3Ctext x='25' y='571' fill-opacity='0.81'%3E0%3C/text%3E%3Ctext x='25' y='547' fill-opacity='0.71'%3E%EF%BE%9B%3C/text%3E%3Ctext x='25' y='523' fill-opacity='0.62'%3E9%3C/text%3E%3Ctext x='25' y='499' fill-opacity='0.52'%3E%EF%BD%B0%3C/text%3E%3Ctext x='25' y='475' fill-opacity='0.43'%3E%EF%BE%86%3C/text%3E%3Ctext x='25' y='451' fill-opacity='0.33'%3E%EF%BD%B3%3C/text%3E%3Ctext x='25' y='427' fill-opacity='0.24'%3E1%3C/text%3E%3Ctext x='25' y='403' fill-opacity='0.14'%3E%EF%BD%AC%3C/text%3E%3Ctext x='47' y='43' fill='%23d8ffe4'%3E%EF%BD%AC%3C/text%3E%3Ctext x='47' y='19' fill-opacity='0.84'%3E%EF%BD%A7%3C/text%3E%3Ctext x='47' y='619' fill-opacity='0.78'%3E%EF%BD%B3%3C/text%3E%3Ctext x='47' y='595' fill-opacity='0.72'%3E%EF%BD%BD%3C/text%3E%3Ctext x='47' y='571' fill-opacity='0.66'%3E%EF%BE%98%3C/text%3E%3Ctext x='47' y='547' fill-opacity='0.60'%3E%EF%BD%BC%3C/text%3E%3Ctext x='47' y='523' fill-opacity='0.54'%3E%EF%BE%85%3C/text%3E%3Ctext x='47' y='499' fill-opacity='0.48'%3E%EF%BE%99%3C/text%3E%3Ctext x='47' y='475' fill-opacity='0.41'%3E%EF%BD%BF%3C/text%3E%3Ctext x='47' y='451' fill-opacity='0.35'%3E%EF%BE%93%3C/text%3E%3Ctext x='47' y='427' fill-opacity='0.29'%3E%EF%BD%B3%3C/text%3E%3Ctext x='47' y='403' fill-opacity='0.23'%3E%EF%BD%B9%3C/text%3E%3Ctext x='47' y='379' fill-opacity='0.17'%3E%EF%BD%A8%3C/text%3E%3Ctext x='47' y='355' fill-opacity='0.11'%3E3%3C/text%3E%3Ctext x='69' y='475' fill='%23d8ffe4'%3E%EF%BE%9D%3C/text%3E%3Ctext x='69' y='451' fill-opacity='0.79'%3E%EF%BE%87%3C/text%3E%3Ctext x='69' y='427' fill-opacity='0.69'%3E%EF%BE%91%3C/text%3E%3Ctext x='69' y='403' fill-opacity='0.58'%3E%EF%BE%84%3C/text%3E%3Ctext x='69' y='379' fill-opacity='0.48'%3E.%3C/text%3E%3Ctext x='69' y='355' fill-opacity='0.37'%3E%EF%BE%97%3C/text%3E%3Ctext x='69' y='331' fill-opacity='0.26'%3E%EF%BE%96%3C/text%3E%3Ctext x='69' y='307' fill-opacity='0.16'%3E5%3C/text%3E%3Ctext x='91' y='211' fill='%23d8ffe4'%3E:%3C/text%3E%3Ctext x='91' y='187' fill-opacity='0.82'%3E%EF%BE%9D%3C/text%3E%3Ctext x='91' y='163' fill-opacity='0.75'%3E2%3C/text%3E%3Ctext x='91' y='139' fill-opacity='0.67'%3E%EF%BE%82%3C/text%3E%3Ctext x='91' y='115' fill-opacity='0.59'%3E%EF%BD%BA%3C/text%3E%3Ctext x='91' y='91' fill-opacity='0.51'%3E5%3C/text%3E%3Ctext x='91' y='67' fill-opacity='0.44'%3E%EF%BD%BD%3C/text%3E%3Ctext x='91' y='43' fill-opacity='0.36'%3E%EF%BE%8C%3C/text%3E%3Ctext x='91' y='19' fill-opacity='0.28'%3E%EF%BD%AD%3C/text%3E%3Ctext x='91' y='619' fill-opacity='0.20'%3E%EF%BE%91%3C/text%3E%3Ctext x='91' y='595' fill-opacity='0.13'%3E%EF%BE%82%3C/text%3E%3Ctext x='113' y='523' fill='%23d8ffe4'%3E%EF%BD%B4%3C/text%3E%3Ctext x='113' y='499' fill-opacity='0.84'%3E%EF%BD%BF%3C/text%3E%3Ctext x='113' y='475' fill-opacity='0.78'%3E4%3C/text%3E%3Ctext x='113' y='451' fill-opacity='0.72'%3E%EF%BE%8E%3C/text%3E%3Ctext x='113' y='427' fill-opacity='0.66'%3E%EF%BE%88%3C/text%3E%3Ctext x='113' y='403' fill-opacity='0.60'%3E4%3C/text%3E%3Ctext x='113' y='379' fill-opacity='0.54'%3E%EF%BD%BC%3C/text%3E%3Ctext x='113' y='355' fill-opacity='0.48'%3E6%3C/text%3E%3Ctext x='113' y='331' fill-opacity='0.41'%3E%EF%BE%95%3C/text%3E%3Ctext x='113' y='307' fill-opacity='0.35'%3E%EF%BE%89%3C/text%3E%3Ctext x='113' y='283' fill-opacity='0.29'%3E%EF%BD%AD%3C/text%3E%3Ctext x='113' y='259' fill-opacity='0.23'%3E%EF%BE%92%3C/text%3E%3Ctext x='113' y='235' fill-opacity='0.17'%3E%EF%BD%BE%3C/text%3E%3Ctext x='113' y='211' fill-opacity='0.11'%3E%EF%BD%B4%3C/text%3E%3Ctext x='135' y='451' fill='%23d8ffe4'%3E%EF%BE%84%3C/text%3E%3Ctext x='135' y='427' fill-opacity='0.82'%3E%2B%3C/text%3E%3Ctext x='135' y='403' fill-opacity='0.75'%3E%EF%BE%90%3C/text%3E%3Ctext x='135' y='379' fill-opacity='0.67'%3E%EF%BD%BE%3C/text%3E%3Ctext x='135' y='355' fill-opacity='0.59'%3E%EF%BD%BF%3C/text%3E%3Ctext x='135' y='331' fill-opacity='0.51'%3E%EF%BD%B9%3C/text%3E%3Ctext x='135' y='307' fill-opacity='0.44'%3E%EF%BE%9C%3C/text%3E%3Ctext x='135' y='283' fill-opacity='0.36'%3E%EF%BD%AC%3C/text%3E%3Ctext x='135' y='259' fill-opacity='0.28'%3E%EF%BE%8B%3C/text%3E%3Ctext x='135' y='235' fill-opacity='0.20'%3E%EF%BD%AF%3C/text%3E%3Ctext x='135' y='211' fill-opacity='0.13'%3E%EF%BE%8F%3C/text%3E%3Ctext x='157' y='67' fill='%23d8ffe4'%3E%EF%BE%8E%3C/text%3E%3Ctext x='157' y='43' fill-opacity='0.83'%3E8%3C/text%3E%3Ctext x='157' y='19' fill-opacity='0.76'%3E%EF%BE%8F%3C/text%3E%3Ctext x='157' y='619' fill-opacity='0.69'%3E9%3C/text%3E%3Ctext x='157' y='595' fill-opacity='0.62'%3E%EF%BE%97%3C/text%3E%3Ctext x='157' y='571' fill-opacity='0.55'%3E=%3C/text%3E%3Ctext x='157' y='547' fill-opacity='0.48'%3E.%3C/text%3E%3Ctext x='157' y='523' fill-opacity='0.40'%3E%2B%3C/text%3E%3Ctext x='157' y='499' fill-opacity='0.33'%3E%EF%BD%A7%3C/text%3E%3Ctext x='157' y='475' fill-opacity='0.26'%3E7%3C/text%3E%3Ctext x='157' y='451' fill-opacity='0.19'%3E%EF%BD%B7%3C/text%3E%3Ctext x='157' y='427' fill-opacity='0.12'%3E5%3C/text%3E%3Ctext x='179' y='19' fill='%23d8ffe4'%3E0%3C/text%3E%3Ctext x='179' y='619' fill-opacity='0.83'%3E%EF%BE%80%3C/text%3E%3Ctext x='179' y='595' fill-opacity='0.77'%3E%EF%BE%91%3C/text%3E%3Ctext x='179' y='571' fill-opacity='0.70'%3E%EF%BD%A7%3C/text%3E%3Ctext x='179' y='547' fill-opacity='0.64'%3E%EF%BD%B1%3C/text%3E%3Ctext x='179' y='523' fill-opacity='0.57'%3E%EF%BE%81%3C/text%3E%3Ctext x='179' y='499' fill-opacity='0.51'%3E%EF%BE%83%3C/text%3E%3Ctext x='179' y='475' fill-opacity='0.44'%3E%EF%BD%B5%3C/text%3E%3Ctext x='179' y='451' fill-opacity='0.38'%3E%EF%BE%87%3C/text%3E%3Ctext x='179' y='427' fill-opacity='0.31'%3E%EF%BE%98%3C/text%3E%3Ctext x='179' y='403' fill-opacity='0.25'%3E%EF%BE%80%3C/text%3E%3Ctext x='179' y='379' fill-opacity='0.18'%3E%EF%BD%BB%3C/text%3E%3Ctext x='179' y='355' fill-opacity='0.12'%3E1%3C/text%3E%3Ctext x='201' y='331' fill='%23d8ffe4'%3E0%3C/text%3E%3Ctext x='201' y='307' fill-opacity='0.79'%3E%EF%BD%BA%3C/text%3E%3Ctext x='201' y='283' fill-opacity='0.69'%3E%EF%BD%B8%3C/text%3E%3Ctext x='201' y='259' fill-opacity='0.58'%3E%EF%BE%84%3C/text%3E%3Ctext x='201' y='235' fill-opacity='0.48'%3E%EF%BD%A6%3C/text%3E%3Ctext x='201' y='211' fill-opacity='0.37'%3E%EF%BE%9C%3C/text%3E%3Ctext x='201' y='187' fill-opacity='0.26'%3E9%3C/text%3E%3Ctext x='201' y='163' fill-opacity='0.16'%3E0%3C/text%3E%3Ctext x='223' y='499' fill='%23d8ffe4'%3E%EF%BD%BC%3C/text%3E%3Ctext x='223' y='475' fill-opacity='0.78'%3E0%3C/text%3E%3Ctext x='223' y='451' fill-opacity='0.66'%3E%EF%BD%A9%3C/text%3E%3Ctext x='223' y='427' fill-opacity='0.54'%3E%EF%BD%BD%3C/text%3E%3Ctext x='223' y='403' fill-opacity='0.41'%3E%EF%BD%A9%3C/text%3E%3Ctext x='223' y='379' fill-opacity='0.29'%3E%EF%BE%86%3C/text%3E%3Ctext x='223' y='355' fill-opacity='0.17'%3E%EF%BD%B3%3C/text%3E%3Ctext x='245' y='19' fill='%23d8ffe4'%3E%EF%BE%85%3C/text%3E%3Ctext x='245' y='619' fill-opacity='0.81'%3E%EF%BD%AE%3C/text%3E%3Ctext x='245' y='595' fill-opacity='0.71'%3E%EF%BE%85%3C/text%3E%3Ctext x='245' y='571' fill-opacity='0.62'%3E%2A%3C/text%3E%3Ctext x='245' y='547' fill-opacity='0.52'%3E%EF%BD%BD%3C/text%3E%3Ctext x='245' y='523' fill-opacity='0.43'%3E%EF%BE%94%3C/text%3E%3Ctext x='245' y='499' fill-opacity='0.33'%3E.%3C/text%3E%3Ctext x='245' y='475' fill-opacity='0.24'%3E%EF%BD%AD%3C/text%3E%3Ctext x='245' y='451' fill-opacity='0.14'%3E:%3C/text%3E%3Ctext x='267' y='163' fill='%23d8ffe4'%3E%EF%BE%84%3C/text%3E%3Ctext x='267' y='139' fill-opacity='0.82'%3E%EF%BE%80%3C/text%3E%3Ctext x='267' y='115' fill-opacity='0.73'%3E7%3C/text%3E%3Ctext x='267' y='91' fill-opacity='0.65'%3E%EF%BE%95%3C/text%3E%3Ctext x='267' y='67' fill-opacity='0.56'%3E9%3C/text%3E%3Ctext x='267' y='43' fill-opacity='0.48'%3E%EF%BD%BC%3C/text%3E%3Ctext x='267' y='19' fill-opacity='0.39'%3E.%3C/text%3E%3Ctext x='267' y='619' fill-opacity='0.31'%3E%EF%BE%98%3C/text%3E%3Ctext x='267' y='595' fill-opacity='0.22'%3E%EF%BD%A8%3C/text%3E%3Ctext x='267' y='571' fill-opacity='0.14'%3E%EF%BE%8B%3C/text%3E%3Ctext x='289' y='475' fill='%23d8ffe4'%3E%2A%3C/text%3E%3Ctext x='289' y='451' fill-opacity='0.82'%3E%EF%BE%84%3C/text%3E%3Ctext x='289' y='427' fill-opacity='0.73'%3E%EF%BE%97%3C/text%3E%3Ctext x='289' y='403' fill-opacity='0.65'%3E%EF%BD%BE%3C/text%3E%3Ctext x='289' y='379' fill-opacity='0.56'%3E%EF%BE%85%3C/text%3E%3Ctext x='289' y='355' fill-opacity='0.48'%3E9%3C/text%3E%3Ctext x='289' y='331' fill-opacity='0.39'%3E%EF%BE%85%3C/text%3E%3Ctext x='289' y='307' fill-opacity='0.31'%3E%EF%BE%8C%3C/text%3E%3Ctext x='289' y='283' fill-opacity='0.22'%3E4%3C/text%3E%3Ctext x='289' y='259' fill-opacity='0.14'%3E%EF%BE%87%3C/text%3E%3Ctext x='311' y='91' fill='%23d8ffe4'%3E%EF%BE%82%3C/text%3E%3Ctext x='311' y='67' fill-opacity='0.82'%3E%EF%BE%8D%3C/text%3E%3Ctext x='311' y='43' fill-opacity='0.73'%3E%EF%BE%83%3C/text%3E%3Ctext x='311' y='19' fill-opacity='0.65'%3E%EF%BD%BC%3C/text%3E%3Ctext x='311' y='619' fill-opacity='0.56'%3E%EF%BD%AA%3C/text%3E%3Ctext x='311' y='595' fill-opacity='0.48'%3E%EF%BE%84%3C/text%3E%3Ctext x='311' y='571' fill-opacity='0.39'%3E%EF%BE%88%3C/text%3E%3Ctext x='311' y='547' fill-opacity='0.31'%3E3%3C/text%3E%3Ctext x='311' y='523' fill-opacity='0.22'%3E0%3C/text%3E%3Ctext x='311' y='499' fill-opacity='0.14'%3E%EF%BD%B8%3C/text%3E%3Ctext x='333' y='19' fill='%23d8ffe4'%3E%EF%BE%94%3C/text%3E%3Ctext x='333' y='619' fill-opacity='0.78'%3E9%3C/text%3E%3Ctext x='333' y='595' fill-opacity='0.66'%3E%EF%BE%93%3C/text%3E%3Ctext x='333' y='571' fill-opacity='0.54'%3E%EF%BD%B4%3C/text%3E%3Ctext x='333' y='547' fill-opacity='0.41'%3E%EF%BE%8C%3C/text%3E%3Ctext x='333' y='523' fill-opacity='0.29'%3E2%3C/text%3E%3Ctext x='333' y='499' fill-opacity='0.17'%3E%EF%BD%B2%3C/text%3E%3Ctext x='355' y='67' fill='%23d8ffe4'%3E=%3C/text%3E%3Ctext x='355' y='43' fill-opacity='0.81'%3E%EF%BD%BC%3C/text%3E%3Ctext x='355' y='19' fill-opacity='0.71'%3E.%3C/text%3E%3Ctext x='355' y='619' fill-opacity='0.62'%3E%EF%BD%A7%3C/text%3E%3Ctext x='355' y='595' fill-opacity='0.52'%3E%EF%BE%8C%3C/text%3E%3Ctext x='355' y='571' fill-opacity='0.43'%3E%EF%BE%96%3C/text%3E%3Ctext x='355' y='547' fill-opacity='0.33'%3E%EF%BE%96%3C/text%3E%3Ctext x='355' y='523' fill-opacity='0.24'%3E%EF%BD%A6%3C/text%3E%3Ctext x='355' y='499' fill-opacity='0.14'%3E9%3C/text%3E%3Ctext x='377' y='595' fill='%23d8ffe4'%3EZ%3C/text%3E%3Ctext x='377' y='571' fill-opacity='0.83'%3E%EF%BE%89%3C/text%3E%3Ctext x='377' y='547' fill-opacity='0.77'%3E%EF%BE%83%3C/text%3E%3Ctext x='377' y='523' fill-opacity='0.70'%3E%EF%BD%BA%3C/text%3E%3Ctext x='377' y='499' fill-opacity='0.64'%3E%EF%BD%BD%3C/text%3E%3Ctext x='377' y='475' fill-opacity='0.57'%3E6%3C/text%3E%3Ctext x='377' y='451' fill-opacity='0.51'%3E5%3C/text%3E%3Ctext x='377' y='427' fill-opacity='0.44'%3E=%3C/text%3E%3Ctext x='377' y='403' fill-opacity='0.38'%3E%2A%3C/text%3E%3Ctext x='377' y='379' fill-opacity='0.31'%3E%EF%BD%AF%3C/text%3E%3Ctext x='377' y='355' fill-opacity='0.25'%3E5%3C/text%3E%3Ctext x='377' y='331' fill-opacity='0.18'%3E%EF%BD%BE%3C/text%3E%3Ctext x='377' y='307' fill-opacity='0.12'%3E5%3C/text%3E%3Ctext x='399' y='619' fill='%23d8ffe4'%3E%EF%BE%8F%3C/text%3E%3Ctext x='399' y='595' fill-opacity='0.78'%3E%EF%BD%BD%3C/text%3E%3Ctext x='399' y='571' fill-opacity='0.66'%3E%EF%BD%AF%3C/text%3E%3Ctext x='399' y='547' fill-opacity='0.54'%3E%EF%BD%A6%3C/text%3E%3Ctext x='399' y='523' fill-opacity='0.41'%3E%EF%BE%96%3C/text%3E%3Ctext x='399' y='499' fill-opacity='0.29'%3E%EF%BE%8D%3C/text%3E%3Ctext x='399' y='475' fill-opacity='0.17'%3E%EF%BD%BA%3C/text%3E%3Ctext x='421' y='211' fill='%23d8ffe4'%3E.%3C/text%3E%3Ctext x='421' y='187' fill-opacity='0.83'%3E%EF%BD%B7%3C/text%3E%3Ctext x='421' y='163' fill-opacity='0.77'%3E%EF%BE%9B%3C/text%3E%3Ctext x='421' y='139' fill-opacity='0.70'%3E%EF%BE%82%3C/text%3E%3Ctext x='421' y='115' fill-opacity='0.64'%3E%EF%BE%83%3C/text%3E%3Ctext x='421' y='91' fill-opacity='0.57'%3E.%3C/text%3E%3Ctext x='421' y='67' fill-opacity='0.51'%3E%EF%BE%8C%3C/text%3E%3Ctext x='421' y='43' fill-opacity='0.44'%3E2%3C/text%3E%3Ctext x='421' y='19' fill-opacity='0.38'%3E%EF%BE%81%3C/text%3E%3Ctext x='421' y='619' fill-opacity='0.31'%3EZ%3C/text%3E%3Ctext x='421' y='595' fill-opacity='0.25'%3E%EF%BD%BE%3C/text%3E%3Ctext x='421' y='571' fill-opacity='0.18'%3E%EF%BD%AD%3C/text%3E%3Ctext x='421' y='547' fill-opacity='0.12'%3E%EF%BD%B6%3C/text%3E%3Ctext x='443' y='499' fill='%23d8ffe4'%3E%2A%3C/text%3E%3Ctext x='443' y='475' fill-opacity='0.82'%3E%EF%BE%96%3C/text%3E%3Ctext x='443' y='451' fill-opacity='0.73'%3E%EF%BD%AB%3C/text%3E%3Ctext x='443' y='427' fill-opacity='0.65'%3E%EF%BD%AE%3C/text%3E%3Ctext x='443' y='403' fill-opacity='0.56'%3E%EF%BD%B5%3C/text%3E%3Ctext x='443' y='379' fill-opacity='0.48'%3E%EF%BD%B2%3C/text%3E%3Ctext x='443' y='355' fill-opacity='0.39'%3E%EF%BE%98%3C/text%3E%3Ctext x='443' y='331' fill-opacity='0.31'%3E%EF%BD%B7%3C/text%3E%3Ctext x='443' y='307' fill-opacity='0.22'%3E%EF%BD%AA%3C/text%3E%3Ctext x='443' y='283' fill-opacity='0.14'%3E%2B%3C/text%3E%3Ctext x='465' y='475' fill='%23d8ffe4'%3E%EF%BE%80%3C/text%3E%3Ctext x='465' y='451' fill-opacity='0.83'%3E%EF%BD%A9%3C/text%3E%3Ctext x='465' y='427' fill-opacity='0.77'%3E3%3C/text%3E%3Ctext x='465' y='403' fill-opacity='0.70'%3E8%3C/text%3E%3Ctext x='465' y='379' fill-opacity='0.64'%3E%EF%BE%9D%3C/text%3E%3Ctext x='465' y='355' fill-opacity='0.57'%3E%EF%BD%B8%3C/text%3E%3Ctext x='465' y='331' fill-opacity='0.51'%3E%EF%BD%B4%3C/text%3E%3Ctext x='465' y='307' fill-opacity='0.44'%3E%EF%BE%9A%3C/text%3E%3Ctext x='465' y='283' fill-opacity='0.38'%3E%EF%BE%80%3C/text%3E%3Ctext x='465' y='259' fill-opacity='0.31'%3E%EF%BE%8C%3C/text%3E%3Ctext x='465' y='235' fill-opacity='0.25'%3E:%3C/text%3E%3Ctext x='465' y='211' fill-opacity='0.18'%3E%EF%BE%92%3C/text%3E%3Ctext x='465' y='187' fill-opacity='0.12'%3E%EF%BD%AF%3C/text%3E%3Ctext x='487' y='139' fill='%23d8ffe4'%3E9%3C/text%3E%3Ctext x='487' y='115' fill-opacity='0.79'%3E%EF%BD%A9%3C/text%3E%3Ctext x='487' y='91' fill-opacity='0.69'%3E%EF%BE%86%3C/text%3E%3Ctext x='487' y='67' fill-opacity='0.58'%3E%EF%BD%B1%3C/text%3E%3Ctext x='487' y='43' fill-opacity='0.48'%3E=%3C/text%3E%3Ctext x='487' y='19' fill-opacity='0.37'%3E%EF%BD%B9%3C/text%3E%3Ctext x='487' y='619' fill-opacity='0.26'%3E%EF%BE%92%3C/text%3E%3Ctext x='487' y='595' fill-opacity='0.16'%3E%EF%BD%A7%3C/text%3E%3Ctext x='509' y='91' fill='%23d8ffe4'%3E3%3C/text%3E%3Ctext x='509' y='67' fill-opacity='0.81'%3E%EF%BD%A8%3C/text%3E%3Ctext x='509' y='43' fill-opacity='0.71'%3E.%3C/text%3E%3Ctext x='509' y='19' fill-opacity='0.62'%3E%EF%BE%8F%3C/text%3E%3Ctext x='509' y='619' fill-opacity='0.52'%3E9%3C/text%3E%3Ctext x='509' y='595' fill-opacity='0.43'%3E%EF%BE%99%3C/text%3E%3Ctext x='509' y='571' fill-opacity='0.33'%3E%2B%3C/text%3E%3Ctext x='509' y='547' fill-opacity='0.24'%3E%EF%BD%B2%3C/text%3E%3Ctext x='509' y='523' fill-opacity='0.14'%3E%EF%BE%80%3C/text%3E%3C/g%3E%3C/svg%3E");
}

html:is(.theme_matrix, .theme_matrice) body::after
{
    top: -624px;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .16;
    transform: none;
    background: var(--matrix_pluie) repeat left top / 528px 624px;
}

html:is(.theme_matrix, .theme_matrice).bright_mode body::after
{
    opacity: .10;
    filter: brightness(.4) saturate(1.6);
}

@media (prefers-reduced-motion: no-preference)
{
    html:is(.theme_matrix, .theme_matrice) body::after
    {
        animation: matrix_pluie_chute 26s linear infinite;
        will-change: transform;
    }
}

@keyframes matrix_pluie_chute
{
    from
    {
        transform: translate3d( 0, 0, 0 );
    }
    to
    {
        transform: translate3d( 0, 624px, 0 );
    }
}

/* Courier est plus large que la police d'origine : menu du haut légèrement resserré */
html:is(.theme_matrix, .theme_matrice) .nav_lien
{
    letter-spacing: -0.03em;
}
/* MATRIX_PLUIE ======================================================== */

/* MATRIX_LUEURS ======================================================= */
/*
 * 10/10/2026 17:32 (Claude, Dialogue n° 684) : lueurs vertes phosphore au survol (JaxX : « ne pas hésiter »).
 * Cartes et boutons découpés en étiquette de dossier : clip-path coupe tout halo extérieur, la lueur est donc
 * intérieure (box-shadow inset) et passe aussi par le texte. Liens, menu, icônes, champs et tchat ne sont pas
 * découpés : halo extérieur. Mode clair : même dessin, plus discret.
 */
html:is(.theme_matrix, .theme_matrice)
{
    --matrix_lueur: rgba(0, 255, 102, 0.6);
    --matrix_lueur_douce: rgba(0, 255, 102, 0.22);
}

html:is(.theme_matrix, .theme_matrice).bright_mode
{
    --matrix_lueur: rgba(5, 150, 105, 0.45);
    --matrix_lueur_douce: rgba(5, 150, 105, 0.16);
}

/* Cartes cliquables découpées : cadre allumé, lueur intérieure, titres lumineux */
html:is(.theme_matrix, .theme_matrice) body :is( .home_bento_carte, .home_offre, .home_cta_option, .prestation_carte, .prestation_carte_voisine,
    .prestation_voisine, .expertise_carte, .expertise_prestation_carte, .expertise_autre_lien, .expertise_prestation, .expertise_autre,
    .offres_carte, .blog_carte, .galerie_carte, .realisations_carte, .realisations_carte_lien, .realisation_liee_lien,
    .contact_coord_carte, .contact_rdv_carte, .qwf_option, .forme_carte ):hover
{
    box-shadow: inset 0 0 0 1px var(--accent), inset 0 0 26px var(--matrix_lueur_douce), inset 0 0 70px var(--matrix_lueur_douce);
}

html:is(.theme_matrix, .theme_matrice) body :is( .home_bento_carte, .home_offre, .home_cta_option, .prestation_carte, .prestation_carte_voisine,
    .prestation_voisine, .expertise_carte, .expertise_prestation_carte, .expertise_autre_lien, .expertise_prestation, .expertise_autre,
    .offres_carte, .blog_carte, .galerie_carte, .realisations_carte, .realisations_carte_lien, .realisation_liee_lien,
    .contact_coord_carte, .contact_rdv_carte, .qwf_option, .forme_carte ):hover :is( h2, h3, h4 )
{
    text-shadow: 0 0 8px var(--matrix_lueur), 0 0 22px var(--matrix_lueur_douce);
}

/* Liens et menu : texte lumineux */
html:is(.theme_matrix, .theme_matrice) body a:hover,
html:is(.theme_matrix, .theme_matrice) body .nav_lien:hover
{
    text-shadow: 0 0 6px var(--matrix_lueur), 0 0 16px var(--matrix_lueur_douce);
}

/* Boutons secondaires découpés : cadre allumé et texte lumineux */
html:is(.theme_matrix, .theme_matrice) body :is( .bouton_secondaire, .forme_bouton ):hover
{
    box-shadow: inset 0 0 0 1px var(--accent), inset 0 0 22px var(--matrix_lueur_douce);
    text-shadow: 0 0 6px var(--matrix_lueur), 0 0 16px var(--matrix_lueur_douce);
}

/* Boutons pleins découpés : surchauffe intérieure, texte sombre sans halo (lisibilité) */
html:is(.theme_matrix, .theme_matrice) body :is( .bouton_principal, .blog_recherche_bouton, .bouton_docs_live, .connect_block .bt, .forme_bouton_plein ):hover
{
    box-shadow: inset 0 0 0 1px rgba(216, 255, 228, 0.55), inset 0 0 22px rgba(216, 255, 228, 0.6);
    text-shadow: none;
}

/* Icônes de l'en-tête et du pied de page */
html:is(.theme_matrix, .theme_matrice) body :is( .header_principal, .footer_principal, .tab_bar_mobile ) :is( a, button ):hover svg
{
    filter: drop-shadow(0 0 4px var(--matrix_lueur)) drop-shadow(0 0 10px var(--matrix_lueur_douce));
}

/* Champs : halo au focus */
html:is(.theme_matrix, .theme_matrice) body :is( input, textarea, select ):focus
{
    box-shadow: 0 0 0 1px var(--accent), 0 0 14px var(--matrix_lueur_douce), 0 0 30px var(--matrix_lueur_douce);
}

/* Tchat de Jarvis : panneau légèrement irradié, bouton et actions allumés au survol */
html:is(.theme_matrix, .theme_matrice) .jarvis_panneau
{
    box-shadow: 0 0 0 1px var(--ligne_forte), 0 0 38px var(--matrix_lueur_douce);
}

html:is(.theme_matrix, .theme_matrice) .jarvis_bouton:hover
{
    box-shadow: 0 0 0 1px var(--accent), 0 0 18px var(--matrix_lueur), 0 0 44px var(--matrix_lueur_douce);
}

html:is(.theme_matrix, .theme_matrice) :is( .jarvis_action, .jarvis_vocal, .jarvis_ecouter, .jarvis_rappel_envoyer ):hover
{
    box-shadow: 0 0 0 1px var(--accent), 0 0 14px var(--matrix_lueur);
}
/* MATRIX_LUEURS ======================================================= */

/* FONDS_THEMES_TEXTURES_675 =========================================== */
/* 10/10/2026 (demande de JaxX, Dialogue n° 636 & 675 : déclinaisons de fond de page pour l'ensemble du site et adaptation au changement de thème graphique) */

/* Champagne : orfèvrerie sacrée & ambre satiné */
html:is(.theme_champagne, .theme_atelier) body::before
{
    background-image:
        url('/2027_B2B/_medias/site/visuels/textures/texture-orfevrerie-sacree.webp'),
        radial-gradient( 55vw 50vh at 18% 14%, var(--fond_lueur_1, rgba(234, 179, 8, 0.12)), transparent 70% ),
        radial-gradient( 50vw 55vh at 84% 78%, var(--fond_lueur_2, rgba(217, 119, 6, 0.08)), transparent 70% );
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: cover, auto, auto;
    background-position: center, center, center;
    background-blend-mode: overlay, normal, normal;
    opacity: 0.15;
}

html:is(.theme_champagne, .theme_atelier).bright_mode body::before
{
    opacity: 0.06;
}

/* Suisse & Minimaliste : trame micrométrique helvétique */
html:is(.theme_minimaliste, .theme_suisse) body::before
{
    background-image:
        url('/2027_B2B/_medias/site/visuels/textures/texture-trame-micrometrique.webp'),
        radial-gradient( 50vw 50vh at 50% 20%, rgba(255, 255, 255, 0.03), transparent 70% );
    background-repeat: no-repeat, no-repeat;
    background-size: cover, auto;
    background-position: center, center;
    background-blend-mode: screen, normal;
    opacity: 0.12;
}

html:is(.theme_minimaliste, .theme_suisse).bright_mode body::before
{
    background-image:
        url('/2027_B2B/_medias/site/visuels/textures/texture-trame-micrometrique.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.05;
}

/* IA Slop : facettes quantiques & reflets boréaux */
html:is(.theme_IAslop, .theme_futur2026) body::before
{
    background-image:
        url('/2027_B2B/_medias/site/visuels/textures/texture-facettes-quantiques.webp'),
        radial-gradient( 55vw 50vh at 25% 20%, rgba(101, 92, 246, 0.15), transparent 70% ),
        radial-gradient( 50vw 55vh at 75% 80%, rgba(236, 72, 153, 0.10), transparent 70% );
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: cover, auto, auto;
    background-position: center, center, center;
    background-blend-mode: color-dodge, normal, normal;
    opacity: 0.15;
}

html:is(.theme_IAslop, .theme_futur2026).bright_mode body::before
{
    opacity: 0.06;
}

/* Obsidian : topographie géomorphique & profondeur minérale */
html.theme_obsidian body::before
{
    background-image:
        url('/2027_B2B/_medias/site/visuels/textures/texture-lignes-topographiques.webp'),
        radial-gradient( 60vw 60vh at 50% 30%, rgba(139, 92, 246, 0.08), transparent 75% );
    background-repeat: no-repeat, no-repeat;
    background-size: cover, auto;
    background-position: center, center;
    background-blend-mode: overlay, normal;
    opacity: 0.14;
}

html.theme_obsidian.bright_mode body::before
{
    opacity: 0.05;
}

/* FLOU_ENCADRES ======================================================= */
/*
 * 11/10/2026 06:09 (Claude, Dialogue n° 780 de JaxX : « quand il y a un encadré avec un peu de transparence il faut qu'il y ait
 * un backdrop filter pour améliorer la lecture ») : flou d'arrière-plan sous les encadrés au fond semi-transparent
 * (cartes, fiches, panneaux, voiles, visionneuses) recensés dans toutes les feuilles du site — A VALIDER PAR JaxX.
 * :where() garde une spécificité nulle : toute règle de page qui fixe son propre backdrop-filter reste prioritaire.
 * Les pastilles, boutons, champs et badges ne sont pas floutés (trop petits, coût d'affichage inutile).
 * Thèmes clairs : --surface_carte est opaque, le flou n'y change rien à l'œil.
 */
:root
{
    --flou_encadre: blur(12px) saturate(130%);
}

:where(
    .activation_alerte_erreur, .agence_pilier, .article_cta, .article_versions_liste, .article_lie, .article_diaporama,
    .blog_carte, .cgv_fiche, .confid_fiche, .confid_tableau_cadre, .contact_feedback.erreur, .contact_feedback.succes,
    .contact_coordonnees, .ds_theme_fiche_tete, .ds_nuancier_item, .ds_banc_barre_controle, .ds_mb_carte, .ds_mb_overlay_zoom,
    .ds_schema_logo_carte, .ds_ratio_carte, .ds_typo_carte, .ds_composant_bloc, .ds_texture_banc_essai, .ds_texture_carte,
    .devis_carte, .devis_consentement, .devis_confirmation_etapes li, .markdown_body blockquote, .markdown_body pre,
    .docs_sidebar_diapo_bloc, .galerie_carte, .docs_erreur_chargement, .interview_progression_cadre, .interview_question_bloc,
    .mentions_fiche, .merci_suite, .offres_carte, .offres_sur_devis, .plan_entete_visuel, .plan_pole, .qwf_alerte, .qwf_option,
    .qwf_depot, .qwf_recapitulatif, .qwf_confirmation, .realisation_visuel_principal_indice, .realisation_fiche_technique_carte,
    .realisation_liee_lien, .realisations_carte_lien, .adm_biblio_carte, .adm_biblio_visionneuse, .adm_biblio_arbre,
    .jaxx_slideshow_slide .caption_wrapper, .dialogue_visionneuse, .dialogue_galerie_compteur, .dialogue_citation,
    .dialogue_code, .dialogue_edition_mode, .dialogue_sujets_voile, .eurl_interview_bloc, .eurl_encadre, .eurl_encadre_attention,
    .eurl_encadre_retenir, .eurl_extension, .eurl_document_choisi, .eurl_etape_notes_indice, .gads_apercu,
    .newsletter_dest_apercu, .newsletter_apercu_objet_box, .prospects_kpi_carte, .prospects_filtres_barre, .prospect_carte,
    .prospect_coordonnees, .prospect_strategie_tiroir, .prospect_coldmail_texte, .adm_tchat_message_visiteur,
    .adm_tchat_fenetre_entete, .adm_tchat_message_equipe, .adm_tchat_saisie, .admintester_bandeau, .vetq_bandeau,
    .jx_filter_header, .jx_filter_popover, .badge_telemetrie_3d, .adm_nav_glisse, .adm_tableau_cadre, .adm_panneau_voile,
    .adm_connexion_carte, .adm_demande_carte, .adm_contenus_section, .blog_newsletter_carte, .blog_commentaire,
    .blog_suivi_carte, .tiroir_adm, .lightbox_zoom_controle )
{
    -webkit-backdrop-filter: var(--flou_encadre);
    backdrop-filter: var(--flou_encadre);
}
/* FLOU_ENCADRES ======================================================= */

/* VERRE_ENCADRES ====================================================== */
/*
 * 14/10/2026 03:50 (Claude, Dialogue n° 1277 de JaxX : « pour les encarts il faut un drop filter Blur pour que la lisibilité
 * ne soit pas gênée par le fond. Ajouter de la transparence aux images de fond. Un effet glass. » ; précision n° 1283 :
 * « pour le thème champagne, les images de fond doivent être très subtiles, opacité 0.05 en dark mode ») — A VALIDER PAR JaxX.
 * Prolonge FLOU_ENCADRES (même flou --flou_encadre) : effet verre sur les encarts du site public, dans tous les thèmes.
 *   - Teinte du verre tirée de --surface de chaque thème et de chaque mode (color-mix), flou + saturation, ombre douce ;
 *     les bordures restent celles du site (1px var(--ligne), déjà translucides).
 *   - Images de fond plus transparentes : texture de page (body::before) et texture aléatoire (.arriere_plan_texture_globale)
 *     multipliées par --verre_attenuation_fond (0.6) ; Champagne : 0.05 en sombre (n° 1283), 0.04 en clair.
 *   - Repli plus opaque sans backdrop-filter, verre opaque si le visiteur demande moins de transparence ou plus de contraste.
 *   - Liste en classes simples dans :is() : spécificité (0,2,1), devant les fonds des feuilles de page ; ombre posée par :where()
 *     (spécificité nulle) pour garder les ombres de survol des pages et le relief Cyberpunk.
 *   - Exclus : CTA inversés en mode clair (fond var(--encre) : blog_cta, section_cta, realisation_cta, realisations_cta),
 *     options et dépôts du questionnaire (états cochés), télémétrie (déjà floutée), sections pleine largeur (home_confiance,
 *     home_methode), lien « Voir sur Google Maps » (contact_coord_carte), visuels, lightbox, pages d'atelier.
 */
:root,
html.dark_mode
{
    --verre_flou: var(--flou_encadre, blur(12px) saturate(130%));
    --verre_fond: color-mix(in srgb, var(--surface) 72%, transparent);
    --verre_fond_repli: color-mix(in srgb, var(--surface) 94%, transparent);
    --verre_ombre: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --verre_attenuation_fond: 0.6;
}

html.bright_mode
{
    --verre_fond: color-mix(in srgb, var(--surface) 70%, transparent);
    --verre_ombre: 0 8px 28px rgba(28, 25, 23, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Navigateur sans backdrop-filter : verre presque opaque pour garder la lecture */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))
{
    :root,
    html.dark_mode,
    html.bright_mode
    {
        --verre_fond: var(--verre_fond_repli);
    }
}

/* Moins de transparence ou plus de contraste demandés : verre opaque, sans flou, fonds encore plus discrets */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more)
{
    :root,
    html.dark_mode,
    html.bright_mode
    {
        --verre_fond: var(--surface);
        --verre_flou: none;
        --verre_attenuation_fond: 0.35;
    }
}

@supports (color: color-mix(in srgb, red 50%, blue))
{
    :root body :is(
        .agence_repere, .agence_etape, .agence_pilier, .agence_cta,
        .article_retenir, .article_cta, .article_lie, .article_sommaire,
        .blog_carte, .blog_newsletter_carte, .blog_commentaire, .blog_suivi_carte,
        .cgv_fiche, .confid_fiche, .confid_tableau_cadre, .mentions_fiche, .plan_pole,
        .phase_carte, .compteur_carte, .chantier_carte,
        .contact_coordonnees, .contact_rdv_carte,
        .devis_app_principal, .devis_carte, .devis_recap,
        .engagements_mesure, .engagements_cta, .merci_etape, .merci_suite,
        .expertise_situation_item, .expertise_prestation_carte, .expertise_faq_item, .expertise_autre_lien,
        .expertise_prestation, .expertise_etape, .expertise_autre, .expertise_carte,
        .expertises_pole, .expertises_etape, .expertises_cta_bloc,
        .home_bento_carte, .home_offre, .home_temoignage, .home_cta_cadre,
        .offres_bandeau_web_flash, .offres_carte, .offres_tableau_cadre, .offres_sur_devis, .offres_cta_cadre,
        .prestation_carte_situation, .prestation_item_livrable, .prestation_bloc_prix, .prestation_faq_item, .prestation_cta_bloc,
        .prestation_carte_voisine, .prestation_carte, .prestation_livrable, .prestation_prix_bloc, .prestation_voisine,
        .qwf_alerte, .qwf_recapitulatif, .qwf_confirmation,
        .realisation_fiche_technique_carte, .realisation_liee_lien, .realisation_interview_cadre, .realisations_carte_lien,
        .web_flash_tarif_carte, .web_flash_commande_carte, .web_flash_message, .web_flash_cta,
        .lecture_vocale_lecteur )
    {
        background-color: var(--verre_fond);
        -webkit-backdrop-filter: var(--verre_flou);
        backdrop-filter: var(--verre_flou);
    }

    :where(
        .agence_repere, .agence_etape, .agence_pilier, .agence_cta,
        .article_retenir, .article_cta, .article_lie, .article_sommaire,
        .blog_carte, .blog_newsletter_carte, .blog_commentaire, .blog_suivi_carte,
        .cgv_fiche, .confid_fiche, .confid_tableau_cadre, .mentions_fiche, .plan_pole,
        .phase_carte, .compteur_carte, .chantier_carte,
        .contact_coordonnees, .contact_rdv_carte,
        .devis_app_principal, .devis_carte, .devis_recap,
        .engagements_mesure, .engagements_cta, .merci_etape, .merci_suite,
        .expertise_situation_item, .expertise_prestation_carte, .expertise_faq_item, .expertise_autre_lien,
        .expertise_prestation, .expertise_etape, .expertise_autre, .expertise_carte,
        .expertises_pole, .expertises_etape, .expertises_cta_bloc,
        .home_bento_carte, .home_offre, .home_temoignage, .home_cta_cadre,
        .offres_bandeau_web_flash, .offres_carte, .offres_tableau_cadre, .offres_sur_devis, .offres_cta_cadre,
        .prestation_carte_situation, .prestation_item_livrable, .prestation_bloc_prix, .prestation_faq_item, .prestation_cta_bloc,
        .prestation_carte_voisine, .prestation_carte, .prestation_livrable, .prestation_prix_bloc, .prestation_voisine,
        .qwf_alerte, .qwf_recapitulatif, .qwf_confirmation,
        .realisation_fiche_technique_carte, .realisation_liee_lien, .realisation_interview_cadre, .realisations_carte_lien,
        .web_flash_tarif_carte, .web_flash_commande_carte, .web_flash_message, .web_flash_cta,
        .lecture_vocale_lecteur )
    {
        box-shadow: var(--verre_ombre);
    }
}

/* Images de fond plus transparentes : texture aléatoire (l'opacité choisie sur le banc du Design System est conservée et atténuée) */
:root body .arriere_plan_texture_globale
{
    opacity: calc( var(--texture_fond_opacite, 0.2) * var(--verre_attenuation_fond, 0.6) );
}

/* Textures de page par thème : valeurs d'origine (FONDS_THEMES_TEXTURES_675) multipliées par l'atténuation */
html:is(.theme_minimaliste, .theme_suisse) body::before
{
    opacity: calc( 0.12 * var(--verre_attenuation_fond, 0.6) );
}

html:is(.theme_minimaliste, .theme_suisse).bright_mode body::before
{
    opacity: calc( 0.05 * var(--verre_attenuation_fond, 0.6) );
}

html:is(.theme_IAslop, .theme_futur2026) body::before
{
    opacity: calc( 0.15 * var(--verre_attenuation_fond, 0.6) );
}

html:is(.theme_IAslop, .theme_futur2026).bright_mode body::before
{
    opacity: calc( 0.06 * var(--verre_attenuation_fond, 0.6) );
}

html.theme_obsidian body::before
{
    opacity: calc( 0.14 * var(--verre_attenuation_fond, 0.6) );
}

html.theme_obsidian.bright_mode body::before
{
    opacity: calc( 0.05 * var(--verre_attenuation_fond, 0.6) );
}

/* Champagne : images de fond très subtiles (n° 1283) : 0.05 en sombre, 0.04 en clair, texture aléatoire plafonnée à 0.05 */
/* html:is(.theme_champagne, .theme_atelier) body::before { opacity: 0.15; } : valeur d'origine (n° 675) */
html:is(.theme_champagne, .theme_atelier) body::before
{
    opacity: 0.05;
}

/* html:is(.theme_champagne, .theme_atelier).bright_mode body::before { opacity: 0.06; } : valeur d'origine (n° 675) */
html:is(.theme_champagne, .theme_atelier).bright_mode body::before
{
    opacity: 0.04;
}

html:is(.theme_champagne, .theme_atelier) body .arriere_plan_texture_globale
{
    opacity: min( 0.05, var(--texture_fond_opacite, 0.2) );
}
/* VERRE_ENCADRES ====================================================== */

/* Cyberpunk : bordures d'environ 4 px sur tous les éléments qui en ont, relief biseauté de 2 px sur cartes et boutons (n° 839) */
html.theme_cyberpunk.theme_cyberpunk body *:not(svg):not(svg *):not(hr)
{
    border-width: 4px;
}

html.theme_cyberpunk.theme_cyberpunk body :is( .home_bento_carte, .home_telemetrie, .home_offre, .home_temoignage, .home_cta_cadre, .home_cta_option,
    .prestation_carte, .expertise_carte, .offres_carte, .devis_carte, .blog_carte, .blog_newsletter_carte, .galerie_carte,
    .realisations_carte, .contact_coord_carte, .agence_pilier, .forme_carte,
    .bouton_principal, .bouton_secondaire, .blog_recherche_bouton, .bouton_docs_live, .connect_block .bt, .forme_bouton, .forme_bouton_plein )
{
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.38), inset -2px -2px 0 rgba(0, 0, 0, 0.45);
}

/* HAUTEUR_AUTO_ZONES_TEXTE ============================================ */
/*
 * 14/10/2026 10:43 (Claude, Dialogue n° 1301) : theme.js donne à chaque zone de texte la hauteur de son contenu.
 * Tant que le texte tient, pas d'ascenseur (il apparaîtrait un instant pendant la mesure) ; au-delà du plafond, défilement.
 */
textarea.zone_texte_auto
{
    overflow-y: hidden;
}

textarea.zone_texte_auto.zone_texte_deborde
{
    overflow-y: auto;
}
/* HAUTEUR_AUTO_ZONES_TEXTE ============================================ */

/* VERRE_FUME ========================================================== */
/*
 * 15/10/2026 01:50 (Claude #1, Dialogue n° 1532 de JaxX : « de manière générale tous les encadrés doivent avoir un effet de verre fumé
 * enregistre cette directive pour l'ensemble du site ») — A VALIDER PAR JaxX. Directive permanente (AGENTS.md n° 24).
 * Prolonge VERRE_ENCADRES et FLOU_ENCADRES : même liste d'encadrés (réunie ici) + les cartes de Mon compte.
 *   - teinte sombre translucide (« fumée »), flou renforcé, léger dégradé de lumière en haut à gauche, liseré lumineux et ombre portée ;
 *   - mode clair : fumé gris très léger ; sans backdrop-filter, moins de transparence ou contraste accru : teinte plus opaque, sans flou ;
 *   - tout NOUVEL encadré du site doit rejoindre la liste ci-dessous (ou utiliser les variables --fume_*).
 */
:root,
html.dark_mode
{
    --fume_teinte: color-mix(in srgb, #0c0c10 58%, transparent);
    --fume_degrade: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 42%, rgba(0, 0, 0, 0.16));
    --fume_flou: blur(18px) saturate(125%);
    --fume_ombre: 0 10px 34px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html.bright_mode
{
    --fume_teinte: color-mix(in srgb, #4a4a52 9%, rgba(255, 255, 255, 0.62));
    --fume_degrade: linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08) 45%, rgba(40, 40, 48, 0.06));
    --fume_flou: blur(16px) saturate(120%);
    --fume_ombre: 0 8px 28px rgba(28, 25, 23, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))
{
    :root,
    html.dark_mode
    {
        --fume_teinte: color-mix(in srgb, #0c0c10 92%, transparent);
    }

    html.bright_mode
    {
        --fume_teinte: color-mix(in srgb, #4a4a52 6%, rgba(255, 255, 255, 0.95));
    }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more)
{
    :root,
    html.dark_mode
    {
        --fume_teinte: #0c0c10;
        --fume_flou: none;
    }

    html.bright_mode
    {
        --fume_teinte: #ececef;
        --fume_flou: none;
    }
}

@supports (color: color-mix(in srgb, red 50%, blue))
{
    :root body :is(
        .agence_repere, .agence_etape, .agence_pilier, .agence_cta,
        .article_retenir, .article_cta, .article_lie, .article_sommaire,
        .blog_carte, .blog_newsletter_carte, .blog_commentaire, .blog_suivi_carte,
        .cgv_fiche, .confid_fiche, .confid_tableau_cadre, .mentions_fiche,
        .plan_pole, .phase_carte, .compteur_carte, .chantier_carte,
        .contact_coordonnees, .contact_rdv_carte, .devis_app_principal, .devis_carte,
        .devis_recap, .engagements_mesure, .engagements_cta, .merci_etape,
        .merci_suite, .expertise_situation_item, .expertise_prestation_carte, .expertise_faq_item,
        .expertise_autre_lien, .expertise_prestation, .expertise_etape, .expertise_autre,
        .expertise_carte, .expertises_pole, .expertises_etape, .expertises_cta_bloc,
        .home_bento_carte, .home_offre, .home_temoignage, .home_cta_cadre,
        .offres_bandeau_web_flash, .offres_carte, .offres_tableau_cadre, .offres_sur_devis,
        .offres_cta_cadre, .prestation_carte_situation, .prestation_item_livrable, .prestation_bloc_prix,
        .prestation_faq_item, .prestation_cta_bloc, .prestation_carte_voisine, .prestation_carte,
        .prestation_livrable, .prestation_prix_bloc, .prestation_voisine, .qwf_alerte,
        .qwf_recapitulatif, .qwf_confirmation, .realisation_fiche_technique_carte, .realisation_liee_lien,
        .realisation_interview_cadre, .realisations_carte_lien, .web_flash_tarif_carte, .web_flash_commande_carte,
        .web_flash_message, .web_flash_cta, .lecture_vocale_lecteur,
        .activation_alerte_erreur,
        .article_versions_liste, .article_diaporama, .contact_feedback.erreur, .contact_feedback.succes,
        .ds_theme_fiche_tete, .ds_nuancier_item, .ds_banc_barre_controle, .ds_mb_carte,
        .ds_mb_overlay_zoom, .ds_schema_logo_carte, .ds_ratio_carte, .ds_typo_carte,
        .ds_composant_bloc, .ds_texture_banc_essai, .ds_texture_carte, .devis_consentement,
        .devis_confirmation_etapes li, .markdown_body blockquote, .markdown_body pre, .docs_sidebar_diapo_bloc,
        .galerie_carte, .docs_erreur_chargement, .interview_progression_cadre, .interview_question_bloc,
        .plan_entete_visuel, .qwf_option, .qwf_depot, .realisation_visuel_principal_indice,
        .adm_biblio_carte, .adm_biblio_visionneuse, .adm_biblio_arbre, .jaxx_slideshow_slide .caption_wrapper,
        .dialogue_visionneuse, .dialogue_galerie_compteur, .dialogue_citation, .dialogue_code,
        .dialogue_edition_mode, .dialogue_sujets_voile, .eurl_interview_bloc, .eurl_encadre,
        .eurl_encadre_attention, .eurl_encadre_retenir, .eurl_extension, .eurl_document_choisi,
        .eurl_etape_notes_indice, .gads_apercu, .newsletter_dest_apercu, .newsletter_apercu_objet_box,
        .prospects_kpi_carte, .prospects_filtres_barre, .prospect_carte, .prospect_coordonnees,
        .prospect_strategie_tiroir, .prospect_coldmail_texte, .adm_tchat_message_visiteur, .adm_tchat_fenetre_entete,
        .adm_tchat_message_equipe, .adm_tchat_saisie, .admintester_bandeau, .vetq_bandeau,
        .jx_filter_header, .jx_filter_popover, .badge_telemetrie_3d, .adm_nav_glisse,
        .adm_tableau_cadre, .adm_panneau_voile, .adm_connexion_carte, .adm_demande_carte,
        .adm_contenus_section, .tiroir_adm, .lightbox_zoom_controle, .mc_carte,
        .mc_depot )
    {
        background-color: var(--fume_teinte);
        -webkit-backdrop-filter: var(--fume_flou);
        backdrop-filter: var(--fume_flou);
        box-shadow: var(--fume_ombre);
    }

    /* Le dégradé de lumière n'est posé que sur les cartes sans image de fond propre */
    :root body :is( .mc_carte, .mc_depot, .devis_carte, .offres_carte, .blog_carte, .agence_pilier, .home_bento_carte )
    {
        background-image: var(--fume_degrade);
    }
}
/* VERRE_FUME ========================================================== */

/* BOUTONS_SECONDAIRES_CHAMPAGNE ======================================= */
/*
 * 15/10/2026 01:50 (Claude #1, Dialogue n° 1532 de JaxX : « J'aime pas trop le design des boutons secondaires. Du thème champagne en Dark mode.
 * Pour moi il devrait y avoir une bordure moins claire, un peu moins de padding et un dégradé sur le fond gris. ») — A VALIDER PAR JaxX.
 * Thème Champagne en mode sombre uniquement : bordure champagne discrète (au lieu de la bordure claire), padding réduit,
 * fond gris en dégradé. Les boutons « mini » (.mc_mini) gardent leur propre padding.
 */
html.theme_champagne:not(.bright_mode) body .bouton_secondaire,
html.theme_champagne.dark_mode body .bouton_secondaire
{
    border-color: var(--ligne_forte);
    background-color: #1b1c21;
    background-image: var(--calques_bouton), linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 55%, rgba(0, 0, 0, 0.18));
    color: var(--encre);
}

html.theme_champagne:not(.bright_mode) body .bouton_secondaire:not(.mc_mini),
html.theme_champagne.dark_mode body .bouton_secondaire:not(.mc_mini)
{
    padding: 10px 18px;
}

html.theme_champagne:not(.bright_mode) body .bouton_secondaire:is( :hover, :focus-visible ),
html.theme_champagne.dark_mode body .bouton_secondaire:is( :hover, :focus-visible )
{
    border-color: var(--accent);
}
/* BOUTONS_SECONDAIRES_CHAMPAGNE ======================================= */

/* FOOTER_COMPACT_1546 ================================================= */
/*
 * 15/10/2026 (Claude #1, Dialogue n° 1546 de JaxX : « meilleur agencement du footer, la colonne est énorme, utiliser toute la largeur
 * de la fenêtre, trouver un autre agencement pour la liste des pages ») — A VALIDER PAR JaxX.
 *   - le pied de page prend toute la largeur de la fenêtre (gouttière fluide) au lieu de la largeur de page ;
 *   - la liste des pages (« Le site ») se répartit sur 2 colonnes (3 sur grand écran) et les « Coulisses du chantier » passent en ligne ;
 *   - la colonne « Le site » reçoit plus de largeur ; espacements verticaux resserrés.
 */
.footer_grille
{
    max-width: none;
    padding: var(--espace_4) clamp(16px, 3.5vw, 64px) var(--espace_3);
    gap: var(--espace_3) var(--espace_5);
}

.footer_bas
{
    max-width: none;
    padding-left: clamp(16px, 3.5vw, 64px);
    padding-right: clamp(16px, 3.5vw, 64px);
}

.footer_liste li
{
    padding: 3px 0;
}

.footer_titre_colonne
{
    margin-bottom: 10px;
}

.footer_liste_site
{
    columns: 2;
    column-gap: 28px;
}

.footer_liste_site li
{
    break-inside: avoid;
}

.footer_liste_coulisses
{
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
}

.footer_titre_coulisses
{
    margin-top: 14px;
}

@media (min-width: 1100px)
{
    .footer_grille
    {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.1fr);
    }
}

@media (min-width: 1600px)
{
    .footer_liste_site
    {
        columns: 3;
    }
}

@media (min-width: 701px) and (max-width: 1099px)
{
    .footer_colonne_site
    {
        grid-column: span 2;
    }
}
/* FOOTER_COMPACT_1546 ================================================= */

/* FOOTER_RESPONSIVE_1558 ============================================== */
/*
 * 15/10/2026 (Claude #1, Dialogue n° 1558 de JaxX : « le responsive n'est pas parfait, voici ce que j'obtiens avec une certaine largeur
 * de page », capture ≈ 1050 px) — A VALIDER PAR JaxX.
 * Cause : entre 701 et 1099 px la grille a 2 colonnes, « Identité » et « Le site » occupaient chacune 2 colonnes : « Expertises » et
 * « Contact » restaient seules sur leur ligne, avec une case vide à droite.
 * Correctif : identité + Expertises côte à côte, « Le site » sur toute la ligne, « Contact » sur toute la ligne avec ses coordonnées
 * réparties sur 2 colonnes ; aucune colonne ne déborde (min-width: 0, retour à la ligne des adresses longues).
 */
.footer_colonne
{
    min-width: 0;
}

.footer_colonne .coord_item,
.footer_colonne .footer_lien
{
    overflow-wrap: anywhere;
}

@media (min-width: 701px) and (max-width: 1099px)
{
    .footer_grille > :first-child
    {
        grid-column: span 1;
    }

    .footer_colonne_contact
    {
        grid-column: span 2;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 var(--espace_4);
        align-content: start;
    }

    .footer_colonne_contact > .footer_titre_colonne,
    .footer_colonne_contact > .footer_bouton_rdv
    {
        grid-column: 1 / -1;
    }

    .footer_colonne_contact > .footer_bouton_rdv
    {
        justify-self: start;
    }
}

@media (max-width: 420px)
{
    .footer_liste_site
    {
        columns: 1;
    }
}
/* FOOTER_RESPONSIVE_1558 ============================================== */

/* FOOTER_BAS_1561 ===================================================== */
/*
 * 15/10/2026 (Claude #1, Dialogue n° 1561 de JaxX) — A VALIDER PAR JaxX : « Coulisses du chantier » sous le trait, sur la même ligne
 * que « © 2026 AnunaQi » ; les liens légaux sont passés dans la liste « Le site ».
 */
.footer_bas
{
    align-items: center;
}

.footer_coulisses_bas
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    min-width: 0;
}

.footer_titre_coulisses_bas
{
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--encre_attenuee);
}

.footer_coulisses_bas .footer_liste_coulisses
{
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 700px)
{
    .footer_coulisses_bas
    {
        flex-basis: 100%;
    }
}
/* FOOTER_BAS_1561 ===================================================== */

/* MASONRY_1575 ======================================================== */
/*
 * 15/10/2026 (Claude #1, Dialogue n° 1575 de JaxX : « le réagencement des cartes doit se faire comme avec le plugin masonry, idem partout où il y a
 * des filtres et des cartes ») — A VALIDER PAR JaxX. Les grilles de cartes filtrables sont agencées par _theme/masonry.js : lignes fines de 4 px,
 * chaque carte occupe autant de lignes que sa hauteur ; sans JavaScript, la grille reste une grille classique.
 */
.masonry_actif.masonry_actif
{
    grid-auto-rows: 4px;
    row-gap: 0;
    align-items: start;
}

.masonry_actif > *
{
    align-self: start;
}

.masonry_actif > * > a,
.masonry_actif > * > article
{
    height: auto;
}
/* MASONRY_1575 ======================================================== */

/* MENUS_DEROULANTS_1607 =============================================== */
/*
 * 15/10/2026 (Claude #1, Dialogue n° 1607 de JaxX : « le design des menus déroulants doit s'adapter au thème et au light / dark mode »)
 * — A VALIDER PAR JaxX. Tous les <select> du site :
 *   - repli (tous navigateurs) : liste native qui suit color-scheme (déjà piloté par le mode) + fond, texte, option choisie et
 *     désactivée pris dans les variables du thème courant (--surface_input, --encre, --accent) ;
 *   - navigateurs qui savent styler la liste (appearance: base-select) : liste en verre fumé (directive n° 24), liseré du thème,
 *     options survolées / choisies teintées de l'accent, flèche qui pivote à l'ouverture. Les flèches propres à certains champs
 *     (ex. .contact_champ select) restent, la flèche native du mode base-select y est masquée.
 * Spécificité nulle (:where) : un menu qui a déjà son propre style le garde.
 */
:where(select)
{
    accent-color: var(--accent);
}

:where(select option, select optgroup)
{
    background-color: var(--surface_input);
    color: var(--encre);
}

:where(select option:checked)
{
    background-color: color-mix(in srgb, var(--accent) 26%, var(--surface_input));
}

:where(select option:disabled)
{
    color: var(--encre_attenuee);
}

@supports (appearance: base-select)
{
    /* spécificité (0,1,2) : certains champs posent appearance: none, qui empêchait le mode base-select */
    :root body select,
    :root body select::picker(select)
    {
        appearance: base-select;
    }

    :where(select)::picker(select)
    {
        box-sizing: border-box;
        margin-top: 4px;
        padding: 4px;
        color: var(--encre);
        background-color: var(--fume_teinte, var(--surface_input));
        -webkit-backdrop-filter: var(--fume_flou, none);
        backdrop-filter: var(--fume_flou, none);
        border: 1px solid var(--ligne_forte);
        border-radius: var(--rayon_input, 6px);
        box-shadow: var(--fume_ombre, 0 10px 30px rgba(0, 0, 0, 0.3));
    }

    :where(select) option
    {
        padding: 8px 12px;
        border-radius: calc(var(--rayon_input, 6px) * 0.6);
        background-color: transparent;
        color: var(--encre);
        cursor: pointer;
    }

    :where(select) option:hover,
    :where(select) option:focus-visible
    {
        background-color: color-mix(in srgb, var(--accent) 18%, transparent);
    }

    :where(select) option:checked
    {
        background-color: color-mix(in srgb, var(--accent) 30%, transparent);
        font-weight: 600;
    }

    :where(select) option::checkmark
    {
        color: var(--accent);
    }

    :where(select)::picker-icon
    {
        color: var(--accent);
        transition: rotate 160ms ease;
    }

    :where(select):open::picker-icon
    {
        rotate: 180deg;
    }

    .contact_champ select::picker-icon
    {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce)
{
    :where(select)::picker-icon
    {
        transition: none;
    }
}
/* MENUS_DEROULANTS_1607 =============================================== */

/* VERRE_FUME_CHAMPS_1620 ============================================== */
/*
 * 15/10/2026 (Claude #1, Dialogue n° 1620 / 1621 de JaxX : « pour tous les thèmes, un effet de verre fumé quand un cadre, un bloc, un
 * input, un textarea, une gélule… se superpose à l'image de fond, afin d'améliorer la lisibilité, sur l'ensemble du site ») — A VALIDER PAR JaxX.
 * Complète VERRE_FUME (directive n° 24) : mêmes variables --fume_*, donc la teinte suit le mode clair/sombre ; les couleurs d'accent, bordures
 * et rayons de chaque thème sont conservés (seuls le fond, le flou et l'ombre changent).
 *   - champs de saisie (input texte, textarea, select) : teinte un peu plus dense que les cartes pour la lisibilité de la frappe ;
 *   - blocs et gélules encore translucides sans flou, relevés lors d'un audit des pages publiques (Web Express, Agence, Chantier, Blog) ;
 *   - repli opaque sans backdrop-filter ou si le visiteur demande moins de transparence (variables déjà gérées dans VERRE_FUME).
 */
:root,
html.dark_mode
{
    --fume_champ_teinte: color-mix(in srgb, #0c0c10 68%, transparent);
    --fume_champ_focus: color-mix(in srgb, #0c0c10 82%, transparent);
}

html.bright_mode
{
    --fume_champ_teinte: color-mix(in srgb, #4a4a52 6%, rgba(255, 255, 255, 0.78));
    --fume_champ_focus: color-mix(in srgb, #4a4a52 4%, rgba(255, 255, 255, 0.92));
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more)
{
    :root,
    html.dark_mode
    {
        --fume_champ_teinte: #0c0c10;
        --fume_champ_focus: #0c0c10;
    }

    html.bright_mode
    {
        --fume_champ_teinte: #ececef;
        --fume_champ_focus: #ffffff;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))
{
    :root,
    html.dark_mode
    {
        --fume_champ_teinte: color-mix(in srgb, #0c0c10 94%, transparent);
        --fume_champ_focus: #0c0c10;
    }

    html.bright_mode
    {
        --fume_champ_teinte: color-mix(in srgb, #4a4a52 4%, rgba(255, 255, 255, 0.96));
        --fume_champ_focus: #ffffff;
    }
}

@supports (color: color-mix(in srgb, red 50%, blue))
{
    :root body :is(
        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
        textarea,
        select )
    {
        background-color: var(--fume_champ_teinte);
        -webkit-backdrop-filter: var(--fume_flou);
        backdrop-filter: var(--fume_flou);
        box-shadow: var(--fume_ombre);
    }

    :root body :is(
        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
        textarea,
        select ):is( :focus, :focus-visible )
    {
        background-color: var(--fume_champ_focus);
    }

    :root body :is(
        .webexpress_carte, .webexpress_bandeau_item, .webexpress_exemple_carte, .webexpress_exemple_fiche_brief,
        .webexpress_exemple_badge_statut, .webexpress_mockup_adresse, .webexpress_mockup_agrandir, .webexpress_encouragement,
        .webexpress_hero_pub_preuve > span, .webexpress_lecture_page, .lecture_vocale_lanceur,
        .agence_reperes, .compteurs_grille, .phases_grille, .chantiers_grille )
    {
        background-color: var(--fume_teinte);
        -webkit-backdrop-filter: var(--fume_flou);
        backdrop-filter: var(--fume_flou);
        box-shadow: var(--fume_ombre);
    }
}
/* VERRE_FUME_CHAMPS_1620 ============================================== */

/* CARTES_DYNAMIQUES_THEME ============================================== */
/*
 * 21/10/2026 (Antigravity, Dialogue n° 1786 de JaxX : « Peux-tu faire en sorte que la carte soit aux couleurs du thème actif
 * et qu'elle change de manière dynamique en fonction du thème mais aussi du Dark mode ou du bright mode.
 * Cette fonctionnalité et cette règle doit être générale sur l'ensemble du site dès qu'on doit utiliser une carte. ») — A VALIDER PAR JaxX.
 * Règle transversale s'appliquant à toute carte Leaflet / OpenStreetMap présente (.view_carte_osm) ou future (.carte_dynamique_theme) :
 *   - Dark mode (html:not(.bright_mode), html.dark_mode) : tuiles inversées, contraste et luminosité calibrés pour un fond sombre
 *     cartographique haut de gamme (façon CartoDB Dark Matter / Mapbox Dark) avec calque teinté par --accent ;
 *   - Bright mode (html.bright_mode) : tuiles claires adoucies, légèrement désaturées, avec calque subtil teinté par --accent ;
 *   - Thèmes spéciaux : Matrix (vert phosphore rétro-terminal), Cyberpunk (contraste néon poussé) ;
 *   - Contrôles de zoom (+/-), popups et attributions aux couleurs et formes du thème (--surface, --ligne, --encre, --accent).
 */
.carte_dynamique_theme,
.view_carte_osm,
.leaflet-container
{
    background-color: var(--surface);
    color: var(--encre);
    font-family: var(--police_texte);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon_carte, 8px);
    box-shadow: var(--fume_ombre, var(--ombre));
}

/* 1. FILTRAGE DES TUILES OSM EN MODE SOMBRE (DARK MODE PAR DÉFAUT) */
:root:not(.bright_mode) .carte_dynamique_theme .leaflet-tile-pane,
:root:not(.bright_mode) .view_carte_osm .leaflet-tile-pane,
html.dark_mode .carte_dynamique_theme .leaflet-tile-pane,
html.dark_mode .view_carte_osm .leaflet-tile-pane
{
    filter: invert(100%) hue-rotate(180deg) brightness(92%) contrast(92%) saturate(0.25);
    transition: filter 0.4s ease;
}

/* 2. FILTRAGE DES TUILES OSM EN MODE CLAIR (BRIGHT MODE) */
html.bright_mode .carte_dynamique_theme .leaflet-tile-pane,
html.bright_mode .view_carte_osm .leaflet-tile-pane
{
    filter: brightness(98%) contrast(96%) saturate(0.85);
    transition: filter 0.4s ease;
}

/* 3. CALQUE DE TEINTE DYNAMIQUE SUR LES TUILES SELON --accent DU THÈME ACTIF */
.carte_dynamique_theme .leaflet-tile-pane::after,
.view_carte_osm .leaflet-tile-pane::after
{
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-color: var(--accent);
    opacity: 0.10;
    mix-blend-mode: color;
    transition: background-color 0.4s ease, opacity 0.4s ease;
}

html.bright_mode .carte_dynamique_theme .leaflet-tile-pane::after,
html.bright_mode .view_carte_osm .leaflet-tile-pane::after
{
    opacity: 0.07;
}

/* 4. ADAPTATIONS SPÉCIFIQUES POUR LES THÈMES À IDENTITÉ FORTE */
/* Matrix : vert phosphore monochromatique façon écran de contrôle du Nebuchadnezzar */
html:is(.theme_matrix, .theme_matrice):not(.bright_mode) .carte_dynamique_theme .leaflet-tile-pane,
html:is(.theme_matrix, .theme_matrice):not(.bright_mode) .view_carte_osm .leaflet-tile-pane
{
    filter: invert(100%) hue-rotate(180deg) brightness(85%) contrast(120%) saturate(0) sepia(100%) hue-rotate(85deg) saturate(3.2);
}

/* Cyberpunk : contraste néon et saturation renforcée */
html.theme_cyberpunk:not(.bright_mode) .carte_dynamique_theme .leaflet-tile-pane,
html.theme_cyberpunk:not(.bright_mode) .view_carte_osm .leaflet-tile-pane
{
    filter: invert(100%) hue-rotate(180deg) brightness(88%) contrast(115%) saturate(0.45);
}

/* 5. HABILLAGE DES CONTRÔLES LEAFLET (BOUTONS ZOOM, POPUPS, ATTRIBUTION) */
.carte_dynamique_theme .leaflet-bar,
.view_carte_osm .leaflet-bar
{
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon_bouton, 4px);
    overflow: hidden;
    box-shadow: var(--ombre);
}

.carte_dynamique_theme .leaflet-bar a,
.view_carte_osm .leaflet-bar a
{
    background-color: var(--surface_input, var(--surface)) !important;
    color: var(--encre) !important;
    border-bottom: 1px solid var(--ligne) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.carte_dynamique_theme .leaflet-bar a:last-child,
.view_carte_osm .leaflet-bar a:last-child
{
    border-bottom: none !important;
}

.carte_dynamique_theme .leaflet-bar a:hover,
.carte_dynamique_theme .leaflet-bar a:focus,
.view_carte_osm .leaflet-bar a:hover,
.view_carte_osm .leaflet-bar a:focus
{
    background-color: var(--accent) !important;
    color: var(--accent_texte, #ffffff) !important;
}

/* Popups Leaflet aux couleurs du thème et effet verre fumé */
.carte_dynamique_theme .leaflet-popup-content-wrapper,
.view_carte_osm .leaflet-popup-content-wrapper
{
    background: var(--surface) !important;
    color: var(--encre) !important;
    border: 1px solid var(--ligne_forte);
    border-radius: var(--rayon_carte, 8px);
    box-shadow: var(--fume_ombre, var(--ombre));
    -webkit-backdrop-filter: var(--fume_flou, blur(12px));
    backdrop-filter: var(--fume_flou, blur(12px));
    font-family: var(--police_texte);
    font-size: var(--texte_s, 13px);
}

.carte_dynamique_theme .leaflet-popup-tip,
.view_carte_osm .leaflet-popup-tip
{
    background: var(--surface) !important;
}

.carte_dynamique_theme .leaflet-popup-close-button,
.view_carte_osm .leaflet-popup-close-button
{
    color: var(--encre_second) !important;
    padding: 6px !important;
}

.carte_dynamique_theme .leaflet-popup-close-button:hover,
.view_carte_osm .leaflet-popup-close-button:hover
{
    color: var(--accent) !important;
}

/* Attribution Leaflet discrète et intégrée */
.carte_dynamique_theme .leaflet-control-attribution,
.view_carte_osm .leaflet-control-attribution
{
    background: var(--surface) !important;
    opacity: 0.88;
    color: var(--encre_attenuee) !important;
    font-size: 10px !important;
    border-radius: var(--rayon_badge, 4px) 0 0 0;
    border-top: 1px solid var(--ligne);
    border-left: 1px solid var(--ligne);
}

.carte_dynamique_theme .leaflet-control-attribution a,
.view_carte_osm .leaflet-control-attribution a
{
    color: var(--accent) !important;
    text-decoration: none;
}

.carte_dynamique_theme .leaflet-control-attribution a:hover,
.view_carte_osm .leaflet-control-attribution a:hover
{
    text-decoration: underline;
}
/* CARTES_DYNAMIQUES_THEME ============================================== */

/* VEUVES_ORPHELINS_84 ================================================================================
   11/11/2026 (n° 84 JaxXBot Jordan, directive de JaxX : pas de veuves ni d'orphelins typographiques).
   Amélioration progressive : les navigateurs qui ne connaissent pas text-wrap l'ignorent sans dégât.
   pretty = évite le mot seul en dernière ligne ; balance = équilibre les lignes des titres et des courts blocs.
   Basse spécificité : toute règle plus précise du projet (text-wrap ou white-space) garde la main.
================================================================================================== */
p,
li,
dd,
figcaption,
blockquote,
summary
{
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
caption,
button,
.btn,
.button,
.bouton
{
    text-wrap: balance;
}
/* FIN VEUVES_ORPHELINS_84 ========================================================================== */

/* PUCES_FLOTTE_84 ====================================================================================
   12/11/2026 (n° 84 JaxXBot Jordan, directive de JaxX, étendue à tous les projets) : puces « en flotte » (suspendues).
   Les lignes suivantes d'un élément de liste s'alignent sur le texte, jamais sous la puce ; puce à l'accent du projet.
   Section isolée, basse spécificité : seules les listes à puces réelles du contenu rédactionnel sont visées
   (les listes remises à zéro par le thème, sans puce, restent inchangées).
   Complète VEUVES_ORPHELINS_84 (text-wrap) sans la dupliquer.
=================================================================================================== */
.article_corps ul,
.article_corps ol
{
    list-style-position: outside;
}

.article_corps li
{
    orphans: 3;
    widows: 3;
}

.article_corps li::marker
{
    color: var(--accent);
}
/* FIN PUCES_FLOTTE_84 ============================================================================== */