/* Simulateur toiture - charte inspiree de baticlients.fr :
   Inter, titres tres gras bleu nuit, accent orange/or, cartes arrondies,
   bandes sombres pour les resultats. Le widget reste re-colorable (--accent). */

:root {
  --accent: #f5a623;          /* orange / or : CTA, etats actifs, reperes */
  --accent-fonce: #e08e00;
  --accent-texte: #16202b;    /* texte lisible SUR l'accent (recalcule par JS) */
  --nuit: #16202b;            /* bleu nuit : titres, bandes sombres, texte fort */
  --texte: #1d2733;
  --texte-doux: #5e6a78;
  --bord: #e6e9ee;
  --fond: #ffffff;
  --fond-doux: #f0f1f4;
  --erreur: #b91c1c;
  --rayon: 12px;
  --ombre: 0 10px 30px rgba(22, 32, 43, .07);
}

/* CSS SCOPE sous .sim (widget) et .tdb (back-office) : un plugin ne doit pas
   restyler le body, les boutons ou les titres du site hote ni de l'admin WP. */
.sim, .sim *, .sim *::before, .sim *::after,
.tdb, .tdb *, .tdb *::before, .tdb *::after { box-sizing: border-box; }

.sim, .tdb {
  color: var(--texte);
  font: 16px/1.6 Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.sim {
  max-width: 700px;
  margin: 0 auto;
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: 16px;
  padding: 30px;
  box-shadow: var(--ombre);
}

.sim h1, .tdb h1 { font-size: 2rem; font-weight: 800; margin: 0 0 10px; line-height: 1.15; color: var(--nuit); letter-spacing: -.01em; }
.sim h2, .tdb h2 { font-size: 1.5rem; font-weight: 800; margin: 0 0 10px; color: var(--nuit); letter-spacing: -.01em; }
.sim h3, .sim h4, .tdb h3, .tdb h4 { color: var(--nuit); }

.chapo { color: var(--texte-doux); margin: 0 0 20px; }
.aide  { color: var(--texte-doux); font-size: .85rem; margin: 8px 0 0; }
.mention { color: var(--texte-doux); font-size: .83rem; margin: 20px 0 0; }
.erreur { color: var(--erreur); font-size: .9rem; margin: 10px 0 0; }

.etape { display: none; }
.etape.active { display: block; }

/* ---- adresse + autocompletion ---- */
.champ-adresse { position: relative; }

.sim input[type=text], .sim input[type=tel], .sim input[type=email], .sim select {
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  color: inherit;
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
}
.sim input:focus, .sim select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.suggestions {
  position: absolute;
  z-index: 1000;
  inset: calc(100% + 4px) 0 auto 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
}
.suggestions li {
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 6px;
}
.suggestions li:hover, .suggestions li[aria-selected=true] { background: var(--fond-doux); }

/* ---- carte ---- */
.carte {
  height: 340px;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: var(--fond-doux);
}
.leaflet-container { border-radius: var(--rayon); font: inherit; }
.leaflet-container.deplace { cursor: grabbing; }
.leaflet-container.trace, .leaflet-container.trace .leaflet-interactive { cursor: crosshair; }

/* ---- poignees d'ajustement du contour ---- */
.poignee {
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 2px;
  cursor: grab;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.poignee:active { cursor: grabbing; }
/* Le premier point du trace : repere ou le tour se referme. */
.poignee-depart { background: var(--accent); border-color: #fff; border-radius: 50%; }

.poignee-rotation {
  background: var(--accent);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: grab;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.poignee-rotation:active { cursor: grabbing; }

.recale {
  margin: 8px 0 0;
  font-size: .85rem;
  color: var(--texte-doux);
  line-height: 1.7;
}
/* Legende : le trait plein est le toit, le pointille les murs. */
.cle {
  display: inline-block;
  width: 22px; height: 0;
  vertical-align: middle;
  margin-right: 3px;
}
.cle-toit { border-top: 4px solid #2563eb; }
.cle-murs { border-top: 1px dashed #dc2626; }
.cle-crete { border-top: 3px dotted #e619e6; }
.cle-faitage { border-top: 4px solid #f8fafc; box-shadow: 0 0 0 1px #94a3b8; }
.cle-aretier { border-top: 3px solid #06b6d4; }
.legende {
  font-size: .85rem;
  color: #64748b;
  margin: 6px 0 0;
}
.lien {
  background: none;
  border: 0;
  padding: 0 0 0 6px;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.bat-choisi {
  margin: 8px 0 0;
  font-size: .85rem;
  color: var(--texte-doux);
}
.bat-choisi span { color: var(--texte); font-weight: 600; }

/* ---- mesures relevees ---- */
.mesures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  margin-top: 16px;
  background: var(--bord);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  overflow: hidden;
}
/* margin:0 obligatoire : le <dl> porte une marge par defaut du navigateur, qui
   laisserait le fond gris du conteneur apparaitre en bandeau haut et bas. */
.mesure { background: var(--fond); padding: 12px 14px; margin: 0; }
.mesure dt { color: var(--texte-doux); font-size: .83rem; margin: 0 0 2px; }
.mesure dd { margin: 0; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mesure dd small { font-weight: 400; font-size: .83rem; color: var(--texte-doux); }
/* Case en attente d'un trace : grisee, valeur en clair pour signaler "a faire". */
.mesure.attente dd { font-weight: 500; font-size: .95rem; color: var(--texte-doux); font-style: italic; }

/* ---- vignettes de pente ---- */
.vignettes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.vignette {
  display: block;
  cursor: pointer;
  border: 2px solid var(--bord);
  border-radius: var(--rayon);
  padding: 14px;
  text-align: center;
  background: var(--fond);
}
.vignette:hover { border-color: var(--accent); }
.vignette input { position: absolute; opacity: 0; pointer-events: none; }
.vignette:has(input:checked) { border-color: var(--accent); background: #fff7ea; }
.vignette:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.vignette svg { display: block; width: 100%; height: 62px; margin-bottom: 8px; }
.vignette .titre { font-weight: 700; display: block; color: var(--nuit); }
.vignette .sous { color: var(--texte-doux); font-size: .83rem; }
.vignette .repere {
  display: inline-block; margin-top: 6px; font-size: .7rem; font-weight: 700;
  color: var(--accent-fonce); background: #fff2db; border-radius: 99px; padding: 2px 9px;
}

/* ---- formulaire travaux ---- */
.bloc-champ { display: block; margin-bottom: 16px; }
.bloc-champ > span { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 6px; }

.prestations { border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px 16px; margin: 0 0 20px; }
.prestations legend { font-size: .88rem; font-weight: 600; padding: 0 6px; }
.presta {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; cursor: pointer;
  border-top: 1px solid var(--bord);
}
.presta:first-child { border-top: 0; }
.presta > input[type=checkbox] { margin-top: 4px; flex: none; accent-color: var(--accent); }
.presta-txt { flex: 1; }
.presta .sous { display: block; color: var(--texte-doux); font-size: .82rem; }
.presta .qte {
  flex: none; width: 62px; padding: 6px 8px;
  text-align: right; font-variant-numeric: tabular-nums;
}

.detail tr.total td { font-weight: 700; border-top: 2px solid var(--bord); }

/* ---- resultat : bande bleu nuit facon baticlients ---- */
.fourchette {
  text-align: center;
  padding: 30px 20px;
  border-radius: var(--rayon);
  background: var(--nuit);
  color: #fff;
}
.fourchette .montants {
  font-size: clamp(1.8rem, 6vw, 2.5rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.fourchette .a { color: var(--accent); font-weight: 600; margin: 0 8px; }
.fourchette .base { color: rgba(255, 255, 255, .72); font-size: .9rem; margin-top: 10px; }

.mention-legale {
  font-size: .83rem;
  color: var(--texte-doux);
  margin: 14px 0 0;
}

.detail { margin-top: 18px; }
.detail summary { cursor: pointer; font-size: .9rem; font-weight: 600; padding: 6px 0; }
.detail table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: 8px; }
.detail td { padding: 8px 0; border-bottom: 1px solid var(--bord); vertical-align: top; }
.detail td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.detail .detail-ligne { display: block; color: var(--texte-doux); font-size: .83rem; }
.detail tr.majoration td { color: var(--texte-doux); }
.detail pre { font-size: .75rem; overflow-x: auto; background: var(--fond-doux); padding: 12px; border-radius: 6px; }

/* ---- boutons ---- */
.actions { display: flex; gap: 10px; margin-top: 22px; }
.actions .btn-principal { margin-left: auto; }

.sim button, .tdb button {
  font: inherit;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: var(--rayon);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, box-shadow .12s, transform .04s;
}
.sim button:active, .tdb button:active { transform: translateY(1px); }
/* CTA a la couleur de marque ; le texte (--accent-texte) reste lisible clair ou fonce. */
.btn-principal { background: var(--accent); color: var(--accent-texte, var(--nuit)); box-shadow: 0 4px 12px rgba(22, 32, 43, .16); }
.btn-principal:hover { background: var(--accent-fonce); }
.btn-principal[disabled] { opacity: .5; cursor: default; box-shadow: none; }
.btn-secondaire { background: var(--fond); color: var(--nuit); border-color: var(--bord); }
.btn-secondaire:hover { background: var(--fond-doux); border-color: #d6dbe2; }

.sim button:focus-visible, .tdb button:focus-visible, .sim .suggestions li:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- panneau "Affiner" (facultatif) ----
   Tout le detail technique (tracage, plusieurs toitures) est replie ici pour ne
   pas noyer le client : il valide sa maison, et n'ouvre ceci que s'il le veut. */
.affiner {
  margin-top: 22px; border: 1px solid var(--bord); border-radius: var(--rayon);
  background: var(--fond-doux); overflow: hidden;
}
.affiner > summary {
  padding: 14px 16px; cursor: pointer; font-weight: 600; color: var(--texte);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.affiner > summary::-webkit-details-marker { display: none; }
.affiner > summary::before {
  content: "+"; font-weight: 700; color: var(--accent);
  font-size: 1.1rem; line-height: 1; width: 14px; text-align: center;
}
.affiner[open] > summary::before { content: "\2212"; }   /* signe moins */
.affiner[open] > summary { border-bottom: 1px solid var(--bord); }
.facultatif {
  margin-left: auto; font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texte-doux);
  background: var(--fond); border: 1px solid var(--bord);
  border-radius: 999px; padding: 2px 9px;
}
/* Contenu du panneau : un peu de respiration, fond clair pour se detacher. */
.affiner > :not(summary) { margin-left: 16px; margin-right: 16px; }
.affiner > h4:first-of-type { margin-top: 14px; }
.affiner > .legende, .affiner > .bat-choisi { margin-bottom: 14px; }

/* ---- onglets de toitures ---- */
.onglets { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.onglet {
  padding: 9px 14px; font-size: .92rem; font-weight: 600;
  background: var(--fond); color: var(--texte-doux);
  border: 1px solid var(--bord); border-radius: var(--rayon);
}
.onglet:hover { background: var(--fond-doux); }
.onglet.actif { background: var(--nuit); color: #fff; border-color: var(--nuit); }
.onglet.actif small { color: rgba(255, 255, 255, .8); }
.onglet small { font-weight: 400; color: var(--texte-doux); }
.onglet-x {
  display: inline-block; margin-left: 6px; padding: 0 3px;
  border-radius: 3px; font-weight: 700; line-height: 1;
}
.onglet-x:hover { background: rgba(0, 0, 0, .18); }
.onglet-plus { border-style: dashed; color: var(--accent); }
.releve-total {
  margin: 10px 0 0; padding: 8px 12px; font-size: .9rem;
  background: var(--fond-doux); border-radius: var(--rayon); color: var(--texte);
}

/* ---- zone de trace du toit ---- */
.bloc-titre { font-size: 1rem; margin: 24px 0 4px; }
.actions-lignes { flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.actions-lignes button { padding: 9px 14px; font-size: .92rem; }
.actions-lignes .btn-principal { margin-left: 0; }
.btn-lien { background: none; border: 0; color: var(--texte-doux);
            text-decoration: underline; font-weight: 500; padding: 9px 6px; margin-left: auto; }
.btn-lien:hover { color: var(--texte); }
/* Consigne active pendant un trace : bien visible pour guider le clic. */
.aide.en-cours { color: var(--accent); font-weight: 600; }
/* Pastilles de legende pour les points (comme sur la carte). */
.pastille { display: inline-block; width: 11px; height: 11px; border-radius: 2px;
            border: 1px solid #fff; box-shadow: 0 0 0 1px #94a3b8;
            vertical-align: middle; margin-right: 3px; }
.past-cheminee { background: #ea580c; }
.past-velux { background: #2563eb; }

.chargement { color: var(--texte-doux); font-size: .9rem; }

@media (max-width: 520px) {
  body { padding: 0; }
  .sim { border: 0; border-radius: 0; padding: 20px 16px; }
  .carte { height: 260px; }
  .actions { flex-direction: column-reverse; }
  .actions .btn-principal, .actions .btn-secondaire { margin-left: 0; width: 100%; }
  /* Les boutons de trace restent en grille compacte sur mobile, pas empiles. */
  .actions-lignes { flex-direction: row; }
  .actions-lignes button { width: auto; flex: 1 1 44%; }
  .actions-lignes .btn-lien { flex-basis: 100%; margin-left: 0; }
}

.pan-item { display: inline-block; margin: 0 8px 2px 0; white-space: nowrap; }
.pan-cle { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
           vertical-align: middle; margin-right: 3px; }

/* ---- apercu des e-mails (ecran merci) ---- */
.email-apercu {
  border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 12px 14px; margin: 10px 0; background: var(--fond);
}
.email-tete { margin-bottom: 6px; }
.email-champ { font-size: .85rem; color: var(--texte-doux); padding: 1px 0; }
.email-champ span {
  display: inline-block; min-width: 46px; color: var(--texte-doux);
  font-weight: 600; font-size: .72rem; text-transform: uppercase;
}
.email-corps {
  margin: 10px 0; padding: 10px 12px; background: var(--fond-doux);
  border-radius: var(--rayon); font-size: .9rem; line-height: 1.5;
}
.email-pj {
  font-size: .82rem; color: var(--texte-doux);
  border-top: 1px solid var(--bord); padding-top: 8px;
}

.email-bandeau {
  font-weight: 700; padding: 8px 12px; border-radius: 8px 8px 0 0;
  margin: -12px -14px 10px; font-size: .9rem;
}

/* ---- formulaire de contact enrichi ---- */
#form-contact textarea {
  width: 100%; padding: 12px 14px; font: inherit; color: inherit;
  background: var(--fond); border: 1px solid var(--bord);
  border-radius: var(--rayon); resize: vertical;
}
#form-contact textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.bloc-champ small { color: var(--texte-doux); font-weight: 400; }
.champ-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.champ-rgpd {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 4px 0 16px; font-size: .85rem; color: var(--texte-doux); line-height: 1.5;
}
.champ-rgpd input { margin-top: 3px; flex: none; accent-color: var(--accent); width: 17px; height: 17px; }
.champ-rgpd strong { color: var(--texte); }
@media (max-width: 520px) { .champ-2col { grid-template-columns: 1fr; } }

/* ---- garde-fous contre les themes hotes ----
   Un theme (Flatsome, etc.) peut passer dt/dd en inline : la valeur se collait
   alors au libelle ("Pente15 °", "Cheminees2"). On impose la mise en page du
   releve, quel que soit le theme du site sur lequel le widget est pose. */
.sim .mesure dt, .sim .mesure dd { display: block !important; }
.sim .mesure dt { text-transform: none; letter-spacing: normal; margin: 0 0 2px; }
.sim .mesure dd { margin: 0; }
.sim .mesure dd small { display: inline; }

/* Le <select> : beaucoup de themes imposent une hauteur fixe (ou un line-height)
   qui rognait l'option selectionnee ("Tuile terre cuite" coupee en deux). On
   reprend la main : hauteur libre, texte centre, et chevron dessine par nous. */
.sim select {
  height: auto !important;
  min-height: 50px;
  line-height: 1.4 !important;
  padding: 14px 42px 14px 14px !important;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%235e6a78' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 10px 6px;
  text-overflow: ellipsis;
}

/* ---- memos pedagogiques ---- */
/* 3 etapes, sur l'ecran adresse : le visiteur sait ou il va avant de commencer. */
.memo-etapes {
  list-style: none; counter-reset: e; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.memo-etapes li {
  counter-increment: e; background: var(--fond-doux);
  border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px;
}
.memo-etapes li::before {
  content: counter(e);
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--accent-texte, var(--nuit));
  font-weight: 800; font-size: .8rem; margin-bottom: 8px;
}
.memo-etapes strong { display: block; color: var(--nuit); font-size: .92rem; }
.memo-etapes span { display: block; color: var(--texte-doux); font-size: .82rem; line-height: 1.45; }

/* Schema "faitage / aretier / egout", vu du ciel comme sur la photo. */
.memo { margin: 10px 0 4px; }
.memo > summary {
  cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--nuit);
  padding: 9px 12px; background: var(--fond-doux);
  border: 1px solid var(--bord); border-radius: var(--rayon);
  list-style: none;
}
.memo > summary::-webkit-details-marker { display: none; }
.memo > summary::before { content: "? "; color: var(--accent); font-weight: 800; }
.memo-corps {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center;
  border: 1px solid var(--bord); border-top: 0;
  border-radius: 0 0 var(--rayon) var(--rayon); padding: 16px;
}
.memo-schema { width: 100%; height: auto; }
.memo-lbl { font-size: 11px; font-weight: 700; fill: #5e6a78;
  font-family: Inter, system-ui, sans-serif; }
.memo-defs { margin: 0; }
.memo-defs dt { font-weight: 700; color: var(--nuit); font-size: .88rem; margin-top: 8px; }
.memo-defs dt:first-child { margin-top: 0; }
.memo-defs dd { margin: 1px 0 0; color: var(--texte-doux); font-size: .84rem; line-height: 1.45; }

@media (max-width: 560px) {
  .memo-etapes { grid-template-columns: 1fr; }
  .memo-corps { grid-template-columns: 1fr; }
}