/* =============================================================================
THÈME BASTIDE — Village landais chaleureux : bleu nuit + sable + ocre,
en-tête clair sobre, hero photo plein cadre, accès rapides en débord.
Titres en serif (Georgia), corps en sans, angles peu arrondis. Clair + sombre.
CSS vanilla, custom properties, sans build.
Préfixe : --bas- / .bas- | Le CSS ne lit jamais theme.json.
============================================================================= */
/* ---------- Polices auto-hébergées (RGPD-safe, pas de CDN Google) ----------
Piles définies dans :root (titres / corps / UI) ; fichiers dans assets/fonts/.
Pacifico / Great Vibes (script) : touches manuscrites (ex. salutation du hero). */
/* megamenu.css : chargé en parallèle dans _header.php (plus d'@import sérialisé). */
@font-face { font-family:"Source Sans 3"; font-weight:600; font-style:normal; font-display:swap; src:url(assets/fonts/source-sans-3-600.woff2) format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-weight:700; font-style:normal; font-display:swap; src:url(assets/fonts/source-sans-3-700.woff2) format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-weight:800; font-style:normal; font-display:swap; src:url(assets/fonts/source-sans-3-800.woff2) format("woff2"); }
@font-face { font-family:"Pacifico"; font-weight:400; font-style:normal; font-display:swap; src:url(assets/fonts/pacifico.woff2) format("woff2"); }
@font-face { font-family:"Great Vibes"; font-weight:400; font-style:normal; font-display:swap; src:url(assets/fonts/great-vibes.woff2) format("woff2"); }
@font-face { font-family:"Inter"; font-weight:100 900; font-style:normal; font-display:swap; src:url(assets/fonts/inter.woff2) format("woff2"); }
@font-face { font-family:"Playfair Display"; font-weight:600; font-style:normal; font-display:swap; src:url(assets/fonts/playfair-600.woff2) format("woff2"); }
@font-face { font-family:"Playfair Display"; font-weight:700; font-style:normal; font-display:swap; src:url(assets/fonts/playfair-700.woff2) format("woff2"); }
@font-face { font-family:"Lora"; font-weight:400; font-style:normal; font-display:swap; src:url(assets/fonts/lora-400.woff2) format("woff2"); }
@font-face { font-family:"Lora"; font-weight:700; font-style:normal; font-display:swap; src:url(assets/fonts/lora-700.woff2) format("woff2"); }
@font-face { font-family:"Lora"; font-weight:400; font-style:italic; font-display:swap; src:url(assets/fonts/lora-400-italic.woff2) format("woff2"); }
/* ---------- Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--bas-font-corps);
font-weight: var(--ntc-fw-body);
font-size: 18px;
line-height: 1.55;
color: var(--bas-texte);
background: var(--bas-fond);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ---------- Palette (mode clair par défaut) ----------
Mapping sémantique (conservé depuis la base pour ne pas casser les règles) :
--bas-marine = encre (titres) — ici bleu nuit
--bas-marine-claire = bleu de marque (aplats)
--bas-or = OCRE municipal (CTA, nav, états actifs, soulignés, alerte)
--bas-primaire = BLEU de marque (accents secondaires, icônes, décorations)
--bas-bleu = gris ardoise des liens de corps
-------------------------------------------------------- */
:root {
/* Polices AUTO-HÉBERGÉES (woff2 embarqués dans assets/fonts/, zéro Google/CDN, RGPD-safe) :
Lora (serif chaleureuse) pour les titres, Inter (sans nette) pour corps + UI + menu. */
/* Socle typo L5b : tokens canoniques ntc-font et ntc-fw (pilotables) ; alias historiques en dessous. */
--ntc-font-title: "Lora", Georgia, "Times New Roman", serif;
--ntc-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--ntc-font-ui: "Inter", system-ui, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
--ntc-font-logo: "Lora", Georgia, "Times New Roman", serif;
--ntc-fw-title: 700;
--ntc-fw-body: 400;
--ntc-fw-ui: 600;
--bas-font-titre: var(--ntc-font-title);
--bas-font-corps: var(--ntc-font-body);
--bas-font-ui: var(--ntc-font-ui);
--bas-font-logo: var(--ntc-font-logo);
/* ───────── Socle « design tokens » (Lot 2) — 3 couches, cf. lagune/style.css et brief §D.1.
Couche 1 primitives (2 champs admin) → couche 2 tokens sémantiques → couche 3 alias --bas-*.
Perso ON : le moteur surcharge les tokens sémantiques (gagne en clair ET en sombre). */
--ntc-brand-action: #9c5320; /* champ « principale » — ocre municipal */
--ntc-brand-accent: #0d4f72; /* champ « accent » — bleu de marque */
--ntc-color-action: var(--ntc-brand-action); /* CTA, nav, actifs, soulignés (AA) */
--ntc-color-action-hover: #7d4117; /* hover CTA */
--ntc-color-action-pale: #f6ecdf; /* fond ocre très clair */
--ntc-color-accent: var(--ntc-brand-accent); /* accents secondaires, décor */
--ntc-color-accent-light: #13688f;
--ntc-color-accent-dark: #0a3851;
--ntc-color-brand: #0d4f72; /* bleu de marque — aplats */
--ntc-color-title: #0a3851; /* encre — gros titres (bleu nuit) */
--ntc-color-link: #4a5a64; /* gris ardoise — liens de corps */
--ntc-color-link-pale: #eef3f6; /* fond bleu très pâle */
--ntc-color-text: #1f2a2e; /* corps (ink village4) */
--ntc-color-text-muted: #4a5a64;
--ntc-color-text-faint: #606975; /* AA sur les 3 fonds, sable compris (4.65:1) */
--ntc-color-bg: #fffaf0; /* crème chaud (paper village4) */
--ntc-color-surface: #ffffff; /* cartes */
--ntc-color-surface-alt: #f3ead8; /* sable (sand village4) */
--ntc-color-border: #e2d4b8; /* filets sable (line village4) */
--ntc-color-border-strong: #d4c39e;
--ntc-color-success: #496b3b; /* succès (green village4) */
--ntc-color-urgent: #c0392b;
--ntc-color-warning: #c8853f; /* ocre clair */
/* Couche 3 — alias historiques. */
--bas-marine: var(--ntc-color-title);
--bas-marine-claire:var(--ntc-color-brand);
--bas-bleu: var(--ntc-color-link);
--bas-bleu-pale: var(--ntc-color-link-pale);
--bas-or: var(--ntc-color-action);
--bas-or-fonce: var(--ntc-color-action-hover);
--bas-or-pale: var(--ntc-color-action-pale);
--bas-primaire: var(--ntc-color-accent);
--bas-primaire-claire:var(--ntc-color-accent-light);
--bas-primaire-fonce: var(--ntc-color-accent-dark);
/* Surfaces foncées / hero (bespoke, hors socle) */
--bas-vert-hero: #0a3851; /* overlay hero — bleu nuit profond */
--bas-olive: #0d4f72; /* badges date — bleu (texte blanc ≥ AA) */
--bas-texte-invert: #ffffff;
/* Accent « Espace citoyen » — ocre profond (texte blanc AA) */
--bas-jaune: #9c5320;
--bas-jaune-fonce: #7d4117;
--bas-jaune-texte: #ffffff;
--bas-texte: var(--ntc-color-text);
--bas-texte-doux: var(--ntc-color-text-muted);
--bas-texte-pale: var(--ntc-color-text-faint);
--bas-fond: var(--ntc-color-bg);
--bas-fond-alt: var(--ntc-color-surface-alt);
--bas-fond-carte: var(--ntc-color-surface);
--bas-bord: var(--ntc-color-border);
--bas-bord-fort: var(--ntc-color-border-strong);
--bas-vert: var(--ntc-color-success);
--bas-rouge: var(--ntc-color-urgent);
--bas-orange: var(--ntc-color-warning);
--bas-shadow-card: 0 10px 30px rgba(10, 56, 81, .07);
--bas-shadow-hover: 0 18px 44px rgba(10, 56, 81, .13);
--bas-rayon: 6px; /* angles peu arrondis (proche village4) */
--bas-rayon-grand: 10px;
--bas-trans: .2s ease;
--bas-max-w: 1200px;
}
/* ---------- Mode sombre ---------- */
[data-mode="sombre"] {
/* Mode sombre = redéclaration des TOKENS sémantiques (les alias --bas-* suivent). */
--ntc-color-title: #06222f;
--ntc-color-brand: #3a7fa0;
--ntc-color-link: #9fb0bb;
--ntc-color-link-pale: rgba(58, 127, 160, .12);
--ntc-color-action: #d18a3e;
--ntc-color-action-hover: #b06f28;
--ntc-color-action-pale: rgba(209, 138, 62, .16);
--ntc-color-accent: #3a7fa0;
--ntc-color-accent-light: #5a9cbd;
--ntc-color-accent-dark: #2a6280;
--ntc-color-bg: #0d1518;
--ntc-color-surface-alt: #121d22;
--ntc-color-surface: #15222a;
--ntc-color-border: #28383f;
--ntc-color-border-strong: #3a4f57;
--ntc-color-text: #eef3f5;
--ntc-color-text-muted: #9fb0bb;
--ntc-color-text-faint: #7c8c94;
--bas-vert-hero: #06222f;
--bas-olive: #3a7fa0;
--bas-jaune: #d18a3e;
--bas-jaune-fonce: #b06f28;
--bas-jaune-texte: #1a1206;
--bas-shadow-card: 0 2px 8px rgba(0, 0, 0, .45);
--bas-shadow-hover: 0 6px 20px rgba(0, 0, 0, .6);
}
/* ---------- Typo ---------- */
h1, h2, h3, h4 { color: var(--bas-marine); font-weight: var(--ntc-fw-title); letter-spacing: -.01em; }
[data-mode="sombre"] h1,
[data-mode="sombre"] h2,
[data-mode="sombre"] h3,
[data-mode="sombre"] h4 { color: #fff; }
h1 { font-size: 2.25rem; line-height: 1.15; margin: 0 0 1rem; }
h2 { font-size: 1.6rem; line-height: 1.2; margin: 2rem 0 1rem; }
h3 { font-size: 1.25rem; margin: 1.5rem 0 .75rem; }
p { margin: 0 0 1rem; }
a { color: var(--bas-bleu); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--bas-marine); }
[data-mode="sombre"] a { color: var(--ntc-color-link); } /* audit 8 : littéral non migré (le token sombre #9fb0bb est le contrat) */
img { max-width: 100%; height: auto; }
/* ---------- Layout helpers ----------
NB : les vues publiques partagées (public/associations.php, cultes.php,
rdv.php, ecoles.php, salles.php, sports.php, documents-liste.php,
recherche.php, actes-registre.php, rdv-annuler.php) codent en dur
« cv-container cv-contenu-zone ». On garde donc ces noms comme alias
pour que TOUTES les rubriques héritent du conteneur Lagune. */
.bas-container,
:is(.cv-container,.ntc-container) {
max-width: var(--bas-max-w);
margin: 0 auto;
padding: 0 1.5rem;
}
.bas-main { min-height: 60vh; }
.bas-contenu-zone,
:is(.cv-contenu-zone,.ntc-contenu-zone) {
padding: 2.5rem 1.5rem;
margin: 0 auto;
}
.skip-link {
position: absolute; top: -100px; left: 0;
background: var(--bas-or); color: var(--ntc-color-on-action);
padding: .65rem 1.25rem; font-weight: 700;
z-index: 9999;
}
.skip-link:focus { top: 0; }
/* `[data-mode="sombre"] a` est plus spécifique que `.skip-link` : en mode sombre ce lien
prenait la couleur CLAIRE des liens alors que son fond, lui, ne change pas — 1,27:1
(RGAA 3.2). Il garde donc la couleur de son propre fond dans les deux modes. */
[data-mode="sombre"] .skip-link { color: var(--ntc-color-on-action); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* ============================================================================
HEADER 2 NIVEAUX
============================================================================ */
.bas-header { background: var(--bas-marine); color: #fff; }
/* --- Niveau 1 : barre supérieure --- */
.bas-header-top { background: var(--bas-marine); }
.bas-header-top-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: 1rem 1.5rem;
flex-wrap: nowrap; /* en desktop on garde tout sur une ligne */
max-width: var(--bas-max-w);
margin: 0 auto;
}
.bas-marque { flex: 1; min-width: 0; } /* le titre peut rétrécir si manque de place */
.bas-header-liens { flex-shrink: 0; }
.bas-marque {
display: flex;
align-items: center;
gap: 1rem;
color: #fff;
text-decoration: none;
}
/* Le titre est un repère identitaire : pas de variation au survol (sinon il
se confond avec le fond marine sombre). On neutralise le a:hover global. */
.bas-marque:hover,
.bas-marque:focus,
.bas-marque:active {
color: #fff;
text-decoration: none;
}
.bas-blason {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bas-blason img,
.bas-blason svg { width: 44px; height: 52px; display: block; }
.bas-titre {
display: flex;
flex-direction: column;
line-height: 1.1;
min-width: 0;
}
.bas-titre strong {
font-size: 1.05rem;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bas-titre small {
font-size: .8rem;
color: rgba(255,255,255,.72);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bas-header-liens {
display: flex;
align-items: center;
gap: 1.5rem;
font-size: .9rem;
}
.bas-lien-util {
color: rgba(255,255,255,.85);
text-decoration: none;
transition: color var(--bas-trans);
}
.bas-lien-util:hover { color: #fff; text-decoration: underline; }
.bas-cta-citoyen {
background: var(--bas-or);
color: var(--ntc-color-on-action);
padding: .65rem 1.25rem;
border-radius: var(--bas-rayon);
font-weight: 700;
font-size: .82rem;
letter-spacing: 1px;
text-decoration: none;
transition: background var(--bas-trans), transform var(--bas-trans);
}
/* Bouton toggle clair/sombre — discret dans le bandeau supérieur Civium */
.bas-mode-toggle {
background: transparent;
border: 1px solid rgba(255,255,255,.25);
color: #fff;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
font-size: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--bas-trans), border-color var(--bas-trans);
}
.bas-mode-toggle:hover {
background: rgba(255,255,255,.1);
border-color: rgba(255,255,255,.5);
}
[data-mode="sombre"] .bas-mode-toggle {
border-color: rgba(255,255,255,.35);
}
.bas-cta-citoyen:hover {
background: #fff;
color: var(--bas-marine);
transform: translateY(-1px);
}
/* Copie du CTA reprise en tête du menu mobile déplié : masquée en desktop,
affichée uniquement quand le burger est ouvert (voir @media max-width:900px). */
.bas-cta-drawer { display: none; }
/* --- Niveau 2 : menu principal --- */
.bas-header-nav {
background: var(--bas-marine-claire);
border-top: 1px solid rgba(255,255,255,.10);
}
.bas-header-nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 0 1.5rem;
flex-wrap: nowrap;
max-width: var(--bas-max-w);
margin: 0 auto;
}
.bas-menu,
.ntc-menu-liste {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: stretch;
gap: 0;
flex: 1;
}
.bas-menu li,
.ntc-menu-liste li {
position: relative;
}
.bas-menu a,
.ntc-menu-liste a {
display: flex;
align-items: center;
padding: 1.1rem 1.25rem;
color: rgba(255,255,255,.92);
text-decoration: none;
font-weight: 500;
font-size: .95rem;
border-bottom: 3px solid transparent;
transition: background var(--bas-trans), border-color var(--bas-trans);
}
.bas-menu a:hover,
.ntc-menu-liste a:hover,
.bas-menu a[aria-current="page"],
.ntc-menu-liste a[aria-current="page"] {
background: rgba(0,0,0,.18);
border-bottom-color: var(--bas-or);
color: #fff;
}
/* Sous-menus */
.bas-menu .ntc-sous-menu,
.ntc-menu-liste .ntc-sous-menu {
list-style: none;
position: absolute;
top: 100%;
left: 0;
min-width: 240px;
background: #fff;
border: 1px solid var(--bas-bord);
border-top: 3px solid var(--bas-or);
box-shadow: var(--bas-shadow-hover);
padding: .25rem 0;
margin: 0;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity .15s, transform .15s, visibility .15s;
z-index: 100;
}
.bas-menu li:hover > .ntc-sous-menu,
.bas-menu li:focus-within > .ntc-sous-menu,
.ntc-menu-liste li:hover > .ntc-sous-menu,
.ntc-menu-liste li:focus-within > .ntc-sous-menu {
opacity: 1; visibility: visible; transform: translateY(0);
}
.bas-menu .ntc-sous-menu a,
.ntc-menu-liste .ntc-sous-menu a {
padding: .65rem 1.25rem;
color: var(--bas-texte);
border-bottom: 0;
font-weight: 500;
}
.bas-menu .ntc-sous-menu a:hover,
.ntc-menu-liste .ntc-sous-menu a:hover {
background: var(--bas-bleu-pale);
color: var(--bas-marine);
border-bottom: 0;
}
.bas-menu .ntc-sous-menu .ntc-sous-menu,
.ntc-menu-liste .ntc-sous-menu .ntc-sous-menu {
top: 0; left: 100%;
margin-left: 2px;
border-top: 1px solid var(--bas-bord);
border-left: 3px solid var(--bas-or);
}
/* Mode sombre : le sous-menu desktop avait fond #fff en dur — texte clair sur
fond clair devenait illisible. On remet un fond sombre + bordures cohérentes. */
[data-mode="sombre"] .bas-menu .ntc-sous-menu,
[data-mode="sombre"] .ntc-menu-liste .ntc-sous-menu {
background: #242424;
border-color: var(--bas-bord);
border-top-color: var(--bas-or);
}
[data-mode="sombre"] .bas-menu .ntc-sous-menu a,
[data-mode="sombre"] .ntc-menu-liste .ntc-sous-menu a {
color: #f2f2f2;
}
[data-mode="sombre"] .bas-menu .ntc-sous-menu a:hover,
[data-mode="sombre"] .ntc-menu-liste .ntc-sous-menu a:hover {
background: color-mix(in srgb, var(--ntc-color-link) 14%, transparent);
color: #fff;
}
/* Indicateur flèche pour les sous-menus */
.bas-menu .ntc-sous-menu .ntc-has-sub > a::after,
.ntc-menu-liste .ntc-sous-menu .ntc-has-sub > a::after {
content: ' ›';
float: right;
color: var(--bas-texte-pale);
font-weight: 700;
}
/* --- Recherche header --- */
.bas-recherche {
display: flex;
align-items: center;
background: rgba(255,255,255,.10);
border-radius: var(--bas-rayon);
padding: 0;
transition: background var(--bas-trans);
}
.bas-recherche:focus-within { background: #fff; }
.bas-recherche input {
border: 0;
background: transparent;
color: #fff;
padding: .55rem .85rem;
font-size: .9rem;
outline: none;
width: 180px;
}
.bas-recherche:focus-within input { color: var(--bas-marine); }
.bas-recherche input::placeholder { color: rgba(255,255,255,.65); }
.bas-recherche:focus-within input::placeholder { color: var(--bas-texte-pale); }
.bas-recherche button {
background: transparent;
border: 0;
padding: .55rem .85rem;
color: rgba(255,255,255,.85);
cursor: pointer;
}
.bas-recherche:focus-within button { color: var(--bas-marine); }
.bas-recherche button:hover { color: var(--bas-or); }
/* --- Chevron mobile (injecté par JS pour déplier les sous-menus) ---
Caché en desktop, affiché uniquement < 900px via le @media ci-dessous. */
.bas-header-nav .bas-menu-chevron { display: none; }
/* Le burger natif est généré par MenuRender pour TOUS les menus (principal, legal…).
On le cache toujours dans le footer (menu legal n'a besoin que de la liste plate). */
.ntc-footer .ntc-menu-toggle,
.ntc-footer-legal .ntc-menu-toggle { display: none !important; }
.ntc-footer .ntc-menu-liste,
.ntc-footer-legal .ntc-menu-liste { display: flex !important; }
/* --- Burger natif (MenuRender génère .ntc-menu-toggle) ---
Caché par défaut, affiché uniquement < 900px. */
.bas-header-nav .ntc-menu-toggle {
display: none;
background: rgba(255,255,255,.10);
color: #fff;
border: 1px solid rgba(255,255,255,.20);
padding: .55rem .9rem;
border-radius: 4px;
cursor: pointer;
font-size: 1.2rem;
line-height: 1;
}
.bas-header-nav .ntc-menu-toggle:hover {
background: rgba(255,255,255,.20);
}
/* ============================================================================
HERO PLEIN ÉCRAN (override du bloc HERO existant)
============================================================================ */
.ntc-hero,
.bas-hero {
position: relative;
width: 100%;
margin: 0;
border-radius: 0;
overflow: hidden;
}
.ntc-hero--petite { min-height: 360px; aspect-ratio: 21/8; }
.ntc-hero--moyenne { min-height: 480px; aspect-ratio: 21/9; max-height: 620px; }
.ntc-hero--grande { min-height: 560px; aspect-ratio: 16/8; max-height: 720px; }
.ntc-hero-slides { position: relative; width: 100%; height: 100%; }
.ntc-hero-slide {
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding: 3rem 1.5rem;
opacity: 0;
transition: opacity .7s ease-in-out;
pointer-events: none;
overflow: hidden;
}
.ntc-hero-slide[aria-current="true"] {
opacity: 1;
pointer-events: auto;
z-index: 2;
}
/* Image LCP du hero : un seul ![]()
pilotable (plus de background-image en doublon)
→ optimisations LCP via fetchpriority, srcset, width/height. */
.ntc-hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
.ntc-hero-contenu { position: relative; z-index: 2; }
/* Voile dégradé sombre côté gauche pour lisibilité du texte */
.ntc-hero-slide::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(26, 26, 26, .85) 0%,
rgba(26, 26, 26, .55) 40%,
rgba(26, 26, 26, .15) 70%,
transparent 100%);
pointer-events: none;
/* Voile entre image (z:0) et contenu (z:2) — sinon image z-index:0 crée
un stacking context et masque le ::before resté en z-index:auto. */
z-index: 1;
}
.ntc-hero-contenu {
position: relative;
z-index: 2;
max-width: 540px;
margin-left: max(2rem, calc((100vw - var(--bas-max-w)) / 2 + 2rem));
color: #fff;
}
.ntc-hero-titre {
color: #fff !important;
font-size: clamp(2rem, 4.5vw, 3.25rem);
font-weight: 800;
line-height: 1.05;
margin: 0 0 1.25rem;
letter-spacing: -.02em;
}
.ntc-hero-sst {
font-size: clamp(1.05rem, 1.7vw, 1.25rem);
color: rgba(255,255,255,.92);
line-height: 1.4;
margin: 0 0 1.75rem;
}
.ntc-hero-cta {
display: inline-block;
background: var(--bas-or);
color: var(--ntc-color-on-action);
padding: 1rem 2rem;
font-weight: 700;
font-size: .9rem;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
border-radius: var(--bas-rayon);
transition: background var(--bas-trans), transform var(--bas-trans);
}
.ntc-hero-cta:hover {
background: #fff;
color: var(--bas-marine);
transform: translateY(-2px);
}
/* Image accessibilité (off-screen) */
.ntc-hero-img-srlite {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0,0,0,0);
}
/* Flèches navigation */
.ntc-hero-prev, .ntc-hero-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,0,0,.45);
color: #fff;
border: 0;
width: 48px;
height: 48px;
border-radius: 50%;
font-size: 1.5rem;
cursor: pointer;
z-index: 5;
transition: background var(--bas-trans);
}
.ntc-hero-prev:hover, .ntc-hero-next:hover { background: var(--bas-or); color: var(--ntc-color-on-action); }
.ntc-hero-prev { left: 1.5rem; }
.ntc-hero-next { right: 1.5rem; }
/* Dots */
.ntc-hero-dots {
position: absolute;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: .5rem;
z-index: 5;
}
.ntc-hero-dot {
width: 24px; /* zone tactile ≥ 24px (a11y) ; pastille visuelle en ::before */
height: 24px;
padding: 0; /* reset padding par défaut des boutons (cause des ovales) */
border: 0;
background: transparent;
cursor: pointer;
box-sizing: border-box;
display: grid;
place-content: center;
transition: transform var(--bas-trans);
}
.ntc-hero-dot::before {
content: "";
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255,255,255,.45);
transition: background var(--bas-trans);
}
.ntc-hero-dot.actif { transform: scale(1.3); }
.ntc-hero-dot.actif::before { background: var(--bas-or); }
/* ============================================================================
TUILES "ACCÈS RAPIDES" (le bloc en grille 6 colonnes sous le hero)
============================================================================ */
/* Blocs d'accueil — version compacte inspirée Aurice */
.ntc-bloc {
max-width: var(--bas-max-w);
margin: 2.5rem auto;
padding: 0 1.5rem;
}
.ntc-bloc h2 {
font-size: 1.5rem;
color: var(--bas-marine);
margin: 0 0 1.5rem;
padding-bottom: .75rem;
border-bottom: 2px solid var(--bas-marine);
display: inline-block;
}
[data-mode="sombre"] .ntc-bloc h2 { color: #fff; border-bottom-color: var(--ntc-color-accent-light); }
/* =============================================================================
Mise en page colonne latérale (sidebar droite / gauche, deux colonnes)
Le moteur de layouts (core) émet les classes .ntc-layout-* / .ntc-sidebar
quel que soit le thème : ces règles fournissent la grille + le style des blocs.
============================================================================= */
.ntc-layout-sidebar-droite,
.ntc-layout-sidebar-gauche {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 2.5rem;
align-items: start;
}
.ntc-layout-sidebar-gauche { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.ntc-layout-deux-colonnes .ntc-colonnes {
column-count: 2;
column-gap: 2.5rem;
}
@media (max-width: 800px) {
.ntc-layout-sidebar-droite,
.ntc-layout-sidebar-gauche { grid-template-columns: 1fr; }
.ntc-layout-deux-colonnes .ntc-colonnes { column-count: 1; }
}
/* Blocs dans la colonne : carte sobre, titre compact aligné à gauche.
Réinitialise le conteneur .ntc-bloc (centré max-width pour l'accueil). */
.ntc-sidebar .ntc-bloc {
max-width: none;
margin: 0 0 1.5rem;
padding: 1.25rem;
background: var(--bas-fond-alt);
border: 1px solid var(--bas-bord);
border-radius: 8px;
}
.ntc-sidebar .ntc-bloc h2 {
display: block;
font-size: 1rem;
margin: 0 0 1rem;
padding-bottom: .5rem;
text-align: left;
border-bottom: 2px solid var(--bas-marine);
}
[data-mode="sombre"] .ntc-sidebar .ntc-bloc h2 { border-bottom-color: var(--ntc-color-accent-light); }
/* Accès rapides — tuiles compactes */
.ntc-bloc-acces-rapides { margin: 2.5rem auto; }
.ntc-acces-grille {
list-style: none;
padding: 0 1.5rem;
margin: 0 auto;
max-width: var(--bas-max-w);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1rem;
}
.ntc-acces-grille li { list-style: none; }
.ntc-acces-grille a {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 1.5rem 1rem;
background: var(--bas-fond-carte);
border: 1px solid var(--bas-bord);
border-radius: var(--bas-rayon);
text-decoration: none;
color: var(--bas-texte);
gap: .5rem;
transition: border-color .12s, background .12s;
}
.ntc-acces-grille a:hover {
border-color: var(--bas-marine);
background: var(--bas-bleu-pale);
}
.ntc-acces-grille .ntc-icone {
font-size: 2rem;
line-height: 1;
display: block;
}
.ntc-acces-grille strong {
font-size: .95rem;
font-weight: 700;
color: var(--bas-marine);
}
[data-mode="sombre"] .ntc-acces-grille strong { color: var(--ntc-color-accent-light); }
/* ============================================================================
ESPACE CITOYEN — tuiles de démarches
============================================================================ */
/* Chapeau d'introduction */
.bas-ec-intro { max-width: 720px; margin: 0 0 2rem; }
.bas-ec-intro p { font-size: 1.05rem; color: var(--bas-texte-doux); line-height: 1.6; }
.bas-ec-vide { color: var(--bas-texte-doux); }
/* Grille responsive : 3 col → 2 → 1 */
.bas-tuiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.25rem;
margin: 0 0 2.5rem;
list-style: none;
padding: 0;
}
/* La tuile : carte cliquable entière, mais un seul vrai lien (RGAA) */
.bas-tuile {
position: relative;
display: flex;
flex-direction: column;
gap: .6rem;
padding: 1.6rem 1.5rem;
background: var(--bas-fond-carte);
border: 1px solid var(--bas-bord);
border-top: 4px solid var(--bas-primaire-fonce);
box-shadow: var(--bas-shadow-card);
transition: box-shadow var(--bas-trans), transform var(--bas-trans), border-color var(--bas-trans);
}
.bas-tuile:hover {
box-shadow: var(--bas-shadow-hover);
transform: translateY(-3px);
border-top-color: var(--bas-or);
}
/* Pastille d'icône — purement décorative (aria-hidden) */
.bas-tuile-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
font-size: 1.6rem;
background: var(--bas-bleu-pale);
color: var(--bas-primaire-fonce);
}
.bas-tuile h2 {
font-family: var(--bas-font-ui);
font-size: 1.2rem;
margin: 0;
color: var(--bas-marine);
line-height: 1.25;
}
/* Mode sombre : --bas-marine devient quasi noir → titre illisible sur carte
sombre. On éclaircit, comme le thème le fait pour .ntc-grille-articles h3. */
[data-mode="sombre"] .bas-tuile h2,
[data-mode="sombre"] .bas-tuile h2 a { color: #fff; }
/* Le lien-titre étend sa zone cliquable sur toute la tuile */
.bas-tuile h2 a { color: inherit; text-decoration: none; }
.bas-tuile h2 a::after { content: ""; position: absolute; inset: 0; }
.bas-tuile h2 a:focus-visible { outline: 3px solid var(--bas-or); outline-offset: 3px; }
.bas-tuile p { margin: 0; color: var(--bas-texte-doux); font-size: .95rem; line-height: 1.5; }
.bas-tuile-fleche {
margin-top: auto;
font-family: var(--bas-font-ui);
font-weight: var(--ntc-fw-ui);
font-size: .9rem;
color: var(--bas-or);
display: inline-flex;
align-items: center;
gap: .35rem;
transition: gap var(--bas-trans);
}
.bas-tuile:hover .bas-tuile-fleche { gap: .6rem; }
/* Page dédiée /signalements/ : le bloc du module ouvre sur un