/* ============================================================
   PHUKET360 — article.css
   Mobile-first. Barre de progression, hero, layout, blocs,
   TOC, sidebar, CTA, similaires, share buttons.
   ============================================================ */

/* ============================================================
   BARRE DE PROGRESSION
   ============================================================ */
.article-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--cat-color, var(--soleil));
  z-index: 1000;
  transition: width 0.1s linear;
}

/* ============================================================
   HERO
   ============================================================ */
.article-hero {
  position: relative;
  min-height: 280px;
  background-color: var(--cat-color, var(--ocean-deep));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.article-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13, 27, 42, 0.15) 0%,
    rgba(13, 27, 42, 0.75) 70%,
    rgba(13, 27, 42, 0.92) 100%
  );
}

.article-hero-content {
  position: relative;
  z-index: 1;
  padding: 20px 16px 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.article-badge-cat {
  display: inline-block;
  align-self: flex-start;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.article-badge-cat:hover {
  opacity: 0.85;
  text-decoration: none;
  color: #fff;
}

.article-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
}

.meta-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ============================================================
   WRAPPER ARTICLE
   ============================================================ */
.article-wrapper {
  width: 100%;
  background: #ffffff;
}

/* ============================================================
   LAYOUT PRINCIPAL
   Mobile : colonne unique
   Desktop : grille 1fr + 300px
   ============================================================ */
.article-layout {
  width: 100%;
  max-width: 1100px;
  min-width: 0;
  margin: 0 auto;
  padding: 24px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ============================================================
   COLONNE CONTENU
   ============================================================ */
.article-content {
  width: 100%;
  min-width: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
}

/* ============================================================
   TOC MOBILE
   Fermé par défaut, s'ouvre avec .open
   ============================================================ */
.toc-mobile {
  background: #F5F5F5;
  border: 1px solid rgba(0,0,0,0.08);
  border-left: 3px solid var(--cat-color, var(--soleil));
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 24px;
  overflow: hidden;
}

.toc-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}

.toc-mobile-header svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.toc-mobile.open .toc-mobile-header svg {
  transform: rotate(180deg);
}

.toc-mobile-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.toc-mobile.open .toc-mobile-body {
  max-height: 600px;
}

#tocMobileList {
  list-style: none;
  padding: 0 16px 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ============================================================
   ARTICLE BODY
   ============================================================ */
.article-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--text);
  width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Chaque bloc est un enfant flex direct : sans min-width:0, un seul bloc au
   contenu intrinsequement large (mot ou URL trop long, tableau...) suffit a
   forcer toute la colonne, donc la page, a deborder horizontalement. C'est la
   cause reelle du leger deplacement lateral observe (pas une histoire de
   scrollbar a masquer). */
.article-body > * {
  min-width: 0;
}

.article-body img {
  max-width: 100%;
  height: auto;
}

#articleBody * {
  color: var(--text) !important;
}

/* Override necessaire : #articleBody * { color: var(--text) !important } */
/* ecrase sinon le blanc du compteur carrousel (pastille sombre sur photo). */
#articleBody .carousel-counter {
  color: #fff !important;
}

#articleBody a {
  color: var(--ocean-light) !important;
}

/* L'encart est passe d'un aplat sombre a un fond clair : ces surcharges
   suivent le meme basculement, sinon le texte resterait blanc sur blanc.
   Le !important reste necessaire, #articleBody impose ses propres couleurs
   de texte et de lien a tout ce qu'il contient. */
#articleBody .bloc-affiliation,
#articleBody .bloc-affiliation * {
  color: var(--text) !important;
}

#articleBody .bloc-affiliation .bloc-affil-titre {
  color: var(--ocean-deep) !important;
}

#articleBody .bloc-affiliation .bloc-affil-btn,
#articleBody .bloc-affiliation .bloc-affil-btn * {
  color: var(--white) !important;
}

#articleBody .bloc-affiliation .bloc-affil-badge {
  color: #8A6100 !important;
}

#articleBody .bloc-affiliation .bloc-affil-mention,
#articleBody .bloc-affiliation .bloc-affil-reassurance,
#articleBody .bloc-affiliation .bloc-affil-reassurance span {
  color: var(--text-light) !important;
}

#articleBody .bloc-affiliation .bloc-affil-reassurance-icon {
  color: var(--emeraude) !important;
}

/* -- Blocs typographiques -- */
.bloc-texte {
  color: var(--text);
  line-height: 1.75;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.bloc-texte p { margin-bottom: 0.75em; }
.bloc-texte p:last-child { margin-bottom: 0; }

.bloc-titre {
  color: var(--ocean-deep);
  margin-top: 38px;
  font-size: 1.45rem;
  font-weight: 700;
  font-family: 'Barlow Condensed', sans-serif;
  padding-left: 14px;
  border-left: 4px solid var(--cat-color, var(--ocean-light));
  line-height: 1.2;
}

h3.bloc-titre {
  font-size: 1.2rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  border-left: none;
  padding-left: 0;
  color: var(--ocean-deep);
  margin-top: 16px;
}

h4.bloc-titre {
  font-size: 1rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  border-left: none;
  padding-left: 0;
  color: var(--text);
  font-style: italic;
  margin-top: 12px;
}

/* -- Blocs encarts -- */
.bloc-encart {
  padding: 14px 16px;
  border-radius: var(--radius);
  border-left: 4px solid;
  font-size: 0.95rem;
}

.bloc-encart[data-encart-type="conseil"] {
  background: #eafaf1;
  border-color: #1E8449;
}

.bloc-encart[data-encart-type="attention"] {
  background: #fdedec;
  border-color: #C0392B;
}

.bloc-encart[data-encart-type="info"] {
  background: #eaf4fb;
  border-color: #2E86C1;
}

.bloc-encart[data-encart-type="bref"] {
  background: #EEF4FB;
  border: 1px solid rgba(0,0,0,0.06);
  border-color: var(--cat-color, #2E86C1);
}

.encart-label {
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

/* -- Bloc image -- */
.bloc-image {
  margin: 0;
}

.bloc-image img {
  width: 100%;
  border-radius: var(--radius);
  object-fit: cover;
}

.bloc-image figcaption {
  font-size: 0.82rem;
  color: var(--text-light);
  padding: 8px 16px 4px;
  text-align: center;
  font-style: italic;
}

.bloc-image-zoom {
  background: none;
  border: none;
  padding: 0;
  cursor: zoom-in;
  display: block;
  width: 100%;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* -- Bloc double image -- */
.bloc-double-image {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}

.bloc-double-image__item {
  margin: 0;
  min-width: 0;
}

.bloc-double-image__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.bloc-double-image__item figcaption {
  font-size: 0.78rem;
  color: var(--text-light);
  padding: 6px 4px 2px;
  text-align: center;
  font-style: italic;
}

@media (min-width: 768px) {
  .bloc-double-image {
    gap: 12px;
  }
}

/* -- Bloc carousel -- */
.bloc-carousel {
  position: relative;
  border-radius: var(--radius);
  margin: 0;
  user-select: none;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.carousel-track {
  position: relative;
  height: 220px;
  border-radius: var(--radius);
  overflow: hidden;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  cursor: zoom-in;
}

.carousel-slide.is-active {
  opacity: 1;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-counter {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(0,0,0,0.78);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 12px;
  border-radius: 20px;
  z-index: 3;
  pointer-events: none;
}

.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  z-index: 2;
  color: var(--ocean-deep);
  transition: background 0.2s, opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }
.carousel-prev:hover, .carousel-next:hover { background: #fff; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 0 4px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #ccc;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.carousel-dot.is-active {
  background: var(--cat-color, var(--ocean));
  transform: scale(1.25);
}

/* Lightbox */
#carousel-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
}

#carousel-lightbox img {
  max-height: 80vh;
  max-width: 90vw;
  object-fit: contain;
  border-radius: 4px;
  cursor: default;
}

/* Legende plein ecran : discrete, absente du flux si vide (cf JS, display:none) */
.lightbox-legende {
  max-width: 90vw;
  margin: 0;
  padding: 0 8px;
  color: rgba(255,255,255,0.72);
  font-size: 0.82rem;
  text-align: center;
  cursor: default;
}

#carousel-lightbox .carousel-prev,
#carousel-lightbox .carousel-next {
  position: fixed;
  top: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
}
#carousel-lightbox .carousel-prev:hover,
#carousel-lightbox .carousel-next:hover { background: rgba(255,255,255,0.3); }

@media (min-width: 768px) {
  .carousel-track {
    height: 360px;
  }
}

.carousel-legende {
    display: block;
    text-align: center;
    font-size: 0.78rem;
    color: #7F8C8D;
    padding: 6px 12px 4px;
    font-style: italic;
    line-height: 1.4;
    min-height: 1.2em;
}

/* -- Bloc tableau -- */
.bloc-tableau {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bloc-tableau table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.bloc-tableau th,
.bloc-tableau td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.bloc-tableau thead th {
  background: var(--ocean-deep);
  color: #fff;
  font-weight: 600;
}

.bloc-tableau tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.025);
}

/* -- Bloc accordéon -- */
.bloc-accordeon {
  border: 1px solid rgba(46,134,193,0.25);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.acc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--cat-color, var(--ocean-light)) 8%, white);
  border: none;
  border-left: 3px solid var(--cat-color, var(--ocean-light));
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ocean-deep);
  text-align: left;
  gap: 8px;
}

.acc-chevron {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3E50' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.acc-toggle[aria-expanded="true"] .acc-chevron {
  transform: rotate(180deg);
}

.acc-body {
  display: none;
  padding: 16px;
  padding-left: 20px;
  flex-direction: column;
  gap: 12px;
  background: color-mix(in srgb, var(--cat-color, var(--ocean-light)) 4%, white);
  border-left: 3px solid var(--cat-color, var(--ocean-light));
}

.acc-body:not([hidden]) {
  display: flex;
}

/* -- Bloc bouton -- */
.bloc-bouton {
  text-align: center;
}

.bloc-btn {
  display: inline-block;
  padding: 12px 24px;
  background: var(--ocean-light);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: opacity var(--transition);
}

.bloc-btn:hover {
  opacity: 0.85;
  color: #fff;
  text-decoration: none;
}

/* Neutralise la règle globale #articleBody a sur les boutons */
#articleBody .bloc-btn,
#articleBody .bloc-btn:hover {
  color: #fff !important;
}

/* -- Bloc groupe boutons -- */
.bloc-groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 8px 0;
}

.bloc-btn-item {
  display: inline-flex;
  align-items: center;
  padding: 11px 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ocean-deep);
  text-decoration: none;
  transition: opacity 0.2s;
}

.bloc-btn-item:hover {
  opacity: 0.85;
  text-decoration: none;
}

#articleBody .bloc-btn-item,
#articleBody .bloc-btn-item:hover {
  color: var(--ocean-deep) !important;
}

/* -- Bloc liste -- */
.bloc-liste ul,
.bloc-liste ol {
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
}

.bloc-liste ul li,
.bloc-liste ol li {
  padding-left: 1.4em;
  position: relative;
}

.bloc-liste ul li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--cat-color, var(--soleil));
  font-weight: 700;
  font-size: 1.1em;
  line-height: inherit;
}

.bloc-liste ol {
  counter-reset: ol-counter;
}

.bloc-liste ol li {
  counter-increment: ol-counter;
}

.bloc-liste ol li::before {
  content: counter(ol-counter) '.';
  position: absolute;
  left: 0;
  color: var(--cat-color, var(--soleil));
  font-weight: 700;
  font-size: 0.85em;
}

.btn-itineraire {
  background: var(--cat-color, var(--ocean-light));
  color: #fff;
  border: 1.5px solid transparent;
}

.btn-itineraire:hover {
  background: var(--ocean, #1565C0);
  color: #fff;
}

.btn-site {
  background: transparent;
  border: 1.5px solid var(--cat-color, var(--ocean-light));
  color: var(--cat-color, var(--ocean-light));
}

.btn-site:hover {
  background: var(--cat-color, var(--ocean-light));
  color: #fff;
}

.btn-article {
  background: transparent;
  border: 1.5px solid var(--cat-color, var(--ocean-light));
  color: var(--cat-color, var(--ocean-light));
}

.btn-article:hover {
  background: var(--cat-color, var(--ocean-light));
  color: #fff;
}

/* Neutralise #articleBody a { color: var(--ocean-light) !important } */
#articleBody .btn-itineraire,
#articleBody .btn-itineraire:hover { color: #fff !important; }

#articleBody .btn-site          { color: var(--cat-color, var(--ocean-light)) !important; }
#articleBody .btn-site:hover    { color: #fff !important; }

#articleBody .btn-article       { color: var(--cat-color, var(--ocean-light)) !important; }
#articleBody .btn-article:hover { color: #fff !important; }

/* Icônes Lucide — stroke explicite (currentColor écrasé par #articleBody *) */
#articleBody .btn-itineraire svg,
#articleBody .btn-itineraire:hover svg { stroke: #fff !important; }

#articleBody .btn-site svg          { stroke: var(--cat-color, var(--ocean-light)) !important; }
#articleBody .btn-site:hover svg    { stroke: #fff !important; }

#articleBody .btn-article svg       { stroke: var(--cat-color, var(--ocean-light)) !important; }
#articleBody .btn-article:hover svg { stroke: #fff !important; }

/* -- Bloc séparateur -- */
.bloc-separateur {
  border: none;
  border-top: 1px solid rgba(0,0,0,0.1);
  margin: 8px 0;
}

/* ============================================================
   ARTICLES A DECOUVRIR
   ============================================================ */
.articles-decouverte {
  padding: 40px 0 0;
}

.decouverte-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.decouverte-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ocean-deep);
  margin: 0 0 20px;
}

.decouverte-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (min-width: 768px) {
  .decouverte-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .decouverte-inner {
    padding: 0 24px;
  }
}

/* ============================================================
   CTA CARTE INTERACTIVE
   ============================================================ */
.map-pin-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--cat-color, var(--ocean-light));
  color: #fff !important;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 1px 6px 1px 4px;
  border-radius: 20px;
  margin-left: 4px;
  vertical-align: middle;
  text-decoration: none !important;
  white-space: nowrap;
  line-height: 1.6;
}
.map-pin-link svg {
  width: 11px;
  height: 11px;
  stroke: #fff;
  flex-shrink: 0;
}
.map-pin-link:hover {
  opacity: 0.85;
}

.article-cta {
  text-align: center;
  padding: 24px;
  background: #eef4f9;
  border-radius: var(--radius);
  margin-top: 32px;
}

.article-cta-link {
  color: var(--ocean-light);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.article-cta-link:hover {
  opacity: 0.85;
  text-decoration: none;
  color: var(--ocean-light);
}

/* ============================================================
   CTA AFFILIATION
   ============================================================ */
.article-cta-affiliation {
  background: var(--ocean-deep);
  color: #fff;
  padding: 24px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 32px;
}

.cta-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.cta-sub {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}

.cta-btn {
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  padding: 11px 22px;
  background: var(--soleil);
  color: var(--ocean-deep);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: opacity var(--transition);
}

.cta-btn:hover {
  opacity: 0.85;
  color: var(--ocean-deep);
  text-decoration: none;
}

/* ============================================================
   ARTICLES SIMILAIRES
   Mobile : scroll snap horizontal
   ============================================================ */
.article-similaires {
  margin-top: 40px;
}

.similaires-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ocean-deep);
  margin-bottom: 16px;
}

.similaires-list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 12px;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.similaires-list::-webkit-scrollbar { display: none; }

.card-similaire {
  flex-shrink: 0;
  min-width: 240px;
  scroll-snap-align: start;
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}

.card-similaire:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}

.card-sim-img,
.card-sim-img-placeholder {
  width: 100%;
  height: 140px;
  overflow: hidden;
}

.card-sim-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-sim-img-placeholder {
  display: block;
}

.card-sim-body {
  padding: 12px;
}

.card-sim-titre {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   SIDEBAR DESKTOP
   Cachée sur mobile
   ============================================================ */
.article-sidebar {
  display: none;
}

/* ============================================================
   TOC — styles communs (mobile + desktop)
   ============================================================ */
.toc-item {
  list-style: none;
}

.toc-item--h3 {
  padding-left: 14px;
}

.toc-link {
  display: block;
  padding: 4px 0;
  font-size: 0.82rem;
  color: var(--text-light);
  text-decoration: none;
  line-height: 1.35;
  transition: color var(--transition);
  border-left: 2px solid transparent;
  padding-left: 8px;
}

.toc-link:hover {
  color: var(--text);
  text-decoration: none;
}

.toc-link.active {
  color: var(--cat-color, var(--ocean-light));
  border-left-color: var(--cat-color, var(--ocean-light));
  font-weight: 600;
}

/* ============================================================
   BLOC AFFILIATION (rendu via renderBlocs)
   ============================================================ */
/* Encart clair, borde et pose sur une ombre douce, dans le meme esprit que
   les cartes du module Hebergements : il doit se lire comme une
   recommandation de la maison, pas comme un encart publicitaire subi.
   Ecrit en mobile d'abord, l'elargissement est en fin de section. */
.bloc-affiliation {
  background: linear-gradient(180deg, #FBFCFD 0%, var(--white) 55%);
  color: var(--text);
  padding: 16px;
  border: 1px solid #E4EAF0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Badge promo : colle au bouton, jamais en haut de l'encart. Pilule doree
   pale, assez lisible pour peser dans la decision sans hurler. */
.bloc-affil-badge {
  display: inline-block;
  align-self: flex-start;
  max-width: 100%;
  padding: 5px 12px;
  border-radius: 20px;
  background: #FFF3D6;
  border: 1px solid #F1DCA8;
  color: #8A6100;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Logo a gauche, titre a cote. min-width: 0 sur le titre et flex-shrink: 0
   sur le logo : en 360px le titre se replie sur plusieurs lignes au lieu
   d'ecraser le logo ou de deborder. */
.bloc-affil-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.bloc-affil-logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: contain;
  background: var(--white);
  border: 1px solid #ECEFF3;
  border-radius: 10px;
  padding: 4px;
}

.bloc-affil-titre {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ocean-deep);
  line-height: 1.2;
  min-width: 0;
}

.bloc-affil-texte {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.6;
}

/* Zone de decision : bouton, puis badge juste dessous. En mobile le bouton
   prend toute la largeur, c'est la cible la plus facile a atteindre au
   pouce. A partir de 600px les deux se remettent sur une ligne. */
.bloc-affil-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  margin-top: 3px;
}

.bloc-affil-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 15px 22px;
  background: var(--ocean);
  color: var(--white);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(27, 79, 114, 0.22);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.bloc-affil-btn:hover {
  background: var(--ocean-deep);
  color: var(--white);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 27, 42, 0.24);
}

.bloc-affil-btn-txt { min-width: 0; }

.bloc-affil-btn-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Reassurance : facultative, discrete, jamais concurrente du bouton. */
.bloc-affil-reassurance {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  color: var(--text-light);
  line-height: 1.45;
}

.bloc-affil-reassurance-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--emeraude);
}

/* Mention legale de transparence : lisible, jamais mise en avant. */
.bloc-affil-mention {
  font-size: 0.72rem;
  color: var(--text-light);
  padding-top: 7px;
  border-top: 1px solid #EEF1F5;
}

@media (min-width: 600px) {
  .bloc-affiliation { padding: 22px; gap: 11px; }
  .bloc-affil-head  { gap: 14px; }
  .bloc-affil-logo  { width: 52px; height: 52px; }
  .bloc-affil-titre { font-size: 1.35rem; }

  /* Bouton et badge reviennent cote a cote, le bouton reprend sa largeur
     naturelle : pleine largeur n'a de sens qu'au pouce. */
  .bloc-affil-action { flex-direction: row; align-items: center; gap: 13px; flex-wrap: wrap; }
  .bloc-affil-btn    { width: auto; }
}

/* ============================================================
   BOUTON RETOUR EN HAUT
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: calc(var(--mobile-nav-h) + 16px);
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cat-color, var(--ocean-deep));
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 501;
}

.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

.back-to-top svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .back-to-top {
    bottom: 100px;
    right: 30px;
  }
}

/* ============================================================
   BARRE DE PARTAGE (inline dans le contenu)
   ============================================================ */
/* ============================================================
   SIGNATURE AUTEURS, bas d'article
   ============================================================ */
.article-signature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 32px 0 24px;
  padding: 16px;
  background: var(--sable);
  border-radius: var(--radius-lg);
}

.article-signature-photo {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.article-signature-texte {
  min-width: 0;
}

.article-signature-nom {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ocean-deep);
  line-height: 1.2;
}

.article-signature-bio {
  margin: 4px 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-light);
}

.article-signature-lien {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ocean);
  text-decoration: none;
}

.article-signature-lien:hover {
  text-decoration: underline;
}

.article-share-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin: 24px 0;
}

.article-share-bar span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-light) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.article-share-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  text-decoration: none;
  transition: transform var(--transition), opacity var(--transition);
}

.article-share-bar a:hover {
  transform: scale(1.1);
  opacity: 0.85;
  text-decoration: none;
}

.article-share-bar a:first-of-type {
  background: #25D366;
}

.article-share-bar a:nth-of-type(2) {
  background: #1877F2;
}

.article-share-bar a:nth-of-type(3) {
  background: #0099FF;
}

.share-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ocean);
  border: none;
  cursor: pointer;
  transition: transform var(--transition), opacity var(--transition);
}

.share-copy-btn:hover {
  transform: scale(1.1);
  opacity: 0.85;
}

.article-share-bar svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
}

/* ============================================================
   SIDEBAR — TOC DESKTOP
   ============================================================ */
.sidebar-toc-title,
.sidebar-section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ocean-deep);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

#tocDesktopList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ============================================================
   SIDEBAR — A LIRE AUSSI
   ============================================================ */
.sidebar-a-lire {
  margin-top: 32px;
}

.card-a-lire {
  display: flex;
  gap: 10px;
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  transition: opacity var(--transition);
}

.card-a-lire:last-child { border-bottom: none; }

.card-a-lire:hover {
  opacity: 0.75;
  text-decoration: none;
}

.card-alire-img,
.card-alire-img-placeholder {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  overflow: hidden;
}

.card-alire-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-alire-img-placeholder {
  display: block;
}

.card-alire-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}

.card-alire-titre {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   BLOC EN 10 SECONDES
   ============================================================ */
.bloc-en10secondes {
  background: color-mix(in srgb, var(--cat-color, #F0B429) 12%, transparent);
  border-left: 4px solid var(--cat-color, #F0B429);
  border-radius: 12px;
  padding: 20px;
}

.bloc-en10s-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.bloc-en10s-titre {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cat-color, #F0B429);
}

/* Icône zap dans le header */
.bloc-en10s-header svg {
  width: 20px;
  height: 20px;
  stroke: var(--cat-color, #F0B429);
  flex-shrink: 0;
}

/* Override nécessaire : #articleBody * { color: var(--text) !important } */
/* affecte currentColor donc le stroke hérité des SVG Lucide.            */
/* On cible explicitement stroke pour ne pas dépendre de currentColor.   */
#articleBody .bloc-en10secondes .bloc-en10s-header svg,
#articleBody .bloc-en10secondes .bloc-en10s-list svg {
  stroke: var(--cat-color, #F0B429) !important;
}

#articleBody .bloc-en10secondes .bloc-en10s-titre {
  color: var(--cat-color, #F0B429) !important;
}

.bloc-en10s-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bloc-en10s-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.bloc-en10s-list li svg {
  width: 18px;
  height: 18px;
  stroke: var(--cat-color, #F0B429);
  flex-shrink: 0;
  margin-top: 2px;
}

.bloc-en10s-list li span {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
}

/* -- Bloc vidéo YouTube -- */
.bloc-video {
  margin: 32px 0;
}

.bloc-video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
}

.bloc-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.bloc-video-legende {
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--text-light);
  font-style: italic;
  text-align: center;
}

/* ============================================================
   DESKTOP (>= 768px)
   ============================================================ */
@media (min-width: 768px) {

  .article-hero {
    min-height: 420px;
  }

  .article-hero-content {
    padding: 32px 40px 40px;
    max-width: 860px;
  }

  .article-title {
    font-size: 2.6rem;
  }

  .article-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    padding: 40px 24px 64px;
    align-items: start;
  }

  .article-content {
    width: 100%;
    min-width: 0;
  }

  /* TOC mobile masquée sur desktop */
  .toc-mobile {
    display: none;
  }

  /* Sidebar visible et sticky sur desktop */
  .article-sidebar {
    display: block;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    align-self: start;
  }

  .sidebar-toc {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
  }

  /* Share buttons positionnés sans tenir compte de la bottom nav */
  .share-buttons {
    bottom: 24px;
  }

  /* Similaires : grille 3 colonnes sur desktop */
  .similaires-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    scroll-snap-type: none;
  }

  .card-similaire {
    min-width: unset;
    scroll-snap-align: unset;
  }

}

@media (min-width: 1024px) {
  .article-hero-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 0 48px;
  }

  .article-layout {
    padding: 48px 32px 80px;
  }
}

/* ============================================================
   SOMMAIRE FAB + DRAWER MOBILE
   ============================================================ */
.toc-fab {
  position: fixed;
  bottom: calc(var(--mobile-nav-h) + 16px);
  left: 16px;
  z-index: 800;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ocean-deep);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  -webkit-tap-highlight-color: transparent;
}

.toc-fab svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
  flex-shrink: 0;
}

.toc-drawer {
  position: fixed;
  bottom: var(--mobile-nav-h);
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  z-index: 850;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 60vh;
  overflow-y: auto;
  padding: 20px 20px 32px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
}

.toc-drawer.is-open {
  transform: translateY(0);
}

.toc-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.toc-drawer-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ocean-deep);
}

.toc-drawer-close {
  background: var(--sable);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

/* Croix Lucide : le SVG n'est pas dimensionne par le font-size ci-dessus.
   Taille fixee ici, couleur heritee du bouton. Le rond de 28px, son fond et
   sa position ne bougent pas. */
.toc-drawer-close svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
}

.toc-drawer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toc-drawer-list .toc-link {
  font-size: 0.9rem;
  color: var(--ocean);
  text-decoration: none;
  border-left: none;
  padding-left: 0;
}

.toc-drawer-list .toc-item--h3 .toc-link {
  padding-left: 14px;
  font-size: 0.84rem;
}

.toc-overlay {
  position: fixed;
  inset: 0;
  z-index: 840;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.toc-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 768px) {
  .toc-fab,
  .toc-drawer,
  .toc-overlay {
    display: none;
  }
}

/* ============================================================
   SECTION CONTINUER LA LECTURE
   ============================================================ */
.article-suite {
  background: #f5f0e8;
  padding: 48px 0;
}

.article-suite-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.article-suite-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ocean-deep);
  margin: 0 0 24px;
  text-align: center;
}

.article-suite-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.suite-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.suite-card-img {
  height: 140px;
  background-size: cover;
  background-position: center;
  background-color: var(--ocean-deep);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.suite-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.suite-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--ocean-deep);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-decoration: none;
  z-index: 1;
}

a.suite-card-badge,
a.suite-card-badge:hover { color: #fff !important; text-decoration: none; }

.suite-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.suite-card-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ocean-deep);
  line-height: 1.25;
  margin: 0;
}

.suite-card-meta {
  font-size: 0.72rem;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.suite-card-meta svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ============================================================
   BANDEAU THÉMATIQUES
   ============================================================ */
.article-thematiques {
  background: var(--sable);
  padding: 40px 16px;
}

.article-thematiques-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.article-thematiques-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ocean-deep);
  margin: 0;
}

.thema-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
}

.thema-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 8px;
  background: #fff;
  border-radius: 12px;
  text-decoration: none;
  border-bottom: 3px solid var(--cat-color, #2E86C1);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}

.thema-card i,
.thema-card svg {
  width: 22px;
  height: 22px;
  stroke: var(--cat-color, #2E86C1);
  stroke-width: 1.75;
  flex-shrink: 0;
}

.thema-card span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
}

.article-thematiques-btn {
  display: inline-flex;
  align-items: center;
  background: var(--soleil);
  color: var(--ocean-deep);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 11px 28px;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 4px;
  transition: opacity 0.2s;
}

.article-thematiques-btn:hover {
  opacity: 0.88;
  text-decoration: none;
  color: var(--ocean-deep);
}

@media (min-width: 768px) {
  .article-suite-inner {
    padding: 0 24px;
  }

  .article-suite-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .suite-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }

  .suite-card-img {
    height: 160px;
  }

  .thema-grid {
    gap: 14px;
  }

  .thema-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
  }
}

.acc-body > * { width: 100%; }

/* H3 dans accordéon : plus petit, sans barre */
.acc-body .bloc-titre {
  font-size: 1.1rem;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  border-left: none;
  padding-left: 0;
  color: var(--ocean);
  margin-top: 8px;
}

/* H3 et H4 bruts dans le contenu des accordéons */
.bloc-accordeon .acc-body h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--cat-color, var(--ocean-light)) !important;
  border-left: 3px solid var(--cat-color, var(--ocean-light));
  padding-left: 10px;
  margin-top: 1.2rem;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.bloc-accordeon .acc-body h4 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  margin-top: 1rem;
  margin-bottom: 0.3rem;
}

/* ============================================================
   BLOCS CARTE : fiche-lieu et carte-lieux
   Un seul habillage pour les deux. Deux cartes de styles
   differents dans un meme article seraient une faute, donc
   tout ce qui est commun vit ici et rien n'est duplique.
   Mobile-first.
   ============================================================ */
/* Bloc vertical et pleine largeur : la carte en haut au format paysage,
   l'information en dessous. Ni colonne, ni surimpression, les deux ont ete
   essayees et laissaient du vide a l'ecran. */
.bloc-lieux {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin: 1.5rem 0;
  background: #fff;
}

/* Paysage 4/3 sur telephone, 16/9 sur ordinateur : plus l'ecran est large,
   plus une carte haute mangerait de la hauteur de lecture pour rien. */
.bloc-lieux__carte {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.bloc-lieux__infos {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: #ffffff;
}

.bloc-lieux__nom {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--ocean-deep, #0D1B2A);
}

.bloc-lieux__distance {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text, #2C3E50);
}

.bloc-lieux__geoloc {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--ocean-light, #2E86C1);
  text-decoration: underline;
  cursor: pointer;
}

.bloc-lieux__geoloc:hover { color: var(--ocean, #1B4F72); }
.bloc-lieux__geoloc[disabled] { opacity: 0.55; cursor: default; }

/* Marqueur d'un lieu : meme motif que .p360-marker-icon de carte.css,
   copie ici pour ne pas charger toute la feuille de la carte, comme le
   fait deja hebergement.css. La couleur vient de la sous-categorie et est
   posee en style inline par le divIcon. */
.p360-marker-icon {
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.p360-marker-icon > * {
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.p360-marker-icon svg {
  transform: rotate(45deg);
  width: 16px;
  height: 16px;
  stroke: #ffffff;
}

/* Bloc a plusieurs lieux : le numero prend la place de l'icone, la goutte
   et la couleur ne changent pas. */
.bloc-lieux-marqueur__num {
  color: #ffffff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}

/* Repere Patong sur la carte d'un lieu seul. Volontairement discret :
   il sert a situer le lieu sur l'ile, pas a etre regarde. L'icone a une
   taille nulle cote Leaflet, tout le rendu tient dans __inner, decale
   pour que le point tombe pile sur les coordonnees. */
.bloc-lieux-repere__inner {
  position: absolute;
  top: -6px;
  left: -6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.bloc-lieux-repere__point {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #7F8C8D;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.bloc-lieux-repere__nom {
  white-space: nowrap;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.88);
  color: #5a6a7a;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
}

/* Une seule action dominante, de taille normale et de largeur automatique.
   L'itineraire reste a cote sur la meme ligne, y compris sur telephone. */
.bloc-lieux__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.15rem;
}

.bloc-lieux__btn {
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: 7px;
  background: var(--ocean-light, #2E86C1);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background var(--transition);
}

.bloc-lieux__btn:hover { background: var(--ocean, #1B4F72); }
.bloc-lieux__btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* L'itineraire ne s'adresse pas au meme lecteur : lien texte, pas bouton. */
.bloc-lieux__lien {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: underline;
}

.bloc-lieux__lien svg { width: 14px; height: 14px; flex-shrink: 0; }

/* -- Liste numerotee du bloc carte-lieux ---------------------- */
/* Elle relie les marqueurs au texte et reste lisible meme si Leaflet
   ne charge pas, d'ou son autonomie complete vis-a-vis de la carte. */
.bloc-lieux__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bloc-lieux__ligne {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.bloc-lieux__ligne:first-child { border-top: none; }

.bloc-lieux__ligne-lien {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0;
  text-decoration: none;
  transition: background var(--transition);
}

.bloc-lieux__ligne-lien:hover { background: var(--sable, #FDF6EC); }

.bloc-lieux__numero {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ocean-light, #2E86C1);
  color: #ffffff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
}

.bloc-lieux__ligne-texte {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.bloc-lieux__ligne-nom {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--ocean-deep, #0D1B2A);
}

.bloc-lieux__ligne-distance {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text-light, #5a6a7a);
}

/* Neutraliser la règle globale #articleBody a { color: ... !important } */
#articleBody .bloc-lieux__btn,
#articleBody .bloc-lieux__btn:hover      { color: #ffffff !important; }
#articleBody .bloc-lieux__btn svg        { stroke: #ffffff !important; }
#articleBody .bloc-lieux__lien,
#articleBody .bloc-lieux__lien:hover     { color: var(--ocean-light, #2E86C1) !important; }
#articleBody .bloc-lieux__lien svg       { stroke: currentColor !important; }
#articleBody .bloc-lieux__ligne-nom      { color: var(--ocean-deep, #0D1B2A) !important; }
#articleBody .bloc-lieux__ligne-lien     { color: inherit !important; }
#articleBody .bloc-lieux__geoloc         { color: var(--ocean-light, #2E86C1) !important; }
#articleBody .bloc-lieux__geoloc:hover   { color: var(--ocean, #1B4F72) !important; }

/* Les marqueurs vivent dans #articleBody, donc sous la regle globale
   #articleBody * { color: ... !important }. Blanc explicite, sinon le
   chiffre et l'icone passent en couleur de texte sur la goutte coloree. */
#articleBody .p360-marker-icon svg       { stroke: #ffffff !important; }
#articleBody .bloc-lieux-marqueur__num   { color: #ffffff !important; }
#articleBody .bloc-lieux-repere__nom     { color: #5a6a7a !important; }

/* L'attribution Leaflet passait sur deux lignes et debordait sous le fond
   blanc du bloc. Police reduite, une seule ligne, et le depassement est
   coupe net a la largeur du conteneur quelle qu'elle soit. */
.bloc-lieux__carte .leaflet-control-attribution {
  max-width: 100%;
  padding: 0 4px;
  font-size: 9px;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#articleBody .bloc-lieux__carte .leaflet-control-attribution,
#articleBody .bloc-lieux__carte .leaflet-control-attribution a {
  color: #5a6a7a !important;
}

@media (min-width: 768px) {
  /* Format plus large : une carte haute mangerait de la hauteur de lecture
     sans rien montrer de plus. */
  .bloc-lieux__carte { aspect-ratio: 16 / 9; }

  .bloc-lieux__infos {
    gap: 0.6rem;
    padding: 1.25rem 1.5rem;
  }

  .bloc-lieux__nom { font-size: 1.6rem; }
}

/* ── Bloc Paragraphe (conteneur carte avec header coloré) ── */
.bloc-paragraphe {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.10);
  margin-bottom: 2.5rem;
}

.bloc-paragraphe__header {
  background: var(--cat-color, #1B4F72);
  padding: 0.85rem 1.25rem;
}

.bloc-paragraphe__header h2 {
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
}

.bloc-paragraphe__body {
  background: #fff;
  padding: 0;
}

.bloc-paragraphe__body > *:first-child { margin-top: 0; border-radius: 0; }
.bloc-paragraphe__body > * + * { margin-top: 1rem; }
.bloc-paragraphe__body > *:not(:first-child) { margin-top: 1rem; }
.bloc-paragraphe__body > *:last-child { margin-bottom: 1.25rem; border-radius: 0 0 8px 8px; }
.bloc-paragraphe__body .bloc-encart { border-bottom: 1px solid rgba(0,0,0,0.10); }
.bloc-paragraphe__body .bloc-accordeon { border: none !important; box-shadow: none !important; margin: 0 !important; border-top: 1px solid rgba(0,0,0,0.08) !important; border-radius: 0 !important; background: #F0F4F8; }
.bloc-paragraphe__body .bloc-accordeon:last-child { border-radius: 0 0 10px 10px !important; }
.bloc-paragraphe__body .acc-toggle { padding: 0.75rem 1.25rem; color: var(--ocean); font-weight: 600; border-left: none !important; background: #F0F4F8 !important; }
.bloc-paragraphe__body .acc-body { border-left: none !important; background: #F0F4F8 !important; }

@media (max-width: 768px) {
  .bloc-paragraphe__body {
    padding: 0;
  }
}


/* ── Bloc Encarts ─────────────────────────────────────── */
.bloc-encarts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 1.5rem 0;
}
/* Mobile : scroll horizontal */
@media (max-width: 479px) {
    .bloc-encarts {
        grid-template-columns: unset !important;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        gap: 10px;
    }
    .encart-item {
        flex: 0 0 75vw;
        max-width: 280px;
        scroll-snap-align: start;
    }
}
@media (min-width: 480px) {
    .bloc-encarts[data-count="2"] { grid-template-columns: 1fr 1fr; }
    .bloc-encarts[data-count="3"] { grid-template-columns: 1fr 1fr 1fr; }
    .bloc-encarts[data-count="4"] { grid-template-columns: 1fr 1fr; }
}
.encart-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--encart-color, #0E7490) 10%, white);
    border: 1.5px solid color-mix(in srgb, var(--encart-color, #0E7490) 20%, white);
    border-radius: 8px;
}
.encart-icone {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--encart-color, #0E7490);
    margin-top: 2px;
}
.encart-icone svg { width: 100%; height: 100%; }
.encart-body { flex: 1; min-width: 0; }
.encart-titre {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--encart-color, #0E7490);
    margin: 0 0 3px;
    line-height: 1.2;
}
.encart-contenu {
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.45;
    margin: 0;
}


/* -- Bloc Liste � puces --------------------------------- */
.bloc-liste {
    margin: 1.2rem 0;
    padding: 0;
    list-style: none;
}
.bloc-liste li {
    position: relative;
    padding-left: 1.4em;
    margin-bottom: 0.5em;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text);
}
.bloc-liste li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.57em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cat-color, var(--ocean));
}


/* ============================================================
   BANDEAU D'APERCU (article non publie)
   Visible uniquement pour l'admin connecte. Mobile-first.
   Le body a deja un padding-top de --header-height sur desktop,
   le bandeau passe donc sous le header fixe sans decalage.
   ============================================================ */
.apercu-bandeau {
  width: 100%;
  background: var(--sunset, #E67E22);
  border-bottom: 4px solid #A34700;
  color: #ffffff;
}

.apercu-bandeau-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.9rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.apercu-bandeau-icone {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke-width: 2.4;
}

.apercu-bandeau-texte {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  color: #ffffff;
}

.apercu-bandeau-lien {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  background: #ffffff;
  color: #A34700;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background var(--transition), color var(--transition);
}

.apercu-bandeau-lien:hover,
.apercu-bandeau-lien:focus {
  background: var(--ocean-deep, #0D1B2A);
  color: #ffffff;
}

.apercu-bandeau-lien i,
.apercu-bandeau-lien svg {
  width: 15px;
  height: 15px;
}

@media (min-width: 768px) {
  .apercu-bandeau-inner {
    padding: 1.1rem 1.5rem;
    gap: 0.9rem;
  }
  .apercu-bandeau-texte {
    font-size: 1.05rem;
  }
}