/* Le bandeau des cookies (servi en /cookies.css par src/mesure.js ; 29 oct. 2026) : la carte de la fenêtre « Join the whitelist »
   (liste-attente.css : Encre en dégradé, liseré de 1,5 px, Inter, bouton gris plein), en petit, en bas à gauche (Tanguy, 29 oct. :
   « en bas à gauche en plus petit »). Deux choix de même allure, « Essential » et « Accept all », et un menu « ^ » qui les détaille. */
.sfc { position: fixed; z-index: 90; left: 1rem; bottom: 1rem; box-sizing: border-box; width: min(21rem, 100% - 2rem);
  max-height: calc(100dvh - 2rem); overflow: auto; overscroll-behavior: contain; padding: 1rem 1.125rem; border-radius: 1rem;
  text-align: left; background: linear-gradient(180deg, #1B1A20, #141319 60%); color: #F7F6F3; font-family: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(247, 246, 243, .1), 0 .75rem 2rem rgba(10, 9, 13, .35);
  animation: sfc-entre .28s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sfc-entre { from { opacity: 0; transform: translateY(.625rem); } }
@media (min-width: 768px) { .sfc { left: 1.5rem; bottom: 1.5rem; } }
.sfc-titre { margin: 0 0 .25rem; font-size: .875rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.sfc-texte { margin: 0; font-size: .75rem; font-weight: 300; line-height: 1.55; letter-spacing: .005em; color: rgba(247, 246, 243, .62); }
.sfc-texte a { color: rgba(247, 246, 243, .85); text-decoration: underline; text-underline-offset: 2px; }

/* le menu « ^ » : l'icône seule, en haut à droite de la carte ; la flèche pointe vers le haut, le côté où la carte s'agrandit,
   et se retourne une fois ouverte. Le détail est écrit petit et serré (Tanguy, 29 oct.), en restant lisible : 10 px au plus petit */
.sfc-titre { padding-right: 2rem; }
.sfc-details summary { position: absolute; top: .625rem; right: .625rem; display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border-radius: .5rem; list-style: none; cursor: pointer; color: rgba(247, 246, 243, .62); transition: color .2s ease, background-color .2s ease; }
.sfc-details summary::-webkit-details-marker { display: none; }
.sfc-details summary:hover { color: #F7F6F3; background: rgba(247, 246, 243, .06); }
.sfc-chevron { width: .375rem; height: .375rem; margin-top: .1875rem; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease, margin .2s ease; }
.sfc-details[open] .sfc-chevron { transform: rotate(225deg); margin-top: -.1875rem; }
.sfc-cats { display: grid; gap: .375rem; margin-top: .625rem; }
.sfc-cat { padding: .5rem .625rem; border-radius: .5rem; background: rgba(247, 246, 243, .04); box-shadow: inset 0 0 0 1px rgba(247, 246, 243, .06); }
.sfc-cat p, .sfc-mentions { margin: 0; font-size: .625rem; font-weight: 300; line-height: 1.45; color: rgba(247, 246, 243, .6); }
.sfc-cat .sfc-cat-t { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .1875rem; font-size: .6875rem; font-weight: 500; color: #F7F6F3; }
.sfc-cat-t span { font-size: .625rem; font-weight: 400; color: rgba(247, 246, 243, .5); white-space: nowrap; }
.sfc-mentions { padding: 0 .125rem; color: rgba(247, 246, 243, .5); }

.sfc-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: .375rem; margin-top: .75rem; }
.sfc-btn { height: 2.125rem; padding: 0 .75rem; border: 0; border-radius: .625rem; background: #242329; color: #F7F6F3; font-family: inherit;
  font-size: .8125rem; font-weight: 500; line-height: 1; letter-spacing: .01em; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(247, 246, 243, .06); transition: background-color .2s ease; }
.sfc-btn:hover { background: #2E2D33; }
.sfc-btn:focus-visible, .sfc-texte a:focus-visible, .sfc-details summary:focus-visible { outline: 2px solid rgba(247, 246, 243, .6); outline-offset: 2px; }
/* « Cookies » dans le pied de page, et les réglages sous la politique de confidentialité : l'allure des liens voisins */
.sfc-lien { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; }
.sfc-lien:hover { text-decoration: underline; text-underline-offset: 2px; }
.sfc-lien-souligne { text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sfc { animation: none; } .sfc-chevron { transition: none; } }
