/* ══════════════════════════════════════════════════════════════════
   GROOMLY — le pied de page, un seul pour tout le site

   Avant : deux pieds. Celui des pages legales (.g-pied, clair, quatre
   blocs, une colonne « Mon compte ») et celui des pages vitrine
   (.pied, sombre, trois colonnes, pas de « Mon compte »). Deux pieds,
   c'est deux endroits ou ajouter un lien, et un seul des deux qu'on
   pense a mettre a jour. C'est le clair qui est retenu.

   Ce fichier ne depend NI de vitrine.css NI de groomly.css : les deux
   jeux de variables n'ont pas les memes noms ni les memes valeurs
   (--fond vaut #fbfbfd d'un cote, #fafafa de l'autre ; --blanc et
   --max n'existent pas dans groomly.css). Chaque couleur est donc lue
   avec une valeur de repli, pour que le pied s'affiche pareil quelle
   que soit la feuille chargee avant lui.

   Attention en le modifiant : une variable CSS ne peut pas se citer
   elle-meme. « --pd-encre: var(--pd-encre, …) » est un cycle invalide
   et la declaration entiere est jetee, sans erreur visible. D'ou les
   noms prefixes --pd-*, distincts de ceux du site.
   ══════════════════════════════════════════════════════════════════ */

.pd {
  --pd-encre:      var(--encre, #18181b);
  --pd-gris:       var(--gris, #6b6b74);
  --pd-gris-clair: var(--gris-clair, #a1a1aa);
  --pd-trait:      var(--trait, #e4e4e7);
  --pd-surface:    var(--surface, #ffffff);
  --pd-rose-fonce: var(--rose-fonce, #e11d48);
  --pd-max:        var(--max, 1180px);

  border-top: 1px solid var(--pd-trait);
  background: var(--pd-surface);
  padding: 56px 20px 30px;
  font-size: .875rem;
  color: var(--pd-gris);
}
@media (min-width: 900px) { .pd { padding: 72px 24px 34px; } }

.pd-env { width: 100%; max-width: var(--pd-max); margin: 0 auto; }

.pd-grille { display: grid; grid-template-columns: 1fr; gap: 34px; }
.pd-grille > * { min-width: 0; }
@media (min-width: 640px) { .pd-grille { grid-template-columns: 1fr 1fr; gap: 34px 28px; } }
@media (min-width: 980px) { .pd-grille { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; } }

/* ── La marque ───────────────────────────────────────────────── */
.pd-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.25rem; letter-spacing: -.03em;
  color: var(--pd-encre); text-decoration: none;
}
.pd-logo:hover { text-decoration: none; }
.pd-logo img { width: 28px; height: 28px; border-radius: 8px; }
.pd-marque p { max-width: 32ch; margin: 14px 0 0; line-height: 1.6; }

/* ── Les colonnes ────────────────────────────────────────────── */
.pd-colonne h3 {
  font-size: .75rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--pd-encre); margin: 0 0 14px;
}
.pd-colonne ul { list-style: none; margin: 0; padding: 0; }
.pd-colonne li + li { margin-top: 10px; }
.pd-colonne a { color: var(--pd-gris); font-weight: 500; text-decoration: none; }
.pd-colonne a:hover { color: var(--pd-encre); text-decoration: underline; text-underline-offset: 3px; }
.pd-colonne a:focus-visible { outline: 2px solid var(--pd-rose-fonce); outline-offset: 3px; border-radius: 4px; }

/* ── Le bandeau du bas ───────────────────────────────────────── */
.pd-bas {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--pd-trait);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 24px; font-size: .8125rem;
}
.pd-bas p { margin: 0; }
.pd-bas strong { color: var(--pd-encre); font-weight: 600; }
.pd-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--pd-gris-clair); }