{{-- Illustration plate et douce du Bassin d'Arcachon : dunes en couches, voiliers,
     plage en courbe, pins parasols et cabane tchanquée. --}}
<svg viewBox="0 0 1200 360" preserveAspectRatio="xMidYMid slice" class="w-full h-full" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Illustration du Bassin d'Arcachon">
    <defs>
        <linearGradient id="vsky" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stop-color="#fbfdfc"/>
            <stop offset="1" stop-color="#eef5f3"/>
        </linearGradient>
        <linearGradient id="vsea" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stop-color="#d2e8e8"/>
            <stop offset="1" stop-color="#bcdcdd"/>
        </linearGradient>
        <linearGradient id="vsand" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stop-color="#f2e6c8"/>
            <stop offset="1" stop-color="#e7d6ac"/>
        </linearGradient>
    </defs>

    {{-- Ciel --}}
    <rect width="1200" height="360" fill="url(#vsky)"/>

    {{-- Dunes lointaines en couches --}}
    <path d="M0 150 C 180 132 360 140 560 146 C 760 152 980 138 1200 144 L1200 175 L0 175 Z" fill="#cdd9d2"/>
    <path d="M0 158 C 220 146 430 152 640 156 C 860 160 1040 150 1200 156 L1200 185 L0 185 Z" fill="#bfd2c9" opacity="0.85"/>
    <path d="M0 166 C 260 158 520 162 760 166 C 960 169 1080 164 1200 168 L1200 195 L0 195 Z" fill="#b2c8bd" opacity="0.7"/>

    {{-- Mer --}}
    <rect x="0" y="160" width="1200" height="200" fill="url(#vsea)"/>
    {{-- Reflets très doux --}}
    <g stroke="#ffffff" stroke-width="3" stroke-linecap="round" opacity="0.35">
        <path d="M120 250 h70"/><path d="M260 290 h90"/><path d="M470 235 h70"/>
        <path d="M520 320 h110"/><path d="M700 270 h80"/><path d="M330 235 h45"/>
        <path d="M150 320 h80"/>
    </g>

    {{-- Oiseaux --}}
    <g stroke="#9aa9a6" stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.55">
        <path d="M430 70 q9 -9 18 0 q9 -9 18 0"/>
        <path d="M500 92 q7 -7 14 0 q7 -7 14 0"/>
        <path d="M380 100 q7 -7 14 0 q7 -7 14 0"/>
    </g>

    {{-- Voiliers (tailles variées) --}}
    <g fill="#ffffff">
        {{-- loin gauche --}}
        <g transform="translate(95 250) scale(0.6)" opacity="0.92">
            <path d="M0 0 C -10 -2 -22 -4 -34 0 L -10 0 Z"/>
            <path d="M-4 -2 L-4 -54 L24 -6 Z"/>
            <path d="M-22 -2 L-6 -40 L-6 -6 Z" opacity="0.85"/>
        </g>
        {{-- centre-gauche --}}
        <g transform="translate(300 270) scale(0.85)">
            <path d="M0 0 C -12 -2 -26 -4 -40 0 L -12 0 Z"/>
            <path d="M-5 -2 L-5 -62 L28 -7 Z"/>
            <path d="M-26 -2 L-7 -46 L-7 -7 Z" opacity="0.85"/>
        </g>
        {{-- centre --}}
        <g transform="translate(560 258) scale(0.7)" opacity="0.95">
            <path d="M0 0 C -10 -2 -22 -4 -34 0 L -10 0 Z"/>
            <path d="M-4 -2 L-4 -54 L24 -6 Z"/>
        </g>
        {{-- droite, plus grand --}}
        <g transform="translate(820 282) scale(1)">
            <path d="M0 0 C -14 -3 -30 -4 -46 0 L -14 0 Z"/>
            <path d="M-6 -3 L-6 -72 L32 -8 Z"/>
            <path d="M-30 -3 L-8 -52 L-8 -8 Z" opacity="0.85"/>
        </g>
    </g>

    {{-- Cabane tchanquée --}}
    <g transform="translate(940 150)">
        {{-- pilotis dans l'eau --}}
        <g stroke="#8c6c4a" stroke-width="6" stroke-linecap="round">
            <path d="M20 78 L14 168"/><path d="M54 78 L60 168"/>
            <path d="M37 80 L37 168"/><path d="M72 80 L78 168"/>
            <path d="M12 120 L80 120"/>
            <path d="M16 145 L84 145"/>
        </g>
        {{-- terrasse --}}
        <rect x="2" y="70" width="92" height="8" rx="2" fill="#a98c63"/>
        {{-- corps --}}
        <rect x="14" y="36" width="68" height="40" rx="3" fill="#fcfcf9" stroke="#e4ddcd"/>
        {{-- toit --}}
        <path d="M6 38 L48 8 L90 38 Z" fill="#c4cdc4"/>
        <path d="M48 8 L90 38 L78 38 Z" fill="#b3bdb3"/>
        {{-- ouvertures --}}
        <rect x="30" y="48" width="14" height="22" rx="1.5" fill="#a9c7cb"/>
        <rect x="52" y="48" width="16" height="14" rx="1.5" fill="#a9c7cb"/>
    </g>

    {{-- Plage en courbe (avant-plan) --}}
    <path d="M0 360 L0 332 C 220 320 400 322 540 304 C 700 283 840 256 1000 240 C 1080 232 1140 236 1200 230 L1200 360 Z" fill="url(#vsand)"/>
    {{-- frange de sable humide --}}
    <path d="M0 332 C 220 320 400 322 540 304 C 700 283 840 256 1000 240 C 1080 232 1140 236 1200 230" fill="none" stroke="#d9c490" stroke-width="6" opacity="0.5"/>

    {{-- Buissons de dune --}}
    <g fill="#8fa882">
        <ellipse cx="820" cy="268" rx="34" ry="16"/>
        <ellipse cx="876" cy="276" rx="44" ry="19" fill="#83a076"/>
        <ellipse cx="940" cy="270" rx="38" ry="17"/>
        <ellipse cx="1010" cy="262" rx="48" ry="20" fill="#83a076"/>
        <ellipse cx="1090" cy="256" rx="40" ry="18"/>
    </g>

    {{-- Pins parasols (cluster à droite) --}}
    <g>
        {{-- pin 1 --}}
        <g transform="translate(1060 120)">
            <path d="M18 150 L18 56" stroke="#8c6c4a" stroke-width="9" stroke-linecap="round"/>
            <ellipse cx="18" cy="50" rx="58" ry="26" fill="#6f8b6c"/>
            <ellipse cx="18" cy="34" rx="42" ry="22" fill="#7d977a"/>
            <ellipse cx="6" cy="40" rx="26" ry="16" fill="#8aa385"/>
        </g>
        {{-- pin 2 (plus grand) --}}
        <g transform="translate(1140 96)">
            <path d="M16 178 L16 60" stroke="#7d6044" stroke-width="10" stroke-linecap="round"/>
            <ellipse cx="16" cy="54" rx="66" ry="30" fill="#6a866a"/>
            <ellipse cx="16" cy="34" rx="48" ry="24" fill="#7d977a"/>
            <ellipse cx="2" cy="42" rx="30" ry="18" fill="#8aa385"/>
        </g>
        {{-- pin 3 (devant, petit) --}}
        <g transform="translate(1006 168)">
            <path d="M12 120 L12 50" stroke="#8c6c4a" stroke-width="7" stroke-linecap="round"/>
            <ellipse cx="12" cy="46" rx="44" ry="20" fill="#7d977a"/>
            <ellipse cx="6" cy="34" rx="28" ry="15" fill="#8aa385"/>
        </g>
        {{-- herbes de dune --}}
        <g stroke="#caa86a" stroke-width="2.5" stroke-linecap="round" fill="none" opacity="0.8">
            <path d="M760 350 q-5 -26 -12 -36"/><path d="M772 350 q0 -28 5 -38"/><path d="M786 350 q6 -26 15 -34"/>
        </g>
    </g>
</svg>