/* ============================================================================
   plateforme.css — modules Comptabilité et Assistant IA
   ----------------------------------------------------------------------------
   Feuille additionnelle, chargée APRÈS style.css. Elle n'en redéfinit aucune
   règle : elle réutilise les jetons de :root (couleurs, polices, rayons) et
   n'ajoute que des composants propres aux pages de module. Séparer le fichier
   garde style.css lisible et rend ces pages faciles à retirer ou à faire
   évoluer sans risque pour le reste du site.
   ========================================================================== */

/* ── Jetons complémentaires ────────────────────────────────────────────── */
:root {
  --encre:       #12343B;   /* bleu-vert profond : la comptabilité, par contraste
                               avec le bordeaux des RH — deux métiers, deux teintes */
  --encre-pale:  #EFF4F5;
  --or:          #B8860B;   /* accent de l'assistant IA */
  --or-pale:     #FBF6E9;

  /* Gouttière latérale du site, reprise telle quelle de la règle `section` de style.css.
     Tout bloc de niveau section défini ici écrase ce `padding` d'origine : sans ce jeton
     posé explicitement, il perd sa marge et son contenu vient coller au bord de l'écran.
     C'est ce qui faisait déborder le texte des pages de module en dessous de 700 px. */
  --gouttiere: clamp(24px, 5vw, 80px);
}

/* ── En-tête de page de module ─────────────────────────────────────────── */
.module-hero {
  padding: calc(var(--nav-h) + 72px) var(--gouttiere) 72px;
  background:
    radial-gradient(1200px 400px at 15% -10%, var(--encre-pale), transparent 60%),
    var(--blanc-chaud);
  border-bottom: 1px solid var(--border);
}
.module-hero--ia {
  background:
    radial-gradient(1200px 400px at 15% -10%, var(--or-pale), transparent 60%),
    var(--blanc-chaud);
}

.module-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: center;
}

.module-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--blanc);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--encre);
  margin-bottom: 24px;
}
.module-badge--ia { color: var(--or); }

.module-title {
  font-family: var(--ff-display);
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.08;
  font-weight: 600;
  color: var(--noir);
  margin: 0 0 20px;
}
.module-title em {
  font-style: italic;
  color: var(--encre);
}
.module-title--ia em { color: var(--or); }

.module-lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--gris-moyen);
  max-width: 60ch;
  margin: 0 0 32px;
}

/* ── Aperçu chiffré ────────────────────────────────────────────────────── */
.module-stats {
  display: grid;
  /* Deux colonnes fixes, jamais `auto-fit` : à trois colonnes le quatrième repère se
     retrouvait seul sur sa ligne, à côté d'une cellule vide grise — la grille avait l'air
     inachevée. Quatre repères tiennent naturellement en 2×2. */
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.module-stat {
  background: var(--blanc);
  padding: 24px 20px;
}
.module-stat-value {
  font-family: var(--ff-display);
  font-size: 34px;
  font-weight: 600;
  color: var(--encre);
  line-height: 1;
}
.module-hero--ia .module-stat-value { color: var(--or); }
.module-stat-label {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gris-moyen);
}

/* ── Sections de contenu ───────────────────────────────────────────────── */
.module-section { padding: 88px var(--gouttiere); }
.module-section--alt { background: var(--blanc-chaud); }

/* ── Grille de fonctionnalités ─────────────────────────────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.feature-card {
  background: var(--blanc);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature-card:hover,
.feature-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--encre) 25%, var(--border));
}
.feature-card-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--encre-pale);
  font-size: 22px;
  margin-bottom: 18px;
}
.feature-card--ia .feature-card-icon { background: var(--or-pale); }
.feature-card h3 {
  font-family: var(--ff-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--noir);
  margin: 0 0 10px;
}
.feature-card p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--gris-moyen);
  margin: 0;
}

/* ── Déroulé en étapes ─────────────────────────────────────────────────── */
.flow {
  margin-top: 48px;
  display: grid;
  gap: 0;
  counter-reset: etape;
}
.flow-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--border);
}
.flow-step:last-child { border-bottom: 1px solid var(--border); }
.flow-step-num {
  counter-increment: etape;
  font-family: var(--ff-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--encre);
  line-height: 1;
}
.flow-step-num::before { content: counter(etape, decimal-leading-zero); }
.flow-step h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--noir);
  margin: 0 0 6px;
}
.flow-step p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--gris-moyen);
  margin: 0;
  max-width: 72ch;
}

/* ── Bloc « ce que cela change » ───────────────────────────────────────── */
.contraste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
.contraste-carte {
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--border);
}
.contraste-carte--avant { background: var(--blanc); }
.contraste-carte--apres {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--blanc);
}
.contraste-carte h3 {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: var(--gris-moyen);
}
.contraste-carte--apres h3 { color: rgba(255,255,255,.6); }
.contraste-carte ul { list-style: none; margin: 0; padding: 0; }
.contraste-carte li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gris-fonce);
}
.contraste-carte--apres li { color: rgba(255,255,255,.92); }
.contraste-carte li::before {
  content: "—";
  color: var(--gris-clair);
  flex: none;
}
.contraste-carte--apres li::before { content: "✓"; color: #7FD1AE; }

/* ── Exemples de questions (page IA) ───────────────────────────────────── */
.questions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 48px;
}
.question-bulle {
  background: var(--blanc);
  border: 1px solid var(--border);
  border-left: 3px solid var(--or);
  border-radius: var(--radius);
  padding: 18px 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gris-fonce);
  font-style: italic;
}

/* ── Bandeau d'appel à l'action ────────────────────────────────────────── */
.module-cta {
  background: var(--noir);
  color: var(--blanc);
  padding: 80px var(--gouttiere);
  text-align: center;
}
.module-cta h2 {
  font-family: var(--ff-display);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 600;
  margin: 0 0 16px;
}
.module-cta p {
  color: rgba(255,255,255,.7);
  font-size: 17px;
  line-height: 1.7;
  max-width: 62ch;
  margin: 0 auto 32px;
}
.module-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Section « plateforme » de la page d'accueil ───────────────────────── */
.modules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
.module-carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.module-carte:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.module-carte-tag {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rouge);
  margin-bottom: 14px;
}
.module-carte--compta .module-carte-tag { color: var(--encre); }
.module-carte h3 {
  font-family: var(--ff-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--noir);
  margin: 0 0 14px;
}
.module-carte p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--gris-moyen);
  margin: 0 0 22px;
}
.module-carte-liste {
  list-style: none; margin: 0 0 26px; padding: 0;
  display: grid; gap: 9px;
}
.module-carte-liste li {
  font-size: 14.5px;
  color: var(--gris-fonce);
  display: flex; gap: 10px; line-height: 1.5;
}
.module-carte-liste li::before { content: "▸"; color: var(--rouge); flex: none; }
.module-carte--compta .module-carte-liste li::before { color: var(--encre); }
.module-carte-lien {
  margin-top: auto;
  font-weight: 600;
  font-size: 15px;
  color: var(--rouge);
  display: inline-flex; align-items: center; gap: 8px;
}
.module-carte--compta .module-carte-lien { color: var(--encre); }
.module-carte:hover .module-carte-lien span { transform: translateX(4px); }
.module-carte-lien span { transition: transform .2s ease; }

/* ── Bandeau IA transversal ────────────────────────────────────────────── */
.ia-bandeau {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  background: linear-gradient(120deg, #14232B 0%, #1D3A44 100%);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  color: var(--blanc);
}
.ia-bandeau-tag {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; color: var(--or); margin-bottom: 12px;
}
.ia-bandeau h3 {
  font-family: var(--ff-display);
  font-size: 28px; font-weight: 600; margin: 0 0 12px;
}
.ia-bandeau p {
  margin: 0; color: rgba(255,255,255,.75);
  font-size: 15.5px; line-height: 1.7; max-width: 70ch;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .module-hero-grid,
  .modules-grid,
  .contraste,
  .ia-bandeau { grid-template-columns: 1fr; }
  .ia-bandeau { padding: 32px 26px; }
  .module-hero { padding: calc(var(--nav-h) + 48px) var(--gouttiere) 56px; }
  .module-section { padding: 64px var(--gouttiere); }
}
@media (max-width: 560px) {
  .module-stats { grid-template-columns: 1fr; }
  .flow-step { grid-template-columns: 40px 1fr; gap: 16px; }
  .module-carte { padding: 28px 24px; }
}

/* Respecte le réglage système : pas d'animation imposée. */
@media (prefers-reduced-motion: reduce) {
  .module-carte, .feature-card, .module-carte-lien span { transition: none; }
  .module-carte:hover, .feature-card:hover { transform: none; }
}

/* ── Menu déroulant « La plateforme » ──────────────────────────────────────
   Trois entrées de plus dans une barre déjà pleine la faisaient passer sur deux
   lignes et tronquaient le bouton d'appel à l'action. Elles sont regroupées sous
   une seule entrée, qui s'ouvre au survol **et au focus clavier** : un menu
   accessible à la souris seule exclurait une partie des visiteurs.
   ------------------------------------------------------------------------- */
.nav-item-sous-menu { position: relative; }

.nav-item-sous-menu > a::after {
  content: "▾";
  margin-left: 6px;
  font-size: 10px;
  opacity: .6;
}

.nav-sous-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 312px;   /* chaque description tient sur une ligne */
  background: var(--blanc);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 200;
}
.nav-item-sous-menu:hover .nav-sous-menu,
.nav-item-sous-menu:focus-within .nav-sous-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Pont invisible : sans lui, le menu se referme dès que la souris quitte le lien. */
.nav-item-sous-menu::after {
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 14px;
}

.nav-sous-menu li { display: block; }
.nav-sous-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--gris-fonce);
  white-space: nowrap;
}
.nav-sous-menu a:hover,
.nav-sous-menu a:focus-visible {
  background: var(--blanc-chaud);
  color: var(--rouge);
}
.nav-sous-menu .sous-menu-desc {
  display: block;
  font-size: 12.5px;
  color: var(--gris-clair);
  white-space: normal;
  margin-top: 2px;
}

/* La barre horizontale passait au burger à 768 px seulement, et se disloquait entre-temps :
   le logo chevauchait la première entrée et le bouton d'appel était tronqué. Le défaut est
   antérieur à l'ajout du sous-menu — vérifié en rendant le menu d'origine à 900 px — mais il
   n'y avait aucune raison de le laisser. Le basculement est remonté à 1100 px, largeur à
   laquelle les sept entrées cessent de tenir.

   Le sous-menu suit le même seuil : le désolidariser le ferait se déplier à plat alors que
   la barre est encore horizontale. */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}

/* Une entrée de menu ne se coupe jamais en deux lignes. Sans cette règle, la barre
   ne débordait pas : chaque libellé se repliait sur lui-même (« La / plateforme »,
   « Contactez- / nous ») et la pastille du bouton d'appel débordait de son fond. Le
   symptôme ressemblait à un défaut de hauteur, pas à un manque de largeur.

   L'espacement se resserre ensuite par paliers plutôt que de renvoyer au burger dès
   1300 px : sur un portable 1280, une barre horizontale reste préférable à un menu
   replié. En dessous de 1100 px les six entrées ne tiennent plus, quel que soit le
   resserrement — c'est là que le burger prend le relais. */
.nav-links a { white-space: nowrap; }

@media (max-width: 1360px) { .nav-links { gap: 24px; } }
@media (max-width: 1220px) { .nav-links { gap: 18px; } }
@media (max-width: 1150px) {
  .nav-links { gap: 14px; }
  .nav-cta { padding: 10px 16px; }
}

@media (max-width: 1100px) {
  .nav-sous-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: none;
    min-width: 0;
    padding: 0 0 0 14px;
    background: transparent;
  }
  .nav-item-sous-menu > a::after { display: none; }
  .nav-sous-menu .sous-menu-desc { display: none; }
}

/* ── Page Ressources humaines ──────────────────────────────────────────────
   Le module RH garde le bordeaux de la marque, là où la comptabilité prend le
   bleu-vert : la couleur dit de quel métier on parle avant qu'on ait lu le titre.
   ------------------------------------------------------------------------- */
.module-hero--rh {
  background:
    radial-gradient(1200px 400px at 15% -10%, var(--rouge-pale), transparent 60%),
    var(--blanc-chaud);
}
.module-badge--rh { color: var(--rouge); }
.module-title--rh em { color: var(--rouge); }
.module-hero--rh .module-stat-value { color: var(--rouge); }
.module-hero--rh .feature-card-icon { background: var(--rouge-pale); }
.contraste-carte--rh {
  background: var(--rouge);
  border-color: var(--rouge);
}

/* ── Regroupement des prestations par famille ──────────────────────────── */
.famille { margin-top: 56px; }
.famille:first-of-type { margin-top: 40px; }

.famille-entete {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--border);
}
.famille-titre {
  font-family: var(--ff-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--noir);
  margin: 0;
}
.famille-sous {
  margin: 0;
  font-size: 14.5px;
  color: var(--gris-moyen);
}
.famille .feature-grid { margin-top: 24px; }

/* ── Aperçu court des prestations, sur l'accueil ───────────────────────── */
.apercu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.apercu-item {
  padding: 22px 0 0;
  border-top: 2px solid var(--rouge);
}
.apercu-item h3 {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--noir);
  margin: 0 0 8px;
}
.apercu-item p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--gris-moyen);
  margin: 0;
}
/* Le simulateur précède le lien vers le détail des prestations, sur une même
   ligne. La marge haute passe au conteneur : .apercu-lien porte la sienne pour
   son usage isolé, on la neutralise ici pour ne pas la compter deux fois. */
.apercu-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 36px;
}
.apercu-actions .apercu-lien { margin-top: 0; }

.apercu-lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--rouge);
}
.apercu-lien span { transition: transform .2s ease; }
.apercu-lien:hover span { transform: translateX(4px); }

/* `auto-fill` et non `auto-fit` dans les familles : une famille à une seule prestation
   (« Déclarer », « Anticiper ») voyait sa carte s'étirer sur toute la largeur, ce qui
   lui donnait une importance qu'elle n'a pas. `auto-fill` conserve les colonnes vides. */
.famille .feature-grid {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

/* ── Modules complémentaires, sous la grille de formules ───────────────────
   Ce ne sont pas des formules mais des suppléments : les présenter comme une
   quatrième carte de prix laisserait croire qu'il faut choisir entre eux et la
   formule RH. D'où un bloc distinct, visuellement en retrait.
   ------------------------------------------------------------------------- */
.options {
  margin-top: 56px;
  border-top: 1px solid var(--border);
  padding-top: 48px;
}
.options-entete { text-align: center; margin-bottom: 32px; }
.options-entete h3 {
  font-family: var(--ff-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--noir);
  margin: 0 0 10px;
}
.options-entete p {
  margin: 0 auto;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--gris-moyen);
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
}
.option-card {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px;
}
.option-card--compta { border-top: 3px solid var(--encre); }
.option-card--ia { border-top: 3px solid var(--or); }

.option-nom {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gris-moyen);
  margin-bottom: 12px;
}
.option-prix {
  font-family: var(--ff-display);
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  color: var(--encre);
}
.option-card--ia .option-prix { color: var(--or); }
.option-prix small {
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--gris-moyen);
  margin-left: 6px;
}
.option-unite {
  margin: 10px 0 20px;
  font-size: 14px;
  color: var(--gris-moyen);
}
.option-card ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
/* Deux colonnes, donc **exactement deux enfants** : la puce du ::before et un <span> qui
   enveloppe tout le texte. Sans cet enveloppement, chaque nœud — le <strong> puis le texte
   qui le suit — occupait sa propre cellule, et « et par module » se retrouvait empilé mot
   à mot sous la ligne précédente. Le même piège existe en flex, avec des éléments anonymes. */
.option-card li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  font-size: 14.5px; line-height: 1.6; color: var(--gris-fonce);
}
.option-card li::before { content: "✓"; color: var(--encre); font-weight: 700; }
.option-card--ia li::before { color: var(--or); }
.option-lien {
  margin-top: auto;
  font-weight: 600; font-size: 15px;
  color: var(--encre);
  display: inline-flex; align-items: center; gap: 8px;
}
.option-card--ia .option-lien { color: var(--or); }

/* Sur le fond bordeaux pâle de la section Conseil, le filet des items a besoin d'un
   peu plus de présence que sur le blanc chaud des prestations. */
.conseil-rh .apercu-item { border-top-width: 3px; }
.conseil-rh .apercu-grid { margin-top: 44px; }
/* Le bouton reprend l'air que le lien de l'aperçu laisse au-dessus de lui. */
.conseil-rh .conseil-cta { margin-top: 44px; }

/* La pastille « 30h récupérées » est positionnée en bas à droite du visuel et venait
   recouvrir la ligne de total, qui se lisait « … consacre à l'admi ». Deux lignes de plus
   dans le graphique ont rapproché les deux. On réserve la place plutôt que de déplacer la
   pastille, qui joue son rôle d'accroche là où elle est. */
.context-card--main > div:last-child {
  padding-right: 210px;
}
@media (max-width: 980px) {
  .context-card--main > div:last-child { padding-right: 0; }
}

/* ── Lien dans un texte courant ────────────────────────────────────────────
   La feuille de base neutralise tous les liens (`a { color: inherit; text-decoration:
   none }`). Sans classe dédiée, ces trois termes resteraient indiscernables du reste de
   la phrase et personne ne saurait qu'ils mènent quelque part.

   Le soulignement est porté par `text-decoration` et non par une bordure : il épouse les
   jambages et suit le retour à la ligne, ce qu'une bordure ne fait pas.
   ------------------------------------------------------------------------- */
.lien-texte {
  color: var(--rouge);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--rouge) 35%, transparent);
  transition: text-decoration-color .2s ease, color .2s ease;
}
.lien-texte:hover,
.lien-texte:focus-visible {
  text-decoration-color: var(--rouge);
  color: var(--rouge-vif);
}