/**
 * VARIABLES DE DESIGN - AJUSTEMENTS RAPIDES
 * 
 * Ce fichier contient toutes les variables CSS pour contrôler l'apparence de la page.
 * Modifiez ces valeurs pour ajuster rapidement la présentation sans chercher dans le CSS principal.
 */

:root {
    /* ========================================
       TYPOGRAPHIE - TAILLES DE POLICE
       ======================================== */
    
    /* Titres principaux */
    --h1-size: 2.6rem;              /* Titre principal de la page */
    --h2-size: 2rem;                /* Titres de sections */
    --h3-size: 1.25rem;             /* Sous-titres */
    --h4-size: 1.15rem;             /* Titres FAQ */
    
    /* Texte courant */
    --text-base: 1.05rem;           /* Paragraphes normaux */
    --text-small: 0.95rem;          /* Texte secondaire */
    --text-tiny: 0.75rem;           /* Notes et annotations */
    
    /* SECTION "Comment se passe une session ?" (les 3 colonnes avec 01, 02, 03) */
    --session-number-size: 1.7rem;  /* Numéro "01", "02", "03" sur la première ligne */
    --session-separator-size: 1.7rem; /* Taille du séparateur " | " entre le numéro et le temps */
    --session-time-size: 1.15rem;   /* Temps "Avant la session", "Pendant la session", "Après la session" (sur la même ligne que le numéro) */
    --session-title-size: 1.25rem;  /* Titre principal sur la deuxième ligne (ex: "Poser les bases", "Travailler sur du concret") */
    --session-title-variant: small-caps;  /* Variante de police du titre : normal, small-caps */
    --session-list-size: 0.95rem;   /* Taille du texte des puces dans chaque colonne */
    --session-note-size: 0.85rem;   /* Notes en italique en bas de colonne (ex: "Via Zoom ou Google Meet...") */
    
    /* SECTION "Option 1 / Option 2" (les grandes cartes avec fond gris) */
    --offer-title-size: 1.7rem;     /* Titre "Option 1 — Le Plan « Starter »" */
    --offer-subtitle-size: 1.05rem; /* Sous-titre en italique "Objectif : Arrêter de subir..." */
    --offer-text-size: 1.05rem;     /* Taille du texte dans les listes à puces */
    --offer-label-size: 0.75rem;    /* Taille des étiquettes de rubrique (INSTALLEZ VOS REPÈRES...) */
    
    /* SECTION "Choisissez votre formule" (les 2 cartes cliquables Plan Starter / Parcours Autonomie) */
    --plan-title-size: 1.5rem;      /* Titre "Plan Starter" / "Parcours Autonomie" */
    --plan-price-size: 3rem;        /* Prix principal (100€ / 290€) */
    --plan-desc-size: 1rem;         /* Description sous le titre */
    
    /* SECTION "Ce que je garantis" / "Ce que je ne vous promets pas" */
    --guarantee-title-size: 1.5rem; /* Titre "✓ Ce que je garantis" / "✗ Ce que je ne vous promets pas" */
    --guarantee-text-size: 1.05rem; /* Taille du texte dans les listes */
    
    
    /* ========================================
       ESPACEMENT - MARGES ET PADDING
       ======================================== */
    
    /* Espacement global */
    --section-spacing: 80px;        /* Espace vertical entre les grandes sections de la page */
    --content-spacing: 20px;        /* Espace entre les paragraphes de texte */
    
    /* Espacement - Section "Comment se passe une session ?" */
    --session-gap: 10px;            /* Espace horizontal entre les 3 colonnes (01, 02, 03) */
    --session-padding: 8px;         /* Padding interne de chaque colonne */
    --session-number-margin: 4px;   /* Espace entre le numéro "01" et le titre en dessous */
    --session-title-margin: 8px;    /* Espace entre le titre et la liste à puces */
    --session-note-margin: 8px;     /* Espace entre la liste et la note en italique en bas */
    
    /* Espacement - Section "Option 1 / Option 2" */
    --offer-gap: 32px;              /* Espace vertical entre Option 1 et Option 2 */
    --offer-padding: 40px;          /* Padding interne des grandes cartes grises */
    
    /* Espacement - Section "Choisissez votre formule" */
    --plan-gap: 24px;               /* Espace entre les 2 cartes (Plan Starter / Parcours Autonomie) */
    --plan-padding: 24px;           /* Padding interne des cartes cliquables */
    
    /* Espacement - Section Garanties */
    --guarantee-padding: 28px 36px; /* Padding interne des blocs garanties */
    
    
    /* ========================================
       LINE-HEIGHT - HAUTEUR DE LIGNE
       ======================================== */
    
    --line-height-tight: 1.2;       /* Titres serrés */
    --line-height-normal: 1.3;      /* Titres normaux */
    --line-height-relaxed: 1.7;     /* Texte courant */
    --line-height-loose: 1.8;       /* Paragraphes aérés */
    
    /* Hauteur de ligne - Section "Comment se passe une session ?" */
    --session-title-line: 1.3;      /* Hauteur de ligne du titre (plus petit = plus serré) */
    --session-list-line: 1.15;      /* Hauteur de ligne des puces */
    --session-note-line: 1.3;       /* Hauteur de ligne de la note en italique */
    
    
    /* ========================================
       COULEURS
       ======================================== */
    
    /* Couleurs principales */
    --color-primary: #2c3e50;       /* Couleur principale */
    --color-h1: #1a1a2e;            /* Couleur du titre principal H1 */
    --color-text: #374151;          /* Texte principal */
    --color-text-light: #64748b;    /* Texte secondaire */
    --color-text-muted: #94a3b8;    /* Texte atténué */
    --color-strong: #1a1a2e;        /* Couleur des textes en gras <strong> */

    /* Section "Option 1 / Option 2" — couleurs */
    --offer-section-bg: #f1f4f8;    /* Fond de la zone englobant les 2 options (plus foncé pour contraste) */
    --offer-card-bg: #ffffff;       /* Fond blanc de chaque carte */
    --offer-card-accent: #2c3e50;   /* Barre colorée en haut de chaque carte */
    --offer-title-color: #0f172a;   /* Couleur du titre Option 1 / Option 2 */
    --offer-divider-color: #edf0f4; /* Couleur des séparateurs horizontaux */
    --offer-subtitle-bg: #f4f5f7;   /* Fond du bloc sous-titre */
    --offer-subtitle-color: #1e293b;/* Couleur du texte du sous-titre */
    --offer-subtitle-border: #2c3e50; /* Barre gauche du sous-titre */
    --offer-label-bg: rgba(44,62,80,0.08); /* Fond des étiquettes de rubrique */
    --offer-label-color: #2c3e50;   /* Couleur texte des étiquettes */
    --offer-bullet-color: #2c3e50;  /* Couleur des flèches → devant chaque item */
    --offer-item-color: #374151;    /* Couleur du texte des items */

    /* Fonds colorés personnalisés — syntaxe Markdown : [[nom]]texte[[/nom]] */
    --md-bg-info: #e8f4fd;          /* Fond bleu doux */
    --md-bg-warning: #fff8e1;       /* Fond ambre doux */
    --md-bg-success: #e8f8e8;       /* Fond vert doux */
    --md-bg-accent: #fffbe5;        /* Fond jaune accent */

    /* Surlignage (highlight) — utilisé sur les passages importants */
    --color-highlight: #fcf816;     /* Jaune doux pour le surlignage */
    --color-highlight-border: #e6dbbc; /* Bordure inférieure du surlignage */
    
    /* Backgrounds */
    --bg-white: #ffffff;            /* Fond blanc */
    --bg-light: #f8fafc;            /* Fond gris clair pour les cartes (plans, options) */
    --bg-error: #fef2f2;            /* Fond rouge/rose clair (section "Ce que je ne promets pas") */
    --bg-guarantee-positive: #fcfdf1; /* Fond gris clair (section "Ce que je garantis") */
    --bg-guarantee-negative: #faf4f4; /* Fond rouge/rose clair (section "Ce que je ne promets pas") — identique à --bg-error */
    --bg-session-card: #f8fafc;     /* Fond des cartes de session (3 colonnes 01, 02, 03) */
    
    /* Bordures */
    --border-color: #e2e8f0;        /* Couleur bordure standard */
    --border-color-dark: #dbe3ee;   /* Couleur bordure foncée */
    
    /* Couleurs - Section "Comment se passe une session ?" */
    --session-number-color: #94a3b8;    /* Couleur du numéro "01", "02", "03" */
    --session-separator-color: #94a3b8; /* Couleur du séparateur " | " */
    --session-time-color: #0f172a;      /* Couleur du temps "Avant la session", etc. */
    --session-title-color: #555963;     /* Couleur du titre sur la deuxième ligne */
    --session-list-color: #374151;      /* Couleur du texte des puces */
    --session-note-color: #94a3b8;      /* Couleur de la note en italique */
    --session-note-opacity: 0.8;        /* Opacité de la note en italique (0 = invisible, 1 = opaque) */
    
    
    /* ========================================
       BORDURES ET ARRONDIS
       ======================================== */
    
    --border-radius-small: 8px;     /* Petits arrondis */
    --border-radius-medium: 16px;   /* Arrondis moyens */
    --border-width: 1px;            /* Épaisseur bordure */
    
    /* Session section */
    --session-border: 1px solid var(--border-color-dark);
    
    
    /* ========================================
       POIDS DE POLICE (FONT-WEIGHT)
       ======================================== */
    
    --weight-normal: 400;           /* Normal */
    --weight-medium: 500;           /* Moyen */
    --weight-semibold: 600;         /* Semi-gras */
    --weight-bold: 700;             /* Gras */
    --weight-extrabold: 800;        /* Extra-gras */
    
    /* Poids de police - Section "Comment se passe une session ?" */
    --session-number-weight: 600;   /* Poids du numéro "01", "02", "03" (400=normal, 700=gras) */
    --session-time-weight: 600;     /* Poids du temps "Avant la session", etc. */
    --session-title-weight: 700;    /* Poids du titre sur la deuxième ligne */
    --session-note-weight: 400;     /* Poids de la note en italique */
}

/* ========================================
   APPLICATION DES VARIABLES
   ======================================== */

/* Titres */
h1 { font-size: var(--h1-size) !important; color: var(--color-h1) !important; }
h2 { font-size: var(--h2-size) !important; }
h3 { font-size: var(--h3-size) !important; }
h4 { font-size: var(--h4-size) !important; }

/* Texte courant */
.content-section p { 
    font-size: var(--text-base); 
    line-height: var(--line-height-loose);
    margin-bottom: var(--content-spacing);
}

/* Section session */
.session-steps {
    gap: var(--session-gap);
}

.session-section .session-step {
    padding: var(--session-padding);
    border: var(--session-border);
    background: var(--bg-session-card) !important;
}

.session-step-index {
    font-size: var(--session-number-size) !important;
    color: var(--session-number-color) !important;
    font-weight: var(--session-number-weight) !important;
}

.session-step-separator {
    font-size: var(--session-separator-size) !important;
    color: var(--session-separator-color) !important;
}

.session-step-time {
    font-size: var(--session-time-size) !important;
    color: var(--session-time-color) !important;
    font-weight: var(--session-time-weight) !important;
}

.session-section .session-step h3 {
    font-size: var(--session-title-size) !important;
    color: var(--session-title-color) !important;
    font-weight: var(--session-title-weight) !important;
    font-variant: var(--session-title-variant) !important;
    line-height: var(--session-title-line) !important;
    margin-bottom: var(--session-title-margin) !important;
}

.session-step-list li {
    font-size: var(--session-list-size) !important;
    color: var(--session-list-color) !important;
    line-height: var(--session-list-line) !important;
}

.session-note {
    font-size: var(--session-note-size) !important;
    color: var(--session-note-color) !important;
    line-height: var(--session-note-line) !important;
    opacity: var(--session-note-opacity) !important;
    font-weight: var(--session-note-weight) !important;
    margin-top: var(--session-note-margin) !important;
}

/* Section "Option 1 / Option 2" */
.offers-section {
    margin-bottom: var(--offer-gap);
}

.offer-card {
    padding: var(--offer-padding);
    background: var(--offer-card-bg) !important;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-small);
    margin-bottom: var(--offer-gap);
}

.offer-card h3 {
    font-size: var(--offer-title-size) !important;
}

.offer-subtitle {
    font-size: var(--offer-subtitle-size) !important;
}

.offer-features li {
    font-size: var(--offer-text-size) !important;
}

/* Section "Choisissez votre formule" */
.pricing-cards {
    gap: var(--plan-gap);
}

.price-card {
    border-radius: var(--border-radius-medium);
}

.price-card h3 {
    font-size: var(--plan-title-size) !important;
}

.price-card .price {
    font-size: var(--plan-price-size) !important;
}

.price-card .description {
    font-size: var(--plan-desc-size) !important;
}

/* Garanties */
.guarantee-block {
    padding: var(--guarantee-padding);
}

.guarantee-block:first-child {
    background: var(--bg-guarantee-positive) !important;
}

.guarantee-block:last-child {
    background: var(--bg-guarantee-negative) !important;
}

.guarantees h3 {
    font-size: var(--guarantee-title-size);
}

.guarantees ul li {
    font-size: var(--guarantee-text-size);
}

/* Sections */
.content-section {
    margin-bottom: var(--section-spacing);
}