:root {
  --terre: #b5532a;
  --terre-clair: #f6e6da;
  --baobab: #2f6b4f;
  --baobab-clair: #e3efe8;
  --sable: #faf6f0;
  --encre: #1f1b16;
  --gris: #6b635a;
  --bord: #e5dccf;
  --rayon: 12px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--sable); color: var(--encre); line-height: 1.55; }
a { color: var(--terre); }
img { max-width: 100%; border-radius: var(--rayon); }
.conteneur { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

.entete { background: var(--encre); color: #fff; }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
.logo { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.35rem; }
.logo span { color: #f0a868; }
.nav { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.nav a { color: #f3ede6; text-decoration: none; font-size: .95rem; }
.nav a:hover { text-decoration: underline; }
.nav-ville { background: var(--terre); }
.nav-ville .conteneur { display: flex; gap: 18px; overflow-x: auto; padding-top: 8px; padding-bottom: 8px; }
.nav-ville a { color: #fff; text-decoration: none; white-space: nowrap; font-weight: 600; }

.hero { padding: 48px 0 32px; }
.hero h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin: 0 0 8px; }
.hero p { color: var(--gris); font-size: 1.1rem; max-width: 640px; }
.surtitre { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--terre); font-weight: 700; }

.grille { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.carte { background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.carte h3 { margin: 0; font-size: 1.1rem; }
.carte h3 a { color: var(--encre); text-decoration: none; }
.carte .meta { color: var(--gris); font-size: .85rem; }
.carte.premium { border-color: #e2a34a; box-shadow: 0 0 0 2px #fbe3bf inset; }

.section { margin: 36px 0; }
.section-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.section-titre h2 { margin: 0; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--terre-clair); color: var(--terre); }
.badge.vert { background: var(--baobab-clair); color: var(--baobab); }
.badge.or { background: #fbe3bf; color: #8a5a12; }
.badge.gris { background: #eee; color: var(--gris); }

.bouton { display: inline-block; background: var(--terre); color: #fff; border: 0; border-radius: 999px; padding: 10px 20px; font-weight: 600; text-decoration: none; cursor: pointer; font-size: 1rem; }
.bouton.secondaire { background: transparent; color: var(--terre); border: 2px solid var(--terre); }
.bouton.vert { background: var(--baobab); }

.filtres { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.filtres a { text-decoration: none; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--bord); background: #fff; color: var(--encre); font-size: .9rem; }
.filtres a.actif { background: var(--encre); color: #fff; border-color: var(--encre); }

.formulaire { background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 24px; max-width: 680px; }
.formulaire p { margin: 0 0 14px; }
.formulaire label { display: block; font-weight: 600; margin-bottom: 4px; }
.formulaire input:not([type=checkbox]), .formulaire select, .formulaire textarea { width: 100%; padding: 10px; border: 1px solid var(--bord); border-radius: 8px; font: inherit; }
.formulaire .helptext { display: block; color: var(--gris); font-size: .85rem; }
.errorlist { color: #b42318; padding-left: 18px; }

.messages { list-style: none; padding: 0; margin: 16px 0; }
.messages li { background: var(--baobab-clair); color: var(--baobab); padding: 12px 16px; border-radius: var(--rayon); }

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.chiffre { background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; }
.chiffre strong { display: block; font-size: 1.8rem; }
.chiffre span { color: var(--gris); font-size: .9rem; }

.classement { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--rayon); overflow: hidden; }
.classement th, .classement td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--bord); }
.classement th { background: var(--terre-clair); font-size: .85rem; }
.classement tr:first-child td { font-weight: 700; }

.recit-contenu { background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 24px; font-size: 1.08rem; white-space: pre-line; }
audio { width: 100%; margin: 12px 0; }

.pied { margin-top: 64px; padding: 32px 0; background: var(--encre); color: #cfc6bb; font-size: .9rem; }
.pied a { color: #f0a868; }

/* Navétanes Live */
.direct { color: #d92d20; font-weight: 800; animation: clignote 1.4s infinite; }
@keyframes clignote { 50% { opacity: .35; } }
.score-carte { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; text-align: center; }
.score-carte .equipe { font-weight: 700; }
.score-carte .score { font-size: 1.6rem; font-weight: 800; padding: 4px 12px; background: var(--encre); color: #fff; border-radius: 8px; white-space: nowrap; }
.tableau-score { background: var(--encre); color: #fff; border-radius: var(--rayon); padding: 24px 16px; margin: 16px 0; }
.tableau-score .score { font-size: clamp(2.4rem, 9vw, 4rem); background: transparent; }
.tableau-score .equipe { font-size: clamp(1rem, 3.5vw, 1.4rem); }
.tableau-score a { color: #fff; }
.fil { list-style: none; padding: 0; margin: 0; }
.fil li { background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 12px 16px; margin-bottom: 8px; display: flex; gap: 12px; }
.fil .minute { font-weight: 800; min-width: 42px; color: var(--terre); }
.boutons-saisie { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.tableau-defile { overflow-x: auto; }

/* Annonces payantes */
.banniere { display: flex; flex-direction: column; gap: 4px; background: linear-gradient(120deg, var(--encre), #4a2a17); color: #fff; text-decoration: none; padding: 20px; border-radius: var(--rayon); margin-bottom: 12px; }
.banniere strong { font-size: 1.4rem; }
.formules { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 16px 0; }
.formule { background: #fff; border: 2px solid var(--bord); border-radius: var(--rayon); padding: 16px; }
.formule .prix { font-size: 1.5rem; font-weight: 800; color: var(--terre); }
.formulaire ul { list-style: none; padding: 0; }
.formulaire ul label { font-weight: 400; display: flex; gap: 8px; align-items: center; padding: 4px 0; }

/* Photos d'antan : comparaison avant / après */
.avant-apres { position: relative; overflow: hidden; border-radius: var(--rayon); line-height: 0; }
.avant-apres img { width: 100%; display: block; border-radius: 0; }
.avant-apres .avant { position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 50% 0 0); filter: sepia(.35); }
.avant-apres .etiquette { position: absolute; bottom: 10px; background: rgba(0,0,0,.6); color: #fff; padding: 2px 10px; border-radius: 999px; font-size: .8rem; line-height: 1.6; }
.avant-apres .gauche { left: 10px; } .avant-apres .droite { right: 10px; }
.progression { background: var(--bord); border-radius: 999px; height: 12px; overflow: hidden; }
.progression span { display: block; height: 100%; background: var(--baobab); }
.liseret-deuil { border-left: 4px solid var(--encre); }

/* Affichage adapté à tous les écrans (téléphone, tablette, ordinateur) */
.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo img { border-radius: 8px; }
.bouton-menu { display: none; background: transparent; color: #fff; border: 1px solid #5a514a; border-radius: 999px; padding: 6px 14px; font: inherit; cursor: pointer; }
.formulaire { width: 100%; }
table { font-size: .95rem; }
@media (max-width: 760px) {
  .bouton-menu { display: inline-block; }
  .entete .nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 8px; }
  .entete.ouvert .nav, .entete .conteneur.ouvert .nav { display: flex; }
  .entete .nav a, .entete .nav form { padding: 10px 0; border-top: 1px solid #3a332c; }
  .hero { padding: 28px 0 16px; }
  .section { margin: 24px 0; }
  .bouton { padding: 10px 16px; }
  .hero .bouton { margin: 4px 0; }
  .formulaire { padding: 16px; }
  .classement th, .classement td { padding: 8px; }
  .grille { grid-template-columns: 1fr; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .grille { grid-template-columns: repeat(2, 1fr); }
}

/* Bandeau d'installation */
.installer { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid var(--bord); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.installer .conteneur { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.installer-texte { flex: 1; display: flex; flex-direction: column; font-size: .9rem; color: var(--gris); }
.installer-texte strong { color: var(--encre); }
.installer-fermer { background: none; border: 0; font-size: 1.1rem; cursor: pointer; color: var(--gris); padding: 8px; }
.installer[hidden], [hidden] { display: none !important; }
@media (display-mode: standalone) { .pied { padding-bottom: calc(32px + env(safe-area-inset-bottom)); } }
@media print { .entete, .barre-regions, .nav-ville, .pied, .installer, .messages, .bouton, .pas-imprime, form { display: none !important; } body { background: #fff; } .convention { border: 0; box-shadow: none; padding: 0; } }

/* Menu des régions */
.barre-regions { background: #2b2520; border-top: 1px solid #3a332c; }
.regions { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 4px; }
.region { position: relative; }
.region-titre { background: none; border: 0; color: #f3ede6; font: inherit; font-size: .9rem; padding: 8px 10px; cursor: pointer; border-radius: 8px; }
.region-titre:hover, .region.ouvert .region-titre { background: #3a332c; }
.region.vide .region-titre { color: #9a9087; }
.region-titre::after { content: " ▾"; font-size: .7rem; opacity: .7; }
.compte { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--terre); color: #fff; font-size: .7rem; line-height: 18px; text-align: center; }
.panneau { display: none; position: absolute; top: 100%; left: 0; z-index: 20; min-width: 260px; max-height: 70vh; overflow-y: auto; background: #fff; color: var(--encre); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 12px; }
.region.ouvert .panneau { display: block; }
@media (hover: hover) and (min-width: 761px) { .region:hover .panneau, .region:focus-within .panneau { display: block; } }
.panneau a { display: block; padding: 6px 8px; border-radius: 8px; color: var(--encre); text-decoration: none; }
.panneau a:hover { background: var(--terre-clair); }
.panneau .capitale { font-weight: 700; }
.panneau-titre { margin: 0 0 6px; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--terre); font-weight: 700; }
.panneau-dep { margin: 10px 0 2px; font-size: .78rem; color: var(--gris); font-weight: 600; }
.panneau .meta { font-size: .78rem; font-weight: 400; }
.regions-mobile { display: none; }
@media (max-width: 760px) {
  .barre-regions { display: none; }
  .regions-mobile { display: block; padding-top: 12px; }
  .regions-mobile .regions { flex-direction: column; }
  .regions-mobile .region-titre { width: 100%; text-align: left; padding: 10px 0; border-top: 1px solid #3a332c; border-radius: 0; }
  .regions-mobile .panneau { position: static; box-shadow: none; max-height: none; margin-bottom: 8px; }
  .entete .nav .regions-mobile a { border-top: 0; padding: 8px; }
}

/* Convention de partenariat */
.convention h1 { margin: 6px 0 16px; }
.convention h2 { font-size: 1.05rem; margin: 18px 0 6px; }
.convention p { line-height: 1.6; }
.signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0 16px; }
.ligne-signature { border-top: 1px solid var(--bord); margin-top: 64px; padding-top: 6px; font-size: .85rem; color: var(--gris); }
@media (max-width: 560px) { .signatures { grid-template-columns: 1fr; } }

/* Partage et réseaux sociaux */
.partager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0; }
.partager-titre { font-weight: 700; font-size: .9rem; color: var(--gris); margin-right: 4px; }
.partage { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--bord); background: #fff; color: var(--encre); font: inherit; font-size: .9rem; text-decoration: none; cursor: pointer; }
.partage:hover { border-color: var(--terre); }
.partage.whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
.partage.facebook { background: #1877f2; border-color: #1877f2; color: #fff; }
.partage.partage-natif { background: var(--terre); border-color: var(--terre); color: #fff; }
.reseaux { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.reseaux a { display: inline-flex; align-items: center; gap: 6px; color: #f3ede6; text-decoration: none; padding: 6px 12px; border: 1px solid #3a332c; border-radius: 999px; font-size: .9rem; }
.reseaux a:hover { background: #3a332c; }
@media print { .partager, .reseaux { display: none !important; } }

/* Images historiques des récits */
.galerie-archives { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin: 12px 0 8px; }
.galerie-archives figure { margin: 0; background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 8px; }
.galerie-archives img { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: sepia(.3); transition: filter .2s; }
.galerie-archives img:hover { filter: none; }
.galerie-archives figcaption { font-size: .9rem; padding: 6px 4px 2px; }
.images-historiques { border: 1px dashed var(--bord); border-radius: var(--rayon); padding: 12px 16px; margin: 16px 0; }
.image-historique { border-top: 1px solid var(--bord); padding-top: 8px; margin-top: 8px; }
.recit-contenu.histoire-texte { white-space: normal; } .histoire-texte p:first-child { margin-top: 0; } .histoire-texte p:last-child { margin-bottom: 0; }