/* ==========================================================================
   Marquise Collection : feuille de style du reseau
   Version 1, 16 septembre 2026
   Ne pas modifier hotel par hotel. Toute evolution passe par le reseau.
   ========================================================================== */

/* 1. Police, auto-hebergee : aucun appel exterieur, aucune donnee transmise */
@font-face{
  font-family:"Cormorant Garamond";
  src:url("polices/cormorant-garamond.b6530b27.woff2") format("woff2-variations"),
      url("polices/cormorant-garamond.b6530b27.woff2") format("woff2");
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}

/* 2. Jetons. Seule palette admise sur un site du reseau. */
:root{
  --encre:#2F415B;      /* vert marquise, couleur dominante */
  --papier:#F7F3EA;     /* fond principal */
  --gris:#5C6E89;       /* texte secondaire et surtitres */
  --filet:#BFC5CF;      /* separateurs et bordures */
  --blanc:#FFFFFF;      /* cartes et respiration */
  --surface:#FBF9F4;    /* fond de carte sur papier */
  --clair:#C6CBD2;      /* enseigne sur fond vert */
  --voile:rgba(47,65,91,.70);   /* voile porte par le bloc de texte. Compose
       avec le voile general de 30 %, il donne 76 % sous les lettres, la ou
       il en faut 74 % pour tenir le niveau AA sur la photographie la plus
       claire du lot, celle du petit-dejeuner. */
  --serif:"Cormorant Garamond",Garamond,Georgia,"Times New Roman",serif;
  --large:1180px;
  --verrou-h:72px;   /* pose par le moteur : hauteur qui garde l'enseigne a 7 px */
  --gouttiere:24px;
}

/* 3. Remise a zero */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--serif);font-size:20px;line-height:1.65;font-weight:500;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--encre);outline-offset:2px;}
.pied :focus-visible{outline-color:var(--papier);}
.saut{position:absolute;left:-9999px;top:0;background:var(--encre);color:var(--papier);
  padding:12px 20px;z-index:100;text-decoration:none;}
.saut:focus{left:0;}

/* 4. Typographie. Cormorant Garamond sur tous les niveaux, sans exception. */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;text-wrap:balance;margin:0;overflow-wrap:break-word;hyphens:auto;}
h1{font-size:clamp(40px,6vw,64px);line-height:1.05;letter-spacing:-.005em;}
h2{font-size:clamp(28px,3.8vw,38px);line-height:1.15;margin-bottom:16px;}
h3{font-size:24px;line-height:1.25;margin-bottom:8px;}
h4{font-size:21px;line-height:1.3;margin-bottom:6px;}
p{margin:0 0 18px;max-width:62ch;}
p:last-child{margin-bottom:0;}
.sur{font-family:var(--serif);font-size:13px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gris);margin:0 0 12px;max-width:none;}
.chapeau{font-size:23px;color:var(--gris);max-width:56ch;}
.mention{font-size:16px;color:var(--gris);}
.credit-photo{font-size:14px;color:var(--gris);text-align:right;margin:10px auto 0;
  max-width:var(--large);padding-inline:var(--gouttiere);letter-spacing:.04em;}
strong{font-weight:700;}

/* 5. Conteneurs et rythme vertical */
.conteneur{max-width:var(--large);margin-inline:auto;padding-inline:var(--gouttiere);}
.etroit>*{max-width:780px;}   /* le contenu etroit s'aligne sur le heros, il ne se centre pas */
section{padding-block:76px;}
section.filet{border-top:1px solid var(--filet);}
section.pale{background:var(--blanc);}
section.pleine{padding-block:0;}
.duo{display:grid;gap:52px;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));}
.duo.texte-droite>.visuel{order:-1;}
.visuel img{width:100%;}
.visuel.vide{aspect-ratio:4/3;border:1px solid var(--filet);display:flex;
  align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,#FBF9F4 0 12px,#F3F0E7 12px 24px);}
.visuel.vide span{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);}

/* 6. En-tete collant */
.entete{position:sticky;top:0;z-index:40;background:var(--papier);
  border-bottom:1px solid var(--filet);}
.entete .conteneur{display:flex;align-items:center;gap:28px;
  padding-block:14px;min-height:74px;}
.verrou{display:flex;align-items:center;text-decoration:none;flex:0 0 auto;}
.verrou svg,.verrou img{height:var(--verrou-h);width:auto;display:block;}
.entete nav{margin-left:auto;}
.entete nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0;flex-wrap:wrap;}
.entete nav a{text-decoration:none;font-size:17px;padding-block:4px;
  border-bottom:1px solid transparent;white-space:nowrap;}
.entete nav a:hover,.entete nav a[aria-current="page"]{border-bottom-color:var(--encre);}
.outils{display:flex;align-items:center;gap:18px;flex:0 0 auto;}
.langues{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin:0;}
/* Cibles cliquables de 24 px au moins, critere 2.5.8. Le remplissage agrandit
   la zone sans deplacer le texte a l'ecran. Point 12 de la norme. */
.barre-langues{border-bottom:1px solid var(--filet);}
.barre-langues .conteneur{display:flex;justify-content:flex-end;}
.langues{list-style:none;padding:0;display:flex;gap:4px;}
.langues li{margin:0;}
.langues a{text-decoration:none;display:flex;align-items:center;gap:7px;
  padding:7px 7px 6px;font-size:13px;letter-spacing:.12em;line-height:1;color:var(--gris);
  border-bottom:1px solid transparent;}
.langues a:hover,.langues a[aria-current]{color:var(--encre);border-bottom-color:var(--encre);}
.picto{color:var(--encre);flex:0 0 auto;display:block;}
.pictos{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);margin:28px 0 0;
  border-top:1px solid var(--filet);border-left:1px solid var(--filet);}
.pictos.trois{grid-template-columns:repeat(3,1fr);margin:10px 0 36px;}
.pictos.quatre{margin:10px 0 36px;}
.pictos li{margin:0;border-right:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:22px 18px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;background:var(--surface);}
.pictos strong{font-size:18px;font-weight:600;color:var(--encre);line-height:1.2;}
.pictos span{font-size:15.5px;color:var(--gris);line-height:1.4;}
.sur-bande{margin-top:28px;}
.ligne-pictos{max-width:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:22px 0 0;padding:16px 0;
  border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);}
.ligne-pictos span{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--encre);}
.ligne-pictos .quoi{color:var(--gris);}
@media(max-width:900px){.pictos{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.pictos.trois{grid-template-columns:1fr;}.pictos.trois.six{grid-template-columns:repeat(2,1fr);}}
@media(max-width:340px){.pictos{grid-template-columns:1fr;}}
.tetes-ch{margin-top:28px;}
.tete-ch{margin:0;}
.tete-ch h3{font-size:24px;margin:12px 0 0;}
.defile{aspect-ratio:3/2;background:var(--surface);border:1px solid var(--filet);overflow:hidden;}
.defile img{width:100%;height:100%;object-fit:cover;display:block;}
.defile.vide{display:flex;align-items:center;justify-content:center;color:var(--gris);}
.defile.plusieurs ul{list-style:none;margin:0;padding:0;display:flex;gap:0;height:100%;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;}
.defile.plusieurs ul::-webkit-scrollbar{display:none;}
.defile.plusieurs li{flex:0 0 100%;scroll-snap-align:start;margin:0;}

.comparatif-cadre{overflow-x:auto;margin-top:26px;}
.comparatif{width:100%;min-width:560px;border-collapse:collapse;background:var(--surface);}
.comparatif th,.comparatif td{border-bottom:1px solid var(--filet);padding:13px 14px;text-align:center;
  font-size:17px;color:var(--encre);vertical-align:middle;font-weight:400;}
.comparatif thead th{font-size:23px;font-weight:600;padding-top:18px;}
.comparatif th[scope=row]{text-align:left;color:var(--gris);}
.comparatif th[scope=row] span{display:inline-flex;align-items:center;gap:9px;}
.comparatif{table-layout:fixed;}
.comparatif thead td,.comparatif th[scope=row]{width:28%;}
.comparatif .prix-ligne strong{display:block;font-size:30px;font-weight:600;line-height:1.2;}
.comparatif .prix-ligne span{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);}
.cta-ch{margin:24px 0 0;max-width:none;}
.cta-ch .bouton{display:block;width:100%;box-sizing:border-box;text-align:center;padding:17px 20px;}
.fiche-mobile,.prix-mobile{display:none;}
@media(max-width:640px){
  .comparatif-cadre{display:none;}
  .fiche-mobile{display:grid;list-style:none;padding:0;margin:12px 0 0;gap:8px;}
  .fiche-mobile li{display:flex;align-items:center;gap:10px;margin:0;font-size:17px;color:var(--encre);}
  .prix-mobile{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:14px 0 8px;color:var(--gris);}
  .prix-mobile strong{font-size:24px;color:var(--encre);font-weight:600;}
  .prix-mobile .bouton{margin-left:auto;}
}
.sur-demande{margin:22px 0 0;max-width:none;padding:16px 20px;border-left:2px solid var(--encre);
  background:var(--surface);color:var(--encre);font-size:18px;}
.equipements-ch{text-align:center;margin:34px 0 8px;padding:22px 0 20px;
  border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);}
.equipements-ch .sur{margin:0 0 14px;max-width:none;}
.pictos.sobre{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 8px;border:0;margin:0;}
.pictos.sobre li{flex:0 0 150px;border:0;background:none;padding:6px 4px;gap:8px;}
.pictos.sobre strong{font-size:17px;font-weight:500;}
@media(max-width:640px){.pictos.sobre li{flex-basis:30%;}}
.label-velo{display:flex;align-items:center;gap:22px;margin:28px 0 0;padding:18px 22px;
  background:var(--surface);border:1px solid var(--filet);max-width:720px;}
.label-velo img{width:auto;height:110px;flex:0 0 auto;}
.label-velo strong{display:block;font-size:20px;font-weight:600;color:var(--encre);margin-bottom:4px;}
.label-velo p{margin:0;font-size:17px;color:var(--gris);}
.sommaire{border-bottom:1px solid var(--filet);}
.sommaire ul{list-style:none;margin:0;padding:14px 0;display:flex;flex-wrap:wrap;gap:6px 26px;}
.sommaire li{margin:0;}
.sommaire a{display:inline-block;padding:4px 0;font-size:16px;color:var(--encre);}
.carte-picto .picto{margin-bottom:14px;}
.drapeau{display:block;width:21px;height:14px;box-shadow:0 0 0 1px var(--filet);}
.bascule{display:none;background:none;border:1px solid var(--filet);
  font-family:var(--serif);font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre);padding:9px 14px;cursor:pointer;}
@media(max-width:1140px){
  .entete .conteneur{flex-wrap:wrap;gap:16px;}
  .bascule{display:block;margin-left:auto;order:2;}
  .outils{order:3;}
  .entete nav{order:4;flex-basis:100%;margin-left:0;display:none;}
  .entete nav[data-ouvert="oui"]{display:block;}
  .entete nav ul{flex-direction:column;gap:0;padding-bottom:12px;}
  .entete nav li{border-top:1px solid var(--filet);}
  .entete nav a{display:block;padding-block:13px;border-bottom:0;}
}
.mobile-seul{display:none;}
@media(max-width:640px){
  .entete>.conteneur>.outils{display:none;}
  .mobile-seul{display:block;border-top:1px solid var(--filet);padding-block:14px;}
  .mobile-seul .bouton{display:block;text-align:center;}
  .barre-langues .conteneur{justify-content:center;}
  /* le verrou garde sa taille : c'est la gouttiere et le bouton qui cedent,
     pour que la ligne d'enseigne reste lisible sur telephone */
  :root{--gouttiere:16px;}
  .entete .conteneur{gap:12px;}
  .bascule{font-size:14px;letter-spacing:.10em;padding:8px 12px;}
}
@media(max-width:400px){
  /* dernier cran avant que le verrou et le bouton ne tiennent plus sur une ligne */
  .entete .verrou img,.entete .verrou svg{height:calc(var(--verrou-h) * .88);}
}
@media(max-width:359px){
  :root{--gouttiere:14px;}
  .entete .verrou img,.entete .verrou svg{height:calc(var(--verrou-h) * .72);}
}

/* 7. Bouton */
.bouton{display:inline-block;text-decoration:none;font-family:var(--serif);
  font-size:16px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:13px 26px;border:1px solid var(--encre);background:var(--encre);
  color:var(--papier);cursor:pointer;transition:background .15s,color .15s;}
.bouton:hover{background:transparent;color:var(--encre);}
.bouton.creux{background:transparent;color:var(--encre);}
.bouton.creux:hover{background:var(--encre);color:var(--papier);}
.bouton.clair{background:var(--papier);color:var(--encre);border-color:var(--papier);}
.bouton.clair:hover{background:transparent;color:var(--papier);}
.actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px;}

/* 8. Heros. Une photographie de la maison, jamais un aplat seul. */
/* padding-block a zero : le heros heritait des 76 px de section, qui
   laissaient une bande de photographie sous le bloc de texte et empechaient
   le voile de descendre jusqu'en bas. La reserve est reportee telle quelle
   dans le conteneur, rien ne bouge a l'oeil. */
.heros{position:relative;min-height:clamp(460px,72vh,720px);display:flex;
  align-items:flex-end;background:var(--encre);overflow:hidden;padding-block:0;}
.heros>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Deux couches, pour tenir ensemble le paragraphe 5 et le paragraphe 12 de
   la norme. La premiere est un voile leger sur toute la photographie, qui la
   laisse respirer. La seconde, portee par le bloc de texte lui-meme, ne
   s'etend qu'a l'aplomb des lettres et se dissipe vers le haut. Mesure du
   16 septembre 2026 : le texte monte jusqu'a 74 % de la hauteur du heros
   selon les pages, un degrade cale sur la photographie ne pouvait donc pas
   l'atteindre sans tout assombrir. */
.heros::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(47,65,91,.30) 0%,
    rgba(47,65,91,.22) 55%,rgba(47,65,91,.12) 100%);}
.heros .conteneur{position:relative;z-index:2;color:var(--papier);
  padding-block:56px 144px;width:100%;}
/* sans photographie il n'y a pas de voile a porter : la reserve basse
   redevient celle d'une section ordinaire */
.heros.sans-image .conteneur{padding-block:56px 76px;}
/* Le voile de lisibilite suit le bloc de texte au lieu de suivre l'image :
   il prend toute la largeur du heros, s'arrete au sommet du texte et se
   dissipe en 90 px au-dessus. Le haut de la photographie reste intact quelle
   que soit la hauteur du heros, qui va de 377 a 648 px selon les pages. */
.heros .conteneur::before{content:"";position:absolute;z-index:-1;
  left:50%;transform:translateX(-50%);width:100vw;top:-300px;bottom:0;
  /* la dissipation court sur 300 px et la moitie haute du bloc : sur 90 px
     elle se voyait comme un trait en travers de la photographie */
  /* le degrade se compte en pixels depuis le haut : la dissipation court sur
     les 300 px au-dessus du bloc de texte, et le voile reste plein sur tout
     le bloc, quelle que soit sa hauteur */
  background:linear-gradient(to bottom,rgba(47,65,91,0) 0,
    rgba(47,65,91,.34) 175px,var(--voile) 300px,var(--voile) 100%);
  pointer-events:none;}
.heros.sans-image .conteneur::before{display:none;}
/* sur photographie, le survitre passe au papier plein : en #BFCCC3 il
   demandait un voile a 88 %, qui aurait efface la photographie. */
.heros .sur{color:var(--papier);}
.heros h1{color:var(--papier);max-width:16ch;}
.heros .chapeau{color:var(--papier);margin-top:20px;}
.heros.court{min-height:clamp(320px,44vh,430px);}
.heros.sans-image{background:var(--encre);min-height:clamp(320px,44vh,450px);}
.heros.sans-image.court{min-height:clamp(260px,32vh,330px);}

/* 9. Barre de disponibilite */
.dispo{background:var(--blanc);border-block:1px solid var(--filet);
  padding-block:22px;position:relative;z-index:5;}
.dispo form{display:grid;gap:18px;align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));}
.dispo label{display:flex;flex-direction:column;gap:5px;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);}
.dispo input,.dispo select{font-family:var(--serif);font-size:18px;font-weight:500;
  color:var(--encre);background:var(--blanc);border:0;border-bottom:1px solid var(--filet);
  padding:7px 2px;width:100%;}
.dispo input:hover,.dispo select:hover{border-bottom-color:var(--encre);}
/* « DISPONIBILITES » mesurait 144 px pour 122 px de place entre les marges
   du bouton : le mot touchait le bord droit, et en debordait sous 1 140 px.
   Colonnes de 170 px au moins, marges et interlettrage resserres ; le decalage
   que l'interlettrage laisse apres la derniere lettre est compense a gauche. */
.dispo .bouton{width:100%;text-align:center;letter-spacing:.08em;
  padding:13px 12px 13px calc(12px + .08em);}

/* 10. Ligne de reperes */
.reperes{display:grid;gap:34px;
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));}
.repere .nombre{display:block;font-size:44px;line-height:1;font-weight:600;color:var(--encre);}
.repere .quoi{display:block;margin-top:10px;font-size:16px;letter-spacing:.06em;color:var(--gris);}

/* 11. Cartes */
.grille{display:grid;gap:30px;margin-top:38px;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));}
.grille.paire{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));}
/* trois cartes dans une grille a deux colonnes laissent la troisieme a
   demi-largeur, avec du vide a cote. On compte les cartes. Point 12 ter. */
.grille:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr));}
/* nombre impair sur deux colonnes : la derniere carte prend la ligne entiere
   plutot que de laisser un trou a cote d'elle */
.grille:not(:has(> :nth-child(3):last-child)) > :last-child:nth-child(odd){
  grid-column:1 / -1;}
.grille.paire:has(> :nth-child(3):last-child){grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));}
@media(max-width:900px){
  .grille:has(> :nth-child(3):last-child){grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));}
}
.carte{background:var(--blanc);border:1px solid var(--filet);display:flex;flex-direction:column;}
section.pale .carte{background:var(--surface);}
.carte .image{aspect-ratio:3/2;background:var(--surface);overflow:hidden;
  border-bottom:1px solid var(--filet);display:flex;align-items:center;justify-content:center;}
.carte .image.vide{background:repeating-linear-gradient(135deg,#FBF9F4 0 12px,#F3F0E7 12px 24px);}
.carte .image.vide span{font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);text-align:center;padding:0 18px;}
.carte .image img{width:100%;height:100%;object-fit:cover;}
.carte .corps{padding:26px;flex:1;display:flex;flex-direction:column;}
.carte .corps p{font-size:18px;color:var(--gris);}
.carte .corps .bouton{margin-top:auto;align-self:flex-start;}
.carte dl{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 16px;
  font-size:15px;letter-spacing:.06em;color:var(--gris);text-transform:uppercase;}
.carte dl div{display:flex;gap:6px;}
.carte dt{font-weight:500;}
.carte dd{margin:0;color:var(--encre);}
.prix{font-size:20px;color:var(--encre);margin-top:14px;}
.prix .depuis{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);}

/* 11 ter. Commodites : ce qui ne se photographie pas, une ligne chacun */
.commodites{display:grid;gap:0 48px;margin-top:36px;border-top:1px solid var(--filet);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));}
.commodites>div{padding:20px 0;border-bottom:1px solid var(--filet);}
.commodites h3{font-size:20px;margin-bottom:5px;}
.commodites p{font-size:17.5px;color:var(--gris);margin:0;max-width:46ch;}

/* 12. Liste de faits */
dl.faits{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);
  margin:26px 0 0;border-top:1px solid var(--filet);max-width:760px;}
dl.faits dt{padding:13px 0;border-bottom:1px solid var(--filet);
  font-size:16px;letter-spacing:.05em;color:var(--gris);}
dl.faits dd{padding:13px 0;border-bottom:1px solid var(--filet);margin:0;font-size:19px;}
dl.faits dd a{display:inline-block;padding:3px 0;}
@media(max-width:620px){
  dl.faits{grid-template-columns:1fr;}
  dl.faits dt{border-bottom:0;padding-bottom:0;}
}

/* 13. Bande de photographies */
.galerie{display:grid;gap:14px;margin-top:38px;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));}
.galerie img{aspect-ratio:4/3;object-fit:cover;width:100%;}
.bande{display:block;width:100%;}
.bande img{width:100%;max-height:480px;object-fit:cover;}

/* 14. Questions frequentes */
.faq{margin-top:34px;max-width:860px;}
.faq details{border-bottom:1px solid var(--filet);padding-block:18px;}
.faq details:first-of-type{border-top:1px solid var(--filet);}
.faq summary{cursor:pointer;font-size:21px;font-weight:600;list-style:none;
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--gris);font-weight:500;flex:0 0 auto;
  font-size:24px;line-height:1;}
.faq details[open] summary::after{content:"\2013";}
.faq details p{margin:14px 0 0;color:var(--gris);}

/* 15. Avis */
.avis{background:var(--encre);color:var(--papier);}
.avis .sur{color:var(--clair);}
.avis h2{color:var(--papier);}
.note{display:flex;align-items:baseline;gap:16px;margin-bottom:8px;flex-wrap:wrap;}
.note .valeur{overflow-wrap:anywhere;}
.note .valeur{font-size:62px;line-height:1;font-weight:600;}
.note .sur-quoi{font-size:20px;color:var(--clair);}
.avis .volume{color:var(--clair);font-size:17px;letter-spacing:.06em;}
.citations{display:grid;gap:28px;margin-top:40px;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));}
.citation{border-left:1px solid rgba(247,243,234,.30);padding-left:22px;}
.citation p{font-size:20px;margin-bottom:12px;}
.citation .qui{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--clair);}

/* 16. Reservation directe */
.direct .grille{margin-top:34px;}
.direct .carte{background:var(--blanc);}
.direct .carte .corps{padding:28px;}

/* 17. Encart pratique */
.encart{background:var(--surface);border:1px solid var(--filet);padding:30px;margin-top:34px;}
.encart h3{margin-bottom:12px;}
.encart ul{margin:0;padding-left:22px;}
.encart li{margin-bottom:8px;color:var(--gris);}
.encart li:last-child{margin-bottom:0;}

/* 18. Formulaire */
form.demande{display:grid;gap:18px;max-width:640px;margin-top:30px;}
form.demande label{display:flex;flex-direction:column;gap:6px;font-size:16px;color:var(--gris);}
form.demande input,form.demande select,form.demande textarea{
  font-family:var(--serif);font-size:19px;font-weight:500;color:var(--encre);
  background:var(--blanc);border:1px solid var(--filet);padding:12px 14px;width:100%;}
form.demande textarea{min-height:150px;resize:vertical;}
form.demande .paire{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));}
form.demande button{justify-self:start;}
.aveugle{position:absolute;left:-9999px;}

/* 19. Fil d'Ariane */
.fil{font-size:16px;color:var(--gris);padding-block:20px 0;}
.fil a{text-decoration:none;display:inline-block;padding:3px 2px;}
.fil a:hover{text-decoration:underline;}

/* 20. Pied de page */
.pied{background:var(--encre);color:var(--papier);padding-block:62px 30px;}
.pied a{color:var(--papier);text-decoration:none;}
.pied a:hover{text-decoration:underline;}
/* Trois colonnes depuis le 16 septembre 2026 : la quatrieme, « Le sejour »,
   reprenait mot pour mot les entrees du bandeau. Ecart assume au point 7 de
   la norme, qui en decrit quatre. Elles se posent sur la gauche a largeur
   egale plutot que de s'etirer sur toute la ligne. */
.pied .colonnes{display:grid;gap:40px 64px;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),300px));
  justify-content:start;}
.pied h4{font-size:13px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--clair);margin:0 0 16px;font-weight:500;}
/* le remplissage porte la cible a 24 px ; le gap se reduit d'autant pour que
   les colonnes ne s'allongent pas. Point 12 de la norme. */
.pied ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;}
.pied ul a,.pied address a,.pied .bas a{display:inline-block;padding:4px 0;}
.pied address{font-style:normal;line-height:1.75;}
.pied .verrou{margin-bottom:26px;}
.pied .verrou svg,.pied .verrou img{height:74px;}
.pied .bas{margin-top:46px;padding-top:22px;border-top:1px solid rgba(247,243,234,.22);
  font-size:15px;color:var(--clair);display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;}
.pied .bas ul{flex-direction:row;flex-wrap:wrap;gap:20px;}
/* L'adresse de l'enseigne suit la mention, dans le meme lien : le point 7 de
   la norme n'en veut qu'un seul dans le pied. */
.pied .bas .adresse-enseigne{opacity:.86;}

/* 21. Ce qui reste a completer, visible et impossible a oublier */
/* 21 bis. Pages reprises : liste des pages portees, et tableaux */
.liens-pages{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.liens-pages li.dependante a{padding-left:18px;}
.colonnes-plan{display:grid;gap:44px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  margin-top:10px;}
.colonnes-plan h2{font-size:24px;}
.liens-pages li{border-top:1px solid var(--filet);}
.liens-pages a{display:block;padding:14px 0;text-decoration:none;font-size:19px;}
.liens-pages a:hover{text-decoration:underline;text-underline-offset:3px;}
table{border-collapse:collapse;width:100%;margin:22px 0 0;font-size:17px;}
table caption{text-align:left;font-size:15px;color:var(--gris);padding-bottom:10px;}
table td,table th{border-top:1px solid var(--filet);padding:11px 14px 11px 0;
  text-align:left;vertical-align:top;font-weight:400;}
table tr:first-child td,table tr:first-child th{border-top:0;}
/* sur telephone, un tableau de trois ou quatre colonnes deborde : chaque
   ligne se replie en bloc, la premiere cellule servant d'intitule */
@media(max-width:640px){
  table:not(.comparatif),table:not(.comparatif) tbody,table:not(.comparatif) tr,
  table:not(.comparatif) td{display:block;width:100%;}
  table:not(.comparatif) tr{border-top:1px solid var(--filet);padding:12px 0 4px;}
  table:not(.comparatif) tr:first-child{border-top:0;}
  table:not(.comparatif) td{border-top:0;padding:0 0 6px;}
  table:not(.comparatif) td:first-child{font-weight:600;color:var(--encre);}
}

.acompleter{background:#FFF4C2;color:#5A4A00;padding:1px 7px;
  border-bottom:1px dashed #9A8200;font-weight:600;overflow-wrap:anywhere;
  /* sur telephone la zone passe a la ligne : sans cela le fond jaune ne
     suivait que la premiere ligne et la seconde tombait sur la photographie */
  -webkit-box-decoration-break:clone;box-decoration-break:clone;}

/* 22. Impression : la page des informations pratiques doit sortir proprement */
@media print{
  .entete,.dispo,.pied,.actions,.fil,.bascule{display:none !important;}
  body{background:#fff;font-size:12pt;}
  section{padding-block:18pt;break-inside:avoid;}
  .heros{min-height:0;background:none;color:var(--encre);}
  .heros::after{display:none;}
  .heros .conteneur::before{display:none;}
  .heros .conteneur{background:none;}
  .heros>img{display:none;}
  .heros .conteneur{color:var(--encre);padding-block:0;}
  .heros h1,.heros .chapeau,.heros .sur{color:var(--encre);}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;}
}

/* 23. Mouvement reduit */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}