:root{
  --ink:#0b2034; --muted:#4c5a67; --brand:#0b5ed7;
  --line:#e6ecf2; --soft:#f7fafc; --paper:#fff;
  --shadow:0 10px 24px rgba(0,0,0,.12); --container:1180px;
}
*{box-sizing:border-box} html,body{margin:0}
body{font:12px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--soft)}
img{max-width:100%;display:block} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:var(--container);margin:0 auto;padding:0 18px}
.section{padding:50px 0} .section.alt{background:#fff}
.section-head{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:14px}
.section-head.center{justify-content:center;flex-direction:column;text-align:center}
.section h2{margin:0;font-size:clamp(1.2rem,2.8vw,2rem);line-height:1.2}
section.hero .hero-inner h3{  font-size: clamp(0.6rem, 2.2vw, 1.3rem);}
.lead{font-size: clamp(0.6rem, 3vw, 1.1rem);}

 

/* Header */
.header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.header-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;min-height:62px}
.brand{display:flex;flex-direction:column;gap:0}
.brand-title{font-weight:900;letter-spacing:.06em;color:#000;font-size:clamp(1.6rem,4.2vw,2.4rem);line-height:1}
.brand-sub{font-size:.72rem;color:var(--muted);margin-top:2px}
.contact{display:flex;gap:12px;align-items:center;justify-content:flex-end;font-size:.92rem}
.contact a{color:inherit}
.contact .phone{font-weight:700}
@media (max-width:900px){
  .contact{font-size:.86rem}
}
@media (max-width:680px){
  .contact .phone{display:none}        /* cache le téléphone en affichage étroit */
}

/* Nav */
.nav{position:relative}
.nav-toggle{display:inline-block;background:var(--brand);color:#fff;border:0;border-radius:8px;padding:6px 10px;cursor:pointer}
.nav-menu{list-style:none;margin:0;padding:0;position:absolute;right:0;top:110%;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);display:none;min-width:210px}
.nav-menu.show{display:block}
.nav-menu li{border-bottom:1px solid var(--line)} .nav-menu li:last-child{border-bottom:0}
.nav-menu a{display:block;padding:10px 12px}
@media (min-width:900px){
  .header-row{grid-template-columns:1fr 1fr auto}
  .nav-toggle{display:none}
  .nav-menu{all:unset;display:flex;gap:12px;list-style:none;margin:0;padding:0;align-items:center}
  .nav-menu a{display:inline-block;padding:8px 10px;border-radius:10px}
  .nav-menu a:hover{background:#f0f6ff;text-decoration:none}
}

/* Menu mobile plein écran */
@media (max-width: 900px) {
  .nav { position: static; }
  .nav-menu {
    position: fixed; top: 62px; left: 0; right: 0;
    margin: 0; border-radius: 0; border-left: 0; border-right: 0;
    min-width: 0; z-index: 9999; display: none;
  }
  .nav-menu.show { display:block; }
  .nav-menu a { padding:14px 16px; }
  body.menu-open { overflow:hidden; }
}

/* Hero */
.hero{position:relative;background:#071a2b;color:#fff;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,12,22,.35),rgba(5,12,22,.85)),center/cover no-repeat url('https://www.nemovoile.com/img/catamaran-lagoon-col.jpg')}
.hero-inner{padding:58px 0 68px;text-align:center}
.hero h1{margin:0 0 6px;font-size:clamp(1.2rem,4vw,2.6rem);}

/* Formulaire COMPACT (semi-translucide) */
.searchbar{
  display:grid;
  grid-template-columns: repeat(5, minmax(120px,1fr));
  gap:8px;
  background: rgba(255,255,255,.15);               /* transparence */
  backdrop-filter: saturate(140%) blur(4px);       /* optionnel, garde net le contenu */
  -webkit-backdrop-filter:saturate(140%) blur(4px);
  color:var(--ink);
  padding:8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.5);
  max-width:920px;
  margin:0 auto;
  box-shadow:var(--shadow)
}
.searchbar--compact .btn-primary{padding:9px 12px}
@media (max-width:1100px){.searchbar{ grid-template-columns:repeat(4,1fr);}}
@media (max-width:900px){ .searchbar{ grid-template-columns:repeat(3,1fr);}}
@media (max-width:680px){ .searchbar{ grid-template-columns:repeat(2,1fr);}}
@media (max-width:460px){ .searchbar{ grid-template-columns:1fr;}}

.field{display:flex;flex-direction:column;gap:4px}
.field-submit{ align-self:stretch; display:flex; align-items:stretch; }
.searchbar input,.searchbar select{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.btn-primary{padding:10px 14px;border:0;border-radius:10px;background:linear-gradient(90deg,var(--brand),#3d86ff);color:#fff;font-weight:700;cursor:pointer; white-space:nowrap; height:100%; }
.btn-primary--sm{padding:9px 12px}

/* Email + Envoyer — côte à côte sans espace restant */
.field-row{
  grid-column: 1 / -1;
  display:flex; gap:8px; align-items:stretch; justify-content:flex-start; flex-wrap:nowrap;
}
.field-email{ flex: 0 1 240px; max-width:260px; min-width:160px; }
@media (min-width:1100px){ .field-email{ flex-basis:280px; max-width:300px; } }
.field-row .field-email input{ height:100%; min-width:0; }

/* Date faux placeholder + superposition fix */
.date-wrap{ position:relative; }
.date-wrap .input-placeholder{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:var(--muted); opacity:.95; font-size:.9rem; transition:opacity .15s ease;
}
.date-wrap.focus .input-placeholder{ opacity:.5; }
.date-wrap.has-value .input-placeholder{ display:none; }
.date-wrap:not(.has-value):not(.focus) input[type="date"]::-webkit-datetime-edit{ color: transparent; }
.date-wrap:not(.has-value):not(.focus) input[type="date"]::-webkit-date-and-time-value{ color: transparent; }
.date-wrap:not(.has-value):not(.focus) input[type="date"]{ color: transparent; }
.date-wrap.focus input[type=date]::-webkit-datetime-edit, .date-wrap.has-value input[type=date]::-webkit-datetime-edit, .date-wrap.focus input[type=date]::-webkit-date-and-time-value, .date-wrap.has-value input[type=date]::-webkit-date-and-time-value, .date-wrap.focus input[type=date], .date-wrap.has-value input[type=date] { color: var(--ink); }

/* Cartes destinations */
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media (max-width:1100px){.cards{grid-template-columns:repeat(4,1fr)}}
@media (max-width:900px){.cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:430px){.cards{grid-template-columns:1fr}}
.card{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--shadow);color:inherit}
.card img{width:100%;height:150px;object-fit:cover}
.card-body{padding:10px 12px}
.card-body h3{margin:0 0 4px;font-size:1.05rem}
.card-body p{margin:0;color:var(--muted);font-size:.95rem}

/* Grid flotte */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid3{grid-template-columns:1fr}}
.tile{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);padding-bottom:10px}
.tile img{width:100%;height:200px;object-fit:cover}
.tile h3{margin:10px 12px 0}.tile p{margin:6px 12px 0;color:var(--muted)}

/* Accordéon tarifs */
.accordeon details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;margin-bottom:10px;box-shadow:var(--shadow)}
.accordeon summary{cursor:pointer;list-style:none;font-weight:700;color:#0d2b4a;display:flex;align-items:center;gap:10px}
.accordeon summary::marker{display:none}
.accordeon summary:after{content:"â–¾";margin-left:auto;transition:transform .2s}
.accordeon details[open] summary:after{transform:rotate(180deg)}
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:8px}
.price-table{width:100%;border-collapse:collapse;min-width:520px}
.price-table th,.price-table td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.price-table thead th{background:#f3f7fb;font-weight:700}
.price-table a{color:var(--ink);text-decoration:underline}
.tarifs-note{margin-top:10px;color:var(--muted);font-size:.95rem}

/* Footer */
.footer{border-top:1px solid var(--line);background:#fff;padding:18px 0;text-align:center;color:var(--muted)}

/* Etats d’erreur & anim bouton */
.field-error { border-color:#ff5a5f !important; box-shadow:0 0 0 3px rgba(255,90,95,.12); }
.btn-primary.shake { animation: btnshake .28s linear 1; }
@keyframes btnshake {
  0%,100%{ transform:translateX(0) }
  25%{ transform:translateX(-4px) }
  75%{ transform:translateX(4px) }
}
.searchbar.is-submitting { opacity:.9; pointer-events:none; }

/* --- Téléphone : 2 champs par ligne --- */
@media (max-width: 480px){
  /* Le formulaire passe en 2 colonnes */
  .searchbar{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  /* Évite les débordements */
  .searchbar .field{ min-width: 0; }

  /* La rangée Email + Envoyer occupe toute la largeur du grid,
     mais garde le bouton à côté de l’email */
  .field-row{
    grid-column: 1 / -1;            /* s'étend sur les 2 colonnes */
    display: flex;
    gap: 8px;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
  /* Email assez court pour laisser la place au bouton sur petits écrans */
  .field-email{ flex: 1 1 160px; max-width: 260px; min-width: 140px; }
  .field-row .field-email input{ min-width: 0; height: 100%; }
  .btn-primary{ white-space: nowrap; height: 100%; padding: 10px 12px; }
}
/* NEMOVOILE plus grand dans le header */
.brand-title{
  font-size: clamp(2rem, 5.2vw, 3rem); /* avant ~2.4rem max -> maintenant jusqu’à 3rem */
  line-height: 1;
  letter-spacing: .06em;               /* garde le style “logo” */
}

/* Optionnel : ajuste la hauteur de l’entête si besoin */
.header-row{ min-height: 68px; }

/* Si ça force un retour à la ligne sur très petits écrans,
   on réduit un peu la taille en mobile étroit : */
@media (max-width: 360px){
  .brand-title{ font-size: clamp(1.8rem, 6vw, 2.1rem); }
}


.points-forts ul{
  margin: 0;
  padding-left: 1.1em;        /* puces simples */
  font-size: 1.1rem;         /* + grand que le corps */
  line-height: 1.5;           /* aération */
}

.points-forts li + li{        /* espacement entre items */
  margin-top: 12px;
}

@media (min-width: 900px){
  .points-forts ul{ font-size: 1.18rem; }
  .points-forts li + li{ margin-top: 14px; }
}
@media (max-width: 460px){
  .points-forts ul{ font-size: 0.9rem; line-height: 1.4}
  .points-forts li + li{ margin-top: 12px; }
}

.accordeon summary::after{
  content: "";
  display: inline-block;
  margin-left: auto;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #0d2b4a;   /* triangle vers le bas */
  transition: transform .2s;
}
.accordeon details[open] summary::after{
  transform: rotate(180deg);        /* pointe vers le haut à l’ouverture */
}

/* Note tarifs — taille et marges fluides */
.tarifs-note{
  font-size: clamp(.6rem, 2.2vw, 0.9rem);
  line-height: 1.55;
  margin-top: clamp(8px, 2vw, 14px);
  color: var(--muted, #556);
  max-width: 70ch;          /* évite des lignes trop longues */
}

/* Titre de l’accordéon (la ligne cliquable) */
.accordeon summary{
  font-size: clamp(1rem, 2.4vw, 1.15rem); /* taille réactive */
  font-weight: 700;
  color: #0d2b4a;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; list-style: none;
}

/* Corps de l’accordéon (contenu ouvert) */
.accordeon details{
  font-size: clamp(.95rem, 2vw, 1.05rem); /* texte interne */
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:8px; margin-bottom:10px; box-shadow:var(--shadow);
}

/* Si tu as des tableaux de tarifs dedans */
.accordeon .price-table{
  font-size: clamp(.9rem, 1.8vw, 1rem);
}
/* --- Table prix: amélios desktop --- */
.price-table{
  table-layout: fixed;          /* répartition auto des colonnes */
  width: 100%;
  min-width: 0 !important;      /* annule un éventuel min-width imposé */
  word-break: break-word;
}
.price-table a{ word-break: break-word; }

/* --- Petits écrans: transformer chaque ligne en "carte" --- */
@media (max-width: 680px){
  .table-wrap{ overflow-x: visible; }       /* plus de scroll horizontal */

  .price-table thead{ display: none; }      /* on masque l’en-tête */

  .price-table, .price-table tbody, .price-table tr, .price-table td{
    display: block;
    width: 100%;
  }

  .price-table tr{
    background: #fff;
    border: 1px solid var(--line, #e6ecf2);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: var(--shadow, 0 10px 24px rgba(0,0,0,.08));
  }

  .price-table td{
    border: 0;
    padding: 4px 0;
    font-size: 0.98rem;
    line-height: 1.4;
  }

  /* Modèle (1ère cellule) en titre */
  .price-table td:nth-child(1){
    font-weight: 700;
    margin-bottom: 6px;
  }

  /* Mini / Maxi affichés avec un label automatique */
  .price-table td:nth-child(2)::before{
    content: "Mini : ";
    font-weight: 600; color: #334;
  }
  .price-table td:nth-child(3)::before{
    content: "Maxi : ";
    font-weight: 600; color: #334;
  }

  /* Aligner les valeurs à droite si tu préfères: */
  .price-table td:nth-child(2),
  .price-table td:nth-child(3){
    text-align: right;
  }
}

/* Écrans très étroits: texte un poil plus petit */
@media (max-width: 360px){
  .price-table td{ font-size: 0.95rem; }
}
/* Cadre du formulaire : centré et resserré */
.searchbar{
  /* centrage horizontal + largeur au plus près du contenu */
  margin-inline: auto;
  width: fit-content;           /* se colle aux champs */
  max-width: 100%;              /* pas de débordement */
  
  /* padding + gap plus compacts */
  padding: 8px 10px;            /* avant plus large */
  gap: 8px;

  /* tracks centrées */
  justify-content: center;
}

/* Colonnes "au plus juste" mais avec un mini confortable */
.searchbar{
  grid-template-columns: repeat(5, minmax(160px, max-content));
}

/* Rangée Email + Envoyer sur toute la largeur, serrée */
.field-row{
  grid-column: 1 / -1;
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.field-email{ flex: 0 1 240px; max-width: 260px; min-width: 160px; }
.field-row .field-email input{ height: 100%; min-width: 0; }
.btn-primary{ white-space: nowrap; height: 100%; }

/* Paliers responsive (toujours centrés & serrés) */
@media (max-width: 1100px){
  .searchbar{ grid-template-columns: repeat(4, minmax(160px, max-content)); }
}
@media (max-width: 900px){
  .searchbar{ grid-template-columns: repeat(3, minmax(150px, max-content)); }
}
@media (max-width: 680px){
  .searchbar{ grid-template-columns: repeat(2, minmax(150px, max-content)); }
}
@media (max-width: 460px){
  .searchbar{ grid-template-columns: minmax(200px, 1fr); width: 100%; } /* très étroit : 1 colonne plein écran */
}