/* ==========================================================================
   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);
}

/* Dans une zone qui reste sombre (l'éditeur de blocs entier, voir
   layouts/editeur.php), le voile doit redevenir blanc : nos jetons y
   reprennent leurs valeurs sombres par tokens.css, mais ces cinq-là ne sont
   pas des jetons du site — ils vivent ici, et ne suivaient pas. Un voile
   foncé sur un fond redevenu foncé effaçait le relief des modules et de la
   barre de paramètres : d'où les « cadres qui disparaissent » en mode clair. */
html[data-theme="clair"] [data-toujours-sombre] {
    --glass-bg:       rgba(255, 255, 255, .05);
    --glass-bg-hover: rgba(255, 255, 255, .10);
    --glass-border:   rgba(255, 255, 255, .10);

    --dark-surface: rgba(255, 255, 255, .03);
    --surface-2:    rgba(255, 255, 255, .05);

    /* Et les neutres, redéclarés ici — ce n'est pas une répétition inutile.

       Une propriété personnalisée se résout là où elle est DÉCLARÉE : écrit
       sur :root, « --white: var(--texte-fort) » capture le --texte-fort de
       :root, c'est-à-dire la valeur du mode clair (#241b3a). L'override
       posé sur <body> redéfinit --texte-fort, mais --white, lui, est déjà
       figé un niveau au-dessus et ne le voit pas. Mesuré le 3 octobre 2026 :
       fond redevenu sombre, et le nom de la page en rgb(36, 27, 58) dessus —
       sombre sur sombre. Les redéclarer à l'intérieur de la zone sombre les
       fait se résoudre contre les jetons sombres, comme on l'attendait. */
    --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);
    --dark-bg:      var(--fond-page);
    --border-color: var(--bord);

    --danger-color:  var(--danger);
    --success-color: var(--succes);
    --warning-color: var(--alerte);
    --info-color:    var(--violet-lien);
    --info:          var(--violet-lien);
}

/* 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. */
/* Production a son propre rythme vertical : « .event-content > * + * » à 3rem,
   avec des exceptions autour du hero et des titres de section. Il se
   superposait au nôtre, d'où des écarts de 64, 96 puis 112 px sur la même
   page. Une seule mécanique doit décider, et c'est le gap de « .blocks ». */
.blocks.event-content > * + * {
    margin-top: 0;
}
.blocks.event-content > * {
    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.

   On vise tous les blocs SAUF ceux du site, reconnaissables à leur classe en
   « b- » et seuls à devoir aller d'un bord à l'autre. Viser « eb- » ne suffit
   pas : « media-cards » sort une racine « mc-grid » et débordait de la page.
   Le préfixe « eb- » ne déclenche pas l'exception, l'attribut ne commençant
   pas par « b- ». */
.blocks.event-content > *:not([class^="b-"]) {
    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);
}