/* ============================================================ MUZY — Design system partagé (pages intérieures) Identité : marine #071F32 · sarcelle #0C6469 · fond #F4F8FC Typo : Fraunces (display) + Montserrat (UI/texte) ============================================================ */ *, *::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, h4, .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); } /* ---------- Boutons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; font-family: 'Montserrat', system-ui, sans-serif; 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); } /* Meme rendu que .btn-primary : un bouton d'action est marine et blanc, partout. Les deux noms coexistent le temps que les gabarits s'alignent. */ .btn-dark { background: var(--marine); color: #fff; } .btn-dark:hover { background: var(--marine-2); transform: translateY(-2px); } .btn-outline { background: transparent; color: var(--marine); border-color: var(--sable); } .btn-outline:hover { border-color: var(--marine); background: var(--pierre); } /* ============================================================ HEADER (sticky, solide — pages intérieures) ============================================================ */ .header { position: sticky; top: 0; z-index: 100; background: var(--blanc-fort); backdrop-filter: blur(14px); border-bottom: 1px solid var(--sable); box-shadow: var(--shadow-sm); } .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: 68px; } .logo { display: flex; align-items: center; gap: 12px; } .logo svg { width: 38px; height: 44px; 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: var(--marine); } .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(--gris); margin-top: -2px; } .nav-main { display: flex; gap: 4px; } .nav-main > li { position: relative; } .nav-main > li > a { display: flex; align-items: center; height: 68px; padding: 0 16px; font-size: var(--t-sm); font-weight: 600; color: var(--marine); position: relative; transition: color 0.3s var(--ease); } .nav-main > li > a::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 18px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); } .nav-main > li:hover > a::after, .nav-main > li.current > a::after { transform: scaleX(1); } .nav-main > li.current > a { color: var(--marine); } .dropdown { position: absolute; top: calc(100% - 8px); 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: var(--marine); border: 1px solid var(--marine); color: #fff; cursor: pointer; font-family: inherit; font-size: var(--t-xs); font-weight: 600; padding: 10px 18px; border-radius: var(--r-sm); transition: all 0.3s var(--ease); } .icon-btn:hover { background: var(--accent); border-color: var(--accent); } .icon-btn svg { width: 17px; height: 17px; } .burger { display: none; width: 46px; height: 46px; border-radius: var(--r-sm); background: var(--marine); border: 1px solid var(--marine); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .burger span { display: block; width: 20px; height: 2px; background: #fff; } /* ============================================================ FIL D'ARIANE ============================================================ */ /* L'en-tete d'une page interieure occupait 502 px sur grand ecran et 439 px sur telephone, soit plus de la moitie du premier ecran avant le moindre contenu. Le fil d'ariane et le bloc de titre se resserrent ; le corps des titres, lui, ne bouge pas — c'est la voix du site. */ .breadcrumb { max-width: var(--maxw); margin: 0 auto; padding: clamp(9px, 1vw, 12px) clamp(18px,4vw,44px); font-size: var(--t-xs); color: var(--gris); } .breadcrumb a { color: var(--gris); transition: color 0.2s ease; } .breadcrumb a:hover { color: var(--accent); } .breadcrumb span { margin: 0 8px; opacity: 0.6; } /* ============================================================ BANDEAU DE PAGE (page-hero) ============================================================ */ .page-hero { position: relative; background: var(--marine); color: #fff; overflow: hidden; padding: clamp(52px, 8vw, 96px) clamp(18px,4vw,44px) clamp(44px, 6vw, 72px); text-align: center; } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(800px 380px at 20% -10%, rgba(12,100,105,0.22), transparent 60%); } .page-hero::after { content: 'M'; position: absolute; right: 2vw; bottom: -12vw; font-family: 'Fraunces', Georgia, serif; font-size: 34vw; line-height: 1; font-weight: 600; color: rgba(255,255,255,0.03); pointer-events: none; } .page-hero > * { position: relative; z-index: 1; } .page-hero .eyebrow { color: #fff; justify-content: center; margin-bottom: 16px; } .page-hero .eyebrow::before { background: var(--accent); } .page-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.06; } .page-hero h1 em { font-style: normal; font-weight: inherit; color: var(--or); } .page-hero p { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--blanc-moyen); max-width: 60ch; margin: 16px auto 0; } /* --- Variante photo (cinématique) --- */ .page-hero.ph-photo { padding-top: clamp(70px, 10vw, 128px); padding-bottom: clamp(48px, 7vw, 84px); } .page-hero.ph-photo::before, .page-hero.ph-photo::after { display: none; } .page-hero .page-hero-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; } .page-hero .page-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,19,31,0.50) 0%, rgba(4,19,31,0.30) 42%, rgba(4,19,31,0.86) 100%); } /* --- Variante claire (éditoriale, pages sans photo) --- */ .page-hero.ph-light { background: var(--pierre); color: var(--marine); border-bottom: 1px solid var(--sable); } .page-hero.ph-light::before { background: radial-gradient(680px 300px at 18% -20%, rgba(12,100,105,0.10), transparent 60%); } .page-hero.ph-light::after { color: rgba(7,31,50,0.045); } .page-hero.ph-light .eyebrow { color: var(--accent); } .page-hero.ph-light h1 { color: var(--marine); } .page-hero.ph-light h1 em { color: var(--accent); } .page-hero.ph-light p { color: var(--gris); } /* ============================================================ EN-TÊTE DE PAGE RÉINVENTÉ (léger, éditorial, aligné au contenu) + sous-navigation d'ancres sticky (l'apport) ============================================================ */ .page-head { max-width: var(--maxw); margin: 0 auto; padding: clamp(22px, 3vw, 38px) clamp(18px, 4vw, 44px) clamp(18px, 2.2vw, 26px); } .page-head .eyebrow { margin-bottom: 12px; } .page-head h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 500; color: var(--marine); letter-spacing: -0.018em; line-height: 1.04; max-width: 28ch; } .page-head h1 em { font-style: normal; font-weight: inherit; color: var(--accent); } .page-head .lead { margin-top: 12px; color: var(--gris); font-size: clamp(1.02rem, 1.6vw, 1.2rem); line-height: 1.6; max-width: 62ch; } /* Sous-navigation d'ancres : barre horizontale collante sous l'en-tête. Les étiquettes sont volontairement courtes — « Salle des fêtes » plutôt que « Location de la salle des fêtes » — pour que la barre tienne sans défiler. Voir « data-onglet » dans muzy_section_nav(). */ .page-nav { position: sticky; top: 67px; z-index: 60; background: var(--blanc-fort); backdrop-filter: blur(12px); border-top: 1px solid var(--sable); border-bottom: 1px solid var(--sable); box-shadow: 0 6px 14px -10px rgba(7,31,50,0.30); } .page-nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(18px, 4vw, 44px); display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .page-nav-inner::-webkit-scrollbar { display: none; } /* Deux registres dans la même barre : les pages de la rubrique, qui font autorité, et les sections de la page, plus légères. La différence se joue sur la couleur et la graisse, pas sur la taille — une barre à deux hauteurs se lirait comme deux barres. */ .page-nav-rubrique { flex-shrink: 0; align-self: center; padding: 0 14px 0 0; margin-right: 2px; font-family: 'Montserrat', system-ui, sans-serif; font-size: var(--t-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; color: var(--gris); white-space: nowrap; } .page-nav-filet { flex-shrink: 0; align-self: center; width: 1px; height: 18px; margin: 0 10px; background: var(--sable); } .page-nav a.pn-page { color: var(--marine); } .page-nav a.pn-page.ici { color: var(--accent); border-bottom-color: var(--accent); } .page-nav a.pn-section { font-weight: 500; color: var(--gris); } .page-nav a.pn-section:hover { color: var(--marine); } .page-nav a { padding: 15px 15px; font-family: 'Montserrat', system-ui, sans-serif; font-size: var(--t-xs); font-weight: 600; color: var(--gris); white-space: nowrap; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .page-nav a:hover { color: var(--marine); } .page-nav a.active { color: var(--marine); border-bottom-color: var(--accent); } .page-content h2[id], .section-anchor { scroll-margin-top: 132px; } /* ============================================================ MISE EN PAGE 2 COLONNES (contenu large + aside collant) Casse la « colonne raide » : utilise l'espace, ancre les infos utiles ============================================================ */ .page-layout { max-width: var(--maxw); margin: 0 auto; padding: clamp(38px, 5vw, 60px) clamp(18px, 4vw, 44px) clamp(60px, 8vw, 92px); display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(34px, 4vw, 62px); align-items: start; } .page-layout > .page-content { max-width: none; margin: 0; padding: 0; } .page-aside { position: sticky; top: 132px; display: flex; flex-direction: column; gap: 18px; } .aside-card { background: var(--pierre); border: 1px solid var(--sable); border-radius: var(--r-md); padding: 22px 24px; } .aside-card h3 { font-family: 'Montserrat', system-ui, sans-serif; font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 1.4px; color: var(--gris); margin-bottom: 8px; font-weight: 700; } .aside-card .a-item { padding: 13px 0; border-top: 1px solid var(--sable); font-size: var(--t-sm); color: var(--gris); line-height: 1.55; } .aside-card .a-item:first-of-type { border-top: none; } .aside-card .a-item strong { display: block; font-size: var(--t-3xs); text-transform: uppercase; letter-spacing: 1px; color: var(--gris); margin-bottom: 3px; font-weight: 700; } .aside-card .a-item a { color: var(--bleu-lien); font-weight: 600; } .aside-card .btn { width: 100%; justify-content: center; margin-top: 16px; } @media (max-width: 900px) { .page-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } .page-aside { position: static; } } /* ============================================================ CONTENU (prose) ============================================================ */ .page-content, .page-content p, .page-content li, .page-content td, .page-content th, .page-content h1, .page-content h2, .page-content h3, .page-content h4 { overflow-wrap: break-word; } .page-content a, .page-content code { overflow-wrap: anywhere; } .page-content { max-width: 840px; margin: 0 auto; padding: clamp(44px, 6vw, 76px) clamp(18px, 4vw, 44px) clamp(60px, 8vw, 96px); } .page-content > *:first-child { margin-top: 0; } .page-content h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 600; color: var(--marine); line-height: 1.14; margin: 48px 0 18px; padding-left: 18px; position: relative; letter-spacing: -0.01em; } /* Le filet marque le titre, il ne le double pas : 4 px sous un corps de 24 px faisaient un rapport de 1 à 6, qui se lisait comme un bloc. */ .page-content h2::before { content: ''; position: absolute; left: 0; top: 0.2em; bottom: 0.2em; width: 3px; border-radius: 3px; background: var(--accent); } .page-content h3 { font-size: var(--t-lg); font-weight: 600; color: var(--marine); margin: 30px 0 12px; } .page-content p { font-size: var(--t-base); color: var(--gris); line-height: 1.85; margin-bottom: 16px; } .page-content p strong, .page-content li strong { color: var(--marine); font-weight: 700; } .page-content ul { margin: 0 0 18px 4px; } /* Un titre entièrement cliquable est une cible à part entière, pas un lien au fil du texte : sa zone tactile doit atteindre les 24 px du WCAG 2.5.8. En ligne, elle se limitait à la hauteur du texte — 23 px, un pixel trop court. inline-block lui rend la hauteur de sa ligne sans changer ni sa largeur ni son retour à la ligne. */ .page-content h3 > a:only-child { display: inline-block; padding-block: 3px; } .page-content ul li { position: relative; padding-left: 26px; font-size: var(--t-base); color: var(--gris); line-height: 1.75; margin-bottom: 10px; } .page-content ul li::before { content: ''; position: absolute; left: 4px; top: 0.62em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); } .page-content ol { margin: 0 0 18px 22px; } /* Annuaire : le nom sur sa ligne, les coordonnées sous lui. En puces, le nom en gras, l'adresse, le téléphone et le courriel s'enchaînaient dans une seule phrase qui se repliait n'importe où : on lisait un paragraphe là où on cherchait une entrée d'annuaire. Le filet sépare les entrées mieux qu'une puce, parce qu'il court sur toute la largeur et marque donc la fin de la précédente autant que le début de la suivante. */ .page-content ul.contacts { list-style: none; margin: 20px 0 26px; padding: 0; } .page-content ul.contacts > li { position: relative; margin: 0; padding: 14px 0; border-top: 1px solid var(--sable); line-height: 1.7; } .page-content ul.contacts > li:last-child { border-bottom: 1px solid var(--sable); } .page-content ul.contacts > li::before { content: none; } .page-content .c-nom { display: block; color: var(--marine); font-weight: 700; } .page-content .c-info { display: block; color: var(--gris); } .page-content .c-note { display: block; color: var(--gris); font-size: var(--t-sm); margin-top: 2px; } .page-content ol li { font-size: var(--t-base); color: var(--gris); line-height: 1.75; margin-bottom: 10px; } .page-content a { color: var(--bleu-lien); font-weight: 600; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } .page-content a:hover { border-bottom-color: currentColor; } /* « .page-content a » (0,1,1) l'emportait sur « .btn-primary » (0,1,0) : le texte des boutons virait au bleu du lien et se soulignait au survol. On rétablit leur couleur propre avec une spécificité supérieure. */ .page-content a.btn { border-bottom: none; } .page-content a.btn:hover { border-bottom-color: transparent; } .page-content a.btn-primary { color: #fff; } /* « .btn-ghost » n'était défini que dans home.css, pour le fond sombre du hero : sur les pages intérieures il ne restait qu'un texte sans bordure, qu'on ne reconnaissait pas comme un bouton. */ .btn-ghost { background: transparent; color: var(--marine); border-color: var(--sable); } .btn-ghost:hover { background: var(--pierre); border-color: var(--gris); } .page-content a.btn-ghost { color: var(--marine); border: 1.5px solid var(--sable); } .page-content a.btn-ghost:hover { background: var(--pierre); border-color: var(--gris); } .page-content img, /* « height: auto » est indispensable depuis que les images portent leurs dimensions réelles en attribut : sans lui, l'attribut « height » ferait loi et toutes les photos seraient étirées. Ces attributs réservent la place avant le chargement, la page ne saute plus. */ .content-img { width: 100%; height: auto; border-radius: var(--r-md); box-shadow: var(--shadow-md); margin: 26px 0; } .info-box { background: var(--pierre); border-left: 4px solid var(--accent); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 22px 26px; margin: 26px 0; font-size: var(--t-base); line-height: 1.75; color: var(--gris); } .info-box strong { color: var(--marine); } .info-box--attention { background: var(--accent-pale); border-left-color: var(--accent); } /* Parcours numéroté : une démarche décomposée en étapes ordonnées */ .parcours { list-style: none; counter-reset: etape; margin: 30px 0 34px; padding: 0; } .parcours > li { counter-increment: etape; position: relative; padding: 0 0 26px 62px; } .parcours > li::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--marine); color: #fff; font-family: 'Fraunces', Georgia, serif; font-size: var(--t-base); font-weight: 600; line-height: 1; } .parcours > li:not(:last-child)::after { content: ""; position: absolute; left: 18.5px; top: 46px; bottom: 8px; width: 1px; background: rgba(7,31,50,0.16); } .parcours > li:last-child { padding-bottom: 0; } .parcours > li > h4 { margin: 7px 0 6px; font-family: 'Fraunces', Georgia, serif; font-size: var(--t-md); color: var(--marine); font-weight: 600; } .parcours > li > p { margin: 0; } .parcours > li > p + p { margin-top: 8px; } @media (max-width: 560px) { .parcours > li { padding-left: 50px; padding-bottom: 22px; } .parcours > li::before { width: 32px; height: 32px; font-size: var(--t-sm); } .parcours > li:not(:last-child)::after { left: 15.5px; top: 40px; } .parcours > li > h4 { margin-top: 4px; font-size: var(--t-base); } } .contact-block { background: var(--pierre); border: 1px solid var(--sable); border-radius: var(--r-md); padding: 28px; margin: 28px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 24px; } .contact-block h4, .contact-block .cb-label { font-family: 'Montserrat', system-ui, sans-serif; font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: 1.2px; color: var(--gris); margin-bottom: 8px; font-weight: 700; } .contact-block p { font-size: var(--t-sm); margin: 0; color: var(--marine); } .contact-block a { color: var(--bleu-lien); font-weight: 600; } .section-anchor { scroll-margin-top: 90px; } table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: var(--t-sm); } table th { background: var(--marine); color: #fff; text-align: left; padding: 14px 18px; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: var(--t-xs); } table td { padding: 14px 18px; border-bottom: 1px solid var(--sable); color: var(--gris); } table tr:nth-child(even) td { background: var(--pierre); } /* ============================================================ GALERIE PHOTOS (« en images ») + zoom au clic ============================================================ */ .gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; grid-auto-flow: dense; gap: 14px; margin: 32px 0; } .gallery figure { position: relative; overflow: hidden; border-radius: var(--r-md); margin: 0; cursor: zoom-in; box-shadow: var(--shadow-sm); background: var(--pierre); } .gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--ease); } .gallery figure:hover img { transform: scale(1.06); } /* Ce degrade est decoratif et couvre toute la photo : sans cette ligne il intercepte le clic, et la visionneuse ne s'ouvre jamais. Le badge loupe le faisait deja, le degrade avait ete oublie. */ .gallery figure::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4,19,31,0) 45%, rgba(4,19,31,0.6) 100%); opacity: 0; transition: opacity 0.3s var(--ease); pointer-events: none; } .gallery figure:hover::before { opacity: 1; } .gallery .zoom-badge { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--blanc-fort); color: var(--marine); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(-6px); transition: all 0.3s var(--ease); pointer-events: none; } .gallery figure:hover .zoom-badge { opacity: 1; transform: none; } .gallery .zoom-badge svg { width: 17px; height: 17px; } .gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px; color: #fff; font-size: var(--t-xs); font-weight: 500; opacity: 0; transform: translateY(8px); transition: all 0.3s var(--ease); } .gallery figure:hover figcaption { opacity: 1; transform: none; } .gallery .g-wide { grid-column: span 2; } .gallery .g-tall { grid-row: span 2; } .gallery .g-big { grid-column: span 2; grid-row: span 2; } /* image de contenu : cliquable pour agrandir */ .content-img { cursor: zoom-in; } @media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 10px; } .gallery .g-big { grid-column: span 2; grid-row: span 2; } .gallery .g-wide { grid-column: span 2; } } @media (max-width: 460px) { .gallery { grid-template-columns: 1fr; grid-auto-rows: 220px; } .gallery .g-wide, .gallery .g-big, .gallery .g-tall { grid-column: auto; grid-row: auto; } } /* ---------- LIGHTBOX ---------- */ .lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(4,19,31,0.95); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease); } .lightbox.open { opacity: 1; visibility: visible; } .lightbox .lb-stage { max-width: 92vw; max-height: 84vh; display: flex; flex-direction: column; align-items: center; gap: 16px; } .lightbox img { max-width: 92vw; max-height: 78vh; object-fit: contain; border-radius: var(--r-sm); box-shadow: 0 40px 100px rgba(4,19,31,0.50); transition: opacity 0.2s ease; } .lightbox .lb-cap { color: var(--blanc-fort); font-size: var(--t-sm); text-align: center; max-width: 60ch; min-height: 1.2em; } .lb-btn { position: absolute; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); color: #fff; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); transition: all 0.25s var(--ease); } .lb-btn:hover { background: #fff; color: var(--marine); border-color: #fff; } .lb-btn svg { width: 22px; height: 22px; } .lb-close { top: 22px; right: 22px; } .lb-prev { left: 22px; top: 50%; transform: translateY(-50%); } .lb-next { right: 22px; top: 50%; transform: translateY(-50%); } .lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.06); } .lb-count { position: absolute; top: 28px; left: 28px; color: var(--blanc-moyen); font-size: var(--t-xs); font-weight: 600; letter-spacing: 1px; } @media (max-width: 640px) { .lb-prev { left: 10px; } .lb-next { right: 10px; } .lb-btn { width: 44px; height: 44px; } } /* Grille de cartes générique (élus, services, partenaires…) */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 28px 0; } .p-card { background: #fff; border: 1px solid var(--sable); border-radius: var(--r-md); padding: 26px; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } .p-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .p-card h3 { font-size: var(--t-md); color: var(--marine); } .p-card p { font-size: var(--t-sm); color: var(--gris); margin-top: 6px; } /* ============================================================ CATALOGUE COMPTES-RENDUS (recherche + filtre par année) ============================================================ */ .catalog-toolbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin: 10px 0 22px; } .catalog-search { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 10px; background: var(--pierre); border: 1px solid var(--sable); border-radius: var(--r-md); padding: 0 16px; height: 50px; } .catalog-search svg { opacity: 0.4; flex-shrink: 0; } .catalog-search input { flex: 1; border: none; background: none; outline: none; font-family: inherit; font-size: var(--t-sm); color: var(--marine); } .catalog-search input::placeholder { color: var(--gris); } .year-filter { display: flex; flex-wrap: wrap; gap: 8px; } .year-filter button { padding: 9px 16px; border: 1px solid var(--sable); background: #fff; border-radius: 100px; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: var(--t-xs); color: var(--marine); cursor: pointer; transition: all 0.25s var(--ease); } .year-filter button:hover { border-color: var(--marine); } .year-filter button.active { background: var(--marine); color: #fff; border-color: var(--marine); } .cr-count { font-size: var(--t-xs); color: var(--gris); margin-bottom: 16px; } .cr-list { display: flex; flex-direction: column; gap: 12px; } .cr-item { display: flex; align-items: center; gap: 20px; background: #fff; border: 1px solid var(--sable); border-radius: var(--r-md); padding: 18px 22px; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); } .cr-item:hover { border-color: var(--marine); box-shadow: var(--shadow-md); transform: translateY(-2px); } .cr-date { flex-shrink: 0; width: 66px; height: 66px; border-radius: var(--r-sm); background: var(--marine); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; } .cr-date::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 10px; height: 2px; background: var(--accent); } .cr-date .d { font-family: 'Fraunces', Georgia, serif; font-size: var(--t-xl); font-weight: 600; line-height: 1; } .cr-date .m { font-size: var(--t-4xs); text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; } .cr-body { flex: 1; min-width: 0; } .cr-body h3 { font-size: var(--t-md); font-weight: 600; color: var(--marine); } .cr-body .cr-meta { font-size: var(--t-xs); color: var(--gris); margin-top: 2px; } .cr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .cr-tag { font-size: var(--t-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent); background: rgba(12,100,105,0.08); padding: 3px 10px; border-radius: 100px; } .cr-dl { flex-shrink: 0; } .cr-dl .btn { padding: 11px 18px; font-size: var(--t-xs); } .cr-empty { text-align: center; padding: 50px 20px; color: var(--gris); border: 1px dashed var(--sable); border-radius: var(--r-md); } @media (max-width: 620px) { .cr-item { flex-wrap: wrap; } .cr-dl { width: 100%; } .cr-dl .btn { width: 100%; justify-content: center; } } /* ============================================================ ÉLUS — carte maire + grille conseillers (médaillons à initiales) ============================================================ */ .maire-card { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; background: var(--marine); color: #fff; border-radius: var(--r-lg); padding: clamp(26px, 4vw, 46px); margin: 28px 0; position: relative; overflow: hidden; } .maire-card::before { content: 'M'; position: absolute; right: -2vw; bottom: -6vw; font-family: 'Fraunces', Georgia, serif; font-size: 22vw; line-height: 1; font-weight: 600; color: rgba(255,255,255,0.03); pointer-events: none; } .maire-card > * { position: relative; z-index: 1; } /* Les avatars sont désormais des photographies. « .page-content img » impose width:100% et une marge : ces sélecteurs descendants passent devant, mais il faut remettre la marge et l'ombre à zéro explicitement. Le cadrage vertical est décalé vers le haut, les visages n'étant pas au centre du portrait. */ .maire-card .avatar { width: 112px; height: 112px; margin: 0; border-radius: 50%; object-fit: cover; object-position: center 28%; flex-shrink: 0; box-shadow: 0 10px 30px rgba(7,31,50,0.45), inset 0 0 0 3px var(--accent); } .maire-card .maire-badge { display: inline-block; background: var(--accent); color: #fff; font-family: 'Montserrat', system-ui, sans-serif; font-size: var(--t-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; padding: 5px 13px; border-radius: 100px; } .maire-card h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 600; color: #fff; margin-top: 12px; } .maire-card .maire-titre { font-family: 'Fraunces', Georgia, serif; font-style: italic; color: var(--or); margin-top: 4px; font-size: var(--t-base); } /* Le mot du maire tient maintenant en quatre paragraphes, non plus en une phrase : il lui faut un interligne de lecture et de l'air entre eux. */ .maire-card blockquote.maire-mot p { margin: 0 0 12px; font-size: var(--t-base); line-height: 1.75; } .maire-card blockquote.maire-mot p:last-child { margin-bottom: 0; } .maire-card blockquote.maire-mot p:first-child { font-weight: 600; } /* Un intitulé plutôt qu'une phrase : « Elle préside toutes les commissions : » demandait une lecture pour dire ce que trois mots disent mieux, et la tournure à la troisième personne jurait sous un texte signé par elle. */ .maire-card .maire-commissions { margin: 22px 0 12px; font-family: 'Montserrat', system-ui, sans-serif; font-size: var(--t-3xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blanc-moyen); } .maire-card blockquote { border-left: 3px solid var(--accent); padding-left: 20px; margin: 20px 0; font-family: 'Fraunces', Georgia, serif; font-style: italic; color: var(--blanc-fort); font-size: var(--t-md); line-height: 1.55; } .maire-card p { color: var(--blanc-moyen); font-size: var(--t-sm); } .maire-card p strong { color: #fff; } .maire-card .commission-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .maire-card .commission-tags span { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; font-size: var(--t-2xs); font-weight: 500; padding: 5px 12px; border-radius: 100px; } @media (max-width: 620px) { .maire-card { grid-template-columns: 1fr; } } .elus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 16px; margin: 28px 0; } .elu-card { background: #fff; border: 1px solid var(--sable); border-radius: var(--r-md); padding: 24px 22px; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); } .elu-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; } .elu-card .avatar { width: 96px; height: 96px; margin: 0; border-radius: 50%; object-fit: cover; object-position: center 26%; background: var(--pierre); box-shadow: inset 0 0 0 1px var(--sable); transition: box-shadow 0.3s ease; } .elu-card:hover .avatar { box-shadow: inset 0 0 0 2px var(--accent); } .elu-card .elu-metier { font-size: var(--t-2xs); color: var(--gris); margin-top: 2px; line-height: 1.45; } .elu-card h3 { font-size: var(--t-md); font-weight: 600; color: var(--marine); margin-top: 15px; line-height: 1.25; } .elu-card .elu-role { font-size: var(--t-2xs); font-weight: 600; color: var(--accent); margin-top: 3px; } .elu-card .elu-commissions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .elu-card .elu-commissions span { font-size: var(--t-3xs); color: var(--gris); background: var(--pierre); border: 1px solid var(--sable); padding: 4px 9px; border-radius: 100px; } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--marine); color: var(--blanc-moyen); padding-top: clamp(56px, 7vw, 88px); } .footer-inner, .footer .wrap { max-width: var(--maxw); margin: 0 auto; padding-left: clamp(18px,4vw,44px); padding-right: clamp(18px,4vw,44px); } .footer-top, .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.12); } .footer h3, .footer h4, .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: 16px; } .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: 16px; line-height: 1.8; font-size: var(--t-sm); } .footer p, .footer li { font-size: var(--t-sm); color: var(--blanc-moyen); line-height: 1.7; } .footer a:hover { color: #fff; } .footer ul li { margin-bottom: 10px; } .footer ul li a { transition: padding-left 0.25s var(--ease); } .footer ul li a:hover { padding-left: 8px; } .footer .urg strong, .footer strong { color: #fff; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding: 24px 0; font-size: var(--t-xs); color: var(--blanc-faible); } .footer-bottom-links { display: flex; flex-wrap: wrap; gap: 20px; } /* ============================================================ DRAWER MOBILE + RECHERCHE ============================================================ */ .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; } /* Le panneau est visé par son identifiant et non par sa classe : WordPress ajoute « search » au sur une page de résultats, et une règle « .search » masquait alors la page entière — toute recherche rendait un écran blanc. Même prudence pour le tiroir : « page », « home », « single », « archive » sont eux aussi des classes que WordPress pose sur le . */ /* ============================================================ RÉVÉLATIONS AU SCROLL ============================================================ */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s 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; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .nav-main, .icon-btn .lbl { display: none; } .burger { display: flex; } .footer-top, .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 620px) { .footer-top, .footer-grid { grid-template-columns: 1fr; } .contact-block { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* Documents joints à une information PanneauPocket */ .pp-docs { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .pp-docs a { display: inline-flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--pierre); border: 1px solid var(--sable); border-radius: var(--r-md); color: var(--marine); font-weight: 600; transition: border-color 0.25s var(--ease), background 0.25s var(--ease); } .pp-docs a:hover { border-color: var(--marine); background: #fff; } .pp-docs svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent); } /* Carte « Dernières informations » de la colonne latérale */ .aside-fil ul { list-style: none; margin: 0; padding: 0; } .aside-fil li { border-top: 1px solid var(--sable); } .aside-fil li:first-child { border-top: none; } .aside-fil a { display: block; padding: 14px 0; } .aside-fil li:first-child a { padding-top: 6px; } .af-kicker { display: block; font-size: var(--t-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent); } .af-titre { display: block; margin-top: 5px; font-family: 'Fraunces', Georgia, serif; font-size: var(--t-base); font-weight: 600; line-height: 1.25; color: var(--marine); } .af-titre.t-caps { font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.035em; } .aside-fil a:hover .af-titre { color: var(--accent); } .af-tout { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--marine); transition: gap 0.25s var(--ease); } .af-tout:hover { gap: 12px; color: var(--accent); } .af-tout svg { width: 13px; height: 13px; } /* 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; } } /* Vignette d'une information dans la liste. Deux pièges ici : « fil-thumb » n'existe que dans home.css, donc inutilisable sur les pages intérieures ; et « .page-content img » impose width:100% avec une spécificité supérieure à une simple classe. D'où le sélecteur descendant et la remise à zéro de la marge et de l'ombre. */ .cr-item .cr-thumb { width: 56px; height: 56px; margin: 0; border-radius: var(--r-sm); object-fit: cover; box-shadow: none; flex-shrink: 0; } /* Catalogue des comptes-rendus : compléments au style repris de la maquette */ .cr-item[hidden] { display: none; } .cr-poids { display: block; margin-top: 8px; font-size: var(--t-2xs); color: var(--gris); text-align: center; } .year-filter button { font-family: inherit; } /* Agenda : liste des dates à venir, reprise du style des cartes de l'accueil */ .agenda-liste { display: flex; flex-direction: column; gap: 14px; } .agenda-liste .ev { display: grid; grid-template-columns: 78px 1fr; gap: 20px; align-items: start; background: #fff; border: 1px solid var(--sable); border-radius: var(--r-md); padding: 20px 24px; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); } .agenda-liste .ev:hover { border-color: var(--marine); box-shadow: var(--shadow-md); transform: translateY(-2px); } .agenda-liste .ev-date { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--marine); color: #fff; border-radius: var(--r-sm); padding: 12px 0; } .agenda-liste .ev-date .j { font-family: 'Fraunces', Georgia, serif; font-size: var(--t-2xl); font-weight: 600; line-height: 1; } .agenda-liste .ev-date .m { font-size: var(--t-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; margin-top: 4px; } .agenda-liste .tag { display: inline-block; font-size: var(--t-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent); } .agenda-liste .ev-body h3 { font-family: 'Fraunces', Georgia, serif; font-size: var(--t-lg); font-weight: 600; color: var(--marine); margin-top: 4px; } .agenda-liste .meta { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: var(--t-xs); color: var(--gris); } .agenda-liste .meta svg { width: 15px; height: 15px; flex-shrink: 0; } @media (max-width: 480px) { .agenda-liste .ev { grid-template-columns: 62px 1fr; gap: 14px; padding: 16px 18px; } } /* ============================================================ FIGURE DOCUMENTAIRE Une image qui sert le propos, par opposition à « .gallery » qui compose une mosaïque décorative et masque ses légendes jusqu'au survol. Ici la légende porte l'information et reste lisible sans interaction. ============================================================ */ .fig-doc { margin: 30px 0; } /* « .page-content img » impose width:100%, une marge et une ombre avec une spécificité (0-1-1) inférieure à ce sélecteur descendant (0-2-0). */ .fig-doc img { width: 100%; height: auto; margin: 0; display: block; border-radius: var(--r-md); box-shadow: var(--shadow-md); cursor: zoom-in; } .fig-doc figcaption { margin-top: 12px; padding-left: 14px; border-left: 3px solid var(--sable); font-size: var(--t-xs); line-height: 1.65; color: var(--gris); } /* Variante latérale : l'image accompagne le paragraphe au lieu de le couper. Le « clear » sur les titres empêche une image haute de déborder sur la section suivante ; sous 900 px le flottement n'a plus de sens. */ /* Section illustrée : le titre court sur les deux colonnes, le texte occupe la gauche, l'image la droite. Un flottant ferait la même chose mais imposerait un « clear » sur les titres, qui creuse un trou blanc dès que la section est plus courte que l'image — c'est le cas ici pour « Les épreuves ». */ .bloc-illustre { display: grid; grid-template-columns: 1fr 300px; gap: 0 34px; align-items: start; margin: 36px 0; } .bloc-illustre h2 { grid-column: 1 / -1; } .bloc-illustre .bi-texte > *:first-child { margin-top: 0; } .bloc-illustre .fig-doc { margin: 6px 0 0; } /* Les prises de vue verticales monteraient à plus de 400 px pour 300 px de large : on borne la hauteur, la vue entière restant accessible au clic. */ .bloc-illustre .fig-doc img { max-height: 340px; object-fit: cover; object-position: center 30%; } /* La colonne de texte partage la largeur avec la barre latérale : en dessous de 1100 px il lui resterait moins de 400 px, soit des lignes de trois mots. L'image repasse alors sous le texte, en pleine largeur et sans recadrage. */ @media (max-width: 1100px) { .bloc-illustre { grid-template-columns: 1fr; } .bloc-illustre .fig-doc { margin: 22px 0 0; } .bloc-illustre .fig-doc img { max-height: none; object-fit: fill; } } .credit-photo { margin-top: 28px; font-size: var(--t-2xs); color: var(--gris); font-style: italic; } /* ============================================================ DU CHANTIER À L'OUVRAGE Deux composants pour raconter un aménagement dans la durée, plutôt que d'aligner des vignettes : la confrontation de deux états d'un même sujet, et la suite ordonnée des étapes. ============================================================ */ /* --- Avant / après ------------------------------------------------------- Les deux prises de vue sont recadrées à la même hauteur : c'est ce qui rend la comparaison lisible, une image plus haute que l'autre ferait diversion. */ .ap-titre { font-family: 'Fraunces', Georgia, serif; font-size: var(--t-lg); font-weight: 600; color: var(--marine); margin: 44px 0 10px; } .avant-apres { display: flex; flex-direction: column; gap: 34px; margin: 22px 0 8px; } .ap-paire { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .ap-sujet { grid-column: 1 / -1; margin: 0 0 2px; font-family: 'Montserrat', system-ui, sans-serif; font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); } .ap-paire figure { position: relative; margin: 0; } .ap-paire img { width: 100%; height: 230px; margin: 0; object-fit: cover; display: block; border-radius: var(--r-md); box-shadow: var(--shadow-sm); cursor: zoom-in; } .ap-paire figcaption { margin-top: 10px; font-size: var(--t-xs); line-height: 1.55; color: var(--gris); } /* La règle est la même dans toute la page : le noir et blanc dit « travaux », la couleur dit « aujourd'hui ». Appliquée aussi ici, la comparaison se lit sans avoir à déchiffrer les étiquettes. La visionneuse, elle, rend la couleur. */ .ap-avant img { filter: grayscale(1) contrast(1.12) brightness(0.94); } .ap-chapo { font-size: var(--t-sm); line-height: 1.7; color: var(--gris); margin: 0 0 4px; max-width: 62ch; } .ap-tag { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 12px; border-radius: 100px; font-family: 'Montserrat', system-ui, sans-serif; font-size: var(--t-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: #fff; background: rgba(7,31,50,0.82); backdrop-filter: blur(3px); } .ap-tag-apres { background: var(--accent); } /* --- Les étapes du chantier ---------------------------------------------- Une bande sombre, les vues de chantier en noir et blanc profond. Le parti n'est pas décoratif : le monochrome situe ces images dans le passé et rend à la couleur des vues du parc achevé, juste en dessous, sa valeur de démonstration. Les images sont jointives, sans ombre ni coin arrondi — c'est la planche contact, pas la galerie. Le filtre ne s'applique qu'aux vignettes : la visionneuse rend la couleur. */ .chantier { background: var(--marine); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 46px); margin: 40px 0 8px; } .chantier h3 { font-family: 'Fraunces', Georgia, serif; font-size: var(--t-lg); font-weight: 600; color: #fff; margin: 0 0 10px; } .chantier > p { color: var(--blanc-faible); font-size: var(--t-sm); line-height: 1.65; margin: 0 0 26px; max-width: 46ch; } .chantier ol { list-style: none; counter-reset: etape; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .chantier li { counter-increment: etape; margin: 0; position: relative; } .chantier figure { margin: 0; } .chantier img { width: 100%; aspect-ratio: 4 / 3; margin: 0; display: block; object-fit: cover; border-radius: 0; box-shadow: none; cursor: zoom-in; filter: grayscale(1) contrast(1.12) brightness(0.92); transition: filter 0.5s var(--ease); } .chantier li:hover img { filter: grayscale(1) contrast(1.12) brightness(1.04); } /* Le numéro se lit par-dessus l'image, sans pastille : à cette taille il tient lieu de repère sans entrer en concurrence avec la photographie. */ .chantier li::before { content: counter(etape, decimal-leading-zero); position: absolute; top: 10px; left: 14px; z-index: 2; font-family: 'Fraunces', Georgia, serif; font-size: var(--t-xl); font-weight: 600; color: #fff; opacity: 0.72; text-shadow: 0 1px 10px rgba(4,19,31,0.60); pointer-events: none; } .chantier figcaption { margin-top: 10px; font-size: var(--t-xs); line-height: 1.55; color: var(--blanc-faible); } @media (max-width: 760px) { .ap-paire { grid-template-columns: 1fr; gap: 22px; } .ap-paire img { height: 200px; } .chantier ol { grid-template-columns: repeat(2, 1fr); } } /* Crédit photographique du pied de page. Le « © » est cerclé plutôt que rendu par le glyphe seul : à cette taille le caractère se confond avec une lettre. */ .footer-credit { font-size: var(--t-xs); color: var(--blanc-faible); display: inline-flex; align-items: center; gap: 2px; } .footer-credit .copy { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border: 1px solid rgba(255,255,255,0.45); border-radius: 50%; font-size: var(--t-4xs); line-height: 1; font-family: 'Montserrat', system-ui, sans-serif; } .footer-credit a { color: var(--blanc-moyen); border-bottom: 1px solid rgba(255,255,255,0.25); } .footer-credit a:hover { color: #fff; border-bottom-color: #fff; } /* ============================================================ DOCUMENT MIS EN AVANT Le dernier procès-verbal, en fiche plutôt qu'en lecteur incrusté : la page porte déjà une liste et une barre latérale. Ce qui compte tient sur une ligne — collectivité, mise en ligne, poids, statut — et l'empreigne, qui n'intéresse que celui qui vérifie, se replie. ============================================================ */ .doc-une { display: grid; grid-template-columns: 82px 1fr; gap: 22px; align-items: start; background: var(--pierre); border: 1px solid var(--sable); border-radius: var(--r-md); padding: 24px 26px; margin: 22px 0 36px; } .doc-vignette { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--accent); border-bottom: none; } .doc-vignette svg { width: 54px; height: 68px; } .doc-vignette span { font-family: 'Montserrat', system-ui, sans-serif; font-size: var(--t-4xs); font-weight: 700; letter-spacing: 1.4px; color: var(--gris); } .doc-kicker { font-family: 'Montserrat', system-ui, sans-serif; font-size: var(--t-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; color: var(--accent); } /* Le filet vertical des titres de section est pose a « left: 0 » ; ailleurs une marge gauche lui fait place, mais ici le padding est remis a zero et il retombait sur la premiere lettre. Une fiche document a deja son etiquette (« Reglement », « Formulaire ») : le filet n'y a pas d'emploi. */ .doc-une h2 { font-size: var(--t-lg); margin: 6px 0 0; border: 0; padding: 0; } .doc-une h2::before { display: none; } .doc-ligne { margin: 8px 0 0; font-size: var(--t-xs); color: var(--gris); line-height: 1.7; } .doc-ligne span { opacity: 0.45; margin: 0 3px; } .doc-statut { color: var(--vert-valide); font-weight: 600; opacity: 1; } .doc-statut::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--vert-valide); margin-right: 5px; } .doc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .doc-actions .btn { padding: 11px 20px; font-size: var(--t-xs); } .doc-verif { margin-top: 16px; } .doc-verif summary { cursor: pointer; font-size: var(--t-2xs); font-weight: 600; color: var(--gris); } .doc-verif summary:hover { color: var(--marine); } .doc-verif p { margin: 10px 0 0; font-size: var(--t-2xs); line-height: 1.6; color: var(--gris); } /* L'empreinte se lit par paires : une chasse fixe évite de confondre 0 et O. */ .doc-empreinte { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: var(--t-2xs); word-spacing: 2px; color: var(--gris); } @media (max-width: 620px) { .doc-une { grid-template-columns: 1fr; gap: 14px; } .doc-vignette { flex-direction: row; justify-content: flex-start; } .doc-vignette svg { width: 32px; height: 40px; } } /* ============================================================ PAGE D'UNE INFORMATION (PanneauPocket) ============================================================ */ .pp-publication { margin-top: 14px; font-size: var(--t-xs); color: var(--gris); } .pp-publication span { opacity: 0.45; margin: 0 5px; } /* Le premier paragraphe porte l'essentiel d'un avis communal : il se lit un cran plus grand, sans pour autant devenir un chapô éditorial. */ .page-content > p:first-of-type { font-size: var(--t-md); line-height: 1.75; } .pp-retour { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--sable); } .pp-retour a { display: inline-flex; align-items: center; gap: 9px; font-size: var(--t-xs); font-weight: 600; color: var(--gris); border-bottom: 0; } .pp-retour a:hover { color: var(--accent); } .pp-retour svg { width: 16px; height: 16px; } /* Bouton de validation de la recherche. */ /* ============================================================ SECTIONS REPLIABLES Le titre reste un titre — même graisse, même fonte, même rang dans le plan du document — seul s'ajoute le chevron qui annonce le pli. La première section est ouverte : une page ne doit jamais s'ouvrir sur une liste de titres sans un mot de contenu. ============================================================ */ /* L'identifiant a migré du

vers le
: le décalage de défilement doit suivre, sinon l'ancre cale le titre sous la barre collante. */ details.sect { border-bottom: 1px solid var(--sable); scroll-margin-top: 132px; } details.sect:first-of-type { border-top: 1px solid var(--sable); } /* Le rang d'un accordeon est la cible tactile principale de chaque page de contenu. A 4 px de marge il mesurait 35 px de haut sur telephone, sous le minimum de 44 px — et, sur grand ecran, un titre de 31 px frolait les filets. La marge suit donc la largeur : 12 px sur telephone, 16 px sur bureau. */ details.sect > summary { display: flex; align-items: center; gap: 14px; padding: clamp(12px, 1.2vw, 16px) 0; cursor: pointer; list-style: none; } details.sect > summary::-webkit-details-marker { display: none; } details.sect > summary:hover h2 { color: var(--accent); } details.sect > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-sm); } details.sect > summary h2 { flex: 1; margin: 0; transition: color 0.25s var(--ease); } /* Le chevron pivote à l'ouverture. Dessiné en bordures plutôt qu'en SVG pour rester net à toute taille et suivre la couleur du texte. */ details.sect > summary::after { content: ''; flex-shrink: 0; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.3s var(--ease), border-color 0.25s ease; } details.sect[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); } details.sect > summary:hover::after { border-color: var(--accent); } /* Le corps respire un peu plus, pour rester proportionne au rang elargi. */ .sect-corps { padding: 6px 0 30px; } .sect-corps > *:first-child { margin-top: 0; } /* Le titre est passé dans le résumé : les marges hautes prévues pour un h2 en flux creuseraient un vide en tête de section. */ .sect-corps > h3:first-child { margin-top: 4px; } /* À l'impression, une section repliée n'imprimerait que son titre. On force l'ouverture : celui qui imprime veut la page entière, pas son sommaire. */ @media print { details.sect { border: 0; } details.sect > summary { cursor: auto; } details.sect > summary::after { display: none; } details.sect > .sect-corps { display: block !important; } } /* ============================================================ STYLES PROPRES À CERTAINES PAGES Ces règles vivaient dans un