/*
Theme Name:  Boussolio
Theme URI:   https://boussolio.com/
Author:      Boussolio
Author URI:  https://boussolio.com/
Description: Thème de blocs sur mesure pour Boussolio — comparateur français d'outils et de services numériques pour créateurs d'entreprise, auto-entrepreneurs, indépendants et TPE. Coquille plein écran à trois panneaux, animations natives pilotées au défilement (sans JavaScript), composants de comparaison et d'affiliation. Compatible Gutenberg et éditeur du site.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
Version:     1.0.1
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: boussolio
Tags:        blog, news, one-column, three-columns, custom-colors, custom-logo, custom-menu, editor-style, block-patterns, block-styles, full-site-editing, accessibility-ready, translation-ready, wide-blocks

Boussolio est distribué sous licence GNU General Public License v2 ou ultérieure.
*/

/*
 * ---------------------------------------------------------------------------
 * Ce fichier ne contient QUE l'en-tête du thème et les jetons de conception.
 *
 * Les styles sont répartis par responsabilité dans assets/css/ :
 *   shell.css       la coquille à trois panneaux et la barre inférieure
 *   components.css  cartes, tableaux comparatifs, blocs d'affiliation
 *   animations.css  animations pilotées au défilement, en CSS natif
 *
 * theme.json porte les réglages exposés à l'éditeur de blocs. Les valeurs
 * ci-dessous et celles de theme.json sont volontairement alignées : si vous
 * modifiez une couleur, modifiez-la aux deux endroits.
 * ---------------------------------------------------------------------------
 */

:root {
	/* ---- Marque -------------------------------------------------------- */
	/* Relevées sur le site existant le 25/08/2026, conservées à l'identique
	   pour ne pas rompre la reconnaissance de la marque. */
	--bo-navy:          #1b3a6b;  /* titres, identité */
	--bo-navy-deep:     #12213f;  /* panneau de navigation */
	--bo-navy-darker:   #0d1830;  /* fonds très sombres */
	--bo-ink:           #1f2430;  /* texte courant */
	/*
	 * Le corail de la marque est CONSERVÉ TEL QUEL. Ce qui change, après
	 * mesure, c'est la couleur du texte posé dessus : blanc sur #ff6b4a ne
	 * donne que 2,82:1, très en dessous du seuil AA de 4,5:1. Avec l'encre du
	 * site, le même corail donne 5,51:1. On garde donc la couleur et on
	 * corrige le texte.
	 */
	--bo-coral:         #ff6b4a;  /* surfaces cliquables — couleur de marque */
	--bo-coral-hover:   #ff8566;  /* survol : on ÉCLAIRCIT, pour garder le contraste */
	--bo-sur-coral:     #1f2430;  /* texte posé sur du corail — 5,51:1 */
	/*
	 * Corail employé comme TEXTE sur fond clair : #e5512f ne donne que
	 * 3,78:1. Il faut descendre à #c2410c pour atteindre 5,18:1.
	 */
	--bo-coral-texte:   #c2410c;
	--bo-coral-dark:    #e5512f;  /* conservé pour les bordures et les traits */

	/* ---- Surfaces ------------------------------------------------------ */
	--bo-surface:       #ffffff;
	--bo-surface-2:     #f7f9fc;  /* fond de page */
	--bo-surface-3:     #eef2f8;  /* cartes en retrait */
	--bo-border:        #dde4ee;
	--bo-border-strong: #c3cede;

	/* ---- Texte --------------------------------------------------------- */
	--bo-text:          #1f2430;
	--bo-text-soft:     #4a5568;  /* 7,1:1 sur blanc */
	--bo-text-faint:    #667085;  /* 5,3:1 sur blanc — jamais sous 14px */
	--bo-text-invert:   #ffffff;

	/* ---- Sémantique ---------------------------------------------------- */
	/* Utilisées pour avantages / inconvénients / avertissements.
	   Jamais employées seules : toujours doublées d'un mot ou d'une icône,
	   pour rester lisibles en cas de daltonisme. */
	--bo-pro:           #0f7a52;
	--bo-pro-bg:        #e7f6ef;
	--bo-con:           #b42318;
	--bo-con-bg:        #fdeceb;
	--bo-warn:          #a15c07;
	--bo-warn-bg:       #fdf3e4;
	--bo-info:          #1b3a6b;
	--bo-info-bg:       #eaf0fa;

	/* ---- Typographie --------------------------------------------------- */
	/* Manrope est déjà la police du site : conservée. Pile de repli complète
	   pour que le texte reste lisible si la police ne charge pas. */
	--bo-font: "Manrope", ui-sans-serif, system-ui, -apple-system,
	           "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bo-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
	                Consolas, "Liberation Mono", monospace;

	/* Échelle fluide : se resserre sur téléphone, respire sur grand écran.
	   clamp() évite toute requête média pour la taille du texte. */
	--bo-fs-xs:   0.8125rem;                              /* 13px */
	--bo-fs-sm:   0.875rem;                               /* 14px */
	--bo-fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	--bo-fs-lg:   clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
	--bo-fs-xl:   clamp(1.375rem, 1.28rem + 0.45vw, 1.625rem);
	--bo-fs-2xl:  clamp(1.75rem, 1.55rem + 0.95vw, 2.25rem);
	--bo-fs-3xl:  clamp(2.125rem, 1.75rem + 1.85vw, 3.25rem);

	--bo-lh-tight: 1.18;
	--bo-lh-snug:  1.35;
	--bo-lh-base:  1.65;

	/* ---- Espacement ---------------------------------------------------- */
	--bo-sp-1:  0.25rem;
	--bo-sp-2:  0.5rem;
	--bo-sp-3:  0.75rem;
	--bo-sp-4:  1rem;
	--bo-sp-5:  1.5rem;
	--bo-sp-6:  2rem;
	--bo-sp-7:  3rem;
	--bo-sp-8:  4rem;
	--bo-sp-9:  6rem;

	/* ---- Formes -------------------------------------------------------- */
	/* Coins équilibrés : nets sur les petits éléments, plus doux sur les
	   grandes surfaces. */
	--bo-r-sm:  6px;
	--bo-r-md:  10px;
	--bo-r-lg:  14px;
	--bo-r-xl:  20px;
	--bo-r-pill: 999px;

	/* ---- Ombres -------------------------------------------------------- */
	/* Discrètes et teintées de marine, jamais du noir pur : le noir pur sur
	   fond clair paraît sale. */
	--bo-shadow-1: 0 1px 2px rgba(18, 33, 63, 0.05),
	               0 1px 3px rgba(18, 33, 63, 0.06);
	--bo-shadow-2: 0 2px 4px rgba(18, 33, 63, 0.05),
	               0 6px 16px rgba(18, 33, 63, 0.08);
	--bo-shadow-3: 0 4px 8px rgba(18, 33, 63, 0.06),
	               0 16px 32px rgba(18, 33, 63, 0.10);

	/* ---- Coquille ------------------------------------------------------ */
	--bo-rail-left:   276px;  /* panneau de navigation */
	--bo-rail-right:  312px;  /* panneau contextuel */
	--bo-bottombar:   56px;   /* barre inférieure */
	--bo-header:      64px;   /* en-tête mobile */
	--bo-content-max: 76ch;   /* longueur de ligne confortable en lecture */

	/* ---- Mouvement ----------------------------------------------------- */
	--bo-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
	--bo-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
	--bo-dur-fast:  140ms;
	--bo-dur:       240ms;
	--bo-dur-slow:  420ms;

	/* ---- Empilement ---------------------------------------------------- */
	--bo-z-content:  1;
	--bo-z-rail:     20;
	--bo-z-bottom:   30;
	--bo-z-header:   40;
	--bo-z-drawer:   50;
	--bo-z-overlay:  49;
}

/*
 * Thème sombre — suit le réglage du système.
 * Aucune couleur n'est définie UNIQUEMENT ici : ce bloc redéfinit des jetons
 * déjà déclarés au-dessus, de sorte qu'un navigateur qui ignore la requête
 * média obtient malgré tout une page complète et lisible.
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-bo-theme="light"]) {
		--bo-surface:       #131a26;
		--bo-surface-2:     #0d131d;
		--bo-surface-3:     #1b2433;
		--bo-border:        #263145;
		--bo-border-strong: #36435c;

		--bo-text:          #e8edf5;
		--bo-text-soft:     #b3bece;
		--bo-text-faint:    #8e9bb0;
		--bo-text-invert:   #0d131d;

		--bo-navy:          #8fb2e8;
		--bo-navy-deep:     #0b1220;
		--bo-navy-darker:   #070c16;
		--bo-ink:           #e8edf5;

		--bo-coral:         #ff7d5f;
		--bo-coral-dark:    #ff6b4a;

		--bo-pro:           #58d3a0;
		--bo-pro-bg:        #10291f;
		--bo-con:           #ff8b80;
		--bo-con-bg:        #2c1512;
		--bo-warn:          #e5b063;
		--bo-warn-bg:       #2a1f0d;
		--bo-info:          #8fb2e8;
		--bo-info-bg:       #101c30;

		--bo-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
		--bo-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.32), 0 6px 16px rgba(0, 0, 0, 0.38);
		--bo-shadow-3: 0 4px 8px rgba(0, 0, 0, 0.34), 0 16px 32px rgba(0, 0, 0, 0.44);
	}
}

/* Choix explicite du visiteur — prime sur le réglage système, dans les deux sens. */
:root[data-bo-theme="dark"] {
	--bo-surface:       #131a26;
	--bo-surface-2:     #0d131d;
	--bo-surface-3:     #1b2433;
	--bo-border:        #263145;
	--bo-border-strong: #36435c;
	--bo-text:          #e8edf5;
	--bo-text-soft:     #b3bece;
	--bo-text-faint:    #8e9bb0;
	--bo-text-invert:   #0d131d;
	--bo-navy:          #8fb2e8;
	--bo-navy-deep:     #0b1220;
	--bo-navy-darker:   #070c16;
	--bo-ink:           #e8edf5;
	--bo-coral:         #ff7d5f;
	--bo-coral-hover:   #ff9578;
	--bo-sur-coral:     #0d131d;  /* 7,40:1 */
	--bo-coral-texte:   #ff9b80;  /* corail lisible sur fond sombre */
	--bo-coral-dark:    #ff6b4a;
	--bo-pro:           #58d3a0;
	--bo-pro-bg:        #10291f;
	--bo-con:           #ff8b80;
	--bo-con-bg:        #2c1512;
	--bo-warn:          #e5b063;
	--bo-warn-bg:       #2a1f0d;
	--bo-info:          #8fb2e8;
	--bo-info-bg:       #101c30;
	--bo-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
	--bo-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.32), 0 6px 16px rgba(0, 0, 0, 0.38);
	--bo-shadow-3: 0 4px 8px rgba(0, 0, 0, 0.34), 0 16px 32px rgba(0, 0, 0, 0.44);
}