/* =========================================================================
   MOSAÏCA — PIED DE PAGE GLOBAL (v2 — version compacte)
   -------------------------------------------------------------------------
   Portée : uniquement le pied de page (.mfoot). Ce fichier est chargé en
   dernier (après mobile-premium.css) afin qu'un seul système de footer
   gouverne tout le site, sur toutes les pages.

   v2 : même identité (fond clair, marine, or ponctuel) mais nettement plus
   compact — cible 610-650px de hauteur totale sur ordinateur, obtenue par
   la gestion des marges/espacements, jamais par max-height, overflow
   coupé ou une typographie réduite à l'excès.

   Jetons réutilisés depuis responsive.css / styles.css : --container-width,
   --page-padding, --gap-*, --gold, --text-label, --text-sm, --tap. Aucune
   nouvelle échelle de points de rupture : seuls 900px et 640px (échelle
   canonique du projet) sont utilisés ici.
   ========================================================================= */

.mfoot{
  --mf-bg:#F8FAFC;
  --mf-ink:#082F49;                 /* marine Mosaïca existant (home.css --deep) */
  --mf-ink-soft:rgba(8,47,73,.72);  /* texte secondaire — 5,6:1 sur --mf-bg (AA) */
  --mf-ink-faint:rgba(8,47,73,.68); /* juridique / mentions — 5:1 sur --mf-bg (AA) */
  --mf-line:rgba(8,47,73,.14);
  --mf-line-strong:rgba(8,47,73,.32);
  --mf-gold:var(--gold,#C9A45C);

  background:var(--mf-bg);
  color:var(--mf-ink);
  border-top:1px solid var(--mf-line);
  padding-bottom:env(safe-area-inset-bottom);
  font-family:'Space Grotesk',sans-serif;
}
@media(max-width:900px){
  .mfoot{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom))}
}
.mfoot *{box-sizing:border-box}
.mfoot a{text-decoration:none}

/* ─────────────────────────────────────────────────────────────────────
   ZONE 1 — Identité, coordonnées et invitation à contacter
   ───────────────────────────────────────────────────────────────────── */
.mfoot-top{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
  padding-block:2.5rem 1.5rem;
}

.mfoot-brand-line{display:flex;align-items:center;gap:11px;margin-bottom:.7rem}
.mfoot-brand-line img{height:32px;width:auto;display:block;flex-shrink:0}
.mfoot-brand-name{font-family:'Ibarra Real Nova',serif;font-weight:700;font-size:1.02rem;color:var(--mf-ink)}
.mfoot-brand-name span{color:var(--mf-gold)}

.mfoot-tagline{
  font-size:.94rem;
  line-height:1.5;
  color:var(--mf-ink-soft);
  max-width:40ch;
  margin-bottom:.85rem;
}

.mfoot-contact{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  font-size:.84rem;
  line-height:1.4;
  color:var(--mf-ink-faint);
}
.mfoot-contact a{color:var(--mf-ink-soft);transition:color .2s ease}
.mfoot-contact a:hover,
.mfoot-contact a:focus-visible{color:var(--mf-gold)}

/* Zone contact / invitation — traitée comme un objet éditorial, pas un
   bouton SaaS. */
.mfoot-cta-zone{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.mfoot-eyebrow{
  /* Pas d'or ici : sur un fond aussi clair, le doré descend sous 3,5:1
     de contraste. L'or reste réservé au survol et aux micro-détails. */
  font-size:var(--text-label,.8rem);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mf-ink-soft);
  margin-bottom:.6rem;
}
.mfoot-cta-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Ibarra Real Nova',serif;
  font-weight:600;
  font-size:1.3rem;
  line-height:1.25;
  color:var(--mf-ink);
  padding-bottom:.5rem;
}
/* Courte ligne dorée — pas le long soulignement pleine largeur d'avant */
.mfoot-cta-link::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  width:30px;height:2px;
  background:var(--mf-gold);
  transition:width .22s ease;
}
.mfoot-cta-link .mf-arrow{
  width:17px;height:17px;flex-shrink:0;
  transition:transform .22s ease;
}
.mfoot-cta-link:hover,
.mfoot-cta-link:focus-visible{color:var(--mf-gold)}
.mfoot-cta-link:hover::after,
.mfoot-cta-link:focus-visible::after{width:48px}
.mfoot-cta-link:hover .mf-arrow,
.mfoot-cta-link:focus-visible .mf-arrow{transform:translateX(4px)}

@media(min-width:901px){
  .mfoot-cta-zone{align-items:flex-end;text-align:right}
}

@media(max-width:900px){
  .mfoot-top{grid-template-columns:1fr;gap:1.75rem;padding-block:2.25rem 1.5rem}
}

/* ─────────────────────────────────────────────────────────────────────
   Séparateurs — marine à faible opacité, jamais dorés
   ───────────────────────────────────────────────────────────────────── */
.mfoot-sep{height:1px;border:0;background:var(--mf-line);margin:0}

/* ─────────────────────────────────────────────────────────────────────
   ZONE 2 — Navigation (Expertises / Services / Repères)
   ───────────────────────────────────────────────────────────────────── */
.mfoot-nav{padding-block:1.5rem 1.25rem}
.mfoot-nav-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
}
@media(max-width:900px){
  .mfoot-nav-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .mfoot-nav{padding-block:0}
  .mfoot-nav-grid{grid-template-columns:1fr;gap:0}
}

.mfoot-group-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:100%;
  background:none;
  border:0;
  margin:0 0 1.5rem;
  padding:0;
  font:inherit;
  font-size:var(--text-label,.8rem);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mf-ink);
  text-align:left;
  cursor:default;
}
.mf-acc-icon{display:none}

.mfoot-group ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  row-gap:18px;
}
.mfoot-group li{margin:0}
.mfoot-group a{
  display:block;
  font-size:.9rem;
  line-height:1.4;
  color:var(--mf-ink-soft);
  transition:color .2s ease,transform .2s ease;
}
.mfoot-group a:hover,
.mfoot-group a:focus-visible{color:var(--mf-gold);transform:translateX(3px)}

/* Panneau : ouvert en permanence au-dessus de 640px, sans JavaScript.
   Sous 640px, footer.js mesure la hauteur réelle et anime max-height ;
   sans JavaScript, aucun style inline n'est posé et le panneau reste
   entièrement visible — repli strictement une amélioration progressive. */
.mfoot-panel{overflow:hidden}

@media(max-width:640px){
  .mfoot-acc{border-bottom:1px solid var(--mf-line)}
  .mfoot-acc:first-child{border-top:1px solid var(--mf-line)}
  .mfoot-group-btn{cursor:pointer;padding-block:1rem;margin-bottom:0;min-height:var(--tap,44px)}
  .mf-acc-icon{
    display:block;
    position:relative;
    width:14px;height:14px;flex-shrink:0;
  }
  .mf-acc-icon::before,
  .mf-acc-icon::after{
    content:'';
    position:absolute;top:50%;left:50%;
    background:var(--mf-ink);
    transition:transform .22s ease,opacity .22s ease;
  }
  .mf-acc-icon::before{width:14px;height:1px;transform:translate(-50%,-50%)}
  .mf-acc-icon::after{width:1px;height:14px;transform:translate(-50%,-50%)}
  .mfoot-acc[data-open="true"] .mf-acc-icon::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}

  .mfoot-panel{transition:max-height .22s ease}
  .mfoot-group ul{row-gap:16px;padding-top:.2rem}
  .mfoot-panel ul{padding-bottom:1rem}
}

/* ─────────────────────────────────────────────────────────────────────
   ZONE 3 — Mentions juridiques et réseaux sociaux
   ───────────────────────────────────────────────────────────────────── */
.mfoot-legal{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.75rem 1.5rem;
  padding-block:.85rem;
  font-size:var(--text-sm,.86rem);
  color:var(--mf-ink-faint);
}
.mfoot-legal-links{display:flex;gap:1.25rem;flex-wrap:wrap}
.mfoot-legal-links a{color:var(--mf-ink-faint);transition:color .2s ease}
.mfoot-legal-links a:hover,
.mfoot-legal-links a:focus-visible{color:var(--mf-gold)}

.mfoot-social{display:flex;align-items:center;gap:13px}
.mfoot-social a{
  width:44px;height:44px;
  border-radius:50%;
  border:1.5px solid var(--mf-line-strong);
  background:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--mf-ink);
  flex-shrink:0;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.mfoot-social svg{width:18px;height:18px;display:block}
.mfoot-social a:hover,
.mfoot-social a:focus-visible{
  background:var(--mf-ink);
  border-color:var(--mf-gold);
  color:#fff;
}

@media(max-width:640px){
  .mfoot-legal{flex-direction:column;justify-content:center;text-align:center;padding-block:1.4rem}
  .mfoot-social{order:-1}
}

/* Réduction de mouvement : le système global (responsive.css) neutralise
   déjà toutes les transitions/animations ; rien à dupliquer ici. */