/* Le 3 Mâts, bar, brasserie et restaurant de la Baie des Pêcheurs : démonstration Studio Devanture (faite main, 03/10/2026).
   Bleu marine, blanc et or de la corde de leur logo, crème pour lire la carte. Fraunces pour les titres, Manrope pour le texte.
   Formes arrondies partout. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url(polices/Fraunces-normal.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 700;font-display:swap;src:url(polices/Fraunces-italic.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(polices/Manrope-normal.woff2) format('woff2')}
[hidden]{display:none!important}
:root{
  --nuit:#0E2242;--nuit-2:#153463;--nuit-3:#1E4079;--creme:#FAF6EE;--creme-2:#F0E9DA;--blanc:#fff;
  --or:#C5A069;--or-fonce:#8E6B33;--or-clair:#E6CFA6;--corail:#D8492B;--vert:#3BC97F;
  --encre:#12203A;--doux:#5C6577;--clair:#C9D3E4;--ligne:rgba(18,32,58,.13);--ligne-forte:rgba(18,32,58,.3);
  --titre:'Fraunces',Georgia,serif;--texte:'Manrope',system-ui,sans-serif;
  --r:26px;--haut:110px;--courbe:cubic-bezier(.33,0,.2,1)
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--nuit);color:var(--encre);font-family:var(--texte);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
fieldset{border:0;min-width:0}
.wrap{max-width:1220px;margin:0 auto;padding-left:28px;padding-right:28px}
section{padding:96px 0;scroll-margin-top:84px;position:relative}
:focus-visible{outline:3px solid var(--or);outline-offset:3px}
h1,h2,h3{font-family:var(--titre);font-weight:560;line-height:1.04;letter-spacing:-.015em}
h1 em,h2 em,h3 em{font-style:italic;font-weight:480;color:var(--or-fonce)}
h2{font-size:clamp(36px,4.6vw,60px);margin-bottom:16px}
.sur{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:800;color:var(--or-fonce)}
.chapeau{color:var(--doux);max-width:680px;font-size:18px}
.tete{margin-bottom:38px}
.petit{font-size:12.5px;color:var(--doux);line-height:1.5}

/* bandeaux et haut de page */
.demo-bandeau{background:#06122A;color:#D5DEEE;font-size:12.5px;text-align:center;padding:8px 14px;line-height:1.4}
.annonce{background:var(--or);color:var(--nuit);font-size:14.5px;text-align:center;padding:10px 16px;line-height:1.45;font-weight:800;overflow-wrap:anywhere}
.annonce.ferme-a{background:var(--corail);color:#fff}
.annonce .motif{display:block;white-space:pre-line;font-weight:500;font-size:13.5px;margin-top:3px}
.haut{position:sticky;top:0;z-index:30;background:rgba(14,34,66,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff}
.haut .wrap{display:flex;align-items:center;gap:24px;height:74px}
.marque{display:flex;align-items:center;gap:10px;font-family:var(--titre);font-weight:600;font-size:25px;letter-spacing:-.01em;white-space:nowrap}
.marque img{height:44px;width:auto}
.menu{display:flex;gap:20px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-left:auto}
.menu a{padding:6px 0;background:linear-gradient(var(--or),var(--or)) 0 100%/0 3px no-repeat;transition:background-size .35s var(--courbe);white-space:nowrap}
.menu a:hover{background-size:100% 3px}
.haut .tel{font-weight:800;letter-spacing:.04em;white-space:nowrap}
/* le choix de la langue */
.langues{display:inline-flex;border:1.5px solid rgba(255,255,255,.35);border-radius:99px;overflow:hidden;font-size:12px;font-weight:800;letter-spacing:.06em;flex:none}
.langues a{padding:7px 10px;color:#fff}
.langues a.on{background:var(--or);color:var(--nuit)}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:17px 28px;border-radius:99px;font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.15;text-align:center;transition:transform .25s var(--courbe),background .25s,color .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px)}
.btn-or{background:var(--or);color:var(--nuit);box-shadow:0 14px 30px -14px rgba(197,160,105,.9)}
.btn-or:hover{background:var(--or-clair)}
.btn-verre{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-verre:hover{background:#fff;color:var(--encre)}
.btn-ligne{box-shadow:inset 0 0 0 1.5px var(--encre)}
.btn-ligne:hover{background:var(--encre);color:#fff}
.btn-marine{background:var(--nuit-2);color:#fff}
.btn-marine:hover{background:var(--nuit-3)}
.haut .btn{padding:13px 22px;font-size:12px}

/* état ouvert ou fermé, service par service, à l'heure de Nouméa */
.etat{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:700}
.etat i{width:9px;height:9px;border-radius:50%;background:var(--vert);box-shadow:0 0 0 4px rgba(59,201,127,.22);flex:none}
.etat.ferme i{background:var(--corail);box-shadow:0 0 0 4px rgba(216,73,43,.25)}

/* ouverture : la terrasse et la marina en plein cadre */
.ouverture{padding:0;min-height:calc(100svh - var(--haut) - var(--bandeau-a,0px));display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.ouverture .fond{position:absolute;inset:0}
.ouverture .fond img{width:100%;height:100%;object-fit:cover;object-position:var(--cadre-pc,50% 46%)}   /* photo en hauteur : sur un écran large on garde le ciel, le couchant et la marina ; le restaurant règle ce cadrage dans son espace */
.ouverture:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,34,66,.9) 0,rgba(14,34,66,.66) 40%,rgba(14,34,66,.1) 74%),linear-gradient(0deg,rgba(14,34,66,.92) 0,rgba(14,34,66,0) 44%)}
.ouverture .wrap{position:relative;z-index:2;width:100%;padding-top:clamp(40px,8svh,90px);padding-bottom:clamp(30px,6svh,70px)}
.ouverture .sur{color:var(--or-clair);text-shadow:0 1px 10px rgba(14,34,66,.8)}
.ouverture h1{font-size:clamp(46px,min(6.4vw,10.6svh),100px);line-height:1;margin:clamp(10px,2svh,22px) 0 clamp(14px,2.6svh,24px);max-width:860px}
.ouverture h1 em{color:var(--or-clair)}
.ouverture h1 .l{display:block}
.ouverture .pres{font-size:clamp(16px,2.2svh,19px);max-width:560px;color:#E8EEF8}
.ouverture .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,3.4svh,32px)}
.ouverture .bas-ouv{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:clamp(16px,3svh,28px)}

/* le programme : la prochaine date en grand, les suivantes à côté */
.programme{background:var(--nuit);color:#EEF2F9}
.programme h2 em,.programme .sur{color:var(--or)}
.programme .chapeau{color:var(--clair)}
.prog-grille{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:stretch}
.evenement{background:radial-gradient(130% 130% at 0 0,#24509A 0,#17376B 52%,#112A54 100%);border-radius:36px;padding:clamp(24px,3.4vw,44px);display:flex;flex-direction:column;box-shadow:inset 0 0 0 1.5px rgba(197,160,105,.5);min-width:0}
.evenement.seul{grid-column:1/-1}
.evenement small{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--or-clair)}
.evenement h3{font-size:clamp(32px,3.6vw,50px);margin:12px 0 14px;color:#fff;overflow-wrap:anywhere}
.evenement p{white-space:pre-line;color:#D9E2F1;font-size:16.5px;max-width:620px;flex:1;overflow-wrap:anywhere}
.evenement-bas{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;margin-top:24px}
.compte{font-weight:800;font-size:15px;color:var(--or-clair)}
.dates{list-style:none;display:grid;gap:10px;align-content:start;min-width:0}
.dates li{background:var(--nuit-2);border-radius:var(--r);padding:14px 18px 14px 14px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center}
.dates .jour{display:grid;justify-items:center;background:var(--nuit);border-radius:18px;padding:8px 6px;width:66px;line-height:1.1}
.dates .jour i{font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--or-clair);font-weight:800}
.dates .jour b{font-family:var(--titre);font-size:28px;font-weight:600;color:#fff}
.dates .quoi{font-family:var(--titre);font-size:20px;line-height:1.2;color:#fff;overflow-wrap:anywhere}
.dates .quoi small,.dates .quand{display:block;font-family:var(--texte);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--clair);margin-bottom:3px}
.dates .quand b{display:block;color:#fff;font-size:13px}
.dates .quand{grid-column:1/2;width:150px;margin:0}
.lien-resa{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--or-clair);border:1.5px solid rgba(230,207,166,.55);border-radius:99px;padding:9px 14px;white-space:nowrap}
.lien-resa:hover{background:var(--or);color:var(--nuit);border-color:var(--or)}

/* les lignes de la carte et de l'ardoise : un nom, une précision, un prix */
.lignes{list-style:none;display:grid;gap:2px}
.lignes li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:11px 0;border-bottom:1px dashed var(--ligne-forte)}
.lignes li:last-child{border-bottom:0}
.lignes .nom{overflow-wrap:anywhere}
.lignes .nom b{font-weight:700}
.lignes .nom small{display:block;font-size:14px;color:var(--doux);line-height:1.4}
.lignes .tarifs{display:flex;gap:14px;align-items:baseline;white-space:nowrap}
.px{font-weight:800;font-variant-numeric:tabular-nums}
.px i{display:block;font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--doux);text-align:right;line-height:1.2}
.note-prix{font-size:13.5px;color:var(--doux);margin-top:18px}

/* la suggestion du jour : un grand bandeau qui se déroule au clic (maquette validée le 07/10/2026) */
.ardoise{background:var(--creme-2);padding:64px 0}
.ardoise .note-prix{margin-top:12px}
.cdj{background:var(--nuit-2);color:#EEF2F9;border-radius:36px;box-shadow:inset 0 0 0 1.5px rgba(197,160,105,.5),0 34px 60px -44px rgba(14,34,66,.9);overflow:hidden}
.cdj summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:14px 26px;align-items:center;padding:clamp(18px,2.6vw,30px) clamp(18px,3vw,40px)}
.cdj summary::-webkit-details-marker{display:none}
.cdj-date{display:grid;justify-items:center;background:var(--nuit);border-radius:20px;padding:10px 8px;width:78px;line-height:1.1}
.cdj-date i{font-style:normal;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--or-clair);font-weight:800}
.cdj-date b{font-family:var(--titre);font-size:36px;font-weight:600;color:#fff}
.cdj-titre{min-width:0}
.cdj-titre small{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--or-clair)}
.cdj-titre strong{display:block;font-family:var(--titre);font-weight:560;font-size:clamp(34px,4vw,54px);line-height:1.04;color:#fff;margin:2px 0 6px}
.cdj-apercu{display:block;color:var(--clair);font-size:15.5px;overflow-wrap:anywhere}
.cdj-chiffres{font-size:13.5px;color:var(--clair);text-align:right;line-height:1.45;white-space:nowrap}
.cdj-chiffres b{font-family:var(--titre);font-size:30px;font-weight:600;color:var(--or-clair);margin-right:4px}
.cdj-bouton{display:inline-flex;align-items:center;gap:10px;background:var(--or);color:var(--nuit);border-radius:99px;padding:16px 24px;font-size:13.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.cdj-bouton i{width:9px;height:9px;border-right:2.5px solid var(--nuit);border-bottom:2.5px solid var(--nuit);transform:rotate(45deg) translateY(-2px);transition:transform .3s}
.cdj .quand-ouvert{display:none}
.cdj[open] .quand-ouvert{display:inline}
.cdj[open] .quand-ferme{display:none}
.cdj[open] .cdj-bouton i{transform:rotate(225deg) translateY(-2px)}
.cdj[open] .cdj-apercu{display:none}
.cdj-corps{border-top:1px solid rgba(255,255,255,.16);padding:clamp(20px,3vw,40px) clamp(18px,3vw,40px) 26px}
.cdj-colonnes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px clamp(26px,5vw,70px)}
.ard-col{min-width:0}
.ard-col h3{font-size:28px;color:var(--or-clair);font-style:italic;font-weight:480;margin-bottom:8px;overflow-wrap:anywhere}
.cdj-corps .lignes li{border-bottom-color:rgba(255,255,255,.22)}
.cdj-corps .lignes .nom small{color:var(--clair)}
.cdj-corps .px{color:var(--or-clair)}
.cdj-note{font-size:13px;color:var(--clair);margin-top:18px}

/* la carte */
.carte{background:var(--creme)}
/* les onglets et, sur la même ligne, le choix de la devise : juste au-dessus des prix */
.carte-outils{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.carte-outils .onglets{margin-bottom:0;flex:1 1 60%;min-width:0}
.devise-zone{display:none;align-items:center;gap:10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--doux);flex:none;white-space:nowrap}
.onglets-actifs .devise-zone{display:inline-flex}
.devise{display:inline-flex;background:var(--blanc);border-radius:99px;padding:3px;box-shadow:inset 0 0 0 1.5px var(--ligne)}
.devise button{padding:8px 13px;border-radius:99px;font-size:13px;font-weight:800;letter-spacing:.02em;min-width:42px}
.devise button.on{background:var(--nuit-2);color:#fff}
.onglets-actifs .cdj-corps .devise-zone{display:flex;justify-content:flex-end;color:var(--clair);margin-bottom:14px}
.cdj-corps .devise{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}
.cdj-corps .devise button{color:#fff}
.cdj-corps .devise button.on{background:var(--or);color:var(--nuit)}
.onglets{display:none;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.onglets-actifs .onglets{display:flex}
.onglets button{background:var(--blanc);border-radius:99px;padding:10px 15px;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:800;box-shadow:inset 0 0 0 1.5px var(--ligne)}
.onglets button.on{background:var(--nuit-2);color:#fff;box-shadow:none}
.chapitres{display:grid;gap:18px}
.chapitre{background:var(--blanc);border-radius:32px;padding:clamp(22px,3.4vw,44px);box-shadow:0 30px 60px -48px rgba(14,34,66,.8)}
.chapitre[data-vide="1"]{display:none}
.chapitre h3{font-size:clamp(28px,3vw,38px);margin-bottom:6px}
.note-chap{color:var(--doux);font-size:15px;max-width:760px;margin-bottom:10px}
.chapitre .lignes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,5vw,64px)}
.chapitre .lignes li:nth-last-child(2):nth-child(odd){border-bottom:0}
.duo-plats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr) minmax(0,1.28fr);gap:14px;margin-top:18px}
.duo-plats img{width:100%;height:clamp(200px,24vw,300px);object-fit:cover;border-radius:var(--r)}

/* bons cadeaux : une bande courte, juste au-dessus de la réservation, qui renvoie vers leur page de bons */
.cadeaux{background:var(--creme-2);padding:56px 0 0}
.cadeaux + .reserver{padding-top:56px}
.cadeau{background:var(--nuit-2);color:#EEF2F9;border-radius:32px;padding:clamp(20px,3vw,32px) clamp(22px,4vw,48px);display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;box-shadow:inset 0 0 0 1.5px rgba(197,160,105,.45)}
.cadeau>div{min-width:0;flex:1 1 320px}
.cadeau h2{font-size:clamp(28px,3.2vw,40px);margin:4px 0 6px;color:#fff}
.cadeau h2 em,.cadeau .sur{color:var(--or-clair)}
.cadeau p:not(.sur){color:var(--clair);max-width:560px;font-size:16px}

/* réserver */
.reserver{background:var(--creme-2)}
.reserver-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.rappels{list-style:none;display:grid;gap:10px;margin:22px 0 26px}
.rappels li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.rappels li:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--or);margin-top:8px;flex:none}
.rappels a{font-weight:800;text-decoration:underline}
.reserver-photo{border-radius:32px;width:100%;aspect-ratio:16/10;object-fit:cover}
.form{background:var(--blanc);border-radius:32px;padding:clamp(22px,3vw,36px);display:grid;gap:14px;box-shadow:0 30px 60px -46px rgba(14,34,66,.8);min-width:0}
.form h3{font-size:30px}
.form .deux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.form label,.form legend{display:grid;gap:6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--doux);font-weight:700}
.form legend{margin-bottom:6px}
.form input:not([type=radio]),.form select,.form textarea{border:1.5px solid var(--ligne);border-radius:16px;background:var(--creme);padding:13px 15px;font-size:16px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--encre);width:100%;min-width:0}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--or-fonce);outline:0;background:#fff}
.choix{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choix label{display:flex;gap:8px;align-items:center;justify-content:center;background:var(--creme);border:1.5px solid var(--ligne);border-radius:16px;padding:12px 10px;font-size:15.5px;letter-spacing:0;text-transform:none;font-weight:700;color:var(--encre);cursor:pointer}
.choix label:has(input:checked){background:var(--nuit-2);color:#fff;border-color:var(--nuit-2)}
.choix input{accent-color:var(--or)}
.form .invalide{border-color:var(--corail)!important}
.form .erreur{color:#A8321A;font-size:14px;font-weight:700}
.info-jour{background:#FBEFD8;border-radius:16px;padding:12px 16px;font-size:14.5px;overflow-wrap:anywhere}
.merci{background:#DFF3E6;border-radius:18px;padding:16px 18px;font-size:15.5px;overflow-wrap:anywhere}
.merci b{display:block;font-family:var(--titre);font-weight:600;font-size:24px}
.form .btn{justify-self:start}

/* privatiser : les trois salles */
.salles{background:var(--creme)}
.salles-grille{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:start}
.chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0 16px}
.chiffres div{background:var(--nuit-2);color:#fff;border-radius:var(--r);padding:18px 20px}
.chiffres b{display:block;font-family:var(--titre);font-size:clamp(34px,4vw,50px);font-weight:560;line-height:1;color:var(--or-clair)}
.chiffres span{font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.salles-photos{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px;margin-top:22px}
.salles-photos img{width:100%;height:clamp(240px,28vw,360px);object-fit:cover;border-radius:var(--r)}

.lien-privatiser{margin-top:18px}

/* la page « Privatiser » */
.pp-tete{padding:0;color:#fff;overflow:hidden;display:flex;align-items:flex-end;min-height:min(78svh,720px)}
.pp-tete .fond{position:absolute;inset:0}
.pp-tete .fond img{width:100%;height:100%;object-fit:cover}
.pp-tete:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,34,66,.94) 0,rgba(14,34,66,.78) 46%,rgba(14,34,66,.3) 100%),linear-gradient(0deg,rgba(14,34,66,.9) 0,rgba(14,34,66,0) 50%)}
.pp-tete .wrap{position:relative;z-index:2;width:100%;padding-top:54px;padding-bottom:54px}
.pp-tete .fil{font-size:13px;color:var(--clair);margin-bottom:18px}
.pp-tete .fil a{text-decoration:underline}
.pp-tete .sur{color:var(--or-clair)}
.pp-tete h1{font-size:clamp(36px,5vw,68px);line-height:1.04;margin:12px 0 18px;max-width:900px}
.pp-tete h1 em{color:var(--or-clair)}
.pp-tete .pres{font-size:clamp(16px,1.5vw,19px);max-width:640px;color:#E8EEF8}
.pp-tete .chiffres{max-width:560px}
.pp-tete .chiffres div{background:rgba(255,255,255,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pp-tete .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.pp-types{background:var(--creme)}
.pp-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pp-type{background:var(--blanc);border-radius:32px;overflow:hidden;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);box-shadow:0 30px 60px -48px rgba(14,34,66,.8)}
.pp-type:first-child{grid-column:1/-1}
.pp-type figure{position:relative;min-height:240px}   /* la photo remplit la hauteur que le texte donne à la carte, sans l'agrandir */
.pp-type figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pp-type:first-child figure{min-height:340px}
.pp-type div{padding:clamp(20px,2.6vw,34px);align-self:center}
.pp-type h3{font-size:clamp(24px,2.4vw,32px);margin-bottom:10px}
.pp-type p{color:var(--doux);font-size:16px}
.pp-equip{background:var(--nuit);color:#EEF2F9}
.pp-equip h2 em,.pp-equip .sur{color:var(--or)}
.pp-equip .gages{margin-top:0}
.pp-questions{background:var(--creme-2)}
.pp-faq{display:grid;gap:10px;max-width:900px}
.pp-faq details{background:var(--blanc);border-radius:22px;padding:0 22px}
.pp-faq summary{list-style:none;cursor:pointer;font-family:var(--titre);font-size:21px;font-weight:560;padding:18px 34px 18px 0;position:relative}
.pp-faq summary::-webkit-details-marker{display:none}
.pp-faq summary:after{content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;border-right:2.5px solid var(--or-fonce);border-bottom:2.5px solid var(--or-fonce);transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.pp-faq details[open] summary:after{transform:translateY(-30%) rotate(225deg)}
.pp-faq p{color:var(--doux);padding:0 0 20px;max-width:720px;overflow-wrap:anywhere}
.pp-contacts{margin:22px 0 26px}

/* le lieu */
.lieu{background:var(--nuit);padding:84px 0}
.lieu-photos{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr) minmax(0,1.1fr);gap:14px}
.lieu-photos img{width:100%;height:clamp(260px,34vw,440px);object-fit:cover;border-radius:var(--r)}
.gages{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.gages span{background:var(--nuit-3);color:#EEF2F9;border-radius:99px;padding:9px 16px;font-size:14px;font-weight:600}
.gages.clair{margin-top:0}
.gages.clair span{background:var(--blanc);color:var(--encre);box-shadow:inset 0 0 0 1.5px var(--ligne)}

/* infos */
.infos{background:var(--creme-2)}
.infos-grille{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.9fr);gap:18px}
.info{background:var(--blanc);border-radius:var(--r);padding:28px;min-width:0}
.info h3{font-size:28px;margin-bottom:14px}
.info .etat{margin-bottom:12px}
.horaires{width:100%;border-collapse:collapse;font-size:14.5px}
.horaires td{padding:7px 0;border-bottom:1px solid var(--ligne)}
.horaires td:last-child{text-align:right;font-weight:700}
.horaires tr.aujourdhui td{color:var(--or-fonce);font-weight:800}
.info .exc{margin-top:12px;font-size:14px;background:#F8DDD6;border-radius:14px;padding:10px 12px;white-space:pre-line;overflow-wrap:anywhere}
.info .exc.ouvre{background:#FBEFD8}
.contacts{list-style:none;display:grid;gap:12px;font-size:16px}
.contacts span{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--doux);font-weight:700}
.contacts a{font-weight:800;overflow-wrap:anywhere}
.paiement{font-size:14px;color:var(--doux);margin-top:12px}
.carte-g{margin-top:18px;height:360px;border-radius:var(--r);overflow:hidden;background:var(--creme)}
.carte-g iframe{width:100%;height:100%;border:0}

/* pied de page */
/* le champ caché des formulaires : un visiteur ne le voit pas, un robot le remplit, et le moteur ne range alors rien */
.pot{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
/* la page des mentions légales */
.page-mentions{background:var(--creme)}
.ml{padding:clamp(34px,6vw,76px) 0 clamp(50px,7vw,96px)}
.ml .wrap{max-width:900px}
.ml .fil{font-size:13px;color:var(--doux);margin-bottom:16px}
.ml .fil a{text-decoration:underline}
.ml h1{font-size:clamp(38px,5vw,60px);margin-bottom:12px}
.ml .chapeau{margin-bottom:26px}
.ml-bloc{background:var(--blanc);border-radius:28px;padding:clamp(20px,3.2vw,36px);margin-top:14px;box-shadow:0 30px 60px -50px rgba(14,34,66,.8);overflow-wrap:anywhere}
.ml-bloc h2{font-size:clamp(24px,2.6vw,30px);margin-bottom:12px}
.ml-bloc p+p{margin-top:10px}
.ml-bloc a{text-decoration:underline}
.ml-bloc dl{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:10px 20px}
.ml-bloc dt{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--doux);padding-top:4px}
.ml-bloc dd{margin:0}
@media (max-width:640px){.ml-bloc dl{grid-template-columns:minmax(0,1fr);gap:2px}.ml-bloc dd{margin-bottom:12px}.ml-bloc dd:last-child{margin-bottom:0}}
.pied{background:var(--nuit);color:var(--clair);padding:54px 0 28px;font-size:14.5px}
.pied .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-end}
.logo-pied{height:130px;width:auto;border-radius:24px}
.pied p{margin-top:14px}
.pied .liens-pied{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;align-items:center}
.pied .espace-lien{border:1.5px solid rgba(255,255,255,.6);border-radius:99px;padding:10px 16px}
.pied .signature{width:100%;border-top:1px solid rgba(255,255,255,.16);padding-top:16px;font-size:12.5px;line-height:1.55}
.pied .signature a{text-decoration:underline}

.barre-tel{display:none}

/* apparitions */
.anime .monte{opacity:0;transform:translateY(24px);transition:opacity .9s var(--courbe),transform .9s var(--courbe)}
.anime .monte.vu{opacity:1;transform:none}
.anime .ouverture h1 .l{opacity:0;transform:translateY(.3em);animation:entre 1s var(--courbe) forwards}
.anime .ouverture h1 .l:nth-child(2){animation-delay:.1s}
.anime .ouverture h1 .l:nth-child(3){animation-delay:.2s}
@keyframes entre{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .anime .monte{opacity:1;transform:none;transition:none}
  .anime .ouverture h1 .l{opacity:1;transform:none;animation:none}
}

@media (max-width:1260px){
  .haut .wrap{gap:16px}
  .menu{gap:14px;font-size:12px;letter-spacing:.04em}
  .haut .tel{display:none}
}
/* tablette */
@media (max-width:1040px){
  .menu{display:none}
  .haut .langues{margin-left:auto}
  .haut .tel{display:inline}
  .prog-grille,.reserver-grille,.salles-grille{grid-template-columns:minmax(0,1fr)}
  .pp-type:first-child{grid-column:auto}
  .pp-tete:after{background:linear-gradient(0deg,rgba(14,34,66,.95) 0,rgba(14,34,66,.78) 60%,rgba(14,34,66,.5) 100%)}
  .cdj summary{grid-template-columns:auto minmax(0,1fr) auto}
  .cdj-chiffres{display:none}
  .chapitre .lignes{grid-template-columns:minmax(0,1fr)}
  .chapitre .lignes li:nth-last-child(2):nth-child(odd){border-bottom:1px dashed var(--ligne-forte)}
  .infos-grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .infos-grille .info:first-child{grid-column:1/-1}
  .ouverture:after{background:linear-gradient(0deg,rgba(14,34,66,.95) 0,rgba(14,34,66,.64) 55%,rgba(14,34,66,.2) 100%)}
  .ouverture h1,.ouverture .pres{text-shadow:0 2px 18px rgba(14,34,66,.55)}
}
/* téléphone */
@media (max-width:700px){
  :root{--haut:102px}
  section{padding:66px 0}
  .wrap{padding-left:18px;padding-right:18px}
  .ouverture .fond img{object-position:var(--cadre-tel,50% 70%)}   /* sur un écran étroit, la photo se voit presque entière, table comprise */
  .haut .wrap{height:62px;gap:10px}
  .marque{font-size:22px}
  .marque img{height:38px}
  .haut .btn{display:none}
  .ouverture .sur{font-size:10.5px;letter-spacing:.14em}
  .ouverture h1{font-size:clamp(30px,min(9.2vw,7.4svh),54px);margin:8px 0 12px}   /* « au bord de la marina. » tient sur une ligne dès 320 px */
  .ouverture .sur .pc{display:none}
  .ouverture .pres{font-size:15.5px}
  .ouverture .actions .btn{flex:1 1 auto;padding:15px 16px}
  .evenement{border-radius:28px}
  .dates li{grid-template-columns:auto minmax(0,1fr);padding:12px}
  .dates .lien-resa{grid-column:2;justify-self:start}
  .dates .quoi{font-size:18px}
  .ardoise{padding:48px 0}
  .cdj{border-radius:28px}
  .cdj summary{grid-template-columns:auto minmax(0,1fr);gap:12px 14px;padding:18px}
  .cdj-date{width:64px;padding:8px 6px}
  .cdj-date b{font-size:28px}
  .cdj-titre strong{font-size:clamp(26px,8.2vw,32px)}
  .cdj-apercu{font-size:14.5px}
  .cdj-chiffres{display:none}
  .cdj-bouton{grid-column:1/-1;justify-content:center;padding:15px}
  .cdj-corps{padding:20px 18px}
  .cdj-colonnes{grid-template-columns:minmax(0,1fr)}
  .carte-outils{display:block}
  .onglets-actifs .carte-outils .devise-zone{display:flex;justify-content:flex-end;margin-top:10px}
  .langues a{padding:6px 8px}
  .onglets{flex-wrap:nowrap;overflow-x:auto;margin-left:-18px;margin-right:-18px;padding:2px 18px 6px;scrollbar-width:none}
  .onglets::-webkit-scrollbar{display:none}
  .onglets button{white-space:nowrap;flex:none}
  .chapitre{border-radius:26px}
  .lignes li{gap:10px}
  .lignes .tarifs{gap:10px}
  .duo-plats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .duo-plats img{height:160px}
  .duo-plats img:last-child{grid-column:1/-1;height:200px}
  .form{border-radius:26px}
  .form .deux{grid-template-columns:minmax(0,1fr)}
  .chiffres{gap:8px}
  .chiffres div{padding:14px 12px}
  .chiffres span{font-size:11px;letter-spacing:.06em}
  .salles-photos img{height:220px}
  .pp-grille{grid-template-columns:minmax(0,1fr)}
  .pp-type{grid-template-columns:minmax(0,1fr);border-radius:26px}
  .pp-type figure,.pp-type:first-child figure{min-height:0;aspect-ratio:16/10}
  .pp-tete .wrap{padding-top:34px;padding-bottom:36px}
  .pp-faq summary{font-size:18.5px}
  .lieu-photos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .lieu-photos img{height:220px}
  .lieu-photos img:last-child{grid-column:1/-1}
  .infos-grille{grid-template-columns:minmax(0,1fr)}
  .info{padding:22px 20px}
  .horaires{font-size:13.5px}
  .barre-tel{display:grid;grid-template-columns:1fr 1.2fr;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;background:var(--nuit-3);border-radius:99px;overflow:hidden;transform:translateY(160%);transition:transform .35s var(--courbe);box-shadow:0 16px 30px -12px rgba(0,0,0,.6)}
  .barre-tel.visible{transform:none}
  .barre-tel a{color:#fff;text-align:center;padding:15px 8px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:800}
  .barre-tel a+a{background:var(--or);color:var(--nuit)}
  .pied{padding-bottom:96px}
}
@media (max-width:400px){
  .haut .tel{display:none}   /* le numéro reste dans la barre du bas et dans les infos */
}
/* petit téléphone : deux prix sur une même ligne (Matelot, Capitaine) se rangent l'un sous l'autre, pour laisser sa place au nom du plat,
   même en dollars ou en anglais où les prix sont plus longs */
@media (max-width:480px){
  .lignes .tarifs:has(.px + .px){flex-direction:column;align-items:flex-end;gap:4px}
}
@media (max-width:700px) and (max-height:720px){
  .ouverture h1{font-size:clamp(29px,9.2vw,40px)}
  .ouverture .pres{font-size:14.5px}
}
/* très petit téléphone : le texte de présentation laisse la place aux boutons et à l'état */
@media (max-width:700px) and (max-height:600px){
  .ouverture .pres{display:none}
}