/* =============================================================
   Pied de page du site — unique, partagé par le site public
   (layouts/frontend-app) et le tableau de bord Lernen
   (layouts/lernen). Porté depuis mew_dash/pied-de-page.html /
   mew_dash/css/style.css (section "PIED DE PAGE").

   Fichier autonome plutôt que fusionné dans main.css ou
   lernen/css/style.css : les deux zones ont chacune leurs propres
   variables (ou aucune, côté site public), donc les valeurs ici
   sont recopiées en dur plutôt que via var(--brand)/var(--r-xs)/
   var(--font-display) — mêmes valeurs que public/lernen/css/style.css
   (couleur de marque réelle du site, pas le rouge de mew_dash).
   ============================================================= */

.foot {
  margin: 86px 0 0;
  padding: 56px 0 32px;
  background: #17161A;
  color: #fff;
}

/* Icônes Material Symbols Rounded : déjà globales sur .ico côté tableau
   de bord (public/lernen/css/style.css), mais pas sur le site public —
   redéfinies ici, scopées à .foot, pour que les deux affichent les
   mêmes glyphes sans toucher .ico ailleurs sur le site public. */
.foot .ico {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  font-size: 21px;
  -webkit-font-feature-settings: "liga";
  font-variant-ligatures: none;
}
.foot .ico-21 { font-size: 21px; }

/* Sur le tableau de bord Lernen, le pied est le dernier enfant de
   .page, qui porte 14px de marge intérieure de chaque côté (voir
   public/lernen/css/style.css) — annulée ici pour que le fond sombre
   occupe toute la largeur. Le site public n'a pas ce conteneur : la
   règle ne s'y applique donc jamais. */
.page > .foot {
  margin-left: -14px;
  margin-right: -14px;
}

.foot .wrap { max-width: 1440px; margin: 0 auto; padding: 0 60px; }

.foot-cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) 296px;
  gap: 38px 32px;
  padding-bottom: 56px;
}

/* le titre est un bouton : simple intitulé en grand écran,
   déclencheur de repli en petit écran */
.foot-col-title {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  margin-bottom: 20px;
  padding: 0;
  border: none; background: none;
  font-family: inherit;
  font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  text-align: left;
  color: #fff;
  cursor: default;
}
.foot-col-title .ico { display: none; margin-left: auto; font-size: 22px; color: rgba(255, 255, 255, .6); transition: transform .22s ease; }
.foot-list { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.foot-list a, .foot-list span { font-size: 14px; font-weight: 500; line-height: 1.35; color: rgba(255, 255, 255, .64); }
.foot-list a:hover { color: #fff; }
.foot-list .foot-more { font-weight: 700; color: #fff; }
.foot-list .foot-more:hover { color: #ff6363; }

.foot-cols > * > .foot-group + .foot-group { margin-top: 34px; }

/* colonne d'outils, à droite des liens */
.foot-tools { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.foot-country {
  display: flex; align-items: center; gap: 12px;
  padding: 17px 20px;
  border-radius: 16px;
  background: #211F24;
  font-size: 16px; font-weight: 600;
  color: #fff;
}
.foot-country:hover { background: #2A272F; color: #fff; }
.foot-country .ico { color: rgba(255, 255, 255, .6); }
.foot-country .ico:last-child { margin-left: auto; }

/* « Télécharger l'application » a été retiré du pied de page, et ses règles
   avec — `.foot-getapp`, `.foot-qr`. Le réglage `_general.app_url` reste en
   base : le jour où l'application existe, le bloc revient d'une ligne.

   « Aide » a pris sa place, sous le sélecteur de pays et de langue. C'est le
   groupe qu'on cherche quand on veut un numéro ou une adresse, et il était
   perdu en cinquième colonne d'une grille de liens. */
.foot-group--aide {
  padding: 17px 20px;
  border-radius: 16px;
  background: #211F24;
}

/* Le titre était un bouton de colonne, calé sur la grille : ici il ouvre un
   bloc, et n'a plus de marge à rattraper. */
.foot-group--aide .foot-col-title {
  margin: 0;
  padding: 0;
  width: 100%;
}

.foot-group--aide .foot-list { margin-top: 12px; }

.foot-follow { margin-top: 28px; }
.foot-socials { display: flex; gap: 10px; }
.foot-social {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  color: #17161A;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  transition: background .18s ease, color .18s ease;
}
.foot-social:hover { background: #ff6363; color: #fff; }
.foot-social .ico { font-size: 17px; color: inherit; }

/* signature et mentions */
/* Le grand mot du bas est désormais le logo lui-même — il portait la police
   Capriola du gabarit d'origine, pas celle de la marque. La case garde sa
   place et sa marge ; la typographie vient du composant. */
.foot-word {
  display: block;
  margin-bottom: 26px;
  line-height: .9;
}

/* `!important` à contrecœur, et pour une raison précise : le composant logo
   écrit sa taille en style EN LIGNE (`style="font-size:104px"`), et rien
   d'autre qu'un `!important` ne passe devant. On veut ici la taille
   élastique de la maquette, pas une valeur figée — sur téléphone, 104 px
   sortiraient de l'écran. */
.foot-word .mn-logo {
  font-size: clamp(56px, 9vw, 104px) !important;
  line-height: .9;
}
.foot-legal { display: flex; flex-direction: column; gap: 8px; }
.foot-legal p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, .5); }
.foot-legal a { color: rgba(255, 255, 255, .5); text-decoration: underline; text-underline-offset: 3px; }
.foot-legal a:hover { color: #fff; }

@media (max-width: 1340px) {
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-tools { grid-column: 1 / -1; }
}
/* la colonne d'outils s'aligne en rangée uniquement quand elle a
   la place : sous 700 px elle repasse en pile, où un flex-basis
   s'appliquerait à la hauteur */
@media (max-width: 1340px) and (min-width: 701px) {
  .foot-tools { flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding-top: 10px; }
  .foot-tools > * { flex: 0 1 300px; }
  .foot-follow { flex-basis: 100%; margin-top: 8px; }
}
@media (max-width: 700px) {
  .foot { margin-top: 56px; padding: 8px 0 28px; }
  .foot .wrap { padding: 0 20px; }
  /* une colonne, chaque section repliée derrière son titre */
  .foot-cols { grid-template-columns: 1fr; gap: 0; padding-bottom: 30px; }
  .foot-group { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .foot-col-title { margin: 0; padding: 20px 0; cursor: pointer; }
  .foot-col-title .ico { display: inline-flex; }
  .foot-group.is-open .foot-col-title .ico { transform: rotate(180deg); }
  /* L'OUVERTURE ET LA FERMETURE S'ANIMENT TOUTES LES DEUX.

     Le repli se faisait par `display: none`, qui ne s'anime pas : la liste
     apparaissait et disparaissait d'un coup, sans qu'on voie d'où elle
     sortait ni où elle repartait.

     On passe donc par `max-height`. La valeur haute est volontairement
     généreuse — la vitesse d'ouverture varie un peu selon la longueur de
     la liste, mais c'est le prix d'une animation qui marche PARTOUT,
     Safari compris. L'astuce `grid-template-rows: 0fr → 1fr`, plus exacte,
     y est mal calculée : c'est elle qui vidait le menu de l'en-tête.

     `visibility` accompagne l'opacité pour que les liens repliés ne soient
     ni cliquables ni annoncés par un lecteur d'écran. */
  .foot-group .foot-list {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    padding-bottom: 0;
    gap: 16px;
    transition:
      max-height 0.32s cubic-bezier(0.22, 0.9, 0.24, 1),
      opacity 0.2s ease,
      padding-bottom 0.32s cubic-bezier(0.22, 0.9, 0.24, 1),
      visibility 0s linear 0.32s;
  }

  .foot-group.is-open .foot-list {
    max-height: 760px;
    opacity: 1;
    visibility: visible;
    padding-bottom: 22px;
    transition:
      max-height 0.36s cubic-bezier(0.22, 0.9, 0.24, 1),
      opacity 0.26s ease 0.04s,
      padding-bottom 0.36s cubic-bezier(0.22, 0.9, 0.24, 1),
      visibility 0s;
  }

  /* La flèche tourne sur la même courbe que le dépliage. */
  .foot-col-title .ico {
    transition: transform 0.32s cubic-bezier(0.22, 0.9, 0.24, 1);
  }
  .foot-cols > * > .foot-group + .foot-group { margin-top: 0; }
  .foot-tools { flex-direction: column; align-items: stretch; padding-top: 26px; }
  .foot-tools > * { flex: 0 0 auto; }
  .foot-follow .foot-col-title { padding: 0 0 16px; }
  .foot-follow .foot-col-title .ico { display: none; }
  .foot-word { margin-bottom: 20px; }
}

/* ---------------------------------------------------------------------
   LES CIBLES TACTILES DU PIED, SUR TÉLÉPHONE

   Audit mobile : deux liens du bas tombaient à 18 et 24 px de haut, sous
   le seuil couramment retenu (44 px, et 32 au strict minimum). Un doigt
   les manque, ou touche le voisin.

   On ne grossit pas le texte : on élargit la zone sensible autour, par du
   remplissage vertical. La ligne garde son dessin, la cible double.
   --------------------------------------------------------------------- */
@media (max-width: 899px) {
  .foot-legal a,
  .foot-list .foot-more,
  .foot-group--aide .foot-col-title {
    display: inline-block;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  /* Le retrait ajouté ne doit pas écarter les lignes entre elles. */
  .foot-legal {
    gap: 0;
  }
}