/* =====================================================================
   PIED DE PAGE UNIFIE                                        foot.css
   ---------------------------------------------------------------------
   POURQUOI CE FICHIER EXISTE
   Le site portait cinq pieds de page differents, heritage d'une
   construction par lots : deux familles de feuilles de style
   (ntx2026.css et style.css) et quatorze pages sans aucun pied de page.
   Dupliquer le composant dans les deux feuilles aurait cree une
   troisieme et une quatrieme source de verite, avec la certitude qu'une
   modification future ne soit faite que d'un cote.

   Ce fichier est donc la SEULE source de verite du pied de page. Il est
   charge en DERNIER sur chaque page, apres ntx2026.css et style.css, et
   l'emporte donc sur les anciennes regles qui subsistent dans
   ntx2026.css (lignes 437 a 457 et bloc mobile 1322 a 1343). Celles-ci
   n'ont pas ete supprimees : les retirer d'une feuille partagee pendant
   que deux autres agents y travaillent aurait ete imprudent. Elles sont
   simplement neutralisees ici quand elles divergent.

   AUCUNE DEPENDANCE AUX VARIABLES DE COULEUR des feuilles hotes : elles
   ne portent pas les memes noms (--muted contre --text-muted) ni les
   memes valeurs. Le pied de page doit etre identique partout, donc la
   palette est explicite. Seules les deux familles de polices, definies
   a l'identique dans les deux feuilles, passent par une variable avec
   valeur de repli.

   TOUT EST PORTE PAR .foot : ce fichier ne peut rien casser ailleurs.
   ===================================================================== */

.foot {
    border-top: 1px solid rgba(201, 162, 39, 0.14);
    padding: 2.8rem 0 2rem;
    margin-top: 2.5rem;
    font-family: var(--font-body, 'Montserrat', sans-serif);
    background: none;
    text-align: left;
}
.foot > .wrap {
    width: 100%;
    max-width: var(--maxw, 1240px);
    margin: 0 auto;
    padding: 0 1.5rem;
}
.foot a { text-decoration: none; }

.foot-top {
    display: flex; flex-wrap: wrap; justify-content: space-between;
    gap: 2rem; align-items: flex-start;
}
.foot-brand {
    display: flex; align-items: center; gap: 0.7rem;
    font-family: var(--font-display, 'Cinzel', serif);
    font-weight: 800; text-transform: uppercase;
    font-size: 1.15rem; letter-spacing: 0.04em;
}
.foot-brand img {
    height: clamp(28px, 4.5vw, 38px); width: auto; max-width: 148px;
    border-radius: 0; object-fit: contain; background: transparent;
    filter: drop-shadow(0 1px 6px rgba(201, 162, 39, 0.12));
}
.foot-tagline {
    color: #9a9590; font-size: 0.9rem; margin-top: 0.7rem;
    max-width: 290px; line-height: 1.6;
}
/* Le drapeau belge du slogan : defini ici parce que style.css ne le
   connait pas, et portee limitee au pied de page. */
.foot .be-flag {
    display: inline-block; width: 1.5em; height: 1.05em; border-radius: 3px;
    vertical-align: -0.18em; flex-shrink: 0;
    background: linear-gradient(90deg, #1a1a1a 0 33.33%, #FDDA24 33.33% 66.66%, #EF3340 66.66% 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.foot-socials { display: flex; gap: 0.5rem; margin-top: 1rem; }
.foot-socials a {
    width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: 11px; border: 1px solid rgba(201, 162, 39, 0.14);
    color: #9a9590; transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.foot-socials a:hover, .foot-socials a:focus-visible {
    color: #c9a227; border-color: #c9a227; transform: translateY(-3px);
}

.foot-cols { display: flex; gap: 3.5rem; flex-wrap: wrap; }
.foot-col h5 {
    font-family: var(--font-body, 'Montserrat', sans-serif);
    font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: #5a5550; margin-bottom: 0.9rem; font-weight: 700;
}
.foot-col a {
    display: block; color: #9a9590; font-size: 0.9rem;
    padding: 0.3rem 0; transition: color 0.2s;
}
.foot-col a:hover, .foot-col a:focus-visible { color: #c9a227; }

.foot-bottom {
    margin-top: 2.5rem; padding-top: 1.5rem;
    border-top: 1px solid rgba(201, 162, 39, 0.14);
    display: flex; justify-content: space-between; flex-wrap: wrap;
    gap: 0.6rem; color: #5a5550; font-size: 0.82rem;
}
/* Le lien de credit s'affichait souligne dans le bleu par defaut du
   navigateur sur les pages qui ne portaient pas de regle pour lui. */
.foot-bottom a {
    color: #9a9590; text-decoration: none;
    border-bottom: 1px solid rgba(201, 162, 39, 0.28);
    transition: color 0.2s, border-color 0.2s;
}
.foot-bottom a:hover, .foot-bottom a:focus-visible {
    color: #c9a227; border-color: #c9a227;
}

/* ---------------------------------------------------------------------
   TELEPHONE
   Neuf liens empiles occupaient presque un ecran entier. La navigation
   passe sur deux colonnes, les liens legaux sur une ligne separee.

   LE SEPARATEUR ORPHELIN, ET POURQUOI IL N'Y A PLUS DE SEPARATEUR
   L'ancienne regle generait un point median en ::before de chaque lien
   sauf le premier. Des que la rangee se repliait, la seconde ligne
   commencait par un point isole. Le rattacher au lien precedent en
   ::after deplace simplement le defaut en fin de ligne, ce qui est le
   symptome constate en miroir sur les pieds de page de la boutique.
   Aucune des deux variantes ne peut etre correcte a toutes les
   largeurs, parce que le point de repli se deplace.
   On renonce donc aux separateurs sur telephone au profit d'un
   espacement franc : c'est la seule solution ou aucun repli, a aucune
   largeur et dans aucune langue, ne peut produire de signe orphelin.
   Sur ordinateur la colonne est verticale et n'a jamais eu de
   separateur.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
    .foot { padding: 1.6rem 0 1.2rem; margin-top: 1.6rem; }
    .foot > .wrap { padding: 0 1.1rem; }
    .foot-top { gap: 1.1rem; }
    .foot-tagline { max-width: none; font-size: 0.86rem; margin-top: 0.45rem; }
    .foot-socials { margin-top: 0.7rem; gap: 0.35rem; }
    .foot-socials a { width: 44px; height: 44px; border-radius: 12px; }

    .foot-cols { display: block; width: 100%; }
    /* Les intitules de colonne n'apprennent rien dans un pied de page.
       Ils restent affiches sur ordinateur. */
    .foot-col h5 { display: none; }

    /* Navigation : deux colonnes. Cinq liens laissent un orphelin sur la
       troisieme rangee, quelle que soit la repartition, parce que cinq
       est impair. Deux colonnes restent la moins mauvaise option : trois
       colonnes couperaient "Conditions generales de vente" et les
       libelles anglais, plus courts, ne comblent pas l'ecart. */
    .foot-col:first-child {
        display: grid; grid-template-columns: 1fr 1fr;
        column-gap: 0.8rem; row-gap: 0;
    }
    /* Cible tactile de 44 px conservee, mais l'interligne visuel est
       ramene au minimum : la hauteur vient de la cible, pas de la marge. */
    .foot-col a {
        min-height: 44px; display: flex; align-items: center;
        padding: 0; margin: 0; line-height: 1.25;
    }

    .foot-col + .foot-col {
        margin-top: 0.45rem; padding-top: 0.55rem;
        border-top: 1px solid rgba(201, 162, 39, 0.14);
        display: flex; flex-wrap: wrap; align-items: center;
        column-gap: 1.15rem; row-gap: 0;
    }
    .foot-col + .foot-col a { font-size: 0.78rem; }
    /* Neutralisation explicite de l'ancienne regle de ntx2026.css qui
       generait le point median orphelin. */
    .foot-col + .foot-col a::before,
    .foot-col + .foot-col a + a::before { content: none; margin: 0; }

    /* Le bas tenait sur trois lignes. Le copyright et la mention du
       fondateur sont courts et partagent la premiere ; le credit, plus
       long et porteur d'un lien, prend la seconde pour lui seul afin de
       garder sa zone touchable. */
    .foot-bottom {
        margin-top: 0.9rem; padding-top: 0.8rem;
        justify-content: center; text-align: center;
        column-gap: 0.55rem; row-gap: 0.15rem; font-size: 0.76rem;
    }
    .foot-bottom span:last-child { flex-basis: 100%; }
    .foot-bottom a { display: inline-block; padding: 0.35rem 0; }
}

@media (max-width: 360px) {
    /* A cette largeur les deux colonnes de navigation deviennent trop
       etroites pour "Boutique" et "Notre histoire" cote a cote. */
    .foot-col + .foot-col a { font-size: 0.74rem; }
    .foot-col + .foot-col { column-gap: 0.9rem; }
}

/* ---- Ajustement issu des mesures ----------------------------------
   La rangee de liens legaux tenait sur trois lignes en francais, deux
   en anglais. L'ecart est resserre et le corps legerement reduit pour
   gagner une ligne sans separateur et sans rogner la cible tactile,
   qui reste portee par min-height. */
@media (max-width: 640px) {
    .foot-col + .foot-col { column-gap: 0.85rem; }
    .foot-col + .foot-col a { font-size: 0.75rem; }
}

/* ---- Page 404 : son body est un conteneur flex ---------------------
   Le body de 404.html est declare display:flex avec centrage, pour
   centrer son message a l'ecran. Le pied de page devenait donc un
   FRERE du contenu sur la meme ligne, d'ou un debordement lateral
   mesure a 64 px a 320 px de large. On repasse l'axe en colonne : le
   message garde son centrage par marges automatiques, le pied de page
   reprend toute la largeur sous lui. Regle portee ici pour rester
   additive et ne pas reecrire la feuille interne de la page. */
body:has(> .foot) {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}
body:has(> .foot) > .wrap { margin: auto; }
body:has(> .foot) > .foot { flex: 0 0 auto; width: 100%; }