/* Outil · Resolution : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : reso- */

/* Largeur × hauteur côte à côte */
.reso-dims { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; }
.reso-fois { font: 400 22px/1 var(--display); color: var(--texte2); padding-bottom: 20px; }

/* Cadre visuel : rectangle aux proportions exactes (taille calculée par placerCadre),
   cotes orange façon plan technique (largeur au-dessus, hauteur à droite), tiers en filigrane, ratio au centre */
.reso-zone { height: clamp(160px, 30vh, 280px); display: grid; place-items: center; padding: 28px 34px 4px 4px; }
.reso-cadre { position: relative; border: 1.5px solid var(--papier); border-radius: 6px; background: rgba(242, 240, 235, .035);
  display: grid; place-items: center; transition: width .7s var(--courbe), height .7s var(--courbe); }
.reso-cadre::before, .reso-cadre::after { content: ""; position: absolute; pointer-events: none; border: 0 dashed rgba(242, 240, 235, .14); }
.reso-cadre::before { top: 0; bottom: 0; left: 33.33%; right: 33.33%; border-left-width: 1px; border-right-width: 1px; }
.reso-cadre::after { left: 0; right: 0; top: 33.33%; bottom: 33.33%; border-top-width: 1px; border-bottom-width: 1px; }
.reso-cote-l, .reso-cote-h { position: absolute; border: 1px solid var(--orange); }
.reso-cote-l { left: 0; right: 0; bottom: calc(100% + 6px); height: 6px; border-bottom: 0; }
.reso-cote-h { top: 0; bottom: 0; left: calc(100% + 6px); width: 6px; border-left: 0; }
.reso-cote-l span, .reso-cote-h span { position: absolute; font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--peche); white-space: nowrap; }
.reso-cote-l span { bottom: 10px; left: 50%; translate: -50% 0; }
.reso-cote-h span { left: 12px; top: 50%; translate: 0 -50%; writing-mode: vertical-rl; }
.reso-centre { font: 700 clamp(16px, 4vw, 22px)/1 var(--display); letter-spacing: -.03em; color: rgba(242, 240, 235, .35); }