/* =======================================================================
   Au delà du Bassin — back-office
   Charte du site : blanc, noir, une seule grotesque, angles vifs,
   aucune couleur décorative. La couleur vient des photos, pas de l'interface.
   ======================================================================= */
@import url('/polices/polices.css');

:root{
  /* --- relevé sur audeladubassin.fr */
  --noir:#000000;          /* titres, boutons, icônes, états forts */
  --texte:#464646;         /* paragraphes */
  --gris:#767676;          /* méta, libellés secondaires */
  --gris-clair:#a3a3a3;
  --trait:#e6e6e6;         /* filets */
  --trait-fort:#d6d6d6;
  --fond:#ffffff;
  --fond-2:#f7f7f7;        /* en-têtes de tableau, survol */
  --fond-3:#efefef;
  --alerte:#c2352b;        /* alarme, dans l'interface comme dans les données */
  --alerte-fond:#fdf1f0;

  /* --- couleurs de DONNÉES uniquement.
     L'interface reste noire et blanche : rail, boutons, filets, titres.
     La couleur ne sert qu'à rendre un chiffre lisible — jamais à décorer.
     Ordre des séries fixe, validé pour les daltonismes (Δ E CVD ≥ 8). */
  --s1:#1c5cab;   /* océan   — série 1, mesure principale */
  --s2:#eb6834;   /* corail  — série 2 */
  --s3:#1baf7a;   /* lagune  — série 3 */
  --s4:#eda100;   /* sable   — série 4 */
  --s5:#e87ba4;   /* rose    — série 5 */
  --s6:#008300;   /* varech  — série 6 */
  --s1-f:#e8effa; --s2-f:#fdeee8; --s3-f:#e6f7f1; --s4-f:#fdf3dd; --s5-f:#fdeef4; --s6-f:#e8f4e8;
  --s1-t:#164a89;                                                  /* texte sur teinte océan */

  /* états — jamais réutilisés comme couleur de série, toujours avec leur libellé */
  --bon:#0ca30c;       --bon-f:#eaf6ea;       --bon-t:#0a6b0a;
  --vigilance:#fab219; --vigilance-f:#fdf3dd; --vigilance-t:#8a5b00;
  --serieux:#ec835a;   --serieux-f:#fdeee7;   --serieux-t:#a54a1e;
  --critique:#c2352b;  --critique-f:#fbeceb;  --critique-t:#a52a22;

  --police:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --rail:216px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--police);background:var(--fond);color:var(--texte);
     font-size:14px;font-weight:400;line-height:1.6;letter-spacing:-.006em;
     -webkit-font-smoothing:antialiased;overflow:hidden}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--noir)}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--noir);outline-offset:1px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------------------------------------------------------------- connexion */
#connexion{position:fixed;inset:0;background:var(--fond);display:flex;align-items:center;
  justify-content:center;padding:24px;z-index:500}
#connexion .boite{width:100%;max-width:360px}
#connexion .marque-rond{width:44px;height:44px;margin-bottom:26px}
#connexion .k{font-size:13px;text-transform:uppercase;letter-spacing:.02em;color:var(--noir);
  font-weight:500}
#connexion h1{font-size:38px;font-weight:700;letter-spacing:-.035em;line-height:1.05;
  color:var(--noir);margin:8px 0 26px}

/* ---------------------------------------------------------------- ossature */
#app{display:none;height:100vh}
#app.on{display:grid;grid-template-columns:var(--rail) 1fr}

#rail{background:var(--fond);border-right:1px solid var(--trait);padding:18px 0 14px;
  display:flex;flex-direction:column;overflow-y:auto}
#rail .marque{padding:0 18px 16px;border-bottom:1px solid var(--trait);margin-bottom:12px;
  display:flex;align-items:center;gap:10px}
#rail .marque svg{width:26px;height:26px;flex:0 0 auto}
#rail .marque b{font-size:14px;font-weight:600;letter-spacing:-.02em;color:var(--noir);line-height:1.2}
#rail a{display:flex;align-items:center;gap:9px;padding:8px 18px;color:var(--texte);
  text-decoration:none;font-size:14px;border-left:2px solid transparent;cursor:pointer}
#rail a:hover{background:var(--fond-2);color:var(--noir)}
#rail a.on{border-left-color:var(--noir);color:var(--noir);font-weight:600}
#rail a .pastille{margin-left:auto;background:var(--vigilance);color:#4a3100;font-size:11px;font-weight:700;
  min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;padding:0 6px}
#rail .sep{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--gris-clair);
  padding:18px 18px 7px;font-weight:500}
#rail .bas{margin-top:auto;padding:13px 18px 0;border-top:1px solid var(--trait);
  font-size:12px;color:var(--gris)}
#rail .bas a{padding:5px 0;font-size:12px;border:0;color:var(--gris)}
#rail .bas a:hover{background:none;color:var(--noir);text-decoration:underline}

#espace{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--fond-2)}
#dock{flex:1 1 auto;min-height:0}
#simple{flex:1 1 auto;min-height:0;overflow-y:auto;background:var(--fond);display:none}
#app.simple #dock{display:none}
#app.simple #simple{display:block}

.hote{height:100%;overflow:auto;background:var(--fond);padding:22px 24px 48px;container-type:inline-size}
#simple .hote{padding:18px 18px 52px}
.hote.dock .tete h1{display:none}
.hote.dock .tete{margin-bottom:16px}

@media(max-width:900px){
  #app.on{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  #rail{flex-direction:row;border-right:0;border-bottom:1px solid var(--trait);padding:0;
    overflow-x:auto;overflow-y:hidden;align-items:center}
  #rail .marque,#rail .sep,#rail .bas{display:none}
  #rail a{white-space:nowrap;border-left:0;border-bottom:2px solid transparent;padding:12px 14px}
  #rail a.on{border-left:0;border-bottom-color:var(--noir)}
  .hote{padding:16px 14px 52px}
}

/* ---------------------------------------------------------------- éléments */
.tete{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:22px}
.tete h1{font-size:32px;font-weight:700;letter-spacing:-.035em;line-height:1.06;color:var(--noir)}
.tete .sous{color:var(--gris);font-size:13.5px;margin-top:8px}
.outils{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.carte{background:var(--fond);border:1px solid var(--trait)}
.carte .ct{padding:13px 16px;border-bottom:1px solid var(--trait);display:flex;
  align-items:center;justify-content:space-between;gap:12px}
.carte .ct h2{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--noir)}
.carte .cc{padding:16px}
.carte .cc.plat{padding:0}

.grille{display:grid;gap:14px;align-items:start}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g23{grid-template-columns:2fr 1fr}
@container (max-width:1080px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.g23,.g2{grid-template-columns:1fr}}
@container (max-width:640px){.g4{grid-template-columns:1fr}.etroit-masque{display:none}}

/* chiffres clés */
.kpi{background:var(--fond);border:1px solid var(--trait);padding:16px 18px 15px;position:relative}
.kpi .lb{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--gris);font-weight:500}
.kpi .vl{font-size:32px;font-weight:700;letter-spacing:-.04em;line-height:1.05;margin:10px 0 5px;
  font-variant-numeric:tabular-nums;color:var(--noir)}
.kpi .cm{font-size:13px;color:var(--gris);line-height:1.55}
.kpi .cm b{color:var(--noir);font-weight:600}
.kpi.act{border-top:2px solid var(--s1)}
.kpi.chaud{border-top:2px solid var(--critique)}
.kpi.bien{border-top:2px solid var(--bon)}

/* jauges */
.jauge{height:4px;background:var(--trait);margin-top:11px;position:relative;overflow:hidden}
.jauge i{position:absolute;inset:0 auto 0 0;background:var(--s1);display:block}
.jauge.chaud i{background:var(--critique)}
.jauge.bien i{background:var(--bon)}
.jauge.or i{background:var(--vigilance)}
.jauge .seuil{position:absolute;top:-3px;bottom:-3px;width:1.5px;background:var(--noir)}

/* tableaux */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--gris);
   font-weight:500;padding:10px 14px;border-bottom:1px solid var(--trait);white-space:nowrap;
   background:var(--fond);position:sticky;top:0;z-index:1}
td{padding:11px 14px;border-bottom:1px solid var(--trait);vertical-align:middle}
td strong{font-weight:600;color:var(--noir)}
tbody tr:hover{background:var(--fond-2)}
tbody tr.cliq{cursor:pointer}
td.r,th.r{text-align:right}
td.c,th.c{text-align:center}
.mini{font-size:12.5px;color:var(--gris)}
.tbl-wrap{overflow-x:auto}

/* états — teinte + libellé, jamais la couleur seule.
   Acquis = vert, à traiter = ambre, en vente = océan, clos = gris, échoué = rouge. */
.et{display:inline-block;font-size:11.5px;letter-spacing:0;padding:3px 9px;white-space:nowrap;
    font-weight:500;border:1px solid transparent}
.et.confirmee,.et.garanti{background:var(--bon-f);color:var(--bon-t);border-color:#bfe3bf}
.et.complet{background:var(--s1-f);color:var(--s1-t);border-color:#c2d5ef}
.et.demande,.et.option{background:var(--vigilance-f);color:var(--vigilance-t);border-color:#f0d59a}
.et.ouvert{background:var(--fond);color:var(--s1-t);border-color:#b9cdec}
.et.realisee,.et.realise,.et.brouillon{background:var(--fond-2);color:var(--gris);border-color:var(--trait)}
.et.annulee_client,.et.annulee_meteo,.et.refusee,.et.no_show,.et.annule{
  background:var(--critique-f);color:var(--critique-t);border-color:#eeb9b5}
.pt{display:inline-block;font-size:11.5px;padding:2px 8px;background:var(--fond-2);
    color:var(--gris);margin-right:5px}

/* boutons — rectangle noir plein, casse normale, angles vifs */
.b{background:var(--noir);color:#fff;border:1px solid var(--noir);padding:10px 18px;font-size:14px;
   font-weight:600;letter-spacing:-.01em;cursor:pointer;text-decoration:none;
   display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.b:hover{background:#1c1c1c;border-color:#1c1c1c}
.b.s{background:var(--fond);color:var(--noir);border-color:var(--trait-fort);font-weight:500}
.b.s:hover{background:var(--fond);border-color:var(--noir)}
.b.d{background:var(--alerte);border-color:var(--alerte)}
.b.d:hover{background:#a92b22;border-color:#a92b22}
.b.p{padding:7px 13px;font-size:13px}
.b:disabled{opacity:.35;cursor:default}
.b.lien{background:none;border:0;color:var(--noir);padding:0;text-decoration:underline;font-size:13px}

/* champs */
.ch{margin-bottom:14px}
.ch label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--gris);
  margin-bottom:6px;font-weight:500}
/* precision en casse normale a l'interieur d'un libelle en capitales */
.ch label .mini{text-transform:none;letter-spacing:0;font-weight:400;color:var(--gris-clair);
                margin-left:6px;font-size:11.5px}
.ch input,.ch select,.ch textarea{width:100%;border:1px solid var(--trait-fort);background:var(--fond);
  padding:10px 12px;border-radius:0;-webkit-appearance:none;appearance:none;color:var(--noir)}
.ch select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23767676'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}
.ch input:focus,.ch select:focus,.ch textarea:focus{outline:none;border-color:var(--noir);
  box-shadow:inset 0 0 0 1px var(--noir)}
.ch textarea{min-height:74px;resize:vertical}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@container (max-width:520px){.duo,.trio{grid-template-columns:1fr}}
.filtre{border:1px solid var(--trait-fort);background:var(--fond);padding:8px 12px;font-size:13.5px;
  color:var(--noir)}

/* graphiques */
.barres{display:flex;align-items:flex-end;gap:6px;padding-top:6px}
.barres .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  gap:6px;min-width:0;position:relative}
.barres .b1{width:100%;background:var(--s1);min-height:2px;transition:opacity .15s}
.barres .lg{font-size:11px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%}
.barres .col:hover .b1{opacity:.6}
.legende{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--gris);margin-top:14px}
.legende i{display:inline-block;width:9px;height:9px;margin-right:6px;vertical-align:0;background:var(--s1)}

.bh{display:grid;grid-template-columns:minmax(90px,auto) 1fr auto;gap:12px;align-items:center;
    padding:6px 0;font-size:13.5px}
.bh .piste{height:8px;background:var(--trait);position:relative;overflow:hidden}
.bh .piste i{position:absolute;inset:0 auto 0 0;background:var(--s1)}
.bh .val{font-size:13px;color:var(--gris);white-space:nowrap;font-variant-numeric:tabular-nums}
.bh .nm{color:var(--noir);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* planning */
.mois{display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid var(--trait);
      border-top:1px solid var(--trait)}
.mois .jn{padding:8px 6px;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--gris);text-align:center;border-right:1px solid var(--trait);
  border-bottom:1px solid var(--trait);font-weight:500}
.mois .jc{min-height:94px;border-right:1px solid var(--trait);border-bottom:1px solid var(--trait);
  padding:5px 5px 6px;position:relative;background:var(--fond)}
.mois .jc.hors{background:var(--fond-2)}
.mois .jc.auj{box-shadow:inset 0 0 0 1.5px var(--noir)}
.mois .jc .n{font-size:12px;color:var(--gris);font-variant-numeric:tabular-nums;margin-bottom:4px}
.mois .jc.auj .n{color:var(--noir);font-weight:700}
.evt{display:block;width:100%;text-align:left;border:0;background:var(--fond-2);
  border-left:3px solid var(--s1);padding:4px 6px;margin-bottom:3px;font-size:11.5px;
  cursor:pointer;line-height:1.4;overflow:hidden;color:var(--texte)}
.evt:hover{background:var(--fond-3)}
.evt b{display:block;font-weight:600;font-size:11.5px;color:var(--noir);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.evt .j{font-size:11px;color:var(--gris);font-variant-numeric:tabular-nums}
.evt.complet{background:var(--s1-f);border-left-color:var(--s1)}
.evt.complet b{color:var(--s1-t)}
.evt.annule{opacity:.55;text-decoration:line-through;border-left-color:var(--critique)}
.evt.attention{border-left-color:var(--vigilance);background:var(--vigilance-f)}
.evt.garanti{border-left-color:var(--bon)}
.evt.passe{border-left-color:var(--trait-fort)}
.evt.passe b{color:var(--gris)}

/* tiroir (mode compact) */
.voile{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:400;display:flex;justify-content:flex-end}
.panneau{background:var(--fond);width:100%;max-width:560px;height:100%;overflow-y:auto;
  border-left:1px solid var(--trait);animation:gl .18s ease-out;container-type:inline-size}
@keyframes gl{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.panneau .ptitre{position:sticky;top:0;background:var(--fond);border-bottom:1px solid var(--trait);
  padding:16px 22px;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;z-index:2}
.panneau .ptitre h2{font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.15;color:var(--noir)}
.panneau .pc{padding:20px 22px 46px}
.panneau .x{background:none;border:0;font-size:20px;cursor:pointer;color:var(--noir);line-height:1;padding:2px 4px}

.sect{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--gris);
  margin:24px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--trait);font-weight:500}
.sect-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
  margin:24px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--trait)}
.sect-tete .sect-titre{font-size:12px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--gris);font-weight:500}
.sect-tete .mini{margin-top:2px}
.lp{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:14px}
.lp span{color:var(--gris)}
.lp strong{font-weight:600;color:var(--noir)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

/* divers */
.vide{padding:34px 20px;text-align:center;color:var(--gris);font-size:14px}
.ban{padding:12px 15px;font-size:13.5px;margin-bottom:16px;display:flex;gap:10px;align-items:flex-start;
  line-height:1.6;border:1px solid var(--trait)}
.ban b,.ban strong{font-weight:600;color:var(--noir)}
.ban.i{background:var(--fond-2)}
.ban.a{background:var(--vigilance-f);border-color:#f0d59a;color:var(--vigilance-t)}
.ban.a b,.ban.a strong{color:var(--vigilance-t)}
.ban.e{background:var(--alerte-fond);border-color:var(--alerte);color:#8d271f}
.ban.e b,.ban.e strong{color:#8d271f}
.ban.o{background:var(--fond-2)}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--noir);
  color:#fff;padding:12px 22px;font-size:13.5px;z-index:600;opacity:0;pointer-events:none;
  transition:opacity .2s;max-width:90vw;text-align:center}
#toast.on{opacity:1}
.chargement{padding:44px;text-align:center;color:var(--gris)}
pre.code{background:var(--noir);color:#f2f2f2;padding:15px 17px;overflow-x:auto;font-size:12.5px;
  line-height:1.75;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------------------------------------------------------------- dockview */
.dockview-theme-light{
  --dv-background-color:var(--fond);
  --dv-group-view-background-color:var(--fond);
  --dv-tabs-and-actions-container-background-color:var(--fond-2);
  --dv-activegroup-visiblepanel-tab-background-color:var(--fond);
  --dv-activegroup-hiddenpanel-tab-background-color:var(--fond-2);
  --dv-inactivegroup-visiblepanel-tab-background-color:var(--fond);
  --dv-inactivegroup-hiddenpanel-tab-background-color:var(--fond-2);
  --dv-activegroup-visiblepanel-tab-color:var(--noir);
  --dv-activegroup-hiddenpanel-tab-color:var(--gris);
  --dv-inactivegroup-visiblepanel-tab-color:var(--gris);
  --dv-inactivegroup-hiddenpanel-tab-color:var(--gris-clair);
  --dv-separator-border:var(--trait);
  --dv-paneview-header-border-color:var(--trait);
  --dv-tabs-container-scrollbar-color:var(--gris-clair);
  --dv-drag-over-background-color:rgba(0,0,0,.07);
  --dv-drag-over-border-color:var(--noir);
  --dv-tab-divider-color:var(--trait);
  --dv-active-sash-color:var(--noir);
  --dv-floating-box-shadow:0 12px 40px rgba(0,0,0,.18);
  font-family:var(--police);
}
.dockview-theme-light .dv-tab{font-size:13px;letter-spacing:-.01em;height:36px;
  border-bottom:1px solid var(--trait)}
.dockview-theme-light .dv-tab.dv-active-tab{border-bottom-color:transparent;
  box-shadow:inset 0 2px 0 var(--noir);font-weight:600}
.dockview-theme-light .dv-tabs-and-actions-container{border-bottom:1px solid var(--trait)}
.dockview-theme-light .dv-void-container{background:var(--fond-2)}

/* barre de l'espace de travail */
#barre{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 15px;background:var(--fond);border-bottom:1px solid var(--trait);flex:0 0 auto}
#barre .t{font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--gris-clair);
  font-weight:500}
#barre .a{display:flex;gap:6px;flex-wrap:wrap}
#app.simple #barre{display:none}
@media(max-width:900px){#barre{display:none}}

@media print{#rail,#barre,.outils,.actions{display:none}.hote{overflow:visible;height:auto}}

/* ---------------------------------------------------------------- météo */
.verdict{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;
  padding:3px 9px;border:1px solid var(--noir);white-space:nowrap}
.verdict.favorable{background:var(--bon-f);color:var(--bon-t);border-color:#bfe3bf}
.verdict.acceptable{background:var(--vigilance-f);color:var(--vigilance-t);border-color:#f0d59a}
.verdict.defavorable{background:var(--serieux-f);color:var(--serieux-t);border-color:#f3c8b3}
.verdict.interdit{background:var(--critique-f);color:var(--critique-t);border-color:#eeb9b5}

.fleche{display:inline-block;width:13px;height:13px;vertical-align:-2px}
.fleche path{fill:currentColor}

/* bande des jours */
.jours{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));
  border:1px solid var(--trait);border-right:0}
.jourm{border-right:1px solid var(--trait);padding:12px 13px 13px;background:var(--fond);
  cursor:pointer;text-align:left;font-family:inherit;color:inherit}
.jourm:hover{background:var(--fond-2)}
.jourm.on{background:var(--noir);color:#fff}
.jourm.on .jm-d,.jourm.on .jm-v{color:#b9b9b9}
.jourm.on .verdict{border-color:transparent}
.jm-j{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--gris)}
.jourm.on .jm-j{color:#b9b9b9}
.jm-n{font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:2px 0 9px}
.jm-n span{font-size:11px;font-weight:500;letter-spacing:0;color:var(--gris-clair)}
.jourm.on .jm-n span{color:#7d7d7d}
.jm-v{font-size:12.5px;color:var(--texte);line-height:1.7;margin-top:9px}
.jourm.on .jm-v strong{color:#fff}
.jm-v strong{color:var(--noir);font-weight:600}

/* profil horaire */
.profil{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:end;gap:2px;height:76px}
.profil .h{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;
  position:relative}
.profil .bar{width:100%;background:var(--s1);min-height:1px;position:relative;display:block}
.profil .bar i{position:absolute;left:0;right:0;top:0;display:block;background:var(--critique)}
.profil.houle .bar{background:var(--s3)}
.profil .bar.hors{background:var(--alerte)}
.profil-cadre{position:relative;border-bottom:1px solid var(--trait)}
.limite{position:absolute;left:0;right:0;border-top:1px dashed var(--alerte);pointer-events:none;z-index:2}
.limite b{position:absolute;right:0;top:-15px;font-size:10.5px;color:var(--alerte);font-weight:500;
  background:var(--fond);padding:0 4px}
.axeh{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;margin-top:5px}
.axeh span{font-size:9.5px;color:var(--gris-clair);text-align:center;font-variant-numeric:tabular-nums}
.bandeverdict{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;margin-top:7px}
.bandeverdict i{height:5px;display:block;background:var(--trait)}
.bandeverdict i.favorable{background:var(--bon)}
.bandeverdict i.acceptable{background:var(--vigilance)}
.bandeverdict i.defavorable{background:var(--serieux)}
.bandeverdict i.interdit{background:var(--critique)}

/* marée */
.maree svg{display:block;width:100%;height:78px}
.maree .courbe{fill:none;stroke:var(--s1);stroke-width:1.5}
.maree .zero{stroke:var(--trait);stroke-width:1}
.maree .pt{fill:var(--s1)}
.mareeliste{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:13.5px}
.mareeliste b{font-weight:600;color:var(--noir)}
.mareeliste span{color:var(--gris)}

/* règles rappelées */
.regles{display:grid;gap:0;border-top:1px solid var(--trait)}
.regles div{border-bottom:1px solid var(--trait);padding:9px 0;font-size:13px;display:flex;gap:12px}
.regles b{font-weight:600;color:var(--noir);min-width:74px;flex:0 0 auto}

/* pastille météo dans le planning */
.evt .meteo{display:inline-block;width:7px;height:7px;margin-right:4px;vertical-align:0}
.jc .vjour{position:absolute;top:5px;right:5px;width:8px;height:8px}
.vjour.favorable{background:var(--bon)}
.vjour.acceptable{background:var(--vigilance)}
.vjour.defavorable{background:var(--serieux)}
.vjour.interdit{background:var(--critique)}

/* bandeau météo compact (synthèse) */
.mtbandeau{border:1px solid var(--trait);background:var(--fond);padding:14px 16px 4px}
.mtbandeau.chargement{min-height:52px}
.mtb-t{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.mtb-t .lb{font-size:10.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--gris)}
.mtb-auj{display:flex;align-items:center;gap:10px;margin-top:7px;font-size:13px;color:var(--texte);flex-wrap:wrap}
.mtb-auj .fleche{width:11px;height:11px;fill:var(--noir);vertical-align:-1px}
.mtb-j{display:flex;gap:0;margin-top:13px;border-top:1px solid var(--trait);overflow-x:auto}
.mtb-c{flex:1 1 0;min-width:74px;border:0;border-right:1px solid var(--trait);background:none;
  cursor:pointer;padding:10px 6px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;
  font:inherit;text-align:center}
.mtb-c:last-child{border-right:0}
.mtb-c:hover{background:var(--fond-2)}
.mtb-c .d{font-size:11px;color:var(--gris);text-transform:capitalize}
.mtb-c .v{font-size:11.5px;color:var(--texte);font-variant-numeric:tabular-nums}
.mtb-c i{width:9px;height:9px;display:block;margin:2px 0}
.mtb-c i.favorable{background:var(--bon)}
.mtb-c i.acceptable{background:var(--vigilance)}
.mtb-c i.defavorable{background:var(--serieux)}
.mtb-c i.interdit{background:var(--critique)}
.mtligne{display:flex;gap:14px;font-size:13px;padding:8px 0;border-top:1px solid var(--trait)}
.mtligne b{font-weight:600;color:var(--noir);flex:0 0 60px}
.mtligne span{color:var(--texte);flex:1 1 auto}

/* règlement — un signal, pas une pastille de plus */
.regle{color:var(--bon-t)}
.du{color:var(--vigilance-t);font-weight:500}
.vignoffre{width:38px;height:28px;object-fit:cover;background:#0f0f0f;vertical-align:-8px;margin-right:9px}

/* champ photo — offres et options, même encart */
.photo-apercu{display:block;width:100%;max-width:240px;height:135px;object-fit:cover;
  background:var(--fond-3);border:1px solid var(--trait-fort);margin-bottom:8px}
.photo-vide{width:100%;max-width:240px;height:135px;display:flex;align-items:center;justify-content:center;
  background:var(--fond-3);border:1px dashed var(--trait-fort);color:var(--gris);font-size:12px;margin-bottom:8px}
.photo-boutons{display:flex;gap:8px}

/* boutique du bord — lignes de famille dans le tableau */
tr.grpe td{background:var(--fond-2);font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--gris);font-weight:600;padding:8px 14px}