/* JOAS · Jetons de design
 * Source unique des couleurs, typographies, rayons et ombres,
 * relevés sur les maquettes validées (octobre 2026).
 * Le thème et les écrans du back-office lisent ces variables.
 */
:root{
	/* Marque */
	--jo-green:#014551;          /* bleu foncé : texte principal, boutons de transaction */
	--jo-coral:#CF5F58;          /* rose corail : grands titres, fonds, pastille du header */
	--jo-coral-text:#A84A43;     /* corail lisible en petite taille : prix, liens */
	--jo-coral-dark:#8C3C36;
	--jo-coral-light:#E28A7F;    /* titres du pied de page */
	--jo-ocre:#DEB162;           /* ocre : survols, méga-menu, étoiles */
	--jo-ocre-dark:#9A7424;
	--jo-beige:#BA9B68;
	--jo-teal:#066C80;           /* bleu canard : focus, bandeau du copyright */

	/* Neutres et fonds */
	--jo-white:#FFFFFF;
	--jo-cream:#FFF6ED;          /* fond du header */
	--jo-cream-2:#FBF6ED;        /* menu mobile */
	--jo-sand:#E9DEC8;           /* fond des barres de progression */
	--jo-sand-2:#F4EFE4;         /* survol des accordéons */
	--jo-sand-3:#F3E9D6;
	--jo-sand-4:#F0E4CE;
	--jo-sand-5:#DCCDAE;         /* étoiles vides */
	--jo-sand-6:#ECE7DF;
	--jo-rose-pale:#FBEDEB;      /* fond des champs de formulaire */
	--jo-rose-2:#F4D3CE;
	--jo-rose-3:#F9D9D5;
	--jo-ink-soft:#5F5A52;       /* texte secondaire */
	--jo-teal-soft:#6B8A90;

	/* États */
	--jo-error:#B3261E;
	--jo-success:#3B7A4A;
	--jo-success-bg:#DCEBDD;
	--jo-info-bg:#D6ECEF;

	/* Lignes et ombres */
	--jo-line:rgba(1,69,81,0.12);
	--jo-line-strong:rgba(1,69,81,0.25);
	--jo-shadow-menu:0 18px 36px rgba(1,69,81,0.16);
	--jo-shadow-panel:0 18px 36px rgba(1,69,81,0.18);
	--jo-shadow-header:0 6px 20px rgba(1,69,81,0.12);

	/* Typographies */
	--font-display:'Soap','Caprasimo',Georgia,serif;
	--font-body:'Quicksand',system-ui,sans-serif;

	/* Rayons */
	--jo-r-btn:4px;
	--jo-r-card:6px;
	--jo-r-choice:8px;
	--jo-r-pill:999px;

	/* Mise en page */
	--jo-container:1244px;
	--jo-gutter:48px;
	--jo-header-h:96px;
	--jo-bar-h:40px;

	/* Mouvement */
	--jo-ease:cubic-bezier(.2,.7,.2,1);
	--jo-ease-out:cubic-bezier(.2,.9,.25,1);
}
@media (max-width:1000px){:root{--jo-gutter:24px}}
@media (max-width:560px){:root{--jo-gutter:20px;--jo-header-h:64px}}