/* ==========================================================================
   Capitaine Andrea — feuille de style
   ========================================================================== */

:root{
  --bg:#f7f3e9;
  --ink:#173b34;
  --muted:#64746e;
  --green:#3f5c46;
  --accent:#dfe85f;
  --accent-dark:#5c6a17;
  --card:#fffaf0;
  --shadow:0 22px 60px rgba(12,45,39,.18);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}

img{max-width:100%;display:block}
picture{display:block}
a{color:inherit}

/* Accessibilité : lien d'évitement + focus visible ------------------------ */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:#23301f;
  padding:12px 18px;border-radius:0 0 12px 0;font-weight:800;text-decoration:none;
}
.skip-link:focus{left:0}

a:focus-visible,button:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}

/* En-tête / hero ---------------------------------------------------------- */
.hero{
  min-height:92vh;
  background-image:
    linear-gradient(180deg,rgba(10,45,51,.25),rgba(13,45,33,.75)),
    url('assets/hero-2000.jpg');
  background-position:center;
  background-size:cover;
  color:#fff;
  display:flex;
  flex-direction:column;
}

@supports (background-image:image-set(url("x.webp") type("image/webp"))){
  .hero{
    background-image:
      linear-gradient(180deg,rgba(10,45,51,.25),rgba(13,45,33,.75)),
      image-set(url('assets/hero-2000.webp') type('image/webp'),
                url('assets/hero-2000.jpg')  type('image/jpeg'));
  }
}

.nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:24px clamp(20px,5vw,72px);
}
.brand{font-weight:800;letter-spacing:.04em}

.langs{display:flex;gap:8px;flex-wrap:wrap}
.langs button{
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.12);
  color:#fff;border-radius:999px;padding:8px 12px;
  cursor:pointer;font-weight:700;font-family:inherit;font-size:.95rem;
  transition:background .2s ease,color .2s ease;
}
.langs button:hover{background:rgba(255,255,255,.28)}
.langs button.active{background:var(--accent);color:#24301d;border-color:var(--accent)}

.hero-content{margin:auto 0;padding:40px clamp(20px,6vw,90px) 90px;max-width:980px}

.eyebrow,.section-kicker{
  text-transform:uppercase;letter-spacing:.16em;
  font-size:.78rem;font-weight:800;color:var(--accent);
}

h1,h2{line-height:1.02;margin:.2em 0 .45em}
h1{font-size:clamp(2.6rem,8vw,7.8rem);letter-spacing:-.06em}
h2{font-size:clamp(1.9rem,4vw,4.4rem);letter-spacing:-.05em}
.lead{font-size:clamp(1.15rem,2vw,1.55rem);max-width:760px}

.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.btn{padding:13px 18px;border-radius:999px;text-decoration:none;font-weight:800;cursor:pointer}
.primary{background:var(--accent);color:#23301f}
.secondary{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);color:#fff}

/* Sections ---------------------------------------------------------------- */
.section{padding:clamp(54px,8vw,110px) clamp(20px,6vw,90px)}
.section p{font-size:1.05rem}
.section-kicker{color:var(--accent-dark)}

.grid{display:grid;gap:clamp(28px,5vw,70px);align-items:center}
.two{grid-template-columns:1.1fr .9fr}
.reverse{grid-template-columns:.9fr 1.1fr}

.card-image{margin:0;border-radius:32px;overflow:hidden;box-shadow:var(--shadow);background:#ddd}
.card-image picture,.card-image img{width:100%;height:100%;object-fit:cover}

.itinerary{background:var(--green);color:#f6f8df;text-align:center}
.itinerary .section-kicker{color:var(--accent)}
.islands{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:30px 0}
.islands span{
  border:1px solid rgba(255,255,255,.35);border-radius:999px;
  padding:10px 16px;background:rgba(255,255,255,.08);font-weight:800;
}
.wide{max-width:900px;margin:0 auto}

.highlights{background:#fff}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.cards article{
  background:var(--card);border-radius:26px;overflow:hidden;
  box-shadow:0 15px 45px rgba(31,59,46,.1);
}
.cards img{height:230px;width:100%;object-fit:cover}
.cards h3{padding:18px 20px;margin:0;font-size:1.2rem}

/* Galerie ----------------------------------------------------------------- */
.gallery{
  display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:220px;grid-auto-flow:dense;gap:10px;padding:10px;background:var(--green);
}
.gallery picture{height:100%}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:18px}
/* 11 photos + 1 photo double = 12 cases : deux rangées parfaitement pleines */
.gallery picture:nth-child(1){grid-column:span 2}

/* Pages secondaires : 404 et mentions légales ----------------------------- */
/* (aucun style en ligne : la CSP du .htaccess interdit les attributs style=) */
.hero--full{min-height:100vh}
.h-404{font-size:clamp(2.4rem,7vw,5.5rem)}
.lead--sub{opacity:.85;font-size:1.05rem}

.legal-header{background:var(--green);color:#f6f8df;padding:28px clamp(20px,6vw,90px)}
.legal-header a{text-decoration:none;font-weight:800}
.legal-header .brand{display:inline-block;margin-right:18px}

.legal{max-width:820px;margin:0 auto;padding:clamp(40px,6vw,80px) clamp(20px,6vw,40px)}
.legal h1{font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.04em;margin-bottom:.6em}
.legal h2{
  font-size:1.35rem;letter-spacing:0;line-height:1.3;
  margin:2.4em 0 .6em;padding-top:1.4em;border-top:1px solid rgba(23,59,52,.15);
}
.legal h2:first-of-type{border-top:0;padding-top:0;margin-top:1.5em}
.legal p,.legal li{font-size:1.02rem}
.legal ul{padding-left:1.2em}
.legal li{margin-bottom:.4em}
.legal dl{margin:0}
.legal dt{font-weight:800;margin-top:1em}
.legal dd{margin:0 0 .2em}
.legal a{color:var(--accent-dark);font-weight:600}
.legal .updated{color:var(--muted);font-size:.92rem}
.legal .todo{
  background:#fff6d8;border-left:4px solid #d9a400;
  padding:14px 18px;border-radius:0 10px 10px 0;margin:1em 0;
}
.legal .todo strong{color:#7a5c00}

/* Contact / pied de page -------------------------------------------------- */
.contact{text-align:center}
footer nav{margin-top:10px}
footer nav a{color:var(--muted);font-size:.92rem}
.contact-box{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.contact-box a{
  background:var(--ink);color:#fff;text-decoration:none;
  border-radius:999px;padding:14px 18px;font-weight:800;cursor:pointer;
}
footer{text-align:center;padding:36px;color:var(--muted)}

/* Responsive -------------------------------------------------------------- */
@media (max-width:819px){
  .hero{
    min-height:82vh;
    background-image:
      linear-gradient(180deg,rgba(10,45,51,.25),rgba(13,45,33,.75)),
      url('assets/hero-1200.jpg');
  }
  @supports (background-image:image-set(url("x.webp") type("image/webp"))){
    .hero{
      background-image:
        linear-gradient(180deg,rgba(10,45,51,.25),rgba(13,45,33,.75)),
        image-set(url('assets/hero-1200.webp') type('image/webp'),
                  url('assets/hero-1200.jpg')  type('image/jpeg'));
    }
  }
}

@media (max-width:850px){
  .two,.reverse{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:180px}
  .gallery picture:nth-child(1){grid-column:span 1}
  .gallery picture:last-child{grid-column:span 2}
  .nav{align-items:flex-start;gap:16px;flex-direction:column}
  .hero-content{padding-bottom:60px}
  h1{font-size:clamp(2.5rem,12vw,5rem)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}