/* Reset & Variables */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary-color: #2c3e50;
  --secondary-color: #185fbc;
  --accent-color: #f31212;
  --background: #868686;
  --bg-light: #f7f9fc;
  --radius: 8px;
  --transition: 0.3s;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /* Company Colors */
  --company-primary: #c21c1c;
  --company-secondary: #18126d;
  --company-primary-light: rgba(74, 75, 75, 0.1);
}

/* Global */
.container { width:90%; max-width:1200px; margin:0 auto; }

/* ========== HEADER & NAV ========== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #000;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}
.menu-toggle,
.phone {
  background: none;
  border: none;
  color: #fff;

  cursor: pointer;
  text-decoration: none;
}

.menu-toggle{
  font-size: 2.5em;
 margin-left: 3%;
}

.logo img {
  height: 75px;
  display: block;
  margin: 0 auto;

}

/* Nav par défaut */
.main-nav {
  display: none;
}




.welcome-client {
  background: linear-gradient(135deg, #f9f9f9, #ffffff);
  padding: 80px 20px;
  text-align: center;
}

.container-welcome {
  max-width: 850px;
  margin: 0 auto;
 
}

.welcome-client h2 {
  font-size: 2rem;
  color: var(--company-secondary);
  margin-bottom: 20px;
}

.welcome-client .subtitle {
  font-size: 1rem;
  color: var(--company-primary);
  margin-bottom: 40px;
  font-weight: 500;
}

.highlight-box {
  background: var(--company-primary-light);
  border-left: 5px solid var(--company-primary);
  padding: 25px;
  
  margin-bottom: 30px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-color);
}

.btn-highlight {
  display: inline-block;
  margin-top: 25px;
  padding: 12px 28px;
  background: var(--company-secondary);
  color: white;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s;
}
.btn-highlight:hover {
  background: var(--accent-color);
}




/*------------------------------- Section 2 ------------------------------------*/

/* ===== About — style néo sombre ===== */
:root{
  --gr-red:#bc1833;
  --gr-blue:#18126d;
  --ink:#0c0e1a;
  --ink-2:#141735;
  --text:#eef0fa;
  --muted:#bfc3d8;
  --ring:rgba(255,255,255,.14);
}

.aboutNeo{
  position: relative;
  padding: clamp(36px,5vw,70px) 20px;
  background:black;
  overflow: hidden;
}

.aboutNeo__inner{
  width: min(1200px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(24px,3.5vw,40px);
  align-items: center;
}

/* VISUEL */
.aboutNeo__visual{
  position: relative;
  isolation: isolate;
}
.aboutNeo__image{
  aspect-ratio: 4/3;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(0,0,0,.45), inset 0 0 0 1px var(--ring);
}
.aboutNeo__image img{
  width:100%; height:100%; object-fit: cover; object-position:center;
  transform: scale(1.02);
}
.aboutNeo__badge{
  position: absolute;
  left: 14px; bottom: 14px;
  padding: 8px 12px;
  background: rgba(255,255,255,.1);
  color: #fff; font-weight: 800; font-size: 12px; letter-spacing:.04em;
  border:1px solid var(--ring);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

/* TEXTE */
.aboutNeo__content{ color: var(--text); }
.aboutNeo__eyebrow{
  display:inline-block; margin-bottom: 6px;
  color:#fff; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding: 6px 10px; border-radius:999px;
  background: linear-gradient(90deg, var(--gr-red), var(--gr-blue));
}
.aboutNeo__title{
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.15; margin: 10px 0 10px;
}
.aboutNeo__title span{ color: #fff; text-decoration-thickness: 3px; text-decoration-color: rgba(255,255,255,.35); }
.aboutNeo__lede{
  color: var(--muted);
  font-size: clamp(15px,1.6vw,18px);
  line-height: 1.6;
  margin: 0 0 14px;
}

/* Puces */
.aboutNeo__bullets{
  list-style:none; padding:0; margin:0 0 16px;
  display:grid; gap:10px;
}
.aboutNeo__bullets li{
  display:flex; align-items:center; gap:10px;
  color:#e8eafb; font-weight:700;
}
.aboutNeo__bullets svg{ width:20px; height:20px; stroke:#50e27a; fill:none; stroke-width:3; }

/* Stats */
.aboutNeo__stats{
  display:flex; flex-wrap:wrap; gap:10px 12px; margin: 6px 0 18px;
}
.aboutNeo__stats .pill{
  color:#fff; background: rgba(255,255,255,.06);
  border:1px solid var(--ring);
  border-radius: 12px; padding:8px 12px; font-weight:700;
}
.aboutNeo__stats .pill b{ color:#fff; font-weight:900; margin-right:6px; }

/* CTA */
.aboutNeo__cta{ display:flex; flex-wrap:wrap; gap:12px; }
.btnPrimary{
  background: var(--gr-red);
  color:#fff; text-decoration:none; font-weight:900;
  padding: 12px 18px; border-radius: 12px;
  border:2px solid var(--gr-red);
  box-shadow: 0 10px 22px rgba(188,24,51,.28);
  transition: transform .05s ease, box-shadow .2s ease;
}
.btnPrimary:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px rgba(188,24,51,.34); }

.btnGhost{
  background: transparent; color:#fff; text-decoration:none; font-weight:900;
  padding: 12px 18px; border-radius: 12px; border:2px solid #fff;
}
.btnGhost:hover{ background: rgba(255,255,255,.08); }

/* Responsive */
@media (max-width: 980px){
  .aboutNeo__inner{ grid-template-columns: 1fr; }
  .aboutNeo__visual{ order: -1; }
  .aboutNeo__image{ aspect-ratio: 16/9; }
}





























/* Formulaire de contact */
.contact-form-section {
  padding: 60px 0;
  background: var(--bg-light);
}

.contact-form-container {
  max-width: 600px;
  margin: 0 auto;
  background: white;
  padding: 40px;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.form-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 2em;
  color: var(--company-secondary);
}

.contact-form label {
  display: block;
  margin-bottom: 6px;
  margin-top: 20px;
  font-weight: bold;
  color: var(--text-color);
}

.contact-input,
.contact-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: var(--radius);
  font-size: 1rem;
}

.contact-button {
  margin-top: 25px;
  background: var(--company-primary);
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition);
}

/* Hero */
.hero { background:url('../images/bienvenue.png') center/cover no-repeat; color:#fff; padding:120px 0; text-align:center; position:relative; }
.hero::after { content:''; position:absolute; top:0;left:0;right:0;bottom:0; background:rgba(0,0,0,0.6); }
.hero .container { position:relative; z-index:1; }
.hero h1 { font-size:2em; margin-bottom:20px; }
.hero p { font-size:1em; margin-bottom:30px; }
.btn-primary { background:#fff; color:var(--company-secondary); padding:12px 30px; border-radius:var(--radius); font-weight:600; transition: background var(--transition); }
.btn-primary:hover { background:var(--accent-color); color:#fff; }








/* SERVICE */

.service-reputation {
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
  padding: 80px 20px;
}

.container-reputation {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 50px;
  align-items: center;
  flex-wrap: wrap;
}

.reputation-text {
  flex: 1 1 500px;
}

.reputation-text h2 {
  font-size: 2.5rem;
  color: #bc1833;
  margin-bottom: 20px;
}

.reputation-text .lead {
  font-size: 1.2rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 20px;
}

.reputation-text p {
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

.signature {
  font-style: italic;
  color: #888;
  margin-top: 25px;
  border-left: 4px solid #bc1833;
  padding-left: 15px;
}

.reputation-image {
  flex: 1 1 400px;
  text-align: center;
}
.reputation-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Responsive */
@media (max-width: 768px) {
  .container-reputation {
    flex-direction: column;
    text-align: center;
  }
  .reputation-text, .reputation-image {
    flex: 1 1 100%;
  }
}


.gr-guarantee {
  background: #fafbfc;
  padding: 90px 30px;
  font-family: 'Segoe UI', sans-serif;
  color: var(--text-color);
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.gr-guarantee-wrapper {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.gr-title {
  font-size: 2.8rem;
  color: var(--company-secondary);
  font-weight: 800;
  margin-bottom: 40px;
}

.gr-block {
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 40px 30px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.gr-claim {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 25px;
  line-height: 1.6;
  font-weight: 500;
}

.gr-badge {
  background: var(--company-primary);
  color: white;
  font-size: 1.3rem;
  padding: 16px 24px;
  border-radius: 8px;
  margin-bottom: 25px;
  display: inline-block;
  font-weight: bold;
}

.gr-info {
  font-size: 1rem;
  color: #555;
  line-height: 1.7;
}






















/* SERVICE Accordion */
/* === MENU === */
.services-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 2rem auto;
  padding: 1rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  max-width: 900px;
}

.services-menu button {
  flex: 1 1 calc(33.333% - 1rem);
  min-width: 180px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 0.8rem 1rem;
  border-radius: 0.6rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.services-menu button.active {
  background: #444;
  color: white;
  border-color: #444;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.services-menu button:hover:not(.active) {
  background: #eee;
  transform: translateY(-2px);
}

.services-content {
   position: relative;   /* pour que le ::before soit positionné par rapport à ce bloc */
  z-index: 1;           /* pour que le texte reste devant */
  max-width: 800px;
  margin: 0 auto 2rem;
  padding: 1rem;
  background: rgba(255,255,255,0.9);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.services-content::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 100vw;               /* toute la fenêtre */
  height: 100%;               /* même hauteur que .services-content */
  background: #fafbfc;        /* ou votre dégradé, image… */
  transform: translateX(-50%);/* centré */
  z-index: -1;                /* derrière le texte */
}

.service-panel {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}

.service-panel.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* SERVICE - Virus Bugs */
/* antivirus-section */
.antivirus-section {
  position: relative;
  left: 50%; width: 100vw; margin-left: -50vw;
  background: var(--bg-light);
  color: #fff;
  padding: 80px 20px;
}

.antivirus-section .container {
  width: 90%; max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.antivirus-section h2 {
  font-size: 2.5rem;
  color: #bc1833;
  margin-bottom: 20px;
}

.antivirus-intro {
  font-size: 1.1rem;
  margin-bottom: 40px;
  opacity: 0.85;
}

/* cartes */
.antivirus-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.antivirus-card {
  background: var(--company-secondary);
  padding: 30px 20px;
  border-radius: 12px;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.antivirus-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.antivirus-card .icon {
  font-size: 2rem;
  margin-bottom: 15px;
  display: inline-block;
}

.antivirus-card h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.antivirus-card p {
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0.9;
}

/* bouton */
.antivirus-cta {
  display: inline-block;
  background: #bc1833;
  color: #fff;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
}

.antivirus-cta:hover {
  background: #9e0f29;
  transform: translateY(-2px);
}




.service-full-bg {
  position: relative;
}
.service-full-bg::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 100vw;
  height: 100%;
  background-color: #1a1a1a;
  transform: translateX(-50%);
  z-index: -1;
}

.service-full-bg2 {
  position: relative;
}
.service-full-bg2::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 100vw;
  height: 100%;
  background-color: #f2f2f2; 
  transform: translateX(-50%);
  z-index: -1;
}














.service-cards-overview {
  background: var(--bg-light);
  padding: 60px 20px;
  text-align: center;
}

.cards-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.service-card {
  background: white;
  padding: 30px 20px;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

.service-card img {
  width: 70px;
  margin-bottom: 20px;
}

.service-card h3 {
  font-size: 1.2rem;
  margin-bottom: 12px;
  color: #18126d;
}

.service-card p {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 20px;
}

.card-btn {
  display: inline-block;
  background: #bc1833;
  color: white;
  padding: 10px 20px;
  font-size: 0.95rem;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.card-btn:hover {
  background: #9e0f29;
}





















/*SUPPORT / MAINTENANCE*/
.light-remote-support {
  background-color: #f9f9f9;
  padding: 60px 20px;
  text-align: center;
  color: #333;
}

.light-remote-container {
  max-width: 800px;
  margin: 0 auto;
}

.light-remote-support h2 {
  font-size: 2.4em;
  color: #18126d;
  margin-bottom: 20px;
}

.light-remote-support p {
  font-size: 1.2em;
  margin-bottom: 30px;
}

.light-support-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
}

.light-support-list li {
  margin: 12px 0;
  font-size: 1.1em;
  text-align: left;
  padding-left: 28px;
  position: relative;
}

.light-support-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #bc1833;
  font-weight: bold;
}

.light-btn {
  background-color: #bc1833;
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

.light-btn:hover {
  background-color: #a11529;
}





















/* ===== Remise à Neuf – layout Avant/Après ===== */

.remise-section { background: #f7f7f7; padding: 80px 20px;font-family: 'Outfit', sans-serif;color: #333;}
.remise-section .container { max-width: 1100px;margin: 0 auto;text-align: center;}
.remise-section h2 {font-size: 2.8rem;font-weight: 700;margin-bottom: 0.5rem;color: var(--company-secondary);}
.remise-section .lead {font-size: 1.1rem;margin-bottom: 2.5rem;opacity: 0.8;line-height: 1.6;}
.remise-section .remise-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 1rem;justify-items: center;align-items: start;}
.remise-section .before-after {width: 100%;max-width: 100%;}
.remise-section .before-after img {width: 100%;height: auto;object-fit: cover;cursor: zoom-in;}
/* Grille & cartes Avant/Après */
.remise-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px,1fr));gap: 1.5rem;justify-items: center;margin-bottom: 2.5rem;}
.remise-card {display: flex;gap: 1rem;flex-wrap: wrap;justify-content: center;}
.before-after {position: relative;width: 100%;max-width: 320px;border-radius: 12px;overflow: hidden;box-shadow: 0 6px 18px rgba(0,0,0,0.1);}
.before-after img {display: block;width: 100%;height: auto;object-fit: cover;cursor: zoom-in}
.before-after figcaption { position: absolute;bottom: 8px;left: 50%;transform: translateX(-50%);background: rgba(0,0,0,0.6);color: #fff;padding: 4px 8px;border-radius: 4px;font-size: 0.9rem;}
/* Points clés */
.remise-features {display: grid;grid-template-columns: repeat(auto-fit, minmax(220px,1fr));gap: 2rem;margin-bottom: 3rem;text-align: center;}
.remise-features .feature {background: #fff;padding: 1.5rem;border-radius: 12px;box-shadow: 0 6px 18px rgba(0,0,0,0.08);transition: transform 0.3s ease, box-shadow 0.3s ease;}
.remise-features .feature:hover {transform: translateY(-6px);box-shadow: 0 12px 24px rgba(0,0,0,0.12);}
.remise-features .icon {font-size: 2rem;margin-bottom: 0.8rem;color: var(--company-primary);}
.remise-features h3 {font-size: 1.2rem;margin-bottom: 0.4rem;color: var(--company-secondary);}
.remise-features p {font-size: 0.95rem;color: #555;line-height: 1.5;}
/* Lightbox modal */
.img-modal {display: none;position: fixed;top:0; left:0; right:0; bottom:0;background: rgba(0,0,0,0.85);justify-content: center;align-items: center;z-index: 9999;}
.img-modal img {max-width: 90%;max-height: 90%;border-radius: 8px;box-shadow: 0 6px 30px rgba(0,0,0,0.5);cursor: zoom-out;}









/* === OPTIMISATION SECTION === */
.opt-section {
  background-color: #1a1a1a;
  padding: 4rem 1.5rem;
}

.opt-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

@media (min-width: 768px) {
  .opt-container {
    flex-direction: row;
    justify-content: space-between;
  }
}

.opt-text {
  flex: 1;
  text-align: center;
}

@media (min-width: 768px) {
  .opt-text {
    text-align: left;
  }
}

.opt-text h2 {
  font-size: clamp(2rem, 5vw, 2.8rem);
  color: #f0f0f0;
  margin-bottom: 1rem;
}

.opt-text h2 span {
  color: #bc1833;
}

.opt-lead {
  font-size: 1.2rem;
  color: #f0f0f0;
  margin-bottom: 1.5rem;
}

.opt-points {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.5rem;
 color: #f0f0f0;
  font-size: 1.1rem;
}

.opt-points li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 1rem;
}

.opt-points li::before {
  -webkit-text-fill-color: currentColor;
  content: "✔";
  position: absolute;
  left: 0;
  color: #bc1833;
  font-weight: bold;
    -webkit-text-fill-color: currentColor !important;
}

.opt-note {
  font-size: 1.05rem;
 color: #f0f0f0;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.opt-button {
  background-color: var(--company-primary);
  color: white;
  padding: 0.9rem 2rem;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  display: inline-block;
  transition: background 0.3s ease;
}

.opt-button:hover {
   background-color: #a8142b;
}

.opt-img {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.opt-img img {
  width: 100%;
  max-width: 400px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}









/* SERVICE - MONTAGE D'ORDINATEUR */
.pcbuild-section {
  background: #f9f9fb;
  padding: 100px 30px;
  font-family: 'Segoe UI', sans-serif;
  color: #222;
  border-top: 1px solid #e0e0e0;
}

.pcbuild-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 50px;
}

.pcbuild-text {
  flex: 1 1 500px;
}

.pcbuild-text h2 {
  font-size: 2.6rem;
  color: var(--company-secondary);
  font-weight: 800;
  margin-bottom: 15px;
}

.pcbuild-lead {
  font-size: 1.2rem;
  color: #bc1833;
  font-weight: 600;
  margin-bottom: 20px;
}

.pcbuild-desc {
  font-size: 1.1rem;
  margin-bottom: 25px;
  line-height: 1.6;
}

.pcbuild-list {
  list-style: none;
  padding: 0;
  margin-bottom: 35px;
}

.pcbuild-list li {
  font-size: 1.05rem;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pcbuild-btn {
  display: inline-block;
  background: #bc1833;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 30px;
  font-size: 1rem;
  transition: background 0.3s ease, transform 0.2s ease;
}

.pcbuild-btn:hover {
  background: #a0132b;
  transform: translateY(-2px);
}

.pcbuild-img {
  flex: 1 1 400px;
  text-align: center;
}

.pcbuild-img img {
  max-width: 100%;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}

/* Sous-titres de groupes */
.pc-group-title{
  margin:40px 0 15px;
  font-size:1.7rem;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
}

/* Couleurs : bleu foncé pour Intel, rouge foncé pour AMD (respect de ta charte) */
.pc-group-title.intel{ color:#18126d; }
.pc-group-title.amd  { color:#bc1833; }

/* On empêche les deux lignes de se coller quand le track défile horizontalement */
.intel-track,
.amd-track{
  margin-bottom:10px;      /* petit espace entre les deux carrousels */
}

/* Optionnel : sur mobile on force un peu d’air */
@media(max-width:768px){
  .pc-group-title{ text-align:center; }
}
/* Responsive */
@media (max-width: 768px) {
  .pcbuild-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .pcbuild-text h2 {
    font-size: 2rem;
  }

  .pcbuild-lead,
  .pcbuild-desc,
  .pcbuild-list li {
    font-size: 1rem;
  }
}





























/* SERVICE - Mise a jour */
.update-section {
  background: #f7f9fc;
  padding: 80px 30px;
  font-family: 'Segoe UI', sans-serif;
  color: #222;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}

.update-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
}

.update-lead {
  font-size: 1.25rem;
  margin-bottom: 30px;
  color: #444;
  line-height: 1.7;
}

.update-list {
  list-style: none;
  padding: 0;
  margin-bottom: 35px;
}

.update-list li {
  font-size: 1.05rem;
  margin-bottom: 12px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 10px;
}

.update-btn {
  display: inline-block;
  background: #bc1833;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 30px;
  font-size: 1rem;
  transition: background 0.3s ease, transform 0.2s ease;
}

.update-btn:hover {
  background: #a0132b;
  transform: translateY(-2px);
}

.update-img {
  flex: 1 1 400px;
  text-align: center;
}
.update-note {
  font-size: 1rem;
  color: #555;
  background: #f1f3f5;
  padding: 12px 20px;
  border-left: 4px solid #bc1833;
  border-radius: 8px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.update-img img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Responsive */
@media (max-width: 768px) {
  .update-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .update-text h2 {
    font-size: 2rem;
  }

  .update-lead,
  .update-list li {
    font-size: 1rem;
  }
}













 /*SERVICE - Installation Windows 11*/
.windows10-fin-section {
  background: #f2f2f2;
  color: #181818;
  padding: 60px 20px;
  text-align: center;
}

.windows10-container {
  max-width: 950px;
  margin: 0 auto;
}

.windows10-title-box {
  background-color: #bc1833;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 25px;
}

.windows10-title-box h2 {
  color: white;
  margin: 0;
  font-size: 2em;
}

.windows10-fin-section p {
  font-size: 1.05em;
  margin-bottom: 20px;
  line-height: 1.6em;
}

.windows10-fin-section ul {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

.windows10-fin-section ul li {
  margin: 10px 0;
  font-size: 1em;
  font-weight: 500;
}

.cta-windows-button {
  display: inline-block;      /* ← clé du fix */
  background: #bc1833;
  color: #fff;
  padding: 14px 28px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 8px;
  line-height: 1.2;           /* évite l’effet “double hauteur” */
  max-width: 100%;            /* pas de débordement en mobile */
  text-align: center;         /* si le texte va sur 2 lignes */
}

.cta-windows-button:hover {
  background: #a8152c;
}
























/* SERVICE -  PC Vendu */
.pc-marquee {
  background: var(--bg-light);
  padding: 80px 0;
  overflow-x: auto;
}

.pc-title {
  text-align: center;
  font-size: 2rem;
  color: var(--company-secondary);
  margin-bottom: 40px;
}

.pc-track {
  display: flex;
  gap: 30px;
  padding: 0 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.pc-card {
  flex: 0 0 300px;
  background: white;
  border-radius: var(--radius);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
  scroll-snap-align: start;
  padding: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--company-primary-light);
}

.pc-slider {
  position: relative;
  height: 380px;
  overflow: hidden;
  border-radius: var(--radius);
}

.pc-slider img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.pc-slider img.active {
  opacity: 1;
  z-index: 1;
}

.pc-slider button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.7);
  border: none;
  font-size: 1.5rem;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 2;
}

.pc-slider .prev { left: 10px; }
.pc-slider .next { right: 10px; }

.pc-info {
  margin-top: 20px;
}

.pc-info h3 {
  font-size: 1.1rem;
  color: var(--company-primary);
  margin-bottom: 8px;
  text-align: center;
}

.specs {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-color);
}

.specs li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
}

.specs li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--company-secondary);
}




















.contact-instructions {
  font-size: 1rem;
  margin-bottom: 2rem;
  color: #444;
  background: #f3f3f3;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.contact-instructions strong {
  color: #18126d; /* couleur charte */
}

.contact-instructions .urgent-link {
  color: #bc1833; /* rouge charte */
  font-weight: bold;
  text-decoration: underline;
}
.contact-instructions .urgent-link:hover {
  text-decoration: none;
}


.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }
.contact-result{ margin-top:14px; padding:12px 14px; border-radius:10px; display:none; }
.contact-result.ok{ display:block; background:#e9f7ef; border:1px solid #c8e6cf; color:#0c5d2b; }
.contact-result.err{ display:block; background:#fdecea; border:1px solid #f5c6cb; color:#8a1f2d; }

/* Option: adapter à ta charte */
.contact-button{ background:#bc1833; }           /* rouge GR */
.form-title{ color:#18126d; }       /* bleu GR */






/* SERVICE - TOUJOURS VISIBLE */




.full-width-section {
  position: relative;
  left: 50%;
  width: 100vw;          /* toute la largeur de la fenêtre */
  margin-left: -50vw;    /* on décale de la moitié de cette fenêtre */

 
}

.custom-support-section {
  margin-top: 100px;
  background: var(--company-primary-light);
  padding: 70px 20px 40px;
  text-align: center;
  font-family: var(--font-family);
  color: var(--text-color);
}

.custom-support-container {
  max-width: 900px;
  margin: 0 auto;
}

.custom-support-section h2 {
  font-size: 2.2rem;
  color: var(--company-secondary);
  margin-bottom: 20px;
}

.custom-support-section p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* Flèche SVG */
.arrow-down {
  display: inline-block;
  margin-top: 30px;
  color: var(--company-primary);
  animation: bounce 1.5s infinite;
  transition: transform 0.3s ease;
}

.arrow-down:hover {
  transform: translateY(6px);
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}


























/* Team Section */
.team-section { padding:60px 0; background:var(--bg-light); }
.team-section h2 { text-align:center; margin-bottom:40px; font-size:2em; }
.team-grid { display:grid; gap:20px; width:90%; max-width:1000px; margin:0 auto; }
@media (min-width: 769px) { .team-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 768px) { .team-grid { grid-template-columns:1fr; } }
.member-card { background:#fff; border-radius:var(--radius); box-shadow:0 2px 6px rgba(0,0,0,0.1); text-align:center; padding:20px; }
.member-card img { width:150px; height:150px; border-radius:50%; object-fit:cover; margin-bottom:15px; }
.member-card h3 { margin-bottom:10px; }
.member-card p { margin:5px 0; }
.initial {color: #e74c3c; font-weight: bold;  display: inline; }


/* Contact Info */
.contact-info {
  background: linear-gradient(135deg, #1a1a1a, #292929);
  color: #f0f0f0 !important;
  padding: 60px 20px;
 
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
  margin: 60px auto;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.contact-info.visible {
  opacity: 1;
  transform: translateY(0);
}

.contact-info .info-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
}

.contact-image img {
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 6px 25px rgba(255, 69, 0, 0.2);
}

.info-box {
  flex: 1 1 300px;
}

.info-box h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #ffffff !important;
  text-shadow: 1px 1px 2px #000;
}

.info-box p {
  margin: 8px 0;
  font-size: 1rem;
  color: #dddddd !important;
}

.info-box a {
  color: var(--company-primary);
  text-decoration: none;
  font-weight: bold;
}
.info-box a:hover {
  text-decoration: underline;
  color: white;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.social-icons a img {
  width: 40px;
  height: 40px;
  transition: transform 0.4s ease, filter 0.4s ease, box-shadow 0.4s ease;
  filter: brightness(0.8);
  border-radius: 50%;
  padding: 4px;
  background: #1f1f1f;
}
.social-icons a img:hover {
  transform: scale(1.2);
  filter: brightness(1.3);
  box-shadow: 0 0 12px rgba(255, 140, 0, 0.5);
}

@media (max-width: 1050px) {
  .info-container {
    flex-direction: column;
    text-align: center;
  }
  .contact-image img {
    max-width: 100%;
  }
}
/* conteneur masquant tout ce qui déborde */














/* --------------------------------------------------
   PALETTE GOOGLE (section avis seulement)
-------------------------------------------------- */
#avis-google {
  --g-star:  #fbbc04;  /* jaune des étoiles */
  --g-dark:  #202124;  /* gris très foncé titres */
  --g-text:  #5f6368;  /* gris moyen paragraphes */
}



.reviews-container {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-light);
  padding: 20px 0;
  scrollbar-width: thin;
}

.reviews-track {
  display: flex;
  width: max-content;
  gap: 20px;
}

.review {
  flex: 0 0 300px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 20px;
  box-sizing: border-box;
  text-align: left;
  transition: transform var(--transition);
}

.review:hover {
  transform: translateY(-3px);
}

.review h3 {
  font-size: 1.1em;
  margin-bottom: 8px;
  color: var(--g-dark);
}

.review .rating {
   color: var(--g-star);
  margin-bottom: 12px;
  font-size: 1.1em;
}

.review p {
  font-size: 0.95em;
  line-height: 1.4;
  color: var(--text-color);
}
@media (max-width: 768px) {
  .reviews-container {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-light);
    padding: 20px 0;
    scrollbar-width: thin;
    white-space: nowrap;
  }

  .reviews-track {
    display: inline-flex;
    gap: 20px;
  }

  .review {
    display: inline-block;
    flex: none;
    /* Largeur fixe pour que tous les avis soient identiques */
    width: 260px;
    box-sizing: border-box;
    padding: 20px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform var(--transition);

    /* Forcer le texte à se couper à l'intérieur du conteneur */
    white-space: normal;
    word-wrap: break-word;
  }
  .review:hover {
    transform: translateY(-3px);
  }
  .review h3 {
    font-size: 1.1em;
    margin-bottom: 8px;
    color: var(--g-dark);
  }
  .review .rating {
    color: var(--g-star);
    margin-bottom: 12px;
    font-size: 1.1em;
  }
  .review p {
    font-size: 0.95em;
    line-height: 1.4;
    color: var(--text-color);
  }
}





/* Footer */
footer { background:black; color:#fff; padding:20px 0; text-align:center; margin-top:60px; }

/* ====== Mobile ====== */



/* ======= RESPONSIVE ====== */

/* ================== Desktop Header ================== */
@media (min-width: 769px) {
  .site-header { position: relative; }

  /* header en grille 3 colonnes */
  .header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 0.5rem 1rem;
    gap: 1rem;
  }

  /* menu toggle caché */
  .menu-toggle { display: none; }

  /* nav toujours visible, centrée */
  .main-nav {
    display: block;
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    height: 100%;
    background: transparent;
    z-index: 1000;
  }
  .main-nav .nav-list {
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
    height: 100%;
  }
  .main-nav .nav-list a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 0.5rem 0;
    transition: color var(--transition);
  }
  .main-nav .nav-list a:hover {
    color: var(--accent-color);
  }
  .phone {
    position: absolute;
    right: 0.5rem;              /* marge à droite identique au padding */
    top: 50%;                 
    transform: translateY(-50%); 
    display: flex;            
    align-items: center;      
  }
}

/* ================== Mobile Header ================== */
@media (max-width: 768px) {
  /* header revert flex simple */
  .header-inner {
   
    min-height: 75px; /* Même hauteur que le logo */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
  }
  .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }

  /* burger visible */
  .menu-toggle { display: block; }

  /* nav cachée jusqu’à toggle */
  .main-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 90;
    background: #000;
    z-index: 999;
  }
  .main-nav.open {
    display: block;
  }
  .main-nav .nav-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 1rem;
    list-style: none;
  }
  .main-nav .nav-list a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
  }
.reviews-container {
    scroll-snap-type: none !important;
  }
  .review {
    scroll-snap-align: none !important;
  }
  
}

@media (max-width: 500px) {
      .services-menu button {
        flex: 1 1 45%;
        font-size: 0.8rem;
      }
      .call-icon {
    height: 45px;
  }
  .call-text {
    display: none;
  }
    }

    /* ================== Index Section 2 ================== */

    
@media (max-width: 1600px) {
      .containersection2 {
      flex-direction: column;
      margin-left: 25%;
  width: 50%;
      }



      
.image-section {
 
  width: 100%;
  height: auto; /* Laisse le contenu décider de la hauteur */
}
.image-section img {
  width: 100%;
  height: 100%; 
  object-fit: cover; /* Couvre l'espace tout en conservant le ratio */
}
.text-section {

  width: 90%;

}


    }

@media (max-width: 1000px) {
    .containersection2 {
      flex-direction: column;
      margin-left: 10%;
  width: 80%;
}
}
 @media (min-width: 500px) {
  .call-text {
    display: inline;
  }

  .call-icon {
    display: none;
  }
}