/* ═══════════════════════════════════════════════════════════════════
   LA COULEUR DU SITE PUBLIC

   Le site n'avait qu'une couleur et pas de température : tout était violet
   ou blanc, les sections alternaient entre #ffffff et un gris neutre, et
   les traits de séparation étaient gris aussi. Rien n'accrochait l'œil,
   et les huit tuiles de la grille se ressemblaient toutes.

   Trois décisions, prises d'après tiime.fr :

   1. Plus jamais de blanc pur en fond de page. Un bleu-gris froid porte
      le document, et les cartes blanches s'y détachent avec une ombre
      douce au lieu d'être cernées d'un trait.
   2. Une zone sombre en haut. C'est ce qui donne du poids à la première
      seconde, et ce qui fait paraître le reste plus lumineux. Le pied de
      page reprend la même encre, pour fermer la page comme elle s'ouvre.
   3. Une couleur par domaine, tenue partout : bleu pour l'agenda, violet
      pour les dossiers, orange pour la comptabilité, rose pour la
      facturation, vert pour ce qui touche au terrain. Elles ne servent
      qu'aux pastilles d'icônes et aux surtitres, jamais au texte courant.

   Le violet Olnis ne bouge pas. Il reste la couleur de la marque et celle
   de tous les boutons d'action.

   Cette feuille se charge APRÈS landing.css et ne fait que redéfinir des
   variables et quelques composants. Retirer son lien rend au site son
   apparence d'avant, à l'identique.

   L'application n'est pas concernée : elle a sa propre feuille, style.css.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Le fond, l'encre, les traits ─── */
  /* Le bleu-gris qui porte la page. Il remplace partout l'ancien #f7f8f7,
     un gris sans température qui donnait au site son air de gabarit. */
  --page:      #eff2f9;
  --bg-2:      #eff2f9;
  --carte:     #ffffff;

  --encre:     #171a3d;
  --encre-2:   #20244d;

  --fg:        #171a3d;
  --fg-2:      #4b5170;
  --fg-muted:  #7b82a0;
  --line:      #e2e6f1;
  --line-2:    #cdd4e6;

  /* ─── Un accent par domaine ─── */
  --bleu:        #2f7fe8;  --bleu-fond:   #e4eeff;
  --orange:      #ef6820;  --orange-fond: #ffece1;
  --rose:        #e0568a;  --rose-fond:   #ffe8f0;
  --vert:        #12a668;  --vert-fond:   #e2f6ee;

  /* Le violet clair sert sur fond sombre, où le #5d59f3 manque de lumière. */
  --violet-clair: #8b88f8;

  /* L'ombre des cartes. Teintée de l'encre, jamais du noir pur : une ombre
     grise sur un fond bleuté se voit comme une salissure. */
  --ombre:     0 14px 34px rgba(23, 26, 61, .10), 0 2px 6px rgba(23, 26, 61, .05);
  --ombre-bas: 0 10px 28px rgba(23, 26, 61, .08);
}

body { background: var(--page); }

/* ═══ LE HERO, SOMBRE ═══════════════════════════════════════════ */

.hero {
  background:
    radial-gradient(900px 500px at 80% 16%, rgba(93, 89, 243, .34), transparent 62%),
    radial-gradient(700px 460px at 4% 0%,   rgba(93, 89, 243, .16), transparent 60%),
    var(--encre);
}
/* Le fondu du bas rejoignait l'ancien gris. Il rejoint maintenant le fond
   de page, sinon une bande claire se dessine sous le bandeau sombre. */
.hero::after {
  background: linear-gradient(to bottom, rgba(23, 26, 61, 0) 0%, var(--encre) 100%);
  height: 120px;
}

.hero-copy h1 { color: #ffffff; }
/* Le mot accentué prend le violet clair : sur l'encre, le #5d59f3 du site
   s'éteint et le mot se perd au lieu de ressortir. */
.hero-accent { color: var(--violet-clair); }
.hero-copy .lead { color: #c2c7de; }
.hero-note { color: #9aa1c0; }
.hero-note .bi { color: var(--violet-clair); }
.hero-eyebrow {
  color: #d7d9f5;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
}

/* Le bouton secondaire ne peut plus être blanc plein sur fond sombre : il
   volerait la vedette au bouton d'action. Il devient un contour. */
.hero-cta .btn-white,
.hero-menu-btn {
  background: rgba(255, 255, 255, .08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
}
.hero-cta .btn-white:hover,
.hero-menu-btn:hover {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .34);
}
/* Le panneau déroulant, lui, reste une carte claire : c'est un menu, il se
   lit mieux posé que fondu dans le fond. */
.hero-menu-panneau { box-shadow: 0 22px 54px rgba(0, 0, 0, .34), 0 2px 8px rgba(0, 0, 0, .18); }

/* ═══ LES SECTIONS ALTERNENT, CLAIR ET TRÈS CLAIR ═══════════════ */

/* Sans ça, tout ce qui utilisait l'ancien gris se confondrait désormais avec
   le fond de page, et la page redeviendrait une seule bande uniforme. */
.allin { background: var(--carte); }
.cpt   { background: var(--carte); }
.cpt-exp { background: var(--page); }
.faq   { background: var(--page); }

/* ═══ LES CARTES SE DÉTACHENT AU LIEU D'ÊTRE CERNÉES ════════════ */

.feat,
.cpt-flux li,
.cpt-exp-cartes li,
.cpt-col {
  border-color: transparent;
  box-shadow: var(--ombre-bas);
}
.feat:hover { box-shadow: var(--ombre); border-color: transparent; }
.cpt-col--avant { background: var(--carte); }

/* ═══ UNE COULEUR PAR DOMAINE ═══════════════════════════════════ */

.feat--agenda   .feat-ico { background: var(--bleu-fond);   color: var(--bleu); }
.feat--dossiers .feat-ico { background: var(--teal-50);     color: var(--teal-700); }
.feat--compta   .feat-ico { background: var(--orange-fond); color: var(--orange); }
.feat--facture  .feat-ico { background: var(--rose-fond);   color: var(--rose); }
.feat--terrain  .feat-ico { background: var(--vert-fond);   color: var(--vert); }

/* La section comptabilité porte l'orange de bout en bout : surtitre,
   vignettes du parcours, et le trait sous le chiffre du prix. */
.cpt .cpt-eyebrow { color: var(--orange); }
.cpt-flux-ico { background: var(--orange-fond); color: var(--orange); }
/* Le parcours d'un encaissement se termine sur la 2035 : la dernière
   vignette passe au vert, c'est là que ça se conclut. */
.cpt-flux li:last-child .cpt-flux-ico { background: var(--vert-fond); color: var(--vert); }

/* Les experts-comptables restent sur le violet de la marque : ce sont des
   personnes, pas un module du logiciel. */
.cpt-exp .cpt-eyebrow { color: var(--teal-700); }

/* ═══ LE PIED DE PAGE, SOMBRE ═══════════════════════════════════ */

/* Il ferme la page comme le hero l'ouvre. Sans lui, la page se termine sur
   du blanc et retombe à plat juste après le tarif. */
.footer {
  background: var(--encre);
  color: #c2c7de;
  border-top: 0;
}
.footer a { color: #d9dcec; }
.footer a:hover { color: #ffffff; }
.footer-head { color: #ffffff; }
.footer-brand p { color: #9aa1c0; }
.footer-contact-row { color: #c2c7de; }
.footer-social-link {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  color: #d9dcec;
}
.footer-social-link:hover { background: rgba(255, 255, 255, .14); }
.footer-bottom {
  border-top-color: rgba(255, 255, 255, .12);
  color: #8e95b4;
}

/* Le badge des avis : sur l'encre, un trait clair plutôt qu'une bordure
   grise, et la pastille Google garde son fond blanc, comme sur Google. */
.fb-avis { border-color: rgba(255, 255, 255, .16); color: #d9dcec; }
.fb-avis:hover { border-color: rgba(255, 255, 255, .32); color: #ffffff; }
.fb-avis-ligne strong { color: #ffffff; }
.fb-avis-detail { color: #9aa1c0; }

/* ═══ LE TARIF ══════════════════════════════════════════════════ */

/* Le lavande tient lieu de respiration colorée entre la FAQ et le pied de
   page sombre.

   Les trois colonnes de fonctionnalités restent posées à même le fond, sans
   carte ni ombre : mises en boîtes, elles se lisaient comme trois offres
   entre lesquelles choisir, alors qu'il n'y a qu'un seul tarif. */
.pricing { background: var(--teal-50); }