/* =========================================================================
   Gabarit article - Camping L'Arbre d'Or
   A deposer dans wp-content/themes/beecom-child/css/ado-article.css
   Charge uniquement sur les articles (voir ado-article.php).
   ========================================================================= */

:root {
  --ado-petrole: #003E52;
  --ado-petrole-80: #2C6577;
  --ado-petrole-04: #F2F7F9;
  --ado-petrole-08: #E4EEF1;
  --ado-jaune: #FFD100;
  --ado-jaune-pale: #FFF6D1;
  --ado-jaune-bord: #F2DE8C;
  --ado-filet: #DCE6EA;
  --ado-filet-faq: #CFCFCF;
  --ado-titre: 'Quicksand', Helvetica, Arial, Lucida, sans-serif;
  --ado-corps: 'Open Sans', Arial, sans-serif;

  /* En-tete fixe du site : 129 px, hauteur constante au defilement.
     Sert au bloc collant et aux ancres du sommaire, pour que rien
     ne se retrouve masque sous l'en-tete. */
  --ado-header: 129px;
  --ado-offset: calc(var(--ado-header) + 16px);
}

/* La barre d'administration decale tout de 32 px, mais seulement pour
   les utilisateurs connectes : les visiteurs ne la voient pas. */
body.admin-bar { --ado-header: 161px; }

@media (max-width: 980px) {
  :root { --ado-header: 90px; }
  body.admin-bar { --ado-header: 136px; }
}

/* --- corps de l'article ------------------------------------------------ */

.single-post .et_pb_post_content,
.single-post .et_pb_post_content p,
.single-post .et_pb_post_content li {
  font-family: var(--ado-corps);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ado-petrole);
}

.single-post .et_pb_post_content a {
  color: var(--ado-petrole);
  text-decoration: underline;
  text-decoration-color: var(--ado-jaune);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Le module "Contenu de l'article" n'herite pas des styles de titre du module
   Texte : il faut redonner explicitement l'echelle typographique du site. */

.single-post .et_pb_post_content h2 {
  font-family: var(--ado-titre);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.27;
  color: var(--ado-petrole);
  margin: 40px 0 14px;
  padding: 0;
  scroll-margin-top: var(--ado-offset);
  text-wrap: balance;
}

.single-post .et_pb_post_content h2:first-child { margin-top: 0; }

.single-post .et_pb_post_content h3 {
  font-family: var(--ado-titre);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  color: var(--ado-petrole-80);
  margin: 30px 0 10px;
  padding: 0;
  scroll-margin-top: var(--ado-offset);
}

.single-post .et_pb_post_content h4 {
  font-family: var(--ado-titre);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ado-petrole-80);
  margin: 24px 0 8px;
  padding: 0;
}

.single-post .et_pb_post_content ul,
.single-post .et_pb_post_content ol {
  margin: 0 0 17px 1.2em;
  padding: 0;
}

.single-post .et_pb_post_content li { margin-bottom: 6px; }

/* --- chapo (shortcode [ado_intro]) ------------------------------------- */

.ado-chapo p {
  font-family: var(--ado-corps);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ado-petrole);
  font-weight: 600;
  margin: 0 0 14px;
  padding: 0;
}

.ado-chapo p:last-child { margin-bottom: 0; }

/* Le chapo est deja une mise en exergue : on neutralise le gras pour garder
   un bloc homogene, meme si la redactrice en a laisse dans le champ ACF. */
.ado-chapo strong,
.ado-chapo b { font-weight: 600; }

.ado-chapo a {
  color: var(--ado-petrole);
  text-decoration: underline;
  text-decoration-color: var(--ado-jaune);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* --- barre meta -------------------------------------------------------- */

.ado-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  padding: 16px 0;
  border-top: 1px solid var(--ado-filet);
  border-bottom: 1px solid var(--ado-filet);
  font-family: var(--ado-corps);
  font-size: 13.5px;
  line-height: 1.5;
  color: #6E7B80;
}

.ado-meta b { color: var(--ado-petrole); font-weight: 600; }

.ado-meta-i { display: inline-flex; align-items: center; gap: 8px; }

.ado-meta svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: var(--ado-petrole-80);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ado-meta .ado-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
}

/* Bandeau pleine largeur : ajouter la classe ado-bandeau a la SECTION Divi
   qui contient [ado_meta] (onglet Avance > Identifiant et classes CSS). */

.et_pb_section.ado-bandeau {
  padding: 0;
  background: var(--ado-petrole-04);
  border-bottom: 1px solid var(--ado-filet);
}

.et_pb_section.ado-bandeau > .et_pb_row {
  width: 100%;
  max-width: none;
  padding: 0 60px;
  margin: 0;
}

.et_pb_section.ado-bandeau .ado-meta {
  border-top: 0;
  border-bottom: 0;
  justify-content: center;
}

@media (max-width: 980px) {
  .et_pb_section.ado-bandeau > .et_pb_row { padding: 0 22px; }
  .et_pb_section.ado-bandeau .ado-meta { justify-content: flex-start; }
}

/* --- grille dynamique des articles d'une categorie --------------------- */
/* Shortcode [ado_grille]. Reprend le rendu des cartes Metro : image pleine
   largeur, titre en surimpression sur un degrade sombre en bas. */

.ado-grille {
  display: grid;
  grid-template-columns: repeat(var(--ado-cols, 3), minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ado-carte {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: var(--ado-petrole);
  text-decoration: none;
  aspect-ratio: 4 / 3;
  box-shadow: 0 2px 10px rgba(0, 62, 82, .10);
  transition: box-shadow .25s ease, transform .25s ease;
}

.ado-carte:hover,
.ado-carte:focus-visible {
  box-shadow: 0 10px 26px rgba(0, 62, 82, .22);
  transform: translateY(-3px);
}

.ado-carte:focus-visible { outline: 3px solid var(--ado-jaune); outline-offset: 2px; }

.ado-carte-img {
  position: absolute;
  inset: 0;
  display: block;
}

.ado-carte-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.ado-carte:hover .ado-carte-img img { transform: scale(1.05); }

/* Voile de lisibilite : le titre doit rester lisible sur une photo claire. */
.ado-carte::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(to top, rgba(0, 30, 40, .82) 0%, rgba(0, 30, 40, .45) 45%, rgba(0, 30, 40, 0) 100%);
  pointer-events: none;
}

.ado-carte-titre {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 18px 20px;
  font-family: var(--ado-titre);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 1px 8px rgba(0, 20, 28, .5);
}

/* Carte sans image mise en avant : aplat petrole et filet anis, plutot qu'un
   trou dans la grille. */
.ado-carte:not(:has(img)) { background: var(--ado-petrole); }
.ado-carte:not(:has(img))::after { background: none; }
.ado-carte:not(:has(img)) .ado-carte-titre {
  position: static;
  display: flex;
  align-items: flex-end;
  height: 100%;
  border-left: 4px solid var(--ado-jaune);
}

@media (max-width: 980px) {
  .ado-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .ado-carte-titre { font-size: 17px; padding: 16px; }
}

@media (max-width: 600px) {
  .ado-grille { grid-template-columns: 1fr; gap: 16px; }
  .ado-carte { aspect-ratio: 16 / 10; }
}

/* --- navigation article precedent / suivant ---------------------------- */

.single-post .et_pb_post_nav {
  border-top: 1px solid var(--ado-filet);
  padding-top: 22px;
  margin-top: 34px;
}

.single-post .et_pb_post_nav .nav-previous a,
.single-post .et_pb_post_nav .nav-next a {
  font-family: var(--ado-titre);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ado-petrole);
  text-decoration: none;
}

.single-post .et_pb_post_nav .nav-previous a:hover,
.single-post .et_pb_post_nav .nav-next a:hover { color: var(--ado-petrole-80); }

.single-post .et_pb_post_nav span.nav-label { color: var(--ado-petrole); }

.single-post .et_pb_post_nav .meta-nav { color: var(--ado-jaune); }

/* --- sommaire ---------------------------------------------------------- */

.ado-toc {
  border: 1px solid var(--ado-filet);
  border-top: 4px solid var(--ado-jaune);
  background: #fff;
  border-radius: 3px;
}

.ado-toc > summary {
  font-family: var(--ado-titre);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ado-petrole);
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ado-toc > summary::-webkit-details-marker { display: none; }

.ado-toc > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ado-petrole-80);
  border-bottom: 2px solid var(--ado-petrole-80);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.ado-toc[open] > summary::after { transform: rotate(-135deg); }

.ado-toc ol {
  list-style: none;
  margin: 0;
  padding: 0 18px 18px;
  counter-reset: adotoc;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.ado-toc li {
  counter-increment: adotoc;
  font-family: var(--ado-corps);
  font-size: 14px;
  line-height: 1.45;
  display: flex;
  gap: 10px;
  margin: 0;
}

.ado-toc li::before {
  content: counter(adotoc);
  font-family: var(--ado-titre);
  font-weight: 700;
  font-size: 11px;
  color: var(--ado-petrole-80);
  background: var(--ado-petrole-08);
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 2px;
}

.ado-toc li.ado-toc-n3 { padding-left: 14px; }

.ado-toc a { color: #4A4A4A; text-decoration: none; }
.ado-toc a:hover { color: var(--ado-petrole); text-decoration: underline; }
.ado-toc li.is-active a { color: var(--ado-petrole); font-weight: 600; }

/* --- l'essentiel a retenir --------------------------------------------- */

.ado-essentiel {
  margin: 0 0 30px;
  background: var(--ado-jaune-pale);
  border: 1px solid var(--ado-jaune-bord);
  border-radius: 6px;
  padding: 20px 24px;
}

.ado-essentiel-lab {
  font-family: var(--ado-titre);
  font-weight: 700;
  font-size: 16px;
  color: var(--ado-petrole);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.ado-essentiel-lab svg {
  width: 19px;
  height: 19px;
  flex: none;
  stroke: var(--ado-petrole);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ado-essentiel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ado-essentiel li {
  display: flex;
  gap: 10px;
  line-height: 1.6;
  color: var(--ado-petrole);
  font-size: 15px;
  margin: 0;
}

.ado-essentiel li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ado-petrole);
  flex: none;
  margin-top: 9px;
}

/* Le corps est en 500 : le gras doit etre franc pour se detacher. */
.ado-essentiel strong,
.ado-essentiel b,
.ado-faq-rep strong,
.ado-faq-rep b,
.ado-sources strong,
.ado-sources b,
.single-post .et_pb_post_content strong,
.single-post .et_pb_post_content b { font-weight: 700; }

/* --- citation ---------------------------------------------------------- */

.single-post .et_pb_post_content blockquote {
  position: relative;
  margin: 30px 0;
  padding: 26px 30px 24px 62px;
  background: var(--ado-petrole-04);
  border-left: 4px solid var(--ado-jaune);
  border-radius: 0 3px 3px 0;
}

.single-post .et_pb_post_content blockquote::before {
  content: "\201C";
  position: absolute;
  left: 20px;
  top: 6px;
  font-family: var(--ado-titre);
  font-weight: 700;
  font-size: 62px;
  line-height: 1;
  color: var(--ado-jaune);
}

.single-post .et_pb_post_content blockquote p {
  font-size: 17px;
  line-height: 1.65;
  font-style: italic;
  color: var(--ado-petrole);
  margin: 0 0 12px;
}

.single-post .et_pb_post_content blockquote p:last-child { margin-bottom: 0; }

.single-post .et_pb_post_content blockquote cite {
  font-style: normal;
  font-size: 13px;
  color: #6E7B80;
}

/* --- FAQ (reprise de l'accordeon de la home) --------------------------- */

.ado-faq { margin: 44px 0 0; }

.ado-faq > h2 {
  font-family: var(--ado-titre);
  font-weight: 700;
  color: var(--ado-petrole);
  font-size: 27px;
  line-height: 1.25;
  margin: 0 0 6px;
  padding-bottom: 0;
}

.ado-faq details {
  border-bottom: 1px solid var(--ado-filet-faq);
  background: none;
}

.ado-faq summary {
  padding: 17px 46px 15px 0;
  cursor: pointer;
  position: relative;
  list-style: none;
}

.ado-faq summary::-webkit-details-marker { display: none; }

.ado-faq summary h3 {
  font-family: var(--ado-titre);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ado-petrole);
  margin: 0;
  padding: 0;
  display: inline;
}

.ado-faq summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 24px;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--ado-petrole), var(--ado-petrole)) center / 14px 2px no-repeat,
    linear-gradient(var(--ado-petrole), var(--ado-petrole)) center / 2px 14px no-repeat;
}

.ado-faq details[open] summary::after {
  background: linear-gradient(var(--ado-petrole), var(--ado-petrole)) center / 14px 2px no-repeat;
}

.ado-faq summary:focus-visible { outline: 2px solid #2EA3F2; outline-offset: 2px; }

.ado-faq-rep {
  padding: 0 0 20px;
  font-family: var(--ado-corps);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ado-petrole);
}

.ado-faq-rep p:last-child { margin-bottom: 0; }

/* --- boutons ----------------------------------------------------------- */

.ado-btn {
  display: inline-block;
  background: var(--ado-jaune);
  color: var(--ado-petrole);
  font-family: var(--ado-titre);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  padding: 10px 22px;
  border: 1px solid var(--ado-jaune);
  border-radius: 25px;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}

.ado-btn:hover { background: #FFDE45; border-color: #FFDE45; color: var(--ado-petrole); }

.ado-btn-blanc { background: #fff; border-color: #fff; color: var(--ado-petrole); }
.ado-btn-blanc:hover { background: var(--ado-petrole-08); border-color: var(--ado-petrole-08); }

/* --- bloc de reservation bas de page ----------------------------------- */

.ado-cta {
  margin: 40px 0 0;
  background: var(--ado-petrole);
  border-radius: 3px;
  padding: 32px 34px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}

.ado-cta h2 {
  font-family: var(--ado-titre);
  font-weight: 700;
  color: #fff;
  font-size: 25px;
  line-height: 1.25;
  margin: 0 0 8px;
  padding: 0;
}

.ado-cta p {
  color: #CDE2E9;
  margin: 0;
  font-family: var(--ado-corps);
  font-size: 15px;
  line-height: 1.65;
  max-width: 52ch;
}

.ado-cta-acts { display: flex; flex-direction: column; gap: 10px; }

/* --- sources ----------------------------------------------------------- */

.ado-sources {
  margin: 34px 0 0;
  background: var(--ado-petrole-04);
  border: 1px solid var(--ado-filet);
  border-radius: 3px;
  padding: 20px 22px;
}

.ado-sources-lab {
  font-family: var(--ado-titre);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ado-petrole-80);
  margin: 0 0 12px;
}

.ado-sources ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-family: var(--ado-corps);
  font-size: 14px;
}

.ado-sources li {
  display: flex;
  gap: 9px;
  line-height: 1.5;
  color: var(--ado-petrole);
  margin: 0;
}

.ado-sources li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ado-jaune);
  flex: none;
  margin-top: 9px;
}

.ado-sources a { color: var(--ado-petrole); text-decoration: underline; }

.ado-sources-maj {
  color: #6E7B80;
  font-size: 12.5px;
  margin: 14px 0 0;
  font-style: italic;
}

/* --- auteur ------------------------------------------------------------ */

.ado-auteur {
  margin: 30px 0 0;
  border: 1px solid var(--ado-filet);
  border-radius: 3px;
  padding: 22px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.ado-auteur-ph {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
}

.ado-auteur-lab {
  font-family: var(--ado-titre);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ado-petrole-80);
  margin: 0 0 3px;
}

.ado-auteur h2 {
  font-family: var(--ado-titre);
  font-weight: 700;
  font-size: 19px;
  color: var(--ado-petrole);
  margin: 0 0 7px;
  padding: 0;
}

.ado-auteur p {
  margin: 0;
  font-family: var(--ado-corps);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ado-petrole);
}

/* --- encart de reservation de la colonne laterale ----------------------- */

.ado-rail-cta {
  background: var(--ado-petrole);
  border-radius: 3px;
  padding: 22px 20px;
  text-align: center;
  margin-top: 20px;
}

.ado-rail-titre {
  font-family: var(--ado-titre);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 8px;
  padding: 0;
}

.ado-rail-texte {
  font-family: var(--ado-corps);
  font-size: 13.5px;
  line-height: 1.55;
  color: #CDE2E9;
  margin: 0 0 16px;
  padding: 0;
}

/* --- colonne laterale collante ----------------------------------------- */

/* Le bloc collant doit etre la COLONNE Divi, pas un element interne au module
   Code : un element sticky ne se deplace que dans les limites de son parent
   direct, et le module fait exactement la hauteur de son contenu.
   Le selecteur :has cible la colonne qui contient le sommaire, sans qu'il soit
   necessaire de lui poser une classe a la main. La classe .ado-rail reste
   utilisable en secours. */

@media (min-width: 981px) {

  .single-post .et_pb_row > .et_pb_column:has( .ado-toc ),
  .single-post .et_pb_column.ado-rail {
    position: sticky;
    top: var(--ado-offset);
    align-self: flex-start;
    max-height: calc(100vh - var(--ado-offset) - 30px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ado-filet) transparent;
  }

  .single-post .et_pb_row > .et_pb_column:has( .ado-toc )::-webkit-scrollbar,
  .single-post .et_pb_column.ado-rail::-webkit-scrollbar { width: 6px; }

  .single-post .et_pb_row > .et_pb_column:has( .ado-toc )::-webkit-scrollbar-thumb,
  .single-post .et_pb_column.ado-rail::-webkit-scrollbar-thumb {
    background: var(--ado-filet);
    border-radius: 3px;
  }

  /* Sommaire long : c'est la liste qui defile, le titre du bloc et l'encart
     de reservation restent visibles. */
  .single-post .ado-toc ol {
    max-height: calc(100vh - var(--ado-offset) - 290px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ado-filet) transparent;
  }
}

/* --- tablette et mobile ------------------------------------------------ */

@media (max-width: 980px) {
  .ado-cta { grid-template-columns: 1fr; padding: 26px 22px; }
  .ado-cta-acts { flex-direction: row; flex-wrap: wrap; }

  /* l'encart de reservation lateral fait doublon avec le CTA de bas de page.
     On masque aussi le module Divi qui le porte, sinon il laisse une marge. */
  .ado-rail-cta,
  .single-post .et_pb_module:has( > .et_pb_code_inner > .ado-rail-cta:only-child ) { display: none; }

  /* Resserrer l'enchainement hero / bandeau meta / sommaire : les paddings
     par defaut des sections Divi cumulent une centaine de pixels de vide. */
  .single-post .et_pb_section.ado-bandeau { padding: 0; }
  .single-post .et_pb_section.ado-bandeau > .et_pb_row { padding: 4px 22px; }
  .single-post .ado-meta { padding: 12px 0; }

  .single-post .et_pb_section:has( .ado-toc ) { padding-top: 24px; padding-bottom: 34px; }
  .single-post .et_pb_section:has( .ado-toc ) > .et_pb_row { padding-top: 0; padding-bottom: 0; }

  /* La colonne du sommaire ne doit pas laisser un vide avant le contenu. */
  .single-post .et_pb_row > .et_pb_column:has( .ado-toc ) { margin-bottom: 24px; }
  .single-post .ado-toc { margin-bottom: 0; }
}

@media (max-width: 600px) {
  .ado-meta { gap: 8px 18px; font-size: 12.5px; }
  .ado-faq > h2 { font-size: 23px; }
  .ado-auteur { flex-direction: column; gap: 14px; }
}