/* Skin SBD pour les pages formation d'AAC : palette + typo + banniere identiques a SBD, limite au contexte formation */

/* 1) Variables SBD (couleurs + police Nunito Sans) limitees aux formations */
.page-header-formation,
.wrapper-single-formation,
.wrapper-archives-formation,
.wrapper-description-category {
  --infocobweb-color-main: #e1bfb3;
  --infocobweb-color-main-90: rgba(225, 191, 179, 0.9);
  --infocobweb-color-main-80: rgba(225, 191, 179, 0.8);
  --infocobweb-color-main-70: rgba(225, 191, 179, 0.7);
  --infocobweb-color-main-60: rgba(225, 191, 179, 0.6);
  --infocobweb-color-main-50: rgba(225, 191, 179, 0.5);
  --infocobweb-color-main-40: rgba(225, 191, 179, 0.4);
  --infocobweb-color-main-30: rgba(225, 191, 179, 0.3);
  --infocobweb-color-main-20: rgba(225, 191, 179, 0.2);
  --infocobweb-color-main-10: rgba(225, 191, 179, 0.1);
  --infocobweb-color-main-dark: #c59b8c;
  --infocobweb-color-main-dark-90: rgba(197, 155, 140, 0.9);
  --infocobweb-color-main-dark-80: rgba(197, 155, 140, 0.8);
  --infocobweb-color-main-dark-70: rgba(197, 155, 140, 0.7);
  --infocobweb-color-main-dark-60: rgba(197, 155, 140, 0.6);
  --infocobweb-color-main-dark-50: rgba(197, 155, 140, 0.5);
  --infocobweb-color-main-dark-40: rgba(197, 155, 140, 0.4);
  --infocobweb-color-main-dark-30: rgba(197, 155, 140, 0.3);
  --infocobweb-color-main-dark-20: rgba(197, 155, 140, 0.2);
  --infocobweb-color-main-dark-10: rgba(197, 155, 140, 0.1);
  --infocobweb-color-secondary: #a14947;
  --infocobweb-color-secondary-90: rgba(161, 73, 71, 0.9);
  --infocobweb-color-secondary-80: rgba(161, 73, 71, 0.8);
  --infocobweb-color-secondary-70: rgba(161, 73, 71, 0.7);
  --infocobweb-color-secondary-60: rgba(161, 73, 71, 0.6);
  --infocobweb-color-secondary-50: rgba(161, 73, 71, 0.5);
  --infocobweb-color-secondary-40: rgba(161, 73, 71, 0.4);
  --infocobweb-color-secondary-30: rgba(161, 73, 71, 0.3);
  --infocobweb-color-secondary-20: rgba(161, 73, 71, 0.2);
  --infocobweb-color-secondary-10: rgba(161, 73, 71, 0.1);
  --infocobweb-color-grey: #f9f9f9;
  --infocobweb-color-grey-90: rgba(249, 249, 249, 0.9);
  --infocobweb-color-grey-80: rgba(249, 249, 249, 0.8);
  --infocobweb-color-grey-70: rgba(249, 249, 249, 0.7);
  --infocobweb-color-grey-60: rgba(249, 249, 249, 0.6);
  --infocobweb-color-grey-50: rgba(249, 249, 249, 0.5);
  --infocobweb-color-grey-40: rgba(249, 249, 249, 0.4);
  --infocobweb-color-grey-30: rgba(249, 249, 249, 0.3);
  --infocobweb-color-grey-20: rgba(249, 249, 249, 0.2);
  --infocobweb-color-grey-10: rgba(249, 249, 249, 0.1);
  --infocobweb-color-text: #2d2e2e;
  --infocobweb-color-text-90: rgba(45, 46, 46, 0.9);
  --infocobweb-color-text-80: rgba(45, 46, 46, 0.8);
  --infocobweb-color-text-70: rgba(45, 46, 46, 0.7);
  --infocobweb-color-text-60: rgba(45, 46, 46, 0.6);
  --infocobweb-color-text-50: rgba(45, 46, 46, 0.5);
  --infocobweb-color-text-40: rgba(45, 46, 46, 0.4);
  --infocobweb-color-text-30: rgba(45, 46, 46, 0.3);
  --infocobweb-color-text-20: rgba(45, 46, 46, 0.2);
  --infocobweb-color-text-10: rgba(45, 46, 46, 0.1);
  --infocobweb-font-main: 'Nunito Sans', sans-serif;
  --infocobweb-font-sec: 'Nunito Sans', sans-serif;
}

/* 2) Banniere format SBD (classe dediee page-header-formation, sans la classe page-header : les regles AAC ne s'appliquent pas) */
.page-header-formation { position: relative; }
.page-header-formation .page-header-image { position: relative; display: block; width: 100%; }
.page-header-formation .page-header-image .if-image { width: 100%; background: #000; height: 250px; }
.page-header-formation .page-header-image .if-image img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .page-header-formation .page-header-image .if-image { height: 370px; } }
.page-header-formation .page-header-image:before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; height: 100%; width: 100%; background: rgba(255, 255, 255, 0.7); }
.page-header-formation .page-header-contenu { position: absolute; text-align: center; width: 90%; bottom: 80px; left: 50%; z-index: 2; transform: translateX(-50%); }
@media (min-width: 768px) { .page-header-formation .page-header-contenu { width: 60%; } }
.page-header-formation .page-header-contenu .page-header-contenu-legende-h { position: relative; z-index: 2; flex-basis: auto; line-height: 1.2; font-weight: 900; color: var(--infocobweb-color-text); font-family: var(--infocobweb-font-main); font-size: 25px; font-size: 2.5rem; }
@media (min-width: 576px) { .page-header-formation .page-header-contenu .page-header-contenu-legende-h { font-size: 30px; font-size: 3rem; } }
@media (min-width: 768px) { .page-header-formation .page-header-contenu .page-header-contenu-legende-h { font-size: 45px; font-size: 4.5rem; } }
@media (min-width: 1280px) { .page-header-formation .page-header-contenu .page-header-contenu-legende-h { font-size: 55px; font-size: 5.5rem; } }
.page-header-formation .page-header-contenu .page-header-contenu-legende-h span { font-weight: 900; color: var(--infocobweb-color-secondary); font-family: var(--infocobweb-font-main); display: block; margin-bottom: 5px; position: relative; text-transform: none; padding-left: 0; font-size: 17px; font-size: 1.7rem; }
@media (min-width: 768px) { .page-header-formation .page-header-contenu .page-header-contenu-legende-h span { font-size: 25px; font-size: 2.5rem; } }
.page-header-formation .wrapper-fil-ariane { z-index: 5; position: absolute; left: 0; bottom: 0; margin-top: 0; padding: 15px 0 15px 50px; width: 100%; border-top: 1px solid rgba(0, 0, 0, 0.2); }
@media (min-width: 1280px) { .page-header-formation .wrapper-fil-ariane { padding-left: 300px; } }
.page-header-formation .wrapper-fil-ariane #breadcrumbs { margin: 0; width: 100%; padding-left: 0; }
.page-header-formation .wrapper-fil-ariane #breadcrumbs span,
.page-header-formation .wrapper-fil-ariane .rank-math-breadcrumb,
.page-header-formation .wrapper-fil-ariane .rank-math-breadcrumb a,
.page-header-formation .wrapper-fil-ariane .rank-math-breadcrumb span { font-size: 13.5px; font-size: 1.35rem; color: var(--infocobweb-color-text); }
.page-header-formation .wrapper-fil-ariane #breadcrumbs span a,
.page-header-formation .wrapper-fil-ariane .rank-math-breadcrumb a { margin-right: 5px; box-shadow: none; color: var(--infocobweb-color-text); }
.page-header-formation .wrapper-fil-ariane #breadcrumbs span span,
.page-header-formation .wrapper-fil-ariane .rank-math-breadcrumb .separator { margin-right: 5px; margin-left: 5px; }

/* 3) Typo SBD sur le corps + titres + boutons */
/* Police appliquee au corps (sinon le contenu herite de la police d'AAC) */
.page-header-formation,
.wrapper-single-formation,
.wrapper-archives-formation,
.wrapper-description-category {
  font-family: var(--infocobweb-font-main);
}

/* Titres h2 facon SBD : gras 900, police principale, 2rem (3rem des 768px) */
.wrapper-single-formation .h2,
.wrapper-single-formation .contenu h2,
.wrapper-single-formation .contenu .h2,
.wrapper-archives-formation .h2,
.wrapper-archives-formation .contenu h2,
.wrapper-archives-formation .contenu .h2,
.wrapper-description-category .h2,
.wrapper-description-category .contenu h2 {
  font-family: var(--infocobweb-font-main);
  font-weight: 900;
  color: var(--infocobweb-color-text);
  line-height: 1.1;
  margin-bottom: 20px;
  padding-bottom: 20px;
  font-size: 20px;
  font-size: 2rem;
}
@media (min-width: 768px) {
  .wrapper-single-formation .h2,
  .wrapper-single-formation .contenu h2,
  .wrapper-single-formation .contenu .h2,
  .wrapper-archives-formation .h2,
  .wrapper-archives-formation .contenu h2,
  .wrapper-archives-formation .contenu .h2,
  .wrapper-description-category .h2,
  .wrapper-description-category .contenu h2 {
    font-size: 30px;
    font-size: 3rem;
  }
}

/* Separateur de titre facon SBD : petit trait vertical en bas (annule le grand trait du haut d'AAC) */
.wrapper-single-formation .h2:before,
.wrapper-single-formation .contenu h2:before,
.wrapper-single-formation .contenu .h2:before,
.wrapper-archives-formation .h2:before,
.wrapper-archives-formation .contenu h2:before,
.wrapper-archives-formation .contenu .h2:before,
.wrapper-description-category .h2:before,
.wrapper-description-category .contenu h2:before {
  content: "";
  display: block;
  position: absolute;
  top: auto;
  bottom: 0;
  left: 5px;
  height: 15px;
  width: 1px;
  background: var(--infocobweb-color-main);
}

/* Titres h3 facon SBD : gras 900 */
.wrapper-single-formation .h3,
.wrapper-single-formation .contenu h3,
.wrapper-single-formation .contenu .h3 {
  font-weight: 900;
}

/* Boutons facon SBD : annule le style lien-fleche d'AAC */
.wrapper-single-formation .btn,
.wrapper-archives-formation .btn {
  display: inline-block;
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: 400;
  padding: 12px 17px;
  background: var(--infocobweb-color-main);
  color: #fff;
  border-radius: 5px;
  width: max-content;
  text-decoration: none;
  box-shadow: none;
}
.wrapper-single-formation .btn:before,
.wrapper-single-formation .btn:after,
.wrapper-archives-formation .btn:before,
.wrapper-archives-formation .btn:after {
  content: none;
  display: none;
}

/* Bouton pilule contour (Je m'inscris) */
.wrapper-single-formation .btn-rounded,
.wrapper-archives-formation .btn-rounded {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  padding: 15px 20px;
  border: 1px solid var(--infocobweb-color-main);
  border-radius: 50px;
  background: transparent;
  color: var(--infocobweb-color-main);
  font-weight: 900;
  font-size: 20px;
  font-size: 2rem;
}

/* Bouton pilule plein (J'utilise mon CPF) */
.wrapper-single-formation .btn-reverse-colors,
.wrapper-archives-formation .btn-reverse-colors {
  background: var(--infocobweb-color-main);
  color: #fff;
}


/* 4) Listes + pastilles facon SBD (annule le style timeline d'AAC) */
.wrapper-single-formation .contenu ul,
.wrapper-archives-formation .contenu ul {
  list-style: none;
  border-left: none;
  padding: 0 20px 0 20px;
}
.wrapper-single-formation .contenu ul li:before,
.wrapper-archives-formation .contenu ul li:before {
  content: none;
  display: none;
}
.wrapper-single-formation .contenu ul li:after,
.wrapper-archives-formation .contenu ul li:after {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  position: absolute;
  top: 6px;
  left: -20px;
  border-radius: 50%;
  background: var(--infocobweb-color-main);
  z-index: 0;
}

/* Objectifs : coche (couleur secondaire) sur pastille, facon SBD */
.wrapper-single-formation .objectifs-formation .liste-objectif {
  list-style: none;
  border-left: none;
  padding: 0 20px 0 25px;
}
.wrapper-single-formation .objectifs-formation .liste-objectif li:before {
  content: "\2714";
  position: absolute;
  left: -23px;
  top: -5px;
  display: block;
  color: var(--infocobweb-color-secondary);
  font-size: 20px;
  z-index: 1;
  background: none;
}
/* la grande pastille derriere la coche (gardee) ; la petite pastille de base d'AAC est masquee plus haut via .contenu ul li:before */
.wrapper-single-formation .objectifs-formation .liste-objectif li:after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  position: absolute;
  left: -25px;
  top: 3px;
  border-radius: 50%;
  background: var(--infocobweb-color-main);
  z-index: 0;
}

/* 5) Offset du sticky de la sidebar (header AAC = 130px au lieu de 65px sur SBD) */
.wrapper-single-formation .information-avant-formation .bloc-info-avant { top: 150px; }
@media (min-width: 1280px) {
  .wrapper-single-formation .information-avant-formation .bloc-info-avant { top: 150px; }
}

/* 6) Formulaire Infocob CRM Forms facon SBD (porte depuis le theme.css de SBD, limite aux formations) */

/* Champs : coins arrondis 5px (annule les 25px par defaut du plugin) + focus couleur main */
.wrapper-single-formation .form-single-formation .infocob-crm-forms .if-field input[type="date"],
.wrapper-single-formation .form-single-formation .infocob-crm-forms .if-field input[type="text"],
.wrapper-single-formation .form-single-formation .infocob-crm-forms .if-field input[type="password"],
.wrapper-single-formation .form-single-formation .infocob-crm-forms .if-field input[type="email"],
.wrapper-single-formation .form-single-formation .infocob-crm-forms .if-field input[type="number"],
.wrapper-single-formation .form-single-formation .infocob-crm-forms .if-field input[type="tel"],
.wrapper-single-formation .form-single-formation .infocob-crm-forms .if-field input[type="file"],
.wrapper-single-formation .form-single-formation .infocob-crm-forms .if-field textarea {
  border-radius: 5px;
  position: relative;
}
.wrapper-single-formation .form-single-formation .infocob-crm-forms .if-field input[type="date"]:focus,
.wrapper-single-formation .form-single-formation .infocob-crm-forms .if-field input[type="text"]:focus,
.wrapper-single-formation .form-single-formation .infocob-crm-forms .if-field input[type="password"]:focus,
.wrapper-single-formation .form-single-formation .infocob-crm-forms .if-field input[type="email"]:focus,
.wrapper-single-formation .form-single-formation .infocob-crm-forms .if-field input[type="number"]:focus,
.wrapper-single-formation .form-single-formation .infocob-crm-forms .if-field input[type="tel"]:focus,
.wrapper-single-formation .form-single-formation .infocob-crm-forms .if-field input[type="file"]:focus,
.wrapper-single-formation .form-single-formation .infocob-crm-forms .if-field textarea:focus {
  border: 1px solid var(--infocobweb-color-main);
}

/* Etiquette "obligatoire" facon SBD (en CSS via :after, l'injection JS du span n'existe pas sur AAC) */
.wrapper-single-formation .form-single-formation .infocob-crm-forms .if-field.if-field-required {
  position: relative;
}
.wrapper-single-formation .form-single-formation .infocob-crm-forms .if-field.if-field-required:after {
  content: "obligatoire";
  position: absolute;
  right: 30px;
  top: -7px;
  font-weight: 400;
  opacity: 1;
  background-color: #fff;
  padding: 2px 6px;
  border-radius: 10px;
  color: var(--infocobweb-color-text-60);
  font-size: 11px;
  font-size: 1.1rem;
  pointer-events: none;
  transition: opacity .2s;
}
/* On masque l'etiquette quand le champ est en focus (comme sur SBD) */
.wrapper-single-formation .form-single-formation .infocob-crm-forms .if-field.if-field-required:focus-within:after {
  opacity: 0;
}

/* Toggle de consentement (slide-checkbox) : pastille active en couleur main */
.wrapper-single-formation .form-single-formation .infocob-crm-forms .if-field.if-field-slide-checkbox input:checked + span:before {
  background: var(--infocobweb-color-main);
}

/* Bouton Envoyer facon SBD : fond sombre, texte blanc, hover couleur main (annule la pilule par defaut) */
.wrapper-single-formation .form-single-formation .infocob-crm-forms.if-form .if-btn-submit button,
.wrapper-single-formation .form-single-formation .infocob-crm-forms.if-form .if-btn-submit input[type="submit"] {
  background: var(--infocobweb-color-text);
  color: #fff;
  outline: none;
  border-radius: 5px;
  font-family: var(--infocobweb-font-main);
  font-weight: 400;
  border: none;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.25;
  margin: 0;
  opacity: 1;
  padding: 1.1em 1.44em;
  text-align: center;
  text-decoration: none;
  transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
}
.wrapper-single-formation .form-single-formation .infocob-crm-forms.if-form .if-btn-submit button:hover,
.wrapper-single-formation .form-single-formation .infocob-crm-forms.if-form .if-btn-submit input[type="submit"]:hover {
  background: var(--infocobweb-color-main);
}

/* 7) Cards formation : titre limite a 2 lignes + espace bas suffisant pour que le bloc info (absolu) ne recouvre pas le titre */
.entry-formation {
  padding-bottom: 185px;
}
.entry-formation .entry-text .entry-h {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.2;
  min-height: 2.4em;
}