/* ============================================================
   style.css — icilago.eu (site vitrine)
   Historique : contenu initialement repris de l'ancien site accueil.icilago.fr
   (2026-09-06), page d'accueil remplacée le 2026-09-06 (soir) par une
   présentation plus dynamique/jeune/moderne (demande de Christophe, validée
   sur une maquette à part avant application ici) — dégradés violet/rose,
   démonstration interactive (filtres + rayon + vue liste/carte). Les pages
   intérieures (culture/gastronomie/sortie/utile/tarifs/contact/nousrejoindre)
   gardent pour l'instant la mise en page reprise d'accueil.icilago.fr ;
   elles seront alignées sur le nouveau style au fur et à mesure. Couleurs
   historiques du logo ICILAGO : "ici" bleu marine, "la" vert, "go" rouge —
   conservées ; nouvelle palette d'accent (violet/rose/citron/corail) ajoutée
   pour la page d'accueil et les éléments partagés (header, boutons CTA).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --c-ici: #1e2155;
  --c-la: #8fc11e;
  --c-go: #e31a1a;
  --color-primary: #1e2155;
  --color-primary-dark: #14163b;
  --color-bg: #fdfdfd;
  --color-surface: #ffffff;
  --color-text: #232323;
  --color-text-muted: #6b6b6b;
  --color-border: #e7e7e7;
  --radius: 10px;
  --shadow: 0 2px 14px rgba(0,0,0,0.08);
  --largeur-max: 1140px;
  --accent-violet: #7B5CFA;
  --accent-rose: #FF5FA2;
  --accent-citron: #B4FF39;
  --accent-corail: #FF7A59;
  --accent-ciel: #4FC3F7;
  --degrade-cta: linear-gradient(135deg, var(--c-ici), var(--accent-ciel));
  --font-titres: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-titres); }
.conteneur { max-width: var(--largeur-max); margin: 0 auto; padding: 0 20px; }

/* ---------- Logo texte (span colorés, quand le PNG n'est pas utilisé) ---------- */
.logo-texte .ici { color: var(--c-ici); }
.logo-texte .la { color: var(--c-la); }
.logo-texte .go { color: var(--c-go); }

/* ---------- Barre "applications existantes" (pleine largeur, sous la nav du header) ---------- */
.barre-applications { width: 100%; background: var(--color-primary); }
.barre-applications .conteneur {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 20px;
}
.barre-applications a,
.barre-applications a:link,
.barre-applications a:visited,
.barre-applications a:active,
.barre-applications a:focus {
  color: #fff;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2px;
}
.barre-applications span { color: rgba(255, 255, 255, 0.4); font-size: 12.5px; }

/* ---------- Header ---------- */
.site-header {
  background: rgba(253, 253, 253, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 30;
}
.site-header .conteneur {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-header .logo img { height: 40px; }
.site-header .zone-droite { display: flex; align-items: center; gap: 18px; }
/* Icône hamburger 60x60px — même taille que #btn-menu-hamburger sur events.icilago.eu/
   guide.icilago.eu, demande de Christophe 2026-09-07. */
.btn-hamburger {
  background: none;
  border: none;
  width: 60px;
  height: 60px;
  padding: 0;
  font-size: 60px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.nav-principale {
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow);
  display: none;
  flex-direction: column;
  padding: 10px 20px;
}
.nav-principale.ouvert { display: flex; }
.nav-principale a {
  padding: 12px 0;
  text-decoration: none;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
.nav-principale a:last-child { border-bottom: none; }
.lien-compte {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}
.lien-compte img { height: 22px; width: 22px; }
.btn-app-header {
  display: none;
  background: var(--degrade-cta);
  color: #fff;
  padding: 10px 18px;
  border-radius: 100px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(30, 33, 85, 0.32);
}
@media (min-width: 720px) {
  .btn-app-header { display: inline-block; }
  .nav-principale {
    position: static;
    display: flex !important;
    flex-direction: row;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    gap: 24px;
  }
  .nav-principale a { border-bottom: none; padding: 0; }
  .lien-compte span.texte-court { display: none; }
}
@media (max-width: 719px) {
  .lien-compte .texte-long { display: none; }
}

/* ---------- Bandeau "Téléchargez notre appli" (mobile, sous le header) ---------- */
.bandeau-app-mobile { text-align: center; padding: 10px; background: var(--color-bg); }
.bandeau-app-mobile a {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13.5px;
}
@media (min-width: 720px) { .bandeau-app-mobile { display: none; } }

/* ---------- Hero (page d'accueil) ---------- */
.hero {
  padding: 50px 20px 40px;
  text-align: center;
}
.hero .accroche { font-size: 30px; font-weight: 800; color: var(--color-primary); margin: 0 0 6px; }
.hero .accroche .go { color: var(--c-go); font-style: italic; }
.hero h1 { font-size: 22px; margin: 18px 0 4px; }
.hero .sous-titre { font-size: 15px; color: var(--color-text-muted); margin: 0 0 20px; }
.hero-atouts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 14px 0;
  margin-top: 24px;
}
.hero-atouts span { white-space: nowrap; }
.hero-atouts span:not(:last-child)::after { content: '•'; margin-left: 10px; color: var(--color-border); }

/* ---------- Bloc intro texte (page d'accueil) ---------- */
.bloc-intro { padding: 40px 20px; max-width: 780px; margin: 0 auto; text-align: center; }
.bloc-intro p { font-size: 15px; line-height: 1.6; color: var(--color-text-muted); }
.bloc-intro strong.logo-texte { color: var(--color-text); }

/* ---------- Titres de section génériques ---------- */
.titre-section { text-align: center; font-size: 22px; font-weight: 800; color: var(--color-primary); margin: 0 0 30px; }

/* ---------- Centres d'intérêt (4 tuiles, accueil) ---------- */
section.bloc { padding: 46px 20px; }
.tuiles-interets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: var(--largeur-max);
  margin: 0 auto;
}
@media (max-width: 900px) { .tuiles-interets { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tuiles-interets { grid-template-columns: 1fr; } }
.tuile-interet {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 3/4;
  text-decoration: none;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.tuile-interet img.fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.tuile-interet::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%);
  z-index: 1;
}
.tuile-interet .contenu { position: relative; z-index: 2; padding: 16px; }
.tuile-interet img.icone { width: 34px; height: 34px; margin-bottom: 8px; filter: brightness(0) invert(1); }
.tuile-interet h3 { margin: 0 0 4px; font-size: 16px; }
.tuile-interet .lien-decouvrir { font-size: 12.5px; font-weight: 700; text-decoration: underline; }

/* ---------- Annonceurs référencés (accueil) ---------- */
.grille-annonceurs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: var(--largeur-max);
  margin: 0 auto;
}
@media (max-width: 820px) { .grille-annonceurs { grid-template-columns: 1fr; } }
.carte-annonceur {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--color-surface);
}
.carte-annonceur img { width: 100%; height: 180px; object-fit: cover; }
.carte-annonceur .contenu { padding: 14px 16px; }
.carte-annonceur h3 { margin: 0 0 4px; font-size: 15px; color: var(--color-primary); }
.carte-annonceur p.accroche-annonceur { margin: 0 0 8px; font-size: 13px; color: var(--color-text-muted); font-style: italic; }
.carte-annonceur .lieu { font-size: 12px; color: var(--color-text-muted); }

/* ---------- Mission stratégique (texte + visuel) ---------- */
.bloc-mission {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  max-width: var(--largeur-max);
  margin: 0 auto;
}
@media (max-width: 820px) { .bloc-mission { grid-template-columns: 1fr; } }
.bloc-mission img { border-radius: var(--radius); box-shadow: var(--shadow); }
.bloc-mission p { font-size: 14.5px; line-height: 1.6; color: var(--color-text-muted); }

/* ---------- Bloc "Plus simple avec notre application" ---------- */
.bloc-app-simple { text-align: center; padding: 46px 20px; background: var(--color-primary); color: #fff; }
.bloc-app-simple h2 { font-size: 22px; margin: 0 0 6px; }
.bloc-app-simple p { margin: 0 0 20px; font-size: 14.5px; color: rgba(255,255,255,0.85); }
.bloc-app-simple a.lien-app-icone { display: inline-block; }
.bloc-app-simple a.lien-app-icone img { width: 64px; height: 64px; margin: 0 auto; border-radius: 16px; }
.bloc-app-simple .clic-ici { font-size: 12.5px; margin-top: 8px; color: rgba(255,255,255,0.7); }

/* ---------- Satisfaction (notes) ---------- */
.bloc-satisfaction { text-align: center; padding: 40px 20px; }
.bloc-satisfaction h3 { font-size: 15px; color: var(--color-text-muted); margin: 0 0 20px; text-transform: uppercase; letter-spacing: .03em; }
.notes-satisfaction { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; }
.note-satisfaction .valeur { font-size: 34px; font-weight: 800; color: var(--color-primary); }
.note-satisfaction .valeur .etoile { color: var(--c-la); font-size: 22px; }
.note-satisfaction p { margin: 4px 0 0; font-size: 12.5px; color: var(--color-text-muted); }

/* ---------- Inoubliable (récit voyage) ---------- */
.bloc-recit { max-width: 780px; margin: 0 auto; padding: 40px 20px; text-align: center; }
.bloc-recit h2 { font-size: 22px; color: var(--color-primary); margin: 0 0 16px; }
.bloc-recit p { font-size: 14.5px; line-height: 1.6; color: var(--color-text-muted); margin: 0 0 14px; }

/* ---------- Témoignages ---------- */
.grille-temoignages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: var(--largeur-max);
  margin: 0 auto;
}
@media (max-width: 820px) { .grille-temoignages { grid-template-columns: 1fr; } }
.carte-temoignage {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
}
.carte-temoignage .nom { font-weight: 700; margin-bottom: 6px; }
.carte-temoignage p.citation { font-size: 13.5px; color: var(--color-text-muted); line-height: 1.5; margin: 0 0 10px; }
.carte-temoignage .etoiles { color: var(--c-la); letter-spacing: 2px; }
.carte-temoignage .vues { font-size: 11.5px; color: var(--color-text-muted); margin-left: 6px; }

/* ---------- Expériences réelles (4 colonnes texte) ---------- */
.grille-experiences {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: var(--largeur-max);
  margin: 0 auto;
}
@media (max-width: 900px) { .grille-experiences { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .grille-experiences { grid-template-columns: 1fr; } }
.grille-experiences p { font-size: 13.5px; line-height: 1.5; color: var(--color-text-muted); }
.grille-experiences strong { color: var(--color-primary); }

/* ---------- Chiffres clés ---------- */
.bloc-chiffres {
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 50px 20px;
}
.bloc-chiffres::before { content: ''; position: absolute; inset: 0; background: rgba(30,33,85,0.72); }
.grille-chiffres {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: var(--largeur-max);
  margin: 0 auto;
  text-align: center;
  color: #fff;
}
@media (max-width: 700px) { .grille-chiffres { grid-template-columns: repeat(2, 1fr); } }
.chiffre-cle .valeur { font-size: 30px; font-weight: 800; }
.chiffre-cle p { margin: 4px 0 0; font-size: 13px; color: rgba(255,255,255,0.85); }

/* ---------- Section Annonceur (recrutement) ---------- */
.bloc-annonceur {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  max-width: var(--largeur-max);
  margin: 0 auto;
}
@media (max-width: 820px) { .bloc-annonceur { grid-template-columns: 1fr; } }
.bloc-annonceur img { border-radius: var(--radius); box-shadow: var(--shadow); }
.bloc-annonceur p { font-size: 14.5px; line-height: 1.6; color: var(--color-text-muted); }
.btn-cta {
  display: inline-block;
  background: var(--degrade-cta);
  color: #fff;
  padding: 14px 26px;
  border-radius: 100px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14.5px;
  margin-top: 10px;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 8px 22px rgba(30, 33, 85, 0.35);
}
.encart-gratuit {
  background: #fff7ea;
  border: 1px solid #f2ddb0;
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

/* ---------- Envie à portée de clics (mini tuiles + visiteur) ---------- */
.mini-tuiles-interets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: var(--largeur-max);
  margin: 0 auto 20px;
}
@media (max-width: 700px) { .mini-tuiles-interets { grid-template-columns: repeat(2, 1fr); } }
.mini-tuile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
}
.mini-tuile img { width: 30px; height: 30px; margin: 0 auto 8px; }
.mini-tuile span { font-size: 13px; font-weight: 600; }

.bloc-visiteur-cta {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 30px 20px;
}
.bloc-visiteur-cta p { font-size: 14px; line-height: 1.6; color: var(--color-text-muted); margin: 0 0 10px; }
.bloc-visiteur-cta .hint-etoile { font-size: 11.5px; color: var(--color-text-muted); margin-top: 10px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-primary); color: rgba(255,255,255,0.85); padding: 46px 20px 24px; margin-top: 20px; }
.grille-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: var(--largeur-max);
  margin: 0 auto 30px;
}
@media (max-width: 820px) { .grille-footer { grid-template-columns: 1fr; } }
.colonne-footer h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 14px; }
.colonne-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.colonne-footer a { text-decoration: none; font-size: 13.5px; color: rgba(255,255,255,0.85); }
.colonne-footer a:hover { text-decoration: underline; }
.colonne-footer span.non-lien { font-size: 13.5px; color: rgba(255,255,255,0.6); }
.newsletter-form { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.newsletter-form input { flex: 1; min-width: 160px; padding: 10px 12px; border-radius: 8px; border: none; }
.newsletter-form button { background: var(--c-la); color: var(--color-primary); border: none; padding: 10px 16px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.footer-bas {
  max-width: var(--largeur-max);
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
}
.reseaux-sociaux { display: flex; gap: 10px; }
.reseaux-sociaux img { width: 30px; height: 30px; }

/* ---------- Pages catégories (Culture/Gastronomie/Sorties/Utile) ---------- */
.tabs-interets {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 20px;
  max-width: var(--largeur-max);
  margin: 0 auto;
}
.tabs-interets a {
  padding: 10px 20px;
  border-radius: 30px;
  border: 2px solid var(--color-border);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  color: var(--color-text-muted);
}
.tabs-interets a.actif { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.hero-categorie { text-align: center; padding: 30px 20px 10px; }
.hero-categorie h1 { font-size: 24px; color: var(--color-primary); margin: 0; }

.bloc-intro-categorie { max-width: 780px; margin: 0 auto; padding: 20px 20px 40px; text-align: center; }
.bloc-intro-categorie h2 { font-size: 20px; color: var(--color-primary); margin: 0 0 10px; }
.bloc-intro-categorie p { font-size: 14.5px; line-height: 1.6; color: var(--color-text-muted); }

/* ---------- Page "Téléchargez nos applications" (telechargement.html, 2026-09-07) ---------- */
.intro-telechargement { max-width: 620px; margin: 10px auto 0; font-size: 14.5px; color: var(--color-text-muted); }
.intro-telechargement a { color: var(--accent-violet); font-weight: 700; text-decoration: none; }
.bloc-telechargement { padding: 30px 20px 60px; }
.grille-telechargement { max-width: var(--largeur-max); margin: 0 auto; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 700px) { .grille-telechargement { grid-template-columns: 1fr; } }
.carte-telechargement { background: #fff; border: 1px solid var(--color-border); border-radius: 20px;
  padding: 32px 28px; text-align: center; }
.carte-telechargement img { width: 72px; height: 72px; border-radius: 18px; margin-bottom: 16px; }
.carte-telechargement h3 { font-size: 18px; margin: 0 0 8px; }
.carte-telechargement p { font-size: 14px; line-height: 1.55; color: var(--color-text-muted); margin: 0 0 20px; }
.actions-telechargement { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* "Télécharger" et "Ouvrir" à la même taille malgré leurs textes de longueur différente et leurs
   styles de base différents (.btn-cta sans bordure / .btn-secondaire avec bordure 1.5px) —
   largeur minimale commune + padding/bordure alignés pour une hauteur identique — corrigé le
   2026-09-07, signalé par Christophe. */
.actions-telechargement a { box-sizing: border-box; min-width: 150px; text-align: center; }
.actions-telechargement .btn-cta { border: 1.5px solid transparent; padding: 12.5px 22px; margin-top: 0; }
/* .btn-secondaire est en display:inline-flex (voir plus bas) : sans justify-content, son texte
   reste collé à gauche dès que min-width l'élargit au-delà de son contenu — corrigé le
   2026-09-07, signalé par Christophe. */
.actions-telechargement .btn-secondaire { padding: 12.5px 22px; justify-content: center; }
.note-telechargement { max-width: var(--largeur-max); margin: 30px auto 0; text-align: center;
  font-size: 13px; color: var(--color-text-muted); }
.note-telechargement a { color: var(--accent-violet); font-weight: 700; text-decoration: none; }

/* ---------- Page "Devenez annonceur" (annonceurs.html, 2026-09-07) ---------- */
.grille-avantages-annonceur { max-width: var(--largeur-max); margin: 0 auto; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 700px) { .grille-avantages-annonceur { grid-template-columns: 1fr; } }
.grille-avantages-annonceur .carte-telechargement { text-align: left; }
.grille-avantages-annonceur .carte-telechargement p { margin-bottom: 0; }

.grille-sous-themes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 40px;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 20px;
}
@media (max-width: 820px) { .grille-sous-themes { grid-template-columns: 1fr; } }
.sous-theme { display: flex; gap: 16px; align-items: flex-start; }
.sous-theme img { width: 120px; height: 90px; object-fit: cover; border-radius: var(--radius); flex-shrink: 0; }
.sous-theme h3 { margin: 0 0 6px; font-size: 15px; color: var(--color-primary); }
.sous-theme p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--color-text-muted); }

/* ---------- Page Tarifs ---------- */
.bloc-tarifs-images { max-width: var(--largeur-max); margin: 0 auto; padding: 20px; text-align: center; }
.bloc-tarifs-images img { display: inline-block; margin: 10px; border-radius: var(--radius); box-shadow: var(--shadow); max-width: 100%; }
.tarifs-formules { max-width: 780px; margin: 0 auto; padding: 20px; }
.tarifs-formules p { font-size: 14.5px; line-height: 1.6; color: var(--color-text-muted); }
.tarifs-formules strong { color: var(--color-primary); }

/* ---------- Page Contact ---------- */
.form-contact { max-width: 560px; margin: 0 auto; padding: 30px 20px 50px; }
.form-contact .champ { margin-bottom: 16px; }
.form-contact label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--color-primary); }
.form-contact input, .form-contact textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-family: inherit;
}
.form-contact textarea { min-height: 120px; resize: vertical; }
.form-contact .hint-obligatoire { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
.form-contact button { margin-top: 6px; }

/* ---------- Page Nous rejoindre ---------- */
.bloc-texte-page { max-width: 760px; margin: 0 auto; padding: 30px 20px; }
.bloc-texte-page h1, .bloc-texte-page h2 { color: var(--color-primary); }
.bloc-texte-page h1 { font-size: 24px; }
.bloc-texte-page h2 { font-size: 19px; margin-top: 30px; }
.bloc-texte-page p { font-size: 14.5px; line-height: 1.65; color: var(--color-text-muted); }
.bloc-texte-page p strong { color: var(--color-text); }

/* ============================================================
   Page d'accueil "nouvelle présentation" (2026-09-06) — hero + démo
   interactive + bloc app + annonceurs. Classes propres à index.html,
   sans collision avec les pages intérieures ci-dessus.
   ============================================================ */

.hero-moderne { position: relative; overflow: hidden; padding: 70px 20px 50px;
  background: linear-gradient(120deg, rgba(30,33,85,0.12) 0%, rgba(79,195,247,0.10) 55%, rgba(143,193,30,0.10) 100%); }
.hero-moderne-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center;
  max-width: var(--largeur-max); margin: 0 auto; }
@media (max-width: 860px) { .hero-moderne-grid { grid-template-columns: 1fr; } }

.badge-nouveaute { display: inline-flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid var(--color-border); padding: 7px 14px; border-radius: 100px;
  font-size: 12.5px; font-weight: 600; color: var(--accent-violet); margin-bottom: 16px; }
.badge-nouveaute .pastille { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-citron); display: inline-block; }

.titre-heros { font-size: 38px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; color: var(--color-text-muted); }
.degrade-texte { background: linear-gradient(135deg, var(--accent-violet), var(--accent-rose) 60%, var(--accent-corail));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.soustitre-heros { font-size: 15.5px; color: var(--color-text-muted); line-height: 1.65; margin: 16px 0 24px; max-width: 460px; }
.heros-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-secondaire { display: inline-flex; align-items: center; padding: 13px 22px; border-radius: 100px;
  border: 1.5px solid rgba(24,26,61,0.15); font-weight: 700; font-size: 14px; color: var(--color-text);
  text-decoration: none; background: transparent; }

.heros-visuel { position: relative; height: 380px; }
/* Les 4 vignettes doivent toutes avoir exactement les mêmes dimensions (largeur ET hauteur) —
   demande de Christophe 2026-09-07 ("Tes vignettes doivent avoir les memes dimensions"). Hauteur
   fixe (image 90px + zone titre/sous-titre de hauteur réservée, voir h4/p plus bas) plutôt que
   "height: auto", pour que ce soit vrai quel que soit le texte reçu (titres de longueur variable
   depuis chargerCartesHero() dans main.js). */
.carte-flottante-h { position: absolute; background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 20px 44px rgba(24,26,61,0.16); padding: 10px; width: 190px; height: 170px;
  animation: flotter-h 5s ease-in-out infinite; }
.carte-flottante-h img { border-radius: 10px; height: 90px; width: 100%; object-fit: cover; margin-bottom: 8px; }
.carte-flottante-h.cf-1 { top: 0; left: 10px; animation-delay: 0s; }
.carte-flottante-h.cf-2 { top: 180px; right: 0; animation-delay: .8s; }
.carte-flottante-h.cf-3 { bottom: 0; left: 60px; animation-delay: 1.6s; }
.carte-flottante-h.cf-4 { top: 0; right: 0; animation-delay: 2.4s; }
.carte-flottante-h .tag-interet { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 9px;
  border-radius: 100px; margin: 0 0 6px 4px; }
/* Titre limité à 2 lignes, hauteur réservée fixe (line-clamp seul ne réserve pas la place si le
   texte tient sur 1 ligne) : garantit que le bloc titre pèse toujours la même hauteur, carte
   après carte — évite tout chevauchement entre cartes voisines quelle que soit la longueur du
   titre reçu (signalé par Christophe 2026-09-07). */
.carte-flottante-h h4 { font-size: 13px; margin: 0 0 2px; padding: 0 4px; line-height: 1.25;
  height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carte-flottante-h p { font-size: 11px; color: var(--color-text-muted); margin: 0; padding: 0 4px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Sous 860px, .hero-moderne-grid empile déjà le texte et le visuel en une seule colonne (voir
   plus haut) : le positionnement absolute des 4 cartes (pensé pour un visuel large en 2e colonne)
   n'a alors plus assez de largeur et débordait de façon disgracieuse — signalé par Christophe
   2026-09-07. On bascule sur une grille statique 2x2 (mêmes dimensions de carte partout, cf.
   height fixe ci-dessus), en conservant l'effet de mouvement flottant à toutes les tailles de
   fenêtre (demande explicite de Christophe : "ajoute l'effet de mouvement quelque soit la taille
   de la fenetre") — un simple transform:translateY ne modifie pas la mise en page (le gap de la
   grille absorbe le débattement de 12px), donc aucun risque de retour du chevauchement. */
@media (max-width: 860px) {
  .heros-visuel { height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
  .carte-flottante-h {
    position: static;
    width: 100%;
    top: auto; right: auto; bottom: auto; left: auto;
  }
}
.tag-interet.culture { background: #EDE7FF; color: var(--accent-violet); }
.tag-interet.gastro { background: #FFE9DE; color: var(--accent-corail); }
.tag-interet.sortie { background: #FFE3EF; color: var(--accent-rose); }
.tag-interet.utile { background: #FFF3D6; color: #B8860B; }
@keyframes flotter-h { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.eyebrow-moderne { color: var(--accent-violet); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }

.bloc-demo { padding: 60px 20px 10px; }
.demo-panneau { max-width: var(--largeur-max); margin: 0 auto; background: #fff; border-radius: 24px;
  padding: 28px; box-shadow: 0 18px 44px rgba(24,26,61,0.08); border: 1px solid rgba(24,26,61,0.06); }
.demo-filtres { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.chip-filtre { padding: 10px 18px; border-radius: 100px; font-size: 13.5px; font-weight: 700;
  border: 1.5px solid rgba(24,26,61,0.12); background: #fff; cursor: pointer; color: var(--color-text-muted);
  font-family: 'Inter', sans-serif; }
.chip-filtre:hover { border-color: var(--accent-violet); }
/* Dégradé alimenté par les vraies couleurs CITS (console > Données > CITS), posées en variables
   CSS inline par appliquerCouleursChips() dans main.js — remplace les 4 dégradés couleur figés
   d'origine (un par data-cat) — demande de Christophe 2026-09-06. --couleur-chip/-sombre ont un
   repli en dur (mêmes teintes que l'ancien dégradé "Culture") pour ne jamais laisser un bouton
   actif sans fond avant que le JS n'ait posé les variables (ex. JS désactivé). */
.chip-filtre.actif {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, var(--couleur-chip, #7B5CFA), var(--couleur-chip-sombre, #4527A0));
}

.ligne-controles { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 20px; padding: 14px 18px; background: var(--color-bg); border-radius: 16px; }
.controle-rayon { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; }
.controle-rayon label { font-size: 13px; font-weight: 600; white-space: nowrap; }
.controle-rayon input[type="range"] { flex: 1; accent-color: var(--accent-violet); }
.controle-rayon .val { font-size: 13px; font-weight: 700; color: var(--accent-violet); min-width: 48px; text-align: right; }
.toggle-vue { display: flex; background: #fff; border-radius: 100px; padding: 4px; border: 1px solid var(--color-border); }
.toggle-vue button { border: none; background: none; padding: 8px 16px; border-radius: 100px; font-size: 13px;
  font-weight: 700; cursor: pointer; color: var(--color-text-muted); font-family: 'Inter', sans-serif; }
.toggle-vue button.actif { background: var(--color-primary); color: #fff; }
/* Bouton "Carte" masqué tant qu'aucune ville n'est renseignée (pas de position connue à
   positionner sur la carte) — n'apparaît qu'une fois la ville validée, voir validerVille()
   dans main.js — demande de Christophe 2026-09-07. */
.toggle-vue button.masque { display: none; }

.compteur-resultats { font-size: 13.5px; color: var(--color-text-muted); margin-bottom: 14px; }
.compteur-resultats b { color: var(--color-text); }

.grille-resultats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px) { .grille-resultats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .grille-resultats { grid-template-columns: 1fr; } }
.grille-resultats.masque { display: none; }
.carte-lieu { border-radius: 16px; overflow: hidden; border: 1px solid var(--color-border); background: #fff;
  transition: transform .2s ease, box-shadow .2s ease; opacity: 0; animation: apparait-lieu .35s ease forwards; }
.carte-lieu:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(24,26,61,0.12); }
.carte-lieu img { display: block; width: 100%; height: 200px; object-fit: cover; }
/* Conteneur relatif autour de la seule photo (pas toute la carte) pour que le badge "vues"
   ci-dessous se cale au bas-droite de LA PHOTO, pas au bas de la carte entière (qui inclut le
   texte sous la photo) — même principe que .fiche-flyer-image-pleine-largeur côté guide/events.
   icilago.eu. */
.carte-lieu-photo { position: relative; }
/* Badge "vues" en bas à droite de la photo — reprend exactement la convention déjà en place sur
   guide/events.icilago.eu (icône Icone_0019.png, fond blanc translucide) — demande de Christophe
   2026-09-06. */
.vues-lieu-sur-photo {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #000;
  background: rgba(255,255,255,0.7);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.vues-lieu-sur-photo img { width: 14px; height: 14px; object-fit: contain; }
/* Barre de couleur du centre d'intérêt, juste sous la photo — MÊMES PARAMÈTRES que
   .vignette-evenement-visiteur-barre-n5-piste côté guide/events.icilago.eu (voir eventVignetteHtml
   dans guide.icilago.eu/js/main.js) : largeur 100%, hauteur 10px, sans arrondi, 8px d'espace
   avant le texte — demande de Christophe 2026-09-06 ("fait moi la même barre de couleur que dans
   guide, mêmes paramètres"). Couleur = COULEURS_DEMO dans main.js (même couleur que les épingles
   de la vue Carte, comme côté guide où c'est eventMarkerColor()). */
.barre-interet { width: 100%; height: 10px; border-radius: 0; overflow: hidden; margin-bottom: 8px; }
.carte-lieu .contenu-lieu { padding: 12px 14px; }
.carte-lieu h4 { font-size: 14px; margin: 0 0 4px; }
.carte-lieu p { font-size: 12px; color: var(--color-text-muted); margin: 0; }
.carte-lieu .distance-lieu { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 700;
  color: var(--accent-violet); background: #EDE7FF; padding: 3px 9px; border-radius: 100px; }
@keyframes apparait-lieu { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Vraie carte Leaflet/OpenStreetMap (même convention que guide/events.icilago.eu, voir
   L.tileLayer dans js/main.js) — remplace l'ancien rectangle dégradé avec pastilles positionnées
   au hasard, qui n'était qu'un décor et non une vraie carte géographique — demande de Christophe
   2026-09-07 ("il n'y a toujours pas de carte visible"). background conservé en repli, le temps
   que les tuiles se chargent. */
.vue-carte { display: none; height: 260px; border-radius: 16px; position: relative; overflow: hidden;
  background: #E4EEFF; }
.vue-carte.actif { display: block; }

/* ---------- Popup "Quelle est votre ville ?" (démo interactive, 2026-09-06) ---------- */
.popup-overlay {
  position: fixed; inset: 0; background: rgba(30,33,85,0.45);
  z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px;
}
.popup-overlay.ouvert { display: flex; }
.popup-ville {
  position: relative; background: #fff; border-radius: 16px; border: 2px solid var(--color-primary);
  padding: 28px; max-width: 380px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,0.22);
}
.popup-fermer {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  font-size: 18px; cursor: pointer; color: var(--color-text-muted); line-height: 1;
}
.popup-ville h3 { margin: 0 0 8px; font-size: 18px; color: var(--color-primary); }
.popup-ville p { font-size: 13.5px; color: var(--color-text-muted); margin: 0 0 16px; }
.popup-ville input {
  width: 100%; padding: 11px 14px; border-radius: 8px; border: 1px solid var(--color-border);
  font-size: 14px; font-family: inherit;
}
.popup-ville-erreur { color: #c0392b; font-size: 12.5px; margin: 8px 0 0; }