/* ===========================================================================
   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;
}

/* --- CALENDRIER MAISON ----------------------------------------------------

   Colonnes egales. croisiere_promenade.css donne une hauteur aux cases mais
   aucune largeur : avec border-collapse: separate, le navigateur les calait
   sur leur contenu et les sept colonnes sortaient inegales. table-layout:
   fixed les repartit a parts egales, ce que la feuille de Beenbiz obtenait
   avec width: 14% sur chaque cellule. */
#contenu_produit #page_croisiere_promenade .modale_calendrier .contour-calendrier > table {
	table-layout: fixed;
}

/* Attente pendant un appel au serveur : sans signe, un clic sur une date
   semblait n'avoir aucun effet. On estompe la zone concernee et on neutralise
   les clics, le temps de la reponse. */
#contenu_produit #page_croisiere_promenade .modale_calendrier.chargement .corps_calendrier,
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .module_resa.chargement .bloc-date,
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .module_resa.chargement .bloc-prix,
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .module_resa.chargement .total-facture,
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .module_resa.chargement .submit {
	opacity: .45;
	pointer-events: none;
	-webkit-transition: opacity 120ms ease-in;
	-o-transition: opacity 120ms ease-in;
	transition: opacity 120ms ease-in;
}
#contenu_produit #page_croisiere_promenade .modale_calendrier.chargement,
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .module_resa.chargement {
	cursor: progress;
}

/* --- CHOIX DE LA PRESTATION ----------------------------------------------

   Un produit du site peut pointer sur plusieurs catalogues Beenbiz. Quand
   plusieurs sont vendables a la date choisie, la liste s'affiche sous le
   calendrier, dans la modale ; avec un seul, rien de tout cela n'apparait. */
#contenu_produit #page_croisiere_promenade .modale_calendrier .choix_offres:empty { display: none; }
#contenu_produit #page_croisiere_promenade .modale_calendrier .liste-produit {
	list-style: none;
	margin: 14px 0 0 0;
	padding: 14px 0 0 0;
	border-top: 1px solid #e5e3de;
}
#contenu_produit #page_croisiere_promenade .modale_calendrier .liste-produit li { margin-top: 6px; }
#contenu_produit #page_croisiere_promenade .modale_calendrier .liste-produit li:first-child { margin-top: 0; }

/* chaque prestation est un bouton pleine largeur : la cible du clic est
   toute la ligne, pas seulement le texte */
#contenu_produit #page_croisiere_promenade .modale_calendrier .offre {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: baseline;
	    -ms-flex-align: baseline;
	        align-items: baseline;
	gap: 8px;
	width: 100%;
	padding: 9px 12px;
	border: 1px solid #e5e3de;
	border-radius: 8px;
	background: #fff;
	font-family: 'Open Sans','Open Sans secours',sans-serif;
	font-size: 13px;
	text-align: left;
	cursor: pointer;
	-webkit-transition: border-color 150ms ease-in, background 150ms ease-in;
	-o-transition: border-color 150ms ease-in, background 150ms ease-in;
	transition: border-color 150ms ease-in, background 150ms ease-in;
}
#contenu_produit #page_croisiere_promenade .modale_calendrier .offre:hover {
	border-color: #f65e46;
	background: #fff6f4;
}
#contenu_produit #page_croisiere_promenade .modale_calendrier .offre .nom {
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	        flex: 1 1 auto;
	font-weight: 600;
	color: #283c51;
}
#contenu_produit #page_croisiere_promenade .modale_calendrier .offre .horaires {
	color: #86929e;
	white-space: nowrap;
}
#contenu_produit #page_croisiere_promenade .modale_calendrier .offre .prix {
	font-weight: 700;
	color: #f65e46;
	white-space: nowrap;
}

/* rappel de la prestation retenue, au-dessus de la date */
/* Le choix de la prestation : meme presentation que la ligne « Horaire »,
   dont il reprend la largeur d'intitule pour que les deux s'alignent. */
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .offre_choisie {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 10px 0;
	font-style: normal;
}
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .offre_choisie[hidden] { display: none; }
/* Les trois intitules de la colonne de gauche — prestation, date, horaire —
   se lisent comme une seule liste : ils prennent donc tous l'aspect de
   « Date du depart », le seul des trois a ne pas avoir ete rapetisse.
   La regle de l'horaire est rappelee ici parce que la sienne vit dans
   croisiere_promenade.css, que le bundle ne reconstruit pas. */
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .libelle_offre,
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .libelle-date-depart,
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .libelle-horaire {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 125px;
	        flex: 0 0 125px;
	text-align: right;
	font-size: 14px;
	color: #666;
	white-space: nowrap;
}
/* Tant que l'intitule et le bouton tiennent sur une ligne, celle-ci est
   pleine et le centrage ne se voit pas. Des que le bouton passe a la ligne,
   il laisse l'intitule seul au-dessus : centre, celui-ci se decrochait de la
   colonne que les trois libelles forment sur un ecran large. Il reste donc
   cale a gauche, a la place qu'il tient sur un grand ecran.
   Rappel hors bundle : la regle d'origine vit dans croisiere_promenade.css. */
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .bloc-date {
	-webkit-box-pack: start;
	   -ms-flex-pack: start;
	 justify-content: flex-start;
}
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .choix_offre {
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 200px;
	        flex: 1 1 200px;
	/* 200 px (bordure comprise, la boite est en border-box) : en deca, les
	   intitules de prestation — « Croisiere 1h avec degustation - Beaujolais
	   Nouveau » et consorts — sont rabotes au point d'etre illisibles. Quand
	   la place manque, le menu passe sous son intitule plutot que de se
	   laisser ecraser : c'est a cela que sert le flex-wrap ci-dessus. */
	min-width: 200px;
	padding: 5px 8px;
	border: 1px solid #ccc;
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
	color: #283c51;
	background: #fff;
}

/* Au telephone la colonne se resserre, mais pas en deca du plus long des
   trois intitules, toutes langues confondues : « Data de partida : » fait
   109 px, « Date du depart : » et « Abfahrtsdatum : » 107. A 90 px le
   libelle de la date se coupait en deux. */
@media only screen and (max-width: 560px) {
	#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .libelle_offre,
	#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .libelle-date-depart,
	#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .libelle-horaire {
		-ms-flex-preferred-size: 110px;
		    flex-basis: 110px;
	}
}
/* LES JOURS OUVERTS ---------------------------------------------------------

   Fond sable et chiffre bleu, orange au survol : les memes teintes que .ds et
   .dw, pour que toutes les cases cliquables se ressemblent. Elles etaient
   orange plein, et le mois entier virait au rouge des que tous les jours
   etaient vendables.

   Rappel hors bundle : la regle d'origine vit dans croisiere_promenade.css,
   que style.min.css ne reconstruit pas. Le :not(.choisi) laisse au jour
   retenu sa mise en avant, ci-dessous, que le survol ne doit pas effacer. */
#contenu_produit #page_croisiere_promenade .modale_calendrier td.dok:not(.choisi) {
	background: #f5f4f0;
	color: #283c51;
	font-weight: 400;
}
#contenu_produit #page_croisiere_promenade .modale_calendrier td.dok:not(.choisi):hover {
	background: #fcded7;
	color: #e04628;
}

/* Le jour retenu est la seule pastille orange du mois : il se detache donc
   sans contour. Celui-ci — une ombre interieure — n'avait de raison d'etre
   que lorsque tous les jours ouverts etaient orange eux aussi et qu'il
   fallait evider celui-la pour l'en distinguer.
   Le chiffre n'a pas sa propre regle : il herite de la cellule. */
#contenu_produit #page_croisiere_promenade .modale_calendrier td.dok.choisi {
	background: #f65e46;
	color: #fff;
	font-weight: 600;
	-webkit-box-shadow: none;
	        box-shadow: none;
}

/* Hauteur des cases du mois. Elle porte aussi bien sur le vrai mois que sur
   la grille d'attente : les deux rendent des <td class="jc">, et c'est ce
   qui garantit que la modale ne change pas de taille quand le mois arrive.
   Rappel hors bundle : la regle d'origine vit dans croisiere_promenade.css. */
#contenu_produit #page_croisiere_promenade .modale_calendrier td.jc { height: 34px; }

/* CALENDRIER EN ATTENTE ----------------------------------------------------

   Meme grille que le vrai mois, aux memes dimensions : la modale s ouvre a sa
   taille definitive au lieu de s afficher plate puis de se deplier quand la
   reponse arrive. Les pastilles respirent doucement — de quoi faire comprendre
   qu on attend, sans que cela s agite. */
#contenu_produit #page_croisiere_promenade .modale_calendrier .squelette .pastille {
	display: block;
	width: 26px;
	height: 26px;
	margin: 0 auto;
	border-radius: 8px;
	background: #ebe9e4;
	-webkit-animation: respiration_calendrier 1.4s ease-in-out infinite;
	        animation: respiration_calendrier 1.4s ease-in-out infinite;
}

/* Les fleches ne menent nulle part tant qu il n y a pas de mois : visibles
   pour tenir la hauteur de la ligne, mais eteintes. */
#contenu_produit #page_croisiere_promenade .modale_calendrier .squelette .bt-nav {
	opacity: .25;
	cursor: default;
}

@-webkit-keyframes respiration_calendrier { 50% { opacity: .45; } }
@keyframes respiration_calendrier { 50% { opacity: .45; } }

/* Une animation qui pulse peut gener : on la coupe pour qui l a demande au
   niveau du systeme. La grille reste, elle ne bouge simplement plus. */
@media (prefers-reduced-motion: reduce) {
	#contenu_produit #page_croisiere_promenade .modale_calendrier .squelette .pastille {
		-webkit-animation: none;
		        animation: none;
	}
}

/* Mention du tarif degressif : sous le libelle adulte, pas a sa suite — en
   ligne elle allongeait la ligne de prix et passait pour une partie du
   tarif. */
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .note_degressif {
	display: block;
	margin-top: 2px;
	color: #86929e;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.3;
}

/* TITRE A ICONE DU GABARIT HISTORIQUE ---------------------------------------

   L icone est sortie du Hn : elle en est la soeur dans .cont_titre. Les regles
   correspondantes sont dans produit.css, mais celui-ci est fige dans
   style.min.css tant que le bundle n est pas reconstruit : sans ce rappel ici,
   l icone perdrait sa taille et son calage. produit_v2.css est charge apres le
   bundle, et dans les deux modes — c est deja ce role qu il tient plus haut.
   A supprimer d ici a la prochaine reconstruction de style.min.css.

   Portee : #contenu_produit uniquement. La page promenade (/croisieres/) n a
   pas ce conteneur, ses intertitres gardent donc leur gouttiere et leur
   pictogramme intacts. */
#contenu_produit .cont_titre {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: 14px;
	margin: 0 0 14px 0;
}
#contenu_produit .cont_titre > .emoji,
#contenu_produit .cont_titre > .icone {
	/* Boite de largeur fixe : avec « auto » elle prenait celle du glyphe (30 px
	   pour ✨), et le texte partait d'autant plus loin — 44 px au lieu de 36.
	   A 22 px, texte + gouttiere redonnent exactement les 36 px d'avant, et
	   surtout le titre demarre au meme endroit quel que soit l'emoji : c'est
	   ce que garantissait le positionnement absolu d'origine. Le glyphe, lui,
	   deborde dans la gouttiere comme il le faisait deja. */
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 22px;
	        flex: 0 0 22px;
	width: 22px;
	/* Boite de la hauteur exacte d'une ligne de titre (line-height 22 px),
	   et non laissee aux metriques du glyphe : une police d'emoji deborde
	   sa ligne, de sorte qu'un padding ne la deplacait pas comme prevu. */
	display: block;
	height: 22px;
	margin-top: 4px;         /* cale sur la premiere ligne du titre */
	font-size: 22px;
	line-height: 22px;
}
#contenu_produit .cont_titre > .icone img {
	display: block;
	width: 22px;
	height: 22px;
}
/* la gouttiere de 36 px du bundle ne sert plus : l icone n est plus dedans */
#contenu_produit .cont_titre .titre_icone {
	margin: 0;
	padding: 4px 0;
}

/* TITRE DU BLOC PRIVATISATION ----------------------------------------------

   Meme rappel que plus haut : la regle appartient a style_commun.css, fige
   dans style.min.css tant que le bundle n'est pas reconstruit. A supprimer
   d'ici des que ce sera fait. */
/* Le titre s'affiche en capitales, mais n'est plus ecrit en capitales dans
   le contenu : une chaine tout en majuscules se lit mal hors contexte (la
   traduction, un lecteur d'ecran, un resultat de recherche) et perd ses
   accents — « CROISIERES » avait ainsi perdu le sien. text-transform garde
   l'apparence sans toucher au texte. */
#bloc_actu .titre,
#bloc_priv_bateaux .titre { text-transform: uppercase; }

/* PLAN DE TITRES : deux balises renommees, aspect inchange ----------------

   Rappel hors bundle, comme au-dessus. A supprimer a la reconstruction de
   style.min.css, ou ces regles vivent deja (produit.css, style_commun.css). */
/* Les deux balises ci-dessous ont change de nom sans devoir changer d'aspect.

   « Vue d'ensemble » passe de H3 a H2 : sans cela elle prendrait les 20 px
   du H2 au lieu des 16,38 px qu'elle tenait du defaut navigateur (1.17em).

   L'accroche de la privatisation passe de H2 a P : les marges d'un titre
   valaient 20 px, celles d'un paragraphe suivent la taille de police. La
   taille, elle, est deja fixee par .accroche a toutes les largeurs. */
#contenu_produit #description_produit > .titre { font-size: 16.38px; }
#bloc_priv_bateaux .accroche { margin: 20px 0; }

/* UN SEUL DEPART : l'heure s'ecrit, elle ne se choisit pas ---------------

   Rien a arbitrer quand la journee n'offre qu'un creneau : le menu cede la
   place a un simple texte. Il reste pourtant dans le DOM, seulement masque,
   parce qu'il porte ce que Beenbiz attend au panier — id de seance, heure et
   stock. Le dupliquer ailleurs ouvrirait deux sources pour la meme donnee. */
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .choix-heure.horaire-unique .select-horaire {
	display: none;
}
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .horaire-fige {
	padding: 5px 9px;
	font-size: 13px;
	color: #283c51;
}
#contenu_produit #page_croisiere_promenade .bloc_resa_promenade .horaire-fige[hidden] { display: none; }