/* =========================================================================
   RYTHM Lagree Studio, jetons de design
   Toutes les valeurs de couleur sont RELEVÉES sur les visuels de marque
   livrés par le client, pas choisies. Ne pas les modifier sans revenir
   aux fichiers d'origine dans assets/photos/.
   ========================================================================= */

:root {
	/* ---------- Couleurs ---------- */
	--noir:        #0B0A09;  /* fond de page */
	--noir-2:      #131211;  /* surfaces surélevées */
	--noir-3:      #161616;  /* noir de marque, relevé sur les cartes Instagram */
	--ligne:       #262220;  /* filets sur fond noir */

	--creme:       #F1EEE7;  /* relevé sur la carte « La puissance d'un RYTHM lent » */
	--creme-2:     #E7E2D8;  /* surfaces sur fond crème */
	--ligne-creme: #D6CFC2;  /* filets sur fond crème */

	--greige:      #968264;  /* le mur du studio */
	--gris:        #948B7E;  /* texte secondaire sur noir */
	--gris-clair:  #C6BEB2;  /* texte courant sur noir */

	--rouge:       #FF2627;  /* coeur de la barre LED du studio */
	--ambre:       #FCBB2D;  /* halo de la barre LED */
	--rouge-sombre:#A31E19;

	/* Rôles. Les composants n'utilisent QUE ces variables-ci. */
	--fond:            var(--noir);
	--texte:           var(--creme);
	--texte-doux:      var(--gris-clair);
	--texte-faible:    var(--gris);
	--filet:           var(--ligne);
	/* L'accent porte le texte d'appel et les boutons. Il était rouge jusqu'au
	   5 septembre 2026 : le client a demandé de retirer tout le rouge des
	   textes et de revenir au blanc sur noir. Le rouge n'a pas disparu du
	   site pour autant, il reste ce qu'il est dans le studio, une lumière :
	   la barre LED du hero. Il n'est simplement plus une couleur d'encre. */
	--accent:          var(--creme);
	--accent-texte:    #0B0A09;   /* texte posé SUR l'accent */
	--surface:         var(--noir-2);

	/* ---------- Typographie ---------- */
	--f-titre: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--f-texte: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Échelle typographique. Un seul jeu, aucune valeur hors de cette liste. */
	--t-xs:  0.75rem;
	--t-sm:  0.875rem;
	--t-md:  1rem;
	--t-lg:  1.125rem;
	--t-xl:  clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
	--t-2xl: clamp(1.6rem, 1.25rem + 1.5vw, 2.25rem);
	--t-3xl: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem);
	--t-4xl: clamp(2.6rem, 1.6rem + 4.4vw, 4.75rem);

	/* Réglages de la fonte variable Archivo */
	--wdth-large:  115;  /* accroches, titres de section */
	--wdth-normal: 100;  /* texte courant */
	--wdth-etroit:  88;  /* étiquettes, surtitres */

	/* ---------- Espacement ---------- */
	--e-1: 0.25rem;
	--e-2: 0.5rem;
	--e-3: 0.75rem;
	--e-4: 1rem;
	--e-5: 1.5rem;
	--e-6: 2rem;
	--e-7: 3rem;
	--e-8: 4rem;
	--e-9: clamp(4rem, 3rem + 5vw, 7rem);   /* respiration entre sections */

	/* ---------- Mise en page ---------- */
	--page:      min(1180px, 100% - 2.5rem);
	--page-etroit: min(760px, 100% - 2.5rem);
	--rayon:     2px;   /* presque rien : l'univers est anguleux */

	/* ---------- Mouvement ---------- */
	--duree-courte: 180ms;
	--duree-moyenne: 420ms;
	--duree-longue: 900ms;
	--courbe: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* ---------- Divers ---------- */
	--barre-mobile: 64px;  /* hauteur de la barre d'action fixe sur mobile */
}

/* Bandeau clair. Inverse les rôles, pas les valeurs brutes :
   tout composant placé dedans suit sans être modifié. */
.sur-creme {
	--fond:         var(--creme);
	--texte:        var(--noir-3);
	--texte-doux:   #4A443C;
	--texte-faible: #6E675C;
	--filet:        var(--ligne-creme);
	--surface:      var(--creme-2);
	/* Le rouge tombe à 4,0:1 sur le crème : il ne porte plus le texte.
	   L'appel à l'action repasse en noir sur les bandeaux clairs. */
	--accent:       var(--noir-3);
	--accent-texte: var(--creme);
}