@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Asap+Sharp:wght@300;400;500;600;700&display=swap');

:root {
  --flf-bg:    #FDFAF7;
  --flf-text:  #393E41;
  --flf-green: #106552;
  --flf-btn:   #C6D5A8;
  --flf-gris:  #6E7476;
  --flf-borde: rgba(110,116,118,0.25);
}

body {
  font-family: 'Asap Sharp', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--flf-text);
  background-color: var(--flf-bg);
  margin: 0;
}

h1 {
  font-family: 'Asap Sharp', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -1px;
}
h2 {
  font-family: 'Asap Sharp', sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -1px;
  margin: 0 0 16px;
}
h3 {
  font-family: 'Asap Sharp', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0 0 8px;
}
a {
  color: var(--flf-text);
  font-family: 'Asap Sharp', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
a:hover { color: #106552; }

* { box-sizing: border-box; }

/* ── Version ordinateur ────────────────────────────────────────────────────
   Le site est dessiné pour une colonne de téléphone. Sur un grand écran cette
   colonne s'élargit aux deux tiers de l'écran et se centre, sans filet ni
   ombre : le texte et les photos se posent à même le fond, d'un bord à
   l'autre. Rien ne change en dessous de 900px — le rendu mobile est intact.

   --flf-columna est la largeur de la colonne. nav.js s'en sert pour caler le
   tiroir de menu et le bouton WhatsApp : la redéfinir ici suffit à les
   déplacer avec elle. Le `html:root` passe devant le `:root` que chaque page
   pose dans son propre style, quel que soit l'ordre de chargement.

   --flf-gouttiere est ce qui reste de part et d'autre d'une colonne de
   lecture de 640px : au-delà, une ligne de texte devient trop longue pour
   l'œil. Elle vaut zéro tant que la feuille est plus étroite que 640px.

   Le margin du body est en !important parce que la page peut redéfinir `body`
   dans son propre <style>, et que cette feuille est parfois servie avant lui. */
@media (min-width: 900px) {
  html:root {
    --flf-columna:   max(430px, 66.67vw);
    --flf-lectura:   640px;
    --flf-gouttiere: max(0px, calc((var(--flf-columna) - var(--flf-lectura)) / 2));
  }

  html {
    background: var(--flf-fondo-pagina, #FDFAF7);
    min-height: 100%;
  }

  body {
    max-width: var(--flf-columna) !important;
    margin-inline: auto !important;
    min-height: 100vh;
    background: var(--flf-bg);
  }

  /* La colonne de lecture, pour les pages du moteur de réservation. Les pages
     de contenu portent .contenido ou .flf-wrap et règlent leurs enfants
     elles-mêmes dans contenido.css : on les laisse tranquilles.

     La gouttière remplace la marge que la page posait sur son body. Celle qui
     en avait une la déclare en --flf-marge-interne pour la retrouver ici : ses
     blocs restent alors calés comme sur téléphone, y compris ceux qui en
     ressortent par une marge négative. */
  body:not(:has(> .contenido)):not(:has(> .flf-wrap)) {
    padding-left:  calc(var(--flf-gouttiere) + var(--flf-marge-interne, 0px));
    padding-right: calc(var(--flf-gouttiere) + var(--flf-marge-interne, 0px));
  }

  /* Ce qui prend toute la feuille et non la seule colonne de lecture :
     la barre d'en-tête et les diaporamas, qui ressortent des gouttières. */
  body:not(:has(> .contenido)):not(:has(> .flf-wrap))
    > :is(#flf-nav, .lodge-carrusel, .hero-carrusel, .lodge-dots, .hero-dots) {
    margin-left:  calc(-1 * (var(--flf-gouttiere) + var(--flf-marge-interne, 0px)));
    margin-right: calc(-1 * (var(--flf-gouttiere) + var(--flf-marge-interne, 0px)));
  }
}