/*
Theme Name: Studio
Theme URI: https://github.com/padmameufbadass/activite-creation-sites
Author: TON NOM / TA MARQUE
Description: Thème sobre et féminin pour les indépendantes de la beauté et du bien-être : rose poudré, noir et crème, serif éditorial et capitales espacées. Conçu pour fonctionner avec l'extension Studio RDV (disponibilités, demandes de rendez-vous, galerie, tarifs).
Version: 1.3.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: studio-theme
Tags: one-column, custom-logo, custom-menu, featured-images, translation-ready, blog
*/

/* =============================================================================
   1. Variables
   -----------------------------------------------------------------------------
   Posées sur :root ici, contrairement à l'extension qui les porte sur `.studio`
   (une extension n'a pas à déborder sur le thème ; un thème, si).
   ========================================================================== */

:root {
	--encre: #1c1a19;
	--fond: #faf7f4;
	--douceur: #f0e7e2;
	--rose: #d6988f;
	--rose-fonce: #965852;
	--trait: #e2dad4;
	--gris: #6b6360;

	--serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--largeur: 1100px;
	--gouttiere: 1.25rem;

	color-scheme: light;
}

/* =============================================================================
   2. Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--fond);
	color: var(--encre);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--rose-fonce);
}

:focus-visible {
	outline: 2px solid var(--rose-fonce);
	outline-offset: 3px;
}

h1,
h2,
h3 {
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.2;
	text-wrap: balance;
}

.contenu {
	max-width: var(--largeur);
	margin-inline: auto;
	padding-inline: var(--gouttiere);
}

/* Lien d'évitement, obligatoire pour la navigation au clavier. */
.evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.8rem 1.2rem;
	background: var(--encre);
	color: #fff;
}

.evitement:focus {
	left: 0;
}

/* =============================================================================
   3. En-tête
   ========================================================================== */

.site-entete {
	/* Collant : le site tient sur une seule page, et le menu est fait
	   d'ancres. Un menu qu'il faut remonter chercher n'est pas un menu — on
	   le remonte une fois, puis on ne s'en sert plus. */
	position: sticky;
	top: 0;
	z-index: 20;
	border-bottom: 1px solid var(--trait);
	background: var(--fond);
}

/* Le défilement s'anime, mais jamais pour qui a demandé le contraire :
   le mouvement automatique peut réellement rendre malade. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.site-entete .contenu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.5rem;
}

.marque {
	display: inline-block;
	padding: 0.6rem 1.4rem;
	border: 1px solid rgb(28 26 25 / 0.25);
	text-decoration: none;
}

.marque-nom {
	display: block;
	font-family: var(--serif);
	font-size: 1.1rem;
	letter-spacing: 0.06em;
	color: var(--rose-fonce);
}

.marque-sous {
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gris);
}

.marque img {
	display: block;
	max-height: 60px;
	width: auto;
}

.menu-principal ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Capitales espacées, comme le reste du thème : un menu en minuscules de
   0,9 rem se confond avec le texte courant et personne ne le voit. */
.menu-principal a {
	position: relative;
	display: block;
	padding-block: 0.35rem;
	color: var(--encre);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Le trait sous l'entrée survolée ou courante : il pousse depuis la gauche.
   Dessiné en pseudo-élément pour que rien ne bouge à l'apparition — un
   soulignement ajouté au survol décale toute la ligne. */
.menu-principal a::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: var(--rose-fonce);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.menu-principal a:hover,
.menu-principal a:focus-visible,
.menu-principal .current-menu-item > a {
	color: var(--rose-fonce);
}

.menu-principal a:hover::after,
.menu-principal a:focus-visible::after,
.menu-principal .current-menu-item > a::after {
	transform: scaleX(1);
}

/* Sur téléphone, le bouton est la seule porte d'entrée du menu : il est
   plein, pas discret. */
.menu-bouton {
	display: none;
	min-height: 44px;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--encre);
	background: var(--encre);
	color: #fff;
	font: inherit;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
}

@media (max-width: 48rem) {
	.menu-bouton {
		display: block;
	}

	.menu-principal {
		flex-basis: 100%;
	}

	.menu-principal[hidden] {
		display: none;
	}

	.menu-principal ul {
		flex-direction: column;
		gap: 0;
	}

	.menu-principal li {
		border-top: 1px solid var(--trait);
	}

	.menu-principal a {
		display: block;
		padding: 0.95rem 0;
		font-size: 0.8rem;
	}

	/* Le trait animé n'a plus de sens dans une liste verticale pleine
	   largeur : il traverserait tout l'écran. */
	.menu-principal a::after {
		display: none;
	}
}

/* =============================================================================
   4. Haut de page
   ========================================================================== */

/*
 * Le haut de page doit tenir dans un écran, et laisser voir qu'il y a une
 * suite.
 *
 * Il mesurait 771 px avec une photo, sur un portable de 800 px de haut : le
 * premier créneau arrivait à 1138 px, soit trois cent quarante pixels de
 * défilement avant la moindre chose utile. Une vitrine qui fait travailler
 * avant de montrer, c'est une vitrine qu'on quitte.
 *
 * Les marges ont été resserrées et surtout la photo ne commande plus la
 * hauteur — voir `.hero-photo img`.
 */
.hero {
	display: grid;
	gap: 2.5rem;
	align-items: center;
	max-width: var(--largeur);
	margin-inline: auto;
	padding: 2.25rem var(--gouttiere);
	grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
	.hero {
		/* `stretch` : la photo s'aligne sur la hauteur du texte au lieu de
		   l'imposer. C'est le texte qui dit ce que le haut de page raconte,
		   c'est donc à lui de décider de sa taille. */
		align-items: stretch;
		grid-template-columns: 1fr 0.8fr;
		padding-block: 2.5rem;
	}
}

/* Sans photo, le haut de page reste sur une colonne : une deuxième colonne
   vide creuserait un trou à droite du texte. */
.hero--sans-photo {
	grid-template-columns: 1fr;
	max-width: 46rem;
	text-align: center;
}

.hero--sans-photo .hero-texte {
	margin-inline: auto;
}

.hero--sans-photo .hero-filet,
.hero--sans-photo .hero-boutons {
	margin-inline: auto;
}

.hero--sans-photo .hero-boutons {
	justify-content: center;
}

@media (min-width: 56rem) {
	.hero--sans-photo {
		grid-template-columns: 1fr;
	}
}

.hero-surtitre {
	margin: 0 0 0.85rem;
	font-size: 0.7rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgb(28 26 25 / 0.55);
}

.hero h1 {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3rem);
}

/* Le mot d'accent : en couleur, jamais en italique — l'italique d'un serif
   sur un nom propre se lit mal. */
.hero h1 em {
	font-style: normal;
	color: var(--rose-fonce);
}

.hero-texte {
	max-width: 32rem;
	color: #4a4340;
}

.hero-filet {
	width: 4rem;
	height: 1px;
	margin: 1.1rem 0;
	background: rgb(28 26 25 / 0.25);
}

.hero-photo {
	position: relative;
}

/* Aplat de couleur décalé derrière la photo : l'assemblage des planches
   d'identité de marque. */
.hero-photo .bloc {
	position: absolute;
	inset: -1.25rem auto auto -1.25rem;
	width: 100%;
	height: 100%;
	background: var(--rose);
}

/*
 * Sur téléphone, la photo est en bandeau et non en portrait.
 *
 * Pleine largeur en 4/5, elle faisait 437 px à elle seule : le haut de page
 * montait à 865 px et le premier créneau tombait à 1228 px, soit un écran et
 * demi de défilement. C'est pourtant de là que vient l'essentiel du trafic
 * quand on démarche sur Instagram.
 *
 * En 3/2 elle garde sa place et son rôle — on voit le travail — sans occuper
 * l'écran entier.
 */
.hero-photo img {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/*
 * Sur écran large, la photo se cale sur la hauteur du texte au lieu de la
 * dicter. Un format 4/5 dans une colonne de 450 px, c'est 560 px de photo — à
 * elle seule elle repoussait le contenu utile sous la ligne de flottaison.
 *
 * Elle est sortie du flux (`absolute`) pour que ce soit bien le texte qui
 * décide : tant qu'elle y restait, c'est sa propre hauteur — ou son
 * `max-height` — qui commandait la rangée, et la borner ne faisait que
 * déplacer le problème. Le plancher évite l'autre excès : une bande étriquée
 * quand l'accroche tient en une ligne.
 */
@media (min-width: 56rem) {
	.hero-photo {
		min-height: 17rem;
	}

	.hero-photo img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
	}
}

.hero-boutons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.5rem;
}

.bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 2rem;
	border: 1px solid var(--encre);
	background: var(--encre);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
}

.bouton:hover,
.bouton:focus-visible {
	background: transparent;
	color: var(--encre);
}

.bouton--clair {
	background: transparent;
	border-color: var(--trait);
	color: var(--encre);
}

.bouton--clair:hover,
.bouton--clair:focus-visible {
	border-color: var(--encre);
	background: var(--encre);
	color: #fff;
}

/* =============================================================================
   5. Contenu des pages et articles
   ========================================================================== */

.page-corps {
	max-width: 46rem;
	margin-inline: auto;
	padding: 3.5rem var(--gouttiere);
}

/* Une page d'accueil porte surtout des raccourcis pleine largeur : on lui
   retire la contrainte de lecture, que l'extension gère elle-même. */
.page-corps--large {
	max-width: none;
	padding-inline: 0;
}

.page-titre {
	margin: 0 0 2rem;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	text-align: center;
}

.page-corps p,
.page-corps ul,
.page-corps ol {
	color: #4a4340;
}

.page-corps img {
	height: auto;
}

.page-corps blockquote {
	margin: 2rem 0;
	padding-left: 1.5rem;
	border-left: 3px solid var(--rose);
	color: var(--gris);
	font-family: var(--serif);
	font-size: 1.15rem;
}

.alignleft {
	float: left;
	margin: 0 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0 0 1rem 1.5rem;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.wp-caption-text,
.wp-element-caption {
	color: var(--gris);
	font-size: 0.85rem;
	text-align: center;
}

.liste-articles {
	display: grid;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.article-resume {
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--trait);
}

.article-resume h2 {
	margin: 0 0 0.5rem;
	font-size: 1.4rem;
}

.article-resume h2 a {
	color: var(--encre);
	text-decoration: none;
}

.article-resume h2 a:hover {
	color: var(--rose-fonce);
}

.article-date {
	margin: 0 0 0.75rem;
	color: var(--gris);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pagination {
	margin-top: 2.5rem;
	text-align: center;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 0.4rem 0.8rem;
	color: var(--encre);
	text-decoration: none;
}

.pagination .current {
	background: var(--encre);
	color: #fff;
}

/* =============================================================================
   6. Pied de page
   ========================================================================== */

.site-pied {
	margin-top: 3rem;
	padding-block: 2.5rem;
	border-top: 1px solid var(--trait);
	background: var(--douceur);
	color: var(--gris);
	font-size: 0.9rem;
}

.site-pied .contenu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.pied-liens ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pied-liens a {
	color: var(--gris);
	text-decoration: none;
}

.pied-liens a:hover {
	color: var(--rose-fonce);
}

/* =============================================================================
   7. Accessibilité
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

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

/* =============================================================================
   8. Image de fond du haut de page (facultative)
   -----------------------------------------------------------------------------
   Une photo d'ambiance derrière le texte. Un voile crème est posé par-dessus :
   sans lui, le texte devient illisible dès que la photo est claire ou chargée,
   et on ne peut pas savoir à l'avance quelle photo sera choisie.
   ========================================================================== */

.hero-enveloppe {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero-enveloppe::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgb(250 247 244 / 0.96) 0%,
		rgb(250 247 244 / 0.88) 45%,
		rgb(250 247 244 / 0.62) 100%
	);
}

.hero--fond {
	position: relative;
	z-index: 1;
}

/* Sur téléphone, le texte passe sous la photo : le voile doit être uniforme
   et plus dense, sinon la lecture devient pénible. */
@media (max-width: 56rem) {
	.hero-enveloppe::before {
		background: rgb(250 247 244 / 0.93);
	}
}

/* =============================================================================
   9. Touches décoratives
   -----------------------------------------------------------------------------
   Deux dégradés très doux posés derrière le haut de page : ils suffisent à
   sortir de l'aplat uniforme, sans aucune image à charger.
   ========================================================================== */

.hero:not(.hero--fond) {
	background:
		radial-gradient(44rem 26rem at 88% 8%, rgb(214 152 146 / 0.16), transparent 62%),
		radial-gradient(38rem 24rem at 4% 92%, rgb(233 220 206 / 0.55), transparent 60%);
}

/*
 * La première section respire un peu moins que les suivantes.
 *
 * Elle suit le haut de page, qui vient déjà de laisser de l'air : leurs deux
 * marges s'additionnaient en un vide que rien ne remplit. Ailleurs dans la
 * page, l'espacement normal reprend — il y sert à séparer deux sujets.
 */
@media (min-width: 56rem) {
	.hero + .studio,
	.hero-enveloppe + .studio {
		padding-top: 2.25rem;
	}

	.hero + .studio .studio-entete,
	.hero-enveloppe + .studio .studio-entete {
		margin-bottom: 1.75rem;
	}
}

/* Filet fin entre le haut de page et la suite : la transition était brutale.
   Sa marge était de 3 rem — trois centimètres de vide au moment précis où l'on
   veut donner envie de continuer. */
.hero::after {
	content: "";
	display: block;
	grid-column: 1 / -1;
	height: 1px;
	margin-top: 1.25rem;
	background: linear-gradient(
		to right,
		transparent,
		rgb(28 26 25 / 0.12) 25%,
		rgb(28 26 25 / 0.12) 75%,
		transparent
	);
}