/* ==========================================================================
   FGM TECHNOLOGIES — Gabarits des pages services (PROMPT 07)
   Fichier : assets/css/services.css
   --------------------------------------------------------------------------
   Dépend de fgm-tokens.css + fgm-components.css + animations.css.
   Conventions identiques à home.css : seuls les gabarits propres aux
   pages /services/ vivent ici (hub + 8 pages de service).
   Le motion (révélations, échelonnement) vient du système PROMPT 06 —
   aucune animation locale ; aucune propriété de layout transitionnée
   (garantie PROMPT 06, contrôlée par QA).
   Breakpoints de référence : 1199px, 1023px, 767px, 640px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fil d'Ariane — bandeau discret sous l'en-tête
   -------------------------------------------------------------------------- */
.fgm-fil-bandeau {
  background: var(--fgm-surface-alt);
  border-bottom: 1px solid var(--fgm-bordure);
}

.fgm-fil-bandeau .fgm-container {
  padding-block: var(--fgm-space-3);
}

/* --------------------------------------------------------------------------
   2. Hero de service — grille 7/5, panneau sombre « L'essentiel »
   (écho du hero d'accueil : même vocabulaire visuel, contenu différent)
   -------------------------------------------------------------------------- */
.fgm-svc-hero {
  background: linear-gradient(180deg, var(--fgm-surface-alt) 0%, var(--fgm-bg) 100%);
}

.fgm-svc-hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--fgm-space-10) var(--fgm-space-9);
  align-items: center;
}

.fgm-svc-hero__texte .fgm-eyebrow { margin-bottom: var(--fgm-space-5); }

.fgm-svc-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fgm-space-4);
  margin-top: var(--fgm-space-6);
}

.fgm-svc-hero__panneau {
  display: flex;
  flex-direction: column;
  gap: var(--fgm-space-5);
  padding: var(--fgm-space-8);
  border-radius: var(--fgm-radius-xl);
  box-shadow: var(--fgm-ombre-lg);
}

.fgm-svc-panneau__titre {
  font-family: var(--fgm-font-display);
  font-size: var(--fgm-text-md);
  font-weight: var(--fgm-poids-titre-fort);
  letter-spacing: var(--fgm-tracking-largeur);
  text-transform: uppercase;
  color: var(--fgm-texte-inverse-second);
  margin: 0;
}

.fgm-svc-panneau__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--fgm-space-4);
}

.fgm-svc-panneau__liste li {
  display: flex;
  align-items: flex-start;
  gap: var(--fgm-space-3);
  font-size: var(--fgm-text-sm);
  /* NB : --fgm-texte-inverse est remappé vers l'encre dans .fgm-section--dark
     (tokens.css) — utiliser --fgm-texte-inverse-second, inchangé, sur fond sombre. */
  color: var(--fgm-texte-inverse-second);
}

.fgm-svc-panneau__liste .fgm-icone {
  color: var(--fgm-rouge);
  margin-top: .15em;
  flex: none;
}

.fgm-svc-panneau__resume {
  font-size: var(--fgm-text-sm);
  color: var(--fgm-texte-inverse-second);
  margin: 0;
  padding-top: var(--fgm-space-4);
  border-top: 1px solid var(--fgm-bordure);
}

.fgm-svc-panneau__retour {
  font-size: var(--fgm-text-sm);
  /* laisse .fgm-link (.fgm-section--dark .fgm-link → blanc) porteur de la couleur */
  color: var(--fgm-blanc);
}

/* --------------------------------------------------------------------------
   3. Sections à deux colonnes (problèmes)
   -------------------------------------------------------------------------- */
.fgm-svc-deux-col {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--fgm-space-10) var(--fgm-space-9);
  align-items: start;
}

.fgm-svc-problemes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--fgm-space-5);
}

.fgm-svc-probleme {
  display: flex;
  align-items: flex-start;
  gap: var(--fgm-space-4);
  padding: var(--fgm-space-4) var(--fgm-space-5);
  background: var(--fgm-surface-soft, var(--fgm-surface-alt));
  border: 1px solid var(--fgm-bordure);
  border-radius: var(--fgm-radius-lg);
  font-size: var(--fgm-text-md);
}

.fgm-svc-probleme .fgm-icone {
  color: var(--fgm-rouge-fonce);
  flex: none;
  margin-top: .2em;
}

/* --------------------------------------------------------------------------
   4. Solutions — cartes 2 × 2
   -------------------------------------------------------------------------- */
.fgm-svc-solutions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fgm-svc-solution .fgm-card__titre {
  margin-bottom: var(--fgm-space-3);
}

/* --------------------------------------------------------------------------
   5. Livrables — liste de contrôle à coche (grille 2 colonnes)
   (les items portent le composant .fgm-atout déplacé en §17 des
   fgm-components.css)
   -------------------------------------------------------------------------- */
.fgm-svc-livrables {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fgm-space-4) var(--fgm-space-7);
  max-width: 62rem;
}

/* --------------------------------------------------------------------------
   6. Méthode — 4 étapes numérotées (composant .fgm-card--etape)
   -------------------------------------------------------------------------- */
.fgm-svc-methode {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* --------------------------------------------------------------------------
   7. Cas d'usage — réalisations documentées + situations types
   -------------------------------------------------------------------------- */
.fgm-svc-cases {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fgm-svc-exemples {
  margin-top: var(--fgm-space-9);
  padding: var(--fgm-space-7);
  background: var(--fgm-surface-alt);
  border: 1px solid var(--fgm-bordure);
  border-radius: var(--fgm-radius-xl);
}

.fgm-svc-exemples__titre {
  font-family: var(--fgm-font-display);
  font-size: var(--fgm-text-lg);
  font-weight: var(--fgm-poids-titre);
  margin: 0 0 var(--fgm-space-5);
}

.fgm-svc-exemples ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--fgm-space-4);
}

.fgm-svc-exemples li {
  display: flex;
  align-items: flex-start;
  gap: var(--fgm-space-3);
}

.fgm-svc-exemples .fgm-icone {
  color: var(--fgm-rouge);
  margin-top: .25em;
  flex: none;
}

.fgm-svc-cas__liens {
  margin-top: var(--fgm-space-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--fgm-space-4) var(--fgm-space-8);
}

/* --------------------------------------------------------------------------
   8. FAQ — <details> natifs, sans JavaScript
   -------------------------------------------------------------------------- */
.fgm-svc-faq-colonne {
  max-width: 52rem;
}

.fgm-svc-faq {
  display: grid;
  gap: var(--fgm-space-4);
}

.fgm-faq-item {
  background: var(--fgm-bg);
  border: 1px solid var(--fgm-bordure);
  border-radius: var(--fgm-radius-lg);
  overflow: hidden;
}

.fgm-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fgm-space-4);
  padding: var(--fgm-space-5) var(--fgm-space-6);
  cursor: pointer;
  font-family: var(--fgm-font-display);
  font-weight: var(--fgm-poids-titre);
  font-size: var(--fgm-text-md);
  color: var(--fgm-texte);
  list-style: none;
}

.fgm-faq-item summary::-webkit-details-marker { display: none; }

.fgm-faq-item summary .fgm-icone {
  flex: none;
  color: var(--fgm-rouge-fonce);
  transition: transform var(--fgm-dur-rapide) var(--fgm-ease-standard);
}

.fgm-faq-item[open] summary .fgm-icone {
  transform: rotate(180deg);
}

.fgm-faq-item summary:hover { color: var(--fgm-rouge-fonce); }

.fgm-faq-item summary:focus-visible {
  outline: var(--fgm-ligne-focus) solid var(--fgm-focus);
  outline-offset: calc(-1 * var(--fgm-decalage-focus));
}

.fgm-faq-item__reponse {
  padding: 0 var(--fgm-space-6) var(--fgm-space-5);
}

.fgm-faq-item__reponse p {
  margin: 0;
  color: var(--fgm-texte-second);
  font-size: var(--fgm-text-md);
}

/* --------------------------------------------------------------------------
   9. Cartes services (hub + services liés)
   (composant .fgm-carte-service rendu par fgm_carte_service())
   -------------------------------------------------------------------------- */
/* Garde-fou : les longs mots français (« complémentaires » à 38px,
   ~341px) ne doivent jamais dépasser leur boîte sur écran étroit. */
.fgm-section-header .fgm-display-2,
.fgm-svc-hero h1,
.fgm-carte-service h3 {
  overflow-wrap: break-word;
}

.fgm-svc-lies {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fgm-carte-service {
  display: flex;
  flex-direction: column;
  gap: var(--fgm-space-3);
  color: inherit;
  text-decoration: none;
}

.fgm-carte-service .fgm-card__pastille {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: var(--fgm-radius-sm);
  background: var(--fgm-encre);
  color: var(--fgm-blanc);
}

.fgm-carte-service .fgm-card__texte {
  color: var(--fgm-texte-second);
  margin: 0;
  flex: 1;
}

.fgm-carte-service__pied {
  display: inline-flex;
  align-items: center;
  gap: var(--fgm-space-2);
  font-size: var(--fgm-text-sm);
  font-weight: var(--fgm-poids-fort);
  color: var(--fgm-rouge-fonce);
}

.fgm-carte-service:hover .fgm-card__titre {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   10. Hub — hero centré + lead limité
   -------------------------------------------------------------------------- */
.fgm-svc-hero--hub .fgm-container {
  max-width: 46rem;
}

.fgm-svc-hub__lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   11. Points de rupture
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .fgm-svc-solutions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fgm-svc-methode, .fgm-svc-cases, .fgm-svc-lies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .fgm-svc-hero__grille { grid-template-columns: 1fr; }
  .fgm-svc-hero__panneau { max-width: 30rem; }
  .fgm-svc-deux-col { grid-template-columns: 1fr; }
  .fgm-svc-livrables { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .fgm-svc-hero__panneau { margin-inline: auto; }
}

@media (max-width: 767px) {
  .fgm-svc-solutions, .fgm-svc-methode, .fgm-svc-cases, .fgm-svc-lies { grid-template-columns: 1fr; }
  .fgm-svc-hero__panneau { padding: var(--fgm-space-6); }
  .fgm-svc-hero__ctas .fgm-btn { width: 100%; }
  .fgm-svc-exemples { padding: var(--fgm-space-5); }
  .fgm-faq-item summary { padding: var(--fgm-space-4) var(--fgm-space-5); }
  .fgm-faq-item__reponse { padding: 0 var(--fgm-space-5) var(--fgm-space-4); }
}