/* LudicOH! Fiches : fenêtre (ordinateur : au centre ; téléphone : depuis le bas) */
html.lof-ouvert { overflow: hidden; }
html.lof-ouvert #ludicoh-pop, html.lof-ouvert #ludicoh-env { display: none !important; }
.lof-fond[hidden] { display: none !important; }
.lof-fond { position: fixed; inset: 0; z-index: 2147483000; background: rgba(0, 40, 60, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; animation: lofFond .2s ease; }
.lof-fen { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow-y: auto; background: #FBF3E7; border-radius: 28px; padding: 34px 32px 26px; box-sizing: border-box; box-shadow: 0 24px 60px rgba(0, 40, 60, 0.35); font-family: 'Balsamiq Sans', 'LudicBalsamiq', system-ui, sans-serif; color: #27343A; text-align: left; animation: lofFen .25s ease; }
.lof-fen *, .lof-fen *::before, .lof-fen *::after { box-sizing: border-box; }
.lof-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0 !important; background: rgba(0, 64, 95, 0.08) !important; color: #00405F !important; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 !important; }
.lof-x:hover, .lof-x:focus-visible { background: rgba(0, 64, 95, 0.16) !important; }
.lof-chip { display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 44px); margin: 0 0 14px !important; padding: 6px 14px !important; border-radius: 999px; background: rgba(237, 151, 81, 0.25); color: #00405F; font-size: 14px !important; font-weight: 700; line-height: 1.3 !important; text-align: left !important; }
.lof-chip .lof-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lof-h { font-family: 'Chewy', 'LudicChewy', system-ui, sans-serif !important; font-weight: 400 !important; font-size: 32px !important; line-height: 1.1 !important; color: #00405F !important; margin: 0 0 8px !important; padding: 0 !important; text-wrap: balance; }
.lof-sous { font-size: 15px !important; line-height: 1.5 !important; margin: 0 0 18px !important; padding: 0 !important; text-align: left !important; }
.lof-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.lof-l { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; color: #00405F; margin: 0; }
.lof-fac { font-weight: 400; color: #3A6E8C; }
.lof-l input { width: 100% !important; font-family: inherit !important; font-size: 16px !important; color: #27343A !important; background: #fff !important; border: 2px solid rgba(0, 64, 95, 0.25) !important; border-radius: 12px !important; padding: 12px 14px !important; margin: 0 !important; box-shadow: none !important; height: auto !important; }
.lof-l input:focus { border-color: #ED9751 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(237, 151, 81, 0.25) !important; }
.lof-pot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.lof-c { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: #27343A; background: #fff; border-radius: 12px; padding: 12px 14px; margin: 0; cursor: pointer; font-weight: 400; }
.lof-c input { width: 20px !important; height: 20px !important; margin: 1px 0 0 !important; flex: 0 0 auto; accent-color: #ED9751; cursor: pointer; }
.lof-c strong { color: #00405F; }
.lof-note, .lof-legal, .lof-petit { font-size: 12.5px !important; line-height: 1.5 !important; color: #3A6E8C !important; margin: 0 !important; padding: 0 !important; }
.lof-legal { text-align: center !important; }
.lof-legal a { color: #00405F !important; font-weight: 700; text-decoration: underline; }
.lof-err { margin: 0 !important; padding: 10px 14px !important; border-radius: 12px; background: #FCE3CD; color: #8A3B0B !important; font-size: 14px !important; font-weight: 700; }
.lof-err[hidden] { display: none !important; }
.lof-btn { display: block; width: 100%; margin: 4px 0 0 !important; font-family: 'Chewy', 'LudicChewy', system-ui, sans-serif !important; font-size: 22px !important; font-weight: 400 !important; line-height: 1.1 !important; color: #00405F !important; background: #ED9751 !important; border: 0 !important; border-radius: 999px !important; padding: 15px 24px !important; cursor: pointer; box-shadow: 0 3px 0 rgba(0, 64, 95, 0.3) !important; text-transform: none !important; letter-spacing: 0 !important; }
.lof-btn:hover, .lof-btn:focus-visible { background: #00405F !important; color: #FBF3E7 !important; }
.lof-btn[disabled] { opacity: .7; cursor: wait; }
.lof-btn-marine { background: #00405F !important; color: #FBF3E7 !important; width: auto; display: inline-block; padding: 13px 30px !important; font-size: 20px !important; }
.lof-btn-marine:hover { background: #ED9751 !important; color: #00405F !important; }
.lof-e2 { text-align: center; padding: 10px 0 4px; }
.lof-e2 p { text-align: center !important; }
.lof-e2[hidden], .lof-e1[hidden] { display: none !important; }
.lof-rond { width: 72px; height: 72px; border-radius: 50%; background: #ED9751; display: flex; align-items: center; justify-content: center; margin: 4px auto 16px; }
.lof-ok-p { font-size: 16px !important; line-height: 1.6 !important; margin: 0 0 14px !important; }
.lof-petit { margin: 0 0 20px !important; }
.lof-lien { background: none !important; border: 0 !important; padding: 0 !important; font: inherit !important; color: #00405F !important; font-weight: 700 !important; text-decoration: underline; cursor: pointer; }
.lof-lien[disabled] { text-decoration: none; cursor: default; color: #3A6E8C !important; }
@keyframes lofFond { from { opacity: 0; } to { opacity: 1; } }
@keyframes lofFen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .lof-fond { align-items: flex-end; padding: 0; }
  .lof-fen { max-width: none; border-radius: 26px 26px 0 0; padding: 28px 20px calc(20px + env(safe-area-inset-bottom)); max-height: 92vh; animation: lofBas .28s ease; }
  .lof-h { font-size: 27px !important; }
  .lof-x { top: 10px; right: 10px; }
}
@keyframes lofBas { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .lof-fond, .lof-fen { animation: none !important; } }