/* Je suis Férale · feuille de style du site
   Palette : papier, vert forêt, mousse, ambre. Fraunces pour les titres, Jost
   pour le texte. Une seule feuille pour l'ossature, blocks.css pour les
   sections. Les variables de :root se règlent depuis l'admin (Couleurs). */

:root {
  --papier: #f3eee4;
  --papier-2: #e9e2d3;
  --papier-3: #d9cfbb;
  --foret: #1e2b22;
  --foret-2: #2a3d31;
  --nuit: #141d17;
  --mousse: #5f7a5a;
  --sauge: #a9b79b;
  --ambre: #c9892f;
  --ambre-clair: #e3b56a;
  --brique: #a5512f;
  --encre: #1e2b22;
  --encre-doux: #4a5a4d;
  --texte-note: #6b7a6d;
  --texte-clair: #d7dccf;
  --overline: var(--mousse);
  --trait: rgba(30, 43, 34, 0.14);
  --rayon: 18px;
  --rayon-petit: 10px;
  --police-titre: 'Fraunces', Georgia, 'Times New Roman', serif;
  --police-texte: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --nav-h: 76px;
  --espace-section: clamp(64px, 9vw, 128px);
  --ombre: 0 24px 60px rgba(30, 43, 34, 0.14);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--encre-doux);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--mousse); text-decoration: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--police-titre); font-weight: 500; color: var(--encre); line-height: 1.1; letter-spacing: -0.01em; font-variation-settings: 'opsz' 96, 'SOFT' 40; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; font-variation-settings: 'opsz' 96, 'SOFT' 100, 'WONK' 1; color: var(--mousse); }
strong, b { font-weight: 600; color: var(--encre); }
::selection { background: var(--ambre-clair); color: var(--foret); }
:focus-visible { outline: 2px solid var(--ambre); outline-offset: 3px; }

.conteneur { max-width: 1160px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 32px); }
.sr-lu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Typographie de section ---- */
.fe-overline {
  font-family: var(--police-texte);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--overline);
  margin: 0 0 1.1em;
}
.fe-titre-2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; margin-bottom: 0.45em; }
.fe-titre-2.titre-section::after { content: none; }
.fe-tete { max-width: 46em; margin-bottom: clamp(32px, 4vw, 52px); }
.fe-tete-centre { margin-left: auto; margin-right: auto; text-align: center; }
.fe-intro { font-size: 1.12rem; max-width: 40em; }
.fe-tete-centre .fe-intro { margin-left: auto; margin-right: auto; }
.pa-rich p { margin-bottom: 1em; }
.pa-rich p:last-child { margin-bottom: 0; }
.pa-rich a { border-bottom: 1px solid currentColor; }
.pa-rich ul, .pa-rich ol { padding-left: 1.2em; margin: 0.6em 0 1em; }
mark { background: none; color: var(--mousse); font-weight: 500; }
mark[data-c="ambre"] { color: var(--ambre); }
mark[data-c="brique"] { color: var(--brique); }
mark[data-c="mousse"] { color: var(--mousse); }

/* ---- Sections ---- */
.fe-b { padding: var(--espace-section) 0; position: relative; }
.fe-b + .fe-b { padding-top: 0; }
.fe-b.fe-preuve, .fe-b.fe-tarifs, .fe-b.fe-appel, .fe-b[data-fond="foret"], .fe-b[data-fond="nuit"], .fe-b[data-fond="mousse"], .fe-b.pa-b-cta { padding-top: var(--espace-section); }
.fe-b + .fe-b.fe-sombre, .fe-b + .fe-b.fe-preuve, .fe-b + .fe-b.fe-tarifs, .fe-b + .fe-b.fe-appel, .fe-b + .fe-b.pa-b-cta { padding-top: var(--espace-section); }
.fe-sombre + .fe-b, .fe-preuve + .fe-b, .fe-tarifs + .fe-b, .fe-appel + .fe-b, .pa-b-cta + .fe-b, .fe-hero + .fe-b { padding-top: var(--espace-section); }

/* Sections sombres : le texte passe en clair, les titres en papier. */
.fe-sombre, .fe-preuve, .fe-tarifs, .fe-appel, .fe-pied,
[data-fond="foret"], [data-fond="nuit"], [data-fond="mousse"] {
  --encre: var(--papier);
  --encre-doux: var(--texte-clair);
  --texte-note: var(--sauge);
  --overline: var(--sauge);
  --trait: rgba(243, 238, 228, 0.16);
  background: var(--foret);
  color: var(--encre-doux);
}
.fe-sombre h1 em, .fe-preuve h2 em, .fe-tarifs h2 em, .fe-appel h2 em, [data-fond="foret"] h2 em, [data-fond="nuit"] h2 em, [data-fond="mousse"] h2 em { color: var(--ambre-clair); }
.fe-sombre a, .fe-preuve a, .fe-tarifs a, .fe-appel a, [data-fond="foret"] a, [data-fond="nuit"] a, [data-fond="mousse"] a { color: var(--ambre-clair); }
.fe-sombre strong, .fe-preuve strong, .fe-tarifs strong, .fe-appel strong { color: var(--papier); }

/* Ambiances choisies dans l'admin (une par section). */
[data-fond="papier"] { background: var(--papier); }
[data-fond="papier-2"] { background: var(--papier-2); }
[data-fond="sauge"] { background: linear-gradient(180deg, #e8ebdf 0%, var(--papier) 100%); }
[data-fond="sable"] { background: linear-gradient(180deg, #f1e6d2 0%, var(--papier) 100%); }
[data-fond="foret"] { background: var(--foret); }
[data-fond="nuit"] { background: var(--nuit); }
[data-fond="mousse"] { background: #4b6248; }

/* ---- Boutons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--police-texte);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 0.85em 1.7em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-plein { background: var(--foret); color: var(--papier); }
.btn-plein:hover { background: var(--foret-2); box-shadow: 0 12px 28px rgba(30, 43, 34, 0.22); }
.btn-ligne { background: transparent; color: var(--encre); border-color: currentColor; }
.btn-ligne:hover { background: var(--encre); color: var(--papier); }
.btn-ambre { background: var(--ambre); color: var(--foret); }
.btn-ambre:hover { background: var(--ambre-clair); box-shadow: 0 12px 28px rgba(201, 137, 47, 0.32); }
.btn-grand { font-size: 1.08rem; padding: 1em 2.1em; }
.fe-sombre .btn-ligne, .fe-preuve .btn-ligne, .fe-tarifs .btn-ligne, .fe-appel .btn-ligne { color: var(--papier); }
.fe-sombre .btn-ligne:hover, .fe-preuve .btn-ligne:hover, .fe-tarifs .btn-ligne:hover, .fe-appel .btn-ligne:hover { background: var(--papier); color: var(--foret); }
.fe-ctas { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; margin-top: 1.8em; }
.fe-ctas-centre { justify-content: center; }
.fe-ctas p { margin: 0; }

/* ---- En-tête ---- */
.fe-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--trait);
}
.fe-nav-in { display: flex; align-items: center; gap: 28px; min-height: var(--nav-h); }
.fe-nav-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.fe-nav-logo-img { width: auto; height: 34px; }
.fe-nav-liens { display: flex; gap: 26px; margin-left: auto; }
.fe-nav-liens a { color: var(--encre); font-weight: 500; font-size: 0.98rem; letter-spacing: 0.02em; position: relative; padding: 4px 0; }
.fe-nav-liens a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: var(--mousse); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.fe-nav-liens a:hover::after { transform: scaleX(1); }
.fe-nav-cta { padding: 0.7em 1.4em; font-size: 0.95rem; }
.fe-nav-minimal .fe-nav-cta { margin-left: auto; }
.fe-nav-burger { display: none; margin-left: auto; width: 44px; height: 44px; border: none; background: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.fe-nav-burger span { display: block; width: 24px; height: 2px; background: var(--encre); transition: transform 0.25s ease, opacity 0.25s ease; }
.fe-nav-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.fe-nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
@media (max-width: 760px) {
  :root { --nav-h: 64px; }
  .fe-nav-in { gap: 14px; }
  .fe-nav-logo-img { height: 26px; }
  .fe-nav-burger { display: flex; margin-left: 0; order: 3; }
  .fe-nav-cta { margin-left: auto; padding: 0.6em 1.05em; font-size: 0.86rem; }
  .fe-nav-liens {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--papier);
    border-bottom: 1px solid var(--trait);
    box-shadow: 0 20px 40px rgba(30, 43, 34, 0.12);
  }
  .fe-nav-liens a { padding: 16px clamp(20px, 3vw, 32px); border-top: 1px solid var(--trait); font-size: 1.05rem; }
  .fe-nav-liens a::after { content: none; }
  .fe-nav.est-ouvert .fe-nav-liens { display: flex; }
}

/* ---- Ouvertures ---- */
.fe-hero { position: relative; overflow: hidden; }
.fe-hero-titre { font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 1.02; margin-bottom: 0.5em; text-wrap: balance; }
.fe-hero-sub { font-size: clamp(1.1rem, 1.5vw, 1.28rem); max-width: 34em; color: var(--encre-doux); }

.fe-hero-accueil { padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 7vw, 96px); }
.fe-hero-accueil .fe-hero-in { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, 88px); align-items: center; position: relative; z-index: 1; }
.fe-hero-media { margin: 0; position: relative; }
.fe-hero-cadre { position: relative; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.fe-hero-cadre img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.fe-hero-media::before {
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--sauge);
  border-radius: var(--rayon);
  pointer-events: none;
}
.fe-hero-cap { margin-top: 14px; font-size: 0.9rem; color: var(--texte-note); font-style: italic; }
.fe-hero-sceau { position: absolute; width: clamp(260px, 30vw, 460px); left: -6%; bottom: -12%; opacity: 0.05; pointer-events: none; }
@media (max-width: 860px) {
  .fe-hero-sceau { display: none; }
  .fe-hero-accueil .fe-hero-in { grid-template-columns: 1fr; }
  .fe-hero-accueil .fe-hero-media { order: -1; max-width: 520px; }
  .fe-hero-cadre img { aspect-ratio: 4 / 4.4; }
}

.fe-hero-retraite { min-height: min(92svh, 900px); display: flex; align-items: flex-end; color: var(--papier); }
.fe-hero-fond { position: absolute; inset: 0; margin: 0; }
.fe-hero-fond img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.fe-hero-fond::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 29, 23, 0.78) 0%, rgba(20, 29, 23, 0.55) 45%, rgba(20, 29, 23, 0.12) 100%),
    linear-gradient(0deg, rgba(20, 29, 23, 0.85) 0%, rgba(20, 29, 23, 0.1) 55%);
}
.fe-hero-retraite .fe-hero-in { position: relative; z-index: 1; width: 100%; padding-top: clamp(80px, 12vw, 160px); padding-bottom: clamp(48px, 7vw, 88px); }
.fe-hero-retraite .fe-hero-texte { max-width: 680px; }
.fe-hero-retraite .fe-overline { color: var(--ambre-clair); }
.fe-hero-retraite .fe-hero-titre { color: var(--papier); }
.fe-hero-retraite .fe-hero-titre em { color: var(--ambre-clair); }
.fe-hero-retraite .fe-hero-sub { color: var(--texte-clair); }
.fe-hero-points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 2em; list-style: none; font-size: 0.95rem; color: var(--papier); }
.fe-hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.fe-hero-points li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ambre-clair); flex: 0 0 auto; }
@media (max-width: 760px) {
  .fe-hero-retraite { min-height: 0; display: block; background: var(--foret); }
  .fe-hero-fond { position: relative; height: 62vw; min-height: 300px; }
  .fe-hero-fond::after { background: linear-gradient(0deg, var(--foret) 0%, rgba(30, 43, 34, 0) 40%); }
  .fe-hero-retraite .fe-hero-in { padding-top: 8px; padding-bottom: 48px; }
  .fe-hero-retraite .fe-hero-titre { font-size: clamp(2.1rem, 8.4vw, 3rem); }
}

/* ---- Apparitions au défilement (classe posée par main.js) ---- */
.fe-anim { opacity: 0; transform: translateY(18px); transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fe-anim.est-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fe-anim { opacity: 1; transform: none; transition: none; } }

/* ---- Pied de page ---- */
.fe-pied { padding: clamp(56px, 7vw, 96px) 0 40px; background: var(--nuit); }
.fe-pied-in { display: grid; gap: 22px; justify-items: center; text-align: center; }
.fe-pied-sceau { width: 64px; opacity: 0.8; }
.fe-pied-lignes { font-size: 0.95rem; color: var(--texte-clair); max-width: 48em; }
.fe-pied-lignes p { margin: 0 0 0.4em; }
.fe-pied-lignes a { color: var(--sauge); border-bottom: 1px solid rgba(169, 183, 155, 0.4); }
.fe-pied-reseaux, .fe-pied-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 0.92rem; letter-spacing: 0.06em; text-transform: uppercase; }
.fe-pied-reseaux a { color: var(--papier); }
.fe-pied-liens a { color: var(--sauge); }
.fe-pied a:hover { color: var(--ambre-clair); }