/* Polices auto-hébergées (sous-ensemble latin) : aucun appel à Google */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/cormorant-garamond.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 500;font-display:swap;src:url('../fonts/cormorant-garamond-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/dm-sans.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ==========================================================
   THÈME DU SITE — modifiez ici couleurs, polices et rayons.
   Toutes les pages lisent ces variables.
   ========================================================== */
:root {
  /* Neutres */
  --bg: #FAF7F2;          /* fond crème */
  --bg-alt: #F3EEE6;      /* fond secondaire */
  --surface: #FFFDF9;     /* cartes */
  --ink: #2E3331;         /* texte anthracite */
  --ink-2: #555D59;       /* texte secondaire (AA sur crème) */
  --line: rgba(46, 51, 49, .12);

  /* Accents doux */
  --sand: #ECE2D2;
  --terra-soft: #F5E4D9;
  --terra: #A2573B;

  /* Couleur principale — palette « Sauge » */
  --primary: #4E6A56;       /* boutons, liens (AA avec texte crème) */
  --primary-hover: #415A48;
  --primary-mid: #A7BBA8;   /* éléments décoratifs */
  --primary-soft: #DFE8DD;  /* formes organiques */
  --primary-tint: #EDF1EA;  /* fonds de sections */
  --on-primary: #FAF7F2;

  /* Typographie */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* Mouvement & formes */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --shadow-soft: 0 22px 44px -26px rgba(46, 51, 49, .32);
}

/* Palettes alternatives */
:root[data-palette="eucalyptus"] {
  --primary: #3C6566; --primary-hover: #325556; --primary-mid: #9CBAB8;
  --primary-soft: #DCE8E6; --primary-tint: #ECF2F1;
}
:root[data-palette="argile"] {
  --primary: #97573C; --primary-hover: #804A33; --primary-mid: #D6B09C;
  --primary-soft: #F1E2D8; --primary-tint: #F7EFE9;
  --terra-soft: #E6ECE3; --terra: #4E6A56;
}

/* Polices de titres alternatives */
:root[data-font="playfair"] { --font-serif: 'Playfair Display', Georgia, serif; }
:root[data-font="lora"] { --font-serif: 'Lora', Georgia, serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: 17px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  animation: pageIn 700ms var(--ease) both;
}
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; }
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--primary-soft); color: var(--ink); }

@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes breathe {
  0%, 100% { border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; transform: scale(1) rotate(0deg); }
  33%      { border-radius: 45% 55% 40% 60% / 58% 42% 58% 42%; transform: scale(1.05) rotate(6deg); }
  66%      { border-radius: 52% 48% 62% 38% / 42% 60% 40% 58%; transform: scale(.97) rotate(-4deg); }
}

@keyframes floatSlow { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -18px, 0); } }
@keyframes driftA { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(12%, 6%, 0) scale(1.12); } }
@keyframes driftB { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); } 50% { transform: translate3d(-10%, -8%, 0) scale(.94); } }
@keyframes sway { 0%, 100% { transform: translate3d(-4%, 0, 0); } 50% { transform: translate3d(4%, -6px, 0); } }
@keyframes glow { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Survols (repris de la maquette) ---------- */
.hv-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 16px 30px -16px var(--primary) !important; background: var(--primary-hover) !important; color: var(--on-primary) !important; }
.hv-outline:hover { transform: translateY(-2px) !important; background: var(--surface) !important; border-color: var(--primary) !important; color: var(--ink) !important; }
.hv-card:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-soft) !important; border-color: transparent !important; }
.hv-link:hover { gap: 16px !important; border-color: var(--primary) !important; color: var(--primary) !important; }
.hv-light:hover { transform: translateY(-2px) !important; box-shadow: rgba(0, 0, 0, 0.35) 0px 18px 32px -16px !important; color: var(--primary) !important; }
.hv-ghost:hover { transform: translateY(-2px) !important; background: color-mix(in srgb, var(--on-primary) 12%, transparent) !important; color: var(--on-primary) !important; }
.hv-skip:focus { top: 16px !important; }
.hv-color:hover { color: var(--primary) !important; }
.hv-btn-sm:hover { transform: translateY(-2px) !important; box-shadow: 0 14px 26px -14px var(--primary) !important; background: var(--primary-hover) !important; color: var(--on-primary) !important; }
.hv-btn-flat:hover { transform: translateY(-2px) !important; background: var(--primary-hover) !important; color: var(--on-primary) !important; }
.hv-btn-lg:hover { transform: translateY(-2px) !important; box-shadow: 0 18px 32px -16px var(--primary) !important; background: var(--primary-hover) !important; color: var(--on-primary) !important; }

/* ---------- Visuels ---------- */
img.fill { width: 100%; height: 100%; object-fit: cover; }

/* ---------- En-tête ---------- */
.skip { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 20px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: 15px; text-decoration: none; transition: top 400ms var(--ease); }
.skip:focus { top: 16px; color: var(--on-primary); }
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 22px 0; transition: padding 600ms var(--ease), background-color 600ms var(--ease), box-shadow 600ms var(--ease); }
.site-header.is-scrolled { padding: 12px 0; background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 1px 0 var(--line); }
.menu-open .site-header { padding: 12px 0; background: var(--bg); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr-inner { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px,4vw,40px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--ink); line-height: 1.1; }
.brand:hover { color: var(--ink); }
.brand-name { font-family: var(--font-serif); font-size: 27px; font-weight: 500; letter-spacing: -0.01em; }
.brand-tag { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.nav-desktop { display: flex; align-items: center; gap: clamp(18px,2.2vw,34px); }
.nav-desktop > a:not(.btn) { position: relative; font-size: 15px; color: var(--ink); text-decoration: none; padding: 6px 0; transition: color 400ms var(--ease); }
.nav-desktop > a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease); }
.nav-desktop > a:not(.btn):hover, .nav-desktop > a[aria-current] { color: var(--primary); }
.nav-desktop > a:not(.btn):hover::after, .nav-desktop > a[aria-current]::after { transform: scaleX(1); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 30px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: 16px; font-weight: 500; text-decoration: none; transition: transform 500ms var(--ease), box-shadow 500ms var(--ease), background-color 500ms var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px var(--primary); background: var(--primary-hover); color: var(--on-primary); }
.btn-sm { min-height: 46px; padding: 0 22px; font-size: 15px; }
.btn-block { display: flex; width: 100%; }
.burger { display: none; position: relative; width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; padding: 0; }
.burger span { position: absolute; left: 13px; width: 22px; height: 1.5px; border-radius: 2px; background: var(--ink); transition: transform 500ms var(--ease); }
.burger span:first-child { top: 19px; } .burger span:last-child { top: 27px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.menu-mobile { position: fixed; inset: 0; z-index: 45; background: var(--bg); padding: 112px clamp(20px,6vw,40px) 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; overflow-y: auto; }
.menu-mobile[hidden] { display: none; }
.menu-mobile nav { display: flex; flex-direction: column; }
.menu-mobile nav a { font-family: var(--font-serif); font-size: 36px; line-height: 1.2; font-weight: 500; color: var(--ink); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--line); }
.menu-mobile nav a[aria-current] { color: var(--primary); }
.menu-foot { display: flex; flex-direction: column; gap: 16px; }
.menu-foot p { font-size: 15px; color: var(--ink-2); text-align: center; }
.menu-foot p a { color: var(--ink-2); }
.fab { display: none; position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; align-items: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: 16px; font-weight: 500; text-decoration: none; box-shadow: 0 16px 32px -14px rgba(46,51,49,.45); }
.fab:hover { color: var(--on-primary); background: var(--primary-hover); }
.fab span { width: 8px; height: 8px; border-radius: 50%; background: var(--primary-mid); }
@media (max-width: 1079px) {
  .nav-desktop { display: none; }
  .burger { display: block; }
  .fab { display: flex; }
  .menu-open .fab { display: none; }
  footer { padding-bottom: 88px; }
}
.menu-open { overflow: hidden; }

/* ---------- FAQ (accordéons natifs, sans JavaScript) ---------- */
.faq-item { border-top: 1px solid var(--line); }
.faq-q { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; cursor: pointer; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q h3 { font-family: var(--font-serif); font-size: clamp(23px,2.2vw,28px); font-weight: 500; line-height: 1.25; color: var(--ink); transition: color 400ms var(--ease); }
.faq-q:hover h3 { color: var(--primary); }
.faq-icon { flex: 0 0 auto; position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--primary-soft); transition: background-color 500ms var(--ease); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 15px; top: 21px; width: 14px; height: 1.5px; border-radius: 2px; background: var(--ink); transition: transform 600ms var(--ease); }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }
.faq-item[open] .faq-icon { background: var(--primary-mid); }
.faq-a { display: flex; flex-direction: column; gap: 12px; padding: 0 clamp(0px,6vw,68px) 30px 0; }