:root {
	--rouge: #c8102e;
	--encre: #1c2230;
	--gris: #5b6474;
	--papier: #fbfaf7;
	--carte: #ffffff;
	--ligne: #e4e1d8;
	--vert: #1f7a43;
	--ambre: #9a6400;
	--max: 1100px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--encre); background: var(--papier); }
a { color: var(--rouge); text-underline-offset: 2px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
h1 { font-size: 1.75rem; line-height: 1.25; margin: 1.2rem 0 .4rem; letter-spacing: -.01em; }
h2 { font-size: 1.3rem; line-height: 1.3; margin: 2rem 0 .6rem; padding-top: .4rem; border-top: 1px solid var(--ligne); }
h3 { font-size: 1.05rem; margin: 1.3rem 0 .3rem; }
ul { padding-left: 1.2rem; }
li { margin: .25rem 0; }

/* En-tête */
.site-header { background: var(--carte); border-bottom: 1px solid var(--ligne); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; padding-top: .7rem; padding-bottom: .7rem; }
.logo { display: flex; align-items: center; gap: .55rem; color: var(--encre); text-decoration: none; font-weight: 700; font-size: 1.15rem; margin-right: auto; }
.logo small { display: block; font-weight: 400; font-size: .72rem; color: var(--gris); }
.logo-panneau { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: .3rem solid var(--rouge); background: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .02em; color: var(--encre); }
.nav, .langues { display: flex; gap: .9rem; font-size: .95rem; }
.nav a { color: var(--encre); text-decoration: none; }
.nav a:hover { color: var(--rouge); }
.langues a { color: var(--gris); text-decoration: none; font-size: .82rem; font-weight: 600; padding: .1rem .3rem; border-radius: 4px; }
.langues a[aria-current] { background: var(--encre); color: #fff; }

/* Fiche */
.fil { font-size: .85rem; color: var(--gris); margin-top: 1rem; }
.fil a { color: var(--gris); }
.verifie { color: var(--gris); font-size: .9rem; margin: 0 0 1rem; }
.maintenant { background: var(--carte); border: 1px solid var(--ligne); border-left: .35rem solid var(--rouge); border-radius: 10px; padding: .9rem 1rem .6rem; margin: 1rem 0 1.4rem; }
.maintenant h2 { border: 0; margin: 0 0 .5rem; padding: 0; font-size: 1.05rem; }
.horloge { color: var(--gris); font-weight: 400; }
.statuts { list-style: none; padding: 0; margin: 0; }
.statuts li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem .8rem; padding: .45rem 0; border-top: 1px dashed var(--ligne); }
.statuts li:first-child { border-top: 0; }
.zone-nom { font-weight: 600; }
.zone-etat { font-size: .92rem; }
.zone-etat.on { color: var(--rouge); font-weight: 600; }
.zone-etat.off { color: var(--vert); font-weight: 600; }
.zone-etat.evt { color: var(--ambre); }
.note { font-size: .85rem; color: var(--gris); }
.zone { margin-bottom: .5rem; }
details { margin: .4rem 0 .8rem; }
summary { cursor: pointer; color: var(--gris); font-size: .92rem; }
.varchi { font-size: .9rem; color: var(--gris); }
.acces li { margin: .45rem 0; }
.faq h3 { margin-top: 1rem; }
.sources { font-size: .9rem; }
.liste-villes { columns: 2; }

/* Accueil */
.chapo { font-size: 1.1rem; color: var(--gris); }
.cartes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .8rem; }
.cartes li { margin: 0; }
.cartes a { display: block; background: var(--carte); border: 1px solid var(--ligne); border-radius: 10px; padding: .8rem 1rem; text-decoration: none; color: var(--encre); }
.cartes a:hover { border-color: var(--rouge); }
.cartes strong { display: block; font-size: 1.05rem; }
.cartes span { font-size: .85rem; color: var(--gris); }

/* Pied */
.site-footer { margin-top: 3rem; padding: 1.5rem 0 2rem; background: var(--encre); color: #d6d9e0; font-size: .88rem; }
.site-footer a { color: #fff; }
.copyright { color: #9aa1ad; }

@media (max-width: 30rem) {
	body { font-size: 16px; }
	h1 { font-size: 1.45rem; }
	.liste-villes { columns: 1; }
}

/* Comparatif des villes */
.filtres { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .8rem; }
.filtres button { font: inherit; font-size: .85rem; padding: .3rem .75rem; border: 1px solid var(--ligne); border-radius: 999px; background: var(--carte); color: var(--encre); cursor: pointer; }
.filtres button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }
.comparatif { width: 100%; border-collapse: collapse; font-size: .85rem; line-height: 1.35; background: var(--carte); }
.comparatif th, .comparatif td { text-align: left; vertical-align: top; padding: .5rem .45rem; border-bottom: 1px solid var(--ligne); }
.comparatif thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gris); font-weight: 600; }
.comparatif tbody th a { font-weight: 700; text-decoration: none; }
.comparatif tbody th small { display: block; font-weight: 400; color: var(--gris); font-size: .78rem; }
.comparatif .zone-etat { font-size: .82rem; }
.filtre-vide { color: var(--gris); }
@media (max-width: 40rem) {
	.comparatif thead { display: none; }
	.comparatif, .comparatif tbody, .comparatif tr, .comparatif th, .comparatif td { display: block; width: 100%; }
	.comparatif tr { border: 1px solid var(--ligne); border-radius: 10px; margin: 0 0 .7rem; padding: .3rem .2rem; }
	.comparatif tr[hidden] { display: none; }
	.comparatif th, .comparatif td { border: 0; padding: .2rem .6rem; }
	.comparatif td { display: flex; gap: .6rem; justify-content: space-between; }
	.comparatif td { text-align: right; }
	.comparatif td::before { content: attr(data-label); color: var(--gris); flex: 0 0 42%; text-align: left; }
	.comparatif td > * { text-align: right; }
}

/* Accueil : cartes des villes sur photo */
.cartes-photo { grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; }
.cartes li.avec-photo a { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 10rem; padding: 1rem 1.1rem; border: 0; color: #fff; background: #1c2230; }
.cartes li.avec-photo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cartes li.avec-photo a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 18, 28, 0) 35%, rgba(14, 18, 28, .35) 62%, rgba(14, 18, 28, .72) 100%); transition: background .3s; }
.cartes li.avec-photo strong { font-size: 1.3rem; letter-spacing: -.01em; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.cartes li.avec-photo span { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.cartes li.avec-photo a:hover img, .cartes li.avec-photo a:focus-visible img { transform: scale(1.05); }
.cartes li.avec-photo a:hover::before { background: linear-gradient(180deg, rgba(200, 16, 46, .08) 0%, rgba(14, 18, 28, .35) 62%, rgba(14, 18, 28, .78) 100%); }
.credits-photos { margin: -.3rem 0 .4rem; text-align: right; font-size: .78rem; }
.credits-photos a { color: var(--gris); }
.credits { font-size: .9rem; }

/* Fiche ville : bandeau photo sous le fil d'Ariane */
.bandeau-ville { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 17rem; margin: .6rem 0 1.2rem; border-radius: 12px; background: #1c2230; color: #fff; }
.bandeau-ville img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.bandeau-ville::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 18, 28, 0) 30%, rgba(14, 18, 28, .4) 60%, rgba(14, 18, 28, .78) 100%); }
.bandeau-texte { padding: 1.4rem 1.5rem 1.9rem; max-width: 46rem; }
.bandeau-ville h1 { margin: 0 0 .3rem; color: #fff; font-size: 2rem; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.bandeau-ville .verifie { margin: 0; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.bandeau-credit { position: absolute; right: .7rem; bottom: .35rem; margin: 0; font-size: .68rem; color: rgba(255, 255, 255, .75); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.bandeau-credit a { color: inherit; }
@media (max-width: 30rem) {
	.bandeau-ville { min-height: 13rem; margin-left: -16px; margin-right: -16px; border-radius: 0; }
	.bandeau-texte { padding: 1rem 16px 1.7rem; }
	.bandeau-ville h1 { font-size: 1.45rem; }
	.bandeau-ville .verifie { font-size: .85rem; }
}