/* Anniversaires — feuille de style unique, volontairement courte. */
:root {
  --fond:#f4f6fa; --carte:#fff; --trait:#e5e7eb; --texte:#1f2937; --gris:#6b7280;
  --bleu:#2563eb; --vert:#16a34a; --rouge:#dc2626; --ombre:0 1px 3px rgba(0,0,0,.08);
}
* { box-sizing:border-box; }
body { margin:0; padding:20px 14px 60px; background:var(--fond); color:var(--texte);
       font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.5; }
a { color:var(--bleu); }
h1 { font-size:1.5rem; margin:0 0 14px; }
h2 { font-size:1.05rem; margin:0 0 6px; }
.sous { color:var(--gris); font-size:.93rem; margin:0 0 16px; }

.carte { max-width:640px; margin:0 auto; background:var(--carte); border:1px solid var(--trait);
         border-radius:16px; padding:22px 20px; box-shadow:var(--ombre); }
.accueil { max-width:420px; margin-top:8vh; text-align:center; }
.accueil form { text-align:left; }

label { display:block; margin-bottom:12px; font-size:.9rem; color:var(--gris); }
input[type=text], input[type=email], input[type=date] {
  display:block; width:100%; margin-top:4px; padding:11px 12px; font-size:1rem;
  border:1px solid #d5dbe3; border-radius:10px; background:#fff; color:var(--texte);
}
input:focus { outline:2px solid var(--bleu); border-color:var(--bleu); }
.maj { text-transform:uppercase; }

button, .bouton { font:inherit; cursor:pointer; }
.principal { width:100%; padding:12px 16px; border:none; border-radius:10px;
             background:var(--bleu); color:#fff; font-weight:600; font-size:1rem; }
.principal:hover { filter:brightness(1.08); }
.lien { background:none; border:none; color:var(--bleu); padding:6px 8px; }

.erreur { background:#fee2e2; color:#7f1d1d; border:1px solid #fca5a5;
          padding:10px 12px; border-radius:10px; margin:0 0 14px; }
.info   { background:#dcfce7; color:#14532d; border:1px solid #86efac;
          padding:10px 12px; border-radius:10px; margin:0 0 14px; }

.ou { display:flex; align-items:center; gap:10px; color:var(--gris); margin:18px 0 12px; font-size:.85rem; }
.ou::before, .ou::after { content:""; flex:1; height:1px; background:var(--trait); }
.google { display:flex; align-items:center; justify-content:center; gap:10px; padding:11px;
          border:1px solid #d5dbe3; border-radius:999px; text-decoration:none; color:#3c4043; font-weight:600; }
.google .g { width:22px; height:22px; border-radius:50%; color:#fff; font-weight:800; font-size:.8rem;
             display:inline-flex; align-items:center; justify-content:center;
             background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0); }

.barre { max-width:640px; margin:0 auto 14px; display:flex; align-items:center; gap:12px;
         background:var(--carte); border:1px solid var(--trait); border-radius:999px;
         padding:8px 14px; box-shadow:var(--ombre); font-size:.9rem; }
.barre .famille { font-weight:700; }
.barre .qui { color:var(--gris); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.enligne { display:inline; }

.puces { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.puce { display:inline-flex; gap:6px; align-items:center; padding:5px 12px; border-radius:999px;
        border:1px solid var(--trait); background:#f9fafb; text-decoration:none; color:var(--texte); font-size:.85rem; }
.puce.active { background:var(--bleu); border-color:var(--bleu); color:#fff; }
.puce span { opacity:.7; font-size:.78rem; }

.vedette { text-align:center; padding:18px; margin-bottom:18px; border-radius:14px;
           background:linear-gradient(135deg,#eef2ff,#f0f9ff); border:1px solid #dbeafe; }
.vedette .titre { color:var(--gris); font-size:.85rem; }
.vedette .nom { font-size:1.6rem; font-weight:800; margin:2px 0; }
.vedette .quand { color:var(--gris); }
.vedette .compte { margin-top:8px; font-size:1.2rem; font-weight:700; color:var(--bleu); }

.liste { list-style:none; margin:0 0 20px; padding:0; }
.liste li { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--trait); flex-wrap:wrap; }
.liste li.ouvert { background:#f9fafb; border-radius:10px; padding:12px; }
.info-fiche { flex:1; min-width:150px; }
.info-fiche .nom { font-weight:600; }
.info-fiche .quand { color:var(--gris); font-size:.86rem; }
.jours { font-weight:700; color:var(--bleu); white-space:nowrap; }
.actions { display:flex; align-items:center; gap:6px; }
.bouton { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:32px;
          border:1px solid var(--trait); border-radius:8px; background:#fff; text-decoration:none; }
.bouton.rouge { color:var(--rouge); border-color:#fecaca; }
.cadenas { opacity:.55; }
.etiq { font-size:.7rem; color:var(--gris); border:1px solid var(--trait);
        border-radius:999px; padding:1px 7px; margin-left:4px; }
.etiq.pub { color:var(--vert); border-color:#bbf7d0; }

.encadre { border:1px dashed var(--trait); border-radius:12px; padding:14px; margin:18px 0; }
.ligne { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ligne input[type=text], .ligne input[type=email] { flex:1 1 150px; width:auto; margin:0; }
.ligne input[type=date] { flex:0 1 165px; width:auto; margin:0; }
.ligne .principal { width:auto; flex:0 0 auto; }
.case { display:inline-flex; align-items:center; gap:6px; margin:0; font-size:.85rem; white-space:nowrap; }
.case input { width:16px; height:16px; }

.vide { color:var(--gris); text-align:center; padding:24px 0; }
.liens { text-align:center; margin-top:22px; font-size:.86rem; color:var(--gris); }

.identifie { margin:0 0 14px; padding:10px 12px; border-radius:10px;
             background:#eef2ff; border:1px solid #dbeafe; color:#1e3a8a; font-size:.9rem; }

/* Étiquettes de famille : un clic montre tout le monde qui la porte. */
.familles { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }
.familles.centre { justify-content:center; margin-top:8px; }
.etiq-fam { font-size:.72rem; font-weight:600; letter-spacing:.02em;
            color:var(--bleu); background:#eef2ff; border:1px solid #dbeafe;
            border-radius:999px; padding:2px 9px; text-decoration:none; }
.etiq-fam:hover { background:#dbeafe; }

/* Compte à rebours de la vedette */
.rebours { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:12px; }
.rebours .bloc { min-width:66px; padding:8px 6px; border-radius:12px;
                 background:#fff; border:1px solid #dbeafe; text-align:center; }
.rebours .bloc b { display:block; font-size:1.5rem; line-height:1.1; color:var(--bleu);
                   font-variant-numeric:tabular-nums; }
.rebours .bloc span { font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; color:var(--gris); }
.encadre.rapatrier { border-style:solid; border-color:#fcd34d; background:#fffbeb; }

/* Annuaire des familles, sur l'écran d'accueil */
.annuaire { margin-top:22px; padding-top:18px; border-top:1px solid var(--trait); text-align:left; }
.annuaire h2 { font-size:.95rem; }
.familles-liste { display:flex; flex-wrap:wrap; gap:8px; }
.fam-choix { display:inline-flex; align-items:center; gap:7px; padding:7px 13px;
             border:1px solid var(--trait); border-radius:999px; background:#f9fafb;
             font-size:.88rem; font-weight:600; color:var(--texte); }
.fam-choix:hover { background:#eef2ff; border-color:#dbeafe; }
.fam-choix.mienne { border-color:#bfdbfe; background:#eff6ff; color:#1e3a8a; }
.fam-choix.choisie { background:var(--bleu); border-color:var(--bleu); color:#fff; }
.fam-choix span { font-weight:400; font-size:.76rem; opacity:.65; }
.fam-choix.choisie span { opacity:.85; }

/* Calendrier du mois */
.calendrier { margin:0 0 22px; padding:14px; border:1px solid var(--trait); border-radius:14px; background:#fff; }
.cal-tete { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:1.05rem; }
.cal-fleche { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
              border:1px solid var(--trait); border-radius:9px; text-decoration:none; font-size:1.2rem; }
.cal-fleche:hover { background:#f3f4f6; }
.cal-jours, .cal-grille { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-jours span { text-align:center; font-size:.68rem; text-transform:uppercase;
                  letter-spacing:.06em; color:var(--gris); padding-bottom:4px; }
.cal-case { min-height:56px; border:1px solid var(--trait); border-radius:9px; padding:3px 4px;
            display:flex; flex-direction:column; gap:1px; background:#fff; overflow:hidden; }
.cal-case.vide { border:none; background:none; }
.cal-case .num { font-size:.75rem; color:var(--gris); }
.cal-case.passe { opacity:.5; }
.cal-case.aujourdhui { border-color:var(--bleu); border-width:2px; background:#eff6ff; opacity:1; }
.cal-case.aujourdhui .num { color:var(--bleu); font-weight:800; }
.cal-case.fete { background:#fff7ed; border-color:#fed7aa; }
.cal-case.fete.aujourdhui { background:#ffedd5; border-color:var(--bleu); }
.qui-fete { font-size:.6rem; line-height:1.15; color:#9a3412; white-space:nowrap;
            overflow:hidden; text-overflow:ellipsis; }
.cal-retour { text-align:center; margin:10px 0 0; font-size:.84rem; }

/* Idées cadeaux */
.bouton.cadeau { background:#fffbeb; border-color:#fde68a; gap:3px; }
.bouton.cadeau b { font-size:.7rem; color:#92400e; font-weight:700; }
.bouton.cadeau.grand { min-width:auto; padding:8px 16px; height:auto; font-weight:600;
                       color:#92400e; text-decoration:none; display:inline-flex; }
.idees { list-style:none; margin:0 0 18px; padding:0; }
.idees li { display:flex; align-items:flex-start; gap:10px; padding:11px 0; border-top:1px solid var(--trait); }
.idee-texte { flex:1; }
.idee-texte a { font-weight:600; }
.idee-par { font-size:.76rem; color:var(--gris); margin-top:2px; }
.encadre.surprise { border-color:#fcd34d; background:#fffbeb; text-align:center; }
.calendrier.charge { opacity:.55; transition:opacity .12s; }
.bouton.fige { background:#f3f4f6; color:var(--gris); gap:2px; cursor:default; }
.bouton.fige b { font-size:.68rem; font-weight:700; }
.note-verrou { font-size:.8rem; color:var(--gris); background:#f9fafb; border:1px solid var(--trait);
               border-radius:10px; padding:9px 12px; margin:0 0 16px; }