:root {
  --bleu-nuit: #0B203F;
  --or: #C3A273;
  --blanc: #FFFFFF;
  --police-titre: 'Cormorant Garamond', serif;
  --police-texte: Lato, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--police-texte); line-height: 1.6; color: var(--blanc); background: var(--bleu-nuit); display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; width: 100%; }
img { max-width: 100%; display: block; }
a { color: var(--or); }
h1, h2 { font-family: var(--police-titre); font-weight: 500; line-height: 1.2; }
.or { color: var(--or); }

/* En-tête */
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0; padding: 1rem 1rem 1rem 20px; width: 100%; }   /* logo collé à gauche, 20 px de marge */
.site-header .logo img { width: 131px; height: auto; }   /* 131 x 131 comme sur le site d'origine */
.site-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; flex: 1; justify-content: center; }   /* menu centré dans l'espace à droite du logo */
.site-nav a { color: var(--blanc); text-decoration: none; font-family: var(--police-titre); font-size: 1.25rem; }
.site-nav a:hover { color: var(--or); }
.nav-toggle { display: none; background: none; border: 1px solid var(--or); color: var(--or); font-size: 1.5rem; padding: .2rem .6rem; cursor: pointer; }

/* Boutons */
.btn { display: inline-block; padding: .7rem 1.5rem; text-decoration: none; text-align: center; transition: background .2s, color .2s; }
.btn-or { background: var(--or); color: var(--blanc); border: 1px solid var(--or); }
.btn-or:hover { background: transparent; color: var(--or); }
.btn-contour { border: 1px solid var(--blanc); color: var(--blanc); }
.btn-contour:hover { background: var(--blanc); color: var(--bleu-nuit); }

/* Bandeau */
.hero { position: relative; min-height: clamp(360px, 70vh, 720px); background-size: cover; background-position: center; display: flex; align-items: center; }
.hero-contenu { max-width: 1200px; width: 100%; margin: 0 auto; padding: 2rem 1rem; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 4rem); margin: 0 0 1rem; }
.hero p { font-size: 1.1rem; margin: 0; }

/* Bandeau de l'accueil, comme sur le site d'origine (bureau 1440 px) :
   photo entière 1440 x 817, titre Cormorant 65 px à 65 px du bord gauche et ~260 px sous le haut du bandeau,
   2e ligne 80 px plus bas, sous-titre Cormorant 30 px */
.hero.hero-accueil { min-height: 360px; aspect-ratio: 1440 / 817; align-items: flex-start; }
.hero-accueil .hero-contenu { max-width: none; margin: 0; padding: 18% clamp(1rem, 4.5vw, 65px) 1rem; }
.hero-accueil h1 { font-size: clamp(2.2rem, 4.5vw, 65px); line-height: 1.23; margin: 0 0 clamp(.5rem, 1.8vw, 26px); }
.hero-accueil p { font-family: var(--police-titre); font-size: clamp(1.1rem, 2.1vw, 30px); }

/* Bouton caché (positionné par main.js) */
.lien-cache { position: absolute; width: 20px; height: 20px; display: block; }
.lien-cache-coin { left: 0; top: 0; }

/* Connexion et administration */
.form .case { display: flex; align-items: center; gap: .5rem; }
.admin-entete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.admin-entete .btn { background: none; cursor: pointer; font: inherit; }
.admin h2 { color: var(--or); margin-top: 2.5rem; }
.admin .container, .container.admin { max-width: 1280px; }
.admin-menu { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--or); padding-bottom: .5rem; }
.admin-menu a { color: var(--blanc); text-decoration: none; padding: .35rem .75rem; border: 1px solid transparent; }
.admin-menu a:hover, .admin-menu a.actif { border-color: var(--or); color: var(--or); }
.admin-sous-menu { display: flex; flex-wrap: wrap; gap: .25rem; padding: .5rem 0 .5rem 1rem; border-bottom: 1px solid rgba(195, 162, 115, .4); background: rgba(195, 162, 115, .08); }
.admin-sous-menu a { color: var(--blanc); text-decoration: none; padding: .25rem .7rem; font-size: .9rem; border-bottom: 2px solid transparent; }
.admin-sous-menu a:hover, .admin-sous-menu a.actif { color: var(--or); border-bottom-color: var(--or); }
.admin-titre { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.admin-titre h2 { margin-bottom: .5rem; }
.admin-filtre { margin-bottom: 1rem; }
.admin-filtre select { margin-left: .5rem; padding: .3rem; font: inherit; }
.admin-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.admin-actions form { margin: 0; }
.admin-actions .btn { padding: .3rem .6rem; font-size: .8rem; background: none; cursor: pointer; font-family: inherit; }
.admin .form select, .admin .form input, .admin .form textarea { padding: .5rem; font: inherit; }
/* Fiche dîner : champs à gauche, cadre des menus à droite (en dessous sur petit écran) */
.admin-edition { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: 2rem; align-items: start; }
.admin-panneau { border: 1px solid var(--or); padding: 1rem 1.25rem; }
.admin-panneau h3 { margin: 0 0 1rem; color: var(--or); }
.menu-bloc { border-top: 1px solid rgba(195, 162, 115, .4); padding: .75rem 0; }
.menus-saisie { display: grid; gap: .4rem; margin: 0; }
.menus-entete { display: flex; gap: .35rem; align-items: center; }
.menus-saisie input, .menus-saisie textarea { padding: .4rem; font: inherit; min-width: 0; }
.menus-saisie input[type="text"] { flex: 1; }
.menus-saisie input[type="number"] { width: 5.5rem; }
.menus-boutons { display: flex; gap: .35rem; justify-content: flex-end; margin-top: .4rem; }
.menus-boutons form { margin: 0; }
.menus-boutons .btn { padding: .35rem .6rem; font-size: .85rem; cursor: pointer; font-family: inherit; }
.menus-boutons .btn-contour { background: none; }
.menus-ajout-titre { margin: 1.25rem 0 .5rem; color: var(--or); }
.menus-aide { font-size: .8rem; opacity: .7; margin: .75rem 0 0; }
@media (max-width: 900px) { .admin-edition { grid-template-columns: 1fr; } }
/* Un bloc par menu (nom et prix, puis les plats) */
.diner-menu { margin-bottom: .75rem; }
.diner-menu-titre { display: flex; justify-content: space-between; gap: 1rem; margin: 0; border-bottom: 1px dotted rgba(195, 162, 115, .6); }
.diner-menu ul { margin: .35rem 0 0; }
.debug-tables { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.5rem; }
.debug-tables .btn { padding: .4rem .9rem; font-size: .9rem; }
.admin h3 { font-family: var(--police-titre); font-weight: 500; font-size: 1.4rem; }
table.debug td { white-space: pre-wrap; font-family: Consolas, monospace; font-size: .8rem; }
.null { opacity: .5; }
.btn-danger { border-color: #ff8a80; color: #ff8a80; }
.btn-danger:hover { background: #ff8a80; color: var(--bleu-nuit); }
.tableau { overflow-x: auto; }
.tableau table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tableau th, .tableau td { border: 1px solid rgba(195, 162, 115, .4); padding: .5rem; text-align: left; vertical-align: top; }
.tableau th { color: var(--or); font-weight: normal; }
/* Debug : valeurs modifiables dans le tableau ; orange = modifié non enregistré, vert = enregistré */
.page-debug { padding: 2rem 1rem; }
.debug-aide { font-size: .9rem; opacity: .8; }
.page-debug .tableau { max-height: 75vh; overflow: auto; }
.tableau .debug-edition { font-size: .8rem; }
.tableau .debug-edition th { position: sticky; top: 0; z-index: 3; background: var(--bleu-nuit); white-space: nowrap; padding: .3rem .4rem; }
.tableau .debug-edition td { white-space: nowrap; vertical-align: middle; padding: 1px 2px; line-height: 1.2; }
.debug-edition input, .debug-edition textarea { box-sizing: content-box; font: inherit; font-family: Consolas, monospace; padding: .15rem .3rem; border: 1px solid transparent; border-radius: 2px; background: transparent; color: inherit; }
.debug-edition input:hover, .debug-edition textarea:hover { border-color: rgba(195, 162, 115, .5); }
.debug-edition input:focus, .debug-edition textarea:focus { outline: none; border-color: var(--or); }
.debug-edition input::placeholder { font-style: italic; color: inherit; opacity: .4; }
/* zone multiligne : une ligne au repos, dépliée pendant la saisie */
.debug-edition textarea { display: block; height: 1.7em; resize: none; overflow: hidden; white-space: pre; }
.debug-edition textarea:focus { height: 8em; overflow: auto; position: relative; z-index: 2; background: var(--bleu-nuit); white-space: pre-wrap; }
.debug-edition .modifie, .debug-edition .modifie:focus { border-color: #f0a030; background: rgba(240, 160, 48, .25); }
.debug-edition .valide { border-color: #3fae5a; background: rgba(63, 174, 90, .25); }
.debug-valider { text-align: center; }
.debug-valider button { padding: .05rem .5rem; background: transparent; border: 1px solid rgba(195, 162, 115, .6); border-radius: 2px; color: var(--or); font-size: .9rem; line-height: 1.3; cursor: pointer; }
.debug-valider button:hover { background: var(--or); color: var(--bleu-nuit); }
.debug-valider button:disabled { opacity: .4; cursor: wait; }
.debug-erreur { display: block; color: #ff8a80; white-space: normal; max-width: 20rem; text-align: left; }

/* Introduction */
.intro { max-width: 800px; margin: 0 auto; padding: 3rem 1rem; text-align: center; }
.intro h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.intro-boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; }
.intro-boutons .btn { min-width: 240px; }

/* Cartes */
.cartes { max-width: 1200px; margin: 0 auto; padding: 0 1rem 3rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 2rem; }
.carte { border: 1px solid var(--or); display: flex; flex-direction: column; scroll-margin-top: 1rem; }
.carte-photo { width: 100%; aspect-ratio: 632 / 354; object-fit: cover; }
.carte-corps { padding: 0 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; font-size: .95rem; }
/* icône 141 px comme sur le site d'origine, posée en grande partie sur le bas de la photo ;
   le titre commence juste sous la photo, à droite de l'icône */
.carte-entete { display: flex; align-items: flex-start; gap: 1rem; margin-top: -100px; }
.carte-icone { width: 141px; height: 141px; flex-shrink: 0; }
.carte h2 { color: var(--or); font-size: 1.6rem; margin: 112px 0 0; }
.reservation-icone { width: 123px; height: 123px; flex-shrink: 0; }

/* Accueil : 6 cadres de 634 px de large (2 par ligne), icônes descendues de 80 px */
.cartes.deux-colonnes.cartes-accueil,
.cartes.deux-colonnes.cartes-croisieres { max-width: none; grid-template-columns: repeat(2, minmax(0, 634px)); justify-content: center; }
/* Position des icônes (accueil et croisières) : 50 px sur le bas de la photo, 20 px du bord ;
   le titre commence juste sous la photo */
.icones-decalees .carte-entete { margin-top: -50px; }
.icones-decalees .carte-icone { margin-left: 20px; }
.icones-decalees .carte h2 { margin-top: 62px; }
/* Titres des cadres (accueil et croisières) : 30 px, centrés dans l'espace à droite de l'icône, comme sur le site d'origine */
.cartes-accueil .carte h2, .cartes-croisieres .carte h2 { font-size: 30px; flex: 1; text-align: center; }
.carte-boutons { margin-top: auto; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* Réservation */
.reservation { max-width: 1200px; width: calc(100% - 2rem); margin: 0 auto 3rem; border: 1px solid var(--or); background-size: cover; background-position: center; padding: 2.5rem 1.5rem; display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.reservation-boutons { display: flex; flex-wrap: wrap; gap: 1rem; }
.reservation-boutons .btn { min-width: 200px; font-size: 1.1rem; }

/* Pages intérieures */
.hero-page { min-height: clamp(280px, 50vh, 520px); box-shadow: inset 0 0 0 100vmax rgba(11, 32, 63, .4); }
/* photo déjà assombrie à gauche (dégradé intégré à l'image, comme sur le site d'origine) : pas de voile en plus */
.hero-sans-voile { box-shadow: none; }
.hero-page h1 { margin: 0; }
.hero-icone { width: 80px; height: 80px; margin-bottom: 1rem; }
.hero-icone-grande { width: clamp(100px, 14vw, 205px); height: auto; }
.hero-icone-grande.hero-icone-reduite { width: clamp(67px, 9.4vw, 137px); }   /* -33 % (pages Bateau, Croisières, Villefranche) */

/* Bandeau à la taille de la photo d'origine (1440 x 816), non recadrée */
.hero.hero-photo { min-height: 320px; aspect-ratio: 1440 / 816; margin-top: 40px; }   /* 40 px sous le menu, comme sur le site d'origine */

/* Bandeau comme sur le site d'origine : photo entière (1440 x 817),
   icône + titre en bas à gauche, à 65 px du bord */
.hero-entier { min-height: 320px; aspect-ratio: 1440 / 817; align-items: flex-end; }
.hero-entier .hero-contenu { max-width: none; margin: 0; padding: 1rem clamp(1rem, 4.5vw, 65px) clamp(1rem, 8vw, 113px); }

/* Page Bateau : images placées comme sur le site WebDev d'origine */
.page-1500 { max-width: 1500px; margin: 0 auto; }                         /* contenu de la page : 1500 px max, centré */
.hero-bateau { min-height: 320px; aspect-ratio: 1440 / 817; }            /* photo entière, non recadrée */
.bandeau-entier { width: 100%; height: auto; margin: 2rem 0; }             /* bandeau 1440 x 354 entier */
.blocs-cadres { display: grid; gap: 2rem; padding: 2rem 0; max-width: 1500px; margin: 0 auto; }   /* cadres dorés : 1500 px max, centrés */
.bloc-cadre { display: grid; grid-template-columns: 46% 1fr; border: 1px solid var(--or); }
.bloc-cadre.inverse { grid-template-columns: 1fr 46%; }
.bloc-cadre.inverse .bloc-cadre-image { order: 2; }
.bloc-cadre-image img { width: 100%; height: 100%; object-fit: cover; display: block; }   /* photo collée au bord, toute la hauteur */
.bloc-cadre-texte { padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.bloc-cadre-texte h2 { color: var(--or); font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 0; }
.bloc-cadre-texte ul { list-style: none; padding: 0; }
.page-intro { max-width: 800px; margin: 0 auto; padding: 3rem 1rem 1rem; text-align: center; }
.page-intro h2, .bloc h2 { color: var(--or); font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 0; }
.bandeau { width: 100%; max-height: 360px; object-fit: cover; margin: 2rem 0; }
.blocs { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; display: grid; gap: 3rem; }
.bloc { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.bloc.inverse .bloc-image { order: 2; }
.bloc-image img { width: 100%; border: 1px solid var(--or); }
.bloc-texte.seul { grid-column: 1 / -1; max-width: 800px; margin: 0 auto; }
.bloc-texte * + h2 { margin-top: 2.5rem; }
.bloc ul { padding-left: 1.2rem; }
.bloc li::marker { color: var(--or); }
.affiches { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem 3rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; }
.affiches img { width: 100%; border: 1px solid var(--or); }
.photo-centree { max-width: 600px; margin: 0 auto; padding: 2rem 1rem 3rem; }
.photo-centree img { width: 100%; border: 1px solid var(--or); }
.cartes.deux-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartes.une-carte { max-width: 700px; grid-template-columns: 1fr; }
.contact-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.contact-grille img { width: 100%; border: 1px solid var(--or); }

/* Fiche croisière */
.dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; }
.date-carte { border: 1px solid var(--or); padding: 1.25rem; }
.date-carte h3 { font-family: var(--police-titre); color: var(--or); font-weight: 500; font-size: 1.2rem; margin: 0; }
.date-carte p { margin: 0 0 .75rem; }

/* Formulaire de réservation */
.form-reservation { max-width: 640px; }
.form-reservation small { display: block; opacity: .75; font-size: .85rem; }
.places { border: 1px solid var(--or); padding: 1rem; }
.places legend { padding: 0 .5rem; }
.places table { width: 100%; border-collapse: collapse; }
.places th, .places td { padding: .4rem; text-align: left; }
.places th { font-weight: normal; opacity: .75; font-size: .85rem; }
.compteur { white-space: nowrap; }
/* Compteur de quantité : capsule dorée « − 2 + », boutons ronds remplis d'or au survol */
.stepper { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem; border: 1px solid var(--or); border-radius: 999px; background: rgba(195, 162, 115, .06); transition: background .2s, box-shadow .2s; }
.stepper:focus-within { box-shadow: 0 0 0 3px rgba(195, 162, 115, .25); }
.stepper button { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; padding: 0; border: 1px solid rgba(195, 162, 115, .5); border-radius: 50%; background: transparent; color: var(--or); font: 1.25rem/1 var(--police-texte); cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .1s; }
.stepper button:hover:not(:disabled) { background: var(--or); border-color: var(--or); color: var(--bleu-nuit); }
.stepper button:active:not(:disabled) { transform: scale(.92); }
.stepper button:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.stepper button:disabled { opacity: .3; cursor: default; }
.stepper input { width: 2.75rem; padding: 0; border: 0; background: transparent; color: var(--blanc); text-align: center; font: 600 1.5rem/1 var(--police-titre); -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; }
/* ligne dont la quantité est > 0 : filet doré à gauche et capsule pleine */
.places tr.choisi td:first-child { box-shadow: inset 3px 0 0 var(--or); }
.places tr.choisi .stepper { background: rgba(195, 162, 115, .18); }
.places tr.choisi .stepper input { color: var(--or); }
.total { font-size: 1.2rem; }
.form-reservation select { padding: .5rem; font: inherit; }
.menu-plats { display: block; opacity: .7; font-size: .85rem; font-weight: normal; }
.recapitulatif { border: 1px solid var(--or); padding: 1rem 1.25rem; margin: 1.5rem 0; max-width: 640px; }
.resume-menus { width: 100%; border-collapse: collapse; margin-bottom: .75rem; }
.resume-menus th, .resume-menus td { padding: .4rem; text-align: left; border-bottom: 1px solid rgba(195, 162, 115, .3); }
.resume-menus th { font-weight: normal; opacity: .75; font-size: .85rem; }
.resume-menus td:nth-child(n+2), .resume-menus th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.resume-boutons { display: flex; flex-wrap: wrap; gap: .75rem; max-width: 640px; }
.resume-boutons .btn { cursor: pointer; font: inherit; }
.resume-boutons .btn-contour { background: transparent; border-color: var(--or); color: var(--or); }
.resume-boutons .btn-contour:hover { background: var(--or); color: var(--blanc); }
.total strong { color: var(--or); }

/* Pages simples (contact, 404) */
.container { max-width: 960px; margin: 0 auto; padding: 2rem 1rem; }
.form { display: grid; gap: 1rem; max-width: 500px; }
.form label { display: grid; gap: .25rem; }
.form input, .form textarea { padding: .5rem; font: inherit; }
.form button { padding: .6rem; background: var(--or); color: var(--blanc); border: 0; cursor: pointer; }
.success { color: #7fd99a; }
.error { color: #ff8a80; }

/* Pied de page */
.site-footer { text-align: center; padding: 1.5rem 1rem; border-top: 1px solid var(--or); font-size: .9rem; }

/* Mobile */
/* Tableau des places sur petit écran : une tranche d'âge par bloc
   (libellé sur toute la largeur, puis compteur, prix unitaire et sous-total) */
@media (max-width: 560px) {
  .places { padding: .75rem; }
  .places thead { display: none; }
  .places tr { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .25rem .75rem; padding: .6rem 0; border-bottom: 1px solid rgba(195, 162, 115, .3); }
  .places tr:last-child { border-bottom: 0; }
  .places td { padding: 0; }
  .places td:first-child { grid-column: 1 / -1; font-weight: bold; }
  .places td:nth-child(3) { opacity: .75; font-size: .9rem; }
  .places td:nth-child(3)::after { content: ' / place'; }
  .places td:last-child { text-align: right; font-weight: bold; }
}

@media (max-width: 800px) {
  .nav-toggle { display: block; }
  .site-header .logo img { width: 80px; }
  .site-header { flex-wrap: wrap; }
  .site-nav { display: none; flex-direction: column; width: 100%; }
  .site-nav.ouvert { display: flex; }
  .cartes, .cartes.deux-colonnes { grid-template-columns: 1fr; }
  .carte h2 { font-size: 1.4rem; margin-top: 70px; }
  .carte-entete { margin-top: -60px; }
  .carte-icone { width: 90px; height: 90px; }
  .reservation-icone { width: 90px; height: 90px; }
  .cartes.deux-colonnes.cartes-accueil,
  .cartes.deux-colonnes.cartes-croisieres { grid-template-columns: 1fr; }
  .cartes-accueil .carte h2, .cartes-croisieres .carte h2 { font-size: 1.4rem; }
  .hero { min-height: clamp(300px, 50vh, 480px); }
  .bloc, .contact-grille { grid-template-columns: 1fr; gap: 1.5rem; }
  .bloc.inverse .bloc-image { order: 0; }
  .bloc-cadre, .bloc-cadre.inverse { grid-template-columns: 1fr; }
  .bloc-cadre.inverse .bloc-cadre-image { order: 0; }
  .bloc-cadre-image img { height: auto; }
  .bloc-cadre-texte { padding: 1.5rem 1rem; }
}

/* Page publique des dîners : un cadre pleine largeur par dîner (image à gauche, détail et menus à droite, bouton en haut à droite) */
.diners-liste { padding: 0 1rem 3rem; display: grid; gap: 2rem; }
.carte-diner { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
/* affiche du dîner (texte) : toujours entière, à ses proportions d'origine, calée en haut de la colonne */
.carte-diner-photo { width: 100%; height: auto; align-self: start; }
.carte-diner-corps { padding: 1.5rem 2rem; display: flex; flex-direction: column; font-size: .95rem; }
.carte-diner-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.carte-diner-titre { flex: 1; min-width: 200px; }
.carte-diner-icone { width: 70px; height: 70px; flex-shrink: 0; }
.carte-diner h2 { margin: 0; font-size: 30px; }
.carte-diner .diner-date { margin: .25rem 0 0; }
.diner-menus { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 2rem; }
.carte-diner-boutons { margin-left: auto; align-self: flex-start; }
.carte-diner .diner-menu-prix { font-family: var(--police-titre); font-size: 1.8rem; color: var(--or); margin: .25rem 0 0; line-height: 1.2; padding-left: 2.5rem; }
.carte-diner .diner-menu ul { padding-left: 2.5rem; }
.carte-diner-mention { margin: auto 0 0; padding-top: 1rem; text-align: right; font-size: .85rem; opacity: .75; }
/* Réservation (dîner, croisière) : image à gauche du formulaire, qui reste visible au défilement */
.page-reservation { padding: 2rem 1rem; }
.reservation-avec-image { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2.5rem; align-items: start; }
.reservation-avec-image .form-reservation { max-width: none; }
.reservation-image { width: 100%; height: auto; border: 1px solid var(--or); position: sticky; top: 1rem; }
@media (max-width: 900px) {
  .reservation-avec-image { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .reservation-image { position: static; max-width: 600px; margin: 0 auto; }
  .carte-diner { grid-template-columns: minmax(0, 1fr); }
  .carte-diner-corps { padding: 1rem 1.25rem 1.25rem; }
  .carte-diner h2 { font-size: 1.4rem; }
}