/* ============================================================
   instant Z — Adaptation du thème Divi au design 2026
   (source : refonte instantz.org "hilarious-horizon")
   Chargée après style.css — voir functions.php.

   Tokens : teal #005e62 / #207f7f, gold #ffcc01,
   Open Sans (texte) + Ubuntu (titres)
   ============================================================ */

:root {
	--iz-primary: #005e62;
	--iz-primary-mid: #207f7f;
	--iz-accent: #ffcc01;
	--iz-accent-hover: #e6b800;
	--iz-bg-alt: #f7f7f7;
	--iz-bg-dark: #003e42;
	--iz-text: #2d2d2d;
	--iz-text-light: #666666;
	--iz-border: #e0e0e0;
	--iz-radius: 4px;
	--iz-radius-lg: 8px;
	--iz-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--iz-font-heading: 'Ubuntu', 'Open Sans', sans-serif;
}

/* ============================================================
   1. TYPOGRAPHIE
   (couleur/police des titres aussi réglées dans le Customizer ;
   les réglages par module dans le Visual Builder restent prioritaires)
   ============================================================ */

body {
	font-family: var(--iz-font-sans);
	color: var(--iz-text);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--iz-font-heading) !important;
	font-weight: 700 !important;
	line-height: 1.25;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); text-transform: none; }
h2 { font-size: clamp(1.375rem, 3vw, 1.875rem); }
h3 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }

/* Sous-titres (ex-police manuscrite "stars", abandonnée dans le design) */
h2 .soustitre, h2.soustitre, h2.western {
	font-family: var(--iz-font-sans) !important;
	font-weight: 400 !important;
	color: var(--iz-text-light) !important;
	letter-spacing: 0 !important;
	line-height: 1.4 !important;
	text-transform: none;
	display: block;
}
h2 .soustitre { font-size: 0.6em !important; margin-top: 0.3em; }
h2.soustitre, h2.western { font-size: 1.25rem !important; }

/* Liens dans le contenu (hors liens-boutons : .btn, boutons Divi/Gutenberg) */
.et_pb_text a:not(.btn):not(.et_pb_button):not(.wp-block-button__link) {
	color: var(--iz-primary-mid);
	text-decoration: underline;
	transition: color 0.2s ease;
}
.et_pb_text a:not(.btn):not(.et_pb_button):not(.wp-block-button__link):hover { color: var(--iz-primary); }
.et_pb_text.et_pb_bg_layout_dark a:not(.btn):not(.et_pb_button):not(.wp-block-button__link) { color: var(--iz-accent); }

/* Liens-boutons .btn dans les textes : jamais soulignés, texte foncé sur gold */
#page-container .et_pb_text a.btn {
	color: var(--iz-primary);
	text-decoration: none;
	font-weight: 700;
}

/* Citations */
#page-container blockquote {
	border-left: 4px solid var(--iz-accent);
	margin: 1.5rem 0;
	padding: 0.75rem 1.5rem;
	background: var(--iz-bg-alt);
	border-radius: 0 var(--iz-radius) var(--iz-radius) 0;
	font-style: italic;
	color: var(--iz-text-light);
}

/* Tableaux dans le contenu */
#page-container .et_pb_text table { border: none; }
#page-container .et_pb_text th {
	background: var(--iz-primary);
	color: #fff;
	padding: 0.75rem 1rem;
	text-align: left;
}
#page-container .et_pb_text td {
	padding: 0.6rem 1rem;
	border: none;
	border-bottom: 1px solid var(--iz-border);
}
#page-container .et_pb_text tr:nth-child(even) td { background: var(--iz-bg-alt); }

/* ============================================================
   2. BOUTONS
   (les boutons personnalisés module par module gardent leurs réglages)
   ============================================================ */

body #page-container .et_pb_button {
	background-color: var(--iz-accent);
	color: var(--iz-primary) !important;
	border: none;
	border-radius: var(--iz-radius);
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.65em 1.6em !important;
	transition: all 0.2s ease;
}
body #page-container .et_pb_button:hover {
	background-color: var(--iz-accent-hover);
	color: var(--iz-primary) !important;
	padding: 0.65em 1.6em !important;
}

/* Variantes contour (classes à poser sur le module Bouton) */
html body #page-container .iz-btn-outline.et_pb_button,
html body #page-container .iz-btn-outline-teal.et_pb_button {
	padding: calc(0.65em - 2px) calc(1.6em - 2px) !important;
}
body #page-container .iz-btn-outline.et_pb_button {
	background-color: transparent;
	border: 2px solid #ffffff;
	color: #ffffff !important;
}
body #page-container .iz-btn-outline.et_pb_button:hover {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: #ffffff;
}
body #page-container .iz-btn-outline-teal.et_pb_button {
	background-color: transparent;
	border: 2px solid var(--iz-primary);
	color: var(--iz-primary) !important;
}
body #page-container .iz-btn-outline-teal.et_pb_button:hover {
	background-color: var(--iz-primary);
	color: #ffffff !important;
}
/* pas de flèche Divi au survol */
body #page-container .et_pb_button:after,
body #page-container .et_pb_button:hover:after { display: none !important; }

/* Boutons Gutenberg (Académie, etc.) */
#page-container .wp-block-button__link,
.wp-block-button__link {
	background-color: var(--iz-accent) !important;
	color: var(--iz-primary) !important;
	border: none !important;
	border-radius: var(--iz-radius) !important;
	font-weight: 700;
	font-size: 1rem;
	padding: 0.65em 1.6em;
}
.wp-block-button__link:hover { background-color: var(--iz-accent-hover) !important; }

/* Gravity Forms */
body .gform_wrapper .gform_footer input[type=submit] {
	background-color: var(--iz-accent);
	color: var(--iz-primary);
	border: none;
	border-radius: var(--iz-radius);
	font-weight: 700;
	font-size: 1rem;
	padding: 0.65em 1.6em;
}
body .gform_wrapper .gform_footer input[type=submit]:hover {
	background-color: var(--iz-accent-hover);
}

/* Boutons du calendrier de formations (aiz) */
.aiz_buttonbox a,
.aiz_highlight_content a,
.btnbox a {
	color: var(--iz-primary) !important;
	font-weight: 700;
	border-radius: var(--iz-radius) !important;
	padding: 0.4em 1em;
}

/* ============================================================
   2bis. ARRONDIS — cohérence avec le design (--radius-lg : 8px)
   Scopé à la zone de contenu (.et-l--post), pas au header/footer.
   ============================================================ */

/* Images (module Image, images des textes et du corps des articles) */
#et-boc :is(.et-l--post, .et-l--body) .et_pb_image .et_pb_image_wrap,
#et-boc :is(.et-l--post, .et-l--body) .et_pb_image img,
#et-boc :is(.et-l--post, .et-l--body) .et_pb_text img,
#et-boc :is(.et-l--post, .et-l--body) .et_pb_post_content img,
#et-boc :is(.et-l--post, .et-l--body) .entry-content img {
	border-radius: var(--iz-radius-lg);
}

/* Modules-cartes : sliders, vidéos, CTA, encarts de pôles, articles de blog */
#et-boc :is(.et-l--post, .et-l--body) .et_pb_slider,
#et-boc :is(.et-l--post, .et-l--body) .et_pb_video,
#et-boc :is(.et-l--post, .et-l--body) .et_pb_video .et_pb_video_box,
#et-boc :is(.et-l--post, .et-l--body) .et_pb_video iframe,
#et-boc :is(.et-l--post, .et-l--body) .et_pb_post_content iframe,
#et-boc :is(.et-l--post, .et-l--body) .et_pb_cta,
#et-boc :is(.et-l--post, .et-l--body) .et_pb_promo,
#et-boc :is(.et-l--post, .et-l--body) .et_pb_blurb .et_pb_image_wrap,
#et-boc :is(.et-l--post, .et-l--body) .et_pb_blog_grid .et_pb_post,
#et-boc :is(.et-l--post, .et-l--body) .et_pb_post .entry-featured-image-url img,
#et-boc :is(.et-l--post, .et-l--body) .encart-pole {
	border-radius: var(--iz-radius-lg);
	overflow: hidden;
}

/* Témoignages : arrondi sans overflow:hidden (le portrait déborde du cadre) */
#et-boc :is(.et-l--post, .et-l--body) .et_pb_testimonial {
	border-radius: var(--iz-radius-lg);
}

/* Membres de l'équipe */
#et-boc :is(.et-l--post, .et-l--body) .et_pb_team_member .et_pb_team_member_image,
#et-boc :is(.et-l--post, .et-l--body) .et_pb_team_member .et_pb_team_member_image img {
	border-radius: var(--iz-radius-lg);
	overflow: hidden;
}

/* Photos des pages auteur */
.author .photo-membre { border-radius: var(--iz-radius-lg); }

/* Images des articles de l'Académie : arrondi + ombre douce
   (remplace la box-shadow dure définie dans style.css) */
#eckb-article-content-body figure img {
	border-radius: var(--iz-radius-lg);
	border: 1px solid var(--iz-border);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Champs de formulaire (Gravity Forms, newsletter, recherche) */
#page-container .gform_wrapper input[type="text"],
#page-container .gform_wrapper input[type="email"],
#page-container .gform_wrapper input[type="tel"],
#page-container .gform_wrapper input[type="number"],
#page-container .gform_wrapper select,
#page-container .gform_wrapper textarea,
#page-container .tnp-field input[type="text"],
#page-container .tnp-field input[type="email"],
#page-container .tnp-field select,
#page-container input.et_pb_s {
	border-radius: var(--iz-radius);
	border: 1px solid var(--iz-border);
}

/* ============================================================
   3. HEADER (layouts Theme Builder — re-skin CSS uniquement,
   le header reste éditable dans le Theme Builder)
   ============================================================ */

/* Header collant, comme le design.
   Divi pose un overflow sur #page-container qui casse position:sticky ;
   le body garde overflow-x:hidden donc rien ne déborde. */
#page-container { overflow: visible !important; }

#page-container header.et-l--header {
	position: sticky;
	top: 0;
	z-index: 9990;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
/* Ligne d'accent jaune partielle, en haut à gauche (comme le design Astro) */
#page-container header.et-l--header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 240px;
	height: 3px;
	background: var(--iz-accent);
	z-index: 9999;
}
body.admin-bar #page-container header.et-l--header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar #page-container header.et-l--header { top: 46px; }
}

/* --- Barre du haut (réseaux sociaux) : fond sombre, icônes discrètes --- */
#et-boc .et-l--header .et_pb_section_0_tb_header.et_pb_section {
	background-color: var(--iz-bg-dark) !important;
	padding: 0 !important;
}
#et-boc .et-l--header .et_pb_row_0_tb_header.et_pb_row {
	width: 100% !important;
	max-width: 1200px;
	padding: 5px 1.5rem 3px !important;
	margin: 0 auto;
}
#et-boc .et-l--header .et_pb_social_media_follow .et_pb_social_icon a.icon {
	background-color: transparent !important;
	width: 24px !important;
	height: 24px !important;
	margin-bottom: 0;
}
#et-boc .et-l--header .et_pb_social_media_follow .et_pb_social_icon a.icon:before {
	color: rgba(255, 255, 255, 0.65) !important;
	font-size: 15px;
	line-height: 24px;
	width: 24px;
	height: 24px;
	transition: color 0.2s ease;
}
#et-boc .et-l--header .et_pb_social_media_follow .et_pb_social_icon a.icon:hover:before {
	color: var(--iz-accent) !important;
}
#et-boc .et-l--header .et_pb_social_media_follow { margin-bottom: 0 !important; }

/* --- Barre principale : teal uni (remplace le dégradé), hauteur réduite --- */
#et-boc .et-l--header .et_pb_section_1_tb_header.et_pb_section {
	background-color: var(--iz-primary) !important;
	background-image: none !important;
	padding: 0 !important;
}
#et-boc .et-l--header .et_pb_row_1_tb_header.et_pb_row {
	display: flex;
	align-items: center;
	width: 100% !important;
	max-width: 1200px;
	padding: 0 1.5rem !important;
	margin: 0 auto;
	min-height: 64px;
}
#et-boc .et-l--header .et_pb_row_1_tb_header .et_pb_column_1_tb_header {
	width: auto !important;
	flex: 0 0 auto;
	margin-right: 2rem;
}
#et-boc .et-l--header .et_pb_row_1_tb_header .et_pb_column_2_tb_header {
	width: auto !important;
	flex: 1 1 auto;
	min-width: 0;
}

/* Logo : taille contenue dans la barre (plus de débordement) */
#et-boc .et-l--header .et_pb_image_0_tb_header {
	margin: 6px 0 !important;
	width: auto !important;
	max-width: none !important;
}
#et-boc .et-l--header .et_pb_image_0_tb_header img {
	height: 52px !important;
	width: auto !important;
}

/* --- Navigation principale --- */
#et-boc .et-l--header .et_pb_menu { margin-bottom: 0 !important; }
#et-boc .et-l--header .et_pb_menu.et_pb_menu ul.et-menu > li > a {
	color: rgba(255, 255, 255, 0.9) !important;
	font-family: var(--iz-font-sans);
	font-size: 14px !important;
	font-weight: 600 !important;
	text-transform: none;
	transition: color 0.2s ease;
}
#et-boc .et-l--header .et_pb_menu.et_pb_menu ul.et-menu > li > a:hover,
#et-boc .et-l--header .et_pb_menu.et_pb_menu ul.et-menu > li.current-menu-item > a,
#et-boc .et-l--header .et_pb_menu.et_pb_menu ul.et-menu > li.current-menu-ancestor > a {
	color: var(--iz-accent) !important;
	opacity: 1 !important;
}

/* Contact = bouton d'appel à l'action (comme le design) */
#et-boc .et-l--header .et_pb_menu.et_pb_menu ul.et-menu > li.menu-item-8236 > a {
	background: var(--iz-accent);
	color: var(--iz-primary) !important;
	border-radius: var(--iz-radius);
	padding: 9px 16px !important;
	font-weight: 700 !important;
	margin-left: 8px;
	margin-top: -8px;
}
#et-boc .et-l--header .et_pb_menu.et_pb_menu ul.et-menu > li.menu-item-8236 > a:hover {
	background: var(--iz-accent-hover);
	color: var(--iz-primary) !important;
}

/* Dons : reste en évidence (gold) */
#et-boc .et-l--header .et_pb_menu.et_pb_menu ul.et-menu > li.menu-item-11089 > a {
	color: var(--iz-accent) !important;
	font-weight: 700 !important;
}

/* --- Sous-menus : panneau blanc, ombre douce (comme le design) --- */
#et-boc .et-l--header .et_pb_menu.et_pb_menu .nav li ul.sub-menu {
	background-color: #ffffff !important;
	border: none !important;
	border-radius: var(--iz-radius-lg);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	padding: 8px 0 !important;
	width: 230px;
}
#et-boc .et-l--header .et_pb_menu.et_pb_menu .nav li ul.sub-menu li a {
	color: var(--iz-text) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	padding: 8px 16px !important;
	width: 198px;
	transition: all 0.15s ease;
}
#et-boc .et-l--header .et_pb_menu.et_pb_menu .nav li ul.sub-menu li a:hover {
	background-color: var(--iz-bg-alt);
	color: var(--iz-primary) !important;
	opacity: 1 !important;
}
#et-boc .et-l--header .et_pb_menu.et_pb_menu .nav li ul.sub-menu li.current-menu-item a {
	color: var(--iz-primary) !important;
	font-weight: 700 !important;
}

/* Second menu "pôles" (ligne dorée sous la nav) : absent du design 2026,
   les pôles sont dans le menu déroulant. Toujours présent dans le Theme
   Builder si besoin de le réactiver. */
#et-boc .et-l--header .et_pb_menu_1_tb_header { display: none !important; }

/* --- Menu mobile --- */
#et-boc .et-l--header .et_pb_menu .et_mobile_menu,
#et-boc .et-l--header .et_pb_menu .et_mobile_menu ul {
	background-color: var(--iz-primary) !important;
	border-radius: 0 0 var(--iz-radius-lg) var(--iz-radius-lg);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	border-top: none;
}
#et-boc .et-l--header .et_pb_menu .et_mobile_menu li a {
	color: rgba(255, 255, 255, 0.9) !important;
	border-color: rgba(255, 255, 255, 0.12);
}
#et-boc .et-l--header .et_pb_menu .et_mobile_menu li a:hover {
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--iz-accent) !important;
	opacity: 1 !important;
}

@media (max-width: 980px) {
	#et-boc .et-l--header .et_pb_row_1_tb_header.et_pb_row {
		min-height: 56px;
		padding: 0 1rem !important;
	}
	#et-boc .et-l--header .et_pb_image_0_tb_header img { height: 44px !important; }

	/* Logo en miroir du hamburger : colonne pleine hauteur, logo centré
	   verticalement (mêmes marges haut/bas) et même retrait à gauche que le
	   retrait du hamburger à droite (padding 1rem + 1vw du menu + 6px). */
	#et-boc .et-l--header .et_pb_row_1_tb_header .et_pb_column_1_tb_header {
		margin-right: auto;
		margin-bottom: 0 !important;   /* supprime l'espacement de colonne Divi */
		align-self: center;
		margin-left: calc(1vw + 6px);
	}
	#et-boc .et-l--header .et_pb_image_0_tb_header,
	#et-boc .et-l--header .et_pb_image_0_tb_header .et_pb_image_wrap {
		margin: 0 !important;
	}
}

/* ============================================================
   3bis. COMPOSANTS PAGE D'ACCUEIL (maquette 2026)
   Classes posées sur les modules Divi (champ "Classe CSS") —
   tout le contenu reste éditable dans le Visual Builder.
   ============================================================ */

/* --- Hero (fond teal profond, titre en 3 temps, visuel à droite) --- */
#et-boc .et-l--post .accueil-hero.et_pb_section {
	background: radial-gradient(125% 130% at 88% 8%, #0b7074 0%, #005e62 40%, #003e42 100%) !important;
	position: relative;
	overflow: hidden;
}
.accueil-hero .iz-eyebrow {
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--iz-accent);
	font-weight: 600;
	margin-bottom: 16px;
}
.accueil-hero h1 {
	color: #fff;
	font-size: clamp(1.9rem, 3.6vw, 2.6rem);
	line-height: 1.18;
	padding-bottom: 0;
	margin-bottom: 22px;
}
.accueil-hero h1 em {
	color: var(--iz-accent);
	font-style: italic;
	font-weight: 700;
}
.accueil-hero .iz-hero-lead {
	color: rgba(255, 255, 255, 0.85);
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	line-height: 1.7;
	max-width: 56ch;
	margin-bottom: 28px;
}
.accueil-hero .et_pb_text { margin-bottom: 0 !important; }
.accueil-hero .et_pb_button_module_wrapper {
	display: inline-block;
	margin-right: 14px;
	margin-bottom: 10px;
}
.iz-micro { font-size: 13px !important; opacity: 0.75; }
.accueil-hero .iz-micro {
	margin-top: 18px;
	margin-bottom: 0 !important;
	color: rgba(255, 255, 255, 0.7);
}

/* Visuel du hero : photo arrondie, ombre portée */
#et-boc .et-l--post .accueil-hero .iz-hero-img { margin-bottom: 0 !important; text-align: center; }
#et-boc .et-l--post .accueil-hero .iz-hero-img .et_pb_image_wrap {
	border-radius: var(--iz-radius-lg);
	overflow: hidden;
}
#et-boc .et-l--post .accueil-hero .iz-hero-img img {
	max-height: 460px;
	width: auto;
	border-radius: var(--iz-radius-lg);
	filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
}

/* Contraste du hero (sélecteurs très spécifiques : Divi 5 génère un CSS
   par module qui écrase les règles génériques) */
/* Titre : "Coopérer / Décider / Diriger" en blanc, "sans…" en doré */
body #page-container .et-l--post .accueil-hero h1 { color: #ffffff !important; }
body #page-container .et-l--post .accueil-hero h1 em { color: var(--iz-accent) !important; }

/* Bouton principal "Diagnostic gratuit" : fond doré, texte turquoise */
body #page-container .et-l--post .accueil-hero .et_pb_button:not(.iz-btn-outline),
body #page-container .et-l--post .accueil-hero .et_pb_button:not(.iz-btn-outline):hover {
	background-color: var(--iz-accent) !important;
	border-color: var(--iz-accent) !important;
	color: var(--iz-primary) !important;
}

/* Bouton secondaire "Voir les formations" : fond blanc, texte turquoise */
body #page-container .et-l--post .accueil-hero .et_pb_button.iz-btn-outline,
body #page-container .et-l--post .accueil-hero .et_pb_button.iz-btn-outline:hover {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	color: var(--iz-primary) !important;
}

/* Aucun mouvement au survol : on supprime la flèche Divi et on fige le padding
   (le padding au survol = padding normal de CHAQUE bouton) + pas de transform.
   Spécifique au hero pour passer devant le CSS-par-module de Divi 5. */
body #page-container .et-l--post .accueil-hero .et_pb_button::after,
body #page-container .et-l--post .accueil-hero .et_pb_button:hover::after {
	display: none !important;
}
body #page-container .et-l--post .accueil-hero .et_pb_button,
body #page-container .et-l--post .accueil-hero .et_pb_button:hover {
	padding: 0.65em 1.6em !important;
	transform: none !important;
}
body #page-container .et-l--post .accueil-hero .et_pb_button.iz-btn-outline,
body #page-container .et-l--post .accueil-hero .et_pb_button.iz-btn-outline:hover {
	padding: calc(0.65em - 2px) calc(1.6em - 2px) !important;
}

/* Hero responsive : on resserre, le visuel passe sous le texte */
@media (max-width: 980px) {
	#et-boc .et-l--post .accueil-hero .et_pb_row {
		padding-top: 44px !important;
		padding-bottom: 44px !important;
	}
	#et-boc .et-l--post .accueil-hero .iz-hero-img { margin-top: 32px !important; }
}

/* --- Rangées 2 colonnes avec centrage vertical (hero, équipe, autodiag) --- */
#et-boc .et-l--post .iz-row-center.et_pb_row { display: flex; align-items: center; flex-wrap: wrap; }
@media (max-width: 980px) {
	#et-boc .et-l--post .iz-row-center.et_pb_row { display: block; }
}

/* --- Rangées de cartes : hauteurs égales, empilées en mobile --- */
#et-boc .et-l--post .iz-cards-row { display: flex; flex-wrap: wrap; }
#et-boc .et-l--post .iz-cards-row .et_pb_column { display: flex; flex-direction: column; }
#et-boc .et-l--post .iz-cards-row .et_pb_column > .et_pb_module { flex: 1 1 auto; }

/* --- Cartes "portes" (segmentation) --- */
#et-boc .et-l--post .iz-porte {
	background: #fff;
	border: 1px solid var(--iz-border);
	border-radius: var(--iz-radius-lg);
	padding: 36px 32px !important;
}
.iz-porte h3 { font-size: 22px !important; line-height: 1.3; padding-bottom: 14px; }
.iz-porte ul { list-style: none !important; padding: 0 0 6px !important; }
.iz-porte li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 10px;
	color: var(--iz-text-light);
}
.iz-porte li::before { content: "—"; position: absolute; left: 0; color: var(--iz-primary-mid); }
.iz-porte .pivot { font-weight: 600; color: var(--iz-text); }
.iz-porte a, .iz-formation a, .iz-lien-fort a {
	font-weight: 700;
	text-decoration: none !important;
}
.iz-porte a:hover, .iz-formation a:hover, .iz-lien-fort a:hover { text-decoration: underline !important; }

/* --- Étapes (section révélation, fond teal) --- */
#et-boc .et-l--post .iz-etape {
	border-top: 3px solid var(--iz-accent);
	padding-top: 18px !important;
}
.iz-etape h4 { font-size: 18px !important; padding-bottom: 6px; }
.iz-etape p { font-size: 15px; opacity: 0.85; }
.iz-methode { font-size: 15px; opacity: 0.85; }
.iz-methode a { color: #fff !important; text-decoration: underline; }

/* --- Encadré autodiagnostic --- */
#et-boc .et-l--post .iz-autodiag.et_pb_row {
	background: var(--iz-bg-alt);
	border-radius: 12px;
	padding: 48px !important;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
@media (max-width: 980px) {
	#et-boc .et-l--post .iz-autodiag.et_pb_row { display: block; padding: 32px !important; }
}
.iz-autodiag .et_pb_button_module_wrapper { margin-bottom: 0; }
.iz-checks ul { list-style: none !important; padding: 14px 0 0 !important; }
.iz-checks li { position: relative; padding-left: 24px; margin-bottom: 8px; color: var(--iz-text-light); }
.iz-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--iz-primary-mid); font-weight: 700; }

/* --- Récits (preuve) --- */
#et-boc .et-l--post .iz-recit {
	border: 1px solid var(--iz-border);
	border-radius: var(--iz-radius-lg);
	padding: 32px !important;
}
.iz-recit .tag {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--iz-primary-mid);
	font-weight: 600;
	margin-bottom: 12px;
}
#page-container .iz-recit blockquote {
	border: none;
	background: none;
	padding: 0;
	margin: 0 0 16px;
	font-size: 17px;
	line-height: 1.55;
	font-style: normal;
	color: var(--iz-text);
}
.iz-recit .resultat { font-weight: 600; font-size: 15px; }
.iz-recit .source { font-size: 14px; color: var(--iz-text-light); margin-top: 8px; }

/* --- Logos clients (texte) --- */
.iz-logos .logos-intro { font-size: 14px; color: var(--iz-text-light); margin-bottom: 14px; }
.iz-logos .logos span {
	display: inline-block;
	font-size: 14px;
	color: var(--iz-text-light);
	border: 1px solid var(--iz-border);
	border-radius: 6px;
	padding: 8px 14px;
	margin: 0 10px 10px 0;
}

/* --- Cartes formations --- */
#et-boc .et-l--post .iz-formation {
	background: #fff;
	border: 1px solid var(--iz-border);
	border-radius: var(--iz-radius-lg);
	padding: 28px !important;
}
.iz-formation .date {
	font-size: 13px;
	font-weight: 700;
	color: var(--iz-primary-mid);
	letter-spacing: 0.5px;
	margin-bottom: 10px;
}
.iz-formation h4 { font-size: 17px !important; line-height: 1.35; padding-bottom: 6px; }
.iz-formation p { font-size: 14px; color: var(--iz-text-light); }

/* ============================================================
   4. FOOTER (layout Theme Builder — re-skin CSS uniquement)
   ============================================================ */

/* NB : on cible le footer par classes stables (.et_pb_section/row/column,
   .menu-bas, le bloc qui contient le logo via :has(img)) et NON par les index
   numériques générés par Divi (et_pb_text_2_tb_footer, …) : ces index varient
   d'un environnement à l'autre selon le Theme Builder (local ≠ staging). */
#et-boc .et-l--footer .et_pb_section {
	background-color: var(--iz-primary) !important;
	padding-top: 3rem;
	padding-bottom: 1rem;
}
#et-boc .et-l--footer .et_pb_text { color: rgba(255, 255, 255, 0.85); }

/* Marges latérales généreuses et adaptatives : le contenu ne colle plus aux
   bords, y compris quand la fenêtre est juste sous la largeur max (≈1140px).
   Le fond teal reste pleine largeur (c'est le padding du contenu qui bouge). */
#et-boc .et-l--footer .et_pb_row {
	padding-left: clamp(1.5rem, 5vw, 5rem) !important;
	padding-right: clamp(1.5rem, 5vw, 5rem) !important;
}

#et-boc .et-l--footer h3 {
	color: var(--iz-accent) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 1rem;
	padding-bottom: 0;
}

#et-boc .et-l--footer .et_pb_text ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0;
}
#et-boc .et-l--footer .et_pb_text li {
	margin-bottom: 0.5rem;
	font-size: 14px;
}
#et-boc .et-l--footer .et_pb_text a {
	color: rgba(255, 255, 255, 0.75) !important;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.2s ease;
}
#et-boc .et-l--footer .et_pb_text a:hover { color: var(--iz-accent) !important; }
#et-boc .et-l--footer .et_pb_text a strong { color: #ffffff; font-weight: 700; }
#et-boc .et-l--footer .et_pb_text a:hover strong { color: var(--iz-accent); }

/* Icônes sociales : discrètes, hover gold */
#et-boc .et-l--footer .et_pb_social_media_follow .et_pb_social_icon a.icon {
	background-color: transparent !important;
}
#et-boc .et-l--footer .et_pb_social_media_follow .et_pb_social_icon a.icon:before {
	color: rgba(255, 255, 255, 0.6) !important;
	transition: color 0.2s ease;
}
#et-boc .et-l--footer .et_pb_social_media_follow .et_pb_social_icon a.icon:hover:before {
	color: var(--iz-accent) !important;
}

/* Logo + tagline (le seul module texte du footer qui contient une image) :
   alignés à droite comme les icônes sociales (desktop). */
#et-boc .et-l--footer .et_pb_text:has(img),
#et-boc .et-l--footer .et_pb_text:has(img) p {
	text-align: right;
}
#et-boc .et-l--footer .et_pb_text:has(img) img {
	margin-left: auto;
	margin-right: 0;
}

/* --- Footer en mobile : colonnes empilées et centrées (chaque bloc est
   centré sous le précédent), mais le texte garde son alignement à gauche --- */
@media (max-width: 980px) {
	/* Colonnes empilées : une par ligne sur tout le mobile (Divi les met
	   sinon 2 par ligne entre 768 et 980px). Chaque bloc est centré. */
	#et-boc .et-l--footer .et_pb_column {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		float: none;
		display: block;
		text-align: center;     /* centre les blocs inline-block ci-dessous */
		margin-bottom: 2.5rem;
	}
	#et-boc .et-l--footer .et_pb_column:last-child {
		margin-bottom: 0;
	}
	/* La colonne vide (simple espace en desktop) reste masquée en mobile */
	#et-boc .et-l--footer .et_pb_column.et_pb_column_empty {
		display: none !important;
	}

	/* Listes de liens (Pôles, Navigation) : le bloc se centre dans la colonne,
	   mais le texte interne reste aligné à gauche. */
	#et-boc .et-l--footer .menu-bas {
		display: inline-block;
		text-align: left;
	}

	/* Colonne logo : bloc de marque (logo + slogan + icônes) entièrement centré. */
	#et-boc .et-l--footer .et_pb_text:has(img),
	#et-boc .et-l--footer .et_pb_text:has(img) p {
		text-align: center;
	}
	#et-boc .et-l--footer .et_pb_text:has(img) img {
		margin-left: auto;
		margin-right: auto;
	}
	#et-boc .et-l--footer .et_pb_social_media_follow {
		text-align: center;
	}
	#et-boc .et-l--footer .et_pb_social_media_follow .et_pb_social_media_follow_network {
		float: none;
		display: inline-block;
	}
}

/* Rangée du bas (mentions légales = dernière rangée du footer) */
#et-boc .et-l--footer .et_pb_row:last-child {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 1rem !important;
	margin-top: 1rem;
}
#et-boc .et-l--footer .et_pb_row:last-child .et_pb_text,
#et-boc .et-l--footer .et_pb_row:last-child .et_pb_text p,
#et-boc .et-l--footer .et_pb_row:last-child .et_pb_text span,
#et-boc .et-l--footer .et_pb_row:last-child .et_pb_text a {
	color: rgba(255, 255, 255, 0.55) !important;
	font-size: 13px !important;
}
#et-boc .et-l--footer .et_pb_row:last-child .et_pb_text a:hover {
	color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================================
   5. LOGOS CLIENTS — bandeau défilant (marquee)
   Style du markup « clients-section / marquee » déjà présent sur la
   page d'accueil (module Code), repris de la refonte instantz.org.
   Réutilise les logos existants de la médiathèque (aucun réupload).
   ============================================================ */

#et-boc .et-l--post .clients-section { padding: 60px 0; background: var(--iz-bg-alt); }
#et-boc .et-l--post .clients-section .container { max-width: 1200px; margin: 0 auto; padding: 0 5%; }
.clients-section__title { text-align: center; margin: 0 0 0.5rem; }
.clients-section__lead {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 2.5rem;
	color: var(--iz-text-light);
	line-height: 1.7;
}

#et-boc .et-l--post .marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.marquee__track {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	align-items: center;
	gap: 3rem;
	width: max-content;
	animation: client-marquee 90s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes client-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	#et-boc .et-l--post .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.marquee__track { animation: none; }
}
.marquee__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	height: 60px;
	margin: 0 !important;
}
.marquee__item--label {
	color: var(--iz-primary);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border-left: 2px solid var(--iz-accent);
	padding: 0 0.5rem 0 1.25rem;
	margin-left: 0.5rem;
	white-space: nowrap;
}
.client-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
}
#et-boc .et-l--post .client-logo img {
	max-height: 56px;
	max-width: 140px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(0.4);
	opacity: 0.85;
	transition: all 0.25s ease;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
#et-boc .et-l--post .client-logo:hover img { filter: none; opacity: 1; }