{{-- Météo & marées + planificateur paddle — partagé entre /le-bassin et /meteo-marees. --}}
    {{-- MÉTÉO & MARÉES (7 jours) --}}
    <section class="max-w-6xl mx-auto px-4 py-16">
        <div class="text-center max-w-2xl mx-auto mb-10">
            <p class="uppercase tracking-[0.25em] text-xs text-sea font-semibold mb-2">Préparez votre séjour</p>
            <h2 class="text-3xl md:text-4xl font-bold text-navy">Météo & marées des 7 prochains jours</h2>
            <p class="mt-4 text-stone-600">Le temps qu'il fera au Moulleau et les coefficients de marée, pour planifier plages, balades et baignades.</p>
        </div>

        @include('partials.meteo-apercu')

        @include('partials.maregramme')
    </section>

    {{-- SORTIE EN PADDLE AU FIL DE LA MARÉE --}}
    <section class="max-w-6xl mx-auto px-4 pb-2">
        <div x-data="javapaxPaddle()" x-init="load()" class="rounded-2xl bg-white border border-stone-100 shadow-sm">
            <div class="p-6 md:p-8">
                <div class="flex flex-col md:flex-row md:items-center gap-4 mb-5">
                    <div class="shrink-0 w-14 h-14 rounded-2xl bg-leaf/10 text-leaf flex items-center justify-center">
                        <svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="M9 2.5h6"/>
                            <path d="M12 2.5v8.4"/>
                            <path d="M12 11c-2.6 0-4.3 2.4-4.3 5.4S9.4 22 12 22s4.3-2.6 4.3-5.6S14.6 11 12 11Z"/>
                            <path d="M12 11.4V21.6"/>
                        </svg>
                    </div>
                    <div class="flex-1 text-center md:text-left">
                        <h3 class="text-xl font-bold text-navy">Sortie en paddle au fil de la marée</h3>
                        <p class="text-stone-500 text-sm mt-1">Descendez jusqu'au <strong class="text-navy">@include('partials.terme', ['k' => 'banc-arguin', 'label' => "Banc d'Arguin"])</strong> avec le courant qui se retire (@include('partials.terme', ['k' => 'jusant', 'label' => 'jusant'])), <strong class="text-navy">demi-tour à la basse mer</strong>, puis remontez avec le @include('partials.terme', ['k' => 'flot', 'label' => 'flot']) jusqu'au Moulleau et la <strong class="text-navy">plage Pereire</strong>. Plus le @include('partials.terme', ['k' => 'coef', 'label' => 'coefficient']) est fort, plus le courant vous porte.</p>
                    </div>
                </div>

                <template x-if="state === 'loading'"><p class="py-8 text-center text-stone-400 text-sm">Calcul de la marée…</p></template>
                <template x-if="state === 'error'"><p class="py-8 text-center text-stone-400 text-sm">Marée momentanément indisponible.</p></template>
                <template x-if="state === 'ok'">
                    <div>
                        <div class="bg-stone-50 rounded-2xl p-5 border border-stone-100">
                            <div class="flex flex-wrap items-center justify-between gap-2 mb-2">
                                <p class="text-xs uppercase tracking-wider text-sea font-semibold" x-text="next.label"></p>
                                <p class="text-[11px] text-stone-500">coef <strong class="text-navy" x-text="next.coef ?? '–'"></strong> · courant <strong class="text-navy" x-text="next.courant"></strong> · ~5 km/h</p>
                            </div>

                            {{-- VERDICT GLOBAL --}}
                            <div class="mb-3">
                                <span class="inline-flex items-center gap-1.5 text-sm font-bold rounded-full px-3 py-1" :class="next.score.pill">
                                    <span x-text="next.score.icon"></span><span x-text="'Conditions ' + next.score.label.toLowerCase()"></span>
                                </span>
                            </div>

                            {{-- VENT au départ (direction + vitesse + rafales) --}}
                            <template x-if="next.wind">
                                <div class="flex flex-wrap items-center gap-2 mb-3 text-[12px]">
                                    <span class="inline-flex items-center justify-center w-7 h-7 rounded-full bg-sky-50 text-sky-600 shrink-0">
                                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"
                                             :style="'transform:rotate(' + next.wind.arrow + 'deg)'"><path d="M12 19V5"/><path d="m5 12 7-7 7 7"/></svg>
                                    </span>
                                    <span class="text-stone-600">Vent de <strong class="text-navy" x-text="next.wind.card"></strong>,
                                        <strong class="text-navy" x-text="next.wind.speed + ' km/h'"></strong>
                                        <span class="text-stone-400" x-show="next.wind.gust > next.wind.speed + 5" x-text="'(rafales ' + next.wind.gust + ')'"></span>
                                    </span>
                                    <span class="text-[10px] font-bold rounded-full px-2 py-0.5" :class="next.wind.cls" x-text="next.wind.lbl"></span>
                                    <span class="inline-flex items-center gap-1 text-[10px] font-bold rounded-full px-2 py-0.5" :class="next.wind.rCls">
                                        <span x-text="next.wind.rIco"></span><span x-text="next.wind.rLbl"></span>
                                    </span>
                                </div>
                            </template>

                            {{-- CONDITIONS : eau · vagues · pluie · plage de jour --}}
                            <div class="flex flex-wrap items-center gap-x-4 gap-y-1 mb-3 text-[12px] text-stone-600">
                                <template x-if="next.water != null"><span>🌡️ Eau <strong class="text-navy" x-text="next.water + '°'"></strong></span></template>
                                <template x-if="next.wave != null"><span>🌊 @include('partials.terme', ['k' => 'houle', 'label' => 'Houle au large']) <strong class="text-navy" x-text="next.wave + ' m'"></strong></span></template>
                                <template x-if="next.rainP != null"><span>☔ Pluie <strong class="text-navy" x-text="next.rainP + '%'"></strong></span></template>
                                <template x-if="next.sunrise"><span>☀️ Jour <strong class="text-navy" x-text="next.sunrise + '–' + next.sunset"></strong></span></template>
                            </div>
                            <template x-if="next.night">
                                <p class="mb-3 text-[12px] text-indigo-600 font-semibold">🌙 Le retour tomberait après le coucher du soleil — sortie de nuit déconseillée.</p>
                            </template>

                            {{-- DÉROULÉ : 2 bâtonnets (aller / retour) + demi-tour au milieu --}}
                            <div class="space-y-1.5">
                                {{-- ALLER --}}
                                <div class="flex items-center gap-2.5">
                                    <div class="w-14 sm:w-16 shrink-0 text-right text-[10px] font-bold uppercase text-leaf leading-tight">Aller<br><span class="text-stone-400 normal-case font-normal">jusant ↓</span></div>
                                    <div class="flex-1 h-8 rounded-lg bg-leaf/10 ring-1 ring-leaf/20 flex items-center justify-between gap-2 px-3 text-navy">
                                        <span class="text-sm font-extrabold whitespace-nowrap" x-text="next.depart"></span>
                                        <span class="text-[10px] sm:text-[11px] font-semibold text-stone-500 truncate">Moulleau → Banc d'Arguin</span>
                                        <span class="text-sm font-extrabold whitespace-nowrap" x-text="next.bm"></span>
                                    </div>
                                </div>
                                {{-- DEMI-TOUR --}}
                                <div class="flex items-center gap-2.5">
                                    <div class="w-14 sm:w-16 shrink-0 text-right text-[10px] font-bold uppercase text-red-500 leading-tight">Demi-tour</div>
                                    <div class="flex-1 flex items-center gap-2">
                                        <span class="w-3 h-3 rounded-full bg-red-500 ring-2 ring-white shrink-0"></span>
                                        <strong class="text-navy text-sm whitespace-nowrap" x-text="next.bm"></strong>
                                        <span class="text-stone-500 text-[10px] sm:text-[11px]">basse mer au Banc d'Arguin — @include('partials.terme', ['k' => 'etale', 'label' => 'étale'])</span>
                                    </div>
                                </div>
                                {{-- RETOUR --}}
                                <div class="flex items-center gap-2.5">
                                    <div class="w-14 sm:w-16 shrink-0 text-right text-[10px] font-bold uppercase text-sea leading-tight">Retour<br><span class="text-stone-400 normal-case font-normal">flot ↑</span></div>
                                    <div class="flex-1 h-8 rounded-lg bg-sea/10 ring-1 ring-sea/20 flex items-center justify-between gap-2 px-3 text-navy">
                                        <span class="text-sm font-extrabold whitespace-nowrap" x-text="next.bm"></span>
                                        <span class="text-[10px] sm:text-[11px] font-semibold text-stone-500 truncate">Banc d'Arguin → Moulleau · Pereire</span>
                                        <span class="text-sm font-extrabold whitespace-nowrap" x-text="next.pereire"></span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- TABLEAU CROISÉ : jours en colonnes · Matin / Après-midi en lignes --}}
                        <div class="flex items-center justify-between gap-2 mt-5 mb-3">
                            <button type="button" @click="if (canPrev) week--" :disabled="!canPrev" aria-label="Semaine précédente"
                                    class="shrink-0 w-9 h-9 rounded-full bg-stone-100 text-navy hover:bg-sea hover:text-white flex items-center justify-center transition disabled:opacity-30 disabled:cursor-not-allowed">
                                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                            </button>
                            <div class="text-center">
                                <p class="text-[11px] uppercase tracking-wider text-sea font-semibold">Heure de départ conseillée</p>
                                <p class="text-sm font-bold text-navy" x-text="'Semaine du ' + weekLabel"></p>
                            </div>
                            <button type="button" @click="if (canNext) week++" :disabled="!canNext" aria-label="Semaine suivante"
                                    class="shrink-0 w-9 h-9 rounded-full bg-stone-100 text-navy hover:bg-sea hover:text-white flex items-center justify-center transition disabled:opacity-30 disabled:cursor-not-allowed">
                                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                        </div>

                        <div class="overflow-x-auto -mx-1 px-1 pt-2 pb-1">
                            <div class="grid gap-1.5" style="min-width:600px;grid-template-columns:3rem repeat(7,minmax(0,1fr));">
                                {{-- En-tête : jours de la semaine --}}
                                <div></div>
                                <template x-for="(c, i) in grid" :key="'h' + i">
                                    <div class="rounded-lg py-1.5 text-center" :class="c.isToday ? 'bg-sea shadow-sm' : ''">
                                        <div class="text-[11px] font-bold uppercase" :class="c.isToday ? 'text-white' : 'text-stone-400'" x-text="c.name"></div>
                                        <div class="text-base font-extrabold leading-none mt-0.5" :class="c.isToday ? 'text-white' : 'text-navy'" x-text="c.num"></div>
                                    </div>
                                </template>

                                {{-- Ligne MATIN --}}
                                <div class="flex items-center justify-end pr-1 text-[10px] font-bold uppercase text-stone-400">Matin</div>
                                <template x-for="(c, i) in grid" :key="'m' + i">
                                    <div class="rounded-lg p-1 flex items-center justify-center transition" style="min-height:3.4rem" :class="cellBg(c, c.matin)"
                                         :title="c.matin ? (c.matin.score.label + ' · départ ' + c.matin.depart + ' → demi-tour ' + c.matin.bm + ' → Pereire ' + c.matin.pereire + ' · coef ' + c.matin.coef + (c.matin.wind ? ' · vent ' + c.matin.wind.card + ' ' + c.matin.wind.speed + ' km/h (retour ' + c.matin.wind.rel + ')' : '') + (c.matin.wave != null ? ' · houle ' +c.matin.wave + ' m (large)' : '') + (c.matin.water != null ? ' · eau ' + c.matin.water + '°' : '') + (c.matin.rainP != null ? ' · pluie ' + c.matin.rainP + '%' : '')) : ''">
                                        <template x-if="c.matin">
                                            <div class="text-center leading-none">
                                                <div class="text-sm font-extrabold text-navy" x-text="c.matin.depart"></div>
                                                <span class="inline-flex items-center gap-0.5 mt-1 text-[9px] font-bold rounded-full px-1.5 py-0.5" :class="c.matin.score.pill"><span x-text="c.matin.score.icon"></span><span x-text="c.matin.score.short"></span></span>
                                            </div>
                                        </template>
                                        <template x-if="!c.matin"><span class="text-stone-300 text-lg">·</span></template>
                                    </div>
                                </template>

                                {{-- Ligne APRÈS-MIDI / SOIR --}}
                                <div class="flex items-center justify-end pr-1 text-[10px] font-bold uppercase text-stone-400 leading-tight text-right">Après-<br>midi</div>
                                <template x-for="(c, i) in grid" :key="'s' + i">
                                    <div class="rounded-lg p-1 flex items-center justify-center transition" style="min-height:3.4rem" :class="cellBg(c, c.soir)"
                                         :title="c.soir ? (c.soir.score.label + ' · départ ' + c.soir.depart + ' → demi-tour ' + c.soir.bm + ' → Pereire ' + c.soir.pereire + ' · coef ' + c.soir.coef + (c.soir.wind ? ' · vent ' + c.soir.wind.card + ' ' + c.soir.wind.speed + ' km/h (retour ' + c.soir.wind.rel + ')' : '') + (c.soir.wave != null ? ' · houle ' +c.soir.wave + ' m (large)' : '') + (c.soir.water != null ? ' · eau ' + c.soir.water + '°' : '') + (c.soir.rainP != null ? ' · pluie ' + c.soir.rainP + '%' : '')) : ''">
                                        <template x-if="c.soir">
                                            <div class="text-center leading-none">
                                                <div class="text-sm font-extrabold text-navy" x-text="c.soir.depart"></div>
                                                <span class="inline-flex items-center gap-0.5 mt-1 text-[9px] font-bold rounded-full px-1.5 py-0.5" :class="c.soir.score.pill"><span x-text="c.soir.score.icon"></span><span x-text="c.soir.score.short"></span></span>
                                            </div>
                                        </template>
                                        <template x-if="!c.soir"><span class="text-stone-300 text-lg">·</span></template>
                                    </div>
                                </template>
                            </div>
                        </div>

                        <p class="mt-3 flex flex-wrap justify-center items-center gap-x-3 gap-y-1 text-[11px] text-stone-500">
                            <span class="font-semibold text-stone-600">Conditions paddle :</span>
                            <span class="inline-flex items-center gap-1"><span class="text-[10px] font-bold rounded-full px-1.5 py-0.5 bg-leaf/10 text-leaf">★ Idéal</span></span>
                            <span class="inline-flex items-center gap-1"><span class="text-[10px] font-bold rounded-full px-1.5 py-0.5 bg-sea/10 text-sea">✓ Bon</span></span>
                            <span class="inline-flex items-center gap-1"><span class="text-[10px] font-bold rounded-full px-1.5 py-0.5 bg-amber-100 text-amber-700">~ Moyen</span></span>
                            <span class="inline-flex items-center gap-1"><span class="text-[10px] font-bold rounded-full px-1.5 py-0.5 bg-red-100 text-red-600">✕ Éviter</span></span>
                            <span class="inline-flex items-center gap-1"><span class="text-[10px] font-bold rounded-full px-1.5 py-0.5 bg-indigo-100 text-indigo-600">🌙 Nuit</span></span>
                        </p>
                        <p class="mt-2 flex flex-wrap justify-center items-center gap-x-4 gap-y-1 text-[11px] text-stone-400">
                            <span class="inline-flex items-center gap-1.5"><span class="w-3.5 h-3.5 rounded bg-sea"></span> Aujourd'hui</span>
                            <span>l'heure indiquée est le <strong class="text-navy">départ du Moulleau</strong></span>
                            <span>score = coef + vent (dont <strong class="text-red-500">face au retour</strong>) + houle + pluie + jour/nuit</span>
                        </p>
                        <p class="mt-2 text-[11px] text-stone-400 text-center">⚠️ Estimation indicative (Open-Meteo, ~±1 h) — heure exacte de basse mer sur <a href="{{ config('javapax.maree_url') }}" target="_blank" rel="noopener" class="underline">marée.info</a>. Courants forts dans les passes : vérifiez météo + vent, portez gilet + @include('partials.terme', ['k' => 'leash', 'label' => 'leash']).</p>
                    </div>
                </template>
            </div>
        </div>

        {{-- GLOSSAIRE : comprendre les termes (dépliable) --}}
        <div x-data="{ open: false }" class="mt-4 rounded-2xl bg-white border border-stone-100 shadow-sm overflow-hidden">
            <button type="button" @click="open = !open" class="w-full flex items-center justify-between gap-3 px-6 py-4 text-left hover:bg-stone-50 transition">
                <span class="flex items-center gap-2.5">
                    <span class="text-xl">📖</span>
                    <span class="font-bold text-navy">Comprendre les termes</span>
                    <span class="text-stone-400 text-sm hidden sm:inline">marnage, jusant, flot, étale, coefficient…</span>
                </span>
                <svg class="w-5 h-5 text-stone-400 transition-transform shrink-0" :class="open ? 'rotate-180' : ''" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
            </button>
            <div x-show="open" x-cloak x-transition class="px-6 pb-6 pt-1 border-t border-stone-100">
                <dl class="grid sm:grid-cols-2 gap-x-8 gap-y-3 mt-4">
                    @foreach(config('glossaire') as $g)
                        <div>
                            <dt class="font-bold text-navy text-sm">{{ $g[0] }}</dt>
                            <dd class="text-stone-500 text-[13px] leading-relaxed mt-0.5">{{ $g[1] }}</dd>
                        </div>
                    @endforeach
                </dl>
            </div>
        </div>
    </section>

    @push('scripts')
    <script>
    const JVPX_PADDLE_COEFS = @json(config('marees.coefficients'));
    function javapaxPaddle () {
        return {
            state: 'loading', next: {}, byKey: {}, todayKey: '', lastKey: '', week: 0,
            // Tableau croisé semaine : jours en colonnes, Matin / Après-midi en lignes.
            keyOf (d) { return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0'); },
            mondayOf (offset) { const t = new Date(); t.setHours(0, 0, 0, 0); const dow = (t.getDay() + 6) % 7; t.setDate(t.getDate() - dow + offset * 7); return t; },
            get grid () { const mon = this.mondayOf(this.week); const out = []; for (let k = 0; k < 7; k++) { const d = new Date(mon); d.setDate(d.getDate() + k); const key = this.keyOf(d); const c = this.byKey[key] || {}; out.push({ name: JVPX_joursC[d.getDay()], num: d.getDate(), isToday: key === this.todayKey, matin: c.matin || null, soir: c.soir || null }); } return out; },
            get weekLabel () { const mon = this.mondayOf(this.week); const sun = new Date(mon); sun.setDate(sun.getDate() + 6); const mo = ['janv', 'févr', 'mars', 'avr', 'mai', 'juin', 'juil', 'août', 'sept', 'oct', 'nov', 'déc']; return mon.getDate() + (mon.getMonth() === sun.getMonth() ? '' : ' ' + mo[mon.getMonth()]) + ' – ' + sun.getDate() + ' ' + mo[sun.getMonth()]; },
            get canPrev () { return this.week > 0; },
            get canNext () { return this.keyOf(this.mondayOf(this.week + 1)) <= this.lastKey; },
            cellBg (cell, w) { if (!w) return 'bg-stone-50/70'; let base = w.score ? w.score.cell : 'bg-white border border-stone-200'; return cell.isToday ? base + ' ring-2 ring-sea ring-offset-1' : base; },
            async load () {
                const url = 'https://marine-api.open-meteo.com/v1/marine?latitude=44.66&longitude=-1.16'
                    + '&hourly=sea_level_height_msl,wave_height,sea_surface_temperature&timezone=Europe%2FParis&past_days=2&forecast_days=16';
                try {
                    const r = await fetch(url); if (!r.ok) throw 0;
                    const j = await r.json(); const T = j.hourly.time, H = j.hourly.sea_level_height_msl;
                    const WAVE = j.hourly.wave_height || [], WATER = j.hourly.sea_surface_temperature || [];
                    // Recherche de la valeur horaire la plus proche d'une date dans un tableau aligné sur T.
                    const isoH = d => d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0')
                        + 'T' + String(d.getHours()).padStart(2, '0') + ':00';
                    const atT = (arr, d) => { const i = T.indexOf(isoH(d)); return i < 0 ? null : arr[i]; };
                    // MÊME calcul partagé que le marégramme → graphe et tableau identiques.
                    const plan = JVPX_paddlePlan(T, H, JVPX_PADDLE_COEFS);
                    if (!plan.next) throw 0;
                    // Vent + pluie + soleil (API prévisions standard).
                    let WIND = null, SUN = null;
                    try {
                        const wr = await fetch('https://api.open-meteo.com/v1/forecast?latitude=44.66&longitude=-1.16'
                            + '&hourly=wind_speed_10m,wind_gusts_10m,wind_direction_10m,precipitation_probability'
                            + '&daily=sunrise,sunset&timezone=Europe%2FParis&past_days=2&forecast_days=16');
                        if (wr.ok) { const wj = await wr.json(); WIND = wj.hourly; SUN = wj.daily; }
                    } catch (e) {}
                    // Pluie : probabilité max sur la fenêtre de sortie [départ → Pereire].
                    const rainMax = (a, b) => {
                        if (!WIND || !WIND.precipitation_probability) return null;
                        let m = null; const d = new Date(a);
                        while (d <= b) { const i = WIND.time.indexOf(isoH(d)); if (i >= 0 && WIND.precipitation_probability[i] != null) m = Math.max(m ?? 0, WIND.precipitation_probability[i]); d.setHours(d.getHours() + 1); }
                        return m;
                    };
                    // Soleil : lever / coucher du jour de la sortie (clé AAAA-MM-JJ).
                    const sunOf = dateStr => {
                        if (!SUN || !SUN.time) return null;
                        const i = SUN.time.indexOf(dateStr);
                        return i < 0 ? null : { rise: new Date(SUN.sunrise[i]), set: new Date(SUN.sunset[i]) };
                    };
                    const CARD = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSO', 'SO', 'OSO', 'O', 'ONO', 'NO', 'NNO'];
                    const windAt = d => {
                        if (!WIND) return null;
                        const k = d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0')
                            + 'T' + String(d.getHours()).padStart(2, '0') + ':00';
                        const i = WIND.time.indexOf(k);
                        if (i < 0) return null;
                        const speed = Math.round(WIND.wind_speed_10m[i]);
                        const gust = Math.round(WIND.wind_gusts_10m[i]);
                        const dir = WIND.wind_direction_10m[i];
                        const q = speed < 12 ? { lbl: 'Vent faible', cls: 'bg-leaf/10 text-leaf' }
                            : speed <= 20 ? { lbl: 'Vent modéré', cls: 'bg-amber-100 text-amber-700' }
                                : { lbl: 'Vent soutenu', cls: 'bg-red-100 text-red-600' };
                        // Orientation du parcours (cap géographique, en degrés depuis le Nord) :
                        //   Aller Moulleau → Banc d'Arguin ≈ 219° (SO, avec le jusant) ;
                        //   Retour Banc d'Arguin → Moulleau ≈ 39° (NE, avec le flot).
                        // « dir » = provenance du vent. Vent de FACE = il vient du cap visé.
                        // Le retour (à la rame, fatigué) est la jambe critique : on ne veut pas de face.
                        const CAP_RETOUR = 39;
                        const dd = Math.abs(((dir - CAP_RETOUR + 540) % 360) - 180); // 0 = pile de face, 180 = pile portant
                        const rel = dd < 60 ? 'face' : dd > 120 ? 'portant' : 'travers';
                        const v = rel === 'portant' ? { rLbl: 'Portant au retour (avec la marée)', rCls: 'bg-leaf/10 text-leaf', rIco: '✓' }
                            : rel === 'face' ? { rLbl: 'Vent de face au retour', rCls: 'bg-red-100 text-red-600', rIco: '⚠' }
                                : { rLbl: 'Vent de travers', rCls: 'bg-stone-100 text-stone-600', rIco: '↔' };
                        const face = rel === 'face';
                        // direction = provenance (météo) ; la flèche pointe là où le vent souffle (dir + 180°).
                        return {
                            speed, gust, dir, card: CARD[Math.round((dir % 360) / 22.5) % 16], arrow: (dir + 180) % 360,
                            lbl: q.lbl, cls: q.cls, rel, face, rLbl: v.rLbl, rCls: v.rCls, rIco: v.rIco,
                            // « calme/idéal » : mer peu agitée, vent supportable, et pas de face marquée au retour.
                            calme: speed <= 20 && !(face && speed >= 12),
                        };
                    };
                    // Score de synthèse « conditions paddle » (coef + vent + vagues + pluie + jour/nuit).
                    const LV = {
                        ideal: { key: 'ideal', label: 'Idéal', short: 'Idéal', icon: '★', pill: 'bg-leaf/10 text-leaf', cell: 'bg-leaf/10 border border-leaf/30' },
                        bon: { key: 'bon', label: 'Bon', short: 'Bon', icon: '✓', pill: 'bg-sea/10 text-sea', cell: 'bg-sea/5 border border-sea/25' },
                        moyen: { key: 'moyen', label: 'Moyen', short: 'Moyen', icon: '~', pill: 'bg-amber-100 text-amber-700', cell: 'bg-amber-50 border border-amber-200' },
                        deconseille: { key: 'deconseille', label: 'Déconseillé', short: 'Éviter', icon: '✕', pill: 'bg-red-100 text-red-600', cell: 'bg-red-50 border border-red-200' },
                        nuit: { key: 'nuit', label: 'Retour de nuit', short: 'Nuit', icon: '🌙', pill: 'bg-indigo-100 text-indigo-600', cell: 'bg-indigo-50 border border-indigo-200' },
                    };
                    const scoreOf = ({ coef, wind, wave, rainP, night }) => {
                        if (night) return LV.nuit;
                        let dem = 0; const sp = wind ? wind.speed : 0;
                        if (sp > 25) dem += 3; else if (sp > 20) dem += 2; else if (sp >= 12) dem += 1;
                        if (wind && wind.face && sp >= 12) dem += 1;
                        // Houle = donnée du large (point marin côté océan) ; le trajet est abrité
                        // dans le Bassin, donc faible poids — ne pénalise qu'une grosse houle (passes agitées).
                        if (wave != null) { if (wave > 2) dem += 2; else if (wave > 1.3) dem += 1; }
                        if (rainP != null) { if (rainP >= 70) dem += 2; else if (rainP >= 40) dem += 1; }
                        if (coef >= 95) dem += 1;
                        return dem === 0 ? LV.ideal : dem === 1 ? LV.bon : dem <= 3 ? LV.moyen : LV.deconseille;
                    };
                    const assess = (o, pd, wd) => {
                        const wv = atT(WAVE, o.bm), wt = atT(WATER, o.dep), rp = rainMax(o.dep, pd), sun = sunOf(o.date);
                        const night = !!sun && (o.dep < sun.rise || pd > sun.set);
                        return {
                            wave: wv == null ? null : Math.round(wv * 100) / 100,
                            water: wt == null ? null : Math.round(wt),
                            rainP: rp, night, sun,
                            sunrise: sun ? JVPX_hhmm(sun.rise) : null, sunset: sun ? JVPX_hhmm(sun.set) : null,
                            score: scoreOf({ coef: o.coef, wind: wd, wave: wv, rainP: rp, night }),
                        };
                    };
                    const now = new Date();
                    const list = plan.future.length ? plan.future : plan.all;
                    const cur = c => Math.max(1, Math.min(4, (c || 55) / 100 * 4));
                    const per = c => Math.round(2.5 / (5 + cur(c)) * 60); // Pereire ≈ 2,5 km
                    const n = plan.next;
                    const hf = d => d.getHours() + d.getMinutes() / 60;
                    const perD = new Date(n.ret); perD.setMinutes(perD.getMinutes() + per(n.coef));
                    const nWind = windAt(n.dep);
                    const nA = assess(n, perD, nWind);
                    this.next = {
                        depart: JVPX_hhmm(n.dep), bm: JVPX_hhmm(n.bm), retour: JVPX_hhmm(n.ret), pereire: JVPX_hhmm(perD),
                        depH: hf(n.dep), bmH: hf(n.bm), retH: hf(n.ret), perH: hf(perD),
                        allerMin: n.transit, retourMin: n.transit, pereireMin: per(n.coef),
                        coef: n.coef, courant: n.courant, wind: nWind,
                        wave: nA.wave, water: nA.water, rainP: nA.rainP, night: nA.night,
                        sunrise: nA.sunrise, sunset: nA.sunset, score: nA.score,
                        label: n.bm.toDateString() === now.toDateString()
                            ? "Prochaine fenêtre — aujourd'hui"
                            : ('Prochaine fenêtre — ' + JVPX_joursC[n.bm.getDay()] + ' ' + n.date.slice(8) + '/' + n.date.slice(5, 7)),
                    };
                    // Indexe chaque sortie par jour + créneau (matin / après-midi) pour le tableau croisé.
                    const byKey = {};
                    plan.all.forEach(o => {
                        const pd = new Date(o.ret); pd.setMinutes(pd.getMinutes() + per(o.coef));
                        const wd = windAt(o.dep);
                        const a = assess(o, pd, wd);
                        const w = {
                            depart: JVPX_hhmm(o.dep), bm: JVPX_hhmm(o.bm), retour: JVPX_hhmm(o.ret), pereire: JVPX_hhmm(pd),
                            coef: o.coef, official: o.official, courant: o.courant, wind: wd,
                            wave: a.wave, water: a.water, rainP: a.rainP, night: a.night, score: a.score,
                            calme: a.score.key === 'ideal' || a.score.key === 'bon',
                        };
                        const period = o.bm.getHours() < 13 ? 'matin' : 'soir';
                        (byKey[o.date] = byKey[o.date] || {})[period] = w;
                    });
                    this.byKey = byKey;
                    this.todayKey = this.keyOf(new Date());
                    const keys = Object.keys(byKey).sort();
                    this.lastKey = keys.length ? keys[keys.length - 1] : this.todayKey;
                    this.state = 'ok';
                } catch (e) { this.state = 'error'; }
            },
        };
    }
    </script>
    @endpush