/* === Utilitaires === */
.left{
float:left;
}
.right{
float:right;
}
.center{
text-align:center;
}
.clear{
clear:both;
}

/* === Base === */
body{
margin:0;
padding:0;
background:url(../images/fond_body_.gif) top center repeat-y;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

img{
border:none;
}

/* === Layout principal === */
#conteneur_site{
width:940px;
margin:0 auto;
}

#corps{
background:url(../images/corps/fond_page_.gif) repeat-y;
width:937px;
padding-bottom:8px;
}

.colonnes{
display:flex;
align-items:flex-start;
}

#col_g{
width:656px;
background:url(../images/corps/fond_col_g.gif) repeat-y;
box-sizing:border-box;
padding:0 8px;
}

/* Titre principal (H1) – SEO */
h1.titre-principal{
margin:0 0 12px 0;
font-size:1.35em;
font-weight:bold;
line-height:1.3;
}

#col_d{
width:237px;
background:url(../images/corps/col_d/fond_col_d.gif) repeat-y;
position:-webkit-sticky;
position:sticky;
top:10px;
}

.decalage_top_10px{
height:10px;
}

/* === Catégories === */
.zone_img{
width:148px;
}

.photo img{
border:1px solid #d4d4d4;
}

.photo{
padding-top:13px;
text-align:center;
}

.fond_bloc_categ{
background-color:#e9e9eb;
margin-left:7px;
width:636px;
}

.fond_titre{
background:url(../images/corps/fond_titre.gif) no-repeat;
width:487px;
height:36px;
}

#fond_gros_titre{
background:url(../images/corps/fond_gros_titre.gif) no-repeat;
width:639px;
height:30px;
margin:0 -8px;
color:#FFFFFF;
font-size:18px;
font-weight:bold;
padding-top:16px;
padding-left:19px;
}

/* === Header === */
#visuel_plan{
background:url(../images/header/plan_def_.jpg) no-repeat bottom left;
width:294px;
height:347px;
text-align:center;
}

#header_d{
background:url(../images/header/visuel_d_header_.jpg) no-repeat;
width:644px;
height:347px;
}

/* === Détails catégories === */
.titre{
font-size:16px;
font-weight:bold;
color:#08ade2;
width:331px;
padding-top:8px;
padding-left:16px;
}

.bt_autre_demande{
margin-top:6px;
}

.fond_detail_categ{
background:url(../images/corps/border_g_categorie.gif) repeat-y;
width:487px;
}

.fond_detail_categ ul{
list-style:none;
margin:0px 0px 0px 17px;
padding:10px 0px 10px 0px;
}

.fond_detail_categ ul li a,.txt_tab a{
color:#656c74;
text-decoration:none;
}

.fond_detail_categ ul li a:hover,.txt_tab a:hover{
text-decoration:underline;
}

.categ{
margin:0 -8px 8px;
}

#bottom_col_g{
background:url(../images/corps/bottom_col_g_.gif) no-repeat;
width:656px;
height:21px;
margin:0 -8px;
}

/* === Colonne droite === */
#fond_comment_marche{
background:url(../images/corps/col_d/fond_comment_marche.gif) no-repeat;
width:214px;
height:31px;
color:#FFFFFF;
font-size:18px;
font-weight:bold;
margin-top:5px;
padding-top:8px;
padding-left:22px;
}

#fond_menu{
background:url(../images/corps/col_d/fond_menu.jpg) no-repeat;
width:237px;
height:205px;
margin-bottom:15px;
}

.menu{
width:216px;
text-align:center;
margin-left:15px;
height:54px;
}

.menu_bleu{
color:#08ade2;
font-size:22px;
font-weight:bold;
line-height:16px;
}

.menu_bleu_18{
color:#08ade2;
font-size:18px;
font-weight:bold;
line-height:18px;
}

.menu_gris{
font-size:16px;
color:#766d6d;
}

.decalage_top_16px{
padding-top:16px;
}

#fond_num1{
background:url(../images/corps/col_d/fond_1.gif) #f8dd50 no-repeat top left;
width:237px;
padding-top:10px;
padding-bottom:10px;
}

#fond_num2{
background:url(../images/corps/col_d/fond_2.gif) #f8dd50 no-repeat top left;
width:237px;
padding-top:10px;
padding-bottom:10px;
}

#fond_num3{
background:url(../images/corps/col_d/fond_3.gif) #f8dd50 no-repeat top left;
width:237px;
padding-top:10px;
padding-bottom:10px;
}

.txt_fond_num{
width:183px;
margin-left:46px;
}

.txt_bleu{
color:#0790bc;
font-size:14px;
font-weight:bold;
}

.txt_gris{
color:#54595b;
font-size:12px;
}

.bottom_fond_num{
background:url(../images/corps/col_d/bottom_fond_num.gif) no-repeat;
width:237px;
height:7px;
}

/* === Tableau confiance === */
.fond_tab{
background:url(../images/corps/tableau/fond_tab.gif) repeat-y;
width:902px;
margin-left:18px;
}

.gros_titre_tab{
background:url(../images/corps/tableau/gros_titre_tab.gif) no-repeat;
width:879px;
height:39px;
color:#FFFFFF;
font-size:18px;
padding-top:18px;
padding-left:23px;
}

.fond_col_tab{
background:url(../images/corps/tableau/fond_col_tab.gif) repeat-y;
width:902px;
margin-bottom:8px;
}

.header_tab{
background:url(../images/corps/tableau/header_tab.gif) no-repeat top left;
width:902px;
padding-bottom:8px;
}

.confiance-layout{
display:flex;
align-items:flex-start;
gap:12px;
padding:10px;
}

.confiance-photo{
flex-shrink:0;
padding-left:10px;
}

.confiance-photo img{
border:1px solid #cccccc;
}

.confiance-table{
flex:1;
}

.confiance-row{
display:flex;
gap:10px;
}

.confiance-header{
margin-bottom:8px;
padding-bottom: 8px;
}

.col1{
width:176px;
text-align:center;
}

.col2{
width:162px;
text-align:center;
}

.col3{
width:218px;
text-align:center;
}

.col4{
width:123px;
text-align:center;
}

.titre_tab{
color:#FFFFFF;
font-size:12px;
font-weight:bold;
}

.txt_tab{
font-size:14px;
color:#878282;
padding-top:4px;
padding-bottom:4px;
}

.bottom_tab{
background:url(../images/corps/tableau/bottom_tab_.gif) no-repeat;
width:902px;
height:21px;
}

/* === Footer === */
#footer{
background:url(../images/footer/fond_footer_.gif) no-repeat;
width:937px;
text-align:center;
padding-top:25px;
padding-bottom:25px;
color:#666d75;
font-size:12px;
}

#footer a{
color:#666d75;
font-size:12px;
}

/* === Espacements (legacy) === */
.decalage_g_20px{
width:20px;
}

.decalage_g_12px{
width:12px;
}

.decalage_g_10px{
width:10px;
}

/* === Description catégorie === */
.description{
    position:relative;
    margin:15px 0;
    padding:16px 16px 16px 52px;
    font-size:13px;
    line-height:1.6;
    color:#1a4a6e;
    font-family:Arial, Helvetica, sans-serif;
    background:#e8f4fd;
    text-align:left;
    border:none;
    border-left:4px solid #08ade2;
    border-radius:6px;
}

.description::before{
    content:"i";
    position:absolute;
    left:14px;
    top:16px;
    width:26px;
    height:26px;
    background:#08ade2;
    color:#fff;
    border-radius:50%;
    font-size:15px;
    font-weight:bold;
    font-style:italic;
    font-family:Georgia, serif;
    display:flex;
    align-items:center;
    justify-content:center;
}

.rouge,.alerte{
    color:#CC5555;
}

.message-erreur{
    display:block;
    text-align:center;
    margin:10px 0;
    font-weight:bold;
}

/* === Dialog mentions légales === */
dialog#mentions-dialog{
    max-width:600px;
    width:90%;
    max-height:80vh;
    border:1px solid #ccc;
    border-radius:8px;
    padding:30px;
    box-shadow:0 4px 20px rgba(0,0,0,0.3);
}

dialog#mentions-dialog::backdrop{
    background:rgba(0,0,0,0.5);
}

.dialog-close{
    position:absolute;
    top:10px;
    right:15px;
    background:none;
    border:none;
    font-size:24px;
    cursor:pointer;
    color:#666;
    line-height:1;
}

.dialog-close:hover{
    color:#000;
}

#mentions_content h2{
    color:#08ade2;
    margin-top:0;
}

#mentions_content h3{
    color:#666d75;
}

/* === Bandeau cookies === */
#cookie-banner{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:9999;
    background:#2a2d35;
    color:#e0e0e0;
    padding:16px 20px;
    font-size:13px;
    line-height:1.5;
    display:flex;
    align-items:center;
    gap:16px;
    box-shadow:0 -2px 10px rgba(0,0,0,0.2);
}

#cookie-banner p{
    margin:0;
    flex:1;
}

.cookie-buttons{
    display:flex;
    gap:8px;
    flex-shrink:0;
}

.cookie-buttons button{
    padding:8px 20px;
    border:none;
    border-radius:4px;
    font-size:13px;
    font-weight:bold;
    cursor:pointer;
}

#cookie-accept{
    background:#08ade2;
    color:#fff;
}

#cookie-accept:hover{
    background:#069acc;
}

#cookie-reject{
    background:transparent;
    color:#bbb;
    border:1px solid #666;
}

#cookie-reject:hover{
    color:#fff;
    border-color:#999;
}

/* === Champs de formulaire === */
#col_g input[type="text"],
#col_g input[type="email"],
#col_g input[type="tel"],
#col_g input[type="number"],
#col_g input[type="password"],
#col_g textarea,
#col_g select{
    border:1px solid #b0d4e8;
    border-radius:4px;
    padding:8px 10px;
    font-size:13px;
    font-family:Arial, Helvetica, sans-serif;
    color:#333;
    background:#fff;
    outline:none;
    transition:border-color 0.2s, box-shadow 0.2s;
}

#col_g input[type="text"]:focus,
#col_g input[type="email"]:focus,
#col_g input[type="tel"]:focus,
#col_g input[type="number"]:focus,
#col_g input[type="password"]:focus,
#col_g textarea:focus,
#col_g select:focus{
    border-color:#08ade2;
    box-shadow:0 0 0 3px rgba(8,173,226,0.15);
}

#col_g input[type="radio"],
#col_g input[type="checkbox"]{
    accent-color:#08ade2;
    width:16px;
    height:16px;
    vertical-align:middle;
    margin-right:4px;
}

/* === Bouton CTA === */
#col_g input[type="submit"]{
    padding:12px 40px;
    font-size:16px;
    cursor:pointer;
    border-radius:6px;
    border:none;
    background:#08ade2;
    color:#fff;
    font-weight:bold;
    margin:10px 0;
}

#col_g input[type="submit"]:hover{
    background:#069acc;
}

/* ============================================ */
/* === Responsive : débordement > 960px     === */
/* ============================================ */
@media (max-width:960px){
    body{
        overflow-x:hidden;
    }
    #conteneur_site{
        width:100%;
        overflow-x:clip;
    }
}

/* ============================================ */
/* === Responsive : mobile < 768px          === */
/* ============================================ */
@media (max-width:768px){

    /* --- Reset global --- */
    *,*::before,*::after{
        box-sizing:border-box;
    }

    body{
        background:#f5f6f8;
        font-size:14px;
    }

    .left{
        float:none;
    }

    .clear{
        display:none;
    }

    /* --- Conteneur --- */
    #conteneur_site{
        width:100%;
    }

    .colonnes{
        display:block;
    }

    /* --- Header : logo seul, centré --- */
    #header{
        background:#fff;
        border-bottom:1px solid #ddd;
    }

    #header_g{
        width:100%;
        text-align:center;
    }

    #visuel_plan{
        background:none;
        width:100%;
        height:auto;
        padding:12px 0;
    }

    #visuel_plan .logo{
        max-width:180px;
        height:auto;
    }

    #header_d{
        display:none;
    }

    /* --- Corps : pleine largeur --- */
    #corps{
        background:none;
        width:100%;
        padding-bottom:0;
    }

    .decalage_g_20px{
        display:none;
    }

    /* --- Colonne principale --- */
    #col_g{
        width:100%;
        background:none;
        padding:0 12px;
    }

    #bottom_col_g{
        display:none;
    }

    /* --- Titre principal (bandeau bleu) --- */
    #fond_gros_titre{
        background:#08ade2;
        width:100%;
        height:auto;
        font-size:16px;
        padding:12px 15px;
        border-radius:6px;
        margin:5px 0 5px 0;
        text-align:center;
    }

    /* --- Blocs catégories --- */
    .categ{
        margin-bottom:12px;
    }

    .fond_bloc_categ{
        width:100%;
        margin-left:0;
        border-radius:8px;
        overflow:hidden;
    }

    .zone_img{
        width:100%;
        text-align:center;
    }

    .zone_img .photo{
        padding:10px 0 5px;
    }

    .zone_img .photo img{
        max-width:200px;
        height:auto;
    }

    .zone_detail_categ{
        width:100%;
    }

    .fond_titre{
        background:none;
        background-color:#08ade2;
        width:100%;
        height:auto;
        padding:8px 12px;
    }

    .titre{
        width:100%;
        padding:0;
        color:#fff;
        font-size:15px;
    }

    .fond_detail_categ{
        background:none;
        width:100%;
    }

    .fond_detail_categ ul{
        margin:0;
        padding:10px 15px;
    }

    .fond_detail_categ ul li{
        padding:4px 0;
    }

    /* --- Description catégorie --- */
    .description{
        margin:10px 0;
    }

    /* --- Contenu API : formulaires et tableaux --- */
    #col_g img{
        max-width:100%;
        height:auto;
    }

    #col_g table{
        width:100% !important;
    }

    #col_g table,
    #col_g table tbody,
    #col_g table tr,
    #col_g table td,
    #col_g table th{
        display:block;
        width:100% !important;
    }

    #col_g td[style*="width"]{
        width:100% !important;
    }

    #col_g input[type="text"],
    #col_g input[type="email"],
    #col_g input[type="tel"],
    #col_g input[type="number"],
    #col_g select,
    #col_g textarea{
        width:100% !important;
        max-width:100%;
        min-width:0;
        font-size:16px;
    }

    #col_g input[type="submit"]{
        width:100%;
        padding:14px;
        font-size:16px;
        cursor:pointer;
        border-radius:6px;
        border:none;
        background:#08ade2;
        color:#fff;
        font-weight:bold;
        margin:10px 0;
    }

    /* --- Sidebar → section réassurance en bas --- */
    #col_d{
        width:100%;
        background:none;
        padding:0;
        margin-top:30px;
        position:static;
    }

    /* Titre "Comment ça marche ?" */
    #fond_comment_marche{
        background:#08ade2;
        width:100%;
        height:auto;
        padding:16px 20px;
        text-align:center;
        font-size:20px;
        margin-top:0;
    }

    /* Points clés : grille 2×2 */
    #fond_menu{
        background:#f7f8fa;
        width:100%;
        height:auto;
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        padding:15px;
        justify-content:center;
        margin-bottom:0;
    }

    .menu{
        width:calc(50% - 10px);
        height:auto;
        margin:0;
        padding:14px 8px;
        background:#ffffff;
        border-radius:8px;
        box-shadow:0 2px 8px rgba(0,0,0,0.07);
        text-align:center;
    }

    .menu.decalage_top_16px{
        padding-top:14px;
    }

    .menu_bleu{
        font-size:18px;
        line-height:1.3;
    }

    .menu_bleu_18{
        font-size:16px;
        line-height:1.3;
    }

    .menu_gris{
        font-size:13px;
    }

    /* 3 étapes : cartes modernes */
    .etapes{
        background:#f7f8fa;
        padding:0 15px 15px;
    }

    #fond_num1,#fond_num2,#fond_num3{
        background-image:none;
        background-color:#ffffff;
        width:100%;
        padding:18px 18px 18px 62px;
        position:relative;
        border-radius:8px;
        box-shadow:0 2px 8px rgba(0,0,0,0.07);
        margin-bottom:10px;
    }

    #fond_num1::before,#fond_num2::before,#fond_num3::before{
        position:absolute;
        left:14px;
        top:50%;
        transform:translateY(-50%);
        width:36px;
        height:36px;
        border-radius:50%;
        background:#08ade2;
        color:#fff;
        font-weight:bold;
        font-size:18px;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    #fond_num1::before{content:"1";}
    #fond_num2::before{content:"2";}
    #fond_num3::before{content:"3";}

    .bottom_fond_num{
        display:none;
    }

    .txt_fond_num{
        width:100%;
        margin-left:0;
    }

    .txt_bleu{
        font-size:15px;
    }

    /* --- Tableau confiance : masqué --- */
    .fond_tab,
    .bottom_tab{
        display:none;
    }

    /* --- Footer --- */
    #footer{
        width:100%;
        background:none;
        background-color:#3a3f47;
        color:#bbb;
        padding:20px 15px;
        font-size:12px;
    }

    #footer a{
        color:#bbb;
    }

    /* --- Dialog mentions --- */
    dialog#mentions-dialog{
        max-width:95%;
        padding:20px;
    }

    /* --- Bandeau cookies --- */
    #cookie-banner{
        flex-direction:column;
        text-align:center;
        padding:14px 16px;
    }

    .cookie-buttons{
        width:100%;
        justify-content:center;
    }
}