/*
 * Mise en page du site public (phase 7, responsive) : div à la place des tableaux.
 * Ordinateur : mêmes dimensions qu'avant (bloc de 930 px centré, colonne de gauche de 250 px, 20 px d'écart,
 * colonne de droite avec 6 px de marge comme l'ancien cellspacing). Moins de 960 px : une colonne, barre du haut
 * avec bouton de menu, compte et panier ; le menu de gauche s'ouvre par-dessus la page.
 * Les couleurs et typographies restent celles de style.css.
 */

/* ---------- Ordinateur ---------- */
.entete-mobile,
.logo-mobile {
    display: none;
}
/* Messages de validation sous les champs (js/validation.js), au style de l'ancienne extension (label.error) */
.erreur-champ {
    display: block;
    margin: 3px 0;
    padding: 0 10px;
    background-color: #E32219;
    color: #000;
}
.erreur-champ[hidden] {
    display: none;
}
.page {
    display: flex;
    width: 930px;
    margin: 0 auto;
}
.colonne-gauche {
    flex: none;
    width: 250px;
    margin-right: 20px;
}
.colonne-gauche .logo,
.colonne-gauche .basmenu {
    display: block;
}
.colonne-gauche .menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px;
}
.colonne-droite {
    flex: 1;
    min-width: 0;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Compteur des séries limitées */
.ligneserie {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}
.plusserie {
    text-align: right;
}

/* Espace membre et panier */
.bandeau {
    display: flex;
    background-color: #6b6350;
}
.bandeau .espacemembre,
.bandeau .pavepanier {
    flex: 1 1 50%;
}
.bandeau .espacemembre {
    border-right: thin solid #000000;
}
.client2.nouveauclient {
    border-top: 1px solid #5d5645;
}
.lignepanier {
    display: flex;
    justify-content: space-between;
}

/* Recherche */
.recherche {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}
.recherche label {
    font-weight: bold;
}
.recherche #motscles {
    flex: 1;
    min-width: 120px;
}

/* Accueil : nouveautés et « le choix d'Imaginaute » sur deux colonnes, titres et blocs alignés */
.accueil {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    grid-auto-flow: column;
}
.blocnouveautes,
.blocchoix {
    display: contents;
}

/* Listes de produits */
.liste .compteur {
    display: flow-root;
}

/* Fiche produit */
.fiche-titres {
    display: flex;
    justify-content: space-between;
}
.fiche-titres .titrerubriques {
    flex: 1;
}
.fiche-titres .titrechoix {
    display: flex;
    align-items: center;
}
.fiche-corps {
    display: flow-root;
}
div.ficheliste.fiche-texte {
    width: 460px;
    text-align: justify;
}
.fiche-resume {
    height: 290px;
    overflow: auto;
}
.fiche-espace {
    height: 15px;
}
.fiche .compteur:last-child {
    display: flow-root;
}

/* Anciens tableaux de mise en page devenus des div (pages, formulaires) : lignes de cellules côte à côte ;
   dans une ligne de plusieurs cellules, la première (libellé) garde 185 px comme l'ancienne colonne */
.ligne {
    display: flex;
    align-items: center;   /* comme une cellule de tableau (valign="top" : align-self) */
}
.cellule {
    flex: 1 1 auto;
    min-width: 0;
}
.ligne > .cellule:first-child:not(:only-child) {
    flex: 0 0 185px;
}
/* Formulaires sur ordinateur : grille à deux colonnes communes à toutes les lignes, comme l'ancien tableau. Colonne des
   libellés de 185 px au plus, qui rétrécit seulement si le champ ou le tableau d'à côté manque de place (adresse de
   livraison, récapitulatif de la commande) ; une cellule seule sur sa ligne occupe les deux colonnes */
@media (min-width: 960px) {
    #formulaire,
    #formulaire .tableau {
        display: grid;
        grid-template-columns: minmax(min-content, 185px) minmax(auto, 1fr);
    }
    #formulaire .ligne {
        display: contents;
    }
    #formulaire .cellule {
        align-self: center;   /* comme une cellule de tableau (valign="top" : style en ligne) */
        min-width: auto;      /* taille minimale = contenu : c'est la colonne des libellés qui rétrécit */
    }
    #formulaire .ligne > .cellule:first-child:not(:only-child) {
        padding-right: 4px;   /* espace entre libellé et champ, comme l'espacement des cellules de l'ancien tableau */
    }
    #formulaire .ligne > .cellule:only-child {
        grid-column: 1 / -1;
    }
    /* Tableau dans une cellule (adresse de livraison de la commande) : libellés sur une ligne, champs sur le reste */
    #formulaire .tableau {
        grid-template-columns: max-content minmax(0, 1fr);
    }
    #formulaire .tableau input.textchamp {
        box-sizing: border-box;
        width: 100%;
    }
}
#formulaire .cellule {
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    text-transform: none;
    font-size: 12px;
    text-align: left;
    padding-bottom: 3px;
}

/* Pied de page */
.menubas {
    text-align: right;
}

/* ---------- Tablette en portrait et téléphone ---------- */
@media (max-width: 959px) {
    body.principale {
        background-image: none;
    }
    /* Champs en 16 px : pas de zoom automatique sur iPhone */
    input.textchamp, select.textchamp, textarea {
        font-size: 16px;
    }

    .entete-mobile {
        display: flex;
        align-items: center;
        gap: 8px;
        position: sticky;
        top: 0;
        z-index: 20;
        height: 52px;
        padding: 0 8px;
        background: #000000;
    }
    .entete-mobile button {
        background: none;
        border: 0;
        padding: 6px;
        cursor: pointer;
    }
    .bouton-menu {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .bouton-menu span {
        display: block;
        width: 22px;
        height: 3px;
        background: #e32219;
    }
    .titre-mobile {
        flex: 1;
        min-width: 0;              /* le titre cède la place au montant du panier (au-delà de 1 000 €) */
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #e32219;
        font-size: clamp(15px, 5vw, 20px);
        font-weight: bold;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-decoration: none;
    }
    .titre-mobile span {
        color: #6b6350;
    }
    /* Logo sur toute la largeur, sous la barre du haut */
    .logo-mobile {
        display: block;
    }
    .logo-mobile img {
        display: block;
        width: 100%;
        height: auto;
    }
    .bouton-panier {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #6b6350;
        font-size: 13px;
        font-weight: bold;
        text-decoration: none;
        white-space: nowrap;
    }

    .page {
        display: block;
        width: auto;
    }

    /* Menu de gauche : panneau qui glisse depuis la gauche, par-dessus la page */
    .colonne-gauche {
        position: fixed;
        top: 52px;
        left: 0;
        bottom: 0;
        z-index: 30;
        width: 254px;
        margin: 0;
        overflow-y: auto;
        background: #403a2e;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.6);
    }
    body.menu-ouvert .colonne-gauche {
        transform: none;
    }
    body.menu-ouvert::after {
        content: "";
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 25;
        background: rgba(0, 0, 0, 0.5);
    }
    .colonne-gauche .logo,
    .colonne-gauche .basmenu {
        display: none;
    }

    .colonne-droite {
        padding: 6px;
    }

    /* Espace membre : affiché par le bouton du haut ; le panier est résumé dans la barre du haut */
    .bandeau .espacemembre {
        display: none;
        border-right: 0;
    }
    .bandeau .espacemembre.ouvert {
        display: block;
    }
    .bandeau .pavepanier {
        display: none;
    }
    /* Message de la connexion (« identifiant ou mot de passe incorrects ») sous le formulaire, pas à côté */
    #con_msgbox.messagebox {
        display: block;
        position: static;
        width: auto;
        margin: 4px 0 0;
    }
    .bandeau:not(:has(.espacemembre.ouvert)) {
        display: none;
    }

    .recherche label {
        flex-basis: 100%;
    }
    .recherche select {
        max-width: 40%;
    }

    /* Accueil : une colonne ; nouveautés en grille de 2 */
    .accueil {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }
    .blocchoix .plusdenouveaute {
        display: none;
    }
    #nouveautes {
        width: auto;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 6px;
    }
    #nouveautes > div {
        display: contents;
    }
    div.ficheliste {
        float: none;
        width: auto;
        height: auto;
        margin: 0;
    }
    img.vignette {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        object-fit: cover;
    }
    #listeproduits {
        width: auto;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 6px;
    }
    .defilpage li a {
        padding: 4px 8px;
    }

    /* Fiche : couverture (grande photo) et bouton d'achat sur toute la largeur, puis le texte */
    .fiche-corps > .ficheliste:first-child {
        margin: 0 0 8px;
        float: none;
    }
    .fiche-corps img.vignette {
        aspect-ratio: auto;
        object-fit: contain;
    }
    div.ficheliste.fiche-texte {
        width: auto;
    }
    .fiche-resume {
        height: auto;
    }
    .fiche-corps .boutonajoutpanier {
        display: block;
        box-sizing: border-box;
        width: 100%;
        padding: 10px;
        font-size: 16px;
        text-align: center;
    }

    #lechoix div.ficheliste {
        max-width: 180px;
        margin: 0 auto;
    }

    /* Messages de validation un peu plus grands ; champ en erreur ramené à l'écran sous la barre du haut */
    .erreur-champ {
        padding: 2px 8px;
        font-size: 13px;
    }
    form input, form textarea, form select {
        scroll-margin-top: 70px;
    }

    /* Formulaires et pages : cellules empilées, libellé au-dessus du champ, champs sur toute la largeur */
    .ligne {
        flex-wrap: wrap;
    }
    .ligne > .cellule,
    .ligne > .cellule:first-child:not(:only-child) {
        flex: 1 1 100%;
    }
    #formulaire input.textchamp,
    #formulaire textarea,
    .contenu textarea {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }
    #formulaire .ligne {
        margin-bottom: 6px;
    }
    #formulaire input[type=submit],
    .contenu input.submit {
        padding: 10px 14px;
        font-size: 16px;
    }
    .contenu img,
    #map {
        max-width: 100%;
        height: auto;
    }
    #map {
        height: 300px !important;
    }
    #map img {
        max-width: none;   /* tuiles de la carte (Leaflet) */
    }
    .contenu table:not(#cart) {
        display: block;
        overflow-x: auto;
    }
    .articlestxt3, .articlestitre3, .avislecteurs, .reponseforum {
        overflow-wrap: anywhere;
    }

    /* Panier et récapitulatif : chaque article devient un bloc (quantité et prix sur la même ligne) */
    table#cart, table#cart tbody, table#cart tr, table#cart td {
        display: block;
        width: auto;
    }
    table#cart tr:first-child {
        display: none;
    }
    /* Article : le nom sur toute la largeur, puis prix unitaire, quantité, total et case de suppression */
    table#cart tr {
        display: grid;
        grid-template-columns: 1fr 56px 84px 24px;   /* largeurs fixes : colonnes alignées d'un article à l'autre */
        grid-template-areas: "nom nom nom nom" "prix quantite total suppression";
        align-items: center;
        gap: 2px 8px;
        padding: 6px 4px;
        border-bottom: 1px solid #403a2e;
    }
    table#cart td.item_name {
        grid-area: nom;
        font-weight: bold;
    }
    table#cart td.unit_price {
        grid-area: prix;
    }
    table#cart td.quantity {
        grid-area: quantite;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }
    table#cart td.quantity input {
        box-sizing: border-box;
        width: 100%;
    }
    table#cart td.extended_price,
    table#cart td.remove {
        padding-left: 0;
        padding-right: 0;
    }
    table#cart td.extended_price {
        grid-area: total;
    }
    table#cart td.remove {
        grid-area: suppression;
    }
    table#cart td.unit_price::before {
        content: "Prix unitaire : ";
    }
    table#cart td.extended_price {
        text-align: right;
        font-weight: bold;
    }
    /* Lignes de total (frais de port, total, boutons) : libellé et valeur sur une ligne, texte replié */
    table#cart tr:has(> .liketh),
    table#cart tr:has(> .liketh2) {
        grid-template-columns: 1fr auto;
        grid-template-areas: none;
        padding: 0;
        border-bottom: 0;
        gap: 0;
    }
    table#cart tr:has(> .liketh),
    table#cart tr:has(> .liketh2) {
        align-items: stretch;   /* fond des cellules sur toute la hauteur de la ligne (libellé sur deux lignes) */
    }
    table#cart td.liketh,
    table#cart td.liketh2 {
        display: flex;
        align-items: center;
        white-space: normal;
    }
    table#cart td:empty {
        display: none;
    }
    /* Montants des lignes de total (frais de port, total) alignés à droite sur le total de chaque article : celui-ci
       s'arrête avant la colonne de la case de suppression (24 px + 8 px d'écart + 4 px de marge de la ligne) */
    table#cart tr:has(> .liketh) > td:nth-child(2):not(:has(input)),
    table#cart tr:has(> .liketh2) > td:nth-child(2):not(:has(input)) {
        justify-content: flex-end;
        padding-right: 36px;
    }
    table#cart .item_name {
        width: auto;
    }
    table#cart .remove input::after {
        content: "";
    }

    .menubas {
        text-align: center;
    }
    /* Petit encadré permanent des cookies (tarteaucitron) : il recouvrait le pied de page ; réglages accessibles par
       le lien « gestion des cookies » du pied de page */
    #tarteaucitronAlertSmall {
        display: none !important;
    }
}