{"id":264,"date":"2026-07-16T08:19:08","date_gmt":"2026-07-16T06:19:08","guid":{"rendered":"https:\/\/www.le-relais-du-pont-pinel.fr\/?page_id=264"},"modified":"2026-07-16T09:16:28","modified_gmt":"2026-07-16T07:16:28","slug":"reservation","status":"publish","type":"page","link":"https:\/\/www.le-relais-du-pont-pinel.fr\/index.php\/reservation\/","title":{"rendered":"R\u00e9servation"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Le Relais du Pont Pinel \u2014 R\u00e9servation<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&amp;family=Inter:wght@400;500;600;700&amp;family=IBM+Plex+Mono:wght@400;500&amp;display=swap\" rel=\"stylesheet\">\n<style>\n  :root{\n    --navy:#16283D;\n    --navy-deep:#0D1A28;\n    --stone:#8D897D;\n    --stone-light:#DAD5C7;\n    --ecru:#F4EFE3;\n    --ecru-2:#ECE5D3;\n    --brass:#B8863E;\n    --brass-light:#D9AE6F;\n    --corsair:#A13D34;\n    --ink:#1E2A2E;\n    --ok:#3C6E52;\n    --radius:2px;\n  }\n  *{box-sizing:border-box;}\n  html{scroll-behavior:smooth;}\n  body{\n    margin:0;\n    background:var(--ecru);\n    color:var(--ink);\n    font-family:'Inter',sans-serif;\n    -webkit-font-smoothing:antialiased;\n  }\n  ::selection{background:var(--brass-light);color:var(--navy-deep);}\n  a{color:inherit;}\n  h1,h2,h3{font-family:'Fraunces',serif;margin:0;font-weight:500;}\n  button{font-family:inherit;cursor:pointer;}\n  input,select,textarea{font-family:inherit;}\n  :focus-visible{outline:2px solid var(--brass);outline-offset:3px;}\n\n  .eyebrow{\n    font-family:'IBM Plex Mono',monospace;\n    font-size:.7rem;\n    letter-spacing:.14em;\n    text-transform:uppercase;\n    color:var(--brass);\n  }\n\n  \/* ---------- Header ---------- *\/\n  header{\n    position:sticky;top:0;z-index:20;\n    background:var(--navy);\n    color:var(--ecru);\n    padding:16px clamp(20px,5vw,56px);\n    display:flex;align-items:center;justify-content:space-between;\n    border-bottom:1px solid rgba(244,239,227,.12);\n  }\n  .brand{display:flex;flex-direction:column;line-height:1.05;}\n  .brand .name{font-family:'Fraunces',serif;font-size:1.05rem;letter-spacing:.02em;}\n  .brand .place{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.12em;color:var(--brass-light);text-transform:uppercase;margin-top:4px;}\n  header nav a{\n    font-size:.8rem;color:var(--ecru);text-decoration:none;margin-left:22px;\n    border-bottom:1px solid transparent;padding-bottom:2px;\n  }\n  header nav a:hover{border-color:var(--brass-light);}\n  header nav{display:none;}\n  @media(min-width:720px){header nav{display:block;}}\n\n  \/* ---------- Hero ---------- *\/\n  .hero{\n    position:relative;\n    background:var(--navy-deep);\n    color:var(--ecru);\n    padding:76px clamp(20px,6vw,64px) 60px;\n    overflow:hidden;\n  }\n  .hero-inner{max-width:760px;position:relative;z-index:2;}\n  .hero .eyebrow{color:var(--brass-light);}\n  .hero h1{\n    font-size:clamp(2.1rem,5vw,3.4rem);\n    line-height:1.06;\n    margin:14px 0 20px;\n    max-width:14ch;\n  }\n  .hero h1 em{font-style:italic;color:var(--brass-light);}\n  .hero p{max-width:52ch;color:var(--stone-light);font-size:1rem;line-height:1.65;margin:0 0 28px;}\n  .hero .facts{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:34px;}\n  .hero .facts div{font-size:.78rem;color:var(--ecru);display:flex;align-items:center;gap:8px;}\n  .hero .facts svg{width:16px;height:16px;flex:none;stroke:var(--brass-light);}\n  .hero .cta{\n    display:inline-flex;align-items:center;gap:10px;\n    background:var(--brass);color:var(--navy-deep);\n    padding:13px 24px;border:none;border-radius:var(--radius);\n    font-size:.85rem;font-weight:600;letter-spacing:.02em;\n    text-decoration:none;\n  }\n  .hero .cta:hover{background:var(--brass-light);}\n  .tide{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:64px;}\n\n  .tide-divider{width:100%;height:40px;display:block;}\n  .tide-divider path{fill:none;stroke:var(--stone);stroke-width:1;opacity:.5;}\n\n  \/* ---------- Sections generic ---------- *\/\n  section{padding:64px clamp(20px,6vw,64px);}\n  .section-head{max-width:640px;margin-bottom:38px;}\n  .section-head h2{font-size:clamp(1.6rem,3vw,2.1rem);margin-top:10px;}\n  .section-head p{color:var(--stone);margin-top:12px;line-height:1.6;font-size:.95rem;}\n\n  \/* ---------- Rooms ---------- *\/\n  .rooms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;}\n  .room-card{\n    background:#fff;border:1px solid var(--stone-light);border-radius:var(--radius);\n    overflow:hidden;display:flex;flex-direction:column;\n    transition:transform .18s ease, box-shadow .18s ease;\n  }\n  .room-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(22,40,61,.35);}\n  .room-card .img-wrap{aspect-ratio:4\/3;overflow:hidden;background:var(--stone-light);}\n  .room-card img{width:100%;height:100%;object-fit:cover;display:block;}\n  .room-card .body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1;}\n  .room-card .eyebrow{color:var(--corsair);}\n  .room-card h3{font-size:1.3rem;}\n  .room-card .specs{display:flex;gap:14px;font-size:.76rem;color:var(--stone);font-family:'IBM Plex Mono',monospace;}\n  .room-card .specs span{display:flex;align-items:center;gap:6px;}\n  .room-card .specs svg{width:14px;height:14px;stroke:var(--brass);flex:none;}\n  .room-card p.desc{font-size:.88rem;color:var(--ink);line-height:1.55;margin:0;flex:1;}\n  .avail-row{\n    display:flex;align-items:center;justify-content:space-between;\n    border-top:1px dashed var(--stone-light);padding-top:14px;margin-top:6px;\n  }\n  .avail-status{font-size:.76rem;font-family:'IBM Plex Mono',monospace;display:flex;align-items:center;gap:7px;}\n  .dot{width:8px;height:8px;border-radius:50%;background:var(--stone);flex:none;}\n  .dot.ok{background:var(--ok);}\n  .dot.no{background:var(--corsair);}\n  .select-btn{\n    background:var(--navy);color:var(--ecru);border:none;padding:9px 16px;\n    border-radius:var(--radius);font-size:.78rem;font-weight:600;letter-spacing:.01em;\n  }\n  .select-btn:hover{background:var(--navy-deep);}\n  .select-btn:disabled{background:var(--stone-light);color:var(--stone);cursor:not-allowed;}\n  .select-btn.chosen{background:var(--brass);color:var(--navy-deep);}\n\n  \/* ---------- Booking ---------- *\/\n  .booking{background:var(--navy);color:var(--ecru);}\n  .booking .section-head p{color:var(--stone-light);}\n  .booking .eyebrow{color:var(--brass-light);}\n  .booking-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start;}\n  @media(max-width:860px){.booking-grid{grid-template-columns:1fr;}}\n\n  .dates-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px;}\n  .field{display:flex;flex-direction:column;gap:7px;}\n  .field label{font-size:.72rem;font-family:'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--brass-light);}\n  .field input,.field select,.field textarea{\n    background:rgba(244,239,227,.06);\n    border:1px solid rgba(244,239,227,.25);\n    color:var(--ecru);\n    padding:11px 12px;border-radius:var(--radius);font-size:.9rem;\n  }\n  .field input::placeholder,.field textarea::placeholder{color:rgba(244,239,227,.4);}\n  .field textarea{resize:vertical;min-height:72px;}\n\n  .chosen-room-box{\n    border:1px solid rgba(244,239,227,.22);border-radius:var(--radius);\n    padding:16px 18px;margin-bottom:22px;font-size:.85rem;\n    display:flex;justify-content:space-between;align-items:center;gap:12px;\n  }\n  .chosen-room-box.empty{color:rgba(244,239,227,.5);font-style:italic;}\n  .chosen-room-box strong{font-family:'Fraunces',serif;font-weight:500;font-size:1.05rem;display:block;}\n\n  form#bookingForm{display:flex;flex-direction:column;}\n  .form-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}\n  .form-row2 .field{margin:0;}\n  .field.stack{margin-bottom:14px;}\n\n  .submit-btn{\n    margin-top:6px;\n    background:var(--brass);color:var(--navy-deep);border:none;\n    padding:14px 22px;border-radius:var(--radius);font-weight:700;font-size:.9rem;\n    letter-spacing:.02em;\n  }\n  .submit-btn:hover{background:var(--brass-light);}\n  .submit-btn:disabled{background:rgba(244,239,227,.2);color:rgba(244,239,227,.5);cursor:not-allowed;}\n  .form-error{color:#E5A79E;font-size:.8rem;min-height:1.1em;margin-top:8px;}\n\n  .recap{\n    background:rgba(244,239,227,.05);\n    border:1px solid rgba(244,239,227,.18);\n    border-radius:var(--radius);padding:22px;\n    font-family:'IBM Plex Mono',monospace;font-size:.82rem;\n    display:flex;flex-direction:column;gap:10px;\n  }\n  .recap .row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed rgba(244,239,227,.15);padding-bottom:8px;}\n  .recap .row:last-child{border:none;padding-bottom:0;}\n  .recap .label{color:rgba(244,239,227,.55);}\n\n  \/* ---------- Footer ---------- *\/\n  footer{\n    background:var(--navy-deep);color:rgba(244,239,227,.65);\n    padding:36px clamp(20px,6vw,64px);\n    font-size:.8rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;\n  }\n  footer strong{color:var(--ecru);font-family:'Fraunces',serif;font-weight:500;}\n  footer a{text-decoration:none;color:var(--brass-light);}\n\n  \/* ---------- Modal \/ seal ---------- *\/\n  .modal-overlay{\n    position:fixed;inset:0;background:rgba(13,26,40,.72);\n    display:flex;align-items:center;justify-content:center;padding:20px;z-index:100;\n  }\n  .modal-overlay.hidden{display:none;}\n  .modal{\n    background:var(--ecru);color:var(--ink);max-width:460px;width:100%;\n    border-radius:var(--radius);padding:34px 30px 30px;position:relative;\n    box-shadow:0 30px 60px -20px rgba(0,0,0,.5);\n    max-height:88vh;overflow-y:auto;\n  }\n  .modal .seal{width:74px;height:74px;margin:0 auto 14px;display:block;}\n  .modal h3{text-align:center;font-size:1.35rem;margin-bottom:4px;}\n  .modal .ref{text-align:center;font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:var(--brass);letter-spacing:.08em;margin-bottom:18px;}\n  .modal p.msg{font-size:.88rem;line-height:1.6;color:var(--ink);text-align:center;margin-bottom:18px;}\n  .modal .recap2{\n    background:#fff;border:1px solid var(--stone-light);border-radius:var(--radius);\n    padding:16px 18px;font-family:'IBM Plex Mono',monospace;font-size:.78rem;\n    display:flex;flex-direction:column;gap:8px;margin-bottom:20px;\n  }\n  .modal .recap2 .row{display:flex;justify-content:space-between;gap:10px;}\n  .modal .recap2 .row span:first-child{color:var(--stone);}\n  .modal .host{font-size:.8rem;text-align:center;color:var(--stone);line-height:1.6;margin-bottom:18px;}\n  .modal .host a{color:var(--corsair);text-decoration:none;font-weight:600;}\n  .modal-close{\n    display:block;width:100%;background:var(--navy);color:var(--ecru);border:none;\n    padding:12px;border-radius:var(--radius);font-weight:600;font-size:.85rem;\n  }\n  .modal-close:hover{background:var(--navy-deep);}\n\n  @media(prefers-reduced-motion:reduce){\n    *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}\n  }\n<\/style>\n\n\n\n<header>\n  <div class=\"brand\">\n    <span class=\"name\">Le Relais du Pont Pinel<\/span>\n    <span class=\"place\">Chambres d&rsquo;h\u00f4tes \u00b7 Saint-Malo<\/span>\n  <\/div>\n  <nav>\n    <a href=\"#rooms\">Nos chambres<\/a>\n    <a href=\"#booking\">R\u00e9server<\/a>\n  <\/nav>\n<\/header>\n\n<section class=\"hero\">\n  <div class=\"hero-inner\">\n    <div class=\"eyebrow\">Centre de parame<\/div>\n    <h1>Trois chambres, <em>au rythme de la mar\u00e9e<\/em><\/h1>\n    <p>Nich\u00e9 pr\u00e8s du pont Pinel, \u00e0 800&nbsp;m\u00e8tres de la plage de Rochebonne et \u00e0 30&nbsp;minutes \u00e0 pied de la cit\u00e9 corsaire par la digue du Sillon, Sandrine et Patrice vous accueillent dans une maison d&rsquo;h\u00f4tes chaleureuse aux trois chambres uniques.<\/p>\n    <div class=\"facts\">\n      <div><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.6\"><path d=\"M3 12h18M3 6h18M3 18h18\"><\/path><\/svg>800 m de la plage de Rochebonne<\/div>\n      <div><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.6\"><circle cx=\"12\" cy=\"12\" r=\"9\"><\/circle><path d=\"M12 7v5l3 3\"><\/path><\/svg>30 min \u00e0 pied de la cit\u00e9 corsaire<\/div>\n      <div><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.6\"><path d=\"M4 20l6-16 4 10 3-6 3 12\"><\/path><\/svg>Petit-d\u00e9jeuner maison <\/div>\n    <\/div>\n    <a href=\"#rooms\" class=\"cta\">D\u00e9couvrir les chambres \u2192<\/a>\n  <\/div>\n<\/section>\n<svg class=\"tide-divider\" viewBox=\"0 0 1200 40\" preserveAspectRatio=\"none\"><path d=\"M0 20 C 100 4, 200 36, 300 20 S 500 4, 600 20 S 800 36, 900 20 S 1100 4, 1200 20\"><\/path><\/svg>\n\n<section id=\"rooms\">\n  <div class=\"section-head\">\n    <div class=\"eyebrow\">Nos chambres<\/div>\n    <h2>Trois chambres, trois figures de Saint-Malo<\/h2>\n    <p>Chaque chambre porte le nom d&rsquo;un lieu ou d&rsquo;une figure de la cit\u00e9 corsaire. Choisissez vos dates dans la section r\u00e9servation pour voir leur disponibilit\u00e9 en direct.<\/p>\n  <\/div>\n  <div class=\"rooms-grid\" id=\"roomsGrid\"><\/div>\n<\/section>\n\n<svg class=\"tide-divider\" viewBox=\"0 0 1200 40\" preserveAspectRatio=\"none\" style=\"background:var(--ecru)\"><path d=\"M0 20 C 100 4, 200 36, 300 20 S 500 4, 600 20 S 800 36, 900 20 S 1100 4, 1200 20\"><\/path><\/svg>\n\n<section class=\"booking\" id=\"booking\">\n  <div class=\"section-head\">\n    <div class=\"eyebrow\">R\u00e9servation<\/div>\n    <h2>Faire une demande de r\u00e9servation<\/h2>\n    <p>Choisissez vos dates, s\u00e9lectionnez une chambre ci-dessus, puis compl\u00e9tez vos coordonn\u00e9es. Sandrine et Patrice confirment chaque demande par e-mail ou t\u00e9l\u00e9phone.<\/p>\n  <\/div>\n\n  <div class=\"booking-grid\">\n    <div>\n      <div class=\"dates-row\">\n        <div class=\"field\">\n          <label for=\"checkin\">Arriv\u00e9e<\/label>\n          <input type=\"date\" id=\"checkin\">\n        <\/div>\n        <div class=\"field\">\n          <label for=\"checkout\">D\u00e9part<\/label>\n          <input type=\"date\" id=\"checkout\">\n        <\/div>\n      <\/div>\n\n      <div class=\"chosen-room-box empty\" id=\"chosenRoomBox\">Aucune chambre s\u00e9lectionn\u00e9e \u2014 choisissez-en une ci-dessus.<\/div>\n\n      <form id=\"bookingForm\">\n        <div class=\"form-row2\">\n          <div class=\"field\">\n            <label for=\"firstName\">Pr\u00e9nom<\/label>\n            <input type=\"text\" id=\"firstName\" placeholder=\"Pr\u00e9nom\" required=\"\">\n          <\/div>\n          <div class=\"field\">\n            <label for=\"lastName\">Nom<\/label>\n            <input type=\"text\" id=\"lastName\" placeholder=\"Nom\" required=\"\">\n          <\/div>\n        <\/div>\n        <div class=\"form-row2\">\n          <div class=\"field\">\n            <label for=\"email\">E-mail<\/label>\n            <input type=\"email\" id=\"email\" placeholder=\"vous@exemple.fr\" required=\"\">\n          <\/div>\n          <div class=\"field\">\n            <label for=\"phone\">T\u00e9l\u00e9phone<\/label>\n            <input type=\"tel\" id=\"phone\" placeholder=\"06 12 34 56 78\" required=\"\">\n          <\/div>\n        <\/div>\n        <div class=\"form-row2\">\n          <div class=\"field\">\n            <label for=\"guests\">Voyageurs<\/label>\n            <select id=\"guests\">\n              <option value=\"1\">1 personne<\/option>\n              <option value=\"2\" selected=\"\">2 personnes<\/option>\n              <option value=\"3\">3 personnes<\/option>\n            <\/select>\n          <\/div>\n          <div class=\"field\">\n            <label for=\"breakfast\">Petit-d\u00e9jeuner<\/label>\n            <select id=\"breakfast\">\n              <option value=\"oui\" selected=\"\">Option petit d\u00e9jeuner<\/option>\n              <option value=\"salle\">En salle \u00e0 manger<\/option>\n              <option value=\"patio\">Dans le patio (si beau temps)<\/option>\n            <\/select>\n          <\/div>\n        <\/div>\n        <div class=\"field stack\">\n          <label for=\"message\">Message (optionnel)<\/label>\n          <textarea id=\"message\" placeholder=\"Heure d'arriv\u00e9e pr\u00e9vue, allergies, occasion particuli\u00e8re\u2026\"><\/textarea>\n        <\/div>\n        <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\" disabled=\"\">Envoyer la demande de r\u00e9servation<\/button>\n        <div class=\"form-error\" id=\"formError\"><\/div>\n      <\/form>\n    <\/div>\n\n    <div class=\"recap\">\n      <div class=\"eyebrow\" style=\"margin-bottom:4px;\">R\u00e9capitulatif<\/div>\n      <div class=\"row\"><span class=\"label\">Chambre<\/span><span id=\"recapRoom\">\u2014<\/span><\/div>\n      <div class=\"row\"><span class=\"label\">Arriv\u00e9e<\/span><span id=\"recapIn\">\u2014<\/span><\/div>\n      <div class=\"row\"><span class=\"label\">D\u00e9part<\/span><span id=\"recapOut\">\u2014<\/span><\/div>\n      <div class=\"row\"><span class=\"label\">Nuits<\/span><span id=\"recapNights\">\u2014<\/span><\/div>\n      <div class=\"row\"><span class=\"label\">Voyageurs<\/span><span id=\"recapGuests\">2<\/span><\/div>\n      <div class=\"row\"><span class=\"label\">Tarif<\/span><span>Communiqu\u00e9 par l&rsquo;h\u00f4te<\/span><\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<footer>\n  <div>\n    <strong>Le Relais du Pont Pinel<\/strong><br>\n    Sandrine &amp; Patrice Maloizel \u2014 1 rue des buttes, 35400 Saint-Malo\n  <\/div>\n  <div>\n    reservation@le-relais-du-pont-pinel.fr<br>\n    06 65 74 98 87 \u00b7 <a href=\"https:\/\/www.le-relais-du-pont-pinel.fr\" target=\"_blank\" rel=\"noopener\">le-relais-du-pont-pinel.fr<\/a>\n  <\/div>\n<\/footer>\n\n<div class=\"modal-overlay hidden\" id=\"modalOverlay\">\n  <div class=\"modal\">\n    <svg class=\"seal\" viewBox=\"0 0 100 100\">\n      <circle cx=\"50\" cy=\"50\" r=\"46\" fill=\"none\" stroke=\"#A13D34\" stroke-width=\"2.5\"><\/circle>\n      <circle cx=\"50\" cy=\"50\" r=\"38\" fill=\"none\" stroke=\"#A13D34\" stroke-width=\"1\"><\/circle>\n      <path d=\"M50 28c-9 0-14 7-14 14 0 10 14 26 14 26s14-16 14-26c0-7-5-14-14-14z\" fill=\"none\" stroke=\"#A13D34\" stroke-width=\"2\"><\/path>\n      <circle cx=\"50\" cy=\"42\" r=\"5\" fill=\"none\" stroke=\"#A13D34\" stroke-width=\"2\"><\/circle>\n    <\/svg>\n    <h3>Demande enregistr\u00e9e<\/h3>\n    <div class=\"ref\" id=\"modalRef\">R\u00c9F. \u2014<\/div>\n    <p class=\"msg\">Votre demande a bien \u00e9t\u00e9 transmise. Sandrine et Patrice vous recontactent sous peu par e-mail ou t\u00e9l\u00e9phone pour confirmer votre s\u00e9jour et le tarif.<\/p>\n    <div class=\"recap2\" id=\"modalRecap\"><\/div>\n    <div class=\"host\">\n      En cas d&rsquo;urgence, contactez directement l&rsquo;\u00e9tablissement :<br>\n      <a href=\"mailto:reservation@le-relais-du-pont-pinel.fr\">reservation@le-relais-du-pont-pinel.fr<\/a> \u00b7 06 65 74 98 87\n    <\/div>\n    <button class=\"modal-close\" id=\"modalClose\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script>\nconst ROOMS = [\n  {\n    id: 'surcouf',\n    eyebrow: 'Le corsaire',\n    name: 'Chambre Surcouf',\n    beds: '1 lit double + 1 lit simple',\n    bath: 'Salle de bain partag\u00e9e',\n    desc: \"Un hommage \u00e0 Robert Surcouf, c\u00e9l\u00e8bre corsaire malouin. Chambre spacieuse m\u00ealant meubles anciens et touches contemporaines, id\u00e9ale en famille ou entre amis.\",\n    img: 'https:\/\/www.le-relais-du-pont-pinel.fr\/wp-content\/uploads\/2026\/01\/chambresurcoufor.jpg'\n  },\n  {\n    id: 'duchesse-anne',\n    eyebrow: 'La duchesse',\n    name: 'Chambre Duchesse Anne',\n    beds: '1 lit double + 1 lit simple',\n    bath: 'Salle de bain priv\u00e9e attenante',\n    desc: \"En r\u00e9f\u00e9rence \u00e0 Anne de Bretagne, figure tut\u00e9laire de la r\u00e9gion. La plus intimiste des trois chambres, avec sa salle de bain priv\u00e9e attenante.\",\n    img: 'https:\/\/www.le-relais-du-pont-pinel.fr\/wp-content\/uploads\/2026\/01\/chambre-duchesse-anne-2-1024x640.jpg'\n  },\n  {\n    id: 'petit-be',\n    eyebrow: \"L'\u00eelot\",\n    name: 'Chambre Le Petit B\u00e9',\n    beds: '1 lit double',\n    bath: 'Salle de bain partag\u00e9e',\n    desc: \"Du nom de l'\u00eelot du Petit B\u00e9, accessible \u00e0 mar\u00e9e basse depuis les remparts. Une chambre douillette, parfaite pour un s\u00e9jour en duo.\",\n    img: 'https:\/\/www.le-relais-du-pont-pinel.fr\/wp-content\/uploads\/2026\/01\/chambre-petit-b-2-1024x640.jpg'\n  }\n];\n\nconst BedIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.6\"><path d=\"M3 18v-6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6M3 18v2M21 18v2M3 12V7a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3\"\/><\/svg>`;\nconst BathIcon = `<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.6\"><path d=\"M4 12h16v3a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4v-3zM7 12V6a2 2 0 0 1 3-1.7M6 21v-2M18 21v-2\"\/><\/svg>`;\n\nlet bookings = [];\nlet selectedRoom = null;\n\nfunction fmt(d){ return d ? new Date(d+'T00:00:00').toLocaleDateString('fr-FR',{day:'2-digit',month:'short',year:'numeric'}) : '\u2014'; }\n\nfunction nights(){\n  const ci = document.getElementById('checkin').value;\n  const co = document.getElementById('checkout').value;\n  if(!ci || !co) return 0;\n  const diff = (new Date(co) - new Date(ci)) \/ 86400000;\n  return diff > 0 ? diff : 0;\n}\n\nfunction overlaps(aStart, aEnd, bStart, bEnd){\n  return new Date(aStart) < new Date(bEnd) &#038;&#038; new Date(bStart) < new Date(aEnd);\n}\n\nfunction isRoomAvailable(roomId, ci, co){\n  if(!ci || !co) return null; \/\/ unknown, dates not chosen\n  return !bookings.some(b => b.roomId === roomId && overlaps(ci, co, b.checkin, b.checkout));\n}\n\nfunction renderRooms(){\n  const grid = document.getElementById('roomsGrid');\n  const ci = document.getElementById('checkin').value;\n  const co = document.getElementById('checkout').value;\n  grid.innerHTML = ROOMS.map(r => {\n    const avail = isRoomAvailable(r.id, ci, co);\n    let statusHtml, btnDisabled = false, btnLabel = 'Choisir cette chambre';\n    if(avail === null){\n      statusHtml = `<span class=\"dot\"><\/span> Choisissez vos dates`;\n    } else if(avail){\n      statusHtml = `<span class=\"dot ok\"><\/span> Disponible`;\n    } else {\n      statusHtml = `<span class=\"dot no\"><\/span> Indisponible`;\n      btnDisabled = true;\n      btnLabel = 'Indisponible';\n    }\n    const isChosen = selectedRoom === r.id;\n    return `\n      <div class=\"room-card\">\n        <div class=\"img-wrap\"><img decoding=\"async\" src=\"${r.img}\" alt=\"${r.name}\" loading=\"lazy\"><\/div>\n        <div class=\"body\">\n          <div class=\"eyebrow\">${r.eyebrow}<\/div>\n          <h3>${r.name}<\/h3>\n          <div class=\"specs\">\n            <span>${BedIcon} ${r.beds}<\/span>\n          <\/div>\n          <div class=\"specs\"><span>${BathIcon} ${r.bath}<\/span><\/div>\n          <p class=\"desc\">${r.desc}<\/p>\n          <div class=\"avail-row\">\n            <div class=\"avail-status\">${statusHtml}<\/div>\n            <button class=\"select-btn ${isChosen ? 'chosen' : ''}\" ${btnDisabled ? 'disabled' : ''} data-room=\"${r.id}\">\n              ${isChosen ? 'S\u00e9lectionn\u00e9e \u2713' : btnLabel}\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>`;\n  }).join('');\n\n  grid.querySelectorAll('.select-btn').forEach(btn => {\n    btn.addEventListener('click', () => {\n      selectedRoom = btn.dataset.room;\n      renderRooms();\n      updateChosenBox();\n      updateRecap();\n      document.getElementById('booking').scrollIntoView({behavior:'smooth', block:'start'});\n    });\n  });\n}\n\nfunction updateChosenBox(){\n  const box = document.getElementById('chosenRoomBox');\n  const room = ROOMS.find(r => r.id === selectedRoom);\n  if(!room){\n    box.className = 'chosen-room-box empty';\n    box.textContent = 'Aucune chambre s\u00e9lectionn\u00e9e \u2014 choisissez-en une ci-dessus.';\n  } else {\n    box.className = 'chosen-room-box';\n    box.innerHTML = `<div><strong>${room.name}<\/strong>${room.eyebrow} \u00b7 ${room.beds}<\/div>`;\n  }\n  validateForm();\n}\n\nfunction updateRecap(){\n  const ci = document.getElementById('checkin').value;\n  const co = document.getElementById('checkout').value;\n  const room = ROOMS.find(r => r.id === selectedRoom);\n  document.getElementById('recapRoom').textContent = room ? room.name : '\u2014';\n  document.getElementById('recapIn').textContent = fmt(ci);\n  document.getElementById('recapOut').textContent = fmt(co);\n  document.getElementById('recapNights').textContent = nights() ? nights() + (nights() > 1 ? ' nuits' : ' nuit') : '\u2014';\n  document.getElementById('recapGuests').textContent = document.getElementById('guests').value + (document.getElementById('guests').value === '1' ? ' personne' : ' personnes');\n}\n\nfunction validateForm(){\n  const ci = document.getElementById('checkin').value;\n  const co = document.getElementById('checkout').value;\n  const errEl = document.getElementById('formError');\n  const btn = document.getElementById('submitBtn');\n  let error = '';\n  if(!selectedRoom) error = '';\n  else if(!ci || !co) error = 'Choisissez vos dates d\\u2019arriv\u00e9e et de d\u00e9part.';\n  else if(nights() <= 0) error = 'La date de d\u00e9part doit \u00eatre apr\u00e8s la date d\\u2019arriv\u00e9e.';\n  else if(!isRoomAvailable(selectedRoom, ci, co)) error = 'Cette chambre n\\u2019est plus disponible sur ces dates.';\n\n  errEl.textContent = error;\n  btn.disabled = !selectedRoom || !!error;\n}\n\nasync function loadBookings(){\n  try{\n    const res = await window.storage.get('bookings', true);\n    bookings = res &#038;&#038; res.value ? JSON.parse(res.value) : [];\n  } catch(e){\n    bookings = [];\n  }\n  renderRooms();\n}\n\nasync function saveBooking(b){\n  bookings.push(b);\n  try{\n    await window.storage.set('bookings', JSON.stringify(bookings), true);\n  } catch(e){\n    console.error('Erreur de sauvegarde', e);\n  }\n}\n\nfunction genRef(){\n  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';\n  let s = 'PP-';\n  for(let i=0;i<5;i++) s += chars[Math.floor(Math.random()*chars.length)];\n  return s;\n}\n\ndocument.getElementById('checkin').addEventListener('change', () => {\n  const co = document.getElementById('checkout');\n  if(document.getElementById('checkin').value && (!co.value || co.value <= document.getElementById('checkin').value)){\n    const d = new Date(document.getElementById('checkin').value);\n    d.setDate(d.getDate()+1);\n    co.value = d.toISOString().slice(0,10);\n  }\n  renderRooms(); updateRecap(); validateForm();\n});\ndocument.getElementById('checkout').addEventListener('change', () => { renderRooms(); updateRecap(); validateForm(); });\ndocument.getElementById('guests').addEventListener('change', updateRecap);\n\nconst today = new Date().toISOString().slice(0,10);\ndocument.getElementById('checkin').min = today;\ndocument.getElementById('checkout').min = today;\n\ndocument.getElementById('bookingForm').addEventListener('submit', async (e) => {\n  e.preventDefault();\n  validateForm();\n  if(document.getElementById('submitBtn').disabled) return;\n\n  const room = ROOMS.find(r => r.id === selectedRoom);\n  const ci = document.getElementById('checkin').value;\n  const co = document.getElementById('checkout').value;\n  const booking = {\n    ref: genRef(),\n    roomId: room.id,\n    roomName: room.name,\n    checkin: ci,\n    checkout: co,\n    guests: document.getElementById('guests').value,\n    firstName: document.getElementById('firstName').value,\n    lastName: document.getElementById('lastName').value,\n    email: document.getElementById('email').value,\n    phone: document.getElementById('phone').value,\n    breakfast: document.getElementById('breakfast').value,\n    message: document.getElementById('message').value,\n    createdAt: new Date().toISOString()\n  };\n\n  document.getElementById('submitBtn').textContent = 'Envoi\u2026';\n  document.getElementById('submitBtn').disabled = true;\n  await saveBooking(booking);\n\n  document.getElementById('modalRef').textContent = 'R\u00c9F. ' + booking.ref;\n  document.getElementById('modalRecap').innerHTML = `\n    <div class=\"row\"><span>Chambre<\/span><span>${booking.roomName}<\/span><\/div>\n    <div class=\"row\"><span>Arriv\u00e9e<\/span><span>${fmt(booking.checkin)}<\/span><\/div>\n    <div class=\"row\"><span>D\u00e9part<\/span><span>${fmt(booking.checkout)}<\/span><\/div>\n    <div class=\"row\"><span>Voyageurs<\/span><span>${booking.guests}<\/span><\/div>\n    <div class=\"row\"><span>Nom<\/span><span>${booking.firstName} ${booking.lastName}<\/span><\/div>\n  `;\n  document.getElementById('modalOverlay').classList.remove('hidden');\n\n  e.target.reset();\n  selectedRoom = null;\n  document.getElementById('submitBtn').textContent = 'Envoyer la demande de r\u00e9servation';\n  renderRooms();\n  updateChosenBox();\n  updateRecap();\n});\n\ndocument.getElementById('modalClose').addEventListener('click', () => {\n  document.getElementById('modalOverlay').classList.add('hidden');\n});\ndocument.getElementById('modalOverlay').addEventListener('click', (e) => {\n  if(e.target.id === 'modalOverlay') document.getElementById('modalOverlay').classList.add('hidden');\n});\n\nloadBookings();\nupdateRecap();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Le Relais du Pont Pinel \u2014 R\u00e9servation Le Relais du Pont Pinel Chambres d&rsquo;h\u00f4tes \u00b7 Saint-Malo Nos chambres R\u00e9server Centre de parame Trois chambres, au rythme de la mar\u00e9e Nich\u00e9 pr\u00e8s du pont Pinel, \u00e0 800&nbsp;m\u00e8tres de la plage de Rochebonne et \u00e0 30&nbsp;minutes \u00e0 pied de la cit\u00e9 corsaire par la digue du Sillon, &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.le-relais-du-pont-pinel.fr\/index.php\/reservation\/\" class=\"more-link\">Lire la suite de<span class=\"screen-reader-text\">\u00ab\u00a0R\u00e9servation\u00a0\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inspiro_hide_title":true,"inspiro_hide_featured_image":true,"footnotes":""},"class_list":["post-264","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.le-relais-du-pont-pinel.fr\/index.php\/wp-json\/wp\/v2\/pages\/264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.le-relais-du-pont-pinel.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.le-relais-du-pont-pinel.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.le-relais-du-pont-pinel.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.le-relais-du-pont-pinel.fr\/index.php\/wp-json\/wp\/v2\/comments?post=264"}],"version-history":[{"count":3,"href":"https:\/\/www.le-relais-du-pont-pinel.fr\/index.php\/wp-json\/wp\/v2\/pages\/264\/revisions"}],"predecessor-version":[{"id":271,"href":"https:\/\/www.le-relais-du-pont-pinel.fr\/index.php\/wp-json\/wp\/v2\/pages\/264\/revisions\/271"}],"wp:attachment":[{"href":"https:\/\/www.le-relais-du-pont-pinel.fr\/index.php\/wp-json\/wp\/v2\/media?parent=264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}