/* ==========================================================================
   CRÉA — Design tokens
   Source : Charte graphique Mercātus (CRÉA stratégie complète, p.16-17)
   ========================================================================== */

:root {
	/* --- Palette de marque (valeurs exactes de la charte) --- */
	--crea-navy:        #002f6c; /* bleu marine, dominante */
	--crea-gold:        #d9a441; /* doré, accent */
	--crea-terracotta:  #b45f38; /* terracotta, accent secondaire */
	--crea-cream:       #f4e3c1; /* crème, fonds et respirations */

	/* --- Déclinaisons calculées (respirations, états, hairlines) --- */
	--crea-navy-900:    #001c40;
	--crea-navy-700:    #002556;
	--crea-navy-400:    #4a6a99;
	--crea-navy-200:    #b3c0d3;

	/*
	 * Doré assombri pour le petit texte. Le doré de la charte tombe à 3:1 sur
	 * le crème, sous le seuil AA de 4.5:1 : cette déclinaison passe à 4.7:1
	 * sans changer la teinte. Le doré d'origine reste intact pour les aplats.
	 */
	--crea-gold-600:    #8a6320;
	--crea-gold-200:    #eed9a8;
	--crea-gold-050:    #f9f0dc;

	--crea-terra-600:   #944826;

	--crea-cream-300:   #f8eed8; /* bandes de respiration */
	--crea-cream-100:   #fbf6ec; /* fond de page par défaut */
	--crea-cream-050:   #fdfaf5; /* cartes, surfaces surélevées */

	--crea-white:       #ffffff;
	--crea-ink:         #1c2333; /* texte long, plus lisible que le navy pur */
	--crea-ink-muted:   #5d6577;

	/* --- Rôles sémantiques --- */
	--crea-bg:              var(--crea-cream-100);
	--crea-bg-alt:          var(--crea-cream-300);
	--crea-surface:         var(--crea-cream-050);
	--crea-text:            var(--crea-ink);
	--crea-text-muted:      var(--crea-ink-muted);
	--crea-heading:         var(--crea-navy);
	--crea-accent:          var(--crea-gold);
	--crea-accent-2:        var(--crea-terracotta);
	--crea-rule:            rgba(0, 47, 108, .14);
	--crea-rule-gold:       rgba(217, 164, 65, .45);

	/* --- Typographie --- */
	--crea-font-display: "The Seasons", "Didot", "Bodoni MT", "Times New Roman", serif;
	--crea-font-body:    "Open Sauce", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	/* Échelle fluide — mobile-first, cap desktop */
	--crea-fs-display:  clamp(2.5rem,  1.6rem + 4.4vw,  5.25rem);
	--crea-fs-h1:       clamp(2.1rem,  1.5rem + 2.8vw,  3.6rem);
	--crea-fs-h2:       clamp(1.7rem,  1.35rem + 1.7vw, 2.6rem);
	--crea-fs-h3:       clamp(1.3rem,  1.15rem + 0.8vw, 1.75rem);
	--crea-fs-h4:       clamp(1.1rem,  1.03rem + 0.4vw, 1.3rem);
	--crea-fs-body:     clamp(1rem,    0.97rem + 0.16vw, 1.075rem);
	--crea-fs-small:    0.875rem;
	--crea-fs-micro:    0.75rem;

	--crea-lh-display:  1.04;
	--crea-lh-heading:  1.14;
	--crea-lh-body:     1.72;

	--crea-ls-display:  -0.015em;
	--crea-ls-eyebrow:  0.22em; /* surtitres en capitales */
	--crea-ls-button:   0.12em;

	/* --- Rythme spatial (base 8, rythme calme) --- */
	--crea-sp-1:  0.25rem;
	--crea-sp-2:  0.5rem;
	--crea-sp-3:  0.75rem;
	--crea-sp-4:  1rem;
	--crea-sp-5:  1.5rem;
	--crea-sp-6:  2rem;
	--crea-sp-7:  3rem;
	--crea-sp-8:  4rem;
	--crea-sp-9:  6rem;
	--crea-sp-10: 8rem;

	/* Respiration verticale entre sections — généreuse, jamais serrée */
	--crea-section-y: clamp(3.5rem, 2rem + 7vw, 8rem);

	/* --- Grille --- */
	--crea-container:      1320px;
	--crea-container-text: 720px;  /* mesure de lecture confortable */
	--crea-container-wide: 1600px;
	--crea-gutter:         clamp(1.25rem, 0.6rem + 3vw, 3rem);

	/* --- Traits, rayons, ombres --- */
	--crea-radius-none: 0;
	--crea-radius-sm:   2px;
	--crea-radius:      3px;   /* la marque reste anguleuse : quasi pas d'arrondi */
	--crea-border:      1px solid var(--crea-rule);

	--crea-shadow-sm: 0 1px 2px rgba(0, 28, 64, .05);
	--crea-shadow:    0 12px 32px -18px rgba(0, 28, 64, .35);
	--crea-shadow-lg: 0 30px 70px -40px rgba(0, 28, 64, .5);

	/* --- Mouvement : posé, jamais nerveux --- */
	--crea-ease:      cubic-bezier(.22, .61, .36, 1);
	--crea-dur:       .45s;
	--crea-dur-fast:  .22s;

	/* --- Ratios d'image éditoriaux --- */
	--crea-ratio-portrait: 3 / 4;
	--crea-ratio-product:  4 / 5;
	--crea-ratio-hero:     16 / 9;

	/* --------------------------------------------------------------------
	   Motifs
	   Vocabulaire graphique repris du logo CRÉA : la colonne de pastilles
	   dorées et de chevrons terracotta qui sépare le C du R. On le décline en
	   trames de fond plutôt que d'importer des photos de planche d'ambiance,
	   dont les droits ne sont pas acquis. Servis en data-URI : aucune requête
	   supplémentaire, et quelques centaines d'octets au lieu de 300 Ko.
	   -------------------------------------------------------------------- */

	/* Losange amazigh, repris des broderies photographiées par la marque */
	--crea-motif-losange:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23002f6c' stroke-width='1.1'%3E%3Cpath d='M36 3 69 36 36 69 3 36Z'/%3E%3Cpath d='M36 17 55 36 36 55 17 36Z'/%3E%3Ccircle cx='36' cy='36' r='3.5' fill='%23002f6c' stroke='none'/%3E%3C/g%3E%3C/svg%3E");

	/* Même trame, tracée en crème pour les fonds marine */
	--crea-motif-losange-clair:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23f4e3c1' stroke-width='1.1'%3E%3Cpath d='M36 3 69 36 36 69 3 36Z'/%3E%3Cpath d='M36 17 55 36 36 55 17 36Z'/%3E%3Ccircle cx='36' cy='36' r='3.5' fill='%23f4e3c1' stroke='none'/%3E%3C/g%3E%3C/svg%3E");

	/* La colonne du logo : pastille dorée, chevron terracotta, en alternance */
	--crea-motif-colonne:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='64' viewBox='0 0 22 64'%3E%3Ccircle cx='11' cy='10' r='4.5' fill='%23d9a441'/%3E%3Cpath d='M4 26 11 34 18 26' fill='none' stroke='%23b45f38' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='11' cy='48' r='4.5' fill='%23d9a441'/%3E%3C/svg%3E");

	--crea-header-h: 76px;
	--crea-z-header: 200;
	--crea-z-drawer: 400;
	--crea-z-overlay: 380;
}

@media (min-width: 1000px) {
	:root { --crea-header-h: 92px; }
}