/* Le pied de page, partagé par l'accueil et les huit pages de vitrine.

   ⚠️ SON PROPRE FICHIER, COMME LE MENU. Le pied précédent était recopié
   textuellement dans neuf fichiers : neuf endroits à corriger le jour où une
   route change de nom, et huit occasions d'en oublier un.

   ⚠️ ET IL NE MÈNE QU'À DES PAGES OUVERTES. L'ancien pied proposait « Prix par
   commune » et « Où investir », que la page Prochainement annonce pour octobre
   2026 : un visiteur qui clique tombe sur un écran que le site lui-même dit
   inachevé. Avant d'ajouter un lien ici, vérifier qu'il ne porte pas la
   mention « Bientôt » dans MenuRecherche.tsx. */

.pied {
  background: #191B28;
  color: rgba(255, 255, 255, .72);
  /* Les deux familles viennent de vitrine-styles.css, qui les charge en
     @font-face ; le repli couvre l'accueil React, ou les memes variables
     sont posees par next/font. */
  font-family: var(--fm-gantari, 'Switzer'), system-ui, sans-serif;
  padding: clamp(56px, 7vw, 88px) 24px 30px;
}
.pied-coeur { max-width: 1288px; margin: 0 auto; }

/* Le bloc de marque tient sa colonne, le plan du site prend le reste.

   ⚠️ DEUX GRILLES, PAS UNE. Les quatre listes sont enfermées dans le `nav` du
   plan du site : une seule grille posée sur `.pied-haut` ne verrait que deux
   enfants — la marque et le `nav` — et les listes se rangeraient les unes sous
   les autres. Mesuré : pied de 972 px de haut, quatre rangées. */
.pied-haut {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 44px 56px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.pied-colonnes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 32px;
}

.pied-marque img {
  height: 32px; width: auto; display: block;
  /* Le mot-symbole est encre sombre : il passe en blanc sur le fond nuit. */
  filter: brightness(0) invert(1);
}
.pied-devise {
  margin: 18px 0 0;
  /* La police du site, pas l'italique serif (demande du 2026-09-23). */
  font-family: inherit;
  font-style: normal;
  font-size: 17px; font-weight: 500; line-height: 1.45; letter-spacing: -.01em;
  color: rgba(255, 255, 255, .62);
}

/* Le groupe Facebook est la seule sortie du site : il se voit, sans crier. */
.pied-groupe {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 16px; padding: 9px 15px;
  border: 1px solid rgba(127, 227, 176, .38);
  background: rgba(127, 227, 176, .08);
  border-radius: 999px;
  font-size: 13.5px; font-weight: 500;
  color: #A9F0CC !important; text-decoration: none !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.pied-groupe svg { width: 16px; height: 16px; flex: none; }
.pied-groupe:hover { background: rgba(127, 227, 176, .16); border-color: rgba(127, 227, 176, .6); color: #D7FBE9 !important; }

.pied-titre {
  display: block;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  /* ⚠️ .42 DONNAIT 4,05 SUR LE FOND NUIT, pour un seuil de 4,5 (mesuré au
     contrôle d'accessibilité du 2026-09-24). .52 donne 5,1 et le titre reste
     discret. */
  color: rgba(255, 255, 255, .52);
  margin-bottom: 15px;
}
.pied-colonne ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }

/*
  ⚠️ `!important` SUR L'ENCRE, ET C'EST MESURÉ. L'accueil repeint TOUS ses liens
  en encre sombre par `body:has(.huub-page) a:not([class*='btn'])
  :not([class*='bouton']):not(.acc-porte)` — spécificité 0,4,2, contre 0,2,1
  pour la règle d'ici. Relevé sur l'accueil avant correction : rgb(26,20,24) sur
  le fond nuit, c'est-à-dire vingt liens invisibles. Monter la spécificité à la
  main donnerait au mieux une égalité, tranchée par l'ordre de chargement — et
  la feuille du pied est posée par React sur cette page, pas par le paquet du
  site : l'ordre n'est pas le mien. Un bloc sombre autonome ne négocie pas son
  encre.

  ⚠️ ET PAS DE SOULIGNÉ AU SURVOL, comme dans le menu : c'est la même règle,
  posée une fois pour toute la vitrine. Le déplacement d'un pixel et
  l'éclaircissement suffisent à dire que le lien répond.
*/
.pied .pied-colonne a,
.pied .pied-bas a {
  color: rgba(255, 255, 255, .78) !important;
  text-decoration: none !important;
  font-size: 14.5px; line-height: 1.35;
  display: inline-block;
  transition: color .15s ease, transform .15s ease;
}
.pied .pied-colonne a:hover,
.pied .pied-bas a:hover { color: #FFFFFF !important; transform: translateX(2px); }
.pied a:focus-visible {
  outline: 2px solid #7FE3B0; outline-offset: 3px; border-radius: 5px;
}

.pied-bas {
  display: flex; flex-wrap: wrap;
  gap: 8px 32px; justify-content: space-between; align-items: baseline;
  padding-top: 22px;
  font-size: 13px; line-height: 1.5;
  /* 4,29 avant, sous le seuil : voir le commentaire de .pied-titre. */
  color: rgba(255, 255, 255, .54);
}
.pied-bas p { margin: 0; }
.pied-bas a { font-size: 13px; color: rgba(255, 255, 255, .62) !important; }
.pied-sep { padding: 0 7px; color: rgba(255, 255, 255, .26); }

/* Sous 1080 px la marque passe au-dessus du plan du site, qui garde ses
   quatre colonnes ; puis deux, puis une. */
@media (max-width: 1080px) {
  .pied-haut { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 720px) {
  .pied-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .pied-colonnes { grid-template-columns: 1fr; gap: 28px; }
  .pied-bas { flex-direction: column; }
}

/*
  ⚠️ L'ACCUEIL EST UNE COLONNE FLEX DONT CHAQUE SECTION PORTE SON `order`.
  `.flowmind-page` range ses enfants par une dizaine de règles d'ordre — le
  héros à 1, les fonctions à 3, les cartes à 5 — et l'ancien pied avait la
  sienne : `.flowmind-page > .fm-pied { order: 99 }`. En changeant de classe, le
  pied a perdu sa règle, est retombé à `order: 0` et s'est retrouvé AU MILIEU
  de la page, entre la home et le duel. Mesuré : y = 1584 px sur 10 299.

  Une classe qui change emporte tout ce qui la visait ailleurs. Ici, dans une
  feuille que le pied ne connaît pas.
*/
.flowmind-page > .pied { order: 99; }
/* Le bouton « Se connecter », au-dessus de la communauté (2026-09-22). */
.pied-connexion {
  margin-bottom: 0;
  border-color: rgba(255, 255, 255, .28);
  background: #FCF7F3;
  color: #1A1418 !important;
}
.pied-connexion:hover { background: #fff; border-color: #fff; color: #1A1418 !important; transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); }
.pied-groupe:hover { transform: translateY(-1px); }
.pied-groupe { transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease; }
.pied-groupe + .pied-groupe { margin-top: 10px; }
.pied-bas p a { color: inherit; text-decoration: none; }
.pied-bas p a:hover { text-decoration: underline; text-underline-offset: 2px; }