/* ==========================================================================
   COMUNITY : fenêtre « Devenir membre » et message Google sans compte
   Posés par le module « Devenir membre » de com64-accompagnement :
   - la fenêtre <dialog id="c64-devenir-membre" class="c64-dm"> sur l'écran de connexion
     (wp-login.php habillé par Fluent Security) et sur le portail FluentCommunity ;
   - le message <div class="c64-dm c64-dm--google"> dans le bloc #login_error de wp-login.php,
     quand un visiteur sans compte se connecte avec Google.
   Tout est préfixé .c64-dm : aucun effet sur le reste de la page.
   Couleurs du design system COMUNITY en valeurs fixes : l'écran de connexion ne charge pas la
   palette d'Astra. Polices Figtree (texte) et Schibsted Grotesk (titres) : présentes sur le
   portail, à charger sur l'écran de connexion (astra-local-fonts.css d'Astra).
   ========================================================================== */

.c64-dm{
  --c64-dm-marine:#16163F; --c64-dm-bleu:#2438FF; --c64-dm-noir:#000000;
  --c64-dm-creme:#FAF5EC; --c64-dm-creme-tete:#EFDFCE; --c64-dm-creme-trait:#E3CFB9;
  --c64-dm-beige:#EFE7D8; --c64-dm-filet:#E4D9C6; --c64-dm-blanc:#FFFFFF; --c64-dm-rouge:#C81E3C;
  --c64-dm-police-titre:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --c64-dm-police-texte:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:light;
  color:var(--c64-dm-noir);
  font-size:16px;
  line-height:1.6;
  text-align:left;
  letter-spacing:normal;
  text-transform:none;
}

/* Le portail impose « body * { font-family: -apple-system… } » : la fenêtre reprend ses polices. */
.c64-dm,.c64-dm *{font-family:var(--c64-dm-police-texte);box-sizing:border-box}
.c64-dm .c64-dm__titre,.c64-dm .c64-dm__alerte,.c64-dm .c64-dm__alerte *{font-family:var(--c64-dm-police-titre)}
.c64-dm :where(h2,p,ol,li){margin:0;padding:0}
.c64-dm svg{display:block;flex:none}

/* ---------- Contenu commun : texte, étapes, bouton, lien ---------- */
.c64-dm .c64-dm__texte{font-size:16px;line-height:1.6;color:var(--c64-dm-noir)}
.c64-dm .c64-dm__texte strong{font-weight:700;color:var(--c64-dm-marine);white-space:nowrap}

.c64-dm .c64-dm__etapes{list-style:none;counter-reset:c64-dm-etape;display:grid;gap:12px;padding:16px 18px;background:var(--c64-dm-blanc);border:1px solid var(--c64-dm-filet);border-radius:12px}
.c64-dm .c64-dm__etapes li{counter-increment:c64-dm-etape;display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;font-size:16px;line-height:1.5;color:var(--c64-dm-noir)}
.c64-dm .c64-dm__etapes li::before{content:counter(c64-dm-etape);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--c64-dm-beige);color:var(--c64-dm-marine);font:700 15px/1 var(--c64-dm-police-titre)}
.c64-dm .c64-dm__etapes li > span{padding-top:4px;overflow-wrap:break-word}

.c64-dm .c64-dm__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.c64-dm .c64-dm__bouton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;margin:0;padding:12px 24px;border:0;border-radius:6px;background:var(--c64-dm-marine);color:var(--c64-dm-blanc);font-size:16px;font-weight:600;line-height:1.2;text-decoration:none;box-shadow:none;cursor:pointer;transition:background-color .2s}
.c64-dm .c64-dm__bouton:hover,.c64-dm .c64-dm__bouton:active{background:var(--c64-dm-bleu);color:var(--c64-dm-blanc)}
.c64-dm .c64-dm__bouton svg{width:18px;height:18px;transition:transform .2s}
.c64-dm .c64-dm__bouton:hover svg{transform:translateX(3px)}
.c64-dm .c64-dm__lien{display:inline-flex;align-items:center;min-height:44px;color:var(--c64-dm-marine);font-size:15px;font-weight:400;line-height:1.3;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;box-shadow:none}
.c64-dm .c64-dm__lien:hover,.c64-dm .c64-dm__lien:active{color:var(--c64-dm-bleu);text-decoration-thickness:2px}

/* Focus : l'anneau du design system (blanc puis bleu), jamais retiré au clavier. */
.c64-dm :is(a,button):focus:not(:focus-visible){outline:none;box-shadow:none}
.c64-dm :is(a,button):focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px var(--c64-dm-blanc),0 0 0 4px var(--c64-dm-bleu)}

/* ---------- La fenêtre ---------- */
dialog.c64-dm{position:fixed;inset:0;margin:auto;width:min(560px,calc(100% - 32px));max-width:none;height:fit-content;max-height:calc(100% - 32px);padding:0;border:0;border-radius:16px;background:var(--c64-dm-creme);box-shadow:0 2px 6px rgba(22,22,63,.10),0 24px 64px rgba(22,22,63,.30);overflow:auto;overscroll-behavior:contain}
dialog.c64-dm:not([open]){display:none}
dialog.c64-dm::backdrop{background:rgba(22,22,63,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
html:has(dialog.c64-dm[open]){overflow:hidden}

.c64-dm .c64-dm__tete{position:relative;padding:26px 76px 22px 32px;background:radial-gradient(260px 150px at 92% 0%,rgba(120,190,255,.32),transparent 70%),radial-gradient(220px 140px at 0% 100%,rgba(231,222,201,.9),transparent 70%),var(--c64-dm-creme-tete);border-bottom:1px solid var(--c64-dm-creme-trait)}
.c64-dm .c64-dm__titre{font-size:28px;font-weight:700;line-height:1.15;letter-spacing:-.015em;color:var(--c64-dm-marine);overflow-wrap:break-word}
.c64-dm .c64-dm__fermer{position:absolute;top:18px;right:16px;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.75);color:var(--c64-dm-marine);cursor:pointer;transition:background-color .2s}
.c64-dm .c64-dm__fermer:hover{background:var(--c64-dm-blanc)}
.c64-dm .c64-dm__fermer svg{width:20px;height:20px}
.c64-dm .c64-dm__corps{display:grid;gap:16px;padding:24px 32px 28px}
.c64-dm .c64-dm__corps .c64-dm__actions{margin-top:8px}

@media (max-width:480px){
  dialog.c64-dm{width:calc(100% - 24px);max-height:calc(100% - 24px);border-radius:14px}
  .c64-dm .c64-dm__tete{padding:20px 64px 18px 20px}
  .c64-dm .c64-dm__titre{font-size:24px}
  .c64-dm .c64-dm__fermer{top:12px;right:10px}
  .c64-dm .c64-dm__corps{padding:20px 20px 22px}
  .c64-dm .c64-dm__etapes{padding:14px}
  .c64-dm .c64-dm__actions{justify-content:center}
  .c64-dm .c64-dm__bouton{flex:1 1 100%}
}

@media (prefers-reduced-motion:no-preference){
  dialog.c64-dm[open]{animation:c64-dm-entree .22s cubic-bezier(.2,.8,.2,1)}
  dialog.c64-dm[open]::backdrop{animation:c64-dm-fondu .22s ease-out}
}
@keyframes c64-dm-entree{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes c64-dm-fondu{from{opacity:0}to{opacity:1}}

/* ---------- Le message Google dans le bloc #login_error de wp-login.php ----------
   Le module remplace le texte d'erreur par le filtre login_errors (WordPress n'enveloppe alors
   pas le message d'un <p>) et ajoute la classe c64-sans-compte au bloc par le filtre
   wp_admin_notice_args. La seconde ligne de sélecteurs couvre le cas où la classe manque. */
.login #login_error.c64-sans-compte,
.login #login_error:has(> .c64-dm--google){margin:0 0 24px;padding:0;background:var(--c64-dm-creme,#FAF5EC);border:1px solid #E4D9C6;border-left:4px solid #C81E3C;border-radius:4px 10px 10px 4px;box-shadow:0 1px 2px rgba(22,22,63,.06),0 6px 20px rgba(22,22,63,.06);overflow:hidden}
.c64-dm.c64-dm--google{display:grid;gap:14px;padding:0 0 18px}
.c64-dm.c64-dm--google > :not(.c64-dm__alerte){margin-inline:18px}
.c64-dm .c64-dm__alerte{display:flex;align-items:flex-start;gap:10px;padding:14px 18px;background:var(--c64-dm-blanc);border-bottom:1px solid var(--c64-dm-filet);font-size:17px;font-weight:700;line-height:1.35;color:var(--c64-dm-marine)}
.c64-dm .c64-dm__alerte svg{width:22px;height:22px;margin-top:1px;color:var(--c64-dm-rouge)}
#login_error .c64-dm.c64-dm--google p.c64-dm__texte{margin-block:0;font-size:15px;line-height:1.55}
#login_error .c64-dm.c64-dm--google p.c64-dm__alerte{margin:0;font-size:17px;line-height:1.35}
.c64-dm.c64-dm--google .c64-dm__etapes{gap:10px;padding:12px 14px}
.c64-dm.c64-dm--google .c64-dm__etapes li{font-size:15px;grid-template-columns:28px minmax(0,1fr);gap:10px}
.c64-dm.c64-dm--google .c64-dm__etapes li::before{width:28px;height:28px;font-size:14px}
.c64-dm.c64-dm--google .c64-dm__etapes li > span{padding-top:3px}
.c64-dm.c64-dm--google .c64-dm__actions{margin-top:2px}
@media (max-width:480px){
  .c64-dm.c64-dm--google > :not(.c64-dm__alerte){margin-inline:14px}
  .c64-dm.c64-dm--google .c64-dm__alerte{padding:12px 14px}
}

/* Téléphone et tablette : message court, le formulaire de connexion reste à portée de vue. */
@media (max-width:800px){
  .c64-dm.c64-dm--google .c64-dm__texte + .c64-dm__texte,.c64-dm.c64-dm--google .c64-dm__etapes{display:none}
}

/* Fenêtre ouverte : la page de fond ne défile plus. */
html:has(dialog.c64-dm[open]),html:has(dialog.c64-dm[open]) body{overflow:hidden}

/* Sur l'écran de connexion, « J'ai déjà un compte » ferme la fenêtre : c'est un bouton. */
.c64-dm button.c64-dm__lien{background:none;border:0;padding:0;cursor:pointer;font-family:var(--c64-dm-police-texte)}