/* 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;
}
/* 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 CF7 facon SBD : champs blancs arrondis, 2 colonnes, bouton sombre */
.wrapper-single-formation .form-single-formation .content-form { position: relative; z-index: 1; }
.wrapper-single-formation .form-single-formation .wpcf7 { color: #fff; }
.wrapper-single-formation .form-single-formation .if-form-row { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px; }
.wrapper-single-formation .form-single-formation .if-form-col { flex: 1 1 calc(50% - 8px); min-width: 220px; }
.wrapper-single-formation .form-single-formation .if-form-full { flex: 1 1 100%; }
.wrapper-single-formation .form-single-formation .wpcf7 label { display: block; color: #fff; font-weight: 700; margin-bottom: 6px; font-size: 14px; font-size: 1.4rem; }
.wrapper-single-formation .form-single-formation .wpcf7 input[type="text"],
.wrapper-single-formation .form-single-formation .wpcf7 input[type="email"],
.wrapper-single-formation .form-single-formation .wpcf7 input[type="tel"],
.wrapper-single-formation .form-single-formation .wpcf7 textarea {
  width: 100%;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 8px;
  padding: 14px 18px;
  font-family: var(--infocobweb-font-main);
  font-size: 15px;
  font-size: 1.5rem;
  color: var(--infocobweb-color-text);
  box-shadow: none;
}
.wrapper-single-formation .form-single-formation .wpcf7 textarea { min-height: 110px; resize: vertical; }
.wrapper-single-formation .form-single-formation .wpcf7 input::placeholder,
.wrapper-single-formation .form-single-formation .wpcf7 textarea::placeholder { color: rgba(45, 46, 46, 0.5); }
.wrapper-single-formation .form-single-formation .wpcf7 .if-form-consent { display: flex; align-items: center; gap: 10px; color: #fff; margin: 5px 0 20px; font-size: 14px; font-size: 1.4rem; }
.wrapper-single-formation .form-single-formation .wpcf7 .if-form-consent a { color: #fff; text-decoration: underline; }
.wrapper-single-formation .form-single-formation .wpcf7 .wpcf7-list-item { margin: 0; }
.wrapper-single-formation .form-single-formation .wpcf7 input[type="submit"] {
  background: var(--infocobweb-color-text);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 32px;
  font-family: var(--infocobweb-font-main);
  font-weight: 700;
  font-size: 15px;
  font-size: 1.5rem;
  cursor: pointer;
  width: max-content;
  transition: opacity .2s;
}
.wrapper-single-formation .form-single-formation .wpcf7 input[type="submit"]:hover { opacity: .9; }
.wrapper-single-formation .form-single-formation .wpcf7 p { margin: 0; }

/* 7) Etiquette "obligatoire" + toggle RGPD facon SBD */
.wrapper-single-formation .form-single-formation .if-form-col { position: relative; }
.wrapper-single-formation .form-single-formation .if-required {
  position: absolute;
  top: -17px;
  right: 6px;
  font-size: 11px;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}
.wrapper-single-formation .form-single-formation .if-form-consent label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #fff;
  font-weight: 400;
  cursor: pointer;
}
.wrapper-single-formation .form-single-formation .if-form-consent .wpcf7-list-item { margin: 0; display: block; }
.wrapper-single-formation .form-single-formation .if-form-consent input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 42px;
  height: 22px;
  margin: 0;
  border: none;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.4);
  position: relative;
  cursor: pointer;
  transition: background .2s;
}
.wrapper-single-formation .form-single-formation .if-form-consent input[type="checkbox"]:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}
.wrapper-single-formation .form-single-formation .if-form-consent input[type="checkbox"]:checked {
  background: var(--infocobweb-color-secondary);
}
.wrapper-single-formation .form-single-formation .if-form-consent input[type="checkbox"]:checked:before {
  left: 22px;
}