/* Pied de page « rideau » du lab (composant réutilisable, 04/11/2026).
   Mécanisme relevé sur mindsparklemag.com (fiche design/references-sites/mindsparklemag-2026-11-04.md) :
   le pied est collé au bas de l'écran (position: sticky; bottom: 0) DERRIÈRE le contenu, qui passe
   au-dessus (z-index 1, fond opaque, coins bas arrondis) et s'en va comme un rideau qu'on lève.
   Aucun code du site d'origine n'est repris : seul l'effet et ses valeurs ont été relevés.

   Valeurs de projet : uniquement par les variables ci-dessous (la charte du projet fait foi).
   Le collage n'est posé que par pied-rideau.js (attribut data-rideau="actif" sur <html>) :
   sans script, en mouvement réduit, sous le seuil de largeur ou si le pied dépasse 85 % de la
   hauteur de l'écran, le pied défile normalement et rien n'est caché. */

:root {
  --rideau-fond-contenu: #fff;          /* fond opaque du contenu qui recouvre le pied */
  --rideau-rayon: 40px;                 /* coins bas du contenu, qui découvrent le pied */
  --rideau-fond-haut: #131313;
  --rideau-fond-bas: #3a3a3a;           /* à reprendre comme fond du <body> (rebond de fin de page) */
  --rideau-texte: #fff;
  --rideau-texte-discret: #b3b3b3;
  --rideau-marge: clamp(16px, 4.2vw, 64px);
  --rideau-marque-taille: 24vw;         /* repli sans script, à régler selon la longueur du nom */
  --rideau-marque-max: 26svh;           /* le mot ne prend jamais plus que ça en hauteur */
  --rideau-courbe-signe: cubic-bezier(0.65, 0, 0.35, 1);
  --rideau-duree-pas: 1s;               /* un pas de 30° par seconde : 40 % en mouvement, 60 % à l'arrêt */
}

/* 1. Le contenu passe au-dessus du pied. */
.rideau-contenu {
  position: relative;
  z-index: 1;
  background: var(--rideau-fond-contenu);
  border-end-start-radius: var(--rideau-rayon);
  border-end-end-radius: var(--rideau-rayon);
}

/* 2. Le pied remonte sous les coins arrondis pour qu'on y voie toujours le pied, collage actif ou non. */
.pied-rideau {
  position: relative;
  z-index: 0;
  margin-top: calc(-1 * var(--rideau-rayon));
  padding: calc(var(--rideau-rayon) + clamp(32px, 4vw, 64px)) var(--rideau-marge) clamp(12px, 1.6vw, 24px);
  background: linear-gradient(180deg, var(--rideau-fond-haut) 0%, var(--rideau-fond-bas) 100%);
  color: var(--rideau-texte);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 56px);
}

/* 3. Le collage, posé par le script seulement quand il est sûr. */
:root[data-rideau="actif"] .pied-rideau {
  position: sticky;
  bottom: 0;
}

/* Mot géant. Avec data-ajuster, le script calcule la taille qui remplit la largeur
   (plafonnée par --rideau-marque-max) ; sans script, --rideau-marque-taille sert de repli. */
.pied-rideau__marque {
  margin: 0;
  font-size: min(var(--rideau-marque-taille), var(--rideau-marque-max));
  line-height: 0.82;
  letter-spacing: -0.055em;
  font-weight: 600;
  white-space: nowrap;
  margin-inline-start: -0.04em;          /* recalage optique de la première lettre */
}
.pied-rideau__marque[data-ajuster] { width: max-content; }

/* Signe qui tourne par pas de 30°, joué une fois quand le pied se découvre. */
.pied-rideau__signe {
  display: inline-block;
  width: 0.36em;
  height: 0.42em;
  margin-inline-start: 0.05em;
  vertical-align: 0.42em;
  transform-origin: 50% 50%;
}
.pied-rideau__signe svg { display: block; width: 100%; height: 100%; overflow: visible; }

@media (prefers-reduced-motion: no-preference) {
  .pied-rideau__signe.tourne {
    animation: rideau-pas calc(4 * var(--rideau-duree-pas)) var(--rideau-courbe-signe) 1 both;
  }
}
@keyframes rideau-pas {
  0% { transform: rotate(0deg); }
  10%, 25% { transform: rotate(30deg); }
  35%, 50% { transform: rotate(60deg); }
  60%, 75% { transform: rotate(90deg); }
  85%, 100% { transform: rotate(120deg); }
}

/* Colonnes de liens. */
.pied-rideau__colonnes {
  display: flex;
  gap: 32px clamp(40px, 9vw, 160px);
  flex-wrap: wrap;
}
.pied-rideau__colonnes h2 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rideau-texte-discret);
}
.pied-rideau__colonnes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pied-rideau a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  line-height: 1.2;
}
.pied-rideau__colonnes a { font-size: clamp(18px, 1.5vw, 22px); }
.pied-rideau a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) {
  .pied-rideau a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
  .pied-rideau a:hover { text-decoration-line: underline; }
}

/* Ligne du bas. */
.pied-rideau__bas {
  display: flex;
  justify-content: space-between;
  gap: 0 32px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--rideau-texte-discret);
}
.pied-rideau__bas p { margin: 0; display: flex; align-items: center; min-height: 40px; }
.pied-rideau__bas ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0 28px; flex-wrap: wrap; }

@media (max-width: 639px) {
  :root { --rideau-rayon: 20px; }
  .pied-rideau__colonnes { display: grid; grid-template-columns: 1fr 1fr; }
  .pied-rideau__colonnes ul { gap: 4px; }
  .pied-rideau a { min-height: 48px; }
  .pied-rideau__bas { flex-direction: column; }
}