/* ============================================================================
   RESPONSIVE CSS - Intranet Parents
   Surcharge de design.css et tableaux.css pour tablettes et smartphones
   Date: 14/03/2026
   ============================================================================ */

/* ============================================================================
   TABLETTE (768px - 1024px)
   ============================================================================ */
@media screen and (max-width: 1024px) {

    #container {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #boite_contenu {
        width: 100% !important;
        padding: 0 5px !important;
        margin: 10px 0 0 0 !important;
    }

    .bloc {
        width: 95% !important;
        margin: 10px auto !important;
        padding: 15px !important;
        height: auto !important;
        background-image: none !important;
        background-color: #FAFAFA;
    }

    #contenu_entete {
        width: 100% !important;
        height: auto !important;
        min-height: 60px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    #logo_nino {
        width: 80px !important;
        margin: 0 5px !important;
    }

    #logo_nino img {
        width: 70px !important;
    }

    #titre_creche {
        width: auto !important;
        flex: 1;
        height: auto !important;
        font-size: 18px !important;
        margin: 5px 0 !important;
        text-align: center;
    }

    #logo_creche,
    #logo_crecheindex {
        width: 130px !important;
        margin: 0 5px !important;
        text-align: right;
    }

    #logo_creche img,
    #logo_crecheindex img {
        max-height: 55px !important;
        max-width: 130px !important;
        width: auto !important;
        height: auto !important;
        float: right;
    }

    #boite_contenu_principal {
        width: 100% !important;
        height: auto !important;
        min-height: 400px;
    }

    #menu_rapide {
        width: 100% !important;
        height: auto !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 3px;
    }

    #menu_rapide img {
        width: 55px !important;
    }

    #btn_accueil,
    #btn_logout,
    #btn_moncompte {
        width: auto !important;
        height: auto !important;
        float: none !important;
    }

    /* Ordre des boutons sur tablette/mobile */
    #btn_accueil { order: 0; }
    #btn_moncompte { order: 7; }
    #btn_reglement { order: 8; float: none !important; width: auto !important; height: auto !important; }
    #btn_projet { order: 9; float: none !important; width: auto !important; height: auto !important; }
    #btn_logout { order: 10; }

    #contenu_centre,
    #contenu_centre_login {
        width: 100% !important;
        height: auto !important;
        min-height: 350px;
        margin-top: 10px !important;
        overflow-x: auto !important;
    }

    /* Logo header tablette : deja gere plus haut via max-height */

    /* Login : formulaire adapte tablette */
    #contenu_centre_login form[name="formulaire_identification"] table {
        width: 60% !important;
        margin: 0 auto !important;
    }

    /* Dual login : empiler les 2 formulaires sur tablette */
    #contenu_centre_login > table {
        width: 95% !important;
    }

    #contenu_centre_login > table > tbody > tr {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    #contenu_centre_login > table > tbody > tr > td {
        width: 100% !important;
        display: block !important;
        border-left: none !important;
        border-bottom: 1px dashed #99b3ff;
        padding: 10px 0 !important;
    }

    #contenu_centre_login > table > tbody > tr > td:last-child {
        border-bottom: none;
    }

    #contenu_centre_login > table > tbody > tr > td > form > table {
        width: 80% !important;
        margin: 0 auto !important;
    }

    #contenu_centre_index {
        margin-top: 5% !important;
    }

    #contenu_centre_index img {
        width: 80px !important;
    }

    #titre_contenu_centre {
        width: 100% !important;
        font-size: 15px !important;
    }

    #footer {
        width: 100% !important;
        font-size: 12px !important;
        height: auto !important;
        padding: 5px 0;
    }

    /* Tableaux : scroll horizontal si trop large */
    .tableau_contenant {
        width: 100% !important;
        margin: 0 !important;
    }

    .tableau_donnees {
        margin: 5px 0 !important;
        width: 100% !important;
    }

    table#tableau_contrats,
    table#tableau_factures,
    table#tableau_conges,
    table#tableau_attestations,
    table#tableau_contact,
    table#tableau_inscription {
        width: 100% !important;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Formulaires : pleine largeur */
    #formulaire_conges table,
    #formulaire_contact table,
    #formulaire_moncompte table {
        width: 100% !important;
    }

    #formulaire_conges table td,
    #formulaire_contact table td,
    #formulaire_moncompte table td {
        font-size: 13px !important;
    }

    .select_enfant {
        width: 180px !important;
        font-size: 11px !important;
    }

    /* Mon compte : empiler les 2 formulaires */
    #contact > table > tbody > tr > td {
        display: block !important;
        width: 100% !important;
    }

    /* News / messages importants */
    #news_importantes table {
        width: 90% !important;
    }
}

/* ============================================================================
   SMARTPHONE (max-width: 767px)
   ============================================================================ */
@media screen and (max-width: 767px) {

    body {
        font-size: 14px;
    }

    #container {
        width: 100% !important;
        padding: 0 !important;
    }

    #boite_contenu {
        width: 100% !important;
        padding: 0 !important;
        margin: 5px 0 0 0 !important;
    }

    .bloc {
        width: 100% !important;
        margin: 5px 0 !important;
        padding: 8px !important;
        height: auto !important;
        background-image: none !important;
        background-color: #FAFAFA;
        box-shadow: none !important;
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        font-size: 1em !important;
        box-sizing: border-box;
    }

    /* Header */
    #contenu_entete {
        width: 100% !important;
        height: auto !important;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        padding: 5px 0;
    }

    #logo_nino {
        width: 50px !important;
        margin: 0 3px 0 0 !important;
    }

    #logo_nino img {
        width: 45px !important;
    }

    .txt_titre_creche {
        font-size: 14px !important;
    }

    #titre_creche {
        width: auto !important;
        flex: 1;
        height: auto !important;
        font-size: 14px !important;
        margin: 0 !important;
        line-height: 1.2em !important;
    }

    #titre_creche #version {
        font-size: 9px !important;
    }

    #logo_creche,
    #logo_crecheindex {
        width: 100px !important;
        margin: 0 3px 0 0 !important;
        text-align: right;
    }

    #logo_creche img,
    #logo_crecheindex img {
        max-height: 40px !important;
        max-width: 100px !important;
        width: auto !important;
        height: auto !important;
        float: right;
    }

    /* Menu boutons */
    #boite_contenu_principal {
        width: 100% !important;
        height: auto !important;
    }

    #menu_rapide {
        width: 100% !important;
        height: auto !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px;
        padding: 3px 0;
    }

    #menu_rapide a img {
        width: 45px !important;
    }

    #btn_accueil,
    #btn_logout,
    #btn_moncompte {
        width: auto !important;
        height: auto !important;
        float: none !important;
    }

    /* Deconnexion toujours en dernier sur mobile */
    #btn_accueil { order: 0; }
    #btn_moncompte { order: 8; }
    #btn_logout { order: 9; }

    /* Page d'accueil : boutons principaux */
    #contenu_centre_index {
        margin-top: 3% !important;
    }

    #contenu_centre_index a img {
        width: 70px !important;
    }

    /* Zone contenu */
    #contenu_centre,
    #contenu_centre_login {
        width: 100% !important;
        height: auto !important;
        min-height: 300px;
        margin-top: 8px !important;
        overflow-x: auto !important;
    }

    #titre_contenu_centre {
        width: 100% !important;
        font-size: 14px !important;
        margin: 5px 0 !important;
    }

    .txt_titre_rubrique {
        font-size: 14px !important;
    }

    /* Footer */
    #footer {
        width: 100% !important;
        font-size: 10px !important;
        height: auto !important;
        padding: 5px 0;
    }

    /* ---- TABLEAUX ---- */

    .tableau_contenant {
        width: 100% !important;
        margin: 0 !important;
    }

    .titre_td_tableau_contenant {
        font-size: 13px !important;
    }

    .img_td_tableau_contenant {
        width: 22px !important;
    }

    .tableau_donnees {
        margin: 5px 0 !important;
        width: 100% !important;
        font-size: 12px !important;
        border-spacing: 2px 3px !important;
    }

    /* ---- CONTRATS : affichage en cartes ---- */
    table#tableau_contrats {
        width: 100% !important;
        display: block !important;
        border-spacing: 0 !important;
    }

    table#tableau_contrats thead {
        display: none !important;
    }

    table#tableau_contrats tbody {
        display: block !important;
        width: 100% !important;
    }

    table#tableau_contrats tbody tr {
        display: block !important;
        margin-bottom: 12px !important;
        border: 1px solid #006 !important;
        border-radius: 8px !important;
        padding: 8px !important;
        background-color: #F3FAFE !important;
        box-shadow: 2px 2px 5px #CCC;
    }

    table#tableau_contrats tbody tr.une_ligne_sur_deux {
        background-color: #E8F4FC !important;
    }

    table#tableau_contrats tbody tr td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 3px 5px !important;
        border: none !important;
        border-bottom: none !important;
        font-size: 12px !important;
        white-space: normal !important;
        box-sizing: border-box;
    }

    table#tableau_contrats tbody tr td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #006;
        display: inline-block;
        min-width: 80px;
        margin-right: 5px;
    }

    /* Premiere cellule (enfant) en titre de carte */
    table#tableau_contrats tbody tr td:first-child {
        font-size: 14px !important;
        font-weight: bold !important;
        color: #003 !important;
        background-color: #D0E4F7 !important;
        border-bottom: 1px solid #99b3ff !important;
        padding: 6px 8px !important;
        margin-bottom: 3px !important;
        text-align: center !important;
        border-radius: 6px 6px 0 0 !important;
    }

    /* Separateur avant les jours */
    table#tableau_contrats tbody tr td:nth-child(6) {
        border-top: 1px dashed #99b3ff !important;
        margin-top: 4px !important;
        padding-top: 6px !important;
    }

    /* Jours : grille 5 colonnes alignees */
    table#tableau_contrats tbody tr td:nth-child(n+6) {
        display: inline-block !important;
        width: 18.5% !important;
        font-size: 11px !important;
        text-align: center !important;
        padding: 4px 1px !important;
        vertical-align: top;
        border: none !important;
        background-color: #E8F0FB !important;
        border-radius: 4px !important;
        margin: 1px 0.5% !important;
    }

    /* Label du jour au-dessus de l'horaire */
    table#tableau_contrats tbody tr td:nth-child(n+6)::before {
        display: block !important;
        min-width: auto !important;
        margin-right: 0 !important;
        margin-bottom: 1px;
        font-size: 10px !important;
        font-weight: bold !important;
        color: #003 !important;
        text-transform: uppercase;
    }

    /* Horaire compact sans retour a la ligne */
    .horaire {
        white-space: nowrap;
        font-size: 10px;
    }

    /* ---- FACTURES : affichage en cartes ---- */
    table#tableau_factures {
        width: 100% !important;
        display: block !important;
        border-spacing: 0 !important;
    }

    table#tableau_factures thead {
        display: none !important;
    }

    table#tableau_factures tbody {
        display: block !important;
        width: 100% !important;
    }

    table#tableau_factures tbody tr {
        display: block !important;
        margin-bottom: 10px !important;
        border: 1px solid #006 !important;
        border-radius: 8px !important;
        padding: 8px !important;
        background-color: #F3FAFE !important;
        box-shadow: 2px 2px 5px #CCC;
    }

    table#tableau_factures tbody tr td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 2px 5px !important;
        border: none !important;
        font-size: 12px !important;
        white-space: normal !important;
        box-sizing: border-box;
    }

    table#tableau_factures tbody tr td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #006;
        display: inline-block;
        min-width: 70px;
        margin-right: 5px;
    }

    table#tableau_factures tbody tr td:first-child {
        font-size: 13px !important;
        font-weight: bold !important;
        color: #003 !important;
        border-bottom: 1px solid #99b3ff !important;
        padding-bottom: 4px !important;
    }

    /* ---- CONGES : affichage en cartes ---- */
    table#tableau_conges:not(#tableau_conges[cellspacing]) {
        width: 100% !important;
        display: block !important;
        border-spacing: 0 !important;
    }

    table#tableau_conges thead {
        display: none !important;
    }

    table#tableau_conges tbody {
        display: block !important;
        width: 100% !important;
    }

    table#tableau_conges tbody tr {
        display: block !important;
        margin-bottom: 10px !important;
        border: 1px solid #006 !important;
        border-radius: 8px !important;
        padding: 8px !important;
        background-color: #F3FAFE !important;
        box-shadow: 2px 2px 5px #CCC;
    }

    table#tableau_conges tbody tr td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 2px 5px !important;
        border: none !important;
        font-size: 12px !important;
        white-space: normal !important;
        box-sizing: border-box;
    }

    table#tableau_conges tbody tr td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #006;
        display: inline-block;
        min-width: 70px;
        margin-right: 5px;
    }

    table#tableau_conges tbody tr td:first-child {
        font-size: 13px !important;
        font-weight: bold !important;
        color: #003 !important;
        border-bottom: 1px solid #99b3ff !important;
        padding-bottom: 4px !important;
    }

    /* ---- ATTESTATIONS ---- */

    /* Menu choix attestation : empiler les radio buttons */
    #menu_attestations table {
        width: 100% !important;
    }

    #menu_attestations table tbody tr {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    #menu_attestations table tbody tr td.entete {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 5px 8px !important;
        font-size: 14px !important;
        height: auto !important;
        border-right: none !important;
        box-sizing: border-box;
    }

    #menu_attestations table tbody tr td.entete:first-child {
        font-size: 13px !important;
        border-bottom: 1px solid #99b3ff;
        margin-bottom: 3px;
    }

    /* Tableau attestations : empiler les cellules */
    table#tableau_attestations {
        width: 100% !important;
        display: block !important;
    }

    table#tableau_attestations tbody {
        display: block !important;
        width: 100% !important;
    }

    /* Forcer block uniquement sur les tr visibles (style="display:table-row" du PHP) */
    /* Les tr avec display:none ne matchent pas ce selecteur, donc restent masques */
    table#tableau_attestations tr[style*="table-row"] {
        display: block !important;
    }

    table#tableau_attestations tr {
        margin-bottom: 10px !important;
        border: 1px solid #006 !important;
        border-radius: 8px !important;
        padding: 8px !important;
        background-color: #F3FAFE !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    table#tableau_attestations tr#entete_tr_menu {
        display: block !important;
        background-color: #006 !important;
        border-radius: 8px !important;
    }

    table#tableau_attestations tr td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 5px 10px !important;
        border: none !important;
        border-right: none !important;
        border-bottom: none !important;
        font-size: 13px !important;
        box-sizing: border-box;
    }

    table#tableau_attestations .tdattestation_gauche {
        width: 100% !important;
        display: block !important;
        height: auto !important;
        padding: 8px 10px !important;
        border-right: none !important;
        border-bottom: 1px dashed #99b3ff !important;
        font-size: 15px !important;
        text-align: center !important;
    }

    table#tableau_attestations .titre {
        font-size: 14px !important;
        height: auto !important;
        padding: 6px !important;
    }

    table#tableau_attestations .entete {
        font-size: 13px !important;
        height: auto !important;
        padding: 6px 10px !important;
    }

    table#tableau_attestations a {
        font-size: 16px !important;
        display: inline-block;
        margin: 5px 0;
    }

    table#tableau_attestations a:hover {
        font-size: 17px !important;
    }

    /* Boutons calendrier attestations */
    #tableau_attestations button[name="f_btn1"],
    #tableau_attestations button[name="f_btn2"] {
        width: 120px !important;
        font-size: 11px !important;
    }

    #tableau_attestations input[type="text"] {
        width: 90% !important;
        max-width: 120px;
    }

    #tableau_attestations select.select_enfant {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ---- FORMULAIRES ---- */

    /* Conges */
    #formulaire_conges table {
        width: 100% !important;
    }

    #formulaire_conges table td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        font-size: 12px !important;
        padding: 3px 5px !important;
        box-sizing: border-box;
    }

    #formulaire_conges input[type="text"],
    #formulaire_conges textarea {
        width: 90% !important;
        box-sizing: border-box;
    }

    #formulaire_conges button[name="f_btn1"],
    #formulaire_conges button[name="f_btn2"] {
        width: 120px !important;
        margin-top: 3px !important;
    }

    #formulaire_conges input[name="conges_submit"] {
        width: 80% !important;
        font-size: 13px !important;
    }

    /* Contact */
    #formulaire_contact table {
        width: 100% !important;
    }

    #formulaire_contact table td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        font-size: 12px !important;
        padding: 3px 5px !important;
        box-sizing: border-box;
    }

    #formulaire_contact textarea {
        width: 95% !important;
        height: 100px !important;
        box-sizing: border-box;
    }

    #formulaire_contact input[type="text"] {
        width: 90% !important;
        box-sizing: border-box;
    }

    #formulaire_contact input[name="contact_submit"] {
        width: 80% !important;
        font-size: 13px !important;
    }

    .select_enfant {
        width: 95% !important;
        max-width: 250px;
        font-size: 11px !important;
    }

    /* Mon compte : empiler les 2 formulaires */
    #contact > table > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
    }

    div#formulaire_moncompte {
        width: 100% !important;
        padding: 0 !important;
    }

    div#formulaire_moncompte table.tableau_donnees,
    div#formulaire_moncompte table#tableau_contact {
        width: 95% !important;
        max-width: 100% !important;
        margin: 0 auto 12px auto !important;
        border-radius: 10px !important;
        border-spacing: 0 !important;
        border-collapse: collapse !important;
    }

    /* Toutes les cellules du formulaire moncompte */
    div#formulaire_moncompte table td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 13px !important;
        padding: 3px 5px !important;
        box-sizing: border-box !important;
    }

    /* Inputs texte et password */
    .input_moncompte {
        width: 75% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 12px !important;
        padding: 3px 5px !important;
        height: 22px !important;
        margin: 0 auto 2px auto !important;
        display: block !important;
    }

    /* Boutons submit */
    div#formulaire_moncompte input[name="moncompte_submit"],
    div#formulaire_moncompte input[name="moncompte_submit_pwd"] {
        width: 75% !important;
        font-size: 12px !important;
        height: 28px !important;
        margin: 6px auto !important;
        display: block !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }

    /* Inscription / premiere connexion */
    table#tableau_inscription {
        width: 100% !important;
    }

    table#tableau_inscription .tdattestation_gauche {
        width: 100% !important;
        display: block;
        text-align: left !important;
        height: auto !important;
    }

    /* ---- PAGE DE CONNEXION (index2.php) ---- */

    /* Logo header smartphone : deja gere plus haut via max-height */

    /* Formulaire login : table plus large et centree */
    #contenu_centre_login form[name="formulaire_identification"] table {
        width: 92% !important;
        max-width: 340px;
        margin: 0 auto !important;
    }

    /* Dual login : empiler les 2 formulaires sur smartphone */
    #contenu_centre_login > table {
        width: 100% !important;
    }

    #contenu_centre_login > table > tbody > tr {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    #contenu_centre_login > table > tbody > tr > td {
        width: 100% !important;
        display: block !important;
        border-left: none !important;
        border-bottom: 1px dashed #99b3ff;
        padding: 8px 0 !important;
    }

    #contenu_centre_login > table > tbody > tr > td:last-child {
        border-bottom: none;
    }

    #contenu_centre_login > table > tbody > tr > td > form > table {
        width: 95% !important;
        margin: 0 auto !important;
    }

    #contenu_centre_login > table > tbody > tr > td > form .input {
        width: 80% !important;
        max-width: 250px;
    }

    /* Logo Nino au-dessus du formulaire : plus petit */
    #contenu_centre_login form[name="formulaire_identification"] td img[alt="Logo Nino"] {
        width: 50px !important;
    }

    /* Toutes les cellules : empilees verticalement et centrees */
    #contenu_centre_login form[name="formulaire_identification"] table td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 5px 0 !important;
        box-sizing: border-box;
    }

    /* Labels : style adapte mobile */
    #contenu_centre_login form[name="formulaire_identification"] table td:first-child {
        font-size: 15px !important;
        padding-bottom: 2px !important;
    }

    /* Inputs login : plus grands pour le tactile */
    #contenu_centre_login .input {
        width: 90% !important;
        max-width: 280px;
        height: 40px !important;
        font-size: 16px !important;
        padding: 6px 12px !important;
        box-sizing: border-box;
        border: 1px solid #99b3ff;
        border-radius: 6px;
    }

    /* Bouton connexion */
    .submit_login {
        width: 80px !important;
        height: 80px !important;
        background-size: contain !important;
    }

    /* Liens premiere connexion / mdp perdu */
    .premiere_connexion {
        font-size: 13px !important;
        line-height: 1.4em !important;
    }

    /* ---- INSCRIPTION / RECUPERATION MDP ---- */

    /* Tables formulaires inscription */
    #inscription table.tableau_donnees td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 5px 5px !important;
        height: auto !important;
        box-sizing: border-box;
    }

    #inscription table.tableau_donnees input[type="text"],
    #inscription table.tableau_donnees input[type="password"] {
        width: 85% !important;
        max-width: 260px;
        height: 36px !important;
        font-size: 15px !important;
        padding: 5px 10px !important;
        box-sizing: border-box;
        border: 1px solid #99b3ff;
        border-radius: 6px;
    }

    #inscription input[type="submit"] {
        margin-top: 8px !important;
        padding: 8px 20px !important;
        font-size: 14px !important;
        border-radius: 8px;
        cursor: pointer;
    }

    /* Ancien login (generique) */
    .input {
        width: 90% !important;
        max-width: 250px;
        font-size: 14px !important;
        box-sizing: border-box;
    }

    /* News / messages importants */
    #news_importantes table {
        width: 95% !important;
    }

    /* Enquete satisfaction */
    #formdeposer_enquete table {
        width: 100% !important;
    }

    /* Liens retour */
    #lien_retour_inscription a,
    #lien_retour_compte a {
        font-size: 13px !important;
    }

    /* Infos personnelles */
    .td_gauche {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        font-weight: bold;
        padding: 2px 5px !important;
    }

    .td_droite {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 0 5px 5px 15px !important;
        border-bottom: 1px solid #DDD;
    }

    /* Menu attestations */
    #menu_attestations table tbody tr td a {
        font-size: 14px !important;
    }

    #menu_attestations table tbody tr td a:hover {
        font-size: 15px !important;
    }
}

/* ============================================================================
   PETIT SMARTPHONE (max-width: 480px)
   ============================================================================ */
@media screen and (max-width: 480px) {

    .txt_titre_creche {
        font-size: 12px !important;
    }

    #titre_creche {
        font-size: 12px !important;
    }

    #menu_rapide a img {
        width: 38px !important;
    }

    #contenu_centre_index a img {
        width: 60px !important;
    }

    .tableau_donnees {
        font-size: 11px !important;
    }

    table#tableau_attestations .titre {
        font-size: 14px !important;
    }

    /* Contrats cartes : jours passent en 3+2 colonnes sur petit ecran */
    table#tableau_contrats tbody tr td:nth-child(n+6) {
        width: 30% !important;
        margin: 2px 1% !important;
        font-size: 10px !important;
    }

    .horaire {
        font-size: 9px !important;
    }

    /* Cartes contrats/factures/conges plus compactes */
    table#tableau_contrats tbody tr,
    table#tableau_factures tbody tr,
    table#tableau_conges tbody tr {
        padding: 6px !important;
        margin-bottom: 8px !important;
    }

    table#tableau_contrats tbody tr td:first-child,
    table#tableau_factures tbody tr td:first-child,
    table#tableau_conges tbody tr td:first-child {
        font-size: 12px !important;
    }

    /* Login : formulaire plus compact sur petit ecran */
    #contenu_centre_login form[name="formulaire_identification"] table {
        width: 95% !important;
    }

    #contenu_centre_login .input {
        height: 38px !important;
        font-size: 15px !important;
    }

    .submit_login {
        width: 70px !important;
        height: 70px !important;
    }

    .premiere_connexion {
        font-size: 12px !important;
    }

    /* Inscription : inputs plus compacts */
    #inscription table.tableau_donnees input[type="text"],
    #inscription table.tableau_donnees input[type="password"] {
        width: 90% !important;
        height: 34px !important;
        font-size: 14px !important;
    }
}