/* ===== Azur Épure — résidu CSS ne pouvant pas être fait en Tailwind ===== */

/* Variables CSS (référencées dans PHP inline styles si besoin) */
:root {
  --serif: "Poppins", Georgia, serif;
  --sans: "Mulish", system-ui, sans-serif;
  --azur: #2E76B8;
  --ink: #16242F;
  --azur-deep: #1A4E78;
  --corail: #E86E58;
  --corail-deep: #CE5440;
  --line: #E8E2D8;
  --cream: #FBF8F2;
}

html { scroll-behavior: smooth; }

/* ===== Header : état transparent (ne peut pas se faire avec Tailwind :not()) ===== */
header#head {
  transition: background .3s, border-color .3s;
}

/* Sur la home uniquement : le header flotte sur le hero (transparent), sans suivre le scroll.
   Contenant = #page (position:relative) → top:0 s'aligne automatiquement avec le contenu,
   admin-bar inclus. */
body.home header#head,
body.front-page header#head,
body.home-en header#head {
  position: absolute; left: 0; right: 0; top: 0; z-index: 50;
}
header#head.solid {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #E8E2D8;
}
header#head:not(.solid) .logo        { filter: brightness(0) invert(1); }
header#head:not(.solid) .nav-link    { color: #fff; }
header#head:not(.solid) .nav-link small { color: rgba(255,255,255,.75); }
header#head:not(.solid) .lang-btn   { color: rgba(255,255,255,.8); }
header#head:not(.solid) .lang-btn.is-active { color: #fff; }
header#head:not(.solid) .lang-sep   { color: rgba(255,255,255,.5); }
header#head:not(.solid) .btn-ghost  { border-color: rgba(255,255,255,.6); color: #fff; }
header#head:not(.solid) .btn-ghost:hover { background: #fff; color: #1A4E78; border-color: #fff; }
header#head:not(.solid) .burger-bar { background: #fff; }

/* Soulignement animé des liens nav (::after pseudo-élément) */
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  height: 2px; width: 0; background: #E86E58; transition: width .25s;
}
.nav-link:hover::after { width: 24px; }

/* ===== Hero scrim : double gradient (Tailwind ne gère pas le multi-layer bg) ===== */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(9,28,45,.80) 0%, rgba(9,28,45,.58) 34%, rgba(9,28,45,.20) 60%, rgba(9,28,45,0) 86%),
    linear-gradient(180deg, rgba(9,28,45,.55) 0%, rgba(9,28,45,0) 26%, rgba(9,28,45,0) 70%, rgba(9,28,45,.30) 100%);
}
@media (max-width: 980px) {
  .hero-scrim {
    background:
      linear-gradient(90deg, rgba(9,28,45,.82) 0%, rgba(9,28,45,.6) 50%, rgba(9,28,45,.32) 100%),
      linear-gradient(180deg, rgba(9,28,45,.5) 0%, rgba(9,28,45,0) 30%);
  }
}
@media (max-width: 560px) {
  .hero-scrim {
    background:
      linear-gradient(90deg, rgba(9,28,45,.68) 0%, rgba(9,28,45,.44) 55%, rgba(9,28,45,.14) 100%),
      linear-gradient(180deg,
        rgba(9,28,45,.60) 0%, rgba(9,28,45,.27) 30%,
        rgba(9,28,45,.23) 60%, rgba(9,28,45,.40) 100%);
  }
}

.hero-title { text-shadow: 0 2px 30px rgba(8,24,40,.45); }
@media (max-width: 560px) {
  .hero-title { text-shadow: 0 2px 24px rgba(8,24,40,.55); }
}

/* ===== Eyebrow : trait décoratif ::before ===== */
.eyebrow-bar::before {
  content: ""; display: inline-block; width: 26px; height: 2px;
  background: #E86E58; margin-right: 11px; vertical-align: middle;
}

/* ===== Overlay gradient des cartes destination (to top) ===== */
.dcard-media { position: relative; }
.dcard-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,35,47,.75), transparent 55%);
}

/* ===== Article : le conteneur de contenu a sa propre largeur (720px, voir
   content-single.php) — on neutralise l'ancienne contrainte "660px par enfant
   recentré" héritée de components.css (.entry-content > *), sinon chaque bloc
   (paragraphe, image, encart auteur…) se recentre individuellement et casse
   l'alignement à une seule colonne du nouveau design. */
.article-prose.entry-content > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ===== Article : sommaire saisi à la main par les rédacteurs (h2 "Sommaire"
   + <ul id="summary">) — on l'habille en encadré façon maquette sans toucher
   au contenu existant (le contenu est du HTML brut, donc pas de classes Tailwind).
   Les !important ci-dessous neutralisent les règles plus spécifiques de
   components.css (taille des h2 d'article, espacement "space-y-3" du #summary). */
.entry-content h2:has(+ ul#summary) {
  font-family: var(--sans);
  font-size: 16px !important;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--azur);
  /*margin: 8px 0 14px !important;*/
}
.entry-content h2:has(+ ul#summary)::before {
  content: ""; display: inline-block; width: 26px; height: 2px;
  background: var(--corail); margin-right: 11px; vertical-align: middle;
}
.entry-content ul#summary {
  list-style: none; counter-reset: toc; margin: 22px 0 44px !important; padding: 6px 30px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  box-shadow: 0 14px 40px -30px rgba(22,36,47,.4);
}
.entry-content ul#summary li {
  counter-increment: toc;
  border-bottom: 1px solid var(--line);
  padding: 0 !important;
  margin-top: 0 !important;
}
.entry-content ul#summary li:last-child { border-bottom: none; }
.entry-content ul#summary li a {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 16px; font-weight: 600; color: var(--azur-deep);
  text-decoration: underline; text-decoration-color: rgba(46,118,184,.35);
  text-underline-offset: 3px; transition: .2s;
}
.entry-content ul#summary li a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--serif); font-size: 15px; color: var(--corail); font-weight: 700;
  flex: none; width: 1.6em; text-decoration: none;
}
.entry-content ul#summary li a:hover {
  color: var(--corail-deep); text-decoration-color: var(--corail); padding-left: 5px;
}

/* Légère respiration visuelle pour les ancres */
.entry-content h2[id], .entry-content li[id] { scroll-margin-top: 24px; }

/* ===== Article : listes d'adresses recommandées (".custom-margin-list" saisi par
   les rédacteurs). Structure HTML attendue par <li> :
     <div class="addr-info">
       <strong class="addr-title"><em>Nom</em><span class="addr-tag"> — sous-titre</span></strong>
       <span class="addr-desc">Description…</span>
       <a class="addr-link" href="…">Infos et réservations</a>
     </div>
   Habillage façon maquette : séparateurs horizontaux, badge numéroté (généré en CSS
   via counter, à la place de la lettre de la maquette puisqu'on ne peut pas extraire
   une initiale sans toucher au contenu), titre/description sur des lignes distinctes,
   lien CTA avec flèche. Tout ce qui suit est scopé via ":has(.addr-info)" sur le
   <ul> : les autres listes utilisant la même classe ".custom-margin-list" (ex.
   "comment s'y rendre") gardent leur style d'origine (puces, pas de séparateurs). */
.entry-content ul.custom-margin-list:has(.addr-info),
.entry-content-sheet ul.custom-margin-list:has(.addr-info) {
  list-style: none;
  padding-left: 0 !important;
  margin: 22px 0 !important;
  counter-reset: addr-badge;
}
.entry-content ul.custom-margin-list:has(.addr-info) li,
.entry-content-sheet ul.custom-margin-list:has(.addr-info) li {
  padding: 20px 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--line);
}
.entry-content ul.custom-margin-list:has(.addr-info) li:first-child,
.entry-content-sheet ul.custom-margin-list:has(.addr-info) li:first-child {
  border-top: 1px solid var(--line);
}
.entry-content ul.custom-margin-list li:has(.addr-info),
.entry-content-sheet ul.custom-margin-list li:has(.addr-info) {
  display: flex; align-items: flex-start; gap: 18px;
}
/* Le plugin Typography (.prose) cible ":first-child"/":last-child" du <li> pour
   ajouter des marges verticales — le "::before" du badge n'étant pas compté comme
   un enfant, ".addr-info" hérite des deux règles à la fois. On neutralise. */
.entry-content ul.custom-margin-list .addr-info,
.entry-content-sheet ul.custom-margin-list .addr-info {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.entry-content ul.custom-margin-list li:has(.addr-info)::before,
.entry-content-sheet ul.custom-margin-list li:has(.addr-info)::before {
  counter-increment: addr-badge; content: counter(addr-badge);
  flex: none; width: 40px; height: 40px; margin-top: 2px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--cream);
  display: flex; align-items: center; justify-content: center; line-height: 1;
  font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--azur);
}
.entry-content ul.custom-margin-list .addr-title,
.entry-content-sheet ul.custom-margin-list .addr-title {
  display: block; font-family: var(--serif); font-style: normal;
  font-weight: 600; font-size: 1.15em; line-height: 1.25;
  color: var(--ink); margin-bottom: 4px;
}
.entry-content ul.custom-margin-list .addr-title em,
.entry-content-sheet ul.custom-margin-list .addr-title em {
  font-style: normal;
}
.entry-content ul.custom-margin-list .addr-tag,
.entry-content-sheet ul.custom-margin-list .addr-tag {
  font-weight: 400; color: var(--ink); font-size: .9em;
}
.entry-content ul.custom-margin-list .addr-desc,
.entry-content-sheet ul.custom-margin-list .addr-desc {
  display: block; color: var(--ink); opacity: .75;
  font-size: .9em; line-height: 1.55; margin-bottom: 8px;
}
.entry-content ul.custom-margin-list .addr-link,
.entry-content-sheet ul.custom-margin-list .addr-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: .85em; letter-spacing: .02em;
  color: var(--corail); text-decoration: none;
}
.entry-content ul.custom-margin-list .addr-link::after,
.entry-content-sheet ul.custom-margin-list .addr-link::after {
  content: "→"; transition: transform .25s;
}
.entry-content ul.custom-margin-list .addr-link:hover,
.entry-content-sheet ul.custom-margin-list .addr-link:hover {
  color: var(--azur);
}
.entry-content ul.custom-margin-list .addr-link:hover::after,
.entry-content-sheet ul.custom-margin-list .addr-link:hover::after {
  transform: translateX(4px);
}

/* ===== Boutons CTA façon maquette (pill, ex. bouton "itinéraire" du shortcode
   [show_location]) ===== */
.inline-cta { margin: 30px 0 8px; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 700; font-size: 14.5px;
  letter-spacing: .02em; padding: 14px 26px; border-radius: 40px;
  cursor: pointer; border: 1.5px solid transparent; transition: .25s;
  white-space: nowrap; text-decoration: none;
}
.btn-primary { background: var(--corail); color: #fff; }
.btn-primary:hover { background: var(--corail-deep); transform: translateY(-1px); }
.btn .arrow { transition: transform .25s; }
.btn:hover .arrow { transform: translateX(4px); }

/* ===== Mobile drawer : animation slide ===== */
.drawer {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(22,36,47,.45);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.drawer.open { opacity: 1; pointer-events: auto; }
.drawer-panel {
  position: absolute; top: 0; left: 0; height: 100%;
  width: min(86%, 360px);
  transform: translateX(-100%); transition: transform .35s;
}
.drawer.open .drawer-panel { transform: none; }