/*
Theme Name: Violette Roué
Theme URI: https://violette-roue-avocat.fr
Description: Thème du site de Violette Roué, avocate au Barreau de Paris. Thème enfant de Twenty Twenty-Five.
Author: Violette Roué
Template: twentytwentyfive
Version: 0.2.1
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: violette-roue
*/

/* --- Cartes de même hauteur --- */
.wp-block-column > .vr-carte {
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}
.wp-block-column > .vr-carte > .wp-block-buttons:last-child,
.wp-block-column > .vr-carte > p:last-child {
	margin-top: auto;
}
/* Dans un conteneur flex, les marges automatiques que WordPress applique aux
   blocs contraints rétrécissent et centrent leurs enfants. On les neutralise
   pour que le contenu des cartes reste aligné sur toute la largeur. */
.wp-block-column > .vr-carte > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* --- Formulaire de contact --- */
.vr-formulaire {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 34rem;
}
.vr-formulaire__ligne {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}
@media (max-width: 600px) {
	.vr-formulaire__ligne { grid-template-columns: 1fr; }
}
.vr-formulaire__champ {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
}
.vr-formulaire label {
	font-size: 0.9375rem;
	font-weight: 500;
}
.vr-formulaire input[type="text"],
.vr-formulaire input[type="email"],
.vr-formulaire input[type="tel"],
.vr-formulaire select,
.vr-formulaire textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.8rem 0.9rem;
	font: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
	min-height: 48px;
}
.vr-formulaire textarea { min-height: 8rem; resize: vertical; }
.vr-formulaire :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent);
}
.vr-formulaire__aide {
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
	line-height: 1.5;
}
.vr-formulaire__consentement { margin: 0; }
.vr-formulaire__consentement label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.7rem;
	align-items: start;
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}
.vr-formulaire__consentement input { margin-top: 0.25rem; width: 18px; height: 18px; }
.vr-formulaire__envoi { margin: 0; }
.vr-formulaire__envoi button {
	min-height: 52px;
	cursor: pointer;
	border: 0;
}
.vr-formulaire__piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.vr-formulaire__succes,
.vr-formulaire__erreur {
	padding: 1rem 1.2rem;
	margin-bottom: 1.5rem;
	border-left: 3px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-soft);
}
.vr-formulaire__erreur {
	border-left-color: #A3312B;
	background: #F6E4E2;
}

/* Le bouton à contour compense l'épaisseur de sa bordure,
   pour rester exactement de la même hauteur qu'un bouton plein. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding-top: calc(0.95rem - 1px);
	padding-bottom: calc(0.95rem - 1px);
}
/* Triptyque « Une manière de travailler ».
   Au-delà de 1100 px les trois titres tiennent sur une ligne et rien n'est
   nécessaire. En dessous, le troisième repasse sur deux lignes et décalerait
   son paragraphe : on réserve alors la hauteur de deux lignes pour les trois,
   afin que les textes démarrent au même niveau. */
@media (min-width: 782px) and (max-width: 1099px) {
	.vr-triptyque h3 { min-height: 2.6em; }
}

/* --- Justification du texte courant ---
   La césure automatique est indispensable : sans elle, un texte justifié
   creuse de larges blancs entre les mots, d'autant plus dans une colonne
   étroite. Les titres, boutons et libellés ne sont pas concernés ; un
   paragraphe d'une seule ligne non plus, sa ligne unique étant la dernière,
   qui reste au fer à gauche. Le pied de page est laissé aligné à gauche :
   ses colonnes sont trop étroites pour que la justification y soit lisible. */
.entry-content p,
.entry-content li,
.vr-justifie {
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* Surtitre cliquable : elle garde sa couleur et sa discrétion, mais un filet
   léger signale qu'elle mène quelque part. Un lien indiscernable d'un simple
   libellé n'est jamais cliqué, et reste invisible au clavier comme au toucher. */
.vr-lien-surtitre a,
.vr-lien-discret a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.vr-lien-surtitre a:hover,
.vr-lien-surtitre a:focus-visible,
.vr-lien-discret a:hover,
.vr-lien-discret a:focus-visible {
	text-decoration-color: currentColor;
}