/* ==========================================================================
   BORDATLANTIQUE — V2 · Pages intérieures
   Chargée après ba-v2.css sur toutes les pages sauf l'accueil.
   --------------------------------------------------------------------------
   Sommaire
   P0. Compatibilité : anciennes variables → jetons V2
   P1. Composants communs (fil d'Ariane, étiquettes, tableaux, FAQ, boutons)
   P2. Gabarit Article
   P3. Gabarit Météo plage
   P4. Gabarit Liste (actualités, guides, nautisme)
   P5. Gabarit Guide filtrable (adresses, plages, gastronomie)
   P6. Gabarit Agenda
   P7. Galerie
   P8. Webcams
   P9. Contact et informations
   ========================================================================== */

/* P0. Compatibilité ---------------------------------------------------- */
:root {
  --cream: #FFFFFF;
  --ink: var(--navy);
  --azure: var(--link);
  --azure-light: var(--foam);
  --gold: var(--sun);
  --gold-text: #7A4A00;
  --azure-text: var(--link);
  --slate-text: var(--slate);
  --mist: var(--line);
  --font-title: var(--font-text);
  --font-body: var(--font-text);
  --font-ui: var(--font-text);
  --font-serif: var(--font-text);
  --px: var(--gutter);
  --py: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  --py-sm: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  --radius: var(--r-sm);
  --radius-lg: var(--r-md);
  --shadow: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --nav-h: 0px;
  --transition: .25s var(--ease);
  --r: var(--r-sm);
  --tr: .25s var(--ease);
}
.reveal, .pv-card { opacity: 1 !important; transform: none !important; }
/* Liens : les composants hérités ne sont pas soulignés, les liens dans le texte le sont */
:where(#contenu) a { color: inherit; text-decoration: none; }
:where(#contenu :is(p, li, dd, td, figcaption, blockquote, .faq-body, .faq-answer)) a:where(:not([class])) {
  color: var(--azure-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}
:where(#contenu :is(p, li, dd, td, figcaption, blockquote, .faq-body, .faq-answer)) a:where(:not([class])):hover { text-decoration-thickness: 4px; }
:where(#contenu) em { font-style: normal; }
:where(#contenu) :where(p, li, blockquote, figcaption, td) em { font-style: italic; }
:where(#contenu) strong { font-weight: 700; }
.section--navy, .site-footer, .now-tile--intro, .hero-card { --gold-text: var(--sun); --azure-text: #7CCBFF; --slate-text: var(--mist); }

/* P1. Composants communs ---------------------------------------------- */
.page-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* Fil d'Ariane */
.breadcrumb, .breadcrumb-nav, .hero-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  font-size: .9375rem;
  line-height: 1.4;
}
.breadcrumb a, .breadcrumb-nav a, .hero-breadcrumb a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; }
.breadcrumb a:hover, .breadcrumb-nav a:hover, .hero-breadcrumb a:hover { text-decoration-thickness: 3px; }

/* Étiquettes héritées → puces plates */
.label { font-family: var(--font-text); font-size: .9375rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.label-azure, .label-gold, .label-patrimoine, .label-nature, .label-jaune, .article-hero .label {
  display: inline-flex;
  align-items: center;
  padding: .25rem .75rem;
  border-radius: var(--r-pill);
  background: var(--sky);
  color: var(--navy);
  font-family: var(--font-text);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
}
.label-gold, .label-jaune { background: var(--sun); }
.label-patrimoine { background: var(--sand); }
.label-nature { background: #D7F0E3; color: #174A39; }

/* Boutons hérités */
.btn-primary, .btn-secondary, .guide-cta a, .bac-cta-btn, .card-btn, .btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .7rem 1.4rem;
  border: 2px solid var(--navy);
  border-radius: var(--r-pill);
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: normal;
  transition: background-color .2s, color .2s, transform .2s var(--ease);
}
.btn-primary:hover, .guide-cta a:hover, .bac-cta-btn:hover, .card-btn:hover, .btn-submit:hover { background: var(--link); border-color: var(--link); color: var(--white); transform: translateY(-2px); }
.btn-secondary { background: transparent; color: var(--navy); }
.btn-secondary:hover { background: var(--navy); color: var(--white); }

/* Tableaux */
:where(#contenu) table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
:where(#contenu) :where(thead th, table th) {
  padding: .75rem .9rem;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-text);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
}
:where(#contenu) tbody th { background: var(--foam); color: var(--navy); }
:where(#contenu) td { padding: .7rem .9rem; border-bottom: 2px solid var(--foam); color: var(--navy); vertical-align: top; }
:where(#contenu) tbody tr:nth-child(even) td { background: #F6FBFF; }
:where(#contenu) caption { caption-side: top; padding: .5rem 0; text-align: left; font-weight: 700; color: var(--navy); }
.table-scroll { width: 100%; overflow-x: auto; margin: 1.5rem 0; border-radius: var(--r-md); scrollbar-width: thin; }
.table-scroll > table { margin: 0 !important; min-width: 520px; }
.table-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* FAQ (details/summary et accordéons hérités) */
.faq-item { border: 0; border-bottom: 2px solid var(--foam); }
.faq-item summary, .faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 56px;
  padding: 1rem 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-family: var(--font-text);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after, .faq-question::after {
  content: '+';
  display: grid;
  place-items: center;
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--foam);
  color: var(--navy);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}
.faq-item[open] summary::after, .faq-item.open .faq-question::after, .faq-item.active .faq-question::after { content: '−'; background: var(--sun); }
.faq-item summary:hover, .faq-question:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.faq-body, .faq-answer { color: var(--navy); font-size: 1.0625rem; line-height: 1.7; }
.faq-body { padding: 0 0 1.25rem; }
.faq-question > span, .faq-question > i { font-style: normal; }

/* Encadrés génériques */
.info-block {
  margin: 1.75rem 0;
  padding: 1.15rem 1.35rem;
  border: 0;
  border-radius: var(--r-md);
  background: var(--foam);
}
.info-block.warning { background: #FFF1C2; }
.info-block-title, .info-block.warning .info-block-title {
  margin-bottom: .5rem;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
}
.info-block p { font-size: 1.0625rem !important; }

/* Chiffres clés : tuiles plates « cabines » */
.stats-grid, .chiffres-cles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin: 2rem 0; }
.stat-card, .chiffre-item {
  padding: 1.1rem 1.15rem;
  border-radius: var(--r-md);
  background: var(--sky);
  color: var(--navy);
  text-align: left;
}
.stat-card:nth-child(4n+2), .chiffre-item:nth-child(4n+2) { background: var(--sun); }
.stat-card:nth-child(4n+3), .chiffre-item:nth-child(4n+3) { background: var(--turq); }
.stat-card:nth-child(4n+4), .chiffre-item:nth-child(4n+4) { background: var(--coral); }
.stat-card-num, .chiffre-num {
  display: block;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.stat-card-lbl, .chiffre-label { margin-top: .3rem; color: var(--navy); font-size: .9375rem; opacity: 1; line-height: 1.35; }

/* Sommaire */
.article-toc { margin-bottom: 2rem; padding: 1.25rem 1.5rem; border-radius: var(--r-md); background: var(--foam); }
.article-toc-title { margin-bottom: .6rem; color: var(--navy); font-size: 1rem; font-weight: 700; }
.article-toc ol { margin: 0; padding-left: 1.3rem; list-style: decimal; }
.article-toc li { margin-bottom: .35rem; }
.article-toc a { color: var(--link); font-size: 1.0625rem; }

/* Mots-clés */
.article-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.article-tag {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: .3rem .85rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--foam);
  color: var(--navy);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: none;
}
a.article-tag:hover { background: var(--sky); text-decoration: underline; }

/* Bandeau d'en-tête générique (pages sans photo) */
.v2-band {
  background: var(--sky);
  color: var(--navy);
}
.v2-band-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--gutter) clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* P2. Gabarit Article --------------------------------------------------- */
.tpl-article .article-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  height: auto;
  min-height: clamp(460px, 64vh, 680px);
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
}
.tpl-article .article-hero > img, .tpl-article .article-hero-img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tpl-article .article-hero-overlay {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 3rem var(--gutter) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: none;
}
.tpl-article .article-hero-content {
  position: relative;
  max-width: 860px;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--r-xl);
  background: var(--navy);
  animation: rise .7s var(--ease) both;
  --focus: var(--sun);
}
.tpl-article .article-hero .breadcrumb {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  color: var(--mist);
}
.tpl-article .article-hero .breadcrumb a { color: #7CCBFF; }
.tpl-article .article-hero .breadcrumb span { color: #D6E6F5; }
.tpl-article .article-hero-content > div:not(.article-byline) { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.tpl-article .article-hero-content .label { margin: 0 !important; }
.tpl-article .article-hero h1 {
  margin: 0 0 .9rem;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.15rem + 2.4vw, 3.1rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.tpl-article .article-hero h1 em { font-style: normal; color: inherit; }
.tpl-article .article-byline { color: #D6E6F5; font-family: var(--font-text); font-size: 1rem; }
.tpl-article .article-byline strong { color: var(--white); }

.tpl-article .article-layout {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--gutter);
}
.tpl-article .article-intro { max-width: 900px; margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3rem); }
.tpl-article .article-lead, .tpl-article .article-intro .article-lead {
  margin: 0;
  max-width: none;
  padding: .25rem 0 .25rem 1.25rem;
  border-left: 6px solid var(--sun);
  color: var(--navy);
  font-family: var(--font-text);
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.4rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
}
.tpl-article .article-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 400px);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
.tpl-article .article-body:not(:has(.article-col-photos)) { grid-template-columns: minmax(0, 860px); }
.tpl-article .article-col-text { min-width: 0; max-width: 760px; }
:where(.tpl-article .article-col-text) > :first-child { margin-top: 0; }
:where(.tpl-article .article-col-text) h2 {
  margin: 2.75rem 0 1rem;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
}
:where(.tpl-article .article-col-text) h3 {
  margin: 2rem 0 .6rem;
  color: var(--navy);
  font-family: var(--font-text);
  font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
}
:where(.tpl-article .article-col-text) h4 { margin: 1.5rem 0 .5rem; color: var(--navy); font-size: 1.125rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
:where(.tpl-article .article-col-text) p,
:where(.tpl-article .article-col-text) li,
:where(.tpl-article .article-col-text) dd {
  color: var(--navy);
  font-size: 1.125rem;
  line-height: 1.7;
}
:where(.tpl-article .article-col-text) p { margin: 0 0 1.15rem; max-width: none; }
:where(.tpl-article .article-col-text) a:not([class]) { color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
:where(.tpl-article .article-col-text) a:not([class]):hover { text-decoration-thickness: 4px; }
:where(.tpl-article .article-col-text) :where(ul:not([class]), ol:not([class])) { margin: 0 0 1.25rem; padding-left: 1.4rem; }
:where(.tpl-article .article-col-text) :where(ul:not([class]), ol:not([class])) > li { margin-bottom: .4rem; }
.tpl-article ul.article-list { display: flex; flex-direction: column; gap: .55rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.tpl-article ul.article-list li { position: relative; padding-left: 1.5rem; }
.tpl-article ul.article-list li::before {
  content: '';
  position: absolute;
  left: 0; top: .6em;
  width: .6rem; height: .6rem;
  border-radius: 3px;
  background: var(--ocean);
}
.tpl-article .article-blockquote, .tpl-article .article-col-text blockquote {
  margin: 2rem 0;
  padding: 1.35rem 1.6rem;
  border: 0;
  border-radius: var(--r-md);
  background: var(--sand);
  color: var(--navy);
  font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3rem);
  font-style: normal;
  line-height: 1.6;
}
.tpl-article .article-blockquote cite, .tpl-article blockquote cite { display: block; margin-top: .5rem; font-size: 1rem; font-style: normal; font-weight: 700; }
.tpl-article .article-col-photos {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.tpl-article figure { margin: 0; }
.tpl-article .article-col-photos figure img,
.tpl-article .article-gallery-grid figure img,
.tpl-article .inline-figure img {
  width: 100%;
  border-radius: var(--r-md);
  object-fit: cover;
}
.tpl-article .article-col-photos figure img { aspect-ratio: 4 / 3; }
.tpl-article .article-col-photos figure:first-child img { aspect-ratio: 4 / 3; }
.tpl-article .article-col-photos figure img:hover { transform: none; }
.tpl-article figcaption { margin-top: .5rem; color: var(--slate); font-family: var(--font-text); font-size: .9375rem; font-style: normal; line-height: 1.45; }
.tpl-article .article-gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.tpl-article .inline-figure { margin: 2rem 0; }

.tpl-article .article-infos-bloc {
  margin: 1.75rem 0;
  padding: 1.25rem 1.4rem;
  border: 0;
  border-radius: var(--r-md);
  background: var(--foam);
}
.tpl-article .article-infos-bloc h4 { margin: 0 0 .75rem; color: var(--navy); font-family: var(--font-text); font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.tpl-article .article-infos-bloc ul { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.tpl-article .article-infos-bloc ul li { padding: .55rem 0; border-bottom: 2px solid var(--white); color: var(--navy); font-size: 1.0625rem; line-height: 1.5; }
.tpl-article .article-infos-bloc ul li:last-child { border-bottom: 0; }
.tpl-article .article-cta-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--r-lg);
  background: var(--sky);
}
.tpl-article .article-cta-block p { margin: 0 !important; color: var(--navy); font-size: 1.125rem; font-weight: 700; }

.related-section { padding: clamp(3rem, 2rem + 4vw, 5rem) var(--gutter); background: var(--foam); }
.related-section > div { max-width: var(--wrap); margin-inline: auto; }
.related-section h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); font-weight: 600; letter-spacing: -.015em; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.related-card { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--white); }
.related-card:hover { box-shadow: none; }
.related-card-img { width: 100%; height: 200px; object-fit: cover; }
.related-card-body { padding: 1.1rem 1.25rem 1.3rem; }
.related-card a { color: var(--navy); }

@media (max-width: 960px) {
  .tpl-article .article-body { grid-template-columns: 1fr; }
  .tpl-article .article-col-photos { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
  .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .tpl-article .article-hero { display: block; min-height: 0; }
  .tpl-article .article-hero > img, .tpl-article .article-hero-img { position: relative; z-index: 0; height: 44svh; min-height: 260px; max-height: 420px; }
  .tpl-article .article-hero-overlay { padding: 0; }
  .tpl-article .article-hero-content { border-radius: 0; padding: 1.5rem var(--gutter) 1.75rem; }
  .tpl-article .article-gallery-grid { grid-template-columns: 1fr; }
  .tpl-article .article-cta-block { flex-direction: column; align-items: flex-start; }
}

/* P3. Gabarit Météo plage ---------------------------------------------- */
.tpl-meteo #contenu { background: var(--foam); }
.tpl-meteo .meteo-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(380px, 52vh, 560px);
  padding: 3rem var(--gutter) 1.75rem !important;
  border: 0;
  background-color: var(--navy);
  background-position: center;
  background-size: cover;
}
.tpl-meteo .meteo-hero::before, .tpl-meteo .meteo-hero-overlay { display: none; }
.tpl-meteo .meteo-hero-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--r-xl);
  background: var(--navy);
  color: var(--white);
  animation: rise .7s var(--ease) both;
  --focus: var(--sun);
}
.tpl-meteo .meteo-hero-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .9rem; color: #7CCBFF; font-size: 1rem; font-weight: 700; }
.tpl-meteo .meteo-hero h1 {
  margin: 0 0 .6rem;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.025em;
}
.tpl-meteo .meteo-hero h1 em { color: inherit; font-style: normal; }
.tpl-meteo .meteo-hero-sub2 { color: var(--mist) !important; font-size: 1rem !important; }
.tpl-meteo .meteo-hero-sub { max-width: 60ch; margin-top: .4rem; color: #D6E6F5; font-size: 1.0625rem; line-height: 1.55; }
.tpl-meteo .meteo-hero-time-label { color: var(--mist); font-size: .9375rem; }
.tpl-meteo .meteo-hero-time-val { color: var(--sun); font-family: var(--font-display); font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.6rem); font-weight: 600; }

/* Pastille « en direct » */
.meteo-live, .xtra-live, .fc7-header-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .7rem;
  border-radius: var(--r-pill);
  background: var(--live);
  color: var(--white) !important;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.meteo-live::before, .xtra-live::before, .fc7-header-badge::before {
  content: '';
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: currentColor !important;
  animation: pulse 1.8s ease-in-out infinite;
}

/* Verdict baignade : bande pleine largeur, couleur selon l'état */
.tpl-meteo .meteo-verdict {
  display: flex;
  align-items: center;
  gap: 1rem 1.25rem;
  padding: 1.25rem max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  border: 0;
  background: var(--sky);
  color: var(--navy);
}
.tpl-meteo .meteo-verdict.good { background: var(--turq); }
.tpl-meteo .meteo-verdict.ok { background: var(--sun); }
.tpl-meteo .meteo-verdict.bad { background: var(--coral); }
.tpl-meteo .meteo-verdict-ico {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  flex: none;
  border-radius: 16px;
  background: var(--white);
  font-size: 1.9rem;
}
.tpl-meteo .meteo-verdict-title,
.tpl-meteo .meteo-verdict.good .meteo-verdict-title,
.tpl-meteo .meteo-verdict.ok .meteo-verdict-title,
.tpl-meteo .meteo-verdict.bad .meteo-verdict-title {
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.015em;
}
.tpl-meteo .meteo-verdict-detail { margin-top: .2rem; color: var(--navy); font-size: 1.0625rem; }

/* Conteneurs : même largeur que le reste du site */
.tpl-meteo .meteo-cards, .tpl-meteo .fc7-section, .tpl-meteo .xtra-wrap, .tpl-meteo .meteo-webcam-wrap, .tpl-meteo .meteo-plages, .tpl-meteo .meteo-villes-strip {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.tpl-meteo .meteo-cards { padding-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); gap: 1.25rem; }
.tpl-meteo .fc7-section, .tpl-meteo .xtra-wrap, .tpl-meteo .meteo-webcam-wrap { padding-bottom: 1.25rem; }
.tpl-meteo .xtra-wrap { gap: 1.25rem; }

/* Panneaux blancs plats */
.tpl-meteo .mc, .tpl-meteo .fc7-inner, .tpl-meteo .xtra-card, .tpl-meteo .meteo-webcam-card {
  border: 0;
  border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
}
.tpl-meteo .mc:hover { transform: none; }
.tpl-meteo .mc-head, .tpl-meteo .fc7-header, .tpl-meteo .xtra-head, .tpl-meteo .meteo-webcam-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  padding: 1.15rem 1.25rem .5rem;
  border: 0;
  background: var(--white);
}
.tpl-meteo .mc-ico, .tpl-meteo .fc7-header-ico, .tpl-meteo .xtra-head-ico {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex: none;
  border-radius: 14px;
  background: var(--sky);
  font-size: 1.5rem;
  line-height: 1;
}
.tpl-meteo .mc:nth-child(1) .mc-ico { background: var(--sun); }
.tpl-meteo .mc:nth-child(2) .mc-ico { background: var(--turq); }
.tpl-meteo .mc:nth-child(3) .mc-ico { background: var(--ocean); }
.tpl-meteo .mc-label, .tpl-meteo .meteo-webcam-label {
  display: block;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.tpl-meteo .mc-name, .tpl-meteo .meteo-webcam-name { color: var(--slate); font-size: 1rem; font-weight: 400; }
.tpl-meteo .fc7-header-title, .tpl-meteo .xtra-head-title {
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -.015em;
}
.tpl-meteo .fc7-header-title em, .tpl-meteo .xtra-head-title em { color: inherit; font-style: normal; }
.tpl-meteo .mc-body { padding: .75rem 1.25rem 1.35rem; }
.tpl-meteo .mc-temp {
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -.03em;
}
.tpl-meteo .mc-temp-eau { color: var(--link); }
.tpl-meteo .mc-desc { color: var(--navy); font-size: 1.0625rem; }
.tpl-meteo .mc-pill { padding: .3rem .75rem; border: 0; border-radius: var(--r-pill); background: var(--foam); color: var(--navy); font-size: .9375rem; font-weight: 700; }
.tpl-meteo .mc-fc { gap: .4rem; }
.tpl-meteo .mc-fc-day { border: 0; border-radius: var(--r-sm); background: var(--foam); padding: .5rem .2rem; }
.tpl-meteo .mc-fc-n, .tpl-meteo .mc-fc-m { color: var(--slate); font-size: .875rem; }
.tpl-meteo .mc-fc-t { color: var(--navy); font-size: .9375rem; font-weight: 700; }
.tpl-meteo .mc-eau-item { border-radius: var(--r-sm); background: var(--foam); }
.tpl-meteo .mc-eau-label { color: var(--slate); font-size: .875rem; }
.tpl-meteo .mc-eau-val { color: var(--navy); font-size: 1.0625rem; font-weight: 700; }
.tpl-meteo .mc-mr-etat { color: var(--navy); font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 600; }
.tpl-meteo .mc-mr-coeff { color: var(--slate); font-size: 1rem; }
.tpl-meteo .mc-mr-row { border: 0; border-radius: var(--r-sm); background: var(--foam); font-size: .9375rem; padding: .45rem .7rem; }
.tpl-meteo .mc-mr-row.pm { background: var(--sky); }
.tpl-meteo .mc-mr-type { color: var(--navy); }
.tpl-meteo .mc-mr-h { color: var(--navy); }
.tpl-meteo .mc-canvas { background: var(--foam); border-radius: var(--r-sm); }
.tpl-meteo .mc-shom, .tpl-meteo .mc-shom a { font-size: .9375rem; }

/* Prévisions 7 jours */
.tpl-meteo .fc7-header { justify-content: space-between; padding-bottom: 1rem; }
.tpl-meteo .fc7-grid { gap: 0; background: var(--white); padding: 0 .75rem .75rem; }
.tpl-meteo .fc7-day { margin: 0; border: 0 !important; border-radius: var(--r-md); padding: 1rem .5rem; }
.tpl-meteo .fc7-day:hover { background: var(--foam); }
.tpl-meteo .fc7-day.today { background: var(--sky); }
.tpl-meteo .fc7-day.today::after { display: none; }
.tpl-meteo .fc7-day.today .fc7-jour { margin-top: 0; }
.tpl-meteo .fc7-jour { color: var(--navy); font-size: .9375rem; }
.tpl-meteo .fc7-tmax { color: var(--navy); font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.tpl-meteo .fc7-tmin, .tpl-meteo .fc7-desc { color: var(--slate); font-size: .875rem; }
.tpl-meteo .fc7-footer, .tpl-meteo .comfort-footer, .tpl-meteo .aqi-footer {
  padding: .75rem 1.25rem;
  border: 0;
  background: var(--white);
  color: var(--slate);
  font-size: .9375rem;
}
.tpl-meteo .fc7-footer a, .tpl-meteo .comfort-footer a, .tpl-meteo .aqi-footer a { color: var(--link); text-decoration: underline; }

/* Confort plage, qualité de l'air */
.tpl-meteo .comfort-item, .tpl-meteo .aqi-item { border-radius: var(--r-sm); background: var(--foam); }
.tpl-meteo .comfort-item-label, .tpl-meteo .aqi-item-label { color: var(--slate); font-size: .875rem; }
.tpl-meteo .comfort-item-val, .tpl-meteo .aqi-item-val { color: var(--navy); font-size: 1.0625rem; font-weight: 700; }
.tpl-meteo .comfort-big-score { font-family: var(--font-display); font-weight: 600; }
.tpl-meteo .comfort-label-title, .tpl-meteo .aqi-label-title { color: var(--navy); font-size: 1.125rem; font-weight: 700; }
.tpl-meteo .comfort-label-sub, .tpl-meteo .aqi-label-sub { color: var(--slate); font-size: .9375rem; }

/* Webcam */
.tpl-meteo .meteo-webcam-embed { margin: 0 1.25rem 1.25rem; border-radius: var(--r-md); overflow: hidden; background: #001833; }

/* Plages de la commune */
.tpl-meteo .meteo-plages { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-bottom: 2rem; border: 0; }
.tpl-meteo .meteo-plages-eyebrow { color: var(--slate); font-size: 1rem; font-weight: 700; }
.tpl-meteo .meteo-plages h2 { margin-bottom: 1.25rem; color: var(--navy); font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 600; letter-spacing: -.02em; }
.tpl-meteo .meteo-plages h2 em { color: inherit; font-style: normal; }
.tpl-meteo .meteo-plages-grid { gap: .75rem; }
.tpl-meteo .meteo-plage-card { position: relative; padding: 1rem 1.1rem; border: 0; border-radius: var(--r-md); background: var(--white); color: var(--navy); }
.tpl-meteo .meteo-plage-card:hover { background: var(--sky); }
.tpl-meteo .meteo-plage-name { color: var(--navy); font-size: 1.0625rem; font-weight: 700; }
.tpl-meteo .meteo-plage-desc { margin-top: .25rem; color: var(--slate); font-size: .9375rem; line-height: 1.45; }
.tpl-meteo .meteo-plage-card:hover .meteo-plage-desc { color: var(--navy); }

/* Toutes les communes */
.tpl-meteo .meteo-villes-strip { padding-top: 1.5rem; padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); border: 0; background: transparent; }
.tpl-meteo .meteo-villes-label { margin-bottom: .75rem; color: var(--navy); font-size: 1.0625rem; font-weight: 700; }
.tpl-meteo .meteo-villes-list { gap: .5rem; }
.tpl-meteo .meteo-ville-pill {
  min-height: 44px;
  padding: .45rem 1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}
.tpl-meteo .meteo-ville-pill:hover { background: var(--sky); color: var(--navy); text-decoration: underline; }
.tpl-meteo .meteo-ville-pill.meteo-ville-active { background: var(--navy); color: var(--white); }
.tpl-meteo .sk { background: var(--line); }

@media (max-width: 760px) {
  .tpl-meteo .meteo-hero { min-height: 0; padding: 0 !important; display: block; background-size: cover; }
  .tpl-meteo .meteo-hero::after { content: ''; display: block; height: 34svh; min-height: 200px; }
  .tpl-meteo .meteo-hero-inner { border-radius: 0; }
  .tpl-meteo .meteo-hero { display: flex; flex-direction: column-reverse; }
  .tpl-meteo .meteo-verdict { padding-inline: var(--gutter); }
  .tpl-meteo .fc7-grid { padding: 0 .5rem .5rem; }
}

/* P4. Gabarit Liste ----------------------------------------------------- */
.tpl-list .page-hero {
  position: relative;
  padding: clamp(2.75rem, 1.5rem + 4vw, 5rem) max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))) clamp(2.25rem, 1.5rem + 2vw, 3.25rem);
  background: var(--sky);
  color: var(--navy);
  text-align: left;
}
.tpl-list .page-hero::before { display: none; }
.tpl-list .page-hero-eyebrow { margin: 0 0 .75rem; color: var(--navy); font-size: 1rem; font-weight: 700; }
.tpl-list .page-hero h1 {
  max-width: 18ch;
  margin: 0 0 1rem;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem);
  font-style: normal;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.025em;
}
.tpl-list .page-hero h1 em { color: inherit; font-style: normal; }
.tpl-list .page-hero p { max-width: 62ch; margin: 0; color: var(--navy); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }

/* Barre de filtres (listes et guides) */
.filtres-bar, .filter-bar, .filters-section {
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  padding: 0;
  border-bottom: 2px solid var(--foam);
  background: var(--white);
}
.filtres-inner, .filter-bar-inner, .filters-inner { max-width: var(--wrap); margin-inline: auto; padding: .75rem var(--gutter); display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: thin; }
.filtre-btn, .filter-btn {
  flex: none;
  min-height: 44px;
  padding: .45rem 1.05rem;
  border: 2px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}
.filtre-btn:hover, .filter-btn:hover { border-color: var(--navy); color: var(--navy); }
.filtre-btn.active, .filter-btn.active, .filtre-btn[aria-pressed="true"], .filter-btn[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: var(--white); }

.tpl-list .page-content { max-width: var(--wrap); margin: 0 auto; padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem); }
.cat-section { margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section-separator { padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 0; }
.cat-header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1.5rem; padding-bottom: 0; border: 0; }
.cat-header h2 {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.15rem + 1vw, 2rem);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -.015em;
}
.cat-header h2 em { color: inherit; font-style: normal; }
.cat-icon {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  margin: 0;
  border-radius: 12px;
  background: var(--foam);
  font-size: 1.35rem;
}
.cat-count { padding: .2rem .7rem; border-radius: var(--r-pill); background: var(--foam); color: var(--navy); font-size: .9375rem; font-weight: 700; }

/* Cartes article */
.articles-grid, .preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 1.5rem; }
.art-card, .guide-card, .pv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--foam);
  border-radius: var(--r-lg);
  background: var(--white);
  color: var(--navy);
  text-decoration: none;
  transition: border-color .2s;
}
.art-card:hover, .guide-card:hover, .pv-card:hover { transform: none; border-color: var(--sky); }
.art-card-img, .guide-card-img, .pv-card-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--foam); }
.art-card-img img, .guide-card-img img, .pv-card-img img { width: 100%; height: 100%; object-fit: cover; }
.art-card:hover .art-card-img img, .guide-card:hover .guide-card-img img, .pv-card:hover .pv-card-img img { transform: scale(1.03); }
.art-card-badge, .guide-card-badge, .pv-badge {
  position: absolute;
  top: .75rem; left: .75rem;
  padding: .25rem .7rem;
  border-radius: var(--r-pill);
  background: var(--navy);
  color: var(--white);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.art-card-badge.badge-nature, .guide-card-badge.badge-nature { background: #D7F0E3; color: #174A39; }
.art-card-badge.badge-rugby, .guide-card-badge.badge-rugby { background: var(--sun); color: var(--navy); }
.art-card-badge.badge-gastro, .guide-card-badge.badge-gastro { background: var(--coral); color: var(--navy); }
.pv-coup { padding: .25rem .7rem; border-radius: var(--r-pill); background: var(--sun); color: var(--navy); font-size: .875rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.art-card-body, .guide-card-body, .pv-body { display: flex; flex: 1; flex-direction: column; gap: .55rem; padding: 1.1rem 1.25rem 1.25rem; }
.art-card-tags, .guide-card-tags, .pv-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.art-tag, .pv-tag { padding: .2rem .65rem; border: 0; border-radius: var(--r-pill); font-size: .875rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.art-tag-cat, .pv-tag { background: var(--foam); color: var(--navy); }
.art-tag-lieu { background: #FFF1C2; color: var(--navy); }
.art-card-title, .guide-card-title, .pv-name {
  flex: 1;
  margin: 0;
  color: var(--navy);
  font-family: var(--font-text);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
}
.art-card:hover .art-card-title, .guide-card:hover .guide-card-title, .pv-card:hover .pv-name { color: var(--navy); text-decoration: underline; text-decoration-color: var(--ocean); text-decoration-thickness: 3px; text-underline-offset: .15em; }
.art-card-excerpt, .guide-card-excerpt, .pv-desc { flex: none; margin: 0; color: var(--slate); font-size: 1rem; line-height: 1.5; }
.pv-lieu { color: var(--slate); font-size: .9375rem; font-weight: 700; }
.art-card-footer, .guide-card-footer, .pv-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: .75rem;
  border-top: 2px solid var(--foam);
}
.art-card-date, .art-card-meta, .guide-card-label, .pv-domain { color: var(--slate); font-size: .9375rem; }
.art-card-lire, .guide-card-lire, .pv-link { color: var(--link); font-size: .9375rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.art-card-lire::after, .guide-card-lire::after, .pv-link::after { content: none; }

/* Carrousel automatique → grille fixe */
.guides-carousel-wrap { margin: 0; padding: 0; overflow: visible; }
.guides-carousel-wrap::before, .guides-carousel-wrap::after { display: none; }
.guides-track { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 1.5rem; width: auto; padding: 0; animation: none; }
.guide-card { width: auto; }

.section-cta { margin-top: 1.5rem; text-align: left; }
.btn-voir-tout, .btn-gold {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  padding: .7rem 1.4rem;
  border: 2px solid var(--navy);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.btn-voir-tout:hover { background: var(--navy); color: var(--white); }
.btn-gold { border-color: var(--sun); background: var(--sun); }
.btn-gold:hover { border-color: var(--white); background: var(--white); color: var(--navy); }
.total-bar { display: flex; align-items: center; gap: .9rem; margin-bottom: 2.5rem; padding: 0; border: 0; }
.total-num { display: grid; place-items: center; min-width: 64px; height: 64px; padding: 0 .75rem; border-radius: var(--r-md); background: var(--sun); color: var(--navy); font-family: var(--font-display); font-size: 2rem; font-style: normal; font-weight: 600; }
.total-label { color: var(--navy); font-size: 1rem; font-weight: 700; }
.cta-contribute { padding: clamp(1.75rem, 1rem + 3vw, 3rem); border-radius: var(--r-xl); background: var(--navy); color: var(--white); text-align: left; }
.cta-contribute h2, .cta-contribute h3 { color: var(--white); font-family: var(--font-display); font-style: normal; font-weight: 600; }
.cta-contribute em { color: inherit; font-style: normal; }
.cta-contribute p { color: #D6E6F5; margin-inline: 0; }

/* P5. Gabarit Guide filtrable ------------------------------------------ */
.guide-hero, .hero-page, .tpl-guide .page-hero, .agenda-hero {
  position: relative;
  min-height: 0;
  padding: clamp(2.75rem, 1.5rem + 4vw, 5rem) max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))) clamp(2.25rem, 1.5rem + 2vw, 3.25rem) !important;
  overflow: hidden;
  border: 0;
  background: var(--sky) !important;
  color: var(--navy);
  text-align: left !important;
}
.guide-hero::before, .guide-hero::after, .hero-page::before, .hero-page::after, .tpl-guide .page-hero::before, .tpl-guide .page-hero::after, .agenda-hero::before, .agenda-hero::after,
.tpl-guide .page-hero-bg, .tpl-guide .page-hero-overlay { display: none !important; }
.guide-hero-inner, .tpl-guide .page-hero-content, .agenda-hero-inner { position: static; max-width: none; margin: 0; padding: 0; text-align: left; }
.guide-eyebrow, .hero-eyebrow, .hero-tag, .agenda-hero .label {
  display: block;
  margin: 0 0 .75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.guide-hero h1, .hero-page h1, .hero-title, .tpl-guide .page-hero h1, .agenda-hero h1 {
  max-width: 20ch;
  margin: 0 0 1rem;
  color: var(--navy) !important;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.8rem);
  font-style: normal;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.025em;
  text-align: left;
}
.guide-hero h1 em, .hero-page h1 em, .hero-title em, .tpl-guide .page-hero h1 em, .agenda-hero h1 em { color: inherit !important; font-style: normal; }
.guide-hero p, .guide-hero-desc, .hero-desc, .hero-sub, .agenda-hero p {
  max-width: 64ch;
  margin: 0 0 1rem;
  color: var(--navy) !important;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem);
  line-height: 1.6;
  text-align: left;
}
.guide-hero strong, .hero-desc strong, .hero-sub strong { color: var(--navy) !important; }
.tpl-guide .page-hero .hero-sub, .tpl-guide .page-hero p { margin: 0 0 1rem !important; }
.hero-quote {
  max-width: 64ch;
  margin: 1.25rem 0 0;
  padding: 1rem 1.25rem;
  border: 0;
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--navy);
  font-size: 1.0625rem;
  font-style: normal;
  line-height: 1.6;
}
.hero-meta, .agenda-live { display: inline-flex; align-items: center; gap: .5rem; margin-top: .5rem; color: var(--navy); font-size: 1rem; font-weight: 700; }
.hero-meta-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--live); }
.hero-breadcrumb { margin-bottom: 1rem; color: var(--navy); }
.hero-breadcrumb a { color: var(--navy); }

/* Chiffres du bandeau : tuiles plates */
.guide-stats, .hero-stats { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .6rem; margin-top: 1.5rem; }
.guide-stats > div, .hero-stat {
  min-width: 120px;
  padding: .75rem 1rem;
  border: 0;
  border-radius: var(--r-md);
  background: var(--white);
  text-align: left;
}
.guide-stats > div:nth-child(4n+1), .hero-stat:nth-child(4n+1) { background: var(--sun); }
.guide-stats > div:nth-child(4n+2), .hero-stat:nth-child(4n+2) { background: var(--turq); }
.guide-stats > div:nth-child(4n+3), .hero-stat:nth-child(4n+3) { background: var(--coral); }
.guide-stat-n, .hero-stat-num { display: block; color: var(--navy) !important; font-family: var(--font-display); font-size: 1.6rem; font-style: normal; font-weight: 600; line-height: 1.1; }
.guide-stat-l, .hero-stat-label { display: block; margin-top: .2rem; color: var(--navy) !important; font-size: .9375rem; font-weight: 700; letter-spacing: 0; text-transform: none; opacity: 1; }

/* Compteurs, pagination, appels à l'action */
.guide-meta, .results-bar { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); color: var(--navy); font-size: 1rem; }
.guide-count, .results-count, .articles-count, .guide-count-label { color: var(--navy); font-size: 1rem; font-weight: 700; }
.pagination-wrap, .tpl-guide .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 2rem auto; }
.page-btn, .pag-btn, .pagination button, .pagination a {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .75rem;
  border: 2px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.page-btn:hover, .pag-btn:hover, .pagination button:hover { border-color: var(--navy); }
.page-btn.active, .pag-btn.active, .pagination button.active, .pagination .active, [aria-current="page"].page-btn { border-color: var(--navy); background: var(--navy); color: var(--white); }
.page-btn:disabled, .pag-btn:disabled, .pagination button:disabled { opacity: .4; cursor: default; }
.guide-cta {
  margin-top: 2rem;
  padding: clamp(2rem, 1.5rem + 2vw, 3rem) var(--gutter);
  border: 0;
  background: var(--sun) !important;
  color: var(--navy);
  text-align: center;
  --gold-text: #7A4A00; --azure-text: var(--link); --slate-text: var(--slate);
}
.guide-cta p { color: var(--navy) !important; font-size: 1.125rem; font-weight: 700; margin-inline: auto; }
.cta-inner { border-radius: var(--r-lg); background: var(--navy); }
.cta-inner p { color: #D6E6F5; font-size: 1.0625rem; }
.terroir-banner { border-radius: var(--r-xl); }
.terroir-banner h2 { font-family: var(--font-display); font-style: normal; font-weight: 600; }
.terroir-banner h2 em { color: inherit; font-style: normal; }
.terroir-stat .num { font-family: var(--font-display); font-style: normal; font-weight: 600; color: var(--sun); }
.terroir-stat .label { color: #D6E6F5; background: none; padding: 0; }

/* Cartes adresses (restaurants, campings) */
.tpl-guide .resto-card, .tpl-guide .addr-card, .tpl-guide .guide-card-item, .tpl-guide .beach-card, .tpl-guide .article-card {
  border: 2px solid var(--foam);
  border-radius: var(--r-lg);
  background: var(--white);
  overflow: hidden;
}
.tpl-guide .resto-card:hover, .tpl-guide .beach-card:hover, .tpl-guide .article-card:hover { transform: none; border-color: var(--sky); }

/* P6. Gabarit Agenda --------------------------------------------------- */
.breadcrumb-nav {
  padding: .9rem max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))) !important;
  border-bottom: 2px solid var(--foam);
  background: var(--white) !important;
  color: var(--navy);
  font-size: .9375rem;
}
.breadcrumb-nav a { color: var(--link) !important; }
.tpl-agenda .agenda-main, .tpl-agenda .page-main { max-width: var(--wrap); margin-inline: auto; padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--gutter) clamp(3rem, 2rem + 3vw, 4.5rem); background: transparent; }
.tpl-agenda .section-header h2, .tpl-agenda .articles-header h2 { color: var(--navy); font-family: var(--font-display); font-size: clamp(1.45rem, 1.15rem + 1vw, 2rem); font-weight: 600; letter-spacing: -.015em; }
.tpl-agenda .section-header h2 em, .tpl-agenda .articles-header h2 em { color: inherit; font-style: normal; }
.agenda-note { padding: 1.25rem var(--gutter); background: var(--foam) !important; color: var(--navy) !important; font-size: 1rem; }
.agenda-note a { color: var(--link) !important; text-decoration: underline; }
.event-card, .tpl-agenda .article-card { border: 2px solid var(--foam); border-radius: var(--r-lg); background: var(--white); }
.event-card:hover, .tpl-agenda .article-card:hover { transform: none; border-color: var(--sky); }
.event-badge { border-radius: var(--r-sm); background: var(--sun); color: var(--navy); }
.event-title { color: var(--navy); font-size: 1.125rem; font-weight: 700; }
.evt-error, .evt-count { color: var(--navy); font-size: 1rem; }
.source-banner { border: 0 !important; border-radius: var(--r-md) !important; background: var(--foam) !important; }

/* P7. Galerie ---------------------------------------------------------- */
.portfolio-hero, .webcam-page-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  height: auto;
  min-height: clamp(440px, 62vh, 660px);
  padding: 3rem max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  overflow: hidden;
  background: var(--navy);
}
.portfolio-hero > img, .webcam-page-hero > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.webcam-page-hero > div:not([class]) { display: none; }
.portfolio-hero-content, .webcam-page-hero-content {
  position: relative;
  z-index: 1;
  max-width: 820px;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--r-xl);
  background: var(--navy);
  color: var(--white);
  animation: rise .7s var(--ease) both;
  --focus: var(--sun);
}
.portfolio-hero-content .label, .webcam-page-hero-content .label { color: #7CCBFF !important; margin: 0 0 .75rem; }
.portfolio-hero-content h1, .webcam-page-hero-content h1 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.4rem);
  font-style: normal;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.02em;
}
.portfolio-hero-content h1 em { color: inherit; font-style: normal; }
.webcam-page-hero-content h1 span { display: inline; font-family: var(--font-text) !important; font-size: clamp(1rem, .95rem + .4vw, 1.25rem) !important; font-style: normal !important; font-weight: 700 !important; letter-spacing: 0; line-height: 1.45; opacity: 1 !important; color: #7CCBFF !important; }
.webcam-page-hero-content .pip { width: .6rem !important; height: .6rem !important; border-radius: 50%; background: var(--live); }
.portfolio-hero-content p, .webcam-page-hero-content p { margin-top: 1rem; color: #D6E6F5; font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); }
.tpl-galerie .breadcrumb, .tpl-webcam .breadcrumb {
  max-width: none;
  margin: 0;
  padding: .9rem max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))) !important;
  border-bottom: 2px solid var(--foam) !important;
  background: var(--white) !important;
  color: var(--navy) !important;
}
.tpl-galerie .breadcrumb a, .tpl-webcam .breadcrumb a { color: var(--link) !important; text-decoration: underline; }
.tpl-galerie .breadcrumb span, .tpl-webcam .breadcrumb span { color: var(--navy) !important; }
.tpl-galerie .filter-bar, .tpl-webcam .filter-bar {
  display: flex;
  gap: .5rem;
  padding: .75rem max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  overflow-x: auto;
}
.gallery-section { max-width: var(--wrap); margin-inline: auto; padding: clamp(2rem, 1.5rem + 2vw, 3rem) var(--gutter) 2rem; background: transparent; }
.masonry-grid { columns: 3; column-gap: 1rem; }
.masonry-item {
  position: relative;
  margin: 0 0 1rem;
  overflow: hidden;
  break-inside: avoid;
  border-radius: var(--r-md);
  background: var(--foam);
  cursor: zoom-in;
}
.masonry-item img { width: 100%; display: block; transition: transform .5s var(--ease); }
.masonry-item:hover img { transform: scale(1.03); }
.masonry-item:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.masonry-item.hidden, .masonry-item[hidden] { display: none; }
.masonry-overlay {
  position: absolute;
  inset: auto auto .6rem .6rem;
  max-width: calc(100% - 1.2rem);
  padding: .35rem .7rem;
  border-radius: var(--r-sm);
  background: var(--white);
  opacity: 1;
}
.masonry-overlay-title { color: var(--navy); font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.masonry-overlay-place { margin-top: .1rem; color: var(--slate); font-size: .8125rem; letter-spacing: 0; text-transform: none; }
.gallery-section .pagination { display: flex; justify-content: center; gap: .4rem; padding: 1rem 0 0; }
.page-ellipsis { display: inline-grid; place-items: center; min-width: 32px; color: var(--navy); }

/* Visionneuse */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4.5rem 1rem 5rem;
  background: rgba(0, 24, 51, .98);
  --focus: var(--sun);
}
.lightbox.open { display: flex; }
.lightbox[hidden] { display: none !important; }
.lightbox-img { max-width: min(1200px, 100%); max-height: 100%; border-radius: var(--r-md); object-fit: contain; }
.lightbox-close, .lightbox-nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover, .lightbox-nav:hover { background: var(--sun); }
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-caption { position: absolute; left: 1rem; right: 1rem; bottom: 1.25rem; color: var(--white); font-size: 1.0625rem; text-align: center; }

/* À propos du photographe */
.about-photographer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  max-width: var(--wrap);
  margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0;
  padding: clamp(3rem, 2rem + 3vw, 4.5rem) var(--gutter);
  background: transparent;
}
.about-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); }
.about-text h2 { margin: .5rem 0 1rem; color: var(--navy); font-family: var(--font-display); font-weight: 600 !important; }
.about-text h2 em { color: inherit; font-style: normal; }
.about-text p { color: var(--navy) !important; font-size: 1.125rem; }
.about-text .label { color: var(--navy) !important; }
.about-stats { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0; }
.about-stat { min-width: 110px; padding: .8rem 1rem; border-radius: var(--r-md); background: var(--sky); }
.about-stat:nth-child(2) { background: var(--sun); }
.about-stat:nth-child(3) { background: var(--turq); }
.about-stat-n { color: var(--navy); font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.about-stat-l { color: var(--navy); font-size: .9375rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
@media (max-width: 900px) { .masonry-grid { columns: 2; } .about-photographer { grid-template-columns: 1fr; } }
@media (max-width: 540px) { .masonry-grid { columns: 1; } }
@media (max-width: 760px) {
  .portfolio-hero, .webcam-page-hero { display: block; min-height: 0; padding: 0; }
  .portfolio-hero > img, .webcam-page-hero > img { position: relative; z-index: 0; height: 40svh; min-height: 240px; }
  .portfolio-hero-content, .webcam-page-hero-content { max-width: none; border-radius: 0; padding: 1.5rem var(--gutter) 1.75rem; }
}

/* P8. Webcams ---------------------------------------------------------- */
.tpl-webcam #contenu { background: var(--navy); color: var(--white); --focus: var(--sun); --gold-text: var(--sun); --azure-text: #7CCBFF; --slate-text: var(--mist); }
.tpl-webcam .filter-bar { top: var(--header-h); border-bottom: 2px solid var(--navy-2); background: var(--navy); }
.tpl-webcam .filter-btn { border-color: #3A5A82; background: transparent; color: var(--white); }
.tpl-webcam .filter-btn:hover { border-color: var(--white); color: var(--white); }
.tpl-webcam .filter-btn.active, .tpl-webcam .filter-btn[aria-pressed="true"] { border-color: var(--sun); background: var(--sun); color: var(--navy); }
.tpl-webcam .top-webcam-section, .tpl-webcam .webcam-zone { max-width: var(--wrap); margin-inline: auto; padding: clamp(2rem, 1.5rem + 2vw, 3rem) var(--gutter) 1rem; background: transparent; }
.top-webcam-heading { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.25rem; }
.top-webcam-flame { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--sun); font-size: 1.6rem; }
.top-webcam-kicker { color: var(--mist) !important; font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; margin: 0; }
.top-webcam-title, .webcam-zone-title {
  margin: 0;
  color: var(--white) !important;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.1rem);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -.015em;
}
.webcam-zone-title { margin-bottom: 1.25rem; }
.webcam-full-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 1.25rem; }
.webcam-full-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0 !important;
  border-radius: var(--r-lg);
  background: var(--navy-2) !important;
  color: var(--white);
}
.webcam-full-card--top { background: var(--navy-2) !important; }
.webcam-embed { position: relative; aspect-ratio: 16 / 9; margin: .75rem .75rem 0; overflow: hidden; border-radius: var(--r-md); background: #001833; }
.webcam-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.webcam-info { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; padding: 1rem 1.25rem 1.25rem; }
.webcam-info h2, .webcam-info h3 { margin: 0 0 .35rem; color: var(--white); font-family: var(--font-text); font-size: 1.1875rem; font-weight: 700; line-height: 1.3; }
.webcam-full-card--top .webcam-info h2 { font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); font-weight: 600; }
.webcam-info p { color: #D6E6F5 !important; font-size: 1rem; line-height: 1.55; }
.webcam-badges-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.badge-live {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  padding: .25rem .7rem;
  border-radius: var(--r-pill);
  background: var(--live);
  color: var(--white);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.badge-live .pip { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; animation: pulse 1.8s ease-in-out infinite; }
.webcam-loc-tag { display: inline-flex; align-items: center; margin-top: .5rem; padding: .25rem .7rem; border-radius: var(--r-pill); background: var(--navy); color: var(--mist); font-size: .875rem; }
.webcam-coords { color: var(--mist); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.tpl-webcam #contenu > section:not([class]) { padding: clamp(3rem, 2rem + 3vw, 4.5rem) var(--gutter) !important; background: var(--navy) !important; border: 0 !important; }
.tpl-webcam #contenu > section:not([class]) h2 { font-family: var(--font-display); font-weight: 600 !important; }
.tpl-webcam #contenu > section:not([class]) h3 { font-family: var(--font-text); font-weight: 700 !important; font-size: 1.0625rem !important; }
.tpl-webcam #contenu > section:not([class]) p { font-size: 1rem !important; color: #D6E6F5 !important; }
.tpl-webcam #contenu > section:not([class]) a { color: #7CCBFF; text-decoration: underline; }
.partners-strip { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem var(--gutter); overflow-x: auto; background: var(--white) !important; color: var(--navy); }
.partners-label { flex: none; color: var(--navy); font-weight: 700; letter-spacing: 0; text-transform: none; }
.partners-track { display: flex; gap: 1rem; animation: none !important; }
.partner-item img { width: 72px; height: 72px; object-fit: contain; border-radius: var(--r-sm); }

/* P9. Contact et informations ------------------------------------------- */
.tpl-contact .hero { min-height: clamp(460px, calc(70svh - var(--header-h)), 640px); }
.contact-main { background: var(--foam); }
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  align-items: start;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) var(--gutter);
}
.contact-form-wrap { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border: 0; border-radius: var(--r-xl); background: var(--white); }
.form-title { margin-bottom: 1.5rem; color: var(--navy); font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-style: normal; font-weight: 600; letter-spacing: -.015em; }
.form-title span, .form-title em { color: inherit; font-style: normal; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1.15rem; }
.form-group label, .form-rgpd label { display: block; margin-bottom: .4rem; color: var(--navy); font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.form-rgpd label { font-weight: 400; }
.req { color: var(--live); }
.opt { color: var(--slate); font-weight: 400; }
.contact-form-wrap input[type="text"], .contact-form-wrap input[type="email"], .contact-form-wrap input[type="tel"], .contact-form-wrap select, .contact-form-wrap textarea {
  width: 100%;
  min-height: 52px;
  padding: .75rem 1rem;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-text);
  font-size: 1.0625rem;
}
.contact-form-wrap textarea { min-height: 170px; resize: vertical; }
.contact-form-wrap ::placeholder { color: #6B7C90; }
.contact-form-wrap input:focus, .contact-form-wrap select:focus, .contact-form-wrap textarea:focus { outline: 3px solid var(--navy); outline-offset: 2px; border-color: var(--navy); }
.field-error { border-color: var(--live) !important; }
.form-rgpd { display: flex; align-items: flex-start; gap: .75rem; margin: 1.25rem 0 1.5rem; }
.form-rgpd input { width: 24px; height: 24px; flex: none; margin-top: .15rem; accent-color: var(--navy); }
.btn-submit { width: 100%; min-height: 56px; font-size: 1.125rem; }
.form-msg { margin-bottom: 1.25rem; padding: 1rem 1.25rem; border: 0; border-radius: var(--r-md); color: var(--navy); font-weight: 700; }
.form-msg.success { background: #D7F0E3; }
.form-msg.error { background: #FFE0D8; }
.hp-field { position: absolute !important; left: -9999px; }
.contact-info { display: flex; flex-direction: column; gap: 1rem; }
.contact-info .info-block { margin: 0; padding: 1.25rem 1.4rem; border-radius: var(--r-lg); background: var(--white); }
.contact-info .info-block:nth-child(2) { background: var(--sun); }
.contact-info .info-block:nth-child(3) { background: var(--sky); }
.info-block-label { display: block; margin-bottom: .3rem; color: var(--navy); font-size: .9375rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
.contact-info h3 { margin-bottom: .4rem; color: var(--navy); font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.contact-info p { color: var(--navy); font-size: 1.0625rem; }
@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

/* P10. Informations légales (infos/) ------------------------------------ */
.tpl-infos .blob { display: none; }
.tpl-infos .wrap { max-width: var(--wrap); }
.tpl-infos #contenu > section { padding-block: clamp(3rem, 2rem + 3vw, 5rem); background: var(--white) !important; }
.tpl-infos #contenu > section:nth-of-type(even) { background: var(--foam) !important; }
.tpl-infos .eyebrow { display: block; margin-bottom: .6rem; color: var(--navy); font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
:where(.tpl-infos #contenu) h1, :where(.tpl-infos #contenu) h2 { color: var(--navy); font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }
:where(.tpl-infos #contenu) h1 em, :where(.tpl-infos #contenu) h2 em { color: inherit; font-style: normal; }
:where(.tpl-infos #contenu) h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem); line-height: 1.06; }
:where(.tpl-infos #contenu) h2 { margin-bottom: 1rem; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
:where(.tpl-infos #contenu) h3 { color: var(--navy); font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; }
:where(.tpl-infos #contenu) h4, :where(.tpl-infos #contenu) h5 { color: var(--navy); font-size: 1.125rem; font-weight: 700; }
:where(.tpl-infos #contenu) p { color: var(--navy); font-size: 1.125rem; }
.infos-hero { background: var(--sky) !important; }
.hero-grid, .about-grid, .contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.contact-grid { align-items: start; }
.tpl-infos .lead { margin-top: 1rem; font-size: clamp(1.125rem, 1rem + .4vw, 1.3rem); }
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.pill { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border-radius: var(--r-pill); background: var(--white); color: var(--navy); font-size: 1rem; font-weight: 700; }
.tpl-infos .ico { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.glass-card { padding: .75rem; border-radius: var(--r-xl); background: var(--white); }
.glass-card img, .about-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-lg); }
.glass-card .cap { margin: .75rem .5rem .25rem; color: var(--slate); font-size: 1rem; }
.check-list { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.25rem; padding: 0; list-style: none; }
.check-list li { display: flex; align-items: center; gap: .75rem; color: var(--navy); font-size: 1.125rem; font-weight: 700; }
.check-badge { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--turq); }
.check-badge svg { width: 18px; height: 18px; fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.section-head { max-width: 760px; margin-bottom: 2rem; }
.evol-strip { margin-bottom: 1.5rem; padding: 1.5rem; border-radius: var(--r-lg); background: var(--white); }
.evol-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.evol-node { padding: 1rem 1.25rem; border-radius: var(--r-md); background: var(--foam); }
.evol-node.now { background: var(--sun); }
.evol-node h5 { margin: 0; }
.evol-node span:not(.dot) { color: var(--navy); font-size: 1rem; }
.evol-node .dot { display: none; }
.evol-arrow { color: var(--navy); font-size: 1.5rem; font-weight: 700; }
.evol-note { margin-top: 1rem; }
.entity-banner { margin-bottom: 1.5rem; padding: 1.25rem 1.5rem; border-radius: var(--r-lg); background: var(--navy); }
.entity-banner p, .entity-banner strong { color: var(--white) !important; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.tpl-infos .info-card { padding: 1.25rem 1.4rem; border-radius: var(--r-lg); background: var(--white); }
.tpl-infos .info-card .badge { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: .75rem; border-radius: 12px; background: var(--navy); }
.tpl-infos .info-card .badge .ico { stroke: var(--white) !important; }
.tpl-infos .tag { display: block; margin-bottom: .25rem; color: var(--slate); font-size: .9375rem; font-weight: 700; }
.tpl-infos .info-card p { font-size: 1.0625rem; }
.legal-wrap { display: flex; flex-direction: column; gap: .6rem; max-width: 900px; }
.legal-item { border-radius: var(--r-md); background: var(--white); }
.legal-item summary { display: flex; align-items: center; gap: 1rem; min-height: 60px; padding: .9rem 1.25rem; color: var(--navy); font-size: 1.125rem; font-weight: 700; cursor: pointer; list-style: none; }
.legal-item summary::-webkit-details-marker { display: none; }
.legal-num { display: grid; place-items: center; min-width: 40px; height: 40px; border-radius: 12px; background: var(--foam); font-family: var(--font-display); font-size: 1rem; }
.legal-item .txt { flex: 1; }
.legal-item .plus { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--foam); font-size: 1.3rem; }
.legal-item[open] .plus { background: var(--sun); }
.legal-item .body { padding: 0 1.25rem 1.25rem 4.25rem; }
.legal-item .body p { margin-bottom: .75rem; font-size: 1.0625rem; }
:where(.tpl-infos #contenu) a:where(:not([class])) { color: var(--link); text-decoration: underline; }
.contact-aside .aside-item { display: flex; gap: .9rem; margin-top: 1.25rem; }
.ico-wrap { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--white); color: var(--navy); }
.aside-item h5 { margin: 0 0 .15rem; }
.aside-item p { margin: 0; font-size: 1.0625rem; }
.contact-form { padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); border-radius: var(--r-xl); background: var(--white); }
.contact-form label { display: block; margin: 1rem 0 .4rem; color: var(--navy); font-weight: 700; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; min-height: 52px; padding: .75rem 1rem; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--navy); font: inherit; font-size: 1.0625rem; }
.contact-form textarea { min-height: 160px; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 3px solid var(--navy); outline-offset: 2px; }
.contact-form .submit { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 56px; margin-top: 1.5rem; border: 0; border-radius: var(--r-pill); background: var(--navy); color: var(--white); font-size: 1.125rem; font-weight: 700; cursor: pointer; }
.contact-form .submit:hover { background: var(--link); }
.form-note { margin-top: .75rem; color: var(--slate) !important; font-size: 1rem !important; }
.form-status { margin-top: 1rem; font-weight: 700; }
.form-status.ok { color: #174A39; }
.form-status.err { color: var(--live); }
@media (max-width: 860px) { .hero-grid, .about-grid, .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } .legal-item .body { padding-left: 1.25rem; } }

/* Ajustements transverses ---------------------------------------------- */
.tarifs-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important; }
.tarifs-section, .tarifs-grid > *, .article-col-text > *, .bac-grid > *, .marees-grid > * { min-width: 0; }

/* Contrastes : corrections ciblées des composants hérités -------------- */
body.tpl-guide { --c-dark: var(--navy); --c-mid: var(--navy); --c-light: var(--slate); --c-accent: var(--sun); --c-accent2: var(--ocean); --c-bg: var(--foam); --c-border: var(--line); }
.card-type-text, .seo-inner h2 em, .page-hero h1 em { color: var(--navy) !important; font-style: normal !important; }
.card-coup-coeur, .cta-btn { color: var(--navy) !important; }
.stars { color: #7A4A00 !important; }
.card-domain { color: var(--slate) !important; }
.tag-green { color: #174A39 !important; }
.je-prog-status .txt { color: #1D6B2F !important; }
.je-notice strong { color: #7A4A00 !important; }
.je-head-badge { background: var(--link) !important; color: var(--white) !important; }
.aside-coeff-header p, .aside-info-header p, .aside-tarifs-header p, .aside-securite-header p { color: var(--mist) !important; }
.retry-btn { min-height: 48px; padding: .7rem 1.4rem !important; border: 2px solid var(--navy) !important; border-radius: var(--r-pill) !important; background: var(--navy) !important; color: var(--white) !important; font-size: 1rem !important; }
.retry-btn[style] { background: var(--sun) !important; border-color: var(--sun) !important; color: var(--navy) !important; }
.tpl-meteo .mc-temp { opacity: 1 !important; }
.article-cta-block a.btn-primary[style] { margin-left: 0 !important; border-color: var(--navy) !important; background: var(--white) !important; color: var(--navy) !important; }
.article-cta-block a.btn-primary[style]:hover { background: var(--navy) !important; color: var(--white) !important; }
/* Titres rétrogradés pour la hiérarchie : apparence conservée */
:where(#contenu) h3.h4 { font-size: 1.125rem; }
:where(#contenu) h3.h5, :where(#contenu) h4.h5 { font-size: 1rem; }

/* P11. Page Bac de Royan ------------------------------------------------ */
.bac-body { max-width: 960px; }
.bac-body > * + * { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.bac-body h2 {
  margin: 0 0 1rem;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
}
.bac-body h3 { margin: 2rem 0 .75rem; color: var(--navy); font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); font-weight: 700; line-height: 1.3; }
.bac-body h4 { margin: 1.5rem 0 .5rem; color: var(--navy); font-size: 1.0625rem; font-weight: 700; }
.bac-body p, .bac-body li { color: var(--navy); font-size: 1.0625rem; line-height: 1.6; }
.bac-body p + p { margin-top: .75rem; }
.bac-small { margin-top: .75rem; color: var(--slate) !important; font-size: 1rem !important; }
.bac-body .article-intro { margin-bottom: 0; }

/* Alerte travaux */
.bac-alert { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-radius: var(--r-xl); background: var(--coral); }
.bac-alert h2 { color: var(--navy); }
.bac-alert p, .bac-alert li { color: var(--navy); }
.bac-alert-list { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.bac-alert-list li { padding: .75rem 1rem; border-radius: var(--r-md); background: var(--white); }
.bac-alert-list a { color: var(--link); font-weight: 700; text-decoration: underline; }
.bac-alert-links { margin-top: 1.25rem !important; }
.bac-alert .btn { color: var(--white); }

/* Prochains départs */
.bac-next { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-radius: var(--r-xl); background: var(--navy); color: var(--white); --focus: var(--sun); }
.bac-next h2 { color: var(--white); }
.bac-next-period { color: #D6E6F5 !important; }
.bac-next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.25rem; }
.bac-next-grid[hidden] { display: none; }
.bac-next-card { padding: 1.1rem 1.25rem 1.25rem; border-radius: var(--r-lg); background: var(--sky); }
.bac-next-card + .bac-next-card { background: var(--sun); }
.bac-next-card h3 { margin: 0 0 .25rem; color: var(--navy); font-size: 1.0625rem; }
.bac-next-time { margin: 0 !important; color: var(--navy) !important; font-family: var(--font-display); font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem) !important; font-weight: 600; line-height: 1.05 !important; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bac-next-in { margin-top: .35rem !important; color: var(--navy) !important; font-weight: 700; }
.bac-next-after { margin-top: .35rem !important; color: var(--navy) !important; font-size: 1rem !important; }
.bac-next-stop { margin-top: 1.25rem; padding: 1.1rem 1.25rem; border-radius: var(--r-lg); background: var(--coral); }
.bac-next-stop p { color: var(--navy) !important; }
.bac-next-stop a { color: var(--navy); font-weight: 700; text-decoration: underline; }
.bac-next-stop-title { font-family: var(--font-display); font-size: 1.25rem !important; font-weight: 600; }
.bac-next-note { margin-top: 1rem !important; color: var(--mist) !important; font-size: .9375rem !important; }

/* Tableaux d'horaires et de tarifs */
.bac-two { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
.bac-times th[scope="col"]:first-child, .bac-times tbody th { width: 34%; }
.bac-two > * { min-width: 0; }
.bac-times, .bac-fares { width: 100%; border-collapse: separate !important; border-spacing: 0; overflow: hidden; border-radius: var(--r-md); }
.bac-times caption, .bac-fares caption { padding: 0 0 .5rem !important; color: var(--navy); font-size: 1.0625rem; font-weight: 700; text-align: left; }
.bac-times thead th, .bac-fares thead th { background: var(--navy) !important; color: var(--white) !important; vertical-align: bottom; }
.bac-times tbody th, .bac-fares tbody th { background: var(--foam) !important; color: var(--navy) !important; font-weight: 700; text-align: left; }
.bac-times td { font-variant-numeric: tabular-nums; }
.bac-fares td { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bac-fares tr.bac-group th { background: var(--sky) !important; font-size: .9375rem; }
.bac-fares { margin-top: .5rem; }
.bac-fares + .bac-fares, .table-scroll + .table-scroll { margin-top: 1.25rem; }
.bac-tiles { margin: 1.25rem 0 0; }

/* Infos pratiques */
.bac-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .75rem; }
.bac-info { padding: 1.1rem 1.25rem; border-radius: var(--r-lg); background: var(--foam); }
.bac-info h3 { margin: 0 0 .4rem; font-size: 1.0625rem; }
.bac-info p { font-size: 1rem; }
.bac-info a, .bac-contact a, .bac-body .article-lead a { color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.bac-contact { margin-top: 1rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--r-lg); background: var(--sand); }
.bac-contact h3 { margin-top: 0; }
.bac-contact h3 + p { margin-top: 0; }
.bac-contact h3:not(:first-child) { margin-top: 1.5rem; }
.bac-contact-list, .bac-docs { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .75rem 0; padding: 0; list-style: none; }
.bac-contact-list li { font-weight: 700; }
.bac-docs { flex-direction: column; gap: .4rem; }

.bac-body .info-block ul { margin: .25rem 0 0; padding-left: 1.2rem; }
.bac-body .info-block li { margin-bottom: .3rem; font-size: 1rem; }
.bac-body .article-cta-block { flex-wrap: wrap; }
.bac-body .article-cta-block .btn-primary { margin-left: 0; }

@media (max-width: 760px) {
  .bac-next-grid { grid-template-columns: 1fr; }
}
/* Tableaux du bac en pile sur petit écran : chaque ligne devient une fiche */
@media (max-width: 640px) {
  .table-scroll > table.bac-times, .table-scroll > table.bac-fares { min-width: 0; }
  .bac-times thead, .bac-fares thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bac-times, .bac-fares, .bac-times tbody, .bac-fares tbody, .bac-times tr, .bac-fares tr { display: block; width: 100%; }
  .bac-times caption, .bac-fares caption { display: block; }
  .bac-times tr, .bac-fares tr { margin-bottom: .5rem; overflow: hidden; border-radius: var(--r-md); background: var(--white); border: 2px solid var(--foam); }
  .bac-times tbody th, .bac-fares tbody th { display: block; width: auto !important; padding: .6rem .85rem !important; }
  .bac-times td, .bac-fares td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem .85rem !important;
    border-bottom: 1px solid var(--foam) !important;
    background: var(--white) !important;
    white-space: normal;
    text-align: right;
  }
  .bac-times td:last-child, .bac-fares td:last-child { border-bottom: 0 !important; }
  .bac-times td::before, .bac-fares td::before { content: attr(data-label); flex: none; max-width: 55%; color: var(--slate); font-weight: 700; text-align: left; }
  .bac-fares tr.bac-group { margin-top: 1rem; border: 0; background: transparent; }
  .bac-fares tr.bac-group th { border-radius: var(--r-sm); }
}