/* ==========================================================================
   Pont entre les blocs de production et les jetons de ce site
   --------------------------------------------------------------------------
   `blocks-public.css` vient du site en production et s'appuie sur son
   vocabulaire de variables (--gray-300, --glass-bg, --primary-dark…).
   Plutôt que d'importer tout son :root — ce qui écraserait l'identité
   visuelle d'ici — on redéfinit ces noms en les branchant sur nos jetons.

   Le violet de marque est le même des deux côtés (#7d47de), donc la
   correspondance est directe pour l'essentiel ; les gris, eux, sont rendus
   par nos surfaces, ce qui fait suivre le mode clair sans travail en plus.
   ========================================================================== */

:root {
    /* --- Marque ---------------------------------------------------------- */
    --primary-color: var(--violet);
    --primary-hover: var(--violet-fonce);
    --primary-light: var(--violet-clair);
    --primary-dark:  var(--violet-fonce);

    /* --- États ----------------------------------------------------------- */
    --danger-color:  var(--danger);
    --success-color: var(--succes);
    --warning-color: var(--alerte);
    --info-color:    var(--violet-lien);
    --info:          var(--violet-lien);
    --danger:        var(--danger);

    /* --- Neutres ---------------------------------------------------------
       Attention au sens de l'échelle : le site de production est en thème
       sombre, donc ses gris CLAIRS servent au texte (--gray-100 y vaut
       #f3f4f6) et ses gris FONCÉS aux surfaces. On les branche donc sur nos
       jetons de texte en haut de l'échelle, et sur nos bords et fonds en bas.
       Nos jetons s'inversant déjà en mode clair, le basculement suit seul. */
    --white:        var(--texte-fort);
    --gray-50:      var(--texte-fort);
    --gray-100:     var(--texte);
    --gray-200:     var(--texte-doux);
    --gray-300:     var(--texte-doux);
    --gray-400:     var(--texte-3);
    --gray-500:     var(--texte-3);
    --gray-600:     var(--bord-champ);
    --gray-700:     var(--bord);
    --gray-800:     var(--fond-carte);
    --gray-900:     var(--fond-page);

    --bg-primary:   var(--fond-page);
    --bg-secondary: var(--fond-carte);
    --text-primary: var(--texte);

    /* --- Surfaces translucides -------------------------------------------
       Sur fond sombre, un voile blanc éclaircit ; en mode clair il faut
       l'inverse, sans quoi les cartes se noient dans leur fond. */
    --glass-bg:       rgba(255, 255, 255, .05);
    --glass-bg-hover: rgba(255, 255, 255, .10);
    --glass-border:   rgba(255, 255, 255, .10);
    --glass-shadow:   var(--ombre-carte);

    /* --- Fonds et bords de l'éditeur -------------------------------------
       Ces quatre-là habillent les modules eux-mêmes : le fond du canevas,
       les encarts de paramètres, les séparations. Sans eux les modules
       s'affichent sans relief ni cadre — d'où l'impression qu'ils ne sont
       pas les mêmes qu'en production. */
    --dark-bg:      var(--fond-page);
    --dark-surface: rgba(255, 255, 255, .03);
    --surface-2:    rgba(255, 255, 255, .05);
    --border-color: var(--bord);

    /* --- Espacements ------------------------------------------------------
       L'échelle de production, en rem. Les blocs s'en servent pour leurs
       marges internes ; sans valeur, les paddings tombent à zéro et tout
       se colle. */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
}

html[data-theme="clair"] {
    --glass-bg:       rgba(36, 27, 58, .04);
    --glass-bg-hover: rgba(36, 27, 58, .07);
    --glass-border:   rgba(36, 27, 58, .10);

    --dark-surface: rgba(36, 27, 58, .03);
    --surface-2:    rgba(36, 27, 58, .05);
}

/* Le rythme vertical d'une page vient de « .blocks » et de lui seul : une
   colonne flex avec son gap. Les blocs de production, eux, s'espacent chacun
   par leurs propres marges — ce qui, en flex, s'ajoute au gap au lieu de s'y
   fondre, et creuse deux fois plus autour d'eux. On les remet à zéro : le
   conteneur suffit. */
.blocks > [class*="eb-"] {
    margin-top: 0;
    margin-bottom: 0;
}

/* Chaque bloc de ce site se borne lui-même : la bannière et le bandeau de
   chiffres vont d'un bord à l'autre, les autres se centrent sur la largeur
   de lecture. Les blocs de production n'ont pas cette notion — sans cadre,
   ils s'étalent sur toute la fenêtre. On le leur donne ici. */
.blocks > [class*="eb-"] {
    width: 100%;
    max-width: var(--largeur-large);
    margin-inline: auto;
    padding-inline: 24px;
    box-sizing: border-box;
}

/* Les rayons du système de production rejoignent notre échelle, pour qu'un
   bloc porté ne jure pas à côté d'un élément d'interface d'ici. */
:root {
    --radius-sm: var(--r-xs);
    --radius:    var(--r-sm);
    --radius-md: var(--r-md);
    --radius-lg: var(--r-lg);
    --radius-xl: var(--r-xl);
}