/* Le grand nom du pied (31/10/2026), à l'essai : deux mécaniques reprises de références que Théo a
   retenues. Second jet (Théo, 31/10) : le nom en entier dans la police du logo, le symbole entier ou absent,
   jamais tranché (tpl/partials/logo-nom.php). La boîte du dessin s'arrête à la coupe. */
.foot-nom svg { display: block; width: 100%; height: auto; overflow: hidden; }
.foot-nom path, .foot-nom text { fill: currentColor; }
.foot-nom text { font-family: "Archivo", sans-serif; font-weight: 900; font-size: 100px; letter-spacing: -3px; }
.foot-nom-2l { display: none !important; }
@media (max-width: 699px) { .foot-nom-1l { display: none !important; } .foot-nom-2l { display: block !important; } }
.foot-symbole { display: block; width: 26px; height: auto; margin-bottom: 20px; fill: currentColor; }
.foot-symbole path { fill: currentColor; }

/* ---- M, d'après Mobbin : pied noir, nom sur toute la largeur, coupé à moitié par le bas de l'écran ;
   la page glisse vers le haut comme un rideau et découvre le pied, qui reste collé en bas. ---- */
.foot--m {
  --bg-rgb: 0,0,0;
  --white: #FFFFFF; --dim: #C9C9C9; --faint: #8A8A8A;
  --hair: rgba(255,255,255,.16); --hair-2: rgba(255,255,255,.1);
  --wash-hover-soft: rgba(255,255,255,.06);
  background: #0B0B0B; color: #FFFFFF; border-top: 0;
  position: sticky; bottom: 0; z-index: 1;
  padding-bottom: 0;
}
.foot--m .foot-brand .mark, .foot--m .foot-col h2, .foot--m .foot-brand .body-s { color: var(--white); }
.foot--m .foot-brand .body-s { color: var(--dim); }
.foot--m .foot-col a, .foot--m .foot-legal p, .foot--m .foot-legal a { color: var(--dim); }
.foot--m .foot-col a:hover, .foot--m .foot-legal a:hover { color: var(--white); }
.foot--m .foot-net-link { color: var(--white); }
html:has(.foot--m) main {
  position: relative; z-index: 2; background: #FFFFFF;
  border-radius: 0 0 clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px);
}
.foot-nom--m {
  color: rgba(255,255,255,.1);
  padding: 0 clamp(12px, 1.6vw, 28px);       /* le nom va d'un bord à l'autre ; le bas de l'écran le coupe */
  margin-top: clamp(32px, 6vh, 72px);
}
/* Un pied plus haut que l'écran ne peut pas se découvrir : sur téléphone, il défile normalement. */
@media (max-width: 899px) {
  .foot--m { position: relative; }
  html:has(.foot--m) main { border-radius: 0 0 22px 22px; }
}

/* ---- R, d'après Resend : pied blanc, le nom au-dessus des colonnes, tranché net par le bloc qui suit
   (un filet), une couche au trait qui s'allume autour du curseur. Gardé sur téléphone. ---- */
.foot--r { padding-top: clamp(40px, 7vh, 80px); }
.foot-nom--r { position: relative; color: rgba(0,0,0,.07); margin-inline: calc(50% - 50vw); padding: 0 clamp(12px, 1.6vw, 28px); border-bottom: 1px solid var(--hair); }
.foot-nom--r .foot-nom-trait { position: absolute; top: 0; left: clamp(12px, 1.6vw, 28px); width: calc(100% - 2 * clamp(12px, 1.6vw, 28px)); }
.foot-nom--r .foot-nom-trait path, .foot-nom--r .foot-nom-trait text { fill: none; stroke: rgba(0,0,0,.55); stroke-width: .7; vector-effect: non-scaling-stroke; }
.foot-nom--r .foot-nom-trait {
  opacity: 0; transition: opacity .5s ease;
  -webkit-mask-image: radial-gradient(circle 220px at var(--fx, 50%) var(--fy, 50%), #000 0%, transparent 70%);
          mask-image: radial-gradient(circle 220px at var(--fx, 50%) var(--fy, 50%), #000 0%, transparent 70%);
}
.foot-nom--r.is-lit .foot-nom-trait { opacity: 1; }
.foot--r .foot-grid {
  position: relative; z-index: 2; background: var(--bg, #FFFFFF);
  padding-top: clamp(40px, 6vh, 64px);   /* le filet qui tranche le nom court d'un bord à l'autre, sous .foot-nom--r */
}
@media (prefers-reduced-motion: reduce) { .foot-nom--r .foot-nom-trait { transition: none; } }

/* Le grand logo dit déjà le nom : le titre empilé de la colonne de marque s'efface. */
.foot--m .foot-brand .mark, .foot--r .foot-brand .mark { display: none; }
.foot--m .foot-symbole { color: #FFFFFF; }