/**
 * VHU — corrections d'accessibilite mesurees (Lighthouse, 8 aout 2026)
 * ====================================================================
 * Chaque regle repond a un audit qui echoue, avec le rapport de contraste releve.
 * Rien n'est change au-dela : ni police, ni taille, ni position.
 *
 * Retour arriere : retirer l'appel a ce fichier dans functions.php.
 */

/* --------------------------------------------------------------------------
 * 1. Boutons d'appel — contrastes releves : 1,6 a 3,13 pour un minimum de 4,5.
 *
 *    Premier essai insuffisant : le fond passait bien a #0077a3, mais la COULEUR
 *    DU TEXTE restait celle de Divi (#40aabd, #109ec2, voire noir). Divi ecrit ses
 *    couleurs de bouton avec `!important` ET une specificite tres haute
 *    (`body #page-container .et_pb_section .et_pb_button_0`) : a `!important` egal,
 *    c'est la specificite qui tranche. D'ou la cascade allongee ci-dessous.
 * ----------------------------------------------------------------------- */
/*  Divi ecrit : `body #page-container .et_pb_section .et_pb_button_0 { color: … !important }`
 *  soit 1 identifiant, 2 classes, 1 element. A `!important` egal, c'est la specificite
 *  qui tranche, et ma premiere version n'avait qu'une classe : elle perdait en silence.
 *  Le `[class]` ci-dessous ajoute une classe de specificite sans rien selectionner de
 *  nouveau — tous ces elements ont un attribut class. */
html body #page-container .et_pb_section a.et_pb_button[class],
html body #page-container .et_pb_section .et_pb_button[class],
html body #page-container .et-l a.et_pb_button[class],
html body #page-container .et-l .et_pb_button[class],
html body #page-container a.et_pb_button[href^="tel:"][class] {
	background-color: #0077a3 !important;
	border-color: #0077a3 !important;
	color: #ffffff !important;
}

html body #page-container .et_pb_section a.et_pb_button[class]:hover,
html body #page-container .et_pb_section .et_pb_button[class]:hover,
html body #page-container .et-l a.et_pb_button[class]:hover,
html body #page-container a.et_pb_button[href^="tel:"][class]:hover {
	background-color: #005f82 !important;
	border-color: #005f82 !important;
	color: #ffffff !important;
}

/* L'icone du bouton est un pseudo-element : sans cette ligne elle garde sa couleur. */
html body #page-container .et_pb_section .et_pb_button[class]:after,
html body #page-container .et_pb_section .et_pb_button[class]:before,
html body #page-container .et-l .et_pb_button[class]:after,
html body #page-container .et-l .et_pb_button[class]:before {
	color: #ffffff !important;
}

/* --------------------------------------------------------------------------
 * 2. Liens dans un paragraphe — releve : « le lien a un contraste de 2,37:1
 *    avec le texte qui l'entoure », alors qu'il en faut 3:1 quand la couleur
 *    est le seul indice. Le soulignement leve l'exigence de contraste : le lien
 *    n'est plus reconnaissable a la seule couleur.
 * ----------------------------------------------------------------------- */
.et_pb_text_inner p a:not(.et_pb_button),
.entry-content p a:not(.et_pb_button),
.et_pb_blurb_description p a:not(.et_pb_button),
li a[href^="/epaviste-"]:not(.et_pb_button),
.vhu-article__texte a:not(.et_pb_button),
.vhu-article__texte li a:not(.et_pb_button),
.success-box a:not(.et_pb_button),
.vhu-article__corps a:not(.et_pb_button) {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* --------------------------------------------------------------------------
 * 3. Champs de formulaire — releve : texte #999999 sur fond #eeeeee, soit 2,45.
 *    Ce n'est pas le texte indicatif au sens CSS (`::placeholder`) mais bien la
 *    couleur du champ lui-meme : ma premiere regle visait le mauvais selecteur.
 *    #595959 sur #eeeeee donne 6,2, et reste plus clair que le texte courant.
 * ----------------------------------------------------------------------- */
html body #page-container .et_pb_contact_form .input,
html body #page-container .et_pb_contact_form textarea,
html body .et_pb_contact_form input.input,
html body .et_pb_contact_form textarea.et_pb_contact_message {
	color: #595959 !important;
}

html body .et_pb_contact_form .input::placeholder,
html body .et_pb_contact_form textarea::placeholder {
	color: #595959 !important;
	opacity: 1;
}

/* --------------------------------------------------------------------------
 * 4. Reservation de place pour le controle de securite Cloudflare.
 *    Le widget est injecte par un script apres le chargement : sans hauteur
 *    reservee, il pousse le contenu au moment ou il apparait, et ce decalage
 *    compte dans le CLS. 65 px + 8 px de marge = la taille « normal » de
 *    Turnstile. Une fois charge, le widget occupe exactement cette place :
 *    rien ne bouge a l'oeil.
 * ----------------------------------------------------------------------- */
.cf-turnstile {
	min-height: 65px;
	display: block;
}

/* --------------------------------------------------------------------------
 * 5. Contraste des liens dans les encadres colores des articles.
 *    Mesure Lighthouse : #0077a3 sur le vert #d4edda de .success-box donne
 *    4,06:1, sous le minimum de 4,5:1 exige par le WCAG en AA. Le meme bleu
 *    est employe dans les encadres jaune et bleu, dont le fond est encore
 *    plus clair : la correction couvre les trois.
 *    #005a78 donne 5,8:1 sur ce meme fond — une marge, pas un ras du seuil.
 * ----------------------------------------------------------------------- */
html body .vhu-article__texte .success-box a,
html body .vhu-article__texte .warning-box a,
html body .vhu-article__texte .info-box a,
html body .vhu-article__texte .danger-box a {
	color: #005a78;
}