/* =======================================================
   FSAC - Portail candidatures (accueil / connexion / mot de passe)
   Palette sobre et institutionnelle : marine / gris / blanc
   ======================================================= */

:root{
    --fsac-navy:       #16304D;
    --fsac-navy-dark:  #0E2135;
    --fsac-slate:      #4B5A68;
    --fsac-gold:       #A9852D;
    --fsac-bg:         #F4F6F8;
    --fsac-surface:    #FFFFFF;
    --fsac-border:     #D9DEE3;
    --fsac-text:       #2A333C;
    --fsac-text-muted: #5B6673;
    --fsac-danger:     #B3261E;
    --fsac-danger-bg:  #FBEAEA;
}

*{
    box-sizing:border-box;
}

body{
    font-family:"Segoe UI",Arial,Tahoma,sans-serif;
    color:var(--fsac-text);
    background:var(--fsac-bg);
    margin:0;
}

/* ---------- HEADER / FOOTER ---------- */

.header{
    padding:22px 10px;
    text-align:center;
    background:var(--fsac-navy);
    color:#fff;
    border-bottom:3px solid var(--fsac-gold);
}

.header h1{
    font-size:19px;
    font-weight:600;
    margin:10px 0 4px;
    text-align:center;
    letter-spacing:.2px;
}

.header h2,
.header h3{
    color:#fff;
    text-align:center;
    font-weight:500;
    margin:6px 0;
}

.header p{
    margin:2px 0 0;
    color:#C9D3DC;
}

.footer{
    padding:14px;
    text-align:center;
    background:var(--fsac-navy);
    color:#C9D3DC;
}

.footer h4{
    margin:0;
    font-weight:500;
    font-size:13px;
}

img.logo{
    width:9%;
    min-width:70px;
    height:auto;
}

/* ---------- LAYOUT (index / connexion) ---------- */

.row{
    display:flex;
    flex-wrap:wrap;
}

.side{
    flex:35%;
    background:var(--fsac-bg);
    padding:40px 24px;
    border-left:1px solid var(--fsac-border);
}

.main{
    flex:65%;
    background:var(--fsac-surface);
    padding:36px 32px;
}

.main h1{
    color:var(--fsac-navy);
    font-size:19px;
    font-weight:600;
    text-align:left;
}

.submain{
    display:flex;
    flex-wrap:wrap;
    padding-top:20px;
    gap:20px;
}

.sub1,
.sub2{
    flex:1 1 300px;
    background:var(--fsac-surface);
    border:1px solid var(--fsac-border);
    border-radius:6px;
    padding:20px;
}

h3{
    color:var(--fsac-navy);
    text-align:center;
    font-size:15px;
    font-weight:600;
    padding-bottom:10px;
    margin-top:0;
}

ul{
    color:var(--fsac-text-muted);
    margin:0;
    padding-left:20px;
}

li{
    padding:4px 0;
}

/* ---------- CTA BUTTONS ---------- */

#btn{
    display:block;
    width:100%;
    background:var(--fsac-navy);
    color:#fff;
    font-weight:600;
    font-size:13.5px;
    padding:16px 14px;
    border:none;
    border-radius:4px;
    cursor:pointer;
    margin:0 0 14px;
    transition:background-color .15s;
}

#btn:hover{
    background:var(--fsac-navy-dark);
}

/* ---------- LOGIN / RECOVERY CARD ---------- */

form{
    background:var(--fsac-surface);
    border:1px solid var(--fsac-border);
    border-top:3px solid var(--fsac-navy);
    border-radius:6px;
    padding:24px;
    box-shadow:0 1px 4px rgba(22,48,77,.06);
}

.side h2{
    color:var(--fsac-navy);
    text-align:center;
    font-size:17px;
    font-weight:600;
    margin-top:0;
}

.imgcontainer{
    width:100%;
    text-align:center;
    margin:0 0 16px;
}

img.avatar{
    width:64px;
    height:64px;
    border-radius:50%;
    border:2px solid var(--fsac-border);
}

label{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--fsac-text);
    margin-bottom:4px;
}

input[type=text],
input[type=password]{
    width:100%;
    padding:10px 12px;
    margin:0 0 14px;
    border:1px solid var(--fsac-border);
    border-radius:4px;
    font-size:14px;
    transition:border-color .15s, box-shadow .15s;
}

input[type=text]:focus,
input[type=password]:focus{
    outline:none;
    border-color:var(--fsac-navy);
    box-shadow:0 0 0 3px rgba(22,48,77,.15);
}

button{
    background:var(--fsac-navy);
    color:#fff;
    font-weight:600;
    font-size:13.5px;
    padding:11px 20px;
    margin:6px 0 0;
    border:none;
    border-radius:4px;
    cursor:pointer;
    width:100%;
    transition:background-color .15s;
}

button:hover{
    background:var(--fsac-navy-dark);
    opacity:1;
}

/* "Mot de passe oublié" secondary button/link */
form button[type=button]{
    background:transparent;
    color:var(--fsac-slate);
    font-weight:500;
    text-decoration:underline;
}

form button[type=button]:hover{
    background:transparent;
    color:var(--fsac-navy);
}

form button a{
    color:inherit;
    text-decoration:none;
}

/* ---------- ALERTS ---------- */

.close,
.erreur{
    text-align:center;
    color:var(--fsac-danger);
    font-weight:600;
    background:var(--fsac-danger-bg);
    border:1px solid var(--fsac-danger);
    border-radius:4px;
    padding:12px;
    margin:16px 0;
}

.reclamation{
    text-align:left;
    font-size:12.5px;
    color:var(--fsac-text-muted);
    background:var(--fsac-bg);
    border:1px solid var(--fsac-border);
    border-radius:6px;
    padding:16px;
    margin-top:24px;
}

/* ---------- RECOVERY PAGE (mo/index.php, mo/conn.php) ---------- */

.shaper{
    display:flex;
    justify-content:center;
    padding:30px 16px;
}

.container{
    width:100%;
    max-width:420px;
    background:var(--fsac-surface);
    border:1px solid var(--fsac-border);
    border-top:3px solid var(--fsac-navy);
    border-radius:6px;
    padding:28px 32px;
    box-shadow:0 1px 4px rgba(22,48,77,.06);
}

.container input{
    display:block;
    width:100%;
    padding:10px 12px;
    margin:0 0 14px;
    border:1px solid var(--fsac-border);
    border-radius:4px;
    font-size:14px;
}

.container input:focus{
    outline:none;
    border-color:var(--fsac-navy);
    box-shadow:0 0 0 3px rgba(22,48,77,.15);
}

.msg{
    font-weight:500;
    color:var(--fsac-text-muted);
    text-align:center;
    max-width:520px;
    margin:0 auto;
    padding:20px 16px 0;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width:700px){

    .row,
    .submain{
        flex-direction:column;
    }

    img.logo{
        width:26%;
        min-width:90px;
    }

    .side{
        border-left:none;
        border-top:1px solid var(--fsac-border);
    }
}