/* ============================================================
   PAGE ARTICLE (page_article)  —  blocs HERO + ÉDITO
   Mobile-first. Réutilise base.css (tokens typo/couleurs/boutons/
   .container/.btn) et descriptif.css (.edito-bloc, colonne 764 centrée).
   Chargé APRÈS base.css / descriptif.css.
   Tout est scopé sous .article-hero / .article-edito : aucune classe
   partagée n'est redéfinie globalement.
   ------------------------------------------------------------
   Le HERO est un clone exact du hero Trouvailles (finding/blocks/_hero
   + finding.css .finding-hero*) : même .container standard, même gabarit,
   pour un rendu identique à la page finding.
   Figma desktop : hero 822:1426 (= 822:1679) · edito 822:1686
   Figma mobile  : hero 822:1169 · edito 822:1176
============================================================ */

/* Fond crème sur toute la page article. Le body est blanc par défaut
   (body.css / reset.css ne posent aucune couleur) ; seules les sections
   posent le crème. On pose #efece9 sur le body pour qu'aucun aplat blanc
   n'apparaisse autour/derrière le bloc description. Conforme à la maquette
   (page entièrement crème). Scopé : article.css n'est chargé que sur
   la page article. */
body { background-color: #efece9; }

/* ============================================================
   HEADER — identique à la page Trouvailles (finding_home)
   Le header sticky .header-transparant (inclus dans le body) est en
   display:none par défaut (topbar.css) ; le header basev2 .header-top est
   position:absolute (conçu pour surplomber un hero sombre plein écran).
   Sans correctif, ce header absolu CHEVAUCHE le hero/l'édito clairs.
   Comme sur finding/country/voyage, on passe .header-transparant en
   display:block → barre opaque (#EFECE9) EN FLUX qui pousse le contenu vers
   le bas et recouvre le header absolu → plus de chevauchement.
   (article.css n'est chargé que sur la page article → override scopé.)
============================================================ */
.header-transparant { display: block; }
@media (min-width: 1100px) {
  .header-transparant { display: block; }
  .header-transparant .menu,
  .header-transparant .destinations-menu { color: #0f1b24; }
  .header-transparant .menu { margin-right: 0; }
  .header-transparant .topbar_top .image-logo { width: 373px; height: 27px; }
  .header-transparant .btn-quote_request { white-space: nowrap; }
  .header-transparant .right-menu { align-items: center; }
  .header-transparant .right-menu > * { flex-shrink: 0; }
  .header-transparant .right-menu > a:last-child {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }
  .header-transparant .right-menu > a:last-child img {
    width: 20px;
    height: 20px;
    display: block;
  }
}


/* ============================================================
   HERO  (« Blog | Catégorie » + visuel + fil d'ariane)
   Calqué 1:1 sur finding.css .section-finding-hero / .finding-hero.
   Figma desktop 822:1426  |  mobile 822:1169
============================================================ */
.article-hero {
  background-color: #efece9;
  padding: 20px 0;
}

/* Colonne plate (titre → image → fil d'ariane), écarts pilotés par marges
   (comme .finding-hero). */
.article-hero__wrap {
  display: flex;
  flex-direction: column;
}

/* Grand titre « Blog | Catégorie » — Heading L (Asul 400).
   26/33 centré (structure hamburger) → 50/1 gauche au menu complet (>=1100),
   exactement comme .finding-hero__title. */
.article-hero__title {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 33px;
  color: #0f1b24;
  text-align: center;
  margin: 0;
}
.article-hero__bar {
  color: #9F9A7C;
  font-family: 'Asul', sans-serif;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

/* Visuel : pleine largeur du contenu, hauteur fixe 350, coins 20.
   margin-top 30 (mobile) → 40 (>=769), comme .finding-hero__image. */
.article-hero__image {
  position: relative;
  width: 100%;
  height: 350px;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 30px;
  background-color: #d9d4ce;
}
.article-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  pointer-events: none;
}

/* Fil d'ariane : réutilise .breadcrumb / __light / __bold (breadcrumb.css),
   comme le hero Trouvailles. margin-top 30 (mobile) → 20 (>=769). */
.article-hero__breadcrumb {
  margin-top: 30px;
}
.article-hero__breadcrumb .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  display: block;
  word-break: normal;
  overflow-wrap: normal;
}
.article-hero__breadcrumb .breadcrumb a { color: #0f1b24; }
.article-hero__breadcrumb .breadcrumb .sep { padding: 0 6px; color: #0f1b24; }

@media (min-width: 769px) {
  .article-hero { padding-top: 40px; }
  .article-hero__image { margin-top: 40px; }
  .article-hero__breadcrumb { margin-top: 20px; }
}

/* Grand titre : bascule 50/1 gauche au changement de structure du site
   (menu complet >=1100), comme .finding-hero__title. */
@media (min-width: 1100px) {
  .article-hero__title {
    font-size: 50px;
    line-height: 1;
    text-align: left;
  }
}


/* ============================================================
   ÉDITO  (méta → titre h1 → chapô → contenu WYSIWYG → CTA)
   Colonne 764 centrée (hérite de .edito-bloc / descriptif.css).
   Figma desktop 822:1686  |  mobile 822:1176
============================================================ */
.article-edito {
  background-color: #efece9;
  /* mobile : padding-top ~40 */
  padding: 40px 0;
}

/* Carte blanche « Bloc édito + images » posée sur le fond beige de la section
   (Figma 822:1432 : bg #fff, radius 20, padding 80/80/90 desktop, contenu 764).
   On pilote nous-mêmes les écarts verticaux (header→corps 60, etc.) : on
   neutralise le gap flex hérité de .edito-bloc. */
.article-edito .edito-bloc {
  gap: 0;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 40px 30px;
  box-sizing: border-box;
  /* Largeur max de la carte = 924 (Figma desktop 822:1432 : contenu 764 + 2×80). */
  max-width: 924px;
}

/* Comportement responsive de la LARGEUR de la carte (specs) :
   • viewport ≥ 924px  → carte FIGÉE à 924px, centrée à l'écran, aucun
     redimensionnement (les marges crème gauche/droite grandissent avec l'écran) ;
   • viewport < 924px  → carte PLEINE LARGEUR, collée aux bords de l'écran
     (100% de la largeur), se redimensionne avec l'écran.
   Ce double comportement découle naturellement de max-width:924 + margin auto
   sur .edito-bloc, à condition que .container n'impose PAS ses gouttières : on
   les neutralise donc ici pour cette section, à TOUTES les largeurs (sinon la
   carte se réduirait dès 1100→924 à cause de min(1166,100%-200) / padding 40).
   (Figma : desktop 822:1432 carte 924 centrée · mobile 822:1175 pleine largeur.) */
.article-edito .container {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}

/* En-tête : date/auteur puis titre, écart interne 15. */
.article-edito__header {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

/* Ligne date/auteur — Body M, gris atténué #999 (le « | » compris). */
.article-edito__meta {
  margin: 0;
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: #999999;
}
.article-edito__sep {
  color: #999999;
  padding: 0 4px;
}

/* Titre article (h1) — Heading L (Asul 400).
   26/33 mobile → 50/1 au menu complet (>=1100), en cohérence avec le hero. */
.article-edito__title {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 33px;
  color: #0f1b24;
  margin: 0;
}

/* Chapô (resumeAccueil) — intro en Body Strong (Lexend Regular 400/15/24). */
.article-edito__lead {
  font-family: 'Lexend', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: #0f1b24;
  margin: 0 0 16px;
}

/* ---- Contenu WYSIWYG (TinyMCE) --------------------------- */
.article-edito__text {
  color: #0f1b24;
}

/* Neutralisation TOTALE des polices du back-office (maquette 822:1432).
   TinyMCE stocke des font-family / font-size inline (style="…", balises
   <font>, <span>) : on les écrase TOUS. Par défaut, l'intégralité du contenu
   passe en Body M (Lexend Light 15/24) ; les titres repassent en Asul juste
   en dessous. On force family + size + line-height uniquement — pas le poids,
   pour préserver l'emphase (<strong>) dans le corps. */
.article-edito__text,
.article-edito__text * {
  font-family: 'Lexend', sans-serif !important;
  font-size: 15px !important;
  line-height: 24px !important;
}

/* Titres de la description : Asul 400, #0f1b24, taille par niveau (Figma).
   Le sélecteur couvre AUSSI les descendants (`h2 *`) : si le BO enveloppe le
   texte du titre dans un <span style="font-family…"> ou un <font>, la police
   Figma s'impose quand même. `!important` bat les styles inline de la base. */
.article-edito__text h1, .article-edito__text h1 *,
.article-edito__text h2, .article-edito__text h2 *,
.article-edito__text h3, .article-edito__text h3 *,
.article-edito__text h4, .article-edito__text h4 *,
.article-edito__text h5, .article-edito__text h5 *,
.article-edito__text h6, .article-edito__text h6 * {
  font-family: 'Asul', sans-serif !important;
  font-weight: 400 !important;
  color: #0f1b24;
}
.article-edito__text h1,
.article-edito__text h2,
.article-edito__text h3,
.article-edito__text h4,
.article-edito__text h5,
.article-edito__text h6 { margin: 24px 0 8px; }
.article-edito__text h1, .article-edito__text h1 * { font-size: 26px !important; line-height: 31px !important; }
.article-edito__text h2, .article-edito__text h2 * { font-size: 26px !important; line-height: 31px !important; }
.article-edito__text h3, .article-edito__text h3 * { font-size: 22px !important; line-height: 27px !important; }
.article-edito__text h4, .article-edito__text h4 * { font-size: 19px !important; line-height: 24px !important; }
.article-edito__text h5, .article-edito__text h5 * { font-size: 17px !important; line-height: 22px !important; }
.article-edito__text h6, .article-edito__text h6 * { font-size: 15px !important; line-height: 22px !important; }
.article-edito__text > :first-child { margin-top: 0; }

/* Alignement à gauche (maquette 822:1432) : écrase le text-align justify/center
   éventuel du contenu WYSIWYG (habitude de l'éditeur BO). */
.article-edito__text,
.article-edito__text * { text-align: left !important; }

/* Paragraphes : espacement inter-paragraphes ~20. Specificité portée à
   (0,2,2) pour battre `.edito-bloc .body-m p + p` (descriptif.css). */
.article-edito__text.body-m p + p {
  margin-top: 20px;
}

/* Listes. */
.article-edito__text ul,
.article-edito__text ol {
  margin: 16px 0;
  padding-left: 20px;
  list-style: revert;
}

/* Liens — sauge, soulignés au survol. */
.article-edito__text a {
  color: #9f9a7c;
  font-family: 'Lexend', sans-serif;
  font-weight: 400;
}
.article-edito__text a:hover {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  text-underline-offset: 2px;
}

/* Images inline de l'article — REDIMENSIONNEMENT FLUIDE (responsive), calé sur
   l'image de couverture (.article-hero__image img : width:100%, object-fit:cover).
   Au lieu d'une taille fixe en px, l'image occupe la largeur de la colonne de
   texte et se redimensionne avec l'écran. L'orientation (data-orientation, posée
   côté serveur par ContentImageProcessor + fallback JS) ne fixe plus une taille
   px mais un RATIO : paysage 764×510 (3:2) plein cadre ; portrait 510×764 (2:3)
   plafonné à 510 de large. object-fit:cover recadre proprement dans le ratio.
   height:auto !important + width:100% !important battent les width/height inline
   hérités de TinyMCE ; aspect-ratio pilote alors la hauteur. */
.article-edito__text img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto !important;
  /* !important : bat le style inline du BO (`margin-left:auto;margin-right:auto`)
     qui centrait les images → ici alignées à GAUCHE, au niveau du texte. */
  margin: 24px 0 !important;
  object-fit: cover;
  border-radius: 10px;
}
/* Paysage : pleine largeur de la colonne, comme l'image de couverture. */
.article-edito__text img[data-orientation="landscape"] {
  width: 100% !important;
  aspect-ratio: 764 / 510;
}
/* Portrait : fluide mais plafonné à 510 de large (aligné à gauche du texte). */
.article-edito__text img[data-orientation="portrait"] {
  width: 100% !important;
  max-width: 510px;
  aspect-ratio: 510 / 764;
}

/* Galerie : suites d'images consécutives, créées par le JS (_edito). Elles sont
   empilées en UNE colonne alignée à gauche (au niveau du texte) — chaque image
   sur sa propre ligne, pleine largeur, comme l'image de couverture. */
.article-edito__gallery {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin: 24px 0;
}
.article-edito__gallery img {
  margin: 0 !important;
}

/* CTA devis — pill compacte alignée à gauche, à la fin du bloc
   (non étirée par la colonne flex), texte + flèche sur une ligne. */
.article-edito__cta {
  align-self: flex-start;
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: max-content;
  max-width: 100%;
  margin-top: 20px;
}
.article-edito__cta .btn__icon {
  flex-shrink: 0;
}
.btn.btn--orange.article-edito__cta:hover {
  background-color: #f39e00;
  border-color: #f39e00;
  color: #ffffff;
}
/* CTA inséré DANS le flux du contenu (avant les images, cf. maquette) : il
   hérite sinon des règles de .article-edito__text (liens sauge, police Lexend
   neutralisée, text-align gauche). On restaure le style bouton + un espacement
   symétrique au-dessus/en-dessous (entre le paragraphe et l'image). */
.article-edito__text a.article-edito__cta,
.article-edito__text a.article-edito__cta:hover {
  color: #ffffff !important;
  font-family: 'Asul', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
.article-edito__text a.article-edito__cta { margin: 30px 0; }

/* ---- ÉDITO desktop --------------------------------------- */
@media (min-width: 769px) {
  .article-edito {
    /* desktop : padding-top 80, bas confortable ~60 */
    padding: 80px 0 60px;
  }
  /* Carte blanche : 764 de contenu + 2 × 80 de padding = 924 (Figma 822:1432).
     max-width:924 est défini au niveau de base (cf. plus haut) ; ici seul le
     padding interne passe en 80 (desktop). */
  .article-edito .edito-bloc {
    padding: 80px 80px 90px;
  }
  .article-edito__header {
    margin-bottom: 60px;
  }
  .article-edito__lead {
    margin: 0 0 20px;
  }
  .article-edito__cta {
    margin-top: 30px;
  }
}

/* Titre : bascule 50/1 au menu complet (>=1100), comme le hero. */
@media (min-width: 1100px) {
  .article-edito__title {
    font-size: 50px;
    line-height: 1;
  }
}


/* ============================================================
   BLOC « Nos trouvailles » (réutilise le module Organiser)
   Le bloc trouvailles reprend les classes .section-organiser / .organiser-*
   (même carrousel finding.js + même design que « Organiser son voyage »).
   Seul ajout : la carte a 2 lignes de texte (pays + intitulé) au lieu d'une ;
   on les groupe avec un petit interligne, dans la colonne flex de la carte.
============================================================ */
.trouvaille-org__text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.trouvaille-org__text a { color: #0f1b24; }