/* ============================================================
   HOME EN VERSION CLAIRE
   ------------------------------------------------------------
   La home reprend le thème sombre de rankersquare. Ce fichier
   l'inverse en clair, UNIQUEMENT sur la page d'accueil
   (body.page-accueil) : on ne touche pas aux CSS partagés, donc
   les autres pages du site restent inchangées.

   Consigne : le noir devient #F5F6F6, le gris foncé #FAFAFA.
   Comme le texte d'origine est blanc, on le repasse en sombre,
   et les hairlines blanches translucides deviennent sombres.
   ============================================================ */

:root{
  --clair-bg:      #FFFFFF;   /* l'ancien noir             */
  --clair-surface: #FFFFFF;   /* l'ancien gris foncé       */
  --clair-encre:   #161616;   /* texte principal           */
  --clair-doux:    #4a4a4f;   /* texte secondaire          */
  --clair-muet:    #6b6b70;   /* texte tertiaire           */
  --clair-trait:   rgba(22,22,22,.12);  /* hairlines       */
  --clair-trait2:  rgba(22,22,22,.08);
}

/* ---- fonds de page et sections ---- */
body.page-accueil,
body.page-accueil .hero,
body.page-accueil .hero--noir,
body.page-accueil .taches,
body.page-accueil .mocks,
body.page-accueil .trio,
body.page-accueil .cta{
  background: var(--clair-bg) !important;
}

/* Les surfaces « gris foncé » de la maquette (cartes, dashboard,
   colonnes) passent au clair secondaire. */
body.page-accueil .bord,
body.page-accueil .bord__zone,
body.page-accueil .taches__sombre,
body.page-accueil .mock,
body.page-accueil .trio__col,
body.page-accueil .trio,
body.page-accueil .bordm,
body.page-accueil .agent-panneau,
body.page-accueil .bord__kpi{
  background: var(--clair-surface) !important;
}
body.page-accueil .bord__cote,
body.page-accueil .bordm__cote{
  background: #EFEFF1 !important;   /* la barre latérale, un ton plus marqué */
}

/* ---- texte : blanc -> sombre ---- */
body.page-accueil,
body.page-accueil h1, body.page-accueil h2, body.page-accueil h3,
body.page-accueil .hero__titre-c, body.page-accueil .cds-fluid-heading-05,
body.page-accueil .cds-fluid-heading-04, body.page-accueil .mock__h,
body.page-accueil .trio__h, body.page-accueil .bord__kpi b,
body.page-accueil .bordm__kpi b{
  color: var(--clair-encre) !important;
}
body.page-accueil p,
body.page-accueil .hero__lede-c, body.page-accueil .mocks__intro,
body.page-accueil .mock__p, body.page-accueil .trio__p,
body.page-accueil .cds-body-long-02,
body.page-accueil .bord__item, body.page-accueil .bordm__item,
body.page-accueil .bord__onglet, body.page-accueil .bordm__onglet,
body.page-accueil .bord__kpi em, body.page-accueil .bordm__kpi em,
body.page-accueil .bord__tr, body.page-accueil .bordm__tr{
  color: var(--clair-doux) !important;
}
body.page-accueil .taches__sur,
body.page-accueil .mocks__sur,
body.page-accueil .bord__section{
  color: var(--clair-muet) !important;
}

/* ---- hairlines : blanches translucides -> sombres ---- */
body.page-accueil .bord,
body.page-accueil .bord__kpi,
body.page-accueil .mock,
body.page-accueil .trio__col,
body.page-accueil .bordm,
body.page-accueil .bord__cote,
body.page-accueil .bord__table .bordm__tr,
body.page-accueil .taches__sombre{
  border-color: var(--clair-trait) !important;
  box-shadow: inset 0 0 0 1px var(--clair-trait2) !important;
}

/* ---- boutons : la pastille translucide devient sombre sur clair ---- */
body.page-accueil .cds-btn--primary{
  background: rgba(22,22,22,.08) !important;
  color: var(--clair-encre) !important;
}
body.page-accueil .cds-btn--primary:hover{
  background: rgba(22,22,22,.14) !important;
}
/* Le CTA plein blanc devient plein sombre pour rester contrasté. */
body.page-accueil .cds-btn--plein{
  background: var(--clair-encre) !important;
  color: #fff !important;
}
body.page-accueil .cds-btn--plein:hover{
  background: #000 !important;
}

/* Le dégradé de fondu vers le noir (bas du dashboard hero) devient
   un fondu vers le clair, sinon une bande sombre resterait. */
body.page-accueil .bord::after,
body.page-accueil .hero__bord::after{
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--clair-bg) 100%) !important;
}

/* La courbe SVG du dashboard (tracée en bleu clair sur fond noir) :
   on garde le bleu mais on assombrit un peu pour le contraste. */
body.page-accueil .bord__courbe path[stroke],
body.page-accueil .bord__courbe path{ opacity:.9; }

/* Texture en pointillés du trio (dessinée en blanc translucide) :
   on la repasse en sombre translucide pour qu'elle reste visible. */
body.page-accueil .trio{
  --dot: rgba(22,22,22,.06);
}

/* Wordmarks (le pictogramme R de la source a été retiré). */
body.page-accueil .hero__marque-mot{
  font-family:var(--f-titre,inherit); font-weight:700; letter-spacing:-.025em;
  color:var(--clair-encre);
}
body.page-accueil .bord__logo-mot{
  font-family:var(--f-titre,inherit); font-size:.8rem; font-weight:600;
  letter-spacing:-.02em; color:var(--clair-encre);
}

/* ============================================================
   COMPLÉMENTS — header, footer, mockups restés sombres
   ============================================================ */

/* ---- HEADER en clair ---- */
body.page-accueil .hdr,
body.page-accueil .promo{
  background: var(--clair-surface) !important;
  border-color: var(--clair-trait) !important;
}
body.page-accueil .hdr__logo-mot,
body.page-accueil .hdr__lien,
body.page-accueil .hdr__declencheur,
body.page-accueil .hdr a{
  color: var(--clair-encre) !important;
}
/* le CTA du header : pastille sombre translucide sur clair */
body.page-accueil .hdr__cta{
  background: var(--clair-encre) !important;
  color:#fff !important;
}
/* le méga-menu déroulant */
body.page-accueil .mega{
  background: var(--clair-surface) !important;
  border-color: var(--clair-trait) !important;
}
body.page-accueil .mega a strong{ color: var(--clair-encre) !important; }
body.page-accueil .mega a span,
body.page-accueil .mega__titre{ color: var(--clair-muet) !important; }
/* le mini-dashboard du méga-menu */
body.page-accueil .bordm{ background: var(--clair-surface) !important; }
body.page-accueil .bordm__cote{ background:#EFEFF1 !important; }

/* ---- FOOTER en clair ---- */
body.page-accueil .ftr,
body.page-accueil .cta{
  background: var(--clair-bg) !important;
}
body.page-accueil .ftr__logo-mot,
body.page-accueil .ftr__title,
body.page-accueil .cta *{ color: var(--clair-encre) !important; }
body.page-accueil .ftr a,
body.page-accueil .ftr p,
body.page-accueil .ftr__bottom,
body.page-accueil .ftr__bottom a{ color: var(--clair-doux) !important; }
body.page-accueil .ftr__title{ color: var(--clair-muet) !important; }

/* ---- MOCKUPS restés sombres : tout fond très foncé -> clair ---- */
/* Les panneaux internes du dashboard/agent (Objectif/Rythme/Base, la jauge,
   la liste de tâches) gardaient un fond noir codé en dur. On les éclaircit. */
body.page-accueil .agent-panneau,
body.page-accueil .task-list,
body.page-accueil .prompt,
body.page-accueil .trio__visuel,
body.page-accueil .trio__fiche,
body.page-accueil .mock__visuel,
body.page-accueil .bord__table,
body.page-accueil .bord__courbe,
body.page-accueil [class*="__panneau"],
body.page-accueil [class*="__fiche"]{
  background: var(--clair-surface) !important;
  border-color: var(--clair-trait) !important;
  color: var(--clair-doux) !important;
}
/* les lignes internes (Objectif / Rythme / Base…) : fond un poil plus marqué */
body.page-accueil .trio__fiche *,
body.page-accueil .agent-panneau *,
body.page-accueil .task-list *{
  border-color: var(--clair-trait) !important;
}
/* les "chips" de valeur (Prise de masse, 4 séances…) : restent contrastés
   mais sur une base claire */
body.page-accueil .trio__fiche b,
body.page-accueil .trio__fiche strong,
body.page-accueil [class*="chip"],
body.page-accueil [class*="tag"]{
  background: #EAEBED !important;
  color: var(--clair-encre) !important;
}

/* ---- les dégradés de fondu vers le noir, partout ---- */
body.page-accueil [class*="fade"]::after,
body.page-accueil [class*="__degrade"],
body.page-accueil .hero__bord::after,
body.page-accueil .bord::after{
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--clair-bg) 100%) !important;
}

/* ---- reste du pictogramme R (SVG) éventuel : on le masque ---- */
body.page-accueil .trio__visuel svg[viewBox="0 0 100 100"]{ display:none; }
body.page-accueil .orbite__mot{
  font-family:var(--f-titre,inherit); font-size:.85rem; font-weight:700;
  letter-spacing:-.02em; color:var(--clair-encre);
}

/* ============================================================
   PASSE FINALE — attrape-tout des fonds sombres résiduels
   ------------------------------------------------------------
   Beaucoup de mockups ont un fond noir codé en dur sur des
   classes variées. Plutôt que les lister une à une, on éclaircit
   toute la page et on force le texte lisible, puis on laisse les
   quelques accents (chips colorées) tels quels.
   ============================================================ */

/* La barre TOC (ancrages) restée noire. */
body.page-accueil .toc,
body.page-accueil [class*="toc"],
body.page-accueil .hero__toc,
body.page-accueil nav[class*="toc"]{
  background: var(--clair-surface) !important;
  border-color: var(--clair-trait) !important;
}
body.page-accueil [class*="toc"] a{ color: var(--clair-doux) !important; }

/* Tous les KPI / valeurs / lignes du dashboard hero : texte lisible. */
body.page-accueil .bord *,
body.page-accueil .bordm *{
  color: var(--clair-encre) !important;
}
body.page-accueil .bord em, body.page-accueil .bordm em,
body.page-accueil .bord__item, body.page-accueil .bord__onglet,
body.page-accueil .bord__tr span{ color: var(--clair-muet) !important; }
body.page-accueil .bord i, body.page-accueil .bordm i{ color:#2f8f46 !important; } /* +% en vert */

/* Les mockups à fond noir codé en dur (cartes séance, panneau créer un
   programme, liste clients, orbite) : on force un fond clair. */
body.page-accueil .mock *[style*="background"],
body.page-accueil [class*="carte"],
body.page-accueil [class*="__carte"],
body.page-accueil [class*="seance"],
body.page-accueil [class*="__panneau"],
body.page-accueil [class*="orbite__coeur"],
body.page-accueil [class*="fiche"]{
  background-color: var(--clair-surface) !important;
  border-color: var(--clair-trait) !important;
}

/* Les dégradés/voiles sombres qui recouvrent les pistes animées (liste
   clients, mentions) : on les rend clairs pour ne plus voir de bandes noires. */
body.page-accueil .mock__visuel::before,
body.page-accueil .mock__visuel::after,
body.page-accueil [class*="piste"]::before,
body.page-accueil [class*="piste"]::after,
body.page-accueil [class*="masque"],
body.page-accueil [class*="voile"]{
  background: linear-gradient(90deg, var(--clair-surface), rgba(255,255,255,0)) !important;
}

/* Le cœur d'orbite (le carré noir central) : on le pose en clair encadré. */
body.page-accueil .orbite__coeur{
  background: #fff !important;
  border:1px solid var(--clair-trait) !important;
  box-shadow: 0 2px 12px rgba(22,22,22,.06) !important;
}

/* ---- section mocks : pistes animées restées sombres ---- */
body.page-accueil .visual,
body.page-accueil .mention,
body.page-accueil .mention-track,
body.page-accueil .claim-card,
body.page-accueil .claim-top,
body.page-accueil .claim-track,
body.page-accueil .copy{
  background: var(--clair-surface) !important;
  border-color: var(--clair-trait) !important;
  color: var(--clair-doux) !important;
}
body.page-accueil .mention *,
body.page-accueil .claim-card *{ color: var(--clair-encre) !important; }
/* les voiles latéraux qui masquent les pistes (dégradés vers le noir) */
body.page-accueil .visual::before,
body.page-accueil .visual::after,
body.page-accueil .mention-track::before,
body.page-accueil .mention-track::after,
body.page-accueil .claim-track::before,
body.page-accueil .claim-track::after{
  background: linear-gradient(90deg, var(--clair-surface), rgba(255,255,255,0)) !important;
}
/* le doublon du wordmark dans le mini-dashboard (un ::after ou un 2e span
   dessinait "Koatcher" une 2e fois) : on neutralise le pseudo-élément. */
body.page-accueil .bord__marque::after,
body.page-accueil .bordm__marque::after{ content:none !important; }

/* ============================================================
   MOCKUPS — bordures fines propres, sans ombre ni dégradé noir
   ------------------------------------------------------------
   Le thème d'origine posait des ombres portées et des voiles en
   dégradé vers le noir, qui salissent un fond blanc. On les
   supprime et on ne garde qu'un filet gris clair.
   ============================================================ */

/* Plus aucune ombre portée dans les mockups de la page. */
body.page-accueil .mock,
body.page-accueil .mock *,
body.page-accueil .visual,
body.page-accueil .visual *,
body.page-accueil .mention,
body.page-accueil .claim-card,
body.page-accueil .copy{
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Bordure fine, grise, uniforme (1px) au lieu des hairlines blanches. */
body.page-accueil .mock,
body.page-accueil .visual,
body.page-accueil .mention,
body.page-accueil .claim-card{
  border: 1px solid rgba(17,17,17,.10) !important;
  border-radius: 0 !important;
}

/* Les voiles/dégradés noirs qui masquaient les bords des pistes :
   on les neutralise complètement (plus de bande sombre sur blanc). */
body.page-accueil .visual::before,
body.page-accueil .visual::after,
body.page-accueil .mention-track::before,
body.page-accueil .mention-track::after,
body.page-accueil .claim-track::before,
body.page-accueil .claim-track::after,
body.page-accueil .mock__visuel::before,
body.page-accueil .mock__visuel::after{
  background: none !important;
  display: none !important;
}

/* Les séparateurs entre cartes : un filet gris, pas un trait sombre. */
body.page-accueil .mocks__liste .mock + .mock{
  border-top: 1px solid rgba(17,17,17,.10) !important;
}

/* Lisibilité des pistes de la section « Suivi clients » : le texte était
   prévu pour un fond noir (blanc très transparent), il devient illisible
   sur blanc. On le repasse en gris foncé. */
body.page-accueil .mention,
body.page-accueil .mention *,
body.page-accueil .claim-card,
body.page-accueil .claim-card *,
body.page-accueil .visual *{
  color: #2b2b30 !important;
  opacity: 1 !important;
}
/* les petites barres de progression : un gris visible mais discret */
body.page-accueil .mention span[class*="bar"],
body.page-accueil .mention i,
body.page-accueil .visual [class*="bar"]{
  background: #d8d8dc !important;
}

/* Aucune bordure sombre sur la home : toute bordure devient un filet gris
   clair, et les mockups restent à angles droits (simples lignes, pas de
   cartes arrondies). */
body.page-accueil .mock,
body.page-accueil .mock *,
body.page-accueil .visual,
body.page-accueil .visual *,
body.page-accueil .mention,
body.page-accueil .claim-card,
body.page-accueil .copy,
body.page-accueil .mocks__liste,
body.page-accueil .mocks__liste *{
  border-color: rgba(17,17,17,.10) !important;
  border-radius: 0 !important;
}

/* Header : burger visible, CTA gris clair, panneau mobile blanc. */
body.page-accueil .hdr__burger, body.page-accueil .hdr__burger svg{ color:#111 !important; fill:currentColor !important; }
body.page-accueil .hdr__cta{ background:#EDEDF0 !important; color:#111 !important; border:1px solid rgba(17,17,17,.10) !important; }
body.page-accueil .hdr__cta:hover{ background:#E2E2E6 !important; }
body.page-accueil .hdr__panel, body.page-accueil .hdr__panel-cadre, body.page-accueil .hdr__panel-liste{ background:#fff !important; color:#111 !important; }
body.page-accueil .hdr__panel a, body.page-accueil .hdr__panel-login{ color:#111 !important; }
body.page-accueil .hdr__panel-cta{ background:#111 !important; color:#fff !important; }

/* Footer : plus aucun filet sombre en haut. */
body.page-accueil .ftr, body.page-accueil .ftr *,
body.page-accueil .cta, body.page-accueil .cta *,
body.page-accueil .bpFooter, body.page-accueil .bpFooter *{
  border-color: rgba(17,17,17,.10) !important;
}

/* ============================================================
   Section « Suivi clients » : fidèle au style d'origine
   ------------------------------------------------------------
   Chez rankersquare, .mock et .visual n'ont PAS de cadre : juste
   un filet en bas (border-bottom) qui sépare les blocs, et aucun
   arrondi. On revient exactement à ça, en gris clair.
   ============================================================ */
body.page-accueil .mock,
body.page-accueil .visual{
  border: 0 !important;
  border-bottom: 1px solid rgba(17,17,17,.10) !important;
  border-radius: 0 !important;
}
/* Les cartes internes (mentions, séances) : pas de cadre non plus,
   elles flottent sur le fond, comme dans la maquette d'origine. */
body.page-accueil .mention,
body.page-accueil .claim-card{
  border: 1px solid rgba(17,17,17,.10) !important;
  border-radius: 10px !important;   /* léger arrondi, comme les chips d'origine */
}
/* Le dernier bloc n'a pas besoin du filet. */
body.page-accueil .mocks__liste .mock:last-child{ border-bottom: 0 !important; }

/* Cartes clients : les barres de progression étaient noires (prévues pour
   fond sombre) et les noms se coupaient sur deux lignes. */
body.page-accueil .mention i,
body.page-accueil .mention b,
body.page-accueil .mention [class*="bar"],
body.page-accueil .mention span:last-child{
  background: #DFDFE3 !important;
}
body.page-accueil .mention{
  white-space: nowrap !important;
  align-items: center !important;
}
body.page-accueil .mention > *{ white-space: nowrap !important; }

/* ============================================================
   Mockups : dégradés de disparition en BLANC
   ------------------------------------------------------------
   Les pistes animées (clients, séances) doivent s'estomper sur
   les bords. Les voiles d'origine allaient vers le noir ; on les
   rétablit en blanc pour qu'ils se fondent dans la page.
   ============================================================ */
body.page-accueil .visual::before,
body.page-accueil .mention-track::before,
body.page-accueil .claim-track::before,
body.page-accueil .mock__visuel::before{
  content:'' !important;
  display:block !important;
  position:absolute !important;
  left:0; top:0; bottom:0; width:12%;
  background: linear-gradient(90deg, #FFFFFF 0%, rgba(255,255,255,0) 100%) !important;
  z-index:2; pointer-events:none;
}
body.page-accueil .visual::after,
body.page-accueil .mention-track::after,
body.page-accueil .claim-track::after,
body.page-accueil .mock__visuel::after{
  content:'' !important;
  display:block !important;
  position:absolute !important;
  right:0; top:0; bottom:0; width:12%;
  background: linear-gradient(270deg, #FFFFFF 0%, rgba(255,255,255,0) 100%) !important;
  z-index:2; pointer-events:none;
}
/* le conteneur doit pouvoir positionner ces voiles */
body.page-accueil .visual,
body.page-accueil .mention-track,
body.page-accueil .claim-track,
body.page-accueil .mock__visuel{ position:relative !important; }