/* Identité de Kerlann Kite (école fictive) : « le vent de l'anse »
   Clair et salé : écume en fond, le bleu
   du logo pour la marque, l'ajonc des côtes bretonnes réservé aux
   boutons de réservation, le sable de l'anse pour les aplats.
   Bricolage Grotesque (titres), Figtree (texte), IBM Plex Mono (horaires, places, prix). */
:root {
  color-scheme: light;
  --ecume: #f5f3ee;       /* fond */
  --blanc: #fdfcf9;       /* surfaces */
  --sable: #e7dcc6;       /* aplats, rappel des plages de l'anse */
  --sable-pale: #f0e9db;
  --nuit: #0f2a3a;        /* texte */
  --granit: #536570;      /* texte secondaire */
  --filet: #dcd6ca;
  --kk: #1a5576;        /* marque, le bleu du logo */
  --kk-fonce: #134560;
  --kk-pale: #dde9f0;
  --ajonc: #f4b62a;       /* appels à réserver */
  --ajonc-fonce: #9a6a00;
  --ok: #1f7a4d; --ok-pale: #dcf1e5;
  --attention: #8a5a00; --attention-pale: #fbefd3;
  --stop: #b23a2a; --stop-pale: #fbe3de;

  --f-titre: "Bricolage Grotesque", "Arial Black", "Helvetica Neue", sans-serif;
  --f-texte: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --f-data: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --r: 14px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ecume);
  color: var(--nuit);
  font: 16px/1.6 var(--f-texte);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--kk); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--kk); outline-offset: 2px; }

.titre {
  font-family: var(--f-titre);
  font-variation-settings: "wdth" 88, "opsz" 72;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-wrap: balance;
  margin: 0;
}
.data { font-family: var(--f-data); font-variant-numeric: tabular-nums; }
.etiquette {
  font: 500 0.8rem/1.3 var(--f-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kk);
}

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 10px; border: 0; cursor: pointer;
  font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, background-color .15s ease;
}
.bouton:active { transform: translateY(1px); }
.bouton:disabled { opacity: .45; cursor: not-allowed; }
.bouton-ajonc { background: var(--ajonc); color: var(--nuit); }
.bouton-ajonc:hover { background: #f7c650; }
.bouton-kk { background: var(--kk); color: var(--blanc); }
.bouton-kk:hover { background: var(--kk-fonce); }
.bouton-clair { background: var(--blanc); color: var(--nuit); border: 1px solid var(--filet); }
.bouton-clair:hover { border-color: var(--kk); }

.pastille {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 0.72rem/1 var(--f-data); letter-spacing: 0.04em; text-transform: uppercase;
  padding: 6px 9px; border-radius: 999px; white-space: nowrap;
}
.pastille::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.p-ok { background: var(--ok-pale); color: var(--ok); }
.p-attention { background: var(--attention-pale); color: var(--attention); }
.p-stop { background: var(--stop-pale); color: var(--stop); }
.p-kk { background: var(--kk-pale); color: var(--kk); }

/* Logo : le rond de l'école, repris tel quel. */
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--nuit); text-decoration: none; }
.logo img { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.logo b { font-family: var(--f-titre); font-variation-settings: "wdth" 80; font-weight: 800; font-size: 1.2rem; letter-spacing: 0.01em; line-height: 1; }
.logo small { display: block; font: 500 0.66rem/1.2 var(--f-data); letter-spacing: 0.08em; text-transform: uppercase; color: var(--granit); margin-top: 3px; }

/* Jauge de places : réservées / capacité */
.jauge { display: flex; gap: 3px; }
.jauge i { width: 12px; height: 12px; border-radius: 3px; background: var(--kk); }
.jauge i.libre { background: transparent; border: 1.5px solid var(--kk); }

/* Bandeau de démonstration commun au site et à l'admin */
.bandeau-demo {
  background: #0a0a0a; color: #ece7dd;
  font: 12px/1.4 ui-monospace, Menlo, monospace;
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: center;
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
  text-align: center;
}
.bandeau-demo a { color: #ff7a1a; text-decoration: none; }
.bandeau-demo a:hover { text-decoration: underline; }
.bandeau-demo span { color: #8f887d; }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 200%); background: var(--nuit); color: var(--blanc); padding: 12px 16px; border-radius: 12px; max-width: min(460px, calc(100% - 32px)); font-size: .92rem; transition: transform .3s ease; z-index: 60; }
.toast.visible { transform: translate(-50%, 0); }
.toast:not(.visible) { visibility: hidden; transition: transform .3s ease, visibility 0s .3s; }

/* ==========================================================================
   Site de l'école (pages HTML de demo/, en-tête et pied injectés par layout.js)
   Clarté : texte courant de 17 px minimum, un H1 par page, une idée par bloc,
   un seul bouton jaune (Réserver) par écran, prix écrits en clair.
   ========================================================================== */
body.site { font-size: 17px; line-height: 1.6; }
.site .enveloppe { max-width: 1140px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.site h2.titre { font-size: clamp(1.75rem, 3.6vw, 2.4rem); }
.site h3 { font-size: 1.2rem; line-height: 1.3; margin: 0; }
.site p { margin: 0; }
.site h2.etiquette { margin: 0; }
.site .aide { color: var(--granit); font-size: 1em; }
.site .etiquette { font-size: .85em; }
.site .bouton { font-size: 1rem; min-height: 48px; }
.lien-evitement { position: absolute; left: 12px; top: -60px; background: var(--nuit); color: var(--blanc); padding: 10px 14px; border-radius: 8px; z-index: 80; }
.lien-evitement:focus { top: 12px; }

/* Bandeau d'information (modifiable dans l'admin) */
.info { background: var(--kk); color: var(--blanc); text-align: center; font-weight: 600; font-size: 1rem; padding: 10px 20px; }

/* En-tête : logo (accueil), menu de sept entrées, bouton Réserver toujours visible */
.entete { position: sticky; top: 0; z-index: 30; background: var(--ecume); border-bottom: 1px solid var(--filet); }
.entete .enveloppe { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.nav { display: flex; gap: 4px; }
.nav a { color: var(--nuit); text-decoration: none; font-weight: 600; font-size: 1rem; padding: 8px 10px; border-radius: 8px; }
.nav a:hover { background: var(--sable-pale); }
.nav a[aria-current="page"] { color: var(--kk); box-shadow: inset 0 -3px 0 var(--kk); border-radius: 0; }
.entete-droite { display: flex; align-items: center; gap: 8px; }
.burger { display: none; border: 1px solid var(--filet); background: var(--blanc); border-radius: 10px; min-height: 48px; padding: 0 14px; font-weight: 700; cursor: pointer; }
.menu-mobile { display: none; border-top: 1px solid var(--filet); background: var(--blanc); }
.entete .menu-mobile .enveloppe { display: block; min-height: 0; }
.menu-mobile ul { list-style: none; margin: 0; padding: 8px 0 16px; }
.menu-mobile a { display: block; padding: 12px 0; color: var(--nuit); text-decoration: none; font-weight: 600; font-size: 1.1rem; border-bottom: 1px solid var(--filet); }
.menu-mobile a[aria-current="page"] { color: var(--kk); }
@media (max-width: 1020px) {
  .nav { display: none; }
  .burger { display: inline-flex; align-items: center; }
  .menu-mobile.ouvert { display: block; }
}
@media (max-width: 420px) { .entete .logo small { display: none; } .entete .logo b { font-size: 1.05rem; } .entete .bouton { padding: 10px 14px; } }

/* Fil d'Ariane */
.ariane { font-size: .94rem; color: var(--granit); padding-top: 22px; }
.ariane a { color: var(--granit); }

/* Tête de page : titre et chapô à gauche, une photo à droite (jamais de texte sur la photo) */
.page-tete { padding-block: 28px 56px; }
.page-tete .enveloppe { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.page-tete h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); }
.page-tete .chapo { font-size: 1.18rem; color: var(--granit); margin-top: 18px; max-width: 46ch; }
.page-tete .prix-des { margin-top: 18px; font: 500 1.05em var(--f-data); color: var(--nuit); }
.page-tete .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.page-tete img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; }
.page-tete.sans-photo .enveloppe { grid-template-columns: 1fr; }
@media (max-width: 860px) {
  .page-tete .enveloppe { grid-template-columns: 1fr; gap: 28px; }
  .page-tete img { aspect-ratio: 3 / 2; }
}
.lien-fleche { font-weight: 700; color: var(--kk); text-decoration: underline; text-underline-offset: 3px; }

/* Atouts : quatre faits courts */
.atouts { margin: 26px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; max-width: 520px; }
.atouts li { border-top: 2px solid var(--kk); padding-top: 8px; font-weight: 600; }

/* Blocs de contenu */
.bloc-page { padding-block: 44px; }
.bloc-page.sable { background: var(--sable-pale); padding-block: 56px; margin-block: 12px; }
.bloc-tete { display: grid; gap: 10px; margin-bottom: 28px; max-width: 62ch; }
.bloc-tete p { color: var(--granit); }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .grille-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .grille-2, .grille-3 { grid-template-columns: 1fr; } }
.carte { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r); padding: 22px; display: grid; gap: 10px; align-content: start; }
.carte p { color: var(--granit); }
.carte-photo { padding: 0; overflow: hidden; }
.carte-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.carte-photo .carte-corps { padding: 20px 22px 22px; display: grid; gap: 8px; }
.carte-photo h3 { font-size: 1.45rem; }
.carte .prix { font: 500 1em var(--f-data); color: var(--nuit); }
.points { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.points li { padding-left: 26px; position: relative; }
.points li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 10px; height: 10px; border-radius: 50%; background: var(--kk); }
.ordre { margin: 0; padding: 0; list-style: none; counter-reset: ordre; display: grid; gap: 14px; }
.ordre li { counter-increment: ordre; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.ordre li::before { content: counter(ordre); width: 36px; height: 36px; border-radius: 50%; background: var(--kk); color: var(--blanc); font: 500 1rem var(--f-data); display: grid; place-items: center; }
.ordre b { display: block; }
.ordre span { color: var(--granit); }

/* Puces (liste de spots) et faits courts */
.puces { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.puces li { background: var(--blanc); border: 1px solid var(--filet); border-radius: 999px; padding: 6px 14px; }
.faits-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.faits-trio div { border-top: 2px solid var(--kk); padding-top: 10px; }
.faits-trio b { display: block; font: 500 1.2rem var(--f-data); }
.faits-trio span { color: var(--granit); }
.citation { margin: 0; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r); padding: 22px; display: grid; gap: 10px; max-width: 760px; }
.citation blockquote { margin: 0; font-family: var(--f-titre); font-variation-settings: "wdth" 88; font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.25; }
.citation figcaption { color: var(--granit); }

/* Séances de demain (état décidé la veille dans l'admin) */
.demain-carte { background: var(--blanc); border: 1px solid var(--filet); border-left: 5px solid var(--kk); border-radius: var(--r); padding: 18px 20px; display: grid; gap: 6px; max-width: 760px; }
.demain-carte strong { font-family: var(--f-titre); font-variation-settings: "wdth" 85; font-size: 1.3rem; line-height: 1.2; }
.demain-carte p { color: var(--granit); }
.demain-carte.confirme { border-left-color: var(--ok); }
.demain-carte.reporte { border-left-color: var(--stop); }

/* Formules d'une activité */
.formules-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.formule-carte { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r); padding: 22px; display: grid; gap: 12px; grid-template-rows: auto auto 1fr auto; }
.formule-carte h3 { font-size: 1.3rem; }
.formule-carte .tarif { font-family: var(--f-data); }
.formule-carte .tarif b { font-size: 1.35rem; font-weight: 500; }
.formule-carte .tarif small { display: block; color: var(--granit); font-size: 1em; }
.formule-carte p { color: var(--granit); }
.formule-carte .faits { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.formule-carte .faits li { background: var(--kk-pale); color: var(--kk-fonce); border-radius: 999px; padding: 4px 11px; font-size: .92rem; font-weight: 600; }
.formule-carte .bouton { justify-self: start; }

/* Tableaux de prix */
.table-prix { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r); padding: 18px 22px; overflow-x: auto; }
.table-prix table { width: 100%; border-collapse: collapse; min-width: 420px; }
.table-prix caption { text-align: left; font-family: var(--f-titre); font-variation-settings: "wdth" 88; font-weight: 800; font-size: 1.5rem; padding-bottom: 10px; }
.table-prix th { font: 500 .8rem var(--f-data); letter-spacing: .05em; text-transform: uppercase; color: var(--granit); text-align: right; padding: 6px 0 8px 12px; vertical-align: bottom; }
.table-prix th:first-child { text-align: left; padding-left: 0; }
.table-prix td { padding: 11px 0; border-top: 1px solid var(--filet); vertical-align: top; }
.table-prix td + td { text-align: right; font-family: var(--f-data); white-space: nowrap; padding-left: 12px; }
.table-prix td small { display: block; color: var(--granit); font-size: .92rem; }

/* Questions fréquentes */
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r); padding: 16px 20px; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.06rem; }
.faq details p { margin-top: 10px; color: var(--granit); }

/* Formulaires du site (contact, réservation) */
.site .champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.site .champs .large { grid-column: 1 / -1; }
.site .champ { display: grid; gap: 6px; align-content: start; }
.site .champ label, .site .legende { font-weight: 700; font-size: 1rem; }
.site .champ .facultatif { font-weight: 400; color: var(--granit); }
.site input:not([type="checkbox"]):not([type="radio"]), .site select, .site textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #a9a397; border-radius: 10px; background: var(--blanc); font-size: 1rem; }
.site textarea { min-height: 130px; resize: vertical; }
.site input:focus, .site select:focus, .site textarea:focus { border-color: var(--kk); outline: 2px solid var(--kk); outline-offset: 0; }
.site .champ-invalide { border-color: var(--stop) !important; }
.site fieldset { border: 1px solid var(--filet); border-radius: var(--r); padding: 18px; margin: 0; display: grid; gap: 14px; background: var(--blanc); }
.site legend { font-weight: 700; padding: 0 6px; font-size: 1.05rem; }
.choix-liste { display: grid; gap: 10px; }
.choix-liste label { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--filet); border-radius: 12px; background: var(--blanc); cursor: pointer; }
.choix-liste label:has(input:checked) { border-color: var(--kk); box-shadow: inset 0 0 0 1px var(--kk); background: var(--kk-pale); }
.choix-liste input, .coche input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--kk); flex: none; }
.coche { display: flex; gap: 12px; align-items: flex-start; }
.erreur { background: var(--stop-pale); color: var(--stop); padding: 12px 14px; border-radius: 10px; font-weight: 600; }
.succes { background: var(--ok-pale); color: var(--nuit); padding: 16px 18px; border-radius: 12px; display: grid; gap: 6px; }
@media (max-width: 520px) { .site .champs { grid-template-columns: 1fr; } .site .champs.serres { grid-template-columns: 1fr 1fr; } }

/* Appel final : une question avant de réserver */
.appel { background: var(--kk); color: var(--blanc); border-radius: 22px; padding: clamp(24px, 4vw, 40px); display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
.appel h2.titre { font-size: clamp(1.5rem, 3vw, 2rem); }
.appel p { color: #dde9f0; margin-top: 8px; }
.appel a:not(.bouton) { color: var(--blanc); }
@media (max-width: 760px) { .appel { grid-template-columns: 1fr; } }

/* Pied de page */
footer.pied { background: var(--kk-fonce); color: #d5e3eb; padding-block: 52px 36px; margin-top: 56px; }
footer.pied .enveloppe { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
footer.pied .logo { color: var(--blanc); }
footer.pied .logo small { color: #a9c3d1; }
footer.pied h2 { margin: 0 0 10px; font: 500 .8rem var(--f-data); letter-spacing: .08em; text-transform: uppercase; color: #a9c3d1; }
footer.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
footer.pied a { color: var(--blanc); }
footer.pied a[aria-current="page"] { color: var(--ajonc); }
.marques { grid-column: 1 / -1; border-top: 1px solid #2d6684; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 22px; font: .9rem var(--f-data); color: #a9c3d1; }
@media (max-width: 900px) { footer.pied .enveloppe { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { footer.pied .enveloppe { grid-template-columns: 1fr; } }

.maj { animation: maj 1.6s ease; }
@keyframes maj { 0% { box-shadow: 0 0 0 0 var(--ajonc); } 30% { box-shadow: 0 0 0 4px var(--ajonc); } 100% { box-shadow: 0 0 0 0 transparent; } }

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

/* Un seul bouton Réserver à l'écran (cf. layout.js, unSeulBoutonReserver). */
.entete .bouton-ajonc { transition: opacity .2s ease, visibility .2s; }
.entete .bouton-ajonc.en-retrait { opacity: 0; visibility: hidden; }

/* ==========================================================================
   Niveau « qui marque » (05/11/2026) : le vent de l'anse, en mouvement.
   Données vivantes (vent.js), appel de Tanguy (layout.js), mouvement
   (/pour/_commun/motion.js et courants.js). Tout effet a son repli :
   mouvement réduit = statique, tactile = rails natifs et fondus simples.
   ========================================================================== */
:root { --nuit-2: #0a2230; --ecume-sur-nuit: #dbe7ee; --courbe: cubic-bezier(.22, .8, .2, 1); }

/* Grain : une texture fixe et légère (SVG feTurbulence), rien n'est animé. */
body.site::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Transitions entre pages : la photo de l'activité devient le héros de sa page,
   le reste passe derrière un voile bleu Kerlann qui balaie l'écran. */
@view-transition { navigation: auto; }
::view-transition-group(root) { background: var(--kk); animation-duration: .7s; }
::view-transition-old(root) { animation: vt-sortie .42s var(--courbe) both; }
::view-transition-new(root) { animation: vt-entree .5s .18s var(--courbe) both; }
@keyframes vt-sortie { to { clip-path: inset(0 0 100% 0); } }
@keyframes vt-entree { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
::view-transition-group(*) { animation-duration: .65s; animation-timing-function: var(--courbe); }
.entete { view-transition-name: entete; }
.vt-kitesurf { view-transition-name: photo-kitesurf; }
.vt-wingfoil { view-transition-name: photo-wingfoil; }
.vt-simulateur { view-transition-name: photo-simulateur; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Conditions en direct (bandeau d'en-tête) ---------- */
.direct { background: var(--nuit); color: var(--ecume-sur-nuit); height: 40px; font: 500 .86rem/1 var(--f-data); font-variant-numeric: tabular-nums;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h11a3 3 0 1 0-3-3M3 13h15a3 3 0 1 1-3 3M3 17h7' fill='none' stroke='%23f5f3ee' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 4 13, pointer; }
.direct .enveloppe { height: 100%; display: flex; align-items: center; }
.direct-lien { display: flex; align-items: center; gap: 22px; height: 100%; width: 100%; color: inherit; text-decoration: none; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.direct-lien::-webkit-scrollbar { display: none; }
.direct-lien > span { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.direct-lien b { color: #fff; font-weight: 500; }
.direct-lieu { text-transform: uppercase; letter-spacing: .1em; color: #8fb0c2; }
.direct-attente, .direct-repli, .direct-source { color: #8fa5b1; }
.direct-source { margin-left: auto; font-size: .78rem; }
.direct .fleche-vent { color: var(--ajonc); transition: transform 1.4s var(--courbe); }
.direct-lien:hover .direct-vent b { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .direct { height: 38px; font-size: .82rem; } .direct-lien { gap: 16px; } .direct-source { display: none !important; } }

/* ---------- Héros plein cadre ---------- */
.heros { position: relative; isolation: isolate; overflow: hidden; background: var(--nuit); color: #fff;
  min-height: max(560px, calc(100svh - 150px)); display: flex; align-items: flex-end; }
.heros-photo { position: absolute; inset: -6% 0 -6% 0; z-index: -3; overflow: hidden; }
.heros-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; animation: ken-burns 26s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes ken-burns { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }
.heros canvas[data-courants] { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.heros canvas.courants-actifs { opacity: 1; }
.heros-voile { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(10,34,48,.38) 0%, rgba(10,34,48,0) 30%, rgba(10,34,48,.2) 52%, rgba(10,34,48,.9) 100%),
  linear-gradient(90deg, rgba(10,34,48,.55) 0%, rgba(10,34,48,0) 62%); }
.heros-geant { position: absolute; z-index: -1; right: -2vw; top: 6%; font: 800 clamp(7rem, 30vw, 30rem)/.8 var(--f-titre); font-variation-settings: "wdth" 75, "opsz" 96; letter-spacing: -.04em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.28); pointer-events: none; user-select: none; transform-origin: 80% 30%; }
.heros-texte { position: relative; width: 100%; padding-block: 48px clamp(36px, 6vh, 64px); }
.heros .etiquette { color: #cfe0ea; }
.heros h1 { font-size: clamp(2.7rem, 7.4vw, 6.6rem); line-height: .95; max-width: 15ch; margin-top: 14px; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.heros .chapo { font-size: clamp(1.08rem, 1.6vw, 1.3rem); color: #e8f0f4; margin-top: 20px; max-width: 46ch; }
.heros .prix-des { margin-top: 16px; font: 500 1.05em var(--f-data); color: #fff; }
.heros .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 26px; }
.heros .lien-fleche, .heros a:not(.bouton) { color: #fff; }
.heros .ariane { padding: 0 0 18px; color: #cfe0ea; }
.heros .ariane a { color: #fff; }
.heros-faits { list-style: none; margin: 30px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.25); display: flex; flex-wrap: wrap; gap: 10px 34px; font-weight: 600; }
.heros-faits li { display: flex; gap: 10px; align-items: baseline; }
.heros-faits li::before { content: ""; width: 7px; height: 7px; background: var(--ajonc); border-radius: 50%; flex: none; transform: translateY(-2px); }
.heros-legende { position: absolute; right: max(20px, env(safe-area-inset-right)); top: 18px; font: .8rem var(--f-data); color: #b9cfdb; max-width: 30ch; text-align: right; }
.appel-resume { display: inline-flex; gap: 8px; align-items: center; padding: 9px 14px; border-radius: 999px; background: rgba(10,34,48,.6); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); color: #fff; text-decoration: none; font: 500 .9rem var(--f-data); }
.appel-resume::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #f2c46b; box-shadow: 0 0 0 0 rgba(242,196,107,.6); animation: pouls 2.4s ease-out infinite; }
.appel-resume.r-confirme::before, .appel-resume.r-partiel::before { background: #6fd39a; }
.appel-resume.r-reporte::before { background: #ff8f7a; }
@keyframes pouls { 70% { box-shadow: 0 0 0 10px rgba(242,196,107,0); } 100% { box-shadow: 0 0 0 0 rgba(242,196,107,0); } }
.heros-page { min-height: max(480px, 68svh); }
.heros-page h1 { font-size: clamp(2.4rem, 6vw, 5rem); }
@media (max-width: 760px) {
  .heros { min-height: max(520px, 82svh); }
  .heros-page { min-height: max(460px, 70svh); }
  .heros-geant { top: 4%; font-size: 38vw; -webkit-text-stroke-width: 1px; }
  .heros-voile { background: linear-gradient(180deg, rgba(10,34,48,.3) 0%, rgba(10,34,48,.05) 26%, rgba(10,34,48,.55) 50%, rgba(10,34,48,.94) 100%); }
  .heros-faits { gap: 8px 22px; font-size: 1rem; }
  .heros-legende { display: none; }
}

/* Titre vivant : lettres masquées, houle légère, trait dessiné sous le dernier mot. */
.mvt [data-kinetic] { opacity: 0; animation: mvt-secours 0s 2.6s forwards; }
@keyframes mvt-secours { to { opacity: 1; } }
[data-kinetic] { position: relative; }
.kt-ligne { padding-block: .1em; margin-block: -.1em; }
.kt-houle { display: inline-block; }
.kt-vivant .kt-houle { animation: kt-ola 4.2s ease-in-out infinite; }
@keyframes kt-ola { 0%, 14%, 100% { transform: translateY(0); } 6% { transform: translateY(-2px) rotate(-1deg); } }
.kt-trait { position: absolute; height: .2em; overflow: visible; pointer-events: none; }
.kt-trait path { fill: none; stroke: var(--sable); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.heros .kt-trait path { stroke: var(--ajonc); }

/* Photos révélées par un volet */
[data-revele] { overflow: hidden; }
.site figure img { height: auto; }
[data-revele] img { transform-origin: 50% 60%; }

/* ---------- Bandeau géant qui défile ---------- */
.defile { overflow: hidden; padding-block: clamp(18px, 3vw, 34px); background: var(--ecume); border-block: 1px solid var(--filet); }
.defile-piste { display: flex; width: max-content; white-space: nowrap; will-change: transform; transform: skewX(var(--penche, 0deg)); }
.defile-piste span { font: 800 clamp(3rem, 9vw, 8.5rem)/1 var(--f-titre); font-variation-settings: "wdth" 75, "opsz" 96; text-transform: uppercase; letter-spacing: -.02em; padding-right: .4em; color: var(--nuit); }
.defile-piste span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--kk); }
.defile { --penche: 0deg; }
.mvt-statique .defile-piste { flex-wrap: wrap; width: auto; }

/* ---------- Houle entre deux sections ---------- */
.houle { height: 90px; margin-block: -10px; pointer-events: none; }
.houle svg { width: 100%; height: 100%; display: block; }
.houle-trait { fill: none; stroke: var(--kk); stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: .7; }
.houle-2 { stroke: var(--ajonc-fonce); opacity: .35; }
.sur-nuit .houle-trait { stroke: #8fb0c2; }

/* ---------- L'appel de Tanguy ---------- */
.bloc-nuit { background: var(--nuit); color: var(--ecume-sur-nuit); padding-block: clamp(56px, 8vw, 96px); }
.bloc-nuit .titre { color: #fff; }
.bloc-nuit .bloc-tete p, .bloc-nuit .aide { color: #a9c3d1; }
.bloc-nuit .etiquette { color: #8fb0c2; }
.bloc-nuit a:not(.bouton) { color: #fff; }
.appel-tableau { background: var(--nuit-2); border: 1px solid #22465a; border-radius: 6px; padding: clamp(18px, 3vw, 30px); display: grid; gap: 18px; color: var(--ecume-sur-nuit); }
.appel-tete { display: grid; gap: 6px; }
.appel-tete h3 { font: 800 clamp(1.6rem, 3.4vw, 2.4rem)/1.05 var(--f-titre); font-variation-settings: "wdth" 80; color: #fff; margin: 0; }
.appel-tete h3::first-letter { text-transform: uppercase; }
.appel-tete .etiquette { color: var(--ajonc); }
.appel-quand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #a9c3d1; }
.appel-lignes { list-style: none; margin: 0; padding: 0; border-top: 1px solid #22465a; }
.appel-ligne { display: grid; grid-template-columns: 172px 180px 1fr minmax(200px, 1.1fr); gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid #22465a; font-family: var(--f-data); }
.appel-statut { perspective: 400px; }
.appel-mot { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-width: 7.5ch; padding: 8px 12px; border-radius: 4px; font: 500 1.05rem var(--f-data); letter-spacing: .08em; text-transform: uppercase; background: #13394d; color: #f2c46b; transform-origin: 50% 50%; }
.appel-mot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; }
.s-on .appel-mot { background: #12402f; color: #6fd39a; }
.s-on .appel-mot::before { background: currentColor; }
.s-off .appel-mot { background: #47201a; color: #ff9d8a; }
.s-off .appel-mot::before { border-radius: 1px; transform: rotate(45deg); background: currentColor; width: 8px; height: 8px; }
.appel-mot.bascule { animation: bascule .7s var(--courbe); }
@keyframes bascule { 0% { transform: rotateX(0); } 45% { transform: rotateX(90deg); } 55% { transform: rotateX(-90deg); } 100% { transform: rotateX(0); } }
.appel-heure { font-size: 1.05rem; color: #fff; }
.appel-quoi { display: grid; gap: 2px; font-family: var(--f-texte); }
.appel-quoi b { color: #fff; font-weight: 600; }
.appel-quoi small, .appel-vent small { color: #8fa5b1; font-size: .9rem; }
.appel-vent { display: grid; gap: 3px; color: #fff; }
.appel-modele { font-family: var(--f-data); }
.appel-message { font: 600 1.1rem var(--f-texte); color: #fff; border-left: 3px solid var(--ajonc); padding-left: 14px; }
.appel-vide { color: #a9c3d1; }
@media (max-width: 860px) {
  .appel-ligne { grid-template-columns: auto 1fr; gap: 6px 14px; padding: 14px 0; }
  .appel-statut { grid-row: span 3; align-self: start; }
  .appel-mot { min-width: 0; font-size: .95rem; }
}

/* ---------- Le contrat « pas de vent » ---------- */
.contrat { display: grid; gap: 22px; }
.contrat h3.titre { font-size: clamp(1.5rem, 3vw, 2.2rem); max-width: 22ch; }
.contrat-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: c; }
.contrat-points li { counter-increment: c; display: grid; gap: 6px; padding-top: 14px; border-top: 2px solid currentColor; }
.contrat-points li::before { content: "0" counter(c); font: 500 .85rem var(--f-data); opacity: .7; }
.contrat-points b { font-size: 1.12rem; }
.contrat-points span { opacity: .85; }
.contrat-confiance { font-weight: 600; max-width: 60ch; }
.bloc-nuit .contrat-points li { border-color: #3a6278; }
@media (max-width: 760px) { .contrat-points { grid-template-columns: 1fr; } }

/* ---------- Prévision lue pour un niveau ---------- */
.prevision { display: grid; gap: 18px; }
.prevision-tete { display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: end; }
.prevision-tete h3.titre { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 6px 0 8px; }
@media (max-width: 860px) { .prevision-tete { grid-template-columns: 1fr; } }
.choix-niveau { display: grid; gap: 8px; justify-items: start; }
.choix-niveau [role="group"] { display: inline-flex; border: 1px solid currentColor; border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.choix-niveau button { border: 0; background: none; border-radius: 999px; padding: 8px 15px; min-height: 40px; cursor: pointer; font-weight: 600; font-size: .98rem; color: inherit; transition: background-color .25s, color .25s; }
.choix-niveau button[aria-pressed="true"] { background: var(--nuit); color: #fff; }
.bloc-nuit .choix-niveau button[aria-pressed="true"] { background: #fff; color: var(--nuit); }
.jours { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; perspective: 1000px; }
.jour { display: grid; grid-template-columns: 130px 110px 1fr 250px 150px; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 6px; background: rgba(255,255,255,.04); border: 1px solid #22465a; transform-origin: 50% 0; }
.jour-nom { font-weight: 700; color: #fff; }
.jour-nom::first-letter { text-transform: uppercase; }
.verdict { display: inline-flex; align-items: center; gap: 8px; font: 500 .95rem var(--f-data); text-transform: uppercase; letter-spacing: .06em; }
.verdict i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; }
.v-bon .verdict { color: #6fd39a; } .v-bon .verdict i { background: currentColor; }
.v-avoir .verdict { color: #f2c46b; } .v-avoir .verdict i { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.v-non .verdict { color: #ff9d8a; }
.jour-creneau { color: var(--ecume-sur-nuit); }
.jour-vent { display: flex; align-items: center; gap: 8px; font-family: var(--f-data); color: #fff; white-space: nowrap; }
.jour-vent small { color: #8fa5b1; font-size: .82rem; }
.jour-vent .fleche-vent { color: var(--ajonc); flex: none; }
.jour-heures { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.jour-heures i, .prevision-legende i { height: 14px; border-radius: 2px; display: block; background: #3a2a2a; }
.h2 { background: #2f9e67 !important; } .h1 { background: #c79a3a !important; } .h0 { background: #5a3530 !important; }
.prevision-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font: .85rem var(--f-data); color: #8fa5b1; }
.prevision-legende span { display: inline-flex; gap: 6px; align-items: center; }
.prevision-legende i { width: 14px; }
.prevision-repli { color: #a9c3d1; }
.jours.a-retourner .jour { opacity: 0; transform: rotateX(-75deg) translateY(10px); }
.jours.retourne .jour { opacity: 1; transform: none; transition: transform .8s var(--courbe), opacity .5s ease; transition-delay: calc(var(--i) * 70ms); }
@media (max-width: 860px) {
  .jour { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .jour-creneau, .jour-heures { grid-column: 1 / -1; }
  .jour-vent { grid-column: 1 / -1; }
}

/* ---------- Piste horizontale : les activités ---------- */
.piste { position: relative; background: var(--nuit); color: #fff; padding-block: 34px 28px; overflow: hidden; }
.piste-tete { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.piste-tete h2.titre { color: #fff; font-size: clamp(2rem, 4.4vw, 3.6rem); }
.piste-tete p { color: #a9c3d1; max-width: 46ch; margin-top: 8px; }
.piste-repere { display: grid; gap: 10px; justify-items: end; font: 500 1rem var(--f-data); color: #a9c3d1; }
.piste-compteur { display: inline-flex; align-items: baseline; gap: 6px; }
.piste-compteur .roule { display: inline-block; height: 1.6em; overflow: hidden; vertical-align: bottom; font-size: 1.6em; color: #fff; }
.piste-compteur .roule span { display: block; line-height: 1.6em; transform: translateY(calc(var(--n, 0) * -1.6em)); transition: transform .6s var(--courbe); }
.piste-barre { width: 180px; height: 2px; background: #2b5268; }
.piste-barre i { display: block; height: 100%; background: var(--ajonc); transform: scaleX(0); transform-origin: 0 50%; }
.piste-rail { display: flex; gap: 2vw; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: max(20px, calc((100vw - 1140px) / 2)); overscroll-behavior-x: contain; }
.piste-rail::-webkit-scrollbar { display: none; }
.piste-active .piste-rail { overflow: visible; scroll-snap-type: none; }
.piste-active { height: 100svh; padding-block: 28px; display: flex; flex-direction: column; justify-content: center; }
.panneau { position: relative; flex: none; width: min(78vw, 1060px); height: min(70svh, 640px); scroll-snap-align: center; border-radius: 4px; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; color: #fff; }
.panneau-photo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.panneau-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--courbe); }
.panneau::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,34,48,.15) 20%, rgba(10,34,48,.92) 100%), linear-gradient(90deg, rgba(10,34,48,.55), rgba(10,34,48,0) 70%); }
.panneau-mot { position: absolute; z-index: -1; top: 4%; right: -2%; font: 800 clamp(5rem, 16vw, 15rem)/.8 var(--f-titre); font-variation-settings: "wdth" 75, "opsz" 96; text-transform: uppercase; color: rgba(255,255,255,.14); letter-spacing: -.03em; pointer-events: none; }
.panneau-corps { padding: clamp(22px, 3.4vw, 44px); display: grid; gap: 12px; max-width: 620px; }
.panneau-chapitre { font: 500 .85rem var(--f-data); letter-spacing: .14em; text-transform: uppercase; color: var(--ajonc); }
.panneau h3 { font: 800 clamp(2.4rem, 5.4vw, 4.6rem)/.95 var(--f-titre); font-variation-settings: "wdth" 78; margin: 0; }
.panneau p { color: #e3edf2; }
.panneau .prix { font: 500 1.08rem var(--f-data); color: #fff; }
.panneau-surete { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.panneau-surete li { border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 4px 12px; font-size: .92rem; font-weight: 600; }
.panneau .bouton { justify-self: start; }
.panneau-fin { background: var(--kk); align-items: center; justify-content: center; text-align: center; }
.panneau-fin::after { display: none; }
.panneau-fin .panneau-corps { justify-items: center; }
@media (hover: hover) { .panneau:hover .panneau-photo img { transform: scale(1.06); } }
@media (max-width: 900px), (hover: none) {
  .panneau { width: 84vw; height: auto; min-height: min(72svh, 600px); }
  .panneau-corps { padding: 22px 20px; gap: 10px; }
  .panneau-surete li { font-size: .85rem; padding: 3px 10px; }
  .piste-repere { justify-items: start; }
}

/* ---------- Test de niveau en trois touches ---------- */
.trouver { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .trouver { grid-template-columns: 1fr; } }
.trouver-ecran { background: var(--blanc); border: 1px solid var(--filet); border-radius: 6px; padding: clamp(20px, 3vw, 34px); display: grid; gap: 18px; min-height: 420px; align-content: start; }
.trouver-pas { display: flex; gap: 6px; }
.trouver-pas i { flex: 1; height: 4px; background: var(--filet); border-radius: 2px; transition: background-color .3s; }
.trouver-pas i.fait { background: var(--kk); }
.site .trouver-q { font: 800 clamp(1.5rem, 3vw, 2.1rem)/1.1 var(--f-titre); font-variation-settings: "wdth" 85; margin: 0; }
.trouver-q:focus, .trouver-niveau:focus { outline: none; }
.trouver-options { display: grid; gap: 10px; }
.trouver-options button { display: grid; gap: 2px; text-align: left; padding: 15px 18px; border: 1px solid #bdb6a8; border-radius: 6px; background: var(--blanc); cursor: pointer; min-height: 60px; transition: border-color .2s, transform .25s var(--courbe), background-color .2s; }
.trouver-options button:hover { border-color: var(--kk); transform: translateX(4px); background: var(--kk-pale); }
.trouver-options b { font-size: 1.1rem; }
.trouver-options small { color: var(--granit); font-size: .95rem; }
.trouver-retour { justify-self: start; border: 0; background: none; color: var(--kk); font-weight: 700; text-decoration: underline; cursor: pointer; padding: 6px 0; }
.trouver-resultat { display: grid; gap: 14px; }
.site .trouver-niveau { font: 800 clamp(2rem, 4.6vw, 3.2rem)/1 var(--f-titre); font-variation-settings: "wdth" 80; color: var(--kk); margin: 0; }
.trouver-resultat .formule-reco { border-top: 1px solid var(--filet); padding-top: 14px; display: grid; gap: 6px; }
.trouver-resultat .formule-reco b { font-size: 1.2rem; }
.trouver-resultat .prix { font: 500 1.05rem var(--f-data); }
.trouver-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 6px; }
.trouver-entree { animation: trouver-entree .5s var(--courbe); }
@keyframes trouver-entree { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Échelle de la méthode ---------- */
.echelle { display: grid; gap: 28px; }
.echelle-haut { position: relative; }
.echelle-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; position: relative; }
.echelle-trait { position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: var(--filet); }
.echelle-trait i { display: block; height: 100%; background: var(--kk); transform-origin: 0 50%; }
.echelle-etape { position: relative; display: grid; gap: 8px; align-content: start; }
.echelle-num { width: 46px; height: 46px; border-radius: 50%; background: var(--ecume); border: 2px solid var(--kk); display: grid; place-items: center; font: 500 1.05rem var(--f-data); color: var(--kk); position: relative; z-index: 1; }
.echelle-etape:last-child .echelle-num { background: var(--kk); color: #fff; }
.echelle-etape b { font: 800 1.3rem/1.15 var(--f-titre); font-variation-settings: "wdth" 85; }
.echelle-etape span { color: var(--granit); }
.echelle-formules { display: grid; gap: 8px; }
.echelle-formule { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; align-items: center; }
.echelle-formule .barre-f { height: 30px; border-radius: 4px; background: var(--kk-pale); color: var(--kk-fonce); font: 600 .92rem var(--f-texte); display: flex; align-items: center; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sable .echelle-num { background: var(--sable-pale); }
@media (max-width: 860px) {
  .echelle-liste { grid-template-columns: 1fr; gap: 16px; padding-left: 0; }
  .echelle-trait { left: 22px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .echelle-trait i { transform-origin: 50% 0; height: 100%; width: 100%; }
  .echelle-etape { grid-template-columns: 46px 1fr; column-gap: 14px; }
  .echelle-etape b, .echelle-etape span { grid-column: 2; }
  .echelle-num { grid-row: span 2; }
  .echelle-formule { grid-template-columns: 1fr; }
  .echelle-formule .barre-f { grid-column: 1 !important; }
}
.echelle-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.echelle-mini i { width: 22px; height: 6px; border-radius: 3px; background: var(--filet); }
.echelle-mini i.dedans { background: var(--kk); }
.echelle-mini small { flex-basis: 100%; color: var(--granit); font-size: .92rem; margin-top: 2px; }

/* ---------- Le vent du mois (accueil) ---------- */
.teaser-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.teaser-chiffres div { border-top: 2px solid var(--kk); padding-top: 12px; display: grid; gap: 6px; }
.teaser-chiffres b { font: 500 clamp(2.2rem, 4.6vw, 3.6rem)/1 var(--f-data); color: var(--nuit); font-variant-numeric: tabular-nums; }
.teaser-chiffres span { color: var(--granit); }
@media (max-width: 760px) { .teaser-chiffres { grid-template-columns: 1fr 1fr; } }

/* ---------- Calendrier du vent ---------- */
.cal-tete { display: grid; grid-template-columns: 1fr auto; gap: 16px 28px; align-items: end; margin-bottom: 14px; }
@media (max-width: 860px) { .cal-tete { grid-template-columns: 1fr; } }
.cal-graphe { position: relative; background: var(--blanc); border: 1px solid var(--filet); border-radius: 6px; padding: 14px 10px 8px; overflow-x: auto; }
.cal-graphe svg { width: 100%; min-width: 560px; height: auto; display: block; }
.cal-grille { stroke: var(--filet); stroke-width: 1; }
.cal-axe { font: 11px var(--f-data); fill: var(--granit); }
.cal-cible { fill: transparent; }
.cal-barre { fill: var(--kk); transition: fill .2s; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--p, 1)); }
.ce-mois .cal-barre { fill: var(--nuit); }
.cal-mois:hover .cal-barre, .cal-mois:focus .cal-barre { fill: var(--kk-fonce); }
.cal-mois { cursor: default; outline: none; }
.cal-mois:focus-visible .cal-cible { fill: var(--kk-pale); }
.cal-valeur { font: 500 13px var(--f-data); fill: var(--nuit); }
.cal-nom { font: 600 12px var(--f-texte); fill: var(--nuit); }
.ce-mois .cal-nom { font-weight: 800; }
.cal-aile { font: 11px var(--f-data); fill: var(--granit); }
.cal-ideal line { stroke: var(--ok); stroke-width: 2; }
.cal-ideal text { font: 600 12px var(--f-texte); fill: var(--ok); }
.cal-bulle { position: absolute; left: 0; top: 6px; width: 240px; background: var(--nuit); color: #fff; padding: 10px 12px; border-radius: 6px; font-size: .9rem; line-height: 1.4; pointer-events: none; z-index: 2; }
.cal-table { margin-top: 12px; }
.cal-table summary { cursor: pointer; font-weight: 700; color: var(--kk); }
.table-defile { overflow-x: auto; margin-top: 10px; }
.cal-table table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: .95rem; }
.cal-table th, .cal-table td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--filet); text-align: right; font-family: var(--f-data); }
.cal-table th:first-child { text-align: left; font-family: var(--f-texte); }
.cal-source { margin-top: 12px; color: var(--granit); font-size: .92rem; max-width: 80ch; }

/* ---------- Conditions, marée et rose (page Le spot) ---------- */
.conditions-grille { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; }
@media (max-width: 760px) { .conditions-grille { grid-template-columns: 1fr; } }
.conditions-vent { display: flex; gap: 20px; align-items: center; }
.conditions-fleche { width: 96px; height: 96px; border-radius: 50%; border: 1px solid #3a6278; display: grid; place-items: center; color: var(--ajonc); flex: none; }
.conditions-fleche .fleche-vent { transition: transform 1.6s var(--courbe); }
.conditions-nds { display: block; font: 500 clamp(3rem, 7vw, 5rem)/1 var(--f-data); color: #fff; }
.conditions-nds small { font-size: .35em; color: #a9c3d1; }
.conditions-vent span { color: #cfe0ea; }
.conditions-faits { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.conditions-faits div { border-top: 1px solid #3a6278; padding-top: 8px; }
.conditions-faits dt { font: 500 .78rem var(--f-data); letter-spacing: .1em; text-transform: uppercase; color: #8fb0c2; }
.conditions-faits dd { margin: 4px 0 0; font: 500 1.15rem var(--f-data); color: #fff; }
.conditions-repli { color: #cfe0ea; }
.maree { margin: 20px 0 10px; }
.maree svg { width: 100%; height: auto; max-height: 150px; }
.maree figcaption { color: #a9c3d1; font-size: .92rem; }
.maree-ligne { fill: none; stroke: #8fb0c2; stroke-width: 2; }
.maree-maint { stroke: var(--ajonc); stroke-width: 1.5; }
.maree-point { fill: #fff; }
.maree-txt { font: 12px var(--f-data); fill: #cfe0ea; }
.spot-vent { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 760px) { .spot-vent { grid-template-columns: 1fr; } }
.rose { margin: 0; display: grid; gap: 10px; }
.rose svg { width: 100%; max-width: 360px; height: auto; }
.rose figcaption { color: var(--granit); font-size: .95rem; }
.rose-anneau { fill: none; stroke: var(--filet); }
.rose-part { fill: var(--kk); stroke: var(--ecume); stroke-width: 2; transform-origin: 160px 160px; }
.mvt .rose-part { animation: rose-pousse .9s var(--courbe) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes rose-pousse { from { transform: scale(0); } }
.rose-nom { font: 600 12px var(--f-data); fill: var(--granit); }
.rose-live { transform-origin: 160px 160px; transition: transform 1.4s var(--courbe); }
.rose-live line, .rose-live path { stroke: var(--ajonc-fonce); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rose-dominant { font-size: 1.15rem; }
.rose-dominant b { font: 500 1.6rem var(--f-data); color: var(--kk); }
.spot-faits { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.spot-faits li { border-top: 1px solid var(--filet); padding-top: 12px; display: grid; gap: 4px; }
.spot-faits b { font-size: 1.08rem; }
.spot-faits span { color: var(--granit); }

/* ---------- Barre basse (téléphone) ---------- */
.barre-basse { display: none; }
@media (max-width: 760px) {
  body.site { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .entete .bouton-ajonc { display: none; }
  .barre-basse { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 8px; align-items: center;
    padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
    background: rgba(253,252,249,.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--filet); }
  .barre-btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--filet); border-radius: 10px; background: var(--blanc); color: var(--nuit); font: 700 1rem var(--f-texte); text-decoration: none; cursor: pointer; padding: 0 10px; }
  .barre-milieu { display: grid; }
  .barre-milieu > * { grid-area: 1 / 1; transition: opacity .2s, visibility .2s; }
  .barre-reserver { width: 100%; }
  .barre-basse .barre-tarifs { opacity: 0; visibility: hidden; }
  .barre-basse.reserver-en-page .barre-reserver, .barre-basse.sans-reserver .barre-reserver { opacity: 0; visibility: hidden; }
  .barre-basse.reserver-en-page .barre-tarifs, .barre-basse.sans-reserver .barre-tarifs { opacity: 1; visibility: visible; }
  .barre-feuille { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 8px); background: var(--blanc); border: 1px solid var(--filet); border-radius: 12px; padding: 14px 16px; box-shadow: 0 10px 40px rgba(15,42,58,.18); }
  .barre-feuille ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
  .barre-feuille a { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--filet); color: var(--nuit); text-decoration: none; }
  .barre-feuille small { color: var(--granit); font-size: .92rem; }
  .toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Clin d'œil : une volée de kites ---------- */
.volee { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; }
.volee svg { position: absolute; left: -90px; top: var(--y); width: 54px; height: 81px; animation: vole var(--d) cubic-bezier(.3,.1,.4,1) calc(var(--i) * .35s) both; }
@keyframes vole {
  0% { transform: translate(0, 0) rotate(-18deg); }
  30% { transform: translate(35vw, -9vh) rotate(12deg); }
  60% { transform: translate(70vw, 4vh) rotate(-10deg); }
  100% { transform: translate(calc(100vw + 180px), -14vh) rotate(16deg); }
}

/* Mouvement réduit : rien ne bouge, tout est visible. */
@media (prefers-reduced-motion: reduce) {
  .heros-photo img { animation: none; }
  .jours.a-retourner .jour { opacity: 1; transform: none; }
  .appel-resume::before { animation: none; }
}
.site main [id] { scroll-margin-top: 84px; }
/* Place réservée aux blocs remplis par vent.js : pas de saut quand les données arrivent. */
[data-prevision] { min-height: 640px; }
[data-conditions] { min-height: 300px; }
[data-calendrier] { min-height: 520px; }
@media (max-width: 860px) { [data-prevision] { min-height: 1100px; } [data-conditions] { min-height: 460px; } }