*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:#082d63}body{background:#ddecfb}a{text-decoration:none;color:inherit}.login-page{display:grid;grid-template-columns:58.3% 41.7%;width:100%;min-height:100vh;overflow:hidden}.church-side{position:relative;min-height:100vh;background:url('../img/login-church.png') 43% center/cover no-repeat;overflow:hidden}.church-side:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.02) 38%,rgba(235,246,255,.28) 70%,rgba(225,241,255,.76) 100%)}.church-content{position:relative;z-index:2;width:62%;margin-left:auto;padding:20px 28px 180px;text-align:center;display:flex;flex-direction:column;align-items:center}.brand-logo{width:245px;height:245px;object-fit:contain}.church-content h1{font-size:66px;line-height:1;margin:2px 0 0;font-weight:800;letter-spacing:-3px;white-space:nowrap}.subtitle{font-size:23px;margin:7px 0 0;white-space:nowrap}.gold-line{width:100px;height:4px;background:#ffad00;border-radius:8px;margin:19px 0 23px}.verse{font:italic 600 19px/1.4 Georgia,serif}.verse strong{display:block;font:500 16px Arial;margin-top:7px}.values{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;width:100%;max-width:520px;margin-top:27px}.values>div{display:flex;flex-direction:column;align-items:center}.value{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:25px;margin-bottom:8px;box-shadow:0 5px 12px #06366b20}.value.blue{background:#1687f5}.value.green{background:#13a45d}.value.orange{background:#ff8908}.value.purple{background:#6937b9}.values b{font-size:14px;line-height:1.25}.bottom-wave{position:absolute;z-index:3;left:-8%;bottom:-110px;width:118%;height:310px;background:linear-gradient(120deg,#052b5d,#104d82);border-radius:0 60% 0 0/0 68% 0 0;transform:rotate(3deg);color:#fff}.bottom-wave>div{position:absolute;left:14%;top:56px;transform:rotate(-3deg);font:italic 26px/1.5 "Segoe Script","Brush Script MT",cursive}.bottom-wave span{display:block;width:190px;height:4px;background:#ffb000;border-radius:8px;margin:12px auto 0;transform:rotate(-4deg)}
.form-side{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:55px 42px;background:linear-gradient(145deg,#d9ecff,#eff8ff);overflow:hidden}.form-side:before{content:"";position:absolute;top:-330px;left:-250px;width:790px;height:570px;border-radius:50%;background:#4c9de536;transform:rotate(25deg)}.form-side:after{content:"";position:absolute;bottom:-420px;left:-150px;width:820px;height:590px;border-radius:50%;background:#ffffff8c}.shape{position:absolute;border-radius:50%;pointer-events:none}.shape-a{width:540px;height:350px;right:-120px;top:-180px;background:#ffffff85}.shape-b{width:500px;height:390px;right:-190px;bottom:-220px;border:55px solid #4c9de51b}.login-card{position:relative;z-index:2;width:100%;max-width:600px;min-height:820px;background:#fffffff7;border:1px solid #d2dfed;border-radius:20px;box-shadow:0 12px 30px #2c5b9120;padding:48px 55px 29px;display:flex;flex-direction:column}.login-card header{text-align:center;margin-bottom:42px}.login-card h2{font-size:40px;line-height:1.1;margin:0;font-weight:800}.login-card header p{font-size:18px;color:#58719a;margin:11px 0 0}.alert{display:flex;gap:9px;padding:11px 13px;border-radius:8px;margin:-18px 0 22px;font-size:13px}.error{background:#fff1f2;color:#a1232b;border:1px solid #ffd1d5}.success{background:#eefcf5;color:#12663e;border:1px solid #ccefdc}.field{margin-bottom:27px}.field label{display:block;font-size:16px;font-weight:800;margin-bottom:10px}.input-box{position:relative;display:flex;align-items:center}.input-box>i{position:absolute;left:19px;color:#607ba2;font-size:21px}.input-box input{width:100%;height:58px;border:1px solid #bdcee2;border-radius:10px;padding:0 54px;font-size:16px;color:#173d70;outline:0;background:#fff}.input-box input:focus{border-color:#0874f9;box-shadow:0 0 0 3px #0874f919}.input-box button{position:absolute;right:10px;width:40px;height:40px;border:0;background:transparent;color:#607ba2;font-size:19px;cursor:pointer}.options{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:3px 0 27px;font-size:15px;font-weight:700}.remember{display:flex;align-items:center;gap:9px}.remember input{width:20px;height:20px;accent-color:#0874f9}.options a{color:#0874f9}.submit{height:58px;width:100%;border:0;border-radius:9px;background:linear-gradient(90deg,#0873f5,#087dfb);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;gap:13px;cursor:pointer}.separator{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;margin:30px 0 25px;color:#58739b}.separator span{height:1px;background:#cad8e8}.separator b{font-size:15px}.quick-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.quick-links a{min-height:145px;background:linear-gradient(145deg,#f3f8fe,#e9f3fe);border:1px solid #e0ebf7;border-radius:14px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:19px 7px 13px}.quick-links i{font-size:29px;color:#0874f9;margin-bottom:11px}.quick-links strong{font-size:14px;min-height:38px;display:flex;align-items:center}.quick-links small{font-size:13px;color:#58739a;line-height:1.35}.login-card footer{margin-top:auto;padding-top:34px;text-align:center;color:#4f6c97;font-size:12px;line-height:1.6}.login-card footer strong,.login-card footer a{color:#082d63;font-weight:700}

/* ============================================================
   TABLETTE PAYSAGE — conserve l'esprit desktop
============================================================ */
@media (min-width: 901px) and (max-width: 1250px) {
    .login-page{
        grid-template-columns:52% 48%;
    }
    .church-side{
        min-height:100vh;
        background-position:42% center;
    }
    .church-content{
        width:72%;
        padding:22px 20px 165px;
    }
    .brand-logo{
        width:150px;
        height:150px;
    }
    .church-content h1{
        font-size:48px;
        letter-spacing:-2px;
    }
    .subtitle{
        font-size:17px;
        white-space:normal;
    }
    .gold-line{
        margin:14px 0 18px;
    }
    .verse{
        font-size:15px;
    }
    .values{
        gap:10px;
        margin-top:20px;
    }
    .value{
        width:48px;
        height:48px;
        font-size:20px;
    }
    .values b{
        font-size:11px;
    }
    .bottom-wave{
        bottom:-135px;
        height:275px;
    }
    .bottom-wave>div{
        top:43px;
        font-size:20px;
    }
    .form-side{
        padding:28px 25px;
    }
    .login-card{
        max-width:570px;
        min-height:0;
        padding:35px 38px 25px;
    }
    .login-card header{
        margin-bottom:28px;
    }
    .login-card h2{
        font-size:34px;
    }
    .login-card header p{
        font-size:15px;
    }
    .field{
        margin-bottom:20px;
    }
    .input-box input{
        height:54px;
    }
    .submit{
        height:54px;
    }
    .separator{
        margin:22px 0 19px;
    }
    .quick-links a{
        min-height:125px;
        padding-top:15px;
    }
    .login-card footer{
        margin-top:24px;
        padding-top:0;
    }
}

/* ============================================================
   TABLETTE PORTRAIT
   Bannière compacte en haut + carte immédiatement dessous
============================================================ */
@media (min-width: 601px) and (max-width: 900px) {
    body{
        background:#edf6ff;
    }
    .login-page{
        display:block;
        min-height:100vh;
        overflow:visible;
    }
    .church-side{
        min-height:430px;
        background-position:45% 42%;
        border-radius:0 0 34px 34px;
        box-shadow:0 12px 30px rgba(8,53,103,.10);
    }
    .church-side:after{
        background:
            linear-gradient(90deg,rgba(255,255,255,.02),rgba(226,242,255,.60)),
            linear-gradient(0deg,rgba(7,44,91,.12),transparent 48%);
    }
    .church-content{
        width:58%;
        margin-left:auto;
        padding:15px 24px 90px;
    }
    .brand-logo{
        width:105px;
        height:105px;
    }
    .church-content h1{
        font-size:40px;
        letter-spacing:-1.8px;
    }
    .subtitle{
        font-size:14px;
        white-space:normal;
    }
    .gold-line{
        width:65px;
        height:3px;
        margin:10px 0 12px;
    }
    .verse{
        font-size:12px;
    }
    .verse strong{
        font-size:11px;
    }
    .values{
        gap:8px;
        margin-top:15px;
    }
    .value{
        width:40px;
        height:40px;
        font-size:16px;
        margin-bottom:5px;
    }
    .values b{
        font-size:9px;
    }
    .bottom-wave{
        left:-8%;
        bottom:-155px;
        height:245px;
    }
    .bottom-wave>div{
        top:25px;
        font-size:16px;
    }
    .bottom-wave span{
        width:115px;
        height:3px;
        margin-top:6px;
    }

    .form-side{
        min-height:auto;
        padding:34px 28px 50px;
        overflow:visible;
    }
    .form-side:before,
    .form-side:after,
    .shape{
        opacity:.45;
    }
    .login-card{
        max-width:650px;
        min-height:0;
        padding:38px 42px 28px;
        border-radius:22px;
    }
    .login-card header{
        margin-bottom:30px;
    }
    .login-card h2{
        font-size:34px;
    }
    .login-card header p{
        font-size:15px;
    }
    .field{
        margin-bottom:21px;
    }
    .input-box input{
        height:56px;
        font-size:15px;
    }
    .options{
        margin-bottom:22px;
        font-size:13px;
    }
    .submit{
        height:56px;
        font-size:16px;
    }
    .separator{
        margin:24px 0 20px;
    }
    .quick-links{
        gap:10px;
    }
    .quick-links a{
        min-height:128px;
        padding:15px 7px 12px;
    }
    .quick-links strong{
        font-size:12px;
        min-height:32px;
    }
    .quick-links small{
        font-size:11px;
    }
    .login-card footer{
        margin-top:28px;
        padding-top:0;
        font-size:11px;
    }
}

/* ============================================================
   SMARTPHONE
   Image d'accueil compacte + formulaire confortable au tactile
============================================================ */
@media (max-width: 600px) {
    body{
        background:#edf6ff;
    }
    .login-page{
        display:block;
        min-height:100vh;
        overflow:visible;
    }
    .church-side{
        min-height:350px;
        background-position:44% 45%;
        border-radius:0 0 28px 28px;
        box-shadow:0 10px 25px rgba(8,53,103,.11);
    }
    .church-side:after{
        background:
            linear-gradient(90deg,rgba(255,255,255,.02),rgba(228,243,255,.54)),
            linear-gradient(0deg,rgba(5,42,88,.16),transparent 48%);
    }
    .church-content{
        width:64%;
        margin-left:auto;
        padding:11px 10px 70px;
    }
    .brand-logo{
        width:72px;
        height:72px;
    }
    .church-content h1{
        font-size:29px;
        line-height:1.03;
        letter-spacing:-1.2px;
        white-space:normal;
    }
    .subtitle{
        max-width:245px;
        font-size:10.5px;
        line-height:1.3;
        white-space:normal;
    }
    .gold-line{
        width:50px;
        height:3px;
        margin:7px 0 8px;
    }
    .verse{
        max-width:250px;
        font-size:9.5px;
        line-height:1.35;
    }
    .verse strong{
        margin-top:3px;
        font-size:9px;
    }
    .values{
        max-width:270px;
        gap:4px;
        margin-top:10px;
    }
    .value{
        width:31px;
        height:31px;
        margin-bottom:4px;
        font-size:13px;
    }
    .values b{
        font-size:7px;
        line-height:1.15;
    }
    .bottom-wave{
        left:-17%;
        bottom:-156px;
        width:135%;
        height:220px;
    }
    .bottom-wave>div{
        left:20%;
        top:18px;
        font-size:12px;
        line-height:1.45;
    }
    .bottom-wave span{
        width:82px;
        height:2px;
        margin-top:5px;
    }

    .form-side{
        min-height:auto;
        padding:22px 10px calc(30px + env(safe-area-inset-bottom));
        overflow:visible;
        background:linear-gradient(180deg,#e5f2ff,#f5faff);
    }
    .form-side:before,
    .form-side:after,
    .shape{
        opacity:.25;
    }
    .login-card{
        width:100%;
        max-width:500px;
        min-height:0;
        padding:26px 17px 22px;
        border-radius:20px;
        box-shadow:0 12px 30px rgba(44,91,145,.11);
    }
    .login-card header{
        margin-bottom:25px;
    }
    .login-card h2{
        font-size:29px;
    }
    .login-card header p{
        margin-top:7px;
        font-size:12.5px;
        line-height:1.4;
    }
    .alert{
        margin:-10px 0 18px;
        font-size:12px;
    }
    .field{
        margin-bottom:18px;
    }
    .field label{
        margin-bottom:7px;
        font-size:12.5px;
    }
    .input-box>i{
        left:15px;
        font-size:17px;
    }
    .input-box input{
        height:52px;
        padding:0 45px;
        font-size:13px;
        border-radius:10px;
    }
    .input-box button{
        right:6px;
        width:42px;
        height:42px;
        font-size:17px;
    }
    .options{
        gap:8px;
        margin:1px 0 20px;
        font-size:11px;
    }
    .remember{
        gap:6px;
    }
    .remember input{
        width:17px;
        height:17px;
    }
    .submit{
        height:52px;
        border-radius:10px;
        font-size:15px;
        box-shadow:0 7px 16px rgba(8,116,249,.18);
    }
    .separator{
        gap:10px;
        margin:21px 0 18px;
    }
    .separator b{
        font-size:12px;
    }

    /* Sur smartphone : cartes lisibles en colonne */
    .quick-links{
        grid-template-columns:1fr;
        gap:8px;
    }
    .quick-links a{
        min-height:72px;
        display:grid;
        grid-template-columns:44px 1fr;
        grid-template-rows:auto auto;
        column-gap:10px;
        align-items:center;
        padding:10px 13px;
        text-align:left;
    }
    .quick-links i{
        grid-column:1;
        grid-row:1 / span 2;
        margin:0;
        font-size:23px;
        text-align:center;
    }
    .quick-links strong{
        grid-column:2;
        grid-row:1;
        min-height:0;
        justify-content:flex-start;
        font-size:12px;
    }
    .quick-links small{
        grid-column:2;
        grid-row:2;
        font-size:10.5px;
    }
    .login-card footer{
        margin-top:22px;
        padding-top:0;
        font-size:9.5px;
    }
}

/* Petits téléphones */
@media (max-width: 390px) {
    .church-side{
        min-height:325px;
    }
    .church-content{
        width:67%;
        padding-right:7px;
    }
    .brand-logo{
        width:62px;
        height:62px;
    }
    .church-content h1{
        font-size:25px;
    }
    .subtitle{
        font-size:9.5px;
    }
    .values b{
        font-size:6.5px;
    }
    .form-side{
        padding-left:7px;
        padding-right:7px;
    }
    .login-card{
        padding-left:14px;
        padding-right:14px;
    }
    .options{
        align-items:flex-start;
    }
}

/* Hauteur réduite en paysage mobile/tablette */
@media (max-height: 650px) and (orientation: landscape) and (max-width: 1000px) {
    .login-page{
        display:grid;
        grid-template-columns:46% 54%;
    }
    .church-side,
    .form-side{
        min-height:100vh;
    }
    .church-side{
        border-radius:0;
    }
    .church-content{
        width:78%;
        padding-top:8px;
    }
    .brand-logo{
        width:65px;
        height:65px;
    }
    .church-content h1{
        font-size:27px;
    }
    .subtitle{
        font-size:10px;
    }
    .verse{
        font-size:8px;
    }
    .values{
        margin-top:7px;
    }
    .value{
        width:28px;
        height:28px;
        font-size:11px;
    }
    .values b{
        font-size:6px;
    }
    .bottom-wave{
        display:none;
    }
    .form-side{
        padding:12px;
        overflow:auto;
    }
    .login-card{
        padding:18px 22px;
    }
    .login-card header{
        margin-bottom:15px;
    }
    .login-card h2{
        font-size:25px;
    }
    .field{
        margin-bottom:12px;
    }
    .input-box input{
        height:44px;
    }
    .options{
        margin-bottom:12px;
    }
    .submit{
        height:44px;
    }
    .separator{
        margin:12px 0;
    }
    .quick-links{
        grid-template-columns:repeat(3,1fr);
    }
    .quick-links a{
        min-height:70px;
        display:flex;
        padding:7px 4px;
        text-align:center;
    }
    .quick-links i{
        margin-bottom:3px;
        font-size:18px;
    }
    .quick-links strong{
        justify-content:center;
        font-size:8px;
    }
    .quick-links small{
        font-size:7px;
    }
    .login-card footer{
        margin-top:12px;
    }
}

input:focus-visible,
button:focus-visible,
a:focus-visible{
    outline:3px solid rgba(8,116,249,.24);
    outline-offset:2px;
}