@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Karla:wght@400;500;600&display=swap');

:root {
  --stone: #E7E3D8;      /* fond général, pierre claire */
  --paper: #FBFAF6;      /* panneaux de contenu, plus clair que le fond */
  --ink: #202A2E;        /* texte principal */
  --marine: #1B3A4A;     /* bleu marine profond, identité principale */
  --brick: #A8402C;      /* rouge breton (coque de bateau), accent rare */
  --mist: #CFC9B8;       /* filets / séparateurs discrets */
  --mist-dark: #9AA39E;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font-family: 'Karla', sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3, .display {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  color: var(--marine);
  line-height: 1.15;
  margin: 0 0 0.4em 0;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }

p { 
  max-width: 100%; /* Occupe toute la largeur disponible du conteneur .wrap */
}

a { color: var(--brick); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--marine); outline-offset: 3px; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- entête ---------- */

header.site {
  border-bottom: 1px solid var(--mist-dark);
  background: var(--paper);
}

.site-nav {
  display: flex;
  align-items: center; /* Alignement vertical parfait avec le grand titre */
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding: 1.2rem 0;
}

.wordmark {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 2.1rem; /* Taille augmentée (ex-1.4rem) */
  line-height: 1;
  color: var(--marine);
  letter-spacing: -0.02em;
}

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

.site-nav nav {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.site-nav nav a {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
}

.site-nav nav a.active {
  color: var(--brick);
  border-bottom: 2px solid var(--brick);
  padding-bottom: 2px;
}
/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 38vh; /* Hauteur réduite pour éviter l'effet de grand vide */
  display: flex;
  align-items: center; /* Centre le texte verticalement */
  background: linear-gradient(180deg, rgba(27,58,74,0.05), rgba(27,58,74,0.55)),
              var(--marine);
  color: var(--paper);
}

/* À débloquer quand tu ajouteras la vraie photo du hero :
   .hero { 
     background-image: linear-gradient(180deg, rgba(27,58,74,0.05), rgba(27,58,74,0.55)), url('hero.jpg');
     background-size: cover; 
     background-position: center; 
   } */

.hero-inner {
  padding: 1.8rem 1.5rem 2rem; /* Espace réduit au-dessus et en dessous */
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}

.hero .kicker {
  font-family: 'Karla', sans-serif;
  font-size: 0.95rem;
  color: var(--stone);
  margin-bottom: 0.6rem;
}

.hero h1 { 
  color: var(--paper); 
  max-width: 100%; 
}

.hero p { 
  color: var(--stone); 
  max-width: 100%; 
}

/* ---------- gestion globale des photos ---------- */

.placeholder-photo {
  overflow: hidden;
  position: relative;
  border-radius: 4px; /* Optionnel : léger arrondi élégant */
}

.placeholder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Remplit l'encart sans déformer la photo */
  display: block;
}

/* Justifié uniquement sur ordinateur et tablette */
@media (min-width: 641px) {
  p, li {
    text-align: justify;
    text-justify: inter-word;
    hyphens: none;
  }
}

/* Conserver les titres et les légendes alignés proprement à gauche ou au centre */
h1, h2, h3, .wordmark {
  text-align: left;
}

figcaption {
  text-align: center;
}



/* ---------- sections générales ---------- */

section { padding: 3.2rem 0; }

section + section { border-top: 1px solid var(--mist); }

.lede { font-size: 1.15rem; }

/* liste "manifeste" à filets, pas de cartes à ombre */

.manifest {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  border-top: 1px solid var(--mist);
}

.manifest li {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--mist);
}

.manifest .label {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--marine);
}

/* bande photo uniforme */

.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 0.5rem;
}

.photo-strip .placeholder-photo {
  aspect-ratio: 16 / 9; /* Format paysage pour occuper moins de hauteur verticale */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Légère ombre pour faire ressortir les images */
}

/* boutons de réservation */

.book-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
}

.book-btn {
  border: 1px solid var(--marine);
  color: var(--marine);
  padding: 0.75rem 1.4rem;
  font-family: 'Karla', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.book-btn:hover, .book-btn:focus-visible {
  background: var(--marine);
  color: var(--paper);
  text-decoration: none;
}

/* grille galerie */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 1rem; /* Espace vertical et horizontal entre les photos */
  margin-top: 1.6rem;
}

.gallery-item {
  margin: 0; /* Supprime les marges par défaut des balises <figure> */
  display: flex;
  flex-direction: column;
}

.gallery-item .placeholder-photo { 
  aspect-ratio: 4 / 3; /* Donne un format rectangulaire uniforme et propre */
}

figcaption {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--marine);
  font-family: 'Karla', sans-serif;
  text-align: center;
}

/* pied de page */

footer.site {
  border-top: 1px solid var(--mist-dark);
  background: var(--paper);
  padding: 2.4rem 0;
  margin-top: 1rem;
}

footer.site .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
}

footer.site p { font-size: 0.9rem; color: var(--ink); }
footer.site a { font-size: 0.9rem; }

/* ---------- responsive (mobile) ---------- */

@media (max-width: 640px) {
  .site-nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .manifest li { 
    grid-template-columns: 1fr; 
    gap: 0.15rem; 
  }

  .photo-strip, 
  .gallery-grid { 
    grid-template-columns: 1fr; /* Une seule colonne sur petit écran pour plus de clarté */
  }

  .book-links {
    flex-direction: column;
  }

  .book-btn {
    text-align: center;
    width: 100%;
  }
}

/* Tableaux responsives */

.distances {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  text-align: left;
}

.distances th, 
.distances td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--mist);
}

.distances th {
  font-family: 'Fraunces', serif;
  color: var(--marine);
  font-weight: 500;
}

@media (max-width: 640px) {
  .distances {
    display: block;
    overflow-x: auto; /* Permet le défilement horizontal sur mobile */
    white-space: nowrap;
  }
}

/* Réduction des espaces entre les sections des mentions légales */
main section {
  padding: 0.8rem 0; /* Réduit le padding vertical de 3.2rem à 0.8rem */
  border-top: none;  /* Supprime la ligne de séparation si nécessaire */
}

main section h2 {
  margin-top: 0.5rem;
  margin-bottom: 0.3rem;
}

main section p {
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
}

/* Marges de sécurité sur les bords pour la navigation mobile */
header.site .wrap,
.site-nav {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}