/* H2B V68 — bandeaux Infos pages intégrés au flux */

/* L’onglet d’administration reste vert pour le repérer rapidement. */
.section-tab.h2b-info-admin-tab{color:#a8f4d2;border-color:rgba(56,217,150,.42)}

/* Le rendu utilisateur n’est PLUS fixe à l’écran. Il vit dans le flux de la page. */
.h2b-info-flow-host{
  position:relative!important;
  z-index:4!important;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  margin:0 0 20px;
  pointer-events:auto;
}
.h2b-info-flow-host-auth{margin:0 0 16px}

.h2b-info-banner{
  --info-rgb:242,140,40;
  --info-alpha:.22;
  --info-font-size:18px;
  --info-custom-width:70%;
  display:inline-flex;
  align-items:flex-start;
  gap:10px;
  width:fit-content;
  max-width:100%;
  padding:10px 14px;
  border:1px solid rgba(var(--info-rgb),.58);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(var(--info-rgb),var(--info-alpha)),rgba(var(--info-rgb),calc(var(--info-alpha) * .58)));
  box-shadow:0 8px 24px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.035);
  color:#f7fbff;
  font-family:var(--display-font,"Kanit",Inter,system-ui,sans-serif)!important;
  font-size:var(--info-font-size);
  font-weight:800;
  font-style:italic;
  line-height:1.28;
  letter-spacing:-.015em;
  text-align:left;
  overflow-wrap:anywhere;
}
.h2b-info-banner-icon{
  flex:0 0 auto;
  width:25px;height:25px;
  display:grid;place-items:center;
  border-radius:9px;
  background:rgba(var(--info-rgb),.28);
  border:1px solid rgba(var(--info-rgb),.68);
  color:#fff;
  font-family:Inter,system-ui,sans-serif;
  font-size:14px;
  font-style:normal;
  font-weight:900;
  line-height:1;
}
.h2b-info-banner-text{min-width:0;padding-top:1px;white-space:pre-wrap}
.h2b-info-size-auto{width:fit-content}
.h2b-info-size-small{width:min(100%,420px)}
.h2b-info-size-medium{width:min(100%,620px)}
.h2b-info-size-large{width:min(100%,860px)}
.h2b-info-size-full{width:100%}
.h2b-info-size-custom{width:min(100%,var(--info-custom-width))}

/* Dans la carte de connexion, le bandeau reste calé sur la largeur de la carte. */
.auth-card .h2b-info-flow-host{width:100%}
.auth-card .h2b-info-banner{max-width:100%}

/* Éditeur V68 */
.h2b-info-v68-editor{border-color:rgba(56,217,150,.3)}
.h2b-info-v68-grid{display:grid;grid-template-columns:minmax(300px,.84fr) minmax(360px,1.16fr);gap:22px;align-items:start}
.h2b-info-v68-color-row{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:12px;align-items:end}
.h2b-info-v68-color-input{height:44px;display:flex;align-items:center;gap:9px;border:1px solid #24364d;background:#09121d;border-radius:11px;padding:6px 10px}
.h2b-info-v68-color-input input[type=color]{width:44px;height:30px;padding:0;border:0;background:transparent;cursor:pointer}
.h2b-info-v68-color-input span{font-size:12px;color:#c8d4e2;font-weight:800;letter-spacing:.04em}
.h2b-info-v68-presets{display:flex;gap:7px;padding-bottom:3px;flex-wrap:wrap}
.h2b-info-v68-presets button{width:34px;height:34px;border-radius:10px;border:2px solid rgba(255,255,255,.18);background:var(--swatch);cursor:pointer;box-shadow:inset 0 0 0 2px rgba(0,0,0,.16)}
.h2b-info-v68-presets button:focus-visible{outline:2px solid #fff;outline-offset:2px}

.h2b-info-v68-device-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 10px}
.h2b-info-v68-device-tabs .active{border-color:#69e7b1!important;box-shadow:0 0 0 1px rgba(56,217,150,.18)}
.h2b-info-v68-preview{position:relative;width:100%;max-width:780px;margin-inline:auto;border:1px solid rgba(56,217,150,.24);border-radius:16px;background:linear-gradient(145deg,#07111c,#0b1724);overflow:hidden;padding:14px;transition:max-width .18s ease}
.h2b-info-v68-preview[data-device="desktop"]{max-width:780px;min-height:310px}
.h2b-info-v68-preview[data-device="tablet"]{max-width:560px;min-height:360px}
.h2b-info-v68-preview[data-device="mobile"]{max-width:330px;min-height:480px}
.h2b-info-v68-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 3px 12px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:13px}
.h2b-info-v68-preview-head span{font-size:10px;color:#71e8b6;font-weight:900;letter-spacing:.16em}.h2b-info-v68-preview-head strong{font-size:11px;color:#90a1b5;letter-spacing:.08em}
.h2b-info-v68-preview-slot{display:flex;flex-direction:column;align-items:flex-start;width:100%;margin-bottom:16px}
.h2b-info-v68-preview-slot .h2b-info-banner{max-width:100%}
.h2b-info-v68-preview-content{display:grid;gap:10px}.h2b-info-v68-preview-content div{height:56px;border-radius:12px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.035)}
#h2bInfoPreview[data-device="mobile"] .h2b-info-banner{font-size:min(var(--info-font-size),20px)}

.h2b-info-list-swatch{width:12px;height:42px;flex:0 0 12px;border-radius:999px;background:var(--swatch);box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.h2b-info-admin-row{align-items:center}

/* Neutralise définitivement l’ancien rendu flottant V65/V67 s’il reste en cache. */
.h2b-page-info-layer{display:none!important}

@media(max-width:900px){
  .h2b-info-v68-grid{grid-template-columns:1fr}
  .h2b-info-v68-preview[data-device="desktop"]{max-width:100%}
  .h2b-info-v68-preview[data-device="tablet"]{max-width:min(100%,560px)}
  .h2b-info-v68-preview[data-device="mobile"]{max-width:min(100%,330px)}
}
@media(max-width:600px){
  .h2b-info-v68-color-row{grid-template-columns:1fr}
  .h2b-info-v68-presets{padding-bottom:0}
  .h2b-info-flow-host{margin-bottom:14px}
  .h2b-info-banner{padding:9px 11px;gap:8px;border-radius:13px;max-width:100%}
  .h2b-info-banner-icon{width:23px;height:23px;border-radius:8px;font-size:13px}
  .h2b-info-size-medium,.h2b-info-size-large,.h2b-info-size-full,.h2b-info-size-custom{max-width:100%}
  .h2b-info-v68-preview[data-device="mobile"]{max-width:100%}
}