/*!
Theme Name: Le Noiséen
Theme URI: https://lenoiseen.fr/
Author: Le Noiséen
Author URI: https://lenoiseen.fr/
Description: Site d'actualités de la ville de Noisy-le-Sec : annuaire des associations, des commerçants, petites annonces et tribunes.
Version: 1.0.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: le_noiseen
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
This theme, like WordPress, is licensed under the GPL.
Le Noiséen is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* =====================================================================
VIEW TRANSITIONS : le CSS critique (@view-transition + animations) est
désormais imprimé INLINE dans le par le_noiseen_view_transitions_css()
(functions.php), pour échapper au chargement asynchrone du cache (LiteSpeed).
Ne pas redéfinir ici (éviter les doublons).
===================================================================== */
/* =====================================================================
Le Noiséen — Styles migrés depuis la maquette le-noiseen-v10.html
Charte graphique complète (tokens :root, layout, sections immersives).
L'ancien CSS Underscores est conservé dans style-underscores-backup.css
===================================================================== */
/* =========================================================
LE NOISÉEN — V9
Mix de : index.html (logo + fond ambiance), proto-v3
(entête → corps éditorial) et v4 (blocs : à la une de la
semaine, quartiers, mur de l'agenda, annuaire, commerces,
tribune, footer). Tout est harmonisé sur la CHARTE GRAPHIQUE.
Évolutions V7 :
- Mur de l'agenda + annuaire : mise en page et animation
reprises de la v4 (blocs collés, bordures partagées,
affiches inclinées) mais recolorées charte.
- Sections Quartiers (bleu profond) et Annuaire (vert sapin)
passées sur fond foncé avec cartes translucides.
- Nouveau bloc Tribune vedette (pleine largeur, fond foncé).
- 3 espaces partenaires (1 billboard + 2 encarts contextuels).
========================================================= */
/* =========================================================
1. TOKENS / VARIABLES CHARTE GRAPHIQUE
========================================================= */
:root {
/* --- Palette de couleurs (charte) --- */
--bleu-civique: #0D2B45;
--bleu-clair: #1a3f5e; /* survols boutons bleus */
--vert-territoire: #5A8F6E;
--vert-fonce: #2c7a3a; /* vert lisible sur fond clair */
--jaune-solaire: #FFC857;
--jaune-fonce: #a96b0d; /* ambre lisible sur fond clair */
--ivoire-clair: #F7F7F4;
--ivoire-chaud: #F1F0EA; /* surfaces secondaires (remplace cream-warm v4) */
--anthracite: #1F2328;
--gris-perle: #E6E8EB;
--col-pad: var(--gap-lg); /* padding des colonnes 'À la une locale' (réduit <=1440px) */
--col-pad-x: var(--col-pad); /* padding/marge HORIZONTAL des colonnes (surchargé -40% sur col 1 & 3) */
--gris-bordure: #C9CDD3; /* bordures de grille (remplace le noir) */
--gris-bloc: #F2F3F5; /* fond très clair des colonnes/cartes */
--gris-bloc-hover: #FAFBFC; /* survol : gris quasi blanc */
--nav-asso-bg: #EFF3DD; /* fond de l'onglet ASSOCIATIONS (nav nth-child 3) */
--nav-commerce-bg: #E4F0E2; /* fond de l'onglet COMMERCES (nav nth-child 4) */
--nav-agenda-bg: #DEEDE8; /* fond de l'onglet AGENDA (nav nth-child 5) */
--nav-tribune-bg: #DCE9EE; /* fond de l'onglet TRIBUNE (nav nth-child 6) */
--nav-annonce-bg: #FBF3D9; /* fond de l'onglet PETITES ANNONCES (nav nth-child 2) */
--nav-actu-bg: #FFF6E0; /* fond de l'onglet ACTUALITÉS (nav nth-child 1) */
/* --- Fonds foncés des sections immersives (V7) --- */
--bleu-profond: #081B30; /* fond section "Quartiers" (dérivé bleu civique) */
--vert-sapin: #14342A; /* fond section "Annuaire associations" */
--marron-profond: #2E1B12; /* fond section "Commerces" (brun chaud profond) */
--bleu-petrole: #16455C; /* fond bandeau "Soutenez Le Noiséen" (bleu pétrole) */
--vert-petrole: #1E5A47; /* fond section "Vie locale" (vert pétrole, accord vert sapin) */
--bleu-ciel: #DCE7EE; /* fond clair section "Mur de l'agenda" (bleu ciel, accord pétrole/navy) */
--bleu-ciel-bord: #9FB6C6; /* bordure des affiches sur fond bleu ciel */
--gris-nuit: #241F26; /* fond encart partenaire sous "Commerces" (charbon chaud, transition marron->bleu) */
--olive-accent: #9DAE55; /* accent = bordure de l'onglet "Petites annonces" */
--olive-profond: #2E3A18; /* fond section "Petites annonces" (olive profond, dérivé de l'accent) */
--olive-clair: #EAF0D8; /* étiquettes/teintes claires olive */
--vert-quartier: #243A1E; /* fond section "Quartiers" (dérivé bordure onglet #7BA46C) */
--taupe-tribune: #2F2823; /* fond section "Tribune" (dérivé bordure onglet #8A7B72) */
--teal-assoc: #1A3C33; /* fond section "Associations" (dérivé bordure onglet #5E9B86) */
--bleu-commerce: #143042; /* fond section "Commerces" (dérivé bordure onglet #5A93AE) */
--gris-placeholder:#D5D7DB;
--rouge-alerte: #C8342B; /* badges "À la une" */
/* --- Typographies (charte) --- */
--font-titre: "Playfair Display", Georgia, "Times New Roman", serif;
--font-texte: "Source Sans 3", system-ui, -apple-system, sans-serif;
/* Alias : les blocs repris de v4 utilisaient une "mono" pour les
métadonnées ; on la mappe sur la police texte de la charte. */
--font-meta: "Source Sans 3", system-ui, sans-serif;
/* --- Espaces --- */
--gap-xs: 0.5rem;
--gap-sm: 0.75rem;
--gap-md: 1.25rem;
--gap-lg: 2rem;
--gap-xl: 3.5rem;
/* --- Layout --- */
--max-w: min(80vw, 1600px); /* >=1440px : 80% (plafonné 1600px) ; voir media queries pour 90% / 100% */
--rayon-sm: 4px;
--rayon-md: 8px;
/* --- Halos du fond ambiance (valeurs par défaut = thème neutre) ---
Chaque halo = couleur RGB pilotée par variable, ce qui permet de
redéfinir la couleur par thématique sans dupliquer les gradients. */
--halo-tl: 13, 40, 69; /* haut-gauche : bleu civique */
--halo-tr: 255, 200, 87; /* haut-droite : jaune solaire */
--halo-bl: 90, 143, 110; /* bas-gauche : vert territoire */
--halo-br: 13, 40, 69; /* bas-droite : bleu civique léger */
--halo-op-tl: 0.20; /* opacités max par coin */
--halo-op-tr: 0.26;
--halo-op-bl: 0.22;
--halo-op-br: 0.14;
}
/* =========================================================
2. RESET + BASE
========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
/* Taille racine fluide : ~15.5px (petits écrans) -> ~18px (très grands
écrans), pour une mise à l'échelle douce de tous les rem. */
font-size: clamp(15.5px, 0.7vw + 12px, 18px);
}
body {
font-family: var(--font-texte);
line-height: 1.6;
color: var(--anthracite);
background: var(--ivoire-clair);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
position: relative;
overflow-x: hidden;
max-width: 100%;
}
a {
color: var(--bleu-civique);
text-decoration: none;
transition: color 0.15s ease;
}
a:hover { color: var(--vert-territoire); }
h1, h2, h3, h4, h5 {
font-family: var(--font-titre);
font-weight: 700;
color: var(--bleu-civique);
margin: 0 0 0.5em;
line-height: 1.2;
}
img { max-width: 100%; display: block; }
.container,
.wrap {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gap-md);
position: relative;
z-index: 1;
}
/* Placeholder d'image : rectangle gris avec dimensions affichées */
.img-placeholder,
.ph {
background: var(--gris-placeholder);
display: flex;
align-items: center;
justify-content: center;
color: #6b6e75;
font-family: var(--font-texte);
font-size: 0.78rem;
letter-spacing: 0.05em;
text-transform: uppercase;
border-radius: var(--rayon-sm);
position: relative;
overflow: hidden;
}
.img-placeholder::after,
.ph::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(135deg, transparent 49.5%, rgba(0,0,0,0.06) 49.5%, rgba(0,0,0,0.06) 50.5%, transparent 50.5%),
linear-gradient(45deg, transparent 49.5%, rgba(0,0,0,0.06) 49.5%, rgba(0,0,0,0.06) 50.5%, transparent 50.5%);
pointer-events: none;
}
.img-placeholder span,
.ph span { position: relative; z-index: 1; }
/* =========================================================
3. FOND AMBIANCE (repris de index.html)
Couche fixe de 4 halos d'angle + grain discret.
Les couleurs sont pilotées par variables --halo-* afin de
pouvoir générer des variantes thématiques (voir §3bis).
========================================================= */
.ambiance {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(120% 120% at 0% 0%,
rgba(var(--halo-tl), var(--halo-op-tl)) 0%,
rgba(var(--halo-tl), calc(var(--halo-op-tl) * 0.35)) 28%,
rgba(255,255,255,0) 60%),
radial-gradient(120% 120% at 100% 0%,
rgba(var(--halo-tr), var(--halo-op-tr)) 0%,
rgba(var(--halo-tr), calc(var(--halo-op-tr) * 0.35)) 30%,
rgba(255,255,255,0) 62%),
radial-gradient(120% 120% at 0% 100%,
rgba(var(--halo-bl), var(--halo-op-bl)) 0%,
rgba(var(--halo-bl), calc(var(--halo-op-bl) * 0.35)) 30%,
rgba(255,255,255,0) 62%),
radial-gradient(120% 120% at 100% 100%,
rgba(var(--halo-br), var(--halo-op-br)) 0%,
rgba(var(--halo-br), calc(var(--halo-op-br) * 0.35)) 30%,
rgba(255,255,255,0) 60%),
var(--ivoire-clair);
animation: respire 16s ease-in-out infinite alternate;
transition: background 0.6s ease;
}
@keyframes respire {
from { transform: scale(1); opacity: 1; }
to { transform: scale(1.05); opacity: 0.94; }
}
/* Grain/texture discrète (motif de la charte) */
.ambiance::after {
content: "";
position: absolute;
inset: 0;
opacity: 0.5;
background-image: radial-gradient(rgba(13,40,69,0.05) 1px, transparent 1px);
background-size: 22px 22px;
mask-image: radial-gradient(circle at center, transparent 38%, #000 95%);
-webkit-mask-image: radial-gradient(circle at center, transparent 38%, #000 95%);
}
/* =========================================================
3bis. VARIANTES THÉMATIQUES DU FOND
Appliquer une de ces classes sur (ou sur un wrapper
.ambiance) pour teinter les halos selon la rubrique.
Les couleurs proviennent de la charte (catégories éditoriales).
Exemple :
========================================================= */
.theme-actualites { /* Bleu civique dominant */
--halo-tl: 13, 40, 69; --halo-op-tl: 0.24;
--halo-tr: 26, 63, 94; --halo-op-tr: 0.18;
--halo-bl: 90, 143, 110; --halo-op-bl: 0.16;
--halo-br: 13, 40, 69; --halo-op-br: 0.14;
}
.theme-vie-locale { /* Vert territoire dominant */
--halo-tl: 90, 143, 110; --halo-op-tl: 0.26;
--halo-tr: 255, 200, 87; --halo-op-tr: 0.16;
--halo-bl: 90, 143, 110; --halo-op-bl: 0.20;
--halo-br: 13, 40, 69; --halo-op-br: 0.12;
}
.theme-citoyennete { /* Bleu + vert équilibrés */
--halo-tl: 13, 40, 69; --halo-op-tl: 0.22;
--halo-tr: 90, 143, 110; --halo-op-tr: 0.20;
--halo-bl: 90, 143, 110; --halo-op-bl: 0.18;
--halo-br: 13, 40, 69; --halo-op-br: 0.14;
}
.theme-culture { /* Jaune solaire dominant */
--halo-tl: 255, 200, 87; --halo-op-tl: 0.30;
--halo-tr: 255, 200, 87; --halo-op-tr: 0.22;
--halo-bl: 90, 143, 110; --halo-op-bl: 0.16;
--halo-br: 13, 40, 69; --halo-op-br: 0.12;
}
.theme-associations { /* Vert + bleu chaleureux */
--halo-tl: 90, 143, 110; --halo-op-tl: 0.24;
--halo-tr: 255, 200, 87; --halo-op-tr: 0.18;
--halo-bl: 13, 40, 69; --halo-op-bl: 0.16;
--halo-br: 90, 143, 110; --halo-op-br: 0.14;
}
.theme-agenda { /* Jaune + bleu (événementiel) */
--halo-tl: 255, 200, 87; --halo-op-tl: 0.26;
--halo-tr: 13, 40, 69; --halo-op-tr: 0.20;
--halo-bl: 90, 143, 110; --halo-op-bl: 0.16;
--halo-br: 255, 200, 87; --halo-op-br: 0.14;
}
.theme-tribune { /* Bleu profond + accent jaune */
--halo-tl: 13, 40, 69; --halo-op-tl: 0.26;
--halo-tr: 255, 200, 87; --halo-op-tr: 0.16;
--halo-bl: 13, 40, 69; --halo-op-bl: 0.18;
--halo-br: 90, 143, 110; --halo-op-br: 0.12;
}
/* =========================================================
4. TOP BAR UTILITAIRE (V3)
========================================================= */
.topbar {
background: var(--bleu-civique);
color: #fff;
font-size: 0.82rem;
padding: 0.5rem 0;
position: relative;
z-index: 2;
}
.topbar .container {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--gap-md);
flex-wrap: wrap;
}
.topbar a { color: #fff; opacity: 0.9; }
.topbar a:hover { opacity: 1; color: var(--jaune-solaire); }
.topbar nav { display: flex; gap: 1.5rem; align-items: center; }
.topbar .date { letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; }
/* Icône maison (lien accueil) dans la barre utilitaire : alignée et discrète. */
.topbar-home { display: inline-flex; align-items: center; line-height: 0; opacity: 0.85; transition: opacity 0.15s ease; }
.topbar-home:hover { opacity: 1; }
/* =========================================================
5. HEADER JOURNAL (V3) — avec logo SVG de l'index
========================================================= */
.header-journal {
background: rgba(247, 247, 244, 0.82);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
padding: 2rem 0 1.6rem;
position: relative;
overflow: hidden;
z-index: 2;
}
.header-grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: var(--gap-lg);
align-items: center;
}
/* Motif noix dans l'entête, à gauche du nom "Le Noiséen" (filigrane) */
.header-journal::before {
content: "";
position: absolute;
top: -40px;
left: 360px;
width: clamp(160px, 18vw, 300px);
height: clamp(110px, 12vw, 200px);
background: url("images/noixc.png") no-repeat center;
background-size: contain;
opacity: 0.14;
pointer-events: none;
z-index: 0;
}
.header-journal > * { position: relative; z-index: 1; } /* contenu au-dessus */
@media (max-width: 860px) { .header-journal::before { display: none; } }
/* Mini-headlines latérales */
.mini-headline { font-size: 0.85rem; line-height: 1.45; }
.mini-headline .label {
font-family: var(--font-titre);
font-style: italic;
font-size: 0.78rem;
color: var(--vert-territoire);
text-transform: uppercase;
letter-spacing: 0.08em;
display: block;
margin-bottom: 0.25rem;
}
.mini-headline h4 {
font-family: var(--font-titre);
font-size: 1rem;
font-weight: 500;
margin: 0 0 0.3rem;
color: var(--anthracite);
line-height: 1.25;
}
.mini-headline p { margin: 0 0 0.3rem; color: #555; }
.mini-headline .more { font-style: italic; color: var(--vert-territoire); font-weight: 600; }
/* Bloc logo central : logo SVG (index) + titre + tagline + soulignement */
.logo-block { text-align: center; }
.logo-mark {
width: 84px;
height: auto;
margin: 0 auto 0.6rem;
display: block;
animation: flotte 6s ease-in-out infinite;
}
@keyframes flotte {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.logo-title {
font-family: var(--font-titre);
font-weight: 900;
font-size: clamp(2.4rem, 5vw, 4.2rem);
color: var(--bleu-civique);
margin: 0;
line-height: 1;
letter-spacing: -0.02em;
/* Effet "glassy / profondeur" : liseré clair en haut (lumière), ombre
interne haute (creux) + ombre portée douce dessous (relief verre).
Transition douce -> l'accentuation au survol se fait en fondu. */
text-shadow:
0 1px 0 rgba(255,255,255,0.80), /* highlight clair en haut */
0 -1px 1px rgba(13,43,69,0.40), /* ombre interne (profondeur) */
0 4px 9px rgba(13,43,69,0.25); /* ombre portée douce (relief) */
transition: text-shadow 0.5s ease;
}
/* Survol du bloc logo : profondeur accentuée + légère lueur dorée, en fondu doux */
.logo-block:hover .logo-title {
text-shadow:
0 1px 0 rgba(255,255,255,0.95),
0 -1px 2px rgba(13,43,69,0.50),
0 6px 14px rgba(13,43,69,0.32),
0 0 22px rgba(255,200,87,0.40); /* lueur jaune solaire diffuse */
}
.logo-tagline {
font-family: var(--font-titre);
font-style: italic;
font-size: 0.95rem;
color: var(--anthracite);
margin: 0.5rem 0 0.65rem;
opacity: 0.8;
}
.logo-underline {
width: 90px; height: 6px;
background: var(--jaune-solaire);
margin: 0 auto;
border-radius: 3px;
position: relative;
}
.logo-underline::before,
.logo-underline::after {
content: "";
position: absolute;
top: 50%;
width: 30px; height: 1px;
background: var(--gris-perle);
}
.logo-underline::before { right: 100%; margin-right: 12px; }
.logo-underline::after { left: 100%; margin-left: 12px; }
/* CTA "Faites un don" dans le header */
.header-cta { text-align: right; }
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1.2rem;
font-family: var(--font-texte);
font-weight: 600;
font-size: 0.92rem;
border-radius: var(--rayon-sm);
border: 0;
cursor: pointer;
transition: transform 0.1s ease, background 0.15s ease, color 0.15s ease;
text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn-don { background: var(--jaune-solaire); color: var(--bleu-civique); }
.btn-don:hover { background: #ffb724; color: var(--bleu-civique); }
.btn-primary { background: var(--bleu-civique); color: #fff; }
.btn-primary:hover { background: var(--bleu-clair); color: #fff; }
.btn-secondary {
background: transparent;
color: var(--bleu-civique);
border: 1px solid var(--bleu-civique);
}
.btn-secondary:hover { background: var(--bleu-civique); color: #fff; }
/* =========================================================
6. NAVIGATION PRINCIPALE (sticky) (V3)
========================================================= */
.nav-main {
background: var(--bleu-civique);
border-top: 1px solid rgba(255,255,255,0.12);
border-bottom: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
position: sticky;
top: 0;
z-index: 100;
padding: 0.55rem 0;
overflow: hidden; /* la branche décorative ne déborde pas hors de la barre */
}
/* =====================================================================
MOTIF DÉCORATIF « branche de noyer » (issu d'une illustration réelle).
Deux PNG monochromes prêts à l'emploi (avec nervures) :
• branche-noyer-blanc.png -> flancs du menu (fond bleu civique)
• branche-noyer-vert.png -> coin des boîtes claires
La branche monte en diagonale (élan). On règle l'intensité par l'opacité.
--noyer-opacite : ajuster d'un seul endroit (0 = invisible).
Masqué sous ~700px (mode burger : plus d'espace latéral utile).
===================================================================== */
.nav-main {
--noyer-opacite: 0.18; /* intensité du filigrane (ajustable) */
}
.nav-main::before,
.nav-main::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 250px;
height: 182px;
background: url("assets/img/branche-noyer-blanc.png") no-repeat center / contain;
opacity: var(--noyer-opacite);
pointer-events: none;
z-index: 0; /* derrière le .nav-grid (onglets) */
}
.nav-main::before { left: -18px; transform: translateY(-50%) scaleX(-1); } /* flanc gauche : branche miroir */
.nav-main::after { right: -18px; } /* flanc droit */
.nav-main .nav-grid { position: relative; z-index: 1; } /* onglets au-dessus du motif */
@media (max-width: 700px) {
.nav-main::before, .nav-main::after { display: none; }
}
/* --- Branche de noyer (verte) dans le coin bas-droite : encart accueil
« écrire » + CTA de fiche. Image PNG verte fixe (fond clair). --- */
.ecrire-cta,
.fiche-cta {
--noyer-opacite: 0.18; /* intensité (ajustable) */
position: relative;
overflow: hidden;
}
.ecrire-cta::after,
.fiche-cta::after {
content: "";
position: absolute;
right: -22px;
bottom: -22px;
width: 210px;
height: 153px;
background: url("assets/img/branche-noyer-vert.png") no-repeat center / contain;
opacity: var(--noyer-opacite);
pointer-events: none;
z-index: 0;
}
.ecrire-cta > *,
.fiche-cta > * { position: relative; z-index: 1; }
/* --- COLONNE 2 des annuaires : MÊME branche que celle déjà intégrée (formes +
nervures conservées), simplement TEINTÉE à la couleur de chaque rubrique.
Une image PNG par rubrique (générée à partir de la branche existante), choisie
via --noyer-img. Cible le PREMIER bloc, qu'il soit l'encart éditable
(.aside-editable) ou son fallback (.aside-cta). --- */
/* IMPORTANT : --noyer-img n'est PAS déclarée ici sur .aside-editable, sinon une
valeur directe sur l'élément l'emporterait sur celle HÉRITÉE du conteneur
.aside-annuaire--* (le pseudo prendrait toujours le défaut). On pose donc le
défaut sur le CONTENEUR (.aside-annuaire) et les teintes sur ses variantes :
toutes deux héritent jusqu'au pseudo, et la plus spécifique (--asso, etc.)
gagne correctement. */
.aside-editable,
.aside-annuaire > .aside-cta:first-child {
--noyer-opacite: 0.18;
position: relative;
overflow: hidden;
}
.aside-editable::after,
.aside-annuaire > .aside-cta:first-child::after {
content: "";
position: absolute;
right: -22px;
bottom: -22px;
width: 210px;
height: 153px;
background: var(--noyer-img, url("assets/img/branche-noyer-vert.png")) no-repeat center / contain;
opacity: var(--noyer-opacite);
pointer-events: none;
z-index: 0;
}
.aside-editable > *,
.aside-annuaire > .aside-cta:first-child > * { position: relative; z-index: 1; }
/* Branche teintée par rubrique (même feuillage, couleur de la rubrique).
Variable posée sur le CONTENEUR .aside-annuaire--* -> héritée par le pseudo. */
.aside-annuaire { --noyer-img: url("assets/img/branche-noyer-vert.png"); } /* défaut */
.aside-annuaire--asso { --noyer-img: url("assets/img/branche-noyer-asso.png"); } /* olive */
.aside-annuaire--commerce { --noyer-img: url("assets/img/branche-noyer-commerce.png"); } /* vert */
.aside-annuaire--agenda { --noyer-img: url("assets/img/branche-noyer-agenda.png"); } /* vert-bleu */
.aside-annuaire--tribune { --noyer-img: url("assets/img/branche-noyer-tribune.png"); } /* bleu pétrole */
.aside-annuaire--annonce { --noyer-img: url("assets/img/branche-noyer-annonce.png"); } /* ocre */
.nav-grid {
display: flex;
justify-content: center;
align-items: center;
gap: var(--gap-md);
}
.nav-main ul {
list-style: none;
display: flex;
gap: 0; /* items collés, sans marge */
flex-wrap: nowrap; /* une seule ligne ; bascule en burger via JS si ça déborde */
justify-content: center; /* items groupés, centrés (ne remplissent plus toute la barre) */
}
/* Items CARRÉS, groupés au centre (≈ 109px). */
.nav-main li {
flex: 0 0 109px; /* largeur fixe */
min-width: 0;
aspect-ratio: 1 / 1; /* carré strict */
max-height: 109px; /* hauteur (carré) */
border-right: 1px solid rgba(13, 43, 69, 0.08);
}
.nav-main li.nav-hidden { display: none; }
.nav-main li:first-child { border-left: 1px solid rgba(13, 43, 69, 0.08); }
.nav-main li a { text-align: center; white-space: nowrap; }
/* Fines séparations entre items collés + extrémités arrondies */
.nav-main li:first-child a { border-top-left-radius: var(--rayon-md); border-bottom-left-radius: var(--rayon-md); }
.nav-main li:last-child a { border-top-right-radius: var(--rayon-md); border-bottom-right-radius: var(--rayon-md); }
.nav-main li a {
position: relative;
display: flex;
flex-direction: column; /* icône SVG au-dessus, libellé dessous */
align-items: center;
justify-content: center;
gap: 0.5rem;
height: 100%; /* remplit la cellule carrée (.nav-main li) */
min-height: 41px;
padding: 0.6rem clamp(0.3rem, 0.8vw, 0.9rem);
font-size: clamp(0.62rem, 0.2vw + 0.56rem, 0.78rem);
font-weight: 600;
color: var(--anthracite);
text-transform: uppercase;
letter-spacing: 0.02em;
/* Bordure haute transparente réservée : évite tout décalage vertical
quand elle se colore au survol (même teinte que l'accent jaune). */
border-top: 3px solid transparent;
/* Bordure basse permanente, teintée selon le fond de l'item (--nav-bord) */
border-bottom: 3px solid var(--nav-bord, rgba(13, 43, 69, 0.18));
/* Reflet "liquid glass" : highlight interne haut + ombre douce en bas.
Le voile de brillance est intégré au background de chaque item (donc
toujours DERRIÈRE le texte) -> voir variable --nav-sheen. */
--nav-sheen: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.85),
inset 0 -6px 10px -6px rgba(13,43,69,0.18);
transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease, border-color 0.25s ease;
}
/* Fonds pâles colorés des items (dégradé jaune -> vert -> bleu -> marron)
restaurés, sur la barre bleu foncé : ils ressortent en pastilles. */
.nav-main li:nth-child(1) a { background: var(--nav-sheen), #FFF6E0; --nav-bord: #E8B73E; } /* jaune */
.nav-main li:nth-child(2) a { background: var(--nav-sheen), #FBF3D9; --nav-bord: #C9B84A; } /* jaune-vert */
.nav-main li:nth-child(3) a { background: var(--nav-sheen), #EFF3DD; --nav-bord: #9DAE55; } /* vert clair */
.nav-main li:nth-child(4) a { background: var(--nav-sheen), #E4F0E2; --nav-bord: #7BA46C; } /* vert */
.nav-main li:nth-child(5) a { background: var(--nav-sheen), #DEEDE8; --nav-bord: #5E9B86; } /* vert-bleu */
.nav-main li:nth-child(6) a { background: var(--nav-sheen), #DCE9EE; --nav-bord: #5A93AE; } /* bleu clair */
.nav-main li:nth-child(7) a { background: var(--nav-sheen), #DEE6ED; --nav-bord: #5277A0; } /* bleu */
.nav-main li:nth-child(8) a { background: var(--nav-sheen), #E6E3E2; --nav-bord: #8A7B72; } /* bleu-gris/taupe */
.nav-main li:nth-child(9) a { background: var(--nav-sheen), #ECE3DA; --nav-bord: #A07C56; } /* marron */
/* --- Icône SVG centrée au-dessus du libellé (via CSS mask : fonctionne que le
menu soit dynamique ou de secours). Couleur = celle du texte de l'item. --- */
.nav-main li a::before {
content: "";
display: block;
width: clamp(22px, 2vw, 30px);
height: clamp(22px, 2vw, 30px);
background-color: currentColor; /* l'icône prend la couleur du texte */
-webkit-mask: var(--nav-ico) center / contain no-repeat;
mask: var(--nav-ico) center / contain no-repeat;
flex-shrink: 0;
transition: background-color 0.25s ease;
}
/* Une icône par rubrique (ordre du menu : Actualités, Petites annonces,
Associations, Commerces, Agenda, Tribune…). SVG en data-URI (trait =
currentColor via le mask ; le dessin reprend le sprite du thème). */
.nav-main li:nth-child(1) a { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E"); }
.nav-main li:nth-child(2) a { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18h-9a2 2 0 0 1-2-2V5a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v13a2 2 0 0 0 2 2 2 2 0 0 0 2-2V8a1 1 0 0 0-1-1h-3'/%3E%3Cpath d='M7 8h6M7 12h6M7 16h4'/%3E%3C/svg%3E"); }
.nav-main li:nth-child(3) a { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.nav-main li:nth-child(4) a { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); }
.nav-main li:nth-child(5) a { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.nav-main li:nth-child(6) a { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E"); }
.nav-main li:nth-child(7) a { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); }
.nav-main li:nth-child(8) a { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4'/%3E%3C/svg%3E"); }
.nav-main li:nth-child(9) a { --nav-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E"); }
/* Soulignement animé : se déploie depuis la gauche au survol,
dans la teinte propre à l'item (--nav-bord). */
.nav-main li a::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 5px;
background: var(--nav-bord, var(--jaune-solaire));
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.28s cubic-bezier(.2,.7,.3,1);
}
.nav-main li a:hover {
color: var(--bleu-civique);
filter: brightness(0.96);
border-top-color: var(--nav-bord);
border-bottom-color: var(--nav-bord);
}
.nav-main li a:hover::after { transform: scaleX(1); }
/* État ACTIF (page courante) : on couvre la classe .active du menu de secours
ET les classes ajoutées par WordPress sur un menu assigné
(.current-menu-item / .current_page_item / ancêtres). */
.nav-main li a.active,
.nav-main li.current-menu-item > a,
.nav-main li.current_page_item > a,
.nav-main li.current-menu-parent > a,
.nav-main li.current-menu-ancestor > a {
color: var(--bleu-civique);
font-weight: 700; /* libellé plus appuyé */
border-top-color: var(--nav-bord);
border-bottom-color: var(--nav-bord);
background-blend-mode: multiply; /* fond légèrement plus dense */
}
/* Soulignement actif : déployé ET plus épais que le survol (repère « vous êtes ici »). */
.nav-main li a.active::after,
.nav-main li.current-menu-item > a::after,
.nav-main li.current_page_item > a::after,
.nav-main li.current-menu-parent > a::after,
.nav-main li.current-menu-ancestor > a::after {
transform: scaleX(1);
height: 8px; /* plus épais que les 5px du survol */
}
/* Icône de l'onglet actif : teintée dans la couleur de la rubrique (--nav-bord). */
.nav-main li a.active::before,
.nav-main li.current-menu-item > a::before,
.nav-main li.current_page_item > a::before,
.nav-main li.current-menu-parent > a::before,
.nav-main li.current-menu-ancestor > a::before {
background-color: var(--nav-bord);
}
/* Barre de recherche */
.search-form {
display: flex;
align-items: center;
background: #fff;
border: 1.5px solid #aab2bd; /* bordure grise bien lisible */
border-radius: var(--rayon-sm);
padding: 0.4rem 0.75rem;
min-width: 240px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-form:focus-within {
border-color: var(--bleu-civique);
box-shadow: 0 0 0 3px rgba(13, 43, 69, 0.12);
}
.search-form input {
border: 0;
background: transparent;
font-family: var(--font-texte);
font-size: 0.88rem;
color: var(--anthracite);
flex: 1;
outline: none;
}
.search-form button {
background: transparent;
border: 0;
color: var(--bleu-civique);
cursor: pointer;
padding: 0;
display: flex;
}
/* =========================================================
6bis. MENU BURGER + PANNEAU LATÉRAL (mobile, V8)
========================================================= */
/* Mode "burger" forcé quand le menu ne tient pas sur une ligne (via JS) */
.nav-main.nav-collapsed ul { display: none; }
.nav-main.nav-collapsed .nav-burger { display: inline-flex; }
.nav-main.nav-collapsed .nav-grid { justify-content: space-between; }
.nav-don { display: none; }
.nav-main.nav-collapsed .nav-don { display: inline-flex; }
/* Bouton burger : masqué au-dessus de 860px (voir media query) */
.nav-burger {
display: none;
align-items: center;
gap: 0.5rem;
background: transparent;
border: 1px solid rgba(255,255,255,0.4);
border-radius: var(--rayon-sm);
padding: 0.5rem 0.8rem;
font-family: var(--font-texte);
font-weight: 700;
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #fff;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-burger:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.nav-burger svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
/* Overlay sombre derrière le panneau */
.nav-overlay {
position: fixed;
inset: 0;
background: rgba(8, 27, 48, 0.5);
z-index: 200;
opacity: 0;
transition: opacity 0.28s ease;
}
.nav-overlay.open { opacity: 1; }
/* Panneau latéral (aside) qui glisse depuis la droite */
.nav-aside {
position: fixed;
top: 0; right: 0;
height: 100%;
width: 90vw; /* le panneau recouvre 90 % de la largeur du device */
max-width: 460px; /* garde-fou sur grands écrans / tablettes */
background: var(--bleu-profond);
color: #fff;
z-index: 201;
/* Padding bas = hauteur du pied de page fixe mobile (.footer-mobile, 64px
+ safe-area iOS, identique au padding-bottom du body) + 30px de marge
supplémentaire, pour que la barre fixe ne masque pas le bas de l'aside
(tuile « don », liens légaux). */
padding: 1.25rem 1.25rem calc(94px + env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(.2,.7,.3,1);
overflow-y: auto;
box-shadow: -8px 0 30px rgba(0,0,0,0.3);
}
.nav-aside.open { transform: translateX(0); }
.nav-aside-head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 1rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid rgba(255,255,255,0.18);
}
.nav-aside-title {
font-family: var(--font-titre);
font-weight: 900;
font-size: 1.4rem;
color: #fff;
}
.nav-aside-close {
background: transparent;
border: 0;
color: rgba(255,255,255,0.85);
cursor: pointer;
padding: 0.25rem;
display: flex;
border-radius: var(--rayon-sm);
transition: background 0.15s ease, color 0.15s ease;
}
.nav-aside-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.nav-aside-close svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
/* Menu en grille de tuiles CARRÉES (icône + libellé), 3 colonnes, espace optimisé. */
.nav-aside-list {
list-style: none;
margin: 0.75rem 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
}
/* La cellule de grille (li) porte le ratio carré : largeur = 1fr (donc fonction
de la largeur de l'écran), hauteur = largeur grâce à aspect-ratio. Toutes les
tuiles ont ainsi STRICTEMENT la même taille, dynamique selon l'écran. */
.nav-aside-list li {
margin: 0;
min-width: 0; /* évite tout débordement de la grille */
aspect-ratio: 1 / 1; /* chaque cellule est un carré */
}
.nav-aside-list a {
width: 100%;
height: 100%; /* la tuile remplit toute la cellule carrée */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.5rem 0.3rem;
text-align: center;
overflow: hidden; /* un libellé long ne casse pas le carré */
box-sizing: border-box;
color: rgba(255,255,255,0.88);
font-family: var(--font-texte);
font-weight: 600;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1.15;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--rayon-sm);
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.nav-aside-list a svg {
width: 26px;
height: 26px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.18s ease, transform 0.18s ease;
}
.nav-aside-list a span { display: block; }
.nav-aside-list a:hover,
.nav-aside-list a:focus-visible {
background: rgba(255,255,255,0.12);
border-color: var(--jaune-solaire);
color: #fff;
transform: translateY(-2px);
}
.nav-aside-list a:hover svg,
.nav-aside-list a:focus-visible svg {
stroke: var(--jaune-solaire);
transform: scale(1.08);
}
/* 9e tuile « Faites un don » : jaune TRÈS CLAIR au repos, jaune VIF au survol.
Effet hover volontairement différent des autres tuiles du menu.
Sélecteur qualifié (.nav-aside-list a…) pour passer devant la règle de base
« .nav-aside-list a » (sinon le fond gris translucide l'emporte). */
.nav-aside-list a.nav-aside-don-tile {
background: #FFF3D6; /* jaune très clair */
border-color: #FFE3A1;
color: var(--bleu-civique);
}
.nav-aside-list a.nav-aside-don-tile svg { stroke: var(--bleu-civique); }
.nav-aside-list a.nav-aside-don-tile:hover,
.nav-aside-list a.nav-aside-don-tile:focus-visible {
background: var(--jaune-solaire); /* jaune vif au survol */
border-color: var(--jaune-solaire);
color: var(--bleu-civique);
transform: translateY(-2px);
}
.nav-aside-list a.nav-aside-don-tile:hover svg,
.nav-aside-list a.nav-aside-don-tile:focus-visible svg {
stroke: var(--bleu-civique);
transform: scale(1.08);
}
/* Réseaux sociaux dans l'aside (centrés, effet hover) — poussés vers le bas. */
.nav-aside-socials {
display: flex;
justify-content: center;
gap: 0.85rem;
margin-top: auto;
padding-top: 1.25rem;
border-top: 1px solid rgba(255,255,255,0.15);
}
.nav-aside-socials a {
width: 42px; height: 42px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,0.08);
color: #fff;
font-weight: 700;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.nav-aside-socials a:hover {
background: var(--jaune-solaire);
color: var(--bleu-civique);
transform: translateY(-3px) scale(1.08);
}
/* Liens légaux : tout petits, presque invisibles, tout en bas de l'aside. */
.nav-aside-legal {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.15rem 0.75rem;
margin-top: 0.9rem;
text-align: center;
}
.nav-aside-legal a {
color: rgba(255,255,255,0.28);
font-size: 0.62rem;
letter-spacing: 0.02em;
text-decoration: none;
transition: color 0.15s ease;
}
.nav-aside-legal a:hover,
.nav-aside-legal a:focus-visible { color: rgba(255,255,255,0.7); }
/* Tagline mobile : masquée par défaut (desktop) */
.tagline-mobile { display: none; }
/* =========================================================
7. BANDEAU "EN BREF" (breaking news) (V3)
========================================================= */
.breaking {
background: var(--jaune-solaire);
padding: 0.6rem 0;
border-bottom: 1px solid #e0b347;
position: relative;
z-index: 2;
}
.breaking .container {
display: flex;
gap: 1rem;
align-items: center;
font-size: 0.9rem;
}
.breaking .tag {
background: var(--bleu-civique);
color: #fff;
padding: 0.2rem 0.6rem;
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.08em;
border-radius: var(--rayon-sm);
text-transform: uppercase;
flex-shrink: 0;
}
.breaking .ticker {
color: var(--bleu-civique);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.breaking .ticker strong { font-weight: 700; }
/* =========================================================
8. CORPS — GRILLE 3 COLONNES (V3)
========================================================= */
.main-grid {
display: grid;
grid-template-columns: 240px 1fr 280px;
grid-template-rows: auto auto;
gap: 0;
margin: var(--gap-md) 0 var(--gap-lg); /* moins d'espace en haut : le titre est juste au-dessus */
/* Grille de visualisation : cadre + filets internes en noir 3px, sans arrondi */
border: 2px solid var(--gris-bordure);
background: rgba(255, 255, 255, 0.5);
}
/* Colonnes en flex -> permet de pousser les encarts pub tout en bas */
.col-left, .col-center, .col-right {
display: flex;
flex-direction: column;
/* padding vertical = --col-pad ; padding horizontal = --col-pad-x */
padding: var(--col-pad) var(--col-pad-x);
}
/* Colonnes 1 & 3 : padding gauche/droite réduit de 40% (--col-pad-x à 60%).
--col-pad-x est aussi repris par les filets/encarts "flush" de ces colonnes,
donc ils restent correctement étirés jusqu'aux bords. */
.col-left, .col-right { --col-pad-x: calc(var(--col-pad) * 0.6); }
/* Placement explicite rangée 1 */
.col-left { grid-column: 1; grid-row: 1; background: var(--gris-bloc); transition: background 0.2s ease; }
.col-center { grid-column: 2; grid-row: 1; border-left: 2px solid var(--gris-bordure); border-right: 2px solid var(--gris-bordure); }
.col-right { grid-column: 3; grid-row: 1 / span 2; background: var(--gris-bloc); transition: background 0.2s ease; }
/* Survol : on n'éclaire QUE le bloc survolé (pas toute la colonne). Le fond de
colonne (--gris-bloc) reste fixe ; chaque bloc autonome a son propre :hover.
.breve a déjà le sien (voir plus bas) ; on ajoute ici les blocs de droite. */
.top-block:hover { background: var(--gris-bloc-hover); transition: background 0.2s ease; }
/* .initiative-card a déjà un fond ivoire propre (bloc autonome) : on l'assombrit
très légèrement au survol plutôt que de la passer en gris. */
.initiative-card { transition: filter 0.2s ease; }
.initiative-card:hover { filter: brightness(0.97); }
/* Bloc Top (titre + liste) : padding horizontal aligné sur les brèves + marges
négatives latérales pour que le fond de survol s'étende d'un bord à l'autre de
la colonne (même technique que .breve). La marge négative HAUTE annule le
padding-top de la colonne (sinon espace vide en haut) ; un padding-top propre
redonne l'air voulu — réglable ici. */
.top-block {
padding: calc(var(--col-pad) - 4px) var(--col-pad-x) 0.6rem; /* -4px : retire le surplus en haut */
margin: calc(var(--col-pad) * -1) calc(var(--col-pad-x) * -1) 2rem; /* remonte au ras du haut */
transition: background 0.2s ease;
}
/* Le titre du Top : on neutralise le demi-leading au-dessus des majuscules
(line-height 1.05) pour qu'il colle parfaitement au haut du bloc. */
.top-block .section-title { margin-top: -2px; }
.top-block .top-list { margin-bottom: 0; } /* l'espacement vit désormais sur .top-block */
/* Rangée 2 : CTA sur colonnes 1-2 (la colonne 3 reste vide en rangée 2) */
.cell-cta { grid-column: 1 / span 2; grid-row: 2; display: flex; }
/* Encart pub colonne gauche : poussé tout en bas, étiré aux bords (flush),
grandit jusqu'au bord bas (flex:1), séparé du bloc au-dessus. */
.col-left .pub {
margin: 0 calc(var(--col-pad-x) * -1) calc(var(--col-pad) * -1); /* flush bas + côtés */
margin-top: auto; /* ancré en bas de la colonne */
flex: 1 0 auto; /* remplit jusqu'en bas -> pas de bande blanche */
min-height: 360px;
border: 0;
border-top: 2px solid var(--gris-bordure); /* séparation nette avec l'article précédent */
border-radius: 0;
padding: var(--gap-lg);
display: flex;
flex-direction: column;
justify-content: center;
}
.col-right .section-title {
font-family: var(--font-titre);
font-weight: 700;
font-size: clamp(1.6rem, 1.4vw + 1.1rem, 2.2rem);
line-height: 1.05;
color: var(--bleu-civique);
letter-spacing: -0.02em;
margin: 0 0 1.25rem;
}
.col-right .section-title::after {
content: "";
display: block;
width: 60px; height: 4px;
background: var(--jaune-solaire);
margin: 0.6rem 0 0;
border-radius: 2px;
}
/* "À la une locale" : titre éditorial AU-DESSUS de la grille (style "Naviguez par quartier") */
.une-locale-titre {
font-family: var(--font-titre);
font-weight: 700;
font-size: clamp(1.8rem, 1.6vw + 1.2rem, 2.6rem);
line-height: 1.05;
color: var(--bleu-civique);
letter-spacing: -0.02em;
margin: var(--gap-lg) 0 0;
}
.une-locale-titre::after {
content: "";
display: block;
width: 60px; height: 4px;
background: var(--jaune-solaire);
margin: 0.6rem 0 0;
border-radius: 2px;
}
/* "À la une locale" : brèves séparées par un filet horizontal (effet tableau).
Pas de cadre propre : la colonne sert déjà de cadre. Les filets vont d'un
bord à l'autre grâce aux marges négatives compensant le padding de colonne. */
.col-left .breves {
/* étire les filets jusqu'aux bords + remonte au ras du haut de la colonne
(compense le padding de colonne) : pas de case vide au-dessus */
margin: calc(var(--col-pad) * -1) calc(var(--col-pad-x) * -1) 0;
}
.breve {
padding: 1.1rem var(--col-pad-x);
margin: 0;
border-bottom: 2px solid var(--gris-bordure);
transition: background 0.15s ease;
}
.breve:first-child { border-bottom: 2px solid var(--gris-bordure); }
.breve:last-child { border-bottom: 0; }
.breve:hover { background: var(--gris-bloc-hover); }
.breve .img-placeholder { height: 130px; margin-bottom: 0.6rem; }
.breve .cat {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
color: var(--vert-fonce);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.3rem;
}
.breve h3 {
font-size: 1.05rem;
font-weight: 700;
line-height: 1.25;
margin: 0 0 0.4rem;
color: var(--bleu-civique);
}
.breve p { font-size: 0.88rem; color: #555; margin: 0 0 0.4rem; line-height: 1.5; }
.byline { font-size: 0.78rem; color: #888; font-style: italic; }
.byline strong { color: var(--vert-fonce); font-style: normal; font-weight: 600; }
/* Colonne centre : article principal */
.col-center .badge-une {
display: inline-block;
background: var(--rouge-alerte);
color: #fff;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
padding: 0.3rem 0.8rem;
border-radius: var(--rayon-sm);
text-transform: uppercase;
margin-bottom: 1rem;
}
.col-center .img-hero { height: 420px; margin-bottom: 1.25rem; }
/* L'image (ou le placeholder) remplit le cadre 420px de haut sans se déformer :
object-fit:cover rogne le surplus au lieu d'étirer le visuel. La largeur du
cadre étant fluide (colonne centrale), c'est indispensable pour conserver le
ratio de la photo, quelle que soit la largeur d'écran. */
.col-center .img-hero img,
.col-center .img-hero .img-placeholder,
.col-center .img-hero .ph {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.col-center h1.article-title {
font-size: clamp(1.8rem, 3vw, 2.6rem);
line-height: 1.15;
color: var(--bleu-civique);
margin: 0 0 0.75rem;
font-weight: 900;
}
.col-center .accroche {
font-family: var(--font-titre);
font-style: italic;
font-size: 1.15rem;
color: #444;
margin: 0 0 1rem;
line-height: 1.45;
}
.col-center .meta {
font-size: 0.85rem;
color: #777;
margin: 0 0 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--gris-perle);
}
.col-center .meta strong { color: var(--vert-fonce); font-weight: 600; }
.col-center .article-body p { font-size: 1rem; color: #333; margin: 0 0 0.9rem; line-height: 1.7; }
.col-center .article-body p:first-of-type:first-letter {
font-family: var(--font-titre);
font-size: 3.2rem;
font-weight: 900;
float: left;
line-height: 0.9;
margin: 0.1rem 0.5rem 0 0;
color: var(--bleu-civique);
}
.col-center .lire-plus {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.5rem;
font-weight: 600;
color: var(--bleu-civique);
}
.col-center .lire-plus:hover { color: var(--vert-territoire); }
.articles-secondaires {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin: 2.5rem calc(var(--col-pad) * -1) 0; /* étiré jusqu'aux bords de la colonne */
border-top: 2px solid var(--gris-bordure);
}
.art-sec {
padding: 1.25rem var(--col-pad);
transition: background 0.15s ease; /* même transition que les brèves (col. gauche) */
}
.art-sec + .art-sec { border-left: 2px solid var(--gris-bordure); } /* filet vertical entre les deux */
/* Survol IDENTIQUE aux brèves de la 1re colonne : léger fond au survol. Le titre
qui passe au vert et le zoom de l'image sont déjà gérés plus bas (groupes de
survol mutualisés .breve/.art-sec/.une-hero). */
.art-sec:hover { background: var(--gris-bloc-hover); }
/* Bloc CTA "Envie d'écrire pour Le Noiséen" (bas de la colonne centrale) */
.ecrire-cta {
width: 100%;
background: var(--vert-sapin);
color: #fff;
border-top: 2px solid var(--gris-bordure);
padding: var(--gap-xl) var(--gap-lg);
padding-right: 2px; /* léger décalage droite demandé */
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.ecrire-cta .label {
font-family: var(--font-texte);
font-weight: 700;
font-size: 0.74rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--jaune-solaire);
margin: 0 0 0.5rem;
}
.ecrire-cta h3 {
font-family: var(--font-titre);
font-weight: 700;
font-size: clamp(1.5rem, 1vw + 1.2rem, 2rem);
line-height: 1.1;
color: #fff;
margin: 0 0 0.6rem;
letter-spacing: -0.01em;
}
.ecrire-cta p {
font-size: 0.98rem;
line-height: 1.55;
color: rgba(255,255,255,0.82);
margin: 0 auto 1.25rem;
max-width: 46ch;
}
.ecrire-cta .btn-ecrire {
display: inline-block;
align-self: center; /* ne s'étire pas dans le flex column */
width: auto; /* largeur = contenu, pas 100% */
background: var(--jaune-solaire);
color: var(--bleu-civique);
padding: 0.8rem 1.5rem;
font-family: var(--font-texte);
font-weight: 600;
font-size: 0.95rem;
border-radius: var(--rayon-sm);
transition: background 0.15s ease, transform 0.1s ease;
}
.ecrire-cta .btn-ecrire:hover { background: #ffb724; color: var(--bleu-civique); transform: translateY(-1px); }
.art-sec .img-placeholder { height: 160px; margin-bottom: 0.6rem; }
.art-sec .cat {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
color: var(--vert-fonce);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.3rem;
}
.art-sec h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.2; margin: 0 0 0.4rem; color: var(--bleu-civique); }
.art-sec p { font-size: 0.9rem; color: #555; margin: 0 0 0.4rem; line-height: 1.5; }
/* Colonne droite : top + initiative */
/* Liste en colonne avec un petit espace entre les cartes (plus de filet). */
.top-list { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* Chaque entrée = carte gris TRÈS clair, qui s'assombrit légèrement au survol. */
.top-list li {
display: flex;
gap: 0.7rem;
align-items: flex-start;
padding: 0.7rem 0.75rem;
background: #F5F4F1; /* gris très clair */
border-radius: var(--rayon-md);
transition: background 0.15s ease;
}
.top-list li:hover { background: #ECEBE6; } /* survol : un cran plus foncé */
.top-list .num {
font-family: var(--font-titre);
font-size: 2.2rem;
font-weight: 900;
color: var(--jaune-solaire);
line-height: 1;
flex-shrink: 0;
min-width: 36px;
-webkit-text-stroke: 1px #e0b347;
}
.top-list a { flex: 1; font-size: 0.92rem; font-weight: 600; line-height: 1.3; color: var(--bleu-civique); }
.top-list li:hover a { color: var(--vert-territoire); } /* titre coloré au survol (cohérent site) */
.top-list .meta-small {
display: block;
font-size: 0.75rem;
color: #888;
font-weight: 400;
margin-top: 0.25rem;
font-style: italic;
}
.initiative-card {
background: var(--ivoire-clair);
margin: 0 calc(var(--col-pad-x) * -1) var(--gap-lg); /* 100% largeur colonne, flush */
padding: var(--gap-lg);
border-top: 2px solid var(--gris-bordure); /* séparation cohérente grille */
}
.initiative-card .label-init {
font-size: 0.72rem;
font-weight: 700;
color: var(--vert-fonce);
text-transform: uppercase;
letter-spacing: 0.08em;
display: block;
margin-bottom: 0.4rem;
}
.initiative-card h4 { font-size: 1.05rem; margin: 0 0 0.5rem; color: var(--bleu-civique); line-height: 1.25; }
.initiative-card p { font-size: 0.85rem; color: #555; margin: 0; line-height: 1.5; }
/* =========================================================
8bis. LIENS D'ARTICLES (titre + image) — effet survol harmonisé
"Titre vert + zoom image doux". Le titre et l'image sont deux liens
distincts, mais survoler l'un OU l'autre anime les deux (effet carte).
--------------------------------------------------------- */
/* Lien-titre : enveloppe le h1/h3/h4 sans en changer l'apparence au repos.
La couleur du titre est portée par le (héritée du h*), puis vire au
vert territoire au survol de toute la carte. */
.titre-lien {
color: inherit;
text-decoration: none;
display: inline;
transition: color 0.2s ease;
}
/* Lien-image : conteneur du visuel cliquable. overflow:hidden rogne le zoom. */
.img-lien {
display: block;
overflow: hidden;
border-radius: var(--rayon-sm);
position: relative;
cursor: pointer;
}
/* L'image (placeholder ou ![]()
) zoome en douceur ; un voile sombre apparaît. */
.img-lien .img-placeholder,
.img-lien img {
transition: transform 0.45s cubic-bezier(.2,.7,.3,1), filter 0.3s ease;
transform-origin: center;
}
/* PAGE D'ACCUEIL — brèves de la colonne 1 : cadrer les photos PAR LE HAUT pour
ne jamais couper le visage (object-fit:cover rognait le haut au centrage). */
.home .col-left .breve .img-lien img { object-position: top center; }
.img-lien::after {
content: "";
position: absolute;
inset: 0;
background: var(--bleu-civique);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 2;
}
/* Déclencheur : survol de la carte parente (ou directement du lien). */
.breve:hover .titre-lien,
.art-sec:hover .titre-lien,
.une-hero:hover .titre-lien,
.titre-lien:hover {
color: var(--vert-territoire);
}
.breve:hover .img-lien .img-placeholder,
.breve:hover .img-lien img,
.art-sec:hover .img-lien .img-placeholder,
.art-sec:hover .img-lien img,
.une-hero:hover .img-lien .img-placeholder,
.une-hero:hover .img-lien img,
.img-lien:hover .img-placeholder,
.img-lien:hover img {
transform: scale(1.04);
filter: brightness(0.92);
}
.breve:hover .img-lien::after,
.art-sec:hover .img-lien::after,
.une-hero:hover .img-lien::after,
.img-lien:hover::after {
opacity: 0.12;
}
/* Encart partenaire cliquable : tout le bloc devient un lien.
Au survol : la bordure s'éclaire et le fond se rehausse légèrement,
sans casser la mise en page (le bloc garde display:flex via .pub). */
a.pub {
text-decoration: none;
transition: filter 0.25s ease, box-shadow 0.25s ease, transform 0.1s ease;
cursor: pointer;
}
a.pub:hover {
filter: brightness(1.12);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}
a.pub.pub-dark:hover .pub-label { color: #ffd47a; } /* jaune un cran plus clair */
/* =========================================================
9. ENCARTS PARTENAIRES / PUB (V3)
========================================================= */
.pub {
background: repeating-linear-gradient(45deg, #efefe9, #efefe9 10px, #e6e6df 10px, #e6e6df 20px);
border: 1px dashed #b8b8a8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem;
margin: 1rem 0;
color: #888;
text-align: center;
border-radius: var(--rayon-sm);
}
.pub .pub-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #999;
margin-bottom: 0.3rem;
}
.pub .pub-size { font-size: 1rem; font-weight: 600; color: #666; }
.pub-300x250 { height: 250px; max-width: 300px; margin-left: auto; margin-right: auto; }
.col-left .pub-300x250 { height: auto; max-width: none; flex: 1 0 auto; }
.pub-300x600 { height: 600px; max-width: 300px; margin-left: auto; margin-right: auto; }
/* Pub colonne droite : poussée en bas, remplit tout le vide au-dessus
-> bloc très haut, indépendant du CTA vert (séparé par le cadre de grille). */
.col-right .pub-col3 {
margin: var(--gap-lg) calc(var(--col-pad-x) * -1) calc(var(--col-pad) * -1); /* flush bas + côtés */
margin-top: auto; /* ancré en bas de la colonne */
flex: 1 0 auto; /* grandit pour remplir le bas -> pas de vide en dessous */
width: auto;
min-height: 720px; /* +50% (480 -> 720px) */
max-width: none;
border: 0;
border-radius: 0;
padding: var(--gap-lg);
padding-left: 4px; /* léger décalage gauche demandé */
display: flex;
flex-direction: column;
justify-content: center;
}
/* (300x600 hérite de .col-right .pub ci-dessous) */
/* Encarts partenaires DANS les colonnes de la grille : occupent 100% de la
largeur du bloc (pas de marge extérieure), collés aux bords de la colonne,
avec un filet de séparation 3px noir au-dessus. */
.col-left .pub, .col-right .pub {
max-width: none;
width: auto;
/* Marges horizontales seulement : on étire l'encart jusqu'aux bords de la
colonne SANS écraser les marges verticales (margin-top:auto + flush bas)
définies plus haut, qui collent l'encart tout en bas du bloc. */
margin-left: calc(var(--col-pad-x) * -1);
margin-right: calc(var(--col-pad-x) * -1);
border-radius: 0;
border: 0;
border-top: 2px solid var(--gris-bordure); /* séparation au-dessus de l'encart */
padding: var(--gap-lg);
}
.pub-billboard { height: 200px; margin: var(--gap-lg) 0; }
/* =========================================================
10. SECTIONS PLEINE LARGEUR — base commune
========================================================= */
.section { padding: var(--gap-xl) 0; position: relative; z-index: 1; }
.section-cta { text-align: center; margin-top: var(--gap-lg); }
/* En-tête de section "éditoriale" alignée à gauche (repris de v4,
recoloré charte) : grand titre Playfair + intro italique. */
.section-title-block {
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--gap-lg);
align-items: end;
margin-bottom: var(--gap-lg);
padding-bottom: 1.5rem;
border-bottom: 2px solid var(--bleu-civique);
}
.section-title-block h2 {
font-family: var(--font-titre);
font-weight: 700;
font-size: clamp(2.2rem, 4.5vw, 3.6rem);
margin: 0;
line-height: 1;
color: var(--bleu-civique);
letter-spacing: -0.02em;
grid-column: 2;
}
.section-title-block h2::after {
content: "";
display: block;
width: 60px; height: 4px;
background: var(--rubrique-accent, var(--jaune-solaire)); /* accent de la rubrique, sinon jaune */
margin: 0.7rem 0 0;
border-radius: 2px;
}
.section-title-block .intro {
font-family: var(--font-titre);
font-style: italic;
font-size: 1.05rem;
color: #555;
margin: 0;
line-height: 1.45;
grid-column: 2;
max-width: 600px;
}
/* =========================================================
11. SECTION ÉDITORIALE — articles sans image (V3)
========================================================= */
.news-block { margin-bottom: var(--gap-xl); }
.news-block:last-child { margin-bottom: 0; }
.news-block .rubrique {
margin-bottom: var(--gap-lg);
padding-bottom: 1.25rem;
border-bottom: 2px solid var(--bleu-civique);
}
/* Titre de rubrique = même style éditorial que "Naviguez par quartier" */
.news-block .rubrique h3 {
font-family: var(--font-titre);
font-weight: 700;
font-size: clamp(1.8rem, 1.6vw + 1.2rem, 2.6rem);
line-height: 1.05;
color: var(--bleu-civique);
letter-spacing: -0.02em;
margin: 0;
}
.news-block .rubrique h3::after {
content: "";
display: block;
width: 60px; height: 4px;
background: var(--jaune-solaire);
margin: 0.6rem 0 0;
border-radius: 2px;
}
/* Lien "Voir tout" en fin de bloc (après les 3 articles) */
.news-block .voir-tout-fin {
display: inline-block;
margin-top: var(--gap-lg);
font-weight: 700;
font-size: 0.9rem;
color: var(--vert-fonce);
}
.news-block .voir-tout-fin:hover { color: var(--bleu-civique); }
/* Variante sur fond foncé (section vert pétrole) */
.section-dark .news-block .rubrique { border-bottom-color: rgba(255,255,255,0.25); }
.section-dark .news-block .rubrique h3 { color: #fff; }
.section-dark .news-block .voir-tout-fin { color: var(--jaune-solaire); }
.section-dark .news-block .voir-tout-fin:hover { color: #fff; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.news-article { padding: 0 var(--gap-lg); }
.news-article:first-child { padding-left: 0; }
.news-article:last-child { padding-right: 0; }
.news-article + .news-article { border-left: 1px solid var(--gris-perle); }
/* Variante quadrillée : chaque article dans une case bordée (table).
Filet partagé via border-top/left sur la grille + border-right/bottom
sur chaque cellule — même technique que les autres blocs en tableau. */
.news-grid.quadrille {
--quadrille-line: rgba(13, 43, 69, 0.22); /* filet bleu civique, bien visible */
border-top: 1.5px solid var(--quadrille-line);
border-left: 1.5px solid var(--quadrille-line);
}
.news-grid.quadrille .news-article {
padding: 1.5rem;
border-right: 1.5px solid var(--quadrille-line);
border-bottom: 1.5px solid var(--quadrille-line);
transition: background 0.15s ease;
}
/* Neutralise les règles de la grille "colonnes simples" */
.news-grid.quadrille .news-article:first-child { padding-left: 1.5rem; }
.news-grid.quadrille .news-article:last-child { padding-right: 1.5rem; }
.news-grid.quadrille .news-article + .news-article { border-left: 0; }
.news-grid.quadrille .news-article:hover { background: var(--ivoire-chaud); }
/* Bloc article entièrement cliquable (stretched link) + titre en fondu au survol */
.news-grid.quadrille .news-article { position: relative; }
.news-article .article-link {
position: absolute;
inset: 0;
z-index: 1;
text-indent: -9999px;
overflow: hidden;
}
/* "Lire la suite" reste cliquable/animable au-dessus du lien de bloc */
.news-article .lire-suite { position: relative; z-index: 2; }
.news-article .date { font-size: 0.82rem; color: #888; margin: 0 0 0.6rem; }
.news-article h4 {
font-family: var(--font-titre);
font-size: 1.35rem;
font-weight: 700;
line-height: 1.2;
color: var(--bleu-civique);
margin: 0 0 1rem;
transition: color 0.3s ease; /* fondu de couleur au survol du bloc */
}
.news-article p { font-size: 0.95rem; color: #555; line-height: 1.65; margin: 0 0 1rem; }
.news-article .lire-suite {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-weight: 700;
color: var(--anthracite);
font-size: 0.9rem;
}
.news-article .lire-suite::after {
content: "›";
font-size: 1.3em;
line-height: 1;
transition: transform 0.15s ease;
}
.news-article .lire-suite:hover { color: var(--vert-territoire); }
.news-article .lire-suite:hover::after { transform: translateX(4px); }
/* =========================================================
13. "NAVIGUEZ PAR QUARTIER" (repris V4, recoloré)
========================================================= */
.quartiers { padding: var(--gap-xl) 0; position: relative; z-index: 1; }
/* Grille "tableau" collée à bordures partagées (comme l'annuaire) :
pas d'arrondis, pas d'espaces, un seul filet entre les blocs. */
.quartiers-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
margin-top: var(--gap-lg);
border-top: 1px solid var(--quartier-line, var(--gris-perle));
border-left: 1px solid var(--quartier-line, var(--gris-perle));
}
.quartier-card {
background: var(--quartier-card, #fff);
border-right: 1px solid var(--quartier-line, var(--gris-perle));
border-bottom: 1px solid var(--quartier-line, var(--gris-perle));
padding: 1.25rem 1rem;
text-align: left;
transition: background 0.15s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
/* Filet jaune révélé au survol (animation conservée de la v4) */
.quartier-card::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 0; height: 4px;
background: var(--jaune-solaire);
transition: width 0.25s ease;
}
.quartier-card:hover::before { width: 100%; }
.quartier-card:hover { background: var(--quartier-card-hover, var(--ivoire-chaud)); }
.quartier-card .nom {
font-family: var(--font-titre);
font-weight: 700;
font-size: clamp(0.96rem, 0.4vw + 0.84rem, 1.2rem); /* noms de quartiers (-20%) */
color: var(--quartier-titre, var(--bleu-civique));
margin: 0 0 0.5rem;
line-height: 1.1;
}
.quartier-card .count {
font-family: var(--font-meta);
font-size: 0.74rem;
color: var(--quartier-meta, #888);
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0;
}
.quartier-card .count strong { color: var(--quartier-accent, var(--vert-fonce)); font-weight: 700; }
/* =========================================================
13bis. SECTIONS IMMERSIVES À FOND FONCÉ (V7)
.section-dark = base ; .bg-bleu-profond = Quartiers ;
.bg-vert-sapin = Annuaire. Cartes translucides, texte clair.
========================================================= */
.section-dark { position: relative; z-index: 1; color: rgba(255, 255, 255, 0.9); }
.section-dark.bg-bleu-profond { background: var(--bleu-profond); }
.section-dark.bg-quartier { background: linear-gradient(160deg, #2B4523 0%, var(--vert-quartier) 100%); }
.section-dark.bg-vert-sapin { background: var(--vert-sapin); }
.section-dark.bg-assoc { background: linear-gradient(160deg, #214C40 0%, var(--teal-assoc) 100%); }
.section-dark .section-title-block { border-bottom-color: rgba(255, 255, 255, 0.25); }
.section-dark .section-title-block h2 { color: #fff; }
.section-dark .section-title-block h2::after { background: var(--jaune-solaire); }
.section-dark .section-title-block .intro { color: rgba(255, 255, 255, 0.78); }
.section-dark .section-title-block .intro a { color: var(--jaune-solaire); }
.section-dark .section-cta .btn-primary { background: var(--jaune-solaire); color: var(--bleu-civique); }
.section-dark .section-cta .btn-primary:hover { background: #ffb724; }
.section-dark .quartiers-grid {
--quartier-line: rgba(255, 255, 255, 0.16);
--quartier-card: rgba(255, 255, 255, 0.05);
--quartier-card-hover: rgba(255, 255, 255, 0.11);
--quartier-titre: #ffffff;
--quartier-meta: rgba(255, 255, 255, 0.6);
--quartier-accent: var(--jaune-solaire);
}
.section-dark .annuaire-search { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.06); }
.section-dark .annuaire-search input { color: #fff; }
.section-dark .annuaire-search input::placeholder { color: rgba(255, 255, 255, 0.55); }
.section-dark .annuaire-search button { background: var(--jaune-solaire); color: var(--bleu-civique); }
.section-dark .annuaire-search button:hover { background: #ffb724; }
.section-dark .annuaire-grid {
--annuaire-line: rgba(255, 255, 255, 0.16);
--annuaire-card: rgba(255, 255, 255, 0.05);
--annuaire-card-hover: rgba(255, 255, 255, 0.11);
--annuaire-titre: #ffffff;
--annuaire-meta: rgba(255, 255, 255, 0.6);
--annuaire-accent: var(--jaune-solaire);
}
.section-dark .ico-bleu, .section-dark .ico-vert,
.section-dark .ico-ambre, .section-dark .ico-anthra { color: rgba(255, 255, 255, 0.85); }
.section-dark .annuaire-cat:hover .ico-bleu,
.section-dark .annuaire-cat:hover .ico-vert,
.section-dark .annuaire-cat:hover .ico-ambre,
.section-dark .annuaire-cat:hover .ico-anthra { color: var(--jaune-solaire); }
/* --- Variante fond vert pétrole (section Vie locale) --- */
.section-dark.bg-vert-petrole { background: var(--vert-petrole); }
.section-dark.bg-bleu-petrole { background: var(--bleu-petrole); }
/* --- Section éditoriale "articles" sur fond foncé --- */
.section-dark .rubrique h3 { color: #fff; }
.section-dark .rubrique .line { background: rgba(255, 255, 255, 0.22); }
.section-dark .rubrique .voir-tout { color: var(--jaune-solaire); }
.section-dark .news-article h4 { color: #fff; }
.section-dark .news-article .date { color: rgba(255, 255, 255, 0.6); }
.section-dark .news-article p { color: rgba(255, 255, 255, 0.78); }
.section-dark .news-article .lire-suite { color: #fff; }
.section-dark .news-article .lire-suite:hover { color: var(--jaune-solaire); }
/* Quadrillage clair + cases translucides sur fond foncé */
.section-dark .news-grid.quadrille { --quadrille-line: rgba(255, 255, 255, 0.2); }
.section-dark .news-grid.quadrille .news-article { background: rgba(255, 255, 255, 0.05); }
.section-dark .news-grid.quadrille .news-article:hover { background: rgba(255, 255, 255, 0.11); }
/* Titre qui vire au jaune solaire (accent charte) en fondu au survol du bloc */
.section-dark .news-grid.quadrille .news-article:hover h4 { color: var(--jaune-solaire); }
/* --- Variante fond brun profond (section Commerces) --- */
.section-dark.bg-marron-profond { background: var(--marron-profond); }
.section-dark.bg-commerce { background: linear-gradient(160deg, #1C3F56 0%, var(--bleu-commerce) 100%); }
/* --- Cartes "commerce" sur fond foncé : translucides, texte clair --- */
.section-dark .commerce {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.16);
}
.section-dark .commerce:hover {
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.3);
}
.section-dark .commerce .caption { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.section-dark .commerce .cat { color: var(--jaune-solaire); }
.section-dark .commerce h4 { color: #fff; }
.section-dark .commerce .addr { color: rgba(255, 255, 255, 0.6); }
/* =========================================================
14. MUR DE L'AGENDA — affiches "punaisées" (repris V4, recoloré)
========================================================= */
.agenda-section { padding: var(--gap-xl) 0; position: relative; z-index: 1; background: var(--bleu-ciel); }
/* Titre "Le mur de l'agenda" : même rendu que "Naviguez par quartier"
(grand Playfair + soulignement jaune), sans le trait bleu épais sous le bloc. */
.agenda-section .section-title-block { border-bottom: 0; padding-bottom: 0; }
.agenda-wall {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.poster {
background: #fff;
border: 1.5px solid var(--bleu-ciel-bord);
margin: -0.75px;
padding: 1.25rem;
display: flex;
flex-direction: column;
min-height: 240px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
position: relative;
overflow: hidden;
}
/* Le contenu de l'affiche passe au-dessus du voile glassy */
.poster > * { position: relative; z-index: 1; }
/* Lien "bloc entier" : recouvre toute l'affiche (stretched link), sans aucun
style visuel propre -> tout le poster devient cliquable. L'effet de survol
reste porté par .poster:hover (le pointeur est sur l'affiche). */
.poster-link {
position: absolute;
inset: 0;
z-index: 3;
text-indent: -9999px; /* masque le texte d'accessibilité éventuel */
overflow: hidden;
}
/* Voile "liquid glass" GLOSSY à dégradé CONCENTRIQUE : halo de lumière
elliptique concentré en haut-centre (effet verre bombé / dôme), doublé
d'une retombée sombre vers le bas pour le galbe. Masqué au repos,
révélé en FONDU DOUX au survol (aucun mouvement rapide). */
.poster::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(120% 90% at 50% -10%,
rgba(255,255,255,0.55) 0%,
rgba(255,255,255,0.22) 28%,
rgba(255,255,255,0.05) 52%,
rgba(255,255,255,0) 72%),
radial-gradient(140% 120% at 50% 120%,
rgba(13,43,69,0.18) 0%,
rgba(13,43,69,0) 55%);
opacity: 0;
transition: opacity 0.45s ease;
}
.poster:nth-child(odd) { transform: rotate(-0.6deg); }
.poster:nth-child(even) { transform: rotate(0.5deg); }
.poster:hover {
transform: rotate(0) translateY(-4px);
box-shadow:
0 12px 28px rgba(13, 43, 69, 0.18),
inset 0 1px 0 rgba(255,255,255,0.85), /* highlight interne haut */
inset 0 -8px 14px -8px rgba(13,43,69,0.18); /* ombre douce en bas */
z-index: 2;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.poster:hover::before { opacity: 1; } /* halo glossy révélé en fondu */
/* Variantes couleur des affiches (charte) */
.poster.bleu { background: var(--bleu-civique); color: var(--ivoire-clair); border-color: var(--bleu-civique); }
.poster.vert { background: var(--vert-territoire); color: #fff; border-color: var(--vert-territoire); }
.poster.jaune { background: var(--jaune-solaire); color: var(--bleu-civique); border-color: #e0b347; }
/* Variantes supplémentaires (teintes des bordures du nav) — évitent les
affiches de même couleur côte à côte en pile mobile (boîtes 2, 7, 8). */
.poster.olive { background: #9DAE55; color: var(--bleu-civique); border-color: #879842; } /* olive — texte foncé */
.poster.taupe { background: #8A7B72; color: var(--ivoire-clair); border-color: #74675f; } /* taupe — texte clair */
.poster.marron { background: #A07C56; color: var(--ivoire-clair); border-color: #876843; } /* marron — texte clair */
.poster.sapin { background: #1A3C33; color: var(--ivoire-clair); border-color: #122a24; } /* vert sapin profond — texte clair */
.poster.prune { background: #4E2A52; color: var(--ivoire-clair); border-color: #3c2040; } /* prune/violet — texte clair */
.poster.terracotta{ background: #9C4A2F; color: var(--ivoire-clair); border-color: #813a23; } /* terracotta chaud — texte clair */
.poster.ardoise { background: #2C3E50; color: var(--ivoire-clair); border-color: #20303f; } /* ardoise (bleu nuit) — texte clair */
/* Affiches par défaut (sans couleur) : fond bleu pétrole + texte clair.
La couleur du sur-titre « type » est désormais gérée par la CAPSULE (.poster
.type, plus bas), source unique de vérité : plus de règle de couleur de texte
par fond ici (la pastille claire convient à ce fond sombre par défaut). */
.poster:not(.bleu):not(.vert):not(.jaune):not(.olive):not(.taupe):not(.marron):not(.sapin):not(.prune):not(.terracotta):not(.ardoise):not(.partenaire) {
background: var(--bleu-petrole);
color: var(--ivoire-clair);
border-color: var(--bleu-petrole);
}
/* Sur-titre « type » en CAPSULE colorée (mur d'accueil, agenda et fiche).
Base = pastille translucide FONCÉE (bleu civique à 42 %) + texte ivoire. Le
voile foncé fonctionne sur TOUS les fonds sombres ET moyens (bleu, vert, sapin,
prune, terracotta, ardoise, taupe, marron, neutre) : contraste texte ≥ 6:1
partout (AA). Les fonds CLAIRS (jaune, olive) gardent le même texte ivoire mais
un voile plus opaque (réglé plus bas) pour rester une capsule franchement
sombre. inline-flex : la pastille épouse le texte (pas toute la largeur de la
carte). Source unique de vérité, mutualisée pour les trois emplacements. */
.poster .type {
display: inline-flex;
align-items: center;
align-self: flex-start; /* ne s'étire pas dans le flex vertical du poster */
font-family: var(--font-meta);
font-weight: 700;
font-size: 0.66rem;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0 0 0.6rem;
padding: 0.28em 0.7em;
border-radius: 999px; /* capsule */
background: rgba(13, 43, 69, 0.42);
color: var(--ivoire-clair);
}
/* Fonds CLAIRS (jaune, olive) : la pastille doit RESTER foncée par-dessus un fond
vif, sinon elle vire à un ton boueux. On AUGMENTE l'opacité du voile (0.72) afin
de garder une capsule franchement sombre et le MÊME texte ivoire que partout
ailleurs — contraste ≥ 6.9:1 (AA). Look unifié sur les 9 couleurs. */
.poster.jaune .type,
.poster.olive .type {
background: rgba(13, 43, 69, 0.72);
color: var(--ivoire-clair);
}
.poster .date-big {
font-family: var(--font-titre);
font-weight: 900;
font-size: 3.5rem;
line-height: 0.9;
margin: 0 0 0.5rem;
color: inherit;
letter-spacing: -0.03em;
}
.poster .date-big .mois {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.1em;
display: block;
font-family: var(--font-meta);
font-weight: 600;
margin-top: 0.3rem;
}
.poster h3 {
/* SANS-SERIF (Source Sans 3, déjà chargée) au lieu de Playfair : un titre court
en petit corps, sur fond coloré et en gras, est nettement plus lisible en
sans-serif (les déliés fins de Playfair cassent à cette taille). Playfair
reste réservée aux grands titres éditoriaux du site. */
font-family: var(--font-texte);
font-weight: 700;
letter-spacing: -0.01em; /* léger resserrage, adapté à un titre court */
/* Taille DYNAMIQUE : un peu plus petite qu'avant (1.15rem) et fluide selon la
largeur. clamp(min, idéal, max) — se réduit sur carte étroite (pile mobile)
et sur la fiche, sans jamais dépasser ~1.08rem ni descendre sous 0.92rem.
Mutualisée pour le mur d'accueil, l'agenda et la fiche événement. */
font-size: clamp(0.92rem, 0.8rem + 0.6vw, 1.08rem);
line-height: 1.25;
margin: 0 0 0.5rem;
color: inherit;
}
.poster .lieu {
font-family: var(--font-meta);
font-size: 0.78rem;
margin: 0;
opacity: 0.85;
color: inherit;
margin-top: auto;
padding-top: 0.75rem;
border-top: 1px solid rgba(0,0,0,0.12);
}
.poster.bleu .lieu,
.poster.vert .lieu,
.poster.taupe .lieu,
.poster.marron .lieu,
.poster.sapin .lieu,
.poster.prune .lieu,
.poster.terracotta .lieu,
.poster.ardoise .lieu { border-color: rgba(255,255,255,0.2); }
.poster.jaune .lieu,
.poster.olive .lieu { border-color: rgba(13,43,69,0.15); }
.poster:not(.bleu):not(.vert):not(.jaune):not(.olive):not(.taupe):not(.marron):not(.sapin):not(.prune):not(.terracotta):not(.ardoise):not(.partenaire) .lieu { border-color: rgba(255,255,255,0.2); }
/* Affiche "espace partenaire" intégrée au mur de l'agenda */
.poster.partenaire {
background:
repeating-linear-gradient(45deg,
rgba(255,255,255,0.04), rgba(255,255,255,0.04) 10px,
rgba(255,255,255,0.015) 10px, rgba(255,255,255,0.015) 20px),
var(--gris-nuit);
border: 1.5px dashed rgba(255,255,255,0.3);
color: rgba(255,255,255,0.8);
align-items: flex-start;
justify-content: center;
text-align: left;
}
.poster.partenaire .type { color: var(--jaune-solaire); }
.poster.partenaire .offer-h {
font-family: var(--font-titre);
font-weight: 700;
font-size: 1.5rem;
line-height: 1.1;
color: #fff;
margin: 0 0 0.5rem;
letter-spacing: -0.01em;
}
.poster.partenaire .offer-p {
font-family: var(--font-meta);
font-size: 0.82rem;
line-height: 1.45;
color: rgba(255,255,255,0.7);
margin: 0 0 1rem;
}
.poster.partenaire .offer-size {
font-family: var(--font-meta);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--jaune-solaire);
margin: 0 0 0.85rem;
}
.poster.partenaire .offer-cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: var(--jaune-solaire);
color: var(--bleu-civique);
padding: 0.5rem 0.9rem;
font-family: var(--font-texte);
font-weight: 600;
font-size: 0.82rem;
border-radius: var(--rayon-sm);
margin-top: auto;
transition: background 0.15s ease;
}
.poster.partenaire .offer-cta:hover { background: #ffb724; color: var(--bleu-civique); }
/* =========================================================
15. ANNUAIRE DES ASSOCIATIONS (repris V4, recoloré)
========================================================= */
.annuaire { padding: var(--gap-xl) 0; position: relative; z-index: 1; }
.annuaire-search {
max-width: 540px;
margin: 0 auto var(--gap-lg);
display: flex;
border: 2px solid var(--bleu-civique);
border-radius: 50px;
background: #fff;
overflow: hidden;
}
.annuaire-search input {
flex: 1;
border: 0;
background: transparent;
padding: 0.85rem 1.25rem;
font-family: var(--font-texte);
font-size: 0.95rem;
outline: none;
}
.annuaire-search button {
background: var(--rubrique-btn, var(--bleu-civique)); /* couleur foncée de la rubrique (texte blanc lisible), sinon bleu civique */
color: #fff;
border: 0;
padding: 0 1.5rem;
font-family: var(--font-texte);
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.06em;
cursor: pointer;
transition: background 0.15s ease, filter 0.15s ease;
}
.annuaire-search button:hover { filter: brightness(1.12); }
/* =====================================================================
ACCENT PAR RUBRIQUE (classe sur , ajoutée par le_noiseen_body_classes)
--rubrique-accent : teinte CLAIRE (onglet) -> trait décoratif sous le titre
--rubrique-btn : teinte FONCÉE lisible (texte blanc) -> boutons pleins
--rubrique-bg : fond de carte de la rubrique (= --nav-*-bg) -> repris
par le champ de recherche de l'annuaire (même teinte
que les boîtes de la colonne de droite).
La page d'accueil / hors rubrique n'a aucune de ces classes : l'accent jaune
par défaut (via le fallback des variables) reste donc en place.
===================================================================== */
.rubrique-association { --rubrique-accent: #9DAE55; --rubrique-btn: #6E7D2C; --rubrique-bg: var(--nav-asso-bg); } /* OLIVE (onglet Associations) clair / olive foncé */
.rubrique-commerce { --rubrique-accent: #7BA46C; --rubrique-btn: #4A7A38; --rubrique-bg: var(--nav-commerce-bg); } /* vert (onglet Commerces) clair / vert foncé */
.rubrique-agenda { --rubrique-accent: #5E9B86; --rubrique-btn: #3E7E6A; --rubrique-bg: var(--nav-agenda-bg); } /* vert-bleu / plus foncé */
.rubrique-tribune { --rubrique-accent: #5A93AE; --rubrique-btn: #16455C; --rubrique-bg: var(--nav-tribune-bg); } /* bleu clair (onglet Tribune) / bleu pétrole foncé */
.rubrique-annonces { --rubrique-accent: #C9B84A; --rubrique-btn: #8A7A1E; --rubrique-bg: var(--nav-annonce-bg); } /* jaune-vert / ocre foncé */
.rubrique-actualites { --rubrique-accent: #E8B73E; --rubrique-bg: var(--nav-actu-bg); } /* jaune (bouton reste bleu civique par défaut) */
/* Filet horizontal sous le titre de section (séparateur) teinté à la rubrique.
Sélecteur préfixé body + bordure entière redéclarée (gagne sur toute autre règle). */
body.rubrique-association .section-title-block,
body.rubrique-commerce .section-title-block,
body.rubrique-agenda .section-title-block,
body.rubrique-tribune .section-title-block,
body.rubrique-annonces .section-title-block,
body.rubrique-actualites .section-title-block {
border-bottom: 2px solid var(--rubrique-btn, var(--rubrique-accent, var(--bleu-civique)));
}
/* Liens « Lire la suite » au survol : accent de la rubrique (au lieu du vert
générique). Scopé aux pages rubrique pour ne pas toucher l'accueil. */
:is(.rubrique-association, .rubrique-commerce, .rubrique-agenda, .rubrique-tribune, .rubrique-annonces, .rubrique-actualites) .news-article .lire-suite:hover,
:is(.rubrique-association, .rubrique-commerce, .rubrique-agenda, .rubrique-tribune, .rubrique-annonces, .rubrique-actualites) .lire-plus:hover {
color: var(--rubrique-btn, var(--vert-territoire));
}
/* Pagination : page active (et survol) dans la couleur foncée de la rubrique. */
:is(.rubrique-association, .rubrique-commerce, .rubrique-agenda, .rubrique-tribune, .rubrique-annonces, .rubrique-actualites) .archive-pagination .page-numbers:hover,
:is(.rubrique-association, .rubrique-commerce, .rubrique-agenda, .rubrique-tribune, .rubrique-annonces, .rubrique-actualites) .archive-pagination .page-numbers.current {
background: var(--rubrique-btn, var(--bleu-civique));
border-color: var(--rubrique-btn, var(--bleu-civique));
color: #fff;
}
/* =====================================================================
OPTIMISATION DES CARTES (asso & commerce) — accent par rubrique (subtil).
- catégorie teintée à la rubrique ;
- au survol : fin liseré d'accent en haut + titre coloré.
Scopé aux pages rubrique (l'accueil/sombre garde son style propre).
===================================================================== */
/* Catégorie de la carte dans la couleur foncée de la rubrique. */
:is(.rubrique-association, .rubrique-commerce, .rubrique-agenda, .rubrique-tribune, .rubrique-annonces) .asso-card .cat,
:is(.rubrique-association, .rubrique-commerce, .rubrique-agenda, .rubrique-tribune, .rubrique-annonces) .commerces-grid .commerce .cat {
color: var(--rubrique-btn, var(--vert-fonce));
}
/* Survol de carte : fin liseré d'accent en haut (box-shadow inset) + transition douce. */
:is(.rubrique-association, .rubrique-commerce, .rubrique-agenda, .rubrique-tribune, .rubrique-annonces) .asso-card,
:is(.rubrique-association, .rubrique-commerce, .rubrique-agenda, .rubrique-tribune, .rubrique-annonces) .commerces-grid .commerce {
transition: transform 0.15s ease, box-shadow 0.18s ease;
}
:is(.rubrique-association, .rubrique-commerce, .rubrique-agenda, .rubrique-tribune, .rubrique-annonces) .asso-card:hover,
:is(.rubrique-association, .rubrique-commerce, .rubrique-agenda, .rubrique-tribune, .rubrique-annonces) .commerces-grid .commerce:hover {
box-shadow: inset 0 4px 0 var(--rubrique-accent, var(--jaune-solaire)),
0 10px 22px rgba(13, 40, 69, 0.14);
}
/* Titre de carte au survol : couleur de la rubrique. */
:is(.rubrique-association, .rubrique-commerce, .rubrique-agenda, .rubrique-tribune, .rubrique-annonces) .asso-card:hover h4,
:is(.rubrique-association, .rubrique-commerce, .rubrique-agenda, .rubrique-tribune, .rubrique-annonces) .commerces-grid .commerce:hover h4 {
color: var(--rubrique-btn, var(--bleu-civique));
}
/* Grille collée à bordures partagées (technique v4) */
.annuaire-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--annuaire-line, var(--gris-perle));
border-left: 1px solid var(--annuaire-line, var(--gris-perle));
}
.annuaire-cat {
border-right: 1px solid var(--annuaire-line, var(--gris-perle));
border-bottom: 1px solid var(--annuaire-line, var(--gris-perle));
padding: 1.5rem 1.25rem;
background: var(--annuaire-card, #fff);
display: flex;
align-items: center;
gap: 1rem;
transition: background 0.15s ease;
cursor: pointer;
}
.annuaire-cat:hover { background: var(--annuaire-card-hover, var(--ivoire-chaud)); }
.annuaire-cat .ico {
width: 40px;
height: 40px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.15s ease;
}
.annuaire-cat .ico svg {
width: 30px;
height: 30px;
stroke: currentColor;
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.annuaire-cat h4 {
font-family: var(--font-titre);
font-weight: 700;
font-size: 1.05rem;
margin: 0 0 0.2rem;
color: var(--annuaire-titre, var(--bleu-civique));
line-height: 1.15;
}
.annuaire-cat .nb { font-family: var(--font-meta); font-size: 0.78rem; color: var(--annuaire-meta, #888); margin: 0; }
.annuaire-cat .nb strong { color: var(--annuaire-accent, var(--vert-fonce)); font-weight: 700; }
/* Couleurs monochromes par catégorie (4 teintes charte, comme V3) */
.ico-bleu { color: var(--bleu-civique); }
.ico-vert { color: var(--vert-fonce); }
.ico-ambre { color: var(--jaune-fonce); }
.ico-anthra { color: var(--anthracite); }
/* =========================================================
16. COMMERCES NOISÉENS (repris V4, recoloré)
========================================================= */
.commerces { padding: var(--gap-xl) 0; position: relative; z-index: 1; }
.commerces-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gap-md);
}
/* Wrapper qui sort le badge « Modifier » (admin) hors du lien .commerce afin
d'éviter un imbriqué (HTML invalide). Il devient la cellule de grille :
on le rend positionné (ancre du badge absolu) et on laisse la carte .commerce
à l'intérieur occuper toute la hauteur de la rangée. */
.commerces-grid .card-edit-wrap {
position: relative;
display: flex;
}
.commerces-grid .card-edit-wrap > .commerce {
flex: 1;
}
/* Cartes commerce : SCOPÉES à la grille de liste (.commerces-grid), pour ne pas
toucher l'article de fiche commerce (qui porte aussi la classe .commerce via
post_class). La section accueil utilise .section-dark .commerce (plus bas). */
.commerces-grid .commerce {
background: #fff;
border: 1px solid var(--gris-bordure);
border-radius: var(--rayon-md);
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 300px; /* harmonisé avec .asso-card : zone blanche sous l'image */
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.commerces-grid .commerce:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(13, 40, 69, 0.12);
}
.commerces-grid .commerce img, .commerces-grid .commerce .ph, .commerces-grid .commerce .asso-ph-gradient { height: 150px; width: 100%; object-fit: cover; flex-shrink: 0; border-radius: 0; }
.commerces-grid .commerce .caption { flex: 1; padding: 0.95rem 1.1rem; }
/* p.cat = conteneur des étiquettes de catégorie (une ou plusieurs).
Mutualisé : grilles commerces ET associations, + badge des fiches (single). */
.commerces-grid .commerce .cat,
.assos-liste-grid .asso-card .cat,
.annonces-grid .annonce-card .cat,
.single-head .cat {
display: flex; /* capsules alignées sur une ligne */
flex-wrap: wrap; /* passage à la ligne si plusieurs catégories */
gap: 6px; /* espace entre capsules */
margin: 0 0 0.3rem;
padding: 0;
}
/* Étiquette « capsule » : texte blanc sur fond de la couleur de la rubrique
(--cat-color, posée par le template ; repli bleu civique si absente).
Vaut pour les (cartes de liste) et les (fiches, cliquables). */
.commerces-grid .commerce .cat .cat-pill,
.assos-liste-grid .asso-card .cat .cat-pill,
.annonces-grid .annonce-card .cat .cat-pill,
.single-head .cat .cat-pill {
display: inline-block;
padding: 3px 10px;
border-radius: 999px; /* forme capsule */
background: var(--cat-color, var(--bleu-civique)); /* couleur de la rubrique */
color: #fff; /* texte blanc */
font-family: var(--font-texte);
font-size: 0.68rem; /* un peu plus petit */
font-weight: 600;
letter-spacing: normal; /* pas de resserrement (annule l'hérité) */
line-height: 1.4;
text-decoration: none; /* capsules-liens : pas de soulignement */
text-transform: none;
white-space: nowrap;
}
/* Capsules cliquables (fiches) : léger renforcement au survol. */
.single-head .cat a.cat-pill:hover,
.single-head .cat a.cat-pill:focus-visible {
filter: brightness(1.12);
}
.commerces-grid .commerce h4 {
font-family: var(--font-titre);
font-weight: 700;
font-size: 1.1rem;
line-height: 1.15;
color: var(--bleu-civique);
margin: 0 0 0.4rem;
}
.commerces-grid .commerce .addr { font-family: var(--font-meta); font-size: 0.8rem; color: #888; margin: 0; }
/* =========================================================
16bis. TRIBUNE VEDETTE (modèle v4 recoloré charte)
========================================================= */
.tribune { background: linear-gradient(160deg, #3A322C 0%, var(--taupe-tribune) 100%); color: rgba(255,255,255,0.85); padding: var(--gap-xl) 0; position: relative; z-index: 1; }
.tribune-grid { display: grid; grid-template-columns: 240px 1fr; gap: var(--gap-xl); align-items: start; }
.tribune-label { font-family: var(--font-meta); font-weight: 700; font-size: 0.78rem; color: var(--jaune-solaire); text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 1rem; }
.tribune-author-photo {
width: 100%; max-width: 200px; aspect-ratio: 4 / 5;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--rayon-md);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.4);
font-family: var(--font-meta); font-size: 0.74rem;
text-transform: uppercase; letter-spacing: 0.05em;
margin-bottom: 1.25rem; position: relative; overflow: hidden;
}
/* Le portrait affiche désormais toujours une image OU une silhouette : on
neutralise l'ancien décor « cadre vide » (croix diagonales). */
.tribune-author-photo::after { content: none; }
.tribune-author-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Silhouette sur le fond SOMBRE de la vedette : teintes claires translucides. */
.tribune-author-photo .tribune-photo__ph {
background: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
}
.tribune-author-photo .tribune-photo__ph svg { stroke: rgba(255,255,255,0.5); }
.tribune-author h4 { font-family: var(--font-titre); font-weight: 700; font-size: 1.55rem; color: #fff; margin: 0; }
.tribune-author .role { font-family: var(--font-titre); font-style: italic; color: var(--jaune-solaire); font-size: 1rem; margin: 0 0 1rem; }
.tribune-author .bio { font-size: 0.88rem; line-height: 1.6; color: rgba(255,255,255,0.7); border-top: 1px solid rgba(255,255,255,0.15); padding-top: 1rem; margin: 0; }
.tribune-content .quote-mark { font-family: var(--font-titre); font-weight: 900; font-size: 5rem; line-height: 0.5; color: var(--jaune-solaire); display: block; text-align: center; margin: 0 0 1rem; }
.tribune-content h3 { font-family: var(--font-titre); font-style: italic; font-weight: 500; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; color: #fff; margin: 0 0 1.25rem; letter-spacing: -0.02em; }
.tribune-content .lead { font-family: var(--font-titre); font-style: italic; font-size: 1.15rem; line-height: 1.55; color: rgba(255,255,255,0.9); margin: 0 0 1.25rem; padding-right: var(--gap-lg); }
.tribune-content p { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,0.78); margin: 0 0 1rem; padding-right: var(--gap-lg); }
.tribune-content .tribune-meta { font-family: var(--font-meta); font-size: 0.82rem; color: rgba(255,255,255,0.55); font-style: italic; margin: 0.5rem 0 0; }
.tribune-cta { display: inline-block; margin-top: 1.25rem; background: var(--jaune-solaire); color: var(--bleu-civique); padding: 0.8rem 1.4rem; font-family: var(--font-texte); font-weight: 600; font-size: 0.9rem; border-radius: var(--rayon-sm); transition: background 0.15s ease, transform 0.1s ease; }
.tribune-cta:hover { background: #ffb724; color: var(--bleu-civique); transform: translateY(-1px); }
.tribune-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: center; margin-top: 1.25rem; }
.tribune-cta-row .tribune-cta { margin-top: 0; }
.tribune-cta-ghost {
display: inline-block;
background: transparent;
color: #fff;
border: 1.5px solid rgba(255,255,255,0.55);
padding: 0.8rem 1.4rem;
font-family: var(--font-texte);
font-weight: 600;
font-size: 0.9rem;
border-radius: var(--rayon-sm);
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.tribune-cta-ghost:hover { background: #fff; color: var(--bleu-civique); border-color: #fff; transform: translateY(-1px); }
/* =========================================================
16ter. ESPACE PARTENAIRE — billboard large pleine largeur (V7)
========================================================= */
.pub-billboard-wide { max-width: var(--max-w); margin: var(--gap-xl) auto; padding: 0 var(--gap-md); position: relative; z-index: 1; }
.pub-billboard-wide .pub { min-height: 250px; margin: 0; }
/* Encart partenaire sur fond foncé (transition entre 2 blocs sombres).
Reprend la même tonalité de lumière que les sections immersives. */
.pub.pub-dark {
background:
repeating-linear-gradient(45deg,
rgba(255,255,255,0.04), rgba(255,255,255,0.04) 10px,
rgba(255,255,255,0.015) 10px, rgba(255,255,255,0.015) 20px),
var(--gris-nuit);
border: 1px dashed rgba(255,255,255,0.22);
color: rgba(255,255,255,0.6);
}
.pub.pub-dark .pub-label { color: var(--jaune-solaire); }
.pub.pub-dark .pub-size { color: rgba(255,255,255,0.85); }
/* Encart partenaire — message "espace disponible à la location" */
.pub-offer {
/* layout vertical : tous les éléments empilés (label, titre, texte, bouton) */
flex-direction: column;
align-items: center;
text-align: center;
gap: 0;
padding: 2.5rem var(--gap-lg);
}
.pub-offer .offer-text { margin-bottom: 1.5rem; max-width: 60ch; }
.pub-offer .offer-label {
font-family: var(--font-texte);
font-weight: 700;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--jaune-solaire);
margin: 0 0 0.6rem;
}
.pub-offer .offer-title {
font-family: var(--font-titre);
font-weight: 700;
font-size: clamp(1.6rem, 3.5vw, 2.6rem);
line-height: 1.1;
color: #fff;
margin: 0 0 0.6rem;
letter-spacing: -0.01em;
}
.pub-offer .offer-sub {
font-family: var(--font-texte);
font-size: 1.05rem;
line-height: 1.5;
color: rgba(255,255,255,0.75);
margin: 0;
max-width: 60ch;
}
.pub-offer .offer-cta {
display: inline-flex;
align-items: center;
flex-shrink: 0;
gap: 0.5rem;
background: var(--jaune-solaire);
color: var(--bleu-civique);
padding: 0.75rem 1.4rem;
font-family: var(--font-texte);
font-weight: 600;
font-size: 0.95rem;
border-radius: var(--rayon-sm);
transition: background 0.15s ease, transform 0.1s ease;
margin: 10px;
}
.pub-offer .offer-cta:hover { background: #ffb724; color: var(--bleu-civique); transform: translateY(-1px); }
/* =========================================================
16quater. SECTION RECHERCHE — fond bleu pétrole (V8)
========================================================= */
.recherche-section {
background: var(--bleu-petrole);
color: #fff;
padding: var(--gap-xl) 0;
position: relative;
z-index: 1;
}
/* Titre + intro gérés par .section-title-block (identique aux autres sections).
Sur fond pétrole, .section-dark éclaircit titre/intro/séparateur. */
/* Grand champ de recherche lisible (pilule) — centré dans la section */
.recherche-big {
display: flex;
align-items: center;
gap: 0.5rem;
background: #fff;
border-radius: 50px;
padding: 0.4rem 0.4rem 0.4rem 1.4rem;
box-shadow: 0 8px 30px rgba(0,0,0,0.25);
max-width: 620px;
margin: 0 auto; /* champ centré dans la section */
}
.recherche-big svg { color: #6b6e75; flex-shrink: 0; }
.recherche-big input {
flex: 1;
border: 0;
background: transparent;
padding: 0.85rem 0.5rem;
font-family: var(--font-texte);
font-size: 1.05rem;
color: var(--anthracite);
outline: none;
}
.recherche-big input::placeholder { color: #8a8f97; }
.recherche-big button {
flex-shrink: 0;
background: var(--jaune-solaire);
color: var(--bleu-civique);
border: 0;
border-radius: 50px;
padding: 0.8rem 1.6rem;
font-family: var(--font-texte);
font-weight: 700;
font-size: 0.95rem;
cursor: pointer;
transition: background 0.15s ease;
}
.recherche-big button:hover { background: #ffb724; }
/* =========================================================
16quinquies. SECTION PETITES ANNONCES — fond olive (V9)
Accent = couleur de la bordure de l'onglet "Petites annonces".
========================================================= */
.annonces-section {
background: var(--olive-profond);
color: #fff;
padding: var(--gap-xl) 0;
position: relative;
z-index: 1;
}
.annonces-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap-lg);
margin-top: var(--gap-md);
}
/* Carte annonce : photo + contenu, fond clair, accent olive */
.annonce-card {
background: #fff;
border-radius: var(--rayon-md);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 14px rgba(0,0,0,0.18);
position: relative;
}
.annonce-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,0.28); }
/* Photo (placeholder par défaut si pas d'image) */
.annonce-card .photo {
height: 180px;
background:
repeating-linear-gradient(45deg, rgba(157,174,85,0.16) 0 10px, rgba(157,174,85,0.06) 10px 20px),
var(--olive-clair);
display: flex;
align-items: center;
justify-content: center;
color: var(--olive-accent);
position: relative;
}
/* Image à la une éventuelle : remplit tout le cadre de la photo. */
.annonce-card .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Badge type (Vente / Don / Échange…) posé sur la photo */
.annonce-card .badge {
position: absolute;
top: 0.75rem; left: 0.75rem;
background: var(--olive-accent);
color: #20280C;
font-family: var(--font-texte);
font-weight: 700;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.3rem 0.7rem;
border-radius: 999px;
}
.annonce-card .body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.annonce-card h4 {
font-family: var(--font-titre);
font-weight: 700;
font-size: 1.15rem;
line-height: 1.2;
color: var(--bleu-civique);
margin: 0 0 0.4rem;
}
.annonce-card p { font-size: 0.9rem; color: #555; line-height: 1.5; margin: 0 0 0.9rem; }
.annonce-card .meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: 0.7rem;
border-top: 1px solid var(--gris-perle);
font-family: var(--font-meta);
font-size: 0.78rem;
color: #888;
}
.annonce-card .prix {
font-family: var(--font-titre);
font-weight: 700;
font-size: 1.05rem;
color: #4d6418; /* olive foncé lisible */
}
/* =========================================================
CARTE « ESPACE PARTENAIRE » des grilles (annonces, commerces, associations)
Source unique de vérité : même design que la page d'accueil — fond sombre
« gris-nuit » à rayures diagonales, label jaune, titre blanc, bouton jaune —
en conservant la BORDURE EN TIRETS et la taille d'une cellule de la grille.
La classe .partenaire-card est posée sur la carte quelle que soit la grille
(.annonce-card / .commerce / .asso-card) ; on neutralise le fond blanc et la
structure média+texte héritée de la carte hôte.
========================================================= */
/* Fond/bordure : sélecteurs qualifiés par la grille hôte pour passer DEVANT les
règles de carte normales (.commerces-grid .commerce, etc.) qui imposent un
fond blanc — sinon, à spécificité égale, le blanc l'emporterait. */
.annonces-grid .annonce-card.partenaire-card,
.commerces-grid .commerce.partenaire-card,
.assos-liste-grid .asso-card.partenaire-card {
background:
repeating-linear-gradient(45deg,
rgba(255,255,255,0.04), rgba(255,255,255,0.04) 10px,
rgba(255,255,255,0.015) 10px, rgba(255,255,255,0.015) 20px),
var(--gris-nuit);
border: 1.5px dashed rgba(255,255,255,0.3);
box-shadow: none;
color: rgba(255,255,255,0.8);
}
.partenaire-card:hover {
transform: none;
box-shadow: none;
border-color: rgba(255,255,255,0.45);
}
/* Corps empilé : label, titre, texte, bouton (bouton poussé en bas). */
.partenaire-card__body {
display: flex;
flex-direction: column;
flex: 1;
padding: 1.4rem 1.3rem;
}
.partenaire-card .type {
font-family: var(--font-meta);
font-weight: 700;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--jaune-solaire);
margin: 0 0 0.6rem;
}
.partenaire-card .offer-h {
font-family: var(--font-titre);
font-weight: 700;
font-size: 1.45rem;
line-height: 1.1;
color: #fff;
margin: 0 0 0.5rem;
letter-spacing: -0.01em;
}
.partenaire-card .offer-p {
font-family: var(--font-meta);
font-size: 0.85rem;
line-height: 1.45;
color: rgba(255,255,255,0.7);
margin: 0 0 1.1rem;
}
.partenaire-card .offer-cta {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 0.4rem;
background: var(--jaune-solaire);
color: var(--bleu-civique);
padding: 0.55rem 1rem;
font-family: var(--font-texte);
font-weight: 600;
font-size: 0.85rem;
border-radius: var(--rayon-sm);
margin-top: auto;
transition: background 0.15s ease, transform 0.1s ease;
}
.partenaire-card:hover .offer-cta { background: #ffb724; transform: translateY(-1px); }
/* VISUEL PAR DÉFAUT coloré par type (sans image à la une) : dégradé propre au
type + icône blanche + libellé du type centrés. Remplit tout le cadre, que ce
soit la carte de liste (.annonce-card .photo) ou le média de la fiche
(.fiche-annonce-visuel). Même esprit que les placeholders assos/commerces. */
.annonce-ph {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0.8rem;
box-sizing: border-box;
overflow: hidden;
/* aligne le bloc icône + libellé verticalement, centré */
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
/* léger voile pour garantir la lisibilité sur tous les dégradés */
.annonce-ph::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.18) 100%);
}
.annonce-ph__ico {
position: relative;
z-index: 1;
width: 40px;
height: 40px;
stroke: #fff;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
opacity: 1; /* annule le .opacity:0.7 de l'ancienne icône SVG */
}
.annonce-ph__label {
position: relative;
z-index: 1;
font-family: var(--font-texte);
font-weight: 700;
font-size: 0.95rem;
line-height: 1.3;
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,0.35);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* =========================================================
16sexies. MOTIF DÉCORATIF "NOIX" (filigrane, V9)
Clin d'œil au nom "Le Noiséen". Image N&B sur fond transparent,
posée en haut à gauche des sections foncées, en filigrane discret.
========================================================= */
.deco-noix { position: relative; }
.deco-noix > * { position: relative; z-index: 1; } /* contenu au-dessus du motif */
.deco-noix::after {
content: "";
position: absolute;
top: 0; left: 0;
width: clamp(220px, 26vw, 380px);
height: clamp(150px, 18vw, 260px);
background: url("images/noixnb.png") no-repeat left top;
background-size: contain;
opacity: 0.10; /* filigrane discret */
pointer-events: none;
z-index: 0;
}
/* Branche de noyer en BAS-DROITE de chaque grande section (en plus de la noix
haut-gauche). Blanche par défaut (sections foncées) ; verte sur les sections
claires (.deco-noix-clair). Filigrane discret (~14 %). */
.deco-noix::before {
content: "";
position: absolute;
right: 0; bottom: 0;
width: clamp(220px, 24vw, 360px);
height: clamp(160px, 17vw, 262px);
background: url("assets/img/branche-noyer-blanc.png") no-repeat right bottom;
background-size: contain;
opacity: 0.14;
pointer-events: none;
z-index: 0;
}
.deco-noix-clair::before { background-image: url("assets/img/branche-noyer-vert.png"); }
@media (max-width: 620px) {
.deco-noix::before { width: 150px; height: 110px; opacity: 0.10; }
}
@media (max-width: 620px) {
.deco-noix::after {
width: 130px; height: 90px; opacity: 0.08;
left: auto; right: 0;
background-position: right top;
}
/* --- "À la une locale" : sans bordures ni fonds, conteneur 100% --- */
.main-grid { border: 0; margin: var(--gap-md) 0; background: none; }
.col-left, .col-center, .col-right { background: none; padding: 0; }
.top-block:hover { background: none; } /* pas d'effet de survol sur mobile */
.col-center { border: 0 !important; }
/* Neutraliser les marges négatives "flush" (sinon -> scroll horizontal) */
.col-left .pub, .col-right .pub, .col-left .breves, .breve,
.articles-secondaires, .art-sec, .initiative-card, .col-right .pub-col3,
.top-block {
margin-left: 0 !important;
margin-right: 0 !important;
}
.col-left .breves, .breve, .art-sec, .news-grid.quadrille .news-article, .top-block { padding-left: 0; padding-right: 0; }
.breve:hover, .art-sec:hover { background: none; }
/* --- Espaces partenaires : 100% du bloc sur mobile --- */
.pub-billboard-wide { padding: 0; }
.pub-billboard-wide .pub { width: 100%; max-width: none; }
.col-left .pub, .col-right .pub, .col-right .pub-col3 { min-height: 220px; }
/* --- Recherche : bouton SOUS le champ texte --- */
.recherche-big { flex-wrap: wrap; border-radius: var(--rayon-md); padding: 0.6rem 0.9rem; }
.recherche-big input { flex: 1 1 100%; }
.recherche-big button { flex: 1 1 100%; border-radius: var(--rayon-sm); margin-top: 0.5rem; }
/* --- Petites annonces : photo ~20% largeur + texte à droite --- */
.annonces-grid { grid-template-columns: 1fr; }
.annonce-card { flex-direction: row; align-items: stretch; }
.annonce-card .photo { width: 22vw; min-width: 22vw; height: auto; min-height: 100%; }
.annonce-card .photo svg { width: 26px; height: 26px; }
.annonce-card .badge { font-size: 0.6rem; padding: 0.2rem 0.5rem; top: 0.4rem; left: 0.4rem; }
.annonce-card .body { flex: 1; }
/* --- Commerces : carte VERTICALE (image au-dessus, légende dessous), comme
les fiches associations, pour une présentation harmonisée sur mobile.
(Ancien mode horizontal « photo gauche + texte droite » retiré.) --- */
.commerces-grid { grid-template-columns: 1fr; }
/* --- Tribune : 100% du bloc (sans marge latérale) + auteur photo|infos --- */
.tribune .wrap { padding-left: 34px; padding-right: 10px; }
.tribune-grid { grid-template-columns: 1fr; gap: var(--gap-md); }
.tribune-author { grid-template-columns: 24% 1fr; column-gap: var(--gap-sm); }
.tribune-author h4 { font-size: 1.1rem; }
.tribune-author .bio { font-size: 0.82rem; }
/* --- "Soutenez Le Noiséen" : image cachée + contenu centré --- */
.don-grid { grid-template-columns: 1fr; text-align: center; }
.don-bandeau .img-placeholder { display: none; }
.don-bandeau .actions { justify-content: center; }
.don-bandeau p { margin-left: auto; margin-right: auto; }
}
/* Variante pour sections CLAIRES : noix couleur (visible sur fond clair). */
.deco-noix-clair::after { background-image: url("images/noixc.png"); opacity: 0.12; }
/* =========================================================
17. BANDEAU DON (V3, charte)
========================================================= */
.don-bandeau { background: var(--bleu-petrole); color: #fff; padding: var(--gap-xl) 0; position: relative; z-index: 1; }
.don-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--gap-lg); align-items: center; }
.don-bandeau .img-placeholder { height: 220px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }
.don-bandeau .img-placeholder::after {
background:
linear-gradient(135deg, transparent 49.5%, rgba(255,255,255,0.1) 49.5%, rgba(255,255,255,0.1) 50.5%, transparent 50.5%),
linear-gradient(45deg, transparent 49.5%, rgba(255,255,255,0.1) 49.5%, rgba(255,255,255,0.1) 50.5%, transparent 50.5%);
}
.don-bandeau h2 { color: #fff; font-size: 2.2rem; margin: 0 0 0.75rem; }
.don-bandeau p { font-size: 1.05rem; line-height: 1.55; margin: 0 0 1.25rem; opacity: 0.92; }
.don-bandeau .actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
/* =========================================================
18. NEWSLETTER (V3, charte)
========================================================= */
.newsletter { background: rgba(247, 247, 244, 0.85); padding: var(--gap-xl) 0; border-top: 1px solid var(--gris-perle); position: relative; z-index: 1; }
.newsletter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); align-items: center; }
.newsletter h2 { font-size: 2rem; margin: 0 0 0.5rem; }
.newsletter .sub { font-family: var(--font-titre); font-style: italic; font-size: 1.05rem; color: #555; margin: 0; }
.newsletter-form { display: flex; gap: 0.5rem; }
.newsletter-form input {
flex: 1;
padding: 0.8rem 1rem;
border: 1px solid var(--gris-perle);
border-radius: var(--rayon-sm);
font-family: var(--font-texte);
font-size: 0.95rem;
background: #fff;
}
.newsletter-form input:focus { outline: none; border-color: var(--bleu-civique); }
/* =========================================================
19. FOOTER (repris V4, recoloré charte)
========================================================= */
.footer { background: var(--anthracite); color: #c9ccd1; padding: var(--gap-xl) 0 var(--gap-md); font-size: 0.9rem; position: relative; z-index: 1; overflow: hidden; }
/* Branche de noyer en bas-droite du pied de page (desktop). Blanche sur le
fond anthracite, filigrane discret. Masquée sur mobile (espace restreint). */
.footer::before {
content: "";
position: absolute;
right: 0; bottom: 0;
width: clamp(240px, 22vw, 340px);
height: clamp(175px, 16vw, 248px);
background: url("assets/img/branche-noyer-blanc.png") no-repeat right bottom;
background-size: contain;
opacity: 0.12;
pointer-events: none;
z-index: 0;
}
.footer .wrap { position: relative; z-index: 1; } /* contenu au-dessus du motif */
@media (max-width: 860px) { /* mode mobile du thème : on masque */
.footer::before { display: none; }
}
.footer .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--gap-lg); margin-bottom: var(--gap-lg); }
.footer .logo-footer {
font-family: var(--font-titre);
font-weight: 900;
font-size: 2rem;
color: #fff;
margin: 0 0 0.5rem;
line-height: 1;
}
.footer .baseline {
font-family: var(--font-titre);
font-style: italic;
color: #aaa;
font-size: 0.95rem;
margin: 0 0 1.25rem;
max-width: 360px;
line-height: 1.45;
}
.footer h5 {
font-family: var(--font-texte);
font-weight: 700;
font-size: 0.8rem;
color: var(--jaune-solaire);
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0 0 1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer ul li { margin: 0 0 0.5rem; font-size: 0.92rem; }
.footer ul a { color: #c9ccd1; }
.footer ul a:hover { color: var(--jaune-solaire); }
.footer .socials { display: flex; gap: 0.65rem; margin-top: 0.85rem; }
.footer .socials a {
width: 36px;
height: 36px;
background: rgba(255,255,255,0.08);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: background 0.15s ease, color 0.15s ease;
}
.footer .socials a:hover { background: var(--jaune-solaire); color: var(--anthracite); }
.colophon {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 1rem;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
font-family: var(--font-meta);
font-size: 0.78rem;
color: #888;
}
.colophon a { color: #888; }
.colophon a:hover { color: var(--jaune-solaire); }
/* =========================================================
20. RESPONSIVE (optimisé V7)
Points de rupture : 1100 / 860 / 620 / 430.
Objectif : garder un maximum de colonnes utiles (agenda et
quartiers restent en 3 le plus longtemps possible), et ne
passer à 1 colonne qu'en tout dernier recours.
Sécurité grilles : minmax(0,1fr) appliqué via les règles ci-dessous.
========================================================= */
/* --- ≤ 1100px : tablette large --- */
@media (max-width: 1440px) {
:root {
--max-w: 90vw; /* sous 1440px : conteneur = 90% */
--col-pad: 1.2rem; /* padding 'À la une locale' réduit de 40% (2rem -> 1.2rem) */
}
}
@media (max-width: 1100px) {
/* Desktop intermédiaire : colonnes latérales plus étroites pour que la
colonne centrale reste confortable quand le conteneur fait 80vw. */
.main-grid { grid-template-columns: 200px 1fr 220px; }
.quartiers-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.agenda-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.annuaire-grid, .commerces-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section-title-block { grid-template-columns: 1fr; }
.section-title-block h2, .section-title-block .intro { grid-column: 1; }
}
/* --- ≤ 860px : tablette / passage en 1 colonne principale --- */
@media (max-width: 860px) {
/* Tribune empilée : bloc auteur en haut (photo gauche + infos droite),
puis la tribune en dessous, pleine largeur. */
.tribune-grid { grid-template-columns: 1fr; gap: var(--gap-lg); }
.tribune-author {
max-width: none;
display: grid;
grid-template-columns: 22% 1fr;
grid-template-areas: "label label" "photo info";
column-gap: var(--gap-md);
align-items: start;
}
.tribune-author .tribune-label { grid-area: label; }
.tribune-author-photo { grid-area: photo; max-width: 100%; margin: 0; }
.tribune-author-info { grid-area: info; }
/* Menu : onglets colorés masqués, burger affiché */
.nav-main ul { display: none; }
.nav-burger { display: inline-flex; }
.nav-don { display: inline-flex; } /* don à droite du burger */
.nav-grid { justify-content: space-between; }
/* Entête : cacher les deux brèves latérales + le don de l'entête */
.header-grid .mini-headline { display: none; }
.header-grid .header-cta { display: none; }
.logo-tagline { display: none; } /* tagline d'entête masquée (déplacée plus bas) */
.topbar { display: none; } /* barre date + menu utilitaire masquée */
.footer { display: none; } /* pied de page masqué sur mobile */
/* Tagline déplacée entre le menu et EN BREF */
.tagline-mobile { display: none; } /* retirée : supprime l'espace nav <-> EN BREF */
.main-grid { grid-template-columns: 1fr; grid-template-rows: none; }
.col-left, .col-center, .col-right { padding: var(--gap-md); }
/* En 1 colonne : tous les éléments placés reviennent en flux normal */
.col-left, .col-center, .col-right,
.cell-cta { grid-column: 1 !important; grid-row: auto !important; }
/* Ordre mobile : Article à la une (centre) en premier, puis brèves, top, CTA */
.col-center { order: 1; }
.col-left { order: 2; }
.col-right { order: 3; }
.cell-cta { order: 4; }
/* Filets horizontaux entre colonnes empilées (au lieu des verticaux) */
.col-center { border: 0; border-top: 2px solid var(--gris-bordure); border-bottom: 2px solid var(--gris-bordure); }
/* Plus de "pousser en bas" une fois empilé */
.col-left .pub { margin-top: 0; }
.header-grid { grid-template-columns: 1fr; text-align: center; }
.header-cta, .mini-headline { text-align: center; }
/* Entête resserrée (logo conservé au-dessus du nom, comme à l'origine) */
.header-journal { padding: 1rem 0 0.9rem; }
/* Aucun espace entre le menu (burger) et le bloc EN BREF */
.nav-main { margin-bottom: 0; }
.breaking { margin-top: 0; }
/* Encarts pub des colonnes : largeur naturelle une fois empilés */
.col-left .pub, .col-right .pub { max-width: 100%; }
.pub-300x600 { height: 320px; }
/* Bento : cartes hautes/larges ramenées à demi-largeur */
/* Agenda et quartiers : on reste en 3 (compact) */
.quartiers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.agenda-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.annuaire-grid, .commerces-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-md); }
.news-article { padding: 0; }
.news-article + .news-article { border-left: 0; }
.news-grid.quadrille { gap: 0; }
.news-grid.quadrille .news-article { padding: 1.25rem; }
.don-grid, .newsletter-grid, .footer .wrap { grid-template-columns: 1fr; }
.nav-main ul { gap: 1rem; }
}
/* --- ≤ 620px : mobile large --- */
@media (max-width: 620px) {
:root { --max-w: 100%; } /* smartphone : conteneur pleine largeur */
.articles-secondaires { grid-template-columns: 1fr; }
/* Bannière "espace à louer" : repasse en colonne, contenu centré */
.pub-offer { flex-direction: column; text-align: center; gap: 1.5rem; padding: 2rem 1.25rem; }
.pub-offer .offer-sub { margin: 0 auto; }
/* En 1 colonne : le filet entre les 2 articles passe à l'horizontale */
.art-sec + .art-sec { border-left: 0; border-top: 2px solid var(--gris-bordure); }
/* Agenda + quartiers : 3 dates côte à côte conservées,
on réduit la typo des grandes dates pour que ça tienne. */
.quartiers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.agenda-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.poster { min-height: 190px; padding: 0.9rem; }
.poster .date-big { font-size: 2.2rem; }
.poster .date-big .mois { font-size: 0.78rem; }
.poster h3 { font-size: 1rem; }
.quartier-card { padding: 0.9rem 0.75rem; }
/* Annuaire / commerces / news : 1 colonne pour la lisibilité */
.annuaire-grid, .commerces-grid, .news-grid { grid-template-columns: 1fr; }
.topbar { font-size: 0.78rem; }
.topbar .container { justify-content: center; gap: 0.5rem 1rem; }
.topbar nav { gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.nav-main ul { gap: 0.5rem 0.9rem; font-size: 0.8rem; }
.nav-main .nav-grid { flex-wrap: wrap; }
.search-form { min-width: 0; width: 100%; }
.section { padding: var(--gap-lg) 0; }
.agenda-section, .quartiers, .annuaire, .commerces { padding: var(--gap-lg) 0; }
}
/* --- ≤ 430px : petit mobile --- */
@media (max-width: 430px) {
/* À 2 colonnes pour ne pas écraser le contenu des cases */
.quartiers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.agenda-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.logo-title { font-size: 2.1rem; }
.container, .wrap { padding: 0 1rem; }
}
/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; }
.poster { transform: none !important; }
}
/* =========================================================
PIED DE PAGE FIXE MOBILE — barre 5 onglets + accueil central
- Visible uniquement <= 860px (aligné sur l'apparition du burger
et la disparition du .footer desktop)
- 3e icône (Accueil) mise en avant dans un cercle doré débordant
- Respecte la safe-area iOS (encoche / Home Bar)
========================================================= */
/* Masqué par défaut (tablette / desktop) */
.footer-mobile { display: none; }
@media (max-width: 860px) {
/* --- Conteneur fixe en bas --- */
.footer-mobile {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1200; /* au-dessus du contenu et de l'overlay menu (1000) */
display: flex;
justify-content: space-around;
align-items: flex-end;
/* Hauteur confortable + safe-area iOS sous la Home Bar */
padding: 0.45rem 0.25rem calc(0.45rem + env(safe-area-inset-bottom));
min-height: 60px;
background: var(--bleu-civique);
border-top: 1px solid rgba(255, 255, 255, 0.10);
box-shadow: 0 -4px 16px rgba(8, 27, 48, 0.28);
}
/* --- Onglet standard (4 latéraux) --- */
.footer-mobile__item {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-height: 48px; /* zone tactile WCAG */
padding: 4px 2px;
color: rgba(247, 247, 244, 0.78);
text-decoration: none;
font-family: var(--font-texte);
transition: color 0.18s ease, transform 0.18s ease;
-webkit-tap-highlight-color: transparent;
}
.footer-mobile__item svg {
width: 23px;
height: 23px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.footer-mobile__label {
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
text-align: center;
}
/* Feedback / état actif des onglets latéraux */
.footer-mobile__item:active { transform: scale(0.92); }
.footer-mobile__item:hover,
.footer-mobile__item.is-active { color: var(--jaune-solaire); }
.footer-mobile__item:focus-visible {
outline: 2px solid var(--jaune-solaire);
outline-offset: 2px;
border-radius: var(--rayon-sm);
}
/* --- Onglet central "Accueil" : cercle doré débordant --- */
.footer-mobile__home {
flex: 0 0 auto;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-decoration: none;
font-family: var(--font-texte);
/* remonte le bloc pour faire déborder le cercle au-dessus de la barre */
margin-top: -26px;
-webkit-tap-highlight-color: transparent;
}
/* Le disque doré */
.footer-mobile__home-circle {
position: relative; /* ancre le reflet ::after */
width: 58px;
height: 58px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
/* Dégradé concentrique : jaune vif au centre -> orange franc sur les bords */
background: radial-gradient(circle at 50% 38%, #FFE15C 0%, #FFB42E 48%, #F2841C 100%);
border: 4px solid var(--bleu-civique); /* anneau qui détache le cercle de la barre */
box-shadow: 0 6px 18px rgba(242, 132, 28, 0.55), 0 2px 6px rgba(8, 27, 48, 0.40);
overflow: hidden;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* Reflet glossy : bande de lumière sur la moitié haute (uniquement ce cercle) */
.footer-mobile__home-circle::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 55%;
border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
pointer-events: none;
z-index: 2;
}
/* Logo favicon à l'intérieur du cercle (au-dessus du dégradé, sous le reflet) */
.footer-mobile__home-circle img {
position: relative;
z-index: 1;
width: 40px;
height: 40px;
display: block;
object-fit: contain;
}
.footer-mobile__home-label {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
color: var(--jaune-solaire);
text-align: center;
}
.footer-mobile__home:active .footer-mobile__home-circle {
transform: scale(0.94);
box-shadow: 0 3px 10px rgba(242, 132, 28, 0.45);
}
.footer-mobile__home:focus-visible .footer-mobile__home-circle {
outline: 3px solid #fff;
outline-offset: 2px;
}
/* --- Décalage du contenu pour ne rien masquer derrière la barre --- */
body {
padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
}
/* =====================================================================
PAGES DE DÉTAIL (single) ET ARCHIVES — Le Noiséen
Styles ajoutés pour les gabarits single-*.php et archive-*.php.
Réutilisent les tokens de la charte (variables :root).
===================================================================== */
/* --- Conteneur de lecture confortable --- */
.single-wrap,
.archive-wrap {
max-width: 1100px;
margin: var(--gap-lg) auto var(--gap-xl);
padding: 0 var(--gap-md);
position: relative;
z-index: 1;
}
/* --- En-tête d'article / fiche (espacements harmonisés sur l'échelle --gap-*) --- */
.single-head { margin-bottom: var(--gap-lg); }
.single-head .badge-une { margin-bottom: var(--gap-sm); }
/* BADGE « type » de la FICHE événement : fond coloré repris de l'affiche.
Le style visuel du badge n'existait que sous .col-center (page d'accueil) ;
on le redonne ici pour la fiche. La classe couleur (.bleu, .sapin, …) est
ajoutée en PHP d'après la couleur de l'affiche. Les fonds et les couleurs de
texte reprennent EXACTEMENT la charte des posters (contrastes déjà validés AA :
texte clair sur fonds sombres, texte bleu civique sur jaune/olive). */
.single-head .badge-une--event {
display: inline-block;
font-family: var(--font-meta);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.3rem 0.8rem;
border-radius: var(--rayon-sm);
/* Défaut (couleur « Automatique » : pas de classe couleur) -> bleu pétrole,
comme l'affiche neutre, texte ivoire. */
background: var(--bleu-petrole);
color: var(--ivoire-clair);
}
/* Variantes de couleur (mêmes fonds que .poster.). */
.single-head .badge-une--event.bleu { background: var(--bleu-civique); color: var(--ivoire-clair); }
.single-head .badge-une--event.vert { background: var(--vert-territoire); color: #fff; }
.single-head .badge-une--event.sapin { background: #1A3C33; color: var(--ivoire-clair); }
.single-head .badge-une--event.prune { background: #4E2A52; color: var(--ivoire-clair); }
.single-head .badge-une--event.terracotta { background: #9C4A2F; color: var(--ivoire-clair); }
.single-head .badge-une--event.taupe { background: #8A7B72; color: var(--ivoire-clair); }
.single-head .badge-une--event.marron { background: #A07C56; color: var(--ivoire-clair); }
/* Fonds CLAIRS : texte bleu civique pour le contraste. */
.single-head .badge-une--event.jaune { background: var(--jaune-solaire); color: var(--bleu-civique); }
.single-head .badge-une--event.olive { background: #9DAE55; color: var(--bleu-civique); }
.single-article .article-title,
.single-fiche .article-title {
font-size: clamp(1.9rem, 3vw, 2.8rem);
line-height: 1.12;
margin: 0 0 var(--gap-xs);
}
.single-head .accroche {
font-family: var(--font-titre);
font-style: italic;
font-size: 1.2rem;
color: #444;
margin: 0 0 var(--gap-sm);
line-height: 1.45;
}
.single-head .meta {
font-size: 0.9rem;
color: #777;
padding-bottom: var(--gap-md);
border-bottom: 1px solid var(--gris-perle);
}
.single-head .meta strong { color: var(--vert-fonce); font-weight: 600; }
/* --- Image à la une --- */
.single-hero {
margin: 0 0 1.5rem;
border-radius: var(--rayon-md);
overflow: hidden;
}
.single-hero img { width: 100%; height: auto; display: block; }
/* Portrait de l'auteur EN BAS de la fiche tribune : pastille RONDE et CENTRÉE.
Image (ou silhouette) ; centrée via margin-inline:auto. */
.single-portrait-end {
position: relative;
width: 120px;
height: 120px;
aspect-ratio: 1 / 1; /* cercle */
margin: 1rem auto 1.5rem; /* centré horizontalement */
border-radius: 50%;
overflow: hidden;
background: var(--nav-tribune-bg);
}
.single-portrait-end img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* --- Corps de l'article : largeur de lecture + lettrine --- */
.single-body {
max-width: 70ch;
margin-inline: auto; /* largeur de lecture confortable, mais bloc CENTRÉ (marges égales) */
font-family: var(--font-texte); /* corps en sans-serif (Source Sans 3) */
}
.single-body p { font-family: var(--font-texte); font-size: 1.02rem; line-height: 1.55; margin: 0 0 1rem; color: #333; text-align: justify; hyphens: auto; }
.single-body h2 { font-size: 1.6rem; margin: 2rem 0 0.8rem; }
.single-body h3 { font-size: 1.3rem; margin: 1.6rem 0 0.6rem; }
.single-body img { border-radius: var(--rayon-sm); margin: 1rem 0; }
.single-body blockquote {
border-left: 4px solid var(--jaune-solaire);
margin: 1.5rem 0;
padding: 0.5rem 0 0.5rem 1.5rem;
font-family: var(--font-titre);
font-style: italic;
font-size: 1.2rem;
color: var(--bleu-civique);
}
.single-article .single-body > p:first-of-type:first-letter {
font-family: var(--font-titre);
font-size: 3.4rem;
font-weight: 900;
float: left;
line-height: 0.9;
margin: 0.1rem 0.55rem 0 0;
color: var(--bleu-civique);
}
/* --- Pied d'article + navigation --- */
.single-foot { margin-top: var(--gap-lg); padding-top: var(--gap-md); border-top: 1px solid var(--gris-perle); }
.single-tags { font-size: 0.85rem; color: #777; }
.single-back { margin-top: var(--gap-md); } /* espacement harmonisé sous le contenu */
/* Bouton « ✎ Modifier l'article » sous l'article — capsule jaune (façon
.btn-don). Affiché uniquement aux utilisateurs pouvant éditer (admins). */
.single-edit { margin: 1.2rem 0 0; }
.single-edit a {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: var(--jaune-solaire);
color: var(--bleu-civique);
font-family: var(--font-texte);
font-weight: 700;
font-size: 0.85rem;
padding: 0.5rem 1.1rem;
border-radius: 999px;
text-decoration: none;
transition: background 0.15s ease, transform 0.1s ease;
}
.single-edit a:hover { background: #ffb724; color: var(--bleu-civique); transform: translateY(-1px); }
.single-nav {
display: flex;
justify-content: space-between;
gap: 1rem;
margin: 2rem 0;
padding: 1.2rem 0;
border-top: 2px solid var(--gris-bordure);
border-bottom: 2px solid var(--gris-bordure);
font-weight: 600;
}
/* Liens prev/next : vraies cartes encadrées ; au survol, fond + bordure à la
couleur de la rubrique (bleu clair sur Tribune), via les variables --rubrique-*. */
.single-nav-prev,
.single-nav-next { flex: 1; min-width: 0; }
.single-nav-next { text-align: right; }
.single-nav a {
display: inline-block;
max-width: 100%;
color: var(--bleu-civique);
text-decoration: none;
padding: 0.7rem 1rem;
border: 1px solid var(--gris-bordure);
border-radius: var(--rayon-md);
background: #fff;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.1s ease;
}
.single-nav a:hover {
color: var(--rubrique-btn, var(--bleu-civique));
border-color: var(--rubrique-accent, var(--jaune-solaire));
background: color-mix(in srgb, var(--rubrique-accent, var(--jaune-solaire)) 14%, #fff);
transform: translateY(-1px);
}
/* =====================================================================
ZONE COMMENTAIRES — formulaire sur fond VERT FONCÉ (sur tous les articles).
Version simple : le fond est porté directement par #comments (.comments-area).
===================================================================== */
.comments-area {
background: linear-gradient(160deg, #2B4523 0%, var(--vert-quartier) 100%);
color: rgba(255, 255, 255, 0.9);
border-radius: var(--rayon-md);
padding: clamp(1.5rem, 4vw, 2.5rem);
margin-top: var(--gap-xl);
}
/* Conteneurs internes transparents (le vert de .comments-area reste visible). */
.comments-area .comment-respond,
.comments-area #respond,
.comments-area .comment-form,
.comments-area ol.comment-list {
background: transparent;
border: 0;
padding: 0;
margin: 0;
max-width: none;
}
/* Conteneurs internes : pas de fond propre (le vert foncé doit rester visible).
Le .comment-body garde sa carte translucide via sa règle dédiée plus bas. */
.comments-area :is(.comment-respond, #respond, .comment-form, ol.comment-list),
.comments-area :is(.comment-respond, #respond, .comment-form, ol.comment-list) {
background: transparent;
border: 0;
box-shadow: none;
}
/* Titres (« X commentaires sur… » + « Laisser un commentaire »).
On couvre .comment-reply-title ET #reply-title (selon version WP), ce dernier
en ID : on monte la spécificité avec body…#reply-title pour passer devant. */
.comments-area :is(.comments-title, .comment-reply-title),
.comments-area :is(.comments-title, .comment-reply-title),
.comments-area #reply-title,
.comments-area #reply-title {
font-family: var(--font-titre);
font-size: clamp(1.4rem, 3vw, 1.9rem);
color: #fff;
margin: 0 0 1.2rem;
}
.comments-area .comments-title span,
.comments-area .comments-title span { color: var(--jaune-solaire); }
/* Liste des commentaires existants */
.comments-area .comment-list,
.comments-area .comment-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.comments-area .comment-list .comment-body,
.comments-area .comment-list .comment-body {
background: rgba(255, 255, 255, 0.06);
border-radius: var(--rayon-sm);
padding: 1rem 1.2rem;
margin: 0 0 1rem;
}
.comments-area .comment-author .fn,
.comments-area .comment-author .fn { color: #fff; }
.comments-area .comment-metadata a,
.comments-area .comment-metadata a { color: rgba(255,255,255,0.55); }
.comments-area .comment-content,
.comments-area .comment-content { color: rgba(255,255,255,0.85); }
/* Texte d'intro du formulaire + notes */
.comments-area :is(.comment-notes, .comment-form-comment + p, .logged-in-as),
.comments-area :is(.comment-notes, .comment-form-comment + p, .logged-in-as) {
color: rgba(255,255,255,0.65);
font-size: 0.88rem;
}
.comments-area a,
.comments-area a { color: var(--jaune-solaire); }
/* Champs du formulaire : grille soignée, fond clair lisible. */
.comments-area .comment-form,
.comments-area .comment-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.comments-area .comment-form .comment-form-comment,
.comments-area .comment-form .comment-form-comment,
.comments-area .comment-form .form-submit,
.comments-area .comment-form .form-submit,
.comments-area .comment-form .comment-notes,
.comments-area .comment-form .comment-notes { grid-column: 1 / -1; } /* pleine largeur */
.comments-area .comment-form p,
.comments-area .comment-form p { margin: 0; }
/* Consentement cookies : pleine largeur, case + texte alignés. */
.comments-area .comment-form-cookies-consent,
.comments-area .comment-form-cookies-consent {
grid-column: 1 / -1;
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.comments-area .comment-form-cookies-consent label,
.comments-area .comment-form-cookies-consent label {
margin: 0;
text-transform: none;
letter-spacing: 0;
font-weight: 400;
font-size: 0.85rem;
}
.comments-area .comment-form label,
.comments-area .comment-form label {
display: block;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.75);
margin-bottom: 0.3rem;
}
.comments-area :is(input[type="text"], input[type="email"], input[type="url"], textarea),
.comments-area :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
width: 100%;
background: #fff;
border: 0;
border-radius: var(--rayon-sm);
padding: 0.65rem 0.8rem;
font-size: 0.95rem;
color: var(--anthracite);
}
.comments-area textarea,
.comments-area textarea { min-height: 130px; resize: vertical; }
.comments-area :is(input:focus, textarea:focus),
.comments-area :is(input:focus, textarea:focus) {
outline: none;
border-color: var(--jaune-solaire);
box-shadow: 0 0 0 3px rgba(255, 200, 87, 0.3);
}
/* Bouton « Publier le commentaire » : jaune solaire, bien visible. */
.comments-area .form-submit .submit,
.comments-area .form-submit .submit {
background: var(--jaune-solaire);
color: var(--bleu-civique);
border: 0;
border-radius: var(--rayon-sm);
padding: 0.75rem 1.6rem;
font-family: var(--font-texte);
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
transition: background 0.15s ease, transform 0.1s ease;
}
.comments-area .form-submit .submit:hover,
.comments-area .form-submit .submit:hover { background: #ffb724; transform: translateY(-1px); }
/* Responsive : une colonne sur mobile. */
@media (max-width: 600px) {
.comments-area .comment-form,
.comments-area .comment-form { grid-template-columns: 1fr; }
}
/* --- Fiches CPT (association, commerce) ---
GRILLE 2 colonnes : contenu (+ encart) à GAUCHE, photo + Informations à DROITE.
L'encart reste donc strictement dans la colonne de gauche (il ne déborde plus
sous le bloc de droite comme avec un float). */
.fiche-grid {
display: grid;
grid-template-columns: 1fr 31%;
gap: var(--gap-lg); /* gouttière harmonisée entre les colonnes (2rem) */
align-items: start; /* la colonne droite ne s'étire pas en hauteur */
margin: 0 0 var(--gap-lg);
}
/* Colonne DROITE (photo + Informations) ; placée en 2e colonne bien qu'elle
soit première dans le HTML. */
.fiche-aside {
grid-column: 2;
grid-row: 1;
}
/* Colonne GAUCHE (contenu + encart) ; on annule la largeur de lecture/centrage
propre à l'article isolé pour qu'elle remplisse sa colonne. */
.fiche-content.single-body {
grid-column: 1;
grid-row: 1;
max-width: none;
margin-inline: 0;
min-width: 0; /* évite tout débordement de la grille */
}
/* Photo au format RECTANGULAIRE (type photo d'identité, portrait vertical),
en haut du bloc flottant, pleine largeur de la colonne. */
.fiche-media {
width: 100%;
aspect-ratio: 3 / 4; /* photo d'identité */
margin: 0 0 var(--gap-md); /* espace photo → bloc Informations (harmonisé) */
border-radius: var(--rayon-md);
overflow: hidden;
background: var(--gris-bloc);
}
.fiche-media img {
width: 100%;
height: 100%;
min-height: 0;
margin: 0;
object-fit: cover;
border-radius: var(--rayon-md);
}
/* Variante PHOTO (fiches asso & commerce) : format PAYSAGE identique à la
vignette de l'annuaire (noiseen-commerce ~3/2), pour un « morph » fluide
carte → fiche. La photo entière est cliquable (retour à l'archive). */
.fiche-media--photo {
aspect-ratio: 3 / 2;
position: relative;
}
.fiche-media__link {
position: absolute;
inset: 0;
z-index: 2; /* recouvre l'image : clic = retour à l'archive */
}
/* Le placeholder dégradé (même helper que l'annuaire) remplit tout le cadre
paysage de la fiche, au lieu de sa hauteur fixe de 150px (vignette). */
.fiche-media--photo .asso-ph-gradient {
height: 100%;
border-radius: 0;
}
.fiche-media--photo img { width: 100%; height: 100%; object-fit: cover; }
/* Variante VISUEL ANNONCE (fiche d'une petite annonce) : reprend EXACTEMENT le
visuel olive de la liste des annonces (motif rayé + icône centrée + badge du
type), au format paysage 3/2 et pleine largeur de la colonne. Toute la carte
est cliquable (retour à l'archive des annonces) via .fiche-media__link. */
.fiche-annonce-visuel {
aspect-ratio: 3 / 2;
position: relative;
overflow: hidden;
background: var(--olive-clair); /* visible une fraction de seconde avant le dégradé/image */
}
/* Icône du placeholder un peu plus grande sur la fiche (cadre plus large). */
.fiche-annonce-visuel .annonce-ph__ico { width: 52px; height: 52px; }
.fiche-annonce-visuel .annonce-ph__label { font-size: 1.05rem; }
.fiche-annonce-visuel img { width: 100%; height: 100%; object-fit: cover; }
/* Badge du type, posé sur le visuel (mêmes codes que .annonce-card .badge). */
.fiche-annonce-visuel .badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 3; /* au-dessus du lien plein cadre */
background: var(--olive-accent);
color: #20280C;
font-family: var(--font-texte);
font-weight: 700;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.3rem 0.7rem;
border-radius: 999px;
}
/* Conteneurs média des cartes d'archive : neutres (l'image garde sa taille). */
.asso-card__media,
.commerce__media { display: block; }
/* NB : le morph du poster est désactivé via view-transition-name:none, imprimé
INLINE dans le par le_noiseen_view_transitions_css() (functions.php),
pour que la règle soit présente AU MOMENT de la navigation (insensible au
chargement asynchrone du cache). Voir functions.php. */
.fiche-infos {
background: var(--gris-bloc);
border: 1px solid var(--gris-bordure);
border-radius: var(--rayon-md);
padding: var(--gap-md);
}
/* Encart « personnalisez votre fiche » (colonne de gauche). Fond = couleur de
l'onglet de nav de la rubrique concernée (asso / commerce). */
.fiche-cta {
margin-top: var(--gap-lg); /* détache nettement l'encart du texte (2rem) */
padding: var(--gap-md); /* même padding que .fiche-infos */
border-radius: var(--rayon-md);
border: 1px solid rgba(13, 43, 69, 0.10);
}
.fiche-cta--asso { background: var(--nav-asso-bg); } /* #EFF3DD */
.fiche-cta--commerce { background: var(--nav-commerce-bg); } /* #E4F0E2 */
.fiche-cta--evenement { background: var(--nav-agenda-bg); } /* #DEEDE8 */
.fiche-cta--annonce { background: var(--nav-annonce-bg); } /* #FBF3D9 */
/* Poster (affiche) repris de l'agenda DANS la fiche événement : pleine largeur
de la colonne, droit (pas d'inclinaison ni d'effet de survol cliquable).
Sélecteur qualifié (.fiche-aside …) pour passer devant .poster:nth-child(). */
.fiche-aside .poster--fiche,
.fiche-aside .poster--fiche:hover {
width: 100%;
min-height: 240px; /* même hauteur que dans le mur de l'agenda */
margin: 0 0 var(--gap-md); /* même espacement que .fiche-media → infos */
transform: none;
cursor: default;
}
.fiche-aside .poster--fiche:hover {
box-shadow: 0 4px 14px rgba(13, 43, 69, 0.12);
}
.fiche-cta h3 {
font-family: var(--font-titre);
font-size: 1.05rem;
color: var(--bleu-civique);
margin: 0 0 var(--gap-xs);
}
.fiche-cta p {
font-size: 0.92rem;
line-height: 1.5;
color: var(--anthracite);
margin: 0 0 var(--gap-sm);
}
.fiche-cta__btn {
display: inline-block;
background: var(--rubrique-btn, var(--bleu-civique)); /* couleur foncée de la rubrique */
color: #fff;
font-family: var(--font-texte);
font-weight: 600;
font-size: 0.85rem;
padding: 0.55rem 1.1rem;
border-radius: var(--rayon-sm);
text-decoration: none;
transition: filter 0.15s ease, transform 0.1s ease;
}
/* Survol : texte blanc conservé (lisible) + simple éclaircissement du fond. */
.fiche-cta__btn:hover { color: #fff; filter: brightness(1.12); transform: translateY(-1px); }
.fiche-infos h3 {
font-size: 1.1rem;
margin: 0 0 0.8rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--rubrique-accent, var(--jaune-solaire)); /* soulignement à la rubrique */
display: inline-block;
}
.fiche-meta-list { list-style: none; margin: 0; padding: 0; }
.fiche-meta-list li {
display: flex;
flex-direction: column;
padding: 0.6rem 0;
border-bottom: 1px solid var(--gris-perle);
}
.fiche-meta-list li:last-child { border-bottom: 0; }
.fiche-meta-list strong {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--vert-fonce);
margin-bottom: 0.15rem;
}
.fiche-meta-list span { color: var(--anthracite); }
.fiche-infos--inline { margin-top: 1.5rem; }
.annonce-prix-big {
font-family: var(--font-titre);
font-weight: 900;
font-size: 1.8rem;
color: var(--vert-territoire);
margin: 0.3rem 0 0;
}
/* --- En-tête d'archive --- */
/* En-tête d'archive : neutralise le layout grid hérité de
.section-title-block (qui enfermait le H1 dans une colonne de 200px
et le rendait illisible). On repasse en bloc pleine largeur. */
.archive-head {
display: block; /* annule le display:grid de .section-title-block */
grid-template-columns: none;
margin-bottom: 2rem;
}
.archive-head h1 {
grid-column: auto; /* le titre occupe toute la largeur */
font-size: clamp(1.9rem, 2.5vw, 2.8rem);
color: var(--bleu-civique);
margin: 0;
}
.archive-head .intro {
grid-column: auto; /* l'intro repasse sous le titre, pleine largeur */
max-width: none;
margin: 0.6rem 0 0;
}
.archive-head h1::after {
content: "";
display: block;
width: 60px; height: 4px;
background: var(--rubrique-accent, var(--jaune-solaire)); /* accent de la rubrique, sinon jaune */
margin: 0.6rem 0 0;
border-radius: 2px;
}
/* --- Grille de liste d'associations --- */
.assos-liste-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--gap-md);
}
.asso-card {
background: #fff;
border: 1px solid var(--gris-bordure);
border-radius: var(--rayon-md);
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 300px; /* uniformise la hauteur des cartes */
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.asso-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(13,40,69,0.12); }
.asso-card .ph, .asso-card img, .asso-card .asso-ph-gradient { height: 150px; width: 100%; object-fit: cover; flex-shrink: 0; }
.asso-card .caption { padding: 0.9rem; flex: 1; }
.asso-card h4 { font-family: var(--font-texte); font-weight: 600; font-size: 1.05rem; line-height: 1.25; margin: 0.2rem 0; color: var(--bleu-civique); }
.asso-card .cat { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--vert-fonce); letter-spacing: 0.06em; }
.asso-card .addr { font-size: 0.85rem; color: #666; margin: 0.2rem 0 0; }
/* Image par défaut : dégradé coloré par catégorie + nom centré en blanc.
Même gabarit que .ph / img (hauteur 150px). */
.asso-ph-gradient {
height: 150px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0.8rem;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
/* léger voile pour garantir la lisibilité du texte sur tous les dégradés */
.asso-ph-gradient::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.18) 100%);
}
/* Bloc centré : icône blanche au-dessus du nom de catégorie */
.asso-ph-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.asso-ph-icon {
width: 34px;
height: 34px;
stroke: #fff;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.asso-ph-cat {
font-family: var(--font-texte);
font-weight: 700;
font-size: 0.95rem;
line-height: 1.3;
text-align: center;
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,0.35);
letter-spacing: 0.02em;
text-transform: uppercase;
}
/* --- Pagination + état vide --- */
.archive-pagination { margin: 2.5rem 0 0; }
.archive-pagination .page-numbers {
display: inline-flex;
min-width: 40px;
height: 40px;
align-items: center;
justify-content: center;
padding: 0 0.6rem;
margin: 0 0.15rem;
border: 1px solid var(--gris-bordure);
border-radius: var(--rayon-sm);
color: var(--bleu-civique);
font-weight: 600;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.archive-pagination .page-numbers:hover,
.archive-pagination .page-numbers.current {
background: var(--bleu-civique);
color: #fff;
border-color: var(--bleu-civique);
}
.archive-empty {
text-align: center;
padding: 3rem 1rem;
font-size: 1.1rem;
color: #777;
font-style: italic;
}
/* État vide des petites annonces sur la page d'accueil (fond olive sombre) :
message clair, centré et occupant toute la largeur de la grille. */
.annonces-empty {
grid-column: 1 / -1;
text-align: center;
padding: 3rem 1rem;
font-size: 1.1rem;
color: #F7F7F4; /* ivoire — lisible sur le fond sombre de la section */
font-style: italic;
}
/* --- Responsive fiches --- */
@media (max-width: 720px) {
/* Une seule colonne : photo + Informations en haut, puis contenu + encart.
On annule le placement explicite des colonnes (ordre = ordre du HTML). */
.fiche-grid { grid-template-columns: 1fr; gap: 1.25rem; }
.fiche-aside,
.fiche-content.single-body { grid-column: 1; grid-row: auto; }
.single-nav { flex-direction: column; }
.single-nav-next { text-align: left; margin-left: 0; }
}
/* --- Messages de retour du formulaire newsletter --- */
.newsletter-msg {
margin: 0.6rem 0 0;
padding: 0.6rem 0.9rem;
border-radius: var(--rayon-sm);
font-size: 0.92rem;
font-weight: 600;
}
.newsletter-msg.is-ok { background: rgba(90,143,110,0.18); color: #1f5a36; }
.newsletter-msg.is-err { background: rgba(200,52,43,0.14); color: #9a241c; }
/* =====================================================================
PAGE DE RECHERCHE (search.php) — Le Noiséen
===================================================================== */
.recherche-page-hero { margin-bottom: 0; }
.search-results { padding-top: var(--gap-lg); }
.search-summary {
font-size: 1.05rem;
color: var(--anthracite);
margin: 0 0 1.2rem;
}
.search-summary strong { color: var(--bleu-civique); }
/* --- Onglets de filtre --- */
.search-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0 1.8rem;
padding-bottom: 1.2rem;
border-bottom: 2px solid var(--gris-bordure);
}
.search-filter {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.9rem;
border: 1.5px solid var(--gris-bordure);
border-radius: 999px;
font-size: 0.9rem;
font-weight: 600;
color: var(--bleu-civique);
background: #fff;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.search-filter:hover { border-color: var(--bleu-civique); color: var(--bleu-civique); }
.search-filter.is-active {
background: var(--bleu-civique);
border-color: var(--bleu-civique);
color: #fff;
}
.search-filter-count {
font-size: 0.78rem;
background: var(--gris-bloc);
color: var(--bleu-civique);
border-radius: 999px;
padding: 0.05rem 0.5rem;
min-width: 1.4em;
text-align: center;
}
.search-filter.is-active .search-filter-count {
background: rgba(255,255,255,0.25);
color: #fff;
}
/* --- Liste des résultats --- */
.search-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.search-item {
display: grid;
grid-template-columns: 120px 1fr;
gap: var(--gap-md);
background: #fff;
border: 1px solid var(--gris-bordure);
border-radius: var(--rayon-md);
overflow: hidden;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.search-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13,40,69,0.10); }
.search-item-media { display: block; }
.search-item-media img,
.search-item-media .ph {
width: 120px; height: 100%;
min-height: 110px;
object-fit: cover;
}
.search-item-body { padding: 0.9rem 1rem 0.9rem 0; }
.search-item-type {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--vert-fonce);
margin-bottom: 0.25rem;
}
.search-item h3 { font-size: 1.15rem; margin: 0 0 0.35rem; line-height: 1.25; color: var(--bleu-civique); }
.search-item-excerpt { font-size: 0.92rem; color: #555; margin: 0 0 0.4rem; line-height: 1.5; }
.search-item-meta { font-size: 0.82rem; color: #888; margin: 0; }
/* Liseré de couleur à gauche selon le type */
.search-item--post { border-left: 4px solid var(--bleu-civique); }
.search-item--association { border-left: 4px solid var(--vert-territoire); }
.search-item--commerce { border-left: 4px solid var(--jaune-fonce); }
.search-item--evenement { border-left: 4px solid var(--olive-accent); }
.search-item--annonce { border-left: 4px solid var(--rouge-alerte); }
@media (max-width: 560px) {
.search-item { grid-template-columns: 1fr; }
.search-item-media img, .search-item-media .ph { width: 100%; height: 160px; }
.search-item-body { padding: 0 1rem 1rem; }
}
/* =====================================================================
PAGES STANDARD (page.php) — Le Noiséen
Met en forme les pages éditoriales (À propos, Publicité, Mentions…)
qui utilisent les classes par défaut .site-main / .entry-* d'Underscores.
Largeur de lecture confortable + titre dans la charte.
===================================================================== */
.site-main {
max-width: 1000px;
margin: var(--gap-lg) auto var(--gap-xl);
padding: 0 var(--gap-md);
position: relative;
z-index: 1;
}
/* La page d'accueil et les archives gèrent déjà leur propre largeur :
on ne contraint que les pages "article" classiques. */
.page .site-main .entry-header { margin-bottom: 1.5rem; }
.page .entry-title,
.single .entry-title {
font-family: var(--font-titre);
font-weight: 900;
font-size: clamp(2rem, 3.2vw, 3rem);
line-height: 1.12;
color: var(--bleu-civique);
margin: 0 0 0.4rem;
letter-spacing: -0.01em;
}
.page .entry-title::after,
.single .entry-title::after {
content: "";
display: block;
width: 64px; height: 5px;
background: var(--jaune-solaire);
margin: 0.7rem 0 0;
border-radius: 3px;
}
/* Corps de page : confort de lecture */
.entry-content {
font-size: 1.05rem;
line-height: 1.75;
color: #333;
}
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > figure,
.entry-content > h2,
.entry-content > h3,
.entry-content > blockquote { max-width: 75ch; }
.entry-content p { margin: 0 0 1.1rem; }
.entry-content h2 {
font-family: var(--font-titre);
font-size: clamp(1.5rem, 2vw, 2rem);
color: var(--bleu-civique);
margin: 2rem 0 0.8rem;
}
.entry-content h3 {
font-family: var(--font-titre);
font-size: 1.3rem;
color: var(--bleu-civique);
margin: 1.6rem 0 0.6rem;
}
.entry-content ul,
.entry-content ol { margin: 0 0 1.2rem 1.4rem; }
.entry-content li { margin: 0.35rem 0; }
.entry-content a { color: var(--vert-territoire); text-decoration: underline; }
.entry-content a:hover { color: var(--bleu-civique); }
.entry-content blockquote {
border-left: 4px solid var(--jaune-solaire);
margin: 1.5rem 0;
padding: 0.4rem 0 0.4rem 1.4rem;
font-family: var(--font-titre);
font-style: italic;
font-size: 1.15rem;
color: var(--bleu-civique);
}
.entry-content img { border-radius: var(--rayon-sm); height: auto; }
/* Tableaux (grilles tarifaires…) : pleine largeur dans le contenu */
.entry-content .wp-block-table,
.entry-content table { max-width: 100%; width: 100%; margin: 1.2rem 0; }
.entry-content table { border-collapse: collapse; }
.entry-content figure.wp-block-table { overflow-x: auto; }
.entry-footer { margin-top: 1.5rem; font-size: 0.85rem; }
.entry-footer .edit-link a { color: #888; }
/* =====================================================================
PASTILLE « ✎ Modifier » (édition rapide, admins/éditeurs uniquement)
Discrète, en coin du contenu. Invisible pour abonnés/visiteurs
(le PHP n'imprime rien s'ils n'ont pas le droit de modifier).
===================================================================== */
.noiseen-edit-badge {
position: absolute;
top: 8px;
right: 8px;
z-index: 20;
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.28rem 0.7rem;
font-family: var(--font-texte);
font-size: 0.72rem;
font-weight: 800;
line-height: 1;
background: var(--jaune-solaire); /* fond jaune/doré */
border: 1px solid #e0b347;
border-radius: 999px;
box-shadow: 0 2px 8px rgba(13,40,69,0.25);
opacity: 0.92;
transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
/* Le lien lui-même : texte bleu civique, bien lisible sur le doré.
On cible le ET le span .edit-link générés par edit_post_link(). */
.noiseen-edit-badge,
.noiseen-edit-badge a,
.noiseen-edit-badge .edit-link,
.noiseen-edit-badge .edit-link a {
color: var(--bleu-civique) !important;
text-decoration: none !important;
}
.noiseen-edit-badge:hover {
opacity: 1;
background: #ffd470; /* doré plus clair au survol */
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(13,40,69,0.3);
}
/* Les cartes qui hébergent la pastille doivent être positionnées. */
.breve,
.art-sec,
.news-article,
.poster,
.commerce,
.annonce-card,
.col-center,
.tribune-author,
.single-article,
.single-fiche,
.search-item,
.mini-headline,
.page .entry-content,
.page article.page {
position: relative;
}
/* PAGE D'ACCUEIL — grille « À la une locale » : le badge « Modifier » est
MASQUÉ au repos et n'apparaît qu'au SURVOL du bloc (ou au focus clavier).
Chaque bloc est INDÉPENDANT : on cible le badge ENFANT DIRECT (>) de chaque
bloc, pour qu'un conteneur englobant (ex. .col-center qui contient l'article
à la une ET les articles secondaires) ne révèle pas les badges de ses
sous-blocs. Ainsi 2 articles secondaires côte à côte ont chacun leur badge,
révélé séparément. */
.home .breve > .noiseen-edit-badge,
.home .col-center > .noiseen-edit-badge,
.home .home-art4 > .noiseen-edit-badge,
.home .art-sec > .noiseen-edit-badge,
.home .top-block > .noiseen-edit-badge,
.home .initiative-card > .noiseen-edit-badge {
opacity: 0;
pointer-events: none; /* non cliquable tant qu'invisible */
}
.home .breve:hover > .noiseen-edit-badge,
.home .breve:focus-within > .noiseen-edit-badge,
.home .col-center:hover > .noiseen-edit-badge,
.home .col-center:focus-within > .noiseen-edit-badge,
.home .home-art4:hover > .noiseen-edit-badge,
.home .home-art4:focus-within > .noiseen-edit-badge,
.home .art-sec:hover > .noiseen-edit-badge,
.home .art-sec:focus-within > .noiseen-edit-badge,
.home .top-block:hover > .noiseen-edit-badge,
.home .top-block:focus-within > .noiseen-edit-badge,
.home .initiative-card:hover > .noiseen-edit-badge,
.home .initiative-card:focus-within > .noiseen-edit-badge {
opacity: 0.95;
pointer-events: auto;
}
/* Sur les cartes très petites (posters agenda), pastille encore plus compacte */
.poster .noiseen-edit-badge { top: 6px; right: 6px; padding: 0.18rem 0.5rem; font-size: 0.66rem; }
/* Sur une page éditoriale, on place la pastille en haut à droite du contenu */
.page article.page > .noiseen-edit-badge,
.single-article > .noiseen-edit-badge,
.single-fiche > .noiseen-edit-badge { top: 0; right: 0; }
/* =====================================================================
ZONE COMMENTAIRES (suite) — détails du formulaire.
Le fond vert + la mise en page principale sont définis plus haut
(bloc « ZONE COMMENTAIRES — formulaire sur fond VERT FONCÉ »).
===================================================================== */
/* --- Titres « Laisser un commentaire » / « X commentaires » --- */
.comments-title,
.comment-respond #reply-title {
font-family: var(--font-titre);
font-weight: 700;
font-size: clamp(1.4rem, 1.6vw + 1rem, 1.9rem);
color: #fff;
margin: 0 0 1rem;
}
.comment-respond #reply-title small { font-size: 0.9rem; font-weight: 400; margin-left: 0.5rem; }
/* --- Ligne « Connexion en tant que… » --- */
.comment-form-comment + *,
.logged-in-as,
.comment-notes {
font-size: 0.92rem;
color: rgba(255,255,255,0.7);
margin: 0 0 1rem;
line-height: 1.5;
}
.logged-in-as a,
.comment-notes a,
.comment-reply-link {
color: var(--jaune-solaire);
font-weight: 600;
}
.logged-in-as a:hover,
.comment-reply-link:hover { color: #fff; }
.comment-notes .required { color: var(--rouge-alerte); }
/* --- Formulaire : champs --- (fond porté par .comments-area en vert) */
.comment-respond {
background: transparent;
border: 0;
padding: 0;
margin: 1rem 0 0;
}
.comment-form { display: flex; flex-direction: column; gap: 1rem; }
.comment-form p { margin: 0; }
.comment-form label {
display: block;
font-weight: 600;
font-size: 0.85rem;
color: rgba(255,255,255,0.85);
margin-bottom: 0.35rem;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
font-family: var(--font-texte);
font-size: 1rem;
color: var(--anthracite);
background: #fff;
border: 1.5px solid #aab2bd;
border-radius: var(--rayon-sm);
padding: 0.7rem 0.9rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.comment-form textarea {
min-height: 140px;
resize: vertical;
line-height: 1.6;
}
.comment-form input:focus,
.comment-form textarea:focus {
outline: none;
border-color: var(--bleu-civique);
box-shadow: 0 0 0 3px rgba(13,43,69,0.12);
}
/* Champs auteur/email/site sur une ligne en largeur confortable */
.comment-form-author,
.comment-form-email,
.comment-form-url { max-width: 420px; }
/* Case « se souvenir de moi » */
.comment-form-cookies-consent {
flex-direction: row;
align-items: center;
gap: 0.5rem;
font-size: 0.88rem;
color: rgba(255,255,255,0.7);
}
.comment-form-cookies-consent input { width: auto; }
.comment-form-cookies-consent label { margin: 0; font-weight: 400; }
/* --- Bouton d'envoi : style charte --- */
.form-submit { margin: 0; }
.comment-form #submit,
.form-submit input[type="submit"] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--jaune-solaire);
color: var(--bleu-civique);
font-family: var(--font-texte);
font-weight: 700;
font-size: 0.95rem;
border: 0;
border-radius: var(--rayon-sm);
padding: 0.75rem 1.5rem;
cursor: pointer;
transition: background 0.15s ease, transform 0.1s ease;
}
.comment-form #submit:hover,
.form-submit input[type="submit"]:hover {
background: #ffb724;
transform: translateY(-1px);
}
/* --- Liste des commentaires --- */
.comment-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.comment-list li { margin: 0 0 1.2rem; }
.comment-body {
background: rgba(255,255,255,0.08);
border-radius: var(--rayon-md);
padding: 1.1rem 1.25rem;
color: rgba(255,255,255,0.9);
}
.comment-list .children { list-style: none; margin: 1rem 0 0 1.5rem; padding-left: 1rem; border-left: 2px solid var(--gris-perle); }
.comment-meta { font-size: 0.82rem; color: #888; margin-bottom: 0.5rem; }
.comment-author .fn { font-weight: 700; color: var(--bleu-civique); font-style: normal; }
.comment-author .says { display: none; }
.comment-metadata a { color: #888; }
.comment-content p { font-size: 0.96rem; line-height: 1.6; color: rgba(255,255,255,0.9); margin: 0 0 0.6rem; }
.comment-awaiting-moderation { font-size: 0.85rem; color: var(--jaune-fonce); font-style: italic; }
.comment .avatar { border-radius: 50%; margin-right: 0.75rem; float: left; }
/* Pagination des commentaires + navigation */
.comment-navigation { margin: 1.5rem 0; font-weight: 600; }
.comment-navigation a { color: var(--bleu-civique); }
/* Message commentaires fermés */
.no-comments { color: #888; font-style: italic; }
@media (max-width: 560px) {
.comment-respond { padding: 1rem; }
.comment-form-author, .comment-form-email, .comment-form-url { max-width: 100%; }
}
/* --- Encarts publicitaires dans les listes (commerces / annonces) --- */
.commerce-pub, .annonce-pub { border: 2px dashed var(--jaune-fonce, #a96b0d) !important; background: rgba(255,200,87,0.08); }
.commerce-pub .ph-pub { background: rgba(255,200,87,0.18); color: var(--jaune-fonce, #a96b0d); }
.annonce-pub .photo { background: rgba(255,200,87,0.18); }
.commerce-pub h4, .annonce-pub h4 { color: var(--bleu-civique); }
/* =====================================================================
PAGES DU MENU — structure 2 colonnes 75/25 + filtres annuaire
===================================================================== */
/* position:relative + z-index:1 = place le contenu AU-DESSUS de la couche
.ambiance (fixed, z-index:0). Sans ça, Chrome ne peignait pas le titre,
la recherche et le filtre A→Z en haut de la colonne (bug de compositing). */
.page-cols { position: relative; z-index: 1; display: grid; grid-template-columns: 75% 25%; gap: var(--gap-lg); align-items: start; max-width: var(--max-w); margin: var(--gap-lg) auto var(--gap-xl); padding: 0 var(--gap-md); }
.page-cols__main { min-width: 0; }
.page-cols__aside { min-width: 0; }
@media (max-width: 900px) { .page-cols { grid-template-columns: 1fr; } }
/* Encart colonne droite « cet espace est le vôtre » */
.aside-cta { background: var(--gris-bloc); border: 1px solid var(--gris-bordure); border-left: 4px solid var(--rubrique-accent, var(--jaune-solaire)); border-radius: var(--rayon-md); padding: var(--gap-md); position: sticky; top: 80px; }
.aside-cta h3 { font-family: var(--font-titre); font-size: 1.25rem; color: var(--rubrique-btn, var(--bleu-civique)); margin: 0 0 0.6rem; }
.aside-cta p { font-size: 0.95rem; line-height: 1.6; color: #444; margin: 0 0 1rem; }
.aside-cta .btn { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--rubrique-btn, var(--bleu-civique)); color: #fff; font-weight: 600; padding: 0.65rem 1.2rem; border-radius: var(--rayon-sm); text-decoration: none; transition: background 0.15s ease, transform 0.1s ease, filter 0.15s ease; }
.aside-cta .btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
/* PAGE CONTACT — aside : espace entre les blocs successifs (.aside-cta empilés). */
.aside-annuaire--contact .aside-cta + .aside-cta { margin-top: var(--gap-md); }
/* Réseaux sociaux en version ASIDE (fond clair) : pastilles bleu civique,
par contraste avec la version footer (fond foncé). */
.socials--aside { display: flex; gap: 0.6rem; margin-top: 0.4rem; }
.socials--aside a {
width: 38px;
height: 38px;
background: var(--bleu-civique);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
text-decoration: none;
transition: background 0.15s ease, transform 0.1s ease;
}
.socials--aside a:hover { background: var(--vert-territoire); transform: translateY(-2px); }
/* Infos pratiques : liens e-mail bien lisibles. */
.aside-contact-infos a { color: var(--bleu-civique); font-weight: 600; }
.aside-contact-infos a:hover { color: var(--vert-territoire); }
/* Champ de recherche annuaire (réutilise .annuaire-search existant) — on s'assure qu'il est full width */
.page-cols__main .annuaire-search { display: flex; gap: 0.5rem; margin: 0 0 1.5rem; max-width: none; border: 0; border-radius: 0; background: transparent; overflow: visible; }
/* Fond du champ = couleur de carte de la rubrique (--rubrique-bg, identique
aux boîtes de la colonne de droite). Au survol / à la saisie (focus), il
s'éclaircit vers la teinte des pastilles « rubriques » (blanc 42 % par-dessus
la couleur de carte) — équivalent opaque de rgba(255,255,255,.42). Fallback
blanc pour les pages hors rubrique. */
.page-cols__main .annuaire-search input { flex: 1; padding: 0.7rem 0.9rem; border: 1.5px solid #aab2bd; border-radius: var(--rayon-sm); font-size: 1rem; background: var(--rubrique-bg, #fff); transition: background 0.18s ease, border-color 0.18s ease; }
.page-cols__main .annuaire-search input:hover,
.page-cols__main .annuaire-search input:focus { background: color-mix(in srgb, #fff 42%, var(--rubrique-bg, #fff)); border-color: var(--rubrique-accent, #aab2bd); outline: none; }
.page-cols__main .annuaire-search button { background: var(--rubrique-btn, var(--bleu-civique)); color: #fff; border: 0; border-radius: var(--rayon-sm); padding: 0 1.2rem; font-weight: 600; cursor: pointer; transition: filter 0.15s ease; }
.page-cols__main .annuaire-search button:hover { filter: brightness(1.12); }
/* Filtre alphabétique A→Z : 26 cases carrées */
.alpha-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1.8rem; }
.alpha-filter a { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: var(--rayon-sm); font-family: var(--font-texte); font-weight: 700; font-size: 0.8rem; text-decoration: none; border: 2px solid var(--alpha-color, var(--bleu-civique)); color: var(--alpha-color, var(--bleu-civique)); background: #eef5f1; transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; }
.alpha-filter a:hover { background: var(--alpha-color, var(--bleu-civique)); color: #fff; transform: scale(1.18); box-shadow: 0 4px 12px rgba(13,40,69,0.28); position: relative; z-index: 1; }
.alpha-filter a.is-active { background: var(--alpha-color, var(--bleu-civique)); color: #fff; box-shadow: 0 2px 6px rgba(13,40,69,0.2); }
.alpha-filter a.alpha-all { width: auto; padding: 0 0.7rem; font-family: var(--font-texte); font-size: 0.72rem; }
@media (max-width: 560px) { .alpha-filter a { width: 21px; height: 21px; font-size: 0.72rem; } }
.fiche-meta-list span a { color: var(--vert-territoire); text-decoration: none; }
.fiche-meta-list span a:hover { color: var(--bleu-civique); text-decoration: underline; }
/* =====================================================================
MUR D'ACTUALITÉS « façon Instagram » (page Actualités)
Masonry en colonnes CSS : cartes de hauteurs variables, cliquables,
avec effet de survol (élévation + ombre + léger zoom de l'image).
===================================================================== */
.actu-grid {
column-count: 3;
column-gap: var(--gap-md);
margin: 0;
}
@media (max-width: 1100px) { .actu-grid { column-count: 2; } }
@media (max-width: 640px) { .actu-grid { column-count: 2; column-gap: var(--gap-sm); } }
/* Carte : on évite qu'elle soit coupée entre deux colonnes. */
.actu-card {
position: relative;
break-inside: avoid;
-webkit-column-break-inside: avoid;
margin: 0 0 var(--gap-md);
background: #fff;
border: 1px solid var(--gris-bordure);
border-radius: var(--rayon-md);
overflow: hidden;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.actu-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 26px rgba(13, 40, 69, 0.14);
}
/* Lien englobant toute la carte. */
.actu-card__link { display: block; text-decoration: none; color: inherit; }
/* Média : image OU placeholder dégradé. Hauteur fluide, léger zoom au survol. */
.actu-card__media { position: relative; overflow: hidden; }
.actu-card__media img {
display: block;
width: 100%;
height: auto;
transition: transform 0.35s ease;
}
.actu-card:hover .actu-card__media img { transform: scale(1.05); }
/* Placeholder dégradé (article sans vignette) : icône blanche de rubrique + label. */
.actu-card__ph {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.6rem;
min-height: 180px;
padding: 1.2rem;
}
/* Icône SVG de rubrique, monochrome blanc, centrée. */
.actu-card__ph-ico {
width: 40px;
height: 40px;
stroke: #fff;
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
}
.actu-card__ph-label {
font-family: var(--font-titre);
font-size: 1.1rem;
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
/* Corps de la carte : catégorie, titre, extrait, méta. */
.actu-card__body { padding: 0.9rem 1.1rem 1.1rem; }
.actu-card__cat {
display: inline-block;
font-family: var(--font-texte);
font-weight: 700;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--vert-fonce);
margin: 0 0 0.35rem;
}
.actu-card__title {
font-family: var(--font-titre);
font-size: 1.15rem;
line-height: 1.2;
color: var(--bleu-civique);
margin: 0 0 0.5rem;
text-decoration: none;
text-underline-offset: 3px;
transition: color 0.15s ease;
}
/* Survol : nuance plus claire + soulignement du titre (sans décalage). */
.actu-card:hover .actu-card__title { color: var(--bleu-clair); text-decoration: underline; }
.actu-card__excerpt {
font-size: 0.9rem;
line-height: 1.55;
color: #555;
margin: 0 0 0.6rem;
}
.actu-card__meta {
font-family: var(--font-meta);
font-size: 0.78rem;
color: #888;
margin: 0;
}
/* =====================================================================
ARTICLE « HOME 4 » (accueil) — SANS carte (s'intègre à la grille).
Titre en haut pleine largeur ; en dessous, image réduite à gauche +
début d'article à droite. Style aligné sur les cartes d'actualités.
===================================================================== */
.home-art4 {
position: relative;
margin: var(--gap-md) 0 0;
background: none;
border: 0;
border-radius: 0;
}
/* En-tête : catégorie + titre, pleine largeur.
Filet gris clair au-dessus, pour harmoniser avec les autres articles. */
.home-art4__head {
margin: 0 0 0.8rem;
padding-top: var(--gap-md);
border-top: 2px solid var(--gris-bordure);
}
.home-art4__head .cat {
display: inline-block;
font-family: var(--font-texte);
font-weight: 700;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--vert-fonce);
margin: 0 0 0.35rem;
}
.home-art4__head h3 {
font-family: var(--font-titre);
font-size: 1.5rem;
line-height: 1.2;
color: var(--bleu-civique);
margin: 0;
}
.home-art4__head h3 .titre-lien { color: inherit; text-decoration: none; transition: color 0.15s ease; }
/* Survol : titre en vert (comme les autres articles de l'accueil), sans soulignement. */
.home-art4__head h3 .titre-lien:hover { color: var(--vert-territoire); }
/* Rangée image|texte sous le titre. Image réduite (~220px) à gauche. */
.home-art4__row {
display: grid;
grid-template-columns: 220px 1fr;
gap: var(--gap-md);
align-items: start;
}
/* Média (lien) : image réduite ou placeholder dégradé, coins arrondis. */
.home-art4__media {
display: block;
position: relative;
overflow: hidden;
border-radius: var(--rayon-md);
aspect-ratio: 4 / 3;
}
.home-art4__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
.home-art4__media:hover img { transform: scale(1.05); }
.home-art4__ph {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.home-art4__ph span {
font-family: var(--font-titre);
font-size: 1.05rem;
color: #fff;
text-align: center;
padding: 1rem;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
/* Texte à droite de l'image. */
.home-art4__body > p {
font-size: 0.95rem;
line-height: 1.6;
color: #555;
margin: 0 0 0.6rem;
}
.home-art4__body .byline { font-family: var(--font-meta); font-size: 0.78rem; color: #888; margin: 0 0 0.6rem; }
.home-art4__body .lire-suite {
display: inline-block;
font-weight: 600;
font-size: 0.88rem;
color: var(--bleu-civique);
text-decoration: none;
text-underline-offset: 3px;
}
.home-art4__body .lire-suite:hover { color: var(--bleu-clair); text-decoration: underline; }
/* Mobile : image au-dessus du texte. */
@media (max-width: 700px) {
.home-art4__row { grid-template-columns: 1fr; }
.home-art4__media { aspect-ratio: 16 / 9; }
}
/* =====================================================================
« À LIRE AUSSI » (colonne droite d'un article seul) — liste sans fond.
Chaque ligne : date (petite, en accent) puis titre ; survol = accent +
léger décalage. La colonne reste collante en haut (comme les autres asides).
===================================================================== */
.a-lire-aussi { position: sticky; top: 80px; }
.a-lire-aussi h3 {
font-family: var(--font-titre);
font-size: 1.25rem;
color: var(--bleu-civique);
margin: 0 0 0.9rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--gris-bordure);
}
.a-lire-aussi__list { list-style: none; margin: 0; padding: 0; }
.a-lire-aussi__item { margin: 0; }
.a-lire-aussi__item + .a-lire-aussi__item { border-top: 1px solid var(--gris-bordure); }
/* Lien pleine largeur : date au-dessus, titre en dessous.
* Survol : pas de décalage du texte ; seul le titre change légèrement de
* nuance et se souligne (voir .a-lire-aussi__item a:hover .a-lire-aussi__title). */
.a-lire-aussi__item a {
display: block;
padding: 0.7rem 0.5rem;
text-decoration: none;
border-radius: var(--rayon-md);
transition: background 0.15s ease;
}
/* Survol : fond ivoire doux sur tout l'item. */
.a-lire-aussi__item a:hover { background: var(--ivoire-clair); }
.a-lire-aussi__date {
display: block;
font-family: var(--font-meta);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--vert-fonce);
margin: 0 0 0.2rem;
}
.a-lire-aussi__title {
display: block;
font-family: var(--font-texte); /* sans-serif, comme le corps de l'article */
font-size: 1rem;
line-height: 1.3;
color: #444; /* gris foncé au repos */
text-decoration: none;
text-underline-offset: 3px;
transition: color 0.15s ease;
}
/* Survol : titre en bleu civique (le fond ivoire suffit, pas de soulignement). */
.a-lire-aussi__item a:hover .a-lire-aussi__title {
color: var(--bleu-civique);
}
@media (max-width: 900px) { .a-lire-aussi { position: static; top: auto; } }
/* =====================================================================
PAGE TRIBUNE UNIQUEMENT (.tribune-cat) — cases au fond très clair,
titres réduits de 25 %, badge « groupe politique » gris foncé.
===================================================================== */
.tribune-cat.news-grid.quadrille .news-article {
background: #EDF3F8; /* fond normal : nuance plus claire que le survol */
border-radius: var(--rayon-md);
padding: 1.25rem;
transition: background 0.15s ease;
}
.tribune-cat.news-grid.quadrille .news-article:hover {
background: var(--nav-tribune-bg); /* survol = couleur de la colonne 2 (#DCE9EE) */
}
.tribune-cat .news-article h4 { font-size: 1.01rem; }
.tribune-cat .news-article .date { text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0; }
/* Réserve l'espace de la pastille ronde (en bas à droite) : le lien « Lire la
suite » ne passe pas dessous. ~56px de pastille + marge. */
.tribune-cat .news-article .lire-suite { padding-right: 4.5rem; }
.tribune-groupe {
display: inline-block;
background: var(--anthracite);
color: #fff;
font-family: var(--font-texte);
font-size: 0.51rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0.18rem 0.6rem;
border-radius: 3px;
margin: 0 0 0.5rem;
}
/* PAGE TRIBUNE UNIQUEMENT : supprime l'espace entre la date et la signature
(groupe politique). margin-top à 0 sur le badge, le margin-bottom de la date
ayant déjà été mis à 0 ci-dessus. */
.tribune-cat .tribune-groupe { margin-top: 0; }
/* Portrait de l'auteur sur la carte : petite PASTILLE RONDE et discrète,
placée EN BAS À DROITE, avec une marge par rapport à la bordure (= padding
de la carte, 1.25rem). La carte étant position:relative, on positionne en
absolu ; l'overlay .article-link (z-index:1) reste cliquable par-dessus. */
.tribune-cat .tribune-photo {
position: absolute;
bottom: 0.625rem; /* moitié du padding de la carte (1.25rem) */
right: 0.625rem;
width: 56px;
height: 56px;
aspect-ratio: 1 / 1; /* cercle */
margin: 0;
border-radius: 50%;
overflow: hidden;
background: var(--nav-tribune-bg);
flex-shrink: 0;
}
.tribune-cat .tribune-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Extrait de la tribune, sous le titre : discret, gris-bleu. */
.tribune-cat .tribune-extrait {
font-size: 0.82rem;
line-height: 1.45;
color: #5a6b78;
margin: 0.35rem 0 0.6rem;
}
/* Placeholder silhouette d'auteur — markup commun (cartes, vedette, single).
Dégradé doux aux teintes Tribune + avatar centré ; remplit son conteneur. */
.tribune-photo__ph {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(160deg, #DCE9EE 0%, #B9CFDB 100%);
}
.tribune-photo__ph svg {
width: 42%;
height: 42%;
stroke: #6B8597; /* gris-bleu doux, lisible sur le dégradé clair */
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
/* PAGE TRIBUNE — bandeau « filtre actif » (tri par signataire ou recherche).
Affiché sous le titre quand ?signataire= ou ?recherche_tribune= est présent.
Couleurs de la rubrique Tribune (--rubrique-btn) héritées via body.rubrique-tribune. */
.tribune-filtre-actif {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1rem;
margin: 0 0 1.25rem;
padding: 0.6rem 0.9rem;
font-size: 0.92rem;
color: var(--rubrique-btn, var(--bleu-civique));
background: color-mix(in srgb, var(--rubrique-btn, var(--bleu-civique)) 8%, transparent);
border-left: 3px solid var(--rubrique-btn, var(--bleu-civique));
border-radius: var(--rayon-sm);
}
.tribune-filtre-actif strong { font-weight: 700; }
/* Lien de retour « voir toutes les tribunes » : poussé à droite, discret. */
.tribune-filtre-reset {
margin-left: auto;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
color: var(--rubrique-btn, var(--bleu-civique));
white-space: nowrap;
}
.tribune-filtre-reset:hover { text-decoration: underline; }