/**
 * ================================================================
 * FICHIER : Design_system.css
 * EMPLACEMENT : 2027_B2B/pages/Design_system/Design_system.css
 * SHORT_DESC : Feuilles de style de la page Design System et des Thèmes
 * DESCRIPTION : Styles de présentation des 4 thèmes artistiques commutables,
 *               des planches Moodboard, du banc d’essai interactif et de la
 *               bibliothèque de composants UI en syntaxe Allman stricte.
 *
 * SOMMAIRE :
 *   - BASE_LAYOUT         : Conteneur et grille générale
 *   - HERO_SECTION        : En-tête et barre de navigation par ancres
 *   - THEMES_ET_NUANCIERS : Sélecteur d'onglets, pastilles et cartes de couleur
 *   - BANC_D_ESSAI        : Conteneur dynamique réagissant aux thèmes
 *   - MOODBOARDS          : Grille de planches et cartes de zoom slideshow
 *   - GEOMETRIE_SACREE    : Schéma SVG vectoriel et cartes ratios
 *   - TYPOGRAPHIE         : Spécimens de polices
 *   - COMPOSANTS_UI       : Boutons, badges, formulaires
 *   - EFFETS_MATIERES     : Démonstrations du halo, de la parallaxe, du satiné et du logo dynamique
 *
 * MODIFICATIONS :
 *   - 11/10/2026 00:58 : BANC_5_THEMES_741, pastilles et banc d'essai des 5 thèmes du sélecteur (Champagne, Modern Minimaliste, Cyberpunk, Matrix, IA Slop) (Dialogue n° 741, Claude) — A VALIDER PAR JaxX
 *   - 07/10/2026 21:16 : Mode clair lisible : cartes logo, favicons et icônes sur les variables du thème (--surface_1/--surface_2 inexistantes → fond sombre fixe), bouton icône de démonstration à l'encre du thème (demande de JaxX, Dialogue n° 21 et 22) — A VALIDER PAR JaxX
 *   - 07/10/2026 12:39 : Section 08 Effets & Matières : cartes de démonstration, scène de parallaxe, aplat et satiné (A.30, A.31, A.32) — A VALIDER PAR JaxX
 *   - 06/10/2026 16:22 : Puce losange SVG des liens d'ancre (A.28) — A VALIDER PAR JaxX
 *   - 06/10/2026 14:15 : Barre d'onglets des thèmes sur une ligne et sticky (demande de JaxX) — A VALIDER PAR JaxX
 *   - 06/10/2026 06:12 : Création initiale Allman & snake_case — A VALIDER PAR JaxX
 *
 * ================================================================
 */

/* BASE_LAYOUT ========================================================= */
.ds_page_conteneur
{
    width: 100%;
    min-height: 100vh;
    padding-bottom: 96px;
}

.ds_page_corps
{
    max-width: var(--largeur_page, 1280px);
    margin: 0 auto;
    padding: 0 var(--gouttiere, 24px);
    display: flex;
    flex-direction: column;
    gap: 72px;
}

/* HERO_SECTION ======================================================== */
.ds_hero_banniere
{
    width: 100%;
    padding: 64px 0 48px 0;
    background: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.12) 0%, transparent 70%), var(--fond, #08090a);
    border-bottom: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    margin-bottom: 48px;
}

.ds_hero_conteneur
{
    max-width: var(--largeur_page, 1280px);
    margin: 0 auto;
    padding: 0 var(--gouttiere, 24px);
}

.ds_hero_badge_pill
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    border-radius: var(--rayon_p, 2px);
    margin-bottom: 20px;
}

.pill_point_vert
{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--succes, #10b981);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.pill_texte
{
    font-size: 0.8rem;
    color: var(--encre_second, #8a8f98);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ds_hero_titre
{
    font-family: var(--police_titres, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(2rem, 1.6rem + 2vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--encre, #ffffff);
    margin: 0 0 16px 0;
}

.ds_hero_sous_titre
{
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--encre_second, #8a8f98);
    max-width: 820px;
    margin: 0 0 32px 0;
}

.ds_hero_sous_titre strong
{
    color: var(--encre, #ffffff);
}

.ds_ancres_nav
{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ds_ancre_lien
{
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    border-radius: var(--rayon_p, 2px);
    color: var(--encre, #ffffff);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: all var(--duree, 220ms) var(--easing);
}

/* 06/10/2026 16:22 : puce losange SVG (A.28, ♦ proscrit) */
.ds_ancre_lien
{
    gap: 8px;
}

.ds_ancre_puce
{
    width: 0.7em;
    height: 0.7em;
    color: var(--accent, #2563eb);
}

.ds_ancre_lien:hover
{
    background: rgba(37, 99, 235, 0.15);
    border-color: var(--accent, #2563eb);
    color: #ffffff;
    transform: translateY(-1px);
}

/* SECTION COMMUNE ===================================================== */
.ds_section_bloc
{
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.ds_section_surtitre
{
    font-size: 0.8rem;
    color: var(--accent, #2563eb);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 6px;
}

.ds_section_titre
{
    font-family: var(--police_titres, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--encre, #ffffff);
    margin: 0 0 8px 0;
}

.ds_section_intro
{
    font-size: 1rem;
    line-height: 1.6;
    color: var(--encre_second, #8a8f98);
    max-width: 800px;
    margin: 0;
}

.ds_tete_avec_bouton
{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
}

.ds_action_diapo_btn
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--accent, #2563eb);
    color: #ffffff;
    border: none;
    border-radius: var(--rayon_p, 2px);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duree, 220ms) var(--easing);
}

.ds_action_diapo_btn:hover
{
    background: #1d4ed8;
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
}

/* 1. THÈMES ET NUANCIERS ============================================== */
/* 06/10/2026 14:15 (Claude) : demande de JaxX — une seule ligne et sticky sous l'en-tête fixe ;
   sur écran étroit, défilement horizontal interne plutôt qu'un retour à la ligne */
.ds_themes_tabs_barre
{
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    border-bottom: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    padding-top: 12px;
    padding-bottom: 12px;
    position: -webkit-sticky;
    position: sticky;
    top: var(--hauteur_header, 64px);
    z-index: 20;
    background: var(--fond);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ds_themes_tabs_barre::-webkit-scrollbar
{
    display: none;
}

.ds_themes_tabs_barre .ds_theme_tab_btn
{
    flex-shrink: 0;
    white-space: nowrap;
    gap: 8px;
    padding: 10px 12px;
    font-size: 0.85rem;
}

.ds_theme_tab_btn
{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    border-radius: var(--rayon_p, 2px);
    color: var(--encre_second, #8a8f98);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duree, 220ms) var(--easing);
}

.ds_theme_tab_btn:hover
{
    color: var(--encre, #ffffff);
    background: rgba(255, 255, 255, 0.05);
}

.ds_theme_tab_btn.actif
{
    color: var(--encre, #ffffff);
    background: rgba(37, 99, 235, 0.12);
    border-color: var(--accent, #2563eb);
}

.theme_tab_pastille
{
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.pastille_theme_obsidian
{
    background: #2563eb;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.6);
}

.pastille_theme_atelier
{
    background: #d4af37;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
}

.pastille_theme_suisse
{
    background: #002fa7;
    box-shadow: 0 0 8px rgba(0, 47, 167, 0.6);
}

.pastille_theme_matrice
{
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.ds_theme_panneau
{
    display: none;
    flex-direction: column;
    gap: 24px;
}

.ds_theme_panneau.actif
{
    display: flex;
}

.ds_theme_fiche_tete
{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    border-radius: var(--rayon_p, 2px);
}

.ds_theme_titre
{
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--encre, #ffffff);
    margin: 0 0 6px 0;
}

.ds_theme_desc
{
    font-size: 0.95rem;
    color: var(--encre_second, #8a8f98);
    margin: 0 0 12px 0;
    max-width: 700px;
    line-height: 1.5;
}

.ds_tag_ambiance
{
    font-size: 0.85rem;
    color: var(--accent, #2563eb);
    background: rgba(37, 99, 235, 0.1);
    padding: 4px 10px;
    border-radius: var(--rayon_p, 2px);
}

.ds_bouton_appliquer_banc
{
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.15));
    border-radius: var(--rayon_p, 2px);
    color: var(--encre, #ffffff);
    font-size: 0.88rem;
    cursor: pointer;
    transition: all var(--duree, 220ms) var(--easing);
}

.ds_bouton_appliquer_banc:hover
{
    background: rgba(37, 99, 235, 0.2);
    border-color: var(--accent, #2563eb);
}

.ds_nuancier_grille
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.ds_nuancier_item
{
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.06));
    border-radius: var(--rayon_p, 2px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    transition: transform var(--duree, 220ms) var(--easing), border-color var(--duree, 220ms) var(--easing);
}

.ds_nuancier_item:hover
{
    transform: translateY(-2px);
    border-color: var(--accent, #2563eb);
}

.ds_nuancier_pastille
{
    width: 100%;
    height: 64px;
    border-radius: var(--rayon_p, 2px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ds_nuancier_nom
{
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--encre, #ffffff);
    display: block;
}

.ds_nuancier_hex
{
    font-size: 0.85rem;
    color: var(--accent, #2563eb);
    display: block;
    margin: 2px 0;
}

.ds_nuancier_role
{
    font-size: 0.78rem;
    color: var(--encre_attenuee, #525866);
    line-height: 1.3;
}

/* 2. BANC D'ESSAI EN TEMPS RÉEL ======================================= */
.ds_banc_essai_cadre
{
    width: 100%;
    border-radius: var(--rayon_p, 2px);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.12));
    overflow: hidden;
    transition: background 300ms ease, color 300ms ease, border-color 300ms ease;
}

.ds_banc_barre_controle
{
    padding: 14px 20px;
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.ds_banc_titre_terminal
{
    font-size: 0.88rem;
    color: #cbd5e1;
}

.ds_banc_titre_terminal strong
{
    color: #ffffff;
}

.ds_banc_selecteur_boutons
{
    display: flex;
    gap: 8px;
}

.banc_btn_commutateur
{
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--rayon_p, 2px);
    color: #cbd5e1;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 180ms ease;
}

.banc_btn_commutateur:hover
{
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.banc_btn_commutateur.actif
{
    background: var(--accent, #2563eb);
    border-color: var(--accent, #2563eb);
    color: #ffffff;
    font-weight: 600;
}

.ds_banc_corps_demo
{
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* DECLINAISONS DE STYLES DU BANC D'ESSAI */
/* Thème 1 : Obsidian (Défaut) */
.ds_banc_essai_cadre.theme_obsidian
{
    background: #08090a;
    color: #ffffff;
}

.ds_banc_essai_cadre.theme_obsidian .demo_carte_bento_focus,
.ds_banc_essai_cadre.theme_obsidian .demo_bento_item
{
    background: #141519;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.ds_banc_essai_cadre.theme_obsidian .demo_btn_primaire
{
    background: #2563eb;
    color: #ffffff;
}

.ds_banc_essai_cadre.theme_obsidian .demo_btn_secondaire
{
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* Thème 2 : Atelier */
.ds_banc_essai_cadre.theme_atelier
{
    background: #0a0a0b;
    color: #f4efea;
}

.ds_banc_essai_cadre.theme_atelier .demo_carte_bento_focus,
.ds_banc_essai_cadre.theme_atelier .demo_bento_item
{
    background: #181614;
    border: 1px solid rgba(197, 160, 89, 0.25);
    color: #f4efea;
}

.ds_banc_essai_cadre.theme_atelier .demo_btn_primaire
{
    background: #d4af37;
    color: #0a0a0b;
    font-weight: 700;
}

.ds_banc_essai_cadre.theme_atelier .demo_btn_secondaire
{
    border: 1px solid #c5a059;
    color: #d4af37;
}

/* Thème 3 : Suisse (Bright) */
.ds_banc_essai_cadre.theme_suisse
{
    background: #f8fafc;
    color: #0f172a;
}

.ds_banc_essai_cadre.theme_suisse .ds_banc_barre_controle
{
    background: #e2e8f0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.ds_banc_essai_cadre.theme_suisse .ds_banc_titre_terminal
{
    color: #334155;
}

.ds_banc_essai_cadre.theme_suisse .ds_banc_titre_terminal strong
{
    color: #0f172a;
}

.ds_banc_essai_cadre.theme_suisse .banc_btn_commutateur
{
    background: #ffffff;
    border-color: #cbd5e1;
    color: #334155;
}

.ds_banc_essai_cadre.theme_suisse .banc_btn_commutateur.actif
{
    background: #002fa7;
    color: #ffffff;
    border-color: #002fa7;
}

.ds_banc_essai_cadre.theme_suisse .demo_carte_bento_focus,
.ds_banc_essai_cadre.theme_suisse .demo_bento_item
{
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.ds_banc_essai_cadre.theme_suisse .demo_titre_hero
{
    color: #0f172a;
}

.ds_banc_essai_cadre.theme_suisse .demo_desc_hero
{
    color: #475569;
}

.ds_banc_essai_cadre.theme_suisse .demo_btn_primaire
{
    background: #002fa7;
    color: #ffffff;
}

.ds_banc_essai_cadre.theme_suisse .demo_btn_secondaire
{
    border: 1px solid #002fa7;
    color: #002fa7;
}

/* Thème 4 : Matrice */
.ds_banc_essai_cadre.theme_matrice
{
    background: #050811;
    color: #e2e8f0;
}

.ds_banc_essai_cadre.theme_matrice .demo_carte_bento_focus,
.ds_banc_essai_cadre.theme_matrice .demo_bento_item
{
    background: #0b101e;
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #e2e8f0;
}

.ds_banc_essai_cadre.theme_matrice .demo_btn_primaire
{
    background: #10b981;
    color: #050811;
    font-weight: 700;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.35);
}

.ds_banc_essai_cadre.theme_matrice .demo_btn_secondaire
{
    border: 1px solid #10b981;
    color: #10b981;
}

/* BANC_5_THEMES_741 — 11/10/2026 00:58 (Dialogue n° 741) : pastilles et déclinaisons du banc
 * pour les 5 thèmes du sélecteur (couleurs de _theme/theme.css). Les 4 blocs d'origine ci-dessus restent. */
.pastille_theme_champagne
{
    background: #bc9c50;
    box-shadow: 0 0 8px rgba(223, 193, 123, 0.6);
}

.pastille_theme_minimaliste
{
    background: #f8fafc;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.35), 0 0 8px rgba(255, 255, 255, 0.4);
}

.pastille_theme_cyberpunk
{
    background: linear-gradient(135deg, #ff007f 0%, #ff007f 50%, #00f0ff 50%, #00f0ff 100%);
    box-shadow: 0 0 8px rgba(255, 0, 127, 0.6);
}

.pastille_theme_matrix
{
    background: #00ff66;
    box-shadow: 0 0 8px rgba(0, 255, 102, 0.6);
}

.pastille_theme_IAslop
{
    background: linear-gradient(135deg, #655cf6 0%, #a855f7 100%);
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.6);
}

.ds_banc_selecteur_boutons
{
    flex-wrap: wrap;
}

/* Champagne (défaut du site) */
.ds_banc_essai_cadre.theme_champagne
{
    background: #0b0b0d;
    color: #ffffff;
}

.ds_banc_essai_cadre.theme_champagne .demo_desc_hero
{
    color: #b5ada3;
}

.ds_banc_essai_cadre.theme_champagne .demo_carte_bento_focus,
.ds_banc_essai_cadre.theme_champagne .demo_bento_item
{
    background: #1a1b20;
    border: 1px solid rgba(223, 193, 123, 0.26);
    color: #ffffff;
}

.ds_banc_essai_cadre.theme_champagne .banc_btn_commutateur.actif,
.ds_banc_essai_cadre.theme_champagne .demo_btn_primaire
{
    background: #bc9c50;
    border-color: #bc9c50;
    color: #0a0a0b;
    font-weight: 700;
}

.ds_banc_essai_cadre.theme_champagne .demo_btn_secondaire
{
    border: 1px solid rgba(223, 193, 123, 0.4);
    color: #dfc17b;
}

/* Modern Minimaliste (présenté en mode clair, blanc pur) */
.ds_banc_essai_cadre.theme_minimaliste
{
    background: #ffffff;
    color: #0f172a;
}

.ds_banc_essai_cadre.theme_minimaliste .ds_banc_barre_controle
{
    background: #f6f7f9;
    border-bottom: 1px solid rgba(15, 23, 42, 0.09);
}

.ds_banc_essai_cadre.theme_minimaliste .ds_banc_titre_terminal
{
    color: #475569;
}

.ds_banc_essai_cadre.theme_minimaliste .ds_banc_titre_terminal strong,
.ds_banc_essai_cadre.theme_minimaliste .demo_titre_hero
{
    color: #0f172a;
}

.ds_banc_essai_cadre.theme_minimaliste .banc_btn_commutateur
{
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.18);
    color: #475569;
}

.ds_banc_essai_cadre.theme_minimaliste .banc_btn_commutateur.actif,
.ds_banc_essai_cadre.theme_minimaliste .demo_btn_primaire
{
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

.ds_banc_essai_cadre.theme_minimaliste .demo_desc_hero
{
    color: #475569;
}

.ds_banc_essai_cadre.theme_minimaliste .demo_carte_bento_focus,
.ds_banc_essai_cadre.theme_minimaliste .demo_bento_item
{
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.ds_banc_essai_cadre.theme_minimaliste .demo_btn_secondaire
{
    border: 1px solid #0f172a;
    color: #0f172a;
}

/* Cyberpunk */
.ds_banc_essai_cadre.theme_cyberpunk
{
    background: #05050a;
    color: #ffffff;
}

.ds_banc_essai_cadre.theme_cyberpunk .demo_desc_hero
{
    color: #00f0ff;
}

.ds_banc_essai_cadre.theme_cyberpunk .demo_carte_bento_focus,
.ds_banc_essai_cadre.theme_cyberpunk .demo_bento_item
{
    background: #121222;
    border: 1px solid #00f0ff;
    color: #ffffff;
}

.ds_banc_essai_cadre.theme_cyberpunk .banc_btn_commutateur.actif,
.ds_banc_essai_cadre.theme_cyberpunk .demo_btn_primaire
{
    background: #ff007f;
    border-color: #ff007f;
    color: #05050a;
    font-weight: 700;
    box-shadow: 0 0 16px rgba(255, 0, 127, 0.4);
}

.ds_banc_essai_cadre.theme_cyberpunk .demo_btn_secondaire
{
    border: 1px solid #ffe600;
    color: #ffe600;
}

/* Matrix */
.ds_banc_essai_cadre.theme_matrix
{
    background: #030704;
    color: #e6ffe6;
}

.ds_banc_essai_cadre.theme_matrix .demo_desc_hero
{
    color: #70b87c;
}

.ds_banc_essai_cadre.theme_matrix .demo_carte_bento_focus,
.ds_banc_essai_cadre.theme_matrix .demo_bento_item
{
    background: #0c1a0f;
    border: 1px solid rgba(0, 255, 102, 0.32);
    color: #e6ffe6;
}

.ds_banc_essai_cadre.theme_matrix .banc_btn_commutateur.actif,
.ds_banc_essai_cadre.theme_matrix .demo_btn_primaire
{
    background: #00ff66;
    border-color: #00ff66;
    color: #030704;
    font-weight: 700;
    box-shadow: 0 0 16px rgba(0, 255, 102, 0.3);
}

.ds_banc_essai_cadre.theme_matrix .demo_btn_secondaire
{
    border: 1px solid #00ff66;
    color: #00ff66;
}

/* IA Slop */
.ds_banc_essai_cadre.theme_IAslop
{
    background: radial-gradient(circle at 80% 0%, rgba(139, 92, 246, 0.22) 0%, rgba(9, 8, 18, 0) 55%), #090812;
    color: #f8fafc;
}

.ds_banc_essai_cadre.theme_IAslop .demo_desc_hero
{
    color: #a79ec2;
}

.ds_banc_essai_cadre.theme_IAslop .demo_carte_bento_focus,
.ds_banc_essai_cadre.theme_IAslop .demo_bento_item
{
    background: rgba(26, 23, 46, 0.72);
    border: 1px solid rgba(168, 85, 247, 0.30);
    color: #f8fafc;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.ds_banc_essai_cadre.theme_IAslop .banc_btn_commutateur.actif,
.ds_banc_essai_cadre.theme_IAslop .demo_btn_primaire
{
    background: linear-gradient(135deg, #655cf6 0%, #a855f7 100%);
    border-color: #655cf6;
    color: #ffffff;
    font-weight: 700;
}

.ds_banc_essai_cadre.theme_IAslop .demo_btn_secondaire
{
    border: 1px solid rgba(168, 85, 247, 0.5);
    color: #c4b5fd;
}

/* ÉLÉMENTS INTERNES DU BANC D'ESSAI */
.demo_hero_mini
{
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    align-items: center;
}

@media (max-width: 860px)
{
    .demo_hero_mini
    {
        grid-template-columns: 1fr;
    }
}

.demo_badge_statut
{
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    opacity: 0.8;
    display: block;
    margin-bottom: 10px;
}

.demo_titre_hero
{
    font-family: var(--police_titres, 'Plus Jakarta Sans', sans-serif);
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin: 0 0 14px 0;
}

.demo_desc_hero
{
    font-size: 0.98rem;
    line-height: 1.6;
    opacity: 0.85;
    margin: 0 0 22px 0;
}

.demo_cta_groupe
{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.demo_btn_primaire
{
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: var(--rayon_p, 2px);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    transition: transform 180ms ease;
}

.demo_btn_primaire:hover
{
    transform: translateY(-1px);
}

.demo_btn_secondaire
{
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: var(--rayon_p, 2px);
    text-decoration: none;
    font-size: 0.92rem;
    background: transparent;
    transition: transform 180ms ease;
}

.demo_btn_secondaire:hover
{
    transform: translateY(-1px);
}

.demo_carte_bento_focus
{
    padding: 28px;
    border-radius: var(--rayon_p, 2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.demo_bento_label
{
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.demo_bento_chiffre
{
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.demo_bento_sub
{
    font-size: 0.85rem;
    opacity: 0.75;
}

.demo_grille_bento
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.demo_bento_item
{
    padding: 24px;
    border-radius: var(--rayon_p, 2px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bento_ico
{
    font-size: 1.4rem;
}

.bento_item_titre
{
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.bento_item_desc
{
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.8;
    margin: 0;
}

.bento_tag
{
    font-size: 0.75rem;
    opacity: 0.65;
    margin-top: auto;
}

/* 3. SECTION MOODBOARDS =============================================== */
.ds_moodboards_conteneur
{
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.ds_mb_groupe_section
{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ds_mb_groupe_entete
{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.ds_mb_titre_cat
{
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--encre, #ffffff);
    margin: 0 0 4px 0;
}

.ds_mb_desc_cat
{
    font-size: 0.92rem;
    color: var(--encre_second, #8a8f98);
    margin: 0;
}

.ds_badge_note
{
    font-size: 0.82rem;
    font-weight: 600;
    color: #60a5fa;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.25);
    padding: 4px 10px;
    border-radius: var(--rayon_p, 2px);
}

.ds_mb_grille_cartes
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}

.ds_mb_carte
{
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    border-radius: var(--rayon_p, 2px);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform var(--duree, 220ms) var(--easing), border-color var(--duree, 220ms) var(--easing);
}

.ds_mb_carte:hover
{
    transform: translateY(-4px);
    border-color: var(--accent, #2563eb);
}

.ds_mb_visuel_zone
{
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    position: relative;
}

.ds_mb_overlay_zoom
{
    position: absolute;
    inset: 0;
    background: rgba(8, 9, 10, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--duree, 220ms) var(--easing);
}

.ds_mb_carte:hover .ds_mb_overlay_zoom
{
    opacity: 1;
}

.ds_zoom_ico
{
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    background: var(--accent, #2563eb);
    padding: 8px 16px;
    border-radius: var(--rayon_p, 2px);
}

.ds_mb_corps
{
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ds_mb_item_titre
{
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--encre, #ffffff);
    margin: 0;
}

.ds_mb_item_desc
{
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--encre_second, #8a8f98);
    margin: 0;
}

.ds_mb_tags_liste
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.ds_mb_tag
{
    font-size: 0.75rem;
    color: var(--encre_attenuee, #525866);
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 8px;
    border-radius: 2px;
}

/* 4. GÉOMÉTRIE SACRÉE ================================================= */
.ds_geometrie_grille
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

@media (max-width: 900px)
{
    .ds_geometrie_grille
    {
        grid-template-columns: 1fr;
    }
}

.ds_schema_logo_carte
{
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    border-radius: var(--rayon_p, 2px);
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.ds_schema_visuel_zone
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.ds_schema_svg
{
    filter: drop-shadow(0 0 20px rgba(37, 99, 235, 0.3));
}

.ds_schema_legende
{
    font-size: 0.78rem;
    color: var(--encre_second, #8a8f98);
    text-align: center;
}

.ds_schema_explications
{
    width: 100%;
}

.ds_schema_titre
{
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--encre, #ffffff);
    margin: 0 0 12px 0;
}

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

.ds_schema_liste li
{
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--encre_second, #8a8f98);
    position: relative;
    padding-left: 18px;
}

.ds_schema_liste li::before
{
    content: "■";
    font-size: 0.6rem;
    color: var(--accent, #2563eb);
    position: absolute;
    left: 0;
    top: 4px;
}

.ds_schema_liste strong
{
    color: var(--encre, #ffffff);
}

.ds_ratios_cartes_colonne
{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ds_ratio_carte
{
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    border-radius: var(--rayon_p, 2px);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ds_ratio_tete
{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.ds_ratio_nom
{
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--encre, #ffffff);
    margin: 0;
}

.ds_ratio_valeur
{
    font-size: 0.85rem;
    color: var(--accent, #2563eb);
    font-weight: 600;
}

.ds_ratio_desc
{
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--encre_second, #8a8f98);
    margin: 0;
}

/* 5. TYPOGRAPHIE ====================================================== */
.ds_typo_grille
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.ds_typo_carte
{
    padding: 28px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    border-radius: var(--rayon_p, 2px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ds_typo_role
{
    font-size: 0.75rem;
    color: var(--accent, #2563eb);
    letter-spacing: 0.08em;
}

.ds_typo_famille
{
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--encre, #ffffff);
    margin: 0;
}

.ds_typo_specimen_titre
{
    font-family: var(--police_titres, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--encre, #ffffff);
    margin: 0;
}

.ds_typo_specimen_texte
{
    font-family: var(--police_texte, 'Inter', sans-serif);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--encre_second, #8a8f98);
    margin: 0;
}

.ds_typo_specimen_mono
{
    font-family: var(--police_mono, monospace);
    font-size: 0.85rem;
    line-height: 1.5;
    color: #60a5fa;
    margin: 0;
}

.ds_typo_alphabet
{
    font-size: 0.82rem;
    color: var(--encre_attenuee, #525866);
    line-height: 1.5;
    margin: 0;
}

.ds_typo_note
{
    font-size: 0.78rem;
    color: var(--encre_attenuee, #525866);
    margin-top: auto;
}

/* 6. COMPOSANTS UI ==================================================== */
.ds_composants_grille
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.ds_composant_bloc
{
    padding: 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    border-radius: var(--rayon_p, 2px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ds_composant_titre
{
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--encre, #ffffff);
    margin: 0;
}

.ds_composant_demo_ligne
{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.demo_btn_fantome
{
    background: transparent;
    border: none;
    color: var(--accent, #2563eb);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 12px;
}

.demo_btn_fantome:hover
{
    text-decoration: underline;
}

.demo_btn_icone
{
    width: 38px;
    height: 38px;
    border-radius: var(--rayon_p, 2px);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.12));
    /* color: #ffffff; */
    /* 07/10/2026 21:16 : encre du thème (blanc illisible en mode clair) */
    color: var(--encre);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.demo_btn_icone:hover
{
    background: var(--accent, #2563eb);
}

.ds_badge_statut_vert
{
    font-size: 0.78rem;
    font-weight: 600;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    padding: 4px 10px;
    border-radius: var(--rayon_p, 2px);
}

.ds_badge_statut_bleu
{
    font-size: 0.78rem;
    font-weight: 600;
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.12);
    padding: 4px 10px;
    border-radius: var(--rayon_p, 2px);
}

.ds_badge_statut_or
{
    font-size: 0.78rem;
    font-weight: 600;
    color: #d4af37;
    background: rgba(212, 175, 55, 0.12);
    padding: 4px 10px;
    border-radius: var(--rayon_p, 2px);
}

.ds_badge_statut_ardoise
{
    font-size: 0.78rem;
    font-weight: 500;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 10px;
    border-radius: var(--rayon_p, 2px);
}

.ds_composant_demo_form
{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.demo_input_champ,
.demo_select_champ
{
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.15));
    border-radius: var(--rayon_p, 2px);
    color: var(--encre, #ffffff);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color var(--duree, 220ms) var(--easing);
}

.demo_input_champ:focus,
.demo_select_champ:focus
{
    border-color: var(--accent, #2563eb);
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.25);
}

.demo_select_champ option
{
    background: #0e0f12;
    color: #ffffff;
}

/* MOODBOARDS_CARTE_ET_SLIDESHOW ======================================= */
.ds_mb_groupe_section
{
    margin-bottom: 48px;
}

.ds_mb_groupe_entete
{
    margin-bottom: 24px;
}

.ds_mb_titre_cat
{
    font-size: 1.35rem;
    color: var(--encre, #ffffff);
    margin: 0 0 6px 0;
    font-family: var(--police_titre, sans-serif);
}

.ds_mb_desc_cat
{
    font-size: 0.92rem;
    color: var(--encre_second, #94a3b8);
    margin: 0;
}

.ds_mb_grille
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.ds_mb_carte
{
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    border-radius: var(--rayon_p, 2px);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.ds_mb_carte:hover
{
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.ds_mb_visuel_zone
{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #030406;
}

.ds_mb_img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.ds_mb_carte:hover .ds_mb_img
{
    transform: scale(1.04);
}

.ds_mb_overlay_zoom
{
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.ds_mb_carte:hover .ds_mb_overlay_zoom
{
    opacity: 1;
}

.ds_zoom_ico
{
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 2px;
    font-size: 0.82rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.ds_mb_corps
{
    padding: 16px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ds_mb_item_titre
{
    font-size: 1rem;
    color: var(--encre, #ffffff);
    margin: 0 0 8px 0;
    font-weight: 600;
}

.ds_mb_item_desc
{
    font-size: 0.85rem;
    color: var(--encre_second, #94a3b8);
    margin: 0 0 14px 0;
    line-height: 1.5;
    flex: 1;
}

.ds_mb_tags_liste
{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ds_mb_tag
{
    font-size: 0.72rem;
    color: var(--encre_second, #94a3b8);
    background: rgba(255, 255, 255, 0.05);
    padding: 3px 8px;
    border-radius: 2px;
}

.slideshow_caption
{
    display: none;
}

.slideshow_caption_titre
{
    margin: 0 0 6px 0;
    color: #ffffff;
    font-size: 1.2rem;
    font-family: var(--police_titre, sans-serif);
}

.slideshow_caption_texte
{
    margin: 0;
    color: #cbd5e1;
    font-size: 0.95rem;
}

/* SECTION 7 : LOGOS HEAD, FAVICONS & ICÔNES TRANSPARENTES ============= */
.ds_logos_propositions_grille
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.ds_logo_carte
{
    border-radius: var(--rayon_m, 2px);
    /* background: var(--surface_1, #121316); */
    background: var(--surface);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform var(--duree, 0.25s) var(--easing, ease), border-color var(--duree, 0.25s) var(--easing, ease);
}

.ds_logo_carte:hover
{
    transform: translateY(-4px);
    border-color: var(--accent, #2563eb);
}

.ds_logo_badge
{
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent, #2563eb);
}

.ds_logo_apercu
{
    min-height: 120px;
    border-radius: var(--rayon_s, 2px);
    /* background: var(--surface_2, #18191d); */
    background: var(--fond_second);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ds_wordmark_display
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.ds_wordmark_nom
{
    font-family: var(--police_titres, Syne);
    font-size: 2rem;
    font-weight: 700;
    color: var(--encre, #ffffff);
    letter-spacing: -0.02em;
}

.ds_wordmark_sub
{
    font-size: 0.75rem;
    color: var(--encre_attenuee, #64748b);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ds_logo_corps
{
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.ds_logo_titre
{
    font-family: var(--police_titres, Syne);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--encre, #ffffff);
    margin: 0;
}

.ds_logo_desc
{
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--encre_second, #94a3b8);
    margin: 0;
    flex-grow: 1;
}

.ds_logo_usage
{
    font-size: 0.75rem;
    color: var(--accent, #2563eb);
    margin-top: 8px;
}

/* PACK FAVICONS */
.ds_favicons_pack_bloc
{
    border-radius: var(--rayon_m, 2px);
    /* background: var(--surface_1, #121316); */
    background: var(--surface);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    padding: 28px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ds_favicons_tete
{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ds_favicons_titre
{
    font-family: var(--police_titres, Syne);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--encre, #ffffff);
    margin: 0;
}

.ds_favicons_desc
{
    font-size: 0.9rem;
    color: var(--encre_second, #94a3b8);
    margin: 0;
}

.ds_favicons_tailles_grille
{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

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

.ds_favicon_case
{
    width: 80px;
    height: 80px;
    border-radius: var(--rayon_s, 2px);
    /* background: var(--surface_2, #18191d); */
    background: var(--fond_second);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.06));
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds_favicon_label
{
    font-size: 0.72rem;
    color: var(--encre_attenuee, #64748b);
}

/* SUITE D'ICÔNES TRANSPARENTES */
.ds_icones_suite_bloc
{
    border-radius: var(--rayon_l, 2px);
    /* background: var(--surface_1, #121316); */
    background: var(--surface);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    padding: clamp(24px, 4vw, 44px);
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.ds_icones_suite_tete
{
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 800px;
}

.ds_icones_suite_titre
{
    font-family: var(--police_titres, Syne);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--encre, #ffffff);
    margin: 0;
}

.ds_icones_suite_desc
{
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--encre_second, #94a3b8);
    margin: 0;
}

.ds_icones_grille
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.ds_icone_carte
{
    border-radius: var(--rayon_m, 2px);
    /* background: var(--surface_2, #18191d); */
    background: var(--fond_second);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.05));
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    transition: transform var(--duree, 0.25s) var(--easing, ease), border-color var(--duree, 0.25s) var(--easing, ease);
}

.ds_icone_carte:hover
{
    transform: translateY(-3px);
    border-color: var(--accent, #2563eb);
}

.ds_icone_visuel_fond
{
    width: 96px;
    height: 96px;
    border-radius: var(--rayon_m, 2px);
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds_icone_img
{
    display: block;
    width: 72px;
    height: 72px;
    object-fit: contain;
}

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

.ds_icone_nom
{
    font-family: var(--police_titres, Syne);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--encre, #ffffff);
}

.ds_icone_role
{
    font-size: 0.72rem;
    color: var(--encre_attenuee, #64748b);
    line-height: 1.35;
}

/* RESPONSIVE */
@media (max-width: 1024px)
{
    .ds_logos_propositions_grille
    {
        grid-template-columns: 1fr;
    }

    .ds_icones_grille
    {
        grid-template-columns: repeat(2, 1fr);
    }

    .ds_favicons_tailles_grille
    {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px)
{
    .ds_icones_grille
    {
        grid-template-columns: 1fr;
    }

    .ds_favicons_tailles_grille
    {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 8. EFFETS_MATIERES ================================================== */
/* 07/10/2026 12:39 (A.30, A.31, A.32) : démonstrations vivantes des effets du site */
.ds_effets_grille
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.ds_effet_carte
{
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: color-mix(in srgb, var(--fond_second, #0f1115) 88%, transparent);
    background-image: var(--satin, none);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    border-radius: 2px;
    overflow: hidden;
}

html.parallaxe_active .ds_effet_carte
{
    translate: calc( var(--plx_x, 0) * 3px ) calc( var(--plx_y, 0) * 3px );
}

.ds_effet_apercu
{
    position: relative;
    height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    overflow: hidden;
}

.ds_effet_consigne
{
    font-size: 0.85rem;
    color: var(--encre_attenuee, #8b93a1);
    text-align: center;
    line-height: 1.5;
}

.ds_effet_corps
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 22px 22px;
    flex: 1;
}

.ds_effet_titre
{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--encre, #ffffff);
}

.ds_effet_ico
{
    color: var(--accent, #2563eb);
}

.ds_effet_desc
{
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--encre_second, #c4c9d4);
}

.ds_effet_regle
{
    margin: auto 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--ligne, rgba(255, 255, 255, 0.08));
    font-size: 0.72rem;
    color: var(--encre_attenuee, #8b93a1);
}

/* Échantillon du fond animé */
.ds_effet_fond_echantillon
{
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg,
        color-mix(in srgb, var(--accent, #2563eb) 22%, transparent),
        transparent 45%,
        color-mix(in srgb, var(--accent, #2563eb) 14%, transparent) 75%,
        transparent);
    background-size: 220% 220%;
}

/* Scène de parallaxe : trois plans aux amplitudes différentes */
.ds_plx_scene
{
    position: relative;
    width: 180px;
    height: 96px;
}

.ds_plx_plan
{
    position: absolute;
    border-radius: 2px;
}

.ds_plx_plan_fond
{
    inset: 0;
    background: color-mix(in srgb, var(--accent, #2563eb) 12%, transparent);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
}

.ds_plx_plan_carte
{
    left: 26px;
    top: 16px;
    width: 96px;
    height: 58px;
    background-color: var(--fond_second, #15181e);
    background-image: var(--satin, none);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.12));
}

.ds_plx_plan_bouton
{
    left: 96px;
    top: 56px;
    width: 60px;
    height: 20px;
    background-color: var(--accent, #2563eb);
    background-image: var(--satin_accent, none);
}

html.parallaxe_active .ds_plx_plan_fond
{
    translate: calc( var(--plx_x, 0) * -10px ) calc( var(--plx_y, 0) * -8px );
}

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

html.parallaxe_active .ds_plx_plan_bouton
{
    translate: calc( var(--plx_x, 0) * 12px ) calc( var(--plx_y, 0) * 9px );
}

/* Aplat comparé au satiné */
.ds_satin_duo
{
    display: flex;
    gap: 12px;
}

.ds_satin_echantillon
{
    width: 96px;
    height: 64px;
    display: flex;
    align-items: flex-end;
    padding: 8px;
    border-radius: 2px;
    background-color: var(--accent, #2563eb);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
}

.ds_satin_satine
{
    background-image: var(--satin_accent, none);
}

.ds_effet_pastilles .theme_tab_pastille
{
    width: 40px;
    height: 40px;
}

@media (prefers-reduced-motion: no-preference)
{
    .ds_effet_fond_echantillon
    {
        animation: ds_effet_derive 14s ease-in-out infinite alternate;
    }
}

@keyframes ds_effet_derive
{
    from
    {
        background-position: 0% 30%;
    }
    to
    {
        background-position: 100% 70%;
    }
}

@media (max-width: 1024px)
{
    .ds_effets_grille
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px)
{
    .ds_effets_grille
    {
        grid-template-columns: 1fr;
    }
}
/* 8. EFFETS_MATIERES ================================================== */

/* 9. TEXTURES_ABSTRAITES ============================================== */
.ds_texture_banc_essai
{
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--surface_carte, #0f1115);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    border-radius: var(--rayon_m, 4px);
    padding: clamp(20px, 3vw, 36px);
    box-shadow: var(--ombre, 0 12px 32px rgba(0, 0, 0, 0.25));
}

.ds_texture_banc_commandes
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
}

.ds_texture_selecteur_groupe
{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ds_texture_label_controle
{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--texte_xs, 0.75rem);
    color: var(--encre_second, #8a8f98);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ds_texture_boutons_liste
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ds_texture_btn_choix
{
    padding: 8px 14px;
    font-family: var(--police_texte, -apple-system, sans-serif);
    font-size: var(--texte_xs, 0.8rem);
    font-weight: 500;
    color: var(--encre_second, #8a8f98);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    border-radius: var(--rayon_p, 2px);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ds_texture_btn_choix:hover
{
    color: var(--encre, #ffffff);
    border-color: var(--accent, #2563eb);
    background: rgba(37, 99, 235, 0.08);
}

.ds_texture_btn_choix.actif
{
    color: var(--accent_texte, #ffffff);
    background: var(--accent, #2563eb);
    border-color: var(--accent, #2563eb);
    box-shadow: 0 0 16px var(--accent_halo, rgba(37, 99, 235, 0.3));
}

.ds_texture_opacite_groupe
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 220px;
}

.ds_valeur_pill
{
    display: inline-block;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    color: var(--accent, #2563eb);
    font-weight: 600;
}

.ds_curseur_range
{
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--ligne_forte, rgba(255, 255, 255, 0.15));
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ds_curseur_range::-webkit-slider-thumb
{
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent, #2563eb);
    box-shadow: 0 0 10px var(--accent_halo, rgba(37, 99, 235, 0.5));
    border: 2px solid #ffffff;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.ds_curseur_range::-webkit-slider-thumb:hover
{
    transform: scale(1.15);
}

.ds_curseur_range::-moz-range-thumb
{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent, #2563eb);
    box-shadow: 0 0 10px var(--accent_halo, rgba(37, 99, 235, 0.5));
    border: 2px solid #ffffff;
    cursor: pointer;
}

.ds_texture_actions_groupe
{
    display: flex;
    align-items: center;
}

.ds_texture_apercu_scene
{
    position: relative;
    min-height: 280px;
    border-radius: var(--rayon_m, 4px);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 4vw, 48px);
    background: var(--fond, #08090a);
}

.ds_texture_apercu_calque
{
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.20;
    mix-blend-mode: screen;
    filter: contrast(1.1) brightness(0.95);
    transition: opacity 0.3s ease, filter 0.3s ease, background-image 0.4s ease;
    will-change: translate, opacity;
}

html.bright_mode .ds_texture_apercu_calque
{
    mix-blend-mode: multiply;
    filter: invert(1) contrast(1.15) brightness(1.05);
}

html.parallaxe_active .ds_texture_apercu_calque
{
    translate: calc( var(--plx_x, 0) * -16px ) calc( var(--plx_y, 0) * -12px );
}

.ds_texture_apercu_contenu
{
    position: relative;
    z-index: 1;
    max-width: 680px;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--ligne_forte, rgba(255, 255, 255, 0.12));
    border-radius: var(--rayon_m, 4px);
    padding: clamp(24px, 3vw, 36px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.ds_texture_apercu_badge
{
    font-size: var(--texte_xs, 0.75rem);
    color: var(--accent, #2563eb);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ds_texture_apercu_titre
{
    font-family: var(--police_titres, 'Syne', sans-serif);
    font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--encre, #ffffff);
    margin: 0;
}

.ds_texture_apercu_paragraphe
{
    font-size: var(--texte_s, 0.92rem);
    line-height: 1.6;
    color: var(--encre_second, #a0a6b1);
    margin: 0;
}

.ds_texture_apercu_footer
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
}

.ds_texture_apercu_note
{
    font-size: 0.72rem;
    color: var(--encre_attenuee, #6e7683);
}

.ds_texture_apercu_pastille_mode
{
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 0.7rem;
    color: var(--succes, #10b981);
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: var(--rayon_p, 2px);
}

/* GRILLE DES CARTES DE TEXTURES */
.ds_textures_grille
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.ds_texture_carte
{
    display: flex;
    flex-direction: column;
    background: var(--surface_carte, #0f1115);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.08));
    border-radius: var(--rayon_m, 4px);
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.ds_texture_carte:hover
{
    transform: translateY(-4px);
    border-color: var(--accent, #2563eb);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

.ds_texture_vignette_cadre
{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
    overflow: hidden;
}

.ds_texture_vignette_img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.ds_texture_carte:hover .ds_texture_vignette_img
{
    transform: scale(1.04);
}

.ds_texture_poids_badge
{
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 3px 8px;
    font-size: 0.7rem;
    font-weight: 500;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--rayon_p, 2px);
}

.ds_badge_plume
{
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.4);
}

.ds_texture_corps
{
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.ds_texture_numero
{
    font-size: 0.72rem;
    color: var(--accent, #2563eb);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ds_texture_titre
{
    font-family: var(--police_titres, 'Syne', sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--encre, #ffffff);
    margin: 0;
    line-height: 1.3;
}

.ds_texture_desc
{
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--encre_second, #8a8f98);
    margin: 0;
    flex: 1;
}

.ds_texture_meta_specs
{
    padding: 8px 0;
    border-top: 1px solid var(--ligne, rgba(255, 255, 255, 0.06));
}

.ds_texture_spec_item
{
    font-size: 0.72rem;
    color: var(--encre_attenuee, #717885);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ds_texture_btn_tester
{
    margin-top: 4px;
    width: 100%;
    padding: 10px 16px;
    font-family: var(--police_texte, -apple-system, sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--encre, #ffffff);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--ligne, rgba(255, 255, 255, 0.1));
    border-radius: var(--rayon_p, 2px);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.ds_texture_btn_tester:hover
{
    background: var(--accent, #2563eb);
    color: var(--accent_texte, #ffffff);
    border-color: var(--accent, #2563eb);
    box-shadow: 0 0 16px var(--accent_halo, rgba(37, 99, 235, 0.3));
}

@media (max-width: 1024px)
{
    .ds_textures_grille
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px)
{
    .ds_textures_grille
    {
        grid-template-columns: 1fr;
    }

    .ds_texture_banc_commandes
    {
        flex-direction: column;
        align-items: stretch;
    }

    .ds_texture_opacite_groupe
    {
        min-width: 100%;
    }
}
/* 9. TEXTURES_ABSTRAITES ============================================== */