/* ==========================================================================
   Theme MAIRIE - Atelier CMS
   Site institutionnel de collectivite : bleu republicain, titres en serif,
   bandeau de service, acces rapide aux demarches. Mobile-first, sans
   dependance et sans police externe.

   Le fichier se lit en deux temps :
     1. la base commune du CMS (formulaires, blog, cookies, lecteurs medias)
     2. la couche MAIRIE, en fin de fichier, qui porte l'identite visuelle
   ========================================================================== */

:root {
    --accent: #c2703d;
    --accent-ink: #ffffff;

    --ink: #191e25;
    --ink-soft: #515b67;
    --ink-faint: #828c98;

    --bg: #ffffff;
    --bg-soft: #f4f6f9;
    --line: #e4e8ee;
    --line-strong: #d2d8e2;

    --dark: #151a21;
    --dark-soft: #1f2730;

    --ok: #1f8a52;
    --ok-bg: #e8f5ee;
    --err: #c5403a;
    --err-bg: #fbeae9;

    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 26px;
    --shadow-sm: 0 1px 2px rgba(20, 30, 50, 0.05), 0 4px 14px rgba(20, 30, 50, 0.05);
    --shadow: 0 10px 30px -10px rgba(20, 30, 50, 0.16);
    --shadow-lg: 0 30px 70px -25px rgba(15, 24, 42, 0.4);

    --maxw: 1180px;
    --gap: clamp(20px, 4vw, 40px);
    --section-y: clamp(40px, 1vw, 104px);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0 0 0.4em; line-height: 1.12; letter-spacing: -0.02em; font-weight: 750; color: var(--ink); }
h1 { font-size: clamp(2rem, 1.3rem + 3.4vw, 3.25rem); }
h2 { font-size: clamp(1.55rem, 1.1rem + 2vw, 2.35rem); }
h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 3px; border-radius: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.container-narrow { max-width: 1170px; }

.eyebrow { display: inline-block; margin: 0 0 0.7em; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.eyebrow.light { color: color-mix(in srgb, var(--accent) 60%, #ffffff); }

/* ==========================================================================
   Boutons et liens d'action
   ========================================================================== */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    background: var(--accent); color: var(--accent-ink); border: 2px solid var(--accent);
    font: inherit; font-weight: 650; font-size: 1rem; line-height: 1;
    padding: 15px 26px; border-radius: 999px; cursor: pointer; text-align: center;
    transition: transform 0.16s ease, box-shadow 0.18s ease, background 0.16s ease;
}
.button:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 80%, transparent); }
.button:active { transform: translateY(0); }
.button-ghost { background: transparent; color: currentColor; border-color: color-mix(in srgb, currentColor 45%, transparent); }
.button-ghost:hover { background: color-mix(in srgb, currentColor 12%, transparent); box-shadow: none; }
.button-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

.text-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; color: var(--accent); }
.text-link span { transition: transform 0.18s ease; }
.text-link:hover { text-decoration: none; }
.text-link:hover span { transform: translateX(4px); }

/* ==========================================================================
   En-tete
   ========================================================================== */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 12px 18px; z-index: 200; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

.preview-banner { background: var(--accent); color: var(--accent-ink); text-align: center; padding: 9px 16px; font-size: 0.9rem; font-weight: 600; }

.site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; gap: clamp(14px, 3vw, 34px); padding-block: clamp(12px, 1.6vw, 18px); transition: padding-block 0.2s; }
.site-header.is-scrolled .header-inner { padding-block: 10px; }
.brand { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand-logo { height: clamp(54px, 5vw, 56px); width: auto; }

.nav-wrap { margin-left: auto; }
.main-nav, .main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav > ul { display: flex; align-items: center; gap: 4px; }
.main-nav li { position: relative; }
.main-nav a { display: block; padding: 10px 14px; border-radius: 8px; font-weight: 550; font-size: 0.98rem; color: var(--ink); }
.main-nav a:hover, .main-nav a[aria-current] { background: var(--bg-soft); color: var(--accent); text-decoration: none; }
.main-nav .submenu { position: absolute; top: 100%; left: 0; min-width: 230px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 7px; display: none; z-index: 20; }
.main-nav li:hover > .submenu, .main-nav li:focus-within > .submenu { display: block; }
.main-nav .submenu a { font-size: 0.94rem; }
.submenu-toggle { display: none; }

.header-phone { display: inline-flex; flex-direction: column; line-height: 1.1; padding: 9px 18px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, transparent); flex-shrink: 0; }
.header-phone:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.header-phone span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.header-phone strong { font-size: 1.05rem; color: var(--accent); }

.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; margin-left: auto; padding: 0; background: none; border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer; }
.nav-toggle span:not(.sr-only) { display: block; width: 22px; height: 2px; margin-inline: auto; background: var(--ink); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }

/* ==========================================================================
   Fil d'Ariane
   ========================================================================== */
.breadcrumbs { padding: 0px 0px 8px 30px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font-size: 0.88rem; color: var(--ink-faint); }
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 8px; color: var(--ink-faint); }
.breadcrumbs a { color: var(--ink-soft); }
.breadcrumbs [aria-current] { color: var(--ink); }

/* ==========================================================================
   Sections generiques
   ========================================================================== */
.section { padding-block: var(--section-y); }
.section:nth-of-type(even) { background: var(--bg-soft); }
.section-heading { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
/* En-tete imbrique dans une colonne : pas de marge propre, la mise en page
   parente s'en charge. */
.section-heading-inner { max-width: 720px; }
.section-heading-inner > :last-child { margin-bottom: 0; }

/* Image cliquable de la section texte et image : le curseur et un leger
   soulevement au survol indiquent qu'elle mene quelque part. */
.text-image-link { display: block; }
.text-image-link img { transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s; }
.text-image-link:hover img, .text-image-link:focus-visible img { transform: translateY(-3px); box-shadow: var(--shadow-lg, 0 18px 40px rgba(15, 30, 60, .18)); }
.text-image-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .text-image-link img { transition: none; } }

/* Ligne des rubriques, sous le contenu d'une actualite : un filet et de l'air
   la separent du texte, sinon elle se confond avec le dernier paragraphe. */
.post-categories { margin: clamp(28px, 4vw, 40px) 0 0; padding-top: clamp(18px, 2.5vw, 24px); border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--ink-soft); }
.post-categories span { font-weight: 600; color: var(--ink); }
.post-categories a { color: var(--navy); }
.section-heading p { color: var(--ink-soft); font-size: 1.08rem; margin: 0; }
.section-heading.split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* Texte enrichi.
   Couleur imposee par Thierry, a conserver : le noir plein plutot que le gris
   d'encre du theme, pour un contraste maximal sur les contenus rediges. */
.richtext { color: #000; }
.richtext > :first-child { margin-top: 0; }
.richtext > :last-child { margin-bottom: 0; }
.richtext h2, .richtext h3 { margin-top: 1.4em; }
.richtext ul, .richtext ol { padding-left: 1.3em; margin: 0 0 1em; }
.richtext li { margin-bottom: 0.4em; }
.richtext img { border-radius: var(--radius-sm); margin: 1.2em 0; }
.richtext a { text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero-block { position: relative; display: flex; align-items: center; min-height: clamp(440px, 70vh, 660px); padding-block: clamp(60px, 10vw, 120px); background-image: var(--hero-image, none); background-color: var(--dark); background-size: cover; background-position: center; color: #fff; overflow: hidden; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 20, 28, 0.45) 0%, rgba(15, 20, 28, 0.78) 100%); }
.hero-content { position: relative; max-width: 760px; }
.hero-block h1 { color: #fff; }
.hero-lead { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); color: rgba(255, 255, 255, 0.88); max-width: 60ch; }
.hero-block .button-ghost { color: #fff; }

/* ==========================================================================
   Texte
   ========================================================================== */
.text-block.align-center { text-align: center; }
.text-block.align-center .richtext { margin-inline: auto; }
.text-block.align-right { text-align: right; }

/* ==========================================================================
   Texte + image
   ========================================================================== */
.text-image-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.text-image-grid.image_right .text-image-media { order: 2; }
/* L'image ne depasse jamais sa taille reelle : etiree a 100 % du cadre, une
   photo de 400 px s'affichait en 600 et devenait floue. */
.text-image-media img {
    width: auto; max-width: 100%; height: auto; display: block;
    border: 2px solid var(--gold); border-radius: var(--radius); padding: 3px;
    box-shadow: var(--shadow);
}
.text-image-copy h2 { margin-top: 0.1em; }

/* ==========================================================================
   Services
   ========================================================================== */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: clamp(16px, 2.4vw, 26px); }
.service-card { position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; overflow: hidden; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.service-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s; }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.service-card:hover::before { transform: scaleX(1); }
.service-number { font-size: 2.1rem; font-weight: 800; color: color-mix(in srgb, var(--accent) 26%, var(--bg-soft)); letter-spacing: -0.03em; }
.service-icon { width: 100%; height: auto; margin: 8px 0 14px; }
.service-icon img { width: 100%; height: 100%; object-fit: contain; }
.service-card h3 { margin-bottom: 0.3em; }
.service-card p { color: var(--ink-soft); margin-bottom: 1em; }
.service-card a { font-weight: 650; }

/* ==========================================================================
   Realisations (grille + modale)
   ========================================================================== */
.achievement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.achievement-card { position: relative; padding: 0; border: 0; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; background: var(--bg-soft); }
.achievement-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.achievement-card:hover img { transform: scale(1.06); }
.achievement-card span { position: absolute; inset: auto 0 0 0; padding: 28px 16px 14px; text-align: left; color: #fff; font-weight: 600; font-size: 0.95rem; background: linear-gradient(transparent, rgba(15, 20, 28, 0.82)); opacity: 0; transition: opacity 0.25s; }
.achievement-card:hover span, .achievement-card:focus-visible span { opacity: 1; }

.media-dialog { border: 0; padding: 0; max-width: 880px; width: 92vw; border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.media-dialog::backdrop { background: rgba(15, 20, 28, 0.72); }
.media-dialog img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; background: var(--bg); margin: 0 auto; }
.media-dialog > div { padding: 20px 24px 26px; }
.media-dialog h3 { margin-bottom: 0.2em; }
.media-dialog p { color: var(--ink-soft); margin: 0; }
.dialog-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.9); font-size: 1.5rem; line-height: 1; cursor: pointer; z-index: 2; }

/* ==========================================================================
   Galerie
   ========================================================================== */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gallery-grid figure { margin: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-soft); }
.gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.4s; }
.gallery-grid figure:hover img { transform: scale(1.05); }
.gallery-grid figcaption { padding: 11px 14px; font-size: 0.9rem; color: var(--ink-soft); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.faq-list details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); overflow: hidden; }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-weight: 650; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { font-size: 1.5rem; line-height: 1; color: var(--accent); transition: transform 0.25s; flex-shrink: 0; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list .richtext { padding: 0 22px 20px; color: var(--ink-soft); }

/* ==========================================================================
   Appel a l'action
   ========================================================================== */
.cta-card { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: clamp(36px, 6vw, 64px); border-radius: var(--radius-lg); background-image: var(--cta-image, none); background-color: var(--dark); background-size: cover; background-position: center; color: #fff; overflow: hidden; }
.cta-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 80%, #000) 0%, rgba(15, 20, 28, 0.82) 100%); opacity: 0.92; }
.cta-card h2 { color: #fff; margin: 0; }
.cta-card p { color: rgba(255, 255, 255, 0.86); margin: 0.5em 0 0; max-width: 52ch; }
.cta-card .button { background: #fff; color: var(--ink); border-color: #fff; flex-shrink: 0; }
.cta-card .button:hover { background: rgba(255, 255, 255, 0.9); }

/* ==========================================================================
   Carte
   ========================================================================== */
.map-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.address { font-style: normal; color: var(--ink-soft); white-space: pre-line; }
.map-frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); min-height: 320px; background: var(--bg-soft); }
.map-frame iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }
.map-placeholder { display: grid; place-items: center; min-height: 320px; color: var(--ink-faint); padding: 24px; text-align: center; }

/* ==========================================================================
   Carrousels (slider generique + avis)
   ========================================================================== */
.slider-viewport, .testimonial-viewport { overflow: hidden; }
.slider-track, .testimonial-track { display: flex; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.slide, .testimonial-card { flex: 0 0 auto; }

.generic-slider .slide { width: 100%; }
.slide { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(20px, 4vw, 48px); align-items: center; }
.slide-media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.slide-copy h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.slide-copy p { color: var(--ink-soft); }

.testimonial-track { gap: 20px; }
.testimonial-card { width: calc((100% - 40px) / 3); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); }
.testimonial-card blockquote { margin: 14px 0 18px; font-size: 1.05rem; line-height: 1.6; }
.testimonial-card footer { display: flex; flex-direction: column; }
.testimonial-card footer strong { color: var(--ink); }
.testimonial-card footer span { color: var(--ink-faint); font-size: 0.9rem; }
.testimonial-card footer time { color: var(--ink-faint); font-size: 0.85rem; margin-top: 2px; }

.stars { color: #e0a32b; letter-spacing: 2px; font-size: 1rem; }
.stars span { color: var(--line-strong); }

.slider-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.slider-controls button[data-prev], .slider-controls button[data-next] { width: 48px; height: 48px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg); color: var(--ink); font-size: 1.1rem; cursor: pointer; transition: background 0.16s, color 0.16s, border-color 0.16s; }
.slider-controls button[data-prev]:hover, .slider-controls button[data-next]:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
[data-dots] { display: flex; gap: 8px; }
[data-dots] button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--line-strong); cursor: pointer; transition: background 0.16s, transform 0.16s; }
[data-dots] button.active { background: var(--accent); transform: scale(1.3); }

/* ==========================================================================
   Avis (liste) et formulaires publics
   ========================================================================== */
.reviews-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-bottom: 40px; }
.review-row { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.review-row p { font-size: 1.02rem; margin: 12px 0; }
.review-row footer { color: var(--ink-faint); font-size: 0.9rem; }
.review-row footer strong { color: var(--ink); }

.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pagination a { min-width: 42px; padding: 9px 12px; text-align: center; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); font-weight: 600; }
.pagination a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pagination a.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.public-form-wrap { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-sm); }
.public-form label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 16px; }
.public-form .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 18px; }
.public-form input, .public-form textarea { width: 100%; margin-top: 7px; font: inherit; padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s; }
.public-form input:focus, .public-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.public-form textarea { resize: vertical; min-height: 120px; }
.public-form .check { display: flex; align-items: flex-start; gap: 11px; font-weight: 400; font-size: 0.92rem; color: var(--ink-soft); }
.public-form .check input { width: auto; margin: 3px 0 0; flex-shrink: 0; }
.public-form .button { margin-top: 8px; }

.form-message { padding: 13px 17px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 0.95rem; border-left: 4px solid var(--ink-soft); }
.form-message.success { background: var(--ok-bg); border-left-color: var(--ok); color: #14613a; }
.form-message.error { background: var(--err-bg); border-left-color: var(--err); color: #8f2520; }

.rating-field { border: 0; padding: 0; margin: 0 0 16px; }
.rating-field legend { font-weight: 600; font-size: 0.95rem; margin-bottom: 6px; padding: 0; }
.star-picker { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.star-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.star-picker label { font-size: 2.1rem; line-height: 1; color: var(--line-strong); cursor: pointer; padding: 0 2px; transition: color 0.12s; }
.star-picker label:hover, .star-picker label:hover ~ label, .star-picker input:checked ~ label { color: #e0a32b; }
.star-picker input:focus-visible + label { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 60px); align-items: start; }
.contact-aside h2 { margin-bottom: 0.4em; }
.contact-aside .richtext { color: var(--ink-soft); }
.contact-phone { display: inline-flex; flex-direction: column; gap: 2px; margin-top: 20px; padding: 16px 24px; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.contact-phone:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.contact-phone small { color: var(--ink-soft); font-size: 0.85rem; }
.contact-phone strong { font-size: 1.5rem; color: var(--accent); letter-spacing: -0.01em; }
.obfuscated-email { margin-top: 0px; color: var(--ink-soft); }
.obfuscated-email.is-revealed { display: flex; flex-direction: column; gap: 8px; }
.email-link { width: fit-content; max-width: 100%; font-size: 1.05rem; font-weight: 600; color: var(--accent); text-decoration: none; word-break: break-word; }
.email-link:hover { text-decoration: underline; }
.email-copy-block { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.copy-email-button { font: inherit; font-size: 0.85rem; line-height: 1; cursor: pointer; padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink-soft); transition: border-color 0.2s, color 0.2s, background 0.2s; }
.copy-email-button:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.email-copy-confirmation { font-size: 0.85rem; font-weight: 600; color: #1f8a4c; opacity: 0; visibility: hidden; transition: opacity 0.2s; }
.email-copy-confirmation.is-visible { opacity: 1; visibility: visible; }

/* ==========================================================================
   Blog
   ========================================================================== */
.blog-listing, .blog-post { padding-block: var(--section-y); }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(18px, 3vw, 30px); margin-block: clamp(28px, 4vw, 44px); }
.post-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.18s, box-shadow 0.18s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* Date d'une actualite : celle de l'evenement est annoncee comme telle et
   ressort, celle de publication reste discrete. */
.post-date { font-size: 0.88rem; color: var(--ink-faint); }
.post-date-label { font-weight: 600; }
.post-date-event { color: var(--accent); font-weight: 600; }
.post-date-event .post-date-label { text-transform: none; }

/* Separateur avant les evenements passes : il occupe toute la largeur de la
   grille, sinon il se glisserait dans une colonne comme une carte. */
.post-past-separator { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin: clamp(20px, 3vw, 34px) 0 0; color: var(--ink-faint); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.post-past-separator::before, .post-past-separator::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Une carte d'evenement passe s'efface legerement, et retrouve sa couleur au
   survol : l'information reste consultable, elle n'est simplement plus au
   premier plan. */
.post-card-past { opacity: 0.72; }
.post-card-past:hover, .post-card-past:focus-within { opacity: 1; }
.post-badge-past { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-soft); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.post-card > a { display: block; overflow: hidden; }
.post-card > a img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.4s; }
.post-card:hover > a img { transform: scale(1.05); }
.post-card-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.post-category { align-self: flex-start; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.post-card-body h2 { font-size: 1.25rem; margin: 0; }
.post-card-body h2 a { color: var(--ink); }
.post-card-body time { color: var(--ink-faint); font-size: 0.85rem; }
.post-card-link { margin-top: auto; align-self: flex-start; font-weight: 650; color: var(--accent); padding-top: 4px; }
.post-card-link:hover { text-decoration: none; opacity: 0.85; }
.post-card-body h2 a:hover { color: var(--accent); text-decoration: none; }
.post-card-body p { color: var(--ink-soft); font-size: 0.96rem; margin: 0; }
.post-card-body time { margin-top: auto; color: var(--ink-faint); font-size: 0.85rem; }

.post-meta { color: var(--ink-faint); font-size: 0.92rem; margin-bottom: 24px; }
/* Image en tete d'une actualite.
   Correction apportee par Thierry, a conserver : l'ombre est portee par l'image
   et non par le conteneur. Sur le conteneur, elle etait rognee par le
   « overflow: hidden » qui sert aux coins arrondis. */
.post-hero { margin: 8px 0 30px; border-radius: var(--radius); overflow: hidden; }
.post-hero img { box-shadow: var(--shadow); }
.post-content { font-size: 1.08rem; }
.post-content h2 { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.005em; line-height: 1.3; margin-top: 1.3em; margin-bottom: 0.35em; }
.post-content h3 { font-size: 1.12rem; font-weight: 600; margin-top: 1.1em; margin-bottom: 0.3em; }

/* ==========================================================================
   Page d'erreur
   ========================================================================== */
.error-page { padding-block: clamp(80px, 16vw, 160px); text-align: center; }
.error-page .button { margin-top: 12px; }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.site-footer { background: var(--dark); color: #c4ccd6; padding-block: clamp(44px, 6vw, 72px) 0; margin-top: clamp(40px, 6vw, 80px); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(24px, 4vw, 48px); padding-bottom: 40px; }
.footer-brand { display: block; font-size: 1.3rem; font-weight: 800; color: #fff; margin-bottom: 12px; }
.site-footer p { color: #97a2af; margin: 0 0 0.5em; }
.site-footer h2 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; margin-bottom: 16px; }
.footer-nav, .footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: 9px; }
.footer-nav a, .site-footer a { color: #b7c0cb; }
.footer-nav a:hover, .site-footer a:hover { color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 22px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.85rem; color: #8c97a4; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-legal a { color: #8c97a4; }
.footer-legal a:hover { color: #fff; }

/* ==========================================================================
   Bouton d'appel flottant (mobile)
   ========================================================================== */
.sticky-phone { display: none; }

/* ==========================================================================
   Bandeau et fenetre de gestion des cookies (neutre, sobre)
   ========================================================================== */
.cookie-panel { position: fixed; right: 22px; bottom: 22px; z-index: 300; width: min(440px, calc(100% - 36px)); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity 0.25s, transform 0.25s, visibility 0.25s; }
.cookie-panel[hidden] { display: none; }
.cookie-panel.is-visible { opacity: 1; visibility: visible; transform: none; }
.cookie-card { background: #fff; border: 1px solid #e4e8ee; border-radius: 18px; padding: 24px; box-shadow: 0 26px 60px -20px rgba(10, 16, 28, 0.45); }
.cookie-title { font-weight: 750; font-size: 1.05rem; color: #11151b; margin: 0 0 8px; letter-spacing: -0.01em; }
.cookie-text { color: #4a5562; font-size: 0.92rem; line-height: 1.55; margin: 0 0 18px; }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cookie-btn { flex: 1; min-width: 96px; border: 1px solid transparent; border-radius: 999px; padding: 12px 16px; font: inherit; font-weight: 650; font-size: 0.9rem; cursor: pointer; transition: transform 0.16s, background 0.16s, color 0.16s, border-color 0.16s; }
.cookie-btn:hover { transform: translateY(-2px); }
.cookie-btn-primary { background: #11151b; color: #fff; border-color: #11151b; }
.cookie-btn-primary:hover { background: #000; }
.cookie-btn-outline { background: #fff; color: #11151b; border-color: #d2d8e2; }
.cookie-btn-outline:hover { border-color: #11151b; }
.cookie-btn-light { background: #f2f4f7; color: #4a5562; }
.cookie-btn-light:hover { background: #e7ebf0; color: #11151b; }
.cookie-policy-link { display: inline-block; color: #11151b; font-weight: 600; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; }

.cookie-modal { position: fixed; inset: 0; z-index: 310; display: flex; align-items: center; justify-content: center; padding: 22px; }
.cookie-modal[hidden] { display: none; }
.cookie-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 16, 28, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cookie-modal-box { position: relative; z-index: 1; width: min(600px, 100%); max-height: 88vh; overflow: auto; background: #fff; border-radius: 22px; padding: clamp(26px, 4vw, 38px); box-shadow: 0 34px 90px -30px rgba(0, 0, 0, 0.6); }
.cookie-modal-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f2f4f7; color: #11151b; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.cookie-modal-kicker { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #828c98; margin: 0 0 6px; }
.cookie-modal-box h2 { font-size: 1.5rem; color: #11151b; margin-bottom: 10px; }
.cookie-modal-box > p { color: #4a5562; font-size: 0.95rem; margin-bottom: 20px; }
.cookie-pref { display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #e4e8ee; border-radius: 14px; padding: 16px 18px; margin-bottom: 11px; }
.cookie-pref strong { display: block; color: #11151b; font-size: 0.98rem; margin-bottom: 3px; }
.cookie-pref span { display: block; color: #6a7480; font-size: 0.86rem; line-height: 1.45; }
.cookie-pref em { font-style: normal; font-weight: 650; font-size: 0.78rem; color: #1f8a52; white-space: nowrap; }
.cookie-pref input[type=checkbox] { width: 44px; height: 24px; flex: none; accent-color: #11151b; cursor: pointer; }
.cookie-modal-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 22px; }
.cookie-modal-actions .cookie-btn { flex: 0 1 auto; }

body.cookies-open { overflow: hidden; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
    .text-image-grid, .map-grid, .contact-grid, .slide { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .text-image-grid.image_right .text-image-media { order: 0; }
    .testimonial-card { width: calc((100% - 20px) / 2); }
    .section-heading.split { align-items: flex-start; }
}

@media (max-width: 760px) {
    body { font-size: 16px; }
    .nav-toggle { display: flex; }
    .nav-wrap { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 12px clamp(18px, 4vw, 32px) 18px; max-height: calc(100dvh - var(--header-h, 76px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
    .nav-wrap.open { display: block; }
    .main-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
    .main-nav a { padding: 13px 12px; }
    .main-nav .submenu { position: static; display: none; border: 0; box-shadow: none; padding: 0 0 0 14px; min-width: 0; flex-basis: 100%; }
    .main-nav li.has-submenu { display: flex; flex-wrap: wrap; align-items: center; }
    .main-nav li.has-submenu > a { flex: 1 1 auto; }
    .main-nav li:hover > .submenu, .main-nav li:focus-within > .submenu { display: none; }
    .main-nav li.is-open > .submenu { display: block; }
    .submenu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; padding: 0; background: none; border: 0; color: var(--ink-soft); cursor: pointer; border-radius: 8px; transition: transform 0.2s ease, background 0.15s ease; }
    .submenu-toggle:hover { background: var(--bg-soft); }
    .main-nav li.is-open > .submenu-toggle { transform: rotate(180deg); }
    .header-phone { display: none; }
    .testimonial-card { width: 100%; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-bottom { justify-content: flex-start; }
    .sticky-phone { display: inline-flex; align-items: center; gap: 9px; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; justify-content: center; padding: 15px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--accent) 75%, transparent); }
    .sticky-phone:hover { text-decoration: none; }
    .cookie-panel { right: 12px; left: 12px; bottom: 12px; width: auto; }
    .cookie-card { padding: 18px; }
    .cookie-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .cookie-actions .cookie-btn-primary { grid-column: 1 / -1; order: -1; }
    .cookie-modal { align-items: flex-end; padding: 12px; }
    .cookie-modal-box { border-radius: 18px; }
    .cookie-modal-actions { width: 100%; }
    .cookie-modal-actions .cookie-btn { flex: 1; }
    /* laisser de la place au bouton d'appel flottant */
    .site-footer { padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ===== 1.0.9 : cartes de contact + reseaux sociaux ===== */
.contact-cards { display: grid; gap: 14px; margin-top: 22px; }
.contact-card { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
a.contact-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); }
.contact-card-icon { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.contact-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-card-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-faint); }
.contact-card-body strong { color: var(--ink); font-size: 1.05rem; line-height: 1.35; }
.contact-card-note { color: var(--ink-faint); font-size: 0.9rem; margin-top: 1px; }

.social-icons { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.social-icons a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink); background: var(--bg); transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; }
.social-icons a:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); }
/* Reseaux sociaux sous le formulaire de contact : masques a la demande de
   Thierry. Le bloc reste dans la page, il suffit de retirer cette ligne pour
   le reafficher. */
.contact-social {
    margin-top: 20px;
    display: none;
}
.footer-social { margin-top: 16px; }
.footer-social a { border-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.82); background: transparent; }
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ==========================================================================
   Bloc Demande de devis
   ========================================================================== */
.section.devis-block { background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.devis-wrap { max-width: 900px; margin-inline: auto; }
.devis-head { text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.devis-head h2 { margin: 0 0 12px; }
.devis-intro { color: var(--ink-soft); max-width: 640px; margin-inline: auto; }
.devis-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: clamp(26px, 4vw, 40px); }
.devis-step { display: flex; align-items: center; gap: 13px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; font-weight: 600; box-shadow: var(--shadow-sm); }
.devis-step-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.devis-form .devis-fieldset { border: 0; padding: 0; margin: 0 0 26px; }
.devis-form .devis-fieldset > legend { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); padding: 0; margin-bottom: 14px; }
.devis-form select { width: 100%; margin-top: 7px; font: inherit; padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s; }
.devis-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.devis-choice { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 16px; }
.devis-choice > legend { font-weight: 600; font-size: 0.95rem; padding: 0 6px; }
.devis-choice .check { margin-bottom: 8px; }
.devis-choice .check:last-child { margin-bottom: 0; }
.devis-hint { font-size: 0.86rem; color: var(--ink-faint); margin: -6px 0 4px; }
.devis-trust { margin-top: clamp(28px, 4vw, 44px); text-align: center; }
.devis-trust h3 { margin: 0 0 18px; font-size: 1.15rem; }
.devis-trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.devis-trust-list li { display: flex; align-items: center; gap: 10px; justify-content: center; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; font-weight: 600; box-shadow: var(--shadow-sm); }
.devis-trust-check { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 0.85rem; font-weight: 800; }
.devis-steps-title { text-align: center; font-size: 1.05rem; margin: 0 0 16px; color: var(--ink-soft); }

.devis-files { display: flex; flex-direction: column; gap: 10px; }
.devis-file-row { display: flex; align-items: center; gap: 10px; }
.devis-file-row input[type="file"] { flex: 1 1 auto; min-width: 0; padding: 10px 12px; }
.devis-file-remove { flex: 0 0 auto; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink-soft); border-radius: var(--radius-sm); padding: 9px 14px; cursor: pointer; font: inherit; }
.devis-file-remove:hover { border-color: #c0392b; color: #c0392b; }
.devis-file-add { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--accent); background: transparent; color: var(--accent); border-radius: var(--radius-sm); padding: 10px 16px; cursor: pointer; font: inherit; font-weight: 600; transition: background 0.15s; }
.devis-file-add:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.devis-file-add:disabled { opacity: 0.45; cursor: not-allowed; }
.devis-file-add + .devis-hint { margin-top: 14px; }

/* ==========================================================================
   Bloc Video YouTube
   ========================================================================== */
.video-title { text-align: center; margin: 0 0 clamp(20px, 3vw, 30px); }
.video-center .video-main { max-width: 760px; margin-inline: auto; }
.video-full .video-main { max-width: 100%; }
.video-side .video-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 44px); align-items: center; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.video-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: block; }
.video-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease, filter 0.3s ease; }
.video-play:hover .video-thumb, .video-play:focus-visible .video-thumb { transform: scale(1.04); filter: brightness(0.92); }
.video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.2s ease; }
.video-play:hover .video-play-btn, .video-play:focus-visible .video-play-btn { transform: translate(-50%, -50%) scale(1.08); }
.video-play-bg { fill: #212121; opacity: 0.85; transition: fill 0.2s ease, opacity 0.2s ease; }
.video-play:hover .video-play-bg, .video-play:focus-visible .video-play-bg { fill: #cc0000; opacity: 1; }
.video-iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-caption { margin: 12px 0 0; text-align: center; color: var(--ink-soft); font-size: 0.95rem; }
.video-side .video-caption { text-align: left; }
.video-empty { padding: 40px; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.video-aside { color: var(--ink-soft); }
@media (max-width: 720px) {
  .video-side .video-layout { grid-template-columns: 1fr; }
  .video-side .video-caption { text-align: center; }
}

/* Navigation dans la modale d'image (Realisations) */
.dialog-figure { position: relative; background: var(--bg); }
.dialog-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #1a1a1a; cursor: pointer; z-index: 2; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); transition: background 0.15s ease, transform 0.15s ease; }
.dialog-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.dialog-prev { left: 12px; }
.dialog-next { right: 12px; }
@media (max-width: 560px) {
  .dialog-nav { width: 42px; height: 42px; font-size: 1.6rem; }
  .dialog-prev { left: 6px; }
  .dialog-next { right: 6px; }
}

/* ==========================================================================
   Bloc Lecteur audio
   ========================================================================== */
.audio-block-title { text-align: center; margin: 0 0 10px; }
.audio-block-intro { text-align: center; max-width: 640px; margin: 0 auto clamp(20px, 3vw, 32px); color: var(--ink-soft); }
.audio-player { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; max-width: 720px; margin: 0 auto; }
.audio-stage { display: flex; gap: clamp(16px, 3vw, 24px); padding: clamp(18px, 3vw, 26px); background: var(--bg-soft); align-items: center; }
.audio-cover { flex: 0 0 auto; width: 128px; height: 128px; border-radius: var(--radius); overflow: hidden; background: var(--dark-soft); display: flex; align-items: center; justify-content: center; }
.audio-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.audio-cover-fallback { font-size: 3rem; color: var(--accent); }
.audio-meta { flex: 1 1 auto; min-width: 0; }
.audio-now-title { font-weight: 700; font-size: 1.15rem; margin: 0; line-height: 1.3; }
.audio-now-sub { color: var(--ink-soft); margin: 2px 0 14px; font-size: 0.95rem; }
.audio-progress { position: relative; height: 8px; border-radius: 999px; background: var(--line-strong); cursor: pointer; touch-action: none; }
.audio-progress-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 999px; background: var(--accent); }
.audio-progress:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.audio-times { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--ink-faint); margin: 7px 0 12px; font-variant-numeric: tabular-nums; }
.audio-controls { display: flex; align-items: center; gap: 8px; }
.audio-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; }
.audio-btn:hover { background: var(--bg); }
.audio-btn-play { width: 54px; height: 54px; background: var(--accent); color: var(--accent-ink); }
.audio-btn-play:hover { background: var(--accent); transform: scale(1.05); box-shadow: var(--shadow-sm); }
.audio-btn-play .ic-pause { display: none; }
.is-playing .audio-btn-play .ic-play { display: none; }
.is-playing .audio-btn-play .ic-pause { display: block; }
.audio-volume { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.audio-volume input[type=range] { width: 90px; accent-color: var(--accent); cursor: pointer; }
.audio-btn-mute .ic-muted { display: none; }
.is-muted .audio-btn-mute .ic-vol { display: none; }
.is-muted .audio-btn-mute .ic-muted { display: block; }
.audio-list { list-style: none; margin: 0; padding: 8px; }
.audio-track { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px; border: 0; background: transparent; border-radius: var(--radius); cursor: pointer; text-align: left; transition: background 0.15s ease; }
.audio-track:hover { background: var(--bg-soft); }
.audio-track.is-active { background: var(--bg-soft); }
.audio-track.is-active .audio-track-title { color: var(--accent); }
.audio-track-num { flex: 0 0 auto; width: 22px; color: var(--ink-faint); font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.audio-track-thumb { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--dark-soft); }
.audio-track-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.audio-track-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.audio-track-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-track-sub { font-size: 0.85rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-track-time { flex: 0 0 auto; color: var(--ink-faint); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .audio-stage { flex-direction: column; text-align: center; }
  .audio-cover { width: 90px; height: 90px; }
  .audio-controls { justify-content: center; flex-wrap: wrap; }
  .audio-volume { margin-left: 0; width: 100%; justify-content: center; }
}

/* ==========================================================================
   Commentaires d'article (fonctionnalite CMS, mutualisee entre themes).
   Ne s'appuie que sur les variables communes : --accent, --ink, --ink-soft,
   --line, --radius. Chaque theme la recolore donc automatiquement.
   ========================================================================== */
.comments-block { margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--line, #e2e2e2); }
.comments-title { margin: 0 0 clamp(20px, 3vw, 32px); }
.comments-list { list-style: none; margin: 0 0 clamp(32px, 5vw, 52px); padding: 0; display: flex; flex-direction: column; gap: 20px; }
.comment { border: 1px solid var(--line, #e2e2e2); border-radius: var(--radius, 10px); padding: 20px 22px; }
.comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 8px; }
.comment-author { font-weight: 600; color: var(--ink, #1a1a1a); }
.comment-date { color: var(--ink-soft, #6b6b6b); font-size: 0.85rem; }
.comment-body { color: var(--ink-soft, #4a4a4a); line-height: 1.65; }
.comment-reply { margin-top: 16px; margin-left: clamp(12px, 3vw, 28px); padding: 14px 18px; border-left: 3px solid var(--accent, #c2703d); border-radius: 0 var(--radius, 10px) var(--radius, 10px) 0; background: color-mix(in srgb, var(--accent, #c2703d) 7%, transparent); }
.comment-reply-badge { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent, #c2703d); font-weight: 600; }
.comment-form-wrap { max-width: 640px; }
.comment-form-wrap h3 { margin: 0 0 18px; }
.comment-form .captcha-field { max-width: 260px; }
.comment-form .captcha-field strong { color: var(--accent, #c2703d); }
.comment-form-note { margin: 14px 0 0; font-size: 0.85rem; color: var(--ink-soft, #6b6b6b); }

/* ==========================================================================
   ==========================================================================
   THEME MAIRIE - couche institutionnelle
   Posee au-dessus de la base commune : elle redefinit les jetons de design,
   la typographie, l'en-tete, le pied de page et les blocs de l'accueil.
   Aucune police externe, aucune dependance : tout est charge en local.
   --accent est injecte par le layout depuis les reglages du site.
   ==========================================================================
   ========================================================================== */

:root {
    --accent-ink: #ffffff;

    --navy: #0d2540;
    --navy-soft: #133255;
    --navy-line: rgba(255, 255, 255, 0.14);
    --gold: #b98d33;
    /* Bandeau de service en gris tres clair : le haut de page respire et le
       liseret tricolore devient le seul aplat vif. Les deux variables ci-dessous
       suffisent a repasser le bandeau en fonce si besoin. L'or ne sert plus
       dans le bandeau : etale sur toutes ses icones, il tirait vers le
       decoratif plutot que l'officiel. */
    --topbar-bg: #eef2f7;
    --topbar-ink: #0d2540;
    --topbar-line: #dbe3ec;

    --ink: #16202c;
    --ink-soft: #4d5b6b;
    --ink-faint: #7d8a99;

    --bg: #ffffff;
    --bg-soft: #f4f6f9;
    --paper: #eef2f7;
    --line: #dfe5ec;
    --line-strong: #c8d2de;

    --dark: var(--navy);
    --dark-soft: var(--navy-soft);

    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(13, 37, 64, 0.06), 0 6px 18px -12px rgba(13, 37, 64, 0.28);
    --shadow: 0 18px 44px -26px rgba(13, 37, 64, 0.55);
    --shadow-lg: 0 40px 90px -40px rgba(13, 37, 64, 0.7);

    --maxw: 1220px;
    --section-y: clamp(52px, 6vw, 96px);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-title: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

body { font-size: 17px; line-height: 1.66; color: var(--ink); background: var(--bg); }

h1, h2, h3, h4 { font-family: var(--font-title); font-weight: 700; letter-spacing: -0.005em; line-height: 1.18; color: var(--ink); }
h1 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.35rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.4rem); }
h3 { font-size: 1.22rem; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 0 0 0.65em; font-family: var(--font);
    font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--accent);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold); flex: 0 0 auto; }
.eyebrow.light { color: #ffffff; }
.eyebrow.light::before { background: var(--gold); }

/* Filet decoratif place sous les titres de section */
.rule { display: block; width: 54px; height: 3px; margin: 0 0 20px; background: var(--gold); border-radius: 2px; }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.button {
    border-radius: var(--radius-sm);
    padding: 14px 26px;
    font-weight: 650; font-size: 0.98rem; letter-spacing: 0.01em;
    border-width: 2px;
    box-shadow: 0 10px 24px -16px rgba(13, 37, 64, 0.8);
}
.button:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px color-mix(in srgb, var(--accent) 85%, #000); }
.button-ghost { border-color: rgba(255, 255, 255, 0.55); color: #fff; background: rgba(255, 255, 255, 0.06); }
.button-ghost:hover { background: rgba(255, 255, 255, 0.16); }

.text-link { font-family: var(--font); font-weight: 650; color: var(--accent); }

/* --------------------------------------------------------------------------
   Bandeau de service (au-dessus de l'en-tete)
   -------------------------------------------------------------------------- */
.topbar { background: var(--topbar-bg); color: var(--topbar-ink); border-bottom: 1px solid var(--topbar-line); font-size: 0.82rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-block: 9px; }
.topbar-note { display: inline-flex; align-items: center; gap: 8px; }
.topbar-note { color: color-mix(in srgb, var(--topbar-ink) 78%, transparent); font-weight: 600; }
.topbar-note svg { color: color-mix(in srgb, var(--topbar-ink) 72%, transparent); flex: 0 0 auto; }
.topbar-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* Les trois regles ci-dessous visent les liens du bandeau lui-meme, d'ou le
   selecteur d'enfant direct : le panneau de recherche est un descendant de
   .topbar-links, et sans cette restriction ses resultats heritaient du
   display: inline-flex, ce qui alignait etiquette, titre et extrait sur une
   seule ligne. */
.topbar-links > a { display: inline-flex; align-items: center; gap: 7px; color: var(--topbar-ink); font-weight: 600; }
.topbar-links > a:hover { color: var(--topbar-ink); text-decoration: underline; text-underline-offset: 3px; }
.topbar-links > a > svg { color: color-mix(in srgb, var(--topbar-ink) 72%, transparent); flex: 0 0 auto; }

/* Recherche du site (composant fourni par le coeur, habille aux couleurs du theme).
   Le bouton est place dans le bandeau bleu, a gauche du telephone. Le panneau
   qui s'ouvre revient sur fond clair pour rester lisible.

   Le coeur pose son style dans la page elle-meme, donc apres cette feuille :
   a specificite egale, c'est lui qui l'emporte. Les regles qui doivent primer
   sur les siennes ajoutent donc .topbar devant, pour passer devant sa
   declaration .cms-search .cms-search-toggle.

   Typographie alignee sur les autres liens du bandeau : meme corps, meme
   graisse, meme taille d'icone, pour que « Rechercher », le telephone et le
   courriel se lisent comme une seule serie. */
.topbar .topbar-search .cms-search-toggle { padding: 6px 15px; gap: 7px; font-size: inherit; font-weight: 550; letter-spacing: 0; }
.topbar .topbar-search .cms-search-toggle .cms-search-icon { width: 15px; height: 15px; }
/* Sur fond clair, le bouton devient l'element plein du bandeau : c'est lui qui
   porte le contraste, les autres liens restent en texte. */
.topbar-search .cms-search-toggle { background: var(--topbar-ink); border-color: var(--topbar-ink); color: #fff; }
.topbar-search .cms-search-toggle:hover, .topbar-search .cms-search-toggle:focus-visible,
.topbar-search[data-open] .cms-search-toggle { background: #000091; border-color: #000091; color: #fff; }
/* La loupe prend la couleur du texte du bouton, quel que soit son etat : plus
   aucune couleur a maintenir en double. (« color: none » n'existe pas en CSS,
   la declaration serait ignoree et la loupe garderait sa couleur precedente.) */
.topbar-search .cms-search-toggle .cms-search-icon,
.topbar-search .cms-search-toggle:hover .cms-search-icon,
.topbar-search[data-open] .cms-search-toggle .cms-search-icon { color: inherit; }
.topbar-search .cms-search-panel { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); color: var(--ink); }
.topbar-search .cms-search-item strong { color: var(--navy); font-family: var(--font-title, inherit); letter-spacing: -0.01em; }
.topbar-search .cms-search-item small { color: var(--ink-soft); }
.topbar-search .cms-search-tag { color: var(--ink-faint); }
.topbar-search .cms-search-item:hover, .topbar-search .cms-search-item[aria-selected="true"] { background: var(--bg-soft); }
.topbar-search .cms-search-all { border-top-color: var(--line); }
.topbar-search .cms-search-field { border-color: var(--line-strong); border-radius: var(--radius-sm); }
.topbar-search .cms-search-field:focus-within { border-color: var(--navy); }
.topbar-search .cms-search-submit { background: var(--navy); border-radius: 8px; }
.topbar-search .cms-search-item mark, .search-result mark { background: rgba(185, 141, 51, 0.28); }
.topbar-search .cms-search-all { color: var(--navy); }

/* Page de resultats */
.search-page .search-page-form input { border-color: var(--line-strong); border-radius: var(--radius-sm); }
.search-page .search-page-form input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.search-result a { color: var(--navy); }

/* --------------------------------------------------------------------------
   En-tete
   -------------------------------------------------------------------------- */
.site-header { background: #fff; border-bottom: 1px solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Liseret tricolore sous l'en-tete : bleu 40 %, blanc 20 %, rouge 40 %.
   Le blanc est un vrai blanc ; c'est le filet gris clair au-dessus qui le rend
   perceptible sous un en-tete lui-meme blanc. */
.site-header::after { content: ""; display: block; height: 3px; background: linear-gradient(90deg, #000091 0%, #000091 40%, #ffffff 40%, #ffffff 60%, #e1000f 60%, #e1000f 100%); border-top: 1px solid #f6f6f6; padding: 2px; }
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.header-inner { align-items: center; gap: clamp(16px, 3vw, 40px); padding-block: clamp(12px, 1.4vw, 16px); }

.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { flex: 0 0 auto; display: block; }
.brand-logo { height: clamp(46px, 4.4vw, 58px); width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-family: var(--font-title); font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.42rem); font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.brand-text small { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; }

.main-nav > ul { gap: 2px; }
.main-nav a { position: relative; padding: 11px 13px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; color: var(--navy); }
.main-nav > ul > li > a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; }
.main-nav a:hover, .main-nav a[aria-current] { background: transparent; color: var(--accent); }
.main-nav > ul > li > a:hover::after, .main-nav > ul > li:focus-within > a::after { transform: scaleX(1); }
.main-nav .submenu { min-width: 262px; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 8px; box-shadow: var(--shadow); }
.main-nav .submenu a { border-radius: 4px; font-weight: 500; }
.main-nav .submenu a:hover { background: var(--bg-soft); }

/* --------------------------------------------------------------------------
   Fil d'Ariane
   -------------------------------------------------------------------------- */
.breadcrumbs { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 0; }
.breadcrumbs .container { padding-block: 11px; }
.breadcrumbs ol { font-size: 0.85rem; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section:nth-of-type(even) { background: transparent; }
.section-heading { max-width: 760px; margin-bottom: clamp(30px, 4vw, 52px); }
.section-heading h2 { margin-bottom: 0.35em; }
.section-heading p { color: var(--ink-soft); font-size: 1.06rem; }
.section-heading.center { max-width: 720px; margin-inline: auto; text-align: center; }
.section-heading.center .eyebrow { justify-content: center; }

/* Couleur imposee par Thierry, a conserver : noir plein sur les contenus
   rediges et leurs intertitres, plutot que le gris d'encre du theme. */
.richtext { color: #000; }
.richtext h2, .richtext h3 { color: #000; }
.richtext a { color: var(--accent); }

/* --------------------------------------------------------------------------
   Banniere en diaporama (premier bloc de la page d'accueil)
   Les photographies occupent toute la largeur et restent nettes : aucun voile
   colore, seulement un degrade sombre limite au bas de l'image pour rendre la
   legende lisible.
   -------------------------------------------------------------------------- */
.hero-slider { position: relative; background: var(--navy); overflow: hidden; }

/* Vague de separation en bas du diaporama.
   Le remplissage reprend la couleur de fond de la page : la page semble mordre
   sur la photo. Le liseré tricolore suit la meme courbe, comme un prolongement
   du liseré de l'en-tete, et un trait gris tres clair passe dessous pour que le
   blanc du drapeau reste visible sur le fond blanc. */
.hero-wave { --hero-wave-h: clamp(46px, 5.5vw, 84px); position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: var(--hero-wave-h); display: block; z-index: 2; pointer-events: none; }
.hero-wave-fill { fill: var(--bg, #fff); }
.hero-wave-shadow { stroke: rgba(13, 37, 64, .16); stroke-width: 3; }
.hero-wave-line { stroke-width: 6; stroke-linecap: butt; }

/* Les points de transition remontent au-dessus de la vague : poses au ras du
   bas, ils se retrouvaient traverses par la courbe. */
.hero-slider .hero-slider-dots { bottom: calc(clamp(46px, 5.5vw, 84px) + 18px); }
.hero-slider .slider-controls { position: relative; z-index: 3; }
.hero-slider .slider-viewport { overflow: hidden; }
.hero-slider .slider-track { display: flex; }
.hero-slide {
    position: relative; flex: 0 0 100%; width: 100%;
    height: clamp(320px, 44vw, 620px); background: var(--navy);
}
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
.hero-slide-caption {
    position: absolute; inset: auto 0 0 0; padding: clamp(70px, 12vw, 130px) 0 clamp(30px, 4vw, 52px);
    background: linear-gradient(to top, rgba(8, 18, 31, 0.82) 0%, rgba(8, 18, 31, 0.55) 8%, rgba(8, 18, 31, 0) 100%);
    color: #fff; text-align: center; pointer-events: none;
}
.hero-slide-caption .container { pointer-events: auto; }
/* Selecteur porte a deux classes : la regle generique « .hero-slide-caption p »
   ci-dessous est plus specifique qu'une classe seule et ecraserait la taille. */
.hero-slide-caption .hero-slide-title {
    margin: 0 0 6px; color: #fff; font-family: var(--font-title); font-weight: 700;
    line-height: 1.15; letter-spacing: -0.005em;
    font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3rem);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.hero-slide-caption p {
    margin: 0; font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.15rem);
    color: rgba(255, 255, 255, 0.93); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.hero-slide-link {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
    color: #fff; font-weight: 650; font-size: 0.95rem;
    border-bottom: 2px solid var(--gold); padding-bottom: 3px;
}
.hero-slide-link:hover { text-decoration: none; color: var(--gold); }

.hero-slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
    border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, 0.86); color: var(--navy);
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.6);
    transition: background 0.18s ease, transform 0.18s ease;
}
.hero-slider-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.hero-slider-prev { left: clamp(10px, 2vw, 28px); }
.hero-slider-next { right: clamp(10px, 2vw, 28px); }

.hero-slider-dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3; display: flex; justify-content: center; gap: 9px; }
.hero-slider-dots button {
    width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, 0.5); transition: background 0.18s ease, transform 0.18s ease;
}
.hero-slider-dots button:hover { background: rgba(255, 255, 255, 0.8); }
.hero-slider-dots button.active { background: #fff; transform: scale(1.25); }

/* --------------------------------------------------------------------------
   En-tete principal (hero)
   -------------------------------------------------------------------------- */
.hero-block { position: relative; display: flex; align-items: center; overflow: hidden; }

/* Variante illustree : hauteur mesuree pour limiter l'agrandissement des
   photographies, et voile concentre a gauche, la ou se trouve le texte. */
.hero-photo {
    min-height: clamp(280px, 32vw, 430px);
    padding-block: clamp(48px, 6vw, 78px);
    background-color: var(--navy);
    color: #fff;
}
.hero-photo.has-stats { padding-bottom: clamp(96px, 12vw, 132px); }
.hero-photo .hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(95deg, rgba(8, 18, 31, 0.82) 0%, rgba(8, 18, 31, 0.66) 34%, rgba(8, 18, 31, 0.28) 66%, rgba(8, 18, 31, 0.08) 100%);
}
.hero-photo .hero-content { position: relative; max-width: 700px; }
.hero-photo h1 { color: #fff; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5); margin-bottom: 0.3em; }
.hero-photo .hero-lead { color: rgba(255, 255, 255, 0.93); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5); }
.hero-photo .hero-eyebrow {
    border: 1px solid rgba(255, 255, 255, 0.3); border-left: 3px solid var(--gold);
    color: #fff; background: rgba(8, 18, 31, 0.35);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* Variante en deux colonnes : employee sous une banniere en diaporama. Les
   chiffres cles forment un bandeau sur toute la largeur, colle au diaporama,
   puis le texte de bienvenue est presente a cote d'une photographie. */
.hero-split { display: block; background: #fff; padding-block: 0 var(--section-y); }
.hero-split .hero-stats {
    position: static; margin: 0 0 clamp(38px, 5vw, 72px);
    background: var(--bg-soft); border-top: 3px solid var(--gold); border-bottom: 1px solid var(--line);
}
.hero-split-grid {
    display: grid; grid-template-columns: 1fr 0.92fr;
    gap: clamp(30px, 5vw, 66px); align-items: center;
}
.hero-split .hero-content { max-width: none; }
.hero-split h1 { color: var(--navy); margin-bottom: 0.3em; }
.hero-split .hero-lead { color: var(--ink-soft); }
.hero-split .hero-eyebrow { border: 0; background: none; padding: 0; color: var(--accent); }
.hero-split .hero-eyebrow::before { content: ""; display: inline-block; width: 26px; height: 2px; margin-right: 12px; vertical-align: middle; background: var(--gold); }
.hero-split .button-ghost { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: transparent; }
.hero-split .button-ghost:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* z-index: 0 cree un contexte d'empilement : sans lui, le cadre decoratif place
   en z-index -1 passerait derriere le fond blanc de la section et disparaitrait. */
.hero-figure { position: relative; z-index: 0; }
.hero-figure img {
    width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 45%;
    border-radius: var(--radius); box-shadow: var(--shadow); display: block;
}
.hero-figure::after {
    /* Meme correction que pour la section texte et image : un cadre decale de la
       taille de la photo, plutot qu'un carre de 58 % qui tombait a cote des
       images verticales. */
    content: ""; position: absolute; inset: 14px -14px -14px 14px;
    border: 2px solid var(--gold); border-radius: var(--radius); z-index: -1;
}

/* Variante claire : bandeau d'introduction, employe quand un diaporama occupe
   deja le haut de la page. */
.hero-plain { background: #fff; padding-block: clamp(40px, 5vw, 68px) 0; }
.hero-plain .hero-content { max-width: 820px; }
.hero-plain h1 { color: var(--navy); margin-bottom: 0.3em; }
.hero-plain .hero-lead { color: var(--ink-soft); }
.hero-plain .hero-eyebrow { border: 0; background: none; padding: 0; color: var(--accent); }
.hero-plain .hero-eyebrow::before { content: ""; display: inline-block; width: 26px; height: 2px; margin-right: 12px; vertical-align: middle; background: var(--gold); }
.hero-plain .button-ghost { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: transparent; }
.hero-plain .button-ghost:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.hero-plain .hero-stats { position: static; margin-top: clamp(32px, 4vw, 48px); background: var(--bg-soft); border-top: 3px solid var(--gold); border-bottom: 1px solid var(--line); }

.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    margin: 0 0 18px; padding: 7px 16px 7px 13px;
    border-radius: 3px;
    font-size: 0.76rem; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase;
}
.hero-content { position: relative; }
.hero-lead { font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.2rem); max-width: 58ch; }
.hero-block .button-row { margin-top: 24px; }

.hero-stats { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; background: rgba(255, 255, 255, 0.97); border-top: 3px solid var(--gold); }
.hero-stats-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.hero-stat { padding: 20px 18px; text-align: center; border-left: 1px solid var(--line); }
.hero-stat:first-child { border-left: 0; }
.hero-stat strong { display: block; font-family: var(--font-title); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.95rem); color: var(--navy); line-height: 1.1; }
.hero-stat span { display: block; margin-top: 4px; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   Services : grille des demarches
   -------------------------------------------------------------------------- */
.services-bento { background: var(--bg-soft); }
.services-grid { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; }
.service-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--line-strong);
    border-radius: var(--radius); padding: 26px 24px 22px; color: inherit;
    transition: border-top-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card::before { display: none; }
a.service-card:hover { text-decoration: none; transform: translateY(-3px); border-top-color: var(--accent); box-shadow: var(--shadow); border-color: var(--line); }
.service-card h3 { font-size: 1.14rem; margin: 4px 0 6px; color: var(--navy); }
.service-card p { color: var(--ink-soft); font-size: 0.96rem; margin-bottom: 14px; }
.service-icon {
    display: inline-grid; place-items: center; width: 50px; height: 50px; margin: 0 0 10px;
    border-radius: 8px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent);
}
.service-icon img { width: 28px; height: 28px; object-fit: contain; }
.service-go { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; font-family: var(--font); font-size: 0.9rem; font-weight: 650; color: var(--accent); }
.service-go svg { transition: transform 0.18s ease; }
a.service-card:hover .service-go svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Services : liste d'informations et d'annonces
   -------------------------------------------------------------------------- */
.services-list .section-heading { margin-bottom: clamp(24px, 3vw, 36px); }
.notice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.notice-item {
    display: grid; grid-template-columns: 62px 1fr; align-items: start; gap: 4px;
    background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent);
    border-radius: var(--radius-sm); padding: 22px 26px 20px 18px;
}
.notice-num { font-family: var(--font-title); font-size: 1.5rem; font-weight: 700; color: color-mix(in srgb, var(--accent) 42%, #fff); line-height: 1.2; }
.notice-body h3 { margin: 0 0 6px; font-size: 1.1rem; color: var(--navy); }
.notice-body p { color: var(--ink-soft); margin: 0 0 8px; font-size: 0.97rem; }
.notice-body > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Texte et image (mot du maire, presentation)
   -------------------------------------------------------------------------- */
.text-image-grid { grid-template-columns: 0.85fr 1.15fr; gap: clamp(30px, 5vw, 70px); }
.text-image-media figure { position: relative; margin: 0; }
/* Cadre dore de la section texte et image.
   Correction apportee par Thierry, a conserver : le cadre est porte par l'image
   elle-meme, avec 3 px de marge interieure. Les versions precedentes le posaient
   en pseudo-element decale sur la figure ; des que l'image a cesse de remplir
   toute la largeur du bloc, le cadre s'est retrouve a cote de la photo. Porte par
   l'image, il l'epouse quelles que soient ses dimensions.
   Ordre voulu : cadre / petite marge interieure / photo. */
.text-image-media { position: relative; z-index: 0; }
.text-image-media { position: relative; z-index: 0; }
.text-image-media img { border-radius: var(--radius); box-shadow: var(--shadow); }
.text-image-copy h2 { margin-bottom: 18px; }
.text-image-copy .richtext p:first-of-type { font-size: 1.08rem; color: var(--ink); }

/* --------------------------------------------------------------------------
   Galerie
   -------------------------------------------------------------------------- */
.gallery-grid { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px; }
.gallery-grid figure { position: relative; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
.gallery-grid figcaption {
    position: absolute; inset: auto 0 0 0; padding: 26px 16px 12px;
    background: linear-gradient(transparent, rgba(13, 37, 64, 0.86));
    color: #fff; font-size: 0.92rem; font-weight: 600;
}

/* --------------------------------------------------------------------------
   Diaporama
   -------------------------------------------------------------------------- */
.generic-slider { background: var(--bg-soft); }
.slide { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
.slide-media img { border-radius: var(--radius); box-shadow: var(--shadow); }
.slide-copy h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); color: var(--navy); }
.slider-controls button[data-prev], .slider-controls button[data-next] { border-radius: var(--radius-sm); background: #fff; }

/* --------------------------------------------------------------------------
   Questions frequentes
   -------------------------------------------------------------------------- */
.faq-list details { border-radius: var(--radius-sm); border-color: var(--line); }
.faq-list details[open] { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-sm); }
.faq-list summary { font-family: var(--font-title); font-size: 1.05rem; font-weight: 700; color: var(--navy); }
.faq-list summary span { color: var(--gold); }

/* --------------------------------------------------------------------------
   Bandeau d'appel a l'action
   -------------------------------------------------------------------------- */
/* La carte d'appel a l'action est deja detachee visuellement, mais son bloc
   doit garder le meme rythme vertical que les autres sections : sans cela il se
   colle a la section suivante, et au pied de page lorsqu'il termine la page. */
.cta-block { padding-block: var(--section-y); }
.cta-card {
    border-radius: var(--radius-lg);
    padding: clamp(34px, 5.5vw, 60px);
    background-color: var(--navy);
    border: 1px solid rgba(255, 255, 255, 0.08);
    align-items: center;
}
.cta-card::before {
    background:
        linear-gradient(120deg, rgba(13, 37, 64, 0.94) 0%, rgba(13, 37, 64, 0.82) 55%, color-mix(in srgb, var(--accent) 65%, #0d2540) 100%);
    opacity: 1;
}
.cta-card::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 12px);
}
.cta-copy { max-width: 60ch; }
.cta-card h2 { color: #fff; }
.cta-card p { color: rgba(255, 255, 255, 0.86); }
.cta-card .button { background: var(--gold); border-color: var(--gold); color: #1a1200; }
.cta-card .button:hover { background: #cfa03c; border-color: #cfa03c; }

/* --------------------------------------------------------------------------
   Localisation, horaires
   -------------------------------------------------------------------------- */
.map-block { background: var(--bg-soft); }
.map-grid { grid-template-columns: 1fr 1.15fr; align-items: stretch; gap: clamp(26px, 4vw, 52px); }
.map-copy { display: flex; flex-direction: column; }
.map-copy .address { color: var(--ink); font-size: 1.06rem; font-weight: 600; margin-bottom: 14px; }
.hours-table { margin: 6px 0 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.hours-table h3 { margin: 0; padding: 14px 18px; font-size: 0.82rem; font-family: var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--navy); }
.hours-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 18px; border-top: 1px solid var(--line); font-size: 0.95rem; }
.hours-row span { color: var(--ink-soft); }
.hours-row strong { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.map-contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: auto; }
.map-contact { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.map-contact:hover { text-decoration: none; border-color: var(--accent); }
.map-contact span { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.map-contact strong { color: var(--accent); font-size: 1.02rem; word-break: break-word; }
.map-frame { min-height: 420px; border: 1px solid var(--line); }
.map-frame iframe { min-height: 420px; }

/* --------------------------------------------------------------------------
   Formulaires publics
   -------------------------------------------------------------------------- */
.public-form-wrap { border-radius: var(--radius); border-top: 3px solid var(--accent); }
.contact-card { border-radius: var(--radius-sm); }
.contact-card-icon { border-radius: 8px; }

/* --------------------------------------------------------------------------
   Blog / actualites
   -------------------------------------------------------------------------- */
.post-card { border-radius: var(--radius); }
.post-card-body h2 { font-size: 1.2rem; }
.post-category { color: var(--gold); }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy); color: #b9c6d5; border-top: 4px solid var(--gold); margin-top: 0; padding-top: clamp(48px, 6vw, 76px); }
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.15fr; }
.footer-blason { display: block; margin-bottom: 14px; }
.footer-blason img { height: 62px; width: auto; opacity: 0.95; }
.footer-brand { font-family: var(--font-title); font-size: 1.28rem; color: #fff; }
.footer-address { white-space: normal; color: #a7b5c6; }
.footer-note { color: #8c9cb0; font-size: 0.9rem; }
.site-footer h2 { font-family: var(--font); font-size: 0.78rem; letter-spacing: 0.14em; color: #fff; padding-bottom: 10px; border-bottom: 1px solid var(--navy-line); }
.footer-nav a { font-size: 0.95rem; }
.footer-phone a { font-family: var(--font-title); font-size: 1.3rem; color: #fff; }
.footer-mail a { word-break: break-word; }
.footer-hours { display: grid; gap: 6px; margin-top: 14px; font-size: 0.78rem; }
/* Deux colonnes plutot qu'un espacement automatique : les horaires demarrent
   tous au meme endroit, y compris les journees ouvertes le seul matin, et la
   plage complete tient sur une ligne. */
.footer-hours span { display: grid; grid-template-columns: 4.6em 1fr; align-items: baseline; gap: 10px; padding-bottom: 5px; border-bottom: 1px dashed var(--navy-line); }
.footer-hours b { white-space: nowrap; }
.footer-hours em { font-style: normal; color: #9cabbd; }
.footer-hours b { font-weight: 600; color: #dbe4ee; font-variant-numeric: tabular-nums; }
.footer-bottom { border-top: 1px solid var(--navy-line); color: #8595a8; }

/* --------------------------------------------------------------------------
   Bouton d'appel flottant
   -------------------------------------------------------------------------- */
.sticky-phone { border-radius: var(--radius-sm); }

/* --------------------------------------------------------------------------
   Page d'erreur
   -------------------------------------------------------------------------- */
.error-page { background: var(--bg-soft); }

/* --------------------------------------------------------------------------
   Adaptations mobiles
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
    .text-image-grid, .map-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    body { font-size: 16px; }
    .topbar { font-size: 0.78rem; }
    .topbar-inner { justify-content: center; gap: 6px 18px; }
    .topbar-note { width: 100%; justify-content: center; }
    .topbar .topbar-search .cms-search-toggle { padding: 7px; }
    .topbar-search .cms-search-toggle { border-color: rgba(255, 255, 255, 0.7); }
    .topbar-search .cms-search-panel { color: var(--ink); }
    .brand-text small { display: none; }
    .brand-logo { height: 42px; }
    .main-nav a { color: var(--navy); }
    .main-nav > ul > li > a::after { display: none; }
    .hero-block { min-height: 0; }
    .hero-photo { min-height: 0; }
    .hero-photo.has-stats { padding-bottom: clamp(40px, 10vw, 64px); }
    .hero-photo .hero-overlay { background: linear-gradient(180deg, rgba(8, 18, 31, 0.72) 0%, rgba(8, 18, 31, 0.8) 100%); }
    .hero-stats { position: static; margin-top: 30px; border-radius: var(--radius-sm); }
    .hero-plain .hero-stats { margin-top: 26px; }
    .hero-split-grid { grid-template-columns: 1fr; gap: 26px; }
    .hero-split .hero-stats { margin-bottom: 30px; }
    .hero-figure::after { display: none; }
    .hero-figure img { aspect-ratio: 16 / 10; }
    .hero-slide { height: clamp(240px, 62vw, 340px); }
    .hero-slide-caption { padding-top: 60px; }
    .hero-slider-arrow { width: 40px; height: 40px; }
    .hero-slider-arrow svg { width: 20px; height: 20px; }
    .hero-stats-inner { grid-template-columns: 1fr 1fr; padding-inline: 0; }
    .hero-stat { border-left: 1px solid var(--line); border-top: 1px solid var(--line); padding: 15px 10px; }
    .hero-stat:nth-child(2n+1) { border-left: 0; }
    .hero-stat:nth-child(-n+2) { border-top: 0; }
    .notice-item { grid-template-columns: 1fr; padding: 20px 20px 18px; }
    .notice-num { font-size: 1.05rem; }
    .footer-grid { grid-template-columns: 1fr; }
    .map-frame, .map-frame iframe { min-height: 320px; }
}

/* --------------------------------------------------------------------------
   Equipe municipale : les blocs « services » de cette page sont presentes en
   trombinoscope. La mise en forme s'appuie sur la classe de page posee par le
   gabarit (body.page-equipe-municipale), le bloc reste donc generique.
   -------------------------------------------------------------------------- */
.page-equipe-municipale .services-bento { background: transparent; }
.page-equipe-municipale .services-bento:nth-of-type(odd) { background: var(--bg-soft); }
.page-equipe-municipale .services-grid { grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 16px; }
.page-equipe-municipale .service-card {
    align-items: center; text-align: center; gap: 0;
    padding: 24px 16px 20px; border-top-color: var(--accent);
}
.page-equipe-municipale .service-icon {
    width: 96px; height: 96px; margin: 0 0 14px; padding: 0;
    border-radius: 50%; overflow: hidden; background: var(--paper);
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent);
}
.page-equipe-municipale .service-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Portraits : format carre et cadrage par le haut, pour ne pas couper les visages. */
.page-equipe-municipale .team-photo img { aspect-ratio: 1 / 1; object-position: top center; }
.page-equipe-municipale .service-card h3 { font-size: 1rem; line-height: 1.3; margin: 0 0 8px; color: var(--navy); }
.page-equipe-municipale .service-card p {
    margin: 0; font-family: var(--font); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
}
.page-equipe-municipale .service-card p::before {
    content: ""; display: block; width: 26px; height: 2px; margin: 0 auto 9px; background: var(--gold);
}
/* Sur les tres petits ecrans, la phrase d'accueil du bandeau prend deux lignes
   et repousse le telephone, le courriel et la recherche. On ne garde que ces
   trois acces, l'information sur les horaires restant disponible en pied de
   page et sur la page Contact. */
@media (max-width: 479px) {
    .topbar-note { display: none; }
}

@media (max-width: 620px) {
    .page-equipe-municipale .services-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .page-equipe-municipale .service-card { padding: 18px 10px 16px; }
    .page-equipe-municipale .service-icon { width: 78px; height: 78px; }
    .page-equipe-municipale .service-card h3 { font-size: 0.92rem; }
}

/* --------------------------------------------------------------------------
   Respiration avant le pied de page.
   Le bloc d'appel a l'action n'a pas de marge verticale propre, sa carte etant
   deja detachee : lorsqu'il termine une page, il se retrouve colle au pied de
   page. La regle ci-dessous garantit un espace quel que soit le dernier bloc.
   -------------------------------------------------------------------------- */
main > .section:last-child { padding-bottom: var(--section-y); }
main > .cta-block:last-child { padding-bottom: var(--section-y); }

/* Section « Carte interactive »
   Le composant expose ses propres variables : il suffit de les redefinir pour
   l'habiller, sans lutter de specificite avec son style, qui est emis apres
   cette feuille. Le bleu institutionnel remplace l'accent cuivre, et le dore
   sert aux etiquettes de categorie. */
:root {
    --cms-map-accent: var(--navy);
    --cms-map-accent-hover: var(--navy-soft);
    --cms-map-accent-ink: #fff;
    --cms-map-title: var(--navy);
    --cms-map-tag: var(--gold);
}
.interactive-map-block .cms-map { border-color: var(--line); box-shadow: var(--shadow-sm); }
.interactive-map-block .cms-map-legend button { font-family: inherit; font-weight: 600; color: var(--navy); }
.interactive-map-block .cms-map-legend button:hover { border-color: var(--navy); }
.interactive-map-block .cms-map-list li { border: 1px solid var(--line); background: var(--bg-soft); }
.interactive-map-block .cms-map-list strong { font-family: var(--font-title); color: var(--navy); }
.cms-map-panel h3 { font-family: var(--font-title); }

/* Section « Meteo locale »
   Bandeau pleine largeur : le temps du moment a gauche, les jours suivants a
   droite. Sous 900px les deux parties s'empilent et la bande de jours defile
   plutot que de se comprimer. Les couleurs sont posees explicitement, sans
   reprendre de classe existante du theme. */
/* Section collee a ce qui l'entoure : l'espacement vertical est porte par
   le bandeau lui-meme, pas par la section. */
/* Section « Meteo locale ».
   Correction apportee par Thierry, a conserver : la meteo n'a pas de conteneur
   propre dans le gabarit, elle s'etalait donc sur toute la largeur de l'ecran au
   lieu de s'aligner sur le reste du contenu. La largeur maximale et le centrage
   la remettent dans la meme colonne que les autres sections. */
.weather-block {
    padding: 0;
    max-width: 1200px;
    margin: 0 auto;
}
.weather-panel { display: grid; grid-template-columns: minmax(230px, 0.9fr) 2fr; gap: clamp(16px, 2.5vw, 32px); align-items: center; padding: clamp(18px, 2.6vw, 30px); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.weather-now { display: flex; align-items: center; gap: clamp(12px, 2vw, 20px); }
.weather-now-icon { flex: none; color: var(--navy); }
.weather-temp { margin: 0; font-family: var(--font-title); font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.4rem); font-weight: 700; line-height: 1; color: var(--navy); letter-spacing: -0.02em; }
.weather-temp span { font-size: 0.38em; font-weight: 600; vertical-align: super; margin-left: 2px; color: var(--ink-soft); }
.weather-desc { margin: 6px 0 0; color: var(--ink-soft); font-size: 0.96rem; }
.weather-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; font-size: 0.82rem; color: var(--ink-faint); }
.weather-meta strong { color: var(--navy); font-weight: 650; }
.weather-days { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(74px, 1fr); gap: 6px; margin: 0; padding: 0; }
.weather-day { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: var(--radius-sm); text-align: center; transition: background 0.15s; }
.weather-day:hover, .weather-day.is-today { background: var(--bg-soft); }
.weather-day-name { margin: 0; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
.weather-day .weather-icon { color: var(--navy); }
.weather-day-temp { margin: 0; display: flex; align-items: baseline; gap: 6px; font-size: 0.92rem; }
.weather-day-temp strong { font-weight: 700; color: var(--navy); }
.weather-day-temp span { color: var(--ink-faint); font-size: 0.86em; }
.weather-day-rain { margin: 0; font-size: 0.74rem; font-weight: 700; color: var(--gold); }
.weather-day-rain.is-dry { color: var(--ink-faint); font-weight: 500; }
.weather-source { margin: 10px 0 0; font-size: 0.74rem; color: var(--ink-faint); text-align: right; }
@media (max-width: 900px) {
    .weather-panel { grid-template-columns: 1fr; }
    .weather-days { overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
}
@media (max-width: 520px) {
    .weather-now { flex-direction: column; text-align: center; }
    .weather-meta { justify-content: center; }
    .weather-source { text-align: center; }
}

/* Capsules de contact (courriel, telephone) des cartes de services et du
   trombinoscope. Fond gris tres clair, texte bleu institutionnel, icone doree :
   les couleurs sont posees explicitement plutot que reprises d'une classe de
   bouton du theme, pour rester lisibles sur n'importe quel fond de section. */
.service-contacts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
/* Deux moyens de contact : capsules rondes cote a cote, sans repeter le mot. */
.service-contacts-icons { flex-wrap: nowrap; }
.service-contacts-icons .service-chip { width: 36px; height: 36px; padding: 0; justify-content: center; }
.service-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); color: var(--navy); font-size: 0.82rem; font-weight: 600; line-height: 1; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.service-chip svg { flex: none; color: var(--gold); transition: color 0.15s; }
.service-chip:hover { background: var(--navy); border-color: var(--navy); color: #fff; text-decoration: none; }
.service-chip:hover svg { color: var(--gold); }
.service-go-link { display: inline-flex; align-self: flex-start; margin-top: 4px; }
.service-go-link:hover { text-decoration: none; }

/* Trombinoscope : portrait en grand, fonction dessous, contact en pied de carte.
   Une seule colonne de moins que les cartes de services : les visages doivent
   rester reconnaissables. */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: clamp(14px, 2vw, 24px); }
.team-card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-align: center; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.team-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.team-photo { position: relative; overflow: hidden; background: var(--bg-soft); }
/* Visuel d'une carte de service.
   Le format 4/3 convient a une photo de lieu : le carre, herite des portraits de
   l'equipe municipale, coupait les salles et les batiments par le milieu. Le
   cadrage reste centre, alors qu'un portrait se cadre par le haut (voir plus bas
   la regle propre a la page de l'equipe municipale). */
.team-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
.team-body { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 14px 18px; flex: 1; }
.team-body h3 { margin: 0; font-family: var(--font-title); font-size: 1.02rem; line-height: 1.28; color: var(--navy); }
.team-body h3 a { color: var(--navy); }
.team-body h3 a:hover { color: var(--gold); text-decoration: none; }
.team-role { margin: 0; color: var(--navy); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.35; }
/* Description reservee au survol et au focus clavier. En dessous de 760px, et
   sur tout ecran depourvu de survol, elle reste affichee : un visiteur sur
   telephone doit lire la meme chose que les autres. */
.team-overlay { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--bg-soft); }
.team-note { margin: 0; color: var(--ink-soft); font-size: 0.85rem; line-height: 1.45; }
.service-subtitle { margin: 0; color: var(--gold); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
@media (min-width: 761px) and (hover: hover) {
    .team-photo { position: relative; }
    /* Volet de survol : il glisse depuis le bas du portrait, par-dessus lui.
       La hauteur de la carte ne bouge pas, la grille reste immobile. */
    .team-overlay {
        position: absolute; left: 0; right: 0; bottom: 0; gap: 10px; padding: 14px;
        background: linear-gradient(to top, rgba(13, 37, 64, 0.95) 0%, rgba(13, 37, 64, 0.84) 70%, rgba(13, 37, 64, 0.55) 100%);
        backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
        transform: translateY(100%);
        transition: transform 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .team-overlay .team-note { color: rgba(255, 255, 255, 0.92); }
    .team-overlay .service-chip { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.14); color: #fff; }
    .team-overlay .service-chip svg { color: var(--gold); }
    .team-overlay .service-chip:hover { background: #fff; border-color: #fff; color: var(--navy); transform: translateY(-1px); }
    .team-overlay .service-chip:hover svg { color: var(--navy); }
    /* Ouverture en deux temps : le volet monte, puis son contenu se pose. */
    .team-overlay > * { opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease 0.06s, transform 0.3s ease 0.06s; justify-content: center; }
    .team-overlay > * + * { transition-delay: 0.12s; }
    .team-photo img { transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
    .team-card:hover .team-photo img, .team-card:focus-within .team-photo img { transform: scale(1.05); }
    .team-card:hover .team-overlay, .team-card:focus-within .team-overlay, .team-card:focus .team-overlay { transform: translateY(0); }
    .team-card:hover .team-overlay > *, .team-card:focus-within .team-overlay > *, .team-card:focus .team-overlay > * { opacity: 1; transform: translateY(0); }
    .team-note-plain { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.25s ease, opacity 0.2s ease; }
    .team-card:hover .team-note-plain, .team-card:focus-within .team-note-plain, .team-card:focus .team-note-plain { max-height: 12em; opacity: 1; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .team-overlay, .team-overlay > *, .team-photo img { transition: none; }
}
.team-card:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.team-body .service-contacts { justify-content: center; margin-top: auto; padding-top: 10px; }

/* Section « Dernieres actualites »
   Cartes sobres a filet fin, titres en serif, etiquette de rubrique doree :
   la meme grammaire visuelle que le reste du theme institutionnel. */
.latest-posts-items { display: grid; gap: clamp(16px, 2.4vw, 26px); }
.latest-posts-grid .latest-posts-items { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
/* Une carte ne depasse jamais la largeur qu'elle aurait a trois par ligne.
   Avec « auto-fit », les colonnes vides disparaissent : une actualite seule
   s'etirait sur toute la largeur et son image devenait enorme. Le plafond ne
   change rien des qu'il y a trois cartes ou plus, la colonne etant deja plus
   etroite. */
.latest-post, .post-card { max-width: var(--card-max, 372px); }
.latest-post { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s; }
.latest-post:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.latest-post-media { display: block; overflow: hidden; }
.latest-post-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.4s; }
.latest-post:hover .latest-post-media img { transform: scale(1.04); }
.latest-post-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 20px 22px; }
.latest-post-category { align-self: flex-start; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gold); }
.latest-post-category:hover { text-decoration: none; opacity: 0.8; }
.latest-post-body h3 { margin: 0; font-family: var(--font-title); font-size: 1.16rem; line-height: 1.28; }
.latest-post-body h3 a { color: var(--navy); }
.latest-post-body h3 a:hover { color: var(--gold); text-decoration: none; }
.latest-post-excerpt { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }
.latest-post-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.latest-post-foot time { color: var(--ink-faint); font-size: 0.82rem; }
.latest-post-link { font-weight: 600; color: var(--navy); white-space: nowrap; }
.latest-post-link:hover { color: var(--gold); text-decoration: none; }
.latest-posts-actions { display: flex; justify-content: center; margin-top: clamp(22px, 3vw, 34px); }
/* Le theme redefinit .button-ghost en blanc, pour le hero sur fond sombre : tel
   quel, le bouton de cette section serait blanc sur blanc. On le repasse en
   bleu institutionnel, comme sur les autres fonds clairs du theme. */
.latest-posts-block .button-ghost { color: var(--navy); border-color: color-mix(in srgb, var(--navy) 38%, transparent); background: transparent; }
.latest-posts-block .button-ghost:hover { color: var(--navy); background: color-mix(in srgb, var(--navy) 8%, transparent); }

.latest-posts-list .latest-post { flex-direction: row; align-items: stretch; }
.latest-posts-list .latest-post-media { flex: 0 0 clamp(150px, 25%, 280px); }
.latest-posts-list .latest-post-media img { height: 100%; aspect-ratio: auto; min-height: 100%; }
.latest-posts-list .latest-post-body { padding: 18px clamp(18px, 2.6vw, 28px); }
@media (max-width: 620px) {
    .latest-posts-list .latest-post { flex-direction: column; }
    .latest-posts-list .latest-post-media { flex: none; }
    .latest-posts-list .latest-post-media img { aspect-ratio: 16 / 10; min-height: 0; }
}

/* En-tete de page pour les gabarits sans banniere (mentions legales, etc.) */
.page-header { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding-block: clamp(34px, 5vw, 58px); }
.page-header h1 { margin: 0 0 14px; color: var(--navy); }
.page-header .rule { margin-bottom: 0; }

/* Bouton de partage sous une actualite. La couleur est celle de Facebook, pour
   que le bouton soit reconnu d'un coup d'oeil. */
.post-share { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.post-share-label { font-size: 0.92rem; font-weight: 600; }
.post-share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 0.92rem; font-weight: 600; text-decoration: none; transition: transform .18s, filter .18s; }
.post-share-btn:hover, .post-share-btn:focus-visible { transform: translateY(-2px); filter: brightness(1.08); }
.post-share-facebook { background: #1877f2; color: #fff; }
.post-share-facebook svg { flex: none; }
@media (prefers-reduced-motion: reduce) { .post-share-btn { transition: none; } }

/* Listes de l'editeur : une liste a puces s'ecrit <ol> avec data-list="bullet"
   sur chaque ligne. Sans ces regles, elle s'afficherait numerotee. */
.richtext ol { list-style: decimal; }
.richtext ol:has(> li[data-list="bullet"]) { list-style: none; padding-left: 1.5em; }
.richtext li[data-list="bullet"] { position: relative; }
.richtext li[data-list="bullet"]::before { content: "\2022"; position: absolute; left: -1em; }

/* Nombre d'actualites, juste avant la pagination. */
.blog-count { margin: clamp(20px, 3vw, 32px) 0 0; text-align: center; font-size: 0.95rem; color: var(--ink-soft, #5c6470); }

/* Bandeau d'une rubrique d'actualites. Hauteur bornee pour qu'une photo verticale
   ne pousse pas la liste hors de l'ecran. */
.blog-banner { margin: 0; overflow: hidden; }
.blog-banner img { display: block; width: 100%; height: clamp(160px, 26vw, 340px); object-fit: cover; }
.blog-intro { max-width: 70ch; margin: 6px 0 0; }

/* Contenu integre : la hauteur vient du reglage de la section, avec un cadre qui
   s'adapte aux petits ecrans. */
.iframe-block .iframe-frame { position: relative; width: 100%; height: var(--iframe-height, 520px); max-height: 80vh; border-radius: var(--radius, 10px); overflow: hidden; background: var(--bg-soft, #f2f4f7); }
.iframe-block .iframe-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.iframe-block .iframe-intro { max-width: 70ch; margin: 0 0 18px; }
@media (max-width: 700px) { .iframe-block .iframe-frame { height: min(var(--iframe-height, 520px), 70vh); } }