/* Démo « relief 3D » — tout est rangé sous .demo-relief-3d. Couleurs : jetons du site uniquement. */
@font-face { font-family: "Great Vibes"; src: url("great-vibes-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("cinzel-latin-400-normal.woff2") format("woff2"); font-display: swap; }

:root { --rl-soleil: #f2c14e; }
.demo-relief-3d { display: grid; gap: 1.2rem; }
.demo-relief-3d [hidden] { display: none !important; }
.demo-relief-3d .rl-vue { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .demo-relief-3d .rl-vue { grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: auto 1fr; align-items: start; }
}

/* ——— Scène ——— */
.demo-relief-3d .rl-scene {
  position: relative; overflow: hidden; border: 1px solid var(--trait); border-radius: var(--rayon);
  background-color: var(--carte);
  background-image:
    linear-gradient(color-mix(in srgb, var(--trait) 55%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--trait) 55%, transparent) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
  aspect-ratio: 1 / 1; max-height: 78vh;
}
@media (min-width: 900px) { .demo-relief-3d .rl-scene { aspect-ratio: 4 / 3.15; max-height: none; } }
.demo-relief-3d .rl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.demo-relief-3d .rl-canvas:active { cursor: grabbing; }
.demo-relief-3d .rl-canvas:focus-visible { outline: 3px solid var(--vert); outline-offset: -3px; border-radius: var(--rayon); }

.demo-relief-3d .rl-repli { margin: 0; position: absolute; inset: 0; }
.demo-relief-3d .rl-repli img { position: absolute; left: 1rem; top: 1rem; width: calc(100% - 2rem); height: calc(100% - 5.5rem); object-fit: contain; }
.demo-relief-3d .rl-repli__texte {
  position: absolute; left: .8rem; right: .8rem; bottom: .8rem; margin: 0; font-size: var(--t-xs); color: var(--encre-2);
  background: color-mix(in srgb, var(--carte) 88%, transparent); border: 1px solid var(--trait); border-radius: 8px; padding: .5rem .7rem;
}

.demo-relief-3d .rl-chargement, .demo-relief-3d .rl-legende, .demo-relief-3d .rl-aide {
  position: absolute; margin: 0; font: 500 var(--t-xs)/1.35 var(--f-cote); color: var(--encre-2); pointer-events: none;
}
.demo-relief-3d .rl-chargement { inset: 0; display: grid; place-items: center; font-size: var(--t-s); }
.demo-relief-3d .rl-legende {
  left: .75rem; top: .75rem; max-width: calc(100% - 1.5rem);
  background: color-mix(in srgb, var(--carte) 90%, transparent); border: 1px solid var(--trait); border-left: 3px solid var(--vert);
  border-radius: 0 6px 6px 0; padding: .45rem .65rem;
}
.demo-relief-3d .rl-legende:empty { display: none; }
.demo-relief-3d .rl-aide { position: static; margin: -.6rem 0 0; color: var(--gris); }
@media (min-width: 900px) {
  .demo-relief-3d .rl-scene { grid-column: 1; grid-row: 1; }
  .demo-relief-3d .rl-aide { grid-column: 1; grid-row: 2; }
  .demo-relief-3d .rl-reglages { grid-column: 2; grid-row: 1 / span 2; }
}
.demo-relief-3d .rl-aide--doigt { display: none; }
@media (pointer: coarse) { .demo-relief-3d .rl-aide--souris { display: none; } .demo-relief-3d .rl-aide--doigt { display: inline; } }

/* Cotes façon dessin technique, posées sur la scène par le script */
.demo-relief-3d .rl-cotes { position: absolute; inset: 0; pointer-events: none; }
.demo-relief-3d .rl-cote {
  position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform;
  font: 600 11px/1 var(--f-cote); letter-spacing: .02em; color: var(--encre);
  background: color-mix(in srgb, var(--carte) 86%, transparent); padding: 3px 5px; border-radius: 3px;
  translate: -50% -50%;
}
.demo-relief-3d .rl-cote.est-cache { visibility: hidden; }
.demo-relief-3d .rl-cote--repere { translate: 10px -50%; color: var(--vert-texte); border: 1px solid color-mix(in srgb, var(--vert) 45%, transparent); }
.demo-relief-3d .rl-cote--repere.a-gauche { translate: calc(-100% - 10px) -50%; }
.demo-relief-3d .rl-cote--repere.a-gauche::before { left: auto; right: -13px; }
.demo-relief-3d .rl-cote--repere::before {
  content: ""; position: absolute; left: -13px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: var(--vert); box-shadow: 0 0 0 2px var(--carte);
}
@media (max-width: 520px) { .demo-relief-3d .rl-cote { font-size: 10px; padding: 2px 4px; } }

/* ——— Réglages ——— */
.demo-relief-3d .rl-reglages { display: grid; gap: .9rem; }
.demo-relief-3d .rl-groupe { border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--carte); padding: .8rem .95rem 1rem; margin: 0; min-width: 0; }
.demo-relief-3d .rl-groupe legend { font: 600 var(--t-xs)/1 var(--f-cote); text-transform: uppercase; letter-spacing: .08em; color: var(--vert-texte); padding: 0 .35rem; }
.demo-relief-3d .rl-champ { margin-bottom: .55rem; }
.demo-relief-3d .rl-champ label { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .2rem; }
.demo-relief-3d .rl-champ output { font: 500 var(--t-xs)/1.6 var(--f-cote); color: var(--gris); }
.demo-relief-3d .rl-champ input[type="text"] { padding: .55rem .7rem; font-size: var(--t-s); }
.demo-relief-3d input[type="range"] { width: 100%; accent-color: var(--vert-texte); margin: .25rem 0; height: 28px; }

.demo-relief-3d .rl-lumiere { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .8rem; align-items: center; }
.demo-relief-3d .rl-cadran { width: 96px; height: 96px; touch-action: none; cursor: grab; display: block; }
.demo-relief-3d .rl-cadran__piste { fill: none; stroke: var(--trait-fort); stroke-width: 1.5; stroke-dasharray: 3 4; }
.demo-relief-3d .rl-cadran__piece { fill: color-mix(in srgb, var(--laiton) 30%, var(--carte)); stroke: var(--laiton); stroke-width: 1.2; }
.demo-relief-3d .rl-cadran__rayon { stroke: var(--laiton); stroke-width: 1.5; stroke-dasharray: 2 3; }
.demo-relief-3d .rl-cadran__soleil { fill: var(--rl-soleil); stroke: var(--laiton); stroke-width: 2; }

.demo-relief-3d .rl-boutons { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.demo-relief-3d .rl-boutons--bas { padding-top: .1rem; }
.demo-relief-3d .rl-petit { padding: .6rem .95rem; font-size: var(--t-xs); }
.demo-relief-3d .bouton[aria-pressed="true"] { background: var(--vert-pale); border-color: var(--vert); }
.demo-relief-3d button.bouton { font-family: var(--f-texte); }

.demo-relief-3d .rl-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin-bottom: .2rem; }
.demo-relief-3d .rl-choix label { position: relative; display: block; cursor: pointer; }
.demo-relief-3d .rl-choix input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.demo-relief-3d .rl-choix span {
  display: block; text-align: center; font: 600 var(--t-xs)/1.2 var(--f-texte); padding: .62rem .4rem;
  border: 1.5px solid var(--trait-fort); border-radius: 8px; color: var(--encre); background: var(--papier);
}
.demo-relief-3d .rl-choix input:checked + span { border-color: var(--vert); background: var(--vert-pale); box-shadow: inset 0 0 0 1px var(--vert); }
.demo-relief-3d .rl-choix input:focus-visible + span { outline: 3px solid var(--vert); outline-offset: 2px; }
.demo-relief-3d .rl-choix--2 { margin: .3rem 0 .6rem; }
.demo-relief-3d .rl-bascule { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-s); cursor: pointer; padding: .3rem .2rem; }
.demo-relief-3d .rl-bascule input { width: 1.1rem; height: 1.1rem; accent-color: var(--vert-texte); }

/* ——— Fiche de fabrication : un cartouche de plan ——— */
.demo-relief-3d .rl-fiche {
  margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  border: 1.5px solid var(--encre-2); border-radius: 4px; background: var(--carte); overflow: hidden;
}
.demo-relief-3d .rl-fiche div { padding: .55rem .75rem .6rem; border-right: 1px solid var(--trait-fort); border-bottom: 1px solid var(--trait-fort); margin: 0 -1px -1px 0; min-width: 0; }
.demo-relief-3d .rl-fiche dt { font: 600 10.5px/1.2 var(--f-cote); text-transform: uppercase; letter-spacing: .09em; color: var(--gris); margin-bottom: .2rem; }
.demo-relief-3d .rl-fiche dd { margin: 0; font: 600 var(--t-s)/1.35 var(--f-cote); color: var(--encre); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .demo-relief-3d [data-rl="tourne"] { display: none; }
}