/* ====== RESET ====== */
:root {
    --poppins-font: "Poppins",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;
    --main-color: #f28e22;
}
.page-gamer {--main-color: #e60000;background: #111}
.page-contrat {background: #111}
.page-apple {--main-color: #999}
*,*::before,*::after {box-sizing: border-box;margin:0;padding:0}
::-webkit-scrollbar {width: 8px;height: 8px}
::-webkit-scrollbar-track {background: #222;border-radius: 10px}
::-webkit-scrollbar-thumb {background: #444;border-radius: 10px}
::-webkit-scrollbar-thumb:hover {background: #666}
::selection {color: white;background: var(--main-color)}
html,body {min-width: 320px;scroll-behavior: smooth;scroll-padding-top: 120px;-webkit-tap-highlight-color: transparent;font-family: var(--poppins-font);background: #f8f8f8;color:#1C1C1C;}
body.no-scroll {
    overflow: hidden;
}
a,a:visited, a:hover, a:active {text-decoration: none;color: inherit;outline: none;transition: all 200ms ease-in-out}
button {outline: none;border:none;transition: all 200ms ease-in-out;cursor:pointer;font-family: var(--poppins-font)}
ul li{list-style-type: none;font-size:1rem;color: #1c1c1c;}
ul.check li {list-style-image: url('../img/check.svg');margin-left:24px;margin-bottom:8px;padding-left: 2px}
.page-gamer ul.check li {list-style-image: url(../img/check-red.svg);margin-left:24px;margin-bottom:8px;padding-left: 2px}
.page-apple ul.check li {list-style-image: url(../img/check-grey.svg);margin-left:24px;margin-bottom:8px;padding-left: 2px}
ul.disc li {list-style-type: disc;padding: 10px 0 10px 2px;margin-left:14px;border-bottom: 1px solid rgba(0, 0, 0, .05)}
ul.disc li:last-child {border: none}
ul.disc li::marker {color: var(--main-color)}
ul.number li {display: block}
ul.number li .number-num {display: inline-block;width: 50px;font-size: 2rem;font-weight: 600;color:#fff;background:var(--main-color);text-align: center;vertical-align: top;border-radius: 2px}
ul.number li .number-txt {display: inline-block;width: calc(100% - 85px);margin-left: 30px;vertical-align: top}
ul.number li .number-txt h4 {margin-bottom: 10px;font-size:1rem}
picture {display:block}
img {max-width:100%}
h1,h2,h3,h4,h5,h6 {line-height: 1.2}
p {font-size:1rem;line-height: 1.5;color: #1c1c1c;}
p.small {font-size:.9rem;line-height: 1.5;color: #1c1c1c;}
.center {text-align: center;}
p, h1, h2, h3, h4, h5, h6, blockquote, li, label {
  widows: 2;
  orphans: 2;
}
@media (max-width:1920px){
  ul li{font-size:.95rem}
  p {font-size:.95rem}
  p.small {font-size:.9rem;}
}
@media (max-width:768px){
  ul.number li {text-align: center;}
  ul.number li .number-num {display: block;margin:0 auto 20px auto}
  ul.number li .number-txt {display: block;width: 100%;margin-left: 0}
}

span.message-romo {background-color: #e60000;display: block;padding: 10px 20px;text-align: center;color:#fff}
span.message-romo p {color:#fff;opacity: .8;}
/*
/*
/* ====== LAYOUT ====== */

/* ------ Container ------ */
main#accueil {margin-top: 130px;transition: margin-top 200ms ease-in-out}
main#accueil.stickyON {margin-top:60px;transition: margin-top 200ms ease-in-out}
main#accueil.stickyOFF {margin-top:130px;transition: margin-top 200ms ease-in-out}
.container {max-width: 1230px;margin:0 auto;}
.container-fluid,.contentmenu {width: 100%; margin: 0 auto;padding: 0 2%;max-width: 1480px}
@media (max-width:1366px){
  .container {max-width: 1024px}
}
@media (max-width:1199px){
  .container,.container-fluid {padding: 0 50px}
}
@media (max-width:1024px){
  .contentmenu {padding: 0 2%}
}
@media (max-width:768px){
  .container,.container-fluid {padding: 0 25px}
}

/* ====== Title ====== */
.title h2 {color: #333;font-size: 2rem;margin-bottom: 10px;letter-spacing: -.5px;}
.title h2 span {color:var(--main-color)}
.title h3 {color:var(--main-color);font-weight:500;letter-spacing: -.25px;}
.title hr {border:0;height:3px;width:80px;background:var(--main-color);margin: 25px 0}
.title hr.small {height: 1px;background-color: rgba(0, 0, 0, .1);border: none;width: 100%;margin: 20px auto}
.title p span {color: #a87eb4;font-size:.9rem}
.title a {display: block;margin-top: 40px;}
.title.center {text-align: center;}
.title.center hr {margin:25px auto 50px auto}
.sec_main {background-color: #fff;box-shadow: 0 0 75px rgba(242, 142, 34, 0.29);border-radius:20px;padding:70px 60px;border: 10px solid rgba(242, 142, 34, 0.2);position:relative;z-index:2}
.sec_secondary {border: 1px solid  rgba(242, 142, 34, 0.5);padding: 60px 50px;background: #fff;border-radius:10px;transition: transform 0.3s ease, box-shadow 0.3s ease}
.sec_secondary:hover {transform: translateY(-8px);box-shadow: 0 8px 20px rgba(242, 142, 34, 0.29)}
@media (max-width:1920px){
  .title h2 {font-size: 1.8rem}
  .title h3 {font-size: 1rem}
}
@media (max-width:1199px){
  .sec_main {border-radius:0px;box-shadow:none;border:none;padding:70px 50px}
  .sec_secondary {border: none;padding: 60px 50px;border-radius:0px}
  .sec_secondary:hover {transform: none;box-shadow:none}
}
@media (max-width:768px){
  .sec_main {padding:70px 25px}
  .sec_secondary {padding: 60px 25px;}
}

/* ------ ss-Hero ------ */
#ss-hero {padding: 40px 0 35px 0;background: #151515;margin-top: 130px;transition: margin-top 200ms ease-in-out}
#ss-hero.stickyON {margin-top:60px;transition: margin-top 200ms ease-in-out}
#ss-hero.stickyOFF {margin-top:130px;transition: margin-top 200ms ease-in-out}
#ss-hero .container {position: relative}
#ss-hero .grid {grid-template-columns: 100px 1fr}
#ss-hero picture {height: 80px;width: 80px;display: inline-block;vertical-align: middle;margin-right: 25px}
#ss-hero picture img {height: 80px;width: 80px;border-radius: 50%;}
#ss-hero .title {display: inline-block;vertical-align: middle}
#ss-hero .title h1 {color: #fff;letter-spacing: -.5px}
#ss-hero .title p {font-size: 1rem;font-weight: 400;color:var(--main-color);letter-spacing: 0}
#ss-hero .navigation {position: absolute;right: 10px;top:-10px;display: flex;align-items: center;gap: 20px}
#ss-hero .navigation .number {font-size:4rem;font-weight:700;opacity:.25;color:#f9f9f9}
#ss-hero .navigation .arrow {position: relative;width: 10px;height: 40px;display: flex;align-items: center;justify-content: center}
#ss-hero .navigation .left-arrow::before, #ss-hero .navigation .right-arrow::before {content: "";position: absolute;width: 0;height: 0;border-style: solid}
#ss-hero .navigation .left-arrow::before {border-width: 10px 15px 10px 0;border-color: transparent #f9f9f9 transparent transparent;opacity:.15;}
#ss-hero .navigation .right-arrow::before {border-width: 10px 0 10px 15px;border-color: transparent transparent transparent #f9f9f9;opacity:.15;}
#ss-hero .navigation .arrow:hover::before {border-color: transparent var(--main-color) transparent transparent;opacity:.85;transition: border-color 0.3s,opacity 0.3s}
#ss-hero .navigation .right-arrow:hover::before {border-color: transparent transparent transparent var(--main-color);opacity:.85;transition: border-color 0.3s,opacity 0.3s}
.page-gamer #ss-hero,.page-contrat #ss-hero {background: #000;}
.page-gamer #ss-hero .title h1 {color: #fff;}
@media (max-width:1024px){
  #ss-hero {padding: 20px 0;text-align: center;}
  #ss-hero picture {height: 50px;width: 50px;display: block;margin: 0 auto 10px auto}
  #ss-hero picture img {height: 50px;width: 50px;}
  #ss-hero .navigation {display: none;}
}
@media (max-width:768px){
  #ss-hero .title h1 {font-size: 1.5rem;} 
  #ss-hero .title p {font-size: 1rem;}
}

/* ------ Fil d'Arianne ------ */
#breadcrumb {background: #fff;margin: 0;padding:10px 0;color: #333;border-top: 1px solid rgba(0, 0, 0, .05)}
#breadcrumb span {opacity: .25;font-size: .8rem;}
#breadcrumb a {font-size: .8rem;padding:10px 0}
#breadcrumb a:hover {text-decoration:underline;text-underline-offset:2px}
#breadcrumb span.actif {color:var(--main-color);text-decoration:underline;text-underline-offset:2px;opacity: 1}
.page-contrat #breadcrumb {color: #ddd;background: #111}
.page-gamer #breadcrumb {color: #ddd;background: #111}
.page-list #breadcrumb {background: #f8f8f8;}
@media (max-width:1024px){
  #breadcrumb {text-align: center;}
}
@media (max-width:768px){
  #breadcrumb span {font-size: .7rem;}
  #breadcrumb a {font-size: .7rem}
}

/* ------ Grid ------ */
.grid {display: grid;gap: 20px;width: 100%}
.grid.grid-2 {grid-template-columns: 1fr 1fr}
.grid.grid-3 {grid-template-columns: 1fr 1fr 1fr}
.grid.grid-4 {grid-template-columns: 1fr 1fr 1fr 1fr}
.grid.grid-5 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr}
.grid.grid-6 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr}
.grid.grid-2-1 {grid-template-columns: 2fr 1fr}
.grid.grid-3-1 {grid-template-columns: 3fr 1fr}
.grid.grid-4-1 {grid-template-columns: 4fr 1fr}
.grid.grid-5-1 {grid-template-columns: 5fr 1fr}
.grid.grid-1-2 {grid-template-columns: 1fr 2fr}
.grid.grid-1-3 {grid-template-columns: 1fr 3fr}
.grid.grid-1-4 {grid-template-columns: 1fr 4fr}
.grid.grid-1-5 {grid-template-columns: 1fr 5fr}

/* ------ Overlay ------ */
#overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color:rgba(214,131,42,.1);backdrop-filter: blur(2px);display: none}
#overlay.open-modal {display: block;z-index: 998}
#overlay.open-navbar {display: block;z-index: 996}

/* ------ MENU ------ */
#top-bar {font-size: .75rem;position: relative;z-index: 999;}
#top-bar {background: #1C1C1C;color:#fff;padding:6px 0;position: fixed;top:0;width:100%;height:30px;}
#top-bar nav {width: 100%;}
#top-bar nav:last-child {text-align: right}
#top-bar ul li {display: inline-block;vertical-align: top;font-size: inherit;color:#fff}
#top-bar ul li:first-child {font-size: .7rem;margin-top: 1px;}
#top-bar ul.social-links li {margin-right: 10px}
#top-bar ul.contact-links li {margin-left: 10px}
#top-bar ul.social-links li a,#top-bar ul.contact-links li a {display: inline-flex;align-items: center;gap: 0.3em}
#top-bar ul li a:hover,#top-bar ul li a.actif {color:var(--main-color)}
#top-bar ul.contact-links li svg {fill: var(--main-color)}
#top-bar ul.contact-links li:last-child svg {fill: none;stroke:var(--main-color)}
#menu {width: 100%;background:#fff;height:100px;position: fixed;top:30px;box-shadow: 0px 0px 20px rgba(0, 0, 0, .15);z-index: 999;}
#menu .grid-menu {grid-template-columns: 70px 1fr;height:100%;gap:0}
#menu .grid-menu .grid-item {display: flex;align-items: center;}
.menu_1 img.logo {width: 63px;height: 50px}
.menu_2 {display: flex;align-items: center;justify-content: right;height: 100%}
.menu_2 nav {display: flex;gap: 0px;align-items: center}
.menu_2 nav ul.main-menu > li {display: inline-block;vertical-align:middle}
.menu_2 nav ul.main-menu li.mobilemenu {display: none;}
.menu_2 nav ul.main-menu > li > a {display: flex;height: 100%;font-size: .9rem;font-weight: 500;color:#333;position: relative}
.menu_2 nav ul.main-menu > li > a svg.gamer-icon {height: 12px;width: auto;margin-right: 4px} 
.menu_2 nav ul.main-menu > li > a svg.arrow {height: 15px;width: 15px;margin:2px -5px 0 5px;fill: var(--main-color)}
.menu_2 nav ul.main-menu > li > a svg.apple {height: 12px;width: auto;margin-right: 3px}
.menu_2 nav ul.main-menu > li > a {padding: 12px 22px;height:100px;transition: height 200ms ease-in-out, color 200ms ease-in-out}
.menu_2 nav ul.main-menu > li > a.actif {color: var(--main-color);}
.menu_2 nav ul.main-menu > li > a:hover {color: var(--main-color);}
.menu_2 nav ul.main-menu > li:last-child > a {background: var(--main-color);height: auto;color:#fff;border-radius:  10px;margin:0 0 0 20px;border:2px solid var(--main-color);padding: 12px 25px;transition: color 200ms ease-in-out, background 200ms ease-in-out}
.menu_2 nav ul.main-menu > li:last-child > a:hover {background:transparent;color:var(--main-color)}
.menu_2 nav a#link-particuliers svg.arrow,.menu_2 nav a#link-entreprises svg.arrow,.menu_2 nav a#link-boutiques svg.arrow {transition: transform 300ms ease-in-out}
.menu_2 nav a#link-particuliers.clic svg.arrow,.menu_2 nav a#link-entreprises.clic svg.arrow,.menu_2 nav a#link-boutiques.clic svg.arrow {transform: rotate(-180deg)}
.menu_2 nav a#link-particuliers.actif,.menu_2 nav a#link-entreprises.actif,.menu_2 nav a#link-boutiques.actif, 
.menu_2 nav a#link-particuliers.clic,.menu_2 nav a#link-entreprises.clic,.menu_2 nav a#link-boutiques.clic {color:var(--main-color)}
.mega-menu .grid-mega-menu {grid-template-columns: 1fr;gap:0px}
.mega-menu {display: none;max-height: 0;position: absolute;top: 100%;left: auto;width: auto;z-index: 99;opacity: 0;background: #fff;padding: 0px 40px 20px 25px;transition: max-height 400ms ease,opacity 400ms ease;box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1)}
.mega-menu.open {display: block;max-height: 500px;opacity: 1;transition: max-height 400ms ease,opacity 400ms ease;animation: slideDown 0.4s ease}
.mega-menu ul {list-style-type: none;padding: 0;margin: 0 auto}
.mega-menu ul li a {display: block;color:#555;padding: 8px 0;font-size:.9rem}
.mega-menu ul li a span {color :var(--main-color);font-size:.8rem;font-weight:600;margin-right:8px}
.mega-menu ul li a:hover {transition: color 200ms ease-in-out;color: var(--main-color)}
.mega-menu ul li a.actif {color:var(--main-color)}
#mega-menu-particuliers ul li a:last-child {position: absolute;width: 100%;background: #a87eb4;margin: 10px 0 0 -25px;padding: 15px 25px;font-weight: bold;color:#fff;border-radius:0px;transition: background 200ms ease-in-out}
#mega-menu-particuliers ul li a:last-child:hover {background: #9B75A6}
#mega-menu-particuliers svg {display: inline-block;vertical-align: middle;margin: 0px 3px 0 0}
#mega-menu-boutiques svg {display: inline-block;vertical-align: middle;margin-bottom:3px;fill: var(--main-color);}
.hamburger-container {display: none}
#menu.stickyON {height: 70px;top:0;transition: top 200ms ease-in-out, height 200ms ease-in-out;}
#menu.stickyON .menu_2 nav ul.main-menu > li > a {height:70px}
#menu.stickyON .menu_2 nav ul.main-menu > li:last-child > a {height:auto}
#menu.stickyOFF {height: 100px;top:30px;transition: top 200ms ease-in-out, height 200ms ease-in-out;}
.page-gamer #menu{background:#111}
.page-gamer #top-bar {background: #000}
.page-gamer .menu_2 nav ul.main-menu > li > a {color:#eee}
.page-gamer .menu_2 nav ul.main-menu > li > a:hover {color:#e60000}
.page-gamer .menu_2 nav ul.main-menu > li > a.actif {color:#e60000}
.page-gamer .mega-menu {background: #111}
.page-gamer .mega-menu ul li a {color:#eee}
.page-gamer .menu_2 ul li {background: #111;}
.page-gamer ul li > a:hover {color: var(--main-color)}
.page-gamer #mega-menu-particuliers ul li a:last-child {background: #cc0202}
.page-gamer #mega-menu-particuliers ul li a:last-child:hover {background: var(--main-color)}
.page-contrat #menu{background:#111}
.page-contrat #top-bar {background: #000}
.page-contrat .menu_2 nav ul.main-menu > li > a {color:#eee}
.page-contrat .menu_2 nav ul.main-menu > li > a:hover {color:#f28e22}
.page-contrat .mega-menu {background: #111}
.page-contrat .mega-menu ul li a {color:#eee}
.page-contrat .menu_2 ul li {background: #111;}
.page-contrat ul li > a:hover {color: var(--main-color)}
.page-contrat #mega-menu-particuliers ul li a:last-child {background: #f28e22}
.page-contrat #mega-menu-particuliers ul li a:last-child:hover {background: var(--main-color)}
.page-apple #mega-menu-particuliers ul li a:last-child {background: #888}
.page-apple #mega-menu-particuliers ul li a:last-child:hover {background: var(--main-color)}
@media (max-width:1366px){
  #top-bar {font-size: .7rem}
  #top-bar ul li:first-child {font-size: .68rem}
  #top-bar ul.social-links li {margin-right: 8px}
  #top-bar ul.contact-links li {margin-left: 8px}
  main#accueil,#ss-hero {margin-top: 110px}
  main#accueil.stickyON,#ss-hero.stickyON {margin-top:60px}
  main#accueil.stickyOFF,#ss-hero.stickyOFF {margin-top:110px}
  #menu {top:30px}
  #menu.stickyON {height: 60px}
  #menu.stickyOFF {height: 80px;top:30px}
  #menu.stickyON .menu_2 nav ul.main-menu > li > a {height:60px}
  #menu.stickyOFF .menu_2 nav ul.main-menu > li > a {height:80px}
  #menu.stickyON .menu_2 nav ul.main-menu > li:last-child > a {height:auto}
  #menu.stickyOFF .menu_2 nav ul.main-menu > li:last-child > a {height:auto}
  .menu_2 nav ul.main-menu > li > a svg.gamer-icon {height: 10px} 
  .menu_2 nav ul.main-menu > li > a svg.arrow {height: 12px;width: 12px;margin:0px -5px 0 3px}
  .menu_2 nav ul.main-menu > li > a svg.apple {height: 10px}
  .menu_2 nav ul.main-menu > li > a {font-size: .8rem}
  .menu_2 nav ul.main-menu > li > a {padding: 12px 14px;height:80px}
  .menu_2 nav ul.main-menu > li:last-child > a {margin:0 10px 0 10px;padding: 12px 16px}
  .menu_2 .icon-link span {font-size: 0.75rem}
  .mega-menu {padding: 0px 16px 16px 16px}
  #mega-menu-particuliers ul li a:last-child {margin: 10px 0 0 -16px}
  .mega-menu ul li a {font-size: .8rem}
}
@media (max-width:1199px){
  #top-bar li i {display: none;}
}

@media (max-width:1024px){
  .menu_2 nav ul.main-menu li.mobilemenu {display: block;}
  main#accueil,#ss-hero {margin-top: 50px}
  main#accueil.stickyON,#ss-hero.stickyON {margin-top:0px}
  main#accueil.stickyOFF,#ss-hero.stickyOFF {margin-top:50px} 
  #menu.stickyOFF .menu_2 nav ul.main-menu > li > a {height:auto}
  #top-bar {display: none}
  #menu.stickyON,#menu.stickyOFF,#menu {height: 50px;position: fixed;top:0;left:0}
  #navbar.open {right: 0px;opacity:1}
  #navbar {right: -350px;opacity:0;overflow-y: auto;transition: right 250ms ease-in-out,opacity 250ms ease-in-out;box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1)} 
  .menu_1 img.logo {width: 38px;height: 30px}
  .menu_2 nav {display: flex;position: absolute;top:50px;background:#fff;border-top: 1px solid #eee}
  .page-gamer .menu_2 nav {display: flex;position: absolute;top:50px;background:#111;border-top: 1px solid #222}
  .page-contrat .menu_2 nav {display: flex;position: absolute;top:50px;background:#111;border-top: 1px solid #222}
  .menu_2 nav ul.main-menu {height: 100vh;overflow-y: auto;}
  .menu_2 nav ul.main-menu > li {display: block;width:350px;border-bottom: 1px solid #eee}
  .page-gamer .menu_2 nav ul.main-menu > li {display: block;width:350px;border-bottom: 1px solid #222}
  .page-contrat .menu_2 nav ul.main-menu > li {display: block;width:350px;border-bottom: 1px solid #222}
  .menu_2 nav ul.main-menu > li:last-child {border-bottom: 0px}
  .menu_2 nav ul.main-menu > li > a {font-size: .9rem}
  .menu_2 nav ul.main-menu > li > a {padding: 15px 20px;height:auto}
  .menu_2 nav ul.main-menu > li,.menu_2 nav ul.main-menu > li:last-child {border-color: var(--main-color);}
  .menu_2 nav ul.main-menu > li,.menu_2 nav ul.main-menu > li:last-child {border:none}
  .menu_2 nav ul.main-menu > li:last-child > a {background:var(--main-color);color:#fff;margin:0;border:0;border-radius: 0;padding: 15px 20px}
  .menu_2 nav ul.main-menu > li:last-child > a:hover {background:var(--main-color);color:#fff}
  .mega-menu {position: relative;top: 0;margin-top: 0px;left: auto;width: auto;padding: 0;box-shadow: none;background:#F9F9F9 }
  .mega-menu ul li a {padding: 8px 0;border-top: 1px solid #eee;padding: 12px 20px;font-size:.85rem}
  .page-gamer .mega-menu ul li a {padding: 8px 0;border-top: 1px solid #111;padding: 12px 20px;font-size:.85rem;background-color: #0c0c0c;}
  .page-contrat .mega-menu ul li a {padding: 8px 0;border-top: 1px solid #111;padding: 12px 20px;font-size:.85rem;background-color: #0c0c0c;}
  #mega-menu-particuliers ul li a:last-child {position: relative;margin: 0;padding: 12px 20px}
  .hamburger-container {display: flex;align-items: center;cursor: pointer}
  .menu-label {font-size: .9rem;margin-right: -10px;color: #333;font-weight: 500}
  .page-gamer .menu-label {color: #fff}
  .page-contrat .menu-label {color: #fff}
  .hamburger {width: 50px;height: 50px;transform: rotate(0deg);transition: .5s ease-in-out;cursor: pointer}
  .hamburger span {display: block;position: absolute;height: 3.2px;width: 40px;background: var(--main-color);border-radius: 5px;right: 0%;margin-top:9px;transform: rotate(0deg);transition: .25s ease-in-out}
  .hamburger span:nth-child(1) {top: 6px;width: 50%}
  .hamburger span:nth-child(2) {top: 14px;width: 50%}
  .hamburger span:nth-child(3) {top: 14px;width: 50%;opacity: 0}
  .hamburger span:nth-child(4) {top: 22px;width: 50%}
  .hamburger.open span:nth-child(1) {top: 12px;width: 0%;left: 50%}
  .hamburger.open span:nth-child(2) {transform: rotate(45deg)}
  .hamburger.open span:nth-child(3) {transform: rotate(-45deg);opacity: 1}
  .hamburger.open span:nth-child(4) {top: 12px;width: 0%;left: 50%}
}

/* ------ Avis ------ */
#avis {padding-top: 100px;padding-bottom: 100px;}
#avis img.logo {height: 80px;position: absolute;top:0;margin-left: -80px;opacity: .5;}
#avis .title {text-align: center;}
#avis .title a {margin-top: 0;display: inline-block;}
#avis .title a small {color:var(--main-color)}
#avis a.avis-link {display: inline-flex;align-items: center;gap: 5px;text-decoration: none}
#avis a.avis-link svg {flex-shrink: 0}
#avis .grid {gap: 40px;position:relative;z-index:2;margin-top: 50px;}
#avis .grid-item {padding:60px 20px;text-align: center;}
#avis .grid-item strong {display: block;}
#avis .grid-item small {display: block;color:#666;margin-bottom: 15px;}

#avis .review-body { position: relative; }
#avis .review-text { display: inline; } /* ou block, selon ton design */

#avis .review-toggle{
  border: 0; background: none; padding: 0; cursor: pointer;
  text-decoration: underline;
  font: inherit;color: var(--main-color);display: block;margin: 0 auto;
}



.page-contrat .title {color:#f9f9f9}
.page-contrat .title h2 {color:#fff}
.page-contrat .carte {background: #333;color:#fff;transition: all 0.3s}
.page-contrat .carte:hover {background: #000;}
.page-contrat .carte p {color: #fff;}
.page-gamer .title {color:#f9f9f9}
.page-gamer .title h2 {color:#fff}
.page-gamer .carte {background: #333;color:#fff;transition: all 0.3s;border-color:rgba(230, 0, 0, 0.5);background: #000;}
.page-gamer .carte:hover {box-shadow: 0 8px 20px rgba(230, 0, 0, 0.29)}
.page-gamer .carte p {color: #fff;}

.page-apple .carte {border-color:rgba(0,0,0,.1)}
.page-apple .carte:hover {box-shadow: 0 8px 20px rgba(0,0,0,.1)}

@media (max-width:1680px){
  #avis .grid {gap: 20px}  
}
@media (max-width:1024px){
  #avis {padding-top: 80px}
  #avis .grid {grid-template-columns: 1fr;} 
}

/* ------ FAQ ------ */
#faq {padding-bottom: 100px;}
#faq .title {text-align: center}
#faq .grid {gap: 20px;position:relative;z-index:2}
#faq .faq-item {margin-bottom: 20px;}
#faq .carte:hover {transform: translateY(-5px);box-shadow: 0 8px 20px rgba(242, 142, 34, 0.29)}
#faq .faq-question button {padding: 20px 25px;width: 100%;font-size: .9rem;color:#1c1c1c;text-align: left;background: inherit}
#faq .faq-question button:hover {color:var(--main-color)}
#faq .faq-question button[aria-expanded="true"] {color: var(--main-color)}
#faq .faq-answer {max-height: 0;overflow: hidden;opacity: 0;transition: max-height 0.3s ease,opacity 0.3s ease;font-size: .9em;font-style: normal}
#faq .faq-answer p {font-size: .95em;color:#555;padding: 0 25px 25px 25px;}
#faq .faq-answer.open {opacity: 1;}
.page-contrat #faq .faq-answer p {color:#fff}
.page-contrat #faq .faq-question button {color:#fff}
.page-contrat #faq .faq-question button:hover {color:var(--main-color)}
.page-contrat #faq .faq-question button[aria-expanded="true"] {color: var(--main-color)}
.page-gamer #faq .faq-answer p {color:#fff}
.page-gamer #faq .faq-question button {color:#fff}
.page-gamer #faq .faq-question button:hover {color:var(--main-color)}
.page-gamer #faq .faq-question button[aria-expanded="true"] {color: var(--main-color)}
.page-gamer #faq .carte:hover {box-shadow: 0 8px 20px rgba(230, 0, 0, 0.29)}
.page-apple #faq .carte:hover {box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1)}
#faq .faq-toggle {position: relative;display: block;width: 100%;padding-right: 40px;background: none;border: none;cursor: pointer}
#faq .faq-toggle::after {content: "+";font-size: 1.1rem;position: absolute;right: 20px;top: 50%;transform: translateY(-50%);transition: transform 0.3s ease}
#faq .faq-toggle[aria-expanded="true"]::after {transform: translateY(-50%) rotate(45deg)}
@media (max-width:1024px){
  #faq {padding-bottom: 80px}
  #faq .grid {grid-template-columns: 1fr;gap:20px}
  #faq .faq-left {margin: 0}
  #faq .faq-right {margin-top: -20px;}
}

/* ------ CTA ------ */
#cta {background: var(--main-color);position: relative; text-align: center;padding: 80px 0}
#cta h2 {color:#fff;margin-bottom: 30px}
#cta h2 span.br {display: none}
#cta p {color:#fff;width: 80%;margin: 0 auto 40px auto;font-size: 1.1rem;}
@media (max-width:1199px){
  #cta p {width: 75%}
}
@media (max-width:768px){
  #cta p {width: 100%} 
  #cta h2 span.sep {display: none}
  #cta h2 span.br {display: inline} 
}

/* ------ FOOTER ------ */
footer {background: #151515;color:#fff}
footer p, footer li {color:#fff}
footer a:hover {color :var(--main-color)}
footer .grid-footer {gap: 0px;grid-template-columns: 1fr 1fr 1fr 1fr;padding: 80px 0}
footer .grid-footer .grid-item {font-size: .9rem;padding: 25px 0;}
footer .grid-footer .grid-item h3 {color :var(--main-color);font-size: 1rem;font-weight: 500;text-transform: uppercase;margin-bottom: 30px;}
footer .grid-footer .grid-item a,
footer .grid-footer .grid-item li,
footer .grid-footer .grid-item p {font-size: inherit;}
footer .grid-footer .grid-item:nth-child(1),
footer .grid-footer .grid-item:nth-child(2),
footer .grid-footer .grid-item:nth-child(3) {border-right:1px solid #333}
footer .grid-footer .grid-item:nth-child(1) {padding-right: 40px}
footer .grid-footer .grid-item:nth-child(1) .newsletter-form {margin: 20px 0}
footer .grid-footer .grid-item:nth-child(1) .newsletter-form input {display:inline-block;vertical-align: middle;width: 60%;}
footer .grid-footer .grid-item:nth-child(1) .newsletter-form button {display:inline-block;vertical-align: middle;padding: 10px 12px 9px 12px;margin-left: 8px;font-size: .75rem;}
footer .grid-footer .grid-item:nth-child(1) .newsletter-form button:hover {background: transparent}
.page-gamer footer .grid-footer .grid-item:nth-child(1) .newsletter-form button,
.page-apple footer .grid-footer .grid-item:nth-child(1) .newsletter-form button {border-color: var(--main-color);background: var(--main-color);}
.page-gamer footer .grid-footer .grid-item:nth-child(1) .newsletter-form button:hover,
.page-apple footer .grid-footer .grid-item:nth-child(1) .newsletter-form button:hover {background: transparent;color:var(--main-color)}
footer .grid-footer .grid-item:nth-child(1) .social-links-footer {display: grid;grid-template-columns: 1fr 1fr;gap: 0px}
footer .grid-footer .grid-item:nth-child(1) .social-links-footer a {display: flex;align-items: center;text-decoration: none;color: inherit;font-size: 14px;padding: 10px 20px;}
footer .grid-footer .grid-item:nth-child(1) .social-links-footer a:hover {color :var(--main-color)}
footer .grid-footer .grid-item:nth-child(1) .social-links-footer svg {margin-right: 8px;flex-shrink: 0;}
footer .grid-footer .grid-item:nth-child(2) address p,
footer .grid-footer .grid-item:nth-child(3) address p {display: flex; align-items: start;font-style: normal;padding-bottom: 15px;margin-bottom: 15px;border-bottom: 1px solid #333;}
footer .grid-footer .grid-item:nth-child(2) address p svg,
footer .grid-footer .grid-item:nth-child(3) address p svg {margin-right: 15px;margin-top: 2px;color :var(--main-color)}
footer .grid-footer .grid-item:nth-child(2) address small,
footer .grid-footer .grid-item:nth-child(3) address small {color:var(--main-color)}
footer .grid-footer .grid-item:nth-child(2) a.decouvrir,
footer .grid-footer .grid-item:nth-child(3) a.decouvrir {margin-left:6px}
footer .grid-footer .grid-item:nth-child(2) a.decouvrir span,
footer .grid-footer .grid-item:nth-child(3) a.decouvrir span {color :var(--main-color);margin-right:14px}
footer .grid-footer .grid-item:nth-child(2) a.decouvrir.actif,
footer .grid-footer .grid-item:nth-child(3) a.decouvrir.actif {color :var(--main-color)}
footer .grid-footer .grid-item:nth-child(2) {padding-left:40px;padding-right:40px}
footer .grid-footer .grid-item:nth-child(3) {padding-left:40px;padding-right:40px}
footer .grid-footer .grid-item:nth-child(4) {padding-left: 40px}
footer .grid-footer .grid-item:nth-child(4) ul {margin-top: -5px;}
footer .grid-footer .grid-item:nth-child(4) li a {padding: 5px 0;display: block;}
footer .grid-footer .grid-item:nth-child(4) li a span {color :var(--main-color);margin-right:5px;transition: margin-right 200ms ease-in-out}
footer .grid-footer .grid-item:nth-child(4) li a:hover span {transition: margin-right 200ms ease-in-out;margin-right:10px}
footer .grid-footer .grid-item:nth-child(4) li a.actif {color :var(--main-color)}
footer .grid-footer .grid-item:nth-child(4) li a.actif:hover span {margin-right:5px}
footer input[type=email] {font-size: .9rem;}
footer .grid-footer .grid-item span.saut {display: none;}
#bottom-bar {font-size: .8rem;background: #000;padding:6px 0;width:100%}
#bottom-bar div.grid-item {justify-self: start}
#bottom-bar nav.grid-item {justify-self: end}
#bottom-bar nav.grid-item a.actif {color :var(--main-color)}
#bottom-bar span.saut {display: none}
@media (max-width:1680px){
  footer .grid-footer .grid-item {padding: 20px 0;}
  footer .grid-footer .grid-item,footer input[type=email] {font-size: .8rem;}
  footer .grid-footer .grid-item:nth-child(1) {padding-right: 30px}
  footer .grid-footer .grid-item:nth-child(2) address p svg,
  footer .grid-footer .grid-item:nth-child(3) address p svg {width: 20px;margin-right: 10px;}
  footer .grid-footer .grid-item:nth-child(2) {padding-left:30px;padding-right:30px}
  footer .grid-footer .grid-item:nth-child(3) {padding-left:30px;padding-right:30px}
  footer .grid-footer .grid-item:nth-child(4) {padding-left: 30px}
  footer .grid-footer .grid-item:nth-child(2) a.decouvrir,
  footer .grid-footer .grid-item:nth-child(3) a.decouvrir {margin-left:5px}
  footer .grid-footer .grid-item:nth-child(2) a.decouvrir span,
  footer .grid-footer .grid-item:nth-child(3) a.decouvrir span {margin-right:9px}
  #bottom-bar {font-size: .7rem;}
}
@media (max-width:1366px){
  footer .grid-footer .grid-item:nth-child(1) .newsletter-form input {width: 100%;}
  footer .grid-footer .grid-item:nth-child(1) .newsletter-form button {padding: 9px 15px;margin: 8px 0 0 0}
  footer .grid-footer .grid-item span.saut {display: inline}
}
@media (max-width:1199px){
  footer .grid-footer {gap: 0px;grid-template-columns: 1fr ;padding: 50px 0 25px 0;text-align: center;}
  footer .grid-footer .grid-item {max-width: 100%;margin: 0 auto;}
  footer .grid-footer .grid-item:nth-child(1),
  footer .grid-footer .grid-item:nth-child(2),
  footer .grid-footer .grid-item:nth-child(3) {width: 100%;border-bottom:1px solid #333;border-right:none}
  footer .grid-footer .grid-item:nth-child(4) {width: 100%}
  footer .grid-footer .grid-item:nth-child(1),
  footer .grid-footer .grid-item:nth-child(2),
  footer .grid-footer .grid-item:nth-child(3),
  footer .grid-footer .grid-item:nth-child(4) {padding: 40px 0}
  footer .grid-footer .grid-item span.saut {display: none}
  footer .grid-footer .grid-item:nth-child(1) .newsletter-form input {max-width: 280px;display: block;margin: 0 auto 15px auto;}
  footer .grid-footer .grid-item:nth-child(1) .social-links-footer {margin-top: 40px;}
  footer .grid-footer .grid-item:nth-child(1) .social-links-footer a {display: block;font-size: 14px}
  footer .grid-footer .grid-item:nth-child(2) address p,
  footer .grid-footer .grid-item:nth-child(3) address p {display: block;border-bottom: none}
  footer .grid-footer .grid-item:nth-child(2) address p svg,
  footer .grid-footer .grid-item:nth-child(3) address p svg {display: block;margin: 0 auto 5px auto;}
  footer .grid-footer .grid-item:nth-child(2) a.decouvrir,
  footer .grid-footer .grid-item:nth-child(3) a.decouvrir {margin-left:0px}
  footer .grid-footer .grid-item:nth-child(2) a.decouvrir span,
  footer .grid-footer .grid-item:nth-child(3) a.decouvrir span {margin-right:5px}
}
@media (max-width:1024px){
  #bottom-bar .grid-2 {grid-template-columns: 1fr;gap:0}
  #bottom-bar div.grid-item {justify-self: center;text-align: center;}
  #bottom-bar nav.grid-item {justify-self: center;text-align: center;opacity: .75;}
}

@media (max-width:768px){
  #bottom-bar {padding: 6px 25px;}
  #bottom-bar span.saut {display: inline}
  #bottom-bar nav.grid-item {margin-top: 5px;}
  footer .grid-footer {padding: 25px 0}
  footer .grid-footer .grid-item {max-width: 100%;margin: 0}
}

/*
/*
/* ====== COMPOSANTS ====== */

/* ------ Animations ------ */
@keyframes slideDown {from {transform: translateY(-20px);opacity: 0}to{transform: translateY(0);opacity: 1}}

/* ------ Boutons ------ */
a.btn-violet,button.btn-violet {background:#a87eb4;color:#fff;border: 2px solid #a87eb4;font-size:.9rem;text-transform:uppercase;font-weight: 600;padding:13px 25px 13px 20px;border-radius:5px;display:inline-block}
a.btn-violet:hover,button.btn-violet:hover {background: transparent;color:#a87eb4}
a.btn-violet svg,button.btn-violet svg {display: inline-block;vertical-align: middle;margin: 0px 3px 2px 0;transition: fill 300ms ease-in-out}
a.btn-violet:hover svg,button.btn-violet:hover svg {fill: #a87eb4;stroke:#a87eb4;transition: fill 300ms ease-in-out}
a.link {color:#a87eb4;font-size:.9rem;margin-top: 20px;display: inline-block;text-decoration: underline;text-underline-offset: 3px;font-weight: 500;}
a.link:hover {text-decoration: none}
a.btn-invers {background:#fff;color:var(--main-color);border: 2px solid #fff;font-size:.9rem;text-transform:uppercase;font-weight: 600;padding:13px 25px 13px 20px;border-radius:5px;display:inline-block}
a.btn-invers:hover {background: transparent;color:#fff}
@media (max-width:1920px){
  a.btn-violet,button.btn-violet {font-size:.81rem}
}

/* ------ scroll-to-top ------ */
#scroll-to-top {position:fixed;background:#000;padding:18px 15px 12px 15px;right: 10px;z-index: 70;cursor: pointer;transition: all 0.3s;border-radius:5px}
#scroll-to-top .arrow {border: solid white;border-width: 0 3px 3px 0;display: block;padding: 4px;transform: rotate(-135deg)}
#scroll-to-top:hover .arrow {border-color: var(--main-color);transition: border-color 0.3s ease-out}
@media (max-width:768px){
  #scroll-to-top {display: none;} 
}
/* ------ Modal ------ */
.modal {display: none;position: fixed;z-index: 999;left: 50%;top: 50%;transform: translate(-50%, -60%);width: 80%;max-width: 1024px;transition: opacity 0.4s ease-in-out}
.modal.open {display: flex;opacity: 1}
.modal-content {background-color: #fff;border-radius: 10px;width: 100%;animation: slideDown 0.4s ease;position: relative;box-shadow: 0px 0px 20px rgba(0, 0, 0, .15)}
.modal-header {background: var(--main-color);padding: 15px 15px 12px 15px;border-radius: 10px 10px 0 0}
.modal-header h6 {color:#fff;text-transform: uppercase;font-size:1rem;font-weight: 600}
.modal-header span.close {font-size: 2rem;font-weight: 400;color: #fff;cursor: pointer;position: absolute;top: 7px;right: 25px;z-index: 1}
.modal-body {padding: 2px}
.modal-footer {padding: 0px 20px 20px 20px}
.close {position: absolute;background:rgba(255,255,255,.2);font-size: 24px;cursor: pointer;line-height: 1;padding: 1px 7px;border-radius: 5px;margin: 0 -12px 0;transition: background 200ms ease-in-out}
.close:hover {background:rgba(255,255,255,.4)}
.modal .video-container {max-width: 100%;margin: 0 auto}
.modal .video-container .video-responsive {width: 100%;max-width: 100%;height: auto;display: block;}
.modal video {max-width: 100%;height: auto;display: block}
@media (max-width:768px){
  .modal {width: 96%}
  .modal-header h6 {font-size:.8rem}  
}

/* ------ Carte ------ */
.carte {border: 1px solid  rgba(242, 142, 34, 0.5);background: #fff;border-radius:10px;transition: transform 0.3s ease, box-shadow 0.3s ease}
.carte:hover {transform: translateY(-8px);box-shadow: 0 8px 20px rgba(242, 142, 34, 0.29)}
@media (max-width:1199px){
  .carte:hover {
    transform: none;
    box-shadow: none;
  }
}
@media (max-width:768px){
  .carte.full {border:none;border-radius: 0} 
}

/* ------ icon google ------ */
.st0 {fill: none;}
.st1 {fill: url(#radial-gradient)}
.st2 {fill: url(#linear-gradient)}
.st3 {fill: #fc4c53}
.st4 {fill: url(#radial-gradient1)}
.st5 {clip-path: url(#clippath)}

/* ------ citation ------ */
.citation {background: #fff;}
.citation .container {background: #F7F3F9;border-radius: 8px;text-align: center;position: relative;border:1px solid #e3d6e7}
.citation p {font-style: italic;font-size: 1rem;width: 65%;position: relative;padding: 50px 25px;color:#A87EB4;margin: 0 auto}
.citation p strong {font-style: normal}
.citation p::before {content: "«"; font-size:5rem; font-weight: 700; color: #A87EB4; position: absolute; top: 0px; left: -100px;opacity: .25;font-style: normal;}
.citation p::after {content: "»"; font-size: 5rem; font-weight: 700; color: #A87EB4; position: absolute; bottom: 0px; right: -100px;opacity: .25;font-style: normal}
@media (max-width:1366px){
  .citation p {width: 85%;}
  .citation p::before {left: -40px}
  .citation p::after {right: -40px}
}
@media (max-width:1199px){
  .citation p {width: 100%;padding: 40px}
  .citation p::before,
  .citation p::after {font-size: 3rem;}
}
@media (max-width:1024px){
  .citation .container {border-radius: 0px;}
  .citation p {padding: 50px 20px} 
  .citation p::before {left: -20px}
  .citation p::after {right: -20px}
}
/* ------ Prix ------ */
#ss-content .content-prix {text-align: center;border-radius:5px;background: #f7f3f9;padding: 50px;}
#ss-content .content-prix .prix {color:#1C1C1C;font-size: 5rem;font-weight: 600;line-height: 1;position: relative;letter-spacing: -5px;}
#ss-content .content-prix p strong {font-weight: 500;color: #1C1C1C;font-size: 1rem}
#ss-content .content-prix hr {height: 3px;background-color: var(--main-color);border: none;width: 80px;margin: 20px auto}
#ss-content .content-prix hr.small {height: 1px;background-color: rgba(0, 0, 0, .1);border: none;width: 100%;margin: 10px auto}
#ss-content .content-prix p {color: #444}
#ss-content .content-prix a {margin-top:30px;}
#ss-content .content-prix small {color:#a87eb4;}
#ss-content .content-prix.big {padding: 20px;background: none;}
#ss-content .content-prix.big .prix {color:#1C1C1C;font-size: 10rem;font-weight: 600;line-height: 1;position: relative}
#ss-content .content-prix.big .prix sup {font-size: 2rem;font-weight: 500;position: absolute;top:10px;right:50px}

/*
/*
/* ---------------------------- */
/*                              */
/* ====== PAGE - ACCUEIL ====== */
/*                              */
/* ---------------------------- */

/*------ Hero ------ */
#hero {padding: 80px 0 150px 0;position: relative;text-align: center;background: #000;overflow: hidden}
.hero-bg-layer {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-position: center;transition: opacity 1s ease-in-out;z-index: 1;background-repeat: no-repeat}
#hero .container,#hero .grid,#hero .round-button-wrapper,#hero .arrow,#hero .progress-bar,#hero .progress-bar-reverse {position: relative;z-index: 3}
#hero-gradient {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(45deg, rgba(33, 33, 33, 0.15), rgba(242, 142, 34, 0.2), rgba(255, 255, 255, 0.15), rgba(242, 142, 34, 0.2), rgba(33, 33, 33, 0.15), rgba(242, 142, 34, 0.2));background-size: 300%;animation: gradientAnimation 20s ease-in-out infinite;pointer-events: none;z-index: 3;background-color: rgba(33,33,33, .25)}
#hero h1 {color: #fff;font-size: 5.5rem;font-weight:700;letter-spacing: -2px}
#hero h2 {color: var(--main-color);font-size: 2.5rem;font-weight:600;margin-bottom: 20px;letter-spacing: -1px}
#hero p {color:#fff;width:65%;margin: 0 auto;margin-bottom: 40px;font-size: 1.2rem}
#hero .progress-bar {position: absolute;top: 0;left: 0;height: 4px;background-color: rgba(242, 142, 34, 1)}
#hero .progress-bar-reverse {position: absolute;bottom: 0;right: 0;height: 4px;background-color: rgba(242, 142, 34, 1)}
#hero .card {padding: 30px;display: flex;flex-direction: column;align-items: center;justify-content: center;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);border-radius: 8px;transition: transform 0.3s, box-shadow 0.3s, background 0.3s ;overflow: hidden;position: relative;background: rgba(255,255,255,.25);border: 1px solid rgba(255,255,255,.1);backdrop-filter: blur(1px);color: #fff;text-align: left}
#hero .card h3 {font-size: 1.15rem;font-weight:600}
#hero .card-mobile {display: none}
#hero .card.active {background-color: var(--main-color);transform: translateY(-10px);box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);border: 1px solid var(--main-color)}
@media (max-width:1920px){
  #hero h1 {font-size: 4.95rem}
  #hero h2 {font-size: 2.25rem}
  #hero p {font-size: 1.08rem}
  #hero .card h3 {font-size: 1rem}
}
@media (max-width: 1365px) {
  #hero {padding: 50px 0 80px 0}
  #hero .grid {display: none}    
  #hero .card-mobile {display: inline-block;font-size: .9rem;}
  #hero .card-mobile .card-text {opacity: 1;transition: opacity 0.5s ease-in-out;background-color: rgba(242, 142, 34, 0.8);backdrop-filter: blur(1px);color: #fff;padding: 20px 30px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);border-radius: 8px}
}
@media (max-width:1024px){
  #hero {padding: 60px 0 100px 0}
  #hero h1 {font-size: 4rem}
  #hero h2 {font-size: 2rem}
  #hero p {width:95%}
}
@media (max-width:768px){
  #hero h1 {font-size: 3rem}
  #hero h2 {font-size: 1.5rem}
}
@keyframes gradientAnimation {0% { background-position: 0% 30%, center center}50% { background-position: 100% 50%, center center}100% { background-position: 0% 30%, center center}}
@keyframes moveRight {0% {transform: scale(1.05) translateX(-2%)}50% {transform: scale(1.05) translateX(2%)}100% {transform: scale(1.05) translateX(-2%)}}
@keyframes moveLeft {0% {transform: scale(1.05) translateX(2%)}50% {transform: scale(1.05) translateX(-2%)}100% {transform: scale(1.05) translateX(2%)}}
@keyframes zoomInOut {0% {transform: scale(1)}50% {transform: scale(1.1)}100% {transform: scale(1)}}
@keyframes zoomOutIn {0% {transform: scale(1.1)}50% {transform: scale(1)}100% {transform: scale(1.1)}}
.animate-moveRight {animation: moveRight 20s linear infinite}
.animate-moveLeft {animation: moveLeft 20s linear infinite}
.animate-zoomInOut {animation: zoomInOut 20s ease-in-out infinite}
.animate-zoomOutIn {animation: zoomOutIn 20s ease-in-out infinite}
#hero-bg-layer1 {opacity: 1}
#hero-bg-layer2 {opacity: 0}

/* ------ btn-video ------ */
#btn-video.round-button-wrapper {position: relative;display: inline-block;z-index: 10;left : 50%;top: -19px;}
#btn-video .round-button {position: absolute;top: 50%;left: 50%;width: 70px;height: 70px;background-color: var(--main-color);border-radius: 50%;text-align: center;line-height: 70px;cursor: pointer;transform: translate(-50%, -50%);z-index: 10;transition: background-color 300ms ease-in-out}
#btn-video .play-icon {position: absolute;top: 50%;left: 50%;width: 40px;height: 40px;transform: translate(-50%, -50%);fill: white;z-index: 20;transition: fill 300ms ease-in-out}
#btn-video .halo {position: absolute;top: 50%;left: 50%;width: 120px;height: 120px;background-color: rgba(242, 142, 34, 1);border-radius: 50%;transform: translate(-50%, -50%);z-index: 1;animation: halo-animation 2s infinite ease-in-out;transition: transform 0.5s ease, opacity 0.5s ease}
#btn-video .round-button:hover + .halo {background-color: rgba(255,255,255, 1);transition: background-color 300ms ease-in-out}
#btn-video .round-button:hover{background-color: rgba(255,255,255, 1);transition: background-color 300ms ease-in-out;box-shadow: 0 0 30px rgba(242, 142, 34, 0.5)}
#btn-video .round-button:hover .play-icon {fill: var(--main-color);transition: fill 300ms ease-in-out}
@keyframes halo-animation {
  0% {transform: translate(-50%, -50%) scale(0.5);opacity: 1;box-shadow: 0 0 10px rgba(242, 142, 34, 0.5),0 0 20px rgba(242, 142, 34, 0.4),0 0 30px rgba(242, 142, 34, 0.3)}
  100% {transform: translate(-50%, -50%) scale(1);opacity: 0;box-shadow: 0 0 30px rgba(242, 142, 34, 0.5),0 0 60px rgba(242, 142, 34, 0.4),0 0 90px rgba(242, 142, 34, 0.2)}
}

/* ------ Prestataire Informatique ------ */
#prestainfo {padding: 100px 0 100px 0}
#prestainfo .grid {gap:50px}
#prestainfo .scrollVertical {position: relative;justify-content: flex-end;display: flex;flex-direction: column;margin-bottom:20px}
#prestainfo .scrollVertical img {z-index: 2;position: relative}
#prestainfo .scrolling-background {
    position: absolute;
    bottom: 50px;
    z-index: 1;
    left: 25px;
    width: 300px;
    height: 514px;
    background-image: url('../img/logo-marque-informatique.webp');
    background-repeat: repeat-y;
    background-size: 300px;
    animation: scrollVertical 30s linear infinite;
    mask-image: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 1) 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 1) 90%, transparent 100%);

}
@keyframes scrollVertical {0% {background-position-y: 1028px}100% {background-position-y: 0}}
#prestainfo .grid_second {margin-top: 50px}
#prestainfo .label {padding: 60px;width: calc(100% - 20px);height: calc(100% - 20px);margin: 10px 0 0 10px;background: #fff;border-radius: 10px;}
#prestainfo .label a.qualirepar,#prestainfo .label a.cybermalveillance {display: inline-block;width: calc(50%)}
#prestainfo .label p {padding-top: 40px;padding-bottom: 50px}
#prestainfo .google-review {border: 1px solid #eee;background: #f9f9f9;display: block;border-radius: 10px;padding: 15px 25px 15px 20px}
#prestainfo .google-review:hover {border: 1px solid  rgba(242, 142, 34, 0.5);transform: translateY(-4px);box-shadow: 0 4px 10px rgba(242, 142, 34, 0.29)}
#prestainfo .google-review svg {display: inline-block;width: 80px;height: 80px;vertical-align: middle}
#prestainfo .stars {display: inline-block;vertical-align: middle;margin-left: 10px}
#prestainfo .stars strong {color: #444;margin-left: 2px}
#prestainfo .stars .star {font-size: 30px;color: #FFBA00;margin-right: 2px;line-height: .8}
#prestainfo .stars .rating-text {color: #444;margin-left: 2px}
#prestainfo .stars .rating-text strong {color:#f28e22;font-weight: 600}
@media (max-width:1366px){
  #prestainfo {padding: 80px 0 80px 0}
  #prestainfo .grid {gap: 20px;}
  #prestainfo .scrollVertical {text-align: right}
  #prestainfo .scrollVertical img {width: 450px;height: 385px}
  #prestainfo .scrolling-background {margin-left: 100px}

}
@media (max-width:1199px){
  #prestainfo {padding: 0;margin-top: -25px;background: #fff} 
  #prestainfo .title {text-align: center;}
  #prestainfo .title hr {margin:25px auto 50px auto}
  #prestainfo .grid {gap: 0px;grid-template-columns: 1fr;}
  #prestainfo .sec_main:first-child {padding-top: 100px} 
  #prestainfo .scrollVertical {padding-top: 30px}
  #prestainfo .scrolling-background {left: calc(50% - 130px);z-index: 1;bottom: 25px;height: 257px;background-size: 150px;margin-left: 0px}
  #prestainfo .scrollVertical img {width: 300px;height: 257px;margin: 0 auto;display: block}
  #prestainfo .grid_second {margin-top: 30px}
  #prestainfo .label {padding: 50px;width:100%;height: auto;margin:0 auto;border-radius: 0px;text-align: center;background: #f8f8f8}
  #prestainfo .label a.qualirepar,#prestainfo .label a.cybermalveillance {display: inline-block;width: 150px;margin: 0 5px;}
  #prestainfo .label a.qualirepar img,#prestainfo .label a.cybermalveillance img {width: 125px;height: 94px;}
  #prestainfo .label p {padding-top: 40px;padding-bottom: 50px}
}
@media (max-width:768px){
    #prestainfo .label {padding: 50px 25px;}
}

/* ------ Bien plus ------ */
#bienplus {position: relative;background: url('../img/diagnostic-devis-gratuit-particuliers.webp') no-repeat center;background-size: cover;background-attachment: fixed;padding: 125px 0}
#bienplus .title {padding: 0 80px 0 0;position: sticky;top: 100px;align-self: start}
#bienplus .title h2 {color:#fff}
#bienplus .title h2 span {color:var(--main-color)}
#bienplus .title p {margin-bottom: 30px;color:#fff}
#bienplus .carte {backdrop-filter: blur(3px);background: rgba(0,0,0,.5);padding: 40px 20px;border-radius: 10px;transition: transform 0.3s ease, border 0.3s ease, background 0.3s ease;border: 1px solid rgba(0,0,0,.25);text-align: center}
#bienplus .carte:hover {transform: translateY(-5px);border: 1px solid  rgba(0,0,0, 0.5);background: rgba(0,0,0,.85)}
#bienplus .carte h3 {transition: color 0.3s ease;color:#fff;font-size: 1.1rem}
#bienplus .carte:hover h3 {color:var(--main-color);transition: color 0.3s ease}
#bienplus .carte-image {display: flex;justify-content: center;margin-bottom: 15px}
#bienplus .carte-image img {width: 180px;height: 180px;border-radius: 50%;object-fit: cover}
@media (max-width:1920px){
  #bienplus .carte h3 {font-size: 1rem}
}
@media (max-width:1199px){
  #bienplus {padding: 80px 0;}
  #bienplus .grid-1-2 {grid-template-columns: 1fr;}
  #bienplus .title {text-align: center;position: relative;top:0;padding: 0;}
  #bienplus .title hr {margin:25px auto 40px auto}
  #bienplus .title p {margin-bottom: 0px;}
  #bienplus .grid-3 {grid-template-columns: 1fr 1fr;margin-top: 30px;}
}
@media (max-width:768px){
  #bienplus .grid-3 {grid-template-columns: 1fr} 
}

/* ------ Nos Boutiques ------ */
#nosboutiques {padding: 100px 0;background:#fff}
#nosboutiques .agence {display: flex; align-items: center; gap: 25px; margin: 40px 0}
#nosboutiques .agence .image-link {display: block; overflow: hidden; border-radius: 8px; flex-shrink: 0}
#nosboutiques .agence img {width: 150px; height: 127px; display: block; border-radius: 8px; transition: transform 0.3s ease, filter 0.3s ease}
#nosboutiques .agence .image-link:hover img {transform: scale(1.05); filter: brightness(1.1); cursor: pointer}
#nosboutiques .agence .txt {display: flex; flex-direction: column; justify-content: center; font-size: 16px; line-height: 1.5}
#nosboutiques .agence .txt h4 {margin-bottom: 5px;}
#nosboutiques .agence .txt a.link {margin-top: 8px}
#nosboutiques a.btn-violet {margin-top: 20px}
#nosboutiques .zone-map {position: relative;margin-top: 50px;width: 600px;height: 430px;background: url('../img/zone-intervention-bobmicro.webp') no-repeat center;background-size: cover}
#nosboutiques .zone-map h6.ville {position: absolute;margin-top: -20px;transform: translate(-50%, 0);text-align: center;font-weight: 500;font-size: .8rem;transition: color 0.3s ease;padding: 20px 10px 10px 10px;cursor: pointer}
#nosboutiques .zone-map h6.ville::before {content: "";position: absolute;top: 10px;left: 50%;transform: translateX(-50%);border-radius: 50%;}
#nosboutiques .zone-map h6.ville.beaugency::before {content: "";position: absolute;top: 40px;left: 50%;transform: translateX(-50%);border-radius: 50%;width: 8px;height: 8px;background-color: #f28e22;transition: background-color 0.3s ease;animation: pulse 3s ease-in-out infinite;}
#nosboutiques .zone-map h6.ville.mer {top: 40.7%; left: 51.7%; color: #1c1c1c; font-size: 1rem; font-weight: 600;}
#nosboutiques .zone-map h6.ville.beaugency {top: 22.1%; left: 57.0%; color: #f28e22;}
#nosboutiques .zone-map h6.ville.orleans {top: 9.8%; left: 67.8%; color: #f28e22;}
#nosboutiques .zone-map h6.ville.tours {top: 89.5%; left: 15.0%; color: #f28e22;}
#nosboutiques .zone-map h6.ville.vendome {top: 37.7%; left: 26.7%; color: #fff;}
#nosboutiques .zone-map h6.ville.blois {top: 56.7%; left: 44.2%; color: #fff;}
#nosboutiques .zone-map h6.ville.romorantin {top: 70.9%; left: 71.7%; color: #1c1c1c; font-size: 1rem; font-weight: 600;}
#nosboutiques .zone-map h6.ville.vierzon {top: 82.6%; left: 90.5%; color: #f28e22;}
#nosboutiques .zone-map h6.ville.beauce {top: 15.6%; left: 44.2%; color: #fff;}
#nosboutiques .zone-map h6.ville.neung {top: 50.0%; left: 73.3%; color: #fff;}
#nosboutiques .zone-map h6.ville.controis {top: 75.6%; left: 50.8%; color: #fff;}
#nosboutiques .zone-map h6.ville.mer::before,
#nosboutiques .zone-map h6.ville.romorantin::before {width: 26px;height: 20px;top: 0px;border-radius: 0px;background: url('../img/logo-tete-bobmicro.webp') no-repeat center;background-size: cover}
#nosboutiques .zone-map h6.ville.vendome::before,
#nosboutiques .zone-map h6.ville.blois::before,
#nosboutiques .zone-map h6.ville.beauce::before,
#nosboutiques .zone-map h6.ville.neung::before,
#nosboutiques .zone-map h6.ville.controis::before {width: 8px;height: 8px;background-color: #fff;transition: background-color 0.3s ease;animation: pulse 2s ease-in-out infinite;}
#nosboutiques .zone-map h6.ville.orleans::before,
#nosboutiques .zone-map h6.ville.tours::before,
#nosboutiques .zone-map h6.ville.vierzon::before {width: 8px;height: 8px;background-color: #f28e22;transition: background-color 0.3s ease;animation: pulse 3s ease-in-out infinite;}
#nosboutiques .tooltip-box {position: absolute; background: #1c1c1c; color: #eee; padding: 15px 20px; border-radius: 6px; font-size: 0.85rem; font-weight: 300; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.2); z-index: 9;opacity: 0; pointer-events: none; animation: fadeInTooltip 0.3s ease forwards; text-align: center}
#nosboutiques .tooltip-box strong {color: #f28e22;font-weight: 600;display: block;text-transform: uppercase}
#nosboutiques .tooltip-box::after {content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: #1c1c1c transparent transparent transparent}
@keyframes fadeInTooltip {
  from {opacity: 0;transform: translateY(5px)}
  to {opacity: 1;transform: translateY(0)}
}
@keyframes pulse {
  0%, 100% {transform: translateX(-50%) scale(1)}
  50% {transform: translateX(-50%) scale(2)}
}
@media (max-width:1199px){
  #nosboutiques .grid-2 {grid-template-columns: 1fr;text-align: center;}
  #nosboutiques .title hr {margin:25px auto 40px auto}
  #nosboutiques .agence {display: block;}
  #nosboutiques .agence img {margin: 0 auto 10px auto;}
  #nosboutiques .agence .image-link:hover img {transform: none; filter: none}
  #nosboutiques .zone-map {width: 100%;max-width: 600px;aspect-ratio: 600 / 430;margin: 50px auto 0 auto;}
}

@media (max-width:768px){
  #nosboutiques .zone-map {width: 320px;height: 229px}
  #nosboutiques .zone-map h6.ville {font-size: .6rem;}
  #nosboutiques .zone-map h6.ville.mer,#nosboutiques .zone-map h6.ville.romorantin {font-size: .7rem;}
  #nosboutiques .zone-map h6.ville.mer::before,
  #nosboutiques .zone-map h6.ville.romorantin::before {width: 20px;height: 16px;top: 5px}
  #nosboutiques .zone-map h6.ville.vendome::before,
  #nosboutiques .zone-map h6.ville.blois::before,
  #nosboutiques .zone-map h6.ville.beauce::before,
  #nosboutiques .zone-map h6.ville.neung::before,
  #nosboutiques .zone-map h6.ville.controis::before {width: 5px;height: 5px;}
  #nosboutiques .zone-map h6.ville.orleans::before,
  #nosboutiques .zone-map h6.ville.tours::before,
  #nosboutiques .zone-map h6.ville.vierzon::before {width: 5px;height: 5px;}
  #nosboutiques .zone-map h6.ville.beaugency {top: 20%; left: 60.0%}
  #nosboutiques .zone-map h6.ville.beaugency::before {top: 35px;left: 40%;width: 5px;height: 5px}
  @keyframes pulse {
    0%, 100% {transform: translateX(-50%) scale(1)}
    50% {transform: translateX(-50%) scale(1.2)}
  }
}

/* ------ Nos Compétences ------ */
#noscompetences {padding: 100px 0}
#noscompetences .title {margin-bottom: 50px;}
#noscompetences .title p {width: 70%;margin: 0 auto;}
#noscompetences .carte {padding:30px 25px 50px 25px}
#noscompetences .carte:hover h4 {color: #f28e22}
#noscompetences .carte h4 {margin: 10px 0 20px 0;transition: color 0.3s ease;}
#noscompetences .carte p {color:#666}
@media (max-width:1199px){
  #noscompetences .grid {grid-template-columns: 1fr 1fr;}
  #noscompetences .title p {width: 90%}
}
@media (max-width:768px){
  #noscompetences {padding: 80px 0}
  #noscompetences .grid {grid-template-columns: 1fr}
}


/*------ Atelier BOBMICRO ------ */
#atelierbobmicro {padding: 120px 0;background: #fff}
#atelierbobmicro .grid {gap:50px;align-items: stretch;}
#atelierbobmicro .swiper {height: 100%; border-radius: 8px; display: flex; flex-direction: column; position: relative; overflow: hidden; cursor: grab; user-select: none; overflow: hidden;touch-action: pan-y; }
#atelierbobmicro .swiper-wrapper {display: flex;flex-grow: 1;transition: transform 0.5s ease;will-change: transform;width: 100%;height: 100%;touch-action: pan-y}
#atelierbobmicro .swiper-slide {flex-shrink: 0;min-width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 2rem}
#atelierbobmicro .swiper-slide.slide1 {background: url('../img/atelier/atelier-bobmicro-01.webp') no-repeat center;background-size: cover}
#atelierbobmicro .swiper-slide.slide2 {background: url('../img/atelier/atelier-bobmicro-02.webp') no-repeat center;background-size: cover}
#atelierbobmicro .swiper-slide.slide3 {background: url('../img/atelier/atelier-bobmicro-03.webp') no-repeat center;background-size: cover}
#atelierbobmicro .swiper-slide.slide4 {background: url('../img/atelier/atelier-bobmicro-04.webp') no-repeat center;background-size: cover}
#atelierbobmicro .swiper-slide.slide5 {background: url('../img/atelier/atelier-bobmicro-05.webp') no-repeat center;background-size: cover}
#atelierbobmicro .swiper-slide.slide6 {background: url('../img/atelier/atelier-bobmicro-06.webp') no-repeat center;background-size: cover}
#atelierbobmicro .swiper-button-prev,
#atelierbobmicro .swiper-button-next {position: absolute;top: 50%;transform: translateY(-50%);padding: 10px;background: rgba(0, 0, 0, 0.05);border-radius: 50%;cursor: pointer;z-index: 10;user-select: none;transition: background 0.3s ease}
#atelierbobmicro .swiper-button-prev:hover,
#atelierbobmicro .swiper-button-next:hover {background: rgba(0, 0, 0, 0.25)}
#atelierbobmicro .swiper-button-prev svg,
#atelierbobmicro .swiper-button-next svg {display: block}
#atelierbobmicro .swiper-button-prev {left: 5px}
#atelierbobmicro .swiper-button-next {right: 5px}
#atelierbobmicro .swiper-pagination {position: absolute;bottom: 5px;width: 100%;text-align: center}
#atelierbobmicro .swiper-pagination span {display: inline-block;width: 8px;height: 8px;background: #333;border-radius: 50%;margin: 0 5px;cursor: pointer;transition: background 0.3s}
#atelierbobmicro .swiper-pagination .active {background: #eee}
#atelierbobmicro .swiper-wrapper.grabbing {cursor: grabbing}
#atelierbobmicro .grid .title {padding: 25px 0;}
@media (max-width:1199px){
  #atelierbobmicro {padding: 100px 0;}
  #atelierbobmicro .swiper {height: 500px;max-width: 80%;margin: 0 auto;}
  #atelierbobmicro .grid {grid-template-columns: 1fr}
  #atelierbobmicro .grid .title {padding:0;max-width: 80%;margin: 0 auto;}
}
@media (max-width:1024px){
  #atelierbobmicro {padding: 80px 0;text-align: center}
  #atelierbobmicro .swiper {max-width: 100%}
  #atelierbobmicro .grid .title {max-width: 100%}
  #atelierbobmicro .title hr {margin:25px auto 40px auto}
  #atelierbobmicro .grid-item {order: 2}
  #atelierbobmicro .grid .title {order: 1}
}
@media (max-width:768px){
  #atelierbobmicro .swiper {height: 300px}
}

/*
/*
/* ---------------------------------------- */
/*                                          */
/* ====== PAGE - BOUTIQUE MER / ROMO ====== */
/*                                          */
/* ---------------------------------------- */
#pageboutique {padding:25px 0;background: #fff}
#pageboutique .grid {gap:80px;}
#pageboutique .list {position: sticky;top:150px}
#pageboutique .list .agence {display: flex; align-items: center; gap: 25px; margin: 40px 0}
#pageboutique .list .agence .image-link {display: block; overflow: hidden; border-radius: 8px; flex-shrink: 0}
#pageboutique .list .agence img {width: 150px; height: 127px; display: block; border-radius: 8px; transition: transform 0.3s ease, filter 0.3s ease}
#pageboutique .list .agence .image-link:hover img {transform: scale(1.05); filter: brightness(1.1); cursor: pointer}
#pageboutique .list .agence .txt {display: flex; flex-direction: column; justify-content: center; font-size: 16px; line-height: 1.5}
#pageboutique .list .agence .txt h4 {margin-bottom: 5px;}
#pageboutique .list .agence .txt a.link {margin-top: 8px}
#pageboutique .citation {margin: 75px 0 50px 0;}
#notreequipe {padding: 80px 0 25px 0}
#notreequipe .title {margin-bottom: 60px}
#notreequipe .title p {width: 70%;margin: 0 auto}
#notreequipe .team-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: 40px;text-align: center}
#notreequipe .team-member img {width: 150px;height: 150px;border-radius: 50%;object-fit: cover;margin-bottom: 10px;box-shadow: 0 0 10px rgba(0,0,0,0.1)}
#notreequipe .team-member h4 {margin: 0 0 5px 0;color:#f28e22}
#notreequipe .team-member p {color: #666}
#notreequipe .team-member p strong {color:#1c1c1c}
#notreequipe .chef-only .team-member p {width: 25%;margin: 0 auto 60px auto;}
@media (max-width:1366px){
  #pageboutique .grid {gap:50px;}
  #pageboutique .list {position: sticky;top:100px}
}
@media (max-width:1199px){
  #pageboutique {padding:25px 0 0 0;}
  #pageboutique .grid {grid-template-columns: 1fr 1fr;}
  #pageboutique .citation {margin: 75px 0 0px 0;}
}
@media (max-width:1024px){
  #pageboutique .grid {grid-template-columns: 1fr}
  #pageboutique .list {position: relative;top:0}
  #notreequipe .title p {width: 100%;margin: 0 auto}
  #notreequipe .chef-only .team-member p {width: 100%}
}
@media (max-width:768px){
  #pageboutique .list .agence {display: block;text-align: center; margin: 0}
  #pageboutique .list .agence:first-child {margin-bottom: 40px;}
  #pageboutique .list .agence img {margin: 0 auto 10px auto;}
  #pageboutique .list .agence .image-link:hover img {transform:none;filter:none}
}

/*------ Accueil ------ */
#meromoaccueil {padding:25px 0 80px 0;background: #fff}
#meromoaccueil .grid {gap:80px;align-items: stretch;}
#meromoaccueil .swiper {position: relative;height: 500px; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; cursor: grab; user-select: none; overflow: hidden;touch-action: pan-y; }
#meromoaccueil .swiper-wrapper {display: flex;flex-grow: 1;transition: transform 0.5s ease;will-change: transform;width: 100%;height: 100%;touch-action: pan-y}
#meromoaccueil .swiper-slide {flex-shrink: 0;min-width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 2rem}

#meromoaccueil .rm .swiper-slide.slide1 {background: url('../img/boutique-romorantin/magasin-informatique-romorantin-01.webp') no-repeat center;background-size: cover}
#meromoaccueil .rm .swiper-slide.slide2 {background: url('../img/boutique-romorantin/magasin-informatique-romorantin-02.webp') no-repeat center;background-size: cover}
#meromoaccueil .rm .swiper-slide.slide3 {background: url('../img/boutique-romorantin/magasin-informatique-romorantin-03.webp') no-repeat center;background-size: cover}
#meromoaccueil .rm .swiper-slide.slide4 {background: url('../img/boutique-romorantin/magasin-informatique-romorantin-04.webp') no-repeat center;background-size: cover}
#meromoaccueil .rm .swiper-slide.slide5 {background: url('../img/boutique-romorantin/magasin-informatique-romorantin-05.webp') no-repeat center;background-size: cover}
#meromoaccueil .rm .swiper-slide.slide6 {background: url('../img/boutique-romorantin/magasin-informatique-romorantin-06.webp') no-repeat center;background-size: cover}
#meromoaccueil .rm .swiper-slide.slide7 {background: url('../img/boutique-romorantin/magasin-informatique-romorantin-07.webp') no-repeat center;background-size: cover}

#meromoaccueil .mr .swiper-slide.slide1 {background: url('../img/boutique-mer/magasin-informatique-mer-01.webp') no-repeat center;background-size: cover}
#meromoaccueil .mr .swiper-slide.slide2 {background: url('../img/boutique-mer/magasin-informatique-mer-02.webp') no-repeat center;background-size: cover}
#meromoaccueil .mr .swiper-slide.slide3 {background: url('../img/boutique-mer/magasin-informatique-mer-03.webp') no-repeat center;background-size: cover}
#meromoaccueil .mr .swiper-slide.slide4 {background: url('../img/boutique-mer/magasin-informatique-mer-04.webp') no-repeat center;background-size: cover}
#meromoaccueil .mr .swiper-slide.slide5 {background: url('../img/boutique-mer/magasin-informatique-mer-05.webp') no-repeat center;background-size: cover}
#meromoaccueil .mr .swiper-slide.slide6 {background: url('../img/boutique-mer/magasin-informatique-mer-06.webp') no-repeat center;background-size: cover}
#meromoaccueil .mr .swiper-slide.slide7 {background: url('../img/boutique-mer/magasin-informatique-mer-07.webp') no-repeat center;background-size: cover}
#meromoaccueil .mr .swiper-slide.slide8 {background: url('../img/boutique-mer/magasin-informatique-mer-08.webp') no-repeat center;background-size: cover}
#meromoaccueil .mr .swiper-slide.slide9 {background: url('../img/boutique-mer/magasin-informatique-mer-09.webp') no-repeat center;background-size: cover}

#meromoaccueil .swiper-button-prev,
#meromoaccueil .swiper-button-next {position: absolute;top: 50%;transform: translateY(-50%);padding: 10px;background: rgba(0, 0, 0, 0.05);border-radius: 50%;cursor: pointer;z-index: 10;user-select: none;transition: background 0.3s ease}
#meromoaccueil .swiper-button-prev:hover,
#meromoaccueil .swiper-button-next:hover {background: rgba(0, 0, 0, 0.25)}
#meromoaccueil .swiper-button-prev svg,
#meromoaccueil .swiper-button-next svg {display: block}
#meromoaccueil .swiper-button-prev {left: 5px}
#meromoaccueil .swiper-button-next {right: 5px}
#meromoaccueil .swiper-pagination {position: absolute;bottom: 5px;width: 100%;text-align: center}
#meromoaccueil .swiper-pagination span {display: inline-block;width: 8px;height: 8px;background: #333;border-radius: 50%;margin: 0 5px;cursor: pointer;transition: background 0.3s}
#meromoaccueil .swiper-pagination .active {background: #eee}
#meromoaccueil .swiper-wrapper.grabbing {cursor: grabbing}
#meromoaccueil .title {padding: 25px 0;}
#meromoaccueil ul {margin-top: 30px;}
/*------ liste ------ */
#meromoaccueil .list .grid {gap: 25px;margin-top: 50px;}
#meromoaccueil .list .carte  {padding: 20px;}
#meromoaccueil .list .carte img {display: inline-block;vertical-align:top}
#meromoaccueil .list .carte .txt {display: inline-block;width: calc(100% - 120px);vertical-align:top;margin-left: 20px}
#meromoaccueil .list .carte .txt h4 {color:var(--main-color);text-transform: uppercase;margin-bottom: 5px}
#meromoaccueil .citation {margin-top: 50px;}
/*------ Map ------ */
#meromomap {position: relative;min-height: 600px;overflow: hidden}
#meromomap .google-map-container {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1}
#meromomap #map {width: 100%;height: 100%}
#meromomap .contentitem {position: relative;z-index: 2;width: 50%;margin-left: 0}
#meromomap .title {padding: 80px 40px 80px 0}
#meromomap .title .carte {padding: 50px}
#meromomap .title .carte .address {margin-top: 40px}
#meromomap .title .carte .address .item {border-top: 1px solid #ddd;padding: 20px 10px}
#meromomap .title .carte .address .item svg {color:var(--main-color);display: inline-block;vertical-align: top;margin-right: 15px}
#meromomap .title .carte .address .item p {display: inline-block;vertical-align: top}
@media (max-width:1366px){
  #meromoaccueil .grid {gap:50px;}
}
@media (max-width:1024px){
  #meromoaccueil {padding:25px 0 50px 0}
  #meromoaccueil .title {padding: 0;}
  #meromoaccueil .grid,
  #meromomap .grid {grid-template-columns: 1fr;}
  #meromomap .grid {margin-top: 0px;}
  #meromomap .google-map-container {position: relative;height: 400px}
  #meromomap .contentitem {width: 100%}
  #meromomap .title {padding: 0;margin-top: 50px;}
}
@media (max-width:768px){  
  #meromoaccueil {padding: 25px 0 0;}
  #meromoaccueil .list .grid {margin-top: 25px;}
  #meromoaccueil .grid .swiper {height: 400px;}
  #meromoaccueil .list .carte img {display: block;vertical-align:top;margin: 0 auto 15px auto}
  #meromoaccueil .list .carte .txt {display: block;width: 100%;text-align: center;margin-left: 0px}
  #meromomap {background: #fff;}
  #meromomap .title .carte {padding: 0px}
  #meromomap .title .carte .address {text-align: center;}
  #meromomap .title .carte .address .item {padding: 20px 0px}
  #meromomap .title .carte .address .item svg {display: block;margin: 0 auto 10px auto;}
}

/*------ Nos Produits ------ */
#meromoproduits {padding: 80px 0 0}
#meromoproduits .grid {gap:50px}
#meromoproduits .grid picture img {border-radius: 8px 8px 0 0;}
#meromoproduits .txt {padding: 20px 30px 25px 30px;}
#meromoproduits .txt h3 {color: #f28e22;margin-bottom: 10px;}
@media (max-width:1366px){
  #meromoproduits .grid {gap:25px}
  #meromoproduits .grid picture img {width: 100%;height: auto;}
}
@media (max-width:1024px){
  #meromoproduits .grid {grid-template-columns: 1fr 1fr} 
}
@media (max-width:768px){
  #meromoproduits .grid {grid-template-columns: 1fr} 
  #meromoproduits .txt {padding: 20px 25px 25px 25px;}
}

/*
/*
/* ---------------------------------------------- */
/*                                                */
/* ========= PAGE - PARTICULIERS / PRO ========== */
/*                                                */
/* ---------------------------------------------- */
#ss-content .sec1 {background:#fff;padding: 50px 0 50px 0}
.page-contrat #ss-content .sec1 {background:#111;}
#ss-content .mignon {border-radius: 8px}
#ss-content .item {padding: 25px 50px}
#ss-content .marques {text-align: center}
#ss-content .marques .grid {align-items: center}
#ss-content blockquote {background: #f7f3f9;font-style: italic;border-left: 4px solid #a87eb4;padding: 30px 40px;border-radius: 2px;}
#ss-content blockquote h4 {color:#9870a4;margin: 10px 0;font-style: normal}
#ss-content blockquote p {color:#9870a4}
#ss-content .galerie {background: #fff;padding: 40px 0;}
#ss-content .galerie .grid {gap:40px}
#ss-content .galerie .grid-item img {border-radius: 5px;transition: transform 0.3s ease, box-shadow 0.3s ease}
#ss-content .galerie .grid-item img:hover {border-radius: 5px;transform: translateY(-5px);box-shadow: 0 8px 20px rgba(242, 142, 34, 0.29)}
.lightbox-overlay {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.85); display: flex; justify-content: center; align-items: center; z-index: 9999; cursor: zoom-out; opacity: 0; animation: fadeInOverlay 0.3s ease-out forwards; overflow: hidden}
.lightbox-overlay img {max-width: 90%;max-height: 90%;border-radius: 8px;box-shadow: 0 0 20px rgba(0,0,0,0.5);opacity: 0;transition: opacity 0.3s ease-in-out;user-select: none;pointer-events: none}
img[data-img] {cursor: zoom-in}
@keyframes fadeInOverlay {to { opacity: 1}}
.lightbox-overlay.fade-out {animation: fadeOutOverlay 0.3s ease-out forwards}
@keyframes fadeOutOverlay {to { opacity: 0}}
.lightbox-arrow {position: absolute;top: 50%;transform: translateY(-50%);font-size: 2rem;color: white;cursor: pointer;user-select: none;padding: 0 1rem;z-index: 10001}
.lightbox-arrow.left {left: 2%}
.lightbox-arrow.right {right: 2%}
#ss-content.list {padding: 50px 0 80px 0}
#ss-content.list .grid {gap:50px}
#ss-content.list .grid .carte {overflow: hidden;}
#ss-content.list .grid .carte .img {height:250px;position: relative;}
#ss-content.list .grid .carte .img .nb {position: absolute;bottom: 0px;left: 15px;font-size: 3rem;font-weight: 700;color: #fff;}
#ss-content.list .grid .carte .txt {padding: 20px;}
#ss-content.list .grid .carte .txt h3 {color: #f28e22;margin-bottom: 5px}
#ss-content.list .grid .carte .img.pa01 {background: url('../../inc/img/mignon/diagnostic-devis-gratuit.webp') no-repeat center;background-size: cover}
#ss-content.list .grid .carte .img.pa02 {background: url('../../inc/img/mignon/depannage-informatique-domicile.webp') no-repeat center;background-size: cover}
#ss-content.list .grid .carte .img.pa03 {background: url('../../inc/img/mignon/nettoyage-optimisation-pc@2x.webp') no-repeat center;background-size: cover}
#ss-content.list .grid .carte .img.pa04 {background: url('../../inc/img/mignon/smartphones-tablettes.webp') no-repeat center;background-size: cover}
#ss-content.list .grid .carte .img.pa05 {background: url('../../inc/img/mignon/recuperation-de-donnees.webp') no-repeat center;background-size: cover}
#ss-content.list .grid .carte .img.pa06 {background: url('../../inc/img/mignon/cours-informatique-domicile.webp') no-repeat center;background-size: cover}
#ss-content.list .grid .carte .img.po01 {background: url('../../inc/img/mignon/gestion-parc-informatique.webp') no-repeat center;background-size: cover}
#ss-content.list .grid .carte .img.po02 {background: url('../../inc/img/mignon/email-drive-entreprise.webp') no-repeat center;background-size: cover}
#ss-content.list .grid .carte .img.po03 {background: url('../../inc/img/mignon/sauvegarde-cloud-externe.webp') no-repeat center;background-size: cover}
#ss-content.list .grid .carte .img.po04 {background: url('../../inc/img/mignon/infrastructures-serveurs-reseaux.webp') no-repeat center;background-size: cover}
#ss-content.list .grid .carte .img.po05 {background: url('../../inc/img/mignon/copieur-imprimante-professionnel.webp') no-repeat center;background-size: cover}
#ss-content.list .grid .carte .img.po06 {background: url('../../inc/img/mignon/cybersecurite-antivirus.webp') no-repeat center;background-size: cover}
#ss-content.list .grid .carte .img.po07 {background: url('../../inc/img/mignon/location-materiel-informatique.webp') no-repeat center;background-size: cover}
@media (max-width:1366px){
  #ss-content .item {padding: 25px}  
  #ss-content .galerie .grid-item img {width: 100%;height: auto;}
}
@media (max-width:1024px){
  #ss-content .sec1 .grid {grid-template-columns: 1fr;}
  #ss-content .mignon {height: 300px;}
  #ss-content .galerie .grid {gap:25px;grid-template-columns: 1fr 1fr;}
  #ss-content.list .grid {grid-template-columns: 1fr 1fr;}
}
@media (max-width:768px){
  #ss-content .sec1 {padding: 25px 0 50px 0}
  #ss-content .item {padding: 15px 0 0 0} 
  #ss-content .mignon {height: 200px;}
  #ss-content .galerie .grid {gap:25px;grid-template-columns: 1fr;}
  #ss-content.list .grid {grid-template-columns: 1fr;}
}

/* ====== part-01 ====== */
#ss-content.part-01 .mignon {background: url('../../inc/img/mignon/diagnostic-devis-gratuit.webp') no-repeat center;background-size: cover}
#ss-content.part-01 ul {margin-top: 15px}
#ss-content.part-01 .citation {margin-top: 50px}
#ss-content.part-01 .marques {margin-top: 40px}
#ss-content.part-01 .sec2 {padding: 80px 0;}
#ss-content.part-01 .sec2 .grid {gap:50px}
#ss-content.part-01 .sec2 .carte {padding: 50px;}
#ss-content.part-01 .sec2 ul.disc {margin-bottom:20px}
#ss-content.part-01 .sec3 {margin-top: 50px;}
#ss-content.part-01 .sec3 .title {padding: 25px;}
#ss-content.part-01 .sec3 ul {margin-top: 30px;background: #fff;padding: 50px;box-shadow: 0 4px 10px rgba(44, 44, 44, 0.05);border-radius: 8px}
#ss-content.part-01 .sec3 ul li {padding: 50px 40px;background: #fff}
#ss-content.part-01 .sec3 ul li.invert {background: #f7f3f9}
@media (max-width:1366px){
  #ss-content.part-01 .sec2 .grid {gap:25px} 
}
@media (max-width:1199px){
  #ss-content.part-01 .sec2 {padding: 50px 0;}
  #ss-content.part-01 .sec2 .grid {grid-template-columns: 1fr;}
  #ss-content.part-01 .marques .grid img {width: 80%;height: auto;}
  #ss-content.part-01 .marques .grid .grid-item:nth-child(4) img {max-height: 80px;width: auto}
}
@media (max-width:1024px){
  #ss-content.part-01 .marques .grid img {max-width: 133px}
  #ss-content.part-01 .marques .grid {grid-template-columns: 1fr 1fr 1fr;} 
}
@media (max-width:768px){
  #ss-content.part-01 .sec2 {padding: 0;background: #fff}
  #ss-content.part-01 .sec2 .content-prix {background: #f8f8f8;padding: 50px 0;margin-bottom: 40px;}
  #ss-content.part-01 .sec2 .carte {padding: 0px}
  #ss-content.part-01 .marques .grid .grid-item:nth-child(4) img {max-height: 40px}
  #ss-content.part-01 .sec3 ul {padding: 0px;}
  #ss-content.part-01 .sec3 ul li {padding: 40px 20px;}
  #ss-content blockquote {padding: 30px}
}

/* ====== part-02 ====== */
#ss-content.part-02 .mignon {background: url('../../inc/img/mignon/depannage-informatique-domicile.webp') no-repeat center;background-size: cover}
#ss-content.part-02 .sec1 {padding-bottom: 80px;}
#ss-content.part-02 .sec2 {background: #f8f8f8;padding:80px 0}
#ss-content.part-02 .sec2 .grid {gap:80px}
#ss-content.part-02 .sec2 .img {background: url('../../inc/img/depannage-informatique-domicile-particuliers.webp') no-repeat center;background-size: cover;border-radius: 8px;}
#ss-content.part-02 .sec3 {background: #fff;padding: 80px 0 40px}
#ss-content.part-02 .sec3 .grid {gap:80px}
#ss-content.part-02 .sec3 ul {margin-top: 40px;}
#ss-content.part-02 .galerie {padding-bottom: 80px;}
#ss-content.part-02 .sec4 {padding:80px 0 0}
#ss-content.part-02 .sec4 .grid-list {margin-top: 40px;}
#ss-content.part-02 .sec4 p.ss-titre {padding: 0 15%;}
#ss-content.part-02 .sec4 .carte {padding: 60px 40px}
#ss-content.part-02 .sec4 .carte img {margin-bottom: 15px;}
#ss-content.part-02 .sec4 .carte h4 {margin-bottom: 15px;}
#ss-content.part-02 .sec4 .citation {background: #f8f8f8;margin-top: 40px}
@media (max-width:1366px){
  #ss-content.part-02 .sec4 .carte {padding: 40px 20px;text-align: center;}
}
@media (max-width:1199px){
  #ss-content.part-02 .sec4 .grid-list {grid-template-columns: 1fr 1fr;}
}
@media (max-width:1024px){
  #ss-content.part-02 .sec1 {padding-bottom: 60px}
  #ss-content.part-02 .sec2 {padding:60px 0}
  #ss-content.part-02 .sec2 .grid {grid-template-columns: 1fr;}
  #ss-content.part-02 .sec2 .img {height: 500px;}
  #ss-content.part-02 .sec3 {padding: 60px 0 40px;}
  #ss-content.part-02 .sec3 .grid {grid-template-columns: 1fr;gap: 40px;}
  #ss-content.part-02 .galerie {padding-bottom: 60px;}
  #ss-content.part-02 .sec4 p.ss-titre {padding: 0 2%;}
}
@media (max-width:768px){
  #ss-content.part-02 .sec2 {text-align: center;}
  #ss-content.part-02 .sec2 .img {height: 300px;}
  #ss-content.part-02 .sec3 {padding: 40px 0 0}
  #ss-content.part-02 .galerie {padding-bottom: 40px;}
  #ss-content.part-02 .sec4 .grid-list {grid-template-columns: 1fr;}
}

/* ====== part-03 ====== */
#ss-content.part-03 .grid-2 {gap:80px}
#ss-content.part-03 .sec1 ul {margin-top: 30px}
#ss-content.part-03 .sec1 li {margin-bottom: 50px}
#ss-content.part-03 .sec1 li.grid {grid-template-columns: 72px 1fr;gap:30px}
#ss-content.part-03 .sec1 li.grid h4 {margin-bottom: 5px}
#ss-content.part-03 .sec1 li.grid p {color:#444}
#ss-content.part-03 .sec2 {padding: 80px 0;}
#ss-content.part-03 .sec2 .grid {gap:150px}
#ss-content.part-03 .sec2 .grid img {border-radius: 8px;}
#ss-content.part-03 .sec2 .grid-item p.small {color:#A87EB4;margin: 20px 0;}
#ss-content.part-03 .sec3 {padding: 80px 0;}
#ss-content.part-03 .sec3 .grid {gap: 80px;margin-top: 40px;}
#ss-content.part-03 .sec3 .img {background: url('../img/remplacement-ecran-batterie-pc-portable.webp') no-repeat center;background-size: cover;border-radius: 8px;}
#ss-content.part-03 .sec3 blockquote {margin-top: 40px;}
#ss-content.part-03 .sec4 .container {padding: 40px;}
#ss-content.part-03 .sec4 .title {padding: 40px;}
@media (max-width:1366px){
  #ss-content.part-03 .grid-2 {gap:40px} 
  #ss-content.part-03 .sec2 .grid {gap:40px} 
  #ss-content.part-03 .sec3 .grid {gap: 40px;}
}
@media (max-width:1199px){
  #ss-content.part-03 .sec1 hr {margin-bottom: 60px;}
  #ss-content.part-03 .sec1 ul {margin-top: 0px}
  #ss-content.part-03 .grid-2 {gap:0px;grid-template-columns: 1fr;}
  #ss-content.part-03 .sec2 .grid {gap:0px;grid-template-columns: 1fr;}
  #ss-content.part-03 .sec2 .grid img {margin-top: 60px}
  #ss-content.part-03 .sec2 .grid-item:last-child {width: 360px;text-align: center;margin: 0 auto;}
  #ss-content.part-03 .sec3 .grid {gap:0px;grid-template-columns: 1fr;}
  #ss-content.part-03 .sec4 .carte {border:none;border-radius: 0;padding: 40px 0 0;}
}
@media (max-width:768px){
  #ss-content.part-03 .sec1 li:last-child {margin-bottom: 0;}
  #ss-content.part-03 .sec1 li.grid img {width: 36px;height: 36px;}
  #ss-content.part-03 .sec1 li.grid {grid-template-columns: 36px 1fr;gap:20px}
  #ss-content.part-03 .sec2 {padding: 40px 0;}
  #ss-content.part-03 .sec2 .grid {gap:00px}
  #ss-content.part-03 .sec2 .grid img {width: 90%;height: auto;}
  #ss-content.part-03 .sec2 .grid-item:last-child {width: 90%}
  #ss-content.part-03 .sec3 {padding: 40px 0;}
  #ss-content.part-03 .sec4 .carte {padding: 0}
}

/* ====== part-04 ====== */
#ss-content.part-04 .grid-2-1 {gap:80px}
#ss-content.part-04 .sec1 .grid img {border-radius: 8px;}
#ss-content.part-04 .sec1 .grid-item p.small {color:#A87EB4;margin: 20px 0;}
#ss-content.part-04 .sec1 img.marques {border-radius: 8px;padding: 25px;border: 1px solid rgba(0, 0, 0, .1);}
#ss-content.part-04 .sec2 {padding: 60px 0 0 0;}
#ss-content.part-04 .sec2 .carte {padding: 80px}
#ss-content.part-04 .sec2 blockquote {margin-top: 40px;}
#ss-content.part-04 .sec2 ul {margin: 20px 0 40px 0;}
#ss-content.part-04 .sec2 img.montage {border-radius: 8px;margin-bottom: 20px;}
@media (max-width:1366px){
  #ss-content.part-04 .grid {gap:40px}
  #ss-content.part-04 .sec1 img,#ss-content.part-04 .sec2 img {width: 100%;height: auto;}
}
@media (max-width:1199px){
  #ss-content.part-04 .sec2 .grid {grid-template-columns: 1fr;}
}
@media (max-width:1024px){
  #ss-content.part-04 .sec1 .grid-item.second {text-align: center;}
  #ss-content.part-04 .sec1 .grid-item p.small {width: 360px;margin: 20px auto 30px auto;}
  #ss-content.part-04 .sec1 img,#ss-content.part-04 .sec2 img {width: 360px;height: auto;margin-right: auto;margin-left: auto;}
  #ss-content.part-04 .sec2 {background: #fff;padding: 20px 0 40px 0;}
  #ss-content.part-04 .sec2 .carte {border:none;border-radius: 0;padding: 0;}
}
@media (max-width:768px){
  #ss-content.part-04 .sec1 {padding-bottom: 0;}
  #ss-content.part-04 .sec1 img,#ss-content.part-04 .sec2 img {width: 90%;height: auto;}  
  #ss-content.part-04 .sec1 .grid-item p.small {width: 90%}
}

/* ====== part-05 ====== */
#ss-content.part-05 {margin-bottom: -60px;}
#ss-content.part-05 .mignon {background: url('../../inc/img/mignon/recuperation-de-donnees.webp') no-repeat center;background-size: cover}
#ss-content.part-05 .sec1 ul {margin: 20px 0 40px 0}
#ss-content.part-05 .sec2 {padding: 40px 0 80px 0;background: #fff;}
#ss-content.part-05 .sec2 ul {margin-top: 50px}
#ss-content.part-05 .sec2 ul li {display: grid;grid-template-columns: 180px 1fr;}
#ss-content.part-05 .sec2 ul li:first-child {padding: 0 0 10px 0}
#ss-content.part-05 .sec2 ul li {padding: 10px 0}
#ss-content.part-05 .sec2 ul li:last-child {padding: 10px 0 0 0}
#ss-content.part-05 .sec2 img {border-radius: 8px;}
#ss-content.part-05 .sec2 .txt h4 {color:#f28e22;text-transform: uppercase}
#ss-content.part-05 .sec3 {padding: 80px 0;}
#ss-content.part-05 .sec3 .carte {padding: 80px;}
#ss-content.part-05 .sec3 .carte blockquote {margin: 40px 0;}
#ss-content.part-05 .sec3 .carte img {margin-top: 40px;}
@media (max-width:1024px){
  #ss-content.part-05 .sec2 img {margin-bottom: 10px;}
  #ss-content.part-05 .sec3 {padding: 40px 0;background: #fff;}
  #ss-content.part-05 .sec3 .carte {border:none;border-radius: 0;padding: 0;}
}
@media (max-width:768px){
  #ss-content.part-05 .sec2 ul {text-align: center;}
  #ss-content.part-05 .sec2 ul li {grid-template-columns: 1fr}
}

/* ====== part-06 ====== */
#ss-content.part-06 .mignon {background: url('../../inc/img/mignon/cours-informatique-domicile.webp') no-repeat center;background-size: cover}
#ss-content.part-06 .sec1 ul{margin-top: 40px}
#ss-content.part-06 .sec1 img {margin-top: 80px;}
#ss-content.part-06 .sec2 {padding: 80px 0;}
#ss-content.part-06 .sec2 .carte {padding: 80px;}
#ss-content.part-06 .sec2 .carte .grid {gap:80px}
#ss-content.part-06 .sec2 h4 {background: var(--main-color);color:#fff;padding: 10px 20px}
#ss-content.part-06 .sec2 ul {padding: 0px 0px 0px 25px;margin-bottom: 40px}
#ss-content.part-06 .sec2 ul li {list-style-type: disc;padding: 10px 0;border-bottom: 1px solid rgba(0, 0, 0, .05)}
#ss-content.part-06 .sec2 ul li::marker {color: var(--main-color)}
#ss-content.part-06 .sec2 .right {position: sticky;top:100px}
#ss-content.part-06 .sec2 .content-prix {border-radius:5px;background: #f7f3f9;padding: 50px;margin-bottom: 40px}
#ss-content.part-06 .sec2 .content-img {text-align:center}
#ss-content.part-06 .sec2 img {width: 80%}
@media (max-width:1199px){
  #ss-content.part-06 .sec2 {background: #fff;padding: 40px 0 80px 0;}
  #ss-content.part-06 .sec2 .carte {border:none;border-radius: 0;padding: 0;}
}
@media (max-width:1024px){
  #ss-content.part-06 .sec2 .grid {grid-template-columns: 1fr;} 
  #ss-content.part-06 .sec2 img {max-width: 512px}
}

/* ====== Contrat de Maintenance ====== */
#ss-content.part-contrat .mignon {background: url('../../inc/img/mignon/contrat-de-maintenance-bobmicro.webp') no-repeat center;background-size: cover}
#ss-content.part-contrat h2 {color:#fff}
#ss-content.part-contrat p.color {color: #f28e22;margin-bottom: 30px}
#ss-content.part-contrat p{color:#fff}
#ss-content.part-contrat .sec1 {padding-bottom: 80px;}
#ss-content.part-contrat .sec2 {background: #000;padding: 80px 0;}
#ss-content.part-contrat .sec2 .grid {gap:80px}
#ss-content.part-contrat .sec2 .content-prix {text-align: center;background: #f28e22;border:1px solid #f28e22;transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease}
#ss-content.part-contrat .sec2 .content-prix:hover {transform: translateY(-8px);box-shadow: 0 8px 20px rgba(242, 142, 34, 0.29);background: #000}
#ss-content.part-contrat .sec2 .content-prix small {color:#fff}
#ss-content.part-contrat .sec2 .content-prix .prix {color:#fff;font-size: 10rem;font-weight: 600;line-height: 1;position: relative;transition: color 0.3s ease}
#ss-content.part-contrat .sec2 .content-prix .prix sup {font-size: 2rem;font-weight: 500;position: absolute;top:10px;right:50px}
#ss-content.part-contrat .sec2 .content-prix:hover .prix {color: #f28e22}
#ss-content.part-contrat .sec2 .content-prix p strong {font-weight: 500;color: #fff;font-size: 1rem}
#ss-content.part-contrat .sec2 .content-prix hr {height: 3px;background-color: #fff;border: none;width: 80px;margin: 20px auto}
#ss-content.part-contrat .sec2 .content-prix p {color: #fff}
#ss-content.part-contrat .sec2 .content-prix a {margin-top: 40px}
#ss-content.part-contrat .sec2 .tableau {margin-top: 40px;border-radius: 8px;overflow: hidden;}
#ss-content.part-contrat .sec2 .tableau .grid {gap:0}
#ss-content.part-contrat .sec2 .tableau h3 {background: var(--main-color);color:#fff;padding:10px 15px;}
#ss-content.part-contrat .sec2 .tableau .avec,
#ss-content.part-contrat .sec2 .tableau .sans {text-align: center;}
#ss-content.part-contrat .sec2 .tableau .avec h3 {background:#F5BC7E}
#ss-content.part-contrat .sec2 .tableau ul li {padding: 15px 15px;border-bottom: 1px solid #333;color:#fff}
#ss-content.part-contrat .sec2 .tableau ul li:last-child {border-bottom: none;}
#ss-content.part-contrat .sec2 .tableau .sans,
#ss-content.part-contrat .sec2 .tableau .inter {background: #111}
#ss-content.part-contrat .sec2 .tableau .avec {background: #222;}
#ss-content.part-contrat .sec2 .tableau img {height: 15px;}
#ss-content.part-contrat .sec3 {padding: 80px 0 0;background: #111;}
#ss-content.part-contrat .sec3 p.small {color:#f28e22;margin-top: 30px}
#ss-content.part-contrat .sec3 .grid {gap: 80px;margin-top: 40px;}
#ss-content.part-contrat .sec3 .carte {background: #333;text-align: center;padding: 80px 40px;color:#fff;font-size: 2rem;transition: all 0.3s ease}
#ss-content.part-contrat .sec3 .carte:hover {background: #000;color:#f28e22;}
#ss-content.part-contrat .sec3 a {margin-bottom: 80px;}
#ss-content.part-contrat .sec3 ul {margin-top: 40px;}
#ss-content.part-contrat .sec3 ul h4 {color:#f28e22}
#ss-content.part-contrat .sec3 ul hr {background: #222;}
@media (max-width:1366px){
  #ss-content.part-contrat .sec2 .grid {gap:40px}
  #ss-content.part-contrat .sec3 .grid {gap: 40px}
}
@media (max-width:1199px){
  #ss-content.part-contrat .sec2 .grid-1-2 {grid-template-columns: 1fr;}
}
@media (max-width:1024px){
  #ss-content.part-contrat .sec1 {text-align: center;padding-bottom:40px}
  #ss-content.part-contrat .sec1 hr {margin-left: auto;margin-right: auto;}
  #ss-content.part-contrat .sec3 {text-align: center;}
  #ss-content.part-contrat .sec3 .title hr {margin-left: auto;margin-right: auto;}
  #ss-content.part-contrat .sec3 ul {text-align: left;}
  #ss-content.part-contrat .sec3 a {margin: 40px 0}
  #ss-content.part-contrat .sec3 .grid-2 {grid-template-columns: 1fr;}
}
@media (max-width:768px){
  #ss-content.part-contrat .sec2 .tableau .grid-2:first-child {grid-template-columns: 2fr 1fr;}
  #ss-content.part-contrat .sec2 .tableau h3 {font-size: .8rem;height: 50px;}
  #ss-content.part-contrat .sec2 .tableau ul li {font-size: .8rem;height: 70px;}
}

/* ====== pro-01 ====== */
#ss-content.pro-01 .mignon {background: url('../../inc/img/mignon/gestion-parc-informatique.webp') no-repeat center;background-size: cover}
#ss-content.pro-01 .sec1 ul {margin-top: 20px;}
#ss-content.pro-01 .sec1 .citation {margin-top: 50px}
#ss-content.pro-01 .sec1 .marques {margin-top: 40px}
#ss-content.pro-01 .sec2 {padding:80px 0}
#ss-content.pro-01 .sec2 .grid-list {margin-top: 40px;}
#ss-content.pro-01 .sec2 .carte {padding: 40px;text-align: center;}
#ss-content.pro-01 .sec2 .carte img {margin-bottom: 15px;}
#ss-content.pro-01 .sec2 .carte h3 {margin-bottom: 15px;}
#ss-content.pro-01 .sec3 {padding:80px 0;background: #fff}
#ss-content.pro-01 .sec3 h3 {margin-bottom: 40px}
#ss-content.pro-01 .sec3 .grid {gap: 80px;}
#ss-content.pro-01 .sec3 img {border-radius: 8px;margin-bottom: 20px;}
#ss-content.pro-01 .sec3 .texte-ssimg ul {margin: 20px 0 40px 0;}
@media (max-width:1366px){
  #ss-content.pro-01 .sec2 .carte {padding: 40px 20px;text-align: center;}
}
@media (max-width:1199px){
  #ss-content.pro-01 .marques .grid img {width: 80%;height: auto;}
  #ss-content.pro-01 .marques .grid .grid-item:nth-child(2) img {max-height: 80px;width: auto}
  #ss-content.pro-01 .sec2 .grid-list {grid-template-columns: 1fr 1fr;}
  #ss-content.pro-01 .sec3 img {width: 100%;height: auto;}
}
@media (max-width:1024px){
  #ss-content.pro-01 .marques .grid img {max-width: 133px}
  #ss-content.pro-01 .marques .grid {grid-template-columns: 1fr 1fr 1fr;} 
  #ss-content.pro-01 .sec3 .grid {grid-template-columns: 1fr;}
  #ss-content.pro-01 .sec3 img {width: 360px;height: auto;margin-right: auto;margin-left: auto;}

}
@media (max-width:768px){
  #ss-content.pro-01 .marques .grid .grid-item:nth-child(2) img {max-height: 40px}
  #ss-content.pro-01 .sec2 .grid-list {grid-template-columns: 1fr}
}

/* ====== pro-02 ====== */
#ss-content.pro-02 .mignon {background: url('../../inc/img/mignon/email-drive-entreprise.webp') no-repeat center;background-size: cover}
#ss-content.pro-02 .sec1 ul {margin-top: 20px;}
#ss-content.pro-02 .sec2 {background: #fff;padding: 20px 0 40px 0;} 
#ss-content.pro-02 .sec2 .grid {gap:80px;padding: 40px 0;}
#ss-content.pro-02 .sec2 ul {margin: 20px 0}
#ss-content.pro-02 .sec2 p.small {font-size: .8rem;color:#A87EB4}
@media (max-width:1366px){
  #ss-content.pro-02 .sec2 {background: #fff;padding-top: 0;}  
} 
@media (max-width:1199px){
  #ss-content.pro-02 .sec2 .grid {grid-template-columns: 1fr;} 
}
@media (max-width:1024px){
  #ss-content.pro-02 .sec2 {padding: 0;} 
}

/* ====== pro-03 ====== */
#ss-content.pro-03 .sec1 {padding-bottom: 80px;}
#ss-content.pro-03 .sec1 .mignon {background: url('../../inc/img/mignon/sauvegarde-cloud-externe.webp') no-repeat center;background-size: cover}
#ss-content.pro-03 .sec1 .logo {text-align: right;}
#ss-content.pro-03 .sec1 blockquote {margin: 30px 0 50px 0;}
#ss-content.pro-03 .sec1 ul {margin: 20px 0;}
#ss-content.pro-03 .sec1 .grid {gap:50px}
#ss-content.pro-03 .sec2 {padding: 60px 0 80px 0;}
#ss-content.pro-03 .sec2 .carte {padding: 40px;}
#ss-content.pro-03 .sec2 .carte h4 {color:#f28e22;margin-bottom: 15px;text-transform: uppercase;}
#ss-content.pro-03 .sec3 {background: #fff;padding: 80px 0;margin-bottom: 80px}
#ss-content.pro-03 .sec3 ul {margin: 20px 0;}
#ss-content.pro-03 .sec3 .carte {padding: 30px 20px;margin-bottom: 20px;color:#A87EB4;background: #F7F3F9;border-color: #A87EB4}
#ss-content.pro-03 .sec3 .carte svg {stroke :#A87EB4;margin-right: 5px;}
@media (max-width:1024px){
  #ss-content.pro-03 .sec1 {padding-bottom: 40px;}
  #ss-content.pro-03 .sec1 .grid-2 {gap:0;grid-template-columns: 1fr 1fr;} 
  #ss-content.pro-03 .sec1 .grid-2 .logo img {width: 50%;height: auto;}
  #ss-content.pro-03 .sec2 .grid {grid-template-columns: 1fr;}
  #ss-content.pro-03 .sec3 .grid {grid-template-columns: 1fr;}
  #ss-content.pro-03 .sec3 {padding-bottom: 40px;}
} 
@media (max-width:768px){
  #ss-content.pro-03 .sec1 .grid-2 {grid-template-columns: 1fr;}
  #ss-content.pro-03 .sec1 .grid-2 .title {order: 2;text-align: center;}
  #ss-content.pro-03 .sec1 .grid-2 .title hr {margin-left: auto;margin-right: auto}
  #ss-content.pro-03 .sec1 .grid-2 .logo {order:1;text-align: center}
  #ss-content.pro-03 .sec1 .grid-2 .logo img {width: 50%;height: auto;margin-bottom: 20px;}
  #ss-content.pro-03 .sec3 {padding-top: 40px;}
}

/* ====== pro-04 ====== */
#ss-content.pro-04 .mignon {background: url('../../inc/img/mignon/infrastructures-serveurs-reseaux.webp') no-repeat center;background-size: cover}
#ss-content.pro-04 .sec1 ul {margin-top: 20px;}
#ss-content.pro-04 .sec1 .citation {margin-top: 50px}
#ss-content.pro-04 .sec1 .marques {margin-top: 40px}
#ss-content.pro-04 .sec2 {padding: 80px 0}
#ss-content.pro-04 .sec2 ul {margin-top: 50px}
#ss-content.pro-04 .sec2 ul li {display: grid;grid-template-columns: 180px 1fr;}
#ss-content.pro-04 .sec2 ul li:first-child {padding: 0 0 10px 0}
#ss-content.pro-04 .sec2 ul li {padding: 10px 0}
#ss-content.pro-04 .sec2 ul li:last-child {padding: 10px 0 0 0}
#ss-content.pro-04 .sec2 img {border-radius: 8px;}
#ss-content.pro-04 .sec2 .txt h4 {color:#f28e22;text-transform: uppercase}
@media (max-width:1199px){
  #ss-content.pro-04 .marques .grid img {width: 80%;height: auto;}
  #ss-content.pro-04 .marques .grid .grid-item:nth-child(2) img {max-height: 80px;width: auto}
}
@media (max-width:1024px){
  #ss-content.pro-04 .sec2 img {margin-bottom: 10px;}
  #ss-content.pro-04 .marques .grid img {max-width: 133px}
  #ss-content.pro-04 .marques .grid {grid-template-columns: 1fr 1fr 1fr;} 
}
@media (max-width:768px){
  #ss-content.pro-04 .marques .grid .grid-item:nth-child(2) img {max-height: 40px}
  #ss-content.pro-04 .sec2 ul {text-align: center;}
  #ss-content.pro-04 .sec2 ul li {grid-template-columns: 1fr}
}

/* ====== pro-05 ====== */
#ss-content.pro-05 .mignon {background: url('../../inc/img/mignon/copieur-imprimante-professionnel.webp') no-repeat center;background-size: cover}
#ss-content.pro-05 .sec1 ul {margin-top: 20px;}
#ss-content.pro-05 .sec1 .marques {margin-top: 60px;}
#ss-content.pro-05 .sec2 {padding:120px 0;background: url('../../inc/img/bg-copieur.webp') no-repeat center;background-size: cover}
#ss-content.pro-05 .sec2 .title h2 {color:#f28e22}
#ss-content.pro-05 .sec2 .title p {color:#fff}
#ss-content.pro-05 .sec2 u.red {color: #ff3333}
#ss-content.pro-05 .sec3 {padding:80px 0 0}
#ss-content.pro-05 .sec3 p {margin-top: 10px;}
#ss-content.pro-05 .sec3 .grid {gap:80px}
#ss-content.pro-05 .sec3 .img {text-align: right;}
@media (max-width:1199px){
  #ss-content.pro-05 .marques .grid img {width: 80%;height: auto;}
  #ss-content.pro-05 .marques .grid .grid-item:nth-child(6) img {max-height: 80px;width: auto}
  #ss-content.pro-05 .sec3 .grid {gap:50px}
}
@media (max-width:1024px){
  #ss-content.pro-05 .marques .grid img {max-width: 133px}
  #ss-content.pro-05 .marques .grid {grid-template-columns: 1fr 1fr 1fr;} 
  #ss-content.pro-05 .sec3 .grid {gap:0px;grid-template-columns: 1fr}
  #ss-content.pro-05 .sec3 .img {text-align: center;margin-top: 40px;}
  #ss-content.pro-05 .sec3 .img img {}
}
@media (max-width:768px){
  #ss-content.pro-05 .marques .grid .grid-item:nth-child(6) img {max-height: 40px}
}

/* ====== pro-06 ====== */
#ss-content.pro-06 .mignon {background: url('../../inc/img/mignon/cybersecurite-antivirus.webp') no-repeat center;background-size: cover}
#ss-content.pro-06 .sec1 ul {margin-top: 20px;}
#ss-content.pro-06 .sec1 .citation {margin-top: 50px}
#ss-content.pro-06 .sec1 .marques {margin-top: 40px}
#ss-content.pro-06 .sec2 {padding: 80px 0;}
#ss-content.pro-06 .sec2 .carte.title {padding: 60px;}
#ss-content.pro-06 .sec2 .carte {padding: 20px;}
#ss-content.pro-06 .sec2 .carte .content-prix {height: 100%;padding: 40px 20px;}
#ss-content.pro-06 .sec2 .carte .content-prix .prix {font-size: 4rem;letter-spacing: -2px;margin-top: 5px;}
#ss-content.pro-06 .sec2 .carte .content-prix p.p {margin-bottom: 40px;}
#ss-content.pro-06 .sec2 .carte .content-prix hr {margin-bottom: 40px;}
#ss-content.pro-06 .sec2 .carte .content-prix hr.small {margin-bottom: 10px;}
#ss-content.pro-06 .sec2 .grid {gap:50px}
#ss-content.pro-06 .sec2 p {margin-top: 10px;}
#ss-content.pro-06 .sec2 ul {margin-top: 10px;}
@media (max-width:1366px){
  #ss-content.pro-06 .sec2 .grid {gap: 25px;} 
  #ss-content.pro-06 .sec2 .carte {padding: 0px;border-radius: 8px;}
}
@media (max-width:1199px){
  #ss-content.pro-06 .marques .grid img {width: 80%;height: auto;}
}
@media (max-width:1024px){
  #ss-content.pro-06 .marques .grid img {max-width: 133px}
  #ss-content.pro-06 .marques .grid {grid-template-columns: 1fr 1fr} 
  #ss-content.pro-06 .sec2 .grid {gap: 25px;grid-template-columns: 1fr;} 
}
@media (max-width:768px){
  #ss-content.pro-06 .sec2 {background: #fff;padding: 40px 0;}
  #ss-content.pro-06 .sec2 .carte.title {padding: 0px;border-radius: 0;border: none;}
  #faq.pro-06 {padding-top: 40px;}
}

/* ====== pro-07 ====== */
#ss-content.pro-07 .mignon {background: url('../../inc/img/mignon/location-materiel-informatique.webp') no-repeat center;background-size: cover}
#ss-content.pro-07 .sec1 ul {margin-top: 20px;}
#ss-content.pro-07 .sec1 .citation {margin-top: 50px}
#ss-content.pro-07 .sec1 .marques {margin-top: 40px}
#ss-content.pro-07 .sec2 {padding: 40px 0 80px 0;background: #fff;}
#ss-content.pro-07 .sec2 .item {background: #f8f8f8;border-radius: 8px;margin-bottom: 40px;padding: 40px 60px;text-align: left;}
#ss-content.pro-07 .sec2 .item .grid {grid-template-columns: 150px 1fr;gap:30px}
#ss-content.pro-07 .sec2 .item .grid .img {border-radius: 5px;}
#ss-content.pro-07 .sec2 .item .grid .img.ecran {background: url('../../inc/img/location/ecran.webp') no-repeat center;background-size: cover}
#ss-content.pro-07 .sec2 .item .grid .img.valise {background: url('../../inc/img/location/valise.webp') no-repeat center;background-size: cover}
#ss-content.pro-07 .sec2 .item .grid .img.copieur {background: url('../../inc/img/location/copieur.webp') no-repeat center;background-size: cover}
#ss-content.pro-07 .sec2 .item .grid .img.casque {background: url('../../inc/img/location/casque.webp') no-repeat center;background-size: cover}
#ss-content.pro-07 .sec2 .item .grid .img.pc {background: url('../../inc/img/location/pc.webp') no-repeat center;background-size: cover}
#ss-content.pro-07 .sec2 .item .grid .img.box {background: url('../../inc/img/location/box.webp') no-repeat center;background-size: cover}
#faq.pro-07 {padding-top: 80px;}
@media (max-width:1024px){
  #ss-content.pro-07 .sec2 .item {padding: 30px;}
}
@media (max-width:768px){
  #ss-content.pro-07 .sec2 .item .grid .img {height: 150px;}
  #ss-content.pro-07 .sec2 .item .grid {grid-template-columns: 1fr;gap:30px}
  #ss-content.pro-07 .sec2 {padding: 40px 0}
}

/* ====== gamer ====== */
#ss-content.gamer .sec1{background: #111111;padding-bottom: 80px;}
#ss-content.gamer .sec1 .mignon {background: url('../../inc/img/mignon/pc-gamer-bobmicro.webp') no-repeat center;background-size: cover}
#ss-content.gamer .sec1 h2,#ss-content.gamer .sec1 p {color:#fff}
#ss-content.gamer .citation {margin-top: 50px;background: #111;}
#ss-content.gamer .citation .container {background: #000;border:1px solid var(--main-color)}
#ss-content.gamer .citation p::before,
#ss-content.gamer .citation p::after {color:var(--main-color);opacity: 1}
#ss-content.gamer .citation p strong {color:var(--main-color)}
#ss-content.gamer .marques {margin-top: 80px}
#ss-content.gamer .sec2 {padding:100px 0 120px 0;background: url('../../inc/img/bg-bobgamer.webp') no-repeat center;background-size: cover;background-attachment: fixed}
#ss-content.gamer .sec2 h2 {color:#fff}
#ss-content.gamer .sec2 .title p {color:#fff;width: 80%;margin-left: auto;margin-right: auto;}
#ss-content.gamer .sec2 .grid-list {margin-top: 40px;}
#ss-content.gamer .sec2 .carte {padding: 50px 30px;text-align: center;border: 1px solid  rgba(230, 0, 0, 0.5);background: rgba(0, 0, 0, .5);transition: all 0.3s ease}
#ss-content.gamer .sec2 .carte img {margin-bottom: 15px;}
#ss-content.gamer .sec2 .carte h3 {margin-bottom: 15px;color:var(--main-color)}
#ss-content.gamer .sec2 .carte p.small {color:#fff;font-size: .8rem}
#ss-content.gamer .sec2 .carte:hover {box-shadow: 0 8px 20px rgba(230, 0, 0, 0.29);background: rgba(0, 0, 0, 1)}
#ss-content.gamer .sec3 {padding: 120px 0;background: #222;}
#ss-content.gamer .sec3 .grid {gap: 80px;}
#ss-content.gamer .sec3 h2 {color:#fff}
#ss-content.gamer .sec3 ul.number {margin-top: 50px;}
#ss-content.gamer .sec3 ul.number li {padding: 30px 20px;}
#ss-content.gamer .sec3 ul.number li.col {background: #000;padding: 20px;border-radius: 5px;}
#ss-content.gamer .sec3 ul.number li h4 {color:var(--main-color)}
#ss-content.gamer .sec3 ul.number li p {color:#fff}
#ss-content.gamer .sec3 img.radius {border-radius: 8px;margin-bottom: 20px;}
#ss-content.gamer .sec3 .texte-ssimg {color: #fff;}
#ss-content.gamer .sec3 .texte-ssimg ul {margin: 20px 0 30px 0;}
#ss-content.gamer .sec3 .texte-ssimg ul li {color: #fff;}
#ss-content.gamer .sec3 .btn-violet {background:var(--main-color);border-color:var(--main-color)}
#ss-content.gamer .sec3 .btn-violet:hover {background: transparent;color:var(--main-color)}
#ss-content.gamer .galerie {background: #000;}
#ss-content.gamer .galerie .grid-item img:hover {box-shadow: 0 8px 20px rgba(230, 0, 0, 0.29)}
@media (max-width:1366px){
  #ss-content.gamer .sec2 .grid {grid-template-columns: 1fr 1fr;}
  #ss-content.gamer .sec3 .grid {gap: 40px;}
}
@media (max-width:1199px){
  #ss-content.gamer .marques .grid img {width: 80%;height: auto;}
  #ss-content.gamer .marques .grid .grid-item:nth-child(4) img,
  #ss-content.gamer .marques .grid .grid-item:nth-child(5) img {max-height: 80px;width: auto}
  #ss-content.gamer .sec3 .grid {grid-template-columns: 1fr;}
}
@media (max-width:1024px){
  #ss-content.gamer .marques .grid img {max-width: 133px}
  #ss-content.gamer .marques .grid {grid-template-columns: 1fr 1fr 1fr;} 
  #ss-content.gamer .sec2 {padding:80px 0;}
  #ss-content.gamer .sec3 {padding:80px 0;}
}
@media (max-width:768px){
  #ss-content.gamer .marques .grid .grid-item:nth-child(4) img,
  #ss-content.gamer .marques .grid .grid-item:nth-child(5) img {max-height: 40px}
  #ss-content.gamer .sec2 .grid {grid-template-columns: 1fr;}
  #ss-content.gamer .sec2 .title p {width:100%;}
}

/* ====== Apple ====== */
#ss-content.apple .btn-violet {background:var(--main-color);border-color:var(--main-color)}
#ss-content.apple .btn-violet:hover {background: transparent;color:var(--main-color)}
#ss-content.apple .sec1 {padding-bottom: 80px;}
#ss-content.apple .sec1 .mignon {background: url('../../inc/img/mignon/reparation-vente-apple-iphone-mac.webp') no-repeat center;background-size: cover}
#ss-content.apple .sec1 .logo {text-align: right;}
#ss-content.apple .sec1 ul {margin-top: 40px;}
#ss-content.apple .sec1 .grid-1-2 {gap:50px}
#ss-content.apple .sec1 .grid-item {padding: 25px 0;}
#ss-content.apple .citation {background: linear-gradient(to bottom, #fff 50%, #f8f8f8 50%);}
#ss-content.apple .citation .container {background: #151515;border:none}
#ss-content.apple .citation p::before,
#ss-content.apple .citation p::after {color:var(--main-color);opacity: 1}
#ss-content.apple .citation p strong {color:#fff}
#ss-content.apple .citation p {color:#fff}
#ss-content.apple .sec2 {padding: 80px 0;}
#ss-content.apple .sec2 .carte {padding: 40px;border: 1px solid rgba(0, 0, 0, .1)}
#ss-content.apple .sec2 .carte img {margin-bottom: 15px;}
#ss-content.apple .sec2 .carte ul {margin-top: 15px;}
#ss-content.apple .sec2 .carte ul li {padding: 10px 0;border-top: 1px solid rgba(0, 0, 0, .1)}
#ss-content.apple .sec2 .carte:hover {box-shadow: 0 8px 20px rgba(0, 0, 0, .1)}
#ss-content.apple .sec3 {padding-bottom: 80px;}
#ss-content.apple .sec3 ul {margin-top: 40px;}
#ss-content.apple .sec3 .img {background: url('../../inc/img/specialiste-apple-loir-et-cher-loiret.webp') no-repeat center;background-size: cover;border-radius: 8px}
#ss-content.apple .sec4 {background: #fff;padding: 80px 0;}
#ss-content.apple .sec4 .grid {gap:50px}
#ss-content.apple .sec4 .img {background: url('../../inc/img/vente-apple-ipad-iphone-imac-loir-et-cher.webp') no-repeat center;background-size: cover;border-radius: 8px;}
#ss-content.apple .sec4 ul {margin-top: 40px;}
#ss-content.apple .sec4 ul li {margin-bottom: 15px}

#ss-content.apple .sec4 .action {background: #151515;border-radius: 8px;padding: 40px 60px;margin: 80px 0;}
#ss-content.apple .sec4 .action h2,
#ss-content.apple .sec4 .action p,
#ss-content.apple .sec4 .action li {color:#fff}

@media (max-width:1366px){
  img.montage {width: 1024px;height: 358px;}
}

@media (max-width:1199px){
  #ss-content.apple .sec2 .carte {padding: 30px}  
  #ss-content.apple .sec4 .grid {gap:25px}
  img.montage {width: 100%;height: auto}
}

@media (max-width:1024px){
  #ss-content.apple .sec1 .grid-item {padding: 0;}
  #ss-content.apple .sec1 .grid-2 {gap:0;grid-template-columns: 1fr 1fr;} 
  #ss-content.apple .sec1 .grid-2 .logo img {}
  #ss-content.apple .sec2 .grid {grid-template-columns: 1fr;text-align: center;}
  #ss-content.apple .sec2 .grid {grid-template-columns: 1fr}
  #ss-content.apple .sec3 .grid {grid-template-columns: 1fr;text-align: center;}
  #ss-content.apple .sec3 .grid-item {order: 0;}
  #ss-content.apple .sec3 .title {max-width: 80%;margin: 40px auto 0px auto;order:1}
  #ss-content.apple .sec3 .title hr {margin-left: auto;margin-right: auto}
  #ss-content.apple .sec3 .title ul.check li {list-style:none;border-top: 1px solid rgba(0, 0, 0,.1);padding: 8px 0;margin: 0;}
  #ss-content.apple .sec3 .img {height: 350px}
  #ss-content.apple .sec4 .grid {grid-template-columns: 1fr}
  #ss-content.apple .sec4 .img {height: 350px;margin-bottom: 40px;}
} 
@media (max-width:768px){
  #ss-content.apple .sec1 .grid-2 {grid-template-columns: 1fr;}
  #ss-content.apple .sec1 .grid-2 .title {order: 2;text-align: center;}
  #ss-content.apple .sec1 .grid-2 .title hr {margin-left: auto;margin-right: auto}
  #ss-content.apple .sec1 .grid-2 .logo {order:1;text-align: center}
  #ss-content.apple .sec1 .grid-2 .logo img {margin-bottom: 20px;}
  #ss-content.apple .sec2 {padding: 80px 0;}
  #ss-content.apple .sec3 .title {max-width: 100%}
  #ss-content.apple .sec3 .swiper {height: 350px;}
  #ss-content.apple .sec4 .img {height: 200px;margin-bottom: 40px;}
  #ss-content.apple .sec4 .action {padding: 30px;margin: 40px 0 80px 0;}
}



/*
/*
/* ---------------------------------------------- */
/*                                                */
/* ========= PAGE - ANNEXES ========== */
/*                                                */
/* ---------------------------------------------- */
/* Service Annexes */
#ss-content.list-annexe {padding : 50px 0;background: #fff;}
#ss-content.list-annexe .item {background: #f8f8f8;border-radius: 8px;margin-bottom: 40px;padding: 40px 60px;}
#ss-content.list-annexe .item .grid {grid-template-columns: 150px 1fr;gap:30px}
#ss-content.list-annexe .item .grid .img {border-radius: 5px;}
@media (max-width:1024px){
  #ss-content.list-annexe .item {padding: 30px;}
}
@media (max-width:768px){
  #ss-content.list-annexe {padding : 25px 0}
  #ss-content.list-annexe .item .grid .img {height: 150px;}
  #ss-content.list-annexe .item .grid {grid-template-columns: 1fr;gap:30px}
}
/* Clients zone d'intervention */
#ss-content.zone {background: #fff;}
#ss-content.zone .sec1 {padding-bottom: 80px;background: #fff;}
#ss-content.zone .sec1 .grid {gap:50px}
#ss-content.zone .sec1 ul {margin: 30px 0}
#ss-content.zone .sec1 .img {background: url('../img/zones-intervention-bobmicro.webp') no-repeat center;background-size: cover;border-radius: 8px}
#ss-content.zone .sec1 .marques {margin-top: 80px}
#ss-content.zone .sec2 {padding: 80px 0 40px;background: #f8f8f8;}
#ss-content.zone .sec2 .title p {width:80%;margin-left:auto;margin-right: auto}
#ss-content.zone .sec2 .zone-map {position: relative;margin: 50px auto 50px auto;width: 800px;height: 573px;background: url('../img/zone-intervention-bobmicro.webp') no-repeat center;background-size: cover}
#ss-content.zone .sec2 .zone-map h6.ville {position: absolute;margin-top: -20px;transform: translate(-50%, 0);text-align: center;font-weight: 500;font-size: .8rem;transition: color 0.3s ease;padding: 20px 10px 10px 10px;cursor: pointer}
#ss-content.zone .sec2 .zone-map h6.ville::before {content: "";position: absolute;top: 10px;left: 50%;transform: translateX(-50%);border-radius: 50%;}
#ss-content.zone .sec2 .zone-map h6.ville.beaugency::before {content: "";position: absolute;top: 40px;left: 50%;transform: translateX(-50%);border-radius: 50%;width: 8px;height: 8px;background-color: #f28e22;transition: background-color 0.3s ease;animation: pulse 3s ease-in-out infinite;}
#ss-content.zone .sec2 .zone-map h6.ville.mer {top: 40.7%; left: 51.7%; color: #1c1c1c; font-size: 1rem; font-weight: 600;}
#ss-content.zone .sec2 .zone-map h6.ville.beaugency {top: 22.1%; left: 57.0%; color: #f28e22;}
#ss-content.zone .sec2 .zone-map h6.ville.orleans {top: 9.8%; left: 67.8%; color: #f28e22;}
#ss-content.zone .sec2 .zone-map h6.ville.tours {top: 89.5%; left: 15.0%; color: #f28e22;}
#ss-content.zone .sec2 .zone-map h6.ville.vendome {top: 37.7%; left: 26.7%; color: #fff;}
#ss-content.zone .sec2 .zone-map h6.ville.blois {top: 56.7%; left: 44.2%; color: #fff;}
#ss-content.zone .sec2 .zone-map h6.ville.romorantin {top: 70.9%; left: 71.7%; color: #1c1c1c; font-size: 1rem; font-weight: 600;}
#ss-content.zone .sec2 .zone-map h6.ville.vierzon {top: 82.6%; left: 90.5%; color: #f28e22;}
#ss-content.zone .sec2 .zone-map h6.ville.beauce {top: 15.6%; left: 44.2%; color: #fff;}
#ss-content.zone .sec2 .zone-map h6.ville.neung {top: 50.0%; left: 73.3%; color: #fff;}
#ss-content.zone .sec2 .zone-map h6.ville.controis {top: 75.6%; left: 50.8%; color: #fff;}
#ss-content.zone .sec2 .zone-map h6.ville.mer::before,
#ss-content.zone .sec2 .zone-map h6.ville.romorantin::before {width: 26px;height: 20px;top: 0px;border-radius: 0px;background: url('../img/logo-tete-bobmicro.webp') no-repeat center;background-size: cover}
#ss-content.zone .sec2 .zone-map h6.ville.vendome::before,
#ss-content.zone .sec2 .zone-map h6.ville.blois::before,
#ss-content.zone .sec2 .zone-map h6.ville.beauce::before,
#ss-content.zone .sec2 .zone-map h6.ville.neung::before,
#ss-content.zone .sec2 .zone-map h6.ville.controis::before {width: 8px;height: 8px;background-color: #fff;transition: background-color 0.3s ease;animation: pulse 2s ease-in-out infinite;}
#ss-content.zone .sec2 .zone-map h6.ville.orleans::before,
#ss-content.zone .sec2 .zone-map h6.ville.tours::before,
#ss-content.zone .sec2 .zone-map h6.ville.vierzon::before {width: 8px;height: 8px;background-color: #f28e22;transition: background-color 0.3s ease;animation: pulse 3s ease-in-out infinite;}
#ss-content.zone .sec2 .tooltip-box {position: absolute; background: #1c1c1c; color: #eee; padding: 15px 20px; border-radius: 6px; font-size: 0.85rem; font-weight: 300; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.2); z-index: 9;opacity: 0; pointer-events: none; animation: fadeInTooltip 0.3s ease forwards; text-align: center}
#ss-content.zone .sec2 .tooltip-box strong {color: #f28e22;font-weight: 600;display: block;text-transform: uppercase}
#ss-content.zone .sec2 .tooltip-box::after {content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: #1c1c1c transparent transparent transparent}
#ss-content.zone .sec3 {padding: 80px 0;}
#ss-content.zone .sec3 .grid {gap:80px}
#ss-content.zone .sec3 ul {margin: 30px 0 0px 0;}
#ss-content.zone .sec3 .grid .img {background: url('../img/bobmicro-loir-et-cher-loiret.webp') no-repeat center;background-size: cover;border-radius: 8px;}


@media (max-width:1199px){
  #ss-content.zone .sec1 .marques .grid img {width: 80%;height: auto;}
  #ss-content.zone .sec2 .zone-map {width: 600px;height: 430px;margin: 50px auto 40px auto;}
  #ss-content.zone .sec3 .grid {gap:50px}

}
@media (max-width:1024px){
  #ss-content.zone .sec1 .img {height: 350px;}
  #ss-content.zone .sec1 .marques .grid img {max-width: 133px}
  #ss-content.zone .sec1 .marques .grid {grid-template-columns: 1fr 1fr 1fr;} 
  #ss-content.zone .sec2 .title p {width:100%}
  #ss-content.zone .sec3 .grid .img {height: 450px}
  #ss-content.zone .sec3 .grid {grid-template-columns: 1fr;}
}
@media (max-width:768px){
  #ss-content.zone .sec2 {padding: 40px 0}
  #ss-content.zone .sec2 .zone-map {width: 320px;height: 229px}
  #ss-content.zone .sec2 .zone-map h6.ville {font-size: .6rem;}
  #ss-content.zone .sec2 .zone-map h6.ville.mer,#nosboutiques .zone-map h6.ville.romorantin {font-size: .7rem;}
  #ss-content.zone .sec2 .zone-map h6.ville.mer::before,
  #ss-content.zone .sec2 .zone-map h6.ville.romorantin::before {width: 20px;height: 16px;top: 5px}
  #ss-content.zone .sec2 .zone-map h6.ville.vendome::before,
  #ss-content.zone .sec2 .zone-map h6.ville.blois::before,
  #ss-content.zone .sec2 .zone-map h6.ville.beauce::before,
  #ss-content.zone .sec2 .zone-map h6.ville.neung::before,
  #ss-content.zone .sec2 .zone-map h6.ville.controis::before {width: 5px;height: 5px;}
  #ss-content.zone .sec2 .zone-map h6.ville.orleans::before,
  #ss-content.zone .sec2 .zone-map h6.ville.tours::before,
  #ss-content.zone .sec2 .zone-map h6.ville.vierzon::before {width: 5px;height: 5px;}
  #ss-content.zone .sec2 .zone-map h6.ville.beaugency {top: 20%; left: 60.0%}
  #ss-content.zone .sec2 .zone-map h6.ville.beaugency::before {top: 35px;left: 40%;width: 5px;height: 5px}
  #ss-content.zone .sec3 {padding: 40px 0;}
  #ss-content.zone .sec3 .grid .img {max-width: 100%;height: 300px}
}

/* Programme assoc et CE */
#ss-content.assoc .sec1 {padding-bottom: 80px;}
#ss-content.assoc .sec1 .grid {gap:80px}
#ss-content.assoc .sec1 .title {padding: 25px 0;}
#ss-content.assoc .sec1 .title h3 {margin-top: 20px;}
#ss-content.assoc .sec1 .title ul {margin-top: 20px;}
#ss-content.assoc .sec1 .swiper {position: relative;height: 450px; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; cursor: grab; user-select: none; overflow: hidden;touch-action: pan-y; }
#ss-content.assoc .sec1 .swiper-wrapper {display: flex;flex-grow: 1;transition: transform 0.5s ease;will-change: transform;width: 100%;height: 100%;touch-action: pan-y}
#ss-content.assoc .sec1 .swiper-slide {flex-shrink: 0;min-width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 2rem}
#ss-content.assoc .sec1 .swiper-slide.slide1 {background: url('../img/partenariat/partenaire-bobmicro-1.webp') no-repeat center;background-size: cover}
#ss-content.assoc .sec1 .swiper-slide.slide2 {background: url('../img/partenariat/partenaire-bobmicro-2.webp') no-repeat center;background-size: cover}
#ss-content.assoc .sec1 .swiper-slide.slide3 {background: url('../img/partenariat/partenaire-bobmicro-3.webp') no-repeat top;background-size: cover}
#ss-content.assoc .sec1 .swiper-slide.slide4 {background: url('../img/partenariat/partenaire-bobmicro-4.webp') no-repeat center;background-size: cover}
#ss-content.assoc .sec1 .swiper-slide.slide5 {background: url('../img/partenariat/partenaire-bobmicro-5.webp') no-repeat center;background-size: cover}
#ss-content.assoc .sec1 .swiper-slide.slide6 {background: url('../img/partenariat/partenaire-bobmicro-6.webp') no-repeat center;background-size: cover}
#ss-content.assoc .sec1 .swiper-slide.slide7 {background: url('../img/partenariat/partenaire-bobmicro-7.webp') no-repeat center;background-size: cover}
#ss-content.assoc .sec1 .swiper-slide.slide8 {background: url('../img/partenariat/partenaire-bobmicro-8.webp') no-repeat center;background-size: cover}
#ss-content.assoc .sec1 .swiper-slide.slide9 {background: url('../img/partenariat/partenaire-bobmicro-9.webp') no-repeat center;background-size: cover}
#ss-content.assoc .sec1 .swiper-slide.slide10 {background: url('../img/partenariat/partenaire-bobmicro-10.webp') no-repeat center;background-size: cover}
#ss-content.assoc .sec1 .swiper-button-prev,
#ss-content.assoc .sec1 .swiper-button-next {position: absolute;top: 50%;transform: translateY(-50%);padding: 10px;background: rgba(0, 0, 0, 0.05);border-radius: 50%;cursor: pointer;z-index: 10;user-select: none;transition: background 0.3s ease}
#ss-content.assoc .sec1 .swiper-button-prev:hover,
#ss-content.assoc .sec1 .swiper-button-next:hover {background: rgba(0, 0, 0, 0.25)}
#ss-content.assoc .sec1 .swiper-button-prev svg,
#ss-content.assoc .sec1 .swiper-button-next svg {display: block}
#ss-content.assoc .sec1 .swiper-button-prev {left: 5px}
#ss-content.assoc .sec1 .swiper-button-next {right: 5px}
#ss-content.assoc .sec1 .swiper-pagination {position: absolute;bottom: 5px;width: 100%;text-align: center}
#ss-content.assoc .sec1 .swiper-pagination span {display: inline-block;width: 8px;height: 8px;background: #333;border-radius: 50%;margin: 0 5px;cursor: pointer;transition: background 0.3s}
#ss-content.assoc .sec1 .swiper-pagination .active {background: #eee}
#ss-content.assoc .sec1 .swiper-wrapper.grabbing {cursor: grabbing}
#ss-content.assoc .sec2 {padding: 80px 0;}
#ss-content.assoc .sec2 .carte {text-align: center;padding: 80px;}
#ss-content.assoc .sec2 .carte span {font-size: 3rem;font-weight: 700;}
#ss-content.assoc .sec2 .carte h4 {color:#f28e22;font-size: 1.5rem}
#ss-content.assoc .sec2 .carte p {color:#999;font-size: .8rem}
#ss-content.assoc .sec2 .title p {width: 80%;margin-left: auto;margin-right: auto;margin-bottom: 40px;}
@media (max-width:1366px){
  #ss-content.assoc .sec1 .grid {gap:50px} 
}
@media (max-width:1024px){
  #ss-content.assoc .sec2 .grid {grid-template-columns: 1fr;}
}
@media (max-width:768px){
  #ss-content.assoc .sec1 {padding-bottom: 50px;}
  #ss-content.assoc .sec1 .title {padding: 0;}
  #ss-content.assoc .sec2 {padding: 40px 0 80px 0;}
}

/* Recrutement */
#ss-content.recrutement {padding : 50px 0;background: #fff;}
#ss-content.recrutement .item {background: #f8f8f8;border-radius: 8px;margin-bottom: 40px;padding: 40px 60px;}
#ss-content.recrutement .item ul {margin-top: 20px;}
@media (max-width:1024px){
  #ss-content.recrutement .item {padding: 30px;}
}
@media (max-width:768px){
  #ss-content.recrutement {padding : 25px 0}
  #ss-content.recrutement .item .grid {grid-template-columns: 1fr;gap:30px}
}


/* Pages Légales */
#pagelegale {background: #fff;padding: 5px 0 80px 0;}
#pagelegale h2 {margin-top: 40px;}
#pagelegale h3 {margin-top: 40px;}
#pagelegale .title a {margin: 0;display: inline-block;}

/* FORMULAIRE DE CONTACT */
#ss-content.formcontact {padding: 10px 0 50px 0}
#ss-content.formcontact .container {background: #000;border-radius: 8px}
#formulaire {max-width: 100%;padding: 50px 60px 80px 60px}
#formulaire h2 {margin-bottom: 40px;}
#formulaire button {margin-top: 40px;margin-right: 15px;}
#formulaire label {color: #fff;}
.form-group {margin-bottom: 20px}
.checkbox-group {display: flex;flex-wrap: wrap;gap: 10px}
.checkbox-wrapper {display: flex;align-items: center;gap: 6px;background-color: #333;padding: 12px;border-radius: 4px;font-weight: normal;white-space: nowrap;cursor: pointer}
.radio-group {display: flex;flex-wrap: wrap;gap: 10px}
.radio-wrapper {display: flex;align-items: center;gap: 6px;background-color: #333;padding: 12px;border-radius: 4px;font-weight: normal;white-space: nowrap;cursor: pointer;color: #fff;transition: color 0.3s;user-select: none;}
.radio-wrapper input[type="radio"] {accent-color: var(--main-color);width: auto;margin: 0;flex: 0 0 auto;}
.radio-wrapper input[type="radio"]:checked + span {color: var(--main-color)}
input[type="checkbox"] {accent-color: var(--main-color);width: 16px;height: 16px;cursor: pointer}
.radio-wrapper:has(input[type="radio"]:checked) {color: var(--main-color)}
input[type="checkbox"]:checked + span {color: var(--main-color)}
input.add {margin-top: 5px;}
input.add::placeholder {font-size: .8rem;}
input, select, textarea {width: 100%;padding: 12px;color: var(--main-color);border: 1px solid #333;border-radius: 4px;background-color: #333;font-size: 1em;transition: border-color 0.3s ease;}
input:focus, select:focus, textarea:focus {border-color: var(--main-color);background-color: #444;outline: none}
textarea {height: 150px;resize: vertical}
input.error, select.error, textarea.error {border-color: red}
label {display: block;margin: 10px 0 5px;font-size: 1em}
.error-message {color: red;font-size: 0.75em;margin-top: 0px;}
button:disabled {background-color: #ccc;cursor: not-allowed}
.required {color: red}
ul.recap li {color:#fff;padding: 2px 5px}
ul.recap strong {color: #f28e22}
ul.recap h3 {margin-bottom: 10px;background: #333;color:#999;padding: 10px 10px;border-radius: 5px;font-weight: 700;}
ul.recap li small {color:#999;font-weight: 400;font-style: italic}
#feedback {max-width: 100%;padding: 50px 60px;}
.feedback-message {padding: 40px;border-radius: 8px;font-size: 1.1em;width: 100%;opacity: 0;transition: opacity 0.6s ease;}
.feedback-message.visible {opacity: 1}
.feedback-message h2 {margin-bottom: 20px;}
.feedback-message pre {margin-bottom: 20px;}
.feedback-message small {display: block;margin-top: 20px}
.feedback-message.success {background-color: #dff5dd;border: 1px solid #27ae60;color: #2c662d}
.feedback-message.success h2 {color:#27ae60}
.feedback-message.error {background-color: #fdecea;border: 1px solid #e74c3c;color: #a94442}
#spinner {padding: 50px 60px;text-align: center;}
#spinner p {color:#fff}
.loader {border: 4px solid #f3f3f3;border-top: 4px solid #f28e22;border-radius: 50%;width: 32px;height: 32px;animation: spin 0.8s linear infinite;display: inline-block}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@media (max-width:1024px){
  #ss-content.formcontact {padding: 10px 0 0px 0}
  #formulaire {padding: 50px 0px 80px 0;}
  #feedback {padding: 50px 20px 80px 20;}
  .feedback-message {padding: 20px}
}

/* ====== SOUSCRIPTION Contrat de Maintenance ====== */
#ss-content.souscription {padding: 10px 0 50px 0}
#ss-content.souscription h2 {color: #fff;margin-bottom: 40px}
#ss-content.souscription .feedback-message.success h2 {color:#27ae60}
#ss-content.souscription .feedback-message.error h2 {color:#e74c3c}
#ss-content.souscription .container {background: #000;border-radius: 8px}
#maintenance-form {max-width: 100%;padding: 50px 60px;}
#maintenance-form .btn-delete {background: #d9534f;color: white;border: none;padding: 10px;border-radius: 5px;cursor: pointer;margin-bottom: 10px}
#maintenance-form .btn-vert {background: #5cb85c;color: white;border: none;padding: 10px;border-radius: 5px;cursor: pointer;margin-bottom: 0px;font-weight: 700}
#maintenance-form .flex-row {display: flex;gap: 10px;align-items: center}
#maintenance-form  .flex-row select {flex: 1;min-width: 120px}
#tarif-estime {
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
  padding: 40px 20px;
  margin-top: 40px;
  background: #000;
}
#tarif-estime h3 {font-size: 1.2rem;}
#tarif-estime ul {margin: 20px 0;}
#tarif-estime ul li {color:#999;margin-bottom: 5px}
#tarif-estime ul li strong {font-size: 1.1rem;color:#fff}
#tarif-estime ul li strong sup {font-weight: 400;font-size: .7rem;}
#tarif-estime small {color:#555}
@media (max-width:1024px){
  #ss-content.souscription {padding: 10px 0 0px 0}
  #maintenance-form {padding: 50px 0px 80px 0;}
}