/* ===========================================================================
   WESTPORTS — Design System : jetons
   LOT 06. Aucune valeur brute (couleur, espacement, durée) ne doit apparaître
   ailleurs que dans ce fichier.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Palette de marque — invariante.

   Ces valeurs ne changent jamais d'un thème à l'autre : ce sont les encres
   dont dispose la marque. Ce qui change, ce sont les RÔLES définis plus bas,
   qui disent quelle encre sert à quoi selon le registre, clair ou sombre.
   Un composant ne doit donc jamais nommer une encre : il nomme un rôle.
   --------------------------------------------------------------------------- */

:root {
    /* Bleu de coque : la couleur d'autorité. Titres, pied de page, boutons. */
    --wp-navy-950: #03182a;
    --wp-navy-900: #06233a;
    --wp-navy-850: #0a2a45;
    --wp-navy-800: #0d3150;
    --wp-navy-700: #123c60;
    --wp-navy-600: #1c4165;
    --wp-navy-500: #24527d;

    /* Bleu de mer : le registre clair. Liens, états actifs, aplats doux.
       C'est lui qui donne au site son air maritime plutôt que nocturne. */
    --wp-sea-700: #075985;
    --wp-sea-600: #0369a1;
    --wp-sea-500: #0284c7;
    --wp-sea-400: #5fb0dd;
    --wp-sea-300: #9bcfeb;
    --wp-sea-200: #c9e6f5;
    --wp-sea-100: #e4f2fa;
    --wp-sea-50:  #f2f9fd;

    /* Conservés pour compatibilité avec les règles écrites au LOT 06. */
    --wp-blue-500: var(--wp-sea-500);
    --wp-blue-400: var(--wp-sea-400);
    --wp-blue-300: var(--wp-sea-300);

    /* Orange sécurité (refonte oct. 2026) : les noms « gold » sont conservés pour
       ne pas réécrire chaque règle ; la valeur est l'orange #FF6B00 de la charte.
       Le 600/700 assombri sert au texte sur fond clair (contraste AA). */
    --wp-gold-700: #b34700;
    --wp-gold-600: #d95700;
    --wp-gold-500: #ff6b00;
    --wp-gold-400: #ff8a33;
    --wp-gold-200: #ffe1cc;

    /* Neutres */
    --wp-white:     #ffffff;
    --wp-sand-50:   #f5f7fa;
    --wp-sand-100:  #e9edf2;
    --wp-grey-200:  #dcdcd8;
    --wp-grey-300:  #c4c7ca;
    --wp-grey-400:  #9aa0a6;
    --wp-grey-600:  #5f666d;
    --wp-grey-700:  #434a51;
    --wp-ink:       #10171f;

    /* États */
    --wp-success: #1f7a4d;
    --wp-warning: #b67a16;
    --wp-danger:  #b4432f;
    --wp-info:    var(--wp-sea-600);

    /* -----------------------------------------------------------------------
       Rôles — registre CLAIR, celui par défaut.

       Le site est maritime, pas nocturne : le blanc domine, le marine devient
       une couleur d'appui — titres, pied de page, boutons — et le bleu de mer
       porte les aplats. Le sombre reste disponible d'un clic, pour qui
       travaille de nuit ou préfère ce registre.
       -------------------------------------------------------------------- */
    --wp-bg:              var(--wp-white);
    --wp-bg-alt:          var(--wp-sand-50);
    --wp-bg-sunken:       var(--wp-sea-50);
    --wp-bg-inverse:      var(--wp-navy-900);
    --wp-bg-inverse-alt:  var(--wp-navy-850);
    --wp-surface:         var(--wp-white);
    --wp-surface-raised:  var(--wp-white);
    --wp-surface-sunken:  var(--wp-sand-50);

    --wp-text:            var(--wp-ink);
    --wp-text-strong:     var(--wp-navy-900);
    --wp-text-muted:      var(--wp-grey-600);
    --wp-text-inverse:    var(--wp-white);
    --wp-text-inverse-muted: rgba(255, 255, 255, 0.68);

    --wp-border:          rgba(16, 23, 31, 0.12);
    --wp-border-strong:   rgba(16, 23, 31, 0.24);
    --wp-border-inverse:  rgba(255, 255, 255, 0.16);

    --wp-accent:          var(--wp-gold-600);
    --wp-accent-contrast: var(--wp-navy-900);
    --wp-accent-soft:     var(--wp-gold-200);
    --wp-link:            var(--wp-sea-700);
    --wp-link-hover:      var(--wp-gold-700);

    /* Rôles de composants : ce qui, sinon, serait écrit en dur ailleurs. */
    --wp-header-bg:       rgba(255, 255, 255, 0.92);
    --wp-header-bg-solid: var(--wp-white);
    --wp-header-fg:       var(--wp-navy-900);
    --wp-header-border:   rgba(16, 23, 31, 0.10);

    --wp-footer-bg:       var(--wp-navy-900);
    --wp-footer-fg:       var(--wp-white);
    --wp-footer-muted:    rgba(255, 255, 255, 0.64);
    --wp-footer-border:   rgba(255, 255, 255, 0.14);

    /* Bandeau d'accueil : clair, lisible, le visuel par-dessus. */
    --wp-hero-bg:         var(--wp-sea-50);
    --wp-hero-fg:         var(--wp-navy-900);
    --wp-hero-muted:      var(--wp-grey-700);
    /* Le voile éclaircit l'image juste assez pour que le texte tienne le
       contraste, sans l'effacer : une illustration qu'on ne distingue plus
       ne sert à rien. Il est plus dense à gauche, là où se trouve le texte. */
    /* Voile du hero : opaque là où court le texte, presque nul à droite.
       Un voile uniforme protège la lisibilité en délavant l'image entière —
       c'est le défaut qu'on corrige ici : le dégradé travaille sur l'axe du
       texte, pas sur toute la largeur. */
    --wp-hero-veil:       linear-gradient(90deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.92) 32%, rgba(255, 255, 255, 0.40) 50%, rgba(255, 255, 255, 0.06) 66%, rgba(255, 255, 255, 0) 100%),
                          linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 28%, rgba(226, 242, 251, 0.26) 100%);

    --wp-btn-primary-bg:  var(--wp-navy-900);
    --wp-btn-primary-fg:  var(--wp-white);
    --wp-btn-ghost-fg:    var(--wp-navy-900);

    --wp-overlay:         rgba(6, 20, 35, 0.52);

    /* --- Typographie ---------------------------------------------------- */
    --wp-font-display: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --wp-font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --wp-font-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

    /* Échelle fluide : clamp(min, préférence, max). */
    --wp-text-xs:   0.75rem;
    --wp-text-sm:   0.8125rem;
    --wp-text-base: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
    --wp-text-lg:   clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --wp-text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --wp-text-2xl:  clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
    --wp-text-3xl:  clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
    --wp-text-4xl:  clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
    --wp-text-hero: clamp(2.5rem, 1.4rem + 4.8vw, 5rem);

    --wp-leading-tight:   1.08;
    --wp-leading-snug:    1.25;
    --wp-leading-normal:  1.6;
    --wp-leading-relaxed: 1.75;

    --wp-tracking-tight: -0.02em;
    --wp-tracking-wide:  0.08em;
    --wp-tracking-caps:  0.16em;

    /* --- Espacement (base 4 px) ----------------------------------------- */
    --wp-space-1:  0.25rem;
    --wp-space-2:  0.5rem;
    --wp-space-3:  0.75rem;
    --wp-space-4:  1rem;
    --wp-space-5:  1.5rem;
    --wp-space-6:  2rem;
    --wp-space-7:  2.5rem;
    --wp-space-8:  3rem;
    --wp-space-9:  4rem;
    --wp-space-10: 5rem;
    --wp-space-11: 6.5rem;
    --wp-space-12: 8rem;

    /* Rythme vertical des sections : généreux, respirant. */
    --wp-section-y:       clamp(3.5rem, 2rem + 6vw, 7.5rem);
    --wp-section-y-tight: clamp(2.5rem, 1.5rem + 4vw, 5rem);

    /* --- Grille et gouttières ------------------------------------------- */
    --wp-container:      1320px;
    --wp-container-wide: 1600px;
    --wp-container-text: 760px;
    --wp-gutter:         clamp(1.25rem, 0.8rem + 2.2vw, 3rem);
    --wp-grid-gap:       clamp(1.25rem, 0.9rem + 1.4vw, 2rem);

    /* --- Rayons ---------------------------------------------------------- */
    --wp-radius-xs: 2px;
    --wp-radius-sm: 4px;
    --wp-radius-md: 8px;
    --wp-radius-lg: 14px;
    --wp-radius-xl: 22px;
    --wp-radius-full: 999px;

    /* --- Ombres : discrètes, jamais de halo diffus ----------------------- */
    --wp-shadow-sm: 0 1px 2px rgba(6, 20, 35, 0.06), 0 1px 1px rgba(6, 20, 35, 0.04);
    --wp-shadow-md: 0 4px 16px rgba(6, 20, 35, 0.08), 0 1px 3px rgba(6, 20, 35, 0.05);
    --wp-shadow-lg: 0 18px 48px rgba(6, 20, 35, 0.14), 0 4px 12px rgba(6, 20, 35, 0.06);
    --wp-shadow-inverse: 0 24px 60px rgba(0, 0, 0, 0.45);

    /* --- Mouvement ------------------------------------------------------- */
    --wp-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
    --wp-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --wp-duration-fast:   160ms;
    --wp-duration-base:   280ms;
    --wp-duration-slow:   560ms;
    --wp-duration-reveal: 900ms;

    /* --- Couches --------------------------------------------------------- */
    --wp-z-base:      1;
    --wp-z-sticky:    100;
    --wp-z-header:    200;
    --wp-z-drawer:    300;
    --wp-z-overlay:   400;
    --wp-z-modal:     500;
    --wp-z-toast:     600;
    --wp-z-floating:  150;

    /* --- Composants ------------------------------------------------------ */
    --wp-header-height:        84px;
    --wp-header-height-scrolled: 68px;
    --wp-mobilebar-height:     64px;
    --wp-focus-ring:           2px solid var(--wp-gold-500);
    --wp-focus-offset:         3px;
}

/* ---------------------------------------------------------------------------
   Rôles — registre SOMBRE.

   Même liste de rôles, autres encres. Aucun composant n'a besoin de connaître
   ce bloc : il suffit qu'il ait nommé des rôles et non des couleurs.

   Le thème ne suit pas le réglage du système : le clair est le registre de la
   marque, et le sombre un choix que le visiteur pose lui-même. Ce choix est
   mémorisé, et un script en ligne l'applique avant le premier rendu pour
   qu'aucune page ne s'affiche brièvement dans le mauvais registre.
   --------------------------------------------------------------------------- */

:root[data-theme='dark'] {
    --wp-bg:              var(--wp-navy-900);
    --wp-bg-alt:          var(--wp-navy-850);
    --wp-bg-sunken:       var(--wp-navy-950);
    --wp-bg-inverse:      var(--wp-navy-800);
    --wp-bg-inverse-alt:  var(--wp-navy-850);
    --wp-surface:         var(--wp-navy-850);
    --wp-surface-raised:  var(--wp-navy-800);
    --wp-surface-sunken:  var(--wp-navy-950);

    --wp-text:            #eef3f8;
    --wp-text-strong:     var(--wp-white);
    --wp-text-muted:      rgba(238, 243, 248, 0.64);
    --wp-text-inverse:    var(--wp-navy-900);
    --wp-text-inverse-muted: rgba(6, 20, 35, 0.68);

    --wp-border:          rgba(255, 255, 255, 0.14);
    --wp-border-strong:   rgba(255, 255, 255, 0.28);
    --wp-border-inverse:  rgba(16, 23, 31, 0.18);

    --wp-accent:          var(--wp-gold-400);
    --wp-accent-contrast: var(--wp-navy-900);
    --wp-accent-soft:     rgba(221, 189, 114, 0.16);
    --wp-link:            var(--wp-sea-300);
    --wp-link-hover:      var(--wp-gold-400);

    --wp-header-bg:       rgba(6, 20, 35, 0.88);
    --wp-header-bg-solid: var(--wp-navy-900);
    --wp-header-fg:       var(--wp-white);
    --wp-header-border:   rgba(255, 255, 255, 0.12);

    --wp-footer-bg:       var(--wp-navy-950);
    --wp-footer-fg:       var(--wp-white);
    --wp-footer-muted:    rgba(255, 255, 255, 0.60);
    --wp-footer-border:   rgba(255, 255, 255, 0.12);

    --wp-hero-bg:         var(--wp-navy-900);
    --wp-hero-fg:         var(--wp-white);
    --wp-hero-muted:      rgba(255, 255, 255, 0.72);
    --wp-hero-veil:       linear-gradient(180deg, rgba(4, 16, 28, 0.80) 0%, rgba(6, 20, 35, 0.62) 48%, rgba(6, 20, 35, 0.92) 100%);

    --wp-btn-primary-bg:  var(--wp-gold-500);
    --wp-btn-primary-fg:  var(--wp-navy-950);
    --wp-btn-ghost-fg:    var(--wp-white);

    --wp-overlay:         rgba(0, 0, 0, 0.64);

    /* Une ombre portée ne se voit pas sur un fond sombre : on la remplace par
       un liseré clair, qui joue le même rôle de détachement. */
    --wp-shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.06);
    --wp-shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.40);
    --wp-shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 24px 56px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
}

:root { color-scheme: light; }

/* Les sections en contraste redéfinissent les rôles localement : un composant
   ne connaît que le rôle, jamais la couleur de fond sur laquelle il est posé.
   En clair, c'est une bande marine qui ponctue la page ; en sombre, une
   surface légèrement relevée — l'intention est la même, respirer, et elle se
   traduit différemment selon le registre. */
.wp-inverse {
    --wp-bg:             var(--wp-bg-inverse);
    --wp-bg-alt:         var(--wp-bg-inverse-alt);
    --wp-bg-sunken:      var(--wp-navy-950);
    --wp-surface:        var(--wp-navy-850);
    --wp-surface-raised: var(--wp-navy-800);
    --wp-surface-sunken: var(--wp-navy-950);
    --wp-text:           var(--wp-white);
    --wp-text-strong:    var(--wp-white);
    --wp-text-muted:     rgba(255, 255, 255, 0.66);
    --wp-border:         rgba(255, 255, 255, 0.14);
    --wp-border-strong:  rgba(255, 255, 255, 0.28);
    --wp-link:           var(--wp-white);
    --wp-link-hover:     var(--wp-gold-400);
    --wp-accent:         var(--wp-gold-400);
    --wp-btn-primary-bg: var(--wp-gold-500);
    --wp-btn-primary-fg: var(--wp-navy-950);
    --wp-btn-ghost-fg:   var(--wp-white);

    background-color: var(--wp-bg);
    color: var(--wp-text);
}

/* La bascule ne doit pas produire un clignotement de toute la page : une
   transition courte sur les seules propriétés concernées suffit, et elle est
   désactivée pour qui demande moins de mouvement. */
@media (prefers-reduced-motion: no-preference) {
    .wp-theming,
    .wp-theming * {
        transition: background-color 200ms var(--wp-ease),
                    border-color 200ms var(--wp-ease),
                    color 200ms var(--wp-ease) !important;
    }
}