/* ============================================================================= INSTALL COMMUNICATION 33 DEMANDE DE DEVIS PREMIUM V3 =============================================================================*/ /* ============================================================================= SECTION =============================================================================*/ .ic33-cta{ position:relative; width:100%; overflow:hidden; background:#081321; } /* ============================================================================= IMAGE =============================================================================*/ .ic33-cta__background{ position:relative; width:100%; line-height:0; } .ic33-cta__background img{ display:block; width:100%; height:auto; } /* ============================================================================= DÉGRADÉ =============================================================================*/ .ic33-cta__overlay{ position:absolute; inset:0; pointer-events:none; background: linear-gradient( 90deg, rgba(6,18,34,.88) 0%, rgba(6,18,34,.74) 22%, rgba(6,18,34,.46) 42%, rgba(6,18,34,.18) 62%, rgba(6,18,34,0) 100% ); } /* ============================================================================= CONTENEUR =============================================================================*/ .ic33-cta .container{ position:absolute; inset:0; z-index:10; width:100%; max-width:none; padding:0; margin:0; } /* ============================================================================= CONTENU =============================================================================*/ .ic33-cta__content{ position:relative; width:100%; height:100%; } /* ============================================================================= BLOC TEXTE =============================================================================*/ .ic33-cta__inner{ position:absolute; top:40%; left:3%; transform:translateY(-50%); width:900px; max-width:none; z-index:20; } /* ============================================================================= BADGE =============================================================================*/ .ic33-cta__badge{ display:inline-flex; align-items:center; justify-content:center; margin-bottom:24px; padding:10px 22px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(12px); } .ic33-cta__badge span{ color:#FFFFFF; font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; } /* ============================================================================= TITRE =============================================================================*/ .ic33-cta__title{ width:900px; max-width:none; margin:0 0 32px; color:#FFFFFF; font-size:clamp(38px,3.8vw,72px); font-weight:900; line-height:1.08; letter-spacing:0; text-transform:uppercase; text-shadow: 0 6px 18px rgba(0,0,0,.35); } /* ============================================================================= TEXTE =============================================================================*/ .ic33-cta__text{ width:700px; max-width:none; margin:0 0 42px; color:rgba(255,255,255,.94); font-size:20px; line-height:1.85; } /* ============================================================================= ACTIONS =============================================================================*/ .ic33-cta__actions{ display:flex; align-items:center; gap:20px; } /* ============================================================================= BOUTON =============================================================================*/ .ic33-cta__button{ display:inline-flex; align-items:center; justify-content:center; gap:14px; min-width:270px; height:64px; padding:0 38px; border-radius:8px; border:none; background:#F58220; color:#FFFFFF; text-decoration:none; text-transform:uppercase; font-size:15px; font-weight:700; letter-spacing:.5px; box-shadow: 0 18px 40px rgba(245,130,32,.28); transition: background .30s ease, transform .30s ease, box-shadow .30s ease; } /* ============================================================================= HOVER =============================================================================*/ .ic33-cta__button:hover{ background:#E97412; color:#FFFFFF; transform:translateY(-3px); box-shadow: 0 22px 48px rgba(245,130,32,.38); } /* ============================================================================= ICÔNE =============================================================================*/ .ic33-cta__button svg{ width:20px; height:20px; transition:transform .30s ease; } .ic33-cta__button:hover svg{ transform:translateX(6px); } /* ============================================================================= RESPONSIVE 1600 PX =============================================================================*/ @media (max-width:1600px){ .ic33-cta__inner{ left:2.5%; width:760px; } .ic33-cta__title{ width:760px; font-size:56px; } .ic33-cta__text{ width:620px; font-size:18px; } } /* ============================================================================= RESPONSIVE 1200 PX =============================================================================*/ @media (max-width:1200px){ .ic33-cta__inner{ left:40px; width:620px; } .ic33-cta__title{ width:620px; font-size:48px; } .ic33-cta__text{ width:560px; font-size:17px; } } /* ============================================================================= TABLETTE =============================================================================*/ @media (max-width:992px){ .ic33-cta__overlay{ background:linear-gradient( 180deg, rgba(8,19,33,.82) 0%, rgba(8,19,33,.60) 45%, rgba(8,19,33,.28) 100% ); } .ic33-cta__inner{ position:absolute; top:40px; left:30px; right:30px; transform:none; width:auto; } .ic33-cta__title{ width:auto; font-size:42px; } .ic33-cta__text{ width:auto; font-size:17px; line-height:1.8; } } /* ============================================================================= DEVIS MOBILE V2 =============================================================================*/ @media (max-width:768px){ .ic33-cta{ position:relative; } .ic33-cta__background{ position:relative; } .ic33-cta__background img{ width:100%; min-height:760px; object-fit:cover; object-position:65% center; } .ic33-cta__overlay{ background:linear-gradient( 180deg, rgba(8,19,33,.82) 0%, rgba(8,19,33,.62) 40%, rgba(8,19,33,.25) 100% ); } .ic33-cta__inner{ position:absolute; top:80px; left:20px; right:20px; width:auto; transform:none; } .ic33-cta__badge{ margin-bottom:18px; } .ic33-cta__badge span{ font-size:12px; letter-spacing:1.5px; } .ic33-cta__title{ font-size:30px; line-height:1.20; max-width:100%; } .ic33-cta__text{ width:auto; margin-bottom:28px; font-size:17px; line-height:1.70; } .ic33-cta__actions{ width:100%; } .ic33-cta__button{ width:100%; min-width:0; height:58px; justify-content:center; } } @media (max-width:768px){ .ic33-cta__inner{ animation:none; transform:none !important; } } /* ============================================================================= PETITS SMARTPHONES =============================================================================*/ @media (max-width:480px){ .ic33-cta__background img{ min-height:700px; object-position:70% center; } .ic33-cta__inner{ top:25px; left:16px; right:16px; } .ic33-cta__title{ font-size:32px; } .ic33-cta__text{ font-size:15px; line-height:1.65; } .ic33-cta__button{ height:54px; font-size:14px; } } /* ============================================================================= ANIMATION =============================================================================*/ .ic33-cta__inner{ animation:ic33DevisFade .9s ease forwards; } @keyframes ic33DevisFade{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); } } /* ============================================================================= ACCESSIBILITÉ =============================================================================*/ .ic33-cta__button:focus-visible{ outline:2px solid #005FD6; outline-offset:3px; } /* ============================================================================= IMPRESSION =============================================================================*/ @media print{ .ic33-cta{ display:none; } } /* ============================================================================= RÉDUCTION DES ANIMATIONS =============================================================================*/ @media (prefers-reduced-motion:reduce){ .ic33-cta__inner{ animation:none; transform:translateY(-50%); } .ic33-cta__button{ transition:none; } } /* ============================================================================= OPTIMISATIONS =============================================================================*/ .ic33-cta{ isolation:isolate; } .ic33-cta__background img{ display:block; backface-visibility:hidden; -webkit-backface-visibility:hidden; image-rendering:auto; user-select:none; -webkit-user-drag:none; } .ic33-cta__button{ will-change:transform; } .ic33-cta__inner{ will-change:transform,opacity; } /* ============================================================================= FIN DEVIS.CSS =============================================================================*/