/* Page de maintenance Cuir'ô'Folies — aucune ressource externe.
   Polices auto-hébergées, images locales : la page s'affiche entièrement
   même si le visiteur bloque les domaines tiers, et aucune adresse IP ne
   part chez personne. C'est la règle que la boutique s'est fixée. */

@font-face {
	font-family: "Great Vibes";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/GreatVibes-Regular-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
	               U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
	               U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Great Vibes";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/GreatVibes-Regular-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
	               U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--bordeaux: #B6244F;
	--bordeaux-fonce: #8E1C3D;
	--encre: #2B2320;
	--creme: #F7F2EE;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 2rem 1.25rem;

	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	color: var(--encre);
	text-align: center;

	/* Le cuir coloré de l'en-tête de la boutique, voilé de crème pour que le
	   texte reste lisible par-dessus. La photo est fixée en fond de page :
	   `cover` évite toute déformation quel que soit l'écran. */
	background:
		linear-gradient(rgba(247, 242, 238, .88), rgba(247, 242, 238, .94)),
		url("assets/cuir.jpg") center / cover no-repeat;
	background-color: var(--creme);
}

.page {
	max-width: 44rem;
	width: 100%;
}

.logo {
	width: clamp(6rem, 18vw, 10rem);
	height: auto;
	margin-bottom: 1.5rem;
}

.marque {
	margin: 0;
	font-family: "Great Vibes", cursive;
	/* La taille suit la largeur de l'écran sans jamais descendre sous une
	   valeur lisible ni dépasser une valeur qui déborderait sur mobile. */
	font-size: clamp(2.75rem, 1.5rem + 6vw, 5.5rem);
	line-height: 1.1;
	color: var(--bordeaux);
}

.titre {
	margin: .75rem 0 .25rem;
	font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
	font-weight: 600;
	letter-spacing: .01em;
}

.sous-titre {
	margin: 0 0 2.5rem;
	font-size: 1.05rem;
	color: #6B5F59;
}

.compteur {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
}

.bloc {
	flex: 1 1 6.5rem;
	max-width: 9rem;
	padding: 1rem .5rem .75rem;
	background: rgba(255, 255, 255, .82);
	border: 1px solid rgba(182, 36, 79, .18);
	border-radius: 10px;
}

.nombre {
	display: block;
	font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
	font-weight: 700;
	line-height: 1;
	color: var(--bordeaux-fonce);
	/* Chiffres à chasse fixe : sans cela, la largeur du bloc tressaute à
	   chaque seconde quand un 1 remplace un 8. */
	font-variant-numeric: tabular-nums;
}

.unite {
	display: block;
	margin-top: .4rem;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #6B5F59;
}

.annonce {
	margin: 2rem 0 0;
	font-size: 1.05rem;
	color: var(--bordeaux-fonce);
	min-height: 1.5em;
}

/* État atteint quand le compte à rebours tombe à zéro : les secondes n'ont
   plus de sens, et le message prend toute la place. */
.termine .compteur { display: none; }

/* Le jour J, « Retour prévu le 10 octobre » à côté de « rouvre aujourd'hui »
   se contredit : la ligne d'annonce dit déjà tout. */
.termine .sous-titre { display: none; }

.termine .annonce {
	font-size: clamp(1.25rem, 1rem + 1.2vw, 1.6rem);
	font-weight: 600;
}

@media (max-width: 24rem) {
	/* Sous 384 px, quatre blocs côte à côte deviennent illisibles : les
	   secondes passent à la ligne plutôt que d'écraser les trois autres. */
	.bloc { flex-basis: 7rem; }
}