/**
 * ============================================================
 *  GROUPE MOHA COM — Design Tokens
 *  Fichier : design-tokens.css
 *  Version : 1.0.0
 *  Date    : 2026-03-19
 *
 *  Ce fichier centralise l'ensemble des variables CSS (tokens)
 *  du système de design Groupe MOHA COM. Toute valeur visuelle
 *  (couleur, taille, espacement, ombre, etc.) doit être référencée
 *  depuis ce fichier plutôt que codée en dur dans les feuilles
 *  de style composants.
 * ============================================================
 */

/* ============================================================
   IMPORT DES POLICES GOOGLE FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,400&display=swap');

/* ============================================================
   :root — TOKENS GLOBAUX
   ============================================================ */
:root {

  /* ==========================================================
     SECTION 1 : COULEURS
     ========================================================== */

  /* --- 1.1 Couleurs Primaires --- */
  --color-navy:                  #1B2A4A;   /* MOHA Navy — texte principal, en-têtes, navigation, pied de page */
  --color-navy-rgb:              27, 42, 74;
  --color-royal-blue:            #2456A4;   /* MOHA Royal Blue — globes, liens, boutons primaires */
  --color-royal-blue-rgb:        36, 86, 164;
  --color-signal-red:            #CC2229;   /* MOHA Signal Red — CTA, accents, soulignements */
  --color-signal-red-rgb:        204, 34, 41;

  /* --- 1.2 Couleurs Secondaires --- */
  --color-steel-blue:            #6B9DC7;   /* Arrière-plans secondaires, panneaux info */
  --color-steel-blue-rgb:        107, 157, 199;
  --color-teal-border:           #1E5F7A;   /* Bordures, icônes */
  --color-teal-border-rgb:       30, 95, 122;
  --color-warm-red:              #D63031;   /* Accents hospitalité */
  --color-warm-red-rgb:          214, 48, 49;
  --color-solar-gold:            #F39C12;   /* Badges, étoiles de notation */
  --color-solar-gold-rgb:        243, 156, 18;
  --color-safety-green:          #27AE60;   /* États de succès, disponibilité */
  --color-safety-green-rgb:      39, 174, 96;

  /* --- 1.3 Couleurs Neutres --- */
  --color-charcoal:              #2C3E50;   /* Texte courant */
  --color-charcoal-rgb:          44, 62, 80;
  --color-tower-gray:            #7F8C8D;   /* Texte atténué */
  --color-tower-gray-rgb:        127, 140, 141;
  --color-silver:                #BDC3C7;   /* Bordures, séparateurs */
  --color-silver-rgb:            189, 195, 199;
  --color-light-gray:            #ECF0F1;   /* Arrière-plans de sections */
  --color-light-gray-rgb:        236, 240, 241;
  --color-off-white:             #F8F9FA;   /* Arrière-plan de page */
  --color-off-white-rgb:         248, 249, 250;
  --color-white:                 #FFFFFF;
  --color-black:                 #000000;

  /* --- 1.4 Teintes dérivées (variations d'opacité) --- */
  --color-navy-10:               rgba(27, 42, 74, 0.10);
  --color-navy-20:               rgba(27, 42, 74, 0.20);
  --color-navy-40:               rgba(27, 42, 74, 0.40);
  --color-navy-60:               rgba(27, 42, 74, 0.60);
  --color-navy-80:               rgba(27, 42, 74, 0.80);
  --color-royal-blue-10:         rgba(36, 86, 164, 0.10);
  --color-royal-blue-20:         rgba(36, 86, 164, 0.20);
  --color-royal-blue-50:         rgba(36, 86, 164, 0.50);
  --color-signal-red-10:         rgba(204, 34, 41, 0.10);
  --color-signal-red-20:         rgba(204, 34, 41, 0.20);
  --color-signal-red-50:         rgba(204, 34, 41, 0.50);
  --color-steel-blue-20:         rgba(107, 157, 199, 0.20);
  --color-steel-blue-40:         rgba(107, 157, 199, 0.40);
  --color-solar-gold-20:         rgba(243, 156, 18, 0.20);
  --color-safety-green-20:       rgba(39, 174, 96, 0.20);

  /* --- 1.5 Couleurs Fonctionnelles --- */
  --color-success:               #27AE60;
  --color-success-bg:            rgba(39, 174, 96, 0.10);
  --color-success-border:        rgba(39, 174, 96, 0.30);
  --color-warning:               #F39C12;
  --color-warning-bg:            rgba(243, 156, 18, 0.10);
  --color-warning-border:        rgba(243, 156, 18, 0.30);
  --color-error:                 #CC2229;
  --color-error-bg:              rgba(204, 34, 41, 0.08);
  --color-error-border:          rgba(204, 34, 41, 0.30);
  --color-info:                  #2456A4;
  --color-info-bg:               rgba(36, 86, 164, 0.08);
  --color-info-border:           rgba(36, 86, 164, 0.30);

  /* --- 1.6 Couleurs de Surface --- */
  --color-surface-page:          var(--color-off-white);
  --color-surface-section:       var(--color-light-gray);
  --color-surface-card:          var(--color-white);
  --color-surface-overlay:       rgba(27, 42, 74, 0.65);
  --color-surface-nav:           var(--color-navy);
  --color-surface-footer:        var(--color-navy);

  /* --- 1.7 Couleurs de Texte --- */
  --color-text-primary:          var(--color-charcoal);
  --color-text-secondary:        var(--color-tower-gray);
  --color-text-heading:          var(--color-navy);
  --color-text-link:             var(--color-royal-blue);
  --color-text-link-hover:       var(--color-navy);
  --color-text-inverted:         var(--color-white);
  --color-text-muted:            var(--color-tower-gray);
  --color-text-disabled:         var(--color-silver);

  /* ==========================================================
     SECTION 2 : VARIANTES PAR ENTITÉ
     ========================================================== */
  --entity-mohacom-accent:       #2456A4;
  --entity-mohacom-tint:         rgba(36, 86, 164, 0.06);
  --entity-mohacom-tint-strong:  rgba(36, 86, 164, 0.12);
  --entity-mohacom-dark:         #1A3F7A;
  --entity-mohacom-light:        #6B9DC7;

  --entity-residences-accent:    #CC2229;
  --entity-residences-tint:      rgba(204, 34, 41, 0.04);
  --entity-residences-tint-strong: rgba(204, 34, 41, 0.10);
  --entity-residences-dark:      #9B1B21;
  --entity-residences-light:     #E05A60;

  --entity-voyages-accent:       #1B2A4A;
  --entity-voyages-tint:         rgba(27, 42, 74, 0.04);
  --entity-voyages-tint-strong:  rgba(27, 42, 74, 0.10);
  --entity-voyages-dark:         #0F1A2E;
  --entity-voyages-light:        #2456A4;

  /* ==========================================================
     SECTION 3 : TYPOGRAPHIE
     ========================================================== */

  /* --- 3.1 Familles de Polices --- */
  --font-heading:                'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-body:                   'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-accent:                 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-mono:                   'Courier New', Courier, monospace;

  /* --- 3.2 Tailles de Police --- */
  --font-size-display:           3rem;       /* 48px — titres hero, affichage */
  --font-size-h1:                2.5rem;     /* 40px — titre de page */
  --font-size-h2:                2rem;       /* 32px — titre de section */
  --font-size-h3:                1.5625rem;  /* 25px — sous-titre */
  --font-size-h4:                1.25rem;    /* 20px — titre de carte */
  --font-size-h5:                1.0625rem;  /* 17px — titre secondaire */
  --font-size-h6:                0.9375rem;  /* 15px — titre tertiaire */
  --font-size-body:              1rem;       /* 16px — texte courant */
  --font-size-body-lg:           1.125rem;   /* 18px — texte accentué */
  --font-size-small:             0.875rem;   /* 14px — mentions, légendes */
  --font-size-xsmall:            0.75rem;    /* 12px — notes légales, badges */
  --font-size-lead:              1.25rem;    /* 20px — chapeau de section */

  /* --- 3.3 Poids de Police --- */
  --font-weight-light:           300;
  --font-weight-regular:         400;
  --font-weight-medium:          500;
  --font-weight-semibold:        600;
  --font-weight-bold:            700;
  --font-weight-extrabold:       800;
  --font-weight-black:           900;

  /* --- 3.4 Hauteurs de Ligne --- */
  --line-height-tight:           1.2;
  --line-height-snug:            1.35;
  --line-height-normal:          1.5;
  --line-height-relaxed:         1.65;
  --line-height-loose:           1.8;
  --line-height-heading:         1.15;

  /* --- 3.5 Espacement de Lettres --- */
  --letter-spacing-tight:        -0.025em;
  --letter-spacing-normal:        0em;
  --letter-spacing-wide:          0.025em;
  --letter-spacing-wider:         0.05em;
  --letter-spacing-widest:        0.1em;
  --letter-spacing-caps:          0.08em;   /* pour majuscules */

  /* ==========================================================
     SECTION 4 : ESPACEMENTS (Grille 8px)
     ========================================================== */
  --space-0:    0px;
  --space-1:    8px;    /* xs  */
  --space-2:    16px;   /* sm  */
  --space-3:    24px;   /* md  */
  --space-4:    32px;   /* lg  */
  --space-5:    40px;   /* xl  */
  --space-6:    48px;   /* 2xl */
  --space-7:    56px;
  --space-8:    64px;   /* 3xl */
  --space-9:    72px;
  --space-10:   80px;   /* 4xl */
  --space-11:   96px;
  --space-12:   128px;  /* 5xl */

  /* Micro-espacements */
  --space-half: 4px;
  --space-quarter: 2px;

  /* Espacements sémantiques */
  --gap-component:     var(--space-3);   /* 24px — entre composants */
  --gap-section:       var(--space-10);  /* 80px — entre sections */
  --gap-element:       var(--space-2);   /* 16px — entre éléments */
  --gap-item:          var(--space-1);   /* 8px  — entre items */
  --padding-card:      var(--space-4);   /* 32px — padding carte */
  --padding-section-y: var(--space-10);  /* 80px — padding vertical section */
  --padding-section-x: var(--space-4);   /* 32px — padding horizontal section */

  /* ==========================================================
     SECTION 5 : BORDURES
     ========================================================== */

  /* --- 5.1 Rayons --- */
  --radius-none:   0px;
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     16px;
  --radius-2xl:    24px;
  --radius-3xl:    32px;
  --radius-full:   9999px;  /* pill / cercle */
  --radius-card:   var(--radius-lg);
  --radius-button: var(--radius-sm);
  --radius-input:  var(--radius-sm);
  --radius-badge:  var(--radius-full);

  /* --- 5.2 Largeurs --- */
  --border-width-thin:   1px;
  --border-width-base:   2px;
  --border-width-thick:  3px;
  --border-width-heavy:  4px;
  --border-entity-top:   4px;   /* bordure colorée en haut des cartes d'entité */

  /* --- 5.3 Couleurs de Bordure --- */
  --border-color-default:  var(--color-silver);
  --border-color-subtle:   var(--color-light-gray);
  --border-color-focus:    var(--color-royal-blue);
  --border-color-error:    var(--color-signal-red);
  --border-color-success:  var(--color-safety-green);

  /* ==========================================================
     SECTION 6 : OMBRES
     ========================================================== */
  --shadow-none:    none;
  --shadow-xs:      0 1px 2px rgba(27, 42, 74, 0.06);
  --shadow-sm:      0 1px 4px rgba(27, 42, 74, 0.08), 0 1px 2px rgba(27, 42, 74, 0.05);
  --shadow-md:      0 4px 12px rgba(27, 42, 74, 0.10), 0 2px 6px rgba(27, 42, 74, 0.06);
  --shadow-lg:      0 8px 24px rgba(27, 42, 74, 0.12), 0 4px 10px rgba(27, 42, 74, 0.07);
  --shadow-xl:      0 16px 40px rgba(27, 42, 74, 0.14), 0 8px 20px rgba(27, 42, 74, 0.08);
  --shadow-2xl:     0 24px 64px rgba(27, 42, 74, 0.18), 0 12px 32px rgba(27, 42, 74, 0.10);
  --shadow-inner:   inset 0 2px 6px rgba(27, 42, 74, 0.08);
  --shadow-card:    var(--shadow-md);
  --shadow-card-hover: var(--shadow-xl);
  --shadow-nav:     0 2px 16px rgba(27, 42, 74, 0.15);
  --shadow-modal:   0 32px 80px rgba(27, 42, 74, 0.25);
  --shadow-button:  0 2px 8px rgba(36, 86, 164, 0.25);
  --shadow-button-hover: 0 4px 16px rgba(36, 86, 164, 0.35);
  --shadow-red:     0 2px 8px rgba(204, 34, 41, 0.30);
  --shadow-focus:   0 0 0 3px rgba(36, 86, 164, 0.30);

  /* ==========================================================
     SECTION 7 : TRANSITIONS ET ANIMATIONS
     ========================================================== */

  /* --- 7.1 Durées --- */
  --duration-instant:   0ms;
  --duration-fast:      150ms;
  --duration-normal:    250ms;   /* alias duration-base */
  --duration-base:      250ms;
  --duration-slow:      400ms;
  --duration-slower:    600ms;
  --duration-slowest:   900ms;
  --duration-page:      300ms;

  /* --- 7.2 Fonctions d'Accélération --- */
  --ease-linear:     linear;
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce:     cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* --- 7.3 Transitions Composées --- */
  --transition-fast:    all var(--duration-fast) var(--ease-out);
  --transition-base:    all var(--duration-base) var(--ease-in-out);
  --transition-slow:    all var(--duration-slow) var(--ease-in-out);
  --transition-color:   color var(--duration-base) var(--ease-in-out),
                        background-color var(--duration-base) var(--ease-in-out),
                        border-color var(--duration-base) var(--ease-in-out);
  --transition-shadow:  box-shadow var(--duration-base) var(--ease-in-out);
  --transition-transform: transform var(--duration-base) var(--ease-spring);

  /* ==========================================================
     SECTION 8 : Z-INDEX
     ========================================================== */
  --z-below:        -1;
  --z-base:          0;
  --z-raised:        10;
  --z-dropdown:      100;
  --z-sticky:        200;
  --z-overlay:       300;
  --z-modal:         400;
  --z-popover:       500;
  --z-tooltip:       600;
  --z-toast:         700;
  --z-top:           900;

  /* ==========================================================
     SECTION 9 : LAYOUT ET GRILLE
     ========================================================== */

  /* --- 9.1 Conteneurs --- */
  --container-xs:   480px;
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;
  --container-max:  1200px;  /* largeur maximale principale */

  /* --- 9.2 Gouttières de Grille --- */
  --grid-gutter-xs:  var(--space-2);   /* 16px — mobile */
  --grid-gutter-sm:  var(--space-3);   /* 24px — tablette */
  --grid-gutter-lg:  var(--space-4);   /* 32px — desktop */
  --grid-columns:    12;

  /* --- 9.3 Breakpoints (référence JS-friendly) --- */
  --bp-mobile:       480px;
  --bp-tablet:       768px;
  --bp-desktop:      1024px;
  --bp-wide:         1280px;
  --bp-ultrawide:    1440px;

  /* --- 9.4 Hauteurs spéciales --- */
  --height-nav:        72px;
  --height-nav-mobile: 60px;
  --height-hero:       90vh;
  --height-hero-min:   520px;
  --height-hero-short: 60vh;
  --height-footer:     auto;

  /* ==========================================================
     SECTION 10 : ICÔNES
     ========================================================== */
  --icon-xs:    0.75rem;   /* 12px */
  --icon-sm:    1rem;      /* 16px */
  --icon-md:    1.25rem;   /* 20px */
  --icon-lg:    1.5rem;    /* 24px */
  --icon-xl:    2rem;      /* 32px */
  --icon-2xl:   2.5rem;    /* 40px */
  --icon-3xl:   3rem;      /* 48px */

  /* ==========================================================
     SECTION 11 : OPACITÉS
     ========================================================== */
  --opacity-0:         0;
  --opacity-disabled:  0.45;
  --opacity-muted:     0.60;
  --opacity-secondary: 0.75;
  --opacity-full:      1;

  /* ==========================================================
     SECTION 12 : IMAGES ET MÉDIAS
     ========================================================== */
  --img-aspect-hero:    16 / 6;
  --img-aspect-card:    16 / 9;
  --img-aspect-square:  1 / 1;
  --img-aspect-thumb:   4 / 3;
  --img-object-fit:     cover;
  --img-object-pos:     center;


  /* ==========================================================
     SECTION 13 : GLASSMORPHISM
     ========================================================== */
  --glass-bg:               rgba(255, 255, 255, 0.08);
  --glass-bg-medium:        rgba(255, 255, 255, 0.12);
  --glass-bg-strong:        rgba(255, 255, 255, 0.18);
  --gradient-glass:         linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%); /* glass morphism gradient */
  --glass-border:           rgba(255, 255, 255, 0.18);
  --glass-border-subtle:    rgba(255, 255, 255, 0.10);
  --glass-blur:             20px;
  --glass-blur-strong:      40px;

  /* Nav glassmorphism (scrolled state) */
  --nav-glass-bg:           rgba(27, 42, 74, 0.88);
  --nav-glass-blur:         20px;
  --nav-glass-border:       rgba(255, 255, 255, 0.08);

  /* ==========================================================
     SECTION 14 : GRADIENTS AVANCÉS
     ========================================================== */
  --gradient-navy-blue:         linear-gradient(135deg, #1B2A4A 0%, #2456A4 100%);
  --gradient-navy-royal:        linear-gradient(135deg, #1B2A4A 0%, #2456A4 100%); /* alias gradient-navy-blue */
  --gradient-navy-red:          linear-gradient(135deg, #1B2A4A 0%, #CC2229 100%);
  --gradient-blue-teal:         linear-gradient(135deg, #2456A4 0%, #1E5F7A 100%);
  --gradient-cta:               linear-gradient(135deg, #CC2229 0%, #9B1B21 100%);
  --gradient-cta-hover:         linear-gradient(135deg, #a81b21 0%, #7a0f15 100%);

  /* Hero gradients par entité */
  --gradient-hero-groupe:       linear-gradient(to right, rgba(0,0,0,0.62) 0%, rgba(27,42,74,0.38) 50%, rgba(27,42,74,0.10) 100%);
  --gradient-hero-mohacom:      linear-gradient(155deg, rgba(27,42,74,0.93) 0%, rgba(36,86,164,0.75) 60%, rgba(30,95,122,0.60) 100%);
  --gradient-hero-svs:          linear-gradient(155deg, rgba(15,26,46,0.94) 0%, rgba(27,42,74,0.82) 100%);
  --gradient-hero-residences:   linear-gradient(155deg, rgba(27,42,74,0.90) 0%, rgba(155,27,33,0.65) 100%);

  /* Gradient mesh — arrière-plans de section subtils */
  --gradient-mesh-light:        radial-gradient(ellipse at 20% 50%, rgba(36,86,164,0.05) 0%, transparent 50%),
                                radial-gradient(ellipse at 80% 20%, rgba(204,34,41,0.03) 0%, transparent 50%);
  --gradient-mesh-warm:         radial-gradient(ellipse at 30% 70%, rgba(36,86,164,0.06) 0%, transparent 60%),
                                radial-gradient(ellipse at 70% 30%, rgba(243,156,18,0.04) 0%, transparent 50%);
  --gradient-section-cool:      linear-gradient(180deg, var(--color-off-white) 0%, rgba(36,86,164,0.03) 100%);

  /* ==========================================================
     SECTION 15 : EFFETS LUMINEUX (GLOWS)
     ========================================================== */
  --glow-blue:              0 8px 32px rgba(36, 86, 164, 0.25);
  --glow-blue-strong:       0 12px 40px rgba(36, 86, 164, 0.38);
  --glow-red:               0 8px 32px rgba(204, 34, 41, 0.25);
  --glow-red-strong:        0 12px 40px rgba(204, 34, 41, 0.38);
  --glow-navy:              0 8px 32px rgba(27, 42, 74, 0.30);
  --glow-white:             0 8px 32px rgba(255, 255, 255, 0.15);
  --shadow-glass:           0 4px 24px rgba(27, 42, 74, 0.12), 0 1px 4px rgba(27, 42, 74, 0.06);
  --shadow-float:           0 20px 60px rgba(27, 42, 74, 0.18), 0 8px 20px rgba(27, 42, 74, 0.10);
  --shadow-hero:            0 4px 20px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.20);

  /* ==========================================================
     SECTION 16 : TYPOGRAPHIE FLUIDE (clamp)
     ========================================================== */
  --fluid-display:          clamp(2.5rem, 5vw, 4rem);
  --fluid-h1:               clamp(2rem, 4.5vw, 3.25rem);
  --fluid-h2:               clamp(1.625rem, 3vw, 2.25rem);
  --fluid-h3:               clamp(1.25rem, 2.5vw, 1.75rem);
  --fluid-body:             clamp(0.9375rem, 1.5vw, 1.0625rem);
  --fluid-lead:             clamp(1.0625rem, 2vw, 1.3125rem);

  /* ==========================================================
     SECTION 17 : CLIP-PATH FORMES
     ========================================================== */
  --clip-diagonal-down:     polygon(0 0, 100% 0, 100% 88%, 0 100%);
  --clip-diagonal-up:       polygon(0 12%, 100% 0, 100% 100%, 0 100%);
  --clip-wave:              polygon(0 0, 100% 0, 100% 88%, 75% 94%, 50% 88%, 25% 94%, 0 88%);
  --clip-angle-right:       polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%);

  /* ==========================================================
     SECTION 18 : CARTE 3D PERSPECTIVE
     ========================================================== */
  --card-perspective:       1200px;
  --card-tilt-max:          5deg;
  --card-tilt-transition:   0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99);

  /* ==========================================================
     SECTION 19 : BARRE DE SCROLL PROGRESS
     ========================================================== */
  --scroll-progress-height: 3px;
  --scroll-progress-color:  var(--color-signal-red);
  --scroll-progress-z:      9999;

  /* ==========================================================
     SECTION 20 : ANIMATIONS AVANCÉES
     ========================================================== */
  --ease-spring-gsap:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:            cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-power3:            cubic-bezier(0.17, 0.55, 0.55, 1.00);
  --duration-ken-burns:     8s;
  --duration-marquee:       30s;

} /* fin :root */


/* ============================================================
   VARIANTES PAR ENTITÉ
   ============================================================ */

/**
 * Classe applicables sur des sections, cartes ou wrappers
 * pour hériter du thème d'une entité spécifique.
 */
.entity-mohacom {
  --entity-accent:        var(--entity-mohacom-accent);
  --entity-tint:          var(--entity-mohacom-tint);
  --entity-tint-strong:   var(--entity-mohacom-tint-strong);
  --entity-dark:          var(--entity-mohacom-dark);
  --entity-light:         var(--entity-mohacom-light);
  --entity-border-color:  var(--entity-mohacom-accent);
  --entity-bg:            var(--entity-mohacom-tint);
  --entity-text-accent:   var(--entity-mohacom-accent);
  --entity-button-bg:     var(--entity-mohacom-accent);
  --entity-button-hover:  var(--entity-mohacom-dark);
  --entity-icon-color:    var(--entity-mohacom-accent);
  --entity-link-color:    var(--entity-mohacom-accent);
  --entity-gradient:      var(--gradient-navy-blue);
  --entity-glow:          var(--glow-blue);
  --entity-hero-gradient: var(--gradient-hero-mohacom);
}

.entity-residences {
  --entity-accent:        var(--entity-residences-accent);
  --entity-tint:          var(--entity-residences-tint);
  --entity-tint-strong:   var(--entity-residences-tint-strong);
  --entity-dark:          var(--entity-residences-dark);
  --entity-light:         var(--entity-residences-light);
  --entity-border-color:  var(--entity-residences-accent);
  --entity-bg:            var(--entity-residences-tint);
  --entity-text-accent:   var(--entity-residences-accent);
  --entity-button-bg:     var(--entity-residences-accent);
  --entity-button-hover:  var(--entity-residences-dark);
  --entity-icon-color:    var(--entity-residences-accent);
  --entity-link-color:    var(--entity-residences-accent);
  --entity-gradient:      var(--gradient-navy-red);
  --entity-glow:          var(--glow-red);
  --entity-hero-gradient: var(--gradient-hero-residences);
}

.entity-voyages {
  --entity-accent:        var(--entity-voyages-accent);
  --entity-tint:          var(--entity-voyages-tint);
  --entity-tint-strong:   var(--entity-voyages-tint-strong);
  --entity-dark:          var(--entity-voyages-dark);
  --entity-light:         var(--entity-voyages-light);
  --entity-border-color:  var(--entity-voyages-accent);
  --entity-bg:            var(--entity-voyages-tint);
  --entity-text-accent:   var(--entity-voyages-accent);
  --entity-button-bg:     var(--entity-voyages-accent);
  --entity-button-hover:  var(--entity-voyages-dark);
  --entity-icon-color:    var(--entity-voyages-accent);
  --entity-link-color:    var(--entity-voyages-light);
  --entity-gradient:      linear-gradient(135deg, #0F1A2E, #1B2A4A);
  --entity-glow:          var(--glow-navy);
  --entity-hero-gradient: var(--gradient-hero-svs);
}


/* ============================================================
   MODE SOMBRE (préférence système)
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --color-surface-page:         #0F1520;
    --color-surface-section:      #151F30;
    --color-surface-card:         #1A2540;
    --color-text-primary:         #E8EDF5;
    --color-text-secondary:       #9AACBF;
    --color-text-heading:         #FFFFFF;
    --color-text-muted:           #6B7E91;
    --color-border-default:       rgba(255, 255, 255, 0.10);
    --shadow-card:                0 4px 20px rgba(0, 0, 0, 0.40);
    --shadow-card-hover:          0 12px 40px rgba(0, 0, 0, 0.55);
    --shadow-nav:                 0 2px 16px rgba(0, 0, 0, 0.50);
  }
}


/* ============================================================
   CLASSES UTILITAIRES DE COULEUR
   ============================================================ */

/* Texte */
.text-navy          { color: var(--color-navy) !important; }
.text-royal-blue    { color: var(--color-royal-blue) !important; }
.text-signal-red    { color: var(--color-signal-red) !important; }
.text-solar-gold    { color: var(--color-solar-gold) !important; }
.text-safety-green  { color: var(--color-safety-green) !important; }
.text-muted         { color: var(--color-text-muted) !important; }
.text-inverted      { color: var(--color-text-inverted) !important; }

/* Arrière-plans */
.bg-navy            { background-color: var(--color-navy) !important; }
.bg-royal-blue      { background-color: var(--color-royal-blue) !important; }
.bg-signal-red      { background-color: var(--color-signal-red) !important; }
.bg-off-white       { background-color: var(--color-off-white) !important; }
.bg-light-gray      { background-color: var(--color-light-gray) !important; }
.bg-white           { background-color: var(--color-white) !important; }

/* Focus visible (accessibilité) */
:focus-visible {
  outline: 3px solid var(--color-royal-blue);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Réduction des mouvements (accessibilité) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:    0ms;
    --duration-base:    0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
    --duration-slowest: 0ms;
    --duration-page:    0ms;
  }
}