/* ==================================================================
   Loguivy — feuille de style commune (direction « Marine & ciel »)
   Fond très clair, bandeau marine dégradé, angles arrondis, ombres
   douces. Toutes les pages partagent ces classes : un seul endroit
   à retoucher pour faire évoluer l'ensemble.

   Poppins (OFL 1.1) est servi localement depuis /polices — aucune
   requête vers Google, et la police reste disponible hors ligne.
   ================================================================== */

@font-face{
  font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;
  src:url("/polices/poppins-600.woff2") format("woff2");
}
@font-face{
  font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;
  src:url("/polices/poppins-700.woff2") format("woff2");
}

:root{
  --fond:#F3F7FC;
  --carte:#FFFFFF;
  --carte2:#F4F8FC;          /* tuiles internes */
  --trait:#E7EDF6;
  --trait-clair:#EFF4FA;
  --texte:#3D4B5F;
  --fort:#0A1B33;            /* titres et valeurs */
  --doux:#8494A9;
  --label:#96A5B8;

  --marine:#0B2545;
  --marine2:#134074;
  --marine3:#3E7CB1;
  --ciel:#8FC7EE;
  --ciel-doux:#E4EFFA;

  --eau:#134074;             /* accent primaire */
  --eau-clair:#2B6CA8;
  --chaud:#E4653A;           /* Predict, alertes, curseur temps */
  --chaud-fond:#FBEBE4;
  --chaud-texte:#B4441C;
  --ok:#17845F;
  --ok-fond:#E0F4EC;

  --faible:#7FB3DC; --moyen:#2B6CA8; --fort-coef:#0B2545;

  --titre:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    Helvetica,Arial,sans-serif;
  --police:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,
    Arial,"Helvetica Neue",sans-serif;

  /* Bandeau : regroupé en variables pour qu'une page puisse le rehabiller. */
  --hero-fond:linear-gradient(118deg,#0B2545 0%,#134074 55%,#3E7CB1 100%);
  --hero-lien:#DCEAF8;
  --hero-doux:#C3DBF2;
  --hero-sur:#0B2545;        /* texte posé sur un aplat blanc du bandeau */

  --r:20px;                  /* cartes */
  --r2:14px;                 /* tuiles */
  --ombre:0 1px 3px #0F172A0A, 0 8px 24px #0F172A08;
  --ombre-btn:0 6px 18px #13407433;
}

*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--texte);
  font:15px/1.55 var(--police);-webkit-font-smoothing:antialiased}

/* ==================================================================
   Bandeau marine — construit par entete-ui.js
   ================================================================== */
.hero{position:relative;overflow:hidden;background:var(--hero-fond)}
.hero .dedans{position:relative;z-index:2;max-width:1140px;margin:0 auto;
  padding:24px 26px 40px}
/* Pages d'entrée : pas de menu, donc pas de rangée à compenser. */
.hero .dedans.sans-nav{padding-top:52px}
.hero .poisson{position:absolute;right:-70px;top:132px;width:480px;height:auto;
  z-index:1;opacity:.62;pointer-events:none}
.hero .vague{display:block;width:100%;height:68px;margin-bottom:-1px;position:relative;z-index:2}
.hero .vague path{fill:var(--fond)}

.barre-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:13.5px;margin-bottom:32px}
/* Les entrées de menu sont des boutons, pas des liens soulignés. */
.barre-nav a{display:inline-flex;align-items:center;color:var(--hero-lien);
  text-decoration:none;font-weight:500;padding:10px 17px;border-radius:999px;
  background:#FFFFFF14;border:1px solid #FFFFFF1F;transition:.14s;white-space:nowrap}
.barre-nav a:hover{background:#FFFFFF29;border-color:#FFFFFF3D;color:#fff}
.barre-nav a.on{background:#fff;border-color:#fff;color:var(--hero-sur);font-weight:600;
  box-shadow:0 4px 14px #0000001F}
/* Predict garde sa couleur jusque dans le menu des autres pages. */
body:not(.corail) .barre-nav a[href="/predict.html"]{background:var(--chaud);
  border-color:var(--chaud);color:#fff;font-weight:600;
  box-shadow:0 4px 14px #E4653A4D}
body:not(.corail) .barre-nav a[href="/predict.html"]:hover{background:#F0794E;
  border-color:#F0794E;color:#fff}
.barre-nav .pousse{flex:1}
.barre-nav .qui{color:var(--hero-doux);margin:0 8px 0 4px}
.barre-nav .cta{background:var(--ciel);border-color:var(--ciel);color:var(--hero-sur);
  font-weight:600}
.barre-nav .cta:hover{background:#fff;border-color:#fff;color:var(--hero-sur)}
.barre-nav button.sortir{background:#FFFFFF14;border:1px solid #FFFFFF1F;
  color:var(--hero-lien);padding:10px 16px;border-radius:999px;
  font:500 13.5px/1 var(--police);cursor:pointer;transition:.14s}
.barre-nav button.sortir:hover{background:#FFFFFF29;border-color:#FFFFFF3D;color:#fff}
/* Sur téléphone, ces boutons disparaissent au profit de la barre d'onglets :
   voir le bloc « Barre d'onglets » plus bas. */

.hero h1{margin:0;font:700 52px/1.04 var(--titre);letter-spacing:-.035em;color:#fff}
.hero h1 span{color:var(--ciel)}
.hero .sous{margin:12px 0 0;color:var(--hero-doux);font-size:14.5px;max-width:60ch}
.hero .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.hero .chips span{background:#FFFFFF1A;border:1px solid #FFFFFF2E;border-radius:999px;
  padding:7px 15px;font-size:12.5px;color:var(--hero-lien)}
/* Au bout des pastilles, celle qui agit : même gabarit, couleur chaude. */
.hero .chips .chip-action{display:inline-flex;align-items:center;gap:7px;
  background:var(--chaud);border:1px solid var(--chaud);border-radius:999px;
  padding:7px 16px 7px 13px;font:600 12.5px/1 var(--titre);color:#fff;
  text-decoration:none;box-shadow:0 3px 12px #E4653A45;
  transition:background .12s ease,box-shadow .12s ease}
.hero .chips .chip-action:hover{background:#D2542B;box-shadow:0 5px 16px #E4653A5C}
.hero .chips .chip-action:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hero .pile{display:flex;flex-direction:column;gap:14px}
.hero .pile > div{border-left:2px solid var(--ciel);padding:4px 0 4px 16px}
.hero .pile b{display:block;font:700 30px/1 var(--titre);letter-spacing:-.03em;color:#fff}
.hero .pile span{display:block;font-size:12px;color:var(--hero-doux);margin-top:4px}
.hero .split{display:grid;grid-template-columns:1.5fr .8fr;gap:40px;align-items:center}
@media(max-width:820px){.hero .split{grid-template-columns:1fr;gap:26px}
  .hero .poisson{display:none}}

/* ==================================================================
   Thème corail — la page Loguigui Predict en entier
   Le moteur de conseil ne ressemble à aucune autre page : bandeau,
   boutons et chiffres passent au rouge orangé. Une seule bascule de
   variables suffit, le reste de la feuille suit.
   ================================================================== */
body.corail{
  /* Le fond aussi se réchauffe : sinon le bandeau corail flotte sur un
     gris bleuté qui jure avec lui. */
  --fond:#FCF7F4;
  --carte2:#FBF4F0;
  --trait:#F2E7E1;
  --trait-clair:#F8F0EB;
  --texte:#4A3A33;
  --fort:#2E1A12;
  --doux:#A08678;
  --label:#B39685;
  --hero-fond:linear-gradient(118deg,#5A1A0B 0%,#B4401F 52%,#EE8348 100%);
  --hero-lien:#FCE0D3;
  --hero-doux:#F7C6AE;
  --hero-sur:#7A2510;
  --eau:#C4472A;             /* accent primaire de la page */
  --eau-clair:#E4653A;
  --ciel:#FFC7AC;
  --ciel-doux:#FCEBE3;
  --faible:#F2B79B; --moyen:#E4653A; --fort-coef:#8C2F14;
  --ombre-btn:0 6px 18px #C4472A38;
}
body.corail .carte h2,body.corail legend,body.corail .titre-section{color:#C08670}
body.corail .PM,body.corail .mk.pm{background:var(--eau-clair)}

/* ==================================================================
   Structure des pages
   ================================================================== */
header{max-width:1140px;margin:0 auto;padding:28px 26px 0}
main{max-width:1140px;margin:0 auto;padding:26px 26px 56px}
.hero + main{padding-top:26px}

h1{margin:0;font:700 42px/1.05 var(--titre);letter-spacing:-.035em;color:var(--fort)}
h1 span,h1 .boussole{color:var(--doux)}
.sous{color:var(--doux);font-size:14px;margin:11px 0 22px;max-width:58ch}

a.retour{color:var(--eau);text-decoration:none;font-size:13.5px;font-weight:600;
  display:inline-block;margin-bottom:14px}
a.retour:hover{text-decoration:underline}

/* Ancienne barre de compte : conservée pour les pages qui n'ont pas
   encore le bandeau, mais redessinée. */
.barre-compte{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-bottom:20px;font-size:13px}
.barre-compte span{font-weight:600;color:var(--fort)}
.barre-compte a{color:var(--eau);text-decoration:none;font-weight:600}
.barre-compte a:hover{text-decoration:underline}
.barre-compte button{margin-left:auto;background:var(--carte);
  border:1px solid var(--trait);color:var(--doux);padding:8px 15px;border-radius:999px;
  font:600 12.5px/1 var(--police);cursor:pointer}
.barre-compte button:hover{color:var(--chaud-texte);border-color:#F0C9B8}

.titre-section{font:700 10.5px/1 var(--titre);letter-spacing:.16em;
  text-transform:uppercase;color:var(--label);margin:4px 0 14px}

/* ==================================================================
   Navigation
   ================================================================== */
nav.ports{display:flex;gap:8px;flex-wrap:wrap;overflow-x:auto;padding-bottom:16px;
  scrollbar-width:none}
nav.ports::-webkit-scrollbar{display:none}
nav.ports button{flex:0 0 auto;font:600 12.5px/1 var(--police);padding:10px 16px;
  cursor:pointer;color:var(--doux);background:var(--carte);border:1px solid var(--trait);
  border-radius:999px;white-space:nowrap;transition:.14s}
nav.ports button:hover{color:var(--fort);border-color:#D3E0EF}
nav.ports button[aria-selected="true"]{background:var(--eau);border-color:var(--eau);
  color:#fff}
/* Dans le bandeau, les onglets s'inversent. */
.hero nav.ports button{background:#FFFFFF1C;border-color:#FFFFFF33;color:var(--hero-lien)}
.hero nav.ports button[aria-selected="true"]{background:#fff;border-color:#fff;
  color:var(--hero-sur)}

nav.modes{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
nav.modes button{background:var(--carte);border:1px solid var(--trait);
  color:var(--doux);padding:10px 18px;border-radius:999px;
  font:600 12.5px/1 var(--police);cursor:pointer;transition:.14s}
nav.modes button:hover{color:var(--fort)}
nav.modes button[aria-selected="true"]{background:var(--eau);border-color:var(--eau);
  color:#fff}

nav.liens{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.gros{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;
  text-decoration:none;font:600 14.5px/1 var(--police);border-radius:999px;transition:.14s}
.gros .ico{font-size:18px;line-height:1}
a.gros.carnet{background:var(--eau);color:#fff;box-shadow:var(--ombre-btn)}
a.gros.carnet:hover{background:#0F3460;color:#fff}
a.gros.predict{background:var(--chaud);color:#fff;box-shadow:0 6px 18px #E4653A38}
a.gros.predict:hover{background:#D2562D;color:#fff}
a.gros.secondaire{background:var(--carte);color:var(--fort);
  border:1px solid var(--trait)}
a.gros.secondaire:hover{border-color:#D3E0EF;color:var(--fort)}

/* ==================================================================
   Barre de date
   ================================================================== */
.barre-jour{display:flex;align-items:stretch;margin:0 0 20px;background:var(--carte);
  border-radius:var(--r);box-shadow:var(--ombre);overflow:hidden}
.barre-jour button{background:none;border:0;color:var(--doux);width:52px;
  font-size:17px;cursor:pointer;font-family:var(--police)}
.barre-jour button:hover{background:var(--carte2);color:var(--fort)}
.barre-jour .titre{flex:1;display:flex;align-items:center;justify-content:center;
  font:600 14.5px/1 var(--police);color:var(--fort);text-transform:capitalize;padding:15px}
.barre-jour input[type=date]{background:none;border:0;border-left:1px solid var(--trait);
  color:var(--texte);padding:12px 14px;font:500 13px/1 var(--police);width:auto;
  border-radius:0}

/* ==================================================================
   Grille et cartes
   ================================================================== */
.grille{display:grid;gap:20px;grid-template-columns:1fr;margin-bottom:20px;
  background:none;border:0}
@media(min-width:760px){.grille{grid-template-columns:1fr 1fr}.large{grid-column:1/-1}}

.carte{background:var(--carte);border:0;border-radius:var(--r);box-shadow:var(--ombre);
  padding:26px 28px;margin-bottom:20px}
.grille > .carte,.grille > .bloc-predict{margin:0}

/* Le grand bouton d'entrée du carnet : le geste principal de la page, à la
   couleur chaude, en tête et pleine largeur pour se prendre au pouce. */
.bouton-sortie{display:flex;align-items:center;gap:16px;width:100%;
  margin-bottom:20px;padding:20px 24px;border:0;border-radius:var(--r);
  background:var(--chaud);color:#fff;text-align:left;cursor:pointer;
  box-shadow:0 6px 20px #E4653A3D;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.bouton-sortie:hover{background:#D2542B;box-shadow:0 8px 26px #E4653A52}
.bouton-sortie:active{transform:translateY(1px)}
.bouton-sortie:focus-visible{outline:3px solid var(--fort-coef);outline-offset:3px}
.bouton-sortie svg{flex:0 0 auto;width:26px;height:26px;
  padding:7px;box-sizing:content-box;border-radius:999px;background:#FFFFFF2E}
.bouton-sortie b{display:block;font:700 21px/1.15 var(--titre);letter-spacing:-.02em}
.bouton-sortie i{display:block;margin-top:3px;font-style:normal;
  font-size:13px;opacity:.88}
/* En tuile, Predict tient la même hauteur que ses voisines. */
.grille > .bloc-predict{display:flex;flex-direction:column}
.grille > .bloc-predict .p-btn{margin-top:auto;align-self:flex-start}
/* En tuile, les chiffres du carnet tiennent en deux colonnes régulières. */
.grille .stats{grid-template-columns:1fr 1fr}
.grille > .carte{display:flex;flex-direction:column}
.grille > .carte .liens,.grille > .carte .o-lien{margin-top:auto}
.carte h2{margin:0 0 18px;font:700 10px/1 var(--titre);letter-spacing:.16em;
  text-transform:uppercase;color:var(--label)}

/* ==================================================================
   Bloc « maintenant »
   ================================================================== */
/* Le coefficient d'abord — c'est le chiffre qui décide d'une sortie ;
   la hauteur d'eau vient après, en second rang. */
.maintenant{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.coef-vedette{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:132px;padding:16px 22px 14px;border-radius:var(--r2);color:#fff;
  background:var(--moyen)}
.coef-vedette b{font:700 62px/.92 var(--titre);letter-spacing:-.05em;
  font-variant-numeric:tabular-nums}
.coef-vedette span{margin-top:8px;font:600 10.5px/1.2 var(--titre);letter-spacing:.13em;
  text-transform:uppercase;opacity:.85;text-align:center}
/* Les fonds sont assombris par rapport aux pastilles de la liste : ici le
   chiffre est écrit en blanc et doit rester lisible au soleil (≥ 4,5:1). */
.coef-vedette.c-faible{background:#3E7CAE}
.coef-vedette.c-moyen{background:var(--moyen)}
.coef-vedette.c-fort{background:var(--fort-coef)}
.maintenant .a-cote{flex:1;min-width:190px}
/* Second rang assumé : la hauteur reste lisible, mais ne dispute plus
   la première lecture au coefficient. */
.maintenant .h{font:700 34px/1 var(--titre);letter-spacing:-.04em;color:#2E4A66;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.maintenant .u{font-size:16px;color:var(--doux);font-weight:600}
.maintenant .sous-h{margin-top:10px;color:var(--doux);font-size:13px}
.maintenant .sous-h b{color:var(--fort);font-weight:600}
.puce{display:inline-block;font:600 11.5px/1 var(--police);padding:6px 13px;
  background:var(--carte2);color:var(--doux);border-radius:999px}
.puce.montante{background:var(--ok-fond);color:var(--ok)}
.puce.descendante{background:var(--chaud-fond);color:var(--chaud-texte)}
.prochaine{margin-top:16px;color:var(--doux);font-size:13.5px;line-height:1.7}
.prochaine b{color:var(--fort);font-weight:600}

/* Tuiles de chiffres (accueil, bloc « maintenant ») */
.mini{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.mini > div{flex:1 1 130px;background:var(--carte2);border-radius:var(--r2);
  padding:13px 16px}
.mini .k{display:block;font-size:10.5px;color:var(--doux);margin-bottom:4px}
.mini .v{display:block;font:700 18px/1.2 var(--titre);letter-spacing:-.02em;
  color:var(--fort)}

/* ==================================================================
   Tableaux
   ================================================================== */
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th{text-align:left;font:700 10px/1 var(--titre);letter-spacing:.14em;
  text-transform:uppercase;color:var(--label);padding:0 8px 12px 0}
td{padding:12px 8px 12px 0;border-top:1px solid var(--trait);font-size:14.5px;
  vertical-align:top;color:var(--texte)}
tbody tr:first-child td{border-top:0}
/* Les quatre actions d'une sortie : sur une ligne tant que la place existe,
   à la ligne sinon — jamais un tableau qui déborde. */
.cellule-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
td.type span,.mk{display:inline-block;font:700 10px/1 var(--police);letter-spacing:.08em;
  padding:5px 10px;text-align:center;min-width:34px;border-radius:999px}
.PM,.mk.pm{background:var(--eau);color:#fff}
.BM{background:var(--carte2);color:var(--doux)}
td.num{text-align:right}
tr.clic{cursor:pointer}
tr.clic:hover td{background:var(--carte2)}
tr.jour-actuel td{background:var(--ciel-doux)}

.pastille-coef{display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:26px;padding:0 10px;font:700 12.5px/1 var(--police);color:#fff;
  margin-left:5px;font-variant-numeric:tabular-nums;border-radius:999px}
.c-faible{background:var(--faible)}
.c-moyen{background:var(--moyen)}
.c-fort{background:var(--fort-coef)}

/* ==================================================================
   Bateaux
   ================================================================== */
.bateaux{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  background:none;border:0}
.bateau{background:var(--carte2);border-radius:var(--r2);padding:18px 20px}
.bateau .nom{font:700 16px/1 var(--titre);letter-spacing:-.025em;margin-bottom:12px;
  display:flex;align-items:center;gap:9px;color:var(--fort)}
.bateau .dessin{margin:-2px 0 12px;color:var(--eau-clair)}
.bateau .dessin svg{width:100%;height:auto;max-height:72px;display:block}
/* Un voilier se dessine debout : son mât fait la hauteur de la coque, et le
   cadre large des deux vedettes le réduirait à un trait. */
.bateau .dessin svg.voilier{max-height:168px}
.pastille{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.pastille.flot{background:var(--ok)}
.pastille.sec{background:var(--chaud)}
.bateau .etat{font-size:13.5px;margin-bottom:8px}
.bateau .etat b{font-weight:700}
.bateau .etat b.flot{color:var(--ok)}
.bateau .etat b.sec{color:var(--chaud-texte)}
.bateau .det{font-size:12.5px;color:var(--doux);line-height:1.7}
.bateau .det b{color:var(--fort);font-weight:600}
.creneau{display:inline-block;font:600 11.5px/1.5 var(--police);
  background:var(--ciel-doux);color:var(--eau);padding:5px 11px;margin:4px 5px 0 0;
  border-radius:999px;font-variant-numeric:tabular-nums;white-space:nowrap}
.creneau.vide{background:var(--chaud-fond);color:var(--chaud-texte)}

/* ==================================================================
   Filtres
   ================================================================== */
.filtres{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bascule,.reglette{display:flex;gap:6px;flex-wrap:wrap}
.reglette{overflow-x:auto;scrollbar-width:none}
.reglette::-webkit-scrollbar{display:none}
.bascule button,.reglette button{background:var(--carte2);border:1px solid transparent;
  color:var(--doux);padding:9px 16px;border-radius:999px;
  font:600 13px/1 var(--police);cursor:pointer;font-variant-numeric:tabular-nums;
  transition:.14s}
.bascule button:hover,.reglette button:hover{color:var(--fort)}
.bascule button[aria-selected="true"]{background:var(--eau);color:#fff}
.reglette button[aria-selected="true"]{background:var(--fort);color:#fff}
.periode{font-size:13px;color:var(--doux)}
.periode select{background:var(--carte);border:1px solid var(--trait);color:var(--texte);
  padding:9px 12px;font:500 13px/1 var(--police);border-radius:999px}

/* ==================================================================
   Formulaires
   ================================================================== */
.champs{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
label.champ{display:block;font:700 10px/1 var(--titre);letter-spacing:.14em;
  text-transform:uppercase;color:var(--label)}
label.champ span{display:block;margin-bottom:8px}
input,select,textarea{width:100%;background:#fff;border:1px solid var(--trait);
  color:var(--fort);padding:12px 14px;font:400 14.5px/1.4 var(--police);
  border-radius:12px;color-scheme:light}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--eau-clair);
  box-shadow:0 0 0 3px #2B6CA826}
textarea{resize:vertical;min-height:70px}

fieldset{border:0;padding:0;margin:24px 0 0}
legend{font:700 10px/1 var(--titre);letter-spacing:.16em;text-transform:uppercase;
  color:var(--label);padding:0;margin-bottom:12px}

.prises{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  background:none;border:0}
.prise{display:flex;align-items:center;gap:9px;background:var(--carte2);
  border-radius:var(--r2);padding:9px 10px 9px 15px;font-size:14px}
.prise span{flex:1;font-weight:500}
.prise select{width:80px;padding:7px 9px;font-size:13.5px;border-radius:10px}
.prise.pris{background:var(--ok-fond)}
.prise.pris span{font-weight:700;color:var(--ok)}
/* Un intertitre par catégorie, sur toute la largeur de la grille. */
.cat-prises{grid-column:1/-1;margin:14px 0 -2px;font:700 10px/1 var(--titre);
  letter-spacing:.15em;text-transform:uppercase;color:var(--label)}
.cat-prises:first-child{margin-top:0}

button.action{background:var(--eau);color:#fff;border:0;padding:14px 28px;
  font:600 14.5px/1 var(--police);cursor:pointer;border-radius:999px;
  box-shadow:var(--ombre-btn);transition:.14s}
button.action:hover{background:#0F3460}
/* Le survol était codé en dur en marine : sur la page corail, le bouton
   principal virait au bleu sous le doigt. */
body.corail button.action:hover{background:#A93B21}
button.action.vert{background:var(--fort);box-shadow:none}
button.action.vert:hover{background:#132846}
button.action.corail{background:var(--chaud);box-shadow:0 6px 18px #E4653A38}
button.action.corail:hover{background:#D2562D}
button.secondaire{background:var(--carte);border:1px solid var(--trait);
  color:var(--fort);padding:10px 18px;border-radius:999px;
  font:600 13px/1 var(--police);cursor:pointer;transition:.14s}
button.secondaire:hover{border-color:#D3E0EF}
.actions{margin-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.retour-msg{font-size:13.5px;font-weight:500}
.retour-msg.ok{color:var(--ok)}
.retour-msg.err{color:var(--chaud-texte)}

/* ==================================================================
   Étiquettes, notes, badges
   ================================================================== */
.etiq{display:inline-block;font:500 12px/1.5 var(--police);background:var(--carte2);
  color:var(--doux);padding:5px 11px;margin:3px 5px 0 0;white-space:nowrap;
  border-radius:999px;font-variant-numeric:tabular-nums}
.etiq.prise{background:var(--ok-fond);color:var(--ok);font-weight:600}
.etiq.coef{background:var(--fort);color:#fff;font-weight:600}
/* No-kill : la prise compte au carnet, mais elle est repartie à l'eau. */
/* Sortie reçue d'un ami : une autre main, une autre façon de compter. Elle
   compte au carnet, mais elle ne se confond jamais avec les siennes. */
.etiq.recue{background:#EDE7F6;color:#5B3E9B;font-weight:700;font-size:10.5px;
  letter-spacing:.02em;border:1px solid #5B3E9B33}
tr.recue > td{background:#FAF8FE}
tr.recue > td:first-child{box-shadow:inset 3px 0 0 #7B5BC4}
.etiq.no-kill{background:var(--chaud-fond);color:var(--chaud-texte,var(--chaud));
  font-weight:700;letter-spacing:.02em;text-transform:uppercase;font-size:10.5px;
  border:1px solid #E4653A40}
.sous-maille{font-weight:700;color:var(--chaud-texte,var(--chaud))}
.etiq.pm{background:var(--eau);color:#fff;font-weight:600}
.etiq .retirer{background:none;border:0;color:var(--doux);cursor:pointer;font-size:15px;
  line-height:1;padding:0 0 0 7px;font-family:var(--police)}
.etiq .retirer:hover{color:var(--chaud)}

.badge{display:inline-block;font:700 11px/1 var(--police);padding:7px 13px;
  border-radius:999px}
.badge.bonne{background:var(--ok-fond);color:var(--ok)}
.badge.moyenne{background:var(--chaud-fond);color:var(--chaud-texte)}
.badge.faible,.badge.aucune{background:var(--carte2);color:var(--doux)}

.info,.note{font-size:12.5px;color:var(--doux);line-height:1.75}
.note{margin-top:14px}
.info a,.note a{color:var(--eau);font-weight:600}
.note b,.info b{color:var(--fort);font-weight:600}
.vide{color:var(--doux);font-size:14px;padding:14px 0}
.chargement{color:var(--label);font-size:13.5px;padding:24px 0;text-align:center}

/* ==================================================================
   Statistiques du carnet
   ================================================================== */
.stats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  background:none;border:0}
.stat{background:var(--carte2);border-radius:var(--r2);padding:18px 20px}
.stat b{display:block;font:700 30px/1 var(--titre);letter-spacing:-.04em;color:var(--fort)}
.stat span{display:block;font:700 10px/1 var(--titre);letter-spacing:.14em;
  text-transform:uppercase;color:var(--label);margin-top:9px}

/* ==================================================================
   Loguigui Predict — le seul bloc corail de l'application
   ================================================================== */
.bloc-predict{background:linear-gradient(115deg,#E4653A 0%,#F0894F 100%);
  border-radius:var(--r);padding:26px 28px;margin-bottom:24px;color:#fff;
  box-shadow:0 10px 28px #E4653A33}
.bloc-predict h2{color:#FFFFFFC4}
.bloc-predict .p-tete{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.bloc-predict .p-tete svg{width:26px;height:26px;flex:none;margin-top:2px;opacity:.92}
.bloc-predict h3{margin:0;font:700 20px/1.2 var(--titre);letter-spacing:-.03em}
.bloc-predict .p-tete p{margin:3px 0 0;font-size:13.5px;opacity:.85}
.bloc-predict .conf{margin-left:auto;background:#FFFFFF2E;border:1px solid #FFFFFF3D;
  padding:6px 14px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
.bloc-predict .p-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;margin:22px 0 20px}
.bloc-predict .p-grille > div{background:#FFFFFF1F;border:1px solid #FFFFFF2E;
  border-radius:var(--r2);padding:16px 18px}
.bloc-predict .k{display:block;font:700 10px/1 var(--titre);letter-spacing:.14em;
  text-transform:uppercase;opacity:.78;margin-bottom:8px}
.bloc-predict .v{display:block;font:700 17px/1.25 var(--titre);letter-spacing:-.025em}
.bloc-predict .n{display:block;font-size:12px;opacity:.78;margin-top:3px}
.bloc-predict .p-btn{display:inline-block;background:#fff;color:var(--chaud);
  padding:13px 26px;border-radius:999px;font:700 14px/1 var(--police);
  text-decoration:none;border:0;cursor:pointer}
.bloc-predict .p-btn:hover{background:#FFF3EE}

/* Résultats de prédiction (page Predict) */
.reco{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  background:none;border:0;margin-top:4px}
.reco-carte{background:var(--carte2);border-radius:var(--r2);padding:18px 20px}
.reco-carte h3{margin:0 0 12px;font:700 10px/1 var(--titre);letter-spacing:.16em;
  text-transform:uppercase;color:var(--label)}
.rang{display:flex;justify-content:space-between;gap:10px;padding:9px 0;font-size:14.5px;
  border-top:1px solid var(--trait)}
.rang:first-of-type{border-top:0}
.rang b{color:var(--eau);font-variant-numeric:tabular-nums;font-weight:700}
.rang.premier span{font-weight:600;color:var(--fort)}
.marees{display:flex;gap:7px;flex-wrap:wrap;margin-top:2px}
.creneaux{background:var(--ciel-doux);border:0;border-radius:var(--r2);
  padding:16px 18px;margin-top:16px}
.creneaux h3{margin:0 0 9px;font:700 10px/1 var(--titre);letter-spacing:.16em;
  text-transform:uppercase;color:var(--eau)}
.creneaux .heure{font:700 20px/1.4 var(--titre);letter-spacing:-.03em;color:var(--fort);
  font-variant-numeric:tabular-nums}

/* ==================================================================
   Courbe, carte GPS, météo
   ================================================================== */
svg{width:100%;height:auto;display:block;overflow:visible}
.hero svg{width:auto}

#geoCarte{border-radius:var(--r2);height:260px;background:var(--carte2);overflow:hidden}
#geoCarte img{width:100%;height:100%;object-fit:cover;display:block}
#geoCarte .leaflet-container{height:100%;background:var(--carte2)}

.tuiles-meteo{display:grid !important;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  background:none;border:0;margin-top:14px}
.tuile-meteo{background:var(--carte2) !important;border:0 !important;
  border-radius:var(--r2) !important;padding:15px 17px !important;gap:11px !important}
.tuile-meteo b{font:700 16px/1 var(--titre) !important;letter-spacing:-.03em;
  color:var(--fort)}
.tuile-meteo em{font:700 10px/1 var(--titre) !important;letter-spacing:.13em;
  text-transform:uppercase;color:var(--label) !important;margin-top:6px}

/* ==================================================================
   Détails des prises et photos (carnet)
   ================================================================== */
.detail-espece{margin-top:14px}
.detail-espece h4{margin:0 0 8px;font:700 13px/1 var(--titre);letter-spacing:-.02em;
  color:var(--fort)}
.detail-ligne{display:grid;grid-template-columns:44px 120px minmax(0,1fr);gap:8px;
  align-items:center;margin-bottom:7px}
.detail-ligne .rang{font:600 11.5px/1 var(--police);color:var(--label);
  text-align:right;font-variant-numeric:tabular-nums}
.detail-ligne input{padding:9px 12px;font-size:14px;border-radius:10px}

.vignettes{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.vignettes img{width:46px;height:46px;object-fit:cover;border-radius:8px;display:block}
.vignettes a{line-height:0}

/* Taille sous la maille : l'avertissement doit se voir sans être un blocage. */
.detail-ligne.illegale input[data-champ="taille"]{border-color:var(--chaud);
  background:var(--chaud-fond)}
.detail-ligne /* Sortie reçue d'un ami : une autre main, une autre façon de compter. Elle
   compte au carnet, mais elle ne se confond jamais avec les siennes. */
.etiq.recue{background:#EDE7F6;color:#5B3E9B;font-weight:700;font-size:10.5px;
  letter-spacing:.02em;border:1px solid #5B3E9B33}
tr.recue > td{background:#FAF8FE}
tr.recue > td:first-child{box-shadow:inset 3px 0 0 #7B5BC4}
.etiq.no-kill{justify-self:start;margin:0}
.alerte-taille{grid-column:1/-1;margin:-2px 0 4px;font:600 12px/1.35 var(--police);
  color:var(--chaud);display:flex;align-items:center;gap:6px}
.alerte-taille::before{content:"⚠";font-size:13px}

/* ==================================================================
   Bilan de l'année
   ================================================================== */
.tete-bloc{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;
  margin-bottom:22px}
.tete-bloc h2{margin:0 0 6px}
.tete-bloc > div:first-child{flex:1;min-width:0}

/* Écart avec l'an dernier : vert à la hausse, corail à la baisse. La flèche
   double la couleur, pour qui ne la distingue pas. */
.ecart{display:inline-flex;align-items:center;gap:4px;margin-top:8px;
  font:600 11.5px/1 var(--police);padding:5px 9px;border-radius:999px}
.ecart.hausse{background:var(--ok-fond);color:var(--ok)}
.ecart.baisse{background:var(--chaud-fond);color:var(--chaud-texte)}
.ecart.neutre{background:var(--carte2);color:var(--doux)}
.stat .ecart{margin-top:10px}

/* Les faits marquants : une ligne, un libellé, une valeur. */
.faits{margin-top:22px;border-top:1px solid var(--trait);padding-top:6px}
.faits > div{display:flex;gap:16px;align-items:baseline;padding:11px 0;
  border-bottom:1px solid var(--trait-clair);flex-wrap:wrap}
.faits > div:last-child{border-bottom:0}
.faits span{flex:0 0 150px;font:700 10px/1.4 var(--titre);letter-spacing:.14em;
  text-transform:uppercase;color:var(--label)}
.faits b{flex:1;min-width:180px;font:600 14.5px/1.45 var(--police);color:var(--fort)}

/* ---- graphique des mois ---- */
.legende-graph{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--doux)}
.legende-graph span{display:inline-flex;align-items:center;gap:7px}
.legende-graph i{width:11px;height:11px;border-radius:3px;flex:none}
.graph{display:flex;gap:10px}
.graph .axe{position:relative;width:34px;flex:none;height:190px}
.graph .axe span{position:absolute;right:0;transform:translateY(-50%);
  font:500 11px/1 var(--police);color:var(--label);font-variant-numeric:tabular-nums}
.graph .tracé{position:relative;flex:1;min-width:0}
.graph .grille{position:absolute;inset:0}
.graph .grille span{position:absolute;left:0;right:0;height:1px;
  background:var(--trait);}
.graph .grille span:first-child{background:var(--trait-clair)}
.graph .colonnes{position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(12,1fr);gap:6px;align-items:end}
.colonne{position:relative;height:100%;display:flex;align-items:flex-end;
  justify-content:center;outline:none}
.colonne .barres{position:relative;width:100%;max-width:26px;height:100%;
  display:flex;align-items:flex-end;gap:2px;justify-content:center}
/* Deux colonnes accolées, séparées par un vide de 2 px : pas de contour. */
.colonne .barre{flex:1;min-width:0;border-radius:4px 4px 0 0;transition:.15s}
.colonne .barre.presente{background:#E4653A}
.colonne .barre.passee{background:#8494A9}
.colonne:hover .barre,.colonne:focus-visible .barre{filter:brightness(1.08)}
.colonne:focus-visible{box-shadow:0 0 0 2px var(--eau);border-radius:6px}
.colonne .valeur{position:absolute;left:50%;transform:translate(-50%,-4px);
  font:700 11.5px/1 var(--titre);color:var(--fort);white-space:nowrap}
.colonne.creuse{opacity:.55}
.mois-legende{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;
  margin:8px 0 0 44px;text-align:center}
.mois-legende span{font:500 11px/1 var(--police);color:var(--label)}
.colonne .mois{display:none}
/* Infobulle du graphique — voir brancherBulle() dans bilan.html. */
.graph,.tete-bloc + .graph{}
.carte:has(.graph){position:relative}
.bulle{position:absolute;z-index:5;background:#0A1B33F0;color:#fff;
  border-radius:11px;padding:9px 12px;pointer-events:none;
  font:500 12px/1.45 var(--police);white-space:nowrap;
  box-shadow:0 8px 22px #0A1B3333}
.bulle b{display:block;font:700 12.5px/1.3 var(--titre);letter-spacing:-.01em}
.bulle span{display:block;color:#9FC4E8}

/* ---- classement des coins ---- */
.classement{display:flex;flex-direction:column}
.rang-coin{display:grid;grid-template-columns:34px minmax(150px,1.6fr) 1fr 96px 78px;
  gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--trait-clair)}
.rang-coin:last-child{border-bottom:0}
.pastille-esp{width:34px;height:34px;border-radius:50%;color:#fff;flex:none;
  display:inline-flex;align-items:center;justify-content:center}
.rang-coin .quoi{min-width:0}
.rang-coin .quoi b{display:block;font:700 14.5px/1.3 var(--titre);color:var(--fort);
  letter-spacing:-.02em}
.rang-coin .quoi span{display:block;font-size:12.5px;color:var(--doux);margin-top:3px}
.jauge{height:8px;background:var(--carte2);border-radius:999px;overflow:hidden}
.jauge span{display:block;height:100%;background:var(--eau);border-radius:999px}
.rang-coin .chiffre{text-align:right}
.rang-coin .chiffre b{display:block;font:700 18px/1 var(--titre);color:var(--fort);
  letter-spacing:-.03em}
.rang-coin .chiffre span{display:block;font-size:11.5px;color:var(--doux);margin-top:4px}
.rang-coin .delta{text-align:right}
.rang-coin .delta .ecart{margin:0}

/* ---- espèce dans un tableau ---- */
.esp{display:inline-flex;align-items:center;gap:9px}
.esp i{width:24px;height:24px;border-radius:50%;color:#fff;flex:none;
  display:inline-flex;align-items:center;justify-content:center}
tr.courante td{background:var(--ciel-doux)}

/* ---- conditions ---- */
.conditions{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.condition h3{margin:0 0 4px;font:700 13.5px/1.2 var(--titre);color:var(--fort);
  letter-spacing:-.02em}
.rang-cond{display:grid;grid-template-columns:1fr 68px 34px;gap:10px;align-items:center;
  padding:7px 0}
.rang-cond .nom{font-size:13px;color:var(--texte)}
.rang-cond .val{text-align:right;font:700 13.5px/1 var(--titre);color:var(--fort);
  font-variant-numeric:tabular-nums}
.rang-cond .sur{grid-column:1/-1;font-size:11px;color:var(--label);margin-top:-4px}

/* Sélecteur d'année dans le bandeau */
.annees-hero{margin-top:22px}
.annees-hero button{background:#FFFFFF14;border:1px solid #FFFFFF2E;color:var(--hero-lien)}
.annees-hero button:hover{background:#FFFFFF29;border-color:#FFFFFF52;color:#fff}
.annees-hero button[aria-pressed="true"]{background:#fff;border-color:#fff;
  color:var(--hero-sur);box-shadow:0 4px 14px #0000001F}

/* ==================================================================
   Barre de période — une seule sélection pour toute la page
   ================================================================== */
.barre-periode{padding:20px 24px}
.periode-tete{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  margin-bottom:16px}
.periode-tete h3{margin:0;font:700 10px/1 var(--titre);letter-spacing:.16em;
  text-transform:uppercase;color:var(--label)}
.periode-tete p{margin:8px 0 0;font:700 17px/1.2 var(--titre);letter-spacing:-.025em;
  color:var(--fort)}
.periode-tete .gros{margin-left:auto;flex:none}
.periode-choix{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.annees{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.annees button{background:var(--carte2);border:1px solid var(--trait);
  color:var(--texte);border-radius:999px;padding:10px 18px;cursor:pointer;
  font:600 13.5px/1 var(--police);transition:.14s;font-variant-numeric:tabular-nums}
.annees button:hover{border-color:var(--eau);color:var(--eau)}
.annees button[aria-pressed="true"]{background:var(--eau);border-color:var(--eau);
  color:#fff;box-shadow:var(--ombre-btn)}
.mois-choix{margin:0;flex:none;min-width:190px}

/* ==================================================================
   Blocs repliables — on ne déroule que ce qu'on veut lire
   ================================================================== */
.carte.repli{padding:0;overflow:visible}
.entete-repli{display:flex;align-items:center;gap:12px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:20px 24px;border-radius:var(--r1);color:var(--fort);
  font:700 19px/1.2 var(--titre);letter-spacing:-.025em}
.entete-repli:hover{background:var(--carte2)}
.entete-repli .compte{font:600 12.5px/1 var(--police);color:var(--label);
  background:var(--carte2);border:1px solid var(--trait);
  padding:5px 11px;border-radius:999px;letter-spacing:0}
/* La règle générale met les SVG à 100 % : le chevron garde sa taille. */
.entete-repli .fleche{margin-left:auto;color:var(--doux);flex:none;
  width:18px;height:18px;transition:transform .22s ease}
.entete-repli[aria-expanded="true"] .fleche{transform:rotate(180deg)}
.entete-repli[aria-expanded="true"]{border-radius:var(--r1) var(--r1) 0 0}
.corps-repli{padding:0 24px 22px;overflow-x:auto}

/* Carte des coins de pêche */
.toile-carte{border-radius:var(--r2);overflow:hidden;border:1px solid var(--trait);
  height:340px;background:var(--carte2)}
/* Quand la carte est le sujet du bloc, elle prend la place qu'il faut. */
.toile-carte.grande{height:min(62vh,540px)}
/* En mode pointage, le curseur dit que la carte attend un clic. */
.toile-carte.carte-pointage .leaflet-container{cursor:crosshair}
.toile-carte.carte-pointage .leaflet-marker-draggable{cursor:grab}
.toile-carte.carte-pointage .leaflet-marker-draggable:active{cursor:grabbing}
@media(max-width:700px){
  /* Le graphique garde ses douze colonnes : elles rétrécissent, elles ne
     disparaissent pas — un mois manquant fausserait la lecture. */
  .graph .axe{width:24px}
  .graph .colonnes{gap:3px}
  .colonne .barres{gap:1.5px;max-width:none}
  .colonne .barre{border-radius:3px 3px 0 0}
  .colonne .valeur{font-size:10px}
  .mois-legende{gap:3px;margin-left:34px}
  .mois-legende span{font-size:9px}
  .faits span{flex-basis:100%}
  .faits b{min-width:0}
  .rang-coin{grid-template-columns:34px 1fr auto;gap:10px 12px}
  .rang-coin .jauge{grid-column:2/-1;order:3}
  .rang-coin .chiffre{order:2}
  .rang-coin .delta{grid-column:2/-1;order:4;text-align:left}
  .conditions{gap:22px}
  .barre-periode{padding:16px}
  .periode-tete .gros{margin-left:0;width:100%;justify-content:center}
  .periode-choix{gap:12px}
  .annees{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin:0 -16px;padding:0 16px 2px}
  .annees::-webkit-scrollbar{display:none}
  .annees button{flex:0 0 auto}
  .mois-choix{width:100%;min-width:0}
  .entete-repli{padding:16px 16px;font-size:16.5px}
  .corps-repli{padding:0 16px 18px}
  .toile-carte{height:260px}
  .toile-carte.grande{height:min(58vh,420px)}
  .alerte-taille{grid-column:1/-1}
}

/* ==================================================================
   Sorties récentes (accueil)
   ================================================================== */
.sorties{margin-top:4px}
.sortie{display:grid;grid-template-columns:1.1fr 1.5fr 1.4fr .9fr;gap:12px;
  padding:12px 0;border-top:1px solid var(--trait);font-size:13.5px;align-items:center}
.sortie.entete{border:0;padding-top:0;font:700 10px/1 var(--titre);letter-spacing:.14em;
  text-transform:uppercase;color:var(--label)}
.sortie .date{color:var(--doux)}
.sortie .lieu{font-weight:600;color:var(--fort)}
.sortie .mat{color:var(--doux)}
.sortie .prise{justify-self:end;background:var(--ciel-doux);color:var(--eau);
  font-weight:600;padding:5px 12px;border-radius:999px;font-size:12.5px}
.sortie .prise.zero{background:var(--carte2);color:var(--doux)}
@media(max-width:700px){
  .sortie{grid-template-columns:1fr auto;gap:4px 12px}
  .sortie .mat{display:none}
  .sortie.entete{display:none}
}

/* Carte à en-tête illustré (accueil : Mon carnet, outils) */
.tete-carte{display:flex;gap:13px;align-items:flex-start;margin-bottom:18px}
.tete-carte svg{width:26px;height:26px;flex:none;margin-top:2px;color:var(--eau)}
.tete-carte h3{margin:0;font:700 19px/1.2 var(--titre);letter-spacing:-.03em;
  color:var(--fort)}
.tete-carte p{margin:3px 0 0;font-size:13.5px;color:var(--doux)}
.o-gros{font:700 40px/1 var(--titre);letter-spacing:-.04em;color:var(--fort)}
.o-gros span{font-size:17px;color:var(--doux);font-weight:600}
.o-sec{font-size:13px;color:var(--doux);margin:6px 0 0}
.o-lignes{margin:18px 0}
.o-lignes > div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;
  border-top:1px solid var(--trait);font-size:13px}
.o-lignes span{color:var(--doux)}
.o-lignes b{color:var(--fort);text-align:right;font-weight:600}
.o-lien{color:var(--eau);font-weight:600;font-size:13.5px;text-decoration:none}
.o-lien:hover{text-decoration:underline}

/* ==================================================================
   Petits écrans
   ================================================================== */
/* ==================================================================
   Barre d'onglets — téléphone uniquement (posée par entete-ui.js)
   ================================================================== */
.barre-basse{display:none}

@media(max-width:700px){
.barre-basse{
  display:grid;grid-template-columns:repeat(5,1fr);
  position:fixed;left:0;right:0;bottom:0;z-index:800;
  background:#FFFFFFF2;backdrop-filter:blur(14px);
  border-top:1px solid var(--trait);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -2px 18px #0F172A0F}
.barre-basse a{display:flex;flex-direction:column;align-items:center;gap:3px;
  text-decoration:none;color:var(--doux);padding:7px 2px 5px;border-radius:14px;
  font:600 10.5px/1.1 var(--police);-webkit-tap-highlight-color:transparent}
.barre-basse svg{width:23px;height:23px;flex:none}
.barre-basse a.on{color:var(--eau)}
.barre-basse a.on svg{stroke-width:2}
.barre-basse a[href="/predict.html"]{color:var(--chaud)}
.barre-basse a[href="/predict.html"].on{color:#fff;background:var(--chaud)}

/* =================== Bandeau compact =================== */
.hero .dedans{padding:14px 16px 24px}
.barre-nav{gap:10px;margin-bottom:18px;flex-wrap:nowrap;min-height:36px}
.barre-nav .pousse{min-width:0}
/* Le menu du haut disparaît : la barre du bas s'en charge. */
.barre-nav a{display:none}
.barre-nav .qui{margin:0 0 0 auto;font-size:12.5px}
.barre-nav button.sortir{padding:8px 13px;font-size:12px}
.hero h1{font-size:29px;letter-spacing:-.03em}
.hero .sous{font-size:13.5px;margin-top:9px}
/* Le filigrane se glisse en bas à droite, derrière la vague, pour ne
   plus tomber sur les tuiles de chiffres. */
.hero .poisson{display:block;right:-135px;top:auto;bottom:-14px;width:290px;opacity:.3}
/* Les pastilles défilent au doigt plutôt que de passer à la ligne. */
.hero .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  margin:16px -16px 0;padding:0 16px}
.hero .chips::-webkit-scrollbar{display:none}
.hero .chips span,.hero .chips .chip-action{flex:0 0 auto}
/* La rangée défile au doigt : le bouton passe en tête, sinon il attend hors
   écran qu'on pense à faire glisser les pastilles. */
.hero .chips .chip-action{order:-1;padding:9px 18px 9px 14px;font-size:13px}
/* Les chiffres passent en rangée de tuiles, au lieu d'une colonne à rallonge. */
.hero .split{display:block}
.hero .pile{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
.hero .pile > div{border-left:0;background:#FFFFFF1A;border:1px solid #FFFFFF26;
  border-radius:14px;padding:11px 10px;text-align:center}
.hero .pile b{font-size:22px}
.hero .pile span{font-size:10.5px;margin-top:3px}
.hero .vague{height:44px}

/* =================== Corps de page =================== */
:root{--r:16px;--r2:12px}
header{padding:22px 16px 0}
main{padding:18px 14px 30px}
/* De la place pour la barre d'onglets, encoche comprise. */
body{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
h1{font-size:28px}
.carte{padding:18px 16px;margin-bottom:14px}
.bouton-sortie{margin-bottom:14px;padding:16px 18px;gap:13px}
.bouton-sortie b{font-size:18px}
.bouton-sortie i{font-size:12px}
.grille,.duo{grid-template-columns:1fr;gap:14px}
.titre-section{margin-top:6px}
/* Un tableau trop large défile dans sa carte au lieu de pousser la page. */
.carte{overflow-x:auto}

/* Un tableau de six colonnes ne tient pas en 358 px : chaque ligne devient
   une carte, chaque cellule porte son libellé. Vaut pour les sorties
   enregistrées comme pour les tableaux du bilan. */
#liste table,#liste tbody,#liste tr,#liste td,
.table-cartes table,.table-cartes tbody,.table-cartes tr,.table-cartes td{
  display:block;width:100%}
#liste thead,.table-cartes thead{display:none}
#liste table,.table-cartes table{border-collapse:separate}
#liste tr,.table-cartes tr{background:var(--carte2);border-radius:var(--r2);
  padding:14px 16px;margin-bottom:12px}
#liste td,.table-cartes td{border:0;padding:6px 0 2px;font-size:14px;
  text-align:left}
#liste td:empty,.table-cartes td:empty{display:none}
#liste td::before,.table-cartes td::before{content:attr(data-libelle);display:block;
  font:700 10px/1 var(--titre);letter-spacing:.14em;text-transform:uppercase;
  color:var(--label);margin-bottom:5px}
/* La première cellule fait office de titre de carte : son libellé n'apprend rien. */
#liste td[data-libelle="Date"],
.table-cartes td[data-libelle="Espèce"],
.table-cartes td[data-libelle="Année"]{font:700 16px/1.3 var(--titre);color:var(--fort);
  padding-bottom:8px;margin-bottom:6px;border-bottom:1px solid var(--trait)}
#liste td[data-libelle="Date"]::before,
.table-cartes td[data-libelle="Espèce"]::before,
.table-cartes td[data-libelle="Année"]::before{content:none}
#liste td[data-libelle="Date"] span{font-weight:500}
.table-cartes tr.courante{box-shadow:inset 3px 0 0 var(--eau)}
.table-cartes tr.courante td{background:none}
/* Deux colonnes dans la carte : six lignes empilées font une page à défiler
   pour une seule espèce. Le titre et les cellules longues gardent la largeur. */
.table-cartes tr{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;
  align-items:start}
.table-cartes td[data-libelle="Espèce"],
.table-cartes td[data-libelle="Année"],
.table-cartes td[data-libelle="Meilleur coin"]{grid-column:1/-1}
/* Quatre actions ne tiennent pas sur une ligne de 390 px : on les laisse
   passer à la ligne, deux par rang, plutôt que de faire glisser la carte. */
#liste .cellule-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;
  white-space:normal;min-width:0}
#liste .cellule-actions::before{content:none}
#liste .cellule-actions button{flex:1 1 calc(50% - 4px);min-width:0;
  padding-left:10px;padding-right:10px}
#liste .vignettes img{width:62px;height:62px}

/* =================== Navigation interne =================== */
nav.ports{flex-wrap:nowrap;overflow-x:auto;margin:0 -14px;padding:0 14px 14px}
nav.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
nav.modes button{padding:11px 6px;font-size:12px}
/* Les actions principales prennent toute la largeur : cible franche au pouce. */
nav.liens{flex-direction:column;gap:10px}
nav.liens .gros{width:100%;justify-content:center;padding:15px 20px}
.actions{gap:10px}
.actions button.action{width:100%;padding:15px 20px}
.actions .retour-msg{width:100%}
/* La barre de date passe sur deux rangs : flèches et libellé d'un côté,
   le sélecteur de date en pleine largeur dessous. */
.barre-jour{flex-wrap:wrap}
.barre-jour .fl{width:52px}
.barre-jour .titre{font-size:14px;padding:14px 4px;min-width:0}
.barre-jour input[type=date]{width:100%;border-left:0;border-top:1px solid var(--trait);
  padding:12px 14px;font-size:14px;text-align:center}

/* =================== Blocs =================== */
/* Sur téléphone, le coefficient prend toute la largeur : il reste le
   premier chiffre lu, la hauteur passe dessous. */
.maintenant{gap:14px}
.coef-vedette{width:100%;flex-direction:row;justify-content:flex-start;gap:16px;
  padding:14px 18px}
.coef-vedette b{font-size:46px}
.coef-vedette span{margin-top:0;text-align:left}
.maintenant .h{font-size:32px}
.mini{gap:8px}
.mini > div{flex:1 1 calc(33.333% - 6px);padding:11px 12px}
.mini .v{font-size:16px}
.bateaux{grid-template-columns:1fr}
.stats{grid-template-columns:1fr 1fr;gap:10px}
.reco{grid-template-columns:1fr}
.o-gros{font-size:34px}
.o-lignes b{font-size:12.5px}

.bloc-predict{padding:20px 16px}
.bloc-predict .p-tete{gap:11px}
.bloc-predict h3{font-size:18px}
.bloc-predict .conf{margin:12px 0 0;width:100%;text-align:center}
.bloc-predict .p-grille{grid-template-columns:1fr;gap:10px}
.bloc-predict .p-btn{display:block;text-align:center}

/* Sorties récentes : deux lignes, la prise calée à droite. */
.sortie{grid-template-columns:1fr auto;
  grid-template-areas:"date prise" "lieu prise";gap:2px 12px;padding:13px 0}
.sortie.entete{display:none}
.sortie .date{grid-area:date;font-size:12px}
.sortie .lieu{grid-area:lieu;font-size:14.5px}
.sortie .mat{display:none}
.sortie .prise{grid-area:prise;align-self:center}

/* =================== Formulaires =================== */
/* Deux colonnes : les champs courts (date, heures, force du vent) tiennent
   côte à côte, et le formulaire ne devient pas un interminable ruban. */
.champs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.champs > .large,.champs > [data-large]{grid-column:1/-1}
input,select,textarea{padding:13px 14px;font-size:16px}  /* 16 px : pas de zoom iOS */
.prises{grid-template-columns:1fr 1fr;gap:8px}
.prise{padding:8px 8px 8px 12px;font-size:13px}
.prise select{width:68px;padding:7px;font-size:13px}
/* Le rang et la taille sur une ligne, la note dessous : trois colonnes ne
   tiennent pas sur 358 px sans écraser la note. */
.detail-ligne{grid-template-columns:44px minmax(0,1fr);gap:6px 8px}
.detail-ligne input[data-champ="note"]{grid-column:2/-1}
.tuiles-meteo{grid-template-columns:1fr 1fr;gap:8px}
.ajout-spot{grid-template-columns:1fr !important}
.ajout-spot button{width:100%}
.spot{padding:12px 13px}
.spot button{width:100%;margin-top:4px}
}

@media(max-width:380px){
  .hero h1{font-size:26px}
  .barre-basse a{font-size:9.5px}
  .prises{grid-template-columns:1fr}
}