/* === CSS Autres === */
html {
  scroll-behavior: smooth;
}

/* === CSS d'origine Template Creator CK (aide-menagere-sociale-charleroi), porte verbatim === */

/* Empêche les sorties des conteneurs */
html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}


/* Style pour le logo accueil */
#block-logo-accueil-mobil {
    position: relative; /* Nécessaire pour z-index */
    z-index: 10; /* Plus élevé pour passer au-dessus de la vidéo */
  padding-top : 15px;
}

.titre-logo-page {
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    color: rgb(255, 255, 255);
  display: block;          /* OBLIGATOIRE */
  padding-top: 18px;    /* espace visible */
}

/* Style pour la vidéo accueil */
#block-video-mobil {
    margin-top: -50px; /* Remonte la vidéo */
  margin-right : 8px;
  margin-left : 10px;
    position: relative; /* Important pour le z-index */
    z-index: 1; /* Plus bas que le logo */
}

/* Bords ronds images */
.roundimg {
  border-radius: 12px;  /* arrondi moyen */
  overflow: hidden;     /* évite que l'image dépasse des coins */
  display: inline-block;
}

#block-top-accueil-desktop h1 {
  text-align: center;   /* centré */
font-size: 1.8rem;         /* taille personnalisable */
  color: #ffffff;          /* texte blanc */
}

#block-top-accueil-desktop h2 {
  font-size: 1.5rem;         /* taille personnalisable */
  color: #fff;          /* blanc */
}

#block-demarches h1 {
  text-align: center;   /* centré */
font-size: 1.8rem;         /* taille personnalisable */
  color: #1F1F3D;          /* bleu foncé */
}

#block-demarches h2 {
  text-align: center;
font-size: 1.2rem;         /* taille personnalisable */
  color: #1F1F3D;          /* bleu foncé */
}

/* ===========================
   Onglets Mobile - Accordéon
=========================== */
.tabs-mobile {
  width: 100%;
  margin: 0 auto;
  font-family: 'Arial', sans-serif;
}

/* Onglets (boutons) */
.tabs-mobile .tab-btn {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
  padding: 15px;
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: #560062;
  border: none;
  border-bottom: 2px solid #EF90FF;
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Onglet actif */
.tabs-mobile .tab-btn.active {
  border-color: #560062;
}
.tabs-mobile .tab-btn.active::after { display: none; }

/* Icône chevron */
.tab-chevron {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: bold;
  margin-left: auto;
  padding-left: 15px;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  transform-origin: center;
  color: #EF90FF;
}
.tabs-mobile .tab-btn.active .tab-chevron { color: #fff; }

/* Contenus */
.tabs-mobile .tab-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 15px;
  display: block !important;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease, padding 0.3s ease;
}

/* Feedback tactile */
.tabs-mobile .tab-btn:active { transform: scale(0.98); transition: transform 0.1s ease; }

/* Hover subtil (tablettes) */
@media (hover: hover) {
  .tabs-mobile .tab-btn:hover { background: #6B0075; }
}

/* Animation du contenu */
@keyframes fadeInContent {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tabs-mobile .tab-btn.active + .tab-panel > * {
  animation: fadeInContent 0.4s ease 0.1s backwards;
}

/* Suppression bordure dernier panel ouvert */
.tabs-mobile .tab-btn.active + .tab-panel { border-bottom: none; }

/* CTA dans panel */
.tabs-mobile .tab-panel .btn-common { margin-top: 20px; display: block; }

/* Responsive */
@media (max-width: 480px) {
  .tabs-mobile .tab-btn { font-size: 15px; padding: 12px; }
  .tab-chevron { font-size: 1.3rem; }
}




/* =========================
   Onglets Desktop uniquement
========================= */
.tabs-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  position: relative; /* pour la ligne soulignée */
}

.tab-btn {
  position: relative;
  padding: 10px 20px;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  transition: color 0.3s ease;
}

/* Supprime tout fond au survol / actif */
.tab-btn:hover,
.tab-btn:focus,
.tab-btn.active {
  background: none !important;
  color: #fff !important;
}

/* ligne soulignée */
.tabs-underline {
  position: absolute;
  height: 2px;
  background-color: #fff;
  bottom: 0;
  left: 0;
  width: 0;
  transition: all 0.3s ease;
}

/* Panels */
.tab-panel {
  display: none;
  padding: 20px;
  background: #fff;
  color: #333;
  box-sizing: border-box;
  border-radius: 20px;
  transition: all 0.3s ease;
}


/* logo accueil desktop */

/* ================================
   Conteneur global
================================= */
.center-container {
  display: flex;
  justify-content: center; /* centre horizontalement */
  align-items: center;     /* centre verticalement si besoin */
  padding: 20px 0;         /* petit espace haut et bas */
  height: auto;            /* hauteur automatique */
  box-sizing: border-box;
}

/* ================================
   Conteneur image + texte
================================= */
.image-text {
  display: flex;
  align-items: center;     /* aligne image et texte verticalement sur desktop */
  gap: 20px;               /* espace entre l'image et le texte */
  flex-wrap: wrap;         /* permet de passer en colonne sur mobile */
  justify-content: center; /* centre le contenu si wrap */
}

/* ================================
   Image ronde (PNG déjà ronde)
================================= */
.image-text img {
  width: 100px;            /* ajustable selon besoin */
  height: auto;            /* conserve proportions */
}

/* ================================
   Texte H1
================================= */
.image-text h1 {
  margin: 0;
  font-family: 'Inter', sans-serif;   /* Google Font Inter */
  font-size: 2rem;         /* taille personnalisable */
  color: #ffffff;          /* texte blanc */
  text-align: left;        /* alignement desktop */
}

/* ================================
   Responsive : mobile
================================= */
@media (max-width: 600px) {
  .image-text {
    flex-direction: column;   /* image au-dessus du texte */
    align-items: center;      /* centre horizontalement */
  }

  .image-text h1 {
    text-align: center;       /* texte centré sous l'image */
    font-size: 1.5rem;        /* optionnel : réduire légèrement sur mobile */
  }

  .image-text img {
    width: 80px;              /* optionnel : réduire image sur mobile */
  }
}

/* Titre Service Familial mobile */
#block-titre-accueil-mobil h1 {
  font-size: 1.5rem;         /* taille personnalisable */
  color: #ffffff !important;  /* texte blanc forcé */
  text-align: center;
  padding: 15px 10px 10px 10px !important; /* top 15px, autres 10px */
}


#block-service h2,
#block-af h2,
#block-faq h2 {
  font-family: 'Inter', sans-serif;   /* Google Font Inter */
  font-size: 2rem;                     /* taille augmentée */
  font-weight: 500;                    /* bold600 */
  line-height: 1.1;                    /* espacement entre les lignes */
  color: #ffffff;                      /* texte blanc */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* ombre noire adoucie */
  margin-bottom: 20px;                 /* espace sous le titre */
}
#block-service {
  font-size : 20px;
  font-weight: bold;
  color : #560062;
}





/* frames */

.w-frame {
	background-color: #ffffff;
	color : #000000;
	border-radius: 25px;
	padding: 10px;
    margin-bottom: 15px;
}

.v-frame {
text-align: center;
  border: 2px solid #C58BFF;
  border-radius: 20px; padding: 15px 8px 8px 8px;
  margin-bottom: 30px;
}

.b-frame {
background-color: #ffffff;
  color : #000000;
border-radius: 25px;
  padding: 5px;
  border: 2px solid #BDEFFF;
  margin-bottom: 15px;
}

.r-frame {
background-color: #ffffff;
  color : #000000;
border-radius: 25px;
  padding: 5px;
  border: 2px solid #F06179;
  margin-bottom: 15px;
}

.g-frame {
background-color: #ffffff;
  color : #000000;
border-radius: 25px;
  padding: 5px;
  border: 2px solid #839959;
  margin-bottom: 15px;
}

.clearpurple {
  background-color: #f0e3ff;
  border-radius: 25px;
  padding: 20px;
}


.middlepurple {
  background-color: #7C3DB3;
  border-radius: 25px;
  padding: 10px;
  color: #FFFFFF;
}




/* ====== GRILLE PERSO 3 colonnes ====== */
.custom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colonnes desktop/tablette */
  gap: 20px; /* espace entre colonnes */
}

/* Par défaut chaque item occupe son "slot" */
.custom-grid .custom-col {
  background: transparent; /* tu peux mettre une couleur si besoin */
  min-height: 50px; /* évite l'écrasement, optionnel */
}

/* En responsive (mobile < 768px) → 2 colonnes */
@media (max-width: 767px) {
  .custom-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Masquer automatiquement une colonne vide sur mobile */
  .custom-grid .custom-col:empty {
    display: none;
  }
}

/* ====== SLIDER IMAGES ====== */

/* Masqué sur desktop */
.simple-slider-mobile {
  display: none;
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Affichage uniquement mobile */
@media (max-width: 768px) {
  .simple-slider-mobile {
    display: block;
  }

  .slides-wrapper {
    overflow: hidden;
    width: 100%;
    touch-action: pan-y; /* autorise uniquement le scroll vertical */
  }

  .slides {
    display: flex;        /* images côte à côte */
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.4s ease-in-out;
  }

  .slides img {
    width: 100%;          /* chaque image prend 100% du conteneur wrapper */
    flex-shrink: 0;
    display: block;
    max-width: 100%;      /* sécurité contre débordement */
    object-fit: cover;    /* images bien contenues */
    border-radius: 8px;   /* optionnel, coins arrondis */
  }

  /* Boutons navigation */
  .next-slide,
.prev-slide {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5); /* noir semi-transparent */
  color: #fff;                 /* flèche blanche */
  border: none;
  font-size: 2rem;
  padding: 0.5rem 0.7rem;       /* carré légèrement plus grand */
  cursor: pointer;
  z-index: 10;
  border-radius: 0;             /* carré */
  display: flex;
  align-items: center;
  justify-content: center;
}

.next-slide { right: 10px; }
.prev-slide { left: 10px; }

.next-slide:hover,
.prev-slide:hover {
  background: rgba(0,0,0,0.8); /* plus opaque au survol */
}

  /* Points de navigation (dots) */
  .dots {
    text-align: center;
    margin-top: 10px;
  }

  .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    transition: background-color 0.3s;
    cursor: pointer;
  }

  .dot.active {
    background-color: #333;
  }
}

/* Empêche tout scroll horizontal global */
body {
  overflow-x: hidden;
}



/* Div images visible uniquement sur desktop */
/* Masqué sur mobile */
@media (max-width: 768px) {
  .desktop-images {
    display: none;
  }
}


/* Forcer l'affichage du slider dans l'éditeur JCE */
.jce_contentarea .simple-slider-mobile {
  display: block !important;
}

/* Bouton Facebook */

/* Wrapper pour centrer le bouton sans affecter le reste */
.facebook-btn-wrapper {
  text-align: center; /* centre uniquement le bouton */
  margin: 10px 0; /* espace autour du bouton */
}

/* Bouton Facebook */

/* Wrapper pour centrer le bouton sans affecter le reste */
.facebook-btn-wrapper {
  text-align: center; /* centre uniquement le bouton */
  margin: 10px 0; /* espace autour du bouton */
}



/* Style commun des liens */
.link-arrow {
    display: inline-block;
    font-weight: bold;          /* texte en gras */
    color: #0066cc;                /* couleur du texte */
    text-decoration: none;      /* pas de surlignement */
    transition: transform 0.3s; /* animation du lien entier */
 	line-height: 2;              /* espace plus grand entre les lignes */
}

/* Effet au hover : texte + flèche glissent ensemble */
.link-arrow:hover {
 	color: #004999;               /* bleu foncé au survol */
    transform: translateX(5px); /* décalage vers la droite */
 	text-decoration: none;      /* pas de soulignement */
}


/* ============================
   Boutons
============================ */

/* Style commun pour tous les boutons */
.btn-common {
  display: block;
  margin: 30px auto;
  width: 75%;
  max-width: 400px;
  padding: 15px 25px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Violet */
.btn-violet { background-color: #560062; }
.btn-violet:hover { background-color: #730078; box-shadow: 0 8px 16px rgba(0,0,0,0.25); }
.btn-violet:active { transform: scale(0.95); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

/* Bleu */
.btn-bleu { background-color: #0054A8; margin-top: -4px; /* Remonte le bouton de 4px */}
.btn-bleu:hover { background-color: #0066CC; box-shadow: 0 8px 16px rgba(0,0,0,0.25); }
.btn-bleu:active { transform: scale(0.95); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

/* Orange */
.btn-orange { background-color: #FF602A; margin-top: -4px; /* Remonte le bouton de 4px */ }
.btn-orange:hover { background-color: #FF7A50; box-shadow: 0 8px 16px rgba(0,0,0,0.25); }
.btn-orange:active { transform: scale(0.95); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

/* Vert */
.btn-vert {
  display: block;
  margin: 30px auto;
  width: 75%;
  max-width: 400px;
  padding: 15px 25px;
  background-color: #00B22D;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;           /* empêche le souligné */
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Survol */
.btn-vert:hover {
  background-color: #0066CC;
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
  text-decoration: none;           /* empêche le souligné sur hover */
  color: #fff;                     /* empêche le texte de devenir bleu */
}

/* Clic : effet "s'enfonce" */
.btn-vert:active {
  transform: scale(0.95);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  color: #fff;                     /* garantit la couleur texte */
  text-decoration: none;
}

/* ===============================
   BOUTON PHONE Mobile : bouton visible, texte caché
=============================== */
.phone-btn {
  display: block !important;
}

.phone-text {
  display: none !important;
}

/* ===============================
   BOUTON PHON Desktop : bouton caché, texte visible
=============================== */
@media (min-width: 1024px) {
  .phone-btn {
    display: none !important; /* bouton masqué desktop */
  }

  .phone-text {
    display: flex !important;          /* FORCER l'affichage */
    justify-content: center;
    align-items: center;
    width: 75%;                        /* même largeur que le bouton */
    max-width: 400px;
    padding: 12px 25px;
    margin: 30px auto;

    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: #000;

    border: 2px solid #000;            /* contour noir */
    border-radius: 12px;
    background-color: transparent;     /* fond transparent */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);

    /* optionnel : texte centré verticalement si padding ne suffit pas */
    line-height: 1.2;
  }
}

/* Bouton Facebook */
.btn-facebook {
  display: inline-flex; /* inline-flex pour aligner texte et icône si besoin */
  align-items: center;
  justify-content: center;
  gap: 10px; /* espace entre icône et texte */

  width: 75%;
  max-width: 400px;
  padding: 14px 20px;

  background-color: #1877F2; /* couleur de base du bouton */
  color: #fff; /* texte blanc */
  font-weight: 600; /* gras */
  text-decoration: none; /* pas de soulignement */
  border-radius: 10px; /* coins arrondis */
  font-size: 15px;

  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  cursor: pointer;
}

/* Hover / survol */
.btn-facebook:hover {
  background-color: #3D64A4; /* bleu survol */
  color: #fff; /* texte reste blanc */
  font-weight: 600; /* texte reste gras */
  text-decoration: none; /* pas de soulignement */
}

/*Box icone / Page Recrutement */
.box-gradient {
  background: linear-gradient(
    to top,
  #F5EDFC 0%,
  #F3EBFD 50%,
  #FCFAFF 100%
  );
  border-radius: 20px;
  padding: 30px;
  margin-left: 60px;
  margin-right: 60px;
  display: flex;
  justify-content: center;   /* centrage horizontal */
  align-items: center;       /* centrage vertical */
  text-align: center;
  min-height: 150px;
}





/* Page Offre emploi */
.job-container {
  max-width: 1000px;
  margin: 40px auto;
  font-family: Arial, sans-serif;
}

.job-header {
  background: linear-gradient(to top, #F5EDFC 0%, #FCFAFF 100%);
  padding: 30px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.job-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  font-size: 14px;
  color: #555;
}

.job-badge {
  background: #ffffff;
  padding: 6px 12px;
  border-radius: 30px;
  border: 1px solid #ddd;
}

.job-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.job-box {
  background: #fff;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.job-box h3 {
  margin-bottom: 10px;
  color: #4a3a6a;
}

.job-button {
  display: inline-block;
  background: #6C4AB6;
  color: white;
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none;
  margin-top: 15px;
}

.job-button:hover {
  background: #55359a;
}
/* Page Demande aide familial(e) (itemid-234, serfamj6) : reprend le degrade
   REEL de l'accueil actuel (template_lm) - pas l'ancien degrade TCK d'origine
   - pour que cette page (encore servie par TCK) ait le meme fond que l'accueil
   aujourd'hui. Formulaire sans carte blanche, texte/lignes en blanc. */
body.itemid-234 #wrapper1 ,
body.itemid-237 #wrapper1 ,
body.itemid-238 #wrapper1 ,
body.itemid-242 #wrapper1 ,
body.itemid-246 #wrapper1 ,
body.itemid-252 #wrapper1 {
	background-image: linear-gradient(135deg, #7F279C 0%, #7F279C 12%, #43279D 30%, #43279D 100%) !important;
}

body.itemid-234 #wrapper ,
body.itemid-237 #wrapper ,
body.itemid-238 #wrapper ,
body.itemid-242 #wrapper ,
body.itemid-246 #wrapper ,
body.itemid-252 #wrapper {
	background-image: linear-gradient(135deg, #7F279C 0%, #7F279C 12%, #43279D 30%, #43279D 100%) !important;
}

body.itemid-234 #maincontent > .inner.clearfix ,
body.itemid-237 #maincontent > .inner.clearfix ,
body.itemid-238 #maincontent > .inner.clearfix ,
body.itemid-242 #maincontent > .inner.clearfix ,
body.itemid-246 #maincontent > .inner.clearfix ,
body.itemid-252 #maincontent > .inner.clearfix {
	background: transparent !important;
	border-radius: 0 !important;
}

body.itemid-234 .qf-contact ,
body.itemid-237 .qf-contact ,
body.itemid-238 .qf-contact ,
body.itemid-242 .qf-contact ,
body.itemid-246 .qf-contact ,
body.itemid-252 .qf-contact {
	--qf-bg: transparent;
	--qf-text: #ffffff;
	--qf-text-muted: rgba(255, 255, 255, 0.8);
	--qf-border: rgba(255, 255, 255, 0.85);
	border: none !important;
	box-shadow: none !important;
	font-size: 1.15em;
}

body.itemid-234 .qf-contact label ,
body.itemid-237 .qf-contact label ,
body.itemid-238 .qf-contact label ,
body.itemid-242 .qf-contact label ,
body.itemid-246 .qf-contact label ,
body.itemid-252 .qf-contact label {
	font-size: 1em;
}

body.itemid-234 .qf-contact .qf-section-heading ,
body.itemid-237 .qf-contact .qf-section-heading ,
body.itemid-238 .qf-contact .qf-section-heading ,
body.itemid-242 .qf-contact .qf-section-heading ,
body.itemid-246 .qf-contact .qf-section-heading ,
body.itemid-252 .qf-contact .qf-section-heading {
	color: #ffffff;
}

body.itemid-234 .qf-contact input::placeholder,
body.itemid-237 .qf-contact input::placeholder,
body.itemid-238 .qf-contact input::placeholder,
body.itemid-242 .qf-contact input::placeholder,
body.itemid-246 .qf-contact input::placeholder,
body.itemid-252 .qf-contact input::placeholder,
body.itemid-234 .qf-contact textarea::placeholder ,
body.itemid-237 .qf-contact textarea::placeholder ,
body.itemid-238 .qf-contact textarea::placeholder ,
body.itemid-242 .qf-contact textarea::placeholder ,
body.itemid-246 .qf-contact textarea::placeholder ,
body.itemid-252 .qf-contact textarea::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

body.itemid-234 .qf-contact input[type="text"],
body.itemid-237 .qf-contact input[type="text"],
body.itemid-238 .qf-contact input[type="text"],
body.itemid-242 .qf-contact input[type="text"],
body.itemid-246 .qf-contact input[type="text"],
body.itemid-252 .qf-contact input[type="text"],
body.itemid-234 .qf-contact input[type="email"],
body.itemid-237 .qf-contact input[type="email"],
body.itemid-238 .qf-contact input[type="email"],
body.itemid-242 .qf-contact input[type="email"],
body.itemid-246 .qf-contact input[type="email"],
body.itemid-252 .qf-contact input[type="email"],
body.itemid-234 .qf-contact input[type="tel"],
body.itemid-237 .qf-contact input[type="tel"],
body.itemid-238 .qf-contact input[type="tel"],
body.itemid-242 .qf-contact input[type="tel"],
body.itemid-246 .qf-contact input[type="tel"],
body.itemid-252 .qf-contact input[type="tel"],
body.itemid-234 .qf-contact input[type="number"],
body.itemid-237 .qf-contact input[type="number"],
body.itemid-238 .qf-contact input[type="number"],
body.itemid-242 .qf-contact input[type="number"],
body.itemid-246 .qf-contact input[type="number"],
body.itemid-252 .qf-contact input[type="number"],
body.itemid-234 .qf-contact textarea,
body.itemid-237 .qf-contact textarea,
body.itemid-238 .qf-contact textarea,
body.itemid-242 .qf-contact textarea,
body.itemid-246 .qf-contact textarea,
body.itemid-252 .qf-contact textarea,
body.itemid-234 .qf-contact select ,
body.itemid-237 .qf-contact select ,
body.itemid-238 .qf-contact select ,
body.itemid-242 .qf-contact select ,
body.itemid-246 .qf-contact select ,
body.itemid-252 .qf-contact select {
	background-image: linear-gradient(#ffffff, #ffffff);
}

body.itemid-234 .qf-contact input:-webkit-autofill,
body.itemid-237 .qf-contact input:-webkit-autofill,
body.itemid-238 .qf-contact input:-webkit-autofill,
body.itemid-242 .qf-contact input:-webkit-autofill,
body.itemid-246 .qf-contact input:-webkit-autofill,
body.itemid-252 .qf-contact input:-webkit-autofill,
body.itemid-234 .qf-contact input:-webkit-autofill:hover,
body.itemid-237 .qf-contact input:-webkit-autofill:hover,
body.itemid-238 .qf-contact input:-webkit-autofill:hover,
body.itemid-242 .qf-contact input:-webkit-autofill:hover,
body.itemid-246 .qf-contact input:-webkit-autofill:hover,
body.itemid-252 .qf-contact input:-webkit-autofill:hover,
body.itemid-234 .qf-contact input:-webkit-autofill:focus,
body.itemid-237 .qf-contact input:-webkit-autofill:focus,
body.itemid-238 .qf-contact input:-webkit-autofill:focus,
body.itemid-242 .qf-contact input:-webkit-autofill:focus,
body.itemid-246 .qf-contact input:-webkit-autofill:focus,
body.itemid-252 .qf-contact input:-webkit-autofill:focus,
body.itemid-234 .qf-contact input:-webkit-autofill:active ,
body.itemid-237 .qf-contact input:-webkit-autofill:active ,
body.itemid-238 .qf-contact input:-webkit-autofill:active ,
body.itemid-242 .qf-contact input:-webkit-autofill:active ,
body.itemid-246 .qf-contact input:-webkit-autofill:active ,
body.itemid-252 .qf-contact input:-webkit-autofill:active {
	-webkit-text-fill-color: #ffffff;
	-webkit-box-shadow: 0 0 0 1000px #5a279b inset;
	box-shadow: 0 0 0 1000px #5a279b inset;
}

body.itemid-234 .qf-contact .qf-select-wrap::after ,
body.itemid-237 .qf-contact .qf-select-wrap::after ,
body.itemid-238 .qf-contact .qf-select-wrap::after ,
body.itemid-242 .qf-contact .qf-select-wrap::after ,
body.itemid-246 .qf-contact .qf-select-wrap::after ,
body.itemid-252 .qf-contact .qf-select-wrap::after {
	border-right-color: rgba(255, 255, 255, 0.8);
	border-bottom-color: rgba(255, 255, 255, 0.8);
}

/* Formulaire Demande aide familial(e) (itemid-234, serfamj6) : accent orange
   au lieu du gris par defaut - boutons, barre d'etape, asterisque obligatoire,
   libelle en surbrillance au focus. Texte du bouton fonce (pas blanc) : blanc
   sur cet orange clair est illisible (contraste ~2:1, tres sous le seuil
   WCAG) - fonce a la place, sur le meme principe que le violet du pied de
   page pour rester dans la palette du site. */
body.itemid-234 .qf-contact ,
body.itemid-237 .qf-contact ,
body.itemid-238 .qf-contact ,
body.itemid-242 .qf-contact ,
body.itemid-246 .qf-contact ,
body.itemid-252 .qf-contact {
	--qf-accent: #FFA64D;
	--qf-accent-dark: #E08A34;
	--qf-accent-contrast: #3B244F;
}

/* Page Demande aide familial(e) (itemid-234) : Template Creator CK laisse un
   veritable espace de 10px entre chaque bloc (header/contenu, contenu/barre
   de menu) - deja present avant, mais invisible car le fond de page d'origine
   se fondait avec les couleurs alentour. Le nouveau degrade contraste
   davantage avec le fond de page tres sombre (#560062) par defaut : on aligne
   ce fond sur la teinte du degrade pour que l'espace redevienne invisible. */
body.itemid-234 ,
body.itemid-237 ,
body.itemid-238 ,
body.itemid-242 ,
body.itemid-246 ,
body.itemid-252 {
	background: #43279D !important;
}

/* Titre H1 de la page Demande aide familial(e) (itemid-234) : Template
   Creator CK le rend petit, aligne a gauche, en violet fonce (invisible sur
   le nouveau fond degrade). Centre, agrandi, en blanc. */
body.itemid-234 h1 ,
body.itemid-237 h1 ,
body.itemid-238 h1 ,
body.itemid-242 h1 ,
body.itemid-246 h1 ,
body.itemid-252 h1 {
	text-align: center;
	color: #ffffff !important;
	font-size: 2em;
	margin: 28px 0 24px;
}

/* Listes deroulantes (Province, Beneficiaire auparavant, Mutuelle, Nbr de
   personnes...) : le <select> lui-meme est blanc (coherent avec le reste du
   formulaire sur fond violet), mais la liste d'options qui s'ouvre est un
   controle NATIF du navigateur a fond blanc - elle heritait bêtement le
   meme blanc pour le texte, rendant les choix illisibles une fois la liste
   ouverte. Les options recoivent leurs propres couleurs, independantes du
   <select> ferme. */
body.itemid-234 .qf-contact select option ,
body.itemid-237 .qf-contact select option ,
body.itemid-238 .qf-contact select option ,
body.itemid-242 .qf-contact select option ,
body.itemid-246 .qf-contact select option ,
body.itemid-252 .qf-contact select option {
	color: #1f1f24;
	background-color: #ffffff;
}

/* Bouton Precedent : fond blanc/texte noir, et #FFC286/texte noir au survol. */
body.itemid-234 .qf-contact .qf-step-prev ,
body.itemid-237 .qf-contact .qf-step-prev ,
body.itemid-238 .qf-contact .qf-step-prev ,
body.itemid-242 .qf-contact .qf-step-prev ,
body.itemid-246 .qf-contact .qf-step-prev ,
body.itemid-252 .qf-contact .qf-step-prev {
	background: #ffffff;
	color: #000000;
	border: 1px solid #ffffff;
}

body.itemid-234 .qf-contact .qf-step-prev:hover ,
body.itemid-237 .qf-contact .qf-step-prev:hover ,
body.itemid-238 .qf-contact .qf-step-prev:hover ,
body.itemid-242 .qf-contact .qf-step-prev:hover ,
body.itemid-246 .qf-contact .qf-step-prev:hover ,
body.itemid-252 .qf-contact .qf-step-prev:hover {
	background: #FFBF80;
	color: #ffffff;
	border-color: #FFBF80;
}

/* Texte deja saisi qui devient noir "pas tout le temps" : c'est la selection
   de texte native du navigateur (ex. tabulation dans un champ deja rempli, qui
   selectionne tout son contenu) - le texte selectionne bascule sur les
   couleurs par defaut du navigateur (noir sur bleu clair), pas sur le theme
   de la page. On garde le texte blanc, avec un fond de selection sur la
   teinte orange de l'accent plutot que le bleu par defaut. */
body.itemid-234 .qf-contact input::selection,
body.itemid-237 .qf-contact input::selection,
body.itemid-238 .qf-contact input::selection,
body.itemid-242 .qf-contact input::selection,
body.itemid-246 .qf-contact input::selection,
body.itemid-252 .qf-contact input::selection,
body.itemid-234 .qf-contact textarea::selection ,
body.itemid-237 .qf-contact textarea::selection ,
body.itemid-238 .qf-contact textarea::selection ,
body.itemid-242 .qf-contact textarea::selection ,
body.itemid-246 .qf-contact textarea::selection ,
body.itemid-252 .qf-contact textarea::selection {
	background: rgba(255, 166, 77, 0.55);
	color: #ffffff;
}

/* Le fond de page (body) approxime la couleur du degrade pour combler l'espace
   structurel de 10px entre les blocs (deja documente), mais un degrade
   DIAGONAL n'a pas exactement la meme couleur a chaque position horizontale -
   la correspondance approximative se voyait donc a nouveau a certaines
   largeurs d'ecran. Fix robuste : fermer l'espace lui-meme (marge negative)
   plutot que deviner une couleur qui varie selon la largeur. */
body.itemid-234 #wrapper ,
body.itemid-237 #wrapper ,
body.itemid-238 #wrapper ,
body.itemid-242 #wrapper ,
body.itemid-246 #wrapper ,
body.itemid-252 #wrapper {
	margin-top: -10px !important;
}
body.itemid-234 #wrapper3 ,
body.itemid-237 #wrapper3 ,
body.itemid-238 #wrapper3 ,
body.itemid-242 #wrapper3 ,
body.itemid-246 #wrapper3 ,
body.itemid-252 #wrapper3 {
	margin-top: -10px !important;
}

/* Espace entre un titre de section (ex. "Informations du beneficiaire",
   "Type de prestation") et le premier champ qui suit : les 12px par defaut
   du composant restent trop serres une fois le texte agrandi sur cette page
   (voir capture utilisateur). */
body.itemid-234 .qf-contact .qf-section-heading ,
body.itemid-237 .qf-contact .qf-section-heading ,
body.itemid-238 .qf-contact .qf-section-heading ,
body.itemid-242 .qf-contact .qf-section-heading ,
body.itemid-246 .qf-contact .qf-section-heading ,
body.itemid-252 .qf-contact .qf-section-heading {
	margin-bottom: 26px;
}

/* Retire le trait sous les titres de section (ex. "Informations du
   beneficiaire", "Type de prestation") - le texte blanc/gras suffit a se
   distinguer, la ligne n'aidait pas la lisibilite. */
body.itemid-234 .qf-contact .qf-section-heading ,
body.itemid-237 .qf-contact .qf-section-heading ,
body.itemid-238 .qf-contact .qf-section-heading ,
body.itemid-242 .qf-contact .qf-section-heading ,
body.itemid-246 .qf-contact .qf-section-heading ,
body.itemid-252 .qf-contact .qf-section-heading {
	border-bottom: none;
}


/* Bandeau job-* (badges/bouton Postuler) injecte par plg_content_jobschema.
   Duplique ici pour que les pages Emploi restent stylees quel que soit le
   template actif (aide-menagere-sociale-charleroi a deja ces regles dans son
   propre custom.css, mais template_lm n'a pas de com_content override et
   n'inclut pas ce fichier). */
.job-container {
	max-width: 1000px;
	margin: 40px auto;
	font-family: Arial, sans-serif;
}

.job-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	font-size: 14px;
	color: #555;
}

.job-badge {
	background: #ffffff;
	padding: 6px 12px;
	border-radius: 30px;
	border: 1px solid #ddd;
}

.job-button {
	display: inline-block;
	background: #6C4AB6;
	color: white;
	padding: 12px 20px;
	border-radius: 10px;
	text-decoration: none;
	margin-top: 15px;
}

.job-button:hover {
	background: #55359a;
}

.job-container--auto {
	margin: 20px 0 30px;
	padding: 20px 25px;
	background: linear-gradient(to top, #F5EDFC 0%, #FCFAFF 100%);
	border-radius: 20px;
	color: #000;
}

.job-deadline {
	margin: 10px 0 0;
	font-size: 14px;
	color: #555;
}

.job-title, .job-header {
	color: #000;
}

.job-box {
	color: #000;
}

/* Page "Offres d'emploi" (menu Itemid=241) — grille de cartes cliquables,
   inspiree de federation.aideetsoinsadomicile.be/travailler-fasd-asd/offres-demploi/ */
body.itemid-241 .com-content-category-blog__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 24px 0;
}

body.itemid-241 .com-content-category-blog__item {
	background: #ffffff;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
	color: #000;
	display: flex;
	flex-direction: column;
}

body.itemid-241 .com-content-category-blog__item .page-header {
	margin: 0 0 8px;
}

body.itemid-241 .com-content-category-blog__item h2 {
	margin: 0;
	font-size: 1.3rem;
}

body.itemid-241 .com-content-category-blog__item h2 a {
	color: #4a3a6a;
	text-decoration: none;
}

body.itemid-241 .com-content-category-blog__item h2 a:hover {
	text-decoration: underline;
}

/* Détails/Catégorie/Publié le : redondant sur une carte d'offre, masqué */
body.itemid-241 .com-content-category-blog__item dl.article-info {
	display: none;
}

/* Badges déjà stylés par plg_content_jobschema — juste retirer la marge du
   conteneur autonome puisqu'il est désormais dans une carte déjà cadrée */
body.itemid-241 .com-content-category-blog__item .job-container--auto {
	margin: 0 0 12px;
	padding: 0;
	background: none;
}

body.itemid-241 .com-content-category-blog__item p {
	flex: 1 1 auto;
	color: #333;
}

body.itemid-241 .com-content-category-blog__item .readmore {
	margin: 12px 0 0;
}

body.itemid-241 .com-content-category-blog__item .readmore a {
	display: inline-block;
	background: #6C4AB6;
	color: #ffffff !important;
	padding: 10px 18px;
	border-radius: 10px;
	text-decoration: none !important;
	font-size: 0.9rem;
}

body.itemid-241 .com-content-category-blog__item .readmore a:hover {
	background: #55359a;
}

body.itemid-241 .com-content-category-blog__item .readmore .icon-chevron-right,
body.itemid-241 .com-content-category-blog__item .readmore .icon-chevron-left {
	display: none;
}

body.itemid-241 .page-header h1 {
	color: #ffffff;
}

/* Fiche Offre d'emploi (Itemid=241, vue article) : mise en page v3. Rangee 1
   = h1 "Offres d'emploi" pleine largeur. Rangee 2+ = photo (aleatoire, voir
   plg_content_jobschema/buildPhotoHtml) a gauche, titre du poste + date +
   boite Conditions empiles a droite. La boite Mission reste pleine largeur
   en dessous. .job-container/.job-grid sont "deroules" (display:contents)
   pour que leurs enfants deviennent des items directs de la grille CSS posee
   sur .item-page, ce qui permet d'aligner photo/Conditions a cote des
   titres/de la date bien qu'ils ne soient pas des enfants du meme wrapper a
   l'origine (aucun changement de template requis). Si aucune photo n'est
   disponible pour la categorie (dossier vide/non configure), .job-photo
   n'existe simplement pas dans le HTML — :not(:has(.job-photo)) bascule
   alors sur une mise en page a une seule colonne. */
body.itemid-241.view-article .job-header {
	display: none;
}

body.itemid-241.view-article dl.article-info dt.article-info-term,
body.itemid-241.view-article dl.article-info dd.parent-category-name,
body.itemid-241.view-article dl.article-info dd.category-name {
	display: none;
}

/* Les <dd> ont un retrait gauche par defaut du navigateur (margin-inline-start)
   : c'est la cause du desalignement de "Publie le" sous le titre, pas une
   histoire de grille — a corriger explicitement. */
body.itemid-241.view-article dl.article-info dd {
	margin: 0;
}

body.itemid-241.view-article .com-content-article.item-page {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 32px;
	row-gap: 0;
	align-items: start;
	grid-template-areas:
		"h1      h1"
		"photo   h2"
		"photo   date"
		"photo   conditions"
		"mission mission";
}

body.itemid-241.view-article .com-content-article.item-page:not(:has(.job-photo)) {
	grid-template-columns: 1fr;
	grid-template-areas:
		"h1"
		"h2"
		"date"
		"conditions"
		"mission";
}

body.itemid-241.view-article .page-header:has(h1) {
	grid-area: h1;
	margin: 0 0 32px;
}

body.itemid-241.view-article .page-header:has(h2) {
	grid-area: h2;
	margin: 0 0 6px;
}

body.itemid-241.view-article dl.article-info {
	grid-area: date;
	margin: 0;
}

body.itemid-241.view-article .job-container,
body.itemid-241.view-article .job-grid {
	display: contents;
}

body.itemid-241.view-article .job-photo {
	grid-area: photo;
	position: relative;
}

body.itemid-241.view-article .job-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

body.itemid-241.view-article .job-photo-badge {
	position: absolute;
	bottom: -14px;
	right: -14px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

body.itemid-241.view-article .job-photo-badge img {
	width: 80%;
	height: 80%;
	object-fit: contain;
	border: none;
	box-shadow: none;
	border-radius: 0;
}

body.itemid-241.view-article .job-grid > .job-box:first-child {
	grid-area: mission;
	margin-top: 32px;
}

body.itemid-241.view-article .job-grid > .job-box:last-child {
	grid-area: conditions;
	margin-top: 16px;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 16px;
	box-shadow: none;
	color: #ffffff;
}

body.itemid-241.view-article .job-grid > .job-box:last-child h3 {
	color: #ffffff;
}

@media (max-width: 767px) {
	body.itemid-241.view-article .com-content-article.item-page {
		grid-template-columns: 1fr;
		grid-template-areas:
			"h1"
			"photo"
			"h2"
			"date"
			"conditions"
			"mission";
	}
}


/* Fiche Offre d'emploi (Itemid=241, vue article) : deux boutons en bas de la
   boite Mission — "Proposez votre candidature" (rose) a gauche, "Retour
   (toutes les offres)" (violet, style job-button d'origine) a droite. Sur
   mobile, les deux se centrent avec un espace entre eux (voir maquette
   bouton-bas-page.jpg). */
body.itemid-241.view-article .job-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-top: 15px;
}

body.itemid-241.view-article .job-actions .job-button {
	margin-top: 0;
}

body.itemid-241.view-article .job-button--apply {
	background: #D062AF;
}

body.itemid-241.view-article .job-button--apply:hover {
	background: #B84E96;
}

@media (max-width: 767px) {
	body.itemid-241.view-article .job-actions {
		justify-content: center;
	}
}


/* Page FAQ (Itemid=223) : titre "Foire aux questions" centre */
body.itemid-223 .page-header h1 {
	text-align: center;
}


/* Page "Obtenir une aide" (Itemid=236) : retire le fond lavande #f0e3ff des
   blocs .clearpurple (4 blocs : les 3 cartes Aide familiale/menagere/Ouvrier
   + le bloc "Notre service d'accueil") - transparent sur le degrade violet
   de la page. Les H2/H3 de ces blocs passent en blanc directement dans le
   HTML de l'article (voir wk01k_content.introtext, id=14). */
body.itemid-236 .clearpurple {
	background-color: transparent;
}


/* Page "Obtenir une aide" (Itemid=236), 3 cartes du haut (Aide familial(e),
   Aide-menagere sociale, Ouvrier polyvalent) : le titre "Aide-menager(e)
   social(e)" prend 2 lignes contre 1 pour les deux autres, ce qui decale sa
   photo plus bas. Hauteur de titre mesuree (Playwright) : 1 ligne = 48.6px,
   2 lignes = 77.2px - min-height reserve la meme place partout pour que les
   3 photos s'alignent, sans deviner un decalage a l'oeil. */
body.itemid-236 .wf-column > .clearpurple > h2 {
	min-height: 78px;
}

/* Legendes sous les photos (paragraphe direct de .clearpurple, pas le bloc
   "Notre service d'accueil" qui reste sur fond blanc plus bas) : en blanc,
   lisible sur le degrade violet maintenant que le fond lavande est retire. */
body.itemid-236 .wf-column > .clearpurple > p {
	color: #ffffff;
}


/* Page "Obtenir une aide" (Itemid=236) : section "Les aides", .lm-card--outline.
   Version precedente faisait passer la bordure derriere le titre (h1 en absolu,
   translate -50%) -- rejete explicitement par l'utilisateur (capture "pas de
   contour blanc.jpg", croix rouge sur l'effet). Retire : plus de bordure du
   tout, titre en flux normal, simplement centre au-dessus du contenu. */
.lm-card--outline {
	position: relative;
	background: transparent;
}

.lm-card--outline > h1 {
	margin: 0 0 20px;
	text-align: center;
	color: #ffffff;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* Espace entre le texte des cartes et le bouton "Obtenir" : .btn-bleu applique
   un margin-top: -4px (pense pour un autre contexte), qui fait chevaucher le
   bouton et le paragraphe juste au-dessus sur ces 3 cartes. */
body.itemid-236 .wf-column > .clearpurple > .btn-common {
	margin-top: 16px;
}


/* Bloc "Besoin d'un renseignement ?" (Itemid=236) : texte blanc demande, mais
   ce bloc tombe hors de la zone de degrade violet de la page (fond blanc
   plus bas) - sans fond le texte blanc est invisible. Fond UNI (pas de
   degrade, refuse explicitement) : reprend #43279D, la couleur violette deja
   utilisee ailleurs sur le site comme aplat de secours au-dela de la fenetre
   de degrade (voir regle .lm-header/.lm-top/.lm-main-wrapper plus haut dans
   ce fichier) - pas une couleur inventee pour l'occasion. Cible ce bloc
   precisement via :has(> .wf-columns), qui le distingue des 3 cartes du haut
   (celles-la restent transparentes, non concernees). */
body.itemid-236 .clearpurple:has(> .wf-columns) {
	background-color: #43279D;
}

body.itemid-236 .clearpurple:has(> .wf-columns) .btn-common {
	margin-top: 16px;
}


/* Page "L'aide-menagere sociale" (Itemid=225), mobile : titre du site
   (.titre-logo-page) centre - regle sitewide car ce bloc est un module
   d'en-tete commun a toutes les pages, pas un contenu d'article. */
@media (max-width: 767px) {
	.titre-logo-page {
		text-align: center;
	}
}

/* Sitewide, mobile : H1 d'article centre + taille reduite (26px) -
   generalise depuis la page "L'aide-menagere sociale" (Itemid=225, voir
   capture Temp/ver-mobile-services.jpg), trop proche visuellement du titre
   du site juste au-dessus (meme taille ~32px, meme couleur blanche) sur
   cette page-la. Scope a .com-content-article__body pour ne toucher que le
   titre d'un article, jamais un h1 de module/composant hors article. */
@media (max-width: 767px) {
	.com-content-article__body h1 {
		text-align: center;
		font-size: 26px;
	}
}

/* Sitewide, mobile : quand un H2 sert de sous-titre juste apres le H1
   (ex. "La gardienne pour votre habitation..." sur la page aide-menagere),
   il est centre comme le H1 - sans reduction de taille (non demandee pour
   ce niveau). :first-of-type = le tout premier H2 de l'article, celui qui
   joue ce role de titre au-dessus ; les H2 suivants plus bas dans le
   contenu ne sont pas concernes. */
@media (max-width: 767px) {
	.com-content-article__body h2:first-of-type {
		text-align: center;
	}
}

/* Separateur horizontal blanc a bords fondus, sitewide - remplace le
   shortcode {up hr=degrade-gris | hr-width=80%} du plugin tiers "Content -
   UP" (page "L'asbl", Itemid=227, entre les 3 poles et "Le Pole Social" /
   "Le pole Administratif"). 75% de large, centre, degrade transparent aux
   deux extremites via un fond en gradient plutot qu'une bordure classique. */
.lm-fade-separator {
	width: 75%;
	max-width: 75%;
	margin: 24px auto;
	border: none;
	height: 1px;
	background: linear-gradient(to right, transparent 0%, #ffffff 50%, transparent 100%);
}

/* Page "L'aide-menagere sociale" (Itemid=225), mobile : dans le tout
   premier bloc .wf-columns de l'article (photo + texte "La gardienne pour
   votre habitation..."), l'image passe avant le texte a l'empilement
   mobile - le HTML garde le texte en premier (lecteur d'ecran/SEO), voir
   recette "Hero 2 colonnes, image en premier sur mobile" du skill
   css-layout. Cible :first-of-type pour ne pas affecter les deux autres
   blocs .wf-columns plus bas dans le meme article. */
@media (max-width: 767px) {
	body.itemid-225 .com-content-article__body > .wf-columns:first-of-type > .wf-column:last-child {
		order: -1;
	}
}

/* === Mise en page .wf-columns/.wf-column (ex-JCE, desinstalle le 2026-09-06) ===
   Ces classes viennent du plugin editeur JCE (Colonnes), dont le CSS frontend
   etait injecte par plg_content_jce. Sa suppression a casse la mise en page de
   TOUTES les pages utilisant ce systeme de colonnes (photos equipe article 7,
   blocs 2 colonnes article 10, etc.), les elements retombant en un seul flux
   vertical sans styling. Regles reconstituees a l'identique de celles deja
   retrouvees et validees sur langagemachine.be (meme incident, meme fix, voir
   Projets/Langagemachine-be/Template/lm360-body.css). */
.wf-columns { display: flex; flex-wrap: wrap; gap: 24px; margin: 24px 0; }
.wf-columns .wf-column { flex: 1 1 0; min-width: 0; }
@media (max-width: 768px) {
  .wf-columns.wf-columns-stack-medium { flex-direction: column; }
}

/* === Accueil - onglet "Le Service" : 2 lignes (2026-09-07) ===
   Ligne 1 (2 colonnes) : texte "c'est :" + liste (centre verticalement
   sur la hauteur de l'image) / image. Ligne 2 (pleine largeur, sous
   une ligne de separation) : paragraphe d'intro "oeuvre chaque jour...".
   Repris a l'identique sur mod 133 (desktop) et mod 135 (mobile). */
.tab-service-card .wf-columns.tab-service-row1 {
  margin-bottom: 20px;
}
.tab-service-card .wf-column.tab-service-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tab-service-card .tab-service-intro { margin: 0; }

/* ===== BEGIN espace du personnel (Serfam) =================================
   Bloc unique, pose le 2026-09-30. Tout ce qui suit sert aux ecrans reserves
   au personnel : menu, pages de connexion, pages des offres d'emploi.
   Ne rien ajouter ailleurs dans ce champ pour ces ecrans : le champ est un
   TEXT de 65535 octets et il etait deja rempli a 64 Ko.
   ========================================================================= */

/* --- 1. Menu du personnel ------------------------------------------------
   Rendu du module mod_menu (suffixe de classe sfc-staff-menu). template_lm ne
   style aucun menu Joomla : sans ceci, liste verticale brute. */
ul.sfc-staff-menu {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem .5rem;
	margin: 0 0 1.25rem;
	padding: .5rem .65rem;
	list-style: none;
	border: 1px solid var(--lm-color-border, #e5e7eb);
	border-radius: var(--lm-radius, 8px);
	background: rgba(37, 99, 235, .05);
	font-size: .9rem;
	line-height: 1.3;
}

ul.sfc-staff-menu > li { margin: 0; padding: 0; list-style: none; }

ul.sfc-staff-menu > li > a,
ul.sfc-staff-menu > li > span {
	display: flex;
	align-items: center;
	min-height: 32px;
	padding: .3rem .7rem;
	border: 1px solid var(--lm-color-border, #e5e7eb);
	border-radius: 999px;
	background: #fff;
	color: var(--lm-color-text, #1f2937);
	text-decoration: none;
}

ul.sfc-staff-menu > li > a:hover,
ul.sfc-staff-menu > li > a:focus-visible,
ul.sfc-staff-menu > li.current > a,
ul.sfc-staff-menu > li.active > a {
	border-color: var(--lm-color-primary, #2563eb);
	background: var(--lm-color-primary, #2563eb);
	color: #fff;
}

/* Sur l'accueil, le menu vit dans la zone haute, une grille a trois colonnes :
   il occupe la ligne entiere, sinon il serait coince dans un tiers. */
.lm-cols > ul.sfc-staff-menu { grid-column: 1 / -1; order: -1; margin-bottom: 1.25rem; }

/* Cible tactile de 44 px sur telephone : le gabarit reduit la taille de police. */
@media (max-width: 600px) {
	ul.sfc-staff-menu > li > a,
	ul.sfc-staff-menu > li > span { min-height: 44px; }
}

/* --- 2. Pages de connexion ------------------------------------------------
   Toutes les vues de com_users et la page d'ajout d'une offre : contenu sur
   fond blanc, texte noir. Le gabarit pose un degrade violet a texte blanc, sur
   lequel un formulaire est illisible. Cible body.com_users et non un suffixe de
   page : la page de changement de mot de passe n'a pas d'item de menu propre.
   Les controles sont styles ici parce que template_lm n'embarque pas Bootstrap. */
body:is(.com_users, .sfc-page-blanche) .lm-main {
	padding: 1.75rem;
	border-radius: var(--lm-radius, 8px);
	background: #fff;
	color: #1f2937;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

body:is(.com_users, .sfc-page-blanche) .lm-main :is(h1, h2, h3, legend, label, p, li, small, strong, dt, dd) {
	color: #1f2937;
}

body:is(.com_users, .sfc-page-blanche) .lm-main h1 { margin-top: 0; font-size: 1.6rem; }
body:is(.com_users, .sfc-page-blanche) .lm-main a { color: #1d4ed8; }
body:is(.com_users, .sfc-page-blanche) .lm-main a:hover,
body:is(.com_users, .sfc-page-blanche) .lm-main a:focus-visible { color: #1e3a8a; }

body:is(.com_users, .sfc-page-blanche) .lm-main fieldset {
	margin: 0 0 1.5rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid #d1d5db;
	border-radius: var(--lm-radius, 8px);
}

body:is(.com_users, .sfc-page-blanche) .lm-main legend { padding: 0 .45rem; font-weight: 700; }
body:is(.com_users, .sfc-page-blanche) .lm-main label { display: inline-block; margin-bottom: .25rem; font-weight: 600; }

body:is(.com_users, .sfc-page-blanche) .lm-main :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], select, textarea) {
	display: block;
	width: 100%;
	max-width: 26rem;
	margin-bottom: .9rem;
	padding: .55rem .7rem;
	border: 1px solid #6b7280;
	border-radius: var(--lm-radius, 8px);
	background: #fff;
	color: #1f2937;
	font: inherit;
}

body:is(.com_users, .sfc-page-blanche) .lm-main :is(input, select, button):focus-visible {
	outline: 2px solid var(--lm-color-primary, #2563eb);
	outline-offset: 2px;
}

/* L'editeur et les onglets gardent leur propre habillage : sans ces exclusions,
   la regle repeignait toute la barre d'outils de TinyMCE en bleu. */
body:is(.com_users, .sfc-page-blanche) .lm-main button:not([class*="tox-"]):not([role="tab"]),
body:is(.com_users, .sfc-page-blanche) .lm-main .btn:not([class*="tox-"]),
body:is(.com_users, .sfc-page-blanche) .lm-main input[type="submit"] {
	min-height: 44px;
	padding: .55rem 1.4rem;
	border: 1px solid var(--lm-color-primary, #2563eb);
	border-radius: var(--lm-radius, 8px);
	background: var(--lm-color-primary, #2563eb);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

body:is(.com_users, .sfc-page-blanche) .lm-main :is(.btn-secondary, .input-password-toggle) {
	border-color: #6b7280;
	background: #f3f4f6;
	color: #1f2937;
	font-weight: 400;
}

/* Le bouton de fermeture d'un message n'est pas une action principale. */
body:is(.com_users, .sfc-page-blanche) .lm-main joomla-alert button.joomla-alert--close {
	min-height: 0;
	padding: 0 .35rem;
	border: 0;
	background: none;
	color: #1f2937;
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1;
}

/* Etiquette au-dessus du champ. Ne JAMAIS viser .control-group:last-child :
   le dernier groupe d'un profil est le champ e-mail, qui passait en flex. */
body:is(.com_users, .sfc-page-blanche) .lm-main :is(.control-label, .controls) { display: block; }
body:is(.com_users, .sfc-page-blanche) .lm-main .control-group { margin-bottom: 1rem; }

body:is(.com_users, .sfc-page-blanche) .lm-main .form-check {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: .9rem 0;
}

body:is(.com_users, .sfc-page-blanche) .lm-main .form-check-label { margin: 0; font-weight: 400; }
body:is(.com_users, .sfc-page-blanche) .lm-main .form-check-input { width: auto; margin: 0; }

/* Les liens de secours doivent se voir : c'est par la qu'on repart quand le mot
   de passe est perdu. Ils sont enfants directs du conteneur, pas des <li>. */
body:is(.com_users, .sfc-page-blanche) .lm-main .com-users-login__options {
	margin-top: 1.5rem;
	padding-top: 1.1rem;
	border-top: 1px solid #d1d5db;
}

body:is(.com_users, .sfc-page-blanche) .lm-main .com-users-login__options a {
	display: block;
	margin: .35rem 0;
	padding: .35rem 0;
	font-weight: 600;
	text-decoration: underline;
}

/* Le bouton « Activer/Desactiver l'editeur » bascule vers le CODE SOURCE malgre
   son libelle : sans usage pour qui redige une offre, il est masque. */
body.sfc-page-blanche .lm-main button.js-tiny-toggler-button { display: none; }

/* --- 3. Page de gestion des offres ---------------------------------------
   Elle garde le violet du site, mais ses liens y passent en blanc : le bleu par
   defaut y tombe a 1,5:1. Le degrade est pose sur body.lm-site en
   background-attachment: fixed, donc il ne couvre qu'une hauteur d'ecran et le
   bas d'une page longue redevient blanc, ou un lien blanc serait invisible.
   Selecteur a deux classes pour passer devant la regle du gabarit. */
body.lm-site.sfc-page-violette { background-attachment: scroll; }

body.sfc-page-violette .lm-main a { color: #fff; text-decoration: none; }
body.sfc-page-violette .lm-main a:hover,
body.sfc-page-violette .lm-main a:focus-visible { color: #fff; text-decoration: underline; }

/* Les cellules de titre sont des <th scope="row">, centres par defaut du
   navigateur : sur un tableau de gestion, tout se lit a gauche. */
body.sfc-page-violette .lm-main table :is(th, td) {
	text-align: left;
	vertical-align: top;
	padding: .45rem .9rem .45rem 0;
}

/* « Nouvel article » fait doublon avec l'entree de menu « Ajouter », et Joomla
   n'offre aucun reglage pour le retirer de cette vue. */
body.sfc-page-violette .lm-main a[href*="task=article.add"] { display: none; }


body.sfc-page-blanche .lm-main { margin-bottom: 2.75rem; }

/* --- 4. Boutons devenus de vrais liens (2026-10-01) -----------------------
   Les <button data-target> du contenu sont des <a href> pour que Joomla en
   reecrive l'adresse et que les moteurs les suivent. Un <a> herite de
   l'interligne du texte (bouton 7 px plus haut) et, sur une page blanche, de
   la couleur bleue des liens : les deux sont ramenes au rendu du bouton. */
a.btn-common { line-height: normal; }
a.btn-common:is(:hover, :focus-visible, :active) { color: #fff; text-decoration: none; }
body:is(.com_users, .sfc-page-blanche) .lm-main a.btn-common,
body:is(.com_users, .sfc-page-blanche) .lm-main a.btn-common:hover,
body:is(.com_users, .sfc-page-blanche) .lm-main a.btn-common:focus-visible { color: #fff; text-decoration: none; }

/* --- 5. Contraste des boutons (2026-10-01) ---------------------------------
   Texte blanc a 18 px : il faut 4,5:1. Le vert #00B22D donnait 2,84:1 et
   l'orange #FF602A 3,02:1 (2,58:1 au survol, plus clair). Meme teinte,
   assombrie juste assez. Le survol du vert reste le bleu #0066CC (5,57:1). */
/* Element + classe : le CSS du gabarit est charge APRES ce fichier et redefinit
   .btn-vert et .btn-orange ; a specificite egale, il gagnait. */
:is(a, button).btn-vert { background-color: #008822; }
:is(a, button).btn-orange { background-color: #DA3700; }
:is(a, button).btn-orange:hover, :is(a, button).btn-orange:focus-visible { background-color: #C23100; }

/* ===== END espace du personnel (Serfam) =================================== */