* {box-sizing:border-box;}
body {font-family:Tahoma,sans-serif;font-size:16px;margin:0;padding:0;overflow-x:hidden;}
a:link {text-decoration:none;color:#000}
a:visited {text-decoration:none;color:#000}
a:hover {text-decoration:none;color:#ED1C24}
h1 {font-weight:100;font-size:24px;color:#000;margin:0;padding:20px;text-align:center;}
h2 {font-weight:100;font-size:20px;color:#000;margin:0;padding:20px;text-align:center;}
.h1color {color:#6D8BA8;font-size:34px}
.logoremorque {width:100%;height:auto;margin:5px 15px}
.txtpetit {font-size:14px;color:#000;}
.txtpetitbl {font-size:14px;color:#FFF;}
.lien1:link {color:#000;text-decoration:none}
.lien1:visited {color:#000;text-decoration:none}
.lien1:hover {color:#E50212;text-decoration:underline}
.lienart:link {color:#000;text-decoration:underline}
.lienart:visited {color:#000;text-decoration:underline}
.lienart:hover {color:#FF8901;text-decoration:underline}
.recherchearticle {margin:40px auto 0 auto;max-width:800px;text-align:center}
#map {height:580px;margin:70px 0 0 0;clear:both}
hr {margin:40px 0}
.divcenter {width:100%;}
.padding40 {padding:40px}
.padding20 {padding:20px 40px}
.cb {clear:both}
iframe[src*="youtube"] {display:block;width:100%;max-width:560px;height:auto;aspect-ratio:16/9;margin:0 auto;border:0;}
iframe[src*="youtube-nocookie.com"] {display:block;width:100%;max-width:560px;height:auto;aspect-ratio:16/9;margin:0 auto;border:0;}
.centrer {text-align:center}
.btnmodif {font-size:24px;line-height:28px;color:#333;border:1px #333 solid;border-radius:4px;margin:0 auto;padding:5px;text-align:center;text-decoration:none;background:linear-gradient(#C4DFCC,#74B487);display:inline-block;transition:all .4s;box-shadow:0 0 5px rgba(0,0,0,0.5),0 -1px 0 rgba(255,255,255,0.4);text-shadow:0px 1px 0px rgba(255,255,255,0.2);}
.btnmodif:hover {background:linear-gradient(#74B487,#C4DFCC);transition:all .4s;text-decoration:none;color:#000;cursor:pointer;}
.content_remorque {width:100%;border:0;margin:0 auto;max-width:1600px}
.content_remorque h1 {font-weight:100;font-size:28px;color:#000;margin:0;padding:60px 0 30px 0;text-align:center;}
.alliance_distribution {display:table;width:95%;margin:80px auto;max-width:1400px;color:#333;background-color:rgba(255,255,255,0.7)}
.articles {display:table-cell;vertical-align:top;width:200px;box-shadow:18px 0 18px -10px #CCC,-18px 0 18px -10px #CCC;border-left:#081A1E 1px solid;border-radius:10px;border-right:#081A1E 1px solid;background-color:rgba(227,226,223,0.8)}
.remorques {vertical-align:top;box-shadow:10px 10px 10px #CCC;max-width:1400px;margin:0 auto;border:#C60605 1px solid;border-radius:20px;padding:40px;font-size:22px;}
.remorques h1 {font-size:40px;color:#000;text-shadow:0px 0px 6px #777;font-weight:100}
.remorques h2 {font-size:30px;color:#000;text-shadow:0px 0px 6px #777;font-weight:100}
.remorques_recherches {vertical-align:top;border-radius:0px 15px 15px 0px;border:1px solid #CCC;width:90%;text-align:center;padding:15px 0;margin:0 auto 30px auto}
#myModal {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:999999;display:flex;align-items:center;justify-content:center;}
#myModal img {max-width:90vw;max-height:85vh;border-radius:8px;box-shadow:0 0 30px rgba(0,0,0,0.5);}
#myModal .close {position:fixed;top:20px;right:30px;font-size:40px;color:#fff;cursor:pointer;line-height:1;z-index:1000000;}
#myModal .close:hover {color:#C60605;}
#myModal .prev, #myModal .next {position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.2);color:#fff;border:0;font-size:40px;padding:10px 16px;cursor:pointer;border-radius:6px;transition:background .3s;z-index:1000000;}
#myModal .prev {left:10px;}
#myModal .next {right:10px;}
#myModal .prev:hover, #myModal .next:hover {background:rgba(198,6,5,0.7);}
.photogalerie img {width:100%;height:100%;object-fit:cover;cursor:pointer;transition:opacity .3s;}
.photogalerie img:hover {opacity:0.8;}
.actualite {display:inline-block;width:350px;overflow:hidden;vertical-align:top;box-shadow:8px 8px 8px #CCC;border:#081A1E 1px solid;border-radius:15px;text-align:left;padding:40px;font-size:26px;margin:10px;transition:all .5s}
.actualite:hover {background-color:#E9E8E5;margin:5px 5px 15px 15px;transition:all .5s}
.btnmenuok {display:block;overflow:hidden;text-align:left;padding:5px 5px 5px 15px;font-size:16px;width:200px;color:#000;background-color:#C60605;transition:all .50s;}
.remorque_liste_img1 {background-size:contain;background-repeat:no-repeat;background-position:center;height:250px;width:350px;float:left;vertical-align:top;background-color:#E9E8E5}
.remorque_liste_prix {text-align:center;font-size:24px;color:#333;font-weight:bold;overflow:auto;line-height:50px;vertical-align:top}
.remorque_liste_prix .text {text-align:left;width:auto}
.remorque_liste_prix h2 {font-size:32px;padding:0}
.barre {text-decoration:line-through}
.rouge {color:#C60605}
.photogalerie {border:#036 solid 1px;width:200px;height:200px;margin:8px;display:inline-block;vertical-align:top;}
.article_peinture_encre_de_chine {display:table-cell;vertical-align:top;border-radius:0px 15px 15px 0px;border:1px solid #CCC;padding:15px}
.article_chemin {width:auto;border-radius:10px;background-color:#F1F1EF;font-size:28px;text-align:left;margin:0 0 20px 0;border:1px solid #999;padding:10px 0}
.article_chemin a:link, a:visited {color:#000}
.article_chemin a:hover {color:#920F0B}
.article_content {width:100%;border-radius:8px;border:1px solid #CCC;display:table;}
.menubtn.pdf {white-space:normal !important;word-break:break-word;max-width:400px;margin:0 auto;height:auto;line-height:1.4;}
.pdf {white-space:normal;word-break:break-word;max-width:400px;margin:0 auto;}
.pdfimg {vertical-align:middle;width:35px !important;height:40px !important}
.article_content h1 {color:#666}
.article_gauche {float:left;width:40%;text-align:center}
.article_droite {overflow:auto;}
.article_droite hr {color:#CCC;width:90%;margin:0;padding:0}
.article_imgbas {width:100%;display:block;text-align:center;vertical-align:middle;margin:50px 0 0 5px}
.article_img {height:auto;max-width:400px;}
.article_texte {width:90%;text-align:center;margin:0 auto;text-align:justify}
.btnnavdiv {width:100%;text-align:center}
.btnnav {display:inline-block;padding:10px 15px;border:#FFA207 1px solid;font-size:18px;margin:7px 3px;color:#000}
.btnnavon {display:inline-block;padding:10px 15px;border:#FFA207 1px solid;font-size:18px;margin:7px 3px;color:#000;background-color:#FAE7AD}
.btnnav:hover {background-color:#FAE7AD}
.naviout {width:40px;height:35px;margin:2px 0;vertical-align:top;display:inline-block;background-image:url(../remorque-photos/out.png);background-size:contain;text-decoration:none;}
.naviout:hover {background-color:#C60605;}
.logoimage {width:100%;height:auto;max-width:900px}
.logo {vertical-align:middle;margin:0 30px 0 0;padding:0}
.margintop {margin:20px 0}
.border {border:#F00 1px solid}
.fixNavigation {z-index:9999;position:fixed;top:40px;left:0;text-align:center;background-color:rgba(241,241,241,0.8);}
.basdiv {min-height:570px;text-align:center;overflow:hidden;background-color:#222222;box-shadow:0px -8px 8px #aaa;margin-top:60px}
.bas {max-width:1100px;width:80%;border:0;margin:20px auto;text-align:center;color:#FFF;}
a[href^="tel"], a[href^="mailto"] {color:inherit;text-decoration:none;}
.bas_remorque:link, .bas_remorque:visited {display:inline-block;vertical-align:top;text-decoration:none;font-size:16px;padding:5px;transition:all .4s;color:#FFF}
.bas_remorque:hover {color:#C60605;transition:all .4s}
.basligne {width:100%;min-height:40px;background-color:#C60605;box-shadow:0px -8px 8px #aaa}
.bascontient {width:80%;margin:0 auto;text-align:center;padding:60px 0}
.basg {margin:0;text-align:left;float:left;font-size:14px;color:#FFF;line-height:26px}
.basg p {font-size:18px;margin:0;padding:0;color:#FFF}
.basd {margin:0;text-align:right;float:right;font-size:12px;line-height:26px;color:#FFF}
.basd p {font-size:18px;margin:0;padding:0;color:#FFF}
.ordre {margin-top:0}
.txtnoir {font-size:14px;color:#000;}
.error {color:red;}
.txtpetitnoir {font-size:12px;color:#000;}
.txtTitreVert {font-size:28px !important;color:#4BBB4F;line-height:36px;text-align:center;background-color:#08113C;}
.txtTitreNoir {font-size:24px;color:#08113C;line-height:30px}
.btnindexphoto {width:200px;height:200px;margin:10px}
.btnindexfamille {overflow:auto;padding:10px;background-color:#E6E6E6;font-size:22px;color:#000C65}
.tablearticle {margin:15px auto;width:100%;border-spacing:0;max-width:1100px}
.tablearticle td {border:0;padding:8px;font-size:14px;}
.tablearticle th {font-size:16px;color:#FFF;text-align:center;background-color:#000;padding:6px;font-weight:100}
.borderscacin {border-spacing:1px}
.artremor {max-width:480px;text-align:left}
.tableacompte {margin:15px auto;width:90%;border-spacing:0;}
.tableacompte td {border:0;padding:8px;font-size:14px;white-space:nowrap;text-align:center}
.tableacompte th {font-size:16px;color:#FFF;text-align:center;background-color:#000;padding:6px}
.divacompte {width:50%;float:left;overflow:hidden;text-align:center}
.tablechemin {margin:15px auto;width:90%;border-spacing:0;}
.tablechemin td {border:0;padding:12px;width:20%;font-size:14px;white-space:nowrap;background-image:url(../remorque-photos/chemin.webp);background-position:center bottom;text-align:center}
.tablechemin td:hover {background-color:#C8C8C8}
.fontallaince {font-size:24px}
.gris1 {background-color:#F4F4F4}
.gris2 {background-color:#EEEEEE}
input, textarea {border-radius:5px;font-size:16px;color:#000;padding:5px;margin:4px;width:60%}
select {border-radius:5px;font-size:16px;color:#000;padding:5px;margin:4px;width:64%}
#CP, #CP_Livraison {margin:0;width:20%}
#Ville, #Ville_Livraison {margin:0;width:35%}
.checkbox {width:30px}
#recherche {font-size:22px;padding:8px;max-width:530px;width:100%;}
.button {font-size:16px;line-height:24px;font-weight:bold;color:#FFF;border:1px #333 solid;border-radius:4px;margin:3px;padding:8px;text-align:center;width:300px;text-decoration:none;background:linear-gradient(#C60605,#676766);display:inline-block;transition:all .4s;box-shadow:0 0 5px rgba(0,0,0,0.5),0 -1px 0 rgba(255,255,255,0.4);text-shadow:0px 1px 0px rgba(255,255,255,0.2);}
.button:hover {background:linear-gradient(#676766,#C60605);transition:all .4s;text-decoration:none;cursor:pointer;}
.buttons {font-size:14px;line-height:20px;font-weight:bold;color:#333;border:1px #333 solid;border-radius:4px;margin:1px;padding:4px 15px;text-align:center;min-width:30px;text-decoration:none;background:linear-gradient(#C4DFCC,#74B487);display:inline-block;transition:all .4s;box-shadow:0 0 5px rgba(0,0,0,0.5),0 -1px 0 rgba(255,255,255,0.4);text-shadow:0px 1px 0px rgba(255,255,255,0.2);}
.buttons:hover {background:linear-gradient(#74B487,#C4DFCC);transition:all .4s;text-decoration:none;color:#000;cursor:pointer;}
.buttons22 {width:200px}
.buttons24 {font-size:22px}
.button2 {font-weight:100;font-size:26px;line-height:40px;color:#FFF;border:1px #333 solid;border-radius:4px;margin:8px;padding:8px 15px;text-align:center;max-width:380px;width:100%;text-decoration:none;background:linear-gradient(#C60605,#5C2834);display:inline-block;transition:all .4s;box-shadow:0 0 5px rgba(0,0,0,0.5),0 -1px 0 rgba(255,255,255,0.4);text-shadow:0px 1px 0px rgba(255,255,255,0.2);}
.button2:hover {background:linear-gradient(#5C2834,#C60605);transition:all .4s;text-decoration:none;cursor:pointer;}
#button2out {font-weight:100;font-size:36px;line-height:40px;color:#FFF;border:1px #333 solid;border-radius:4px;margin:8px;padding:8px;text-align:center;max-width:580px;width:100%;text-decoration:none;background-color:#999;display:inline-block;transition:all .4s;box-shadow:0 0 5px rgba(0,0,0,0.5),0 -1px 0 rgba(255,255,255,0.4);text-shadow:0px 1px 0px rgba(255,255,255,0.2);}
.button4 {font-size:14px;line-height:16px;color:#FFF;border:1px #333 solid;border-radius:3px;margin:2px;padding:5px;text-align:center;text-decoration:none;background:linear-gradient(#C60605,#676766);display:inline-block;transition:all .4s;box-shadow:0 0 5px rgba(0,0,0,0.5),0 -1px 0 rgba(255,255,255,0.4);text-shadow:0px 1px 0px rgba(255,255,255,0.2);}
.button4:hover {background:linear-gradient(#676766,#C60605);transition:all .4s;text-decoration:none;cursor:pointer;}
.with150 {width:150px}
.with300 {max-width:330px}
.back_top {position:fixed;bottom:30px;margin:10px;right:30px;width:80px;height:80px;display:block;opacity:0.4;transition:.5s;background-image:url(../remorque-photos/fleche-page.png);cursor:pointer;}
.back_top:hover {opacity:0.9;transition:.5s;}

/* ── HEADER ───────────────────────────────────────────────────── */
.topdiv {width:100%;background:#111;padding:6px 20px;display:flex;justify-content:flex-end;align-items:center;gap:20px;position:relative;box-shadow:0 2px 8px rgba(0,0,0,0.3);}
.navitop {font-size:13px;color:#aaa;text-decoration:none;transition:color .3s;display:inline-block;padding:0;}
.navitop:hover {color:#fff;}
.navitop-sep {color:#444;}
.headermain {width:100%;background:#fff;border-bottom:3px solid #C60605;position:relative;box-shadow:0 2px 15px rgba(0,0,0,0.12);}
.headerinner {max-width:1400px;margin:0 auto;display:flex;align-items:center;padding:0 20px;gap:20px;}
.logo-zone {display:flex;align-items:center;gap:12px;padding:10px 0;text-decoration:none;flex-shrink:0;}
.logo-zone:hover {opacity:0.85;}
.logo-icon {width:42px;height:42px;background:#C60605;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.logo-icon svg {width:26px;height:26px;fill:#fff;}
.logo-text {display:flex;flex-direction:column;line-height:1;gap:4px;}
.logo-text span:first-child {font-size:17px;font-weight:700;color:#111;letter-spacing:-0.5px;}
.logo-text span:last-child {font-size:10px;color:#C60605;font-weight:600;letter-spacing:1px;text-transform:uppercase;}
.nav-center {display:flex;align-items:center;gap:2px;flex:1;justify-content:center;flex-wrap:wrap;}
.menubtn {display:inline-block;padding:8px 12px;font-size:18px;color:#333;text-decoration:none;border-radius:6px;transition:all .25s;font-weight:500;white-space:nowrap;}
.menubtn:hover {background:#C60605;color:#fff !important;}
.menubtn2 {background-color:#C60605;display:inline-block;vertical-align:top;text-decoration:none;border-radius: 10px 0 10px 10px; margin:5px 0; padding:11px; font-size:28px;transition:all .80s;color:#FFF}
.menubtn2:hover {text-decoration:none;background-color:#DFDFDF;transition:all .50s;color:#C60605}    
.nav-right {display:flex;align-items:center;gap:6px;flex-shrink:0;}
.btn-icon {width:38px;height:38px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all .25s;color:#333;flex-shrink:0;}
.btn-icon:hover {background:#C60605;color:#fff;}
.btn-icon svg {width:18px;height:18px;fill:currentColor;}
.btn-panier {display:flex;align-items:center;gap:8px;padding:8px 14px;background:#C60605;color:#fff !important;border-radius:8px;text-decoration:none;font-size:14px;font-weight:600;transition:all .25s;flex-shrink:0;}
.btn-panier:hover {background:#a00;}
.btn-panier .badge {background:#fff;color:#C60605;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
.search-bar {background:#fff;border-top:1px solid #eee;padding:8px 20px;width:100%;}
.search-inner {max-width:1400px;margin:0 auto;display:flex;align-items:center;}
.search-inner form {display:flex;gap:8px;width:100%;max-width:500px;}
.search-inner input {flex:1;min-width:0;padding:8px 14px;border:2px solid #eee;border-radius:8px;font-size:14px;outline:none;transition:border .25s;margin:0;width:100%;}
.search-inner input:focus {border-color:#C60605;}
.search-inner button {padding:8px 18px;background:#C60605;color:#fff;border:0;border-radius:8px;cursor:pointer;font-size:14px;transition:background .25s;white-space:nowrap;flex-shrink:0;}
.search-inner button:hover {background:#a00;}

/* ── DIAPORAMAS ───────────────────────────────────────────────── */
.categorie {transition:all 1.3s;}
.diaporama {width:350px;overflow:hidden;display:inline-block;margin:10px;vertical-align:top;box-shadow:8px 8px 8px #CCC;border:#C60605 1px solid;border-radius:15px;transition:all .5s;color:#000}
.diaporama:hover {margin:5px 5px 15px 15px;border:#000 1px solid;box-shadow:8px 8px 8px #666;color:#C60605}
.element {width:350px;height:263px;border-radius:15px;background-size:contain;background-repeat:no-repeat;background-position:center}
.categori {text-align:center;padding:5px;font-size:18px}
#wrapper {width:100%;}
.rslides {position:relative;list-style:none;overflow:hidden;width:100%;padding:0;margin:0;}
.rslides li {-webkit-backface-visibility:hidden;position:absolute;display:none;width:100%;left:0;top:0;}
.rslides li:first-child {position:relative;display:block;float:left;}
.rslides img {display:block;height:auto;float:left;width:100%;border:0;}

/* ── RESPONSIVE 1200px ────────────────────────────────────────── */
@media screen and (max-width:1200px) {
  h1 {font-size:24px;}
  h2 {font-size:20px;}
  .back_top {bottom:10px;margin:0;right:10px;width:40px;height:40px;background-size:contain;}
  .content_remorque {border:0;margin:0 auto;}
  .content_index {border:0;margin:20px auto;}
  .article_img {width:100%;height:auto;max-width:400px;}
  .logo-text span:first-child {font-size:14px;}
  .menubtn {font-size:13px;padding:6px 10px;}
}

/* ── RESPONSIVE 768px ─────────────────────────────────────────── */
@media only screen and (max-width:768px) {
  body {background-image:url(../remorque-photos/logo-pt.webp);}
  .topdiv {display:none;}
  .headermain {box-shadow:0 2px 8px rgba(0,0,0,0.15);}
  .headerinner {flex-wrap:wrap;padding:8px 10px;gap:6px;justify-content:center;}
  .logo-zone {justify-content:center;}
  .nav-center {order:3;width:100%;justify-content:center;padding:4px 0;}
  .nav-right {justify-content:center;width:100%;}
  .logo-text span:last-child {display:none;}
  .menubtn {font-size:12px;padding:6px 8px;margin:2px;}
  .search-bar {padding:6px 10px;}
  .search-inner form {max-width:100%;}
  .search-inner input {width:100%;}
  .diaporama {width:310px;margin:15px 0;}
  .diaporama:hover {margin:15px 0;}
  .element {width:310px;height:263px;}
  .article_peinture_encre_de_chine {display:block;width:auto;border-radius:15px;margin-top:40px}
  .article_img {max-width:300px;}
  .articles {display:block;width:auto;border-radius:15px 15px 0px 0px;margin:0 auto}
  .remorques {display:block;width:auto;border-radius:15px;padding:8px;margin:10px auto}
  .alliance_distribution {display:block;width:95%;margin:80px auto}
  .article_gauche {width:100%;display:block;vertical-align:middle;margin:0}
  .article_droite {width:auto;display:block;vertical-align:middle;margin:0;padding:5px}
  .content_index {width:100%;border:0;margin:10px auto 50px auto;max-width:1600px}
  .divacompte {width:100%;float:none}
  .logo {display:none}
  .margintop {margin:20px 0}
  .with150 {width:auto}
  th {font-size:14px}
  #recherche {width:100%;font-size:18px}
  .txtTitreNoir {font-size:36px;line-height:42px}
  .remorques_recherches {width:97%}
  .actualite {width:250px;border-radius:4px;padding:20px;margin:4px;}
  .remorque_liste_img1 {height:250px;width:250px;margin:0}
  #map {height:480px;margin:20px 0 0 0;}
  .basdiv {height:auto}
  .basg {text-align:center;width:100%;float:none}
  .basd {text-align:center;width:100%;float:none}
  .remorques img {float:none !important;width:100%;margin:0;padding:0}
  .remorques h1 {font-size:40px;}
  .bascontient {width:100%;}
  .ordre {margin:0 auto;padding:0;}
  .article_chemin {text-align:center;font-size:20px;margin:10px}
  .tablechemin {display:none}
}