/* Municipalité d'Ascot Corner — feuille de style
 * Concept : « le carrefour ». Le logo réunit quatre quarts de cercle (soleil, vert, turquoise,
 * lime) : Ascot Corner est née au carrefour de quatre cantons. Chaque grande section du site
 * reprend un de ces quarts comme repère de couleur ; tout le reste reste calme et lisible.
 */
:root {
  /* Couleurs du logo */
  --sarcelle: #003a38;       /* vert sarcelle profond du mot-symbole */
  --sarcelle-2: #0b524e;
  --turquoise: #38c8c8;
  --vert: #98d068;
  --lime: #b0c028;
  --soleil: #f8c830;
  /* Versions lisibles en texte sur fond clair */
  --turquoise-fort: #0c7a7b;
  --vert-fort: #3d7418;
  --lime-fort: #667408;
  --soleil-fort: #8a6300;
  /* Neutres (légèrement teintés sarcelle) */
  --papier: #f4f7f4;
  --surface: #ffffff;
  --surface-2: #eaf0ec;
  --encre: #12211f;
  --encre-2: #475a57;
  --encre-3: #6c7d7a;
  --ligne: #d9e3de;
  --ligne-forte: #b9cac4;
  /* États */
  --danger: #b3261e;
  --danger-fond: #fbe9e7;
  --succes: #2e6b2f;
  --succes-fond: #e7f3e4;
  --info-fond: #e3f4f3;
  --note-fond: #fdf4d8;
  /* Rôles */
  --primaire: var(--sarcelle);
  --primaire-texte: #ffffff;
  --lien: #0b5e5a;
  --focus: #f8c830;
  --entete: rgba(255,255,255,0.94);
  --pied: #003a38;
  --pied-texte: #d7ebe7;
  /* Typographie */
  --f-titre: 'Lexend', 'Segoe UI', system-ui, sans-serif;
  --f-texte: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --taille: 17px;
  /* Formes */
  --r-s: 8px; --r-m: 14px; --r-l: 22px;
  --ombre: 0 1px 2px rgba(0,40,38,.06), 0 8px 24px -12px rgba(0,40,38,.18);
  --ombre-forte: 0 18px 50px -20px rgba(0,40,38,.35);
  --largeur: 1200px;
  --gouttiere: clamp(16px, 4vw, 32px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #0b1615; --surface: #12201e; --surface-2: #1a2c29;
    --encre: #e6f0ed; --encre-2: #adc0bc; --encre-3: #87a09b; --ligne: #24403b; --ligne-forte: #34574f;
    --turquoise-fort: #5fd8d4; --vert-fort: #a9dc7d; --lime-fort: #c9d65a; --soleil-fort: #f8cf52;
    --danger: #ff8a80; --danger-fond: #3a1614; --succes: #93d18f; --succes-fond: #16301a;
    --info-fond: #10302e; --note-fond: #33290c;
    --primaire: #38c8c8; --primaire-texte: #002624; --lien: #6fdcd6;
    --entete: rgba(14,27,25,0.94); --pied: #06100f; --pied-texte: #b8cfca;
    --ombre: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
    --ombre-forte: 0 18px 50px -20px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #0b1615; --surface: #12201e; --surface-2: #1a2c29;
  --encre: #e6f0ed; --encre-2: #adc0bc; --encre-3: #87a09b; --ligne: #24403b; --ligne-forte: #34574f;
  --turquoise-fort: #5fd8d4; --vert-fort: #a9dc7d; --lime-fort: #c9d65a; --soleil-fort: #f8cf52;
  --danger: #ff8a80; --danger-fond: #3a1614; --succes: #93d18f; --succes-fond: #16301a;
  --info-fond: #10302e; --note-fond: #33290c;
  --primaire: #38c8c8; --primaire-texte: #002624; --lien: #6fdcd6;
  --entete: rgba(14,27,25,0.94); --pied: #06100f; --pied-texte: #b8cfca;
  --ombre: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  --ombre-forte: 0 18px 50px -20px rgba(0,0,0,.7);
  color-scheme: dark;
}
html[data-texte="grand"] { --taille: 19px; }
html[data-texte="tres-grand"] { --taille: 21px; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--taille); scroll-padding-top: 110px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--encre); font-family: var(--f-texte); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--f-titre); line-height: 1.2; margin: 0; color: var(--encre); text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); font-weight: 600; }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 600; }
h3 { font-size: 1.15rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--lien); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 12px; top: -60px; background: var(--primaire); color: var(--primaire-texte); padding: 10px 16px; border-radius: var(--r-s); z-index: 200; }
.evitement:focus { top: 12px; }
.conteneur { max-width: var(--largeur); margin: 0 auto; padding-inline: var(--gouttiere); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }
.ico { width: 1.25em; height: 1.25em; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Bandeau d'alerte ---------- */
.alertes { display: grid; }
.alerte-bandeau { display: flex; gap: 12px; align-items: flex-start; padding-block: 10px; font-size: .92rem; }
.alerte-bandeau .conteneur { display: flex; gap: 12px; align-items: center; width: 100%; }
.alerte-bandeau[data-niveau="info"] { background: var(--sarcelle); color: #fff; }
.alerte-bandeau[data-niveau="important"] { background: var(--soleil); color: #1d1600; }
.alerte-bandeau[data-niveau="urgent"] { background: var(--danger); color: #fff; }
:root[data-theme="dark"] .alerte-bandeau[data-niveau="urgent"] { color: #2a0000; }
.alerte-bandeau a { color: inherit; font-weight: 700; white-space: nowrap; }
.alerte-bandeau .alerte-txt { flex: 1; min-width: 0; }
.alerte-bandeau strong { font-weight: 700; margin-right: 4px; }
.alerte-bandeau .fermer { background: none; border: 0; color: inherit; opacity: .8; padding: 4px; border-radius: 6px; display: inline-flex; }
.alerte-bandeau .fermer:hover { opacity: 1; background: rgba(255,255,255,.15); }

/* ---------- Barre utilitaire ---------- */
.utilitaire { background: var(--surface-2); border-bottom: 1px solid var(--ligne); font-size: .82rem; color: var(--encre-2); }
.utilitaire .conteneur { display: flex; align-items: center; gap: 18px; min-height: 38px; flex-wrap: wrap; }
.utilitaire a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.utilitaire a:hover { color: var(--encre); text-decoration: underline; }
.utilitaire .u-urgence { color: var(--danger); font-weight: 700; }
.utilitaire .u-espace { flex: 1; }
.u-outils { display: flex; align-items: center; gap: 4px; }
.u-outils button { background: none; border: 1px solid transparent; border-radius: 6px; padding: 3px 8px; color: var(--encre-2); font-size: .82rem; display: inline-flex; align-items: center; gap: 5px; }
.u-outils button:hover { border-color: var(--ligne-forte); color: var(--encre); }
.u-outils button[aria-pressed="true"] { background: var(--surface); border-color: var(--ligne-forte); color: var(--encre); }
.u-outils .sep { width: 1px; height: 18px; background: var(--ligne-forte); margin-inline: 6px; }
@media (max-width: 760px) { .utilitaire .u-lien-sec { display: none; } }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--entete); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--ligne); }
.entete .conteneur { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo img { height: 46px; width: auto; }
.logo .logo-sombre { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo .logo-clair { display: none; } :root:not([data-theme="light"]) .logo .logo-sombre { display: block; } }
:root[data-theme="dark"] .logo .logo-clair { display: none; }
:root[data-theme="dark"] .logo .logo-sombre { display: block; }
.nav-principale { display: flex; align-items: stretch; gap: 2px; flex: 1; justify-content: center; }
.nav-principale > .nav-item { position: static; display: flex; }
.entete .conteneur { position: relative; }
.nav-btn { background: none; border: 0; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-family: var(--f-titre); font-size: .92rem; font-weight: 500; color: var(--encre); text-decoration: none; white-space: nowrap; }
.nav-btn:hover, .nav-btn[aria-expanded="true"] { background: var(--surface-2); }
.nav-btn.actif { color: var(--primaire); box-shadow: inset 0 -2px 0 var(--primaire); border-radius: 0; }
.nav-btn .chev { width: 14px; height: 14px; transition: transform .2s; }
.nav-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.entete-actions { display: flex; align-items: center; gap: 8px; }
.btn-recherche { display: inline-flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--ligne); border-radius: 999px; padding: 9px 14px; color: var(--encre-2); font-size: .9rem; min-width: 190px; }
.btn-recherche:hover { border-color: var(--ligne-forte); color: var(--encre); }
.btn-recherche kbd { margin-left: auto; font-family: var(--f-texte); font-size: .75rem; border: 1px solid var(--ligne-forte); border-radius: 5px; padding: 0 6px; color: var(--encre-3); }
.btn-menu { display: none; background: none; border: 1px solid var(--ligne); border-radius: 10px; padding: 9px; color: var(--encre); }
@media (max-width: 1440px) { .btn-recherche { min-width: 0; } .btn-recherche kbd { display: none; } .nav-btn { padding: 10px 11px; } .entete .conteneur { gap: 14px; } }
@media (max-width: 1080px) { .btn-recherche { min-width: 0; } .btn-recherche .txt, .btn-recherche kbd { display: none; } }
@media (max-width: 960px) {
  .nav-principale { display: none; }
  .btn-menu { display: inline-flex; }
  .entete .conteneur { justify-content: space-between; min-height: 66px; }
  .logo img { height: 40px; }
  .btn-cta .txt-long { display: none; }
}
@media (max-width: 420px) { .btn-cta { display: none; } }

/* Méga-menu */
.mega { position: absolute; top: calc(100% - 6px); left: 50%; transform: translateX(-50%); width: min(760px, calc(100% - 32px)); max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); box-shadow: var(--ombre-forte); padding: 22px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 22px; z-index: 60; }
.mega[hidden] { display: none; }
.mega-intro { border-right: 1px solid var(--ligne); padding-right: 22px; display: flex; flex-direction: column; gap: 10px; }
.mega-intro p { color: var(--encre-2); font-size: .9rem; }
.mega-intro a.tout { margin-top: auto; font-weight: 700; font-size: .9rem; }
.mega-liens { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; align-content: start; }
.mega-liens a { display: flex; align-items: center; gap: 10px; padding: 6px 10px; line-height: 1.3; border-radius: var(--r-s); color: var(--encre); text-decoration: none; font-size: .92rem; }
.mega-liens a:hover { background: var(--surface-2); }
.mega-liens a .ico { color: var(--c-fort, var(--primaire)); }

/* Repères de section (les quatre quarts du logo) */
[data-couleur="turquoise"] { --c: var(--turquoise); --c-fort: var(--turquoise-fort); --c-fond: color-mix(in srgb, var(--turquoise) 14%, var(--surface)); }
[data-couleur="vert"] { --c: var(--vert); --c-fort: var(--vert-fort); --c-fond: color-mix(in srgb, var(--vert) 18%, var(--surface)); }
[data-couleur="soleil"] { --c: var(--soleil); --c-fort: var(--soleil-fort); --c-fond: color-mix(in srgb, var(--soleil) 20%, var(--surface)); }
[data-couleur="lime"] { --c: var(--lime); --c-fort: var(--lime-fort); --c-fond: color-mix(in srgb, var(--lime) 18%, var(--surface)); }
.quart { width: 22px; height: 22px; border-radius: 22px 0 0 0; background: var(--c, var(--turquoise)); flex-shrink: 0; display: inline-block; }
.quart.q2 { border-radius: 0 22px 0 0; } .quart.q3 { border-radius: 0 0 22px 0; } .quart.q4 { border-radius: 0 0 0 22px; }

/* Tiroir mobile */
.tiroir { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: flex-end; }
.tiroir[hidden] { display: none; }
.tiroir-fond { position: absolute; inset: 0; background: rgba(0,20,19,.5); }
.tiroir-panneau { position: relative; width: min(420px, 100%); height: 100%; background: var(--surface); overflow-y: auto; padding: calc(16px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; animation: glisse .25s ease; }
@keyframes glisse { from { transform: translateX(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.tiroir-haut { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tiroir details { border-bottom: 1px solid var(--ligne); }
.tiroir summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 4px; font-family: var(--f-titre); font-weight: 600; cursor: pointer; }
.tiroir summary::-webkit-details-marker { display: none; }
.tiroir summary .chev { margin-left: auto; transition: transform .2s; }
.tiroir details[open] summary .chev { transform: rotate(180deg); }
.tiroir details a { display: block; padding: 9px 4px 9px 38px; color: var(--encre); text-decoration: none; }
.tiroir details a:hover { color: var(--lien); }
.tiroir .tiroir-lien { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--ligne); color: var(--encre); text-decoration: none; font-family: var(--f-titre); font-weight: 600; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 1.5px solid transparent; font-family: var(--f-titre); font-weight: 500; font-size: .95rem; text-decoration: none; line-height: 1.2; transition: background .15s, border-color .15s, transform .1s; }
.btn:active { transform: scale(.98); }
.btn-primaire { background: var(--primaire); color: var(--primaire-texte); }
.btn-primaire:hover { background: var(--sarcelle-2); color: #fff; }
:root[data-theme="dark"] .btn-primaire:hover { background: #5fd8d4; color: #002624; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primaire:hover { background: #5fd8d4; color: #002624; } }
.btn-soleil { background: var(--soleil); color: #1d1600; }
.btn-soleil:hover { background: #ffd65a; }
.btn-contour { background: transparent; color: var(--encre); border-color: var(--ligne-forte); }
.btn-contour:hover { border-color: var(--encre); }
.btn-lien { background: none; border: 0; color: var(--lien); padding: 0; font-weight: 700; text-decoration: underline; font-family: var(--f-texte); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-bloc { width: 100%; }
.btn-icone { background: none; border: 1px solid var(--ligne); border-radius: 10px; padding: 8px; display: inline-flex; color: var(--encre); }

/* ---------- Accueil : héros ---------- */
.heros { position: relative; color: #fff; isolation: isolate; overflow: hidden; }
.heros-photo { position: absolute; inset: 0; z-index: -2; }
.heros-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.heros::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(0,34,32,.92) 0%, rgba(0,44,41,.78) 40%, rgba(0,44,41,.25) 75%, rgba(0,44,41,.1) 100%); }
@media (max-width: 760px) { .heros::before { background: linear-gradient(180deg, rgba(0,34,32,.9) 0%, rgba(0,40,38,.82) 55%, rgba(0,44,41,.7) 100%); } .heros-photo img { object-position: 70% 30%; } }
.heros .conteneur { padding-block: clamp(48px, 8vw, 96px) clamp(40px, 6vw, 72px); display: grid; gap: 22px; }
.heros-sur { display: flex; align-items: center; gap: 10px; font-family: var(--f-titre); font-size: .9rem; letter-spacing: .04em; color: #cfeae6; }
.heros-sur .quarts { display: grid; grid-template-columns: 11px 11px; gap: 2px; }
.heros-sur .quarts i { width: 11px; height: 11px; display: block; }
.heros-sur .quarts i:nth-child(1) { background: var(--soleil); border-radius: 11px 0 0 0; }
.heros-sur .quarts i:nth-child(2) { background: var(--vert); border-radius: 0 11px 0 0; }
.heros-sur .quarts i:nth-child(3) { background: var(--turquoise); border-radius: 0 0 0 11px; }
.heros-sur .quarts i:nth-child(4) { background: var(--lime); border-radius: 0 0 11px 0; }
.heros h1 { color: #fff; font-size: clamp(2.1rem, 5.4vw, 3.6rem); font-weight: 600; max-width: 15ch; line-height: 1.08; }
.heros h1 em { font-style: normal; color: var(--soleil); }
.heros-lead { font-size: 1.12rem; max-width: 46ch; color: #e2f2ef; }
.recherche-heros { position: relative; max-width: 640px; margin-top: 6px; }
.recherche-heros input { width: 100%; border: 0; border-radius: 999px; padding: 18px 150px 18px 56px; font-size: 1.05rem; background: #fff; color: #12211f; box-shadow: 0 10px 40px -10px rgba(0,0,0,.5); }
.recherche-heros input::placeholder { color: #6c7d7a; }
.recherche-heros .ico-loupe { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--sarcelle); width: 22px; height: 22px; }
.recherche-heros button { position: absolute; right: 7px; top: 7px; bottom: 7px; border-radius: 999px; border: 0; background: var(--sarcelle); color: #fff; padding: 0 22px; font-family: var(--f-titre); font-weight: 500; }
.recherche-heros button:hover { background: var(--sarcelle-2); }
@media (max-width: 520px) { .recherche-heros input { padding-right: 20px; } .recherche-heros button { display: none; } }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .88rem; color: #cfeae6; }
.suggestions button { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: #fff; border-radius: 999px; padding: 5px 13px; font-size: .86rem; }
.suggestions button:hover { background: rgba(255,255,255,.22); }

/* Accès rapides */
.acces { margin-top: -38px; position: relative; z-index: 2; }
.acces-grille { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); box-shadow: var(--ombre-forte); overflow: hidden; }
.acces-grille a { display: flex; align-items: center; gap: 14px; padding: 20px 20px; color: var(--encre); text-decoration: none; font-family: var(--f-titre); font-weight: 500; font-size: .95rem; border-right: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); transition: background .15s; min-width: 0; }
.acces-grille a:nth-child(4n) { border-right: 0; }
.acces-grille a:nth-last-child(-n+4) { border-bottom: 0; }
.acces-grille a:hover { background: var(--surface-2); }
.acces-grille .pastille { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--c-fond); color: var(--c-fort); flex-shrink: 0; }
.acces-grille .pastille .ico { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .acces-grille { grid-template-columns: repeat(2, 1fr); }
  .acces-grille a:nth-child(4n) { border-right: 1px solid var(--ligne); }
  .acces-grille a:nth-child(2n) { border-right: 0; }
  .acces-grille a:nth-last-child(-n+4) { border-bottom: 1px solid var(--ligne); }
  .acces-grille a:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 420px) { .acces-grille a { padding: 16px 14px; gap: 10px; font-size: .88rem; } .acces-grille .pastille { width: 38px; height: 38px; } }

/* Sections d'accueil */
.bloc-accueil { padding-block: clamp(40px, 6vw, 72px); }
.bloc-accueil + .bloc-accueil { padding-top: 0; }
.tete-bloc { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.tete-bloc p { color: var(--encre-2); margin-top: 6px; }
.tete-bloc a.voir { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.tete-bloc a.voir:hover { text-decoration: underline; }
.surtitre { font-family: var(--f-titre); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--c-fort, var(--turquoise-fort)); font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

.deux-col { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 900px) { .deux-col { grid-template-columns: 1fr; } }

/* Cartes de nouvelles */
.nouvelles-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.carte-nouvelle { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-m); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--encre); transition: box-shadow .2s, transform .2s; }
.carte-nouvelle:hover { box-shadow: var(--ombre); transform: translateY(-2px); }
.carte-nouvelle .img { aspect-ratio: 16/9; background: var(--surface-2); overflow: hidden; max-width: 100%; }
.carte-nouvelle .img img { width: 100%; height: 100%; object-fit: cover; }
.carte-nouvelle .corps { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.meta { font-size: .8rem; color: var(--encre-3); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.etiquette { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--encre-2); }
.carte-nouvelle h3 { font-size: 1.05rem; }
.carte-nouvelle p { color: var(--encre-2); font-size: .92rem; }
.nouvelle-une { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; }
.nouvelle-une .img { aspect-ratio: auto; min-height: 240px; }
.nouvelle-une .corps { padding: 26px; justify-content: center; }
.nouvelle-une h3 { font-size: 1.4rem; }
@media (max-width: 700px) { .nouvelle-une { grid-template-columns: 1fr; } .nouvelle-une .img { min-height: 0; aspect-ratio: 16/9; } }

/* Agenda */
.agenda { display: flex; flex-direction: column; gap: 0; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-m); overflow: hidden; }
.agenda-item { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--ligne); color: var(--encre); text-decoration: none; align-items: center; }
.agenda-item:last-child { border-bottom: 0; }
a.agenda-item:hover { background: var(--surface-2); }
.date-bloc { text-align: center; border-radius: 10px; background: var(--surface-2); padding: 6px 0; font-family: var(--f-titre); line-height: 1.1; }
.date-bloc .j { font-size: 1.35rem; font-weight: 600; display: block; font-variant-numeric: tabular-nums; }
.date-bloc .m { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2); }
.agenda-item h4 { font-size: .98rem; margin-bottom: 2px; }
.agenda-item .meta { font-size: .8rem; }
.agenda-vide { padding: 18px; color: var(--encre-2); }

/* Bandeau réservation */
.bandeau-salles { background: var(--sarcelle); color: #e8f5f3; border-radius: var(--r-l); overflow: hidden; display: grid; grid-template-columns: 1fr 1.1fr; }
.bandeau-salles .txt { padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.bandeau-salles h2 { color: #fff; }
.bandeau-salles .surtitre { color: var(--soleil); }
.bandeau-salles .mosaique { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; min-height: 280px; }
.bandeau-salles .mosaique img { width: 100%; height: 100%; object-fit: cover; }
.bandeau-salles .mosaique img:first-child { grid-row: 1 / 3; }
.bandeau-salles ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .95rem; }
.bandeau-salles li { display: flex; gap: 8px; align-items: center; }
.bandeau-salles li .ico { color: var(--vert); }
@media (max-width: 820px) { .bandeau-salles { grid-template-columns: 1fr; } .bandeau-salles .mosaique { min-height: 200px; } }

/* Découvrir (cartes photo) */
.decouvrir-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .decouvrir-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .decouvrir-grille { grid-template-columns: 1fr; } }
.carte-photo { position: relative; border-radius: var(--r-m); overflow: hidden; aspect-ratio: 4/3; color: #fff; text-decoration: none; display: flex; align-items: flex-end; isolation: isolate; max-width: 100%; }
.carte-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s; }
.carte-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,30,28,.88), rgba(0,30,28,.1) 60%); }
.carte-photo:hover img { transform: scale(1.04); }
.carte-photo .corps { padding: 18px 20px; display: grid; gap: 4px; }
.carte-photo h3 { color: #fff; font-size: 1.15rem; }
.carte-photo p { font-size: .9rem; color: #d7ece8; }

/* Sections (tuiles) */
.sections-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 960px) { .sections-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sections-grille { grid-template-columns: 1fr; } }
.tuile-section { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-m); padding: 20px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--encre); position: relative; overflow: hidden; }
.tuile-section::before { content: ""; position: absolute; right: -1px; top: -1px; width: 56px; height: 56px; background: var(--c); border-radius: 0 0 0 56px; opacity: .9; }
.tuile-section:hover { box-shadow: var(--ombre); }
.tuile-section h3 { padding-right: 40px; }
.tuile-section p { color: var(--encre-2); font-size: .9rem; }
.tuile-section ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .9rem; }
.tuile-section li a { color: var(--lien); text-decoration: none; }
.tuile-section li a:hover { text-decoration: underline; }

/* Bienvenue / 125e */
.bienvenue { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.bienvenue .photo { border-radius: var(--r-l); overflow: hidden; aspect-ratio: 4/3; max-width: 100%; }
.bienvenue .photo img { width: 100%; height: 100%; object-fit: cover; }
.bienvenue .txt { display: grid; gap: 14px; }
.bienvenue p { color: var(--encre-2); }
.cantons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 6px; }
.canton { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-s); padding: 10px; display: grid; gap: 6px; font-family: var(--f-titre); font-size: .85rem; font-weight: 500; }
@media (max-width: 820px) { .bienvenue { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .cantons { grid-template-columns: 1fr 1fr; } }

/* ---------- Pages intérieures ---------- */
.tete-page { background: var(--surface); border-bottom: 1px solid var(--ligne); position: relative; overflow: hidden; }
.tete-page .conteneur { padding-block: 28px 34px; display: grid; gap: 12px; position: relative; }
.tete-page.avec-image .conteneur { grid-template-columns: 1.3fr 1fr; align-items: center; gap: 32px; }
.tete-page .img-tete { border-radius: var(--r-l); overflow: hidden; aspect-ratio: 16/10; max-width: 100%; }
.tete-page .img-tete img { width: 100%; height: 100%; object-fit: cover; }
.tete-page .coin { position: absolute; right: 0; top: 0; width: 120px; height: 120px; background: var(--c, var(--turquoise)); border-radius: 0 0 0 120px; opacity: .85; }
.tete-page.avec-image .coin { display: none; }
.tete-page h1 { max-width: 22ch; }
.tete-page .chapeau { font-size: 1.1rem; color: var(--encre-2); max-width: 60ch; }
@media (max-width: 820px) { .tete-page.avec-image .conteneur { grid-template-columns: 1fr; } .tete-page .img-tete { order: -1; aspect-ratio: 21/9; } .tete-page .coin { width: 70px; height: 70px; } }
.fil { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .85rem; color: var(--encre-3); padding-right: 90px; }
.fil a { color: var(--encre-2); text-decoration: none; }
.fil a:hover { text-decoration: underline; color: var(--encre); }
.fil .ico { width: 14px; height: 14px; }

.corps-page { padding-block: 36px 64px; }
.grille-page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.grille-page.sans-cote { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 960px) { .grille-page { grid-template-columns: minmax(0, 1fr); } }
.contenu { display: flex; flex-direction: column; gap: 30px; min-width: 0; }
.cote { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 100px; }
@media (max-width: 960px) { .cote { position: static; } }
.encadre { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-m); padding: 18px 20px; }
.encadre h2, .encadre h3 { font-size: .98rem; margin-bottom: 10px; }
.nav-section { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-section a { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: var(--r-s); color: var(--encre-2); text-decoration: none; font-size: .92rem; }
.nav-section a:hover { background: var(--surface-2); color: var(--encre); }
.nav-section a[aria-current="page"] { background: var(--c-fond, var(--surface-2)); color: var(--encre); font-weight: 700; }
.nav-section .ico { color: var(--c-fort, var(--primaire)); width: 18px; height: 18px; }
.carte-contact { display: grid; gap: 12px; }
.carte-contact .personne { display: grid; gap: 2px; font-size: .92rem; padding-bottom: 12px; border-bottom: 1px solid var(--ligne); }
.carte-contact .personne:last-child { border-bottom: 0; padding-bottom: 0; }
.carte-contact .nom { font-weight: 700; }
.carte-contact .titre { color: var(--encre-2); font-size: .86rem; }
.ligne-coord { display: flex; align-items: center; gap: 8px; color: var(--encre); font-size: .9rem; word-break: break-word; }
.ligne-coord .ico { color: var(--encre-3); width: 16px; height: 16px; }
.ligne-coord a { color: var(--lien); }

/* Blocs de contenu */
.bloc h2 { margin-bottom: 14px; font-size: 1.35rem; }
.prose { max-width: 70ch; display: grid; gap: 14px; color: var(--encre); }
.prose h3 { margin-top: 8px; font-size: 1.08rem; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.prose li::marker { color: var(--c-fort, var(--turquoise-fort)); }
.prose strong { font-weight: 700; }
.bloc-repli { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-m); }
.bloc-repli summary { list-style: none; cursor: pointer; padding: 16px 20px; display: flex; align-items: center; gap: 12px; font-family: var(--f-titre); font-weight: 600; font-size: 1.02rem; }
.bloc-repli summary::-webkit-details-marker { display: none; }
.bloc-repli summary .chev { margin-left: auto; transition: transform .2s; color: var(--encre-3); }
.bloc-repli[open] summary .chev { transform: rotate(180deg); }
.bloc-repli .prose { padding: 0 20px 20px; }
.groupe-replis { display: grid; gap: 10px; }

.faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-m); overflow: hidden; }
.fait { padding: 16px 18px; border-right: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); margin-right: -1px; margin-bottom: -1px; }
.fait dt { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); font-weight: 700; margin-bottom: 4px; }
.fait dd { margin: 0; font-family: var(--f-titre); font-weight: 500; }

.action { display: flex; gap: 18px; align-items: center; background: var(--c-fond, var(--info-fond)); border-radius: var(--r-m); padding: 20px 22px; flex-wrap: wrap; }
.action .pastille { width: 52px; height: 52px; border-radius: 14px; background: var(--surface); display: grid; place-items: center; color: var(--c-fort, var(--primaire)); flex-shrink: 0; }
.action .pastille .ico { width: 26px; height: 26px; }
.action .txt { flex: 1; min-width: 220px; display: grid; gap: 4px; }
.action .txt p { color: var(--encre-2); font-size: .94rem; }

.callout { display: flex; gap: 14px; align-items: flex-start; border-radius: var(--r-m); padding: 16px 18px; border: 1px solid transparent; }
.callout .ico { margin-top: 3px; }
.callout .prose { gap: 8px; }
.callout[data-niveau="info"] { background: var(--info-fond); border-color: color-mix(in srgb, var(--turquoise) 40%, transparent); }
.callout[data-niveau="info"] > .ico { color: var(--turquoise-fort); }
.callout[data-niveau="note"] { background: var(--note-fond); border-color: color-mix(in srgb, var(--soleil) 45%, transparent); }
.callout[data-niveau="note"] > .ico { color: var(--soleil-fort); }
.callout[data-niveau="succes"] { background: var(--succes-fond); border-color: color-mix(in srgb, var(--vert) 50%, transparent); }
.callout[data-niveau="succes"] > .ico { color: var(--succes); }
.callout[data-niveau="urgent"] { background: var(--danger-fond); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.callout[data-niveau="urgent"] > .ico { color: var(--danger); }

.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: etape; }
.etapes li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding-bottom: 16px; position: relative; counter-increment: etape; }
.etapes li::before { content: counter(etape); width: 34px; height: 34px; border-radius: 50%; background: var(--primaire); color: var(--primaire-texte); display: grid; place-items: center; font-family: var(--f-titre); font-weight: 600; font-size: .95rem; position: relative; z-index: 1; }
.etapes li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--ligne); }
.etapes li > div { padding-top: 5px; }
.etapes.sans-ordre li::before { content: ""; width: 14px; height: 14px; margin: 9px 10px 0; background: var(--c, var(--turquoise)); }
.etapes.sans-ordre li:not(:last-child)::after { display: none; }
.etapes.sans-ordre li { padding-bottom: 10px; }

.liens-liste { display: grid; gap: 10px; }
.lien-carte { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-m); padding: 14px 16px; color: var(--encre); text-decoration: none; }
.lien-carte:hover { border-color: var(--ligne-forte); box-shadow: var(--ombre); }
.lien-carte .ico { color: var(--c-fort, var(--primaire)); }
.lien-carte .txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lien-carte .txt strong { font-family: var(--f-titre); font-weight: 500; }
.lien-carte .txt span { font-size: .86rem; color: var(--encre-2); }
.lien-carte .fleche { color: var(--encre-3); }

.cartes-liens { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.carte-lien { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-m); overflow: hidden; text-decoration: none; color: var(--encre); display: flex; flex-direction: column; }
.carte-lien:hover { box-shadow: var(--ombre); }
.carte-lien .img { aspect-ratio: 16/9; overflow: hidden; max-width: 100%; }
.carte-lien .img img { width: 100%; height: 100%; object-fit: cover; }
.carte-lien .corps { padding: 16px 18px; display: grid; gap: 6px; }
.carte-lien p { color: var(--encre-2); font-size: .9rem; }

.table-defil { overflow-x: auto; border: 1px solid var(--ligne); border-radius: var(--r-m); background: var(--surface); }
table.tableau { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 520px; }
table.tableau th, table.tableau td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--ligne); vertical-align: top; }
table.tableau th { background: var(--surface-2); font-family: var(--f-titre); font-weight: 500; font-size: .85rem; }
table.tableau tr:last-child td { border-bottom: 0; }
table.tableau td:first-child { font-weight: 700; }

.liste-colonnes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.liste-colonnes li { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-s); padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; }
.liste-colonnes li .quart { width: 14px; height: 14px; border-radius: 14px 0 0 0; margin-top: 5px; }

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.chiffre { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-m); padding: 18px 20px; }
.chiffre strong { display: block; font-family: var(--f-titre); font-size: 2rem; font-weight: 600; color: var(--c-fort, var(--primaire)); font-variant-numeric: tabular-nums; }
.chiffre span { color: var(--encre-2); font-size: .9rem; }

.figure { margin: 0; display: grid; gap: 8px; }
.figure img { border-radius: var(--r-m); border: 1px solid var(--ligne); }
.figure figcaption { font-size: .85rem; color: var(--encre-3); }

.numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.numero { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-m); padding: 16px 18px; display: grid; gap: 4px; }
.numero .n { font-family: var(--f-titre); font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; user-select: all; }
.numero .nom { font-weight: 700; font-size: .92rem; }
.numero .note { font-size: .84rem; color: var(--encre-2); }
.numero.urgent { background: var(--danger); border-color: var(--danger); color: #fff; }
.numero.urgent .n { font-size: 2.3rem; }
.numero.urgent .note { color: #ffe3e0; }
:root[data-theme="dark"] .numero.urgent { color: #2a0000; } :root[data-theme="dark"] .numero.urgent .note { color: #3a0906; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .numero.urgent { color: #2a0000; } :root:not([data-theme="light"]) .numero.urgent .note { color: #3a0906; } }

/* Documents */
.docs-outils { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.champ-recherche { position: relative; flex: 1; min-width: 200px; }
.champ-recherche input { width: 100%; padding: 11px 14px 11px 40px; border-radius: 999px; border: 1.5px solid var(--ligne); background: var(--surface); }
.champ-recherche input:focus { border-color: var(--primaire); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--turquoise) 30%, transparent); }
.champ-recherche .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--encre-3); width: 18px; height: 18px; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce { border: 1px solid var(--ligne); background: var(--surface); border-radius: 999px; padding: 6px 13px; font-size: .86rem; color: var(--encre-2); }
.puce:hover { border-color: var(--ligne-forte); color: var(--encre); }
.puce[aria-pressed="true"] { background: var(--primaire); color: var(--primaire-texte); border-color: var(--primaire); }
.docs-liste { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-m); overflow: hidden; }
.docs-groupe-titre { padding: 10px 18px; background: var(--surface-2); font-family: var(--f-titre); font-weight: 600; font-size: .9rem; border-bottom: 1px solid var(--ligne); font-variant-numeric: tabular-nums; }
.doc { display: flex; gap: 14px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--ligne); color: var(--encre); text-decoration: none; }
.doc:last-child { border-bottom: 0; }
.doc:hover { background: var(--surface-2); }
.doc .type { width: 38px; height: 44px; border-radius: 6px; background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); display: grid; place-items: center; font-size: .66rem; font-weight: 700; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); }
.doc .type.web { background: var(--info-fond); color: var(--turquoise-fort); border-color: color-mix(in srgb, var(--turquoise) 30%, transparent); }
.doc .txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.doc .txt strong { font-weight: 700; font-size: .95rem; }
.doc .txt span { font-size: .8rem; color: var(--encre-3); }
.doc .ico-dl { color: var(--encre-3); }
.docs-plus { display: flex; justify-content: center; padding: 10px; border-top: 1px solid var(--ligne); }
.docs-vide { padding: 22px 18px; color: var(--encre-2); }
.archives { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--encre-2); }

/* Contact, bottin */
.bottin-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.fiche { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-m); padding: 16px 18px; display: grid; gap: 6px; align-content: start; }
.fiche .nom { font-family: var(--f-titre); font-weight: 600; }
.fiche .titre { color: var(--encre-2); font-size: .88rem; }
.fiche .service { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--encre-3); }
.bottin-service { margin-top: 10px; margin-bottom: 4px; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; }

.contact-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 860px) { .contact-grille { grid-template-columns: 1fr; } }
.panneau { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); padding: clamp(18px, 3vw, 28px); display: grid; gap: 14px; align-content: start; }
.panneau h2 { font-size: 1.2rem; }
.horaire { display: grid; gap: 0; }
.horaire div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--ligne); font-size: .95rem; }
.horaire div:last-child { border-bottom: 0; }
.horaire .h { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.horaire .aujourdhui { color: var(--c-fort, var(--turquoise-fort)); }
.statut-ouverture { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.statut-ouverture::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.statut-ouverture.ouvert { background: var(--succes-fond); color: var(--succes); }
.statut-ouverture.ferme { background: var(--surface-2); color: var(--encre-2); }

/* Formulaires */
.champ-groupe { display: grid; gap: 6px; }
.champ-groupe label, .etiquette-champ { font-weight: 700; font-size: .9rem; }
.champ-groupe .aide { font-size: .8rem; color: var(--encre-3); }
.champ { width: 100%; padding: 11px 13px; border-radius: var(--r-s); border: 1.5px solid var(--ligne-forte); background: var(--surface); color: var(--encre); }
.champ:focus { outline: none; border-color: var(--primaire); box-shadow: 0 0 0 3px color-mix(in srgb, var(--turquoise) 28%, transparent); }
.champ.err { border-color: var(--danger); }
.msg-erreur { color: var(--danger); font-size: .82rem; }
.rangee { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .rangee { grid-template-columns: 1fr; } }
.formulaire { display: grid; gap: 16px; }

/* Carte */
.carte-zone { display: grid; grid-template-columns: 340px 1fr; gap: 0; border: 1px solid var(--ligne); border-radius: var(--r-l); overflow: hidden; background: var(--surface); min-height: 540px; }
.carte-liste { border-right: 1px solid var(--ligne); display: flex; flex-direction: column; min-height: 0; max-height: 640px; }
.carte-liste .filtres { padding: 14px; border-bottom: 1px solid var(--ligne); }
.carte-liste .items { overflow-y: auto; flex: 1; }
.lieu { display: grid; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--ligne); cursor: pointer; background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; width: 100%; }
.lieu:hover, .lieu.actif { background: var(--surface-2); }
.lieu .t { font-size: .75rem; color: var(--encre-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.lieu .t i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.lieu strong { font-family: var(--f-titre); font-weight: 500; }
.lieu span { font-size: .86rem; color: var(--encre-2); }
#carteLeaflet { width: 100%; height: 100%; min-height: 540px; background: var(--surface-2); }
.carte-repli { padding: 24px; display: grid; gap: 12px; align-content: center; justify-items: start; }
@media (max-width: 860px) { .carte-zone { grid-template-columns: 1fr; } .carte-liste { max-height: 320px; border-right: 0; border-bottom: 1px solid var(--ligne); } #carteLeaflet { min-height: 380px; } }
.leaflet-container { font-family: var(--f-texte) !important; }
.leaflet-popup-content { font-size: .9rem; }

/* Recherche plein écran */
.dlg-recherche { position: fixed; inset: 0; z-index: 100; display: grid; justify-items: center; align-items: start; padding: calc(8vh + env(safe-area-inset-top, 0px)) 16px 16px; }
.dlg-recherche[hidden] { display: none; }
.dlg-recherche .fond { position: absolute; inset: 0; background: rgba(0,20,19,.55); backdrop-filter: blur(3px); }
.dlg-boite { position: relative; width: min(720px, 100%); background: var(--surface); border-radius: var(--r-l); box-shadow: var(--ombre-forte); overflow: hidden; display: flex; flex-direction: column; max-height: 80vh; }
.dlg-champ { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--ligne); }
.dlg-champ input { flex: 1; border: 0; background: none; font-size: 1.15rem; outline: none; min-width: 0; }
.dlg-champ .ico { color: var(--encre-3); width: 22px; height: 22px; }
.dlg-resultats { overflow-y: auto; padding: 8px; }
.res-groupe { padding: 10px 12px 4px; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--encre-3); font-weight: 700; }
.res { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-s); color: var(--encre); text-decoration: none; }
.res:hover, .res[aria-selected="true"] { background: var(--surface-2); }
.res .ico { color: var(--c-fort, var(--primaire)); }
.res .txt { flex: 1; min-width: 0; display: grid; }
.res .txt strong { font-weight: 700; font-size: .95rem; }
.res .txt span { font-size: .82rem; color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res mark { background: color-mix(in srgb, var(--soleil) 45%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.dlg-pied { border-top: 1px solid var(--ligne); padding: 10px 16px; font-size: .78rem; color: var(--encre-3); display: flex; gap: 14px; flex-wrap: wrap; }
.dlg-vide { padding: 22px 14px; color: var(--encre-2); }

/* Pied de page */
.pied { background: var(--pied); color: var(--pied-texte); margin-top: 0; }
.pied .conteneur { padding-block: 48px 28px; display: grid; gap: 32px; }
.pied-haut { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 28px; }
@media (max-width: 900px) { .pied-haut { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pied-haut { grid-template-columns: 1fr; } }
.pied h2 { color: #fff; font-size: .95rem; margin-bottom: 12px; }
.pied a { color: var(--pied-texte); text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .92rem; }
.pied .logo-pied { height: 44px; width: auto; margin-bottom: 14px; }
.pied .coord { display: grid; gap: 6px; font-size: .92rem; }
.pied-bas { border-top: 1px solid rgba(255,255,255,.14); padding-top: 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .82rem; }
.pied .urgence-pied { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border-radius: var(--r-s); padding: 8px 12px; font-size: .88rem; margin-top: 10px; }
.pied-quarts { display: flex; gap: 3px; }
.pied-quarts i { width: 12px; height: 12px; display: block; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); background: var(--encre); color: var(--papier); padding: 12px 20px; border-radius: 999px; font-size: .92rem; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 150; max-width: 90vw; text-align: center; box-shadow: var(--ombre-forte); }
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Page de nouvelle */
.article { max-width: 760px; display: grid; gap: 20px; }
.article .img-article { border-radius: var(--r-l); overflow: hidden; aspect-ratio: 16/8; max-width: 100%; }
.article .img-article img { width: 100%; height: 100%; object-fit: cover; }

/* Calendrier complet */
.cal-mois { display: grid; gap: 10px; }
.cal-mois h3 { text-transform: capitalize; margin-top: 10px; }
.filtres-rang { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }

/* Indicateur de source (démo) */
.source-contenu { font-size: .75rem; color: var(--pied-texte); opacity: .8; display: inline-flex; align-items: center; gap: 6px; }
.source-contenu i { width: 8px; height: 8px; border-radius: 50%; background: var(--soleil); display: inline-block; }
.source-contenu.en-ligne i { background: var(--vert); }

/* Apparition douce des vues */
.vue-entree { animation: entree .3s ease both; }
@keyframes entree { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Module de location de salles ---------- */
.r-onglets { margin-bottom: 22px; position: sticky; top: 86px; z-index: 5; background: var(--papier); padding-block: 8px; }
@media (max-width: 960px) { .r-onglets { top: 70px; } }
.r-vue { display: grid; gap: 26px; }
.r-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.r-carte { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); overflow: hidden; display: flex; flex-direction: column; }
.r-carte-img { padding: 0; border: 0; background: var(--surface-2); aspect-ratio: 16/10; overflow: hidden; position: relative; display: block; max-width: 100%; }
.r-carte-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.r-carte-img:hover img { transform: scale(1.04); }
.r-badge { position: absolute; left: 12px; top: 12px; background: var(--surface); color: var(--encre); border-radius: 999px; padding: 4px 10px 4px 8px; font-size: .78rem; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.r-carte-corps { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.r-carte-corps h3 { font-size: 1.2rem; }
.r-sous { font-size: .86rem; color: var(--encre-2); }
.r-cap { display: flex; gap: 8px; align-items: center; font-size: .92rem; color: var(--encre-2); }
.r-cap .ico { color: var(--vert-fort); }
.r-puces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.r-puces li { font-size: .78rem; background: var(--surface-2); border-radius: 999px; padding: 4px 10px; color: var(--encre-2); }
.r-carte-bas { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ligne); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.r-prix { font-family: var(--f-titre); font-size: 1.3rem; font-weight: 600; color: var(--encre); font-variant-numeric: tabular-nums; }
.r-prix span { display: block; font-family: var(--f-texte); font-size: .76rem; font-weight: 400; color: var(--encre-3); }
.r-etapes h2 { margin-bottom: 14px; }
.r-detail { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 900px) { .r-detail { grid-template-columns: 1fr; } }
.r-galerie-principale { border-radius: var(--r-l); overflow: hidden; aspect-ratio: 16/10; background: var(--surface-2); max-width: 100%; }
.r-galerie-principale img { width: 100%; height: 100%; object-fit: cover; }
.r-vignettes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }
.r-vignettes button { padding: 0; border: 2px solid transparent; border-radius: var(--r-s); overflow: hidden; aspect-ratio: 4/3; background: none; max-width: 100%; }
.r-vignettes button.actif { border-color: var(--soleil); }
.r-vignettes img { width: 100%; height: 100%; object-fit: cover; }
.r-fiche { position: sticky; top: 150px; }
@media (max-width: 900px) { .r-fiche { position: static; } }
.r-dl { margin: 0; display: grid; gap: 0; }
.r-dl > div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ligne); font-size: .9rem; }
.r-dl > div:last-child { border-bottom: 0; }
.r-dl dt { color: var(--encre-3); }
.r-dl dd { margin: 0; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.r-tarifs td, .r-tarifs th { padding: 8px 10px; }
.r-tarifs tr.r-actif td { background: var(--c-fond, var(--info-fond)); }
.r-note { font-size: .82rem; color: var(--encre-3); }
.r-cal { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; }
@media (max-width: 820px) { .r-cal { grid-template-columns: 1fr; } }
.r-cal-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.r-cal-tete h3 { text-transform: capitalize; }
.r-gauche { transform: rotate(180deg); }
.r-cal-jours-sem, .r-cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; }
.r-cal-jours-sem { font-size: .76rem; color: var(--encre-3); margin-bottom: 6px; font-weight: 700; }
.r-jour { aspect-ratio: 1; border: 0; border-radius: 10px; background: var(--surface-2); font-size: .92rem; font-variant-numeric: tabular-nums; color: var(--encre); min-width: 0; }
.r-jour.vide { background: transparent; }
.r-jour.passe { background: transparent; color: var(--encre-3); opacity: .45; cursor: default; }
.r-jour.dispo { background: color-mix(in srgb, var(--vert) 22%, var(--surface)); font-weight: 700; }
.r-jour.dispo:hover { background: color-mix(in srgb, var(--vert) 40%, var(--surface)); }
.r-jour.plein { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--encre-3); text-decoration: line-through; cursor: not-allowed; }
.r-jour.sel { background: var(--primaire) !important; color: var(--primaire-texte) !important; }
.r-legende { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: .82rem; color: var(--encre-2); }
.r-legende span { display: inline-flex; align-items: center; gap: 6px; }
.r-legende i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.r-l-dispo { background: color-mix(in srgb, var(--vert) 35%, var(--surface)); }
.r-l-plein { background: color-mix(in srgb, var(--danger) 18%, var(--surface)); }
.r-l-sel { background: var(--primaire); }
.r-choix { display: grid; gap: 12px; align-content: start; background: var(--surface-2); border-radius: var(--r-m); padding: 18px; }
.r-puces-dates { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.r-puce-date { display: inline-flex; align-items: center; gap: 4px; background: var(--primaire); color: var(--primaire-texte); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: .84rem; }
.r-puce-date button { background: none; border: 0; color: inherit; display: inline-flex; padding: 2px; border-radius: 50%; }
.r-puce-date button .ico { width: 14px; height: 14px; }
.r-estime { font-size: .95rem; }
.r-form-grille { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .r-form-grille { grid-template-columns: 1fr; } }
.r-resume { position: sticky; top: 150px; }
@media (max-width: 900px) { .r-resume { position: static; } }
.r-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-top: 12px; border-top: 2px solid var(--encre); font-family: var(--f-titre); }
.r-total strong { font-size: 1.2rem; text-align: right; }
.r-cases { display: flex; flex-wrap: wrap; gap: 8px; }
.r-case { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--ligne-forte); border-radius: 999px; padding: 8px 14px; font-size: .9rem; cursor: pointer; }
.r-case input { accent-color: var(--sarcelle); width: 16px; height: 16px; }
.r-case.off { opacity: .45; cursor: not-allowed; }
.r-confirmation { text-align: center; justify-items: center; max-width: 640px; margin: 0 auto; padding: 36px 24px; }
.r-ok { width: 72px; height: 72px; border-radius: 50%; background: var(--succes); color: #fff; display: grid; place-items: center; }
.r-ok .ico { width: 36px; height: 36px; stroke-width: 2.4; }
.r-code { font-family: var(--f-titre); font-weight: 600; letter-spacing: .06em; background: color-mix(in srgb, var(--soleil) 25%, var(--surface)); border-radius: 999px; padding: 8px 18px; user-select: all; }
.r-avis-liste { display: grid; gap: 14px; }
.r-avis { gap: 8px; }
.r-avis-tete { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.r-etoiles-lecture { color: var(--soleil-fort); letter-spacing: 2px; }
.r-etoiles-lecture span { color: var(--ligne-forte); }
.r-etoiles { display: flex; gap: 4px; }
.r-etoiles button { background: none; border: 0; padding: 2px; color: var(--ligne-forte); }
.r-etoiles button .ico { width: 30px; height: 30px; }
.r-etoiles button.on { color: var(--soleil-fort); }
.r-etoiles button.on .ico { fill: currentColor; }
.btn-cta { white-space: nowrap; }
@media (max-width: 1340px) { .btn-cta .txt-long { display: none; } .btn-cta { padding: 11px 13px; } }
@media (max-width: 600px) { .alerte-bandeau .conteneur { flex-wrap: wrap; } .alerte-bandeau .alerte-txt { flex: 1 1 calc(100% - 100px); } .alerte-bandeau a { order: 3; margin-left: 32px; } }
.r-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .r-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .alerte-bandeau .fermer { order: 2; } }
@media (max-width: 760px) { .utilitaire .conteneur { flex-wrap: nowrap; gap: 10px; } .btn-theme .lbl { display: none; } }
.faits { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* Photos du personnel et des élus */
.avatar { width: 72px; height: 88px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--surface-2); display: grid; place-items: center; font-family: var(--f-titre); font-weight: 600; color: var(--turquoise-fort); font-size: 1.2rem; }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.avatar.petit { width: 44px; height: 54px; border-radius: 9px; font-size: .9rem; }
.avatar.sans-photo { background: color-mix(in srgb, var(--turquoise) 16%, var(--surface)); }
.fiche-photo { display: flex; gap: 14px; align-items: flex-start; }
.fiche-txt { display: grid; gap: 4px; min-width: 0; }
.personne-tete { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
.personne-tete > div { display: grid; gap: 2px; }
.elus-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.elu { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-m); overflow: hidden; display: flex; flex-direction: column; }
.elu.vedette { border-color: var(--soleil); box-shadow: 0 0 0 2px var(--soleil); }
.elu-photo { aspect-ratio: 4/5; background: var(--surface-2); max-width: 100%; }
.elu-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.elu-photo .avatar { width: 100%; height: 100%; border-radius: 0; font-size: 2rem; }
.elu-txt { padding: 14px 16px 16px; display: grid; gap: 4px; }
.elu-txt .nom { font-family: var(--f-titre); font-weight: 600; font-size: 1.05rem; }
.elu-txt .service, .fiche .service { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--encre-3); }
.elu-txt .ligne-coord { font-size: .84rem; }
details.docs-annee { border-bottom: 1px solid var(--ligne); }
details.docs-annee:last-of-type { border-bottom: 0; }
details.docs-annee > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; border-bottom: 0; }
details.docs-annee > summary::-webkit-details-marker { display: none; }
details.docs-annee > summary span { font-family: var(--f-texte); font-weight: 400; color: var(--encre-3); font-size: .82rem; }
details.docs-annee > summary .chev { margin-left: auto; color: var(--encre-3); transition: transform .2s; }
details.docs-annee[open] > summary .chev { transform: rotate(180deg); }
details.docs-annee[open] > summary { border-bottom: 1px solid var(--ligne); }

/* Collectes */
.bloc-collecte { padding-block: 32px 0; }
.collecte-carte { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); padding: clamp(18px, 3vw, 26px); display: grid; gap: 16px; }
.collecte-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.collecte-tete h2 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.collecte-tete p { color: var(--encre-2); margin-top: 4px; }
.bacs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .bacs { grid-template-columns: minmax(0, 1fr); } }
.bac-item { display: flex; gap: 12px; align-items: center; background: var(--bac-fond); border-radius: var(--r-m); padding: 14px 16px; }
.bac-item .ico.bac { width: 38px; height: 38px; }
.bac-item > div { display: grid; gap: 1px; min-width: 0; }
.bac-nom { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--bac); }
:root[data-theme="dark"] .bac-nom { color: var(--encre-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bac-nom { color: var(--encre-2); } }
.bac-item strong { font-family: var(--f-titre); font-weight: 600; }
.bac-quand { font-size: .82rem; color: var(--encre-2); }
.collecte-note { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; color: var(--encre-2); }
.legende-bacs { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; font-size: .88rem; }
.legende-bacs span { display: inline-flex; align-items: center; gap: 6px; }
.legende-bacs em { font-style: normal; color: var(--encre-3); font-size: .8rem; }
.mois-collectes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; align-items: start; }
.mois-c { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-m); }
.mois-c[data-passe] { opacity: .65; }
.mois-c summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-family: var(--f-titre); font-weight: 600; text-transform: capitalize; }
.mois-c summary::-webkit-details-marker { display: none; }
.mois-c summary .chev { margin-left: auto; color: var(--encre-3); transition: transform .2s; }
.mois-c[open] summary .chev { transform: rotate(180deg); }
.mini-bacs { display: flex; gap: 3px; flex-wrap: wrap; }
.mini-bacs i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.mois-c ul { list-style: none; margin: 0; padding: 0 16px 14px; display: grid; gap: 6px; font-size: .9rem; }
.mois-c li { display: flex; gap: 10px; align-items: center; }
.mois-c li.passee { opacity: .5; }
.mois-c li .jour { width: 112px; flex-shrink: 0; text-transform: capitalize; font-weight: 700; }
.mois-c li em { color: var(--encre-2); }

/* Signalement */
.choix-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.choix-carte { position: relative; display: block; cursor: pointer; }
.choix-carte input { position: absolute; opacity: 0; inset: 0; }
.choix-carte span { display: block; border: 1.5px solid var(--ligne-forte); border-radius: var(--r-s); padding: 10px 12px; font-size: .9rem; }
.choix-carte input:checked + span { border-color: var(--primaire); background: var(--info-fond); font-weight: 700; }
.choix-carte input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.zone-photo { position: relative; border: 2px dashed var(--ligne-forte); border-radius: var(--r-m); padding: 18px; display: grid; gap: 10px; justify-items: center; color: var(--encre-2); }
.zone-photo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.zone-photo span { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; }
.zone-photo img { max-height: 180px; border-radius: var(--r-s); }

/* Abonnement */
.abonnement.compact { background: color-mix(in srgb, var(--soleil) 16%, var(--surface)); border-radius: var(--r-l); padding: clamp(20px, 4vw, 36px); display: grid; grid-template-columns: 1fr 1.3fr; gap: 28px; align-items: center; }
@media (max-width: 860px) { .abonnement.compact { grid-template-columns: 1fr; } }
.abo-txt { display: grid; gap: 8px; }
.abo-txt p { color: var(--encre-2); }
.consentement { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; color: var(--encre-2); }
.consentement input { margin-top: 3px; accent-color: var(--sarcelle); width: 16px; height: 16px; flex-shrink: 0; }
.abo-resultat { font-weight: 700; display: flex; gap: 6px; align-items: center; }
/* Champ piège anti-robot : invisible pour les personnes, rempli par les robots */
.piege { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.zone-turnstile:empty { display: none; }

/* ------------------------------------------------------------------
 * Formulaires en ligne (moteur à étapes)
 * ------------------------------------------------------------------ */
.lien-btn { background: none; border: 0; padding: 0; color: var(--primaire); font: inherit; font-size: .86rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.f-moteur { display: grid; gap: 20px; margin-top: 18px; }
.f-tete h2 { margin: 0; }
.f-duree { display: flex; align-items: center; gap: 6px; color: var(--encre-2); font-size: .88rem; margin: 6px 0 0; }
.f-duree .ico { width: 16px; height: 16px; }
.f-etapes { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; counter-reset: none; }
.f-etapes li { position: relative; border: 0; padding: 0; background: none; flex: 1 1 0; min-width: 0; display: grid; gap: 6px; font-size: .78rem; color: var(--encre-3); }
.f-etapes li::before { content: ""; height: 4px; border-radius: 4px; background: var(--ligne-forte); }
.f-etapes li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.f-etapes li em { font-style: normal; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-etapes li.f-fait::before, .f-etapes li.f-actif::before { background: var(--primaire); }
.f-etapes li.f-actif { color: var(--encre); }
.f-etapes li.f-fait { color: var(--encre-2); }
@media (max-width: 620px) { .f-etapes li em { display: none; } }
.f-etape { border: 0; padding: 0; margin: 0; display: grid; gap: 18px; min-width: 0; }
.f-titre-etape { margin: 0; font-size: 1.15rem; }
.f-facult { font-weight: 400; color: var(--encre-3); font-size: .82rem; }
.f-groupe { border: 0; padding: 0; margin: 0; min-width: 0; }
.f-groupe legend { padding: 0; margin-bottom: 4px; }
.f-groupe .aide { margin: 0 0 6px; }
.f-ouinon { grid-template-columns: repeat(2, minmax(0, 140px)); }
.f-autre { margin-top: 8px; }
.f-invalide .choix-carte span { border-color: var(--danger); }
.f-info { display: flex; gap: 10px; align-items: flex-start; background: var(--info-fond); border-radius: var(--r-s); padding: 12px 14px; font-size: .9rem; }
.f-info p { margin: 0; }
.f-info .ico { flex: none; width: 20px; height: 20px; color: var(--primaire); }
.f-zone-fichiers { padding: 22px 18px; }
.f-fichiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.f-fichiers li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--ligne); border-radius: var(--r-s); padding: 8px 10px; min-width: 0; }
.f-fichiers li img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; }
.f-fichiers li .ico { width: 28px; height: 28px; flex: none; color: var(--encre-2); }
.f-fichiers li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.f-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--ligne); padding-top: 18px; }
.f-nav [data-suiv], .f-nav [data-envoyer] { margin-left: auto; }
.f-compteur { color: var(--encre-3); font-size: .85rem; }
@media (max-width: 480px) { .f-compteur { order: -1; flex-basis: 100%; } }
.f-retour { transform: rotate(90deg); }
.f-recap-zone { display: grid; gap: 14px; }
.f-recap-bloc { border: 1px solid var(--ligne); border-radius: var(--r-m); padding: 14px 16px; }
.f-recap-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.f-recap-tete h3 { margin: 0; font-size: 1rem; }
.f-recap { margin: 0; display: grid; gap: 8px; }
.f-recap div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 4px 16px; font-size: .9rem; }
.f-recap dt { color: var(--encre-2); }
.f-recap dd { margin: 0; overflow-wrap: anywhere; }
.f-vide { color: var(--encre-3); }
@media (max-width: 560px) { .f-recap div { grid-template-columns: 1fr; } .f-recap dt { font-size: .8rem; } }
.f-attestation { display: grid; gap: 12px; background: var(--surface-2); border-radius: var(--r-m); padding: 16px; }
.f-case { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; cursor: pointer; }
.f-case input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--primaire); }
.f-alternative { display: flex; gap: 8px; align-items: center; color: var(--encre-2); font-size: .88rem; margin-top: 14px; flex-wrap: wrap; }
.f-alternative .ico { width: 18px; height: 18px; }
.f-demo { font-size: .82rem; color: var(--encre-3); border: 1px dashed var(--ligne-forte); border-radius: 999px; padding: 4px 12px; }
.f-large { grid-template-columns: 1fr; }
.f-paiement { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid color-mix(in srgb, var(--soleil) 60%, var(--ligne)); background: color-mix(in srgb, var(--soleil) 12%, var(--surface)); border-radius: var(--r-m); padding: 14px 16px; }
.f-paiement > .ico { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.f-paiement h4 { margin: 0 0 4px; font-size: .95rem; }
.f-paiement p { margin: 0; font-size: .9rem; }
.f-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; margin-bottom: 28px; }
.f-carte { display: flex; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--ligne); border-radius: var(--r-m); background: var(--surface); color: var(--encre); text-decoration: none; transition: border-color .15s, transform .15s; }
.f-carte:hover { border-color: var(--primaire); transform: translateY(-1px); }
.f-carte .pastille { flex: none; }
.f-carte-txt { display: grid; gap: 3px; min-width: 0; flex: 1; }
.f-carte-txt span { font-size: .86rem; color: var(--encre-2); }
.f-carte-fleche { flex: none; width: 18px; height: 18px; color: var(--primaire); }
.f-carte .pastille { width: 46px; height: 46px; border-radius: 12px; background: var(--info-fond); display: grid; place-items: center; color: var(--primaire); }
.f-carte .pastille .ico { width: 24px; height: 24px; }

/* ------------------------------------------------------------------
 * Programmation des loisirs
 * ------------------------------------------------------------------ */
.p-bandeau { display: flex; gap: 18px 28px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: color-mix(in srgb, var(--vert) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--vert) 40%, var(--ligne)); border-radius: var(--r-l); padding: clamp(18px, 3vw, 26px); }
.p-bandeau > div:first-child { flex: 1 1 340px; min-width: 0; }
.p-bandeau h2 { margin: 4px 0 6px; }
.p-bandeau p { margin: 0; color: var(--encre-2); }
.p-session { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--encre) !important; }
.p-session .ico { width: 16px; height: 16px; }
.p-bandeau-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.p-filtres { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 22px 0 6px; }
.p-filtres-2 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.p-jour { width: auto; padding: 7px 12px; border-radius: 999px; font-size: .88rem; }
.p-compte { color: var(--encre-3); font-size: .86rem; margin: 0 0 8px; min-height: 1.2em; }
.p-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.p-carte { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-m); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.p-carte h3 { margin: 0; font-size: 1.1rem; }
.p-tete { display: flex; flex-wrap: wrap; gap: 6px; }
.p-statut { font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--encre-2); }
.p-statut.ouvert { background: var(--succes-fond); color: var(--succes); }
.p-statut.libre { background: var(--info-fond); color: var(--primaire); }
.p-statut.nouveau { background: color-mix(in srgb, var(--soleil) 35%, var(--surface)); color: var(--encre); }
.p-statut.gratuit { background: color-mix(in srgb, var(--vert) 22%, var(--surface)); color: var(--encre); }
.p-age { display: flex; gap: 6px; align-items: center; margin: -4px 0 0; color: var(--encre-2); font-size: .9rem; font-weight: 600; }
.p-age .ico { width: 16px; height: 16px; flex: none; }
.p-infos { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .9rem; }
.p-infos li { display: flex; gap: 9px; align-items: flex-start; min-width: 0; }
.p-infos li > span { min-width: 0; overflow-wrap: anywhere; }
.p-infos .ico { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--c-fort, var(--primaire)); }
.p-sous { color: var(--encre-3); font-size: .86rem; }
.p-details { border-top: 1px solid var(--ligne); padding-top: 8px; font-size: .9rem; }
.p-details summary { cursor: pointer; font-weight: 700; color: var(--primaire); list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.p-details summary::-webkit-details-marker { display: none; }
.p-details summary .chev { width: 16px; height: 16px; transition: transform .2s; }
.p-details[open] summary .chev { transform: rotate(180deg); }
.p-details p { margin: 8px 0 0; color: var(--encre-2); }
.p-note { display: flex; gap: 8px; align-items: flex-start; background: var(--surface-2); border-radius: var(--r-s); padding: 8px 10px; }
.p-note .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.p-action { margin-top: auto; padding-top: 4px; }
.p-action .btn { width: 100%; justify-content: center; }
.lien-fleche { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--primaire); text-decoration: underline; text-underline-offset: 3px; font-size: .9rem; }
.lien-fleche .ico { width: 15px; height: 15px; }
.p-vide { color: var(--encre-2); margin: 10px 0; }
.p-terminees { margin-top: 22px; }
.p-terminees > summary { cursor: pointer; font-weight: 700; color: var(--encre-2); display: inline-flex; gap: 6px; align-items: center; list-style: none; margin-bottom: 12px; }
.p-terminees > summary::-webkit-details-marker { display: none; }
.p-terminees > summary .chev { width: 16px; height: 16px; }
.p-terminees .p-carte { opacity: .75; }
@media (max-width: 560px) { .p-filtres { flex-direction: column; align-items: stretch; } .p-bandeau-actions .btn { flex: 1 1 100%; justify-content: center; } }

/* Offres d'emploi */
.emplois-liste { display: grid; gap: 12px; }
.emploi { display: flex; gap: 14px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-m); padding: 16px 18px; }
.emploi-txt { flex: 1 1 320px; min-width: 0; display: grid; gap: 6px; justify-items: start; }
.emploi-txt h3 { margin: 0; font-size: 1.08rem; }
.emploi-txt p { margin: 0; color: var(--encre-2); font-size: .92rem; }
.emploi-meta { font-weight: 600; color: var(--encre-2); }
.emploi-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.emploi-spontanee { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-m); background: var(--info-fond); }
.emploi-spontanee .ico { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--primaire); }
#zoneCandidature { margin-top: 8px; }

/* Carte : filtres par type (couleur), plan schématique, encadré « Où? », bloc d'accueil */
.puce-type { display: inline-flex; align-items: center; gap: 7px; --c-type: var(--primaire); }
.puce-type .pt { width: 11px; height: 11px; border-radius: 50%; background: var(--c-type); flex: none; box-shadow: 0 0 0 2px var(--surface); }
.puce-type .nb { font-size: .75rem; color: var(--encre-3); font-weight: 700; }
.puce-type[aria-pressed="true"] { background: color-mix(in srgb, var(--c-type) 16%, var(--surface)); border-color: var(--c-type); color: var(--encre); font-weight: 700; }
.puce-type[aria-pressed="true"] .nb { color: var(--encre-2); }
.puce-type[data-t="Tous"][aria-pressed="true"] { background: var(--primaire); color: var(--primaire-texte); border-color: var(--primaire); }
.puce-type[data-t="Tous"][aria-pressed="true"] .nb { color: inherit; opacity: .8; }
.puce-lien { text-decoration: none; }
.puce-lien:hover { border-color: var(--c-type); color: var(--encre); }
.lieu { display: grid; gap: 6px; padding: 0 0 10px; cursor: default; }
.lieu-btn { display: grid; gap: 2px; padding: 12px 16px 0; background: none; border: 0; text-align: left; width: 100%; cursor: pointer; font: inherit; color: inherit; }
.lieu-liens { display: flex; gap: 14px; padding: 0 16px; font-size: .84rem; font-weight: 700; }
.lieu-liens a { color: var(--primaire); display: inline-flex; gap: 4px; align-items: center; }
.lieu-liens .ico { width: 13px; height: 13px; }
.lieu.actif { background: var(--surface-2); box-shadow: inset 4px 0 0 var(--primaire); }
.carte-note { display: flex; gap: 8px; align-items: center; color: var(--encre-2); font-size: .88rem; margin-top: 10px; }
.carte-note .ico { width: 16px; height: 16px; }
.plan { height: 100%; display: flex; flex-direction: column; background: color-mix(in srgb, var(--vert) 7%, var(--surface)); }
.plan svg { width: 100%; height: auto; flex: 1; display: block; }
.plan-pt { cursor: pointer; transition: opacity .2s; }
.plan-pt circle { transition: r .15s; }
.plan-pt:hover circle, .plan-pt:focus-visible circle, .plan-pt.actif circle { r: 18; }
.plan-pt:focus-visible { outline: none; }
.plan-pt.estompe { opacity: .15; }
.plan-etiq { font: 600 15px var(--f-texte, sans-serif); fill: var(--encre); paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; opacity: 0; transition: opacity .15s; pointer-events: none; }
.plan-pt:hover .plan-etiq, .plan-pt:focus-visible .plan-etiq, .plan-pt.actif .plan-etiq { opacity: 1; }
.plan-loin { font: 700 13px var(--f-texte, sans-serif); fill: var(--encre-2); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.plan-nord text { font: 700 14px var(--f-titre, sans-serif); fill: var(--encre); }
.plan-note { margin: 0; padding: 10px 14px; font-size: .82rem; color: var(--encre-2); border-top: 1px solid var(--ligne); }
.encadre-lieux h2 { display: flex; gap: 6px; align-items: center; }
.encadre-lieux h2 .ico { width: 18px; height: 18px; }
.ou-lieu { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--ligne); font-size: .9rem; }
.ou-lieu:first-of-type { border-top: 0; }
.ou-lieu span { color: var(--encre-2); }
.ou-liens { display: flex; flex-wrap: wrap; gap: 4px 14px; font-weight: 700; font-size: .84rem; }
.ou-liens a { color: var(--primaire); display: inline-flex; gap: 4px; align-items: center; }
.ou-liens .ico { width: 13px; height: 13px; }
.bandeau-carte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0; border: 1px solid var(--ligne); border-radius: var(--r-l); overflow: hidden; background: var(--surface); }
.bandeau-carte .txt { padding: clamp(20px, 4vw, 40px); display: grid; gap: 14px; align-content: center; }
.bandeau-carte h2 { margin: 0; }
.bandeau-carte p { margin: 0; color: var(--encre-2); }
.bandeau-carte .surtitre { display: inline-flex; align-items: center; gap: 6px; }
.bandeau-carte .surtitre .ico { width: 16px; height: 16px; }
.apercu-plan { display: block; border-left: 1px solid var(--ligne); min-height: 260px; }
.apercu-plan .plan { pointer-events: none; }
.apercu-plan .plan-etiq { opacity: 1; font-size: 17px; }
.apercu-plan:hover .plan { background: color-mix(in srgb, var(--vert) 12%, var(--surface)); }
@media (max-width: 860px) { .bandeau-carte { grid-template-columns: 1fr; } .apercu-plan { border-left: 0; border-top: 1px solid var(--ligne); } }
.plan svg.filtre .plan-pt:not(.estompe) .plan-etiq { opacity: 1; }
.mini-carte { width: 100%; height: 100%; min-height: 300px; }
.apercu-plan .leaflet-container { cursor: pointer; }
.mini-carte { pointer-events: none; }
.carte-liste .filtres { display: grid; gap: 10px; max-height: 280px; overflow-y: auto; }
.filtre-groupe { display: grid; gap: 6px; }
.filtre-titre { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); }
.carte-liste .puce { font-size: .8rem; padding: 5px 10px; }
@media (max-width: 860px) { .carte-liste .filtres { max-height: none; } }
.carte-zone { grid-template-columns: 340px 1fr; grid-template-rows: auto 1fr; }
.carte-filtres { grid-column: 1 / -1; display: flex !important; flex-wrap: wrap; gap: 10px 22px; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid var(--ligne); max-height: none !important; overflow: visible !important; }
.carte-filtres > .puces { flex-basis: 100%; }
.carte-filtres .puce { font-size: .8rem; padding: 5px 10px; }
.carte-liste { max-height: 600px; }
@media (max-width: 860px) { .carte-filtres { gap: 8px 16px; } .carte-filtres > .puces, .filtre-groupe { flex-basis: 100%; } }

/* Numéros de téléphone cliquables */
a.tel { color: inherit; font-weight: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
a.tel:hover { color: var(--primaire); }
.utilitaire .u-urgence { display: inline-flex; align-items: center; gap: 4px; }
.utilitaire .u-urgence a { color: inherit; }
.pied a.tel, footer a.tel { color: inherit; }
a.tel-bouton { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; color: var(--primaire); border: 1px solid var(--ligne-forte); border-radius: 999px; padding: 6px 14px; }
a.tel-bouton:hover { background: var(--info-fond); border-color: var(--primaire); }
a.tel-bouton .ico { width: 16px; height: 16px; flex: none; }
.repertoire { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ligne); border-radius: var(--r-m); overflow: hidden; }
.repertoire li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; border-top: 1px solid var(--ligne); }
.repertoire li:first-child { border-top: 0; }
.rep-nom { font-weight: 700; flex: 1 1 260px; min-width: 0; }
.repertoire a.tel-bouton { font-variant-numeric: tabular-nums; }
/* Image d'en-tête à montrer en entier (ex. : photo officielle du conseil) */
.tete-page .img-tete.entiere { aspect-ratio: auto; background: var(--surface-2); }
.tete-page .img-tete.entiere img { height: auto; object-fit: contain; display: block; }
@media (max-width: 820px) { .tete-page .img-tete.entiere { aspect-ratio: auto; } }
a.rep-lien { color: var(--encre); text-decoration: underline; text-decoration-color: var(--ligne-forte); text-underline-offset: 4px; display: inline-flex; align-items: baseline; gap: 6px; }
a.rep-lien:hover { color: var(--primaire); text-decoration-color: var(--primaire); }
a.rep-lien .ico { width: 14px; height: 14px; flex: none; color: var(--encre-3); align-self: center; }

/* Listes de documents à cocher (remplacent les PDF « documents requis ») */
ul.cocher { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
ul.cocher > li { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-m); padding: 12px 14px; }
ul.cocher label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; line-height: 1.45; }
ul.cocher input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--turquoise-fort); }
ul.cocher > li:has(> label > input:checked) { background: var(--succes-fond); border-color: transparent; }
ul.cocher-sous { margin: 8px 0 0 32px; padding-left: 18px; color: var(--encre-2); font-size: .95rem; display: grid; gap: 3px; }
.cocher-compte { margin: 10px 0 0; font-size: .92rem; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.cocher-compte.complet { color: var(--succes); font-weight: 600; }
.bloc-cocher .petite { font-size: .92rem; color: var(--encre-2); margin-top: 10px; }
.bloc-cocher { scroll-margin-top: 110px; }
[hidden] { display: none !important; }

/* Location de salles : rien ne doit élargir la page au cellulaire */
.r-vue { grid-template-columns: minmax(0, 1fr); }
.r-vue > *, .r-detail > * { min-width: 0; }
.r-tarifs-cartes { display: none; }
@media (max-width: 720px) {
  .r-tarifs-table { display: none; }
  .r-tarifs-cartes { display: grid; gap: 12px; }
}
.r-tarif-carte { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-m); padding: 14px 16px; }
.r-tarif-carte h3 { font-size: 1.05rem; margin: 0 0 8px; }
.r-tarif-carte dl { margin: 0; display: grid; gap: 6px; }
.r-tarif-carte dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 2px 10px; padding-top: 6px; border-top: 1px solid var(--ligne); }
.r-tarif-carte dt { grid-row: span 2; color: var(--encre-2); font-size: .92rem; }
.r-tarif-carte dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.r-tarif-carte dd span { font-weight: 400; color: var(--encre-2); font-size: .88rem; }
/* Images introuvables masquées */
img.img-ko { visibility: hidden; }
.r-vignettes button:has(img.img-ko) { display: none; }

/* Mot de la mairesse */
.mot { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: start; }
.mot-photo { width: 150px; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--r-m); box-shadow: 0 6px 18px rgba(0,58,56,.12); }
.mot-signature { font-family: var(--f-titre); font-weight: 600; color: var(--sarcelle-2); margin-top: 6px; }
@media (max-width: 560px) { .mot { grid-template-columns: 1fr; } .mot-photo { width: 120px; } }

/* Citoyens et citoyennes d'honneur */
.honneur-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; align-items: start; }
.honneur-fiche { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-m); padding: 14px 16px; min-width: 0; }
.honneur-fiche.avec-histoire { border-color: var(--ligne-forte); display: block; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.honneur-fiche.avec-histoire:hover, .honneur-fiche.avec-histoire:focus-visible { border-color: var(--sarcelle-2); box-shadow: 0 6px 18px rgba(0,58,56,.12); transform: translateY(-1px); }
.honneur-lire { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 600; color: var(--lien); font-size: .92rem; }
.honneur-lire .ico { width: 16px; height: 16px; }
.honneur-profil { display: flex; gap: 18px; align-items: center; margin: 10px 0 18px; }
.honneur-profil h2 { margin: 2px 0 0; }
.honneur-grande { width: 120px !important; height: 120px !important; border-radius: 50%; object-fit: cover; flex: none; }
.honneur-medaille.honneur-grande .ico { width: 54px; height: 54px; }
.honneur-detail .prose { max-width: 68ch; }
.honneur-tete { display: flex; gap: 12px; align-items: center; }
.honneur-tete img, .honneur-medaille { width: 52px; height: 52px; border-radius: 50%; flex: none; object-fit: cover; }
.honneur-medaille { display: grid; place-items: center; background: var(--note-fond); color: var(--soleil-fort); }
.honneur-medaille .ico { width: 26px; height: 26px; }
.honneur-tete h3 { font-size: 1rem; margin: 0; line-height: 1.3; }
.honneur-annee { font-size: .8rem; font-weight: 700; color: var(--encre-2); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.honneur-fiche details { margin-top: 10px; border-top: 1px solid var(--ligne); padding-top: 8px; }
.honneur-fiche summary { cursor: pointer; font-weight: 600; color: var(--lien); display: flex; align-items: center; gap: 6px; list-style: none; }
.honneur-fiche summary::-webkit-details-marker { display: none; }
.honneur-fiche .prose { font-size: .95rem; margin-top: 8px; }

/* Armoiries */
.armoiries { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; }
.arm-blason { position: relative; margin: 0; width: 280px; max-width: 100%; }
.arm-blason img { width: 100%; height: auto; display: block; }
.arm-pin { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: var(--sarcelle); color: #fff; font: 700 .8rem/1 var(--f-titre); display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .15s; }
.arm-pin.actif, .arm-pin:hover, .arm-pin:focus-visible { background: var(--soleil); color: var(--sarcelle); transform: translate(-50%, -50%) scale(1.25); }
.arm-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.arm-liste li { display: flex; gap: 14px; align-items: center; padding: 8px 10px; border-radius: var(--r-m); border: 1px solid var(--ligne); background: var(--surface); transition: background .15s, border-color .15s; }
.arm-liste li.actif { background: var(--note-fond); border-color: var(--soleil); }
.arm-vignette { width: 76px; height: 76px; flex: none; border-radius: 10px; background-image: url(../img/blason.jpg); background-repeat: no-repeat; border: 1px solid var(--ligne); }
.arm-liste strong { display: flex; gap: 8px; align-items: center; font-family: var(--f-titre); }
.arm-num { width: 22px; height: 22px; border-radius: 50%; background: var(--sarcelle); color: #fff; font-size: .75rem; display: inline-grid; place-items: center; flex: none; }
.arm-liste p { margin: 2px 0 0; color: var(--encre-2); font-size: .95rem; }
@media (max-width: 760px) { .armoiries { grid-template-columns: 1fr; } .arm-blason { margin: 0 auto; width: 240px; } }