/* -----------------------------------------------------------------------------
   Pied de page — feuille autonome
   -----------------------------------------------------------------------------

   Le pied vit dans un widget, donc sur toutes les pages du site. Charger pour
   lui la feuille publique entière — plus de quatre-vingts kilo-octets, qui
   bloquent le rendu — revenait à faire payer à chaque page le prix du
   répertoire tout entier, pour cinq kilo-octets de règles réellement utilisées.

   Cette feuille ne contient que ce dont le pied a besoin : ses règles et les
   variables de couleur dont elles dépendent. La feuille complète reste chargée
   sur les pages qui portent un autre bloc du module.

   ATTENTION : ces règles sont recopiées de public.css. Modifier le pied demande
   de toucher aux deux fichiers — c'est le prix de la séparation, et il est
   moindre que celui d'une feuille de 84 Ko sur chaque page.
   -------------------------------------------------------------------------- */

/*
 * Les variables dont le pied a besoin, et rien de plus.
 *
 * Sur :root, jamais sur .lc-public : le pied vit hors de ce conteneur — c'est
 * un « footer » posé dans un widget, souvent tout en bas du thème — et une
 * variable déclarée sur .lc-public ne l'atteint pas. Ses règles lisaient alors
 * var(--lc-accent) sans rien trouver, et les déclarations concernées étaient
 * simplement abandonnées.
 *
 * Les trois seules qui servent ici. Recopier la palette entière de public.css
 * donnerait deux listes à tenir à jour, et celle qu'on oublie est toujours la
 * bonne.
 *
 * Pour changer l'accent du pied depuis le thème :
 *   :root { --lc-accent: #C0392B; --lc-accent-sombre: #96291C; }
 */
:root {
  --lc-police: "Epilogue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lc-accent: #088EA0;
  --lc-accent-sombre: #067484;
}

/* =============================================================================
   Pied de page du répertoire
   =============================================================================
   Fond sombre, titres blancs, liens gris clair, accents turquoise. Le bloc ne
   dépend d'aucune variable du thème : posé dans un pied Salient, un widget ou
   une page ordinaire, il se lit de la même façon.
   ========================================================================== */

.lc-pied {
  margin: 34px 0 0;
  padding: 46px 40px 0;
  border-radius: 10px;
  background: #10202C;
  color: #C9D3DC;
  line-height: 1.55;
}

.lc-pied, .lc-pied * { font-family: var(--lc-police) !important; }

.lc-pied *, .lc-pied *::before, .lc-pied *::after { box-sizing: border-box; }

/*
 * Les colonnes s'ajustent à leur nombre.
 *
 * Un gabarit fixe convenait aux quatre listes prévues ; un menu peut en
 * compter trois ou sept, et les surnuméraires passaient à la ligne en laissant
 * de grands vides. « align-items: start » empêche une colonne courte de
 * s'étirer sur la hauteur de la plus longue, ce qui décollerait son titre.
 */
.lc-pied__haut {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  align-items: start;
  gap: 40px;
  padding-bottom: 38px;
}

/*
 * Titres en blanc, sans capitales forcées : l'œil reconnaît la silhouette d'un
 * mot, et « SECTEURS POPULAIRES » n'en a plus. Le blanc et la graisse suffisent
 * à les distinguer des liens.
 */
.lc-pied .lc-pied__titre {
  margin: 0 0 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  /*
   * Un cran au-dessus des liens de la colonne, qui sont à 16 px.
   *
   * « !important » n'est pas un caprice : Salient dimensionne les h3 par
   * « .container-wrap h3 », plus spécifique que ce sélecteur. Sans lui, le
   * titre repartait à la taille du thème — 23 px — quelle que soit la valeur
   * posée ici.
   */
  font-size: 18px !important;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/*
 * Le lien et le simple texte se règlent ensemble.
 *
 * « .lc-pied__titre-texte » habille les deux : une taille posée là s'applique
 * aussi bien à « Secteurs populaires », qui est un lien, qu'à « Navigation »,
 * qui n'en est pas un.
 */
.lc-pied .lc-pied__titre-texte {
  color: #fff;
  font-family: inherit;
  font-size: inherit !important;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: none;
}

.lc-pied a.lc-pied__titre-texte:hover { color: #7FD3DE; text-decoration: none; }

.lc-pied .lc-pied__intro {
  margin: 0 0 24px;
  color: #C9D3DC;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
}

.lc-pied .lc-pied__coord {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  color: #C9D3DC;
  font-size: 16px;
  font-weight: 300;
  text-decoration: none;
}

.lc-pied .lc-pied__coord:hover { color: #7FD3DE; text-decoration: none; }

.lc-pied .lc-pied__coord svg { flex: none; margin-top: 2px; color: #7FD3DE; }

.lc-pied .lc-pied__coord span { display: block; }

.lc-pied .lc-pied__coord span span { color: inherit; }

.lc-pied__reseaux { display: flex; gap: 10px; margin-top: 24px; }

.lc-pied .lc-pied__reseau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: #C9D3DC;
  text-decoration: none;
}

.lc-pied .lc-pied__reseau:hover { border-color: #7FD3DE; color: #7FD3DE; text-decoration: none; }

.lc-pied .lc-pied__liste { margin: 0; padding: 0; list-style: none; }

.lc-pied .lc-pied__liste li { margin: 0; padding: 0; list-style: none; }

.lc-pied .lc-pied__liste li::marker { content: none; }

.lc-pied .lc-pied__liste a,
.lc-pied .lc-pied__liste span {
  display: block;
  padding: 9px 0;
  color: #C9D3DC;
  font-size: 16px;
  font-weight: 300;
  text-decoration: none;
}

.lc-pied .lc-pied__liste a:hover { color: #7FD3DE; text-decoration: none; }

/* Une liste très fournie se répartit sur deux colonnes plutôt que de tirer le
   pied de page sur toute la hauteur de l'écran. */
.lc-pied__liste--colonnes { column-width: 170px; column-gap: 28px; }

.lc-pied__bloc--large { grid-column: span 2; }

.lc-pied__atouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 28px;
  padding: 30px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.lc-pied__atout { display: flex; align-items: flex-start; gap: 14px; }

.lc-pied__ico { flex: none; color: #7FD3DE; line-height: 0; }

.lc-pied__atout-texte { display: flex; flex-direction: column; gap: 4px; }

.lc-pied .lc-pied__atout-texte strong {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.lc-pied .lc-pied__atout-texte span {
  color: #fff;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5;
}

.lc-pied__bas {
  padding: 22px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.lc-pied .lc-pied__droits {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 300;
}

/*
 * Petit écran : une seule colonne.
 *
 * Ce bloc avait perdu son « @media » — la parenthèse et l'accolade fermante
 * avaient disparu ensemble, si bien que le décompte des accolades restait
 * équilibré et que rien ne le signalait. Les surcharges mobiles s'appliquaient
 * donc à toutes les largeurs : le pied s'affichait en une colonne sur un écran
 * de deux mille pixels, et les régions en une seule file.
 */
@media (max-width: 700px) {
  .lc-pied { padding: 32px 20px 0; }
  .lc-pied__haut { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .lc-pied__bloc--large { grid-column: span 1; }
  .lc-pied__liste--colonnes { column-width: auto; column-count: 1; }
}