/* ============================================================
   PAGE NOTRE HISTOIRE  (mobile-first)
   Figma desktop 919:4293 | mobile 919:4413
   Réutilise base.css (typo/utilitaires/.container/.btn) +
   breadcrumb.css. Toutes les données proviennent de la BDD.
   Le bloc « En savoir plus » est désormais un module partagé :
   markup `front/fragment/apropos_savoir_plus.html.twig`
   + styles `v2/package/css/apropos.css`.
============================================================ */

/* ============================================================
   0. HEADER — barre opaque (beige) en flux, dark-on-light.
   topbar.css garde .header-transparant en display:none (sticky au
   scroll) : on le passe en display:block → barre en flux qui pousse
   le hero vers le bas et affiche le texte/logo en foncé (sinon le
   header par défaut de basev2 reste blanc, invisible sur le beige).
============================================================ */
.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;
  }
}

/* ============================================================
   1. HERO  (visuel de couverture + fil d'ariane)
   Figma : header desktop 919:4309 (pt40 pb20, gap20)
           header mobile  919:4432 (pt20 pb30, gap30)
============================================================ */
.section-histoire-hero {
  background-color: #efece9;
  padding-top: 20px;
  padding-bottom: 30px;
}

.section-histoire-hero .container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.histoire-hero__image {
  width: 100%;
  height: 350px;
  border-radius: 20px;
  overflow: hidden;
}
.histoire-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.histoire-hero__breadcrumb .sep {
  color: #0f1b24;
  margin: 0 4px;
}

/* ============================================================
   2. ÉDITO  (titre + texte — translation.titre / translation.texte)
   Figma : bloc desktop 919:4313 (pt40 pb80, colonne 764 centrée, gap90)
           bloc mobile  919:4435 (py40, gap40, px30)
============================================================ */
.section-histoire-edito {
  background-color: #efece9;
  padding: 40px 0;
}

.histoire-edito {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

.histoire-edito__title {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 35px;
  line-height: 1;
  color: #0f1b24;
  text-align: center;
  width: 100%;
}

.histoire-edito__text {
  width: 100%;
  color: #0f1b24;
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
}
.histoire-edito__text p {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
}
.histoire-edito__text p + p { margin-top: 24px; }

/* Paragraphe d'accroche (1er paragraphe) — Asul 20 (Figma) */
.histoire-edito__text > p:first-child {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
}

/* Titres du contenu BO (h1–h4). Le reset global aplatit h1..h6 (font-size /
   weight: unset) → ils s'affichent comme du texte courant. On rétablit une
   hiérarchie Asul. Hiérarchie demandée : h3 < h2 < h4 < h1 (h4 volontairement
   plus grand que h2). Le sélecteur couvre les descendants (`h2 *`) au cas où le
   BO enveloppe le texte dans un span, avec !important pour battre un style
   inline éventuel — cf. pages Lieux / Article. */
.histoire-edito__text h1, .histoire-edito__text h1 *,
.histoire-edito__text h2, .histoire-edito__text h2 *,
.histoire-edito__text h3, .histoire-edito__text h3 *,
.histoire-edito__text h4, .histoire-edito__text h4 * {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  color: #0f1b24;
}
.histoire-edito__text h1,
.histoire-edito__text h2,
.histoire-edito__text h3,
.histoire-edito__text h4 { margin: 24px 0 8px; }
.histoire-edito__text h1, .histoire-edito__text h1 * { font-size: 34px !important; line-height: 40px !important; }
.histoire-edito__text h4, .histoire-edito__text h4 * { font-size: 28px !important; line-height: 34px !important; }
.histoire-edito__text h2, .histoire-edito__text h2 * { font-size: 24px !important; line-height: 30px !important; }
.histoire-edito__text h3, .histoire-edito__text h3 * { font-size: 20px !important; line-height: 27px !important; }

/* Signature (nom en bas de la description) — Asul gras, cf. maquette 919:4314 */
.histoire-edito__signature {
  display: block;
  margin-top: 40px;
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
  color: #0f1b24;
}

/* ============================================================
   3. EN SAVOIR PLUS — module partagé.
   Markup : front/fragment/apropos_savoir_plus.html.twig
   Styles : v2/package/css/apropos.css (chargé par la page ; les flèches
   prev/next sont masquées au niveau du module, pour toutes les pages « À propos »). */

/* ============================================================
   DESKTOP  (≥ 769px)
============================================================ */
@media (min-width: 769px) {
  .section-histoire-hero {
    padding-top: 40px;
    padding-bottom: 20px;
  }
  .section-histoire-hero .container { gap: 20px; }

  .section-histoire-edito {
    padding: 40px 0 80px;
  }
  .histoire-edito {
    gap: 90px;
    max-width: 764px;
    margin-inline: auto;
  }
  .histoire-edito__title { font-size: 50px; }
  .histoire-edito__text > p:first-child { line-height: 24px; }
}