/* ==========================================================================
   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');

/* --------------------------------------------------------------------------
   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 (Mobile-first)
   -------------------------------------------------------------------------- */
body {
  /* Fond de secours */
  background-color: var(--color-background);
  min-height: 100vh;

  /* Mobile : image complète, largeur = 100% de l'écran */
  background-image: url('../pics/IMG_7774-mobile.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  background-attachment: scroll;
}

/* Desktop : image complète de la porte
 * Utilise orientation pour détecter paysage vs portrait
 */
@media (orientation: landscape) {
  body {
    background-image:
      url('../pics/IMG_7774-desktop.png'),
      url('../pics/seuil-complet.jpg');
    background-repeat:
      no-repeat,
      repeat-y;
    background-position:
      center top,
      center 122.5vw;
    background-size:
      100% auto,
      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 (Mobile-first)
   -------------------------------------------------------------------------- */
.header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  /* Mobile (portrait) : hauteur réduite /3 */
  padding: 1rem var(--spacing-md);
  margin-bottom: var(--spacing-md);
  margin-top: 5vw;  /* Descend le cadre sur la porte */
  /*
   * Cadre blanc 30% opacité
   * Mobile : 80% de l'écran
   * Desktop : 55vw (intérieur de la porte) * 0.90 = 49.5vw
   */
  background: rgba(255, 255, 255, 0.3);
  width: 80vw;
  border-radius: var(--border-radius);
  /* Ombre portée + effet flottant */
  box-shadow:
    4px 4px 8px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(0, 0, 0, 0.1);
  /* Centrage sur mobile */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

@media (orientation: landscape) {
  .header {
    flex-wrap: nowrap;
    gap: var(--spacing-lg);
    padding: 2.9rem var(--spacing-lg);
    width: 49.5vw;
    margin-top: 1vw;  /* Plus haut sur le linteau */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

.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 nette (sans flou) */
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}

.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-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);
}

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

.breadcrumb-list li:not(:last-child)::after {
  content: '>';
  margin-left: var(--spacing-xs);
  color: var(--color-secondary);
}

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

/* --------------------------------------------------------------------------
   9. Contenu principal
   -------------------------------------------------------------------------- */
.content {
  flex: 1;
  padding: var(--spacing-md);
  padding-top: 6vw;  /* Espace pour descendre sous le linteau */
  background: transparent; /* Fond transparent */
}

.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(92, 74, 58, 0.15);    /* Écorce transparent */
  border-left: 4px solid var(--color-bark);
  border-radius: var(--border-radius);
  font-size: var(--font-size-lg);
  text-align: center;
}

/* 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(245, 237, 224, 0.85);  /* Crème semi-transparent */
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(92, 74, 58, 0.2); /* Bordure subtile écorce */
}

.card-title {
  font-size: var(--font-size-lg);
  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);
}

.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;
}

/* Legal styles */
.legal-section {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid rgba(92, 74, 58, 0.15);
}

.legal-section:last-child {
  border-bottom: none;
}

.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);      /* Écorce léger */
  border-radius: var(--border-radius);
  text-align: center;
  color: var(--color-bark);
}

/* 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 {
  padding: var(--spacing-lg) 0;
  margin-bottom: var(--spacing-lg);
  border-bottom: 2px solid rgba(92, 74, 58, 0.2);
  scroll-margin-top: var(--spacing-md);
}

.page-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.page-section h1 {
  color: var(--color-bark);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 3px solid var(--color-wood-medium);
  display: inline-block;
}

.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-lg);
  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);
}

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

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.footer {
  margin-top: auto;
  padding: var(--spacing-md) var(--spacing-sm);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  background: rgba(74, 55, 40, 0.7);      /* Brun foncé transparent */
  border-radius: var(--border-radius);
  margin-top: var(--spacing-sm);
}

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

.footer a:hover {
  color: var(--color-wood-light);
}

/* --------------------------------------------------------------------------
   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) */
/* Menu hamburger sur mobile (portrait) */
@media (orientation: portrait) {
  .nav-toggle {
    display: flex;
    position: fixed;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    z-index: 1000;
    background: rgba(245, 237, 224, 0.95);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
  }

  .main-nav {
    position: fixed;
    top: calc(var(--spacing-sm) + 54px);
    right: var(--spacing-sm);
    left: auto;
    width: 200px;
    flex-direction: column;
    background: rgba(245, 237, 224, 0.97);
    border: 1px solid rgba(92, 74, 58, 0.3);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all var(--transition-base);
    z-index: 999;
  }

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

  .nav-menu {
    flex-direction: column;
    width: 100%;
  }

  .nav-link {
    width: 100%;
    text-align: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 1.1rem;
  }

  .content-grid--2cols,
  .content-grid--3cols {
    grid-template-columns: 1fr;
  }
}

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

  .breadcrumb {
    font-size: 0.7rem;
  }

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

/* 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(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: var(--spacing-md);
  margin: var(--spacing-md) auto;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2);
  border: none;
  width: 80vw;
  max-width: 960px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* En-tête avec mains et titre */
.zone2-card .card-header {
  display: 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.6rem, 5vw, 2.6rem);
  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;
}

.zone2-card .card-title {
  font-family: 'Cabin Sketch', cursive;
  font-weight: 700;
  font-size: clamp(1.4rem, 4vw, 2rem);
  letter-spacing: 0.12em;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}

.zone2-frame-top {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: 0;
}

.zone2-frame-line {
  flex: 1;
  height: 0;
  border-bottom: 2px dashed #1a1a1a;
}

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

.zone2-body {
  border-left: 2px dashed #1a1a1a;
  border-right: 2px dashed #1a1a1a;
  border-bottom: 2px dashed #1a1a1a;
  padding: calc(var(--spacing-md) + 2px) var(--spacing-md) calc(var(--spacing-sm) + 2rem);
  margin-top: -2px;
  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: 12rem; /* réserve la zone pour la carte en bas à droite */
  }
}

.zone2-card .card-content p {
  font-family: var(--font-family);
  font-size: calc(var(--font-size-sm) * 2);
  line-height: 1.7;
  margin-bottom: var(--spacing-sm);
}

.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.4rem, 3vw, 2.2rem);
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
  font-weight: normal;
}

/* Carte de France */
.zone2-map {
  text-align: center;
}

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

@media (min-width: 768px) {
  .zone2-map {
    position: absolute;
    right: var(--spacing-md);
    bottom: 2.1rem; /* au-dessus de la phrase du bas */
  }

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

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

.zone2-bottom-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 var(--spacing-xs);
  background: rgba(255, 255, 255, 0.3);
}

.zone2-bottom-text {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: calc(var(--font-size-sm) * 1.3);
}

.zone2-bottom-icon {
  font-size: 1.2rem;
}

/* Zone2 - adaptations mobiles */
@media (max-width: 600px) {
  .zone2-card {
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-sm);
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.25);
  }

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

  .zone2-content {
    grid-template-columns: 1fr;
  }

  .zone2-map {
    margin-top: var(--spacing-md);
    justify-self: center;
    align-self: center;
  }
}

/* --------------------------------------------------------------------------
   16. 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;
  }
}