/* La Maison Boulonnaise — feuille de style unique (style « Plein écran », comme chezedwige.com) */

@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Figtree";src:url(/assets/fonts/figtree-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --fond:#FFFFFF;
  --surface:#F4F3EF;    /* pierre claire */
  --marine:#1F3B57;     /* titres, liens, boutons : bleu des volets boulonnais */
  --marine-2:#152B41;
  --texte:#23272B;
  --gris:#5F676E;
  --ligne:#E3E1DA;
  --focus:#C98A00;
  --nuit:#121A22;       /* pied de page */
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --fond:#13181D; --surface:#1C232A; --marine:#8FB6DA; --marine-2:#B5D0EA;
    --texte:#ECEFF2; --gris:#A3ADB6; --ligne:#2B343C; --focus:#F0CB6A; --nuit:#0C1116;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);
  font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.0625rem;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--marine);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a[href^="tel:"]{white-space:nowrap}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:3px}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;color:var(--marine);line-height:1.12;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,1.5rem + 3.4vw,4.2rem);line-height:1.03}
h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem)}
h3{font-size:1.3rem}
p{margin:0 0 1em}
.wrap{width:min(1120px,100% - 2rem);margin-inline:auto}
.texte{max-width:66ch}
.saut{position:absolute;left:-999px;top:0;background:var(--surface);padding:.6rem 1rem;z-index:20}
.saut:focus{left:1rem;top:1rem}

/* en-tête */
.entete{background:var(--fond);border-bottom:1px solid var(--ligne);position:relative}
.entete .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.25rem}
.marque{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--marine)}
.marque svg{width:48px;height:48px;flex:none}
.marque .nom{display:flex;flex-direction:column;gap:.2rem}
.marque b{font-weight:700;font-size:1.45rem;line-height:1;letter-spacing:-.02em}
.marque .nom span{color:var(--gris);font-size:.9rem;line-height:1}
@media (max-width:420px){.marque svg{width:40px;height:40px}.marque b{font-size:1.2rem}}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1.4rem;align-items:center}
.nav a{text-decoration:none;color:var(--texte);padding:.3rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--marine)}
.bouton-menu{display:none;font:inherit;background:none;border:1px solid var(--ligne);border-radius:6px;padding:.4rem .8rem;color:var(--texte)}
@media (max-width:860px){
  .bouton-menu{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:4.25rem;background:var(--fond);border-bottom:1px solid var(--ligne);z-index:10}
  .nav.ouvert{display:block}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;padding:.5rem 1rem 1rem}
  .nav a{display:block;padding:.7rem 0;border-bottom:1px solid var(--ligne)}
}

/* boutons */
.btn{display:inline-block;font-weight:700;text-decoration:none;border-radius:999px;padding:.75rem 1.3rem;line-height:1.2;
  background:var(--marine);color:#fff;border:2px solid var(--marine)}
@media (prefers-color-scheme:dark){.btn{color:var(--nuit)}}
.btn:hover{background:var(--marine-2);border-color:var(--marine-2)}
.btn.discret{background:transparent;color:var(--marine)}
.btn.discret:hover{background:var(--surface)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0}

/* accueil : photo pleine largeur, en-tête posé dessus */
body:has(.baie) .entete{position:absolute;left:0;right:0;top:0;z-index:5;background:transparent;border-bottom:0}
body:has(.baie) .entete .marque,body:has(.baie) .entete .marque span,body:has(.baie) .nav > ul > li > a,body:has(.baie) .bouton-menu{color:#fff}
body:has(.baie) .bouton-menu{border-color:rgba(255,255,255,.6)}
body:has(.baie) .entete::before{content:"";position:absolute;inset:0 0 -2rem;background:linear-gradient(rgba(10,18,26,.6),transparent);z-index:-1}
@media (max-width:860px){body:has(.baie) .nav.ouvert{background:var(--nuit)}}
.baie{position:relative;min-height:min(88vh,780px);display:flex;align-items:flex-end;color:#fff;isolation:isolate}
.baie-texte{padding:7rem 0 3rem}
.baie-photo{position:absolute;inset:0;margin:0;z-index:-1}
.baie-photo img{width:100%;height:100%;object-fit:cover}
.baie-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,18,26,.9) 0%,rgba(10,18,26,.6) 50%,rgba(10,18,26,.25) 100%)}
.baie h1,.baie .chapo,.baie .adresse-accueil a{color:#fff}
.baie h1{text-shadow:0 2px 18px rgba(0,0,0,.35);max-width:18ch}
.baie .chapo{font-size:1.25rem;max-width:44ch}
.adresse-accueil{font-weight:700}
.baie .btn{background:#fff;color:var(--marine-2);border-color:#fff}
@media (prefers-color-scheme:dark){.baie .btn{color:#152B41}}
.baie .btn.discret{background:transparent;color:#fff;border-color:#fff}

/* blocs */
section.bloc{padding:4.5rem 0}
.bloc.pierre{background:var(--surface)}
.logements{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}
.logement img{border-radius:10px;aspect-ratio:4/3;object-fit:cover;width:100%;margin-bottom:1rem}
.logement h3{font-size:1.45rem;margin-bottom:.3rem}
.logement h3 a{color:inherit;text-decoration:none}
.logement h3 a:hover{text-decoration:underline}
.capacite{color:var(--gris);margin-bottom:.6rem}
.note{background:var(--surface);border-left:4px solid var(--marine);padding:.9rem 1.1rem;border-radius:0 6px 6px 0;max-width:66ch}

/* points forts */
.atouts{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem 2rem}
.atouts li{border-top:2px solid var(--marine);padding-top:.75rem}
.atouts b{display:block;color:var(--marine);font-size:1.1rem}

/* distances */
.distances{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0 2.5rem;margin:1.5rem 0 0}
.distances dl{margin:0}
.distances div{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--ligne)}
.distances dt{margin:0}
.distances dd{margin:0;font-weight:600;white-space:nowrap}
.source{font-size:.88rem;color:var(--gris);margin-top:.9rem}

/* pages intérieures */
.tete{padding:2.75rem 0 1.5rem}
.tete .chapo{font-size:1.15rem;max-width:62ch}
.fil{font-size:.95rem;color:var(--gris);margin-bottom:1rem}
.fil a{color:var(--gris)}
.fiche{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:2.5rem;align-items:start}
@media (max-width:900px){.fiche{grid-template-columns:1fr}}
.essentiel{background:var(--surface);border-radius:14px;padding:1.4rem 1.5rem;position:sticky;top:1rem}
.essentiel dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem}
.essentiel dt{color:var(--gris)}
.essentiel dd{margin:0;font-weight:700}
.essentiel .actions{margin-bottom:0}
.unite{padding:2rem 0;border-top:1px solid var(--ligne);scroll-margin-top:1rem}
.unite:first-child{border-top:0;padding-top:0}
.pieces{padding-left:1.2rem;margin:0 0 1rem}
.pieces li{margin-bottom:.35rem}
.sommaire{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2rem;padding:0;list-style:none}
.sommaire a{display:block;border:1.5px solid var(--marine);border-radius:999px;padding:.35rem .95rem;text-decoration:none;font-weight:600;font-size:.95rem}
.sommaire a:hover{background:var(--marine);color:var(--fond)}

/* galeries et visionneuse */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;margin:1.25rem 0 0;padding:0;list-style:none}
.galerie a{display:block;border-radius:10px;overflow:hidden}
.galerie img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:opacity .15s}
.galerie a:hover img{opacity:.85}
dialog.visionneuse{padding:0;border:0;background:transparent;max-width:min(96vw,1280px);max-height:96vh}
dialog.visionneuse::backdrop{background:rgba(10,18,26,.9)}
dialog.visionneuse img{max-height:84vh;width:auto;margin:auto;border-radius:4px}
dialog.visionneuse p{color:#fff;text-align:center;margin:.6rem 0 0}
.visionneuse .commandes{display:flex;justify-content:center;gap:.5rem;margin-top:.6rem}
.visionneuse button{font:inherit;background:#fff;color:#1B2427;border:0;border-radius:999px;padding:.45rem 1rem;cursor:pointer}

/* vidéo au clic */
.video{max-width:560px;margin:.5rem 0 1.5rem}
.video-lancer,.video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:10px;overflow:hidden;padding:0;position:relative;cursor:pointer;background:#000}
.video-lancer img{width:100%;height:100%;object-fit:cover;opacity:.8}
.video-icone{position:absolute;left:50%;top:50%;width:64px;height:44px;margin:-22px 0 0 -32px;border-radius:12px;background:#c00}
.video-icone::after{content:"";position:absolute;left:26px;top:13px;border-style:solid;border-width:9px 0 9px 16px;border-color:transparent transparent transparent #fff}
.video-lancer:hover .video-icone,.video-lancer:focus-visible .video-icone{background:#e00}
.video-note{font-size:.85rem;color:var(--gris);margin:.4rem 0 0}

/* historique : frise */
.frise{list-style:none;margin:1.5rem 0 0;padding:0 0 0 1.4rem;border-left:2px solid var(--marine);max-width:60ch}
.frise li{position:relative;padding:0 0 1.4rem}
.frise li::before{content:"";position:absolute;left:-1.4rem;top:.45rem;width:12px;height:12px;margin-left:-7px;border-radius:50%;background:var(--fond);border:2px solid var(--marine)}
.frise time{display:block;font-weight:700;color:var(--marine)}
blockquote{margin:1.5rem 0;padding:1rem 1.25rem;background:var(--surface);border-left:4px solid var(--marine);border-radius:0 6px 6px 0;max-width:62ch;font-size:1.1rem}

/* contact */
.coord{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem 2.5rem;margin-top:1rem}
.carte-coord{background:var(--surface);border-radius:14px;padding:1.4rem 1.5rem}
.carte-coord h2{font-size:1.35rem}
.grand{font-size:1.3rem;font-weight:700}

/* pied de page */
.pied{background:var(--nuit);color:#E8EDF1;margin-top:3rem;padding:2.5rem 0 2rem}
.pied a{color:#fff}
.pied .colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem}
.pied h2{color:#fff;font-size:1.2rem}
.pied .bas{margin-top:2rem;font-size:.92rem;opacity:.85}

/* barre de réservation mobile */
.barre-appel{display:none}
@media (max-width:760px){
  .barre-appel{display:flex;gap:.5rem;position:fixed;left:0;right:0;bottom:0;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom,0px));
    background:var(--fond);border-top:1px solid var(--ligne);z-index:15}
  .barre-appel .btn{flex:1;text-align:center;padding:.7rem .5rem}
  body{padding-bottom:4.5rem}
}

/* éléments à compléter : visibles uniquement hors du domaine final (aperçu, local) */
.a-completer{display:none}
html.preprod .a-completer{display:block;background:#FFF1C2;color:#3A2E00;border:2px dashed #C99A00;padding:.6rem .9rem;border-radius:6px;margin:1rem 0}
html.preprod span.a-completer{display:inline;padding:0 .3rem;margin:0}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}