/* ==========================================================================
   FGM TECHNOLOGIES — Gabarits de la page d'accueil
   Fichier : assets/css/home.css
   --------------------------------------------------------------------------
   Dépend de fgm-tokens.css + fgm-components.css (design system PROMPT 04).
   Seuls les gabarits propres à l'accueil sont définis ici ; tout le reste
   (boutons, cartes, formulaires, en-tête, pied de page) vient des
   composants partagés.
   Breakpoints de référence : 1199px, 1023px, 767px, 640px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero — grille 7/5, panneau sombre à droite
   -------------------------------------------------------------------------- */
.fgm-hero {
  /* léger voile alterné pour asseoir la lecture du hero */
  background: linear-gradient(180deg, var(--fgm-surface-alt) 0%, var(--fgm-bg) 100%);
}

.fgm-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-hero__texte .fgm-eyebrow { margin-bottom: var(--fgm-space-5); }

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

/* Panneau sombre : variante carrée du logo réel (blanc sur noir) */
.fgm-hero__panneau {
  display: flex;
  flex-direction: column;
  gap: var(--fgm-space-6);
  padding: var(--fgm-space-8);
  border-radius: var(--fgm-radius-xl);
  box-shadow: var(--fgm-ombre-lg);
}

.fgm-hero__logo {
  width: 8rem;
  height: auto;
  border-radius: var(--fgm-radius-md);
}

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

.fgm-hero__poles li {
  display: flex;
  align-items: center;
  gap: var(--fgm-space-3);
  padding: var(--fgm-space-3) var(--fgm-space-4);
  border: 1px solid var(--fgm-bordure);
  border-radius: var(--fgm-radius-full);
  font-family: var(--fgm-font-display);
  font-weight: var(--fgm-poids-moyen);
  font-size: var(--fgm-text-sm);
  letter-spacing: var(--fgm-tracking-largeur);
  text-transform: uppercase;
  color: var(--fgm-texte-inverse-second);
}

.fgm-hero__poles li::before {
  content: "";
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--fgm-rouge);
  flex: none;
}

/* --------------------------------------------------------------------------
   2. Présentation — deux colonnes texte / valeurs
   -------------------------------------------------------------------------- */
.fgm-deux-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--fgm-space-10) var(--fgm-space-9);
  align-items: start;
}

.fgm-valeurs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --------------------------------------------------------------------------
   3. Pôles de services — cartes avec liste de services
   -------------------------------------------------------------------------- */
.fgm-poles {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fgm-card--pole .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);
  margin-bottom: var(--fgm-space-5);
}

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

.fgm-pole__liste li {
  display: grid;
  gap: var(--fgm-space-1);
  padding-top: var(--fgm-space-3);
  border-top: 1px solid var(--fgm-bordure);
  font-size: var(--fgm-text-sm);
}

.fgm-pole__liste strong {
  font-family: var(--fgm-font-display);
  font-weight: var(--fgm-poids-fort);
  color: var(--fgm-texte);
  font-size: var(--fgm-text-base);
}

.fgm-pole__liste span { color: var(--fgm-texte-second); }

/* PROMPT 07 — services cliquables dans les cartes pôles :
   lien bloc, retour à la couleur locale ; survol SANS transition
   (garantie PROMPT 06 : aucune propriété hors transform/opacity
   transitionnée) */
.fgm-pole__lien {
  color: inherit;
  text-decoration: none;
  display: block;
}

.fgm-pole__lien:hover strong,
.fgm-pole__lien:focus-visible strong { text-decoration: underline; }

.fgm-section__cta { margin-top: var(--fgm-space-8); text-align: center; }

/* --------------------------------------------------------------------------
   4. Réalisations et articles — grilles de cartes
   (styles de sous-composants .fgm-card__note / .fgm-card__tags déplacés
   vers fgm-components.css en PROMPT 07 : réutilisés par les pages services)
   -------------------------------------------------------------------------- */
.fgm-projets {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

/* --------------------------------------------------------------------------
   5. Approche — grille d'étapes numérotées
   (le style du numéro .fgm-etape__numero est déplacé en PROMPT 07 vers
   fgm-components.css : réutilisé par les pages services)
   -------------------------------------------------------------------------- */
.fgm-etapes {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* --------------------------------------------------------------------------
   6. Atouts vérifiables + repères
   (le style d'item .fgm-atout est déplacé en PROMPT 07 vers
   fgm-components.css : réutilisé par les pages services)
   -------------------------------------------------------------------------- */
.fgm-atouts-liste {
  list-style: none;
  margin: 0 0 var(--fgm-space-9);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fgm-space-4) var(--fgm-space-7);
  max-width: 62rem;
}

.fgm-reperes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 62rem;
}

.fgm-reperes__note { margin-top: var(--fgm-space-3); }

/* --------------------------------------------------------------------------
   7. CTA de contact (section sombre)
   -------------------------------------------------------------------------- */
.fgm-cta__texte {
  margin-inline: auto;
  max-width: 52ch;
}

.fgm-cta__contact {
  margin-top: var(--fgm-space-9);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fgm-space-4) var(--fgm-space-7);
  font-style: normal;
  font-size: var(--fgm-text-sm);
}

.fgm-cta__item {
  display: inline-flex;
  align-items: center;
  gap: var(--fgm-space-2);
  color: var(--fgm-texte-inverse-second);
  text-decoration: none;
}

a.fgm-cta__item:hover { color: var(--fgm-blanc); text-decoration: underline; }

.fgm-cta__item .fgm-icone { color: var(--fgm-rouge); }

/* --------------------------------------------------------------------------
   8. Pied de page — grille 4 colonnes
   -------------------------------------------------------------------------- */
.fgm-footer__grille {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 2.5fr) minmax(0, 2.5fr) minmax(0, 3fr);
  gap: var(--fgm-space-8) var(--fgm-space-7);
}

.fgm-footer__marque p {
  margin: var(--fgm-space-4) 0 0;
  max-width: 34ch;
}

.fgm-footer__marque img {
  width: 5rem;
  height: auto;
  border-radius: var(--fgm-radius-sm);
}

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

.fgm-footer__contact {
  font-style: normal;
  display: grid;
  gap: var(--fgm-space-2);
}

.fgm-footer__legal {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--fgm-space-4) !important;
}

/* --------------------------------------------------------------------------
   9. Points de rupture
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .fgm-poles, .fgm-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fgm-projets, .fgm-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fgm-footer__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

@media (max-width: 767px) {
  .fgm-valeurs { grid-template-columns: 1fr; }
  .fgm-poles, .fgm-etapes, .fgm-projets, .fgm-articles { grid-template-columns: 1fr; }
  .fgm-reperes { grid-template-columns: 1fr; }
  .fgm-footer__grille { grid-template-columns: 1fr; }
  .fgm-hero__panneau { padding: var(--fgm-space-6); }
  .fgm-section__cta { text-align: left; }
  .fgm-cta__contact { flex-direction: column; align-items: flex-start; }
  .fgm-hero__ctas .fgm-btn { width: 100%; }
}

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

/* --------------------------------------------------------------------------
   10. Menu mobile — bascule des icônes ouvrir/fermer
   (complément au patron .fgm-menu-btn du design system : l'état fermé
   masque la croix, l'état ouvert masque les barres)
   -------------------------------------------------------------------------- */
.fgm-menu-btn .fgm-icone--croix { display: none; }
.fgm-menu-btn[aria-expanded="true"] .fgm-icone--menu { display: none; }
.fgm-menu-btn[aria-expanded="true"] .fgm-icone--croix { display: block; }