/* Pied de page legal, bandeau cookies, cases de consentement et pages legales.
   AUTONOME : charge sur des pages qui utilisent tailwind.css (site public), app.css
   (application bureau) ou mobile.css (application mobile). Aucune variable n'est supposee
   presente : chaque couleur a sa valeur de repli. */
:root {
  --pm-l-fond: #0b1024;
  --pm-l-fond-2: #070b1a;
  --pm-l-texte: #eaf0ff;
  --pm-l-doux: #9fb0d6;
  --pm-l-pale: #6a78a3;
  --pm-l-lien: #a9c8ff;
  --pm-l-bord: rgba(160, 190, 255, 0.22);
  --pm-l-rouge: #fb7185;
}

/* ---------- Pied de page legal (toutes les pages) ---------- */
.pm-legal-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin: 0;
  padding: 14px 16px;
  font: 500 12.5px/1.5 Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.pm-legal-nav a,
.pm-legal-nav button {
  color: var(--pm-l-doux);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.pm-legal-nav a:hover,
.pm-legal-nav button:hover { color: var(--pm-l-texte); text-decoration: underline; }
.pm-legal-nav a:focus-visible,
.pm-legal-nav button:focus-visible,
.pm-bandeau button:focus-visible,
.pm-bandeau a:focus-visible,
.pm-case input:focus-visible { outline: 2px solid var(--pm-l-lien); outline-offset: 2px; border-radius: 4px; }
.pm-legal-pied-app { border-top: 1px solid var(--pm-l-bord); margin-top: 28px; }
body.m-body .pm-legal-nav { justify-content: flex-start; padding: 12px 0 0; }

/* ---------- Bandeau cookies ---------- */
.pm-bandeau {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2147483000;
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 18px;
  background: var(--pm-l-fond);
  color: var(--pm-l-texte);
  border: 1px solid var(--pm-l-bord);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  font: 400 14px/1.55 Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.pm-bandeau[hidden] { display: none; }
.pm-bandeau p { margin: 0 0 10px; color: var(--pm-l-doux); }
.pm-bandeau .pm-bandeau-titre { margin: 0 0 6px; color: var(--pm-l-texte); font-weight: 700; font-size: 15px; }
.pm-bandeau a { color: var(--pm-l-lien); }
.pm-bandeau-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
/* Meme poids visuel pour TOUS les choix (CNIL) : une seule classe, aucun bouton mis en avant. */
.pm-bouton {
  flex: 1 1 0;
  min-width: 120px;
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--pm-l-bord);
  background: #16204a;
  color: var(--pm-l-texte);
  font: 600 14px/1.2 Manrope, system-ui, sans-serif;
  cursor: pointer;
}
.pm-bouton:hover { background: #1d2a5e; }
.pm-bandeau-details { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--pm-l-bord); }
.pm-bandeau-details[hidden] { display: none; }
.pm-bandeau-details label { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; color: var(--pm-l-doux); }
body.m-body .pm-bandeau { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Cases de consentement (inscription, paiement) ---------- */
.pm-case {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pm-l-doux);
  text-align: left;
}
.pm-case input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #4f8dff; }
.pm-case a { color: var(--pm-l-lien); text-decoration: underline; }

/* ---------- Pages legales ---------- */
.pm-doc {
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 16px 40px;
  color: var(--pm-l-doux);
  font: 400 15.5px/1.7 Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.pm-doc-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.pm-doc-marque { display: inline-flex; align-items: center; gap: 10px; color: var(--pm-l-texte); text-decoration: none; font: 700 18px/1 "Space Grotesk", system-ui, sans-serif; }
.pm-doc-marque img { width: 36px; height: 36px; border-radius: 9px; }
.pm-doc h1 { margin: 0 0 6px; color: var(--pm-l-texte); font: 700 clamp(26px, 5vw, 36px)/1.15 "Space Grotesk", system-ui, sans-serif; }
.pm-doc h2 { margin: 34px 0 10px; color: var(--pm-l-texte); font: 700 20px/1.3 "Space Grotesk", system-ui, sans-serif; }
.pm-doc h3 { margin: 20px 0 6px; color: var(--pm-l-texte); font: 600 16px/1.4 "Space Grotesk", system-ui, sans-serif; }
.pm-doc p, .pm-doc li { margin: 0 0 10px; }
.pm-doc ul, .pm-doc ol { margin: 0 0 14px; padding-left: 22px; }
.pm-doc a { color: var(--pm-l-lien); }
.pm-doc strong { color: var(--pm-l-texte); }
.pm-doc-maj { margin: 0 0 22px; color: var(--pm-l-pale); font-size: 13px; }
.pm-doc-sommaire { margin: 0 0 24px; padding: 14px 18px; border: 1px solid var(--pm-l-bord); border-radius: 12px; background: rgba(13, 19, 48, 0.55); }
.pm-doc-sommaire ul { margin: 0; }
.pm-neutre { color: var(--pm-l-pale); font-style: italic; }
.pm-table-scroll { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--pm-l-bord); border-radius: 12px; }
.pm-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.pm-table th, .pm-table td { padding: 10px 12px; border-bottom: 1px solid var(--pm-l-bord); text-align: left; vertical-align: top; }
.pm-table th { color: var(--pm-l-texte); background: rgba(13, 19, 48, 0.7); font-weight: 600; }
.pm-table tr:last-child td { border-bottom: 0; }
.pm-table code, .pm-doc code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; color: var(--pm-l-texte); overflow-wrap: anywhere; }
.pm-carte { margin: 0 0 16px; padding: 18px; border: 1px solid var(--pm-l-bord); border-radius: 14px; background: rgba(13, 19, 48, 0.55); }
.pm-carte h2:first-child, .pm-carte h3:first-child { margin-top: 0; }
.pm-doc-pied { margin-top: 44px; border-top: 1px solid var(--pm-l-bord); color: var(--pm-l-pale); font-size: 12.5px; text-align: center; }
.pm-doc-pied p { margin: 0 0 6px; }
.pm-formulaire { display: grid; gap: 12px; }
.pm-formulaire label.pm-champ { display: grid; gap: 4px; color: var(--pm-l-texte); font-size: 14px; font-weight: 600; }
.pm-formulaire input[type="text"],
.pm-formulaire input[type="password"],
.pm-formulaire input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--pm-l-bord);
  background: var(--pm-l-fond-2);
  color: var(--pm-l-texte);
  font: 400 15px/1.3 Manrope, system-ui, sans-serif;
}
.pm-formulaire small { color: var(--pm-l-pale); font-weight: 400; }
.pm-bouton-danger { background: #5a1427; border-color: rgba(251, 113, 133, 0.45); }
.pm-bouton-danger:hover { background: #721a33; }
.pm-lien-bouton { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.pm-message { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--pm-l-bord); }
.pm-message-erreur { border-color: rgba(251, 113, 133, 0.45); background: rgba(251, 113, 133, 0.1); color: #ffd5dc; }
.pm-message-ok { border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.1); color: #c9f7e6; }

/* Encart ADMIN : informations legales manquantes. Jamais montre aux visiteurs. */
.pm-encart-admin {
  margin: 0 0 26px;
  padding: 16px 18px;
  border: 2px solid var(--pm-l-rouge);
  border-radius: 14px;
  background: rgba(127, 18, 42, 0.35);
  color: #ffe1e6;
}
.pm-encart-admin h2 { margin: 0 0 8px; color: #fff; font-size: 17px; }
.pm-encart-admin ul { margin: 0 0 12px; }
.pm-encart-admin details { margin-top: 10px; }
.pm-encart-admin summary { cursor: pointer; font-weight: 700; color: #fff; }
.pm-encart-admin .pm-formulaire { margin-top: 12px; }

/* Page d'erreur */
.pm-erreur-code { margin: 0; color: var(--pm-l-lien); font: 700 64px/1 "Space Grotesk", system-ui, sans-serif; }

/* CGV 2026-10 (12/10/2026) : pages « Résilier votre contrat » et « Renoncer au contrat ici » (choix, recapitulatif),
   encadre officiel de la garantie, rappel avant commande (L221-14) et vitrine du Club a quatre services. */
.pm-choix-groupe { margin: 0; padding: 10px 14px 4px; border: 1px solid var(--pm-l-bord); border-radius: 12px; }
.pm-choix-groupe legend { padding: 0 6px; color: var(--pm-l-texte); font-size: 14px; font-weight: 600; }
.pm-choix { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; color: var(--pm-l-doux); font-weight: 400; }
.pm-choix input { margin-top: 4px; }
.pm-recap { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.pm-recap dt { color: var(--pm-l-pale); }
.pm-recap dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pm-bouton-secondaire { background: transparent; }
.pm-encadre-officiel { border-width: 2px; }
.pm-rappel-commande { margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(160, 190, 255, 0.25); border-radius: 12px; }
.pm-rappel-commande ul { margin: 6px 0 0; padding-left: 20px; }
.pm-rappel-commande p { margin: 0 0 6px; }
.pm-rappel-commande a { color: var(--pm-l-lien); text-decoration: underline; }
.pm-liens-contrat { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; font-size: 13px; }
/* Appli (reprise du 13/10, mesure dans le navigateur a 375 px) : « Continuer vers le paiement », plus long que
   « S'abonner », poussait la ligne .m-plan a 551 px (defilement horizontal). La formule s'empile : prix, deux cases,
   puis le bouton sur toute la largeur. */
body.m-body .m-plan { flex-wrap: wrap; }
body.m-body .m-plan > .m-plan-info,
body.m-body .m-plan > .pm-case,
body.m-body .m-plan > .m-subscribe { flex: 1 1 100%; }
body.m-body .m-plan > .m-subscribe { white-space: normal; }
#store-page .store-benefits-grid.store-benefits-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 680px) {
  #store-page .store-benefits-grid.store-benefits-grid-4 { grid-template-columns: 1fr; }
  .pm-recap { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .pm-bouton { min-width: 100%; }
  .pm-doc { font-size: 15px; }
}
@media (prefers-reduced-motion: no-preference) {
  .pm-bandeau { animation: pm-bandeau-entree 0.25s ease-out; }
  @keyframes pm-bandeau-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}