/* excursionsguadeloupe.fr — DA « Papillon volcanique » (CSS statique, pas de Tailwind) */
:root {
  --basalte: #232B27;
  --canopee: #2D5A45;
  --lagon: #1C7F86;
  --soufre: #E2B33B;
  --balisier: #B83A2C;
  --ecume: #F1F5F3;
  --ecume-2: #E3EBE7;      /* intermédiaire clair, dérivé d'Écume */
  --filet: #C9D6D0;
  --blanc: #FFFFFF;
  --font-titre: var(--af-young-serif), Georgia, serif;
  --font-texte: var(--af-figtree), system-ui, sans-serif;
  --measure-article: 52rem;   /* 832 px */
  --wrap: 78rem;
  --gutter: clamp(1rem, 3vw, 2rem);
}

/* Reset + anti-distorsion (règle réseau) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ecume); color: var(--basalte); font: 400 1.0625rem/1.65 var(--font-texte); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-titre); font-weight: 400; line-height: 1.15; margin: 0 0 .6em; text-wrap: balance; }
p, ul, ol { margin: 0 0 1.1em; }
a { color: var(--lagon); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--balisier); }
:focus-visible { outline: 3px solid var(--lagon); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--basalte); color: var(--ecume); padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

/* Wrappers d'images à ratio fixe : jamais d'object-fit sur une <img> nue */
.img-hero { width: 100%; aspect-ratio: 16 / 9; max-height: min(75vh, 44vw); overflow: hidden; background: var(--ecume-2); }
.img-card, .img-body { aspect-ratio: 3 / 2; overflow: hidden; background: var(--ecume-2); }
.img-hero img, .img-card img, .img-body img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.img-body { border-radius: 4px; margin: 1.6rem 0; }

/* En-tête */
.site-header { background: var(--ecume); border-bottom: 1px solid var(--filet); }
.site-header__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .8rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-titre); font-size: 1.35rem; color: var(--basalte); text-decoration: none; }
.brand:hover { color: var(--canopee); }
.brand svg { width: 2rem; height: 2rem; flex: none; }
.util-nav { display: flex; gap: 1.4rem; font-weight: 600; font-size: .95rem; }
.util-nav a, .pilier-nav a { color: var(--basalte); text-decoration: none; }
.util-nav a:hover, .pilier-nav a:hover { color: var(--balisier); text-decoration: underline; }
.pilier-nav { border-top: 1px solid var(--filet); }
.pilier-nav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: .65rem 0; overflow-x: auto; white-space: nowrap; font-size: .95rem; scrollbar-width: thin; }
.pilier-nav li { margin: 0; }
.pilier-nav a[aria-current="page"], .util-nav a[aria-current="page"] { color: var(--balisier); text-decoration: underline; text-decoration-thickness: 2px; }

/* Hero : bandeau bord à bord, titre dessous, filet en courbes de niveau */
.hero { background: var(--ecume); }
.hero__text { padding-block: clamp(1.4rem, 3vw, 2.4rem) clamp(1.2rem, 3vw, 2rem); max-width: 60rem; }
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.5rem); color: var(--canopee); margin-bottom: .45em; }
.hero__lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 44rem; margin: 0; }
.contours { height: 54px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='54' viewBox='0 0 600 54' fill='none' stroke='%232D5A45' stroke-width='1'%3E%3Cpath d='M0 40 C80 10 140 46 220 26 S360 4 430 28 S540 44 600 22'/%3E%3Cpath d='M0 46 C90 20 150 50 230 33 S370 12 440 35 S545 50 600 30' opacity='.8'/%3E%3Cpath d='M0 52 C100 30 160 54 240 40 S380 20 450 42 S550 56 600 38' opacity='.6'/%3E%3Cpath d='M0 33 C70 4 135 38 210 18 S350 -2 420 20 S535 36 600 14' opacity='.8'/%3E%3C/svg%3E") repeat-x center / 600px 54px; opacity: .22; }

/* Sections */
.section { padding-block: clamp(2rem, 5vw, 4rem); }
.section--2 { background: var(--ecume-2); }
.section h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--canopee); }
.grid-cards { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr)); }

/* Card */
.card { position: relative; background: var(--blanc); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--filet); }
.card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; }
.card__meta { display: flex; justify-content: space-between; gap: .8rem; font-size: .88rem; color: #4A5750; }
.card__cat { color: var(--lagon); font-weight: 600; }
.card__title { font-size: 1.25rem; margin: 0; }
.card__title a { color: var(--basalte); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card:hover .card__title a { color: var(--balisier); text-decoration: underline; }
.card:focus-within { outline: 3px solid var(--lagon); outline-offset: 3px; }
.card__title a:focus-visible { outline: none; }
.card__desc { font-size: .98rem; margin: 0; color: #38443E; }

/* Carte papillon */
.carte { margin: 0; }
.carte svg { width: 100%; height: auto; display: block; }
.carte .zone { cursor: pointer; }
.carte .zone path, .carte .zone ellipse { transition: fill .2s, stroke .2s; }
.carte .zone--bt path { fill: var(--canopee); }
.carte .zone--gt path { fill: var(--lagon); }
.carte .zone--ile ellipse { fill: var(--basalte); }
.carte .zone:hover path, .carte .zone:focus-visible path { fill: var(--basalte); }
.carte .zone--ile:hover ellipse, .carte .zone--ile:focus-visible ellipse { fill: var(--balisier); }
.carte .zone:focus-visible { outline: none; }
.carte .zone:focus-visible path, .carte .zone:focus-visible ellipse { stroke: var(--soufre); stroke-width: 5; }
.carte .zone-nom { font: 600 21px var(--font-texte); fill: var(--ecume); pointer-events: none; }
.carte .zone-nom--ile { fill: var(--basalte); font-size: 18px; text-anchor: middle; }
.carte .corps { fill: var(--basalte); }
.carte .antenne { stroke: var(--basalte); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.carte .soufre { fill: var(--soufre); stroke: var(--basalte); stroke-width: 1.5; pointer-events: none; }
.carte--mini .zone { opacity: .3; }
.carte--mini .zone.is-active { opacity: 1; }
.carte--mini .zone.is-active path, .carte--mini .zone.is-active ellipse { stroke: var(--soufre); stroke-width: 7; }
.carte--mini .zone-nom { display: none; }
.carte--grande { width: 100%; max-width: 34rem; margin-inline: auto; }

/* Fiche pratique */
.fiche { border: 1px solid var(--filet); border-left: 6px solid var(--lagon); background: var(--blanc); border-radius: 4px; padding: 1.1rem 1.3rem; margin: 0 0 2rem; }
.fiche h2 { font-size: 1.15rem; color: var(--basalte); margin-bottom: .7rem; }
.fiche dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 0; }
.fiche dt { font-weight: 600; }
.fiche dd { margin: 0; }
.fiche__secu { border-top: 1px solid var(--filet); padding-top: .7rem; margin-top: .8rem; color: var(--balisier); font-weight: 600; }
.fiche__secu span { display: block; font-weight: 400; color: var(--basalte); }

/* Article : grille sidebar 15rem + contenu */
.layout-article { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding-block: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.sidebar { position: sticky; top: 1rem; display: grid; gap: 1.6rem; }
.sidebar__titre { font: 600 .95rem var(--font-texte); margin: 0 0 .5rem; }
.toc ol { list-style: none; margin: 0; padding: 0; font-size: .93rem; border-left: 2px solid var(--filet); }
.toc li { margin: 0; }
.toc a { display: block; padding: .3rem .8rem; color: var(--basalte); text-decoration: none; margin-left: -2px; border-left: 2px solid transparent; }
.toc a:hover { color: var(--balisier); border-left-color: var(--balisier); }
.toc .toc-h3 a { padding-left: 1.6rem; font-size: .88rem; }
.toc .toc-h2 a { font-weight: 500; }
.article { max-width: var(--measure-article); }
.article__meta { color: #4A5750; font-size: .95rem; margin-bottom: 1.6rem; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--canopee); margin-top: 2.2em; }
.prose h3 { font-size: 1.3rem; margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .4em; }
.prose blockquote { margin: 1.5rem 0; padding: .2rem 0 .2rem 1.2rem; border-left: 4px solid var(--soufre); font-family: var(--font-titre); font-size: 1.2rem; }
.prose figure { margin: 1.8rem 0; }
.prose figcaption { font-size: .9rem; color: #4A5750; margin-top: .4rem; }
/* Figure d'article avec légende : le ratio 3:2 passe sur l'image, la légende s'affiche dessous */
.prose figure.img-body:has(figcaption) { aspect-ratio: auto; overflow: visible; background: none; }
.prose figure.img-body:has(figcaption) img { aspect-ratio: 3 / 2; height: auto; border-radius: 4px; background: var(--ecume-2); }
.prose figure.img-body figcaption { line-height: 1.45; margin-top: .55rem; padding-left: .7rem; border-left: 2px solid var(--soufre); }
.alerte { border-left: 6px solid var(--balisier); background: #F8E9E6; padding: .9rem 1.2rem; margin: 1.5rem 0; border-radius: 0 4px 4px 0; }
.alerte strong { color: var(--balisier); }

/* FAQ */
.faq h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--canopee); }
.faq details { border-top: 1px solid var(--filet); padding: .9rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--filet); }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; padding-right: 2rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; top: -.1rem; font-size: 1.5rem; color: var(--lagon); }
.faq details[open] summary::after { content: "\2212"; color: var(--balisier); }
.faq details p { margin: .7rem 0 0; }

.related { margin-top: 3rem; }
.related h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--canopee); }

/* Accueil */
.home-split { display: grid; grid-template-columns: minmax(0, 1fr) 30rem; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.home-split p { max-width: 38rem; }

/* Pied de page */
.site-footer { background: var(--basalte); color: var(--ecume); padding-block: 2.6rem 2rem; margin-top: 3rem; font-size: .95rem; }
.site-footer a { color: var(--ecume); text-decoration-color: rgba(241,245,243,.4); }
.site-footer a:hover { color: var(--soufre); }
.site-footer :focus-visible { outline-color: var(--soufre); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; }
.footer-grid h2 { font-size: 1.1rem; color: var(--ecume); margin-bottom: .7rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .35rem; }
.footer-bas { border-top: 1px solid rgba(241,245,243,.2); margin-top: 2rem; padding-top: 1.1rem; color: #B9C6BF; }

@media (max-width: 62rem) {
  .layout-article { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; grid-template-columns: 9rem minmax(0, 1fr); align-items: start; }
  .home-split { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 38rem) {
  body { font-size: 1rem; }
  .brand { font-size: 1.1rem; white-space: nowrap; gap: .45rem; }
  .brand svg { width: 1.6rem; height: 1.6rem; }
  .util-nav { gap: .8rem; font-size: .88rem; white-space: nowrap; }
  .sidebar { grid-template-columns: minmax(0, 1fr); }
  .sidebar .carte--mini { max-width: 11rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .fiche dl { grid-template-columns: 1fr; gap: 0; }
  .fiche dd { margin-bottom: .5rem; }
  .img-hero { width: 100%; aspect-ratio: 4 / 3; max-height: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Pages utilitaires, blog, contact, accueil (phase 02) */
.carte--all .zone { opacity: 1; }
.page-head { background: var(--ecume); }
.page-head h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); color: var(--canopee); padding-block: clamp(1.6rem, 4vw, 3rem) clamp(1rem, 2vw, 1.6rem); margin: 0; max-width: 52rem; }
.page-body { padding-block: clamp(1.5rem, 4vw, 3rem); }
.page-body .prose { max-width: var(--measure-article); }
.page-body .prose h2:first-child { margin-top: 0; }
.home-split--404 { align-items: start; }
.home-split--404 .carte--mini { max-width: 22rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-form { max-width: 36rem; display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.form-group { display: grid; gap: .35rem; }
.form-group label { font-weight: 600; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form select, .contact-form textarea { width: 100%; padding: .7rem .85rem; border: 1px solid #8B9A92; border-radius: 4px; font: inherit; background: var(--blanc); color: var(--basalte); }
.contact-form textarea { resize: vertical; }
.btn { justify-self: start; padding: .75rem 1.6rem; border: 0; border-radius: 4px; background: var(--canopee); color: var(--ecume); font: 600 1rem var(--font-texte); cursor: pointer; }
.btn:hover { background: var(--basalte); }
.btn:disabled { opacity: .6; cursor: wait; }
.contact-status { min-height: 1.5em; margin: 0; font-weight: 600; }
.contact-status.is-ok { color: var(--canopee); }
.contact-status.is-err { color: var(--balisier); }

/* Tableaux des articles */
.prose table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: .96rem; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: .6rem .8rem; border-bottom: 1px solid var(--filet); min-width: 7rem; }
.prose th { background: var(--ecume-2); font-weight: 600; border-bottom: 2px solid var(--canopee); }

/* Accueil : piliers, filtre du blog */
.piliers-grid { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.pilier-tile { position: relative; background: var(--blanc); border: 1px solid var(--filet); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.pilier-tile__body { padding: 1rem 1.1rem 1.2rem; }
.pilier-tile h3 { font-size: 1.3rem; margin: 0 0 .4rem; }
.pilier-tile h3 a { color: var(--basalte); text-decoration: none; }
.pilier-tile h3 a::after { content: ""; position: absolute; inset: 0; }
.pilier-tile:hover h3 a { color: var(--balisier); text-decoration: underline; }
.pilier-tile:focus-within { outline: 3px solid var(--lagon); outline-offset: 3px; }
.pilier-tile p { margin: 0; font-size: .98rem; color: #38443E; }
.home-intro { max-width: 46rem; }
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.8rem; padding: 0; list-style: none; }
.filtre { font: 600 .95rem var(--font-texte); padding: .5rem 1rem; border: 1px solid var(--canopee); border-radius: 999px; background: transparent; color: var(--canopee); cursor: pointer; }
.filtre:hover { background: var(--ecume-2); }
.filtre[aria-pressed="true"] { background: var(--canopee); color: var(--ecume); }
.blog-vide { color: #4A5750; }
.card[hidden] { display: none; }