/* ========================================================================
   CUSTOM.CSS — OnestQ Custom Styles
   ========================================================================
   Ce fichier contient les styles personnalisés chargés APRÈS main-style.css.
   Inclut :
     1. Styles utilitaires originaux (map, validation, intl-tel)
     2. Override de marque Filéa (ajouté le 09/05/2026)
   ======================================================================== */


/* ========================================================================
   1. STYLES UTILITAIRES ORIGINAUX (ne pas supprimer)
   ======================================================================== */

#map {
    height: 400px;
    /* Adjust height as needed */
    width: 100%;
}

/* Make the intl tel input full width */
.iti {
    width: 100%;
}

/* Validation styles */
.ot-input-tel.error {
    border-color: #dc3545;
}

#valid-msg,
#error-msg {
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

.error {
    font-size: 12px;
    margin-top: 5px;
    color: #dc3545;
}

.blink-border .customDrop-selected {
    border: 1px solid red !important;
}

.blink-border .customDrop-selected .customDrop-selected-info .customDrop-icon svg {
    color: red !important;
}


/*========================================================================
  2. FILÉA — BRAND OVERRIDE
  ========================================================================
  Identité visuelle : Filéa
  Tagline           : « La file maîtrisée »
  Couleurs          : Filéa Bleu / Bleu Onde / Coral Filéa
  Version           : 1.0
  ------------------------------------------------------------------------
  Ce bloc remplace les couleurs OnestQ par celles de Filéa en
  redéfinissant les variables CSS principales.
  ------------------------------------------------------------------------
  ⚠️  NE JAMAIS modifier main-style.css directement.
      Toujours faire les overrides ici.
  ========================================================================*/

:root {
    /* ------------------------------------------------------------------
       2.1 PALETTE FILÉA (référence)
       ------------------------------------------------------------------ */
    --filea-blue:          #0E5468;          /* Couleur principale */
    --filea-blue-rgb:      14, 84, 104;
    --filea-blue-onde:     #4A9CB0;          /* Couleur secondaire */
    --filea-blue-onde-rgb: 74, 156, 176;
    --filea-coral:         #FF7A59;          /* Couleur d'accent */
    --filea-coral-rgb:     255, 122, 89;
    --filea-anthracite:    #0F172A;          /* Texte principal */
    --filea-slate:         #64748B;          /* Texte secondaire */
    --filea-mist:          #F1F5F9;          /* Fond léger */

    /* ------------------------------------------------------------------
       2.2 REMAP — Variables OnestQ → couleurs Filéa
       (Tout ce qui hérite de --ot-primary va automatiquement basculer.)
       ------------------------------------------------------------------ */

    /* Couleur primaire : violet OnestQ → Filéa Bleu */
    --ot-primary:          #0E5468;
    --ot-primary-rgb:      14, 84, 104;
    --ot-primary-btn:      #0E5468;

    /* Couleur secondaire : orange OnestQ → Coral Filéa (rôle accent) */
    --ot-secondary:        #FF7A59;
    --ot-secondary-rgb:    255, 122, 89;
    --ot-secondary-btn:    #FF7A59;

    /* Couleur tertiaire : Bleu Onde (action de support, liens secondaires) */
    --ot-tertiary:         #4A9CB0;
    --ot-tertiary-rgb:     74, 156, 176;
    --ot-tertiary-btn:     #4A9CB0;

    /* ------------------------------------------------------------------
       2.3 ARRIÈRE-PLANS (body & login) — Brume Filéa
       ------------------------------------------------------------------ */
    --body-bg:             #F1F5F9;
    --login-bg:            #F1F5F9;

    /* ------------------------------------------------------------------
       2.4 OMBRES — teintées Filéa Bleu (subtil)
       ------------------------------------------------------------------ */
    --theme-shadow:        0px 0px 20px 0px rgba(14, 84, 104, 0.04);
    --theme-shadow2:       0px 5px 20px 0px rgba(14, 84, 104, 0.20);

    /* ------------------------------------------------------------------
       2.5 SCROLLBARS — Filéa Bleu transparent
       ------------------------------------------------------------------ */
    --scroll-color-one:    rgba(14, 84, 104, 0.27);

    /* ------------------------------------------------------------------
       2.6 BOUTONS PANEL GUICHET
       ------------------------------------------------------------------ */
    /* btn-1 : orange OnestQ → Coral Filéa */
    --counter-btn-1:       #FF7A59;
    --counter-btn-1-rgb:   255, 122, 89;
    /* btn-2 (vert), btn-3 (bleu), btn-5 (rouge) : on garde — sémantique */

    /* ------------------------------------------------------------------
       2.7 TOOLTIP (override hardcoded #6049e7)
       ------------------------------------------------------------------ */
    --tooltip-color:       #0E5468;

    /* ------------------------------------------------------------------
       2.8 TITRES — Anthracite Filéa
       ------------------------------------------------------------------ */
    --ot-primary-title:    #0F172A;
}


/*------------------------------------------------------------------------
  2.9 AJUSTEMENTS SPÉCIFIQUES
  Pour les hardcoded résiduels qui ne sont pas des variables.
------------------------------------------------------------------------*/

/* text-warning : OnestQ utilisait #f28a22 (orange brand).
   Filéa préfère un jaune ambré sémantique pour les warnings. */
.text-warning {
    color: #fdc400 !important;
}

/* Hover des liens : Bleu Onde (plus clair que le primaire) */
a:hover,
a:focus {
    color: #4A9CB0;
}

/* Active state sidebar — accent Coral discret sur la gauche */
.sidebar .nav-link.active,
.sidebar-nav .active,
.menu-item.active > a {
    border-left-color: #FF7A59;
}

/* Boutons "outline" / "soft" qui pourraient ne pas hériter des variables */
.btn-primary-soft-fill,
.btn-outline-primary {
    color: #0E5468;
}

/* Logo placeholder en dur dans certaines vues */
.brand-text,
.brand-name {
    color: #0E5468;
}


/*========================================================================
  Fin du fichier — Filéa Brand v1.0 dans custom.css
========================================================================*/