/* ============================================================
   brand.css — variables de marque du client actif (TonTon Travaux, HUB).
   Point de bascule couleur multi-métier : surcharge les variables
   :root définies par rp-core/css/reseau-peinture.css.

   MARQUE MÈRE / PARAPLUIE → palette NEUTRE (ni le vert peinture, ni
   le bleu plomberie) : ardoise/graphite + accent LAITON chaud (l'outil,
   le métal — cohérent avec l'angle « entreprise outillée »).
   Accessibilité : --green (fills/eyebrow) et --green-ink (texte/liens)
   tiennent le contraste AA sur fond clair.
   ============================================================ */
:root{
  /* Ardoise graphite — famille primaire (remplace le vert) */
  --green:#3E4C59;        /* primaire : fills, CTA, eyebrow — AA ~9:1 sur blanc */
  --green-bright:#52616F; /* hover / éclat */
  --green-soft:#AEB8C2;   /* ardoise douce (aplats, bordures douces) */
  --green-ink:#2D3A45;    /* TEXTE / lien sur fond clair — AA fort */

  /* Surfaces foncées (nuit ardoise) */
  --forest:#2B343D;
  --forest-deep:#20272E;

  /* Encre principale (anthracite quasi noir) */
  --ink:#1C232A;

  /* Lavis clairs (gris froid) + neutres */
  --mint:#EEF1F4;         /* lavis ardoise clair (sections claires, puces) */
  --mint-2:#DFE4E9;       /* 2ᵉ stop des dégradés placeholder */
  --cream:#F6F7F9;        /* off-white neutre (fond de page) */
  --paper:#FCFDFE;
  --card:#FFFFFF;
  --line:#E1E5EA;
  --muted:#5A6572;

  /* Texte sur fonds foncés (footer, sections nuit) */
  --on-dark:#D3DAE1;
  --on-dark-soft:#9AA6B2;
  --on-dark-muted:#C2CBD4;

  /* Nuancier signature — laiton/outil + neutres chauds, usage parcimonieux.
     (chip 1 = --green ; les 4 autres ci-dessous.) */
  --chip-yellow:#C08A3E;  /* laiton / cuivre (l'outil, le métal) */
  --chip-terra:#B06B4A;   /* terre chaude */
  --chip-blue:#5B7A99;    /* acier bleuté (discret) */
  --chip-rose:#8A7B9B;    /* mauve grisé */

  /* Accent laiton CLAIR, lisible sur fonds foncés (eyebrow/icônes on-dark). */
  --accent-light:#D9AE68;
}

/* ── Corrections contraste sur fonds foncés (palette neutre) ──────────────
   rp-core suppose un accent vif (--green-bright vert vif) pour les eyebrows
   « on-dark ». En neutre, --green-bright est sombre → illisible sur --forest.
   On rétablit un accent laiton lisible + on gère .rp-list.on-dark (absent de
   rp-core). Spécificité .rp x2 > sélecteurs rp-core → surcharge propre. */
.rp .rp-eyebrow.on-dark{color:var(--accent-light)}
.rp .rp-list.on-dark li{color:var(--on-dark)}
.rp .rp-list.on-dark strong{color:#fff}
.rp .rp-list.on-dark li svg{color:var(--accent-light)}

/* .rp-why est conçu pour une section FONCÉE (texte blanc). Sur le hub il vit
   sur une section CLAIRE (--mint) → on repasse les cartes en clair lisible. */
.rp-section--mint .rp-why{background:var(--card);border-color:var(--line);box-shadow:var(--shadow-sm)}
.rp-section--mint .rp-why h3{color:var(--ink)}
.rp-section--mint .rp-why p{color:var(--muted)}
.rp-section--mint .rp-why .ic{background:var(--mint);color:var(--green)}

/* ── Hero « aspirateur de leads » (docs/70 §3) ────────────────────────────────
   Le questionnaire (rp-quiz, colonne droite) est la pièce maîtresse : on élargit
   sa colonne et la carte remplit la colonne. Le pitch reste concis à gauche, aligné
   en haut. Mobile : rp-core repasse la grille en 1 colonne ≤1024px → le pitch coiffe
   le questionnaire (contexte puis formulaire). Aucune couleur en dur (carte = jetons). */
/* Override DESKTOP UNIQUEMENT (≥1025px) : brand.css charge APRÈS reseau-peinture.css
   à spécificité égale → sans la borne min-width, cette règle battrait le `1fr` mobile
   de rp-core (@max-width:1024px) et forcerait une grille 2-col cramée sur téléphone. */
@media (min-width:1025px){ .rp-hero .rp-wrap{grid-template-columns:.92fr 1.08fr;align-items:start} }
.rp-hero-quiz{width:100%}
.rp-hero-quiz .rp-quiz-card{margin:0;max-width:none}
@media (max-width:1024px){ .rp-hero-quiz .rp-quiz-card{max-width:560px;margin:0 auto} }

/* ── Carrousel Outils (accueil) ───────────────────────────────────────────────
   Pas de capture d'écran (icône SVG) → on réduit la zone visuelle 16:11 des cartes
   pour ne pas laisser un grand vide, et donc la hauteur totale des cartes. */
#outils .rp-card-img{aspect-ratio:auto;height:108px}
#outils .rp-card-img .ph svg{width:42px;height:42px}

/* ── Fix listes .rp-list (lisibilité) ─────────────────────────────────────────
   rp-core met le <li> en display:flex → un <strong> de libellé en tête devient
   une COLONNE flex distincte (le libellé se coince en colonne étroite et wrappe,
   le texte part à côté = illisible). On repasse le <li> en BLOC avec la puce SVG
   en absolu : libellé gras + description coulent en texte normal, sur autant de
   lignes que nécessaire. Corrige confiance (accueil), « ce qu'on vous apporte »
   (rejoindre + donneurs d'ordre), etc. — d'un seul endroit. */
.rp-list li{display:block;position:relative;padding-left:31px}
.rp-list li svg{position:absolute;left:0;top:4px;margin-top:0}

/* ── 4 items en 2×2 (donneurs d'ordre : « pour qui » via .rp-tools, « 4 étapes »
   via .rp-steps--2) plutôt qu'une ligne de 3 + 1 carte seule. ── */
.rp-steps--2{grid-template-columns:1fr 1fr}
@media (max-width:600px){ .rp-steps--2{grid-template-columns:1fr} }