/* ==========================================================================
   Calculateur de prix par heure — scope .cp
   Feuille autonome, chargee par la page /calculateur-prix.
   ========================================================================== */

.cp {
  --cp-ink: #4A4A4A;
  --cp-ink-2: #666666;
  --cp-meta: #999999;
  --cp-green: #43AA8B;
  --cp-green-dark: #216051;
  --cp-green-bg: #EEF6F4;
  --cp-brown: #CA9E67;
  --cp-brown-dark: #A97E45;
  --cp-beige: #F9F5EF;
  --cp-rule: #EAD8C2;
  --cp-dash: #DFC5A4;
  --cp-alerte: #87180F;
  --cp-display: "Euclid Flex Medium", "Euclid Flex", sans-serif;
  --cp-text: "Suisse intl", Arial, sans-serif;
  --cp-medium: "Suisse intl Medium", "Suisse intl", Arial, sans-serif;

  font-family: var(--cp-text); font-size: 16px; line-height: 24px; color: var(--cp-ink);
}
.cp *, .cp *::before, .cp *::after { box-sizing: border-box; }
.cp p { margin: 0; font-size: 16px; line-height: 24px; color: var(--cp-ink); }
.cp a { color: var(--cp-green); }
.cp a:hover { color: var(--cp-green-dark); }

.cp-small { font-size: 13px; line-height: 19px; color: var(--cp-ink-2); }
.cp-eyebrow {
  font-family: var(--cp-medium); font-weight: 500; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cp-brown-dark);
}

/* --- Disposition --------------------------------------------------------- */
.cp-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 32px; align-items: start;
}
.cp-carte { background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.1); padding: clamp(20px, 3vw, 32px); }
.cp-carte + .cp-carte { margin-top: 16px; }
.cp-carte__titre { font-family: var(--cp-display); font-weight: 500; font-size: 22px; line-height: 28px; display: block; margin-bottom: 4px; }

/* --- Champs -------------------------------------------------------------- */
.cp-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; margin-top: 18px; }
.cp-champ { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.cp-champ--large { grid-column: 1 / -1; }
.cp .cp-champ > span { font-family: var(--cp-medium); font-weight: 500; font-size: 14px; color: var(--cp-ink); }
.cp .cp-champ input,
.cp .cp-champ select {
  height: 46px; border: 1px solid var(--cp-rule); border-radius: 0; padding: 0 12px;
  font-family: var(--cp-text); font-size: 16px; color: var(--cp-ink); background: #fff;
  outline: none; transition: border-color .3s ease-in-out; width: 100%;
}
.cp .cp-champ input:focus,
.cp .cp-champ select:focus { border-color: var(--cp-green); }
.cp .cp-champ__aide { font-size: 13px; color: var(--cp-ink-2); }
.cp-fieldset { border: none; padding: 0; margin: 22px 0 0; }
.cp-fieldset legend {
  font-family: var(--cp-medium); font-weight: 500; font-size: 15px; color: var(--cp-ink);
  padding: 0; margin-bottom: 2px; float: none; width: auto;
}
.cp-fieldset__aide { font-size: 13px; line-height: 19px; color: var(--cp-ink-2); }

/* --- Résultat ------------------------------------------------------------ */
.cp-resultat {
  position: sticky; top: 140px; background: var(--cp-green-bg);
  border-top: 6px solid var(--cp-green); padding: clamp(20px, 3vw, 32px);
}
.cp-res__attente { color: var(--cp-ink-2); }
/* Tableau comparatif : une seule grille a trois colonnes, donc les deux
   offres restent alignees ligne a ligne quelle que soit la longueur des
   libelles. La colonne cAH est marquee par un fond et un filet. */
.cp-tab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(76px, auto) minmax(84px, auto); }
/* Seules les rangees se dissolvent dans la grille : appliquer display:contents
   a tous les enfants ferait perdre son grid-column aux intertitres, ce qui
   decale toutes les colonnes suivantes. */
.cp-tab > .cp-tab__entete,
.cp-tab > .cp-tab__phare,
.cp-tab > .cp-tab__ligne { display: contents; }

/* Les cellules remplissent toute la rangee (pas de align-self: center, qui
   laisserait chaque boite a sa hauteur naturelle et decalerait les filets
   d'une colonne a l'autre). Le contenu est centre par le flex interne. */
.cp-tab__entete > span,
.cp-tab__phare > span,
.cp-tab__ligne > span {
  padding: 8px 10px; align-self: stretch;
  display: flex; align-items: center;
}
.cp-tab__libelle { justify-content: flex-start; }
.cp-tab__val { justify-content: flex-end; }

.cp-tab__entete > span {
  padding-top: 0; padding-bottom: 12px; align-items: flex-end;
  font-family: var(--cp-medium); font-weight: 500; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--cp-ink-2); text-align: right;
}
.cp-tab__col--cah {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  color: var(--cp-green-dark); background: #fff; border-top: 3px solid var(--cp-green);
  padding-top: 10px !important;
}
/* Les deux en-tetes suivent la meme structure : le nom, puis la pastille
   de provenance. La colonne de gauche reste neutre, celle de l'ecole verte. */
.cp-tab__col { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cp-tab__col b { font-family: var(--cp-medium); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--cp-ink); }
.cp-tab__col--cah b { color: var(--cp-green-dark); }
.cp-tab__col em {
  font-style: normal; font-size: 10px; letter-spacing: .08em;
  background: var(--cp-green); color: #fff; padding: 1px 6px;
}
.cp-tab__pastille--neutre { background: var(--cp-rule) !important; color: var(--cp-ink) !important; }

.cp-tab__libelle { text-align: left; font-size: 15px; line-height: 21px; }
.cp-tab__val { text-align: right; font-family: var(--cp-medium); font-weight: 500; white-space: nowrap; }
.cp-tab__val--cah { background: #fff; }

.cp-tab__ligne > span { border-top: 1px solid var(--cp-rule); font-size: 15px; }
.cp-tab__ligne--sous .cp-tab__libelle { padding-left: 22px; color: var(--cp-ink-2); font-size: 14px; }
.cp-tab__ligne--sous .cp-tab__val { font-family: var(--cp-text); font-weight: 400; color: var(--cp-ink-2); font-size: 14px; }
.cp-tab__ligne--second > span { padding-bottom: 14px; }

/* Indicateur principal : la ligne qui doit sauter aux yeux */
.cp-tab__phare > span {
  padding-top: 14px; padding-bottom: 6px; border-top: 1px solid var(--cp-rule);
}
.cp-tab__phare .cp-tab__libelle {
  font-family: var(--cp-medium); font-weight: 500; font-size: 15px;
}
.cp-tab__phare .cp-tab__val {
  font-family: var(--cp-display); font-weight: 500; font-size: clamp(22px, 3.4vw, 30px); line-height: 1.1;
}
.cp-tab__phare .cp-tab__val--cah { color: var(--cp-green-dark); }

.cp-tab__groupe {
  grid-column: 1 / -1; margin-top: 18px; padding: 0 10px 4px;
  font-family: var(--cp-medium); font-weight: 500; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cp-brown-dark);
}

.cp-res__verdict {
  font-family: var(--cp-display); font-weight: 500; font-size: 19px; line-height: 26px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--cp-rule);
}
.cp-res__details { margin-top: 14px; font-size: 14px; line-height: 21px; }
.cp-res__details summary { cursor: pointer; font-family: var(--cp-medium); font-weight: 500; color: var(--cp-green); }
.cp-res__details p { margin-top: 8px; font-size: 14px; line-height: 21px; }
.cp-res__sefri { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--cp-rule); }
.cp-res__sefri .cp-small { margin-top: 10px; }
.cp-res__alertes { margin-top: 20px; padding: 14px 16px; background: #fff; border-left: 4px solid var(--cp-brown); }
.cp-res__alertes ul { margin: 0; padding-left: 18px; }
.cp-res__alertes li { font-size: 14px; line-height: 21px; padding: 3px 0; }

/* --- Envoi facultatif ---------------------------------------------------- */
.cp-envoi { margin-top: 16px; background: var(--cp-beige); padding: clamp(20px, 3vw, 32px); }
.cp-envoi[hidden] { display: none; }
.cp .cp-bouton {
  font-family: var(--cp-medium); font-weight: 500; font-size: 16px; background: none;
  color: var(--cp-green); border: 2px solid var(--cp-green); border-radius: 50px;
  padding: 12px 24px; cursor: pointer; transition: all .3s ease-in-out;
}
.cp .cp-bouton:hover, .cp .cp-bouton:focus { background: var(--cp-green); color: #fff; }
.cp .cp-bouton--plein {
  background: var(--cp-green); color: #fff; border-color: var(--cp-green);
  box-shadow: 0 4px 12px rgba(0,0,0,.2); font-size: 18px; padding: 14px 36px;
}
.cp .cp-bouton--plein:hover, .cp .cp-bouton--plein:focus { background: var(--cp-green-dark); box-shadow: none; }
.cp-consentement { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 14px; line-height: 21px; }
.cp-consentement input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.cp-erreur { color: var(--cp-alerte); font-size: 14px; }
.cp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cp-mentions { margin-top: 32px; padding: 18px; border: 1px dashed var(--cp-dash); }
.cp-mentions p + p { margin-top: 8px; }

@media (max-width: 1023.98px) {
  .cp-resultat { position: static; }
}

/* Sous 560 px, trois colonnes ne tiennent pas : le libelle passe sur sa
   propre ligne et les deux valeurs se partagent la largeur en dessous. */
@media (max-width: 559.98px) {
  .cp-tab { grid-template-columns: 1fr 1fr; }
  .cp-tab__entete > span:first-child { display: none; }
  .cp-tab__libelle { grid-column: 1 / -1; padding: 12px 10px 0; }
  .cp-tab__ligne > .cp-tab__val,
  .cp-tab__phare > .cp-tab__val { border-top: none; padding-top: 2px; }
  .cp-tab__ligne > .cp-tab__libelle,
  .cp-tab__phare > .cp-tab__libelle { border-top: 1px solid var(--cp-rule); }
  .cp-tab__ligne--sous .cp-tab__libelle { padding-left: 10px; }
  .cp-tab__val { text-align: left; padding-left: 10px; }
  .cp-tab__val--cah { text-align: right; }
  .cp-tab__phare .cp-tab__val { font-size: 26px; }
}

/* --- Choix des modules couverts par l'offre ------------------------------ */
.cp-modules { display: flex; flex-direction: column; margin-top: 12px; }
.cp-module {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--cp-rule); margin: 0; cursor: pointer;
}
.cp-module input { width: 18px; height: 18px; margin: 0; }
.cp-module__nom { font-size: 15px; line-height: 20px; }
.cp-module__h { font-size: 13px; color: var(--cp-ink-2); white-space: nowrap; }
.cp-module input:not(:checked) ~ .cp-module__nom,
.cp-module input:not(:checked) ~ .cp-module__h { color: var(--cp-meta); text-decoration: line-through; }

/* --- Boîte verdict ------------------------------------------------------- */
.cp-verdict {
  margin-top: 22px; background: #fff; border-top: 4px solid var(--cp-green);
  box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 22px;
}
.cp-verdict--egal { border-top-color: var(--cp-brown); }
.cp-verdict--defavorable { border-top-color: var(--cp-brown-dark); }
.cp-verdict--neutre { border-top-color: var(--cp-rule); }

.cp-verdict__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cp-verdict__chapeau {
  font-family: var(--cp-medium); font-weight: 500; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cp-brown-dark);
}
.cp-verdict__chiffre {
  font-family: var(--cp-display); font-weight: 500; font-size: clamp(30px, 5vw, 44px);
  line-height: 1; color: var(--cp-green-dark);
}
.cp-verdict--egal .cp-verdict__chiffre,
.cp-verdict--defavorable .cp-verdict__chiffre { color: var(--cp-brown-dark); }
.cp-verdict--neutre .cp-verdict__chiffre { color: var(--cp-meta); }

.cp-verdict__phrase {
  font-family: var(--cp-display); font-weight: 500; font-size: 18px; line-height: 25px;
  margin-top: 10px !important;
}
.cp-verdict__perimetre { margin-top: 8px !important; font-size: 13px; line-height: 19px; color: var(--cp-ink-2); }

.cp-verdict__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }
.cp .cp-verdict__cta {
  display: inline-flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--cp-green); color: #fff; text-decoration: none; border-radius: 50px;
  padding: 12px 28px; box-shadow: 0 4px 12px rgba(0,0,0,.2); transition: all .3s ease-in-out;
  font-family: var(--cp-medium); font-weight: 500; font-size: 17px; line-height: 23px;
}
.cp .cp-verdict__cta span { font-family: var(--cp-text); font-weight: 400; font-size: 12px; line-height: 17px; opacity: .9; }
.cp .cp-verdict__cta:hover { background: var(--cp-green-dark); color: #fff; box-shadow: none; text-decoration: none; }
.cp .cp-verdict__second {
  background: none; border: none; padding: 6px 2px; cursor: pointer;
  font-family: var(--cp-medium); font-weight: 500; font-size: 15px; color: var(--cp-green);
  text-decoration: underline; text-underline-offset: 3px;
}
.cp .cp-verdict__second:hover { color: var(--cp-green-dark); background: none; }

/* modules vendus en bloc : intertitre et retrait */
.cp-module__groupe {
  display: block; margin-top: 14px; padding: 8px 0 2px; border-top: 1px solid var(--cp-rule);
  font-family: var(--cp-medium); font-weight: 500; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--cp-brown-dark);
}
.cp-module--groupe { padding-left: 14px; border-top: none; border-left: 2px solid var(--cp-rule); }
.cp-module__note { margin-top: 10px !important; font-size: 12px; line-height: 18px; color: var(--cp-ink-2); }

.cp-envoi__message { margin-top: 14px !important; font-size: 14px; line-height: 21px; color: var(--cp-ink-2); }
.cp-envoi__message.is-erreur { color: var(--cp-alerte); }