/* Design « Carnet de voyage » : un carnet collé de souvenirs (papier kraft, tampons encrés, timbres dentelés, polaroïds et ruban adhésif). Courier Prime + Karla. */
.d-carnet {
  --stamp: color-mix(in oklab, var(--primary), #2a1408 18%);
  --navy: #2b4560;
  --kraft: #d4b88b;
  --kraft-2: #c3a170;
  --paper: #fffcf4;
  --leather: #34251b;
  --tape: color-mix(in oklab, var(--primary), #f4e7c6 72%);
  /* Dentelure de timbre : quatre rangées de trous combinées par intersection */
  --perf: radial-gradient(circle 4px at 50% 0, #0000 95%, #000) 0 0 / 12px 100% round,
    radial-gradient(circle 4px at 50% 100%, #0000 95%, #000) 0 0 / 12px 100% round,
    radial-gradient(circle 4px at 0 50%, #0000 95%, #000) 0 0 / 100% 12px round,
    radial-gradient(circle 4px at 100% 50%, #0000 95%, #000) 0 0 / 100% 12px round;
  --dots: radial-gradient(circle 1px, rgba(80, 55, 30, .2) 98%, transparent) 0 0 / 22px 22px;
  --bg: #f4eddf;
  --bg-soft: #ebe1cc;
  --surface: var(--paper);
  --ink: #2a2119;
  --ink-2: #54473a;
  --ink-3: #75685a;
  --line: #d9cbb1;
  --head-w: 700;
  --h1-w: 700;
  --head-track: -.025em;
  --h1-track: -.04em;
  --btn-r: 3px;
  --footer-bg: var(--leather);
  --shadow: 0 12px 26px -14px rgba(60, 40, 20, .45), 0 2px 4px rgba(60, 40, 20, .08);
  background: var(--dots), var(--bg);
}
.d-carnet .perf { mask: var(--perf); mask-composite: intersect; }

/* Boutons : étiquettes tapées à la machine */
.d-carnet .btn { font-family: var(--font-head); font-weight: 700; letter-spacing: .02em; }
.d-carnet .btn-primary { background: var(--stamp); box-shadow: 3px 3px 0 var(--leather); }
.d-carnet .btn-primary:hover { background: var(--primary-700); box-shadow: 4px 4px 0 var(--leather); }
.d-carnet .btn-ghost { background: var(--paper); border: 1.5px dashed var(--ink-3); }

/* Annonce + en-tête : la couture du carnet */
.d-carnet .announce { background: var(--navy); font-family: var(--font-head); letter-spacing: .03em; }
.d-carnet .site-header { background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: 2px dashed var(--kraft-2); }
.d-carnet .brand-mark { border-radius: 0; background: linear-gradient(var(--stamp), var(--stamp)) content-box, var(--paper); padding: 5px; box-shadow: none; mask: var(--perf); mask-composite: intersect; width: 48px; height: 52px; rotate: -4deg; }
.d-carnet .brand-mark .ic { width: 22px; height: 22px; }
.d-carnet .brand-text strong { font-size: 1.2rem; letter-spacing: -.03em; }
.d-carnet .brand-stars { color: var(--stamp); }
.d-carnet .nav a { border-radius: 0; font-family: var(--font-head); font-size: .9rem; color: var(--ink-2); }
.d-carnet .nav a:hover { background: none; color: var(--stamp); text-decoration: underline wavy var(--primary-200) 1.5px; text-underline-offset: 6px; }
.d-carnet .nav-toggle { border-radius: 3px; background: var(--paper); }

/* Bannière : une page kraft avec polaroïd scotché, tampon et timbre */
.d-carnet .hero { background: transparent; }
.d-carnet .hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.08; }
.d-carnet .hero-sub { font-size: 1.1rem; }
.d-carnet .pill-badge, .d-carnet .eyebrow { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--stamp); background: none; border: 2px solid currentColor; border-radius: 3px; padding: .35em .8em; box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px currentColor; rotate: -2deg; }
.d-carnet .pill-badge .dot { display: none; }
.d-carnet .hero-art { border-radius: 4px; box-shadow: var(--shadow-lg);
  background: radial-gradient(90% 70% at 30% 20%, rgba(255, 245, 220, .45), transparent 70%), repeating-linear-gradient(97deg, rgba(90, 60, 25, .05) 0 1px, transparent 1px 7px), repeating-linear-gradient(8deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 11px), var(--kraft); }
.d-carnet .hero-art::before { inset: 10% 18% 20% 12%; border: 13px solid var(--paper); border-bottom-width: 46px; rotate: -4deg; box-shadow: 0 14px 24px -10px rgba(40, 25, 10, .55);
  background: radial-gradient(circle at 68% 38%, #fff4d8 0 8%, rgba(255, 240, 205, .55) 8.5% 13%, transparent 13.5%),
    radial-gradient(130% 60% at 12% 100%, #5d5a3a 0 46%, transparent 46.5%), radial-gradient(110% 55% at 96% 100%, #7f7b4f 0 52%, transparent 52.5%),
    linear-gradient(transparent 58%, #7d9a98 58% 72%, transparent 72%), linear-gradient(color-mix(in oklab, var(--primary), #f6d8a8 62%), #f7e2bd 60%); }
.d-carnet .hero-art::after { content: ''; position: absolute; top: calc(10% - 16px); left: 36%; width: 30%; height: 32px; rotate: -6deg; opacity: .88;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 6px, transparent 6px 12px), var(--tape);
  clip-path: polygon(0 0, 100% 0, 97% 25%, 100% 50%, 97% 75%, 100% 100%, 0 100%, 3% 75%, 0 50%, 3% 25%); }
.d-carnet .art-ring { translate: none; left: auto; mix-blend-mode: multiply; color: var(--navy); }
.d-carnet .art-ring.r1 { width: 28%; left: 3%; top: 3%; border: 6px double currentColor; rotate: 14deg; opacity: .8; display: grid; place-items: center; }
.d-carnet .art-ring.r1::after { content: 'BON\A VOYAGE'; white-space: pre; text-align: center; font: 700 clamp(.55rem, 1.1vw, .82rem)/1.2 var(--font-head); letter-spacing: .12em; border-block: 2px solid; padding: .2em 0; }
.d-carnet .art-ring.r2 { width: 34%; height: 36px; aspect-ratio: auto; left: 27%; top: 9%; border: 0; border-radius: 0; animation: none; rotate: 14deg; opacity: .7; background: var(--navy);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='36'%3E%3Cpath d='M0 6q12-7 24 0t24 0M0 18q12-7 24 0t24 0M0 30q12-7 24 0t24 0' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") 0 0 / 48px 36px repeat-x; }
.d-carnet .art-cross { right: 6%; left: auto; top: 36%; translate: none; width: 25%; aspect-ratio: 4 / 5; border-radius: 0; border: 0; padding: 8px; rotate: 8deg; backdrop-filter: none;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .25), transparent 60%) content-box, linear-gradient(160deg, var(--primary), var(--primary-700)) content-box, var(--paper);
  mask: var(--perf); mask-composite: intersect; }
.d-carnet .art-cross .ic { width: 50%; height: 50%; filter: none; }
.d-carnet .art-pill { display: none; animation: none; }
.d-carnet .art-pill.p3 { display: grid; right: auto; left: 52%; bottom: 4%; width: 19%; height: auto; aspect-ratio: 3 / 4; border-radius: 0; rotate: 11deg; padding-top: 18%; color: var(--stamp); box-shadow: inset 0 0 0 3px #f6ead0, inset 0 0 0 4px var(--kraft-2);
  background: #efe0bd; clip-path: polygon(28% 0, 72% 0, 100% 16%, 100% 100%, 0 100%, 0 16%); mask: radial-gradient(circle 6px at 50% 13%, #0000 95%, #000); }
.d-carnet .float-card { border-radius: 2px; background: var(--paper); border-left: 3px dashed var(--kraft-2); box-shadow: var(--shadow); rotate: -2deg; }
.d-carnet .fc-addr { rotate: 2deg; }
.d-carnet .float-card strong { font-family: var(--font-head); }

/* Points forts : une bande de tickets détachables */
.d-carnet .hl-grid { border-radius: 0; border: 0; background: var(--paper); box-shadow: var(--shadow);
  mask: radial-gradient(circle 12px at 0 50%, #0000 95%, #000) 0 0 / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, #0000 95%, #000) 100% 0 / 51% 100% no-repeat; }
.d-carnet .hl-item { padding: 26px 26px; }
.d-carnet .hl-item + .hl-item { border-left: 2px dashed var(--line); }
.d-carnet .hl-item strong { font-family: var(--font-head); }
.d-carnet .ic-box { border-radius: 50%; background: none; color: var(--stamp); border: 2px solid currentColor; box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px currentColor; }

/* Titres de section */
.d-carnet .sec-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.d-carnet .sec-head .eyebrow { margin-bottom: 18px; }
.d-carnet .sec-head.center .eyebrow { rotate: 2deg; }

/* Chambres : des polaroïds scotchés */
.d-carnet .pj-chip { border-radius: 3px; font-family: var(--font-head); background: var(--paper); border-style: dashed; }
.d-carnet .pj-chip.on { background: var(--stamp); border: 1.5px solid var(--stamp); }
.d-carnet .pj-grid { gap: 34px 28px; }
.d-carnet .room { border-radius: 2px; border: 0; padding: 12px 12px 0; background: var(--paper); box-shadow: var(--shadow); rotate: -1deg; overflow: visible; }
.d-carnet .room:nth-child(even) { rotate: 1.2deg; }
.d-carnet .room:hover { rotate: 0deg; transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.d-carnet .room::before { content: ''; position: absolute; z-index: 2; top: -12px; left: 50%; translate: -50% 0; width: 96px; height: 26px; rotate: -3deg; opacity: .85; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 5px, transparent 5px 10px), var(--tape); }
.d-carnet .room-img { border-radius: 0; }
.d-carnet .room-ph, .d-carnet .news-img { color: rgba(255, 250, 235, .85);
  background: radial-gradient(circle at 16% 22%, #fff1d2 0 6%, transparent 6.5%), radial-gradient(130% 55% at 15% 100%, #66623f 0 45%, transparent 45.5%),
    radial-gradient(110% 50% at 95% 100%, #87824f 0 50%, transparent 50.5%), linear-gradient(color-mix(in oklab, var(--primary), #f3d3a2 60%), #f5e1bd 70%); }
.d-carnet .room-ph .ic { width: 18%; translate: 0 -18%; }
.d-carnet .room-price { top: 22px; right: 18px; border-radius: 3px; background: var(--paper); color: var(--stamp); font-family: var(--font-head); border: 2px solid currentColor; box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px currentColor; rotate: 4deg; padding: .45em .8em; }
.d-carnet .room-body { padding: 18px 10px 22px; }
.d-carnet .room-cat { font-family: var(--font-head); color: var(--stamp); letter-spacing: .1em; }
.d-carnet .room h3 { font-size: 1.3rem; }
.d-carnet .room-facts .ic { color: var(--stamp); }
.d-carnet .room-book { font-family: var(--font-head); color: var(--stamp); border-bottom: 2px dashed currentColor; }
.d-carnet .pj-pager button { border-radius: 3px; font-family: var(--font-head); }
.d-carnet .pj-pager button.on { background: var(--stamp); border-color: var(--stamp); }

/* La carte : une page de cahier ligné avec marge */
.d-carnet .menu-sec { background: transparent; }
.d-carnet .menu-board { border-radius: 2px; border: 0; box-shadow: var(--shadow); padding-left: clamp(40px, 7vw, 96px);
  background: linear-gradient(90deg, transparent clamp(22px, 4.5vw, 64px), rgba(190, 70, 60, .45) 0 calc(clamp(22px, 4.5vw, 64px) + 2px), transparent 0),
    repeating-linear-gradient(transparent 0 31px, rgba(43, 69, 96, .09) 31px 32px), var(--paper); }
.d-carnet .menu-board::before { content: ''; position: absolute; top: -13px; right: 10%; width: 110px; height: 28px; rotate: 4deg; opacity: .85; background: var(--tape); }
.d-carnet .menu-group h3 { color: var(--stamp); border-bottom: 2px solid var(--stamp); display: inline-block; padding-right: 14px; font-size: 1.4rem; }
.d-carnet .dish-line strong { font-weight: 700; }
.d-carnet .dish-dots { border-bottom: 2px dashed var(--kraft-2); }
.d-carnet .dish-price { font-family: var(--font-head); color: var(--stamp); }
.d-carnet .menu-note { font-family: var(--font-head); font-style: normal; }

/* Services : étiquettes de bagage en kraft */
.d-carnet .cards { gap: 26px; }
.d-carnet .card { border-radius: 0; border: 0; padding-top: 48px; background: radial-gradient(80% 60% at 30% 20%, rgba(255, 245, 220, .4), transparent 70%), repeating-linear-gradient(97deg, rgba(90, 60, 25, .05) 0 1px, transparent 1px 7px), var(--kraft);
  clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%, 0 26px); mask: radial-gradient(circle 8px at 50% 22px, #0000 95%, #000); }
.d-carnet .card::after { inset: 14px auto auto 50%; translate: -50% 0; width: 22px; height: 22px; border-radius: 50%; background: none; border: 3px solid #f3e6c9; transform: none; }
.d-carnet .card:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: none; }
.d-carnet .card .ic-box, .d-carnet .card:hover .ic-box { background: none; color: var(--leather); box-shadow: inset 0 0 0 3px var(--kraft), inset 0 0 0 4px currentColor; }
.d-carnet .card h3 { font-size: 1.2rem; }
.d-carnet .card p { color: #3f3226; }

/* L'établissement : une page de passeport tamponnée */
.d-carnet .about { background: var(--bg-soft); }
.d-carnet .about-art { border-radius: 3px; border: 0; box-shadow: var(--shadow); color: var(--stamp);
  background: radial-gradient(circle at 18% 22%, transparent 46px, rgba(43, 69, 96, .25) 47px 50px, transparent 51px), radial-gradient(circle at 84% 80%, transparent 58px, rgba(70, 110, 70, .25) 59px 62px, transparent 63px),
    radial-gradient(circle at 82% 16%, transparent 34px, color-mix(in oklab, var(--primary), transparent 75%) 35px 38px, transparent 39px),
    repeating-linear-gradient(45deg, rgba(43, 69, 96, .05) 0 1px, transparent 1px 9px), var(--paper); }
.d-carnet .about-art { position: relative; overflow: hidden; }
.d-carnet .about-art::before, .d-carnet .about-art::after { position: absolute; font: 700 .85rem/1 var(--font-head); letter-spacing: .16em; padding: .55em .9em; mix-blend-mode: multiply; }
.d-carnet .about-art::before { content: 'ARRIVÉE'; top: 9%; right: 7%; color: var(--navy); border: 3px double currentColor; rotate: 12deg; opacity: .55; }
.d-carnet .about-art::after { content: 'VISA ✓'; bottom: 10%; left: 8%; color: #4f7a52; border: 2px solid currentColor; border-radius: 50%; padding: 1.1em 1.2em; rotate: -14deg; opacity: .55; }
.d-carnet .about-art .ic { width: 30%; padding: 7%; border-radius: 50%; border: 3px solid currentColor; box-shadow: 0 0 0 6px var(--paper), 0 0 0 9px currentColor; rotate: -8deg; }
.d-carnet .about-art-name { font-size: 1.3rem; color: var(--ink); background: var(--tape); padding: .3em 1em; rotate: -2deg; }
.d-carnet .stats div { border-radius: 0; border: 2px dashed var(--kraft-2); background: var(--paper); }
.d-carnet .stats dt { color: var(--stamp); font-weight: 700; font-size: 1.55rem; letter-spacing: -.04em; }

/* Labels : de vrais timbres dentelés */
.d-carnet .trust { background: transparent; }
.d-carnet .trust-item { border-radius: 0; border: 0; background: var(--paper); padding: 28px; box-shadow: inset 0 0 0 10px var(--paper), inset 0 0 0 11px var(--line); mask: var(--perf); mask-composite: intersect; }
.d-carnet .trust-item:nth-child(even) { rotate: 1deg; }
.d-carnet .trust-item h3, .d-carnet .review figcaption strong, .d-carnet .member strong { font-family: var(--font-head); }

/* Avis : des cartes postales oblitérées */
.d-carnet .review { position: relative; border-radius: 2px; border: 0; background: var(--paper); box-shadow: var(--shadow); }
.d-carnet .review::before { content: ''; position: absolute; top: 12px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 2px dashed color-mix(in oklab, var(--navy), transparent 45%); }
.d-carnet .review blockquote { font-size: 1.04rem; font-style: italic; color: var(--ink-2); }
.d-carnet .review figcaption { border-top: 1px solid var(--line); padding-top: 14px; }
.d-carnet .stars { color: var(--stamp); }

/* Encadré : enveloppe « par avion » */
.d-carnet .cta { border-radius: 0; color: var(--ink); background: var(--paper); box-shadow: var(--shadow-lg); border: 12px solid;
  border-image: repeating-linear-gradient(-45deg, var(--primary) 0 14px, var(--paper) 14px 22px, var(--navy) 22px 36px, var(--paper) 36px 44px) 12; }
.d-carnet .cta h2 { color: var(--ink); }
.d-carnet .cta p { color: var(--ink-2); opacity: 1; }
.d-carnet .cta-deco { opacity: .1; right: 20px; top: auto; bottom: -70px; width: 240px; rotate: -12deg; }
.d-carnet .cta-deco .ic { stroke: var(--primary); }
.d-carnet .cta .btn-white { background: var(--stamp); color: #fff; box-shadow: 3px 3px 0 var(--leather); }

/* Équipe : portraits polaroïd */
.d-carnet .member .avatar { border-radius: 0; border: 12px solid var(--paper); border-bottom-width: 40px; box-shadow: var(--shadow); rotate: -2deg; background: linear-gradient(color-mix(in oklab, var(--primary), #f3d3a2 60%), #e8d2a8); }
.d-carnet .member:nth-child(even) .avatar { rotate: 2deg; }
.d-carnet .avatar span { font-family: var(--font-head); color: var(--paper); }
.d-carnet .review .avatar { border: 0; background: var(--stamp); }

/* Réservation : feuille scotchée */
.d-carnet .quote-sec { background: var(--bg-soft); }
.d-carnet .quote-form { position: relative; border-radius: 2px; border: 0; box-shadow: var(--shadow); }
.d-carnet .quote-form::before { content: ''; position: absolute; top: -12px; left: 28px; width: 90px; height: 26px; rotate: -4deg; opacity: .85; background: var(--tape); }
.d-carnet .f-field label { font-family: var(--font-head); }
.d-carnet .f-field input, .d-carnet .f-field select, .d-carnet .f-field textarea { border-radius: 2px; background: #fffefa; border-color: #cfbe9f; }
.d-carnet .quote-points .ic { border-radius: 50%; background: none; color: var(--stamp); border: 2px solid currentColor; }

/* Alentours : étiquettes de bagage */
.d-carnet .towns li { border: 0; border-radius: 0; padding-left: 26px; background: var(--kraft); color: var(--ink); clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); mask: radial-gradient(circle 4px at 14px 50%, #0000 95%, #000); }
.d-carnet .towns .ic { color: var(--leather); }
.d-carnet .towns small { color: #4d3f31; }

/* Horaires, contact, FAQ : carnet à spirale */
.d-carnet .panel { position: relative; border-radius: 2px; border: 0; padding-top: 46px; box-shadow: var(--shadow);
  background: radial-gradient(circle 7px at 50% 20px, var(--bg-soft) 55%, #a8916e 62% 78%, transparent 84%) 0 0 / 30px 40px repeat-x, var(--paper); }
.d-carnet .quote-form.panel { padding-top: 34px; background: var(--paper); }
.d-carnet .panel-head > .ic, .d-carnet .faq .plus { border-radius: 50%; background: none; color: var(--stamp); border: 2px solid currentColor; }
.d-carnet .panel-head .eyebrow { border: 0; box-shadow: none; padding: 0; rotate: 0deg; }
.d-carnet .status-line, .d-carnet .closures { border-radius: 0; background: var(--bg); border: 1px dashed var(--kraft-2); }
.d-carnet .hours-table tr.today th::after { border-radius: 2px; }
.d-carnet .map { border-radius: 2px; border: 10px solid var(--paper); box-shadow: var(--shadow); }
.d-carnet .faq details { border-radius: 0; border: 0; border-left: 4px solid var(--kraft); background: var(--paper); box-shadow: var(--shadow-sm); }
.d-carnet .faq details[open] { border-left-color: var(--stamp); }
.d-carnet .faq summary { font-family: var(--font-head); }
.d-carnet .faq details[open] .plus { background: var(--stamp); border-color: var(--stamp); }

/* Actualités : cartes postales */
.d-carnet .news-card { border-radius: 2px; padding: 22px 14px 24px; box-shadow: var(--shadow); background: repeating-linear-gradient(transparent 0 27px, rgba(43, 69, 96, .07) 27px 28px), var(--paper); clip-path: none; mask: none; }
.d-carnet .news-card::after { display: none; }
.d-carnet .news-card .news-img { border-radius: 0; }
.d-carnet .news-date { display: inline-block; align-self: flex-start; font-family: var(--font-head); color: var(--navy); border: 2px solid currentColor; padding: .2em .6em; rotate: -3deg; margin: 0 10px; }
.d-carnet .news-card h3, .d-carnet .news-text { padding: 0 10px; }

/* Pied de page : la couverture en cuir surpiquée */
.d-carnet .site-footer { position: relative; }
.d-carnet .site-footer::before { content: ''; position: absolute; inset: 12px; border: 2px dashed rgba(244, 230, 200, .22); border-radius: 6px; pointer-events: none; }
.d-carnet .site-footer h3 { font-family: var(--font-head); color: var(--kraft); letter-spacing: .14em; }
.d-carnet .brand-light .brand-mark { background: linear-gradient(var(--primary), var(--primary)) content-box, #f4e6c8; }
.d-carnet .socials a { border-radius: 3px; }

@media (max-width: 920px) {
  .d-carnet .hl-item + .hl-item { border-left: 0; }
  .d-carnet .hl-item { border-bottom: 2px dashed var(--line); }
  .d-carnet .hl-item:nth-child(odd) { border-right: 2px dashed var(--line); }
}
@media (max-width: 560px) {
  .d-carnet .hl-item:nth-child(odd) { border-right: 0; }
  .d-carnet .hl-grid { mask: none; }
  .d-carnet .hero-art::before { border-width: 9px 9px 32px; }
  .d-carnet .art-ring.r1 { border-width: 4px; }
  .d-carnet .cta { border-width: 10px; }
  .d-carnet .room, .d-carnet .room:nth-child(even) { rotate: 0deg; }
  .d-carnet .btn { white-space: normal; text-align: center; line-height: 1.25; }
  .d-carnet .team { grid-template-columns: 1fr 1fr; gap: 20px; }
  .d-carnet .member .avatar { border-width: 8px 8px 26px; }
}