/* ─────────────────────────────────────────────────────────────────────────────
   CHARTE GRAPHIQUE DU GROUPE — V10 (25/09/2026), appliquée à agregate.fr.

   REFONTE PARTIELLE, DÉLIBÉRÉMENT PAR-DESSUS. Chaque page garde son <style> ;
   cette feuille est chargée APRÈS lui et gagne donc à spécificité égale. Elle
   redéfinit les variables de l'ancienne palette (sauge / terre) sur la palette
   de la charte, puis corrige les seules règles qu'une variable ne suffit pas à
   changer. Retirer la ligne <link> rend le site d'avant, à l'identique.

   LA RÈGLE DE FAMILLE : encre + beige pour la SOCIÉTÉ, terracotta pour les
   PRODUITS (charte p. 2, « La famille détermine la couleur »). La charte v10 ne
   nommait que uMyris ; myBric l'a rejoint le 25/09 avec son pack graphique
   validé (terracotta #BC5F37, voisin du #B25733 d'uMyris). Chaque produit garde
   sa valeur exacte, portée par son propre logo.

   LE BEIGE N'ÉCRIT PAS DE PETIT TEXTE. #A68A64 fait 3,2:1 sur l'ivoire et 4,3:1
   sur l'encre — sous le seuil de 4,5:1. La charte le réserve aux repères, filets
   et grandes tailles ; les petits sous-titres sont en encre (charte p. 5). D'où
   `--terre-txt` et `--terre-dk` ramenés sur l'encre, et le beige limité aux
   filets, pastilles, bordures et chiffres de grand corps.

   DM SERIF DISPLAY N'EXISTE QU'EN 400 ROMAIN. Les titres de l'ancienne palette
   demandaient 500/600 et de l'italique à Newsreader : sans correction, le
   navigateur fabriquerait un faux gras et un faux italique. `font-synthesis:none`
   l'interdit, et les titres sont ramenés en 400 romain.
   ───────────────────────────────────────────────────────────────────────────── */

@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/DMSans-400.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/DMSans-500.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/DMSans-600.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/DMSans-700.woff2) format('woff2')}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/DMSerifDisplay-Regular.woff2) format('woff2')}

:root{
  /* Les quatre tons de la charte */
  --encre:#2C2C2A; --beige:#A68A64; --ivoire:#FEFCF9; --sable-charte:#F4EFE7;
  --produit:#B25733;                 /* uMyris uniquement */
  --beige-sur-sombre:#C9B391;        /* texte clair sur encre : 6,9:1 */

  /* L'ancienne palette, rebranchée */
  --cream:var(--ivoire); --cream-2:var(--sable-charte); --sable:var(--sable-charte);
  --ink:var(--encre); --ink-2:#3A3A37;
  --sage:var(--encre); --sage-dk:#1F1F1D; --sage-md:#8A857B; --sage-xlt:var(--sable-charte);
  --terre:var(--beige); --terre-dk:var(--encre); --terre-txt:var(--encre);
  --terre-soft:var(--sable-charte); --terre-clair:var(--beige-sur-sombre);
  --line:rgba(44,44,42,.10); --line-2:rgba(44,44,42,.16);

  --serif:'DM Serif Display',Georgia,serif; --sans:'DM Sans',-apple-system,sans-serif;
}
html{font-synthesis:none}
body{background:var(--ivoire);color:var(--encre)}

/* Titres : DM Serif Display n'a qu'un 400 romain */
.hero h1,.sec-head h2,.story-card h3,.team-card h3,.prod-mark,.stat-v,.story-num,
.pquote p,.cta-final h2,.lp-hero h1,.lp-sec h2,h1,h2{font-weight:400}
.story-num,.pquote p{font-style:normal}

/* Le beige aux endroits où la taille le permet */
/* Les chiffres de grand corps (30–36 px) portent le beige. Les mots en exergue
   dans une phrase restent en ENCRE : en 15 px le beige fait 3,2:1, et sur le
   sable de la citation 2,9:1. Le repère beige passe par un soulignement. */
.stat-v em,.story-num{color:var(--beige)}
.pquote p em,.prod-pitch em{color:var(--encre);text-decoration:underline;text-decoration-color:var(--beige);text-decoration-thickness:2px;text-underline-offset:5px}
.eyebrow::before,.pquote::before{background:var(--beige)}
.btn-terre{border-color:var(--beige);color:var(--encre)}
.btn-terre:hover{background:var(--sable-charte)}
.hdr-nav a:hover{color:var(--encre);text-decoration:underline;text-decoration-color:var(--beige);text-underline-offset:6px;text-decoration-thickness:2px}
.lang-opt.on{color:var(--encre)}
.badge-dev{color:var(--encre);background:var(--sable-charte)}
.showcase .eyebrow{color:#fff}
.showcase .eyebrow::before{background:var(--beige)}

/* Le produit : le VRAI logo uMyris (charte logo v2, `admin/src/components/common/UmyrisLogo.jsx`)
   — « u » et « yris » en DM Sans Medium 500, anthracite ; le M est un glyphe géométrique dessiné,
   seul porteur du terracotta. Pas une lettre de police colorée : les métriques (marges .185em /
   .12em, descente .1786em) sont celles du composant de l'admin, à reprendre ensemble. */
.prod-mark.umyris{display:inline-flex;align-items:baseline;font-family:var(--sans);font-weight:500;color:var(--encre);letter-spacing:0;white-space:nowrap}
.prod-mark.umyris .umyris-m{display:inline-block;margin:0 .12em 0 .185em;transform:translateY(.1786em)}
.prod-mark.umyris .umyris-m svg{display:block;height:1em;width:auto;fill:var(--produit)}

/* ── Logo ────────────────────────────────────────────────────────────────────
   Signature AGREGATE en SVG, 260 px de large — le minimum écran de la charte
   (p. 19), qu'on ne comprime pas en dessous. Sous 560 px de fenêtre, l'en-tête
   n'a plus 260 px à côté du sélecteur de langue et du menu (mesuré : 123 px de
   débordement à 390) : le symbole seul, que la charte prévoit pour les espaces
   compacts (p. 11). La signature complète reste au pied de page. La marge de
   protection H/4 est laissée par la hauteur de l'en-tête (72 px pour 43). */
.hdr-logo{display:inline-flex;align-items:center;line-height:0}
.hdr-logo img{display:block;width:260px;height:auto}
.hdr-logo .logo-symbole{display:none;width:44px}
@media (max-width:560px){
  .hdr-logo .logo-signature{display:none}
  .hdr-logo .logo-symbole{display:block}
}
.ftr-logo{line-height:0}
.ftr-logo img{display:block;width:260px;height:auto}

/* ── Débordements mobiles préexistants (corrigés au passage, 25/09) ─────────
   Mesurés AVANT la refonte, identiques sur le site d'avant : 49 px à 390 sur
   l'accueil, jusqu'à 145 px à 320. Deux causes, pas une :
   · `.badge-dev` en `nowrap` — « En production sur notre parc · ouverture
     progressive » ne peut pas tenir sur une ligne de téléphone ;
   · `main`, élément d'une grille `.lp-body`, gardait `min-width:auto` : un
     tableau large (sous-traitants) ou un mot long élargissait TOUTE la colonne
     au-delà de l'écran, paragraphes compris. `min-width:0` rend la colonne à sa
     piste ; le tableau défile alors seul dans son conteneur. */
.badge-dev{white-space:normal}
.lp-body>main{min-width:0}
.lp-body table{display:block;max-width:100%;overflow-x:auto}

/* ── myBric (pack graphique v1.4, 25/09) ────────────────────────────────────
   Le logo remplace le titre en texte ; la vue d'artiste du duo hub + module
   d'ambiance (finition blanc cassé, choix de Xavier) illustre les deux cartes
   « moniteur / hub » qui suivent. Format MODESTE et légende obligatoire : c'est
   un prototype, l'image ne doit pas passer pour une photo de produit fini. */
.prod-mark.mybric{line-height:0}
.prod-mark.mybric img{display:block;width:190px;height:auto}
.mybric-vue{margin:22px 0 26px;max-width:560px}
.mybric-vue img{display:block;width:100%;height:auto;border-radius:var(--r-md)}
.mybric-vue figcaption{margin-top:8px;font-size:12px;color:var(--ink-lt)}

/* ── Page 404 (25/09) — bilingue, servie par `error_page` pour tout le site ── */
.p404{max-width:720px;padding:44px 0 72px}
.p404 .lp-list{margin-bottom:28px}
.p404-en{padding-top:20px;border-top:1px solid var(--line);color:var(--ink-lt);font-size:14.5px}
/* Pied de page anglais : les pages légales n'existent qu'en français — le lien le dit. */
.en-fr{opacity:.62;font-size:.92em}