/*
Theme Name: Tiileri France
Description: Thème bloc du site tiileri.fr — Tiileri France, distributeur exclusif : Cœur de Foyer. Blocs natifs, aucun constructeur de pages, polices du système, zéro JavaScript hors menu mobile. Charte pilotée par jetons (voir CHARTE.md).
Version: 0.3.3
Author: SARL Thermasse
Text Domain: tiileri
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
*/

/* ==================================================================
   Compléments au theme.json — uniquement ce que le JSON ne sait pas faire.
   Toutes les couleurs passent par les jetons de palette
   (--wp--preset--color--*) : changer de palette ne demande aucune
   retouche ici. Les règles propres aux traitements (contrasté, aplat)
   sont regroupées en fin de fichier.
   ================================================================== */

:where(body) {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3 {
	text-wrap: balance;
}

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

/* ------------------------------------------------------------------
   Accessibilité
   ------------------------------------------------------------------ */

/* Lien d'évitement : invisible jusqu'au focus clavier */
.lien-evitement {
	position: absolute;
	left: -9999px;
	top: 0.5rem;
	z-index: 1000;
	padding: 0.6rem 1rem;
	background: var(--wp--preset--color--titre);
	color: var(--wp--preset--color--surface);
	font-weight: 600;
	text-decoration: none;
}
.lien-evitement:focus-visible {
	left: 0.5rem;
}

/* Texte réservé aux lecteurs d'écran (titres de section implicites) */
.texte-lecteur-ecran {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Liens dans le texte : soulignés, fins */
.wp-block-post-content a:not(.wp-element-button),
.wp-block-post-excerpt a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ------------------------------------------------------------------
   Sur-titre : 11 px, majuscules, interlettrage .18em, couleur d'accent
   (style de paragraphe « Sur-titre », choisi dans l'éditeur)
   ------------------------------------------------------------------ */
.is-style-surtitre {
	margin-bottom: 0.25rem;
	font-family: var(--wp--preset--font-family--texte);
	font-size: 0.6875rem; /* 11 px */
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.is-style-surtitre a {
	color: inherit;
	text-decoration: none;
}
.is-style-surtitre a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------
   Boutons
   ------------------------------------------------------------------ */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.15s ease, color 0.15s ease;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--titre);
	border: 1px solid currentColor;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--titre);
	color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--titre);
}

/* Repère « à renseigner » : placeholder visible, jamais une valeur plausible */
.a-renseigner {
	padding: 0 0.25em;
	border-radius: 2px;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.85em;
	background-color: var(--wp--custom--a-renseigner--fond);
	color: var(--wp--custom--a-renseigner--texte);
}

/* Listes de liens (pied de page, 404) */
.liste-liens {
	list-style: none;
	margin: 0;
	padding: 0;
}
.liste-liens li + li {
	margin-top: 0.35rem;
}

/* ------------------------------------------------------------------
   En-tête
   ------------------------------------------------------------------ */
.site-header {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--filet);
}
.site-header-rangee {
	gap: 0.75rem 2rem;
}

/* Marque : logo réduit + « Tiileri France » + mention du distributeur */
.marque {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--wp--preset--color--titre);
	text-decoration: none;
}
.marque:hover .marque-nom {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}
.marque-logo {
	display: inline-grid;
	place-items: center;
	flex: none;
	line-height: 0;
}
.marque-logo img {
	display: block;
	width: 56px;
	height: auto;
}
.marque-texte {
	display: grid;
	gap: 0.1rem;
}
.marque-nom {
	font-family: var(--wp--preset--font-family--titres);
	font-size: 1.3rem;
	font-weight: var(--wp--custom--marque--graisse);
	letter-spacing: var(--wp--custom--marque--interlettrage);
	text-transform: var(--wp--custom--marque--casse);
	line-height: 1.1;
}
.marque-mention {
	font-family: var(--wp--preset--font-family--texte);
	font-size: 0.75rem;
	line-height: 1.3;
	color: var(--wp--preset--color--texte);
}

/* Menu mobile : vraie cible tactile */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	display: inline-grid;
	place-items: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--moyen);
	padding: 0.35rem 0;
}

/* ------------------------------------------------------------------
   Pied de page (bandeau sombre dans tous les traitements)
   ------------------------------------------------------------------ */
.site-footer .marque {
	color: var(--wp--preset--color--surface);
}
.site-footer .marque-mention {
	color: var(--wp--preset--color--bandeau-texte);
}
.site-footer-titre {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--texte);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-sombre);
}
.site-footer a {
	text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.site-footer a:focus-visible {
	outline-color: var(--wp--preset--color--surface);
}
.site-footer-filet.wp-block-separator {
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--30);
	border: 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--bandeau-texte) 30%, transparent);
	opacity: 1;
}

/* Logo sur fond sombre ou coloré : posé sur un disque blanc
   (la version blanche du logo attend la validation de l'usine) */
.site-footer .marque-logo,
.traitement-contraste .site-header .marque-logo,
.traitement-aplat .site-header .marque-logo {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #FFFFFF;
}
.site-footer .marque-logo img,
.traitement-contraste .site-header .marque-logo img,
.traitement-aplat .site-header .marque-logo img {
	width: 44px;
}

/* ------------------------------------------------------------------
   Accueil
   ------------------------------------------------------------------ */

/* Entrée : texte et photo en demi-colonne, pas de bandeau plein écran */
.accueil-entree .wp-block-columns {
	gap: 0;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--filet);
	border-radius: var(--wp--custom--rayon);
	overflow: hidden;
}
.accueil-entree-texte {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}
.accueil-entree-texte h1 {
	margin-top: 0.5rem;
}
.accueil-entree-chapo {
	max-width: 46ch;
	font-size: var(--wp--preset--font-size--moyen);
}
.accueil-entree-photo {
	align-self: stretch !important;
}
.photo-demi,
.photo-demi img {
	width: 100%;
	height: 100%;
	margin: 0;
}
.photo-demi img {
	display: block;
	min-height: 18rem;
	object-fit: cover;
	object-position: 20% 50%;
}
@media (max-width: 781px) {
	.accueil-entree-photo {
		order: -1;
	}
	.photo-demi img {
		min-height: 0;
		aspect-ratio: 5 / 2;
	}
}

/* Portes : quatre cartes cliquables en entier (lien étendu, sans JS) */
.portes-grille {
	gap: 0 !important;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--filet);
	border-radius: var(--wp--custom--rayon);
}
.porte {
	position: relative;
	padding: var(--wp--preset--spacing--30);
	border-right: 1px solid var(--wp--preset--color--filet);
	transition: background-color 0.15s ease;
}
.porte:last-child {
	border-right: 0;
}
.porte h3 {
	margin: 0 0 0.35rem;
}
.porte h3 a {
	color: var(--wp--preset--color--titre);
	text-decoration: none;
}
.porte h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.porte p {
	margin: 0;
	font-size: var(--wp--preset--font-size--petit);
}
.porte:hover,
.porte:focus-within {
	background: var(--wp--preset--color--fond);
}
.porte:hover h3 a,
.porte:focus-within h3 a {
	color: var(--wp--preset--color--accent);
}
@media (max-width: 900px) {
	.porte {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--filet);
	}
	.porte:last-child {
		border-bottom: 0;
	}
}

/* Aperçu de la gamme */
.cartes-modeles {
	gap: var(--wp--preset--spacing--30) !important;
	margin-top: var(--wp--preset--spacing--30);
}
.carte-modele {
	position: relative;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--filet);
	border-radius: var(--wp--custom--rayon);
	overflow: hidden;
}
.carte-modele-photo {
	margin: 0;
}
.carte-modele-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: #FFFFFF;
}
.carte-modele h3 {
	margin: 0;
	padding: 0.8rem 1rem;
}
.carte-modele h3 a {
	color: var(--wp--preset--color--titre);
	text-decoration: none;
}
.carte-modele h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.carte-modele:hover h3 a,
.carte-modele:focus-within h3 a {
	color: var(--wp--preset--color--accent);
}

/* Formation, réseau : blocs encadrés */
.bloc-formation {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--filet);
	border-radius: var(--wp--custom--rayon);
}
.bloc-reseau-carte {
	min-height: 12rem;
}

/* Réassurance : trois arguments séparés par des filets */
.reassurance {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--filet);
}
.reassurance-grille {
	gap: var(--wp--preset--spacing--40) !important;
}
.reassurance-item h3 {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--moyen);
}
.reassurance-item p {
	margin: 0;
}

/* ------------------------------------------------------------------
   Appel à l'action (bandeau sombre)
   ------------------------------------------------------------------ */
.bloc-cta {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--rayon);
}
.bloc-cta h2 {
	margin-top: 0.25rem;
	color: var(--wp--preset--color--surface);
}
.bloc-cta .is-style-surtitre {
	color: var(--wp--preset--color--accent-sombre);
}
.bloc-cta .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--surface);
}
.bloc-cta .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.bloc-cta .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--titre);
	border-color: var(--wp--preset--color--surface);
}
.bloc-cta a:focus-visible {
	outline-color: var(--wp--preset--color--surface);
}

/* ------------------------------------------------------------------
   Fiche modèle
   ------------------------------------------------------------------ */
.fiche-modele-visuel .wp-block-post-featured-image {
	margin: 0;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--filet);
	border-radius: var(--wp--custom--rayon);
	overflow: hidden;
}
/* Sans image mise en avant : pas de cadre vide, le texte prend toute la largeur */
.fiche-modele-entete .fiche-modele-visuel:not(:has(img)) {
	display: none;
}
.fiche-modele-entete:has(.fiche-modele-visuel:not(:has(img))) > .wp-block-column {
	flex-basis: 100% !important;
}
.fiche-modele-entete .wp-block-post-title {
	margin-top: 0.25rem;
}
.fiche-modele-chapo {
	font-size: var(--wp--preset--font-size--moyen);
}

/* Tableau de caractéristiques (style de tableau « Caractéristiques ») */
.wp-block-table.is-style-caracteristiques {
	margin: var(--wp--preset--spacing--30) 0;
	overflow-x: auto;
}
.wp-block-table.is-style-caracteristiques table {
	width: 100%;
	border-collapse: collapse;
	background: var(--wp--preset--color--surface);
	font-variant-numeric: tabular-nums;
}
.wp-block-table.is-style-caracteristiques th,
.wp-block-table.is-style-caracteristiques td {
	padding: 0.6rem 0.9rem;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--filet);
	text-align: left;
	vertical-align: top;
}
.wp-block-table.is-style-caracteristiques thead th {
	border-top: 0;
	border-bottom: 1px solid var(--wp--preset--color--titre);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texte);
}
.wp-block-table.is-style-caracteristiques td:first-child {
	width: 45%;
	color: var(--wp--preset--color--texte);
}
.wp-block-table.is-style-caracteristiques td:last-child {
	color: var(--wp--preset--color--titre);
}
.wp-block-table.is-style-caracteristiques figcaption {
	margin-top: 0.5rem;
	text-align: left;
}

/* ------------------------------------------------------------------
   Listes d'articles (index)
   ------------------------------------------------------------------ */
.carte {
	height: 100%;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--filet);
	border-radius: var(--wp--custom--rayon);
	overflow: hidden;
}
.carte .wp-block-post-featured-image {
	margin: 0;
}
.carte-corps {
	padding: var(--wp--preset--spacing--30);
}
.carte .wp-block-post-title {
	margin: 0 0 0.5rem;
}
.carte .wp-block-post-title a {
	color: var(--wp--preset--color--titre);
	text-decoration: none;
}
.carte .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------------
   Formulaires (rendus par l'extension) : habillage générique
   ------------------------------------------------------------------ */
.wp-block-post-content form label {
	display: block;
	margin-top: var(--wp--preset--spacing--30);
	font-weight: 600;
	color: var(--wp--preset--color--titre);
}
.wp-block-post-content form input[type="text"],
.wp-block-post-content form input[type="email"],
.wp-block-post-content form input[type="tel"],
.wp-block-post-content form input[type="number"],
.wp-block-post-content form select,
.wp-block-post-content form textarea,
.wp-block-search__input {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.65rem 0.8rem;
	font: inherit;
	color: var(--wp--preset--color--titre);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--filet);
	border-radius: var(--wp--custom--rayon);
}
.wp-block-post-content form input:focus,
.wp-block-post-content form select:focus,
.wp-block-post-content form textarea:focus,
.wp-block-search__input:focus {
	border-color: var(--wp--preset--color--titre);
}
/* Piège à robots des formulaires : hors écran */
.pot-de-miel {
	position: absolute;
	left: -9999px;
}

/* ==================================================================
   TRAITEMENTS DE LA CHARTE — classe posée sur <body> par functions.php
   (constante TIILERI_TRAITEMENT). « clair » (A1) n'a besoin d'aucune
   règle : c'est le rendu par défaut ci-dessus.
   ================================================================== */

/* --- 2 · Contrasté : en-tête et entrée d'accueil sur fond sombre --- */
.traitement-contraste .site-header {
	background: var(--wp--preset--color--bandeau);
	border-bottom-color: var(--wp--preset--color--bandeau);
}
.traitement-contraste .site-header .marque {
	color: var(--wp--preset--color--surface);
}
.traitement-contraste .site-header .marque-mention {
	color: var(--wp--preset--color--bandeau-texte);
}
.traitement-contraste .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content,
.traitement-contraste .site-header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--surface);
}
.traitement-contraste .site-header a:focus-visible,
.traitement-contraste .site-header button:focus-visible {
	outline-color: var(--wp--preset--color--surface);
}
.traitement-contraste .accueil-entree .wp-block-columns {
	border-color: var(--wp--preset--color--bandeau);
}
.traitement-contraste .accueil-entree-texte {
	background: var(--wp--preset--color--bandeau);
	color: var(--wp--preset--color--bandeau-texte);
}
.traitement-contraste .accueil-entree-texte h1 {
	color: var(--wp--preset--color--surface);
}
.traitement-contraste .accueil-entree-texte .is-style-surtitre {
	color: var(--wp--preset--color--accent-sombre);
}
.traitement-contraste .accueil-entree-texte .is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--surface);
}
.traitement-contraste .accueil-entree-texte .is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--titre);
	border-color: var(--wp--preset--color--surface);
}
.traitement-contraste .accueil-entree-texte a:focus-visible {
	outline-color: var(--wp--preset--color--surface);
}

/* --- 3 · Aplat : couleur d'accent en en-tête et pied, boutons sombres --- */
.traitement-aplat .site-header {
	background: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
}
.traitement-aplat .site-header .marque,
.traitement-aplat .site-header .marque-mention,
.traitement-aplat .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content,
.traitement-aplat .site-header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--surface);
}
.traitement-aplat .site-header a:focus-visible,
.traitement-aplat .site-header button:focus-visible {
	outline-color: var(--wp--preset--color--surface);
}
.traitement-aplat .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--wp--preset--color--titre);
}
.traitement-aplat .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent);
}
.traitement-aplat .portes-grille {
	background: var(--wp--preset--color--teinte);
}
.traitement-aplat .porte,
.traitement-aplat .portes-grille {
	border-color: rgba(0, 0, 0, 0.08);
}
.traitement-aplat .site-footer {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--surface) !important;
}
.traitement-aplat .site-footer .marque-mention,
.traitement-aplat .site-footer-titre {
	color: var(--wp--preset--color--surface);
}
.traitement-aplat .site-footer a:focus-visible {
	outline-color: var(--wp--preset--color--surface);
}
/* Sur le bandeau sombre, le bouton reprend l'accent (un bouton sombre y serait invisible) */
.traitement-aplat .bloc-cta .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--wp--preset--color--accent);
}
.traitement-aplat .bloc-cta .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--titre);
}

/* Survol de la navigation sur en-tête sombre ou rouge : l'accent y serait illisible */
.traitement-contraste .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover,
.traitement-aplat .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--surface);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* ------------------------------------------------------------------
 * Sélecteur de langue FR | EN (code court [tiileri_langue], extension tiileri-metier, langues.php).
 * N'apparaît que lorsque la page existe, publiée, dans l'autre langue.
 * ------------------------------------------------------------------ */
.choix-langue { display: flex; gap: .15rem; align-items: center; font-size: .8rem; font-weight: 600; letter-spacing: .06em; }
.choix-langue a, .choix-langue span { padding: .3rem .55rem; border: 1px solid var(--wp--preset--color--filet); text-decoration: none; line-height: 1; }
.choix-langue a { color: var(--wp--preset--color--titre); background: var(--wp--preset--color--surface); }
.choix-langue a:hover, .choix-langue a:focus-visible { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.choix-langue span[aria-current] { background: var(--wp--preset--color--titre); color: var(--wp--preset--color--surface); border-color: var(--wp--preset--color--titre); }