/**
 * SecGram — divi-overrides.css
 * Corrections Divi ciblées et documentées. Chaque bloc explique le
 * problème Divi qu'il corrige. Aucun sélecteur lié à un ID généré.
 *
 * !important documentés (1 bloc) : focus des éléments interactifs Divi
 * — Divi (et certains réglages de modules) neutralisent l'outline ;
 * l'indicateur de focus est non négociable (WCAG 2.4.7).
 */

/* ---- Focus visible sur les éléments Divi ----------------------------- */
/* Problème : Divi supprime ou laisse invisible l'outline de ses boutons,
   liens de menu et hamburger. Ces règles garantissent un indicateur
   de focus clavier partout. */
.et_pb_button:focus-visible,
#top-menu a:focus-visible,
.et_mobile_menu a:focus-visible,
.mobile_menu_bar:focus-visible,
#et-secondary-nav a:focus-visible {
	outline: 3px solid var(--sg-color-focus) !important;
	outline-offset: 3px;
}

/* ---- Débordements de colonnes / rangées ------------------------------ */
/* Problème : en flex/grid, un contenu long (URL, mot technique) peut
   forcer une colonne à déborder horizontalement sur mobile.
   min-width: 0 rétablit la compression normale. */
.et_pb_row,
.et_pb_column {
	min-width: 0;
}

/* ---- Images de modules ----------------------------------------------- */
/* Problème : certaines combinaisons de réglages Divi imposent une
   hauteur fixe qui déforme les images. */
.et_pb_image img,
.et_pb_blurb_content img {
	height: auto;
}

/* ---- Boutons Divi ---------------------------------------------------- */
/* Style de marque par défaut : or plein, texte noir, rayon discret.
   Spécificité minimale volontaire : tout réglage de bouton fait dans
   Divi (Customizer ou module) est généré après nos feuilles avec une
   spécificité supérieure et reprend donc la main. */
.et_pb_button {
	background-color: var(--sg-color-accent);
	color: var(--sg-color-ink);
	border-color: var(--sg-color-accent);
	border-radius: var(--sg-radius-sm);
	font-weight: 700;
}

.et_pb_button:hover {
	background-color: var(--sg-color-accent-hover);
	color: var(--sg-color-ink);
	border-color: var(--sg-color-accent-hover);
}

/* Problème : le padding animé au survol (icône qui glisse) provoque un
   déplacement du texte. On anime des propriétés composited uniquement.
   Le comportement d'icône Divi reste intact ; seule la transition
   globale est adoucie. */
.et_pb_button {
	transition: background-color var(--sg-transition-fast),
		color var(--sg-transition-fast),
		border-color var(--sg-transition-fast),
		box-shadow var(--sg-transition-fast);
}

/* Boutons : le texte long passe à la ligne au lieu de déborder. */
.et_pb_button {
	max-width: 100%;
	white-space: normal;
	line-height: 1.4;
}

/* ---- Divi Contact Form : structure ----------------------------------- */
/* Problème : les champs Divi collent trop les uns aux autres sur
   mobile une fois empilés. */
.et_pb_contact_field {
	margin-bottom: var(--sg-space-sm);
}

/* ---- Séparateurs / espaceurs ----------------------------------------- */
/* Problème : les dividers Divi gardent parfois une hauteur résiduelle
   qui crée des écarts inattendus. Neutralité : on ne touche qu'au
   débordement. */
.et_pb_divider {
	overflow: hidden;
}

/* ---- Page 404 : pleine largeur --------------------------------------- */
/* Problème : sans classe de mise en page Divi, le conteneur 404 affiche
   le séparateur de sidebar et se limite à la zone de contenu gauche. */
.error404 #main-content .container::before {
	display: none;
}

.error404 #content-area {
	width: 100%;
}

/* ---- Galerie / portfolio --------------------------------------------- */
/* Problème : les overlays de la grille portfolio n'ont pas de repère
   focus clavier. */
.et_pb_portfolio_item a:focus-visible,
.et_pb_gallery_item a:focus-visible {
	outline: 3px solid var(--sg-color-focus);
	outline-offset: 2px;
}