/* ===================================
   OCF-EST STYLE GLOBAL
=================================== */

:root{
    --rouge:#d71920;
    --orange:#f28c28;
    --bleu:#24364b;
    --gris:#f5f5f5;
    --blanc:#ffffff;
    --texte:#444;
}

/* ===================================
   RESET
=================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Segoe UI", Arial, sans-serif;
    background:var(--gris);
    color:var(--texte);
    line-height:1.6;
    min-height:100vh;

    display:flex;
    flex-direction:column;
}

main{
    flex:1;
    padding:20px;
    margin-bottom:50px;
}

/* ===================================
   CONTAINER
=================================== */

.container{
    width:90%;
    max-width:1200px;
    margin:auto;

    display:flex;
    gap:30px;
    align-items:stretch;
    flex-wrap:wrap;
}

/* ===================================
   PAGE ACCUEIL
=================================== */

.accueil,
.formations{
    flex:1;
    min-width:300px;

    background:white;

    padding:30px;

    border-radius:8px;

    box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.message {
    color: var(--rouge);
    font-weight: 600;
    margin-bottom: 15px;
}

/* ===================================
   TITRES
=================================== */

h1,
h2,
h3,
h4,
h5,
h6{
    color:var(--bleu);
    font-weight:600;
}

h1{
    width:100%;
    font-size:2.5rem;
    text-align:center;
    margin-bottom:30px;
}

h1::after{
    content:"";
    display:block;
    width:90px;
    height:4px;
    background:var(--rouge);
    margin:15px auto;
}

h2{
    font-size:2rem;
    margin-bottom:20px;
}

h3{
    font-size:1.5rem;
    margin-bottom:15px;
}

/* ===================================
   TEXTES
=================================== */

p{
    margin-bottom:15px;
}

small,
.petit-texte,
.info,
.note{
    color:var(--rouge);
    font-size:0.9rem;
    font-weight:500;
}

/* ===================================
   LIENS
=================================== */

a{
    color:var(--rouge);
    text-decoration:none;
    transition:0.3s;
}

a:hover{
    color:var(--orange);
}

a.btn{
    color:white;
}

/* ===================================
   HEADER
=================================== */

header{
    background:white;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
    position:sticky;
    top:0;
    z-index:1000;
}

.logo{
    max-width:220px;
    width:100%;
    height:auto;
}

/* ===================================
   NAVIGATION
=================================== */

nav ul{
    display:flex;
    flex-wrap:wrap;
    gap:30px;
    list-style:none;
}

nav a{
    color:var(--bleu);
    font-size:1.1rem;
    font-weight:600;
}

nav a:hover{
    color:var(--rouge);
}

/* ===================================
   BOUTONS
=================================== */

.btn,
button,
input[type="submit"]{
    display:inline-block;
    visibility:visible;
    opacity:1;

    padding:14px 28px;
    background:var(--orange);
    color:#fff;

    border:none;
    border-radius:5px;
    cursor:pointer;
    font-weight:600;
    text-decoration:none;
}

.btn:hover,
button:hover,
input[type="submit"]:hover{
    background:var(--rouge);
    color:white;
}

/* ===================================
   FORMULAIRES
=================================== */

form{
    background:white;
    padding:40px;
    border-top:5px solid var(--orange);
    box-shadow:0 2px 10px rgba(0,0,0,.06);
}

label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:var(--rouge);
}

input,
select,
textarea{
    width:100%;
    padding:14px;
    border:1px solid #d8d8d8;
    border-radius:4px;
    margin-bottom:20px;
    font-size:15px;
}

input:focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:var(--orange);
    box-shadow:0 0 0 3px rgba(242,140,40,.15);
}

input[type="radio"]{
    width:auto;
    margin-right:8px;
}

.form-recherche{
    padding:20px;
    margin-bottom:20px;
}

/* ===================================
   CARTES
=================================== */

.card{
    background:white;
    padding:30px;
    border-radius:6px;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
    transition:.3s;
}

.card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 20px rgba(0,0,0,.08);
}

/* ===================================
   TABLEAUX
=================================== */

.table-responsive{
    overflow-x:auto;
}

table{
    width:100%;
    border-collapse:collapse;
    background:white;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
    margin-bottom:50px;
}

th{
    background:var(--bleu);
    color:var(--orange);
    padding:15px;
    text-align:left;
    white-space:nowrap;
}

td{
    padding:15px;
    border-bottom:1px solid #eee;
    vertical-align:middle;
}

tr:nth-child(even){
    background:#f9f9f9;
}

tr:hover{
    background:#fff4e8;
}

/* ===================================
   CORRECTION TABLEAU ADMIN
=================================== */

.actions-dashboard{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.btn-print{
    cursor:pointer;
    border:none;
}

/* Formulaire autour du tableau admin */
.form-tableau-admin{
    background:transparent;
    padding:0;
    border:none;
    box-shadow:none;
}

.form-tableau-admin p{
    margin-bottom:15px;
}

/* Champs dans le tableau */
table input,
table select,
table textarea{
    width:auto;
    margin-bottom:0;
    padding:6px;
}

table input[type="checkbox"]{
    width:auto;
    margin:0;
    transform:scale(1.2);
    cursor:pointer;
}

table input[type="text"]{
    margin-bottom:0;
}

.input-statut{
    width:130px;
    padding:6px;
    margin-bottom:0;
}

.message-success{
    color:green;
    font-weight:bold;
}

/* ===================================
   IMAGES
=================================== */

img{
    max-width:100%;
    height:auto;
}

/* ===================================
   FOOTER
=================================== */

footer{
    background:#ead4c7;
    padding:50px 8%;
    color:var(--bleu);
}

.footer-content{
    display:flex;
    align-items:center;
    justify-content:center;
}

.footer-contact{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
}

.footer-col{
    display:none;
}

.footer-logo{
    display:flex;
    justify-content:center;
    margin-bottom:20px;
}

.footer-logo img{
    max-height:70px;
}

.footer-contact p{
    margin:0;
    white-space:nowrap;
}

.footer-bottom{
    text-align:center;
    margin-top:40px;
    border-top:1px solid rgba(0,0,0,.1);
    padding-top:20px;
}

/* ===================================
   SECTIONS
=================================== */

section{
    padding:40px 0;
}

/* ===================================
   IMPRESSION
=================================== */

@media print{
    .form-recherche,
    .actions-dashboard,
    footer,
    .no-print,
    script{
        display:none !important;
    }

    body{
        background:white !important;
        display:block;
    }

    main{
        width:100%;
        margin:0;
        padding:0;
    }

    h1{
        text-align:center;
        font-size:20px;
        margin-bottom:20px;
    }

    h1::after{
        display:none;
    }

    table{
        width:100%;
        border-collapse:collapse;
        font-size:11px;
        box-shadow:none;
        margin-bottom:0;
    }

    th,
    td{
        border:1px solid black;
        padding:5px;
    }

    th{
        background:white !important;
        color:black !important;
    }

    tr:nth-child(even),
    tr:hover{
        background:white !important;
    }

    .input-statut{
        border:none;
        background:transparent;
        font-size:11px;
        width:100px;
    }

    table input[type="checkbox"]{
        transform:scale(1.2);
    }
}

/* ===================================
   RESPONSIVE TABLETTE & MOBILE
=================================== */

@media (max-width:768px){

    .container{
        flex-direction:column;
        width:95%;
    }

    nav ul{
        flex-direction:column;
        gap:15px;
        text-align:center;
    }

    h1{
        font-size:1.8rem;
    }

    h2{
        font-size:1.4rem;
    }

    h3{
        font-size:1.2rem;
    }

    section{
        padding:25px 0;
    }

    form{
        padding:20px;
    }

    .form-tableau-admin{
        padding:0;
    }

    .btn,
    button,
    input[type="submit"]{
        width:100%;
        text-align:center;
    }

    .actions-dashboard{
        flex-direction:column;
    }

    .footer-contact{
        flex-direction:column;
        gap:15px;
        text-align:center;
    }

    .footer-contact p{
        white-space:normal;
    }

    .accueil,
    .formations{
        width:100%;
    }
}