:root {
    /******************* Fonts *******************/
    --main-font: "Manrope", sans-serif;
    --title-font: "Manrope", sans-serif;

    /*************** Fonts weight ***************/
    --light: 300;
    --regular: 400;
    --medium: 500;
    --semibold: 600;
    --bold: 700;
    --extrabold: 900;

    /***************** Couleurs de base *******************/
    --dark: #000;
    --white: #fff;
    --grey: #f5f5f5;

    /*************** Marque CERF ***************/
    --color-primary: #197df5;
    /* Bleu principal (liens, éléments clés) */
    --color-primary-dark: #224696;
    /* Bleu foncé */
    --color-primary-light: #429aee;
    /* Bleu clair (accents) */
    --color-primary-opacity-33: rgba(25, 125, 245, 0.33);
    /* Bleu principal 33% */
    --color-deep-blue: #081125;
    /* Bleu profond (fonds sombres, texte) */
    --color-skin: #ffe1d7;
    /* Pêche (fonds doux) */
    --color-cta: #ff6648;
    /* Orange (boutons d'action) */
    --color-pink: #ff534a;
    /* Rose/rouge */
    --color-hero-bg: #ecf4ff;
    /* Bleu pastel (fond hero) */
    --color-border: #d4dce0;
    /* Gris de bordure */
    --color-muted-foreground: #64748b;
    /* Gris-bleu neutre (texte secondaire) : équivalent du token shadcn/Lovable
       --muted-foreground (oklch(0.554 0.046 257.417)) — utilisé notamment pour
       le rôle/poste des cartes membre de l'annuaire (MemberCard, text-muted-foreground). */

    /*************** Dégradés ***************/
    --gradient-primary: linear-gradient(90deg, #197df5 0%, #081125 100%);
    --gradient-accent: linear-gradient(90deg, #429aee 0%, #224696 100%);

    /*************** Texte ***************/
    --color-text: #081125;

    /****************** Others ******************/
    --border-radius: 16px;
    --border-radius-sm: 6px;
    /* Échelle radius alignée sur Tailwind v4 du webdesign Lovable
       (--radius: 0.625rem/10px de base) :
       rounded-lg = radius = 10px ; rounded-xl = radius + 4px = 14px.
       Utilisées par la sidebar (widgets/bannière = xl, icônes/cartes = lg). */
    /* rounded-md Lovable = --radius - 2px = 8px (lecteur vidéo dans sa carte, cf. cartes vidéos) */
    --border-radius-md: 8px;
    --border-radius-lg: 10px;
    --border-radius-xl: 14px;
    /* rounded-2xl Lovable = --radius + 8px = 18px (images de contenu / haut de page) */
    --border-radius-2xl: 18px;
    /* rounded-3xl Lovable = --radius + 12px = 22px (panneau carte des onglets AG) */
    --border-radius-3xl: 22px;
    --border-radius-full: 999px;
    --border-radius-cta: 100px;
    --transition: all 0.3s ease;

    /*************** Typographie (échelle Lovable/Tailwind) ***************/
    --font-size-sm: 14px;
    /* text-sm : liens/paragraphes secondaires (footer, etc.) */
    --line-height-sm: 20px;
    /* line-height de text-sm (Tailwind : 14px / 20px) */
    --line-height-relaxed: 1.625;
    /* leading-relaxed */
    --letter-spacing-wide: 0.05em;
    /* tracking-wider (titres de colonnes footer) */

    /*************** Spacing (échelle Lovable/Tailwind, 1 unité = 4px) ***************/
    --spacing-2: 8px;
    --spacing-4: 16px;
    --spacing-6: 24px;
    --spacing-16: 64px;

    /*************** Footer ***************/
    --footer-logo-height: 80px;

    /*************** Couleurs semi-transparentes (usage sidebar / teaser) ***************/
    --color-deep-blue-5: rgba(8, 17, 37, 0.05);
    --color-deep-blue-10: rgba(8, 17, 37, 0.1);
    --color-deep-blue-20: rgba(8, 17, 37, 0.2);
    --color-deep-blue-70: rgba(8, 17, 37, 0.7);
    --color-hero-bg-50: rgba(236, 244, 255, 0.5);
    --color-hero-bg-60: rgba(236, 244, 255, 0.6);
    --color-primary-5: rgba(25, 125, 245, 0.05);
    --color-primary-15: rgba(25, 125, 245, 0.15);
    /* Bleu foncé (cerf-dark-blue #224696) semi-transparent :
       intro haut de page (/80), fil d'ariane liens (/60) et ancêtres (/40) */
    --color-primary-dark-80: rgba(34, 70, 150, 0.8);
    --color-primary-dark-60: rgba(34, 70, 150, 0.6);
    --color-primary-dark-40: rgba(34, 70, 150, 0.4);
    --color-white-70: rgba(255, 255, 255, 0.7);
    /* Blanc 70% (texte secondaire sur fonds sombres, ex. footer) */

    /*************** Ombres ***************/
    --shadow-card: 0 0 15px rgba(0, 0, 0, 0.15);
    --shadow-teaser: 0 4px 24px rgba(0, 0, 0, 0.06);
    /* shadow-sm (Tailwind/Lovable) : ombre très subtile, conteneurs "carte" discrets
       (ex. accordéon team/bureau) — plus légère que --shadow-teaser. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);

    /*************** Layout principal ***************/
    --main-layout-max-width: 1280px;
    --main-layout-sidebar-width: 305px;
    --main-layout-gap: 64px;

    /****************** Containers ******************/
    /* Devices < 576px */
    --container-sm: 540px;
    /* Devices < 768px */
    --container-md: 720px;
    /* Devices  < 992px */
    --container-lg: 960px;
    /* Devices < 1200px */
    --container-xl: 1140px;
    /* Devices < 1400px */
    --container-xxl: 1320px;

    /* Gutter des containers */
    --gutter-x: 1.5rem;
    --gutter-y: 0;
}