/* =============================================================
   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-right: -14px;
  margin-left: -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: right;
  color: #fff;
  cursor: default;
}
.foot-col-title .ico { display: none; margin-right: 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-right: 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;
  }
}

/* ---- Le pied ne dépend plus de Bootstrap ------------------------------
   Son balisage porte `<div class="container">`, dont la largeur vient de
   `bootstrap.min.css`. Les gabarits qui ne chargent pas Bootstrap — celui
   des histoires et du blog — laissaient donc le pied s'étaler sur toute
   la fenêtre : 1320 px au lieu de 1176, désaligné du reste du site.

   La règle est portée ici, au plus près du composant, et reprend la
   valeur du thème. Sur les pages qui chargent Bootstrap, elle dit la même
   chose : aucun changement visible. */
.foot .container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
}

/* ---- Le pied impose SA typographie ------------------------------------
   Il n'en déclarait aucune : il héritait de celle de la page. Sur le site
   cela donnait Capriola 14 px / 24 px, la police du corps ; sur les
   gabarits des histoires et du blog, qui posent Nunito sur tout le
   document, le même pied passait en Nunito 16 px avec un interligne
   « normal ». Même composant, même balisage, trois différences visibles.

   Un pied commun à tout le site ne peut pas dépendre de ce que chaque
   gabarit met autour de lui : les valeurs sont donc déclarées ici, et
   valent celles du site. */
.foot,
.foot .foot-cols,
.foot .foot-col-title,
.foot .foot-list,
.foot .foot-list a,
.foot .foot-bottom,
.foot p,
.foot span,
.foot a,
.foot button {
  font-family: Capriola, sans-serif;
}

.foot {
  font-size: 14px;
  line-height: 24px;
}

.foot .foot-cols { font-size: 14px; line-height: 24px; }

/* Le titre de colonne hérite de l'interligne, pas de la taille : sans
   cette ligne il retombait en « normal », plus serré de quelques pixels
   à chaque colonne — et le pied entier raccourcissait. */
.foot .foot-col-title { line-height: 24px; }

/* Sauf le logo, qui est un wordmark dessiné en Baloo 2. */
.foot .mn-logo,
.foot .mn-logo__l { font-family: var(--logo-font, 'Baloo 2'), system-ui, sans-serif; }

/* Et les icônes, qui sont une police à part entière. */
.foot .ico { font-family: 'Material Symbols Rounded'; }