/* 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-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; }
.main-nav { display: none; }

/* Bienvenue Chez GR Informatique */
.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; }
/*------------------------------- Acceuil - A Propos ------------------------------------*/

/* ===== 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; } }

/*------------------------------- Acceuil - Section2 ------------------------------------*/
.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); }

/* 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); }
/* Honeypot anti-spam — TOUJOURS caché */
input.hp { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }

/*====================================================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 === 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; z-index: 1; 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; height: 100%; background: #fafbfc; transform: translateX(-50%); z-index: -1; }
.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 { 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; }

/*====================================================SERVICE - 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; }

/*====================================================SERVICE - Nettoyage & Remise à neuf====================================================*/
.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;}

/*====================================================SERVICE - Optimisation====================================================*/
.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 PC sur mesure====================================================*/
.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; }
.pc-group-title.intel { color: #18126d; }
.pc-group-title.amd { color: #bc1833; }
.intel-track, .amd-track { margin-bottom: 10px; }
@media (max-width: 768px) { .pc-group-title { text-align: center; } }
@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); }
@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====================================================*/
:root { --gr-red:#bc1833; --gr-blue:#18126d; --ink:#0f172a; --muted:#64748b; --bg:#f6f7fb; --card:#ffffff; --line:rgba(15,23,42,.12); --shadow: 0 24px 60px rgba(2,6,23,.12); --r:22px; }

.grw11 { padding: 90px 18px; background: radial-gradient(900px 420px at 15% 10%, rgba(24,18,109,.16), transparent 60%), radial-gradient(900px 420px at 85% 30%, rgba(188,24,51,.16), transparent 60%), linear-gradient(180deg, #ffffff, var(--bg)); }
.grw11__wrap { max-width: 1200px; margin: 0 auto; }
.grw11__hero { display:grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: stretch; }
.grw11__heroLeft { background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.55); border-radius: var(--r); box-shadow: var(--shadow); padding: 46px 44px; position: relative; overflow:hidden; }
.grw11__heroLeft::before { content:""; position:absolute; inset:-1px; background: linear-gradient(135deg, rgba(188,24,51,.12), transparent 35%), linear-gradient(225deg, rgba(24,18,109,.12), transparent 35%); pointer-events:none; }
.grw11__pill { display:inline-flex; align-items:center; gap:10px; padding: 10px 14px; border-radius: 999px; font-weight: 800; color:#fff; background: linear-gradient(135deg, var(--gr-red), #8f1226); box-shadow: 0 14px 36px rgba(188,24,51,.25); position: relative; z-index: 1; }
.grw11__pulse { width:10px; height:10px; border-radius:50%; background:#fff; box-shadow: 0 0 0 6px rgba(255,255,255,.18); }
.grw11__title { margin: 18px 0 10px; font-size: 2.6rem; line-height: 1.08; color: var(--ink); position: relative; z-index: 1; }
.grw11__title span { color: var(--gr-blue); }
.grw11__sub { margin: 0 0 18px; color: var(--muted); font-size: 1.05rem; line-height: 1.55; max-width: 58ch; position: relative; z-index: 1; }
.grw11__badges { display:flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 22px; position: relative; z-index: 1; }
.grw11__badge { padding: 10px 12px; border-radius: 999px; background:#fff; border:1px solid var(--line); font-weight: 700; color: var(--ink); font-size: .95rem; }
.grw11__ctaRow { display:flex; align-items:center; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; }
.grw11__cta { display:inline-flex; align-items:center; gap: 10px; padding: 16px 18px; border-radius: 16px; text-decoration:none; color:#fff; font-weight: 900; background: linear-gradient(135deg, var(--gr-red), #8f1226); box-shadow: 0 18px 48px rgba(188,24,51,.35); border:1px solid rgba(255,255,255,.20); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; }
.grw11__cta:hover { transform: translateY(-3px); box-shadow: 0 26px 60px rgba(188,24,51,.45); filter:saturate(1.05); }
.grw11__ctaArrow { font-size: 1.2rem; opacity: .95; }
.grw11__mini { display:inline-flex; align-items:center; gap: 10px; color: var(--muted); font-weight: 700; }
.grw11__miniDot { width:10px; height:10px; border-radius:50%; background: rgba(24,18,109,.25); }
.grw11__heroRight { border-radius: var(--r); box-shadow: var(--shadow); position: relative; overflow:hidden; }
.grw11__glass { height: 100%; background: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.55); border-radius: var(--r); padding: 22px; }
.grw11__brand { display:flex; align-items:center; gap: 12px; padding: 14px; border-radius: 18px; background:#fff; border:1px solid var(--line); margin-bottom: 14px; }
.grw11__logo { width:44px; height:44px; border-radius: 16px; display:grid; place-items:center; color:#fff; font-weight: 900; background: linear-gradient(135deg, var(--gr-blue), #0f0a4a); box-shadow: 0 14px 34px rgba(24,18,109,.22); }
.grw11__brandTitle { font-weight: 900; color: var(--ink); }
.grw11__brandSub { font-weight: 700; color: var(--muted); font-size: .95rem; }
.grw11__risk { display:flex; gap: 12px; align-items:flex-start; padding: 14px; border-radius: 18px; border: 1px solid rgba(188,24,51,.18); background: linear-gradient(180deg, rgba(188,24,51,.08), rgba(188,24,51,.03)); margin-bottom: 14px; }
.grw11__riskIcon { width:34px; height:34px; border-radius: 14px; display:grid; place-items:center; background: var(--gr-red); color:#fff; font-weight: 900; box-shadow: 0 14px 34px rgba(188,24,51,.25); }
.grw11__risk p { margin:0; color:#334155; line-height: 1.45; font-weight: 600; font-size: .95rem; }
.grw11__line { height:1px; background: var(--line); margin: 14px 2px; }
.grw11__list { margin:0; padding:0; list-style:none; display:grid; gap: 10px; }
.grw11__list li { display:flex; gap: 10px; align-items:flex-start; padding: 10px 12px; border-radius: 14px; background:#fff; border:1px solid var(--line); color: var(--ink); font-weight: 700; }
.grw11__list li span { width:22px; height:22px; border-radius:999px; display:grid; place-items:center; background: rgba(24,18,109,.10); color: var(--gr-blue); font-weight: 900; }
/* FEATURES */
.grw11__features { margin-top: 18px; display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.grw11__card { background:#fff; border:1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 16px 34px rgba(2,6,23,.06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.grw11__card:hover { transform: translateY(-4px); border-color: rgba(24,18,109,.22); box-shadow: 0 22px 50px rgba(2,6,23,.12); }
.grw11__ic { width:44px; height:44px; border-radius: 16px; display:grid; place-items:center; background: linear-gradient(135deg, rgba(188,24,51,.14), rgba(24,18,109,.14)); border:1px solid rgba(15,23,42,.08); margin-bottom: 10px; }
.grw11__card h3 { margin: 0 0 6px; color: var(--gr-blue); font-size: 1.05rem; }
.grw11__card p { margin: 0; color: var(--muted); line-height: 1.4; font-weight: 600; }
/* TRUST STRIP */
.grw11__trust { margin-top: 16px; display:flex; flex-wrap: wrap; gap: 10px; justify-content:center; }
.grw11__trustItem { padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.9); border: 1px solid var(--line); color: var(--ink); font-weight: 800; }
/* RESPONSIVE */
@media (max-width: 980px) { .grw11__hero { grid-template-columns: 1fr; } .grw11__title { font-size: 2.0rem; } .grw11__features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grw11__heroLeft { padding: 32px 20px; } .grw11__glass { padding: 18px; } .grw11__features { grid-template-columns: 1fr; } .grw11__cta { width: 100%; justify-content:center; } }
/* ULTRA WIDE DESKTOP */
@media (min-width: 1400px) { #WIN11 .grw11 { width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding: 120px clamp(40px, 4vw, 110px) !important; } #WIN11 .grw11__wrap { max-width: 1700px !important; width: 100% !important; margin: 0 auto !important; } #WIN11 .grw11__hero { grid-template-columns: 1.45fr 1fr !important; gap: 48px !important; } }
/* Évite scrollbar horizontale */
html, body { overflow-x: clip; }
@media (min-width: 1400px) { #WIN11 .grw11__title { letter-spacing: -0.02em; } }
/*====================================================SERVICE - PC Vendu====================================================*/

.pc-marquee{
  padding: 90px 0;
  position: relative;
  width: 90vw;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 28px;
  background:
    radial-gradient(900px 420px at 15% 10%, rgba(24,18,109,.14), transparent 60%),
    radial-gradient(900px 420px at 85% 30%, rgba(188,24,51,.14), transparent 60%),
    linear-gradient(180deg, #ffffff, var(--bg-light));
}
.pc-marquee .container{
  max-width: 1400px;           /* ajuste si tu veux plus large */
  margin: 0 auto;
}

.pc-title{
  text-align:center;
  font-size: clamp(1.8rem, 2.4vw, 2.5rem);
  color: var(--company-secondary);
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.pc-title::after{
  content:"";
  display:block;
  width: 90px;
  height: 4px;
  margin: 12px auto 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #bc1833, #18126d);
  opacity: .9;
}

/* Titres Intel / AMD */
.pc-group-title{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin: 32px 0 18px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: .04em;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
}

.pc-group-title.intel{ color: var(--company-secondary); }
.pc-group-title.intel::before{
  content:"INTEL";
  font-weight: 900;
  font-size: .8rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(24,18,109,.10);
  color: var(--company-secondary);
}

.pc-group-title.amd{ color: var(--company-primary); }
.pc-group-title.amd::before{
  content:"AMD";
  font-weight: 900;
  font-size: .8rem;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(188,24,51,.10);
  color: var(--company-primary);
}

/* ===== MOBILE/TABLET: scroll horizontal ===== */
.pc-track{
  display:flex;
  gap: 18px;
  padding: 10px 18px 18px;      /* padding à droite/gauche pour pas couper */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(24,18,109,.25) transparent;
}

.pc-track::-webkit-scrollbar{ height: 10px; }
.pc-track::-webkit-scrollbar-track{ background: transparent; }
.pc-track::-webkit-scrollbar-thumb{
  background: rgba(24,18,109,.18);
  border-radius: 999px;
}
.pc-track::-webkit-scrollbar-thumb:hover{
  background: rgba(188,24,51,.25);
}

.pc-card{
  flex: 0 0 320px;
  scroll-snap-align: start;
  background: rgba(255,255,255,.90);
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 40px rgba(2,6,23,.08);
  display:flex;
  flex-direction:column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pc-card:hover{
  transform: translateY(-4px);
  border-color: rgba(24,18,109,.20);
  box-shadow: 0 26px 60px rgba(2,6,23,.12);
}

.pc-slider{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 5;      /* uniformise les images */
  background: #0b0b0b;
  border: 1px solid rgba(255,255,255,.35);
}

.pc-slider::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, transparent 68%, rgba(0,0,0,.25));
  pointer-events:none;
  z-index: 1;
}

.pc-slider img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease;
}
.pc-slider img.active{ opacity: 1; z-index: 0; }

/* Flèches: plus discrètes */
.pc-slider button{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 30px rgba(2,6,23,.18);
  color: #0f172a;
  font-size: 1.25rem;
  display:grid;
  place-items:center;
  opacity: .85;
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
}
.pc-slider button:hover{
  transform: translateY(-50%) scale(1.06);
  background: #fff;
  opacity: 1;
}
.pc-slider .prev{ left: 10px; }
.pc-slider .next{ right: 10px; }

/* Infos */
.pc-info{ margin-top: 12px; padding: 10px 6px 4px; }
.pc-info h3{
  margin: 0 0 8px;
  text-align:center;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--company-primary);
}

.specs{
  list-style:none;
  padding:0;
  margin:0;
  font-size: .95rem;
  color: #334155;
  display:grid;
  gap: 6px;
}
.specs li{
  position: relative;
  padding-left: 24px;
  line-height: 1.35;
}
.specs li::before{
  content:"✓";
  position:absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(24,18,109,.10);
  color: var(--company-secondary);
  font-weight: 900;
  font-size: .85rem;
}

/* ===== DESKTOP: grille (plus de scroll horizontal coupé) ===== */
@media (min-width: 980px){
  .pc-track{
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;  /* la grille gère */
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
  }
  .pc-card{
    flex: initial;
    width: 100%;
  }
}

/* ===== ULTRA DESKTOP ===== */
@media (min-width: 1400px){
  .pc-marquee{ padding: 110px 0; }
  .pc-track{
    grid-template-columns: repeat(4, minmax(260px, 1fr));
    gap: 20px;
  }
}

/*====================================================SERVICE - TOUJOURS VISIBLE====================================================*/

.full-width-section { position: relative; left: 50%; width: 100vw; margin-left: -50vw; }
.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; }

/* --------------------------------------------------
   PALETTE GOOGLE (section avis seulement)
-------------------------------------------------- */

/* =========================
   AVIS GOOGLE — VERSION PRO
   ========================= */

/* =========================
   AVIS GOOGLE — WOW (SANS WEBKIT CLAMP)
   ========================= */

#avis-google{
  --g-star:#fbbc04;
  --g-dark:#202124;
  --g-text:#5f6368;

  --line: rgba(15,23,42,.10);
  --shadow: 0 16px 40px rgba(2,6,23,.12);
  --shadow2: 0 24px 70px rgba(2,6,23,.18);
  --r: 18px;
}

.reviews-container{
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 28px 0 26px;

  background:
    radial-gradient(900px 420px at 15% 10%, rgba(24,18,109,.14), transparent 60%),
    radial-gradient(900px 420px at 85% 30%, rgba(188,24,51,.14), transparent 60%),
    linear-gradient(180deg, #ffffff, var(--bg-light));

  scrollbar-width: thin;
}

.reviews-container::-webkit-scrollbar{ height: 10px; }
.reviews-container::-webkit-scrollbar-track{
  background: rgba(2,6,23,.06);
  border-radius: 999px;
}
.reviews-container::-webkit-scrollbar-thumb{
  background: rgba(2,6,23,.22);
  border-radius: 999px;
}
.reviews-container::-webkit-scrollbar-thumb:hover{ background: rgba(2,6,23,.32); }

.reviews-track{
  display:flex;
  width:max-content;
  gap: 18px;
  padding: 0 18px;
  align-items: stretch;
}

/* Carte */
.review{
  flex: 0 0 360px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
  box-sizing: border-box;
  text-align: left;
  scroll-snap-align: start;

  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Glow discret */
.review::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 160px at 15% 0%, rgba(24,18,109,.14), transparent 60%),
    radial-gradient(520px 160px at 85% 0%, rgba(188,24,51,.12), transparent 60%);
  opacity: 0;
  pointer-events:none;
  transition: opacity .25s ease;
}

.review:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow2);
  border-color: rgba(15,23,42,.18);
}
.review:hover::after{ opacity: 1; }

/* Nom */
.review h3{
  margin: 0 0 10px;
  color: var(--g-dark);
  font-weight: 900;
  letter-spacing: .1px;
  font-size: 1.05rem;
  padding-right: 110px; /* place pour badge */
}

/* Badge Google propre */
.review h3::after{
  content:"Avis Google";
  position:absolute;
  top: 14px;
  right: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .02em;
  color: rgba(32,33,36,.82);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
  backdrop-filter: blur(8px);
}

.review::before{
  content:"G";
  position:absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  font-weight: 900;
  font-size: .85rem;
  color:#fff;
  background: linear-gradient(135deg, #4285F4, #34A853);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

.review:hover{
  transform: translateY(-8px) scale(1.01);
}

.review{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}

.review.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* étoiles + tag */
.review .rating{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 1.05rem;
  letter-spacing: 1px;
  color: var(--g-star);
}

.review .rating::after{
  content:"Avis vérifié";
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--g-text);
  background: rgba(2,6,23,.06);
  border: 1px solid rgba(2,6,23,.10);
  padding: 5px 10px;
  border-radius: 999px;
  line-height: 1;
}

/* texte (complet, sans clamp) */
.review p{
  margin: 0;
  font-size: .95rem;
  line-height: 1.65;
  color: rgba(32,33,36,.86);
  word-break: break-word;
}

/* Mobile */
@media (max-width: 768px){
  .reviews-container{ padding: 20px 0 22px; }
  .reviews-track{ gap: 14px; padding: 0 14px; }
  .review{ width: 280px; flex: 0 0 280px; padding: 16px; }
}
@media (max-width: 420px){
  .review{ width: 260px; flex: 0 0 260px; }
}


















































/* =========================
   PCC3 — VERSION PRO (AGENCE)
   ========================= */
.pcc3{
  --red:#bc1833;
  --blue:#18126d;

  --ink:#0b1220;
  --muted:#5b667a;
  --line:rgba(11,18,32,.10);

  --card: rgba(255,255,255,.92);
  --card2: rgba(255,255,255,.86);

  --shadow: 0 22px 65px rgba(2,6,23,.10);
  --shadow2: 0 14px 35px rgba(2,6,23,.12);

  --r: 22px;

  padding: 88px 16px;
  background:
    radial-gradient(900px 540px at 12% 10%, rgba(24,18,109,.16), transparent 62%),
    radial-gradient(900px 540px at 88% 12%, rgba(188,24,51,.12), transparent 62%),
    linear-gradient(180deg, #ffffff, #f6f7ff);
}

.pcc3, .pcc3 *{ box-sizing:border-box; }
.pcc3 img{ display:block; max-width:100%; height:auto; }
.pcc3 button{
  appearance:none; -webkit-appearance:none;
  border:0; background:transparent; padding:0; margin:0;
  font:inherit; color:inherit; text-align:inherit;
  cursor:pointer;
}

.pcc3__wrap{ max-width: 1220px; margin: 0 auto; }

/* HERO container */
.pcc3__hero{
  position: relative;
  border-radius: calc(var(--r) + 10px);
  padding: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
  border: 1px solid rgba(11,18,32,.08);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.pcc3__heroBg{
  position:absolute; inset:-2px;
  background:
    radial-gradient(680px 360px at 25% 20%, rgba(24,18,109,.10), transparent 60%),
    radial-gradient(680px 360px at 80% 25%, rgba(188,24,51,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.10));
  filter: saturate(1.1);
  pointer-events:none;
}

.pcc3__heroTop{ position: relative; display:flex; justify-content:center; margin-bottom: 10px; }

.pcc3__badge{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--red);
  background: rgba(188,24,51,.08);
  border: 1px solid rgba(188,24,51,.18);
  box-shadow: 0 10px 30px rgba(188,24,51,.10);
}
.pcc3__badgeDot{
  width:8px; height:8px; border-radius:99px;
  background: var(--red);
  box-shadow: 0 0 0 6px rgba(188,24,51,.14);
}

/* GRID */
.pcc3__heroGrid{
  position: relative;
  display:grid;
  grid-template-columns: 1.35fr .95fr;
  gap: 16px;
  align-items:start;
}

.pcc3__heroLeft{ padding: 10px 10px 10px 6px; }

.pcc3__title{
  margin: 6px 0 10px;
  font-size: clamp(30px, 3.2vw, 50px);
  font-weight: 1150;
  letter-spacing: -0.03em;
  color: var(--blue);
}
.pcc3__sub{
  margin: 0;
  max-width: 860px;
  color: var(--muted);
  line-height: 1.8;
  font-size: 16px;
}

/* METRICS */
.pcc3__metrics{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.pcc3__metric{
  display:flex; align-items:center; gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(6px);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pcc3__metric:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 55px rgba(2,6,23,.14);
}

.pcc3__mIcon{
  width: 46px; height: 46px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(24,18,109,.14), rgba(188,24,51,.12));
  border: 1px solid rgba(11,18,32,.10);
}
.pcc3__mIcon svg{
  width: 22px; height: 22px;
  stroke: rgba(11,18,32,.95);
  stroke-width: 1.7;
  fill: rgba(11,18,32,.02);
}
.pcc3__mNum{
  font-weight: 1150;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.15;
}
.pcc3__mTxt{
  margin-top: 3px;
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
}

/* STORY */
.pcc3__story{
  margin-top: 16px;
  padding: 16px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.62));
  border: 1px solid rgba(11,18,32,.08);
}

.pcc3__pill{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(24,18,109,.08);
  border: 1px solid rgba(24,18,109,.16);
  color: var(--blue);
  font-weight: 1100;
  font-size: 12px;
}
.pcc3__pill--red{
  background: rgba(188,24,51,.06);
  border-color: rgba(188,24,51,.18);
  color: var(--red);
}

.pcc3__story h3{
  margin: 12px 0 8px;
  font-size: 20px;
  font-weight: 1150;
  color: var(--ink);
}
.pcc3__story p{
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.75;
  font-weight: 700;
  font-size: 14px;
}

.pcc3__list{
  list-style:none;
  padding:0;
  margin: 0 0 12px;
  display:grid;
  gap: 9px;
}
.pcc3__list li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  color: var(--ink);
  font-weight: 950;
  font-size: 14px;
}
.pcc3__check{
  width: 22px; height: 22px;
  border-radius: 999px;
  display:grid; place-items:center;
  background: rgba(24,18,109,.10);
  color: var(--blue);
  font-weight: 1150;
  flex: 0 0 auto;
}

.pcc3__note{
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(24,18,109,.10), rgba(188,24,51,.08));
  border: 1px solid rgba(11,18,32,.10);
  font-weight: 900;
  color: var(--ink);
  font-size: 14px;
}

/* RIGHT COLUMN CARDS */
.pcc3__heroRight{
  display:grid;
  gap: 12px;
}

.pcc3__card{
  background: var(--card2);
  border: 1px solid rgba(11,18,32,.08);
  border-radius: 22px;
  box-shadow: var(--shadow2);
  padding: 16px;
  backdrop-filter: blur(6px);
}

/* Card head */
.pcc3__cardHead{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}
.pcc3__cardTitle h3{
  margin: 0;
  font-size: 18px;
  font-weight: 1150;
  color: var(--ink);
}
.pcc3__cardTitle p{
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}
.pcc3__chip{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 1100;
  font-size: 12px;
  color: var(--blue);
  background: rgba(24,18,109,.08);
  border: 1px solid rgba(24,18,109,.16);
  height: fit-content;
}

/* BANNIÈRE */
.pcc3__banner{
  position: relative;
  margin-top: 12px;
  border-radius: 18px;
  padding: 14px 14px;
  overflow:hidden;
  background: linear-gradient(135deg, rgba(24,18,109,.12), rgba(188,24,51,.10));
  border: 1px solid rgba(11,18,32,.10);
}
.pcc3__bannerGlow{
  position:absolute; inset:-2px;
  background:
    radial-gradient(380px 160px at 20% 30%, rgba(255,255,255,.30), transparent 60%),
    radial-gradient(380px 160px at 80% 50%, rgba(255,255,255,.22), transparent 62%);
  pointer-events:none;
}
.pcc3__bannerTxt{ position:relative; display:grid; gap:3px; }
.pcc3__bannerSmall{
  font-weight: 1100;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(11,18,32,.75);
}
.pcc3__bannerBig{
  font-weight: 1150;
  font-size: 14px;
  color: rgba(11,18,32,.95);
}
.pcc3__bannerLine{
  position:absolute;
  right: -40px; top: -24px;
  width: 160px; height: 120px;
  transform: rotate(18deg);
  background: linear-gradient(90deg, rgba(24,18,109,.16), rgba(188,24,51,.14));
  filter: blur(.2px);
  opacity: .8;
}

/* PHOTOS */
.pcc3__photos{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.pcc3__photo{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #0b0b0b;
  border: 1px solid rgba(11,18,32,.12);
  box-shadow: 0 18px 48px rgba(2,6,23,.16);
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pcc3__photo:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(2,6,23,.22);
}
.pcc3__photo img{
  width:100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center;
  transition: transform .40s ease;
}
.pcc3__photo:hover img{ transform: scale(1.05); }


/* CERTIFICAT */
.pcc3__proofTop{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-bottom: 10px;
}
.pcc3__proofTop p{
  margin: 0;
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

.pcc3__cert{
  width: 100%;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}
.pcc3__certFrame{
  position:absolute; inset:0;
  border-radius: 18px;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(24,18,109,.18),
    inset 0 0 0 2px rgba(255,255,255,.18);
}
.pcc3__cert img{
  width:100%;
  max-height: 330px;
  object-fit: contain;
  background:#fff;
  border-radius: 18px;
  border: 1px solid rgba(11,18,32,.10);
  box-shadow: 0 16px 38px rgba(24,18,109,.14);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pcc3__cert:hover img{
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(24,18,109,.18);
}

.pcc3__thanks{
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(188,24,51,.06);
  border: 1px solid rgba(188,24,51,.16);
  color: var(--ink);
  font-weight: 950;
  font-size: 14px;
}

/* LIGHTBOX */
.pcc3__lightbox{ position:fixed; inset:0; display:none; z-index:9999; }
.pcc3__lightbox.is-open{ display:block; }
.pcc3__lbBg{ position:absolute; inset:0; background: rgba(0,0,0,.82); }

.pcc3__lbBox{
  position: relative;
  width: min(1180px, 94vw);
  max-height: 88vh;
  margin: 5vh auto 0;
  background: #0f0f12;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
  padding: 14px;
  overflow: hidden;
  animation: pcc3Pop .16s ease-out;
}
@keyframes pcc3Pop{
  from{ transform: translateY(10px); opacity: .7; }
  to{ transform: translateY(0); opacity: 1; }
}

.pcc3__lbClose{
  position:absolute;
  top:10px; right:10px;
  width: 46px; height: 46px;
  border-radius: 16px;
  background: rgba(255,255,255,.12);
  color:#fff;
  font-size: 18px;
}
.pcc3__lbImg{
  width:100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 14px;
}
.pcc3__lbHint{
  margin-top: 10px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 12px;
  text-align:center;
}

/* RESPONSIVE */
@media (max-width: 1050px){
  .pcc3__heroGrid{ grid-template-columns: 1fr; }
  .pcc3__metrics{ grid-template-columns: 1fr; }
  .pcc3__heroLeft{ padding-right: 0; }
}
@media (max-width: 680px){
  .pcc3__hero{ padding: 16px; }
  .pcc3__photos{ grid-template-columns: 1fr; }
}










































/* 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 */
/* Footer */
footer { background: black; color: #fff; padding: 20px 0; text-align: center; margin-top: 60px; }



/* ================== Desktop Header ================== */
@media (min-width: 769px) { .site-header { position: relative; } .header-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 0.5rem 1rem; gap: 1rem; } .menu-toggle { display: none; } .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; top: 50%; transform: translateY(-50%); display: flex; align-items: center; } }
/* ================== Mobile Header ================== */
@media (max-width: 768px) { .header-inner { min-height: 75px; display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; } .logo { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; } .menu-toggle { display: block; } .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; } .image-section img { width: 100%; height: 100%; object-fit: cover; } .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; } }