/* =====================================================================
   Charte graphique Job Medical - partie publique du site (22/10/2026)
   Source : « CharteGraphique_JobMedical.pdf ».
   Couleurs principales : violet #823F91, bleu #6978B9. Bandeau du haut et pied : prune #33003C (fond fonce historique du site, garde a la demande de Stephane).
   Couleurs secondaires : mauve #D8CEE7, mauve clair #EFEAF6.
   Police : Outfit (titres en majuscules), hebergee sur le site.
   Ce fichier est charge EN DERNIER sur les pages publiques : il ne fait
   que recolorer ce que posent les anciens gabarits (new-age, pjb,
   full-width-pics, recherche, main). Aucune structure n est modifiee.
   ===================================================================== */

@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/outfit/outfit-latin-300-normal.9b74615df586.woff2") format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/outfit/outfit-latin-400-normal.23191c444b9e.woff2") format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/outfit/outfit-latin-500-normal.c5138e4c72ea.woff2") format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/outfit/outfit-latin-600-normal.778dd8bec372.woff2") format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/outfit/outfit-latin-700-normal.6a0674c3b77b.woff2") format('woff2'); }

:root {
  --jm-violet: #823F91;
  --jm-violet-fonce: #6A3277;
  --jm-bleu: #6978B9;
  --jm-mauve: #D8CEE7;
  --jm-mauve-clair: #EFEAF6;
  --jm-prune: #33003C;      /* fond fonce historique du site, garde pour le cadre des pages */
  --jm-texte: #3A3542;
  --jm-texte-2: #6B6475;
  --jm-blanc: #FFFFFF;
  --jm-police: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --jm-degrade: linear-gradient(120deg, #823F91 0%, #6978B9 100%);
  --jm-voile: linear-gradient(120deg, rgba(130, 63, 145, .90) 0%, rgba(105, 120, 185, .82) 100%);
}

/* ------------------------------------------------------------ texte */
body {
  font-family: var(--jm-police) !important;
  color: var(--jm-texte);
  background-color: var(--jm-blanc) !important;
}
h1, h2, h3, h4, h5, h6,
.btn, input, select, textarea, button, label,
.login100-form-title, .login100-form-btn, .input100, .txt1, .txt2,
#mainNav, #mainNav .navbar-brand, #mainNav .navbar-nav > li > a, .dropdown-item {
  font-family: var(--jm-police) !important;
  letter-spacing: normal;
}
h1, h2, h3, h4, h5, h6 { color: var(--jm-violet); font-weight: 300; }
h1, h2, .masthead-heading, .masthead-subheading, .section-heading, .login100-form-title {
  text-transform: uppercase;
  letter-spacing: .03em;
}
p { color: inherit; }

a { color: var(--jm-violet); }
a:hover, a:focus { color: var(--jm-bleu); }

/* ------------------------------------------------------------ bandeau du haut : fonce, logo blanc de la charte */
#mainNav,
#mainNav.navbar-shrink {
  background-color: var(--jm-prune) !important;
  border-bottom: 0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  opacity: 1 !important;
  font-weight: 400;
}
#mainNav .navbar-brand img {
  height: 44px;
  width: auto;
  /* zone de protection de la charte : un peu d air autour du logo */
  margin: 5px 0;
}
#mainNav .navbar-nav > li > a,
#mainNav .navbar-nav > li > a:focus,
#mainNav.navbar-shrink .navbar-nav > li > a,
#mainNav.navbar-shrink .navbar-nav > li > a:focus {
  color: rgba(255, 255, 255, .92) !important;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .06em;
}
#mainNav .navbar-nav > li > a:hover,
#mainNav .navbar-nav > li > a:focus:hover,
#mainNav .navbar-nav > li > a.active,
#mainNav.navbar-shrink .navbar-nav > li > a:hover,
#mainNav.navbar-shrink .navbar-nav > li > a:focus:hover {
  color: var(--jm-mauve) !important;
}
#mainNav .navbar-toggler {
  color: var(--jm-blanc) !important;
  border-color: rgba(255, 255, 255, .5) !important;
}
#mainNav .dropdown-menu {
  border: 1px solid var(--jm-mauve);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(51, 0, 60, .20);
}
#mainNav .dropdown-item { color: var(--jm-texte); }
#mainNav .dropdown-item:hover, #mainNav .dropdown-item:focus {
  background-color: var(--jm-mauve-clair);
  color: var(--jm-violet);
}
/* Facebook / LinkedIn du bandeau */
#mainNav .btn-social-icon, #mainNav .btn-social-icon .fa { color: var(--jm-blanc) !important; }
#mainNav .btn-social-icon:hover, #mainNav .btn-social-icon:hover .fa { color: var(--jm-mauve) !important; }

/* ------------------------------------------------------------ boutons */
.btn-primary, .btn-info, .btn-success, .btn-default,
.login100-form-btn, .btn-jm {
  background: var(--jm-violet) !important;
  border-color: var(--jm-violet) !important;
  color: var(--jm-blanc) !important;
  font-weight: 500;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-info:hover, .btn-info:focus, .btn-info:active,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-default:hover, .btn-default:focus,
.login100-form-btn:hover, .btn-jm:hover {
  background: var(--jm-bleu) !important;
  border-color: var(--jm-bleu) !important;
  color: var(--jm-blanc) !important;
  box-shadow: none;
}
.btn-primary:focus, .btn-info:focus, .btn-success:focus { box-shadow: 0 0 0 .2rem rgba(130, 63, 145, .35) !important; }
.btn-link { color: var(--jm-violet); }
.btn-link:hover, .btn-link:focus { color: var(--jm-bleu); }

/* Bouton contour (accueil) : blanc sur les zones colorees, violet sur les zones claires */
.btn-outline {
  color: var(--jm-blanc);
  border: 1.5px solid var(--jm-blanc);
  font-weight: 500;
}
.btn-outline:hover, .btn-outline:focus, .btn-outline:active, .btn-outline.active {
  color: var(--jm-violet) !important;
  background-color: var(--jm-blanc) !important;
  border-color: var(--jm-blanc) !important;
}

/* ------------------------------------------------------------ champs de formulaire */
.form-control:focus, .input100:focus, select:focus, textarea:focus {
  border-color: var(--jm-violet) !important;
  box-shadow: 0 0 0 .2rem rgba(130, 63, 145, .18) !important;
}
.focus-input100 { border-color: var(--jm-violet) !important; }

/* ------------------------------------------------------------ pied de page */
footer, #footer, footer.pied {
  background-color: var(--jm-prune) !important;
  color: rgba(255, 255, 255, .85) !important;
}
footer p, footer.pied p { color: rgba(255, 255, 255, .85) !important; }
footer a, footer ul li a, footer.pied a { color: var(--jm-blanc) !important; }
footer a:hover, footer.pied a:hover { color: var(--jm-mauve) !important; }
footer h4, footer.pied h4 { color: var(--jm-blanc) !important; }

/* =====================================================================
   PAGE D ACCUEIL (homepage.html, gabarit new-age) - version 2
   Photos d origine eclaircies (img/charte/accueil_*.jpg) ; comme dans la
   charte (« Sur fond visuel »), une forme pleine violette ou mauve porte le
   texte et laisse la photo visible a cote.
   ===================================================================== */
/* 1. Bandeau : la main du soignant reste visible a droite */
header.masthead {
  background:
    linear-gradient(100deg, rgba(130, 63, 145, .94) 0%, rgba(130, 63, 145, .86) 36%,
                    rgba(105, 120, 185, .35) 60%, rgba(105, 120, 185, 0) 78%),
    url("../img/charte/accueil_mains.9d8dbb3e2c34.jpg") no-repeat 70% center !important;
  background-size: cover !important;
  text-shadow: none !important;
}
header.masthead h1, header.masthead h2, header.masthead p { color: var(--jm-blanc); text-shadow: none; }
#page-top header.masthead h1 { font-weight: 500; line-height: 1.15; }
#page-top header.masthead h2 { font-weight: 300; text-transform: none; letter-spacing: normal; }
#page-top header.masthead .btn-outline { background: var(--jm-blanc); color: var(--jm-violet); border-color: var(--jm-blanc); }
#page-top header.masthead .btn-outline:hover { background: var(--jm-bleu) !important; color: var(--jm-blanc) !important; border-color: var(--jm-bleu) !important; }

section.freedom { text-shadow: none !important; }
section.freedom h2 { font-weight: 400; }

/* 2. Personnalisation et 4. Contactez-nous : forme mauve a gauche, photo a droite */
#page-top section.freedom:not([id]),
#agences {
  background:
    linear-gradient(105deg, rgba(239, 234, 246, .97) 0%, rgba(239, 234, 246, .97) 52%,
                    rgba(239, 234, 246, 0) 52.2%),
    url("../img/charte/accueil_conseil.c8a67d110f81.jpg") no-repeat right center !important;
  background-size: cover !important;
  color: var(--jm-texte);
}
#agences {
  background:
    linear-gradient(105deg, rgba(239, 234, 246, .97) 0%, rgba(239, 234, 246, .97) 52%,
                    rgba(239, 234, 246, 0) 52.2%),
    url("../img/charte/accueil_contact.9c856826f22b.jpg") no-repeat 85% center !important;
  background-size: cover !important;
}
#page-top section.freedom:not([id]) .col-md-8,
#agences .col-md-8 { margin-left: 0 !important; max-width: 50%; flex: 0 0 50%; text-align: left; }
#page-top section.freedom:not([id]) h2, #agences h2 { color: var(--jm-violet); }
@media (min-width: 768px) {
  #page-top section.freedom:not([id]) h2, #agences h2, #mobile h2 { font-size: 2.6rem; line-height: 1.2; }
}
#page-top section.freedom:not([id]) p, #agences p, #agences .text-black { color: var(--jm-texte) !important; }
#page-top section.freedom:not([id]) .btn-outline, #agences .btn-outline {
  color: var(--jm-blanc); background: var(--jm-violet); border-color: var(--jm-violet);
}
#page-top section.freedom:not([id]) .btn-outline:hover, #agences .btn-outline:hover {
  color: var(--jm-blanc) !important; background: var(--jm-bleu) !important; border-color: var(--jm-bleu) !important;
}

/* 3. Nos offres d emploi : photo du bloc operatoire sous un voile violet -> bleu leger */
#offresmetiers {
  background:
    linear-gradient(120deg, rgba(130, 63, 145, .82) 0%, rgba(105, 120, 185, .70) 100%),
    url("../img/charte/accueil_offres.76f3a9914af4.jpg") no-repeat center center !important;
  background-size: cover !important;
}
/* 5. Application mobile : forme violette a gauche, soignant et telephone a droite */
#mobile {
  background:
    linear-gradient(105deg, rgba(130, 63, 145, .96) 0%, rgba(105, 120, 185, .92) 50%,
                    rgba(105, 120, 185, 0) 50.2%),
    url("../img/charte/accueil_appli.3668d1ffb7ba.jpg") no-repeat right -70px center !important;
  background-size: cover !important;
}
#mobile { background-color: #fff !important; background-size: auto, auto 100% !important; }
#mobile .container { text-align: left; }
#mobile h2 { max-width: 48%; }
#offresmetiers, #offresmetiers p, #offresmetiers .text-black, #offresmetiers h2,
#mobile, #mobile h2, #mobile p, #interet { color: var(--jm-blanc) !important; text-shadow: none !important; }
#offresmetiers a:not(.btn) { color: var(--jm-blanc); text-decoration: underline; }
#offresmetiers a:not(.btn):hover { color: var(--jm-mauve); }
#offresmetiers .btn-outline { color: var(--jm-violet); background: var(--jm-blanc); border-color: var(--jm-blanc); }
#offresmetiers .btn-outline:hover { color: var(--jm-blanc) !important; background: var(--jm-bleu) !important; border-color: var(--jm-bleu) !important; }
#mobile .overlay { display: none; }
#agences a:not(.btn) { color: var(--jm-violet); }

/* telephone : la forme couvre toute la largeur, la photo reste en transparence */
@media (max-width: 767px) {
  header.masthead {
    background: linear-gradient(180deg, rgba(130, 63, 145, .88) 0%, rgba(105, 120, 185, .70) 100%),
      url("../img/charte/accueil_mains.9d8dbb3e2c34.jpg") no-repeat 65% center !important;
    background-size: cover !important;
  }
  #page-top section.freedom:not([id]), #agences {
    background: linear-gradient(rgba(239, 234, 246, .92), rgba(239, 234, 246, .92)),
      url("../img/charte/accueil_conseil.c8a67d110f81.jpg") no-repeat center center !important;
    background-size: cover !important;
  }
  #agences { background: linear-gradient(rgba(239, 234, 246, .92), rgba(239, 234, 246, .92)),
      url("../img/charte/accueil_contact.9c856826f22b.jpg") no-repeat center center !important; background-size: cover !important; }
  #page-top section.freedom:not([id]) .col-md-8, #agences .col-md-8 { max-width: 100%; flex: 0 0 100%; }
  #mobile { background: var(--jm-degrade) !important; }
  #mobile h2 { max-width: 100%; }
}

/* =====================================================================
   AUTRES PAGES PUBLIQUES (gabarits pjb, recherche, full-width-pics, main)
   L ancien fond prune devient clair ; le contenu reste sur fond blanc.
   ===================================================================== */
#content, #conteneur {
  background-color: var(--jm-mauve-clair) !important;
  color: var(--jm-texte) !important;
}
#content h1, #content h2, #content h3, #content h4 { color: var(--jm-violet); }
#content label { color: var(--jm-texte); }

/* bandeau titre des pages (Pre-inscrivez-vous, Decouvrez nos offres...) */
#page-top header.masthead.text-white { color: var(--jm-blanc) !important; }
body:not(#page-top) header.masthead.text-white { color: var(--jm-texte) !important; }
/* corps des pages au style de « Pourquoi Job-Medical » : fond mauve clair, titres violets */
body:not(#page-top) header.masthead {
  background: var(--jm-mauve-clair) !important;
}
body:not(#page-top) header.masthead h1,
body:not(#page-top) header.masthead h2,
body:not(#page-top) header.masthead h3,
body:not(#page-top) header.masthead .masthead-heading { color: var(--jm-violet) !important; }
body:not(#page-top) header.masthead h4,
body:not(#page-top) header.masthead h5,
body:not(#page-top) header.masthead p,
body:not(#page-top) header.masthead .masthead-subheading,
body:not(#page-top) header.masthead .white-text { color: var(--jm-texte) !important; }
header.masthead .bg-circle { display: none; }
body:not(#page-top) header.masthead a:not(.btn) { color: var(--jm-violet) !important; }
body:not(#page-top) header.masthead a:not(.btn):hover { color: var(--jm-bleu) !important; }

/* long paragraphe en titre sous le formulaire d inscription : pas en majuscules */
#complement h1, #complement h2, #complement h3 {
  text-transform: none;
  letter-spacing: normal;
  font-size: 1.35rem;
  font-weight: 400;
}

/* textes blancs poses sur l ancien fond prune */
.white-text { color: var(--jm-texte) !important; }


/* blocs « vitrine » des anciens gabarits */
.showcase .showcase-text {
  background-color: var(--jm-mauve-clair) !important;
  color: var(--jm-texte) !important;
}
.showcase .showcase-text h2 { color: var(--jm-violet); }

/* page Nos agences (ancienne version) */
#Toulouse, #Montauban, #Bordeaux, #Lyon {
  background-color: var(--jm-mauve-clair) !important;
  color: var(--jm-texte) !important;
}
#Toulouse h1, #Toulouse h2, #Montauban h1, #Montauban h2,
#Bordeaux h1, #Bordeaux h2, #Lyon h1, #Lyon h2 { color: var(--jm-violet); }
/* pages vitrine (agences, metiers, offres, FAQ, rendez-vous) : contenu blanc sur fond mauve clair */
main.fond-violet { background-color: var(--jm-mauve-clair) !important; }

/* pages de connexion (gabarit main.css) */
.container-login100 { background: var(--jm-mauve-clair) !important; }
.wrap-login100 { border-radius: 12px; box-shadow: 0 10px 30px rgba(51, 0, 60, .10); }
.login100-form-title { color: var(--jm-violet) !important; font-weight: 400; }
.login100-more::before { background: rgba(130, 63, 145, .18) !important; }
.txt1, .txt2 { color: var(--jm-texte-2); }
a.txt1:hover, a.txt2:hover { color: var(--jm-violet); }

/* cartes et listes (offres, videos, accordeons) */
.card { border-color: var(--jm-mauve); }
.card-header { background-color: var(--jm-blanc); border-color: var(--jm-mauve); }
.well, .box-body { background-color: var(--jm-blanc); }

/* encart de filtre des offres */
.input-group-addon, .input-group-text {
  background-color: var(--jm-mauve-clair);
  border-color: var(--jm-mauve);
  color: var(--jm-texte);
}

/* =====================================================================
   PAGES « VITRINE » (home/vitrine/base.html : agences, metiers, offres,
   FAQ, prise de rendez-vous, page introuvable) : deja aux couleurs ;
   seul l ancien prune du pied et des cotes est remplace (voir plus haut).
   ===================================================================== */
.vitrine { color: var(--jm-texte); }
.vitrine h1, .vitrine h2 { color: var(--jm-violet); }
.vitrine h3 { color: var(--jm-violet); text-transform: none; font-weight: 500; }

/* ------------------------------------------------------------ telephone */
@media (max-width: 991px) {
  #mainNav .navbar-brand img { height: 40px; }
  #mainNav .navbar-collapse { border-top: 1px solid var(--jm-mauve-clair); margin-top: 6px; }
  #mainNav .navbar-nav > li > a { padding: 10px 0; }
}
@media (max-width: 575px) {
  h1, .masthead-heading { font-size: 1.9rem !important; }
  h2, .masthead-subheading { font-size: 1.35rem !important; }
  section.freedom h2 { font-size: 1.7rem !important; }
}

/* sous-titre des bandeaux de page (« Nous vous rappellerons... ») : pas en majuscules */
body:not(#page-top) header.masthead .masthead-subheading,
body:not(#page-top) header.masthead h1 + h2 {
  text-transform: none !important;
  letter-spacing: normal;
  font-weight: 300;
}