/* =========================================================================
   MUSLIMA WORK — LE CONSENTEMENT AUX COOKIES

   Une carte, en bas à gauche. Pas un bandeau, et pas une fenêtre : trois cent
   quarante-quatre pixels de large, quatre phrases en tout, et une masse qui ne
   dispute rien au contenu de la page. Tout y est plus fin qu'ailleurs sur le
   site — le texte à 12,5 px, les boutons à 36 px de haut, les liens à 12 —
   parce qu'une demande de consentement doit se lire et se répondre, non
   s'imposer.

   Elle est sombre, et de la famille du pied de page : prune profond au départ,
   framboise assourdi à l'arrivée. Le dégradé ne se voit pas — trois tons
   voisins, sur cent dix-huit degrés — il empêche seulement le fond d'être
   plat. Rien de noir : le prune de la marque descend, il ne s'éteint pas.

   Le texte est ivoire plutôt que blanc pur. Sur un fond chaud, le blanc franc
   claque ; le blanc cassé du site (#FFFBFD) se pose.

   Un filet d'un pixel, lavande à peine, la cerne. Une seule ombre, large et
   basse, la décolle — c'est tout ce qu'il faut : le contraste du fond fait le
   reste.

   Aucun biscuit, aucun cadenas. Le signe en tête est le losange nacré du
   site, celui de la barre des deux panneaux et du déclencheur de l'assistante,
   repris au pixel — même dégradé, même filet, même lueur.

   « Tout accepter » et « Tout refuser » ont la même taille, la même hauteur,
   la même graisse et la même place : seul le remplissage les distingue. Aucun
   n'est caché, aucun n'est repoussé d'un écran.

   Toutes les classes sont préfixées « cons- » : rien ici ne peut déteindre sur
   le reste du site. Voir components/Consentement.tsx et lib/consentement.ts.

   Sommaire
     0. La palette et le cadre commun
     1. La tête : capsule, losange, titre
     2. Le texte et le pied de carte
     3. Les boutons
     4. Le panneau de préférences et ses interrupteurs
     5. Petits écrans
     6. Mouvement réduit
   ========================================================================= */

/* =========================================================================
   0. LA PALETTE ET LE CADRE COMMUN
   ========================================================================= */
.cons{
  /* --- La palette de la carte, en un seul endroit ------------------------
     Les trois tons du fond, l'ivoire du texte, le framboise de la marque.
     Rien n'est inventé : ce sont les couleurs de refonte.css, assombries pour
     ce qui est fond, reprises telles quelles pour ce qui est accent. */
  --c-fond-1:#2E1220;    /* prune profond, le départ du dégradé */
  --c-fond-2:#45122F;    /* le milieu */
  --c-fond-3:#5A1339;    /* framboise assourdi, l'arrivée */
  --c-filet:rgba(240,230,255,.13);
  --c-ivoire:#FFFBFD;    /* les titres, le texte des boutons */
  --c-texte:rgba(255,251,253,.76);
  --c-gris:rgba(255,251,253,.62);
  --c-framboise:#C92D78; /* le bouton principal, l'interrupteur allumé */
  --c-focus:#F0B3D2;     /* l'anneau de focus, celui de l'assistante */

  background:linear-gradient(118deg,
    var(--c-fond-1) 0%,var(--c-fond-2) 56%,var(--c-fond-3) 100%);
  border:1px solid var(--c-filet);
  border-radius:14px;
  color:var(--c-texte);
  /* Deux ombres, basses et très diluées : la carte flotte, elle n'est pas
     posée sur un bloc d'ombre. */
  box-shadow:0 14px 34px -16px rgba(40,14,28,.46),
             0 3px 10px -6px rgba(40,14,28,.28);
}

/* --- La carte ------------------------------------------------------------ */
.cons--carte{
  position:fixed;left:24px;bottom:24px;z-index:500;
  width:356px;max-width:calc(100vw - 48px);
  padding:15px 17px 13px;
  /* Elle monte de dix pixels en se révélant, sur une courbe qui décélère.
     Rien ne rebondit, et rien ne bouge une fois posée. */
  animation:cons-entree 320ms cubic-bezier(.22,.61,.36,1) both;
}
/* Le focus est porté sur la carte à son apparition : sans anneau autour de la
   carte entière, qui ne dirait rien à personne. Ce sont ses boutons qui
   montrent le focus, et eux seuls. */
.cons--carte:focus{outline:none}

/* Le choix est fait : elle redescend et s'efface. */
.cons--sortie{animation:cons-sortie 220ms ease-in both}

@keyframes cons-entree{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes cons-sortie{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(6px)}
}

/* =========================================================================
   1. LA TÊTE : CAPSULE, LOSANGE, TITRE
   ========================================================================= */
.cons__tete{display:flex;align-items:center;gap:8px;margin-bottom:8px}
/* La croix occupe le coin : le titre s'arrête avant elle. Vingt pixels
   suffisent — c'est la largeur de la croix, elle est collée au bord. */
.cons--carte .cons__tete{padding-right:20px}

/* La capsule : un carré translucide, à peine dessiné, qui tient le losange.
   Le même rapport que les porte-icônes du site — l'éclat occupe un peu moins
   de la moitié de la capsule. */
.cons__capsule{
  flex:none;display:grid;place-items:center;
  width:20px;height:20px;border-radius:6px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(240,230,255,.18);
  /* La micro-lueur, une fois, à l'arrivée — puis plus rien. Une carte de
     consentement qui scintille en permanence devient une publicité. */
  animation:cons-lueur 1400ms ease-out 240ms both;
}
/* Le losange nacré de la barre des deux panneaux, repris tel quel : dix
   pixels, le même dégradé, le même filet, la même lueur. */
.cons__losange{
  width:8px;height:8px;
  rotate:45deg;border-radius:1.5px;
  background:linear-gradient(135deg,#FFFFFF 0%,#FFF6FA 60%,#FDEAF3 100%);
  border:1px solid rgba(233,150,190,.72);
  box-shadow:0 0 5px rgba(255,255,255,.58),0 0 8px rgba(240,179,210,.58);
}
@keyframes cons-lueur{
  0%{box-shadow:0 0 0 0 rgba(240,179,210,0)}
  40%{box-shadow:0 0 11px 2px rgba(240,179,210,.28)}
  100%{box-shadow:0 0 0 0 rgba(240,179,210,0)}
}

.cons__titre{
  margin:0;font-size:14.5px;font-weight:600;line-height:1.3;
  letter-spacing:-.012em;color:var(--c-ivoire);
}
/* Le panneau, lui, a la place d'un titre un peu plus posé. */
.cons--panneau .cons__titre{font-size:16.5px}

/* =========================================================================
   2. LE TEXTE ET LE PIED DE CARTE
   ========================================================================= */
/* L'ivoire à 76 %, celui des paragraphes du pied de page : lisible sans
   crier, et jamais gris. Deux paragraphes, séparés d'une demi-ligne : l'écart
   suffit à distinguer ce qu'on fait de ce qu'on laisse faire. */
.cons__dire{margin:0 0 11px}
.cons__txt{
  margin:0 0 6px;
  font-size:12.5px;line-height:1.52;
  color:var(--c-texte);
}
.cons__txt:last-child{margin-bottom:0}

/* Les deux lignes de liens, sous les boutons. Aucun filet : l'espace sépare,
   et il pèse moins qu'un trait.

   L'interligne est posé ici : un paragraphe hérite sinon de celui du site —
   1,6 sur seize pixels — et chacune de ces lignes pesait vingt-six pixels
   pour un lien qui en fait douze. */
.cons__ligne{margin:10px 0 0;line-height:1.4}
.cons__ligne--fin{margin-top:4px}

/* L'introduction du panneau, et le texte du panneau en général : il a la
   place d'une taille de lecture ordinaire. */
.cons--panneau .cons__txt{font-size:13px;line-height:1.6}
.cons__txt--intro{margin-bottom:16px}

.cons__pied{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.12);
}
/* « En savoir plus » et « Personnaliser » : deux actions tertiaires, de même
   poids. Soulignées toutes les deux — sur un fond sombre, la couleur seule ne
   suffit pas à désigner ce qui se clique. */
.cons__savoir,.cons__lien{
  font-size:12px;line-height:1.4;
  color:rgba(255,251,253,.82);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.34);
  background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;
  transition:color 160ms ease,text-decoration-color 160ms ease;
}
/* « En savoir plus » passe après « Personnaliser » : plus petit, plus sourd.
   Il reste au-dessus du seuil de contraste, il n'est pas effacé — seulement
   au dernier rang. */
.cons--carte .cons__savoir{font-size:11.5px;color:rgba(255,251,253,.66)}

.cons__savoir:hover,.cons__lien:hover{
  color:var(--c-ivoire);text-decoration-color:rgba(255,255,255,.74);
}
.cons__savoir:focus-visible,.cons__lien:focus-visible{
  outline:2px solid var(--c-focus);outline-offset:3px;border-radius:3px;
}
/* Au doigt, ce qui se clique fait quarante-quatre pixels de haut. Le
   rembourrage est repris en marge négative : le bloc ne grandit pas.

   Du rembourrage et non une hauteur minimale : le lien de la carte tient sur
   deux lignes en petite largeur, et une boîte en ligne de hauteur imposée
   l'aurait tronqué. */
@media (max-width:1024px){
  .cons__savoir,.cons__lien{
    display:inline-block;padding-block:11px;margin-block:-11px;
  }
}

/* =========================================================================
   3. LES BOUTONS
   ========================================================================= */
/* Deux colonnes égales. Ni l'ordre, ni la taille, ni la graisse ne favorisent
   l'acceptation : seul le remplissage change. */
.cons__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Trente-six pixels de haut, treize de corps : un bouton, pas un pavé. Au
   doigt, la cible est complétée par une zone transparente — voir plus bas. */
.cons__btn{
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;
  min-height:36px;padding:0 12px;
  font-family:inherit;font-size:13px;font-weight:600;line-height:1.2;
  text-align:center;
  border-radius:9px;border:1px solid transparent;
  cursor:pointer;
  transition:background 180ms ease,border-color 180ms ease,
             box-shadow 180ms ease,transform 180ms ease;
}
.cons__btn:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
/* Le mouvement d'un pixel au survol, celui de tous les boutons du site. */
.cons__btn:hover{transform:translateY(-1px)}
.cons__btn:active{transform:none}
/* Le bouton reste fin à l'œil ; ce qu'on peut toucher ne l'est pas. Une zone
   transparente de quarante-quatre pixels est centrée dessus, sans que la
   carte grandisse d'un pixel. */
@media (max-width:1024px){
  .cons__btn::before{
    content:"";position:absolute;top:50%;left:0;right:0;
    height:44px;transform:translateY(-50%);
  }
}
/* Le panneau garde des boutons un peu plus assis : ils concluent un réglage,
   ils ne sont pas posés sur une page. */
.cons--panneau .cons__btn{min-height:42px;font-size:13.5px}

/* Le framboise de la marque, plein. Au survol il s'éclaircit d'un ton : sur
   un fond sombre, c'est ce qui répond. */
.cons__btn--plein{
  background:var(--c-framboise);border-color:var(--c-framboise);color:#FFFFFF;
  box-shadow:0 2px 10px -3px rgba(201,45,120,.50);
}
.cons__btn--plein:hover{
  background:#D83584;border-color:#D83584;
  box-shadow:0 4px 14px -4px rgba(201,45,120,.58);
}

/* Blanc translucide, cerné : le même bouton, sans le remplissage. */
.cons__btn--clair{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.36);
  color:var(--c-ivoire);
}
.cons__btn--clair:hover{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.54);
}

/* --- La fermeture, en haut à droite --------------------------------------
   Discrète : on la voit quand on la cherche. Elle vaut refus — voir
   components/Consentement.tsx — et non simple disparition.

   Vingt-deux pixels à l'œil, quarante à toucher : le carré transparent est
   centré dessus et ne déplace rien. */
.cons__x{
  position:absolute;top:11px;right:11px;
  width:22px;height:22px;
  display:grid;place-items:center;
  padding:0;border:0;border-radius:6px;cursor:pointer;
  background:transparent;color:rgba(255,251,253,.52);
  transition:background 160ms ease,color 160ms ease;
}
.cons__x::before{
  content:"";position:absolute;top:50%;left:50%;
  width:40px;height:40px;transform:translate(-50%,-50%);
}
.cons__x:hover{background:rgba(255,255,255,.10);color:var(--c-ivoire)}
.cons__x:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}

/* =========================================================================
   4. LE PANNEAU DE PRÉFÉRENCES ET SES INTERRUPTEURS
   ========================================================================= */
/* Le voile : le prune de la marque, très dilué. Il assombrit la page sans la
   masquer — on doit continuer de voir où l'on est. */
.cons-fond{
  position:fixed;inset:0;z-index:520;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(36,13,24,.54);
  animation:cons-voile 220ms ease-out both;
}
@keyframes cons-voile{from{opacity:0}to{opacity:1}}

/* Le panneau garde le fond de la carte : c'est la même conversation, il n'y
   a pas de raison qu'elle change de décor en chemin. Deux halos très dilués
   creusent ses coins — le même procédé que le pied de page. */
.cons--panneau{
  width:440px;max-width:100%;max-height:calc(100vh - 48px);
  overflow-y:auto;
  padding:20px 22px 16px;
  background:
    radial-gradient(circle at 92% 4%,rgba(201,45,120,.20),transparent 46%),
    radial-gradient(circle at 4% 96%,rgba(160,120,200,.12),transparent 42%),
    linear-gradient(118deg,var(--c-fond-1) 0%,var(--c-fond-2) 56%,var(--c-fond-3) 100%);
  box-shadow:0 26px 64px -24px rgba(30,10,20,.62);
  animation:cons-entree 300ms cubic-bezier(.22,.61,.36,1) both;
}

/* --- Les catégories ------------------------------------------------------ */
.cons__cats{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:2px}
.cons__cat{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:13px 0;
  border-top:1px solid rgba(255,255,255,.12);
}
.cons__cat:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.cons__cat-dire{min-width:0}
.cons__cat-nom{margin:0 0 3px;font-size:14px;font-weight:600;color:var(--c-ivoire)}
.cons__cat-p{margin:0;font-size:12px;line-height:1.55;color:var(--c-texte)}

/* --- L'interrupteur ------------------------------------------------------
   Une vraie case à cocher, rendue en interrupteur : c'est elle qui porte le
   focus, l'état et l'annonce vocale. La piste et le bouton ne sont que du
   dessin — d'où l'aria-hidden sur la piste.

   Aucune largeur n'est imposée à la colonne : elle prend celle de son
   libellé. Fixée, « Toujours actifs » en débordait et venait se poser sur la
   phrase de la catégorie. */
.cons__bascule{
  flex:none;position:relative;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
}
.cons__bascule input{
  position:absolute;top:0;right:0;
  width:46px;height:26px;margin:0;
  opacity:0;cursor:pointer;z-index:2;
}
.cons__piste{
  display:block;width:46px;height:26px;border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.26);
  transition:background 200ms ease,border-color 200ms ease;
}
.cons__piste::after{
  content:"";display:block;
  width:18px;height:18px;margin:3px;border-radius:50%;
  background:#FFFFFF;
  box-shadow:0 1px 3px rgba(30,10,20,.35);
  transition:transform 200ms cubic-bezier(.22,.61,.36,1);
}
.cons__bascule input:checked ~ .cons__piste{
  background:var(--c-framboise);border-color:var(--c-framboise);
}
.cons__bascule input:checked ~ .cons__piste::after{transform:translateX(20px)}
.cons__bascule input:focus-visible ~ .cons__piste{
  outline:2px solid var(--c-focus);outline-offset:2px;
}
.cons__bascule input:hover:not(:disabled) ~ .cons__piste{border-color:rgba(255,255,255,.46)}

/* Toujours actif : allumé, mais dans le blanc translucide et non dans le
   framboise — ce n'est pas un choix qu'on a fait, c'est un état qu'on subit. */
.cons__bascule--fixe input{cursor:default}
.cons__bascule--fixe input:checked ~ .cons__piste{
  background:rgba(255,255,255,.30);border-color:rgba(255,255,255,.34);
}
.cons__bascule--fixe .cons__piste::after{background:rgba(255,255,255,.84)}

.cons__etat{font-size:11.5px;line-height:1.2;color:var(--c-gris);white-space:nowrap}

/* =========================================================================
   5. PETITS ÉCRANS
   ========================================================================= */
/* La carte reste une carte : presque toute la largeur, mais avec ses marges,
   ses angles et son ombre. Elle est remontée au-dessus de la barre de lecture
   du bas d'écran, qu'elle ne doit pas couvrir. */
@media (max-width:640px){
  .cons--carte{
    left:12px;right:12px;width:auto;max-width:none;
    bottom:calc(44px + env(safe-area-inset-bottom,0px));
    padding:15px 16px 13px;
  }
  /* La carte a la largeur d'un téléphone : le texte respire un demi-point de
     plus, la hauteur n'en souffre pas. */
  .cons--carte .cons__txt{font-size:13px}

  .cons-fond{padding:12px;align-items:flex-end}
  .cons--panneau{
    width:100%;padding:20px 18px 16px;
    max-height:calc(100vh - 24px);
    margin-bottom:calc(env(safe-area-inset-bottom,0px));
  }
  /* La colonne de l'interrupteur se resserre : c'est le texte qui doit
     garder la place. */
  .cons__cat{gap:12px}
  .cons__etat{display:none}
  /* Les deux boutons du panneau passent l'un sous l'autre : côte à côte,
     « Enregistrer mes choix » se coupait en deux lignes et le bloc perdait
     son aplomb. Ceux de la carte, eux, sont courts et restent en paire. */
  .cons--panneau .cons__actions{grid-template-columns:1fr}
}
/* Sous trois cent soixante pixels, deux boutons côte à côte se coupent : ils
   passent l'un sous l'autre, de la même largeur tous les deux. */
@media (max-width:359px){
  .cons__actions{grid-template-columns:1fr}
}

/* =========================================================================
   6. MOUVEMENT RÉDUIT
   ========================================================================= */
/* Rien ne glisse, rien ne pulse, rien ne se soulève : tout paraît en fondu,
   et l'interrupteur change d'état d'un coup. */
@media (prefers-reduced-motion:reduce){
  .cons--carte,.cons--panneau{animation:cons-fondu 200ms linear both}
  .cons--sortie{animation:cons-fondu-sortie 160ms linear both}
  .cons__capsule{animation:none}
  .cons__btn:hover{transform:none}
  .cons__piste,.cons__piste::after{transition:none}
}
@keyframes cons-fondu{from{opacity:0}to{opacity:1}}
@keyframes cons-fondu-sortie{from{opacity:1}to{opacity:0}}