/* =====================================================================
   Accueil - refonte visuelle v2 (2 nov. 2026). Chargée uniquement par accueil.php (body.csb-home).
   Même architecture et mêmes contenus ; ce fichier change le rythme, la typographie, les fonds et les composants.
   Palette : forêt #004540 · mil #FFE175 · sable #EEE6D2 · craie #F8F7F0 · encre #16231A
   ===================================================================== */
.csb-home {
	--a-foret: #004540;
	--a-foret-2: #0B5A53;
	--a-mil: #FFE175;
	--a-sable: #EEE6D2;
	--a-craie: #F8F7F0;
	--a-encre: #16231A;
	--a-trait: rgba(0, 69, 64, .12);
	--a-section: clamp(72px, 40px + 4.5vw, 120px);
	--a-rayon: 18px;
}

/* --- 1. Typographie --------------------------------------------------- */
/* Texte aligné à gauche, sans césure : la justification créait des « rivières » dans les colonnes étroites */
body.csb-home main :is(p, li, .accordion-body):not(#csb) { text-align: left; -webkit-hyphens: manual; hyphens: manual; }
body.csb-home main p { max-width: 62ch; }
/* Surtitres : casse normale, plus discrets que le titre qu'ils annoncent */
body.csb-home .common-subtitle { gap: 10px; margin-bottom: 14px; align-items: center; }
body.csb-home .common-subtitle img { width: 22px; height: auto; }
body.csb-home .common-subtitle span:not(#csb) { font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--a-foret); }
body.csb-home :is(.csb-faire, .csb-contact) .common-subtitle span:not(#csb) { color: var(--a-mil); }
/* Titres de section : interligne serré, coupe équilibrée */
body.csb-home main h2:not(#csb) { text-wrap: balance; letter-spacing: -.015em; }
body.csb-home main h3:not(#csb) { text-wrap: balance; }

/* --- 1 bis. Hero (v3, 3 nov. 2026) : titre et paragraphe un peu plus petits, surtitre en blanc sur une zone plus large ---
   Les règles de base sont dans csb.css (bloc « Hero : typographie éditoriale ») ; celles-ci ne s'appliquent qu'à l'accueil. */
body.csb-home .csb-hero .hero-content-1 .title :is(h1, h2):not(#csb) { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.06; max-width: min(100%, 14.5em); }
body.csb-home .csb-hero .hero-content-1 .text p:not(#csb) { font-size: clamp(15.5px, .55vw + 9px, 17px); line-height: 1.6; max-width: 50ch; color: rgba(255, 255, 255, .9); }
body.csb-home .csb-hero .hero-content-1 .subtitle { max-width: min(100%, 720px); }
body.csb-home .csb-hero .hero-content-1 .subtitle span:not(#csb) { color: #fff; letter-spacing: .12em; line-height: 1.6; }
@media (max-width: 767px) {
	body.csb-home .csb-hero .hero-content-1 .title :is(h1, h2):not(#csb) { font-size: clamp(30px, 8.6vw, 36px); line-height: 1.1; max-width: 100%; }
	body.csb-home .csb-hero .hero-content-1 .text p:not(#csb) { font-size: 15.5px; }
	body.csb-home .csb-hero .hero-content-1 .subtitle span:not(#csb) { letter-spacing: .08em; }
}

/* --- 2. Rythme vertical ------------------------------------------------ */
body.csb-home .csb-about { margin-top: 0 !important; padding-top: clamp(56px, 30px + 3.5vw, 96px); }
body.csb-home .csb-pourquoi, body.csb-home .csb-videos, body.csb-home .csb-actus, body.csb-home .csb-faq { padding-top: var(--a-section) !important; padding-bottom: var(--a-section) !important; }

/* --- 3. Événement : collé au hero, sans vide dessous ------------------- */
body.csb-home .csb-evenement { margin-bottom: 0; border-bottom: 0; }

/* --- 4. Le centre (v3, 5 nov. 2026) : texte 55 % / image 45 %, image sur toute la hauteur du texte ------- */
body.csb-home .csb-ap { padding-top: var(--a-section); padding-bottom: clamp(48px, 4vw + 16px, 80px); }

/* --- 5. Chiffres : fond blanc, filets fins entre les repères, icône sans pastille --- */
/* Juste sous le hero (5 nov. 2026) : marge haute réduite pour faire remonter les repères */
body.csb-home .csb-chiffres { margin-top: 0 !important; }
body.csb-home .csb-chiffres .company-achievements {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
	padding: 0; border-radius: 0; background: #fff; border-top: 1px solid var(--a-trait); border-bottom: 1px solid var(--a-trait); overflow: hidden;
}
body.csb-home .csb-chiffres .achievement {
	position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0;
	padding: clamp(22px, 2.2vw, 30px) clamp(18px, 2.2vw, 32px); text-align: left; margin: 0;
}
body.csb-home .csb-chiffres .achievement:first-child { padding-left: 0; }
body.csb-home .csb-chiffres .achievement + .achievement::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: var(--a-trait); }
body.csb-home .csb-chiffres .achievement :is(h2, .achievement-chiffre):not(#csb) { margin: 0; font-size: clamp(30px, 24px + 1.1vw, 42px); line-height: 1; letter-spacing: -.02em; color: var(--a-foret); white-space: nowrap; }
body.csb-home .csb-chiffres .achievement p:not(#csb) { margin: 8px 0 0; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--a-encre); }
@media (max-width: 991px) {
	body.csb-home .csb-chiffres .company-achievements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.csb-home .csb-chiffres .achievement:nth-child(3) { padding-left: 0; }
	body.csb-home .csb-chiffres .achievement:nth-child(3)::before { display: none; }
	body.csb-home .csb-chiffres .achievement:nth-child(n+3) { border-top: 1px solid var(--a-trait); }
}
@media (max-width: 420px) {
	body.csb-home .csb-chiffres .achievement { padding: 20px 14px; }
	body.csb-home .csb-chiffres .achievement:is(:first-child, :nth-child(3)) { padding-left: 0; }
	body.csb-home .csb-chiffres .achievement p:not(#csb) { font-size: 14px; }
}

/* --- 6. Ce que nous faisons (v4, 5 nov. 2026) : fond clair, slider de cartes -------------------------- */
body.csb-home .csb-fz { margin-top: clamp(48px, 5vw, 80px); padding: var(--a-section) 0; background: var(--a-craie); }
/* En-tête commun des sections à titre + bouton (formations, produits, actualités) */
:is(.csb-fz-top, .csb-pr-top, .csb-actus-top) { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: clamp(28px, 3vw, 44px); }
:is(.csb-fz-intro, .csb-pr-intro, .csb-actus-intro) { min-width: 0; }
:is(.csb-fz-intro, .csb-pr-intro, .csb-actus-intro) .common-title { margin-bottom: 0; }
:is(.csb-fz-intro, .csb-pr-intro, .csb-actus-intro) .common-title h2 { margin: 0; }
body.csb-home :is(.csb-fz-intro, .csb-pr-intro, .csb-actus-intro) > p:not(#csb) { max-width: 62ch; margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: rgba(22, 35, 26, .84); }
:is(.csb-fz-cta, .csb-pr-cta, .csb-actus-cta) { flex: none; }
.csb-fz-slider .swiper { overflow: hidden; }
.csb-fz-slider .swiper-slide { height: auto; }
.csb-fz-card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--a-trait); border-radius: 14px; background: #fff; transition: border-color .25s ease; }
.csb-fz-card:hover { border-color: rgba(0, 69, 64, .32); }
.csb-fz-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--a-sable); }
.csb-fz-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.csb-fz-card:hover .csb-fz-media img { transform: scale(1.03); }
.csb-fz-corps { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 20px 22px 22px; }
body.csb-home .csb-fz-meta:not(#csb) { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--a-foret); }
body.csb-home .csb-fz-titre:not(#csb) { margin: 0 0 8px; font-size: clamp(19px, 17.5px + .35vw, 22px); line-height: 1.25; }
.csb-fz-titre a { color: inherit; text-decoration: none; }
.csb-fz-titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } /* toute la carte est cliquable */
.csb-fz-titre a:focus-visible { outline: none; }
.csb-fz-card:has(.csb-fz-titre a:focus-visible) { outline: 3px solid var(--a-foret); outline-offset: 3px; }
body.csb-home .csb-fz-texte:not(#csb) { margin: 0 0 16px; max-width: none; font-size: 15px; line-height: 1.55; color: rgba(22, 35, 26, .84); }
.csb-fz-lien { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-bottom: 2px; border-bottom: 2px solid var(--a-mil); font-size: 15px; font-weight: 700; color: var(--a-foret); }
.csb-fz-lien i { font-size: 13px; transition: transform .25s ease; }
.csb-fz-card:hover .csb-fz-lien i { transform: translateX(4px); }
.csb-fz-slider .csb-actus-bas { margin-top: 32px; }
@media (max-width: 767px) { .csb-fz-slider .csb-actus-bas { margin-top: 24px; } }

/* --- 7. Pourquoi se former chez nous (v4) : image à gauche 45 %, texte à droite 55 % ---------------------- */
body.csb-home .csb-pq { background: #fff; }
.csb-pq-grille { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); gap: clamp(40px, 5vw, 88px); align-items: stretch; }
.csb-pq-visuel { position: relative; min-height: 380px; margin: 0; border-radius: 14px; overflow: hidden; background: var(--a-sable); }
.csb-pq-visuel img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.csb-pq-texte { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
body.csb-home .csb-pq-chapo:not(#csb) { margin: 0 0 24px; max-width: 58ch; font-size: clamp(17px, 15.5px + .4vw, 20px); line-height: 1.55; color: var(--a-encre); }
.csb-pq-liste { list-style: none; width: 100%; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--a-trait); }
.csb-pq-liste li { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--a-trait); }
.csb-pq-pt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.csb-pq-pt strong { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--a-foret); }
.csb-pq-pt span { font-size: 15px; line-height: 1.5; color: rgba(22, 35, 26, .82); }
body.csb-home .csb-pq-fait:not(#csb) { display: flex; align-items: flex-start; gap: 12px; width: 100%; margin: 0 0 30px; padding: 16px 20px; border-left: 3px solid var(--a-mil); border-radius: 0 10px 10px 0; background: var(--a-craie); font-size: 15px; line-height: 1.6; color: var(--a-encre); max-width: none; }
.csb-pq-actions { margin-top: auto; }
@media (max-width: 1199px) {
	.csb-pq-grille { grid-template-columns: 1fr; gap: 40px; }
	.csb-pq-visuel { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) { .csb-pq-visuel { aspect-ratio: 4 / 3; } }

/* --- 8. Vidéos (v4) : cartes plus compactes -------------------------------------------------------------- */
body.csb-home .csb-videos { background: var(--a-craie); }
@media (min-width: 992px) {
	body.csb-home .csb-videos-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: repeat(3, auto); gap: 16px; }
	body.csb-home .csb-videos-grid > .csb-video-card:first-child { grid-row: 1 / span 3; }
	body.csb-home .csb-videos-grid > .csb-video-card:first-child .csb-video-media { aspect-ratio: auto; flex: 1; min-height: 200px; }
	body.csb-home .csb-videos-grid > .csb-video-card:first-child .csb-video-media { position: relative; }
	body.csb-home .csb-videos-grid > .csb-video-card:first-child .csb-video-media img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
	body.csb-home .csb-videos-grid > .csb-video-card:first-child .csb-video-body { flex: 0 0 auto; padding: 18px 22px 20px; }
	body.csb-home .csb-videos-grid > .csb-video-card:first-child h3:not(#csb) { margin-bottom: 6px; font-size: clamp(20px, 1.1vw + 8px, 24px); }
	body.csb-home .csb-videos-grid > .csb-video-card:first-child .csb-video-desc { margin-bottom: 12px; }
	body.csb-home .csb-videos-grid > .csb-video-card:not(:first-child) { display: grid; grid-template-columns: 38% 1fr; }
	body.csb-home .csb-videos-grid > .csb-video-card:not(:first-child) .csb-video-media { aspect-ratio: auto; height: 100%; min-height: 104px; overflow: hidden; }
	body.csb-home .csb-videos-grid > .csb-video-card:not(:first-child) .csb-video-media img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
	body.csb-home .csb-videos-grid > .csb-video-card:not(:first-child) .csb-video-body { display: flex; flex-direction: column; justify-content: center; padding: 10px 18px; }
	body.csb-home .csb-videos-grid > .csb-video-card:not(:first-child) h3:not(#csb) { margin-bottom: 4px; font-size: 16px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	body.csb-home .csb-videos-grid > .csb-video-card:not(:first-child) .csb-video-desc { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; font-size: 14px; line-height: 1.5; }
	body.csb-home .csb-videos-grid > .csb-video-card:not(:first-child) .csb-video-play { width: 44px; height: 44px; }
}
@media (max-width: 991px) {
	body.csb-home .csb-videos-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
	body.csb-home .csb-videos-grid > .csb-video-card:not(:first-child) { display: grid; grid-template-columns: 36% 1fr; }
	body.csb-home .csb-videos-grid > .csb-video-card:not(:first-child) .csb-video-media { position: relative; aspect-ratio: auto; height: 100%; min-height: 104px; overflow: hidden; }
	body.csb-home .csb-videos-grid > .csb-video-card:not(:first-child) .csb-video-media img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
	body.csb-home .csb-videos-grid > .csb-video-card:not(:first-child) .csb-video-body { display: flex; flex-direction: column; justify-content: center; padding: 10px 16px; }
	body.csb-home .csb-videos-grid > .csb-video-card:not(:first-child) h3:not(#csb) { margin-bottom: 4px; font-size: 16px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	body.csb-home .csb-videos-grid > .csb-video-card:not(:first-child) .csb-video-desc { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; font-size: 14px; line-height: 1.5; }
	body.csb-home .csb-videos-grid > .csb-video-card:not(:first-child) .csb-video-play { width: 40px; height: 40px; }
}
@media (max-width: 479px) { body.csb-home .csb-videos-grid > .csb-video-card:not(:first-child) .csb-video-desc { display: none; } body.csb-home .csb-videos-grid > .csb-video-card:not(:first-child) { grid-template-columns: 38% 1fr; } }
body.csb-home .csb-video-card { border-radius: 12px; overflow: hidden; border: 1px solid var(--a-trait); }
body.csb-home .csb-video-card:hover { box-shadow: none; }
body.csb-home .csb-video-meta:not(#csb) {
	display: inline-flex; align-items: center; gap: 6px; padding: 0; border-radius: 0; margin-bottom: 6px;
	background: none; color: var(--a-foret); font-size: 13px; font-weight: 600; line-height: 1.4;
}
body.csb-home .csb-video-desc:not(#csb) { font-size: 15px; line-height: 1.55; }
/* « Regarder la vidéo » : lien souligné de jaune plutôt qu'un bouton plein dans chaque carte */
body.csb-home .csb-videos .csb-video-open:not(#csb) {
	height: auto; min-height: 0; padding: 0 0 3px; gap: 8px; border: 0; border-bottom: 2px solid var(--a-mil); border-radius: 0;
	background: none; color: var(--a-foret); font-size: 15px; font-weight: 600; line-height: 1.4;
}
body.csb-home .csb-videos .csb-video-open::before, body.csb-home .csb-videos .csb-video-open::after { display: none; }
body.csb-home .csb-videos .csb-video-open .icon-wrap { display: none; }
body.csb-home .csb-videos .csb-video-open:hover { color: var(--a-foret-2); border-bottom-color: var(--a-foret); }

/* --- 9. Produits (v3) : vitrine du catalogue de la boutique ---------------------------------------------- */
.csb-pr { padding: var(--a-section) 0; background: #fff; }

/* --- 10. Actualités (v3) : titre au-dessus, slider sur toute la largeur ------------------------------------- */
body.csb-home .csb-actus { background: var(--a-craie); }
body.csb-home .csb-actus .blog-card { border-radius: var(--a-rayon); overflow: hidden; }
body.csb-home .csb-actus .blog-card .content { padding: 4px 26px 26px; }
body.csb-home .csb-actus .blog-card .title h3:not(#csb) { font-size: clamp(19px, 17.5px + .35vw, 22px); line-height: 1.3; }
body.csb-home .csb-actus .blog-card .text p:not(#csb) { font-size: 15.5px; line-height: 1.6; }

@media (max-width: 767px) {
	:is(.csb-fz-top, .csb-pr-top, .csb-actus-top) { flex-direction: column; align-items: flex-start; }
}

/* --- 11. FAQ : colonne d'intro en haut et collante, questions à filets -- */
body.csb-home .csb-faq .row.faq { align-items: flex-start; }
@media (min-width: 1200px) { body.csb-home .csb-faq .col-xl-5 { position: sticky; top: 120px; } }
body.csb-home .csb-faq .faq-accordion .accordion-item {
	margin: 0; border: 0; border-bottom: 1px solid var(--a-trait); border-radius: 0; background: transparent; box-shadow: none;
}
body.csb-home .csb-faq .faq-accordion .accordion-item:first-child { border-top: 1px solid var(--a-trait); }
body.csb-home .csb-faq .faq-accordion .accordion-item .accordion-header .accordion-button {
	gap: 16px; padding: 18px 0; background: transparent; box-shadow: none; border-radius: 0; color: var(--a-foret);
}
body.csb-home .csb-faq .faq-accordion .accordion-item .accordion-body { padding: 0 48px 20px 0; }
body.csb-home .csb-faq .faq-accordion .accordion-item .accordion-body:not(#csb) { font-size: 14px; line-height: 1.7; color: var(--a-encre); max-width: 62ch; }
body.csb-home .csb-faq .faq-accordion .accordion-button .csb-faq-q:not(#csb) { flex: 1; font-size: 18px; font-weight: 600; line-height: 1.4; }
body.csb-home .csb-faq .col-xl-5 .text p:not(#csb) { font-size: 16px; line-height: 1.6; }
/* v3 (3 nov. 2026) : icône d'ouverture au trait, sans cercle ni fond ; le « + » pivote en « − » à l'ouverture */
body.csb-home .csb-faq .faq-accordion .accordion-item .accordion-header .accordion-button .icon {
	flex: none; width: 20px; height: 20px; margin-left: auto; border: 0; border-radius: 0; background: none; transform: none;
}
body.csb-home .csb-faq .faq-accordion .accordion-item .accordion-header .accordion-button .icon :is(.icon-plus, .icon-minus) { background-color: var(--a-foret); }
body.csb-home .csb-faq .faq-accordion .accordion-item .accordion-header .accordion-button .icon .icon-plus { width: 14px; height: 1.5px; }
body.csb-home .csb-faq .faq-accordion .accordion-item .accordion-header .accordion-button .icon .icon-minus { width: 1.5px; height: 14px; }
body.csb-home .csb-faq .faq-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) .icon { background: none; transform: none; }
body.csb-home .csb-faq .faq-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) .icon .icon-minus { transform: rotate(90deg); opacity: 1; }
body.csb-home .csb-faq .faq-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) .icon .icon-plus { opacity: 1; }
body.csb-home .csb-faq .faq-accordion .accordion-button:not(.collapsed) { color: var(--a-foret); }
body.csb-home .csb-faq .faq-accordion .accordion-button:focus-visible { outline: 2px solid var(--a-foret); outline-offset: 4px; border-radius: 2px; }

/* --- 12. Mouvement réduit ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	body.csb-home :is(.csb-fl-photo, .csb-fl-photo img, .csb-fl-nom, .csb-fl-desc, .csb-fl-fleche, .csb-card .thumb img, .csb-video-media img, .csb-pv-media img, .csb-pv-fiche, .csb-pv-lien i, .csb-pourquoi-liste .service, .csb-fz-card, .csb-fz-media img, .csb-fz-lien i, .csb-pr-lien, .csb-pr-img, .csb-pr-voir i, .csb-pr-cat) { transition: none !important; transform: none !important; }
	body.csb-home .csb-faq .accordion-button .icon :is(.icon-plus, .icon-minus) { transition: none !important; }
}

/* --- Réassurance sous le hero : 3 colonnes centrées (initiale, qualifiante, continue) ------------ */
.csb-home .csb-rea { background: #fff; padding: clamp(40px, 28px + 3vw, 72px) 0 0; }
.csb-home .csb-rea-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.csb-home .csb-rea-carte { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px clamp(20px, 3vw, 48px); }
.csb-home .csb-rea-carte + .csb-rea-carte { border-left: 1px solid var(--a-trait); }
body.csb-home main h2.csb-rea-titre:not(#csb) { margin: 0 0 10px; font-size: var(--csb-t-carte); line-height: 1.2; text-align: center; color: #111; } /* titres en noir (demande du 6 nov. 2026) */
body.csb-home main p.csb-rea-texte:not(#csb) { margin: 0 auto 20px; max-width: 32ch; font-size: 15.5px; line-height: 1.6; text-align: center; color: rgba(22, 35, 26, .82); }
.csb-home .csb-rea-lien { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--a-foret); border-bottom: 2px solid var(--a-mil); transition: gap .2s, border-color .2s; }
.csb-home .csb-rea-lien:hover, .csb-home .csb-rea-lien:focus-visible { gap: 12px; border-color: var(--a-foret); }
@media (max-width: 767px) {
	.csb-home .csb-rea-grille { grid-template-columns: 1fr; }
	.csb-home .csb-rea-carte { padding: 28px 0; }
	.csb-home .csb-rea-carte + .csb-rea-carte { border-left: 0; border-top: 1px solid var(--a-trait); }
}

/* === 5 nov. 2026 : « La vie du centre » en grille 1 × 4 ; images « Le centre » et « Pourquoi » moins hautes === */
.csb-actus-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.csb-actus-item { min-width: 0; display: flex; }
.csb-actus-item .blog-card { width: 100%; display: flex; flex-direction: column; }
.csb-actus-item .blog-card .content { display: flex; flex-direction: column; flex: 1; }
.csb-actus-item .blog-card .content-bottom { margin-top: auto; }
body.csb-home .csb-actus .csb-actus-item .blog-card .content { padding: 4px 20px 22px; }
body.csb-home .csb-actus .csb-actus-item .blog-card .title h3:not(#csb) { font-size: clamp(17px, 16px + .25vw, 19px); }
body.csb-home .csb-actus .csb-actus-item .blog-card .text p:not(#csb) { font-size: 15px; }
@media (max-width: 1099px) { .csb-actus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 639px) { .csb-actus-grid { grid-template-columns: 1fr; } }

.csb-pq-grille { align-items: center; }
.csb-pq-visuel { min-height: 0; aspect-ratio: 4 / 3; max-height: 420px; width: 100%; }
@media (max-width: 1099px) { .csb-pq-visuel { aspect-ratio: 16 / 9; max-height: 340px; } }
@media (max-width: 767px) { .csb-pq-visuel { aspect-ratio: 16 / 10; max-height: 260px; } }

/* Correctif : l'image couvre toute la hauteur du texte (comme avant) ; on réduit plutôt le titre pour raccourcir la section */
.csb-pq-grille { align-items: stretch; }
.csb-pq-visuel { aspect-ratio: auto; max-height: none; min-height: 380px; }
body.csb-home :is(.csb-pq-texte) .common-title h2:not(#csb) { font-size: clamp(26px, 20px + 1.2vw, 36px); line-height: 1.2; }
@media (max-width: 1099px) { .csb-pq-visuel { aspect-ratio: 16 / 10; min-height: 0; } }
@media (max-width: 767px) { .csb-pq-visuel { aspect-ratio: 4 / 3; } }

/* « Le centre » : vidéo à la place de l'image */

/* --- Hero : hauteur réduite d'environ 10 % (5 nov. 2026) : marges haute et basse, par taille d'écran (valeurs précédentes dans csb.css) --- */
body.csb-home .csb-hero .hero-side { padding-top: 215px; padding-bottom: 125px; }
@media (min-width: 1200px) and (max-width: 1700px) { body.csb-home .csb-hero .hero-side { padding-top: 150px; padding-bottom: 77px; } }
@media (min-width: 992px) and (max-width: 1199px) { body.csb-home .csb-hero .hero-side { padding-top: 165px; padding-bottom: 100px; } }
@media (min-width: 768px) and (max-width: 991px) { body.csb-home .csb-hero .hero-side { padding-top: 170px; padding-bottom: 77px; } }
@media (max-width: 767px) { body.csb-home .csb-hero .hero-side { padding-top: 98px; padding-bottom: 84px; } }

/* --- Nos produits (v4, 5 nov. 2026) : texte 55 % / photo 45 %, photo sur toute la hauteur du texte --- */
.csb-pr-grille { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: clamp(40px, 5vw, 88px); align-items: stretch; }
.csb-pr-texte { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
body.csb-home .csb-pr-texte .common-title h2:not(#csb) { font-size: clamp(26px, 20px + 1.2vw, 36px); line-height: 1.2; }
body.csb-home .csb-pr-chapo:not(#csb) { margin: 0 0 16px; max-width: 60ch; font-size: clamp(17px, 15.5px + .4vw, 19px); line-height: 1.6; color: var(--a-encre); }
body.csb-home .csb-pr-suite:not(#csb) { margin: 0 0 26px; max-width: 60ch; font-size: 16px; line-height: 1.65; color: rgba(22, 35, 26, .82); }
.csb-pr-points { list-style: none; width: 100%; margin: 0 0 28px; padding: 0; border-top: 1px solid var(--a-trait); }
.csb-pr-points li { display: flex; align-items: flex-start; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--a-trait); }
.csb-pr-pt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.csb-pr-pt strong { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--a-foret); }
.csb-pr-pt span { font-size: 15px; line-height: 1.5; color: rgba(22, 35, 26, .82); }
.csb-pr-actions { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
body.csb-home .csb-pr-mention:not(#csb) { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(22, 35, 26, .62); }
.csb-pr-visuel { position: relative; min-height: 380px; margin: 0; border-radius: 14px; overflow: hidden; background: var(--a-sable); }
.csb-pr-visuel img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
@media (max-width: 1199px) {
	.csb-pr-grille { grid-template-columns: 1fr; gap: 40px; }
	.csb-pr-visuel { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) { .csb-pr-visuel { aspect-ratio: 4 / 3; } }

/* === v5 (5 nov. 2026) : proportions des sections texte / média ======================================
   Principe : le média garde sa proportion naturelle, c'est le texte qui est compacté pour l'accompagner.
   - « Le centre » : vidéo 16:9 (ratio réel du fichier), jamais recadrée (object-fit: contain) ; texte centré en face.
   - « Pourquoi » et « Produits » : photo en cover, hauteur = hauteur du texte, bornée (340 à 480 px) ; pas de hauteur fixe sur le texte. */
:is(.csb-pq-grille, .csb-pr-grille) { align-items: center; gap: clamp(32px, 4vw, 64px); }
body.csb-home .csb-ap { padding-top: clamp(48px, 5vw, 72px); padding-bottom: clamp(40px, 4vw, 64px); }
body.csb-home .csb-pq, body.csb-home .csb-pr { padding-top: clamp(40px, 4vw, 64px); padding-bottom: clamp(40px, 4vw, 64px); }

/* Titres et textes plus fins */
body.csb-home :is(.csb-pq-texte, .csb-pr-texte) .common-title h2:not(#csb) { font-size: clamp(24px, 19px + 1vw, 32px); line-height: 1.2; }
body.csb-home :is(.csb-pq-texte, .csb-pr-texte) .common-title { margin-bottom: 14px; }
body.csb-home :is(.csb-pq-texte, .csb-pr-texte) .common-subtitle { margin-bottom: 10px; }
body.csb-home :is(.csb-pq-chapo, .csb-pr-chapo):not(#csb) { margin: 0 0 14px; max-width: none; font-size: 16.5px; line-height: 1.55; }
body.csb-home .csb-pr-suite:not(#csb) { margin: 0 0 18px; max-width: none; font-size: 15px; line-height: 1.6; color: rgba(22, 35, 26, .82); }

:is(.csb-pq-liste, .csb-pr-points) { margin: 0 0 18px; }
:is(.csb-pq-liste, .csb-pr-points) li { gap: 14px; padding: 10px 0; }
:is(.csb-pq-pt, .csb-pr-pt) strong { font-size: 15.5px; }
:is(.csb-pq-pt, .csb-pr-pt) span { font-size: 14.5px; line-height: 1.45; }
body.csb-home .csb-pq-fait:not(#csb) { margin: 0 0 20px; padding: 12px 16px; font-size: 14px; line-height: 1.5; }
:is(.csb-pq-actions, .csb-pr-actions) { margin-top: 0; }
.csb-pr-actions { gap: 10px; }

/* Vidéo « Le centre » : ratio naturel 16:9, rien n'est coupé */

/* Photos « Pourquoi » et « Produits » : hauteur du texte, bornée, cadrage naturel */
:is(.csb-pq-visuel, .csb-pr-visuel) { aspect-ratio: auto; align-self: stretch; min-height: 340px; max-height: 480px; }

@media (max-width: 1199px) {
	.csb-pq-grille, .csb-pr-grille { gap: 28px; }
	
	:is(.csb-pq-visuel, .csb-pr-visuel) { align-self: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
	:is(.csb-pq-visuel, .csb-pr-visuel) { aspect-ratio: 4 / 3; }
	body.csb-home .csb-ap, body.csb-home .csb-pq, body.csb-home .csb-pr { padding-top: 40px; padding-bottom: 40px; }
}

/* v5b : « Le centre » : colonne média = vidéo 16:9 + paragraphe « Deux implantations » dessous ; titres et listes resserrés */

body.csb-home :is(.csb-pq-texte, .csb-pr-texte) .common-title h2:not(#csb) { font-size: clamp(24px, 19px + .8vw, 29px); }
body.csb-home :is(.csb-pq-chapo, .csb-pr-chapo):not(#csb) { font-size: 16px; line-height: 1.5; margin-bottom: 12px; }
body.csb-home .csb-pr-suite:not(#csb) { font-size: 14.5px; line-height: 1.55; margin-bottom: 14px; }
:is(.csb-pq-liste, .csb-pr-points) { margin-bottom: 16px; }
:is(.csb-pq-liste, .csb-pr-points) li { padding: 9px 0; }
:is(.csb-pq-pt, .csb-pr-pt) span { font-size: 14px; line-height: 1.4; }
.csb-pr-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 18px; }

/* v5c : plafond des photos relevé (cover, cadrage naturel) ; listes plus serrées */
:is(.csb-pq-visuel, .csb-pr-visuel) { max-height: 560px; }
:is(.csb-pq-liste, .csb-pr-points) li { padding: 8px 0; }
body.csb-home .csb-pq-fait:not(#csb) { margin-bottom: 16px; padding: 10px 14px; }
@media (max-width: 1199px) { :is(.csb-pq-visuel, .csb-pr-visuel) { max-height: none; } }

/* v5d : « Le centre » : vidéo seule à droite (colonne plus large = vidéo plus haute, ratio 16:9 conservé) ; le texte « Deux implantations » devient une notice sous la liste */

/* v5e : vidéo seule, plus haute : cadre 4:3 centré sur le sujet (cover), pour se rapprocher de la hauteur du texte */

/* v5f : cadre vidéo limité à 4:3 (recadrage modéré), centré en face du texte */

/* --- Titres de section : une seule taille pour toute la page d'accueil (5 nov. 2026) ---
   Référence : « Des productions agricoles au service d'une alimentation durable » (section Produits).
   S'applique aux h2 de section ; le titre du hero (h1) et les titres de cartes ne sont pas concernés. */
body.csb-home :is(.csb-ap, .csb-fz, .csb-ev, .csb-evh, .csb-pq, .csb-videos, .csb-pr, .csb-actus, .csb-faq) .common-title h2:not(#csb) { font-size: clamp(24px, 19px + .8vw, 29px); line-height: 1.2; }

/* v5g : texte plus large (colonnes 1 / 1) pour qu'il soit moins haut et que la vidéo 4:3 couvre sa hauteur */

/* v5h : la vidéo couvre la hauteur du texte (cadre 6:5 sur ordinateur) */

/* Chiffres : version plus compacte (5 nov. 2026) */
body.csb-home .csb-chiffres .achievement { padding: clamp(14px, 1.5vw, 20px) clamp(16px, 2vw, 28px); }
body.csb-home .csb-chiffres .achievement:first-child { padding-left: 0; }
body.csb-home .csb-chiffres .achievement + .achievement::before { top: 16px; bottom: 16px; }
body.csb-home .csb-chiffres .achievement :is(h2, .achievement-chiffre):not(#csb) { font-size: clamp(24px, 20px + .8vw, 32px); }
body.csb-home .csb-chiffres .achievement p:not(#csb) { margin-top: 5px; font-size: 14px; }
@media (max-width: 767px) { body.csb-home .csb-chiffres .achievement { padding: 14px 12px; } body.csb-home .csb-chiffres .achievement:is(:first-child, :nth-child(3)) { padding-left: 0; } body.csb-home .csb-chiffres .achievement p:not(#csb) { font-size: 13px; } }

/* --- Hero : diapositives de même hauteur (5 nov. 2026) ---
   Les textes n'ont pas la même longueur : sans cette règle, la diapositive la plus courte laissait du blanc sous l'image
   (jusqu'à 65 px) entre le hero et la bande suivante. Chaque diapositive prend la hauteur de la plus haute. */
body.csb-home .csb-hero .swiper-slide { height: auto; display: flex; }
body.csb-home .csb-hero .swiper-slide .hero-side { flex: 1 1 auto; width: 100%; }

/* --- 13. Notre processus : retirée le 6 nov. 2026 (remplacée par « Nos événements », styles : csb-evenements.css). Sauvegarde : csb-docs/sauvegarde-2026-11-06-retour-proprietaire. */

/* --- 14. Le centre (v4, 5 nov. 2026) : texte 55 % / média 45 % ---------------------------------------------------
   Colonne gauche : présentation, objectifs, points forts. Colonne droite : vidéo au ratio réel du fichier (16:9, jamais étirée ni recadrée)
   + mini-carte des implantations dessous (dans le flux, sans positionnement absolu). Aucune hauteur fixe : rien n'est coupé. */
.csb-cn-grille { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 1200px) { .csb-cn-grille { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: clamp(32px, 3.5vw, 56px); } }
.csb-cn-texte { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
body.csb-home .csb-cn .common-title { margin-bottom: 12px; }
body.csb-home .csb-cn .common-subtitle { margin-bottom: 8px; }
.csb-cn-presentation { margin-bottom: 4px; }
body.csb-home .csb-cn-presentation p:not(#csb) { max-width: none; margin: 0 0 6px; font-size: 15px; line-height: 1.55; color: var(--a-encre); }

/* Objectifs */
.csb-cn-objectifs { width: 100%; margin-top: 14px; }
.csb-cn-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--a-trait); }
.csb-cn-liste li { display: flex; align-items: flex-start; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--a-trait); }
.csb-cn-obj { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.csb-cn-obj strong { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--a-foret); }
.csb-cn-obj span { font-size: 14px; line-height: 1.4; color: rgba(22, 35, 26, .82); }

.csb-cn-actions { margin-top: 14px; }

/* Colonne droite : vidéo puis mini-carte, dans le flux */
.csb-cn-colonne { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 1200px) { .csb-cn-colonne { position: sticky; top: 120px; align-self: start; } }
.csb-cn-video { position: relative; margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: #0e2a26; }
.csb-cn-video .csb-ap-video { display: block; width: 100%; height: 100%; object-fit: contain; }
.csb-ap-video-ctl { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 8px; }
.csb-ap-video-ctl button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0, 45, 40, .72); color: #fff; font-size: 16px; cursor: pointer; transition: background .2s ease; }
.csb-ap-video-ctl button:hover { background: rgba(0, 45, 40, .92); }
.csb-ap-video-ctl button:focus-visible { outline: 3px solid #ffd95a; outline-offset: 2px; }

@media (max-width: 767px) {
	.csb-cn-liste li { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .csb-ap-video-ctl button { transition: none; } }

/* « Le centre » : vidéo plus haute (5 nov. 2026). Le fichier est en 16:9 : le cadre est plus haut que large-court et la vidéo est recadrée sur les côtés
   (object-fit: cover, jamais étirée). Ordinateur : la colonne droite prend la hauteur du texte, la vidéo occupe tout l'espace au-dessus de la mini-carte.
   Tablette et mobile : cadre 4:3. */
.csb-cn-video { aspect-ratio: 4 / 3; }
.csb-cn-video .csb-ap-video { position: absolute; inset: 0; object-fit: cover; object-position: center 40%; }
@media (min-width: 1200px) {
	.csb-cn-colonne { position: static; align-self: stretch; }
	.csb-cn-video { flex: 1 1 auto; aspect-ratio: auto; min-height: 340px; }
}

/* Chiffres : le repère « 2 Implantations » nomme les deux sites, en une ligne discrète (5 nov. 2026) */
body.csb-home .csb-chiffres .achievement p.achievement-sites:not(#csb) { margin: 2px 0 0; font-size: 13px; font-weight: 400; line-height: 1.4; color: rgba(22, 35, 26, .66); }

/* Mobile (< 768 px) : vidéo « Le centre » un peu plus haute, cadre 8:7 au lieu de 4:3 (5 nov. 2026) */
@media (max-width: 767px) { .csb-cn-video { aspect-ratio: 8 / 7; } }

/* =====================================================================
   15. Retour du propriétaire (6 nov. 2026) : sans icônes décoratives, couleurs plus vivantes, mouvement discret.
   Le vert du logo (#004540) reste la couleur principale et le blanc reste dominant. Jetons ajoutés ci-dessous ;
   valeurs de travail, pas une nouvelle charte. Contrastes (WCAG AA) : vert végétal sur blanc 5,9:1, sur vert pâle 5,4:1.
   ===================================================================== */
.csb-home {
	--a-vegetal: #23734A;   /* vert végétal : surtitres, numéros, filets d'accent */
	--a-pale: #F0F6EF;      /* vert très pâle : fond de la section Événements */
	--a-mil-vif: #FFE06A;   /* jaune lumineux : traits d'accent, pavés de date */
}

/* --- Surtitres : trait d'accent jaune à la place de la feuille, casse éditoriale --- */
body.csb-home .common-subtitle { gap: 12px; }
body.csb-home .common-subtitle::before { content: ""; flex: none; width: 28px; height: 4px; border-radius: 2px; background: var(--a-mil-vif); }
body.csb-home .common-subtitle span:not(#csb) { font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--a-vegetal); }

/* --- Bande des chiffres : chiffres seuls, sans pictogramme --- */
body.csb-home .csb-chiffres .achievement :is(h2, .achievement-chiffre):not(#csb) { font-family: var(--csb-font-titre); font-weight: 600; }

/* --- Le centre : numéros 01 à 03 --- */
.csb-cn-num { flex: none; width: 28px; padding-top: 1px; font-family: var(--csb-font-titre); font-size: 15px; font-weight: 600; line-height: 1.35; font-variant-numeric: tabular-nums; color: var(--a-vegetal); }

/* --- Réassurance : trait d'accent centré au-dessus du titre --- */
.csb-home .csb-rea-carte::before { content: ""; width: 36px; height: 4px; margin: 6px 0 22px; border-radius: 2px; background: var(--a-mil-vif); transition: width .35s ease; }
.csb-home .csb-rea-carte:hover::before { width: 56px; }

/* --- Ce que nous faisons : catégorie en petites capitales vertes --- */
body.csb-home .csb-fz-meta:not(#csb) { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--a-vegetal); }

/* --- Pourquoi se former : filet vertical fin devant chaque point --- */
.csb-pq-liste li { position: relative; padding-left: 18px; }
.csb-pq-liste li::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 2px; border-radius: 2px; background: var(--a-vegetal); }
body.csb-home .csb-pq-fait:not(#csb) { border-left-color: var(--a-mil-vif); }

/* --- Nos produits : liste à filets en deux colonnes (titre / phrase) --- */
@media (min-width: 768px) {
	.csb-pr-pt { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 2px 24px; align-items: baseline; width: 100%; }
}

/* --- Fonds de section : deux couleurs seulement (demande du propriétaire, 6 nov. 2026) : blanc et vert pâle (celui des « Rendez-vous du centre »).
   Alternance : formations blanc · événements vert pâle · pourquoi blanc · vidéos vert pâle · produits blanc · actualités vert pâle · FAQ blanc. --- */
body.csb-home :is(.csb-chiffres, .csb-ap, .csb-rea, .csb-fz, .csb-pq, .csb-pr, .csb-faq) { background: #fff; }
body.csb-home :is(.csb-videos, .csb-actus) { background: var(--a-pale); }
body.csb-home .csb-fz { margin-top: 0; }
body.csb-home .csb-video-card { border-color: var(--a-trait); }

/* --- Boutons : le jaune reste la couleur d'action ; survol en vert végétal, plus chaleureux que le vert profond --- */
body.csb-home main .e-primary-btn:not(.csb-btn-solid):not(.is-hover-white)::before { background: var(--a-vegetal); }
body.csb-home main .e-primary-btn:not(.csb-btn-solid):not(.is-hover-white):hover .icon-wrap { background: var(--a-mil-vif); color: var(--a-foret); }

/* --- Photos : zoom très léger au survol de la section --- */
:is(.csb-pq-visuel, .csb-pr-visuel) img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
:is(.csb-pq-grille, .csb-pr-grille):hover :is(.csb-pq-visuel, .csb-pr-visuel) img { transform: scale(1.03); }

/* --- Hero : la photo de la diapositive active entre en douceur (léger recul du zoom, une fois par diapositive) --- */
body.csb-home .csb-hero .swiper-slide-active .csb-hero-media img { animation: csbHeroPhoto 1.6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes csbHeroPhoto { from { transform: scale(1.06); } to { transform: scale(1); } }

/* --- Apparitions au défilement (AOS) : course courte (24 px), une seule fois ---
   Sans JavaScript, ou si AOS ne s'initialise pas, le contenu reste visible (classe csb-js posée par accueil.php,
   retirée par csb-accueil.js si AOS est absent). Préférence « moins d'animations » : aucun mouvement. */
body.csb-home [data-aos="fade-up"]:not(.aos-animate) { transform: translate3d(0, 24px, 0); }
html:not(.csb-js) body.csb-home [data-aos] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
	body.csb-home [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
	body.csb-home .csb-hero .swiper-slide-active .csb-hero-media img { animation: none; }
	:is(.csb-pq-visuel, .csb-pr-visuel) img, .csb-home .csb-rea-carte::before { transition: none !important; transform: none !important; }
}

/* Refonte éditoriale (6 nov. 2026) : « Le centre » et « Pourquoi se former chez nous » — 2 paragraphes + liste simple, sans carte ni icône. */
body.csb-home :is(.csb-cn-presentation, .csb-pq-presentation) p:not(#csb) { max-width: none; margin: 0 0 10px; font-size: 16px; line-height: 1.65; color: var(--a-encre); }
body.csb-home .csb-liste-titre:not(#csb) { margin: 14px 0 6px; font-family: var(--csb-font-texte); font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--a-foret); }
.csb-liste-simple { list-style: none; margin: 0 0 18px; padding: 0; }
.csb-liste-simple li { position: relative; margin: 0; padding: 3px 0 3px 18px; font-size: 15.5px; line-height: 1.55; color: var(--a-encre); }
.csb-liste-simple li::before { content: ""; position: absolute; left: 2px; top: .95em; width: 6px; height: 6px; border-radius: 50%; background: var(--a-vegetal); }
.csb-cn-objectifs { margin-top: 0; }
@media (max-width: 575px) {
	body.csb-home :is(.csb-cn-presentation, .csb-pq-presentation) p:not(#csb) { font-size: 15.5px; line-height: 1.6; }
	.csb-liste-simple li { font-size: 15px; }
}

/* Hero accueil (6 nov. 2026) : surtitre plus petit et hauteur réduite d'environ 10 % (avant : 805 / 689 / 659 / 578 px à 1920 / 1440 / 1024 / 390 px). */
body.csb-home .csb-hero .hero-content-1 .subtitle span:not(#csb) { font-size: 11.5px; letter-spacing: .1em; }
body.csb-home .csb-hero .hero-content-1 .subtitle::before { width: 26px; }
body.csb-home .csb-hero .hero-side { padding-top: 180px; padding-bottom: 80px; }
@media (min-width: 1200px) and (max-width: 1700px) { body.csb-home .csb-hero .hero-side { padding-top: 125px; padding-bottom: 33px; } }
@media (min-width: 992px) and (max-width: 1199px) { body.csb-home .csb-hero .hero-side { padding-top: 140px; padding-bottom: 59px; } }
@media (min-width: 768px) and (max-width: 991px) { body.csb-home .csb-hero .hero-side { padding-top: 145px; padding-bottom: 40px; } }
@media (max-width: 767px) {
	body.csb-home .csb-hero .hero-content-1 .subtitle span:not(#csb) { font-size: 11px; letter-spacing: .07em; }
	body.csb-home .csb-hero .hero-side { padding-top: 84px; padding-bottom: 40px; }
}

/* « Ce que nous faisons » : grille d'une colonne sur mobile (< 768 px) au lieu du slider ; flèches et puces masquées (6 nov. 2026) */
@media (max-width: 767px) {
	.csb-fz-slider .swiper-wrapper { display: grid; grid-template-columns: 1fr; gap: 16px; width: auto; height: auto; transform: none !important; }
	.csb-fz-slider .swiper-slide { width: auto !important; height: auto; margin: 0 !important; }
	.csb-fz-slider .csb-fz-bas { display: none; }
}

/* Titres de section de l'accueil en noir (6 nov. 2026). Hero et section Contact (fond sombre) gardent leur titre blanc. */
body.csb-home :is(.csb-ap, .csb-acces, .csb-actus, .csb-fz, .csb-chiffres, .csb-info, .csb-evt, .csb-ev, .csb-evh, .csb-faq, .csb-pq, .csb-pr, .csb-rea, .csb-videos) .common-title h2:not(#csb) { color: #111; }

/* Titres des cartes de formation (« Ce que nous faisons ») en noir (6 nov. 2026) */
body.csb-home .csb-fz-titre:not(#csb), body.csb-home .csb-fz-titre a:not(#csb) { color: #111; }

/* Nos produits : bannière photographique d'appel à l'action (6 nov. 2026). Remplace l'ancienne composition en deux colonnes (.csb-pr-*). */
body.csb-home .csb-pb { padding: 0; background: #fff; }
.csb-pb-banniere { position: relative; display: flex; align-items: center; width: 100%; min-height: clamp(360px, 31vw, 450px); overflow: hidden; border-radius: 0; background: #0b3a35; isolation: isolate; }
.csb-pb-photo { position: absolute; top: 0; right: 0; z-index: 0; width: 74%; height: 100%; object-fit: cover; object-position: 50% 38%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.csb-pb-voile { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 53, 48, .94) 0%, rgba(0, 53, 48, .88) 34%, rgba(0, 53, 48, .55) 56%, rgba(0, 53, 48, .12) 80%, rgba(0, 53, 48, .04) 100%); }
.csb-pb-contenu { position: relative; z-index: 2; box-sizing: border-box; width: 100%; max-width: 780px; padding: clamp(28px, 3.2vw, 40px) clamp(24px, 5.5vw, 90px); }
body.csb-home .csb-pb-surtitre:not(#csb) { margin: 0 0 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--a-mil); }
body.csb-home .csb-pb h2:not(#csb) { margin: 0 0 14px; font-size: clamp(26px, 19px + 1.3vw, 36px); line-height: 1.15; color: #fff; }
body.csb-home .csb-pb-texte:not(#csb) { margin: 0 0 22px; max-width: 60ch; font-size: clamp(15px, 14px + .25vw, 17px); line-height: 1.65; color: rgba(255, 255, 255, .88); }
.csb-pb-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 26px; border-radius: 100px; background: var(--a-mil); color: var(--a-foret); font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: background-color .25s ease, transform .25s ease; }
.csb-pb-btn i { font-size: 14px; transition: transform .25s ease; }
.csb-pb-btn:hover, .csb-pb-btn:focus-visible { background: #fff; color: var(--a-foret); }
.csb-pb-btn:hover i, .csb-pb-btn:focus-visible i { transform: translateX(4px); }
.csb-pb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 991px) {
	.csb-pb-banniere { min-height: 0; }
	.csb-pb-photo { width: 100%; object-position: 55% 35%; -webkit-mask-image: none; mask-image: none; }
	.csb-pb-voile { background: linear-gradient(90deg, rgba(0, 53, 48, .93) 0%, rgba(0, 53, 48, .8) 55%, rgba(0, 53, 48, .45) 100%); }
	.csb-pb-contenu { max-width: 640px; }
}
@media (max-width: 575px) {
	.csb-pb-voile { background: linear-gradient(180deg, rgba(0, 53, 48, .62) 0%, rgba(0, 53, 48, .82) 42%, rgba(0, 53, 48, .94) 100%); }
	.csb-pb-contenu { padding: 36px 22px 32px; }
	.csb-pb-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .csb-pb-btn, .csb-pb-btn i { transition: none; } .csb-pb-btn:hover i, .csb-pb-btn:focus-visible i { transform: none; } }

/* Vidéos : titres des cartes en noir (demande du 6 nov. 2026) */
body.csb-home .csb-video-card h3:not(#csb), body.csb-home .csb-video-card h3 a:not(#csb) { color: #111; }

/* Surtitres de l'accueil : 2 px de moins (demande du 6 nov. 2026) : étiquettes de section 13 -> 11 px, catégorie des cartes 12 -> 10 px, bannière produits 12,5 -> 10,5 px */
body.csb-home .common-subtitle span:not(#csb) { font-size: 11px; }
body.csb-home .csb-fz-meta:not(#csb) { font-size: 10px; }
body.csb-home .csb-pb-surtitre:not(#csb) { font-size: 10.5px; }

/* ===== Passe UI/UX (6 nov. 2026, audit ui-ux-pro-max) : lisibilité et zones tactiles. Aucune animation retirée. ===== */
/* Texte : rien sous 12 px (métadonnées, statuts, surtitres) */
body.csb-home :is(.csb-fz-meta, .csb-ev-statut, .csb-pb-surtitre, .csb-ev-quand, .csb-ev-lieu):not(#csb) { font-size: max(12px, 1em); }
body.csb-home .csb-fz-meta:not(#csb), body.csb-home .csb-ev-statut:not(#csb) { font-size: 12px; }
body.csb-home .csb-pb-surtitre:not(#csb) { font-size: 12px; }
/* Zones tactiles : 44 px minimum (boutons, liens du pied de page, réseaux sociaux, sélecteur de langue) */
.e-primary-btn, .csb-btn-outline { min-height: 44px; }
.footer-widget ul li a, .footer-bottom-menu a, .csb-footer-contact a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-widget .social-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.csb-langue-liste a { min-height: 44px; display: flex; align-items: center; }
.csb-video-play { min-width: 44px; min-height: 44px; }
/* Focus clavier visible et cohérent sur toute la page d'accueil */
body.csb-home :is(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--a-foret); outline-offset: 3px; }
body.csb-home :is(.csb-hero, .csb-pb, .csb-footer, footer) :is(a, button):focus-visible { outline-color: #fff; }
/* Mobile : cartes de formations moins hautes (page plus courte), médias au format 16:9 sans déformation */
@media (max-width: 767px) {
	.csb-fz-media { aspect-ratio: 16 / 9; }
}

/* Types de formation : pictogrammes au-dessus du trait jaune (6 nov. 2026). Monochromes, trait fin, sans fond ni ombre. Ordre : icône, trait, titre, texte, lien. */
.csb-home .csb-rea-icone { order: -1; display: block; flex: none; width: 28px; height: 28px; margin: 0 0 14px; color: var(--a-foret); }
.csb-home .csb-rea-carte::before { margin-top: 0; }