/* ============================================================
   VARIABLES — Charte graphique CDC
   ============================================================ */
:root {
  /* Couleurs */
  --color-background:           #F5F7FA;   /* CDC: fond général */
  --color-background-container: #FFFFFF;   /* CDC: fond conteneurs */
  --color-title:                #003D7A;   /* CDC: titres h1/h2/h3 */
  --color-accent:               #007AFF;   /* CDC: bleu principal (liens, boutons) */
  --color-accent-hover:         #3399FF;   /* CDC: bleu clair hover */
  --color-text-primary:         #1C1C1E;   /* CDC: texte général */
  --color-text-secondary:       #6E6E73;
  --color-border:               #CED4DA;   /* CDC: bordures */
  --color-shadow:               rgba(0, 0, 0, 0.05); /* CDC: ombres douces */

  /* Typographie */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
               'Helvetica Neue', sans-serif;

  /* Rayons */
  --radius-container: 12px;
  --radius-button:    8px;
  --radius-input:     6px;
  --radius-image:     12px;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: var(--font-main);
  font-size: 16px;                         /* CDC: taille de base */
  line-height: 1.5;                        /* CDC: interlignage */
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

/* ============================================================
   CONTENEUR PRINCIPAL
   ============================================================ */
main {
  max-width: 700px;                        /* CDC: ~700px */
  margin: 2rem auto;
  padding: 2rem;
  background-color: var(--color-background-container);
  border-radius: var(--radius-container);  /* CDC: 12px */
  box-shadow: 0 0 15px var(--color-shadow);/* CDC: ombre douce */
}

/* Conteneur élargi pour les pages avec cartes / galeries */
main.wide {
  max-width: 960px;
}

/* ============================================================
   EN-TÊTE
   ============================================================ */
header {
  padding: 1rem 2rem;
  background-color: var(--color-background-container);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

header h1 {
  font-weight: 600;
  font-size: 2.5rem;
  margin: 0;
  padding: 1rem 0;
  text-align: center;
  width: 100%;
  color: var(--color-title);              /* CDC: titres en bleu foncé */
}

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
h1, h2, h3 {
  color: var(--color-title);              /* CDC: #003D7A */
}

h2 {
  font-weight: 600;
  font-size: 2rem;
  margin-bottom: 1rem;
}

h3 {
  font-weight: 600;
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

p {
  color: var(--color-text-secondary);
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
}

/* ============================================================
   LIENS
   ============================================================ */
a {
  color: var(--color-accent);             /* CDC: #007AFF */
  text-decoration: none;
}

a:hover {
  color: var(--color-accent-hover);       /* CDC: #3399FF */
  text-decoration: underline;
}

/* ============================================================
   BOUTONS
   ============================================================ */
.button-primary {
  background-color: var(--color-accent);  /* CDC: #007AFF */
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-button);    /* CDC: 8px */
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  display: inline-block;
  user-select: none;
}

.button-primary:hover {
  background-color: var(--color-accent-hover); /* CDC: #3399FF */
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
  text-decoration: none;
  color: #fff;
}

.button-primary:focus {
  background-color: var(--color-accent-hover);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

button[type="submit"] {
  background-color: var(--color-accent);
  color: #fff;
  padding: 1rem 2rem;
  font-size: 1.125rem;
  border-radius: var(--radius-input);
  border: none;
  cursor: pointer;
  width: 100%;
  margin-top: 1.5rem;
  transition: background-color 0.2s ease;
}

button[type="submit"]:hover {
  background-color: var(--color-accent-hover);
}

/* ============================================================
   IMAGES
   ============================================================ */
img {
  max-width: 100%;                        /* CDC */
  height: auto;
  border-radius: var(--radius-image);     /* CDC: 12px */
}

/* ============================================================
   FORMULAIRES
   ============================================================ */
input, textarea, select {
  width: 100%;
  border: 1px solid var(--color-border);  /* CDC: #CED4DA */
  border-radius: var(--radius-input);     /* CDC: 6px */
  padding: 0.6rem 0.75rem;
  font-family: var(--font-main);
  font-size: 1rem;
  color: var(--color-text-primary);
  background-color: var(--color-background-container);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-accent);      /* CDC: #007AFF au focus */
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

.contact-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 3rem 1.5rem;
  background-color: var(--color-background);
  min-height: 80vh;
}

.contact-card {
  background: var(--color-background-container);
  padding: 3rem 3.5rem;
  border-radius: var(--radius-container);
  box-shadow: 0 0 15px var(--color-shadow);
  width: 100%;
  max-width: 700px;
}

.contact-card h2 {
  margin-bottom: 2rem;
  font-size: 2rem;
  color: var(--color-title);
  text-align: center;
}

.form-group {
  margin-bottom: 2rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.form-group textarea {
  min-height: 200px;
}

.form-group input {
  height: 45px;
}

.form-group .errorlist {
  color: #c0392b;
  margin-top: 0.5rem;
}

.form-group .errorlist li {
  font-size: 0.9rem;
}

/* Nom + Prénom côte à côte */
.contact-row {
  display: flex;
  gap: 1.5rem;
}

.contact-row .form-group {
  flex: 1;
}

@media (max-width: 500px) {
  .contact-row {
    flex-direction: column;
    gap: 0;
  }
}

.message {
  padding: 1rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-input);
}

.message.success {
  background-color: #d4edda;
  color: #155724;
}

.message.error {
  background-color: #f8d7da;
  color: #721c24;
}

/* ============================================================
   NAVIGATION BULMA — overrides charte
   ============================================================ */
.navbar {
  background-color: var(--color-background-container) !important;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-main);
}

.navbar-item,
.navbar-link {
  color: var(--color-text-primary) !important;
  font-weight: 500;
  transition: color 0.2s ease;
}

.navbar-item:hover,
.navbar-link:hover {
  background-color: transparent !important;
  color: var(--color-accent) !important;
  text-decoration: none;
}

.navbar-dropdown {
  background-color: var(--color-background-container) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-input) !important;
  box-shadow: 0 4px 12px var(--color-shadow) !important;
}

.navbar-dropdown .navbar-item:hover {
  background-color: var(--color-background) !important;
  color: var(--color-accent) !important;
}

.navbar-burger span {
  background-color: var(--color-text-primary) !important;
}

/* ============================================================
   VOYAGES
   ============================================================ */
.content-voyage {
  max-width: 900px;
  margin: auto;
  padding: 0 1rem;
}

.article-voyage {
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}

section.voyage-header {
  width: 100%;
  padding: 1rem 0;
}

.flag-img {
  height: 40px;
  width: auto;
  display: block;
}

.voyage-annee {
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--color-text-secondary);
}

.map-container {
  height: 400px;
  border-radius: var(--radius-input);
  margin-top: 3rem;
  box-shadow: 0 2px 8px var(--color-shadow);
}

.popup-img {
  max-width: 150px;
  border-radius: 4px;
  margin-top: 5px;
}

.no-map-data {
  padding: 1rem;
  text-align: center;
  font-style: italic;
}

.intro-voyage {
  max-width: 900px;
  margin: auto;
  padding: 1rem;
}

.article-intro {
  margin-bottom: 3rem;
  background: var(--color-background);
  padding: 1rem;
  border-radius: var(--radius-input);
  border: 1px solid var(--color-border);
}

.voyage-main {
  max-width: 900px;
  margin: auto;
  padding: 0 1rem 3rem;
}

.voyage-top {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
}

.voyage-nav {
  flex: 0 0 220px;
  background-color: var(--color-background);
  border-radius: var(--radius-input);
  padding: 2rem 1.5rem;
  height: fit-content;
  box-shadow: 0 2px 8px var(--color-shadow);
}

.voyage-nav h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.voyage-nav ul {
  list-style: none;
  padding-left: 0;
}

.voyage-nav li {
  margin-bottom: 0.75rem;
}

.voyage-nav a {
  text-decoration: none;
  color: var(--color-text-secondary);
  font-weight: 500;
  transition: color 0.2s ease;
}

.voyage-nav a:hover {
  color: var(--color-accent);
}

.voyage-intro {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  margin-bottom: 3rem;
  padding: 1rem;
  background-color: var(--color-background);
  border-radius: var(--radius-input);
  border: 1px solid var(--color-border);
}

.voyage-layout {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  padding: 1rem;
}

.voyage-layout nav {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.voyage-layout article {
  flex: 1;
}

.lieu {
  margin-bottom: 3rem;
}

.lieu h3 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

/* ============================================================
   SOUVENIRS MER ROUGE
   ============================================================ */
.souvenirs-merrouge .letter-box {
  background: #fff9f0;
  border-left: 6px solid #f4a261;
  box-shadow: 0 2px 10px var(--color-shadow);
  margin: 1.5rem 0;
  padding: 1.5rem 2rem;
  font-style: italic;
  font-family: 'Pacifico', cursive;
  position: relative;
  display: block;
  border-radius: var(--radius-input);
}

.souvenirs-merrouge .letter-box::before {
  content: "✉";
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 2rem;
  color: #f4a261;
  opacity: 0.3;
}

.souvenirs-merrouge .letter-box.has-photos {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.souvenirs-merrouge .letter-box.has-photos .letter-text {
  width: 50%;
  font-style: italic;
}

.souvenirs-merrouge .letter-box.has-photos .letter-photos {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.souvenirs-merrouge .letter-box.has-photos figure {
  margin: 0;
}

.souvenirs-merrouge .letter-box.has-photos img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-input);
  box-shadow: 0 4px 8px var(--color-shadow);
}

.souvenirs-merrouge .letter-box.has-photos .letter-author,
.souvenirs-merrouge .letter-box:not(.has-photos) .letter-author {
  text-align: right;
  font-style: normal;
  font-weight: bold;
  font-family: 'EB Garamond', serif;
  color: #e76f51;
  margin-top: 1rem;
}

.souvenirs-merrouge .letter-box.has-photos .letter-author {
  width: 50%;
  align-self: flex-end;
  padding-top: 0.5rem;
}

/* ============================================================
   MUSIQUE — visualiseur audio
   ============================================================ */
.visualizer {
  height: 100px;
  background: var(--color-accent);        /* corrigé : --blue-main inexistant */
  border-radius: var(--radius-input);
  margin-top: 1rem;
  position: relative;
  overflow: hidden;
}

.bar {
  position: absolute;
  bottom: 0;
  width: 4px;
  background: white;
  animation: bounce 1s infinite ease-in-out;
}

.bar:nth-child(1) { left: 10%; animation-delay: 0s; }
.bar:nth-child(2) { left: 20%; animation-delay: 0.1s; }
.bar:nth-child(3) { left: 30%; animation-delay: 0.2s; }
.bar:nth-child(4) { left: 40%; animation-delay: 0.3s; }
.bar:nth-child(5) { left: 50%; animation-delay: 0.4s; }

@keyframes bounce {
  0%, 100% { height: 20%; }
  50%       { height: 80%; }
}

.visualizer.inactive .bar {
  animation: none;
  height: 20%;
}

/* ============================================================
   RECETTES
   ============================================================ */
.main-layout {
  display: flex;
  gap: 2rem;
}

.left-content {
  flex: 1;
}

.recipe-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-input);
}

/* ============================================================
   CARTE / MAP (Leaflet)
   ============================================================ */
#map {
  width: 33vw;
  height: 50vh;
  border-radius: var(--radius-input);
  min-width: 300px;
}

.container.map-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  padding: 20px;
  height: 100vh;
}

.text-box {
  display: flex;
  flex-direction: column;
}

/* ============================================================
   LIGHTBOX — global
   ============================================================ */
.lightbox-trigger {
  cursor: zoom-in;
  transition: opacity 0.2s ease;
}
.lightbox-trigger:hover {
  opacity: 0.82;
}

#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.88);
  align-items: center;
  justify-content: center;
}
#lightbox.is-open {
  display: flex;
}
#lightbox img {
  max-width: 90vw;
  max-height: 88vh;
  border-radius: var(--radius-container);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
  object-fit: contain;
}
#lightbox-close {
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-title);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: background 0.2s ease;
  line-height: 1;
}
#lightbox-close:hover {
  background: var(--color-background);
}

/* ============================================================
   ACCUEIL — hero + modules
   ============================================================ */

.hero-accueil {
  padding: 2.5rem 0 2rem;
  text-align: center;
}

.hero-accueil h1 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-title);
  margin-bottom: 1rem;
}

.hero-text {
  color: var(--color-text-secondary);
  max-width: 680px;
  margin: 0 auto 1.5rem;
  line-height: 1.8;
  font-size: .97rem;
}

.section-accueil {
  margin-bottom: 3rem;
}

.section-accueil-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-title);
  margin-bottom: 1.2rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid #EBF3FF;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 1.2rem;
}

a.module-card {
  background: var(--color-background-container);
  border-radius: var(--radius-container);
  box-shadow: 0 2px 8px var(--color-shadow);
  padding: 1.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

a.module-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
  border-color: #dce8ff;
  color: inherit;
}

.module-card-icon {
  font-size: 2rem;
  line-height: 1;
}

.module-card-title {
  font-size: .98rem;
  font-weight: 600;
  color: var(--color-title);
}

.module-card-desc {
  font-size: .82rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .modules-grid { grid-template-columns: repeat(2, 1fr); }
}