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

/* Mise en page : la structure commune .outil-colonnes (app/kit.css).
   Téléphone : le dessin et son explication, puis les champs et les rayons. Ordinateur : dessin à gauche, réglages à droite. */
.ar .outil-fixe { align-items: stretch; }
.ar .outil-fixe .seg { width: min(100%, 360px); align-self: center; }

/* Le dessin : les niveaux l'un dans l'autre, du plus sombre au plus clair ; le plus profond en papier */
.ar-zone { width: 100%; height: clamp(200px, 32vh, 280px); display: grid; place-items: center; }
@media (min-width: 960px) { .ar-zone { height: min(50vh, 440px); } }
.ar-dessin { width: 100%; height: 100%; overflow: visible; }
.ar-dessin rect { stroke: var(--filet); stroke-width: 1; vector-effect: non-scaling-stroke; transition: rx .4s var(--courbe), ry .4s var(--courbe); }
.ar-n0 { fill: rgba(242, 240, 235, .05); }
.ar-n1 { fill: rgba(242, 240, 235, .1); }
.ar-n2 { fill: rgba(242, 240, 235, .16); }
.ar-n3 { fill: rgba(242, 240, 235, .24); }
/* Le centre de chaque coin (orange) et ses deux rayons en pointillé : un seul point quand c'est juste */
.ar-guide { fill: none; stroke: var(--orange); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.ar-centre { fill: var(--orange); }
.ar .outil-fixe .info { min-height: 3.2em; text-wrap: balance; }

/* Les trois champs sur une ligne */
.ar-champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ar-champs .champ { position: relative; }
.ar-champs .champ > span { white-space: nowrap; }
/* « auto » dans le champ, à droite (au-dessus, il ne tiendrait pas dans une colonne de téléphone) */
.ar-champs .champ > span i { position: absolute; right: 14px; bottom: 0; height: 48px; display: flex; align-items: center; pointer-events: none; }

/* Les rayons à copier (comme IOR) */
.ar-rayons .rangee .val { color: var(--papier); }
.ar-rayons .rangee .note { display: grid; justify-items: end; }
.ar-rayons .rangee svg { width: 15px; height: 15px; fill: none; stroke: var(--texte2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ar-rayons .rangee:hover svg { stroke: var(--peche); }
.ar-unites { margin: 10px 0 0; font: var(--valeur); letter-spacing: .06em; color: var(--texte2); }