html,body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,img{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
html,body{min-height:100%;font-size: 16px;line-height: 1.5;}
p{margin:0 0 12px}
ol,ul{margin:0 0 12px}
a,a:active,a:visited{outline:none;color:#1db79f;text-decoration:none}
a img{border:none;outline:none}
p code,table td:last-child code,.content ul li code,code.mark{padding:2px 4px;color:#333;background-color:#f1f1f1;border-radius:4px}
a code{color:inherit;background:none;padding:0}
table{border-collapse:collapse;border-spacing:0}
table td{vertical-align:top}
body{min-width:320px;color:#414141;background:#fafafa;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",sans-serif;font-size:17px;line-height:1.4}
input,select,textarea,button,div,span,a{box-sizing:border-box}
h1,h2,h3,h4{color:#262626;margin:1.5em 0 0.75em;line-height:1.3;font-weight:600}
h1{font-size:clamp(1.75rem, 5vw, 2.5rem);margin-top:17px}
h2{font-size:clamp(1.5rem, 4vw, 2rem);}
h3{font-size:clamp(1.25rem, 3vw, 1.75rem); color:#1ebba3; font-family: math}
.space{margin-bottom:25px!important}
.break{margin-bottom:15px!important}
.text-center{text-align:center!important}
.scroll{height:195px;overflow-y:scroll}
.scroll.large{height:245px}
.scroll.xlarge{height:290px}
.scroll.xxlarge{height:340px}
sup{font-size:13px}
h1 sup{background:#ec0000;border-radius:3px;padding:5px 10px;font-size:15px;color:#fff;position:relative;top:5px}
.leaderboard{padding-top:14px;position:relative;height:105px;overflow:hidden}
.intro-image img{display:block;padding:10px 0 25px;max-width:100%}
.clearfix::after{content:".";display:block;height:0;clear:both;visibility:hidden}
code,.code,.syntax,.green-box,.sky-box,.gray-box,.pink-box,.red-box,.at-rule,.codebox pre,.console-output,.command{font-size:16px;font-family:Consolas,Monaco,Courier,monospace}
.console-output{margin:15px 0}
.command{background:#f2f2f2;padding:16px 18px;margin:15px 0 25px;border-radius:3px}
hr{border:none;border-bottom:1px solid #e7e9ed;height:1px;margin:30px 0}
.summary,.topic{border:1px solid #eaeaea;border-width:1px 0;margin:20px 0;padding:10px 0;line-height:1.5}
h2.section-title span{display:inline-block;border-bottom:4px solid #c9d7e0;padding:0 50px 12px 0}
.wrapper{width:100%;max-width:1300px;padding:0 15px;margin:0 auto}
.header{background:#23384e;padding:16px 0;position:relative}
input.search{background:#fff;border:0 none;color:#807E7E;float:left;height:38px;line-height:26px;font-size:14px;margin:0 0 0 12px;outline:medium none;padding:6px 14px;width:500px;border-radius:2px;box-shadow:0 0 1px rgba(0,0,0,0.6);font-family:inherit}
.search-btn{color:rgba(0,0,0,.6);background:#ebebeb;border:none;outline:none;cursor:pointer;float:left;height:38px;line-height:46px;width:44px;display:block;margin-left:-2px;border-radius:0 2px 2px 0;box-shadow:0 0 1px rgba(0,0,0,0.7)}
.logo{width:304px}
.logo img{height:44px;margin:-3px 0;display:block}
.site-search{float:left;margin-left:100px}
.menu{margin-bottom:15px;#f5f5f5;box-shadow:0 1px 1px rgba(0,0,0,.15);position:relative;z-index:9;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
.menu a{color:#666;display:inline-block;padding:12px 15px;text-decoration:none;font-size:14px;font-weight:600;height:48px;transition:color 0.2s}
.menu a:first-child{margin-left:-10px}
.menu a.tool-link{float:right;display:block;border-radius:30px;line-height:28px;position:relative;height:auto;top:9px;padding:0 12px;color:#1ebba3;border:1px double #1ebba3}
.menu a:hover{color:#1ebba3}
.fl,.logo{float:left}
.leftcolumn{width:100%;max-width:350px;float:left;font-size:16px;color:#4f4f4f}
.centercolumn{width:100%;max-width:800px;float:left}
.rightcolumn{width:100%;max-width:180px;float:left}
.content{background:#fff;padding:20px;border:1px solid #dedede;border-top:none;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.sidebar{width:160px;float:left;padding-top:28px;margin-left:20px;position:relative}
.leftcolumn .segment{margin:16px 0 12px;position:relative;font-size:18px;font-weight:600;line-height:normal}
.leftcolumn a {
    color: #4f4f4f;
    font-size: 12px;
    line-height: 20px;
    padding-right: 2px;
    letter-spacing: -0.2px;
    border-bottom: 1px solid transparent;
}
.leftcolumn ul{list-style:none;padding:0;margin:0;}
.leftcolumn ul li a {
  display: flex;
  align-items: center;
  padding: 0.8rem;
  width: 100%;
  color: #4a5568;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .02);
}
.segment,.chapters,.chapters a{}
h1 code,h2 code,h3 code{font:inherit}
.color-box{margin:15px 0;padding-left:20px;font-size: small;}
.note-box,.warning-box,.tip-box{padding:8px 8px 3px 26px}
.info-tab{float:left;margin-left:-23px}
.content ul li{margin-top:7px}
.extra{padding-top:5px}
.green-box,.sky-box,.gray-box,.red-box,.pink-box{color:#000;margin-top:15px;padding:10px;background-color:#f6f8fa;border:1px solid #d7e2ec}
.example{background:#f4f5f6;padding:3px;margin:15px 0}
.codebox{background:#fff;border:1px solid #ddd}
.codebox-title{height:41px;padding-left:12px;border-bottom:1px solid #ddd;background:#f5f5f5}
.codebox-title h4{margin:0;font-size:18px;line-height:40px;float:left;font-weight:600}
a.try-btn,a.download-btn{width:140px;height:40px;color:#333;font-size:15px;line-height:41px;font-weight:600;text-align:center;text-decoration:none;float:right;display:block;border-left:1px solid #ddd;background:rgba(27,31,35,0.08);box-sizing:border-box;font-family:Arial,sans-serif}
a.try-btn span{font-size:18px;line-height:normal}
.hide,.code-style,.box-size,.bottom-link,.code-style,.snippets,.report-error,.badge,.social,.ad-label,.mobile-only,ul.tree-menu li ul{display:none}
.skyscraper{width:160px;height:600px;overflow:hidden;margin-bottom:20px;background:#ebecf0}
.bottom-ad{margin-top:46px;position:relative;background:url(lib/images/smooth-line.png) no-repeat center #f9f9f9}
.rectangle-left,.rectangle-right{min-width:336px;min-height:280px;overflow:hidden}
.fr,a.previous-page,a.next-page,.rectangle-right,.topic-nav{float:right}
a.previous-page,a.next-page{width:32px;height:32px;line-height:30px}
.shadow{background:#F7F8F9;padding:3px;margin:10px 0}
.syntax{color:#2f4959;padding:13px 18px;background:#F9F9FA;border:1px solid #ddd;font-size:15px}
code[class*="language-"],pre[class*="language-"]{color:#000;background:none;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-break:normal;word-wrap:normal;line-height:1.5;tab-size:4;hyphens:none}
pre[class*="language-"]{position:relative;margin:.5em 0;overflow:visible;padding:0}
pre[class*="language-"]>code{position:relative;border-left:10px solid #358ccb;box-shadow:-1px 0 0 0 #358ccb,0 0 0 1px #dfdfdf;background-color:#fdfdfd;background-image:linear-gradient(transparent 50%,rgba(69,142,209,0.04) 50%);background-size:3em 3em;background-origin:content-box;background-attachment:local}
code[class*="language"]{max-height:inherit;height:inherit;padding:0 1em;display:block;overflow:auto}
:not(pre) > code[class*="language-"]{position:relative;padding:.2em;border-radius:.3em;color:#c92c2c;border:1px solid rgba(0,0,0,0.1);display:inline;white-space:normal}
pre[class*="language-"].line-numbers{padding-left:0}
pre[class*="language-"].line-numbers code{padding-left:3.8em}
pre[class*="language-"].line-numbers .line-numbers-rows{left:0}
pre[class*="language-"][data-line]{padding-top:0;padding-bottom:0;padding-left:0}
pre[data-line] code{position:relative;padding-left:4em}
pre .line-highlight{margin-top:0}
pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber;white-space:pre-wrap!important}
pre.line-numbers > code{position:relative;white-space:inherit}
.line-numbers-rows,.codebox pre.inactive{display:none}
.codebox pre.syntax-highlighter{margin:0;padding:0;overflow:auto}
pre.line-numbers .line-numbers-rows{border-right:3px solid #6CE26C}
.codebox pre.syntax-highlighter > code{box-shadow:none!important;padding-left:3.8em;background-image:linear-gradient(transparent 50%,#F8F8F8 50%);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace!important;font-size:16px;line-height:1.5;overflow-wrap:break-word}
.codebox pre.syntax-highlighter,.codebox pre.syntax-highlighter code{border:none;width:100%;box-sizing:border-box}
pre.line-numbers code,pre.line-numbers .line-numbers-rows{padding-top:2px;padding-bottom:2px}
.preview-box{padding:15px;text-align:center;cursor:pointer;overflow:hidden;background:#FFF;border:1px solid #e6e6e6}
.preview-box a,.preview-box img{display:block;margin:0 auto}
.download-box{text-align:center;padding:20px 0;margin:20px 0 10px}
.output-box{border-color:#d4d4d4;border-style:solid;border-width:1px 0;padding:5px 15px;overflow:hidden;background:#fff;margin:10px 0}
.demo-box{margin-top:15px}
.subhead{border-bottom:3px solid #DCE3EB;margin-bottom:15px;padding-bottom:10px}
table.data,table.description{width:100%;font-size:92%}
table.data th{color:#000;padding:8px 7px;text-align:left;font-size:15px;background:#F8F8F8}
table.data td{color:#484848;padding:5px 7px;background:#fff}
table.data th,table.data td{vertical-align:top;border:1px solid #DCE3EB}
table.data tr.section th,table.data td.section{font-size:15px;background:#f0f4f7}
table.description th{width:150px}
table.no-wrap tr td:first-child{white-space:nowrap}
.topic-nav{padding-right:5px;color:#d0d0d0}
.topic-nav a{padding:0 15px;margin:0 0 0 5px;position:relative;display:inline-block}
.topic-nav a::after{font-size:24px;position:absolute;line-height:22px}
.topic-nav a:first-child{margin:0 5px 0 0}
.topic-nav a:first-child::after{content:'\00AB';left:-5px}
.topic-nav a:last-child::after{content:'\00BB';right:-5px}
@media screen and (max-width: 1280px) {
body{min-width:1260px}
.wrapper{width:1260px}
.leftcolumn{width:230px}
.centercolumn{width:820px}
.preview-box img{max-width:100%;height:auto}
}
@media screen and (max-width: 800px) {
body{min-width:100%;max-width:100%;padding-top:60px}
.wrapper{width:100%;padding:0}
.header{height:46px;padding:5px 0;position:fixed;top:0;left:0;right:0;width:100%;z-index:1000}
.logo{width:auto;display:block;padding:6px 0 0 60px;position:absolute;left:0;z-index:100}
.logo img{height:30px}
.menu{width:100%;padding-left:12px;padding-right:12px;overflow-x:auto;white-space:nowrap}
.menu a{padding:10px 12px}
.centercolumn{width:100%;float:none}
.content{padding:15px;border-width:0 0 1px 0}
.content img{max-width:100%;height:auto}
.skyscraper{display:inline-block}
.shadow,.example,.console-output,.content pre{max-width:100%;overflow-x:auto}
.codebox-title{position:relative}
.codebox.multi-style-mode pre{padding-top:7px;margin-top:36px;border-top:1px solid #ddd}
.bottom-ad{height:auto;background:none;padding:30px 0 0;margin:40px 0 0;text-align:center;position:relative}
.rectangle-left,.rectangle-right{float:none;display:inline-block;margin:10px auto;background:#EDEEF2}
.leftcolumn,.footer,.social,.site-search,.code-style,.menu a.tool-link,.backdrop{display:none}
.summary,.topic{padding:5px 0;margin:10px 0}
.leftcolumn,.centercolumn,.rightcolumn,.sidebar{float:none}
.header,.menu,.centercolumn,.footer,.appeal-text{width:100%}
a.try-btn,a.download-btn{width:130px}
.native-unit{margin-bottom:30px}
.rightcolumn,.sidebar{margin: 25px auto 0}
.overview{padding-right:0}
.scroll-pane{overflow-x:auto}
table.data{min-width:480px}
table.data pre{display:inline;white-space:normal}
table tr th,table tr td{width:auto!important}
.preview-box{padding:6px}
.leaderboard{margin:20px 0}
h1{font-size:30px}
h2{font-size:24px}
h3{font-size:20px}
.codebox pre.syntax-highlighter{overflow-x:auto}
.codebox pre.syntax-highlighter > code{min-width:614px;height:auto;overflow-x:hidden}
.mobile-nav {
    display: block;
    position: fixed;
    top: 0;
    left: -280px;
    bottom: 0;
    width: 280px;
    background: #fff;
    z-index: 1001;
    transition: transform 0.3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-nav.active {
    transform: translateX(280px);
}

.menu-btn {
    display: block;
    position: relative;
    z-index: 1002;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
}
}
@media screen and (min-width: 801px) {
.site-search,.leftcolumn,.social{display:block!important}
.backdrop{display:none!important}
.hide-scroll{overflow-x:hidden!important}
}
.menu a.old-version{height:21px;font-size:13px;line-height:17px;border:1px double;border-radius:40px;margin-right:10px}
.section-left,.section-right{margin-bottom:30px}
.section-left img,.section-right img{display:block}
.section-left{padding-right:265px}
.section-right{padding-left:280px;text-align:right}
.step-by-step img{float:right;margin-right:-275px;margin-top:-208px}
.reference img{float:left;margin-left:-286px;margin-top:-212px}
.tools img{float:right;margin-right:-260px;margin-top:-200px}
.section-right.reference, .section-left {
    padding-top: 0px;
    border: solid;
    margin:0px;
    border-color: lightgrey;
    border-width: 1px;
}
.section-right.reference h2, .section-left h2 {
    color:#828282;
    font-size: 1.75rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}
.sidebar {
    max-width: 350px; 
    overflow: hidden;
}

.sidebar iframe,
.sidebar ins {
    max-width: 100%; /* Empêche les annonces de déborder */
    height: auto; /* Ajuste la hauteur automatiquement */
}

.ruler{padding-bottom:50px;background:url(/lib/images/separator-ruler.png) no-repeat center bottom transparent}
.gap{margin-bottom:40px}
@media screen and (max-width: 800px){
.section-left,.section-right{padding-left:0;padding-right:0;text-align:center}
.section-left img,.section-right img{float:none;margin:20px 0 0;display:inline-block}
}
.chapters ul li span {   
    padding: 0 3px;
    margin: 0 3px 0 0;
    border-radius: 3px;
    font-size: 10px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    border: 1px double #1ebba3;
}
.margin-right
{
    margin-right: 10px;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: #e9ecef82;
    border-radius: 0.25rem;
}

.breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    color: #6c757d;
    content: "/";
}

a:hover{color:#1a9f8b;text-decoration:underline}
.header{box-shadow:0 1px 2px rgba(0,0,0,0.2)}
.menu a:hover{color:#000;text-decoration:none}
.menu a.tool-link:hover{color:#c87cf3;border-color:#c87cf3}
p.topic a.disabled{color:#afcbda;cursor:default;background:none}
.leftcolumn a:hover{color:#222;text-decoration:underline}
.leftcolumn a.selected:hover{text-decoration:none}
.content code.plain,.content table.data code.plain{color:#000;background:transparent;padding:0;border-radius:0}
.leftcolumn ul li code a{background:transparent}
table td:first-child code{color:#000;background:transparent}
table td:first-child code a{color:#1ebba3}
.note-box a{color:#4395c6}
.content .color-box code{background:transparent;padding:0;font-size:16px;color:inherit}
.content .color-box code a{background:transparent;margin:0}
.warning-box a{color:#d45565}
.tip-box a{color:#439800}
.note-box{color:#144261;background:#d5e9f6}
.warning-box{color:#913944;background:#ecd2d7}
.tip-box{color:#2e5014;background:#d5efc2}
.green-box{background-color:#E9F6F5;border:1px solid #A9CAC6}
.sky-box{background-color:#F2F7FA;border:1px solid #8FB5C0}
.gray-box{background-color:#F1F1F1;border:1px solid #E4E4E4}
.pink-box{background-color:#f9eff8;border:1px solid #c5a1c3}
.red-box{background:#FFECEC;border:1px solid #CD949A}
.syntax-highlighter.sql span.cm-keyword{color:#069;text-shadow:0 0 0 rgba(0,124,185,0.6)}
.leftcolumn a.selected{text-decoration:none;border-bottom:1px dotted}
.leftcolumn a.more{color:#efb351}
.rounded{color:#F9F9F9;font-size:12px;font-weight:700;display:inline-block;text-decoration:none;border-radius:800px;background-color:#1ebba3;padding:5px 10px;cursor:pointer;font-family:"Trebuchet MS",Arial,sans-serif}
.rounded:hover{background-color:#24a28e}
.preview-box.unclickable{cursor:default}
.segment.affiliate i{width:10px;height:10px;display:inline-block;margin-left:2px;background:url(/lib/images/sprite-1.0.png) no-repeat scroll 100% -691px transparent}
.segment.affiliate:before{background:#EFB351}
.segment.affiliate span{color:#efb351}
.property,.function{color:#069}
.keyword,.parameter{color:#881280}
.toggle{float:right;font-size:12px}
.order-by-alphabet{display:none}
.html-tags table th:first-child,.html-tags table td:first-child{width:130px}
.css-properties table th:first-child,.css-properties table td:first-child{width:170px}
.terms-definition p{padding-bottom:20px}
.terms-definition p.normal{padding-bottom:0}
.example-list ul{margin:10px 0 20px}
.line-numbers .line-numbers-rows{display:block;position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;user-select:none}
.line-numbers-rows > span{pointer-events:none;display:block;counter-increment:linenumber}
.line-numbers-rows > span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}
.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999}
.token.punctuation{color:#5F6364}
.token.property,.token.tag,.token.boolean,.token.number,.token.function-name,.token.constant,.token.symbol,.token.deleted{color:#905}
.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#690}
.token.function{color:#DD4A68}
.token.operator,.token.entity,.token.url,.token.variable,.language-css .token.string,.style .token.string{color:#a67f59;background:rgba(255,255,255,0.5)}
.token.atrule,.token.attr-value,.token.keyword,.token.class-name{color:#07a}
.token.regex,.token.important{color:#e90}
.token.important{font-weight:400}
.token.bold{font-weight:700}
.token.italic{font-style:italic}
.token.entity{cursor:help}
.namespace{opacity:.7}
.token.tab:not(:empty):before,.token.cr:before,.token.lf:before{color:#e0d7d1}
.length-calculator{padding:15px 0 10px}
.length-calculator textarea{border:1px solid #D2D2D2;display:block;font:13px/21px Verdana,Arial,sans-serif;margin-bottom:5px;overflow-y:auto;padding:5px 10px;resize:none;width:100%;box-sizing:border-box}
.length-calculator p{padding-top:0;font-size:12px}
.custom-form-element{padding-top:20px}
a.download-source-btn{display:inline-block;background-color:#49AFCD;background-image:linear-gradient(to bottom,#5BC0DE,#2F96B4);box-shadow:0 1px 0 rgba(255,255,255,0.2) inset,0 1px 2px rgba(0,0,0,0.05);background-repeat:repeat-x;border-width:1px;border-style:solid;border-color:#429db8 #3b97b2 #37839a;color:#FFF;text-shadow:0 -1px 0 rgba(0,0,0,0.25);border-radius:6px;font-size:18px;font-family:"Trebuchet MS",Arial,sans-serif;padding:10px 20px;text-decoration:none}
a.download-source-btn:hover{color:#FFF;background-color:#2F96B4;background-image:linear-gradient(to bottom,#2F96B4,#2F96B4)}
.download-icon{width:15px;height:15px;display:inline-block;background:url(/lib/images/sprite-1.0.png) no-repeat 0 -1230px transparent}
.download-icon:hover{background-position:0 -1230px}
.mysql-table-demo{font-family:monospace;margin:15px 0}
table.data.align-center th:first-child,table.data.align-center td:first-child{text-align:center}
table.data td.section strong{font-family:"Trebuchet MS",Arial,sans-serif;font-size:15px}
table.data td img{display:block}
table.list-demo td ul{margin-top:3px}
table.list-demo td ul li{padding-top:0;padding-left:0;background:none}
.usage{padding:10px 18px 5px;margin-top:15px;background-color:#FAF9E2;border-width:1px 0;border-color:#DDDAAA}
.usage h2,.usage h3{margin-top:0;line-height:normal}
.usage li p{padding-top:0}
.usage a,.usage a:visited{color:#5D5636}
.usage a:hover{color:#000}
.usage code{color:#5D5636!important}
.usage code,.usage code a{background:transparent!important;padding:0!important;margin:0!important}
a.deprecated,a.omitted,a.obsolete{display:inline-block;padding:0 10px;font-size:12px;text-decoration:none;border-radius:20px}
a.obsolete{color:#fff;background:#fb8b89;box-shadow:2px 2px 0 #fed5d3;text-shadow:0 1px 0 rgba(146,9,5,0.2)}
a.deprecated{color:#f1e9f3;background:#c6a7cf;box-shadow:2px 2px 0 #e9ddec;text-shadow:0 1px 0 rgba(69,31,79,0.2)}
a.omitted{color:#eff0f1;background:#bbc0c6;box-shadow:2px 2px 0 #e3e6e8;text-shadow:0 1px 0 rgba(56,61,68,0.2)}
a.deprecated:hover,a.obsolete:hover,a.omitted:hover{text-decoration:underline}
.support{background:#F8F8F8;border:1px solid #e2e2e2;color:#2F4959;padding:15px}
.support table td:first-child{padding:0 25px;border-right:1px dashed #D0D0D0;vertical-align:middle}
.support h2{font-size:16px;padding-left:40px;margin-top:0}
.support ul{margin-left:20px}
.support ul li{margin-top:4px}
.support ul li span{color:#000}
.support ul li span.red{color:red}
.support .badge{background:#5bc0de;display:inline;padding:2px 5px;font-size:80%;color:#fff;text-align:center;vertical-align:baseline;border-radius:2px}
.expand-all{margin-right:5px}
.collapse-all{margin-left:5px}
.expand-all,.collapse-all{font-size:11px;cursor:pointer}
.expand-all:hover,.collapse-all:hover{text-decoration:underline}
.separator{font-size:12px}
.toggle-tree-menu span{display:inline-block}
ul.tree-menu li{cursor:pointer;float:left;clear:both}
ul.tree-menu li.tree{margin-left:-12px}
ul.tree-menu li .shorthand{width:100%;float:left;clear:both;padding-left:12px;background:url(/lib/images/arrow-right.png) no-repeat left center transparent}
ul.tree-menu li.expand .shorthand{background:url(/lib/images/arrow-down.png) no-repeat left center transparent}
ul.tree-menu li ul{display:none;float:left;margin-left:12px;padding:0;background:url(/lib/images/tree-vr.gif) repeat-y scroll left top transparent}
ul.tree-menu li ul li{background:url(/lib/images/tree-hr.gif) no-repeat scroll 0 14px transparent;float:left;padding-left:17px;float:left;clear:both}
h2.order-info{overflow:hidden}
h2.order-info strong{float:left}
h2.order-info span{float:right}
.content dl dt{font-weight:700;padding-top:20px}
.content dl dd{padding-top:10px}
a.obsolete-tag{opacity:.3}
.html5-badge,.css3-badge{width:16px;height:16px;display:inline-block;margin-left:-2px;position:relative;top:3px}
.html5-badge{background:url(/lib/images/html5-icon.png) no-repeat}
.css3-badge{background:url(/lib/images/css3-icon.png) no-repeat}
.box-model{padding:30px 10px}
.syntax table td{vertical-align:text-top}
.syntax table .keyword{white-space:nowrap}
.syntax .tag{color:#069}
.syntax .attribute{color:#6f808c}
.syntax .attribute-value{color:#881280}
.action-btn{color:#fff;background:#1ebba3;border:none;border-radius:1px;cursor:pointer;outline:none;transition:all .5s;font-size:14px;line-height:normal;padding:6px 15px;font-weight:700;letter-spacing:.5px}
.action-btn:hover{background:#24a28e}
.calculate-button .action-btn{float:left;margin:0 10px 10px 0}
.content table.data ul li{padding-top:3px;background-position:left 10px}
.hint{margin-bottom:-6px}
.snippets{display:block}
.snippets img{display:block;width:100%;margin-top:30px;border-radius:1px}
.footer{display:block;font-size:14px;margin-top:30px;color:rgba(255,255,255,0.7)}
.footer a{color:rgba(255,255,255,0.7);text-decoration:none}
.footer a:hover{color:#fff}
.bottom-strip{font-size:13px;background:#0b1d2d;padding:15px 0;float:left;width:100%}
.notice{float:left;margin-top:6px}
.footer-inner{background:#0d2235;padding-top:30px}
.footer h4{color:#fff;margin-top:5px;display:inline-block;position:relative;text-transform:uppercase;font-style:italic;margin-bottom:15px;font-size:16px;font-weight:700;font-family:Roboto,"Segoe UI","Helvetica Neue",Arial,sans-serif}
.footer-logo{float:right;text-align:right;margin-top:46px}
.footer-logo img{height:46px;opacity:.3}
.tool-box,.link-box{float:left}
.tool-box a,.link-box a{float:left;display:block;line-height:1.8;margin:4px 0}
.tool-box{width:32%}
.tool-box a{width:60%}
.tool-box a:nth-child(2n){width:35%;margin-left:5%;}
.tool-box span{font-size:18px;line-height:normal;position:relative;top:3px}
.link-box{width:16%;padding-right:30px;border-right:1px solid rgba(0,0,0,0.2)}
.link-box a{margin:3px 0;clear:both}
.footer h4::after{content:"";height:2px;background:#1ebba3;position:absolute;left:0;width:82%;bottom:-5px}
.footer a:last-child i{font-weight:700;top:2px;left:-5px}
.footer a:first-child i{left:-5px}
.appeal{font-size:16px;background:#1ebba3;color:#fff;padding:16px 0;text-align:left}
.appeal p{margin:0}
.appeal em{font-style:normal}
.social-media{float:right;text-align:center}
.social-media a{width:34px;height:34px;line-height:32px;color:#FFF;opacity:.4;font-size:14px;display:inline-block;margin-left:15px;border-radius:40px;text-align:center;border:2px solid}
.social-media a:hover{opacity:1;color:#1ebba3}
.social-media .icon-mail:before{font-size:16px}
.social-media em{font-style:normal}
a.previous-page,a.next-page{background:#ededed;color:#616161;text-align:center;margin-top:50px;position:relative;font-size:22px;font-family:'icomoon'!important}
a.previous-page:hover,a.next-page:hover{text-decoration:none;background:#1ebba3;color:#fff}
a.previous-page{margin-right:38px;z-index:9}
a.next-page{margin-right:-70px;z-index:8}
a.previous-page:before{content:"\e913"}
a.next-page:before{content:"\e910";margin-right:-3px}
.bottom-link{display:block;padding:12px 0;margin-top:40px;text-transform:uppercase;border:1px solid #e2e2e2;border-width:1px 0}
.bottom-link a{display:inline-block;color:#34495e;opacity:.7;text-decoration:none;font-weight:500;padding:5px 0;position:relative}
.bottom-link a:hover{opacity:.9}
a.previous-page-bottom{float:left;padding-left:20px}
a.previous-page-bottom::after,a.next-page-bottom::after{position:absolute;font-size:26px;font-family:Arial,sans-serif;font-weight:400;line-height:1}
a.previous-page-bottom::after{content:'\00AB';left:0}
a.next-page-bottom{float:right;padding-right:20px}
a.next-page-bottom:after{content:'\00BB';right:0}
a.disabled,a.disabled:hover{cursor:default;background:#ededed;color:#747474;opacity:.6}
.bottom-link a.disabled,.bottom-link a.disabled:hover{opacity:.5;background:none}
.info-tab{width:40px;height:40px;display:inline-block;position:absolute;top:16px;left:0}
.info-tab::before,.info-tab::after{display:inline-block;color:#fff;line-height:normal;font-family:"icomoon";position:absolute}
.info-tab i::before,.info-tab i::after{content:"";display:inline-block;position:absolute;left:0;bottom:-15px;transform:rotateX(60deg)}
.info-tab i::before{width:20px;height:20px;box-shadow:inset 12px 0 13px rgba(0,0,0,0.5)}
.info-tab i::after{width:0;height:0;border:12px solid transparent;border-bottom-color:#fff;border-left-color:#fff;bottom:-18px}
.note-icon{background:#47ADE0}
.tip-icon{background:#92CD59}
.warning-icon{background:#AD3C3C}
.note-icon::before{font-size:23px;content:"\e911";top:8px;left:8px}
.note-icon::after{font-size:17px;content:"\e912";top:9px;left:19px}
.tip-icon::before{font-size:24px;content:"\e901";top:7px;left:9px}
.warning-icon::before{font-size:22px;content:"\e91f";top:6px;left:10px;transform:scaleY(0.98)}
.tip-icon i::before{background:#75b436}
.warning-icon i::before{background:#9c3636}
.note-icon i::before{background:#1d7ead}
.icon-mail:before{font-weight:700;font-size:19px}
.search-btn:hover{background:#e4e4e4;color:rgba(0,0,0,.8)}
.search-btn span::before{font-size:25px;display:block}
.leftcolumn .segment::after{content:"";height:3px;background:#1ebba3;position:absolute;left:0;width:82%;bottom:-5px}
.leftcolumn .affiliate::after{background:#efb351}
h2 .badge{display:inline-block;background:#8892BF;padding:3px 10px;color:#fff;border-radius:.25em;font-size:86%;cursor:default;margin:-2px 0}
h2 .badge.js{background:#ffc107}
a.try-btn:hover,a.download-btn:hover{background:#1ebba3;color:#fff;outline:1px solid #16af91;border-left:none;text-decoration:none}
.download-btn::before{font-size:12px;line-height:normal;font-family:"icomoon";content:"\e906";position:relative;top:-1px;padding-right:5px;font-weight:400}
.code-style{display:block;float:left;margin:6px 0 0 40px;line-height:normal}
.code-style span{color:#868686;font-size:11px;font-weight:600;font-family:Arial;border:1px solid #ccc;border-radius:30px;display:inline-block;padding:6px 10px;margin-left:5px;cursor:pointer}
.code-style span:hover{color:#333}
.code-style span.active{color:#333;background:#fdfdfd;cursor:default;border-color:#c4c4c4}
.box-size{height:100%;padding:0 10px;line-height:40px;display:block;float:right;border-left:1px solid #ddd}
.box-size i{width:26px;height:26px;text-align:center;margin-top:7px;cursor:pointer;display:inline-block;background:#d3d3d3;border-radius:40px;position:relative;opacity:.7}
.box-size i:hover{opacity:1}
.box-size i::after,.box-size i::before{content:"";position:absolute;width:11px;height:8px;border:1px solid #585858;left:7px;top:10px;background:#fff;box-sizing:border-box}
.box-size i::before{height:3px;top:8px}
.box-size.maximized i::before{height:4px;top:11px}
.box-size.maximized i::after{display:none}
.social{float:right;margin-top:4px;display:block}
.social a{color:#fff;font-size:18px;line-height:normal;margin-left:15px;text-decoration:none}
.social a:hover{color:#1ebba3}
.ad-label{color:#a0a0a0;letter-spacing:.5px;font-size:10.4px;text-transform:uppercase;text-align:center;position:absolute;z-index:9;left:0;right:0;max-width:728px;display:block}
.leaderboard .ad-label,.sidebar .ad-label{top:0}
.bottom-ad .ad-label{top:-20px;margin: 0 auto}
a.bmc-btn img{height:33px;margin-top:10px;opacity:.7}
a.bmc-btn img:hover{opacity:1}
ul.faq-list li a{color:#4f4f4f}
ul.faq-list li a:hover{color:#222}
@media screen and (max-width: 992px) {
.site-search,.social{display:none;width:100%;float:none;position:absolute;top:45px;margin:0;padding:20px 12px;left:0;right:0;box-sizing:border-box;z-index:999;background:#fff}
.site-search{padding-right:65px}
.site-search .search{margin-left:0;box-sizing:border-box;float:left;height:32px;line-height:32px;width:97%}
.site-search .search-btn{width:55px;float:right;height:32px;margin-right:-55px;box-shadow:none;background:#1ebba3;border-radius:2px}
.site-search .search-btn i{font-size:24px;line-height:normal}
.social{text-align:center}
.social a{color:#414141;margin:0 5%}
.header button{height:36px;color:#fff;border:none;display:inline-block;background:transparent;padding:0 15px;outline:none;cursor:pointer}
.header button i{font-size:29px;line-height:36px}
.open-menu{float:left}
.open-search{float:right}
.open-share{float:right}
.icon-bar{background:#fff;display:block;height:2px;width:18px;margin:4px 0}
.leftcolumn{position:fixed;left:0;top:46px;bottom:0;width:280px;padding:0 5px 0 15px;overflow-y:auto;z-index:9999;background:#fff}
.tool-box,.link-box,.footer-logo{width:100%;float:none;text-align:center;padding:0}
.tool-box a,.link-box a{float:none;display:block;margin-left:0!important;width:100%!important}
.footer h4{margin-top:20px}
.footer h4::after{right:0;margin:0 auto}
.bottom-strip{height:auto}
.notice,.social-media{float:none;text-align:center}
.social-media{margin:20px 0}
.appeal{padding:15px;text-align:center}
.header .site-search{width:100%;float:none;position:absolute;top:45px;padding:20px 10px 50px;left:0;right:0;padding-right:65px;box-sizing:border-box;z-index:999;background:#2d4a5b;border-top:1px solid #a2c1d2}
.header .site-search label.mobile-only{display:block;text-align:center;color:#fff;font-size:14px;font-weight:700;padding-bottom:10px}
.codebox-title{position:relative}
.social-media-link{margin-top:0;line-height:26px}
.social-media-link .appeal-text{text-align:center}
.report-error{box-sizing:border-box;width:100%;border:none}
.contact-form p{float:none}
.report-error .contact-form p.name,.report-error .contact-form p.email{width:100%}
.contact-form input[type="text"],.contact-form textarea{width:100%!important;box-sizing:border-box}
ul.tree-menu li .shorthand{display:none}
ul.tree-menu li ul{margin:0 0 0 12px;background:none;display:block!important}
ul.tree-menu li ul li{padding:0;background:none}
.open-menu.mobile-only:hover,.open-nav.mobile-only:hover,.open-search-box:hover{background:#2d4a5b}
.code-style{float:none;position:absolute;top:42px;left:0;margin:5px 0 0 8px}
.code-style span{background:#ececec}
.color-box .shadow{overflow:visible}
.backdrop{background:rgba(0,0,0,.5);height:100%;width:100%;position:fixed;z-index:88;top:0;bottom:0;left:0;right:0}
a.previous-page,a.next-page{display:none}
.bottom-ad .ad-label{top:0}
.snippets{display:block;padding:0 30px}
.color-box{padding-left:0}
.note-box,.warning-box,.tip-box{padding:15px 18px 2px}
.color-box strong{margin-left:33px}
.info-tab{width:30px;height:30px;top:15px;left:18px;background:none}
.info-tab i{display:none}
.note-icon::before{top:5px;left:0;color:#144261}
.note-icon::after{top:5px;left:11px;color:#144261}
.tip-icon::before{top:3px;left:4px;color:#2e5014}
.warning-icon::before{top:4px;left:4px;color:#913944}
a.previous-page-bottom::after, a.next-page-bottom::after{margin-top:-1px}
}
@media screen and (max-width: 830px) {
.snippets{padding: 0 15px}
}
@font-face {
  font-family: 'icomoon';
  src:  url('https://resterconnecte.com/lib/icomoon/fonts/icomoon.eot?wamggw');
  src:  url('https://resterconnecte.com/lib/icomoon/fonts/icomoon.eot?wamggw#iefix') format('embedded-opentype'),
    url('https://resterconnecte.com/lib/icomoon/fonts/icomoon.ttf?wamggw') format('truetype'),
    url('https://resterconnecte.com/lib/icomoon/fonts/icomoon.woff?wamggw') format('woff'),
    url('https://resterconnecte.com/lib/icomoon/fonts/icomoon.svg?wamggw#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-file-download:before {
  content: "\e906";
}
.icon-bookmark:before {
  content: "\e900";
}
.icon-bulb:before {
  content: "\e901";
}
.icon-close:before {
  content: "\e902";
}
.icon-download:before {
  content: "\e903";
}
.icon-eye:before {
  content: "\e904";
}
.icon-facebook:before {
  content: "\e905";
}
.icon-google-drive:before {
  content: "\e907";
}
.icon-google-plus:before {
  content: "\e908";
}
.icon-home:before {
  content: "\e909";
}
.icon-like:before {
  content: "\e90b";
}
.icon-mail:before {
  content: "\e90c";
}
.icon-menu:before {
  content: "\e90d";
}
.icon-more:before {
  content: "\e90e";
}
.icon-new-window:before {
  content: "\e90f";
}
.icon-next:before {
  content: "\e910";
}
.icon-notepad:before {
  content: "\e911";
}
.icon-pencil:before {
  content: "\e912";
}
.icon-previous:before {
  content: "\e913";
}
.icon-refresh:before {
  content: "\e914";
}
.icon-reply:before {
  content: "\e915";
}
.icon-reply-all:before {
  content: "\e916";
}
.icon-save:before {
  content: "\e917";
}
.icon-screen-rotation:before {
  content: "\e918";
}
.icon-search:before {
  content: "\e919";
}
.icon-send:before {
  content: "\e91a";
}
.icon-settings:before {
  content: "\e91b";
}
.icon-share:before {
  content: "\e91c";
}
.icon-tag:before {
  content: "\e91d";
}
.icon-twitter:before {
  content: "\e91e";
}
.icon-warning:before {
  content: "\e91f";
}
.icon-zoom-out:before {
  content: "\e920";
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
    body {
        background: #1a1a1a;
        color: #e0e0e0;
    }
    
    .content {
        background: #2d2d2d;
    }
    
    .menu {
        background: #333;
    }
}

/* Styles pour la page de recherche */
.search-result {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

.search-result:last-child {
    border-bottom: none;
}

.search-result h2 {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
}

.search-result .meta {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.search-result .excerpt {
    color: #333;
    margin: 0;
}

.search-result mark {
    background: #fff3cd;
    padding: 0 2px;
}

.results-count {
    color: #666;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

.pagination {
    margin: 2rem 0;
    text-align: center;
}

.pagination a, 
.pagination span {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.pagination span.current {
    background: #1ebba3;
    color: white;
    border-color: #1ebba3;
}

.pagination a:hover {
    background: #f5f5f5;
    text-decoration: none;
}

.notice-box {
    padding: 1rem;
    margin: 1rem 0;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 3px;
}

/* Styles pour le formulaire de contact */
.contact-form {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.contact-form h2 {
    text-align: center;
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.contact-form button[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.contact-form button[type="submit"]:hover {
    background-color: #45a049;
}

.success-message {
    text-align: center;
    color: green;
    font-weight: bold;
}

/* Amélioration de la base */
.content {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 3rem;
    line-height: 1.7;
    font-size: 18px;
    color: #2d3748;
    background: #fff;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
    border-radius: 8px;
}

/* Titres plus attrayants */
.content h1 {
    font-size: 2.5rem;
    line-height: 1.3;
    color: #1a202c;
    margin-bottom: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.content h3 {
    font-size: 1.75rem;
    color: #2d3748;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.content h4 {
    font-size: 1.4rem;
    color: #4a5568;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

/* Amélioration des paragraphes */
.content p {
    margin-bottom: 1.5rem;
    color: #4a5568;
    font-family: system-ui, -apple-system, sans-serif;
}

/* Listes plus lisibles */
.content ul {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.content ul li {
    margin-bottom: 0.75rem;
    line-height: 1.6;
    position: relative;
}

/* Style des Strong plus visible */
.content strong {
    color: #2d3748;
    font-weight: 600;
}

/* Amélioration de la lisibilité sur mobile */
@media (max-width: 768px) {
    .content {
        padding: 1.5rem;
        font-size: 16px;
    }
    
    .content h1 {
        font-size: 2rem;
    }
    
    .content h3 {
        font-size: 1.5rem;
    }
}

/* Ajout d'un effet de transition sur les liens */
.content a {
    color: #1ebba3;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.content a:hover {
    border-bottom-color: #1ebba3;
    color: #18a090;
}

/* Style spécial pour les citations et points importants */
blockquote {
    background: #f8fafc;
    border-left: 4px solid #1ebba3;
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    font-style: italic;
    color: #4a5568;
    border-radius: 0 8px 8px 0;
}

/* Meilleur espacement des sections */
.section-left, .section-right {
    margin: 3rem 0;
    padding: 2rem;
    background: #f8fafc;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

/* Style du breadcrumb plus moderne */
.breadcrumb {
    background: transparent;
    padding: 0.5rem 0;
    margin-bottom: 2rem;
    font-size: 0.9rem;
    color: #718096;
}

/* Style de base pour la colonne de gauche */
.leftcolumn {
    width: 350px;
    margin-right: 20px;
    padding: 1rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

/* Style des segments (titres de sections) */
.leftcolumn .segment {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    margin: 1.5rem 0 1rem;
    padding-bottom: 0.5rem;
    position: relative;
}

/* Amélioration de la ligne sous les segments */
.leftcolumn .segment::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: #1ebba3;
}

.leftcolumn .segment:hover::after {
    width: 100px;
}

.leftcolumn ul{list-style:none;padding:0;margin:0;}
.leftcolumn ul li {
    display: flex;
    align-items: center; /* Centre verticalement les éléments */
    line-height: normal;
    font-size: 0.9rem;
    position: relative;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
}
.leftcolumn ul li a {
    display: flex;
    align-items: center;
    padding: 0.8rem 1rem;
    color: #4a5568;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    font-size: 0.9rem;
    line-height: 1.4;
}
.leftcolumn ul li a:hover {
    background: #f8fafb;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    border-color: #e2e8f0;
    color: #1ebba3;
}
.leftcolumn ul li span {
    padding: 0 3px;
    margin: 0 3px 0 0;
    border-radius: 3px;
    font-size: 10px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    border: 1px double #1ebba3;
    background: #f8fafb;
    color: #1ebba3;
    min-width: 24px;
    height: 24px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    margin-right: 12px;
    border: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
}
.leftcolumn ul li:hover span {
    background: #1ebba3;
    color: #fff;
   
}
.leftcolumn .affiliate:hover span {
    background: #efb351;
    color: #fff;
}

/* Responsive design */
@media (max-width: 768px) {
    .leftcolumn {
        width: 100%;
        margin-bottom: 1rem;
        padding: 1rem;
    }
    
    .leftcolumn ul li {
        margin-bottom: 0.25rem;
    }
    
    .leftcolumn a {
        padding: 0.75rem;
    }
}

/* Styles spécifiques pour iPad et tablettes */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* Layout */
    .wrapper {
        width: 100%;
        padding: 0 20px;
    }

    .content {
        padding: 20px;
    }

    /* Navigation */
    .menu {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding: 0 10px;
    }

    .menu a {
        padding: 12px 10px;
        font-size: 15px;
    }

    /* Colonnes */
    .leftcolumn {
        width: 280px;
    }

    .centercolumn {
        width: calc(100% - 300px);
        margin-left: 20px;
    }

    /* Recherche */
    .site-search {
        margin-left: 30px;
    }

    input.search {
        width: 300px;
    }

    /* Footer */
    .tool-box, .link-box {
        width: 50%;
    }

    /* Images et médias */
    img, video, iframe {
        max-width: 100%;
        height: auto;
    }

    /* Tableaux */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Fix pour le double tap sur iOS */
    .menu a, .leftcolumn a {
        touch-action: manipulation;
    }

    /* Améliorations ergonomiques */
    .leftcolumn ul li a {
        padding: 12px 15px;
        font-size: 15px;
    }

    .content h1 {
        font-size: 2.2rem;
    }

    .content h2 {
        font-size: 1.8rem;
    }

    /* Orientation paysage spécifique */
    @media (orientation: landscape) {
        .wrapper {
            max-width: 1000px;
            margin: 0 auto;
        }

        .content {
            margin: 0 auto;
        }
    }
}

/* Ajustements spécifiques pour iPad Pro */
@media only screen and (min-width: 1024px) and (max-width: 1366px) {
    .wrapper {
        max-width: 1200px;
    }

    .leftcolumn {
        width: 300px;
    }

    .centercolumn {
        width: calc(100% - 320px);
    }

    input.search {
        width: 400px;
    }
}

/* Fix pour le zoom involontaire sur les inputs iOS */
@supports (-webkit-touch-callout: none) {
    input,
    select,
    textarea {
        font-size: 16px;
    }
}

   .adsense-auto-ads-ignore {
       google-auto-ads: ignore;
   }
   
/* Optimisation pour tablettes en mode portrait */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    /* Layout principal */
    .wrapper {
        width: 100%;
        max-width: 768px;
        padding: 0 15px;
        margin: 0 auto;
    }

    /* Ajustement des colonnes */
    .leftcolumn {
        width: 220px;
    }

    .centercolumn {
        width: calc(100% - 235px);
        margin-left: 15px;
    }

    /* Barre de recherche */
    .site-search {
        margin-left: 20px;
    }

    input.search {
        width: 200px;
    }

    /* Menu principal */
    .menu {
        padding: 0 5px;
    }

    .menu a {
        padding: 10px 8px;
        font-size: 14px;
    }

    /* Contenu */
    .content {
        padding: 15px;
    }

    /* Tables */
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Empêcher le débordement horizontal */
    body {
        overflow-x: hidden;
        width: 100%;
    }

    /* Ajuster les boîtes de contenu */
    .section-left, 
    .section-right {
        padding: 1rem;
    }

    .section-left {
        padding-right: 1rem;
    }

    .section-right {
        padding-left: 1rem;
    }

    /* Ajuster les images */
    .section-left img,
    .section-right img {
        max-width: 100%;
        height: auto;
    }

    /* Ajuster le footer */
    .tool-box, 
    .link-box {
        width: 33.33%;
        padding: 0 10px;
    }
}

/* Ajustement de la classe summary topic pour tous les appareils */
.summary.topic {
    border: 1px solid #eaeaea;
    border-width: 1px 0;
    margin: 15px 0;
    padding: 10px 0;
    line-height: 1.5;
    font-size: 0.9rem;
    color: #666;
}

.summary.topic time {
    display: block;
    color: #939b9a;
    font-size: 13px;
}

/* Modification des styles pour mobile et tablette */
@media screen and (max-width: 992px) {
    .summary.topic {
        display: block !important; /* Force l'affichage */
        margin: 10px 0;
        padding: 8px 0;
        font-size: 0.85rem;
    }

    .summary.topic time {
        display: block;
        margin-bottom: 5px;
    }
}

.last_updated {
    margin: 15px 0, 20, 0;
    padding: 10px 0;
    line-height: 1.5;
    font-size: 0.9rem;    
    color: #666;
}

.last_updated time {
    display: block;
    color: #939b9a;
    font-size: 13px;
    float:right;
}



/* Modification des styles pour mobile et tablette */
@media screen and (max-width: 992px) {
    .last_updated.topic {
        display: block !important; /* Force l'affichage */
        margin: 10px 0;
        padding: 8px 0;
        font-size: 0.85rem;
    }

    .last_updated.topic time {
        display: block;
        margin-bottom: 5px;
    }
}

/* Ajustement spécifique pour les tablettes en mode portrait */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .summary.topic {
        font-size: 0.9rem;
        padding: 10px 0;
    }
}

/* Styles pour la page des conditions générales */
.terms-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

.terms-page .legal-content {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 3rem;
}

.terms-page h1 {
    font-size: 2.5rem;
    color: #1a202c;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.terms-page .last-update {
    color: #718096;
    font-size: 0.9rem;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e2e8f0;
}

.terms-page .legal-section {
    margin-bottom: 3rem;
}

.terms-page .legal-section h2 {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    color: #2d3748;
    margin-bottom: 1.5rem;
}

.terms-page .section-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #1ebba3;
    color: white;
    border-radius: 50%;
    margin-right: 1rem;
    font-weight: 600;
}

.terms-page .section-content {
    color: #4a5568;
    line-height: 1.8;
    font-size: 1.1rem;
    padding-left: calc(40px + 1rem);
}

.terms-page .breadcrumb {
    margin-bottom: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .terms-page .legal-content {
        padding: 1.5rem;
        border-radius: 0;
    }

    .terms-page h1 {
        font-size: 2rem;
    }

    .terms-page .section-content {
        padding-left: 0;
        font-size: 1rem;
    }
}

/* Styles pour la page Contact */
.contact-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem 0;
}

.contact-form {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.contact-form .form-group {
    margin-bottom: 1.5rem;
}

.contact-form label {
    display: block;
    margin-bottom: 0.5rem;
    color: #4a5568;
    font-weight: 500;
}

.contact-form .form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.contact-form .form-control:focus {
    border-color: #1ebba3;
    box-shadow: 0 0 0 3px rgba(30, 187, 163, 0.1);
    outline: none;
}

.contact-form select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234a5568'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.5em;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.contact-form textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

.contact-form .btn-primary {
    display: block;
    width: 100%;
    padding: 1rem;
    background: #1ebba3;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.contact-form .btn-primary:hover {
    background: #18a090;
    transform: translateY(-1px);
}

.contact-form .btn-primary:active {
    transform: translateY(0);
}

/* Media Queries pour la page Contact */
@media (max-width: 768px) {
    .contact-container {
        padding: 1rem;
    }

    .contact-form {
        padding: 1.5rem;
    }

    .contact-form .form-control {
        font-size: 16px; /* Évite le zoom sur iOS */
    }
}

/* Styles RTL pour l'arabe et autres langues RTL */
.rtl {
    direction: rtl;
    text-align: right;
}

/* Navigation et Header RTL */
.rtl .menu a:first-child {
    margin-right: -10px;
    margin-left: 0;
}

.rtl .leftcolumn {
    float: right;
    margin-left: 20px;
    margin-right: 0;
}

.rtl .tool-box,
.rtl .link-box {
    float: right;
}

.rtl .tools-list a {
    float: right;
    margin-left: 15px;
    margin-right: 0;
}

/* Breadcrumbs RTL */
.rtl .breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-right: 0;
    padding-left: 0.5rem;
}

/* Footer RTL */
.rtl .footer .notice {
    float: right;
}

.rtl .footer h4::after {
    right: 0;
    left: auto;
}

/* Navigation mobile RTL */
@media screen and (max-width: 992px) {
    .rtl .mobile-nav {
        right: -280px;
        left: auto;
    }
    
    .rtl .mobile-nav.active {
        transform: translateX(-280px);
    }
    
    .rtl .menu-btn {
        float: right;
    }
    
    .rtl .logo {
        padding: 6px 60px 0 0;
        right: 0;
        left: auto;
    }
}

/* Style des formulaires RTL */
.rtl .contact-form label {
    text-align: right;
}

.rtl .contact-form .form-control {
    text-align: right;
}

/* Direction des icônes RTL */
.rtl .icon-arrow-right:before {
    content: "\e900";
    transform: scaleX(-1);
}

.rtl .icon-arrow-left:before {
    content: "\e901";
    transform: scaleX(-1);
}

/* Styles RTL pour l'arabe */
[dir="rtl"] .menu a:first-child {
    margin-right: -10px;
    margin-left: 0;
}

[dir="rtl"] .leftcolumn {
    margin-left: 20px;
    margin-right: 0;
}

[dir="rtl"] .icon-menu {
    transform: scaleX(-1);
}

[dir="rtl"] .breadcrumb-item+.breadcrumb-item {
    padding-right: 0.5rem;
    padding-left: 0;
}

[dir="rtl"] .previous-page-bottom {
    float: right;
    padding-right: 20px;
    padding-left: 0;
}

[dir="rtl"] .next-page-bottom {
    float: left;
    padding-left: 20px;
    padding-right: 0;
}

[dir="rtl"] .previous-page-bottom::after {
    right: 0;
    left: auto;
    content: '\00BB';
}

[dir="rtl"] .next-page-bottom::after {
    left: 0;
    right: auto;
    content: '\00AB';
}

/* Ajustements pour les éléments de navigation mobile en RTL */
@media screen and (max-width: 992px) {
    [dir="rtl"] .open-menu {
        float: right;
    }
    
    [dir="rtl"] .open-search {
        float: left;
    }
    
    [dir="rtl"] .logo {
        padding: 6px 60px 0 0;
        right: 0;
        left: auto;
    }
    
    [dir="rtl"] .mobile-nav {
        left: auto;
        right: -280px;
    }
    
    [dir="rtl"] .mobile-nav.active {
        transform: translateX(-280px);
    }
}

/* Séparateur pour les liens partenaires en arabe */
.rtl .tools-list a:not(:last-child) {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    margin-left: 10px;
    padding-left: 10px;
}

/* Styles du footer */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.footer-column {
    padding: 0 1rem;
}

.partners-column {
    grid-column: 3;
}

.footer-column a {
    display: block;
    margin: 0.5rem 0;
}

/* Style RTL pour le message de feedback */
.rtl.appeal {
    text-align: right;
}

/* Style RTL spécifique pour le footer */
.rtl .bottom-strip .notice {
    text-align: center; /* ou right pour aligner à droite */
    width: 100%;
    float: none;
}

.rtl .footer-inner {
    direction: rtl;
}

.rtl .footer-column {
    text-align: right;
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    ..footer-column {
        padding: 1rem;
        text-align: center;
    }
}

/* ...existing code... */

.bottom-strip .notice {
    float: none;
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

/* ...existing code... */

/* Style commun des séparateurs pour les liens partenaires dans toutes les langues */
.tools-list a:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    margin-right: 10px;
    padding-right: 10px;
}

/* Override pour RTL */
.rtl .tools-list a:not(:last-child) {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    margin-left: 10px;
    padding-left: 10px;
}

/* Style des liens partenaires */
.footer-column.partners-column .tools-list a {
    display: inline-block;
}

/* Style moderne pour les images d'articles */
.article-featured-image {
    position: relative;
    margin: 2rem auto 2.5rem;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 450px;
    width: 92%;
    background-color: #f9f9f9;
}

.article-featured-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    transition: all 0.5s ease;
}

/* Effet hover élégant */
.article-featured-image:hover img {
    transform: scale(1.03);
}

/* Ajout d'un léger overlay au survol */
.article-featured-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 75%, rgba(0,0,0,0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.article-featured-image:hover::after {
    opacity: 1;
}

/* Animation de chargement */
.article-featured-image.placeholder {
    height: 300px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.article-featured-image.placeholder::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent,
        rgba(220, 220, 220, 0.3),
        transparent
    );
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { left: -100%; }
    100% { left: 100%; }
}

.loading-text {
    color: #777;
    font-weight: 500;
    font-style: italic;
    z-index: 1;
}

/* Adaptation responsive */
@media (max-width: 992px) {
    .article-featured-image {
        max-height: 380px;
        width: 96%;
        margin: 1.5rem auto 2rem;
    }
}

@media (max-width: 576px) {
    .article-featured-image {
        max-height: 280px;
        width: 100%;
        margin: 1rem auto 1.5rem;
        border-radius: 4px;
    }
}