/* ===========================
   DICO MAISON
   =========================== */

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

body{

    font-family:Arial, Helvetica, sans-serif;

    background:#f4f6f9;

    color:#333;

}

.container{

    max-width:1200px;

    margin:30px auto;

    background:white;

    border-radius:12px;

    padding:25px;

    box-shadow:0 5px 20px rgba(0,0,0,.15);

}

h1{

    text-align:center;

    color:#1565c0;

}

.subtitle{

    text-align:center;

    color:#666;

    margin:10px 0 30px;

}

/* ===========================
   Barre de recherche
   =========================== */

.search{

    display:flex;

    gap:10px;

    margin-bottom:25px;

}

#word{

    flex:1;

    padding:14px;

    font-size:18px;

    border:1px solid #ccc;

    border-radius:8px;

}

#word:focus{

    outline:none;

    border-color:#1565c0;

}

#searchButton{

    background:#1565c0;

    color:white;

    border:none;

    padding:14px 24px;

    border-radius:8px;

    cursor:pointer;

    font-size:16px;

    transition:.2s;

}

#searchButton:hover{

    background:#0d47a1;

}

/* ===========================
   Carte
   =========================== */

.card{

    background:white;

    border-radius:10px;

    padding:20px;

    border:1px solid #ddd;

}

.card h2{

    margin-bottom:20px;

    color:#1565c0;

}

/* ===========================
   Onglets principaux
   =========================== */

.modules{

    display:flex;

    gap:0;

    margin-bottom:20px;

    border-bottom:2px solid #ddd;

}

.modules button{

    background:#eceff1;

    border:none;

    padding:14px 24px;

    cursor:pointer;

    font-size:16px;

    font-weight:bold;

    color:#555;

    border-top-left-radius:8px;

    border-top-right-radius:8px;

    transition:.2s;

}

.modules button:hover{

    background:#dbe7f7;

}

.modules button.active{

    background:#1565c0;

    color:white;

}

/* ===========================
   Sources
   =========================== */

.sources{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:20px;

}

.sources button{

    background:white;

    border:1px solid #1565c0;

    color:#1565c0;

    border-radius:20px;

    padding:10px 16px;

    cursor:pointer;

    transition:.2s;

    font-size:15px;

}

.sources button:hover{

    background:#1565c0;

    color:white;

}

/* ===========================
   Iframe
   =========================== */

iframe{

    width:100%;

    height:700px;

    border:1px solid #ddd;

    border-radius:10px;

    background:white;

}

/* ===========================
   Responsive
   =========================== */

@media(max-width:700px){

    .search{

        flex-direction:column;

    }

    .modules{

        flex-wrap:wrap;

    }

    .modules button{

        flex:1;

    }

}
.copy-button{

    margin-left:10px;

    border:none;

    background:transparent;

    cursor:pointer;

    font-size:20px;

}

.copy-button:hover{

    transform:scale(1.15);

}

/* =======================
   BARRE SUPERIEURE
======================= */

.topbar{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:12px;

    margin-bottom:20px;

}

.topbar a{

    text-decoration:none;

    color:#1565c0;

    font-weight:bold;

}

.topbar a:hover{

    text-decoration:underline;

}

.topbar button{

    padding:6px 12px;

    border:none;

    border-radius:6px;

    background:#1565c0;

    color:white;

    cursor:pointer;

}

.topbar button:hover{

    opacity:.9;

}