/*
 * PAGE DE RÉSERVATION (/fr/booking/, /en/booking/) — refonte du 06/11/2026 (JC).
 * Le formulaire en premier écran, la phrase d'abord (comme l'accueil), puis la preuve : logos des clients,
 * avis réels, garanties, étapes, prix fixes, questions. Aucune classe Tailwind nouvelle : principal.css est
 * figé, tout ce qui est propre à cette page vit ici, préfixé rb-.
 * Couleurs du site : marine #0F2044, sable #C4A882, azur #7BA7C2, perle #F2F4F7.
 */

/* ── Premier écran ─────────────────────────────────────────────────────────── */
.rb-hero{position:relative;overflow:hidden;background:#0F2044;color:#fff}
.rb-hero__fond{position:absolute;inset:0;background:radial-gradient(120% 60% at 90% 0%,#1d3766 0%,rgba(15,32,68,0) 65%),#0F2044}
/* La photo seulement sur grand écran : sur téléphone, le formulaire la couvrirait presque entière. */
@media(min-width:1024px){.rb-hero__fond{background:linear-gradient(90deg,rgba(15,32,68,.96) 0%,rgba(15,32,68,.86) 50%,rgba(15,32,68,.5) 100%),url(/images/mercedes-classe-v-cannes-port-yachts-hero.webp) center/cover no-repeat,#0F2044}}
.rb-hero__contenu{position:relative;max-width:80rem;margin:0 auto;padding:86px 16px 40px}
@media(min-width:640px){.rb-hero__contenu{padding:116px 24px 56px}}
@media(min-width:1024px){.rb-hero__contenu{padding:128px 32px 80px}}
.rb-hero__grille{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"titre" "widget" "preuves";gap:22px}
@media(min-width:1024px){.rb-hero__grille{grid-template-columns:minmax(0,1fr) minmax(0,500px);grid-template-areas:"titre widget" "preuves widget";grid-template-rows:auto 1fr;gap:30px 64px;align-items:start}}
.rb-hero__titre{grid-area:titre}
.rb-hero__preuves{grid-area:preuves}
.rb-hero #reserver{grid-area:widget;scroll-margin-top:84px}
/* Hauteur réservée au formulaire (la phrase d'abord en fait ~480 px sur /booking) ; la colonne de gauche, plus haute, fixe celle du premier écran. */
@media(min-width:1024px){.rb-hero #reserver{min-height:480px;box-shadow:0 30px 70px -24px rgba(0,0,0,.6)}}

.rb-tag{margin:0 0 12px;font:600 11px/1.5 var(--font-lato),Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#7BA7C2}
@media(min-width:1024px){.rb-tag{margin-bottom:18px;font-size:12px}}
.rb-hero h1{margin:0 0 14px;font-family:var(--font-playfair),Georgia,serif;font-weight:300;font-size:clamp(32px,calc(5.2vw + 12px),62px);line-height:1.08;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.rb-hero h1 em{font-style:italic;color:#C4A882}
.rb-hero__intro{max-width:36rem;margin:0;font:300 16px/1.6 var(--font-lato),Arial,sans-serif;color:rgba(255,255,255,.82)}
@media(min-width:1024px){.rb-hero__intro{font-size:19px}}

/* La note Google, sous l'accroche : mène aux avis plus bas. */
.rb-note{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:16px 0 0;font:400 14px/1.4 var(--font-lato),Arial,sans-serif;color:rgba(255,255,255,.82)}
.rb-note a{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.rb-note strong{font-weight:700;color:#fff}
.rb-note__sep{display:none}
@media(min-width:480px){.rb-note__sep{display:inline}}
.rb-note a:hover span:last-child{text-decoration:underline;text-underline-offset:3px}

/* Étoiles : cinq, remplies à la note (4,7/5 → 94 %). */
.rb-etoiles{position:relative;display:inline-block;font-size:15px;line-height:1;letter-spacing:2px;color:rgba(255,255,255,.28);white-space:nowrap}
.rb-etoiles::before,.rb-etoiles>span::before{content:"★★★★★"}
.rb-etoiles>span{position:absolute;top:0;bottom:0;left:0;overflow:hidden;color:#FBBC04}
.rb-etoiles--clair{color:#DDD8CC}

.rb-preuves{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.rb-preuve{display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:6px 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.06);font:400 13.5px/1.3 var(--font-lato),Arial,sans-serif;color:rgba(255,255,255,.86)}
.rb-preuve strong{font-weight:700;color:#fff}
.rb-preuve img{width:auto;height:24px;padding:1px;border-radius:3px;background:#fff}

.rb-citation{max-width:36rem;margin:18px 0 0;padding:16px 18px;border-left:2px solid #C4A882;border-radius:0 10px 10px 0;background:rgba(255,255,255,.05)}
.rb-citation blockquote{margin:0}
.rb-citation p{margin:0;font:italic 300 17px/1.55 var(--font-playfair),Georgia,serif;color:rgba(255,255,255,.92)}
.rb-citation figcaption{margin-top:10px;font:400 13px/1.45 var(--font-lato),Arial,sans-serif;color:rgba(255,255,255,.62)}
.rb-contact{margin:16px 0 0;font:400 14px/1.6 var(--font-lato),Arial,sans-serif;color:rgba(255,255,255,.74)}
.rb-contact a{font-weight:600;color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ── Logos des clients ─────────────────────────────────────────────────────── */
.rb-logos{padding:32px 16px 38px;border-top:1px solid rgba(255,255,255,.07);background:#0B1833}
.rb-logos h2{margin:0;text-align:center;font:600 11px/1.5 var(--font-lato),Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.rb-logos__discretion{max-width:36rem;margin:8px auto 24px;text-align:center;font:italic 400 15px/1.5 var(--font-playfair),Georgia,serif;color:rgba(245,244,235,.76)}
/* Téléphone : trois par ligne ; tablette : cinq puis quatre ; grand écran : une seule ligne. */
.rb-logos ul{display:grid;grid-template-columns:repeat(3,auto);align-items:center;justify-content:center;justify-items:center;gap:20px 26px;max-width:72rem;margin:0 auto;padding:0;list-style:none}
@media(min-width:640px){.rb-logos ul{display:flex;flex-wrap:wrap;gap:24px 40px;max-width:640px}}
@media(min-width:1180px){.rb-logos ul{max-width:72rem}}
.rb-logos img{display:block;width:auto;height:var(--h,40px);opacity:.82}
@media(max-width:639px){.rb-logos__discretion{font-size:14px}.rb-logos img{height:calc(var(--h,40px)*.8)}}

/* ── Sections ──────────────────────────────────────────────────────────────── */
.rb-section{padding:64px 0;background:#fff}
@media(min-width:1024px){.rb-section{padding:88px 0}}
.rb-section--perle{background:#F2F4F7}
.rb-conteneur{max-width:72rem;margin:0 auto;padding:0 16px}
@media(min-width:640px){.rb-conteneur{padding:0 24px}}
.rb-conteneur--etroit{max-width:52rem}
/* L'azur du site manque de contraste sur fond clair (2,6:1) : un azur plus sombre, même teinte. */
.rb-surtitre{margin:0 0 10px;font:600 11px/1.5 var(--font-lato),Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#46708D}
.rb-h2{margin:0 0 28px;font-family:var(--font-playfair),Georgia,serif;font-weight:300;font-size:clamp(28px,calc(2.4vw + 17px),44px);line-height:1.15;color:#0F2044;text-wrap:balance}
[data-cls-si-reservation][hidden]{display:none!important}

/* Avis */
.rb-avis__entete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px;margin-bottom:28px}
.rb-avis__entete .rb-h2{margin:0}
.rb-google{display:inline-flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid #E5E1D8;border-radius:14px;background:#fff;color:#0F2044;text-decoration:none;transition:border-color .2s}
.rb-google:hover{border-color:#C4A882}
.rb-google svg{flex-shrink:0;width:30px;height:30px}
.rb-google__note{display:flex;align-items:center;gap:10px;font:400 15px/1 var(--font-lato),Arial,sans-serif;color:#4A5568}
.rb-google__note strong{font-size:26px;font-weight:700;color:#0F2044}
.rb-google__lien{display:block;margin-top:6px;font:400 13px/1.3 var(--font-lato),Arial,sans-serif;color:#4A5568}
.rb-google:hover .rb-google__lien{text-decoration:underline;text-underline-offset:3px}
/* Les avis défilent sur toute la largeur (JC, 06/11/2026). Sans JavaScript, ou avec « moins
   d'animations » : une rangée qu'on fait glisser soi-même, carte par carte. defile.js ajoute le
   défilement (continu sur ordinateur, carte par carte sur téléphone), les flèches et le bouton
   Pause. Un avis long prend une carte plus large (rb-temoignages__large), pour que les cartes
   restent de même hauteur sur ordinateur. */
.rb-defile{--bord:16px}
@media(min-width:640px){.rb-defile{--bord:max(24px,calc((100% - 72rem)/2 + 24px))}}
.rb-temoignages{position:relative;display:flex;align-items:flex-start;gap:16px;margin:0;padding:4px var(--bord) 14px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--bord);scroll-behavior:auto;scrollbar-width:thin;scrollbar-color:#D9D2C3 transparent}
.rb-temoignages>li{display:flex;flex:0 0 min(84vw,340px);scroll-snap-align:start}
@media(min-width:640px){.rb-temoignages{align-items:stretch;gap:20px}.rb-temoignages>li{flex-basis:360px}.rb-temoignages>li.rb-temoignages__large{flex-basis:520px}}
.rb-defile--js .rb-temoignages{scrollbar-width:none}
.rb-defile--js .rb-temoignages::-webkit-scrollbar{display:none}
/* Ordinateur : défilement continu, sans aimant. Téléphone : une carte à la fois, l'aimant reste. */
@media(min-width:640px) and (prefers-reduced-motion:no-preference){.rb-defile--js .rb-temoignages{scroll-snap-type:none}}
@media(min-width:1200px){.rb-defile--js .rb-temoignages{-webkit-mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent)}}
.rb-defile__commandes{display:flex;justify-content:flex-end;gap:8px;max-width:72rem;margin:6px auto 0;padding:0 16px}
@media(min-width:640px){.rb-defile__commandes{padding:0 24px}}
.rb-defile__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 16px;border:1px solid #E5E1D8;border-radius:999px;background:#fff;color:#0F2044;font:700 12px/1 var(--font-lato),Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .2s}
.rb-defile__btn:hover{border-color:#C4A882}
.rb-defile__btn:disabled{opacity:.4;cursor:default}
.rb-defile__btn[hidden]{display:none}
.rb-defile__btn svg{flex-shrink:0;width:14px;height:14px}
.rb-defile__fleche{width:44px;padding:0}
.rb-temoignage__suite{display:none}
@media(max-width:639px){
.rb-defile--js .rb-temoignages{align-items:stretch}
.rb-defile--js .rb-temoignages__large:not(.rb-temoignages--ouvert) blockquote p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:8}
.rb-defile--js .rb-temoignage__suite{display:block;align-self:flex-start;margin:-8px 0 0;padding:4px 0;border:0;background:none;color:#46708D;font:700 14px/1.3 var(--font-lato),Arial,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
}
.rb-temoignage{display:flex;flex:1;flex-direction:column;gap:18px;margin:0;padding:24px;border:1px solid #E7E2D8;border-radius:16px;background:#FBFAF7}
.rb-temoignage blockquote{flex:1;margin:0}
.rb-temoignage blockquote::before{content:"“";display:block;height:28px;font:400 52px/1 var(--font-playfair),Georgia,serif;color:#C4A882}
.rb-temoignage blockquote p{margin:0;font:400 15.5px/1.65 var(--font-lato),Arial,sans-serif;color:#2D3748}
.rb-temoignage figcaption{display:flex;align-items:center;gap:12px;font:400 13px/1.45 var(--font-lato),Arial,sans-serif;color:#5A6577}
.rb-temoignage figcaption strong{display:block;font-size:14.5px;font-weight:700;color:#0F2044}
.rb-temoignage .rb-etoiles{margin-right:6px;font-size:12px;letter-spacing:1px}
.rb-avatar{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#0F2044;color:#fff;font:700 13px/1 var(--font-playfair),Georgia,serif}

/* Garanties */
.rb-garanties{display:grid;gap:14px}
@media(min-width:768px){.rb-garanties{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media(min-width:1100px){.rb-garanties{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rb-garantie{display:flex;gap:16px;padding:20px;border:1px solid #E3E6EB;border-radius:14px;background:#fff}
@media(min-width:1100px){.rb-garantie{flex-direction:column;padding:26px}}
.rb-garantie svg{flex-shrink:0;width:28px;height:28px;color:#A88452}
.rb-garantie h3{margin:0 0 6px;font:700 16px/1.35 var(--font-lato),Arial,sans-serif;color:#0F2044}
.rb-garantie p{margin:0;font:400 14.5px/1.6 var(--font-lato),Arial,sans-serif;color:#4A5568}

/* Étapes */
.rb-etapes{display:grid;gap:14px;margin:0;padding:0;list-style:none}
@media(min-width:900px){.rb-etapes{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}
.rb-etape{position:relative;padding:22px 22px 22px 72px;border-radius:14px;background:#F7F5F0}
@media(min-width:900px){.rb-etape{padding:28px}}
.rb-etape__num{position:absolute;top:20px;left:20px;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#0F2044;color:#fff;font:700 15px/1 var(--font-lato),Arial,sans-serif}
@media(min-width:900px){.rb-etape__num{position:static;margin-bottom:16px}}
.rb-etape h3{margin:0 0 6px;font:700 16.5px/1.35 var(--font-lato),Arial,sans-serif;color:#0F2044}
.rb-etape p{margin:0;font:400 14.5px/1.6 var(--font-lato),Arial,sans-serif;color:#4A5568}

/* Prix fixes */
.rb-tableau{overflow-x:auto;border:1px solid #E2E5EA;border-radius:14px;background:#fff}
.rb-tableau table{width:100%;border-collapse:collapse;font:400 15px/1.4 var(--font-lato),Arial,sans-serif;color:#1A202C}
.rb-tableau th,.rb-tableau td{padding:13px 16px;border-top:1px solid #EEF0F3;text-align:right;white-space:nowrap}
.rb-tableau thead th{border-top:0;background:#0F2044;color:#fff;font-size:13px;font-weight:700;letter-spacing:.03em;vertical-align:bottom}
.rb-tableau thead th span{display:block;margin-top:2px;font-size:11.5px;font-weight:400;letter-spacing:0;color:rgba(255,255,255,.66)}
.rb-tableau thead th:first-child,.rb-tableau tbody th{text-align:left;white-space:normal}
.rb-tableau tbody th{font-weight:400;color:#2D3748}
.rb-tableau td{font-weight:700;color:#0F2044}
@media(max-width:480px){.rb-tableau th,.rb-tableau td{padding:11px 6px;font-size:13.5px}.rb-tableau th:first-child{padding-left:12px}.rb-tableau tr>:last-child{padding-right:12px}}
.rb-note-prix{margin:14px 0 0;font:400 13.5px/1.6 var(--font-lato),Arial,sans-serif;color:#5A6577}

/* Questions */
.rb-faq{border-top:1px solid #E2E5EA}
.rb-faq details{border-bottom:1px solid #E2E5EA}
.rb-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;cursor:pointer;list-style:none}
.rb-faq summary::-webkit-details-marker{display:none}
.rb-faq summary h3{margin:0;font:600 16.5px/1.45 var(--font-lato),Arial,sans-serif;color:#0F2044}
.rb-faq summary::after{content:"+";display:flex;flex-shrink:0;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#0F2044;color:#fff;font:400 18px/1 var(--font-lato),Arial,sans-serif;transition:transform .2s}
.rb-faq details[open] summary::after{transform:rotate(45deg)}
.rb-faq p{margin:0 0 20px;font:400 15px/1.65 var(--font-lato),Arial,sans-serif;color:#4A5568}
.rb-faq a{color:#0F2044;text-decoration:underline;text-underline-offset:3px}
.rb-lien-suite{display:inline-block;margin-top:22px;font:600 14.5px/1.4 var(--font-lato),Arial,sans-serif;color:#0F2044;text-decoration:underline;text-underline-offset:4px}

/* Dernier appel */
.rb-fin{padding:72px 0;background:#0F2044;color:#fff;text-align:center}
.rb-fin h2{margin:0 0 14px;font-family:var(--font-playfair),Georgia,serif;font-weight:300;font-size:clamp(30px,calc(3vw + 16px),48px);line-height:1.15;color:#fff}
.rb-fin p{max-width:34rem;margin:0 auto 28px;font:300 17px/1.6 var(--font-lato),Arial,sans-serif;color:rgba(255,255,255,.76)}
.rb-fin__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px}
.rb-bouton{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 28px;border:1px solid #C4A882;border-radius:999px;background:#C4A882;color:#0F2044;font:700 14px/1.2 var(--font-lato),Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:background-color .2s,border-color .2s,scale .16s cubic-bezier(.23,1,.32,1)}
.rb-bouton:hover{border-color:#D8C3A1;background:#D8C3A1}
.rb-bouton:active{scale:.97}
.rb-bouton--contour{border-color:rgba(255,255,255,.4);background:transparent;color:#fff}
.rb-bouton--contour:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.rb-fin__wa{flex-basis:100%;color:rgba(255,255,255,.82);font:400 14.5px/1.4 var(--font-lato),Arial,sans-serif;text-decoration:underline;text-underline-offset:3px}

.rb-note a:focus-visible,.rb-google:focus-visible,.rb-bouton:focus-visible,.rb-fin__wa:focus-visible,.rb-contact a:focus-visible,.rb-lien-suite:focus-visible,.rb-faq summary:focus-visible,.rb-defile__btn:focus-visible,.rb-temoignage__suite:focus-visible{outline:2px solid #C4A882;outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){.rb-faq summary::after,.rb-bouton,.rb-google,.rb-defile__btn{transition:none}}