:root {
    --font-family: Arial, Helvetica, sans-serif;
    --font-familyHead: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
    --font-dyslexic: 'OpenDyslexic', sans-serif;
    --radius:1vw;
    /* dark*/
    --fond:#1A445A;
    --text:#fff;
    --box:#000;
    --color:#F4A733;
    --color_web:#0099EF;
    --color_design:#FF3DA6;
    --color_logo:#F4A733;
    --rgba:0;
    --border:#666;
}
:root body.web {
    --color:#0099EF;
    --color_logo:#0099EF;
}
:root body.design {
    --color:#FF3DA6;
    --color_logo:#FF3DA6;
}
:root body.light {
    --fond:#C8EEFB;
    --text:#000;
    --box:#FFF;
    --color:#ec780c;
    --color_web:#0083CD;
    --color_design:#C90356;
    --color_logo:#F5771C;
    --rgba:255;
    --border:#ccc;
}
:root body.light.web {
    --color:#0083CD;
    --color_logo:#0099EF;
}
:root body.light.design {
    --color:#C90356;
    --color_logo:#FF3DA6;
}
@font-face {
    font-family: 'OpenDyslexic';
    font-style: normal;
    font-weight: 400;
    src: url('OpenDyslexic-Regular.otf') format('opentype');
}
body .to_light,
body.light .to_dark,
.menu_ordi .bt_home,
.fermer_dialog,
.menu_smart,
.fond,
.front .fond,
body .mode .darkmode,
body.light .mode .normalmode {
    display: none;
}
body.light .to_light,
body.light .mode .darkmode {
    display: block;
}
body.accessibility_115 {
    font-size: 115%;
}
body.accessibility_130 {
    font-size: 130%;
}
body.accessibility_85 {
    font-size: 85%;
}
body.dyslexia * {
    font-family: var(--font-dyslexic) !important;
  }
button, input, textarea, select {
    appearance: none;
    font-size: 1em;
}
div, a, span {
    box-sizing: border-box;
}
body .b_is > .b_i_web .lien {
    color:var(--color_web);
}
body .b_is > .b_i_design .lien {
    color:var(--color_design);
}
/* debut HTML */
html {
    font-size: 1.3vw;
}
body {
    padding:0vw;
    margin:0;
    background-color: var(--fond);
    color:var(--text);
    font-family: var(--font-family);
}
.global {
    position: relative;
    z-index: 2;
    padding-top:5.2vw;
}
.contenu {
    position: relative;
  z-index: -1;
}
.site {
    max-width: 90vw;
    margin:auto;
}
.lien,
a {
    color:var(--color);
    text-decoration:none;
}
.effets .dyslexia button:hover,
a:hover {
    text-decoration:underline;
}
.lien:hover,
a.active:hover {
    text-decoration:none;
}
.video {
    width:100%;
    height: 100%;
    position: fixed;
    left: 0;
  top: 0;
  z-index: 0;
  opacity: 0.45;
}
body.light .video {
  opacity: 0.3;
}
.fond {
    display:block;
    height:63%;
    width:100%;
    background:var(--box);
    position: fixed;
    z-index: 0;
    bottom:0;
    left:0;
}
.fond::before {
    display:block;
    content:"";
    height:22vw;
    width:100%;
    background:linear-gradient(to top,var(--box),rgba(var(--rgba),var(--rgba),var(--rgba),0));
    position: fixed;
    z-index: 0;
    bottom:63%;
    left:0;
}
.fond.abs {
    height:85%;
}
.fond.abs::before {
    height:15%;
     bottom:85%;
}
header {
    position:sticky;
    top: 2.5vw;
    min-width: 0;
    width: 55vw;
    margin:auto;
}
header .menu_ordi {
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(var(--rgba),var(--rgba),var(--rgba),0.7);
    border-radius:1.2vw;
    padding: 0 1vw;  
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
}
.head.sticky {
    top:0;
}
.head.sticky > div {
    border-radius:0 0 2vw 2vw;
    background:var(--box);
}
.head.sticky .logo {
    width: 6vw;
    height: 6vw;
    margin-top:-0.5vw;
}
body.light header .menu_ordi {
    background:var(--box);
}
.preban {
    position: absolute;
    left:1vw;
    top:1vw;
}
.evit {
    list-style: none;
}
.evit a {
    background-color: var(--box);
    padding: 0.5em 1em;
    opacity: 0;
}
.evit a:focus-visible {
    opacity: 1;
}
.effets, 
.navi {
    width: 40%;
    flex-shrink:0;
}
.effets {
    display:flex;
    align-items:center;
    justify-content: space-around;
}
.effets button {
    background:none;
    border:0;
    box-sizing: border-box;
    color:var(--color);
    padding:0;
    margin:0;
    padding-block: 0px;
    padding-inline: 0px;
    display: block;
}
ul.listFontSizes li.img span {
    display:block;
    width:2vw;
    height:2vw;
    mask-image: url('../images/texte.svg');
    mask-repeat:no-repeat;
    mask-size:contain;
    margin: 0 0.4vw;
    background-color: var(--text);
}
.effets .mode {
    display:flex;
    align-items:center;
    position:relative;
    justify-content: center;
}
.effets .mode button span {
    display: block;
     height:2vw;
    width:2vw;
     mask-image: url('../images/soleil.svg');
    background-color: var(--color_logo); 
    mask-repeat:no-repeat;
    mask-size:contain; 
}
ul.listFontSizes li.tosize button,
ul.listFontSizes li.tosize {
    width: 2vw;
    height:2vw;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-item: center;
    padding: 0;
    position: relative;
}
ul.listFontSizes li.tosize button span {
    display: flex;
    width:1.7vw;
    height:2vw;
    justify-content:center;
    align-items:center;
    font-size:130%;
    line-height:1.2em;
}
body.light .effets .mode button span {
    mask-image: url('../images/lune.svg');
}
body.accessibility_85 .listFontSizes > li:last-child button, 
body.accessibility_115 .listFontSizes > li:first-child button, 
body.accessibility_130 .listFontSizes > li:first-child button, 
body.dyslexia .effets button .dyslexiaText {
    color: var(--text); 
}
ul.listFontSizes li.tosize button span:hover,
.effets .mode:hover {
    transform: scale(1.2);
    transition:0.1s;
}
.effets .mode:hover,
.effets button:hover {
    cursor:pointer;
}
.logo {
    width: 7.5vw;
    height:7.5vw;
    flex-shrink: 0;
    margin: -2.2vw 0 -1.4vw 0;
}
.logo a,
.logo span {
    display: block;
  background: url('../images/logo.svg') no-repeat center;
  background-size: contain;
  height: 100%;
  width: 100%;
  }
  body.light .logo a,
body.light .logo span {
    background-image: url('../images/c_logo.svg') ;
}
body.web .logo a,
body.web .logo span {
    background-image: url('../images/logo_bleu.svg') ;
}
body.light.web .logo a,
body.light.web .logo span {
    background-image: url('../images/c_logo_bleu.svg') ;
    }
body.design .logo a,
body.design .logo span {
    background-image: url('../images/logo_rose.svg') ;
}
body.light.design .logo a,
body.light.design .logo span {
    background-image: url('../images/c_logo_rose.svg') ;
    }
.effets ul,
.navi ul {
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    justify-content: space-around;
}
.effets ul li,
.navi ul li {
    list-style-type:none;
    margin:0;
    padding:0;
}
.navi ul li a {
    display:block;
    padding: 1.4vw 0.8vw;
}

.navi ul li a.active {
    color:var(--text) !important;
}
.b_is,
h1,h2,h3 {
    font-family:var(--font-familyHead); 
    font-weight:600;
}
h1 {
    text-align:center;
    margin:4vw 0 2vw 0;
    font-size:320%;
}
.front h1 {
  margin:8vw 0 6vw 0; 
}
h2 {
    text-align: center;
    margin:4vw 0 2vw 0;
    font-size:290%;
}
.h3,
h3 {
    font-size: 180%;
}
.contact .h3 {
    font-size:140%;
}
.ariane {
    justify-content: center;
    margin-top: 2.2vw;
    display: flex;
    align-items: center;
    position: relative;
    z-index: -2;
}
body .ariane p,
body .ariane a {
    color:var(--text);
    font-size:90%;
    padding:0;
    margin:0;
    display: flex;
    position: relative;
    opacity: 0.65;
}
body .ariane a {
    text-decoration: underline;
}
body .ariane a:hover {
    opacity: 1;
}
body .ariane p {
    align-items: center;
    display: flex;
}

body .ariane p::before {
    display: flex;
    content:'';
    height: 1vw;
    width: 1vw;
    margin: 0 0.2vw 0 1vw;
    mask-image: url('../images/ariane.svg');
    mask-repeat:no-repeat;
    mask-size:contain;
    background-color: var(--text);
}
.intro {
    text-align: center;
    font-size: 1.5em;
}
footer {
    text-align:center;
    width:100%;
    padding:8vw 0 3vw 0;
    position: relative;
    z-index: 300;
}
footer > ul {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   margin:0;
   padding:0;
}
footer > ul li {
    list-style: none;
 }
body .global footer a {
    font-size:101%;
    display:block;
    padding:0 1vw;
    color:var(--text);
}
.retourHaut {
    background:var(--box);
    background-size: 40%;
    height:4vw;
    width:4vw;
    position:fixed;
    border-radius:100%;
    z-index:4;
    right:2vw;
    bottom:2vw;
     opacity:0;
    box-shadow:0 0 12px var(--color);
    transition:0.2s;
    z-index:300;
}
.retourHaut::after {
    display:block;
    content:"";
    mask-image:url('../images/fleche_haut.svg');
    mask-repeat:no-repeat;
    mask-position:center;
    mask-size: 40%;
    background-color:var(--text);
    height: 100%;
    width: 100%;
    position:absolute;
    left:0;
    top: 0;
    opacity:0.6;
}
.retourHaut.active {
    opacity:0.7;
}
.retourHaut.active:hover {
    opacity:1;
    cursor:pointer;
}
.retourHaut.active:hover::after {
    opacity:1;
}
/**** DEB CONTENUS ****/
/** DEB HOME **/
.b_is {
   display:flex;
   justify-content:center;
   align-items:center;
}
.b_is > a {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background: rgba(var(--rgba),var(--rgba),var(--rgba),0.7);
    border-radius:var(--radius);
    padding: 3.2vw 1.5vw;
    width:40vw;
    height: 20vw;
    margin: 0vw 1.8vw;
    position:relative;
}
body.light .b_is > a {
    background:var(--box);
}
body .b_is > a:hover {
    text-decoration: none;
}
.b_is span span {
   margin:0.3vw 0;
   color:var(--text);
   display: block;
   font-size: 160%;
}
a.b_i:hover span.lien {
    text-decoration: underline;
}
.b_i::after {
    display:block;
    content:"";
    height:80%;
    width:40%;
    background: url('../images/main.svg') no-repeat center;
    background-size:contain;
    position:absolute;
}
body.light .b_i_web::after {
    background-image: url('../images/c_main.svg') ;
}
.b_i_web > span {
    padding-right:40%;
}
.b_i_web::after {
    left:55%;
    top:30%;
}
.b_i_design > span {
    padding-left:50%;
}
.b_i_design::after {
    left: 0%;
    top:-10%;
    height:120%;
    width: 60%;
    background-image: url('../images/home_soleil.png');
}
.b_i:hover {
  transform:scale(1.05);
    transition:0.2s;
}
.b_i:hover::after {
  transform:scale(1.05) rotate(-15deg);
    transition:0.6s;
}
.b_i_design:hover::after {
  transform:scale(1.05) rotate(360deg);
    transition:6s;
}
.text_center {
    max-width:900px;
    text-align: center;
    margin:auto;
}
/**** FIN HOME ****/
.flex {
    display: flex;
}
.box {
    border-radius: var(--radius);
    background:rgba(var(--rgba),var(--rgba),var(--rgba),0.25);
    padding:2.1vw;
    margin:2.1vw auto;
    max-width: ;
}
.box.sans_fond {
    background:none;
}
 .box.sans_marge {
    padding: 0 !important;
  }
.box .st {
    font-weight: 600;
}
.box h3 {
    margin:0;
}
.box p {
    margin:0.5vw 0;
}
body .box_bleuF {
    background-color:rgba(100,132,180,0.25);
}
body.light .box_bleuF {
    background-color:rgba(100,132,180,0.15);
}
body .box_bleu {
    background-color: rgba(120,162,250,0.25);
}
body.light .box_bleu {
    background-color: rgba(120,182,250,0.25);
}
body .box_grisF {
    background-color: rgba(100,100,100,0.25);
}
body.light .box_grisF {
    background-color: rgba(100,100,100,0.15);
}
body .box_gris {
    background-color: rgba(190,190,190,0.25);
}
body.light .box_gris {
    background-color: rgba(190,190,190,0.4);
}
body .box_rouge {
    background-color: rgba(255, 130, 158, 0.2);
} 
body .box_bleuV {
    background-color:#0C6CFF;
}
body.light .box_bleuV {
    background-color:#a0e5fa;
}
body .box_orange {
    background-color: #bc5801;
} 
body.light .box_orange {
    background-color: #f9b57a;
} 
body .box_vert {
    background-color: #ba2173;
} 
body.light .box_vert {
    background-color: #ff94cd;
} 
body .box_vert a,
body .box_bleuV a,
body .box_orange a {
    color:var(--text);
} 
body.light .box_rouge {
    background: rgba(255, 130, 158, 0.2);
}
body .box_cadre {
    border:1px solid var(--border);
} 
.visu {
    background: #FFF url('../images/design/colibri_logo.svg') no-repeat center;
    background-size: contain;
    border-radius:0.6vw;
    height: 12.5vw;
    width:12.5vw;
    flex-shrink: 0;
}
.visu_small {
    border-radius:0.4vw;
}
.visu_large {
    height: 26.9vw;
    width:26.9vw;
}
body.light .box.sans_fond .visu {
    border:1px solid var(--border)
}
.flex_logos .flex {
    gap: 2.1vw;
}
.flex_logos {
    justify-content: space-around;
    gap: 2vw;
}
.flex_logos .flex:nth-child(2) {
    margin-top: 2.1vw;
}
.b_colibri .visu.ls1 {
    background-image:url('../images/design/colibri_coiffure_logo.png');
}
.b_colibri .visu.ls2 {
    background-image:url('../images/design/colibri_couture_logo.png');
}
.b_colibri .visu.ls3 {
    background-image:url('../images/design/colibri_cuisine_logo.png');
}
.b_colibri .visu.v_photo {
    background-size: cover;
}
.b_colibri .visu.ps1 {
    background-image:url('../images/design/colibri_photo2.png');
}
.b_colibri .visu.ps2 {
    background-image:url('../images/design/colibri_photo.png');
}
body.light .b_colibri .visu.ps2 {
    background-image:url('../images/design/colibri_photo_light.jpg');
}
.b_carnot .visu {
  background-image: url('../images/design/logo_association.webp');
  background-size: 80% auto;
  border-radius: 0.5vw;
  width: ;
  height: 12.35vw;
}
.b_carnot .ls2 {
  background-image: url('../images/design/carnot_arts.svg');
}
.b_carnot .box_text, 
.b_barile .box_text {
    text-align: right;
    width: 25vw;
}
.b_culture  {
  width:65vw;
  margin-left: 0;
}
.b_culture > .flex {
  flex-direction: row-reverse;
  justify-content: ;
}
.b_culture .v_logo {
  background-size: 90% auto;
}
.b_culture .ls1 {
   background-image: url('../images/design/bar-ile03.png');
}
.b_culture .ls2 {
   background-image: url('../images/design/bar-ile02.png');
}
.b_culture .ls3 {
   background-image: url('../images/design/bar-ile01.png');
}
.b_barile {
   margin-top:-6.5vw;
   justify-content: flex-end;
   display: flex;
}
.b_barile .flex {
    align-items:center;
}
.b_barile .ls1 {
   background-image: url('../images/design/cultures_03.svg');
}
.b_barile .ls2 {
   background-image: url('../images/design/cultures_02.svg');
}
.b_barile .l3 {
   background-image: url('../images/design/cultures_plurielles.svg');
    background-size: 90% auto;
}
.b_anim {
margin-left: -3vw;
  margin-right: -3vw;
}
.b_anim h2 {
    margin-top:1.8vw;
}
.b_anim .box_text {
    display: flex;
    position: relative;
    left: 50%;
    width: 40%;
}
.b_anim .box_text::before {
    display: block;
    content:"";
    background: url('../images/design/nti.png') no-repeat center;
    height: 28vw;
    width:36vw;
    background-size: contain;
    position: absolute;
    top: -11vw;
    left: -40vw;
}
.box_video {
    text-align: center;
    margin:4vw auto 2vw auto;
}
.box_video video {
    width:100%;
    height: auto;
    max-width: 400px;
}
body.liens .box {
   display: flex;
   justify-content: space-around;
   align-items: center;
   height: 18vw;
   margin: 6vw auto;
   width: 75vw;
}
body.liens .box.second {
   flex-direction:row-reverse;
}
body.liens .box .img {
    width: 32vw;
    margin: 0;
    display:flex;
    align-items:center;
    position: relative;
}
body.liens .box .text {
    width: 35vw;
    padding: 0 4vw;
}
body.liens .box .img img {
    width:100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow:0.5vw 0.5vw 1vw rgba(0,0,0,0.2);
}

.flex_ill {
    justify-content: space-between;
    gap: 2.1vw;
}
.ill {
    background:transparent url('../images/design/cite_ill_cerveau.jpg') no-repeat center;
    background-size:cover;
    margin-bottom: 1vw;
}
.by2 .ill {
    width: 42vw;
    height: 27vw;
}
.by3 .ill {
    width: 27vw;
    height: 18vw;
}
.ill_lex_soleil {
    background-image: url('../images/design/cite_ill_soleil.jpg') ;
}
.ill_lex_cellule {
    background-image: url('../images/design/cite_ill_cellule.jpg') ;
}
.ill_lex_vents {
    background-image: url('../images/design/cite_ill_vents.jpg') ;
}
.flex .ill_systeme {
    background-image: url('../images/design/cite_ill_systeme-nerveux.jpg');
    height: 32vw;
    width: 42vw;
    border-radius: var(--radius);
}
.flex .ill_neurones {
    background-image: url('../images/design/cite_ill_neurones.png');
    width: 50vw;
    height: 26vw;
    margin-left: -20vw;
    margin-top: 2vw;
}
.b_cerveau {
    margin-top: 1vw;
}
.box.b_cerveau2 {
    margin-top:-6vw;
}
.box.b_cerveau2 {
   margin-top: -2.1vw;
}
.b_cerveau2 .flex {
    justify-content: center;
    margin-left:0%;
}
.flex .ill_plan_cerveau {
     background-image: url('../images/design/cite_plan_cerveau.png');
     width: 45vw;
     height: 30vw;
     margin-right: -2.1vw;
     position: absolute;
}
.text_plan {
    margin-top:2vw;
}
.box .ill_titeuf {
     background-image: url('../images/design/cite_plan_titeuf.png');
     width: 48vw;
     height: 32vw;
     margin: -6vw 0 -6vw 0;
}
.b_mogador {
    margin-bottom: 8vw;
    margin-top: 6vw;
}
.box .ill_mogador {
     background-image: url('../images/design/mogador.png');
     width: 55vw;
     height: 23vw;
     margin: -6vw 0 -2vw 28vw;
     position: absolute;
}
.flex_ge {
    align-items:center;
}
.box .ill_ge {
     background:#fff url('../images/design/legend210.jpg')  no-repeat center;
     background-size: contain;
     width: 48%;
     height: 23vw;
     margin: 0 3vw 0 0;
     border-radius:var(--radius);
}
.b_ville {
     padding-top: 3vw;
}
.b_ville .ill_ville {
     background: url('../images/design/ville_de_cristal.png')  no-repeat center;
     background-size:cover;
     width:111%;
     height: 12vw;
    margin:0 -5.5%;
}
body.light .b_ville .ill_ville {
    
}
/*** WEB ***/
.zone_web h2 img {
    max-width:500px;
    width:28vw;
    height:auto;
    margin:0 auto;
}
.zone_anakrys h2 img {
    width: 70vw;
     max-width:380px;
}
.zone_myth h2 img {
    width: 50vw;
     max-width:260px;
}
.box_blueway {
    background-image:url('../images/web/blueway_coche.jpg');
    background-repeat:no-repeat;
    background-position:right bottom;
    height: 24vw;
    align-items: center;
    display: flex;
}
body.light .box_blueway {
    background-image:url('../images/web/blueway_coche_light.jpg');
}
.box_blueway .web_text {
    font-size:1.6em;
    width: 55%;
    padding: 1vw 1vw 1vw 5vw;
    line-height: 1.3em;
    font-weight: 600;
}
.flex3,
.box_docpro,
.flex2 {
    display:flex;
    justify-content:space-between;
}
.flex2 > div {
    width:48%;
    flex-shrink:0;
}
.flex3 > div {
    width:31.3%;
    flex-shrink:0;
}
.box.box_web {
    padding:0;
    margin:1vw 0;
}
.web_visu {
    width:100%;
    height:28vw;
    border-radius:var(--radius);
    background:url('../images/web/blueway_bordeaux.jpg') no-repeat center;
    background-size:cover;
    margin-bottom:0.8vw;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.15);
}
.flex3 .web_visu {
    height:18vw;
}
.box_docpro {
    height:33vw;
    align-items:center;
}
.box_docpro .web_visu {
    width: 50%;
    height: 28vw;
    background-image: url(../images/web/anakrys_docpro.jpg);
}
.box_docpro .web_text {
    width: 35%;
    margin-right:10%;
}
.box_nord .web_visu {
    background-image: url(../images/web/blueway_nord.jpg);
}
.box_bioterre .web_visu {
    background-image: url(../images/web/anakrys_bioterre.jpg);
}
.box_velizy .web_visu {
    background-image: url(../images/web/anakrys_velizy.jpg);
}
.box_uaf .web_visu {
    background-image: url(../images/web/anakrys_uaf.jpg);
}
.box_web .web_text a {
    font-weight:bold;
    margin-top:0.5vw;
    display:block;  
}
.box_myth .web_visu {
    background-image: url(../images/web/mythologie.png);
    background-position: center top;
    height: 45vw;
}
.zone_web .st {
    font-size:1.2em;
}
.flex .ill_plan_cerveau {
    margin-right: 0;
    right: 0;
}
/** DEB FORM **/
form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width:30vw;
    margin:auto;
}
input, select, textarea {
    font-family: Arial, Helvetica, sans-serif;
    font-size:1rem;
    background-color: var(--box);
    border:1px solid var(--border);
    margin:0.6vw 0;
    color:var(--text);
    border-radius: 24px;
    padding:0.6vw 1.5vw;
    transition:0.2s;
}
input[type="submit"] {
    background-color: var(--color);
    color:var(--box);
    padding:0.6vw 1vw;
    border-radius:40px;
    margin:auto;
    border-color:var(--color);
    display: block;
}
input[type="submit"]:hover {
    background-color: var(--box);
    color:var(--color);
    cursor:pointer;
}
label {
    margin:1vw 0 0.2vw 0;
}
/** FIN FORM **/
/************/
/**** FIN CONTENUS ****/
/***** RWD *****/
@media all and (min-width:1240px) {
    html {
        font-size: 1vw;
    }

    .not-front .site {
        max-width:1152px;
    }
    .n_logo {
        max-width:1122px;
        margin:auto
    }
    .visu_large {
        width:336px;
        height: 336px;
    }
     .visu_small {
        width:154px;
        height: 154px;
    }
    .box_docpro {
  height: 400px;
}
    .box_docpro .web_visu {
  height: 330px;
        width:540px;
}
    .flex3 .web_visu {
  height: 230px;
}
    .web_visu,
    .box_blueway {
  height: 330px;
}
    .b_carnot .visu {
  height: 154px;
}
    .b_carnot .fl_c1 {
        width:336px;
    }
    .b_carnot .box_text, .b_barile .box_text {
  width:auto;
}
    .box {
  padding:27px;
}
    .box_myth .web_visu {
    height: 600px;
}
    .n_ill .box {
  padding:47px;
}
    .flex_logos .flex,
    .flex_logos {
  gap: 27px;
}
    .b_barile {
  margin-top: -94px;
}
    .b_culture {
  width: 835px;
}
    .b_anim .box_text::before {
  height:315px;
  width: 520px;
  top: -120px;
  left: -550px;
}
    body.liens .box {
  height: 250px;
  margin: 8vw auto;
  width: 1050px;
}
    body.liens .box .img {
  width: 500px;
}
    body.liens .box .text {
  width: 40%;
  padding: 0 40px;
}
    .flex_logos .flex:nth-child(2) {
  margin-top: 27px;
}
     .box_video {
  text-align: center;
  margin: 40px 0 20px 0;
}
    .b_anim {
  margin-left: -30px;
  margin-right: -30px;
}
h1 {
    font-size: 3.6em;
}
h2 {
    font-size: 3em;
}
.h3,h3 {
    font-size: 2em;
}
    .contact .h3 {
        font-size: 1.5em;
    }
    body .ariane p, body .ariane a {
  font-size: 0.938em;
}
    .intro {
}
    .logo {
        width: 6.2vw;
        height:6.2vw;
        margin: -3.1vw 0 -2.1vw 0;
}
    body .global footer a {
  font-size: 0.938em;
  padding: 0 12px;
}
.box .ill_ge {
    width: 494px;
    height: 340px;
    flex-shrink: 0;
}
    .head.sticky .logo {
            width: 4vw;
    height: 4vw;
    margin-top: -1.2vw;
}
    ul.listFontSizes li.tosize,
    ul.listFontSizes li.tosize button,
    ul.listFontSizes li.img span,
    .effets .mode button span {
        height: 1.5vw;
    width: 1.5vw;
}
    ul.listFontSizes li.tosize button span {
            width: 1.5vw;
            height: 1.5vw;
            position: absolute;
            top: 0;
}
  .retourHaut {
  height:60px;
  width: 60px;
  right: 20px;
  bottom: 20px;
} 
    header {
      max-width:45vw  
}
    .effets button,
    .navi ul li a {
        font-size:1.3em;
        padding: 0.9vw 0.6vw;
}
    .head.sticky .effets button,
     .head.sticky .navi ul li a {
        padding:0.6vw 0.6vw;
          font-size:1.2em;
    }
    .b_is > a {
  position: relative;
  box-sizing: border-box;
           width: 36vw;
    height: 18vw;
}
    .box_video video {
    max-width: 460px;
}
    .flex_ill {
    justify-content: space-around;
    gap:43px;
}
.ill {
    margin-bottom:10px;
}
.by2 .ill {
    width:512px;
    height: 333px;
}
.by3 .ill {
    width:326px;
    height: 212px;
}
.flex .ill_systeme {
    height: 397px;
    width:528px;
}
.flex .ill_neurones {
    width:704px;
     height: 406px;
    margin-left:-130px;
}
.b_cerveau {
    margin-top:2vw;
}
.box.b_cerveau2 {
   margin-top: -65px;
}
.flex .ill_plan_cerveau {
    width:554px;
     height: 402px;
}
.text_plan {
    margin-top:40px;
}
.box .ill_titeuf {
   width:642px;
     height:410px;
    margin:-90px 0 -60px 0;
}
.b_mogador {
    margin-bottom: 127px;
    margin-top: 20px;
}
.box .ill_mogador {
    margin:-80px 0 -30px 300px;
    width: 722px;
    height: 329px;
}
.b_ville {
     padding-top: 200px;
}
.b_ville .ill_ville {
     height: 181px;
     bottom: 9vw;
     margin: 0;
     position: absolute;
     left: 0;
    width: 100%;
}
    body .ariane p::before {
    height: 0.5vw;
    width: 0.5vw;
    margin: 0 0.2vw 0 0.4vw;
}
}
/* MIN 1240 */
@media all and (min-width:1470px) {
.flex .ill_plan_cerveau {
    width:554px;
     height: 402px;
    margin-right: -5vw;
    right:auto;
}
}
@media all and (min-width:1600px) {
     html {
        font-size: 0.9vw;
    }
    .b_is > a {
           width: 33vw;
    height: 16vw;
}
   
}
@media all and (min-width:1900px) {
     html {
        font-size: 0.8vw;
    }
    .front h1 {
    margin: 7vw 0 5vw 0;
}
    .b_is > a {
           width: 30vw;
    height: 14vw;
}
}
/* MIN */
@media all and (max-width:989px) {
    html {
        font-size:1.5vw;
      }
     .b_is {
       display: block
      }
    .b_is > a {
       width:70vw;
       height: auto;
       margin:8vw 0;
       border-radius: 25px;
       min-height: 25vw;
      }
}
/* deb 767 */
@media all and (max-width:767px) {
    html {
        font-size:2vw;
      }
    body.menu_open {
        overflow: hidden;
    }
    header .menu_ordi {
        display: none;
    }
    body.menu_open .menu_ordi .bt_home,
    .fermer_dialog {
        display: block;
    }
    body.menu_open header .menu_ordi,
    .menu_smart {
        display: flex;
    }
    header {
        z-index: 100;
        width: auto;
    }
    .fond.abs {
        bottom:15%;
}
    .fond.abs::before {
  bottom: 0;
        background: linear-gradient(to bottom,var(--box),rgba(var(--rgba),var(--rgba),var(--rgba),0));
}
    .head.sticky {
  top: 3vw;
}
     .head.sticky .logo {
    width: 35px;
    height: 35px;
    margin-top: -3.5vw;
         margin-left: -6vw;
  }
    .head.sticky > div {
  border-radius: 4vw;
  box-shadow: 0 0 12px var(--color);
        width:100px;
}
    .head.sticky .bt_menu {
    padding:1vw 0;
  }
    body.menu_open .menu_ordi {
        flex-direction: column-reverse;
        justify-content: flex-end;
        position: fixed;
        top:0;
        left:0;
        width:100%;
        height: 100%;
        z-index: 2000;
        background: rgba(var(--rgba),var(--rgba),var(--rgba),0.97);
        border-radius: 0;
    }
    body.menu_open .menu_ordi .logo {
        position: absolute;
        left:1rem;
        top:0.5rem;
        margin:0;
        height: 10vw;
        width: 10vw;
    }
    body.menu_open footer {
  bottom:2vw;
  position: fixed;
}
    .effets, .navi ul {
        flex-direction: column;
    }
    .menu_smart {
        width: 25%;
        margin: auto;
        display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(var(--rgba),var(--rgba),var(--rgba),0.7);
    border-radius:6vw;
    padding: 0 1vw; 
    }
    .menu_smart .logo {
        margin: -4vw 0 -3vw -12vw;
    width: 13vw;
    height: 13vw;
  }
    .bt_menu {
        margin-left:2vw;
        font-size: 120%;
      }
    body .menu_ordi .effets button,
    body .menu_ordi .bt_home,
    body .menu_ordi .navi a {
        
    }
    body.menu_open .menu_ordi .bt_home {
        margin-top:3rem;
    }
    ul.listFontSizes li.img span {
        width:25px;
        height: 25px;
      }
    .fermer_dialog {
        position: absolute;
        right:1.5rem;
        top:1rem;
    }
    .fermer_dialog span {
        display: block;
        width:20px;
        height:20px;
        mask-image: url('../images/croix.svg');
    mask-repeat:no-repeat;
    mask-size:contain;
    background-color: var(--text);
    }
    
    .b_is span span {
  font-size: 130%;
}
    ul.listFontSizes {
        margin:3vw 0 2vw 0;
    }
    ul.listFontSizes li.tosize button {
        margin:0px;
        position: relative
    }
    ul.listFontSizes li.tosize button span {
        top:0;
        position: absolute;
    }
    .effets .mode button span,
    ul.listFontSizes li.tosize button span,
      ul.listFontSizes li.tosize button, 
      ul.listFontSizes li.tosize {
        width: 25px;
        height: 25px;
      }
    body .bt_home.active {
        color:#FFF;
      }
    .b_carnot .box_text, .b_barile .box_text {
  width: 100%;
}
    .effets button,
    .bt_home,
    .navi ul li a {
  padding:3vw 1vw;
         font-size: 130%;
}
     .front h1 {
    margin: 10vw 0 7vw 0;
  }
    .box .ill_mogador {
    margin-left:34vw;
}
    h1 {
        font-size:300%;
    }
    h2 {
        font-size:260%;
    }
    h3 {
        font-size:160%;
    }
    .box_blueway,
    .box_docpro,
    .flex2, .flex3 {
        display:block;
        height:auto;
    }
    .flex2 > div, .flex3 > div {
        width:100%;
    }
    .box_docpro .web_visu {
    width: 100%;
}
    .box_docpro .web_visu,
    .web_visu,
    .flex2 .web_visu,
    .flex3 .web_visu {
    height: 45vw;
        margin-bottom:1.5vw;
}
    .zone_web .box_docpro {
        padding:2vw;
    }
    .zone_web .box_web {
        margin:6vw 0;
    }
    .box_docpro .web_text {
    width: 100%;
    margin-right: 0%;
}
    .box_blueway {
        background-size: auto 100%;
    }
    .box_blueway .web_text {
    font-size: 1.1em;
    padding: 1vw 2vw;
}
    .zone_web h2 img {
    width: 80vw;
}
    .zone_anakrys h2 img {
    width: 70vw;
}
    .zone_myth h2 img {
  width:30vw;
}
   .global {
  padding-top: 9vw;
} 
    .flex .ill_plan_cerveau {
     margin-right: 0;
     right: 2vw;
        width:54vw;
        height: 36vw;
        margin-top:-3vw;
}
    .b_cerveau2 .flex {
  justify-content: flex-start;
        margin-bottom: 4vw;
}
    .box .ill_titeuf {
  width: 56vw;
  height: 35vw;
  margin: -2vw 0 -2vw 0;
}
     
}
/* fin 767 */
/* deb 639 */
@media all and (max-width:639px) {
 html {
        font-size: 2.8vw;
      }
    .b_colibri .visu.ps2 {
        display: none;
      }
    .front h1 {
    font-size: 230%;
  }
     .b_is > a {
       width:80vw;
       padding: 6vw 4vw;
       margin: 9vw 0;
      }
    .b_i_web::after {
  left: 60%;
  top: 38%;
        height: 70%;
  width:35%;
}
.b_i_design::after {
  left:2%;
  top: -2%;
  height: 105%;
  width: 50%;
}
    .ariane {
        margin:6vw 0 8vw 0;
    }
    .b_culture > .flex,
    .flex_logos {
        flex-direction: column;
    }
    .box {
        position: relative;
        padding: 3.4vw;
  margin: 0 auto6vw auto;
    }
    .box.b_cerveau2 {
  margin-bottom: 0;
}
    .box.b_mogador {
        padding-top:16vw;
        margin-top:18vw;
    }
    .box .ill_mogador {
        top:-5vw;
        margin-left: 15vw;
        width: 65vw;
  height: 33vw;
  }
    .box.b_ge .flex {
        display: block;
    }
    .box .ill_ge {
  width: 100%;
  height: 57.5vw;
  margin: 0 0 3vw 0;
  border-radius: var(--radius);
}
    .b_colibri .flex_logos {
        display: block
    }
    .b_colibri .flex_logos .flex {
  margin-top:0;
}
    .b_colibri .flex_logos .flex.by4 {
  margin-top:2.5vw;
}
    .b_barile .box_text,
    .b_colibri .box_text {
        position: absolute;
        top:4vw;
        left:51%;
    }
     .b_barile .box_text {
        left:3.4vw;
         max-width: 40vw
    }
    .flex_logos .flex.by2 {
    align-items: flex-end
  }
     .b_culture {
    width: auto;
    display: inline-block;
  }
    .b_barile {
  justify-content: flex-start;
        margin-top: 0;
      }
      .box div.fl_c2,
      .box .fl_c1 {
       width:100%;
      }
      .b_carnot .box_text, .b_barile .box_text {
        text-align:left;
      }
      .b_carnot .visu {
        border-radius: 1vw;
          height: 19vw;
      }
      .visu {
        border-radius: 1.2vw;
        height: 19vw;
          width: 19vw;
      }
      .visu_large {
        height: 36.5vw;
        width: 40.5vw;
      }
    .flex_logos .flex {
  gap: 2.4vw;
}
      .box p {
        margin: 1vw 0;
      }
      form {
        max-width:80vw;
      }
      input, select, textarea {
        padding: 1vw 3vw;
      }
      label {
        margin: 3vw 0 0.6vw 0;
      }
    .b_anim .box_text {
  left:0;
  width: 100%;
        display: block;
}
    .b_anim .box_text::before {
  left:0;
  top:0;
        position: relative;
        width:100%;
}
    body .global footer a {
  padding: 0 2vw;
}
    .flex_ill {
        flex-direction:column;
    }
    .by3 .ill,
    .by2 .ill {
    width: 100%;
    height: 52vw;
    margin:6vw auto 2vw auto;
}
    .by3 .ill_lex_cellule {
        margin-top:0
}
    .b_anim {
        margin-top:10vw;
    }
    .b_carnot {
        margin-bottom:0
    }
    .box .ill_titeuf {
    width: 100%;
    height: 54vw;
    margin: 0vw 0 -9vw 0;
}
    .by2 .ill_systeme {
    height: 68vw;
}
    .flex .ill_plan_cerveau {
    width: 100%;
    height: 54vw;
    margin-right: 0;
    position:relative;
}
    h1 {
        font-size:230%;
    }
    h2 {
        font-size:210%;
        margin: 10vw 0 4vw 0;
    }
    h3 {
        font-size:140%;
    }
    .contact .h3 {
  font-size: 110%;
}
    .b_ville {
     padding-top: 6vw;
}
    body.liens .box {
  display: block;
  height: auto;
  margin: 6vw auto;
  width:100%;
}
    body.liens .box .text {
  width:100%;
  padding: 0 0 3vw 0;
}
    body.liens .box .img {
  width: 100%;
}
}
/* fin 639 */
/* deb 500 */
@media all and (max-width:500px) {
    html {
        font-size: 3.2vw;
      }
     .b_is > a {
         margin:8vw 0;
      }
    .front h1 {
    max-width:none;
    margin: 14vw 0 12vw 0;
  }
    .retourHaut {
  height: 9vw;
  width: 9vw;
}
    .b_i_web > span {
  padding-right: 35%;
}
    footer {
        padding:13vw 0;
    }
    .box_blueway {
  background-size:auto 70%;
}
    body .ariane p::before {
  height: 2vw;
  width: 2vw;
  margin: 0 0.2vw 0 2vw;
}
}
/* fin 500 */
/* deb 359 */
@media all and (max-width:359px) {
    html {
        font-size: 4vw;
      }
     .front h1 {
    font-size: 200%;
  }
     .b_is span span {
    font-size: 120%;
  }
    .b_barile .box_text {
    top: 0vw;
  }
    .b_barile {
        margin-top:5vw;
        margin-bottom: 8vw;
    }
    
}
/* fin 359 */