/* ================= LE PIED DE PAGE : LES QUATRE COINS =================

   Choisi par Quentin le 23/08/2026 (maquette-pied4.html, variante 3), apres
   etude des pieds reels de dix studios primes — monopo london, Locomotive,
   Wokine, Obys, Hello Monday, Phantom, Resn, Immersive Garden, Basic, Koto
   (captures Edge headless). Le modele direct est OBYS : le pied n'est pas
   une pile de colonnes, c'est UN ECRAN COMPOSE.

   Un PLATEAU noir d'une hauteur d'ecran ; quatre coins habites :

     haut gauche   le logotype — qui ouvre la page la ferme ;
     haut droit    le compte a rebours des saisons — « automne dans 30
                   jours » — le temps qui passe plutot que l'heure qu'il est ;
     bas gauche    les prestations — Webdesign, Photo et video, SEO et
                   GEO — les memes mots que le h1 du bandeau ;
     bas droit     les QUATRE onglets — Projets, Graphen, Contact,
                   Acces client — rien d'autre, regle du site.

   AU CENTRE, l'invitation et le courriel (monopo : « We would love to hear
   from you ») — dans l'axe exact du socle ou la barre de l'assistant
   atterrit. Le vide fait la composition.

   LA DERNIERE LIGNE, sans filet : © et mentions legales a gauche,
   en 11 a 34 % — TOUT EN BAS, regle ferme de Quentin — le SOCLE de la barre
   au centre, « Haut » a droite. Rien en dessous.

   LE SOCLE : la fente aux dimensions de la barre OUVERTE (377 + 8 d'air de
   chaque cote), filet blanc a 21 %, coin 3, posee a 26 du bas de la page :
   26 + 8 d'air = 34 — le bas exact de la barre fixe. En fin de defilement
   la barre (qui n'a jamais bouge) se retrouve DANS le pied, encadree :
   l'atterrissage, sans une ligne d'animation — c'est la page qui vient a
   elle. Elle y est deja passee en craie (l'inversion pixel par pixel de
   styles.css). */

.pied {
  position: relative;
  z-index: 7;
  background-color: #000;
  color: var(--color-text);
}

.pied a {
  color: inherit;
  text-decoration: none;
  transition: opacity 233ms, color 233ms, border-color 233ms;
}
.pied a:hover { opacity: 0.72; }

/* ---- Le plateau : l'ecran compose ---- */
.pied-plateau {
  position: relative;
  /* Le plateau reste assez haut pour préserver la respiration du footer,
     mais le vide noir supérieur est raccourci sans toucher aux éléments. */
  height: calc(100vh - var(--f-233));
  min-height: var(--l-521);
  display: grid;
  place-items: center;
  padding: 0 var(--menu-inset);
  box-sizing: border-box;
}

.pied-coin {
  position: absolute;
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--f-21);
  font-weight: var(--fw-light);
}

/* haut gauche : le logotype, en vrai texte — les memes deux tons que celui
   du panneau (blanc / blanc 55 %, on est sur le noir). */
.pied-logo {
  top: var(--f-34);
  left: var(--menu-inset);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug);
}
.pied-logo span { color: rgba(255, 255, 255, 0.55); }

/* haut droit : le compte a rebours des SAISONS (demande de Quentin,
   24/08/2026 — a la place de l'heure) : « automne / dans 30 jours », ecrit
   par le script du pied (data-saison) d'apres la table des equinoxes et
   solstices. Le pied ne dit plus l'heure qu'il est, il dit le temps qui
   passe. */
.pied-saison {
  top: var(--f-34);
  right: var(--menu-inset);
  text-align: right;
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  font-variant-numeric: tabular-nums;
}

/* bas gauche : les PRESTATIONS — les memes mots que le h1 du bandeau
   (l'adresse et le SIREN sont partis ; le legal du bas suffit au droit). */
.pied-prestations {
  /* ABAISSEES sous le bord du plateau (bottom negatif : le plateau finit a
     89 du bas de page, la derniere ligne vit dessous) — les coins bas
     descendent a 68 du bas de page, au-dessus du legal, pour fermer le
     CARRE avec les coins hauts (demande de Quentin). */
  bottom: calc(-1 * var(--f-21));
  left: var(--menu-inset);
  color: rgba(255, 255, 255, 0.55);
}

/* bas droit : les quatre onglets, en colonne, alignes a droite. */
.pied-onglets {
  bottom: calc(-1 * var(--f-21));
  right: var(--menu-inset);
  display: grid;
  gap: var(--f-5);
  justify-items: end;
  text-align: right;
}

/* le centre : l'invitation, dans l'axe du socle. */
.pied-centre {
  text-align: center;
}
.pied-sur {
  display: block;
  margin: 0 0 var(--f-13);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.pied-invite {
  margin: 0;
  font-size: var(--f-34);
  line-height: var(--l-47);
  font-weight: var(--fw-thin);
  letter-spacing: var(--ls-snug);
}
.pied-courriel {
  display: inline-block;
  margin-top: var(--f-21);
  font-size: var(--f-21);
  line-height: var(--f-34);
  font-weight: var(--fw-light);
  border-bottom: var(--border-hair) solid rgba(255, 255, 255, 0.45);
  padding-bottom: var(--f-3);
}
.pied-courriel:hover { border-color: var(--color-text); opacity: 1; }
/* le telephone, sous le courriel — MEME CORPS que lui (demande de
   Quentin), sans le filet : le courriel reste l'action, le numero
   l'accompagne d'egal a egal. */
.pied-tel {
  display: block;
  margin-top: var(--f-13);
  font-size: var(--f-21);
  line-height: var(--f-34);
  font-weight: var(--fw-light);
  color: var(--color-text);
}
.pied-tel:hover { color: var(--color-text); opacity: 1; }

/* ---- La derniere ligne : legal / socle / haut ---- */
.pied-derniere {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* le legal et « Haut » sont ABAISSES au ras du bas (demande de Quentin) :
     alignes sur le bas du socle, a 26 du bord — plus de centrage vertical,
     et plus de filet au-dessus : la derniere ligne fait partie du plateau. */
  align-items: end;
  gap: var(--f-21);
  padding: var(--f-13) var(--menu-inset) calc(var(--f-34) - var(--f-8));
}

.pied-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--f-5) var(--f-13);
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-wide);
  color: rgba(255, 255, 255, 0.34);
}
.pied-legal a:hover { color: rgba(255, 255, 255, 0.7); opacity: 1; }

.pied-haut-lien {
  justify-self: end;
  font-size: var(--text-caption);
  letter-spacing: var(--ls-wide);
  color: rgba(255, 255, 255, 0.34);
}
.pied-haut-lien:hover { color: rgba(255, 255, 255, 0.7); opacity: 1; }

/* le socle : la fente ou la barre atterrit. aria-hidden, purement visuel. */
.pied-socle {
  width: calc(var(--barre-largeur) + 2 * var(--f-8));
  max-width: calc(100vw - 2 * var(--f-21));
  height: calc(var(--barre-hauteur) + 2 * var(--f-8));
  box-sizing: border-box;
  border-radius: var(--radius-xs);
  box-shadow: inset 0 0 0 var(--border-hair) rgba(255, 255, 255, 0.21);
}

/* ---- Paliers ---- */
@media (max-width: 987px) {
  /* l'ecran compose devient une colonne : les coins se rangent, le centre
     garde son role. */
  .pied-plateau {
    height: auto;
    min-height: 0;
    display: block;
    padding: var(--f-55) var(--menu-inset);
  }
  .pied-coin {
    position: static;
    text-align: center;
    margin: var(--f-21) 0;
  }
  .pied-onglets { justify-items: center; }
  .pied-centre { margin: var(--f-55) 0; }
  .pied-derniere {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: var(--f-13);
  }
  .pied-haut-lien { justify-self: center; }
}