/* Le pied de page du site, un seul pour toutes les pages : home, projets, contact, pages légales, 404, en français et en anglais (06/10).
   Theo, 06/10 : « la navbar et le footer du site sont des composants et donc ne changent pas d'une page à l'autre ». Jusque-là, chaque page gardait sa copie
   du pied et elles avaient divergé : badge Webflow sans lien sur contact et les pages légales, case du badge plus étroite qu'ailleurs, zones tactiles de 44 px
   absentes sur mobile hors home et projets. Le style est celui de la home (colonnes, retenu le 14/09) ; le HTML est recopié depuis la home par outils/i18n/generer.mjs.
   Une retouche du pied se fait donc ici pour le style, et sur la home pour le contenu.

   Quatre cellules hautes collées aux bords, filets entre elles : la marque (logo en 120 px à 18 px du bord comme dans la barre, « © 2026 Meleï Studio » en bas
   de la cellule), les liens de la barre empilés, le légal empilé avec le choix de la langue en bas (style dans le bloc des langues de chaque page), le badge Webflow.
   Les sélecteurs passent par footer.pied pour l'emporter sur les règles de la barre (.liens, .logo-wrap) que chaque page déclare sans les borner à .nav. */
footer.pied { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "marque liens legal badge"; border-top: 1px solid var(--filet); background: var(--dark-1); color: var(--on-dark); }
footer.pied > * { padding: 32px 28px 36px; border-right: 1px solid var(--filet); }
footer.pied ::selection { background: rgba(245,244,238,0.99); color: #12110c; }

footer.pied .logo-wrap { grid-area: marque; display: grid; align-content: start; justify-items: start; padding-left: 18px; }
footer.pied .logo-wrap a { display: flex; align-items: center; height: auto; padding: 0; border: 0; }
footer.pied .logo-wrap .logo { width: 120px; height: 42px; }
footer.pied > .copyright { grid-area: marque; align-self: end; display: flex; align-items: center; padding: 0 28px 36px 18px; border: 0; font-size: 15px; color: rgba(var(--encre-sombre),0.6); white-space: nowrap; }
footer.pied .copyright i { font-style: normal; white-space: pre; }

footer.pied .liens { grid-area: liens; display: grid; gap: 10px; align-content: start; justify-items: start; margin: 0; }
footer.pied .liens a { display: flex; align-items: center; padding: 0; border: 0; background: none; font-size: 16px; line-height: 1.4; color: var(--on-dark); white-space: nowrap; }
footer.pied .liens a::after { display: none; }
footer.pied .liens a:hover { text-decoration: underline; text-underline-offset: 3px; }

footer.pied .legal { grid-area: legal; display: grid; gap: 10px; align-content: start; justify-items: start; }
footer.pied .legal a { display: flex; align-items: center; padding: 0; border: 0; background: none; font-size: 15px; line-height: 1.4; color: rgba(var(--encre-sombre),0.6); white-space: nowrap; }
footer.pied .legal a:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }

/* Le badge Webflow : un lien vers le profil de Meleï, la marque et le libellé dans un cadre à filet, à la hauteur du bouton de la barre.
   Une seule ligne entre le légal et le badge : celle du légal (la case du badge en portait une seconde sur la home, reste de la barre miroir, d'où un filet doublé) */
footer.pied .cellule-badge { grid-area: badge; display: flex; align-items: start; border-right: 0; }
footer.pied .badge { display: inline-flex; align-items: center; gap: 10px; height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--filet); border-radius: 4px; font-size: 13px; line-height: 1.2; color: rgba(var(--encre-sombre),0.75); white-space: nowrap; text-decoration: none; transition: border-color 0.2s, color 0.2s; }
footer.pied .badge:hover { border-color: rgba(var(--encre-sombre),0.5); color: var(--on-dark); }
footer.pied .badge i { display: block; width: 26px; height: 17px; flex: none; background: var(--on-dark); -webkit-mask: url(/assets/logo-webflow.svg) center / contain no-repeat; mask: url(/assets/logo-webflow.svg) center / contain no-repeat; }
footer.pied .badge b { display: block; font-weight: 450; color: var(--on-dark); }

/* Tablette et mobile : les cellules s'empilent, la mention sous le logo, un lien par rangée avec 44 px de zone tactile (22/09), le badge en dernier */
@media (max-width: 1100px) {
  footer.pied { grid-template-columns: 1fr; grid-template-areas: "marque" "copy" "liens" "legal" "badge"; }
  footer.pied > * { padding: 24px 18px 28px; border-right: 0; border-bottom: 1px solid var(--filet); }
  footer.pied .logo-wrap { padding-bottom: 14px; border-bottom: 0; }
  footer.pied > .copyright { grid-area: copy; padding: 0 18px 24px; border-bottom: 1px solid var(--filet); }
  footer.pied .liens, footer.pied .legal { padding-top: 12px; padding-bottom: 16px; }
  footer.pied .liens a, footer.pied .legal a { min-height: 44px; }
  footer.pied .cellule-badge { border-bottom: 0; }
}

/* La barre en attente d'Uxum (08/10) : liens et bouton masqués tant que la police n'est pas là (data-police posé par le script de fin de head de chaque page), puis fondus.
   Leurs cases ne sautent plus à l'arrivée de la police ; sans script, rien n'est masqué. Ici parce que ce fichier est chargé par toutes les pages. */
.nav .liens, .nav .cellule-bt { transition: opacity 0.25s ease; }
html[data-police="attente"] .nav .liens, html[data-police="attente"] .nav .cellule-bt { opacity: 0; }