/*
 * Thème « Captain J » — Diffusée.
 * Reproduction fidèle de la direction artistique captainj-boattours.com.
 * Aucun asset distant : polices, icônes et motifs sont servis depuis le thème (CSP `'self'`).
 */

/* ---------------------------------------------------------------- 1. Base */

:root {
    --ROSE_LOGO: #E44B80;
    --BLEU_FONC: #1F335D;
    --BLEU-CIEL: #20A6B3;
    --Base-02: #090914;
    --GRIS_FONC: #52525B;
    --GRIS: #D4D4D8;
    --ORANGE: #FF3600;
}

@font-face {
    font-family: "Blambot Casual";
    src: url("fonts/blambotcasual.woff2") format("woff2"),
         url("fonts/blambotcasual.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Inter / Poppins / Nunito Sans — sous-ensembles latin et latin-ext auto-hébergés
   (la source les charge depuis Google Fonts ; ici tout reste en `font-src 'self'`). */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/inter-300-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/inter-300-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/inter-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/inter-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/inter-500-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/inter-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/inter-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/inter-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/inter-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/inter-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/nunito-sans-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/nunito-sans-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/nunito-sans-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/nunito-sans-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/nunito-sans-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/nunito-sans-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/poppins-300-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("fonts/poppins-300-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/poppins-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/poppins-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/poppins-500-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/poppins-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/poppins-600-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/poppins-600-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/poppins-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/poppins-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0 auto;
    max-width: 1920px;
    font-family: Inter, sans-serif;
    color: var(--Base-02);
    background: #fff;
    overflow-x: hidden;
}

img,
video {
    max-width: 100%;
}

img {
    height: auto;
}

/* `image()` rend un <picture> : neutralisé pour que l'<img> hérite directement de la mise en
   page du conteneur (grilles, ratios, object-fit) comme un <img> simple. */
picture {
    display: contents;
}

a {
    color: inherit;
}

h1, h2, h3, h4, h5, h6 {
    clear: both;
}

button {
    font: inherit;
}

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1 0 auto;
}

.nowrap {
    white-space: nowrap;
}

.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgb(0 0 0 / 60%);
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    top: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    width: auto;
    z-index: 100000;
}

:focus-visible {
    outline: 3px solid var(--ROSE_LOGO);
    outline-offset: 2px;
}

/* --------------------------------------------------- 2. Typographie clés */

.heading1 {
    color: var(--Base-02);
    font-family: Poppins, sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: -2px;
}

.heading3 {
    display: block;
    margin: 0;
    color: var(--BLEU-CIEL);
    font-family: Poppins, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.link {
    color: var(--Base-02);
    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    text-decoration: underline;
}

.link:hover {
    text-decoration: none;
}

.container1 {
    padding: 44px 14px 25px 14px;
    text-align: center;
}

.container1 .link {
    margin-top: 5px;
    display: block;
}

.container {
    width: min(100% - 40px, 1200px);
    margin-inline: auto;
}

/* ------------------------------------------------------------ 3. Boutons */

.button {
    padding: 14px 22px;
    border-radius: 8px;
    border: 2px solid transparent;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    display: inline-block;
    /* Sur l'état de base, pas seulement au survol : la transition joue à l'aller ET au retour. */
    transition: background-color 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out;
}

.button:hover,
.button:active {
    text-decoration: none;
}

/* Navigation clavier : un anneau net, homogène sur tout le site (a11y). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--BLEU-CIEL);
    outline-offset: 2px;
}

.button--primary {
    padding: 16px 24px;
    color: #fff;
    border-color: var(--BLEU-CIEL);
    background: var(--BLEU-CIEL);
}

.button--primary:visited {
    color: #fff;
}

.button--primary:hover {
    color: var(--BLEU-CIEL);
    background-color: #fff;
}

.button--secondary {
    color: var(--BLEU_FONC);
    border-color: var(--BLEU_FONC);
}

.button--secondary:hover {
    color: #fff;
    background-color: var(--BLEU_FONC);
}

.button--ice {
    border-color: #fff;
    background: #fff;
    color: var(--BLEU-CIEL);
}

.button--ice:visited {
    color: var(--BLEU-CIEL);
}

/* Reproduit le rendu de la source (la règle d'origine référence une variable
   inexistante : le fond retombe donc sur « transparent » au survol). */
.button--ice:hover {
    color: #fff;
    border-color: var(--BLEU-CIEL);
    background-color: transparent;
}

.button--white {
    padding: 16px;
    border-radius: 9px;
    color: var(--BLEU_FONC);
    font-family: Poppins, sans-serif;
    line-height: 28px;
    letter-spacing: -0.2px;
    background: #fff;
    border-color: #fff;
}

.button--white:hover {
    background: none;
    color: #fff;
}

.button--blue {
    padding: 16px 24px;
    text-align: center;
    border-color: var(--BLEU-CIEL);
    color: var(--BLEU-CIEL);
    background: #fff;
}

.button--blue:hover {
    background: var(--BLEU-CIEL);
    color: #fff;
}

/* --------------------------------------------------------- 4. Animations */

@keyframes gelatine {
    from, to { transform: scale(1, 1); }
    25% { transform: scale(0.8, 1.2); }
    50% { transform: scale(1.2, 0.8); }
    75% { transform: scale(0.95, 1.05); }
}

.gelatine:hover {
    animation: gelatine 0.5s 1;
}

.zoom {
    transition: 0.2s;
}

.zoom:hover {
    transform: scale(1.1);
    transition: 0.2s;
}

/* ------------------------------------------------------- 5. Bandeau haut */

.top-banner {
    display: none;
    padding: 17px 70px 0 70px;
    justify-content: space-between;
    align-items: center;
}

.top-banner p {
    margin: 0;
}

.top-banner__first p {
    color: var(--ROSE_LOGO);
    font-family: "Blambot Casual", serif;
    font-size: 16px;
    font-style: italic;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.2px;
}

.top-banner__last p {
    color: var(--ROSE_LOGO);
    text-align: right;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.2px;
}

/* ------------------------------------------------------------ 6. En-tête */

/* Barre repliée après défilement : navigation et bouton Contact toujours à portée
   (la version de la source disparaissait après le hero). */
.header.header--stuck {
    position: fixed;
    top: 10px;
    box-shadow: 0 10px 34px 0 rgb(9 9 20 / 14%);
    animation: header-drop 0.35s ease-out;
}

@keyframes header-drop {
    from { transform: translate(-50%, -120%); }
    to { transform: translate(-50%, 0); }
}


.header {
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    width: 95vw;
    max-width: 1773.331px;
    z-index: 90;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 9px;
    background: #fff;
    padding: 3px 6px;
}

.header__branding {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header__branding > a {
    display: block;
    line-height: 0;
    text-decoration: none;
}

.header__branding > a > img {
    width: 152.38px;
    height: 58.86px;
    object-fit: contain;
}

.header__branding .brand-name {
    color: var(--BLEU_FONC);
    font-family: Poppins, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 58.86px;
}

.header__toggle {
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--ROSE_LOGO);
}

.hamburger {
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    border: none;
    padding: 0;
    background: none;
}

.hamburger > * {
    background: #fff;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    transition: 0.4s;
}

.header--open .hamburger__top { transform: translateY(6px) rotate(45deg); }
.header--open .hamburger__middle { opacity: 0; transform: translateX(-50px); }
.header--open .hamburger__bottom { transform: translateY(-6px) rotate(-45deg); }

.header__navigation {
    border-radius: 9px;
    box-shadow: 0 4px 4px 0 rgb(0 0 0 / 25%);
    position: absolute;
    top: 77px;
    left: 0;
    width: 95vw;
    max-width: 100%;
    transform: translateX(-110%);
    transition: 0.8s;
    z-index: 80;
    padding: 16.14px 25px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.header__navigation > * {
    width: 100%;
}

.header--open .header__navigation {
    transform: translateX(0);
}

.header__cta {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 25px;
}

.header__cta > * {
    display: flex;
}

/* Menu principal */

.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.menu .menu-item {
    position: relative;
}

.menu .menu-item > a {
    color: var(--BLEU_FONC);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu .menu-item > a > * {
    flex-shrink: 0;
}

.menu .menu-item > a:hover {
    transition: 0.5s color;
    color: var(--ROSE_LOGO);
}

.menu .menu-item.current-menu-item > a {
    padding: 5px 15px;
    border-radius: 21px;
    background: var(--ROSE_LOGO);
    color: #fff;
    display: inline-flex;
}

.menu .menu-item.current-menu-item > a:hover {
    color: #fff;
}

.sub-menu {
    margin: 15px 0 0 0;
    padding: 0;
    width: 100%;
    list-style: none;
    position: relative;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sub-menu .menu-item > a {
    color: var(--BLEU_FONC);
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.sub-menu .menu-item.current-menu-item > a {
    background: #fff;
    color: var(--BLEU_FONC);
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.sub-menu .menu-item.current-menu-item > a:hover {
    color: var(--ROSE_LOGO);
}

.icon {
    display: block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px 24px;
}

.icon--blue-sparkle { background-image: url("images/icons/blue-sparkle.svg"); }
.icon--blue-warehouse { background-image: url("images/icons/blue-warehouse.svg"); }
.icon--blue-diamond { background-image: url("images/icons/blue-diamond.svg"); }
.icon--blue-martini { background-image: url("images/icons/blue-martini.svg"); }
.icon--blue-allinclusive { background-image: url("images/icons/blue-allinclusive.svg"); }
.icon--blue-captain { background-image: url("images/icons/blue-captain.svg"); }
.icon--blue-comfort { background-image: url("images/icons/blue-comfort.svg"); }
.icon--blue-icecooler { background-image: url("images/icons/blue-icecooler.svg"); }
.icon--blue-speed { background-image: url("images/icons/blue-speed.svg"); }

/* Sélecteur de langue */

.lang-switch {
    position: relative;
    width: 150px;
    flex-direction: column;
}

.lang-switch__toggle,
.lang-switch__list a {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 4px 0;
    border: none;
    background: #fff;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    color: var(--BLEU_FONC);
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
}

.lang-switch__flag {
    width: 24px;
    height: 17px;
    object-fit: cover;
    flex-shrink: 0;
}

.lang-switch__caret {
    margin-left: auto;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--BLEU_FONC);
    transition: 0.3s transform;
}

.lang-switch__toggle[aria-expanded="true"] .lang-switch__caret {
    transform: rotate(180deg);
}

.lang-switch__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
}

.lang-switch--open .lang-switch__list {
    display: block;
}

/* --------------------------------------------------------------- 7. Hero */

.hero {
    margin: 23px 3px 0 3px;
    position: relative;
    border-radius: 13px;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--BLEU-CIEL);
    overflow: hidden;
}

.hero__bg > video,
.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.7);
}

/* Même voile que le hero produit : le titre et le texte sont en bas, en blanc, sur une photo
   qu'on ne choisit pas (sable clair, écume, ciel pâle). L'assombrissement global ne suffit pas —
   il faut du contraste LÀ où le texte se trouve. */
.hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgb(9 9 20 / 68%) 0%,
        rgb(9 9 20 / 42%) 24%,
        rgb(9 9 20 / 14%) 48%,
        rgb(9 9 20 / 0%) 72%
    );
    pointer-events: none;
}

.hero__row {
    position: relative;
    height: calc(100vh - 23px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 54.6px;
    padding: 0 26px 23px 26px;
}

.hero__col {
    width: 100%;
}

.hero__col:first-child {
    max-width: 50%;
}

.hero h1 {
    color: #fff;
    font-size: 49.877px;
    font-weight: 700;
    line-height: 49.877px;
    margin: 0;
    display: block;
}

.hero p {
    margin: 27px 0 0 0;
    display: block;
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 17.648px;
}

.hero .button {
    display: inline-block;
    margin: 11.4px 0 0 0;
}

/* --- Hero de rubrique ------------------------------------------------------

   Les grandes rubriques (Destinations, Toutes les expériences, Nos bateaux…) réutilisaient le hero
   de l'accueil : plein écran, titre calé en bas à gauche. Elles n'avaient donc rien de commun avec
   les fiches qu'elles listent, alors que le visiteur passe des unes aux autres. Cette variante
   reprend la géométrie de `.product-hero` — hauteur bornée à 86vh, titre centré au-dessus du pli,
   sous-titre dessous — pour que l'enchaînement rubrique → fiche se lise comme un même site.

   Choisie en admin (champ « Présentation » du bloc), jamais déduite du gabarit : une rubrique peut
   vouloir le plein écran, et l'accueil garde le sien.

   Les sélecteurs sont composés (`.hero.hero--rubrique`) pour l'emporter sur les règles `.hero` des
   media queries plus bas dans le fichier, qui autrement gagneraient par ordre d'écriture. */

.hero.hero--rubrique {
    margin: 4px 3px;
    border-radius: 11px;
}

.hero--rubrique .hero__row {
    height: 86vh;
    min-height: 540px;
    justify-content: flex-end;
    align-items: center;
    gap: 26px;
    padding: 0 15px 6vh 15px;
    text-align: center;
}

.hero--rubrique .hero__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.hero--rubrique .hero__col:first-child {
    max-width: 971px;
}

/* La colonne latérale devient une rangée centrée sous le titre — une carte de 50 % de large sous
   un titre centré donnerait une composition en escalier. */
.hero--rubrique .hero__col:last-child {
    max-width: 520px;
    margin-inline: auto;
}

.hero.hero--rubrique h1 {
    font-family: Poppins, sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 46.619px;
    text-wrap: balance;
    /* Filet de sécurité par-dessus le voile, pour les photos très claires. */
    text-shadow: 0 2px 16px rgb(9 9 20 / 35%);
}

/* Le bouton rond revient dans le flux, sous la carte. Épinglé en bas du hero (règle générale au
   delà de 1200 px), il retombait par-dessus la carte que cette variante ramène au centre — la
   composition d'origine le plaçait à droite, sous la colonne des cartes. */
.hero--rubrique .hero__cta {
    position: static;
    transform: none;
    margin: 18px auto 0;
}

/* Le sous-titre du hero seulement : `.hero p` habille aussi le texte des cartes latérales, qu'on
   ne veut pas grossir. */
.hero--rubrique .hero__col:first-child > p {
    margin-top: 15px;
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    text-wrap: pretty;
    text-shadow: 0 1px 12px rgb(9 9 20 / 30%);
}

@media (min-width: 992px) {
    .hero--rubrique .hero__row {
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding: 0 29px 9vh 29px;
    }

    .hero--rubrique .hero__col {
        width: 100%;
    }

    .hero.hero--rubrique h1 {
        font-size: 64px;
        line-height: 82.878px;
    }

    .hero--rubrique .hero__col:first-child > p {
        margin-top: 18px;
        font-size: 24px;
        line-height: 32px;
    }
}

/* Cartes du hero */

.card {
    border-radius: 12px;
    border: 3px solid #fff;
    display: block;
    overflow: hidden;
    text-decoration: none;
    position: relative;
}

.card--mt {
    margin-top: 22px;
}

.card--with-bg {
    font-size: 0;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.card--with-bg img {
    object-fit: cover;
    height: 226px;
    width: 100%;
    display: block;
}

.card--2col {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 19px;
}

.card--2col strong,
.card--2col em,
.card--2col b {
    display: block;
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -2px;
}

.card--2col p {
    margin: 0;
    display: block;
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 28px;
}

.card--2col > img {
    flex-shrink: 0;
}

.card__content {
    padding: 17px 14px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.card__button {
    display: block;
    padding: 5px 16px;
    border-radius: 8px;
    background: #fff;
    color: #000;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
}

/* ---------------------------------------------------------- 8. À propos */

.about {
    padding: 33px 25px 25px 25px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 86.6px;
}

.about > *:nth-child(1) { flex: 0 0 55%; }
.about > *:nth-child(2) { flex: 0 0 45%; }

.about::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("images/palm-tree.svg");
    background-repeat: no-repeat;
    background-size: 228px 692px;
    background-position: left center;
    transform: scaleX(-1);
    z-index: -1;
}

.about__pink {
    display: block;
    margin: 0;
    color: var(--ROSE_LOGO);
    font-family: "Blambot Casual", serif;
    font-size: 22px;
    font-style: italic;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.2px;
}

.about .heading1 {
    display: block;
    margin: 26px 0 37px 0;
}

.about p {
    display: block;
    margin: 24px 0 0 0;
    color: var(--Base-02);
    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}

.about .list {
    margin-top: 61px;
}

.about__visual {
    text-align: center;
}

.about__visual img {
    border-radius: 20px;
    max-width: 532px;
    width: 100%;
    height: auto;
}

.list {
    display: flex;
    flex-direction: column;
    gap: 19px;
    color: var(--Base-02);
    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}

.list__item {
    display: flex;
    gap: 19px;
    align-items: flex-start;
}

.list__item > img {
    flex-shrink: 0;
}

/* ---------------------------------------------------- 9. Cartes de trips */

.products {
    margin: 0;
}

.products.columns-4 {
    padding: 0 14px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.products .product {
    cursor: pointer;
    margin: 0;
    border-radius: 20px;
    border: 1px solid var(--BLEU-CIEL);
    padding: 30px 18px 21px 18px;
    display: grid;
    grid-template-areas:
        "thumbnail thumbnail"
        "title title"
        "description description"
        "minbooking price"
        "quickpreview quickpreview";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    color: var(--Base-02);
    font-family: Poppins, sans-serif;
    text-decoration: none;
}

.products .product .thumbnail {
    grid-area: thumbnail;
    overflow: hidden;
    line-height: 0;
    position: relative;
    background: var(--BLEU-CIEL);
    border-radius: 15px;
}

.products .product .thumbnail img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    aspect-ratio: 10/7;
    filter: brightness(80%);
    transition: 0.6s scale;
}

.products .product .thumbnail .thumbnail-description {
    position: absolute;
    bottom: 14px;
    left: 15px;
    /* Calée à gauche seulement, la pastille s'étirait jusqu'au bord droit de la photo : un bloc
       blanc à ras du cadre, alors qu'elle respire de 15 px à gauche. Même marge des deux côtés. */
    max-width: calc(100% - 30px);
    padding: 5px 16px;
    border-radius: 8px;
    background: #fff;
    color: var(--BLEU_FONC);
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    /* Une pastille, pas un paragraphe : un libellé long (l'import a recopié le titre du produit)
       la transformait en pavé blanc couvrant la moitié de la photo. Deux lignes au plus, avec
       ellipse — le titre complet est répété juste dessous, rien ne se perd. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-wrap: pretty;
}

.products .product:hover .thumbnail img {
    scale: 1.1;
}

.products .product .title {
    grid-area: title;
    margin: 27px 0 2px 0;
    font-size: 32px;
    font-weight: 600;
    /* 41 px et non 38 : en Poppins 32 px, la boîte de ligne de 38 px est plus courte que les
       glyphes (34 + 11 px de métriques), si bien que les jambages (j, g, p, y) de la DERNIÈRE
       ligne visible débordaient de ~1,5 px sous la zone rognée — les titres sur deux lignes
       étaient tranchés à ras. 41 px contient les jambages sans laisser dépasser le sommet des
       capitales accentuées de la ligne suivante ; élargir le rognage aurait fait l'inverse. */
    line-height: 41px;
    letter-spacing: -2px;
    /* Deux lignes au plus, avec ellipse : seul `overflow: hidden` coupait un titre de trois lignes
       en plein milieu de la troisième, sans rien signaler au lecteur.

       `max-height` en plus de la limite de lignes, et exprimée en `lh` pour rester d'accord avec
       l'interligne ci-dessus : sur les deux grandes cartes de l'accueil, le titre est étiré à la
       hauteur de sa rangée (la photo, qui couvre les quatre rangées, les gonfle), et la limite de
       lignes ne bornait alors plus rien — la troisième ligne réapparaissait par-dessus le
       descriptif. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: 2lh;
    overflow: hidden;
}

.products .product:hover .title {
    text-decoration: underline;
}

.products .product .description {
    display: none;
    margin: 0 0 14px 0;
    grid-area: description;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
}

.products .product .min-booking {
    grid-area: minbooking;
}

/* Le prix garde SA colonne, y compris sur grand écran : reversé dans celle de la durée, il se
   superposait au texte dès que les deux libellés dépassaient la largeur de carte —
   « 3 heures minimum » et « À partir de 225 $/h » se chevauchaient de 47 px sur les listings à
   trois colonnes. À l'étroit, la durée passe désormais à la ligne au lieu d'être recouverte. */
.products .product .price {
    grid-area: price;
    justify-self: flex-end;
    padding-left: 12px;
    /* Contraste relevé (le #919191 de la source échoue au WCAG AA sur fond blanc). */
    color: var(--GRIS_FONC);
}

.products .product .min-booking,
.products .product .price {
    margin-top: 4px;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}

.products .product .quick-preview {
    grid-area: quickpreview;
    margin-top: 22px;
    justify-self: flex-start;
}

/* --------------------------------------------- 10. FAQ (bloc accordéon) */

/* Une carte par question : aplat neutre au repos, fond blanc cerclé de cyan une fois ouverte.
   La question est en quasi-noir (et non plus en gris) — c'est elle que l'œil doit accrocher en
   parcourant la liste, la réponse vient après. */

.block-accordion {
    padding: 56px 20px 60px 20px;
    /* Autorise l'animation d'ouverture vers une hauteur automatique (voir `::details-content`
       plus bas). Porté par le bloc : le comportement par défaut du site ne change pas. */
    interpolate-size: allow-keywords;
}

.block-accordion .accordion-head {
    text-align: center;
}

/* Surtitre : la cursive rose du site, comme les accroches de l'accueil et du pied de page. */
.block-accordion .accordion-kicker {
    display: block;
    margin: 0;
    color: var(--ROSE_LOGO);
    font-family: "Blambot Casual", serif;
    font-size: 18px;
    font-style: italic;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: -0.2px;
}

.block-accordion .accordion-head h2 {
    display: block;
    margin: 8px 0 0 0;
    color: var(--Base-02);
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    line-height: 38px;
    letter-spacing: -1px;
    text-wrap: balance;
}

.block-accordion .accordion-list {
    margin-top: 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.block-accordion .accordion-item {
    display: block;
    border: 1px solid transparent;
    border-radius: 14px;
    background: #F4F8FA;
    overflow: hidden;
    transition: background-color 0.22s ease-out, border-color 0.22s ease-out, box-shadow 0.22s ease-out;
}

/* `hover: hover` : sur un écran tactile, l'état de survol reste collé après le doigt. */
@media (hover: hover) {
    .block-accordion .accordion-item:not([open]):hover {
        border-color: rgb(32 166 179 / 35%);
        background: rgb(32 166 179 / 7%);
    }
}

.block-accordion .accordion-item[open] {
    border-color: var(--BLEU-CIEL);
    background: #fff;
    box-shadow: 0 10px 26px rgb(31 51 93 / 10%);
}

.block-accordion .accordion-item > summary {
    color: var(--Base-02);
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    /* Toute la ligne est la cible : ~56 px de haut, bien au-delà du minimum tactile. */
    padding: 16px 14px 16px 18px;
    cursor: pointer;
    list-style: none;
}

.block-accordion .accordion-item > summary::-webkit-details-marker {
    display: none;
}

.block-accordion .accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 1px solid rgb(32 166 179 / 40%);
    border-radius: 50%;
    background: #fff;
    color: var(--BLEU-CIEL);
    transition: transform 0.28s ease-out, background-color 0.22s ease-out, border-color 0.22s ease-out, color 0.22s ease-out;
}

.block-accordion .accordion-item[open] .accordion-icon {
    transform: rotate(180deg);
    border-color: var(--BLEU-CIEL);
    background: var(--BLEU-CIEL);
    color: #fff;
}

.block-accordion .accordion-panel {
    padding: 0 18px 18px 18px;
    color: var(--GRIS_FONC);
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    text-wrap: pretty;
}

/* Ouverture animée sans une ligne de JS. Les navigateurs qui ignorent `::details-content`
   affichent la réponse d'un coup : le contenu reste lisible, seule l'animation manque. */
.block-accordion .accordion-item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.3s ease-out, content-visibility 0.3s ease-out allow-discrete;
}

.block-accordion .accordion-item[open]::details-content {
    block-size: auto;
}

/* Sortie de secours en fin de bande : le visiteur dont la question n'est pas traitée doit
   trouver un contact, pas une impasse. */
.faq-contact {
    margin-top: 26px;
    border-radius: 18px;
    background: rgb(32 166 179 / 7%);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.faq-contact__heading {
    margin: 0;
    color: var(--Base-02);
    font-size: 16px;
    font-weight: 600;
    line-height: 23px;
}

.faq-contact__text {
    margin: 4px 0 0 0;
    color: var(--GRIS_FONC);
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

.faq-contact__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.faq-contact .button--whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.faq-contact__phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--BLEU_FONC);
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.faq-contact__phone:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------- 11. Newsletter */

.newsletter {
    margin: 35px auto -60px auto;
    width: calc(100% - 32px);
    max-width: 1170px;
    padding: 28px 20px;
    border-radius: 14px;
    background: var(--BLEU-CIEL);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.newsletter::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background-image: url("images/hook.svg");
    background-repeat: no-repeat;
    background-size: 135.096px 301px;
    background-position-x: 110%;
    background-position-y: 135%;
}

.newsletter__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.newsletter__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.newsletter__title {
    margin: 0;
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.newsletter__intro {
    margin: 0;
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
}

.newsletter__mention {
    margin: 0;
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

.newsletter__form {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.newsletter__form input[type="text"],
.newsletter__form input[type="email"] {
    width: 100%;
    padding: 14px 18px;
    border: none;
    border-radius: 9px;
    background: #fff;
    color: var(--BLEU_FONC);
    font-family: Poppins, sans-serif;
    font-size: 14px;
    line-height: 24px;
    box-sizing: border-box;
}

.newsletter__form input[type="text"]::placeholder,
.newsletter__form input[type="email"]::placeholder {
    color: #8A93A6;
    opacity: 1;
}

.newsletter__form input[type="submit"] {
    width: 100%;
}

/* Retour de l'inscription, rempli par le script du plugin (ou par `?newsletter=…` sans script).
   Sur toute la largeur du formulaire : il vient après les champs alignés en ligne. */
.newsletter__status {
    flex-basis: 100%;
    margin: 0;
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
}

.newsletter__status.is-error {
    color: var(--ORANGE);
}

.newsletter__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
}

.newsletter__consent input {
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: #fff;
}


.form-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.notice-wrap {
    padding: 120px 15px 0 15px;
}

.notice {
    padding: 14px 18px;
    border-radius: 9px;
    font-family: Poppins, sans-serif;
    font-size: 16px;
}

.notice-ok {
    background: rgb(32 166 179 / 12%);
    color: var(--BLEU_FONC);
}

.notice-error {
    background: rgb(228 75 128 / 12%);
    color: var(--ROSE_LOGO);
}

/* ---------------------------------------------------- 12. Pied de page */

.site-footer {
    background: #F4F8FA;
    position: relative;
    overflow: hidden;
    padding: 48px 16px 8px 16px;
}

/* Le bandeau newsletter (zone footer_primary) chevauche le pied de page :
   sa marge basse negative est compensee ici. */
.newsletter + .site-footer {
    padding-top: 96px;
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("images/hook-thin.svg");
    background-repeat: no-repeat;
    background-size: 200px 449px;
    background-position: calc(100% + 40px) calc(100% + 50px);
    opacity: 0.18;
    pointer-events: none;
}

.footer__grid {
    position: relative;
    max-width: 1170px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.footer__brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 26px;
}

.footer__logo {
    display: block;
    width: 151.639px;
    height: 58.86px;
    object-fit: contain;
}

.footer__brand-name {
    color: var(--BLEU_FONC);
    font-family: Poppins, sans-serif;
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
}

.footer__tagline {
    margin: 0;
    color: var(--ROSE_LOGO);
    font-family: "Blambot Casual", serif;
    font-size: 18px;
    font-style: italic;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.2px;
}

.footer__intro {
    margin: 0;
    color: var(--GRIS_FONC);
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
}

.socials ul {
    margin: 6px 0 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.socials ul li {
    list-style: none;
}

/* Zone tactile >= 44 px : pastille de 26 px + 9 px de marge interne. */
.socials ul li a {
    display: block;
    padding: 9px;
    text-decoration: none;
    line-height: 0;
    font-size: 0;
}

.socials ul li a img {
    display: block;
    width: 26px;
    height: 26px;
}

.footer__group {
    border-top: 1px solid rgb(31 51 93 / 12%);
}

.footer__group:last-of-type {
    border-bottom: 1px solid rgb(31 51 93 / 12%);
}

.footer__group-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 15px 0;
    cursor: pointer;
    list-style: none;
}

.footer__group-summary::-webkit-details-marker {
    display: none;
}

.footer__chevron {
    display: block;
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease-out;
}

.footer__group[open] .footer__chevron {
    transform: rotate(180deg);
}

.navs {
    margin: 0;
    padding: 0 0 14px 0;
}

.navs__menu {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.navs__menu > li > a {
    display: block;
    padding: 9px 0;
    color: var(--GRIS_FONC);
    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    text-decoration: none;
}

.navs__menu > li > a:hover {
    color: var(--BLEU_FONC);
    text-decoration: underline;
}

.footer__contact-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 26px;
}

.footer__contact {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-style: normal;
    font-family: Poppins, sans-serif;
}

.footer__contact-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.footer__contact-row img {
    display: block;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.footer__phone {
    color: var(--BLEU_FONC);
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    text-decoration: none;
}

.footer__phone:hover {
    text-decoration: underline;
}

.footer__contact-note {
    color: var(--GRIS_FONC);
    font-size: 13px;
    line-height: 19px;
}

.footer__chip {
    display: none;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    padding: 11px 18px;
    border: 1px solid rgb(32 166 179 / 45%);
    border-radius: 999px;
    color: var(--BLEU-CIEL);
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    text-decoration: none;
}

.footer__chip img {
    display: block;
    width: 18px;
    height: 18px;
}

.footer__actions {
    display: flex;
    gap: 10px;
}

.footer__action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 10px;
    border-radius: 9px;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    text-decoration: none;
}

.footer__action img {
    display: block;
    width: 16px;
    height: 16px;
}

.footer__action--call {
    background: var(--BLEU-CIEL);
    color: #fff;
}

.footer__action--wa {
    border: 1px solid rgb(32 166 179 / 50%);
    color: var(--BLEU-CIEL);
}

.footer-bar {
    background: #fff;
    border-top: 1px solid #E3E9ED;
    padding: 18px 16px;
}

.footer-bar__inner {
    max-width: 1170px;
    margin: 0 auto;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
}

.footer-bar__copy {
    margin: 0;
    color: rgb(82 82 91 / 80%);
    text-align: center;
    font-family: Poppins, sans-serif;
    font-size: 12px;
    line-height: 18px;
}

.footer-bar__links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-bar__links a {
    color: var(--BLEU_FONC);
    font-family: Poppins, sans-serif;
    font-size: 13px;
    line-height: 20px;
    text-decoration: none;
}

.footer-bar__links a:hover {
    text-decoration: underline;
}


/* --------------------------------------------------- 13. Actions fixes */

.back_to_top {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--ROSE_LOGO);
    border-radius: 50%;
    height: 32px;
    width: 32px;
    position: fixed;
    bottom: 103px;
    right: 44px;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: 0.6s;
    border: none;
    cursor: pointer;
}

.back_to_top--visible {
    opacity: 1;
    pointer-events: auto;
}

.whatsapp-cta {
    position: fixed;
    bottom: 52.22px;
    left: 24.5px;
    z-index: 200;
    display: block;
}

.whatsapp-cta__bg {
    border-radius: 50%;
    background: #25d366;
    width: 55px;
    height: 59.78px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.whatsapp-cta__bg > img {
    width: 47px;
    height: 47px;
}

/* --------------------------------------- 14. Pages internes & blocs core */

.page-header {
    padding-top: 160px;
}

.page-header h1,
.news-index .heading1,
.search-page .heading1,
.error-page .heading1 {
    color: var(--Base-02);
    font-family: Poppins, sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: -2px;
}

.page-header h1 {
    margin: 0;
}

.page-intro,
.article-excerpt,
.author-bio {
    color: var(--GRIS_FONC);
    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 16px 0;
    padding: 0;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    color: var(--GRIS_FONC);
}

.breadcrumb li + li::before {
    content: "›";
    margin-right: 8px;
}

.content-flow > * + * {
    margin-top: 40px;
}

.page-content,
.news-index,
.search-page,
.error-page,
.checkout,
.news-single {
    padding-bottom: 60px;
}

/* Les compositions landing portent déjà leurs espacements, comme les gabarits WordPress. */
.is-landing .content-flow--flush {
    padding-bottom: 0;
}

/* La FAQ historique commence sous une respiration éditoriale de 153 px. */
.page-faq {
    padding-top: 153px;
}

.news-index,
.search-page,
.error-page,
.checkout,
.news-single {
    padding-top: 160px;
}

.news-list,
.search-results {
    list-style: none;
    margin: 32px 0 0 0;
    padding: 0;
    display: grid;
    gap: 26px;
}

.news-card {
    border-radius: 20px;
    border: 1px solid var(--BLEU-CIEL);
    padding: 18px;
    font-family: Poppins, sans-serif;
}

.news-card .news-media img {
    border-radius: 15px;
    width: 100%;
    aspect-ratio: 10/7;
    object-fit: cover;
}

.news-card h2 {
    margin: 16px 0 8px 0;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -1px;
}

.news-card h2 a {
    text-decoration: none;
}

.empty-state,
.search-summary,
.result-count,
.pagination-status {
    font-family: Poppins, sans-serif;
    color: var(--GRIS_FONC);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
}

.search-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.search-form input {
    flex: 1 1 240px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--GRIS);
    font-family: Poppins, sans-serif;
    font-size: 16px;
}

.search-form button {
    padding: 16px 24px;
    border-radius: 8px;
    border: 2px solid var(--BLEU-CIEL);
    background: var(--BLEU-CIEL);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.error-page {
    text-align: center;
}

.error-code {
    font-family: Poppins, sans-serif;
    font-size: 96px;
    font-weight: 700;
    color: var(--BLEU-CIEL);
    letter-spacing: -4px;
}

.prose,
.block-richtext,
.block-text {
    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    color: var(--Base-02);
}

.prose h2,
.block-richtext h2,
.block-text h2 {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -2px;
    font-weight: 600;
}

/* Échelle intermédiaire et rythme de lecture : mêmes polices, interlignes régularisés. */
.prose h3,
.block-richtext h3,
.block-text h3 {
    font-size: 23px;
    line-height: 30px;
    letter-spacing: -0.5px;
    font-weight: 600;
}

.prose p,
.block-richtext p,
.block-text p {
    line-height: 1.65;
}

.prose a {
    color: var(--BLEU-CIEL);
}

.block {
    width: min(100% - 40px, 1200px);
    margin-inline: auto;
}

.block-accordion,
.about,
.products,
.container1 {
    width: auto;
    margin-inline: 0;
}

.block-columns .columns-grid {
    display: grid;
    gap: 26px;
}

.block-cards .cards-grid {
    display: grid;
    gap: 26px;
    margin-top: 26px;
}

.block-cards .editorial-card {
    border-radius: 20px;
    border: 1px solid var(--BLEU-CIEL);
    padding: 18px;
    font-family: Poppins, sans-serif;
}

.block-cards .editorial-card img {
    border-radius: 15px;
    width: 100%;
    aspect-ratio: 10/7;
    object-fit: cover;
}

.block-callout {
    border-radius: 20px;
    background: rgb(32 166 179 / 8%);
    padding: 26px;
    font-family: Poppins, sans-serif;
}

.block-image figcaption {
    font-family: Poppins, sans-serif;
    font-size: 14px;
    color: var(--GRIS_FONC);
}

.block-image img {
    border-radius: 20px;
}

.block-contact form {
    display: grid;
    gap: 16px;
    font-family: Poppins, sans-serif;
}

.block-contact input,
.block-contact textarea {
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid var(--GRIS);
    font: inherit;
    width: 100%;
}

.block-contact button {
    padding: 16px 24px;
    border-radius: 8px;
    border: 2px solid var(--BLEU-CIEL);
    background: var(--BLEU-CIEL);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    justify-self: start;
}

/* --------------------------------------- 14b. Blocs pages produits & CTA */

/* 86vh et non 100vh : le titre, le prix et le bouton doivent tenir AU-DESSUS du pli
   (défaut relevé par le client : « H1 trop bas »), et la tranche de section suivante
   qui dépasse sert d'invitation à défiler. L'image reste plein cadre. */
.product-hero {
    padding: 4px 3px;
    width: 100%;
    height: 86vh;
    min-height: 540px;
    position: relative;
}

.product-hero--compact {
    height: 420px;
}

.product-hero__bg {
    position: relative;
    margin: 0;
    border-radius: 11px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #35353d;
}

/* Voile de lisibilité. Le titre, la durée et le prix sont en blanc sur une photo qu'on ne
   choisit pas : villas blanches, ciel pâle, écume — ils s'y perdaient. Le dégradé assombrit le
   bas du visuel, là où le texte se trouve, et laisse le haut de la photo intact. */
.product-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        to top,
        rgb(9 9 20 / 76%) 0%,
        rgb(9 9 20 / 52%) 26%,
        rgb(9 9 20 / 18%) 50%,
        rgb(9 9 20 / 0%) 74%
    );
    pointer-events: none;
}

.product-hero__visual {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(90%);
}

.product-hero__content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 6vh;
    width: calc(100% - 6px);
    padding: 0 15px;
}

.product-hero h1 {
    margin: 0 auto;
    color: #fff;
    text-align: center;
    font-family: Poppins, sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 46.619px;
    max-width: 971px;
    text-wrap: balance;
    /* Filet de sécurité par-dessus le voile, pour les photos très claires. */
    text-shadow: 0 2px 16px rgb(9 9 20 / 35%);
}

.product-hero__summary {
    margin: 70px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.product-hero__summary p {
    margin: 0;
    color: #fff;
    text-align: center;
    font-family: "Open Sans", sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 23.531px;
    text-shadow: 0 1px 12px rgb(9 9 20 / 30%);
}

.product-hero__cta {
    white-space: nowrap;
}

/* ------------------------------------------------- 14c. Fiche produit fidèle à la source */

.trip-overview {
    display: flex;
    flex-direction: column;
    gap: 42px;
    padding: 25px 15px;
}

/* Texte rédactionnel de fin de fiche, SOUS le formulaire de réservation.
   Le filet le détache de la réservation : ce qui suit n'est plus une étape de l'achat, c'est le
   récit de la sortie. Et une mesure de lecture bornée — une ligne de 1 280 px n'est pas un
   paragraphe, c'est un exercice de repérage : l'œil perd le début de la ligne suivante. */
.product-seo {
    padding: 30px 15px 10px;
    border-top: 1px solid var(--GRIS);
}

.product-seo .product-description {
    max-width: 54rem;
}

.product-description .block-richtext,
.product-attributes .block-highlights,
.product-detail-layout .block {
    width: 100%;
    margin-inline: 0;
}

.product-description {
    padding: 0 10px;
    color: var(--Base-02);
    font-family: Poppins, sans-serif;
}

.product-description h1,
.product-description h2,
.product-description h3,
.product-description h4,
.product-description h5,
.product-description h6 {
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: -2px;
}

.product-description p {
    margin: 25px 0 0 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}

.product-description .block-richtext p span {
    font-weight: 400;
}

.product-attributes {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.product-detail-layout {
    display: grid;
    gap: 36px;
    padding: 20px;
}

.product-detail-layout__summary {
    min-width: 0;
}

.product-detail-layout__summary > * + * {
    margin-top: 30px;
}

.product-detail-layout__title {
    display: none;
}

.product-detail-layout__title + * {
    margin-top: 0;
}

.product-detail-layout__summary .block-key-info {
    border: 0;
    border-radius: 0;
    padding: 0 14px;
    background: transparent;
}

.product-detail-layout__summary .key-info__title {
    margin: 0;
    font-family: "Blambot Casual", serif;
}

.product-detail-layout__summary .block-key-info + .block-booking {
    margin-top: 42px;
}

.product-detail-layout__gallery .block-gallery {
    position: relative;
}

.product-detail-layout__gallery .gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

/* Vignettes : à 85 px de côté, le cadre de la grande image (15 px de marge, 20 px de rayon)
   mangeait la photo et empilait des bords collés. Marge et rayon suivent donc la taille, et la
   bordure des vignettes est adoucie — dix-huit anneaux cyan pleins feraient un damier. */
.product-detail-layout__gallery .gallery__item {
    padding: 5px;
    border-radius: 12px;
    border-color: rgb(32 166 179 / 45%);
}

.product-detail-layout__gallery .gallery__item img {
    border-radius: 8px;
}

.product-detail-layout__gallery .gallery__item:hover {
    border-color: var(--BLEU-CIEL);
}

/* Photo principale en 4/3. Le portrait très étroit repris du site d'origine (291 × 457, puis
   432 × 982 sur grand écran) recadrait les photos de bateau en une bande verticale : on y voyait
   surtout de l'eau. Un cadre paysage montre enfin la scène. */
.product-detail-layout__gallery .gallery__item:first-of-type {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
    padding: 10px;
    border-radius: 18px;
    border-color: var(--BLEU-CIEL);
    /* Respiration avant la grille de vignettes : la photo principale n'est pas une vignette. */
    margin-bottom: 6px;
}

/* Au-delà de neuf photos, la colonne devenait un mur de vignettes minuscules (dix-neuf ici, sur
   cinq rangées). On en montre huit ; la neuvième annonce le reste et la visionneuse — flèches,
   Échap, compteur — les parcourt toutes. */
.product-detail-layout__gallery .gallery__item:nth-of-type(n+10) {
    display: none;
}

.product-detail-layout__gallery .gallery__item[data-more] {
    position: relative;
}

.product-detail-layout__gallery .gallery__item[data-more]::after {
    content: "+" attr(data-more);
    position: absolute;
    /* Aligné sur la photo, pas sur le cadre : la marge intérieure reste blanche. */
    inset: 5px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(9 9 20 / 55%);
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 600;
}

.product-detail-layout__gallery .gallery__item[data-more]:hover::after {
    background: rgb(9 9 20 / 40%);
}

.product-detail-layout__gallery .gallery__item:first-of-type img {
    border-radius: 12px;
}

/* ---------------------------------------------------------- 14d. Page contact */

.contact-page .hero--big-text .hero__col:first-child {
    max-width: none;
}

.contact-page .hero--big-text p {
    font-size: 24px;
    line-height: 1.1;
}

/* La page reprenait au pixel près la mise en page du site remplacé : hauteurs minimales de 838 et
   965 px, formulaire figé à 310 px de large sur mobile, 133 px de vide avant le bouton, et une
   colonne de gauche qui ne portait que le titre. Tout cela est remplacé par une grille fluide où
   la colonne de gauche porte enfin les moyens de contact. */

.contact-layout {
    padding: 48px 20px 56px 20px;
    display: grid;
    gap: 32px;
}

.contact-layout__aside {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-layout .heading4 {
    margin: 0;
    color: var(--BLEU_FONC);
    font-family: Inter, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
    text-wrap: balance;
}

.contact-layout .block-contact {
    width: 100%;
    margin: 0;
    border: 1px solid #E3E8EC;
    border-radius: 20px;
    background: #fff;
    padding: 24px 20px;
    box-shadow: 0 18px 40px rgb(31 51 93 / 6%);
}

.contact-layout .contact-form {
    font-family: Inter, sans-serif;
}

.contact-form__intro {
    margin: 0 0 20px 0;
    color: var(--GRIS_FONC);
    font-size: 15px;
    line-height: 24px;
}

/* --- Moyens de contact directs (colonne de gauche) --- */

.contact-channels {
    border-radius: 20px;
    background: rgb(32 166 179 / 7%);
    padding: 24px 22px;
}

.contact-channels__title {
    margin: 0;
    color: var(--Base-02);
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.contact-channels__list {
    list-style: none;
    margin: 18px 0 0 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.contact-channels__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.contact-channels__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-channels__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.contact-channels__label {
    color: var(--GRIS_FONC);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
}

.contact-channels__value {
    color: var(--BLEU_FONC);
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.contact-channels__value:hover {
    color: var(--BLEU-CIEL);
    text-decoration: underline;
}

.contact-channels__value--plain {
    font-weight: 500;
}

.contact-layout .form__container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px 22px;
}

.contact-layout .form__group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px 22px;
}

.contact-layout .form__label {
    margin: 0;
    color: #344054;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

/* Les valeurs saisies étaient en gras (700) comme les intitulés : on ne distinguait plus
   l'étiquette de la réponse. */
.contact-layout .form__input-text,
.contact-layout .form__input-textarea {
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    background: #fff;
    color: var(--Base-02);
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px;
    transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out;
}

.contact-layout .form__input-text::placeholder,
.contact-layout .form__input-textarea::placeholder {
    color: #98A2B3;
}

.contact-layout .form__input-text:focus,
.contact-layout .form__input-textarea:focus {
    outline: none;
    border-color: var(--BLEU-CIEL);
    box-shadow: 0 0 0 3px rgb(32 166 179 / 18%);
}

.contact-layout .form__input-text[aria-invalid="true"],
.contact-layout .form__input-textarea[aria-invalid="true"] {
    border-color: var(--ORANGE);
}

.contact-layout .form__input-text {
    height: 48px;
}

.contact-layout .form__input-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Sujet : des pastilles plutôt qu'une colonne de boutons radio. Le radio reste sous chacune —
   navigation clavier et aides techniques inchangées. */
.contact-layout .form__group--subjects {
    display: block;
}

.contact-layout .form__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.contact-layout .form__group--message .form__label {
    grid-column: 1 / -1;
}

.contact-layout .form__checkbox-container {
    display: inline-flex;
    margin: 0;
    cursor: pointer;
}

.contact-layout .form__input-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.contact-layout .form__checkbox-container > span {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    color: #344054;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    transition: background-color 0.18s ease-out, border-color 0.18s ease-out, color 0.18s ease-out;
}

.contact-layout .form__checkbox-container:hover > span {
    border-color: var(--BLEU-CIEL);
    color: var(--BLEU-CIEL);
}

.contact-layout .form__input-checkbox:checked + span {
    border-color: var(--BLEU-CIEL);
    background: var(--BLEU-CIEL);
    color: #fff;
    font-weight: 600;
}

.contact-layout .form__input-checkbox:focus-visible + span {
    outline: 3px solid var(--BLEU-CIEL);
    outline-offset: 2px;
}

.contact-layout .form__cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 26px;
}

.contact-layout .form__cta .button {
    text-align: center;
}

/* Consentement implicite, mais écrit : le visiteur voit à quoi il s'engage en envoyant. */
.contact-form__consent {
    margin: 0;
    color: var(--GRIS_FONC);
    font-size: 12.5px;
    line-height: 19px;
    text-wrap: pretty;
}

.product-hero__meta {
    font-family: Poppins, sans-serif;
    font-weight: 600;
    padding: 6px 18px;
    border-radius: 9px;
    background: rgb(255 255 255 / 16%);
    backdrop-filter: blur(4px);
}

/* Checklist (équipements) */

.checklist {
    display: grid;
    gap: 12px;
}

.checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.checklist__item p {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--Base-02);
}

.checklist__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
}

.checklist__icon--checked {
    background-image: url("images/icons/green-check.svg");
}

.checklist__icon--unchecked {
    background-image: url("images/icons/blue-minus-circle.svg");
    filter: grayscale(1) opacity(0.55);
}

.block-features {
    border: 1px solid var(--GRIS);
    border-radius: 20px;
    padding: 26px;
}

.features-heading {
    margin: 0 0 20px 0;
    font-family: Poppins, sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -1px;
}

/* Liste de bateaux (location) */

.custom-product-loop {
    display: flex;
    flex-direction: column;
    gap: 34px;
    padding: 0 14px;
}

.custom-product-loop__item {
    display: grid;
    gap: 22px;
    border: 1px solid var(--BLEU-CIEL);
    border-radius: 20px;
    padding: 22px;
    text-decoration: none;
    color: var(--Base-02);
}

.custom-product-loop__item .thumbnail {
    overflow: hidden;
    border-radius: 15px;
    background: var(--BLEU-CIEL);
    line-height: 0;
}

.custom-product-loop__item .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 10/7;
    transition: 0.6s scale;
}

.custom-product-loop__item:hover .thumbnail img {
    scale: 1.05;
}

.custom-product-loop__container .title {
    font-family: Poppins, sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1px;
}

.custom-product-loop__item:hover .title {
    text-decoration: underline;
}

.custom-product-loop__container .description {
    margin: 14px 0 0 0;
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.custom-product-loop__container .price {
    margin: 14px 0 0 0;
    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--BLEU_FONC);
}

.custom-product-loop__container .button {
    display: inline-block;
    margin: 18px 0 0 0;
}

.custom-product-loop__container .product-attributes {
    margin-top: 22px;
}

/* Bandeau CTA réservation */

.cta-banner {
    margin: 0;
    border-radius: 12px;
    background: var(--BLEU-CIEL);
    padding: 32px 26px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: flex-start;
}

.cta-banner__heading {
    margin: 0;
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1px;
}

.cta-banner__text {
    margin: 8px 0 0 0;
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 16px;
    line-height: 24px;
}

.cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.button--whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25d366;
    border-color: #25d366;
    color: #fff;
}

.button--whatsapp:hover {
    background: #1eb855;
    border-color: #1eb855;
    color: #fff;
}

.cta-banner__phone {
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
}

.cta-banner__phone:hover {
    text-decoration: underline;
}

/* Barre de réassurance */

.trust-bar {
    display: grid;
    gap: 18px;
    padding: 26px 20px;
    border-radius: 20px;
    background: rgb(32 166 179 / 7%);
}

.trust-bar__item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.trust-bar__item .icon {
    flex-shrink: 0;
}

.trust-bar__item p {
    margin: 0;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    line-height: 22px;
    color: var(--BLEU_FONC);
}

.trust-bar__item strong {
    display: block;
    font-weight: 600;
}

/* ------------------------------------------ 14c. Barre mobile de réservation */

.mobile-book-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 210;
    display: flex;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) 12px;
    background: #fff;
    box-shadow: 0 -6px 24px 0 rgb(9 9 20 / 14%);
    transform: translateY(110%);
    transition: transform 0.35s ease-out;
}

.mobile-book-bar--visible {
    transform: translateY(0);
}

.mobile-book-bar > a {
    flex: 1;
    text-align: center;
    padding: 13px 10px;
}

.mobile-book-bar .button--whatsapp {
    display: inline-flex;
    justify-content: center;
    flex: 0 0 auto;
}

@media (min-width: 992px) {
    .mobile-book-bar {
        display: none;
    }
}

/* La barre visible remonte le bouton WhatsApp flottant : les deux vivent en bas d'écran. */
@media (max-width: 991.999px) {
    body.has-book-bar .whatsapp-cta {
        bottom: 118px;
        transition: bottom 0.35s ease-out;
    }
}

/* 404 : les meilleures ventes plutôt qu'une impasse. */
.error-suggestions {
    margin-top: 34px;
}

.error-suggestions__title {
    color: var(--GRIS_FONC);
    margin: 0 0 10px;
}

.error-suggestions__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.error-suggestions__list a {
    color: var(--BLEU-CIEL);
    font-weight: 600;
    text-decoration: none;
}

.error-suggestions__list a:hover {
    text-decoration: underline;
}

/* --------------------------------- 14d. Points forts, infos clés, galerie */

/* Cartes « points forts » — style « ice » des fiches excursion et bateau. */

.block-highlights {
    display: block;
}

.ice-cards {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.ice-card {
    padding: 23.92px 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    border-radius: 12px;
    border: 1px solid var(--BLEU-CIEL);
    background: transparent;
}

.ice-card__title {
    color: var(--ROSE_LOGO);
    font-family: "Blambot Casual", serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.ice-card__title .icon {
    flex-shrink: 0;
}

.ice-card p {
    margin: 0;
    color: var(--Base-02);
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
}

/* Icônes complémentaires (points forts des fiches). */

.icon--blue-fish { background-image: url("images/icons/blue-fish.svg"); }
.icon--blue-music { background-image: url("images/icons/blue-music.svg"); }
.icon--blue-camera { background-image: url("images/icons/blue-camera.svg"); }

/* Cartes « points forts » — style « events » des pages événementielles. */

.container5 {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

.heading5 {
    display: flex;
    padding: 0 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
}

.heading5 h2 {
    margin: 0;
    color: var(--Base-02);
    font-family: Poppins, sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: -1px;
}

.heading5 p {
    margin: 0;
    color: var(--Base-02);
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    max-width: 993px;
}

.container6 {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 25px;
    flex-wrap: wrap;
    padding: 0 30px;
}

.events-card {
    display: flex;
    flex: 1 1 calc(100% - 25px);
    max-width: 100%;
    padding: 20px 15px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border-radius: 12px;
    border: 1px solid var(--BLEU-CIEL);
    background: #fff;
    transition: background-color 0.25s ease;
}

.events-card h3 {
    margin: 0;
    color: #101828;
    text-align: center;
    font-family: Poppins, sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
}

.events-card p {
    margin: 0;
    color: #667085;
    text-align: center;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}

.events-card img {
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    padding: 8px;
    flex-shrink: 0;
    border-radius: 28px;
    border: 8px solid rgb(228 75 128 / 7%);
    background: rgb(228 75 128 / 20%);
}

.events-card:hover {
    background: var(--ROSE_LOGO);
}

.events-card:hover h3,
.events-card:hover p {
    color: #fff;
}

.events-card:hover img {
    background: #fff;
    border-color: rgb(228 75 128 / 20%);
}

/* Barre d'ancres collante. */

.tabs-container {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    gap: 15px;
    margin: 25px auto;
    padding: 15px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #fff;
    box-shadow: 0 0 10px 0 var(--BLEU-CIEL);
    position: sticky;
    top: 5px;
    z-index: 20;
}

.tabs-link {
    position: relative;
    color: var(--Base-02);
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 100%;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.tabs-link:hover,
.tabs-link:focus-visible {
    opacity: 1;
}

.tabs-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background: var(--BLEU-CIEL);
    transition: width 0.3s ease;
}

.tabs-link:hover::after,
.tabs-link:focus-visible::after {
    width: 100%;
}

/* Informations clés. */

.block-key-info {
    border: 1px solid var(--GRIS);
    border-radius: 20px;
    padding: 26px;
    background: #fff;
}

.key-info__title {
    margin: 0 0 16px 0;
    color: var(--ROSE_LOGO);
    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-style: italic;
    font-weight: 700;
    line-height: 30px;
}

.key-info__body p,
.key-info__body li {
    color: var(--Base-02);
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.key-info__body p {
    margin: 0 0 12px 0;
}

.key-info__body ul {
    margin: 0;
    padding-left: 20px;
}

.key-info__body :last-child {
    margin-bottom: 0;
}

/* Galerie photo (grille + agrandissement CSS). */

.gallery__label {
    margin: 0 0 14px 0;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: var(--Base-02);
}

.gallery {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
}

.gallery__item {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--BLEU-CIEL);
    padding: 6px;
    background: #fff;
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 15px;
    transition: transform 0.35s ease;
}

.gallery__item:hover img,
.gallery__item:focus-visible img {
    transform: scale(1.06);
}

.gallery__lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgb(9 9 20 / 88%);
}

.gallery__lightbox:target {
    display: flex;
}

/* Cliquer à côté de la photo ferme. */
.gallery__backdrop {
    position: absolute;
    inset: 0;
    cursor: zoom-out;
}

.gallery__lightbox img {
    position: relative;
    max-width: 100%;
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
}

/* --- Commandes de la visionneuse --- */

.gallery__close,
.gallery__nav {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 30%);
    background: rgb(9 9 20 / 55%);
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(4px);
    transition: background-color 0.18s ease-out, border-color 0.18s ease-out;
}

.gallery__close:hover,
.gallery__nav:hover {
    background: var(--BLEU-CIEL);
    border-color: var(--BLEU-CIEL);
    color: #fff;
}

.gallery__close {
    top: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
}

/* Zone de clic de 3 rem : atteignable au pouce, sur une photo qui occupe tout l'écran. */
.gallery__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
}

.gallery__nav--prev {
    left: 0.75rem;
}

.gallery__nav--next {
    right: 0.75rem;
}

.gallery__counter {
    position: absolute;
    z-index: 1;
    bottom: 1.15rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: rgb(9 9 20 / 55%);
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    backdrop-filter: blur(4px);
}

@media (min-width: 992px) {
    .gallery__close {
        top: 1.75rem;
        right: 1.75rem;
    }

    .gallery__nav--prev {
        left: 1.75rem;
    }

    .gallery__nav--next {
        right: 1.75rem;
    }
}

/* Fil d'ariane posé sur le hero produit. */

/* `--header-bottom` est mesuré par theme.js (bas réel de l'en-tête flottant) : à 96px
   fixes, le fil d'ariane passait DERRIÈRE le menu dès que celui-ci s'étalait sur deux
   lignes (défaut relevé par le client). Le repli 111px couvre l'en-tête compact. */
.breadcrumb--hero {
    position: absolute;
    top: calc(var(--header-bottom, 111px) + 14px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 30px);
    z-index: 2;
}

.breadcrumb--hero ol {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb--hero li {
    white-space: nowrap;
}

.breadcrumb--hero li + li::before {
    content: "/";
    padding: 0 8px;
}

.breadcrumb--hero,
.breadcrumb--hero a,
.breadcrumb--hero a:visited,
.breadcrumb--hero span {
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
}

.breadcrumb--hero a:hover {
    text-decoration: underline;
}

/* Bouton rond de défilement du hero. */

.hero__cta {
    display: block;
    margin: 11px auto 0 auto;
    font-size: 0;
    line-height: 0;
    width: 60px;
    height: 60px;
    background-image: url("images/icons/white-arrow-circle-down.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60px 60px;
}

/* Prix affiché à côté de la durée dans le hero produit. */

.product-hero__price {
    font-family: Poppins, sans-serif;
    font-weight: 600;
}

.home .about + .container1 {
    margin-top: 14px;
}

/* ---------------------------------------------------- 14e. Événements de groupe */

.group-events-hero {
    box-sizing: border-box;
    margin: 23px 3px 0;
    position: relative;
    border-radius: 13px;
    overflow: hidden;
}

.group-events-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--BLEU-CIEL);
}

.group-events-hero__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
}

.group-events-hero__row {
    position: relative;
    width: 100%;
    height: calc(100vh - 23px);
    margin: auto;
    padding: 0 26px 23px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 34px;
}

.group-events-hero h1,
.group-events-hero p {
    margin: 0;
    color: #fff;
    text-align: center;
}

.group-events-hero h1 {
    font-family: Inter, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 129.497%;
}

.group-events-hero p {
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 110%;
}

.group-events-page .about {
    padding: 33px 25px 25px;
    margin: 50px auto;
    align-items: stretch;
}

.group-events-page .about > *:nth-child(1) { flex: 0 0 60%; }
.group-events-page .about > *:nth-child(2) { flex: 0 0 30%; }

.group-events-page .about::before {
    display: none;
}

.group-events-page .about__visual {
    max-width: 532px;
}

.group-events-page .about__visual img {
    max-width: 532px;
    aspect-ratio: 372 / 504;
    object-fit: cover;
}

.group-events-page .heading5 {
    gap: 32px;
}

.group-events-page .heading5 h2 {
    font-size: 42px;
    line-height: 48px;
    letter-spacing: 0;
}

.group-events-page > .container1 .link {
    display: none;
}

.group-events-page > .container1 .heading1 {
    font-family: Poppins, sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: -2px;
}

.group-events-page > .products {
    width: calc(100% - 60px);
    margin-inline: 30px;
}

/* ----------------------------------------------------- 15. Responsive */

@media (max-height: 843.999px) and (max-width: 992px) {
    .hero .card {
        display: none;
    }
}

@media (max-width: 991.999px) {
    .is-landing .content-flow--flush > * + * {
        margin-top: 23px;
    }

    /* Colonne unique : les moyens de contact directs arrivent avant le formulaire, comme dans le
       HTML — appeler ou écrire sur WhatsApp est le chemin le plus court, remplir un formulaire au
       pouce le plus long. */
    .contact-layout {
        align-content: start;
    }

    .home .about__visual img {
        aspect-ratio: 340 / 342.5;
        object-fit: cover;
    }

    .group-events-page .about {
        padding-bottom: 27.5px;
    }

    .group-events-page > .container1 {
        height: 154.11px;
        padding: 0 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .group-events-page > .products {
        padding: 0 14px;
    }
}

@media (max-width: 767.999px) {
    .product-hero__content {
        padding-inline: 0;
    }

    .product-detail-layout {
        row-gap: 0;
    }

}

@media (min-width: 768px) {
    .events-card {
        flex: 1 1 calc(50% - 25px);
        max-width: calc(50% - 25px);
    }
}

@media (min-width: 992px) {
    .top-banner {
        display: flex;
    }

    .header {
        top: 82px;
        width: 92.361vw;
        border-radius: 16px;
        padding: 0 10px;
    }

    /* Des 992 px le bloc langue + Contact rejoint la barre (theme.js) : en ligne,
       aux cotes du burger tant que la navigation complete n'est pas affichee. */
    .header__toggle {
        margin-left: auto;
        margin-right: 18px;
    }

    .header__cta {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 15px;
        padding: 5px 0;
    }

    .lang-switch__list {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 100%;
        background: #fff;
        border-radius: 9px;
        box-shadow: 0 9px 40px 0 rgb(0 0 0 / 10%);
        padding: 8px 12px;
        z-index: 95;
    }

    .hero {
        margin: 20px 28px 0 28px;
    }

    .hero__row {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        padding: 0 56px 29px 32px;
        height: calc(100vh - 62px);
    }

    .group-events-hero {
        margin: 17px 28px 0;
    }

    .group-events-hero__row {
        width: 75%;
        height: calc(100vh - 62px);
        padding: 0 56px 29px 32px;
        gap: 54px;
    }

    .group-events-hero h1 {
        font-size: 38px;
        line-height: 62%;
    }

    .group-events-hero p {
        font-size: 22px;
        line-height: 110%;
    }

    .hero__col {
        width: auto;
    }

    .hero h1 {
        font-size: 64px;
    }

    .hero p {
        margin-top: 10px;
        font-size: 22px;
        line-height: 24.2px;
    }

    .hero .button {
        margin-top: 10px;
    }

    .card--2col {
        padding: 12px 23px;
    }

    .about {
        padding: 100px;
        flex-direction: row;
        align-items: flex-end;
    }

    .group-events-page .about {
        padding: 50px 100px 52.5px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .group-events-page .about--inverse {
        flex-direction: row-reverse;
    }

    .group-events-page .about .list {
        flex-direction: row;
        align-items: flex-start;
    }

    .group-events-page .heading5 h2 {
        line-height: 28px;
    }

    .group-events-page > .container1 {
        box-sizing: border-box;
        height: 116.11px;
        padding: 0 30px 25px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .about::before {
        transform: none;
    }

    .about__pink {
        font-size: 24px;
    }

    .about .heading1 {
        margin-top: 11px;
    }

    .heading1 {
        font-size: 48px;
        font-weight: 700;
        line-height: 62px;
    }

    .products.columns-4 {
        padding: 0 90px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto;
        column-gap: 32px;
        row-gap: 42px;
    }

    .products .product {
        padding: 30px 25px;
    }

    .products .product .thumbnail img {
        aspect-ratio: 5/3;
    }

    .products .product .description {
        /* Hauteur de carte homogène : 4 lignes maxi, ellipse propre. `max-height` pour la même
           raison que le titre — sur les grandes cartes, la photo gonfle les rangées, le bloc est
           étiré et la cinquième ligne reparaissait sous l'ellipse. */
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        max-height: 4lh;
        overflow: hidden;
        margin: 18px 0 0 0;
    }

    .products .product .min-booking {
        justify-self: flex-start;
    }


    .products .product .min-booking,
    .products .product .price {
        margin-top: 20px;
    }

    .products .product .quick-preview {
        align-self: end;
    }

    .products--featured .product:nth-child(1) { grid-column: span 2; grid-row: 1; }
    .products--featured .product:nth-child(2) { grid-column: span 1; grid-row: 1; }
    .products--featured .product:nth-child(2) .description { display: none; }
    .products--featured .product:nth-child(3) { grid-column: span 1; grid-row: 2; }
    .products--featured .product:nth-child(3) .description { display: none; }
    .products--featured .product:nth-child(4) { grid-column: span 2; grid-row: 2; }

    /* Les deux grandes cartes réservent la droite à la photo : sans colonne « prix », durée et
       tarif se retrouvaient empilés dans la même cellule, donc superposés (68 px de recouvrement
       sur « 1 day(s) minimum » / « From $3,900/Day »). Côte à côte ils ne tiennent pas non plus —
       la colonne de texte ne fait qu'un tiers de la carte — et le prix se cassait entre le montant
       et son unité. Ils occupent donc chacun leur rangée. */
    .products--featured .product:nth-child(1),
    .products--featured .product:nth-child(4) {
        grid-template-areas:
            "title thumbnail"
            "description thumbnail"
            "minbooking thumbnail"
            "price thumbnail"
            "quickpreview thumbnail";
        grid-template-columns: 1fr 57.627%;
        grid-template-rows: min-content min-content min-content min-content auto;
        column-gap: 17px;
    }

    .products--featured .product:nth-child(1) .price,
    .products--featured .product:nth-child(4) .price {
        justify-self: flex-start;
        margin-top: 0;
        padding-left: 0;
    }

    .products .product .description {
    display: none;
    margin: 0 0 14px 0;
    grid-area: description;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    /* Hauteur homogène des cartes quelles que soient les longueurs de texte. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .products--featured .product:nth-child(1) .thumbnail,
    .products--featured .product:nth-child(4) .thumbnail {
        align-self: start;
    }

    .products--featured .product:nth-child(1) .thumbnail img,
    .products--featured .product:nth-child(4) .thumbnail img {
        aspect-ratio: 1/1;
    }

    .products--featured .product:nth-child(1) .title,
    .products--featured .product:nth-child(4) .title {
        margin-top: 0;
    }

    .product-hero h1 {
        font-size: 64px;
        line-height: 82.878px;
    }

    .product-hero__content {
        width: calc(100% - 58px);
        bottom: 9vh;
    }

    .product-hero {
        padding: 15px 29px;
    }

    .product-hero__bg {
        border-radius: 12px;
    }

    .product-hero__summary {
        margin-top: 44.36px;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }

    .product-hero__summary p {
        font-size: 32px;
        line-height: 31.375px;
    }

    .trip-overview {
        padding: 25px 79px;
        flex-direction: row;
        align-items: flex-start;
        gap: 100px;
    }

    .product-seo {
        padding: 50px 79px 20px;
    }

    .trip-overview > * {
        flex: 1;
        min-width: 0;
    }

    .product-detail-layout {
        padding: 20px 47.5px;
        grid-template-columns: 0.5fr 1fr;
        align-items: start;
        column-gap: 49px;
    }

    .product-detail-layout__summary .block-key-info + .block-booking {
        margin-top: 50px;
    }

    .product-detail-layout__summary .block-key-info {
        padding: 0;
    }

    .contact-page .hero--big-text .hero__row {
        padding: 0 206px 124.5px;
    }

    .contact-page .hero--big-text .hero__col:first-child {
        flex: 1 1 auto;
        width: auto;
    }

    .contact-page .hero--big-text .hero__col:last-child {
        flex: 0 0 0;
        width: 0;
    }

    .contact-page .hero--big-text p {
        margin-top: 10px;
        font-size: 28px;
        line-height: 30.8px;
    }

    .contact-layout {
        padding: 88px 40px 96px 40px;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        column-gap: 64px;
        align-items: start;
        max-width: 1280px;
        margin-inline: auto;
    }

    .contact-layout .heading4 {
        font-size: 52px;
        line-height: 1.05;
    }

    .contact-layout .block-contact {
        padding: 32px;
    }

    .contact-layout .form__cta {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 18px;
    }

    /* Le bouton reprend sa largeur naturelle, la mention de consentement se range à côté. */
    .contact-layout .form__cta .button {
        flex: 0 0 auto;
        min-width: 200px;
    }

    .contact-layout .contact-form__consent {
        flex: 1 1 220px;
    }

    /* Le formulaire n'a plus de hauteur imposée (653,5 px) ni de colonnes de sujet figées à
       128,11 px : ces valeurs venaient du calque du site remplacé et laissaient un vide sous les
       pastilles dès que le libellé changeait de langue. */
    .contact-layout .form__container {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .contact-layout .form__group--span2-2cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-layout .form__group--span2-2cols .form__label {
        grid-column: 1 / -1;
    }

    .checklist {
        grid-template-columns: repeat(2, 1fr);
    }

    .custom-product-loop {
        padding: 0 90px;
    }

    .custom-product-loop__item {
        grid-template-columns: 42% 1fr;
        align-items: start;
        padding: 26px;
    }

    .cta-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 40px 48px;
    }

    .trust-bar {
        grid-template-columns: repeat(4, 1fr);
        padding: 30px 40px;
    }

    .block-accordion {
        padding: 120px 80px 124px 80px;
    }

    .block-accordion .accordion-kicker {
        font-size: 21px;
        line-height: 28px;
    }

    .block-accordion .accordion-head h2 {
        margin-top: 10px;
        font-size: 48px;
        line-height: 62px;
    }

    .block-accordion .accordion-list {
        margin: 44px auto 0 auto;
        max-width: 880px;
        gap: 14px;
        padding: 0;
    }

    .block-accordion .accordion-item {
        border-radius: 16px;
    }

    .block-accordion .accordion-item[open] {
        box-shadow: 0 14px 34px rgb(31 51 93 / 10%);
    }

    .block-accordion .accordion-item > summary {
        font-size: 18px;
        line-height: 28px;
        gap: 18px;
        padding: 19px 20px 19px 24px;
    }

    .block-accordion .accordion-icon {
        width: 34px;
        height: 34px;
    }

    .block-accordion .accordion-panel {
        /* Colonne de texte plus étroite que la question : la réponse s'arrête avant la
           pastille, elle ne file pas sous elle. */
        padding: 0 64px 24px 24px;
        font-size: 16px;
        line-height: 26px;
    }

    .faq-contact {
        margin: 36px auto 0 auto;
        max-width: 880px;
        border-radius: 20px;
        padding: 26px 28px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        text-align: left;
    }

    .faq-contact__heading {
        font-size: 17px;
        line-height: 24px;
    }

    .faq-contact__text {
        font-size: 14.5px;
        line-height: 22px;
    }

    .faq-contact__actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 18px;
        /* Le bouton et le numéro restent sur une ligne : c'est le texte de gauche qui cède. */
        flex-shrink: 0;
    }

    .faq-contact__copy {
        min-width: 0;
    }

    .newsletter {
        width: calc(100% - 96px);
        margin: 48px auto -80px auto;
        padding: 42px 52px;
        border-radius: 16px;
    }

    .newsletter__inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 40px;
    }

    .newsletter__head {
        text-align: left;
        max-width: 400px;
    }

    .newsletter__title {
        font-size: 24px;
        line-height: 30px;
    }

    .newsletter__mention {
        font-size: 13px;
        line-height: 19px;
    }

    .newsletter__form {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .newsletter__form input[type="text"] {
        width: 170px;
        padding: 15px 18px;
    }

    .newsletter__form input[type="email"] {
        width: 240px;
        padding: 15px 18px;
    }

    .newsletter__form input[type="submit"] {
        width: auto;
    }

    .newsletter__consent {
        flex: 1 0 100%;
        justify-content: center;
    }

    .site-footer {
        padding: 64px 48px 12px 48px;
    }

    .newsletter + .site-footer {
        padding-top: 136px;
    }

    .site-footer::before {
        background-size: 193px 433px;
        background-position: calc(100% - 90px) calc(100% + 50px);
    }

    .footer__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 40px;
    }

    .footer__brand {
        padding-bottom: 0;
    }

    .footer__group,
    .footer__group:last-of-type {
        border: none;
    }

    /* En desktop les groupes sont maintenus ouverts par theme.js : l'entete
       redevient un simple titre. */
    .footer__group-summary {
        padding: 0 0 16px 0;
        pointer-events: none;
        cursor: default;
    }

    .footer__chevron {
        display: none;
    }

    .navs {
        padding: 0;
    }

    .navs__menu {
        gap: 13px;
    }

    .navs__menu > li > a {
        padding: 0;
        font-size: 14px;
    }

    .footer__contact-col {
        padding-top: 0;
    }

    .footer__actions {
        display: none;
    }

    .footer__chip {
        display: inline-flex;
        margin-top: 6px;
    }

    .footer-bar {
        padding: 19px 48px;
    }

    .footer-bar__inner {
        flex-direction: row;
        justify-content: space-between;
        gap: 24px;
    }

    .footer-bar__copy {
        font-size: 13px;
        line-height: 20px;
        text-align: left;
    }

    .page-header,
    .news-index,
    .search-page,
    .error-page,
    .checkout,
    .news-single {
        padding-top: 220px;
    }

    .news-list,
    .block-cards .cards-grid,
    .block-columns .columns-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .container5 {
        padding: 0 100px;
        gap: 64px;
    }

    .events-card {
        flex: 1 1 calc(33.333% - 25px);
        max-width: calc(33.333% - 25px);
    }

    /* Une carte seule sur sa dernière rangée de trois occupe toute la largeur. */
    .events-card:last-child:nth-child(3n + 1) {
        flex-basis: 100%;
        max-width: 100%;
    }

    .tabs-container {
        width: max-content;
        flex-direction: row;
        margin: 50px auto;
        gap: 50px;
    }

    .gallery--cols-3 { grid-template-columns: repeat(3, 1fr); }
    .gallery--cols-4 { grid-template-columns: repeat(4, 1fr); }

    .breadcrumb--hero {
        top: 162px;
        width: calc(100% - 58px);
        padding-left: 90px;
    }

    .breadcrumb--hero,
    .breadcrumb--hero a,
    .breadcrumb--hero a:visited,
    .breadcrumb--hero span {
        font-size: 16px;
    }

    .hero__cta {
        position: absolute;
        margin-top: 0;
        left: 50%;
        transform: translateX(-50%);
        bottom: 20px;
    }

    .about--inverse {
        flex-direction: row-reverse;
    }
}

/* Les archives de la source masquaient toujours les extraits. Les cartes mises en avant de
   l'accueil conservent, elles, leurs descriptions longues. */
.products:not(.products--featured) .product .description {
    display: none;
}

.products-empty {
    width: 100%;
    margin: 0;
    padding: 0;
    color: #404040;
    background: #3d9cd2;
    font: 16px/24px Inter, sans-serif;
}

@media (min-width: 1200px) {

    /* Navigation complete a partir de 1200 px seulement : en dessous, les libelles
       FR/ES (menu de 739 px a lui seul en 16 px) ne tiennent pas avec le logo et le
       CTA — on garde le burger. Jusqu'a 1440 px : texte 14 px, gap 8 px, barre a
       96vw et selecteur de langue en drapeau seul. */
    .header {
        width: 96vw;
    }

    .header__toggle {
        display: none;
    }

    .header__navigation {
        position: static;
        width: auto;
        max-width: none;
        transform: translateX(0);
        padding: 0;
        display: block;
        box-shadow: none;
        border-radius: 0;
        max-height: none;
        overflow: visible;
    }

    .header__navigation > * {
        width: auto;
    }

    .menu {
        gap: 8px;
        flex-direction: row;
        align-items: center;
    }

    .menu .menu-item {
        height: 80px;
        display: flex;
        align-items: center;
    }

    .menu .menu-item > a {
        font-size: 14px;
    }

    .menu .menu-item.current-menu-item > a {
        transform: none;
    }

    .menu .menu-item:hover > .sub-menu,
    .menu .menu-item:focus-within > .sub-menu {
        display: flex;
    }

    .sub-menu {
        display: none;
        width: auto;
        margin-top: 0;
        flex-direction: column;
        position: absolute;
        top: 92px;
        left: 50%;
        transform: translateX(-50%);
        align-items: flex-start;
        border-radius: 14px;
        padding: 20px 15px;
        box-shadow: 0 9px 40px 0 rgb(0 0 0 / 10%);
        z-index: 95;
    }

    .sub-menu::before {
        position: absolute;
        top: -12px;
        left: 0;
        content: "";
        display: block;
        height: 12px;
        width: 100%;
    }

    .sub-menu .menu-item {
        padding: 0;
        width: 100%;
        height: max-content;
    }

    .sub-menu .menu-item > a {
        white-space: nowrap;
        width: 100%;
    }

    /* Drapeau seul, et largeur au contenu : la boite fixe de 150 px mangeait la
       marge du menu compact. Libelle et largeur reviennent a 1440 px. */
    .lang-switch {
        width: auto;
    }

    .lang-switch__toggle .lang-switch__native {
        display: none;
    }

    .newsletter {
        width: calc(100% - 270px);
    }

    .site-footer {
        padding-left: 135px;
        padding-right: 135px;
    }

    .footer-bar {
        padding-left: 135px;
        padding-right: 135px;
    }

    .ice-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(0, 1fr);
        gap: 25px;
    }

}

/* A partir de 1440 px la barre retrouve sa largeur et sa taille de texte de
   reference ; gap 12 px (21 px debordait entre 1300 et 1425 px avec les libelles
   FR/ES, mesures sur les trois locales). */
@media (min-width: 1440px) {
    .header {
        width: 92.361vw;
    }

    .menu {
        gap: 12px;
    }

    .menu .menu-item > a {
        font-size: 16px;
    }

    .header__cta {
        gap: 25px;
    }

    .lang-switch {
        width: 150px;
    }

    .lang-switch__toggle .lang-switch__native {
        display: inline;
    }
}

/* Espacement large réservé aux très grands écrans : les libellés FR/ES, plus longs
   que l'anglais, débordaient à 1440 px avec le gap d'origine. */
@media (min-width: 1600px) {
    .menu {
        gap: 35px;
    }
}

/* ------------------------------------------- 16. Accessibilité / print */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .header,
    .top-banner,
    .back_to_top,
    .whatsapp-cta,
    .newsletter,
    .hero__bg {
        display: none !important;
    }

    body {
        color: #000;
    }
}

/* ==========================================================================
   Bloc de réservation (plugin `reservations`, gabarit surchargé par le thème)
   ==========================================================================
   Les crochets `data-reservations-*` appartiennent au script du plugin : ce fichier ne stylise que
   des classes `booking__*` et `reservations-day/slot` (ces deux dernières sont posées par le script,
   qui ne connaît pas nos noms de blocs — d'où l'exception à la nomenclature). */

.block-booking {
    scroll-margin-top: 6rem; /* l'ancre #reservation ne doit pas passer sous l'en-tête collant */
}

.booking {
    background: #fff;
    border: 1px solid var(--GRIS);
    border-radius: 1rem;
    padding: clamp(1.25rem, 4vw, 2.25rem);
    box-shadow: 0 18px 40px -28px rgb(31 51 93 / 45%);
}

.booking__head {
    margin-bottom: 1.5rem;
}

.booking__title {
    color: var(--BLEU_FONC);
    margin: 0;
}

.booking__intro {
    color: var(--GRIS_FONC);
    margin: 0.5rem 0 0;
}

.booking__form {
    display: grid;
    gap: 1.25rem;
    max-width: 44rem;
}

/* Sur une fiche, le formulaire occupe exactement la colonne produit : le formulaire YITH du site
   remplacé n'avait ni carte intérieure, ni titre ajouté, ni largeur artificiellement bornée. */
.product-detail-layout__summary .booking {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.product-detail-layout__summary .booking__head {
    display: none;
}

.product-detail-layout__summary .booking__form {
    max-width: none;
}

.booking__field {
    display: grid;
    gap: 0.4rem;
}

/* Choix du bateau : mêmes cartes lisibles que le sélecteur YITH d'origine, mais avec de vrais
   boutons radio natifs. La sélection reste donc utilisable au clavier et sans JavaScript. */
.booking__boats {
    min-width: 0;
    margin: 0;
    padding: 2px 0;
    border: 0;
}

.booking__boats > .booking__label {
    display: block;
    margin: 11.2px 0 19.2px;
}

.booking-boats {
    display: grid;
    gap: 10px;
}

.booking-boat {
    position: relative;
    display: flex;
    min-height: 84.5px;
    padding: 15px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    color: #000;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.booking-boat:hover {
    color: #4e8ba2;
}

.booking-boat:has(.booking-boat__input:checked) {
    border-color: #00a7b7;
    color: #4e8ba2;
}

.booking-boat:has(.booking-boat__input:focus-visible) {
    outline: 3px solid rgb(0 167 183 / 25%);
    outline-offset: 2px;
}

.booking-boat:has(.booking-boat__input:checked) .booking-boat__media::before {
    content: "✓";
    position: absolute;
    z-index: 1;
    top: -5px;
    left: -5px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #00a7b7;
    color: #fff;
    font: 600 8px/16px Inter, sans-serif;
}

.booking-boat__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.booking-boat__media {
    position: relative;
    flex: 0 0 52.5px;
    width: 52.5px;
    height: 52.5px;
    margin-right: 12px;
    overflow: visible;
    border-radius: 4px;
    background: #eef6f8;
}

.booking-boat__media picture,
.booking-boat__media img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.booking-boat__media img {
    object-fit: cover;
}

.booking-boat__placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--BLEU-CIEL);
    font-size: 1.35rem;
}

.booking-boat__content {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    justify-content: center;
}

.booking-boat__name {
    font: 500 15px/22px Poppins, sans-serif;
}

.booking-boat__price {
    font: 500 12.75px/22px Poppins, sans-serif;
}

.booking__label {
    color: #000;
    font: 600 14px/22px Inter, sans-serif;
}

/* Étiquette réservée aux lecteurs d'écran : le champ natif garde un `label` associé même quand
   l'intitulé visible est porté par un `span` au-dessus du groupe. */
.booking__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.booking__input,
.booking__select {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--GRIS);
    border-radius: 0.5rem;
    background: #fff;
    color: var(--Base-02);
    font: inherit;
}

.booking__input:focus-visible,
.booking__select:focus-visible {
    outline: 3px solid var(--BLEU-CIEL);
    outline-offset: 1px;
}

/* Passagers : deux compteurs alignés, à la largeur de leur contenu. Ces cases n'accueillent
   qu'un chiffre — étirées sur toute la colonne, elles annonçaient une saisie libre qui n'existe
   pas, et déséquilibraient un formulaire par ailleurs compact. */
.booking__persons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}

.booking__field--count {
    gap: 0.4rem;
}

.booking-count {
    display: inline-flex;
    align-items: center;
    width: max-content;
    border: 1px solid var(--GRIS);
    border-radius: 999px;
    background: #fff;
}

/* L'anneau de focus est porté par le compteur entier : le champ et ses deux boutons forment un
   seul objet à l'écran, ils doivent se signaler comme un seul objet au clavier. */
.booking-count:has(:focus-visible) {
    border-color: var(--BLEU-CIEL);
    outline: 3px solid var(--BLEU-CIEL);
    outline-offset: 1px;
}

.booking-count .booking__input {
    width: 3.25rem;
    padding: 0.6rem 0.25rem;
    border: 0;
    border-radius: inherit;
    background: none;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.booking-count .booking__input:focus-visible,
.booking-count__button:focus-visible {
    outline: 0;
}

/* Les flèches natives ne s'effacent QUE si les boutons ont bien été posés par `theme.js` : sans
   JavaScript, elles restent le seul moyen d'incrémenter à la souris. */
.booking-count:has(.booking-count__button) .booking__input {
    -moz-appearance: textfield;
    appearance: textfield;
}

.booking-count:has(.booking-count__button) .booking__input::-webkit-outer-spin-button,
.booking-count:has(.booking-count__button) .booking__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.booking-count__button {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--BLEU_FONC);
    font: 600 1.25rem/1 Inter, sans-serif;
    cursor: pointer;
}

.booking-count__button:hover:not(:disabled) {
    color: var(--BLEU-CIEL);
}

.booking-count__button:disabled {
    color: var(--GRIS);
    cursor: not-allowed;
}

.booking__date-duration {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    align-items: stretch;
}

.booking__date-duration > .booking__field {
    gap: 15px;
    padding: 2px 0;
    align-content: start;
}

/* Le formulaire source enchaîne la dernière carte et la section Date sans le `gap` générique du
   formulaire. On ne retire cet espace que lorsqu'un véritable sélecteur de bateaux est présent. */
.product-detail-layout__summary .booking__form:has(.booking__boats) .booking__date-duration {
    margin-top: -20px;
}

.booking__date-duration > .booking__field > .booking__label {
    margin: 11.2px 0 4.2px;
}

.booking__duration-value {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 7px 15px;
    background: #f4f4f4;
    color: var(--Base-02);
    font: 500 15px/22.5px Poppins, sans-serif;
}

/* --- Calendrier ---------------------------------------------------------- */

.booking__calendar {
    border: 1px solid var(--GRIS);
    border-radius: 0.75rem;
    padding: 0.75rem;
    /* Un calendrier étiré sur toute la largeur du conteneur donne des cases de 150 px : illisible
       et disgracieux. On le borne à la largeur d'un vrai calendrier. */
    max-width: 100%;
}

.booking__calendar-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.75rem 0 0;
    color: var(--GRIS_FONC);
    font-size: 0.85rem;
}

/* La ligne d'état garde sa place même vide : sinon l'apparition du « chargement… » pousse vers le
   bas tout ce qui suit — heures, passagers, total — pendant l'aller-retour. */
.booking__calendar-status[hidden] {
    display: flex;
    visibility: hidden;
}

.booking__calendar-status {
    min-height: 1.4rem;
}

.booking__retry {
    flex: 0 0 auto;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--BLEU-CIEL);
    border-radius: 999px;
    background: #fff;
    color: var(--BLEU-CIEL);
    font: inherit;
    cursor: pointer;
}

.booking__month {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.booking__month-label {
    font-weight: 700;
    color: var(--BLEU_FONC);
    text-transform: capitalize;
}

.booking__nav {
    border: 1px solid var(--GRIS);
    background: #fff;
    color: var(--BLEU_FONC);
    border-radius: 0.5rem;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.booking__nav:hover {
    border-color: var(--BLEU-CIEL);
    color: var(--BLEU-CIEL);
}

.booking__weekdays,
.booking__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
}

.booking__weekdays {
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    color: var(--GRIS_FONC);
    text-align: center;
}

.reservations-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: #f4f4f5;
    color: var(--Base-02);
    font: inherit;
    cursor: pointer;
}

.reservations-day:hover:not(:disabled):not(.reservations-day--selected) {
    border-color: var(--BLEU-CIEL);
    color: var(--BLEU-CIEL);
}

/* Les jours fermés restent lisibles : un calendrier à trous se lit mal, et « le 5 est pris »
   vaut mieux qu'un mois qui saute un jour sans explication. */
.reservations-day--closed {
    background: transparent;
    color: var(--GRIS);
    cursor: not-allowed;
    text-decoration: line-through;
}

.reservations-day--loading {
    background: #f4f4f5;
    color: var(--GRIS);
    cursor: progress;
    text-decoration: none;
}

.reservations-day--selected {
    background: var(--BLEU_FONC);
    border-color: var(--BLEU_FONC);
    color: #fff;
    font-weight: 700;
}

/* Même précaution que les pastilles d'heure : on n'écrit pas en cyan sur un jour déjà plein,
   on éclaircit sa bordure. */
.reservations-day--selected:hover:not(:disabled) {
    border-color: var(--BLEU-CIEL);
    color: #fff;
}

.reservations-day--empty {
    background: none;
}

/* --- Créneaux ------------------------------------------------------------ */

.booking__slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* Hauteur d'une rangée de pastilles, réservée dès le départ. */
    min-height: 37.5px;
}

.reservations-slot {
    border: 1px solid var(--GRIS);
    border-radius: 999px;
    background: #fff;
    color: var(--BLEU_FONC);
    padding: 0.5rem 1rem;
    font: inherit;
    cursor: pointer;
}

/* Le survol ne repeint QUE les pastilles non retenues. Sur le créneau choisi — déjà cyan plein —
   il recolorait le texte en cyan : bleu sur bleu, l'heure disparaissait tant que le curseur
   restait dessus. Or `booking.js` sélectionne le premier créneau d'office, donc le défaut se
   voyait au premier survol. */
.reservations-slot:hover:not(.reservations-slot--selected) {
    border-color: var(--BLEU-CIEL);
    color: var(--BLEU-CIEL);
}

.reservations-slot--selected {
    background: var(--BLEU-CIEL);
    border-color: var(--BLEU-CIEL);
    color: #fff;
    font-weight: 600;
}

/* Le créneau retenu s'assombrit au survol au lieu de s'effacer : le repère reste lisible et le
   survol reste perçu. */
.reservations-slot--selected:hover {
    background: var(--BLEU_FONC);
    border-color: var(--BLEU_FONC);
    color: #fff;
}

/* --- Fantômes de chargement ---------------------------------------------

   Posés par `booking.js` (plugin réservations) le temps d'un aller-retour : ils occupent la place
   du contenu à venir, pour que rien ne saute sous le doigt quand le client choisit une date ou un
   bateau. Le miroitement s'arrête de lui-même en `prefers-reduced-motion` (règle globale du
   thème). */

@keyframes reservations-ghost {
    from {
        background-position: 150% 0;
    }

    to {
        background-position: -150% 0;
    }
}

.reservations-slot--ghost,
.reservations-quote-ghost__line {
    background-image: linear-gradient(90deg, #EEF2F5 25%, #E1E8EE 37%, #EEF2F5 63%);
    background-size: 300% 100%;
    animation: reservations-ghost 1.4s ease-in-out infinite;
}

/* Mêmes dimensions qu'une vraie pastille (79 × 37,5 px pour « 09:30 ») : c'est ce qui permet à la
   rangée de fantômes d'occuper exactement la place des créneaux à venir. */
.reservations-slot--ghost {
    display: block;
    width: 4.9rem;
    height: 37.5px;
    padding: 0;
    border-color: transparent;
    cursor: progress;
    pointer-events: none;
}

/* Au PREMIER calcul, la zone prend la hauteur du récapitulatif à venir (deux lignes de taxes et
   le total, tels que ce site les affiche) : la croissance a lieu au clic, jamais à l'arrivée de
   la réponse — un décalage sous le doigt se remarque, une zone qui s'ouvre au clic non. */
.booking__quote[aria-busy="true"] {
    min-height: 7.4rem;
}

/* RECALCUL : les montants restent lisibles, simplement estompés, avec une roue d'attente. Les
   remplacer par des barres grises à chaque changement d'horaire faisait clignoter tout le
   récapitulatif alors que seul le prix change. */
.booking__quote.reservations-quote--refreshing {
    position: relative;
}

.booking__quote.reservations-quote--refreshing > * {
    opacity: 0.35;
    transition: opacity 0.15s ease-out;
}

.booking__quote.reservations-quote--refreshing::after {
    content: "";
    position: absolute;
    top: 1.35rem;
    right: 0;
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid rgb(32 166 179 / 30%);
    border-top-color: var(--BLEU-CIEL);
    border-radius: 50%;
    animation: reservations-spin 0.7s linear infinite;
}

@keyframes reservations-spin {
    to {
        transform: rotate(360deg);
    }
}

.reservations-quote-ghost {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.reservations-quote-ghost__line {
    display: block;
    height: 0.85rem;
    border-radius: 999px;
}

.reservations-quote-ghost__line:first-child {
    width: 60%;
}

.reservations-quote-ghost__line:nth-child(2) {
    width: 42%;
}

/* La dernière ligne tient la place du total, plus haut que le reste. */
.reservations-quote-ghost__line:last-child {
    width: 34%;
    height: 1.6rem;
}

/* --- Total --------------------------------------------------------------- */

.booking__quote {
    border-top: 1px solid var(--GRIS);
    padding-top: 1rem;
    /* Place du récapitulatif à venir : le bouton « Réserver » ne doit pas se dérober au moment
       où le client vise. */
    min-height: 5.75rem;
}

.booking__quote dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 1rem;
    margin: 0 0 0.5rem;
    color: var(--GRIS_FONC);
}

.booking__quote dt,
.booking__quote dd {
    margin: 0;
}

.booking__quote dd {
    text-align: right;
}

/* Le total est la seule chose que le visiteur cherche des yeux avant de cliquer. */
.booking__quote p strong {
    font-size: 1.35rem;
    color: var(--BLEU_FONC);
}

/* Le prix d'appel est désormais un LIBELLÉ d'un seul tenant (« À partir de 225 $/h ») et non plus
   une amorce suivie d'un montant en gras : la ligne entière porte donc l'accent. */
.booking__from {
    color: var(--GRIS_FONC);
    margin: 0;
    font-weight: 500;
}

.booking__note {
    color: var(--GRIS_FONC);
    font-size: 0.9rem;
    margin: 0;
}

.booking__submit {
    justify-self: start;
}

.booking__submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Réassurance sous le bouton : valeurs calculées (offre + réglages), voir le gabarit. */
.booking__trust {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.booking__trust li {
    color: var(--GRIS_FONC);
    font-size: 0.85rem;
    line-height: 1.35;
}

.booking__trust li::before {
    content: "✓";
    color: var(--BLEU-CIEL);
    font-weight: 700;
    margin-right: 7px;
}

/* ------------------------------------------------------------ 14g. Avis clients */

.avis-stars {
    margin: 2px 0 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.avis-stars__glyphs,
.reviews__stars {
    color: #f5a623;
    letter-spacing: 2px;
    font-size: 1rem;
}

.avis-stars__text {
    color: var(--GRIS_FONC);
    font-size: 0.9rem;
}

.block-reviews {
    padding-block: 34px;
}

.reviews__heading {
    text-align: center;
    font-family: Poppins, sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--BLEU_FONC);
    margin: 0 0 8px;
}

.reviews__aggregate {
    text-align: center;
    color: var(--GRIS_FONC);
    margin: 0 0 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.reviews__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
}

@media (min-width: 992px) {
    .reviews__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.reviews__item {
    background: #fff;
    border-radius: 13px;
    box-shadow: 0 4px 24px 0 rgb(9 9 20 / 7%);
    padding: 22px 22px 18px;
}

.reviews__item .reviews__stars {
    margin: 0 0 10px;
}

.reviews__body {
    margin: 0 0 12px;
    color: var(--BLEU_FONC);
    font-size: 0.95rem;
    line-height: 1.55;
}

.reviews__meta {
    margin: 0;
    color: var(--GRIS_FONC);
    font-size: 0.85rem;
}

@media (min-width: 992px) {
    .booking__date-duration {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ------------------------------------------ 14h. Tunnel de réservation */

/* Pages du tunnel (récapitulatif, confirmation, solde, erreur, abandon). Elles n'ont pas de hero :
   la respiration haute vient de la même règle que la recherche et la 404 — l'en-tête est en
   `position: absolute`, un contenu collé en haut lui passerait dessous. */

.checkout__head {
    margin-bottom: 32px;
}

.checkout__title {
    margin: 0;
}

/* Fil d'étapes : le visiteur arrive d'une fiche produit et doit savoir combien il lui reste
   d'écrans avant de payer. Numérotation par compteur CSS — l'ordre est celui du DOM. */
.checkout__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: checkout-step;
    color: var(--GRIS_FONC);
    font-family: Poppins, sans-serif;
    font-size: 14px;
    line-height: 22px;
}

.checkout__step {
    display: flex;
    align-items: center;
    gap: 9px;
    counter-increment: checkout-step;
}

.checkout__step::before {
    content: counter(checkout-step);
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 1px solid var(--GRIS);
    border-radius: 50%;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.checkout__step--done {
    color: var(--BLEU-CIEL);
}

.checkout__step--done::before {
    content: "\2713";
    border-color: var(--BLEU-CIEL);
    background: var(--BLEU-CIEL);
    color: #fff;
}

.checkout__step--current {
    color: var(--BLEU_FONC);
    font-weight: 600;
}

.checkout__step--current::before {
    border-color: var(--BLEU_FONC);
    background: var(--BLEU_FONC);
    color: #fff;
}

/* Le récapitulatif est AVANT le formulaire dans le DOM (on relit ce qu'on achète avant de donner
   son nom) ; sur grand écran la grille le renvoie à droite. Il ne contient aucun élément focusable,
   l'ordre de tabulation reste donc conforme à l'ordre visuel. */
.checkout__grid {
    display: grid;
    gap: 24px;
    grid-template-areas:
        "aside"
        "main";
}

.checkout__main {
    grid-area: main;
    min-width: 0;
}

.checkout__aside {
    grid-area: aside;
    min-width: 0;
}

.checkout-card {
    padding: 24px;
    border: 1px solid var(--GRIS);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 4px 24px 0 rgb(9 9 20 / 7%);
}

.checkout-card__title {
    margin: 0 0 18px;
    padding: 0;
    color: var(--BLEU_FONC);
    font-family: Poppins, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: -0.5px;
}

/* --- Formulaire de coordonnées ------------------------------------------- */

.checkout__form {
    display: block;
}

.checkout__fieldset {
    min-width: 0;   /* un `fieldset` porte une largeur minimale intrinsèque qui casse les grilles */
    margin: 0 0 24px;
}

/* Une `legend` se place DANS la bordure et y creuse une encoche, incompatible avec une carte à
   coins arrondis. Le flottant la ramène dans le flux normal ; les blocs suivants la dégagent. */
.checkout__fieldset > .checkout-card__title {
    float: left;
    width: 100%;
}

.checkout__fields {
    clear: both;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.checkout__field {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

.checkout__label {
    color: #344054;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.checkout__input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    color: var(--Base-02);
    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 22px;
}

.checkout__input::placeholder {
    color: #98a2b3;
}

.checkout__input--textarea {
    min-height: 110px;
    resize: vertical;
}

.checkout__hint {
    color: var(--GRIS_FONC);
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 18px;
}

/* --- Champ téléphone international ---------------------------------------
   Deux entrées côte à côte pour un seul numéro : l'indicatif à gauche, le numéro national à
   droite. Deux cent trente et un pays tiennent derrière un bouton de six caractères.

   Deux états sont stylés : le REPLI sans JavaScript (`<select>` natif, borné en largeur pour ne
   pas manger la ligne) et le champ ENRICHI (bouton + liste recherchable). `theme.js` masque le
   premier en posant le second. */

.phone-field__group {
    display: flex;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
}

.phone-field__number {
    flex: 1 1 auto;
    min-width: 0;
}

/* Repli sans JavaScript : « Émirats arabes unis +971 » prendrait toute la ligne et repousserait
   le numéro dessous. Borné, le `<select>` tronque proprement et le champ reste sur une ligne. */
.phone-field__select {
    flex: 0 0 auto;
    width: auto;
    max-width: 9.5rem;
    padding-inline: 10px;
}

.phone-field__picker {
    position: relative;
    flex: 0 0 auto;
}

.phone-field__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 12px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    color: var(--Base-02);
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 600;
    /* `normal`, comme un `input` — et non l'interligne hérité du corps de texte, qui rendait le
       bouton plus haut que le champ voisin (le groupe est en `align-items: stretch`). */
    line-height: normal;
    cursor: pointer;
    transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out;
}

.phone-field__toggle:hover {
    border-color: var(--BLEU-CIEL);
}

.phone-field__toggle:focus-visible {
    border-color: var(--BLEU-CIEL);
    box-shadow: 0 0 0 3px rgb(32 166 179 / 18%);
    outline: none;
}

/* Le code ISO plutôt qu'un drapeau : deux cent trente et un pavillons seraient deux cent trente
   et une images, et les drapeaux en emoji ne s'affichent pas sous Windows. « US » se lit
   partout, dans toutes les langues, sans un octet à télécharger. */
.phone-field__iso {
    padding: 2px 5px;
    border-radius: 4px;
    background: #f2f4f7;
    color: var(--GRIS_FONC);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
}

.phone-field__dial {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.phone-field__caret {
    width: 0;
    height: 0;
    flex: 0 0 auto;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 5px solid var(--GRIS_FONC);
    transition: transform 0.18s ease-out;
}

.phone-field__toggle[aria-expanded="true"] .phone-field__caret {
    transform: rotate(180deg);
}

.phone-field__popover {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    width: min(19rem, 78vw);
    padding: 8px;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgb(9 9 20 / 14%);
}

.phone-field__search {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 20px;
}

.phone-field__search:focus-visible {
    border-color: var(--BLEU-CIEL);
    outline: none;
}

.phone-field__list {
    /* Repère de positionnement pour le script : `offsetTop` se mesure depuis l'ancêtre POSITIONNÉ.
       Sans cette ligne, c'est `.phone-field__picker` qui sert de repère, la liste s'ouvre
       déjà défilée de la hauteur du champ de recherche, et le pays présélectionné — celui que
       l'on vient chercher — est le seul à ne pas être visible. */
    position: relative;
    max-height: 15rem;
    margin: 8px 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.phone-field__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
}

.phone-field__list li.is-active,
.phone-field__list li:hover {
    background: #f2f4f7;
}

.phone-field__list li[aria-selected="true"] {
    font-weight: 700;
}

/* Le pays présélectionné est remonté en tête de liste par le serveur : un filet le sépare du
   reste, sinon il ressemble à une anomalie de tri alphabétique. */
.phone-field__list li:first-child {
    margin-bottom: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--GRIS);
    border-radius: 8px 8px 0 0;
}

.phone-field__name {
    flex: 1 1 auto;
    min-width: 0;
}

.phone-field__list .phone-field__dial {
    color: var(--GRIS_FONC);
    font-weight: 400;
}

.phone-field__empty {
    margin: 8px 0 4px;
    color: var(--GRIS_FONC);
    font-family: Inter, sans-serif;
    font-size: 13px;
    text-align: center;
}

/* Avertissement de longueur : informatif, jamais bloquant — le serveur conserve la saisie même
   s'il ne sait pas la normaliser. D'où l'orange plutôt qu'un rouge d'erreur. */
.phone-field__feedback {
    margin: 0;
    color: var(--ORANGE);
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
}

/* Libellé réservé aux lecteurs d'écran (le « Indicatif du pays » du `<select>` masqué). */
.u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Choix acompte / totalité -------------------------------------------- */

.checkout__choice {
    clear: both;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 12px;
    padding: 16px;
    border: 1px solid var(--GRIS);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.18s ease-out, background-color 0.18s ease-out;
}

.checkout__choice:hover {
    border-color: var(--BLEU-CIEL);
}

.checkout__choice:has(input:checked) {
    border-color: var(--BLEU-CIEL);
    background: rgb(32 166 179 / 6%);
}

.checkout__choice:has(input:focus-visible) {
    outline: 3px solid var(--BLEU-CIEL);
    outline-offset: 2px;
}

.checkout__choice input {
    flex: 0 0 auto;
    margin-top: 4px;
    accent-color: var(--BLEU-CIEL);
}

.checkout__choice-text {
    display: grid;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.checkout__choice-title {
    color: var(--BLEU_FONC);
    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
}

.checkout__choice-amount {
    color: var(--Base-02);
    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
}

.checkout__choice-hint {
    color: var(--GRIS_FONC);
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 19px;
}

/* Consentement au prélèvement automatique du solde : sous le choix « acompte », même grille que
   les options, masqué par `auto-charge.js` tant que l'acompte n'est pas choisi. */
.checkout__consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid var(--GRIS_CLAIR, #e5e7eb);
    border-radius: 12px;
    color: var(--GRIS_FONC);
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 19px;
    cursor: pointer;
}

.checkout__consent input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--BLEU, #0f4c81);
}

.checkout__consent:has(input:checked) {
    border-color: var(--BLEU, #0f4c81);
}

.checkout__consent[hidden] {
    display: none;
}

.checkout__submit {
    display: grid;
    justify-items: start;
    gap: 12px;
}

.checkout__secure {
    margin: 0;
    color: var(--GRIS_FONC);
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 19px;
}

/* --- Carte récapitulative ------------------------------------------------ */

.checkout-recap__offer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--GRIS);
}

.checkout-recap__media {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 12px;
    background: #eef6f8;
}

.checkout-recap__media picture,
.checkout-recap__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-recap__offer-text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.checkout-recap__offer-title {
    color: var(--Base-02);
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
}

.checkout-recap__offer-boat {
    color: var(--GRIS_FONC);
    font-family: Poppins, sans-serif;
    font-size: 14px;
    line-height: 20px;
}

.checkout-recap__lines {
    display: grid;
    gap: 8px;
    margin: 18px 0 0;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    line-height: 20px;
}

.checkout-recap__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.checkout-recap__line dt {
    color: var(--GRIS_FONC);
}

.checkout-recap__line dd {
    margin: 0;
    color: var(--Base-02);
    font-weight: 500;
    text-align: right;
}

.checkout-recap__lines--prices {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--GRIS);
}

/* Le total est la seule chose que le visiteur cherche des yeux avant de payer. */
.checkout-recap__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--GRIS);
    color: var(--BLEU_FONC);
    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-weight: 600;
}

.checkout-recap__total strong {
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.5px;
}

.checkout-recap__note {
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f4f8f9;
    color: var(--Base-02);
    font-family: Poppins, sans-serif;
    font-size: 13px;
    line-height: 19px;
}

/* Sélecteur porté par la carte : la liste de réassurance est partagée avec le formulaire des
   fiches (`.booking__trust`, en ligne), elle passe ici en colonne. */
.checkout-recap .checkout-recap__trust {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--GRIS);
}

/* --- Pages d'issue : confirmation, solde, erreur, abandon ---------------- */

.checkout--outcome .checkout-card {
    max-width: 640px;
    margin-inline: auto;
}

.checkout-outcome {
    text-align: center;
}

/* Pastille du pictogramme : le tracé SVG suit `currentColor`, la variante ne fixe donc que le
   couple fond / couleur. */
.checkout-outcome__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #eef6f8;
    color: var(--BLEU-CIEL);
}

.checkout-outcome__icon svg {
    display: block;
}

.checkout-outcome__icon--ok {
    background: var(--BLEU-CIEL);
    color: #fff;
}

.checkout-outcome__icon--error {
    background: var(--ORANGE);
    color: #fff;
}

.checkout-outcome__title {
    margin: 0;
}

.checkout-outcome__lead {
    margin: 14px 0 0;
    color: var(--GRIS_FONC);
    font-family: Poppins, sans-serif;
    font-size: 17px;
    line-height: 27px;
}

/* La référence est ce que le client recopiera dans un e-mail ou dictera au téléphone. */
.checkout-outcome__reference {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 4px 10px;
    margin: 22px 0 0;
    padding: 14px;
    border: 1px dashed var(--BLEU-CIEL);
    border-radius: 12px;
    color: var(--GRIS_FONC);
    font-family: Poppins, sans-serif;
    font-size: 14px;
}

.checkout-outcome__reference strong {
    color: var(--BLEU_FONC);
    font-size: 20px;
    letter-spacing: 1px;
}

.checkout-outcome__balance,
.checkout-outcome__keep {
    margin: 18px 0 0;
    color: var(--GRIS_FONC);
    font-family: Poppins, sans-serif;
    font-size: 14px;
    line-height: 22px;
}

/* Solde : le formulaire empile le bloc « carte cadeau » (filets haut et bas) et le bouton, puis la
   note de sécurité suit hors du formulaire. Sans espacement, le bouton colle au filet du bloc. */
.checkout-outcome__form {
    display: grid;
    justify-items: center;
    gap: 22px;
    margin: 22px 0 0;
}

.checkout-outcome__form + .checkout__secure {
    margin-top: 14px;
}

.checkout-outcome__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 26px 0 0;
}

/* `.button--primary` porte un rembourrage plus large que `.button` : côte à côte, les deux boutons
   ne feraient pas la même hauteur. On les aligne sur la variante la plus grande. */
.checkout-outcome__actions .button {
    padding: 16px 24px;
}

@media (min-width: 700px) {
    .checkout__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .checkout__field--wide {
        grid-column: 1 / -1;
    }
}

@media (min-width: 992px) {
    .checkout__grid {
        grid-template-columns: minmax(0, 1fr) 380px;
        grid-template-areas: "main aside";
        align-items: start;
        gap: 40px;
    }

    /* `top` dégage la barre repliée (`.header--stuck`, fixée à 10 px du haut). */
    .checkout__aside {
        position: sticky;
        top: 110px;
    }

    .checkout-card {
        padding: 28px;
    }
}

/* --------------------------------- 14i. Réservation rapide (bloc d'accueil)

   Carte en verre posée sur le bas du héro. La remontée est une conséquence de la POSITION
   (`.hero + .block-quick`), pas une option cochée en admin : le thème rhabille le bloc du plugin,
   il n'ajoute pas de champ à son schéma. Placé ailleurs, le bloc reste un bandeau ordinaire.

   Deux familles de classes cohabitent ici :
   - `.quick__*`, posées par le gabarit du thème ;
   - `.reservations-quick__*`, posées par `quick-booking.js` (plugin) sur les nœuds qu'il crée —
     bateaux, jours, créneaux, total. Le thème les HABILLE, il ne les choisit pas.

   Rose = ce que le visiteur a choisi. Bleu ciel = l'action (`.button--primary` du site). ------- */

.block-quick {
    padding: 56px 20px 60px;
}

/* La carte chevauche le BORD du héro, pas son contenu.

   La maquette posait la carte 170 px sur la vidéo — elle supposait un héro dont le titre occupe le
   haut. Celui de Captain J cale son contenu EN BAS (`.hero__row` en `flex-end`, 29 px de fond) :
   170 px de recouvrement effacent la seconde ligne du titre et les cartes latérales, à toutes les
   hauteurs d'écran, pas seulement sur un portable.

   On chevauche donc de ce qui est réellement libre. Pour retrouver la carte franchement posée sur
   la vidéo, c'est le HÉRO qu'il faut aérer — voir `.home .hero__row` plus bas. */
.hero + .block-quick {
    position: relative;
    z-index: 2;
    margin-top: -24px;
    padding-top: 0;
}

/* Fond PLEIN par défaut, verre dépoli seulement devant la vidéo du héro.

   Un fond translucide n'a de sens que s'il laisse voir quelque chose. Posée au milieu de la page,
   entre deux sections claires, la même carte ne floute que du blanc : elle vire au gris et le texte
   blanc y perd la moitié de son contraste. Le bleu profond de la marque donne ~12:1 sur du blanc,
   et garde l'allure sombre de la maquette. */
.quick__card {
    max-width: 1120px;
    margin: 0 auto;
    padding: 30px 32px 26px;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 28px;
    background: var(--BLEU_FONC);
    box-shadow: 0 24px 60px -32px rgb(31 51 93 / 55%);
    color: #fff;
}

.hero + .block-quick .quick__card {
    border-color: rgb(255 255 255 / 20%);
    background: rgb(14 14 32 / 46%);
    backdrop-filter: blur(30px) saturate(150%);
    box-shadow: 0 40px 90px -30px rgb(9 9 20 / 75%);
}

/* Repli sans `backdrop-filter` (Firefox ancien, économiseur de données) : un fond plus opaque
   plutôt qu'un texte blanc sur une vidéo, illisible. */
@supports not (backdrop-filter: blur(1px)) {
    .hero + .block-quick .quick__card {
        background: rgb(14 14 32 / 88%);
    }
}

.quick__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.quick__title {
    margin: 0;
    color: #fff;
    font: 600 21px/1.2 Poppins, sans-serif;
    letter-spacing: -0.2px;
}

.quick__intro {
    margin: 4px 0 0;
    color: rgb(255 255 255 / 62%);
    font-size: 13px;
}

/* --- Onglets (familles réglées en admin) -------------------------------- */

.quick__tabs {
    display: flex;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    margin: 18px 0 0;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 999px;
    background: rgb(255 255 255 / 8%);
    scrollbar-width: none;
}

.quick__tabs::-webkit-scrollbar {
    display: none;
}

.quick__tab {
    flex: 0 0 auto;
    padding: 9px 20px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: rgb(255 255 255 / 74%);
    font: 600 13.5px/1.2 Poppins, sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.quick__tab:hover {
    color: #fff;
}

.quick__tab[aria-selected="true"] {
    background: var(--ROSE_LOGO);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgb(228 75 128 / 90%);
}

/* --- Colonnes ----------------------------------------------------------- */

.quick__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
    margin-top: 24px;
}

.quick__column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
}

.quick__step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgb(255 255 255 / 58%);
    font: 600 11px/1 Poppins, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.quick__step i {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 999px;
    background: rgb(255 255 255 / 12%);
    color: #fff;
    font: 600 11px/1 Poppins, sans-serif;
    font-style: normal;
    letter-spacing: 0;
}

.quick__label {
    display: block;
    color: rgb(255 255 255 / 58%);
    font: 600 11px/1 Poppins, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* --- Étape 1 : la prestation -------------------------------------------- */

.quick__offers {
    display: flex;
    max-height: 268px;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: 0 4px 0 0;
    overflow-y: auto;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 25%) transparent;
}

.quick__offer {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: 14px;
    background: rgb(255 255 255 / 7%);
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.quick__offer::before {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 1.6px solid rgb(255 255 255 / 38%);
    border-radius: 999px;
    content: "";
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.quick__offer:hover {
    border-color: rgb(255 255 255 / 28%);
}

.quick__offer[aria-pressed="true"] {
    border-color: rgb(228 75 128 / 85%);
    background: linear-gradient(90deg, rgb(228 75 128 / 24%), rgb(228 75 128 / 6%));
    box-shadow: 0 10px 24px -16px rgb(228 75 128 / 90%);
}

.quick__offer[aria-pressed="true"]::before {
    border-color: var(--ROSE_LOGO);
    box-shadow: inset 0 0 0 4px var(--ROSE_LOGO);
}

.quick__offer-body {
    min-width: 0;
    flex: 1;
}

.quick__offer-title {
    display: block;
    overflow: hidden;
    font: 600 14px/1.3 Poppins, sans-serif;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick__offer-meta {
    display: block;
    margin-top: 2px;
    color: rgb(255 255 255 / 58%);
    font-size: 12px;
}

.quick__offer-price {
    flex: 0 0 auto;
    color: rgb(255 255 255 / 92%);
    font: 600 13.5px/1.2 Poppins, sans-serif;
    text-align: right;
}

.quick__see-all-row {
    margin: 10px 0 0;
}

.quick__see-all {
    color: #f7a9c6;
    font-size: 12.5px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.quick__see-all:hover {
    color: #fff;
}

/* --- Étape 1 bis : bateaux, durée, itinéraire (posés par le script) ------ */

.quick__options:empty {
    display: none;
}

.quick__options {
    margin-top: 14px;
}

.reservations-quick__legend {
    margin: 0 0 8px;
    color: rgb(255 255 255 / 58%);
    font: 600 11px/1 Poppins, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.reservations-quick__boats {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reservations-quick__boat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 12px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 14px;
    background: rgb(255 255 255 / 5%);
    color: #fff;
    font: 500 12.5px/1.35 Poppins, sans-serif;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.reservations-quick__boat:hover {
    border-color: rgb(255 255 255 / 28%);
}

.reservations-quick__boat[aria-checked="true"] {
    border-color: rgb(228 75 128 / 85%);
    background: linear-gradient(120deg, rgb(228 75 128 / 26%), rgb(228 75 128 / 6%));
}

.reservations-quick__boat .reservations-quick__price {
    color: rgb(255 255 255 / 62%);
    font-size: 11.5px;
}

.reservations-quick__boat[aria-checked="true"] .reservations-quick__price {
    color: #f9a8c6;
    font-weight: 600;
}

.reservations-quick__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 0 0;
}

.reservations-quick__field label {
    color: rgb(255 255 255 / 58%);
    font: 600 11px/1 Poppins, sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.reservations-quick__field select {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 0.5rem;
    background: rgb(14 14 32 / 55%);
    color: #fff;
    font: inherit;
}

.reservations-quick__field select option {
    color: var(--Base-02);
}

/* --- Étape 2 : calendrier et départs ------------------------------------ */

.quick__when-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.quick__month {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.quick__month-label {
    min-width: 128px;
    color: #fff;
    font: 600 14px/1.2 Poppins, sans-serif;
    text-align: center;
    text-transform: capitalize;
}

.quick__nav {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 999px;
    background: none;
    color: rgb(255 255 255 / 70%);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.quick__nav:hover {
    border-color: rgb(255 255 255 / 45%);
    color: #fff;
}

.quick__weekdays,
.quick__days {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    justify-items: center;
}

.quick__weekdays {
    margin-bottom: 4px;
    color: rgb(255 255 255 / 58%);
    font: 600 11px/1 Inter, sans-serif;
    letter-spacing: 0.09em;
    text-align: center;
    text-transform: uppercase;
}

/* Hauteur réservée : six rangées possibles. Sans elle, le pied de carte remonte puis redescend
   au chargement d'un mois, exactement quand le visiteur vise une date. */
.quick__days {
    min-height: 264px;
    align-content: start;
}

.reservations-quick__day {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: none;
    color: rgb(255 255 255 / 90%);
    font: 500 13.5px/1 Poppins, sans-serif;
    cursor: pointer;
    transition: background-color 120ms ease;
}

.reservations-quick__day:hover:not(:disabled) {
    background: rgb(255 255 255 / 12%);
}

/* Sur fond plein, 26 % tombait sous 3:1 : un jour fermé doit rester LISIBLE — c'est une
   information (« pas celui-là »), pas une décoration. */
.reservations-quick__day:disabled {
    color: rgb(255 255 255 / 40%);
    cursor: not-allowed;
    /* Barré et non simplement pâli : « fermé » se distingue ainsi de « hors du mois », y compris
       pour qui distingue mal les contrastes. */
    text-decoration: line-through;
}

.reservations-quick__day--empty {
    cursor: default;
}

.reservations-quick__day[aria-pressed="true"] {
    background: var(--ROSE_LOGO);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 10px 22px -10px rgb(228 75 128 / 95%);
}

.quick__status:empty {
    display: none;
}

.quick__status {
    margin: 8px 0 0;
    color: rgb(255 255 255 / 55%);
    font-size: 12.5px;
}

.quick__slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* Une rangée de pastilles réservée dès le départ, comme sur la fiche. */
    min-height: 42px;
}

.quick__slots p {
    margin: 0;
    color: rgb(255 255 255 / 55%);
    font-size: 12.5px;
}

.reservations-quick__slot {
    padding: 11px 18px;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 999px;
    background: rgb(255 255 255 / 5%);
    color: #fff;
    font: 600 13px/1 Poppins, sans-serif;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.reservations-quick__slot:hover {
    border-color: rgb(255 255 255 / 45%);
}

.reservations-quick__slot[aria-pressed="true"] {
    border-color: var(--ROSE_LOGO);
    background: var(--ROSE_LOGO);
    box-shadow: 0 10px 22px -10px rgb(228 75 128 / 95%);
}

/* --- Pied de carte : passagers, total, action --------------------------- */

.quick__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgb(255 255 255 / 14%);
}

.quick__persons {
    display: flex;
    gap: 20px;
}

.quick__field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* Le compteur « − / + » est celui de la fiche (`theme.js`), reteint pour un fond sombre. */
.quick__persons .booking-count {
    border-color: rgb(255 255 255 / 22%);
    background: rgb(255 255 255 / 6%);
}

.quick__persons .booking__input {
    color: #fff;
}

.quick__persons .booking-count__button {
    color: #fff;
}

.quick__persons .booking-count__button:hover:not(:disabled) {
    color: #f9a8c6;
}

.quick__persons .booking-count__button:disabled {
    color: rgb(255 255 255 / 30%);
}

.quick__decide {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.quick__quote:empty {
    display: none;
}

.quick__quote {
    color: rgb(255 255 255 / 62%);
    font-size: 12.5px;
    text-align: right;
}

.quick__quote p {
    margin: 0;
}

.reservations-quick__total {
    color: #fff;
    font: 600 22px/1.1 Poppins, sans-serif;
    letter-spacing: -0.3px;
}

.quick__submit:disabled {
    border-color: rgb(255 255 255 / 14%);
    background: rgb(255 255 255 / 8%);
    color: rgb(255 255 255 / 40%);
    cursor: not-allowed;
}

.quick__submit:disabled:hover {
    border-color: rgb(255 255 255 / 14%);
    background: rgb(255 255 255 / 8%);
    color: rgb(255 255 255 / 40%);
}

.quick__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 16px;
}

.quick__trust li {
    color: rgb(255 255 255 / 55%);
}

.quick__trust li::before {
    color: var(--BLEU-CIEL);
}

/* --- Sans JavaScript : le catalogue ------------------------------------- */

/* `[hidden]` est posé par le script quand il remplace le catalogue par le module. Un sélecteur de
   CLASSE l'emporte sur la règle `[hidden] { display: none }` du navigateur : sans cette ligne, le
   catalogue reste affiché SOUS le formulaire, et la page montre deux fois les mêmes prestations. */
.quick__catalog[hidden] {
    display: none;
}

.quick__catalog {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 22px;
}

.quick__catalog-title {
    margin: 0 0 10px;
    color: #fff;
    font: 600 15px/1.2 Poppins, sans-serif;
}

.quick__catalog-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.quick__catalog-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.quick__catalog-link {
    color: #fff;
    font-size: 13.5px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.quick__catalog-link:hover {
    color: #f9a8c6;
}

.quick__catalog-price {
    flex: 0 0 auto;
    color: rgb(255 255 255 / 62%);
    font-size: 12.5px;
}

/* --- Réservation rapide : tablette et mobile ----------------------------

   Sous 1024 px, la carte cesse de remonter sur le héro : superposée à un titre de deux lignes sur
   un écran court, elle mangeait le message d'accueil. Sous 768 px, elle se REPLIE — le module
   déplié occupe deux écrans et demi, et repousse tout le site sous la ligne de flottaison.

   Le repli est posé par `theme.js`, jamais par le gabarit : sans JavaScript il n'y aurait aucun
   bouton pour rouvrir la carte, et le module deviendrait inatteignable sur téléphone. --------- */

@media (max-width: 1024px) {
    .hero + .block-quick {
        margin-top: 0;
        padding-top: 28px;
    }

    .quick__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .quick__offers {
        max-height: none;
    }
}

@media (max-width: 767px) {
    .block-quick {
        padding: 0 12px 40px;
    }

    .quick__card {
        padding: 18px 16px 16px;
        border-radius: 24px;
    }

    .quick__footer {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
    }

    .quick__decide {
        justify-content: space-between;
    }

    .quick__submit {
        flex: 1 0 auto;
        min-height: 52px;
    }

    .reservations-quick__boats {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Trois onglets tiennent rarement sur 375 px à leur taille de bureau, et leurs libellés
       viennent de l'admin : ils peuvent être longs. Ils se partagent donc la largeur et passent à
       la ligne, plutôt que de déborder derrière un défilement qu'on ne voit pas. */
    .quick__tabs {
        width: 100%;
        overflow-x: visible;
    }

    .quick__tab {
        flex: 1 1 0;
        min-width: 0;
        padding: 9px 8px;
        font-size: 12px;
        text-align: center;
        white-space: normal;
    }

    /* Un titre coupé au milieu n'aide personne : dans une feuille plein écran, la place existe. */
    .quick__offer-title {
        overflow: visible;
        white-space: normal;
    }

    /* Cibles tactiles : 44 px au minimum, y compris pour les jours du calendrier. */
    .quick__tab,
    .quick__nav,
    .reservations-quick__slot,
    .reservations-quick__day {
        min-height: 44px;
    }

    .quick__nav {
        width: 44px;
    }

    .reservations-quick__day {
        width: 100%;
        max-width: 44px;
        height: 44px;
    }
}

/* Bouton d'ouverture, ajouté par `theme.js` : il n'existe que là où il sert. */
.quick__toggle {
    display: none;
}

.quick--collapsible .quick__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 12px;
}

.quick--collapsed .quick__grid,
.quick--collapsed .quick__footer {
    display: none;
}

.quick--collapsed .quick__trust {
    justify-content: center;
    margin-top: 12px;
}

.quick--open .quick__toggle {
    display: none;
}

.quick--open .quick__card {
    position: fixed;
    z-index: 300;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: none;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    background: rgb(14 14 32 / 92%);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.quick__close {
    display: none;
}

.quick--open .quick__close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 999px;
    background: rgb(255 255 255 / 6%);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

/* La page ne défile plus derrière la feuille ouverte. */
body.has-quick-open {
    overflow: hidden;
}

/* ========================================================================
   Captain J — The Miami Marina · 2026 redesign
   Solid navy, open-water photography and the original handwritten signature.
   A compact booking dock connects inspiration to the existing reservation engine.
   ======================================================================== */
:root {
    --cj-navy: #1f335d;
    --cj-deep: #142847;
    --cj-teal: #147580;
    --cj-lagoon: #b9e8e5;
    --cj-deck: #f3f7f7;
    --cj-ink: #263b52;
    --cj-muted: #566a78;
    --cj-line: #dbe4e6;
    --cj-width: 1280px;
    --cj-gutter: clamp(20px, 4.5vw, 72px);
    --cj-radius: 12px;
    --cj-dock-shadow: 0 18px 45px -24px rgb(20 40 71 / 30%);
    --BLEU-CIEL: var(--cj-teal);
}
html { scroll-padding-top: 110px; }
body { font-family: 'Nunito Sans', sans-serif; color: var(--cj-ink); background: #fff; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, .heading1 { text-wrap: balance; }
.heading1 { color: var(--cj-navy); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.18; letter-spacing: -.035em; }
.nowrap { white-space: normal; }
.button { min-height: 46px; border-radius: 8px; font-family: 'Nunito Sans', sans-serif; font-weight: 700; }
.button--primary, .button--primary:visited { color: #fff; background: var(--cj-teal); border-color: var(--cj-teal); }
.button--primary:hover { color: #fff; background: var(--cj-deep); border-color: var(--cj-deep); }
.button--ice, .button--ice:visited { color: var(--cj-deep); background: var(--cj-lagoon); border-color: var(--cj-lagoon); }
.button--ice:hover { color: var(--cj-deep); background: #fff; border-color: #fff; }
.button--blue { color: var(--cj-teal); }
.gelatine:hover { animation: none; }
.zoom:hover { transform: none; }
[hidden] { display: none !important; }

/* One quiet utility line; navigation stays anchored to the page. */
.top-banner { display: flex; padding: 8px var(--cj-gutter); height: 38px; background: var(--cj-deep); }
.top-banner__first p { color: #f48eb0; font-size: 14px; line-height: 1; font-weight: 400; }
.top-banner__last p { color: #dce8ed; font-size: 12px; line-height: 1; font-weight: 400; }
.header { position: sticky; top: 0; left: auto; transform: none; width: 100%; max-width: none; min-height: 88px; border-radius: 0; padding: 12px var(--cj-gutter); border-bottom: 1px solid var(--cj-line); gap: 22px; }
.header.header--stuck { position: sticky; top: 0; box-shadow: none; animation: none; }
.header__branding > a > img { width: 150px; height: 58px; }
.header__cta { gap: 20px; }
.header__cta-button { display: flex; align-items: center; gap: 22px; }
.header__cta .button { padding: 11px 20px; white-space: nowrap; }
.header__cta .button span { margin-left: 10px; }
.header__navigation .menu { gap: 24px; }
.header__navigation .menu > .menu-item > a { padding: 13px 0; font-size: 14px; color: var(--cj-navy); }
.header__navigation .menu > .current-menu-item > a { background: none; border-radius: 0; color: var(--cj-teal); text-decoration: underline; text-underline-offset: 8px; }
.header__navigation .menu .menu-item > a:hover,
.header__navigation .menu .menu-item > a:focus-visible { color: var(--cj-teal); }
.header__navigation .menu a:focus-visible { outline: 2px solid var(--cj-teal); outline-offset: 4px; border-radius: 3px; }
.header__navigation .sub-menu .menu-item > a { min-height: 44px; padding: 10px 12px; gap: 12px; font-family: inherit; font-size: 15px; line-height: 22px; border-radius: 6px; transition: background-color .15s, color .15s; }
.header__navigation .sub-menu .menu-item > a:hover,
.header__navigation .sub-menu .menu-item > a:focus-visible { color: var(--cj-navy); background: var(--cj-deck); }
.header__toggle { background: var(--cj-navy); border-radius: 8px; }
.lang-switch__toggle { min-height: 44px; }

/* A photo spread: recognizably Captain J, without the old nested promotional boxes. */
.hero.hero--voyage { margin: 0; border-radius: 0; background: var(--cj-deep); }
.hero--voyage .hero__bg { left: 42%; width: 58%; background: var(--cj-teal); }
.hero--voyage .hero__bg video, .hero--voyage .hero__bg img { filter: none; object-position: center; }
.hero--voyage .hero__bg::after { background: linear-gradient(90deg, var(--cj-deep), transparent 34%), linear-gradient(0deg, rgb(20 40 71 / 48%), transparent 55%); }
.hero--voyage .hero__row, .home .hero--voyage .hero__row { width: min(100%, 1440px); height: auto; min-height: 465px; margin: auto; padding: 64px var(--cj-gutter) 68px; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 60px; text-align: left; }
.hero--voyage .hero__col, .hero--voyage .hero__col:first-child, .hero--voyage .hero__col:last-child { width: 100%; max-width: none; margin: 0; align-items: flex-start; }
.hero.hero--voyage h1 { font: 600 clamp(42px, 5.4vw, 76px)/1.03 Poppins, sans-serif; letter-spacing: -.035em; max-width: 640px; text-shadow: none; }
.hero__signature { display: inline-block; margin-top: 9px; color: var(--cj-lagoon); font: 400 1.14em/1.05 'Blambot Casual', sans-serif; letter-spacing: -.025em; }
.hero--voyage .hero__col:first-child > p { max-width: 38ch; margin: 24px 0 0; font: 400 18px/1.6 'Nunito Sans', sans-serif; color: #e0eaf0; text-shadow: none; }
.hero--voyage .button { margin-top: 26px; padding: 13px 24px; }
.hero--voyage .hero__col + .hero__col { align-self: end; justify-self: end; width: min(100%, 335px); padding-bottom: 5px; }
.hero--voyage .card { border: 0; border-radius: 0; overflow: visible; }
.hero--voyage .card--with-bg { display: grid; grid-template-columns: 82px 1fr; gap: 16px; background: none; }
.hero--voyage .card--with-bg > picture { display: block; width: 82px; height: 70px; }
.hero--voyage .card--with-bg img { height: 70px; width: 82px; border-radius: 8px; }
.hero--voyage .card__content { position: static; padding: 0; width: auto; height: auto; min-width: 0; }
.hero--voyage .card__button { padding: 0; border: 0; border-radius: 0; background: none; font: 600 14px/1.5 'Nunito Sans', sans-serif; color: #fff; }
.hero--voyage .card:hover .card__button { text-decoration: underline; text-underline-offset: 4px; }
.hero--voyage .card--2col { margin-top: 18px; padding: 16px 0 0; border-top: 1px solid rgb(255 255 255 / 30%); gap: 18px; }
.hero--voyage .card--2col p { margin: 0; font: 400 13px/1.5 'Nunito Sans', sans-serif; color: #e0eaf0; }
.hero--voyage .card--2col strong { margin-bottom: 4px; font: 700 15px/1.4 'Nunito Sans', sans-serif; letter-spacing: 0; }
.hero--voyage .card--2col > img { width: 34px; height: 34px; }
.hero--voyage .hero__cta { position: static; display: inline-flex; margin: 18px 0 0; width: auto; height: auto; border: none; border-radius: 0; transform: none; background: none; color: #e0eaf0; font-size: 12px; text-indent: 0; overflow: visible; text-decoration: underline; text-underline-offset: 4px; }
.hero--voyage .hero__cta::before, .hero--voyage .hero__cta::after { display: none; }
.hero__video-toggle { position: absolute; bottom: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 55%); color: white; background: rgb(20 40 71 / 65%); cursor: pointer; }
.hero.hero--rubrique .hero__row { min-height: 320px; padding-block: 48px; }
.hero.hero--rubrique h1 { font-size: clamp(38px, 4.8vw, 64px); }

/* The booking dock starts with one decision, opens in place and never traps the page. */
.block-quick, .hero + .block-quick { position: relative; z-index: 2; width: 100%; max-width: none; margin: 0; padding: 0 var(--cj-gutter) 0; background: var(--cj-deck); }
.quick__card, .hero + .block-quick .quick__card { max-width: var(--cj-width); padding: 30px 36px 22px; border: 0; border-radius: 0 0 var(--cj-radius) var(--cj-radius); color: var(--cj-navy); background: #fff; box-shadow: var(--cj-dock-shadow); backdrop-filter: none; }
.quick__head { gap: 12px; }
.quick__title { color: var(--cj-navy); font-size: 25px; letter-spacing: -.025em; }
.quick__intro { margin-top: 6px; color: var(--cj-muted); font: 400 15px/1.5 'Nunito Sans', sans-serif; }
.quick__tabs { margin: 18px 0 0; padding: 0; gap: 28px; border: 0; border-bottom: 1px solid var(--cj-line); border-radius: 0; background: none; width: 100%; }
.quick__tab { padding: 12px 0; border-radius: 0; color: var(--cj-muted); font: 700 15px/1.3 'Nunito Sans', sans-serif; border-bottom: 3px solid transparent; }
.quick__tab:hover { color: var(--cj-teal); }
.quick__tab[aria-selected="true"] { color: var(--cj-navy); background: none; border-bottom-color: var(--ROSE_LOGO); box-shadow: none; }
.quick__grid { gap: 36px; margin-top: 22px; }
.quick__step, .quick__label { color: var(--cj-muted); font-size: 11px; line-height: 1.4; letter-spacing: .055em; }
.quick__step i { border: 0; background: var(--cj-navy); }
.quick__select-label { display: block; color: var(--cj-navy); font-weight: 700; font-size: 14px; margin: 0 0 7px; }
.quick__next-hint { display: none; }
.quick--guided .quick__offers, .quick--guided .quick__column--what > .quick__step { display: none; }
.quick--guided:not(.quick--selected) .quick__column--when,
.quick--guided:not(.quick--selected) .quick__footer,
.quick--guided:not(.quick--selected) .quick__options { display: none; }
.quick--guided:not(.quick--selected) .quick__grid { grid-template-columns: 1fr; max-width: 100%; }
.quick--guided:not(.quick--selected) .quick__next-hint { display: block; color: var(--cj-muted); font-size: 13px; margin: 14px 0 0; }
.quick__see-all-row { margin: 8px 0 0; }
.quick__see-all, .quick__catalog-link, .quick__catalog-price { color: var(--cj-teal); }
.quick__see-all:hover, .quick__catalog-link:hover { color: var(--cj-deep); }
.quick__options { border-color: var(--cj-line); }
.quick .reservations-quick__legend { color: var(--cj-navy); }
.quick .reservations-quick__boat, .quick .reservations-quick__choice { color: var(--cj-navy); border-color: var(--cj-line); background: var(--cj-deck); }
.quick .reservations-quick__boat[aria-checked="true"], .quick .reservations-quick__choice[aria-pressed="true"] { background: var(--cj-navy); color: #fff; border-color: var(--cj-navy); }
.quick .reservations-quick__boat-name, .quick .reservations-quick__price { color: inherit; }
.quick .reservations-quick__boat[aria-checked="true"] .reservations-quick__price { color: var(--cj-lagoon); }
.quick .reservations-quick__field label { color: var(--cj-muted); }
.quick .reservations-quick__day:hover:not(:disabled) { background: var(--cj-lagoon); color: var(--cj-navy); }
.quick .reservations-quick__day[aria-pressed="true"], .quick .reservations-quick__slot[aria-pressed="true"] { box-shadow: none; }
.quick .reservations-quick__field select { color: var(--cj-navy); background: var(--cj-deck); border-color: var(--cj-line); }
.quick__month-label { color: var(--cj-navy); }
.quick__nav { color: var(--cj-navy); border-color: var(--cj-line); background: var(--cj-deck); }
.quick__nav:hover { color: #fff; background: var(--cj-navy); }
.quick__weekdays { color: var(--cj-muted); }
.quick .reservations-quick__day { color: var(--cj-navy); border-color: var(--cj-line); background: #fff; }
.quick .reservations-quick__day:disabled { color: #71808b; background: var(--cj-deck); }
.quick .reservations-quick__day--open:hover, .quick .reservations-quick__day[aria-pressed="true"] { color: #fff; background: var(--cj-teal); border-color: var(--cj-teal); }
.quick .reservations-quick__slot { color: var(--cj-navy); border-color: var(--cj-line); background: var(--cj-deck); }
.quick .reservations-quick__slot[aria-pressed="true"], .quick .reservations-quick__slot:hover { background: var(--cj-navy); color: #fff; }
.quick__status, .quick__slots p { color: var(--cj-muted); }
.quick__footer { margin-top: 22px; padding-top: 20px; border-color: var(--cj-line); }
.quick__persons .booking-count { border-color: var(--cj-line); background: var(--cj-deck); }
.quick__persons .booking__input, .quick__persons .booking-count__button { color: var(--cj-navy); }
.quick__persons .booking-count__button:hover:not(:disabled) { color: #fff; background: var(--cj-teal); }
.quick__quote, .quick__quote .reservations-quick__total { color: var(--cj-navy); }
.quick__submit:disabled { color: #596975; background: #e2e9eb; border-color: #e2e9eb; }
.quick__trust { justify-content: flex-start; gap: 12px 24px; margin-top: 18px; border: 0; padding-top: 0; }
.quick__trust li { color: var(--cj-muted); font-size: 12px; }
.quick__trust li::before { color: var(--cj-teal); }

/* Proof earns a single horizontal band; no repeated decorative card boxes. */
.home .trust-bar { padding: 42px 0 30px; background: var(--cj-deck); border-radius: 0; width: 100%; max-width: none; margin: 0; padding-inline: max(var(--cj-gutter), calc((100% - var(--cj-width)) / 2)); }
.trust-bar { gap: 25px; }
.trust-bar__item { align-items: flex-start; gap: 12px; }
.trust-bar__item .icon { width: 28px; height: 28px; background-size: contain; }
.trust-bar__item p { font-family: 'Nunito Sans', sans-serif; font-size: 13px; line-height: 1.5; }
.trust-bar__item strong { margin-bottom: 4px; font-size: 14px; font-weight: 700; }
.trust-bar__item p span { color: var(--cj-muted); }

/* Discovery is a readable catalogue, not a wall of oversized promotional tiles. */
.discovery-heading { width: min(calc(100% - 2 * var(--cj-gutter)), var(--cj-width)); margin: auto; padding: 64px 0 26px; display: flex; justify-content: space-between; align-items: end; gap: 24px; text-align: left; }
.discovery-heading .heading1 { margin: 0; max-width: 650px; }
.discovery-heading .link { flex-shrink: 0; color: var(--cj-teal); font: 700 14px/1.5 'Nunito Sans', sans-serif; text-underline-offset: 5px; }
.products, .products.columns-4, .products.products--featured { width: min(calc(100% - 2 * var(--cj-gutter)), var(--cj-width)); max-width: var(--cj-width); margin: 0 auto 64px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 26px; }
.content-flow > .hero + .products { margin-top: 40px; }
.products .product, .products.products--featured .product { position: relative; display: flex; flex-direction: column; grid-column: auto; grid-row: auto; width: 100%; max-width: none; padding: 0 0 20px; margin: 0; background: none; border: 0; border-bottom: 1px solid var(--cj-line); border-radius: 0; text-decoration: none; color: var(--cj-navy); overflow: visible; box-shadow: none; }
.products .product .thumbnail { flex: none; width: 100%; height: auto; aspect-ratio: 1.6; margin: 0 0 17px; overflow: hidden; border-radius: var(--cj-radius); }
.products .product .thumbnail img { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; filter: none; transition: transform .35s ease-out; }
.products .product:hover .thumbnail img { scale: 1; transform: scale(1.035); }
.products .product .thumbnail .thumbnail-description { display: none; }
.products .product .title { display: block; max-height: none; overflow: visible; margin: 0 0 12px; padding: 0; font: 600 19px/1.4 Poppins, sans-serif; letter-spacing: -.025em; color: var(--cj-navy); }
.products .product:hover .title { color: var(--cj-teal); text-decoration: none; }
.products .product .description { display: none; }
.products .product .min-booking { position: static; margin: auto 0 8px; padding: 0; color: var(--cj-muted); background: none; font: 400 14px/1.5 'Nunito Sans', sans-serif; border-radius: 0; }
.products .product .price { position: static; display: block; margin: 0; padding: 0; color: var(--cj-navy); background: none; font: 700 18px/1.5 'Nunito Sans', sans-serif; }
.products .product .quick-preview { position: static; width: fit-content; margin: 14px 0 0; padding: 0; min-height: 28px; border: 0; border-radius: 0; color: var(--cj-teal); background: none; font: 700 14px/1.5 'Nunito Sans', sans-serif; transform: none; opacity: 1; visibility: visible; }
.products .product .quick-preview span { margin-left: 7px; }
.home .products.products--featured { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.home .products .product .title { font-size: 17px; }
.home .products .product .thumbnail { aspect-ratio: 1.15; }

/* Fleet: factual capacity first, secondary details on demand. */
.fleet { width: min(calc(100% - 2 * var(--cj-gutter)), var(--cj-width)); margin: 0 auto; padding: 50px 0 64px; }
.fleet__heading { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 26px; }
.fleet__heading h2 { margin: 0; color: var(--cj-navy); font: 600 clamp(28px, 3vw, 40px)/1.2 Poppins, sans-serif; letter-spacing: -.035em; }
.fleet__heading > p { max-width: 37ch; margin: 0; font-size: 15px; line-height: 1.6; color: var(--cj-muted); }
.fleet__filters { display: grid; grid-template-columns: 1fr 1.4fr 1.2fr auto; align-items: end; gap: 20px; padding: 24px; background: var(--cj-deck); border-radius: var(--cj-radius); }
.fleet__field { display: flex; flex-direction: column; min-width: 0; gap: 8px; }
.fleet__field > span { font-size: 13px; font-weight: 700; color: var(--cj-navy); }
.fleet__field input, .fleet__field select { min-width: 0; width: 100%; min-height: 48px; border: 1px solid #b6c9ce; border-radius: 6px; background: #fff; color: var(--cj-navy); padding: 11px 12px; font-size: 15px; }
.fleet__field input::placeholder { color: var(--cj-muted); opacity: 1; }
.fleet__field--guests input { border-color: var(--cj-teal); }
.fleet__reset { min-height: 48px; border: 0; background: none; color: var(--cj-teal); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.fleet__status { min-height: 56px; display: flex; justify-content: space-between; align-items: center; gap: 20px; color: var(--cj-muted); font-size: 13px; }
.fleet__status p { margin: 12px 0; }
.fleet__status [data-fleet-count] { color: var(--cj-navy); font-weight: 700; }
.fleet__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 26px; align-items: start; }
.boat-card { min-width: 0; border-bottom: 1px solid var(--cj-line); }
.boat-card__media { position: relative; }
.boat-card__visual { display: block; position: relative; border-radius: var(--cj-radius); overflow: hidden; aspect-ratio: 1.6; background: var(--cj-deck); }
.boat-card__visual img { display: block; width: 100%; height: 100%; object-fit: cover; filter: none; transition: transform .35s ease-out; }
.boat-card:hover .boat-card__visual img { scale: 1; transform: scale(1.035); }
.boat-card__capacity { position: absolute; bottom: 12px; left: 12px; padding: 6px 10px; border-radius: 5px; background: white; color: var(--cj-navy); font-size: 12px; line-height: 1.4; font-weight: 700; }
.boat-card__body { padding: 18px 0 20px; }
.boat-card__title { min-height: 54px; margin: 0 0 10px; font: 600 18px/1.5 Poppins, sans-serif; letter-spacing: -.025em; }
.boat-card__title a { text-decoration: none; color: var(--cj-navy); }
.boat-card__title a:hover { color: var(--cj-teal); text-decoration: underline; text-underline-offset: 3px; }
.boat-card__description { margin: 0 0 13px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--cj-muted); font: 400 14px/1.6 'Nunito Sans', sans-serif; }
.boat-card__details { margin: 0 0 14px; font-size: 13px; }
.boat-card__details summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--cj-teal); font-weight: 700; cursor: pointer; min-height: 32px; list-style: none; }
.boat-card__details summary::-webkit-details-marker { display: none; }
.boat-card__details summary span { font-size: 22px; font-weight: 400; }
.boat-card__details[open] summary span { transform: rotate(45deg); }
.boat-card__details ul { padding: 0 0 0 18px; margin: 8px 0 0; color: var(--cj-muted); }
.boat-card__details li { padding: 3px 0; }
.boat-card__excluded { text-decoration: line-through; }
.boat-card__footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 15px; }
.boat-card__footer .price { color: var(--cj-navy); font-size: 19px; font-weight: 700; }
.boat-card__book { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 9px 13px; color: var(--cj-teal); background: #eaf4f4; border-radius: 6px; font-size: 13px; font-weight: 700; text-decoration: none; }
.boat-card__book:hover { color: #fff; background: var(--cj-teal); }
.fleet__empty { padding: 55px 20px; text-align: center; background: var(--cj-deck); border-radius: var(--cj-radius); }
.fleet__empty h3 { font: 600 24px/1.3 Poppins, sans-serif; color: var(--cj-navy); }
.fleet__empty p { color: var(--cj-muted); }
.fleet__empty a { display: inline-block; margin: 14px; color: var(--cj-teal); }

/* The captain is the human proof, with his real portrait and full story. */
.home .about { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 80px; padding: 70px max(var(--cj-gutter), calc((100% - var(--cj-width)) / 2)); margin: 0; background: var(--cj-deck); }
/* The palm of the original site stays behind the captain's story, on the text side. */
.home .about::before { content: ""; display: block; position: absolute; top: 50%; left: 0; right: auto; bottom: auto; width: 296px; height: 696px; max-height: 100%; background: url("images/palm-tree.svg") no-repeat left center / contain; transform: translateY(-50%); z-index: -1; pointer-events: none; }
.home .about::after { display: none; }
.home .about__col { width: auto; max-width: none; padding: 0; }
.home .about__pink { color: #b83464; margin-bottom: 16px; font: 400 25px/1.2 'Blambot Casual', sans-serif; }
.home .about .heading1 { margin: 0 0 22px; }
.home .about p { font: 400 15px/1.75 'Nunito Sans', sans-serif; color: var(--cj-muted); max-width: 68ch; margin: 0 0 15px; }
.home .about .list { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 20px; margin-top: 26px; }
.home .about .list__item { gap: 9px; font: 400 12px/1.5 'Nunito Sans', sans-serif; color: var(--cj-ink); }
.home .about .list__item img { width: 17px; height: 17px; }
.home .about__visual { margin: 0; width: 100%; max-width: none; border-radius: var(--cj-radius); overflow: hidden; background: var(--cj-lagoon); transform: none; }
.home .about__visual::before, .home .about__visual::after { display: none; }
.home .about__visual img { display: block; width: 100%; height: 600px; max-height: 65vw; object-fit: cover; border-radius: 0; }

/* The same hierarchy reaches detail pages, events, FAQ and the footer. */
.product-hero { padding: 0; height: 420px; min-height: 0; background: var(--cj-deep); }
.product-hero__bg { position: absolute; inset: 0 0 0 46%; width: 54%; height: 100%; border-radius: 0; }
.product-hero__bg::after { background: linear-gradient(90deg, var(--cj-deep), transparent 55%); border-radius: 0; }
.product-hero__visual { filter: none; }
/* Left edge = the content column below (gallery, booking form): the gutter on narrow screens,
   the start of the centred --cj-width column on wide ones. Percentages resolve on the hero width. */
.product-hero__content { left: 0; bottom: auto; top: 0; transform: none; width: 68%; height: 100%; padding: 70px var(--cj-gutter) 35px max(var(--cj-gutter), calc((100% - var(--cj-width)) / 2)); display: flex; justify-content: center; flex-direction: column; align-items: flex-start; }
.product-hero h1, .product-hero.product-hero--centered h1 { margin: 0; text-align: left; max-width: 760px; font: 600 clamp(28px, 3.2vw, 44px)/1.2 Poppins, sans-serif; letter-spacing: -.035em; text-shadow: none; }
/* Duration and price read like the subtitle of the section heroes; the button sits below them. */
.product-hero__summary { margin: 24px 0 0; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 4px; }
.product-hero__summary p { margin: 0; text-align: left; font: 400 18px/1.6 'Nunito Sans', sans-serif; color: #e0eaf0; text-shadow: none; }
.product-hero__summary .product-hero__price { font: 700 22px/1.45 'Nunito Sans', sans-serif; color: var(--cj-lagoon); }
.product-hero__summary .button { margin-top: 20px; }
/* Same left edge as the hero content and the column below; cancels the legacy 90px desktop indent. */
.breadcrumb--hero { top: 22px; left: max(var(--cj-gutter), calc((100% - var(--cj-width)) / 2)); right: max(var(--cj-gutter), calc((100% - var(--cj-width)) / 2)); width: auto; padding-left: 0; transform: none; font-size: 11px; }
.trip-overview { padding: 28px var(--cj-gutter); background: var(--cj-deck); }
.product-detail-layout { width: min(calc(100% - 2 * var(--cj-gutter)), var(--cj-width)); margin: 40px auto; padding: 0; gap: 40px; align-items: start; }
.product-detail-layout__title { font-size: 23px; letter-spacing: -.025em; }
.product-detail-layout__summary .block-booking { border-radius: var(--cj-radius); }
.product-detail-layout__gallery .gallery { gap: 12px; }
.product-detail-layout__gallery .gallery__item { border-radius: 8px; }
.product-seo { width: min(calc(100% - 2 * var(--cj-gutter)), var(--cj-width)); margin: 0 auto 60px; padding: 35px 0 0; border-top: 1px solid var(--cj-line); }
.product-description { max-width: 78ch; margin: auto; }
.product-description p { font-family: 'Nunito Sans', sans-serif; line-height: 1.75; }
.group-events-hero { margin: 0; border-radius: 0; background: var(--cj-deep); }
.group-events-hero__bg { left: 42%; width: 58%; background: var(--cj-teal); }
.group-events-hero__bg img { filter: none; }
.group-events-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--cj-deep), transparent 34%), linear-gradient(0deg, rgb(20 40 71 / 48%), transparent 55%); }
/* Same title and subtitle as the section heroes (Experiences, Destinations): left aligned. */
.group-events-hero__row { width: min(100%, 1440px); height: auto; min-height: 360px; margin: auto; padding: 60px var(--cj-gutter); justify-content: center; align-items: flex-start; gap: 0; }
.group-events-hero h1, .group-events-hero p { text-align: left; }
.group-events-hero h1 { max-width: 760px; font: 600 clamp(38px, 4.8vw, 64px)/1.1 Poppins, sans-serif; letter-spacing: -.035em; }
.group-events-hero p { max-width: 60ch; margin-top: 24px; font: 400 18px/1.6 'Nunito Sans', sans-serif; color: #e0eaf0; }
.block-faq { width: 100%; max-width: var(--cj-width); margin: 0 auto; padding: 65px var(--cj-gutter); }
.block-faq .accordion-head h2 { color: var(--cj-navy); font-size: clamp(28px, 3vw, 38px); line-height: 1.2; letter-spacing: -.03em; }
.block-faq .accordion-item { border-radius: 0; border: 0; border-bottom: 1px solid var(--cj-line); background: transparent; box-shadow: none; }
.block-faq .accordion-item summary { color: var(--cj-navy); font-size: 16px; line-height: 1.5; padding-block: 20px; }
.block-faq .accordion-item[open] { background: transparent; }
.block-faq .accordion-panel { color: var(--cj-muted); font: 400 15px/1.75 'Nunito Sans', sans-serif; }
.newsletter { width: 100%; max-width: none; margin: 0; padding: 32px var(--cj-gutter); border-radius: 0; background: var(--cj-deck); }
.newsletter::before { display: none; }
.newsletter__title { color: var(--cj-navy); font-size: 23px; letter-spacing: -.02em; }
.newsletter__mention, .newsletter__intro { color: var(--cj-muted); }
.site-footer, .newsletter + .site-footer { color: #dce8ed; margin: 0; border-radius: 0; padding: 54px var(--cj-gutter); background: var(--cj-deep); }
.footer__tagline { color: #f48eb0; }
.footer__intro { color: #dce8ed; font: 400 14px/1.7 'Nunito Sans', sans-serif; }
.site-footer .heading3, .site-footer .footer__phone { color: var(--cj-lagoon); }
.site-footer .navs__menu > li > a, .site-footer .footer__contact-note { color: #dce8ed; font-family: 'Nunito Sans', sans-serif; font-size: 14px; }
.site-footer .navs__menu > li > a:hover { color: #fff; }
.site-footer .footer__logo { background: #fff; border-radius: 8px; padding: 8px; width: 172px; height: auto; }
.site-footer .footer__chip { color: var(--cj-lagoon); border-color: #69858f; }
.site-footer .footer__group { border-color: #486175; }
.site-footer .footer__chevron { filter: brightness(0) invert(1); }
.footer__group-summary { font-size: 13px; letter-spacing: .04em; }
.footer-bar { border-radius: 0; }
.whatsapp-cta { left: auto; right: 20px; bottom: 24px; width: 48px; height: 48px; }
.whatsapp-cta__bg { width: 48px; height: 48px; background: #187a51; box-shadow: 0 4px 16px rgb(20 40 71 / 15%); }
.whatsapp-cta img { width: 30px; height: 30px; }
.back_to_top { right: 26px; bottom: 84px; }

/* A single real review is given a readable column, never padded with fictional proof. */
.block-reviews { width: min(calc(100% - 2 * var(--cj-gutter)), var(--cj-width)); margin: 0 auto; padding: 54px 0 10px; }
.reviews__heading { font-size: 30px; font-weight: 600; letter-spacing: -.025em; }
.reviews__list:has(> :only-child) { display: block; max-width: 680px; margin: 0 auto; }
.reviews__item { box-shadow: none; background: var(--cj-deck); padding: 26px; }
.reviews__body { font-size: 18px; }
.block-faq .accordion-head { text-align: left; margin-bottom: 24px; }
.block-faq .accordion-list { max-width: none; }
.block-faq .accordion-item { box-shadow: none; }
.block-faq .accordion-item[open] { border: 0; border-bottom: 1px solid var(--cj-line); box-shadow: none; }
.block-faq .accordion-item summary { padding-inline: 0; }
.block-faq .accordion-panel { padding: 0 0 22px; }
.faq-contact { border-radius: 8px; }
.button--whatsapp { background: #187a51; border-color: #187a51; }
.product-practical { margin-top: 24px; padding-top: 6px; border-top: 1px solid var(--cj-line); }
.product-practical > summary { padding: 15px 0; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--cj-navy); }
.product-practical .block-features { border: 0; padding: 18px 0; }
.product-practical .key-info__body { color: var(--cj-muted); }
.product-detail-layout__gallery .gallery__item, .product-detail-layout__gallery .gallery__item:first-of-type { padding: 0; border: 0; border-radius: 8px; }
.product-detail-layout__gallery .gallery__item:first-of-type { aspect-ratio: 1.4; }
.gallery__browse { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; color: var(--cj-teal); font-size: 14px; font-weight: 700; text-underline-offset: 4px; margin-top: 10px; }
.trip-overview .ice-cards { display: grid; grid-template-columns: repeat(3, 1fr); max-width: var(--cj-width); margin: auto; gap: 28px; }
.trip-overview .ice-card { border: 0; padding: 10px 0; gap: 10px; }
.trip-overview .ice-card__title { color: var(--cj-navy); font: 700 16px/1.4 'Nunito Sans', sans-serif; gap: 12px; }
.trip-overview .ice-card__title .icon { width: 26px; height: 26px; background-size: contain; }
.trip-overview .ice-card p { color: var(--cj-muted); font: 400 14px/1.6 'Nunito Sans', sans-serif; }
.checkout { padding-top: 42px; }
.page-header { padding-top: 42px; }
@media (max-width: 639px) {
    .trip-overview .ice-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .trip-overview .ice-card__title { font-size: 14px; align-items: flex-start; }
    .trip-overview .ice-card p { font-size: 13px; }
    .product-detail-layout__gallery .gallery__item:nth-of-type(n+6) { display: none; }
    .product-detail-layout__gallery .gallery__item:first-of-type { aspect-ratio: 1.6; }
    .checkout { padding-top: 26px; }
}
@media (min-width: 1200px) {
    .header { padding-block: 0; }
    .header__navigation { margin-left: auto; margin-right: 0; align-self: stretch; }
    .header__navigation .menu { display: flex; height: 100%; gap: clamp(12px, 1.2vw, 20px); }
    .header__navigation .menu > .menu-item { padding: 0; margin: 0; height: 100%; min-height: 87px; }
    .header__navigation .menu > .menu-item-has-children > a::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
    .header__navigation .sub-menu { top: 100%; left: -24px; transform: none; min-width: 320px; max-width: min(420px, 90vw); padding: 12px; gap: 2px; border-radius: 0 0 10px 10px; border: 1px solid var(--cj-line); border-top: 0; box-shadow: 0 18px 24px -20px rgb(20 40 71 / 35%); max-height: calc(100dvh - 130px); overflow-y: auto; }
    .header__navigation .sub-menu::before { display: none; }
    .header__navigation .menu .menu-item--dismissed > .sub-menu { display: none; }
    .header__navigation .sub-menu .menu-item > a { white-space: normal; }
    .header__navigation .sub-menu .menu-item > a > span { flex-shrink: 1; }
    .lang-switch { width: 54px; }
    .lang-switch__toggle { gap: 8px; }
    .lang-switch__toggle .lang-switch__native { display: none; }
    .header__toggle { display: none; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
    .header { padding-inline: 24px; gap: 16px; }
    .header__cta { gap: 12px; }
}
@media (max-width: 1199px) {
    .header__navigation { width: 100%; top: 100%; padding: 20px 24px; border-radius: 0 0 10px 10px; gap: 16px; box-shadow: 0 18px 24px -20px rgb(20 40 71 / 35%); border-bottom: 1px solid var(--cj-line); transition: transform .2s ease-out; }
    .header__navigation .menu { gap: 4px; padding: 0; }
    .header__navigation .menu > .menu-item > a { min-height: 44px; padding: 10px 0; }
    .header__navigation .sub-menu { display: none; }
    .header__navigation .header__cta { padding: 12px 0 0; gap: 14px; border-top: 1px solid var(--cj-line); }
}
@media (min-width: 768px) {
    .home .trust-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1199px) {
    .header { min-height: 78px; }
    .hero--voyage .hero__row, .home .hero--voyage .hero__row { min-height: 490px; gap: 36px; }
    .home .products.products--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home .products .product .thumbnail { aspect-ratio: 1.6; }
    .home .about { gap: 36px; }
    .fleet__filters { gap: 14px; padding: 20px; }
    .quick__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 991px) {
    .header { padding: 10px var(--cj-gutter); min-height: 76px; }
    .header__branding > a > img { width: 135px; height: 52px; }
    .header__navigation { top: 100%; max-height: calc(100dvh - 76px); overflow-y: auto; }
    .header__navigation .menu { padding: 12px 24px; }
    .header__navigation .menu > .menu-item > a { font-size: 16px; }
    .header__cta { padding: 8px 24px 20px; }
    .products, .products.columns-4, .products.products--featured, .fleet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero--voyage .hero__row, .home .hero--voyage .hero__row { grid-template-columns: 1.2fr .8fr; gap: 25px; min-height: 440px; }
    .hero.hero--voyage h1 { font-size: 48px; }
    .hero.hero--rubrique .hero__row { min-height: 290px; }
    .hero--voyage .hero__col + .hero__col { width: 230px; }
    .hero--voyage .card--with-bg { grid-template-columns: 1fr; }
    .hero--voyage .card--with-bg > picture, .hero--voyage .card--with-bg img { display: none; }
    .hero--voyage .hero__col:first-child > p { font-size: 16px; }
    .home .trust-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fleet__filters { grid-template-columns: 1fr 1fr; }
    .fleet__reset { text-align: left; }
    .fleet__heading { align-items: start; flex-direction: column; gap: 16px; }
    .home .about { grid-template-columns: 1fr .7fr; gap: 28px; padding-block: 48px; }
    .home .about .list { grid-template-columns: 1fr; }
    .home .about__visual img { height: 620px; max-height: none; }
    .product-hero { height: 390px; }
    .product-hero__content { width: 80%; }
    .product-detail-layout { gap: 24px; }
}
@media (max-width: 639px) {
    :root { --cj-gutter: 20px; }
    html { scroll-padding-top: 88px; }
    .top-banner { height: 30px; padding-block: 7px; justify-content: center; }
    .top-banner__last { display: none; }
    .top-banner__first p { font-size: 13px; }
    .hero--voyage .hero__bg { left: 0; width: 100%; opacity: .5; }
    .hero--voyage .hero__bg::after { background: linear-gradient(90deg, var(--cj-deep), rgb(20 40 71 / 15%)), linear-gradient(0deg, var(--cj-deep), transparent 60%); }
    .hero--voyage .hero__row, .home .hero--voyage .hero__row { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 42px 24px 35px; gap: 30px; }
    .hero.hero--voyage h1 { font-size: clamp(39px, 11.5vw, 58px); }
    .hero--voyage .hero__col:first-child > p { font-size: 16px; line-height: 1.5; margin-top: 20px; max-width: 30ch; }
    .hero--voyage .button { margin-top: 22px; }
    .hero--voyage .hero__col + .hero__col { width: auto; align-self: stretch; padding: 20px 42px 0 0; border-top: 1px solid rgb(255 255 255 / 25%); }
    .hero--voyage .card--with-bg { grid-template-columns: 58px 1fr; gap: 12px; }
    .hero--voyage .card--with-bg > picture { display: block; width: 58px; height: 50px; }
    .hero--voyage .card--with-bg img { display: block; width: 58px; height: 50px; }
    .hero--voyage .card__button { font-size: 12px; }
    .hero--voyage .card--2col { display: none; }
    .hero--voyage .hero__cta { margin-top: 12px; }
    .hero.hero--rubrique .hero__row { min-height: 0; padding-block: 36px; gap: 22px; }
    .hero.hero--rubrique h1 { font-size: 40px; }
    .hero--rubrique .hero__col + .hero__col { padding-top: 14px; }
    .hero--rubrique .card--2col { display: flex; margin: 0; padding: 0; border: 0; }
    .hero--rubrique .card--2col p { font-size: 12px; }
    .hero--rubrique .card--2col strong { font-size: 14px; }
    .block-quick, .hero + .block-quick { padding-inline: 0; }
    .quick__card, .hero + .block-quick .quick__card { padding: 26px 20px 22px; border-radius: 0; }
    .quick__title { font-size: 23px; }
    .quick__intro { font-size: 14px; }
    .quick__tabs { gap: 12px; margin-top: 14px; }
    .quick__tab { padding: 12px 0 9px; font-size: 13px; min-height: 46px; }
    .quick__grid { grid-template-columns: 1fr; gap: 25px; }
    .quick--guided:not(.quick--selected) .quick__next-hint { float: none; margin: 14px 0 0; font-size: 12px; }
    .quick__trust { gap: 6px; flex-direction: column; align-items: flex-start; margin-top: 16px; }
    .quick__trust li { font-size: 11px; }
    .quick .reservations-quick__day { min-height: 42px; max-width: none; }
    .quick__footer { flex-direction: column; align-items: stretch; }
    .quick__decide { flex-direction: column; align-items: stretch; }
    .quick__submit { width: 100%; }
    .home .trust-bar { padding: 28px 20px; gap: 24px 18px; }
    .trust-bar__item { gap: 8px; }
    .trust-bar__item .icon { width: 24px; height: 24px; }
    .trust-bar__item strong { font-size: 12px; }
    .trust-bar__item p span { font-size: 11px; }
    .discovery-heading { padding: 40px 0 22px; align-items: start; flex-direction: column; gap: 14px; }
    .discovery-heading .heading1 { font-size: 30px; }
    .products, .products.columns-4, .products.products--featured, .home .products.products--featured, .fleet__grid { grid-template-columns: 1fr; gap: 28px; }
    .products, .products.columns-4, .products.products--featured { margin-bottom: 40px; }
    .products .product .thumbnail, .home .products .product .thumbnail { aspect-ratio: 1.65; margin-bottom: 14px; }
    .products .product .title, .home .products .product .title { font-size: 18px; }
    .products .product .quick-preview { min-height: 32px; }
    .fleet { padding: 34px 0 40px; }
    .fleet__heading h2 { font-size: 29px; }
    .fleet__heading > p { font-size: 14px; }
    .fleet__filters { grid-template-columns: 1fr; padding: 18px; gap: 14px; }
    .fleet__field input, .fleet__field select { font-size: 16px; }
    .fleet__reset { min-height: 34px; justify-self: start; }
    .fleet__status { align-items: start; flex-direction: column; gap: 0; }
    .fleet__status p { margin: 12px 0; }
    .boat-card__title { min-height: 0; }
    .boat-card__details summary { min-height: 44px; }
    .home .about { display: flex; flex-direction: column-reverse; gap: 28px; padding: 40px 20px; }
    .home .about__col { width: 100%; }
    .home .about__visual img { height: 350px; object-position: center 35%; }
    .home .about .heading1 { font-size: 30px; }
    .home .about p { font-size: 14px; }
    .home .about .list { grid-template-columns: 1fr; margin-top: 22px; }
    .product-hero { height: auto; min-height: 400px; }
    .product-hero__bg { inset: 0; width: 100%; opacity: .45; }
    .product-hero__bg::after { background: linear-gradient(90deg, var(--cj-deep), rgb(20 40 71 / 25%)); }
    .product-hero__content { position: relative; width: 100%; padding: 70px var(--cj-gutter) 32px; height: auto; min-height: 400px; }
    .product-hero h1, .product-hero.product-hero--centered h1 { font-size: 29px; }
    .product-hero__summary { margin-top: 18px; }
    .breadcrumb--hero { top: 16px; left: var(--cj-gutter); right: var(--cj-gutter); font-size: 10px; }
    .product-detail-layout { display: flex; flex-direction: column; margin-block: 26px; }
    .product-detail-layout__gallery, .product-detail-layout__summary { width: 100%; }
    .trip-overview { padding: 22px 20px; }
    .group-events-hero__bg { left: 0; width: 100%; opacity: .5; }
    .group-events-hero__bg::after { background: linear-gradient(90deg, var(--cj-deep), rgb(20 40 71 / 15%)), linear-gradient(0deg, var(--cj-deep), transparent 60%); }
    .group-events-hero__row { width: 100%; min-height: 330px; padding: 42px 24px; }
    .group-events-hero h1 { font-size: 40px; }
    .group-events-hero p { font-size: 16px; line-height: 1.5; margin-top: 20px; }
    .home .about::before { width: 200px; top: 0; transform: none; height: 470px; opacity: .8; }
    .block-faq { padding: 40px 20px; }
    .accordion-item summary { font-size: 15px; }
    .newsletter { padding: 28px 20px; }
    .newsletter__title { font-size: 22px; }
    .site-footer, .newsletter + .site-footer { padding: 40px 20px; }
    .whatsapp-cta { right: 14px; bottom: 18px; }
    .back_to_top { right: 20px; bottom: 78px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
    .fleet__filters, .fleet__status, .hero__video-toggle { display: none !important; }
    .fleet__grid, .products { grid-template-columns: repeat(2, 1fr); }
}

/* Réservations à reprendre — accessible même quand le menu mobile est fermé. */
.header.header--cart-open { z-index: 210; }
.booking-cart { flex-shrink: 0; }
.booking-cart__toggle {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 8px;
    border: 0;
    border-radius: 8px;
    background: var(--cj-deck);
    color: var(--cj-navy);
    cursor: pointer;
}
.booking-cart__toggle:hover, .booking-cart__toggle[aria-expanded="true"] { background: var(--cj-lagoon); }
.booking-cart__badge {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border-radius: 50%;
    background: var(--ROSE_LOGO);
    color: var(--cj-deep);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.booking-cart__panel {
    position: absolute;
    z-index: 95;
    top: calc(100% + 8px);
    right: var(--cj-gutter);
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100dvh - 160px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 40px -10px rgb(20 40 71 / 30%);
    color: var(--cj-ink);
    text-align: left;
}
.booking-cart__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.booking-cart__head h2 { margin: 0; font-family: Poppins, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--cj-navy); }
.booking-cart__close { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; margin: -8px -8px -8px 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--cj-navy); cursor: pointer; }
.booking-cart__close:hover { background: var(--cj-deck); }
.booking-cart__intro { margin: 12px 0 20px; font-size: 15px; line-height: 1.5; color: var(--cj-muted); }
.booking-cart__status { margin: 12px 0; font-size: 14px; line-height: 1.5; color: var(--cj-teal); }
.booking-cart__status:empty { display: none; }
.booking-cart__list { list-style: none; padding: 0; margin: 0; }
.booking-cart__item { padding: 20px 0; border-top: 1px solid var(--cj-line); }
.booking-cart__trip { margin: 0 0 4px; color: var(--cj-navy); font-family: Poppins, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.4; text-wrap: pretty; overflow-wrap: anywhere; }
.booking-cart__boat { margin: 0 0 12px; font-size: 14px; color: var(--cj-muted); line-height: 1.5; overflow-wrap: anywhere; }
.booking-cart__date { margin: 8px 0 3px; color: var(--cj-ink); font-size: 15px; font-weight: 700; line-height: 1.5; }
.booking-cart__details { margin: 0; color: var(--cj-muted); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.booking-cart__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 16px; }
.booking-cart__resume { font-size: 14px; padding: 10px 18px; }
.booking-cart__remove { min-height: 44px; padding: 8px 0; border: 0; background: none; color: var(--cj-muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.booking-cart__remove:hover { color: var(--cj-navy); }
.booking-cart__foot { margin: 0 -24px -24px; padding: 16px 24px; background: var(--cj-deck); color: var(--cj-muted); font-size: 13px; line-height: 1.5; }
.booking-cart__empty { padding: 16px 0 8px; }
.booking-cart__empty p { font-size: 15px; line-height: 1.6; color: var(--cj-muted); margin: 0 0 20px; }
.booking-cart__empty .booking-cart__empty-title { color: var(--cj-navy); font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.booking-cart__empty .button { font-size: 14px; }
.booking-cart :is(button, a):focus-visible, .booking-cart__panel:focus-visible, .checkout__saved button:focus-visible { outline: 2px solid var(--cj-teal); outline-offset: 3px; }
.checkout__saved { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--cj-muted); }
.checkout__saved button { min-height: 44px; padding: 8px 0; border: 0; background: none; color: var(--cj-teal); font-size: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 1199px) {
    .booking-cart { margin-left: auto; }
    .header__toggle { margin-left: 0; margin-right: 0; }
}
@media (max-width: 991px) {
    .header { gap: 16px; }
    .booking-cart__panel { right: 16px; max-height: calc(100dvh - 138px); padding: 20px; }
    .booking-cart__foot { margin: 0 -20px -20px; padding: 16px 20px; }
    .booking-cart__head h2 { font-size: 20px; }
    .checkout__saved { justify-content: flex-start; }
}
@media print {
    .booking-cart, .checkout__saved { display: none !important; }
}

/* Gift card purchase and tender reuse the booking checkout's fields and typography. */
.gift-purchase { max-width: 54rem; }
.gift-purchase > .checkout-card { width: 100%; padding: clamp(1.5rem, 4vw, 3.5rem); }
.gift-purchase__form { display: grid; gap: 1.5rem; margin-top: 2rem; }
.gift-purchase .heading1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.gift-code { width: 100%; padding-block: 1.25rem; border-block: 1px solid var(--checkout-rule, #dce2e7); }
.gift-code summary { cursor: pointer; font-weight: 600; }
.gift-code[open] summary { margin-bottom: 1rem; }
.gift-code .checkout__field { margin-block: 0 1rem; }
.gift-code .checkout__hint { margin-top: 1rem; }
.gift-code [role="status"]:empty { display: none; }
.gift-code [role="status"] { margin-top: 1rem; }
.gift-code [hidden] { display: none; }
.gift-code .checkout-recap__lines { margin-top: 1rem; }
.gift-card-cta { padding-block: clamp(2rem, 5vw, 4rem); text-align: center; }
.gift-card-cta p { margin-block: 1rem 1.5rem; }
.gift-purchase .checkout__fieldset { border: 0; padding: 0; margin: 0; }
.gift-purchase .checkout__legend { padding: 0; margin-bottom: 1rem; font-family: Poppins, sans-serif; font-weight: 600; color: var(--BLEU_FONC); }
.gift-code, .gift-code * { box-sizing: border-box; }

/* Trip picker: one compact field, a bottom sheet on phones, a centered dialog on desktop.
   The original catalog buttons remain in the form as the booking plugin's integration boundary. */
.quick--guided .quick__form > .quick__tabs,
.quick--guided .quick__panel,
.quick--guided:not(.quick--selected) .quick__next-hint { display: none; }
.quick__trip-summary[hidden], .quick-picker [hidden] { display: none; }
.quick__trip { min-width: 0; width: 100%; }
.quick__trip-trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-width: 0; min-height: 60px; padding: 15px 16px; border: 1px solid #b6c9ce; border-radius: 8px; background: var(--cj-deck); color: var(--cj-navy); text-align: left; cursor: pointer; }
.quick__trip-trigger:hover { border-color: var(--cj-teal); }
.quick__trip-title { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font: 700 16px/1.45 'Nunito Sans', sans-serif; }
.quick__trip-action { display: flex; flex-shrink: 0; align-items: center; gap: 12px; color: var(--cj-teal); font: 700 13px/1.4 'Nunito Sans', sans-serif; }
.quick__trip-action::after { content: ''; display: block; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.quick__trip-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 16px; margin-top: 11px; font: 400 14px/1.5 'Nunito Sans', sans-serif; }
.quick__trip-meta { color: var(--cj-muted); }
.quick__trip-price { color: var(--cj-teal); font-weight: 700; }
html.quick-picker-open { overflow: hidden; }
.quick-picker { position: fixed; inset: auto 0 0; margin: 0; width: 100%; max-width: none; height: 85vh; height: 85dvh; max-height: calc(100% - env(safe-area-inset-top) - 12px); padding: 0; border: 0; border-radius: 20px 20px 0 0; background: #fff; color: var(--cj-navy); overflow: hidden; font-family: 'Nunito Sans', sans-serif; }
.quick-picker[open] { display: flex; flex-direction: column; animation: quick-picker-enter 220ms cubic-bezier(.16, 1, .3, 1); }
.quick-picker::backdrop { background: rgb(20 40 71 / 48%); }
.quick-picker::before { content: ''; flex: 0 0 4px; width: 36px; margin: 10px auto 0; border-radius: 3px; background: #b6c9ce; }
.quick-picker__head { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 10px 24px; }
.quick-picker__title { margin: 0; color: var(--cj-navy); font: 600 22px/1.3 Poppins, sans-serif; letter-spacing: -.025em; }
.quick-picker__close { display: grid; place-items: center; flex: 0 0 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--cj-navy); font: 400 28px/1 'Nunito Sans', sans-serif; cursor: pointer; }
.quick-picker__close:hover { background: var(--cj-deck); }
.quick-picker__tabs { display: flex; flex-wrap: wrap; flex-shrink: 0; gap: 0 18px; padding: 0 24px; border-bottom: 1px solid var(--cj-line); }
.quick-picker__tab { flex: 1 1 75px; min-width: 0; min-height: 48px; padding: 10px 0; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--cj-muted); font: 700 14px/1.4 'Nunito Sans', sans-serif; overflow-wrap: anywhere; cursor: pointer; }
.quick-picker__tab[aria-selected="true"] { border-bottom-color: var(--cj-teal); color: var(--cj-teal); }
.quick-picker__list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 24px 16px; scrollbar-width: thin; }
.quick-picker__group { margin: 24px 0 0; color: var(--cj-muted); font: 700 14px/1.4 'Nunito Sans', sans-serif; }
.quick-picker__offer { display: flex; align-items: center; gap: 16px; width: 100%; min-width: 0; padding: 20px 16px; border: 0; border-bottom: 1px solid var(--cj-line); background: #fff; color: var(--cj-navy); text-align: left; cursor: pointer; }
.quick-picker__copy { flex: 1; min-width: 0; }
.quick-picker__offer-title { display: block; font: 700 16px/1.45 'Nunito Sans', sans-serif; overflow-wrap: anywhere; }
.quick-picker__offer-meta { display: block; margin: 5px 0 8px; color: var(--cj-muted); font: 400 13px/1.5 'Nunito Sans', sans-serif; }
.quick-picker__offer-price { display: block; color: var(--cj-teal); font: 700 14px/1.5 'Nunito Sans', sans-serif; }
.quick-picker__mark { display: grid; place-items: center; flex: 0 0 22px; height: 22px; border: 1px solid #b6c9ce; border-radius: 50%; font: 700 14px/1 'Nunito Sans', sans-serif; color: transparent; }
.quick-picker__offer[aria-pressed="true"] .quick-picker__mark { border-color: var(--cj-teal); background: var(--cj-teal); color: #fff; }
.quick-picker__see-all { display: block; width: fit-content; padding-block: 14px; color: var(--cj-teal); font-size: 14px; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px; }
.quick-picker__hint { flex-shrink: 0; margin: 0; padding: 14px 24px max(18px, env(safe-area-inset-bottom)); border-top: 1px solid var(--cj-line); background: var(--cj-deck); color: var(--cj-muted); font: 400 13px/1.5 'Nunito Sans', sans-serif; }
.quick__trip-trigger:focus-visible, .quick-picker button:focus-visible, .quick-picker a:focus-visible { outline: 2px solid var(--cj-teal); outline-offset: -3px; }
@media (hover: hover) { .quick-picker__offer:hover { background: var(--cj-deck); } }
@media (min-width: 768px) {
    .quick-picker { inset: 0; margin: auto; width: min(640px, calc(100% - 48px)); height: min(720px, 85vh); height: min(720px, 85dvh); border-radius: 16px; }
    .quick-picker::before { display: none; }
    .quick-picker__head { padding: 20px 20px 12px 28px; }
    .quick-picker__tabs, .quick-picker__list { padding-inline: 28px; }
    .quick-picker__hint { padding-inline: 28px; }
}
@media (max-height: 480px) { .quick-picker { height: calc(100dvh - 16px); } }
@keyframes quick-picker-enter { from { transform: translateY(28px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .quick-picker[open] { animation: none; } }