/* Sélecteur de date de naissance (script/date-naissance.js) — couleurs du site */
.dn-champ { cursor: pointer; caret-color: transparent; }
.dn-champ.dn-rempli { color: #fff; }
html.dn-ouvert { overflow: hidden; }
/* page de connexion : les volets en 3D (connexion / inscription) passaient par-dessus la fenêtre */
html.dn-ouvert .login-form { transform-style: flat; perspective: none; }
.dn-voile { position: fixed; inset: 0; z-index: 9000; background: rgba(4,20,24,.55); display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .2s ease; font-family: "Poppins", sans-serif; width: 100%; height: 100%; margin: 0; transform: translateZ(0); isolation: isolate; }
.dn-voile.visible { opacity: 1; }
.dn-feuille { width: 340px; max-width: calc(100% - 32px); background: #fff; color: #17343f; border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.35);
    padding: 18px 16px 14px; transform: translateY(14px) scale(.98); transition: transform .22s ease; }
.dn-voile.visible .dn-feuille { transform: none; }
.dn-tete { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 10px; }
.dn-tete b { font-size: 16px; font-weight: 600; color: #417487; }
.dn-apercu { font-size: 14px; color: #6b7b80; min-height: 20px; }
.dn-roues { position: relative; display: flex; gap: 6px; height: 210px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 70%, transparent 100%); }
.dn-bande { position: absolute; left: 0; right: 0; top: 84px; height: 42px; border-radius: 10px; background: #e7f0f3; border: 1.5px solid #417487; pointer-events: none; }
.dn-col { position: relative; flex: 1; height: 210px; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; outline: none; -webkit-overflow-scrolling: touch; }
.dn-col::-webkit-scrollbar { display: none; }
.dn-col-mois { flex: 1.7; }
.dn-col:focus-visible { box-shadow: inset 0 0 0 2px rgba(65,116,135,.35); border-radius: 10px; }
.dn-item, .dn-vide { height: 42px; line-height: 42px; text-align: center; scroll-snap-align: center; }
.dn-item { font-size: 16px; color: #8a9aa0; cursor: pointer; user-select: none; transition: color .12s, font-size .12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dn-item.sel { color: #17343f; font-weight: 600; font-size: 17px; }
.dn-erreur { margin: 10px 4px 0; padding: 8px 10px; border-radius: 8px; background: #fdecec; color: #b42318; font-size: 13px; line-height: 1.4; text-align: center; }
.dn-actions { display: flex; gap: 10px; margin-top: 14px; }
.dn-actions button { flex: 1; height: 44px; border: 0; border-radius: 10px; font: 600 15px "Poppins", sans-serif; cursor: pointer; }
.dn-annuler { background: #eef2f3; color: #3b4a50; }
.dn-annuler:hover { background: #e2e8ea; }
.dn-valider { background: #417487; color: #fff; }
.dn-valider:hover { background: #366273; }
@media (max-width: 560px) {
    .dn-voile { align-items: flex-end; }
    .dn-feuille { width: 100%; max-width: 100%; border-radius: 20px 20px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateY(100%); }
    .dn-voile.visible .dn-feuille { transform: none; }
}

/* souris : glisser sans aimantation pendant le mouvement */

.dn-col { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }

.dn-col.dn-glisse { cursor: grabbing; scroll-snap-type: none; }