/* ==================================================================
   VEDETTES DE BESANÇON · main.css
   Palette tirée du logo : bleu roi #1A00A4 (texte) et bordeaux, éclairci en #A5173F
   (roue de gouvernail). Le bleu porte la marque, le bordeaux porte
   l'action (réserver). Fonds bleu glacier pour l'ambiance fluviale.
   ================================================================== */

:root {
	--bleu:        #1a00a4;
	--bleu-fonce:  #10006b;
	--bleu-nuit:   #0c0a33;
	--bordeaux:    #a5173f;
	--bordeaux-f:  #7d0f2d;
	/* Survol des boutons : bascule vers le bleu roi du logo plutôt qu'une
	   variation de bordeaux. Le ratio de contraste WCAG ne mesure que la
	   luminance : assombrir le bordeaux ne se voyait pas (1,28), l'éclaircir
	   virait au rose criard. Un CHANGEMENT DE TEINTE se perçoit franchement
	   à luminance voisine, et il reste dans la charte (les deux couleurs du
	   logo). Texte blanc sur ce bleu : 13,3, très au-delà du AA. */
	--cta-hover:   #1a00a4;
	/* Fonds passés du crème (jugé vieillot par la cliente) à un bleu glacier,
	   puis légèrement bleuis à sa demande. Les noms de variables sont
	   conservés pour ne rien casser dans le reste de la feuille. */
	--creme:       #eaf1fa;
	--sable:       #dde8f5;
	--blanc:       #ffffff;
	--encre:       #1d1e26;
	--gris:        #5a5b66;
	--ligne:       #d2dded;
	--ok:          #0c6b41;

	--police:      "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
	--police-titre: Georgia, "Times New Roman", serif;

	--r:           10px;
	--ombre:       0 8px 28px rgba(12, 10, 51, .10);
	--wrap:        1180px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
	margin: 0;
	font-family: var(--police);
	color: var(--encre);
	background: var(--blanc);
	line-height: 1.65;
	font-size: 1.0625rem;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); }
a:hover { color: var(--bleu-fonce); }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3 { font-family: var(--police-titre); line-height: 1.2; color: var(--bleu-nuit); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap--etroit { max-width: 820px; }

.skip-link {
	position: absolute; left: -999px; top: 0; z-index: 100;
	background: var(--bleu); color: #fff; padding: .6em 1em;
}
.skip-link:focus { left: 0; color: #fff; }

.ico { vertical-align: -.28em; }

/* ---------- Boutons ----------
   Au survol : la couleur s'assombrit franchement (contraste net), et une
   houle discrète glisse en bas du bouton, comme un sillage. Le texte n'est
   jamais recouvert, le mouvement vertical reste à 1 px.

   Structure : ::after = fond plein (z -2), ::before = liseré de vagues
   cantonné au tiers bas (z -1). Le texte, nœud inline non positionné, peint
   au-dessus des pseudos en z négatif : aucun span à ajouter dans le HTML. */
.cta {
	position: relative; overflow: hidden; isolation: isolate;
	display: inline-flex; align-items: center; gap: .5em;
	background: transparent; color: #fff;
	padding: .8em 1.5em; border-radius: 999px;
	font-weight: 600; text-decoration: none;
	border: 2px solid var(--bordeaux);
	/* Couleur du texte, du fond et de la bordure sur une durée COURTE et
	   IDENTIQUE : un fondu lent créait une fenêtre où le texte et le fond
	   se ressemblaient, donc un moment illisible. Seuls le déplacement et
	   l'ombre gardent une durée longue, ils ne gênent pas la lecture. */
	transition: color .13s linear, border-color .13s linear,
	            transform .22s cubic-bezier(.22, .61, .36, 1),
	            box-shadow .22s cubic-bezier(.22, .61, .36, 1);
}
.cta::after {
	content: ""; position: absolute; inset: 0; z-index: -2;
	border-radius: inherit; background: var(--bordeaux);
	transition: background-color .13s linear;
}
/* Houle : bande basse, deux fois plus large que le bouton et animée en
   translation (composée par le GPU, contrairement à background-position).
   L'animation tourne en permanence : la mettre en pause puis la relancer
   au survol faisait repartir la vague d'un coup. Seule l'opacité change. */
.cta::before {
	content: ""; position: absolute; left: 0; bottom: 0; z-index: -1;
	width: 200%; height: 12px; opacity: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'%3E%3Cpath d='M0 6 Q15 0 30 6 T60 6 V12 H0 Z' fill='%23ffffff' fill-opacity='.14'/%3E%3C/svg%3E") repeat-x bottom / 60px 12px;
	transition: opacity .2s ease;
	animation: cta-houle 2.4s linear infinite;
	will-change: transform;
}
/* La couleur est REDÉCLARÉE au survol, sinon la règle générique
   `a:hover { color: var(--bleu-fonce) }` la remporte (elle est plus
   spécifique que `.cta` seul) et le texte vire au bleu foncé sur un fond
   bleu : le bouton devient illisible. */
.cta:hover, .cta:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	border-color: var(--cta-hover);
	box-shadow: 0 6px 18px rgba(165, 23, 63, .32);
}
.cta:hover::after, .cta:focus-visible::after { background-color: var(--cta-hover); }
.cta:hover::before, .cta:focus-visible::before { opacity: 1; }
.cta:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(165, 23, 63, .26); }
@keyframes cta-houle {
	from { transform: translateX(0); }
	to   { transform: translateX(-60px); }
}

.cta--sm { padding: .55em 1.1em; font-size: .95rem; }
.cta--lg { padding: 1em 1.9em; font-size: 1.1rem; }
.cta--bloc { width: 100%; justify-content: center; }

/* Contour : au survol, le fond se remplit de bleu, le texte passe en blanc.
   Le fond est déjà bleu au repos mais transparent : seule l'opacité monte,
   le texte ne traverse donc jamais une teinte proche de son fond. */
.cta--ghost { color: var(--bleu); border-color: var(--bleu); }
.cta--ghost::after { background-color: var(--cta-hover); opacity: 0; transition: opacity .13s linear; }
.cta--ghost:hover, .cta--ghost:focus-visible {
	color: #fff; box-shadow: 0 5px 16px rgba(26, 0, 164, .25);
}
.cta--ghost:hover::after, .cta--ghost:focus-visible::after { opacity: 1; }

/* Inversé (posé sur fond sombre) : reste blanc, se teinte légèrement. */
.cta--inverse { color: var(--bleu-nuit); border-color: #fff; }
.cta--inverse::after { background-color: #fff; opacity: 1; }
.cta--inverse::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'%3E%3Cpath d='M0 6 Q15 0 30 6 T60 6 V12 H0 Z' fill='%231a00a4' fill-opacity='.14'/%3E%3C/svg%3E"); }
.cta--inverse:hover, .cta--inverse:focus-visible {
	color: var(--bleu); border-color: #fff; box-shadow: 0 5px 16px rgba(12, 10, 51, .3);
}
.cta--inverse:hover::after, .cta--inverse:focus-visible::after { background-color: #eef3fc; }

.cta:disabled { opacity: .6; cursor: wait; transform: none; box-shadow: none; }
.cta__prix { font-weight: 400; opacity: .9; font-size: .9em; }

@media (prefers-reduced-motion: reduce) {
	.cta { transition: background .2s ease, color .2s ease; }
	.cta::before { display: none; }
	.cta:hover, .cta:focus-visible { transform: none; box-shadow: none; }
}

/* ---------- Topbar ---------- */
.topbar { background: var(--bleu-nuit); color: #d8d6ee; font-size: .9rem; }
.topbar__row { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding-top: .45em; padding-bottom: .45em; }
.topbar__droite { display: flex; align-items: center; gap: 1.2em; }
.topbar__info .ico { opacity: .7; }
/* Hovers topbar : contraste franc (blanc plein sur bleu nuit) + soulignement
   animé. Le fond sombre exige un état survolé qui saute aux yeux. */
.topbar__tel {
	color: #fff; text-decoration: none; font-weight: 600;
	position: relative; padding-bottom: 2px;
	transition: color .2s;
}
.topbar__tel::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
	background: #ffd166; transform: scaleX(0); transform-origin: left;
	transition: transform .25s ease;
}
.topbar__tel:hover { color: #ffd166; }
.topbar__tel:hover::after { transform: scaleX(1); }
.topbar__tel:hover .ico { animation: sonnerie .5s ease; }
@keyframes sonnerie {
	20%, 60% { transform: rotate(-12deg); }
	40%, 80% { transform: rotate(10deg); }
}
.lang-switch a {
	color: #d8d6ee; text-decoration: none; padding: .15em .45em; border-radius: 4px;
	transition: background .2s, color .2s, transform .2s;
}
.lang-switch a:hover { background: rgba(255, 255, 255, .18); color: #fff; transform: translateY(-1px); }
.lang-switch a[aria-current="true"] { background: #fff; color: var(--bleu-nuit); font-weight: 700; }
@media (max-width: 700px) { .topbar__info { display: none; } .topbar__row { justify-content: flex-end; } }

/* ---------- Header ---------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: #fff; border-bottom: 1px solid var(--ligne);
}
.site-header.est-scrolle { box-shadow: var(--ombre); }
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: 1.5em; padding-top: .6em; padding-bottom: .6em; }
.brand__img { width: 170px; height: auto; }
.brand__img--footer { width: 190px; filter: brightness(0) invert(1); opacity: .92; }

.site-nav__list { display: flex; gap: 1.4em; list-style: none; margin: 0; padding: 0; }
.site-nav__list > li > a {
	color: var(--bleu-nuit); text-decoration: none; font-weight: 600; font-size: .98rem;
	display: inline-flex; align-items: center; gap: .2em; padding: .6em 0;
}
.site-nav__list > li > a:hover { color: var(--bordeaux); }
.has-sub { position: relative; }
.site-nav__sub {
	position: absolute; top: 100%; left: -14px; min-width: 280px;
	background: #fff; border: 1px solid var(--ligne); border-radius: var(--r);
	box-shadow: var(--ombre); list-style: none; margin: 0; padding: .5em;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .15s, transform .15s, visibility .15s;
}
.has-sub:hover .site-nav__sub,
.has-sub:focus-within .site-nav__sub { opacity: 1; visibility: visible; transform: none; }
.site-nav__sub a {
	display: flex; align-items: center; gap: .6em;
	padding: .55em .8em; border-radius: 6px;
	color: var(--encre); text-decoration: none; font-size: .95rem;
}
.site-nav__sub a:hover { background: var(--creme); color: var(--bordeaux); }
.site-nav__sub .ico { color: var(--bleu); flex: none; }

.site-header__actions { display: flex; align-items: center; gap: .8em; }
.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 24px; height: 2.5px; background: var(--bleu-nuit); margin: 5px 0; border-radius: 2px; transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1020px) {
	.site-nav { display: none; }
	.burger { display: block; }
}

/* Panneau mobile : hors header, et [hidden] doit gagner (piège playbook). */
.mobile-panel {
	position: fixed; inset: 0; top: 0; z-index: 60;
	background: var(--blanc); overflow-y: auto;
	padding: 84px 24px 32px;
}
.mobile-panel[hidden] { display: none; }
.mobile-panel__list { list-style: none; margin: 0; padding: 0; }
.mobile-panel__list > li { border-bottom: 1px solid var(--ligne); padding: .7em 0; }
.mobile-panel__list a { color: var(--bleu-nuit); text-decoration: none; font-weight: 600; font-size: 1.1rem; }
.mobile-panel__group { font-weight: 700; color: var(--gris); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.mobile-panel__list ul { list-style: none; padding: .4em 0 0 .2em; margin: 0; display: grid; gap: .55em; }
.mobile-panel__list ul a { font-weight: 500; font-size: 1rem; }
.mobile-panel__cta { display: grid; gap: .8em; margin-top: 1.4em; }
body.menu-ouvert { overflow: hidden; }

/* ---------- Hero ---------- */
.hero { position: relative; color: #fff; display: grid; min-height: 520px; align-items: end; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(12,10,51,.25) 0%, rgba(12,10,51,.78) 100%);
}
.hero__contenu { position: relative; padding-top: 96px; padding-bottom: 56px; max-width: 760px; }
.hero__surtitre { text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; font-weight: 700; color: #e8e5ff; margin: 0 0 .4em; }
.hero__titre { color: #fff; font-size: clamp(2rem, 4.6vw, 3.3rem); margin: 0 0 .35em; }
.hero__txt { font-size: 1.12rem; max-width: 60ch; margin: 0 0 1.3em; color: #eceafc; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9em; }
/* Sur le héros, le bouton contour est blanc : au survol il se remplit de
   blanc (le bleu du remplissage général serait illisible sur la photo). */
/* Sur la photo du héros, le contour est blanc : il se remplit de blanc et le
   texte passe au bleu. Même principe, on ne joue que sur l'opacité du fond. */
.hero .cta--ghost { color: #fff; border-color: #fff; }
.hero .cta--ghost::after { background-color: #fff; }
.hero .cta--ghost::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'%3E%3Cpath d='M0 6 Q15 0 30 6 T60 6 V12 H0 Z' fill='%231a00a4' fill-opacity='.16'/%3E%3C/svg%3E"); }
.hero .cta--ghost:hover, .hero .cta--ghost:focus-visible {
	color: var(--bleu); border-color: #fff; box-shadow: 0 5px 16px rgba(12, 10, 51, .35);
}

/* ---------- Bande horaires ---------- */
.bande-horaires { background: var(--bleu); color: #fff; }
.bande-horaires__row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2em; padding-top: .8em; padding-bottom: .8em; }
.bande-horaires__label { font-weight: 700; display: inline-flex; align-items: center; gap: .45em; }
.bande-horaires__liste { display: flex; gap: .6em; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.bande-horaires__liste li { background: rgba(255,255,255,.14); border-radius: 6px; padding: .25em .7em; font-weight: 600; font-variant-numeric: tabular-nums; }
.bande-horaires__note { font-size: .88rem; opacity: .85; margin-left: auto; }
@media (max-width: 900px) { .bande-horaires__note { display: none; } }

/* ---------- Sections ---------- */
.section { padding: 3.5rem 0; }
.section--creme { background: var(--creme); }
.section__titre { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .4em; }
.section__sous { font-size: 1.35rem; margin: 2em 0 .8em; }
.section__chapo { color: var(--gris); max-width: 62ch; margin: 0 0 2em; font-size: 1.08rem; }
.section__lien { margin-top: 1.6em; font-weight: 600; }

.grille { display: grid; gap: 1.6em; }
.grille--cartes { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grille--articles { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grille--atouts { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2em; }

/* ---------- Cartes ---------- */
.carte {
	background: #fff; border: 1px solid var(--ligne); border-radius: var(--r);
	overflow: hidden; display: flex; flex-direction: column;
	transition: box-shadow .18s, transform .18s;
}
.carte:hover { box-shadow: var(--ombre); transform: translateY(-3px); }
.carte__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.carte__corps { padding: 1.2em 1.3em 1.3em; display: flex; flex-direction: column; flex: 1; gap: .5em; }
.carte__titre { font-size: 1.18rem; margin: 0; }
.carte__titre a { color: var(--bleu-nuit); text-decoration: none; }
.carte__titre a:hover { color: var(--bordeaux); }
.carte__accroche { color: var(--gris); font-size: .95rem; margin: 0; flex: 1; }
.carte__meta { display: flex; gap: 1.1em; list-style: none; margin: 0; padding: 0; font-size: .88rem; color: var(--gris); }
.carte__meta .ico { width: 16px; height: 16px; color: var(--bleu); }
.carte__pied { display: flex; align-items: center; justify-content: space-between; gap: .8em; margin-top: .4em; }
.carte__prix { font-weight: 700; color: var(--bleu); font-size: 1.05rem; }
.carte__prix--devis { color: var(--gris); font-weight: 600; font-size: .92rem; }
.carte__lire { font-weight: 600; }
.carte--article .carte__corps { gap: .6em; }

/* Badge de mise en avant (pass, promotions) */
.carte--mise-en-avant { border-color: var(--bordeaux); box-shadow: 0 4px 18px rgba(165, 23, 63, .14); }
.carte__badge {
	position: absolute; top: 12px; left: 12px; z-index: 1;
	background: var(--bordeaux); color: #fff;
	font-size: .78rem; font-weight: 700; letter-spacing: .04em;
	padding: .35em .8em; border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.carte { position: relative; }

/* ---------- Menus et renvois ---------- */
.vdb-menus { margin: 2em 0; }
.vdb-menus h3 { margin: 0 0 .6em; }
.vdb-menus__table { width: 100%; max-width: 520px; border-collapse: collapse; }
.vdb-menus__table th { text-align: left; font-weight: 500; padding: .55em 0; border-bottom: 1px solid var(--ligne); }
.vdb-menus__table td { text-align: right; font-weight: 700; color: var(--bleu); padding: .55em 0; border-bottom: 1px solid var(--ligne); white-space: nowrap; }
.vdb-menus__inclus {
	margin: 0 0 .8em; padding: .6em .9em; max-width: 560px;
	background: var(--sable); border-radius: 8px;
	font-size: .93rem; font-weight: 600; color: var(--bleu-nuit);
}
.vdb-menus__duree { display: block; font-weight: 400; font-size: .85rem; color: var(--gris); }
.vdb-menus__detail { margin-top: 1em; font-size: .95rem; }
.vdb-broch__liste { list-style: none; margin: 1em 0; padding: 0; display: grid; gap: .6em; }
.vdb-broch__liste a { font-weight: 600; }
.vdb-broch__poids, .resa-box__broch span { color: var(--gris); font-size: .85rem; font-weight: 400; }
.resa-box__broch { margin: 0; font-size: .92rem; text-align: center; }
.resa-box__broch a { display: inline-flex; align-items: center; gap: .35em; font-weight: 600; }
.resa-box__broch .ico { width: 15px; height: 15px; color: var(--ok); }

.vdb-menus__supp { margin-top: .8em; max-width: 520px; }
.vdb-menus__supp summary { cursor: pointer; font-weight: 600; padding: .4em 0; }
.vdb-menus__supp ul { list-style: none; margin: .4em 0 0; padding: 0; display: grid; gap: .35em; }
.vdb-menus__supp li { display: flex; justify-content: space-between; gap: 1em; }

.fiche__circuit { margin: 2em 0; }
.fiche__plan { margin: 0 0 1em; }
.fiche__plan img { border-radius: var(--r); border: 1px solid var(--ligne); width: 100%; background: #fff; }
.fiche__plan figcaption { margin-top: .5em; font-size: .92rem; color: var(--gris); }
.fiche__etapes {
	margin: 0; padding: 0 0 0 1.4em;
	display: grid; gap: .4em; font-size: .98rem;
}
.fiche__etapes li::marker { color: var(--bordeaux); font-weight: 700; }
.resa-box__gratuit { display: block; color: var(--ok); font-style: normal; font-size: .9rem; font-weight: 600; }

.fiche__renvoi {
	margin: 1.8em 0; padding: 1.1em 1.4em;
	background: var(--creme); border-left: 4px solid var(--bleu);
	border-radius: 0 var(--r) var(--r) 0;
}
.fiche__renvoi p { margin: 0; }
.fiche__renvoi a { font-weight: 600; white-space: nowrap; }

/* ---------- Atouts ---------- */
.atout .ico { width: 30px; height: 30px; color: var(--bordeaux); }
.atout h3 { font-size: 1.1rem; margin: .5em 0 .3em; }
.atout p { color: var(--gris); font-size: .95rem; margin: 0; }

/* ---------- Fiche offre ---------- */
.fiche { padding: 2.6rem 0 3.2rem; }
.fiche__grille { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 3em; align-items: start; }
.fiche__titre { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 0 0 .3em; }
.fiche__chapo { font-size: 1.15rem; color: var(--gris); margin: 0 0 1.4em; }
.fiche__media img { border-radius: var(--r); width: 100%; }
/* Visuel panoramique (pass) : plus large que le contenu, pour laisser
   respirer une image qui montre le bateau et le bus côte à côte. */
.fiche__media--large img { aspect-ratio: auto; }
@media (min-width: 941px) {
	.fiche__media--large { margin-right: calc(-1 * (360px + 3em)); }
}
.fiche__points { list-style: none; margin: 1.6em 0; padding: 0; display: grid; gap: .55em; }
.fiche__points .ico { color: var(--ok); margin-right: .45em; }
.fiche__texte h2, .contenu h2 { font-size: 1.45rem; margin: 1.6em 0 .5em; }
.fiche__resa { position: sticky; top: 96px; }
.resa-box {
	background: var(--creme); border: 1px solid var(--ligne); border-radius: var(--r);
	padding: 1.5em; display: grid; gap: 1em;
}
.resa-box__prix { margin: 0; font-size: 1.05rem; }
.resa-box__prix strong { font-size: 1.7rem; color: var(--bleu); font-family: var(--police-titre); }
.resa-box__prix em { display: block; font-style: normal; color: var(--gris); font-size: .9rem; }
.resa-box__prix--devis { font-weight: 600; }
.resa-box__horaires { margin: 0; font-size: .95rem; font-variant-numeric: tabular-nums; }
.resa-box__aide { margin: 0; font-size: .9rem; color: var(--gris); text-align: center; }
.vdb-infos { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; margin: 0; }
.vdb-infos__item dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); }
.vdb-infos__item dd { margin: 0; font-weight: 600; }
@media (max-width: 940px) {
	.fiche__grille { grid-template-columns: 1fr; }
	.fiche__resa { position: static; }
}

/* ---------- Barre mobile collante ---------- */
.barre-mobile {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
	background: #fff; border-top: 1px solid var(--ligne);
	display: flex; align-items: center; justify-content: space-between; gap: 1em;
	padding: .7em 16px calc(.7em + env(safe-area-inset-bottom));
	box-shadow: 0 -6px 24px rgba(12,10,51,.12);
}
.barre-mobile[hidden] { display: none; }
.barre-mobile__prix { font-weight: 700; color: var(--bleu); }
@media (min-width: 941px) { .barre-mobile { display: none; } }

/* ---------- Tunnel ---------- */
.tunnel { padding: 2.2rem 0 3rem; background: var(--creme); min-height: 70vh; }
.tunnel__wrap { max-width: 920px; }
.tunnel__fil a { text-decoration: none; font-weight: 600; font-size: .95rem; }
.tunnel__titre { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: .4em 0 .5em; }
.tunnel__resume { display: flex; flex-wrap: wrap; gap: 1.4em; list-style: none; margin: 0 0 1.6em; padding: 0; font-size: .95rem; }
.tunnel__resume .ico { color: var(--ok); margin-right: .3em; }
.tunnel__reassurance { color: var(--gris); font-size: .92rem; margin-top: 1.4em; }
.tunnel__aide { text-align: center; margin-top: 1.6em; color: var(--gris); }
.vdb-widget { background: #fff; border-radius: var(--r); border: 1px solid var(--ligne); padding: 1em; min-height: 560px; }
/* Squelette de chargement du widget. Teintes sable volontairement plus
   soutenues que le fond blanc de la box, sinon le shimmer est invisible.
   Le masquage est décidé par le JS (attribut hidden) quand le widget a
   rendu ; la règle [hidden] doit gagner explicitement (piège playbook). */
.vdb-widget__skeleton {
	height: 520px; border-radius: 6px;
	background: linear-gradient(100deg, #dde6f2 40%, #f7fafd 50%, #dde6f2 60%);
	background-size: 200% 100%;
	animation: vdb-shimmer 1.4s infinite linear;
}
.vdb-widget__skeleton[hidden] { display: none; }
@keyframes vdb-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
	.vdb-widget__skeleton { animation: none; background: #e7eef7; }
}

/* ---------- Tarifs ---------- */
.vdb-tarifs { overflow-x: auto; }
.vdb-tarifs__table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.vdb-tarifs__table th, .vdb-tarifs__table td { padding: .8em .9em; text-align: left; border-bottom: 1px solid var(--ligne); }
.vdb-tarifs__table thead th { background: var(--bleu-nuit); color: #fff; font-weight: 600; }
.vdb-tarifs__table tbody th { font-weight: 600; }
.vdb-tarifs__table del { color: var(--gris); margin-right: .4em; }
.vdb-tarifs__note { display: block; font-weight: 400; font-size: .82rem; color: var(--gris); }
.vdb-tarifs__detail td { background: var(--creme); padding: .4em .9em; }
.vdb-tarifs__detail summary { cursor: pointer; font-weight: 600; padding: .35em 0; }
.vdb-tarifs__detail ul { list-style: none; margin: .4em 0 .6em; padding: 0; display: grid; gap: .3em; }
.vdb-tarifs__detail li { display: flex; justify-content: space-between; gap: 1em; max-width: 460px; }
.vdb-prix--inconnu { color: var(--gris); font-style: italic; }

/* ---------- Horaires ---------- */
.vdb-horaires { display: grid; gap: 2em; }
.vdb-horaires__offre { background: #fff; border: 1px solid var(--ligne); border-radius: var(--r); padding: 1.4em 1.5em; }
.vdb-horaires__offre h3 { margin: 0 0 .6em; }
.vdb-horaires__liste { display: flex; flex-wrap: wrap; gap: .6em; list-style: none; margin: 0 0 .8em; padding: 0; }
.vdb-horaires__liste li { background: var(--bleu); color: #fff; border-radius: 6px; padding: .35em .9em; font-weight: 700; font-variant-numeric: tabular-nums; }
.vdb-horaires__note { color: var(--gris); margin: 0 0 1em; }
.vdb-horaires__avert { color: var(--gris); font-size: .9rem; }

/* ---------- FAQ ---------- */
.vdb-faq { display: grid; gap: .7em; margin: 1em 0 2em; }
.vdb-faq__item { border: 1px solid var(--ligne); border-radius: 8px; background: #fff; }
.vdb-faq__item summary { cursor: pointer; font-weight: 600; padding: .9em 1.1em; list-style-position: inside; }
.vdb-faq__item[open] summary { border-bottom: 1px solid var(--ligne); }
.vdb-faq__reponse { padding: .8em 1.1em; }
.vdb-faq__reponse p { margin: 0; }

/* ---------- Encarts ---------- */
.encart-ter {
	margin-top: 3em; background: var(--bleu-nuit); color: #e9e7fb;
	border-radius: var(--r); padding: 1.6em 1.8em;
}
.encart-ter h2 { color: #fff; margin: 0 0 .3em; font-size: 1.25rem; }
.encart-ter p { margin: 0; }

.article-cta {
	margin: 2.5em 0 0; padding: 1.5em 1.7em;
	background: var(--creme); border-left: 4px solid var(--bordeaux); border-radius: 0 var(--r) var(--r) 0;
}
.article-cta__txt { margin: 0 0 .9em; font-weight: 600; }

/* ---------- Bandeau CTA final ---------- */
.bandeau-cta { background: linear-gradient(120deg, var(--bleu-fonce), var(--bleu)); color: #fff; }
.bandeau-cta__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5em; padding-top: 2.6em; padding-bottom: 2.6em; }
.bandeau-cta__titre { color: #fff; margin: 0 0 .2em; font-size: 1.6rem; }
.bandeau-cta__txt { margin: 0; color: #dcd9f6; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bleu-nuit); color: #c9c7dd; font-size: .95rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.site-footer__cols {
	display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr;
	gap: 2.5em; padding-top: 3em; padding-bottom: 2.5em;
}
.site-footer__titre { color: #fff; font-size: 1rem; font-family: var(--police); text-transform: uppercase; letter-spacing: .07em; margin: 0 0 .8em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.site-footer__adresse { font-style: normal; margin: 1.2em 0; line-height: 1.9; }
.site-footer__social { display: flex; gap: 1.2em; }
.site-footer__bas {
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1em;
	border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.2em; padding-bottom: 1.4em;
}
.site-footer__bas p { margin: 0; }
@media (max-width: 900px) { .site-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__cols { grid-template-columns: 1fr; } }

/* ---------- DA nautique : filigranes et vagues ---------- */
/* Barre à roue en filigrane, reprise du logo. SVG en data-uri car un
   background CSS ne peut pas hériter de currentColor. */
.section--filigrane { position: relative; overflow: hidden; }
.section--filigrane::after {
	content: ""; position: absolute; z-index: 0;
	right: -110px; bottom: -110px; width: 460px; height: 460px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%230c0a33' stroke-width='4' stroke-linecap='round'%3E%3Ccircle cx='50' cy='50' r='33'/%3E%3Ccircle cx='50' cy='50' r='9'/%3E%3Cpath d='M50 6v88M6 50h88M19 19l62 62M81 19 19 81'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	opacity: .06; pointer-events: none;
	animation: barre-derive 240s linear infinite;
}
.section--filigrane > .wrap { position: relative; z-index: 1; }
@keyframes barre-derive { to { transform: rotate(360deg); } }

/* Liseré de vagues sous les titres de section. */
.section__titre--vague::after {
	content: ""; display: block; width: 96px; height: 12px; margin-top: .35em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12'%3E%3Cpath d='M0 6q12-10 24 0t24 0 24 0 24 0' fill='none' stroke='%23a5173f' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") left center / contain no-repeat;
}
.section__surtitre {
	text-transform: uppercase; letter-spacing: .14em; font-size: .82rem;
	font-weight: 700; color: var(--bordeaux); margin: 0 0 .2em;
}

/* ---------- Section capitaine Aziz ---------- */
.aziz__grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 3.5em; align-items: center; }
.aziz__citation {
	margin: 1.4em 0; padding: 1em 1.4em;
	border-left: 4px solid var(--bordeaux); background: #fff; border-radius: 0 var(--r) var(--r) 0;
}
.aziz__citation p { margin: 0 0 .4em; font-family: var(--police-titre); font-size: 1.08rem; }
.aziz__citation footer { color: var(--gris); font-size: .88rem; }
.aziz__citation cite { font-style: normal; font-weight: 600; }
@media (max-width: 900px) {
	.aziz__grille { grid-template-columns: 1fr; }
	.aziz__media { justify-self: center; }
}

/* ---------- Reel portrait (façade Facebook) ---------- */
.vdb-reel { margin: 0; width: min(340px, 86vw); }
.vdb-reel__facade {
	position: relative; display: block; width: 100%; aspect-ratio: 9 / 16;
	border: 0; padding: 0; cursor: pointer; border-radius: 16px; overflow: hidden;
	background: var(--bleu-nuit); box-shadow: var(--ombre);
}
.vdb-reel__facade img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; opacity: .8; transition: transform .3s, opacity .3s;
}
.vdb-reel__facade:hover img { transform: scale(1.04); opacity: .65; }
.vdb-reel__play {
	position: absolute; inset: 0; margin: auto; width: 74px; height: 74px;
	background: rgba(255,255,255,.94); border-radius: 50%;
	box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.vdb-reel__play::after {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: 0; height: 0; transform: translateX(3px);
	border: 15px solid transparent; border-left: 24px solid var(--bordeaux); border-right-width: 0;
}
.vdb-reel__facade:hover .vdb-reel__play { background: #fff; }
.vdb-reel__mention {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: .6em; font-size: .78rem; color: #fff; text-align: center;
	background: linear-gradient(0deg, rgba(12,10,51,.8), transparent);
}
.vdb-reel iframe { display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; border-radius: 16px; box-shadow: var(--ombre); }
.vdb-reel__legende { margin-top: .6em; font-size: .88rem; color: var(--gris); text-align: center; }

/* ---------- Avis Google ---------- */
.vdb-avis__badge {
	display: flex; align-items: center; gap: .8em; flex-wrap: wrap;
	margin-bottom: 1.6em;
}
.vdb-avis__note { font-size: 2.4rem; font-family: var(--police-titre); color: var(--bleu-nuit); line-height: 1; }
.vdb-avis__total { color: var(--gris); }
.etoiles { letter-spacing: .1em; font-size: 1.15rem; color: #d8d4c6; }
.etoiles__e--pleine { color: #e7a500; }
.vdb-avis__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4em; }
.vdb-avis__carte {
	margin: 0; background: #fff; border: 1px solid var(--ligne); border-radius: var(--r);
	padding: 1.3em 1.4em; display: flex; flex-direction: column; gap: .6em;
	box-shadow: 0 3px 14px rgba(12,10,51,.05);
}
.vdb-avis__carte p { margin: 0; flex: 1; font-size: .96rem; }
.vdb-avis__carte footer { color: var(--gris); font-size: .88rem; }
.vdb-avis__carte cite { font-style: normal; font-weight: 600; color: var(--encre); }
.vdb-avis__lien { margin-top: 1.4em; font-weight: 600; }
.avis-home { background: var(--blanc); }

/* ---------- Preloader : vedette naviguant sur la rivière ---------- */
/* Affiché au premier chargement de la session seulement (main.js), retiré au
   window.load. Filet de sécurité : il s'efface tout seul au bout de 4 s même
   si le JS ne tourne pas. Sous prefers-reduced-motion, jamais affiché. */
.preloader {
	position: fixed; inset: 0; z-index: 200;
	background: var(--creme);
	display: grid; place-items: center;
	transition: opacity .5s ease, visibility .5s;
	animation: preloader-secours 4s forwards;
}
.preloader--fin { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes preloader-secours { 90% { opacity: 1; } 100% { opacity: 0; visibility: hidden; pointer-events: none; } }
.preloader__scene { width: min(340px, 70vw); text-align: center; overflow: hidden; }
.preloader__bateau { animation: tangage 2.2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes tangage {
	0%, 100% { transform: rotate(-2.2deg) translateY(0); }
	50%      { transform: rotate(2.2deg) translateY(-4px); }
}
.preloader__vagues { animation: houle 1.6s linear infinite; }
@keyframes houle { to { transform: translateX(-48px); } }
.preloader__txt {
	margin-top: 1em; color: var(--bleu-nuit); font-family: var(--police-titre);
	font-size: 1.05rem; letter-spacing: .02em;
	animation: respire 1.8s ease-in-out infinite;
}
@keyframes respire { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .preloader { display: none; } }

/* ---------- Copyright : petite vedette au long cours ---------- */
.site-footer__bas { position: relative; overflow: hidden; }
.footer-vedette {
	position: absolute; bottom: 4px; left: 0;
	color: rgba(255, 255, 255, .5);
	animation: traversee 26s linear infinite;
	pointer-events: none;
}
.footer-vedette .ico { width: 22px; height: 22px; }
@keyframes traversee {
	0%   { transform: translateX(-40px) translateY(0); }
	25%  { transform: translateX(calc(25vw)) translateY(-2px); }
	50%  { transform: translateX(calc(50vw)) translateY(0); }
	75%  { transform: translateX(calc(75vw)) translateY(-2px); }
	100% { transform: translateX(calc(100vw + 40px)) translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .footer-vedette { animation: none; display: none; } }

/* ---------- Page contact ---------- */
.contact__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3em; align-items: start; }
@media (max-width: 900px) { .contact__grille { grid-template-columns: 1fr; } }
.contact__coordonnees { list-style: none; margin: 1.4em 0; padding: 0; display: grid; gap: .9em; }
.contact__coordonnees li { display: flex; gap: .7em; align-items: flex-start; }
.contact__coordonnees .ico { color: var(--bordeaux); flex: none; margin-top: .15em; }
.contact__coordonnees em { color: var(--gris); font-style: normal; font-size: .92rem; }
.contact__carte { margin: 1.6em 0 0; }
.contact__carte iframe {
	width: 100%; height: 320px; border: 1px solid var(--ligne);
	border-radius: var(--r); display: block;
}
.contact__carte figcaption { margin-top: .5em; font-size: .92rem; }

.contact__form {
	background: var(--creme); border: 1px solid var(--ligne);
	border-radius: var(--r); padding: 1.8em;
}
.contact__form h2 { margin: 0 0 1em; font-size: 1.35rem; }
.champ { margin: 0 0 1em; }
.champ--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.champ--2col p { margin: 0; }
.champ label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3em; }
.champ input[type="text"], .champ input[type="email"], .champ input[type="tel"],
.champ select, .champ textarea {
	width: 100%; padding: .65em .8em;
	border: 1px solid var(--ligne); border-radius: 8px;
	font: inherit; background: #fff; color: var(--encre);
}
.champ :is(input, select, textarea):focus-visible { outline: 3px solid var(--bleu); outline-offset: 1px; }
.champ--consent label { display: flex; gap: .6em; font-weight: 400; font-size: .9rem; align-items: flex-start; }
.champ--consent input { margin-top: .25em; }
/* Honeypot : sorti de l'écran, jamais display:none (les bots l'ignorent). */
.champ--hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-retour { padding: .8em 1em; border-radius: 8px; font-weight: 600; }
.form-retour--ok { background: #e2f4ea; color: var(--ok); }
.form-retour--err { background: #fbe9ed; color: var(--bordeaux-f); }

/* ---------- Divers ---------- */
.fil a, .tunnel__fil a { color: var(--gris); }
.article__date { color: var(--gris); font-size: .92rem; }
.article__media img { border-radius: var(--r); }
.pagination { display: flex; gap: .5em; justify-content: center; margin-top: 2.5em; }
.pagination .page-numbers {
	display: inline-block; min-width: 2.4em; text-align: center;
	padding: .45em .6em; border: 1px solid var(--ligne); border-radius: 8px;
	text-decoration: none; color: var(--encre);
}
.pagination .page-numbers.current { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.page-404 { text-align: center; padding: 3em 0; }
.page-404 .cta { margin: 0 .4em; }
.contenu :is(ul, ol) { padding-left: 1.3em; }
.contenu table { width: 100%; border-collapse: collapse; }
.contenu table :is(th, td) { padding: .6em .8em; border-bottom: 1px solid var(--ligne); text-align: left; }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}