/* ================================================================
   ZOHO DESK - REBRANDING DIGITALLI 2026
   Charte 2026.4 - Laque & Velours & Saphir
   Surface : helpdesk portail client (univers VIVRE - Saphir)

   Palette appliquee :
     Saphir Nuit     #0D1B45  fond navbar
     Saphir          #234AA6  accent, brand, liens actifs
     Saphir Dense    #1A377F  hover
     Bleu Opaline    #D6DEF0  fond hero section
     Blanc Perle     #F3F3F2  fond page
     Gris Anthracite #383E42  texte principal
     Ghost White     #F0F2F9  CTA (clair sur fond sombre)
     Sapin Franc     #2F6B44  CTA sature (universe Creer - autorise uniquement la)

   Regles charte respectees :
     - CTA sur fond clair = Ghost White #F0F2F9, texte Saphir Nuit
     - Radius 4px (web-radius-m DIGITALLI) - jamais arrondi au-dela
     - Texte toujours clair sur fond sombre/degrade
     - Pas d'emoji, pas d'iconographie hors UI fonctionnelle
   ================================================================ */

/* ----------------------------------------------------------------
   NAVBAR
   ---------------------------------------------------------------- */
.Header__navbar {
    background-color: #000000 !important;
    border-bottom: 1px solid rgba(214, 222, 240, 0.06) !important;
    box-shadow: 0 1px 0 rgba(35, 74, 166, 0.25) !important;
}

.Header__container {
    max-width: 1280px;
    margin: 0 auto;
}

/* Logo : sur fond sombre, forcer la version blanche */
.Header__logo img {
    filter: brightness(0) invert(1) !important;
}

/* Nom de la societe / titre portail */
.Header__name {
    color: #F3F3F2 !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
}

/* Liens de navigation */
.Header__tabsTab a,
.Header__tabsTab span,
.Header__tabsTab {
    color: rgba(240, 242, 249, 0.6) !important;
    transition: color 160ms ease !important;
    font-weight: 500 !important;
}

.Header__tabsTab:hover a,
.Header__tabsTab:hover span,
.Header__tabsTab:hover {
    color: #F0F2F9 !important;
}

/* Onglet actif */
.Header__tabsTab.active a,
.Header__tabsTab.activeTab a,
.Header__tabsTab.selected a,
.Header__tabsTab.active span,
.Header__tabsTab.activeTab span,
.Header__tabsTab.selected span {
    color: #F0F2F9 !important;
    border-bottom: 2px solid #234AA6 !important;
}

/* Icone hamburger mobile */
.Header__menu {
    background-color: #F0F2F9 !important;
}

.Header__menuBoxMain {
    color: #F0F2F9 !important;
}

/* ----------------------------------------------------------------
   SECTION HERO / RECHERCHE
   ---------------------------------------------------------------- */
.Header__searchSection,
#headerContent {
    background: linear-gradient(160deg, #0D1B45 0%, #142962 50%, #234AA6 100%) !important;
    padding: 3.5rem 1.5rem !important;
    text-align: center !important;
}

.Header__searchTitle {
    color: #F3F3F2 !important;
    font-size: 2rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 0.5rem !important;
}

.Header__description {
    color: rgba(243, 243, 242, 0.75) !important;
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
}

/* Champ de recherche dans le hero */
.Header__searchSection input,
.Header__searchSection .zt3-search-box,
#headerContent input,
#headerContent .zt3-search-box {
    background: rgba(240, 242, 249, 0.08) !important;
    border: 1px solid rgba(240, 242, 249, 0.22) !important;
    border-radius: 4px !important;
    color: #F3F3F2 !important;
    padding: 0.7rem 1rem !important;
}

.Header__searchSection input::placeholder,
#headerContent input::placeholder {
    color: rgba(240, 242, 249, 0.45) !important;
}

.Header__searchSection input:focus,
#headerContent input:focus {
    border-color: rgba(240, 242, 249, 0.5) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(35, 74, 166, 0.4) !important;
}

/* ----------------------------------------------------------------
   FOND PAGE PRINCIPAL
   ---------------------------------------------------------------- */
body,
.zt3-portal-body,
.zt3-main-container {
    background-color: #F3F3F2 !important;
}

/* ----------------------------------------------------------------
   CLASSES GENERIQUES DE MARQUE (selectors Zoho Desk)
   ---------------------------------------------------------------- */

/* Fond de marque */
.commonStyle__zt3BrandBg {
    background-color: #234AA6 !important;
}

/* Fill SVG couleur de marque */
.commonStyle__zt3BrandFill {
    fill: #234AA6 !important;
}

/* Texte couleur de marque */
.commonStyle__zt3Brand {
    color: #234AA6 !important;
}

/* Icones couleur de marque */
.Icon__brand {
    color: #234AA6 !important;
}

/* Bordures couleur de marque */
.commonStyle__zt3BrandBorder {
    border-color: #234AA6 !important;
}

/* ----------------------------------------------------------------
   BOUTON PRINCIPAL
   Charte : CTA clair (#F0F2F9) sur fond sombre,
   ou CTA sapin (#2F6B44) sur fond clair - univers Vivre = clair
   ---------------------------------------------------------------- */
.Button__footerBtn {
    border: 1px solid transparent !important;
    letter-spacing: 0.06em !important;
    padding: 0.7rem 1.4rem !important;
    font-size: 0.875rem !important;
    border-radius: 4px !important;
    background: #234AA6 !important;
    color: #F0F2F9 !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background 160ms ease, color 160ms ease !important;
    text-transform: uppercase !important;
}

.Button__footerBtn:hover {
    background: #1A377F !important;
    color: #FFFFFF !important;
}

.Button__footerBtn:active {
    background: #142962 !important;
    color: #FFFFFF !important;
}

/* ----------------------------------------------------------------
   FORMULAIRES
   ---------------------------------------------------------------- */

/* Etoile champ obligatoire */
.FormElement__mandatoryStar .FormElement__required:after {
    content: "*" !important;
    color: #234AA6 !important;
    margin: 0 0 0 0.1rem !important;
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="search"],
textarea,
select {
    border-color: rgba(56, 62, 66, 0.25) !important;
    border-radius: 4px !important;
    transition: border-color 160ms ease, box-shadow 160ms ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: #234AA6 !important;
    box-shadow: 0 0 0 2px rgba(35, 74, 166, 0.15) !important;
    outline: none !important;
}

/* ----------------------------------------------------------------
   FIL D'ARIANE (breadcrumbs)
   ---------------------------------------------------------------- */
.BreadCrumbs__breadcrumbsView ul li:last-child {
    color: #234AA6 !important;
}

.BreadCrumbs__breadcrumbsView ul li a {
    color: rgba(56, 62, 66, 0.65) !important;
    transition: color 160ms ease !important;
}

.BreadCrumbs__breadcrumbsView ul li a:hover {
    color: #234AA6 !important;
}

/* ----------------------------------------------------------------
   LIENS ET INTERACTIONS
   ---------------------------------------------------------------- */
a:focus,
a:focus-visible,
button:focus-visible {
    outline: 2px solid #234AA6 !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}

/* Liens en general */
.zt3-portal-body a,
.zt3-main-container a {
    color: #234AA6 !important;
    transition: color 160ms ease !important;
}

.zt3-portal-body a:hover,
.zt3-main-container a:hover {
    color: #1A377F !important;
}

/* ----------------------------------------------------------------
   ELEMENTS ACTIFS / SELECTIONNES
   ---------------------------------------------------------------- */

/* Categories et sections actives */
.active .zt3-active-color,
.selected .zt3-active-color,
[class*="active"][class*="Color"],
[class*="selected"][class*="Color"] {
    color: #234AA6 !important;
}

[class*="active"][class*="Bg"],
[class*="selected"][class*="Bg"] {
    background-color: rgba(35, 74, 166, 0.08) !important;
}

/* ----------------------------------------------------------------
   PAGINATION ET ELEMENTS DE NAVIGATION INTERNE
   ---------------------------------------------------------------- */
.zt3-pagination .active,
.zt3-pagination .current {
    background-color: #234AA6 !important;
    color: #F0F2F9 !important;
    border-color: #234AA6 !important;
}

/* ----------------------------------------------------------------
   BADGES ET STATUTS
   ---------------------------------------------------------------- */
.zt3-status-badge,
[class*="statusBadge"] {
    border-radius: 4px !important;
}

/* ================================================================
   FIN DU CSS DIGITALLI 2026 - ZOHO DESK
   A coller dans l'onglet CSS de l'editeur de template Zoho Desk.

   Notes d'integration :
   - Tous les selectors sont assortis de !important pour surcharger
     les styles inline que Zoho Desk genere dynamiquement.
   - Si un element ne recolore pas, inspecter le selector en
     DevTools et ajouter la regle specifique ici.
   - Le fond du hero utilise un degrade lineaire : si Zoho ne
     le supporte pas, le fallback est #0D1B45 (Saphir Nuit).
   ================================================================ */