.visuel-rubrique #entete {
    top: 2.5rem;
    background-color: transparent;
}

@media screen and (max-width: 40em) {
	.visuel-rubrique #entete {
            top: 1.5rem;
    		padding-left: 0 !important;
	}
}

/** Onglets et accordéons **/

.tabs_wrapper, .accordion_wrapper {
    padding: 1em !important;
}

.tabs_toggler button.tabs_toggler__btn, .accordion_toggler button.accordion_toggler__btn, .accordion_toggler .accordion_toggler button, .tabs_toggler .tabs_toggler.desktop-only button {
    font: 600 1rem/1 Arial, "Helvetica Neue", Helvetica, "Bitstream Vera Sans", sans-serif;
}  

.ckeditor-tabs {
    padding-top: 2em;
}

.tabs_toggler__btn {
    padding: 0.8em 2.5em !important;
}

.tabs_toggler.desktop-only {
    margin: 0!important;
    border-left: 2px solid #F3F3F3!important;
    border-right: 2px solid #F3F3F3!important;
    border-top: 2px solid #F3F3F3!important;
}


.accordion_toggler {
    border: 2px solid #F3F3F3;
    margin-bottom: 0.5em !important;
    background-color: #F3F3F3;
    color: #000000;
}

.accordion_wrapper.active {
    display: block;
    border: 2px solid #F3F3F3;
    margin-bottom: 1em;
}

.accordion_wrapper.active p, .tabs_wrapper.active p {
    color: #000000;
}

.tabs_toggler.desktop-only:focus::before, .tabs_toggler.desktop-only:focus-within::before, .tabs_toggler.desktop-only:hover::before, .tabs_toggler.desktop-only.active::before {
    width: 100% !important;
}

.tabs_toggler.desktop-only:focus::before, .tabs_toggler.desktop-only:focus-within::before, .tabs_toggler.desktop-only:hover::before, .tabs_toggler.desktop-only.active::before {
    border-left: 1px solid #EF9A00 !important;
    border-right: 1px solid #EF9A00 !important;
    background-color: #EF9A00 !important;
}

.tabs_toggler.desktop-only:focus, .tabs_toggler.desktop-only:focus-within, .tabs_toggler.desktop-only:hover, .tabs_toggler.desktop-only.active {
    background-color: #fff;
    border-left: 1px solid #F3F3F3;
    border-right: 1px solid #F3F3F3;
}

.tabs_toggler.desktop-only button {
    color: #000000;
}

/* Responsive */
@media only screen and (max-width: 1024px) {
   .tabs_toggler {
          width: 100%;
    }
}

  /*CONFORT PLUS*/
  #accessibilitytoolbarGraphic .ucibtn-secondary.active, #accessibilitytoolbarGraphic .ucibtn-secondary:active, #accessibilitytoolbarGraphic input[type=checkbox]:checked+label.ucibtn-secondary {
      background-image: none;
      background-color: #EF9A00!important;
      border-color: #000!important;
      color: #fff!important;
  }
  #accessibilitytoolbarGraphic .ucibtn-primary {
      background-color: #EF9A00!important;
      border-color: #000!important;
      color: #fff!important;
      margin-left: 1.25em;
  }
  #accessibilitytoolbarGraphic .ucibtn-info.active, #accessibilitytoolbarGraphic .ucibtn-info:active, .open>#accessibilitytoolbarGraphic .ucibtn-info.dropdown-toggle {
      background-image: none;
      background-color: #EF9A00!important;
      border-color: #000!important;
      color: #fff!important;
  }
  #accessibilitytoolbarGraphic .uci_menu_active a:focus, #accessibilitytoolbarGraphic .uci_menu_active a:hover {
      border-color: #9b14ff!important;
  }
  #accessibilitytoolbarGraphic input[type=radio]:checked+label:before {
      border-color: #EF9A00!important;
  }
  #accessibilitytoolbarGraphic input[type=checkbox]:checked+label:after {
      background-color: #EF9A00!important;
  }
/*FIN CONFORT PLUS*/

/**/
:root {
  --inspe-primary: #004b87;
  --inspe-secondary: #e20030;
  --inspe-bg-light: #f4f7f9; /* Légèrement plus bleuté pour la douceur */
  --inspe-text-main: #333;
  --inspe-border: #dce3e8;
  --icon-color: #004b87; /* Couleur des pictos */
}

.ws_odf {
  max-width: 850px;
  margin: 0 auto;
  padding: 2rem;
  font-family: inherit;
  color: var(--inspe-text-main);
  line-height: 1.6;
}

/* -----------------------------------------
OFFRE DE FORMATION    EN-TÊTE : Infos clés (Responsable, Durée...)
   ----------------------------------------- */
/* Souvent, le début du div contient des infos brutes (Responsable, durée, etc.) 
   On peut cibler les premiers paragraphes ou divs s'ils n'ont pas de H2 avant */
.ws_odf > p:first-of-type,
.ws_odf > div:first-of-type {
  background-color: var(--inspe-bg-light);
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 5px solid var(--inspe-primary);
  margin-bottom: 2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.ws_odf strong {
  color: var(--inspe-primary);
  font-weight: 600;
}

/* -----------------------------------------
   TITRES DE SECTIONS (H2) AVEC ICÔNES
   ----------------------------------------- */
.ws_odf h2 {
  font-size: 1.5rem;
  color: var(--inspe-primary);
  margin-top: 2.5rem;
  margin-bottom: 1.2rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--inspe-border);
  display: flex;
  align-items: center;
  gap: 10px; /* Espace entre l'icône et le texte */
}

/* Système d'icônes basé sur le contenu du titre (si possible avec la structure) 
   NOTE : En CSS pur, on ne peut cibler le contenu texte exact d'un H2 de manière universelle sans JS ou sans classes spécifiques.
   Cependant, on peut ajouter une icône générique stylisée à tous les H2, ou cibler par ordre (nth-of-type) si la structure est stricte.
   Ici, je propose une icône générique élégante pour tous les H2, et des styles spécifiques si vous pouvez ajouter des classes. */

.ws_odf h2::before {
  /* Icône par défaut : un petit carré ou chevron stylisé */
  content: '►';
  color: var(--inspe-secondary);
  font-size: 1rem;
  margin-right: 8px;
  transform: translateY(-1px);
}

/* -----------------------------------------
   SOUS-SECTIONS (H3) : Modules, etc.
   ----------------------------------------- */
.ws_odf h3 {
  font-size: 1.25rem;
  color: var(--inspe-text-main);
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
  padding-left: 1rem;
  border-left: 3px solid var(--inspe-secondary);
}

/* -----------------------------------------
   LISTES (UL/LI)
   ----------------------------------------- */
.ws_odf ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 1.5rem;
}

.ws_odf ul li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.5rem;
}

.ws_odf ul li::before {
  /* Icône check ou chevron pour les listes */
  content: '✓'; 
  position: absolute;
  left: 0;
  top: 0;
  color: var(--inspe-primary);
  font-weight: bold;
}

/* -----------------------------------------
   LIENS ET BOUTONS
   ----------------------------------------- */
.ws_odf a {
  color: var(--inspe-primary);
  text-decoration: none;
  border-bottom: 1px dashed var(--inspe-primary);
  transition: all 0.2s ease;
}

.ws_odf a:hover {
  color: var(--inspe-secondary);
  border-bottom-style: solid;
  border-bottom-color: var(--inspe-secondary);
}

/* Mettre en valeur le lien e-candidat comme un bouton */
.ws_odf a[href*="ecandidat"] {
  display: inline-block;
  background-color: var(--inspe-primary);
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  border: none;
  font-weight: 600;
  margin-top: 1rem;
  text-transform: uppercase;
  font-size: 0.9rem;
  box-shadow: 0 4px 6px rgba(0,75,135,0.2);
}

.ws_odf a[href*="ecandidat"]:hover {
  background-color: var(--inspe-secondary);
  color: white;
  box-shadow: 0 6px 8px rgba(226,0,48,0.2);
  transform: translateY(-2px);
}

/* -----------------------------------------
   MISE EN VALEUR SPÉCIFIQUE (Tarifs, Contacts)
   ----------------------------------------- */
/* Si le texte contient "Tarifs :" ou "Contact", on peut styliser les paragraphes adjacents si la structure le permet, 
   sinon on s'appuie sur le visuel global épuré pour les faire ressortir. */

/* Pour les emails (mailto:) */
.ws_odf a[href^="mailto:"]::before {
  content: '✉️ ';
  font-size: 0.9em;
}