/* =========================================================================
   MUSLIMA WORK — LE PIED DE PAGE, LE MÊME SUR TOUT LE SITE

   C'est le pied de l'accueil, posé partout : le bordeaux de la maison en
   diagonale, le filet de marque en haut, la marque et sa phrase à gauche, les
   trois colonnes de liens, et la barre de mentions en bas.

   Il ne l'était pas. Chacune des trois feuilles publiques l'avait redessiné à
   sa manière — style.css le bordeaux clair au foncé, refonte.css un autre
   bordeaux, public-v2.css un prune presque noir — et d'une page à l'autre le
   pied changeait de couleur, de largeur, de casse et d'espacement. Le même
   composant, trois dessins.

   Cette feuille est chargée en dernier, après les trois, exactement comme
   header.css et pour la même raison. Les règles sont écrites à une
   spécificité suffisante pour l'emporter, sans un seul !important.

   La largeur est celle de l'en-tête et des sections, au pixel près : tout le
   site tombe sur les mêmes lignes verticales.

   Le bloc d'inscription (« Ne rien manquer des prochaines offres ») ne paraît
   qu'en bas de l'accueil, mais il est traité ici avec le reste : c'est le même
   pied, qu'il le porte ou non.
   ========================================================================= */

/* --- Le fond, le décor (21/10/2026) ------------------------------------
   Le prune foncé de la page de maintenance (maintenance.css, « .mnt ») : la
   lueur rose poudré en haut à gauche, puis le dégradé du prune au presque
   noir. Le décor reprend ses fils de lumière et ses losanges nacrés, en
   sourdine, dans les zones libres. */
.footer{
  position:relative;overflow:hidden;isolation:isolate;
  padding:64px 0 0;border-radius:0;
  color:#FFFFFF;
  background:
    radial-gradient(120% 60% at 0% 0%,rgba(233,150,190,.20) 0%,rgba(233,150,190,0) 62%),
    linear-gradient(172deg,#6B1640 0%,#571236 46%,#440F2A 100%);
}
/* Le dernier pixel. La hauteur de la page tombe souvent entre deux pixels
   (5958,5 px…) et le navigateur l'arrondit au-dessus : sur un écran Retina,
   le fond blanc du body paraissait alors en une ligne claire sous le pied
   (iPhone, iPad, navigateur d'Instagram). L'ombre prolonge le prune du bas
   du dégradé de 2 px sous le pied : elle ne change ni la hauteur de la page
   ni la place réservée au geste d'accueil (env(safe-area-inset-bottom)). */
.footer{box-shadow:0 2px 0 0 #440F2A}
/* Le filet clair de l'arête haute — celui des bandeaux prune. */
.footer::before{
  content:"";display:block;position:absolute;top:0;left:0;right:0;height:1px;z-index:0;
  background:linear-gradient(90deg,
    rgba(255,214,235,0) 0%,rgba(255,214,235,.34) 30%,
    rgba(255,255,255,.44) 52%,rgba(255,214,235,.28) 74%,rgba(255,214,235,0) 100%);
}
/* Le halo d'angle des anciennes feuilles (style.css…) n'a plus lieu d'être. */
.footer::after{content:none}
.footer__decor{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* Trois fils d'un pixel, en diagonale, qui s'éteignent avant les bords. */
.footer__fil{
  position:absolute;height:1px;transform-origin:left center;transform:rotate(-7deg);
  background:linear-gradient(90deg,
    rgba(255,214,236,0) 0%,rgba(255,214,236,.26) 38%,
    rgba(255,255,255,.34) 52%,rgba(255,214,236,0) 100%);
}
.footer__fil--a{top:16%;left:-6%;width:52%;opacity:.45}
.footer__fil--b{top:58%;right:-8%;width:44%;opacity:.3}
.footer__fil--c{bottom:22%;left:18%;width:36%;opacity:.22}
/* Les losanges nacrés de la piste de maintenance (« .mnt-piste__los »). */
.footer__los{
  position:absolute;width:9px;height:9px;rotate:45deg;border-radius:1.5px;
  background:linear-gradient(130deg,#FFFFFF 0%,#FFE9F3 46%,#F4B7D3 100%);
  box-shadow:0 0 10px rgba(255,217,236,.5);
  animation:footer-scintille 5.5s ease-in-out infinite;
}
.footer__los--1{top:12%;right:9%}
.footer__los--2{top:46%;right:31%;width:6px;height:6px;opacity:.7;animation-delay:1.8s}
.footer__los--3{bottom:30%;left:4%;width:7px;height:7px;opacity:.6;animation-delay:3.2s}
@keyframes footer-scintille{
  0%,100%{opacity:.55;box-shadow:0 0 8px rgba(255,217,236,.35)}
  50%{opacity:1;box-shadow:0 0 14px rgba(255,236,246,.85)}
}
.footer .wrap{
  position:relative;z-index:1;
  /* Le repère de taille de la signature (« cqw », plus bas). */
  container-type:inline-size;
  /* La grille du site, la même que celle de l'en-tête et des sections : le
     pied ne fait pas exception. */
  width:calc(100% - (2 * var(--grille-marge,32px)));
  max-width:var(--grille-max,1400px);
  margin-inline:auto;padding:0;
}

/* --- Les quatre colonnes -------------------------------------------------
   La marque prend un peu plus de place que les trois listes : sa phrase se lit
   sur deux lignes, pas sur cinq. */
.footer .footer__grid{
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:40px;padding:0 0 48px;
}
/* Le bloc de marque : le monogramme et le nom, aux mêmes tailles partout.
   Les feuilles publiques ne s'accordaient pas dessus — d'une page à l'autre
   le monogramme changeait de diamètre et le nom de corps. */
.footer .footer__brand .brandmark{display:inline-flex;align-items:center;gap:9px;margin:0 0 20px}
.footer .footer__brand .brandmark img,
.footer .footer__brand .marque__mono{width:32px;height:32px;flex:none}
.footer .footer__brand .marque__mot{
  font-size:21px;font-weight:600;line-height:1;letter-spacing:-.035em;color:#FFFFFF;white-space:nowrap;
}
.footer .footer__brand p{
  margin:0;max-width:34ch;
  font-size:15px;line-height:1.65;color:rgba(255,255,255,.82);
}

/* --- Le compte Instagram --------------------------------------------------
   Sous la phrase d'identité, dans la teinte des liens du pied et à leur
   taille. L'icône et la flèche oblique sont en retrait — l'œil lit les mots,
   les signes ne font que dire où l'on va. Au survol, le framboise clair de la
   marque : la même couleur que les liens de la carte prune, jamais un aplat.
   La flèche avance d'un pixel et demi, comme les liens du pied glissent de
   trois. */
.footer .footer__insta{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:18px;
  font-size:14px;line-height:1.45;color:rgba(255,255,255,.82);
  text-decoration:none;
  transition:color 200ms cubic-bezier(.22,.68,.28,1);
}
.footer .footer__insta svg{flex:none;color:rgba(255,255,255,.5);
  transition:color 200ms cubic-bezier(.22,.68,.28,1),transform 200ms cubic-bezier(.22,.68,.28,1)}
@media (hover:hover){
.footer .footer__insta:hover{color:#FFFFFF}
}
@media (hover:hover){
.footer .footer__insta:hover svg{color:#F6C2DC}
}
@media (hover:hover){
.footer .footer__insta:hover svg:last-child{transform:translate(1.5px,-1.5px)}
}
.footer .footer__insta:focus-visible{outline:2px solid #F0B3D2;outline-offset:4px;border-radius:5px}
@media (max-width:1024px){
  /* La cible reprend la hauteur des liens du pied sur petit écran. */
  .footer .footer__insta{padding-block:10px;margin-top:10px}
}
@media (prefers-reduced-motion:reduce){
  .footer .footer__insta,.footer .footer__insta svg{transition:none}
  .footer .footer__insta:hover svg:last-child{transform:none}
}

/* Les intitulés de colonne : petites capitales espacées. C'est ce qui les
   distingue des liens sans les mettre en avant. */
.footer .footer__t{
  margin:0 0 16px;
  font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
/* `display:block` est posé exprès : une des feuilles précédentes met ces
   listes en grille avec une gouttière, laquelle s'ajoutait à la marge des
   éléments — les liens s'écartaient d'une page à l'autre. */
.footer ul{display:block;list-style:none;margin:0;padding:0}
.footer li{margin:0}
.footer li + li{margin-top:12px}
.footer li a{
  display:inline-block;
  font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.84);text-decoration:none;
  transition:color 200ms cubic-bezier(.22,.68,.28,1),transform 200ms cubic-bezier(.22,.68,.28,1);
}
@media (hover:hover){
.footer li a:hover{color:#FFFFFF;text-decoration:none;transform:translateX(3px)}
}

/* « Gérer mes cookies » : un bouton, parce qu'il ouvre un panneau au lieu de
   mener à une page — et un lien à l'œil, parce qu'il est dans la liste des
   liens juridiques et n'a aucune raison d'y détonner. Il ne s'affiche que si
   le script tourne : sans lui, il n'ouvrirait rien. Voir
   components/Consentement.tsx et lib/consentement.ts. */
.footer li .footer__cookies{
  display:inline-block;
  padding:0;border:0;background:none;cursor:pointer;
  font-family:inherit;text-align:left;
  font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.84);
  transition:color 200ms cubic-bezier(.22,.68,.28,1),transform 200ms cubic-bezier(.22,.68,.28,1);
}
@media (hover:hover){
.footer li .footer__cookies:hover{color:#FFFFFF;transform:translateX(3px)}
}
.footer li .footer__cookies:focus-visible{outline:2px solid #F0B3D2;outline-offset:3px;border-radius:3px}
@media (max-width:1024px){
  .footer li .footer__cookies{padding-block:10px}
}
/* Sur un téléphone, les liens du pied faisaient vingt et un pixels de haut et
   se suivaient de douze : trois colonnes de cibles trop fines et trop
   proches. Le rembourrage passe dans le lien lui-même — la cible atteint
   trente-neuf pixels — et l'écart entre deux entrées se reprend d'autant : le
   pied ne s'allonge que de six pixels par lien. */
@media (max-width:1024px){
  .footer li a{padding-block:10px}
  .footer li + li{margin-top:0}
}
@media (max-width:760px){
  .footer li a{font-size:15.5px}
}

/* --- La barre de mentions ------------------------------------------------- */
.footer .footer__bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:24px 0;border-top:1px solid rgba(255,255,255,.14);
  font-size:14px;color:rgba(255,255,255,.66);
}

/* --- L'inscription, en haut du pied de l'accueil --------------------------
   Le texte à gauche, le formulaire à droite, séparés du reste par un filet. */
.footer .footer__news{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px;align-items:center;
  padding:0 0 48px;margin-bottom:48px;border-bottom:1px solid rgba(255,255,255,.14);
}
.footer .footer__news-txt h2{
  margin:0;color:#FFFFFF;
  font-size:clamp(24px,2.6vw,30px);line-height:1.2;letter-spacing:-.02em;max-width:18ch;
}
.footer .footer__news-txt p{
  margin:12px 0 0;max-width:42ch;
  font-size:15.5px;line-height:1.65;color:rgba(255,255,255,.76);
}
.footer .footer__news-form{display:grid;gap:12px}
.footer .footer__news-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:12px}
.footer .footer__news-form .input{
  height:50px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.20);border-radius:6px;
  color:#FFFFFF;padding:0 16px;
}
.footer .footer__news-form .input::placeholder{color:rgba(255,255,255,.55)}
.footer .footer__news-form .input:focus{
  outline:none;border-color:#C92D78;background:rgba(255,255,255,.10);box-shadow:none;
}
.footer .footer__news-form .btn--primary{
  background:#C92D78;border-color:#C92D78;box-shadow:none;
}
@media (hover:hover){
.footer .footer__news-form .btn--primary:hover{background:#D83584;border-color:#D83584;transform:none}
}
.footer .footer__news-legal{
  margin:2px 0 0;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.55);
}
.footer .footer__news-legal a{color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:3px}

/* =========================================================================
   PETITS ÉCRANS

   Les colonnes se replient en deux, puis en une. La barre de mentions passe
   sous elle-même plutôt que d'écraser ses deux textes l'un contre l'autre.
   ========================================================================= */
@media (max-width:980px){
  .footer .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .footer .footer__news{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (max-width:760px){
  .footer{padding:48px 0 0}
  .footer .footer__grid{grid-template-columns:minmax(0,1fr);gap:32px;padding-bottom:36px}
  .footer .footer__news{padding-bottom:36px;margin-bottom:36px}
  .footer .footer__news-row{grid-template-columns:minmax(0,1fr)}
  .footer .footer__bar{justify-content:flex-start;gap:8px;font-size:13px}
  /* De l'air sous la signature, et rien de plus.

     Il y avait ici cent vingt-huit pixels de rembourrage, et ce n'était pas
     une respiration : c'était un dégagement. La barre de lecture était alors
     une capsule posée en bas de l'écran, et la signature se retrouvait dessous
     en fin de page — on ne la lisait plus. La barre est remontée tout en haut
     de la fenêtre (voir barre-lecture.css) : elle ne recouvre plus rien, et le
     dégagement n'a plus d'objet. Ce qui reste est l'espacement ordinaire d'une
     fin de page.

     Le repli de l'écran des iPhone s'y ajoute : sur un modèle sans bouton, la
     zone sûre vient en plus au lieu de ronger la marge.

     Le sélecteur porte « body » parce que accueil.css repose la même propriété
     sous « body .footer .footer__bar » : à spécificité égale, c'est l'ordre de
     chargement qui tranche, et cette feuille passe en dernier. */
  body .footer .footer__bar{
    padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));
  }
}

/* =========================================================================
   LA SIGNATURE (21/10/2026)
   « muslima work » en grand, dans la typographie de la marque (Poppins 600,
   interlettrage serré — voir « .header .marque__mot »). Sa taille suit la
   largeur du conteneur : elle remplit la ligne sans jamais la dépasser, sur
   ordinateur comme sur téléphone. Un reflet nacré la traverse lentement.
   ========================================================================= */
.footer__signature{
  margin:8px 0 0;padding:0 0 .06em;
  /* La largeur du conteneur (celle du header) divisée par la longueur du mot
     à cette graisse : la ligne se remplit sans déborder. « cqw » mesure le
     conteneur lui-même — « vw » comptait la barre de défilement. */
  font-size:calc(100cqw / 6.9);
  font-weight:600;line-height:.9;letter-spacing:-.045em;white-space:nowrap;
  text-align:center;user-select:none;
  color:rgba(255,255,255,.14);
  background:linear-gradient(100deg,
    rgba(255,255,255,.12) 0%,rgba(255,255,255,.12) 40%,
    rgba(255,240,248,.5) 50%,rgba(255,255,255,.12) 60%,rgba(255,255,255,.12) 100%);
  background-size:250% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:footer-reflet 9s ease-in-out 1.5s infinite;
}
@keyframes footer-reflet{
  0%,55%{background-position:100% 0}
  100%{background-position:-50% 0}
}

@media (max-width:760px){
  .footer__fil--a{width:80%}
  /* Sur téléphone, les colonnes occupent toute la largeur : seul le losange
     du coin haut reste, là où il n'y a pas de texte. */
  .footer__fil--b,.footer__fil--c,.footer__los--2,.footer__los--3{display:none}
  /* Dans l'angle vide, à droite du logo — et non sur la phrase de marque. */
  .footer__los--1{top:30px;right:18px}
  .footer__signature{margin-top:4px}
}

@media (prefers-reduced-motion:reduce){
  .footer__los,.footer__signature{animation:none}
}

/* =========================================================================
   LE PIED SUR TÉLÉPHONE (21/10/2026)
   « Navigation » et « Informations légales » se replient en deux accordéons
   fermés (des <details>, natifs au clavier et aux lecteurs d'écran) ; le
   contact, Instagram et « Gérer mes cookies » restent visibles. Sur
   ordinateur, ce bloc est masqué et les colonnes restent ouvertes.
   ========================================================================= */
.footer .footer__mobile{display:none}

@media (max-width:760px){
  /* Les colonnes de liens et de contact cèdent la place au bloc mobile ; le
     lien Instagram de la marque passe dans le bloc direct, avec son nom. */
  .footer .footer__col,
  .footer .footer__brand .footer__insta{display:none}
  .footer .footer__grid{gap:26px}
  .footer .footer__mobile{display:block}

  /* --- Les deux accordéons : un filet fin dessus et dessous, une zone de
     toucher de 52 px, un chevron qui se retourne à l'ouverture. */
  .footer .footer__acc{border-top:1px solid rgba(255,255,255,.14)}
  .footer .footer__acc:last-of-type{border-bottom:1px solid rgba(255,255,255,.14)}
  .footer .footer__acc summary{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:52px;padding:0 2px;cursor:pointer;list-style:none;
    font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
    color:rgba(255,255,255,.82);
  }
  .footer .footer__acc summary::-webkit-details-marker{display:none}
  .footer .footer__acc summary::after{
    content:"";flex:none;width:8px;height:8px;margin-top:-4px;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    rotate:45deg;transition:rotate 200ms ease,margin 200ms ease;
  }
  .footer .footer__acc[open] summary::after{rotate:-135deg;margin-top:4px}
  .footer .footer__acc summary:focus-visible{
    outline:2px solid #F0B3D2;outline-offset:2px;border-radius:4px;
  }
  .footer .footer__acc ul{padding:0 0 12px}
  .footer .footer__acc li a{display:block;padding-block:11px}

  /* --- Le bloc direct : contact, Instagram, cookies, toujours visibles. */
  .footer .footer__direct{display:grid;justify-items:start;gap:2px;margin-top:20px}
  .footer .footer__direct a,
  .footer .footer__direct .footer__direct-cookies{
    display:inline-flex;align-items:center;gap:9px;min-height:44px;
    font-size:15.5px;line-height:1.4;color:rgba(255,255,255,.86);text-decoration:none;
  }
  .footer .footer__direct a:hover{color:#FFFFFF}
  .footer .footer__direct a:focus-visible{outline:2px solid #F0B3D2;outline-offset:3px;border-radius:4px}
  .footer .footer__direct-insta svg{flex:none;width:18px;height:18px;color:#F6C2DC}
  .footer .footer__direct .footer__direct-cookies{
    padding:0;border:0;background:none;cursor:pointer;font-family:inherit;text-align:left;
  }
  .footer .footer__direct .footer__direct-cookies[hidden]{display:none}
  .footer .footer__direct .footer__direct-cookies:focus-visible{
    outline:2px solid #F0B3D2;outline-offset:3px;border-radius:4px;
  }

  /* --- La place de l'assistant flottant : il est fixé à 62 px du bas et
     mesure 52 px. Le pied réserve cette hauteur sous la signature, qui ne
     passe donc jamais dessous. */
  .footer:not(.footer--reduit){
    padding-bottom:calc(126px + env(safe-area-inset-bottom,0px));
  }
}

@media (prefers-reduced-motion:reduce){
  .footer .footer__acc summary::after{transition:none}
}

/* =========================================================================
   LE BAS DU PIED SUR TÉLÉPHONE (21/10/2026)
   La signature devient un décor du fond prune, comme le grand mot de la page
   de maintenance (« .mnt-decor__mot ») : « muslima » puis « work » sur deux
   lignes, très grands, presque transparents, et le même reflet qui traverse
   les lettres. Alignés à gauche : « work », plus court, laisse le coin droit
   à l'assistant flottant (fixé à 62 px du bas, 46 px de haut), et « muslima »
   s'arrête au-dessus de lui. Les liens et le crédit restent au-dessus, sans
   chevauchement. Sur ordinateur, la signature reste sur une ligne.
   ========================================================================= */
@media (max-width:760px){
  .footer__signature{
    /* Le dégradé du texte n'est peint que dans la boîte de l'élément ; avec
       une ligne aussi serrée (.84), le point du « i » et le haut du « l »
       dépassaient au-dessus et n'étaient pas peints. Le rembourrage du haut
       les fait entrer dans la boîte ; la marge reste celle qui sépare le
       crédit des lettres. */
    margin-top:0;padding-top:.2em;
    /* « muslima » remplit la largeur du conteneur (« cqw »), sans déborder. */
    font-size:calc(100cqw / 4.25);
    line-height:.84;letter-spacing:-.05em;
    text-align:left;white-space:normal;
    background:linear-gradient(100deg,
      rgba(255,240,248,.10) 0%,rgba(255,240,248,.10) 40%,
      rgba(255,244,250,.52) 50%,rgba(255,240,248,.10) 60%,rgba(255,240,248,.10) 100%);
    background-size:250% 100%;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .footer__signature span{display:block;white-space:nowrap}
  /* Le décor descend jusqu'au bas ; « muslima » reste au-dessus de
     l'assistant, « work » passe à sa gauche. */
  .footer:not(.footer--reduit){
    padding-bottom:calc(46px + env(safe-area-inset-bottom,0px));
  }
  /* Le crédit, juste au-dessus du grand logo : plus de vide entre eux. */
  body .footer .footer__bar{padding-bottom:4px}
  /* Un seul filet sous les accordéons : celui du dernier. La barre du crédit
     n'en ajoute pas un second, et le vide entre les deux disparaît. */
  body .footer .footer__grid{padding-bottom:0}
  body .footer .footer__bar{border-top:0;padding-top:22px}

  /* --- Les trois accordéons : mêmes lignes partout. « Gérer mes cookies »
     est un bouton (il rouvre les préférences) mais se lit comme un lien de
     la liste ; Instagram garde son icône, alignée sur le texte. */
  .footer .footer__acc li .footer__acc-bouton{
    display:block;width:100%;padding-block:11px;
    font-size:15.5px;line-height:1.45;font-weight:400;color:rgba(255,255,255,.84);
  }
  .footer .footer__acc li .footer__acc-bouton:hover{transform:none}
  /* Instagram, sous les accordéons. */
  .footer .footer__suivre{
    display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:14px;
    font-size:15.5px;line-height:1.45;font-weight:500;color:#FFFFFF;text-decoration:none;
  }
  .footer .footer__suivre svg{flex:none;width:20px;height:20px;color:#F6C2DC}
  .footer .footer__suivre:focus-visible{outline:2px solid #F0B3D2;outline-offset:3px;border-radius:4px}
}

/* Tablette et ordinateur : la signature reste sur une ligne, mais s'arrête
   avant le coin droit, où se pose l'assistant flottant — il la recouvrait en
   fin de page (21/10/2026). */
@media (min-width:761px){
  .footer__signature{font-size:calc((100cqw - 60px) / 6.9);text-align:left;padding-top:.14em;margin-top:0}
}