/* Pied de page commun — templates/_pied.html, chargé par base.html.
   Logo à gauche, annuaires et aide en colonnes (façon Oscaro) ; tout passe en une
   colonne sur téléphone. */
.pied { background: var(--fonce); color: #c9d6d0; margin-top: 56px; font-size: 14px; }
.pied-in { max-width: 1100px; margin: 0 auto; padding: 34px 20px 22px;
           display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: 28px; }
.pied-logo { display: inline-flex; align-items: center; gap: 8px; color: #fff;
             text-decoration: none; font-weight: 700; font-size: 17px; }
.pied-logo .logo-ma { opacity: .8; }
.pied-col { display: flex; flex-direction: column; gap: 8px; }
.pied-col h4 { margin: 0 0 4px; color: #fff; font-size: 14px; }
.pied-col a { color: #c9d6d0; text-decoration: none; }
.pied-col a:hover { color: #fff; text-decoration: underline; }
.pied-bas { max-width: 1100px; margin: 0 auto; padding: 14px 20px 22px;
            border-top: 1px solid rgba(255,255,255,.12); color: #7f948b; font-size: 12.5px; }

@media (max-width: 760px) {
  .pied-in { grid-template-columns: 1fr 1fr; }
  .pied-marque { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .pied-in { grid-template-columns: 1fr; }
}