/* Styles de la page d'accueil (index.html) — externalisés du HTML le 15/08/2026 pour un chargement plus rapide et un code plus lisible. Contenu inchangé, simplement déplacé. */ :root{ --blue:#0077a3; --blue-strong:#1E88E5; --accent:#e63946; --green:#43A047; --soft:#f5f7fb; --card-bg:#ffffff; --radius:12px; --max-width:1100px; --transition:0.28s ease; } *{box-sizing:border-box} html,body{height:100%} body { margin:0; padding:0; font-family:'Poppins', Arial, sans-serif; color:#222; line-height:1.6; background:#fff; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* ── Bandes de fond pleine largeur (en alternance derrière certaines sections) ── Auparavant le fond gris uni de débordait tel quel de chaque côté du contenu centré (1100px) sur grand écran, laissant de grands espaces vides. Le fond de page est passé au blanc pur, et ces sections reçoivent une teinte bleu pâle nettement visible qui s'étend sur toute la largeur de l'écran, en alternance avec les sections restées blanches — ça crée un vrai rythme au lieu du vide. Le contenu de la section n'est pas touché : seul un pseudo-élément ::before, positionné derrière, s'étend sur toute la largeur de l'écran (technique standard, plus fiable qu'un box-shadow à très grand rayon qui peut mal se comporter selon le moteur de rendu). */ main section.band{ position:relative; z-index:0; } main section.band::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background:#dcebf5; z-index:-1; } /* Header */ header { background:var(--blue); color:#fff; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; } .brand { display:flex; align-items:center; gap:14px; } header img { height:95px; width:auto; object-fit:contain; border-radius:8px; background:rgba(255,255,255,0.04); padding:6px } header .cta { background:var(--accent); color:#fff; padding:12px 20px; border-radius:999px; text-decoration:none; font-weight:600; transition:transform var(--transition), background var(--transition); } header .cta:hover{ transform:translateY(-3px); background:#c92e3d } /* Hero */ .hero { color:#fff; text-align:center; padding:72px 20px; background:linear-gradient(135deg, rgba(0,119,163,0.92), rgba(0,184,148,0.92)), url('images/jardin-apres.jpg') center/cover no-repeat; } .hero .container{ max-width:var(--max-width); margin:auto; } .eyebrow { display:inline-block; background:rgba(255,255,255,0.08); padding:8px 14px; border-radius:999px; font-weight:600; margin-bottom:18px; } .hero h1 { font-size:44px; margin:6px 0 6px; line-height:1.05; font-weight:700; text-shadow:0 6px 20px rgba(0,0,0,0.28); } .hero h2 { font-size:20px; font-weight:600; margin-bottom:16px; opacity:0.95 } .hero p { font-size:17px; max-width:820px; margin:14px auto 26px; opacity:0.95 } .hero .hero-cta { display:inline-block; background:var(--accent); color:#fff; padding:14px 28px; border-radius:999px; font-weight:700; text-decoration:none; box-shadow:0 8px 24px rgba(230,57,70,0.18); transition:transform var(--transition); } .hero .hero-cta:hover{ transform:translateY(-4px) } .hero h2 { color: #004c73; /* bleu foncé lisible */ opacity: 0; transform: translateY(10px); transition: opacity 0.8s ease, transform 0.8s ease;} .hero h2.visible { opacity: 1; transform: translateY(0);} main{ max-width:var(--max-width); margin:30px auto; padding:0 18px; } section{ margin:36px 0; } section h2{ color:var(--blue-strong); font-size:28px; margin-bottom:22px; text-align:center } /* Services grid */ .services{ display:grid; gap:16px; grid-template-columns:repeat(5,1fr); } @media(max-width:1100px){ .services{ grid-template-columns:repeat(3,1fr); } } @media(max-width:700px){ .services{ grid-template-columns:repeat(2,1fr); } } @media(max-width:480px){ .services{ grid-template-columns:1fr; } } .card{ background:var(--card-bg); padding:22px; border-radius:var(--radius); box-shadow:0 10px 30px rgba(19,33,41,0.06); transition:transform var(--transition), box-shadow var(--transition); text-align:center } .card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(19,33,41,0.09) } .card .icon{ width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:28px; background:linear-gradient(135deg, rgba(3,169,244,0.08), rgba(67,160,71,0.06)); color:var(--blue); } .card h3{ margin:6px 0 10px; color:var(--blue-strong) } .card p{ font-size:15px; color:#444; margin:0 } /* Carousel */ .carousel{ position:relative; overflow:hidden; border-radius:14px; background:#fff; box-shadow:0 8px 30px rgba(3,44,61,0.06) } .carousel-inner{ display:flex; transition:transform 0.6s cubic-bezier(.2,.9,.3,1); } .carousel-item{ min-width:100%; } .carousel-item img{ width:100%; height:520px; object-fit:cover; display:block; border-radius:14px } .carousel-controls{ position:absolute; inset:0; pointer-events:none } .control{ position:absolute; top:50%; transform:translateY(-50%); pointer-events:auto; background:rgba(0,0,0,0.45); color:#fff; border:none; padding:10px; border-radius:50%; font-size:18px } .control.left{ left:12px } .control.right{ right:12px } /* Contact */ .contact{ background:var(--card-bg); padding:26px; border-radius:var(--radius); box-shadow:0 10px 30px rgba(3,44,61,0.06) } .contact .row{ display:grid; grid-template-columns:1fr 1fr; gap:14px } .contact input, .contact select, .contact textarea{ width:100%; padding:12px; border-radius:8px; border:1px solid #e6e9ee; font-size:15px } .contact button{ background:var(--blue); color:#fff; padding:12px 18px; border-radius:999px; border:none; font-weight:700; cursor:pointer } .contact a.link-phone{ color:var(--blue); font-weight:700; text-decoration:none } /* FAQ styles */ #faq .faq-item{ margin-bottom:10px } .faq-question{ width:100%; text-align:left; background:var(--blue); color:#fff; border:none; padding:14px 18px; border-radius:10px; cursor:pointer; font-weight:600 } .faq-answer{ max-height:0; overflow:hidden; transition:max-height 0.28s ease; background:#f6f9fb; padding:0 18px; border-radius:0 0 10px 10px } .faq-answer p{ margin:12px 0 } /* Footer */ footer{ margin-top:40px; background:linear-gradient(90deg,var(--blue),var(--blue-strong)); color:#fff; padding:28px 18px } footer .wrap{ max-width:var(--max-width); margin:auto; display:flex; gap:20px; flex-wrap:wrap; justify-content:space-between } footer a{ color:#fff } /* Menu de contact rapide (flottant) — regroupe WhatsApp / Urgence 24h / Chatbot dans un seul bouton plutôt que 3 boutons empilés en permanence à l'écran */ .contact-fab-wrap{ position:fixed; bottom:20px; right:20px; z-index:1002; display:flex; flex-direction:column-reverse; align-items:flex-end; gap:12px; } .contact-fab-main{ width:58px; height:58px; border-radius:50%; border:none; background:var(--accent); color:#fff; font-size:24px; cursor:pointer; box-shadow:0 6px 18px rgba(230,57,70,0.35); display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; animation:fab-pulse 2s ease-in-out 4; transition:transform 0.25s ease, box-shadow 0.25s ease; } .contact-fab-main:hover{ transform:scale(1.08); box-shadow:0 10px 26px rgba(230,57,70,0.45); } .contact-fab-main .fab-icon-close{ display:none; } .contact-fab-wrap.open .contact-fab-main .fab-icon-open{ display:none; } .contact-fab-wrap.open .contact-fab-main .fab-icon-close{ display:block; } .contact-fab-menu{ display:flex; flex-direction:column-reverse; align-items:flex-end; gap:12px; } .contact-fab-item{ display:flex; align-items:center; gap:8px; text-decoration:none; font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,0.18); opacity:0; transform:translateY(10px) scale(0.9); pointer-events:none; transition:opacity 0.2s ease, transform 0.2s ease; } .contact-fab-wrap.open .contact-fab-item{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } .contact-fab-wrap.open .fab-whatsapp{ transition-delay:0.02s; } .contact-fab-wrap.open .fab-chatbot{ transition-delay:0.06s; } .contact-fab-wrap.open .fab-urgence{ transition-delay:0.1s; } .fab-whatsapp{ width:48px; height:48px; border-radius:50%; background:#25D366; color:#fff; font-size:20px; justify-content:center; } .fab-chatbot{ background:#0077a3; color:#fff; padding:12px 16px; border-radius:999px; font-size:14px; } .fab-chatbot .bot-dot{ width:8px; height:8px; background:#69f0ae; border-radius:50%; animation:pulse 2s infinite; } .fab-urgence{ background:#e63946; color:#fff; padding:12px 16px; border-radius:999px; font-size:14px; } /* Responsive */ @media(max-width:880px){ .contact .row{ grid-template-columns:1fr } header img{ height:56px } .hero h1{ font-size:34px } } @media(max-width:520px){ .hero p{ font-size:15px } .carousel-item img{ height:220px } } .cta:hover, .hero-cta:hover { transform: scale(1.05); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); background-color: #d53b4c; /* nuance légèrement plus foncée */ transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; } .card:hover { transform: scale(1.03); box-shadow: 0 12px 30px rgba(0,0,0,0.15); transition: transform 0.3s ease, box-shadow 0.3s ease; } section h2 { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } section.visible h2 { opacity: 1; transform: translateY(0); } .carousel-item { background: #f5f7fb; } .signature { font-family: 'Dancing Script', cursive !important; font-size: clamp(1.4rem, 3.5vw, 2.4rem); font-weight: 700; margin-top: 4px; margin-bottom: 16px; color: rgba(255,255,255,0.9); display: block; letter-spacing: 1px; } @keyframes fab-pulse { 0% { transform: scale(1); box-shadow: 0 6px 18px rgba(230, 57, 70, 0.3); opacity: 1; } 50% { transform: scale(1.05); box-shadow: 0 8px 24px rgba(230, 57, 70, 0.4); opacity: 0.9; } 100% { transform: scale(1); box-shadow: 0 6px 18px rgba(230, 57, 70, 0.3); opacity: 1; } } /* Footer modernisé */ .site-footer { background: var(--blue); color: #fff; padding: 30px 20px; text-align: center; box-shadow: 0 -4px 12px rgba(0,0,0,0.1); margin-top: 60px; } .footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; gap: 12px; } .footer-left { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1rem; } .footer-logo { height: 95px; width: auto; object-fit: contain; } .footer-right a { color: #fff; text-decoration: none; font-size: 0.9rem; margin: 0 8px; transition: color 0.3s; } .footer-right a:hover { color: var(--yellow); } .footer-bottom { margin-top: 14px; font-size: 0.8rem; opacity: 0.8; } .hero-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; } /* Badge prix */ .price-badge { width: 100%; max-width: 260px; /* même largeur visuelle que le bouton */ text-align: center; padding: 10px 20px; border-radius: 999px; background: rgba(255,255,255,0.14); color: #fff; font-weight: 600; font-size: 15px; box-shadow: 0 6px 18px rgba(0,0,0,0.15); } /* Texte explicatif discret */ .price-note { font-size: 12px; color: rgba(255,255,255,0.85); text-align: center; max-width: 280px; line-height: 1.4; } .credit-impot { margin: 40px 0; display: flex; justify-content: center; } .credit-box { background: linear-gradient(135deg, #0077a3, #1E88E5); color: #fff; padding: 28px; border-radius: 14px; max-width: 700px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.15); } .credit-box h2 { margin-bottom: 12px; font-size: 24px; } .credit-box ul { list-style: none; padding: 0; margin: 16px 0; } .credit-box li { margin: 8px 0; font-size: 16px; } .credit-box .example { font-weight: 600; margin-top: 10px; opacity: 0.95; } .sap-inline { font-size: 12px; font-weight: 600; color: #fff; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); white-space: nowrap; } /* Nav */ .nav{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end; } .nav a{ color:#fff; text-decoration:none; font-size:15px; opacity:0.9; } .nav a:hover{ opacity:1; } @media(max-width:600px){ header{ flex-wrap:wrap; justify-content:center; text-align:center; } .nav{ width:100%; justify-content:center; gap:10px 16px; font-size:14px; } .brand-sub{ display:none; } } /* Hero h2 fix */ .hero h2 { color:#fff !important; } /* Stats bar */ .stats-bar { background:linear-gradient(135deg,#0077a3,#1E88E5); padding:28px 20px; border-radius:var(--radius); display:flex; justify-content:center; gap:40px; flex-wrap:wrap; box-shadow:0 10px 30px rgba(0,119,163,0.18); } .stat-item { text-align:center; color:#fff; } .stat-number { font-size:42px; font-weight:700; line-height:1; display:block; } .stat-label { font-size:14px; opacity:0.9; margin-top:4px; display:block; } /* About Julie */ .about-julie { display:flex; align-items:center; gap:36px; background:#fff; border-radius:var(--radius); padding:32px; box-shadow:0 10px 30px rgba(3,44,61,0.06); } .about-avatar { width:120px; height:120px; border-radius:50%; background:linear-gradient(135deg,#0077a3,#1E88E5); display:flex; align-items:center; justify-content:center; font-size:52px; flex-shrink:0; box-shadow:0 8px 24px rgba(0,119,163,0.2); } .about-text h2 { text-align:left; margin-bottom:10px; } .about-text p { color:#555; font-size:15px; line-height:1.7; margin:0 0 14px; } .about-signature { font-family:'Dancing Script',cursive; font-size:28px; color:#0077a3; } @media(max-width:600px){ .about-julie{ flex-direction:column; text-align:center; } .about-text h2{ text-align:center; } } /* Trust bar */ .trust-bar { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:16px; background:#f0f6fa; border-radius:var(--radius); margin-top:18px; } .trust-item { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid #cde4f0; padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600; color:#0077a3; } /* Form simple */ .form-simple h3 { color:var(--blue-strong); margin-bottom:14px; } .row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:10px; } @media(max-width:700px){ .row3{ grid-template-columns:1fr; } } .form-toggle { text-align:center; font-size:13px; color:var(--blue); cursor:pointer; margin-top:10px; text-decoration:underline; } /* Google avis */ #google-badge { position:fixed; left:20px; bottom:20px; background:#fff; border-radius:14px; padding:10px 14px; box-shadow:0 6px 24px rgba(0,0,0,0.15); display:flex; align-items:center; gap:10px; z-index:9000; text-decoration:none; transition:transform 0.25s ease; border:1px solid #e8e8e8; } #google-badge:hover { transform:translateY(-3px); } #google-badge .badge-note { font-size:17px; font-weight:700; color:#222; display:block; } #google-badge .badge-stars { color:#F6B800; font-size:13px; display:block; } #google-badge .badge-label { font-size:11px; color:#888; display:block; } .google-avis-section { background:#fff; border-radius:16px; padding:28px; box-shadow:0 10px 30px rgba(3,44,61,0.06); } .google-avis-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:24px; } .google-avis-header h2 { margin:0; text-align:left; } .google-global-note { display:flex; align-items:center; gap:10px; background:#f9f9f9; border-radius:12px; padding:10px 16px; border:1px solid #eee; } .google-global-note .big-note { font-size:32px; font-weight:700; color:#222; line-height:1; } .stars-row { color:#F6B800; font-size:16px; display:block; } .avis-count { font-size:12px; color:#888; display:block; } .google-avis-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-bottom:20px; } .g-avis-card { background:#f9fbfd; border-radius:12px; padding:18px; border:1px solid #e8f0f7; } .g-avis-top { display:flex; align-items:center; gap:12px; margin-bottom:10px; } .g-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#0077a3,#1E88E5); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:16px; flex-shrink:0; } .g-avis-name { font-weight:600; font-size:15px; color:#222; } .g-avis-stars { color:#F6B800; font-size:13px; } .g-avis-text { font-size:14px; color:#555; line-height:1.6; margin:0; font-style:italic; } .g-verified { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:#4285F4; margin-top:8px; } .btn-laisser-avis { display:inline-flex; align-items:center; gap:8px; background:#fff; border:2px solid #4285F4; color:#4285F4; padding:11px 22px; border-radius:999px; font-weight:700; font-size:15px; text-decoration:none; transition:all 0.25s ease; } .btn-laisser-avis:hover { background:#4285F4; color:#fff; transform:translateY(-2px); } /* Popup exit-intent */ #popup-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:99998; backdrop-filter:blur(3px); } #popup-box { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.92); background:#fff; border-radius:18px; padding:36px 32px 28px; max-width:440px; width:90%; z-index:99999; box-shadow:0 24px 60px rgba(0,0,0,0.22); text-align:center; opacity:0; transition:transform 0.35s cubic-bezier(.2,.9,.3,1),opacity 0.35s ease; } #popup-box.visible { opacity:1; transform:translate(-50%,-50%) scale(1); } #popup-box .popup-emoji { font-size:42px; margin-bottom:8px; } #popup-box h3 { color:#0077a3; font-size:22px; margin:0 0 8px; } #popup-box p { color:#555; font-size:15px; margin:0 0 20px; line-height:1.5; } #popup-box input[type="tel"] { width:100%; padding:13px 16px; border:2px solid #e0eaf2; border-radius:10px; font-size:16px; margin-bottom:12px; outline:none; transition:border-color 0.2s; } #popup-box input[type="tel"]:focus { border-color:#0077a3; } #popup-btn-rappel { width:100%; background:linear-gradient(135deg,#e63946,#c92e3d); color:#fff; border:none; padding:14px; border-radius:999px; font-size:16px; font-weight:700; cursor:pointer; box-shadow:0 6px 18px rgba(230,57,70,0.25); } #popup-close { position:absolute; top:14px; right:18px; font-size:22px; cursor:pointer; color:#aaa; background:none; border:none; line-height:1; } .popup-note { font-size:12px; color:#aaa; margin-top:10px; } #popup-success { display:none; } /* Roue de la fortune */ #rouletteOverlay{ position:fixed; inset:0; background:rgba(20,30,40,0.55); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:99998; padding:20px; } #rouletteOverlay.open{ opacity:1; pointer-events:auto; } #rouletteOverlay .roulette-card{ background:var(--card-bg); width:100%; max-width:920px; max-height:calc(100vh - 40px); border-radius:var(--radius); box-shadow:0 30px 60px -20px rgba(0,50,70,0.35); position:relative; overflow-y:auto; overflow-x:hidden; transform:translateY(16px) scale(0.98); transition:transform .3s cubic-bezier(.2,.8,.2,1); display:grid; grid-template-columns:1.05fr 1fr; } #rouletteOverlay.open .roulette-card{ transform:translateY(0) scale(1); } @media (max-width:760px){ #rouletteOverlay{ align-items:flex-start; padding:12px; } #rouletteOverlay .roulette-card{ grid-template-columns:1fr; max-height:calc(100vh - 24px); } .roulette-panel{ padding:30px 24px; } .roulette-side{ padding:24px; } .roulette-wheel-wrap{ width:230px !important; height:230px !important; margin:0 auto; } } /* Bouton fermer : élément FRÈRE de .roulette-card (pas enfant) dans le HTML, donc jamais affecté par le transform d'animation de la carte. Toujours ancré au coin de l'écran, cliquable en permanence, même si le contenu de la popup défile (petits écrans type iPhone mini où le contenu dépasse la hauteur visible). */ .roulette-close{ position:fixed; top:max(16px, env(safe-area-inset-top)); right:max(16px, env(safe-area-inset-right)); width:38px; height:38px; border-radius:50%; border:none; background:rgba(0,0,0,0.55); color:#fff; font-size:16px; cursor:pointer; z-index:99999; display:flex; align-items:center; justify-content:center; } .roulette-panel{ padding:44px 40px; display:flex; flex-direction:column; justify-content:center; gap:16px; } .roulette-eyebrow{ font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--blue); font-weight:700; font-family:'Outfit',sans-serif; } .roulette-panel h1{ font-family:'Outfit',sans-serif; font-weight:800; font-size:30px; line-height:1.15; margin:0; color:#152a35; } .roulette-panel p.lead{ margin:0; font-size:14.5px; line-height:1.55; color:#333; } #rouletteForm{ display:flex; flex-direction:column; gap:12px; margin-top:4px; } .roulette-field{ display:flex; flex-direction:column; gap:6px; } .roulette-field label{ font-size:12px; font-weight:600; color:#152a35; font-family:'Outfit',sans-serif; } .roulette-field input[type="text"], .roulette-field input[type="email"]{ border:1.5px solid #dde3ea; background:var(--soft); border-radius:10px; padding:12px 14px; font-family:'Poppins',sans-serif; font-size:14px; color:#333; outline:none; transition:border-color .15s ease; } .roulette-field input:focus{ border-color:var(--blue); } .roulette-consent{ display:flex; gap:9px; align-items:flex-start; font-size:11.5px; color:#6b7686; line-height:1.4; margin-top:2px; } .roulette-consent input{ margin-top:3px; } .roulette-btn-primary{ margin-top:6px; background:var(--accent); color:#fff; border:none; border-radius:999px; padding:14px 20px; font-family:'Outfit',sans-serif; font-weight:700; font-size:14px; cursor:pointer; box-shadow:0 8px 24px rgba(230,57,70,0.28); transition:background var(--transition), transform var(--transition); } .roulette-btn-primary:hover{ background:#d32f3d; transform:translateY(-1px); } .roulette-btn-primary:disabled{ opacity:0.5; cursor:not-allowed; transform:none; } .roulette-fine-print{ font-size:11px; color:#93a0ae; margin-top:2px; } .roulette-result-badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(67,160,71,0.12); color:#2e7d32; border-radius:999px; padding:6px 14px; font-size:12px; font-weight:700; width:fit-content; font-family:'Outfit',sans-serif; } .roulette-code-box{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--blue); color:#fff; border-radius:var(--radius); padding:14px 16px; margin-top:4px; } .roulette-code-box span.code{ font-family:'Outfit',sans-serif; font-weight:800; font-size:19px; letter-spacing:0.05em; } .roulette-code-box button{ background:#fff; border:none; color:var(--blue); font-weight:700; font-size:12px; padding:8px 12px; border-radius:8px; cursor:pointer; font-family:'Outfit',sans-serif; } .roulette-side{ background:linear-gradient(160deg, var(--blue) 0%, #005f82 100%); display:flex; align-items:center; justify-content:center; padding:40px; position:relative; } .roulette-wheel-wrap{ position:relative; width:290px; height:290px; } .roulette-pointer{ position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; border-top:22px solid var(--accent); z-index:6; filter:drop-shadow(0 3px 4px rgba(0,0,0,0.35)); } #rouletteWheel{ width:100%; height:100%; border-radius:50%; position:relative; border:6px solid #fff; box-shadow:0 0 0 3px #005f82, 0 20px 40px rgba(0,0,0,0.35); transition:transform 4.5s cubic-bezier(.15,.85,.15,1); overflow:hidden; } .roulette-segment{ position:absolute; width:50%; height:50%; top:0; left:50%; transform-origin:0% 100%; display:flex; justify-content:flex-end; align-items:flex-start; padding-top:14px; padding-right:10px; } .roulette-segment span{ display:block; width:76px; font-family:'Outfit',sans-serif; font-weight:700; font-size:11px; line-height:1.25; color:#fff; text-align:right; } .roulette-hub{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; border-radius:50%; background:#fff; border:4px solid #005f82; z-index:5; display:flex; align-items:center; justify-content:center; font-family:'Outfit',sans-serif; font-weight:800; font-size:12px; color:var(--blue); box-shadow:0 4px 10px rgba(0,0,0,0.25); } #rouletteSpinBtn{ position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; border:none; border-radius:999px; padding:13px 26px; font-family:'Outfit',sans-serif; font-weight:700; font-size:13px; cursor:pointer; box-shadow:0 10px 20px -4px rgba(0,0,0,0.4); transition:transform .15s ease; } #rouletteSpinBtn:hover{ transform:translateX(-50%) translateY(-2px); } #rouletteSpinBtn:disabled{ opacity:0.55; cursor:not-allowed; transform:translateX(-50%); } .roulette-step{ display:none; } .roulette-step.active{ display:flex; flex-direction:column; gap:16px; } .roulette-brand-mark{ font-family:'Outfit',sans-serif; font-weight:700; font-size:12px; color:rgba(255,255,255,0.8); position:absolute; top:20px; left:24px; } /* Zones */ .zones-section { background:#f0f6fa; padding:32px 18px; border-radius:var(--radius); } .zones-pills { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:14px; } .zone-pill { background:#fff; border:1px solid #cde4f0; padding:6px 14px; border-radius:999px; color:#0077a3; font-size:14px; font-weight:500; } /* Footer */ .site-footer { background:var(--blue); color:#fff; padding:30px 20px; text-align:center; margin-top:60px; } .footer-content { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; max-width:1100px; margin:0 auto; gap:12px; } .footer-left { display:flex; align-items:center; gap:10px; font-weight:600; } .footer-logo { height:95px; width:auto; object-fit:contain; } .footer-right a { color:#fff; text-decoration:none; font-size:0.9rem; margin:0 8px; } .footer-bottom { margin-top:14px; font-size:0.8rem; opacity:0.8; } /* WhatsApp */ @keyframes pulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } } /* Sections animation */ section h2 { opacity:0; transform:translateY(20px); transition:opacity 0.6s ease,transform 0.6s ease; } section.visible h2 { opacity:1; transform:translateY(0); } /* ── Section éco-responsable ── */ .eco-section { background:#fff; border-radius:var(--radius); padding:32px; box-shadow:0 10px 30px rgba(3,44,61,0.06); margin:36px 0; } .eco-header { display:flex; align-items:center; gap:14px; margin-bottom:8px; } .eco-header h2 { margin:0; text-align:left; color:#2e7d32; } .eco-badge { display:inline-flex; align-items:center; gap:6px; background:#e8f5e9; color:#2e7d32; border:1px solid #c8e6c9; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; } .eco-intro { font-size:15px; color:#555; line-height:1.7; margin:0 0 28px; } .eco-steps { display:grid; grid-template-columns:1fr 32px 1fr 32px 1fr; gap:10px; align-items:stretch; } @media(max-width:680px){ .eco-steps{ grid-template-columns:1fr; } .eco-arrow{ transform:rotate(90deg); justify-self:center; } } .eco-step { background:#f9fdf9; border-radius:14px; padding:22px 18px; text-align:center; border:1px solid #e0f0e0; display:flex; flex-direction:column; align-items:center; } .eco-step-icon { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:26px; } .eco-icon-blue { background:linear-gradient(135deg,rgba(0,119,163,0.1),rgba(30,136,229,0.08)); } .eco-icon-green { background:linear-gradient(135deg,rgba(46,125,50,0.12),rgba(102,187,106,0.08)); } .eco-icon-grey { background:linear-gradient(135deg,rgba(100,100,100,0.1),rgba(150,150,150,0.06)); } .eco-step h3 { font-size:15px; font-weight:700; margin:0 0 6px; color:#222; } .eco-step p { font-size:13px; color:#666; margin:0; line-height:1.5; } .eco-arrow { display:flex; align-items:center; justify-content:center; font-size:22px; color:#a5d6a7; font-weight:300; } .eco-footer { margin-top:20px; background:#f1f8f1; border-radius:10px; padding:14px 18px; display:flex; align-items:center; gap:12px; } .eco-footer p { margin:0; font-size:14px; color:#2e7d32; line-height:1.5; } @media(max-width:600px){ .eco-arrow{ transform:rotate(90deg); } } /* ── Menu hamburger mobile ── */ .hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:6px; } .hamburger span { display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:all 0.3s; } .hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); } .hamburger.open span:nth-child(2) { opacity:0; } .hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); } .mobile-menu { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:var(--blue); z-index:9999; flex-direction:column; align-items:center; justify-content:center; gap:28px; } .mobile-menu.open { display:flex; } .mobile-menu a { color:#fff; text-decoration:none; font-size:22px; font-weight:600; opacity:0.9; } .mobile-menu a:hover { opacity:1; } .mobile-menu a.cta { background:var(--accent,#e63946); padding:14px 32px; border-radius:999px; } .mobile-menu-close { position:absolute; top:20px; right:20px; background:none; border:none; color:#fff; font-size:28px; cursor:pointer; } @media(max-width:640px) { .hamburger { display:flex; } nav a:not(.cta) { display:none !important; } nav a.cta { display:none !important; } } @media(min-width:641px) { nav a { display:inline-flex !important; } } /* Grille 4 cartes centrée */ .services-4 { display:grid; gap:16px; grid-template-columns:repeat(4,1fr); justify-items:center; } @media(max-width:900px){ .services-4{ grid-template-columns:repeat(2,1fr); } } @media(max-width:480px){ .services-4{ grid-template-columns:1fr; } } /* ── Bandeau défilant recyclerie ── */ .ticker-wrap { background: linear-gradient(135deg, #1b5e20, #2e7d32); overflow: hidden; white-space: nowrap; padding: 10px 0; border-bottom: 2px solid #43A047; position: relative; z-index: 99; margin-top: 0; width: 100%; } .ticker-wrap::before, .ticker-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; } .ticker-wrap::before { left: 0; background: linear-gradient(to right, #1b5e20, transparent); } .ticker-wrap::after { right: 0; background: linear-gradient(to left, #1b5e20, transparent); } .ticker-track { display: inline-flex; width: max-content; animation: ticker-scroll 28s linear infinite; will-change: transform; } .ticker-track:hover { animation-play-state: paused; } .ticker-item { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 14px; font-weight: 600; padding: 0 50px; flex-shrink: 0; } .ticker-item a { color: #a5d6a7; text-decoration: none; font-weight: 700; border-bottom: 1px solid rgba(165,214,167,0.4); padding-bottom: 1px; transition: color 0.2s; } .ticker-item a:hover { color: #fff; border-color: #fff; } .ticker-dot { display: inline-block; width: 6px; height: 6px; background: #69f0ae; border-radius: 50%; flex-shrink: 0; } @keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ── Typographie haut de page ── */ header, header * { font-family: 'Outfit', 'Poppins', sans-serif; } .brand-name { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -0.5px; } .brand-sub { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 15px; } nav a { font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 16px; } .hero h1 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(2.2rem, 8.5vw, 5.8rem); letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 0; } .hero h2 { font-family: 'Outfit', sans-serif; font-weight: 400; letter-spacing: -0.2px; font-size: 22px; } .hero p { font-family: 'Outfit', sans-serif; font-weight: 300; } .hero-cta { font-family: 'Outfit', sans-serif; font-weight: 700; } .eyebrow { font-family: 'Outfit', sans-serif; font-weight: 500; } .price-badge { font-family: 'Outfit', sans-serif; } .ticker-item { font-family: 'Outfit', sans-serif; } /* ── Mini badge Google hero ── */ .google-hero-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.12); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; padding: 8px 18px; margin-top: 14px; text-decoration: none; transition: background 0.2s; } .google-hero-badge:hover { background: rgba(255,255,255,0.22); } .google-hero-badge .g-logo { font-size: 16px; } .google-hero-badge .g-stars { color: #FFD700; font-size: 14px; letter-spacing: 1px; } .google-hero-badge .g-text { color: #fff; font-size: 13px; font-weight: 600; } .google-hero-badge .g-count { color: rgba(255,255,255,0.75); font-size: 12px; } /* ── Pop-up d'annonce (auparavant un