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

/* Cartes de menus : la composition doit être lisible sur la page, sans
   téléchargement de brochure (retour client du 01/08/2026). */
.vdb-menus__cartes {
	display: grid; gap: 1em; margin: 0 0 1em;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.vdb-menu {
	background: #fff; border: 1px solid var(--ligne); border-radius: var(--r);
	padding: 1.1em 1.2em; display: flex; flex-direction: column;
}
.vdb-menu__tete {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: .8em; border-bottom: 1px solid var(--ligne); padding-bottom: .5em;
}
.vdb-menu__tete h4 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.vdb-menu__prix { font-weight: 700; color: var(--bleu); white-space: nowrap; }
.vdb-menu__duree { margin: .45em 0 0; font-size: .85rem; color: var(--gris); }
.vdb-menu__plats { list-style: none; margin: .7em 0 0; padding: 0; display: grid; gap: .5em; }
.vdb-menu__plats li {
	position: relative; padding-left: 1.1em; font-size: .93rem; line-height: 1.45;
}
/* Filet de séparation entre les plats, façon carte de restaurant. */
.vdb-menu__plats li::before {
	content: ''; position: absolute; left: 0; top: .58em;
	width: 6px; height: 6px; border-radius: 50%; background: var(--bordeaux); opacity: .55;
}

.vdb-menus__compris {
	display: flex; align-items: flex-start; gap: .5em;
	margin: 0 0 .5em; max-width: 720px; font-size: .93rem; color: var(--bleu-nuit);
}
.vdb-menus__compris .ico { flex: 0 0 auto; margin-top: .18em; color: var(--ok); }

/* Frais obligatoire : visuellement distinct des suppléments, qui sont
   facultatifs et repliés. */
.vdb-menus__oblig {
	margin-top: 1em; max-width: 560px; padding: .8em 1em;
	background: var(--creme); border-left: 3px solid var(--bordeaux); border-radius: 0 8px 8px 0;
}
.vdb-menus__oblig-titre {
	margin: 0 0 .4em; font-weight: 700; font-size: .9rem;
	text-transform: uppercase; letter-spacing: .04em; color: var(--bordeaux);
}
.vdb-menus__oblig ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35em; }
.vdb-menus__oblig li { display: flex; justify-content: space-between; gap: 1em; align-items: baseline; }
.vdb-menus__oblig em { display: block; font-style: normal; font-size: .85rem; color: var(--gris); }
.vdb-menus__oblig strong { white-space: nowrap; color: var(--bleu); }

.vdb-menus__supp { margin-top: .8em; max-width: 560px; }
.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; }
.resa-box__prix del { color: var(--gris); font-weight: 400; }

/* Alternative au paiement en ligne : lisible, mais clairement secondaire par
   rapport au bouton de réservation. */
.resa-box__alt { margin: .7em 0 0; text-align: center; font-size: .92rem; }
.resa-box__alt a { font-weight: 600; }
.resa-box__alt span { display: block; margin-top: .2em; color: var(--gris); font-size: .85rem; line-height: 1.4; }
.tunnel__sur-place {
	margin: 1.4em auto 0; max-width: 640px; padding: .8em 1.1em;
	background: var(--creme); border-radius: var(--r);
	text-align: center; font-size: .95rem;
}
.tunnel__sur-place a { font-weight: 600; }
.vdb-horaires__saison { margin: .3em 0 0; color: var(--gris); font-size: .9rem; }

.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;
}
/* Photo d'ambiance sur une fiche : portrait posé à côté du texte sur grand
   écran, pleine largeur sur mobile. */
.fiche__ambiance { margin: 2em 0; }
.fiche__ambiance img {
	width: min(360px, 100%); border-radius: 16px;
	box-shadow: var(--ombre); object-fit: cover; aspect-ratio: 3 / 4;
}
.fiche__ambiance figcaption { margin-top: .6em; font-size: .88rem; color: var(--gris); max-width: 420px; }
@media (min-width: 700px) {
	.fiche__ambiance { display: grid; grid-template-columns: 360px 1fr; gap: 1.4em; align-items: end; }
	.fiche__ambiance figcaption { margin-top: 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 ---------- */
/* La colonne de gauche est du texte courant, celle de droite un formulaire :
   à 50/50 les lignes de texte deviennent trop longues sur grand écran. Le
   formulaire, lui, a une largeur utile qui ne gagne rien à s'étirer. */
.contact__grille {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 3em; align-items: start;
}
@media (min-width: 1100px) {
	.contact__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 32em); }
}
@media (max-width: 900px) {
	.contact__grille { grid-template-columns: 1fr; gap: 2em; }
}
.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; }
/* Deux colonnes tant qu'il reste la place d'écrire dedans. En dessous, elles
   se cassent : « Nombre d'accompagnants » sur trois lignes au-dessus d'un champ
   de 90 px n'aide personne. `auto-fit` gère la bascule sans point de rupture
   fixe, ce qui vaut aussi quand la grille passe en une colonne à 900 px. */
.champ--2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); gap: 1em; }
.champ--2col p { margin: 0; min-width: 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; }
/* Pages de devis : repères chiffrés à côté du formulaire, pour que le
   visiteur sache à quoi s'attendre avant d'écrire (l'ancien site n'affichait
   aucune fourchette de prix). */
.devis__reperes { list-style: none; margin: 1.4em 0; padding: 0; display: grid; gap: .6em; }
.devis__reperes li { display: flex; gap: .6em; align-items: flex-start; }
.devis__reperes .ico { color: var(--ok); flex: none; margin-top: .15em; }
/* Même gouttière et même largeur d'icône que les repères juste au-dessus :
   sinon les deux colonnes de texte sont décalées de deux pixels, ce qui se
   voit à l'œil sans qu'on sache dire pourquoi. */
.devis__delai { display: flex; gap: .6em; align-items: flex-start; color: var(--gris); font-size: .95rem; }
.devis__delai .ico { color: var(--bordeaux); flex: none; width: 20px; height: 20px; margin-top: .15em; }
/* Le contenu est un seul item de flex : il occupe la largeur restante et le
   numéro reste dans le fil du texte au lieu d'être poussé au bord. */
.devis__delai span { min-width: 0; }
.devis__delai a { font-weight: 600; white-space: nowrap; }
.devis__brochure { margin: 1em 0 0; font-weight: 600; }
.devis__brochure span { color: var(--gris); font-weight: 400; font-size: .85rem; }
.champ input[type="number"], .champ input[type="date"] {
	width: 100%; padding: .65em .8em;
	border: 1px solid var(--ligne); border-radius: 8px;
	font: inherit; background: #fff; color: var(--encre);
}

.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;
}