/* Couleurs */
BODY {background:#000}
TABLE {background:#ccc}
#menu_paysage > TBODY > TR > TD {background:#f0f0f0}
#menu_paysage > TBODY > TR > TD:hover {background:#e0e0e0; outline:solid #c0c0c0 2px}
#menu_paysage TABLE.sub {background:#e0e0e0; border:solid #c0c0c0 1px}
#menu_paysage TABLE.sub TD {background:#fafafa}
#menu_paysage TABLE.sub TD:hover {background:#eaeaea}
#menu_paysage TD.language {background:#fafafa; outline:solid #fff 0px}
MAIN > TABLE, MAIN > DIV {background:#ccc}
A {color:#008; font-weight:600}
TH {background:#f0f0f0}
TD {background:red}
DIV.title {background:#fafafa; border:#c0c0c0}
TD:has(>[type="radio"]):hover, TD:has(> * > [type="radio"]):hover {background:#f0f0f0}
TD:has([type="radio"]).selected {background:#f0f0f0}
TD.ordered {color:#d00}
TD.paid {color:#0000a9}
TD.cleared {color:#070}
TD.ended {color:#a00}
TD:has(> LI) {background:red}
OPTION {background:#fff}
SELECT[size] {background:#c0c0c0}
SELECT[size] OPTION {background:#fff}
TABLE.invalid {border:red solid 1px}
INPUT.invalid {outline:red solid 1px}


/* Largeurs et dimensions */
HTML {font-family:Sans; margin:auto; padding:0px}
HTML.paysage BODY {font-size:14px}

BODY {display:table; height:100%; margin:0px auto; position:relative; text-align:center; vertical-align:bottom} /*position:relative*/
BODY > MENU {display:table-row; height:75px; margin:auto; text-align:center}
BODY > MAIN {display:table-row}
BODY > MAIN > MAIN {display:table-cell; text-align:center; vertical-align:middle; width:1100px}
BODY > VPN {display:table-row; height:35px; margin:auto; text-align:center}

/*
HTML.portrait BODY {font-size:48px}
*/
HTML.portrait TABLE {width:100%}
HTML.portrait DIV {width:100%}

HTML.portrait.cell {font-size:20px}

HTML.portrait.tablet {font-size:16px}
HTML.portrait.tablet TH {padding:10px}
HTML.portrait.tablet TD {padding:10px}
HTML.portrait.tablet INPUT {font-size:100%; padding:10px}
HTML.portrait.tablet SELECT {font-size:100%}
HTML.portrait.tablet BUTTON {font-size:100%}

HTML.portrait.cell {font-size:40px}


HTML.portrait TH {font-size:110%}
HTML.portrait TD {font-size:100%}
HTML.portrait LI {font-size:100%}
HTML.portrait INPUT {font-size:42px; height:100%; padding:3px}
HTML.portrait INPUT[type="radio"] {margin:1px} /* scale:2 */
HTML.portrait SELECT {font-size:42px; padding:20px; width:100%}
HTML.portrait BUTTON {font-size:48px; padding:2%}


#menu_paysage {border-radius:4px; height:38px; left:50%; margin-top:4px; position:fixed; transform:translateX(-50%); width:1100px; z-index:1}
#menu_paysage TD {cursor:pointer; font-weight:600}
#menu_paysage TD:not(.language):hover {transition:background 0.3s linear}
#menu_paysage TD:not(.language):hover TABLE.sub {display:table}
#menu_paysage TABLE.sub {border-radius:0px; display:none; margin-left:-8.4px; margin-top:8px; position:absolute}
#menu_paysage TABLE.sub TD {padding:8px; white-space:nowrap}
#menu_paysage TD.language {background:#fff; font-weight:500; padding:0px; white-space:nowrap}
#menu_paysage TD.language:hover {background:#fff}
#menu_paysage TD.language SPAN {padding:7px}
#menu_paysage TD.language SPAN:hover {background:#e0e0e0; font-weight:600}
#menu_paysage TD.language SPAN.selected {background:#f5f5f5; border:solid #a0a0a0 1px; font-weight:600}

#menu_portrait {background:#000; margin-top:15px; position:fixed; width:65%; z-index:9; outline:#000 solid 3px}
#menu_portrait TH {font-size:; padding:20px}
#menu_portrait TD {font-size:; padding:15px}
#menu_portrait TBODY TR:first-child TD {font-size:100%}
#menu_portrait TBODY:not(:first-child) {display:none}
#menu_portrait TBODY.sub TR:not(:first-child) {display:none}
#menu_portrait TBODY.sub.show {border-radius:10px; outline:#999 solid 5px}
#menu_portrait TBODY.sub.show TR {display:table-row}
#menu_portrait TBODY.sub.show TR:first-child TD {background:#ccc; font-weight:600}
#menu_portrait TBODY.sub.show TR:not(:first-child) TD {font-size:80%; padding:15px}

#vpn {margin:auto; margin-top:30px; width:100%}
#vpn TD {height:60px; padding:0px; text-align:center; width:33%}
HTML.paysage #vpn IMG {height:100%}
HTML.portrait #vpn IMG {max-height:250px; height:auto; width:100%}

HTML.portrait MAIN > MAIN {padding-top:60px}

HTML.paysage MAIN > TABLE, MAIN > DIV {margin:0px auto 30px auto; width:90%}
HTML.portrait MAIN > TABLE, MAIN > DIV {margin:50px auto 30px auto; width:95%}

TABLE {border:#ddd solid 1px; border-radius:10px; border-spacing:1px; margin:25px auto}
TABLE.form TD:first-child {font-weight:600; text-align:right; width:50%}
TABLE.form TD:first-child:not(*.no_comma)::after {content:':'}

TABLE.form TD:has(>button) {}
TABLE.form BUTTON {margin:0px; width:100%}

HTML.portrait TH {padding:20px 8px}
HTML.paysage TH {padding:7px}

HTML.portrait TD {padding:20px}
HTML.paysage TD {padding:6px 12px}

TD:has(>[type="radio"]):hover, TD:has([type="radio"]) IMG {cursor:pointer; transition:background 0.3s linear}

TD:has(UL) {text-align:left}
HTML.portrait LI {padding:1px}

HTML.paysage #providers_home TABLE.provider TD.details {padding:1%}
HTML.portrait #providers_home TABLE.provider TD.details {padding:20px}

HTML.paysage BUTTON {padding:2px; white-space:nowrap}
HTML.paysage INPUT {padding:0.6%}
HTML.paysage SELECT {font-weight:bold; padding:3px}
HTML.paysage OPTION {font-weight:400}

HTML.portrait BUTTON {padding:2%}
HTML.portrait INPUT {height:100%; padding:2%}
HTML.portrait INPUT:focus {border:#c0c0c0 solid 3px}
HTML.portrait INPUT[type="radio"] {margin:5px; width:40px; height:40px}
HTML.portrait SELECT {padding:20px}

BUTTON {font-weight:600; margin:0px; width:100%}
HTML.portrait BUTTON {border:#000 3px solid}
INPUT {text-align:center}
SELECT {text-align:center}
SELECT[size] {height:100%; padding:0px; width:100%}
SELECT[size] OPTION {margin:1px; padding:6px}
OPTION {text-align:center}

DIV {border-radius:5px; margin:auto; text-align:center}
HTML.portrait DIV.title {border:1px solid; border-radius:10px; font-weight:600; margin:auto; padding:10px; text-align:center; width:90%}
HTML.paysage DIV.title {border:1px solid; border-radius:10px; font-weight:600; margin:50px auto; padding:10px; text-align:center; width:90%}

TABLE.details {width:70%}
TABLE.details TD:first-child {font-weight:600; text-align:right; width:50%}

TABLE.payment {width:70%}
TABLE.payment TD:first-child {font-weight:600; text-align:right; width:50%}
TABLE.payment TD:first-child DIV {text-align:right}