/* ==========================================================================
   Comité des Fêtes de Sillans — Charte graphique
   Palette : bleu village (#1B4A8C), orange fête (#F2762E),
             vert feuillage (#4C9A5A), jaune soleil (#F4C542), crème (#FBF8F2)
   Typo : Fraunces (titres, festif/chaleureux) + Work Sans (texte, lisible)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
    --bleu: #1B4A8C;
    --bleu-fonce: #123563;
    --bleu-clair: #E8F0FB;
    --orange: #F2762E;
    --orange-fonce: #D9601A;
    --vert: #4C9A5A;
    --vert-fonce: #397544;
    --jaune: #F4C542;
    --creme: #FBF8F2;
    --blanc: #FFFFFF;
    --charbon: #262524;
    --gris: #6B6864;
    --gris-clair: #E7E2D8;
    --radius: 14px;
    --radius-sm: 8px;
    --ombre: 0 8px 24px rgba(27, 74, 140, 0.10);
    --ombre-forte: 0 16px 40px rgba(27, 74, 140, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'Work Sans', -apple-system, sans-serif;
    color: var(--charbon);
    background: var(--creme);
    line-height: 1.6;
}
h1, h2, h3, h4 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 0.5em;
    color: var(--bleu-fonce);
}
h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
p { margin: 0 0 1em; }
a { color: var(--bleu); text-decoration: none; }
img { max-width: 100%; display: block; }
ul { padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Boutons ------------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: 0.95rem;
    border: none; cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primaire { background: var(--orange); color: #fff; box-shadow: 0 6px 18px rgba(242,118,46,.35); }
.btn-primaire:hover { background: var(--orange-fonce); color: #fff; }
.btn-secondaire { background: #fff; color: var(--bleu); border: 2px solid var(--bleu); }
.btn-secondaire:hover { background: var(--bleu); color: #fff; }
.btn-vert { background: var(--vert); color: #fff; }
.btn-petit { padding: 8px 16px; font-size: 0.85rem; }
.btn-danger { background: #C94E4E; color: #fff; }
.btn-fantome { background: transparent; color: var(--bleu); border: 1px solid var(--gris-clair); }

/* --- Badge logo (grenouille + tour) -------------------------------------- */
.logo-badge {
    width: 54px; height: 54px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #F4F8FF 60%);
    box-shadow: var(--ombre); display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.logo-badge svg { width: 40px; height: 40px; }
.logo-texte { display: flex; flex-direction: column; line-height: 1.1; }
.logo-texte .petit { font-size: 0.68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); font-weight: 600; }
.logo-texte .grand { font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 700; color: var(--bleu-fonce); }

/* --- Confettis décoratifs (élément signature) --------------------------- */
.confettis { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.confettis span {
    position: absolute; display: block; opacity: 0.85;
}
.confettis .c-triangle { width: 0; height: 0; border-left: 22px solid transparent; border-right: 22px solid transparent; border-bottom: 38px solid var(--orange); }
.confettis .c-cercle { width: 26px; height: 26px; border-radius: 50%; background: var(--vert); }
.confettis .c-carre { width: 24px; height: 24px; background: var(--jaune); transform: rotate(18deg); border-radius: 4px; }
.confettis .c-anneau { width: 34px; height: 34px; border-radius: 50%; border: 6px solid var(--bleu); }

/* --- Header / Navigation -------------------------------------------------- */
.site-header {
    background: var(--bleu); position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; gap: 20px; }
.site-header .logo-texte .grand { color: #fff; }
.site-header .logo-texte .petit { color: #C9D9F0; }
.nav-principale { display: flex; align-items: center; gap: 4px; }
.nav-principale a {
    color: #E8F0FB; padding: 10px 16px; border-radius: 999px; font-weight: 500; font-size: 0.95rem;
    transition: background .15s ease, color .15s ease;
}
.nav-principale a:hover, .nav-principale a.actif { background: rgba(255,255,255,.14); color: #fff; }
.nav-cta { margin-left: 8px; }
.nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; }

@media (max-width: 920px) {
    .nav-toggle { display: block; }
    .nav-principale {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: var(--bleu-fonce); flex-direction: column; align-items: stretch;
        padding: 12px; gap: 2px; box-shadow: var(--ombre-forte);
    }
    .nav-principale.ouvert { display: flex; }
    .nav-principale a { padding: 12px 16px; }
    .nav-cta { margin-left: 0; }
}

/* --- Hero ------------------------------------------------------------------ */
.hero {
    position: relative; overflow: hidden;
    background-color: var(--bleu-fonce);
    background-image: linear-gradient(180deg, var(--bleu-fonce) 0%, var(--bleu) 70%);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: #fff; padding: 0; min-height: 480px; display: flex; align-items: stretch;
}
.hero.hero-avec-image {
    background-color: var(--banniere-fond, #fff);
    background-image: none;
    background-size: contain;
}
.hero-image-mobile { display: none; }
.hero:has(.hero-pos-haut-gauche),
.hero:has(.hero-pos-bas-gauche) {
    background-position: right center !important;
}
.hero:has(.hero-pos-haut-droite),
.hero:has(.hero-pos-bas-droite) {
    background-position: left center !important;
}
.hero .container { position: relative; z-index: 2; }
.hero-avec-image .hero-texte-zone {
    background: rgba(15,35,66,.85);
    backdrop-filter: blur(6px);
    padding: 32px 36px;
    border-radius: var(--radius);
    box-shadow: var(--ombre-forte);
}
.hero .eyebrow {
    display: inline-block; background: rgba(0,0,0,.32); color: #fff;
    padding: 6px 16px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; margin-bottom: 18px; backdrop-filter: blur(2px);
}
.hero h1 { color: #fff; max-width: 720px; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.hero p.lead { color: #EDF2FC; font-size: 1.15rem; max-width: 560px; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.hero-actions .btn-secondaire { background: rgba(0,0,0,.28); color: #fff; border-color: #fff; backdrop-filter: blur(2px); }
.hero-actions .btn-secondaire:hover { background: rgba(0,0,0,.5); color: #fff; border-color: #fff; }

.hero-position {
    position: relative; z-index: 2; width: 100%; display: flex; padding: 56px max(24px, 6vw);
    box-sizing: border-box;
}
.hero-pos-haut-gauche { align-items: flex-start; justify-content: flex-start; text-align: left; }
.hero-pos-haut-droite { align-items: flex-start; justify-content: flex-end; text-align: right; }
.hero-pos-bas-gauche  { align-items: flex-end;   justify-content: flex-start; text-align: left; }
.hero-pos-bas-droite  { align-items: flex-end;   justify-content: flex-end;   text-align: right; }
.hero-pos-haut-droite .hero-actions, .hero-pos-bas-droite .hero-actions { justify-content: flex-end; }
.hero-pos-haut-droite p.lead, .hero-pos-bas-droite p.lead { margin-left: auto; }
.hero-texte-zone { max-width: 640px; }

@media (max-width: 900px) {
    .hero.hero-avec-image {
        display: block;
        min-height: 0;
        background-image: none !important;
    }
    .hero-image-mobile {
        display: block;
        width: 100%;
        max-height: 320px;
        object-fit: contain;
        background: var(--banniere-fond, #fff);
        padding: 16px 0;
    }
    .hero.hero-avec-image .hero-position {
        position: static;
        display: block;
        padding: 28px 20px 36px;
    }
    .hero.hero-avec-image .hero-texte-zone {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .hero-position { padding: 40px 20px; }
    .hero-pos-haut-droite, .hero-pos-bas-droite { text-align: left; justify-content: flex-start; }
    .hero-pos-haut-droite .hero-actions, .hero-pos-bas-droite .hero-actions { justify-content: flex-start; }
    .hero-pos-haut-droite p.lead, .hero-pos-bas-droite p.lead { margin-left: 0; }
}

/* --- Sections / cartes -------------------------------------------------- */
.section { padding: 64px 0; }

/* --- Pages légales (mentions, confidentialité) ------------------------ */
.contenu-page-legale { max-width: 760px; font-size: 1.02rem; line-height: 1.75; color: var(--charbon); }
.contenu-page-legale h2 { margin-top: 32px; font-size: 1.2rem; }
.contenu-page-legale ul, .contenu-page-legale ol { padding-left: 22px; }
.section-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; }
.section-tete .eyebrow-inline { color: var(--orange); font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: .08em; }

.grille-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }

.carte {
    background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--ombre);
    display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease;
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.carte-image { aspect-ratio: 16/10; background: var(--bleu-clair) center/cover no-repeat; position: relative; }
.carte-image .date-badge {
    position: absolute; top: 12px; left: 12px; background: #fff; border-radius: 10px;
    padding: 6px 10px; text-align: center; box-shadow: var(--ombre); line-height: 1.1;
}
.carte-image .date-badge .jour { display: block; font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.2rem; color: var(--orange); }
.carte-image .date-badge .mois { display: block; font-size: 0.68rem; text-transform: uppercase; color: var(--gris); font-weight: 600; }
.carte-corps { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.carte-corps h3 { font-size: 1.15rem; margin-bottom: 8px; }
.carte-corps .meta { color: var(--gris); font-size: 0.85rem; margin-bottom: 10px; display: flex; gap: 14px; flex-wrap: wrap; }
.carte-corps p { color: var(--gris); font-size: 0.92rem; }
.carte-corps .lien-plus { margin-top: auto; font-weight: 600; color: var(--bleu); }

.badge {
    display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.badge-bleu { background: var(--bleu-clair); color: var(--bleu); }
.badge-orange { background: #FDEBDD; color: var(--orange-fonce); }
.badge-vert { background: #E3F2E5; color: var(--vert-fonce); }
.badge-gris { background: var(--gris-clair); color: var(--gris); }

/* --- Infos pratiques ------------------------------------------------------ */
.info-tuile {
    background: #fff; border-radius: var(--radius); padding: 26px; box-shadow: var(--ombre);
    border-top: 4px solid var(--vert);
}
.info-tuile .icone { width: 46px; height: 46px; border-radius: 50%; background: #E3F2E5; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; color: var(--vert-fonce); font-size: 1.3rem; }

/* --- Calendrier de disponibilité compact (espace association) ------------- */
.mini-calendrier { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--ombre); width: 100%; max-width: 240px; border: 1px solid var(--gris-clair); }
.mini-calendrier-entete { background: var(--bleu-fonce); color: #fff; text-align: center; padding: 10px; font-weight: 700; font-size: 0.85rem; letter-spacing: .02em; }
.mini-calendrier-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 12px; }
.mini-calendrier-jour { text-align: center; font-size: 0.68rem; color: var(--gris); font-weight: 700; padding-bottom: 4px; }
.mini-calendrier-case {
    width: 26px; height: 26px; margin: 0 auto; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.76rem; font-weight: 600;
}
.mini-calendrier-case.vide { visibility: hidden; }
.mini-calendrier-case.dispo { background: #E3F2E5; color: var(--vert-fonce); }
.mini-calendrier-case.indispo { background: #F5A9A9; color: #7A1F1F; }
.mini-calendrier-case.passe { color: #ccc; }
.calendrier-legende { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.calendrier-legende.dispo { background: #E3F2E5; border: 1px solid var(--vert-fonce); }
.calendrier-legende.indispo { background: #F5A9A9; border: 1px solid #7A1F1F; }

/* --- Sponsors --------------------------------------------------------------- */
.sponsors-bande { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: center; }
.sponsors-bande img { max-height: 64px; filter: grayscale(15%); opacity: .9; }
.sponsors-niveaux { display: grid; gap: 18px; }

.logos-partenaires-institutionnels { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.logos-partenaires-institutionnels a { display: inline-flex; transition: transform .15s ease, opacity .15s ease; }
.logos-partenaires-institutionnels a:hover { transform: translateY(-2px); opacity: .85; }
.logos-partenaires-institutionnels img { max-width: 128px; max-height: 128px; width: auto; height: auto; object-fit: contain; }

.sponsor-ligne { display: flex; align-items: center; gap: 18px; background: #fff; padding: 16px 20px; border-radius: var(--radius-sm); box-shadow: var(--ombre); }
.sponsor-ligne img { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; background: var(--creme); }

/* --- Calendrier public ------------------------------------------------------- */
.calendrier-liste { display: flex; flex-direction: column; gap: 12px; }
.calendrier-item { display: grid; grid-template-columns: 90px 1fr auto; gap: 18px; align-items: center; background: #fff; padding: 16px 20px; border-radius: var(--radius-sm); box-shadow: var(--ombre); }
.calendrier-item .date-bloc { text-align: center; background: var(--bleu-clair); border-radius: 10px; padding: 10px 6px; }
.calendrier-item .date-bloc .jour { font-family: 'Fraunces', serif; font-weight: 700; color: var(--bleu); font-size: 1.3rem; display: block; }
.calendrier-item .date-bloc .mois { font-size: 0.68rem; text-transform: uppercase; color: var(--bleu); font-weight: 600; }
@media (max-width: 640px) { .calendrier-item { grid-template-columns: 60px 1fr; } .calendrier-item .action { grid-column: 1 / -1; } }

/* --- Formulaires -------------------------------------------------------------- */
.form-carte { background: #fff; border-radius: var(--radius); padding: 32px; box-shadow: var(--ombre); max-width: 520px; margin: 0 auto; }

/* --- Modale (charte du membre) --------------------------------------------------- */
.modale-overlay {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: rgba(18,53,99,.55); align-items: center; justify-content: center; padding: 20px;
}
.modale-overlay.visible { display: flex; }
.modale-carte {
    background: #fff; border-radius: var(--radius); width: 100%; max-width: 640px; max-height: 85vh;
    display: flex; flex-direction: column; box-shadow: var(--ombre-forte); overflow: hidden;
}
.modale-entete { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--gris-clair); }
.modale-fermer { background: none; border: none; font-size: 1.2rem; color: var(--gris); cursor: pointer; line-height: 1; }
.modale-corps { padding: 22px; overflow-y: auto; flex: 1; line-height: 1.7; }
.modale-corps p:first-child { margin-top: 0; }
.modale-pied { padding: 18px 22px; border-top: 1px solid var(--gris-clair); background: var(--creme); display: flex; flex-direction: column; gap: 14px; }
.modale-pied button:disabled { opacity: .5; cursor: not-allowed; }
.champ { margin-bottom: 18px; }
.champ label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
.champ input, .champ select, .champ textarea {
    width: 100%; padding: 11px 14px; border: 1.5px solid var(--gris-clair); border-radius: var(--radius-sm);
    font-family: inherit; font-size: 0.95rem; background: #fff;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--bleu); outline: none; }
.champ-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; }
.champ-checkbox input { width: auto; margin-top: 3px; }
.aide { font-size: 0.8rem; color: var(--gris); margin-top: 4px; }
.erreur-champ { color: #C94E4E; font-size: 0.82rem; margin-top: 4px; }

.alerte { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 0.92rem; }
.alerte-succes { background: #E3F2E5; color: var(--vert-fonce); }
.alerte-erreur { background: #FBE7E7; color: #A93A3A; }
.alerte-info { background: var(--bleu-clair); color: var(--bleu-fonce); }

/* --- Footer -------------------------------------------------------------------- */
/* --- Bande d'inscription newsletter -------------------------------------- */
.newsletter-bande { background: var(--bleu); padding: 32px 0; margin-top: 40px; }
.newsletter-contenu { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-form input[type="text"], .newsletter-form input[type="email"] {
    padding: 12px 16px; border-radius: 999px; border: none; font-family: inherit; font-size: 0.92rem; min-width: 160px;
}
.newsletter-form input[type="email"] { min-width: 220px; }
.newsletter-form input:focus { outline: 3px solid rgba(255,255,255,.4); }
@media (max-width: 640px) {
    .newsletter-contenu { flex-direction: column; align-items: stretch; text-align: center; }
    .newsletter-form { flex-direction: column; }
}

.site-footer { background: var(--bleu-fonce); color: #C9D9F0; padding: 48px 0 24px; }
.footer-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; margin-bottom: 32px; }
.site-footer h4 { color: #fff; font-size: 1rem; }
.site-footer a { color: #C9D9F0; }
.site-footer a:hover { color: #fff; }
.footer-bas { border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 0.82rem; }

/* ==========================================================================
   ESPACES CONNECTÉS (membre / bureau) — mise en page applicative
   Barre du haut (marque + bascule membre/bureau + avatar) suivie d'une
   rangée d'onglets horizontaux (desktop) qui se transforme en tiroir de
   menu classique sur mobile/tablette.
   ========================================================================== */
.app-shell { min-height: 100vh; background: var(--creme); }

.app-topbar {
    background: var(--bleu-fonce); color: #fff; padding: 12px 20px;
    display: flex; align-items: center; gap: 16px;
    position: sticky; top: 0; z-index: 20;
}
.app-marque { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.app-marque-texte { color: #fff; font-weight: 700; font-size: 0.95rem; }
.app-menu-toggle { display: none; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: #fff; padding: 4px; }

.app-bascule { display: flex; background: rgba(255,255,255,.12); border-radius: 999px; padding: 3px; margin-left: 8px; }
.app-bascule-opt {
    background: none; border: none; color: #DCE7F8; padding: 6px 16px; border-radius: 999px;
    font-size: 0.83rem; font-weight: 600; cursor: pointer; font-family: inherit;
}
.app-bascule-opt.actif { background: #fff; color: var(--bleu-fonce); }

.app-topbar-droite { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.app-titre-page { color: #DCE7F8; font-size: 0.85rem; }

/* --- Onglets (desktop) / tiroir de menu (mobile) -------------------------- */
.app-menu-mobile { background: #fff; border-bottom: 1px solid var(--gris-clair); position: sticky; top: 56px; z-index: 19; }
.app-onglets { display: flex; flex-wrap: wrap; padding: 0 12px; }
.app-onglets.cache { display: none; }
.app-onglets-titre-mobile { display: none; }
.app-onglets a {
    display: flex; align-items: center; gap: 6px; color: var(--gris); text-decoration: none;
    padding: 12px 14px; font-size: 0.85rem; font-weight: 600; border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.app-onglets a:hover { color: var(--charbon); }
.app-onglets a.actif { color: var(--bleu); border-bottom-color: var(--orange); }
.app-menu-mobile-bas { display: none; }

/* --- Groupes de liens avec sous-menu (desktop : menu déroulant au clic ;
   mobile : simple sous-titre au-dessus des liens, voir plus bas) --------- */
.app-groupe { position: relative; }
.app-groupe-bouton {
    display: flex; align-items: center; gap: 6px; color: var(--gris);
    padding: 12px 14px; font-size: 0.85rem; font-weight: 600; border: none; border-bottom: 2px solid transparent;
    white-space: nowrap; background: none; cursor: pointer; font-family: inherit; height: 100%;
}
.app-groupe-bouton:hover { color: var(--charbon); }
.app-groupe-bouton.actif { color: var(--bleu); border-bottom-color: var(--orange); }
.app-groupe-fleche { font-size: 0.7em; transition: transform .15s ease; }
.app-groupe.ouvert .app-groupe-fleche { transform: rotate(180deg); }
.app-groupe-menu {
    display: none; position: absolute; top: 100%; left: 0; z-index: 50;
    background: #fff; border-radius: var(--radius-sm); box-shadow: var(--ombre-forte);
    padding: 6px; min-width: 200px; flex-direction: column;
}
.app-groupe.ouvert .app-groupe-menu { display: flex; }
.app-groupe-menu a { padding: 10px 12px; border-radius: 6px; border-bottom: none; }
.app-groupe-menu a:hover { background: var(--creme); color: var(--charbon); }
.app-groupe-menu a.actif { background: var(--bleu-clair); border-bottom: none; }
.app-groupe-titre-mobile { display: none; }

.app-main { flex: 1; min-width: 0; }
.app-content { padding: 24px; max-width: 1280px; }

@media (max-width: 900px) {
    .app-menu-toggle { display: block; }
    .app-titre-page { display: none; }

    .app-topbar { flex-wrap: wrap; row-gap: 8px; }
    .app-bascule { order: 3; flex-basis: 100%; margin-left: 0; justify-content: center; }
    .app-bascule-opt { flex: 1; text-align: center; }

    .app-menu-mobile {
        position: fixed; inset: 56px 0 0 0; z-index: 199; overflow-y: auto;
        transform: translateY(-8px); opacity: 0; visibility: hidden;
        transition: opacity .15s ease, transform .15s ease, visibility .15s;
        border-bottom: none; box-shadow: var(--ombre-forte);
        padding-bottom: 70px; /* laisse voir le dernier lien au-dessus de la barre basse */
    }
    .app-menu-mobile.ouvert { transform: translateY(0); opacity: 1; visibility: visible; }
    .app-onglets { flex-direction: column; padding: 8px 6px; border-bottom: 1px solid var(--gris-clair); }
    .app-onglets a { border-bottom: none; border-radius: var(--radius-sm); padding: 11px 12px; }
    .app-onglets a.actif { background: var(--bleu-clair); }
    .app-onglets-titre-mobile { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); font-weight: 700; padding: 12px 12px 4px; }
    .app-menu-mobile-bas { display: block; background: var(--bleu-fonce); color: #fff; padding: 16px; }

    /* Sur mobile, le tiroir est déjà une liste déroulante : pas besoin d'un
       second niveau de clic. Le bouton disparaît, son sous-menu reste
       toujours visible, avec juste un petit sous-titre au-dessus. */
    .app-groupe-bouton { display: none; }
    .app-groupe-menu {
        display: flex !important; position: static; box-shadow: none; padding: 0; min-width: 0;
        flex-direction: column;
    }
    .app-groupe-titre-mobile { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); font-weight: 700; padding: 12px 12px 4px; }
    .app-groupe-menu a { border-radius: var(--radius-sm); padding: 11px 12px; }
    .app-groupe-menu a.actif { background: var(--bleu-clair); }
}

/* --- Barre de navigation basse (mobile uniquement) ------------------------ */
.app-nav-bas { display: none; }
.app-nav-bas.cache { display: none !important; }

@media (max-width: 900px) {
    .app-nav-bas {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
        background: #fff; border-top: 1px solid var(--gris-clair);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .app-nav-bas a, .app-nav-bas .app-nav-bas-plus {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 8px 4px 6px; font-size: 0.66rem; color: var(--gris); text-decoration: none;
        background: none; border: none; font-family: inherit; cursor: pointer; line-height: 1.2;
    }
    .app-nav-bas .icone { font-size: 1.15rem; line-height: 1; }
    .app-nav-bas a.actif { color: var(--bleu); }
    .app-content { padding-bottom: 78px; } /* laisse la place pour la barre basse fixe */
}

.stat-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-bottom: 28px; }
.stat-carte { background: #fff; border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--ombre); border-left: 4px solid var(--bleu); }
.stat-carte .valeur { font-family: 'Fraunces', serif; font-size: 1.8rem; font-weight: 700; color: var(--bleu-fonce); }
.stat-carte .label { font-size: 0.82rem; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; }
.stat-carte.vert { border-left-color: var(--vert); }
.stat-carte.vert .valeur { color: var(--vert-fonce); }
.stat-carte.orange { border-left-color: var(--orange); }
.stat-carte.orange .valeur { color: var(--orange-fonce); }
.stat-carte.bleu { border-left-color: var(--bleu); }
.stat-carte.bleu .valeur { color: var(--bleu-fonce); }
.stat-sous-label { font-size: 0.76rem; color: var(--gris); margin-top: 2px; }
.stat-grille-compacte { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (min-width: 900px) {
    .stat-grille-compacte { grid-template-columns: repeat(5, 1fr); }
}

.panneau { background: #fff; border-radius: var(--radius); padding: 24px; box-shadow: var(--ombre); margin-bottom: 24px; }
.panneau-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }

table.table-app { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.table-app th { text-align: left; padding: 10px 14px; background: var(--creme); color: var(--gris); font-size: 0.78rem; text-transform: uppercase; letter-spacing: .03em; }
table.table-app td { padding: 12px 14px; border-bottom: 1px solid var(--gris-clair); vertical-align: middle; }
table.table-app tr:last-child td { border-bottom: none; }
.table-scroll { overflow-x: auto; }

/* --- Pagination et recherche --------------------------------------------- */
.pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 24px; justify-content: center; }
.pagination-num { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: 999px; color: var(--bleu); font-size: 0.9rem; font-weight: 600; }
.pagination-num:hover { background: var(--bleu-clair); }
.pagination-num.actuelle { background: var(--bleu); color: #fff; }
.pagination-ellipse { color: var(--gris); padding: 0 4px; }
.barre-recherche { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.barre-recherche input[type="search"] { flex: 1; min-width: 220px; padding: 12px 16px; border-radius: 999px; border: 1.5px solid var(--gris-clair); font-family: inherit; font-size: 0.95rem; }
.barre-recherche input[type="search"]:focus { border-color: var(--bleu); outline: none; }
.actions-ligne { display: flex; gap: 6px; }
.avatar-init { width: 34px; height: 34px; border-radius: 50%; background: var(--bleu-clair); color: var(--bleu); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; transition: transform .15s ease, box-shadow .15s ease; }
a.avatar-init:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(27,74,140,.3); }

/* --- Gantt ------------------------------------------------------------------- */
.gantt-wrapper { overflow-x: auto; }
.gantt { display: grid; min-width: 900px; }
.gantt-ligne-entete, .gantt-ligne { display: grid; grid-template-columns: 240px 1fr; border-bottom: 1px solid var(--gris-clair); }
.gantt-label { padding: 10px 14px; font-size: 0.88rem; border-right: 1px solid var(--gris-clair); display: flex; align-items: center; gap: 8px; }
.gantt-famille-tag { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.gantt-piste { position: relative; height: 42px; }
.gantt-barre { position: absolute; top: 8px; height: 26px; border-radius: 7px; display: flex; align-items: center; padding: 0 10px; font-size: 0.72rem; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.gantt-barre .progression { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,.35); border-radius: 7px 0 0 7px; }
.gantt-mois-entete { display: flex; }
.gantt-mois-entete span { flex: 1; text-align: center; font-size: 0.75rem; color: var(--gris); padding: 8px 0; border-right: 1px solid var(--gris-clair); }

/* --- Installer l'app (PWA) ----------------------------------------------- */
.install-banniere {
    position: fixed; bottom: 16px; left: 16px; right: 16px; max-width: 420px; margin: 0 auto;
    background: #fff; border-radius: var(--radius); box-shadow: var(--ombre-forte);
    padding: 16px 18px; display: none; align-items: center; gap: 14px; z-index: 500;
}
.install-banniere.visible { display: flex; }
.install-banniere .logo-badge { width: 42px; height: 42px; }
.install-banniere .texte { flex: 1; }
.install-banniere .texte strong { display: block; font-size: 0.92rem; }
.install-banniere .texte span { font-size: 0.8rem; color: var(--gris); }
.install-banniere .fermer { background: none; border: none; color: var(--gris); font-size: 1.1rem; cursor: pointer; }

/* Petites utilitaires */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.text-centre { text-align: center; }
.flex { display: flex; } .gap-8 { gap: 8px; } .gap-16 { gap: 16px; }
.espace-entre { justify-content: space-between; }
.aligne-centre { align-items: center; }

/* ==========================================================================
   ESPACE APP (bureau / membre) — habillage "outil de gestion"
   Ne s'applique qu'aux pages connectées (voir classe .espace-app sur <body>
   dans includes/app-header.php). Le site public garde son identité chaleureuse
   (crème, Fraunces) inchangée : tout ce qui suit est scopé sous .espace-app.

   Principe : bordures fines plutôt qu'ombres, palette neutre froide plutôt
   que crème, densité resserrée, un seul accent (le bleu de la charte) pour
   les actions/états actifs — l'orange reste réservé aux appels à l'action
   principaux, comme sur le site public.
   ========================================================================== */
.espace-app {
    --creme: #F4F5F7;       /* fond général + fonds de mise en évidence (redéfinit la variable pour tout ce qui est sous .espace-app) */
    --gris-clair: #E3E6EB;  /* bordures */
    --gris: #667085;        /* texte secondaire */
    --charbon: #14181F;     /* texte principal, encre froide */
    --radius: 8px;
    --radius-sm: 6px;
    --ombre: none;
    --ombre-forte: 0 8px 24px rgba(16,24,40,.14);
    background: var(--creme);
}
.espace-app h1, .espace-app h2, .espace-app h3, .espace-app h4 {
    font-family: 'Work Sans', -apple-system, sans-serif;
    color: var(--charbon);
    letter-spacing: -0.01em;
}
.espace-app h3 { font-size: 1.05rem; font-weight: 600; }
.espace-app .app-content h1 { font-size: 1.3rem; }

/* --- Coquille applicative : la densité est déjà réglée dans les règles
   de base ci-dessus (.app-topbar, .app-onglets, .app-content) ------------ */
/* --- Cartes / panneaux : bordure fine plutôt qu'ombre --------------------- */
.espace-app .panneau { border-radius: var(--radius); padding: 20px; box-shadow: none; border: 1px solid var(--gris-clair); margin-bottom: 16px; }
.espace-app .panneau-tete { margin-bottom: 14px; }
.espace-app .stat-carte { box-shadow: none; border: 1px solid var(--gris-clair); border-radius: var(--radius); }
.espace-app .stat-carte .valeur { font-family: 'Work Sans', sans-serif; font-size: 1.5rem; }
.espace-app .stat-carte .label { text-transform: none; font-size: 0.8rem; letter-spacing: 0; }

/* --- Tableaux : cadre net, en-tête bien distinct, densité resserrée ------- */
.espace-app .table-scroll { border: 1px solid var(--gris-clair); border-radius: var(--radius); }
.espace-app table.table-app { font-size: 0.87rem; }
.espace-app table.table-app th {
    text-transform: none; font-size: 0.78rem; font-weight: 700; color: var(--charbon);
    padding: 11px 14px; background: #F7F8FA; border-bottom: 1px solid #D8DCE3;
}
.espace-app table.table-app td { padding: 11px 14px; border-bottom: 1px solid var(--gris-clair); }
.espace-app table.table-app tbody tr:last-child td { border-bottom: none; }
.espace-app table.table-app tbody tr:hover { background: #FAFBFC; }
/* Prêt déjà rendu : grisé pour le distinguer d'un coup d'œil des prêts en cours */
.espace-app table.table-app tbody tr.pret-rendu { opacity: .55; }
.espace-app table.table-app tbody tr.pret-rendu:hover { opacity: .8; }
.espace-app .actions-ligne { flex-wrap: wrap; }
.espace-app .btn { white-space: nowrap; }

/* --- Tableaux en cartes empilées sur mobile --------------------------------
   Un petit script (main.js) reporte le texte de chaque en-tête de colonne
   sur l'attribut data-label de la cellule correspondante, pour tout tableau
   .table-app, sans avoir à modifier chaque page individuellement. Le CSS
   ci-dessous transforme ensuite la structure d'un tableau en une pile de
   cartes lisibles, avec l'intitulé de chaque champ affiché à gauche. ------- */
@media (max-width: 900px) {
    .espace-app .table-scroll { border: none; }
    .espace-app table.table-app,
    .espace-app table.table-app tbody,
    .espace-app table.table-app tr,
    .espace-app table.table-app td {
        display: block; width: 100%;
    }
    .espace-app table.table-app thead { display: none; }
    .espace-app table.table-app tbody tr {
        border: 1px solid var(--gris-clair); border-radius: var(--radius); margin-bottom: 10px; padding: 10px 12px; background: #fff;
    }
    .espace-app table.table-app tbody tr:last-child { margin-bottom: 0; }
    .espace-app table.table-app td { border: none; padding: 4px 0; text-align: left; }
    .espace-app table.table-app td:empty { display: none; }
    .espace-app table.table-app td[data-label] { padding-left: 42%; position: relative; min-height: 22px; }
    .espace-app table.table-app td[data-label]::before {
        content: attr(data-label); position: absolute; left: 0; top: 4px; width: 38%;
        font-weight: 600; font-size: 0.72rem; color: var(--gris);
    }
    /* Première cellule sans étiquette (vignette/avatar) : affichée en ligne, pas en bloc plein cadre */
    .espace-app table.table-app td:first-child:not([data-label]) { display: inline-block; margin-bottom: 6px; }
    /* La cellule d'actions se détache visuellement du reste, boutons pleine largeur */
    .espace-app table.table-app td:has(.actions-ligne) {
        padding-left: 0; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--gris-clair);
    }
    .espace-app table.table-app td:has(.actions-ligne)::before { content: none; }
}

/* En paysage, largeur suffisante pour afficher les cartes sur 2 colonnes
   plutôt qu'empilées en une seule — évite une longue bande étroite au
   milieu d'un écran large. */
@media (max-width: 900px) and (orientation: landscape) {
    .espace-app .table-scroll { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
    .espace-app table.table-app, .espace-app table.table-app tbody { display: contents; }
    .espace-app table.table-app tbody tr { margin-bottom: 0; }
}

/* --- Boutons : plus plats, moins de relief -------------------------------- */
.espace-app .btn { border-radius: var(--radius-sm); }
.espace-app .btn-primaire { box-shadow: none; }
.espace-app .btn-fantome { color: var(--charbon); }
.espace-app .btn-fantome:hover { background: var(--creme); }

/* --- Badges : plus discrets ------------------------------------------------ */
.espace-app .badge { font-weight: 600; }

/* --- Formulaires : champs plus sobres -------------------------------------- */
.espace-app .champ input, .espace-app .champ select, .espace-app .champ textarea {
    border-radius: var(--radius-sm); border-color: var(--gris-clair); padding: 9px 12px; font-size: 0.9rem;
}
.espace-app .form-carte { box-shadow: none; border: 1px solid var(--gris-clair); }

/* --- Alertes : liseré plutôt qu'aplat de couleur --------------------------- */
.espace-app .alerte { background: #fff; border: 1px solid var(--gris-clair); border-left: 3px solid var(--gris); border-radius: var(--radius-sm); }
.espace-app .alerte-succes { border-left-color: var(--vert); color: var(--vert-fonce); }
.espace-app .alerte-erreur { border-left-color: #C94E4E; color: #A93A3A; }
.espace-app .alerte-info { border-left-color: var(--bleu); color: var(--bleu-fonce); }

/* --- Pagination / recherche ------------------------------------------------ */
.espace-app .barre-recherche input[type="search"] { border-radius: var(--radius-sm); }

/* --- Grille de panneaux repliables (paramètres, pages légales) ------------ */
.espace-app .grille-panneaux { columns: 2 380px; column-gap: 16px; }
.espace-app .grille-panneaux .panneau { break-inside: avoid; display: inline-block; width: 100%; }
@media (max-width: 760px) {
    .espace-app .grille-panneaux { columns: 1; }
}

.espace-app .panneau-repliable summary {
    cursor: pointer; font-weight: 600; font-size: 1.05rem; color: var(--charbon);
    list-style: none; display: flex; align-items: center; justify-content: space-between;
}
.espace-app .panneau-repliable summary::-webkit-details-marker { display: none; }
.espace-app .panneau-repliable summary::after {
    content: '+'; color: var(--gris); font-size: 1.2rem; font-weight: 400; flex-shrink: 0; margin-left: 12px;
}
.espace-app .panneau-repliable[open] summary::after { content: '−'; }
.espace-app .panneau-repliable-corps { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gris-clair); }

/* ==========================================================================
   Correctifs généraux mobile — débordements (emails, boutons, blocs)
   Ces règles ne s'appliquent qu'à l'espace connecté et qu'en dessous de
   900px : elles n'ont aucun effet sur le rendu desktop.
   ========================================================================== */
@media (max-width: 900px) {
    /* Empêche toute cause de défilement horizontal de la page entière,
       sans toucher aux zones qui doivent défiler volontairement (tableaux
       transformés en cartes plus haut, Gantt, qui gardent leur propre
       overflow-x:auto local). */
    .espace-app .app-shell, .espace-app .app-content { overflow-x: hidden; }

    /* Adresses e-mail, liens et textes longs : ne provoquent plus de
       débordement, se coupent proprement si besoin plutôt que de forcer
       la largeur de leur conteneur. */
    .espace-app .panneau, .espace-app table.table-app td, .espace-app .stat-carte {
        overflow-wrap: anywhere;
    }
    .espace-app .panneau a, .espace-app table.table-app td a {
        word-break: break-word;
    }

    /* Groupes de boutons connus (actions rapides, actions de ligne, cases à
       cocher, classe utilitaire .flex) : reviennent systématiquement à la
       ligne au lieu de déborder, et chaque bouton peut se réduire (par
       défaut, un enfant flex refuse de descendre sous sa largeur naturelle,
       ce qui pousse le conteneur à déborder). */
    .espace-app .panneau-tete,
    .espace-app .actions-ligne,
    .espace-app .champ-checkbox,
    .espace-app .flex {
        flex-wrap: wrap;
    }
    .espace-app .btn { min-width: 0; max-width: 100%; white-space: normal; }

    /* Toute mise en page en grille avec des colonnes fixées en style inline
       (grille du tableau de bord 2fr/1fr, formulaires à plusieurs colonnes...)
       repasse en une seule colonne sur mobile, sur <div> comme sur <form>,
       où qu'elle se trouve (pas seulement à l'intérieur d'un .panneau). */
    .espace-app div[style*="grid-template-columns"],
    .espace-app form[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    /* Les enfants qui utilisaient grid-column:span N pour s'étaler sur
       plusieurs colonnes doivent occuper toute la largeur disponible :
       sinon, CSS Grid recrée de lui-même des colonnes étroites pour
       satisfaire ce span, même si le parent n'a plus qu'une colonne
       déclarée (c'est ce qui provoquait le texte coupé lettre par lettre). */
    .espace-app div[style*="grid-template-columns"] > *,
    .espace-app form[style*="grid-template-columns"] > * {
        grid-column: 1 / -1 !important;
    }

    /* Formulaires ou blocs en display:flex posé en style inline (ex : jauge
       de progression + bouton) : autorisés à passer à la ligne, et le
       curseur ne peut plus forcer une largeur minimale supérieure à ce qui
       est disponible. */
    .espace-app table.table-app form[style*="flex"],
    .espace-app .panneau form[style*="flex"] {
        flex-wrap: wrap;
    }
    .espace-app input[type="range"] { max-width: 100%; }
}