/**
 * Pied de page — CDOS 30
 *
 * Quatre colonnes séparées de filets sur le marine de la charte, puis
 * la frise colorée en pleine largeur. Sous 992 px, les colonnes
 * s'empilent et tout s'aligne à gauche.
 */

/*
 * La frise n'est pas posée sous le pied, elle en est le fond : les
 * quatre colonnes s'écrivent par-dessus. Elle est donc sortie du flux
 * et calée en bas, le contenu remontant au-dessus par le plan.
 */
/*
 * Mesures relevées au pixel sur les captures de la production, à 1920,
 * 1280 et 992 px de fenêtre — les trois donnent les mêmes valeurs :
 *
 *   marge latérale ......... 120 px, fixe, sans largeur maximale : le
 *                            pied s'élargit avec la fenêtre, contrairement
 *                            au reste du site qui se borne à 1196
 *   quatre colonnes égales . sans gouttière, séparées par un filet
 *   retrait dans la colonne  20 px de chaque côté du filet
 *   filets ................. 1 px, blancs, du haut des trois colonnes de
 *                            texte jusqu'au bas des mentions légales
 *   décalage des colonnes .. 80 px : le logo commence plus haut que les
 *                            trois titres
 *   réserve haute .......... 40 px avant le logo
 *
 * Les corps viennent de la maquette, convertis : le PDF sort
 * d'InDesign, où la typographie se mesure en points et non en pixels.
 * Les « 12 pt » de la maquette font 16 px, ce qui explique l'écart d'un
 * cinquième que la production affichait et que je prenais pour une
 * dérive. Titres et textes ont donc le même corps, seule la graisse
 * les sépare.
 */

.pied {
  /* 16 px, soit les 12 pt de la maquette. */
  --pied-corps: 1rem;
  --pied-interligne: 1.3;

  --pied-marge: 120px;
  --pied-retrait: 20px;
  --pied-decalage: 5rem;

  position: relative;
  overflow: hidden;
  background-color: var(--couleur-fond-inverse);
  color: var(--couleur-texte-inverse);
}

.pied__colonnes {
  position: relative;
  z-index: 1;
  display: grid;

  /*
   * Sans gouttière : ce sont les retraits de chaque colonne qui
   * écartent les textes du filet, et c'est ainsi que les filets tombent
   * exactement aux quarts de la largeur utile.
   */
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding-inline: var(--pied-marge);

  /*
   * La réserve du bas dégage la bande colorée, qui occupe les 11,25 %
   * inférieurs de la largeur de la frise — mesuré sur le fichier, pas
   * estimé. En pourcentage elle suit la frise quand la fenêtre rétrécit,
   * et se fige avec elle à 1280 px.
   */
  padding-block: 2.5rem max(var(--e-2xl), min(13%, 166px));
}

/*
 * Les filets séparent les colonnes sans en border les extrémités : un
 * filet à gauche de chacune sauf la première, plutôt qu'un à droite de
 * chacune sauf la dernière — la règle se lit mieux dans cet ordre.
 */
.pied__colonne { padding-right: var(--pied-retrait); }

/*
 * Sauf la première : « Politiques de confidentialité » y tient tout
 * juste sur une ligne, et vingt pixels de moins la couperaient en deux.
 * La maquette lui laisse la colonne entière — le filet suivant est
 * assez loin pour que rien ne le touche.
 */
.pied__colonne--identite { padding-right: 0; }

/*
 * Le décalage n'est pas un ornement : c'est lui qui donne au filet son
 * étendue. Une bordure court sur toute la boîte de sa colonne, et les
 * trois colonnes de texte sont étirées à la hauteur de la première ;
 * les descendre de 80 px fait donc commencer les filets sous le sommet
 * du logo, et les laisse finir au bas des mentions légales — ce que
 * montre la maquette.
 */
.pied__colonne + .pied__colonne {
  margin-top: var(--pied-decalage);
  padding-top: var(--e-s);
  padding-left: var(--pied-retrait);
  border-left: 1px solid var(--couleur-texte-inverse);
}

/* ---------------------------------------------------------------
 * Les textes
 * --------------------------------------------------------------- */

.pied__titre {
  margin: 0 0 var(--e-s);
  color: var(--couleur-texte-inverse);
  font-family: var(--police-texte);
  font-size: var(--pied-corps);
  font-weight: var(--graisse-forte);
  line-height: var(--pied-interligne);
  text-transform: uppercase;

  /* « Nous suivre sur les réseaux sociaux » se coupe après « sur »
     dans la maquette, c'est-à-dire en deux lignes équilibrées. */
  text-wrap: balance;
}

/*
 * Titres, textes et liens ont le même corps et le même interligne : la
 * maquette ne les sépare que par la graisse, et par les capitales des
 * liens de bas de page.
 */
.pied__texte,
.pied__coordonnees,
.pied__adresse,
.pied__legal,
.reseaux--pied .reseaux__lien {
  font-size: var(--pied-corps);
  font-weight: var(--graisse-normale);
  line-height: var(--pied-interligne);
}

/* Les libellés des comptes sociaux font 12 px, ici comme dans
   l'en-tête : ils accompagnent un pictogramme, ils ne se lisent pas
   comme du texte courant. */
.reseaux--pied .reseaux__lien { font-size: var(--t-reseaux); }

.pied__texte p { margin: 0 0 var(--e-2xs); }
.pied__texte p:last-child { margin-bottom: 0; }

.pied a {
  color: inherit;
  text-decoration: none;
}

.pied a:hover,
.pied a:focus-visible { text-decoration: underline; }

.pied :focus-visible {
  outline: var(--focus-epaisseur) solid var(--couleur-texte-inverse);
  outline-offset: var(--focus-decalage);
}

/* ---------------------------------------------------------------
 * Identité — logo et mentions
 * --------------------------------------------------------------- */

/*
 * Le logo n'est pas à fleur de colonne : la maquette le rentre d'une
 * trentaine de pixels, là où les mentions légales, elles, touchent le
 * bord. Mesuré sur les trois captures, au même écart.
 */
.pied__logo {
  display: block;
  margin-bottom: var(--e-l);
  margin-left: 30px;
}

.pied__logo img {
  width: 100%;
  max-width: 10rem;
  height: auto;
}

.pied__alerte {
  margin: 0 0 var(--e-2xs);
  font-size: var(--t-petit);
  font-style: italic;
  opacity: 0.8;
}

.pied__legal-liste {
  display: flex;
  flex-direction: column;
  gap: var(--e-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
 * Réseaux sociaux — la rangée reprend celle de l'en-tête, en blanc
 * --------------------------------------------------------------- */

.reseaux--pied {
  justify-content: flex-start;
  gap: var(--e-m);
}

.reseaux--pied .reseaux__lien { color: var(--couleur-texte-inverse); }

/* ---------------------------------------------------------------
 * Coordonnées
 * --------------------------------------------------------------- */

.pied__coordonnees {
  display: flex;
  flex-direction: column;
  gap: var(--e-2xs);
  margin: 0 0 var(--e-m);
  padding: 0;
  list-style: none;
}

.pied__coordonnee {
  display: flex;
  align-items: center;
  gap: var(--e-2xs);
}

.pied__coordonnee .bouton__picto {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
}

.pied__adresse {
  margin: 0;
  font-style: normal;
}

/* ---------------------------------------------------------------
 * La frise, en pleine largeur
 * --------------------------------------------------------------- */

/*
 * Largeur maximale 1280 px : au-delà la frise ne grandit plus, elle se
 * centre. Son dessin est composé pour cette largeur, l'étirer
 * grossirait les traits sans rien montrer de plus.
 */
.pied__frise {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: 1280px;
  height: auto;
}

/* ---------------------------------------------------------------
 * À 992 px et en dessous — tout s'empile, aligné à gauche
 *
 * La marge latérale tombe de 120 à 20 px, et chaque bloc garde son
 * retrait de 20 : les textes s'alignent donc à 40 du bord, tandis que
 * les filets, posés sur la bordure du bloc, courent de 20 à 20 —
 * légèrement plus larges que le texte, comme la maquette.
 * --------------------------------------------------------------- */

@media (max-width: 992px) {

  .pied__colonnes {
    grid-template-columns: 1fr;
    gap: 0;
    padding-inline: var(--pied-retrait);
    padding-block: 2.5rem var(--e-xl);
  }

  .pied__colonne { padding-inline: var(--pied-retrait); }

  /* Les filets verticaux n'ont plus rien à séparer : ils passent à
     l'horizontale, au-dessus de chaque bloc sauf le premier. Le
     décalage du mode large n'a plus lieu d'être. */
  .pied__colonne + .pied__colonne {
    margin-top: 1.25rem;
    padding-top: var(--e-m);
    border-top: 1px solid var(--couleur-texte-inverse);
    border-left: 0;
  }

  .pied__logo { margin-bottom: var(--e-m); }

  /* La frise disparaît : composée pour 1280 px, elle n'a plus de sens
     réduite à la largeur d'un téléphone. */
  .pied__frise { display: none; }
}