@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&display=swap');
/* Utilitaire pour aligner à gauche uniquement certains blocs */
.align-left, .align-left .card, .align-left .card * {
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
/* Force left alignment for ancien devis.html blocks and cards */
.blocks, .blocks .card, .blocks .card * {
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
#devis-selection.devis-selection-bg-isolation::before {
  filter: blur(10px) brightness(1.08) saturate(1.1);
}
#devis-selection.devis-selection-bg-toiture::before {
  filter: blur(10px) brightness(1.08) saturate(1.1);
}
#devis-selection.devis-selection-bg-bardage::before {
  /* ...existing code... */
  filter: blur(10px) brightness(1.08) saturate(1.1);
}
/* ===== Devis Big Buttons (central selection) ===== */
#devis-selection .devis-big-btn {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 32px 0;
  font-size: 2.1rem;
  font-weight: 800;
  border-radius: 22px;
  background: linear-gradient(90deg, #0ea5e9 60%, #0284c7 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 18px rgba(14,165,233,0.13);
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(.4,0,.2,1), box-shadow 0.22s cubic-bezier(.4,0,.2,1), background 0.22s cubic-bezier(.4,0,.2,1);
  margin-bottom: 0;
  letter-spacing: 1px;
  opacity: 0;
  transform: translateY(30px);
  animation: btnFadeIn 0.8s cubic-bezier(.4,0,.2,1) forwards;
  position: relative; /* added */
  z-index: 1;         /* added */
}
#devis-selection .devis-big-btn:hover {
  background: linear-gradient(90deg, #0284c7 60%, #0ea5e9 100%);
  box-shadow: 0 8px 32px rgba(14,165,233,0.18);
  transform: scale(1.045) translateY(-2px);
}
#devis-selection .devis-big-btn:nth-child(1) { animation-delay: 0.2s; }
#devis-selection .devis-big-btn:nth-child(2) { animation-delay: 0.35s; }
#devis-selection .devis-big-btn:nth-child(3) { animation-delay: 0.5s; }

/* Containment for base banner area (added) */
#devis-selection { position: relative; overflow: hidden; }

/* Bardage slide animation (scoped to #devis-selection only) */
#devis-selection.devis-selection-bg-bardage {
  position: relative;
  overflow: hidden;
}
#devis-selection.devis-selection-bg-bardage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: none;
  opacity: 0;
  transform: translateX(100%) scale(1.08);
  animation: none;
  pointer-events: none;
  transition: opacity 0.2s linear;
  filter: blur(10px) brightness(1.08) saturate(1.1);
}
#devis-selection.devis-selection-bg-bardage.slide-in::before {
  background: url('image/bardagedevis.png') center/cover no-repeat;
  opacity: 1;
  animation-name: slideInBardageNew;
  animation-duration: 1.3s;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
  animation-fill-mode: forwards;
  animation-play-state: running;
}
#devis-selection.devis-selection-bg-bardage.slide-out::before {
  background: url('image/bardagedevis.png') center/cover no-repeat;
  opacity: 1;
  animation-name: slideOutBardageNew;
  animation-duration: 1.3s;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
  animation-fill-mode: forwards;
  animation-play-state: running;
}
@keyframes slideInBardageNew {
  from { transform: translateX(100%) scale(1.08); }
  to   { transform: translateX(0) scale(1.0); }
}
@keyframes slideOutBardageNew {
  from { transform: translateX(0) scale(1.0); }
  to   { transform: translateX(100%) scale(1.08); }
}
/* Isolation slide animation */
#devis-selection.devis-selection-bg-isolation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: none;
  opacity: 0;
  transform: translateX(100%) scale(1.08);
  animation: none;
  pointer-events: none;
  transition: opacity 0.2s linear;
}
#devis-selection.devis-selection-bg-isolation.slide-in::before {
  background: url('image/isolationdevis.jpeg') center/cover no-repeat;
  opacity: 1;
  animation-name: slideInIsolation;
  animation-duration: 1.3s;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
  animation-fill-mode: forwards;
  animation-play-state: running;
}
#devis-selection.devis-selection-bg-isolation.slide-out::before {
  background: url('image/isolationdevis.jpeg') center/cover no-repeat;
  opacity: 1;
  animation-name: slideOutIsolation;
  animation-duration: 1.3s;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
  animation-fill-mode: forwards;
  animation-play-state: running;
}
@keyframes slideInIsolation {
  from { transform: translateX(100%) scale(1.08); }
  to   { transform: translateX(0) scale(1.0); }
}
@keyframes slideOutIsolation {
  from { transform: translateX(0) scale(1.0); }
  to   { transform: translateX(100%) scale(1.08); }
}

/* Toiture slide animation */
#devis-selection.devis-selection-bg-toiture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: none;
  opacity: 0;
  transform: translateX(100%) scale(1.08);
  animation: none;
  pointer-events: none;
  transition: opacity 0.2s linear;
}
#devis-selection.devis-selection-bg-toiture.slide-in::before {
  background: url('image/toituredevis.png') center/cover no-repeat;
  opacity: 1;
  animation-name: slideInToiture;
  animation-duration: 1.3s;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
  animation-fill-mode: forwards;
  animation-play-state: running;
}
#devis-selection.devis-selection-bg-toiture.slide-out::before {
  background: url('image/toituredevis.png') center/cover no-repeat;
  opacity: 1;
  animation-name: slideOutToiture;
  animation-duration: 1.3s;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
  animation-fill-mode: forwards;
  animation-play-state: running;
}
@keyframes slideInToiture {
  from { transform: translateX(100%) scale(1.08); }
  to   { transform: translateX(0) scale(1.0); }
}
@keyframes slideOutToiture {
  from { transform: translateX(0) scale(1.0); }
  to   { transform: translateX(100%) scale(1.08); }
}

/* Bardage slide animation (clean, only bardagedevis.png) */
.devis-selection-bg-bardage {
  position: relative;
  overflow: hidden;
}
.devis-selection-bg-bardage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: none;
  opacity: 0;
  transform: translateX(100%) scale(1.08);
  animation: none;
  pointer-events: none;
  transition: opacity 0.2s linear;
}

/* Isolation slide animation (same structure as bardage) */
#devis-selection.devis-selection-bg-isolation {
  position: relative;
  overflow: hidden;
}
#devis-selection.devis-selection-bg-isolation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: none;
  opacity: 0;
  transform: translateX(100%) scale(1.08);
  animation: none;
  pointer-events: none;
  transition: opacity 0.2s linear;
}
#devis-selection.devis-selection-bg-isolation.slide-in::before {
  background: url('image/isolationdevis.jpeg') center/cover no-repeat;
  opacity: 1;
  animation-name: slideInIsolationNew;
  animation-duration: 1.3s;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
  animation-fill-mode: forwards;
  animation-play-state: running;
}
#devis-selection.devis-selection-bg-isolation.slide-out::before {
  background: url('image/isolationdevis.jpeg') center/cover no-repeat;
  opacity: 1;
  animation-name: slideOutIsolationNew;
  animation-duration: 1.3s;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
  animation-fill-mode: forwards;
  animation-play-state: running;
}
@keyframes slideInIsolationNew {
  from { transform: translateX(100%) scale(1.08); }
  to   { transform: translateX(0) scale(1.0); }
}
@keyframes slideOutIsolationNew {
  from { transform: translateX(0) scale(1.0); }
  to   { transform: translateX(100%) scale(1.08); }
}

/* Toiture slide animation (same structure as bardage) */
#devis-selection.devis-selection-bg-toiture {
  position: relative;
  overflow: hidden;
}
#devis-selection.devis-selection-bg-toiture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: none;
  opacity: 0;
  transform: translateX(100%) scale(1.08);
  animation: none;
  pointer-events: none;
  transition: opacity 0.2s linear;
}
#devis-selection.devis-selection-bg-toiture.slide-in::before {
  background: url('image/toituredevis.png') center/cover no-repeat;
  opacity: 1;
  animation-name: slideInToitureNew;
  animation-duration: 1.3s;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
  animation-fill-mode: forwards;
  animation-play-state: running;
}
#devis-selection.devis-selection-bg-toiture.slide-out::before {
  background: url('image/toituredevis.png') center/cover no-repeat;
  opacity: 1;
  animation-name: slideOutToitureNew;
  animation-duration: 1.3s;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
  animation-fill-mode: forwards;
  animation-play-state: running;
}
@keyframes slideInToitureNew {
  from { transform: translateX(100%) scale(1.08); }
  to   { transform: translateX(0) scale(1.0); }
}
@keyframes slideOutToitureNew {
  from { transform: translateX(0) scale(1.0); }
  to   { transform: translateX(100%) scale(1.08); }
}

/* Buttons hover special */
.btn[style*="font-size:1.18rem"]:hover {
  transform: scale(1.09) rotate(-2deg);
  background: linear-gradient(90deg, #fff 0%, #111 100%);
  color: #fff;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18), 0 1.5px 8px rgba(14,165,233,0.10);
}
/* Base */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Montserrat', Arial, sans-serif;
  background: linear-gradient(180deg, #111 0%, #0ea5e9 60%, #fff 100%);
  color: #1f2937;
  line-height: 1.6;
  font-size: 1.18rem;
}
h1,h2,h3 { color:#0f172a; font-weight:800; letter-spacing:0.5px; }
h1 { font-size:2.6rem; }
h2 { font-size:2.2rem; margin-bottom:14px; }
h3 { font-size:1.45rem; margin-bottom:8px; }
a { color: inherit; text-decoration: none; }
.container { width: 90%; max-width: 1000px; margin: auto; padding: 20px 0; }

/* Header */
header {
  background: linear-gradient(90deg, #0091ff 30%, #000000 100%);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(14,165,233,0.10);
  min-height: 68px;
}
header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  gap: 0;
}
header h1 {
  font-size: 1.7rem;
  letter-spacing: 0.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 0;
  text-align: left;
}
header nav {
  display: flex;
  gap: 24px;
}
header nav a {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 8px 18px;
  border-radius: 999px;
  transition: background .18s;
  opacity: .96;
}
header nav a:hover {
  background: #fff;
  color: #0284c7;
  opacity: 1;
}

/* Hero */
.hero { height: 240px; background:url("https://picsum.photos/1200/400?blur=3") center/cover no-repeat; display:grid; place-items:center; }
.hero .overlay { background:rgba(0,0,0,.55); color:#fff; padding:24px; border-radius:14px; text-align:center; }
.hero .btn { background:#111; color:#fff; padding:10px 18px; border-radius:8px; font-weight:bold; display:inline-block; margin-top:6px; transition: transform 0.32s cubic-bezier(.4,0,.2,1), box-shadow 0.32s cubic-bezier(.4,0,.2,1); }
.hero .btn:hover { background:#222; transform: scale(1.09) rotate(-2deg); box-shadow: 0 6px 24px rgba(0,0,0,0.18), 0 1.5px 8px rgba(14,165,233,0.10); }

/* Cards & grid */
.card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(14,165,233,0.07), 0 1px 3px rgba(0,0,0,0.03);
  max-width: 1400px;
  margin: 38px auto 0 auto;
  padding-left: 32px;
  padding-right: 32px;
  padding-top: 18px;
  padding-bottom: 18px;
  opacity: 0;
  transform: translateY(30px);
  animation: cardFadeIn 0.8s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay: 0.2s;
}
@keyframes cardFadeIn { to { opacity: 1; transform: none; } }
.card:nth-child(2) { animation-delay: 0.35s; }
.card:nth-child(3) { animation-delay: 0.5s; }
.card:nth-child(4) { animation-delay: 0.65s; }
.card { transition: box-shadow .18s; }
.card:hover { box-shadow: 0 8px 32px rgba(14,165,233,0.13), 0 2px 8px rgba(0,0,0,0.06); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:12px 0; }
.levels { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; }
.levels label { background:#eef2f7; padding:6px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:8px; }

/* N'applique pas la largeur 100% aux radios/checkbox */
input:not([type="radio"]):not([type="checkbox"]), select {
  width:100%; padding:10px; border:1px solid #d1d5db; border-radius:8px; font-size:1rem;
}
input:not([type="radio"]):not([type="checkbox"]):focus, select:focus {
  outline:none; border-color:#0ea5e9; box-shadow:0 0 0 2px rgba(14,165,233,.25);
}
.hint { color:#6b7280; font-size:.9rem; margin-top:2px; }

.radio-group { border:1px solid #e5e7eb; border-radius:12px; padding:12px; margin:10px 0; }
.radio-item { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:10px; cursor:pointer; }
.radio-item + .radio-item { margin-top:6px; }
.checkbox { display:flex; align-items:center; gap:8px; }

.btn {
  background: linear-gradient(90deg,#0ea5e9 60%,#0284c7 100%);
  color: #fff;
  padding: 12px 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.08rem;
  box-shadow: 0 2px 8px rgba(14,165,233,0.10);
  opacity: 0;
  transform: translateY(20px);
  animation: btnFadeIn 0.7s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay: 0.4s;
  transition: transform .18s, box-shadow .18s, background .18s;
}
@keyframes btnFadeIn { to { opacity: 1; transform: none; } }
.btn:hover {
  background: linear-gradient(90deg,#0284c7 60%,#0ea5e9 100%);
  box-shadow: 0 8px 24px rgba(14,165,233,0.18);
  transform: scale(1.045) translateY(-2px);
}
.btn.secondary { background: #6b7280; }
.btn.secondary:hover { background: #4b5563; }
.actions { margin-top:10px; }
.divider { height:1px; background:linear-gradient(90deg,transparent,#e5e7eb,transparent); margin:16px 0; }

.hidden { display:none !important; }
#simu-panels .slide-toggle {
  display: none;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(.4,0,.2,1);
}
#simu-panels .slide-toggle.active {
  display: block;
  opacity: 1;
  overflow: visible;
  transition: opacity 0.5s cubic-bezier(.4,0,.2,1);
  background: #fff !important; /* added */
}
.card #logo-ceoi { transition: box-shadow .18s, transform .22s cubic-bezier(.4,0,.2,1); }
.card #logo-ceoi:hover { box-shadow: 0 12px 32px rgba(14,165,233,0.18), 0 2px 12px rgba(14,165,233,0.13); transform: scale(1.13) rotate(-2deg); }

/* Tabs */
.tabs { display:flex; gap:8px; margin-bottom:8px; }
.tab { background:#e5e7eb; border:none; padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:600; }
.tab.active { background:#0ea5e9; color:#fff; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* Footer */
footer {
  background: linear-gradient(0deg, #026da3 60%, #000000 100%);
  color: #fff;
  text-align: center;
  padding: 24px 10px 18px 10px;
  margin-top: 48px;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 -2px 12px rgba(14,165,233,0.10);
}
/* ===== FIX ALIGNEMENT FORMULAIRES ===== */

/* Les éléments placés dans .grid s'alignent bien à gauche */
.card .grid {
  align-items: start;
  justify-items: start;
}

/* Groupes radio : empilement vertical, à gauche, sans colonne cachée */
fieldset.radio-group {
  /* Empiler proprement chaque option, aucune mise en colonnes */
  display: block !important;
  text-align: left !important;
  grid-template-columns: none !important;
}

/* Le titre du groupe prend toute la largeur et se colle au contenu */
fieldset.radio-group legend {
  width: 100%;
  margin: 0 0 6px 0;
  font-weight: 700;
  padding: 0;
}

/* Chaque option radio est une ligne gauche → droite, sans étirement bizarre */
fieldset.radio-group .radio-item {
  /* Chaque libellé à gauche du bouton, sans espace inutile */
  display: inline-flex !important;
  align-items: flex-start;
  gap: 8px;
  width: auto !important;
  max-width: 100% !important;
  justify-content: flex-start;
  white-space: normal;
  margin: 4px 0;
  text-indent: 0 !important;
  text-align: left !important;
}

fieldset.radio-group .radio-item input[type="radio"] {
  flex: 0 0 auto;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 2px 0 0 0; /* léger align-top */
}

/* Corrige le centrage vertical du bouton radio/checkbox */
input[type="radio"], input[type="checkbox"] {
  vertical-align: middle;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: initial;
  box-shadow: none;
}

/* Empêche tout héritage accidentel qui pousserait le texte à droite */
fieldset.radio-group, fieldset.radio-group * {
  text-align: left !important;
}

/* Dans les grilles, ne pas serrer les textes de checkbox/radio; étendre sur la largeur disponible */
.card .grid label.radio-item,
.card .grid label.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  width: auto;
  max-width: 100%;
}

/* Les longues lignes (ex: "Faux plafond avec peinture") prennent toute la ligne de la grille */
.card .grid label.checkbox {
  grid-column: 1 / -1;
}

/* Option : sur très petite largeur, garde l'empilement propre */
@media (max-width: 600px) {
  .card .grid { grid-template-columns: 1fr; }
}

/* Simulator white card hardening (Hostinger fallback) */
.devis-page #devis-header-bg,
.devis-page #devis-selection,
.devis-page #simu-panels {
  background: #fff; /* ensure continuous white card */
}
.devis-page #devis-selection,
.devis-page #simu-panels {
  border-radius: 22px;
  box-shadow: 0 4px 18px rgba(14,165,233,0.10);
  position: relative;
  z-index: 1; /* stay above banner ::before */
}
.devis-page hr.divider { background: #e5e7eb; }