/* LE PIED DE PAGE — feuille COMMUNE aux 33 pages publiques.
   ==========================================================================
   POURQUOI UNE FEUILLE ET NON UN BLOC DANS CHAQUE PAGE. Chacune des 33 pages
   porte son propre <style> ; le pied y était donc recopié 33 fois, et le
   18/08/2026 on a mesuré le résultat : VINGT FORMES DIFFÉRENTES. Le même lien
   s'appelait « Services inclus » ici et « Ce qui est inclus » là, l'ordre
   changeait, l'accueil n'avait pas de lien « Accueil ».

   Et ce n'était pas qu'une affaire de goût :
       25 pages sur 33 sans lien vers les MENTIONS LÉGALES
       30 sans lien vers les CONDITIONS DE VENTE
       31 sans lien vers la CONFIDENTIALITÉ
   dont les 24 pages `vtc-*`, celles qui reçoivent le trafic de Google. Un
   visiteur arrivé par une recherche n'avait aucun moyen d'atteindre les
   mentions — ce que la loi exige de rendre accessible depuis toute page.

   Une feuille unique ne peut pas diverger. Le HTML, lui, est posé par
   `faire-pied.py` : les deux vont ensemble.
   ========================================================================== */
/* ── LE PIED DE PAGE ──────────────────────────────────────────────────────
     Refait le 18/08/2026. L'ancien alignait treize liens du même poids, centrés,
     qui se cassaient là où la ligne débordait : « Mise à disposition » et
     « Stations de ski » se retrouvaient avec « Mentions légales » sans qu'aucun
     groupe ne se distingue. Et 25 pages sur 33 ne portaient aucun lien vers les
     mentions légales — dont les 24 pages qui reçoivent le trafic de Google.

     Trois niveaux, et l'ordre est celui de l'intention : ce qu'on veut qu'il
     fasse, ce qu'il peut vouloir lire, ce que la loi exige. */
  footer{background:var(--creme);border-top:1px solid var(--trait);
         padding:clamp(2.6rem,6vw,4.2rem) var(--marge) clamp(1.8rem,4vw,2.6rem);
         display:flex;flex-direction:column;gap:clamp(1.8rem,4vw,2.8rem);
         align-items:center;text-align:center}

  /* LE BLOC DU HAUT PARTAGE LA LARGEUR DES COLONNES, sinon il flotte : centré
     seul, il commençait 230 px plus à droite qu'elles, et l'œil lisait deux
     compositions au lieu d'une. Même `max-width`, et le logo tient la marge de
     gauche pendant que l'appel tient celle de droite. */
  .pied-agir{display:flex;align-items:center;justify-content:space-between;
             gap:clamp(1.4rem,4vw,3.2rem);flex-wrap:wrap;
             width:100%;max-width:56rem}
  footer .signature{height:clamp(88px,9vw,124px);width:auto;max-width:100%}
  .pied-appel{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start;
              text-align:left}
  @media (max-width:620px){ .pied-appel{align-items:center;text-align:center} }

  /* L'ACTION EST UN BOUTON, PAS UN LIEN DE PLUS. C'est le seul élément du pied
     qui porte un fond : au bas d'une page, celui qui n'a pas encore réservé doit
     trouver où le faire sans lire la liste. */
  .pied-cta{display:inline-flex;align-items:center;gap:.55rem;
            background:var(--nuit);color:var(--creme);
            padding:.85rem 1.5rem;border-radius:999px;
            font-size:var(--t-petit);letter-spacing:.14em;text-transform:uppercase;
            text-decoration:none;transition:opacity .25s}
  .pied-cta:hover{opacity:.85;color:var(--creme)}

  /* LE NUMÉRO EST LA PLUS GROSSE LIGNE DU PIED, et c'est voulu : c'est le premier
     moyen de le joindre, et il était noyé au milieu de douze autres liens. */
  .pied-tel{font-family:'Clash',system-ui,sans-serif;
            font-size:clamp(1.25rem,2.2vw,1.6rem);letter-spacing:.02em;
            color:var(--nuit);text-decoration:none;font-variant-numeric:tabular-nums}
  .pied-tel:hover{color:var(--or-sombre)}
  .pied-dispo{font-size:var(--t-petit);letter-spacing:.14em;text-transform:uppercase;
              color:var(--bleu-3)}

  .pied-colonnes{display:grid;gap:clamp(1.6rem,4vw,3.4rem);
                 grid-template-columns:repeat(3,minmax(0,1fr));
                 width:100%;max-width:56rem;text-align:left}
  @media (max-width:620px){
    .pied-colonnes{grid-template-columns:minmax(0,1fr);text-align:center;gap:1.6rem}
    /* `text-align` NE SUFFIT PAS ICI, et c'est mesuré : le site impose
       `footer nav a{display:inline-flex;min-height:44px}` pour garantir la cible
       tactile de 44 px — une règle juste, qu'on ne casse pas. Mais un lien
       devenu boîte flex étirée ignore `text-align` : son contenu obéit à
       `justify-content`. Résultat mesuré avant correction : le texte allait de
       20 à 130 px dans une boîte de 20 à 370 — collé à gauche sous des titres
       centrés. */
    .pied-colonnes a{justify-content:center}
    .pied-agir{justify-content:center}
  }
  .pied-colonnes > div{display:flex;flex-direction:column;gap:.5rem}
  .pied-colonnes .sur{margin:0 0 .35rem;font-size:var(--t-petit);letter-spacing:.2em;
                      text-transform:uppercase;color:var(--bleu-4)}
  .pied-colonnes a{font-size:var(--t-corps);color:var(--bleu-2);text-decoration:none;
                   letter-spacing:0;text-transform:none;transition:color .2s}
  .pied-colonnes a:hover{color:var(--nuit)}

  /* Les villes voisines d'une page de destination. Elles font vivre ces pages
     dans les résultats de recherche, et n'ont rien à faire dans les colonnes :
     elles changent d'une page à l'autre. */
  .pied-proche{margin:0;display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;
               align-items:baseline;justify-content:center;max-width:56rem}
  .pied-proche .sur{font-size:var(--t-petit);letter-spacing:.2em;text-transform:uppercase;
                    color:var(--bleu-4)}
  .pied-proche a{font-size:var(--t-petit);color:var(--bleu-2);text-decoration:none}
  .pied-proche a:hover{color:var(--nuit)}

  .pied-civil{margin:0;font-size:var(--t-petit);line-height:1.7;color:var(--bleu-3);
              letter-spacing:.04em;max-width:44rem}
  .pied-civil b{color:var(--bleu-2);font-weight:600}