h3                                                                                          {text-transform: uppercase; font-size: 30px; color: var(--color_theme_hv); line-height: 0.9em; margin: 0px 0px 40px 0px; text-align: left;}
h4                                                                                          {text-transform: uppercase; font-size: 25px; color: var(--color_theme_hv); line-height: 0.9em; margin: 0px 0px 40px 0px; text-align: left;}
.row .col.s11                                                                               {width: 100% !important;}

.synapse-image-texte                                                                        {display: block; width: 100%; background: url('../img/fond/back_paternblue.png') repeat; padding: 0px;}
.synapse-image-texte>div>.section>.row                                                      {display: flex; flex-flow: row nowrap; align-items: center; }
.synapse-image-texte.synapse-image-right>div>.section>.row                                  {flex-direction: row-reverse;}
.synapse-image-texte>div>.section>.row>.col                                                 {float: none; flex: 0 0 50%; width: 50%; min-width: 0; }
.synapse-image-texte .synapse-image-texte-media img                                         {display: block; width: 100%; max-width: 100%; height: auto; border-radius: var(--border_rad);}
.synapse-image-texte .synapse-image-texte-content                                           {padding: 24px 0px; overflow-wrap: anywhere;}

.synapse-video                                                                              {min-width:0;}
.synapse-video > figure                                                                     {margin:0; width:100%;}
.synapse-video video                                                                        {display:block; width:100%; max-width:100%; height:auto; background:#000;}
.synapse-video .synapse-video-frame                                                         {position:relative; width:100%; aspect-ratio:16 / 9; min-height:200px; background:#000;}
.synapse-video .synapse-video-frame iframe                                                  {position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0;}
.synapse-video figcaption                                                                   {margin-top:12px; line-height:1.5; overflow-wrap:anywhere;}

.synapse-vr-cards                                                                           {display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 24px; }
.synapse-vr-cards .card                                                                     {width: 100%; max-width: 320px; border-radius:var(--border_rad);}
.synapse-vr-cards .card .card-image img                                                     {border-top-left-radius: var(--border_rad); border-top-right-radius: var(--border_rad);}
.synapse-vr-cards .card .card-content .card-title                                           {text-transform: uppercase; font-size: 30px; color: var(--color_theme_hv); line-height: 0.9em; margin: 0px 0px 20px 0px; text-align: left;}
.synapse-vr-cards .card .card-content                                                       {flex: 1;}
.synapse-vr-cards .card .card-action                                                        {margin-top: auto;}

.synapse-vr-cards .card                                                                     {flex: 1 1 calc((100% - 72px) / 4); min-width: min(220px, 100%); max-width: 320px; margin: 0; border-radius: var(--border_rad);}
.synapse-hz-cards .card-hz                                                                  {width: 100%; border-radius:var(--border_rad);}
.synapse-hz-cards .card-hz .card.horizontal .card-image                                     {max-width:320px; border-radius: var(--border_rad);}
.synapse-hz-cards .card-hz .card.horizontal .card-image img                                 {border-top-left-radius: var(--border_rad); border-bottom-left-radius:var(--border_rad);}
.synapse-hz-cards .card-hz .card .card-content                                              {min-height: unset !important;}

.bandeaumaster                                                                              {display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center; position: relative; overflow: hidden;}
.bandeaumaster .container                                                                   {width:80%; height:100%; margin:130px auto 0px auto; display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center; position: relative;}
.bandeaumaster .container h1                                                                {font-size: 3vw; line-height:0.9em; font-weight: 900; text-transform: uppercase; width:100%; height:auto; display:block; margin:0px; z-index: 10; position: relative;}
.bandeaumaster .container h2                                                                {text-align:center; animation: ease move_photo 1.3s 1.4s forwards; transform:translate(500px,0px); opacity: 0; margin: 20px auto 0px auto;}
.bandeaumaster .container p                                                                 {text-align:center; animation: ease move_photo 1.6s 1.6s forwards; transform:translate(500px,0px); opacity: 0; font-size: 20px; color: var(--color_theme_hv);}

.btnspec                                                                                    {border-radius:var(--border_rad); font-size: 22px; text-align: center; line-height: normal; height: auto; padding:8px 25px; position: relative; display: block; max-width: 300px; width:100%;} 
.btnspec:after                                                                              {content: ""; position: absolute; left: 95%; top:0px; width: 100%; height: 100%; background: var(--background_body1); opacity: 0.2; border-radius: var(--border_rad); transition: all .3s ease;}
.btnspec:hover span                                                                         {color:#fff; position: relative; z-index: 5;}
.btnspec:hover:after                                                                        {opacity:1; top:0px; left:0px; z-index:4;}

@keyframes move_photo                                                                       {to {transform:translate(0px,0px); opacity:1;}}

@media screen and (max-width: 639px) {
    .synapse-vr-cards .card                                                                {flex: 1 1 100%; max-width: 100%;}
    .synapse-video .synapse-video-frame                                                     {min-height: 0;}
}

@media screen and (max-width:959px) {
    .synapse-image-texte>div>.section>.row                                                  {flex-direction: column;}
    .synapse-image-texte.synapse-image-right>div>.section>.row                              {flex-direction: column;}
    .synapse-image-texte>div>.section>.row>.col                                             {flex: 0 0 100%; width: 100%; max-width: 100%;}
    .synapse-image-texte .synapse-image-texte-content                                       {padding: 20px 16px;}
    .synapse-hz-cards .card-hz .card.horizontal                                             {flex-direction: column;}
    .synapse-hz-cards .card-hz .card.horizontal .card-image                                 {width: 100%; max-width: none;}
    .synapse-hz-cards .card-hz .card.horizontal .card-image img                             {display: block; width: 100%; height: auto; border-radius: var(--border_rad) var(--border_rad) 0 0;}
    .parallax-container .parallax                                                            {min-height: 0 !important;}
}

@media screen and (max-width:479px) {
    h3                                                                                      {font-size: 22px; line-height: 1.08; margin-bottom: 24px;}
    h4                                                                                      {font-size: 20px; line-height: 1.08; margin-bottom: 24px;}
    .bandeaumaster                                                                          {min-height: clamp(350px, 70svh, 520px) !important;}
    .bandeaumaster .container                                                               {width: 90%; margin-top: 64px;}
    .bandeaumaster .container h1                                                            {font-size: clamp(30px, 9vw, 38px); line-height: 1;}
    .bandeaumaster .container h2                                                            {font-size: clamp(23px, 7vw, 29px); line-height: 1.05;}
    .bandeaumaster .container p                                                             {font-size: 16px; line-height: 1.35;}
    .synapse-vr-cards                                                                        {gap: 18px;}
    .synapse-vr-cards .card .card-content .card-title                                       {font-size: 26px;}
    .btnspec                                                                                {font-size: 19px;}
}

@media screen and (min-width:480px) and (max-width:639px) {
    h3                                                                                      {font-size: 25px; line-height: 1.08; margin-bottom: 28px;}
    h4                                                                                      {font-size: 23px; line-height: 1.08; margin-bottom: 28px;}
    .bandeaumaster                                                                          {min-height: clamp(390px, 68svh, 540px) !important;}
    .bandeaumaster .container                                                               {width: 88%; margin-top: 76px;}
    .bandeaumaster .container h1                                                            {font-size: clamp(35px, 7vw, 43px); line-height: 1;}
    .bandeaumaster .container h2                                                            {font-size: 28px; line-height: 1.05;}
    .synapse-vr-cards                                                                        {gap: 20px;}
}

@media screen and (min-width:640px) and (max-width:799px) {
    h3                                                                                      {font-size: 28px; margin-bottom: 30px;}
    h4                                                                                      {font-size: 25px; margin-bottom: 30px;}
    .bandeaumaster                                                                          {min-height: clamp(420px, 60svh, 570px) !important;}
    .bandeaumaster .container                                                               {width: 85%; margin-top: 90px;}
    .bandeaumaster .container h1                                                            {font-size: 42px;}
    .bandeaumaster .container h2                                                            {font-size: 30px;}
    .synapse-vr-cards .card                                                                 {flex-basis: calc((100% - 24px) / 2);}
}

@media screen and (min-width:800px) and (max-width:959px) {
    h3                                                                                      {font-size: 31px; margin-bottom: 34px;}
    h4                                                                                      {font-size: 27px; margin-bottom: 34px;}
    .bandeaumaster                                                                          {min-height: clamp(460px, 58svh, 620px) !important;}
    .bandeaumaster .container                                                               {width: 85%; margin-top: 105px;}
    .bandeaumaster .container h1                                                            {font-size: 44px;}
    .bandeaumaster .container h2                                                            {font-size: 32px;}
    .synapse-vr-cards .card                                                                 {flex-basis: calc((100% - 48px) / 3);}
}

@media screen and (min-width:960px) and (max-width:1023px) {
    .bandeaumaster .container                                                               {width: 85%; margin-top: 110px;}
    .bandeaumaster .container h1                                                            {font-size: 42px;}
    .synapse-image-texte .synapse-image-texte-content                                       {padding: 20px 16px;}
}

@media screen and (min-width:1024px) and (max-width:1279px) {
    .bandeaumaster .container h1                                                            {font-size: clamp(35px, 3.5vw, 44px);}
}