/* ==========================================================================
   FGM TECHNOLOGIES — Composants réutilisables
   Fichier : fgm-components.css · Version 1.0 · 26/10/2026
   --------------------------------------------------------------------------
   Conventions :
   - préfixe .fgm- (aucun style global agressif hors reset léger) ;
   - dépend de fgm-tokens.css et fgm-fonts.css (chargés avant) ;
   - rendu intégral sans JavaScript : les états interactifs sont en CSS,
     JS n'ajoute que des améliorations (menu, reveal au scroll) ;
   - focus clavier toujours visible (ring rouge, décalé) ;
   - adapté au rendu serveur (HTML sémantique, classes stables).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base et reset léger
   -------------------------------------------------------------------------- */
.fgm-root, .fgm-root *, .fgm-root *::before, .fgm-root *::after {
  box-sizing: border-box;
}

.fgm-root {
  background: var(--fgm-bg);
  color: var(--fgm-texte);
  font-family: var(--fgm-font-text);
  font-size: var(--fgm-text-base);
  line-height: var(--fgm-leading-texte);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fgm-root ::selection { background: var(--fgm-selection); }

.fgm-root img, .fgm-root svg, .fgm-root video {
  max-width: 100%;
  height: auto;
  display: block;
}

.fgm-root :focus-visible {
  outline: var(--fgm-ligne-focus);
  outline-offset: var(--fgm-decalage-focus);
  border-radius: var(--fgm-radius-xs);
}

.fgm-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.fgm-skip-link {
  position: absolute;
  left: var(--fgm-space-4);
  top: var(--fgm-space-4);
  z-index: var(--fgm-z-toast);
  background: var(--fgm-encre);
  color: var(--fgm-blanc);
  padding: var(--fgm-space-3) var(--fgm-space-5);
  border-radius: var(--fgm-radius-full);
  text-decoration: none;
  font-weight: var(--fgm-poids-fort);
  font-size: var(--fgm-text-sm);
  transform: translateY(-200%);
  transition: transform var(--fgm-dur-base) var(--fgm-ease-standard);
}
.fgm-skip-link:focus-visible { transform: translateY(0); }

/* --------------------------------------------------------------------------
   2. Mise en page : conteneur, sections, grille 12 colonnes
   -------------------------------------------------------------------------- */
.fgm-container {
  width: min(100% - (var(--fgm-gouttiere) * 2), var(--fgm-container));
  margin-inline: auto;
}

.fgm-section {
  padding-block: var(--fgm-section-y);
}
.fgm-section--s { padding-block: var(--fgm-section-y-s); }
.fgm-section--alt { background: var(--fgm-surface-alt); }
.fgm-section--dark {
  background: var(--fgm-surface-dark);
  color: var(--fgm-texte);
}

.fgm-grid {
  display: grid;
  grid-template-columns: repeat(var(--fgm-colonnes), minmax(0, 1fr));
  gap: var(--fgm-space-6) var(--fgm-gouttiere);
}

.fgm-col-3  { grid-column: span 3; }
.fgm-col-4  { grid-column: span 4; }
.fgm-col-6  { grid-column: span 6; }
.fgm-col-8  { grid-column: span 8; }
.fgm-col-12 { grid-column: span 12; }

@media (max-width: 1199px) {
  .fgm-col-3, .fgm-col-4 { grid-column: span 6; }
  .fgm-col-8 { grid-column: span 12; }
}
@media (max-width: 767px) {
  .fgm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fgm-col-3, .fgm-col-4, .fgm-col-6 { grid-column: span 4; }
}

/* --------------------------------------------------------------------------
   3. Typographie
   -------------------------------------------------------------------------- */
.fgm-eyebrow {
  font-family: var(--fgm-font-text);
  font-size: var(--fgm-text-xs);
  font-weight: var(--fgm-poids-fort);
  letter-spacing: var(--fgm-tracking-largeur);
  text-transform: uppercase;
  color: var(--fgm-rouge-texte, var(--fgm-rouge-fonce));
  display: inline-flex;
  align-items: center;
  gap: var(--fgm-space-2);
}
.fgm-eyebrow::before {
  content: "";
  width: 1.5rem; height: 2px;
  background: currentColor;
  border-radius: var(--fgm-radius-full);
}

.fgm-display-1, .fgm-display-2, .fgm-display-3,
.fgm-h1, .fgm-h2, .fgm-h3, .fgm-h4 {
  font-family: var(--fgm-font-display);
  font-weight: var(--fgm-poids-titre);
  line-height: var(--fgm-leading-titre);
  margin: 0 0 var(--fgm-space-5);
  text-wrap: balance;
}

.fgm-display-1 { font-size: var(--fgm-text-5xl); font-weight: var(--fgm-poids-titre-fort); letter-spacing: var(--fgm-tracking-large); line-height: var(--fgm-leading-serré); }
.fgm-display-2 { font-size: var(--fgm-text-4xl); font-weight: var(--fgm-poids-titre-fort); letter-spacing: var(--fgm-tracking-large); line-height: var(--fgm-leading-serré); }
.fgm-display-3 { font-size: var(--fgm-text-3xl); letter-spacing: var(--fgm-tracking-large); }
.fgm-h1 { font-size: var(--fgm-text-3xl); }
.fgm-h2 { font-size: var(--fgm-text-2xl); }
.fgm-h3 { font-size: var(--fgm-text-xl); }
.fgm-h4 { font-size: var(--fgm-text-lg); }

.fgm-lead {
  font-size: var(--fgm-text-md);
  color: var(--fgm-texte-second);
  max-width: 62ch;
  margin: 0 0 var(--fgm-space-6);
}

.fgm-small { font-size: var(--fgm-text-sm); color: var(--fgm-texte-second); }
.fgm-meta  { font-size: var(--fgm-text-xs); color: var(--fgm-texte-tertiaire); }

.fgm-section--dark .fgm-lead,
.fgm-theme-dark .fgm-lead { color: var(--fgm-texte-second); }

/* --------------------------------------------------------------------------
   4. Boutons — patron hérité du site actuel : encre au repos,
      accent rouge au survol [THEME : --clb-color-button / -button-hover]
   -------------------------------------------------------------------------- */
.fgm-btn {
  --_btn-bg: var(--fgm-encre);
  --_btn-fg: var(--fgm-blanc);
  --_btn-bg-hover: var(--fgm-rouge);
  --_btn-fg-hover: var(--fgm-blanc);
  --_btn-bd: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fgm-space-2);
  padding: .8125rem 1.75rem;             /* 13px 28px — cible ≥ 44px */
  font-family: var(--fgm-font-text);
  font-size: .9375rem;
  font-weight: var(--fgm-poids-fort);
  line-height: 1.2;
  text-decoration: none;
  color: var(--_btn-fg);
  background: var(--_btn-bg);
  border: 2px solid var(--_btn-bd);
  border-radius: var(--fgm-radius-full);  /* pilule [QARIN] */
  cursor: pointer;
  transition:
    background-color var(--fgm-dur-base) var(--fgm-ease-standard),
    border-color var(--fgm-dur-base) var(--fgm-ease-standard),
    color var(--fgm-dur-base) var(--fgm-ease-standard),
    transform var(--fgm-dur-base) var(--fgm-ease-ressort),
    box-shadow var(--fgm-dur-base) var(--fgm-ease-standard);
}

.fgm-btn:hover {
  background: var(--_btn-bg-hover);
  color: var(--_btn-fg-hover);
  transform: translateY(-2px);
  box-shadow: var(--fgm-ombre-md);
}
.fgm-btn:active { transform: translateY(0) scale(.98); box-shadow: var(--fgm-ombre-sm); }

.fgm-btn--accent  { --_btn-bg: var(--fgm-rouge); --_btn-bg-hover: var(--fgm-encre); }
.fgm-btn--contour {
  --_btn-bg: transparent;
  --_btn-fg: var(--fgm-encre);
  --_btn-bd: var(--fgm-encre);
  --_btn-bg-hover: var(--fgm-encre);
  --_btn-fg-hover: var(--fgm-blanc);
}
.fgm-btn--fantome {
  --_btn-bg: transparent;
  --_btn-fg: var(--fgm-encre);
  --_btn-bg-hover: var(--fgm-surface-soft);
  --_btn-fg-hover: var(--fgm-encre);
  box-shadow: none;
}
.fgm-btn--danger { --_btn-bg: var(--fgm-danger); --_btn-bg-hover: var(--fgm-rouge-fonce); }

.fgm-btn--sm { padding: .5rem 1.125rem; font-size: .875rem; }
.fgm-btn--lg { padding: 1rem 2.25rem; font-size: 1rem; }

.fgm-btn:disabled, .fgm-btn[aria-disabled="true"] {
  --_btn-bg: var(--fgm-gray-200);
  --_btn-fg: var(--fgm-gray-500);
  --_btn-bg-hover: var(--fgm-gray-200);
  --_btn-fg-hover: var(--fgm-gray-500);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.fgm-btn--charge { position: relative; color: transparent !important; pointer-events: none; }
.fgm-btn--charge::after {
  content: "";
  position: absolute;
  width: 1.125rem; height: 1.125rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--_btn-fg-hover);
  animation: fgm-tourne .7s linear infinite;
}
@keyframes fgm-tourne { to { transform: rotate(360deg); } }

/* Sur fond sombre */
.fgm-section--dark .fgm-btn, .fgm-theme-dark .fgm-btn {
  --_btn-bg: var(--fgm-blanc);
  --_btn-fg: var(--fgm-encre);
  --_btn-bg-hover: var(--fgm-rouge);
  --_btn-fg-hover: var(--fgm-blanc);
}
.fgm-section--dark .fgm-btn--contour, .fgm-theme-dark .fgm-btn--contour {
  --_btn-bg: transparent;
  --_btn-fg: var(--fgm-blanc);
  --_btn-bd: var(--fgm-blanc);
  --_btn-bg-hover: var(--fgm-blanc);
  --_btn-fg-hover: var(--fgm-encre);
}
.fgm-section--dark .fgm-btn--accent, .fgm-theme-dark .fgm-btn--accent {
  --_btn-bg: var(--fgm-rouge);
  --_btn-fg: var(--fgm-blanc);
  --_btn-bg-hover: var(--fgm-rouge-fonce);
  --_btn-fg-hover: var(--fgm-blanc);
}
.fgm-section--dark .fgm-btn--fantome, .fgm-theme-dark .fgm-btn--fantome {
  --_btn-bg: transparent;
  --_btn-fg: var(--fgm-blanc);
  --_btn-bg-hover: var(--fgm-surface-soft);
  --_btn-fg-hover: var(--fgm-blanc);
}

/* --------------------------------------------------------------------------
   5. Liens — souligné animé, survol rouge [THEME : --clb-color-link-hover]
   -------------------------------------------------------------------------- */
.fgm-link {
  color: var(--fgm-lien);
  font-weight: var(--fgm-poids-moyen);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .2em;
  text-decoration-color: var(--fgm-bordure-forte);
  transition: color var(--fgm-dur-rapide) var(--fgm-ease-standard),
              text-decoration-color var(--fgm-dur-rapide) var(--fgm-ease-standard);
}
.fgm-link:hover { color: var(--fgm-lien-survol); text-decoration-color: currentColor; }

.fgm-link--fleche {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--fgm-space-2);
}
.fgm-link--fleche .fgm-icone {
  transition: transform var(--fgm-dur-base) var(--fgm-ease-ressort);
}
.fgm-link--fleche:hover .fgm-icone { transform: translateX(4px); }

.fgm-section--dark .fgm-link, .fgm-theme-dark .fgm-link {
  color: var(--fgm-blanc);
  text-decoration-color: var(--fgm-bordure-forte);
}

/* --------------------------------------------------------------------------
   6. Badges et étiquettes
   -------------------------------------------------------------------------- */
.fgm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fgm-space-1);
  padding: .3rem .75rem;
  font-size: var(--fgm-text-xs);
  font-weight: var(--fgm-poids-fort);
  letter-spacing: .02em;
  border-radius: var(--fgm-radius-full);
  background: var(--fgm-surface-soft);
  color: var(--fgm-gray-700);
  border: 1px solid var(--fgm-bordure);
}
.fgm-badge--accent  { background: var(--fgm-rouge-teinte); color: var(--fgm-rouge-fonce); border-color: transparent; }
.fgm-badge--succes  { background: var(--fgm-succes-teinte); color: var(--fgm-succes-texte); border-color: transparent; }
.fgm-badge--alerte  { background: var(--fgm-alerte-teinte); color: var(--fgm-alerte-texte); border-color: transparent; }
.fgm-badge--danger  { background: var(--fgm-danger-teinte); color: var(--fgm-danger-texte); border-color: transparent; }
.fgm-badge--info    { background: var(--fgm-info-teinte); color: var(--fgm-info-texte); border-color: transparent; }

.fgm-tag {
  display: inline-flex;
  padding: .25rem .75rem;
  font-size: var(--fgm-text-xs);
  color: var(--fgm-texte-second);
  border: 1px solid var(--fgm-bordure);
  border-radius: var(--fgm-radius-full);
  text-decoration: none;
  transition: color var(--fgm-dur-rapide) var(--fgm-ease-standard),
              border-color var(--fgm-dur-rapide) var(--fgm-ease-standard),
              background var(--fgm-dur-rapide) var(--fgm-ease-standard);
}
.fgm-tag:hover { color: var(--fgm-rouge-fonce); border-color: var(--fgm-rouge); background: var(--fgm-rouge-teinte); }

/* --------------------------------------------------------------------------
   7. Cartes — rayon 16/24 [QARIN], liseré + élévation légère au survol
   -------------------------------------------------------------------------- */
.fgm-card {
  display: flex;
  flex-direction: column;
  background: var(--fgm-surface);
  border: 1px solid var(--fgm-bordure);
  border-radius: var(--fgm-radius-md);
  padding: var(--fgm-space-7);
  transition:
    transform var(--fgm-dur-base) var(--fgm-ease-ressort),
    box-shadow var(--fgm-dur-base) var(--fgm-ease-standard),
    border-color var(--fgm-dur-base) var(--fgm-ease-standard);
}

.fgm-card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--fgm-ombre-md);
  border-color: var(--fgm-bordure-forte);
}

.fgm-card__media {
  margin: calc(var(--fgm-space-7) * -1) calc(var(--fgm-space-7) * -1) var(--fgm-space-6);
  border-radius: var(--fgm-radius-md) var(--fgm-radius-md) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--fgm-surface-soft);
}
.fgm-card__media img { width: 100%; height: 100%; object-fit: cover; }

.fgm-card__titre {
  font-family: var(--fgm-font-display);
  font-size: var(--fgm-text-lg);
  font-weight: var(--fgm-poids-titre);
  line-height: var(--fgm-leading-titre);
  margin: 0 0 var(--fgm-space-3);
}

.fgm-card__texte {
  font-size: var(--fgm-text-sm);
  color: var(--fgm-texte-second);
  margin: 0 0 var(--fgm-space-5);
  flex-grow: 1;
}

.fgm-card__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fgm-space-3);
  margin-top: auto;
}

/* Carte valeur — pastille monogramme (le F géométrique du logo sert de motif) */
.fgm-card--valeur .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);
}

/* Carte statistique */
.fgm-card--stat { align-items: flex-start; border-radius: var(--fgm-radius-lg); }
.fgm-card--stat .fgm-card__chiffre {
  font-family: var(--fgm-font-display);
  font-size: var(--fgm-text-4xl);
  font-weight: var(--fgm-poids-titre-fort);
  letter-spacing: var(--fgm-tracking-large);
  line-height: 1;
  color: var(--fgm-encre);
}
.fgm-card--stat .fgm-card__chiffre sup { font-size: .5em; color: var(--fgm-rouge-fonce); }

.fgm-section--dark .fgm-card, .fgm-theme-dark .fgm-card {
  background: var(--fgm-surface-alt);
  border-color: var(--fgm-bordure);
}

/* --------------------------------------------------------------------------
   8. Formulaires
   -------------------------------------------------------------------------- */
.fgm-champ { display: flex; flex-direction: column; gap: var(--fgm-space-2); margin-bottom: var(--fgm-space-5); }

.fgm-label {
  font-size: var(--fgm-text-sm);
  font-weight: var(--fgm-poids-fort);
  color: var(--fgm-texte);
}
.fgm-label .fgm-requis { color: var(--fgm-rouge-fonce); }

.fgm-input, .fgm-select, .fgm-textarea {
  width: 100%;
  font-family: var(--fgm-font-text);
  font-size: 1rem;
  color: var(--fgm-texte);
  background: var(--fgm-surface);
  border: 1.5px solid var(--fgm-bordure-forte);
  border-radius: var(--fgm-radius-sm);
  padding: .75rem 1rem;
  transition: border-color var(--fgm-dur-rapide) var(--fgm-ease-standard),
              box-shadow var(--fgm-dur-rapide) var(--fgm-ease-standard);
}
.fgm-textarea { min-height: 8rem; resize: vertical; }

.fgm-input::placeholder, .fgm-textarea::placeholder { color: var(--fgm-gray-400); }

.fgm-input:hover, .fgm-select:hover, .fgm-textarea:hover { border-color: var(--fgm-gray-400); }

.fgm-input:focus-visible, .fgm-select:focus-visible, .fgm-textarea:focus-visible {
  outline: none;
  border-color: var(--fgm-encre);
  box-shadow: 0 0 0 3px var(--fgm-selection);
}

.fgm-champ--erreur .fgm-input, .fgm-champ--erreur .fgm-textarea, .fgm-champ--erreur .fgm-select {
  border-color: var(--fgm-danger);
}
.fgm-champ--erreur .fgm-input:focus-visible, .fgm-champ--erreur .fgm-textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(217, 10, 44, .15);
}

.fgm-aide { font-size: var(--fgm-text-xs); color: var(--fgm-texte-tertiaire); margin: 0; }
.fgm-erreur-texte {
  display: flex; align-items: center; gap: var(--fgm-space-1);
  font-size: var(--fgm-text-xs);
  font-weight: var(--fgm-poids-moyen);
  color: var(--fgm-danger-texte);
  margin: 0;
}

.fgm-checkbox, .fgm-radio {
  display: flex; align-items: flex-start; gap: var(--fgm-space-3);
  font-size: var(--fgm-text-sm);
  color: var(--fgm-texte);
  cursor: pointer;
}
.fgm-checkbox input, .fgm-radio input {
  appearance: none;
  flex: none;
  width: 1.25rem; height: 1.25rem;
  margin: 2px 0 0;
  border: 1.5px solid var(--fgm-bordure-forte);
  background: var(--fgm-surface);
  cursor: pointer;
  transition: background var(--fgm-dur-rapide) var(--fgm-ease-standard),
              border-color var(--fgm-dur-rapide) var(--fgm-ease-standard);
}
.fgm-checkbox input { border-radius: var(--fgm-radius-xs); }
.fgm-radio input { border-radius: 50%; }

.fgm-checkbox input:checked, .fgm-radio input:checked {
  background: var(--fgm-encre);
  border-color: var(--fgm-encre);
}
.fgm-checkbox input:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100%;
}
.fgm-radio input:checked { box-shadow: inset 0 0 0 4px var(--fgm-surface); background: var(--fgm-encre); }

/* --------------------------------------------------------------------------
   9. Alertes
   -------------------------------------------------------------------------- */
.fgm-alerte {
  display: flex;
  gap: var(--fgm-space-3);
  align-items: flex-start;
  padding: var(--fgm-space-4) var(--fgm-space-5);
  border-radius: var(--fgm-radius-sm);
  border: 1px solid transparent;
  font-size: var(--fgm-text-sm);
  margin-bottom: var(--fgm-space-5);
}
.fgm-alerte .fgm-icone, .fgm-alerte svg.fgm-icone { flex: none; margin-top: 1px; }

.fgm-alerte--info    { background: var(--fgm-info-teinte);    color: var(--fgm-info-texte);    border-color: color-mix(in srgb, var(--fgm-info) 25%, transparent); }
.fgm-alerte--succes  { background: var(--fgm-succes-teinte);  color: var(--fgm-succes-texte);  border-color: color-mix(in srgb, var(--fgm-succes) 25%, transparent); }
.fgm-alerte--alerte  { background: var(--fgm-alerte-teinte);  color: var(--fgm-alerte-texte);  border-color: color-mix(in srgb, var(--fgm-alerte) 25%, transparent); }
.fgm-alerte--danger  { background: var(--fgm-danger-teinte);  color: var(--fgm-danger-texte);  border-color: color-mix(in srgb, var(--fgm-danger) 25%, transparent); }

/* --------------------------------------------------------------------------
   10. Tableaux
   -------------------------------------------------------------------------- */
.fgm-table-wrap { overflow-x: auto; border: 1px solid var(--fgm-bordure); border-radius: var(--fgm-radius-md); }
.fgm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fgm-text-sm);
  min-width: 40rem;
}
.fgm-table caption { text-align: left; padding: var(--fgm-space-4) var(--fgm-space-5); font-size: var(--fgm-text-xs); color: var(--fgm-texte-tertiaire); }
.fgm-table th, .fgm-table td { text-align: left; padding: var(--fgm-space-3) var(--fgm-space-5); border-bottom: 1px solid var(--fgm-bordure); }
.fgm-table thead th {
  font-family: var(--fgm-font-text);
  font-size: var(--fgm-text-xs);
  font-weight: var(--fgm-poids-fort);
  letter-spacing: var(--fgm-tracking-largeur);
  text-transform: uppercase;
  color: var(--fgm-texte-second);
  background: var(--fgm-surface-alt);
}
.fgm-table tbody tr:last-child td { border-bottom: 0; }
.fgm-table tbody tr { transition: background var(--fgm-dur-rapide) var(--fgm-ease-standard); }
.fgm-table tbody tr:hover { background: var(--fgm-surface-alt); }

/* --------------------------------------------------------------------------
   11. Pagination et fil d'Ariane
   -------------------------------------------------------------------------- */
.fgm-pagination { display: flex; gap: var(--fgm-space-2); list-style: none; margin: 0; padding: 0; }
.fgm-pagination a, .fgm-pagination span {
  min-width: 2.75rem; min-height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--fgm-radius-full);
  font-weight: var(--fgm-poids-fort);
  font-size: var(--fgm-text-sm);
  text-decoration: none;
  color: var(--fgm-texte);
  border: 1.5px solid var(--fgm-bordure);
  transition:
    color var(--fgm-dur-rapide) var(--fgm-ease-standard),
    background-color var(--fgm-dur-rapide) var(--fgm-ease-standard),
    border-color var(--fgm-dur-rapide) var(--fgm-ease-standard);
}
.fgm-pagination a:hover { border-color: var(--fgm-encre); }
.fgm-pagination [aria-current="page"] {
  background: var(--fgm-encre);
  border-color: var(--fgm-encre);
  color: var(--fgm-blanc);
}

.fgm-fil { display: flex; flex-wrap: wrap; gap: var(--fgm-space-2); font-size: var(--fgm-text-xs); color: var(--fgm-texte-tertiaire); list-style: none; margin: 0; padding: 0; }
.fgm-fil li { display: flex; align-items: center; gap: var(--fgm-space-2); }
.fgm-fil a { color: var(--fgm-texte-second); text-decoration: none; }
.fgm-fil a:hover { color: var(--fgm-rouge-fonce); text-decoration: underline; }
.fgm-fil [aria-current="page"] { color: var(--fgm-texte-tertiaire); }

/* --------------------------------------------------------------------------
   12. En-tête et navigation (patron ; l'implémentation finale est en PHP)
   -------------------------------------------------------------------------- */
.fgm-header {
  position: sticky;
  top: 0;
  z-index: var(--fgm-z-header);
  background: color-mix(in srgb, var(--fgm-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--fgm-bordure);
}
.fgm-header__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fgm-space-6);
  min-height: 4.5rem;
}
.fgm-header__logo img { height: 2.5rem; width: auto; }
.fgm-header__logo--icone { height: 2.5rem; width: 2.5rem; }

.fgm-nav ul { display: flex; gap: var(--fgm-space-6); list-style: none; margin: 0; padding: 0; }
.fgm-nav a {
  position: relative;
  font-size: var(--fgm-text-sm);
  font-weight: var(--fgm-poids-moyen);
  color: var(--fgm-texte);
  text-decoration: none;
  padding-block: var(--fgm-space-2);
}
.fgm-nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--fgm-rouge);
  border-radius: var(--fgm-radius-full);
  transform: scaleX(0);
  transform-origin: right center;      /* sortie vers la droite */
  transition: transform var(--fgm-dur-base) var(--fgm-ease-standard);
}
.fgm-nav a:hover::after,
.fgm-nav a:focus-visible::after,
.fgm-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;       /* entrée depuis la gauche */
}
.fgm-nav a[aria-current="page"] { font-weight: var(--fgm-poids-fort); }

.fgm-header__actions { display: flex; align-items: center; gap: var(--fgm-space-3); }

.fgm-menu-btn {
  display: none;
  width: 2.75rem; height: 2.75rem;
  border: 1.5px solid var(--fgm-bordure-forte);
  border-radius: var(--fgm-radius-sm);
  background: var(--fgm-surface);
  cursor: pointer;
  place-items: center;
}
@media (max-width: 1023px) {
  .fgm-menu-btn { display: grid; }
  .fgm-nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--fgm-bg);
    border-bottom: 1px solid var(--fgm-bordure);
    box-shadow: var(--fgm-ombre-lg);
    padding: var(--fgm-space-5) var(--fgm-space-4) var(--fgm-space-6);
  }
  .fgm-nav[data-ouvert="true"] { display: block; }
  .fgm-nav ul { flex-direction: column; gap: var(--fgm-space-2); }
  .fgm-nav a { display: block; padding: var(--fgm-space-3) var(--fgm-space-2); font-size: var(--fgm-text-base); }
}

/* --------------------------------------------------------------------------
   13. Pied de page (section sombre, logo blanc + icône officielle)
   -------------------------------------------------------------------------- */
.fgm-footer {
  background: var(--fgm-encre);
  color: var(--fgm-texte-inverse-second);
  padding-block: var(--fgm-section-y-s) var(--fgm-space-7);
  font-size: var(--fgm-text-sm);
}
.fgm-footer a { color: var(--fgm-texte-inverse-second); text-decoration: none; }
.fgm-footer a:hover { color: var(--fgm-blanc); text-decoration: underline; }
.fgm-footer__titre {
  font-family: var(--fgm-font-display);
  font-size: var(--fgm-text-sm);
  font-weight: var(--fgm-poids-fort);
  letter-spacing: var(--fgm-tracking-largeur);
  text-transform: uppercase;
  color: var(--fgm-blanc);
  margin: 0 0 var(--fgm-space-4);
}
.fgm-footer__bas {
  margin-top: var(--fgm-space-8);
  padding-top: var(--fgm-space-5);
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--fgm-space-4);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fgm-text-xs);
}
.fgm-footer img { height: 2.25rem; width: auto; }

/* --------------------------------------------------------------------------
   14. Icônes — sprite SVG inline, 24px, trait 1.8, embouts ronds
   -------------------------------------------------------------------------- */
svg.fgm-icone {
  width: 1.25rem; height: 1.25rem;   /* 20px par défaut — spécificité svg.* > reset .fgm-root svg */
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
svg.fgm-icone--sm { width: 1rem; height: 1rem; }
svg.fgm-icone--lg { width: 1.5rem; height: 1.5rem; }
svg.fgm-icone--xl { width: 2rem; height: 2rem; }

/* --------------------------------------------------------------------------
   15. Apparitions au scroll — TRANSFÉRÉ (PROMPT 06)
   Le système de motion est centralisé dans assets/css/animations.css :
   révélations (3 variantes), échelonnement déclaratif, transitions de
   navigation, signature mot à mot, filets de sécurité.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   16. Utilitaires ponctuels (usage limité — privilégier les tokens)
   -------------------------------------------------------------------------- */
.fgm-texte-second { color: var(--fgm-texte-second); }
.fgm-texte-accent { color: var(--fgm-rouge-fonce); }
.fgm-bg-alt { background: var(--fgm-surface-alt); }
.fgm-radius-lg-el { border-radius: var(--fgm-radius-lg); }
.fgm-ombre-md-el { box-shadow: var(--fgm-ombre-md); }
.fgm-mt-0 { margin-top: 0; }
.fgm-mb-0 { margin-bottom: 0; }
.fgm-max-texte { max-width: 62ch; }
.fgm-centre { text-align: center; }

/* --------------------------------------------------------------------------
   17. Sous-composants de cartes et listes — déplacés de home.css (PROMPT 07)
   Réutilisés par les gabarits de pages services : fiches projet, étapes,
   atouts. Règles identiques à l'origine (aucune régression accueil).
   -------------------------------------------------------------------------- */
.fgm-card__note {
  display: block;
  font-family: var(--fgm-font-text);
  font-size: var(--fgm-text-sm);
  font-weight: var(--fgm-poids-texte);
  color: var(--fgm-texte-second);
  margin-top: var(--fgm-space-1);
}

.fgm-card__tags {
  list-style: none;
  margin: 0 0 var(--fgm-space-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--fgm-space-2);
}

.fgm-etape__numero {
  font-family: var(--fgm-font-display);
  font-size: var(--fgm-text-3xl);
  font-weight: var(--fgm-poids-titre-fort);
  letter-spacing: var(--fgm-tracking-large);
  color: var(--fgm-rouge-fonce);
  margin: 0 0 var(--fgm-space-4);
}

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

.fgm-atout .fgm-icone {
  color: var(--fgm-succes-texte);
  margin-top: .2em;
}