/* ═══════════════════════════════════════════════════════════
   OASIS DE CHAMOUSSET — Feuille de styles principale
   ─────────────────────────────────────────────────────────
   GUIDE POUR LES NOVICES :
   • Un commentaire CSS s'écrit entre /* et */ 
   • Une règle CSS s'écrit : .nom-de-classe { propriété: valeur; }
   • Pour modifier une couleur, changez la valeur dans :root {}
   • Pour modifier une taille, changez les valeurs en px, em ou rem
   • 1rem = 16px (taille de base du navigateur)
   ═══════════════════════════════════════════════════════════ */

/* ── IMPORT POLICES GOOGLE ──────────────────────────────────
   Cormorant Garamond = police d'affichage (titres élégants)
   DM Sans = police de texte courant (lisible, moderne)
   ATTENTION : nécessite une connexion internet pour charger */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

/* ── RESET UNIVERSEL ────────────────────────────────────────
   Remet à zéro les marges/paddings par défaut des navigateurs
   box-sizing:border-box = les bordures sont incluses dans la largeur */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── PARAMÈTRES HTML ────────────────────────────────────────
   scroll-behavior:smooth = défilement animé lors des liens ancres (#)
   font-size:16px = taille de base (1rem = 16px partout) */
html {
  scroll-behavior: smooth; /* Défilement fluide */
  font-size: 16px;          /* 1rem = 16px */
  margin: 0; padding: 0;
  overflow-x: hidden;       /* Pas de barre de défilement horizontale */
}

/* ════════════════════════════════════════════════════════════
   PALETTE DE COULEURS — Variables CSS
   ─────────────────────────────────────────────────────────
   Modifiez les valeurs hexadécimales (#XXXXXX) pour changer
   une couleur sur tout le site d'un seul coup.
   Exemple : --g-dark: #2B4720 → vert foncé principal
   ════════════════════════════════════════════════════════ */
:root {
  /* ── VERTS ────────────────────────────────────────────
     La famille de verts, du plus foncé au plus clair.
     Utilisés pour les en-têtes, boutons, accents. */
  --g-dark:   #2B4720; /* Vert forêt foncé — nav, sections sombres */
  --g-mid:    #3A6228; /* Vert moyen — liens, accents */
  --g-sage:   #5B7B3E; /* Vert sauge — détails, bordures actives */
  --g-fern:   #8AAF68; /* Vert fougère clair — textes sur fond sombre */
  --g-lichen: #C5DAA5; /* Vert très clair — fonds doux */
  --g-mint:   #E8F2DA; /* Menthe — fonds de cartes légères */

  /* ── TERRES & BRUNS ───────────────────────────────────
     Tons chauds qui rappellent la terre et le bois. */
  --b-deep:   #3D2710; /* Brun très foncé — fonds de section spéciaux */
  --b-bark:   #6E4E2A; /* Brun écorce — labels, accents chauds */
  --b-clay:   #9A7248; /* Brun argile — éléments tertiaires */

  /* ── BEIGES ───────────────────────────────────────────
     Tons neutres chauds pour les fonds de page. */
  --bg:       #F5F0E8; /* Beige principal — fond de la page */
  --bg-light: #FAFAF4; /* Quasi-blanc légèrement teinté — cartes, formulaires */
  --bg-dark:  #EBE4D4; /* Beige plus foncé — sections alternées */
  --parch:    #E6DCC8; /* Beige parchemin — encadrés, callouts */

  /* ── OR / PAILLE ─────────────────────────────────────
     Accents dorés pour les titres et ornements. */
  --gold:     #BF9A55; /* Or principal — bordures, icônes, accents */
  --gold-lt:  #D4B570; /* Or clair — variations légères */

  /* ── TEXTES (ENCRES) ──────────────────────────────────
     Niveaux de contraste pour les textes.
     --ink = texte principal (très lisible)
     --ink-mid = texte secondaire (légèrement atténué)
     --ink-lt = texte tertiaire (discret, sous-titres) */
  --ink:      #1A1008; /* Texte principal — titres et corps */
  --ink-mid:  #3A2810; /* Texte secondaire — descriptions */
  --ink-lt:   #5E4530; /* Texte tertiaire — métadonnées, légendes */

  /* ── UTILITAIRES ──────────────────────────────────────
     Règles, ombres et autres valeurs réutilisables. */
  --rule:     rgba(110,78,42,0.13); /* Ligne de séparation — couleur sable transparent */
  --sh-sm:    0 1px 6px rgba(30,18,8,0.07);   /* Ombre légère */
  --sh-md:    0 4px 24px rgba(30,18,8,0.09);  /* Ombre moyenne */
  --sh-lg:    0 12px 48px rgba(30,18,8,0.13); /* Ombre prononcée */

  /* ── TYPOGRAPHIES ─────────────────────────────────────
     Variables de polices utilisées partout dans le CSS. */
  --f-display: 'Cormorant Garamond', Georgia, serif;  /* Titres élégants */
  --f-body:    'DM Sans', system-ui, -apple-system, sans-serif; /* Texte courant */
}

/* ════════════════════════════════════════════════════════════
   STYLES DE BASE DU DOCUMENT
   ════════════════════════════════════════════════════════ */

/* Corps de page — paramètres généraux de tout le texte */
body {
  font-family: var(--f-body); /* Police de texte courant (DM Sans) */
  background: var(--bg);      /* Fond beige — même couleur que le contenu */
  color: var(--ink);           /* Couleur du texte principal */
  line-height: 1.75;           /* Interligne = 175% de la taille de police */
  font-size: 1rem;             /* 16px — taille de base */
  font-weight: 400;            /* Épaisseur normale (400 = normal, 700 = gras) */
  margin: 0; padding: 0;       /* Supprime toute marge par défaut */
  width: 100%;
  overflow-x: hidden;
}

/* Titres h1 à h5 — tous en Cormorant Garamond */
h1,h2,h3,h4,h5 {
  font-family: var(--f-display); /* Police élégante pour les titres */
  font-weight: 500;              /* Semi-gras */
  color: var(--ink);             /* Couleur encre foncée */
  line-height: 1.18;             /* Interligne serré pour les titres */
}

p { margin-bottom: 1em; } /* Espace sous chaque paragraphe */

/* Liens hypertexte */
a { color: var(--g-mid); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--g-sage); } /* Couleur au survol */

strong { font-weight: 500; color: var(--ink); } /* Texte en gras */
em { font-style: italic; }                      /* Texte en italique */
ul { list-style: none; }                         /* Supprime les puces des listes */
img { max-width: 100%; display: block; }         /* Images responsives */

/* ── CONTENEURS DE LARGEUR MAX ──────────────────────────────
   Centrent le contenu et limitent sa largeur maximale.
   Modifiez les valeurs en px pour changer la largeur du site. */
.container         { max-width: 1000px; margin: 0 auto; padding: 0 32px; } /* Standard */
.container--wide   { max-width: 1140px; margin: 0 auto; padding: 0 32px; } /* Large */
.container--narrow { max-width: 740px;  margin: 0 auto; padding: 0 32px; } /* Étroit (articles) */

/* ── CONTENU PRINCIPAL DE PAGE ──────────────────────────────
   Enveloppe tout le contenu entre le page-header et le footer.
   Définit la largeur max et l'espacement vertical des pages intérieures.
   IMPORTANT : ne pas supprimer, utilisé sur toutes les pages du site. */
.page-main         { max-width: 1000px; margin: 0 auto; padding: 68px 32px 88px; background: var(--bg); }
.page-main--narrow { max-width: 740px;  margin: 0 auto; padding: 68px 32px 88px; background: var(--bg); }

/* ── RESPONSIVE page-main ── */
@media(max-width: 480px) {
  .page-main, .page-main--narrow { padding: 44px 20px 64px; }
}

/* ── LABEL CAPSLOCK ─────────────────────────────────────────
   Petit texte en majuscules espacées, utilisé pour les
   sous-catégories et labels au-dessus des titres. */
.caps {
  font-family: var(--f-body);
  font-size: 0.67em;      /* Plus petit que le texte normal */
  font-weight: 500;
  letter-spacing: 0.2em;  /* Espacement entre les lettres */
  text-transform: uppercase; /* Force les majuscules */
  color: var(--b-bark);   /* Couleur brun écorce */
}

/* Ligne de séparation horizontale */
.rule       { border: none; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
.rule--gold { border-top: 1px solid rgba(191,154,85,0.4); } /* Variante dorée */

/* Ornement de séparation décoratif avec ligne+texte+ligne */
.ornament {
  display: flex; align-items: center; gap: 20px;
  margin: 32px 0; color: var(--gold);
}
.ornament::before, .ornament::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(191,154,85,0.5));
}
.ornament::after { background: linear-gradient(90deg, rgba(191,154,85,0.5), transparent); }

/* ── TAGS / ÉTIQUETTES ─────────────────────────────────────
   Petites étiquettes colorées (ex: "Disponible", "Nouveau"). */
.tag {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 0.7em;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border: 1px solid var(--rule);
  background: var(--bg-light);
  color: var(--b-bark);
  text-decoration: none;
}

/* ── BOUTONS ────────────────────────────────────────────────
   Trois variantes de boutons :
   .btn-primary   = vert foncé (action principale)
   .btn-secondary = contour vert (action secondaire)
   .btn-gold      = fond doré (mise en avant spéciale)
   .btn-ghost-light = contour blanc (sur fonds sombres) */
.btn {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 0.82em;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 28px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease; /* Animation fluide au survol */
  line-height: 1;
}
.btn-sm { padding: 9px 20px; font-size: 0.76em; } /* Variante petite taille */

/* Bouton vert foncé (action principale) */
.btn-primary { background: var(--g-dark); color: var(--bg); border-color: var(--g-dark); }
.btn-primary:hover { background: var(--g-mid); border-color: var(--g-mid); color: var(--bg); }

/* Bouton contour vert (action secondaire) */
.btn-secondary { background: transparent; color: var(--g-dark); border-color: var(--g-dark); }
.btn-secondary:hover { background: var(--g-dark); color: var(--bg); }

/* Bouton doré (mise en avant spéciale) */
.btn-gold { background: var(--gold); color: var(--bg-light); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-lt); border-color: var(--gold-lt); }

/* Bouton fantôme blanc (pour fonds sombres) */
.btn-ghost-light { background: transparent; color: var(--bg); border-color: rgba(245,240,232,0.5); }
.btn-ghost-light:hover { background: rgba(245,240,232,0.1); border-color: var(--bg); color: var(--bg); }

/* ── NAVIGATION PRINCIPALE ─────────────────────────────────
   La barre de navigation en haut de chaque page.
   Modifiez --g-dark pour changer la couleur de fond du menu. */
.site-nav {
  position: sticky; /* Reste en haut quand on défile */
  top: 0;
  z-index: 100;     /* Passe par-dessus le reste du contenu */
  background: var(--g-dark);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px; /* Hauteur de la barre de navigation — modifier ici */
}
/* Logo / nom du site dans la nav */
.nav-brand {
  font-family: var(--f-display);
  font-size: 1.15em;
  font-weight: 400;
  color: var(--bg);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.nav-brand em { color: var(--g-fern); font-style: italic; }

/* Liste des liens de navigation */
.nav-links {
  display: flex;
  gap: 2px;
  align-items: center;
}
.nav-links li a {
  font-family: var(--f-body);
  font-size: 0.76em;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.75); /* Blanc légèrement transparent */
  text-decoration: none;
  padding: 8px 12px;
  transition: color 0.15s;
}
.nav-links li a:hover,
.nav-links li a.active { color: var(--bg); } /* Plus blanc au survol/actif */

/* Bouton "Contact" dans la nav (différencié visuellement) */
.nav-links li a.cta {
  background: var(--gold);
  color: var(--bg-light);
  padding: 7px 16px;
  margin-left: 8px;
}
.nav-links li a.cta:hover { background: var(--gold-lt); color: var(--bg-light); }

/* ── MENU DÉROULANT ─────────────────────────────────────────
   Sous-menu qui apparaît au survol d'un item de navigation. */
.nav-dropdown { position: relative; }
.dropdown-menu {
  display: none; /* Caché par défaut */
  position: absolute;
  top: 100%; left: 0;
  background: var(--g-dark);
  min-width: 220px;
  padding: 8px 0;
  border-top: 2px solid var(--gold); /* Ligne dorée en haut */
  box-shadow: var(--sh-md);
}
.nav-dropdown:hover .dropdown-menu { display: block; } /* Affiché au survol */
.dropdown-menu li a {
  display: block;
  padding: 10px 20px;
  font-size: 0.74em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.7);
}
.dropdown-menu li a:hover { color: var(--bg); background: rgba(255,255,255,0.05); }

/* Hamburger mobile — voir section @media en bas du fichier */
.nav-hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; }
.nav-hamburger span { display: block; width: 24px; height: 1.5px; background: var(--bg); }

/* ── EN-TÊTE DE PAGE (PAGE-HEADER) ─────────────────────────
   Le bandeau vert foncé avec le titre en haut de chaque page. */
.page-header {
  background: var(--g-dark);
  padding: 56px 32px 48px;
  text-align: left;
}
.page-header-inner { max-width: 1000px; margin: 0 auto; }
.page-header h1 {
  font-size: clamp(2em, 5vw, 3.2em); /* Taille adaptative min/max */
  font-weight: 400;
  color: var(--bg); /* Titre en beige clair sur fond vert */
  margin-bottom: 8px;
}
/* Texte d'introduction sous le titre de page */
.page-header .lead {
  font-family: var(--f-display);
  font-size: 1.1em;
  font-style: italic;
  color: rgba(245,240,232,0.88);
  max-width: 600px;
  margin-top: 10px;
  line-height: 1.6;
  font-weight: 300;
}
/* Dans le page-header, .caps doit être clair sur fond vert */
.page-header .caps {
  color: var(--g-fern);  /* vert clair lisible sur fond vert foncé */
}
/* Fil d'Ariane (Accueil › Page › Sous-page) */
.breadcrumb {
  font-size: 0.71em;
  color: rgba(245,240,232,0.55);
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.breadcrumb a { color: rgba(245,240,232,0.65); text-decoration: none; }
.breadcrumb a:hover { color: var(--g-fern); }

/* ── SECTIONS ───────────────────────────────────────────────
   Blocs de contenu avec padding vertical. */
.section { padding: 72px 32px; }
.section--dark  { background: var(--g-dark); }  /* Section vert foncé */
.section--parch { background: var(--parch); }   /* Section beige parchemin */
.section--light { background: var(--bg-light); } /* Section blanc cassé */

/* En-tête de section (spans + h2) */
.section-head           { margin-bottom: 56px; }
.section-head .caps     { margin-bottom: 10px; display: block; }
.section-head h2        { font-size: clamp(1.9em, 4vw, 2.7em); margin-bottom: 16px; font-weight: 400; }
.section-head p         { color: var(--ink-mid); font-size: 1.02em; max-width: 580px; line-height: 1.75; font-weight: 400; }
.section-head--center   { text-align: center; }
.section-head--center p { margin: 0 auto; }

/* ── CALLOUTS (ENCADRÉS D'INFO) ────────────────────────────
   Boîtes colorées pour mettre en valeur une information. */
.callout {
  padding: 20px 24px;
  border-left: 3px solid var(--gold); /* Bande colorée à gauche */
  background: var(--bg-light);
  margin: 20px 0;
}
.callout--earth { background: var(--parch); border-left-color: var(--b-bark); }
.callout--green { background: var(--g-mint); border-left-color: var(--g-sage); }

/* ── LISTES FEATURES ────────────────────────────────────────
   Listes avec tiret doré, utilisées dans les cartes produit. */
.features li {
  font-size: 0.9em;
  color: var(--ink); /* Couleur du texte */
  padding: 7px 0;
  border-bottom: 1px solid var(--rule); /* Ligne entre chaque item */
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.features li::before { content: '—'; color: var(--gold); flex-shrink: 0; } /* Tiret doré */
.features li:last-child { border-bottom: none; }

/* ── CARTES GÉNÉRIQUES ─────────────────────────────────────
   Conteneurs rectangulaires avec ombre et bordure. */
.card       { background: var(--bg-light); border: 1px solid var(--rule); }
.card:hover { box-shadow: var(--sh-md); }
.card-head  { background: var(--g-dark); padding: 20px 24px; border-bottom: 2px solid var(--gold); }
.card-head .caps { color: var(--g-fern); display: block; margin-bottom: 6px; }
.card-head h3    { color: var(--bg); font-size: 1.15em; font-weight: 400; }
.card-body       { padding: 22px 24px; }
.card-body p     { font-size: 0.92em; color: var(--ink-mid); line-height: 1.75; }

/* ── GRILLE DE CARTES ──────────────────────────────────────
   Grille CSS auto-adaptative : minimum 280px par carte. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* ── FORMULAIRES ────────────────────────────────────────────
   Styles des champs de saisie, labels et messages d'erreur. */
.field-group       { margin-bottom: 18px; }
.field-group label {
  display: block;
  font-size: 0.77em;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--ink);
}
/* Champs texte, email, select, textarea */
.field-group input:not([type=checkbox]):not([type=radio]), .field-group select, .field-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--rule);
  background: var(--bg-light);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 0.9em;
  font-weight: 400;
  outline: none;
  transition: border-color 0.15s; /* Animation de la bordure au focus */
  border-radius: 0; /* Bords droits (pas arrondis) */
  -webkit-appearance: none;
}
/* Bordure verte quand le champ est actif */
.field-group input:not([type=checkbox]):not([type=radio]):focus,
.field-group select:focus,
.field-group textarea:focus { border-color: var(--g-sage); }
/* Case à cocher */
.field-group input[type=checkbox], .field-group input[type=radio] {
  width: 16px !important; height: 16px !important; min-width: 16px !important;
  padding: 0 !important; border: none !important;
  -webkit-appearance: checkbox !important; appearance: checkbox !important;
  display: inline-block !important; visibility: visible !important; opacity: 1 !important;
  accent-color: #5B7B3E; /* Couleur de la coche — vert sauge */
  cursor: pointer; flex-shrink: 0; background: none !important;
}
.field-group textarea { resize: vertical; min-height: 110px; } /* Hauteur ajustable */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media(max-width:480px) { .field-row { grid-template-columns: 1fr; } }

/* ── PIED DE PAGE (FOOTER) ──────────────────────────────────
   Barre de bas de page sur une seule ligne.
   Modifiez --ink pour changer la couleur de fond. */
.site-footer { background: var(--ink); color: rgba(245,240,232,0.65); padding: 20px 32px 0; }
.footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand-sm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-links a {
  font-size: 0.82em;
  color: rgba(245,240,232,0.62);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-links a:hover { color: var(--bg); }
.footer-social { display: flex; gap: 14px; font-size: 1.1em; }
.footer-social a { text-decoration: none; opacity: 0.7; transition: opacity 0.15s; }
.footer-social a:hover { opacity: 1; }
.footer-bottom {
  max-width: 1100px; margin: 0 auto;
  padding: 12px 0;
  font-size: 0.74em;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  color: rgba(245,240,232,0.35);
}
.footer-bottom a { color: rgba(245,240,232,0.45); text-decoration: none; }
.footer-bottom a:hover { color: var(--bg); }
@media(max-width:760px) {
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-bottom { flex-direction: column; gap: 4px; }
}

/* ── SECTION HÉRO (PAGE D'ACCUEIL) ────────────────────────
   Grand bandeau avec image de fond et texte centré. */
.hero {
  background: var(--g-dark);
  background-image: url('illustrations/dessin_ODC.png'); /* Image de fond */
  background-size: cover;       /* L'image couvre tout l'espace */
  background-position: center 40%; /* Position : centré + légèrement vers le haut */
  position: relative;
  overflow: hidden;
  padding: 100px 32px 88px; /* Espacement interne (haut droite bas gauche) */
}
/* Overlay sombre semi-transparent pour garder le texte lisible */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(28,55,18,0.78); /* Vert très foncé à 78% d'opacité */
  pointer-events: none; z-index: 1;
}
.hero-bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1;
}
.hero-bg svg {
  position: absolute; opacity: 0.06; /* SVG décoratifs très discrets */
}
.hero-bg svg.left  { left: -40px; bottom: 0; width: 320px; height: auto; }
.hero-bg svg.right { right: -40px; top: -20px; width: 280px; height: auto; transform: scaleX(-1) rotate(15deg); }
.hero-inner { max-width: 800px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }

/* Étiquette CAPS au-dessus du titre héro */
.hero-eyebrow {
  font-family: var(--f-body);
  font-size: 0.68em;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--g-fern); /* Vert clair */
  margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content: ''; width: 32px; height: 1px; background: var(--g-fern); opacity: 0.5;
}

/* Titre principal de la page d'accueil */
.hero-title {
  font-family: var(--f-display);
  font-size: clamp(2.8em, 7vw, 5.2em); /* S'adapte à la taille d'écran */
  font-weight: 400;
  color: var(--bg); /* Beige clair sur fond vert */
  line-height: 1.06;
  margin-bottom: 12px;
}
.hero-title em { color: var(--g-fern); font-style: italic; }

/* Phrase d'accroche sous le titre */
.hero-tagline {
  font-family: var(--f-display);
  font-size: clamp(1.1em, 2vw, 1.3em);
  font-style: italic;
  color: rgba(245,240,232,0.75);
  max-width: 540px;
  margin: 0 auto 36px;
  line-height: 1.6;
}

/* Statistiques dans le héro (1h de Lyon, 3 hébergements, etc.) */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.12);
  max-width: 700px;
  margin: 0 auto;
}
.hero-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 28px;
  border-right: 1px solid rgba(255,255,255,0.12);
  min-width: 120px;
}
.hero-stat:last-child { border-right: none; }
.hero-stat-n { /* Le chiffre ou nombre */
  font-family: var(--f-display);
  font-size: 2em;
  font-weight: 400;
  color: var(--gold); /* Doré pour faire ressortir */
  line-height: 1.1;
}
.hero-stat-l { /* Le label sous le chiffre */
  font-size: 0.67em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.5);
  margin-top: 2px;
  text-align: center;
}

/* ── SECTION ÉTHIQUES PERMACULTURE ─────────────────────────
   Bandeau sombre avec les 3 éthiques. */
.ethiques-band { background: var(--b-deep); padding: 24px 32px 28px; } /* Fond brun foncé */
.ethiques { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.ethique {
  text-align: center;
  padding: 16px 24px;
  border-right: 1px solid rgba(255,255,255,0.09); /* Séparateur vertical */
}
.ethique:last-child { border-right: none; }
.ethique-icon { font-size: 1.6em; margin-bottom: 8px; }
.ethique h3 { font-size: 1em; color: var(--gold); margin-bottom: 5px; font-weight: 500; }
.ethique p  { font-size: 0.83em; color: rgba(245,240,232,0.75); line-height: 1.6; margin: 0; }
@media(max-width:600px) {
  .ethiques { grid-template-columns: 1fr; }
  .ethique  { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); }
}

/* ── SECTION ACTIVITÉS (6 CARTES) ──────────────────────────
   Grille de 6 façons de venir à l'Oasis. */
.activities {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(270px,1fr));
  gap: 1px;
  background: var(--rule); /* Couleur de la grille elle-même */
  border: 1px solid var(--rule);
}
.activity-card {
  background: var(--bg-light);
  padding: 36px 30px;
  display: flex; flex-direction: column;
  transition: background 0.2s;
  position: relative; overflow: hidden;
}
/* Bande colorée à gauche de chaque carte */
.activity-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; transition: width 0.2s;
}
.activity-card:hover { background: var(--bg); }
.activity-card:hover::before { width: 6px; } /* S'élargit au survol */

/* Couleurs des bandes par numéro de carte (1 à 6) */
.activity-card:nth-child(1)::before { background: var(--gold); }
.activity-card:nth-child(2)::before { background: var(--g-mid); }
.activity-card:nth-child(3)::before { background: var(--g-dark); }
.activity-card:nth-child(4)::before { background: var(--b-bark); }
.activity-card:nth-child(5)::before { background: var(--g-sage); }
.activity-card:nth-child(6)::before { background: var(--b-deep); }

/* Couleurs des labels CAPS par carte */
.activity-card:nth-child(1) .caps { color: var(--gold); }
.activity-card:nth-child(2) .caps { color: var(--g-mid); }
.activity-card:nth-child(3) .caps { color: var(--g-dark); }
.activity-card:nth-child(4) .caps { color: var(--b-bark); }
.activity-card:nth-child(5) .caps { color: var(--g-sage); }
.activity-card:nth-child(6) .caps { color: var(--b-deep); }

/* Numérotation décorative en arrière-plan */
.activity-num {
  font-family: var(--f-display);
  font-size: 3.5em; font-weight: 300;
  line-height: 1; margin-bottom: 16px;
  user-select: none; /* Non sélectionnable */
}
.activity-card:nth-child(1) .activity-num { color: rgba(191,154,85,0.12); }
.activity-card:nth-child(2) .activity-num { color: rgba(74,114,48,0.10); }
.activity-card:nth-child(3) .activity-num { color: rgba(43,71,32,0.10); }
.activity-card:nth-child(4) .activity-num { color: rgba(110,78,42,0.12); }
.activity-card:nth-child(5) .activity-num { color: rgba(91,123,62,0.12); }
.activity-card:nth-child(6) .activity-num { color: rgba(50,40,80,0.10); }

.activity-card .caps { margin-bottom: 8px; display: block; }
.activity-card h3 { font-size: 1.25em; margin-bottom: 12px; font-weight: 500; }
.activity-card p  { font-size: 0.88em; color: var(--ink-mid); flex: 1; margin-bottom: 20px; line-height: 1.7; }

/* ── REVUE DE PRESSE ─────────────────────────────────────── */
.press-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 20px; }
.press-card {
  background: var(--bg-light);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold); /* Barre dorée en haut */
  padding: 22px 22px 20px;
  transition: box-shadow 0.2s;
}
.press-card:hover { box-shadow: var(--sh-md); }
.press-meta { font-size: 0.72em; color: var(--ink-lt); margin-bottom: 8px; letter-spacing: 0.04em; }
.press-card h4 { font-size: 1em; font-weight: 500; margin-bottom: 8px; line-height: 1.4; }
.press-card p  { font-size: 0.85em; color: var(--ink-mid); margin: 0; line-height: 1.6; }

@media(max-width:760px) {
  .hero-stat { padding: 8px 18px; }
}

/* ── NEWSLETTER INFOMANIAK ──────────────────────────────────
   Surcharge des styles du widget newsletter Infomaniak
   pour s'harmoniser avec le design du site. */
.newsletter-band { background: var(--g-dark); padding: 56px 32px; text-align: center; }
.newsletter-band h2 { color: var(--bg); font-size: 1.9em; font-weight: 400; margin-bottom: 10px; }
.newsletter-band p  { color: rgba(245,240,232,0.82); font-style: italic; margin-bottom: 24px; }

/* Rhabillage du formulaire Infomaniak dans le contexte du site */
.newsletter-band .inf-main_bb96ed5b7ab8c67d0941d632bbba2683 {
  background: rgba(255,255,255,0.06) !important; /* Fond légèrement translucide */
  max-width: 500px;
  margin: 0 auto !important;
  padding: 28px 24px !important;
}
.newsletter-band .inf-main_bb96ed5b7ab8c67d0941d632bbba2683 h4 { display: none; } /* Masquer le titre doublon */
.newsletter-band .inf-main_bb96ed5b7ab8c67d0941d632bbba2683 span,
.newsletter-band .inf-main_bb96ed5b7ab8c67d0941d632bbba2683 .inf-rgpd {
  color: rgba(245,240,232,0.65) !important;
  font-size: 0.82em !important;
}
.newsletter-band .inf-main_bb96ed5b7ab8c67d0941d632bbba2683 input[type=email] {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(245,240,232,0.2) !important;
  color: var(--bg) !important;
  font-family: var(--f-body) !important;
  font-size: 0.9em !important;
  border-radius: 0 !important;
}
.newsletter-band .inf-main_bb96ed5b7ab8c67d0941d632bbba2683 .inf-submit input {
  background-color: var(--gold) !important; /* Bouton doré */
  color: var(--bg-light) !important;
  font-family: var(--f-body) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.8em !important;
  padding: 10px 24px !important;
  border-radius: 0 !important;
}

/* ── RESPONSIVE GLOBAL ──────────────────────────────────────
   Adaptations pour les petits écrans (mobiles, tablettes).
   Les règles ci-dessous s'appliquent UNIQUEMENT quand la
   largeur d'écran est inférieure au seuil indiqué. */

/* Tablettes et mobiles larges (< 768px) */
@media(max-width: 768px) {
  /* Menu hamburger visible, liste cachée */
  .nav-hamburger { display: flex; }
  .nav-links {
    display: none; /* Caché par défaut sur mobile */
    flex-direction: column;
    position: absolute; top: 60px; left: 0; right: 0;
    background: var(--g-dark);
    padding: 16px 0;
    z-index: 99;
  }
  /* Afficher le menu quand la case hamburger est cochée */
  #nav-toggle:checked ~ nav .nav-links { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links li a { padding: 14px 32px; font-size: 0.9em; }
  .dropdown-menu { position: static; border-top: none; box-shadow: none; background: rgba(255,255,255,0.05); }
  .nav-dropdown:hover .dropdown-menu { display: none; }
  #nav-toggle:checked ~ nav .nav-dropdown .dropdown-menu { display: block; }
}

/* Mobiles (< 480px) */
@media(max-width: 480px) {
  .page-header { padding: 36px 20px 28px; }
  .section { padding: 48px 20px; }
  .container, .container--wide, .container--narrow { padding: 0 20px; }
  .hero { padding: 72px 20px 64px; }
  .hero-stats { flex-direction: column; }
  .hero-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .hero-stat:last-child { border-bottom: none; }
}

/* ═══════════════════════════════════════════════════════════
   CLASSES COMPLÉMENTAIRES — Utilitaires et variantes
   ════════════════════════════════════════════════════════ */

/* ── BADGES ─────────────────────────────────────────────────
   Petites pastilles de statut (ex: "Disponible", "Bientôt") */
.badge {
  display: inline-block; font-family: var(--f-body);
  font-size: 0.65em; font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 10px;
}
.badge--available { background: var(--g-mint);  color: var(--g-dark); }
.badge--soon      { background: #FEF3C7;         color: #92400E; }
.badge--wip       { background: var(--parch);    color: var(--b-bark); }

/* ── TAGS COLORÉS ─────────────────────────────────────────── */
.tag--filled { background: var(--g-dark);  color: var(--bg-light); border-color: var(--g-dark); }
.tag--free   { background: var(--g-sage);  color: #fff;            border-color: var(--g-sage); }
.tag--gold   { color: var(--b-clay);       border-color: rgba(191,154,85,0.5); }

/* ── BOUTON CONTOUR BRUN ──────────────────────────────────── */
.btn-outline { background: transparent; color: var(--b-bark); border: 1px solid var(--b-bark); }
.btn-outline:hover { background: var(--b-bark); color: var(--bg-light); }

/* ── CALLOUTS SUPPLÉMENTAIRES ─────────────────────────────── */
.callout--dark { background: var(--g-dark); color: var(--bg); border-left-color: var(--g-fern); }
.callout--gold { border-left-color: var(--gold); }

/* ── SECTIONS SUPPLÉMENTAIRES ─────────────────────────────── */
.section--alt   { background: var(--g-mint); }   /* Fond vert menthe */
.section--earth { background: var(--b-deep); }   /* Fond brun foncé */
.section--sm    { padding: 56px 0; }              /* Section moins haute */

/* ── PLACEHOLDER PHOTO ─────────────────────────────────────
   Bloc gris affiché quand une photo n'est pas encore disponible */
.photo-placeholder {
  background: linear-gradient(135deg, var(--parch), var(--g-mint));
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
  color: var(--ink-lt); font-family: var(--f-body);
  font-size: 0.72em; letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center; padding: 24px;
  border: 1px dashed var(--g-lichen);
}
.photo-placeholder span { display: block; font-size: 2em; opacity: 0.3; }

/* ── PAGES LÉGALES (CGV, MENTIONS LÉGALES) ──────────────────
   Styles spécifiques aux pages de contenu juridique */
.legal-section { margin-bottom: 40px; }
.legal-section h2 {
  font-family: var(--f-body); font-size: 1.02em; font-weight: 500;
  color: var(--g-dark); margin-bottom: 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--rule);
  scroll-margin-top: 74px; /* espace pour que le titre ne soit pas caché sous la nav */
}
.legal-section p, .legal-section li { font-size: 0.92em; color: var(--ink); line-height: 1.8; }
.legal-section ul { list-style: disc; padding-left: 22px; margin-top: 8px; }
.legal-section ul li { margin-bottom: 5px; }
.legal-tarif {
  background: var(--bg-light); padding: 14px 18px; margin: 12px 0;
  font-size: 0.88em; color: var(--ink); border-left: 2px solid var(--gold);
}

/* ── BADGES D'INTENSITÉ ────────────────────────────────────
   Petites pastilles colorées pour indiquer un niveau */
.int-badge {
  font-size: 0.65em; padding: 2px 8px; border-radius: 2px;
  letter-spacing: 0.05em; font-family: var(--f-body); font-weight: 400;
}