/* ===========================
   Thème unifié Mastersol (UI)
   =========================== */

:root{
    --ms-primary:#014a97;
    --ms-primary-hover:#013a75;
    --ms-link:var(--ms-primary);
    --ms-text:#212529;
    --ms-muted:#6c757d;
    --ms-border:#ced4da;
    --ms-bg:#ffffff;
    --ms-bg-soft:#f5f7fb;
    --ms-addon-bg:#e9ecef;
    --ms-radius:0;
    --ms-gap:30px;
}

/* Liens (front) */
.mastersol-dashboard a,
.mastersol-form-container a,
.mastersol-login-form a{
    color: var(--ms-link);
    text-decoration: none;
}
.mastersol-dashboard a:hover,
.mastersol-form-container a:hover,
.mastersol-login-form a:hover{
    text-decoration: underline;
}

/* Champs */
.mastersol-form-container .form-control,
.mastersol-login-form .form-control,
.mastersol-rf-form .form-control,
.mastersol-sr-form .form-control,
.mastersol-form-container .form-select,
.mastersol-rf-form .form-select,
.mastersol-sr-form .form-select{
    color: var(--ms-text);
    background-color: var(--ms-bg);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
}

/* Addons */
.input-group-text{
    background-color: var(--ms-addon-bg);
    border-color: var(--ms-border);
    border-radius: var(--ms-radius);
}

/* Boutons */
.btn{
    border-radius: var(--ms-radius);
}
.btn-primary{
    background-color: var(--ms-primary);
    border-color: var(--ms-primary);
}
.btn-primary:hover{
    background-color: var(--ms-primary-hover);
    border-color: var(--ms-primary-hover);
}
.btn-outline-primary{
    color: var(--ms-primary);
    border-color: var(--ms-primary);
}
.btn-outline-primary:hover{
    color:#fff;
    background-color: var(--ms-primary);
    border-color: var(--ms-primary);
}



/* Liens sous le formulaire de connexion */
.mastersol-login-links a {
    text-decoration: none;
}
.mastersol-login-links a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   COMPAT DIVI / THÈMES — INPUT-GROUP (icônes dans les champs)
   Objectif :
   - Forcer l'icône à gauche DANS le champ (input-group en ligne)
   - Empêcher les thèmes (ex: Divi) de passer l'input-group en colonne
   - Unifier les border-radius (pas de demi-arrondis)
   ========================================================================== */

.mastersol-form-container .input-group,
.mastersol-login-form .input-group,
.mastersol-rf-form .input-group,
.mastersol-sr-form .input-group{
    display:flex;
    flex-direction:row;
    align-items:stretch;
    width:100%;
}

.mastersol-form-container .input-group-text,
.mastersol-login-form .input-group-text,
.mastersol-rf-form .input-group-text,
.mastersol-sr-form .input-group-text{
    display:flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    border-right:0;
    border-radius: var(--ms-radius) 0 0 var(--ms-radius);
}

.mastersol-form-container .input-group > .form-control,
.mastersol-form-container .input-group > .form-select,
.mastersol-login-form .input-group > .form-control,
.mastersol-login-form .input-group > .form-select,
.mastersol-rf-form .input-group > .form-control,
.mastersol-rf-form .input-group > .form-select,
.mastersol-sr-form .input-group > .form-control,
.mastersol-sr-form .input-group > .form-select{
    border-left:0;
    border-radius: 0 var(--ms-radius) var(--ms-radius) 0;
}

/* ==========================================================================
   COMPAT DASHBOARD — INPUT-GROUP (sélecteur centrale)
   Objectif : obtenir exactement le même rendu que les formulaires RF/SR
   ========================================================================== */

.mastersol-dashboard .input-group{
    display:flex;
    flex-direction:row;
    align-items:stretch;
    width:100%;
}

.mastersol-dashboard .input-group-text{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:.375rem .75rem;
    background-color: var(--ms-addon-bg);
    border:1px solid var(--ms-border);
    border-right:0;
    color:#495057;
    white-space:nowrap;
    border-radius: var(--ms-radius) 0 0 var(--ms-radius);
}

.mastersol-dashboard .input-group > .form-control,
.mastersol-dashboard .input-group > .form-select{
    flex:1 1 auto;
    width:1%;
    min-width:0;
    padding:.375rem .75rem;
    background-color: var(--ms-bg);
    border:1px solid var(--ms-border);
    border-left:0;
    border-radius: 0 var(--ms-radius) var(--ms-radius) 0;
}


/* Actions formulaire : toujours sur une ligne dédiée en bas */
.mastersol-form-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:18px;
    width:100%;
}


/* ==========================================================================
   COMPAT LOGIN — INPUT-GROUP (même rendu que RF/SR)
   ========================================================================== */
.mastersol-login-form .input-group-text{
    background-color: var(--ms-addon-bg);
    border:1px solid var(--ms-border);
    border-right:0;
    color:#495057;
}
.mastersol-login-form .input-group > .form-control{
    border:1px solid var(--ms-border);
    border-left:0;
    background-color: var(--ms-bg);
}

/* ==========================================================================
   MASTERSOL — UI UNIVERSEL (site-wide, Divi)
   Objectif : rendu homogène partout + mobile-first.
   ========================================================================== */

/* Champs (tous formulaires du site) */
body input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]),
body select,
body textarea{
    width:100%;
    max-width:100%;
    padding:.375rem .75rem;
    font-size:1rem;
    line-height:1.5;
    color: var(--ms-text);
    background-color: var(--ms-bg);
    border:1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    box-sizing:border-box;
}

/* Focus clair */
body input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
body select:focus,
body textarea:focus{
    outline:none;
    border-color: var(--ms-primary);
    box-shadow: 0 0 0 2px rgba(1,74,151,.15);
}

/* Boutons (global) */
body .btn,
body button,
body input[type="submit"],
body input[type="button"],
body input[type="reset"]{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border-radius: var(--ms-radius);
    border:1px solid transparent;
    line-height:1.2;
    cursor:pointer;
    text-decoration:none;
    box-sizing:border-box;
}

/* Primaire */
body .btn-primary{
    background-color: var(--ms-primary);
    border-color: var(--ms-primary);
    color:#fff;
}
body .btn-primary:hover{
    background-color: var(--ms-primary-hover);
    border-color: var(--ms-primary-hover);
    color:#fff;
}

/* Secondaire (outline) */
body .mastersol-btn-secondary,
body .btn-outline-primary{
    background-color: transparent;
    border: 1px solid var(--ms-primary);
    color: var(--ms-primary);
}
body .mastersol-btn-secondary:hover,
body .btn-outline-primary:hover{
    background-color: var(--ms-primary);
    border-color: var(--ms-primary);
    color:#fff;
}

/* Mobile-first : boutons full width dans l'app */
@media (max-width: 767px){
    body .mastersol-form-actions .btn,
    body .mastersol-action-buttons .btn{
        width:100%;
    }
}

/* Input-group universel (icône dans le champ) */
body .input-group{
    display:flex;
    flex-direction:row;
    align-items:stretch;
    width:100%;
}

body .input-group-text{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:.375rem .75rem;
    background-color: var(--ms-addon-bg);
    border:1px solid var(--ms-border);
    border-right:0;
    color:#495057;
    white-space:nowrap;
    border-radius: var(--ms-radius) 0 0 var(--ms-radius);
}

body .input-group > .form-control,
body .input-group > .form-select{
    flex:1 1 auto;
    width:1%;
    min-width:0;
    border-left:0;
    border-radius: 0 var(--ms-radius) var(--ms-radius) 0;
}


/* ==========================================================================
   RADIOS / CHECKBOX — préserver le comportement natif (inline, proche du label)
   ========================================================================== */
body input[type="radio"],
body input[type="checkbox"]{
    width:auto;
    max-width:none;
    padding:0;
    border:none;
    box-shadow:none;
}

body label{
    cursor:pointer;
}

/* Dans l'app, labels alignés proprement (évite le radio "loin" du texte) */
.mastersol-form-container label{
    display:inline-flex;
    align-items:center;
    gap:8px;
}


/* ==========================================================================
   MASTERSOL — SR BOX (RC / RF)
   ========================================================================== */
.mastersol-sr-box{
    border:1px solid var(--ms-border);
    border-radius: 12px;
    padding:14px 14px 6px;
    background: var(--ms-bg);
    margin-bottom: var(--ms-gap);
}
.mastersol-sr-box-title{
    display:block;
    font-weight:600;
    margin:0 0 10px;
    color: var(--ms-text);
}


/* ==========================================================================
   MASTERSOL — AVATAR MENU (align right, Divi)
   ========================================================================== */
#top-menu{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
}
#top-menu .mastersol-avatar-only{
    margin-left:auto;
}
#top-menu .mastersol-avatar-only img{
    width:32px;
    height:32px;
    border-radius:999px;
    vertical-align:middle;
}


/* ==========================================================================
   AVATAR MENU (far right)
   - place l’avatar à l’extrême droite du header, sans le coller au dernier item
   ========================================================================== */
#et-top-navigation{ position:relative; }
#top-menu{ padding-right:56px; } /* réserve l’espace de l’avatar */
#top-menu .mastersol-avatar-only{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    margin-left:0;
}


/* ==========================================================================
   REMOVE GLOBAL FRAME (Divi)
   - supprime l'effet "cadre blanc" autour du site/app
   ========================================================================== */
html, body{ margin:0; padding:0; }
#page-container{ padding:0 !important; margin:0 !important; }


/* ==========================================================================
   MOBILE-FIRST OPTIMISATIONS
   ========================================================================== */
@media (max-width: 767px){
    .mastersol-form-container{
        padding:14px 14px;
    }
    .mastersol-dashboard .mastersol-dashboard-bloc{
        margin-bottom: 1rem;
    }
    .mastersol-sr-box{
        padding:12px 12px 4px;
    }
    /* Champs RC/RF : en 2 colonnes sur mobile (au lieu de 3) pour lisibilité */
    .mastersol-sr-form .col-4{
        flex: 0 0 50%;
        max-width: 50%;
    }
}


/* ==========================================================================
   MASTERSOL — HTML PADDING RESET
   Certaines intégrations ajoutent une classe JS sur <html> qui applique un padding (ex: 8px).
   On neutralise ce padding pour éviter le contour autour de l'application.
   ========================================================================== */
html{ padding:0 !important; }
body{ margin:0; }

/* Bouton pièce jointe (icône fichier) */
.mastersol-attachment-btn{
  gap:8px;
}
.mastersol-attachment-btn i{
  font-size:1.1em;
  line-height:1;
}


/* ==========================================================================
   MASTERSOL — SR BOX GRID (RC à gauche / RF à droite)
   Bootstrap-lite ne fournit pas une grille complète type Bootstrap.
   On force donc la mise en page en flex, tout en restant responsive.
   ========================================================================== */
.mastersol-sr-boxes{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  width:100%;
}
.mastersol-sr-boxes > .col-12{
  flex:1 1 360px; /* 2 colonnes sur desktop, 1 colonne sur mobile */
  min-width:0;
}
@media (max-width: 768px){
  .mastersol-sr-boxes{
    gap:20px;
  }
  .mastersol-sr-boxes > .col-12{
    flex-basis:100%;
  }
}

/* SR : retirer l'ombre du bloc global */
.mastersol-form-container-sr{
  box-shadow:none !important;
}

/* ==========================================================================
   MASTERSOL — ZERO PADDING
   Neutralise tout padding/marge parasite (Divi / classe JS sur <html>).
   ========================================================================== */
html, body{ padding:0 !important; margin:0 !important; }
#page-container{ padding:0 !important; }
.et_builder_inner_content{ padding:0 !important; }

/* Menu : retirer les avatars et liens de connexion/déconnexion (si présents) */
#top-menu a[href*="wp-login.php"],
#top-menu a[href*="wp-login"],
#top-menu a[href*="logout"]{
  display:none !important;
}
#top-menu img.avatar,
#top-menu img[class*="avatar"],
#top-menu img[alt*="avatar" i],
#top-menu img[alt*="profil" i]{
  display:none !important;
}


/* ==========================================================================
   MASTERSOL — BOOTSTRAP LITE (GRID MINIMAL)
   Permet l'usage de .row / .col-* (indispensable avec Divi si Bootstrap complet n'est pas chargé)
   ========================================================================== */
body .row{display:flex;flex-wrap:wrap;margin-right:calc(var(--bs-gutter-x, 1.5rem) * -0.5);margin-left:calc(var(--bs-gutter-x, 1.5rem) * -0.5);}
body .row > *{box-sizing:border-box;flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x, 1.5rem) * 0.5);padding-left:calc(var(--bs-gutter-x, 1.5rem) * 0.5);margin-top:var(--bs-gutter-y, 0);}
body .g-0{--bs-gutter-x:0;--bs-gutter-y:0;}
body .g-1{--bs-gutter-x:.25rem;--bs-gutter-y:.25rem;}
body .g-2{--bs-gutter-x:.5rem;--bs-gutter-y:.5rem;}
body .g-3{--bs-gutter-x:1rem;--bs-gutter-y:1rem;}
body .g-4{--bs-gutter-x:1.5rem;--bs-gutter-y:1.5rem;}
body .g-5{--bs-gutter-x:3rem;--bs-gutter-y:3rem;}
body .col-12{flex:0 0 auto;width:100%;}
@media (min-width:768px){
  body .col-md-6{flex:0 0 auto;width:50%;}
  body .col-md-3{flex:0 0 auto;width:25%;}
  body .col-md-2{flex:0 0 auto;width:16.6666667%;}
}


/* ==========================================================================
   MASTERSOL — MENU CLEANUP (Divi)
   Masquer les avatars/images et les items login/logout du menu (front)
   ========================================================================== */
.et-menu-nav img,
.et_pb_menu img,
.et_pb_menu__menu img,
#top-menu img,
#mobile_menu img,
.et_mobile_menu img{
  display:none !important;
}
.et-menu-nav a[href*="wp-login"],
.et-menu-nav a[href*="logout"],
#top-menu a[href*="wp-login"],
#top-menu a[href*="logout"],
#mobile_menu a[href*="wp-login"],
#mobile_menu a[href*="logout"]{
  display:none !important;
}


/* ==========================================================================
   MASTERSOL — SINGLE RF/SR CLEAN (Divi)
   - Masquer title/meta WordPress
   - Masquer sidebar
   ========================================================================== */
body.single-rf .entry-title,
body.single-sr .entry-title,
body.single-rf .et_post_meta_wrapper,
body.single-sr .et_post_meta_wrapper,
body.single-rf .post-meta,
body.single-sr .post-meta{
  display:none !important;
}
body.single-rf #sidebar,
body.single-sr #sidebar{
  display:none !important;
}
body.single-rf #left-area,
body.single-sr #left-area{
  width:100% !important;
}


/* ==========================================================================
   MASTERSOL — BOOTSTRAP GRID MINI (pour Divi)
   Objectif: activer row/col-* indispensables au layout (RC à gauche / RF à droite)
   Sans importer tout Bootstrap.
   ========================================================================== */
:root{
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 0;
}
.row{
  display:flex;
  flex-wrap:wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-.5 * var(--bs-gutter-x));
  margin-left: calc(-.5 * var(--bs-gutter-x));
}
.row > *{
  flex-shrink:0;
  width:100%;
  max-width:100%;
  padding-right: calc(.5 * var(--bs-gutter-x));
  padding-left: calc(.5 * var(--bs-gutter-x));
  margin-top: var(--bs-gutter-y);
}
.g-3{
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}
.col-12{ flex: 0 0 auto; width:100%; }
.col-4{ flex: 0 0 auto; width:33.333333%; }

@media (min-width:768px){
  .col-md-6{ flex:0 0 auto; width:50%; }
  .col-md-2{ flex:0 0 auto; width:16.666667%; }
  .col-md-3{ flex:0 0 auto; width:25%; }
}