/**
 * Bloc « mein/site-footer » — pied de page définitif.
 *
 * Styles en CLASSES uniquement (aucun style inline dans render.php). Fidèle à la
 * maquette Footer.dc.html. Réutilise les tokens de theme.json (couleurs lavande /
 * sauge / crème / titres / texte, dégradé orbe-logo, polices serif / sans). Les
 * valeurs avec transparence sont dérivées des tokens via color-mix().
 *
 * Enqueue automatique : déclaré via « style » dans block.json ; comme le bloc est
 * présent dans le template-part footer, la feuille est chargée sur toutes les pages.
 *
 * Le socle .mein-logo est redéclaré ici (identique au bloc en-tête) pour que le
 * pied reste autonome, y compris lorsqu'il est rendu isolément (aperçu Site Editor).
 */

/* -------------------------------------------------------------------------
 * Racine du bloc : fond dégradé vers lavande.
 * ---------------------------------------------------------------------- */

.mein-footer {
	font-family: var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--texte);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--wp--preset--color--lavande-bg) 0%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--lavande-bg) 60%, transparent) 32px,
		var(--wp--preset--color--lavande-bg) 70px
	);
}

.mein-footer__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(66px, 7vw, 92px) clamp(20px, 5vw, 64px) 0;
}

/* -------------------------------------------------------------------------
 * Grille des colonnes.
 * ---------------------------------------------------------------------- */

.mein-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
	gap: 44px 36px;
	padding-bottom: clamp(44px, 5vw, 60px);
}

/* -------------------------------------------------------------------------
 * Socle du logo (identique au bloc en-tête — voir en-tête pour la source).
 * ---------------------------------------------------------------------- */

.mein-logo {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	text-decoration: none;
}

.mein-logo__orbe {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--gradient--orbe-logo);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.45),
		inset 0 -6px 12px rgba(108, 122, 88, 0.35);
}

/* Image de logo calibrée sur la pastille qu'elle remplace (voir le bloc en-tête pour
   le pourquoi). La taille propre au pied est posée plus bas, avec celle de la pastille. */
.mein-logo__image {
	flex: 0 0 auto;
	display: block;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}

.mein-logo__wordmark {
	line-height: 1;
}

.mein-logo__line1 {
	display: block;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 23px;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--titres);
	white-space: nowrap;
}

.mein-logo__line2 {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.44em;
	color: var(--wp--preset--color--sauge-fonce);
}

/* Interligne porté par le COUPLE de lignes uniquement (voir le bloc en-tête). */
.mein-logo__line1 + .mein-logo__line2 {
	margin-top: 4px;
}

.mein-logo:focus-visible {
	outline: 2px solid var(--wp--preset--color--sauge);
	outline-offset: 4px;
	border-radius: 4px;
}

/* -------------------------------------------------------------------------
 * Colonne marque : logo (légèrement plus grand), baseline et badge.
 * ---------------------------------------------------------------------- */

.mein-footer__brand {
	grid-column: 1 / -1;
	max-width: 340px;
	margin-bottom: 4px;
}

.mein-footer__logo {
	margin-bottom: 18px;
}

/* Le pied porte un logo légèrement plus grand. L'image se cale sur EXACTEMENT le même
   carré que la pastille qu'elle remplace : le bloc marque garde sa hauteur. */
.mein-footer__logo .mein-logo__orbe,
.mein-footer__logo .mein-logo__image {
	width: 38px;
	height: 38px;
}

.mein-footer__logo .mein-logo__line1 {
	font-size: 22px;
}

.mein-footer__logo .mein-logo__line2 {
	font-size: 8.5px;
}

.mein-footer__baseline {
	margin: 0 0 18px;
}

.mein-footer__baseline p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--wp--preset--color--texte);
}

.mein-footer__badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12.5px;
	color: var(--wp--preset--color--texte);
	background: color-mix(in srgb, var(--wp--preset--color--lavande-bg) 60%, #ffffff);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--titres) 8%, transparent);
	border-radius: 999px;
	padding: 8px 16px;
}

.mein-footer__badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--sauge-clair);
}

/* -------------------------------------------------------------------------
 * Titres de colonne (petits labels en majuscules).
 * Réinitialise l'héritage « heading » de theme.json (serif Cormorant, couleur titres).
 * ---------------------------------------------------------------------- */

.mein-footer__col-title {
	margin: 0 0 18px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sauge-fonce);
}

/* -------------------------------------------------------------------------
 * Listes de liens (navigation + informations).
 * ---------------------------------------------------------------------- */

.mein-footer__links {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mein-footer__links li {
	margin: 0;
	padding: 0;
}

.mein-footer__links a {
	font-size: 14.5px;
	color: var(--wp--preset--color--texte);
	text-decoration: none;
	transition: color 0.22s ease;
}

/* Sauge foncé : le sauge sur le fond du pied de page ne donne que 4,07:1. L'échec
   ne se manifestait qu'au SURVOL et au FOCUS, jamais au repos, donc jamais dans un
   contrôle statique. Cf. règle de charte, assets/css/main.css. */
.mein-footer__links a:hover,
.mein-footer__links a:focus-visible {
	color: var(--mein-sauge-sur-clair);
}

/* -------------------------------------------------------------------------
 * Colonne contact (élément <address> : coordonnées + bouton rendez-vous).
 * ---------------------------------------------------------------------- */

.mein-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-style: normal; /* <address> est en italique par défaut. */
}

.mein-footer__contact-line {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--wp--preset--color--texte);
	text-decoration: none;
	transition: color 0.22s ease;
}

/* Sauge foncé et non sauge : le sauge sur le sable du pied de page ne donne que
   4,07:1. Cas LATENT, non rendu aujourd'hui (aucune coordonnée renseignée dans les
   Réglages), corrigé par cohérence avec la règle de charte. */
a.mein-footer__contact-line:hover,
a.mein-footer__contact-line:focus-visible {
	color: var(--mein-sauge-sur-clair);
}

/* CORRECTIF D'AUDIT (WCAG 1.4.3) : la crème sur ce fond sauge est mesurée à
   4,32:1, sous le seuil de 4,5:1. Blanc pur : 4,62:1. Voir la règle de charte en
   tête de assets/css/main.css. */
.mein-footer__cta {
	margin-top: 4px;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--wp--preset--color--sauge);
	color: var(--mein-texte-sur-sauge);
	padding: 11px 22px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.25s ease, transform 0.25s ease;
}

/* Couleur redéclarée au survol pour battre la règle globale de theme.json
   (cf. main.css). Blanc sur sauge-fonce : 5,98:1. */
.mein-footer__cta:hover {
	background: var(--wp--preset--color--sauge-fonce);
	color: var(--mein-texte-sur-sauge);
	transform: translateY(-2px);
}

.mein-footer__cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--sauge-fonce);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Barre légale (copyright + liens mentions / confidentialité).
 * ---------------------------------------------------------------------- */

.mein-footer__bottom {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--titres) 10%, transparent);
	padding: 22px 0 26px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.mein-footer__copyright {
	margin: 0;
	font-size: 12.5px;
	color: var(--wp--preset--color--texte-discret);
}

.mein-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}

.mein-footer__legal a {
	font-size: 12.5px;
	color: var(--wp--preset--color--texte-discret);
	text-decoration: none;
	transition: color 0.22s ease;
}

/* Idem pour les liens légaux : sauge foncé au survol et au focus. */
.mein-footer__legal a:hover,
.mein-footer__legal a:focus-visible {
	color: var(--mein-sauge-sur-clair);
}

/* -------------------------------------------------------------------------
 * Respect de prefers-reduced-motion.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mein-footer__cta,
	.mein-footer__links a,
	.mein-footer__contact-line,
	.mein-footer__legal a {
		transition: none;
	}

	.mein-footer__cta:hover {
		transform: none;
	}
}