/* ════════════════════════════════════════════════════════════
   accueil.css — Page d'accueil publique (index.php)
   Dépend de base.css
   ════════════════════════════════════════════════════════════ */

/* ─── Bande image entre le logo et les choix ─── */
.hero-banner { width:100%; border-radius:12px; margin:18px 0 28px; position:relative; display:block; }
.hero-banner-img { display:block; width:100%; height:auto; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.08); filter: contrast(1.06) saturate(1.05); -webkit-backface-visibility: hidden; backface-visibility: hidden; max-height: 420px; object-fit: cover; }

/* ─── Panneau menu (haut-droite) ─── */
.menu-panel { position:fixed; top:64px; right:16px; width:300px; max-width:92vw; background:var(--card-bg); border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.12); padding:12px; z-index:9999; display:none; }
.menu-panel[aria-hidden="false"], .menu-panel.visible { display:block; }
.menu-content { position:relative; }
.menu-close { position:absolute; top:8px; right:8px; background:transparent; border:none; font-size:1.05rem; cursor:pointer; color:var(--text); }

/* ─── Grille d'applications dans le menu ─── */
.app-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; padding:8px 6px; }
.app-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-decoration:none; color:var(--text); padding:10px 6px; border-radius:10px; }
.app-tile img { width:56px; height:56px; border-radius:12px; object-fit:cover; background:var(--card-bg); border:1px solid var(--border); box-shadow:0 8px 24px rgba(0,0,0,0.06); }
.app-tile span { font-size:0.82rem; margin-top:4px; color:var(--text); }
.app-tile:hover { background:var(--card-hover); transform:translateY(-4px); }
.app-tile.disabled { opacity:0.55; pointer-events:none; filter:grayscale(0.25); }
.app-tile.disabled img { opacity:0.75; }

/* ─── Bouton PWA installé ─── */
.btn-icone.installed { background:var(--gold); color:#fff; border-color:var(--gold); box-shadow:0 8px 20px rgba(201,162,39,0.16); }

/* ─── Grille de cartes (sélection de rôle) ─── */
.cartes-grille { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; width:100%; max-width:980px; animation:fadeUp .55s ease .25s both; }
.carte { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:56px 28px; border:1px solid var(--border); border-radius:18px; background:var(--card-bg); text-decoration:none; color:var(--text); cursor:pointer; transition: border-color .22s, box-shadow .22s, transform .22s, background .22s; position:relative; overflow:hidden; min-height:180px; }
.carte::after { content:''; position:absolute; bottom:0; left:50%; width:0; height:2px; background:var(--gold); border-radius:2px; transform:translateX(-50%); transition:width .28s ease; }
.carte:hover { border-color:var(--gold-ring); box-shadow:0 6px 28px var(--gold-wash); transform:translateY(-4px); background:var(--card-hover); }
.carte:hover::after { width:50%; }
.carte-icone { width:110px; height:110px; border-radius:18px; background:var(--gold-wash); display:flex; align-items:center; justify-content:center; transition: background .22s, transform .22s; overflow:hidden; }
.carte:hover .carte-icone { background:var(--gold-ring); transform:scale(1.04); }
.carte-icone-img { width:100%; height:100%; object-fit:cover; display:block; border-radius:14px; border:2px solid transparent; }
.carte:hover .carte-icone-img { transform:scale(1.03); border-color:var(--gold-ring); }
.carte-label { font-size:1.3rem; font-weight:800; letter-spacing:.02em; color:var(--text); }

/* ─── Footer ─── */
footer { padding:20px 12px; font-size:0.9rem; color:var(--text-muted); letter-spacing:0.01em; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:center; gap:8px; background:transparent; }
footer p { margin:0; }
footer a { color:var(--gold); text-decoration:none; font-weight:600; }
footer a:hover { text-decoration:underline; }
/* Accès super admin : point discret (lien caché) */
footer a.admin-acces { color:var(--text-muted); opacity:0.35; font-weight:800; padding:0 4px; cursor:default; }
footer a.admin-acces:hover { opacity:0.7; text-decoration:none; }

/* ─── Modale d'aide à l'installation PWA ─── */
.pwa-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); z-index:10050; display:flex; align-items:center; justify-content:center; padding:20px; }
.pwa-card { background:var(--card-bg); max-width:370px; width:100%; border:1px solid var(--gold-ring); border-radius:18px; padding:28px 24px; box-shadow:0 18px 50px rgba(0,0,0,0.25); }
.pwa-title { color:var(--gold); font-weight:600; font-size:1.05rem; margin-bottom:12px; }
.pwa-steps { color:var(--text); line-height:1.75; font-size:0.9rem; margin-bottom:18px; }
.pwa-ok { width:100%; padding:11px; background:var(--gold); border:none; border-radius:10px; font-weight:600; cursor:pointer; color:#fff; font-family:inherit; font-size:0.88rem; }
.pwa-ok:hover { filter:brightness(1.05); }

/* ─── Responsive ─── */
@media (max-width:680px) {
    .cartes-grille { grid-template-columns:1fr; width:100%; max-width:320px; }
    .carte { padding:28px 16px; flex-direction:row; gap:18px; }
    .carte::after { display:none; }
    /* .logo-titre : taille gérée par clamp() dans base.css (fluide, sans débordement) */
    .logo-img { width:100px; height:100px; }
    .logo-slogan { font-size:1rem; }
    .hero-banner { margin:12px 0 18px; }
}