/*
 * Identité « Noël en Alsace » (maquettes/identite-finale.html), chargée
 * après rt-core.css sur tous les écrans : fond gris perle, rouge et vert
 * sapin, titres Lora, texte Karla. Styles de l'accueil (initAccueilMarches).
 */
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700&family=Lora:wght@600;700&display=swap');

:root{
  --bg:#f3f2ef;
  --surface:#ffffff;
  --ink:#2b1f1a;
  --ink-soft:#6b625a;
  --border:#e4e1db;
  --wine:#b3262e; --wine-soft:#f6e3e4;
  --vine:#1f4d3a; --vine-soft:#e3ece6;
  --rouge:#b3262e;
  --radius:18px;
  --font:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-titre:"Lora",Georgia,serif;
}

/* ---------- Accueil ---------- */
.rt-am{ max-width:760px; margin:0 auto; padding:0 0 24px; font-family:var(--font); color:var(--ink); }
.rt-am-hero{ position:relative; height:200px; margin:0 16px; border-radius:22px; overflow:hidden; background:#24384a; }
@media (min-width:700px){ .rt-am-hero{ height:300px; } }
.rt-am-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.6s ease; }
.rt-am-hero img.on{ opacity:1; animation:rt-am-zoom 7s ease-out forwards; }
@keyframes rt-am-zoom{ from{ transform:scale(1.04); } to{ transform:scale(1.12); } }
@media (prefers-reduced-motion: reduce){ .rt-am-hero img.on{ animation:none; } }
.rt-am-lieu{ position:absolute; top:10px; left:10px; z-index:2; display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:99px; background:rgba(255,255,255,.92); color:var(--ink); font-size:11.5px; font-weight:700; }
.rt-am-lieu::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--rouge); }
.rt-am-credit{ position:absolute; top:12px; right:12px; z-index:2; font-size:10px; color:rgba(255,255,255,.9); text-shadow:0 1px 2px rgba(0,0,0,.6); }
.rt-am-hero-texte{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:40px 16px 14px; background:linear-gradient(transparent, rgba(0,0,0,.65)); color:#fff; }
.rt-am-hero-texte p{ margin:0 0 3px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.rt-am-hero-texte h1{ margin:0; font-family:var(--font-titre); font-size:22px; line-height:1.1; font-weight:700; color:#fff; max-width:80%; }
@media (min-width:700px){ .rt-am-hero-texte h1{ font-size:32px; } }
.rt-am-points{ position:absolute; right:14px; bottom:14px; z-index:2; display:flex; gap:5px; }
.rt-am-points i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5); transition:all .3s; }
.rt-am-points i.on{ width:16px; border-radius:3px; background:#fff; }
.rt-am-frise{ height:16px; margin-top:14px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16'%3E%3Cpath d='M16 14c-4-3-7-5-7-8a3.5 3.5 0 0 1 7-1 3.5 3.5 0 0 1 7 1c0 3-3 5-7 8z' fill='%23b3262e'/%3E%3Ccircle cx='2' cy='8' r='1.6' fill='%231f4d3a'/%3E%3Ccircle cx='30' cy='8' r='1.6' fill='%231f4d3a'/%3E%3C/svg%3E") repeat-x center/32px 16px; }

.rt-am-filtres{ display:flex; gap:8px; overflow-x:auto; padding:14px 16px 2px; scrollbar-width:none; }
.rt-am-filtres::-webkit-scrollbar{ display:none; }
.rt-root .rt-am-puce{ flex:none; padding:8px 14px; border-radius:99px; border:1.5px solid var(--border); background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
.rt-root .rt-am-puce.on{ background:var(--rouge); border-color:var(--rouge); color:#fff; }
.rt-root .rt-am-puce.attente{ opacity:.6; }

.rt-am-entete{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:20px 16px 12px; }
.rt-am-entete h2{ margin:0; white-space:nowrap; font-family:var(--font-titre); font-size:21px; line-height:1.15; font-weight:700; color:var(--ink); }
.rt-am-entete h2 small{ display:block; font-family:var(--font); font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-top:2px; }
.rt-root a.rt-am-carte{ flex:none; display:inline-flex; align-items:center; gap:5px; padding:6px 11px 6px 8px; border-radius:99px; background:var(--vine); color:#fff; font-size:12.5px; font-weight:700; text-decoration:none; }
.rt-am-carte svg{ width:15px; height:15px; }
.rt-am-carte svg *{ stroke:#fff; }
.rt-am-info{ margin:0 16px 10px; font-size:13.5px; color:var(--ink-soft); }
.rt-am-liste{ padding:0 16px; display:flex; flex-direction:column; gap:12px; }
.rt-am-liste .rt-card{ margin:0; }
.rt-am-liste .rt-ouv-etat.ouvert{ color:#2e6b46; }
.rt-am-liste .rt-am-dates{ color:var(--rouge); }

/* Accueil : secteurs (2e rangée de filtres, plus discrète) et « Voir plus » */
.rt-am-secteurs{ padding-top:8px; }
.rt-root .rt-am-sect{ padding:6px 12px; font-size:12.5px; font-weight:600; }
.rt-root .rt-am-sect.on{ background:var(--vine); border-color:var(--vine); color:#fff; }
.rt-root .rt-am-plus{ display:block; margin:14px 16px 0; width:calc(100% - 32px); padding:13px; border-radius:99px; border:1.5px solid var(--rouge); background:#fff; color:var(--rouge); font:inherit; font-weight:700; font-size:14.5px; cursor:pointer; }
.rt-root .rt-am-plus[hidden]{ display:none; }

/* Carte / liste des marchés : filtres sur une ligne qui défile, tri */
.rt-root .rt-ouv-noel{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
.rt-root .rt-ouv-noel::-webkit-scrollbar{ display:none; }
.rt-root .rt-ouv-noel button{ flex:none; }
.rt-root .rt-ouv-noel button.active{ background:var(--rouge); }
.rt-root .rt-ouv-noel button[data-secteur].active{ background:var(--vine); }
.rt-tri{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 12px; font-size:13px; color:var(--ink-soft); }
.rt-root .rt-tri button{ padding:6px 11px; border-radius:99px; border:1.5px solid var(--border); background:var(--surface); color:var(--ink); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.rt-root .rt-tri button.active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.rt-chips-secteurs{ margin-top:8px; }
.rt-card .rt-am-dates, .rt-am-liste .rt-am-dates{ color:var(--rouge); }

/* Page d'un office de tourisme (initOffice) */
.rt-office{ padding-top:12px; }
.rt-office-hero{ height:210px; }
@media (min-width:700px){ .rt-office-hero{ height:300px; } }
.rt-office-hero img{ opacity:1; }
.rt-root .rt-office-retour{ position:absolute; top:12px; left:12px; z-index:3; }
.rt-office-bloc{ margin-top:22px; }
.rt-office-bloc[hidden]{ display:none; }
.rt-root .rt-office-titre{ margin:0 16px 12px; font-family:var(--font-titre); font-size:21px; line-height:1.15; font-weight:700; color:var(--ink); }
.rt-root .rt-office-titre small{ display:block; font-family:var(--font); font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-top:2px; }

/* Accueil : barre de recherche */
.rt-am-recherche{ display:flex; align-items:center; gap:8px; margin:14px 16px 0; padding:0 14px; height:46px; border-radius:99px; background:var(--surface); border:1.5px solid var(--border); color:var(--ink-soft); }
.rt-am-recherche:focus-within{ border-color:var(--rouge); }
.rt-am-recherche svg{ width:19px; height:19px; flex:none; }
.rt-root .rt-am-recherche input{ flex:1; min-width:0; border:none; outline:none; background:transparent; font:inherit; font-size:15.5px; color:var(--ink); padding:0; height:100%; box-shadow:none; }
.rt-am-recherche + .rt-am-filtres{ padding-top:10px; }
.rt-root .rt-page.rt-entete-seule{ padding-bottom:0; }

/* Page d'un office, design « onglets + carte » */
.rt-office-hero{ height:170px; }
@media (min-width:700px){ .rt-office-hero{ height:240px; } }
.rt-office-onglets{ position:sticky; top:0; z-index:500; display:flex; gap:7px; overflow-x:auto; padding:12px 16px; background:var(--bg); scrollbar-width:none; }
.rt-office-onglets::-webkit-scrollbar{ display:none; }
.rt-root .rt-office-onglets button{ flex:none; padding:8px 14px; border-radius:99px; border:1.5px solid var(--border); background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
.rt-root .rt-office-onglets button.on{ background:var(--rouge); border-color:var(--rouge); color:#fff; }
.rt-office-carte{ position:relative; margin:4px 16px 0; height:190px; border-radius:20px; overflow:hidden; border:1px solid var(--border); isolation:isolate; }
.rt-office-carte > div{ width:100%; height:100%; }
.rt-root a.rt-office-grand{ position:absolute; right:10px; bottom:10px; z-index:450; padding:6px 12px; border-radius:99px; background:#fff; color:var(--ink); font-size:12.5px; font-weight:700; text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.rt-office #rtOffTitre{ margin-top:18px; }

/* Page « Les offices de tourisme » */
.rt-offices-carte{ margin:0 16px; height:380px; border-radius:22px; overflow:hidden; border:1px solid var(--border); isolation:isolate; }
.rt-offices-carte > div{ width:100%; height:100%; }
.rt-root a.rt-offices-pin{ display:inline-block; transform:translate(-50%, -50%); white-space:nowrap; padding:4px 9px; border-radius:99px; background:var(--rouge); color:#fff; font:700 11.5px/1.2 var(--font); text-decoration:none; box-shadow:0 2px 6px rgba(0,0,0,.25); border:1.5px solid #fff; }
.rt-root a.rt-offices-pin:hover{ background:var(--vine); }
.rt-root .rt-offices-secteur{ margin:22px 16px 10px; font:700 12px/1 var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--vine); }
.rt-root a.rt-offices-ligne{ display:flex; align-items:center; gap:12px; margin:0 16px 10px; padding:9px; border-radius:18px; background:var(--surface); border:1px solid var(--border); color:var(--ink); text-decoration:none; }
.rt-offices-vignette{ width:62px; height:62px; border-radius:13px; flex:none; background:var(--vine) center/cover; }
.rt-offices-ligne strong{ display:block; font-size:15px; }
.rt-offices-ligne small{ display:block; color:var(--ink-soft); font-size:12.5px; }
.rt-offices-fleche{ margin-left:auto; padding-right:6px; color:var(--rouge); font-size:22px; font-weight:700; }
.rt-offices-secteurs{ padding:0 16px 12px; }
.rt-root a.rt-offices-popup{ color:var(--ink); text-decoration:none; font:13px/1.4 var(--font); }
.rt-root a.rt-offices-popup strong{ color:var(--rouge); }

/* Carte au milieu d'une page : aide « deux doigts » et boutons + / − */
.rt-carte-aide{ position:absolute; inset:0; z-index:460; display:flex; align-items:center; justify-content:center; padding:20px; text-align:center; background:rgba(43,31,26,.45); color:#fff; font:700 15px/1.3 var(--font); opacity:0; pointer-events:none; transition:opacity .25s; }
.rt-carte-aide.on{ opacity:1; }
.rt-office-carte .leaflet-control-zoom a, .rt-offices-carte .leaflet-control-zoom a{ width:32px; height:32px; line-height:30px; color:var(--ink); }
.rt-offices-carte{ position:relative; }

/* Fenêtre d'un office sur la carte (« carte photo ») */
.rt-ofp-popup .leaflet-popup-content-wrapper{ padding:0; border-radius:18px; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.25); }
.rt-ofp-popup .leaflet-popup-content{ margin:0; width:230px !important; }
.rt-ofp-popup .leaflet-popup-tip{ box-shadow:none; }
.rt-root a.rt-ofp{ display:block; color:var(--ink); text-decoration:none; font-family:var(--font); }
.rt-ofp-photo{ position:relative; display:block; height:104px; background:var(--vine) center/cover; }
.rt-ofp-photo em{ position:absolute; top:8px; left:8px; font-style:normal; background:rgba(255,255,255,.92); color:var(--rouge); font-size:11px; font-weight:700; padding:3px 8px; border-radius:99px; }
.rt-ofp-texte{ display:block; padding:10px 12px 12px; }
.rt-ofp-texte strong{ display:block; font-family:var(--font-titre); font-size:16px; line-height:1.15; }
.rt-ofp-texte small{ display:block; margin-top:3px; color:var(--ink-soft); font-size:12px; }
.rt-ofp-bouton{ display:block; margin-top:9px; padding:8px; border-radius:99px; background:var(--rouge); color:#fff; font-weight:700; font-size:13px; text-align:center; }

/* Page d'office « tableau de bord » */
.rt-office-bureau{ display:flex; align-items:center; gap:10px; margin:12px 16px 0; padding:10px 12px; background:var(--surface); border:1px solid var(--border); border-radius:18px; }
.rt-office-bureau-ico{ color:var(--vine); flex:none; } .rt-office-bureau-ico svg{ width:24px; height:24px; display:block; }
.rt-office-bureau-txt{ flex:1; min-width:0; font-size:13px; } .rt-office-bureau-txt strong{ display:block; font-size:14px; }
.rt-office-bureau .rt-ouv-etat{ margin-top:1px; }
.rt-root a.rt-office-rond{ flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--vine); color:#fff; }
.rt-office-rond svg{ width:18px; height:18px; }
.rt-office-tuiles{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; padding:0 16px; }
.rt-root .rt-office-tuile{ position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; padding:11px 2px 9px; border-radius:16px; border:1.5px solid var(--border); background:var(--surface); color:var(--ink); font:inherit; font-size:11.5px; font-weight:700; line-height:1.1; text-align:center; text-decoration:none; cursor:pointer; }
.rt-root .rt-office-tuile.on{ border-color:var(--rouge); box-shadow:0 0 0 1.5px var(--rouge) inset; }
.rt-root .rt-office-tuile.vide{ opacity:.45; cursor:default; }
.rt-office-tuile em{ position:absolute; top:4px; right:7px; font-style:normal; font-size:10.5px; color:var(--ink-soft); }
.rt-office-rond-ico{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; }
.rt-office-rond-ico svg{ width:21px; height:21px; }
.rt-office-rond-ico svg *{ stroke:#fff; }
.rt-office .rt-office-carte{ margin-top:14px; }

/* Page d'office : période de Noël bien en évidence */
.rt-office-periode{ display:flex; align-items:center; gap:14px; margin:14px 16px 0; padding:16px 18px; border-radius:20px; color:#fff;
  background:linear-gradient(135deg, var(--rouge), #8a1b22); box-shadow:0 8px 22px rgba(179,38,46,.25); }
.rt-office-periode-ico{ flex:none; width:48px; height:48px; border-radius:14px; background:rgba(255,255,255,.16); display:grid; place-items:center; }
.rt-office-periode-ico svg{ width:26px; height:26px; } .rt-office-periode-ico svg *{ stroke:#fff; }
.rt-office-periode-txt{ display:flex; flex-direction:column; min-width:0; }
.rt-office-periode-txt small{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
.rt-office-periode-txt strong{ font-family:var(--font-titre); font-size:21px; line-height:1.15; margin-top:2px; }
.rt-office-periode-txt em{ font-style:normal; font-size:13px; font-weight:700; color:#ffe1a8; margin-top:3px; }
.rt-office .rt-office-tuiles{ margin-top:14px; }
.rt-office-dates{ padding:0 16px 12px; }
.rt-office-dates[hidden]{ display:none; }