/* ============================================================
   PAGE CONTRIBUTION SOLIDAIRE (route page_solidaire)  —  design v2
   Mobile-first. Réutilise package/css/base.css (typo / couleurs /
   boutons) et package/css/breadcrumb.css.

   Données (PagesController::showPageSolidaireAction) :
     • TourismeSolidaire     → visuel de couverture, vidéo, introduction
     • TourismeCompensation  → blocs « Le programme de contribution … »
     • TourismeProjet        → blocs « Les projets soutenus par … »
     • Page                  → visuels des cartes « À propos »

   Figma desktop : 919:3027   |   Figma mobile : 919:3171
   ------------------------------------------------------------
   Gouttières (mirror header) : 30px mobile / 40px tablette /
   100px desktop, contenu 1166, centré au-delà de 1366.
   Bascule de structure sur le breakpoint 1100 (menu hamburger →
   menu complet), comme les autres pages v2.
============================================================ */

/* Harmonise .container (base.css) avec la gouttière du header sur toute
   la plage de largeur. Scopé à cette page : solidaire.css n'est chargé
   que sur la route page_solidaire. */
@media (min-width: 769px) and (max-width: 1099px) {
  .container { padding: 0 40px; max-width: 100%; }
}
@media (min-width: 1100px) {
  .container {
    max-width: min(1166px, calc(100% - 2 * 100px));
    margin-inline: auto;
    padding: 0;
  }
}

/* ============================================================
   HEADER  — barre opaque en flux (identique pays / voyage /
   Trouvailles). topbar.css garde .header-transparant en display:none
   (sticky au scroll uniquement) ; on l'affiche ici pour qu'il pousse
   le contenu vers le bas au lieu de chevaucher le hero.
============================================================ */
.header-transparant { display: block; }

@media (min-width: 1100px) {
  .header-transparant { display: block; }

  /* Corrections pixel Figma (919:3028) : texte ink #0f1b24,
     logo 373×27, CTA devis sur une seule ligne. */
  .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; }

  /* Rangée droite : CTA · devise · icône « espace client ».
     Aucun élément ne rétrécit → l'icône reste à 20px, collée à droite. */
  .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  (visuel de couverture + fil d'ariane)
   Figma desktop 919:3043  |  mobile 919:3190
   Mobile  : pt 20 / pb 30, gap 30
   Desktop : pt 40 / pb 20, gap 20
============================================================ */
.section-solidaire-hero {
  background-color: #efece9;
  padding: 20px 0 30px;
}

.solidaire-hero {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.solidaire-hero__image {
  width: 100%;
  height: 350px;
  border-radius: 20px;
  overflow: hidden;
  background-color: #d9d4ce;
}
.solidaire-hero__image img {
  width: 100%;
  height: 100%;
  /* Hauteur constante (350px) quelle que soit la largeur : l'image
     zoome/dézoome pour couvrir la zone et reste centrée. */
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Fil d'ariane : réutilise .breadcrumb / __light / __bold
   (package/css/breadcrumb.css). Reset du style legacy bootstrap. */
.solidaire-hero__breadcrumb .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  display: block;
  /* Le titre de page passe à la ligne mot par mot, jamais en coupant
     un mot au milieu (écrase le word-break:break-word mobile). */
  word-break: normal;
  overflow-wrap: normal;
}
.solidaire-hero__breadcrumb .breadcrumb a { color: #0f1b24; }
.solidaire-hero__breadcrumb .breadcrumb .sep { padding: 0 6px; color: #0f1b24; }

@media (min-width: 1100px) {
  .section-solidaire-hero { padding: 40px 0 20px; }
  .solidaire-hero { gap: 20px; }
}

/* ============================================================
   BLOC ÉDITO  (titre + introduction + média + contenu rédactionnel)
   Figma desktop 919:3047  |  mobile 919:3193
   Colonne de contenu : pleine largeur en mobile, 764px centrés en
   structure complète (frame 1366 − 2×301).
============================================================ */
.section-solidaire-edito {
  background-color: #efece9;
  padding: 40px 0;
}

.solidaire-edito {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 764px;
  margin-inline: auto;
}

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

.solidaire-edito__intro {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: normal;
  color: #0f1b24;
  text-align: center;
}

/* Média de présentation (vidéo du BO, sinon visuel de couverture) :
   330×220 arrondi 10 en mobile → 764×510 arrondi 20 en desktop. */
.solidaire-edito__media {
  width: 100%;
  height: 220px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #d9d4ce;
}
.solidaire-edito__media img,
.solidaire-edito__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Enchaînement : intertitre → blocs compensation → intertitre → projets.
   gap 60px entre chaque élément (Figma 919:3052 / 919:3199). */
.solidaire-edito__content {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
}

.solidaire-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #0f1b24;
}

.solidaire-block__title {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 33px;
  color: #0f1b24;
}

/* ---- Contenu WYSIWYG (BO) --------------------------------
   Neutralise les polices, tailles et alignements posés en inline par
   l'éditeur (text-align:justify, line-height:150%, <span lang>…) :
   on impose la typo Figma (Body M — Lexend Light 15/24, aligné à
   gauche). Le poids reste libre pour préserver <strong>.
---------------------------------------------------------- */
.solidaire-richtext,
.solidaire-richtext *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-family: 'Lexend', sans-serif !important;
  font-size: 15px !important;
  line-height: 24px !important;
}
.solidaire-richtext,
.solidaire-richtext * {
  color: #0f1b24;
  text-align: left !important;
}
/* Le BO stocke parfois des <p> imbriqués : seuls les paragraphes de
   premier niveau portent l'espacement, sinon il se cumule. */
.solidaire-richtext > p + p,
.solidaire-richtext > * > p + p { margin-top: 24px; }
.solidaire-richtext ul,
.solidaire-richtext ol { margin: 16px 0; padding-left: 20px; list-style: revert; }
.solidaire-richtext a {
  color: #9f9a7c;
  text-decoration: underline;
  text-underline-position: from-font;
}
.solidaire-richtext img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ---- Projet soutenu (visuel + texte + « En savoir plus ») ----
   Mobile : visuel au-dessus, pleine largeur (Figma 919:3208).
   Desktop : visuel 321×212 à gauche, texte à droite (Figma 919:3061). */
.solidaire-projet {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

/* Image projet : taille fixe 330×212, sans redimensionnement (mobile comme
   desktop). flex-shrink:0 → ne rétrécit pas dans la rangée. */
.solidaire-projet__image {
  width: 330px;
  height: 212px;
  border-radius: 15px;
  overflow: hidden;
  background-color: #5f5f5f;
  flex-shrink: 0;
}
.solidaire-projet__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.solidaire-projet__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 0 0;
  min-width: 0;
  color: #0f1b24;
}

/* « En savoir plus » : Lexend Deca sauge souligné (.link-decouvrir,
   base.css). Mobile 15/24 → desktop 16/1.7. */
.solidaire-projet__body .link-decouvrir {
  align-self: flex-start;
  font-size: 15px;
  line-height: 24px;
}

@media (min-width: 1100px) {
  .section-solidaire-edito { padding: 40px 0 80px; }

  .solidaire-edito { gap: 60px; }
  .solidaire-edito__title { font-size: 50px; }
  .solidaire-edito__intro { font-size: 20px; }
  .solidaire-edito__media { height: 510px; border-radius: 20px; }

  .solidaire-block__title { line-height: 31px; }

  .solidaire-projet {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }

  .solidaire-projet__body .link-decouvrir {
    font-size: 16px;
    line-height: 1.7;
  }
}

/* ============================================================
   EN SAVOIR PLUS — module partagé « À propos ».
   Markup : front/fragment/apropos_savoir_plus.html.twig
   Styles : v2/package/css/apropos.css (chargé par la page).
============================================================ */