/*
Theme Name: Ciel Natal
Theme URI: https://cielnatal.fr
Author: [À FOURNIR]
Author URI: https://cielnatal.fr
Description: Thème de blocs pour Ciel Natal : vente de thèmes astraux, contenus d'astrologie à deux niveaux de lecture et section d'astronomie d'observation. Fond de constellations, polices hébergées localement, données structurées intégrées.
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 7.4
Version: 2.1.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ciel-natal
Tags: block-patterns, full-site-editing, blog, one-column, wide-blocks, custom-colors, custom-menu, editor-style, featured-images, translation-ready, accessibility-ready
*/

/* -------------------------------------------------------------------------
   L'essentiel de la mise en forme est piloté par theme.json.
   Ce fichier ne contient que ce qui ne s'exprime pas en presets.
   ------------------------------------------------------------------------- */

/* Fond de constellations.
   Le tracé reprend les positions équatoriales J2000 réelles d'Orion, de la
   Grande Ourse, de Cassiopée, du Cygne et de la Lyre. Image décorative :
   elle reste en arrière-plan, ne porte aucune information et n'est pas
   annoncée aux lecteurs d'écran. */
body {
	background-image: url(assets/img/constellations.svg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	background-attachment: fixed;
}

/* Les fonds fixes sont coûteux au défilement sur mobile : on repasse en
   défilement normal sous 48rem. */
@media (width <= 48rem) {
	body {
		background-attachment: scroll;
		background-size: 220% auto;
	}
}

/* Les sections colorées masquent volontairement le fond pour préserver
   le contraste du texte. */
.wp-block-group.has-background,
.wp-block-column.has-background {
	position: relative;
}

/* Lien d'évitement : visible seulement au clavier. */
.skip-link.screen-reader-text {
	background-color: var(--wp--preset--color--surface);
	border-radius: 4px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.875rem;
	padding: 0.75rem 1.25rem;
	text-decoration: none;
}

/* Marque du site, dans l'en-tête. Élément décoratif : le nom du site,
   juste à côté, porte l'information. */
.cn-logo {
	display: block;
	flex: 0 0 auto;
	height: 44px;
	width: 44px;
}

@media (width <= 48rem) {
	.cn-logo {
		height: 36px;
		width: 36px;
	}
}

/* Glyphes du zodiaque. */
.cn-glyphe {
	color: var(--wp--preset--color--accent);
	font-size: 2.75rem;
	line-height: 1;
	margin: 0;
	text-align: center;
}

/* Formulaire de commande. */
.cn-formulaire {
	font-family: var(--wp--preset--font-family--interface);
}

.cn-formulaire__grille {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (width <= 40rem) {
	.cn-formulaire__grille {
		grid-template-columns: 1fr;
	}
}

.cn-champ--large {
	grid-column: 1 / -1;
}

.cn-champ {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
}

.cn-champ label {
	color: var(--wp--preset--color--contrast);
	font-size: 0.875rem;
	font-weight: 600;
}

.cn-champ input[type="text"],
.cn-champ input[type="email"],
.cn-champ input[type="date"],
.cn-champ input[type="time"],
.cn-champ select,
.cn-champ textarea {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 8px;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	padding: 0.7rem 0.85rem;
	width: 100%;
}

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

.cn-champ--case {
	align-items: flex-start;
	display: grid;
	gap: 0.6rem;
	grid-template-columns: auto 1fr;
}

.cn-champ--case input {
	margin-top: 0.25rem;
}

.cn-champ--case label {
	font-size: 0.875rem;
	font-weight: 400;
}

.cn-aide {
	color: var(--wp--preset--color--contrast-doux);
	font-size: 0.8125rem;
	margin: 0;
}

.cn-formulaire__actions {
	margin: 1.75rem 0 0.75rem;
}

.cn-formulaire button[type="submit"] {
	background-color: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 999px;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--interface);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0.85rem 1.75rem;
	text-transform: uppercase;
}

.cn-formulaire button[type="submit"]:hover,
.cn-formulaire button[type="submit"]:focus-visible {
	background-color: var(--wp--preset--color--accent-clair);
	border-color: var(--wp--preset--color--accent-clair);
}

/* Blocs dépliables : marqueur discret. */
.wp-block-details summary {
	cursor: pointer;
}

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

/* Tableaux : défilement horizontal plutôt que débordement de page. */
.wp-block-table {
	overflow-x: auto;
}

/* Respect des préférences d'animation réduite. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}