/* ============================ AP.css — Accueil Public (scopé AP-*) Palette groupmaker et UI minimaliste ============================ */ /* Déclaré sur :root ET body : les alias dérivés (--ap-card = var(--card-bg)…) DOIVENT être résolus sur , là où les thèmes posent --card-bg/--text/… (sur :root seul, var(--card-bg) résout au niveau html où le token n'existe pas → fallback blanc → cartes blanches hors night-sea). Du coup tout thème présent et futur embarque l'accueil public automatiquement, sans bloc --ap-* dédié. */ :root, body{ --ap-blue:#20466e; /* CTA fond + texte blanc → bleu sombre fixe (white text OK sur tout thème ; --brand peut être clair, ex. gros-temps) */ --ap-blue-hover:#163152; --ap-header-bg:#2c3e50; /* barre haute : toujours sombre (logo PNG blanc) */ --ap-header-text:#ffffff; --ap-text:var(--text, #1f2a44); --ap-muted:var(--muted, #667085); --ap-card:var(--card-bg, #ffffff); --ap-bg:var(--bg, #f6f8fb); --ap-bd:var(--bd, rgba(16,24,40,.10)); --ap-alert:#b42318; } /* Page */ .AP-page{ background:var(--ap-bg); color:var(--ap-text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Mini Header */ .AP-mini-header{ background:var(--ap-header-bg); color:var(--ap-header-text); display:flex; align-items:center; justify-content:center; padding:12px 16px; box-shadow:0 2px 8px rgba(0,0,0,.08); } .AP-sticky{ position:sticky; top:0; z-index:1000; } /* Sélecteur de langue dans le header */ .AP-header-spacer { flex:1; } .AP-lang-switch { flex:1; display:flex; justify-content:flex-end; align-items:center; gap:2px; } .AP-lang-btn { color:rgba(255,255,255,.6); text-decoration:none; font-size:.78rem; font-weight:700; padding:4px 9px; border-radius:6px; letter-spacing:.5px; transition:color .12s, background .12s; } .AP-lang-btn:hover { color:#fff; background:rgba(255,255,255,.12); } .AP-lang-btn--active { color:#fff; background:rgba(255,255,255,.18); } .AP-brand{ color:var(--ap-header-text); text-decoration:none; font-weight:800; letter-spacing:.2px; font-size:clamp(1.1rem,1rem + 1vw,1.4rem); line-height:1; } .AP-brand:focus-visible{ outline:2px solid #fff; outline-offset:3px; border-radius:6px; } /* Layout */ .AP-layout{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; max-width:1100px; margin:24px auto; padding:0 16px; } .AP-side{ display:none; } .AP-content{ min-width:0; } .AP-auth-container{ display:grid; gap:16px; } /* Card */ .AP-card{ background:var(--ap-card); border:1px solid var(--ap-bd); border-radius:16px; padding:20px; box-shadow:0 1px 2px rgba(16,24,40,.04); } .AP-card--center{ text-align:center; } /* Titles */ .AP-title{ margin:0 0 12px 0; font-size:1.25rem; font-weight:800; } .AP-title--h2{ font-size:1.1rem; margin-bottom:8px; } /* Small text */ .AP-small{ margin:0 0 12px 0; color:var(--ap-muted); } /* Form */ .AP-form{ display:grid; gap:10px; } .AP-label{ font-size:.9rem; color:var(--ap-muted); } .AP-input{ width:100%; box-sizing:border-box; /* padding+bordure inclus dans le 100% → ne déborde plus à droite */ border:1px solid var(--ap-bd); border-radius:10px; padding:10px 12px; font-size:1rem; background:var(--card-bg, #fff); color:var(--ap-text, #1f2a44); /* texte saisi suit le thème (lisible sur carte sombre) */ } .AP-switch-row{ display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; } .AP-check{ display:flex; gap:8px; align-items:center; } /* Actions & Buttons */ .AP-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .AP-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:12px; padding:10px 14px; border:1px solid transparent; font-weight:700; text-decoration:none; cursor:pointer; line-height:1.1; } .AP-btn--primary{ background:var(--ap-blue); color:#fff; } .AP-btn--primary:hover{ background:var(--ap-blue-hover); } .AP-btn--secondary{ background:var(--ap-card, #fff); color:var(--ap-text, #20466e); border-color:var(--ap-bd); } .AP-btn--secondary:hover{ background:var(--surface-2, #e6eaf0); } /* Alert */ .AP-alert{ background:#fff4f3; color:var(--ap-alert); border:1px solid #ffd7d3; border-radius:10px; padding:10px 12px; margin-bottom:8px; } /* Highlights */ .AP-highlights{ display:grid; gap:12px; } .AP-highlight-card{ background:var(--ap-card); border:1px solid var(--ap-bd); border-radius:16px; padding:16px; } .AP-h3{ margin:0 0 6px 0; font-size:1.05rem; } /* Footer */ .AP-footer{ margin-top:24px; border-top:1px solid var(--ap-bd); background:var(--card-bg, #fff); } .AP-footer-inner{ max-width:1100px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .AP-footer-nav{ display:flex; gap:12px; flex-wrap:wrap; } .AP-footer-nav a{ color:var(--brand, #20466e); text-decoration:none; } /* couleur de lien thémée (lisible sur footer clair ET sombre), plus le navy --ap-blue invisible sur footer sombre */ .AP-footer-nav a:hover{ text-decoration:underline; } /* Asides vides conservés dans le DOM (placeholder pour future évolution) * mais display:none permanent — content occupe toute la largeur du wrapper * 1100px sur PC, comme sur les pages connectées. */ /* Header fixé en haut */ .AP-mini-header { position: fixed; top: 0; left: 0; right: 0; height: 60px; /* ajuste la hauteur si besoin */ background-color: var(--ap-header-bg, #2c3e50); /* barre haute thémée (suit le pack) — plus de cyan --brand en night-sea */ display: flex; align-items: center; padding: 0 16px; z-index: 1000; } /* Logo dans le header */ .AP-mini-header .AP-logo { height: 100px; /* adapte à ton header */ display: block; } /* Décale le contenu principal pour ne pas passer sous le header */ .AP-layout { padding-top: 110px; /* > hauteur du header */ } .AP-mini-header .AP-logo { height: 160px; /* était 40px → double taille */ max-height: none; } .AP-mini-header { height: 100px; /* ajuste la hauteur de la barre bleue */ } .AP-layout { padding-top: 110px; /* compense la nouvelle hauteur du header */ } .btn-google{ display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: inherit; text-decoration:none; font-weight:600; line-height:1; transition: background .15s ease, transform .05s ease; } .btn-google:hover{ background: rgba(255,255,255,.12); } .btn-google:active{ transform: translateY(1px); } .btn-google .g-icon{ display:block; } .btn-google{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:12px; border:1px solid var(--bd, #d0d7e2); background:var(--card-bg, #fff); color:var(--text, #1f2d3d); font-weight:600; text-decoration:none; box-shadow:0 2px 6px rgba(0,0,0,.06); } .btn-google:hover{ background:var(--surface-2, #f7f9fc); } .btn-google .g-icon{ width:18px; height:18px; }