/* Centre Sahélien pour la Biodiversité - pages de formation (partials/formation/*), préfixe .csb-fo-
   Chargé après csb.css par partials/formation/page.php (et par formations.php, qui partage main.csb-fo et le bandeau).
   Refonte du 1er novembre 2026 (page pilote : Mouche soldat noire), reprise le 2 novembre 2026 (page pilote : Aviculture) : icônes, panneaux doux, programme et galerie repensés.
   - Typographie : Source Serif 4 600 pour H1 et H2 seulement (continuité avec l'accueil et Le centre), Manrope pour tout le reste.
   - Couleurs : vert du logo (--theme-color-3) pour les titres et repères, jaune (--theme-color-2) réservé aux actions et à la session,
     crème (#F8F7F0) pour alterner les fonds.
   - Motif : un filet vert court (puces, étapes reliées, chaîne de production) ; pas de cartes encadrées autour de chaque contenu. */

main.csb-fo {
  --fo-vert: var(--theme-color-3);
  --fo-jaune: var(--theme-color-2);
  --fo-creme: #F8F7F0;
  --fo-texte: #16231A;
  --fo-doux: #4C5A51;            /* texte secondaire : 7,2:1 sur blanc, 6,7:1 sur crème */
  --fo-filet: rgba(0, 69, 64, .16);
  --fo-h1: clamp(32px, 1.15vw + 27.4px, 44px);
  --fo-h2: clamp(25px, .6vw + 21.4px, 30px);
  --fo-h3: 19px;
  --fo-txt: 17px;
  --fo-section: clamp(64px, 3vw + 52px, 96px);
}

/* --- Typographie (body + :not(#csb) : priorité sur le bloc Typographie de csb.css) --- */
body main.csb-fo h1:not(#csb) { font-size: var(--fo-h1); line-height: 1.12; letter-spacing: -.01em; }
body main.csb-fo h2:not(#csb) { font-size: var(--fo-h2); line-height: 1.2; color: var(--fo-vert); margin: 0 0 16px; }
body main.csb-fo :is(h3, h4):not(#csb) { font-family: var(--csb-font-texte); font-weight: 600; font-size: var(--fo-h3); line-height: 1.35; letter-spacing: 0; color: var(--fo-vert); }
body main.csb-fo :is(p, li, dd):not(#csb) { font-size: var(--fo-txt); line-height: 1.6; text-align: left; hyphens: manual; -webkit-hyphens: manual; }
main.csb-fo p { color: var(--fo-texte); }
main.csb-fo a:focus-visible, main.csb-fo button:focus-visible { outline: 3px solid var(--fo-vert); outline-offset: 3px; border-radius: 3px; }
body main.csb-fo .text-center p:not(#csb) { text-align: center; }

/* Listes à filet court (motif commun) */
.csb-fo-liste, .csb-fo-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.csb-fo-liste li, .csb-fo-points li { position: relative; padding-left: 24px; color: var(--fo-texte); }
.csb-fo-liste li::before, .csb-fo-points li::before { content: ""; position: absolute; left: 0; top: .8em; width: 12px; height: 2px; background: var(--fo-vert); }

/* Liens texte (sans flèche) */
.csb-fo-lien-fleche { display: inline-block; font-size: 16px; font-weight: 600; color: var(--fo-vert); text-decoration: underline; text-underline-offset: 4px; }
.csb-fo-lien-fleche:hover { color: var(--fo-texte); }

/* En-têtes de section */
.csb-fo-entete { max-width: 720px; margin-bottom: 36px; }
body main.csb-fo .csb-fo-entete p:not(#csb) { color: var(--fo-doux); margin: 0; max-width: 60ch; }
.csb-fo-entete--ligne { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: end; }
.csb-fo-entete--ligne > :not(h2):not(p) { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.csb-fo-entete--ligne h2:not(#csb), .csb-fo-entete--ligne p { grid-column: 1; }
@media (max-width: 767px) {
  .csb-fo-entete--ligne { grid-template-columns: 1fr; row-gap: 14px; }
  .csb-fo-entete--ligne > :not(h2):not(p) { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* --- 0. Bandeau --- */
.csb-fo-bandeau picture { position: absolute; inset: 0; z-index: 0; }
.csb-fo-bandeau .csb-lc-bandeau-fond { object-position: center 35%; }
.csb-fo-bandeau .breadcrumb-nav ul li + li { margin-left: 4px; }
/* surtitre et pastilles : utilisés par la page Formations (partials/formations/bandeau.php) */
.csb-fo-surtitre { margin: 0 0 6px !important; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--theme-color-2) !important; }
.csb-fo-pastilles { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 26px 0 0; }
.csb-fo-pastilles li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 100px; font-size: 14px !important; font-weight: 500;
  color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25); }
.csb-fo-pastilles i { color: var(--theme-color-2); }
.csb-fo-bandeau .breadcrumb-title p.csb-fo-surtitre { color: var(--theme-color-2) !important; }

/* Bandeau des pages de formation (.csb-fo-hero) : 440 px sur ordinateur, voile limité à la zone du texte */
.csb-fo-hero .breadcrumb-content { min-height: 440px; padding: 48px 0 44px; justify-content: center; }
.csb-fo-hero::after { background: linear-gradient(90deg, rgba(8, 28, 26, .86) 0%, rgba(8, 28, 26, .7) 40%, rgba(8, 28, 26, .18) 72%, rgba(8, 28, 26, .05) 100%); }
.csb-fo-hero .breadcrumb-nav { margin-bottom: 18px; }
body main.csb-fo .csb-fo-hero .breadcrumb-nav ul li:not(#csb) { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.csb-fo-hero .breadcrumb-nav ul li::after { font-size: 11px; margin: 0 6px 0 8px; }
.csb-fo-hero .breadcrumb-nav a { color: #fff; }
.csb-fo-hero .breadcrumb-title h1 { color: #fff; margin: 0 0 12px; max-width: 20ch; }
body main.csb-fo .csb-fo-hero-accroche:not(#csb) { max-width: 46ch; margin: 0; font-size: 18px; line-height: 1.55; color: rgba(255, 255, 255, .94); }
.csb-fo-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 28px; }
.csb-fo-hero-tel { color: #fff; font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.csb-fo-hero-tel:hover { color: var(--fo-jaune); }
.csb-fo-hero a:focus-visible { outline-color: var(--fo-jaune); }
.csb-fo-hero-faits { display: flex; flex-wrap: wrap; gap: 10px 36px; max-width: 640px; margin: 30px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .3); }
.csb-fo-hero-faits dt { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .82); }
body main.csb-fo .csb-fo-hero-faits dd:not(#csb) { margin: 0; font-size: 15px; font-weight: 600; color: #fff; }
@media (max-width: 767px) {
  .csb-fo-hero .breadcrumb-content { min-height: 0; padding: 36px 0 32px; }
  .csb-fo-hero::after { background: linear-gradient(180deg, rgba(8, 28, 26, .66) 0%, rgba(8, 28, 26, .84) 100%); }
  body main.csb-fo .csb-fo-hero-accroche:not(#csb) { font-size: 17px; }
  .csb-fo-hero-faits { gap: 10px 24px; margin-top: 24px; }
}

/* --- 1 à 3. Présentation, thèmes, colonne latérale, programme, galerie (refonte du 2 novembre 2026, page pilote : Aviculture) ---
   Motif : une puce d'icône ronde à fond doux (une seule famille d'icônes : Font Awesome du projet). Ombres très légères, uniquement sur les panneaux. */
main.csb-fo { --fo-teinte: #EAF1EC; --fo-ombre: 0 1px 2px rgba(0, 69, 64, .05), 0 10px 24px -14px rgba(0, 69, 64, .22); }

.csb-fo-puce-icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--fo-teinte); color: var(--fo-vert); font-size: 18px; line-height: 1; }
.csb-fo-pourquoi .csb-fo-puce-icone, .csb-fo-themes .csb-fo-puce-icone, .csb-fo-demarche .csb-fo-puce-icone { background: #fff; }

.csb-fo-contenu { padding: 64px 0 var(--fo-section); background: #fff; }
.csb-fo-grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
.csb-fo-bloc + .csb-fo-bloc { margin-top: 64px; }
body main.csb-fo .csb-fo-chapeau:not(#csb) { font-size: 18px; line-height: 1.55; }
.csb-fo-intro-corps { display: grid; gap: 28px; }
.csb-fo-intro-corps.a-pourquoi { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.csb-fo-intro-texte p { max-width: none; }
.csb-fo-intro-texte p + p { margin-top: 14px; }
.csb-fo-essentiel { margin: 28px 0 0; border-top: 1px solid var(--fo-filet); }
.csb-fo-essentiel > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--fo-filet); }
.csb-fo-essentiel dt { font-size: 15px; font-weight: 600; color: var(--fo-vert); }
body main.csb-fo .csb-fo-essentiel dd:not(#csb) { margin: 0; color: var(--fo-texte); }
.csb-fo-pourquoi { padding: 24px 24px 26px; border-radius: 14px; background: var(--fo-creme); }
body main.csb-fo .csb-fo-pourquoi h3:not(#csb) { margin: 0 0 16px; font-size: 18px; }
.csb-fo-reperes { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.csb-fo-reperes li { display: flex; align-items: center; gap: 14px; }
.csb-fo-reperes .csb-fo-puce-icone { width: 40px; height: 40px; font-size: 16px; }
body main.csb-fo .csb-fo-reperes li:not(#csb) { font-size: 16px; line-height: 1.45; }

.csb-fo-note { display: flex; gap: 10px; align-items: flex-start; max-width: 68ch; margin: 0 0 22px; }
body main.csb-fo .csb-fo-note:not(#csb) { font-size: 15px; color: var(--fo-doux); }
.csb-fo-note i { flex: none; margin-top: 3px; color: var(--fo-vert); }


.csb-fo-themes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.csb-fo-themes li { padding: 20px 20px 22px; border-radius: 12px; background: var(--fo-creme); }
.csb-fo-themes .csb-fo-puce-icone { margin-bottom: 14px; }
body main.csb-fo .csb-fo-themes h3:not(#csb) { font-size: 18px; margin: 0 0 6px; }
body main.csb-fo .csb-fo-themes p:not(#csb) { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fo-doux); }

/* Colonne latérale : deux panneaux doux, rangées blanches ; collante seulement si elle tient dans la fenêtre (classe posée par csb-formation.js) */
.csb-fo-cote-colle { display: grid; gap: 20px; }
.csb-fo-cote-colle.is-collant { position: sticky; top: 24px; }
.csb-fo-panneau { padding: 20px 20px 22px; border-radius: 14px; background: var(--fo-creme); box-shadow: var(--fo-ombre); }
body main.csb-fo .csb-fo-cote-titre:not(#csb) { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--fo-filet); font-size: 19px; line-height: 1.3; }
.csb-fo-cote-titre i { flex: none; color: var(--fo-vert); font-size: 17px; }
.csb-fo-fiche { margin: 0; display: grid; gap: 6px; }
.csb-fo-fiche > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; background: #fff; }
.csb-fo-fiche dt { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--fo-texte); }
.csb-fo-fiche dt i { flex: none; width: 18px; text-align: center; color: var(--fo-vert); }
body main.csb-fo .csb-fo-fiche dd:not(#csb) { margin: 0; font-size: 15px; font-weight: 600; color: var(--fo-texte); text-align: right; }
body main.csb-fo .csb-fo-fiche .is-vide dd:not(#csb) { font-weight: 400; color: var(--fo-doux); }
body main.csb-fo .csb-fo-fiche-lien { display: flex; width: 100%; margin-top: 14px; justify-content: space-between; }
.csb-fo-navfo ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.csb-fo-navfo a { display: grid; grid-template-columns: 40px minmax(0, 1fr) 14px; align-items: center; gap: 12px; min-height: 54px; padding: 7px 14px 7px 7px; border-radius: 10px;
  border: 1px solid transparent; background: #fff; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--fo-texte); transition: border-color .2s, background-color .2s, color .2s; }
.csb-fo-navfo a img { display: block; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.csb-fo-navfo-icone { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: var(--fo-teinte); color: var(--fo-vert); }
.csb-fo-navfo a > i { font-size: 12px; color: var(--fo-doux); transition: transform .2s; }
.csb-fo-navfo a:hover { border-color: var(--fo-vert); color: var(--fo-vert); }
.csb-fo-navfo a:hover > i { transform: translateX(3px); color: var(--fo-vert); }
.csb-fo-navfo a[aria-current="page"] { background: var(--fo-vert); border-color: var(--fo-vert); color: #fff; font-weight: 600; }
.csb-fo-navfo a[aria-current="page"] > i { color: #fff; }
.csb-fo-navfo a[aria-current="page"] img { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.csb-fo-navfo a:focus-visible { outline: 3px solid var(--fo-vert); outline-offset: 2px; }
.csb-fo-navfo a[aria-current="page"]:focus-visible { outline-color: var(--fo-jaune); }
@media (max-width: 1199px) { .csb-fo-grille { grid-template-columns: minmax(0, 1fr) 290px; gap: 40px; } .csb-fo-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .csb-fo-intro-corps.a-pourquoi { grid-template-columns: 1fr; } }
@media (max-width: 991px) {
  .csb-fo-grille { display: flex; flex-direction: column; align-items: stretch; gap: 40px; }
  .csb-fo-cote, .csb-fo-cote-colle { display: contents; }
  .csb-fo-fiche-bloc { order: -1; }
  .csb-fo-navfo { order: 2; }
  .csb-fo-contenu { padding-top: 40px; }
  .csb-fo-intro-corps.a-pourquoi { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .csb-fo-essentiel > div { grid-template-columns: 1fr; }
  .csb-fo-bloc + .csb-fo-bloc { margin-top: 52px; }
  .csb-fo-intro-corps.a-pourquoi { grid-template-columns: 1fr; }
}
@media (max-width: 575px) { .csb-fo-themes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .csb-fo-navfo a, .csb-fo-navfo a > i { transition: none; } .csb-fo-navfo a:hover > i { transform: none; } }

/* Programme indicatif : section pleine largeur ; un tiers pour les modules, deux tiers pour le module choisi */
.csb-fo-prog { padding: var(--fo-section) 0; background: var(--fo-creme); }
.csb-fo-programme { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: start; }
.csb-fo-modules { flex-direction: column; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.csb-fo-modules .nav-link { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 14px; text-align: left; background: #fff; border: 1px solid transparent; border-radius: 12px;
  font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--fo-texte); transition: border-color .2s, background-color .2s, color .2s; }
.csb-fo-modules .nav-link:hover { border-color: var(--fo-vert); color: var(--fo-vert); }
.csb-fo-modules .nav-link.active { background: var(--fo-vert); border-color: var(--fo-vert); color: #fff; font-weight: 600; }
.csb-fo-mod-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fo-teinte);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fo-vert); }
.csb-fo-modules .nav-link.active .csb-fo-mod-n { background: rgba(255, 255, 255, .18); color: #fff; }
.csb-fo-modules .nav-link > i { flex: none; margin-left: auto; font-size: 12px; opacity: .55; }
.csb-fo-modules .nav-link.active > i { opacity: 1; }
.csb-fo-modules .nav-link:focus-visible { outline: 3px solid var(--fo-vert); outline-offset: 2px; }
.csb-fo-modules .nav-link.active:focus-visible { outline-color: var(--fo-jaune); }
.csb-fo-programme .tab-content { padding: 30px 34px 28px; border-radius: 14px; background: #fff; box-shadow: var(--fo-ombre); }
.csb-fo-programme .tab-pane:focus-visible { outline: 3px solid var(--fo-vert); outline-offset: 6px; border-radius: 6px; }
body main.csb-fo .csb-fo-mod-rang:not(#csb) { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--fo-doux); }
body main.csb-fo .csb-fo-programme .tab-pane h3:not(#csb) { font-size: 24px; line-height: 1.25; margin: 0 0 18px; }
.csb-fo-objectif { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 24px; padding: 16px 18px; border-radius: 12px; background: var(--fo-teinte); }
.csb-fo-objectif .csb-fo-puce-icone { background: #fff; width: 40px; height: 40px; font-size: 16px; }
.csb-fo-objectif strong { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 600; color: var(--fo-vert); }
body main.csb-fo .csb-fo-objectif p:not(#csb) { margin: 0; color: var(--fo-texte); }
body main.csb-fo h4.csb-fo-sous:not(#csb) { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 17px; }
.csb-fo-sous i { color: var(--fo-vert); font-size: 16px; }
.csb-fo-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px 32px; }
.csb-fo-points.en-2-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.csb-fo-points li { display: flex; gap: 10px; align-items: flex-start; padding: 0; }
.csb-fo-points li::before { content: none; }
.csb-fo-points li i { flex: none; margin-top: .32em; font-size: 15px; color: var(--fo-vert); }
.csb-fo-mod-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--fo-filet); }
.csb-fo-mod-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 100px; border: 1.5px solid var(--fo-vert); background: #fff;
  color: var(--fo-vert); font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s; }
.csb-fo-mod-btn:hover:not(:disabled) { background: var(--fo-vert); color: #fff; }
.csb-fo-mod-btn:disabled { border-color: var(--fo-filet); color: #7B877F; cursor: default; }
.csb-fo-mod-btn:focus-visible { outline: 3px solid var(--fo-vert); outline-offset: 3px; }
@media (max-width: 991px) { .csb-fo-programme { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 575px) {
  .csb-fo-programme .tab-content { padding: 22px 18px 20px; }
  .csb-fo-points.en-2-colonnes { grid-template-columns: 1fr; }
  .csb-fo-mod-btn { padding: 0 14px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .csb-fo-modules .nav-link, .csb-fo-mod-btn { transition: none; } }

/* --- 4. La formation en images : une seule rangée défilante (Swiper), trois photos visibles sur ordinateur --- */
.csb-fo-galerie { padding: var(--fo-section) 0; background: #fff; }
.csb-fo-gal-nav { display: flex; gap: 10px; }
.csb-fo-gal-nav[hidden] { display: none; }
.csb-fo-gal-nav button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--fo-vert); background: #fff;
  color: var(--fo-vert); font-size: 15px; cursor: pointer; transition: background-color .2s, color .2s; }
.csb-fo-gal-nav button:hover:not(:disabled) { background: var(--fo-vert); color: #fff; }
.csb-fo-gal-nav button:disabled { border-color: var(--fo-filet); color: #7B877F; cursor: default; }
.csb-fo-gal-nav button:focus-visible { outline: 3px solid var(--fo-vert); outline-offset: 3px; }
.csb-fo-gal-slider .swiper:not(.swiper-initialized) { overflow-x: auto; }
.csb-fo-gal-slider .swiper-wrapper { list-style: none; margin: 0; padding: 0; }
.csb-fo-gal-slider .swiper-slide { height: auto; }
.csb-fo-gal-slider .swiper:not(.swiper-initialized) .swiper-slide { flex: 0 0 31%; margin-right: 20px; }
.csb-fo-photo { margin: 0; }
.csb-fo-photo a { position: relative; display: block; overflow: hidden; border-radius: 10px; }
.csb-fo-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.csb-fo-photo a:hover img { transform: scale(1.03); }
.csb-fo-zoom { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--fo-vert); font-size: 15px; }
.csb-fo-photo a:focus-visible { outline: 3px solid var(--fo-vert); outline-offset: 3px; }
.csb-fo-photo figcaption { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--fo-doux); }
@media (max-width: 767px) { .csb-fo-gal-nav button { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .csb-fo-photo img, .csb-fo-gal-nav button { transition: none; } .csb-fo-photo a:hover img { transform: none; } }

/* --- 5. Comment se déroule la formation : étapes reliées --- */
.csb-fo-methode { padding: var(--fo-section) 0; background: var(--fo-creme); }
.csb-fo-parcours { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(var(--nb, 4), minmax(0, 1fr)); gap: 32px; }
.csb-fo-parcours li { position: relative; }
.csb-fo-parcours li:not(:last-child)::after { content: ""; position: absolute; top: 17px; left: 44px; right: -24px; height: 2px; background: rgba(0, 69, 64, .3); }
.csb-fo-parcours-n { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 18px;
  border-radius: 50%; border: 2px solid var(--fo-vert); background: #fff; color: var(--fo-vert); font-size: 15px; font-weight: 600; }
body main.csb-fo .csb-fo-parcours h3:not(#csb) { margin: 0 0 6px; }
body main.csb-fo .csb-fo-parcours p:not(#csb) { margin: 0; font-size: 16px; color: var(--fo-doux); }
@media (max-width: 991px) {
  .csb-fo-parcours { grid-template-columns: 1fr; gap: 28px; }
  .csb-fo-parcours li { padding-left: 56px; }
  .csb-fo-parcours-n { position: absolute; left: 0; top: 0; margin: 0; }
  .csb-fo-parcours li:not(:last-child)::after { top: 44px; bottom: -20px; left: 17px; right: auto; width: 2px; height: auto; }
  body main.csb-fo .csb-fo-parcours h3:not(#csb) { padding-top: 5px; }
}

/* --- 6. À qui s'adresse cette formation : trois groupes séparés par de simples filets verticaux + démarche de contact proposée --- */
.csb-fo-pourqui { padding: var(--fo-section) 0; background: #EDF3EE; }
.csb-fo-pourqui h2 { margin-bottom: 32px !important; }
.csb-fo-pourqui-groupes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.csb-fo-pourqui-groupe { padding: 4px 32px 8px 0; }
.csb-fo-pourqui-groupe + .csb-fo-pourqui-groupe { padding-left: 32px; border-left: 1px solid var(--fo-filet); }
.csb-fo-pourqui-groupe .csb-fo-puce-icone { background: #fff; margin-bottom: 14px; }
body main.csb-fo .csb-fo-pourqui-groupe h3:not(#csb) { margin: 0 0 12px; }
body main.csb-fo .csb-fo-pourqui-groupe li:not(#csb) { font-size: 16px; }
.csb-fo-demarche { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "texte action" "etapes etapes"; align-items: center; gap: 18px 32px; margin-top: 40px; padding: 24px 28px; border-radius: 14px; background: #fff; box-shadow: var(--fo-ombre); }
.csb-fo-demarche-texte { grid-area: texte; }
.csb-fo-demarche > .e-primary-btn { grid-area: action; }
body main.csb-fo .csb-fo-demarche h3:not(#csb) { margin: 0 0 4px; font-size: 18px; }
body main.csb-fo .csb-fo-demarche-texte p:not(#csb) { margin: 0; font-size: 15px; color: var(--fo-doux); }
.csb-fo-demarche-etapes { grid-area: etapes; list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--fo-filet); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.csb-fo-demarche-etapes li { position: relative; display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--fo-vert); }
.csb-fo-demarche-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fo-teinte); font-size: 14px; font-variant-numeric: tabular-nums; }
@media (max-width: 991px) { .csb-fo-demarche { grid-template-columns: 1fr; grid-template-areas: "texte" "etapes" "action"; justify-items: start; } .csb-fo-demarche-etapes { width: 100%; } }
@media (max-width: 991px) {
  .csb-fo-pourqui-groupes { grid-template-columns: 1fr; gap: 28px; }
  .csb-fo-pourqui-groupe, .csb-fo-pourqui-groupe + .csb-fo-pourqui-groupe { padding: 0; border-left: 0; }
  .csb-fo-pourqui-groupe + .csb-fo-pourqui-groupe { padding-top: 24px; border-top: 1px solid var(--fo-filet); }
}
@media (max-width: 767px) {
  .csb-fo-demarche { padding: 20px 18px; }
  .csb-fo-demarche-etapes { grid-template-columns: 1fr; gap: 10px; }
}

/* --- 7. Du champ au produit : photo, titre, texte court, schéma des liens documentés (icônes reliées), produits concernés, lien --- */
.csb-fo-produit { padding: var(--fo-section) 0; background: #fff; }
.csb-fo-produit-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.csb-fo-produit-photo { margin: 0; }
.csb-fo-produit-photo img { display: block; width: 100%; height: auto; max-height: 540px; object-fit: cover; border-radius: 14px; }
.csb-fo-produit-texte > p { max-width: 62ch; }
.csb-fo-chaine { list-style: none; padding: 0; margin: 26px 0 8px; display: grid; grid-template-columns: repeat(var(--nb, 3), minmax(0, 1fr)); gap: 0 14px; }
.csb-fo-chaine li { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-right: 8px; }
.csb-fo-chaine li:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: 56px; right: -4px; height: 2px; background: var(--fo-filet); }
.csb-fo-chaine .csb-fo-puce-icone { position: relative; z-index: 1; margin-bottom: 12px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--fo-filet); }
.csb-fo-chaine strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--fo-vert); }
.csb-fo-chaine-precision { display: block; margin-top: 3px; font-size: 15px; line-height: 1.45; color: var(--fo-doux); }
body main.csb-fo h3.csb-fo-sous:not(#csb) { margin: 22px 0 10px; font-size: 16px; }
.csb-fo-puces-produits { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
body main.csb-fo .csb-fo-puces-produits li:not(#csb) { padding: 7px 14px; border-radius: 100px; background: var(--fo-creme); border: 1px solid var(--fo-filet); font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--fo-vert); }
body main.csb-fo .csb-fo-produit-contact:not(#csb) { margin: 0 0 18px; font-size: 15px; color: var(--fo-doux); }
.csb-fo-lien-bouton { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border-radius: 100px; border: 1.5px solid var(--fo-vert); color: var(--fo-vert); font-size: 15px; font-weight: 600; transition: background-color .2s, color .2s; }
.csb-fo-lien-bouton:hover { background: var(--fo-vert); color: #fff; }
@media (max-width: 991px) { .csb-fo-produit-grille { grid-template-columns: 1fr; gap: 32px; } .csb-fo-produit-photo img { max-height: 400px; } }
@media (max-width: 575px) {
  .csb-fo-chaine { grid-template-columns: 1fr; gap: 0; }
  .csb-fo-chaine li { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; padding: 0 0 22px; }
  .csb-fo-chaine li:last-child { padding-bottom: 0; }
  .csb-fo-chaine .csb-fo-puce-icone { margin-bottom: 0; }
  .csb-fo-chaine li strong { flex: 1; min-width: 0; }
  .csb-fo-chaine-precision { flex-basis: 100%; padding-left: 58px; margin-top: -2px; }
  .csb-fo-chaine li:not(:last-child)::after { top: 48px; bottom: 4px; left: 21px; right: auto; width: 2px; height: auto; }
}
@media (prefers-reduced-motion: reduce) { .csb-fo-lien-bouton { transition: none; } }

/* --- 9. Demande d'informations : fond vert, formulaire sur panneau blanc, libellés visibles --- */
.csb-fo-demande { padding: var(--fo-section) 0; background: var(--fo-vert); }
.csb-fo-demande-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
body main.csb-fo .csb-fo-demande h2:not(#csb) { color: #fff; }
body main.csb-fo .csb-fo-demande-texte p:not(#csb) { color: rgba(255, 255, 255, .92); }
body main.csb-fo .csb-fo-demande-texte .csb-fo-statut:not(#csb) { color: #fff; }
.csb-fo-statut strong { color: var(--fo-jaune); }
.csb-fo-contact { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.csb-fo-contact li > a, .csb-fo-contact-lieu { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 16px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); color: #fff; }
.csb-fo-contact li > a { transition: background-color .2s, border-color .2s; }
.csb-fo-contact li > a:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }
.csb-fo-contact-icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fo-jaune); color: var(--fo-vert); font-size: 17px; }
.csb-fo-contact-txt { display: grid; min-width: 0; }
.csb-fo-contact-lib { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .82); }
.csb-fo-contact-val { font-size: 16px; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.csb-fo-demande-texte a:focus-visible { outline: 3px solid var(--fo-jaune); outline-offset: 3px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .csb-fo-contact li > a { transition: none; } }
.csb-fo-form-boite { padding: 32px; border-radius: 10px; background: #fff; }
.csb-fo-champ { margin-bottom: 18px; }
.csb-fo-champ label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; color: var(--fo-vert); }
.csb-fo-champs-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
body main.csb-fo .csb-fo-form-boite :is(input, textarea):not(#csb) { width: 100%; padding: 11px 14px; border: 1.5px solid rgba(0, 69, 64, .32); border-radius: 6px;
  background: #fff; color: var(--fo-texte); font-size: 16px; line-height: 1.5; resize: vertical; }
body main.csb-fo .csb-fo-form-boite [readonly]:not(#csb) { background: var(--fo-creme); border-color: var(--fo-filet); color: var(--fo-vert); font-weight: 600; resize: none; field-sizing: content; }
.csb-fo-form-boite textarea::placeholder { color: #6B776F; opacity: 1; }
body main.csb-fo .csb-fo-form-boite :is(input, textarea):focus-visible:not(#csb) { outline: 3px solid var(--fo-vert); outline-offset: 1px; border-color: var(--fo-vert); }
body main.csb-fo .csb-fo-form-boite [aria-invalid="true"]:not(#csb) { border-color: #B3261E; }
body main.csb-fo .csb-fo-form-note:not(#csb) { margin: 2px 0 18px; font-size: 14px; color: var(--fo-doux); }
body main.csb-fo .csb-fo-message:not(#csb) { margin: 16px 0 0; font-size: 15px; font-weight: 600; color: var(--fo-vert); }
body main.csb-fo .csb-fo-message.error:not(#csb) { color: #B3261E; }
@media (max-width: 991px) { .csb-fo-demande-grille { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 575px) { .csb-fo-form-boite { padding: 22px 18px; } .csb-fo-champs-2 { grid-template-columns: 1fr; } }

/* --- 10. Les autres formations : photo, titre, accroche, lien (texte hors de la photo) --- */
.csb-fo-autres { padding: var(--fo-section) 0; background: #fff; }
.csb-fo-autres-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 24px; }
.csb-fo-autre { position: relative; display: flex; flex-direction: column; }
.csb-fo-autre img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; margin-bottom: 16px; }
body main.csb-fo .csb-fo-autre h3:not(#csb) { margin: 0 0 6px; }
.csb-fo-autre h3 a { color: var(--fo-vert); text-decoration: none; }
.csb-fo-autre h3 a::after { content: ""; position: absolute; inset: 0; }
.csb-fo-autre h3 a:focus-visible { outline: none; }
.csb-fo-autre:has(a:focus-visible) { outline: 3px solid var(--fo-vert); outline-offset: 6px; border-radius: 6px; }
body main.csb-fo .csb-fo-autre p:not(#csb) { margin: 0 0 12px; font-size: 16px; color: var(--fo-doux); }
.csb-fo-autre-voir { margin-top: auto; font-size: 15px; font-weight: 600; color: var(--fo-vert); text-decoration: underline; text-underline-offset: 4px; }
.csb-fo-autre:hover h3 a { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1199px) { .csb-fo-autres-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .csb-fo-autres-liste { grid-template-columns: 1fr; } }

/* --- 8. Questions fréquentes : liste à filets, sans cartes (s'applique aussi à la FAQ de la page Formations) --- */
.csb-fo-faq { padding: var(--fo-section) 0; background: var(--fo-creme); }
.csb-fo-faq-grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
body main.csb-fo .csb-fo-faq-intro p:not(#csb) { color: var(--fo-doux); margin: 0 0 16px; }
body main.csb-fo .csb-fo-faq .faq-accordion .accordion-item:not(#csb) { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--fo-filet); border-radius: 0; background: transparent; }
.csb-fo-faq .faq-accordion .accordion-item:first-child { border-top: 1px solid var(--fo-filet) !important; }
body main.csb-fo .csb-fo-faq .faq-accordion .accordion-item .accordion-header .accordion-button:not(#csb) { gap: 20px; padding: 18px 0; font-family: var(--csb-font-texte);
  font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--fo-vert); background: transparent; }
.csb-fo-faq .faq-accordion .accordion-item .accordion-header .accordion-button .icon { flex: none; width: 28px; height: 28px; border: 1.5px solid var(--fo-vert); background: transparent; }
.csb-fo-faq .faq-accordion .accordion-item .accordion-header .accordion-button .icon :is(.icon-plus, .icon-minus) { background-color: var(--fo-vert); }
.csb-fo-faq .faq-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) .icon { background: var(--fo-vert); }
.csb-fo-faq .faq-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) .icon :is(.icon-plus, .icon-minus) { background-color: #fff; }
body main.csb-fo .csb-fo-faq .faq-accordion .accordion-body:not(#csb) { padding: 0 48px 20px 0; }
body main.csb-fo .csb-fo-faq .accordion-body p:not(#csb) { margin: 0; font-size: 16px; color: var(--fo-texte); max-width: 68ch; }
.csb-fo-faq .accordion-button:focus-visible { outline: 3px solid var(--fo-vert); outline-offset: 2px; }
@media (max-width: 991px) { .csb-fo-faq-grille { grid-template-columns: 1fr; gap: 28px; } }
@media (prefers-reduced-motion: reduce) { .csb-fo-faq .accordion-button .icon { transition: none; } }

/* Pied de page : la formation de la page courante est marquée (aria-current="page", texte + soulignement, pas seulement la couleur) */
.csb-footer a[aria-current="page"] { color: var(--theme-color-2); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* Compléments éditoriaux : objectifs optionnels, programme équilibré et accès à la collection. */
.csb-fo-objectifs-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; }
.csb-fo-objectifs-liste > li { display: flex; align-items: flex-start; gap: 16px; padding-top: 20px; border-top: 1px solid var(--fo-filet); }
body main.csb-fo .csb-fo-objectifs-liste h3:not(#csb) { font-size: 18px; margin: 0 0 6px; }
body main.csb-fo .csb-fo-objectifs-liste p:not(#csb) { font-size: 16px; margin: 0; color: var(--fo-doux); }
.csb-fo-programme { align-items: stretch; }
.csb-fo-modules { background: #fff; padding: 14px; border-radius: 14px; box-shadow: var(--fo-ombre); align-self: stretch; }
.csb-fo-programme .tab-pane.active { display: flex; flex-direction: column; min-height: 100%; }
.csb-fo-programme .csb-fo-mod-nav { margin-top: auto; }
.csb-fo-programme .csb-fo-points { margin-bottom: 24px; }
body main.csb-fo .csb-fo-programme :is(p, li):not(#csb) { font-size: 15px; }
body main.csb-fo .csb-fo-programme .tab-pane h3:not(#csb) { font-size: 21px; }
.csb-fo-module-repere { border-top: 1px solid var(--fo-filet); padding: 20px 0 24px; }
.csb-fo-module-repere p { margin-bottom: 6px; }
.csb-fo-module-repere small { color: var(--fo-doux); font-size: 13px; line-height: 1.5; display: block; }
.csb-fo-gal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.csb-fo-gal-actions .csb-fo-lien-bouton { padding: 10px 16px; }
@media (min-width: 992px) {
  body main.csb-fo .csb-fo-intro-texte p:not(#csb) { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
  .csb-fo-pourquoi .csb-fo-reperes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .csb-fo-pourquoi .csb-fo-reperes li { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 1199px) and (min-width: 992px) {
  .csb-fo-pourquoi .csb-fo-reperes { grid-template-columns: 1fr; }
  .csb-fo-pourquoi .csb-fo-reperes li { flex-direction: row; }
}
@media (max-width: 767px) {
  .csb-fo-objectifs-liste { grid-template-columns: 1fr; gap: 18px; }
  .csb-fo-gal-actions { width: 100%; justify-content: space-between; }
}

/* Illustration liée au module actif, hors du tablist pour conserver sa sémantique. */
.csb-fo-modules-illustres { min-width: 0; display: flex; flex-direction: column; padding: 14px; background: #fff; border-radius: 14px; box-shadow: var(--fo-ombre); }
.csb-fo-modules-illustres > .csb-fo-modules { padding: 0; box-shadow: none; }
.csb-fo-module-photos { margin-top: auto; padding-top: 20px; }
.csb-fo-module-photos figure { margin: 0; }
.csb-fo-module-photos figure[hidden] { display: none; }
.csb-fo-module-photos img { display: block; width: 100%; height: 180px; object-fit: cover; border-radius: 9px; }
.csb-fo-module-photos figcaption { padding: 10px 3px 2px; color: var(--fo-doux); font-size: 13px; line-height: 1.5; }
@media (max-width: 991px) { .csb-fo-module-photos img { height: 180px; } }

/* Trois lectures distinctes : objectifs ouverts, thèmes compacts et note de contexte. */
main.csb-fo { --fo-h2: clamp(24px, .45vw + 20px, 28px); }
.csb-fo-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.csb-fo-themes li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-content: start; padding: 18px; border-radius: 6px; background: #F6F8F6; border: 1px solid #E6ECE7; }
.csb-fo-themes .csb-fo-puce-icone { grid-row: 1 / span 2; margin: 2px 0 0; background: transparent; width: 24px; height: 24px; border-radius: 0; font-size: 18px; }
.csb-fo-themes h3, .csb-fo-themes p { grid-column: 2; }
body main.csb-fo .csb-fo-themes h3:not(#csb) { font-size: 17px; }
.csb-fo-pourquoi { padding: 22px 26px; background: #FAF8EF; border-radius: 0 8px 8px 0; border-left: 3px solid #C1A44C; }
body main.csb-fo .csb-fo-pourquoi h3:not(#csb) { font-size: 18px; margin-bottom: 16px; }
.csb-fo-pourquoi .csb-fo-reperes { grid-template-columns: 1fr; gap: 12px; }
.csb-fo-pourquoi .csb-fo-reperes li { flex-direction: row; align-items: flex-start; gap: 12px; padding: 0; border: 0; }
.csb-fo-pourquoi .csb-fo-puce-icone { background: transparent; width: 24px; height: 24px; font-size: 16px; }
body main.csb-fo .csb-fo-pourquoi .csb-fo-reperes li:not(#csb) { font-size: 15px; line-height: 1.6; }
.csb-fo-gal-actions .csb-fo-lien-bouton { min-height: 38px; padding: 7px 13px; font-size: 13px; gap: 8px; border-width: 1px; }
.csb-fo-galerie .csb-fo-photo img { aspect-ratio: 3 / 2; }
.csb-fo-demarche-etapes { align-items: start; gap: 20px; }
.csb-fo-demarche-etapes li { display: block; }
.csb-fo-demarche-etapes details { padding: 14px; border: 1px solid var(--fo-filet); border-radius: 10px; }
.csb-fo-demarche-etapes details[open] { background: var(--fo-teinte); }
.csb-fo-demarche-etapes summary { display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; font-size: 15px; min-height: 44px; }
.csb-fo-demarche-etapes summary::-webkit-details-marker { display: none; }
.csb-fo-demarche-etapes summary > i { margin-left: auto; font-size: 12px; transition: transform .2s; }
.csb-fo-demarche-etapes details[open] summary > i { transform: rotate(45deg); }
.csb-fo-demarche-etapes summary:focus-visible { outline: 3px solid var(--fo-vert); outline-offset: 4px; border-radius: 4px; }
body main.csb-fo .csb-fo-demarche-etapes p:not(#csb) { font-size: 15px; font-weight: 400; margin: 14px 0 8px; }
.csb-fo-demarche-etapes a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.csb-fo-produit-grille { align-items: stretch; }
.csb-fo-produit-texte { min-width: 0; overflow-wrap: break-word; }
.csb-fo-produit-texte > p { max-width: none; }
@media (min-width: 992px) {
  .csb-fo-produit-photo { position: relative; min-height: 440px; }
  .csb-fo-produit-photo img { position: absolute; inset: 0; height: 100%; max-height: none; object-fit: cover; }
}
@media (max-width: 767px) {
  .csb-fo-themes, .csb-fo-pourquoi .csb-fo-reperes { grid-template-columns: 1fr; }
  .csb-fo-gal-actions .csb-fo-lien-bouton { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .csb-fo-demarche-etapes summary > i { transition: none; } }

/* Thèmes : deux moitiés égales sur toute la largeur, après la grille de présentation. */
.csb-fo-themes-section { padding: 0 0 var(--fo-section); background: #fff; }
.csb-fo-themes-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: stretch; }
.csb-fo-themes-duo.sans-photo { grid-template-columns: 1fr; }
.csb-fo-themes-texte { min-width: 0; }
body main.csb-fo .csb-fo-themes-surtitre:not(#csb) { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--fo-doux); }
.csb-fo-themes-duo .csb-fo-themes { grid-template-columns: 1fr; gap: 0; }
.csb-fo-themes-duo .csb-fo-themes li { border: 0; border-bottom: 1px solid var(--fo-filet); border-radius: 0; padding: 15px 0; background: transparent; }
.csb-fo-themes-duo .csb-fo-themes li:first-child { border-top: 1px solid var(--fo-filet); }
.csb-fo-themes-photo { position: relative; min-width: 0; min-height: 420px; margin: 0; }
.csb-fo-themes-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
@media (max-width: 991px) {
 .csb-fo-themes-duo { grid-template-columns: 1fr; gap: 28px; }
 .csb-fo-themes-photo { min-height: 0; }
 .csb-fo-themes-photo img { position: static; height: auto; max-height: 420px; aspect-ratio: 4 / 3; }
}