/* ════════════════════════════════════════════════════════════════════════
   PIED DE PAGE — plan du site en trois colonnes (Fonctions, Métiers, Info),
   chargé par TOUTES les pages, après leurs propres styles.

   Ces liens servent au référencement : chaque page fonction et chaque page
   métier en reçoit un depuis tout le site (une seule venait de l'accueil
   avant). Ils étaient sur une seule ligne qui se coupait n'importe où ; ils
   sont rangés en colonnes, sans rien retirer.

   ⚠ LOGO : `width:auto` est indispensable. Le <img> déclare ses dimensions
     réelles (248 × 60) pour éviter un saut de mise en page au chargement ;
     sans `width:auto`, le navigateur garde 248 px de large pour 26 px de
     haut et le logo est écrasé.
   ════════════════════════════════════════════════════════════════════════ */

footer.pied{display:flex;justify-content:space-between;align-items:flex-start;gap:32px 56px;flex-wrap:wrap}
footer.pied img{height:26px;width:auto;display:block}
footer.pied .cr{margin-top:14px}

.pied-plan{display:grid;grid-template-columns:repeat(3,auto);gap:24px 56px;font-family:var(--mono);font-size:12px;line-height:1.4}
.pied-col{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.pied-t{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#07655C;margin-bottom:2px}
.pied-col a{color:var(--t-2);text-decoration:none}
.pied-col a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* Accueil : le pied de page est posé sur la section foncée du contact. */
.sec.ink footer.pied .pied-t{color:var(--cyan)}
.sec.ink footer.pied .pied-col a{color:var(--mono-ink)}
.sec.ink footer.pied .pied-col a:hover{color:#fff}

@media (max-width:860px){
  footer.pied{flex-direction:column;gap:26px}
  .pied-plan{grid-template-columns:1fr 1fr;gap:22px 28px;width:100%}
  /*  Au doigt : des cibles plus hautes, sans changer l'apparence. */
  .pied-col{gap:2px}
  .pied-col a{padding:6px 0}
}