/* Thème de Décroche : l'unique endroit où sont définies les couleurs et les rayons d'arrondi.
 *
 * Tout le site (Tailwind via @theme dans base.html, thème daisyUI, styles de base.html, carte Leaflet,
 * scripts) utilise ces variables par leur rôle, jamais une valeur écrite en dur.
 *
 * Deux modes, choisis par l'attribut data-mode de <html> (posé avant le premier affichage par le script du
 * <head> de base.html : choix mémorisé sur l'appareil, sinon réglage du système, sinon clair) :
 *   - clair : valeurs par défaut ci-dessous (:root) ;
 *   - sombre : :root[data-mode="dark"], le rendu d'origine du site.
 * Tout rôle défini dans un mode doit l'être dans l'autre.
 *
 * Contrastes (WCAG AA, ≥ 4,5:1 pour le petit texte) vérifiés dans les deux modes sur les fonds --bg,
 * --surface, --surface-2 et --hover : garder ces rapports si une valeur change (tests : scratchpad
 * palette_claire.py pour le calcul, theme2_captures.py CONTRASTE=1 sur toutes les pages).
 * Les composantes « -rgb » (séparées par des virgules) servent aux transparences : rgba(var(--accent-rgb), 0.25).
 */

/* Communs aux deux modes -------------------------------------------------------------------- */
:root {
  /* --- Rayons d'arrondi ------------------------------------------------------------------- */
  /* Boutons : tous en pilule (pleins et contours). Cartes, panneaux et champs : arrondis prononcés, jamais en
     pilule ; le texte sur plusieurs lignes ne touche pas l'arc (vérifié par scratchpad arrondi_js.py). */
  --radius-button: 9999px;          /* boutons (pleins et contours) : pilule */
  --radius-pill: 9999px;            /* boutons ronds, badges, pastilles */
  --radius-input: 0.875rem;         /* champs, menus déroulants de la recherche (0,75rem auparavant) : 14 px sur des champs
                                       de 40 à 44 px de haut ; à 16 px ils paraîtraient déjà en pilule */
  --radius-card: 28px;              /* cartes d'offres, d'annonces, listes (18px auparavant) */
  --radius-panel: 32px;             /* panneaux, formulaires, blocs de page, cartes « bénéfices » (20px) */
  --radius-block: 1.5rem;           /* messages, encadrés, menus du compte (1rem) */
  --radius-inset: 1.125rem;         /* petits encadrés dans un panneau (alertes de formulaire, pièces jointes) (0,75rem) */
  --radius-hero: 2.5rem;            /* grands encadrés de section (1,5rem) */
  --radius-menu: 18px;              /* listes déroulantes (autocomplétion, choix, bulles de carte) (14px) */
  --radius-menu-item: 12px;         /* options de ces listes, info-bulles (10px) */
  --radius-label: 8px;              /* étiquettes (carte) */
  --radius-check: 2rem;             /* cases à cocher, boutons radio (daisyUI) */
}

/* Mode clair (par défaut) ----------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* --- Fonds ------------------------------------------------------------------------------ */
  --bg: #F6F6F8;                    /* fond de page */
  --bg-rgb: 246, 246, 248;
  --surface: #FFFFFF;               /* cartes, panneaux */
  --surface-2: #EFEFF2;             /* champs, menus, surfaces surélevées */
  --hover-soft: #E8E8EC;            /* survol discret (menus déroulants de la recherche) */
  --hover: #E1E1E6;                 /* survol d'une option, d'un bouton de carte */

  /* --- Bordures --------------------------------------------------------------------------- */
  --border-soft: #E4E4E9;
  --border-base: #DADAE0;
  --border-strong: #C9C9D1;

  /* --- Textes (≥ 4,5:1 jusque sur --hover) ------------------------------------------------ */
  --text: #111114;
  --text-muted: #34343C;
  --text-soft: #4A4A53;
  --text-subtle: #5A5A63;
  --text-faint: #606069;

  /* --- Accent rose : plus foncé qu'en mode sombre pour rester lisible sur fond clair ------- */
  --accent: #BE0E55;                /* titres, icônes, lueurs, pastilles : 4,76:1 au pire (--hover) */
  --accent-rgb: 190, 14, 85;
  --accent-strong: #BE0E55;         /* boutons principaux : texte blanc à 6,21:1 */
  --accent-strong-rgb: 190, 14, 85;
  --accent-text: #B80D52;           /* petit texte rose : 5,01:1 au pire (--hover) */
  --accent-text-light: #A00B47;     /* texte rose sur fond rosé (badges) : 6,16:1 */
  --on-accent: #FFFFFF;             /* texte posé sur l'accent, les avatars, les marqueurs */

  /* --- Ombres et lueurs -------------------------------------------------------------------- */
  --shadow-rgb: 40, 40, 60;
  --halo-mask: radial-gradient(closest-side, #000 45%, transparent 100%);  /* lueurs roses (.halo) : bords fondus */
  --copper: #C98B61;                /* cuivre doux (texture liquide seulement, jamais du texte) */
  --liquid-voile: rgba(var(--bg-rgb), 0.55);
  /* --- Fonds animés « liquide » (hero de l'accueil, bandeaux recruteurs) ----------------------------------
     Construits à partir du thème : rose = accent très dilué dans le fond (jamais le rose vif des boutons, qui doit
     continuer à se détacher), cuivre doux = --copper dilué. Le voile (--liquid-voile) passe entre la texture et le
     texte : son opacité garantit des contrastes au moins égaux à ceux d'avant la texture (liquide_test.py). */
  --liquid-1: color-mix(in oklab, var(--accent) 30%, var(--bg));                                  /* rose poudré */
  --liquid-2: color-mix(in oklab, var(--copper) 52%, var(--bg));                                  /* cuivre doux */
  --liquid-3: color-mix(in oklab, color-mix(in oklab, var(--accent) 40%, var(--copper)) 36%, var(--bg)); /* rose cuivré */
  --liquid-veine-1: color-mix(in oklab, color-mix(in oklab, var(--accent) 45%, var(--copper)) 46%, var(--bg)); /* veines rose cuivré */
  --liquid-veine-2: color-mix(in oklab, var(--copper) 52%, var(--bg));                                  /* veines cuivre */
  --liquid-verre: color-mix(in srgb, var(--surface) 60%, transparent);                               /* panneau « verre » sur la texture */

  /* --- États ------------------------------------------------------------------------------ */
  --success-bg: #E3F5EB;
  --success-hover: #D2EEDF;
  --success-border: #8FCDAB;
  --success-border-strong: #4FA97C;
  --success-text: #0F6A3F;
  --success-text-soft: #185C3B;
  --success-dot: #1C9B60;

  --warning-bg: #FCF1D6;
  --warning-bg-soft: #FDF7E6;
  --warning-border: #E3C77C;
  --warning-border-strong: #C9A544;
  --warning-text: #734E00;
  --warning-text-soft: #664607;

  --danger-bg: #FCE6EC;
  --danger-hover: #F8D1DC;
  --danger-border: #EBA3B8;
  --danger-text: #AD1240;
  --danger-text-soft: #8D1536;

  --info-bg: #E8EEFC;
  --info-bg-strong: #D6E1FA;
  --info-border: #A5BCEE;
  --info-border-strong: #7C9BE0;
  --info-text: #1D3E88;
  --info-text-soft: #2A4991;
  --info-icon: #2E5AC2;

  /* --- Couleurs secondaires (thème daisyUI) ----------------------------------------------- */
  --secondary: #2D6FE0;
  --tertiary: #2E9E5B;
  --neutral: #E1E1E6;

  /* --- Info-bulles ------------------------------------------------------------------------ */
  --tooltip-bg: #FFFFFF;
  --tooltip-border: #C9C9D1;
  --tooltip-text: #26262C;

  /* --- Avatars des entreprises (initiale blanche : ≥ 4,5:1 sur chaque teinte) ------------- */
  --avatar-1: #2D6FE0;
  --avatar-2: #27844C;
  --avatar-3: #E01377;
  --avatar-4: #AF6005;
  --avatar-5: #7C3AED;
  --avatar-6: #0B817C;
  --avatar-7: #D53C21;
  --avatar-neutral: #5A5A63;

  /* --- Carte (Leaflet) : tuiles OpenStreetMap d'origine ----------------------------------- */
  --map-bg: #E5E3DF;
  --map-tiles-filter: none;
  --map-marker: var(--accent-strong);
  --map-marker-ring: #FFFFFF;
  --map-cluster-text: #FFFFFF;
  --map-circle: var(--accent-text);
  --map-circle-fill: var(--accent);
  --map-center: var(--accent-text);
  --map-center-ring: #FFFFFF;

  /* --- Curseur du filtre salaire ---------------------------------------------------------- */
  --slider-track: var(--border-strong);
  --slider-range: var(--accent-strong);
  --slider-thumb: #FFFFFF;
}

/* Mode sombre : rendu d'origine du site ------------------------------------------------------ */
:root[data-mode="dark"] {
  color-scheme: dark;

  /* --- Fonds ------------------------------------------------------------------------------ */
  --bg: #0A0A0D;                    /* fond de page */
  --bg-rgb: 10, 10, 13;
  --surface: #101012;               /* cartes, panneaux */
  --surface-2: #151517;             /* champs, menus, surfaces surélevées */
  --hover-soft: #1E1E22;            /* survol discret (menus déroulants de la recherche) */
  --hover: #232327;                 /* survol d'une option, d'un bouton de carte */

  /* --- Bordures --------------------------------------------------------------------------- */
  --border-soft: #1E1E22;
  --border-base: #232327;
  --border-strong: #2A2A2F;

  /* --- Textes ----------------------------------------------------------------------------- */
  --text: #FFFFFF;                  /* titres, texte principal */
  --text-muted: #C7C7CC;
  --text-soft: #A8A8B0;
  --text-subtle: #8A8A92;
  --text-faint: #85858D;            /* le plus discret encore lisible : 4,5:1 minimum sur les champs */

  /* --- Accent rose ------------------------------------------------------------------------ */
  --accent: #E91464;                /* grands titres, icônes, lueurs (≥ 3:1 suffit) */
  --accent-rgb: 233, 20, 100;
  --accent-strong: #E41462;         /* boutons principaux : texte blanc à 4,59:1 */
  --accent-strong-rgb: 228, 20, 98;
  --accent-text: #EF3279;           /* petit texte rose lisible sur fond sombre */
  --accent-text-light: #FF8AB3;     /* texte rose lisible sur fond rosé (badges) */
  --on-accent: #FFFFFF;             /* texte posé sur l'accent */

  /* --- Ombres et lueurs -------------------------------------------------------------------- */
  --shadow-rgb: 0, 0, 0;
  --halo-mask: none;                /* bord des lueurs invisible sur fond sombre */
  --copper: #B0724A;                /* cuivre assombri (texture liquide seulement) */
  --liquid-voile: rgba(var(--bg-rgb), 0.55);
  /* --- Fonds animés « liquide » (hero de l'accueil, bandeaux recruteurs) ----------------------------------
     Construits à partir du thème : rose = accent très dilué dans le fond (jamais le rose vif des boutons, qui doit
     continuer à se détacher), cuivre doux = --copper dilué. Le voile (--liquid-voile) passe entre la texture et le
     texte : son opacité garantit des contrastes au moins égaux à ceux d'avant la texture (liquide_test.py). */
  --liquid-1: color-mix(in oklab, var(--accent) 30%, var(--bg));                                  /* rose poudré */
  --liquid-2: color-mix(in oklab, var(--copper) 52%, var(--bg));                                  /* cuivre doux */
  --liquid-3: color-mix(in oklab, color-mix(in oklab, var(--accent) 40%, var(--copper)) 36%, var(--bg)); /* rose cuivré */
  --liquid-veine-1: color-mix(in oklab, color-mix(in oklab, var(--accent) 45%, var(--copper)) 46%, var(--bg)); /* veines rose cuivré */
  --liquid-veine-2: color-mix(in oklab, var(--copper) 52%, var(--bg));                                  /* veines cuivre */
  --liquid-verre: color-mix(in srgb, var(--surface) 60%, transparent);                               /* panneau « verre » sur la texture */

  /* --- États ------------------------------------------------------------------------------ */
  --success-bg: #0F3324;
  --success-hover: #14402D;
  --success-border: #1F6B4A;
  --success-border-strong: #2F8A60;
  --success-text: #7EE2B0;
  --success-text-soft: #BFEFD6;
  --success-dot: #34D399;

  --warning-bg: #3D2E0B;
  --warning-bg-soft: #2A2109;
  --warning-border: #6B5A1F;
  --warning-border-strong: #8A7427;
  --warning-text: #F5CE72;
  --warning-text-soft: #F3E3B5;

  --danger-bg: #3F1320;
  --danger-hover: #5A1A2D;
  --danger-border: #7A2A40;
  --danger-text: #FF9DB7;
  --danger-text-soft: #FFC2D3;

  --info-bg: #111A2E;
  --info-bg-strong: #1D2B4A;
  --info-border: #2F4A85;
  --info-border-strong: #3B5BA0;
  --info-text: #C9DAFF;
  --info-text-soft: #AFC3EE;
  --info-icon: #9DB9FF;

  /* --- Couleurs secondaires (thème daisyUI) ----------------------------------------------- */
  --secondary: #2D6FE0;
  --tertiary: #2E9E5B;
  --neutral: #1E1E22;

  /* --- Info-bulles ------------------------------------------------------------------------ */
  --tooltip-bg: #232327;
  --tooltip-border: #3A3A40;
  --tooltip-text: #E4E4E8;

  /* --- Avatars des entreprises (initiale blanche : ≥ 4,5:1 sur chaque teinte) ------------- */
  --avatar-1: #2D6FE0;
  --avatar-2: #27844C;
  --avatar-3: #E01377;
  --avatar-4: #AF6005;
  --avatar-5: #7C3AED;
  --avatar-6: #0B817C;
  --avatar-7: #D53C21;
  --avatar-neutral: #3A3A40;

  /* --- Carte (Leaflet) -------------------------------------------------------------------- */
  --map-bg: #111114;
  --map-tiles-filter: invert(100%) hue-rotate(180deg) brightness(92%) contrast(88%) saturate(55%);
  --map-marker: var(--accent-strong);
  --map-marker-ring: #FFFFFF;
  --map-cluster-text: #FFFFFF;
  --map-circle: var(--accent-text);
  --map-circle-fill: var(--accent);
  --map-center: var(--accent-text);
  --map-center-ring: #FFFFFF;

  /* --- Curseur du filtre salaire ---------------------------------------------------------- */
  --slider-track: var(--border-strong);
  --slider-range: var(--accent-strong);
  --slider-thumb: #FFFFFF;

}

/* Fond du document dès la toute première image, avant que Tailwind (CDN) n'ait généré la classe bg-page du <body> :
   sans lui, le navigateur afficherait une image avec son fond par défaut (blanc ou gris foncé) : léger clignotement. */
html { background-color: var(--bg); }

/* Pages à fond liquide (accueil, /recruteurs) : le fond n'est plus uni, les petits textes discrets et roses prennent
   leur variante la plus contrastée (contraste mesuré au pixel le plus défavorable : scratchpad liquide_page_test.py) */
:root:has(.liquide), :root[data-mode]:has(.liquide) {
  --text-subtle: var(--text-soft);
  --accent-text: var(--accent-text-light);
}