:root{
  --bg:#0B0F19;
  --card:#151B28;
  --cardBorder:rgba(255,255,255,.08);
  --text:#FFFFFF;
  --text2:#B0B3C2;
  --grad:linear-gradient(135deg,#00C6FF,#7C00FF);
  --accent:#00C6FF;
  --shadow:0 8px 28px rgba(0,0,0,.35);
  --radius:14px;
}

/* Reset light */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 16px/1.5 "Segoe UI",Roboto,Arial,sans-serif;
}

/* Utilitaires de layout */
.container{max-width:1220px;margin:0 auto;padding:0 20px}
.et-main{padding:24px 0 48px}

/* Liens & boutons */
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

/* Boutons (alias pour compat avec le code existant) */
.et-btn,
.btn{
  display:inline-block;
  padding:.6rem 1rem;
  border:1px solid var(--cardBorder);
  border-radius:10px;
  background:transparent;
  color:var(--text);
  text-decoration:none;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.et-btn:hover,
.btn:hover{
  transform:translateY(-1px);
  text-decoration:none;
}
/* Variantes dégradé */
.et-btn--grad,
.btn-gradient{
  background:var(--grad);
  border-color:transparent;
  color:#fff;
}
/* Variante “ghost” utilisée dans les cartes templates */
.btn.ghost{
  background:transparent;
  border-color:var(--cardBorder);
  color:var(--text);
}
.btn.ghost:hover{ border-color:#2a3246; }

/* Header / Navbar */
.et-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(160%) blur(8px);
  background:rgba(11,15,25,.65);border-bottom:1px solid var(--cardBorder);
}
.et-header__inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.et-logo{display:flex;align-items:center;gap:.6rem}
.et-logo__img{height:28px;width:auto}
.et-logo__text{
  font-weight:800;letter-spacing:.3px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.et-logo__text--footer{font-size:1.05rem}

.et-nav{display:flex;align-items:center;gap:.8rem}
.et-nav__link{padding:.4rem .6rem;border-radius:10px;border:1px solid transparent}
.et-nav__link:hover{border-color:var(--cardBorder);text-decoration:none}

/* Burger mobile */
.et-nav__toggle{
  display:none;flex-direction:column;gap:5px;border:0;background:transparent;cursor:pointer
}
.et-nav__toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px}

/* Footer */
.et-footer{border-top:1px solid var(--cardBorder);padding:28px 0;background:rgba(255,255,255,.02)}
.et-footer__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.et-footer__tagline{color:var(--text2);font-size:.9rem}
.et-footer__copy{color:var(--text2);font-size:.9rem}

/* Cartes, grilles, formulaires (génériques) */
.et-card{
  background:var(--card);border:1px solid var(--cardBorder);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1rem;
}
.et-grid{display:grid;gap:1rem}
.et-grid--auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.et-form{display:grid;gap:1rem}
.et-form--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.et-field{display:flex;flex-direction:column;gap:.35rem}
.et-field label{font-weight:600}
.et-field input,.et-field select, .et-field textarea{
  background:#0f1420;border:1px solid var(--cardBorder);border-radius:10px;padding:.65rem;color:var(--text)
}
.et-hint{color:var(--text2);font-size:.95rem}

/* HERO commun */
.et-hero{padding:40px 0 16px}
.et-hero__title{margin:0 0 6px;font-size:2rem}
.et-hero__text{color:var(--text2);margin:0}

/* Templates grid + modal (request_dynamic) */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.tpl-card{background:var(--card);border:1px solid var(--cardBorder);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.tpl-card.selected{outline:2px solid #00c6ff;outline-offset:-2px}
.tpl-img-wrap{aspect-ratio:16/10;overflow:hidden}
.tpl-img{width:100%;height:100%;object-fit:cover;display:block}
.tpl-body{padding:.8rem}
.tpl-title{margin:.2rem 0 .4rem;font-size:1.05rem}
.tpl-price{color:var(--text2);margin-bottom:.6rem}
.tpl-actions{display:flex;gap:.5rem;flex-wrap:wrap}

.modal{position:fixed;inset:0;display:none}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.modal-dialog{position:relative;z-index:1;max-width:min(960px,92vw);margin:6vh auto;background:var(--card);border:1px solid var(--cardBorder);border-radius:14px;overflow:hidden}
.modal-header,.modal-footer{padding:.8rem 1rem;border-bottom:1px solid var(--cardBorder)}
.modal-footer{border-top:1px solid var(--cardBorder);border-bottom:none;display:flex;gap:.5rem;justify-content:flex-end}
.modal-body{padding:1rem;display:flex;justify-content:center;align-items:center;background:#0f1420}
.modal-img{max-width:100%;height:auto;border-radius:8px}
.modal-close{position:absolute;top:.5rem;right:.5rem;background:transparent;border:none;color:#fff;font-size:1.4rem;cursor:pointer}

/* Cartes services / formations (legacy helpers) */
.card{background:var(--card);border:1px solid var(--cardBorder);border-radius:12px;padding:1rem}
.grid{display:grid;gap:1rem}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* Responsivité */
@media (max-width: 960px){
  .et-nav__toggle{display:flex}
  .et-nav{
    position:absolute;right:20px;top:64px;display:none;flex-direction:column;gap:.6rem;
    background:var(--card);border:1px solid var(--cardBorder);border-radius:12px;padding:.8rem;box-shadow:var(--shadow)
  }
  .et-nav.is-open{display:flex}
}

.et-hero--request{padding:48px 0 8px}
.et-title-gradient{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:.3px
}

/* Tabs */
.et-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:10px 0 18px}
.et-tab{
  padding:.5rem .9rem;border:1px solid var(--cardBorder);border-radius:12px;text-decoration:none
}
.et-tab.is-active{background:var(--card);border-color:transparent}

/* Cards header */
.et-card__head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.4rem}
.et-card__title{margin:.2rem 0 1rem}

/* Fieldsets & legends */
.et-legend{font-weight:700;margin:0 0 .6rem;color:var(--text)}

/* Segmented controls */
.et-segment{display:flex;flex-wrap:wrap;gap:.4rem}
.et-segment input[type="radio"]{display:none}
.et-segment label{
  display:inline-block;padding:.45rem .7rem;border:1px solid var(--cardBorder);
  border-radius:999px;cursor:pointer;user-select:none
}
.et-segment input[type="radio"]:checked + label{
  background:var(--grad);border-color:transparent;color:#fff
}

/* Callout */
.et-callout{
  display:grid;gap:.5rem;border:1px dashed var(--cardBorder);
  background:rgba(255,255,255,.03);border-radius:12px;padding:.9rem
}
.et-callout__title{font-weight:700}

/* Pagination */
.et-pager{display:flex;align-items:center;gap:.5rem;margin:.6rem 0}
.et-pager--top{margin-top:.2rem}
.et-pager__btn,.et-pager__num{
  display:inline-block;min-width:34px;text-align:center;padding:.4rem .6rem;
  border:1px solid var(--cardBorder);border-radius:10px;text-decoration:none
}
.et-pager__num.is-active{background:var(--grad);color:#fff;border-color:transparent}
.et-pager__btn.is-disabled{opacity:.5;pointer-events:none}
.et-pager__nums{display:flex;gap:.4rem;flex-wrap:wrap}

/* Spans */
.span-2{grid-column:1/-1}
/* Deux colonnes (form + résumé) sur desktop, pile en mobile */
.rq-two-cols{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:1rem;
  margin-top:1rem;
}
@media (max-width: 1024px){
  .rq-two-cols{ grid-template-columns: 1fr; }
}

/* Résumé */
.rq-summary__title{margin:.2rem 0 1rem}
.rq-summary__list{margin:0;display:grid;gap:.5rem}
.rq-summary__list > div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dashed var(--cardBorder);padding:.35rem 0}
.rq-summary__list dt{opacity:.85}
.rq-summary__total{font-weight:800}
.rq-summary__opt{opacity:.95}

/* Grille templates plus flexible en mobile */
.tpl-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tpl-actions{display:flex;gap:.5rem;flex-wrap:wrap}
@media (max-width:600px){
  .tpl-grid{grid-template-columns:1fr}
  .tpl-actions .btn, .tpl-actions .btn-gradient{width:100%;text-align:center}
}

/* Pagination responsive */
.et-pager{flex-wrap:wrap}
.et-pager__nums{display:flex;gap:.35rem;flex-wrap:wrap}

.et-color{
  display:flex; align-items:center; gap:.6rem;
}
.et-color__picker{
  width:46px; height:38px; padding:0; border:1px solid var(--cardBorder);
  border-radius:10px; background:#0f1420;
}
.et-color__hex{
  flex:1;
  background:#0f1420; border:1px solid var(--cardBorder); border-radius:10px;
  padding:.6rem .7rem; color:var(--text); letter-spacing:.5px; text-transform:uppercase;
}
.et-color__hex:invalid{ outline:1px solid #b23; }
.et-color__chip{
  width:28px; height:28px; border-radius:8px; border:1px solid var(--cardBorder);
  background:transparent;
}