/* ===========================================================================
   NOUVEAU GABARIT PRODUIT — complements de style
   ---------------------------------------------------------------------------
   La fiche au nouveau gabarit enveloppe son contenu dans #page_croisiere_promenade,
   ce qui lui vaut toute la mise en page de css/croisiere_promenade.css. Ce
   fichier ne contient donc que les deux cas que cela ne couvre pas :

   1. les regles de css/produit.css qui gagnent par ordre de chargement
      (#contenu_produit X et #page_croisiere_promenade X ont la meme
      specificite, et produit.css est charge apres) : on les reprend ici, plus
      specifiques, pour rendre la main a la mise en page promenade ;
   2. les blocs qui n'existent pas sur la promenade et viennent du mockup
      (.bloc_points_forts), repris de sa feuille.

   A charger APRES produit.css (voir includes/includes_header.php).
   =========================================================================== */

/* --- 0. LARGEUR UTILE -----------------------------------------------------
   produit.css plafonne .align_center a 1080px sur la fiche, la promenade a
   1100px. Le conteneur du nouveau gabarit est un descendant de ce
   .align_center : on ne peut donc l'elargir qu'en visant le parent, d'ou le
   :has(). Les autres fiches gardent leurs 1080px. */
#contenu_produit .align_center:has(> #page_croisiere_promenade) { max-width: 1100px; }

/* --- 1. REPRENDRE LA MAIN SUR produit.css --------------------------------- */

/* Titres a picto : 18px/24 et picto a 38px sur la promenade, contre 16px/22 et
   36px dans produit.css. Sans cela les intertitres du nouveau gabarit sont
   deux pixels plus petits que ceux dont ils reprennent la mise en page. */
#contenu_produit #page_croisiere_promenade .titre_icone {
	margin: 0 0 15px 0;
	padding: 4px 0 4px 38px;
	font-size: 18px;
	line-height: 24px;
}
#contenu_produit #page_croisiere_promenade .titre_icone > span {
	font-size: 18px;
	line-height: 24px;
	font-style: normal;
}

/* --- 2. BLOC POINTS FORTS (accroche + liste), absent de la promenade ------
   Repris de la feuille du mockup : cadre gris arrondi, puces a picto. */

#contenu_produit #page_croisiere_promenade .bloc_points_forts { margin: 0 0 20px 0; }

#contenu_produit #page_croisiere_promenade .bloc_points_forts .cadre_infos {
	background: #f4f6fa;
	padding: 10px 15px 15px 15px;
	border-radius: 15px;
	margin-top: 10px;
}
#contenu_produit #page_croisiere_promenade .bloc_points_forts .cadre_infos ul,
#contenu_produit #page_croisiere_promenade .bloc_points_forts .infos {
	list-style: none;
	margin: 0;
	padding-left: 32px;
}
#contenu_produit #page_croisiere_promenade .bloc_points_forts .cadre_infos li {
	position: relative;
	margin-top: 8px;
	padding: 3.5px 0;
}
#contenu_produit #page_croisiere_promenade .bloc_points_forts .cadre_infos li:first-child { margin-top: 0; }
#contenu_produit #page_croisiere_promenade .bloc_points_forts .cadre_infos li a { text-decoration: underline; }

/* --- 2 bis. HAUTEUR DU PLAN ----------------------------------------------
   Les deux colonnes du bloc reservation sont deja de meme hauteur (etirement
   flex), mais le contenu de celle de droite s'arretait avant le bas : le plan
   Google etait fige a 250px. On rend la chaine extensible pour que ce soit lui
   qui absorbe la difference, en grandissant quand la colonne de gauche est
   plus haute et en retrecissant dans le cas inverse — sans jamais passer sous
   une hauteur lisible.
   min-height: 0 sur les conteneurs intermediaires : sans cela un element flex
   refuse de descendre sous la hauteur de son contenu et rien ne se contracte. */
#contenu_produit #page_croisiere_promenade .bloc_map_promenade {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}
#contenu_produit #page_croisiere_promenade .bloc_map_promenade #plan_circuit_produit,
#contenu_produit #page_croisiere_promenade .bloc_map_promenade #plan_embarq_produit,
#contenu_produit #page_croisiere_promenade .bloc_map_promenade .plan_circuit.iframe {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	        flex: 1 1 auto;
	min-height: 0;
}
#contenu_produit #page_croisiere_promenade .bloc_map_promenade .iframe_plan_circuit,
#contenu_produit #page_croisiere_promenade .bloc_map_promenade .embarquement.google_my_maps {
	position: relative;
	height: auto;
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	        flex: 1 1 auto;
	min-height: 200px;
}
/* produit.css etire l'iframe avec height: calc(100% + 60px) — les 60px du haut
   etant masques par overflow:hidden pour couper le bandeau Google. Ce
   pourcentage exige une hauteur DEFINIE sur le parent ; depuis qu'il est
   flexible (height: auto), il n'en a plus, et l'iframe retombait sur sa
   hauteur intrinseque de 150px des que le flex ne lui imposait pas sa taille
   — visible sous 700px. En positionnement absolu, le pourcentage se resout
   sur la hauteur utilisee du parent, qui elle est toujours connue. */
#contenu_produit #page_croisiere_promenade .bloc_map_promenade .iframe_plan_circuit iframe,
#contenu_produit #page_croisiere_promenade .bloc_map_promenade .embarquement.google_my_maps iframe {
	position: absolute;
	top: -60px;
	left: 0;
	width: 100%;
	height: calc(100% + 60px);
	margin-top: 0;
}
/* l'aspect-ratio du plan d'embarquement l'emporterait sur la hauteur flexible */
#contenu_produit #page_croisiere_promenade .bloc_map_promenade .embarquement.google_my_maps {
	aspect-ratio: auto;
}

/* --- 2 ter. INFOS SOUS LE CALENDRIER -------------------------------------
   Le contenu de contenu_produit_extra.infos_calendrier_xx est saisi en
   back-office : on ne peut pas demander a l'editeur d'y mettre des classes.
   Le <ul> qu'il ecrit recoit donc la meme presentation que .reassurance, et le
   texte libre autour suit. Les <li> n'ont pas de pastille d'icone, faute de
   classe : on leur donne une puce discrete a la place. */
/* Le conteneur ne porte plus d'habillage : c'est le <ul> qui fait le cadre
   creme, et les <p> qui le suivent restent en dehors, comme .lien_groupes.
   L'editeur n'a ainsi aucune classe a poser, il ecrit une liste puis du texte. */
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .infos_calendrier {
	font-size: 12.5px;
	line-height: 1.35;
	color: #333;
}
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .infos_calendrier > :last-child { margin-bottom: 0; }
/* Paragraphes apres la liste : meme traitement que .lien_groupes. */
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .infos_calendrier p {
	margin: 12px 0 0 0;
	font-size: 13px;
	color: #333;
}
/* Pas de white-space: nowrap ici, contrairement a .lien_groupes : le libelle
   saisi en back-office peut etre long (« Demande speciale (groupe scolaire,
   paiement differe…) ») et empechait le conteneur de se reduire sous 400px. */
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .infos_calendrier p a {
	color: #f65e46;
	font-weight: 600;
	text-decoration: none;
}
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .infos_calendrier p a:hover { text-decoration: underline; }
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .infos_calendrier ul {
	list-style: none;
	margin: 15px 0 0 0;
	padding: 14px 16px;
	background: #f5f4f0;
	border-radius: 12px;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 16px 1fr;
	grid-template-columns: 1fr 1fr;
	gap: 10px 16px;
}
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .infos_calendrier li {
	position: relative;
	margin: 0;
	padding-left: 14px;
}
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .infos_calendrier li:before {
	content: '';
	position: absolute;
	left: 0;
	top: .45em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #f65e46;
}
@media only screen and (max-width: 860px) {
	#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .infos_calendrier ul {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
	}
}

/* --- 2 quater. PUCES EMOJI ------------------------------------------------
   Quand une puce saisie en back-office commence par un emoji, haut_produit.php
   le deplace dans data-emoji (le texte en base reste intact) et c'est ici
   qu'il devient la puce. Les listes sans emoji gardent leur presentation. */
#contenu_produit #page_croisiere_promenade .cadre_infos li[data-emoji],
#contenu_produit #page_croisiere_promenade .infos_calendrier li[data-emoji] {
	position: relative;
	list-style: none;
}
#contenu_produit #page_croisiere_promenade .cadre_infos li[data-emoji]:before {
	content: attr(data-emoji);
	position: absolute;
	left: -32px;
	top: 0;
	width: 27px;
	text-align: center;
	font-size: 20px;
	line-height: 27px;
}
/* Sous le calendrier, l'emoji est pose dans une pastille blanche ronde, comme
   les .ico de .reassurance sur la promenade. Cible le <ul> uniquement : la
   liste des points forts, elle, garde son emoji nu en gouttiere. */
#contenu_produit #page_croisiere_promenade .infos_calendrier ul li[data-emoji] { padding-left: 30px; }
#contenu_produit #page_croisiere_promenade .infos_calendrier ul li[data-emoji]:before {
	content: attr(data-emoji);
	left: 0;
	top: 0;
	width: 22px;
	height: 22px;
	background: #fff;
	border-radius: 50%;
	color: #f65e46;
	font-size: 12px;
	line-height: 22px;
	text-align: center;
}

/* --- 2 quinquies. INFOS PRATIQUES ----------------------------------------
   Mise en page reprise du mockup, et non de produit.css : celui-ci presente
   infos_pratiques_xx en pastilles grises a filet orange, avec l'emoji en ligne
   au milieu du texte. Le mockup en fait une liste simple sur fond blanc, emoji
   dans la gouttiere de gauche, aligne sur le libelle en gras.

   Le mockup porte ses icones par des classes (li.duree, li.frequence...) ;
   notre contenu, lui, vient du back-office et porte un <span class="emoji">.
   On positionne donc ce span exactement ou le mockup met son ::before :
   gouttiere de 32px, carre de 27px, 20px de corps. */
#contenu_produit #page_croisiere_promenade #bloc_votre_croisiere .cadre_infos ul {
	list-style: none;
	margin: 0;
	padding-left: 32px;
	font-size: 15px;
}
#contenu_produit #page_croisiere_promenade #bloc_votre_croisiere .cadre_infos li {
	position: relative;
	margin: 12px 0 0 0;
	padding: 3.5px 0;
	background: none;
	border: none;
	color: inherit;
	line-height: 1.4;
}
#contenu_produit #page_croisiere_promenade #bloc_votre_croisiere .cadre_infos li:first-child { margin-top: 0; }
#contenu_produit #page_croisiere_promenade #bloc_votre_croisiere .cadre_infos li a { text-decoration: underline; }

/* l'emoji quitte le fil du texte pour la gouttiere : top 0 le cale sur la
   premiere ligne, donc sur le libelle en gras */
#contenu_produit #page_croisiere_promenade #bloc_votre_croisiere .cadre_infos li .emoji {
	position: absolute;
	left: -32px;
	top: 0;
	z-index: 1;
	width: 27px;
	height: 27px;
	text-align: center;
	font-size: 20px;
	line-height: 27px;
	-webkit-filter: none;
	        filter: none;
}
/* le <div> qui enveloppe libelle + detail ne doit plus rien imposer */
#contenu_produit #page_croisiere_promenade #bloc_votre_croisiere .cadre_infos li > div {
	display: block;
}
#contenu_produit #page_croisiere_promenade #bloc_votre_croisiere .cadre_infos li > div > b,
#contenu_produit #page_croisiere_promenade #bloc_votre_croisiere .cadre_infos li > div > strong {
	color: inherit;
	font-size: inherit;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
}
/* le detail passe sous le libelle, un cran plus petit et plus discret */
#contenu_produit #page_croisiere_promenade #bloc_votre_croisiere .cadre_infos li > div > span {
	display: block;
	color: inherit;
	font-size: .92em;
	font-weight: 400;
	opacity: .85;
}

/* --- 3. DESCRIPTION ------------------------------------------------------
   #description_produit garde son mecanisme « Lire la suite » mais doit porter
   le meme habillage que les sections de la promenade (.bloc_crois_promenade)
   et le meme titre que celles-ci (.bloc_crois_promenade > .titre). */

#contenu_produit #page_croisiere_promenade #description_produit {
	background-color: #f1f5f9;
	padding: 15px;
	border-radius: 3px;
	margin-bottom: 20px;
	font-family: "Open Sans", 'Open Sans secours', sans-serif;
	font-size: 14px;
}
#contenu_produit #page_croisiere_promenade #description_produit > .titre {
	margin: 0 0 20px 0;
	font-family: "Merriweather", 'Merriweather secours', serif;
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	font-style: normal;
}

/* --- 4 bis. MENTION DE L'ENCART ------------------------------------------
   Le paragraphe sous les prix (tarif degressif, supplement…). Il portait la
   classe .lien_groupes, empruntee au lien sous le calendrier : il a desormais
   la sienne, et son contenu vient de la base. */
#contenu_produit #page_croisiere_promenade .encart_tarif .encart_tarif_mention {
	margin: 10px 0 0 0;
	font-size: 12px;
	font-style: italic;
	line-height: 1.35;
	color: #666;
}
#contenu_produit #page_croisiere_promenade .encart_tarif .encart_tarif_mention a {
	color: #f65e46;
	font-weight: 600;
	text-decoration: none;
}
#contenu_produit #page_croisiere_promenade .encart_tarif .encart_tarif_mention a:hover { text-decoration: underline; }

/* --- 3 bis. FAQ ----------------------------------------------------------
   Le bloc FAQ vient du HTML redige en back-office (champ SEO), d'ou son
   identifiant #faq_produit et non #bloc_faq_promenade. produit.css rend son
   chapeau en 13px gris clair ; sur la promenade ce meme chapeau suit le corps
   de texte de la section. On s'aligne sur la promenade. */
#contenu_produit #page_croisiere_promenade #faq_produit > p:not(.titre) {
	font-size: 14px;
	line-height: 22px;
	color: inherit;
}

/* --- 4. ENCART TARIFAIRE -------------------------------------------------
   #bloc_tarif porte desormais la classe .encart_tarif, deja stylee par
   croisiere_promenade.css. produit.css impose cependant ses propres regles a
   #bloc_tarif : on les neutralise pour laisser passer celles de l'encart. */

#contenu_produit #page_croisiere_promenade #bloc_tarif.encart_tarif {
	display: block;
	background: #fff7f5;
	border: 1.5px solid #f65e46;
	border-radius: 12px;
	padding: 12px 16px;
	/* marges laterales auto : sous 700px produit.css plafonne #bloc_tarif a
	   480px dans un parent de 515px, et le calendrier juste en dessous est
	   centre de la meme facon. Sans cela l'encart restait cale a gauche. */
	margin: 0 auto 12px auto;
	text-align: left;
}