{{-- 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')

        @include('partials.meteogramme')
    </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 à l'étale de courant</strong> (juste après la basse mer, quand le courant s'inverse vraiment), 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 (cliquable → popup d'explication) --}}
                            <div class="mb-3">
                                <button type="button" @click="openPop(next.label, next, '')"
                                        class="inline-flex items-center gap-1.5 text-sm font-bold rounded-full px-3 py-1 cursor-pointer hover:ring-2 hover:ring-sea/40 transition" :class="next.score.pill">
                                    <span x-text="next.score.icon"></span><span x-text="'Conditions ' + next.score.label.toLowerCase()"></span>
                                    <svg class="w-3.5 h-3.5 opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/></svg>
                                </button>
                                <span class="text-[11px] text-stone-400 ml-1">cliquez pour le détail</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.press">
                                    <span>🔵 @include('partials.terme', ['k' => 'pression', 'label' => 'Pression'])
                                        <strong class="text-navy" x-text="next.press.hpa + ' hPa'"></strong>
                                        <span class="font-semibold"
                                              :class="next.press.delta <= -2 ? 'text-red-500' : (next.press.delta >= 2 ? 'text-leaf' : 'text-stone-400')"
                                              x-text="(next.press.delta > 0 ? '↑ +' : (next.press.delta < 0 ? '↓ ' : '→ ')) + (next.press.delta !== 0 ? next.press.delta : 'stable')"></span>
                                    </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.degrade || (next.press && next.press.delta <= -2)">
                                <p class="mb-3 text-[12px] text-amber-700 font-semibold bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
                                    ⚠️ Conditions qui se dégradent pendant la sortie
                                    <span x-show="next.degrade" x-text="'- le vent monte jusqu\'à ' + next.windMax + ' km/h au retour'"></span><span x-show="next.degrade && next.press && next.press.delta <= -2">,</span><span x-show="next.press && next.press.delta <= -2"> pression en baisse (front qui arrive)</span>. Surveillez le ciel et raccourcissez si besoin.
                                </p>
                            </template>
                            <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]">@include('partials.terme', ['k' => 'etale', 'label' => 'étale de courant']) au Banc d'Arguin (≈ basse mer + 1 h) - le flot vous ramène</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:4.1rem"
                                         @click="openPop(c.name + ' ' + c.num, c.matin, 'matin')"
                                         :class="cellBg(c, c.matin) + (c.matin ? ' cursor-pointer hover:ring-2 hover:ring-sea/50' : '')"
                                         :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 + '%' : '') + (c.matin.press ? ' · pression ' + c.matin.press.hpa + ' hPa' + (c.matin.press.delta <= -2 ? ' ↓ front' : '') : '')) : ''">
                                        <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 class="flex items-center justify-center gap-0.5 text-[8px] font-semibold text-sea mt-1 leading-none"><svg class="w-2 h-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/></svg><span>en détail</span></div>
                                            </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:4.1rem"
                                         @click="openPop(c.name + ' ' + c.num, c.soir, 'après-midi')"
                                         :class="cellBg(c, c.soir) + (c.soir ? ' cursor-pointer hover:ring-2 hover:ring-sea/50' : '')"
                                         :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 + '%' : '') + (c.soir.press ? ' · pression ' + c.soir.press.hpa + ' hPa' + (c.soir.press.delta <= -2 ? ' ↓ front' : '') : '')) : ''">
                                        <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 class="flex items-center justify-center gap-0.5 text-[8px] font-semibold text-sea mt-1 leading-none"><svg class="w-2 h-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/></svg><span>en détail</span></div>
                                            </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>👆 <strong class="text-navy">cliquez sur un créneau</strong> pour le détail du verdict</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 + <strong>pression</strong> + 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>

            {{-- POPUP « pourquoi ce verdict » : détail facteur par facteur + échelle graphique --}}
            <template x-if="pop">
                <div class="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-6" @keydown.escape.window="pop = null">
                    <div class="absolute inset-0" style="background:rgba(15,42,56,.62);backdrop-filter:blur(3px)" @click="pop = null"></div>
                    <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[88vh] overflow-y-auto">
                        {{-- En-tête --}}
                        <div class="sticky top-0 bg-white/95 backdrop-blur border-b border-stone-100 px-5 py-4 flex items-center justify-between gap-3 rounded-t-2xl">
                            <div>
                                <p class="text-[11px] uppercase tracking-wider text-sea font-semibold" x-text="pop.jour + (pop.periode ? ' · ' + pop.periode : '')"></p>
                                <p class="font-bold text-navy leading-tight">Pourquoi ces conditions ?</p>
                            </div>
                            <div class="flex items-center gap-2 shrink-0">
                                <span class="inline-flex items-center gap-1.5 text-sm font-bold rounded-full px-3 py-1" :class="pop.w.score.pill">
                                    <span x-text="pop.w.score.icon"></span><span x-text="pop.w.score.label"></span>
                                </span>
                                <button type="button" @click="pop = null" aria-label="Fermer"
                                        class="w-8 h-8 rounded-full bg-stone-100 hover:bg-stone-200 text-stone-500 text-xl leading-none flex items-center justify-center">×</button>
                            </div>
                        </div>

                        <div class="p-5 space-y-5">
                            {{-- Horaires de la sortie --}}
                            <div class="flex items-center justify-between gap-1 text-center bg-stone-50 border border-stone-100 rounded-xl px-3 py-2.5">
                                <div><p class="text-[10px] uppercase font-bold text-leaf">Départ</p><p class="text-sm font-extrabold text-navy" x-text="pop.w.depart"></p></div>
                                <span class="text-stone-300">→</span>
                                <div><p class="text-[10px] uppercase font-bold text-red-500">Demi-tour</p><p class="text-sm font-extrabold text-navy" x-text="pop.w.bm"></p></div>
                                <span class="text-stone-300">→</span>
                                <div><p class="text-[10px] uppercase font-bold text-sea">Pereire</p><p class="text-sm font-extrabold text-navy" x-text="pop.w.pereire"></p></div>
                            </div>

                            {{-- Cas nuit : verdict direct --}}
                            <template x-if="pop.exp.night">
                                <p class="text-[13px] text-indigo-700 font-semibold bg-indigo-50 border border-indigo-200 rounded-xl px-4 py-3">
                                    🌙 Le retour se ferait après le coucher du soleil. Pagayer de nuit est déconseillé (visibilité, froid, secours) - ce créneau est classé « Nuit » quelles que soient les autres conditions.
                                </p>
                            </template>

                            {{-- Facteurs un par un --}}
                            <div class="space-y-2.5">
                                <template x-for="(r, i) in pop.exp.rows" :key="i">
                                    <div class="border rounded-xl px-3.5 py-2.5" :class="r.dem === 0 ? 'border-stone-100 bg-white' : (r.dem === 1 ? 'border-amber-200 bg-amber-50/60' : 'border-red-200 bg-red-50/60')">
                                        <div class="flex items-center justify-between gap-2">
                                            <p class="text-[13px] font-bold text-navy"><span x-text="r.ico"></span> <span x-text="r.label"></span>
                                                <span class="font-semibold text-stone-500" x-text="'· ' + r.val"></span></p>
                                            <span class="text-[11px] font-extrabold rounded-full px-2 py-0.5 shrink-0"
                                                  :class="r.dem === 0 ? 'bg-leaf/10 text-leaf' : (r.dem === 1 ? 'bg-amber-100 text-amber-700' : 'bg-red-100 text-red-600')"
                                                  x-text="r.dem === 0 ? 'OK' : '+' + r.dem"></span>
                                        </div>
                                        <p class="text-[12px] text-stone-500 leading-snug mt-1" x-text="r.info"></p>
                                    </div>
                                </template>
                            </div>

                            {{-- GRAPHE : où se situe le total sur l'échelle Idéal → Éviter --}}
                            <div>
                                <p class="text-[11px] uppercase tracking-wider text-stone-400 font-bold mb-2">Total des pénalités : <span class="text-navy text-[13px]" x-text="pop.exp.dem"></span></p>
                                <div class="relative pt-5 pb-1">
                                    {{-- curseur --}}
                                    <div class="absolute top-0 -translate-x-1/2 flex flex-col items-center transition-all"
                                         :style="'left:' + (Math.min(pop.exp.dem, 6) / 6 * 100) + '%'">
                                        <span class="text-[10px] font-extrabold text-navy" x-text="pop.exp.dem"></span>
                                        <span class="text-navy leading-none" style="font-size:10px">▼</span>
                                    </div>
                                    {{-- échelle 0 → 6+ --}}
                                    <div class="flex h-3.5 rounded-full overflow-hidden ring-1 ring-stone-200">
                                        <div class="bg-leaf/70" style="width:16.67%"></div>
                                        <div class="bg-sea/60" style="width:16.67%"></div>
                                        <div class="bg-amber-400/70" style="width:33.33%"></div>
                                        <div class="bg-red-400/80" style="width:33.33%"></div>
                                    </div>
                                    <div class="flex text-[10px] font-bold mt-1">
                                        <span class="text-leaf" style="width:16.67%">★ Idéal (0)</span>
                                        <span class="text-sea" style="width:16.67%">✓ Bon (1)</span>
                                        <span class="text-amber-600" style="width:33.33%">~ Moyen (2–3)</span>
                                        <span class="text-red-500" style="width:33.33%">✕ Éviter (4+)</span>
                                    </div>
                                </div>
                                <p class="text-[11px] text-stone-400 mt-2">Chaque facteur défavorable ajoute des pénalités ; le total place le créneau sur l'échelle. Un seul gros facteur (vent fort) ou plusieurs petits (pluie + face au retour) peuvent suffire à déconseiller la sortie.</p>
                            </div>

                            {{-- Bouton « conseils détaillés » : que faire concrètement vu ces conditions --}}
                            <div x-data="{ open: false }" class="border-t border-stone-100 pt-4">
                                <button type="button" @click="open = !open"
                                        class="w-full flex items-center justify-center gap-2 rounded-xl bg-navy text-white text-sm font-semibold py-2.5 hover:bg-sea transition">
                                    <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/></svg>
                                    <span x-text="open ? 'Masquer les conseils' : 'Voir les conseils détaillés'"></span>
                                    <svg class="w-4 h-4 transition-transform shrink-0" :class="open ? 'rotate-180' : ''" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" 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="mt-3 space-y-2">
                                    <p class="text-[11px] uppercase tracking-wider text-sea font-bold">Que faire pour ce créneau</p>
                                    <template x-for="(tp, i) in tips(pop.w)" :key="i">
                                        <div class="flex items-start gap-2.5 text-[13px] text-stone-600 bg-stone-50 border border-stone-100 rounded-xl px-3.5 py-2.5">
                                            <span class="text-base leading-none shrink-0" x-text="tp[0]"></span>
                                            <span x-text="tp[1]"></span>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </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, pop: null,
            // Ouvre le popup d'explication d'un créneau (cellule du tableau ou prochaine fenêtre).
            openPop (jour, w, periode) {
                if (!w) return;
                this.pop = { jour, periode, w, exp: this.explain(w) };
            },
            // Reconstruit le détail du score : chaque facteur, sa valeur et sa pénalité.
            // (mêmes règles que scoreOf - garder les deux synchronisés)
            explain (w) {
                const rows = []; let dem = 0;
                const sp = w.windMax != null ? w.windMax : (w.wind ? w.wind.speed : 0);
                let d = sp > 25 ? 3 : sp > 20 ? 2 : sp >= 12 ? 1 : 0;
                rows.push({ ico: '💨', label: 'Force du vent', val: w.wind ? ('jusqu’à ' + sp + ' km/h') : 'inconnue', dem: d, max: 3,
                    info: d === 0 ? 'Vent faible (moins de 12 km/h) : rame facile, plan d’eau lisse.'
                        : d === 1 ? 'Vent modéré (12–20 km/h) : effort soutenu, clapot possible.'
                        : 'Vent fort (plus de 20 km/h) : mer formée, progression difficile en paddle.' });
                dem += d;
                const face = !!(w.wind && w.wind.rel === 'face' && sp >= 12);
                rows.push({ ico: '🧭', label: 'Vent au retour', val: w.wind ? (w.wind.card + ' · ' + (w.wind.rel === 'face' ? 'de face' : w.wind.rel === 'portant' ? 'portant' : 'travers')) : '-', dem: face ? 1 : 0, max: 1,
                    info: face ? 'Le vent vous freine sur le retour Banc d’Arguin → Moulleau, la jambe la plus fatigante : double peine avec la fatigue.'
                        : 'Pas de vent de face marqué sur le retour - le flot et le vent ne s’opposent pas.' });
                dem += face ? 1 : 0;
                const dw = w.wave == null ? 0 : (w.wave > 2 ? 2 : w.wave > 1.3 ? 1 : 0);
                rows.push({ ico: '🌊', label: 'Houle au large', val: w.wave != null ? (w.wave + ' m') : '-', dem: dw, max: 2,
                    info: dw === 0 ? 'Houle faible côté océan : les passes restent praticables et le Bassin est abrité.'
                        : 'Houle marquée au large : les passes s’agitent, ressac possible près du Banc d’Arguin.' });
                dem += dw;
                const dr = w.rainP == null ? 0 : (w.rainP >= 70 ? 2 : w.rainP >= 40 ? 1 : 0);
                rows.push({ ico: '☔', label: 'Pluie', val: (w.rainP ?? 0) + ' % de risque', dem: dr, max: 2,
                    info: dr === 0 ? 'Risque de pluie faible sur toute la fenêtre de sortie.' : 'Risque d’averses pendant la sortie : visibilité et confort réduits.' });
                dem += dr;
                const dc = w.coef >= 95 ? 1 : 0;
                rows.push({ ico: '📈', label: 'Coefficient ' + (w.coef ?? '-'), val: dc ? 'grande marée' : 'marée ' + ((w.coef ?? 0) >= 70 ? 'forte' : 'modérée'), dem: dc, max: 1,
                    info: dc ? 'Coefficient ≥ 95 : courants puissants dans les passes, marge de sécurité réduite.'
                        : 'Courant gérable - il vous porte à l’aller (jusant) comme au retour (flot).' });
                dem += dc;
                const dp = (w.press && w.press.delta <= -2) ? 1 : 0;
                rows.push({ ico: '🔵', label: 'Pression', val: w.press ? (w.press.hpa + ' hPa ' + (w.press.delta > 0 ? '↑ +' + w.press.delta : w.press.delta < 0 ? '↓ ' + w.press.delta : '→ stable')) : '-', dem: dp, max: 1,
                    info: dp ? 'Pression en baisse nette : un front arrive - nuages, vent et houle peuvent monter EN COURS de sortie (le piège classique).'
                        : 'Pression stable ou en hausse : le temps devrait se maintenir pendant la sortie.' });
                dem += dp;
                return { rows, dem, night: !!w.night };
            },
            // Conseils concrets « que faire » adaptés au créneau (dépliés à la demande).
            tips (w) {
                const t = [];
                const sp = w.windMax != null ? w.windMax : (w.wind ? w.wind.speed : 0);
                const face = !!(w.wind && w.wind.rel === 'face');
                if (w.night) t.push(['🌙', 'Le retour tomberait après le coucher du soleil : reportez à un créneau de jour, ou raccourcissez fortement le parcours.']);
                if (w.score && w.score.key === 'ideal') t.push(['★', 'Créneau idéal : partez à l’heure indiquée et profitez - la marée vous porte à l’aller comme au retour.']);
                else if (w.score && w.score.key === 'bon') t.push(['✓', 'Bon créneau : rien de bloquant. Sortie tranquille en restant attentif au vent.']);
                if (sp > 20) t.push(['💨', 'Vent soutenu (' + sp + ' km/h) : réservé aux pagayeurs à l’aise. Restez dans le Bassin abrité et évitez les passes.']);
                else if (sp >= 12) t.push(['💨', 'Vent modéré : ça pousse un peu - gardez de l’énergie en réserve pour le retour.']);
                if (face && sp >= 12) t.push(['🧭', 'Vent de face au retour : partez tôt dans la fenêtre et longez la côte (plage Pereire) pour vous abriter et casser le clapot.']);
                if (w.degrade || (w.press && w.press.delta <= -2)) t.push(['⚠️', 'Conditions qui se dégradent en cours de sortie : fixez-vous une heure de demi-tour ferme et surveillez le ciel côté océan (arrivée d’un front).']);
                if (w.wave != null && w.wave > 1.3) t.push(['🌊', 'Houle marquée au large : ne vous engagez pas dans les passes, restez côté Bassin.']);
                if (w.rainP != null && w.rainP >= 40) t.push(['☔', 'Risque d’averse : coupe-vent léger et téléphone dans une pochette étanche.']);
                if (w.coef >= 95) t.push(['📈', 'Grande marée : courant puissant - ne forcez jamais un passage à contre-courant.']);
                t.push(['🦺', 'Dans tous les cas : gilet + leash, prévenez un proche de votre sortie, et vérifiez l’heure exacte de basse mer sur marée.info.']);
                return t;
            },
            // 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,surface_pressure'
                            + '&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;
                    };
                    // Max d'un tableau horaire (aligné sur timeArr) sur la fenêtre [a,b] - sert
                    // à juger le PIRE moment de la sortie (vent/houle qui montent en cours de route).
                    const maxOver = (arr, timeArr, a, b) => {
                        if (!arr || !timeArr) return null;
                        let m = null; const d = new Date(a);
                        while (d <= b) { const i = timeArr.indexOf(isoH(d)); if (i >= 0 && arr[i] != null) m = (m == null) ? arr[i] : Math.max(m, arr[i]); d.setHours(d.getHours() + 1); }
                        return m;
                    };
                    // Pression au départ + tendance sur la fenêtre (hPa). Une baisse marquée
                    // (delta négatif) = front qui arrive → vent + houle en hausse dans l'après-midi.
                    const pressureWindow = (a, b) => {
                        if (!WIND || !WIND.surface_pressure) return null;
                        const at = d => { const i = WIND.time.indexOf(isoH(d)); return i < 0 ? null : WIND.surface_pressure[i]; };
                        const p0 = at(a), p1 = at(b);
                        if (p0 == null) return null;
                        return { hpa: Math.round(p0), delta: Math.round(((p1 != null ? p1 : p0) - p0) * 10) / 10 };
                    };
                    // 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, press }) => {
                        if (night) return LV.nuit;
                        // Vent : on juge le PIRE moment de la fenêtre (speedMax), pas qu'au départ.
                        let dem = 0; const sp = wind ? (wind.speedMax != null ? wind.speedMax : 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;
                        // Pression en baisse marquée sur la fenêtre = front qui arrive (dégradation).
                        if (press && press.delta <= -2) dem += 1;
                        return dem === 0 ? LV.ideal : dem === 1 ? LV.bon : dem <= 3 ? LV.moyen : LV.deconseille;
                    };
                    const assess = (o, pd, wd) => {
                        // Houle/vent/pluie jugés sur TOUTE la fenêtre [départ → Pereire] (le pire moment),
                        // pour capter une dégradation en cours de sortie (ce qui a piégé la sortie du matin).
                        const wv = maxOver(WAVE, T, o.dep, pd), wt = atT(WATER, o.dep), rp = rainMax(o.dep, pd), sun = sunOf(o.date);
                        const spMax = maxOver(WIND && WIND.wind_speed_10m, WIND && WIND.time, o.dep, pd);
                        const windEff = wd ? { ...wd, speedMax: spMax != null ? Math.round(spMax) : wd.speed } : null;
                        const degrade = !!(windEff && windEff.speedMax > windEff.speed + 5);
                        const press = pressureWindow(o.dep, pd);
                        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, press, degrade,
                            windMax: windEff ? windEff.speedMax : null,
                            sunrise: sun ? JVPX_hhmm(sun.rise) : null, sunset: sun ? JVPX_hhmm(sun.set) : null,
                            score: scoreOf({ coef: o.coef, wind: windEff, wave: wv, rainP: rp, night, press }),
                        };
                    };
                    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,
                        press: nA.press, degrade: nA.degrade, windMax: nA.windMax,
                        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,
                            press: a.press, degrade: a.degrade, windMax: a.windMax,
                            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