/*
Theme Name: Atelier des Petits Souliers
Theme URI: https://github.com/florentdestremau/atelierdespetitssouliers
Author: Florent Destremau
Description: Theme de l'Atelier des Petits Souliers. Enfant de Twenty Twenty-Five.
Template: twentytwentyfive
Version: 0.2.0
Requires at least: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atelierdespetitssouliers
*/

/* Le design vit dans theme.json et dans les gabarits. Ce fichier ne porte que
   ce que theme.json ne sait pas exprimer : les styles de blocs declares dans
   functions.php, et les quelques raccords que WooCommerce impose. */

/* ---------------------------------------------------------------- Styles de blocs */

/*
 * Surtitre : la petite ligne en capitales rouges posee au-dessus d'un titre.
 * C'est elle qui donne le rythme des sections ; sans elle, deux titres se
 * suivent sans qu'on sache lequel commande.
 */
.is-style-surtitre {
	color: var(--wp--preset--color--accent-1);
	font-family: var(--wp--preset--font-family--vollkorn);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1.4;
	margin-bottom: 0.6rem;
	text-transform: uppercase;
}

/*
 * Cadre : une enluminure se regarde encadree, pas posee a plat sur le fond.
 * Le filet d'or et la marie blanche font le meme travail qu'un passe-partout.
 */
.is-style-cadre img {
	background-color: var(--wp--preset--color--accent-5);
	border: 1px solid var(--wp--preset--color--accent-4);
	box-shadow: 0 1px 24px rgb(43 33 30 / 8%);
	padding: clamp(10px, 2vw, 22px);
}

/*
 * Cartouche : l'encadrement a double filet des pages de manuscrit. Sert a
 * isoler un bloc de texte — un tarif, une citation, un encadre pratique.
 */
.is-style-cartouche {
	border: 1px solid var(--wp--preset--color--accent-4);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--base), inset 0 0 0 4px var(--wp--preset--color--accent-4);
	padding: clamp(1.6rem, 4vw, 3rem);
}

/*
 * Ornement : le separateur porte le sacre-coeur du logo plutot qu'un trait.
 * L'image est en fond pour rester purement decorative : rien a lire dedans.
 */
.wp-block-separator.is-style-ornement {
	background: none;
	border: 0;
	height: 34px;
	margin-block: var(--wp--preset--spacing--50);
	opacity: 1;
	position: relative;
	width: 100%;
}

.wp-block-separator.is-style-ornement::before {
	background-image: url("assets/img/ornement-sacre-coeur.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
	height: 100%;
	width: 100%;
}

/* ---------------------------------------------------------------- Questions frequentes */

/*
 * Les questions de la FAQ sont des blocs core/details : repliees, la page se
 * parcourt d'un coup d'oeil. Le bloc natif n'apporte presque aucun style —
 * sans les regles ci-dessous, c'est le triangle du navigateur et des questions
 * collees les unes aux autres.
 */
.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
	padding-block: 1.1rem;
}

.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--vollkorn);
	font-size: 1.05rem;
	font-weight: 600;
	list-style: none;
	padding-right: 2rem;
	position: relative;
}

/* Le triangle par defaut ne se met pas a la couleur du theme ; on le remplace
   par une croix qui devient un moins a l'ouverture. */
.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	color: var(--wp--preset--color--accent-1);
	content: "+";
	font-size: 1.4rem;
	line-height: 1;
	position: absolute;
	right: 0;
	top: 0;
}

.wp-block-details[open] summary::after {
	content: "\2212";
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--accent-1);
}

/* Le contour de focus du theme parent epouse le texte au pixel pres ; trois
   pixels d'ecart le rendent lisible sur une ligne de question. */
.wp-block-details summary:focus-visible {
	outline-offset: 3px;
}

.wp-block-details > :not(summary) {
	margin-top: 0.8rem;
}

.wp-block-details > :not(summary):last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- Navigation */

.wp-block-navigation {
	font-family: var(--wp--preset--font-family--vollkorn);
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-1);
}

/* ---------------------------------------------------------------- Formulaire de contact */

/*
 * Le formulaire est ecrit a la main dans functions.php : pas d'extension a
 * maintenir pour cinq champs. Son habillage tient donc ici.
 */
.formulaire-contact {
	display: grid;
	gap: 1.1rem;
}

/* Chaque champ est enveloppe dans un <p> : sa marge par defaut s'ajoute a
   l'ecart de la grille et double l'espacement. */
.formulaire-contact p {
	margin: 0;
}

.formulaire-contact label {
	display: block;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	margin-bottom: 0.35rem;
	text-transform: uppercase;
}

.formulaire-contact input,
.formulaire-contact select,
.formulaire-contact textarea {
	background-color: var(--wp--preset--color--accent-5);
	border: 1px solid var(--wp--preset--color--accent-4);
	border-radius: 2px;
	/* Sans cela, « width: 100% » compte la largeur du contenu seul : le padding
	   et la bordure s'ajoutent par-dessus et le champ deborde de sa colonne. */
	box-sizing: border-box;
	color: inherit;
	font-family: inherit;
	font-size: 1rem;
	max-width: 100%;
	padding: 0.7rem 0.9rem;
	width: 100%;
}

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

.formulaire-contact textarea {
	min-height: 11rem;
	resize: vertical;
}

/* Le pot de miel n'est rempli que par un robot : il ne doit jamais se voir,
   ni a l'ecran, ni au lecteur d'ecran, ni a la tabulation. */
.formulaire-contact .pot-de-miel {
	left: -9999px;
	position: absolute;
}

.formulaire-contact button {
	background-color: var(--wp--preset--color--accent-1);
	border: 0;
	border-radius: 2px;
	color: var(--wp--preset--color--accent-5);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	justify-self: start;
	letter-spacing: 0.14em;
	padding: 0.9rem 1.9rem;
	text-transform: uppercase;
}

.formulaire-contact button:hover {
	background-color: var(--wp--preset--color--accent-3);
}

.message-formulaire {
	border-left: 3px solid var(--wp--preset--color--accent-4);
	margin-bottom: 2rem;
	padding: 1rem 1.2rem;
}

.message-formulaire.est-erreur {
	border-left-color: var(--wp--preset--color--accent-1);
}

/* ---------------------------------------------------------------- WooCommerce */

/* WooCommerce sort de la grille des blocs : ses pages (boutique, panier,
   commande) posent leur propre conteneur, qui ignore les largeurs de
   theme.json. On le raccroche a la mise en page du theme. */
.woocommerce-page .woocommerce {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
}