@charset "UTF-8";
/*
 * Version mobile simple de lw-conteneur.com
 * Feuille chargée UNIQUEMENT sur les écrans de 760 px de large ou moins
 * (voir include_php/header.php : media="screen and (max-width: 760px)").
 * La version ordinateur n'est pas concernée.
 */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-size: 15px; }

/* ---------- Structure : les tableaux de mise en page s'empilent ---------- */
#container > table,
#container :where(table:not(#lw_conteneur_accueil_produit table)) {
    width: 100% !important;
}
#container :where(table:not(#lw_conteneur_accueil_produit table)),
#container :where(tbody:not(#lw_conteneur_accueil_produit tbody)),
#container :where(tr:not(#lw_conteneur_accueil_produit tr)) {
    display: block;
    width: 100% !important;
    height: auto !important;
}
#container :where(td:not(#lw_conteneur_accueil_produit td)) {
    display: inline-block;
    vertical-align: top;
    width: auto !important;
    max-width: 100%;
    height: auto !important;
    box-sizing: border-box;
}
#container img { max-width: 100%; height: auto; }

/* ---------- En-tête ---------- */
#lw_conteneur_header {
    display: block !important;
    width: 100% !important;
    height: 87px !important;
    background: #424043 url("../images/lw_conteneur_logo.gif") no-repeat 8px center !important;
    position: relative;
}
/* zones cliquables transparentes du bandeau ordinateur : on garde le logo cliquable */
#lw_conteneur_header > table > tbody > tr > td:nth-child(1) { display: none !important; }
#lw_conteneur_header > table > tbody > tr > td:nth-child(2) {
    position: absolute; left: 0; top: 0; width: 250px !important; height: 87px !important; overflow: hidden;
}
#lw_conteneur_header > table > tbody > tr > td:nth-child(2) div { padding: 0 !important; }
#lw_conteneur_header > table > tbody > tr > td:nth-child(2) img { width: 250px !important; height: 87px !important; }
/* Liens / Contact : seulement les libellés texte, en haut à droite */
#lw_conteneur_header > table > tbody > tr > td:nth-child(3) {
    position: absolute; right: 6px; top: 6px; width: auto !important;
}
#lw_conteneur_header > table > tbody > tr > td:nth-child(3) > div { padding: 0 !important; }
#lw_conteneur_header > table > tbody > tr > td:nth-child(3) tr:first-child { display: none !important; }
#lw_conteneur_header > table > tbody > tr > td:nth-child(3) tr:last-child td {
    display: block !important; padding: 3px 0 !important; text-align: right;
}
#lw_conteneur_header a.menu3 { font-size: 12px; font-weight: bold; }
@media screen and (max-width: 400px) {
    #lw_conteneur_header { background-size: 190px auto !important; background-position: 4px center !important; height: 70px !important; }
    #lw_conteneur_header > table > tbody > tr > td:nth-child(2),
    #lw_conteneur_header > table > tbody > tr > td:nth-child(2) img { width: 190px !important; height: 70px !important; }
    #lw_conteneur_header > table > tbody > tr > td:nth-child(3) { top: 2px; }
    #lw_conteneur_header > table > tbody > tr > td:nth-child(3) tr:last-child td { padding: 2px 0 !important; }
}

/* ---------- Menu principal : grille de boutons ---------- */
#lw_conteneur_menu {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    background: #a1b557 !important;
    padding: 0 !important;
}
#lw_conteneur_menu ul { display: flex; flex-wrap: wrap; padding: 0 !important; margin: 0 !important; }
#lw_conteneur_menu ul li {
    float: none;
    width: 50%;
    box-sizing: border-box;
    padding: 0;
    border-right: 1px solid #8d9f49;
    border-bottom: 1px solid #8d9f49;
    font-size: 13px;
}
#lw_conteneur_menu ul li a { display: block; padding: 12px 8px; text-align: center; }

/* ---------- Bandeaux de titre : masqués (le fil d'Ariane suffit) ---------- */
#container td[id^="lw_conteneur_contenu_haut_"] { display: none !important; }
#lw_conteneur_contenu_centre,
#lw_conteneur_contenu2_centre {
    background: #f0f1dc !important;
    padding-bottom: 8px;
}
#lw_conteneur_contenu_bas,
#lw_conteneur_contenu2_bas { display: none !important; }

/* ---------- Contenu des pages ---------- */
/* marges internes prévues pour 1022 px : on les ramène à une marge simple */
#container div[style*="padding-left:46px"],
#container div[style*="padding-left: 46px"] { padding: 0 16px !important; }
#container div[style*="padding-left:20px"] { padding-left: 0 !important; }
#container div[style*="padding-left:15px"] { padding-left: 0 !important; }
#container div[style*="padding-right"] { padding-right: 0 !important; }

/* Page en une colonne : texte, puis photos, puis bloc « Contactez-nous » en bas */
#container table[width="939"] > tbody > tr {
    display: flex !important;
    flex-direction: column;
}
#container table[width="939"] > tbody > tr > td:first-child { display: contents !important; }
/* les séries de <br /> servaient d'espacement sur ordinateur : inutiles ici */
#container table[width="939"] > tbody > tr > td:first-child > br { display: none; }
#container table[width="939"] > tbody > tr > td:first-child > * { order: 1; }
#container table[width="939"] > tbody > tr > td:first-child > div { width: 100%; }
#container #lw_conteneur_accueil_produit { order: 2; }
#container table[width="939"] > tbody > tr > td:nth-child(2):not(#lw_conteneur_accueil_produit) { order: 2; display: block !important; width: 100% !important; }
#container table[width="939"] > tbody > tr > td:first-child > div:has(#lw_conteneur_contact) { order: 3; }

/* texte : aligné à gauche, interlignage confortable */
#container td > div[style*="text-align:justify"] {
    text-align: left !important;
    padding: 14px 0 4px !important;
    font-size: 15px;
    line-height: 1.5;
}
/* fil d'Ariane lisible */
#container td > div[style*="text-align:justify"] > font:first-child,
#container td > div[style*="text-align:justify"] > font:first-child a { font-size: 13px !important; }
#container h1 { font-size: 20px; line-height: 1.3; margin-bottom: 6px; }
#container h2 { font-size: 17px; line-height: 1.35; margin: 4px 0; color: #424043; }
#container h3 { font-size: 15px; }
#container ul { padding-left: 20px; margin: 8px 0; }
#container li { margin-bottom: 4px; }
#container .btn_doc { display: inline-block; padding: 10px 14px; margin: 8px 0; }

/* ---------- Galeries de photos : grille de 2 colonnes, légendes sous les photos ---------- */
#container table[width="939"] > tbody > tr > td:nth-child(2) > div {
    padding: 8px 0 0 !important;
    text-align: left !important;
}
#container table[width="939"] > tbody > tr > td:nth-child(2) > div > table { width: 100% !important; }
#container table[width="939"] > tbody > tr > td:nth-child(2) > div > table > tbody > tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    width: 100% !important;
}
#container table[width="939"] > tbody > tr > td:nth-child(2) > div > table > tbody > tr > td {
    display: block !important;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
    font-size: 13px;
    line-height: 1.3;
}
/* lignes de 3 photos (practainer, liens…) : 3 colonnes pour garder chaque légende sous sa photo */
#container table[width="939"] > tbody > tr > td:nth-child(2) > div > table > tbody > tr:has(> td:nth-child(3)) {
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 6px;
}
#container table[width="939"] > tbody > tr > td:nth-child(2) > div > table > tbody > tr:has(> td:nth-child(3)) h3 { font-size: 13px; }
#container table[width="939"] > tbody > tr > td:nth-child(2) > div > table > tbody > tr > td[colspan],
#container table[width="939"] > tbody > tr > td:nth-child(2) > div > table > tbody > tr > td:only-child {
    grid-column: 1 / -1;
}
/* titres de galerie (puce + titre) */
#container table[width="939"] > tbody > tr > td:nth-child(2) h3 { font-size: 15px; margin: 10px 0 4px; }
#container table[width="939"] > tbody > tr > td:nth-child(2) td > div[style] { padding: 0 !important; }
/* photos : même format, recadrées proprement */
#container table[width="939"] > tbody > tr > td:nth-child(2) a > img,
#container table[width="939"] > tbody > tr > td:nth-child(2) td > img {
    display: block;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 4px;
    box-sizing: border-box;
}
#container table[width="939"] > tbody > tr > td:nth-child(2) td:not([colspan]):not(:only-child) a > img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* titres de galerie (petit tableau puce + titre) : puce et texte sur la même ligne */
#container table[width="939"] > tbody > tr > td:nth-child(2) td { text-align: left !important; }
#container table[width="939"] > tbody > tr > td:nth-child(2) td table:has(img[src*="puce"]) tr {
    display: flex !important;
    align-items: flex-start;
    gap: 6px;
}
#container table[width="939"] > tbody > tr > td:nth-child(2) td table:has(img[src*="puce"]) td {
    display: block !important;
    width: auto !important;
    min-width: 0;
}
#container table[width="939"] > tbody > tr > td:nth-child(2) img[src*="puce"] {
    width: auto !important;
    aspect-ratio: auto !important;
    flex: none;
    margin: 0 !important;
}
#container table[width="939"] > tbody > tr > td:nth-child(2) td table:has(img[src*="puce"]) h3 { margin: 8px 0 4px; }
#container table[width="939"] > tbody > tr > td:nth-child(2) td table:has(img[src*="puce"]) td:first-child { padding-top: 6px !important; }
/* petits tableaux de photos imbriqués dans une cellule : 2 photos côte à côte */
#container table[width="939"] > tbody > tr > td:nth-child(2) td table:not(:has(img[src*="puce"])) tr {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
}
#container table[width="939"] > tbody > tr > td:nth-child(2) td table:not(:has(img[src*="puce"])) td {
    display: block !important;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
}
#container table[width="939"] > tbody > tr > td:nth-child(2) td div[style*="height:10px"] { height: 6px !important; }

/* bloc « Contactez-nous » (image de fond 224 x 145) : centré en bas de page */
#lw_conteneur_contact { margin: 20px auto 8px; }
#lw_conteneur_contact div[style*="padding-left:20px"] { padding-left: 20px !important; }

/* plan du site : retraits réduits */
#container a.lw_conteneur_plan_site_texte1 { display: block; padding-left: 0; font-size: 15px; line-height: 2; margin-top: 4px; }
#container a.lw_conteneur_plan_site_texte2 { display: block; padding-left: 16px; font-size: 14px; line-height: 1.8; }

/* carte (page plan) */
#container iframe { width: 100% !important; max-width: 100%; height: 300px; margin-top: 8px; }

/* ---------- Accueil : panneau des 6 domaines, réduit proportionnellement ---------- */
#lw_conteneur_accueil_produit {
    display: block !important;
    width: 605px !important;
    height: 445px !important;
    margin: 12px auto 0;
    zoom: 1;
}
@media screen and (max-width: 639px) { #lw_conteneur_accueil_produit { zoom: 0.85; } }
@media screen and (max-width: 529px) { #lw_conteneur_accueil_produit { zoom: 0.7; } }
@media screen and (max-width: 439px) { #lw_conteneur_accueil_produit { zoom: 0.6; } }
@media screen and (max-width: 379px) { #lw_conteneur_accueil_produit { zoom: 0.53; } }

/* ---------- Formulaire de contact ---------- */
#container td:has(form) { display: block !important; width: 100% !important; }
#container form[name="formulaire"] table { width: 100% !important; }
#container form[name="formulaire"] td { display: block !important; width: 100% !important; padding: 2px 0; }
form[name="formulaire"] input.contact,
form[name="formulaire"] textarea.contact {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px;            /* évite le zoom automatique sur iPhone */
    padding: 6px;
}
form[name="formulaire"] td b { font-size: 13px; }
form[name="formulaire"] input[type="submit"] { width: auto !important; padding: 10px 24px; margin-top: 8px; }

/* ---------- Pied de page ---------- */
#lw_conteneur_footer {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    background: #424043 !important;
}
#lw_conteneur_footer > div { padding: 16px 12px !important; text-align: left !important; line-height: 1.8; }
#container > table:last-of-type td { padding: 0 12px 16px; line-height: 2; }
#container > table:last-of-type a { font-size: 12px !important; white-space: nowrap; }

/* ---------- Fenêtre « Mentions légales » ---------- */
#overDiv {
    left: 0 !important;
    width: 100% !important;
    max-width: 100vw;
    box-sizing: border-box;
}
#overDiv table { width: 100% !important; max-width: 100vw; }
#overDiv input[type="text"], #overDiv textarea { width: 100%; box-sizing: border-box; font-size: 16px; }
#filtre { width: 100% !important; }