/* ================================================================
   style.css — Le Repaire de Ripley & Unaï
   Site vitrine ultra-léger — acsis33.com
   Palette : Vert forêt · Blanc cassé · Bois · Pierre
   ================================================================ */

/* ── Variables & Reset ────────────────────────────────────────── */
:root {
  --vert-foret   : #2d4a2d;
  --vert-mousse  : #4a7c4a;
  --vert-clair   : #7aad72;
  --bois         : #8b6344;
  --bois-clair   : #c4a882;
  --pierre       : #d6cfc4;
  --creme        : #f5f0e8;
  --blanc        : #fefcf8;
  --texte        : #2a2520;
  --texte-doux   : #5a5248;
  --ombre        : rgba(45,74,45,0.15);
  --police-titre : 'Playfair Display', Georgia, serif;
  --police-corps : 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --rayon        : 8px;
  --transition   : 0.3s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--police-corps); background: var(--creme); color: var(--texte); line-height: 1.7; }
img  { max-width: 100%; height: auto; display: block; }
a    { color: var(--vert-foret); text-decoration: none; }

/* ── Typographie ──────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--police-titre); line-height: 1.25; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: var(--vert-foret); margin-bottom: 1rem; }
h3 { font-size: 1.15rem; color: var(--bois); margin-bottom: .5rem; }

/* ── Conteneur ────────────────────────────────────────────────── */
.conteneur { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Séparateur décoratif ─────────────────────────────────────── */
.separateur { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.5rem; }
.separateur::before, .separateur::after { content:''; flex:1; height:1px; background:var(--bois-clair); }
.separateur-icone { font-size: 1.3rem; color: var(--bois-clair); }

/* ── Boutons ──────────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: .85rem 2rem; border-radius: var(--rayon);
  font-family: var(--police-corps); font-size: 1rem; font-weight: 700;
  letter-spacing: .04em; cursor: pointer; transition: all var(--transition);
  border: 2px solid transparent; text-align: center;
}
.btn-principal  { background: var(--vert-foret); color: var(--blanc); border-color: var(--vert-foret); }
.btn-principal:hover { background: transparent; color: var(--vert-foret); }
.btn-secondaire { background: transparent; color: var(--blanc); border-color: var(--blanc); }
.btn-secondaire:hover { background: var(--blanc); color: var(--vert-foret); }

/* ════════════════════════════════════════════════════════════════
   NAVIGATION FIXE
   ════════════════════════════════════════════════════════════════ */
#nav {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  background: rgba(45,74,45,.97); backdrop-filter: blur(6px);
  padding: .85rem 0; box-shadow: 0 2px 12px var(--ombre);
}
#nav .nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  max-width:1100px; margin:0 auto; padding:0 1.5rem;
}
.nav-logo { font-family:var(--police-titre); font-size:1.05rem; color:var(--creme); font-style:italic; }
.nav-liens { list-style:none; display:flex; gap:1.6rem; }
.nav-liens a { color:var(--pierre); font-size:.85rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; transition:color var(--transition); }
.nav-liens a:hover { color:var(--vert-clair); }

/* Hamburger mobile */
.nav-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.nav-toggle span { display:block; width:26px; height:2px; background:var(--pierre); border-radius:2px; transition:all var(--transition); }

/* ════════════════════════════════════════════════════════════════
   HERO / EN-TÊTE
   ════════════════════════════════════════════════════════════════ */
#accueil {
  min-height: 100svh; display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center; padding:7rem 1.5rem 5rem;
  position:relative; overflow:hidden;
  /* ── Remplacez la ligne background ci-dessous par :
     background: linear-gradient(160deg,rgba(20,40,20,.65),rgba(45,74,45,.55)),
                 url('photo-jardin-exterieur.jpg') center/cover no-repeat;
     pour utiliser la vraie photo hero. ── */
  background: linear-gradient(160deg,#1a3020 0%,#2d4a2d 50%,#3d6b3d 100%);
}
/* Texture grain subtile */
#accueil::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
.hero-logo-img { width:160px; height:160px; object-fit:cover; border-radius:50%; margin:0 auto 1.5rem; border:4px solid var(--bois-clair); box-shadow:0 4px 20px rgba(0,0,0,.4); }
.hero-badge { display:inline-block; background:var(--bois-clair); color:var(--texte); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.35rem 1.1rem; border-radius:50px; margin-bottom:1.2rem; }
#accueil h1 { font-family:var(--police-titre); font-size:clamp(2rem,6vw,4rem); color:var(--blanc); margin-bottom:.6rem; text-shadow:0 2px 20px rgba(0,0,0,.4); max-width:820px; }
.hero-sous-titre { font-size:clamp(1rem,2vw,1.2rem); color:var(--pierre); max-width:580px; margin:.4rem auto .5rem; }
.hero-localisation { font-size:.9rem; color:var(--vert-clair); margin-bottom:.4rem; letter-spacing:.04em; }
.hero-adresse { font-size:.85rem; color:var(--pierre); opacity:.8; margin-bottom:2rem; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.hero-scroll { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); color:var(--pierre); font-size:1.5rem; animation:rebond 2s ease-in-out infinite; }
@keyframes rebond { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

/* ════════════════════════════════════════════════════════════════
   POINTS FORTS
   ════════════════════════════════════════════════════════════════ */
#points-forts { background:var(--vert-foret); padding:1.8rem 0; }
.points-forts-grille { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.8rem; }
.point-fort { display:flex; align-items:center; gap:.7rem; color:var(--pierre); }
.point-fort-icone { font-size:1.4rem; flex-shrink:0; }
.point-fort-texte { font-size:.88rem; font-weight:600; }

/* ════════════════════════════════════════════════════════════════
   PRÉSENTATION
   ════════════════════════════════════════════════════════════════ */
#presentation { padding:5rem 0; background:var(--blanc); }
.presentation-grille { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.presentation-texte p { margin-bottom:1rem; color:var(--texte-doux); }
.badge-chiens {
  display:inline-flex; align-items:center; gap:.6rem;
  background:#f0f7ee; border:2px solid var(--vert-clair); color:var(--vert-foret);
  font-weight:700; font-size:.95rem; padding:.7rem 1.2rem; border-radius:var(--rayon); margin-top:1.2rem;
}
.badge-chiens-icone { font-size:1.4rem; }
.equipements-grille { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.equipement-carte { background:var(--creme); border:1px solid var(--pierre); border-radius:var(--rayon); padding:1rem; text-align:center; }
.equipement-carte .icone { font-size:1.8rem; margin-bottom:.4rem; }
.equipement-carte p { font-size:.83rem; color:var(--texte-doux); margin:0; }

/* ════════════════════════════════════════════════════════════════
   GALERIE PHOTOS
   ════════════════════════════════════════════════════════════════ */
#galerie { padding:5rem 0; background:var(--creme); }
.galerie-grille { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.galerie-grille .grande { grid-column:span 2; }
.galerie-item { position:relative; overflow:hidden; border-radius:var(--rayon); }
.galerie-item img { width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform .4s ease; }
.galerie-item.grande img { aspect-ratio:16/9; }
.galerie-item:hover img { transform:scale(1.05); }
/* Légende au survol */
.galerie-legende {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent,rgba(30,50,30,.75));
  color:#fff; font-size:.82rem; padding:.6rem .8rem;
  transform:translateY(100%); transition:transform var(--transition);
}
.galerie-item:hover .galerie-legende { transform:translateY(0); }

/* ════════════════════════════════════════════════════════════════
   TARIFS
   ════════════════════════════════════════════════════════════════ */
#tarifs { padding:5rem 0; background:var(--vert-foret); color:var(--creme); }
#tarifs h2 { color:var(--bois-clair); }
#tarifs .separateur::before, #tarifs .separateur::after { background:var(--vert-mousse); }
#tarifs .separateur-icone { color:var(--bois-clair); }
.tarifs-grille { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; }
.mention-semaine { display:inline-flex; align-items:center; gap:.5rem; background:var(--bois); color:var(--blanc); font-size:.85rem; font-weight:700; padding:.5rem 1.1rem; border-radius:50px; margin-bottom:1.5rem; }
.tarif-carte { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); border-radius:12px; overflow:hidden; }
.tarif-carte-entete { background:rgba(0,0,0,.2); padding:1.1rem 1.5rem; }
.tarif-carte-entete h3 { color:var(--bois-clair); font-size:1.05rem; margin:0; }
.tarif-tableau { width:100%; border-collapse:collapse; }
.tarif-tableau td { padding:.85rem 1.5rem; border-bottom:1px solid rgba(255,255,255,.07); font-size:.93rem; color:var(--pierre); }
.tarif-tableau td:last-child { text-align:right; font-weight:700; color:var(--blanc); }
.tarif-tableau tr:last-child td { border-bottom:none; }
.tarif-tableau .ligne-total td { background:rgba(0,0,0,.2); color:var(--bois-clair); font-weight:700; font-size:1.05rem; }
.tarifs-notes { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-left:4px solid var(--bois-clair); border-radius:var(--rayon); padding:1.5rem; }
.tarifs-notes h3 { color:var(--bois-clair); margin-bottom:.8rem; }
.tarifs-notes ul { list-style:none; }
.tarifs-notes li { padding:.4rem 0 .4rem 1.2rem; color:var(--pierre); font-size:.9rem; position:relative; }
.tarifs-notes li::before { content:'•'; position:absolute; left:0; color:var(--vert-clair); }

/* ════════════════════════════════════════════════════════════════
   CALENDRIER
   ════════════════════════════════════════════════════════════════ */
#calendrier { padding:5rem 0; background:var(--blanc); }
.calendrier-intro { max-width:700px; margin:0 auto 2rem; text-align:center; color:var(--texte-doux); }
.calendrier-legende { display:flex; justify-content:center; gap:2rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.legende-item { display:flex; align-items:center; gap:.5rem; font-size:.88rem; color:var(--texte-doux); }
.legende-pastille { width:13px; height:13px; border-radius:3px; }
.legende-pastille.occupe  { background:#c0392b; }
.legende-pastille.libre   { background:var(--vert-clair); }
.calendrier-wrapper { position:relative; width:100%; max-width:900px; margin:0 auto; border:1px solid var(--pierre); border-radius:12px; overflow:hidden; box-shadow:0 4px 24px var(--ombre); }
.calendrier-wrapper iframe { display:block; width:100%; height:600px; border:none; }
.calendrier-note { text-align:center; font-size:.83rem; color:var(--texte-doux); margin-top:1rem; }

/* ════════════════════════════════════════════════════════════════
   FORMULAIRE DE RÉSERVATION
   ════════════════════════════════════════════════════════════════ */
#reservation { padding:5rem 0; background:var(--creme); }
.reservation-grille { display:grid; grid-template-columns:1fr 1.6fr; gap:4rem; align-items:start; }
.reservation-info h2 { color:var(--vert-foret); }
.reservation-info p  { color:var(--texte-doux); margin-bottom:1.5rem; }
.contact-direct { display:flex; flex-direction:column; gap:.9rem; }
.contact-ligne { display:flex; align-items:center; gap:.8rem; font-size:.93rem; }
.contact-ligne .icone { width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:var(--vert-foret); color:var(--blanc); border-radius:50%; font-size:1rem; flex-shrink:0; }
.contact-ligne a { color:var(--vert-foret); font-weight:600; }
.contact-ligne a:hover { text-decoration:underline; }
.formulaire { background:var(--blanc); border:1px solid var(--pierre); border-radius:12px; padding:2.5rem; box-shadow:0 4px 24px var(--ombre); }
.formulaire h3 { color:var(--vert-foret); font-size:1.25rem; margin-bottom:1.5rem; }
.champ-groupe { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.champ { display:flex; flex-direction:column; margin-bottom:1rem; }
.champ label { font-size:.8rem; font-weight:700; color:var(--texte-doux); margin-bottom:.35rem; letter-spacing:.04em; text-transform:uppercase; }
.champ label .obligatoire { color:#c0392b; margin-left:2px; }
.champ input, .champ select, .champ textarea {
  width:100%; padding:.75rem 1rem; border:1.5px solid var(--pierre);
  border-radius:var(--rayon); font-family:var(--police-corps); font-size:.93rem;
  color:var(--texte); background:var(--creme); transition:border-color var(--transition), box-shadow var(--transition); appearance:none;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline:none; border-color:var(--vert-mousse); box-shadow:0 0 0 3px rgba(74,124,74,.15); }
.champ textarea { resize:vertical; min-height:110px; }
.champ-plein { grid-column:span 2; }
.formulaire-rgpd { font-size:.8rem; color:var(--texte-doux); margin:.6rem 0 1.2rem; line-height:1.5; }
.formulaire-envoi { width:100%; font-size:1rem; padding:1rem; }

/* ════════════════════════════════════════════════════════════════
   PIED DE PAGE
   ════════════════════════════════════════════════════════════════ */
#pied-de-page { background:#1a2e1a; color:var(--pierre); padding:3rem 0 2rem; text-align:center; }
.pied-logo { font-family:var(--police-titre); font-size:1.4rem; color:var(--bois-clair); font-style:italic; margin-bottom:.4rem; }
.pied-localisation { font-size:.88rem; color:var(--vert-clair); margin-bottom:1.5rem; }
.pied-liens { list-style:none; display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.pied-liens a { color:var(--pierre); font-size:.83rem; transition:color var(--transition); }
.pied-liens a:hover { color:var(--vert-clair); }
.pied-separation { width:60px; height:1px; background:var(--vert-mousse); margin:1.5rem auto; }
.pied-legal { font-size:.77rem; color:#6a7a6a; line-height:1.9; }
.pied-legal a { color:#8a9a8a; }
.pied-legal a:hover { color:var(--vert-clair); }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  .presentation-grille, .tarifs-grille, .reservation-grille { grid-template-columns:1fr; gap:2.5rem; }
  .galerie-grille { grid-template-columns:repeat(2,1fr); }
  .galerie-grille .grande { grid-column:span 2; }
}
@media (max-width:640px) {
  .nav-liens { display:none; flex-direction:column; }
  .nav-liens.ouvert { display:flex; position:absolute; top:100%; left:0; right:0; background:rgba(29,50,29,.98); padding:1rem 1.5rem; gap:1.2rem; }
  .nav-toggle { display:flex; }
  .galerie-grille { grid-template-columns:1fr; }
  .galerie-grille .grande { grid-column:span 1; }
  .champ-groupe { grid-template-columns:1fr; }
  .champ-plein  { grid-column:span 1; }
  .formulaire { padding:1.5rem; }
  .points-forts-grille { grid-template-columns:1fr 1fr; }
  #accueil { padding-top:6rem; }
  .hero-logo-img { width:120px; height:120px; }
}
@media (max-width:380px) {
  .hero-actions { flex-direction:column; align-items:center; }
  .btn { width:100%; }
  .points-forts-grille { grid-template-columns:1fr; }
}