@font-face { font-family:'Nunito';src:url('../../assets/fonts/Nunito-Light.ttf');font-weight:300;font-display:swap; } @font-face { font-family:'Nunito';src:url('../../assets/fonts/Nunito-Regular.ttf');font-weight:400;font-display:swap; } @font-face { font-family:'Nunito';src:url('../../assets/fonts/Nunito-SemiBold.ttf');font-weight:600;font-display:swap; } @font-face { font-family:'Nunito';src:url('../../assets/fonts/Nunito-Bold.ttf');font-weight:700;font-display:swap; } @font-face { font-family:'Nunito';src:url('../../assets/fonts/Nunito-ExtraBold.ttf');font-weight:800;font-display:swap; } :root { --color-fb:#385899; --color-insta: #d6249f; --color-linkedin: #0a66c2; --color-snapchat: #f7f401; --color-x: black; --color-tiktok: #00e8e3; --color-tiktok-2 :#ed2f53; --color-whastapp: #4ac455; --main-green : #6fc56d;--main-yellow : #f7e8a7;--main-orange : #ed8858;--main-red : #ed5858;--main-blue : #63acbf;--background-color : #111111;--color-footer : #FFFFFF;--color-txt-footer : #444444;--color-primary : #E8634F;--color-secondary : #0699BE;--color-tertiary : #53B592;--color-4 : #c2efd2;--color-button : #E8634F;--color-button-txt : #FFFFFF;--color-button-before : #97b4ed;--color-txt : #FFFFFF;--color-txt-secondary : #C9C9C9;--background-color-zone : #262626;--color-fond-zone : #1A1A1A;--color-fond-card : #262626;--color-infobulle : #ffffff;--back-infobulle : #141414;--border-infobulle : var(--color-secondary);--fonth1 : 'Nunito',Arial,Helvetica,sans-serif;--fonth : 'Nunito',Arial,Helvetica,sans-serif;--font-title : 'Nunito',Arial,Helvetica,sans-serif;--font-subtitle : 'Nunito',Arial,Helvetica,sans-serif;--font-original : 'Nunito',Arial,Helvetica,sans-serif;--font-txt : 'Nunito',Arial,Helvetica,sans-serif;--padding-default : 20px;--padding-medium : 60px;--padding-large : 80px;--paddingzone-tb : 5vh;--paddingzone-lr : 2vw;--paddingbottomh : 2vh;--gap-default : 10px;--gap-medium : 30px;--gap-large : 60px;--sizetxt : 15px;--sizebtn : 15px;--sizea : 14px;--sizesmall : 13px;--sizeh1 : clamp(48px,6vw,80px);--sizeh2 : clamp(26px,3vw,36px);--sizeh3 : 20px;--sizeh4 : 16px;--sizeh5 : 100%;--sizeh6 : 100%;--color-a : #FFFFFF;--color-a-hover : #E8634F;--grad-brand : linear-gradient(90deg,#53B592 0%,#0699BE 35%,#E8634F 66%,#E73A62 100%);--grad-pill : linear-gradient(90deg,#27E0B3 0%,#E73A62 100%);--grad-migration : linear-gradient(90deg,#E8634F 0%,#E73A62 100%);--grad-green : linear-gradient(90deg,#0699BE 0%,#53B592 100%);--card-top-1 : linear-gradient(90deg,#53B592,#0699BE);--card-top-2 : linear-gradient(90deg,#0699BE,#E8634F);--card-top-3 : linear-gradient(90deg,#E8634F,#E73A62);--card-top-4 : linear-gradient(90deg,#E73A62,#53B592);--adv-top-1 : #53B592;--adv-top-2 : #0699BE;--adv-top-3 : #E8634F;--adv-top-4 : #E73A62;}
/*BASE */ 
#debug { z-index: 99999; border: solid 5px orange; background: white; color: black !important; }
html { height: 100%; font-size: 100%; background: var(--background-color); overflow-x: hidden; }
body, a, input, h3, h4, h5, h6 { font-family: var(--font-txt); color: var(--color-txt); }
.navtop { z-index: 9999; }
*:not(u):not(summary) {position: relative; list-style: none; }
a { text-decoration: none; color: var(--color-a); }
a:hover { color: var(--color-a-hover); }
.glide__arrows { position: unset; }
*, *::before, *::after { box-sizing: inherit; margin:0; padding:0; }
video { height: auto; max-width: 100%; }
.imgPlay { all: unset; cursor: pointer; margin: auto; margin-top: 16%; width: 175px;}
#page_PRIVATEACCESS  { min-height: 100vh; }
.has-text-danger { color: var(--main-red); }
.formMsgEnd { position: fixed; margin-top: -120px; text-align: center; top: 0; left: 0; width: 100%; padding: 10px; z-index: 99999; justify-content: center; animation: messageEphemere 5s linear 1; }
#mailOk, #msgOk{ background: var(--main-green);}#mailErreur, #msgErreur{ background: var(--main-red); }#mailNOk, #msgNOk{ background: var(--main-orange);} #msgInfo{ background: var(--main-blue);}
@keyframes messageEphemere { from { margin-top: -120px; } 10% { margin-top: 0; } 90% { margin-top: 0; } to { margin-top: -120px;  }}
@-webkit-keyframes messageEphemere {from { margin-top: -50px; } 10% { margin-top: 0; } 90% { margin-top: 0; } to { margin-top: -50px;  }}
input { color: var(--color-txt-secondary); min-height: 25px; line-height: 1.5; border-radius: 4px; } input, textarea { padding: 5px 7px; }
h1 { font-family: var(--font-title); font-size: var(--sizeh1); } h2 { font-family: var(--font-subtitle); font-size: var(--sizeh2); } h3 { font-family: var(--font-subtitle); font-size: var(--sizeh3); }
h4 { font-weight: bold; font-size: var(--sizeh4); } p, span { font-size: var(--sizetxt); } 
@media (max-width: 1400px){ h1, h2, h3 { text-align: center; padding-left: 2vw; padding-right: 2vw; } }
@media (max-width: 800px){ h1, h2 { font-size: 180%; } h3 { font-size: 140%; } }
@media (max-width: 570px){  h1, h2 { font-size: 150%; } h3 { font-size: 125%; } }
.inactive { display: none; } .zerodebordement { overflow: hidden; } .invisibleHr { border:none; padding: 15px 0; } br { width: 100%; } .inputImgDash2 { z-index:5; }
.button { min-width: 10px; font-size: var(--sizea); border:none; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; min-height: 2em; padding: 5px 10px; text-align: center; max-width: 80vw; gap:5px; }
.button.is-success { background: var(--main-green); }
.button.is-warning { background: var(--main-yellow); }
.button.is-danger { background: var(--main-red); }
.button.is-success.is-outlined { background: transparent; color:var(--main-green); border: solid 1px var(--main-green); }
.button.is-warning.is-outlined  { background: transparent; color: var(--main-yellow); border: solid 1px var(--main-yellow); }
.button.is-danger.is-outlined { background: transparent; color: var(--main-red); border: solid 1px var(--main-red); }
.etiquette { border: solid 1px white; padding: 2px 15px; margin: 0 5px; }
.etiquetteInfo { display: flex; flex-flow: row wrap; align-content: center; justify-content: center; align-items: center; background: #32a09b;  text-align: center;   font-size: 11px;  color: white;    border-radius: 15px;   padding: 3px 10px 1px 10px; margin-left: 5px; margin-bottom: 3px; min-height: 20px; max-height: 20px; }
.etiquetteInfo > .etiquetteInfo { min-height: 15px; max-height: 15px; padding-top: 2px;  }
.etiquettePrimary { background: var(--color-primary); } .etiquetteSecondary { background: var(--color-secondary); color: black; }
.etiquetteGreen{ background: #6fc56d; } .etiquetteBlue{ background: #05B2D2; } .etiquetteRed{ background: #F15642;  } .etiquetteYellow{ background: #ffd757; color: black;  }
.etiquetteBlack{ background: black; color: white;  } .etiquetteWhite{ background: white; color: black;  font-weight: bold; }
.fa-brands { font-size: 25px; }
.sizesmall { font-size: var(--sizesmall); } 
.h250px { height: 250px; } .h450px { height: 450px; } .h100vh { height: 100vh; }  .h90vh { height: 90vh; }.h60vh { height: 60vh; }.h55vh { height: 55vh; }.h50vh { height: 50vh; }
.w10, .w15, .w20, .w25, .w30, .w40, .w50, .w60, .w70 { min-width: 200px; }
.w10 { width: 10%; } .w15 { width: 15%; }.w20 { width: 20%; }.w25 { width: 25%; }.w30 { width: 30%; }.w40 { width: 40%; }.w50 { width: 46%; }.w60 { width: 60%; } .w65 { width: 65%; } .w70 { width: 70%; } .w75 { width: 75%; }.w80 { width: 80%; }.w90 { width: 90%; } .w100 { width: 100%; }
.w30px { width: 30px; } .w50px { width: 50px; } .w100px { width: 100px; } .w150px { width: 150px; } .w250px { width: 250px;} .w300px { width: 300px; } .w400px { width: 400px; } .w500px { width: 500px; }
.w700px { width: 700px; max-width: 92vw; } .w800px { width: 800px; max-width: 92vw; }
.minw400px { min-width: 400px; }
.minw90 { min-width: 90%; } .minw100 { min-width: 100%; }
.minw90vw { min-width: 90vw; } .minw100vw { min-width: 100vw; }
.maxw30px { max-width: 30px; } .maxw250px { max-width: 250px; } .maxw300px { max-width: 300px; }
.maxw400px { max-width: 400px; } @media (max-width: 450px){ .maxw400px { max-width: 90%; } }
.maxw550px { max-width: 550px; } @media (max-width: 575px){ .maxw550px { max-width: 90%; } }
.maxw900 { max-width: 900px; } @media (max-width: 1240px){ .maxw900 { width: 92vw; max-width: 92vw; } }
.maxw1200 { max-width: 1200px; } @media (max-width: 1240px){ .maxw1200 { width: 92vw; max-width: 92vw; } }
.height0 { height: 0; max-height: 0;}
.minh150px { min-height: 150px; } .minh250px { min-height: 250px; } .minh400px { min-height: 400px; }  .minh700px { min-height: 700px; } 
@media (max-width: 830px){    
    .w30, .w40, .w50, .w60 { width: 90%; }
    .w30:not(.button), .w40:not(.button), .w50:not(.button), .w60:not(.button) { margin-left: auto; margin-right: auto; justify-content: center; } h1, h2, h3 { text-align: center;}
}
@media (max-width: 550px){    
    .w30, .w40, .w50, .w60 { width: 94%; }
}
.hero-left, .hero-right { display: flex; align-items: center; flex: none; } .hero-right { margin-left: auto; }
.flexcolonne > .hero-left { align-self: flex-start; } .flexcolonne > .hero-right { align-self: flex-end; margin-left: 0; }
.margina {margin:auto;}
.txtright, .textalignr { text-align: right; } .txtleft, .textalignl { text-align: left; } .txt-center, .txtcenter{ text-align: center;}.justify { text-align: justify; text-justify: auto; }
.bold { font-weight: bold; } .italic { font-style: italic; }
.txtblack { color: black; } .txtwhite { color: white; }
.txtcolor-1 { color: var(--color-primary); } .txtcolor-2 { color: var(--color-secondary); } .txtcolor-3 { color: var(--color-tertiary); } .txtcolor-4  { color: var(--color-4); }
.autosautligne { white-space: pre-line; }
.overflowhidden { overflow: hidden; } .overflowyauto { overflow-y: auto; } .overflowxauto { overflow-x: auto; }
.infobulle { display: none; }
.avecInfoBulle:hover .infobulle { display: block; position: absolute; z-index: 5; min-width: 250px; max-width: 80vw; right: -50px; top: -20px; color: var(--color-infobulle); background: var(--back-infobulle); border: solid 1px var(--border-infobulle); border-radius: 15px; padding: 2px 15px; font-size: 90%; }
.sexyrow { border: none; box-shadow: 0 0 1px 1px #414141; }
.shadow { box-shadow: 0px 5px 15px black; }
.border-gradient { background: var(--color-fond-card); border-radius: 25px; padding: 5px; z-index: 99; }
.border-gradient::before {
    content: '';    position: absolute;    top: 0;    left: 0;    border-radius: 25px;
    background: linear-gradient(180deg, var(--color-txt-secondary) 0%, var(--color-fond-card) 85%, var(--color-fond-card) 100%);
    width: 100%;    height: 100%;    transform: scale(1.01);    z-index: -1;
}
.border-gradient::after {
    content: '';    position: absolute;    top: 0;    left: 0;    border-radius: 25px;
    background: linear-gradient(180deg, var(--color-txt-secondary) 0%, var(--color-fond-card) 85%, var(--color-fond-card) 100%);
    width: 100%;    height: 100%;    transform: scale(1.01);    z-index: -1;
}
.border-gradient > div { background: var(--color-fond-card); margin: 0; padding: 15px 0 15px 2vw; }
.border-gradient > div:first-child { border-top-left-radius: 25px; border-top-right-radius: 25px; }
.border-gradient { background: linear-gradient(var(--color-secondary), #141414); padding-bottom: 10vh; }
.faqDiv { width: 700px; max-width: 90vw; }
details.dtoggle { background: #fffce5; color: #000; margin-bottom: 5px; }
.dtoggle summary { background: var(--color-primary); padding: 5px 1vw; font-size:22px; font-weight: bold; }
details.dtoggle > p { padding: 15px 15px 25px 15px; }
details::marker { list-style: auto;  }
.footer { position:relative;text-align:center;margin:auto;background: var(--color-footer);padding: 10vh 0;color: var(--color-txt-footer);} .footer a { color: var(--color-txt-footer); font-weight:bold; }
.cartPreview { display: none;} .arrowReturn { position: fixed; bottom: 15px; right: 25px; padding-top: 4px; font-size: 90%; background: var(--color-txt-footer); z-index: 9999; width: 40px; height: 40px;}.arrowReturn a { margin: 0; padding: 0;} .iArrowReturn { font-size: 180%; color: var(--color-footer);  }
/* HELPERS UI GENERIQUES (cltToast / cltConfirm / clt-btn) - pendant CSS de library/js/common.js, chargé nativement partout. Ne PAS redéclarer par feature. */
.clt-modal-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; animation: clt-fade-in 0.2s ease; }
@keyframes clt-fade-in { from { opacity: 0; } to { opacity: 1; } }
.clt-modal { background: #1e1e1e; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; width: min(440px, 92vw); box-shadow: 0 24px 64px rgba(0,0,0,0.5); animation: clt-slide-up 0.25s ease; }
@keyframes clt-slide-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.clt-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 12px; }
.clt-modal__header h3 { margin: 0; font-size: 1.15em; color: #ffffff; font-weight: 700; }
.clt-modal__header h3 i { margin-right: 8px; color: var(--color-primary); }
.clt-modal__close { background: none; border: none; color: rgba(255,255,255,0.4); font-size: 1.6em; cursor: pointer; line-height: 1; padding: 0 4px; }
.clt-modal__close:hover { color: #ffffff; }
.clt-modal__body { padding: 8px 24px 16px; display: flex; flex-direction: column; gap: 14px; }
.clt-modal__footer { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 24px 20px; }
.clt-confirm__msg { color: rgba(255,255,255,0.75); line-height: 1.6; margin: 0; white-space: pre-line; }
.clt-modal .clt-select, .clt-modal .clt-input { width: 90%; padding: 10px 14px; background: #141414; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: #ffffff; font-size: 0.95em; }
.clt-modal .clt-select:focus, .clt-modal .clt-input:focus { border-color: var(--color-primary); outline: none; }
.clt-modal .clt-textarea { resize: vertical; min-height: 60px; }
.clt-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border: none; border-radius: 10px; font-size: 0.92em; font-weight: 600; cursor: pointer; transition: all 0.2s; text-decoration: none; white-space: nowrap; font-family: inherit; }
.clt-btn--sm { padding: 6px 12px; font-size: 0.82em; border-radius: 8px; }
.clt-btn-primary { background: var(--color-primary); color: #000000; }
.clt-btn-primary:hover { background: #e67e2e; }
.clt-btn-secondary { background: rgba(255,255,255,0.1); color: var(--color-primary); }
.clt-btn-secondary:hover { background: rgba(255,255,255,0.15); }
.clt-btn-ghost { background: transparent; color: rgba(255,255,255,0.85); }
.clt-btn-ghost:hover { background: rgba(255,255,255,0.06); color: #ffffff; }
.clt-btn-cdi { background: #000000; color: var(--color-primary); }
.clt-btn-cdi:hover { color: #ffffff; }
.clt-btn-danger { background: transparent; color: #e74c3c; }
.clt-btn-danger:hover { background: rgba(231,76,60,0.1); }
.clt-btn-danger-solid { background: #e74c3c; color: #ffffff; }
.clt-btn-danger-solid:hover { background: #c0392b; }
.clt-btn-outline { background: transparent; color: var(--color-secondary); border: 1.5px solid var(--color-secondary); }
.clt-btn-outline:hover { background: rgba(245,207,172,0.08); }
.clt-toast-container { position: fixed; top: 24px; right: 24px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: min(420px, calc(100vw - 32px)); }
.clt-toast { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; background: #1e1e2e; color: #ffffff; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 8px 32px rgba(0,0,0,0.35); font-size: 0.92em; line-height: 1.4; pointer-events: auto; opacity: 0; transform: translateX(40px); transition: opacity 0.3s ease, transform 0.3s ease; }
.clt-toast--visible { opacity: 1; transform: translateX(0); }
.clt-toast--out { opacity: 0; transform: translateX(40px); }
.clt-toast__ico { font-size: 1.25em; flex-shrink: 0; }
.clt-toast__msg { flex: 1; }
.clt-toast__close { background: none; border: none; color: rgba(255,255,255,0.35); font-size: 1.3em; cursor: pointer; padding: 0 0 0 8px; line-height: 1; transition: color 0.2s; }
.clt-toast__close:hover { color: #ffffff; }
.clt-toast--success { border-left: 4px solid #2ecc71; } .clt-toast--success .clt-toast__ico { color: #2ecc71; }
.clt-toast--error { border-left: 4px solid #e74c3c; } .clt-toast--error .clt-toast__ico { color: #e74c3c; }
.clt-toast--warning { border-left: 4px solid #f39c12; } .clt-toast--warning .clt-toast__ico { color: #f39c12; }
.clt-toast--info { border-left: 4px solid #3498db; } .clt-toast--info .clt-toast__ico { color: #3498db; }
@media (max-width: 768px) { .clt-toast-container { top: 12px; right: 12px; left: 12px; max-width: none; } .clt-toast { font-size: 0.85em; padding: 12px 14px; } .clt-modal { width: 96vw; } .clt-modal__header, .clt-modal__body, .clt-modal__footer { padding-left: 16px; padding-right: 16px; } }
/* FIN BASE *//* FLEX */ 
.flex{ display: flex; margin: auto;}
.flexnoauto, .flx { display: flex;}
.flexligne{flex-flow: row wrap;}.flexwrap{flex-wrap: wrap;}.flexlignenowrap{flex-direction: row;}
.flexcolonne{flex-flow: column wrap;}.flexcolonnenowrap{flex-direction: column;}
.flexremplissage > div, .flexremplissage > li, .flexremplissage > a, .flexremplissage > label, .flexremplissage > p,.flexremplissage > section, .flexremplissage > aside, .flexremplissage > button, .flexremplissage > select, .flexremplissage > input { flex: 1 1 auto;}
.flexremplissageh > div, .flexremplissageh > li, .flexremplissageh > a, .flexremplissageh > label, .flexremplissageh > p,.flexremplissageh > section, .flexremplissageh > aside {flex: 1 1 0;}
.flexinput > label { width : 30%; min-width: 400px;}.flexinput > .control {width: 70%; min-width: 400px;}
.flexauto > div{  margin: auto; }
.flexend{ justify-content: flex-end;}.flexcenter{justify-content: center;}.flexbetween{justify-content: space-between;}.flexaround{justify-content: space-around;}.flexeven{justify-content: space-evenly;}
.flexalignstart{ align-items: flex-start;}.flexalignend{align-items: flex-end;}.flexaligncenter{align-items: center;}
.flexcontentstart { align-content: flex-start; } .flexcontentbetween { align-content: space-between; }
.itemflexalignstart{align-self: flex-start;}.itemflexalignend{align-self: flex-end;}.itemflexaligncenter{align-self: center;}.itemflexremplissage{align-self: stretch;}
.flxi{ display: inline-flex;}
.flexnowrap{ flex-wrap: nowrap;}
.flexalignstretch{ align-items: stretch;}.flexcontentcenter{ align-content: center;}
.itemflx1{ flex: 1 1 auto;}.itemflx1h{ flex: 1 1 0;}.itemflxnone{ flex: none;}
/* FIN FLEX *//* GESTION SCROLL  */
.scroll::-webkit-scrollbar { height: 12px; background-color: var(--color-secondary); border-radius: 10px;}
.scroll::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: var(--color-secondary); }
.scroll::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; background-color: var(--color-secondary); }
html::-webkit-scrollbar { height: 12px; }
html::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1); background-color: var(--color-secondary); }
html::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 15px rgba(252, 243, 243, 0.80); background-color: #c9c2c2; } 
/* FIN SCROLL */ /* BASE GAP */ 
.margin5px { margin: 5px; } .margin10px { margin: 10px; } .margin15px { margin: 15px; } .margin20px { margin: 20px; }
.margintb15px { margin: 15px 0; } .margintb20px { margin: 20px 0; } .margintb30px { margin: 30px 0; }
.marginl0 { margin-left: 0; } .marginl5px { margin-left: 5px; } .marginl5 { margin-left: 5vw; } 
.marginr0 { margin-right: 0; } .marginr5px { margin-right: 5px; } .marginr5 { margin-right: 5vw; } 
.margint10px { margin-top: 10px; } .margint20px { margin-top: 20px; } .margint30px { margin-top: 30px; } .margint50px { margin-top: 50px; } .margint100px { margin-top: 100px; } .margint10vh { margin-top: 10vh; }
.margint10pxN { margin-top: -10px; } .margint20pxN { margin-top: -20px; }
.marginb15px { margin-bottom: 15px; } .marginb30px { margin-bottom: 30px; } .marginb5vh { margin-bottom: 5vh; } .marginb10vh { margin-bottom: 10vh; }
.paddinglr { padding-left: var(--padding-default); padding-right: var(--padding-default); } .paddingtb { padding-top: var(--padding-default); padding-bottom: var(--padding-default); }
.paddinglrmedium { padding-left: var(--padding-medium); padding-right: var(--padding-medium); } .paddingtbmedium { padding-top: var(--padding-medium); padding-bottom: var(--padding-medium); }
.paddinglrlarge { padding-left: var(--padding-large); padding-right: var(--padding-large); } .paddingtblarge { padding-top: var(--padding-large); padding-bottom: var(--padding-large); }
.gap { gap: var(--gap-default); } .gapmedium { gap: var(--gap-medium); } .gaplarge { gap: var(--gap-large); }
.padding15px { padding: 15px; }
.paddingfull5 { padding: 5vh 5vw; } .padding15px0{ padding: 15px 0; } .paddingb10vh { padding: 0 0 10vh 0; }
.padding5vh { padding: 5vh 0; } .padding10vh { padding: 10vh 0; } .padding20vh { padding: 20vh 0; } .paddingCard { padding: 10px 2%; }
.paddinglr5 { padding-left: 5vw; padding-right: 5vw; }
.paddingl30px { padding-left: 30px; } .paddingr30px { padding-right: 30px; }
.paddingb5vh { padding-bottom: 5vh; } .paddingb15vh { padding-bottom: 15vh; } .paddingb20vh { padding-bottom: 20vh; } .paddingb40vh { padding-bottom: 40vh; }

@media (max-width: 830px){ 
.paddinglr5 { padding-left: 3vw; padding-right: 3vw; }
.paddingb5vh { padding-bottom: 3vh; }
}
@media (max-width: 570px){ 
.paddinglr5 { padding-left: 15px; padding-right: 15px; }
.paddinglrlarge { padding-left: 4vw; padding-right: 4vw; }
}
/* FIN BASE GAP *//* SIMPLY CARD : MEMBER - AVATAR - FIGURES */
.cardMember { width: 275px; min-height: 150px; background: var(--color-primary); margin: 15px; border-radius: 4px; }
.myphoto { overflow: hidden;  margin: auto; display: flex; justify-content: center; flex-direction: column; } .myphoto img { border-radius: 4px; margin: auto; max-width: 100%; }
.formatA { margin-top: 150px; min-height: 100px; background: var(--color-primary); padding-top: 110px; }
.formatA .myphoto { position: absolute; top: -125px; left: 5%; background: black; width: 90%; height: 225px; border-radius: 4px; }
.cerclelogo { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: solid 2px white; }
.formatA .partDetails { min-height: 100px; }
/* FIN SIMPLY CARD */ /* NAV DEFAULT */
.fa-bars.pushNavMobileI, .fa-bars.pushUpMobileI { font-size: 30px; }
.pushNavMobile, .pushUpMobile { display: none; }
@media (max-width: 1300px){    
    .pushNavMobile, .pushUpMobile { display: flex; position: fixed; top: 15px; left: 15px; cursor: pointer; z-index: 999999; }
    .navprimary { display: none; width: 100vw; height: 100vh; position: absolute; padding: 10vh 2vw; top: 0; left: 0; background: black; z-index: 99999; overflow-y: auto; }
    .navprimary ul {justify-content: center;}
    .navprimary ul li { width: 80% !important; margin: auto !important; text-align: center; margin: 15px auto !important; border: none;  }
    .navprimary ul li:last-of-type {margin: 0;}
}
.auto-button { font-size: 250%;    padding: 5px 35px;    border: solid 4px white;    border-radius: 35px;    font-weight: bold;    z-index: 99; }
.smallnav .minw90vw { min-width: 0; }
.smallnav .backgroundnav { max-width: 250%; width: auto; }
/* FIN NAV DEFAULT */ /* BASE FORM */ 
input[type=text], input[type=number], input[type=date], input[type=tel], input[type=email], .input { height: 30px; padding-left: 15px; border: 2px solid #1992BA; border-radius: 4px; min-width: 140px; }
.inputDivRadioChild  { align-content: center; }
.radioCaseV1 input[type=radio] { visibility: hidden; display: none; }
.radioCaseV1 input[type=radio]:checked + label, .radioCaseV1 input[type=radio]:not(:checked) + label{ padding: 20px; letter-spacing: 1px; margin: 5px 5px; text-align: left; border-radius: 4px; overflow: hidden; cursor: pointer; -webkit-transition: all 300ms linear; transition: all 300ms linear; }
.radioCaseV1 input[type=radio]:not(:checked) + label{ background: #e7e7e7; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); }
.radioCaseV1 > div:nth-child(even) input[type=radio]:not(:checked) + label{ background: #1bb3be; }
.radioCaseV1 input[type=radio]:checked + label{ background: #003333; color: white; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); border: solid 3px #86f186; }
.radioCaseV1 input[type=radio]:not(:checked) + label:hover{ background: #006666 !important; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);  color: white; }
.radioCaseVBox input[type=radio] + label { display: flex;   border-radius: 25px !important;  align-items: center;  justify-content: center; min-height: 200px; width: 275px;  }
.radioCaseVBox input[type=radio]:not(:checked) + label { background-color: var(--color-secondary) !important; }
.radioCaseVBox .modelePrivate[type=radio]:not(:checked) + label { background: #e5b76f !important; color: black; }

.noteCalor .note0:not(:checked) + label { background-color: #ffff99 !important; color: black; }.noteCalor .note1:not(:checked) + label { background-color: #ffcc99 !important; color: black; }
.noteCalor .note2:not(:checked) + label { background-color: #ff9966 !important; color: black; }.noteCalor .note3:not(:checked) + label { background-color: #e77b32 !important; color: black; }
.noteCalor .note4:not(:checked) + label { background-color: #cf632c !important; color: white; }.noteCalor .note5:not(:checked) + label { background-color: #f15630 !important; color: white; }
.noteCalor .note6:not(:checked) + label { background-color: #ef3f12 !important; color: white; }

.noteVtoR .note0:not(:checked) + label { background-color: #009641 !important; color: white; }.noteVtoR .note1:not(:checked) + label { background-color: #52ae32 !important; color: white; }
.noteVtoR .note2:not(:checked) + label { background-color: #c8d300 !important; }.noteVtoR .note3:not(:checked) + label { background-color: #ffdf00 !important; }
.noteVtoR .note4:not(:checked) + label { background-color: #fbba00 !important; }.noteVtoR .note5:not(:checked) + label { background-color: #ec6608 !important; color: white; }
.noteVtoR .note6:not(:checked) + label { background-color: #e30613 !important; color: white; }

.noteRtoV .note6:not(:checked) + label { background-color: #009641 !important; color: white; }.noteRtoV .note5:not(:checked) + label { background-color: #52ae32 !important; color: white; }
.noteRtoV .note4:not(:checked) + label { background-color: #c8d300 !important; color: black; }.noteRtoV .note3:not(:checked) + label { background-color: #ffdf00 !important; color: black; }
.noteRtoV .note2:not(:checked) + label { background-color: #fbba00 !important; color: black; }.noteRtoV .note1:not(:checked) + label { background-color: #ec6608 !important; color: white; }
.noteRtoV .note0:not(:checked) + label { background-color: #e30613 !important; color: white; }

.noteWtoP .note0:not(:checked) + label { background-color: #fcf0f4 !important; color: black; }.noteWtoP .note1:not(:checked) + label { background-color: #d9c1db !important; }
.noteWtoP .note2:not(:checked) + label { background-color: #c6a8cc !important; }.noteWtoP .note3:not(:checked) + label { background-color: #b793bf !important; color: white; }
.noteWtoP .note4:not(:checked) + label { background-color: #9e75ad !important; color: white; }.noteWtoP .note5:not(:checked) + label { background-color: #82599b !important; color: white; }
.noteWtoP .note6:not(:checked) + label { background-color: #6a418f !important; color: white; }

.noteRVVOG .note0:not(:checked) + label { background-color: #009641 !important; color: white; }.noteRVVOG .note1:not(:checked) + label { background-color: #fbba00 !important;  }
.noteRVVOG .note2:not(:checked) + label { background-color: #ec6608 !important; color: white; }.noteRVVOG .note3:not(:checked) + label { background-color: #F15642 !important;  color: white; }
.noteRVVOG .note4:not(:checked) + label { background-color: #e30613 !important;  color: white; }.noteRVVOG .note4:not(:checked) + label { background-color: #cd3a27 !important;  color: white; }
.noteRVVOG .note6:not(:checked) + label { background-color: #a72a1a !important; }

.radioCaseV1.noteVtoRInverse input + label, .radioCaseV1.noteWtoPInverse input + label, .radioCaseV1.noteRVVOGInverse input + label { background-color: #e7e7e7 !important; color: black; }
.noteVtoRInverse .note0:checked + label { background-color: #009641 !important; color: white !important; }.noteVtoRInverse .note1:checked + label { background-color: #52ae32 !important; color: white !important; }
.noteVtoRInverse .note2:checked + label { background-color: #c8d300 !important; color: black !important; }.noteVtoRInverse .note3:checked + label { background-color: #ffdf00 !important; color: black !important; }
.noteVtoRInverse .note4:checked + label { background-color: #fbba00 !important; color: black !important; }.noteVtoRInverse .note5:checked + label { background-color: #ec6608 !important; color: white !important; }
.noteVtoRInverse .note6:checked + label { background-color: #e30613 !important; color: white !important; }.noteVtoRInverse input:nth-child(n+15):checked + label { background-color: #133650 !important; color: white !important; }

.noteWtoPInverse .note0:checked + label { background-color: #fcf0f4 !important; color: black !important; }.noteWtoPInverse .note1:checked + label { background-color: #d9c1db !important; color: black !important; }
.noteWtoPInverse .note2:checked + label { background-color: #c6a8cc !important; color: black !important; }.noteWtoPInverse .note3:checked + label { background-color: #b793bf !important; color: white !important; }
.noteWtoPInverse .note4:checked + label { background-color: #9e75ad !important; color: white !important; }.noteWtoPInverse .note5:checked + label { background-color: #82599b !important; color: white !important; }
.noteWtoPInverse .note6:checked + label { background-color: #6a418f !important; color: white !important; }.noteWtoPInverse input:nth-child(n+15):checked + label { background-color: #133650 !important; color: white !important; }

.noteRVVOGInverse .note0:checked + label { background-color: #009641 !important; color: white !important; }.noteRVVOGInverse .note1:checked + label { background-color: #fbba00 !important; color: black !important; }
.noteRVVOGInverse .note2:checked + label { background-color: #ec6608 !important; color: white !important; }.noteRVVOGInverse .note3:checked + label { background-color: #e30613 !important;  color: white !important; }
.noteRVVOGInverse input:nth-child(n+9):checked + label { background-color: #133650 !important; color: white !important; }
/* FIN BASE FORM */
/* AUTOCOMPLETE */
.autocomplete-items { position: absolute;  border: 1px solid #d4d4d4; border-bottom: none; z-index: 99; top: 100%; left: 0; right: 0; max-height: 360px; overflow: hidden; overflow-y: auto; }
.autocomplete-items::-webkit-scrollbar { height: 12px; background-color: #F5F5F5; }
.autocomplete-items::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: var(--color-secondary); }
.autocomplete-items::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);  }

.autocomplete-items div {  color: #3b3b3b; padding: 10px;  cursor: pointer;  background-color: #fff;  border-bottom: 1px solid #d4d4d4;}
.autocomplete-items div:hover {background-color: #e9e9e9;}
.autocomplete-items strong { font-weight: bold; color: black; }
.autocomplete-active {  background-color: DodgerBlue !important;  color: #ffffff;}
/* FIN AUTOCOMPLETE */


/* ---------------------------------------------------------------- SOCLE PAGE
   Le reset du socle Drasil pose 'box-sizing: inherit' sur tout : c'est a l'APP de
   declarer la racine. Sans cette ligne le modele reste content-box et toute bande
   qui porte un padding (hero, en-tete, bandes 80/60) deborde en largeur. */
html{box-sizing:border-box}
body{margin:0;background-color:var(--background-color);color:var(--color-txt);font-family:var(--font-txt);font-size:var(--sizetxt);line-height:1.5}
main{width:100%}
.back-brand{background:var(--grad-brand);}
.back-greentored{background:var(--grad-pill);}
.back-orangetored{background:var(--grad-migration);}
.back-bluetogreen{background:var(--grad-green);}
.back-greentoblue{background:var(--card-top-1);}
.back-bluetoorange{background:var(--card-top-2);}
.back-redtogreen{background:var(--card-top-4);}

/* ---------------------------------------------------------------- EN-TETE / NAV
   Maquette : logo a gauche, liens colles au logo, pastille Connexion repoussee
   a droite. Le <nav> n'est pas couvert par .flexremplissage (qui ne cible ni nav
   ni span) : c'est le seul endroit ou le remplissage s'ecrit ici. */
.bidrasil-pubheader{--pill-bg:var(--background-color);width:100%;padding:0 clamp(20px,4vw,40px);position:relative;z-index:999}
.bidrasil-pubbar{max-width:1360px;margin:0 auto;height:85px}
.bidrasil-pubbar > .navdrasil{flex:1 1 auto}
.bidrasil-pubbar > .navdrasil.bidrasil-pinacct{flex:0 0 auto}
.bidrasil-logo{text-decoration:none;line-height:1}
.bidrasil-logo-img{display:block;height:52px;width:auto}
.bidrasil-logo-word{font-weight:800;letter-spacing:-.01em;font-size:18px;color:var(--color-txt)}

.bidrasil-pubnav ul{list-style:none;margin:0;padding:0}
.bidrasil-navlink a{display:flex;align-items:center;height:45px;padding:12px 6px;color:var(--color-txt);text-decoration:none;font-size:15px;font-weight:500;border-bottom:2px solid transparent;transition:opacity .2s ease}
.bidrasil-navlink a:hover{opacity:.7}
.bidrasil-navlink a.is-selected{border-image:var(--grad-brand) 1}

/* ---------------------------------------------------------------- MENU MOBILE
   <900px : Accueil (logo, deja dans la barre) et Mon compte/Connexion (icone
   seule, cf. .bidrasil-pinacct) restent en permanence dans l'en-tete — seuls
   Logiciels/Abonnements/A propos/Contact/Deconnexion descendent dans un panneau
   qui monte du bas de l'ecran (cf. retour du 2026-08-30 : pas de tiroir lateral
   a la CDI). Le declencheur est un bouton rond flottant, centre en bas d'ecran,
   TOUJOURS visible (position fixe, au-dessus du panneau et du scrim en z-index) —
   pas 3 barres mais un chevron vers le haut (rappelle que le panneau MONTE),
   qui se love en croix a l'ouverture. */
.bidrasil-navburger{display:none}
.bidrasil-navburger-ico{position:relative;width:20px;height:20px}
.bidrasil-navburger-chev,.bidrasil-navburger-x{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff;transition:opacity .3s ease,transform .3s ease}
.bidrasil-navburger-x{opacity:0;transform:rotate(-90deg) scale(.6)}
html.bidrasil-navopen .bidrasil-navburger-chev{opacity:0;transform:rotate(90deg) scale(.6)}
html.bidrasil-navopen .bidrasil-navburger-x{opacity:1;transform:rotate(0) scale(1)}

.bidrasil-navscrim{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:999}
html.bidrasil-navopen .bidrasil-navscrim{opacity:1;pointer-events:auto}

/* Marque du panneau bas (logo + mot BiDrasil) : invisible en desktop (deja dans
   le header) ; sous 900px c'est la SEULE marque/lien retour garanti visible a
   l'ouverture du panneau, le header n'etant pas sticky (cf. vitrineMenu ci-dessus). */
.bidrasil-panelbrand{display:none}
.bidrasil-panelbrand-link{gap:10px;text-decoration:none;line-height:1}
.bidrasil-panelbrand-link .bidrasil-logo-img{height:34px}
.bidrasil-panelbrand-link .bidrasil-logo-word{color:#fff;font-size:19px}

/* Bandeau epingle (Mon compte / Connexion en icone) : invisible en desktop, la
   nav texte s'en charge deja. */
.bidrasil-pinacct{display:none}
.bidrasil-pinacct ul{list-style:none;margin:0;padding:0;display:flex}
.bidrasil-pinacct-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--color-txt);text-decoration:none;transition:background .2s ease}
.bidrasil-pinacct-link:hover{background:rgba(255,255,255,.1)}
.bidrasil-pinacct-link .icon{width:auto;height:auto}
.bidrasil-pinacct-link i{font-size:19px}
.bidrasil-pinacct-txt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:900px){
  .bidrasil-pubnav li.is-pinned{display:none}
  .bidrasil-panelbrand{display:flex;justify-content:center;padding-bottom:18px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.22)}
  .bidrasil-pinacct{display:flex;margin-left:auto}

  .bidrasil-navburger{display:flex;align-items:center;justify-content:center;position:fixed;left:50%;bottom:22px;transform:translateX(-50%);width:60px;height:60px;padding:0;border-radius:50%;border:2px solid transparent;background:linear-gradient(var(--background-color),var(--background-color)) padding-box,var(--grad-pill) border-box;cursor:pointer;z-index:1002;box-shadow:0 10px 30px rgba(0,0,0,.5)}

  .bidrasil-pubnav{position:fixed;left:0;right:0;bottom:0;max-height:75vh;background:var(--grad-brand);border-radius:26px 26px 0 0;padding:36px 28px 110px;overflow-y:auto;transform:translateY(100%);visibility:hidden;transition:transform .45s cubic-bezier(.22,1,.36,1),visibility 0s linear .45s;z-index:1000;box-shadow:0 -20px 50px rgba(0,0,0,.4)}
  html.bidrasil-navopen .bidrasil-pubnav{transform:translateY(0);visibility:visible;transition:transform .45s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s}
  .bidrasil-pubnav ul{flex-direction:column;align-items:stretch;gap:4px;width:100%}
  .bidrasil-pubnav ul>li{opacity:0;transform:translateY(20px);transition:opacity .35s ease,transform .35s ease;text-align:center}
  html.bidrasil-navopen .bidrasil-pubnav ul>li{opacity:1;transform:translateY(0)}
  .bidrasil-pubnav ul>li:nth-child(1){transition-delay:.05s} .bidrasil-pubnav ul>li:nth-child(2){transition-delay:.1s}
  .bidrasil-pubnav ul>li:nth-child(3){transition-delay:.15s} .bidrasil-pubnav ul>li:nth-child(4){transition-delay:.2s}
  .bidrasil-pubnav ul>li:nth-child(5){transition-delay:.25s} .bidrasil-pubnav ul>li:nth-child(6){transition-delay:.3s}
  .bidrasil-pubnav ul>li:nth-child(7){transition-delay:.35s} .bidrasil-pubnav ul>li:nth-child(8){transition-delay:.4s}
  .bidrasil-navlink a{justify-content:center;height:auto;padding:12px 4px;font-size:20px;font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.2)}
  .bidrasil-navlink a.is-selected{border-image:none;border-bottom-color:#fff}
}
@media (prefers-reduced-motion:reduce){
  .bidrasil-navburger-chev,.bidrasil-navburger-x,.bidrasil-navscrim,.bidrasil-pubnav,.bidrasil-pubnav ul>li{transition:none}
}
html.bidrasil-navopen{overflow:hidden}

/* Pastille Connexion : bordure degradee QUI SUIT LE RAYON — technique
   padding-box/border-box. 'border-image' (MVP) ignore border-radius et rendait
   un rectangle : c'est un des points que le MVP n'avait pas finalises. */
.bidrasil-cta-primary{margin-left:auto}
.bidrasil-cta-primary a{display:flex;align-items:center;padding:9px 22px;border-radius:22px;border:2px solid transparent;color:var(--color-txt);text-decoration:none;font-size:15px;font-weight:500;background:linear-gradient(var(--pill-bg),var(--pill-bg)) padding-box,var(--grad-pill) border-box;transition:color .25s ease,background .25s ease}
.bidrasil-cta-primary a:hover{background:var(--grad-pill) border-box;color:#fff}

/* ---------------------------------------------------------------- BOUTONS
   --pill-bg = couleur du fond SOUS le bouton : c'est elle qui creuse l'interieur
   de la bordure degradee. Chaque contexte (carte, page auth) la redefinit. */
.bidrasil-btn{--pill-bg:var(--background-color);display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 24px;border-radius:25px;border:1px solid var(--color-txt);color:var(--color-txt);background:transparent;text-decoration:none;font-family:var(--font-txt);font-size:var(--sizebtn);font-weight:500;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease}
.bidrasil-btn:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff}

.bidrasil-btn.is-pill{border:2px solid transparent;background:linear-gradient(var(--pill-bg),var(--pill-bg)) padding-box,var(--grad-pill) border-box}
.bidrasil-btn.is-pill:hover{background:var(--grad-pill) border-box;color:#fff}
.bidrasil-btn.is-lg{padding:14px 34px;font-size:17px}
.bidrasil-btn.is-sm{padding:6px 16px;font-size:13px}
.bidrasil-btn.is-primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.bidrasil-btn.is-primary:hover{filter:brightness(1.08)}
.bidrasil-btn.is-onlight{background:transparent;border:2px solid #fff;color:#fff}
.bidrasil-btn.is-onlight:hover{background:#fff;color:var(--color-primary)}
.bidrasil-btn.is-stub{cursor:default;opacity:.75}
.bidrasil-btn.is-stub:hover{background:linear-gradient(var(--pill-bg),var(--pill-bg)) padding-box,var(--grad-pill) border-box;color:var(--color-txt)}

/* ---------------------------------------------------------------- CARTE LOGICIEL
   Maquette : filet degrade, visuel, corps (pastille + titre, texte, lien, bouton). */
.bidrasil-card{--pill-bg:var(--background-color-zone);background-color:var(--background-color-zone);position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
/* --card-grad : redefini en style inline par bidrasilView::appCardGradStyle quand
   le logiciel porte une charte ('couleurs') ; sinon repli sur le degrade marque. */
.bidrasil-card::before{content:'';position:absolute;top:0;left:0;height:3px;width:100%;background:var(--card-grad, var(--grad-brand));z-index:1}
.bidrasil-card:hover{transform:translateY(-8px);box-shadow:0 15px 30px rgba(0,0,0,.55)}
.bidrasil-card-media{height:96px;width:100%;background-color:#D9D9D9;flex:none;overflow:hidden}
.bidrasil-card-media img{display:block;width:100%;height:100%;object-fit:cover}
.bidrasil-card-thumb{width:24px;height:24px;background-color:#D9D9D9;flex:none;overflow:hidden;border-radius:4px}
.bidrasil-card-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.bidrasil-card-body{padding:16px 18px 18px}
.bidrasil-card-title{font-size:16px;font-weight:600;margin:0}
.bidrasil-card-domain{display:inline-flex;align-items:center;gap:4px;color:var(--color-secondary);font-size:11px;text-decoration:none;margin-top:2px}
.bidrasil-card-domain:hover{text-decoration:underline}
.bidrasil-card-text{color:var(--color-txt-secondary);font-size:12px;line-height:1.55;margin:0}
.bidrasil-card-actions .bidrasil-btn{flex:none}
.bidrasil-card-link{color:var(--color-primary);text-decoration:none;font-size:12px;white-space:nowrap}
.bidrasil-card-link:hover{text-decoration:underline}

.bidrasil-card-badges{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.bidrasil-badge-soon,.bidrasil-badge-opensource,.bidrasil-badge-partenaire{display:inline-flex;align-items:center;padding:4px 11px;border-radius:16px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.bidrasil-badge-soon{background:rgba(6,153,190,.18);color:#4EC5E4}
.bidrasil-badge-opensource{background:rgba(83,181,146,.18);color:#7BD9AE}
.bidrasil-badge-partenaire{background:rgba(232,99,79,.18);color:#F0967F}
.bidrasil-eyebrow{display:inline-block;color:var(--color-secondary);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:13px}

/* ---------------------------------------------------------------- TITRES
   Le socle Drasil CENTRE h1/h2/h3 et leur colle 2vw de padding sous 1400px, puis
   les recentre sous 830px. La vitrine decide de l'alignement titre par titre
   (hero a gauche, bandes au centre, pied de page a gauche) : on rend la main aux
   conteneurs, chaque bloc redit ensuite ce qu'il veut. */
@media (max-width:1400px){
  main h1,main h2,main h3,.footer h1,.footer h2,.footer h3,.bidrasil-auth h1,.bidrasil-auth h2,.bidrasil-auth h3{text-align:inherit;padding-left:0;padding-right:0}
}
@media (max-width:830px){
  main h1,main h2,main h3,.footer h1,.footer h2,.footer h3,.bidrasil-auth h1,.bidrasil-auth h2,.bidrasil-auth h3{text-align:inherit}
}

/* ---------------------------------------------------------------- TITRES DE BANDE */
.bidrasil-section-title{font-size:var(--sizeh2);font-weight:600;text-align:center;margin:0}
.bidrasil-section-title .red{color:var(--color-primary);font-size:inherit;font-weight:inherit;font-family:inherit}

/* ---------------------------------------------------------------- PIED DE PAGE
   Maquette : pied de page BLANC, colonnes a gauche, encadre de contact borde en
   degrade, filet degrade puis la ligne de copyright. La classe .footer du socle
   Drasil pose deja le fond (--color-footer) et la couleur (--color-txt-footer) :
   on ne redonne ici que ce que la maquette change vraiment. */
.footer{padding:70px clamp(20px,4vw,60px) 30px;text-align:left;align-items:flex-start}
.footer a{font-weight:400}
.footerComplexe{max-width:1100px;margin:0 auto}
.footerComplexeCols{align-items:flex-start}
.footerCol{flex:1 1 180px;min-width:160px;text-align:left}
.footerColTitle{color:#111;font-size:15px;font-weight:700;margin:0 0 6px;text-align:left;padding:0}
.footerColList{list-style:none;padding:0;margin:0}
.footerColList a{color:#666;text-decoration:none;font-size:14px}
.footerColList a:hover{color:#000}
.footerColLine{color:#333;font-size:14px;line-height:1.5;margin:0}

.footerColContact{flex:0 0 300px;max-width:300px;padding:20px;border:1px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(160deg,#53B592,#E73A62) border-box}
.footerColContact .footerColList a{color:#333}

.footerComplexeSoc{margin-top:12px}
.footerComplexeSoc ul{list-style:none;padding:0;margin:0}
.footerComplexeSoc img{height:32px;width:32px;border-radius:50%;opacity:.85;transition:opacity .2s ease}
.footerComplexeSoc a:hover img{opacity:1}

.footerComplexeCredit{max-width:1100px;margin:60px auto 0;padding-top:20px;border-top:2px solid transparent;border-image:linear-gradient(90deg,#53B592,#E73A62) 1;font-size:13px;color:#777;text-align:left}
.footerComplexeCredit p{margin:0;text-align:left}
.footerComplexeCredit a{color:#777;text-decoration:none}
.footerComplexeCredit a:hover{color:#000}

/* ---------------------------------------------------------------- RESPONSIVE
   Les tokens de padding sont resserres sur mobile : une seule bascule, toutes
   les bandes suivent (elles portent paddingtblarge/paddinglrmedium). */
@media (max-width:900px){
  :root{--padding-medium:24px;--padding-large:56px;--gap-large:36px}
  .bidrasil-pubbar{height:auto;padding:14px 0}
  .footerColContact{flex:1 1 100%;max-width:100%}
}
@media (max-width:600px){
  :root{--padding-medium:16px;--padding-large:40px;--gap-medium:16px}
  .footer{padding:48px 16px 24px}
}

/* ------------------------------------------------------------- LA BULLE « ∞ »
   Le menu commun de la suite, rendu en BULLE FLOTTANTE — le meme rendu que dans Destin
   et dans Welcome (arbitrage boss, 2026-09-02). La GEOMETRIE vient du kit
   `Odhinn/kit/suite` (option `flottant`, classe `dr-st-flottant`) : elle est ecrite une
   seule fois pour les trois logiciels, sans quoi la premiere divergence — un `bottom`
   retouche dans un seul projet — n'aurait leve aucune erreur.
   Ici, les COULEURS de BiDrasil, et elles seules.
   ⚠️ TROIS classes sur le bouton : le kit habille le sien par `.dr-st-flottant
      .dr-st-btn`, qui pese (0,2,0). A poids egal c'est l'ordre des feuilles qui tranche,
      et le kit pousse son CSS APRES celui-ci. */
.dr-st-flottant .dr-st-btn.bidrasil-fab{background:var(--color-primary);color:var(--color-button-txt,#FFF)}
.dr-st-flottant .dr-st-btn.bidrasil-fab:hover{background:var(--color-primary);color:var(--color-button-txt,#FFF);filter:brightness(1.08)}
.dr-st-panel.bidrasil-fabpanel{background:var(--color-fond-card);color:var(--color-txt);border:1px solid var(--color-fond-zone)}

/* LE REPLI — la bulle quand le KIT N'EST PAS LA (framework pas a jour sur le serveur).
   C'est un FILET, pas un second menu : les liens de l'app, rien de plus, et aucun JS —
   `<details>` ouvre et ferme seul, meme si aucun script de la page n'a pu se charger. */
.bidrasil-replimenu{position:static;display:block}
.bidrasil-replibtn{position:fixed;bottom:.9rem;left:50%;transform:translateX(-50%);
  width:3.4rem;height:3.4rem;border-radius:50%;background:var(--color-primary);
  color:var(--color-button-txt,#FFF);display:flex;align-items:center;justify-content:center;
  font-size:1.85rem;line-height:1;box-shadow:0 6px 18px rgba(0,0,0,.35);cursor:pointer;
  z-index:90;list-style:none}
.bidrasil-replibtn::-webkit-details-marker{display:none}
.bidrasil-replipanel{position:fixed;bottom:4.6rem;left:50%;transform:translateX(-50%);
  min-width:14rem;max-width:calc(100vw - 16px);max-height:70vh;overflow:auto;margin:0;
  padding:.8rem;list-style:none;background:var(--color-fond-card);color:var(--color-txt);
  border:1px solid var(--color-fond-zone);border-radius:.7rem;
  box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:91}
.bidrasil-repliitem{padding:.3rem 0}
.bidrasil-replilien{color:var(--color-a,#FFF);text-decoration:none;font-size:.9rem}
.bidrasil-replilien:hover{color:var(--color-a-hover)}
@media (max-width:600px){
  .bidrasil-replibtn{bottom:12px}
  .bidrasil-replipanel{bottom:4rem}
}



body{background-color:#121212}
.bidrasil-pubheader{--pill-bg:#121212}

.bidrasil-abo-hero{text-align:center;margin:0 auto}
.bidrasil-abo-hero h1{font-size:42px;font-weight:700;margin:0}

/* ---------------------------------------------------------------- LISTE PAR LOGICIEL */
.bidrasil-abo-applist-card{--pill-bg:#1E1E1E;width:260px;background:#1E1E1E;border-radius:12px;padding:30px}
.bidrasil-abo-applist-card .bidrasil-card-title{font-size:18px;margin-bottom:8px}

/* ---------------------------------------------------------------- PACKS (a venir) */
.bidrasil-packs{background-color:#171717;border-radius:12px}
.bidrasil-packs-header{text-align:center}
.bidrasil-packs-header h2{font-size:26px;font-weight:700;margin:8px 0 6px}
.bidrasil-pack-card{width:260px;padding:24px;background-color:#121212;border:1px dashed rgba(255,255,255,.22);border-radius:12px}
.bidrasil-pack-card .bidrasil-card-title{margin:10px 0 6px}

/* ---------------------------------------------------------------- FORMULES */
.bidrasil-pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.bidrasil-pricing-card{--pill-bg:#1E1E1E;background:#1E1E1E;border-radius:12px;padding:30px;position:relative;overflow:hidden;transition:transform .3s ease}
.bidrasil-pricing-card:hover{transform:translateY(-6px)}
.bidrasil-pricing-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px}
.bidrasil-pricing-card:nth-child(1)::before{background:#2ECC71}
.bidrasil-pricing-card:nth-child(2)::before{background:#00C6FF}
.bidrasil-pricing-card:nth-child(3)::before{background:#FF7675}
.bidrasil-pricing-card:nth-child(4)::before{background:#E84393}
.bidrasil-pricing-card:nth-child(1) h2{color:#2ECC71}
.bidrasil-pricing-card:nth-child(2) h2{color:#00C6FF}
.bidrasil-pricing-card:nth-child(3) h2{color:#FF7675}
.bidrasil-pricing-card:nth-child(4) h2{color:#E84393}
.bidrasil-pricing-card h2{text-align:left;padding:0;font-size:20px;font-weight:700;margin:0 0 15px}
.bidrasil-price{font-size:18px;margin:0 0 20px}
.bidrasil-price span{font-size:14px;opacity:.7}
.bidrasil-pricing-card p{margin:0 0 20px;color:var(--color-txt-secondary);font-size:14px;line-height:1.6}
.bidrasil-pricing-card ul{list-style:none;margin:0 0 30px;padding:0}
.bidrasil-pricing-card li{margin-bottom:12px;font-size:14px;position:relative;padding-left:20px;color:var(--color-txt-secondary)}
.bidrasil-pricing-card li::before{content:'•';position:absolute;left:0}

@media (max-width:1100px){ .bidrasil-pricing-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .bidrasil-pricing-grid{grid-template-columns:1fr} .bidrasil-abo-hero h1{font-size:30px} }