/* ============================================================================
 * Calculateur IZI-PV — Refonte graphique premium v2
 * Design : charte ISY-PV (navy / bleu électrique / orange · Inter)
 * Par Snazzy Digital Agency.
 * Aucune classe/ID modifié → fonctionnalités JS 100% préservées.
 * ========================================================================== */

/* Variables partagées par les DEUX conteneurs racine (sinon la section basse,
   qui est un élément frère, n'hérite pas des variables → fond invisible). */
.calculateur-isypv,
.calculateur-isypv_bottom {
  --izi-navy:      #1c1f5a;
  --izi-navy-2:    #2a2f73;
  --izi-navy-deep: #0b0e36;
  --izi-blue:      #0438c7;
  --izi-blue-2:    #2b62f0;
  --izi-orange:    #ffb000;
  --izi-orange-2:  #ff8a00;
  --izi-green:     #18a558;
  --izi-ink:       #14173f;
  --izi-muted:     #6a6f9c;
  --izi-muted-2:   #9a9fc4;
  --izi-bg:        #f3f5fb;
  --izi-line:      #e7eaf5;
  --izi-line-2:    #d6dbec;
  --izi-radius:    28px;
  --izi-radius-md: 20px;
  --izi-radius-sm: 14px;
  --izi-shadow:    0 40px 90px -40px rgba(20, 23, 63, 0.45), 0 12px 32px -18px rgba(20, 23, 63, 0.25);
  --izi-shadow-sm: 0 8px 24px -12px rgba(20, 23, 63, 0.20);
  --izi-shadow-card: 0 24px 60px -30px rgba(20, 23, 63, 0.40);
  --izi-ease:      cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------------------------------------------------------
 * CONTENEUR PRINCIPAL — card flottante moderne (plus de grid figé 35/65)
 * ------------------------------------------------------------------------- */
.calculateur-isypv {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  position: relative;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--izi-ink);
  background: #fff;
  border-radius: var(--izi-radius);
  box-shadow: var(--izi-shadow);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
  isolation: isolate;
}

/* ----------------------------------------------------------------------------
 * HEADER — "Votre projet" + choix de box (pleine largeur, premium)
 * ------------------------------------------------------------------------- */
.calculateur-isypv_choix_box {
  position: relative;
  grid-column: 2 span;
  background:
    radial-gradient(900px 240px at 88% -40%, rgba(43, 98, 240, 0.55), transparent 70%),
    linear-gradient(120deg, var(--izi-navy) 0%, var(--izi-navy-deep) 100%);
  padding: 30px 36px;
  z-index: 1;
  display: flex;
  column-gap: 16px;
  align-items: stretch;
  flex-wrap: wrap;
  row-gap: 14px;
}
.calculateur-isypv_title {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  align-self: center;
  margin-right: auto;
  opacity: 0.92;
}

label[class^="calculateur-isypv_choix_box_"] {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  column-gap: 13px;
  align-items: center;
  position: relative;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  transition: transform 0.3s var(--izi-ease), border-color 0.3s var(--izi-ease), background-color 0.3s var(--izi-ease), box-shadow 0.3s var(--izi-ease);
  backdrop-filter: blur(8px);
  min-width: 210px;
}
label[class^="calculateur-isypv_choix_box_"]:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.3);
}
label[class^="calculateur-isypv_choix_box_"]:has(input:checked) {
  background: #fff;
  border-color: var(--izi-orange);
  box-shadow: 0 12px 30px -12px rgba(255, 176, 0, 0.7);
}
label.calculateur-isypv_choix_box_sans_rails { padding-top: 34px; }

label[class^="calculateur-isypv_choix_box_"] input[type="radio"] {
  accent-color: var(--izi-blue);
  width: 18px; height: 18px;
  cursor: pointer; flex-shrink: 0;
}
label[class^="calculateur-isypv_choix_box_"] img { flex-shrink: 0; filter: brightness(0) invert(1); transition: filter 0.3s var(--izi-ease); }
label[class^="calculateur-isypv_choix_box_"]:has(input:checked) img { filter: none; }

.calculateur-isypv_choix_box_legend {
  background: linear-gradient(120deg, var(--izi-orange) 0%, var(--izi-orange-2) 100%);
  padding: 5px;
  border-radius: 16px 16px 0 0;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--izi-navy);
  display: inline-block;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  text-align: center;
}
span.calculateur-isypv_choix_box_title {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  transition: color 0.3s var(--izi-ease);
}
span.calculateur-isypv_choix_box_subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
  font-weight: 500;
  transition: color 0.3s var(--izi-ease);
}
label:has(input:checked) span.calculateur-isypv_choix_box_title { color: var(--izi-navy); }
label:has(input:checked) span.calculateur-isypv_choix_box_subtitle { color: var(--izi-muted); }

/* ----------------------------------------------------------------------------
 * PANNEAU GAUCHE — paramètres (blanc, aéré, pas de clip-path)
 * ------------------------------------------------------------------------- */
.calculateur-isypv_col_left {
  position: relative;
  padding: 44px 40px;
  background: #fff;
  z-index: 1;
  border-right: 1px solid var(--izi-line);
}

.calculateur-isypv_field > label {
  display: inline-block;
  color: var(--izi-navy);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.calculateur-isypv_field.calculateur-isypv_field_couverture,
.calculateur-isypv_field.calculateur-isypv_field_format_pose,
.calculateur-isypv_field.calculateur-isypv_field_numbers {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--izi-line);
}
.calculateur-isypv_field_inline {
  display: flex;
  column-gap: 16px;
  align-items: center;
}
.calculateur-isypv_field_inline > label { margin-bottom: 0; }

/* Champ rails (compact) */
.calculateur-isypv_field_rails select {
  font-size: 14px;
  padding: 0.5rem 0.9rem;
  border-radius: 12px;
  border: 1.5px solid var(--izi-line);
  background: var(--izi-bg);
  color: var(--izi-navy);
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.calculateur-isypv_field_rails select:focus {
  outline: none;
  border-color: var(--izi-blue);
  box-shadow: 0 0 0 4px rgba(4, 56, 199, 0.12);
}
.calculateur-isypv_field_rails_quantite {
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--izi-muted);
  display: none;
}

/* Module */
.calculateur-isypv_field_module {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--izi-navy);
  font-weight: 600;
  font-size: 14px;
}
.calculateur-isypv_field_module input#module_longueur {
  font-size: 15px;
  padding: 0.5rem 0.7rem;
  border-radius: 12px;
  border: 1.5px solid var(--izi-line);
  background: var(--izi-bg);
  color: var(--izi-navy);
  width: 88px;
  box-sizing: border-box;
  font-weight: 800;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.calculateur-isypv_field_module input#module_longueur:focus {
  outline: none;
  border-color: var(--izi-blue);
  box-shadow: 0 0 0 4px rgba(4, 56, 199, 0.12);
}
.calculateur-isypv_field_module em {
  font-size: 12px;
  color: var(--izi-muted-2);
  font-style: normal;
}

/* Couvertures — grille de cards */
ul.calculateur-isypv_field_couverture {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-inline-start: 0;
  margin: 0;
}
.calculateur-isypv_field_couverture li {
  border-radius: 16px;
  transition: transform 0.25s var(--izi-ease);
  cursor: pointer;
  max-width: none;
}
.calculateur-isypv_field_couverture li figure {
  margin: 0;
  padding: 14px 8px 10px;
  border-radius: 16px;
  border: 1.5px solid var(--izi-line);
  background: #fff;
  transition: border-color 0.25s var(--izi-ease), box-shadow 0.25s var(--izi-ease), background-color 0.25s var(--izi-ease);
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.calculateur-isypv_field_couverture li img {
  cursor: pointer;
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.calculateur-isypv_field_couverture figcaption {
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  color: var(--izi-muted);
  font-weight: 600;
}
.calculateur-isypv_field_couverture li:hover { transform: translateY(-3px); }
.calculateur-isypv_field_couverture li:hover figure {
  border-color: rgba(24, 165, 88, 0.45);
  box-shadow: 0 12px 28px -14px rgba(24, 165, 88, 0.45);
}
.calculateur-isypv_field_couverture li.active figure {
  border-color: var(--izi-green);
  background: rgba(24, 165, 88, 0.06);
  box-shadow: 0 0 0 2px rgba(24, 165, 88, 0.25), 0 12px 28px -14px rgba(24, 165, 88, 0.4);
}
.calculateur-isypv_field_couverture li.active figcaption {
  color: var(--izi-green);
  font-weight: 700;
}

/* Nombre ligne / colonne */
.calculateur-isypv_field_numbers {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.calculateur-isypv_field_number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 20px;
}
.calculateur-isypv_field_number > label {
  color: var(--izi-navy);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* Format de pose */
.calculateur-isypv_field_format_pose ul {
  list-style: none;
  padding-inline-start: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calculateur-isypv_field_format_pose ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--izi-bg);
  transition: background-color 0.2s ease;
}
.calculateur-isypv_field_format_pose ul li:hover { background: #e9edf9; }
.calculateur-isypv_field_format_pose ul label {
  cursor: pointer;
  font-size: 14px;
  color: var(--izi-navy);
  font-weight: 600;
  flex: 1;
}
.calculateur-isypv_field_format_pose input[type="radio"] {
  accent-color: var(--izi-blue);
  width: 17px; height: 17px;
  cursor: pointer;
}

.calculateur-isypv_field_mode { display: none; }
.calculateur-isypv_field_mode > label { color: var(--izi-navy); font-size: 14px; font-weight: 700; }
.calculateur-isypv_field_mode > .libelle-installation-panneau { margin: 10px 0; height: 2rem; font-size: 22px; line-height: 32px; }

/* Compteurs +/- premium */
[data-quantity] {
  position: relative;
  width: 100%;
  max-width: 9.5rem;
  padding: 0; margin: 0; border: 0;
}
[data-quantity] legend { display: none; }
[data-quantity] input,
[data-quantity] .number-input {
  font-size: 20px;
  height: 2.9rem;
  padding: 0 3.2rem;
  border-radius: 14px;
  border: 1.5px solid var(--izi-line);
  background: var(--izi-bg);
  color: var(--izi-navy);
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  font-weight: 800;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
[data-quantity] input:focus,
[data-quantity] .number-input:focus {
  outline: none;
  border-color: var(--izi-blue);
  box-shadow: 0 0 0 4px rgba(4, 56, 199, 0.12);
}
[data-quantity] input[type=number]::-webkit-inner-spin-button,
[data-quantity] input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
[data-quantity] input[type=number] { -moz-appearance: textfield; }

[data-quantity] button,
[data-quantity] .btn {
  position: absolute;
  width: 2.2rem; height: 2.2rem;
  top: 0.35rem;
  display: flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; border: 0;
  background: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  border-radius: 11px;
  cursor: pointer;
  box-shadow: var(--izi-shadow-sm);
  transition: background-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
[data-quantity] button:before,
[data-quantity] .btn:before {
  content: "";
  position: absolute;
  inset: 0;
  text-indent: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
[data-quantity] button.decrementer:before,
[data-quantity] .decrementer:before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path d="M2 7h10" fill="none" stroke="rgb(4,56,199)" stroke-width="2.6" stroke-linecap="round"/></svg>');
}
[data-quantity] button.incrementer:before,
[data-quantity] .incrementer:before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path d="M2 7h10M7 2v10" fill="none" stroke="rgb(4,56,199)" stroke-width="2.6" stroke-linecap="round"/></svg>');
}
[data-quantity] button:hover,
[data-quantity] .btn:hover { background: var(--izi-blue); }
[data-quantity] button.decrementer:hover:before,
[data-quantity] .decrementer:hover:before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path d="M2 7h10" fill="none" stroke="white" stroke-width="2.6" stroke-linecap="round"/></svg>');
}
[data-quantity] button.incrementer:hover:before,
[data-quantity] .incrementer:hover:before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path d="M2 7h10M7 2v10" fill="none" stroke="white" stroke-width="2.6" stroke-linecap="round"/></svg>');
}
[data-quantity] button:active,
[data-quantity] .btn:active { transform: scale(0.9); }
[data-quantity] button:focus,
[data-quantity] .btn:focus { outline: none; }
[data-quantity] button.decrementer,
[data-quantity] .decrementer { left: 0.35rem; }
[data-quantity] button.incrementer,
[data-quantity] .incrementer { right: 0.35rem; }

/* ----------------------------------------------------------------------------
 * PANNEAU DROIT — résultats (navy riche, grand impact)
 * ------------------------------------------------------------------------- */
.calculateur-isypv_col_right {
  position: relative;
  padding: 44px 40px;
  background:
    radial-gradient(700px 360px at 110% 0%, rgba(43, 98, 240, 0.40), transparent 60%),
    radial-gradient(600px 400px at -10% 110%, rgba(255, 176, 0, 0.12), transparent 60%),
    linear-gradient(165deg, var(--izi-navy-2) 0%, var(--izi-navy-deep) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  row-gap: 38px;
  overflow: hidden;
}

.calculateur-isypv_boxes_details_title {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.92;
}

/* Carte blanche résultats */
.calculateur-isypv_boxes_details_wrapper {
  position: relative;
  color: var(--izi-navy);
  border-radius: var(--izi-radius-md);
  background: #fff;
  padding: 36px 26px;
  box-shadow: var(--izi-shadow-card);
}
.calculateur-isypv_boxes_details_cartons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.calculateur-isypv_boxes_carre,
.calculateur-isypv_boxes_triangle {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px;
  border-radius: 16px;
  transition: background-color 0.25s var(--izi-ease);
}
.calculateur-isypv_boxes_carre { border-right: 1px solid var(--izi-line); }
.calculateur-isypv_boxes_infos {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 16px;
  gap: 2px;
}
.calculateur-isypv_boxes_carre_shape,
.calculateur-isypv_boxes_triangle_shape {
  width: 120px; height: 120px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: transform 0.35s var(--izi-ease), opacity 0.3s var(--izi-ease);
}
.calculateur-isypv_boxes_triangle_shape { width: 134px; }
.calculateur-isypv_boxes_carre:hover .calculateur-isypv_boxes_carre_shape,
.calculateur-isypv_boxes_triangle:hover .calculateur-isypv_boxes_triangle_shape {
  transform: scale(1.05) rotate(-2deg);
}

/* Formes colorées — chemins relatifs (plugin autonome) */
.calculateur-isypv_boxes_carre_shape.couleur_orange    { background-image: url(../images/carre-orange.svg); }
.calculateur-isypv_boxes_triangle_shape.couleur_orange { background-image: url(../images/triangle-orange.svg); }
.calculateur-isypv_boxes_carre_shape.couleur_blue      { background-image: url(../images/carre-bleu.svg); }
.calculateur-isypv_boxes_triangle_shape.couleur_blue   { background-image: url(../images/triangle-bleu.svg); }
.calculateur-isypv_boxes_carre_shape.couleur_green     { background-image: url(../images/carre-vert.svg); }
.calculateur-isypv_boxes_triangle_shape.couleur_green  { background-image: url(../images/triangle-vert.svg); }
.calculateur-isypv_boxes_carre_shape.couleur_yellow    { background-image: url(../images/carre-jaune.svg); }
.calculateur-isypv_boxes_triangle_shape.couleur_yellow { background-image: url(../images/triangle-jaune.svg); }
.calculateur-isypv_boxes_carre_shape.couleur_grey      { background-image: url(../images/carre-gris.svg); }
.calculateur-isypv_boxes_triangle_shape.couleur_grey   { background-image: url(../images/triangle-gris.svg); }
.calculateur-isypv_boxes_carre_shape.couleur_orange.isybox_compact    { background-image: url(../images/rond-orange.svg); }
.calculateur-isypv_boxes_triangle_shape.couleur_orange.isybox_compact { background-image: url(../images/croix-orange.svg); }
.calculateur-isypv_boxes_carre_shape.couleur_green.isybox_compact     { background-image: url(../images/rond-vert.svg); }
.calculateur-isypv_boxes_triangle_shape.couleur_green.isybox_compact  { background-image: url(../images/croix-vert.svg); }
.calculateur-isypv_boxes_carre_shape.couleur_blue.isybox_compact      { background-image: url(../images/rond-bleu.svg); }
.calculateur-isypv_boxes_triangle_shape.couleur_blue.isybox_compact   { background-image: url(../images/croix-bleu.svg); }
.calculateur-isypv_boxes_carre_shape.couleur_yellow.isybox_compact    { background-image: url(../images/rond-jaune.svg); }
.calculateur-isypv_boxes_triangle_shape.couleur_yellow.isybox_compact { background-image: url(../images/croix-jaune.svg); }
.calculateur-isypv_boxes_carre_shape.couleur_grey.isybox_compact      { background-image: url(../images/rond-gris.svg); }
.calculateur-isypv_boxes_triangle_shape.couleur_grey.isybox_compact   { background-image: url(../images/croix-gris.svg); }

.calculateur-isypv_boxes_carre_carton_libelle,
.calculateur-isypv_boxes_triangle_carton_libelle {
  color: var(--izi-navy);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.calculateur-isypv_boxes_carre_carton_reference,
.calculateur-isypv_boxes_triangle_carton_reference {
  color: var(--izi-muted);
  font-size: 12px;
  font-weight: 600;
}
/* GROS chiffres — impact maximal */
.calculateur-isypv_boxes_carre_nb_carton,
.calculateur-isypv_boxes_triangle_nb_carton {
  color: var(--izi-blue);
  font-size: 82px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-top: 10px;
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-variant-numeric: tabular-nums;
}

/* Type de fixation + Installation */
.calculateur-isypv_fixation_details {
  display: flex;
  column-gap: 36px;
  flex-wrap: wrap;
  row-gap: 24px;
}
.calculateur-isypv_fixation_details_title,
.calculateur-isypv_installation_details_title {
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 14px;
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.calculateur-isypv_installation_details_installation { flex-grow: 1; }
.calculateur-isypv_fixation_details_image {
  background: #fff;
  border-radius: var(--izi-radius-sm);
  padding: 14px;
  text-align: center;
  box-shadow: var(--izi-shadow-sm);
}
.calculateur-isypv_installation_details_image {
  display: flex;
  column-gap: 20px;
  align-items: center;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

/* Loader */
.calculateur-isypv_loader {
  display: none;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: conic-gradient(#0000 10%, var(--izi-blue));
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
          mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
  animation: izipv-spin 1s infinite linear;
}
@keyframes izipv-spin { to { transform: rotate(1turn); } }
.calculateur-isypv_boxes_details_wrapper.loading .calculateur-isypv_loader,
.isypv_boxes_details_liste_quantites_wrapper.loading .calculateur-isypv_loader {
  display: block;
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  z-index: 3;
}
.calculateur-isypv_boxes_details_wrapper.loading:after,
.isypv_boxes_details_liste_quantites_wrapper.loading:after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: var(--izi-radius-md);
  backdrop-filter: blur(2px);
  z-index: 2;
}
.calculateur-isypv_boxes_details_wrapper.loading .calculateur-isypv_boxes_carre_shape,
.calculateur-isypv_boxes_details_wrapper.loading .calculateur-isypv_boxes_triangle_shape { opacity: 0.3; }

/* Pop des chiffres */
.calculateur-isypv_boxes_carre_nb_carton.izipv-bump,
.calculateur-isypv_boxes_triangle_nb_carton.izipv-bump {
  animation: izipvBump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes izipvBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.3); color: var(--izi-green); }
  100% { transform: scale(1); }
}

/* ----------------------------------------------------------------------------
 * SECTION BASSE — Domaine d'emploi + Liste de matériel (CARDS CLAIRES, lisibles)
 * ------------------------------------------------------------------------- */
.calculateur-isypv_bottom {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) 1.6fr;
  gap: 24px;
  margin-top: 24px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--izi-ink);
}

.calculateur-domaine-emploi,
.isypv_boxes_details_liste_quantites_wrapper {
  background: #fff;
  border: 1px solid var(--izi-line);
  border-radius: var(--izi-radius-md);
  padding: 30px 28px;
  box-shadow: var(--izi-shadow-sm);
  position: relative;
}

.calculateur-domaine-emploi-title,
.calculateur-isypv_liste_quantites_title {
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 18px;
  color: var(--izi-navy);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.calculateur-domaine-emploi-title:before,
.calculateur-isypv_liste_quantites_title:before {
  content: "";
  width: 22px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--izi-blue), var(--izi-orange));
}

/* Domaine d'emploi */
.calculateur-domaine-emploi table {
  width: 100%; max-width: 100%;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.calculateur-domaine-emploi table tr > td {
  border: 0;
  padding: 9px 12px !important;
  font-size: 13.5px;
  color: var(--izi-ink);
}
.calculateur-domaine-emploi table tr > td:first-child { font-weight: 600; color: var(--izi-muted); }
.calculateur-domaine-emploi table tr > td:last-child { text-align: right; font-weight: 800; color: var(--izi-navy); }
.calculateur-domaine-emploi table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--izi-line) !important; }
.calculateur-domaine-emploi-note {
  margin-top: 16px;
  font-size: 11.5px;
  color: var(--izi-muted-2);
  line-height: 1.5;
}

/* Liste matériel */
.calculateur-isypv_boxes_details_liste_quantites table:not(.variations) {
  width: 100%;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.calculateur-isypv_boxes_details_liste_quantites table thead td {
  padding: 0 12px 12px 12px;
  border: 0;
  color: var(--izi-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.calculateur-isypv_boxes_details_liste_quantites table tbody td {
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--izi-line);
}
.calculateur-isypv_boxes_details_liste_quantites table tbody tr td {
  color: var(--izi-ink);
  font-size: 13px;
  font-weight: 500;
}
.calculateur-isypv_boxes_details_liste_quantites table tbody tr td:first-child { font-weight: 700; color: var(--izi-navy); }
.calculateur-isypv_boxes_details_liste_quantites table tbody tr td:last-child {
  text-align: center;
  font-weight: 800;
  color: var(--izi-blue);
}
.calculateur-isypv_boxes_details_liste_quantites table tbody tr { transition: background-color 0.16s ease; }
.calculateur-isypv_boxes_details_liste_quantites table tbody tr:hover { background: var(--izi-bg); }

/* Table rail support (compact) */
.calculateur-isypv_boxes_details_liste_quantites_rails {
  margin-top: 18px;
  background: var(--izi-bg);
  border-radius: 12px;
  overflow: hidden;
}
.calculateur-isypv_boxes_details_liste_quantites table.calculateur-isypv_boxes_details_liste_quantites_rails thead td {
  color: var(--izi-navy);
  font-weight: 800;
  padding: 14px 16px 8px;
}
.calculateur-isypv_boxes_details_liste_quantites table.calculateur-isypv_boxes_details_liste_quantites_rails tbody td { border-bottom: 0; }
.calculateur-isypv_boxes_details_liste_quantites table.calculateur-isypv_boxes_details_liste_quantites_rails tbody tr td {
  color: var(--izi-navy);
  padding: 6px 16px 14px;
}
.calculateur-isypv_boxes_details_liste_quantites table.calculateur-isypv_boxes_details_liste_quantites_rails tbody tr td:last-child { color: var(--izi-blue); }

/* ----------------------------------------------------------------------------
 * TOOLTIP
 * ------------------------------------------------------------------------- */
.calculateur-isypv_field_rails label { position: relative; }
.tooltip::after {
  content: "";
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNC4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2ZpbGw6IzFDMUY1QTt9DQo8L3N0eWxlPg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTTI1NiwwQzExNC44LDAsMCwxMTQuOCwwLDI1NnMxMTQuOCwyNTYsMjU2LDI1NnMyNTYtMTE0LjgsMjU2LTI1NlMzOTcuMiwwLDI1NiwweiBNMjU2LDQ2MC44DQoJYy0xMTIuOSwwLTIwNC44LTkxLjktMjA0LjgtMjA0LjhTMTQzLjEsNTEuMiwyNTYsNTEuMlM0NjAuOCwxNDMuMSw0NjAuOCwyNTZTMzY4LjksNDYwLjgsMjU2LDQ2MC44TDI1Niw0NjAuOHogTTM1Ni44LDE4Ni40DQoJYzcuNiw0My41LTEzLDg2LjktNTEuNCwxMDguMWMtOS42LDUuMy0xNywxMy0yMC44LDIxLjhjLTQuMiw5LjYtMTMuNiwxNS40LTIzLjUsMTUuNGMtMy40LDAtNi45LTAuNy0xMC4yLTIuMQ0KCWMtMTMtNS42LTE4LjktMjAuNy0xMy4zLTMzLjdjOC4zLTE5LjEsMjMuNi0zNS41LDQzLjEtNDYuM2MxOS41LTEwLjgsMjkuNi0zMi4xLDI1LjctNTQuNGMtMy41LTIwLjEtMjAuNy0zNy4zLTQwLjktNDAuOQ0KCWMtMTUuNS0yLjctMzAuNiwxLjItNDIuNCwxMS4xYy0xMS42LDkuOC0xOC4zLDI0LjEtMTguMywzOS4yYzAsMTQuMS0xMS41LDI1LjYtMjUuNiwyNS42cy0yNS42LTExLjUtMjUuNi0yNS42DQoJYzAtMzAuMywxMy4zLTU4LjksMzYuNi03OC40YzIzLjItMTkuNSw1My45LTI3LjcsODQuMi0yMi4zQzMxNS42LDExMS4zLDM0OS41LDE0NS4yLDM1Ni44LDE4Ni40TDM1Ni44LDE4Ni40eiBNMjgxLjYsMzg0DQoJYzAsMTQuMS0xMS41LDI1LjYtMjUuNiwyNS42cy0yNS42LTExLjUtMjUuNi0yNS42YzAtMTQuMSwxMS41LTI1LjYsMjUuNi0yNS42UzI4MS42LDM2OS45LDI4MS42LDM4NHoiLz4NCjwvc3ZnPg0K);
  background-size: contain;
  display: inline-block;
  width: 15px; height: 15px;
  vertical-align: text-top;
  margin-left: 7px;
  cursor: help;
}
.tooltip .tooltiptext {
  visibility: hidden;
  opacity: 0;
  width: 280px;
  background: var(--izi-navy);
  color: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  position: absolute;
  left: 100%;
  top: -8px;
  z-index: 5;
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  margin-left: 8px;
  box-shadow: var(--izi-shadow-card);
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }

/* ----------------------------------------------------------------------------
 * RESPONSIVE
 * ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .calculateur-isypv { grid-template-columns: 1fr 1.15fr; }
  .calculateur-isypv_boxes_carre_nb_carton,
  .calculateur-isypv_boxes_triangle_nb_carton { font-size: 64px; }
}
@media (max-width: 900px) {
  .calculateur-isypv { display: block; }
  .calculateur-isypv_choix_box { flex-wrap: wrap; row-gap: 12px; padding: 26px; }
  .calculateur-isypv_title { flex-basis: 100%; margin-right: 0; }
  label[class^="calculateur-isypv_choix_box_"] { flex: 1 1 calc(50% - 8px); min-width: 0; }
  label.calculateur-isypv_choix_box_sans_rails { padding-top: 40px; }
  .calculateur-isypv_col_left { padding: 32px 26px; border-right: 0; border-bottom: 1px solid var(--izi-line); }
  .calculateur-isypv_col_right { padding: 36px 26px; }
  .calculateur-isypv_bottom { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 560px) {
  .calculateur-isypv { border-radius: 20px; }
  ul.calculateur-isypv_field_couverture { gap: 10px; }
  .calculateur-isypv_field_couverture li img { width: 46px; height: 46px; }
  label[class^="calculateur-isypv_choix_box_"] { flex-direction: column; align-items: flex-start; }
  .calculateur-isypv_boxes_details_cartons { gap: 10px; }
  .calculateur-isypv_boxes_carre { border-right: 0; border-bottom: 1px solid var(--izi-line); padding-bottom: 16px; }
  .calculateur-isypv_boxes_carre_shape,
  .calculateur-isypv_boxes_triangle_shape { width: 96px; height: 96px; }
  .calculateur-isypv_boxes_triangle_shape { width: 108px; }
  .calculateur-isypv_boxes_carre_nb_carton,
  .calculateur-isypv_boxes_triangle_nb_carton { font-size: 58px; }
  .calculateur-isypv_boxes_details_liste_quantites { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tooltip .tooltiptext { width: 200px; }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .calculateur-isypv *, .calculateur-isypv *::before, .calculateur-isypv *::after,
  .calculateur-isypv_bottom * { animation: none !important; transition: none !important; }
}