/* Couleurs du logo : bleu, jaune, orange, vert des aquarelles du logo officiel.
   Thème officiel du site depuis le 06/10/2026 (validé par le Bureau), chargé sur toutes les pages par-dessus style.css. */
:root {
  --cream: #F4E6C0;        /* fond de page : pierre dorée de l'aquarelle de Claude Larosa (bulletin d'adhésion), éclaircie */
  --cream-deep: #EAD6A4;   /* fonds de sections : même pierre dorée, plus soutenue */
  --tan: #F2D98F;          /* jaune doré */
  --tan-deep: #EE9A4D;     /* orange du logo, adouci */
  --brown: #315581;        /* bleu du ciel de l'aquarelle : titres, liens */
  --brown-dark: #2B4770;   /* bleu nuit du ciel de l'aquarelle : bandeau, pied de page */
  --ink: #26292E;
  --ink-soft: #5E6470;
  --olive: #4A7350;        /* vert adouci, plus foncé : survol des boutons, textes verts (05/10/2026, demande du président) */
  --sage: #5E8A63;         /* vert adouci, légèrement grisé : menu, boutons d'adhésion, accents */
  --sage-light: #E6EEE4;
  --border: #E2DDD3;
  --shadow: 0 6px 24px rgba(43, 71, 112, 0.12);
  --shadow-sm: 0 2px 10px rgba(43, 71, 112, 0.09);
}
/* Liseré aquarelle sous le bandeau, reprenant la bande de couleurs du logo */
.site-header { background: var(--cream); border-bottom: 5px solid transparent; border-image: linear-gradient(90deg, #2F5BA8 0%, #2F5BA8 22%, #F5C242 35%, #F5C242 45%, #EE7D2B 55%, #EE7D2B 72%, #3E9A4B 85%, #3E9A4B 100%) 1; }
.serpentin .tl-siecle { background: #EE7D2B; }
/* Logo sur fond jaune (même jaune que la page) : on affiche la version sans fond blanc */
img.brand-logo, img.hero-logo, .site-footer .brand img {
  content: url(../img/logo-transparent.png);
  background: var(--cream); border-radius: 8px; padding: 4px 6px; box-sizing: border-box;
}
img.hero-logo { padding: 8px 10px; }
/* Sections alternées : fond neutre, pierre dorée un peu plus soutenue */
.section-alt { background: #EEDCAE; }
/* Encadrés (« Préserver », « Conseiller », actualités, formulaires…) en blanc cassé */
.card, .admin-list li, .form-box, .gallery-filters button, .subtabs button { background: #FBF7EC; }
.card { border-color: #E6D8B5; }


/* Photos dans les encadrés : le fond autour des photos est aussi blanc cassé (le style de la page impose un fond jaune, d'où !important) */
.card img { background: #FBF7EC !important; }
/* Photos des encadrés : un cadre de blanc cassé autour (en haut et sur les côtés) */
.actualite-en-cours > img, .actualite-en-cours > .grid { margin: 1rem 1rem 0; width: calc(100% - 2rem) !important; }
.card > .card-img { margin: .8rem .8rem 0; width: calc(100% - 1.6rem); border-radius: 6px; }
/* Espace de gestion du site (admin/) : cartes et tableaux en blanc cassé */
.admin-stat-card, .admin-table-wrap, .admin-table, .message-card { background: #FBF7EC; }
/* Photos de l'actualité à la une : coins arrondis comme les autres encadrés. La boîte de chaque image est ajustée
   à la photo elle-même (au lieu d'une boîte fixe avec des bandes vides) pour que l'arrondi soit bien visible. */
.actualite-en-cours > .grid { align-items: center; }
.actualite-en-cours > .grid > img { width: auto !important; max-width: 100%; height: auto !important; max-height: 280px; justify-self: center; border-radius: 6px; }
.actualite-en-cours > img { width: auto !important; max-width: calc(100% - 2rem); height: auto !important; max-height: 480px; margin: 1rem auto 0 !important; border-radius: 6px; }
/* Toutes les photos du site (celles qui s'agrandissent au clic) : coins arrondis */
img.lightbox-trigger { border-radius: var(--radius); }
/* Page d'une actualité : même ajustement que sur l'accueil pour que l'arrondi épouse chaque photo */
.grid > img.lightbox-trigger { width: auto !important; max-width: 100%; height: auto !important; max-height: 280px; justify-self: center; align-self: center; background: none !important; }
/* « Nous écrire » : la colonne de gauche dans un encart blanc cassé, assorti au formulaire d'à côté */
#contact .grid > div:first-child { background: #FBF7EC; border: 1px solid #E6D8B5; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.8rem 2rem; align-self: start; }
#contact .info-list li { border-color: #E6D8B5; }

/* ===== Règle « une couleur = une fonction » (avis de Catherine, 30/09/2026) =====
   ORANGE : fond des actualités et des images · BLEU : bandeaux (haut et pied de page), titres, boutons courants
   VERT : menu et tout ce qui mène à l'adhésion · DORÉ + BLANC CASSÉ : fond neutre de tout le reste */

/* ORANGE : actualités (accueil et page Actualités) et images (Galerie) */
#actualites, section:has(> .container > .grid .card[href*="actualite.php"]), section:has(.gallery-grid) { background: #F0A566; }
#actualites .eyebrow, section:has(.gallery-grid) .eyebrow { color: #1F3558; }

/* BLEU : petits intitulés, dates, icônes, filets et boutons courants */
.eyebrow, .card .card-date, .person span, .info-list .ic, .check-list li::before,
.serpentin .tl-texte h4, .cahier-h4 { color: var(--brown); }
.hero .eyebrow, .page-hero .eyebrow, .cta .eyebrow { color: #F2D98F; }
.partner-card { border-left-color: var(--brown); }
.btn-primary { background: var(--brown); }
.btn-primary:hover { background: var(--brown-dark); }
.gallery-filters button:hover { border-color: var(--brown); color: var(--brown); }
.gallery-filters button.active, .lightbox-close:hover, .lightbox-nav:hover { background: var(--brown); border-color: var(--brown); }
.field input:focus, .field textarea:focus { outline-color: var(--brown); }
.person .avatar { background: linear-gradient(150deg, var(--brown), var(--brown-dark)); }

/* VERT : adhésion (boutons et liens qui y mènent, formulaire d'adhésion) */
a.btn-primary[href*="adhesion"], #rejoindre .btn-primary, #rejoindre button[type="submit"] { background: var(--sage); }
a.btn-primary[href*="adhesion"]:hover, #rejoindre .btn-primary:hover { background: var(--olive); }
/* VERT aussi pour tout formulaire d'adhésion, où qu'il soit (ex. page d'accès à la visite 3D) */
form:has(input[name="intent"][value="nouvelle_adhesion"]) .btn-primary,
form:has(select#adh_type) .btn-primary { background: var(--sage); }
form:has(input[name="intent"][value="nouvelle_adhesion"]) .btn-primary:hover,
form:has(select#adh_type) .btn-primary:hover { background: var(--olive); }
/* VERT aussi pour les adhérents : accès à la visite réservé aux adhérents, et régularisation de la cotisation */
form:has(input[name="action"][value="verifier_adherent"]) .btn-primary { background: var(--sage); }
form:has(input[name="action"][value="verifier_adherent"]) .btn-primary:hover { background: var(--olive); }
form:has(input[name="action"][value="regulariser"]) .btn-outline { border-color: var(--sage); color: var(--olive); }
form:has(input[name="action"][value="regulariser"]) .btn-outline:hover { background: var(--sage); color: var(--white); }

/* Demande du président (05/10/2026) : barre de menu dans un vert moins vif que le vert du logo
   (l'orange essayé d'abord n'a pas convenu). Vert adouci, légèrement grisé. */
.main-nav { background: var(--sage); }
.main-nav a { color: #fff; font-weight: 600; }
.main-nav a:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.main-nav a.active { background: var(--cream); color: var(--olive); }
@media (max-width: 720px) { .main-nav { background: var(--sage); } }
/* Boutons clairs (« Découvrir l'association »…) en blanc cassé, comme les cartes, au lieu du blanc pur */
.btn-light { background: #FBF7EC; }
.btn-light:hover { background: var(--tan); }