/* ==========================================================================
   JURA CABANA - Styles CSS Modernes et Responsive
   ========================================================================== */

/* Police artisanale pour la navigation - Permanent Marker (style marqueur, dense) */
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

/* Police pour les icônes mains et titres - Cabin Sketch Regular et Bold (style croquis) */
@import url('https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@400;700&display=swap');

/* Police script élégante pour les labels Contact - Brotherhood Script (téléchargée depuis DaFont) */
@font-face {
  font-family: 'Brotherhood Script';
  src: url('../fonts/Brotherhood-Script.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Police élégante pour l'intro Contact - Athena of the Ocean (téléchargée depuis DaFont) */
@font-face {
  font-family: 'Athena of the Ocean';
  src: url('../fonts/Athena-of-the-Ocean.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. CSS Reset / Normalize
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

/* --------------------------------------------------------------------------
   2. CSS Variables
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs - Palette rustique/naturelle */
  --color-primary: #3A2A1C;          /* Brun chaud foncé (plus foncé pour contraste) */
  --color-secondary: #6D5B4D;        /* Brun moyen */
  --color-background: #A08060;       /* Fond bois */
  --color-text: #1a1a1a;             /* Texte noir pour meilleur contraste */
  --color-text-light: #F5F0E8;       /* Texte clair crème */
  --color-link: #3A2A1C;             /* Liens brun foncé */
  --color-link-hover: #8B3A3A;       /* Bordeaux/brun-rouge au survol */
  --color-accent-blue: #6B8E9B;      /* Bleu gris (bois scolyte) */
  --color-accent-green: #4A7C59;     /* Vert forêt/mousse */

  /* Couleurs additionnelles rustiques */
  --color-cream: #F5EDE0;            /* Crème/parchemin */
  --color-wood-light: #D4C4A8;       /* Bois clair */
  --color-wood-medium: #B8A07A;      /* Bois moyen */
  --color-bark: #5C4A3A;             /* Écorce */

  /* Typographie */
  --font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.5rem;    /* 24px */
  --font-size-2xl: 2rem;     /* 32px */

  /* Espacement */
  --spacing-xs: 0.5rem;      /* 8px */
  --spacing-sm: 1rem;        /* 16px */
  --spacing-md: 1.5rem;      /* 24px */
  --spacing-lg: 2rem;        /* 32px */
  --spacing-xl: 3rem;        /* 48px */

  /* Layout - Simplifié et mobile-first */
  --content-width-mobile: 90%;
  --content-width-tablet: 85%;
  --content-width-desktop: min(700px, 55vw);
  --max-content-width: 800px;
  --border-radius: 4px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
}

/* --------------------------------------------------------------------------
   3. Base Typography
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background-color: var(--color-background);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-base); }

p {
  margin-bottom: var(--spacing-sm);
}

a {
  color: var(--color-link);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover);
}

/* --------------------------------------------------------------------------
   4. Background - Porte en bois FIXE (Mobile-first)
   Compatible iOS Safari, Android Chrome et tous navigateurs
   -------------------------------------------------------------------------- */
body {
  /* Fond de secours */
  background-color: var(--color-background);
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height pour mobile */
  position: relative;
  /* Empêche le rebond sur iOS */
  overscroll-behavior: none;
}

/* Pseudo-élément pour le background fixe - compatible iOS/Android */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100dvh; /* Dynamic viewport pour mobile */
  z-index: -1;
  /* Mobile : image de la porte */
  background-image: url('../pics/IMG_7774-mobile.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-color: var(--color-background);
  /* Performance : évite les repaints */
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Fallback pour iOS Safari qui a des problèmes avec fixed + background */
@supports (-webkit-touch-callout: none) {
  body::before {
    position: fixed;
    /* Force GPU acceleration sur iOS */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

/* Desktop : image complète de la porte avec background fixe */
@media (orientation: landscape) {
  body::before {
    background-image: url('../pics/IMG_7774-desktop.png');
    background-size: cover;
    background-position: center top;
  }
}

/* Tablettes en mode portrait - garder image mobile */
@media (min-width: 768px) and (orientation: portrait) {
  body::before {
    background-image: url('../pics/IMG_7774-mobile.png');
    background-size: cover;
  }
}

/* Très grands écrans - assurer que l'image couvre bien */
@media (min-width: 1600px) {
  body::before {
    background-size: 100% auto;
  }
}

/* --------------------------------------------------------------------------
   5. Layout - Page Container (Mobile-first)
   -------------------------------------------------------------------------- */
.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: var(--content-width-mobile);
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: var(--spacing-sm);
}

@media (min-width: 768px) {
  .page-container {
    width: var(--content-width-tablet);
    padding: var(--spacing-md);
  }
}

@media (min-width: 1024px) {
  .page-container {
    width: var(--content-width-desktop);
  }
}

/* --------------------------------------------------------------------------
   6. Header Sticky (Mobile-first)
   -------------------------------------------------------------------------- */
.header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  /* Mobile (portrait) : hauteur réduite */
  padding: 1rem 2rem;
  margin-bottom: var(--spacing-md);
  /*
   * Header sticky - reste visible en haut de l'écran
   * Sortir du conteneur parent pour centrer sur toute la page
   */
  position: fixed;
  top: var(--spacing-sm);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  /*
   * Header avec image d'arrière-plan
   */
  background: url('../pics/zone1-Onglets.png') no-repeat center center;
  background-size: 100% 100%;
  width: auto;
  max-width: 95vw;
  border-radius: var(--border-radius);
  /* Pas d'ombre pour header transparent */
  box-shadow: none;
  /* Transition pour l'effet hide/show */
  transition: transform var(--transition-base), opacity var(--transition-base), box-shadow var(--transition-base);
}

/* Header caché lors du scroll vers le bas */
.header.header--hidden {
  transform: translateX(-50%) translateY(-120%);
  opacity: 0;
  pointer-events: none;
}

/* Header visible au scroll - garde le même arrière-plan */
.header.header--scrolled {
  /* Garde le même arrière-plan que l'état initial */
  box-shadow: none;
}

/* Animation douce pour apparition/disparition */
.header.header--visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

@media (orientation: landscape) {
  .header {
    flex-wrap: nowrap;
    gap: var(--spacing-lg);
    padding: 1.2rem 3rem;
    width: auto;
    max-width: none;
    top: var(--spacing-sm);
  }
}

@media (min-width: 1024px) {
  .header {
    width: auto;
    max-width: none;
    padding: 1.5rem 4rem;
  }
}

@media (min-width: 1400px) {
  .header {
    width: auto;
    max-width: none;
    padding: 1.5rem 5rem;
  }
}

.logo {
  display: block;
  /* Mobile (portrait) : logo réduit /2 */
  max-width: 421px;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}

@media (orientation: landscape) {
  .logo {
    max-width: 842px;
  }
}

.logo:hover {
  opacity: 0.8;
}

.logo img {
  width: 100%;
  height: auto;
  /* Fusionne le fond blanc du PNG avec le fond du header */
  mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   7. Navigation principale
   -------------------------------------------------------------------------- */
.main-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.nav-menu {
  display: flex;
  gap: var(--spacing-xs);
}

.nav-link {
  display: block;
  padding: 0.25rem 0.6rem;
  font-family: 'Cabin Sketch', cursive;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 1.9rem);
  color: #1a1a1a;
  white-space: nowrap;
  transition: all var(--transition-fast);
  /* Ombre portée prononcée côté droit et bas */
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-link-hover);
  transform: scale(1.05);
  /* Légère ombre pour effet "gravé" */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Bouton hamburger (mobile) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;  /* Pas de fond */
  border: none;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 100%;
  height: 3px;
  background: #1a1a1a;  /* Noir comme les liens */
  border-radius: 2px;
  transition: all var(--transition-fast);
}

/* Animation du hamburger ouvert */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* --------------------------------------------------------------------------
   8. Fil d'Ariane (Breadcrumb)
   -------------------------------------------------------------------------- */
.sub-nav {
  margin-bottom: var(--spacing-sm);
}

.sub-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(212, 196, 168, 0.6);   /* Bois clair */
  border-radius: var(--border-radius);
  font-size: var(--font-size-xs);
  border: 1px solid rgba(92, 74, 58, 0.15);
}

.sub-nav-list li {
  display: flex;
  align-items: center;
}

.sub-nav-list li:not(:last-child)::after {
  content: '|';
  margin-left: var(--spacing-sm);
  color: var(--color-secondary);
}

.sub-nav-current {
  font-weight: bold;
  color: var(--color-primary);
}

.sub-nav-list a:hover {
  text-decoration: underline;
}

.breadcrumb {
  padding: var(--spacing-xs) var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  border: 1px solid rgba(92, 74, 58, 0.15);
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb-list li {
  display: inline-flex;
  align-items: center;
}

.breadcrumb-list li:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: var(--spacing-xs);
  border-right: 2px solid var(--color-secondary);
  border-top: 2px solid var(--color-secondary);
  transform: rotate(45deg);
  opacity: 0.6;
}

.breadcrumb-list a {
  color: var(--color-secondary);
  transition: color var(--transition-fast);
}

.breadcrumb-list a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

.breadcrumb-list .breadcrumb-current {
  color: var(--color-primary);
  font-weight: 600;
}

/* Icône maison pour le premier élément */
.breadcrumb-home {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.breadcrumb-home .material-icons-outlined {
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   9. Contenu principal
   -------------------------------------------------------------------------- */
.content {
  flex: 1;
  padding: var(--spacing-md);
  padding-top: 18rem; /* Espace pour le header fixe */
  background: transparent;
}

/* Conteneur avec fond semi-transparent pour meilleure lisibilité */
.content-wrapper {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

@media (max-width: 767px) {
  .content {
    padding: var(--spacing-sm);
    padding-top: 80px; /* Espace pour le header/logo sur mobile */
  }
}

.content-section {
  margin-bottom: var(--spacing-lg);
}

.content-section:last-child {
  margin-bottom: 0;
}

/* Mise en valeur / Citation */
.highlight {
  padding: var(--spacing-md);
  margin: var(--spacing-md) 0;
  background: rgba(255, 255, 255, 0.6);
  border-left: 4px solid var(--color-accent-green);
  border-radius: 8px;
  font-size: var(--font-size-lg);
  text-align: center;
}

.highlight p {
  font-family: var(--font-body);
  color: var(--color-bark);
}

.highlight p.highlight--sketch {
  font-family: 'Permanent Marker', cursive;
}

.highlight strong {
  color: var(--color-primary);
}

/* Navigation de contenu (liens suivant/precedent) */
.content-nav {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(92, 74, 58, 0.2);
}

.content-nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bark);
  color: var(--color-cream);
  border-radius: var(--border-radius);
  font-weight: bold;
  transition: all var(--transition-fast);
}

.content-nav-link:hover {
  background: var(--color-accent-green);
  color: var(--color-text-light);
  transform: translateX(4px);
}

.content-nav-link--prev {
  background: var(--color-secondary);
}

.content-nav-link--prev:hover {
  background: var(--color-link-hover);
  transform: translateX(-4px);
}

.content-nav:has(.content-nav-link--prev) {
  justify-content: space-between;
}

/* Grille de contenu */
.content-grid {
  display: grid;
  gap: var(--spacing-md);
}

.content-grid--2cols {
  grid-template-columns: repeat(2, 1fr);
}

.content-grid--3cols {
  grid-template-columns: repeat(3, 1fr);
}

/* --------------------------------------------------------------------------
   10. Cartes / Blocs
   -------------------------------------------------------------------------- */
.card {
  padding: var(--spacing-md);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
}

.card-title {
  font-family: 'Cabin Sketch', cursive;
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  margin-bottom: var(--spacing-sm);
  color: var(--color-primary);
}

.card-text {
  color: var(--color-text);
}

.card-list {
  list-style: disc;
  padding-left: var(--spacing-md);
  color: var(--color-text);
}

.card-list li {
  margin-bottom: var(--spacing-xs);
}

.card--negative {
  border-left: 4px solid var(--color-accent-blue);
  background: rgba(107, 142, 155, 0.15);  /* Bleu gris léger */
}

.card--positive {
  border-left: 4px solid var(--color-accent-green);
  background: rgba(74, 124, 89, 0.15);    /* Vert forêt léger */
}

.card-title--blue {
  color: var(--color-accent-blue);
}

.card-title--green {
  color: var(--color-accent-green);
}

/* Introduction */
.intro {
  font-size: var(--font-size-lg);
  font-weight: 500;
  margin-bottom: var(--spacing-md);
}

/* Card link (clickable cards) */
.card--link {
  display: block;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.card--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card--link:hover .card-title {
  color: var(--color-link-hover);
}

/* Contact styles */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  max-width: 500px;
  margin: var(--spacing-lg) auto;
}

.contact-item {
  padding: var(--spacing-md);
  background: rgba(245, 237, 224, 0.6);   /* Crème transparent */
  border-radius: var(--border-radius);
  border: 1px solid rgba(92, 74, 58, 0.15);
}

.contact-item h2 {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-xs);
  color: var(--color-bark);
}

.email-link {
  font-size: var(--font-size-lg);
  font-weight: bold;
  color: var(--color-primary);
}

.email-link:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Formulaire de contact
   -------------------------------------------------------------------------- */
.contact-form {
  max-width: 600px;
  margin: var(--spacing-lg) auto;
  padding: var(--spacing-lg);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(92, 74, 58, 0.15);
}

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: bold;
  color: var(--color-bark);
  font-size: var(--font-size-sm);
}

.form-label .required {
  color: #c0392b;
  margin-left: 2px;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: var(--spacing-sm);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--color-wood-light);
  border-radius: var(--border-radius);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-accent-green);
  box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.2);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-secondary);
  opacity: 0.7;
}

.form-textarea {
  min-height: 150px;
  resize: vertical;
}

.form-input.error,
.form-textarea.error,
.form-select.error {
  border-color: #c0392b;
}

.form-error {
  display: none;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: #c0392b;
}

.form-group.has-error .form-error {
  display: block;
}

.form-row {
  display: grid;
  gap: var(--spacing-md);
}

@media (min-width: 480px) {
  .form-row--2cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  font-family: 'Cabin Sketch', cursive;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-cream);
  background: var(--color-bark);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.form-submit:hover {
  background: var(--color-accent-green);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(74, 124, 89, 0.3);
}

.form-submit:active {
  transform: translateY(0);
}

.form-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.form-success {
  display: none;
  padding: var(--spacing-md);
  background: rgba(74, 124, 89, 0.15);
  border: 2px solid var(--color-accent-green);
  border-radius: var(--border-radius);
  text-align: center;
  color: var(--color-accent-green);
}

.form-success.show {
  display: block;
}

/* Note sous le bouton */
.form-note {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  text-align: center;
  font-style: italic;
}

/* Optionnel indicator */
.form-optional {
  font-weight: normal;
  font-size: var(--font-size-xs);
  color: var(--color-secondary);
  margin-left: var(--spacing-xs);
}

/* Legal styles - Cadre blanc comme les autres sections */
.legal-section {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: none;
}

.legal-section:last-child {
  margin-bottom: 0;
}

.legal-section h2 {
  font-family: 'Cabin Sketch', cursive;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  color: var(--color-bark);
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.legal-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-xs) var(--spacing-md);
}

.legal-list dt {
  font-weight: bold;
  color: var(--color-bark);
}

.legal-list dd {
  margin: 0;
}

/* Notice / Info text */
.notice {
  padding: var(--spacing-sm);
  background: rgba(92, 74, 58, 0.1);
  border-radius: var(--border-radius);
  text-align: center;
  color: var(--color-bark);
}

/* Coming Soon - Page en construction élégante */
.coming-soon {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-md);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--border-radius);
  max-width: 500px;
  margin: var(--spacing-lg) auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.coming-soon-icon {
  font-size: 4rem;
  color: var(--color-accent-green);
  margin-bottom: var(--spacing-md);
}

.coming-soon h2 {
  font-family: 'Cabin Sketch', cursive;
  font-size: var(--font-size-xl);
  color: var(--color-bark);
  margin-bottom: var(--spacing-sm);
}

.coming-soon p {
  color: var(--color-secondary);
  margin-bottom: var(--spacing-md);
}

.coming-soon-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--color-bark);
  color: var(--color-cream);
  border-radius: var(--border-radius);
  font-weight: bold;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.coming-soon-cta:hover {
  background: var(--color-accent-green);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(74, 124, 89, 0.3);
}

/* Download section */
.download-section {
  margin: var(--spacing-xl) 0;
}

.download-button {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-xl);
  background: var(--color-bark);
  color: var(--color-cream);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius);
  font-size: var(--font-size-lg);
  font-weight: bold;
  transition: all var(--transition-fast);
}

.download-button:hover {
  background: var(--color-accent-green);
  color: var(--color-text-light);
  border-color: var(--color-accent-green);
  transform: scale(1.05);
}

/* Sitemap */
.sitemap {
  display: grid;
  gap: var(--spacing-lg);
}

.sitemap-section {
  padding: var(--spacing-md);
  background: rgba(245, 237, 224, 0.5);   /* Crème transparent */
  border-radius: var(--border-radius);
  border: 1px solid rgba(92, 74, 58, 0.15);
}

.sitemap-section h2 {
  font-size: var(--font-size-lg);
  color: var(--color-bark);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--color-wood-medium);
}

.sitemap-list {
  list-style: disc;
  padding-left: var(--spacing-md);
}

.sitemap-list li {
  margin-bottom: var(--spacing-xs);
}

.sitemap-list ul {
  list-style: circle;
  padding-left: var(--spacing-md);
  margin-top: var(--spacing-xs);
}

.sitemap-list a:hover {
  text-decoration: underline;
}

/* Page sections (for single-page layouts with multiple sections) */
.page-section {
  background: rgba(245, 237, 224, 0.6); /* Beige clair/crème semi-transparent comme zone2-card */
  border-radius: 12px;
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
  /* Ombre portée côté droit et bas pour effet de relief */
  box-shadow: 6px 8px 20px rgba(0, 0, 0, 0.25), 3px 4px 8px rgba(0, 0, 0, 0.15);
  /* Centrage viewport comme zone2-card */
  width: 50vw;
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  scroll-margin-top: var(--spacing-md);
}

/* Page-section - Mobile */
@media (max-width: 600px) {
  .page-section {
    width: 90vw;
  }
}

.page-section:last-child {
  margin-bottom: var(--spacing-lg);
}

/* Sections côte à côte */
.sections-row {
  display: flex;
  gap: var(--spacing-lg);
  justify-content: center;
  align-items: stretch; /* Force les enfants à avoir la même hauteur */
  width: 100%;
  max-width: none;
  margin: var(--spacing-lg) 0;
}

.page-section--half {
  width: calc(25vw - var(--spacing-md));
  left: 0;
  transform: none;
  margin: 0;
  flex-shrink: 0;
  /* Hauteur égale pour les sections côte à côte */
  display: flex;
  flex-direction: column;
}

/* Contenu flexible pour remplir l'espace disponible */
.page-section--half .coming-soon {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: var(--spacing-md);
}

/* Texte identique dans les sections half */
.page-section--half .coming-soon p {
  text-align: center;
  margin-bottom: 0;
}

/* Sections côte à côte - Mobile */
@media (max-width: 900px) {
  .sections-row {
    flex-direction: column;
    align-items: center;
  }

  .page-section--half {
    width: 90vw;
  }
}

.page-section h1 {
  font-family: 'Cabin Sketch', cursive;
  font-weight: 700;
  font-size: clamp(1.7rem, 4.8vw, 2.4rem);
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  padding-bottom: 0;
  border-bottom: none;
  display: block;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* Ombre portée comme les liens de navigation */
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.page-section .intro {
  text-align: center;
  color: var(--color-bark);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-md);
}

/* Intro avec police Permanent Marker */
.page-section .intro--marker {
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  line-height: 1.5;
}

/* Labels du formulaire avec police Brotherhood Script (page Contact) */
.contact-form .form-label {
  font-family: 'Brotherhood Script', cursive;
  font-size: clamp(2.4rem, 7vw, 3rem);
  font-weight: bold;
  color: var(--color-bark);
}

/* Intro Contact avec police Athena of the Ocean - réduit de 30% */
.page-section .intro--athena {
  font-family: 'Athena of the Ocean', cursive;
  font-size: clamp(2rem, 5.5vw, 2.8rem);
  line-height: 1.4;
  color: var(--color-bark);
}

.page-section p {
  color: var(--color-text);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  font-weight: normal;
  font-style: italic;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-md);
}

/* Workflow section (ethique page) */
.workflow-section {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  border: none;
}

.workflow-section h2 {
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  color: var(--color-bark);
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.workflow-section p {
  text-align: center;
  color: var(--color-text);
}

.workflow-section strong {
  color: var(--color-primary);
}

/* Text utilities */
.text-muted {
  color: var(--color-secondary);
  font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------------
   11. Footer professionnel
   -------------------------------------------------------------------------- */
.footer {
  margin-top: auto;
  padding: var(--spacing-lg) var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  background: rgba(58, 42, 28, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--border-radius);
  margin-top: var(--spacing-lg);
}

.footer-content {
  display: grid;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

@media (min-width: 600px) {
  .footer-content {
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
  }
}

.footer-section h3 {
  font-family: 'Cabin Sketch', cursive;
  font-size: var(--font-size-base);
  color: var(--color-cream);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.footer-section p,
.footer-section li {
  margin-bottom: var(--spacing-xs);
  color: rgba(255, 255, 255, 0.85);
}

.footer-nav {
  list-style: none;
}

.footer-nav li {
  margin-bottom: var(--spacing-xs);
}

.footer-nav a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-nav a:hover {
  color: var(--color-cream);
  text-decoration: underline;
}

.footer-bottom {
  padding-top: var(--spacing-md);
  text-align: center;
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.6);
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
}

.footer-bottom a:hover {
  color: var(--color-cream);
}

/* CTA Button dans le footer */
.footer-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-accent-green);
  color: var(--color-cream);
  border-radius: var(--border-radius);
  font-weight: bold;
  text-decoration: none;
  transition: all var(--transition-fast);
  margin-top: var(--spacing-sm);
  /* Zone de touch minimum */
  min-height: 44px;
}

.footer-cta:hover {
  background: var(--color-cream);
  color: var(--color-bark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.footer-cta .material-icons-outlined {
  font-size: 1.1rem;
}

/* Footer simple (pour pages légères) */
.footer--simple {
  text-align: center;
  padding: var(--spacing-xs) var(--spacing-md);
}

.footer--simple .footer-bottom {
  padding-top: 0;
}

.footer--simple p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   12. Utilitaires
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

/* --------------------------------------------------------------------------
   13. Page d'accueil / Index (Splash)
   -------------------------------------------------------------------------- */
.splash-page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*
   * Hauteur = minimum entre viewport et hauteur de l'image (la porte)
   * Hauteur image = 100vw * (1853/1512) ≈ 122.5vw
   */
  height: min(100vh, 122.5vw);
  overflow: hidden;  /* Empêche le scroll */
  text-align: center;
  /*
   * Le linteau est à ~7vw du haut.
   * padding-top décale le centre vers le bas pour compenser le linteau
   */
  padding-top: 7vw;
  padding-bottom: 0;
  box-sizing: border-box;
}

.splash-logo {
  /*
   * Mobile first (portrait) : 85vw
   * Desktop (paysage, aspect-ratio > 1) : 50vw
   * Aligné avec le changement d'arrière-plan
   */
  width: 85vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  text-decoration: none;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

@media (orientation: landscape) {
  .splash-logo {
    width: 50vw;
  }
}

.splash-logo:hover {
  transform: scale(1.03);
  opacity: 0.9;
}

.splash-logo img {
  width: 100%;
  height: auto;
}

.splash-enter {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-lg);
  font-weight: bold;
  color: var(--color-text);
  background: rgba(245, 237, 224, 0.9);   /* Crème */
  border: 2px solid var(--color-bark);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.splash-enter:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: var(--color-link-hover);
  background: rgba(245, 237, 224, 1);
}

/* --------------------------------------------------------------------------
   14. Media Queries - Responsive
   -------------------------------------------------------------------------- */

/*
 * Seuil du menu hamburger : 600px
 * Avec seulement 3 menus (Accueil, Créations, Contact), on peut
 * afficher le menu horizontal jusqu'à des écrans plus petits.
 * En dessous de 600px, le menu hamburger fixe prend le relais.
 */
/* Menu hamburger sur mobile (< 768px) */
@media (max-width: 767px) {
  .nav-toggle {
    display: flex;
    /* Position fixe par rapport à l'écran, collé au bord droit */
    position: fixed;
    top: var(--spacing-sm);
    right: 4px; /* Collé au bord droit de l'écran */
    transform: none;
    z-index: 1001;
    background: rgba(245, 237, 224, 0.95);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    /* Zone de touch minimum 44px */
    min-width: 44px;
    min-height: 44px;
  }

  /* Overlay clair derrière le menu */
  .main-nav::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(245, 237, 224, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    z-index: -1;
  }

  .main-nav.is-open::before {
    opacity: 1;
    visibility: visible;
  }

  .main-nav {
    position: fixed;
    top: 80px;
    right: var(--spacing-sm);
    left: var(--spacing-sm);
    width: auto;
    max-width: 320px;
    margin: 0 auto;
    flex-direction: column;
    /* Fond crème/beige clair aux couleurs du site - IMPORTANT pour override */
    background: var(--color-cream) !important;
    background-color: #F5EDE0 !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid var(--color-wood-medium);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    padding: var(--spacing-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px) scale(0.95);
    transition: all var(--transition-base) cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
  }

  .main-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }

  .nav-menu {
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-xs);
  }

  .nav-link {
    display: block;
    width: 100%;
    text-align: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1.2rem;
    border-radius: var(--border-radius);
    transition: background var(--transition-fast), transform var(--transition-fast);
    /* Zone de touch minimum 44px */
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-link:hover {
    background: rgba(92, 74, 58, 0.15);
    transform: translateX(4px);
  }

  .nav-link.active {
    background: rgba(74, 124, 89, 0.2);
    color: var(--color-accent-green);
  }

  /* Animation des liens au clic */
  .nav-link:active {
    transform: scale(0.98);
  }

  /* Grilles responsive sur mobile */
  .content-grid--2cols,
  .content-grid--3cols {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  /* Logo plus petit sur mobile */
  .logo {
    max-width: 180px;
  }
}

/* Tablettes (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .content-grid--3cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Petits mobiles (< 480px) */
@media (max-width: 479px) {
  .logo {
    max-width: 150px;
  }

  .breadcrumb {
    font-size: 0.7rem;
    padding: var(--spacing-xs);
  }

  .breadcrumb-home .material-icons-outlined {
    font-size: 0.85rem;
  }

  .splash-enter {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
  }

  /* CTA plus petits sur mobile */
  .cta-button {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    min-width: 140px;
  }

  .cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-group .cta-button {
    width: 100%;
  }

  /* Section CTA plus compacte */
  .cta-section {
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
  }

  .cta-section h3 {
    font-size: var(--font-size-lg);
  }

  /* Cards plus compactes */
  .card {
    padding: var(--spacing-sm);
  }

  .card-title {
    font-size: var(--font-size-base);
  }

  /* Coming soon plus compact */
  .coming-soon {
    padding: var(--spacing-md);
  }

  .coming-soon-icon {
    font-size: 3rem;
  }

  /* Zone2 card sur petits ecrans */
  .zone2-card {
    width: 95vw;
    padding: var(--spacing-sm);
  }

  .zone2-card .card-content p {
    font-size: var(--font-size-base);
  }

  .zone2-card .card-subtitle {
    font-size: 1.1rem;
  }

  /* Highlight plus compact */
  .highlight {
    padding: var(--spacing-sm);
    font-size: var(--font-size-base);
  }

  /* Footer sur petits ecrans */
  .footer {
    padding: var(--spacing-md) var(--spacing-sm);
  }

  .footer-content {
    gap: var(--spacing-md);
  }

  .footer-section h3 {
    font-size: var(--font-size-sm);
  }

  /* Formulaire sur petits ecrans */
  .contact-form {
    padding: var(--spacing-md);
  }

  .form-row--2cols {
    grid-template-columns: 1fr;
  }
}

/* Grands écrans (1200px et plus) */
@media (min-width: 1200px) {
  .page-container {
    /* Sur grands écrans, on garde ~55% de la largeur pour rester dans la porte */
    max-width: min(55vw, 900px);
    padding: 0 var(--spacing-md) var(--spacing-md);
  }
}

/* Très grands écrans (1600px et plus) */
@media (min-width: 1600px) {
  .page-container {
    /* On peut être légèrement plus large sur très grands écrans */
    max-width: min(50vw, 950px);
  }
}

/* --------------------------------------------------------------------------
   15. Cadre "Qui sommes-nous" (page accueil)
   -------------------------------------------------------------------------- */

/* Le bloc "Qui sommes-nous" utilise les classes zone2-*
   pour reproduire dynamiquement le cadre de l'exemple_cadre.png. */

/* Panneau semi-transparent posé sur le fond bois */
.zone2-card {
  background: rgba(245, 237, 224, 0.6); /* Beige clair/crème semi-transparent */
  border-radius: 12px;
  padding: var(--spacing-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: none;
  /* Sortir du conteneur parent pour occuper 50% du viewport, centré */
  width: 50vw;
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: var(--spacing-lg) 0;
}

/* En-tête avec mains et titre */
.zone2-card .card-header {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  margin-bottom: 0;
}

.zone2-card .card-icon {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  color: var(--color-primary);
}

.zone2-card .card-title {
  font-family: 'Cabin Sketch', cursive;
  font-weight: 700;
  font-size: clamp(1.7rem, 4.8vw, 2.4rem);
  letter-spacing: 0.02em;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-primary);
  /* Ombre portée comme les titres page-section */
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.zone2-frame-top {
  display: block;
  text-align: center;
  margin-bottom: 0;
}

.zone2-frame-line {
  display: none;  /* Supprimé pour intégration dans le bois */
}

.zone2-frame-slot {
  width: clamp(8rem, 25vw, 14rem);
  height: 0;
}

.zone2-body {
  border: none;  /* Supprimé pour intégration dans le bois */
  padding: var(--spacing-sm) 0 var(--spacing-md);
  margin-top: 0;
  position: relative;
}

.zone2-frame {
  margin-top: 0;
}

/* Contenu interne : texte + carte */
.zone2-content {
  position: relative;
}

@media (min-width: 768px) {
  .zone2-content {
    display: block;
    padding-right: 0; /* Le texte utilise toute la largeur */
  }
}

.zone2-card .card-content p {
  font-family: var(--font-family);
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  line-height: 1.75;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
}

.zone2-card .card-content p:last-child {
  margin-bottom: 0;
}

.zone2-card .card-content strong {
  color: var(--color-primary);
}

.zone2-card .card-subtitle {
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
  font-weight: normal;
  color: var(--color-bark);
}

/* Carte de France */
.zone2-map {
  text-align: center;
  margin-top: var(--spacing-md);
}

.zone2-map img {
  max-width: 140px;
  height: auto;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .zone2-map {
    float: right;
    margin: 0 0 var(--spacing-sm) var(--spacing-md);
    text-align: right;
  }

  .zone2-map img {
    max-width: 160px;
  }
}

/* Ligne inférieure + phrase avec flèches */
.zone2-footer {
  margin-top: var(--spacing-md);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  position: relative;  /* Changé de absolute à relative */
}

.zone2-bottom-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: var(--spacing-xs) 0;
  background: transparent;  /* Supprimé le fond blanc */
}

.zone2-bottom-text {
  font-family: 'Cabin Sketch', cursive;
  font-weight: 700;
  font-size: calc(var(--font-size-sm) * 1.2);
  color: var(--color-primary);
}

.zone2-bottom-icon {
  font-size: 1.1rem;
  color: var(--color-primary);
}

/* Zone2 - Desktop / Landscape - couvre la largeur de la porte */
@media (orientation: landscape) {
  .zone2-card {
    width: 50vw;
    max-width: none;
    margin-top: var(--spacing-lg);
  }
}

/* Zone2 - Grands écrans */
@media (min-width: 1200px) {
  .zone2-card {
    width: 50vw;
    max-width: none;
  }
}

/* Zone2 - Très grands écrans */
@media (min-width: 1600px) {
  .zone2-card {
    width: 50vw;
    max-width: none;
  }
}

/* Zone2 - adaptations mobiles */
@media (max-width: 600px) {
  .zone2-card {
    width: 90vw;
    margin: var(--spacing-md) auto;
    padding: var(--spacing-md);
  }

  .zone2-body {
    padding: var(--spacing-sm) 0;
  }

  .zone2-content {
    padding-right: 0;
  }

  .zone2-map {
    float: none;
    text-align: center;
    margin: var(--spacing-md) auto;
  }

  .zone2-map img {
    max-width: 120px;
  }

  .zone2-card .card-content p {
    font-size: clamp(0.95rem, 3vw, 1.05rem);
  }
}

/* --------------------------------------------------------------------------
   16. CTA (Call-to-Action) Buttons
   -------------------------------------------------------------------------- */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-family: 'Cabin Sketch', cursive;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-cream);
  background: var(--color-accent-green);
  border: none;
  border-radius: var(--border-radius);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  /* Zone de touch minimum */
  min-height: 48px;
  min-width: 160px;
}

.cta-button:hover {
  background: var(--color-bark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(74, 124, 89, 0.3);
  color: var(--color-cream);
}

.cta-button:active {
  transform: translateY(0);
}

.cta-button--secondary {
  background: var(--color-bark);
}

.cta-button--secondary:hover {
  background: var(--color-accent-green);
}

.cta-button--outline {
  background: transparent;
  border: 2px solid var(--color-accent-green);
  color: var(--color-accent-green);
}

.cta-button--outline:hover {
  background: var(--color-accent-green);
  color: var(--color-cream);
}

/* CTA section - pour mettre en valeur les appels à l'action */
.cta-section {
  text-align: center;
  padding: var(--spacing-lg);
  margin: var(--spacing-lg) auto;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 98%;
  max-width: none;
}

.cta-section h3 {
  font-family: 'Cabin Sketch', cursive;
  font-weight: 700;
  font-size: clamp(1.7rem, 4.8vw, 2.4rem);
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* Ombre portée comme les titres page-section */
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.cta-section p {
  color: var(--color-bark);
  margin-bottom: var(--spacing-md);
  font-size: clamp(0.85rem, 2.5vw, 1rem);
}

.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
}

/* --------------------------------------------------------------------------
   17. Hover Effects & Animations
   -------------------------------------------------------------------------- */
/* Effet de survol sur les cartes */
.card--hover {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Animation d'apparition au scroll */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Pulse animation pour les CTA */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.cta-button--pulse:hover {
  animation: pulse 1s infinite;
}

/* Focus visible pour accessibilité */
:focus-visible {
  outline: 3px solid var(--color-accent-green);
  outline-offset: 2px;
}

/* Skip link pour accessibilité - caché visuellement sauf au focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 1000;
}

.skip-link:focus {
  position: fixed;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  width: auto;
  height: auto;
  overflow: visible;
  padding: var(--spacing-sm);
  background: var(--color-primary);
  color: var(--color-cream);
  border-radius: 4px;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   18. Styles d'impression
   -------------------------------------------------------------------------- */
@media print {
  body::before,
  body::after {
    display: none;
  }

  body {
    background: white;
  }

  .nav-toggle,
  .main-nav {
    display: none;
  }

  .content {
    box-shadow: none;
    background: white;
  }
}