/* L'Arche de Gabriel — reprise fidèle du site Wix Studio, sans Wix.
   Ordinateur (≥ 1100 px) : mêmes proportions que l'original, mesurées à 1440 px de large ;
   --u vaut 1 px à 1440 px et suit la largeur de la fenêtre comme Wix Studio.
   Tablette et mobile : mise en page empilée dessinée pour ces écrans. */

/* Polices auto-hébergées (licence SIL OFL), sans appel à Google Fonts.
   Wix affiche Cormorant Garamond en demi-gras partout : la graisse 400 utilise donc le fichier 600. */
@font-face { font-family: 'Cormorant Garamond'; font-weight: 400 600; font-display: swap; src: url(fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 700; font-display: swap; src: url(fonts/cormorant-garamond-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond Medium'; font-weight: 500; font-display: swap; src: url(fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url(fonts/dm-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/dm-sans-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-display: swap; src: url(fonts/dm-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Caveat'; font-weight: 400; font-display: swap; src: url(fonts/caveat-latin-400-normal.woff2) format('woff2'); }

:root {
  --vert: #4f5b3a;
  --encre: #4b4741;
  --or: #d4b94f;
  --jaune: #e8d78a;
  --creme: #fff9ed;
  --sable: #f5f0e6;
  --lin: #fbf5e9;
  --paille: #e6d6ab;
  --u: calc(min(100vw, 1920px) / 1440);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --main: 'Caveat', cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--sable) url(img/grain.png) repeat;
  color: var(--encre);
  font: 400 16px/1.3 var(--sans);
  letter-spacing: -.006em;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }
.manuscrit { font-family: var(--main); }
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 8px 12px; }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: calc(41 * var(--u)); padding: 0 calc(16 * var(--u)); min-width: calc(199 * var(--u));
  border: 1px solid transparent; border-radius: calc(4.85 * var(--u));
  font: 400 calc(16.48 * var(--u))/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.bouton-large { height: calc(42 * var(--u)); border-radius: calc(5 * var(--u)); font-size: calc(16 * var(--u)); }
.bouton-vert { background: var(--vert); color: var(--creme); }
.bouton-vert:hover { background: #3d4730; }
.bouton-jaune { background: var(--jaune); border-color: var(--jaune); color: var(--encre); }
.bouton-jaune:hover { background: #dcc873; }
.bouton-contour { border-color: var(--vert); color: var(--vert); }
.bouton-contour:hover, .bouton-contour-fonce:hover { background: rgba(79, 91, 58, .08); }
.bouton-contour-fonce { border-color: var(--encre); color: var(--encre); }

/* En-tête */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 20; height: calc(107 * var(--u));
  display: flex; align-items: center; padding-top: calc(25 * var(--u)); background: rgba(75, 71, 65, .8);
}
.entete-logo { position: absolute; left: calc(83 * var(--u)); top: 0; width: calc(175 * var(--u)); }
.entete-logo img { width: 100%; height: auto; border-radius: 50%; }
.menu { display: flex; gap: calc(28 * var(--u)); margin-left: calc(328 * var(--u)); }
.menu a {
  color: var(--sable); text-decoration: none; font-size: calc(14.55 * var(--u));
  line-height: calc(39 * var(--u)); transition: color .2s;
}
.menu a:hover, .menu a[aria-current] { color: var(--or); }
.panier { position: absolute; right: calc(25 * var(--u)); top: calc(47 * var(--u)); width: calc(22 * var(--u)); }
.panier svg { width: 100%; fill: var(--or); }
.menu-bouton { display: none; }

/* Bandeau photo */
.hero { position: relative; height: calc(900 * var(--u)); min-height: 520px; overflow: hidden; background: var(--encre); }
.hero-diapos img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease;
}
.hero-diapos img.actif { opacity: 1; }
.hero-texte {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  padding-top: calc(306 * var(--u)); text-align: center; text-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.hero-nom { font: 700 calc(145.45 * var(--u))/calc(160 * var(--u)) var(--serif); color: var(--jaune); }
.hero h1 {
  width: calc(803 * var(--u)); margin-top: calc(6 * var(--u));
  font: 700 calc(40.73 * var(--u))/calc(44.8 * var(--u)) var(--serif); color: var(--creme);
}
.hero-boutons { display: flex; gap: calc(23 * var(--u)); margin-top: calc(17 * var(--u)); text-shadow: none; }
.hero-boutons .bouton-vert { color: #fff; }
.hero-fleche {
  position: absolute; top: calc(434 * var(--u)); z-index: 2; width: calc(32 * var(--u)); height: calc(32 * var(--u));
  min-width: 28px; min-height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
}
.hero-fleche svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.6; filter: drop-shadow(0 1.5px 3px rgba(0, 0, 0, .4)); }
.hero-prec { left: calc(43 * var(--u)); }
.hero-suiv { right: calc(43 * var(--u)); }

/* Accueil */
.accueil { position: relative; min-height: calc(608 * var(--u)); padding: calc(39 * var(--u)) 0 calc(39 * var(--u)) calc(509 * var(--u)); }
.accueil-fenouil { position: absolute; left: calc(180 * var(--u)); top: calc(135 * var(--u)); width: calc(264 * var(--u)); height: auto; opacity: .5; }
.accueil-texte { width: calc(629 * var(--u)); }
.titre-l { font: 700 calc(49.45 * var(--u))/calc(64.29 * var(--u)) var(--serif); color: var(--vert); }
.titre-m { font: 400 calc(36.85 * var(--u))/calc(47.9 * var(--u)) var(--serif); color: var(--vert); }
.titre-s { font: 400 calc(28 * var(--u))/calc(36.4 * var(--u)) var(--serif); color: var(--vert); }
.accueil .titre-l { width: calc(467 * var(--u)); }
.filet { display: block; width: calc(65 * var(--u)); height: 1px; margin: calc(20 * var(--u)) 0 calc(19 * var(--u)); background: var(--jaune); }
.accueil p { font-size: calc(16.48 * var(--u)); line-height: calc(21 * var(--u)); }
.accueil p + p { margin-top: calc(21 * var(--u)); }
.accueil strong { font-weight: 700; }
.accueil em { font-style: normal; font-weight: 700; color: var(--or); }
.pictos { display: grid; grid-template-columns: repeat(4, calc(141 * var(--u))); gap: calc(29 * var(--u)); margin-top: calc(28 * var(--u)); }
.pictos li { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 calc(10 * var(--u)); font: 700 calc(15.52 * var(--u))/1.15 var(--serif); color: var(--vert); }
.pictos img { width: calc(96 * var(--u)); height: auto; margin-bottom: calc(0 * var(--u)); }

/* Grilles de cartes et photos */
.grille { display: grid; gap: calc(24.5 * var(--u)); padding: calc(25 * var(--u)) calc(11 * var(--u)) 0; }
.grille-1 { grid-template-columns: 465fr 405fr 499fr; padding-top: calc(29 * var(--u)); }
.grille-1 > * { height: calc(378 * var(--u)); }
.grille-2 { grid-template-columns: 637fr 756fr; }
.grille-2 > * { height: calc(355 * var(--u)); }
.grille-3 { grid-template-columns: 475fr 434fr 460fr; padding-bottom: calc(30 * var(--u)); }
.grille-3 > * { height: calc(482 * var(--u)); }
.photo { width: 100%; object-fit: cover; border-radius: calc(5.7 * var(--u)); }
.carte { position: relative; isolation: isolate; overflow: hidden; border-radius: calc(5.7 * var(--u)); }
.carte::before { content: ''; position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; }
.carte-verte { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 calc(60 * var(--u)); background: var(--vert); color: var(--creme); }
.carte-verte::before { background-image: url(img/papier-vert.webp); opacity: .5; }
.carte-verte .titre-m { color: var(--creme); }
.carte-verte p { width: calc(348 * var(--u)); margin: calc(28 * var(--u)) 0 calc(22 * var(--u)); font-size: calc(16.48 * var(--u)); line-height: calc(21 * var(--u)); }
.carte-verte .bouton { min-width: calc(280 * var(--u)); color: var(--vert); }
.carte-beige::before { background-image: url(img/papier-beige.webp); }
.carte-repas { padding: calc(44 * var(--u)) 0 0 calc(52 * var(--u)); }
.carte-repas > p:not(.manuscrit) { width: calc(451 * var(--u)); margin: calc(16 * var(--u)) 0 calc(34 * var(--u)); font-size: calc(16.48 * var(--u)); line-height: calc(21 * var(--u)); }
.carte-repas .bouton { min-width: calc(253 * var(--u)); }
.carte-repas-mot {
  position: absolute; left: calc(475 * var(--u)); top: calc(221 * var(--u)); width: calc(230 * var(--u));
  font-size: calc(27.15 * var(--u)); line-height: 1.15; text-align: center; color: var(--vert); transform: rotate(-7deg);
}
.carte-repas-coeur { position: absolute; left: calc(679 * var(--u)); top: calc(291 * var(--u)); width: calc(51 * var(--u)); height: auto; }
.carte-metier { padding: calc(30 * var(--u)) calc(49 * var(--u)) 0; }
.carte-metier .titre-m { width: calc(377 * var(--u)); }
.carte-metier p { width: calc(334 * var(--u)); margin: calc(20 * var(--u)) 0 calc(22 * var(--u)); font-size: calc(16.48 * var(--u)); line-height: calc(21 * var(--u)); }
.carte-metier .bouton { min-width: calc(262 * var(--u)); }

/* Histoire */
.histoire {
  position: relative; display: grid; grid-template-columns: calc(698 * var(--u)) 1fr; min-height: calc(845 * var(--u));
  padding: calc(72 * var(--u)) 0 calc(29 * var(--u)); isolation: isolate;
}
.histoire::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(img/fond-histoire.webp) center / cover no-repeat; opacity: .6; }
.histoire-photo {
  width: calc(597 * var(--u)); height: auto; margin: calc(13 * var(--u)) 0 0 calc(53 * var(--u)); align-self: start;
  transform: rotate(-.6deg);
}
.histoire-plante { position: absolute; left: calc(1188 * var(--u)); top: calc(52 * var(--u)); width: calc(208 * var(--u)); height: auto; opacity: .45; }
.histoire-texte { width: calc(455 * var(--u)); }
.histoire-sur { font-size: calc(27.15 * var(--u)); line-height: calc(35.3 * var(--u)); letter-spacing: calc(1.36 * var(--u)); color: var(--vert); }
.histoire .titre-l { width: calc(402 * var(--u)); margin-top: calc(7 * var(--u)); }
.histoire-texte > p:not(.manuscrit) { font-size: calc(17.45 * var(--u)); line-height: calc(27.93 * var(--u)); }
.papier { position: relative; isolation: isolate; background: #fff; border-radius: calc(5 * var(--u)); }
.papier::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url(img/papier-beige.webp) center / cover; opacity: .74; }
.citation { display: flex; width: calc(316 * var(--u)); min-height: calc(113 * var(--u)); margin: calc(38 * var(--u)) 0 calc(39 * var(--u)); padding: calc(11 * var(--u)) calc(30 * var(--u)) calc(11 * var(--u)) calc(39 * var(--u)); }
.citation img { width: calc(19 * var(--u)); height: auto; align-self: flex-start; }
.citation p { margin: calc(10 * var(--u)) 0 0 calc(6 * var(--u)); font-size: calc(27.15 * var(--u)); line-height: calc(34 * var(--u)); }
.bouton-histoire { min-width: calc(227 * var(--u)); font-size: calc(13.58 * var(--u)); }

/* Avis */
.avis { display: flex; flex-direction: column; align-items: center; padding: calc(26 * var(--u)) 0 calc(27 * var(--u)); }
.avis-badge img { width: calc(170 * var(--u)); height: calc(85 * var(--u)); object-fit: cover; }
.avis .titre-l { margin-top: calc(10 * var(--u)); }
.avis-liste { display: grid; grid-template-columns: repeat(3, calc(256 * var(--u))); gap: calc(77 * var(--u)); margin: calc(17 * var(--u)) 0 0 calc(18 * var(--u)); }
.avis figure { position: relative; display: flex; flex-direction: column; justify-content: center; font-size: calc(16.48 * var(--u)); line-height: calc(21 * var(--u)); }
.avis figure > img { position: absolute; left: calc(-18 * var(--u)); top: calc(-25 * var(--u)); width: calc(19 * var(--u)); height: auto; }
.avis figcaption { margin-top: calc(21 * var(--u)); }
.avis-lien { font-style: italic; }
.avis-couronne { width: calc(125 * var(--u)); height: auto; margin-top: calc(19 * var(--u)); }

/* Questions fréquentes */
.faq-bloc { padding: 0 calc(10 * var(--u)); }
.faq { display: grid; grid-template-columns: calc(439 * var(--u)) calc(495 * var(--u)) 1fr; min-height: calc(456 * var(--u)); padding: calc(19 * var(--u)) 0 calc(20 * var(--u)); border-radius: calc(4.85 * var(--u)); }
.papier-fond { position: relative; isolation: isolate; }
.papier-fond::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url(img/papier-beige.webp) center / cover; }
.faq-titre { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(25 * var(--u)) 0 0 calc(54 * var(--u)); align-self: start; }
.faq-titre img { width: calc(64 * var(--u)); height: auto; }
.faq details { border-bottom: 1px solid rgba(75, 71, 65, .7); padding-bottom: calc(15 * var(--u)); }
.faq details + details { margin-top: calc(14 * var(--u)); }
.faq summary { list-style: none; cursor: pointer; font: 400 calc(17.45 * var(--u))/calc(22.7 * var(--u)) var(--serif); color: var(--encre); }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin-top: calc(6 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); }
.question {
  position: relative; display: block; align-self: start; width: calc(325 * var(--u)); height: calc(206 * var(--u));
  margin: calc(38 * var(--u)) 0 0 calc(100 * var(--u)); text-decoration: none; color: var(--encre);
  box-shadow: 0 1.16px 4.64px rgba(0, 0, 0, .6);
}
.question span { position: absolute; left: calc(46 * var(--u)); top: calc(30 * var(--u)); width: calc(215 * var(--u)); font-size: calc(28 * var(--u)); line-height: calc(34 * var(--u)); text-align: center; transform: rotate(-5deg); }
.question img { position: absolute; left: calc(237 * var(--u)); top: calc(123 * var(--u)); width: calc(64 * var(--u)); height: auto; }

/* Texte de référencement */
.seo { padding: calc(29 * var(--u)) calc(64 * var(--u)) calc(29 * var(--u)); background: var(--lin); }
.titre-seo { font: 400 calc(30.72 * var(--u))/calc(39.94 * var(--u)) var(--serif); color: var(--vert); text-align: center; }
.seo-feuille { width: calc(65 * var(--u)); height: auto; margin: calc(-6 * var(--u)) auto calc(-6 * var(--u)); transform: rotate(-90deg) scale(.82); }
.seo p { font-size: calc(15.52 * var(--u)); line-height: calc(24.82 * var(--u)); }
/* Textes en Madefor (police propre à Wix) chez l'original : DM Sans resserrée pour garder les mêmes retours à la ligne */
.seo p, .histoire-texte > p:not(.manuscrit), .carte-repas > p:not(.manuscrit), .carte-metier p { letter-spacing: -.02em; }

/* Contact */
.contact { display: grid; grid-template-columns: 468fr 482fr 468fr; padding: 0 calc(11 * var(--u)); min-height: calc(413 * var(--u)); }
.contact-infos { position: relative; isolation: isolate; padding: calc(37 * var(--u)) calc(72 * var(--u)) calc(30 * var(--u)); background: var(--vert); color: var(--creme); border-radius: calc(2 * var(--u)); }
.contact-infos::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(img/papier-vert-2.webp) center / cover; opacity: .48; }
.contact-infos .titre-s { color: var(--creme); }
.contact-infos p { width: calc(311 * var(--u)); margin-top: calc(22 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); }
.contact-infos .titre-s + p { margin-top: calc(22 * var(--u)); }
.contact-tel { line-height: calc(27 * var(--u)) !important; }
.contact-infos a { text-decoration: none; }
.contact-infos a:hover { text-decoration: underline; }
.reseaux { display: flex; gap: calc(18 * var(--u)); margin-left: calc(-6 * var(--u)); }
.reseaux img { width: calc(39 * var(--u)); height: auto; }
.formulaire {
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(26 * var(--u)) calc(24 * var(--u)); align-content: start;
  padding: calc(71 * var(--u)) calc(24 * var(--u)) calc(30 * var(--u)); background: var(--lin);
}
.formulaire label { display: flex; flex-direction: column; gap: calc(7 * var(--u)); font: 400 calc(14 * var(--u))/calc(19.6 * var(--u)) var(--sans); color: #000; }
.formulaire .large { grid-column: 1 / -1; }
.formulaire input, .formulaire textarea {
  width: 100%; height: calc(35 * var(--u)); padding: 0 calc(12 * var(--u));
  border: 1px solid #f5eedb; border-radius: calc(5 * var(--u)); background: #fffbf8;
  font: 400 calc(14 * var(--u)) var(--sans); color: var(--encre);
}
.formulaire textarea { height: calc(92 * var(--u)); padding-top: calc(9 * var(--u)); resize: vertical; }
.formulaire input:focus, .formulaire textarea:focus { outline: 2px solid var(--jaune); outline-offset: 0; }
.formulaire ::placeholder { color: #5e5a55; }
.formulaire .bouton { grid-column: 2; justify-self: end; min-width: calc(167 * var(--u)); border-radius: calc(3 * var(--u)); color: #fff; font-size: calc(16 * var(--u)); }
.formulaire-etat { grid-column: 1; align-self: center; font-size: calc(14 * var(--u)); }
.formulaire-etat:empty { display: none; }
.piege { position: absolute; left: -9999px; }
.contact-resa { position: relative; isolation: isolate; padding: calc(63 * var(--u)) calc(40 * var(--u)) calc(30 * var(--u)); background: var(--paille); border-radius: calc(2 * var(--u)); }
.contact-resa::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(img/papier-beige.webp) center / cover; opacity: .61; }
.contact-resa .titre-s { color: var(--encre); }
.contact-resa p { width: calc(354 * var(--u)); margin: calc(10 * var(--u)) 0 calc(11 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u)); }
.contact-resa .bouton { min-width: calc(234 * var(--u)); font-size: calc(15 * var(--u)); margin-bottom: calc(22 * var(--u)); }
.partenaires { display: flex; align-items: center; gap: calc(30 * var(--u)); }
.partenaires img { width: calc(83 * var(--u)); height: auto; }
.partenaires a:nth-child(2) img { border-radius: 50%; }
.partenaires a:last-child img { width: calc(150 * var(--u)); border-radius: calc(5 * var(--u)); }

/* Pied de page */
.pied { position: relative; display: flex; justify-content: center; align-items: center; min-height: calc(104 * var(--u)); padding: 0 calc(200 * var(--u)); }
.pied-legal { font-size: calc(14 * var(--u)); color: #000; }
.pied-mot { position: absolute; left: calc(1164 * var(--u)); top: calc(18 * var(--u)); width: calc(150 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.25; text-align: center; transform: rotate(-8deg); }
.pied-coeur { position: absolute; left: calc(1310 * var(--u)); top: calc(28 * var(--u)); width: calc(40 * var(--u)); height: auto; }

/* Fenêtre « Boutique éphémère » */
.popup {
  width: calc(912 * var(--u)); max-width: calc(100vw - 32px); height: calc(499 * var(--u)); padding: 0; border: 0;
  display: none; grid-template-columns: calc(416 * var(--u)) 1fr; overflow: hidden;
  background: url(img/popup-fond.webp) 0 calc(179 * var(--u)) / 100% auto no-repeat, url(img/papier-beige.webp) center / cover, #ebdac2;
  color: var(--vert);
}
.popup[open] { display: grid; }
.popup:focus { outline: none; }
.popup::backdrop { background: rgba(75, 71, 65, .55); }
.popup-texte { display: flex; flex-direction: column; align-items: center; padding-top: calc(45 * var(--u)); }
.popup-titre { width: calc(340 * var(--u)); font: 500 calc(68 * var(--u))/calc(80 * var(--u)) 'Cormorant Garamond Medium', var(--serif); letter-spacing: calc(3 * var(--u)); color: var(--vert); text-align: center; }
.popup-bouton { margin-top: calc(22 * var(--u)); min-width: calc(193 * var(--u)); border-color: #c9b25c; font-size: calc(14 * var(--u)); border-radius: 0; }
.popup-bouton svg { width: calc(20 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.6; }
.popup-photo { width: calc(444 * var(--u)); height: calc(445 * var(--u)); margin-top: calc(27 * var(--u)); object-fit: cover; border-radius: calc(20 * var(--u)); }
.popup-fermer { position: absolute; right: calc(28 * var(--u)); top: calc(22 * var(--u)); width: calc(26 * var(--u)); height: calc(26 * var(--u)); min-width: 24px; min-height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.popup-fermer svg { width: 100%; height: 100%; stroke: var(--encre); stroke-width: 1.4; }

/* Apparition au défilement, comme l'original */
.js .apparait { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.js .apparait.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .apparait { opacity: 1; transform: none; transition: none; }
  .hero-diapos img { transition: none; }
}

/* Tablette et mobile */
@media (max-width: 1099px) {
  :root { --u: 1px; }
  .entete { height: 72px; }
  .entete-logo { left: 16px; width: 104px; }
  .menu-bouton {
    display: flex; flex-direction: column; justify-content: center; gap: 6px; margin-left: auto; margin-right: 16px;
    width: 44px; height: 44px; padding: 8px; border: 0; background: none; cursor: pointer;
  }
  .menu-bouton span { display: block; height: 2px; background: var(--or); transition: transform .25s, opacity .25s; }
  .menu-bouton[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-bouton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-bouton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .menu {
    position: fixed; inset: 72px 0 auto; flex-direction: column; gap: 0; margin: 0; padding: 12px 0 20px;
    background: rgba(75, 71, 65, .97); transform: translateY(-120%); visibility: hidden; transition: transform .3s, visibility .3s;
  }
  .menu.ouvert { transform: none; visibility: visible; }
  .menu a { padding: 0 24px 0 136px; font-size: 18px; line-height: 48px; }
  .panier { right: 76px; top: 22px; width: 22px; }

  .hero { height: 600px; min-height: 0; }
  .hero-texte { justify-content: center; padding: 72px 20px 0; }
  .hero-nom { font-size: clamp(48px, 13vw, 104px); line-height: 1.05; }
  .hero h1 { width: auto; max-width: 600px; margin-top: 14px; font-size: clamp(24px, 6.4vw, 32px); line-height: 1.1; }
  .hero-boutons { flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
  .bouton { height: 44px; min-width: 0; padding: 0 18px; border-radius: 5px; font-size: 15.6px; }
  .hero-fleche { top: auto; bottom: 20px; width: 32px; height: 32px; }
  .hero-prec { left: 16px; }
  .hero-suiv { right: 16px; }

  .accueil { padding: 32px 16px 28px; min-height: 0; }
  .accueil-fenouil { position: static; width: 120px; margin: 0 auto 24px; }
  .accueil-texte { width: auto; max-width: 640px; margin: 0 auto; }
  .titre-l { font-size: 32.24px; line-height: 1.3; }
  .titre-m { font-size: 27.04px; line-height: 1.3; }
  .titre-s { font-size: 27px; line-height: 1.3; }
  .accueil .titre-l { width: auto; }
  .filet { width: 65px; margin: 14px 0; }
  .accueil p, .carte p, .histoire-texte > p:not(.manuscrit), .avis figure, .seo p { font-size: 15.6px; line-height: 1.35; }
  .accueil p + p { margin-top: 20px; }
  .pictos { grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 28px; }
  .pictos li { padding: 0; font-size: 14.5px; }
  .pictos img { width: 56px; margin-bottom: 8px; }

  .grille { gap: 10px; padding: 10px 10px 0; }
  .grille > * { height: auto; }
  .grille-1 { grid-template-columns: 1fr 1fr; }
  .grille-1 .carte { grid-column: 1 / -1; }
  .grille-2, .grille-3 { grid-template-columns: 1fr; }
  .grille-3 { grid-template-columns: 1fr 1fr; padding-bottom: 10px; }
  .grille-3 .carte { grid-column: 1 / -1; }
  .photo { aspect-ratio: 4 / 3; height: auto; border-radius: 5px; }
  .grille-1 .photo, .grille-3 .photo { aspect-ratio: 3 / 4; }
  .carte { padding: 28px 24px !important; border-radius: 5px; }
  .carte-verte p, .carte-repas > p:not(.manuscrit), .carte-metier p, .carte-metier .titre-m { width: auto; margin: 14px 0 20px; }
  .carte-metier .titre-m { margin: 0; }
  .carte .bouton { min-width: 0; }
  .carte-repas { padding-bottom: 96px !important; }
  .carte-repas-mot { left: auto; right: 62px; top: auto; bottom: 16px; width: 220px; font-size: 21px; }
  .carte-repas-coeur { left: auto; right: 22px; top: auto; bottom: 22px; width: 36px; }

  .histoire { grid-template-columns: 1fr; padding: 36px 20px 40px; min-height: 0; background-position: 30% center; }
  .histoire-photo { width: min(100%, 460px); margin: 0 auto 32px; }
  .histoire-plante { display: none; }
  .histoire-texte { width: auto; max-width: 560px; margin: 0 auto; }
  .histoire-sur { font-size: 22px; line-height: 1.3; letter-spacing: 1px; }
  .histoire .titre-l { width: auto; }
  .citation { width: auto; max-width: 320px; min-height: 0; margin: 28px auto; padding: 12px 24px; }
  .citation img { width: 19px; }
  .citation p { margin: 8px 0 0 6px; font-size: 24px; line-height: 1.25; }
  .bouton-histoire { display: flex; width: 180px; margin: 0 auto; font-size: 15px; }

  .avis { padding: 32px 20px 28px; }
  .avis-badge img { width: 120px; height: 60px; }
  .avis .titre-l { text-align: center; }
  .avis-liste { grid-template-columns: 1fr; gap: 40px; margin: 32px 0 0; max-width: 360px; }
  .avis figure > img { left: -6px; top: -26px; width: 22px; }
  .avis figcaption { margin-top: 18px; }
  .avis-couronne { width: 96px; margin-top: 32px; }

  .faq-bloc { padding: 0 10px; }
  .faq { grid-template-columns: 1fr; padding: 28px 22px; min-height: 0; border-radius: 5px; }
  .faq-titre { flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 0 20px; }
  .faq-titre img { width: 48px; }
  .faq summary { font-size: 18px; line-height: 1.3; }
  .faq details p { margin-top: 6px; font-size: 14px; line-height: 1.35; }
  .faq details { padding-bottom: 14px; }
  .faq details + details { margin-top: 18px; }
  .question { width: 100%; max-width: 325px; height: 190px; margin: 32px auto 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
  .question span { left: 24px; top: 26px; width: 240px; font-size: 26px; line-height: 1.25; }
  .question img { left: auto; right: 22px; top: auto; bottom: 18px; width: 48px; }

  .seo { padding: 28px 16px; }
  .titre-seo { font-size: 24px; line-height: 1.3; }
  .seo-feuille { width: 44px; margin: -4px auto 2px; }

  .contact { grid-template-columns: 1fr; padding: 10px 0 0; min-height: 0; }
  .contact-infos { padding: 28px 22px; margin: 0 4px; }
  .contact-infos p { width: auto; margin-top: 16px; font-size: 15px; line-height: 1.35; }
  .contact-tel { line-height: 1.9 !important; }
  .reseaux { gap: 10px; margin-left: 0; }
  .reseaux img { width: 39px; }
  .formulaire { gap: 22px 20px; padding: 28px 28px 36px; }
  .formulaire label { gap: 6px; font-size: 14px; line-height: 1.4; }
  .formulaire input, .formulaire textarea { height: 40px; padding: 0 12px; border-radius: 5px; font-size: 16px; }
  .formulaire textarea { height: 100px; padding-top: 10px; }
  .formulaire .bouton { min-width: 124px; border-radius: 3px; font-size: 16px; }
  .formulaire-etat { font-size: 14px; }
  .contact-resa { padding: 28px 30px 30px; margin: 0 4px; }
  .contact-resa p { width: auto; margin: 12px 0 14px; font-size: 15px; line-height: 1.35; }
  .contact-resa .bouton { min-width: 220px; font-size: 15px; margin-bottom: 22px; }
  .partenaires { gap: 14px; }
  .partenaires img { width: 52px; }
  .partenaires a:nth-child(2) img { border-radius: 50%; }
.partenaires a:last-child img { width: 142px; border-radius: 5px; }

  .pied { flex-wrap: wrap; gap: 14px 10px; min-height: 0; padding: 22px 20px 28px; text-align: center; }
  .pied-legal { flex-basis: 100%; font-size: 14px; }
  .pied-mot { position: static; width: auto; font-size: 18px; }
  .pied-coeur { position: static; width: 34px; }

  .popup { width: 302px; height: fit-content; grid-template-columns: 1fr; padding-bottom: 118px; background-size: 118% auto, cover, auto; background-position: center calc(100% + 70px), center, 0 0; }
  .popup-texte { order: 2; padding-top: 14px; }
  .popup-titre { width: auto; font-size: 38px; line-height: 1; letter-spacing: 2px; }
  .popup-bouton { margin-top: 16px; min-width: 0; font-size: 14px; }
  .popup-bouton svg { width: 20px; }
  .popup-photo { order: 1; width: calc(100% - 24px); height: 255px; margin: 30px auto 0; border-radius: 12px; }
  .popup-fermer { right: 14px; top: 14px; width: 26px; height: 26px; }
}

@media (min-width: 700px) and (max-width: 1099px) {
  .entete-logo { width: 120px; }
  .grille-2 { grid-template-columns: 1fr 1fr; }
  .grille-2 .photo { aspect-ratio: auto; height: 100%; }
  .grille-1 .photo, .grille-3 .photo { aspect-ratio: 4 / 3; }
  .avis-liste { grid-template-columns: repeat(3, 1fr); max-width: 900px; gap: 32px; }
  .faq { grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .faq-titre { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .question { grid-column: 2; grid-row: 2; margin-top: 0; }
  .faq-liste { grid-row: 2; }
  .contact { grid-template-columns: 1fr 1fr; }
  .contact-infos { margin: 0 0 0 10px; }
  .formulaire { grid-row: 1; grid-column: 2; margin-right: 10px; }
  .contact-resa { grid-column: 1 / -1; margin: 0 10px; }
}

/* ——— Page « Le gîte » ——— */
.diapo { position: relative; overflow: hidden; border-radius: calc(4.85 * var(--u)); background: #eee; }
.diapo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.diapo img.actif { opacity: 1; }
.diapo-fleche {
  position: absolute; top: 50%; z-index: 2; width: calc(45 * var(--u)); height: calc(45 * var(--u)); min-width: 36px; min-height: 36px;
  padding: 0; border: 0; background: none; cursor: pointer; transform: translateY(-50%);
}
.diapo-fleche svg { width: 100%; height: 100%; fill: #000; }
.diapo-prec { left: 0; }
.diapo-suiv { right: 0; }

.bandeau { position: relative; height: calc(855 * var(--u)); min-height: 520px; overflow: hidden; background: var(--encre); }
.bandeau-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 33% 78%; }
.bandeau-texte { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: calc(212 * var(--u)); text-align: center; text-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.bandeau-nom { font: 400 calc(145.45 * var(--u))/calc(189 * var(--u)) var(--serif); color: var(--jaune); }
.bandeau-sous { margin-top: calc(8 * var(--u)); font: 400 calc(40.73 * var(--u))/calc(50 * var(--u)) var(--serif); color: var(--creme); }
.bandeau-sous strong { font-weight: 700; }
.bandeau .hero-boutons { margin-top: calc(20 * var(--u)); }
.bandeau .bouton { min-width: calc(252 * var(--u)); }
.bandeau-courbe { position: absolute; left: 0; bottom: -1px; width: 100%; height: calc(34 * var(--u)); fill: var(--lin); }
.intro { padding: calc(60 * var(--u)) 0 calc(60 * var(--u)); background: var(--creme); text-align: center; }
.intro .titre-l { width: calc(940 * var(--u)); margin: 0 auto; font-weight: 400; }
.intro-rameau { width: calc(77 * var(--u)); height: calc(77 * var(--u)); margin: calc(-17 * var(--u)) auto 0; transform: rotate(90deg); }
.intro p { width: calc(721 * var(--u)); margin: calc(7 * var(--u)) auto 0; font-size: calc(17.45 * var(--u)); line-height: calc(22 * var(--u)); letter-spacing: .012em; }
.intro p + p { margin-top: calc(26 * var(--u)); }
.intro strong { font-size: calc(17.28 * var(--u)); font-weight: 700; }
.chambres { padding-top: 0; }

/* Cartes des chambres : même taille, collantes sous l'en-tête, la suivante recouvre la précédente */
.chambres { --haut: calc(107 * var(--u) + 24 * var(--u)); display: flex; flex-direction: column; gap: calc(50 * var(--u)); padding: 0 calc(29 * var(--u)) calc(72 * var(--u)); background: var(--lin); }
.chambre {
  position: relative; isolation: isolate; display: grid; grid-template-columns: calc(679 * var(--u)) calc(465 * var(--u));
  column-gap: calc(30 * var(--u)); align-items: center; height: calc(505 * var(--u));
  padding: 0 calc(104 * var(--u)); border-radius: calc(4.85 * var(--u)); overflow: hidden;
}
.chambres.empile .chambre { position: sticky; top: var(--haut); box-shadow: 0 -6px 18px rgba(75, 71, 65, .12); }
.chambre::before { content: ''; position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; }
.chambre .diapo { height: calc(436 * var(--u)); }
.chambre-verte { background: var(--vert); color: var(--creme); }
.chambre-verte::before { background-image: url(img/papier-vert.webp); opacity: .2; }
.chambre-beige { background: var(--fond, var(--lin)); color: var(--encre); }
.chambre-beige::before { background-image: url(img/papier-beige.webp); }
.chambre-inverse { grid-template-columns: calc(465 * var(--u)) calc(679 * var(--u)); }
.chambre-inverse .chambre-texte { order: -1; }
.chambre-texte { display: flex; flex-direction: column; align-items: center; text-align: center; }
.chambre-nom { display: flex; align-items: center; gap: calc(7 * var(--u)); font: 400 calc(46.55 * var(--u))/calc(60.5 * var(--u)) var(--serif); color: #f4ebc3; }
.chambre-beige .chambre-nom, .chambre-beige .chambre-tarif { color: var(--vert); }
.chambre-nom .nom { min-width: calc(247 * var(--u)); padding: 0 calc(26 * var(--u)); white-space: nowrap; }
.personnes { display: inline-flex; align-items: flex-end; gap: calc(5 * var(--u)); }
.personnes svg { width: calc(34 * var(--u)); height: calc(30 * var(--u)); fill: currentColor; }
.personnes .enfant svg { width: calc(24 * var(--u)); height: calc(21 * var(--u)); display: block; }
.chambre-texte > p:not(.chambre-tarif) { margin-top: calc(33 * var(--u)); font-size: calc(18.42 * var(--u)); line-height: calc(24 * var(--u)); letter-spacing: 0; }
.chambre-texte strong { font-weight: 700; }
.chambre-tarif { margin-top: calc(32 * var(--u)); font: 400 calc(35.88 * var(--u))/calc(46.64 * var(--u)) var(--serif); color: #f4ebc3; }
.bouton-chambre {
  height: calc(37 * var(--u)); min-width: calc(257 * var(--u)); margin-top: calc(19 * var(--u));
  border-color: currentColor; font-size: calc(14.55 * var(--u));
}
.chambre-beige .bouton-chambre { border-color: var(--vert); color: var(--encre); }
.chambre-verte .bouton-chambre:hover { background: rgba(255, 249, 237, .1); }
.chambre-beige .bouton-chambre:hover { background: rgba(79, 91, 58, .08); }

.titre-carte { font: 400 calc(32.97 * var(--u))/calc(42.86 * var(--u)) var(--serif); color: var(--vert); }
.titre-gite { font: 400 calc(49.45 * var(--u))/calc(64.29 * var(--u)) var(--serif); color: var(--vert); text-align: center; }

.partagees, .bivouac, .services, .facons { position: relative; background: var(--lin); }
.partagees { height: calc(734 * var(--u)); }
.partagees > .diapo { position: absolute; left: calc(651 * var(--u)); top: calc(85 * var(--u)); width: calc(595 * var(--u)); height: calc(282 * var(--u)); }
.partagees-carte { position: absolute; left: calc(195 * var(--u)); top: calc(147 * var(--u)); z-index: 3; width: calc(489 * var(--u)); height: calc(243 * var(--u)); padding: calc(60 * var(--u)) 0 0 calc(81 * var(--u)); }
.partagees-carte p { margin-top: calc(8 * var(--u)); font-size: calc(18.42 * var(--u)); line-height: calc(24 * var(--u)); letter-spacing: -.02em; color: #000; }
.supplements {
  position: absolute; left: calc(458 * var(--u)); top: calc(426 * var(--u)); width: calc(525 * var(--u)); height: calc(259 * var(--u));
  padding: calc(39 * var(--u)) calc(46 * var(--u)) 0; isolation: isolate; overflow: hidden; border-radius: calc(4.85 * var(--u));
  background: var(--vert); color: var(--creme);
}
.supplements::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(img/papier-vert-2.webp) center / cover; opacity: .5; }
.supplements .titre-carte { color: var(--creme); }
.supplements-note { width: calc(390 * var(--u)); margin-top: calc(3 * var(--u)); font-size: calc(17.45 * var(--u)); line-height: calc(22 * var(--u)); font-style: italic; }
.supplements p + p { margin-top: calc(20 * var(--u)); font-size: calc(18.42 * var(--u)); line-height: calc(24 * var(--u)); letter-spacing: -.02em; }
.partagees-fenouil { position: absolute; left: calc(1098 * var(--u)); top: calc(379 * var(--u)); width: calc(199 * var(--u)); height: auto; opacity: .5; }

.bivouac { height: calc(401 * var(--u)); }
.bivouac > .diapo { position: absolute; left: calc(227 * var(--u)); top: calc(11 * var(--u)); width: calc(679 * var(--u)); height: calc(315 * var(--u)); }
.bivouac > .diapo img { object-position: 50% 63%; }
.bivouac-carte { position: absolute; left: calc(868 * var(--u)); top: calc(110 * var(--u)); z-index: 3; width: calc(525 * var(--u)); height: calc(243 * var(--u)); padding: calc(15 * var(--u)) calc(42 * var(--u)) 0 calc(50 * var(--u)); }
.bivouac-prix { margin-top: calc(11 * var(--u)); font: 400 calc(23.27 * var(--u))/calc(29 * var(--u)) var(--serif); }
.bivouac-carte p:last-child { margin-top: calc(11 * var(--u)); font-size: calc(18.42 * var(--u)); line-height: calc(24 * var(--u)); }

.services { padding: calc(37 * var(--u)) 0 calc(20 * var(--u)); }
.services > .titre-gite { margin-left: calc(26 * var(--u)); }
.services > .seo-feuille, .facons-feuille { display: block; height: calc(65 * var(--u)); margin: calc(-26 * var(--u)) 0 0 calc(700 * var(--u)); transform: rotate(-90deg) scale(.82); }
.services-grille { display: grid; grid-template-columns: calc(499 * var(--u)) 1fr; column-gap: calc(85 * var(--u)); margin: calc(17 * var(--u)) 0 0 calc(172 * var(--u)); }
.services-grille .diapo { height: calc(341 * var(--u)); }
.services-liste { display: flex; flex-direction: column; gap: calc(20 * var(--u)); padding-top: calc(30 * var(--u)); width: calc(546 * var(--u)); }
.services-liste li { display: flex; align-items: center; gap: calc(14 * var(--u)); font-size: calc(17.45 * var(--u)); line-height: calc(22 * var(--u)); }
.services-liste li::before { content: ''; flex: none; width: calc(19 * var(--u)); height: calc(19 * var(--u)); background: url(img/puce.png) center / contain no-repeat; }
.repas { position: relative; height: calc(301 * var(--u)); margin: calc(57 * var(--u)) calc(60 * var(--u)) 0; }
.repas-texte { position: absolute; left: calc(23 * var(--u)); top: calc(21 * var(--u)); width: calc(420 * var(--u)); }
.repas-feuille { width: calc(65 * var(--u)); height: calc(65 * var(--u)); margin: calc(-8 * var(--u)) 0 0 calc(3 * var(--u)); transform: rotate(-90deg) scale(.82); }
.repas-texte > p:not(.manuscrit) { width: calc(404 * var(--u)); margin-top: calc(0 * var(--u)); font-size: calc(17.45 * var(--u)); line-height: calc(22 * var(--u)); }
.repas-resa { margin-top: calc(8 * var(--u)); font-size: calc(30 * var(--u)); line-height: calc(38 * var(--u)); color: var(--vert); }
.repas > .diapo { position: absolute; left: calc(466 * var(--u)); top: calc(14 * var(--u)); width: calc(388 * var(--u)); height: calc(272 * var(--u)); }
.repas-prix { position: absolute; left: calc(878 * var(--u)); top: calc(77 * var(--u)); display: flex; flex-direction: column; gap: calc(19 * var(--u)); font-size: calc(17.45 * var(--u)); line-height: calc(22 * var(--u)); }
.repas-prix li:nth-child(2) { margin-left: calc(2 * var(--u)); }
.repas-fenouil { position: absolute; left: calc(1166 * var(--u)); top: calc(19 * var(--u)); width: calc(141 * var(--u)); height: auto; opacity: .5; }

.facons { height: calc(750 * var(--u)); padding-top: calc(47 * var(--u)); overflow: hidden; }
.facons > .titre-gite { width: calc(786 * var(--u)); margin-left: calc(303 * var(--u)); }
.facons-feuille { margin: calc(-18 * var(--u)) 0 0 calc(681 * var(--u)); opacity: .5; }
.facons-intro { width: calc(738 * var(--u)); margin: calc(0 * var(--u)) 0 0 calc(345 * var(--u)); text-align: center; font-size: calc(17.45 * var(--u)); line-height: calc(22 * var(--u)); letter-spacing: -.02em; }
.facons-cartes { display: flex; gap: calc(66 * var(--u)); margin: calc(30 * var(--u)) 0 0 calc(343 * var(--u)); align-items: flex-start; }
.facon { display: flex; flex-direction: column; align-items: center; width: calc(343 * var(--u)); min-height: calc(455 * var(--u)); padding-top: calc(14 * var(--u)); border-radius: calc(5 * var(--u)); background: #f1ecdf; text-align: center; }
.facon + .facon { min-height: calc(449 * var(--u)); }
.facon h3 { font: 400 calc(25.21 * var(--u))/calc(32.78 * var(--u)) var(--serif); color: var(--vert); }
.facon img { width: calc(280 * var(--u)); height: calc(193 * var(--u)); margin-top: calc(18 * var(--u)); object-fit: cover; }
.facon p { width: calc(285 * var(--u)); margin-top: calc(16 * var(--u)); font-size: calc(17.45 * var(--u)); line-height: calc(26.18 * var(--u)); }
.facon .bouton { height: calc(38 * var(--u)); min-width: calc(195 * var(--u)); margin-top: calc(17 * var(--u)); border-radius: calc(5 * var(--u)); font-size: calc(15 * var(--u)); }
.facons-plante { position: absolute; height: auto; }
.facons-plante-g { left: calc(-4 * var(--u)); top: calc(307 * var(--u)); width: calc(123 * var(--u)); opacity: .49; }
.facons-plante-d { left: calc(1305 * var(--u)); top: calc(324 * var(--u)); width: calc(160 * var(--u)); opacity: .26; }

.faq-gite { min-height: calc(551 * var(--u)); }
.faq-gite .faq-titre { padding-top: calc(25 * var(--u)); }

@media (max-width: 1099px) {
  .diapo { border-radius: 5px; }
  .diapo-fleche { width: 40px; height: 40px; }

  .bandeau { height: 529px; min-height: 0; }
  .bandeau-texte { padding: 156px 20px 0; }
  .bandeau-nom { font-size: 71.76px; line-height: 93px; }
  .bandeau-sous { max-width: 300px; margin-top: 8px; font-size: 17px; line-height: 1.07; }
  .bandeau .hero-boutons { flex-wrap: nowrap; gap: 7px; margin-top: 18px; }
  .bandeau .bouton { min-width: 0; width: 158px; height: 43px; padding: 0 10px; font-size: 14.5px; line-height: 1.25; text-align: center; white-space: normal; }
  .bandeau-courbe { height: 34px; }

  .intro { padding: 44px 8px 40px; }
  .intro .titre-l { width: auto; font-size: 32px; line-height: 41.6px; }
  .intro-rameau { width: 56px; height: 56px; margin: -6px auto 0; }
  .intro p, .intro strong { width: auto; margin-top: 6px; font-size: 15px; line-height: 20px; letter-spacing: -.01em; }
  .intro p + p { margin-top: 6px; }

  .chambres { --haut: 84px; gap: 32px; padding: 0 8px 50px; }
  .chambre, .chambre-inverse { grid-template-columns: 1fr; align-items: start; align-content: start; height: auto; min-height: var(--hc, 0); padding: 16px 17px 22px; }
  .chambre-inverse .chambre-texte { order: 0; }
  .chambre .diapo { width: 100%; height: auto; aspect-ratio: 338 / 224; }
  .chambre-texte { padding-top: 16px; }
  .chambre-nom { justify-content: center; gap: 16px; font-size: 42px; line-height: 54.6px; }
  .chambre-nom .nom { min-width: 0; padding: 0; }
  .chambre-nom .nom { white-space: normal; }
  .chambre-long .chambre-nom { font-size: 33.28px; line-height: 43.3px; }
  .personnes { gap: 3px; }
  .personnes svg { width: 22px; height: 20px; }
  .personnes .enfant svg { width: 16px; height: 14px; }
  .chambre-texte > p:not(.chambre-tarif) { margin-top: 16px; font-size: 16px; line-height: 20px; }
  .chambre-tarif { margin-top: 22px; font-size: 28px; line-height: 36.4px; }
  .bouton-chambre { height: 41px; min-width: 226px; margin-top: 16px; font-size: 14.5px; }

  .titre-carte { font-size: 31px; line-height: 40.3px; }
  .titre-gite { font-size: 32.24px; line-height: 41.9px; }
  .partagees, .bivouac { height: auto; display: flex; flex-direction: column; padding: 0 11px 0 11px; }
  .partagees > .diapo, .bivouac > .diapo { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 364 / 208; }
  .partagees-carte, .bivouac-carte { position: relative; left: auto; top: auto; width: auto; height: auto; margin: 0 2px; padding: 53px 30px 50px; }
  .partagees-carte p { font-size: 16px; line-height: 20px; }
  .supplements { position: relative; left: auto; top: auto; width: auto; height: auto; margin: 38px -2px 33px; padding: 50px 18px 52px; border-radius: 5px; }
  .supplements-note { width: auto; font-size: 16px; line-height: 20px; }
  .supplements p + p { margin-top: 6px; font-size: 16px; line-height: 20px; }
  .partagees-fenouil { display: none; }
  .bivouac { padding: 0 18px 38px; }
  .bivouac > .diapo { aspect-ratio: 353 / 224; }
  .bivouac-carte { margin: 0; padding: 50px 5px 80px; }
  .bivouac-prix { margin-top: 4px; font-size: 22px; line-height: 26px; }
  .bivouac-carte p:last-child { margin-top: 4px; font-size: 16px; line-height: 21px; }

  .services { padding: 0 19px 40px; }
  .services > .titre-gite { margin: 0 -18px; }
  .services > .seo-feuille, .facons-feuille { width: 44px; height: 44px; margin: -8px auto 0; }
  .services-grille { grid-template-columns: 1fr; margin: 30px 0 0; }
  .services-grille .diapo { height: auto; aspect-ratio: 353 / 237; }
  .services-liste { width: auto; gap: 10px; padding: 22px 6px 0; }
  .services-liste li { gap: 3px; font-size: 16px; line-height: 21px; }
  .services-liste li::before { width: 16px; height: 16px; }
  .services-liste br { display: none; }
  .repas { height: auto; margin: 64px 0 0; padding: 15px 14px 40px; display: flex; flex-direction: column; }
  .repas-texte, .repas > .diapo, .repas-prix { position: relative; left: auto; top: auto; }
  .repas-texte { width: auto; }
  .repas-texte .titre-carte { font-size: 28px; line-height: 36.4px; }
  .repas-feuille { width: 64px; height: 44px; margin: 4px 0 0 16px; }
  .repas-texte > p:not(.manuscrit) { width: auto; margin-top: 4px; font-size: 16px; line-height: 21px; }
  .repas-resa { font-size: 28px; line-height: 35px; }
  .repas > .diapo { width: auto; height: auto; aspect-ratio: 311 / 224; margin: 38px 5px 0; }
  .repas-prix { gap: 5px; margin-top: 37px; padding-left: 4px; font-size: 16px; line-height: 21px; }
  .repas-fenouil { display: none; }

  .facons { height: auto; padding: 40px 24px 60px; }
  .facons > .titre-gite { width: auto; margin: 0 -15px; }
  .facons-intro { width: auto; margin: 4px 22px 0; font-size: 16.64px; line-height: 21px; }
  .facons-cartes { flex-direction: column; gap: 15px; margin: 15px 0 0; align-items: center; }
  .facon, .facon + .facon { width: 100%; max-width: 343px; min-height: 420px; padding: 15px 0 20px; }
  .facon h3 { font-size: 24.96px; line-height: 32.4px; }
  .facon img { width: 292px; height: 201px; margin-top: 16px; }
  .facon p { width: 300px; margin-top: 16px; font-size: 15.6px; line-height: 23.4px; }
  .facon .bouton { height: 38px; min-width: 195px; margin-top: 16px; font-size: 15px; }
  .facons-plante-g { left: -1px; top: 116px; width: 33px; }
  .facons-plante-d { left: auto; right: -6px; top: 121px; width: 43px; }
  .faq-gite { min-height: 0; }
}

@media (min-width: 700px) and (max-width: 1099px) {
  .chambres { padding: 0 24px 50px; }
  .chambre, .chambre-inverse { grid-template-columns: 1fr 1fr; column-gap: 28px; padding: 24px; align-items: center; }
  .chambres { --haut: 96px; }
  .chambre-inverse .chambre-texte { order: -1; }
  .chambre .diapo { aspect-ratio: 4 / 3; }
  .chambre-nom { font-size: 34px; line-height: 1.3; }
  .partagees, .bivouac { padding: 0 24px 40px; }
  .services-grille { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .repas { padding: 24px 28px 40px; }
  .facons-cartes { flex-direction: row; justify-content: center; }
  .intro { padding: 48px 80px 44px; }
}