/* ==========================================================================
   TIA MARÉE — v10
   Modèle : Giga (sombre cinématique, display très fin, pilules, verre dépoli,
   photographie pleine largeur). Palette adaptée : bleu marine + blanc.
   La profondeur vient de l'empilement des surfaces, pas des ombres portées.
   ========================================================================== */

:root{
  /* Surfaces — du plus profond au plus élevé */
  --abysse:#010A14;      /* photographie pleine largeur, pied de page */
  --marine:#071829;      /* toile principale */
  --marine-2:#0D2337;    /* cartes, boutons sombres */
  --marine-3:#16354F;    /* panneaux étagés */
  --verre:rgba(1,10,20,.34);

  /* Texte */
  --blanc:#FFFFFF;
  --brume:#A9BDD1;       /* texte secondaire */
  --fumee:#8AA0B6;       /* texte tertiaire */

  /* Accent unique — ponctuation, jamais de la chrome */
  --ecume:#7FD4F0;

  /* État fonctionnel : présence du jour */
  --presence:#5FD39A;
  --alerte:#E0806B;      /* état d'erreur — chaud, pas un rouge d'alarme */

  --bord:rgba(255,255,255,.10);
  --bord-fort:rgba(255,255,255,.22);

  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-20:20px; --sp-24:24px;
  --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-64:64px; --sp-96:96px; --sp-112:112px;

  --r-chip:6px; --r-img:12px; --r-card:16px; --r-pill:9999px;
  --ombre:rgba(0,0,0,.7) 0 12px 32px -16px;

  --display:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --e:cubic-bezier(.2,.7,.3,1);
  --max:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rev,.rev-hero{opacity:1!important;transform:none!important}
}
body{margin:0;background:var(--marine);color:var(--blanc);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}

/* Le display chuchote : graisse 300, jamais plus */
h1,h2,h3{font-family:var(--display);font-weight:300;margin:0 0 var(--sp-16)}
h1{font-size:clamp(46px,7.5vw,80px);line-height:1.08;letter-spacing:-.03em}
h2{font-size:clamp(34px,5vw,60px);line-height:1.14;letter-spacing:-.025em}
h3{font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.02em}
p{margin:0 0 var(--sp-16)}
a{color:var(--ecume);text-underline-offset:4px}
.lead{font-size:clamp(17px,1.8vw,19px);line-height:1.55;color:var(--brume);max-width:56ch}

.wrap{width:min(var(--max),100% - 48px);margin-inline:auto}
.sec{padding:clamp(72px,10vw,var(--sp-112)) 0}

/* Micro-étiquette mono, toujours en capitales */
.lab{display:block;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:var(--fumee);margin-bottom:var(--sp-20)}

:focus-visible{outline:2px solid var(--ecume);outline-offset:4px;border-radius:2px}
.skip{position:absolute;left:-9999px;z-index:100;background:var(--blanc);color:var(--abysse);padding:16px 22px}
.skip:focus{left:0}
/* Texte présent pour les lecteurs d'écran uniquement — utilisé pour décrire
   une photo devenue fond CSS (donc sans alt), sans jamais s'afficher. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.js .rev{opacity:0;transform:translateY(18px);transition:opacity .9s var(--e),transform .9s var(--e)}
.js .rev.vu{opacity:1;transform:none}

/* ---------- Navigation flottante, volontairement clairsemée ---------- */
/* Fond PLEIN, volontairement : un backdrop-filter créerait un contexte
   d'empilement qui isolerait la fusion du logo — et le logo réapparaîtrait
   avec son carré blanc. Testé. */
.hdr{position:sticky;top:0;z-index:50;background:var(--marine);border-bottom:1px solid var(--bord);transition:transform .35s var(--e)}
/* Liseret tricolore — discret (3px), posé sur le bord supérieur de
   l'en-tête plutôt qu'en bandeau séparé : il apparaît et disparaît avec
   l'en-tête au défilement au lieu de se perdre après le premier scroll. */
.hdr::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#0055A4 0 33.33%,#FFFFFF 33.33% 66.66%,#EF4135 66.66% 100%)}
/* Posé par site.js selon le sens du défilement — jamais sous prefers-reduced-motion. */
.hdr[data-cache="1"]{transform:translateY(-100%)}
/* Trois colonnes : navigation à gauche, logo au centre, appel à droite. */
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-24);padding:16px 0}
.hdr-in .logo{grid-column:2;justify-self:center}
.hdr-in .nav{grid-column:3}
/* logo.png est un vrai PNG transparent (trait blanc, alpha réel) — généré
   depuis le logo.jpg fourni (fond blanc) en convertissant la luminance en
   canal alpha. Avant : mix-blend-mode:screen + filter sur le JPEG, qui
   fonctionnait dans Chrome mais faisait réapparaître un carré derrière le
   logo dans Safari (contexte d'empilement isolé différemment selon le
   moteur de rendu). Un vrai fichier transparent n'a besoin d'aucun des
   deux : il s'affiche pareil partout, sans dépendre du navigateur. */
.logo img{display:block;height:76px;width:auto}
.nav{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-4)}

/* .menu enveloppe .nav-gauche. Sur desktop il est transparent : le bouton
   est caché, la nav s'affiche en ligne comme avant. Sous 900px il devient
   le menu mobile — voir la rupture plus bas.
   Pas de <details> ici : un <details> FERMÉ n'est jamais peint par Chrome,
   même en forçant display sur son contenu avec !important — vérifié en
   testant (le nav desktop avait complètement disparu). À la place : une
   case à cocher invisible + une étiquette, le «checkbox hack» — aucun
   JavaScript, et un simple `display` suffit à le piloter sans surprise. */
.menu{grid-column:1;position:relative}
.menu-check{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0}
/* Au-dessus de 900px, le bouton hamburger associé est caché (.menu-btn
   display:none) et cette case n'a plus aucun effet visible — mais opacity:0
   seul ne la retire pas de l'ordre de tabulation. Sans ce correctif, un
   utilisateur au clavier tombait dessus entre le lien d'évitement et le
   premier lien du menu, sur un contrôle sans action perceptible. */
@media (min-width:901px){.menu-check{visibility:hidden}}
.menu-btn{display:none;cursor:pointer}
.nav-gauche{display:flex;align-items:center;gap:var(--sp-4)}
.nav-gauche a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pill);color:var(--blanc);text-decoration:none;font-size:14px;transition:background .25s var(--e)}
.nav-gauche a:hover{background:rgba(255,255,255,.07)}
.nav-gauche a[aria-current="page"]{color:var(--brume)}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pill);color:var(--blanc);text-decoration:none;font-size:14px;font-weight:400;transition:background .25s var(--e)}
.nav a:hover{background:rgba(255,255,255,.07)}
.nav a[aria-current="page"]{color:var(--brume)}

/* Tout ce qui est cliquable est une pilule */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:9px 26px;border:0;border-radius:var(--r-pill);font:inherit;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;transition:background .3s var(--e),transform .3s var(--e),color .3s var(--e)}
.btn--clair{background:var(--blanc);color:var(--abysse)}
.btn--clair:hover{background:var(--ecume);transform:translateY(-1px)}
.btn--sombre{background:var(--marine-2);color:var(--blanc);box-shadow:inset 0 0 0 1px var(--bord)}
.btn--sombre:hover{background:var(--marine-3);transform:translateY(-1px)}
.nav a.btn--clair{color:var(--abysse)}

/* Badge de verre flottant sur la photographie */
.badge{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:var(--r-pill);background:var(--verre);box-shadow:inset 0 0 0 1px var(--bord-fort);backdrop-filter:blur(10px);font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--blanc)}
.badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--presence)}
.badge--plein::before{display:none}

/* ---------- Héros : ouverture cinématique pleine largeur ---------- */
/* ---------- Accueil : bannière ----------
   Troisième itération. La photo reste le FOND de toute la section (aucun
   voile ne recouvre son sujet), mais trois retouches lui donnent une vraie
   fabrication éditoriale plutôt qu'une photo de téléphone posée telle quelle :
   - un calque .hero-split-bg séparé porte le grain colorimétrique (filter),
     isolé du texte pour ne jamais délaver le blanc du titre ;
   - une vignette haute ET basse (pas juste un bandeau bas) resserre l'œil
     vers le centre et adoucit la jonction avec l'en-tête ;
   - la carte de texte entre en fondu-translation à l'ouverture de la page. */
.hero-split{
  position:relative;min-height:clamp(540px,84vh,840px);
  display:flex;align-items:flex-end;overflow:hidden;
  background:var(--abysse);
}
.hero-split-bg{
  position:absolute;inset:0;
  background-image:url('../assets/photos/etal-marche.jpg');
  background-size:cover;background-position:center 38%;
  filter:saturate(1.12) contrast(1.07) brightness(.96);
}
.hero-split::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(1,10,20,.9) 0%,rgba(1,10,20,.46) 32%,rgba(1,10,20,0) 60%),
    /* Reprend la couleur exacte de l'en-tête (--marine, pas --abysse) pour
       que la bannière continue son bleu plutôt que d'y trancher net — le
       ciel clair de la photo, juste sous l'en-tête, sautait aux yeux
       autrement. Quasi opaque en haut, fondu large jusqu'à 38 %. */
    linear-gradient(180deg,rgba(7,24,41,.97) 0%,rgba(7,24,41,.62) 14%,rgba(7,24,41,0) 38%),
    radial-gradient(120% 100% at 50% 100%,rgba(1,10,20,0) 40%,rgba(1,10,20,.28) 100%);
}
.hero-split-card{position:relative;z-index:1;max-width:560px;width:100%;min-width:0;padding:var(--sp-64) var(--sp-48)}
.hero-split-card h1{margin-top:var(--sp-20)}
.hero-today{display:inline-flex;align-items:center;gap:9px;margin:var(--sp-24) 0 0;padding:7px 16px 7px 12px;
  border-radius:var(--r-pill);background:var(--verre);box-shadow:inset 0 0 0 1px var(--bord);
  backdrop-filter:blur(8px);font-size:14px;color:var(--brume)}
.hero-today-dot{width:8px;height:8px;border-radius:50%;background:var(--fumee);flex:none}
.hero-today[data-ton="ouvert"] .hero-today-dot{background:var(--presence)}
.hero-today[data-ton="ferme"] .hero-today-dot{background:#E0A45C}
.hero-split .hero-cta{margin-top:var(--sp-32)}

/* Entrée : fondu + légère translation, une seule fois à l'ouverture — pas un
   « reveal » au scroll comme .rev, puisque le héros est déjà visible au
   chargement. Jamais sous prefers-reduced-motion (règle globale plus haut). */
.js .rev-hero{opacity:0;transform:translateY(14px);animation:entree-hero .8s .15s var(--e) forwards}
@keyframes entree-hero{to{opacity:1;transform:none}}

.hero{position:relative;min-height:clamp(600px,92vh,940px);display:flex;align-items:flex-end;padding:var(--sp-64) 0 var(--sp-64);overflow:hidden;background:var(--abysse)}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;opacity:.62}
.hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,10,20,.55) 0%,rgba(1,10,20,.35) 40%,rgba(7,24,41,.96) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero h1{max-width:15ch;margin:var(--sp-24) 0 var(--sp-20)}
.hero .lead{color:var(--brume)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp-12);margin-top:var(--sp-32)}

/* Carte de verre flottante — l'info du jour */
.aujourd{position:relative;z-index:2;margin-top:var(--sp-48);padding:var(--sp-20);border-radius:var(--r-card);background:var(--verre);box-shadow:inset 0 0 0 1px var(--bord);backdrop-filter:blur(14px);max-width:640px}
.aujourd[data-ton="ouvert"]{box-shadow:inset 0 0 0 1px rgba(95,211,154,.45)}
.aujourd-lab{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--fumee);display:block;margin-bottom:10px}
.aujourd-t{font-family:var(--display);font-weight:300;font-size:clamp(26px,3.4vw,38px);line-height:1.16;letter-spacing:-.025em;margin:0 0 8px;color:var(--blanc)}
.aujourd-d{margin:0;font-size:15px;color:var(--brume)}

/* ---------- Journée : chiffres ---------- */
.jour{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-20);margin-top:var(--sp-48)}
.etape{padding-top:var(--sp-20);border-top:1px solid var(--bord)}
.etape b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(40px,4.6vw,58px);line-height:1;letter-spacing:-.03em;color:var(--blanc)}
.etape strong{display:block;margin:var(--sp-16) 0 var(--sp-8);font-size:15px;font-weight:500}
.etape span{display:block;font-size:14px;color:var(--fumee);line-height:1.55;max-width:26ch}

/* ---------- Semaine ---------- */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-8);margin-top:var(--sp-32)}
.day{display:grid;gap:10px;padding:var(--sp-20) var(--sp-8);text-align:center;text-decoration:none;color:var(--blanc);background:var(--marine-2);border-radius:var(--r-chip);box-shadow:inset 0 0 0 1px var(--bord);cursor:pointer;transition:background .25s var(--e),transform .25s var(--e)}
.day:hover{background:var(--marine-3);transform:translateY(-2px)}
.day[data-on="1"]{box-shadow:inset 0 0 0 1.5px rgba(95,211,154,.55)}
/* data-on = « c'est aujourd'hui » (toujours visible, repère fixe).
   data-actif = « c'est le jour actuellement filtré » (état cliqué, temporaire).
   Les deux peuvent se combiner : le contour vert reste, le fond change. */
.day[data-actif="1"]{background:var(--marine-3);box-shadow:inset 0 0 0 1.5px var(--ecume)}
.day-j{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--fumee)}
.day[data-on="1"] .day-j{color:var(--presence)}
.day[data-actif="1"] .day-j{color:var(--ecume)}
.day-n{font-family:var(--display);font-weight:300;font-size:clamp(26px,3vw,36px);line-height:1}
.day-l{font-size:11px;color:var(--fumee)}

/* Ligne d'état au-dessus de la liste : dit sans ambiguïté ce qu'on regarde
   (« Mercredi · 2 marchés » ou « Toute la semaine · 8 emplacements »),
   avec un moyen explicite de revenir en arrière — plus de jour cliqué qui
   ne change rien à l'écran. */
.liste-barre{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-12);margin-top:var(--sp-32)}
.liste-etat{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--brume)}
.liste-reset{font-size:13px;color:var(--ecume);text-decoration:none;white-space:nowrap}
.liste-reset:hover{text-decoration:underline}
.liste-barre + .list{margin-top:var(--sp-12)}

/* ---------- Marchés ---------- */
.list{list-style:none;margin:var(--sp-32) 0 0;padding:0}
.row{display:grid;grid-template-columns:130px 1fr auto auto;gap:var(--sp-24);align-items:center;padding:var(--sp-20) var(--sp-20);border-radius:var(--r-card);transition:background .25s var(--e)}
.row:hover{background:var(--marine-2)}
.row[data-on="1"]{background:var(--marine-2);box-shadow:inset 0 0 0 1px rgba(95,211,154,.4)}
.row+.row{margin-top:var(--sp-4)}
.row-j{display:flex;flex-wrap:wrap;gap:5px}
.tag{padding:4px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--brume)}
.row[data-on="1"] .tag.on{background:rgba(95,211,154,.2);color:var(--presence)}
.row-n{font-family:var(--display);font-weight:300;font-size:clamp(22px,2.3vw,29px);letter-spacing:-.02em}
.row-c{color:var(--fumee);font-size:13px;margin-top:2px}
.row-h{font-size:14px;color:var(--brume);white-space:nowrap;font-variant-numeric:tabular-nums}
.row-a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:var(--r-pill);background:transparent;box-shadow:inset 0 0 0 1px var(--bord-fort);color:var(--blanc);text-decoration:none;font-size:13px;white-space:nowrap;transition:background .25s var(--e)}
.row-a:hover{background:rgba(255,255,255,.1)}

/* ---------- Photographie ---------- */
.figure{margin:0;border-radius:var(--r-img);overflow:hidden;box-shadow:var(--ombre)}
.figure img{display:block;width:100%;height:100%;object-fit:cover}
.figure--large{aspect-ratio:21/9}
.figure--portrait{aspect-ratio:4/5}
.figure figcaption{margin-top:var(--sp-12);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fumee)}
.bande{position:relative;padding:0;background:var(--abysse)}
.bande img{display:block;width:100%;height:clamp(340px,52vh,560px);object-fit:cover;opacity:.8}

/* Panneau étagé */
.panneau{background:var(--marine-3);border-radius:var(--r-card);padding:clamp(28px,4vw,var(--sp-48))}

/* ---------- Grilles ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-48)}
.duo--asym{grid-template-columns:1.15fr .85fr;align-items:center}
.carte{padding:var(--sp-20);border-radius:var(--r-card);background:var(--marine-2);box-shadow:inset 0 0 0 1px var(--bord)}
.carte h3{margin-top:0}
.carte p{color:var(--brume);font-size:15px}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-24);margin-top:var(--sp-48);padding-top:var(--sp-32);border-top:1px solid var(--bord)}
/* min-width:0 sur l'item de grille : sans lui, un mot long affiché en gros
   titre (« Guilvinec ») garde sa largeur de contenu minimale et force sa
   colonne — et donc toute la page — à déborder plutôt que de se mettre à
   la ligne. Même famille de bug que sur la bannière, en version grille. */
.stat{min-width:0}
.stat b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(38px,4.6vw,56px);line-height:1.05;letter-spacing:-.03em;color:var(--blanc);overflow-wrap:break-word}
.stat span{display:block;margin-top:10px;font-size:13px;color:var(--fumee)}

/* ---------- Carte géographique ---------- */
.mapwrap{margin-top:var(--sp-32);border-radius:var(--r-card);overflow:hidden;box-shadow:inset 0 0 0 1px var(--bord)}
#carte{height:clamp(420px,58vh,600px);width:100%;background:var(--marine-2)}
.map-fallback{padding:var(--sp-48) var(--sp-24);text-align:center;color:var(--fumee)}
.leaflet-popup-content-wrapper{border-radius:var(--r-card);background:var(--marine-2);color:var(--blanc);box-shadow:var(--ombre)}
.leaflet-popup-tip{background:var(--marine-2)}
.leaflet-popup-content{margin:18px 20px;font-family:var(--sans)}
.pp-n{font-family:var(--display);font-weight:300;font-size:22px;margin:0 0 3px;letter-spacing:-.02em}
.pp-c{margin:0 0 8px;font-size:13px;color:var(--fumee)}
.pp-j{margin:0 0 3px;font-size:13px;color:var(--brume)}
.pp-h{margin:0 0 12px;font-size:13px;color:var(--brume);font-variant-numeric:tabular-nums}
.pp-a{display:inline-block;padding:9px 18px;border-radius:var(--r-pill);background:var(--blanc);color:var(--abysse)!important;text-decoration:none;font-size:13px;font-weight:500}

/* ---------- Formulaire ---------- */
.field{display:block;margin-bottom:var(--sp-20)}
.field span{display:block;margin-bottom:8px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--fumee)}
.field input,.field textarea{width:100%;min-height:52px;padding:15px 18px;font:inherit;font-size:15px;background:var(--marine-2);border:0;box-shadow:inset 0 0 0 1px var(--bord);border-radius:var(--r-chip);color:var(--blanc);transition:box-shadow .25s var(--e)}
.field textarea{min-height:150px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--fumee)}
.field input:focus,.field textarea:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ecume)}
.help{font-size:13px;color:var(--fumee)}

/* Piège à robots — hors écran, jamais display:none (certains lecteurs
   d'écran ignorent display:none différemment ; -10000px est sans ambiguïté
   et un robot qui remplit tous les champs visibles ou non tombe dedans). */
.trap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* État du formulaire — rempli par site.js à partir de ?statut= dans l'URL,
   après la redirection que fait contact.php. Reste caché sans JS ; le
   message a de toute façon été traité côté serveur avant la redirection,
   seul l'accusé de réception visuel dépend ici du script. */
.form-etat{padding:var(--sp-16) var(--sp-20);border-radius:var(--r-card);margin-bottom:var(--sp-24);font-size:14px}
.form-etat[data-ok]{background:rgba(95,211,154,.14);box-shadow:inset 0 0 0 1px rgba(95,211,154,.4);color:var(--blanc)}
.form-etat[data-ko]{background:rgba(224,128,107,.14);box-shadow:inset 0 0 0 1px rgba(224,128,107,.5);color:var(--blanc)}

/* ---------- Recettes ---------- */
.filters{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-top:var(--sp-24)}
.fbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:0;border-radius:var(--r-pill);background:var(--marine-2);box-shadow:inset 0 0 0 1px var(--bord);color:var(--blanc);font:inherit;font-size:13px;cursor:pointer;transition:background .25s var(--e)}
.fbtn span{font-family:var(--mono);font-size:11px;color:var(--fumee)}
.fbtn:hover{background:var(--marine-3)}
.fbtn[aria-pressed="true"]{background:var(--blanc);color:var(--abysse);box-shadow:none}
.fbtn[aria-pressed="true"] span{color:var(--marine-3)}
.recs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-16);margin-top:var(--sp-32)}
.rec{padding:var(--sp-24);border-radius:var(--r-card);background:var(--marine-2);box-shadow:inset 0 0 0 1px var(--bord)}
.rec[hidden]{display:none}
.rec-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:var(--sp-12)}
.prov{padding:4px 11px;border-radius:var(--r-pill);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.prov--b{background:rgba(95,211,154,.16);color:var(--presence)}
.prov--a{background:rgba(127,212,240,.16);color:var(--ecume)}
.rec-esp{font-size:12px;color:var(--fumee)}
.rec h3{margin:0 0 var(--sp-16)}
.rec-info{display:flex;flex-wrap:wrap;gap:var(--sp-24);margin:0 0 var(--sp-20);padding:0 0 var(--sp-16);list-style:none;border-bottom:1px solid var(--bord)}
.rec-info b{display:block;font-family:var(--display);font-weight:300;font-size:20px;font-variant-numeric:tabular-nums}
.rec-info span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fumee)}
.rec-b{display:grid;grid-template-columns:1fr 1.3fr;gap:var(--sp-24)}
.rec-b h4{margin:0 0 12px;font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.11em;text-transform:uppercase;color:var(--fumee)}
.rec-ing{margin:0;padding-left:18px;font-size:14px;color:var(--brume)}
.rec-ing li{margin-bottom:6px}
.rec-et{margin:0;padding-left:20px;font-size:14px;color:var(--brume)}
.rec-et li{margin-bottom:10px}
.rec-as{margin:var(--sp-20) 0 0;padding-top:var(--sp-16);border-top:1px solid var(--bord);font-size:13px;line-height:1.6;color:var(--brume)}
.rec-as b{color:var(--ecume);font-weight:500}

/* ---------- Barre d'appel ---------- */
.callbar{display:none}
@media (max-width:900px){
  /* Le bouton flotte directement sur la page, sans bandeau derrière lui —
     plus de bande sombre/floutée qui tranchait avec le contenu au-dessus. */
  .callbar{display:block;position:fixed;inset:auto 0 0 0;z-index:60;padding:12px 18px calc(12px + env(safe-area-inset-bottom));transition:transform .35s var(--e)}
  /* Même mécanisme que l'en-tête, sens opposé : ancrée en bas, elle glisse
     donc vers le bas pour disparaître (+100%, pas -100%). */
  .callbar[data-cache="1"]{transform:translateY(100%)}
  .callbar .btn{width:100%}
  body{padding-bottom:92px}
}

/* ---------- Pied ---------- */
.ftr{background:var(--abysse);padding:clamp(56px,7vw,var(--sp-96)) 0 32px}
.ftr a{color:var(--blanc);text-decoration:none}
.ftr a:hover{color:var(--ecume)}
.ftr-g{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:var(--sp-40);margin-bottom:var(--sp-48)}
.ftr h4{margin:0 0 var(--sp-16);font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--fumee)}
.ftr p{color:var(--brume);font-size:14px}
.ftr ul{margin:0;padding:0;list-style:none}
.ftr li{margin-bottom:10px;font-size:14px}
.ftr-tel{font-family:var(--display);font-weight:300;font-size:32px;letter-spacing:-.02em}
.ftr-b{border-top:1px solid var(--bord);padding-top:24px;font-size:13px;color:var(--fumee);display:flex;flex-wrap:wrap;gap:8px var(--sp-24)}

/* ---------- Ruptures ---------- */
@media (max-width:1024px){
  .recs{grid-template-columns:1fr}
  .rec-b{grid-template-columns:1fr}
  .jour{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nav a:not(.nav-cta){display:none}
  .duo,.duo--asym,.ftr-g{grid-template-columns:1fr;gap:var(--sp-32)}
  .row{grid-template-columns:1fr;gap:12px}
  .row-a{justify-self:start}
  .stats{grid-template-columns:repeat(2,1fr);gap:var(--sp-32)}
  /* !important nécessaire : cette rangée porte un style inline
     (grid-template-columns:repeat(3,1fr)) pour le desktop, qui sinon
     l'emporterait aussi ici. Sur 3 colonnes étroites, « Guilvinec » se
     cassait en trois lignes — une seule colonne laisse le mot respirer. */
  .stats--provenance{grid-template-columns:1fr!important;gap:var(--sp-24)}
  .week{grid-template-columns:repeat(7,1fr);gap:4px}
  .day{padding:14px 3px}
  .day-j{font-size:9px;letter-spacing:.04em}
  .logo img{height:52px}
  .hdr-in{grid-template-columns:1fr auto 1fr}
  .hero{min-height:auto;padding-top:var(--sp-48)}
  .hero-split{min-height:clamp(440px,74vh,600px)}
  .hero-split-bg{background-position:center 28%}
  .hero-split-card{padding:var(--sp-40) var(--sp-24)}

  /* Le bouton hamburger n'existe QUE sous 900px : au-dessus, .nav-gauche
     reste affichée en ligne (règle de base, jamais masquée). Un bouton qui
     se voit au repos, pas seulement au survol (inutile au doigt de toute
     façon) : contour + fond léger en permanence, comme les .btn--sombre
     du reste du site — jamais juste 3 traits flottants dans le vide. */
  .menu-btn{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
    border-radius:var(--r-pill);background:var(--marine-2);
    box-shadow:inset 0 0 0 1px var(--bord-fort)}
  .menu-btn:hover{background:var(--marine-3)}
  .menu-check:checked+.menu-btn{background:var(--marine-3);box-shadow:inset 0 0 0 1px var(--ecume)}
  .menu-bars{display:block;width:19px;height:13px;position:relative}
  .menu-bars::before,.menu-bars span,.menu-bars::after{content:'';position:absolute;left:0;right:0;height:2px;border-radius:2px;background:var(--blanc);transition:transform .25s var(--e),opacity .25s var(--e)}
  .menu-bars::before{top:0}
  .menu-bars span{top:5.5px}
  .menu-bars::after{top:11px}
  /* Coché : les trois barres se transforment en croix, retour visuel net
     que l'état a changé (pas juste le panneau qui apparaît en silence). */
  .menu-check:checked+.menu-btn .menu-bars::before{transform:translateY(5.5px) rotate(45deg)}
  .menu-check:checked+.menu-btn .menu-bars span{opacity:0}
  .menu-check:checked+.menu-btn .menu-bars::after{transform:translateY(-5.5px) rotate(-45deg)}

  /* Décoché par défaut ; affiché seulement quand la case est cochée, en
     panneau ancré sous le bouton — pas de fil JS, pas de reflow du reste
     de l'en-tête. Combinateur ~ (pas +) : nav-gauche suit le label, pas
     directement la case. */
  .nav-gauche{display:none}
  .menu-check:checked~.nav-gauche{
    display:flex;flex-direction:column;gap:2px;align-items:stretch;
    position:absolute;top:calc(100% + 10px);left:0;min-width:230px;
    padding:10px;border-radius:var(--r-card);background:var(--marine-2);
    box-shadow:0 20px 48px -16px rgba(0,0,0,.65),inset 0 0 0 1px var(--bord-fort);
    z-index:70;
  }
  .menu-check:checked~.nav-gauche a{padding:0 16px}

  /* La bande des 7 jours défile horizontalement au lieu de déborder :
     à 375px, 7 colonnes égales forcent chaque libellé sous sa largeur de
     contenu minimale (« marchés » ne tient pas sous ~45px), ce qui poussait
     le bord droit hors de l'écran. */
  .week{display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:var(--sp-8);padding-bottom:4px}
  .day{flex:0 0 72px;scroll-snap-align:start}
}