/* ═══════════════════════════════════════════════════════════════════
   GIRI POSTE — MARBRE & OR, TAILLÉ EN HUD  (v2 — 07/08/2026)
   Palette officielle marbre-lumineux + une couche « poste de pilotage » :
   angles coupés, filets d'or, diodes vivantes, chiffres de tableau de bord.
   Fond CLAIR — jamais de sombre, c'est la charte.
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

:root{
  /* ── charte marbre lumineux ── */
  --clair:#fdfaf2; --clair-2:#fffdf8; --clair-3:#f7f1e2;
  --or:#c9971b; --or-vif:#e8b93a; --or-lum:#f7e3a4; --or-profond:#8a6512; --or-texte:#7a5a10;
  --encre:#221d15; --texte:#443c31; --doux:#6a6154; --doux-2:#8d8577;
  --filet:rgba(201,151,27,.34); --filet-fin:rgba(201,151,27,.15);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  /* ── signaux ── */
  --vert:#3f8f52; --vert-lum:#e8f5ea;
  --rouge:#b8443c; --rouge-lum:#fbeceb;
  --orange:#c07f14; --orange-lum:#fcf2df;
  --bleu:#3d7ea6; --bleu-lum:#eaf3f9;
  /* ── géométrie HUD ── */
  --coupe:14px;              /* taille du coin biseauté */
  --lueur:0 0 0 1px var(--filet), 0 6px 22px rgba(138,101,18,.09);
  --lueur-vive:0 0 0 1px var(--or), 0 0 22px rgba(232,185,58,.32);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--clair); color:var(--texte);
  font-family:var(--sans); font-size:15px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* veine de marbre + trame de HUD, très basses en intensité */
  background-image:
    radial-gradient(1200px 620px at 12% -8%, rgba(255,255,255,.9), transparent 62%),
    radial-gradient(900px 520px at 92% 4%, rgba(247,227,164,.20), transparent 60%),
    linear-gradient(118deg, transparent 46%, rgba(201,151,27,.05) 47%, transparent 48%),
    linear-gradient(64deg, transparent 62%, rgba(138,101,18,.035) 63%, transparent 64%),
    linear-gradient(var(--filet-fin) 1px, transparent 1px),
    linear-gradient(90deg, var(--filet-fin) 1px, transparent 1px);
  background-size:auto,auto,auto,auto,58px 58px,58px 58px;
  background-attachment:fixed;
}

a{color:var(--or-texte);text-decoration:none;border-bottom:1px solid var(--filet)}
a:hover{color:var(--or-profond);border-bottom-color:var(--or)}

h1,h2,h3{font-family:var(--serif);color:var(--encre);margin:0 0 12px;letter-spacing:-.005em}
h1{font-size:38px;font-weight:600;line-height:1.08}
h2{font-size:27px;font-weight:600;line-height:1.16}
h3{font-size:21px;font-weight:600}
h1 b,h2 b{font-weight:700;
  background:linear-gradient(120deg,#8a6512 0%,#c9971b 26%,#e8b93a 44%,#c9971b 62%,#8a6512 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:-.01em}
.chiffre{font-variant-numeric:lining-nums tabular-nums}

/* ── Structure ────────────────────────────────────────────────────── */
.enveloppe{max-width:1300px;margin:0 auto;padding:26px 24px 60px}

.entete{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-bottom:24px;padding-bottom:18px;position:relative;
}
.entete::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--or) 0%,var(--or-vif) 14%,var(--filet) 42%,transparent 78%)}
.entete .titre{display:flex;align-items:center;gap:15px}
.entete .titre .icone{
  font-size:23px;width:50px;height:50px;display:grid;place-items:center;flex:none;
  background:linear-gradient(150deg,var(--clair-2),var(--clair-3));
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  box-shadow:inset 0 0 0 1px var(--filet);
}
.entete .titre p{margin:3px 0 0;color:var(--doux);font-size:13.5px}

.grille{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.colonnes{display:grid;grid-template-columns:340px 1fr;gap:18px}
@media(max-width:900px){.colonnes{grid-template-columns:1fr}}

/* ── Cartes taillées ──────────────────────────────────────────────── */
.carte{
  background:linear-gradient(135deg,transparent 0 9.9px,var(--or) 9.9px 11.5px,transparent 11.5px) top left/34px 34px no-repeat,linear-gradient(315deg,transparent 0 9.9px,var(--or) 9.9px 11.5px,transparent 11.5px) bottom right/34px 34px no-repeat,linear-gradient(160deg,var(--clair-2) 0%,#fffefb 55%,var(--clair-3) 100%);
  padding:20px;position:relative;border:1px solid var(--filet);
  filter:drop-shadow(0 4px 13px rgba(138,101,18,.11));
  clip-path:polygon(var(--coupe) 0,100% 0,100% calc(100% - var(--coupe)),calc(100% - var(--coupe)) 100%,0 100%,0 var(--coupe));
}
.carte.plate{padding:0;overflow:hidden}
.carte h2,.carte h3{margin-top:0}
.carte-titre{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px;flex-wrap:wrap}

/* ── Tuiles de score ──────────────────────────────────────────────── */
.tuile{
  background:linear-gradient(135deg,transparent 0 8.5px,var(--or) 8.5px 9.9px,transparent 9.9px) top left/30px 30px no-repeat,linear-gradient(315deg,transparent 0 8.5px,var(--or) 8.5px 9.9px,transparent 9.9px) bottom right/30px 30px no-repeat,linear-gradient(158deg,var(--clair-2),var(--clair-3));
  padding:17px 18px;position:relative;border:1px solid var(--filet);
  filter:drop-shadow(0 3px 10px rgba(138,101,18,.10));
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:border-color .18s,transform .18s,filter .18s;
}
.tuile:hover{border-color:var(--or);transform:translateY(-2px);
  filter:drop-shadow(0 0 14px rgba(232,185,58,.5))}
.tuile::after{content:'';position:absolute;left:18px;bottom:0;width:34px;height:2px;background:var(--or)}
.tuile .valeur{
  font-family:var(--serif);font-size:37px;line-height:1;font-weight:700;
  font-variant-numeric:lining-nums tabular-nums;
  background:linear-gradient(120deg,#8a6512,#c9971b 30%,#e8b93a 50%,#c9971b 70%,#8a6512);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.tuile .etiquette{font-size:10.5px;color:var(--doux);text-transform:uppercase;letter-spacing:.11em;
  margin-top:9px;font-weight:700;line-height:1.35;text-wrap:balance}
.tuile.vert .valeur{background:none;-webkit-text-fill-color:var(--vert);color:var(--vert)}
.tuile.vert::after{background:var(--vert)}
.tuile.rouge .valeur{background:none;-webkit-text-fill-color:var(--rouge);color:var(--rouge)}
.tuile.rouge::after{background:var(--rouge)}
.tuile.orange .valeur{background:none;-webkit-text-fill-color:var(--orange);color:var(--orange)}
.tuile.orange::after{background:var(--orange)}
.tuile.bleu .valeur{background:none;-webkit-text-fill-color:var(--bleu);color:var(--bleu)}
.tuile.bleu::after{background:var(--bleu)}

/* ── Champs ───────────────────────────────────────────────────────── */
label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--or-texte);font-weight:800;margin:0 0 7px}
/* une case à cocher est suivie d'une phrase : ni capitales, ni interlettrage */
label:has(input[type=checkbox]){text-transform:none;letter-spacing:normal;
  font-size:14px;font-weight:500;color:var(--texte);display:flex;align-items:center;gap:9px}
input,select,textarea{
  width:100%;background:var(--clair-2);color:var(--encre);
  border:1px solid var(--filet);border-radius:0;padding:11px 13px;
  font-family:inherit;font-size:15px;transition:border-color .16s,box-shadow .16s,background .16s;
}
input::placeholder,textarea::placeholder{color:#a89e8d}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--or);background:#fff;
  box-shadow:0 0 0 3px rgba(232,185,58,.22), inset 0 0 14px rgba(247,227,164,.24);
}
textarea{min-height:160px;resize:vertical;line-height:1.75}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--or) 50%),linear-gradient(135deg,var(--or) 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
input[type=checkbox]{width:auto;accent-color:var(--or)}
input[type=file]{padding:9px;background:var(--clair-3)}
.champ{margin-bottom:15px}
.champs-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.champs-2{grid-template-columns:1fr}}

/* ── Boutons biseautés ────────────────────────────────────────────── */
button,.bouton{
  background:linear-gradient(160deg,var(--clair-2),var(--clair-3));
  color:var(--encre);border:none;padding:10px 17px;
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;position:relative;
  border:1px solid var(--filet);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:border-color .16s,transform .12s,background .16s,filter .16s;
  text-decoration:none;
}
button:hover:not(:disabled),.bouton:hover{
  background:linear-gradient(160deg,#fff,var(--clair-2));
  border-color:var(--or);filter:drop-shadow(0 0 9px rgba(232,185,58,.55));
  transform:translateY(-1px);
}
button:active:not(:disabled){transform:translateY(0)}
button:disabled{opacity:.4;cursor:not-allowed}

/* le lingot : CTA principal */
button.or{
  background:linear-gradient(150deg,#e8b93a 0%,#c9971b 42%,#d8a828 60%,#8a6512 100%);
  color:#2a1f06;border-color:var(--or-profond);font-weight:800;overflow:hidden;
  filter:drop-shadow(0 4px 11px rgba(138,101,18,.34));
}
button.or::after{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.55) 50%,transparent 66%);
  transform:translateX(-130%);transition:transform .6s}
button.or:hover:not(:disabled)::after{transform:translateX(130%)}
button.or:hover:not(:disabled){filter:drop-shadow(0 0 17px rgba(232,185,58,.75))}
button.danger{border-color:rgba(184,68,60,.45);color:var(--rouge)}
button.danger:hover:not(:disabled){background:var(--rouge-lum);border-color:var(--rouge);
  filter:drop-shadow(0 0 9px rgba(184,68,60,.4))}
button.mini,.bouton.mini{padding:6px 11px;font-size:12.5px;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.barre-boutons{display:flex;gap:11px;flex-wrap:wrap;align-items:center}

/* ── Tableaux ─────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:14px}
th{
  text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--or-texte);font-weight:800;padding:11px 13px;
  background:linear-gradient(180deg,var(--clair-3),var(--clair));
  border-bottom:2px solid var(--filet);position:sticky;top:0;z-index:2;
}
td{padding:10px 13px;border-bottom:1px solid rgba(201,151,27,.10);vertical-align:top;color:var(--texte)}
tbody tr{transition:background .13s}
tbody tr:hover{background:linear-gradient(90deg,rgba(247,227,164,.34),rgba(247,227,164,.07))}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--or)}
.defile{max-height:60vh;overflow:auto}
.defile-x{overflow-x:auto}

/* ── Pastilles à diode ────────────────────────────────────────────── */
.pastille{
  display:inline-flex;align-items:center;gap:5px;padding:2px 10px;
  font-size:10.5px;font-weight:800;letter-spacing:.05em;white-space:nowrap;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
  text-transform:uppercase;
}
.pastille::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;
  box-shadow:0 0 5px currentColor}
.pastille{border:1px solid currentColor}
.p-vert{background:var(--vert-lum);color:var(--vert)}
.p-rouge{background:var(--rouge-lum);color:var(--rouge)}
.p-orange{background:var(--orange-lum);color:var(--orange)}
.p-bleu{background:var(--bleu-lum);color:var(--bleu)}
.p-gris{background:var(--clair-3);color:var(--doux)}
.p-or{background:linear-gradient(120deg,#fbf1d4,#f7e3a4);color:var(--or-profond)}

/* ── Avis ─────────────────────────────────────────────────────────── */
.avis{
  padding:14px 17px;margin:14px 0;font-size:14px;position:relative;
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  border-left:3px solid;
}
.avis-info{background:var(--bleu-lum);border-color:var(--bleu);color:#2b5d7d}
.avis-ok{background:var(--vert-lum);border-color:var(--vert);color:#2c6b3c}
.avis-alerte{background:var(--orange-lum);border-color:var(--orange);color:#8a5c06}
.avis-erreur{background:var(--rouge-lum);border-color:var(--rouge);color:#8f2f28}

/* ── Onglets à chevron ────────────────────────────────────────────── */
.onglets{display:flex;gap:3px;margin-bottom:20px;overflow-x:auto;position:relative;padding-bottom:2px}
.onglets::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--filet-fin)}
.onglets button{
  background:none;box-shadow:none;clip-path:none;border-radius:0;
  padding:11px 18px;color:var(--doux);white-space:nowrap;font-weight:700;
  font-size:13px;text-transform:uppercase;letter-spacing:.08em;position:relative;z-index:1;
}
.onglets button:hover{background:rgba(247,227,164,.34);box-shadow:none;transform:none;color:var(--encre)}
.onglets button.actif{color:var(--or-profond);background:linear-gradient(180deg,rgba(247,227,164,.44),transparent)}
.onglets button.actif::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:linear-gradient(90deg,var(--or),var(--or-vif))}
.volet{display:none}.volet.actif{display:block;animation:monte .28s ease-out}
@keyframes monte{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ── Étapes verrouillées ──────────────────────────────────────────── */
.etape{
  margin-bottom:16px;border:1px solid var(--filet);
  background:linear-gradient(135deg,transparent 0 9.9px,var(--or) 9.9px 11.5px,transparent 11.5px) top left/34px 34px no-repeat,linear-gradient(315deg,transparent 0 9.9px,var(--or) 9.9px 11.5px,transparent 11.5px) bottom right/34px 34px no-repeat,linear-gradient(160deg,var(--clair-2),#fffefb);
  filter:drop-shadow(0 4px 13px rgba(138,101,18,.11));
  clip-path:polygon(var(--coupe) 0,100% 0,100% calc(100% - var(--coupe)),calc(100% - var(--coupe)) 100%,0 100%,0 var(--coupe));
  transition:border-color .22s,filter .22s;
}
.etape.verrou{opacity:.5;pointer-events:none;filter:saturate(.2) drop-shadow(0 2px 6px rgba(138,101,18,.06))}
.etape.faite{border-color:rgba(63,143,82,.55);
  filter:drop-shadow(0 4px 15px rgba(63,143,82,.17))}
.etape > .tete{
  display:flex;align-items:center;gap:14px;padding:15px 20px;
  background:linear-gradient(180deg,var(--clair-3),rgba(247,241,226,.4));
  border-bottom:1px solid var(--filet-fin);
  font-family:var(--serif);font-size:19px;font-weight:600;color:var(--encre);
}
.etape > .tete .num{
  width:29px;height:29px;flex:none;display:grid;place-items:center;
  font-family:var(--sans);font-size:13px;font-weight:800;color:var(--or-profond);
  background:linear-gradient(150deg,#fbf1d4,#f7e3a4);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow:0 0 0 1px var(--filet);
}
.etape.faite > .tete .num{background:linear-gradient(150deg,#6cbb7f,var(--vert));color:#fff;box-shadow:0 0 12px rgba(63,143,82,.42)}
.etape > .corps{padding:20px}

/* ── Divers ───────────────────────────────────────────────────────── */
.doux{color:var(--doux)}
.faible{color:var(--doux-2);font-size:13px}
.centre{text-align:center}.droite{text-align:right}
.vide{padding:46px 20px;text-align:center;color:var(--doux-2);font-family:var(--serif);font-size:17px}
.tronque{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.chargement{display:inline-block;width:15px;height:15px;border:2px solid var(--filet);
  border-top-color:var(--or);border-radius:50%;animation:tourne .68s linear infinite;vertical-align:-2px}
@keyframes tourne{to{transform:rotate(360deg)}}

/* jauge d'énergie segmentée */
.barre{height:11px;background:var(--clair-3);overflow:hidden;position:relative;
  box-shadow:inset 0 0 0 1px var(--filet-fin);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.barre > i{display:block;height:100%;transition:width .35s cubic-bezier(.4,0,.2,1);
  background:linear-gradient(90deg,var(--or-profond),var(--or) 45%,var(--or-vif));
  box-shadow:0 0 12px rgba(232,185,58,.66)}
.barre::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(253,250,242,.85) 7px 9px)}

iframe.plein{width:100%;border:0;background:#fff;box-shadow:var(--lueur)}
details summary{cursor:pointer;color:var(--or-texte);font-weight:700}
details summary:hover{color:var(--or-profond)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--clair-3)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--or-vif),var(--or));border:3px solid var(--clair-3)}
::-webkit-scrollbar-thumb:hover{background:var(--or)}
::selection{background:var(--or-lum);color:var(--encre)}