/*
Theme Name:   Hello Elementor Child — Ohrizon
Theme URI:    https://ohrizon.com
Description:  Thème enfant de Hello Elementor pour Ohrizon.
Author:       Allema
Template:     hello-elementor
Version:      1.0.12
Text Domain:  hello-elementor-child
*/

/*
 * Focus clavier visible sur fond clair comme sur fond foncé (WCAG 2.4.7 ; _MASTER/pieges.md V3-04).
 * Elementor annule l'ombre de focus de Hello sur ses liens ; aucun réglage natif ne couvre à la fois
 * les éléments V3, V4 et les liens dans le texte. Anneau bicolore aux couleurs du design system (1.0.1) :
 * contour violet visible sur les fonds clairs, halo blanc visible sur le violet. currentColor (1.0.0) rendait
 * l'anneau blanc, donc invisible, autour des boutons à texte blanc (revue a11y de l'itération 1).
 * Inventaire : docs/design-system.md (règle n° 1, précisée par C2).
 */
.elementor :is(a, button, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 2px solid var(--violet, #3F0063);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--blanc, #FFFFFF);
}

/*
 * Formulaire Pro (1.0.2). Le widget n'a aucun réglage pour la couleur du texte indicatif ni pour l'état focus des
 * champs. Texte indicatif : maquette à 3,81:1, corrigé à 4,59:1 sur lavande (règle C1, approuvée par l'utilisateur
 * le 2026-10-29). Focus : règle admise « Champs du formulaire Pro » (_MASTER/standards.md § 4).
 * Inventaire : docs/design-system.md (règles n° 6 et 7).
 */
/* 1.0.8 : même règle pour le champ atomique V4 de l'infolettre (gris par défaut #9DA5AE, 2,5:1 sur blanc). */
.elementor-form .elementor-field-textual::placeholder,
.elementor .e-form-input-base::placeholder {
	color: var(--texte-indicatif, #6F6D71);
	opacity: 1;
}
.elementor .elementor-form .elementor-field-group .elementor-field-textual:focus {
	outline: 2px solid var(--violet, #3F0063);
	outline-offset: 2px;
}

/*
 * Liens dans un texte courant (1.0.4) : contenu de publication (politique) et champ HTML du formulaire (avis de
 * collecte). Le kit ne règle que leur couleur (violet), trop proche du texte encre pour les distinguer sans
 * soulignement (WCAG 1.4.1). Norme « liens dans un paragraphe » (_MASTER/standards.md § 3).
 * Inventaire : docs/design-system.md (règle n° 8).
 */
.elementor-widget-theme-post-content a,
.elementor-field-type-html a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/*
 * Flèche du bouton d'envoi du Formulaire Pro à 32 px, comme la maquette (1.0.5 ; décision de l'utilisateur du
 * 2026-10-31). Le widget fixe son icône à 1 em (18 px), sans réglage de taille. La marge négative (2 × 5,2 px) garde
 * la hauteur de ligne à 21,6 px, donc le bouton à 60 px comme la maquette : sans elle, il passerait à 70 px.
 * Inventaire : docs/design-system.md (règle n° 9).
 */
.elementor-widget-form .elementor-button[type="submit"] .elementor-button-icon svg {
	width: 2rem;
	height: 2rem;
	margin-block: -0.325rem;
}

/*
 * Infolettre du pied de page, formulaire de l'extension officielle Brevo (code court [sibwp_form id=1], 1.0.9 ;
 * décision de l'utilisateur du 2026-11-02, « option 1 »). Son code HTML porte les classes du guide de style
 * (infolettre, champ-pilule, lecteur-ecran), mais Elementor ne sert le CSS d'une classe V4 que sur les documents dont
 * un élément l'utilise : hors d'Elementor, elles ne sont pas chargées. Ces règles en reprennent le rendu, sur les
 * variables du design system (pilule de la maquette 33:340 ; colonne en cellulaire, D8). btn-petit, servie par
 * l'en-tête, s'applique telle quelle au bouton.
 * Inventaire : docs/design-system.md (règle n° 12).
 */
/* Le conteneur du code court prend la largeur de sa colonne (sinon il se rétrécit sur son contenu, 206 px en cellulaire). */
.elementor-widget-shortcode:has(.sib_signup_form) {
	align-self: stretch;
}
.sib_signup_form .lecteur-ecran {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}
.sib_signup_form .infolettre {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	max-width: 21rem;
	padding: 8px 8px 8px 24px;
	background-color: var(--blanc);
	border: 1px solid var(--lavande-contour);
	border-radius: var(--rayon-pilule);
}
.sib_signup_form .champ-pilule {
	flex: 1 1 auto;
	min-width: 0;
	height: 43px;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--font-texte);
	font-size: var(--fs-base);
	color: var(--encre);
}
.sib_signup_form .champ-pilule::placeholder {
	color: var(--texte-indicatif, #6F6D71);
	opacity: 1;
}
.sib_signup_form .champ-pilule:focus {
	outline: 2px solid var(--violet);
	outline-offset: 4px;
}
/* Case de consentement (1.0.11 ; décision de l'utilisateur du 2026-11-02 : pas de double confirmation, case remise). */
.sib_signup_form .infolettre-accord {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 21rem;
	margin-top: var(--gap-serre);
	font-family: var(--font-texte);
	font-size: var(--fs-mention);
	line-height: 1.4;
	color: var(--encre);
	cursor: pointer;
}
.sib_signup_form .infolettre-accord input {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--violet);
}
.sib_signup_form .infolettre-accord input:focus-visible {
	outline: 2px solid var(--violet);
	outline-offset: 2px;
}
@media (max-width: 767px) {
	.sib_signup_form .infolettre {
		flex-direction: column;
		align-items: stretch;
		max-width: none;
		padding: 8px;
		border-radius: var(--rayon-boite);
	}
	.sib_signup_form .champ-pilule {
		padding-inline: 8px;
	}
}