/*
 * Surcharge de la couleur principale en fonction de la société connectée.
 * La classe "societe-xxx" est posée sur la balise <html> par conf/conf.php
 * (à partir de $_SESSION['societe']) ou, sur l'écran d'authentification,
 * par le JS de la liste déroulante "societe".
 */

/* Aucune société (écran d'authentification avant sélection) */
:root {
    --couleur-societe: #ffffff;
    --couleur-societe-texte: #000000;
}
:root:not([class*="societe-"]) .btn.btn-marraud {
    border: 1px solid #cccccc;
}

/* Teinte claire (survols, éléments actifs) dérivée de la couleur de la société */
:root[class*="societe-"] {
    --couleur-societe-claire: color-mix(in srgb, var(--couleur-societe) 70%, #ffffff);
}

/* Marraud architecture&ingénierie */
:root.societe-mi {
    --couleur-societe: #a38752;
    --couleur-sidebar-profile: #a38752;
    --couleur-societe-texte: #ffffff;
}

/* Marraud design&build */
:root.societe-phmimmo {
    --couleur-societe: #00816d;
    --couleur-sidebar-profile: #00816d;
    --couleur-societe-texte: #ffffff;
}

/* Marraud promotion&construction */
:root.societe-phminvest {
    --couleur-societe: #72246c;
    --couleur-sidebar-profile: #72246c;
    --couleur-societe-texte: #ffffff;
}

/* Page d'accueil : vignette # TEMPO (effect-oscar) à la couleur exacte de la société.
   L'image ne sert plus qu'à donner la taille du cadre, elle est masquée. */
:root[class*="societe-"] .hover-ideas figure.effect-oscar {
    background: var(--couleur-societe);
}
:root[class*="societe-"] .hover-ideas figure.effect-oscar img,
:root[class*="societe-"] .hover-ideas figure.effect-oscar:hover img {
    opacity: 0;
}
:root[class*="societe-"] .hover-ideas figure.effect-oscar figcaption,
:root[class*="societe-"] .hover-ideas figure.effect-oscar:hover figcaption {
    background-color: transparent;
}

/* Boutons Bootstrap "btn-primary" (bleus par défaut) aux couleurs de la société */
:root[class*="societe-"] .btn-primary {
    background-color: var(--couleur-societe);
    border-color: var(--couleur-societe);
    color: var(--couleur-societe-texte);
}
:root[class*="societe-"] .btn-primary:hover,
:root[class*="societe-"] .btn-primary:focus,
:root[class*="societe-"] .btn-primary.focus,
:root[class*="societe-"] .btn-primary:active,
:root[class*="societe-"] .btn-primary.active,
:root[class*="societe-"] .open > .dropdown-toggle.btn-primary {
    background-color: color-mix(in srgb, var(--couleur-societe) 80%, #000000);
    border-color: color-mix(in srgb, var(--couleur-societe) 80%, #000000);
    color: var(--couleur-societe-texte);
}
:root[class*="societe-"] .btn-primary.disabled,
:root[class*="societe-"] .btn-primary[disabled],
:root[class*="societe-"] fieldset[disabled] .btn-primary {
    background-color: var(--couleur-societe);
    border-color: var(--couleur-societe);
}

/* Bordure du bas de la topbar aux couleurs de la société */
:root[class*="societe-"] .header {
    border-bottom: 3px solid var(--couleur-societe);
}
/* Le bloc du logo (60px) recouvrait la bordure : il s'arrête au-dessus */
:root[class*="societe-"] .header .brand {
    height: 100%;
    border-bottom: none;
}

/* Titres de panneaux "bg-primary" (bleu Bootstrap) aux couleurs de la société */
:root[class*="societe-"] .bg-primary,
:root[class*="societe-"] .bg-primary h1,
:root[class*="societe-"] .bg-primary h2,
:root[class*="societe-"] .bg-primary h3,
:root[class*="societe-"] .bg-primary h4,
:root[class*="societe-"] .bg-primary h5,
:root[class*="societe-"] .bg-primary h6,
:root[class*="societe-"] .bg-primary .modal-header,
:root[class*="societe-"] .bg-primary button {
    background-color: var(--couleur-societe) !important;
    color: var(--couleur-societe-texte) !important;
}

/* En-têtes de tableaux "bg-midnight-blue" : teinte foncée de la couleur de la société */
:root[class*="societe-"] {
    --couleur-societe-foncee: color-mix(in srgb, var(--couleur-societe) 65%, #000000);
}
:root[class*="societe-"] .bg-midnight-blue,
:root[class*="societe-"] .bg-midnight-blue h1,
:root[class*="societe-"] .bg-midnight-blue h2,
:root[class*="societe-"] .bg-midnight-blue h3,
:root[class*="societe-"] .bg-midnight-blue h4,
:root[class*="societe-"] .bg-midnight-blue h5,
:root[class*="societe-"] .bg-midnight-blue h6,
:root[class*="societe-"] .bg-midnight-blue .modal-header,
:root[class*="societe-"] .bg-midnight-blue button {
    background-color: var(--couleur-societe-foncee);
}

.progress-bar {
    color: #000;
}

:root[class*="societe-"] .fg-cyan {
    background-color: var(--couleur-societe) !important;
    color: var(--couleur-societe-texte) !important;
}
/* Cases à cocher / boutons radio iCheck "square-aero" aux couleurs de la société.
   Le sprite aero.png est découpé en deux (images/icheck/) :
   - aero-base@2x.png   : bordures grises, coche blanche, états désactivés (sans la couleur d'accent)
   - aero-masque@2x.png : forme de la couleur d'accent, peinte en var(--couleur-societe) via ::before
   --icheck-pos porte la position dans le sprite, partagée par le fond et le masque. */
:root[class*="societe-"] .icheckbox_square-aero,
:root[class*="societe-"] .iradio_square-aero {
    background-image: url(../../images/icheck/aero-base@2x.png);
    -webkit-background-size: 240px 24px;
    background-size: 240px 24px;
    background-position: var(--icheck-pos);
}
:root[class*="societe-"] .icheckbox_square-aero::before,
:root[class*="societe-"] .iradio_square-aero::before {
    content: "";
    /* En bloc dans le flux (pas en absolute) : theme.css force les cases iCheck en
       position: static !important (div[class^="icheck"]), un ::before absolu se calerait
       alors sur un parent plus large. Dans le flux, il occupe exactement la case 22x22. */
    display: block;
    width: 22px;
    height: 22px;
    pointer-events: none;
    background-color: var(--couleur-societe);
    -webkit-mask-image: url(../../images/icheck/aero-masque@2x.png);
    mask-image: url(../../images/icheck/aero-masque@2x.png);
    -webkit-mask-size: 240px 24px;
    mask-size: 240px 24px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: var(--icheck-pos);
    mask-position: var(--icheck-pos);
}
:root[class*="societe-"] .icheckbox_square-aero                  { --icheck-pos: 0 0; }
:root[class*="societe-"] .icheckbox_square-aero.hover            { --icheck-pos: -24px 0; }
:root[class*="societe-"] .icheckbox_square-aero.checked          { --icheck-pos: -48px 0; }
:root[class*="societe-"] .icheckbox_square-aero.disabled         { --icheck-pos: -72px 0; }
:root[class*="societe-"] .icheckbox_square-aero.checked.disabled { --icheck-pos: -96px 0; }
:root[class*="societe-"] .iradio_square-aero                     { --icheck-pos: -120px 0; }
:root[class*="societe-"] .iradio_square-aero.hover               { --icheck-pos: -144px 0; }
:root[class*="societe-"] .iradio_square-aero.checked             { --icheck-pos: -168px 0; }
:root[class*="societe-"] .iradio_square-aero.disabled            { --icheck-pos: -192px 0; }
:root[class*="societe-"] .iradio_square-aero.checked.disabled    { --icheck-pos: -216px 0; }