/* ================================================================
ÉPYRIA — Charte catalane moderne · V2 refined
Strategy: Vidal · Ortega · Castel · Marchetti · Hoffmann
Build: Aragón · Sato · Renaut · Bara
================================================================ */
:root {
/* COULEURS — ratios stricts (Mireia × Léa) */
--blanc: #F4EDE0;
--blanc-pur: #FBF6EC;
--blanc-warm: #EBE2D2;
--encre: #0E1A1F;
--encre-soft: #2A363D;
--encre-mute: #5A6168;
--sang: #B0142F;
--sang-deep: #7A0E1F;
--sang-vif: #C8102E; /* sang accent — alias top-level (load order) */
--or: #C9A461;
--or-soft: #E3C68A;
--or-deep: #8B7235;
--field-deep: #4A0A12; /* grenat profond — alias top-level */
--line-or: rgba(203,161,53,0.3);
--terre: #3A2418;
--mar: #1B4F58;
--line: #D4C9B2;
/* ACCENTS SAISONNIERS — registre clair, lisibles sur base grenat Sang i Or
(adopté #110, grenat-natifs #118). eyebrow-saison · orne · senyera-tag (pal 5).
Jamais bloc plein. Contraste vérifié sur --field #6B0F1A : tous ≥ 5.5:1. */
--accent-printemps: #BCC479; /* or-vert blé clair · Albères avril · 6.6:1 */
--accent-ete: #E6CA85; /* or-soft canonique · lumière dorée · 7.7:1 */
--accent-automne: #E0A155; /* ambre cuivre · vendange Banyuls · 5.5:1 */
--accent-hiver: #9FB8C0; /* glacier clair · Canigou aube · 5.9:1 */
--accent-saison: var(--accent-ete); /* override via .is-season-* sur */
/* TYPO */
--f-display: 'Bricolage Grotesque', system-ui, sans-serif;
--f-edit: 'Newsreader', Georgia, serif;
--f-body: 'Public Sans', system-ui, -apple-system, sans-serif;
/* SPACING — 8pt baseline */
--s-1: 0.25rem; --s-2: 0.5rem; --s-3: 1rem;
--s-4: 1.5rem; --s-5: 2rem; --s-6: 3rem;
--s-7: 4.5rem; --s-8: 6.5rem; --s-9: 9.5rem;
/* LAYOUT */
--max-w: 1320px;
--pad-x: clamp(1.25rem, 4vw, 3.5rem);
--senyera-w: 44px;
/* MOTION */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-inout: cubic-bezier(0.83, 0, 0.17, 1);
--ease-wind: cubic-bezier(0.16, 1, 0.3, 1);
/* FILETS (Aragón — 3 épaisseurs codifiées) */
--rule-hair: 0.5px solid rgba(14, 26, 31, 0.5);
--rule-base: 1px solid var(--encre);
--rule-strong: 2px solid var(--sang);
}
/* VARIATIONS SAISONNIERES — classes utilitaires (adopté sprint #110, posé sprint #113)
À appliquer sur via includes/season.php
Override --accent-saison consommé par .eyebrow-saison, .orne, .senyera-tag (pal 5)
sans toucher au token canonique --or. */
.is-season-printemps { --accent-saison: var(--accent-printemps); }
.is-season-ete { --accent-saison: var(--accent-ete); }
.is-season-automne { --accent-saison: var(--accent-automne); }
.is-season-hiver { --accent-saison: var(--accent-hiver); }
/* Séparateur ponctuel saisonnier · standalone (hero-eyebrow, breadcrumb, etc.)
Décoratif (aria-hidden) → exempt WCAG texte. Sprint #117. */
.punct-saison { color: var(--accent-saison); }
/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
}
body {
font-family: var(--f-body);
font-size: clamp(16px, 0.95rem + 0.15vw, 17px);
font-weight: 400;
line-height: 1.65;
color: var(--encre);
background: var(--blanc);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(176, 20, 47, 0.12);
font-feature-settings: 'kern', 'liga', 'calt';
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.25s var(--ease-out); }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
::selection { background: var(--sang); color: var(--blanc); }
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
.container {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--pad-x);
}
/* === DÉTAILS SIGNATURE (Aragón) === */
/* Punt sang — point final rare et codifié */
.punt {
color: var(--sang);
font-feature-settings: 'ss01';
margin-left: -0.05em;
display: inline;
}
/* Ornement de fin de section — étoile à 4 branches.
Consomme --accent-saison (override via .is-season-* sur body) — sprint #113. */
.orne {
display: block;
text-align: center;
font-family: var(--f-edit);
color: var(--accent-saison);
opacity: 0.55;
font-size: 0.85rem;
margin: var(--s-5) auto;
letter-spacing: 0.5em;
}
.orne::before { content: '✦'; }
/* Eyebrow saison (adopté sprint #110, posé sprint #113, audit a11y sprint #113)
TEXTE reste en --encre (AAA). Seul le séparateur · prend la couleur saison.
Cohérent avec règle "la couleur ponctue, ne décore pas". */
.eyebrow-saison {
color: var(--encre);
}
.eyebrow-saison .sep,
.eyebrow-saison .punct-saison {
color: var(--accent-saison);
margin: 0 0.4em;
}
/* Quotes catalanes */
q[lang="ca"] { quotes: "«" "»" "“" "”"; }
q[lang="fr"], q { quotes: "«\00a0" "\00a0»" "“" "”"; }
/* ============================================================
1. SIGNATURE — Quatre Barres Senyera (vague NO→SE, or→sang)
============================================================ */
/* Senyera = 4 pals Fibonacci (cohérence logo + accueil). Remplissage BAS→HAUT,
continu sur la longueur de la page : le niveau monte d'un pal à l'autre selon
le scroll (sprint #150). Piste dorée discrète, remplissage gradient or→sang. */
.senyera {
position: fixed;
top: 0; left: 0;
height: 100vh;
height: 100dvh;
width: var(--senyera-w);
z-index: 50;
display: grid;
grid-template-rows: 1fr 2fr 3fr 5fr;
gap: 4px;
padding: 4px;
pointer-events: none;
}
.senyera-bar {
position: relative;
overflow: hidden;
background: rgba(203, 161, 53, 0.16);
}
.senyera-bar::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, var(--or) 0%, var(--sang-vif, var(--sang)) 100%);
transform: scaleY(var(--fill-y, 0));
transform-origin: bottom; /* remplissage bas → haut */
transition: transform 0.22s var(--ease-out);
will-change: transform;
}
@media (max-width: 900px) {
.senyera {
position: fixed;
/* Au-dessus de la bottom-nav (hauteur ~67px + safe-area), pas en dessous (#170). */
top: auto; bottom: calc(67px + env(safe-area-inset-bottom, 0px)); left: 0;
width: 100%;
height: 4px;
grid-template-rows: none;
grid-template-columns: 5fr 3fr 2fr 1fr; /* miroir : remplissage gauche→droite suit le scroll */
gap: 1px;
padding: 0;
z-index: 95;
}
.senyera-bar::after {
transform: scaleX(var(--fill-y, 0));
transform-origin: left;
background: linear-gradient(90deg, var(--or) 0%, var(--sang-vif, var(--sang)) 100%);
}
}
/* Senyera-tag (chip Fibonacci eyebrow saison) — adopté sprint #110, posé sprint #113.
Pal 5 (rempli) consomme --accent-saison. Override .senyera-tag-sang pour forcer sang vif. */
.senyera-tag {
display: inline-block;
width: 12px;
height: 14px;
background: linear-gradient(
to bottom,
var(--or) 0% 9%,
var(--blanc) 9% 18%,
var(--or) 18% 36%,
var(--blanc) 36% 45%,
var(--or) 45% 73%,
var(--blanc) 73% 82%,
var(--accent-saison) 82% 100%
);
margin-right: 0.5em;
vertical-align: -1px;
}
.senyera-tag-sang { --accent-saison: var(--sang); }
/* ============================================================
2. HEADER
============================================================ */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
background: rgba(244, 237, 224, 0.94);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
padding-left: var(--senyera-w);
border-bottom: 1px solid transparent;
transition: border-color 0.3s var(--ease-out), background 0.3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 1.05rem var(--pad-x);
max-width: var(--max-w);
margin: 0 auto;
gap: var(--s-4);
}
.brand {
display: inline-flex;
align-items: baseline;
gap: 0.7rem;
color: var(--encre);
}
.brand-mark {
font-family: var(--f-display);
font-size: 1.3rem;
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1;
}
.brand-meta {
font-family: var(--f-body);
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--encre-mute);
}
.site-nav ul {
display: flex;
gap: 1.6rem;
align-items: center;
}
.site-nav a {
font-family: var(--f-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--encre);
padding: 0.55rem 0;
position: relative;
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* Hover diagonal -8° (vent NO→SE, Yuki) */
.site-nav a::after {
content: '';
position: absolute;
left: -2%; right: -2%;
bottom: 0.3rem;
height: 1px;
background: var(--sang);
transform: scaleX(0) rotate(-6deg);
transform-origin: left center;
transition: transform 0.22s var(--ease-inout);
}
.site-nav a:hover::after,
.site-nav a.is-active::after { transform: scaleX(1) rotate(-6deg); transition-duration: 0.38s; }
.site-nav a.is-active { color: var(--sang); }
.menu-toggle {
display: none;
width: 44px; height: 44px;
flex-direction: column;
justify-content: center;
gap: 5px;
align-items: flex-end;
}
.menu-toggle span {
display: block;
width: 22px; height: 1.5px;
background: var(--encre);
transition: all 0.3s var(--ease-out);
}
.menu-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* Burger menu mobile-only artifacts : hidden desktop (display:none par défaut) */
.site-nav-close { display: none; }
.site-nav-backdrop { display: none; }
@media (max-width: 900px) {
.site-header { padding-left: 0; }
.menu-toggle { display: flex; }
.site-nav {
position: fixed;
inset: 0 -100% 0 auto;
width: 84%;
max-width: 380px;
height: 100dvh;
background: var(--blanc);
padding: 5.5rem var(--pad-x) calc(var(--pad-x) + 80px);
border-left: 1px solid var(--line);
transition: inset 0.5s var(--ease-out);
box-shadow: -16px 0 50px rgba(14, 26, 31, 0.08);
overflow-y: auto;
}
.site-nav.is-open { inset: 0 0 0 auto; }
.site-nav-close { display: flex; }
.site-nav-backdrop {
position: fixed;
inset: 0;
background: rgba(14, 26, 31, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s var(--ease-out), visibility 0.4s var(--ease-out);
z-index: 99;
}
.site-nav-backdrop.is-open {
opacity: 1;
visibility: visible;
}
.site-nav-close {
position: absolute;
top: 0.8rem;
right: 0.8rem;
width: 44px;
height: 44px;
background: transparent;
border: 1px solid var(--line-or, rgba(0,0,0,0.15));
border-radius: 50%;
color: var(--encre);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
line-height: 1;
font-family: var(--f-body);
z-index: 2;
transition: background 0.2s, transform 0.2s, border-color 0.2s;
}
.site-nav-close:hover, .site-nav-close:focus {
background: var(--sang, #B0142F);
color: var(--blanc-pur, #fff);
border-color: var(--sang, #B0142F);
transform: rotate(90deg);
}
.site-nav { z-index: 100; }
.site-nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
.site-nav a {
font-family: var(--f-display);
font-size: 1.6rem;
text-transform: none;
letter-spacing: -0.01em;
font-weight: 400;
padding: 0.7rem 0;
border-bottom: 1px solid var(--blanc-warm);
width: 100%;
min-height: 56px;
}
.site-nav a::after { display: none; }
}
/* ============================================================
3. HERO — éditorial asymétrique (raffiné Aragón)
============================================================ */
.site-main { padding-left: var(--senyera-w); }
@media (max-width: 900px) { .site-main { padding-left: 0; padding-bottom: 90px; } }
.hero {
padding: 7rem var(--pad-x) var(--s-7);
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: center;
background: var(--blanc);
position: relative;
}
.hero-grid {
max-width: var(--max-w);
margin: 0 auto;
width: 100%;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.hero-left { position: relative; }
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.7rem;
font-family: var(--f-body);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--encre-mute);
margin-bottom: var(--s-4);
}
.hero-eyebrow::before {
content: '';
display: block;
width: 36px;
height: 1px;
background: var(--sang);
}
.hero-title {
font-family: var(--f-display);
font-size: clamp(3rem, 10vw, 8.5rem);
font-weight: 300;
line-height: 1.0;
letter-spacing: -0.045em;
color: var(--encre);
font-variation-settings: 'opsz' 144;
margin-bottom: var(--s-3);
}
/* Letter-by-letter (Yuki §4) - spans injected by JS */
.hero-title .lt {
display: inline-block;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.8s var(--ease-wind), transform 0.8s var(--ease-wind);
}
.hero-title.is-ready .lt { opacity: 1; transform: translateY(0); }
.hero-title .accent {
color: var(--sang);
font-weight: 400;
}
.hero-sub {
font-family: var(--f-edit);
/* Roman, pas italique : la charte réserve l'italique aux mots-clés (em).
Un pavé de 3-4 lignes tout en italique fatigue la lecture mobile. */
font-style: normal;
font-size: clamp(1.2rem, 1.8vw, 1.5rem);
color: var(--terre);
margin-top: var(--s-2);
max-width: 38ch;
font-variation-settings: 'opsz' 18;
letter-spacing: 0.005em;
line-height: 1.45;
}
.hero-sub em {
color: var(--sang);
font-style: italic;
font-variation-settings: 'opsz' 18, 'wght' 500;
}
.hero-meta {
margin-top: var(--s-5);
display: grid;
grid-template-columns: auto 1fr;
gap: 0.4rem 1.5rem;
font-family: var(--f-body);
font-size: 0.85rem;
color: var(--encre-soft);
max-width: 480px;
border-top: 1px solid var(--encre);
border-top-color: rgba(14, 26, 31, 0.18);
padding-top: var(--s-3);
}
.hero-meta dt {
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: 0.65rem;
color: var(--encre-mute);
align-self: center;
}
.hero-meta dd { color: var(--encre); }
.hero-meta .accent-or { color: var(--sang); font-weight: 600; }
.hero-right { position: relative; }
.hero-photo {
aspect-ratio: 4 / 5;
background-color: #2A0810; /* fallback grenat profond avant chargement webp */
position: relative;
overflow: hidden;
isolation: isolate;
/* "Shadow as line" : ombre or subtile bord gauche */
box-shadow: -3px 0 0 0 var(--or-deep);
}
/* Couche image : background-image + duotone Sang i Or (chaîne filter scopée) */
.hero-photo-bg {
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center;
background-color: #2A0810;
filter:
grayscale(0.62)
sepia(0.42)
hue-rotate(335deg)
saturate(1.45)
contrast(1.08)
brightness(0.94);
transform: scale(1.02);
transition: opacity 0.36s ease, filter 0.36s ease, transform 14s ease-out;
will-change: opacity, transform;
}
.hero-photo:hover .hero-photo-bg { transform: scale(1.06); } /* ken burns lent au survol */
.hero-photo.is-fading .hero-photo-bg {
opacity: 0.35;
filter:
grayscale(0.85)
sepia(0.55)
hue-rotate(335deg)
saturate(1.2)
blur(3px);
}
/* Carousel dots — 5 photos navigation */
.hero-carousel-dots {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.5rem;
z-index: 3;
padding: 0.4rem 0.7rem;
background: rgba(14, 26, 31, 0.35);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 999px;
}
.hero-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255,255,255,0.5);
border: none;
padding: 0;
cursor: pointer;
transition: background 0.25s, transform 0.25s;
}
.hero-dot:hover { background: rgba(255,255,255,0.85); transform: scale(1.15); }
.hero-dot.is-active { background: #CBA135; transform: scale(1.25); }
.hero-photo::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(120% 80% at 30% 22%, rgba(203, 161, 53, 0.18), transparent 55%),
linear-gradient(180deg, transparent 50%, rgba(42, 8, 16, 0.55) 100%);
z-index: 1;
pointer-events: none;
}
/* Grain Portra 400 SVG noise (Aragón §4) */
.hero-photo::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
z-index: 2;
}
.hero-photo-caption {
position: absolute;
bottom: var(--s-3);
left: var(--s-3);
right: var(--s-3);
z-index: 3;
font-family: var(--f-body);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--blanc);
display: flex;
justify-content: space-between;
gap: var(--s-2);
}
.hero-photo-caption .or { color: var(--or-soft); }
@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; gap: var(--s-4); }
.hero-right { order: -1; }
.hero-photo { aspect-ratio: 16 / 11; }
.hero { padding-top: 6rem; }
.hero-photo::after { display: none; } /* perf mobile (Aragón) */
}
/* ============================================================
4. PROMESSE 3 MOTS — séparateur filet vertical (Aragón)
============================================================ */
.promesse {
padding: var(--s-8) 0;
text-align: center;
background: var(--blanc);
border-top: 1px solid var(--encre);
border-top-color: rgba(14, 26, 31, 0.18);
border-bottom: 1px solid var(--encre);
border-bottom-color: rgba(14, 26, 31, 0.18);
}
.promesse-words {
font-family: var(--f-display);
/* 3 mots horizontaux : font-size scale par viewport pour tenir sur 1 ligne 320px+ */
font-size: clamp(1.05rem, 5.2vw, 5.5rem);
font-weight: 300;
line-height: 1.05;
letter-spacing: -0.03em;
color: var(--encre);
font-variation-settings: 'opsz' 96;
display: flex;
justify-content: center;
align-items: center;
gap: clamp(0.5rem, 2vw, 4rem);
flex-wrap: nowrap; /* lock horizontal — 3 mots toujours sur la même ligne */
white-space: nowrap;
}
.promesse-words span {
position: relative;
transition: color 0.4s var(--ease-out);
cursor: default;
}
.promesse-words span:not(.sep)::after {
content: attr(data-cat);
display: block;
font-family: var(--f-body);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--encre-mute);
margin-top: 0.6rem;
line-height: 1.4;
}
.promesse-words span:hover { color: var(--sang); }
/* Cardo : filet vertical sang opacity 0.4 */
.promesse-words .sep {
width: 1px;
height: 0.7em;
background: var(--sang);
opacity: 0.4;
align-self: center;
}
.promesse-foot {
font-family: var(--f-edit);
font-style: italic;
font-size: 1.05rem;
color: var(--terre);
margin-top: var(--s-5);
max-width: 40ch;
margin-inline: auto;
}
/* ============================================================
5. SECTIONS communes
============================================================ */
.section { padding: var(--s-8) 0; position: relative; }
.section--warm { background: var(--blanc-warm); }
.section--encre {
background: var(--encre);
color: var(--blanc);
}
.section--encre h2, .section--encre h3 { color: var(--blanc); }
.section--encre .lead, .section--encre p { color: rgba(244, 237, 224, 0.8); }
.section-head {
max-width: var(--max-w);
margin: 0 auto var(--s-6);
padding: 0 var(--pad-x);
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--s-4);
align-items: baseline;
}
.section-num {
font-family: var(--f-body);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--sang);
}
.section-title {
font-family: var(--f-display);
font-size: clamp(2rem, 4.5vw, 3.4rem);
font-weight: 300;
line-height: 1.15;
letter-spacing: -0.03em;
color: var(--encre);
font-variation-settings: 'opsz' 72;
}
.section-title em {
color: var(--sang);
font-family: var(--f-edit);
font-style: italic;
font-weight: 400;
font-variation-settings: 'opsz' 48;
letter-spacing: 0.005em;
}
.section-aside {
font-family: var(--f-body);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--encre-mute);
font-weight: 500;
text-align: right;
align-self: end;
}
@media (max-width: 700px) {
.section-head { grid-template-columns: 1fr; gap: var(--s-2); margin-bottom: var(--s-5); }
.section-aside { text-align: left; }
.section { padding: var(--s-7) 0; }
}
/* ============================================================
6. THÉMATIQUES — asymétrique (gap réduit, hover raffiné Aragón)
============================================================ */
.themes-asym {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--pad-x);
display: grid;
grid-template-columns: 1.6fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 4px; /* Bureau Borsche tectonic */
}
.theme-card {
position: relative;
overflow: hidden;
background: var(--blanc-warm);
color: var(--blanc);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--s-4);
transition: transform 0.5s var(--ease-out);
aspect-ratio: 4/5;
}
.theme-card--main {
grid-row: span 2;
aspect-ratio: auto;
}
.theme-card-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: filter 0.7s var(--ease-out);
filter: contrast(1.05) saturate(0.88) sepia(0.05);
}
.theme-card:hover .theme-card-img {
filter: contrast(1.05) saturate(1.0) brightness(1.06) sepia(0.02);
}
.theme-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(14,26,31,0.08) 30%, rgba(14,26,31,0.82) 100%);
z-index: 1;
}
.theme-card-body { position: relative; z-index: 2; }
.theme-card-num {
font-family: var(--f-body);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--or-soft);
margin-bottom: var(--s-2);
display: flex;
align-items: center;
gap: 0.6rem;
}
.theme-card-num::after {
content: '';
display: block;
width: 24px;
height: 1px;
background: var(--or-soft);
}
.theme-card h3 {
font-family: var(--f-display);
font-size: clamp(1.8rem, 3vw, 2.6rem);
font-weight: 400;
line-height: 1.1;
color: var(--blanc);
margin-bottom: 0.4rem;
letter-spacing: -0.025em;
font-variation-settings: 'opsz' 48;
}
.theme-card--main h3 { font-size: clamp(2.4rem, 4.5vw, 3.6rem); letter-spacing: -0.035em; }
.theme-card-tagline {
font-family: var(--f-edit);
font-style: italic;
font-size: clamp(0.95rem, 1.3vw, 1.2rem);
color: var(--or-soft);
margin-bottom: var(--s-3);
max-width: 30ch;
font-variation-settings: 'opsz' 24;
letter-spacing: 0.005em;
}
.theme-card-cta {
font-family: var(--f-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--blanc);
padding-bottom: 0.3rem;
border-bottom: 1px solid var(--or);
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: gap 0.3s var(--ease-out), border-color 0.3s, color 0.3s;
}
.theme-card:hover .theme-card-cta {
gap: 0.9rem;
border-color: var(--sang);
color: var(--or-soft);
}
.theme-card-cta::after { content: '→'; }
/* Trait or manuscrit SVG hover (Yuki §5) */
.theme-card-stroke {
position: absolute;
bottom: var(--s-4);
right: var(--s-4);
width: 80px; height: 4px;
pointer-events: none;
z-index: 2;
}
.theme-card-stroke path {
stroke: var(--or-soft);
stroke-width: 1.5;
fill: none;
stroke-dasharray: 140;
stroke-dashoffset: 140;
transition: stroke-dashoffset 0.7s var(--ease-out);
}
.theme-card:hover .theme-card-stroke path { stroke-dashoffset: 0; }
@media (max-width: 800px) {
.themes-asym { grid-template-columns: 1fr; grid-template-rows: auto; gap: 8px; }
.theme-card { aspect-ratio: 16/11; }
.theme-card--main { grid-row: auto; }
}
/* ============================================================
7. VOIX LOCALE
============================================================ */
.voix {
padding: var(--s-9) 0;
background: var(--encre);
color: var(--blanc);
}
.voix-inner {
max-width: 1000px;
margin: 0 auto;
padding: 0 var(--pad-x);
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.voix-photo {
aspect-ratio: 4/5;
background-size: cover;
background-position: center;
background-color: rgba(244, 237, 224, 0.1);
position: relative;
overflow: hidden;
filter: contrast(1.05) saturate(0.85) sepia(0.1);
}
.voix-photo::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
.voix-eyebrow {
font-family: var(--f-body);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--or);
margin-bottom: var(--s-4);
display: flex;
align-items: center;
gap: 0.7rem;
}
.voix-eyebrow::before {
content: '';
width: 36px; height: 1px;
background: var(--or);
}
.voix blockquote {
font-family: var(--f-display);
font-size: clamp(1.6rem, 3.2vw, 2.6rem);
font-weight: 300;
line-height: 1.3;
color: var(--blanc);
margin-bottom: var(--s-4);
letter-spacing: -0.025em;
font-variation-settings: 'opsz' 72;
}
.voix blockquote em {
font-family: var(--f-edit);
font-style: italic;
color: var(--or);
font-weight: 400;
letter-spacing: 0.005em;
}
.voix cite {
font-family: var(--f-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--or-soft);
font-style: normal;
display: block;
}
.voix cite .role {
display: block;
color: rgba(244, 237, 224, 0.6);
font-weight: 400;
margin-top: 0.3rem;
letter-spacing: 0.12em;
font-size: 0.7rem;
}
@media (max-width: 800px) {
.voix-inner { grid-template-columns: 1fr; }
.voix-photo { aspect-ratio: 16/11; max-width: 400px; }
}
/* ============================================================
8. LETTRE
============================================================ */
.lettre {
padding: var(--s-9) 0;
text-align: center;
background: var(--blanc-warm);
border-top: 1px solid var(--line);
}
.lettre-inner {
max-width: 580px;
margin: 0 auto;
padding: 0 var(--pad-x);
}
.lettre h2 {
font-family: var(--f-display);
font-size: clamp(2rem, 4.5vw, 3rem);
font-weight: 300;
line-height: 1.05;
margin-bottom: var(--s-3);
letter-spacing: -0.03em;
color: var(--encre);
font-variation-settings: 'opsz' 60;
}
.lettre h2 em {
color: var(--sang);
font-family: var(--f-edit);
font-style: italic;
}
.lettre p {
font-family: var(--f-edit);
font-style: italic;
font-size: 1.05rem;
color: var(--terre);
margin-bottom: var(--s-5);
}
.lettre-form {
display: flex;
gap: 0;
max-width: 460px;
margin: 0 auto;
border-bottom: 2px solid var(--encre); /* Aragón : 2px engagement */
}
.lettre-form input {
flex: 1;
background: transparent;
border: 0;
padding: 0.95rem 0;
font-family: var(--f-body);
font-size: 0.95rem;
color: var(--encre);
outline: none;
}
.lettre-form input::placeholder { color: var(--encre-mute); }
.lettre-form button {
background: transparent;
color: var(--sang);
font-family: var(--f-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 0.95rem 0 0.95rem 1rem;
transition: color 0.25s;
}
.lettre-form button:hover { color: var(--sang-deep); }
/* Honey pot anti-bot — hors écran, mais focusable techniquement (bots fillent) */
.lettre-honeypot {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0;
pointer-events: none;
}
/* Flash messages newsletter */
.lettre-flash {
margin: 0 0 var(--s-3) 0;
padding: 0.7rem 1rem;
border-radius: 6px;
font-family: var(--f-body);
font-size: 0.85rem;
letter-spacing: 0.04em;
border: 1px solid;
}
.lettre-flash--ok { background: rgba(203,161,53,0.1); border-color: var(--or); color: var(--or); }
.lettre-flash--info { background: rgba(247,241,230,0.06); border-color: var(--or-soft); color: var(--or-soft); }
.lettre-flash--err { background: rgba(200,16,46,0.12); border-color: var(--sang-vif); color: var(--sang-vif); }
.lettre-foot {
font-family: var(--f-body);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--encre-mute);
margin-top: var(--s-3);
font-weight: 500;
}
/* ============================================================
9. SIGNATURE ÉDITORIALE — "Pour ceux qui regardent deux fois"
============================================================ */
.signature {
text-align: center;
padding: var(--s-6) var(--pad-x) var(--s-5);
background: var(--blanc);
border-top: 1px solid var(--line);
}
.signature p {
font-family: var(--f-edit);
font-style: italic;
font-size: clamp(1.1rem, 1.6vw, 1.4rem);
color: var(--terre);
letter-spacing: 0.005em;
font-variation-settings: 'opsz' 24;
}
.signature p em {
color: var(--sang);
font-family: var(--f-edit);
font-style: italic;
}
/* ============================================================
10. PAGE HEADER (inner pages)
============================================================ */
.page-header {
padding: 7rem var(--pad-x) var(--s-6);
background: var(--blanc);
border-bottom: 1px solid var(--line);
}
.page-header-inner {
max-width: var(--max-w);
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: end;
}
.page-header h1 {
font-family: var(--f-display);
font-size: clamp(2.5rem, 7vw, 5.5rem);
font-weight: 300;
line-height: 1.02;
letter-spacing: -0.045em;
color: var(--encre);
font-variation-settings: 'opsz' 96;
margin-bottom: var(--s-3);
text-wrap: balance;
hyphens: manual;
}
.page-header h1 em {
color: var(--sang);
font-family: var(--f-edit);
font-style: italic;
font-variation-settings: 'opsz' 72;
letter-spacing: 0.005em;
}
.page-header-eyebrow {
font-family: var(--f-body);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--encre-mute);
margin-bottom: var(--s-3);
}
.page-header-lead {
font-family: var(--f-edit);
/* Roman : les leads font 3-7 lignes (descriptions lieu incluses), l'italique
intégral viole la règle « italique parcimonieux » et se lit mal. */
font-style: normal;
font-size: clamp(1.05rem, 1.6vw, 1.3rem);
color: var(--terre);
max-width: 50ch;
line-height: 1.55;
letter-spacing: 0.005em;
}
.page-header-lead em { font-style: italic; color: var(--or); }
.page-header-aside {
font-family: var(--f-body);
font-size: 0.85rem;
color: var(--encre-soft);
padding-bottom: 0.6rem;
border-left: 1px solid var(--line);
padding-left: var(--s-4);
}
.page-header-aside dt {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--encre-mute);
margin-bottom: 0.2rem;
margin-top: 0.8rem;
}
.page-header-aside dt:first-child { margin-top: 0; }
.page-header-aside dd { color: var(--encre); font-weight: 500; }
.page-header-aside dd .sang { color: var(--sang); }
@media (max-width: 900px) {
.page-header-inner { grid-template-columns: 1fr; gap: var(--s-4); }
/* dl en 2 colonnes label · valeur : 7 rangées empilées devenaient un écran
entier de meta avant le contenu (page lieu). */
.page-header-aside {
border-left: 0; border-top: 1px solid var(--line);
padding-left: 0; padding-top: var(--s-3);
display: grid; grid-template-columns: auto 1fr;
gap: 0.45rem var(--s-4); align-items: baseline;
}
.page-header-aside dt { margin: 0; }
.page-header-aside dt:first-child { margin-top: 0; }
.page-header-aside dd { margin: 0; }
}
/* ============================================================
11. CATÉGORIES — sous-pages (Aragón : pas de jump padding)
============================================================ */
.cat-grid {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--pad-x);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--s-5) var(--s-4);
}
.cat-card {
text-align: left;
padding: var(--s-3) 0;
border-top: 1px solid var(--encre);
margin-top: 0;
position: relative;
/* box-shadow inset top simule second border : zéro reflow */
transition: border-top-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.cat-card:hover {
border-top-color: var(--sang);
box-shadow: inset 0 1px 0 0 var(--sang);
}
.cat-card-num {
font-family: var(--f-display);
font-size: clamp(3rem, 5vw, 4.5rem);
font-weight: 300;
line-height: 1.05;
color: var(--sang);
letter-spacing: -0.045em;
margin-bottom: clamp(0.75rem, 2.5vw, 1.5rem);
font-variation-settings: 'opsz' 72;
}
.cat-card-label {
font-family: var(--f-display);
font-size: clamp(1.3rem, 2vw, 1.6rem);
font-weight: 400;
color: var(--encre);
margin-bottom: var(--s-2);
letter-spacing: -0.015em;
font-variation-settings: 'opsz' 24;
}
.cat-card-meta {
font-family: var(--f-body);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--encre-mute);
margin-bottom: var(--s-3);
}
.cat-card-desc {
color: var(--encre-soft);
font-size: 0.95rem;
line-height: 1.55;
margin-bottom: var(--s-3);
max-width: 32ch;
}
.cat-card-cta {
font-family: var(--f-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--encre);
border-bottom: 1px solid var(--encre);
padding-bottom: 0.15rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
transition: all 0.3s var(--ease-out);
}
.cat-card:hover .cat-card-cta {
color: var(--sang);
border-color: var(--sang);
gap: 0.7rem;
}
.cat-card-cta::after { content: '→'; }
/* ============================================================
11b. CARTES MÉDIA + REPÈRES — refonte sections univers (sprint #147)
Classes additives : .cat-grid--media + .cat-card--media enrichissent
les cartes catégorie (photo duotone + numéro + puces + CTA).
============================================================ */
.cat-grid--media { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-5); }
.cat-card--media {
border-top: 0; padding: 0; margin: 0;
display: flex; flex-direction: column;
background: rgba(247, 241, 230, 0.04);
border: 1px solid var(--line);
border-radius: var(--r-md, 16px);
overflow: hidden;
box-shadow: var(--el-1);
transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.cat-card--media:hover { transform: translateY(-4px); box-shadow: var(--el-2); }
.cat-card-media-img {
aspect-ratio: 16 / 10; background-size: cover; background-position: center;
filter: contrast(1.05) saturate(.85) sepia(.04);
position: relative;
}
.cat-card-media-img::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(160deg, rgba(107,15,26,.22), rgba(74,10,12,.58));
mix-blend-mode: multiply;
}
.cat-card-media-num {
position: absolute; top: .3rem; right: .8rem; z-index: 2;
font-family: var(--f-display); font-size: 2.6rem; font-weight: 300; line-height: 1;
color: var(--blanc-pur, #fff); text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.cat-card--media .cat-card-body { padding: var(--s-3) var(--s-4) var(--s-4); display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.cat-card--media .cat-card-label { margin: 0; }
.cat-card--media .cat-card-desc { flex: 0 0 auto; }
.cat-card-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .2rem 0 .5rem; padding: 0; }
.cat-card-tags li { font-family: var(--f-body); font-size: .76rem; color: var(--terre); letter-spacing: .01em; }
.cat-card-tags li::before { content: '✦'; color: var(--or); margin-right: .35rem; font-size: .68em; vertical-align: 1px; }
.cat-card--media .cat-card-cta { margin-top: auto; padding-top: var(--s-3); align-self: flex-start; }
/* Repères : bande de stats en colonnes (casse la linéarité après l'en-tête) */
.reperes {
max-width: var(--max-w); margin: 0 auto; padding: var(--s-5) var(--pad-x) 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3);
}
.repere {
border: 1px solid var(--line); border-left: 3px solid var(--or);
border-radius: var(--r-sm, 10px); padding: var(--s-3) var(--s-4);
background: rgba(203,161,53,.05);
}
.repere-v { font-family: var(--f-display); font-size: 1.9rem; font-weight: 300; color: var(--sang); line-height: 1; letter-spacing: -0.02em; }
.repere-k { font-family: var(--f-body); font-size: .76rem; color: var(--encre-soft); margin-top: .3rem; letter-spacing: .04em; }
/* ============================================================
12. CITATION
============================================================ */
.quote-block {
max-width: 820px;
margin: 0 auto;
padding: var(--s-6) var(--pad-x);
text-align: center;
position: relative;
}
/* Ornement ✦ au-dessus de la citation (séparateur visuel) */
.quote-block::before {
content: '✦';
display: block;
color: var(--or);
font-size: 1rem;
letter-spacing: 0.4em;
margin-bottom: var(--s-4);
opacity: 0.9;
}
.quote-block blockquote {
position: relative;
font-family: var(--f-display);
font-size: clamp(1.5rem, 3.2vw, 2.6rem);
font-weight: 300;
line-height: 1.28;
color: var(--encre);
letter-spacing: -0.025em;
margin: 0 0 var(--s-4);
font-variation-settings: 'opsz' 72;
text-wrap: balance;
}
/* Grand guillemet filigrane derrière la citation */
.quote-block blockquote::before {
content: '\201C';
position: absolute;
top: -2.4rem; left: 50%;
transform: translateX(-50%);
font-family: var(--f-edit);
font-size: 5.5rem;
line-height: 1;
color: var(--or);
opacity: 0.12;
pointer-events: none;
}
.quote-block blockquote em {
color: var(--sang);
font-family: var(--f-edit);
font-style: italic;
letter-spacing: 0.005em;
}
.section--encre .quote-block blockquote { color: var(--blanc); }
.section--encre .quote-block blockquote em { color: var(--or); }
.quote-block cite {
display: inline-flex;
align-items: center;
gap: 0.85rem;
margin-top: var(--s-2);
font-family: var(--f-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--encre-mute);
font-style: normal;
}
.quote-block cite::before, .quote-block cite::after {
content: '';
width: 30px; height: 1px;
background: var(--line-or);
display: inline-block;
}
/* ============================================================
13. BOTTOM-NAV mobile
============================================================ */
.bottom-nav {
display: none;
position: fixed;
inset: auto 0 0 0;
background: var(--blanc);
border-top: 1px solid var(--line);
z-index: 80;
padding: 0.35rem 0 calc(0.35rem + env(safe-area-inset-bottom, 0px));
}
.bottom-nav ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
max-width: 600px;
margin: 0 auto;
}
.bottom-nav a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 0.45rem 0.2rem;
color: var(--encre-soft);
font-family: var(--f-body);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
min-height: 56px;
transition: color 0.25s;
position: relative;
}
.bottom-nav a.is-active { color: var(--sang); }
.bottom-nav a:active { transform: scale(0.94); transition: transform 0.08s; }
.bottom-nav a.is-active::before {
content: '';
position: absolute;
top: 0; left: 30%; right: 30%;
height: 2px;
background: var(--sang);
}
.bottom-nav svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
/* Badge count carnet — discret, monte si > 0 */
.bottom-nav-badge {
position: absolute;
top: 4px;
right: calc(50% - 22px);
min-width: 16px;
height: 16px;
padding: 0 4px;
background: var(--sang-vif, var(--sang));
color: var(--blanc, #F7F1E6);
font-size: 0.6rem;
font-weight: 700;
font-family: var(--f-body);
letter-spacing: 0;
text-transform: none;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
box-shadow: 0 0 0 2px var(--field-deep, #4A0A12);
}
.bottom-nav-badge[hidden] { display: none !important; }
@media (max-width: 900px) {
.bottom-nav { display: block; }
}
/* ============================================================
14. SURPRENDS-MOI button (Sara §8 — random discovery)
============================================================ */
.surprise-section {
text-align: center;
padding: var(--s-7) 0 var(--s-6);
}
.surprise-btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: clamp(0.8rem, 1.5vw, 1rem) clamp(1.2rem, 3vw, 2rem);
background: var(--encre);
color: var(--blanc);
font-family: var(--f-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
transition: all 0.3s var(--ease-out);
min-height: 48px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.surprise-btn::after {
content: '↗';
transition: transform 0.3s var(--ease-out);
font-family: var(--f-edit);
font-style: italic;
color: var(--or);
font-size: 1.1rem;
}
.surprise-btn:hover { background: var(--sang); }
.surprise-btn:hover::after { transform: translate(4px, -4px) rotate(8deg); color: var(--or-soft); }
/* FAB flottant "Au hasard" — toutes pages sauf accueil/lieu/404 */
.surprise-fab {
position: fixed;
bottom: calc(80px + env(safe-area-inset-bottom, 0));
right: var(--s-3, 0.8rem);
z-index: 90;
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.6rem 1rem 0.6rem 0.85rem;
background: var(--field-deep, var(--encre));
color: var(--or);
border: 1px solid var(--or);
border-radius: 999px;
font-family: var(--f-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 1px rgba(203,161,53,0.25);
transition: transform 0.25s var(--ease-out, ease), box-shadow 0.25s, background 0.25s, opacity 0.25s;
min-height: 44px;
opacity: 0.75; /* discret par défaut, full au hover/focus */
}
.surprise-fab:focus-visible { opacity: 1; }
/* Auto-hide au scroll descendant : évite la collision avec les boutons cœur
des cartes (Explorer) et libère le coin pendant la lecture. */
html.is-scrolling-down .surprise-fab {
transform: translateY(180%);
opacity: 0;
pointer-events: none;
}
.surprise-fab-glyph {
color: var(--sang-vif, var(--sang));
font-size: 1.1rem;
line-height: 1;
display: inline-block;
transition: transform 0.4s var(--ease-out, ease);
}
.surprise-fab:hover {
background: var(--sang);
color: var(--or-soft);
transform: translateY(-2px);
box-shadow: 0 6px 22px rgba(0,0,0,0.45);
opacity: 1;
}
.surprise-fab:hover .surprise-fab-glyph { transform: rotate(180deg); }
/* Toast "Vous avez tout vu — Reset" */
.surprise-exhausted-toast {
position: fixed;
left: 50%;
bottom: calc(100px + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%) translateY(20px);
opacity: 0;
width: calc(100% - 2rem);
max-width: 480px;
background: #2A0810;
color: #F7F1E6;
border: 1px solid var(--or, #CBA135);
border-radius: 12px;
padding: 1rem 1.2rem;
box-shadow: 0 12px 40px rgba(0,0,0,0.5);
z-index: 250;
transition: opacity 0.4s var(--ease-out, ease), transform 0.4s var(--ease-out, ease);
font-family: var(--f-body);
}
.surprise-exhausted-toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }
.surprise-exhausted-toast p { margin: 0 0 0.5rem; font-size: 0.88rem; line-height: 1.4; }
.surprise-exhausted-toast p strong { color: var(--or, #CBA135); display: block; font-family: var(--f-display); font-size: 1rem; }
.surprise-exhausted-toast button[data-reset] {
background: var(--or, #CBA135);
color: #2A0810;
border: none;
padding: 0.55rem 1rem;
border-radius: 6px;
font-family: var(--f-body);
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
margin-top: 0.4rem;
transition: opacity 0.2s;
}
.surprise-exhausted-toast button[data-reset]:hover { opacity: 0.85; }
.surprise-exhausted-toast button[data-dismiss] {
position: absolute;
top: 8px;
right: 8px;
background: transparent;
color: rgba(247,241,230,0.6);
border: none;
width: 30px;
height: 30px;
cursor: pointer;
font-size: 0.9rem;
}
.surprise-exhausted-toast button[data-dismiss]:hover { color: #F7F1E6; }
/* Bandeau RGPD léger : stockage local, pas de cookie publicitaire */
.cookie-notice {
position: fixed;
left: 1rem;
right: 1rem;
bottom: calc(80px + env(safe-area-inset-bottom, 0px));
max-width: 460px;
margin: 0 auto;
background: #2A0810;
color: #F7F1E6;
border: 1px solid var(--or, #CBA135);
border-radius: 12px;
padding: 1rem 1.2rem;
box-shadow: 0 12px 40px rgba(0,0,0,0.5);
z-index: 240;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.4s var(--ease-out, ease), transform 0.4s var(--ease-out, ease);
font-family: var(--f-body);
font-size: 0.85rem;
line-height: 1.5;
}
.cookie-notice.is-shown { opacity: 1; transform: translateY(0); }
.cookie-notice p { margin: 0 0 0.7rem; }
.cookie-notice p strong { color: var(--or, #CBA135); }
.cookie-notice-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.cookie-notice-link {
color: rgba(247,241,230,0.7);
text-decoration: none;
border-bottom: 1px solid rgba(247,241,230,0.3);
font-size: 0.78rem;
transition: color 0.2s, border-color 0.2s;
}
.cookie-notice-link:hover { color: var(--or, #CBA135); border-color: var(--or, #CBA135); }
.cookie-notice-ok {
background: var(--or, #CBA135);
color: #2A0810;
border: none;
padding: 0.55rem 1.1rem;
border-radius: 6px;
font-family: var(--f-body);
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.08em;
cursor: pointer;
min-height: 44px;
transition: opacity 0.2s;
}
.cookie-notice-ok:hover { opacity: 0.85; }
@media (max-width: 700px) {
.cookie-notice { left: 0.6rem; right: 0.6rem; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
/* ============================================================
FOOTER COMPACT — refonte 2 rows: identity+nav puis legal+meta
============================================================ */
.site-footer {
padding: clamp(2rem, 4vw, 3rem) var(--pad-x) clamp(1.2rem, 2vw, 1.6rem);
border-top: 1px solid var(--line-or, rgba(203,161,53,0.18));
margin-top: var(--s-5);
color: var(--blanc, #F7F1E6);
}
.footer-top {
max-width: var(--max-w);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(1rem, 3vw, 2.5rem);
padding-bottom: clamp(1rem, 2vw, 1.4rem);
border-bottom: 1px solid rgba(203,161,53,0.15);
flex-wrap: wrap;
}
.footer-identity {
display: flex;
align-items: baseline;
gap: clamp(0.6rem, 1.5vw, 1.2rem);
flex: 1 1 auto;
min-width: 0;
}
.footer-brand {
font-family: var(--f-display);
font-size: clamp(1.1rem, 1.4vw, 1.4rem);
font-weight: 600;
color: var(--or, #CBA135);
letter-spacing: -0.01em;
flex: 0 0 auto;
}
.footer-tagline {
font-family: var(--f-body);
font-size: clamp(0.72rem, 1vw, 0.85rem);
color: rgba(247,241,230,0.7);
line-height: 1.4;
font-style: italic;
}
.footer-nav {
display: flex;
gap: clamp(0.8rem, 1.5vw, 1.4rem);
flex-wrap: wrap;
flex: 0 0 auto;
}
.footer-nav a {
font-family: var(--f-body);
font-size: 0.78rem;
color: rgba(247,241,230,0.65);
text-decoration: none;
letter-spacing: 0.05em;
transition: color 0.2s;
padding: 0.2rem 0;
}
.footer-nav a:hover { color: var(--or, #CBA135); }
.footer-bottom {
max-width: var(--max-w);
margin: 0 auto;
padding-top: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
border: none;
}
.footer-meta {
font-family: var(--f-body);
font-size: 0.72rem;
color: rgba(247,241,230,0.5);
margin: 0;
letter-spacing: 0.02em;
}
.footer-meta a {
color: rgba(247,241,230,0.7);
text-decoration: none;
border-bottom: 1px solid rgba(247,241,230,0.2);
transition: color 0.2s, border-color 0.2s;
}
.footer-meta a:hover { color: var(--or, #CBA135); border-color: var(--or, #CBA135); }
.footer-sep { margin: 0 0.4em; opacity: 0.5; }
.footer-legal {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: clamp(0.6rem, 1.2vw, 1rem);
flex-wrap: wrap;
}
.footer-legal a {
font-family: var(--f-body);
font-size: 0.7rem;
color: rgba(247,241,230,0.5);
text-decoration: none;
letter-spacing: 0.04em;
transition: color 0.2s;
}
.footer-legal a:hover { color: var(--or, #CBA135); }
.footer-catalan {
max-width: var(--max-w);
margin: 1rem auto 0;
text-align: center;
font-family: var(--f-edit, Georgia, serif);
font-size: 0.78rem;
color: var(--or, #CBA135);
opacity: 0.6;
}
@media (max-width: 700px) {
.footer-top { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
.footer-identity { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
.footer-meta, .footer-legal { font-size: 0.7rem; }
}
@media (max-width: 640px) {
.surprise-fab { padding: 0.55rem 0.85rem; font-size: 0.65rem; }
.surprise-fab-label { display: none; }
.surprise-fab-glyph { font-size: 1.25rem; }
}
@media print {
.surprise-fab { display: none !important; }
}
/* ============================================================
15. FOOTER
============================================================ */
.site-footer {
background: var(--blanc);
padding: var(--s-7) 0 var(--s-3);
border-top: 1px solid var(--line);
padding-left: var(--senyera-w);
}
@media (max-width: 900px) { .site-footer { padding-left: var(--pad-x); padding-right: var(--pad-x); padding-bottom: 100px; } }
.footer-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--pad-x);
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: var(--s-5);
padding-bottom: var(--s-5);
}
.footer-brand {
font-family: var(--f-display);
font-size: clamp(1.2rem, 1.5vw, 1.5rem);
font-weight: 500;
letter-spacing: -0.01em;
color: var(--encre);
margin-bottom: 0.4rem;
}
.footer-tagline {
font-family: var(--f-edit);
font-style: italic;
font-size: 1.05rem;
color: var(--terre);
margin-bottom: var(--s-3);
max-width: 32ch;
line-height: 1.4;
}
.footer-col h4, .footer-col .footer-h {
font-family: var(--f-body);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sang);
margin-bottom: var(--s-3);
}
.footer-col ul li { padding: 0.25rem 0; }
.footer-col a {
color: var(--encre-soft);
font-size: 0.9rem;
transition: color 0.25s;
}
.footer-col a:hover { color: var(--sang); }
/* Nouveautés — 3 dernières pépites approuvées V.R. (homepage) */
.nouveautes {
padding: var(--s-6) var(--pad-x) var(--s-7);
background: rgba(74,10,18,0.06);
border-top: 1px solid var(--line-or);
border-bottom: 1px solid var(--line-or);
}
.nouveautes-inner { max-width: var(--max-w); margin: 0 auto; }
.nouveautes-head { margin-bottom: var(--s-4); }
.nouveautes-eyebrow {
font-family: var(--f-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--accent-saison); /* saison · or par défaut (été), sprint #117 */
margin-bottom: var(--s-2);
}
.nouveautes h2 {
font-family: var(--f-display);
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 300;
line-height: 1.1;
color: var(--blanc);
letter-spacing: -0.025em;
margin: 0;
}
.nouveautes h2 em {
color: var(--or);
font-family: var(--f-edit);
font-style: italic;
font-weight: 400;
}
.nouveautes-list {
list-style: none;
padding: 0;
margin: var(--s-4) 0 var(--s-3);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--s-3);
}
.nouveautes-card {
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-3);
background: rgba(247,241,230,0.03);
border: 1px solid rgba(203,161,53,0.2);
border-radius: 6px;
text-decoration: none;
color: inherit;
transition: all 0.25s var(--ease-out);
}
.nouveautes-card:hover {
border-color: var(--or);
background: rgba(203,161,53,0.06);
transform: translateY(-2px);
}
.nouveautes-icon {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: rgba(203,161,53,0.1);
border: 1px solid var(--line-or);
border-radius: 50%;
color: var(--or);
font-size: 1.1rem;
flex-shrink: 0;
}
.nouveautes-body { flex: 1; min-width: 0; }
.nouveautes-name {
display: block;
font-family: var(--f-display);
font-size: 1.05rem;
font-weight: 500;
color: var(--blanc-pur);
line-height: 1.2;
margin-bottom: 0.2rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nouveautes-meta {
font-family: var(--f-body);
font-size: 0.72rem;
color: var(--or-soft);
letter-spacing: 0.04em;
}
.nouveautes-arrow {
color: var(--or);
font-size: 1.1rem;
transition: transform 0.2s;
}
.nouveautes-card:hover .nouveautes-arrow { transform: translateX(4px); }
.nouveautes-foot {
text-align: right;
margin-top: var(--s-3);
}
.nouveautes-foot a {
color: var(--or);
text-decoration: none;
font-family: var(--f-body);
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
border-bottom: 1px solid var(--or-soft);
padding-bottom: 2px;
transition: color 0.2s;
}
.nouveautes-foot a:hover { color: var(--blanc); border-color: var(--blanc); }
/* Author avatar — monogramme V.R. (placeholder photo future) */
.author-block {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--s-3);
}
.author-avatar {
margin: 0;
width: clamp(72px, 12vw, 110px);
height: clamp(72px, 12vw, 110px);
border-radius: 50%;
overflow: hidden;
box-shadow: 0 4px 18px rgba(74, 10, 18, 0.35), 0 0 0 1px rgba(203,161,53,0.2);
flex-shrink: 0;
transition: transform 0.4s var(--ease-out, ease);
}
.author-avatar:hover { transform: scale(1.04) rotate(-2deg); }
.author-avatar svg { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) {
.author-block { flex-direction: row; align-items: center; gap: var(--s-4); }
.author-block .page-header-aside { flex: 1; }
}
@media (max-width: 520px) {
.author-block { flex-direction: column; align-items: flex-start; }
}
/* View Transitions API — cross-fade entre pages (browsers support) */
@supports (view-transition-name: none) {
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.32s;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-old(root) { animation-name: epyria-fade-out; }
::view-transition-new(root) { animation-name: epyria-fade-in; }
}
}
@keyframes epyria-fade-out {
to { opacity: 0; }
}
@keyframes epyria-fade-in {
from { opacity: 0; }
}
.footer-location {
font-family: var(--f-body);
font-size: 0.78rem;
color: var(--encre-mute);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.footer-catalan {
max-width: var(--max-w);
margin: var(--s-3) auto 0;
padding: 0 var(--pad-x);
font-family: var(--f-edit);
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--or, rgba(203,161,53,0.55));
text-align: center;
opacity: 0.55;
}
.footer-bottom {
max-width: var(--max-w);
margin: 0 auto;
padding: var(--s-3) var(--pad-x) 0;
border-top: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--s-3);
font-family: var(--f-body);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--encre-mute);
}
.footer-bottom ul {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
}
.footer-bottom a:hover { color: var(--sang); }
/* #160b : sur mobile, le conteneur .site-footer fournit déjà le padding horizontal.
footer-bottom / footer-catalan ont leur propre --pad-x (pensé pour un conteneur à 0
sur desktop) → double marge (40px). On le neutralise ici, APRÈS toutes les defs de base,
pour que tout le footer s'aligne à --pad-x (20px). Placé tard = gagne en ordre source. */
@media (max-width: 900px) {
.footer-bottom, .footer-catalan { padding-left: 0; padding-right: 0; }
}
@media (max-width: 800px) {
.footer-inner { grid-template-columns: 1fr; gap: var(--s-4); }
}
/* ============================================================
16. LEGAL
============================================================ */
.legal-page {
max-width: 780px;
margin: 0 auto;
padding: 8rem var(--pad-x) var(--s-7);
}
.legal-page h1 {
font-family: var(--f-display);
font-size: clamp(2.2rem, 5vw, 3.6rem);
font-weight: 300;
line-height: 0.98;
letter-spacing: -0.045em;
margin-bottom: var(--s-4);
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--line);
font-variation-settings: 'opsz' 72;
}
.legal-page h2 {
font-family: var(--f-edit);
font-style: italic;
font-size: 1.4rem;
color: var(--sang);
margin: var(--s-5) 0 var(--s-2);
font-variation-settings: 'opsz' 36;
}
.legal-page p { margin-bottom: var(--s-3); color: var(--encre-soft); line-height: 1.7; }
.legal-page ul li {
padding-left: 1.2rem;
position: relative;
color: var(--encre-soft);
margin-bottom: 0.4rem;
}
.legal-page ul li::before {
content: '—';
position: absolute;
left: 0;
color: var(--sang);
}
.legal-page a { color: var(--sang); border-bottom: 1px solid var(--sang); }
.legal-page a:hover { color: var(--sang-deep); border-color: var(--sang-deep); }
/* ============================================================
17. TOPONYME CATALAN défilant en marge (Yuki §2)
============================================================ */
.toponym {
position: fixed;
left: calc(var(--senyera-w) + 6px);
top: 0;
height: 100vh;
height: 100dvh;
writing-mode: vertical-rl;
text-orientation: mixed;
font-family: var(--f-edit);
font-style: italic;
font-size: 13px;
letter-spacing: 0.3em;
color: rgba(176, 20, 47, 0.18);
pointer-events: none;
overflow: hidden;
z-index: 45;
display: flex;
align-items: center;
}
.toponym-text {
animation: drift 60s linear infinite;
white-space: nowrap;
}
@keyframes drift {
from { transform: translateY(-50%); }
to { transform: translateY(50%); }
}
@media (max-width: 900px) {
.toponym { display: none; }
}
/* ============================================================
18. UTILITIES / A11Y
============================================================ */
:focus-visible {
outline: 2px solid var(--sang);
outline-offset: 3px;
}
.skip-link {
position: absolute;
top: 0; left: 0;
background: var(--encre);
color: var(--blanc);
padding: 0.7rem 1.2rem;
transform: translateY(-100%);
z-index: 1000;
font-size: 0.85rem;
transition: transform 0.25s;
}
.skip-link:focus { transform: translateY(0); }
/* Durées alignées tokens motion (slow 600ms max) : le 0.9-1s d'origine laissait
le contenu illisible pendant ~1s au scroll rapide mobile (80 % du trafic). */
[data-reveal] {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
/* Reveal clip-path (Yuki §6 — déplier lettre). perspective/rotateX retirés :
imperceptibles à 600ms, coûteux en compositing mobile. */
[data-reveal-clip] {
/* Marges -40px sur 3 côtés : l'état final inset(-40px) n'ampute ni les
box-shadows ni les bordures (inset(0) rognait les encadrés au repos). */
clip-path: inset(-40px -40px 100% -40px);
transform: translateY(10px);
opacity: 0;
transition: clip-path 0.6s var(--ease-wind), transform 0.6s var(--ease-wind), opacity 0.45s var(--ease-out);
transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal-clip].is-visible {
clip-path: inset(-40px);
transform: translateY(0);
opacity: 1;
}
/* Time cursor desktop (Yuki §9) */
.time-cursor {
position: fixed;
top: 0; left: 0;
font: 11px/1 var(--f-body);
color: rgba(14, 26, 31, 0.35);
pointer-events: none;
mix-blend-mode: multiply;
letter-spacing: 0.1em;
z-index: 9999;
transition: opacity 0.3s;
text-transform: uppercase;
font-weight: 500;
}
@media (hover: none), (pointer: coarse) { .time-cursor { display: none; } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
[data-reveal], [data-reveal-clip] { opacity: 1; transform: none; clip-path: none; }
.hero-title .lt { opacity: 1; transform: none; }
.toponym-text { animation: none; }
/* Pas d'auto-hide : barre et FAB restent en place. */
html.is-scrolling-down .explorer-toolbar { transform: none; }
html.is-scrolling-down .surprise-fab { transform: none; opacity: 0.75; pointer-events: auto; }
}
/* Feedback tactile : enfoncement bref au tap (token instant 120ms).
Hover inopérant sur mobile, le doigt a besoin d'une réponse physique. */
@media (hover: none) {
.btn:active,
.place-card:active,
.ma-selection-tile:active,
.cat-card:active,
.coll-card:active,
.explorer-filters button:active {
transform: scale(0.985);
transition-duration: 0.12s;
}
}
/* View Transitions API (Yuki §8) */
@view-transition { navigation: auto; }
::view-transition-old(root) {
animation: wind-out 0.35s var(--ease-inout) forwards;
}
::view-transition-new(root) {
animation: wind-in 0.45s var(--ease-wind) 0.1s both;
}
@keyframes wind-out {
to { opacity: 0; transform: translateX(-2vw) skewX(-1deg); }
}
@keyframes wind-in {
from { opacity: 0; transform: translateX(2vw); }
}
/* ============================================================
19. APP-SHELL MOBILE DÉDIÉ (80% trafic smartphone)
============================================================ */
@media (max-width: 700px) {
/* — Header compact app-bar — */
.site-header { padding-top: env(safe-area-inset-top, 0px); }
.header-inner { padding: 0.8rem var(--pad-x); }
.brand-mark { font-size: 1.15rem; }
.brand-meta { font-size: 0.58rem; }
/* — Hero mobile : photo full-bleed haut, contenu serré — */
.hero {
min-height: auto;
padding: 5rem var(--pad-x) var(--s-6);
display: block;
}
.hero .hero-grid { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
.hero .hero-right { order: -1 !important; margin: 0 calc(var(--pad-x) * -1) var(--s-4); width: auto; align-self: stretch; }
.hero .hero-left { order: 0 !important; }
.hero-photo {
aspect-ratio: 4 / 3;
box-shadow: none;
border-bottom: 3px solid var(--sang);
}
.hero-eyebrow { margin-top: var(--s-2); }
.hero-title { font-size: clamp(2.6rem, 12vw, 4.2rem); line-height: 1.02; }
.hero-sub { font-size: 1.1rem; }
.hero-meta {
grid-template-columns: 1fr 1fr;
gap: var(--s-3) var(--s-4);
margin-top: var(--s-4);
}
.hero-meta dt { font-size: 0.6rem; }
/* — Thématiques en lignes-app (thumb + texte + chevron) — */
.themes-asym {
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--line);
}
.theme-card,
.theme-card--main {
aspect-ratio: auto;
flex-direction: row;
align-items: center;
gap: var(--s-3);
padding: var(--s-3) 0;
min-height: 96px;
border-bottom: 1px solid var(--line);
background: transparent;
color: var(--encre);
}
.theme-card::after { display: none; } /* pas d'overlay sombre */
.theme-card-img {
position: relative;
inset: auto;
flex: 0 0 84px;
width: 84px;
height: 84px;
border-radius: 8px;
filter: contrast(1.05) saturate(0.9);
/* Mobile : sert la variante -sm (≈48-84 Ko) au lieu du 1600px desktop */
background-image: var(--img-sm) !important;
}
.voix-photo { background-image: var(--img-sm) !important; }
.theme-card-stroke { display: none; }
.theme-card-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.theme-card-num { color: var(--sang); margin-bottom: 0; font-size: 0.6rem; }
.theme-card-num::after { display: none; }
.theme-card h3,
.theme-card--main h3 {
color: var(--encre);
font-size: 1.5rem;
margin-bottom: 0;
letter-spacing: -0.02em;
}
.theme-card-tagline {
color: var(--encre-mute);
font-size: 0.92rem;
margin-bottom: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.theme-card-cta {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
border: 0;
padding: 0;
font-size: 0;
color: var(--sang);
}
.theme-card-cta::after { content: '›'; font-size: 1.8rem; font-weight: 300; }
.theme-card { position: relative; padding-right: 1.6rem; }
/* — Promesse compacte — */
.promesse { padding: var(--s-6) 0; }
/* user veut 3 mots horizontaux mobile aussi → keep flex row */
.promesse-words { flex-direction: row; gap: 0.5rem; flex-wrap: nowrap; }
.promesse-words .sep { display: inline-block; }
/* — Bottom-nav app : safe-area + glow actif — */
.bottom-nav {
padding-bottom: calc(0.3rem + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -2px 20px rgba(14, 26, 31, 0.06);
}
.bottom-nav a.is-active svg { transform: scale(1.08); }
.bottom-nav svg { transition: transform 0.25s var(--ease-out); }
/* — Sections plus serrées — */
.section { padding: var(--s-6) 0; }
.voix { padding: var(--s-7) 0; }
.lettre { padding: var(--s-7) 0; }
}
/* — Mode PWA standalone : retouches app — */
@media (display-mode: standalone) {
.site-header { padding-top: max(env(safe-area-inset-top, 0px), 0.5rem); }
/* Masquer le burger desktop-nav : navigation par bottom-nav uniquement */
.signature { padding-bottom: calc(var(--s-5) + 80px); }
}
/* — Time cursor : jamais sur tactile (renfort) — */
@media (pointer: coarse), (hover: none) {
.time-cursor { display: none !important; }
}
/* ============================================================
20. BANNIÈRE INSTALLATION PWA
============================================================ */
.install-banner {
position: fixed;
left: 50%;
bottom: calc(72px + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%) translateY(140%);
width: calc(100% - 2rem);
max-width: 420px;
background: #2A0810; /* sang-deep — hardcoded car --encre remappé blanc en Sang i Or */
color: #F7F1E6;
border: 1px solid rgba(203,161,53,0.3);
border-radius: 14px;
padding: 0.9rem 1rem;
display: flex;
align-items: center;
gap: 0.8rem;
z-index: 200;
box-shadow: 0 12px 40px rgba(14, 26, 31, 0.3);
transition: transform 0.5s var(--ease-out);
}
.install-banner.is-shown { transform: translateX(-50%) translateY(0); }
.install-banner-icon {
flex: 0 0 40px;
width: 40px; height: 40px;
border-radius: 9px;
overflow: hidden;
}
.install-banner-text { flex: 1; min-width: 0; }
.install-banner-text strong {
display: block;
font-family: var(--f-display);
font-weight: 500;
font-size: 0.95rem;
}
.install-banner-text span {
font-size: 0.75rem;
color: rgba(244, 237, 224, 0.7);
}
.install-banner-actions { display: flex; gap: 0.4rem; align-items: center; }
.install-banner button {
font-family: var(--f-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.6rem 0.9rem;
border-radius: 8px;
min-height: 40px;
}
.install-banner .btn-install { background: #CBA135; color: #2A0810; font-weight: 600; }
.install-banner .btn-install:hover { background: #E3C68A; }
.install-banner .btn-dismiss { background: transparent; color: rgba(247, 241, 230, 0.7); padding: 0.6rem 0.6rem; border: 1px solid rgba(247,241,230,0.2); }
.install-banner .btn-dismiss:hover { color: #F7F1E6; border-color: rgba(247,241,230,0.5); }
.install-banner-text strong { color: #F7F1E6; }
.install-banner-text span { color: rgba(247,241,230,0.65); }
@media (min-width: 701px) { .install-banner { display: none; } }
/* ================================================================
21. THÈME SANG I OR — fond grenat · or · blanc
"Sanch i or · Sempre endavant"
Re-skin global via override (later cascade wins)
================================================================ */
:root {
--field: #6B0F1A; /* grenat / sang-de-bœuf — fond principal */
--field-deep: #4A0A12; /* grenat profond — sections sombres, footer */
--field-soft: #7C1622; /* grenat clair — alternance */
--sang-vif: #C8102E; /* rouge vif — punch rare (punt, actif) */
--or: #CBA135; /* or riche — traits, cadres, ornements */
--or-soft: #E6CA85; /* or clair — highlights, sous-titres */
--or-deep: #9A7B28; /* or sombre — ombres "as line" */
--blanc: #F7F1E6; /* blanc chaulé — texte courant */
--blanc-soft: rgba(247, 241, 230, 0.6); /* blanc atténué — métadonnées, légendes */
--blanc-pur: #FFFFFF; /* blanc pur — titres */
--line-or: rgba(203, 161, 53, 0.45); /* filet or translucide */
/* ----- Primitives v2.1 « moderne-affirmé » (design-system tokens.json v2.1.0, sprint #123) ----- */
/* Radius par échelle : structure (filets/marges) reste nette, surfaces tactiles + tuiles s'arrondissent */
--r-xs: 2px;
--r-sm: 10px; /* boutons */
--r-md: 16px; /* cartes, champs, icon-buttons */
--r-lg: 24px; /* tuiles bento */
--r-xl: 32px; /* grandes tuiles, hero bento */
--r-full: 9999px; /* pills, badges */
/* Dégradés cadrés iso-palette — interactif + grands motifs + lueurs UNIQUEMENT, jamais sur texte */
--grad-or: linear-gradient(155deg, #E6CA85 0%, #CBA135 55%, #9A7B28 100%);
--grad-grenat: linear-gradient(165deg, #7C1622 0%, #6B0F1A 60%, #4A0A12 100%);
--grad-glow: radial-gradient(120% 120% at 0% 0%, rgba(230, 202, 133, 0.12), transparent 60%);
--grad-senyera: linear-gradient(180deg, #CBA135 0%, #C8102E 100%);
/* Élévation basse + sombre (sur grenat) + arête lumineuse tactile */
--lit-edge: inset 0 1px 0 rgba(255, 255, 255, 0.45);
--el-1: 0 1px 0 rgba(0, 0, 0, 0.20), 0 6px 18px rgba(0, 0, 0, 0.28);
--el-2: 0 2px 0 rgba(0, 0, 0, 0.25), 0 16px 40px rgba(0, 0, 0, 0.40);
--focus-ring: 0 0 0 2px var(--field), 0 0 0 4px var(--or);
}
/* — Base — */
body {
background: var(--field);
color: var(--blanc);
}
::selection { background: var(--or); color: var(--field-deep); }
.punt { color: var(--or); }
/* Sprint #117 : orne + punct-saison consomment l'accent saison (été = or, zéro régression).
Placés dans le re-skin global pour battre les définitions amont (cascade later-wins). */
.orne { color: var(--accent-saison); opacity: 0.7; }
/* Séparateur ponctuel saisonnier, décoratif (aria-hidden), lisible quel que soit le parent.
Le TEXTE de l'eyebrow reste en --or-soft ; seule la ponctuation prend la teinte saison. */
.punct-saison { color: var(--accent-saison); }
/* — Senyera : or vide → vif rempli (sur grenat) — */
.senyera-bar { background: rgba(203, 161, 53, 0.22); }
.senyera-bar::after { background: linear-gradient(180deg, var(--or) 0%, var(--sang-vif) 100%); }
@media (max-width: 900px) {
.senyera-bar::after { background: linear-gradient(90deg, var(--or) 0%, var(--sang-vif) 100%); }
}
/* — Header — */
.site-header {
background: rgba(74, 10, 18, 0.82);
backdrop-filter: blur(14px) saturate(130%);
-webkit-backdrop-filter: blur(14px) saturate(130%);
}
.site-header.is-scrolled { border-bottom-color: var(--line-or); }
.brand-mark { color: var(--blanc-pur); }
.brand-meta { color: var(--or-soft); }
.site-nav a { color: var(--blanc); }
.site-nav a::after { background: var(--or); }
.site-nav a:hover, .site-nav a.is-active { color: var(--or-soft); }
.menu-toggle span { background: var(--blanc); }
@media (max-width: 900px) {
.site-nav { background: var(--field-deep); border-left-color: var(--line-or); }
.site-nav a { color: var(--blanc); border-bottom-color: var(--line-or); }
}
/* — Hero — */
.hero { background: var(--field); }
.hero-eyebrow { color: var(--or-soft); }
.hero-eyebrow::before { background: var(--or); }
.hero-title { color: var(--blanc-pur); }
.hero-title .accent { color: var(--or); }
.hero-sub { color: var(--or-soft); }
.hero-sub em { color: var(--or); }
.hero-meta { border-top-color: var(--line-or); }
.hero-meta dt { color: var(--or-soft); }
.hero-meta dd { color: var(--blanc); }
.hero-meta .accent-or { color: var(--or); }
/* Photo : cadre or "as line" */
.hero-photo {
box-shadow: 0 0 0 1px var(--or), -6px 6px 0 0 var(--or-deep);
border-bottom: none;
}
.hero-photo-caption { color: var(--blanc); }
.hero-photo-caption .or { color: var(--or-soft); }
/* — Promesse — */
.promesse {
background: var(--field-soft);
border-top: 1px solid var(--line-or);
border-bottom: 1px solid var(--line-or);
}
.promesse-words { color: var(--blanc-pur); }
.promesse-words span:not(.sep)::after { color: var(--or-soft); }
.promesse-words span:hover { color: var(--or); }
.promesse-words .sep { background: var(--or); opacity: 0.7; }
.promesse-foot { color: var(--or-soft); }
/* — Sections — */
.section--warm { background: var(--field-soft); }
.section--encre { background: var(--field-deep); }
.section-num { color: var(--or); }
.section-title { color: var(--blanc-pur); }
.section-title em { color: var(--or); }
.section-aside { color: var(--or-soft); }
/* — Thématiques : cadre or — */
.themes-asym { gap: 6px; }
.theme-card { outline: 1px solid var(--line-or); outline-offset: -1px; }
.theme-card-num { color: var(--or-soft); }
.theme-card-num::after { background: var(--or-soft); }
.theme-card h3 { color: var(--blanc-pur); }
.theme-card-tagline { color: var(--or-soft); }
.theme-card-cta { color: var(--blanc); border-bottom-color: var(--or); }
.theme-card:hover .theme-card-cta { color: var(--or-soft); border-color: var(--or); }
@media (max-width: 700px) {
.theme-card { outline: none; border-bottom-color: var(--line-or); }
.theme-card h3 { color: var(--blanc-pur); }
.theme-card-num { color: var(--or); }
.theme-card-tagline { color: var(--or-soft); }
.theme-card-cta::after { color: var(--or); }
.themes-asym { border-top-color: var(--line-or); }
}
/* — Voix — */
.voix { background: var(--field-deep); }
.voix-eyebrow { color: var(--or); }
.voix-eyebrow::before { background: var(--or); }
.voix blockquote { color: var(--blanc-pur); }
.voix blockquote em { color: var(--or); }
.voix cite { color: var(--or-soft); }
.voix cite .role { color: rgba(247, 241, 230, 0.6); }
.voix-photo { box-shadow: 0 0 0 1px var(--or); }
/* — Lettre — */
.lettre {
background: var(--field-soft);
border-top-color: var(--line-or);
}
.lettre h2 { color: var(--blanc-pur); }
.lettre h2 em { color: var(--or); }
.lettre p { color: var(--or-soft); }
.lettre-form { border-bottom: 2px solid var(--or); }
.lettre-form input { color: var(--blanc); }
.lettre-form input::placeholder { color: rgba(247, 241, 230, 0.5); }
.lettre-form button { color: var(--or-soft); }
.lettre-form button:hover { color: var(--or); }
.lettre-foot { color: rgba(247, 241, 230, 0.55); }
/* — Signature : devise catalane — */
.signature {
background: var(--field);
border-top-color: var(--line-or);
}
.signature p { color: var(--or-soft); }
.signature p em { color: var(--or); }
.signature::after {
content: 'Sempre endavant';
display: block;
margin-top: var(--s-3);
font-family: var(--f-body);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--or);
}
/* — Page header (inner) — */
.page-header {
background: var(--field);
border-bottom-color: var(--line-or);
}
.page-header h1 { color: var(--blanc-pur); }
.page-header h1 em { color: var(--or); }
.page-header-eyebrow { color: var(--or-soft); }
.page-header-lead { color: var(--or-soft); }
.page-header-aside { border-left-color: var(--line-or); }
.page-header-aside dt { color: var(--or-soft); }
.page-header-aside dd { color: var(--blanc); }
.page-header-aside dd.lieu-city-dist { color: var(--or-soft); font-family: var(--f-body); font-weight: 500; }
.page-header-aside dd.lieu-season { color: var(--sang-vif); font-family: var(--f-edit); font-style: italic; font-weight: 500; }
.page-header-aside dd .sang { color: var(--or); }
/* — Cat cards : cadre or — */
.cat-card { border-top: 1px solid var(--or); }
.cat-card:hover { border-top: 2px solid var(--sang-vif); }
.cat-card-num { color: var(--or); }
.cat-card-label { color: var(--blanc-pur); }
.cat-card-meta { color: var(--or-soft); }
.cat-card-desc { color: rgba(247, 241, 230, 0.82); }
.cat-card-cta { color: var(--blanc); border-bottom-color: var(--or); }
.cat-card:hover .cat-card-cta { color: var(--or-soft); border-color: var(--or); }
/* — Citation — */
.quote-block blockquote { color: var(--blanc-pur); }
.quote-block blockquote em { color: var(--or); }
.quote-block cite { color: var(--or-soft); }
.section--encre .quote-block blockquote { color: var(--blanc-pur); }
.section--encre .quote-block blockquote em { color: var(--or); }
/* — Bottom-nav — */
.bottom-nav {
background: var(--field-deep, #4A0A12);
border-top-color: var(--line-or);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
}
.bottom-nav a { color: rgba(247, 241, 230, 0.7); }
.bottom-nav a.is-active { color: var(--or); }
.bottom-nav a.is-active::before { background: var(--or); }
/* — Surprise btn — */
.surprise-btn { background: var(--or); color: var(--field-deep); }
.surprise-btn::after { color: var(--field-deep); }
.surprise-btn:hover { background: var(--or-soft); }
.surprise-btn:hover::after { color: var(--field-deep); }
/* — Footer — */
.site-footer {
background: var(--field-deep);
border-top: 2px solid var(--or);
}
.footer-brand { color: var(--blanc-pur); }
.footer-tagline { color: var(--or-soft); }
.footer-col h4, .footer-col .footer-h { color: var(--or); }
.footer-col a { color: rgba(247, 241, 230, 0.75); }
.footer-col a:hover { color: var(--or-soft); }
.footer-bottom { border-top-color: var(--line-or); color: rgba(247, 241, 230, 0.6); }
.footer-bottom a:hover { color: var(--or-soft); }
/* — Boutons génériques — */
/* Boutons v2.1 « moderne-affirmé » — radius sm, tactile, anneau de focus or (charte buttons.md).
Base AUTO-SUFFISANTE : padding/bordure/typo/flex définis ici pour que tout .btn soit bien
proportionné, même hors contexte (corrige les boutons écrasés, ex. .lieu-actions, sprint #143). */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
padding: 0.68rem 1.15rem;
border: 1px solid var(--or); border-radius: var(--r-sm);
font-family: var(--f-body); font-weight: 600; font-size: 0.9rem; line-height: 1.15;
text-align: center; text-decoration: none; white-space: normal; text-wrap: balance; cursor: pointer;
background: var(--or); color: var(--field-deep); border-color: var(--or);
transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .25s var(--ease-out), color .25s, filter .25s;
}
.btn:hover { background: var(--or-soft); border-color: var(--or-soft); color: var(--field-deep); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-ghost { background: transparent; color: var(--or); border-color: var(--or); }
.btn-ghost:hover { background: var(--or); color: var(--field-deep); transform: translateY(-2px); box-shadow: var(--el-1); }
/* Bouton principal — dégradé or + arête lumineuse + ombre basse. Charte v2.1 §5 : JAMAIS de bouton sang. */
.btn-primary { background: var(--grad-or); color: var(--field-deep); border-color: transparent; font-weight: 700; box-shadow: var(--lit-edge), var(--el-1); }
.btn-primary:hover { background: var(--grad-or); color: var(--field-deep); border-color: transparent; transform: translateY(-2px); box-shadow: var(--lit-edge), var(--el-2); filter: brightness(1.04); }
.btn-primary:active { transform: translateY(1px); }
/* ----- v2.1 « moderne-affirmé » · profondeur des SURFACES (sprint #123) -----
S'applique aux cartes-surfaces. Les rangs éditoriaux (.cat-card) restent NETS (charte : la structure ne s'arrondit pas).
Profondeur = radius + ombre basse el-1 + (lueur d'angle où la surface s'y prête). */
.theme-card { border-radius: var(--r-md); box-shadow: var(--el-1); transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out); }
.theme-card:hover { box-shadow: var(--el-2); }
.lieu-rando .rando-card { border-radius: var(--r-md); box-shadow: var(--el-1); transition: box-shadow .25s var(--ease-out), border-color .25s; }
.lieu-rando .rando-card:hover { box-shadow: var(--el-2); border-left-color: var(--or-soft); }
.collections-tile { border-radius: var(--r-md); box-shadow: var(--el-1); overflow: hidden; transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out), border-color .25s; }
.collections-tile::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--grad-glow); border-radius: inherit; z-index: 0; }
.collections-tile > * { position: relative; z-index: 1; }
.collections-tile:hover { box-shadow: var(--el-2); border-color: var(--or); transform: translateY(-2px); }
/* ============================================================
HERO BENTO v2.1 (sprint #124) — remplace le carrousel par une
grille bento : tuile titre + Senyera graphique + trois-mots + méta.
Réf : design-system 04-patterns/bento.md + maquette atelier validée.
============================================================ */
.hero-bento {
display: grid;
gap: 14px;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(96px, auto);
margin-top: var(--s-4);
}
.hero-bento .t-title { grid-column: span 3; grid-row: span 2; }
.hero-bento .t-senyera { grid-column: span 1; grid-row: span 2; }
.hero-bento .t-words { grid-column: span 2; }
.hero-bento .t-meta { grid-column: span 2; }
/* La tuile : dégradé grenat (volume) + filet or + ombre el-1 + lueur d'angle */
.hero-bento .tile {
position: relative;
border: 1px solid var(--line-or);
border-radius: var(--r-lg);
background: var(--grad-grenat);
overflow: hidden;
box-shadow: var(--el-1);
}
.hero-bento .tile::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: var(--grad-glow);
}
.tile-pad {
padding: clamp(20px, 2.4vw, 34px);
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Tuile titre */
.hero-bento .hero-eyebrow { margin-bottom: var(--s-3); }
.hero-bento .hero-title { margin: 0 0 var(--s-3); }
.hero-bento .hero-sub { margin: 0 0 var(--s-4); max-width: 42ch; }
.hero-bento-cta { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hero-bento-cta .btn { padding: 0.85rem 1.4rem; font-size: 0.95rem; }
/* Desktop : les 3 CTA sur une seule ligne (#170). Compacts + sans retour ligne interne. */
@media (min-width: 901px) {
.hero-bento-cta { flex-wrap: nowrap; gap: 0.5rem; }
.hero-bento-cta .btn { padding: 0.72rem 0.85rem; font-size: 0.8rem; white-space: nowrap; text-wrap: nowrap; }
}
/* (#171) Boutons hero sur photo : ghost assombris pour la lisibilité, sans opacité totale. */
.hero-bento-cta .btn-ghost {
background: rgba(28, 6, 11, 0.55);
-webkit-backdrop-filter: blur(7px) saturate(120%);
backdrop-filter: blur(7px) saturate(120%);
border-color: rgba(203, 161, 53, 0.5);
color: var(--blanc);
}
.hero-bento-cta .btn-ghost:hover { background: var(--or); color: var(--field-deep); border-color: var(--or); }
/* Bouton « Destination au hasard » mis en surbrillance (halo doré + accent). */
.hero-bento-cta .hero-cta-hl {
background: linear-gradient(135deg, rgba(203,161,53,0.22), rgba(176,20,47,0.18));
border-color: var(--or);
color: var(--blanc-pur);
box-shadow: 0 0 0 1px rgba(203,161,53,0.45), 0 0 22px rgba(203,161,53,0.42);
}
.hero-bento-cta .hero-cta-hl span { color: var(--or); }
.hero-bento-cta .hero-cta-hl:hover { background: var(--or); color: var(--field-deep); }
.hero-bento-cta .hero-cta-hl:hover span { color: var(--field-deep); }
@media (prefers-reduced-motion: no-preference) {
.hero-bento-cta .hero-cta-hl { animation: heroHlPulse 3.2s ease-in-out infinite; }
@keyframes heroHlPulse {
0%, 100% { box-shadow: 0 0 0 1px rgba(203,161,53,0.40), 0 0 16px rgba(203,161,53,0.30); }
50% { box-shadow: 0 0 0 1px rgba(203,161,53,0.60), 0 0 28px rgba(203,161,53,0.55); }
}
}
/* Tuile méta */
.hero-bento .t-meta .tile-pad { justify-content: center; }
.hero-bento .hero-meta { margin: 0; border: none; }
/* Tuile trois-mots */
.hero-bento .t-words .promesse-words {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.6rem;
font-family: var(--f-display); font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.1;
color: var(--blanc-pur); margin: 0;
}
.hero-bento .t-words .promesse-words em,
.hero-bento .t-words .promesse-words [data-cat="Culture"] { font-family: var(--f-edit); font-style: italic; color: var(--or-soft); }
.hero-bento .t-words .promesse-foot { margin: var(--s-3) 0 0; font-size: 0.9rem; color: var(--ink-mute, rgba(247,241,230,0.6)); }
/* Senyera graphique — 4 barres verticales Fibonacci 1·2·3·5, dégradé or→sang */
.hero-senyera { display: flex; align-items: stretch; gap: 8px; height: 100%; min-height: 180px; }
.hero-senyera i { display: block; background: var(--grad-senyera); border-radius: 3px; }
.hero-senyera i:nth-child(1) { flex: 1; }
.hero-senyera i:nth-child(2) { flex: 2; }
.hero-senyera i:nth-child(3) { flex: 3; }
.hero-senyera i:nth-child(4) { flex: 5; }
@media (max-width: 780px) {
.hero-bento { grid-template-columns: repeat(2, 1fr); }
.hero-bento .t-title, .hero-bento .t-words, .hero-bento .t-meta { grid-column: span 2; }
.hero-bento .t-senyera { grid-column: span 2; grid-row: span 1; min-height: 120px; }
.hero-senyera { min-height: 88px; }
}
/* — Legal — */
.legal-page h1 { color: var(--blanc-pur); border-bottom-color: var(--line-or); }
.legal-page h2 { color: var(--or); }
.legal-page p { color: rgba(247, 241, 230, 0.85); }
.legal-page ul li { color: rgba(247, 241, 230, 0.85); }
.legal-page ul li::before { color: var(--or); }
.legal-page a { color: var(--or-soft); border-bottom-color: var(--or-soft); }
/* — Time cursor — */
.time-cursor { color: rgba(247, 241, 230, 0.4); mix-blend-mode: screen; }
/* ============================================================
22. SCEAU "VALEUR SÛRE" — sélection vérifiée (pré-sélection)
============================================================ */
.seal {
--d: 88px;
width: var(--d); height: var(--d);
border-radius: 50%;
border: 1.5px solid var(--or);
color: var(--or);
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
flex: 0 0 var(--d);
background: transparent;
}
.seal::before {
content: '';
position: absolute;
inset: 5px;
border-radius: 50%;
border: 0.5px solid var(--line-or);
}
.seal span {
font-family: var(--f-body);
font-size: 0.5rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1.3;
max-width: 64px;
}
/* Bandeau sélection : sceau + texte — section ACCENTUÉE, distincte (sprint #154) */
.guarantee {
display: flex;
align-items: center;
gap: var(--s-5);
max-width: 840px;
margin: var(--s-6) auto;
padding: clamp(1.5rem, 4vw, 2.6rem);
border: 1px solid var(--line-or);
border-radius: var(--r-lg, 24px);
background: var(--grad-grenat, linear-gradient(165deg, #7C1622 0%, #6B0F1A 60%, #4A0A12 100%));
box-shadow: var(--el-2, 0 16px 40px rgba(0,0,0,.4));
position: relative;
overflow: hidden;
scroll-margin-top: 96px;
}
.guarantee::after {
content: '';
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(120% 90% at 0% 0%, rgba(230,202,133,.16), transparent 55%);
}
.guarantee > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
.guarantee .seal { animation: sealPulse 4.5s ease-in-out infinite; }
.guarantee .seal::before { border-style: dashed; animation: sealSpin 26s linear infinite; }
.guarantee.is-visible { animation: guaranteeIn .7s var(--ease-out, ease) both; }
}
@keyframes sealPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(203,161,53,0); }
50% { box-shadow: 0 0 0 5px rgba(203,161,53,.10), 0 0 22px rgba(203,161,53,.28); }
}
@keyframes sealSpin { to { transform: rotate(360deg); } }
@keyframes guaranteeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.guarantee-text h3 {
font-family: var(--f-display);
font-size: clamp(1.4rem, 2.6vw, 2rem);
font-weight: 300;
color: var(--blanc-pur);
letter-spacing: -0.02em;
margin-bottom: 0.4rem;
}
.guarantee-text h3 em { color: var(--or); font-family: var(--f-edit); font-style: italic; }
.guarantee-text p { color: var(--or-soft); font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 600px) {
.guarantee { flex-direction: column; text-align: center; gap: var(--s-3); }
}
/* ============================================================
23. FIX CONTRASTE — tous textes en blanc/or
Remap tokens hérités palette claire vers variantes lisibles
sur fond grenat. Couvre tous les inline styles.
============================================================ */
:root {
--encre: #F7F1E6; /* legacy text → blanc chaulé */
--encre-soft: rgba(247, 241, 230, 0.85); /* texte secondaire */
--encre-mute: rgba(247, 241, 230, 0.6); /* labels, captions */
--terre: #E6CA85; /* accent italique → or doux */
--ink: #F7F1E6;
--ink-soft: rgba(247, 241, 230, 0.85);
--ink-mute: rgba(247, 241, 230, 0.6);
--blanc-warm: var(--field-soft); /* section warm → grenat clair */
--blanc-deep: var(--field-deep);
--paper: var(--field);
--paper-warm: var(--field-soft);
--paper-deep: var(--field-deep);
--line: var(--line-or); /* lignes → or translucide */
}
/* Filets génériques : or */
hr, .divider { background: var(--line-or); border-color: var(--line-or); }
/* Sang legacy (inline italiques accent) → or pour rester lisible sur grenat.
Punch rouge vif disponible via --sang-vif. */
:root {
--sang: var(--or);
--sang-deep: var(--or-deep);
}
/* ============================================================
24. EXPLORER — annuaire 3100+ adresses
============================================================ */
.explorer { padding-bottom: var(--s-7); }
.explorer-toolbar {
position: sticky;
top: 56px;
z-index: 40;
background: var(--field);
border-bottom: 1px solid var(--line-or);
padding: 0.7rem 0;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.explorer-toolbar-inner {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 2.5fr) auto;
gap: var(--s-3);
align-items: center;
}
/* Search */
.explorer-search {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0 0.9rem;
background: rgba(247, 241, 230, 0.06);
border: 1px solid var(--line-or);
border-radius: 999px;
min-height: 44px;
color: var(--or-soft);
transition: border-color 0.25s, background 0.25s;
}
.explorer-search:focus-within {
border-color: var(--or);
background: rgba(247, 241, 230, 0.1);
}
.explorer-search svg { width: 16px; height: 16px; flex: 0 0 16px; }
.explorer-search input {
flex: 1;
background: transparent;
border: 0;
outline: 0;
color: var(--blanc);
font: inherit;
font-size: 0.95rem;
padding: 0.6rem 0;
min-width: 0;
}
.explorer-search input::placeholder { color: rgba(247, 241, 230, 0.45); }
.explorer-clear {
background: none;
border: 0;
color: var(--or-soft);
font-size: 0.9rem;
padding: 0.2rem 0.4rem;
display: none;
min-width: 28px;
}
/* Filtres pilule — scroll horizontal mobile avec fade right indicator */
.explorer-filters {
display: flex;
gap: 0.4rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* Fade gradient right edge → indique scroll possible */
mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
-webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
scroll-snap-type: x proximity;
}
.explorer-filters::-webkit-scrollbar { display: none; }
.explorer-filters button { scroll-snap-align: start; }
.explorer-filters button {
flex: 0 0 auto;
padding: 0.45rem 0.9rem;
font-family: var(--f-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--or-soft);
background: transparent;
border: 1px solid var(--line-or);
border-radius: 999px;
min-height: 36px;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s var(--ease-out);
}
.explorer-filters button:hover { color: var(--or); border-color: var(--or); }
.explorer-filters button.is-active {
background: var(--or);
color: var(--field-deep);
border-color: var(--or);
}
/* Meta + tri */
.explorer-meta {
display: flex;
align-items: center;
gap: 0.7rem;
color: var(--or-soft);
font-family: var(--f-body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.explorer-sort {
background: transparent;
border: 1px solid var(--line-or);
color: var(--or-soft);
padding: 0.45rem 0.7rem;
border-radius: 999px;
min-height: 36px;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font: inherit;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
}
.explorer-sort:hover { color: var(--or); border-color: var(--or); }
.explorer-sort svg { width: 12px; height: 12px; }
@media (max-width: 900px) {
.explorer-toolbar-inner {
grid-template-columns: 1fr;
gap: 0.6rem;
}
.explorer-meta { justify-content: space-between; }
/* Auto-hide au scroll descendant : la toolbar 3 rangées + header + bottom-nav
mangeaient ~37 % du viewport. Elle revient dès le premier scroll vers le haut. */
.explorer-toolbar {
transition: transform 0.32s var(--ease-inout, cubic-bezier(0.83, 0, 0.17, 1));
}
html.is-scrolling-down .explorer-toolbar {
transform: translateY(calc(-100% - 57px));
}
}
/* Liste — grid responsive avec gap visible entre cards */
.explorer-list {
margin-top: var(--s-4);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: clamp(0.8rem, 1.4vw, 1.2rem); /* gap explicite cards aération */
border-top: 1px solid var(--line-or);
padding-top: clamp(0.8rem, 1.4vw, 1.2rem);
}
/* Card adresse — aération + padding interne enveloppant */
.place-card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: clamp(0.7rem, 1.6vw, 1rem);
padding: clamp(0.85rem, 1.6vw, 1.15rem); /* padding sur 4 côtés, plus aéré */
align-items: start;
border: 1px solid rgba(203,161,53,0.18);
border-radius: 10px; /* arrondi : matérialise card individuelle */
background: rgba(247, 241, 230, 0.02);
color: var(--blanc);
transition: background 0.2s, border-color 0.2s, transform 0.2s;
text-decoration: none;
min-height: 110px;
}
.place-card:hover {
background: rgba(203,161,53,0.06);
border-color: var(--or-soft);
transform: translateY(-1px);
}
.place-icon {
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid var(--line-or);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
color: var(--or);
flex: 0 0 44px;
background: rgba(203, 161, 53, 0.08);
}
.place-icon[data-u="gastronomie"] { color: var(--or); }
.place-icon[data-u="nature"] { color: var(--or-soft); }
.place-icon[data-u="culture"] { color: var(--or); }
.place-icon[data-u="hebergement"] { color: var(--or-soft); }
.place-icon svg { width: 22px; height: 22px; }
.place-body { min-width: 0; }
.place-head {
display: flex;
align-items: baseline;
gap: 0.6rem;
flex-wrap: wrap;
margin-bottom: 0.4rem;
row-gap: 0.4rem;
}
.place-name {
font-family: var(--f-display);
font-size: clamp(1rem, 1.4vw, 1.15rem);
font-weight: 500;
color: var(--blanc-pur);
letter-spacing: -0.005em;
line-height: 1.3;
/* Cap 2 lignes pour titres longs (ex: "CENTRE D'INTERPRETATION DE L'ARCHITECTURE...") */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
hyphens: auto;
margin-right: 0.4em;
flex: 1 1 auto;
min-width: 60%;
}
.place-univ {
font-family: var(--f-body);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--or);
padding: 0.15rem 0.55rem;
border: 1px solid var(--line-or);
border-radius: 999px;
flex: 0 0 auto;
}
.place-meta {
font-family: var(--f-body);
font-size: 0.78rem;
color: var(--or-soft);
letter-spacing: 0.04em;
display: block;
margin-bottom: 0.5rem;
line-height: 1.5;
}
.place-desc {
font-family: var(--f-body);
font-size: 0.88rem;
color: rgba(247, 241, 230, 0.72);
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 0.2rem;
}
.place-desc .muted { color: rgba(247, 241, 230, 0.35); }
.place-cta {
display: flex;
flex-direction: column;
gap: 0.4rem;
align-self: center;
}
.place-fav, .place-map {
width: 44px; height: 44px;
border: 1px solid var(--line-or);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--or-soft);
font-size: 1rem;
background: transparent;
cursor: pointer;
text-decoration: none;
transition: all 0.2s;
}
.place-fav:active, .place-map:active { transform: scale(0.92); }
.place-fav:hover, .place-map:hover { color: var(--or); border-color: var(--or); }
.place-fav.is-saved {
background: var(--sang-vif);
border-color: var(--sang-vif);
color: var(--blanc);
}
@media (max-width: 900px) {
.explorer-list { grid-template-columns: 1fr; }
.place-card { padding: var(--s-3) 0; }
}
/* Loading + load more */
.explorer-loading {
grid-column: 1 / -1;
padding: var(--s-6) 0;
text-align: center;
color: var(--or-soft);
}
.explorer-pulse {
width: 32px; height: 32px;
margin: 0 auto var(--s-3);
border: 2px solid var(--line-or);
border-top-color: var(--or);
border-radius: 50%;
animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.explorer-loadmore {
text-align: center;
padding: var(--s-5) 0;
}
#explorerMore {
background: transparent;
color: var(--or);
border: 1px solid var(--or);
padding: 0.85rem 2rem;
border-radius: 999px;
font-family: var(--f-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
min-height: 44px;
}
#explorerMore:hover { background: var(--or); color: var(--field-deep); }
.explorer-error {
grid-column: 1 / -1;
text-align: center;
padding: clamp(2rem, 5vw, 3.5rem) 1rem;
color: var(--or-soft);
background: rgba(203,161,53,0.04);
border: 1px dashed var(--or-soft);
border-radius: 12px;
margin: var(--s-3) 0;
}
.explorer-error p { margin: 0 0 0.5rem; line-height: 1.5; }
.explorer-error strong { color: var(--blanc); font-family: var(--f-display); font-size: 1.1rem; }
.explorer-error a { color: var(--or); border-bottom: 1px solid var(--or); }
.explorer-retry {
background: var(--or, #CBA135);
color: var(--field-deep, #4A0A12);
border: none;
padding: 0.55rem 1.1rem;
border-radius: 6px;
font-family: var(--f-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
margin-top: 0.4rem;
transition: opacity 0.2s;
min-height: 44px;
}
.explorer-retry:hover { opacity: 0.85; }
/* ============================================================
25. EXPLORER — scope toggle + sceau "valeur sûre" inline
============================================================ */
.explorer-scope {
display: inline-flex;
align-items: center;
gap: 0.45rem;
background: var(--or);
color: var(--field-deep);
border: 1px solid var(--or);
padding: 0.45rem 0.9rem;
border-radius: 999px;
font-family: var(--f-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
min-height: 36px;
transition: all 0.2s var(--ease-out);
}
.explorer-scope[data-scope="all"] {
background: transparent;
color: var(--or-soft);
border-color: var(--line-or);
}
.explorer-scope:hover { transform: translateY(-1px); }
.explorer-scope .seal-dot { font-size: 0.9rem; line-height: 1; }
.explorer-scope[data-scope="all"] .seal-dot { opacity: 0.4; }
/* Sceau inline sur place-card (approved) */
.place-seal {
display: inline-block;
margin-left: 0.4em;
color: var(--or);
font-family: var(--f-edit);
font-style: italic;
font-size: 0.9em;
vertical-align: middle;
line-height: 1;
}
.place-card.is-approved {
background: linear-gradient(180deg, rgba(203,161,53,0.05), transparent);
border-left: 2px solid var(--or);
padding-left: var(--s-3);
margin-left: -2px;
}
.place-card.is-approved .place-univ { border-color: var(--or); color: var(--or); }
/* Déjà visité — discret : nom légèrement atténué + dot or */
.place-card.is-seen .place-name { opacity: 0.72; }
.place-card.is-seen .place-name::after {
content: '·';
display: inline-block;
margin-left: 0.45em;
color: var(--or);
font-weight: 700;
opacity: 0.85;
transform: translateY(-0.1em);
font-size: 1.3em;
line-height: 0;
}
.place-card.is-seen:hover .place-name { opacity: 1; }
.place-card.is-seen .place-icon { opacity: 0.7; }
/* Search highlight matched terms */
.place-card mark {
background: rgba(203,161,53,0.25);
color: var(--or);
padding: 0 0.1em;
border-radius: 2px;
font-weight: 600;
}
/* ============================================================
26. CARNET — vue dédiée localStorage + partage + impression
============================================================ */
.carnet { padding-bottom: var(--s-7); }
.carnet-toolbar {
background: var(--field);
border-bottom: 1px solid var(--line-or);
padding: 0.7rem 0;
position: sticky;
top: 56px;
z-index: 40;
}
.carnet-toolbar-inner {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--s-3);
align-items: center;
}
.carnet-tabs {
display: flex;
gap: 0.4rem;
overflow-x: auto;
scrollbar-width: none;
}
.carnet-tabs::-webkit-scrollbar { display: none; }
.carnet-tabs button {
flex: 0 0 auto;
padding: 0.45rem 0.9rem;
font-family: var(--f-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--or-soft);
background: transparent;
border: 1px solid var(--line-or);
border-radius: 999px;
min-height: 36px;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s var(--ease-out);
}
.carnet-tabs button:hover { border-color: var(--or); color: var(--or); }
.carnet-tabs button.is-active {
background: var(--or);
color: var(--field-deep);
border-color: var(--or);
}
.carnet-actions { display: flex; gap: 0.4rem; }
.carnet-action {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: transparent;
border: 1px solid var(--line-or);
color: var(--or-soft);
padding: 0.45rem 0.8rem;
border-radius: 999px;
min-height: 36px;
font-family: var(--f-body);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
}
.carnet-action svg { width: 14px; height: 14px; }
.carnet-action:hover { border-color: var(--or); color: var(--or); }
@media (max-width: 700px) {
.carnet-toolbar-inner { grid-template-columns: 1fr; }
.carnet-action span, .carnet-action { padding: 0.4rem 0.7rem; }
}
.carnet-list { padding-top: var(--s-4); }
.carnet-group + .carnet-group { margin-top: var(--s-5); }
.carnet-group-head {
display: flex;
align-items: baseline;
gap: 0.8rem;
padding-bottom: 0.7rem;
border-bottom: 1px solid var(--line-or);
margin-bottom: var(--s-3);
}
.carnet-group-icon { font-size: 1.1rem; color: var(--or); }
.carnet-group-head h2 {
font-family: var(--f-display);
font-size: clamp(1.4rem, 3vw, 1.9rem);
font-weight: 400;
color: var(--blanc-pur);
letter-spacing: -0.02em;
margin: 0;
}
.carnet-group-count {
margin-left: auto;
font-family: var(--f-body);
font-size: 0.7rem;
color: var(--or-soft);
letter-spacing: 0.16em;
text-transform: uppercase;
border: 1px solid var(--line-or);
padding: 0.25rem 0.6rem;
border-radius: 999px;
}
.carnet-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0; }
.carnet-item {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.8rem;
padding: 0.8rem 0;
border-bottom: 1px solid var(--line-or);
align-items: start;
}
.carnet-item-name {
font-family: var(--f-display);
font-size: 1.05rem;
font-weight: 500;
color: var(--blanc-pur);
letter-spacing: -0.01em;
line-height: 1.25;
margin-bottom: 0.2rem;
}
.carnet-item-meta {
font-family: var(--f-body);
font-size: 0.78rem;
color: var(--or-soft);
letter-spacing: 0.04em;
}
.carnet-item-desc {
font-size: 0.85rem;
color: rgba(247, 241, 230, 0.65);
line-height: 1.45;
margin-top: 0.3rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Événements au carnet (evt-*, chantier agenda C) */
.carnet-item-badge {
display: inline-block;
margin-left: 0.35rem;
padding: 0.08rem 0.5rem;
border: 1px solid var(--line-or);
border-radius: 999px;
font-family: var(--f-body);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--or);
vertical-align: 0.15em;
}
.carnet-item-date { color: var(--sang-vif); font-weight: 600; }
.carnet-item--past { opacity: 0.55; }
.carnet-item--past .carnet-item-date { color: var(--or-soft); }
.carnet-item-actions { display: flex; gap: 0.3rem; align-self: center; }
.carnet-item-note,
.carnet-item-map,
.carnet-item-remove {
width: 34px; height: 34px;
border: 1px solid var(--line-or);
border-radius: 50%;
background: transparent;
color: var(--or-soft);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.2s;
}
.carnet-item-map:hover { color: var(--or); border-color: var(--or); }
.carnet-item-remove:hover {
color: var(--blanc);
background: var(--sang-vif);
border-color: var(--sang-vif);
}
.carnet-item-note:hover { color: var(--or); border-color: var(--or); }
.carnet-item-note.has-note { color: var(--or); border-color: var(--or); background: rgba(203,161,53,0.08); }
.carnet-item-usernote {
grid-column: 1 / -1;
margin-top: var(--s-2);
padding: var(--s-2);
background: rgba(203,161,53,0.04);
border: 1px dashed var(--or-soft);
border-radius: 4px;
}
.carnet-item-usernote textarea {
width: 100%;
background: transparent;
color: var(--blanc);
border: none;
outline: none;
resize: vertical;
font-family: var(--f-edit);
font-style: italic;
font-size: 0.92rem;
line-height: 1.45;
padding: 0.3rem;
min-height: 56px;
}
.carnet-item-usernote textarea::placeholder { color: var(--or-soft); opacity: 0.55; }
@media print {
.carnet-item-usernote { background: transparent; border-color: #ccc; }
.carnet-item-usernote textarea { color: #222; }
}
.carnet-empty {
text-align: center;
padding: var(--s-7) 0;
max-width: 480px;
margin: 0 auto;
}
.carnet-empty-title {
font-family: var(--f-display);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 300;
color: var(--blanc);
margin-bottom: var(--s-3);
}
.carnet-empty-title em { color: var(--or); font-family: var(--f-edit); font-style: italic; }
.carnet-empty-text {
color: var(--or-soft);
margin-bottom: var(--s-4);
}
.carnet-empty-text a {
color: var(--or);
border-bottom: 1px solid var(--or);
}
.carnet-loading {
text-align: center;
padding: var(--s-6) 0;
color: var(--or-soft);
}
.carnet-error {
text-align: center;
padding: var(--s-6) 0;
color: var(--or-soft);
}
/* Import banner (vue partagée) */
.import-banner {
background: rgba(203, 161, 53, 0.12);
border-top: 1px solid var(--or);
border-bottom: 1px solid var(--or);
padding: var(--s-3) var(--pad-x);
text-align: center;
color: var(--blanc);
}
.import-banner p {
margin-bottom: var(--s-3);
color: var(--or-soft);
}
.import-banner em { color: var(--or); font-family: var(--f-edit); font-style: italic; }
.import-banner div { display: inline-flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
/* Share modal */
.share-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.share-modal[hidden] { display: none; }
.share-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(14, 6, 8, 0.7);
backdrop-filter: blur(6px);
}
.share-modal-card {
position: relative;
background: var(--field-deep);
border: 1px solid var(--or);
border-radius: 12px;
padding: var(--s-4);
max-width: 480px;
width: 100%;
color: var(--blanc);
}
.share-modal-card h3 {
font-family: var(--f-display);
font-size: 1.5rem;
font-weight: 400;
margin-bottom: 0.6rem;
color: var(--blanc-pur);
}
.share-modal-card p {
color: var(--or-soft);
font-size: 0.92rem;
margin-bottom: var(--s-3);
}
.share-modal-close {
position: absolute;
top: 0.6rem; right: 0.6rem;
width: 32px; height: 32px;
background: transparent;
border: 0;
color: var(--or-soft);
font-size: 1rem;
cursor: pointer;
border-radius: 50%;
}
.share-modal-close:hover { background: rgba(247, 241, 230, 0.08); }
.share-url-row {
display: flex;
gap: 0.4rem;
margin-bottom: var(--s-3);
}
.share-url-row input {
flex: 1;
background: rgba(247, 241, 230, 0.06);
border: 1px solid var(--line-or);
color: var(--blanc);
padding: 0.6rem 0.8rem;
border-radius: 8px;
font-family: var(--f-body);
font-size: 0.78rem;
outline: 0;
min-width: 0;
}
.share-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.share-app {
flex: 1;
text-align: center;
padding: 0.7rem 0.8rem;
background: transparent;
border: 1px solid var(--line-or);
color: var(--or-soft);
border-radius: 8px;
text-decoration: none;
font-family: var(--f-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
}
.share-app:hover { color: var(--or); border-color: var(--or); }
/* Print mode — Mode Livre */
.print-only { display: none; }
@media print {
@page {
size: A5;
margin: 18mm 14mm 22mm;
}
body {
background: #fff !important;
color: #000 !important;
font-family: Georgia, serif !important;
padding: 0 !important;
}
/* Hide chrome */
.site-header,
.senyera,
.bottom-nav,
.site-footer,
.carnet-toolbar,
.carnet-actions,
.page-header-aside,
.no-print,
.install-banner,
.time-cursor,
.share-modal,
.import-banner,
.carnet-item-actions { display: none !important; }
.site-main { padding: 0 !important; }
.page-header {
padding: 0 0 1rem !important;
border-bottom: 2px solid #000 !important;
background: #fff !important;
}
.page-header h1 { color: #000 !important; font-size: 22pt !important; }
.page-header h1 em { color: #000 !important; font-style: italic; }
.page-header-lead { color: #444 !important; font-size: 10pt !important; }
.page-header-eyebrow { color: #666 !important; }
.print-only { display: block !important; }
.print-header {
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #999;
}
.print-header h1, .print-header .print-title { font-size: 16pt; margin: 0; font-family: Georgia, serif; font-weight: 600; }
.print-header p { font-size: 9pt; color: #666; margin: 0.2rem 0; }
.carnet-group {
page-break-inside: avoid;
margin-top: 1rem !important;
}
.carnet-group-head {
border-bottom: 1px solid #000 !important;
padding-bottom: 0.3rem;
margin-bottom: 0.5rem;
}
.carnet-group-head h2 { color: #000 !important; font-size: 14pt !important; }
.carnet-group-icon { color: #000 !important; }
.carnet-group-count { border-color: #000 !important; color: #000 !important; background: transparent !important; }
.carnet-items { display: block !important; }
.carnet-item {
page-break-inside: avoid;
border-bottom-color: #ccc !important;
padding: 0.4rem 0 !important;
display: block !important;
}
.carnet-item-name { color: #000 !important; font-size: 11pt !important; font-family: Georgia, serif !important; }
.carnet-item-meta { color: #444 !important; font-size: 9pt !important; }
.carnet-item-desc { color: #333 !important; font-size: 9pt !important; -webkit-line-clamp: unset !important; overflow: visible !important; display: block !important; }
.carnet-empty { display: none; }
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 7pt;
color: #666;
}
}
/* ============================================================
27. EXPLORER — vue carte Leaflet + markers ÉPYRIA
============================================================ */
.explorer-view {
display: inline-flex;
gap: 2px;
background: rgba(247, 241, 230, 0.08);
padding: 3px;
border-radius: 999px;
border: 1px solid var(--line-or);
}
.explorer-view button {
background: transparent;
border: 0;
color: var(--or-soft);
width: 32px; height: 32px;
border-radius: 999px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.2s var(--ease-out);
}
.explorer-view button:hover { color: var(--or); }
.explorer-view button.is-active {
background: var(--or);
color: var(--field-deep);
}
.explorer-view svg { width: 16px; height: 16px; }
/* Carte container */
.explorer-map {
position: relative;
width: 100%;
height: clamp(420px, 70vh, 720px);
margin-top: var(--s-4);
border: 1px solid var(--line-or);
overflow: hidden;
background: var(--field-deep);
}
.explorer-map .leaflet-container {
width: 100%; height: 100%;
font-family: var(--f-body);
background: var(--field-deep);
}
/* Locate button */
.map-locate {
position: absolute;
top: 12px; right: 12px;
width: 44px; height: 44px;
background: var(--field-deep);
border: 1px solid var(--or);
color: var(--or);
border-radius: 50%;
cursor: pointer;
z-index: 1000;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
transition: all 0.2s;
}
.map-locate:hover { background: var(--or); color: var(--field-deep); }
.map-locate svg { width: 18px; height: 18px; }
.map-locate.is-loading svg { animation: spin 0.9s linear infinite; }
/* Marker épingles */
.ep-pin-wrap { background: transparent !important; border: 0 !important; }
.ep-pin {
width: 30px; height: 30px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #0E1A1F;
font-size: 14px;
position: relative;
}
/* Icône de type (SVG) dans le marqueur — trait blanc lisible sur fond univers */
.ep-pin svg { width: 17px; height: 17px; color: #fff; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.ep-pin-seal {
position: absolute;
top: -4px; right: -4px;
width: 12px; height: 12px;
background: #FFF;
color: #B0142F;
font-size: 8px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-style: normal;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/* Cluster (regroupement) Sang i Or — pastille grenat + compteur, anneau or (sprint #150) */
.ep-cluster-wrap { background: transparent !important; border: 0 !important; }
.ep-cluster {
width: 100%; height: 100%;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #7C1622, #4A0A12);
border: 2px solid var(--or);
box-shadow: 0 0 0 4px rgba(203,161,53,.18), 0 3px 10px rgba(0,0,0,.45);
display: flex; align-items: center; justify-content: center;
color: #fff; font-family: var(--f-display, sans-serif); font-weight: 600; font-size: 15px;
transition: transform .15s ease;
}
.ep-cluster-wrap:hover .ep-cluster { transform: scale(1.08); }
/* Tooltip ventilation par type au survol d'un cluster */
.leaflet-tooltip.ep-cluster-tooltip {
background: var(--field-deep, #4A0A12);
border: 1px solid var(--or);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,.5);
padding: 0; color: var(--blanc, #F7F1E6);
font-family: var(--f-body, sans-serif);
}
.leaflet-tooltip.ep-cluster-tooltip::before { border-top-color: var(--or); }
.ep-cluster-tip { padding: .6rem .8rem; min-width: 170px; }
.ep-cluster-tip > strong { display: block; font-family: var(--f-display, sans-serif); font-weight: 600; font-size: .9rem; color: #fff; margin-bottom: .4rem; }
.ep-cluster-tip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.ep-cluster-tip li { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: rgba(247,241,230,.9); }
.ep-cluster-tip .cl-ic { width: 16px; height: 16px; flex: 0 0 16px; color: var(--or-soft, #E6CA85); }
.ep-cluster-tip .cl-ic svg { width: 16px; height: 16px; }
.ep-cluster-tip .cl-lbl { flex: 1; }
.ep-cluster-tip li b { color: var(--or); font-weight: 700; }
.ep-cluster-tip em { display: block; margin-top: .45rem; font-size: .7rem; color: var(--or-soft, #E6CA85); font-style: italic; }
/* Popup ÉPYRIA */
.leaflet-popup-content-wrapper {
background: var(--field-deep) !important;
border: 1px solid var(--or) !important;
border-radius: 6px !important;
color: var(--blanc) !important;
padding: 0 !important;
}
.leaflet-popup-content {
margin: 0.8rem 0.9rem !important;
color: var(--blanc) !important;
line-height: 1.4 !important;
}
.leaflet-popup-tip {
background: var(--field-deep) !important;
border: 1px solid var(--or) !important;
}
.leaflet-popup-close-button {
color: var(--or-soft) !important;
font-size: 18px !important;
padding: 4px 6px !important;
}
.leaflet-control-attribution {
background: rgba(74, 10, 18, 0.85) !important;
color: var(--or-soft) !important;
font-size: 9px !important;
padding: 2px 6px !important;
}
.leaflet-control-attribution a { color: var(--or) !important; }
.ep-pop h4 {
font-family: var(--f-display);
font-size: 1rem;
font-weight: 500;
color: var(--blanc-pur);
margin-bottom: 0.3rem;
letter-spacing: -0.01em;
}
.ep-pop-seal {
display: inline-block;
font-family: var(--f-body);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--or);
margin-bottom: 0.4rem;
padding: 0.15rem 0.5rem;
border: 1px solid var(--or);
border-radius: 999px;
}
.ep-pop-meta {
font-size: 0.7rem;
color: var(--or-soft);
letter-spacing: 0.04em;
margin-bottom: 0.4rem;
}
.ep-pop-desc {
font-size: 0.78rem;
color: rgba(247,241,230,0.7);
line-height: 1.5;
margin-bottom: 0.5rem;
}
.ep-pop-actions {
display: flex;
gap: 0.5rem;
margin-top: 0.4rem;
padding-top: 0.5rem;
border-top: 1px solid var(--line-or);
}
.ep-pop-actions a,
.ep-pop-actions button {
flex: 1;
text-align: center;
background: transparent;
border: 1px solid var(--line-or);
color: var(--or-soft);
padding: 0.4rem 0.5rem;
border-radius: 999px;
font-family: var(--f-body);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
.ep-pop-actions a:hover,
.ep-pop-actions button:hover { color: var(--or); border-color: var(--or); }
/* Mobile : remove zoom controls on tiny screens to save space */
@media (max-width: 500px) {
.leaflet-control-zoom { display: none; }
.explorer-map { height: clamp(420px, 75vh, 700px); }
}
/* Fix : [hidden] doit gagner sur display: grid/flex */
[hidden] { display: none !important; }
/* ============================================================
28. PAGE LIEU — article individuel POI
============================================================ */
.lieu { padding: var(--s-5) 0 var(--s-7); }
.lieu-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: var(--s-5);
padding-bottom: var(--s-4);
border-bottom: 1px solid var(--line-or);
}
.lieu-note {
background: rgba(203, 161, 53, 0.08);
border-left: 3px solid var(--or);
padding: var(--s-4);
margin-bottom: var(--s-5);
border-radius: 0 6px 6px 0;
}
.lieu-note-label {
display: block;
font-family: var(--f-body);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--or);
margin-bottom: var(--s-3);
}
.lieu-note blockquote {
font-family: var(--f-edit);
font-style: italic;
font-size: clamp(1.1rem, 1.7vw, 1.3rem);
color: var(--blanc);
line-height: 1.5;
margin-bottom: var(--s-3);
}
.lieu-note cite {
font-family: var(--f-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--or-soft);
font-style: normal;
}
/* Météo Open-Meteo (lazy widget lieu) */
.lieu-weather-box {
margin: var(--s-3) 0 var(--s-4);
padding: var(--s-4);
background: rgba(27,79,88,0.08);
border: 1px solid rgba(27,79,88,0.4);
border-radius: 6px;
}
.wx-loading, .wx-error {
text-align: center;
color: var(--or-soft);
font-family: var(--f-body);
font-size: 0.85rem;
margin: 0;
}
.wx-error { color: var(--sang-vif); }
.wx-current {
display: grid;
grid-template-columns: auto auto 1fr;
grid-template-areas: 'icon temp label' 'icon meta meta';
gap: 0.4rem 0.8rem;
align-items: center;
}
.wx-icon { grid-area: icon; font-size: 2.4rem; line-height: 1; }
.wx-temp {
grid-area: temp;
font-family: var(--f-display);
font-size: 2rem;
font-weight: 300;
color: var(--blanc-pur);
line-height: 1;
}
.wx-label { grid-area: label; color: var(--or-soft); font-size: 0.85rem; }
.wx-meta { grid-area: meta; color: var(--blanc-soft, rgba(247,241,230,0.6)); font-size: 0.72rem; letter-spacing: 0.04em; }
.wx-daily {
list-style: none;
padding: 0;
margin: var(--s-3) 0 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
border-top: 1px dashed var(--or-soft);
padding-top: var(--s-3);
}
.wx-daily li {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
font-family: var(--f-body);
font-size: 0.78rem;
color: var(--blanc);
}
.wx-day { color: var(--or-soft); font-size: 0.68rem; text-transform: capitalize; letter-spacing: 0.05em; }
.wx-d-icon { font-size: 1.4rem; line-height: 1; }
.wx-d-temp { color: var(--blanc); font-size: 0.74rem; }
/* Graphique de tendance des températures (sprint #151) — remplace le trait pointillé */
.wx-chart { display: block; width: 100%; height: auto; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line-or); }
.wx-c-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wx-c-line--max { stroke: var(--or); }
.wx-c-line--min { stroke: rgba(247,241,230,.32); stroke-width: 1.5; stroke-dasharray: 3 3; }
.wx-c-dot { fill: var(--or); }
.wx-c-day { fill: var(--or-soft); font: 600 8.5px var(--f-body); text-transform: capitalize; }
.wx-c-ico { font-size: 12px; fill: var(--blanc); }
.wx-c-max { fill: var(--blanc-pur, #fff); font: 700 10px var(--f-body); }
.wx-c-min { fill: rgba(247,241,230,.55); font: 500 9px var(--f-body); }
.wx-source {
margin: var(--s-2) 0 0;
font-size: 0.65rem;
color: var(--or-soft);
text-align: right;
font-family: var(--f-body);
opacity: 0.6;
}
@media print { .lieu-weather-box, .lieu-weather { display: none !important; } }
/* Tags éditoriaux V.R. sur lieu approuvé */
ul.lieu-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: var(--s-3) 0 var(--s-2);
padding: 0;
list-style: none;
}
.lieu-tag {
display: inline-flex;
align-items: center;
padding: 0.3rem 0.7rem;
background: rgba(203,161,53,0.08);
border: 1px solid var(--or-soft);
color: var(--or);
border-radius: 999px;
font-family: var(--f-body);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.04em;
line-height: 1.2;
}
.lieu-tag[data-tag="vegan"], .lieu-tag[data-tag="bio"] { color: var(--or); border-color: var(--or); }
.lieu-tag[data-tag="pmr"], .lieu-tag[data-tag="chien-ok"], .lieu-tag[data-tag="enfants"] { background: rgba(247,241,230,0.06); color: var(--blanc); border-color: rgba(247,241,230,0.3); }
.lieu-tag[data-tag="pepite"] { background: var(--sang); border-color: var(--sang-vif); color: var(--blanc-pur); }
/* Lieu admin bar — visible uniquement si is_admin() */
.lieu-admin-bar {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
padding: 0.5rem 0.9rem;
background: rgba(203,161,53,0.05);
border: 1px dashed var(--or-soft);
border-radius: 6px;
margin: var(--s-4) 0 0;
font-family: var(--f-body);
font-size: 0.75rem;
}
.lieu-admin-bar-label { color: var(--or); letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; font-size: 0.68rem; }
.lieu-admin-link {
color: var(--blanc);
text-decoration: none;
border-bottom: 1px solid var(--or-soft);
padding-bottom: 1px;
transition: color 0.2s, border-color 0.2s;
}
.lieu-admin-link:hover { color: var(--or); border-color: var(--or); }
.lieu-admin-bar-id { margin-left: auto; color: var(--or-soft); font-size: 0.72rem; opacity: 0.7; }
@media print { .lieu-admin-bar { display: none !important; } }
.lieu-section { margin: var(--s-5) 0; }
.lieu-section h2 {
font-family: var(--f-display);
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 400;
color: var(--blanc-pur);
margin-bottom: var(--s-3);
letter-spacing: -0.015em;
padding-bottom: 0.4rem;
border-bottom: 1px solid var(--line-or);
}
.lieu-section p {
color: rgba(247, 241, 230, 0.88);
line-height: 1.7;
font-size: 1.02rem;
max-width: 65ch;
}
.lieu-meta {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.6rem 1.4rem;
font-family: var(--f-body);
}
.lieu-meta dt {
color: var(--or-soft);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
padding-top: 0.15rem;
}
.lieu-meta dd { color: var(--blanc); font-size: 0.95rem; }
.lieu-meta dd.mono { font-family: var(--f-mono, monospace); font-size: 0.85rem; color: var(--or-soft); }
.lieu-icon { color: var(--or); margin-right: 0.3rem; }
/* Sprint #113 : section randonnée (lieu.php) — données Visorando/Komoot/Altituderando */
.lieu-rando .rando-card {
border: 1px solid var(--line-or);
border-left: 3px solid var(--or);
padding: var(--s-3);
margin-bottom: var(--s-3);
background: rgba(203, 161, 53, 0.04);
}
.rando-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-2);
flex-wrap: wrap;
margin-bottom: var(--s-3);
}
.rando-card-title {
font-family: var(--f-display);
font-size: 1.15rem;
font-weight: 500;
color: var(--blanc-pur);
margin: 0;
letter-spacing: -0.01em;
}
.rando-badge {
display: inline-block;
padding: 0.18rem 0.6rem;
font-family: var(--f-body);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
border: 1px solid currentColor;
border-radius: 2px;
flex-shrink: 0;
}
.rando-facile { color: #7A8B3F; } /* vert blé saison printemps */
.rando-moyen { color: var(--or); }
.rando-difficile { color: #A8410E; } /* terre cuite saison automne */
.rando-tres-difficile, .rando-expert { color: var(--sang-vif, #B0142F); }
.rando-meta {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-2) var(--s-4);
margin: 0 0 var(--s-3);
font-family: var(--f-body);
}
.rando-meta > div { display: flex; flex-direction: column; gap: 0.15rem; }
.rando-meta dt {
color: var(--or-soft);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 0;
}
.rando-meta dd { color: var(--blanc); font-size: 1.05rem; margin: 0; }
.rando-meta dd.mono { font-family: var(--f-mono, monospace); font-size: 0.95rem; color: var(--blanc-pur); }
.rando-alerte {
margin: var(--s-2) 0 var(--s-3);
padding: 0.5rem 0.8rem;
background: rgba(176, 20, 47, 0.10);
border-left: 2px solid var(--sang-vif, #B0142F);
font-size: 0.88rem;
color: rgba(247, 241, 230, 0.92);
line-height: 1.5;
}
.rando-cta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.rando-disclaimer {
margin-top: var(--s-3);
font-size: 0.78rem;
color: var(--or-soft);
font-style: italic;
}
/* Sprint G2 — mini-carte GPX + téléchargement (lazy, gpx_url peut être null) */
.rando-map {
height: 220px;
margin: var(--s-3) 0;
border-radius: var(--r-sm, 10px);
overflow: hidden;
border: 1px solid var(--line-or);
background: var(--field-deep);
position: relative;
}
.rando-map .leaflet-container { height: 100%; width: 100%; font-family: var(--f-body); }
.rando-map-attrib {
margin: var(--s-2) 0 0;
font-size: 0.72rem;
color: var(--or-soft);
opacity: 0.85;
}
.rando-map-attrib a { color: inherit; }
@media (min-width: 600px) {
.rando-meta { grid-template-columns: repeat(4, 1fr); }
.rando-map { height: 260px; }
}
.lieu-tag {
display: inline-block;
background: rgba(203, 161, 53, 0.08);
border: 1px solid var(--line-or);
color: var(--or-soft);
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.7rem;
letter-spacing: 0.08em;
margin: 0.15rem 0.2rem 0.15rem 0;
}
.lieu-disclaimer {
background: rgba(176, 20, 47, 0.1);
border: 1px solid rgba(200, 16, 46, 0.4);
padding: var(--s-3) var(--s-4);
border-radius: 6px;
margin: var(--s-5) 0;
}
.lieu-disclaimer p {
color: var(--blanc);
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
}
.lieu-disclaimer strong { color: var(--sang-vif); }
/* À côté, dans le carnet — lieux approuvés à proximité (≤8 km) */
.lieu-nearby-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.lieu-nearby-card {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.85rem;
padding: 0.7rem 0.95rem;
background: rgba(203, 161, 53, 0.04);
border: 1px solid rgba(203, 161, 53, 0.22);
border-radius: 8px;
text-decoration: none;
color: inherit;
transition: border-color 0.2s, background 0.2s, transform 0.15s;
min-height: 56px;
}
.lieu-nearby-card:hover {
border-color: var(--or);
background: rgba(203, 161, 53, 0.08);
transform: translateX(2px);
}
.lieu-nearby-icon {
font-size: 1.3rem;
color: var(--or);
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(203, 161, 53, 0.1);
border-radius: 50%;
flex-shrink: 0;
}
.lieu-nearby-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.lieu-nearby-body strong {
color: var(--blanc);
font-family: var(--f-display);
font-weight: 500;
font-size: 0.95rem;
letter-spacing: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lieu-nearby-body small {
color: var(--or-soft);
font-family: var(--f-body);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.lieu-nearby-dist {
color: var(--or);
font-family: var(--f-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
flex-shrink: 0;
padding-left: 0.5rem;
border-left: 1px solid rgba(203, 161, 53, 0.25);
}
.lieu-source p {
font-size: 0.78rem;
color: var(--or-soft);
letter-spacing: 0.04em;
}
.lieu-source a { color: var(--or); border-bottom: 1px solid var(--or); }
.lieu-back {
margin-top: var(--s-6);
padding-top: var(--s-4);
border-top: 1px solid var(--line-or);
}
.lieu-back a {
font-family: var(--f-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--or-soft);
border-bottom: 1px solid var(--line-or);
padding-bottom: 0.15rem;
}
.lieu-back a:hover { color: var(--or); border-color: var(--or); }
.carnet-item-body { display: block; color: inherit; text-decoration: none; }
.carnet-item-body:hover .carnet-item-name { color: var(--or); }
/* ============================================================
29. UX BUG FIXES — punt visible + time cursor mobile + clustering
============================================================ */
/* Punt = sang vif (rouge punch rare), pas or qui se fond sur grenat */
.punt { color: var(--sang-vif); }
/* Time cursor : jamais en dessous de 900px (preview + mobile réel) */
@media (max-width: 900px) {
.time-cursor { display: none !important; }
}
/* Lieu hero placeholder (pas de photo source DATAtourisme) */
.lieu-hero-banner {
aspect-ratio: 16 / 9;
background:
radial-gradient(ellipse at 30% 70%, rgba(203, 161, 53, 0.18) 0%, transparent 60%),
radial-gradient(ellipse at 70% 30%, rgba(200, 16, 46, 0.12) 0%, transparent 50%),
linear-gradient(180deg, var(--field-soft) 0%, var(--field-deep) 100%);
border: 1px solid var(--line-or);
margin-bottom: var(--s-4);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.lieu-hero-banner .lieu-hero-glyph {
font-family: var(--f-edit);
font-style: italic;
font-size: clamp(4rem, 14vw, 10rem);
color: var(--or);
opacity: 0.32;
line-height: 1;
user-select: none;
}
.lieu-hero-banner .lieu-hero-coords {
position: absolute;
bottom: 0.7rem;
left: 0.9rem;
font-family: var(--f-mono, monospace);
font-size: 0.7rem;
color: var(--or-soft);
letter-spacing: 0.05em;
background: rgba(74, 10, 18, 0.7);
padding: 0.2rem 0.5rem;
border: 1px solid var(--line-or);
}
/* Marker cluster (Leaflet.markercluster custom theme) */
.marker-cluster {
background: rgba(203, 161, 53, 0.25) !important;
border: 1px solid var(--or);
border-radius: 50%;
}
.marker-cluster div {
background: var(--field-deep) !important;
color: var(--or) !important;
font-family: var(--f-mono, var(--f-body)) !important;
font-weight: 700 !important;
border: 1px solid var(--or) !important;
}
.marker-cluster-small,
.marker-cluster-small div { width: 32px !important; height: 32px !important; line-height: 30px !important; }
.marker-cluster-medium,
.marker-cluster-medium div { width: 40px !important; height: 40px !important; line-height: 38px !important; }
.marker-cluster-large,
.marker-cluster-large div { width: 50px !important; height: 50px !important; line-height: 48px !important; }
/* ============================================================
30. ERGONOMIC MOBILE — refactor densité + lisibilité
"80% trafic smartphone, pas 2 mots par ligne"
============================================================ */
/* Body : taille un peu plus petite mobile pour densité info */
@media (max-width: 700px) {
body { font-size: 16px; line-height: 1.55; }
}
/* Eyebrow : letter-spacing serré + non-wrap quand possible */
@media (max-width: 700px) {
.hero-eyebrow,
.page-header-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.2em;
}
.hero-eyebrow::before { width: 24px; }
}
/* Hero mobile : title plus serré, sub réduit, meta lisible */
@media (max-width: 700px) {
.hero { padding-top: 4.5rem; padding-bottom: var(--s-4); min-height: auto; }
.hero-grid { gap: var(--s-3); align-items: stretch; }
.hero-right {
order: -1 !important;
margin: 0 calc(var(--pad-x) * -1) var(--s-3);
width: auto;
align-self: stretch;
}
.hero-photo {
aspect-ratio: 16 / 10; /* moins haut que 4/3 → moins de vide ORB */
box-shadow: 0 0 0 1px var(--or);
}
.hero-title {
font-size: clamp(2.4rem, 9vw, 3.4rem);
line-height: 1.04;
letter-spacing: -0.025em;
}
.hero-title .punt {
display: inline;
font-size: 1em;
}
.hero-sub {
font-size: 1.02rem;
line-height: 1.45;
margin-top: var(--s-2);
}
.hero-meta {
margin-top: var(--s-3);
padding-top: var(--s-2);
gap: 0.3rem var(--s-3);
grid-template-columns: auto 1fr;
font-size: 0.9rem;
}
.hero-meta dt {
font-size: 0.7rem; /* up de 0.6rem */
letter-spacing: 0.12em;
}
.hero-meta dd { font-size: 0.92rem; }
}
/* Letter-by-letter : skip mobile pour fiabilité */
@media (max-width: 700px) {
.hero-title .lt {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* Promesse mobile : 3 mots horizontal forcé, font scale viewport pour tenir */
@media (max-width: 700px) {
.promesse { padding: var(--s-5) 0 calc(var(--s-5) + 6px); }
.promesse-words {
gap: clamp(0.3rem, 1.5vw, 0.8rem);
font-size: clamp(1rem, 5vw, 1.8rem); /* 3 mots ~30 chars sur 360px = 12px/char min */
flex-wrap: nowrap;
white-space: nowrap;
}
.promesse-words span:not(.sep)::after {
font-size: 0.5rem;
margin-top: 0.25rem;
letter-spacing: 0.14em;
}
.promesse-foot { font-size: 0.85rem; margin-top: var(--s-3); padding: 0 var(--pad-x); }
}
@media (max-width: 400px) {
.promesse-words { font-size: clamp(0.85rem, 4.6vw, 1.2rem); }
.promesse-words span:not(.sep)::after { font-size: 0.42rem; }
}
/* Page-header (univers + lieu + carnet + explorer) mobile : tailles serrées */
@media (max-width: 700px) {
.page-header { padding: 5.5rem var(--pad-x) var(--s-4); }
.page-header-inner { grid-template-columns: 1fr; gap: var(--s-3); }
.page-header h1 {
font-size: clamp(2rem, 9vw, 3.2rem);
line-height: 1;
margin-bottom: var(--s-2);
letter-spacing: -0.035em;
}
.page-header-eyebrow { margin-bottom: var(--s-2); font-size: 0.7rem; }
.page-header-lead {
font-size: clamp(1rem, 1.5vw, 1.15rem);
line-height: 1.5;
max-width: 60ch;
}
.page-header-aside {
border-left: 0;
border-top: 1px solid var(--line-or);
padding-left: 0;
padding-top: var(--s-3);
margin-top: var(--s-3);
display: grid;
grid-template-columns: auto 1fr;
gap: 0.3rem var(--s-3);
}
.page-header-aside dt {
font-size: 0.66rem;
margin-top: 0 !important;
letter-spacing: 0.12em;
}
.page-header-aside dt:first-child { margin-top: 0 !important; }
.page-header-aside dd { font-size: 0.92rem; }
}
/* Section heads mobile */
@media (max-width: 700px) {
.section-head {
grid-template-columns: 1fr;
gap: var(--s-2);
margin-bottom: var(--s-4);
}
.section-num { font-size: 0.66rem; letter-spacing: 0.2em; }
.section-title {
font-size: clamp(1.6rem, 7vw, 2.4rem);
line-height: 1;
}
.section-aside { font-size: 0.66rem; letter-spacing: 0.14em; }
.section { padding: var(--s-5) 0; }
}
/* Cat-card mobile : tighter */
@media (max-width: 700px) {
.cat-card-num { font-size: clamp(2.4rem, 9vw, 3.6rem); }
.cat-card-label { font-size: 1.2rem; margin-bottom: 0.4rem; }
.cat-card-meta { font-size: 0.66rem; margin-bottom: var(--s-2); }
.cat-card-desc { font-size: 0.9rem; line-height: 1.5; }
}
/* Theme cards (accueil) mobile : taller body + lisibilité */
@media (max-width: 700px) {
.theme-card { min-height: 84px; padding: var(--s-3) 0; }
.theme-card h3, .theme-card--main h3 { font-size: 1.35rem; }
.theme-card-tagline { font-size: 0.88rem; line-height: 1.45; -webkit-line-clamp: 2; }
.theme-card-num { font-size: 0.62rem; }
}
/* Voix locale mobile : plus serré */
@media (max-width: 700px) {
.voix { padding: var(--s-6) 0; }
.voix-inner { gap: var(--s-3); }
.voix-photo { aspect-ratio: 16/10; max-width: 100%; }
.voix blockquote { font-size: 1.3rem; line-height: 1.3; }
}
/* Lettre mobile */
@media (max-width: 700px) {
.lettre { padding: var(--s-6) 0; }
.lettre h2 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
.lettre p { font-size: 0.98rem; margin-bottom: var(--s-3); }
}
/* Signature mobile */
@media (max-width: 700px) {
.signature { padding: var(--s-4) var(--pad-x) calc(var(--s-3) + 80px); }
.signature p { font-size: 1.05rem; }
.signature::after { font-size: 0.62rem; letter-spacing: 0.28em; }
}
/* Quote block mobile */
@media (max-width: 700px) {
.quote-block { padding: var(--s-4) var(--pad-x); }
.quote-block blockquote { font-size: 1.3rem; line-height: 1.3; }
.quote-block cite { font-size: 0.66rem; letter-spacing: 0.18em; }
}
/* Toolbar Explorer mobile : compact */
@media (max-width: 700px) {
.explorer-toolbar { padding: 0.5rem 0; top: 56px; }
.explorer-toolbar-inner {
grid-template-columns: 1fr;
gap: 0.4rem;
}
.explorer-search { min-height: 40px; padding: 0 0.7rem; }
.explorer-search input { font-size: 0.92rem; padding: 0.45rem 0; }
.explorer-filters { gap: 0.3rem; padding-bottom: 2px; }
.explorer-filters button { padding: 0.35rem 0.7rem; font-size: 0.66rem; min-height: 32px; }
.explorer-meta { gap: 0.4rem; flex-wrap: wrap; }
.explorer-scope, .explorer-sort { font-size: 0.66rem; padding: 0.3rem 0.6rem; min-height: 32px; }
.explorer-view button { width: 28px; height: 28px; }
}
/* Place-card Explorer mobile : densité */
@media (max-width: 700px) {
.place-card {
gap: var(--s-2);
padding: 0.7rem 0;
min-height: auto;
}
.place-icon { width: 36px; height: 36px; font-size: 0.95rem; flex: 0 0 36px; }
.place-name { font-size: 1rem; }
.place-univ { font-size: 0.56rem; padding: 0.1rem 0.45rem; letter-spacing: 0.14em; }
.place-meta { font-size: 0.72rem; margin-bottom: 0.2rem; }
.place-desc { font-size: 0.82rem; line-height: 1.4; -webkit-line-clamp: 2; }
.place-fav, .place-map { width: 40px; height: 40px; font-size: 0.9rem; }
}
/* Carnet toolbar mobile */
@media (max-width: 700px) {
.carnet-toolbar { padding: 0.5rem 0; top: 56px; }
.carnet-toolbar-inner { grid-template-columns: 1fr; gap: 0.4rem; }
.carnet-tabs button { padding: 0.35rem 0.7rem; font-size: 0.66rem; min-height: 32px; }
.carnet-actions { gap: 0.3rem; justify-content: flex-start; flex-wrap: wrap; }
.carnet-action { padding: 0.35rem 0.6rem; font-size: 0.64rem; min-height: 32px; }
.carnet-action svg { width: 12px; height: 12px; }
.carnet-group-head h2 { font-size: 1.5rem; }
.carnet-item-name { font-size: 0.98rem; }
.carnet-item-meta { font-size: 0.74rem; }
.carnet-item-desc { font-size: 0.82rem; line-height: 1.45; }
}
/* Lieu page mobile */
@media (max-width: 700px) {
.lieu { padding: var(--s-3) 0 calc(var(--s-5) + 80px); }
.lieu-actions { gap: 0.35rem; margin-bottom: var(--s-3); padding-bottom: var(--s-3); }
.lieu-actions .btn { padding: 0.7rem 1rem; font-size: 0.66rem; letter-spacing: 0.14em; min-height: 40px; }
.lieu-section { margin: var(--s-4) 0; }
.lieu-section h2 { font-size: 1.4rem; margin-bottom: var(--s-2); }
.lieu-section p { font-size: 0.96rem; line-height: 1.6; }
.lieu-meta { gap: 0.4rem 1rem; }
.lieu-meta dt { font-size: 0.66rem; letter-spacing: 0.12em; }
.lieu-meta dd { font-size: 0.9rem; }
.lieu-meta dd.mono { font-size: 0.78rem; }
.lieu-hero-banner { aspect-ratio: 16 / 9; margin: 0 calc(var(--pad-x) * -1) var(--s-3); }
.lieu-note { padding: var(--s-3); }
.lieu-note blockquote { font-size: 1.05rem; line-height: 1.45; }
.lieu-note cite { font-size: 0.64rem; }
}
/* Bottom-nav: spacing serré pour pas chevaucher contenu (+FAB Au hasard ~140px) */
@media (max-width: 700px) {
.site-main { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
.bottom-nav a { font-size: 0.56rem; letter-spacing: 0.1em; min-height: 52px; }
}
/* Senyera mobile : très fine */
@media (max-width: 700px) {
.senyera { height: 3px; }
}
/* Footer mobile */
@media (max-width: 700px) {
.site-footer { padding: var(--s-5) var(--pad-x) var(--s-3); } /* #160b : padding horizontal restauré (contenu plus collé aux bords) */
.footer-inner { padding-bottom: var(--s-3); }
.footer-brand { font-size: 1.2rem; }
.footer-tagline { font-size: 0.95rem; margin-bottom: var(--s-2); }
.footer-col h4, .footer-col .footer-h { margin-bottom: var(--s-2); font-size: 0.62rem; }
.footer-col a { font-size: 0.86rem; }
.footer-bottom { font-size: 0.64rem; gap: 0.4rem; }
}
/* Legal pages mobile : lisibilité */
@media (max-width: 700px) {
.legal-page { padding-top: 5rem; }
.legal-page h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
.legal-page h2 { font-size: 1.15rem; margin-top: var(--s-3); }
.legal-page p { font-size: 0.95rem; line-height: 1.6; }
.legal-page li { font-size: 0.92rem; }
}
/* Safety net : aucun contenu ne doit chevaucher bottom-nav.
100px = hauteur nav (~72px) + marge de sécurité ; safe-area iPhone ajoutée en sus. (#160) */
@media (max-width: 768px) {
.site-main { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
.site-footer { padding-bottom: calc(var(--s-3) + 100px + env(safe-area-inset-bottom, 0px)); }
}
/* ============================================================
31. DESKTOP FIXES — toolbar Explorer + ajustements wide screens
============================================================ */
/* Toolbar Explorer : grid areas pour filtres pleine ligne */
@media (min-width: 701px) {
.explorer-toolbar-inner {
display: grid;
grid-template-areas:
'search meta'
'filters filters';
grid-template-columns: 1fr auto;
gap: 0.6rem 1.2rem;
}
.explorer-search { grid-area: search; }
.explorer-filters { grid-area: filters; }
.explorer-meta { grid-area: meta; }
.explorer-filters {
flex-wrap: wrap;
overflow: visible;
}
.explorer-filters button {
white-space: nowrap;
padding: 0.45rem 1rem;
}
}
/* Carnet toolbar : même logique desktop */
@media (min-width: 701px) {
.carnet-toolbar-inner {
grid-template-areas:
'tabs actions'
'tabs actions';
grid-template-columns: 1fr auto;
gap: 0.6rem 1.2rem;
}
.carnet-tabs { grid-area: tabs; flex-wrap: wrap; overflow: visible; }
.carnet-actions { grid-area: actions; flex-wrap: nowrap; }
}
/* Time cursor : moins intrusif desktop large */
@media (min-width: 1100px) {
.time-cursor {
font-size: 10px;
letter-spacing: 0.14em;
opacity: 0.55;
}
}
/* ============================================================
32. ADMIN WIDGET — indicateur pending (cookie session admin)
============================================================ */
.admin-widget {
position: fixed;
top: 64px;
right: 14px;
z-index: 95;
transition: transform 0.4s var(--ease-out), opacity 0.3s;
opacity: 0.55;
}
.admin-widget:hover, .admin-widget:focus-within { opacity: 1; }
@media (max-width: 700px) {
.admin-widget {
top: auto;
bottom: calc(92px + env(safe-area-inset-bottom, 0px));
right: 8px;
opacity: 0.5;
}
/* Collapsed mobile : small pill, only count visible */
.admin-widget .admin-widget-text span,
.admin-widget .admin-widget-meta { display: none; }
.admin-widget-link {
padding: 0.4rem 0.7rem;
font-size: 0.8rem;
}
.admin-widget-text strong { font-size: 0.85rem; }
.admin-widget:focus-within .admin-widget-text span,
.admin-widget:focus-within .admin-widget-meta { display: inline-flex; }
}
.admin-widget-link {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 0.85rem 0.55rem 0.7rem;
background: var(--field-deep);
color: var(--blanc);
border: 1px solid var(--or);
border-radius: 999px;
font-family: var(--f-body);
text-decoration: none;
box-shadow: 0 6px 22px rgba(14, 6, 8, 0.5);
transition: all 0.25s var(--ease-out);
}
.admin-widget-link:hover {
transform: translateY(-1px);
background: var(--sang-deep);
border-color: var(--or-soft);
}
.admin-widget-glyph {
color: var(--or);
font-family: var(--f-edit);
font-style: italic;
font-size: 1rem;
line-height: 1;
}
.admin-widget-text {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1;
}
.admin-widget-text strong {
font-family: var(--f-display);
font-size: 1.05rem;
font-weight: 500;
color: var(--or);
}
.admin-widget-text span {
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--or-soft);
margin-top: 2px;
}
.admin-widget-meta {
margin-left: 0.4rem;
padding-left: 0.6rem;
border-left: 1px solid var(--line-or);
font-family: var(--f-mono, monospace);
font-size: 0.66rem;
color: var(--or-soft);
white-space: nowrap;
}
@media (max-width: 500px) {
.admin-widget-meta { display: none; }
.admin-widget-link { padding: 0.45rem 0.7rem; }
}
/* Admin widget : bouton logout discret */
.admin-widget { display: inline-flex; align-items: center; gap: 4px; }
.admin-widget-logout {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
background: var(--field-deep);
color: var(--or-soft);
border: 1px solid var(--or);
border-radius: 50%;
text-decoration: none;
font-size: 0.95rem;
transition: all 0.2s var(--ease-out);
box-shadow: 0 6px 22px rgba(14, 6, 8, 0.5);
}
.admin-widget-logout:hover {
background: var(--sang-vif);
color: var(--blanc);
border-color: var(--sang-vif);
}
/* ============================================================
33. LIEU HERO SVG — scènes vectorielles par univers
============================================================ */
/* Sprint #111 : photo univers en fond, duotone Sang i Or (cohérence hero sprint #107) */
.lieu-hero-banner--gastronomie,
.lieu-hero-banner--nature,
.lieu-hero-banner--culture,
.lieu-hero-banner--hebergement {
background: linear-gradient(180deg, var(--field-soft) 0%, var(--field-deep) 100%);
}
.lieu-hero-banner--gastronomie::before,
.lieu-hero-banner--nature::before,
.lieu-hero-banner--culture::before,
.lieu-hero-banner--hebergement::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter:
grayscale(0.62)
sepia(0.42)
hue-rotate(335deg)
saturate(1.45)
contrast(1.08)
brightness(0.94);
}
.lieu-hero-banner--gastronomie::before { background-image: url('../img/univers/gastronomie.webp'); }
.lieu-hero-banner--nature::before { background-image: url('../img/univers/nature.webp'); }
.lieu-hero-banner--culture::before { background-image: url('../img/univers/culture.webp'); }
.lieu-hero-banner--hebergement::before { background-image: url('../img/univers/hebergement.webp'); }
/* Photo spécifique par lieu (socle patrimonial) : override l'image univers, garde le duotone Sang i Or */
.lieu-hero-banner[data-photo]::before { background-image: var(--lieu-photo) !important; }
/* Voile bas pour lisibilité .lieu-hero-coords */
.lieu-hero-banner--gastronomie::after,
.lieu-hero-banner--nature::after,
.lieu-hero-banner--culture::after,
.lieu-hero-banner--hebergement::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, transparent 55%, rgba(42, 8, 16, 0.55) 100%);
pointer-events: none;
}
/* SVG line-art : voile or sur photo, signature délicate */
.lieu-hero-banner--gastronomie .lieu-hero-svg,
.lieu-hero-banner--nature .lieu-hero-svg,
.lieu-hero-banner--culture .lieu-hero-svg,
.lieu-hero-banner--hebergement .lieu-hero-svg {
opacity: 0.22;
z-index: 2;
position: relative;
}
.lieu-hero-banner .lieu-hero-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
color: var(--or);
}
.lieu-hero-banner .lieu-hero-glyph { display: none; }
.lieu-hero-banner--gastronomie { background: linear-gradient(180deg, var(--field-soft) 0%, var(--field-deep) 100%); }
.lieu-hero-banner--nature { background: linear-gradient(180deg, var(--field) 0%, var(--field-deep) 100%); }
.lieu-hero-banner--culture { background: linear-gradient(180deg, var(--field-deep) 0%, var(--field-soft) 100%); }
.lieu-hero-banner--hebergement { background: linear-gradient(180deg, var(--field-soft) 0%, var(--field) 100%); }
/* Coords pill au-dessus de l'SVG */
.lieu-hero-banner .lieu-hero-coords { z-index: 2; }
/* ============================================================
34. PRÈS DE MOI — bouton + radius chips
============================================================ */
.explorer-near {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: transparent;
border: 1px solid var(--line-or);
color: var(--or-soft);
padding: 0.45rem 0.8rem;
border-radius: 999px;
font-family: var(--f-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
min-height: 36px;
transition: all 0.2s var(--ease-out);
white-space: nowrap;
}
.explorer-near svg { width: 14px; height: 14px; flex-shrink: 0; }
.explorer-near:hover { color: var(--or); border-color: var(--or); }
.explorer-near.is-active {
background: var(--sang-vif);
border-color: var(--sang-vif);
color: var(--blanc);
}
.explorer-near.is-active svg { stroke: var(--blanc); animation: pulse-locate 1.6s ease-in-out infinite; }
@keyframes pulse-locate {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.explorer-radius {
display: inline-flex;
gap: 2px;
background: rgba(247, 241, 230, 0.08);
padding: 3px;
border-radius: 999px;
border: 1px solid var(--line-or);
}
.explorer-radius[hidden] { display: none; }
.explorer-radius button {
background: transparent;
border: 0;
color: var(--or-soft);
padding: 0.3rem 0.65rem;
border-radius: 999px;
font-family: var(--f-body);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
min-height: 28px;
}
.explorer-radius button:hover { color: var(--or); }
.explorer-radius button.is-active {
background: var(--or);
color: var(--field-deep);
}
@media (max-width: 700px) {
.explorer-near { padding: 0.35rem 0.6rem; font-size: 0.64rem; min-height: 32px; }
.explorer-radius button { padding: 0.25rem 0.5rem; font-size: 0.6rem; }
}
/* ============================================================
COLLECTIONS (maquette v1 — sprint à finaliser)
============================================================ */
.collections-index {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: clamp(0.8rem, 1.5vw, 1.2rem);
margin: var(--s-4) 0 var(--s-6);
}
.collections-tile {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.55rem;
padding: clamp(1.4rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.6rem);
border: 1px solid rgba(203,161,53,0.22);
border-radius: var(--r-md);
background: rgba(247,241,230,0.02);
text-decoration: none;
transition: border-color 0.25s, background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.collections-tile:hover {
border-color: var(--or);
background: rgba(203,161,53,0.06);
transform: translateY(-2px);
}
.collections-tile-icon {
width: 54px; height: 54px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
border: 1px solid var(--line-or);
background: rgba(203,161,53,0.06);
color: var(--or);
font-size: 1.5rem; line-height: 1;
margin-bottom: 0.15rem;
transition: transform .25s var(--ease-out), border-color .25s;
}
.collections-tile:hover .collections-tile-icon { transform: scale(1.06); border-color: var(--or); }
.collections-tile-icon svg { width: 26px; height: 26px; }
.collections-tile-title {
font-family: var(--f-display);
font-size: 1.25rem;
color: var(--blanc-pur);
font-weight: 500;
}
.collections-tile-count {
font-family: var(--f-body);
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--or-soft);
}
/* Carte collection */
.collection-map {
width: 100%;
height: clamp(320px, 45vh, 480px);
border-radius: 12px;
overflow: hidden;
margin: var(--s-4) 0;
border: 1px solid rgba(203,161,53,0.25);
background: var(--field-deep);
}
/* Grille fiches collection */
.collection-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: clamp(0.8rem, 1.4vw, 1.2rem);
margin: var(--s-4) 0 var(--s-6);
}
.collection-card {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.9rem;
padding: clamp(0.9rem, 1.6vw, 1.2rem);
border: 1px solid rgba(203,161,53,0.18);
border-radius: 10px;
background: rgba(247,241,230,0.02);
transition: border-color 0.2s, background 0.2s;
}
.collection-card:hover { border-color: var(--or-soft); background: rgba(203,161,53,0.05); }
.collection-card.is-todo { opacity: 0.62; }
.collection-card-icon {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(203,161,53,0.08);
color: var(--or);
font-size: 1.05rem;
flex: 0 0 40px;
}
.collection-card-body { min-width: 0; }
.collection-card-name {
font-family: var(--f-display);
font-size: 1.1rem;
font-weight: 500;
color: var(--blanc-pur);
margin: 0 0 0.3rem;
line-height: 1.25;
}
.collection-card-name a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.collection-card-name a:hover { border-color: var(--or); }
.collection-michelin { color: var(--sang-vif); margin-left: 0.3em; }
.collection-card-meta {
font-family: var(--f-body);
font-size: 0.78rem;
color: var(--or-soft);
letter-spacing: 0.03em;
margin: 0 0 0.4rem;
}
.collection-card-desc {
font-family: var(--f-body);
font-size: 0.88rem;
color: rgba(247,241,230,0.72);
line-height: 1.5;
margin: 0 0 0.5rem;
}
.collection-card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.collection-mini-btn {
font-family: var(--f-body);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--or);
text-decoration: none;
border: 1px solid var(--line-or);
border-radius: 999px;
padding: 0.3rem 0.7rem;
min-height: 36px;
display: inline-flex;
align-items: center;
transition: background 0.2s, color 0.2s;
}
.collection-mini-btn:hover { background: var(--or); color: var(--field-deep); }
.collection-card-soon {
font-family: var(--f-body);
font-size: 0.72rem;
font-style: italic;
color: var(--or-soft);
opacity: 0.7;
}
@media (max-width: 600px) {
.collection-grid, .collections-index { grid-template-columns: 1fr; }
}
/* ================================================================
25. v2.1 « moderne-affirmé » · COHÉRENCE inter-pages + photo bento
(sprint #126) — couche additive, override later-cascade-wins.
Étend profondeur (cartes) + tactile (boutons) aux composants
sur-mesure non couverts par #123 → même esthétique sur toutes
les pages. + réintègre la photo dans la tuile titre du hero bento.
N'ajoute que radius / ombre / transition / hover / fond-tuile :
aucune perturbation du flux. Structure éditoriale (.cat-card) nette.
================================================================ */
/* ----- CARTES-OBJETS → profondeur (toutes pages) ----- */
.nouveautes-card,
.place-card,
.collection-card,
.lieu-nearby-card {
border-radius: var(--r-md);
box-shadow: var(--el-1);
transition: transform .25s var(--ease-out),
box-shadow .25s var(--ease-out),
border-color .25s var(--ease-out);
}
.nouveautes-card:hover,
.place-card:hover,
.collection-card:hover,
.lieu-nearby-card:hover {
transform: translateY(-3px);
box-shadow: var(--el-2);
border-color: var(--or);
}
/* ----- BOUTONS sur-mesure → tactiles ----- */
/* « Surprends-moi » : ghost or tactile (était aplat encre peu lisible sur grenat) */
.surprise-btn {
background: transparent;
color: var(--blanc);
border: 1px solid var(--line-or);
border-radius: var(--r-sm);
box-shadow: none;
transition: background .25s var(--ease-out), color .25s,
transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.surprise-btn:hover {
background: var(--or);
color: var(--field-deep);
border-color: var(--or);
transform: translateY(-2px);
box-shadow: var(--el-1);
}
.surprise-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* pills / mini-boutons bordés → tactiles */
.collection-mini-btn { border-radius: var(--r-full); transition: background .2s var(--ease-out), color .2s, transform .18s var(--ease-out), border-color .2s; }
.collection-mini-btn:hover { background: var(--or); color: var(--field-deep); border-color: var(--or); transform: translateY(-2px); }
/* ================================================================
Photo dans la tuile titre du hero bento (garde l'esthétique bento,
réintègre les photos duotone Sang i Or, lisibilité assurée par voile).
================================================================ */
.hero-bento .t-title { isolation: isolate; }
.t-title-photo {
position: absolute; inset: 0; z-index: 0;
background-size: cover; background-position: center;
/* duotone Sang i Or (même chaîne que l'ancien hero #107) */
filter: grayscale(0.62) sepia(0.42) hue-rotate(335deg) saturate(1.45) contrast(1.08) brightness(0.78);
transform: scale(1.04);
opacity: 1;
transition: opacity 0.4s var(--ease-out), transform 14s var(--ease-out);
}
.hero-bento .t-title:hover .t-title-photo { transform: scale(1.08); }
/* Carrousel : fade-out → swap → fade-in (mécanisme main.js .is-fading) */
.hero-bento .t-title.is-fading .t-title-photo { opacity: 0; }
/* Voile grenat pour lisibilité du texte par-dessus la photo */
.hero-bento .t-title::after {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(105deg,
rgba(74,10,18,0.92) 0%,
rgba(74,10,18,0.72) 45%,
rgba(107,15,26,0.40) 100%);
}
.hero-bento .t-title .tile-pad { z-index: 2; } /* texte au-dessus photo + voile */
/* ============================================================
Sprint #130 : contexte collection sur fiche lieu
============================================================ */
/* Badge collections : appartenance du lieu courant à une ou plusieurs collections.
Posé sous les actions, ton or sur grenat (cohérence Sang i Or). */
.lieu-collections {
margin: var(--s-3) 0 0;
padding: 0.55rem 0.85rem;
background: var(--field-deep);
border: 1px solid var(--line-or, var(--or));
border-radius: var(--r-md, 10px);
font-family: var(--f-body);
font-size: 0.82rem;
line-height: 1.5;
color: var(--blanc-soft, var(--blanc));
}
.lieu-collections-label {
color: var(--or-soft);
font-size: 0.68rem;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-right: 0.35rem;
}
.lieu-collections a {
color: var(--or);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s var(--ease-out, ease);
}
.lieu-collections a:hover,
.lieu-collections a:focus-visible {
border-bottom-color: var(--or);
}
/* Fiche squelette (lieu curé pas encore enrichi) : message sobre, sans bruit. */
.lieu-stub .lieu-stub-msg {
margin: var(--s-3) 0;
font-family: var(--f-edit, var(--f-body));
font-style: italic;
color: var(--or-soft);
font-size: 1rem;
}
/* ============================================================
ITINÉRAIRE — générateur au hasard (sprint #152)
============================================================ */
.itin-form {
max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x);
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--s-4); align-items: end;
}
.itin-form .itin-field { display: flex; flex-direction: column; gap: .5rem; border: 0; padding: 0; margin: 0; }
.itin-form label, .itin-form legend { font-family: var(--f-body); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--or-soft); padding: 0; }
.itin-field--steps label b { color: var(--sang-vif); font-size: 1.1rem; margin-left: .3rem; }
.itin-form input[type=range] { width: 100%; accent-color: var(--or); }
.itin-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.itin-chips label { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .85rem; color: var(--blanc);
border: 1px solid var(--line-or); border-radius: var(--r-full, 9999px); padding: .4rem .8rem; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.itin-chips input { accent-color: var(--or); }
.itin-form select { background: var(--field-deep); border: 1px solid var(--line-or); color: var(--blanc); padding: .65rem .9rem; border-radius: var(--r-sm, 10px); font: 500 .9rem var(--f-body); }
.itin-field--toggle label { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .85rem; color: var(--blanc); display: flex; align-items: center; gap: .4rem; }
.itin-field--toggle span { color: var(--or-soft); font-size: .78rem; }
.itin-go { justify-self: start; }
.itin-result { max-width: var(--max-w); margin: var(--s-5) auto 0; padding: 0 var(--pad-x); }
.itin-empty { text-align: center; color: var(--or-soft); font-family: var(--f-edit); font-style: italic; padding: var(--s-5); }
.itin-plan-head h2 { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--blanc-pur); }
.itin-plan-head p { color: var(--or-soft); font-family: var(--f-edit); font-style: italic; margin-top: .2rem; }
.itin-note { margin: var(--s-3) 0; padding: .6rem .9rem; border-left: 3px solid var(--or); background: rgba(203,161,53,.07); color: var(--blanc); font-size: .85rem; border-radius: 0 6px 6px 0; }
.itin-steps { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.itin-day { margin: var(--s-3) 0 .2rem; }
.itin-day span { font-family: var(--f-body); font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--or); border-bottom: 1px solid var(--line-or); padding-bottom: .25rem; }
.itin-step { display: grid; grid-template-columns: 34px 38px 1fr auto; gap: .8rem; align-items: center;
padding: .7rem .9rem; border: 1px solid var(--line-hair); border-radius: var(--r-md, 16px); background: rgba(247,241,230,.03); transition: border-color .2s, transform .2s; }
.itin-step:hover { border-color: var(--line-or); transform: translateX(2px); }
.itin-step-n { font-family: var(--f-display); font-size: 1.5rem; font-weight: 300; color: var(--sang-vif); line-height: 1; text-align: center; }
.itin-step-ic { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-or); display: flex; align-items: center; justify-content: center; color: var(--or); }
.itin-step-ic svg { width: 19px; height: 19px; }
.itin-step-body { min-width: 0; }
.itin-step-body h3 { font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; color: var(--blanc-pur); line-height: 1.2; }
.itin-step-meta { font-size: .78rem; color: var(--or-soft); margin-top: .1rem; }
.itin-step-act { display: flex; gap: .4rem; }
.itin-step-act a, .itin-step-act button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-or); background: transparent; color: var(--or-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; text-decoration: none; transition: all .18s; }
.itin-step-act a:hover, .itin-step-act button:hover { border-color: var(--or); color: var(--or); transform: scale(1.08); }
.itin-step-act .itin-fav.is-saved { background: var(--vert, #6BA852); border-color: var(--vert, #6BA852); color: #fff; }
.itin-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: var(--s-5); }
/* Bloc « Pendant votre séjour » : événements autour du parcours (chantier agenda C) */
.itin-events { margin-top: var(--s-4); padding: 1rem 1.1rem; border: 1px solid var(--line-or); border-radius: var(--r-md, 16px); background: rgba(203, 161, 53, .05); }
.itin-events[hidden] { display: none; }
.itin-events-title { font-family: var(--f-body); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--or); margin: 0 0 .55rem; }
.itin-events-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.itin-event { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; border-top: 1px solid var(--line-hair); }
.itin-event:first-child { border-top: 0; }
.itin-event-date { flex: 0 0 auto; min-width: 5.4em; font-family: var(--f-body); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sang-vif); }
.itin-event-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.itin-event-name { font-family: var(--f-display); font-weight: 500; font-size: .98rem; color: var(--blanc-pur); line-height: 1.25; }
.itin-event-meta { font-size: .76rem; color: var(--or-soft); margin-top: .1rem; }
.itin-event .itin-fav { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-or); background: transparent; color: var(--or-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .95rem; transition: all .18s; }
.itin-event .itin-fav:hover { border-color: var(--or); color: var(--or); transform: scale(1.08); }
.itin-event .itin-fav.is-saved { background: var(--vert, #6BA852); border-color: var(--vert, #6BA852); color: #fff; }
.itin-events-empty { font-family: var(--f-edit); font-style: italic; color: var(--or-soft); font-size: .9rem; margin: 0; }
.itin-events-more { margin: .6rem 0 0; font-size: .8rem; }
.itin-events-more a { color: var(--or); font-weight: 600; text-decoration: none; }
.itin-events-more a:hover { text-decoration: underline; }
@media (max-width: 540px) {
/* Mobile : date au-dessus du nom, sinon la colonne date écrase le titre */
.itin-event { flex-wrap: wrap; row-gap: .1rem; }
.itin-event-date { flex: 1 1 100%; min-width: 0; }
.itin-event-body { flex: 1; }
}
/* Bloc « Au hasard » mis en valeur sur l'accueil (sprint #152) */
.hasard-feature { max-width: var(--max-w); margin: var(--s-6) auto 0; padding: 0 var(--pad-x); }
.hasard-feature-inner { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: clamp(1.5rem,4vw,3rem); align-items: center;
border: 1px solid var(--line-or); border-radius: var(--r-lg, 24px); padding: clamp(1.5rem,4vw,2.6rem); background: var(--grad-grenat, linear-gradient(165deg,#7C1622,#4A0A12)); box-shadow: var(--el-1); position: relative; overflow: hidden; }
.hasard-feature-inner::before { content: '✦'; position: absolute; right: -1rem; top: -1.5rem; font-size: 9rem; color: rgba(203,161,53,.08); pointer-events: none; }
.hasard-feature h2 { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.7rem,3.5vw,2.6rem); color: var(--blanc-pur); line-height: 1.05; }
.hasard-feature h2 em { color: var(--or); font-style: italic; }
.hasard-feature p { color: rgba(247,241,230,.82); font-family: var(--f-edit); font-style: italic; margin: .6rem 0 0; max-width: 46ch; }
.hasard-feature-cta { display: flex; flex-direction: column; gap: .7rem; }
.hasard-feature-inner > * { min-width: 0; } /* évite le grid blowout (min-width:auto) sur mobile (#160) */
@media (max-width: 760px) { .hasard-feature-inner { grid-template-columns: minmax(0,1fr); } }
/* ============================================================
ANTI-VEUVES typographiques (sprint #154)
Équilibre les lignes de titres + évite le mot orphelin en fin de phrase.
============================================================ */
h1, h2, h3, h4,
.hero-title, .section-title, .page-header-lead, .hero-sub, .lead,
.theme-card-tagline, .cat-card-desc, .hasard-feature h2, .hasard-feature p,
blockquote { text-wrap: balance; }
p, li, .cat-card-meta { text-wrap: pretty; }
/* Boutons : équilibrage des lignes (anti-veuve) SANS nowrap.
nowrap forçait une seule ligne → débordement horizontal sur mobile quand le
libellé dépassait la largeur dispo (ex. CTA « Composer un itinéraire » dans une
colonne grid étroite). text-wrap:balance répartit proprement sans orphelin. (#160) */
.btn, .cat-card-cta, .theme-card-cta, .hero-bento-cta .btn { white-space: normal; text-wrap: balance; }
/* Lien de confiance hero → section garantie (sprint #154) */
.hero-trust-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--s-3); font-family: var(--f-body); font-size: .8rem; letter-spacing: .04em; color: var(--or-soft); border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; text-decoration: none; }
.hero-trust-link:hover { color: var(--or); border-color: var(--line-or); }
.hero-trust-link span { transition: transform .25s; }
.hero-trust-link:hover span { transform: translateY(3px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Itinéraire : lien fiche par étape (sprint #155) */
.itin-step-body h3 a { color: inherit; text-decoration: none; transition: color .2s; }
.itin-step-body h3 a:hover { color: var(--or); }
.itin-step-fiche { display: inline-block; margin-top: .3rem; font-family: var(--f-body); font-size: .72rem; color: var(--or-soft); letter-spacing: .02em; text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.itin-step-fiche:hover { color: var(--or); border-color: var(--line-or); }
/* ── Accordéon itinéraire enrichi (#166) : étape dépliable + panneau riche ── */
.itin-step { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0; padding: 0; overflow: hidden; }
.itin-step:hover { transform: none; }
.itin-step-head { grid-column: 1; display: grid; grid-template-columns: 34px 38px 1fr 1.2rem; gap: .8rem; align-items: center;
width: 100%; background: transparent; border: 0; cursor: pointer; text-align: left; padding: .85rem 0 .85rem 1rem; color: inherit; font: inherit; }
.itin-step-head:hover { background: rgba(203,161,53,.05); }
.itin-step-head .itin-step-body { display: block; }
.itin-step-title { display: block; font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; color: var(--blanc-pur); line-height: 1.2; }
.itin-step-head .itin-step-meta { display: block; }
.itin-step-chevron { color: var(--or-soft); transition: transform .25s var(--ease-out); font-size: .85rem; }
.itin-step-head[aria-expanded="true"] .itin-step-chevron { transform: rotate(180deg); }
.itin-step-act { grid-column: 2; align-self: center; padding-right: 1rem; }
.itin-step-panel { grid-column: 1 / -1; border-top: 1px solid var(--line-or); padding: 1.1rem 1rem 1.3rem; background: rgba(0,0,0,.10); }
.itin-step-panel[hidden] { display: none; }
.itin-panel-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1.2rem; }
@media (max-width: 720px) { .itin-panel-grid { grid-template-columns: 1fr; } }
.itin-panel-media { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.itin-photo { width: 100%; height: 170px; object-fit: cover; border-radius: var(--r-sm, 10px); filter: saturate(.92) contrast(1.02); }
.itin-mini-map { width: 100%; height: 170px; border-radius: var(--r-sm, 10px); overflow: hidden; border: 1px solid var(--line-or); background: rgba(255,255,255,.04); }
.itin-mini-map .leaflet-container { height: 100%; width: 100%; background: #e8e6df; font-family: var(--f-body); }
.itin-map-fallback { font-size: .8rem; color: var(--or-soft); padding: .6rem; }
.itin-panel-info { min-width: 0; color: var(--blanc); }
.itin-why { font-size: .9rem; line-height: 1.55; color: rgba(247,241,230,.9); margin: 0; }
.itin-why strong { color: var(--or); }
.itin-why--empty { font-style: italic; color: var(--or-soft); }
.itin-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .5rem 1.2rem; margin: .9rem 0 0; }
.itin-facts dt { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or-soft); margin: 0; }
.itin-facts dd { font-size: .85rem; color: var(--blanc); margin: .1rem 0 0; }
.itin-wx-wrap { grid-column: 1 / -1; }
.itin-wx-row { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .3rem; }
.itin-wx-day { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 44px; padding: .4rem .3rem;
border: 1px solid var(--line-or); border-radius: 8px; background: rgba(203,161,53,.05); }
.itin-wx-d { font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--or-soft); }
.itin-wx-i { font-size: 1.05rem; color: var(--or); line-height: 1; }
.itin-wx-t { font-size: .76rem; color: var(--blanc); font-weight: 600; }
.itin-wx-t small { color: var(--or-soft); font-weight: 400; margin-left: .1rem; }
.itin-gpx, .itin-links { margin-top: 1rem; }
.itin-gpx h4, .itin-links h4 { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or); margin: 0 0 .4rem; }
.itin-gpx ul, .itin-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.itin-gpx li, .itin-links li { font-size: .85rem; color: var(--blanc); }
.itin-gpx a, .itin-links a { color: var(--or-soft); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.itin-gpx a:hover, .itin-links a:hover { color: var(--or); border-color: var(--line-or); }
/* Bannière photo en tête de page (collection.php) — photo duotone + voile grenat lisible (sprint #157) */
.page-header--photo { position: relative; overflow: hidden; background: var(--field-deep, #4A0A12); }
.page-header--photo::before {
content: ''; position: absolute; inset: 0; z-index: 0;
background: var(--hero) center/cover no-repeat;
filter: contrast(1.04) saturate(.82) sepia(.05);
opacity: .5;
}
.page-header--photo::after {
content: ''; position: absolute; inset: 0; z-index: 0;
background: linear-gradient(110deg, rgba(74,10,18,.94) 0%, rgba(74,10,18,.62) 52%, rgba(74,10,18,.34) 100%);
}
.page-header--photo > .page-header-inner { position: relative; z-index: 1; }
/* Médaillons « Récemment retenues » : icône SVG type (sprint #158) */
.nouveautes-icon svg { width: 20px; height: 20px; }
/* ── Barre nav : densité + groupe déroulant « Univers » (#174) ── */
.site-nav-list { gap: 1.15rem; }
.site-nav-list > li > a,
.nav-group-toggle { white-space: nowrap; }
.site-nav-list > li > a { font-size: 0.74rem; letter-spacing: 0.12em; }
.nav-group { position: relative; }
.nav-group-toggle {
font-family: var(--f-body); font-size: 0.74rem; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--blanc); background: none; border: 0; cursor: pointer;
padding: 0.55rem 0; min-height: 44px;
display: inline-flex; align-items: center; gap: 0.34rem; transition: color 0.2s;
}
.nav-group-toggle:hover, .nav-group.is-active .nav-group-toggle { color: var(--or-soft); }
.nav-caret {
width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
border-top: 4px solid currentColor; opacity: .65; transition: transform .25s var(--ease-out);
}
.nav-group.is-open .nav-caret, .lang-menu.is-open .nav-caret { transform: rotate(180deg); }
/* Panneau déroulant (base : caché ; révélé par .is-open, et au survol desktop) */
.nav-submenu {
position: absolute; top: 100%; left: 50%;
transform: translateX(-50%) translateY(6px);
min-width: 196px; display: flex; flex-direction: column; gap: 0;
list-style: none; margin: 0; padding: 0.4rem;
background: var(--field-deep, #4A0A12); border: 1px solid var(--line-or);
border-radius: var(--r-md, 14px); box-shadow: 0 18px 50px rgba(0,0,0,.4);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility .2s;
z-index: 120;
}
.nav-group.is-open .nav-submenu {
opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-submenu > li { width: 100%; margin: 0; }
.nav-submenu a {
display: block; padding: 0.6rem 0.85rem; border-radius: 9px; min-height: auto;
font-family: var(--f-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em;
text-transform: none; color: var(--blanc); transition: background .18s, color .18s;
}
.nav-submenu a::after { display: none; }
.nav-submenu a:hover, .nav-submenu a.is-active { background: rgba(203,161,53,.14); color: var(--or-soft); }
/* ── Sélecteur de langue : pastille globe + déroulant (#174) ── */
.lang-menu { position: relative; display: flex; align-items: center; }
.lang-toggle {
display: inline-flex; align-items: center; gap: 0.4rem;
background: none; border: 1px solid var(--line-or); border-radius: 999px;
padding: 0.3rem 0.6rem; min-height: 36px; cursor: pointer;
color: var(--or-soft); font-family: var(--f-body);
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
transition: border-color .2s, color .2s, background .2s;
}
.lang-toggle:hover, .lang-menu.is-open .lang-toggle { color: var(--or); border-color: var(--or); }
.lang-globe { display: block; }
.lang-current { line-height: 1; }
.lang-menu .lang-dropdown {
position: absolute; top: 100%; right: 0; transform: translateY(6px);
display: block; min-width: 184px; list-style: none; margin: 0; padding: 0.4rem;
background: var(--field-deep, #4A0A12); border: 1px solid var(--line-or);
border-radius: var(--r-md, 14px); box-shadow: 0 18px 50px rgba(0,0,0,.4);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .2s, transform .2s, visibility .2s; z-index: 120;
}
.lang-menu.is-open .lang-dropdown {
opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.lang-dropdown li { margin: 0; }
.lang-dropdown a {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: 0.55rem 0.75rem; border-radius: 9px; text-decoration: none;
color: var(--blanc); font-family: var(--f-body); font-size: 0.82rem; font-weight: 500;
transition: background .18s, color .18s;
}
.lang-dropdown a:hover { background: rgba(203,161,53,.14); color: var(--or-soft); }
.lang-dropdown a.is-active { color: var(--or); }
.lang-dropdown .lang-code { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; color: var(--or-soft); opacity: .85; }
/* Desktop : ouverture au survol / focus clavier en plus du clic */
@media (min-width: 901px) {
.site-nav { display: flex; align-items: center; gap: 1.3rem; }
.nav-group:hover .nav-submenu, .nav-group:focus-within .nav-submenu {
opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.lang-menu:hover .lang-dropdown, .lang-menu:focus-within .lang-dropdown {
opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
}
/* Mobile (burger) : groupe en accordéon, langues en pastilles visibles */
@media (max-width: 900px) {
.nav-group { width: 100%; }
.nav-group-toggle {
width: 100%; justify-content: space-between;
font-family: var(--f-display); font-size: 1.6rem; text-transform: none;
letter-spacing: -0.01em; font-weight: 400; color: var(--blanc);
padding: 0.7rem 0; min-height: 56px; border-bottom: 1px solid var(--line-or);
}
.nav-caret { border-left-width: 5px; border-right-width: 5px; border-top-width: 6px; }
.nav-group .nav-submenu {
position: static; left: auto; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
min-width: 0; background: none; border: 0; box-shadow: none; padding: 0;
max-height: 0; overflow: hidden; transition: max-height .35s var(--ease-out);
}
.nav-group.is-open .nav-submenu { max-height: 360px; left: auto; transform: none; }
.nav-submenu a {
font-family: var(--f-display); font-size: 1.18rem; font-weight: 400;
padding: 0.55rem 0 0.55rem 1.1rem; color: var(--blanc);
}
.nav-submenu a:hover, .nav-submenu a.is-active { background: none; color: var(--or-soft); }
.lang-menu {
width: 100%; display: block; margin-top: var(--s-3);
padding-top: var(--s-3); border-top: 1px solid var(--line-or);
}
.lang-toggle { display: none; }
.lang-menu .lang-dropdown {
position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
display: flex; flex-flow: row wrap; gap: .45rem; min-width: 0;
background: none; border: 0; box-shadow: none; padding: 0;
}
.lang-dropdown a {
border: 1px solid var(--line-or); border-radius: 999px;
padding: .45rem .85rem; justify-content: center; gap: .4rem; font-size: .8rem;
}
.lang-dropdown a.is-active { border-color: var(--or); }
}
/* ── Tuto PWA « écran d'accueil » (#170) ───────────────────── */
.pwa-tip {
position: fixed; left: 1rem; right: 1rem; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
max-width: 460px; margin: 0 auto; z-index: 1200;
background: var(--grad-grenat, linear-gradient(165deg, #7C1622, #4A0A12));
border: 1px solid var(--line-or); border-radius: var(--r-md, 16px); box-shadow: var(--el-2, 0 18px 50px rgba(0,0,0,.4));
padding: 1rem 1.1rem; color: var(--blanc);
transform: translateY(140%); opacity: 0; transition: transform .42s var(--ease-out), opacity .42s;
}
.pwa-tip.is-shown { transform: translateY(0); opacity: 1; }
@media (min-width: 901px) { .pwa-tip { left: auto; right: 1.4rem; bottom: 1.4rem; } }
.pwa-tip-body { display: flex; gap: .7rem; align-items: flex-start; }
.pwa-tip-mark { color: var(--or); font-size: 1.2rem; line-height: 1.3; }
.pwa-tip-body p { margin: 0; font-size: .86rem; line-height: 1.5; color: rgba(247,241,230,.9); }
.pwa-tip-body strong { color: var(--blanc-pur); font-family: var(--f-display); font-weight: 500; font-size: .95rem; }
.pwa-tip-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .8rem; }
.pwa-tip-install { background: var(--or); color: var(--field-deep); border: 0; border-radius: var(--r-sm, 8px); padding: .5rem .9rem; font: 600 .82rem var(--f-body); cursor: pointer; }
.pwa-tip-later { background: transparent; color: var(--or-soft); border: 1px solid var(--line-or); border-radius: var(--r-sm, 8px); padding: .5rem .9rem; font: 600 .82rem var(--f-body); cursor: pointer; }
.pwa-tip-install:hover { filter: brightness(1.06); }
.pwa-tip-later:hover { color: var(--or); border-color: var(--or); }
/* ── (#171) Sections accueil modernisées : relief, halo, balayage doré, flottement ── */
.guarantee, .hasard-feature-inner { transition: transform .45s var(--ease-out, ease), box-shadow .45s var(--ease-out, ease); }
.guarantee:hover { transform: translateY(-4px); box-shadow: 0 22px 54px rgba(0,0,0,.45), 0 0 34px rgba(203,161,53,.16); }
.hasard-feature-inner:hover { transform: translateY(-4px); box-shadow: 0 22px 54px rgba(0,0,0,.42), 0 0 34px rgba(203,161,53,.18); }
/* Balayage doré (sheen) périodique, sous le contenu (z-index 0 ; contenu en z-index 1). */
.guarantee::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(105deg, transparent 32%, rgba(230,202,133,.12) 49%, transparent 64%);
background-size: 240% 100%; background-position: 150% 0;
}
.hasard-feature-inner::after {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
background: linear-gradient(105deg, transparent 32%, rgba(230,202,133,.10) 49%, transparent 64%);
background-size: 240% 100%; background-position: 150% 0;
}
.hasard-feature-inner > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
.guarantee::before, .hasard-feature-inner::after { animation: epyShine 7s ease-in-out infinite; }
@keyframes epyShine { 0% { background-position: 150% 0; } 55%, 100% { background-position: -60% 0; } }
.hasard-feature-inner::before { animation: epyFloat 6.5s ease-in-out infinite; }
@keyframes epyFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-9px) rotate(-5deg); } }
}
/* (#172) Séparateur renforcé entre « Rien n'entre par hasard » et « Pas d'idée ? » */
.orne--sep { margin-top: var(--s-7); margin-bottom: var(--s-7); opacity: .6; font-size: 1rem; }
@media (max-width: 760px) { .orne--sep { margin-top: var(--s-6); margin-bottom: var(--s-6); } }
/* ── (#173) Section unifiée « au hasard » : split contenu / média animé ── */
.hasard-split {
max-width: var(--max-w); margin: var(--s-6) auto; padding: 0 var(--pad-x);
display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.4rem, 3.5vw, 2.6rem);
align-items: stretch;
}
@media (max-width: 860px) { .hasard-split { grid-template-columns: 1fr; } }
.hasard-split > * { min-width: 0; }
/* Colonne contenu */
.hasard-split-content {
position: relative; overflow: hidden;
background: var(--grad-grenat, linear-gradient(165deg, #7C1622 0%, #6B0F1A 60%, #4A0A12 100%));
border: 1px solid var(--line-or); border-radius: var(--r-lg, 24px);
box-shadow: var(--el-2, 0 16px 40px rgba(0,0,0,.4));
padding: clamp(1.6rem, 4vw, 2.8rem);
display: flex; flex-direction: column; justify-content: center; gap: .55rem;
}
.hasard-split-content > * { position: relative; z-index: 1; }
.hasard-split-eyebrow { font-family: var(--f-body); font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--or); }
.hasard-split-eyebrow span { color: var(--or); }
.hasard-split-title { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.04; color: var(--blanc-pur); margin: .1rem 0 .2rem; }
.hasard-split-title em { color: var(--or); font-family: var(--f-edit); font-style: italic; }
.hasard-split-lead { color: var(--or-soft); font-family: var(--f-body); font-size: .92rem; line-height: 1.55; }
.hasard-split-pitch { color: rgba(247,241,230,.9); font-size: .92rem; line-height: 1.6; margin-top: .3rem; }
.hasard-split-pitch strong { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.2rem; color: var(--blanc-pur); margin-bottom: .25rem; }
.hasard-split-pitch strong em { color: var(--or); font-family: var(--f-edit); font-style: italic; }
.hasard-split-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }
/* Colonne média : photo duotone Sang i Or, animée (Ken Burns) + légende éditoriale */
.hasard-split-media { position: relative; overflow: hidden; border: 1px solid var(--line-or); border-radius: var(--r-lg, 24px); min-height: 340px; background: var(--field-deep); }
.hasard-split-photo { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(.78) contrast(1.04) brightness(.9); transform: scale(1.06); }
.hasard-split-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(176,20,47,.22) 0%, rgba(74,10,18,.58) 100%); }
.hasard-split-caption {
position: absolute; left: 1.1rem; bottom: 1rem; z-index: 2;
display: inline-flex; align-items: center; gap: .42rem;
font-family: var(--f-body); font-size: .72rem; font-weight: 600;
letter-spacing: .16em; text-transform: uppercase; color: var(--or-soft);
text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.hasard-split-caption span { color: var(--or); }
@media (prefers-reduced-motion: no-preference) {
.hasard-split-photo { animation: epyKenburns 22s ease-in-out infinite alternate; }
@keyframes epyKenburns { from { transform: scale(1.06) translate(0,0); } to { transform: scale(1.16) translate(-2%, -2%); } }
}
/* ════════════════════════════════════════════════════════════════
#175 — « Ma sélection » (listes Google Maps de V.R.) + badge auteur
La vraie sélection prime visuellement sur le fond DATAtourisme.
════════════════════════════════════════════════════════════════ */
.ma-selection { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.ma-selection-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }
.ma-selection-lead {
max-width: 62ch; margin: 0.5rem 0 2rem;
font-family: var(--f-edit); font-size: clamp(1.05rem, 2.2vw, 1.25rem);
line-height: 1.6; color: var(--or-soft);
}
.ma-selection-grid {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 0.9rem;
}
.ma-selection-grid li { margin: 0; }
.ma-selection-tile {
display: flex; align-items: center; gap: 0.9rem;
padding: 1rem 1.1rem; min-height: 74px; height: 100%;
background: rgba(247, 241, 230, 0.04);
border: 1px solid var(--line-or); border-radius: var(--r-md, 16px);
color: var(--blanc);
/* opacity + clip-path inclus : sans eux cette transition écrasait celle de
[data-reveal-clip] (cascade) et les tuiles apparaissaient sans fondu. */
transition: transform .28s var(--ease-out), border-color .28s, background .28s, box-shadow .28s,
opacity .45s var(--ease-out), clip-path .6s var(--ease-wind);
transition-delay: 0s, 0s, 0s, 0s, var(--reveal-delay, 0ms), var(--reveal-delay, 0ms);
}
.ma-selection-tile:hover, .ma-selection-tile:focus-visible {
transform: translateY(-3px); border-color: var(--or);
background: rgba(203, 161, 53, 0.09); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
}
.ma-selection-glyph {
flex: none; width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
border-radius: 12px; font-size: 1.2rem; color: var(--field-deep, #4A0A12);
background: linear-gradient(155deg, #E6CA85 0%, #CBA135 55%, #9A7B28 100%);
}
.ma-selection-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.ma-selection-name { font-family: var(--f-display); font-weight: 500; font-size: 1.02rem; line-height: 1.2; }
.ma-selection-count { font-size: 0.74rem; letter-spacing: 0.04em; color: var(--or-soft); }
.ma-selection-arrow { flex: none; color: var(--or-soft); opacity: .7; transition: transform .28s var(--ease-out); }
.ma-selection-tile:hover .ma-selection-arrow { transform: translateX(4px); opacity: 1; }
.ma-selection-foot { margin: 1.5rem 0 0; }
.ma-selection-foot a {
font-family: var(--f-body); font-weight: 600; font-size: 0.82rem;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--or);
}
.ma-selection-foot a:hover { color: var(--or-soft); }
/* Badge « Choix de l'auteur » — lieux epy-* (sélection Google Maps de V.R.) */
.author-pick {
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.3rem 0.62rem; border-radius: 999px;
font-family: var(--f-body); font-size: 0.66rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
color: var(--field-deep, #4A0A12);
background: linear-gradient(155deg, #E6CA85 0%, #CBA135 55%, #9A7B28 100%);
border: 1px solid rgba(203, 161, 53, 0.5); white-space: nowrap; vertical-align: middle;
}
.author-pick--sm { font-size: 0.6rem; padding: 0.22rem 0.5rem; letter-spacing: 0.07em; }
/* ════════════════════════════════════════════════════════════════
#177 — Icônes typées (miroir markers.js) : tuiles « Ma sélection »
+ menu déroulant « Univers » enrichi d'icônes.
════════════════════════════════════════════════════════════════ */
.ma-selection-glyph svg { width: 22px; height: 22px; }
/* Dropdown Univers : icône + label, pastille discrète */
.nav-submenu { min-width: 222px; }
.nav-submenu a { display: flex; align-items: center; gap: 0.6rem; }
.nav-submenu-ico {
flex: none; width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px; background: rgba(203, 161, 53, 0.12); color: var(--or-soft);
transition: background .18s, color .18s;
}
.nav-submenu-ico svg { width: 17px; height: 17px; }
.nav-submenu-label { flex: 1; }
.nav-submenu a:hover .nav-submenu-ico,
.nav-submenu a.is-active .nav-submenu-ico { background: rgba(203, 161, 53, 0.22); color: var(--or); }
@media (max-width: 900px) {
.nav-submenu-ico { width: 34px; height: 34px; }
.nav-submenu-ico svg { width: 19px; height: 19px; }
}
/* ════════════════════════════════════════════════════════════════
#178 — Générateur « hub » : point de départ + 3 modes
(sur mesure / par thème / 1 destination au hasard).
════════════════════════════════════════════════════════════════ */
.gen-origin, .gen-dates, .gen-modes, .gen-panel {
max-width: var(--max-w); margin-left: auto; margin-right: auto;
padding-left: var(--pad-x); padding-right: var(--pad-x);
}
.gen-panel[hidden] { display: none; }
.gen-panel .itin-form { max-width: none; padding: 0; margin: 0; }
/* Point de départ (adresse / ville / géoloc) */
.gen-origin { margin-bottom: var(--s-4); }
.gen-origin-label { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--f-body); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--or-soft); margin-bottom: .55rem; }
.gen-origin-ico { color: var(--or); font-size: 1rem; }
.gen-origin-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.gen-origin-input { flex: 1 1 280px; min-width: 0; background: var(--field-deep); border: 1px solid var(--line-or); color: var(--blanc-pur, #fff); padding: .7rem .95rem; border-radius: var(--r-sm, 10px); font: 500 .95rem var(--f-body); }
.gen-origin-input::placeholder { color: rgba(247, 241, 230, .45); }
.gen-origin-input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 2px rgba(203, 161, 53, .25); }
.gen-origin-btn { white-space: nowrap; }
.gen-origin-status { margin: .55rem 0 0; min-height: 1.2em; font-size: .82rem; color: var(--encre-mute, #9a8a7f); }
.gen-origin-status.is-set { color: var(--or); }
/* Dates du séjour (optionnel) : alimente le bloc « Pendant votre séjour » (chantier agenda C) */
.gen-dates { margin-bottom: var(--s-4); }
.gen-dates .gen-origin-label small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--encre-mute, #9a8a7f); }
.gen-dates-row { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; }
.gen-dates-field { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-body); font-size: .82rem; color: var(--or-soft); }
.gen-dates-field input { background: var(--field-deep); border: 1px solid var(--line-or); color: var(--blanc-pur, #fff); padding: .55rem .7rem; border-radius: var(--r-sm, 10px); font: 500 .9rem var(--f-body); color-scheme: dark; }
.gen-dates-field input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 2px rgba(203, 161, 53, .25); }
.gen-dates-hint { margin: .55rem 0 0; font-size: .78rem; color: var(--encre-mute, #9a8a7f); }
/* Onglets de mode */
.gen-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: var(--s-4); }
.gen-mode { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem; padding: .9rem .6rem; cursor: pointer; background: rgba(247, 241, 230, .04); border: 1px solid var(--line-or); border-radius: var(--r-md, 16px); color: var(--blanc); transition: border-color .2s, background .2s, transform .2s; }
.gen-mode:hover { border-color: var(--or-soft); transform: translateY(-2px); }
.gen-mode.is-active { border-color: var(--or); background: rgba(203, 161, 53, .12); }
.gen-mode-ic { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--or-soft); }
.gen-mode-ic svg { width: 26px; height: 26px; }
.gen-mode.is-active .gen-mode-ic { color: var(--or); }
.gen-mode-t { font-family: var(--f-display); font-weight: 500; font-size: 1rem; }
.gen-mode-s { font-size: .7rem; letter-spacing: .03em; color: var(--or-soft); }
.gen-panel-intro { max-width: 62ch; margin: 0 0 1.2rem; font-family: var(--f-edit); font-size: 1.02rem; line-height: 1.6; color: var(--or-soft); }
/* Chips univers : icône SVG + hint secteur */
.itin-chip-ic { display: inline-flex; align-items: center; color: var(--or-soft); }
.itin-chip-ic svg { width: 16px; height: 16px; }
.itin-chips label:hover { border-color: var(--or-soft); }
.itin-field-hint { margin: .3rem 0 0; font-size: .76rem; color: var(--or); font-style: italic; }
/* Thèmes */
.gen-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: .7rem; }
.gen-theme { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; cursor: pointer; text-align: left; background: rgba(247, 241, 230, .04); border: 1px solid var(--line-or); border-radius: var(--r-md, 16px); color: var(--blanc); transition: border-color .2s, background .2s, transform .2s; }
.gen-theme:hover { border-color: var(--or); background: rgba(203, 161, 53, .1); transform: translateY(-2px); }
.gen-theme.is-loading { opacity: .6; pointer-events: none; }
.gen-theme-ic { flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--field-deep); background: linear-gradient(155deg, #E6CA85, #CBA135 55%, #9A7B28); }
.gen-theme-ic svg { width: 20px; height: 20px; }
.gen-theme-l { font-family: var(--f-display); font-weight: 500; font-size: .98rem; line-height: 1.15; }
/* Mode hasard */
.gen-single-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.gen-single-go { font-size: 1.05rem; padding: .9rem 1.6rem; }
.gen-single-sel { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--blanc); }
.gen-single-sel input { accent-color: var(--or); }
/* Carte « destination surprise » (mode hasard) */
.itin-single-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.itin-single-ic { flex: none; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; color: var(--field-deep); background: linear-gradient(155deg, #E6CA85, #CBA135 55%, #9A7B28); }
.itin-single-ic svg { width: 30px; height: 30px; }
.itin-single-eyebrow { display: block; font-family: var(--f-body); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--or-soft); }
.itin-single-title { font-family: var(--f-display); font-size: clamp(1.6rem, 4vw, 2.4rem); margin: .1rem 0; }
.itin-single-meta { color: var(--or-soft); font-size: .9rem; margin: 0; }
@media (max-width: 640px) {
.gen-modes { grid-template-columns: 1fr; }
.gen-mode { flex-direction: row; justify-content: flex-start; text-align: left; gap: .7rem; }
.gen-mode-s { margin-left: auto; }
}
/* ════════════════════════════════════════════════════════════════
#179 — Générateur : UI moderne (autocomplétion adresse, chips
bascule, carte d'aperçu du parcours, transitions).
════════════════════════════════════════════════════════════════ */
/* Champ adresse + liste d'autocomplétion (BAN) */
.gen-origin-field { position: relative; flex: 1 1 300px; min-width: 0; }
.gen-origin-field .gen-origin-input { width: 100%; flex: none; }
.gen-ac {
position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; right: 0;
list-style: none; margin: 0; padding: .35rem;
background: var(--field-deep, #4A0A12); border: 1px solid var(--line-or);
border-radius: var(--r-md, 14px); box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
max-height: 320px; overflow-y: auto;
}
.gen-ac[hidden] { display: none; }
.gen-ac-item {
display: flex; align-items: center; gap: .6rem; margin: 0;
padding: .55rem .7rem; border-radius: 9px; cursor: pointer;
color: var(--blanc); transition: background .15s;
}
.gen-ac-item.is-active, .gen-ac-item:hover { background: rgba(203, 161, 53, .16); }
.gen-ac-pin { flex: none; color: var(--or-soft); font-size: .9rem; }
.gen-ac-txt { display: flex; flex-direction: column; min-width: 0; }
.gen-ac-main { font-size: .92rem; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gen-ac-ctx { font-size: .74rem; color: var(--or-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Chips univers : vrais boutons-bascule (remplissage or à l'état actif) */
.itin-chips label {
position: relative; transition: background .2s var(--ease-out), color .2s, border-color .2s, transform .15s;
}
.itin-chips label:active { transform: scale(.97); }
.itin-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.itin-chips label:has(input:checked) {
background: linear-gradient(155deg, #E6CA85, #CBA135 60%, #9A7B28);
color: var(--field-deep, #4A0A12); border-color: var(--or);
}
.itin-chips label:has(input:checked) .itin-chip-ic { color: var(--field-deep, #4A0A12); }
.itin-chips label:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--field-deep), 0 0 0 4px var(--or); }
/* Transition d'entrée des panneaux de mode */
.gen-panel--in { animation: genFade .32s var(--ease-out) both; }
@keyframes genFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gen-panel--in { animation: none; } }
/* Onglets de mode : accent animé sous l'actif */
.gen-mode { position: relative; overflow: hidden; }
.gen-mode::after {
content: ''; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px;
background: var(--or); transition: left .28s var(--ease-out), right .28s var(--ease-out);
}
.gen-mode.is-active::after { left: 16%; right: 16%; }
/* Carte d'aperçu du parcours */
.itin-overview {
height: 340px; margin: 0 0 var(--s-4); border-radius: var(--r-md, 16px);
overflow: hidden; border: 1px solid var(--line-or); background: var(--field-deep);
z-index: 0;
}
.itin-omark span {
display: flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%;
background: linear-gradient(155deg, #E6CA85, #CBA135 60%, #9A7B28);
color: var(--field-deep, #4A0A12); font: 700 .8rem var(--f-body, sans-serif);
border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
/* Slider : bulle de valeur plus lisible */
.itin-field--steps label b {
display: inline-flex; align-items: center; justify-content: center;
min-width: 1.7em; padding: 0 .35em; border-radius: 6px;
background: rgba(203, 161, 53, .16); color: var(--or) !important;
}
/* ════════════════════════════════════════════════════════════════
#181 — Règle typo : TITRES DE PAGE EN CAPITALES.
Hiérarchie visuelle nette (titre > sous-titre > corps > citation).
text-transform seul → le texte réel reste intact (SEO + lecteurs d'écran).
════════════════════════════════════════════════════════════════ */
.page-header h1,
.hero-title,
.legal-page h1 { text-transform: uppercase; }
/* Le mot-clé éditorial (em, Newsreader italique or) garde son italique, en capitales,
avec un filet d'interlettrage pour rester lisible en gros caractères. */
.page-header h1 em,
.legal-page h1 em { letter-spacing: 0.012em; }
/* ════════════════════════════════════════════════════════════════
#182 — Distances & temps de route + correctif z-index cartes.
════════════════════════════════════════════════════════════════ */
/* Connecteur de trajet entre deux étapes (distance + temps estimé) */
.itin-leg {
list-style: none; margin: .15rem 0 .15rem 1.4rem; padding: .1rem 0;
font-family: var(--f-body); font-size: .78rem; color: var(--or-soft);
display: flex; align-items: center; gap: .45rem;
}
.itin-leg-arr { color: var(--or); font-weight: 700; }
/* Confine les z-index internes de Leaflet : sinon, en défilant sur mobile, les tuiles/contrôles
de la carte passent AU-DESSUS du menu fixe (header z-index 100). isolation:isolate crée un
contexte d'empilement sur chaque carte → ses couches restent sous l'en-tête. */
.leaflet-container { isolation: isolate; }
.itin-overview, .itin-mini-map { position: relative; }
/* #186 — Source citée sous une description (intégrité : tout fait affiché est sourçable) */
.lieu-source, .itin-source { font-size: .8rem; color: var(--or-soft); opacity: .9; margin: .5rem 0 0; }
.lieu-source a, .itin-source a { color: var(--or); text-decoration: underline; text-underline-offset: 2px; }
.lieu-source a:hover, .itin-source a:hover { color: var(--blanc); }
/* ════════════════════════════════════════════════════════════════
#193 — Confort mobile : typo calibrée + densité.
L'écran mobile se lit à ~30 cm : les corps d'affiche desktop y sont
surdimensionnés. Tailles -12 à -18 %, sections resserrées, plus de
contenu par écran sans perte de lisibilité. Charte intouchée.
════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
/* — Titres recalibrés — */
.hero-title { font-size: clamp(2.1rem, 8vw, 2.8rem); }
.page-header h1 { font-size: clamp(1.9rem, 6.4vw, 2.6rem); letter-spacing: -0.03em; }
.section-title { font-size: clamp(1.45rem, 4.8vw, 1.9rem); }
.theme-card h3 { font-size: clamp(1.4rem, 4.6vw, 1.9rem); }
.theme-card--main h3 { font-size: clamp(1.7rem, 5.6vw, 2.2rem); }
.cat-card-num { font-size: clamp(1.9rem, 6.5vw, 2.6rem); }
.hasard-split-title { font-size: clamp(1.5rem, 5vw, 1.9rem); }
.lieu-section h2 { font-size: clamp(1.3rem, 4.4vw, 1.7rem); }
/* — Leads : corps efficace, pas d'affiche — */
.hero-sub { font-size: 0.98rem; line-height: 1.5; }
.page-header-lead { font-size: 0.98rem; line-height: 1.55; max-width: none; }
/* — Densité : headers et sections montrent plus, plus vite — */
.page-header { padding-top: 72px; padding-bottom: var(--s-3); }
.page-header h1 { margin-bottom: var(--s-2); }
.ma-selection { padding: var(--s-5) 0; }
.ma-selection-grid { gap: 0.55rem; }
.ma-selection-tile { min-height: 58px; padding: 0.65rem 0.85rem; }
.ma-selection-name { font-size: 0.95rem; }
.explorer-list { gap: 0.55rem; margin-top: var(--s-3); }
.place-card { min-height: 0; }
/* — Encadrés entiers : une tuile ne doit pas dépasser un écran — */
.tile, .theme-card, .hasard-split-content { max-height: none; }
.hero-bento .t-senyera { min-height: 88px; }
}
/* ════════════════════════════════════════════════════════════════
#199 — AGENDA — événements des P-O : liste chrono groupée par jour
(sticky day headers, mobile-first) + vue mois 7 col + filtres
kind/ville/période + export ICS. Données : data/events.json (#198).
════════════════════════════════════════════════════════════════ */
.agenda { padding-bottom: var(--s-7); }
/* ── Toolbar sticky (pattern explorer-toolbar) ─────────────────── */
.agenda-toolbar {
position: sticky;
top: 56px;
z-index: 40;
background: var(--field);
border-bottom: 1px solid var(--line-or);
padding: 0.7rem 0;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
html.is-scrolling-down .agenda-toolbar { transform: translateY(calc(-100% - 57px)); }
.agenda-toolbar { transition: transform 0.3s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
html.is-scrolling-down .agenda-toolbar { transform: none; }
}
.agenda-toolbar-inner {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.agenda-search {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0 0.85rem;
border: 1px solid var(--line-or);
border-radius: var(--r-md);
background: rgba(247, 241, 230, 0.04);
min-height: 44px;
}
.agenda-search svg { width: 17px; height: 17px; color: var(--or-soft); flex: 0 0 auto; }
.agenda-search input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
color: var(--blanc);
font-family: var(--f-body);
font-size: 0.95rem;
padding: 0.55rem 0;
outline: none;
}
.agenda-search input::placeholder { color: var(--blanc-soft); }
.agenda-clear {
display: none;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 0;
border-radius: 999px;
background: rgba(203, 161, 53, 0.12);
color: var(--or-soft);
cursor: pointer;
font-size: 0.75rem;
}
/* Chips kind + période : pattern pilule explorer-filters */
.agenda-filters,
.agenda-periods {
display: flex;
gap: 0.4rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
scroll-snap-type: x proximity;
}
.agenda-filters::-webkit-scrollbar,
.agenda-periods::-webkit-scrollbar { display: none; }
.agenda-filters button,
.agenda-periods button {
flex: 0 0 auto;
padding: 0.45rem 0.9rem;
font-family: var(--f-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--or-soft);
background: transparent;
border: 1px solid var(--line-or);
border-radius: 999px;
min-height: 36px;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s var(--ease-out);
}
.agenda-filters button:hover,
.agenda-periods button:hover { color: var(--or); border-color: var(--or); }
.agenda-filters button.is-active,
.agenda-periods button.is-active { background: var(--or); color: var(--field-deep); border-color: var(--or); }
.agenda-meta {
display: flex;
align-items: center;
gap: 0.55rem;
flex-wrap: wrap;
}
.agenda-day,
.agenda-ville {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--or-soft);
}
.agenda-day input,
.agenda-ville select {
font-family: var(--f-body);
font-size: 0.82rem;
color: var(--blanc);
background: rgba(247, 241, 230, 0.04);
border: 1px solid var(--line-or);
border-radius: var(--r-sm);
padding: 0.35rem 0.55rem;
min-height: 36px;
max-width: 200px;
color-scheme: dark;
}
.agenda-day input:focus-visible,
.agenda-ville select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.agenda-ville select option { color: #0E1A1F; background: #F7F1E6; } /* hex volontaires : popup natif OS, les tokens remappés (--encre = blanc) seraient illisibles */
.agenda-view { display: inline-flex; gap: 0.3rem; margin-left: auto; }
.agenda-view button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 36px;
border: 1px solid var(--line-or);
border-radius: var(--r-sm);
background: transparent;
color: var(--or-soft);
cursor: pointer;
transition: all 0.2s var(--ease-out);
}
.agenda-view button svg { width: 16px; height: 16px; }
.agenda-view button:hover { color: var(--or); border-color: var(--or); }
.agenda-view button.is-active { background: var(--or); color: var(--field-deep); border-color: var(--or); }
#agendaCount {
font-size: 0.75rem;
color: var(--blanc-soft);
white-space: nowrap;
}
/* ── Liste chrono : sticky day headers ─────────────────────────── */
.agenda-list {
display: flex;
flex-direction: column;
gap: 0.55rem;
margin-top: var(--s-4);
}
.agenda-day-head {
position: sticky;
top: 56px;
z-index: 30;
display: flex;
align-items: baseline;
gap: 0.5rem;
margin: var(--s-4) 0 0.2rem;
padding: 0.45rem 0.15rem;
font-family: var(--f-display);
font-size: 1.05rem;
font-weight: 600;
color: var(--blanc-pur);
background: var(--field);
border-bottom: 1px solid var(--line-or);
}
.agenda-day-head:first-child { margin-top: 0; }
.agenda-day-today {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--field-deep);
background: var(--or);
border-radius: 999px;
padding: 0.18rem 0.6rem;
}
/* ── Carte événement (base place-card, profondeur #126) ────────── */
.agenda-card {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(0.7rem, 1.6vw, 1rem);
padding: clamp(0.85rem, 1.6vw, 1.15rem);
align-items: start;
border: 1px solid rgba(203, 161, 53, 0.18);
border-radius: var(--r-md);
background: rgba(247, 241, 230, 0.02);
color: var(--blanc);
box-shadow: var(--el-1);
animation: agendaFade 0.32s var(--ease-out) both;
}
@keyframes agendaFade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.agenda-card { animation: none; }
}
.agenda-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var(--line-or);
border-radius: 999px;
background: rgba(203, 161, 53, 0.08);
color: var(--or);
}
.agenda-card-icon svg { width: 20px; height: 20px; }
.agenda-card-body { min-width: 0; }
.agenda-card-head {
display: flex;
align-items: baseline;
gap: 0.55rem;
flex-wrap: wrap;
}
.agenda-card-name {
font-family: var(--f-display);
font-size: clamp(0.98rem, 2.4vw, 1.1rem);
font-weight: 500;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.agenda-card-kind {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--or-soft);
border: 1px solid var(--line-or);
border-radius: 999px;
padding: 0.14rem 0.5rem;
white-space: nowrap;
}
.agenda-card-meta {
font-size: 0.78rem;
color: var(--or-soft);
margin: 0.25rem 0 0;
}
.agenda-card-date { font-weight: 600; }
.agenda-card-desc {
font-size: 0.88rem;
line-height: 1.5;
color: var(--encre-soft);
margin: 0.35rem 0 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.agenda-card-next {
font-size: 0.75rem;
color: var(--blanc-soft);
margin: 0.3rem 0 0;
}
.agenda-card-actions {
display: flex;
align-items: center;
gap: 0.85rem;
flex-wrap: wrap;
margin: 0.55rem 0 0;
font-size: 0.78rem;
}
.agenda-card-actions a,
.agenda-card-actions button {
font-family: var(--f-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--or);
background: none;
border: 0;
padding: 0.2rem 0;
cursor: pointer;
text-decoration: none;
min-height: 32px;
display: inline-flex;
align-items: center;
}
.agenda-card-actions a:hover,
.agenda-card-actions button:hover { color: var(--or-soft); text-decoration: underline; }
.agenda-card-src { opacity: 0.6; font-weight: 400 !important; }
/* ♥ carnet (sprint C) : ajouté = vert, plus cliquable */
.agenda-card-actions .agenda-fav.is-saved,
.agenda-card-actions .agenda-fav.is-saved:hover { color: var(--vert, #6BA852); cursor: default; text-decoration: none; }
.agenda-loadmore { text-align: center; margin-top: var(--s-4); }
.agenda-loadmore button {
padding: 0.68rem 1.4rem;
border: 1px solid var(--or);
border-radius: var(--r-sm);
background: transparent;
color: var(--or);
font-family: var(--f-body);
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s var(--ease-out);
}
.agenda-loadmore button:hover { background: var(--or); color: var(--field-deep); }
.agenda-empty {
text-align: center;
padding: var(--s-6) var(--s-3);
color: var(--blanc-soft);
}
.agenda-empty p:first-child { color: var(--or); font-size: 1.4rem; margin-bottom: 0.4rem; }
/* ── Vue mois : grille 7 colonnes ──────────────────────────────── */
.agenda-cal {
margin-top: var(--s-4);
border: 1px solid var(--line-or);
border-radius: var(--r-lg);
padding: clamp(0.8rem, 2vw, 1.4rem);
background: rgba(247, 241, 230, 0.02);
}
.agenda-cal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
margin-bottom: 0.8rem;
}
.agenda-cal-head h2 {
font-family: var(--f-display);
font-size: clamp(1.05rem, 2.6vw, 1.3rem);
font-weight: 600;
color: var(--blanc-pur);
margin: 0;
}
.agenda-cal-head button {
width: 38px;
height: 38px;
border: 1px solid var(--line-or);
border-radius: var(--r-sm);
background: transparent;
color: var(--or);
font-size: 1rem;
cursor: pointer;
transition: all 0.2s var(--ease-out);
}
.agenda-cal-head button:hover:not(:disabled) { background: var(--or); color: var(--field-deep); }
.agenda-cal-head button:disabled { opacity: 0.3; cursor: default; }
.agenda-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.25rem;
}
.agenda-cal-dow {
text-align: center;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--or-soft);
padding: 0.3rem 0;
}
.agenda-cal-day {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.15rem;
min-height: 52px;
border: 1px solid transparent;
border-radius: var(--r-sm);
background: rgba(247, 241, 230, 0.03);
color: var(--blanc);
font-family: var(--f-body);
font-size: 0.85rem;
cursor: pointer;
transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.agenda-cal-day:hover:not(:disabled) { border-color: var(--or); }
.agenda-cal-day:disabled { opacity: 0.28; cursor: default; }
.agenda-cal-day.is-today { border-color: var(--line-or); background: rgba(203, 161, 53, 0.1); }
.agenda-cal-day.is-selected { background: var(--or); color: var(--field-deep); }
.agenda-cal-day.is-selected .agenda-cal-count { background: var(--field-deep); color: var(--or); }
.agenda-cal-count {
font-size: 0.6rem;
font-weight: 700;
color: var(--field-deep);
background: var(--or);
border-radius: 999px;
padding: 0.05rem 0.4rem;
line-height: 1.4;
}
.agenda-cal-pad { min-height: 52px; }
.agenda-cal-hint {
font-size: 0.75rem;
color: var(--blanc-soft);
text-align: center;
margin: 0.7rem 0 0;
}
/* ── Section « En continu » + note source ──────────────────────── */
.agenda-allyear { margin-top: var(--s-7); }
.agenda-allyear-lead {
font-size: 0.9rem;
color: var(--encre-soft);
margin: 0.4rem 0 var(--s-3);
}
#agendaAllyearList {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
/* Temps forts de l'été (sprint D/E) : vitrine en tête de programme */
.agenda-featured { margin-bottom: var(--s-6); }
.agenda-featured-lead {
font-size: 0.9rem;
color: var(--encre-soft);
margin: 0.4rem 0 var(--s-3);
}
.agenda-featured-list {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
/* Repère discret sur une carte curée (source hors flux DATAtourisme) */
.agenda-card.is-curated { border-left: 2px solid var(--or); }
.agenda-source {
margin-top: var(--s-6);
padding-top: var(--s-3);
border-top: 1px solid var(--line-or);
font-size: 0.75rem;
line-height: 1.6;
color: var(--blanc-soft);
}
/* ── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 700px) {
.agenda-filters button,
.agenda-periods button { padding: 0.35rem 0.7rem; font-size: 0.66rem; min-height: 32px; }
.agenda-meta { gap: 0.45rem; }
.agenda-day span,
.agenda-ville span { display: none; } /* labels redondants avec le contenu des champs */
.agenda-day input { max-width: 138px; }
.agenda-ville select { max-width: 150px; }
#agendaCount { flex-basis: 100%; }
.agenda-day-head { font-size: 0.95rem; } /* top 56px hérité : même offset que la toolbar */
.agenda-cal-day { min-height: 44px; font-size: 0.8rem; }
.agenda-cal-pad { min-height: 44px; }
.agenda-card-actions { gap: 0.7rem; }
}
/* Desktop : toolbar sur une ligne, cartes plus aérées */
@media (min-width: 901px) {
.agenda-toolbar-inner {
display: grid;
grid-template-columns: minmax(220px, 320px) 1fr;
grid-template-areas:
"search filters"
"meta meta";
align-items: center;
column-gap: 0.8rem;
}
.agenda-search { grid-area: search; }
.agenda-filters { grid-area: filters; }
.agenda-meta { grid-area: meta; }
}