/* ══════════════════════════════════════════════════════════════════════
   LE FOOTER DOAKEN — UN SEUL, PARTOUT.
   ══════════════════════════════════════════════════════════════════════
   🔴 POURQUOI CE FICHIER EXISTE. Rodolphe, 13-08 : « pourquoi dans le
   footer, c'est jamais les mêmes footers que sur la page d'accueil ? Je
   veux retrouver le même footer partout. La page d'accueil est la
   référence. »
   Mesuré : le site portait DEUX pieds de page — .footer sur l'accueil et
   les pages produit, .footer-doaken sur les 74 articles du blog, avec un
   logo SVG en minuscules au lieu du logo en Mokoto.
   Les règles du footer de référence vivaient dans doaken-nav-footer.css,
   que le blog ne charge pas — et charger toute cette feuille aurait
   touché aussi la barre de navigation. Elles sont donc ISOLÉES ici, pour
   pouvoir être servies partout sans effet de bord.
   ══════════════════════════════════════════════════════════════════════ */


/* 🔴 LA POLICE DU LOGO VOYAGE AVEC LE FOOTER. Sans cette déclaration, le
   « DOAKEN » du pied de page retombe EN SILENCE sur la police du système —
   rien ne casse, rien n'alerte, et le défaut passe (charte : le logo s'écrit
   en Mokoto, partout, sans exception). */
@font-face {
  font-family: 'Mokoto';
  src: url('/mokoto.regular.woff2') format('woff2'),
       url('/mokoto.regular.ttf') format('truetype');
  font-display: swap;
}
/* ============ FOOTER ============ */
.footer {
  background: #000B1F;
  color: rgba(255,255,255,0.7);
  padding: 64px 64px 0;
  position: relative;
  overflow: hidden;
}
.footer-inner { max-width: 1440px; margin: 0 auto; position: relative; z-index: 2; }
.footer-wordmark {
  position: absolute;
  bottom: -36px; left: 50%; transform: translateX(-50%);
  font-family: 'Sentient', 'Geist', serif;
  font-size: clamp(140px, 22vw, 280px);
  font-weight: 500;
  color: rgba(255,255,255,0.04);
  letter-spacing: -0.04em;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
  text-transform: lowercase;
}
.footer-grid { display: grid; grid-template-columns: 280px 1fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
.footer-brand .ftr-logo { display: inline-flex; align-items: center; font-family: 'Mokoto', 'Geist', sans-serif !important; font-size: 28px; font-weight: normal; color: white; margin-bottom: 16px; letter-spacing: 0.1em; text-transform: uppercase; }
.footer-brand p { font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.55); max-width: 240px; }
.ftr-col h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin-bottom: 18px; }
.ftr-col ul { list-style: none; padding: 0; margin: 0; }
.ftr-col li { margin-bottom: 10px; }
.ftr-col a { font-size: 14px; color: rgba(255,255,255,0.75); text-decoration: none; }
.ftr-col a:hover { color: white; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; padding-bottom: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 13px; color: rgba(255,255,255,0.4); }
.footer-bottom-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom-links a { color: rgba(255,255,255,0.55); text-decoration: none; }
.footer-bottom-links a:hover { color: white; }
.footer-social { display: flex; gap: 14px; }
.footer-social a { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); font-size: 14px; transition: background .2s ease, color .2s ease; }
.footer-social a:hover { background: rgba(255,255,255,0.15); color: white; }

@media (max-width: 1080px) {
  .footer { padding: 48px 24px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-wordmark { font-size: clamp(80px, 30vw, 140px); bottom: -20px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ── UNE SEULE BARRE ────────────────────────────────────────────────
   Le fil d'Ariane s'affichait juste sous le header, sur toute la largeur :
   à l'écran, ça faisait DEUX barres empilées. Il reste dans le code en
   données structurées (BreadcrumbList), donc Google l'utilise toujours pour
   afficher le chemin dans ses résultats — mais il ne double plus le menu.
   ────────────────────────────────────────────────────────────────── */
.doaken-breadcrumb,
.breadcrumb-doaken,
.dk-breadcrumb,
.dkv2-breadcrumb,
nav[aria-label*="Ariane"],
nav[aria-label*="readcrumb"],
[class*="breadcrumb"],
.breadcrumb { display: none !important; }
/* 02-08 — une QUATRIÈME orthographe (`dkv2-breadcrumb`) échappait à la règle et
   refaisait le double menu sur les 5 pages légales. Le sélecteur générique
   [class*="breadcrumb"] ferme définitivement la porte aux orthographes futures. */