/*
Theme Name: INFORMATIX Child
Template: Divi
Description: Thème enfant léger INFORMATIX SOLUTIONS (Divi 5). Jetons de couleur, accessibilité (focus), quelques classes de composants. La mise en page reste dans Divi.
Version: 0.4.0
Text Domain: informatix-child
*/

/* ---------- Jetons : vert dominant, bleu clair secondaire, anthracite pour les textes.
   Les couleurs des modules viennent des couleurs globales Divi (dossier « INFORMATIX ») ;
   ces jetons ne servent qu'aux quelques composants ci-dessous. Le marine reste réservé au logo. ---------- */
:root {
	--ix-green: #00A982;        /* marque, décoratif et icônes (3:1 sur blanc) */
	--ix-green-strong: #00775B; /* boutons, liens (5.5:1 avec blanc) */
	--ix-green-deep: #006B52;   /* survol */
	--ix-blue: #279FD5;         /* secondaire décoratif */
	--ix-blue-strong: #1B6E96;  /* texte bleu éventuel (5.6:1) */
	--ix-ink: #243037;          /* titres (anthracite) */
	--ix-text: #4A5960;         /* texte courant (7.2:1) */
	--ix-line: #DCE5E2;
	--ix-offwhite: #F5F8F7;
	--ix-green-tint: #E7F6F1;
	--ix-blue-tint: #EAF5FB;
	--ix-radius: 14px;
}

body {
	font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* Titres : lignes équilibrées (pas de mot isolé en fin de titre). */
h1, h2, h3 { text-wrap: balance; }
/* Titre de l'accueil : coupures par groupes de sens dès la tablette (span.ix-line dans le H1). */
@media (min-width: 768px) { .ix-hero-title h1 .ix-line { display: inline-block; } }

/* ---------- Accessibilité : focus visible au clavier ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.mobile_nav .mobile_menu_bar:focus-visible,
body #page-container .et_pb_button:focus-visible {
	outline: 3px solid var(--ix-blue-strong);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Divi neutralise l'outline de ses boutons : anneau de focus en box-shadow. */
body #page-container .et_pb_button:focus-visible {
	box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--ix-blue-strong);
}

.ix-skip-link {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 100000;
	padding: 10px 16px;
	background: var(--ix-ink);
	color: #fff;
	border-radius: 6px;
}
.ix-skip-link:focus { top: 12px; color: #fff; }

/* ---------- Logo typographique provisoire ---------- */
/* Logo officiel (module Image du Theme Builder) : dimensions réservées, pas de décalage. */
.ix-logo-img { margin-bottom: 0 !important; }
.ix-logo-img img { width: 204px; height: auto; aspect-ratio: 423 / 128; display: block; }
.ix-logo-img--footer img { width: 210px; }
.ix-footer-tagline { color: #7FC8EF; font-weight: 500; letter-spacing: .02em; margin-top: 14px; }

/* ---------- Composants ---------- */
/* Illustration du héros : espace réservé (évite le décalage de mise en page). */
.ix-hero-visual img { aspect-ratio: 1280 / 1040; width: 100%; height: auto; }
@media (max-width: 980px) { .ix-hero-visual { max-width: 520px; margin-left: auto; margin-right: auto; } }

.ix-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.45;
	margin-bottom: 4px;
	color: var(--ix-green-strong);
}
/* Pastille d'icône seule (page Services) : alignée à gauche, sans marge superflue. */
.ix-icon-only .et_pb_blurb_content { max-width: none; }
.ix-icon-only .et_pb_main_blurb_image { margin-bottom: 0; }
.ix-icon-only .et_pb_blurb_container { display: none; }
.ix-icon-only.et_pb_blurb { margin-bottom: 18px; }

.ix-card {
	height: 100%;
	transition: box-shadow .2s ease, transform .2s ease;
}
.ix-card .et_pb_blurb_content { max-width: none; }
/* Panneaux de texte (situation, solution, bénéfices) : même hauteur dans une rangée. */
.ix-panel { height: 100%; }
.ix-panel h3 { padding-bottom: 8px; }
/* Page Services : titre du domaine et bouton sur une même ligne de base (grand écran). */
@media (min-width: 981px) {
	.ix-service-head { display: flex; align-items: flex-end; }
	.ix-service-head > .et_pb_column { margin-bottom: 0; }
}
/* Téléphone : cartes compactes, icône à gauche du texte (pages moins longues). */
@media (max-width: 767px) {
	.ix-card .et_pb_blurb_content { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; }
	.ix-card .et_pb_main_blurb_image { margin-bottom: 0; }
}
/* Bénéfices clés sous le héros : titres courts, texte discret. */
.ix-proof .et_pb_blurb_description { font-size: 14.5px; line-height: 1.5; }
.ix-proof .et_pb_module_header { padding-bottom: 2px; }
.ix-card:hover { box-shadow: 0 14px 34px rgba(36, 48, 55, .10); }

/* ---------- À propos : quatre principes en vis-à-vis du titre (grille 2 × 2) ---------- */
.et_pb_row .et_pb_column.ix-principles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: center; }
.et_pb_row .et_pb_column.ix-principles > .et_pb_module { margin-bottom: 0; }
.ix-card.ix-tile .et_pb_blurb_content .et_pb_main_blurb_image { margin-bottom: 12px; }
.ix-card.ix-tile .et_pb_blurb_content .et_pb_module_header { padding-bottom: 4px; }
.ix-card.ix-tile .et_pb_blurb_content .et_pb_blurb_description { font-size: 14.5px; line-height: 1.5; }
.ix-tile:hover { box-shadow: none; }
@media (min-width: 981px) {
	.ix-hero-split { display: flex; align-items: center; }
	.ix-hero-split > .et_pb_column { margin-bottom: 0; }
}
@media (max-width: 767px) {
	.et_pb_row .et_pb_column.ix-principles { gap: 10px; }
	.ix-card.ix-tile .et_pb_blurb_content { display: block; }
	.ix-card.ix-tile .et_pb_main_blurb_image { margin-bottom: 10px; }
}

/* ---------- Page Services sur téléphone : un accordéon par domaine (js/services.js) ----------
   Les classes ix-acc / ix-open sont posées par le script ; sans lui, tout reste développé. */
.ix-acc-btn {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 34px 0 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
@media (max-width: 767px) {
	body #page-container .ix-service.ix-acc { padding-top: 0; padding-bottom: 0; border-top: 1px solid var(--ix-line); }
	.ix-service.ix-acc .ix-service-head { position: relative; }
	.ix-service.ix-acc .ix-service-head > .et_pb_column { margin-bottom: 0; }
	/* Pastille d'icône à gauche du titre. */
	.ix-service.ix-acc .ix-service-head > .et_pb_column:first-child { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; padding: 16px 0; }
	.ix-service.ix-acc .ix-service-head .ix-icon-only.et_pb_blurb { margin-bottom: 0; }
	.ix-service.ix-acc .ix-service-head .et_pb_text { margin-bottom: 0; }
	.ix-service.ix-acc .ix-service-head .ix-eyebrow { font-size: 11.5px; margin-bottom: 0; }
	.ix-service.ix-acc .ix-service-head h2 { font-size: 18.5px; line-height: 1.3; padding-bottom: 0; }
	/* Toute la ligne du titre est cliquable ; chevron à droite. */
	.ix-service.ix-acc .ix-acc-btn::before { content: ''; position: absolute; inset: 0; }
	.ix-service.ix-acc .ix-acc-btn::after {
		content: '';
		position: absolute;
		right: 6px;
		top: 50%;
		width: 9px;
		height: 9px;
		margin-top: -7px;
		border-right: 2.5px solid var(--ix-green-strong);
		border-bottom: 2.5px solid var(--ix-green-strong);
		transform: rotate(45deg);
		transition: transform .2s ease;
	}
	.ix-service.ix-acc.ix-open .ix-acc-btn::after { top: 44px; margin-top: 0; transform: rotate(-135deg); }
	.ix-service.ix-acc .ix-service-head .et_pb_text_inner > p:not(.ix-eyebrow) { grid-column: 1 / -1; font-size: 16px; padding-top: 12px; padding-bottom: 0; }
	.ix-service.ix-acc .ix-service-cta-col { position: relative; z-index: 1; padding-bottom: 20px; }
	.ix-service.ix-acc .ix-service-cta-col .et_pb_button_module_wrapper { margin-bottom: 0; }
	.ix-service.ix-acc .ix-service-body { margin-top: 0; }
	.ix-service.ix-acc .ix-service-body > .et_pb_column:last-child { padding-bottom: 28px; }
	/* Domaine replié : présentation, bouton et panneaux masqués. */
	.ix-service.ix-acc:not(.ix-open) .ix-service-head .et_pb_text_inner > p:not(.ix-eyebrow),
	.ix-service.ix-acc:not(.ix-open) .ix-service-cta-col,
	.ix-service.ix-acc:not(.ix-open) .ix-service-body { display: none; }
	.ix-service.ix-acc + .et_pb_section:not(.ix-service) { border-top: 1px solid var(--ix-line); }
}

.ix-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ix-green-tint);
	color: var(--ix-green-strong);
	font-weight: 700;
	font-size: 15px;
}

.ix-checklist ul { list-style: none; padding-left: 0; }
.ix-checklist li { position: relative; padding-left: 28px; margin-bottom: 8px; }
.ix-checklist li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: .45em;
	width: 14px;
	height: 8px;
	border-left: 2.5px solid var(--ix-green);
	border-bottom: 2.5px solid var(--ix-green);
	transform: rotate(-45deg);
}

.ix-chips a {
	display: inline-block;
	margin: 0 8px 10px 0;
	padding: 8px 14px;
	border: 1px solid var(--ix-line);
	border-radius: 999px;
	background: #fff;
	color: var(--ix-ink);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}
.ix-chips a:hover { border-color: var(--ix-green); color: var(--ix-green-strong); }

.ix-anchor { scroll-margin-top: 24px; }

/* ---------- Formulaire ---------- */
.ix-form-notice {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-left: 4px solid var(--ix-blue);
	background: var(--ix-blue-tint);
	color: var(--ix-ink);
	font-size: 14.5px;
	border-radius: 6px;
}
/* WPForms (balisage moderne) : personnalisation par ses variables CSS natives. */
.ix-form .wpforms-container {
	--wpforms-label-color: #243037;
	--wpforms-label-sublabel-color: #4A5960;
	--wpforms-field-border-color: #9DAEA9;
	--wpforms-field-border-radius: 8px;
	--wpforms-field-text-color: #243037;
	--wpforms-button-background-color: #00775B;
	--wpforms-button-text-color: #FFFFFF;
	--wpforms-button-border-radius: 8px;
	--wpforms-label-error-color: #B42318;
}
.ix-form .wpforms-container .wpforms-field-label { font-weight: 600; }

/* Liens dans les textes et blurbs : couleur d'action accessible. */
.et_pb_blurb_description a,
.ix-form-notice a { color: var(--ix-green-strong); text-decoration: underline; }

/* Pied de page */
.ix-footer ul.ix-footer-links { list-style: none; padding: 0; margin: 0; }
.ix-footer ul.ix-footer-links li { margin-bottom: 6px; }
.ix-footer a { text-decoration: none; }
.ix-footer a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto; transition: none; animation: none; }
}

/* ---------- Boutons côte à côte (CTA principal + secondaire) ---------- */
.et_pb_button_module_wrapper:has(> .ix-btn--inline) {
	display: inline-block;
	margin-right: 12px;
	vertical-align: top;
}

/* ---------- En-tête (Theme Builder) : alignement et version mobile ---------- */
.ix-header-row { display: flex; align-items: center; }
.ix-header-row > .et_pb_column { margin-bottom: 0; }
.ix-header .et_pb_button_module_wrapper { margin-bottom: 0; }
.ix-h-menu .et_pb_menu__menu > nav > ul { justify-content: center; }

/* Écrans intermédiaires (portables) : en-tête plus compact. */
@media (min-width: 981px) and (max-width: 1240px) {
	.ix-header .ix-logo-img img { width: 168px; }
	.ix-header .et_pb_menu .et-menu > li { padding-left: 9px; padding-right: 9px; }
	.ix-header .et_pb_menu .et-menu > li > a { font-size: 14.5px; }
	.ix-header .et_pb_button_module_wrapper .et_pb_button { white-space: nowrap; }
}

/* Divi force les colonnes à 100 % sous 980 px : exception limitée à l'en-tête. */
@media (max-width: 980px) {
	.ix-header .ix-header-row > .et_pb_column.ix-h-logo { width: auto !important; flex: 1 1 auto; margin-right: 0; min-width: 0; }
	.ix-header .ix-header-row > .et_pb_column.ix-h-menu { width: auto !important; flex: 0 0 auto; margin-right: 0; }
	.ix-header .ix-header-row > .et_pb_column.ix-h-cta { display: none; }
	.ix-header .ix-h-menu .et_pb_menu__wrap { justify-content: flex-end; }
	.ix-header .mobile_nav .mobile_menu_bar::before { color: var(--ix-ink); }
	.ix-header .ix-h-menu .et_mobile_menu {
		left: auto;
		right: 0;
		width: min(92vw, 380px);
		border-top-color: var(--ix-green);
		box-shadow: 0 16px 40px rgba(36, 48, 55, .14);
	}
	.ix-header .ix-h-menu .et_mobile_menu li a { padding: 12px 6%; font-size: 16px; }
}
@media (max-width: 980px) {
	.ix-header .ix-logo-img img { width: 158px; }
}
@media (max-width: 400px) {
	.ix-header .ix-logo-img img { width: 140px; }
}

/* ---------- Retour en haut (option Divi « Bouton Retour en haut ») ----------
   Styles autonomes : Divi 5 ne charge son CSS de ce bouton que si son cache d'assets
   dynamiques l'a détecté. Sans ce bloc, le bouton peut rester invisible (constaté en DEV local). */
body .et_pb_scroll_top.et-pb-icon {
	position: fixed;
	z-index: 99999;
	right: 18px;
	bottom: 22px;
	display: block;
	visibility: hidden;
	opacity: 0;
	width: 46px;
	height: 46px;
	padding: 0;
	line-height: 46px;
	text-align: center;
	font-family: 'ETmodules';
	font-size: 26px;
	color: #fff;
	background: var(--ix-green-strong);
	border-radius: 50%;
	box-shadow: 0 6px 18px rgba(36, 48, 55, .22);
	cursor: pointer;
	transition: opacity .25s ease, visibility .25s ease, background-color .2s ease;
	animation: none;
}
body .et_pb_scroll_top.et-pb-icon::before { content: "2"; }
body .et_pb_scroll_top.et-pb-icon.et-visible { visibility: visible; opacity: 1; }
body .et_pb_scroll_top.et-pb-icon:hover { background: var(--ix-green-deep); }
@media (max-width: 767px) {
	body .et_pb_scroll_top.et-pb-icon { right: 10px; bottom: 12px; width: 40px; height: 40px; line-height: 40px; font-size: 22px; opacity: .92; }
}
body .et_pb_scroll_top.et-pb-icon:focus-visible { outline: 3px solid var(--ix-blue-strong); outline-offset: 3px; }