/*  // ─────────────────────────────────────────────
    // GENERAL
    // ─────────────────────────────────────────────
*/

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

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body { font-family: Arial, sans-serif; }

.content {
    /*padding-top: 125px; /* header height */
    display: flex;
    justify-content: center;
    align-items: center;
}

a {
    color : violet;
} 

ul li {
    list-style: none;
    margin-bottom: 20px; /* espace vertical entre chaque li */
}

ul li a {
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    color: black;
    white-space: nowrap;
}

ul li:last-child {
    margin-bottom: 0;    /* pas d’espace après le dernier élément */
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.center {
    width: 60%;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
}

h1, h2, h3 { margin-bottom: 10px; text-align:center; }

.xl {font-size : 20px;}

.page_header1 { font-family: 'Montserrat', sans-serif; font-size:1.5rem; margin-top:60px; padding-bottom:10px; }

.page_message { font-size:1rem; margin:20px 0; padding-bottom:10px; }

/*  // ─────────────────────────────────────────────
    // MENU
    // ─────────────────────────────────────────────
*/

/* ================= NAVBAR ================= */
.navbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#fff;
     padding: 0 30px;
    border-bottom:1px solid #ddd;
    position:relative;
}

/* Logo */
.logo {
    flex: 0 0 auto;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
    margin: 0;
    padding: 0;

    flex: 1;                     /* prend l’espace central */
    justify-content: center;     /* centre les éléments */
}

.nav-links li {
    position: relative;
}

.nav-links a {
        text-decoration:none;
        color:#333; 
}

.nav-links a:hover, .nav-links a.active {
    color:#007bff;
}

.nav-link.active {
        text-decoration:underline;
        font-weight:bold;
}

.dropdown > a::after {
    content:" ▼"; font-size:0.6em;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    padding: 15px 25px;
    z-index: 10;
   
}

.dropdown:hover .dropdown-menu {
    display: flex;
    gap: 40px;
}

.dropdown-menu .column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown-menu .column li {
    margin-bottom: 5px;
}

/* ================= Navbar Icons ================= */
.navbar-icons {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;       /* pousse les icônes à droite */
}

.navbar-icons a {
    color: #333;
    font-size: 1.2em;
    display: flex;
    align-items: center;
}

.navbar-icons a:hover {
    color: #007bff;
}

/* Formulaire de recherche */
.navbar-icons .search-form {
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
}

.navbar-icons .search-form input[type="search"] {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 150px;
    transition: width 0.3s ease;
}

.navbar-icons .search-form input[type="search"]:focus {
    width: 200px; /* s'agrandit au focus */
    outline: none;
    border-color: #007bff;
}

.navbar-icons .search-form button {
    padding: 5px 10px;
    border: none;
    background: #007bff;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.navbar-icons .search-form button:hover {
    background: #0056b3;
}

.hamburger {
    display: none;
    font-size: 24px;
    cursor: pointer;
    color:#333;
}


/*  // ─────────────────────────────────────────────
    // BOUTONS
    // ─────────────────────────────────────────────
*/

:root {
    --btn-search: blue;
    --btn-select: #3498db;
    --btn-result: #7f8c8d;
    --btn-add: #2ecc71;
    --btn-edit: #f39c12;
    --btn-reset: #95a5a6;
    --btn-suppress: red;
}

.btn {
    padding:0.5rem 0.9rem; border-radius:4px; color:#fff; border:none; cursor:pointer; font-weight:500; transition: all 0.25s ease;
}
.btn:hover { filter:brightness(0.9); }

.btn.btn-reset { color:black; }
.btn-search { background-color:var(--btn-search); }
.btn-select { background-color:var(--btn-select); }
.btn-result { background-color:var(--btn-result); }
.btn-add { background-color:var(--btn-add); text-align:left; margin-left:50px; padding:10px 20px; border-radius:8px; font-size:0.95rem; }
.btn-edit { background-color:var(--btn-edit); }
.btn-suppress { background-color:var(--btn-suppress); }

.btn-control {
        padding: 10px 20px;
        border: 2px solid #667eea;
        background: white;
        color: #667eea;
        border-radius: 20px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
        font-size: 0.9em;
    }
    
.btn-control:hover {
        background: #667eea;
        color: white;
}

/*  // ─────────────────────────────────────────────
    // TAILLE CONTAINERS
    // ─────────────────────────────────────────────
*/

.custom-xs, .custom-sm, .custom-md, .custom-lg, .custom-xl {
    width:100%; margin:0 auto; padding:0 15px;
}
.custom-xs { max-width:450px; }
.custom-sm { max-width:650px; }
.custom-md { max-width:900px; }
.custom-lg { max-width:1200px; }
.custom-xl { max-width:1800px; }

.admin-2cols { column-count:2; column-gap:40px; min-width:450px; padding:15px 20px; }
.admin-2cols li { break-inside:avoid; }
.admin-2cols .dropdown-item { white-space:nowrap; }
.split { break-before: column; }

/*  // ─────────────────────────────────────────────
    // FORMULAIRES
    // ─────────────────────────────────────────────
*/
form:not(#login_form) {
    width:100%;
    max-width:1500px;
    margin:0 auto 10px auto;
    padding:20px; border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
    font-family:Arial, sans-serif;
}

/* Formulaire global en flex vertical avec espace entre ses enfants */
form .selection {
    display: flex;
    flex-direction: column;
    row-gap: 15px; /* espace vertical entre fieldsets et boutons */
}

/* Fieldset vertical sans bordure */
fieldset.field-vertical {
    border: none;
    margin: 0 0 20px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Legend */
fieldset.field-vertical legend {
    display: block; 
    text-align: left;     /* essentiel pour que margin-bottom fonctionne */
    font-weight: bold;
    font-size: 0.9em;
    margin-bottom: 12px; /* espace entre legend et input/select */
}

/* Legend */
fieldset.field-vertical label {
    display: block;
    margin-bottom: 12px; 
}

/* Input et select prennent toute la largeur */
.field-vertical input[type="text"],
.field-vertical select {
    display: block;      /* s’assure que width: 100% fonctionne */
    width: 100%;
    margin-bottom : 15px;
    padding: 6px 8px;
    box-sizing: border-box;
    font-size: 1em;
}

/* Boutons centrés à 33% */
form.selection button.btn {
    align-self: center; /* centre horizontalement */
    width: 33%;
    padding: 8px 12px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}

/* Hover pour les boutons */
form button.btn:hover {
    background-color: #0056b3;
}


/* form-style.css */

/* Formulaire Add/Edit aligné en ligne */
.frmShowAddEdit {
    display: flex;
    flex-direction: column;
    gap: 15px; /* espace vertical entre les lignes */
    max-width: 800px;
    margin: 0 auto; /* centré horizontalement */
}

/* Groupe label + input/select/textarea */
.frmShowAddEdit .form-group {
    display: flex;
    align-items: center;
    gap: 10px; /* espace horizontal entre label et champ */
}

/* Label fixe */
.frmShowAddEdit .form-group label {
    width: 250px;
    text-align: left;
    font-weight: bold;
}

/* Inputs, textarea et select prennent le reste de la ligne */
.frmShowAddEdit .form-group input,
.frmShowAddEdit .form-group textarea,
.frmShowAddEdit .form-group select {
    flex: 1;
    padding: 6px 8px;
    font-size: 1em;
    box-sizing: border-box;
}

/* Textarea redimension verticale */
.frmShowAddEdit .form-group textarea {
    resize: vertical;
}

.frmShowAddEdit .btn-edit:hover {
    background-color: #0056b3;
}

/* Tooltip simple */
.frmShowAddEdit .tooltip {
    cursor: help;
    border-bottom: 1px dotted #000;
}

/* Boutons */
.buttons-row {
    display: flex;
    gap: 10px;
    margin: 10px 0;
}

/* Centrer ou aligner à droite les boutons */
.buttons-row.central {
    justify-content: center;
}

.buttons-row.right {
    justify-content: flex-end;
}

/* Styles boutons */
.btn.btn-select {
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    background-color: #3498db;
    color: #fff;
    border: none;
    font-size: 0.9rem;
}

.btn.btn-select:hover {
    background-color: #2980b9;
}


/* Conteneur de la liste autocomplete */
.ui-autocomplete {
    position: absolute;            /* obligatoire pour être sous l’input */
    z-index: 1000;                  /* au-dessus du reste */
    background: #fff;
    border: 1px solid #000;         /* bordure noire simple */
    padding: 0;
    margin-top: 2px;                /* petit espace sous l’input */
    max-height: 200px;              /* scroll si trop d’éléments */
    overflow-y: auto;
    box-sizing: border-box;
}

/* Chaque ligne */
.ui-autocomplete li {
    list-style: none;
    padding: 6px 10px;
    cursor: pointer;
}

/* Texte */
.ui-autocomplete li div {
    white-space: nowrap;
}

/* Survol */
.ui-autocomplete li:hover,
.ui-autocomplete .ui-state-active {
    background-color: #f0f0f0;
}

/* ================= IMAGES ================= */
.my-img_bio { float:left; width:250px; margin:0 20px 20px 0; border-radius:4px; }
.my-img_thumb,.my-img_search { max-width:150px; transition: transform .1s; }
/*.my-img_thumb:hover { max-width:300px; transition: transform .1s; }*/

.my-img_thumb2{
width:120px;
height:120px;
object-fit:cover;
border-radius:6px;
cursor:zoom-in;
transition:transform .2s;
}

.my-img_thumb2:hover{
transform:scale(1.08);
}

/* overlay */

.image-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.85);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
opacity:0;
transition:opacity .2s;
cursor:zoom-out;
}

.image-overlay.show{
opacity:1;
}

/* image zoom */

.image-zoomed{
max-width:90%;
max-height:90%;
border-radius:8px;
box-shadow:0 10px 40px rgba(0,0,0,0.6);
animation:zoomIn .2s ease;
}

@keyframes zoomIn{
from{
transform:scale(.85);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}


.my-img_home { max-width: 420px; margin: 50px auto 20px auto; display: block; }
.my-img_port { max-width:200px; }

.imgModal {
    position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.7);
    display:flex; justify-content:center; align-items:center;
}
.imgModal img { max-width:200px; border-radius:10px; }
.imgModal span { position:absolute; top:20px; right:20px; font-size:40px; color:white; cursor:pointer; }

/* ================= ICONES ================= */
.my-icon { max-width:45px; }
.my-icon_cart { max-width:35px; }
.fa { padding:10px; font-size:20px; width:30px; margin:3px 1px; }
.icon-transparent { background-color: transparent; border: none; }

/* ================= BUTTONS CUSTOM ================= */
.my-btn { border:none; outline:none; padding:12px 16px; background-color:white; cursor:pointer; }
.my-btn:hover { background-color:#ddd; }
.my-btn.active { background-color:#666; color:white; }

.favorite { color:red; }
.no-favorite { color:black; }

/* ================= TYPOGRAPHIE ================= */
.p_medium { font-size:2.5em; padding-top:50px; }
.my-h1h2, .my-h3 { font-family:'Cormorant Garamond', serif; font-weight:500; }

/* ================= AUTRES ================= */
.help-text { font-size:0.85rem; color:#6c757d; margin-top:5px; font-style:italic; }
.page-index { display:flex; justify-content:center; align-items:center; }
.custom-card { width:400px; margin:auto; text-align:center; padding:0 10px; }
.price, .amount { border:0; }
#count { margin-left:0; padding-left:0; margin-right:10px; }


/* ================= TOOLTIP JQUERY ================= */

/* Tooltip “?” */
label .tooltip {
    display: inline-block;
    margin-left: 5px;
    width: 20px;
    height: 20px;
    background-color: #eee;
    border: 1px solid #aaa;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    position: relative;
}

/* Le texte du tooltip */
label .tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    left: 110%;           /* juste à droite du ? */
    transform: translateY(-50%);
    background-color: #fff;
    color: #333;
    border: 1px solid #aaa;
    border-radius: 6px;
    padding: 6px 10px;
    white-space: nowrap;
    font-size: 0.9rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
}

/* Affichage au hover */
label .tooltip:hover::after {
    opacity: 1;
}


/* ================= MEDIA ================= */
@media (max-width:768px) {
    h3 { font-size:1em; }
    .my-h1h2 { font-size:1.2em; margin:0; }
    .my-h2h3 { font-size:1.1em; margin-bottom:5px; }
    .my-img_home { max-width: 100%; }
    .my-img_bio { max-width:150px; margin:5px; padding:5px; }
    .my-icon { width:30px; margin:2px; }
    .my-btn { padding:4px 4px; font-size:12px; background-color:#f1f1f1; }
}

/*  ─────────────────────────────────────────────
    MOBILE
    ───────────────────────────────────────────── */

@media (max-width:1200px){

    /* hamburger visible */
    .hamburger{
        display:block;
    }

    .logo img{
        max-height:40px;
    }

    .navbar{
    padding:10px 20px;
}

    /* menu caché par défaut */
    .nav-links{
        position:absolute;
        top:70px;
        left:0;
        width:100%;
        background:#fff;
        flex-direction:column;
        align-items:center;
        gap:20px;
        padding:20px 0;
        border-bottom:1px solid #ddd;

        display:none !important;
    }

    /* menu actif */
    .nav-links.active{
        display:flex !important; 
    }

    /* dropdown mobile */
    .dropdown-menu{
        position:static;
        border:none;
        padding:10px 0;
    }

    .dropdown:hover .dropdown-menu{
        display:block;
    }

    .navbar-icons{
        display:none;
    }

}