/*
  Clickanet 2026 : rafraîchissement visuel du thème Webster
  Chargé après style.css et responsive.css, sans modifier les fichiers du thème.
  Couleurs : vert #84ba3f (foncé #6a9a2e), sombres #141414 / #1a1a1a / #323232
  Préfixe des nouveaux composants : .cl-
*/

/* Pas de scroll-behavior: smooth : il entre en conflit avec SmoothScroll et jarallax du thème (défilement saccadé, parallaxe figée) */
::selection { background: #84ba3f; color: #ffffff; }

/* ---------- Typographie ---------- */
.section-title h6 { color: #84ba3f; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
.page-title h1, .page-title p, .page-title span, ul.page-breadcrumb li span { text-transform: none; }

/* ---------- Fond fixe sans script (remplace la parallaxe jarallax quand l'image est trop allongée) ---------- */
.cl-bg-fixed { background-color: #1a1a1a; background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }
@media (max-width: 991px), (hover: none) {
  .cl-bg-fixed { background-attachment: scroll; }
}

/* ---------- Bandeau de titre des pages intérieures ---------- */
.page-title.parallax:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; background: linear-gradient(90deg, rgba(20, 20, 20, 0.88) 0%, rgba(20, 20, 20, 0.45) 100%); }
.page-title .container { z-index: 1; }
.page-title h1 { font-weight: 700; letter-spacing: -0.3px; }
.page-title p { color: rgba(255, 255, 255, 0.8); }

/* ---------- Boutons ---------- */
.button { transition: all 0.3s ease; }
.button:hover, .button:focus { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); }
.button.cl-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.75); color: #ffffff; }
.button.cl-btn-ghost:hover, .button.cl-btn-ghost:focus { background: #ffffff; border-color: #ffffff; color: #323232; }
.button.cl-btn-white { background: #ffffff; border-color: #ffffff; color: #323232; }
.button.cl-btn-white:hover, .button.cl-btn-white:focus { background: #323232; border-color: #323232; color: #ffffff; }

/* ---------- Cartes : coins arrondis, ombres douces ---------- */
.feature-box { border-radius: 12px; overflow: hidden; border-color: #ececec; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.feature-box:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14); }
.blog-box { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); }
.masonry-item .blog-entry { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); }
.membership-pricing-table table { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); }
.tab.round.shadow { border-radius: 12px; }
.cl-badge-new { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 20px; background: #84ba3f; color: #ffffff; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; vertical-align: middle; }

/* ---------- Menu : icône Accueil et bouton Contact ---------- */
.mega-menu .menu-links > li.cl-menu-home > a i.fa { font-size: 17px; padding: 0; }
@media screen and (min-width: 993px) {
  .cl-menu-home .cl-menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media screen and (max-width: 992px) {
  .mega-menu .menu-links > li.cl-menu-home > a i.fa { margin-right: 8px; }
}
@media screen and (min-width: 993px) {
  .mega-menu .menu-links > li.cl-menu-cta > a { width: auto; margin: 13px 0 13px 8px; padding: 9px 22px; border-radius: 30px; background: #84ba3f; color: #ffffff !important; line-height: 20px; }
  .mega-menu .menu-links > li.cl-menu-cta > a:hover, .mega-menu .menu-links > li.cl-menu-cta.active > a { background: #ffffff; color: #323232 !important; }
  .mega-menu.desktopTopFixed .menu-list-items .menu-links > li.cl-menu-cta > a { margin-top: 12px; margin-bottom: 12px; }
}
@media screen and (min-width: 993px) and (max-width: 1199px) {
  .mega-menu .menu-links > li > a { padding-left: 9px; padding-right: 9px; font-size: 13px; }
  .mega-menu .menu-links > li.cl-menu-cta > a { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Hero de l'accueil (remplace le slider) ---------- */
.cl-hero { position: relative; overflow: hidden; padding: 220px 0 110px; background-color: #141414; background-position: center; background-size: cover; background-repeat: no-repeat; color: #ffffff; }
.cl-hero:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(20, 20, 20, 0.94) 0%, rgba(20, 20, 20, 0.78) 45%, rgba(20, 20, 20, 0.2) 100%); }
.cl-hero:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(0deg, rgba(20, 20, 20, 0.55), rgba(20, 20, 20, 0)); }
.cl-hero .container { position: relative; z-index: 1; }
.cl-hero .row { display: flex; flex-wrap: wrap; align-items: flex-end; }
.cl-eyebrow { display: inline-block; margin-bottom: 22px; padding: 6px 16px 6px 14px; border: 1px solid rgba(132, 186, 63, 0.55); border-radius: 30px; background: rgba(132, 186, 63, 0.12); color: #d3eab4; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.cl-eyebrow:before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: #84ba3f; box-shadow: 0 0 0 4px rgba(132, 186, 63, 0.25); vertical-align: 1px; }
.cl-hero h1 { margin: 0 0 22px; color: #ffffff; font-size: 54px; font-weight: 700; line-height: 1.12; letter-spacing: -1px; }
.cl-hero h1 span { color: #84ba3f; }
.cl-hero-lead { max-width: 620px; margin-bottom: 34px; color: rgba(255, 255, 255, 0.82); font-size: 18px; line-height: 1.7; }
.cl-actions .button { margin: 0 12px 12px 0; padding: 14px 28px; }
.cl-actions .button + .button { margin-left: 0; }
.cl-hero-facts { display: flex; flex-wrap: wrap; margin: 34px 0 0; padding: 26px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.14); list-style: none; }
.cl-hero-facts li { margin: 0 44px 10px 0; color: rgba(255, 255, 255, 0.7); font-size: 14px; line-height: 20px; }
.cl-hero-facts strong { display: block; color: #ffffff; font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 700; line-height: 36px; }
.cl-hero-card { display: flex; align-items: center; max-width: 340px; margin-left: auto; padding: 18px 20px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 16px; background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #ffffff; transition: all 0.3s ease; }
.cl-hero-card:hover, .cl-hero-card:focus { background: rgba(255, 255, 255, 0.18); color: #ffffff; transform: translateY(-3px); }
.cl-hero-card-icons { flex: 0 0 auto; display: flex; margin-right: 16px; }
.cl-hero-card-icons i { width: 42px; height: 42px; border-radius: 12px; background: #84ba3f; color: #ffffff; font-size: 22px; line-height: 42px; text-align: center; }
.cl-hero-card-icons i + i { margin-left: -8px; background: #ffffff; color: #84ba3f; box-shadow: -3px 0 10px rgba(0, 0, 0, 0.2); }
.cl-hero-card-text { flex: 1 1 auto; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.85); }
.cl-hero-card-text strong { display: block; color: #ffffff; font-family: 'Montserrat', sans-serif; font-size: 15px; }
.cl-hero-card > .fa { flex: 0 0 auto; margin-left: 12px; color: #84ba3f; font-size: 18px; }

/* ---------- Section sombre « Applications mobiles » ---------- */
.cl-dark { position: relative; overflow: hidden; background: #161616; color: rgba(255, 255, 255, 0.78); }
.cl-dark:before { content: ""; position: absolute; top: -200px; right: -150px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(132, 186, 63, 0.22) 0%, rgba(132, 186, 63, 0) 70%); }
.cl-dark .container { position: relative; z-index: 1; }
.cl-dark h2, .cl-dark h3, .cl-dark h4, .cl-dark h5 { color: #ffffff; }
.cl-dark p { color: rgba(255, 255, 255, 0.75); }
.cl-dark .section-title p { color: rgba(255, 255, 255, 0.75); }
.cl-section { padding: 90px 0; }
.cl-section-sm { padding: 60px 0; }
.cl-lead { font-size: 17px; line-height: 1.75; }

.cl-checklist { margin: 26px 0 32px; padding: 0; list-style: none; }
.cl-checklist li { position: relative; margin-bottom: 14px; padding-left: 38px; font-size: 15px; line-height: 24px; }
.cl-checklist li:before { content: "\f00c"; position: absolute; top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%; background: rgba(132, 186, 63, 0.18); color: #84ba3f; font-family: 'FontAwesome'; font-size: 12px; line-height: 24px; text-align: center; }
.cl-checklist strong { color: #323232; }
.cl-dark .cl-checklist strong { color: #ffffff; }

.cl-tech { display: flex; flex-wrap: wrap; margin: 0 0 30px; }
.cl-tech span { margin: 0 10px 10px 0; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 30px; color: #ffffff; font-size: 13px; }
.cl-tech span i { margin-right: 6px; color: #84ba3f; }

/* ---------- Maquette de téléphones (CSS pur, décoratif) ---------- */
.cl-phones { position: relative; width: 100%; height: 560px; max-width: 460px; margin: 0 auto; }
.cl-phone { position: absolute; width: 250px; height: 516px; padding: 10px; border-radius: 44px; background: #0d0d0d; box-shadow: 0 0 0 2px #2c2c2c, 0 30px 60px rgba(0, 0, 0, 0.45); }
.cl-phone-front { right: 30px; top: 30px; z-index: 2; }
.cl-phone-back { left: 0; top: 0; z-index: 1; transform: rotate(-8deg); opacity: 0.95; }
.cl-screen { position: relative; height: 100%; overflow: hidden; border-radius: 35px; background: #f4f6f1; font-family: 'Open Sans', sans-serif; color: #323232; text-align: left; }
.cl-screen-dark { background: #1d1f1b; color: #ffffff; }
.cl-island { position: absolute; top: 9px; left: 50%; width: 76px; height: 22px; margin-left: -38px; border-radius: 20px; background: #0d0d0d; z-index: 3; }
.cl-punch { position: absolute; top: 12px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #0d0d0d; z-index: 3; }
.cl-status { display: flex; justify-content: space-between; padding: 12px 22px 0; font-size: 11px; font-weight: 700; }
.cl-status i { margin-left: 4px; font-size: 10px; }
.cl-app-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 18px 10px; }
.cl-app-head small { display: block; color: #8a8f86; font-size: 11px; }
.cl-app-head b { display: block; font-family: 'Montserrat', sans-serif; font-size: 17px; line-height: 22px; }
.cl-screen-dark .cl-app-head small { color: #9aa294; }
.cl-app-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #84ba3f, #4f7a1f); color: #ffffff; font-size: 13px; font-weight: 700; line-height: 34px; text-align: center; }
.cl-app-hero { margin: 6px 14px 12px; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, #84ba3f 0%, #5d8d26 100%); color: #ffffff; box-shadow: 0 10px 20px rgba(132, 186, 63, 0.35); }
.cl-app-hero small { display: block; opacity: 0.85; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.cl-app-hero b { display: block; margin: 2px 0 10px; font-size: 15px; }
.cl-app-progress { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.3); }
.cl-app-progress span { display: block; width: 68%; height: 100%; border-radius: 6px; background: #ffffff; }
.cl-app-row { display: flex; align-items: center; margin: 0 14px 8px; padding: 10px; border-radius: 14px; background: #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }
.cl-app-row i { width: 30px; height: 30px; margin-right: 10px; border-radius: 10px; background: #eef5e4; color: #6a9a2e; font-size: 13px; line-height: 30px; text-align: center; }
.cl-app-row span { flex: 1 1 auto; font-size: 11px; line-height: 15px; color: #8a8f86; }
.cl-app-row span b { display: block; color: #323232; font-size: 12px; }
.cl-app-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 12px 10px 20px; background: #ffffff; border-top: 1px solid #eceee8; }
.cl-app-tabs i { color: #b7bcb2; font-size: 16px; }
.cl-app-tabs i.on { color: #84ba3f; }
.cl-screen-dark .cl-app-tabs { background: #242721; border-top-color: #30342c; }
.cl-screen-dark .cl-app-tabs i { color: #6c7366; }
.cl-screen-dark .cl-app-tabs i.on { color: #84ba3f; }
.cl-app-stat { margin: 6px 16px 14px; }
.cl-app-stat small { color: #9aa294; font-size: 11px; }
.cl-app-stat b { display: block; font-family: 'Montserrat', sans-serif; font-size: 26px; line-height: 32px; }
.cl-app-stat em { color: #84ba3f; font-size: 11px; font-style: normal; font-weight: 700; }
.cl-app-chart { display: flex; align-items: flex-end; justify-content: space-between; height: 120px; margin: 0 16px 16px; padding: 12px; border-radius: 16px; background: #262922; }
.cl-app-chart span { width: 12%; border-radius: 6px 6px 3px 3px; background: #3c4235; }
.cl-app-chart span.on { background: linear-gradient(180deg, #a3d65f, #84ba3f); }
.cl-app-tile { display: flex; margin: 0 16px; }
.cl-app-tile div { flex: 1; margin-right: 8px; padding: 10px; border-radius: 14px; background: #262922; font-size: 10px; color: #9aa294; }
.cl-app-tile div:last-child { margin-right: 0; }
.cl-app-tile b { display: block; color: #ffffff; font-size: 15px; }
.cl-notif { position: absolute; left: -10px; bottom: 70px; z-index: 3; display: flex; align-items: center; width: 250px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3); color: #323232; font-size: 12px; line-height: 16px; text-align: left; animation: cl-float 4s ease-in-out infinite; }
.cl-notif i { flex: 0 0 34px; width: 34px; height: 34px; margin-right: 10px; border-radius: 10px; background: #84ba3f; color: #ffffff; font-size: 15px; line-height: 34px; text-align: center; }
.cl-notif b { display: block; font-size: 12px; }
.cl-notif span { color: #6f746b; }
.cl-phones-single { height: 540px; max-width: 290px; }
.cl-phones-single .cl-phone-front { right: 20px; top: 12px; }
.cl-phones-single .cl-notif { left: -40px; }
@keyframes cl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- Grilles de cartes ---------- */
/* Les pseudo-éléments clearfix de Bootstrap 3 deviennent des éléments flex dans Safari : on les neutralise */
.cl-cards:before, .cl-cards:after, .cl-equal:before, .cl-equal:after, .cl-hero .row:before, .cl-hero .row:after { display: none; }
.cl-cards { display: flex; flex-wrap: wrap; }
.cl-cards > [class*="col-"] { display: flex; margin-bottom: 30px; }
.cl-equal { display: flex; flex-wrap: wrap; }
.cl-equal > [class*="col-"] { display: flex; }
.cl-equal .feature-box { display: flex; flex-direction: column; width: 100%; }
.cl-equal .feature-box > a { margin-top: auto; padding-top: 25px; }
.cl-section[id] { scroll-margin-top: 90px; }
.cl-card { width: 100%; padding: 32px 28px; border: 1px solid #ececec; border-radius: 14px; background: #ffffff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.cl-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); }
.cl-card h4 { margin: 18px 0 10px; font-size: 18px; font-weight: 600; }
.cl-card p { margin: 0; font-size: 14px; line-height: 23px; }
.cl-icon { display: inline-block; width: 54px; height: 54px; border-radius: 14px; background: #eef5e4; color: #6a9a2e; font-size: 24px; line-height: 54px; text-align: center; }
.cl-dark .cl-card { border-color: #2a2a2a; background: #1e1e1e; box-shadow: none; }
.cl-dark .cl-card p { color: rgba(255, 255, 255, 0.65); }
.cl-dark .cl-icon { background: rgba(132, 186, 63, 0.15); color: #84ba3f; }

/* Étapes numérotées */
.cl-steps { counter-reset: clstep; }
.cl-step { position: relative; width: 100%; padding: 30px 26px 26px; border-radius: 14px; background: #f6f7f8; }
.cl-step:before { counter-increment: clstep; content: "0" counter(clstep); display: block; margin-bottom: 12px; color: #84ba3f; font-family: 'Montserrat', sans-serif; font-size: 34px; font-weight: 700; line-height: 1; }
.cl-step h5 { margin-bottom: 8px; font-size: 16px; font-weight: 600; }
.cl-step p { margin: 0; font-size: 14px; line-height: 22px; }

/* FAQ (accordéon du thème) */
.cl-faq .acd-group { margin-bottom: 14px; border: 1px solid #ececec; border-radius: 12px; background: #ffffff; }
.cl-faq .acd-heading { padding: 20px 60px 20px 24px !important; font-size: 16px; font-weight: 600; text-transform: none; }
.cl-faq .acd-des { padding: 0 24px 20px; }
.cl-faq .acd-des p { margin: 0; }

/* Bandeau d'appel à l'action (sombre, pour ne pas se confondre avec le bandeau contact vert qui suit) */
.cl-cta { position: relative; overflow: hidden; padding: 60px 0; background: #161616; color: #ffffff; }
.cl-cta:before { content: ""; position: absolute; left: -120px; top: -200px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(132, 186, 63, 0.28) 0%, rgba(132, 186, 63, 0) 70%); }
.cl-cta .container { position: relative; z-index: 1; }
.cl-cta h2 { margin-bottom: 8px; color: #ffffff; font-weight: 700; }
.cl-cta p { margin: 0; color: rgba(255, 255, 255, 0.75); font-size: 16px; }
.cl-cta .cl-actions { text-align: right; }
.cl-cta .cl-actions .button { margin: 6px 0 6px 12px; }

/* Encadré « application sur devis » sous la grille tarifaire */
.cl-quote { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 30px; padding: 24px 30px; border-radius: 14px; background: #161616; color: rgba(255, 255, 255, 0.8); }
.cl-quote strong { display: block; color: #ffffff; font-family: 'Montserrat', sans-serif; font-size: 18px; }
.cl-quote i.fa { margin-right: 6px; color: #84ba3f; }
.cl-quote .button { margin: 8px 0; }

/* Visuel sombre des blocs services */
.cl-service-visual { display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 440px; margin-bottom: 60px; border-radius: 14px; background: radial-gradient(circle at 70% 30%, rgba(132, 186, 63, 0.35), rgba(132, 186, 63, 0) 60%), #161616; }
.cl-service-visual .cl-phones-single { transform: scale(0.8); margin: -54px auto; }

/* Équipe : avatars à initiales */
.cl-avatar { display: inline-block; width: 150px; height: 150px; border-radius: 50%; background: linear-gradient(135deg, #84ba3f 0%, #4f7a1f 100%); color: #ffffff; font-family: 'Montserrat', sans-serif; font-size: 56px; font-weight: 700; line-height: 150px; text-align: center; box-shadow: 0 12px 30px rgba(132, 186, 63, 0.3); }
.cl-avatar.cl-avatar-dark { background: linear-gradient(135deg, #3a3a3a 0%, #161616 100%); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); }

/* ---------- Portfolio (portfolio.php) ---------- */
.cl-filters { margin: 0 0 40px; text-align: center; }
.cl-filters button { margin: 0 4px 10px; padding: 9px 18px; border: 1px solid #e3e3e3; border-radius: 30px; background: #ffffff; color: #323232; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 500; line-height: 20px; text-transform: none; transition: all 0.25s ease; }
.cl-filters button:hover, .cl-filters button:focus { border-color: #84ba3f; background: #ffffff; color: #6a9a2e; outline: none; }
.cl-filters button.active, .cl-filters button.active:hover { border-color: #84ba3f; background: #84ba3f; color: #ffffff; }
.cl-count { display: inline-block; min-width: 22px; margin-left: 4px; padding: 0 6px; border-radius: 20px; background: rgba(0, 0, 0, 0.06); font-size: 11px; line-height: 20px; text-align: center; }
.cl-filters button.active .cl-count { background: rgba(255, 255, 255, 0.25); }
.cl-works { margin: 0 -15px; }
.isotope.cl-works .grid-item { width: 50%; padding: 0 15px 30px; }
.cl-work { overflow: hidden; border: 1px solid #ececec; border-radius: 14px; background: #ffffff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.cl-work:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.12); }
.cl-work-img { position: relative; display: block; overflow: hidden; padding-top: 62.5%; background: #f1f3ee; }
.isotope .grid-item .cl-work-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.6s ease; }
.cl-work:hover .cl-work-img img { transform: scale(1.04); }
.cl-work-zoom { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: #323232; font-size: 16px; line-height: 42px; text-align: center; opacity: 0; transform: translateY(-6px); transition: all 0.3s ease; }
.cl-work:hover .cl-work-zoom, .cl-work-img:focus .cl-work-zoom { opacity: 1; transform: none; }
.cl-work-body { padding: 20px 24px 22px; }
.cl-work-meta { display: block; margin-bottom: 6px; color: #6a9a2e; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.cl-work h3 { margin: 0 0 12px; font-size: 19px; font-weight: 600; line-height: 26px; }
.cl-work-link { color: #323232; font-size: 14px; font-weight: 600; }
.cl-work-link i { margin-left: 4px; color: #84ba3f; font-size: 12px; }
.cl-work-link:hover, .cl-work-link:focus { color: #6a9a2e; }
.cl-more-wrap { margin-top: 10px; }

/* ---------- Page projet (realisation.php) ---------- */
.cl-work-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.6s ease; }
.cl-cards .cl-work { width: 100%; }
.cl-work h3 a { color: #323232; }
.cl-work h3 a:hover, .cl-work h3 a:focus { color: #6a9a2e; }
.cl-browser { overflow: hidden; border: 1px solid #e8e8e8; border-radius: 14px; background: #ffffff; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14); }
.cl-browser-bar { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #e6e7e3; background: #f1f2ef; }
.cl-browser-bar span { flex: 0 0 11px; width: 11px; height: 11px; margin-right: 7px; border-radius: 50%; background: #d9dcd4; }
.cl-browser-bar span:nth-child(1) { background: #ff6058; }
.cl-browser-bar span:nth-child(2) { background: #ffbd2e; }
.cl-browser-bar span:nth-child(3) { background: #28c940; }
.cl-browser-bar em { flex: 1 1 auto; overflow: hidden; margin-left: 12px; padding: 5px 14px; border-radius: 20px; background: #ffffff; color: #7a7f75; font-size: 12px; font-style: normal; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.cl-browser-img { display: block; cursor: zoom-in; }
.cl-browser-img img { display: block; width: 100%; height: auto; }
.cl-project p { font-size: 15px; line-height: 26px; }
.cl-facts { margin: 26px 0 30px; padding: 0; border-top: 1px solid #ececec; list-style: none; }
.cl-facts li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #ececec; font-size: 14px; line-height: 22px; }
.cl-facts li > span { flex: 0 0 auto; margin-right: 20px; color: #8a8f86; }
.cl-facts strong { color: #323232; font-weight: 600; text-align: right; }
.cl-facts a { color: #6a9a2e; }
.cl-facts a:hover { color: #323232; }
.cl-offline { color: #9a9a9a; font-weight: 500; }
.cl-offline-note { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 12px; background: #f1f1f1; color: #8a8a8a; font-size: 11px; font-style: normal; font-weight: 500; }
@media (max-width: 991px) {
  .cl-project { margin-top: 40px; }
}

/* ---------- Page projet : version mobile et atouts techniques ---------- */
.cl-showcase { position: relative; }
.cl-showcase-mobile { padding: 0 80px 50px 0; }
.cl-mobile-shot { position: absolute; right: 0; bottom: 0; z-index: 2; width: 170px; text-align: center; cursor: zoom-in; }
.cl-mobile-frame { position: relative; display: block; padding: 7px; border-radius: 30px; background: #0d0d0d; box-shadow: 0 0 0 2px #2c2c2c, 0 24px 50px rgba(0, 0, 0, 0.35); transition: transform 0.3s ease; }
.cl-mobile-shot:hover .cl-mobile-frame { transform: translateY(-4px); }
.cl-mobile-frame img { display: block; width: 100%; height: auto; border-radius: 24px; }
.cl-mobile-frame .cl-island { top: 13px; width: 48px; height: 14px; margin-left: -24px; }
.cl-mobile-label { display: inline-block; margin-top: 12px; padding: 4px 12px; border-radius: 20px; background: #84ba3f; color: #ffffff; font-size: 12px; font-weight: 600; }
.cl-atouts { margin-top: 60px; padding: 30px; border-radius: 14px; background: #f6f7f8; }
.cl-atouts h3 { margin: 0 0 20px; font-size: 20px; font-weight: 600; }
.cl-atouts ul { display: flex; flex-wrap: wrap; margin: 0 -8px; padding: 0; list-style: none; }
.cl-atouts li { display: flex; align-items: center; flex: 1 1 200px; margin: 0 8px 12px; padding: 14px 16px; border-radius: 12px; background: #ffffff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04); }
.cl-atouts li i { flex: 0 0 42px; width: 42px; height: 42px; margin-right: 12px; border-radius: 12px; background: #eef5e4; color: #6a9a2e; font-size: 20px; line-height: 42px; text-align: center; }
.cl-atouts strong { display: block; color: #323232; font-size: 14px; line-height: 20px; }
.cl-atouts span { display: block; color: #8a8f86; font-size: 12px; line-height: 18px; }
.cl-work-foot { display: flex; align-items: center; justify-content: space-between; }
.cl-work-tech i { margin-left: 10px; color: #9aa294; font-size: 15px; }
.cl-work-tech i.fa-mobile { font-size: 18px; }
.cl-standards { margin: 0 0 30px; text-align: center; }
.cl-standards-title { display: block; margin-bottom: 12px; color: #8a8f86; font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.cl-standards ul { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.cl-standards li { margin: 0 6px 8px; padding: 7px 14px; border-radius: 30px; background: #eef5e4; color: #4f7a1f; font-size: 13px; font-weight: 600; }
.cl-standards li i { margin-right: 4px; }
@media (max-width: 767px) {
  .cl-showcase-mobile { padding: 0 50px 40px 0; }
  .cl-mobile-shot { width: 115px; }
  .cl-mobile-frame { padding: 5px; border-radius: 20px; }
  .cl-mobile-frame img { border-radius: 16px; }
  .cl-mobile-frame .cl-island, .cl-mobile-label { display: none; }
  .cl-atouts { margin-top: 40px; padding: 20px; }
}

/* ---------- Pied de page ---------- */
.footer.cl-footer { padding: 60px 0 0; background: #141414; }
.cl-footer-col { margin-bottom: 30px; }
.cl-footer-logo { height: 44px; margin-bottom: 18px; }
.cl-footer p { color: rgba(255, 255, 255, 0.6); font-size: 14px; line-height: 23px; }
.cl-footer h6 { margin: 8px 0 18px; color: #ffffff; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.cl-footer-links { margin: 0; padding: 0; list-style: none; }
.cl-footer-links li { margin-bottom: 10px; }
.cl-footer-links a { color: rgba(255, 255, 255, 0.65); font-size: 14px; }
.cl-footer-links a:hover, .cl-footer-links a:focus { color: #84ba3f; }
.cl-footer-social { margin-top: 20px; }
.cl-footer-social a { display: inline-block; width: 38px; height: 38px; margin-right: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #ffffff; line-height: 38px; text-align: center; transition: all 0.3s ease; }
.cl-footer-social a:hover, .cl-footer-social a:focus { background: #84ba3f; color: #ffffff; }
.cl-footer-bottom { margin-top: 10px; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.45); font-size: 13px; }
.cl-footer-bottom a { color: rgba(255, 255, 255, 0.7); }
.contact-box a.text-white:hover { color: #ffffff; text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .cl-hero h1 { font-size: 46px; }
}
@media (max-width: 991px) {
  .cl-hero { padding: 190px 0 80px; }
  .cl-hero h1 { font-size: 40px; }
  .cl-hero-card { margin: 30px 0 0; }
  .cl-section { padding: 70px 0; }
  .cl-phones { margin-top: 50px; }
  .cl-cta .cl-actions { margin-top: 24px; text-align: left; }
  .cl-cta .cl-actions .button { margin: 6px 12px 6px 0; }
}
@media (max-width: 767px) {
  .cl-hero { padding: 170px 0 60px; }
  .cl-hero:before { background: linear-gradient(180deg, rgba(20, 20, 20, 0.88) 0%, rgba(20, 20, 20, 0.8) 100%); }
  .cl-hero h1 { font-size: 34px; letter-spacing: -0.5px; }
  .cl-hero-lead { font-size: 16px; }
  .cl-hero-facts li { margin-right: 28px; }
  .cl-hero-facts strong { font-size: 24px; }
  .cl-actions .button { display: block; margin-right: 0; text-align: center; }
  .cl-section { padding: 55px 0; }
  .cl-phones { height: 470px; max-width: 330px; transform: scale(0.86); transform-origin: top center; margin-bottom: -60px; }
  .cl-phone-back { left: -10px; }
  .cl-phone-front { right: 0; }
  .cl-notif { left: 0; width: 230px; }
  .cl-phones-single .cl-notif { left: -10px; }
  .cl-service-visual { min-height: 420px; }
  .cl-quote { text-align: center; justify-content: center; }
  .cl-quote .button { margin-top: 16px; }
  .isotope.cl-works .grid-item { width: 100%; }
  .cl-filters { display: flex; overflow-x: auto; margin: 0 -15px 30px; padding: 0 15px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cl-filters::-webkit-scrollbar { display: none; }
  .cl-filters button { flex: 0 0 auto; margin: 0 8px 0 0; }
  .cl-work-body { padding: 18px 20px 20px; }
  .cl-work h3 { font-size: 17px; line-height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-notif { animation: none; }
  .feature-box, .cl-card, .cl-hero-card { transition: none; }
}