/* ═══════════════════════════════════════════════════════════════════════════
   LE PIED DE PAGE
   ═══════════════════════════════════════════════════════════════════════════

   Le fond et la couleur du texte de .ml-footer sont redéclarés ici, en blanc.
   Ce sont normalement main.css qui les pose (--ml-primary, la nuit aubergine du
   chrome) : la mission de refonte de ce pied de page ne portait que sur ce
   fichier, jamais sur main.css. Les deux règles s'affichent donc encore côte
   à côte : celle de main.css (la nuit d'origine du chrome) et celle-ci, qui la
   recouvre en cascade (même sélecteur, feuille chargée après, voir
   functions.php). Cela fonctionne, mais le commentaire de main.css qui décrit
   encore ce pied de page comme sombre devient inexact : à corriger par le
   boss le jour où main.css est ouvert pour une autre raison.

   POURQUOI IL EST BLANC.
   Il a porté le bleu nuit du site, puis le violet avant lui : dans les deux
   cas, il redevenait une teinte de plus, jamais un objet distinct de ce qui
   l'entoure. Il passe au blanc (--ml-bg) et se détache désormais par sa
   forme, pas par sa couleur : coins hauts arrondis, ombre douce portée vers
   le haut, un léger recouvrement de la section qui le précède. Il se lit
   comme une carte posée au dessus de la page, quelle que soit la couleur de
   cette dernière (blanche sur plusieurs gabarits, crème sur d'autres,
   violette à la fin des fiches pays et villes).

   COMMENT IL SE DISTINGUE DE LA SECTION DES AVIS.
   Ce n'est plus une affaire de couleur : c'est une affaire de matière et de
   rythme.
   - les avis : un aplat, un grand titre centré, beaucoup d'air, rien à lire ;
   - le pied de page : une grille, des intitulés, du petit corps de texte, un
     filet vertical entre les colonnes, un encart en relief, et une bande
     légèrement plus crème pour finir. Il est dense là où l'autre est aéré.

   LE RECOUVREMENT SUR LA SECTION PRÉCÉDENTE.
   Sans lui, l'arrondi et l'ombre ne se liraient pas partout : plusieurs
   gabarits terminent sur un blanc identique au sien (contact, destinations,
   langues, hub des langues). Le pied de page remonte donc d'un cran sur la
   section qui le précède (marge négative, --ml-space-lg) et passe devant
   elle (z-index), exactement comme .ml-home-chiffres remonte déjà sur la
   vidéo du haut de page dans main.css. La marge négative (40px) reste très
   en dessous du souffle bas de toutes les sections qui précèdent le pied de
   page (72px au plus court, 97px pour les appels finaux des fiches pays et
   villes) : rien n'y est jamais rogné.

   CINQ COLONNES, ET LEUR RANGEMENT.
   Les coordonnees, « Le site », les deux rubriques les plus fournies du menu
   principal (les langues, les destinations), les mentions legales. Le gabarit
   (template-parts/footer-main.php) decide lesquelles, et pourquoi : ce fichier
   ne fait que les ranger. Il en compte ce que le gabarit lui annonce
   (--ml-footer-cols), il n'en devine jamais le nombre.

   Elles s'empilent selon la place : une colonne sur un telephone, deux sur une
   tablette, les quatre a cote de la marque a partir de 1100px.

   AUCUN FILIGRANE DE GLOBE ICI. Il apparaissait quatre fois sur l'accueil, il
   n'apparait plus qu'une seule (la section « Marine »). Le vocabulaire du pied
   de page est celui du trait et de la grille, pas celui de l'image.

   Trois tokens locaux, et trois seulement, pour ne pas répéter les mêmes
   valeurs à chaque règle : le gris des liens et du texte atténué, le trait de
   séparation entre les colonnes, la surface en relief de l'encart de
   rendez-vous et du survol des réseaux sociaux. Chacun pointe vers un token
   global déjà utilisé ailleurs sur fond clair du site (jamais une couleur
   inventée) : si le pied de page reprenait un jour une autre teinte de fond,
   seules ces trois lignes bougeraient.
   ═══════════════════════════════════════════════════════════════════════════ */

.ml-footer {
  /* Contrastes mesurés sur le nouveau fond du pied de page (--ml-bg,
     #ffffff) :
     - le texte courant, --ml-text (#221d29) : 16,5:1 ;
     - les liens au repos et le texte atténué, --ml-text-mid (#58515f) :
       7,6:1 ;
     - les intitulés des coordonnées, --ml-text-mid également : 7,6:1 (le
       gris plus clair --ml-text-dim tombe à 3,7:1 sur blanc, sous le seuil
       de 4,5:1, il n'a donc pas sa place ici) ;
     - les titres de colonne et le nom de l'agence, --ml-primary : 16,5:1,
       la même valeur que le titre de l'appel final juste au dessus
       (.ml-home-cta dans main.css), mesurée là aussi sur du blanc ;
     - les liens au survol et au focus, --ml-accent : 10:1 sur blanc (voir
       le CLAUDE.md du projet, qui documente cette valeur).
     Tous très au dessus des 4,5:1 exigés. */
  --ml-footer-lien: var(--ml-text-mid);
  --ml-footer-trait: var(--ml-border);
  --ml-footer-relief: var(--ml-accent-soft);

  position: relative;
  z-index: 1;
  background: var(--ml-bg);
  color: var(--ml-text);

  /* Remonte sur la section qui précède (voir le commentaire en tête de
     fichier) : sans ce recouvrement, l'arrondi et l'ombre ne se liraient
     pas sur les gabarits qui terminent déjà sur un blanc identique au
     sien. */
  margin-block-start: calc(-1 * var(--ml-space-lg));
  border-start-start-radius: var(--ml-radius-lg);
  border-start-end-radius: var(--ml-radius-lg);

  /* Ombre douce et haute, teintée comme les autres élévations du site
     (rgba(34, 29, 41, ...), la couleur de --ml-text, jamais un gris neutre) :
     c'est elle, plus que l'arrondi, qui donne l'effet d'un pied de page posé
     au dessus de la page. */
  box-shadow: 0 -12px 30px rgba(34, 29, 41, 0.08);

  /* Aucun padding en bas : la bande du bas va jusqu'au bord. */
  padding: 0;
}

.ml-footer-inner {
  display: grid;
  gap: var(--ml-space-lg);
  padding-block: var(--ml-space-xl) var(--ml-space-lg);
}

/* La marque en tete, les colonnes de menus en dessous : sur un telephone, on lit
   d'abord qui parle, ensuite ou aller. */
@media (min-width: 900px) {
  .ml-footer-inner {
    /* La colonne de marque est plus large que les autres : elle porte une
       adresse, un telephone, des horaires et un encart, pas une liste de
       liens. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
    gap: var(--ml-space-lg) var(--ml-space-xl);
    align-items: start;
  }
}

/* A partir de 1100px, les quatre colonnes de liens tiennent sur une seule rangee
   a cote de la marque : cinq colonnes en tout. Elles ont alors besoin de plus de
   place que la marque, et l'ecart entre les deux zones se resserre (--ml-space-lg
   au lieu de --ml-space-xl) : sans cela, une colonne tombait sous les 150px, et
   « Apprendre les langues » y passait sur trois lignes. Mesure. */
@media (min-width: 1100px) {
  .ml-footer-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
    gap: var(--ml-space-lg);
  }
}

/* ── La colonne de marque ─────────────────────────────────────────────────── */

.ml-footer-nom {
  margin: 0 0 var(--ml-space-xs);
  font-family: var(--ml-font-heading);
  font-size: var(--ml-fs-h3);
  font-weight: 700;
  line-height: var(--ml-lh-heading);
  /* Même couleur que les titres du reste du site (h1 à h3 dans main.css) :
     le nom de l'agence se lit comme un titre, pas comme un texte courant. */
  color: var(--ml-primary);
}

.ml-footer-accroche {
  max-inline-size: 34ch;
  margin: 0 0 var(--ml-space-md);
  color: var(--ml-footer-lien);
}

/* Les coordonnees, en liste de definitions : chaque valeur est annoncee par ce
   qu'elle est. L'intitule tient une colonne etroite et fixe, la valeur prend le
   reste : les quatre lignes s'alignent alors sur une meme verticale, c'est ce
   qui donne au bloc son aspect de fiche et non de paragraphe en vrac. */
.ml-footer-coordonnees {
  margin: 0 0 var(--ml-space-md);
  font-size: var(--ml-fs-sm);
  line-height: 1.55;
}

.ml-footer-coordonnee {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0 var(--ml-space-sm);
  padding-block: 0.55em;
  border-block-start: 1px solid var(--ml-footer-trait);
}

.ml-footer-coordonnee:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

/* --ml-text-mid : 7,6:1 sur blanc. L'intitulé doit se lire comme une
   étiquette, donc plus discret que sa valeur, mais il reste un texte : il ne
   descend pas sous le seuil pour autant. */
.ml-footer-coordonnees dt {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.9;
  color: var(--ml-text-mid);
}

.ml-footer-coordonnees dd {
  margin: 0;
  color: var(--ml-text);
  /* Une adresse e-mail est un seul mot : sans coupure autorisée, elle
     déborderait sa colonne sur un très petit écran, et l'overflow-x: clip du
     body la rognerait en silence (audit mobile). */
  overflow-wrap: anywhere;
}

.ml-footer-coordonnees address {
  font-style: normal;
}

.ml-footer-horaires-note {
  display: block;
  color: var(--ml-footer-lien);
}

/* L'encart de prise de rendez-vous : le seul objet en relief du pied de page,
   parce que c'est la seule chose qu'on vient y faire. Il reprend la paire
   fond clair et bordure lilas déjà utilisée pour les cartes d'accent des
   fiches pays et villes (--ml-accent-soft, --ml-accent-bordure), plutôt que
   le trait neutre des colonnes : c'est le violet de marque qui le distingue,
   en douceur, sans avoir besoin d'une ombre.

   Le bouton garde le violet plein du site : blanc sur violet, jamais
   l'inverse. Le violet ne revient donc dans le pied de page qu'à deux
   endroits, cet encart et ce bouton, et les deux comptent. */
.ml-footer-rdv {
  padding: var(--ml-space-md);
  border: 1px solid var(--ml-accent-bordure);
  border-radius: var(--ml-radius);
  background: var(--ml-accent-soft);
}

.ml-footer-rdv-texte {
  margin: 0 0 var(--ml-space-sm);
  font-size: var(--ml-fs-sm);
  line-height: 1.55;
  color: var(--ml-footer-lien);
}

/* ── Les colonnes de menus ────────────────────────────────────────────────── */

/* Quatre colonnes : le reste du site, les deux rubriques les plus fournies du
   menu, les mentions legales. Leur nombre n'est pas devine par le style, il est
   pose par le gabarit (--ml-footer-cols) : le jour ou la cliente vide le menu des
   mentions legales, il n'en reste que trois, et les trois se partagent la largeur
   sans laisser de case vide au bout de la rangee. Meme mecanisme que les panneaux
   du mega menu (--ml-mega-cols).

   L'empilement suit la place : une colonne sur un telephone, deux sur une
   tablette, toutes sur un grand ecran. Un compte explicite, jamais un auto-fit :
   avec quatre colonnes a cote d'une marque, un auto-fit finissait par en renvoyer
   trois et la quatrieme passait seule a la ligne. */
.ml-footer-menus {
  display: grid;
  gap: var(--ml-space-md);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  /* Sans cette remise a zero, la zone des menus garde pour largeur minimale la
     somme de ses colonnes : elle deborde alors de la grille du pied de page, et
     la derniere colonne sort de l'ecran sur un telephone. Mesure. */
  min-inline-size: 0;
}

@media (min-width: 600px) {
  .ml-footer-menus {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .ml-footer-menus {
    grid-template-columns: repeat(var(--ml-footer-cols, 4), minmax(0, 1fr));
  }
}

/* Les titres des colonnes n'ont pas tous la meme longueur : « Apprendre les
   langues » passe sur deux lignes la ou « Destinations » tient sur une, et sa
   liste de liens descendait alors d'une ligne de plus que celle de ses voisines.
   La rangee de titres et la rangee de listes sont donc deux pistes de la grille
   des menus, que chaque colonne reprend a son compte (subgrid) : les titres
   partagent une hauteur, les listes demarrent toutes sur la meme ligne.

   Aucune hauteur n'est reservee a l'avance : quand tous les titres tiennent sur
   une ligne, la piste ne fait qu'une ligne. Et la ou subgrid manque, la colonne
   retombe sur son empilement naturel : les listes se decalent d'une ligne, rien
   ne casse. */
@media (min-width: 600px) {
  .ml-footer-menus {
    grid-template-rows: auto 1fr;
  }
  .ml-footer-colonne {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

/* Le filet vertical entre les colonnes. C'est lui qui donne au pied de page son
   rythme de grille, celui que la section des avis n'a pas. Il est pose a gauche
   de chaque colonne, jamais a droite : la derniere colonne n'a donc pas de trait
   qui pende dans le vide. */
.ml-footer-colonne {
  min-inline-size: 0;
  padding-inline-start: var(--ml-space-md);
  border-inline-start: 1px solid var(--ml-footer-trait);
}

/* Sur un telephone, les colonnes sont empilees : un trait a leur gauche ne
   separerait plus rien, il ferait une barre qui court le long de la page. Il
   passe alors au dessus de chaque colonne, ou il separe vraiment. */
@media (max-width: 599px) {
  .ml-footer-colonne {
    padding-inline-start: 0;
    padding-block-start: var(--ml-space-md);
    border-inline-start: 0;
    border-block-start: 1px solid var(--ml-footer-trait);
  }
  .ml-footer-colonne:first-child {
    padding-block-start: 0;
    border-block-start: 0;
  }
}

/* Entre 600 et 900px, la marque passe au dessus des colonnes : rien ne se tient
   plus a gauche de la premiere de chaque rangee, et son filet ne separerait donc
   plus rien. Il courrait le long du bord du conteneur comme une barre oubliee.
   Une colonne sur deux le garde, celle qui a bien une voisine a sa gauche.
   Au dela de 900px, la marque revient a gauche : le filet de la premiere colonne
   la separe des liens, il reprend son sens et sa place. */
@media (min-width: 600px) and (max-width: 899px) {
  .ml-footer-colonne:nth-child(odd) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

/* align-content: start est indispensable, pas cosmetique. La liste occupe la
   seconde piste de la colonne, dont la hauteur est celle de la plus longue des
   listes (les neuf pays). Sans cette ligne, les listes plus courtes etirent leurs
   lignes pour remplir cette hauteur : trois mentions legales se retrouvaient
   espacees de soixante-dix pixels, la colonne des langues respirait le double de
   celle des destinations. Elles se calent donc en haut, a leur pas naturel. */
.ml-footer-colonne > ul {
  display: grid;
  align-content: start;
  gap: 0.55em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ml-fs-sm);
}

/* Le titre de la colonne est le nom de la rubrique, et il mène à sa page :
   c'est le même lien que dans le méga menu. --ml-primary, comme les titres du
   reste du site : 15,1:1 sur ce fond. Il n'a pas de barre violette : la
   colonne a son propre filet, une marque au même endroit ferait doublon.

   Le sélecteur est préfixé par .ml-footer (et non seulement par sa propre
   classe) pour rester plus spécifique que la règle générique .ml-footer a,
   plus bas dans ce fichier : sans ce préfixe, un titre de colonne qui est
   aussi un lien (c'est le cas des rubriques du menu) recevrait la couleur
   grise des liens ordinaires au lieu de celle d'un titre. */
.ml-footer .ml-footer-colonne-titre {
  display: block;
  margin: 0 0 var(--ml-space-sm);
  font-family: var(--ml-font-heading);
  font-size: var(--ml-fs-base);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ml-primary);
  text-decoration: none;
}

/* Les liens : gris atténué au repos, violet de marque au survol et au focus,
   comme les liens du fil d'Ariane ailleurs sur le site (voir main.css). Le
   soulignement n'apparaît qu'au survol, mais la couleur ne suffirait pas
   seule à distinguer un lien d'un texte : ici, tout ce qui est dans la liste
   EST un lien, il n'y a rien à distinguer. */
.ml-footer a {
  color: var(--ml-footer-lien);
  text-decoration: none;
}

.ml-footer-colonne a,
.ml-footer-coordonnees a {
  transition: color 220ms var(--ml-ease);
}

.ml-footer a:hover,
.ml-footer a:focus-visible {
  color: var(--ml-accent);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Le bouton de rendez-vous porte deja sa propre couleur : la regle generique des
   liens du pied de page ne doit pas venir la lui reprendre au survol, ni lui
   poser un soulignement. */
.ml-footer .ml-btn,
.ml-footer .ml-btn:hover,
.ml-footer .ml-btn:focus-visible {
  color: #fff;
  text-decoration: none;
}

/* Le lien de debordement : la rubrique a plus de liens que la colonne n'en
   montre. Il mene a la page de la rubrique, ou ils sont tous. */
.ml-footer-voir-tout {
  font-weight: 600;
}

.ml-footer-voir-tout::after {
  content: '';
  display: inline-block;
  inline-size: 0.4em;
  block-size: 0.4em;
  margin-inline-start: 0.45em;
  border-block-start: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -0.1em;
  transition: translate 220ms var(--ml-ease);
}

.ml-footer-voir-tout:hover::after,
.ml-footer-voir-tout:focus-visible::after {
  translate: 0.25em -0.1em;
}

/* Sur ce fond clair, l'anneau de focus violet par défaut (a:focus-visible
   dans main.css) reste parfaitement visible : cette règle ne touche donc
   plus à sa couleur, seulement à sa forme, un peu plus généreuse et arrondie
   qu'ailleurs sur le site. */
.ml-footer a:focus-visible {
  outline-offset: 3px;
  border-radius: var(--ml-radius-sm);
}

/* ── La barre du bas ──────────────────────────────────────────────────────── */

/* Une bande à part, d'un bord à l'autre de l'écran, un cran plus crème que le
   reste du pied de page (--ml-bg-alt, le même que .ml-section-alt ailleurs
   sur le site) : le pied de page se termine sur une marche, et non sur un
   simple trait perdu dans le conteneur. Sur un blanc presque identique, un
   filet en tête de bande rend cette marche lisible. */
.ml-footer-bas {
  background: var(--ml-bg-alt);
  border-block-start: 1px solid var(--ml-border);
}

/* LE COIN BAS DROIT DE LA BANDE RESTE VIDE, ET C'EST DELIBERE.
   La mascotte y est posee en fixe sur toutes les pages sauf l'accueil
   (.ml-am-mascotte-zone : position fixed, en bas a droite, z-index 200, de 64 a
   108px de large). Arrive au bas de la page, le visiteur la voit flotter par
   dessus ce coin. Tout ce qu'on y mettrait de cliquable, elle le recouvrirait :
   les icones des reseaux y auraient ete a moitie cachees, et impossibles a viser.
   Elles se rangent donc a gauche, a la suite du copyright, et la mascotte flotte
   au dessus de rien.

   Les icones sont plus hautes qu'une ligne de texte : les elements s'alignent sur
   leur milieu, plus sur leur ligne de base, sinon la mention de copyright remonte
   se coller au bord haut de la bande. Le rembourrage se resserre d'autant : la
   hauteur totale de la bande ne bouge pas. */
.ml-footer-bas-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ml-space-xs) var(--ml-space-lg);
  align-items: center;
  justify-content: flex-start;
  padding-block: var(--ml-space-sm);
  font-size: var(--ml-fs-sm);
}

/* Sur un telephone, la mascotte est plus pres de tout : les icones passent sous
   le copyright plutot que de courir vers le bord droit, ou elle les attend. */
@media (max-width: 599px) {
  .ml-footer-bas-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ml-space-sm);
  }
}

/* --ml-text-mid sur la bande du bas (--ml-bg-alt, presque blanc) : 7,2:1
   environ, largement au dessus du seuil. */
.ml-footer-copyright {
  margin: 0;
  color: var(--ml-text-mid);
}

/* ── Les reseaux sociaux ──────────────────────────────────────────────────────

   Ils occupent la droite de la bande du bas, que les mentions legales ont quittee
   pour leur colonne. Deux icones aujourd'hui, quatre au plus : une rangee, pas une
   grille.

   L'icône est un dessin, pas un texte : elle prend la couleur du lien par
   currentColor (--ml-text-mid, largement au dessus des 3:1 exigés d'un
   élément graphique). Au survol elle passe au violet de marque, et une
   pastille lilas très pâle se pose derrière (--ml-accent-soft, la même que
   l'encart de rendez-vous) : la couleur seule ne signalerait rien à qui ne
   la distingue pas.

   La zone cliquable fait 2,5rem de cote, soit 40px : bien au dessus des 24px
   exiges, et les icones sont assez espacees pour qu'on n'en vise jamais une pour
   une autre. Le soulignement general des liens du pied de page est retire ici : il
   soulignerait le cadre du dessin, pas un mot. */
.ml-footer-reseaux {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ml-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Dans la colonne « Le site » (demande de Marino : les icônes y vivent, la
   bande du bas n'est que leur repli), la rangée respire sous les liens. Les
   pastilles gardent leurs styles communs : currentColor suit la couleur de
   la colonne, rien à repeindre. L'invitation au-dessus reprend le ton des
   titres de colonne, un cran plus discret (c'est une invitation, pas une
   rubrique). */
.ml-footer-colonne .ml-footer-reseaux {
  /* Rangée EXPLICITE : la liste d'icônes a un temps été enfant direct de la
     colonne, où la règle de grille .ml-footer-colonne > ul l'empilait en une
     icône par ligne (constaté par Marino). Elle vit désormais dans le dernier
     élément de la liste des liens, hors de portée de cette règle, mais cette
     ceinture garantit la rangée quoi qu'il arrive au balisage. */
  display: flex;
  flex-direction: row;
  margin-block-start: var(--ml-space-xs);
}
.ml-footer-reseaux-titre {
  margin: var(--ml-space-md) 0 0;
  font-family: var(--ml-font-heading);
  font-size: var(--ml-fs-sm);
  font-weight: 700;
  color: var(--ml-primary);
}

.ml-footer-reseau {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--ml-radius-pill);
  /* La pastille ronde est visible AU REPOS (demande de Marino : l'état qui
     n'existait qu'au survol lui plaisait) ; le survol ne fait plus que la
     teinter. */
  background: var(--ml-footer-relief);
  transition: color 220ms var(--ml-ease), background-color 220ms var(--ml-ease);
}

/* Le rayon est repose ici parce que la regle de focus commune du pied de page
   (.ml-footer a:focus-visible) rabat tous les liens sur --ml-radius-sm : le contour
   de focus suit le rayon de l'element, et la pastille ronde se serait retrouvee
   cerclee d'un rectangle aux coins arrondis. */
.ml-footer .ml-footer-reseau:hover,
.ml-footer .ml-footer-reseau:focus-visible {
  color: var(--ml-accent);
  /* Le relief étant désormais l'état de repos, le survol se teinte en lilas
     pour rester distinct. */
  background: var(--ml-accent-soft);
  border-radius: var(--ml-radius-pill);
  text-decoration: none;
}

/* Le dessin herite de la couleur du lien : aucune teinte n'est ecrite dans le
   SVG, il n'y en a donc aucune a tenir a jour a deux endroits. */
.ml-footer-reseau-icone {
  display: block;
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .ml-footer-colonne a,
  .ml-footer-coordonnees a,
  .ml-footer-reseau,
  .ml-footer-voir-tout::after {
    transition: none;
  }
  .ml-footer-voir-tout:hover::after,
  .ml-footer-voir-tout:focus-visible::after {
    translate: 0 -0.1em;
  }
}

/* ── Le logo du client, à la place de son nom écrit ──
   Demande de Marino (juillet 2026). Il vient du réglage d'identité visuelle du
   site, la même source que l'en-tête. Une hauteur plafonnée plutôt qu'une
   largeur : les logos livrés par les clients sont tantôt larges, tantôt
   carrés, et c'est la hauteur qui décide de la place prise dans la colonne. */
.ml-footer-logo {
  margin-block-end: var(--ml-space-sm);
}
.ml-footer-logo-img {
  display: block;
  inline-size: auto;
  max-inline-size: 220px;
  block-size: auto;
  max-block-size: 64px;
  object-fit: contain;
}

/* ── La signature de l'agence, tout au fond ──
   Discrète : c'est la dernière ligne du site, elle ne concurrence ni le
   copyright ni les réseaux. margin-inline-start: auto la pousse au bout de la
   rangée quand il y a la place, et elle repasse simplement à la ligne dessous
   sur un écran étroit (la bande passe alors en colonne, voir plus haut). */
.ml-footer-signature {
  margin: 0;
  margin-inline-start: auto;
  color: var(--ml-text-mid);
  font-size: var(--ml-fs-sm);
}
.ml-footer-signature a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.ml-footer-signature a:hover,
.ml-footer-signature a:focus-visible {
  color: var(--ml-accent-dark);
}