/* ==========================================================================
   FFGR Marseille : pages dédiées (complément de /assets/style.css)
   Publié en /assets/landing.css, chargé APRÈS style.css par les 14 pages dédiées.
   CSP stricte (style-src 'self') : aucun attribut style ni balise style dans les pages, tout est ici.
   Mobile d’abord ; uniquement les jetons de couleur de style.css (or, crème, fonds sombres).
   ========================================================================== */

/* ---------- Bandeau d’ouverture ---------- */
.subhero { display: grid; grid-template-columns: 1fr; }
.subhero-media { position: relative; overflow: hidden; order: -1; height: 46vh; min-height: 280px; max-height: 520px; margin-top: 76px; background: var(--bg-2); }
.subhero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.subhero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 0%, rgba(7, 8, 12, 0) 50%); }
.subhero-text { display: flex; flex-direction: column; justify-content: center; padding: 8px var(--gutter) 56px; min-width: 0; }
.subhero .eyebrow { margin-bottom: 18px; }
.subhero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 9vw, 70px); line-height: 1.05; color: var(--cream); margin: 0 0 22px; letter-spacing: -0.01em; overflow-wrap: break-word; }
.subhero h1 em { font-family: var(--accent); font-style: italic; color: var(--gold-2); font-size: 0.86em; }
.subhero .lead { font-size: 17px; max-width: 34em; color: var(--text); margin: 0 0 32px; }

/* ---------- Fil d’Ariane ---------- */
.crumbs ol { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 6px; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.crumbs li { display: inline-flex; align-items: baseline; }
.crumbs li + li::before { content: "\203A"; color: var(--gold); padding: 0 10px; letter-spacing: 0; }
.crumbs a { color: var(--gold); border-bottom: 1px solid transparent; transition: color 0.25s, border-color 0.25s; }
.crumbs a:hover { color: var(--gold-2); border-bottom-color: var(--line); }
.crumbs [aria-current="page"] { color: var(--cream); }

/* ---------- Corps de page ---------- */
.article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; }
.prose { min-width: 0; max-width: 34em; }
.prose > section + section { margin-top: 56px; }
.prose h2 { font-size: clamp(30px, 7vw, 42px); margin: 0 0 18px; }
.prose h3 { font-size: 24px; margin: 32px 0 10px; }
.prose p { margin: 0 0 18px; }
.prose a { color: var(--gold-2); border-bottom: 1px solid var(--line); transition: border-color 0.25s, color 0.25s; }
.prose a:hover { color: var(--cream); border-bottom-color: var(--gold); }
.prose strong { font-weight: 500; color: var(--cream); }

/* Liste à filets */
.ticks { list-style: none; padding: 0; margin: 0 0 18px; border-top: 1px solid var(--line); }
.ticks li { position: relative; padding: 14px 0 14px 28px; border-bottom: 1px solid var(--line); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 1.45em; width: 12px; height: 1px; background: var(--gold); }

/* Règle à connaître (calanques, route des Crêtes, festival) */
.notice { border-left: 1px solid var(--gold); padding: 6px 0 6px 20px; margin: 24px 0; font-size: 16px; color: var(--text); background: linear-gradient(90deg, rgba(201, 162, 75, 0.06) 0%, rgba(201, 162, 75, 0) 70%); }

/* Repères chiffrés vérifiés (optionnel) */
.facts { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 18px; border-top: 1px solid var(--line); }
.facts div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.facts dd { margin: 0; color: var(--cream); font-family: var(--serif); font-size: 22px; line-height: 1.3; }

.small { font-size: 14px; color: var(--muted); }

/* Photo dans le texte (page Luberon et Alpilles) */
.prose-figure { margin: 28px 0 26px; }
.prose-figure img { width: 100%; height: auto; }

/* Encart latéral */
.aside-card { border: 1px solid var(--line); background: var(--bg-2); padding: 30px 22px; }
.aside-card .kicker { margin-bottom: 14px; }
.aside-card p { font-size: 16px; margin: 0 0 18px; }
.aside-card .btn { width: 100%; margin: 4px 0 20px; }
.aside-links { font-size: 15px; margin: 0; }
.aside-links a { color: var(--cream); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.aside-links a:hover { color: var(--gold-2); }

/* ---------- Questions fréquentes ---------- */
.faq { max-width: 860px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { position: relative; cursor: pointer; list-style: none; padding: 20px 44px 20px 0; font-family: var(--serif); font-size: 21px; line-height: 1.3; color: var(--cream); transition: color 0.25s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); transform: translateY(-70%) rotate(45deg); transition: transform 0.3s ease; }
.faq-item[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.faq-item summary:hover { color: var(--gold-2); }
.faq-item summary:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.faq-a { padding: 0 0 22px; color: var(--muted); }
.faq-a p { margin: 0 0 12px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--gold-2); border-bottom: 1px solid var(--line); }

/* ---------- Pages voisines ---------- */
.section-line { border-top: 1px solid var(--line); }
.see-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.see-grid li { display: flex; }
.see-card { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 26px 22px; border: 1px solid var(--line); background: var(--bg); transition: background 0.3s, border-color 0.3s; }
.see-card:hover, .see-card:focus-visible { background: var(--bg-3); border-color: var(--gold); }
.see-kicker { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
.see-title { font-family: var(--serif); font-size: 24px; line-height: 1.2; color: var(--cream); }
.see-text { font-size: 15px; color: var(--muted); }

/* ---------- Écrans plus larges ---------- */
@media (min-width: 600px) {
  .subhero-text { padding-bottom: 64px; }
  .aside-card { padding: 34px 30px; }
  .faq-item summary { font-size: 23px; }
  .see-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .facts { grid-template-columns: repeat(2, 1fr); column-gap: 28px; }
}
@media (min-width: 900px) {
  .subhero { grid-template-columns: 1.1fr 0.9fr; min-height: 78vh; }
  .subhero-media { order: 0; height: auto; max-height: none; min-height: 0; margin-top: 0; }
  .subhero-media::after { background: linear-gradient(90deg, var(--bg) 0%, rgba(7, 8, 12, 0) 30%), linear-gradient(0deg, rgba(7, 8, 12, 0.45) 0%, rgba(7, 8, 12, 0) 35%); }
  .subhero-text { padding: 140px var(--gutter) 72px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
  .subhero .lead { font-size: 18px; }
  .article { grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(48px, 6vw, 90px); }
  .aside-card { position: sticky; top: 100px; }
}
@media (min-width: 1080px) {
  .see-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after, .see-card, .crumbs a, .prose a { transition: none; }
}