/*
  Robert Juliat responsive UX updates CSS document 2026 for RJ website, 
  designed by Mr Atif BUX
  World Map controls.
*/

/* --------------------------------------------------------------------------
   Responsive Pages - UX V2 styling 2026
   -------------------------------------------------------------------------- */

body.distribution-page #distributionMap {
    width: calc(100% - 24px);
    max-width: 960px;
    height: auto !important;
    float: none !important;
    margin: 86px auto 60px !important;
    padding: 40px 0 30px;
    box-sizing: border-box;
    border-radius: 24px;
    background: transparent;
    box-shadow: none;
}
body.distribution-page .distribution-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 28px 24px;
}
body.distribution-page .distribution-controls > h1 {
    float: none !important;
    flex: 1 1 auto;
    width: auto;
    margin: 50px 0 0 !important;
    padding-bottom: 50px;
    color: #656565;
    font: 700 clamp(20px, 2.5vw, 28px)/1.2 "Montserrat", "Open Sans", Arial, sans-serif;
    text-align: left;
}
body.distribution-page .distribution-controls > form {
    flex: 0 1 290px;
    width: auto;
    margin: 50px 0 0;
}
body.distribution-page #country {
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 15px;
    box-sizing: border-box;
    border: 0;
    border-radius: 14px;
    background: #dedede;
    color: #656565;
    font: 14px "Montserrat", "Open Sans", Arial, sans-serif;
    box-shadow: inset 7px 7px 13px rgba(0,0,0,.16), inset -7px -7px 13px rgba(255,255,255,.85);
}
body.distribution-page #country:hover, body.distribution-page #country:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(229,109,177,.24), 0 0 18px rgba(229,109,177,.24), inset 7px 7px 13px rgba(0,0,0,.16), inset -7px -7px 13px rgba(255,255,255,.85);
}
body.distribution-page .world-map-frame {
    width: 100%;
    overflow: hidden;
    padding: 0;
    border-radius: 20px;
    background: #f1f0f0;
}
body.distribution-page #worldMapV2FR {
    width: 960px;
    height: 730px;
    margin: 0 auto !important;
    background-image: url(https://www.robertjuliat.fr/images/Map_Monde_RJ_v3.webp) !important;
    background-position: center top;
    background-size: cover;
    border-radius: 20px;
}
body.distribution-page #worldMapV2FR a {
    z-index: 2;
    width: 180px;
    height: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #4f4f4f;
    font: 700 15px/1.15 "Montserrat", "Open Sans", Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    background: none !important;
    filter: none;
}
body.distribution-page #worldMapV2FR a::before {
    content: "";
    display: block;
    width: 54px;
    height: 64px;
    margin: 0 auto 5px;
    background: url(https://www.robertjuliat.fr/images/Tracker.png) center / contain no-repeat;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,.22));
    transition: transform 160ms ease, filter 160ms ease;
}
body.distribution-page #worldMapV2FR a::after {
/*    display: block;
*/    width: max-content;
    max-width: 180px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 2px 7px rgba(0,0,0,.12);
}
body.distribution-page #worldMapV2FR .area_northAmerica::after {
    content: "Amérique du Nord";
}
body.distribution-page #worldMapV2FR .area_southAmerica::after {
    content: "Amérique du Sud";
}
body.distribution-page #worldMapV2FR .area_france::after {
    content: "France";
}
body.distribution-page #worldMapV2FR .area_europe::after {
    content: "Europe";
}
body.distribution-page #worldMapV2FR .area_middleEast::after {
    content: "Moyen-Orient";
}
body.distribution-page #worldMapV2FR .area_asia::after {
    content: "Asie";
}
body.distribution-page #worldMapV2FR .area_africa::after {
    content: "Afrique";
}
body.distribution-page #worldMapV2FR .area_australia::after {
    content: "Australie & Pacifique";
}
body.distribution-page #worldMapV2FR a:hover::before, body.distribution-page #worldMapV2FR a:focus-visible::before {
transform: translateY(-4px) scale(1.08);
filter: drop-shadow(0 0 8px rgba(229,109,177,.72)) drop-shadow(0 5px 4px rgba(0,0,0,.28));
}
body.distribution-page #worldMapV2FR a:focus-visible {
outline: 4px solid rgba(229,109,177,.85);
outline-offset: 3px;
border-radius: 10px;
}
body.distribution-page #worldMapV2FR .area_northAmerica {
    top: 172px;
    right: 735px;
}
body.distribution-page #worldMapV2FR .area_southAmerica {
    top: 400px;
    right: 618px;
}
body.distribution-page #worldMapV2FR .area_france {
    top: 223px;
    right: 424px;
}
body.distribution-page #worldMapV2FR .area_europe {
    top: 150px;
    right: 360px;
}
body.distribution-page #worldMapV2FR .area_middleEast {
    top: 255px;
    right: 300px;
}
body.distribution-page #worldMapV2FR .area_asia {
    top: 252px;
    right: 161px;
}
body.distribution-page #worldMapV2FR .area_africa {
    top: 385px;
    right: 365px;
}
body.distribution-page #worldMapV2FR .area_australia {
    top: 420px;
    right: 56px;
}
body.distribution-page .region-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding: 24px 0 0;
}
body.distribution-page .region-card {
    display: flex;
    min-height: 82px;
    flex-direction: column;
    justify-content: center;
    padding: 14px 16px;
    box-sizing: border-box;
    border-radius: 16px;
    background: #dedede;
    color: #656565;
    text-decoration: none;
    text-align: center;
    box-shadow: 8px 8px 15px rgba(0,0,0,.18), -7px -7px 14px rgba(255,255,255,.86);
    transition: transform 140ms ease, box-shadow 140ms ease, color 140ms ease;
}
body.distribution-page .region-card strong {
    font-size: 15px;
    line-height: 1.2;
}
body.distribution-page .region-card small {
    margin-top: 5px;
    color: #888;
    font-size: 11px;
}
body.distribution-page .region-card:hover, body.distribution-page .region-card:focus-visible {
transform: translateY(-2px);
color: #c24d91;
outline: none;
box-shadow: 0 0 0 3px rgba(229,109,177,.24), 0 0 20px rgba(229,109,177,.22), 10px 10px 18px rgba(0,0,0,.18), -8px -8px 15px rgba(255,255,255,.90);
}

@media (max-width: 767px) {
html, body {
    overflow-x: hidden;
}
body.distribution-page #distributionMap {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 46px 12px 40px !important;
    padding: 32px 0 22px;
    border-radius: 20px;
}
body.distribution-page .distribution-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 0 16px 33px;
}
body.distribution-page .distribution-controls > h1 {
    display: block;
    width: auto;
    margin: 50px 0 0 !important;
    box-sizing: border-box;
    white-space: normal;
    padding-bottom: 0;
    font-size: 21px;
    text-align: center;
}
body.distribution-page .distribution-controls > form {
    display: block;
    flex-basis: auto;
    width: 100%;
    margin: 0;
}
body.distribution-page .world-map-frame {
    width: 100%;
    height: auto;
    aspect-ratio: 960 / 730;
}
body.distribution-page #worldMapV2FR {
    transform: scale(.38);
    transform-origin: center top;
    left: 50%;
    margin: 0 0 -452px -480px !important;
}
body.distribution-page .region-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px 0 0;
}
body.distribution-page .region-card {
    min-height: 92px;
    padding: 16px 12px;
}
body.distribution-page .region-card strong {
    font-size: 17px;
}
body.distribution-page .region-card small {
    font-size: 12px;
}
}

@media (min-width: 421px) and (max-width: 767px) {
body.distribution-page #worldMapV2FR {
    transform: scale(.42);
    margin-bottom: -423px !important;
}
}

@media (min-width: 500px) and (max-width: 599px) {
body.distribution-page #worldMapV2FR {
    transform: scale(.50);
    margin-bottom: -365px !important;
}
}

@media (min-width: 600px) and (max-width: 679px) {
body.distribution-page #worldMapV2FR {
    transform: scale(.60);
    margin-bottom: -292px !important;
}
}

@media (min-width: 680px) and (max-width: 767px) {
body.distribution-page #worldMapV2FR {
    transform: scale(.70);
    margin-bottom: -219px !important;
}
}

@media (max-width: 420px) {
body.distribution-page #worldMapV2FR {
    transform: scale(.38);
    margin-bottom: -452px !important;
}
}

@media (max-width: 360px) {
body.distribution-page #worldMapV2FR {
    transform: scale(.30);
    margin-bottom: -511px !important;
}
}