:root {
  --encre:#08243d; --encre-2:#4d6a83; --papier:#f7fafc; --carte:#ffffff; --trait:#dde8f0;
  --mer:#0a6fb5; --mer-fonce:#064b7d; --mer-pale:#e8f3fb;
  --soleil:#f5861f; --soleil-pale:#fff3e6;
  --ombre:0 1px 2px rgba(8,36,61,.06), 0 10px 30px rgba(8,36,61,.08);
  --rayon:18px;
}
@media (prefers-color-scheme: dark) {
  :root { --encre:#eaf3fa; --encre-2:#9db6cb; --papier:#07141f; --carte:#0e2233; 
      --trait:#1b344a; --mer:#4aa8e8; --mer-pale:#0f2b3f;
    --soleil:#ffa445; --soleil-pale:#2c1c0c;
    --ombre:0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.4); }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--papier); color:var(--encre);
  font:17px/1.62 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:var(--mer); }
.enveloppe { max-width:1120px; margin:0 auto; padding:0 24px; }
.etroit { max-width:740px; margin:0 auto; padding:0 24px; }

/* --- navigation --- */
nav { position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--papier) 90%, transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--trait); }
nav .enveloppe { display:flex; align-items:center; justify-content:space-between; height:74px; gap:20px; }
.marque { display:flex; align-items:center; text-decoration:none; }
.marque img { height:42px; width:auto; }
.marque .sombre { display:none; }
@media (prefers-color-scheme: dark) {
  .marque .clair { display:none; } .marque .sombre { display:block; }
}
.liens-nav { display:flex; gap:26px; align-items:center; font-size:.98rem; }
.liens-nav > a { text-decoration:none; color:var(--encre-2); font-weight:500; }
.liens-nav > a:hover { color:var(--encre); }
.liens-nav > a.bouton { color:#fff; }
@media (max-width:760px) { .liens-nav > a:not(.bouton) { display:none; } .marque { font-size:1.5rem; } }

.bouton { display:inline-block; background:var(--soleil); color:#fff !important; text-decoration:none;
  padding:14px 26px; border-radius:999px; font-weight:700; font-size:1rem; border:0; cursor:pointer;
  box-shadow:0 8px 22px color-mix(in srgb,var(--soleil) 38%, transparent); transition:transform .12s ease; }
.bouton:hover { transform:translateY(-1px); filter:brightness(1.05); }
.bouton.mer { background:var(--mer); box-shadow:0 8px 22px color-mix(in srgb,var(--mer) 35%, transparent); }
.bouton.clair { background:rgba(255,255,255,.14); color:#fff !important; border:1px solid rgba(255,255,255,.5);
  box-shadow:none; backdrop-filter:blur(6px); }

/* --- héros --- */
.heros { position:relative; color:#fff; text-align:center; overflow:hidden;
  padding:110px 0 96px; background:#062d4a; }
.heros .fond { position:absolute; inset:0; background-image:url('photos/heros.jpg');
  background-size:cover; background-position:center 55%; opacity:.62; }
.heros .voile { position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,26,45,.72), rgba(4,26,45,.55) 40%, rgba(4,26,45,.9)); }
.heros .etroit { position:relative; }
.etiquette { display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:7px 16px; font-size:.88rem;
  font-weight:600; margin-bottom:24px; backdrop-filter:blur(6px); }
h1 { font-size:clamp(2.3rem, 5.6vw, 4rem); line-height:1.05; letter-spacing:-.04em; margin:0 0 20px;
  font-weight:800; text-shadow:0 2px 30px rgba(0,0,0,.35); }
h1 em { font-style:normal; color:#ffd8a8; }
.chapeau { font-size:clamp(1.05rem,2.1vw,1.28rem); max-width:640px; margin:0 auto 32px;
  color:rgba(255,255,255,.92); }
.actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.sous-action { font-size:.9rem; margin-top:16px; color:rgba(255,255,255,.75); }
.bandeau { display:flex; gap:34px; justify-content:center; flex-wrap:wrap; margin-top:40px;
  padding-top:26px; border-top:1px solid rgba(255,255,255,.2); font-size:.92rem; color:rgba(255,255,255,.82); }
.bandeau b { display:block; font-size:1.5rem; font-weight:800; color:#fff; letter-spacing:-.02em; }

/* --- sections --- */
section { padding:76px 0; }
h2 { font-size:clamp(1.6rem,3.1vw,2.3rem); letter-spacing:-.03em; margin:0 0 12px; font-weight:780; }
.intro-section { color:var(--encre-2); margin:0 0 32px; max-width:640px; font-size:1.05rem; }

.grille { display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); }
.billet { background:var(--carte); border:1px solid var(--trait); border-radius:var(--rayon);
  overflow:hidden; box-shadow:var(--ombre); transition:transform .15s ease, box-shadow .15s ease; }
.billet:hover { transform:translateY(-3px); box-shadow:0 2px 4px rgba(8,36,61,.08), 0 18px 40px rgba(8,36,61,.13); }
.billet .visuel { position:relative; aspect-ratio:16/10; overflow:hidden; }
.billet .visuel img { width:100%; height:100%; object-fit:cover; }
.billet .visuel::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(4,26,45,.82)); }
.billet .visuel span { position:absolute; left:18px; bottom:14px; z-index:2; color:#fff;
  font-weight:750; font-size:1.4rem; letter-spacing:-.02em; }
.billet .remise { position:absolute; right:14px; top:14px; z-index:2; background:var(--soleil);
  color:#fff; font-weight:800; font-size:.85rem; padding:5px 12px; border-radius:999px; }
.billet .corps { padding:18px 20px 20px; }
.billet .route { color:var(--encre-2); font-size:.9rem; margin:0 0 6px; }
.billet .prix { font-size:1.9rem; font-weight:800; letter-spacing:-.03em; margin:0; }
.billet .prix small { font-size:.9rem; font-weight:500; color:var(--encre-2); }
.billet .habituel { color:var(--encre-2); font-size:.92rem; margin:2px 0 0; }
.puce { display:inline-block; background:var(--mer-pale); color:var(--mer); font-size:.8rem;
  font-weight:700; border-radius:999px; padding:4px 11px; margin-top:12px; }

.etapes { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.etape { background:var(--carte); border:1px solid var(--trait); border-radius:var(--rayon); padding:24px; }
.etape .num { display:grid; place-items:center; width:38px; height:38px; border-radius:12px;
  background:var(--mer-pale); color:var(--mer); font-weight:800; margin-bottom:12px; }
.etape h3 { margin:0 0 6px; font-size:1.08rem; }
.etape p { margin:0; color:var(--encre-2); font-size:.97rem; }

.tarifs { display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); align-items:stretch; }
.tarif { background:var(--carte); border:1px solid var(--trait); border-radius:var(--rayon); padding:30px;
  display:flex; flex-direction:column; }
.tarif.phare { border-color:var(--mer); box-shadow:0 0 0 3px color-mix(in srgb,var(--mer) 15%, transparent), var(--ombre); position:relative; }
.ruban { position:absolute; top:-13px; left:30px; background:var(--mer); color:#fff; font-size:.78rem;
  font-weight:800; padding:5px 14px; border-radius:999px; letter-spacing:.02em; }
.tarif h3 { margin:0 0 6px; font-size:1.15rem; }
.montant { font-size:2.6rem; font-weight:800; letter-spacing:-.035em; margin:6px 0 2px; }
.montant small { font-size:.95rem; font-weight:500; color:var(--encre-2); letter-spacing:0; }
.tarif ul { list-style:none; padding:0; margin:20px 0 26px; flex:1; }
.tarif li { padding-left:28px; position:relative; margin-bottom:11px; font-size:.99rem; }
.tarif li::before { content:"✓"; position:absolute; left:0; color:var(--mer); font-weight:800; }

details { background:var(--carte); border:1px solid var(--trait); border-radius:14px;
  padding:18px 20px; margin-bottom:12px; }
details summary { cursor:pointer; font-weight:650; }
details p { margin:12px 0 0; color:var(--encre-2); }

.bloc-appel { padding-inline:24px; }
.appel { background:linear-gradient(135deg,var(--mer-fonce),var(--mer)); color:#fff;
  border-radius:24px; padding:56px 32px; text-align:center;
  max-width:1120px; margin-inline:auto; }
.appel h2 { color:#fff; }
.appel p { color:rgba(255,255,255,.9); max-width:520px; margin:0 auto 26px; }

footer { border-top:1px solid var(--trait); padding:44px 0 80px; color:var(--encre-2); font-size:.92rem; }
footer .liens { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:16px; }
footer a { color:var(--encre-2); }
.mention { font-size:.83rem; line-height:1.55; max-width:860px; }

.page-texte { padding-block:40px 20px; }
.page-texte h1 { color:var(--encre); text-shadow:none; font-size:2.1rem; }
.page-texte h2 { font-size:1.2rem; margin:32px 0 8px; }
.page-texte table { width:100%; border-collapse:collapse; font-size:.94rem; }
.page-texte td, .page-texte th { text-align:left; padding:9px 14px 9px 0;
  border-bottom:1px solid var(--trait); vertical-align:top; }


/* --- ancres : la barre fixe masquait le haut des sections --- */
section[id], h2[id] { scroll-margin-top: 96px; }

/* --- page de désabonnement --- */
.retenue { background:var(--carte); border:1px solid var(--trait); border-radius:18px;
  padding:26px; margin:26px 0; }
.retenue ul { list-style:none; padding:0; margin:16px 0 0; }
.retenue li { padding-left:30px; position:relative; margin-bottom:12px; }
.retenue li::before { content:"✈"; position:absolute; left:0; color:var(--mer); }
.duo { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.lien-sobre { color:var(--encre-2); font-size:.92rem; align-self:center; }


/* --- cadre d'inscription ------------------------------------------------
   Un seul cadre blanc, large, centré. Le gabarit Infomaniak arrive avec son
   propre encadré gris (.inf-main_…) et ses marges : on les efface pour qu'il
   remplisse le cadre au lieu de flotter dedans. */
.formulaire { background:#fff; border-radius:18px; padding:28px 30px; max-width:600px;
  margin:0 auto; text-align:left; color:#08243d; box-shadow:0 14px 34px rgba(4,26,45,.22); }
.formulaire * { box-sizing:border-box; }
.formulaire [class^="inf-main_"], .formulaire [class*=" inf-main_"] {
  background:transparent !important; padding:0 !important; margin:0 !important;
  width:100% !important; max-width:100% !important; }
.formulaire form, .formulaire .inf-form { margin:0 !important; width:100% !important; }
.formulaire h4 { font-size:1.2rem !important; line-height:1.3 !important; color:#08243d !important;
  margin:0 0 8px !important; font-weight:750 !important; }
.formulaire h4 + span, .formulaire > form > div > span { display:block; font-size:.95rem !important;
  color:#4d6a83 !important; line-height:1.5 !important; }
.formulaire .inf-content { margin-top:18px !important; }
.formulaire label { display:block; font-size:.92rem; font-weight:650; margin:14px 0 6px; color:#08243d; }
.formulaire .facultatif { font-weight:400; color:#6b8299; }
.formulaire input[type=email], .formulaire input[type=text], .formulaire select {
  width:100% !important; padding:14px 16px !important; font-size:16px !important;
  border:1px solid #dde8f0 !important; border-radius:12px !important; background:#fff !important;
  color:#08243d !important; font-family:inherit !important; }
.formulaire input:focus, .formulaire select:focus { outline:2px solid #0a6fb5; outline-offset:1px; }
.formulaire .trio { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media (max-width:560px) { .formulaire .trio { grid-template-columns:1fr; }
  .formulaire { padding:22px 20px; } }
.formulaire .case { display:flex; gap:10px; align-items:flex-start; font-weight:400;
  font-size:.88rem; line-height:1.5; margin:18px 0 0; color:#4d6a83; }
.formulaire .case input { margin-top:3px; width:18px; height:18px; flex:0 0 auto; }
.formulaire input[type=checkbox] { width:18px !important; height:18px !important; }
.formulaire button, .formulaire input[type=submit] { width:100% !important; margin-top:18px;
  background:#f5861f !important; color:#fff !important; border:0 !important;
  padding:15px 22px !important; font-size:16px !important; font-weight:700 !important;
  border-radius:999px !important; cursor:pointer; font-family:inherit !important;
  -webkit-appearance:none; appearance:none; }
.formulaire button:hover, .formulaire input[type=submit]:hover { filter:brightness(1.06); }
.formulaire button:disabled { opacity:.6; cursor:default; }
.formulaire .inf-success { font-size:1rem !important; color:#0f6b45 !important; }
.formulaire .inf-success h4 { color:#0f6b45 !important; }
.formulaire .message { margin:14px 0 0; font-size:.92rem; min-height:1.2em; }
.formulaire .message.ok { color:#0f6b45; }
.formulaire .message.erreur { color:#a3342b; }

/* --- rappel anti-spam sous le formulaire --- */
.appel p.astuce-spam, .astuce-spam { background:#fff5e8; color:#7a4e0c; border-radius:12px;
  padding:15px 18px; font-size:.92rem; max-width:600px; margin:18px auto 0; text-align:left;
  line-height:1.6; }
.appel p.astuce-spam b, .astuce-spam b { color:#5c3a07; }


/* ===================================================================
   Revue design — écarts relevés le 04/10/2026
   =================================================================== */

/* 1. Le retour visuel n'existait qu'au survol : rien ne se passait au doigt.
      Un bouton doit réagir à l'appui, pas au relâchement. */
.bouton:active { transform:scale(.97); filter:brightness(.97); }
.formulaire button:active, .formulaire input[type=submit]:active { transform:scale(.99); }
.billet:active { transform:translateY(-1px); }
details summary:active { opacity:.7; }

/* 2. Aucune prise en compte des réglages d'accessibilité du système.
      Mouvement réduit : on garde la compréhension, on retire le déplacement. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .bouton:hover, .billet:hover, .bouton:active, .billet:active { transform:none; }
}

/* 3. Transparence réduite : la barre de navigation devient opaque, sinon le texte
      passe au travers du contenu pour qui a activé ce réglage. */
@media (prefers-reduced-transparency: reduce) {
  nav { background:var(--papier); backdrop-filter:none; }
  .etiquette, .bouton.clair { backdrop-filter:none; background:rgba(255,255,255,.22); }
}

/* 4. Contraste renforcé : bordures franches plutôt que nuances. */
@media (prefers-contrast: more) {
  .billet, .etape, .tarif, details, .formulaire { border-color:var(--encre-2); }
  .intro-section, .billet .route, .billet .habituel { color:var(--encre); }
}

/* 5. La FAQ portait le triangle par défaut du navigateur, désaligné et daté.
      Marqueur maison, qui pivote à l'ouverture et indique l'état. */
details { transition:border-color .15s ease; }
details[open] { border-color:color-mix(in srgb, var(--mer) 35%, var(--trait)); }
details summary { list-style:none; display:flex; align-items:center; gap:12px;
  padding-right:4px; }
details summary::-webkit-details-marker { display:none; }
details summary::before { content:"+"; flex:0 0 auto; display:grid; place-items:center;
  width:26px; height:26px; border-radius:50%; background:var(--mer-pale); color:var(--mer);
  font-weight:700; font-size:1.1rem; line-height:1; transition:transform .18s ease; }
details[open] summary::before { content:"−"; transform:rotate(180deg); }
details p { padding-left:38px; }

/* --- bandeau de destinations : deux rangées qui défilent en sens contraires --- */
.destinations { padding-bottom:56px; overflow:hidden; }
.defile { overflow:hidden; margin-top:14px;
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.defile { overflow-x:auto; }
.defile.anime { overflow:hidden; }
.defile .piste { display:flex; gap:14px; width:max-content; }
.defile.anime .piste { animation:defiler 90s linear infinite; }
.defile.droite .piste { animation-direction:reverse; }
.defile:hover .piste { animation-play-state:paused; }
.defile .copie { display:flex; gap:14px; }
.defile figure { margin:0; position:relative; width:260px; flex:none; border-radius:14px; overflow:hidden;
  box-shadow:var(--ombre); }
.defile img { width:260px; height:160px; object-fit:cover; }
.defile figcaption { position:absolute; inset:auto 0 0 0; padding:26px 12px 9px; color:#fff; font-weight:700;
  font-size:.95rem; background:linear-gradient(transparent, rgba(4,20,34,.78)); }
@keyframes defiler { to { transform:translateX(calc(-50% - 7px)); } }
@media (prefers-reduced-motion: reduce) {
  .defile { overflow-x:auto; } .defile .piste { animation:none; } .defile .copie { display:none; }
}

/* --- apparition douce des sections à l'arrivée dans l'écran --- */
@media (prefers-reduced-motion: no-preference) {
  .apparait { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
  .apparait.vu { opacity:1; transform:none; }
}

/* --- pages de route --- */
.page-route .fil { font-size:.9rem; color:var(--encre-2); margin:0 0 6px; }
.page-route .fil a { color:var(--encre-2); }
.page-route .resume { font-size:1.12rem; }
.page-route .visuel-route { width:100%; height:auto; border-radius:var(--rayon); margin:22px 0 8px; box-shadow:var(--ombre); }
.page-route .note { font-size:.9rem; color:var(--encre-2); }
.page-route .chiffres { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin:22px 0; }
.page-route .chiffres div { background:var(--carte); border:1px solid var(--trait); border-radius:14px; padding:16px 18px;
  color:var(--encre-2); font-size:.95rem; }
.page-route .chiffres b { display:block; font-size:1.5rem; color:var(--encre); letter-spacing:-.5px; }
.page-route .tableau { width:100%; border-collapse:collapse; margin:10px 0; }
.page-route .tableau th, .page-route .tableau td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--trait); }
.page-route .tableau th { font-size:.85rem; color:var(--encre-2); font-weight:700; }
.page-route h3 { margin:22px 0 6px; font-size:1.08rem; }
.page-route .liste-routes li { margin:0 0 10px; }

/* Page de confirmation : l'offre Premium, proposée tout de suite après le clic. */
.offre-confirmation { margin:28px auto; padding:22px 24px; max-width:520px; border-radius:18px;
  background:color-mix(in srgb,var(--mer) 8%, transparent); border:1px solid color-mix(in srgb,var(--mer) 25%, transparent); }
.offre-confirmation h2 { margin:0 0 8px; font-size:1.25rem; color:var(--encre); }
.offre-confirmation p { margin:0 0 14px; }
.offre-confirmation p:last-child { margin-bottom:0; }

/* Choix de la langue : la même liste déroulante en haut de chaque page. */
.choix-langue { appearance:none; -webkit-appearance:none; font:inherit; font-size:.9rem; font-weight:700;
  color:inherit; background:transparent; border:1px solid color-mix(in srgb,currentColor 35%, transparent);
  border-radius:999px; padding:7px 14px; cursor:pointer; max-width:9.5rem; }
.choix-langue option { color:#08243d; background:#fff; }
@media (max-width:760px) { .liens-nav > .choix-langue { display:inline-block; font-size:.85rem; padding:6px 10px; } }

/* Formulaire court, dans le haut de l'accueil (18/10/2026) : 28 visites venues de la pub, aucune
   inscription — le formulaire complet était 12 000 pixels plus bas sur un téléphone. */
.formulaire.compact { max-width:440px; margin:26px auto 0; padding:18px 18px 14px; text-align:left;
  box-shadow:0 18px 44px rgba(0,0,0,.28); }
.formulaire.compact select { margin-top:10px; }
.formulaire.compact .case { margin:12px 0 0; font-size:.86rem; }
.formulaire.compact button { margin-top:12px; }
.formulaire .proches { margin-top:8px; padding:10px 12px; background:#e8f3fb; border-radius:12px; }
.formulaire .proches .case { margin:4px 0 0; font-size:.9rem; }
.formulaire .proches-titre { margin:0 0 2px; font-size:.86rem; font-weight:650; color:#08243d; }
.lien-heros { display:inline-block; margin-top:16px; color:#fff; opacity:.85; font-weight:600; }
.formulaire .proches-indice { margin:0 0 4px; font-size:.82rem; color:#4d6a83; }
.formulaire details.autres { margin-top:14px; }
.formulaire details.autres summary { cursor:pointer; font-size:.92rem; font-weight:650; color:#0a6fb5; }
.formulaire details.autres .grille-villes { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:2px 12px; margin-top:10px; }
.formulaire details.autres .case { margin:4px 0 0; font-size:.88rem; }
.boite-mail { display:inline-block; margin-top:10px; padding:10px 22px; font-size:16px; }