/* Layout / Cards (identique AWS Home) */
.kgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;}
@media(max-width:1300px){.kgrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:900px){.kgrid{grid-template-columns:1fr;}}
.kcard{
    position:relative;
    border:1px solid rgba(255,255,255,.15);
    border-radius:16px;
    padding:1rem 1rem 2.5rem;
    min-height:150px;
    cursor:pointer;
    transition:.2s;

    /* --- Thème GCP (Google Blue) --- */
    background-color:#1E3A8A; /* bleu profond */
    background-image:linear-gradient(180deg,rgba(59,130,246,.20),rgba(2,6,23,.15));
}
.kcard:hover{
    border-color:rgba(66,133,244,1); /* Google Blue */
    box-shadow:0 14px 40px rgba(0,0,0,.35);
    transform:translateY(-3px);
    background-color:#2347A6;
}
.kcard h4{color:#fff;font-weight:700;margin-bottom:.35rem;}
.kcard p{color:rgba(226,232,240,.85);font-size:.78rem;}
.kcard .step{
    position:absolute;right:.7rem;bottom:.7rem;
    width:34px;height:34px;border-radius:999px;
    background:linear-gradient(180deg,#4285F4,#0f172a);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:700;font-size:.7rem;
    box-shadow:0 5px 16px rgba(66,133,244,.45);
}
.badge-chip{
    display:inline-block;margin-right:.4rem;margin-top:.3rem;
    padding:.2rem .6rem;border:1px solid rgba(148,163,184,.55);
    border-radius:999px;font-size:.65rem;color:#e2e8f0;background:rgba(15,23,42,.45);
}

/* Modales (identique AWS Home : drag + resize) */
.ig-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.65);z-index:1200;padding:1rem;}
.ig-modal.show{display:flex;}
.ig-box{
    max-width:1180px;width:100%;
    background:#0f172a;
    border:1px solid rgba(148,163,184,.4);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.6);

    resize: both;
    position: relative;
    min-width: 500px;
    min-height: 200px;
}
.ig-h{
    display:flex;align-items:center;justify-content:space-between;
    padding:.85rem 1rem;
    background:linear-gradient(90deg,rgba(66,133,244,.22),rgba(15,23,42,0));
    cursor: move;
}
.ig-h .title{color:#e2e8f0;font-weight:700;}
.ig-b{
    padding:1rem;
    max-height:calc(100vh - 120px);
    overflow-y:auto;
}
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:1rem;}
@media(max-width:1000px){.two{grid-template-columns:1fr;}}
.ig-b h5{color:#66D9EF;margin-bottom:.35rem;font-weight:700;} /* cyan doux GCP */
.code-block{background:#020617;border:1px solid rgba(148,163,184,.25);border-radius:.45rem;padding:.5rem .6rem;font-size:.72rem;white-space:pre-wrap;word-break:break-word;color:#e2e8f0;}
.tbl{width:100%;border-collapse:separate;border-spacing:0 5px;}
.tbl thead th{color:#e2e8f0;font-size:.7rem;border-bottom:1px solid rgba(148,163,184,.25);padding:.4rem .5rem;}
.tbl tbody tr{background:rgba(15,23,42,.35);}
.tbl tbody td{padding:.35rem .5rem;font-size:.7rem;color:#e2e8f0;}

/* Onglets (identique AWS Home) */
.ig-tabs{display:flex;border-bottom:1px solid rgba(148,163,184,.25);gap:.5rem;padding:0 .8rem;}
.ig-tab-btn{
    padding:.5rem 1rem;border:0;background:transparent;
    color:rgba(226,232,240,.65);font-size:.8rem;font-weight:500;
    border-bottom:2px solid transparent;transform:translateY(1px);
    cursor:pointer;
}
.ig-tab-btn:hover{color:rgba(226,232,240,.92);}
.ig-tab-btn.active{
    color:#4285F4;
    border-bottom-color:#4285F4;
    font-weight:700;
}
.ig-tab-content{padding:1rem 0;display:none;}
.ig-tab-content.active{display:block;}

/* ===========================
Cloud Advisor Form (Modal)
=========================== */

.ig-box-xl{
    width:min(1120px, 96vw);
    max-height: min(86vh, 900px);
}

.ig-h-actions{display:flex;gap:.5rem;align-items:center;}
.callout{
    border:1px solid rgba(148,163,184,.25);
    border-radius:12px;
    padding:.7rem .8rem;
    background: rgba(15,23,42,.35);
}
.callout-info{ border-color: rgba(59,130,246,.35); }
.callout-warn{ border-color: rgba(245,158,11,.35); }
.callout-danger{ border-color: rgba(239,68,68,.45); background: rgba(127,29,29,.20); }

.ig-form{margin-top:.5rem;}
.form-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    padding:.4rem 0 .8rem 0;
    border-bottom:1px solid rgba(148,163,184,.18);
    margin-bottom:.9rem;
}
.form-title{font-weight:700;color:#e5e7eb;}
.mini{font-weight:400;font-size:.72rem;margin-left:.4rem;}

.grid-2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:.9rem;
    margin:.85rem 0;
}
.grid-3{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:.9rem;
    margin:.85rem 0;
}
@media (max-width: 980px){
    .grid-3{grid-template-columns:1fr;}
}
@media (max-width: 820px){
    .grid-2{grid-template-columns:1fr;}
}

.field{min-width:0;}
.lbl{
    display:block;
    font-size:.78rem;
    color:#cbd5e1;
    margin:0 0 .35rem 0;
}
.inp{
    width:100%;
    border-radius:10px;
    border:1px solid rgba(148,163,184,.25);
    background: rgba(2,6,23,.55);
    color:#e5e7eb;
    padding:.55rem .65rem;
    outline:none;
}
.inp:focus{
    border-color: rgba(59,130,246,.55);
    box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}
.hint{
    margin-top:.35rem;
    color: rgba(226,232,240,.75);
    font-size:.72rem;
    line-height:1.25;
}

.btn-row{
    display:flex;
    align-items:center;
    gap:.6rem;
    flex-wrap:wrap;
    margin-top:1rem;
}
.btn-row.compact{margin-top:.2rem;}
.mode-note{margin-left:auto;}

.kpi{
    border:1px solid rgba(148,163,184,.20);
    border-radius:14px;
    background: rgba(15,23,42,.30);
    padding:.75rem .8rem;
}
.kpi-label{font-size:.72rem;color:rgba(226,232,240,.75);}
.kpi-value{font-size:1.15rem;font-weight:800;color:#fff;margin-top:.15rem;}
.kpi-sub{font-size:.72rem;color:rgba(226,232,240,.75);margin-top:.2rem;}

.code-block{
    white-space:pre-wrap;
    border-radius:14px;
    border:1px solid rgba(148,163,184,.22);
    background: rgba(2,6,23,.60);
    padding:.8rem;
    color:#e5e7eb;
    font-size:.78rem;
    line-height:1.25;
}

.toggle{display:flex;align-items:center;gap:.55rem;cursor:pointer;user-select:none;}
.toggle input{display:none;}
.toggle-ui{
    width:44px;height:24px;border-radius:999px;
    border:1px solid rgba(148,163,184,.28);
    background: rgba(2,6,23,.55);
    position:relative;
}
.toggle-ui::after{
    content:"";
    width:18px;height:18px;border-radius:50%;
    background: rgba(226,232,240,.95);
    position:absolute;top:2px;left:3px;
    transition: all .18s ease;
}
.toggle input:checked + .toggle-ui{
    border-color: rgba(34,197,94,.45);
    background: rgba(34,197,94,.15);
}
.toggle input:checked + .toggle-ui::after{
    left:22px;
    background: rgba(34,197,94,.95);
}
.toggle-label{font-size:.78rem;color:rgba(226,232,240,.85);}

/* ===== Advisor UX upgrades ===== */

/* Modal bigger + more vertical space */
.ig-box-xl{
  width:min(1260px, 98vw);
  max-height:min(92vh, 980px);
}
.ig-b{
  max-height:calc(92vh - 120px);
}

/* Sticky action bar (buttons always visible) */
.advisor-actions{
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: .75rem .75rem;
  margin-top: 1rem;
  border-top: 1px solid rgba(148,163,184,.18);
  background: linear-gradient(180deg, rgba(15,23,42,.55), rgba(2,6,23,.85));
  backdrop-filter: blur(6px);
  border-radius: 14px;
}

/* More contrast overall */
.callout{
  background: linear-gradient(180deg, rgba(2,6,23,.45), rgba(15,23,42,.55));
}
.field{
  padding: .55rem .55rem .65rem;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(2,6,23,.22);
}
.field:hover{
  border-color: rgba(66,133,244,.35);
  background: rgba(2,6,23,.30);
}

/* Labels bigger + stronger color */
.lbl{
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(147,197,253,.95); /* light blue */
  margin: 0 0 .4rem 0;
}

/* Input hover + focus */
.inp{
  transition: box-shadow .15s ease, border-color .15s ease, transform .08s ease;
}
.inp:hover{
  border-color: rgba(66,133,244,.55);
  box-shadow: 0 0 0 3px rgba(66,133,244,.10);
}
.inp:focus{
  border-color: rgba(34,197,94,.55);
  box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}

/* Required markers */
.lbl .req{
  display:inline-flex;
  margin-left:.4rem;
  font-size:.75rem;
  padding:.05rem .35rem;
  border-radius:999px;
  border:1px solid rgba(239,68,68,.35);
  color: rgba(254,202,202,.95);
  background: rgba(239,68,68,.10);
  vertical-align: middle;
}
.inp.is-required{
  border-color: rgba(239,68,68,.35);
}
.inp.is-required:focus{
  border-color: rgba(239,68,68,.55);
  box-shadow: 0 0 0 4px rgba(239,68,68,.12);
}

/* Help tooltip icon */
.help-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;height:22px;
  margin-left:.45rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.25);
  color: rgba(226,232,240,.85);
  background: rgba(15,23,42,.55);
  cursor: help;
  position: relative;
}
.help-ico:hover{
  border-color: rgba(66,133,244,.55);
  color: #fff;
}

/* Tooltip bubble (pure CSS) */
.help-ico[data-tip]::after{
  content: attr(data-tip);
  position:absolute;
  left: 0;
  bottom: 140%;
  width: min(380px, 60vw);
  padding: .55rem .65rem;
  border-radius: 12px;
  border: 1px solid rgba(66,133,244,.35);
  background: rgba(2,6,23,.92);
  color: rgba(226,232,240,.95);
  font-size: .78rem;
  line-height: 1.25;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: .12s ease;
  white-space: normal;
  z-index: 20;
}
.help-ico:hover::after{
  opacity: 1;
  transform: translateY(0);
}

/* Expand/Collapse sections */
.adv-section{
  border:1px solid rgba(148,163,184,.16);
  border-radius: 16px;
  background: rgba(2,6,23,.18);
  margin: .75rem 0;
  overflow:hidden;
}
.adv-section summary{
  list-style:none;
  cursor:pointer;
  padding:.75rem .85rem;
  font-weight: 900;
  color: rgba(226,232,240,.92);
  background: linear-gradient(90deg, rgba(66,133,244,.16), rgba(15,23,42,0));
  border-bottom:1px solid rgba(148,163,184,.14);
}
.adv-section summary::-webkit-details-marker{display:none;}
.adv-section .section-body{
  padding: .65rem .65rem .25rem;
}