/* ===================================================================== Mairie de Saint-Pancrace — Feuille de styles Design hybride : socle institutionnel (DSFR) + identité terroir Périgord Accessibilité visée : RGAA / WCAG AA-AAA ===================================================================== */ /* ---------- Polices ---------- */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Lexend:wght@400;500;600;700&family=Libre+Bodoni:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Public+Sans:wght@300;400;500;600;700&display=swap'); /* ---------- Tokens de design ---------- */ :root { /* Socle institutionnel */ --bleu-france: #000091; /* bleu de l'État (DSFR) */ --bleu-france-hover: #1212ff; --navy: #1b2b4b; /* bleu profond, titres */ --navy-700: #243a63; /* Terroir Périgord */ --perigord-vert: #3a6b4f; /* vert forêt / châtaignier */ --perigord-vert-700: #2c5440; --ocre: #c08a3e; /* pierre dorée du Périgord */ --ocre-clair: #e7d3ad; --pierre: #6b6354; /* gris-pierre chaud */ /* Neutres chauds (terroir) */ --fond: #faf7f1; /* pierre claire, fond général */ --fond-alt: #f2ede3; /* alternance de section */ --surface: #ffffff; --surface-2: #fbf9f5; --bordure: #e4ddd0; --bordure-forte: #d2c8b6; /* Texte */ --texte: #1a1a1a; --texte-doux: #4a4034; /* > 4.5:1 sur fond clair */ --texte-inverse: #ffffff; /* États sémantiques */ --info: #0063cb; --succes: #18753c; --alerte: #b34000; --erreur: #ce0500; /* Typo */ --font-titre: 'Libre Bodoni', Georgia, 'Times New Roman', serif; --font-corps: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Rythme & rayons */ --max: 1200px; --radius-s: 6px; --radius-m: 12px; --radius-l: 20px; --shadow-s: 0 1px 2px rgba(27,43,75,.06), 0 2px 6px rgba(27,43,75,.06); --shadow-m: 0 6px 18px rgba(27,43,75,.08), 0 2px 6px rgba(27,43,75,.06); --shadow-l: 0 18px 50px rgba(27,43,75,.14); /* Couches (z-index) */ --z-header: 50; --z-menu: 60; --z-banner: 40; --t-rapide: 160ms cubic-bezier(.4,0,.2,1); --t-doux: 280ms cubic-bezier(.4,0,.2,1); } /* ===================================================================== THÈMES SÉLECTIONNABLES (couleurs / polices / menu) Appliqués via l'attribut data-theme sur . Défaut (aucun attribut ou "perigord") = tokens ci-dessus. ===================================================================== */ /* ----- Thème « Bord de Dronne » : azur & teal, titres sans-serif, menu pilule ----- */ :root[data-theme="dronne"] { --bleu-france: #0a558c; --bleu-france-hover: #0c6aad; --navy: #13314c; --navy-700: #1c466b; --perigord-vert: #1f7a8c; --perigord-vert-700: #155e6d; --ocre: #e0a14e; --ocre-clair: #f1d9b0; --pierre: #5d6b78; --fond: #f2f7fb; --fond-alt: #e6eff5; --surface: #ffffff; --surface-2: #f3f8fc; --bordure: #d3e0ec; --bordure-forte: #bcd0e0; --texte: #16202b; --texte-doux: #3b4654; --font-titre: 'Archivo', 'Public Sans', system-ui, sans-serif; } :root[data-theme="dronne"] h1, :root[data-theme="dronne"] h2, :root[data-theme="dronne"] h3 { font-weight: 800; letter-spacing: -0.01em; } /* Menu « pilule » */ :root[data-theme="dronne"] .main-nav a::after { display: none; } :root[data-theme="dronne"] .main-nav a:hover { background: var(--fond-alt); } :root[data-theme="dronne"] .main-nav a[aria-current="page"] { background: var(--bleu-france); color: #fff; } /* ----- Thème « Sable & Lavande » : prune & terracotta, titres Fraunces ----- */ :root[data-theme="lavande"] { --bleu-france: #5a3a8c; --bleu-france-hover: #6f49a8; --navy: #2c1c3c; --navy-700: #412e52; --perigord-vert: #9c4f33; --perigord-vert-700: #803f28; --ocre: #b9792f; --ocre-clair: #ecd6b3; --pierre: #5e5266; --fond: #f6f1f7; --fond-alt: #ebdfed; --surface: #ffffff; --surface-2: #faf6fb; --bordure: #e1d3e4; --bordure-forte: #cbb8ce; --texte: #1d1421; --texte-doux: #443949; --font-titre: 'Fraunces', 'Libre Bodoni', Georgia, serif; } /* Menu « pilule » prune (état actif rempli, fort contraste) */ :root[data-theme="lavande"] .main-nav a::after { display: none; } :root[data-theme="lavande"] .main-nav a:hover { background: var(--fond-alt); } :root[data-theme="lavande"] .main-nav a[aria-current="page"] { background: var(--bleu-france); color: #fff; } /* ----- Thème « Contraste » : institutionnel sobre, très lisible (WCAG AAA), titres Lexend ----- */ :root[data-theme="institutionnel"] { --bleu-france: #0b4a8f; --bleu-france-hover: #093a72; --navy: #0f172a; --navy-700: #1e293b; --perigord-vert: #0f766e; --perigord-vert-700: #0c5f59; --ocre: #b45309; --ocre-clair: #fcd9a8; --pierre: #334155; --fond: #ffffff; --fond-alt: #eef2f6; --surface: #ffffff; --surface-2: #f6f8fa; --bordure: #cbd5e1; --bordure-forte: #94a3b8; --texte: #0b1220; --texte-doux: #334155; --font-titre: 'Lexend', 'Public Sans', system-ui, sans-serif; } :root[data-theme="institutionnel"] h1, :root[data-theme="institutionnel"] h2, :root[data-theme="institutionnel"] h3 { font-weight: 700; letter-spacing: -0.01em; } :root[data-theme="institutionnel"] .main-nav a[aria-current="page"] { background: var(--bleu-france); color: #fff; } :root[data-theme="institutionnel"] .main-nav a::after { display: none; } /* ---------- Reset léger ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-corps); font-size: 1.0625rem; /* 17px — confort de lecture */ line-height: 1.65; color: var(--texte); background: var(--fond); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video { display: block; max-width: 100%; height: auto; } /* Les SVG sont en ligne par défaut (icônes au sein du texte) ; les SVG « média » qui remplissent un cadre repassent en block via leurs règles dédiées. */ svg { max-width: 100%; vertical-align: middle; } ul[role="list"] { list-style: none; padding: 0; } a { color: var(--bleu-france); text-underline-offset: .18em; } a:hover { color: var(--bleu-france-hover); } button { font: inherit; cursor: pointer; } /* ---------- Accessibilité : focus & skip-link ---------- */ :focus-visible { outline: 3px solid var(--bleu-france); outline-offset: 2px; border-radius: 3px; } .skip-link { position: absolute; left: 1rem; top: -4rem; background: var(--bleu-france); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-s) var(--radius-s); z-index: 999; font-weight: 600; transition: top var(--t-rapide); } .skip-link:focus { top: 0; color: #fff; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Typographie ---------- */ h1, h2, h3, h4 { font-family: var(--font-titre); color: var(--navy); line-height: 1.15; font-weight: 600; } h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); letter-spacing: -.01em; } h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); } h3 { font-size: clamp(1.2rem, 1.05rem + .8vw, 1.5rem); } h4 { font-size: 1.125rem; font-family: var(--font-corps); font-weight: 700; color: var(--navy); } p { max-width: 72ch; } .lead { font-size: 1.2rem; color: var(--texte-doux); line-height: 1.6; } .eyebrow { font-family: var(--font-corps); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: var(--perigord-vert); display: inline-flex; align-items: center; gap: .5rem; } .eyebrow::before { content:""; width: 28px; height: 2px; background: var(--ocre); display:inline-block; } /* ---------- Layout ---------- */ .container { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; } .section { padding-block: clamp(3rem, 2rem + 5vw, 6rem); } .section--alt { background: var(--fond-alt); } .section__head { max-width: 60ch; margin-bottom: 2.5rem; } .section__head p { margin-top: .75rem; } .grid { display: grid; gap: 1.5rem; } @media (min-width: 640px){ .grid-2 { grid-template-columns: repeat(2,1fr);} } @media (min-width: 900px){ .grid-3 { grid-template-columns: repeat(3,1fr);} .grid-4 { grid-template-columns: repeat(4,1fr);} } /* ---------- Bandeau État ---------- */ .gov-banner { background: var(--surface); border-bottom: 1px solid var(--bordure); font-size: .8rem; } .gov-banner__inner { display: flex; align-items: center; gap: .65rem; padding-block: .4rem; color: var(--texte-doux); } .gov-banner .rf { font-weight: 700; color: var(--navy); letter-spacing: .02em; } .gov-banner .rf small { display:block; font-weight:400; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color: var(--pierre);} /* ---------- En-tête / navigation ---------- */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: rgba(255,255,255,.92); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--bordure); transition: box-shadow var(--t-doux), padding var(--t-doux); } .site-header.is-scrolled { box-shadow: var(--shadow-m); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; transition: padding var(--t-doux); } .site-header.is-scrolled .header__inner { padding-block: .55rem; } .brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; color: inherit; } .brand__crest { width: 46px; height: 54px; flex: none; filter: drop-shadow(0 2px 3px rgba(27,43,75,.18)); } .brand__txt strong { display:block; font-family: var(--font-titre); font-size: 1.18rem; color: var(--navy); line-height: 1.1; } .brand__txt span { font-size: .78rem; color: var(--pierre); letter-spacing: .04em; } .main-nav ul { display: flex; gap: .1rem; list-style: none; padding: 0; margin: 0; } .main-nav a { display: inline-block; padding: .55rem .62rem; border-radius: var(--radius-s); text-decoration: none; color: var(--navy); font-weight: 600; font-size: .94rem; position: relative; white-space: nowrap; transition: background var(--t-rapide), color var(--t-rapide); } .main-nav ul { flex-wrap: nowrap; } .main-nav a::after { content:""; position:absolute; left: .9rem; right: .9rem; bottom: .35rem; height: 2px; background: var(--ocre); transform: scaleX(0); transform-origin: left; transition: transform var(--t-doux); } .main-nav a:hover { background: var(--fond-alt); } .main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); } .main-nav a[aria-current="page"] { color: var(--bleu-france); } /* Sous-navigation de section (ex. « La commune ») — alignée sur le menu principal */ .sub-nav { background: var(--surface); border-bottom: 1px solid var(--bordure); box-shadow: var(--shadow-s); position: relative; z-index: 5; } .sub-nav__inner { display: flex; gap: .4rem; overflow-x: auto; padding: .6rem 0; } .sub-nav a { display: inline-flex; align-items: center; padding: .6rem 1.1rem; border-radius: 999px; text-decoration: none; color: var(--navy); font-weight: 600; font-size: .95rem; white-space: nowrap; border: 1px solid transparent; transition: background var(--t-rapide), color var(--t-rapide), border-color var(--t-rapide); } .sub-nav a:hover { background: var(--fond-alt); border-color: var(--bordure); } .sub-nav a[aria-current="page"] { background: var(--bleu-france); color: #fff; border-color: var(--bleu-france); } .header__actions { display: flex; align-items: center; gap: .5rem; } /* Boutons */ .btn { --bg: var(--bleu-france); --fg: #fff; display: inline-flex; align-items: center; gap: .55rem; padding: .72rem 1.3rem; border-radius: var(--radius-s); background: var(--bg); color: var(--fg); border: 2px solid transparent; font-weight: 600; font-size: .98rem; text-decoration: none; line-height: 1.2; transition: background var(--t-rapide), color var(--t-rapide), box-shadow var(--t-rapide); } .btn:hover { background: var(--bleu-france-hover); color:#fff; box-shadow: var(--shadow-s); } .btn--ghost { --bg: transparent; --fg: var(--bleu-france); border-color: var(--bleu-france); } .btn--ghost:hover { background: var(--bleu-france); color:#fff; } .btn--vert { --bg: var(--perigord-vert); } .btn--vert:hover { background: var(--perigord-vert-700); } .btn--lg { padding: .9rem 1.6rem; font-size: 1.05rem; } .btn svg { width: 1.1em; height: 1.1em; } /* Burger (mobile) */ .nav-toggle { display: none; background: none; border: 0; padding: .5rem; border-radius: var(--radius-s); cursor: pointer; } .nav-toggle svg { width: 28px; height: 28px; stroke: var(--navy); } .nav-toggle:focus-visible { outline: 3px solid var(--bleu-france); outline-offset: 2px; } /* Bouton fermer dans le tiroir mobile (masqué hors mobile) */ .nav-close { display: none; } /* ---------- Bandeau d'alerte municipal ---------- */ .alert-strip { background: linear-gradient(90deg, var(--ocre), #d9a85a); color: #2a1e08; } .alert-strip__inner { display:flex; align-items:center; gap:.75rem; padding-block:.6rem; font-weight:600; font-size:.95rem; } .alert-strip svg { width:20px; height:20px; flex:none; } .alert-strip a { color:#2a1e08; font-weight:700; } /* ---------- HÉRO ---------- */ .hero { position: relative; overflow: hidden; background: var(--navy); color: #fff; } .hero__media { position:absolute; inset:0; } .hero__media::after { content:""; position:absolute; inset:0; background: linear-gradient(105deg, rgba(20,30,55,.92) 30%, rgba(20,30,55,.55) 70%, rgba(58,107,79,.45)); } .hero__media .sky { width:100%; height:100%; object-fit: cover; transform: scale(1.05); transition: transform 12s ease-out; } .hero.is-ready .hero__media .sky { transform: scale(1); } .hero__inner { position: relative; z-index: 1; padding-block: clamp(3.5rem, 2.5rem + 7vw, 7rem); } .hero__grid { display: grid; gap: 2.5rem; align-items: center; } @media (min-width: 900px){ .hero__grid { grid-template-columns: 1.15fr .85fr; } } .hero h1 { color: #fff; } .hero .hero__sub { font-size: 1.2rem; color: #e7ecf5; max-width: 52ch; margin-top: 1.1rem; } .hero__cta { display:flex; flex-wrap:wrap; gap:.85rem; margin-top: 2rem; } .hero .btn--ghost { color:#fff; border-color: rgba(255,255,255,.7); } .hero .btn--ghost:hover { background:#fff; color: var(--navy); } /* Carte d'accès rapide dans le héro */ .quick-access { background: rgba(255,255,255,.97); color: var(--texte); border-radius: var(--radius-l); padding: 1.6rem; box-shadow: var(--shadow-l); } .quick-access h2 { font-size: 1.15rem; margin-bottom: 1rem; } .quick-access__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .qa-link { display:flex; flex-direction: column; gap:.5rem; padding: .95rem; border:1px solid var(--bordure); border-radius: var(--radius-m); text-decoration:none; color: var(--navy); background: var(--surface); transition: border-color var(--t-rapide), background var(--t-rapide), transform var(--t-rapide); } .qa-link:hover { border-color: var(--perigord-vert); background: var(--surface-2); transform: translateY(-2px); } .qa-link .ico { width: 34px; height: 34px; color: var(--perigord-vert); } .qa-link strong { font-size: .98rem; } /* ---------- Chiffres clés ---------- */ .stats { display: grid; gap: 1.5rem; grid-template-columns: repeat(2,1fr); } @media (min-width: 760px){ .stats { grid-template-columns: repeat(4,1fr);} } .stat { text-align: center; padding: 1.25rem 1rem; border-radius: var(--radius-m); background: var(--surface); box-shadow: var(--shadow-s); } .stat__num { font-family: var(--font-titre); font-size: clamp(1.8rem,1.3rem+1.5vw,2.6rem); color: var(--perigord-vert); font-weight: 700; } .stat__lbl { color: var(--texte-doux); font-size: .92rem; } /* ---------- Cartes ---------- */ .card { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--radius-m); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--t-doux), box-shadow var(--t-doux), border-color var(--t-doux); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--bordure-forte); } .card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--fond-alt); position: relative; } .card__media img, .card__media svg { display:block; width:100%; height:100%; object-fit: cover; transition: transform var(--t-doux); } .card:hover .card__media img { transform: scale(1.05); } .card__gallery { position:absolute; bottom:.6rem; right:.6rem; display:inline-flex; align-items:center; gap:.35rem; background:rgba(12,16,26,.72); color:#fff; font-size:.78rem; font-weight:600; padding:.3rem .6rem; border-radius:999px; } .card__gallery svg { width:15px; height:15px; } .card__body { padding: 1.25rem 1.35rem 1.5rem; display:flex; flex-direction:column; gap:.6rem; flex:1; } .card__body h3 a { color: var(--navy); text-decoration: none; } .card__body h3 a:hover { color: var(--bleu-france); } .card__meta { font-size: .82rem; color: var(--pierre); display:flex; align-items:center; gap:.5rem; } .card__excerpt { color: var(--texte-doux); font-size: .96rem; } .card .card__link { margin-top: auto; font-weight: 600; text-decoration: none; display:inline-flex; align-items:center; gap:.4rem; } .card .card__link svg { width: 1em; height: 1em; transition: transform var(--t-rapide); } .card .card__link:hover svg { transform: translateX(3px); } /* Étiquettes */ .tag { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform: uppercase; padding:.25rem .6rem; border-radius: 999px; } .tag--commune { background: #e7eefb; color: var(--bleu-france); } .tag--ccpn { background: #e7f1ec; color: var(--perigord-vert-700); } .tag--travaux { background: #fbeede; color: var(--alerte); } .tag--culture { background: #f1e7f7; color: #7b3fa0; } /* ---------- Démarches : accordéon ---------- */ .demarches-search { display:flex; gap:.5rem; max-width: 540px; margin-bottom: 2rem; } .demarches-search input { flex:1; padding:.8rem 1rem; border:1px solid var(--bordure-forte); border-radius: var(--radius-s); font: inherit; background: var(--surface); } .accordion { border:1px solid var(--bordure); border-radius: var(--radius-m); overflow:hidden; background: var(--surface); } .accordion + .accordion { margin-top: 1rem; } .accordion__btn { width:100%; text-align:left; background: var(--surface); border:0; padding: 1.15rem 1.35rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-weight:700; color: var(--navy); font-size:1.05rem; } .accordion__btn:hover { background: var(--surface-2); } .accordion__btn .chev { width:22px; height:22px; transition: transform var(--t-doux); color: var(--perigord-vert); flex:none; } .accordion__btn[aria-expanded="true"] .chev { transform: rotate(180deg); } .accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-doux); } .accordion__panel > div { overflow: hidden; } .accordion__btn[aria-expanded="true"] + .accordion__panel { grid-template-rows: 1fr; } .accordion__content { padding: 0 1.35rem 1.4rem; color: var(--texte-doux); } .accordion__content ul { padding-left: 1.1rem; } .accordion__content li { margin-bottom:.4rem; } /* ---------- Agenda / timeline ---------- */ .agenda-list { display:flex; flex-direction: column; gap: .9rem; } .event { display:flex; gap:1.1rem; align-items:flex-start; background: var(--surface); border:1px solid var(--bordure); border-left: 4px solid var(--ocre); border-radius: var(--radius-m); padding: 1.1rem 1.25rem; transition: box-shadow var(--t-rapide), transform var(--t-rapide); } .event:hover { box-shadow: var(--shadow-s); transform: translateX(3px); } .event__date { flex:none; width: 64px; text-align:center; background: var(--navy); color:#fff; border-radius: var(--radius-s); padding:.45rem .2rem; line-height:1.1; } .event__date .d { font-family: var(--font-titre); font-size: 1.5rem; display:block; } .event__date .m { font-size:.72rem; text-transform: uppercase; letter-spacing:.06em; } .event__body h4 { margin-bottom:.2rem; } .event__body p { font-size:.92rem; color: var(--texte-doux); } .event__body .where { font-size:.82rem; color: var(--pierre); display:inline-flex; gap:.35rem; align-items:center; margin-top:.3rem;} /* ---------- Vie locale / mosaïque ---------- */ .feature-row { display:grid; gap: 2.5rem; align-items:center; } @media(min-width: 860px){ .feature-row { grid-template-columns: 1fr 1fr; } .feature-row--rev > div:first-child { order: 2; } } .feature-row__media { border-radius: var(--radius-l); overflow:hidden; box-shadow: var(--shadow-m); aspect-ratio: 4/3; } .feature-row__media img, .feature-row__media svg { display:block; width:100%; height:100%; object-fit: cover; } .checklist { list-style:none; padding:0; display:grid; gap:.65rem; } .checklist li { display:flex; gap:.65rem; align-items:flex-start; } .checklist svg { width:22px; height:22px; color: var(--perigord-vert); flex:none; margin-top:.15rem; } /* ---------- Formulaire de contact ---------- */ .form-grid { display:grid; gap:1.1rem; } @media(min-width:640px){ .form-grid .col-2 { grid-template-columns:1fr 1fr; display:grid; gap:1.1rem; } } .field { display:flex; flex-direction:column; gap:.4rem; } .field label { font-weight:600; color: var(--navy); font-size:.95rem; } .field .req { color: var(--erreur); } .field input, .field textarea, .field select { padding:.8rem 1rem; border:1px solid var(--bordure-forte); border-radius: var(--radius-s); font: inherit; background: var(--surface); color: var(--texte); width:100%; transition: border-color var(--t-rapide), box-shadow var(--t-rapide); } .field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color: var(--bleu-france); box-shadow: 0 0 0 3px rgba(0,0,145,.15); } .field .hint { font-size:.82rem; color: var(--pierre); } .field--error input, .field--error textarea { border-color: var(--erreur); } .field__err { color: var(--erreur); font-size:.85rem; display:none; } .field--error .field__err { display:block; } .form-feedback { padding:1rem 1.25rem; border-radius: var(--radius-m); font-weight:600; display:none; } .form-feedback.is-ok { display:block; background:#e3f4e9; color: var(--succes); border:1px solid #a8dcb9; } /* Encadré coordonnées */ .contact-card { background: var(--navy); color:#fff; border-radius: var(--radius-l); padding: 2rem; } .contact-card h3 { color:#fff; } .contact-card a { color: var(--ocre-clair); } .contact-card .row { display:flex; gap:.85rem; align-items:flex-start; padding-block:.7rem; border-bottom:1px solid rgba(255,255,255,.12); } .contact-card .row:last-child { border-bottom:0; } .contact-card svg { width:22px; height:22px; color: var(--ocre); flex:none; margin-top:.15rem; } .hours { font-size:.95rem; } .hours dt { font-weight:600; } .hours dd { color:#d6deec; margin:0 0 .4rem; } /* ---------- CTA final ---------- */ .cta-band { background: radial-gradient(120% 140% at 0% 0%, var(--perigord-vert) 0%, var(--perigord-vert-700) 55%, var(--navy) 100%); color:#fff; border-radius: var(--radius-l); padding: clamp(2rem,1.5rem+3vw,3.5rem); text-align:center; } .cta-band h2 { color:#fff; } .cta-band p { margin: .75rem auto 1.75rem; color:#e9f0ec; } .cta-band .hero__cta { justify-content:center; } .cta-band .btn--ghost { color:#fff; border-color: rgba(255,255,255,.75); } .cta-band .btn--ghost:hover { background:#fff; color: var(--perigord-vert-700); } /* ---------- Pied de page ---------- */ .site-footer { background: var(--navy); color:#cdd6e6; padding-block: 3rem 1.5rem; margin-top: 0; font-size:.95rem; } .footer__grid { display:grid; gap:2rem; } @media(min-width:760px){ .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .site-footer h4 { color:#fff; margin-bottom:.9rem; letter-spacing:.02em; } .site-footer a { color:#cdd6e6; text-decoration:none; } .site-footer a:hover { color:#fff; text-decoration: underline; } .site-footer ul { list-style:none; padding:0; display:grid; gap:.5rem; } .footer__brand .brand__txt strong { color:#fff; } .footer__brand .brand__txt span { color:#9fb0cc; } .footer__brand p { color:#aebbd2; font-size:.92rem; margin-top:.85rem; } .footer-partners { margin-top: 2.25rem; padding-top: 1.75rem; border-top:1px solid rgba(255,255,255,.14); } .footer-partners h4 { margin-bottom: 1rem; } .partner-logos { display:flex; flex-wrap:wrap; align-items:center; gap:.85rem; } .partner-logos a, .partner-logos span.plogo { background:#fff; border-radius: var(--radius-s); padding:.55rem .8rem; display:inline-flex; align-items:center; justify-content:center; box-shadow: var(--shadow-s); transition: transform var(--t-rapide); } .partner-logos a:hover { transform: translateY(-2px); } .partner-logos img { height: 38px; width:auto; } .partner-logos .logo-banniere img { height: 46px; } .footer__bottom { margin-top: 2.25rem; padding-top: 1.25rem; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:center; justify-content:space-between; font-size:.85rem; color:#9fb0cc; } .footer__bottom nav { display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; } .gov-logos { display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap; } .gov-logos .rf { font-family: var(--font-titre); color:#fff; line-height:1; } .gov-logos .rf { display:inline-flex; align-items:baseline; gap:.45rem; } .gov-logos .rf small { font-family: var(--font-corps); font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:#9fb0cc; } /* ---------- Fil d'ariane ---------- */ .breadcrumb { padding-block: 1rem; font-size:.88rem; color: var(--pierre); } .breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; padding:0; margin:0; } .breadcrumb li::after { content:"›"; margin-left:.4rem; color: var(--bordure-forte); } .breadcrumb li:last-child::after { content:""; } .breadcrumb a { color: var(--pierre); text-decoration:none; } .breadcrumb a:hover { color: var(--bleu-france); text-decoration: underline; } /* En-tête de page interne */ .page-hero { background: var(--fond-alt); border-bottom:1px solid var(--bordure); } .page-hero .container { padding-block: 1.5rem 2.5rem; } .page-hero p { margin-top:.6rem; } /* Filtres */ .filters { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.75rem; } /* ---------- Agendas repliables ---------- */ .agenda-fold { border-top:1px solid var(--bordure); } .agenda-fold:first-of-type { border-top:0; } .agenda-fold > summary { cursor:pointer; list-style:none; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.5rem 0 0; } .agenda-fold > summary::-webkit-details-marker { display:none; } .agenda-fold > summary .section__head { margin-bottom:1.5rem; } .agenda-fold > summary:focus-visible { outline:3px solid var(--bleu-france); outline-offset:3px; border-radius:var(--radius-s); } .agenda-fold .fold-ind { flex:0 0 auto; margin-top:.35rem; color:var(--perigord-vert); transition:transform var(--t-doux); } .agenda-fold .fold-ind svg { width:26px; height:26px; display:block; } .agenda-fold[open] .fold-ind { transform:rotate(180deg); } /* Liens rapides vers les agendas */ .agenda-links { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem; margin:-.5rem 0 1.75rem; font-size:.92rem; } .agenda-links .lbl { color:var(--texte-doux); font-weight:600; } .agenda-links a { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .85rem; border:1px solid var(--bordure); border-radius:999px; color:var(--bleu-france); text-decoration:none; transition:border-color var(--t-doux), background var(--t-doux); } .agenda-links a:hover { border-color:var(--perigord-vert); background:var(--surface-2); } .agenda-links a svg { width:15px; height:15px; } .chip { border:1px solid var(--bordure-forte); background: var(--surface); color: var(--navy); padding:.45rem 1rem; border-radius:999px; font-weight:600; font-size:.9rem; transition: all var(--t-rapide); } .chip:hover { border-color: var(--perigord-vert); } .chip[aria-pressed="true"] { background: var(--perigord-vert); color:#fff; border-color: var(--perigord-vert); } /* ---------- Animations d'apparition ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; } .reveal.is-visible { opacity: 1; transform: none; } .reveal[data-delay="1"]{ transition-delay:.08s; } .reveal[data-delay="2"]{ transition-delay:.16s; } .reveal[data-delay="3"]{ transition-delay:.24s; } /* ---------- Image « cliquer pour agrandir » (carte cyclo, etc.) ---------- */ .img-zoom { margin: 0 0 2rem; width: 100%; max-width: 560px; /* environ la largeur d'une carte de la grille 2 colonnes */ cursor: zoom-in; border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-m); transition: box-shadow var(--t-vif), transform var(--t-vif); } .img-zoom img { width: 100%; height: auto; display: block; } .img-zoom:hover, .img-zoom:focus-visible { box-shadow: var(--shadow-l); transform: translateY(-2px); outline: none; } .img-zoom figcaption { padding:.6rem 1rem; background:var(--surface-2); font-size:.85rem; color:var(--pierre); display:flex; align-items:center; gap:.4rem; } .lb-backdrop { position: fixed; inset: 0; z-index: 850; background: rgba(12,16,26,.88); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; pointer-events: none; transition: opacity .25s; } .lb-backdrop.is-open { opacity: 1; pointer-events: auto; } .lb-backdrop picture { display: block; } .lb-backdrop img { max-width: min(90vw, 800px); max-height: 88vh; width: auto; height: auto; border-radius: var(--radius-m); box-shadow: 0 24px 80px rgba(0,0,0,.7); transform: scale(.94); transition: transform .3s cubic-bezier(.25,.46,.45,.94); display: block; } .lb-backdrop.is-open img { transform: scale(1); } @media (prefers-reduced-motion: reduce) { .lb-backdrop, .lb-backdrop img { transition: none; } } /* ---------- Bandeau information RGPD / cookies ---------- */ .cookie-notice { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 900; max-width: 720px; margin-inline: auto; background: var(--navy); color: #fff; border-radius: var(--radius-m); box-shadow: 0 12px 40px rgba(0,0,0,.35); padding: 1.1rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.25rem; transform: translateY(140%); opacity: 0; transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .4s; } .cookie-notice.is-shown { transform: none; opacity: 1; } .cookie-notice p { margin: 0; font-size: .9rem; color: rgba(255,255,255,.85); flex: 1 1 280px; line-height: 1.5; } .cookie-notice a { color: #fff; text-decoration: underline; } .cookie-notice__actions { display: flex; gap: .5rem; flex: 0 0 auto; } .cookie-notice .btn { padding: .55rem 1.1rem; font-size: .88rem; } .cookie-notice__ok { background: #fff; color: var(--navy); border: 0; border-radius: var(--radius-s); font-weight: 700; cursor: pointer; padding: .55rem 1.2rem; font-size: .88rem; } .cookie-notice__ok:hover { background: var(--fond); } .cookie-notice__ok:focus-visible { outline: 3px solid var(--ocre); outline-offset: 2px; } @media (max-width: 560px) { .cookie-notice { flex-direction: column; align-items: stretch; text-align: left; } .cookie-notice__actions { justify-content: flex-end; } } @media (prefers-reduced-motion: reduce) { .cookie-notice { transition: opacity .2s; transform: none; } } /* ---------- Bouton « En savoir plus » (agenda) ---------- */ .event__more { margin-top: .6rem; align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; cursor: pointer; padding: 0; color: var(--bleu-france); font-weight: 600; font-size: .92rem; } .event__more svg { width: 16px; height: 16px; transition: transform var(--t-doux); } .event__more:hover svg { transform: translateX(3px); } .event__more:focus-visible { outline: 3px solid var(--bleu-france); outline-offset: 3px; border-radius: var(--radius-s); } /* ---------- Modale article (Lire la suite) ---------- */ .article-modal { width: min(680px, 92vw); max-height: 88vh; padding: 0; border: 0; border-radius: var(--radius-m); overflow: hidden; background: var(--surface, #fff); color: var(--texte); box-shadow: 0 30px 90px rgba(0,0,0,.45); } .article-modal::backdrop { background: rgba(12,16,26,.7); backdrop-filter: blur(3px); } .article-modal[open] { animation: am-in .28s cubic-bezier(.22,.61,.36,1); } @keyframes am-in { from { opacity:0; transform: translateY(12px) scale(.98); } to { opacity:1; transform:none; } } .article-modal__scroll { max-height: 88vh; overflow-y: auto; } .article-modal__media { position: relative; aspect-ratio: 16/7; background: var(--surface-2); } .article-modal__media img, .article-modal__media svg { width: 100%; height: 100%; object-fit: cover; display: block; } .article-modal__close { position: absolute; top: .75rem; right: .75rem; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.92); color: var(--navy); display: grid; place-items: center; box-shadow: var(--shadow-s); transition: background var(--t-doux); } .article-modal__close:hover { background: #fff; } .article-modal__close:focus-visible { outline: 3px solid var(--bleu-france); outline-offset: 2px; } .article-modal__close svg { width: 22px; height: 22px; } .article-modal__body { padding: 1.75rem; } .article-modal__body > .tag { margin-bottom: .6rem; } .article-modal__body h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); line-height: 1.2; } .article-modal__meta { color: var(--pierre); font-size: .9rem; margin: .35rem 0 1.1rem; } .article-modal__content > * + * { margin-top: .9rem; } .article-modal__content h3 { font-size: 1.05rem; margin-top: 1.3rem; color: var(--perigord-vert-700); } .article-modal__content ul { padding-left: 1.2rem; display: grid; gap: .35rem; } .article-modal__content a { color: var(--bleu-france); } @media (prefers-reduced-motion: reduce) { .article-modal[open] { animation: none; } } /* Galerie de photos dans la modale */ .article-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:.5rem; margin-top:1.4rem; } .article-gallery__thumb { padding:0; border:0; background:var(--fond-alt); border-radius:8px; overflow:hidden; cursor:pointer; aspect-ratio:1/1; } .article-gallery__thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; } .article-gallery__thumb:hover img { transform:scale(1.07); } .article-gallery__thumb:focus-visible { outline:3px solid var(--bleu-france); outline-offset:2px; } .article-gallery__thumb--video { display:grid; place-items:center; background:var(--navy); color:#fff; } .article-gallery__thumb--video svg { width:38px; height:38px; opacity:.95; } .article-gallery__thumb--video:hover { background:var(--bleu-france); } .lightbox__media { display:flex; align-items:center; justify-content:center; } .lightbox__media img, .lightbox__media video { max-width:92vw; max-height:80vh; object-fit:contain; border-radius:4px; box-shadow:0 12px 48px rgba(0,0,0,.5); background:#000; } /* Numéros d'écoute & de signalement (adresses utiles) */ .help-num { display:flex; align-items:baseline; gap:.5rem; text-decoration:none; background:#fff; border:1px solid var(--bordure); border-radius:var(--radius-s); padding:.6rem .8rem; transition:border-color var(--t-rapide), box-shadow var(--t-rapide); } .help-num:hover { border-color:var(--bordure-forte); box-shadow:var(--shadow-s); } .help-num b { font-family:var(--font-titre); font-size:1.15rem; color:var(--navy); white-space:nowrap; } .help-num span { font-size:.85rem; color:var(--texte-doux); } /* Visionneuse plein écran (lightbox) */ .lightbox { margin:0; width:100vw; height:100vh; max-width:100vw; max-height:100vh; border:0; padding:0; background:rgba(8,10,16,.95); } .lightbox::backdrop { background:rgba(8,10,16,.95); } .lightbox[open] { display:flex; align-items:center; justify-content:center; } .lightbox__fig { margin:0; display:flex; flex-direction:column; align-items:center; gap:.8rem; } .lightbox__fig img { max-width:92vw; max-height:80vh; object-fit:contain; border-radius:4px; box-shadow:0 12px 48px rgba(0,0,0,.5); } .lightbox__fig figcaption { color:#e9e9e9; font-size:.9rem; text-align:center; max-width:80vw; } .lightbox__close, .lightbox__nav { position:fixed; background:rgba(255,255,255,.14); color:#fff; border:0; border-radius:999px; width:48px; height:48px; display:grid; place-items:center; cursor:pointer; transition:background .2s; } .lightbox__close:hover, .lightbox__nav:hover { background:rgba(255,255,255,.28); } .lightbox__close svg, .lightbox__nav svg { width:24px; height:24px; } .lightbox__close { top:1rem; right:1rem; } .lightbox__nav { top:50%; transform:translateY(-50%); } .lightbox__prev { left:1rem; } .lightbox__next { right:1rem; } @media (max-width:600px) { .lightbox__nav { width:42px; height:42px; } .lightbox__close { top:.6rem; right:.6rem; } } /* ---------- Sélecteur de thème (visiteur) ---------- */ .theme-switch { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: var(--z-banner); } .theme-switch__btn { width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; background: var(--navy); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-m); } .theme-switch__btn svg { width: 22px; height: 22px; } .theme-switch__btn:focus-visible { outline: 3px solid var(--ocre); outline-offset: 2px; } .theme-switch__panel { position: absolute; left: 0; bottom: 60px; width: 230px; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--radius-m); box-shadow: var(--shadow-l); padding: .75rem; display: none; } .theme-switch.is-open .theme-switch__panel { display: block; } .theme-switch__panel h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pierre); margin: .1rem .25rem .5rem; } .theme-opt { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: var(--radius-s); padding: .5rem .55rem; cursor: pointer; color: var(--texte); font-size: .92rem; } .theme-opt:hover { background: var(--fond-alt); } .theme-opt[aria-pressed="true"] { border-color: var(--bleu-france); background: var(--fond-alt); font-weight: 600; } .theme-opt .sw { width: 34px; height: 20px; border-radius: 4px; flex: none; border: 1px solid rgba(0,0,0,.12); display: flex; overflow: hidden; } .theme-opt .sw i { flex: 1; } @media (max-width: 520px) { .theme-switch { left: 1rem; bottom: 1rem; } .to-top { bottom: 5rem; } } /* ---------- Bouton retour-haut ---------- */ .to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: var(--z-banner); width: 48px; height: 48px; border-radius: 50%; border:0; background: var(--bleu-france); color:#fff; display:grid; place-items:center; box-shadow: var(--shadow-m); opacity:0; visibility:hidden; transform: translateY(10px); transition: all var(--t-doux); } .to-top.is-shown { opacity:1; visibility:visible; transform:none; } .to-top svg { width:22px; height:22px; } /* ---------- Responsive : navigation mobile ---------- */ @media (max-width: 1100px) { /* L'en-tête ne doit plus créer de bloc conteneur pour le tiroir fixe : on retire le backdrop-filter et on rend le fond opaque. */ .site-header { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } .nav-toggle { display:inline-flex; } /* Tiroir mobile : reprend la couleur du pied de page du thème (var(--navy)) */ .main-nav { position: fixed; inset: 0 0 0 auto; width: min(86vw, 340px); z-index: var(--z-menu); background: var(--navy); padding: 4.5rem 1.25rem 2rem; box-shadow: var(--shadow-l); transform: translateX(100%); transition: transform var(--t-doux); overflow-y:auto; overscroll-behavior: contain; } .main-nav.is-open { transform: none; } .main-nav ul { flex-direction: column; gap:.15rem; } .main-nav a { display:block; padding:.9rem 1rem; border-radius: var(--radius-s); font-size:1.05rem; color: rgba(255,255,255,.92) !important; } .main-nav a::after { display:none !important; } .main-nav a:hover { background: rgba(255,255,255,.12) !important; color:#fff !important; } .main-nav a[aria-current="page"] { background: rgba(255,255,255,.16) !important; color:#fff !important; } .nav-close { display: grid; place-items: center; position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius-s); background: rgba(255,255,255,.1); color: #fff; cursor: pointer; } .nav-close svg { width: 24px; height: 24px; } .nav-close:focus-visible { outline: 3px solid var(--bleu-france); outline-offset: 2px; } /* Le voile passe SOUS l'en-tête (qui crée un contexte d'empilement) pour que le tiroir, enfant de l'en-tête, reste au-dessus et cliquable. */ .nav-backdrop { position: fixed; inset:0; background: rgba(15,23,42,.45); z-index: 45; opacity:0; visibility:hidden; transition: opacity var(--t-doux); } .nav-backdrop.is-open { opacity:1; visibility:visible; } .header__actions .btn span { display:none; } } @media (max-width: 520px){ .quick-access__grid { grid-template-columns: 1fr; } .hero__cta .btn { width:100%; justify-content:center; } /* Allège le bandeau République française */ .gov-banner__inner { font-size:.8rem; } } /* ---------- Préférence : mouvement réduit ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .reveal { opacity:1 !important; transform:none !important; } .hero__media .sky { transform:none !important; } } /* ---------- Impression ---------- */ @media print { .site-header, .alert-strip, .to-top, .nav-toggle, .cta-band, .hero__cta { display:none !important; } body { background:#fff; color:#000; } }