*,*::before,*::after{ box-sizing:border-box } a{ color:#0d6efd; text-decoration:none } a:hover{ color:#0a58ca } html,body{ height:100% } body{ margin:0; background:linear-gradient(180deg,#f5f8fc 0%,#edf3f7 100%); color:#172033; font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif; padding:0 } body,p,li,label,input,button,textarea,select{ font-size:16px; line-height:1.6 } button,input,select,textarea{ margin:0; font-family:inherit } ul,ol,dl{ margin-top:0; margin-bottom:1rem } ul,ol{ padding-left:2rem } img{ max-width:100%; height:auto } main.layout-row{ gap:1.5rem; width:100%; margin:1.5rem 0 0 !important } #frm_achat{ display:flex; flex:1 1 100%; flex-wrap:wrap; gap:1.5rem; padding:0 } #frm_achat>.colonne-g,#frm_achat>.colonne-d{ flex:1 1 0; width:auto } .site-container{ width:100%; max-width:1200px; margin-right:auto; margin-left:auto; padding-right:.75rem; padding-left:.75rem } .layout-row{ --layout-gutter-x:1.5rem; --layout-gutter-y:0; display:flex; flex-wrap:wrap; margin-top:calc(-1 * var(--layout-gutter-y)); margin-right:calc(-.5 * var(--layout-gutter-x)); margin-left:calc(-.5 * var(--layout-gutter-x)) } .hero-panel{ flex:0 0 100%; width:100%; display:grid; grid-template-columns:1.6fr 0.9fr; gap:1.5rem; background:linear-gradient(135deg,#fff 0%,#f5f8fc 100%); border:1px solid #12345614; border-radius:12px; padding:2rem; box-shadow:0 16px 35px #0f233a0f; margin-top:1.25rem } .hero-copy{ display:flex; flex-direction:column; justify-content:center } .hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.5rem } .btn{ display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:.8rem 1.4rem; font-weight:700; text-decoration:none; transition:transform .2s ease,box-shadow .2s ease } .btn:hover{ transform:translateY(-1px); text-decoration:none } .btn-primary{ background:linear-gradient(135deg,#0f4c81 0%,#0b6ec7 100%); color:#fff; box-shadow:0 12px 22px #0b6ec73b } .btn-primary:hover{ color:#fff } .copy-action{ display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:.35rem .7rem; border:1px solid #0f4c8133; border-radius:6px; background:#fff; color:#123a62; font:inherit; font-size:.875rem; font-weight:600; line-height:1.2; cursor:pointer; transition:background-color .15s ease,border-color .15s ease,color .15s ease } .copy-action:hover{ border-color:#0f4c8166; background:#f3f7fb } .copy-action.is-copied{ border-color:#198754; background:#198754; color:#fff } .btn-secondary{ background:#fff; border:1px solid #0f4c812e; color:#123a62 } .btn-secondary:hover{ color:#123a62 } .hero-badges{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem } .hero-badges span{ border-radius:999px; background:#1234560a; color:#123a62; border:1px solid #12345614; padding:.45rem .8rem; font-size:.78rem; font-weight:700; letter-spacing:.03em } .hero-card{ background:linear-gradient(180deg,#f8fbff 0%,#edf5ff 100%); border:1px solid #12345614; border-radius:12px; color:#17314f; padding:1.35rem; display:flex; flex-direction:column; justify-content:center; box-shadow:inset 0 1px 0 #fffc } .hero-card ul{ margin:1rem 0 0; padding-left:1.2rem; list-style:disc; color:#17314fe6 } .hero-card li+li{ margin-top:.5rem } .mini-stat{ background:#ffffffe6; border:1px solid #12345614; border-radius:8px; padding:1rem 1rem .85rem; margin-bottom:.9rem } .mini-stat.accent{ background:#0b6ec70f } .mini-stat strong{ display:block; font-size:2rem; line-height:1; margin-bottom:.25rem; color:#0d3358 } .mini-stat span{ color:#17314fcc; font-weight:600 } @media (max-width:768px){ .hero-panel{ grid-template-columns:1fr; padding:1.25rem } .hero-actions{ flex-direction:column; align-items:stretch } .btn{ width:100% } } h1,h2,h3,h4{ color:#132a46; line-height:1.25; margin-top:0 } h1{ font-size:clamp(2rem,3vw,3rem); font-weight:800; letter-spacing:-.04em; margin-bottom:1rem } h2{ font-size:1.45rem; font-weight:700; margin:0 0 .75rem; color:#123a62 } h3{ font-weight:700; color:#0f4c81; font-size:1.12rem; padding-bottom:.4rem; border-bottom:2px solid #107cc52e; margin:1.2rem 0 .8rem } p{ margin-top:0; margin-bottom:1rem; color:#2a3b52 } pre{ margin-bottom:0 !important; background:#f4f7fb; border-radius:8px; border:1px solid #dfeaf5; padding:1rem; overflow-x:auto } #countryList li:hover{ text-decoration:none; color:#0b5ed7 } nav a,footer a{ color:#fff; padding:.5rem .85rem; font-weight:700; font-size:1rem; transition:opacity .2s ease } nav a:hover{ opacity:.9; text-decoration:none } nav ul{ list-style:none; display:inline-flex; flex-wrap:wrap; gap:.35rem; padding:.6rem 1.2rem; margin:0 } header{ min-height:154px; border-radius:12px 12px 0 0; box-shadow:0 14px 30px #12345629; border:1px solid #ffffff1f; border-bottom:0; background:linear-gradient(112deg,#173d66 0%,#0d2f4f 58%,#245782 100%); display:flex; align-items:center; justify-content:space-between; overflow:hidden; position:relative; padding:1.4rem clamp(1.5rem,5vw,4.5rem) } header.site-header{ width:calc(100% - 24px); margin:0 auto } .site-brand{ position:relative; z-index:1; display:inline-flex; flex-direction:column; align-items:flex-start; gap:.3rem } .site-brand-kicker{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#e6d879; font-weight:700 } .site-brand strong{ font-size:clamp(1.8rem,2.3vw,2.7rem); line-height:1.1; color:#fff; letter-spacing:0 } .site-brand-caption{ color:#ffffffbd; font-size:.92rem } .header-codes{ position:relative; z-index:1; width:360px; height:124px; flex:0 0 auto } .header-code-index{ position:absolute; right:0; top:26px; color:#ffffff2e; font-size:3.4rem; font-weight:800; line-height:1 } nav{ background:linear-gradient(135deg,#173d66 0%,#0d2f4f 100%); border-radius:0 0 12px 12px; box-shadow:0 14px 30px #1234561f; padding-top:.25rem; text-align:center } .colonne-g,.colonne-d{ flex:1 1 0; width:auto; max-width:none; min-width:0; margin:0; background:#ffffffe6; border:1px solid #12345614; border-radius:10px; box-shadow:0 12px 24px #0f1d2f0f; padding:1.5rem 1.5rem 1.2rem } .colonne-d{ padding-top:1.5rem } .eyebrow{ display:inline-flex; align-items:center; gap:.5rem; background:#117cc514; color:#0f4c81; border:1px solid #117cc524; padding:.45rem .75rem; border-radius:999px; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1rem } .lead{ font-size:1.06rem; color:#35506d; max-width:62ch } .feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1.4rem } .feature-item{ background:linear-gradient(180deg,#f8fbff 0%,#f1f7ff 100%); border:1px solid #0f4c8114; border-radius:8px; padding:1.1rem 1rem } .feature-item h2{ font-size:1.1rem; margin-bottom:.4rem } .feature-item p{ margin-bottom:0 } .overlay{ display:none; background-color:#0a111b8c; position:fixed; width:100%; height:100%; left:0; top:0 } footer{ background:linear-gradient(180deg,#0a2640 0%,#112d4a 100%); border-radius:0; padding:1rem 1rem .9rem; margin-top:1.5rem; box-shadow:0 8px 20px #11284114; text-align:center } footer a{ color:#e7f3ff; padding:0 1em; font-weight:600; text-decoration:none } #output_example{ height:300px; overflow:auto; white-space:pre-wrap; background-color:#f8fbff; border:1px solid #12345614; border-radius:8px; padding:.9rem } #countryList{ list-style-type:none; padding-left:0; margin:0 } #countryList li{ color:#0d6efd; cursor:pointer; padding:.3rem 0; border-bottom:1px solid #1234560f } #info{ position:sticky; top:1rem } #msg_bon,#msg_erreur{ line-height:1.4em; margin:0 auto 30px; padding:.8rem 1rem .8rem 2.8rem; width:90%; text-align:justify; border-radius:8px; border:1px solid #ef0e0e } #msg_erreur{ background:url(/images/no.gif) 10px 10px no-repeat #fff0f0; color:#b3261e } #msg_bon{ background:url(/images/ok.gif) 10px 10px no-repeat #eefaf0; border-color:#9cd580; color:#1f7a2d } #msg_bon li,#msg_erreur li{ margin-left:1.2rem } @media (max-width:575.98px){ nav ul{ float:left; display:none; height:auto; max-height:100vh; width:180px; background-color:#0d2f4ff5; position:fixed; z-index:100; margin:0; padding:1rem 0; left:0; top:0; bottom:0; opacity:1; border-right:solid 2px #ffffff14; border-radius:0 8px 8px 0; flex-direction:column } body.mobile-menu-open nav ul{ display:flex } #buttonMenuSmall{ display:inline-flex; align-items:center; justify-content:center; position:absolute; z-index:101; top:50%; right:1rem; width:42px; height:42px; padding:0; border:1px solid #ffffff59; border-radius:8px; background:#ffffff1a; transform:translateY(-50%) } .overlay{ opacity:.8; z-index:99 } body.mobile-menu-open .overlay{ display:block } } @media (min-width:576px){ #buttonMenuSmall{ display:none } } @media (max-width:768px){ .site-container{ max-width:100% !important; padding-left:.75rem; padding-right:.75rem } .site-header{ min-height:116px; padding:1rem 1.25rem } .colonne-d,.colonne-g{ flex:0 0 100%; width:100%; padding-top:1.2rem } #frm_achat>.colonne-g,#frm_achat>.colonne-d{ flex:0 0 100%; width:100% } header{ width:100%; max-width:none; min-height:116px; margin:0 auto } .site-brand strong{ font-size:1.65rem } .site-brand-caption{ font-size:.78rem } .header-codes{ display:none } body{ background-position-y:-452px } nav a{ font-size:.95rem } ul{ margin-top:4px } } @media (min-width:769px){ header{ width:699px; min-height:154px; margin:0 auto } } .center{ text-align:center } .ico{ background-image:url(/images/sprite.webp); width:32px; height:32px; display:inline-block; vertical-align:bottom } .doc{ background-position:0 -246px } .api{ background-position:0 -214px } .contact{ background-position:0 -278px } .liste{ background-position:-32px -214px } .exemple{ background-position:-32px -246px } .contenu{ background-position:0 -310px } .lang{ background-position:-32px -278px } .trad{ background-position:0 -150px } .produit{ background-position:0 -182px } .prix{ background-position:-32px -182px } .reception{ background-position:-32px -310px }