/* ============================================================
   PAGES PUBLIQUES (index.html, surf.html) — refonte « Carte marine »
   ============================================================
   Mêmes couleurs et polices que l'app (src/styles.css) : blanc de carte, encre de sonde,
   bleu sonde, vert estran, ocre côte, magenta balise. Les valeurs sont recopiées ici parce
   que la feuille de l'app est inlinée dans app.html au build : si elles changent là-bas,
   les changer ici aussi.
   Principes : pas d'étiquette en capitales au-dessus des titres, pas de mot isolé en
   couleur dans un titre, pas de grille de trois cartes à emoji. La preuve, c'est l'app :
   une fiche réelle, la courbe de marée, la carte satellite. */
:root{
  --bg:#F7F8F5;--bg-soft:#EDF0EB;--surface:#FFFFFF;--surface2:#E7EBE5;
  --text:#0F2430;--text-dim:#3E5260;--border:#D3DAD4;
  --accent:#1F5E8C;--accent2:#174A70;--on-accent:#FFFFFF;
  --go:#2E7D5B;--maybe:#D5E8DC;--bof:#9C5C00;--no:#B3261E;
  --green-text:#1F5A41;--ocre:#B07A2A;--ocre-text:#7A5418;--mag:#B0006E;
  --ink:#0F2430;--paper:#F7F8F5;
  --d:'Barlow Semi Condensed','Arial Narrow',system-ui,sans-serif;
  --b:'Atkinson Hyperlegible Next',system-ui,-apple-system,'Segoe UI',sans-serif;
  --iso:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12'%3E%3Cpath d='M0 6 C20 1 40 11 60 6 S100 1 120 6' fill='none' stroke='%230F2430' stroke-opacity='.26' stroke-width='1.3'/%3E%3C/svg%3E");
}
:root[data-theme="dark"]{
  --bg:#0E1A20;--bg-soft:#13232B;--surface:#13232B;--surface2:#1A2D37;
  --text:#E8EEEA;--text-dim:#A7B6BD;--border:#27404C;
  --accent:#7DB3DE;--accent2:#9CC6E8;--on-accent:#0E1A20;
  --green-text:#8ED3AE;--ocre-text:#E8C48C;--mag:#F27AC0;
  --iso:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12'%3E%3Cpath d='M0 6 C20 1 40 11 60 6 S100 1 120 6' fill='none' stroke='%23E8EEEA' stroke-opacity='.22' stroke-width='1.3'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--b);background:var(--bg);color:var(--text);line-height:1.55;font-size:1.05rem;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--d);font-weight:700;line-height:1.05;letter-spacing:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.pi{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:-.25em}

/* Boutons : pleins (bleu sonde) ou au trait. Pas de flèche ajoutée au texte. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:12px;font-family:var(--b);font-weight:700;font-size:1.02rem;text-decoration:none;border:none;cursor:pointer;background:var(--accent);color:var(--on-accent)}
.btn:hover{background:var(--accent2)}
.btn-trait{background:transparent;color:inherit;border:1.5px solid currentColor}
.btn-trait:hover{background:rgba(127,127,127,.12)}
.btn-clair{background:var(--paper);color:var(--ink)}
.btn-clair:hover{background:#fff}

/* Navigation */
nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--d);font-weight:700;font-size:1.6rem;color:var(--text);text-decoration:none}
.logo img{width:40px;height:40px}
/* Le trait du logo est foncé sur fond transparent : sur l'encre il disparaît, d'où le disque papier. */
[data-theme="dark"] .logo img{background:var(--paper);border-radius:50%}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-link{font-weight:700;font-size:.98rem;text-decoration:none;padding:10px 8px}
.nav-link:hover{color:var(--accent)}
.theme-toggle{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;color:var(--text);border-radius:10px;cursor:pointer}
.theme-toggle:hover{background:var(--surface2)}
.nav-cta{min-height:44px;padding:0 16px;font-size:.95rem}

/* Hero : encre, courbes de niveau en filigrane (le trait du logo), une vraie fiche à droite */
.hero{position:relative;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cg fill='none' stroke='%23F7F8F5' stroke-opacity='.07' stroke-width='1.3'%3E%3Cpath d='M-20 120 C120 60 220 180 360 110 S560 60 640 130'/%3E%3Cpath d='M-20 150 C120 92 220 214 360 142 S560 94 640 162'/%3E%3Cpath d='M-20 184 C120 128 220 250 360 178 S560 130 640 196'/%3E%3Cpath d='M-20 400 C100 350 260 470 380 410 S560 350 640 420'/%3E%3Cpath d='M-20 436 C100 388 260 506 380 446 S560 388 640 456'/%3E%3C/g%3E%3C/svg%3E");color:var(--paper);overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(90% 90% at 85% 0%,rgba(31,94,140,.45),transparent 60%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:72px 0 84px}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.2rem);margin-bottom:18px}
.hero .sub{font-size:1.2rem;color:rgba(247,248,245,.9);max-width:30em;margin-bottom:28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero-actions .btn-trait{color:var(--paper)}
.hero-note{font-size:.92rem;color:rgba(247,248,245,.75);margin-top:14px}

/* Extrait de fiche (la même que dans l'app) */
.fiche{background:var(--paper);color:var(--ink);border-radius:16px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.fiche-tete{padding:16px 18px 10px}
.fiche-nom{font-family:var(--d);font-weight:700;font-size:1.6rem;line-height:1.05}
.fiche-sous{font-size:.9rem;color:#3E5260;margin-top:3px}
.verdict{padding:12px 18px 13px}
.verdict.go{background:var(--go);color:#fff}
.verdict.maybe{background:var(--maybe);color:var(--ink);box-shadow:inset 0 3px 0 var(--go)}
.verdict.bof{background:var(--bof);color:#fff}
.verdict-l{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.verdict-mot{font-family:var(--d);font-weight:700;font-size:2.4rem;line-height:1}
.verdict-cren{font-family:var(--d);font-weight:600;font-size:1.45rem}
.verdict-sc{margin-left:auto;font-size:.82rem;font-weight:700;opacity:.9}
.verdict p{font-size:.95rem;line-height:1.4;margin-top:6px}
.fiche-maree{padding:12px 18px 6px}
.fiche-maree h3{font-size:1.1rem;font-weight:600;display:flex;justify-content:space-between;align-items:baseline}
.fiche-maree h3 span{font-family:var(--b);font-weight:400;font-size:.82rem;color:#3E5260}
.fiche-maree svg{display:block;width:100%;height:auto;margin-top:6px}
.fiche-pc{padding:4px 18px 16px;display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:.88rem;line-height:1.4;background:var(--iso) repeat-x top left;padding-top:16px}
.fiche-pc b{display:block;font-family:var(--d);font-weight:600;font-size:1.02rem;margin-bottom:2px}

/* Sections : un titre, un texte, une preuve. Séparées par une courbe de niveau. */
section{padding:76px 0}
section+section{background-image:var(--iso);background-repeat:repeat-x;background-position:top left}
.sec-titre{font-size:clamp(2rem,4vw,2.8rem);max-width:18em;margin-bottom:16px}
.lead{font-size:1.15rem;color:var(--text-dim);max-width:36em}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-top:36px}
.deux p+p{margin-top:12px}
.texte{color:var(--text-dim)}
.texte b{color:var(--text)}

/* Le fond vu du ciel : orthophoto IGN, gouttes au verdict posées dessus */
.satellite{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 10px 28px rgba(15,36,48,.25)}
.satellite img{display:block;width:100%;height:auto}
.satellite figcaption{position:absolute;right:0;bottom:0;background:rgba(247,248,245,.9);color:#3E5260;font-size:.75rem;padding:3px 8px;border-radius:8px 0 0 0}
.goutte{position:absolute;width:38px;height:38px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid #0F2430;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.goutte b{transform:rotate(45deg);font-family:var(--d);font-weight:700;font-size:15px}
.goutte.go{background:#2E7D5B;color:#fff}.goutte.maybe{background:#D5E8DC;color:#0F2430}.goutte.bof{background:#9C5C00;color:#fff}

/* Ce que la note contient (liste, pas trois cartes) */
.sources{margin-top:32px;border-top:1.5px solid var(--text)}
.source{display:grid;grid-template-columns:220px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--border)}
.source h3{font-size:1.35rem}
.source p{color:var(--text-dim)}
.franc-jeu{margin-top:28px;border-left:3px solid var(--ocre);padding:6px 0 6px 16px;max-width:42em}
.franc-jeu b{color:var(--text)}

/* Où, et quoi d'autre */
.zones{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;font-family:var(--d);font-weight:600;font-size:1.25rem}
.zones .bientot{color:var(--text-dim);font-weight:500}
.activites{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.activite{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1.5px solid var(--border);border-radius:10px;font-weight:700;text-decoration:none}
.activite.terre{color:var(--ocre-text);border-color:var(--ocre)}

/* Appel final */
.final{background:var(--ink);color:var(--paper);text-align:left}
section.final{background-image:none}
.final h2{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:12px;max-width:16em}
.final p{color:rgba(247,248,245,.85);max-width:32em;margin-bottom:26px}
.final .hero-note{margin-top:14px}

/* Pied de page */
footer{background:var(--ink);color:rgba(247,248,245,.75);padding:28px 0 34px;font-size:.92rem;border-top:1px solid rgba(247,248,245,.12)}
.foot-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
footer .logo{color:var(--paper);font-size:1.25rem}
footer .logo img{width:30px;height:30px;background:var(--paper);border-radius:50%}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{text-decoration:none;color:rgba(247,248,245,.85)}
.foot-links a:hover{color:#fff;text-decoration:underline}
.foot-note{width:100%;font-size:.82rem;color:rgba(247,248,245,.6)}

@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr;gap:36px;padding:44px 0 56px}
  .deux{grid-template-columns:1fr;gap:28px}
  .source{grid-template-columns:1fr;gap:4px}
  section{padding:56px 0}
  .nav-link{display:none}
}
@media (max-width:420px){
  .nav-cta{padding:0 12px;font-size:.9rem}
  .fiche-pc{grid-template-columns:1fr}
}