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

    

    html { scroll-behavior: smooth; }
    body { font-family: 'Montserrat', system-ui, sans-serif; color: var(--marine); background: var(--fond); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 16px; overflow-x: hidden; }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }
    img { display: block; max-width: 100%; }
    h1, h2, h3, .display { font-family: 'Fraunces', Georgia, serif; }
    ::selection { background: rgba(12,100,105,0.16); color: var(--marine); }

    .skip-link { position: absolute; left: 12px; top: -60px; background: var(--marine); color: #fff; padding: 10px 18px; z-index: 500; font-weight: 600; border-radius: 0 0 8px 8px; transition: top 0.2s ease; }
    .skip-link:focus { top: 0; }
    :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

    .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(18px, 4vw, 44px); }

    .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: 'Montserrat', system-ui, sans-serif; font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: var(--accent); }
    .eyebrow::before { content: ''; width: 30px; height: 2px; background: var(--accent); }
    .section-head { margin-bottom: clamp(30px, 4vw, 52px); }
    .section-head h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.015em; color: var(--marine); margin-top: 14px; max-width: 20ch; }
    .section-head h2 em { font-style: normal; font-weight: inherit; color: var(--accent); }
    .section-head p { margin-top: 14px; color: var(--gris); max-width: 54ch; font-size: var(--t-base); }

    /* ==================== HEADER ==================== */
    .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease); border-bottom: 1px solid transparent; }
    .header-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(18px, 4vw, 44px); display: flex; align-items: center; justify-content: space-between; height: 80px; transition: height 0.4s var(--ease); }
    .logo { display: flex; align-items: center; gap: 12px; }
    .logo svg { width: 40px; height: 46px; transition: transform 0.4s var(--ease); }
    .logo:hover svg { transform: translateY(-2px); }
    .logo-name { font-family: 'Fraunces', Georgia, serif; font-size: var(--t-2xl); font-weight: 600; letter-spacing: 3px; color: #fff; transition: color 0.4s var(--ease); }
    .logo-sub { display: block; font-family: 'Montserrat', system-ui, sans-serif; font-size: var(--t-4xs); font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--blanc-moyen); transition: color 0.4s var(--ease); margin-top: -2px; }

    .nav-main { display: flex; gap: 4px; }
    .nav-main > li { position: relative; }
    .nav-main > li > a { display: flex; align-items: center; height: 80px; padding: 0 16px; font-size: var(--t-sm); font-weight: 600; color: var(--blanc-fort); position: relative; transition: color 0.3s var(--ease), height 0.4s var(--ease); }
    .nav-main > li > a::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 24px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
    .nav-main > li:hover > a::after { transform: scaleX(1); }
    .dropdown { position: absolute; top: calc(100% - 14px); left: 0; min-width: 268px; background: #fff; border: 1px solid var(--sable); box-shadow: var(--shadow-md); padding: 10px; border-radius: var(--r-md); opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.28s var(--ease); }
    .nav-main > li:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
    .dropdown a { display: block; padding: 11px 16px; font-size: var(--t-sm); font-weight: 500; color: var(--gris); border-radius: var(--r-sm); transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease; }
    .dropdown a:hover { background: var(--pierre); color: var(--marine); padding-left: 22px; }

    .header-right { display: flex; align-items: center; gap: 8px; }
    .icon-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); color: #fff; cursor: pointer; font-family: inherit; font-size: var(--t-xs); font-weight: 600; padding: 10px 18px; border-radius: var(--r-sm); backdrop-filter: blur(6px); transition: all 0.3s var(--ease); }
    .icon-btn:hover { background: #fff; color: var(--marine); border-color: #fff; }
    .icon-btn svg { width: 17px; height: 17px; }
    .burger { display: none; width: 46px; height: 46px; border-radius: var(--r-sm); background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
    .burger span { display: block; width: 20px; height: 2px; background: #fff; }

    .header.solid { background: var(--blanc-fort); backdrop-filter: blur(14px); border-bottom-color: var(--sable); box-shadow: var(--shadow-sm); }
    .header.solid .header-inner { height: 66px; }
    .header.solid .nav-main > li > a { height: 66px; color: var(--marine); }
    .header.solid .nav-main > li > a::after { bottom: 18px; }
    .header.solid .logo-name { color: var(--marine); }
    .header.solid .logo-sub { color: var(--gris); }
    .header.solid .logo svg .shield { fill: var(--marine); }
    .header.solid .logo svg .shield-m { fill: #fff; }
    .header.solid .icon-btn { background: var(--marine); color: #fff; border-color: var(--marine); }
    .header.solid .icon-btn:hover { background: var(--marine-2); border-color: var(--marine-2); }
    .header.solid .burger { background: var(--marine); border-color: var(--marine); }

    /* ==================== HERO ==================== */
    .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
    .hero-media { position: absolute; inset: 0; z-index: 0; }
    .hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,19,31,0.55) 0%, rgba(4,19,31,0.05) 30%, rgba(4,19,31,0.18) 60%, rgba(4,19,31,0.85) 100%); }
    .hero-img { position: absolute; inset: -3%; width: 106%; height: 106%; background: url('images/muzy-paysage-campagne.jpg') center 42%/cover no-repeat; animation: kenburns 26s var(--ease) infinite alternate; will-change: transform; }
    @keyframes kenburns { from { transform: scale(1) translateY(0); } to { transform: scale(1.08) translateY(-1.5%); } }

    .hero-content { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(130px, 17vh, 220px); }
    .hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-size: var(--t-2xs); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 22px; opacity: 0; animation: heroUp 1s var(--ease) 0.2s forwards; }
    /* Le tricolore, dans l'ordre : un filet bleu, le texte en blanc, un filet
       rouge. Les deux filets sont tenus à la même largeur pour que le blanc
       central reste la partie large, comme sur le drapeau. */
    /* Le fond est un ciel : sans ombre portée, le bleu du drapeau s'y dissout.
       La même ombre sert au filet rouge, pour qu'ils restent une paire. */
    .hero-eyebrow .pin,
    .hero-eyebrow::after { width: 34px; height: 2px; display: inline-block; flex-shrink: 0; box-shadow: 0 1px 4px rgba(4,19,31,0.55); }
    .hero-eyebrow .pin { background: var(--bleu-drapeau); }
    .hero-eyebrow::after { content: ''; background: var(--rouge-drapeau); }
    .hero h1 { color: #fff; font-weight: 500; font-size: clamp(3.6rem, 12vw, 8.5rem); line-height: 0.92; letter-spacing: -0.02em; text-shadow: 0 8px 40px rgba(4,19,31,0.35); opacity: 0; animation: heroUp 1.1s var(--ease) 0.34s forwards; }
    /* Le titre de la page d'accueil garde son italique : c'est la signature
       du site, et la demande de romain ne portait pas sur lui. */
    .hero h1 em { font-style: italic; font-weight: 500; }
    .hero-tagline { color: var(--blanc-fort); font-size: clamp(1.05rem, 2.2vw, 1.4rem); font-weight: 400; max-width: 40ch; margin-top: 22px; text-shadow: 0 2px 20px rgba(4,19,31,0.30); opacity: 0; animation: heroUp 1.1s var(--ease) 0.5s forwards; }
    .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; opacity: 0; animation: heroUp 1.1s var(--ease) 0.66s forwards; }
    .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; font-family: inherit; font-size: var(--t-sm); font-weight: 700; border-radius: var(--r-sm); cursor: pointer; border: 1.5px solid transparent; transition: all 0.3s var(--ease); }
    .btn svg { width: 17px; height: 17px; transition: transform 0.3s var(--ease); }
    .btn:hover svg { transform: translateX(4px); }
    .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 10px 26px rgba(12,100,105,0.30); }
    .btn-primary:hover { background: var(--accent-fonce); transform: translateY(-2px); }
    .btn-ghost { background: rgba(255,255,255,0.10); color: #fff; border-color: var(--blanc-faible); backdrop-filter: blur(6px); }
    .btn-ghost:hover { background: #fff; color: var(--marine); border-color: #fff; transform: translateY(-2px); }

    /* La carte des accès rapides remonte sur le bas du hero — voir le
       « margin-top » négatif de .tray-wrap. Caler le repère à 24 px du bas le
       faisait passer dessous, libellé compris, à toutes les tailles d'écran.
       On reprend donc la même valeur de recouvrement, augmentée d'une marge. */
    .scroll-cue { position: absolute; left: 50%; bottom: calc(clamp(70px, 9vw, 96px) + 20px); transform: translateX(-50%); z-index: 3; color: var(--blanc-moyen); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: var(--t-3xs); letter-spacing: 2px; text-transform: uppercase; opacity: 0; animation: heroUp 1s var(--ease) 1s forwards; }
    .scroll-cue .mouse { width: 24px; height: 38px; border: 2px solid var(--blanc-faible); border-radius: 100px; position: relative; }
    .scroll-cue .mouse::after { content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 4px; height: 8px; border-radius: 4px; background: #fff; animation: wheel 1.6s ease-in-out infinite; }
    @keyframes wheel { 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 80%,100%{opacity:0;transform:translate(-50%,12px)} }
    @keyframes heroUp { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } }

    /* ==================== TRAY ==================== */
    .tray-wrap { position: relative; z-index: 5; margin-top: clamp(-96px, -9vw, -70px); }
    .tray { background: #fff; box-shadow: var(--shadow-lg); border-radius: var(--r-lg); display: grid; grid-template-columns: repeat(6, 1fr); overflow: hidden; }
    .tray a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 30px 14px; position: relative; transition: background 0.3s var(--ease); }
    .tray a + a::before { content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: var(--marine-10); }
    .tray a:hover { background: var(--pierre); }
    .tray-ico { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--pierre); color: var(--marine); display: flex; align-items: center; justify-content: center; transition: transform 0.35s var(--ease), background 0.3s ease, color 0.3s ease; }
    .tray a:hover .tray-ico { transform: translateY(-4px); background: var(--marine); color: #fff; }
    .tray-ico svg { width: 26px; height: 26px; stroke-width: 1.5; }
    .tray span { font-size: var(--t-xs); font-weight: 600; color: var(--marine); line-height: 1.3; }

    section { position: relative; }
    .pad { padding: clamp(66px, 9vw, 122px) 0; }
    /* Deux sections qui se suivent additionnaient leurs marges : 122 px en bas
       de l'une, 122 en haut de l'autre, soit 244 px de blanc entre deux blocs
       qui se lisent a la suite. La seconde n'ouvre donc plus sa marge haute —
       l'espace reste celui d'une seule section.

       Sauf si elle porte un fond : la marge y dessine le bloc colore, et la
       supprimer collerait le titre au bord. « .sms » est dans ce cas. */
    .pad + .pad:not(.sms) { padding-top: 0; }
    .bg-pierre { background: var(--pierre); }

    .link-all { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--t-sm); color: var(--marine); border-bottom: 2px solid var(--accent); padding-bottom: 4px; transition: gap 0.3s var(--ease); }
    .link-all:hover { gap: 14px; }
    .link-all svg { width: 16px; height: 16px; }
    .head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

    /* ==================== ACTUALITÉS ==================== */
    /* Colonne resserrée : un fil se parcourt, il ne se lit pas comme du corps
       de texte. La contrepartie est assumée — on descend sous la mesure de
       confort habituelle, d'où la typographie ajustée plus bas. */
    .news { display: grid; grid-template-columns: 1.55fr 0.45fr; gap: clamp(26px, 3.5vw, 48px); align-items: start; }
    /* Les fonds du parc sont déclarés ici et non en style en ligne : c'est le
       seul moyen de servir une version réduite aux téléphones, où l'image
       n'occupe que 339 px et n'a aucun besoin des 2048. */
    /* Deux visuels distincts : la carte à la une montre le terrain de padel
       dans son paysage, la tuile « Vivre à Muzy » la vue d'ensemble des
       équipements du parc. */
    .ph-parc  { background-image: url('images/muzy-parc-padel.jpg'); }
    .vph-parc { background-image: url('images/muzy-parc-rural.jpg'); }
    
/* Pastilles de position du carrousel : masquées tant que les flèches sont là. */
.carrousel-points { display: none; gap: 8px; align-items: center; }
.carrousel-point {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: var(--sable); cursor: pointer; position: relative;
  transition: background 0.2s ease, transform 0.2s ease;
}
/* La cible tactile fait 44 px quand la pastille en fait 9 : la zone est
   agrandie par un pseudo-élément, sans grossir le point ni écarter ses
   voisins. */
.carrousel-point::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.carrousel-point.est-actif { background: var(--accent); transform: scale(1.35); }
.carrousel-point:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

@media (max-width: 900px) {
  /* Le pouce pousse la carte : les flèches et le compteur n'occupaient plus
     qu'une rangée entière sous l'article pour une fonction que le geste
     assure mieux. */

      .ph-parc  { background-image: url('images/muzy-parc-padel-900.jpg'); }
      .vph-parc { background-image: url('images/muzy-parc-rural-900.jpg'); }
      .hero-img { background-image: url('images/muzy-paysage-campagne-900.jpg'); }
    }

    .feature { display: block; }
    .feature .f-media { position: relative; overflow: hidden; border-radius: var(--r-md); box-shadow: var(--shadow-md); }
    .feature .f-media .ph { width: 100%; aspect-ratio: 3/2; background-size: cover; background-position: center; transition: transform 0.9s var(--ease); }
    .feature:hover .f-media .ph { transform: scale(1.05); }
    .feature .f-media .chip { position: absolute; top: 18px; left: 18px; z-index: 2; background: var(--blanc-fort); color: var(--marine); font-size: var(--t-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; padding: 7px 14px; border-radius: var(--r-sm); backdrop-filter: blur(4px); }
    .feature .f-body { padding: 26px 4px 0; }
    .feature .kicker { font-size: var(--t-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; color: var(--accent); }
    .feature h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; color: var(--marine); margin-top: 10px; }
    .feature p { color: var(--gris); margin-top: 12px; font-size: var(--t-base); max-width: 48ch; }
    .feature .read { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 1px; color: var(--accent); }
    .feature .read svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
    .feature:hover .read svg { transform: translateX(5px); }

    /* La colonne porte son propre titre, comme le « Fil info » de paris.fr :
       le lecteur sait ce qu'il regarde sans avoir à relier la colonne au titre
       de section, qui coiffe l'article mis en avant à sa gauche. */
    .fil-colonne { display: flex; flex-direction: column; }
    /* Le titre de la colonne monte au niveau du titre de section, sur la même
       grille que le contenu : les deux colonnes démarrent ainsi à la même
       hauteur, comme le « Fil info » de paris.fr. */
    /* L'en-tête reprend la grille du contenu, sinon « Fil info » se pose à
       côté de la colonne qu'il annonce. */
    .news-head { display: grid; grid-template-columns: 1.68fr 0.32fr; gap: clamp(20px, 2.4vw, 34px); align-items: end; }
    @media (max-width: 900px) {
      .news-head { grid-template-columns: 1fr; }
      .news-head .fil-titre { display: none; }   /* le fil reprend son titre dans le flux */
    }
    .fil-titre { font-family: 'Fraunces', Georgia, serif; font-size: var(--t-md); font-weight: 600; color: var(--rouge-fil); padding-bottom: 14px; }
    .fil-toutes { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; padding-left: 22px; font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.9px; color: var(--marine); transition: gap 0.25s var(--ease), color 0.25s var(--ease); min-height: 44px; }
    .fil-toutes:hover { gap: 13px; color: var(--rouge-fil); }
    .fil-toutes svg { width: 13px; height: 13px; }

    /* Un fil rouge, au sens propre : une ligne verticale relie les entrées et
       porte un repère par actualité. C'est ce qui fait lire la colonne comme un
       fil et non comme une pile de blocs — et ce qui donne son nom à la section. */
    .fil { position: relative; }
    .fil::before { content: ''; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 2px; background: var(--rouge-fil); }
    /* Un filet gris ferme chaque entrée, y compris la dernière. Le rouge reste
       au fil vertical seul : cinq traits rouges dans une colonne étroite
       tiraient l'œil plus que le contenu. */
    .fil-item { display: block; position: relative; padding: 15px 0 15px 20px; border-bottom: 1px solid var(--marine-10); }
    .fil-item:first-child { padding-top: 14px; }
    .fil-item::before { content: ''; position: absolute; left: 0; top: 26px; width: 12px; height: 12px; border-radius: 50%; background: var(--blanc); box-shadow: inset 0 0 0 2px var(--rouge-fil); transition: box-shadow 0.25s var(--ease); }
    .fil-item:first-child::before { top: 20px; }
    .fil-item:hover::before { box-shadow: inset 0 0 0 6px var(--rouge-fil); }
    /* Une alerte se signale par un repère plein, le fil étant déjà rouge. */
    .fil-item.is-alerte::before { background: var(--rouge-fil); box-shadow: inset 0 0 0 2px var(--rouge-fil), 0 0 0 4px rgba(210,38,56,0.18); }

    /* Le visuel occupe toute la colonne — un panneau est souvent une affiche,
       qu'une vignette rendait illisible. La hauteur est bornée pour que la
       colonne ne dépasse pas l'article mis en avant, à sa gauche. */
    .fil-visuel { display: block; width: 100%; height: 110px; object-fit: cover; border-radius: var(--r-sm); margin-top: 14px; }
    .fil-item:first-child { border-top: none; padding-top: 0; }
    .fil-item:last-child { padding-bottom: 0; }
    .fil-mark { width: 60px; height: 60px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--pierre); color: var(--marine); box-shadow: inset 0 0 0 1px var(--marine-10); }
    .fil-mark svg { width: 26px; height: 26px; stroke-width: 1.6; }
    .fil-mark.alert { background: var(--rouge-fil); color: #fff; box-shadow: none; }
    .fil-thumb { width: 60px; height: 60px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; }
    .fil-kicker { font-size: var(--t-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: var(--rouge-fil); }
    .fil-item h4 { font-family: 'Fraunces', Georgia, serif; font-size: var(--t-sm); font-weight: 600; line-height: 1.22; color: var(--marine); margin-top: 4px; }
    /* Deux lignes, quelle que soit la longueur du texte : compter les signes
       ne suffit pas, la largeur de colonne fait varier le nombre de lignes. */
    .fil-item p { font-size: var(--t-2xs); color: var(--gris); margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .fil-item .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--marine); transition: gap 0.25s var(--ease); }
    .fil-item .go:hover { gap: 12px; color: var(--rouge-fil); }
    .fil-item .go svg { width: 14px; height: 14px; }

    /* ==================== SLAB ==================== */
    .slab { margin: 0 clamp(0px, 2.5vw, 34px); border-radius: var(--r-lg); overflow: hidden; }
    @media (max-width: 620px) { .slab { margin: 0; border-radius: 0; } }

    /* ==================== HERITAGE ==================== */
    .heritage { background: var(--marine); color: #fff; position: relative; }
    .heritage-inner { padding: clamp(40px,6vw,84px) clamp(28px,5vw,72px); }

    /* Pleine largeur — le fond marine touche les deux bords de l'écran, le
       contenu reste dans la colonne de lecture. En dessous de 900 px la section
       occupe déjà toute la largeur utile : la règle ne sert qu'au desktop. */
    @media (min-width: 900px) {
      .pleine-largeur { padding-top: 0; padding-bottom: 0; }
      .pleine-largeur > .wrap { max-width: none; padding: 0; }
      .pleine-largeur .slab { margin: 0; border-radius: 0; }
      .pleine-largeur .heritage-inner { max-width: var(--maxw); margin: 0 auto;
        padding: clamp(64px,7vw,104px) clamp(28px,4vw,44px); }

      /* La photo franchit le bord haut du bandeau : la séparation n'est plus
         une ligne, elle est interrompue par du contenu. Le débordement est
         compensé par un retrait équivalent au-dessus de la section, pour que
         rien ne vienne buter contre le bloc précédent. */
      .pleine-largeur { position: relative; z-index: 1; }
    }
    .heritage::before { content: 'M'; position: absolute; right: -3vw; top: 50%; transform: translateY(-50%); font-family: 'Fraunces', Georgia, serif; font-size: 42vw; line-height: 1; font-weight: 600; color: rgba(255,255,255,0.03); pointer-events: none; z-index: 0; }
    .heritage-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(40px, 6vw, 90px); align-items: center; position: relative; z-index: 1; }
    .heritage-media { position: relative; }
    /* Le cartouche « 1128 » s'ancre sur l'image seule, pas sur le bloc entier :
       sinon il descend avec le crédit ajouté en dessous et le recouvre. */
    .h-visuel { position: relative; }
    .heritage-media .h-img { position: relative; overflow: hidden; border-radius: var(--r-md);
      box-shadow: 0 0 0 1px var(--blanc-faible), 0 30px 60px rgba(4,19,31,0.55); }
    .heritage-media .h-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
    .h-visuel .stamp { position: absolute; bottom: -18px; right: -10px; border-radius: var(--r-md); background: var(--accent); color: #fff; padding: 16px 22px; box-shadow: var(--shadow-md); text-align: center; }
    .h-visuel .stamp .num { display: block; font-family: 'Fraunces', Georgia, serif; font-size: var(--t-3xl); font-weight: 600; line-height: 1; }
    .h-visuel .stamp .lbl { display: block; font-size: var(--t-4xs); text-transform: uppercase; letter-spacing: 1.2px; margin-top: 5px; }
    .heritage-text .eyebrow { color: #fff; } .heritage-text .eyebrow::before { background: var(--accent); }
    .heritage-text h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 500; line-height: 1.06; margin-top: 16px; letter-spacing: -0.015em; }
    .heritage-text h2 em { font-style: normal; font-weight: inherit; color: var(--or); }
    .heritage-text .lede { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.1rem, 2vw, 1.4rem); font-style: italic; color: var(--blanc-fort); margin-top: 22px; line-height: 1.5; }
    .heritage-text p { color: var(--blanc-moyen); margin-top: 18px; font-size: var(--t-base); }
    .heritage-facts { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
    .heritage-facts .f { flex: 1; min-width: 96px; padding: 18px 16px; border-radius: var(--r-sm); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
    .heritage-facts .f .n { font-family: 'Fraunces', Georgia, serif; font-size: var(--t-2xl); font-weight: 600; color: #fff; }
    .heritage-facts .f .t { font-size: var(--t-2xs); color: var(--blanc-faible); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
    .heritage-text .btn { margin-top: 32px; }

    /* ==================== VIVRE À MUZY (mosaïque photos) ==================== */
    .vivre-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 210px; gap: 16px; }
    .vtile { position: relative; overflow: hidden; border-radius: var(--r-md); display: block; box-shadow: var(--shadow-sm); }
    .vtile .vph { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.9s var(--ease); }
    .vtile:hover .vph { transform: scale(1.06); }
    .vtile .vgrad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,19,31,0) 30%, rgba(4,19,31,0.30) 62%, rgba(4,19,31,0.86) 100%); }
    .vtile .vcap { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 22px 24px; color: #fff; }
    .vtile .vk { font-size: var(--t-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: var(--blanc-moyen); }
    .vtile h3 { font-size: var(--t-lg); font-weight: 600; margin-top: 3px; line-height: 1.15; }
    .vtile .varr { position: absolute; top: 16px; right: 16px; z-index: 2; width: 38px; height: 38px; border-radius: var(--r-sm); background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transform: translateY(-6px); transition: all 0.3s var(--ease); }
    .vtile:hover .varr { opacity: 1; transform: none; }
    .vtile .varr svg { width: 16px; height: 16px; }
    .vtile.big { grid-column: span 2; grid-row: span 2; }
    .vtile.big h3 { font-size: var(--t-3xl); }
    .vtile.big .vcap { padding: 30px 32px; }

    /* ==================== AGENDA ==================== */
    .agenda-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .ev { background: #fff; border: 1px solid var(--sable); border-radius: var(--r-md); padding: 24px 26px; display: flex; gap: 20px; align-items: center; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
    .ev:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
    .ev-date { flex-shrink: 0; width: 76px; height: 78px; border-radius: var(--r-md); background: var(--marine); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
    .ev-date::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 12px; height: 2px; background: var(--accent); }
    .ev-date .j { font-family: 'Fraunces', Georgia, serif; font-size: var(--t-2xl); font-weight: 600; line-height: 1; }
    .ev-date .m { font-size: var(--t-4xs); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 4px; }
    .ev-body .tag { font-size: var(--t-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent); }
    .ev-body h3 { font-size: var(--t-md); font-weight: 600; color: var(--marine); margin-top: 5px; }
    .ev-body .meta { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: var(--t-xs); color: var(--gris); }
    .ev-body .meta svg { width: 14px; height: 14px; flex-shrink: 0; }

    /* ==================== ALERTES SMS (clair) ==================== */
    .sms { background: var(--pierre); border-top: 1px solid var(--sable); border-bottom: 1px solid var(--sable); position: relative; overflow: hidden; }
    .sms::after { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; border: 1px solid var(--sable); right: -90px; bottom: -150px; }
    .sms-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: center; }
    .sms h2 { color: var(--marine); font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.015em; }
    .sms h2 em { font-style: normal; font-weight: inherit; color: var(--accent); }
    .sms p { color: var(--gris); margin-top: 18px; font-size: var(--t-base); max-width: 46ch; }
    .sms-form { display: flex; gap: 10px; background: #fff; border: 1px solid var(--sable); padding: 8px; border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
    .sms-form input { flex: 1; background: none; border: none; outline: none; color: var(--marine); font-family: inherit; font-size: var(--t-base); padding: 12px 18px; }
    .sms-form input::placeholder { color: var(--gris); }
    .sms-form button { background: var(--accent); color: #fff; border: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: var(--t-sm); padding: 14px 28px; border-radius: var(--r-sm); transition: background 0.3s ease; }
    .sms-form button:hover { background: var(--accent-fonce); }
    .sms small { display: block; margin-top: 14px; color: var(--gris); font-size: var(--t-2xs); }

    /* ==================== FOOTER ==================== */
    .footer { background: var(--marine); color: var(--blanc-moyen); padding-top: clamp(60px, 7vw, 92px); }
    .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.12); }
    .footer .fcol h4, .footer .fcol .f-col-titre { font-family: 'Montserrat', system-ui, sans-serif; font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #fff; margin-bottom: 18px; }
    .footer .brand-name { font-family: 'Fraunces', Georgia, serif; font-size: var(--t-2xl); font-weight: 600; letter-spacing: 2px; color: #fff; display: flex; align-items: center; gap: 12px; }
    .footer .brand-name svg { width: 34px; height: 40px; }
    .footer address { font-style: normal; margin-top: 18px; line-height: 1.8; font-size: var(--t-sm); }
    .footer a:hover { color: #fff; }
    .footer ul li { margin-bottom: 11px; font-size: var(--t-sm); }
    .footer ul li a { transition: padding-left 0.25s var(--ease); }
    .footer ul li a:hover { padding-left: 8px; }
    .footer .urg strong { color: #fff; }
    .footer .urg p { font-size: var(--t-sm); line-height: 1.9; }
    .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding: 26px 0; font-size: var(--t-xs); color: var(--blanc-faible); }
    .footer-bottom-links { display: flex; flex-wrap: wrap; gap: 20px; }

    /* ==================== REVEAL ==================== */
    .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
    .reveal.in { opacity: 1; transform: none; }
    .reveal.d1 { transition-delay: 0.08s; } .reveal.d2 { transition-delay: 0.16s; } .reveal.d3 { transition-delay: 0.24s; } .reveal.d4 { transition-delay: 0.32s; } .reveal.d5 { transition-delay: 0.40s; }

    /* ==================== DRAWER + SEARCH ==================== */
    .overlay { position: fixed; inset: 0; background: rgba(4,19,31,0.5); z-index: 199; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
    .overlay.open { opacity: 1; visibility: visible; }
    .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 88vw; background: #fff; z-index: 200; transform: translateX(100%); transition: transform 0.4s var(--ease); display: flex; flex-direction: column; }
    .drawer.open { transform: translateX(0); }
    .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--sable); }
    .drawer-head .logo-name { color: var(--marine); }
    .drawer-close { width: 44px; height: 44px; border: none; background: var(--pierre); border-radius: var(--r-sm); cursor: pointer; font-size: var(--t-xl); color: var(--marine); }
    .drawer-body { flex: 1; overflow-y: auto; padding: 8px 0; }
    .dnav-item { border-bottom: 1px solid var(--marine-10); }
    .dnav-link { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; font-weight: 600; color: var(--marine); cursor: pointer; }
    .dnav-link .chev { transition: transform 0.3s ease; color: var(--gris); }
    .dnav-item.open .chev { transform: rotate(180deg); }
    .dsub { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); background: var(--pierre); }
    .dnav-item.open .dsub { max-height: 460px; }
    .dsub a { display: block; padding: 12px 22px 12px 34px; color: var(--gris); font-size: var(--t-sm); font-weight: 500; border-top: 1px solid rgba(7,31,50,0.05); }
    .dsub a:hover { color: var(--accent); }
    .drawer-foot { padding: 20px 22px; border-top: 1px solid var(--sable); background: var(--pierre); font-size: var(--t-xs); line-height: 1.7; }
    .drawer-foot a { color: var(--accent); font-weight: 600; }

    /* Visé par son identifiant : « search » est aussi une classe que WordPress
       pose sur le <body> d'une page de résultats, et la règle masquait alors
       la page entière. */

    /* ==================== RESPONSIVE ==================== */
    @media (max-width: 1080px) {
      .news { grid-template-columns: 1fr; gap: 40px; }
      .agenda-grid { grid-template-columns: 1fr; }
    }
    /* Le repère de défilement disparaît sur mobile : la carte des accès rapides
       remonte sur le bas du hero et le recouvrait, libellé compris. Et une
       molette de souris n'a pas de sens sur un écran tactile. */
    @media (max-width: 900px) { .scroll-cue { display: none; } }

    @media (max-width: 900px) {
      .nav-main, .icon-btn .lbl { display: none; }
      .burger { display: flex; }
      .heritage-grid, .sms-inner, .news-head { grid-template-columns: 1fr; }
      .heritage-media { max-width: 420px; }
      .sms-inner { gap: 30px; }
      .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
      .vivre-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
      .vtile.big { grid-column: span 2; grid-row: span 1; grid-auto-rows: 220px; }
    }
    @media (max-width: 760px) {
      .tray { grid-template-columns: repeat(3, 1fr); }
      .tray a:nth-child(n+4) { border-top: 1px solid var(--marine-10); }
      .tray a:nth-child(3n+1)::before { display: none; }
      .tray-wrap { margin-top: -54px; }
      .footer-top { grid-template-columns: 1fr; }
    }
    @media (max-width: 560px) {
      .vivre-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
      .vtile.big { grid-column: auto; }
    }
    @media (max-width: 480px) {
      .tray { grid-template-columns: repeat(2, 1fr); }
      .tray a::before { display: none !important; }
      .hero-cta { flex-direction: column; align-items: stretch; }
      .btn { justify-content: center; }
      .sms-form { flex-direction: column; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
      .reveal { opacity: 1; transform: none; } .hero-img { animation: none; }
    }

    /* Titres saisis en capitales dans PanneauPocket : on les allège plutôt que
       de les réécrire — une remise en minuscules abîmerait les noms propres. */
    .fil-item h4.t-caps { font-size: var(--t-base); font-weight: 500; letter-spacing: 0.035em; line-height: 1.3; }

    /* ---------- Appel à l'inscription SMS (accueil) ---------- */
    .sms-inner-seul { grid-template-columns: 1fr; }
    .sms-appel { background: #fff; border: 1px solid var(--sable); border-radius: var(--r-md); padding: 28px 30px; box-shadow: var(--shadow-sm); }
    .sms-appel-ico { width: 46px; height: 46px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; margin-bottom: 16px; }
    .sms-appel-ico svg { width: 22px; height: 22px; }
    .sms-appel strong { display: block; font-family: 'Fraunces', Georgia, serif; font-size: var(--t-lg); font-weight: 600; color: var(--marine); }
    .sms-appel p { margin-top: 10px; font-size: var(--t-sm); color: var(--gris); max-width: none; }
    .sms-appel .btn { margin-top: 20px; }
    .sms-appel small { display: block; margin-top: 14px; color: var(--gris); font-size: var(--t-2xs); }

    /* Au-delà de 1000 px, la navigation tient sur une ligne sans césure : sans
       cette règle « Ma commune » et « Vie locale » se coupaient en deux. En
       dessous, on laisse le thème tel quel — l'en-tête y est déjà à l'étroit,
       indépendamment de ce réglage. */
    @media (min-width: 1001px) { .nav-main > li > a { white-space: nowrap; } }

    /* Crédit d'une photo sous licence Creative Commons : l'attribution est une
       condition de la licence, pas une politesse — elle doit donc rester
       entièrement lisible. Le cartouche « 1128 » déborde de 20 px sous l'image ;
       la marge le dégage au lieu de laisser le crédit passer dessous. */
    .h-credit { margin-top: 34px; font-size: var(--t-3xs); line-height: 1.4; color: var(--blanc-faible); }
    .h-credit a { color: var(--blanc-moyen); text-decoration: underline; text-underline-offset: 2px; }
    .h-credit a:hover { color: #fff; }

    /* ============================================================
       ACTUALITÉS — trois colonnes
       Le grand encadré où défilent les articles, les vignettes des autres,
       et le fil PanneauPocket qui garde sa colonne et sa ligne verticale.

       Le carrousel est en « display: contents » : ses deux parties deviennent
       directement des colonnes de cette grille, sans quoi il aurait fallu
       imbriquer une grille dans une grille pour rien.
       ============================================================ */
        /* « gap » s'appliquait aussi entre les lignes : 34 px s'ajoutaient sous la
       carte alors que seule la gouttière entre colonnes est utile ici.
       L'écart vertical est réglé par la marge de la rangée de vignettes. */
    .actu-trio { display: grid; grid-template-columns: 1.68fr 0.32fr; column-gap: clamp(20px, 2.4vw, 34px); row-gap: 0; align-items: start; }
    /* « display: contents » : les deux parties du carrousel deviennent des
       éléments de cette grille-ci. L'article principal et la rangée de
       vignettes se suivent dans la première colonne, le fil occupe la seconde
       sur toute la hauteur. */
    .carrousel { display: contents; }
    /* Trois lignes et non deux. Le fil est bien plus haut que l'article et ses
       vignettes ; en ne couvrant que deux lignes, sa hauteur se répartissait
       entre elles et gonflait la première de 130 px — un trou béant sous la
       carte, sans que rien ne l'occupe. La troisième ligne, en « 1fr »,
       absorbe tout le surplus. */
    .actu-trio { grid-template-rows: auto auto 1fr; }
    .carrousel-principal { grid-column: 1; grid-row: 1; }
    .carrousel-cote { grid-column: 1; grid-row: 2; }
    .fil-colonne { grid-column: 2; grid-row: 1 / span 3; }

    .carrousel-principal { min-width: 0; }
    .carrousel-scene { display: grid; }
    .carrousel-une { grid-area: 1 / 1; }
    .une-lien { display: grid; grid-template-columns: 1.32fr 1fr; align-items: stretch;
      background: var(--blanc); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
    .carrousel-une[hidden] { display: none; }
    .carrousel-une.est-visible { animation: uneParaît 0.4s var(--ease) both; }
    .une-lien:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
    @keyframes uneParaît { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) { .carrousel-une.est-visible { animation: none; } }

    /* L'article est couché : image à gauche, texte à droite.
       Empilé, il mesurait plus de 700 px de haut et repoussait les vignettes
       hors de l'écran — on cliquait une vignette et il fallait remonter pour
       voir le résultat. Couché, l'article et sa rangée de vignettes tiennent
       ensemble dans une fenêtre ordinaire, et le changement se voit. */
    /* L'image prend la part belle et la carte gagne en hauteur : à 250 px et
       à parts égales, l'article à la une pesait moins que la rangée de
       vignettes censée le servir. Le filet de défilement, lui, couvre les
       écrans où l'ensemble ne tient plus d'un seul tenant. */
    /* 450 px tant que la bande de vignettes occupait la ligne du dessous.
       Celle-ci retiree, la colonne de gauche s'arretait 275 px avant le fil :
       la une, qui est le contenu principal de l'accueil, etait la plus petite
       chose de sa propre section. Elle reprend la hauteur liberee. */
    .une-media { display: block; position: relative; overflow: hidden; background: var(--pierre); min-height: clamp(450px, 47vw, 672px); }
    .une-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
    /* Affiche au format portrait.
       Une affiche se lit en entier ou ne se lit pas : recadree, elle perd son
       titre, ses horaires ou son numero de telephone. On la montre donc
       complete — « contain » — et on remplit le cadre avec l'affiche elle-meme,
       floutee et assombrie, pour qu'il ne reste pas deux bandes mortes.
       Les photos au format paysage, elles, gardent le cadrage plein. */
    .une-media.est-portrait::before {
      content: ""; position: absolute; inset: 0; z-index: 0;
      background-image: var(--affiche); background-size: cover; background-position: center;
      filter: blur(26px) saturate(1.15) brightness(0.92);
      transform: scale(1.18);   /* evite les bords transparents que le flou laisse */
    }
    .une-media.est-portrait img {
      object-fit: contain; object-position: 50% 50%; z-index: 1;
      filter: drop-shadow(0 6px 22px rgba(10, 26, 40, 0.28));
    }
    /* L'agrandissement au survol est retire ici : sur une image entiere, il la
       ferait deborder du cadre au lieu de la rapprocher. */
    .une-lien:hover .une-media.est-portrait img { transform: none; }
    .une-lien:hover .une-media img { transform: scale(1.04); }
    .une-sans-image { display: block; position: absolute; inset: 0; background: linear-gradient(135deg, var(--marine-2), var(--marine)); }
    .une-media .chip { position: absolute; top: 20px; left: 20px; z-index: 2; background: var(--blanc-fort); color: var(--marine); font-size: var(--t-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; padding: 7px 14px; border-radius: var(--r-sm); backdrop-filter: blur(4px); }

    .une-corps { display: block; padding: clamp(20px, 2vw, 30px); align-self: center; }
    .une-corps .kicker { display: inline-block; font-size: var(--t-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px;
      color: #fff; background: var(--accent); padding: 5px 11px; border-radius: var(--r-xs); }
    .une-corps h3 { font-size: clamp(1.55rem, 2.3vw, 2.15rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; color: var(--marine); margin-top: 14px; }
    .une-corps p { color: var(--gris); margin-top: 13px; font-size: var(--t-base); line-height: 1.65; max-width: 46ch; }
    .une-meta { display: flex; align-items: center; gap: 10px; margin-top: 13px; font-size: var(--t-2xs); font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--gris); }
    .une-rubrique::before { content: '·'; margin-right: 10px; }
    .une-corps .read { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 1px; color: var(--accent); }
    .une-corps .read svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
    .une-lien:hover .read svg { transform: translateX(5px); }

    /* --- La rangée de vignettes, qui est la commande -------------------- */
    /* Les vignettes suivent l'article sans filet ni grand blanc : c'est le
       même bloc, on passe de l'un à l'autre du regard. Les flèches encadrent
       la rangée au lieu de s'intercaler entre l'article et elle — elles
       commandent les vignettes, elles doivent être avec elles. */
    .carrousel-cote { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
    .carrousel-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
    /* « auto-fill » et non « auto-fit » : auto-fit supprime les pistes vides et
       etire les restantes, si bien que deux articles occupaient chacun 437 px —
       presque la taille de l'article a la une. auto-fill garde les pistes, les
       vignettes gardent leur taille quel qu'en soit le nombre, et la bande se
       termine simplement plus tot. */
    .carrousel-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; min-width: 0; }

    .carrousel-fleche {
      display: inline-flex; align-items: center; justify-content: center;
      width: 34px; height: 34px; padding: 0; cursor: pointer; flex-shrink: 0;
      background: var(--blanc); border: 1px solid var(--sable); border-radius: 50%; color: var(--marine);
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }
    .carrousel-fleche:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
    .carrousel-fleche:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
    .carrousel-fleche svg { width: 16px; height: 16px; }

    .carrousel-vignette {
      /* « grid » et « align-content: start » plutôt que « block » : un bouton
         centre son contenu verticalement, et les vignettes à titre court
         descendaient de sept pixels par rapport à celles sur deux lignes. */
      display: grid; align-content: start;
      width: 100%; padding: 0; text-align: left; cursor: pointer;
      background: none; border: 0; font-family: inherit; min-width: 0;
      transition: transform 0.25s var(--ease);
    }
    .carrousel-vignette:hover { transform: translateY(-3px); }
    .carrousel-vignette:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }

    .vignette-media { display: block; width: 100%; aspect-ratio: 16/10; border-radius: var(--r-sm); overflow: hidden; background: var(--pierre); position: relative; }
    .vignette-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.25s ease; }
    /* L'onglet actif porte un bandeau plein sous son image : repérable sans
       avoir à distinguer les teintes. */

    /* Vignette d'une affiche au format portrait : meme traitement que la grande
       image — montree en entier, sur un fond tire d'elle-meme. Sans cela, une
       affiche A4 n'apparait ici que par sa tranche centrale. */
    .vignette-media.est-portrait::before {
      content: ""; position: absolute; inset: 0; z-index: 0;
      background-image: var(--affiche); background-size: cover; background-position: center;
      filter: blur(14px) saturate(1.1) brightness(0.94); transform: scale(1.2);
    }
    .vignette-media.est-portrait { position: relative; }
    .vignette-media.est-portrait img { object-fit: contain; position: relative; z-index: 1; }
    .carrousel-vignette.est-active .vignette-media { box-shadow: 0 0 0 2px var(--accent); }
    .carrousel-vignette.est-active .vignette-media::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent);
    }
    .carrousel-vignette:not(.est-active) .vignette-media img { opacity: 0.72; }
    .carrousel-vignette:hover .vignette-media img { opacity: 1; }

    .vignette-corps { display: block; margin-top: 6px; min-width: 0; }
    .vignette-date { display: block; font-size: var(--t-4xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); }
    .vignette-titre { display: -webkit-box; margin-top: 2px; font-family: 'Fraunces', Georgia, serif; font-size: var(--t-2xs); font-weight: 600; line-height: 1.22; color: var(--marine);
                      -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .carrousel-vignette.est-active .vignette-titre { color: var(--accent-fonce); }

    /* --- Le pied : compteur, pause, lien vers l'archive ----------------- */
    .carrousel-pied { display: flex; align-items: center; gap: 14px; margin-top: -2px; }
    .carrousel-compteur { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 1px; color: var(--gris); margin: 0; }
    .carrousel-pause {
      display: inline-flex; align-items: center; justify-content: center;
      width: 26px; height: 26px; padding: 0; cursor: pointer; flex-shrink: 0;
      background: none; border: 0; color: var(--gris);
      transition: color 0.2s ease; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: -9px -11px; }
    .carrousel-pause:hover { color: var(--accent); }
    .carrousel-pause:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
    .carrousel-pause svg { width: 15px; height: 15px; }
    .carrousel-pied .fil-toutes { margin: 0; margin-left: auto; padding-left: 0; }

    .carrousel.est-seule .carrousel-cote { margin-top: 18px; padding-top: 0; border-top: 0; }

    /* Sans vignettes, la colonne du milieu de la barre de navigation est vide :
       les deux fleches se retrouvaient seules aux deux bouts d'une bande de
       973 px. Flèches, compteur et lien tiennent desormais sur une seule ligne
       de commandes, et la hauteur ainsi gagnee revient a la carte. */
    .carrousel.sans-vignettes .carrousel-cote { flex-direction: row; align-items: center; gap: 14px; }
    .carrousel.sans-vignettes .carrousel-nav { display: flex; gap: 8px; }
    .carrousel.sans-vignettes .carrousel-pied { flex: 1; margin-top: 0; }

    @media (max-width: 760px) {
      .une-lien { grid-template-columns: 1fr; }
      .une-media { min-height: 0; aspect-ratio: 16/10; }
      /* Une affiche verticale dans un cadre 16/10 ne remplissait que 44 % de la
         largeur : 150 px de large sur un telephone, illisible, le reste en
         bandes floues. Sur petit ecran elle prend donc toute la largeur et
         impose sa propre hauteur. Le plafond evite qu'une affiche tres allongee
         ne pousse le texte hors de l'ecran. */
      /* Une affiche verticale dans un cadre horizontal laisse forcement du vide :
         a 38vh il restait 60 px de gris de chaque cote, et la carte paraissait
         inachevee. Le cadre disparait donc et l'affiche impose sa proportion —
         pleine largeur, aucune bande. Le chapeau est resserre en regard, pour
         que titre et texte restent avec elle sur le meme ecran. */
      .une-media.est-portrait { aspect-ratio: auto; max-height: none; background: none; }
      .une-media.est-portrait::before { display: none; }
      .une-corps p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
      .une-media.est-portrait img {
        position: static; inset: auto; width: 100%; height: auto;
        max-height: none; object-fit: contain; filter: none;
      }
      .une-corps { align-self: start; }
    }
    @media (max-width: 900px) {
      .actu-trio { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 0; }
      .carrousel-principal, .carrousel-cote, .fil-colonne { grid-column: 1; grid-row: auto; }
      .fil-colonne { margin-top: 10px; }
      .carrousel-vignette:hover { transform: none; }

      /* Bande horizontale : empilées, les cinq vignettes prenaient 446 px de
         hauteur avant qu'on atteigne le fil. Couchées, elles en prennent 150
         et se parcourent au doigt — le geste qu'on attend d'une rangée sur un
         téléphone. La barre de défilement est masquée : elle n'apprend rien
         que le débord des cartes ne montre déjà. */
      .carrousel-liste {
        display: flex; gap: 10px;
        overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; padding-bottom: 2px;
      }
      .carrousel-liste::-webkit-scrollbar { display: none; }
      .carrousel-vignette { flex: 0 0 146px; scroll-snap-align: start; }
    
  /* Le pouce pousse la carte : les flèches et le compteur n'occupaient plus
     qu'une rangée entière sous l'article pour une fonction que le geste
     assure mieux. La rangée disparaît avec eux quand elle ne porte pas la
     bande de vignettes. */
  .carrousel .carrousel-fleche { display: none; }
  .carrousel .carrousel-compteur { display: none; }
  .carrousel .carrousel-points { display: flex; }
  .carrousel.sans-vignettes .carrousel-nav { display: none; }
}

/* Une tuile sans destination. Elle garde sa place dans la grille pour ne pas
   déséquilibrer la rubrique, mais rien n'y invite au clic : pas de curseur en
   main, pas de soulèvement au survol, pas de flèche. */
.vtile.est-inerte { cursor: default; }
.vtile.est-inerte:hover { transform: none; }
.vtile.est-inerte:hover .vph { transform: none; }