/* ============================================================ Carnet de voyage — feuille de style partagée Identité visuelle d'origine (variables :root inchangées). Polices : Fraunces (titres) + Hanken Grotesk (texte). Code couleur par ville : bleu = Paris, terracotta = Marseille. ============================================================ */ :root{ --paper:#FBF6EE; --paper-2:#F4ECDF; --card:#FFFDF8; --ink:#241F18; --ink-soft:#574F44; --ink-faint:#8A8073; --line:#E4D8C6; --blue:#1F3A5F; --blue-soft:#33597f; --terra:#B8512A; --terra-soft:#C8693f; --azur:#2E7FA6; --verdon:#2A7D6A; --avignon:#6D4E7F; --carcas:#8A3142; --bdx:#5C2333; --gold:#B98A2E; --gold-soft:#caa14e; --good:#3F7A4B; --warn-bg:#FBEEDB; --warn-line:#E0A53D; --shadow:0 1px 2px rgba(40,30,15,.05),0 12px 30px -18px rgba(40,30,15,.35); --radius:16px; /* Accent thématique : par défaut bleu (Paris). Les pages étape peuvent le basculer via une classe sur (voir plus bas). */ --accent:var(--blue); --accent-soft:var(--blue-soft); } /* Thème par ville appliqué au niveau de la page (additif, n'altère pas le rendu existant qui repose encore sur les classes .par/.mrs). */ body.theme-paris{ --accent:var(--blue); --accent-soft:var(--blue-soft); } body.theme-marseille{ --accent:var(--terra); --accent-soft:var(--terra-soft); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background: radial-gradient(1200px 600px at 80% -10%, rgba(185,138,46,.10), transparent 60%), radial-gradient(900px 500px at -10% 20%, rgba(31,58,95,.07), transparent 55%), var(--paper); color:var(--ink); font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; } .wrap{max-width:880px;margin:0 auto;padding:0 20px} /* HERO */ .hero{position:relative;padding:64px 0 30px;} .hero .eyebrow{font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--terra);font-weight:700;margin:0 0 18px;} .hero h1{font-family:"Fraunces",serif;font-weight:600;font-size:clamp(3rem,11vw,5.6rem);line-height:.92;letter-spacing:-.015em;margin:0;color:var(--ink);} .hero h1 .amp{font-style:italic;font-weight:400;color:var(--gold);} .hero .sub{font-family:"Fraunces",serif;font-style:italic;font-weight:400;font-size:clamp(1.15rem,3.6vw,1.6rem);color:var(--ink-soft);margin:18px 0 0;} .hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;} .chip{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:.86rem;color:var(--ink-soft);box-shadow:var(--shadow);} .chip b{color:var(--ink);font-weight:600} .rule{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:34px 0;} /* NAV */ /* La barre passe À LA LIGNE : toutes les étapes restent visibles (plus de défilement horizontal qui cachait les dernières villes). Sticky sur grand écran (tient en 2 lignes) ; sur petit écran, voir la requête média plus bas (non-collante pour ne pas manger l'écran avec 4 lignes d'onglets). */ nav.bar{position:sticky;top:0;z-index:1200;background:rgba(251,246,238,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);} nav.bar .inner{max-width:880px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:10px 14px;} nav.bar a{flex:0 0 auto;text-decoration:none;color:var(--ink-soft);font-size:.82rem;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid transparent;white-space:nowrap;transition:.18s;} nav.bar a:hover{background:var(--paper-2);color:var(--ink)} nav.bar a .d{color:var(--terra);font-family:"Fraunces",serif;font-weight:600} /* Petit écran : trop d'onglets pour rester collé en haut → barre statique, compacte, alignée à gauche (elle défile avec la page). */ @media (max-width:640px){ nav.bar{position:static;} nav.bar .inner{justify-content:flex-start;gap:5px;padding:8px 10px;} nav.bar a{font-size:.78rem;padding:5px 10px;} } .sec-label{font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--gold);margin:0 0 6px;} h2.block{font-family:"Fraunces",serif;font-weight:600;font-size:clamp(1.5rem,4.6vw,2.05rem);letter-spacing:-.01em;margin:0 0 18px;line-height:1.05;} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:640px){.grid2{grid-template-columns:1fr}} .info{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:15px 16px;} .info h4{margin:0 0 5px;font-size:.97rem;font-weight:700;display:flex;align-items:center;gap:8px} .info p{margin:0;font-size:.93rem;color:var(--ink-soft)} .ic{width:26px;height:26px;flex:0 0 auto;border-radius:8px;display:grid;place-items:center;background:var(--paper-2);font-size:.95rem;} /* ALERTS */ .alerts{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:var(--radius);padding:8px 4px;box-shadow:var(--shadow)} .alert{display:flex;gap:13px;padding:13px 18px;border-bottom:1px dashed rgba(224,165,61,.45)} .alert:last-child{border-bottom:none} .alert .mk{font-size:1.15rem;line-height:1.4} .alert .tx{font-size:.94rem} .alert .tx b{color:#8a5a12} .fix{color:var(--good);font-weight:700} /* MAPS */ .mapcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 16px 14px;margin:16px 0} .mapcard .mh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 4px 12px} .mapcard .mh h3{font-family:"Fraunces",serif;font-weight:600;font-size:1.15rem;margin:0} .mapcard.mrs .mh h3{color:var(--terra)} .mapcard.par .mh h3{color:var(--blue)} .gmaps-btn{flex:0 0 auto;text-decoration:none;font-size:.78rem;font-weight:700;color:#fff;background:var(--blue);border-radius:999px;padding:7px 13px;white-space:nowrap} .mapcard.mrs .gmaps-btn{background:var(--terra)} .leafmap{height:380px;width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--line);z-index:1} @media(max-width:640px){.leafmap{height:320px}} .maphint{font-size:.78rem;color:var(--ink-faint);margin:9px 4px 0;display:flex;align-items:center;gap:6px} .pin-dot{display:block;width:18px;height:18px;border-radius:50%;background:var(--c,#1F3A5F);border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.45)} .num-pin{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--c,#1F3A5F);color:#fff;font-weight:700;font-size:.8rem;border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.45);font-family:"Hanken Grotesk",sans-serif} .leafmap.daymap{height:260px;margin:2px 0 6px} @media(max-width:640px){.leafmap.daymap{height:220px}} .leaflet-popup-content{font-family:"Hanken Grotesk",sans-serif;font-size:.9rem;margin:11px 13px;line-height:1.5} .leaflet-popup-content b{font-family:"Fraunces",serif} .leaflet-popup-content a{color:var(--blue);font-weight:700;text-decoration:none} /* DAY CARDS */ .day{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 24px;margin:18px 0;border-left:5px solid var(--blue);overflow:hidden;} .day.mrs{border-left-color:var(--terra)} .daymedia{position:relative;height:175px;border-radius:12px;overflow:hidden;margin:0 0 18px;background:linear-gradient(120deg,var(--blue),#16293f)} .day.mrs .daymedia{background:linear-gradient(120deg,var(--terra),#7d3417)} .daymedia img{width:100%;height:100%;object-fit:cover;display:block} .daymedia img.cadre-haut{object-position:50% 22%} /* images portrait : garder le haut visible */ .daymedia figcaption{position:absolute;left:13px;bottom:10px;color:#fff;font-family:"Fraunces",serif;font-style:italic;font-size:.92rem;text-shadow:0 1px 8px rgba(0,0,0,.7)} .day-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:6px} .daynum{font-family:"Fraunces",serif;font-weight:600;font-size:1.05rem;width:54px;height:54px;flex:0 0 auto;border-radius:14px;display:grid;place-items:center;background:var(--blue);color:#fff;line-height:1;text-align:center;} .day.mrs .daynum{background:var(--terra)} .daynum small{display:block;font-family:"Hanken Grotesk";font-weight:600;font-size:.56rem;letter-spacing:.12em;opacity:.85;margin-top:3px} .day-head .dh-meta{flex:1;min-width:0} .day-date{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-faint);margin:2px 0} .day-title{font-family:"Fraunces",serif;font-weight:600;font-size:clamp(1.35rem,4.3vw,1.7rem);line-height:1.05;margin:0;letter-spacing:-.01em} .pin{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--blue-soft);font-weight:600;margin-top:7px} .day.mrs .pin{color:var(--terra-soft)} .lede{font-size:.97rem;color:var(--ink-soft);margin:12px 0 4px} .seg-title{font-family:"Fraunces",serif;font-weight:600;font-size:1.02rem;margin:20px 0 10px;color:var(--ink);display:flex;align-items:center;gap:9px} .seg-title::before{content:"";width:18px;height:2px;background:var(--gold);border-radius:2px} .tl{list-style:none;margin:6px 0 0;padding:0} .tl li{position:relative;padding:0 0 16px 86px;min-height:34px} .tl li::before{content:"";position:absolute;left:64px;top:6px;bottom:-4px;width:2px;background:var(--line)} .tl li:last-child::before{display:none} .tl li::after{content:"";position:absolute;left:60px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--blue);border:2px solid var(--card)} .day.mrs .tl li::after{background:var(--terra)} .tl .t{position:absolute;left:0;top:2px;width:54px;text-align:right;font-weight:700;font-size:.82rem;color:var(--ink)} .tl .c{font-size:.95rem} .tl .c b{font-weight:700} .tl .c .meta{display:block;color:var(--ink-faint);font-size:.84rem;margin-top:2px} .call{border-radius:12px;padding:13px 15px;margin:14px 0;font-size:.92rem;border:1px solid} .call .lab{font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:7px;margin-bottom:4px} .kid{background:#FBEFEA;border-color:#E9C9B9} .kid .lab{color:var(--terra)} .tip{background:#EEF3EE;border-color:#CFE0CF} .tip .lab{color:var(--good)} .warnote{background:var(--warn-bg);border-color:var(--warn-line)} .warnote .lab{color:#8a5a12} .restos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px} @media(max-width:640px){.restos{grid-template-columns:1fr}} .resto{border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:var(--paper)} .resto .rn{font-weight:700;font-size:.95rem;display:flex;align-items:center;justify-content:space-between;gap:8px} .stars{flex:0 0 auto;font-size:.78rem;font-weight:700;color:var(--gold);background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 8px;white-space:nowrap} .resto .ty{font-size:.78rem;color:var(--terra-soft);font-weight:600;margin:2px 0 5px} .resto .ds{font-size:.86rem;color:var(--ink-soft);margin:0} .resto .ad{font-size:.78rem;color:var(--ink-faint);margin-top:7px;border-top:1px dashed var(--line);padding-top:6px} a.link{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(31,58,95,.3);font-weight:600} a.link:hover{border-bottom-color:var(--blue)} .optional{border:1px dashed var(--line);border-radius:12px;padding:13px 15px;margin-top:14px;background:transparent} .optional .lab{font-weight:700;color:var(--azur);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px} footer{margin:30px 0 70px} .next{background:linear-gradient(135deg,var(--blue),#16293f);color:#F4ECDF;border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow)} .next h3{font-family:"Fraunces",serif;font-weight:600;font-size:1.5rem;margin:0 0 8px;color:#fff} .next p{margin:0 0 12px;color:#D9CDBA;font-size:.95rem} .next ul{margin:6px 0 0;padding-left:18px;color:#E7DECF;font-size:.92rem} .next li{margin:5px 0} .smallprint{font-size:.78rem;color:var(--ink-faint);text-align:center;margin-top:26px;line-height:1.6} .reveal{opacity:0;transform:translateY(16px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards} @keyframes rise{to{opacity:1;transform:none}} .hero h1{animation-delay:.05s}.hero .sub{animation-delay:.16s}.hero-meta{animation-delay:.26s} @media (prefers-reduced-motion: reduce){.reveal{animation:none;opacity:1;transform:none}} /* ---- Préparatifs : check-list & notes synchronisées ---- */ .syncbar{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;border-radius:999px;padding:6px 13px;border:1px solid var(--line);background:var(--card);margin:0 0 16px;color:var(--ink-soft)} .syncbar .led{width:9px;height:9px;border-radius:50%;background:#c0863a;box-shadow:0 0 0 3px rgba(192,134,58,.18)} .syncbar.on{color:var(--good)} .syncbar.on .led{background:var(--good);box-shadow:0 0 0 3px rgba(63,122,75,.18)} .synccol{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:720px){.synccol{grid-template-columns:1fr}} .box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 18px} .box h3{font-family:"Fraunces",serif;font-weight:600;font-size:1.15rem;margin:0 0 4px} .box .hint{font-size:.82rem;color:var(--ink-faint);margin:0 0 12px} .progress{height:8px;border-radius:999px;background:var(--paper-2);overflow:hidden;margin:0 0 14px} .progress > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--terra));transition:width .4s} ul.todo{list-style:none;margin:0;padding:0} ul.todo li{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-bottom:1px dashed var(--line)} ul.todo li:last-child{border-bottom:none} ul.todo input[type=checkbox]{appearance:none;-webkit-appearance:none;width:21px;height:21px;flex:0 0 auto;margin-top:1px;border:2px solid var(--line);border-radius:6px;cursor:pointer;position:relative;transition:.15s;background:#fff} ul.todo input[type=checkbox]:checked{background:var(--good);border-color:var(--good)} ul.todo input[type=checkbox]:checked::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:.8rem;font-weight:700} ul.todo .tx{flex:1;font-size:.93rem;line-height:1.45} ul.todo li.done .tx{text-decoration:line-through;color:var(--ink-faint)} ul.todo .del,.notes-list .del{flex:0 0 auto;border:none;background:none;color:var(--ink-faint);cursor:pointer;font-size:.95rem;line-height:1;padding:2px 5px;border-radius:6px} ul.todo .del:hover,.notes-list .del:hover{background:var(--paper-2);color:var(--terra)} .addrow{display:flex;gap:8px;margin-top:13px;align-items:flex-end} .addrow input[type=text],.addrow textarea{flex:1;font-family:inherit;font-size:.9rem;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:#fff;color:var(--ink);resize:vertical} .addrow button{flex:0 0 auto;border:none;border-radius:10px;background:var(--blue);color:#fff;font-weight:700;font-size:.85rem;padding:10px 16px;cursor:pointer} .addrow button:hover{background:#16293f} .notes-list{list-style:none;margin:0;padding:0} .notes-list li{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 30px 10px 12px;margin-bottom:9px;font-size:.9rem;position:relative;line-height:1.45} .notes-list li .meta{display:block;font-size:.72rem;color:var(--ink-faint);margin-top:5px} .notes-list li .del{position:absolute;top:7px;right:7px} .empty{font-size:.86rem;color:var(--ink-faint);font-style:italic;padding:6px 0} .databar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 8px 8px 15px;margin:0 0 16px;font-size:.82rem;font-weight:600;color:var(--ink-soft)} .databar .dbinfo{display:inline-flex;align-items:center;gap:8px} .databar .led{width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px rgba(63,122,75,.18)} .databar .dbtools{display:inline-flex;gap:7px} .databar button{border:1px solid var(--line);background:var(--paper-2);color:var(--ink);font-weight:700;font-size:.8rem;border-radius:999px;padding:7px 13px;cursor:pointer;font-family:inherit} .databar button:hover{background:#ece2d2} /* ====== Chrome multi-pages (nav active) ====== */ nav.bar a.active{background:var(--accent);color:#fff;border-color:transparent} nav.bar a.active .d{color:#fff} /* ====== Accueil : tuiles vers les étapes ====== */ .tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px} @media(max-width:640px){.tiles{grid-template-columns:1fr}} .tile{display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;transition:transform .18s} .tile:hover{transform:translateY(-2px)} .tile .tk{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-faint)} .tile h3{font-family:"Fraunces",serif;font-weight:600;font-size:1.25rem;margin:4px 0 6px} .tile p{margin:0;font-size:.9rem;color:var(--ink-soft)} .tile.paris{border-left-color:var(--blue)} .tile.marseille{border-left-color:var(--terra)} .tile.nice{border-left-color:var(--azur)} .tile .go{display:inline-block;margin-top:10px;font-size:.82rem;font-weight:700;color:var(--accent)} /* ====== Recommandations cliquables (Google Maps) ====== */ .resto-link{color:var(--ink);text-decoration:none;border-bottom:1px dashed var(--accent)} .resto-link:hover{color:var(--accent);border-bottom-style:solid} .maps-link{display:inline-block;margin-top:10px;font-size:.82rem;font-weight:700;color:var(--accent);text-decoration:none} .maps-link:hover{text-decoration:underline} /* ====== Transport entre les lieux ====== */ .trajets{list-style:none;margin:6px 0 0;padding:0} .trajet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 0;border-bottom:1px dashed var(--line)} .trajet:last-child{border-bottom:none} .trajet-route{font-size:.9rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .trajet-route .arr{color:var(--accent);font-weight:700} .trajet-ctrl{display:inline-flex;align-items:center;gap:10px} .mode-select{font-family:inherit;font-size:.82rem;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:#fff;color:var(--ink);cursor:pointer} .itineraire{font-size:.82rem;font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap} .itineraire:hover{text-decoration:underline} /* ====== Galerie + bandeau photos ====== */ .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:8px} .gphoto{padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper-2);cursor:pointer;aspect-ratio:4/3;display:block} .gphoto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s} .gphoto:hover img{transform:scale(1.05)} .gphoto:focus-visible{outline:3px solid var(--accent);outline-offset:2px} .gstrip{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;margin-top:8px;scrollbar-width:thin} .gstrip::-webkit-scrollbar{height:7px} .gstrip .gphoto{flex:0 0 auto;width:158px} .credits{font-size:.74rem;color:var(--ink-faint);margin-top:14px;line-height:1.5} /* ====== Vignettes d'activité (dans la timeline) ====== */ .act-photos{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px} .act-thumb{padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper-2);cursor:pointer;width:86px;height:64px;flex:0 0 auto;box-shadow:var(--shadow)} .act-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s} .act-thumb:hover img{transform:scale(1.07)} .act-thumb:focus-visible{outline:3px solid var(--accent);outline-offset:2px} /* ====== Lightbox ====== */ .lb{position:fixed;inset:0;z-index:3000;background:rgba(20,15,8,.93);display:flex;align-items:center;justify-content:center} .lb[hidden]{display:none} .lb-fig{margin:0;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:12px} .lb-img{max-width:92vw;max-height:78vh;object-fit:contain;border-radius:8px;box-shadow:0 12px 48px rgba(0,0,0,.55)} .lb-cap{color:#F4ECDF;font-size:.92rem;text-align:center;max-width:80vw;font-family:"Fraunces",serif;font-style:italic} .lb-cap .lb-credit{display:block;color:#bdb2a0;font-size:.72rem;font-style:normal;font-family:"Hanken Grotesk",sans-serif;margin-top:5px} .lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:none;border-radius:999px;cursor:pointer;line-height:1;width:46px;height:46px;display:grid;place-items:center;font-size:1.5rem} .lb-close{top:14px;right:14px} .lb-prev{left:12px;top:50%;transform:translateY(-50%)} .lb-next{right:12px;top:50%;transform:translateY(-50%)} .lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.28)} .lb-close:focus-visible,.lb-prev:focus-visible,.lb-next:focus-visible{outline:2px solid #fff;outline-offset:2px} @media (prefers-reduced-motion: reduce){.gphoto img{transition:none}} /* ====== Météo en direct ====== */ .meteo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px} @media(max-width:560px){.meteo{grid-template-columns:1fr}} .meteo-city{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px} .mc-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .mc-name{font-family:"Fraunces",serif;font-weight:600;font-size:1.15rem} .mc-now{display:flex;align-items:center;gap:8px} .mc-ic{font-size:1.5rem;line-height:1} .mc-temp{font-size:1.5rem;font-weight:700} .mc-label{color:var(--ink-soft);font-size:.9rem;margin:3px 0 12px} .mc-days{display:flex;gap:8px;flex-wrap:wrap} .mc-day{font-size:.8rem;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:5px 9px;white-space:nowrap} .mc-day b{color:var(--ink);text-transform:capitalize} .meteo-stale{font-size:.82rem;color:#8a5a12;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:10px;padding:8px 12px;margin:0 0 12px} .meteo-loading,.meteo-empty{color:var(--ink-faint);font-size:.9rem;font-style:italic} /* ====== Toast de mise à jour (service worker) ====== */ .sw-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:4000;display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);padding:9px 10px 9px 16px;border-radius:999px;box-shadow:var(--shadow);font-size:.88rem;max-width:92vw} .sw-toast button{border:none;cursor:pointer;font-family:inherit;font-weight:700} .sw-toast .sw-refresh{background:var(--gold);color:#241F18;border-radius:999px;padding:6px 13px;font-size:.82rem} .sw-toast .sw-close{background:none;color:var(--paper);font-size:1rem;padding:2px 5px;line-height:1} /* ====== Thème Nice (azur) ====== */ body.theme-nice{ --accent:var(--azur); --accent-soft:#2E7FA6 } .day.nce{border-left-color:var(--azur)} .day.nce .daymedia{background:linear-gradient(120deg,var(--azur),#1c5e7e)} .day.nce .daynum{background:var(--azur)} .day.nce .pin{color:var(--azur)} .day.nce .tl li::after{background:var(--azur)} .mapcard.nce .mh h3{color:var(--azur)} .mapcard.nce .gmaps-btn{background:var(--azur)} /* ====== Thème Verdon (turquoise du lac) ====== */ body.theme-verdon{ --accent:var(--verdon); --accent-soft:#3E9384 } .day.vrd{border-left-color:var(--verdon)} .day.vrd .daymedia{background:linear-gradient(120deg,var(--verdon),#1B564A)} .day.vrd .daynum{background:var(--verdon)} .day.vrd .pin{color:var(--verdon)} .day.vrd .tl li::after{background:var(--verdon)} .mapcard.vrd .mh h3{color:var(--verdon)} .mapcard.vrd .gmaps-btn{background:var(--verdon)} .tile.verdon{border-left-color:var(--verdon)} body.theme-verdon .optional .lab{color:var(--verdon)} /* ====== Thème Avignon (violet papal) ====== */ body.theme-avignon{ --accent:var(--avignon); --accent-soft:#8A6B9C } .day.avi{border-left-color:var(--avignon)} .day.avi .daymedia{background:linear-gradient(120deg,var(--avignon),#4A3357)} .day.avi .daynum{background:var(--avignon)} .day.avi .pin{color:var(--avignon)} .day.avi .tl li::after{background:var(--avignon)} .mapcard.avi .mh h3{color:var(--avignon)} .mapcard.avi .gmaps-btn{background:var(--avignon)} .tile.avignon{border-left-color:var(--avignon)} body.theme-avignon .optional .lab{color:var(--avignon)} /* ====== Thème Carcassonne (grenat médiéval) ====== */ body.theme-carcassonne{ --accent:var(--carcas); --accent-soft:#A35262 } .day.crc{border-left-color:var(--carcas)} .day.crc .daymedia{background:linear-gradient(120deg,var(--carcas),#56202B)} .day.crc .daynum{background:var(--carcas)} .day.crc .pin{color:var(--carcas)} .day.crc .tl li::after{background:var(--carcas)} .mapcard.crc .mh h3{color:var(--carcas)} .mapcard.crc .gmaps-btn{background:var(--carcas)} .tile.carcassonne{border-left-color:var(--carcas)} body.theme-carcassonne .optional .lab{color:var(--carcas)} /* ====== Thème Bordeaux (lie-de-vin) ====== */ body.theme-bordeaux{ --accent:var(--bdx); --accent-soft:#7A4252 } .day.bdx{border-left-color:var(--bdx)} .day.bdx .daymedia{background:linear-gradient(120deg,var(--bdx),#3A1620)} .day.bdx .daynum{background:var(--bdx)} .day.bdx .pin{color:var(--bdx)} .day.bdx .tl li::after{background:var(--bdx)} .mapcard.bdx .mh h3{color:var(--bdx)} .mapcard.bdx .gmaps-btn{background:var(--bdx)} .tile.bordeaux{border-left-color:var(--bdx)} body.theme-bordeaux .optional .lab{color:var(--bdx)}