/* Étape 2 : la photo du croquis et le devis côte à côte ; les notes relevées s'éclairent sur le croquis. */
.devis__grille { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 20px; align-items: start; }

.recu { position: sticky; top: 132px; }
.recu__entete { margin: 0; padding: 12px 18px; display: grid; gap: 4px; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); font-size: 14px; }
.recu__entete div { display: grid; grid-template-columns: 52px 1fr; gap: 8px; }
.recu__entete dt { color: var(--encre-2); }
.recu__entete dd { margin: 0; font-weight: 600; }
.recu__corps { padding: 14px 18px 18px; white-space: pre-line; font-size: 15px; line-height: 1.7; }

/* La photo : une feuille à petits carreaux posée de travers sur un fond sombre */
.photo { margin: 0; padding: 18px 18px 10px; background: #2c2a2b; }
.photo__papier {
  position: relative; aspect-ratio: 4 / 3; container-type: inline-size;
  background-color: #fbfaf3;
  background-image:
    linear-gradient(rgba(64, 112, 190, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64, 112, 190, 0.16) 1px, transparent 1px);
  background-size: 4% 5.3333%;
  transform: rotate(-1.4deg);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), inset 0 0 60px rgba(120, 100, 60, 0.12);
}
.photo figcaption { color: rgba(255, 255, 255, 0.7); font-size: 12px; margin-top: 12px; }
.photo__encre { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo__encre .stylo path { fill: none; stroke: var(--stylo); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.photo__encre .stylo .stylo__profil { stroke-width: 3.4; }
.photo__encre .crayon path { fill: none; stroke: #8d8a84; stroke-width: 1.3; stroke-linecap: round; opacity: 0.7; }

.note {
  position: absolute; transform: rotate(var(--r, 0deg)); transform-origin: left top;
  font: 700 5.6cqw/1.05 var(--main); color: var(--stylo); white-space: nowrap;
  padding: 0 0.15em; border-radius: 0.2em;
  transition: background 0.35s, color 0.35s, box-shadow 0.35s;
}
.note--grand { font-size: 7cqw; }
.note--discret { color: #8d8a84; font-weight: 500; font-size: 4.6cqw; background: #fbfaf3; }
.note--encours { background: var(--orange); color: #fff; box-shadow: 0 0 0 0.25em var(--orange); }
.note--lu { background: rgba(253, 78, 13, 0.16); box-shadow: 0 0 0 0.18em rgba(253, 78, 13, 0.16); }

.source { background: none; color: inherit; border-radius: 3px; padding: 1px 0; transition: background 0.35s, box-shadow 0.35s; }
.source--encours { background: var(--orange); color: #fff; box-shadow: 0 0 0 3px var(--orange); }
.source--lu { background: var(--orange-voile); box-shadow: 0 0 0 2px var(--orange-voile); }

/* Le devis */
.fiche .panneau__titre { align-items: center; }
.statut { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--orange-voile); color: var(--orange-texte); }
.panneau__titre .statut--encours { background: var(--anthracite); color: #fff; }

.redessin { padding: 14px 18px 8px; border-bottom: 1px solid var(--filet); }
.redessin__titre { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.redessin__titre h3, .groupe h3, .fiche__controles h3 {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-2);
}
.redessin__calcul { font-size: 14px; color: var(--anthracite); }
.redessin__calcul strong { color: var(--orange-texte); }
.redessin__calcul--attente { color: var(--encre-2); }
.redessin .profil { max-width: 520px; margin: 4px auto 0; }

.fiche__groupes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--filet); }
.groupe { padding: 14px 18px 16px; border-right: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.groupe:nth-child(2n) { border-right: 0; }
.groupe:nth-last-child(-n + 2) { border-bottom: 0; }
.groupe h3 { margin-bottom: 10px; }
.groupe dl { margin: 0; display: grid; gap: 12px; }
.champ dt { font-size: 12px; color: var(--encre-2); }
.champ dd { margin: 2px 0 0; display: grid; min-height: 22px; }
.champ__valeur { font-weight: 600; font-size: 14px; }
.champ__note { font-size: 12px; color: var(--encre-2); }
.champ__vide { display: block; height: 14px; margin-top: 4px; width: 70%; border-radius: 4px; background: var(--filet); }
.champ--encours .champ__vide { background: var(--orange); }
.champ--alerte .champ__valeur { color: var(--orange-texte); }
.champ--alerte dd { border-left: 3px solid var(--orange); padding-left: 8px; margin-left: -11px; }

.fiche__controles { padding: 14px 18px 18px; display: grid; gap: 12px; }
.controles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.controle { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 9px 12px; border-radius: var(--rayon-petit); background: var(--ok-voile); font-size: 13px; }
.controle div { display: grid; align-content: start; }
.controle strong { font-weight: 600; }
.controle__signe { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 12px; font-weight: 700; }
.controle--alerte { grid-column: 1 / -1; background: var(--orange-voile); box-shadow: inset 3px 0 0 var(--orange); }
.controle--alerte .controle__signe { background: var(--orange-texte); }

.decision { display: grid; gap: 10px; }
.decision h3 { font-size: 15px; font-weight: 600; color: var(--anthracite); text-transform: none; letter-spacing: 0; }
.decision__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.option {
  display: grid; gap: 4px; align-content: start; text-align: left; padding: 12px 14px; cursor: pointer;
  background: var(--feuille); border: 1.5px solid var(--filet-fort); border-radius: var(--rayon);
  font-size: 13px; color: var(--encre-2); transition: border-color 0.15s, background 0.15s;
}
.option strong { font-size: 15px; font-weight: 600; color: var(--encre); }
.option:hover { border-color: var(--orange); }
.option[aria-pressed='true'] { border-color: var(--anthracite); background: var(--orange-voile); box-shadow: inset 0 0 0 1px var(--anthracite); }
.option__etiquette { justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--orange-texte); }
.option__prix { font-size: 18px; font-weight: 300; color: var(--anthracite); margin-top: 2px; }

@media (max-width: 1080px) {
  .devis__grille { grid-template-columns: minmax(0, 1fr); }
  .recu { position: static; }
  .photo__papier { max-width: 560px; margin: 0 auto; }
}

@media (max-width: 720px) {
  .fiche__groupes { grid-template-columns: 1fr; }
  .groupe { border-right: 0; }
  .groupe:nth-last-child(2) { border-bottom: 1px solid var(--filet); }
  .controles, .decision__options { grid-template-columns: 1fr; }
  .recu__corps { font-size: 14px; }
  .photo { padding: 12px 12px 8px; }
  .devis .entete .bouton { display: none; }
}