/*
 * VARIABLES DE DESIGN - NSFW-CREATOR
 *
 * Ce fichier sert de panneau de reglage rapide.
 * L'objectif est de pouvoir ajuster les grandes lignes visuelles
 * sans devoir replonger dans style.css.
 *
 * Priorite de cette premiere version :
 * - ambiance generale
 * - hero
 * - video/image de hero
 * - largeurs, espacements, titres, CTA
 */

:root {
    /* ========================================
       REGLAGES RAPIDES - A TOUCHER EN PREMIER
       ========================================

       Cette zone regroupe les variables que tu vas
       probablement modifier le plus souvent.

       Le reste du fichier conserve les reglages fins.
       Si un ajustement ici ne suffit pas, va chercher
       la variable detaillee correspondante plus bas.
    */

    /* Palette generale */
    --brand-night: #100020; /* Bleu nuit extrait du logo */
    --brand-deep: #101030; /* Bleu profond extrait du logo */
    --brand-blue: #315cff; /* Bleu electrique du logo */
    --brand-indigo: #6a4cff; /* Indigo principal du logo */
    --brand-violet: #8f39ef; /* Violet intermediaire du logo */
    --brand-mauve: #d61b84; /* Rose-violet sombre proche du logo */

    --quick-accent: var(--brand-indigo); /* Couleur principale des CTA et accents */
    --quick-text-color: #f3efff; /* Couleur du texte principal */

    /* Mise en page globale */
    --quick-page-width: 1180px; /* Largeur max du contenu */
    --quick-page-gutter: 20px; /* Marge laterale desktop */
    --quick-page-gutter-mobile: 14px; /* Marge laterale mobile */
    --quick-section-pad: 86px; /* Espace vertical standard des sections */
    --quick-section-pad-mobile: 58px; /* Espace vertical standard mobile */
    --quick-radius: 8px; /* Arrondi standard general */
    --quick-section-sticky-top: 82px; /* Position sticky de la colonne gauche */
    --quick-section-tagline-row-gap: 22px; /* Espace entre la tagline seule et la ligne titre/contenu */

    /* Hero - titre, lead, media */
    --quick-hero-min-height: 92vh; /* Hauteur minimale du hero */
    --quick-hero-content-padding-top: 82px; /* Espace symetrique pour centrer le contenu hero */
    --quick-hero-content-padding-bottom: 82px; /* Espace sous le contenu hero */
    --quick-hero-title-max-width: 760px; /* Largeur max du grand titre */
    --quick-hero-title-size: 5rem; /* Taille du grand titre desktop */
    --quick-hero-title-size-tablet: 3.8rem; /* Taille du grand titre tablette */
    --quick-hero-title-size-mobile: 3rem; /* Taille du grand titre mobile */
    --quick-hero-lead-size: 1.1rem; /* Taille du texte sous le titre */
    --quick-hero-media-position: center center; /* Cadrage de la video/image hero */
    --quick-hero-media-filter: saturate(0.92) contrast(1.04) brightness(1.1); /* Reglage rapide luminosite / contraste */

    /* Tagline hero - a regler ici si elle est peu lisible */
    --quick-hero-tagline-text: #f5f3f3ef; /* Couleur du texte de la tagline hero */
    --quick-hero-tagline-bg: linear-gradient(135deg, var(--brand-blue), var(--brand-indigo) 52%, var(--brand-mauve)); /* Fond de la tagline hero */
    --quick-hero-tagline-border: 1px solid rgba(214, 27, 132, 0.34); /* Bordure de la tagline hero */
    --quick-hero-tagline-radius-left: 0px; /* Pas d'arrondi a gauche pour aligner le texte */
    --quick-hero-tagline-radius-right: 4px; /* Arrondi a droite de la tagline hero */
    --quick-hero-tagline-padding-y: 8px; /* Padding vertical de la tagline hero */
    --quick-hero-tagline-padding-right: 12px; /* Padding a droite de la tagline hero */
    --quick-hero-tagline-padding-left: 0.4rem; /* Padding a gauche de la tagline hero */

    /* Vignette et voile hero */
    --quick-hero-vignette-clear-stop: 42%; /* Fin de la zone centrale peu assombrie */
    --quick-hero-vignette-soft-stop: 70%; /* Debut du fondu de vignette */
    --quick-hero-vignette-soft-alpha: 0.18; /* Intensite moyenne de la vignette */
    --quick-hero-vignette-edge-alpha: 0.62; /* Intensite de la vignette sur les bords */
    --quick-hero-shade:
        linear-gradient(90deg, rgba(5, 5, 5, 0.84) 0%, rgba(5, 5, 5, 0.04) 28%, rgba(5, 5, 5, 0.25) 100%),
        linear-gradient(180deg, rgba(5, 5, 5, 0.28) 100%, rgba(5, 5, 5, 0.45) 100%); /* Voile principal du hero */

    /* Taglines de section - colonne gauche */
    --quick-section-tagline-text: #ec4ca8; /* Couleur du texte des taglines de section */
    --quick-section-tagline-bg: rgba(106, 76, 255, 0.12); /* Fond des taglines de section */
    
    /*--quick-section-tagline-border: 1px solid rgba(214, 27, 132, 0.3); /* Bordure des taglines de section */
    --quick-section-tagline-border-width: 1px 1px 1px 0; /* Bordure des taglines de section : haut droite bas gauche */
   --quick-section-tagline-border-style: solid;
   --quick-section-tagline-border-color: rgba(214, 27, 132, 0.3);
    --quick-section-tagline-radius-left: 0; /* Pas d'arrondi a gauche pour aligner le texte */
    --quick-section-tagline-radius-right: 999px; /* Arrondi a droite des taglines de section */
    --quick-section-tagline-padding-y: 7px; /* Padding vertical des taglines de section */
    --quick-section-tagline-padding-right: 12px; /* Padding a droite des taglines de section */
    --quick-section-tagline-padding-left: 0; /* Padding a gauche des taglines de section */

    /* Surlignage {{...}} */
    --quick-highlight-text: var(--quick-text-color); /* Couleur du texte surligne */
    --quick-highlight-bg: rgba(106, 76, 255, 0.16); /* Fond du surlignage {{...}} */
    --quick-highlight-border: rgba(214, 27, 132, 0.72); /* Bordure basse du surlignage {{...}} */

    /* Barre sous le hero */
    --quick-intro-band-bg: rgba(255, 255, 255, 0.025); /* Fond de la barre sous le hero */
    --quick-intro-band-chip-bg: rgba(255, 255, 255, 0.045); /* Fond des chips sous le hero */
    --quick-intro-band-chip-border: 1px solid rgba(255, 255, 255, 0.08); /* Bordure des chips sous le hero */
    --quick-intro-band-chip-radius: 999px; /* Arrondi des chips sous le hero */

    /* CTA "Verifier la config" selon l'etat du test */
    --quick-config-cta-untested-bg: #f8f8f8c7; /* CTA config avant test */
    --quick-config-cta-untested-border: var(--brand-indigo); /* Bordure CTA config avant test */
    --quick-config-cta-untested-text: var(--brand-indigo); /* Texte CTA config avant test */
    --quick-config-cta-green-bg: #1f6b43; /* CTA config quand le test est vert */
    --quick-config-cta-green-border: #2f8c5a; /* Bordure CTA config vert */
    --quick-config-cta-green-text: #ffffff; /* Texte CTA config vert */
    --quick-config-cta-orange-bg: #7a4c12; /* CTA config quand le test est orange */
    --quick-config-cta-orange-border: #c67b1e; /* Bordure CTA config orange */
    --quick-config-cta-orange-text: #fff4e7; /* Texte CTA config orange */
    --quick-config-cta-red-bg: #6b2522; /* CTA config quand le test est rouge */
    --quick-config-cta-red-border: #c4524c; /* Bordure CTA config rouge */
    --quick-config-cta-red-text: #fff1f0; /* Texte CTA config rouge */

    /* ========================================
       FONDATION - COULEURS ET TYPO
       ======================================== */

    --bg: #070716; /* Fond principal de la page */
    --bg-soft: #0d0b22; /* Variante de fond un peu plus douce */
    --surface: rgba(17, 15, 36, 0.84); /* Fond translucide des blocs */
    --surface-solid: #111124; /* Fond plein des cartes foncees */
    --surface-elevated: #171531; /* Fond d'un bloc plus "releve" visuellement */

    --text: var(--quick-text-color); /* Couleur principale du texte */
    --muted: #b9b0d4; /* Texte secondaire */
    --muted-strong: #ddd6ef; /* Texte secondaire plus lisible */

    --line: rgba(180, 168, 255, 0.14); /* Bordure ou separation legere */
    --line-strong: rgba(180, 168, 255, 0.28); /* Bordure plus visible */

    --accent: var(--quick-accent); /* Couleur d'accent principale */
    --accent-strong: #ec1b92; /* Accent plus lumineux */
    --success: #55d083; /* Etat positif */
    --warning: #e7a746; /* Etat d'alerte */
    --danger: #ef665e; /* Etat critique */

    --font-body: "Manrope", "Segoe UI", sans-serif; /* Police du texte courant */
    --font-display: "Instrument Serif", Georgia, serif; /* Police des grands titres */

    --weight-normal: 400; /* Graisse normale */
    --weight-medium: 500; /* Graisse intermediaire */
    --weight-bold: 700; /* Graisse forte */
    --weight-black: 800; /* Graisse tres forte */


    /* ========================================
       MISE EN PAGE GLOBALE
       ======================================== */

    --page-width: var(--quick-page-width); /* Largeur max du contenu */
    --page-gutter: var(--quick-page-gutter); /* Marge laterale desktop */
    --page-gutter-mobile: var(--quick-page-gutter-mobile); /* Marge laterale mobile */

    --section-pad: var(--quick-section-pad); /* Espace vertical standard d'une section */
    --section-pad-mobile: var(--quick-section-pad-mobile); /* Espace vertical standard sur mobile */
    --section-border: 1px solid var(--line); /* Trait de separation entre sections */

    --section-columns: minmax(260px, 0.38fr) minmax(0, 0.62fr); /* Colonnes titre/contenu */
    --section-gap: 64px; /* Ecart entre les 2 colonnes */
    --section-gap-tablet: 34px; /* Ecart reduit sur tablette */
    --section-tagline-row-gap: var(--quick-section-tagline-row-gap); /* Espace vertical entre la ligne tagline et la ligne titre/contenu */
    --section-body-gap: 24px; /* Espace entre les blocs internes */
    --section-sticky-top: var(--quick-section-sticky-top); /* Position sticky du titre de section */
    --section-background-art-width: 86%; /* Largeur percue de l'illustration d'ambiance */
    --section-background-art-position: left center; /* Point d'ancrage de l'illustration */
    --section-background-art-opacity: 0.16; /* Visibilite globale de l'illustration */
    --section-background-art-blend-mode: screen; /* Mode de fusion pour la rendre discrete */
    --section-background-art-blur: 2px; /* Flou d'integration */
    --section-background-art-saturate: 0.7; /* Saturation reduite pour ne pas voler l'attention */
    --section-background-art-scale: 1; /* Zoom de base */
    --section-background-art-shift-x: 0px; /* Decalage horizontal */
    --section-background-art-offset-top: 18px; /* Espace sous le sous-titre avant l'illustration */

    --radius-small: 6px; /* Petit arrondi */
    --radius: var(--quick-radius); /* Arrondi standard */
    --radius-large: 18px; /* Grand arrondi */

    --shadow: 0 24px 70px rgba(0, 0, 0, 0.44); /* Ombre forte */
    --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.26); /* Ombre plus douce */

    /* Medias floutes */
    --media-blur-default: 18px; /* Intensite de blur par defaut */
    --media-blur-scale: 1.02; /* Leger zoom pour eviter les bords nets */
    --media-blur-toggle-left: 12px; /* Position gauche pour image simple */
    --media-blur-toggle-bottom: 12px; /* Position basse pour image simple */
    --media-blur-toggle-group-bottom: 12px; /* Position basse pour grille/carrousel */
    --media-blur-toggle-z: 3; /* Priorite visuelle du bouton */
    --media-blur-toggle-offset-top: 10px; /* Decalage au-dessous d'une image simple */
    --media-blur-toggle-group-offset-top: 12px; /* Decalage au-dessous d'une grille/carrousel */
    --media-blur-toggle-min-height: 32px; /* Hauteur mini du bouton */
    --media-blur-toggle-padding-y: 7px; /* Padding vertical du bouton */
    --media-blur-toggle-padding-x: 12px; /* Padding horizontal du bouton */
    --media-blur-toggle-radius: 999px; /* Arrondi du bouton */
    --media-blur-toggle-border: 1px solid rgba(255, 255, 255, 0.16); /* Bordure du bouton */
    --media-blur-toggle-bg: rgba(24, 26, 32, 0.76); /* Fond du bouton */
    --media-blur-toggle-color: #f5f3ef; /* Couleur du texte */
    --media-blur-toggle-font-size: 0.92rem; /* Taille du texte */
    --media-blur-toggle-font-weight: 600; /* Graisse du texte */
    --media-blur-toggle-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); /* Ombre du bouton */
    --media-blur-toggle-backdrop-blur: 8px; /* Flou du fond du bouton */

    --page-grid-size: 64px; /* Taille de la grille de fond */
    --page-background-art:
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px), /* Lignes verticales du fond */
        linear-gradient(180deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px), /* Lignes horizontales du fond */
        radial-gradient(circle at 12% 8%, rgba(49, 92, 255, 0.12), transparent 32%),
        radial-gradient(circle at 86% 18%, rgba(214, 27, 132, 0.12), transparent 30%),
        linear-gradient(180deg, #070716 0%, #0d0a22 54%, #070716 100%); /* Degrade global du fond */


    /* ========================================
       TOPBAR
       ======================================== */

    --topbar-padding-y: 18px; /* Padding vertical de la barre haute */
    --topbar-padding-x: 28px; /* Padding horizontal de la barre haute */
    --topbar-padding-y-mobile: 14px; /* Padding vertical mobile */
    --topbar-padding-x-mobile: 16px; /* Padding horizontal mobile */
    --topbar-background: linear-gradient(180deg, rgba(5, 5, 5, 0.88), rgba(5, 5, 5, 0)); /* Fond degrade de la topbar */

    --brand-color: var(--text); /* Couleur du nom de marque */
    --brand-size: 0.88rem; /* Taille du nom de marque */
    --brand-weight: var(--weight-black); /* Graisse du nom de marque */
    --brand-letter-spacing: 0.04em; /* Espacement des lettres du nom */

    --language-switch-gap: 6px; /* Ecart entre FR et EN */
    --language-switch-padding: 4px; /* Padding du bloc de switch langue */
    --language-switch-radius: var(--radius); /* Arrondi du bloc de switch langue */
    --language-switch-link-padding-y: 8px; /* Padding vertical d'un bouton langue */
    --language-switch-link-padding-x: 10px; /* Padding horizontal d'un bouton langue */
    --language-switch-link-radius: var(--radius-small); /* Arrondi d'un bouton langue */
    --language-switch-link-size: 0.78rem; /* Taille du texte FR/EN */


    /* ========================================
       HERO - STRUCTURE
       ======================================== */

    --hero-min-height: var(--quick-hero-min-height); /* Hauteur minimale du hero sur grand ecran */
    --hero-min-height-tablet: 86vh; /* Hauteur minimale du hero sur tablette */
    --hero-border: 1px solid var(--line); /* Trait sous le hero */

    --hero-content-width: var(--page-width); /* Largeur max du contenu texte du hero */
    --hero-content-padding-top: var(--quick-hero-content-padding-top); /* Espace au-dessus du contenu hero */
    --hero-content-padding-bottom: var(--quick-hero-content-padding-bottom); /* Espace sous le contenu hero */
    --hero-content-padding-top-mobile: 54px; /* Padding symetrique pour centrer le contenu hero sur mobile */
    --hero-content-padding-bottom-mobile: 54px; /* Espace bas du hero sur mobile */

    --hero-kicker-color: var(--quick-hero-tagline-text); /* Couleur du petit label au-dessus du titre */
    --hero-kicker-size: 0.76rem; /* Taille du kicker hero */
    --hero-kicker-spacing: 0.16em; /* Espacement des lettres du kicker */
    --hero-kicker-gap: 14px; /* Espace sous le kicker */
    --hero-kicker-padding: var(--quick-hero-tagline-padding-y) var(--quick-hero-tagline-padding-right) var(--quick-hero-tagline-padding-y) var(--quick-hero-tagline-padding-left); /* Padding du fond de la tagline hero */
    --hero-kicker-bg: var(--quick-hero-tagline-bg); /* Fond de la tagline hero */
    --hero-kicker-border: var(--quick-hero-tagline-border); /* Bordure de la tagline hero */
    --hero-kicker-radius-left: var(--quick-hero-tagline-radius-left); /* Arrondi gauche de la tagline hero */
    --hero-kicker-radius-right: var(--quick-hero-tagline-radius-right); /* Arrondi droit de la tagline hero */
    --hero-kicker-radius: var(--hero-kicker-radius-left) var(--hero-kicker-radius-right) var(--hero-kicker-radius-right) var(--hero-kicker-radius-left); /* Arrondi complet de la tagline hero */
    --hero-kicker-shadow: none; /* Ombre de la tagline hero */

    --hero-title-color: var(--text); /* Couleur du grand titre hero */
    --hero-title-max-width: var(--quick-hero-title-max-width); /* Largeur max du grand titre */
    --hero-title-size: var(--quick-hero-title-size); /* Taille du grand titre desktop */
    --hero-title-size-tablet: var(--quick-hero-title-size-tablet); /* Taille du grand titre tablette */
    --hero-title-size-mobile: var(--quick-hero-title-size-mobile); /* Taille du grand titre mobile */
    --hero-title-line-height: 0.95; /* Interligne du grand titre */
    --hero-title-letter-spacing: 0; /* Approche des lettres du grand titre */

    --hero-lead-color: var(--muted-strong); /* Couleur du texte secondaire sous le titre */
    --hero-lead-max-width: 660px; /* Largeur max du lead */
    --hero-lead-size: var(--quick-hero-lead-size); /* Taille du lead desktop */
    --hero-lead-size-mobile: 1rem; /* Taille du lead mobile */
    --hero-lead-line-height: 1.7; /* Interligne du lead */
    --hero-lead-margin-top: 24px; /* Espace au-dessus du lead */

    --cta-gap: 12px; /* Ecart entre les boutons CTA */
    --cta-margin-top: 30px; /* Espace entre le lead et les CTA */


    /* ========================================
       HERO - MEDIA / VIDEO
       ======================================== */

    --hero-media-opacity: 1; /* Opacite globale de la video/image hero */
    --hero-media-scale: 1; /* Zoom de la video/image hero */
    --hero-media-position: var(--quick-hero-media-position); /* Point de cadrage de la video/image */
    --hero-media-filter: var(--quick-hero-media-filter); /* Reglage colorimetrique rapide du media hero */

    /*
     * Vignette :
     * - clear-stop : zone centrale encore peu assombrie
     * - soft-stop  : debut du fondu visible
     * - edge-stop  : bord du hero
     * - soft-alpha / edge-alpha : intensite du noir
     */
    --hero-vignette-shape: ellipse at center; /* Forme et point focal de la vignette */
    --hero-vignette-clear-stop: var(--quick-hero-vignette-clear-stop); /* Fin de la zone centrale encore claire */
    --hero-vignette-soft-stop: var(--quick-hero-vignette-soft-stop); /* Debut du bord plus assombri */
    --hero-vignette-edge-stop: 100%; /* Bord externe de la vignette */
    --hero-vignette-soft-alpha: var(--quick-hero-vignette-soft-alpha); /* Intensite intermediaire de la vignette */
    --hero-vignette-edge-alpha: var(--quick-hero-vignette-edge-alpha); /* Intensite sur les bords */
    --hero-vignette:
        radial-gradient(
            var(--hero-vignette-shape),
            rgba(5, 5, 5, 0) var(--hero-vignette-clear-stop),
            rgba(5, 5, 5, var(--hero-vignette-soft-alpha)) var(--hero-vignette-soft-stop),
            rgba(5, 5, 5, var(--hero-vignette-edge-alpha)) var(--hero-vignette-edge-stop)
        ); /* Vignette complete appliquee par-dessus le media */

    --hero-shade: var(--quick-hero-shade); /* Voile principal du hero */


    /* ========================================
       TYPOGRAPHIE GENERALE
       ======================================== */

    --section-kicker-size: 0.76rem; /* Taille du petit label de section */
    --section-kicker-spacing: 0.16em; /* Espacement des lettres du label */
    --section-tagline-size: 0.82rem; /* Taille de la tagline de section, a gauche */
    --section-tagline-spacing: 0.06em; /* Espacement des lettres de la tagline */
    --section-tagline-line-height: 1.45; /* Interligne de la tagline */
    --section-tagline-color: var(--quick-section-tagline-text); /* Couleur de la tagline de section */
    --section-tagline-padding: var(--quick-section-tagline-padding-y) var(--quick-section-tagline-padding-right) var(--quick-section-tagline-padding-y) var(--quick-section-tagline-padding-left); /* Padding de la capsule tagline */
    --section-tagline-bg: var(--quick-section-tagline-bg); /* Fond de la tagline */
    
    --section-tagline-border-width: var(--quick-section-tagline-border-width);
   --section-tagline-border-style: var(--quick-section-tagline-border-style);
   --section-tagline-border-color: var(--quick-section-tagline-border-color);
    /*--section-tagline-border: var(--quick-section-tagline-border); /* Bordure de la tagline */
    --section-tagline-radius-left: var(--quick-section-tagline-radius-left); /* Arrondi gauche de la tagline */
    --section-tagline-radius-right: var(--quick-section-tagline-radius-right); /* Arrondi droit de la tagline */
    --section-tagline-radius: var(--section-tagline-radius-left) var(--section-tagline-radius-right) var(--section-tagline-radius-right) var(--section-tagline-radius-left); /* Arrondi de la capsule tagline */
    --section-tagline-shadow: none; /* Ombre de la tagline */
    --section-title-size: 3rem; /* Taille du titre de section */
    --section-title-size-mobile: 2.25rem; /* Taille du titre sur mobile */
    --section-title-line-height: 1; /* Interligne du titre de section */
    --section-subtitle-margin-top: 18px; /* Espace entre titre et sous-titre de section */
    --section-subtitle-size: 0.98rem; /* Taille du sous-titre de section */
    --section-subtitle-line-height: 1.55; /* Interligne du sous-titre de section */
    --section-subtitle-color: var(--muted-strong); /* Couleur du sous-titre de section */
    --section-subheading-size: 1.06rem; /* Taille des sous-titres internes dans le corps */

    --body-text-size: 1rem; /* Taille du texte courant */
    --body-text-line-height: 1.7; /* Interligne du texte courant */
    --body-text-color: var(--muted); /* Couleur du texte courant */


    /* ========================================
       CTA ET CONTROLES
       ======================================== */

    --button-height: 48px; /* Hauteur minimale d'un bouton */
    --button-padding-y: 12px; /* Padding vertical des boutons */
    --button-padding-x: 18px; /* Padding horizontal des boutons */
    --button-radius: var(--radius); /* Arrondi des boutons */
    --button-weight: var(--weight-black); /* Graisse du texte des boutons */
    --config-cta-untested-bg: var(--quick-config-cta-untested-bg); /* Fond CTA config avant test */
    --config-cta-untested-border: var(--quick-config-cta-untested-border); /* Bordure CTA config avant test */
    --config-cta-untested-text: var(--quick-config-cta-untested-text); /* Texte CTA config avant test */
    --config-cta-green-bg: var(--quick-config-cta-green-bg); /* Fond CTA config vert */
    --config-cta-green-border: var(--quick-config-cta-green-border); /* Bordure CTA config vert */
    --config-cta-green-text: var(--quick-config-cta-green-text); /* Texte CTA config vert */
    --config-cta-orange-bg: var(--quick-config-cta-orange-bg); /* Fond CTA config orange */
    --config-cta-orange-border: var(--quick-config-cta-orange-border); /* Bordure CTA config orange */
    --config-cta-orange-text: var(--quick-config-cta-orange-text); /* Texte CTA config orange */
    --config-cta-red-bg: var(--quick-config-cta-red-bg); /* Fond CTA config rouge */
    --config-cta-red-border: var(--quick-config-cta-red-border); /* Bordure CTA config rouge */
    --config-cta-red-text: var(--quick-config-cta-red-text); /* Texte CTA config rouge */

    --control-height: 44px; /* Hauteur d'un champ de formulaire */
    --control-radius: var(--radius); /* Arrondi d'un champ */
    --control-bg: #080808; /* Fond d'un champ de formulaire */


    /* ========================================
       BLOCS CONTENU / MEDIA
       ======================================== */

    --intro-band-bg: var(--quick-intro-band-bg); /* Fond du bandeau sous le hero */
    --intro-band-border-top: 1px solid rgba(255, 255, 255, 0.04); /* Bordure haute du bandeau */
    --intro-band-gap: 14px; /* Ecart entre les items du bandeau */
    --intro-band-padding-y: 18px; /* Padding vertical du bandeau */
    --intro-band-text-color: var(--muted-strong); /* Couleur du texte du bandeau */
    --intro-band-text-size: 0.78rem; /* Taille du texte du bandeau */
    --intro-band-text-weight: var(--weight-black); /* Graisse du texte du bandeau */
    --intro-band-text-spacing: 0.08em; /* Espacement des lettres du bandeau */
    --intro-band-chip-padding: 8px 12px; /* Padding d'un item du bandeau */
    --intro-band-chip-radius: var(--quick-intro-band-chip-radius); /* Arrondi des items du bandeau */
    --intro-band-chip-bg: var(--quick-intro-band-chip-bg); /* Fond d'un item du bandeau */
    --intro-band-chip-border: var(--quick-intro-band-chip-border); /* Bordure d'un item du bandeau */
    --intro-band-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); /* Relief leger d'un item du bandeau */

    --accent-block-padding: 22px; /* Padding interne d'un bloc accentue */
    --accent-block-border: rgba(214, 27, 132, 0.42); /* Couleur de bordure du bloc accentue */
    --accent-block-shadow: var(--shadow); /* Ombre du bloc accentue */
    --md-bg-info: rgba(80, 140, 255, 0.08); /* Fond info pour [[info]] */
    --md-bg-warning: rgba(231, 167, 70, 0.1); /* Fond warning pour [[warning]] */
    --md-bg-success: rgba(85, 208, 131, 0.1); /* Fond success pour [[success]] */
    --md-bg-accent: rgba(106, 76, 255, 0.1); /* Fond accent pour [[accent]] */
    --md-bg-neutral-border: rgba(255, 255, 255, 0.08); /* Bordure generique des blocs de fond */
    --highlight-bg: var(--quick-highlight-bg); /* Fond de surlignage {{...}} */
    --highlight-border: var(--quick-highlight-border); /* Bordure basse de surlignage {{...}} */
    --highlight-text-color: var(--quick-highlight-text); /* Couleur du texte surligne */

    --media-border: 1px solid var(--line); /* Bordure des images et videos */
    --media-radius: var(--radius); /* Arrondi des images et videos */
    --media-bg: #111; /* Fond de secours derriere un media */
    --media-caption-size: 0.9rem; /* Taille de legende */
    --media-caption-color: var(--muted); /* Couleur de legende */

    --carousel-gap: 14px; /* Ecart entre les slides */
    --carousel-slide-min: min(78vw, 520px); /* Largeur mini d'une slide sur grand ecran */
    --carousel-slide-min-mobile: 84vw; /* Largeur mini d'une slide sur mobile */
    --carousel-action-padding-y: 9px; /* Padding vertical des boutons du carousel */
    --carousel-action-padding-x: 12px; /* Padding horizontal des boutons du carousel */
    --media-grid-gap: 14px; /* Ecart entre les images d'une grille */
    --media-grid-min-card: 220px; /* Largeur mini d'une carte en grille auto */
    --media-grid-caption-gap: 10px; /* Espace entre image et legende en grille */
    --text-list-gap: 12px; /* Ecart entre les items de liste */
    --text-list-item-padding: 15px 16px 15px 44px; /* Padding d'un item de liste */
    --text-list-item-bg: rgba(255, 255, 255, 0.03); /* Fond d'un item de liste */
    --text-list-item-border: 1px solid rgba(255, 255, 255, 0.09); /* Bordure d'un item de liste */
    --text-list-marker-size: 8px; /* Taille du point de repere des listes */
    --text-list-marker-left: 18px; /* Position horizontale du point de repere */
    --text-list-marker-color: var(--accent-strong); /* Couleur du point de repere des listes */
    --faq-gap: 12px; /* Ecart entre les questions de FAQ */
    --faq-question-padding: 16px 52px 16px 16px; /* Padding du bandeau question */
    --faq-question-size: 0.98rem; /* Taille du texte question */
    --faq-answer-padding-x: 16px; /* Padding horizontal de la reponse */
    --faq-answer-padding-bottom: 16px; /* Padding bas de la reponse */
    --faq-icon-right: 16px; /* Position droite du signe + / - */
    --faq-icon-size: 1.2rem; /* Taille du signe + / - */
    --faq-icon-color: var(--muted); /* Couleur du signe + / - */


    /* ========================================
       OFFRE
       ======================================== */

    --offer-section-bg: #090818; /* Fond de la section offre */
    --offer-columns: 1fr; /* Structure generale de la section offre */
    --offer-gap: 28px; /* Ecart entre intro de section et cartes */
    --offer-heading-width: 920px; /* Largeur max du texte d'intro de la section offre */
    --offer-list-columns: repeat(2, minmax(0, 1fr)); /* Colonnes automatiques des cartes d'offre */
    --offer-list-gap: 18px; /* Ecart entre les cartes d'offre */
    --offer-card-gap: 14px; /* Ecart vertical interne d'une carte */
    --offer-card-padding: 18px 18px; /* Padding principal d'une carte */
    --offer-card-bg: linear-gradient(180deg, rgba(14, 13, 34, 0.96), rgba(7, 7, 22, 0.98)); /* Fond d'une carte disponible */
    --offer-card-muted-bg: rgba(15, 14, 30, 0.76); /* Fond d'une carte non disponible */
    --offer-card-border: 1px solid rgba(214, 27, 132, 0.34); /* Bordure d'une carte disponible */
    --offer-card-muted-border: 1px solid var(--line); /* Bordure d'une carte non disponible */
    --offer-panel-gap: 18px; /* Ecart interne du bloc achat */
    --offer-panel-padding: 10px 0 0; /* Padding du bloc action dans une carte */
    --offer-panel-bg: transparent; /* Fond du bloc action dans une carte */
    --offer-panel-border: 0; /* Bordure du bloc action dans une carte */
    --offer-kicker-size: 0.84rem; /* Taille du petit label d'offre */
    --offer-status-size: 0.76rem; /* Taille du statut dispo / bientot */
    --offer-status-color: #ec4ca8; /* Couleur du statut disponible */
    --offer-status-muted-color: var(--muted); /* Couleur du statut bientot disponible */
    --offer-card-title-size: clamp(1.3rem, 2.2vw, 1.95rem); /* Taille du titre d'une carte */
    --offer-subtitle-size: 1rem; /* Taille du sous-titre Airtable */
    --offer-subtitle-color: var(--muted-strong); /* Couleur du sous-titre Airtable */
    --offer-price-size: clamp(2rem, 3.2vw, 3.05rem); /* Taille du prix */
    --offer-original-price-size: 0.84rem; /* Taille du prix barre */
    --offer-original-price-color: var(--muted); /* Couleur du prix barre */
    --offer-note-size: 0.92rem; /* Taille micro du texte de note / notification */
    --offer-note-color: var(--muted); /* Couleur du texte de note / notification */


    /* ========================================
       MODALE CONFIG
       ======================================== */

    --modal-width: 920px; /* Largeur max de la popup */
    --modal-padding: 28px; /* Padding interne desktop de la popup */
    --modal-padding-mobile: 22px 16px; /* Padding interne mobile de la popup */
    --modal-copy-padding-right: 42px; /* Espace a droite du bloc de texte de la popup */
    --modal-bg: #111; /* Fond de la popup */
    --modal-border: 1px solid var(--line-strong); /* Bordure de la popup */

    --modal-title-size: 2.7rem; /* Taille du titre de popup */
    --modal-title-size-mobile: 2.25rem; /* Taille du titre de popup sur mobile */
    --notify-modal-width: 640px; /* Largeur max de la popup "me prevenir" */

    --panel-padding: 18px; /* Padding des sous-blocs de la popup */
    --form-gap: 14px; /* Ecart entre les champs du formulaire */
    --verdict-border-width: 6px; /* Epaisseur de la barre coloree du verdict */
}