/*
Theme Name:   La Voix des Retraités (enfant)
Theme URI:    https://lavoixdesretraites.fr
Description:  Thème enfant de Hello Elementor. Applique la charte graphique accessible du collectif : une couleur, une police (Atkinson Hyperlegible, hébergée localement), grandes tailles, contrastes AAA, focus visible.
Author:       La Voix des Retraités
Template:     hello-elementor
Version:      1.0.3
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  lvdr
*/

/* ==========================================================================
   1. POLICE — Atkinson Hyperlegible, hébergée sur le site (aucun appel à Google)
   Licence SIL Open Font License 1.1 (voir fonts/OFL-LICENSE.txt)
   ========================================================================== */
@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/atkinson-hyperlegible-latin-700-italic.woff2") format("woff2");
}

/* ==========================================================================
   2. VARIABLES DE LA CHARTE — modifier ici pour changer tout le site
   ========================================================================== */
:root {
	/* Couleurs (tous les textes > 7:1, niveau AAA) */
	--lvdr-bleu: #1B4F63;          /* seule couleur : titres, liens, boutons */
	--lvdr-texte: #1A1A1A;         /* texte courant */
	--lvdr-gris: #4A4F55;          /* mentions, dates, bordures de champs */
	--lvdr-fond: #FFFFFF;          /* fond de page */
	--lvdr-fond-section: #F4F6F7;  /* section mise en valeur */
	--lvdr-trait: #C9CED2;         /* traits décoratifs UNIQUEMENT, jamais pour du texte */

	/* Police */
	--lvdr-police: "Atkinson Hyperlegible", Verdana, Arial, sans-serif;

	/* Tailles — ordinateur */
	--lvdr-texte-taille: 20px;
	--lvdr-mention-taille: 18px;
	--lvdr-bouton-taille: 21px;
	--lvdr-h1: 44px;
	--lvdr-h2: 32px;
	--lvdr-h3: 24px;
	--lvdr-h4: 21px;

	/* Interlignes */
	--lvdr-interligne: 1.7;

	/* Mise en page */
	--lvdr-largeur-site: 1140px;
	--lvdr-largeur-texte: 720px;

	/* Boutons et champs */
	--lvdr-bouton-hauteur: 60px;
	--lvdr-champ-hauteur: 56px;
	--lvdr-rayon: 6px;

	/* Focus clavier */
	--lvdr-focus: 4px solid #1A1A1A;
	--lvdr-focus-decalage: 3px;
}

/* Tailles — téléphone */
@media (max-width: 767px) {
	:root {
		--lvdr-texte-taille: 19px;
		--lvdr-h1: 34px;
		--lvdr-h2: 28px;
		--lvdr-h3: 22px;
		--lvdr-h4: 20px;
	}
}

/* ==========================================================================
   3. BASE — texte
   Elementor peut surcharger ces valeurs via ses réglages globaux :
   saisissez-y les mêmes valeurs (voir la charte, section 9).
   ========================================================================== */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	background-color: var(--lvdr-fond);
	color: var(--lvdr-texte);
	font-family: var(--lvdr-police);
	font-size: var(--lvdr-texte-taille);
	font-weight: 400;
	line-height: var(--lvdr-interligne);
}

p,
li,
dd,
td,
th,
blockquote,
.elementor-widget-text-editor {
	text-align: left; /* jamais justifié */
}

/* Un texte justifié ou en tout-majuscules saisi par erreur est neutralisé */
[style*="text-align: justify"],
[style*="text-align:justify"],
.elementor-widget-text-editor p[style*="justify"] {
	text-align: left !important;
}

p {
	margin-top: 0;
	margin-bottom: 1em;
}

strong,
b {
	font-weight: 700;
}

small,
.lvdr-mention {
	font-size: var(--lvdr-mention-taille);
	color: var(--lvdr-gris);
	line-height: 1.5;
}

/* Blocs de texte : lignes courtes, faciles à suivre */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.elementor-widget-text-editor .elementor-widget-container {
	max-width: var(--lvdr-largeur-texte);
}

/* ==========================================================================
   4. TITRES
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: var(--lvdr-police);
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 0.5em;
	text-transform: none;
	letter-spacing: normal;
}

h1 { font-size: var(--lvdr-h1); line-height: 1.2;  color: var(--lvdr-bleu); }
h2 { font-size: var(--lvdr-h2); line-height: 1.25; color: var(--lvdr-bleu); }
h3 { font-size: var(--lvdr-h3); line-height: 1.3;  color: var(--lvdr-texte); }
h4, h5, h6 { font-size: var(--lvdr-h4); line-height: 1.35; color: var(--lvdr-texte); }

/* ==========================================================================
   5. LIENS — toujours soulignés dans le texte (la couleur seule ne suffit pas)
   ========================================================================== */
a {
	color: var(--lvdr-bleu);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--lvdr-texte);
	text-decoration-thickness: 3px;
}

/* Liens dans les textes Elementor : soulignement imposé */
.elementor-widget-text-editor a,
.entry-content a,
.lvdr-texte a {
	text-decoration: underline !important;
}

/* ==========================================================================
   6. FOCUS CLAVIER — toujours visible, ne jamais supprimer
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.elementor-button:focus-visible {
	outline: var(--lvdr-focus) !important;
	outline-offset: var(--lvdr-focus-decalage) !important;
	box-shadow: 0 0 0 var(--lvdr-focus-decalage) var(--lvdr-fond) !important;
}

/* Lien d'évitement « Aller au contenu » (fourni par Hello Elementor) */
.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100000;
	padding: 16px 24px;
	background: var(--lvdr-bleu);
	color: #FFFFFF;
	font-size: var(--lvdr-bouton-taille);
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--lvdr-rayon);
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
}

/* ==========================================================================
   7. BOUTONS
   Bouton principal : fond bleu. Bouton secondaire : ajouter la classe CSS
   « lvdr-secondaire » au widget Bouton dans Elementor (Avancé > Classes CSS).
   ========================================================================== */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.elementor-button,
.wp-block-button__link,
.ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--lvdr-bouton-hauteur);
	padding: 16px 36px;
	border: 2px solid var(--lvdr-bleu);
	border-radius: var(--lvdr-rayon);
	background-color: var(--lvdr-bleu);
	color: #FFFFFF;
	font-family: var(--lvdr-police);
	font-size: var(--lvdr-bouton-taille);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: none;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.elementor-button:hover,
.wp-block-button__link:hover,
.ff-btn-submit:hover {
	background-color: var(--lvdr-texte);
	border-color: var(--lvdr-texte);
	color: #FFFFFF;
	text-decoration: none;
}

/* Bouton secondaire */
.lvdr-secondaire .elementor-button,
.elementor-button.lvdr-secondaire,
button.lvdr-secondaire {
	background-color: var(--lvdr-fond);
	color: var(--lvdr-bleu);
	border: 2px solid var(--lvdr-bleu);
}

.lvdr-secondaire .elementor-button:hover,
.elementor-button.lvdr-secondaire:hover,
button.lvdr-secondaire:hover {
	background-color: var(--lvdr-fond-section);
	color: var(--lvdr-texte);
	border-color: var(--lvdr-texte);
}

/* Sur téléphone, les boutons prennent toute la largeur */
@media (max-width: 767px) {
	.elementor-widget-button .elementor-button,
	.ff-btn-submit {
		width: 100%;
	}
}

/* ==========================================================================
   8. FORMULAIRES (Fluent Forms et champs WordPress)
   ========================================================================== */
label,
.ff-el-input--label label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--lvdr-police);
	font-size: var(--lvdr-texte-taille);
	font-weight: 700;
	color: var(--lvdr-texte);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="date"],
select,
textarea,
.ff-el-form-control {
	width: 100%;
	min-height: var(--lvdr-champ-hauteur);
	padding: 12px 16px;
	border: 2px solid var(--lvdr-gris);
	border-radius: var(--lvdr-rayon);
	background-color: var(--lvdr-fond);
	color: var(--lvdr-texte);
	font-family: var(--lvdr-police);
	font-size: var(--lvdr-texte-taille);
	line-height: 1.4;
	box-sizing: border-box;
}

textarea,
textarea.ff-el-form-control {
	min-height: 180px;
}

input::placeholder,
textarea::placeholder,
.ff-el-form-control::placeholder {
	color: var(--lvdr-gris);
	opacity: 1;
}

/* Cases à cocher et boutons radio : plus grands, plus faciles à cocher */
input[type="checkbox"],
input[type="radio"] {
	width: 28px;
	height: 28px;
	margin-right: 12px;
	accent-color: var(--lvdr-bleu);
	vertical-align: middle;
	flex-shrink: 0;
}

.ff-el-form-check label,
.ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	font-weight: 400;
	line-height: 1.5;
}

/* Espace entre les champs */
.ff-el-group {
	margin-bottom: 28px;
}

/* Messages d'erreur : écrits, en gras, jamais signalés par la seule couleur */
.error,
.text-danger,
.ff-el-is-error .text-danger,
.ff-el-is-error .error {
	display: block;
	margin-top: 8px;
	font-size: var(--lvdr-mention-taille);
	font-weight: 700;
	color: var(--lvdr-texte);
}

.ff-el-is-error .text-danger::before,
.ff-el-is-error .error::before {
	content: "⚠ ";
}

.ff-el-is-error .ff-el-form-control {
	border: 3px solid var(--lvdr-texte);
}

/* Champ obligatoire : on remplace l'astérisque rouge par le mot écrit */
.ff-el-is-required.asterisk-right label::after,
.ff-el-is-required.asterisk-left label::before {
	content: " (obligatoire)";
	color: var(--lvdr-gris);
	font-weight: 400;
	font-size: var(--lvdr-mention-taille);
}

/* Message de confirmation après envoi */
.ff-message-success {
	padding: 24px 28px;
	border: none;
	border-left: 6px solid var(--lvdr-bleu);
	background-color: var(--lvdr-fond-section);
	color: var(--lvdr-texte);
	font-size: var(--lvdr-texte-taille);
	line-height: 1.6;
	box-shadow: none;
}

/* --- Fluent Forms : ses propres styles sont plus précis que les nôtres,
       on les surcharge ici avec le préfixe .fluentform --- */
.fluentform .ff-el-input--label label,
.fluentform .ff-el-input--label.ff-el-is-required label {
	font-family: var(--lvdr-police);
	font-size: var(--lvdr-texte-taille);
	font-weight: 700;
	color: var(--lvdr-texte);
	line-height: 1.4;
}

/* « (obligatoire) » écrit en toutes lettres à la place de l'astérisque */
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	content: " (obligatoire)";
	margin-left: 4px;
	color: var(--lvdr-gris);
	font-weight: 400;
	font-size: var(--lvdr-mention-taille);
}
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-left label::before {
	content: "";
}

/* Textes d'aide : lisibles, sous le champ */
.fluentform .ff-el-help-message {
	font-family: var(--lvdr-police);
	font-size: var(--lvdr-mention-taille);
	font-style: normal;
	color: var(--lvdr-gris);
	line-height: 1.5;
	margin-top: 8px;
}

/* Champs et liste déroulante */
.fluentform .ff-el-form-control,
.fluentform select.ff-el-form-control {
	font-family: var(--lvdr-police);
	font-size: var(--lvdr-texte-taille);
	color: var(--lvdr-texte);
	min-height: var(--lvdr-champ-hauteur);
	border: 2px solid var(--lvdr-gris);
	border-radius: var(--lvdr-rayon);
}
.fluentform .ff-el-form-control:focus {
	border-color: var(--lvdr-texte);
}

/* Cases à cocher et case de consentement */
.fluentform .ff-el-form-check-label,
.fluentform .ff-el-tc label,
.fluentform .ff_t_c {
	font-family: var(--lvdr-police);
	font-size: var(--lvdr-texte-taille);
	font-weight: 400;
	color: var(--lvdr-texte);
	line-height: 1.5;
}
.fluentform .ff-el-form-check {
	margin-bottom: 12px;
}

/* Messages d'erreur */
.fluentform .ff-el-is-error .text-danger,
.fluentform .error.text-danger {
	font-family: var(--lvdr-police);
	font-size: var(--lvdr-mention-taille);
	font-weight: 700;
	color: var(--lvdr-texte);
}
.fluentform .ff-el-is-error .ff-el-form-control {
	border: 3px solid var(--lvdr-texte);
}

/* Bouton d'envoi */
.fluentform .ff-btn-submit,
.fluentform .ff_submit_btn_wrapper .ff-btn-submit {
	font-family: var(--lvdr-police) !important;
	font-size: var(--lvdr-bouton-taille) !important;
	font-weight: 700 !important;
	min-height: var(--lvdr-bouton-hauteur);
	padding: 16px 36px !important;
	border-radius: var(--lvdr-rayon) !important;
}
@media (max-width: 767px) {
	.fluentform .ff-btn-submit {
		width: 100%;
	}
}

/* ==========================================================================
   9. SECTIONS ET MISE EN PAGE
   Pour un fond gris très clair : ajouter la classe « lvdr-section-claire »
   au conteneur dans Elementor (Avancé > Classes CSS).
   ========================================================================== */
.lvdr-section-claire {
	background-color: var(--lvdr-fond-section);
}

.lvdr-texte {
	max-width: var(--lvdr-largeur-texte);
}

hr {
	border: 0;
	border-top: 1px solid var(--lvdr-trait);
	margin: 48px 0;
}

img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   10. EN-TÊTE ET PIED DE PAGE DE HELLO ELEMENTOR (si utilisés)
   ========================================================================== */
.site-header .site-title a,
.site-header .site-branding a {
	color: var(--lvdr-bleu);
	font-weight: 700;
	text-decoration: none;
}

.site-navigation a,
.elementor-nav-menu a {
	font-size: var(--lvdr-texte-taille);
	color: var(--lvdr-texte);
	text-decoration: none;
}

.site-navigation a:hover,
.elementor-nav-menu a:hover {
	text-decoration: underline;
}

.site-footer,
.site-footer a {
	font-size: var(--lvdr-mention-taille);
	color: var(--lvdr-gris);
}

/* --- En-tête et pied de page « Hello Theme » (réglés dans Elementor) --- */
#site-header .site-title,
#site-header .site-title a {
	font-family: var(--lvdr-police);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--lvdr-bleu);
	text-decoration: none;
}
#site-header .site-description {
	font-size: var(--lvdr-mention-taille);
	color: var(--lvdr-gris);
	margin: 4px 0 0;
}

/* Menu principal */
#site-header .site-navigation ul.menu li a,
#site-header .site-navigation-dropdown ul.menu li a {
	font-family: var(--lvdr-police);
	font-size: var(--lvdr-texte-taille);
	color: var(--lvdr-texte);
	text-decoration: none;
	padding-top: 10px;
	padding-bottom: 10px;
}
#site-header .site-navigation ul.menu li a:hover,
#site-header .site-navigation-dropdown ul.menu li a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}
/* Page en cours : en gras et soulignée en bleu */
#site-header .site-navigation ul.menu li.current-menu-item > a,
#site-header .site-navigation-dropdown ul.menu li.current-menu-item > a {
	font-weight: 700;
	color: var(--lvdr-bleu);
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 0.3em;
}

/* Bouton du menu sur téléphone : le mot « Menu » écrit à côté de l'icône */
#site-header .site-navigation-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 8px 16px;
	border: 2px solid var(--lvdr-bleu);
	border-radius: var(--lvdr-rayon);
	background: var(--lvdr-fond);
	color: var(--lvdr-bleu);
	font-family: var(--lvdr-police);
	font-size: 19px;
	font-weight: 700;
}
#site-header .site-navigation-toggle::after {
	content: "Menu";
}
#site-header .site-navigation-toggle:hover {
	background: var(--lvdr-fond-section);
	color: var(--lvdr-texte);
}
#site-header .site-navigation-dropdown ul.menu li a {
	font-size: 21px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--lvdr-trait);
}

/* Pied de page */
#site-footer.site-footer {
	padding-top: 40px;
	padding-bottom: 40px;
	border-top: 1px solid var(--lvdr-trait);
}
#site-footer .site-title a,
#site-footer .site-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--lvdr-bleu);
	text-decoration: none;
}
#site-footer .site-navigation ul.menu li a {
	font-family: var(--lvdr-police);
	font-size: var(--lvdr-mention-taille);
	color: var(--lvdr-texte);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}
#site-footer .copyright p {
	font-size: var(--lvdr-mention-taille);
	color: var(--lvdr-gris);
}

/* Liens dans le message de confirmation du formulaire */
.fluentform .ff-message-success a,
.ff-message-success a {
	color: var(--lvdr-bleu);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

/* ==========================================================================
   11. RESPECT DES PRÉFÉRENCES DU VISITEUR
   ========================================================================== */

/* Pas d'animation pour qui les a désactivées dans son système */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.elementor-invisible {
		visibility: visible !important;
	}
}

/* Mode contraste élevé de Windows */
@media (forced-colors: active) {
	.elementor-button,
	button,
	input[type="submit"] {
		border: 2px solid ButtonText;
	}
}

/* Impression : texte noir sur blanc, adresses des liens visibles */
@media print {
	body {
		color: #000000;
		background: #FFFFFF;
		font-size: 12pt;
	}
	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 10pt;
	}
	.site-header,
	.site-footer,
	.elementor-button {
		display: none;
	}
}