/* Figure légendée : la figure dans la page, et sa vue en plein écran ouverte par figures.js. Aucune bibliothèque, aucun cookie, aucun appel à un tiers. */
.fig{margin:28px auto 30px;max-width:760px}
.fig.fig-2{max-width:940px}
.fig-ouvrir{display:block;width:100%;padding:0;margin:0;border:1px solid var(--filet);background:#fff;cursor:zoom-in;position:relative;font:inherit;color:inherit;text-align:left;-webkit-tap-highlight-color:transparent}
.fig-ouvrir:hover,.fig-ouvrir:focus-visible{border-color:var(--rose)}
.fig-ouvrir:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.fig-pans{display:flex;align-items:flex-start;width:100%}
.fig-pan{display:block;position:relative;overflow:hidden;flex:var(--w) 1 0;aspect-ratio:var(--w)/var(--h);background:#fff}
.fig-pan+.fig-pan{border-left:1px solid var(--filet)}
.fig-pan img{position:absolute;display:block;max-width:none;height:auto;left:calc(var(--x)/var(--w)*-100%);top:calc(var(--y)/var(--h)*-100%);width:calc(var(--W)/var(--w)*100%)}
.fig-pan svg{position:absolute;left:0;top:0;width:100%;height:100%;font-family:var(--sans);font-weight:400}
.fig-pan svg text{font-size:var(--fs);fill:#1A1A1A}
.fig-pan svg text.r{fill:#C08A95;font-weight:500}
.fig-pan svg text.g{font-weight:500}
.fig-loupe{display:flex;align-items:center;justify-content:flex-end;gap:7px;border-top:1px solid var(--filet);padding:9px 12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--noir);font-weight:400}
.fig-loupe svg{width:13px;height:13px;flex:none}
.fig figcaption{font-size:13.5px;line-height:1.6;color:var(--anthracite);padding:12px 2px 0}
.fig figcaption b{font-weight:500;color:var(--noir)}
.fig-cles{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:8px;font-size:13px}
.fig-cles span{display:inline-flex;align-items:center;gap:8px}
.fig-cles i{display:inline-block;flex:none;width:26px;height:14px}
.fig-cles i.h{border:1px solid #C08A95;background:repeating-linear-gradient(135deg,#EFDDE1 0 3px,#C08A95 3px 5px)}
.fig-cles i.t{height:0;border-top:2px dashed #1A1A1A}
/* Lot 30 A2 (Signatures-siege.md § 13, point 4) : le « trait de section » de R7 (trompes-operation) tel que le dessin le trace, deux courts traits pleins, pas des tirets */
.fig-cles i.ts{background:linear-gradient(#1A1A1A,#1A1A1A) 7px 0/3px 14px no-repeat,linear-gradient(#1A1A1A,#1A1A1A) 16px 0/3px 14px no-repeat}
.fig-cles:has(i)>span:not(:has(>i)){padding-left:34px}   /* ligne sans signe dans une clé qui en a : alignée sur le texte des autres lignes */
/* les fiches « Ce que le Dr Gatri opère » : la figure en grand, à gauche du texte sur ordinateur, au-dessus sur téléphone */
.chir.chir-fig{grid-template-columns:minmax(0,430px) 1fr}
.chir.chir-fig .fig{margin:0;max-width:none}
@media(max-width:900px){.chir.chir-fig{grid-template-columns:1fr}}
/* un panneau seul d'un dessin à deux panneaux (fig-demi) : dans la page, à l'échelle des dessins voisins (moitié de la largeur), ses mots à la taille et à la place du plein écran sur téléphone */
.fig.fig-demi .fig-pans{justify-content:center;align-items:center}
.fig.fig-demi .fig-pan{flex:0 0 50%;width:50%}
.fig.fig-demi .fig-pan svg text{font-size:calc(var(--fs)*var(--k,1))}
.fig.fig-demi .fig-pan svg text.ml{transform:translate(0,calc(var(--dy)*(var(--k,1) - 1)*1px))}
/* Lot 30 A1 (Signatures-siege.md § 11) : sur Chirurgie, les mots d'un dessin plus étroit que ses voisins (R3, R4, R7) ramenés à leur échelle dans la page (--kp = largeur du dessin / 1000) ; le plein écran ne change pas (la classe n'y est pas recopiée) */
.fig.fig-mots .fig-pan svg text{font-size:calc(var(--fs)*var(--kp,1))}
.fig.fig-mots .fig-pan svg text.ml{transform:translate(0,calc(var(--dy)*(var(--kp,1) - 1)*1px))}
@media(max-width:640px){
 .fig{margin:22px 0 24px}
 .chir.chir-fig{padding:22px 16px}
 .fig-pans{flex-direction:column}
 .fig-pan{flex:none;width:100%}
 .fig-pan+.fig-pan{border-left:0;border-top:1px solid var(--filet)}
}
/* plein écran */
.fig-plein{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#fff;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom}
.fig-plein::backdrop{background:#fff}
.fig-plein .fig-barre{position:sticky;top:0;left:0;z-index:2;display:flex;justify-content:flex-end;gap:8px;padding:10px 12px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--filet);width:100vw;box-sizing:border-box}
.fig-plein .fig-barre button{background:#fff;border:1px solid var(--noir);color:var(--noir);font:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:10px 14px;min-height:44px;cursor:pointer}
.fig-plein .fig-barre button:hover,.fig-plein .fig-barre button:focus-visible{border-color:var(--rose);color:var(--rose)}
.fig-plein .fig-scene{padding:14px 16px 28px;cursor:zoom-out;min-height:calc(100dvh - 66px);box-sizing:border-box}
.fig-plein .fig-cadre{margin:0 auto;cursor:default;width:min(calc(100vw - 32px),calc((100dvh - 170px)*var(--ar)))}
.fig-plein.zoom .fig-cadre{width:calc(min(calc(100vw - 32px),calc((100dvh - 170px)*var(--ar)))*2)}
.fig-plein .fig-leg{font-size:14px;line-height:1.6;color:var(--anthracite);max-width:760px;margin:14px auto 0;cursor:default}
.fig-plein .fig-leg b{font-weight:500;color:var(--noir)}
@media(max-width:640px){
 .fig-plein .fig-scene{padding:8px 8px 24px}
 .fig-plein .fig-cadre{width:calc(100vw - 16px)}
 .fig-plein.zoom .fig-cadre{width:calc((100vw - 16px)*2)}
 /* précaution téléphone : en plein écran, les mots des légendes grossissent (facteur --k mesuré figure par figure) */
 .fig-plein .fig-pan svg text{font-size:calc(var(--fs)*var(--k,1))}
 .fig-plein .fig-pan svg text.ml{transform:translate(0,calc(var(--dy)*(var(--k,1) - 1)*1px))}
}
@media print{.fig-loupe{display:none}}
/* plein écran, étiquettes au-dessus et au-dessous du dessin (posées par figures.js quand les côtés ne conviennent pas) */
.fig-plein .fig-mob{display:block;width:100%;height:auto;overflow:visible;font-family:var(--sans);font-weight:400}
.fig-plein .fig-mob text{fill:#1A1A1A}
.fig-plein .fig-mob text.r{fill:#C08A95;font-weight:500}
.fig-plein .fig-mob text.g{font-weight:500}
.fig-plein .fig-cadre.mob .fig-pans{display:none}
/* téléphone tourné : la figure prend la largeur, on fait défiler vers le bas */
@media(orientation:landscape) and (max-height:480px){
 .fig-plein .fig-cadre{width:min(calc(100vw - 32px),900px)}
 .fig-plein.zoom .fig-cadre{width:calc(min(calc(100vw - 32px),900px)*2)}
}
