/* Base commune des 6 sites d'exemple (concaténée avant la feuille du site). */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;min-height:100vh;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,picture{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
table{border-collapse:collapse}
.skip{position:absolute;left:12px;top:-200px;z-index:1000;padding:14px 18px;background:#fff;color:#000;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main:focus{outline:none}
[hidden]{display:none!important}
summary{cursor:pointer}
.credits{font-size:14px}
.credits summary{min-height:44px;display:inline-flex;align-items:center}
.credits ul{padding-left:1.2em;margin:.5em 0}
.credits li{margin:0}
.credits a{display:inline-flex;align-items:center;min-height:44px}
.err{display:flex;gap:.4em;align-items:flex-start;font-size:14px;margin-top:6px}
.err::before{content:"!";flex:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;font-size:11px;font-weight:700;line-height:1}
body.menu-ouvert{overflow:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
/* Formulaires par étapes : les étapes 2+ sont masquées dès le premier rendu (évite un décalage quand ex.js, en defer, les cache) */
@media (scripting:enabled){form[data-etapes]:not(.et-pret) [data-etape]~[data-etape]{display:none}}

/* Les Volets Bleus : maison de pierre, lettre manuscrite. Palette et échelle : exemples-projet/design/gite.md (section 11 prioritaire). */
@font-face{font-family:"Fraunces";src:url(../fonts/fraunces-italique.woff2) format("woff2");font-weight:380 450;font-style:italic;font-display:swap}
@font-face{font-family:"Fraunces";src:url(../fonts/fraunces-romaine.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url(../fonts/karla.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:optional}
:root{--lin:#F5EEE3;--lin2:#EADFCD;--brun:#2B211C;--pierre:#6B5F55;--terre:#A4442A;--terref:#7E3220;--olive:#5B6638;--tuile:#E7A27C;
--serif:"Fraunces",Georgia,serif;--sans:"Karla",system-ui,sans-serif;--m:22px;--sec:88px;--r:12px;--courbe:cubic-bezier(.3,.7,.2,1)}
@media (min-width:1024px){:root{--m:72px;--sec:152px}}
body{background:var(--lin);color:var(--brun);font:400 17px/1.7 var(--sans);position:relative}
/* Grain papier 4 % */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,.pied{position:relative;z-index:1}
@media (min-width:1024px){body{font-size:19px}}
h1,h2{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;hyphens:manual;overflow-wrap:normal}
h1{font-size:clamp(44px,7vw,112px);line-height:1}
h2{font-size:clamp(34px,4.2vw,64px);line-height:1.05}
h3{font:500 clamp(24px,2.2vw,30px)/1.2 var(--serif)}
h1 em,h2 em{font-style:italic;color:var(--terre)}
p,li{max-width:62ch}
a{color:var(--terre)}
a:hover{color:var(--terref)}
:focus-visible{outline:2px solid var(--terref);outline-offset:3px}
.surtitre{font:700 13px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--olive);margin-bottom:20px}
@media (min-width:1024px){.surtitre{font-size:14px}}
.petit{font-size:14px;color:var(--pierre)}
@media (min-width:1024px){.petit{font-size:15px}}
.chapo{margin-top:20px;font-size:1.05em}
.sec{padding:var(--sec) var(--m)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;border:0;font:700 16px/1 var(--sans);text-decoration:none;transition:background .3s var(--courbe),color .3s}
.btn-terre{background:var(--terre);color:var(--lin)}
.btn-terre:hover{background:var(--terref);color:var(--lin)}
.btn-lin{background:var(--lin);color:var(--terref)}
.btn-lin:hover{background:var(--lin2);color:var(--brun)}
.lien{display:inline-flex;align-items:center;min-height:48px;font-weight:700;text-underline-offset:5px}
/* Photos : coins 12 px, arcs en tête (signature) */
picture,picture img{display:block;width:100%}
img{border-radius:var(--r)}
.arc{overflow:hidden;border-radius:999px 999px var(--r) var(--r)}
.arc img{border-radius:0;width:100%;height:100%;object-fit:cover}
.arc picture{height:100%}
/* En-tête */
.hd{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px;padding:0 var(--m);background:var(--lin);transition:box-shadow .3s}
.hd.est-plein{box-shadow:0 1px 0 var(--lin2)}
.hd-logo{display:flex;align-items:center;min-height:48px}
.hd-logo img{height:48px;width:auto;border-radius:0}
.nav-bureau{display:none}
.nav-bureau ul{display:flex;gap:4px;list-style:none;padding:0}
.nav-bureau a{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;color:var(--brun);text-decoration:none;font-weight:500}
.nav-bureau a:hover{color:var(--terre)}
.nav-bureau a[aria-current=page]{color:var(--terre);text-decoration:underline;text-underline-offset:6px}
.nav-bureau li:last-child{display:none}
.hd-actions{display:flex;align-items:center;gap:8px}
.hd-resa{min-height:48px;padding:0 20px;font-size:15px}
.hd-menu{display:inline-flex;align-items:center;gap:8px;min-height:48px;min-width:48px;padding:0 8px;background:none;border:0;color:var(--brun);font:700 15px var(--sans)}
.burger{width:22px;height:12px;border-top:2px solid;border-bottom:2px solid}
.hd-menu[aria-expanded=true] .burger{height:2px;border-bottom:0}
@media (max-width:420px){.hd-menu [data-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.hd-logo img{height:44px}.hd-resa{padding:0 16px}}
@media (min-width:1024px){.nav-bureau{display:block}.hd-menu{display:none}}
/* Menu : panneau qui monte depuis le bas */
.menu{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end}
.menu-fond{position:absolute;inset:0;background:rgba(43,33,28,.45)}
.menu-panneau{position:relative;width:100%;max-height:88svh;overflow-y:auto;background:var(--lin);border-radius:24px 24px 0 0;padding:16px var(--m) 32px;animation:monte .35s var(--courbe)}
@keyframes monte{from{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.menu-panneau{animation:none}}
.menu-x{display:flex;margin-left:auto;align-items:center;min-height:48px;padding:0 8px;background:none;border:0;font:700 15px var(--sans);color:var(--brun);text-decoration:underline;text-underline-offset:4px}
.menu-liste{list-style:none;padding:0}
.menu-liste a{display:block;padding:6px 0;font:italic 400 34px/1.2 var(--serif);color:var(--brun);text-decoration:none}
.menu-liste a[aria-current=page]{color:var(--terre)}
.menu-pied{margin-top:20px;color:var(--pierre);font-size:15px}
/* Héros */
.heros{display:grid;gap:28px;padding:24px var(--m) 0}
.heros h1{max-width:9em}
.heros-txt p{margin-top:28px}
.heros-fig{margin:0}
.arc-heros{height:70svh;min-height:420px}
.heros-fig figcaption,.legende{margin-top:12px;font:italic 400 15px/1.5 var(--serif);color:var(--pierre)}
@media (min-width:1024px){.heros{grid-template-columns:1fr 1fr;align-items:center;gap:64px;padding-top:48px;max-width:1360px;margin:0 auto}.arc-heros{height:min(78vh,820px)}}
/* Lettre */
.lettre{text-align:center;max-width:820px;margin:0 auto}
.lettre-txt{font:italic 400 24px/1.45 var(--serif);max-width:none}
.ligne{display:inline}
.signature{margin:24px auto 0;font:italic 400 20px/1.4 var(--serif);color:var(--terre)}
@media (min-width:1024px){.lettre-txt{font-size:32px}}
/* Chambres (accueil) */
.chambres-une{max-width:1360px;margin:0 auto}
.cartes-ch{list-style:none;padding:0;margin-top:40px;display:grid;gap:48px}
.carte-ch{max-width:none}
.carte-ch-lien{color:var(--brun);text-decoration:none;display:block}
.carte-ch-lien:hover h3{color:var(--terre)}
.arc-43{aspect-ratio:4/3}
.carte-ch h3{margin-top:18px}
.carte-ch p{margin-top:6px}
.prix{font:500 18px/1.4 var(--serif);color:var(--brun)}
.prix span{font:400 15px var(--sans);color:var(--pierre)}
@media (min-width:768px){.cartes-ch{grid-template-columns:1fr 1fr;column-gap:40px}.carte-ch:nth-child(even){margin-top:96px}.arc-43{aspect-ratio:4/5}}
@media (min-width:1024px){.cartes-ch{column-gap:72px}}
/* Jardin */
.jardin{position:relative;padding:0 var(--m)}
.jardin-img img{aspect-ratio:4/5;object-fit:cover}
.jardin-txt{background:var(--lin);border-radius:var(--r);padding:28px 24px;margin:-80px 12px 0;position:relative}
.jardin-txt p{margin-top:12px}
@media (min-width:1024px){.jardin{max-width:1360px;margin:0 auto}.jardin-img img{aspect-ratio:16/8}.jardin-txt{position:absolute;right:calc(var(--m) + 48px);bottom:48px;max-width:460px;margin:0;padding:40px}}
/* Petit déjeuner : deux tirages inclinés */
.dej{display:grid;gap:48px;max-width:1360px;margin:0 auto}
.tirages{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.tirage{background:#fff;padding:8px 8px 28px;border-radius:4px;box-shadow:0 10px 30px rgba(43,33,28,.12)}
.tirage img{border-radius:2px;aspect-ratio:4/5;object-fit:cover}
.tirages .t2{margin-top:48px}
.dej-txt p{margin-top:16px}
.dej-liste{margin-top:20px;padding:0;list-style:none}
.dej-liste li{padding:10px 0 10px 28px;border-bottom:1px solid var(--lin2);position:relative}
.dej-liste li::before{content:"";position:absolute;left:4px;top:1.15em;width:8px;height:8px;border-radius:50%;background:var(--olive)}
@media (min-width:1024px){.dej{grid-template-columns:1fr 1fr;align-items:center;gap:96px}}
/* Rotation des tirages : posée par la feuille de l'Animation (.lu-tirage, ordinateur, hors mouvement réduit) */
/* Avis */
.avis-une{max-width:1360px;margin:0 auto}
.avis-piste{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;padding:0 0 12px;margin-top:32px}
.avis-piste>li{flex:0 0 86%;scroll-snap-align:start;max-width:none}
.avis-carte{margin:0;height:100%;background:var(--lin2);border-radius:var(--r);padding:28px}
.avis-carte p{font:italic 400 21px/1.45 var(--serif)}
.avis-carte figcaption{margin-top:16px;font-size:15px;color:var(--pierre)}
.fleches{display:flex;gap:8px;margin-top:12px}
.fleches button{width:48px;height:48px;border-radius:50%;border:1px solid var(--brun);background:none;color:var(--brun);font-size:20px}
.fleches button:hover{background:var(--brun);color:var(--lin)}
@media (min-width:1024px){.avis-piste{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;overflow:visible}.fleches{display:none}}
/* Bandeau */
.bandeau{background:var(--terref);color:var(--lin);text-align:center;padding:80px var(--m)}
.bandeau h2{max-width:16em;margin:0 auto 28px}
@media (min-width:1024px){.bandeau{padding:120px var(--m)}}
/* Pied */
.pied{background:var(--brun);color:var(--lin);padding:64px var(--m) 32px}
.pied-in{display:grid;gap:28px;max-width:1360px;margin:0 auto}
.pied-in img{width:189px;height:auto;border-radius:0}
.pied p{max-width:none}
.pied-bas{max-width:1360px;margin:40px auto 0;padding-top:20px;border-top:1px solid rgba(245,238,227,.2);display:grid;gap:12px}
.pied a{color:var(--tuile)}
.pied a:hover{color:var(--lin)}
.imagine{font-size:14px}
.imagine a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:1024px){.pied-in{grid-template-columns:1fr 1fr;align-items:start}.pied-bas{grid-template-columns:1fr auto;align-items:start}}
/* Pages intérieures */
.page-tete{padding-bottom:24px;max-width:1360px;margin:0 auto}
.page-tete h1{max-width:12em}
.note{margin-top:16px;font-size:1.1em}
.note strong{font:500 1.3em/1 var(--serif);color:var(--terre)}
.mentions{max-width:1360px;margin:0 auto;padding-top:24px}
/* Chambres */
.chambre{padding:48px 0;border-top:1px solid var(--lin2)}
.galerie{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;padding:0 var(--m) 12px;scroll-padding:0 var(--m)}
.galerie>li{flex:0 0 82%;scroll-snap-align:start;max-width:none}
.galerie img{aspect-ratio:4/5;object-fit:cover;height:100%}
.arc-ch{border-radius:999px 999px var(--r) var(--r)}
.chambre-txt{padding:28px var(--m) 0}
.equip{list-style:none;padding:0;margin-top:20px;display:grid;gap:4px}
.equip li{display:flex;gap:12px;align-items:flex-start}
.picto{flex:none;width:20px;height:20px;margin-top:.3em;color:var(--olive)}
.tarifs{width:100%;max-width:480px;margin:28px 0;border-collapse:collapse}
.tarifs caption{text-align:left;font:700 13px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--olive);padding-bottom:8px}
.tarifs th,.tarifs td{padding:10px 0;border-bottom:1px solid var(--lin2);text-align:left;font-weight:400}
.tarifs thead th{font-size:14px;color:var(--pierre)}
.tarifs td{text-align:right;font:500 18px var(--serif);font-variant-numeric:tabular-nums}
.tarifs thead th:last-child{text-align:right}
@media (min-width:1024px){.chambres-liste{max-width:1360px;margin:0 auto}.chambre{display:grid;grid-template-columns:7fr 5fr;gap:72px;padding:96px var(--m);align-items:start}.galerie{display:grid;overflow:visible;padding:0;gap:24px}.galerie>li:first-child{grid-column:1/-1}.galerie>li{grid-row:auto}.galerie{grid-template-columns:1fr 1fr}.galerie>li:first-child img{aspect-ratio:4/4.4}.chambre-txt{position:sticky;top:110px;padding:0}}
/* Maison */
.maison{display:grid;gap:40px;max-width:1360px;margin:0 auto}
.arc-maison{aspect-ratio:3/4}
.maison-txt p{margin-top:20px}
.ici{display:grid;gap:40px;max-width:1360px;margin:0 auto;padding-top:0}
.ici-col{background:var(--lin2);border-radius:var(--r);padding:32px 28px}
.ici-col h2{font-size:clamp(28px,3vw,40px)}
.ici-col ul{margin-top:16px;padding-left:1.2em}
.ici-col li{padding:4px 0}
.ici-col.non{background:none;border:1px solid var(--lin2)}
.maison-porte{max-width:420px;margin:0 auto;padding-top:0}
@media (min-width:1024px){.maison{grid-template-columns:5fr 7fr;gap:96px;align-items:center}.ici{grid-template-columns:1fr 1fr}}
/* Avis : livre d'or en colonnes */
.livre{list-style:none;max-width:1360px;margin:0 auto;padding-top:24px;columns:1;column-gap:32px}
.livre>li{break-inside:avoid;margin-bottom:24px;max-width:none}
@media (min-width:768px){.livre{columns:2}}
@media (min-width:1200px){.livre{columns:3}}
/* Venir */
.venir{display:grid;gap:40px;max-width:1360px;margin:0 auto;padding-top:16px}
.plan{margin:0}
.plan svg{width:100%;height:auto;border-radius:var(--r);border:1px solid var(--lin2)}
.blocs{display:grid;gap:32px}
.bloc h2{font-size:clamp(28px,3vw,40px)}
.bloc ul{margin-top:12px;padding-left:1.2em}
.bloc p{margin-top:12px}
.autour{display:grid;gap:40px;max-width:1360px;margin:0 auto}
.arc-autour{aspect-ratio:4/5}
.faq{max-width:900px;margin:0 auto}
.faq h2{margin-bottom:24px}
.faq details{border-top:1px solid var(--lin2)}
.faq details:last-child{border-bottom:1px solid var(--lin2)}
.faq summary{display:flex;align-items:center;min-height:56px;padding:12px 32px 12px 0;cursor:pointer;font:500 19px/1.35 var(--serif);list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;font:400 26px var(--sans);color:var(--terre)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 20px}
@media (min-width:1024px){.venir{grid-template-columns:7fr 5fr;gap:72px;align-items:start}.autour{grid-template-columns:5fr 7fr;gap:96px;align-items:center}}
/* Contact */
.contact-img{padding:16px var(--m) 0}
.contact-img img{aspect-ratio:16/10;object-fit:cover}
.form{display:grid;gap:32px;margin-top:40px;max-width:640px}
.temps{border:0;padding:0;margin:0;display:grid;gap:24px;min-width:0}
.temps>legend{font:italic 400 clamp(26px,3vw,36px)/1.2 var(--serif);padding:0;margin-bottom:20px}
.deux{display:grid;gap:24px}
@media (min-width:560px){.deux{grid-template-columns:1fr 1fr}}
.champ{border:0;padding:0;margin:0;min-width:0}
.champ label,.champ>legend{display:block;font-weight:700;margin-bottom:8px;padding:0}
.champ input,.champ textarea{width:100%;min-height:52px;padding:12px 16px;background:#FBF7F0;border:1px solid var(--pierre);border-radius:var(--r);color:var(--brun)}
.champ [aria-invalid=true]{border-color:var(--terref);border-width:2px}
.err{color:var(--terref)}
.ch-radios{display:grid;gap:10px}
.ch-radio{display:flex!important;align-items:center;gap:14px;min-height:64px;padding:8px 14px 8px 8px;border:1px solid var(--pierre);border-radius:var(--r);background:#FBF7F0;cursor:pointer;font-weight:500!important;margin:0!important;position:relative}
.ch-radio input{position:absolute;opacity:0;width:1px;height:1px}
.ch-radio picture{flex:none;width:56px}
.ch-radio img{width:56px;height:56px;object-fit:cover;border-radius:8px}
.ch-radio:has(input:checked){border:2px solid var(--terre);background:var(--lin2)}
.ch-radio:has(input:checked) span::after{content:" ✓";color:var(--terre);font-weight:700}
.ch-radio:has(input:focus-visible){outline:2px solid var(--terref);outline-offset:3px}
@media (min-width:560px){.ch-radios{grid-template-columns:1fr 1fr}}
.pas{display:flex;max-width:200px}
.pas button{flex:none;width:52px;height:52px;background:none;border:1px solid var(--pierre);color:var(--brun);font-size:22px}
.pas button:first-child{border-radius:var(--r) 0 0 var(--r)}
.pas button:last-child{border-radius:0 var(--r) var(--r) 0}
.pas input{text-align:center;border-radius:0;border-left:0;border-right:0;-moz-appearance:textfield;appearance:textfield}
.pas input::-webkit-inner-spin-button{-webkit-appearance:none}
.encadre{padding:24px;background:var(--lin2);border-radius:var(--r);font:italic 400 21px/1.45 var(--serif)}
@media (min-width:1024px){.contact{display:grid;grid-template-columns:5fr 7fr;max-width:1360px;margin:0 auto}.contact-img{position:sticky;top:96px;align-self:start;padding:48px 0 0 var(--m)}.contact-img img{aspect-ratio:3/4}.contact-form{padding-top:48px}}