/*
 * Jetons du design system — issues 01 et 02.
 *
 * Seul fichier du thème autorisé à écrire une couleur ou une taille en dur.
 * Tout le reste consomme ces variables par leur nom : changer une couleur du
 * site reste une modification d'une seule ligne.
 *
 * Source : doc/maquettes/dslib.py (couleurs), planche 2 « Typographie,
 * espacement, structure » (doc/maquettes/gen1.py), brief d'origine
 * doc/prompt-maquettes-bricks-bem.md § 3. Décision champagne : doc/jetons-couleur.md.
 * Les ratios cités sont calculés par dslib.ratio(), pas recopiés.
 */

:root {
	/* --- Couleurs : fonds --------------------------------------------- */
	--pel-ivoire:          #FBF8F4;  /* fond général */
	--pel-sable:           #F2EAE1;  /* sections calmes */
	--pel-champagne-pale:  #EDE9DD;  /* pastilles, badges */
	--pel-lin:             #E8E0D8;  /* filets, bordures ; texte secondaire sur brun (9,63:1) */

	/* --- Couleurs : texte --------------------------------------------- */
	--pel-encre:           #1C1A1B;  /* titres et texte courant */
	--pel-encre-douce:     #4A4342;  /* texte secondaire */
	--pel-gris-chaud:      #6B625F;  /* mentions, légendes */

	/* --- Couleurs : marque -------------------------------------------- */
	--pel-champagne:       #A4956F;  /* aplat seulement : filets, pictos, logo.
	                                    2,79:1 sur ivoire, 4,26:1 sur brun :
	                                    JAMAIS de texte, ni sur clair ni sur brun. */
	--pel-bronze:          #756B4D;  /* la marque quand elle doit être lue : 5,00:1 sur ivoire */

	/* --- Couleurs : action -------------------------------------------- */
	--pel-terre-cuite:     #B4602F;  /* boutons, éléments actifs. Jamais du texte : 4,26:1 sur ivoire.
	                                    Blanc dessus : 4,51:1, donc libellé 16 px graisse 600 minimum. */
	--pel-terre-foncee:    #8E4721;  /* liens en plein texte, survol : 6,45:1 sur ivoire */

	/* --- Couleurs : état ---------------------------------------------- */
	--pel-disponible:      #2F5D3A;  /* « Disponible à vos dates », planche 7 : 6,30:1 sur
	                                    champagne pâle, 7,64 sur blanc. Toujours avec le mot
	                                    et la pastille ronde, jamais la couleur seule. */

	/* --- Couleurs : sombre -------------------------------------------- */
	--pel-brun:            #3A322A;  /* seul grand aplat sombre, pied de page uniquement */

	/* --- Blanc ------------------------------------------------------------ */
	--pel-blanc:           #FFFFFF;  /* fond de l'en-tête et des cartes, texte sur terre cuite */

	/* --- Typographie -------------------------------------------------- */
	--pel-font-titre: "Fraunces", Georgia, serif;           /* titres, jamais sous 22 px */
	--pel-font-texte: "Karla", system-ui, sans-serif;

	--pel-fs-display: clamp(2.5rem, 1.6rem + 3.5vw, 4rem);  /* 40 -> 64 px, héros uniquement */
	--pel-fs-h1:      clamp(2rem, 1.4rem + 2.4vw, 3rem);    /* 32 -> 48 px, un seul par page */
	--pel-fs-h2:      clamp(1.6rem, 1.25rem + 1.4vw, 2.25rem); /* 25,6 -> 36 px */
	--pel-fs-h3:      1.375rem;                             /* 22 px */
	--pel-fs-body:    1.0625rem;                            /* 17 px */
	--pel-fs-small:   0.875rem;                             /* 14 px */
	--pel-fs-nav:     0.9375rem;                            /* 15 px : navigation et bouton d'en-tête.
	                                                           Exception à l'échelle, décidée le 25/09
	                                                           (planche 3, Socle). */

	--pel-lh-titre:   1.15;
	--pel-lh-texte:   1.65;

	/* --- Espacement : base 8, neuf pas, aucune valeur intermédiaire ---- */
	--pel-space-3xs:  4px;
	--pel-space-2xs:  8px;
	--pel-space-xs:  12px;
	--pel-space-s:   16px;
	--pel-space-m:   24px;
	--pel-space-l:   32px;
	--pel-space-xl:  48px;
	--pel-space-2xl: 64px;
	--pel-space-3xl: 96px;

	/* --- Structure ---------------------------------------------------- */
	--pel-container:   1280px;
	--pel-gutter:      var(--pel-space-m);   /* 24 px, 16 px sous 767 */
	--pel-radius-s:    4px;                  /* champs, pastilles */
	--pel-radius-m:    8px;                  /* cartes */
	--pel-radius-l:    16px;                 /* grands visuels */
	--pel-radius-pill: 999px;                /* boutons, puces, filtres */
	--pel-shadow-s:    0 1px 2px rgba(28, 26, 27, .06);   /* cartes au repos */
	--pel-shadow-m:    0 4px 16px rgba(28, 26, 27, .08);  /* survol, barre collante, menu ouvert */
	--pel-filet:       1px;                  /* bordures */
	--pel-trait:       2px;                  /* trait de la rubrique ouverte */
	--pel-cible:       44px;                 /* cible tactile minimale */

	/* --- Mouvement : durées et courbes (issue 221) --------------------- */
	--pel-duree-courte:     200ms;           /* barre collante qui apparaît */
	--pel-duree-roue:       800ms;           /* un tour de la roue de chargement */
	--pel-duree-apparition: 500ms;           /* fondu à l'apparition (pel-fx-*) */
	--pel-courbe:           ease;
	--pel-courbe-lineaire:  linear;
	--pel-courbe-sortie:    cubic-bezier(0.2, 0.7, 0.2, 1);  /* rapide, puis se pose */
	--pel-fx-decalage:      16px;            /* montée de pel-fx-rise */

	/* --- En-tête : planche 3, décisions du 25/09 ---------------------- */
	--pel-entete-h:    92px;                 /* hauteur de la barre, 76 sous 991 */
	--pel-logo-entete: 64px;                 /* hauteur du logo en bloc (96 px de large), 56 sous 991 */
	--pel-icone:       18px;                 /* pictogrammes de l'en-tête */

	/* --- Pied de page : planche 3, décisions du 25/09 ------------------- */
	--pel-logo-pied:   133px;                /* largeur du bloc avec sa ligne LOCATION ; 190 avant le 09/10 (#255) */
	--pel-capitales:   0.12em;               /* interlettrage des intitulés en capitales */

	/* --- Focus : planche 2, issue 06 ---------------------------------- */
	--pel-focus-couleur:  var(--pel-bronze); /* 5,00:1 sur ivoire, 5,29 sur blanc, 4,45 sur sable ;
	                                             ivoire sur le brun, où le bronze ne fait que 2,38 */
	--pel-focus-epaisseur: 3px;
	--pel-focus-decalage:  2px;

	/* --- Éléments : planche 4, issue 07 -------------------------------- */
	--pel-fs-champ:      1rem;               /* 16 px : champs et boutons. Exception à l'échelle
	                                             imposée par iOS, qui zoome sous 16 px (issue 07) */
	--pel-champ-h:       48px;               /* hauteur d'un champ */
	--pel-btn-sm-h:      36px;               /* bouton --sm : 44 de cible par sa zone étendue */
	--pel-btn-lg-h:      52px;
	--pel-bord-champ:    var(--pel-gris-chaud); /* 5,94:1 sur blanc ; le lin n'y faisait que 1,31 */
	--pel-case:          22px;               /* case à cocher */
	--pel-coche:         14px;
	--pel-icone-s:       16px;               /* pictogramme d'erreur, roue de chargement */
	--pel-qty-champ:     56px;               /* largeur du champ de quantité */
	--pel-soulignement:  4px;                /* décalage du soulignement des liens */
	--pel-capitales-legende: 0.08em;         /* légende de fieldset, planche 4 */
	--pel-roue-fond:     rgba(255, 255, 255, .45); /* roue de chargement, sur terre cuite */

	/* --- Fiche produit : planche 7, maquette 4, issue 14 -------------- */
	--pel-pastille:      10px;               /* forme de la pastille de disponibilité */
	--pel-vignette:      88px;               /* vignette de galerie, colonne de gauche */
	--pel-vignette-s:    56px;               /* vignette de l'alternative */
	--pel-barre-h:       68px;               /* barre collante mobile : 12 + 44 + 12 */

	/* --- Projet : planche 8, maquette 5, issue 15 --------------------- */
	--pel-vignette-m:    76px;               /* visuel d'une ligne de projet */
}

/* Points de rupture Bricks : 991, 767, 478 (desktop-first ; 1279 abandonné le 01/10, issue 221). */

/* L'en-tête passe en version mobile dès 991 : la barre desktop mesure 953 px
   et débordait entre 768 et 1000 (issue 55, décidé le 25/09). */
@media (max-width: 991px) {
	:root {
		--pel-entete-h:    76px;
		--pel-logo-entete: 56px;               /* 84 px de large */
	}
}

@media (max-width: 767px) {
	:root {
		--pel-gutter:      var(--pel-space-s);    /* 16 px */
		--pel-logo-pied:   114px;                 /* logo du pied réduit sur mobile (#255) */
	}
}