/*
======================================================================
Much Ado
Global CSS
======================================================================
*/

:root{
	/* --------------------------------------------------
	   COLORS
	-------------------------------------------------- */
	--color-white:#ffffff;
	--color-black:#000000;
	--color-background:#171717;
	--color-lightbrown:#312d2d;
	--color-footerbg:#2c2727;
	--color-footertext:#f1e4c7;
	--color-textdarker:#c9c9c9;
	--color-crown:#e6ca86;
	--color-border:#2a2a2a;
	--color-success:#22c55e;
	--color-warning:#f59e0b;
	--color-redlogo:#a6171a;
	--color-danger:#a6171a;

	/*
	| Couleur d'action principale : utilisée par .button--primary, qui est
	| le bouton le plus vu du site (soumission des pré-inscriptions,
	| "Découvrir la saison", "Accepter" du bandeau cookies...). Le doré
	| reprend la couronne du logo plutôt que d'introduire une troisième
	| couleur d'accent en plus du rouge et du doré déjà en place.
	*/
	--color-primary:var(--color-crown);
	--color-primary-text:#231c12; /* texte sombre : le doré est trop clair pour du blanc */

	/*
	| Surface claire utilisée sur fond sombre : champs de formulaire,
	| citations mises en avant. Un ivoire chaud plutôt qu'un blanc pur,
	| pour rester dans la palette du site.
	*/
	--color-surface-light:#f4ead3;
	--color-surface-light-text:#241d13;
	--color-surface-light-border:#d8c9a0;
	--color-surface-light-placeholder:#8a7d61;

	/*
	| Séparateurs et cartes claires : réutilisent les tokens déjà en place
	| plutôt que d'introduire de nouvelles teintes. Comme --color-primary,
	| ces deux-là étaient utilisées sans jamais être définies.
	*/
	--color-hr:var(--color-border);
	--color-light:var(--color-surface-light);

	/* --------------------------------------------------
	   TYPOGRAPHY
	-------------------------------------------------- */
	--font-body: "Ubuntu", sans-serif;
	--font-heading:"Caudex",serif;
	--font-hand: "Patrick Hand", cursive;
	--font-script: "Shadows Into Light", cursive;

	/* --------------------------------------------------
	   FONT SIZES
	-------------------------------------------------- */
  	--fs-xs:0.75rem;	/* 12px — mentions légales, légendes */
  	--fs-sm:0.875rem;	/* 14px — texte secondaire, métadonnées */
  	--fs-base:1rem;		/* 16px — corps de texte standard */

	/*
	| Taille RÉELLEMENT appliquée au texte de lecture en --font-body (Ubuntu).
	|
	| Séparée de --fs-base à dessein : --fs-base est un repère de taille
	| neutre (16px), utilisé aussi par des éléments qui ne sont pas du texte
	| de lecture (étiquettes, valeurs chiffrées...). Ubuntu a un x-height
	| modeste et paraît plus petite qu'une police classique à taille égale
	| — cette variable compense cet écart optique, uniquement là où Ubuntu
	| sert réellement à afficher des paragraphes.
	|
	| Si la police de corps change un jour, seule cette valeur est à
	| réévaluer — pas chaque endroit qui utilise --fs-base pour autre chose.
	*/
	--font-body-size:1.125rem;	/* 18px */
  	--fs-md:1.25rem;	/* 20px — chapô, texte d'accroche */
  	--fs-lg:1.5rem;		/* 24px — texte mis en avant */
	--fs-hero-text:1rem;
	--fs-xl:2rem;
	--fs-xxl:3rem;
	--fs-4xl:4rem;
	--fs-big:clamp(4rem,8vw,7rem);

	/*
	| Manquait : h1{font-size:var(--fs-3xl)} sur desktop se retrouvait donc
	| sans taille définie, retombant sur la valeur par défaut du navigateur.
	| Positionnée entre --fs-xxl (3rem) et --fs-4xl (4rem).
	*/
	--fs-3xl:3.5rem;

	/* --------------------------------------------------
	   TITRES
	-------------------------------------------------- */
	--fs-h6: 1rem;         /* 16px */
	--fs-h5: 1.25rem;      /* 20px */
	--fs-h4: 1.5rem;       /* 24px */
	--fs-h3: 1.875rem;     /* 30px */
	--fs-h2: 2.25rem;      /* 36px */
	--fs-h1: 3rem;         /* 48px */

	/* --------------------------------------------------
	   GRANDS TITRES / HERO
	-------------------------------------------------- */
	--fs-hero: 3.75rem;    /* 60px */
	--fs-display: 4.5rem;  /* 72px */
	--fs-display-lg: 6rem; /* 96px */

	/* --------------------------------------------------
	   SPACING
	-------------------------------------------------- */
	--space-1:.25rem;
	--space-6:.5rem;
	--space-12:.75rem;
	--space-16:1rem;
	--space-24:1.5rem;
	--space-32:2rem;
	--space-48:3rem;
	--space-64:4rem;
	--space-96:6rem;
	--space-128:8rem;

	/*
	| Ces quatre valeurs étaient utilisées (template-contact.css, layout.css)
	| sans jamais être définies. Ajoutées selon la même convention que le
	| reste de l'échelle : le nombre dans le nom correspond au pixel.
	*/
	--space-2:.125rem;
	--space-3:.1875rem;
	--space-8:.5rem;
	--space-10:.625rem;

	/* --------------------------------------------------
	   LAYOUT
	-------------------------------------------------- */
	--container-width:1200px;
	--container-hero:1000px;
	--container-small:800px;

	/* --------------------------------------------------
	   RADIUS
	-------------------------------------------------- */
	--radius-none:0px;
	--radius-small:6px;
	--radius:12px;
	--radius-large:24px;
	--radius-round:999px;

	/*
	| Ombre portée utilisée par les boutons et l'en-tête au survol, jamais
	| définie jusqu'ici.
	*/
	--shadow:0 12px 32px rgba(0,0,0,.4);

	/* --------------------------------------------------
	   TRANSITIONS
	-------------------------------------------------- */
	--transition-fast:.15s ease;
	--transition:.3s ease;
	--transition-slow:.5s ease;

	/* --------------------------------------------------
	   HEADER
	-------------------------------------------------- */
	--header-height:100px;

	/* --------------------------------------------------
	   Z-INDEX
	-------------------------------------------------- */
	--z-header:1000;
	--z-menu:2000;
	--z-overlay:3000;
	--z-modal:4000;
}

/* =====================================================
   RESET
===================================================== */

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

html{
	scroll-behavior:smooth;
	overflow-x:hidden;
}

body{
	margin:0;
	padding:0;
	background:var(--color-background);
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}

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

picture,
svg{
	display:block;
}

figure{
	margin:0;
}

ul,
ol{
	margin:0;
	padding:0;
	list-style:none;
}

button,
input,
textarea,
select{
	font:inherit;
}

button{
	border:none;
	background:none;
	cursor:pointer;
}

iframe{
	display:block;
	width:100%;
	border:none;
}

table{
	width:100%;
	border-collapse:collapse;
}