/* Styles des pages ville. Reprend les tokens et composants de index.html :
   garder les deux en phase si la charte bouge. */

:root { --brand:#F25C05; --ink:#2B2F33; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; color:var(--ink); background:white; }
::selection { background:#F25C05; color:white; }

.wrap { width:min(1280px,calc(100% - 48px)); margin-inline:auto; }
@media(min-width:768px){ .wrap { width:min(1280px,calc(100% - 64px)); } }

.eyebrow { font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.display { font-family:'Manrope',sans-serif; font-weight:800; line-height:1.1; letter-spacing:-.045em; }
.badge { display:inline-flex; align-items:center; gap:9px; padding:9px 13px; border-radius:999px; background:#FEEDE2; color:#C04B04; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

.button { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:52px; padding:14px 22px; font-size:13px; font-weight:800; border-radius:7px; transition:background .2s,transform .2s; }
.button:hover { transform:translateY(-2px); }
.button-brand { background:var(--brand); color:white; }
.button-brand:hover { background:#D94F03; }
.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
:focus-visible { outline:3px solid var(--brand); outline-offset:5px; }

/* Hero de page ville : une seule photo, moins haute que l'accueil */
.ville-hero-img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px; }
@media(min-width:1024px){ .ville-hero-img { aspect-ratio:4/3; } }

.plate { position:relative; overflow:hidden; border-radius:10px; background:var(--ink); aspect-ratio:4/3; }
.plate img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.plate:hover img { transform:scale(1.04); }

details summary { list-style:none; cursor:pointer; }
details summary::-webkit-details-marker { display:none; }
details[open] .faq-plus { transform:rotate(45deg); }
.faq-plus { transition:transform .2s; color:var(--brand); }

/* Fil d'Ariane : discret, mais c'est lui qui porte le BreadcrumbList */
.breadcrumb { font-size:12px; font-weight:700; color:#686B70; }
.breadcrumb a:hover { color:var(--brand); }
.breadcrumb li + li::before { content:'/'; margin:0 8px; color:#C9CACC; }

/* Maillage interne vers les autres villes */
.ville-link { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:14px 18px; border:1px solid #E4E5E7; border-radius:10px; font-size:14px; font-weight:700; transition:border-color .2s,background .2s; }
.ville-link:hover { border-color:var(--brand); background:#FEF7F2; }
.ville-link[aria-current="page"] { border-color:var(--ink); background:var(--ink); color:white; }

#menu-toggle { flex-shrink:0; border-radius:12px; border-color:#F7D9C4; background:#FEF4ED; color:var(--brand); transition:background .2s,color .2s; }
.burger-lines { position:relative; display:block; width:20px; height:16px; }
.burger-lines span { position:absolute; left:0; width:20px; height:2px; background:currentColor; border-radius:2px; transition:transform .2s,opacity .2s,top .2s; }
.burger-lines span:nth-child(1){ top:0; }
.burger-lines span:nth-child(2){ top:7px; width:14px; left:auto; right:0; }
.burger-lines span:nth-child(3){ top:14px; }
#menu-toggle[aria-expanded="true"] { background:var(--brand); color:white; border-color:var(--brand); }
#menu-toggle[aria-expanded="true"] .burger-lines span:first-child { top:7px; transform:rotate(45deg); }
#menu-toggle[aria-expanded="true"] .burger-lines span:nth-child(2){ opacity:0; }
#menu-toggle[aria-expanded="true"] .burger-lines span:last-child { top:7px; transform:rotate(-45deg); }
#mobile-menu[hidden], #menu-backdrop[hidden] { display:none; }
#mobile-menu { position:absolute; top:calc(100% + 12px); left:16px; right:16px; max-width:420px; margin-left:auto; padding:24px; border:1px solid #38393D; border-radius:16px; background:var(--ink); color:white; box-shadow:0 22px 60px #0004; max-height:calc(100dvh - 160px); overflow-y:auto; overscroll-behavior:contain; animation:menu-in .2s ease-out; transform-origin:top right; }
@keyframes menu-in { from { opacity:0; transform:scale(.96) translateY(-6px); } }
.mobile-nav-link { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; padding:12px 0; border-bottom:1px solid #FFFFFF1A; font-size:15px; font-weight:700; }
#menu-backdrop { position:fixed; inset:0; z-index:30; background:#0006; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .button:hover, .plate:hover img { transform:none; }
}