/** * Born To Clean - Prestation Pages CSS * Styles spécifiques pour les pages de prestation */  /* ============================================ HERO PRESTATION ============================================ */ .hero-prestation{ position:relative; min-height:500px; display:flex; align-items:center; background-color:#1a1a2e; background-size:cover; background-position:center; background-repeat:no-repeat; padding:var(--spacing-xxl) 0; overflow:hidden;}  .hero-prestation::before{ content:''; position:absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.5); z-index:0;}  .hero-prestation .container{ position:relative; z-index:1; text-align:center; max-width:900px;}  .hero-prestation .hero-description{ font-size:1.25rem; color:rgba(255,255,255,0.9); margin-bottom:var(--spacing-lg); max-width:700px; margin-left:auto; margin-right:auto;}  .breadcrumb{ font-family:var(--font-heading); font-size:13px; color:rgba(255,255,255,0.7); margin-bottom:var(--spacing-md); display:flex; justify-content:center; align-items:center; gap:8px;}  .breadcrumb a{ color:rgba(255,255,255,0.7); text-decoration:none; transition:color 0.3s ease;}  .breadcrumb a:hover{color:var(--color-accent);}  .hero-prestation h1{ color:var(--color-background); margin-bottom:var(--spacing-md);}  .hero-prestation h1 span{color:var(--color-accent);}  .hero-prestation .subtitle{ font-family:var(--font-heading); font-size:0.875rem; font-weight:600; text-transform:uppercase; letter-spacing:2px; color:var(--color-accent); margin-bottom:var(--spacing-xs);}  .hero-prestation .btn-primary, .hero-prestation .btn-accent{ padding:16px 40px; font-size:15px;}  /* ============================================ BANNIÈRE URGENCE ============================================ */ .urgence-banner{ background:linear-gradient(135deg,#e07800 0%,var(--color-accent) 100%); padding:var(--spacing-md) 0; box-shadow:0 4px 20px rgba(255,140,0,0.2);}  .urgence-banner .container{ display:flex; align-items:center; justify-content:space-between; gap:var(--spacing-md); flex-wrap:wrap;}  .urgence-title{ display:flex; align-items:center; gap:12px; font-family:var(--font-heading); font-size:1.125rem; font-weight:700; color:var(--color-background);}  .urgence-title svg{ width:24px; height:24px; stroke:var(--color-background); animation:pulse 2s infinite;}  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.6;}}  .urgence-text{ color:rgba(255,255,255,0.95); font-size:1rem; margin:0;}  .btn-urgence{ display:inline-flex; align-items:center; gap:8px; padding:12px 24px; background-color:var(--color-background); color:var(--color-accent); font-family:var(--font-heading); font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:1px; border-radius:var(--border-radius); text-decoration:none; transition:all 0.3s ease;}  .btn-urgence svg{ width:18px; height:18px; stroke:currentColor; stroke-width:2;}  .btn-urgence:hover{ background-color:var(--color-primary); color:var(--color-background); transform:translateY(-2px); box-shadow:0 4px 12px rgba(30,75,146,0.3);}  /* ============================================ PROTOCOLE SECTION ============================================ */ .protocole-section{ background-color:var(--color-primary); padding:var(--spacing-xxl) 0;}  .protocole-section .section-header{ text-align:center; max-width:800px; margin:0 auto var(--spacing-xl);}   .protocole-section .section-header h2, .protocole-section h2{ color:var(--color-background);}  .protocole-section .section-header p, .protocole-section p{ color:rgba(255,255,255,0.8);}  .protocole-section .subtitle{ color:var(--color-accent);}   .protocole-section h2 span{ color:var(--color-background);}   .protocole-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--spacing-md);}  .protocole-card{ background-color:var(--color-background); padding:var(--spacing-lg); border-radius:var(--border-radius-lg); transition:transform 0.3s ease,box-shadow 0.3s ease;}  .protocole-card:hover{ transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,0.15);}   .protocole-card-icon{ width:56px; height:56px; background-color:var(--color-light-bg); border-radius:var(--border-radius); display:flex; align-items:center; justify-content:center; margin-bottom:var(--spacing-md); transition:all 0.3s ease;}  .protocole-card:hover .protocole-card-icon{ background-color:rgba(30,75,146,0.1);}  .protocole-card-icon svg{ width:28px; height:28px; stroke:var(--color-primary); stroke-width:1.5; fill:none;}   .protocole-card h3{ font-family:var(--font-heading); font-size:1.25rem; font-weight:600; margin-bottom:var(--spacing-sm); color:var(--color-primary);}   .protocole-card > p{ font-size:16px; line-height:1.6; margin-bottom:var(--spacing-md); color:var(--color-text);}   .protocole-list{ list-style:none; padding:0; margin:0 0 var(--spacing-md) 0;}  .protocole-list li{ display:flex; align-items:flex-start; gap:var(--spacing-xs); font-size:15px; line-height:1.5; margin-bottom:var(--spacing-xs); color:var(--color-text);}  .protocole-list li:last-child{ margin-bottom:0;}   .protocole-list li span{ flex:1;}   .protocole-list li svg{ width:16px; height:16px; stroke:var(--color-accent); stroke-width:2; fill:none; flex-shrink:0; margin-top:2px;}   .read-more{ color:var(--color-primary); font-family:var(--font-heading); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:1px; display:inline-flex; align-items:center; gap:8px; transition:all 0.3s ease; text-decoration:none;}  .read-more svg{ width:16px; height:16px; stroke:currentColor; stroke-width:2; fill:none; transition:transform 0.3s ease;}  .read-more:hover{ color:var(--color-accent);}  .read-more:hover svg{ transform:translateX(4px);}  /* ============================================ OUTILS SECTION ============================================ */ .outils-section{ padding:var(--spacing-xxl) 0; background-color:var(--color-light-bg);}  .outils-section .section-header{ text-align:center; max-width:800px; margin:0 auto var(--spacing-xl);}  .outils-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--spacing-md);}  .outils-cta{ text-align:center; margin-top:var(--spacing-xl);}  .outils-cta p{ font-size:16px; color:var(--color-text-light); margin-bottom:var(--spacing-md);}  .outil-card{ background-color:var(--color-background); padding:var(--spacing-lg); border-radius:var(--border-radius-lg); border:1px solid var(--color-border); transition:all 0.3s ease; position:relative; overflow:hidden;}  .outil-card::before{ content:''; position:absolute; top:0; left:0; width:4px; height:0; background-color:var(--color-accent); transition:height 0.3s ease;}  .outil-card:hover{ border-color:var(--color-primary); box-shadow:0 10px 40px rgba(30,75,146,0.1); transform:translateY(-4px);}  .outil-card:hover::before{ height:100%;}  .outil-card-icon{ width:56px; height:56px; background-color:var(--color-light-bg); border-radius:var(--border-radius); display:flex; align-items:center; justify-content:center; margin-bottom:var(--spacing-md); transition:all 0.3s ease;}  .outil-card:hover .outil-card-icon{ background-color:rgba(30,75,146,0.1);}  .outil-card-icon svg{ width:28px; height:28px; stroke:var(--color-primary); stroke-width:1.5; fill:none;}  .outil-card h3{ font-family:var(--font-heading); font-size:1.125rem; font-weight:600; margin-bottom:var(--spacing-sm); color:var(--color-primary);}  .outil-card p{ font-size:16px; line-height:1.6; margin-bottom:0; color:var(--color-text-light);}  /* ============================================ TARIFS SECTION ============================================ */ .tarifs-section{ padding:var(--spacing-xxl) 0; background-color:var(--color-background);}  .tarifs-section .section-header{ text-align:center; max-width:800px; margin:0 auto var(--spacing-xl);}  .tarifs-container{ max-width:800px; margin:0 auto;}  .tarifs-table-container{ background-color:var(--color-background); border-radius:var(--border-radius-lg); overflow:hidden; box-shadow:0 5px 30px rgba(30,75,146,0.08); margin-bottom:var(--spacing-lg);}  .tarifs-table{ width:100%; border-collapse:collapse; min-width:500px;}  .tarifs-section .tarifs-table thead, .tarifs-table thead{ background-color:#1E4B92;}  .tarifs-section .tarifs-table thead tr, .tarifs-table thead tr{ background-color:#1E4B92;}  .tarifs-section .tarifs-table thead tr th, .tarifs-section .tarifs-table thead th, .tarifs-section .tarifs-table th, .tarifs-table thead th, .tarifs-table th{ font-family:var(--font-heading); font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:1px; color:#FFFFFF; background-color:#1E4B92; padding:16px 20px; text-align:left; border-bottom:none;}   .tarifs-table tbody{ background-color:var(--color-background);}  .tarifs-table tbody tr{ background-color:var(--color-background); transition:background-color 0.2s ease;}  .tarifs-table tbody tr:hover{ background-color:var(--color-light-bg);}  .tarifs-table td{ padding:16px 20px; border-bottom:1px solid var(--color-border); font-size:16px; background-color:transparent; vertical-align:middle;}  .tarifs-table tbody tr:last-child td{ border-bottom:none;}   .tarifs-table .surface-type{ font-family:var(--font-heading); font-weight:600; color:var(--color-text); display:block; margin-bottom:2px; line-height:1.2;}  .tarifs-table .surface-size{ font-weight:400; color:var(--color-text-light); font-size:15px; display:block; line-height:1.2; margin-top:0;}   .tarifs-table td br{ display:none;}  .tarifs-table .price{ font-family:var(--font-heading); font-weight:700; font-size:1.25rem; color:var(--color-primary);}   .tarifs-note{ text-align:center; margin-top:var(--spacing-md); font-size:14px; color:var(--color-text-light); font-family:var(--font-heading); font-style:italic;}   .tarifs-inclusions{ background:var(--color-light-bg); border-radius:var(--border-radius-lg); padding:var(--spacing-lg); margin-top:var(--spacing-lg);}  .tarifs-inclusions h4{ font-family:var(--font-heading); font-size:1.125rem; font-weight:600; margin-bottom:var(--spacing-md); color:var(--color-primary);}  .tarifs-inclusions ul{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:var(--spacing-sm);}  .tarifs-inclusions li{ display:flex; align-items:flex-start; gap:var(--spacing-xs); font-size:0.95rem; line-height:1.5;}  .tarifs-inclusions li svg{ width:20px; height:20px; fill:none; stroke:var(--color-success); stroke-width:2; flex-shrink:0; margin-top:2px;}  /* ============================================ POURQUOI SECTION ============================================ */ .pourquoi-section{ padding:var(--spacing-xxl) 0; background-color:var(--color-light-bg);}  .pourquoi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--spacing-xl); align-items:center;}  .pourquoi-image{ border-radius:var(--border-radius-lg); overflow:hidden; box-shadow:0 20px 60px rgba(30,75,146,0.15);}  .pourquoi-image img{ width:100%; height:450px; object-fit:cover; display:block;}  .pourquoi-image .placeholder{ width:100%; height:450px; background:linear-gradient(135deg,var(--color-primary) 0%,#2d5a9e 100%); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.4); font-family:var(--font-heading); font-size:1.25rem;}  .pourquoi-content .subtitle{ color:var(--color-accent); margin-bottom:var(--spacing-xs);}  .pourquoi-content h2{ font-family:var(--font-heading); font-size:clamp(1.75rem,3vw,2.25rem); font-weight:700; margin-bottom:var(--spacing-md); color:var(--color-primary);}  .pourquoi-content h2 span{ color:var(--color-accent);}  .pourquoi-content .content{ margin-bottom:var(--spacing-lg);}  .pourquoi-content .content p{ font-size:1.0625rem; line-height:1.7; margin-bottom:var(--spacing-md); color:var(--color-text);}  .pourquoi-content .content ul{ list-style:none; padding:0; margin:var(--spacing-md) 0;}  .pourquoi-content .content ul li{ position:relative; padding-left:28px; margin-bottom:var(--spacing-xs); font-size:1.0625rem; line-height:1.6;}  .pourquoi-content .content ul li::before{ content:'✓'; position:absolute; left:0; color:var(--color-accent); font-weight:700;}  /* ============================================ FAQ SECTION (Prestation variant) ============================================ */ .faq-prestation{ padding:var(--spacing-xxl) 0; background-color:var(--color-background);}  .faq-prestation .container{ display:grid; grid-template-columns:1fr 1.5fr; gap:var(--spacing-xl); align-items:start;}  .faq-header{ position:sticky; top:calc(var(--header-height) + var(--spacing-md));}  .faq-header .subtitle{ color:var(--color-accent); margin-bottom:var(--spacing-xs);}  .faq-header h2{ font-family:var(--font-heading); font-size:clamp(1.75rem,3vw,2.25rem); font-weight:700; margin-bottom:var(--spacing-md); color:var(--color-primary);}  .faq-header .faq-description, .faq-header p{ font-size:1.0625rem; line-height:1.6; color:var(--color-text-light); margin-bottom:var(--spacing-lg);}   .faq-category, .faq-category-title{ font-family:var(--font-heading); font-size:0.875rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--color-primary); margin:var(--spacing-lg) 0 var(--spacing-sm); padding-bottom:var(--spacing-xs); border-bottom:2px solid var(--color-primary);}  .faq-category:first-of-type, .faq-category-title:first-of-type{ margin-top:0;}  /* Note:Les styles .accordion sont définis dans style.css pour assurer la cohérence entre la page d'accueil et les pages prestations */  /* ============================================ CTA SECTION (Prestation variant) ============================================ */ .cta-section, .cta-prestation{ padding:var(--spacing-xxl) 0; background-color:var(--color-accent); position:relative; overflow:hidden;}  .cta-section::before, .cta-prestation::before{ content:''; position:absolute; top:-50%; right:-10%; width:500px; height:500px; background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%); border-radius:50%; pointer-events:none;}  .cta-section .container, .cta-prestation .container{ position:relative; z-index:1; max-width:900px;}  .cta-section .cta-inner, .cta-prestation .cta-inner{ text-align:center; max-width:700px; margin:0 auto;}  .cta-section .cta-label, .cta-prestation .cta-label{ font-family:var(--font-heading); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:2px; color:rgba(255,255,255,0.9); margin-bottom:var(--spacing-sm); display:block;}  .cta-section h2, .cta-prestation h2{ font-family:var(--font-heading); font-size:clamp(2rem,4vw,2.75rem); font-weight:700; color:var(--color-background); margin-bottom:var(--spacing-md);}  .cta-section h2 span, .cta-prestation h2 span{ color:var(--color-background); display:block; font-style:italic;}  .cta-section p, .cta-prestation p, .cta-section .cta-inner > p, .cta-prestation .cta-inner > p{ color:rgba(255,255,255,0.9); font-size:1.125rem; line-height:1.7; margin-bottom:var(--spacing-lg);}  .cta-section .cta-buttons, .cta-prestation .cta-buttons{ display:flex; justify-content:center; align-items:center; gap:var(--spacing-sm); flex-wrap:wrap; margin-bottom:var(--spacing-lg);}  .cta-section .btn-primary, .cta-prestation .btn-primary{ padding:16px 32px; font-size:14px; background-color:var(--color-primary); color:var(--color-background);}  .cta-section .btn-primary:hover, .cta-prestation .btn-primary:hover{ background-color:#153A73; box-shadow:0 4px 12px rgba(30,75,146,0.4);}  .cta-section .btn-primary svg, .cta-prestation .btn-primary svg{ width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none;}  .cta-section .btn-contact, .cta-prestation .btn-contact{ display:inline-flex; align-items:center; gap:10px; padding:16px 28px; background-color:var(--color-background); border:none; border-radius:var(--border-radius); color:var(--color-primary); font-family:var(--font-heading); font-size:14px; font-weight:600; text-decoration:none; text-transform:uppercase; letter-spacing:1px; transition:all 0.3s ease;}  .cta-section .btn-contact:hover, .cta-prestation .btn-contact:hover{ background-color:var(--color-light-bg); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.1);}  .cta-section .btn-contact svg, .cta-prestation .btn-contact svg{ width:18px; height:18px; stroke:currentColor; stroke-width:2; fill:none;}  .cta-section .cta-reassurance, .cta-prestation .cta-reassurance{ display:flex; justify-content:center; align-items:center; gap:var(--spacing-lg); flex-wrap:wrap;}  .cta-section .reassurance-item, .cta-prestation .reassurance-item{ display:flex; align-items:center; gap:8px; font-family:var(--font-heading); font-size:13px; font-weight:500; color:rgba(255,255,255,0.95);}  .cta-section .reassurance-item svg, .cta-prestation .reassurance-item svg{ width:16px; height:16px; stroke:var(--color-background); stroke-width:2.5; fill:none;}  /* ============================================ RESPONSIVE ============================================ */   @media (min-width:1025px){  body{ font-size:1.0625rem; line-height:1.75;}   .hero-prestation .hero-description{ font-size:1.375rem;}  .hero-prestation .breadcrumb{ font-size:14px;}   .section-header p{ font-size:1.125rem;}   .protocole-card h3{ font-size:1.375rem;}  .protocole-card > p{ font-size:1.0625rem;}  .protocole-list li{ font-size:1rem;}   .outil-card h3{ font-size:1.25rem;}  .outil-card p{ font-size:1.0625rem;}   .tarifs-table th, .tarifs-table td{ font-size:1.0625rem;}  .tarifs-table .price{ font-size:1.375rem;}   .pourquoi-content .content p{ font-size:1.125rem;}   .accordion-header{ font-size:1.0625rem;}  .accordion-content p{ font-size:1.0625rem;}   .cta-section p, .cta-prestation p{ font-size:1.25rem;}   .btn{ font-size:15px;}  .btn-lg{ font-size:16px;}}  @media (max-width:1024px){ .protocole-grid, .outils-grid{ grid-template-columns:repeat(2,1fr);}  .pourquoi-grid{ grid-template-columns:1fr; gap:var(--spacing-lg);}  .pourquoi-image{ order:-1;}  .faq-prestation .container{ grid-template-columns:1fr;}  .faq-header{ position:static; text-align:center;}  .tarifs-inclusions ul{ grid-template-columns:1fr;}  .urgence-banner .container{ justify-content:center; text-align:center;}}  @media (max-width:768px){ .protocole-grid, .outils-grid{ grid-template-columns:1fr;}  .hero-prestation{ min-height:50vh; padding:var(--spacing-lg) 0;}  .hero-prestation h1{ font-size:clamp(1.75rem,5vw,2.5rem);}  .pourquoi-image img, .pourquoi-image .placeholder{ height:300px;}  .faq-category{ text-align:center;}  .tarifs-table-container{ overflow-x:auto;}  .tarifs-table th, .tarifs-table td{ padding:var(--spacing-sm) var(--spacing-md);}  .cta-section .cta-buttons, .cta-prestation .cta-buttons{ flex-direction:column; width:100%;}  .cta-section .btn-primary, .cta-prestation .btn-primary, .cta-section .btn-contact, .cta-prestation .btn-contact{ width:100%; justify-content:center;}  .urgence-banner .container{ flex-direction:column; text-align:center;}  .urgence-title{ justify-content:center;}}  @media (max-width:480px){ .tarifs-table .surface-type{ font-size:14px;}  .tarifs-table .surface-size{ font-size:13px;}  .tarifs-table .price{ font-size:1.125rem;}   .tarifs-table th, .tarifs-table td{ padding:12px 16px;}}  /* ============================================ TABLEAU RESPONSIVE - FORMAT CARDS MOBILE ============================================ */ @media (max-width:600px){  .tarifs-table{ min-width:unset; border:none;}  .tarifs-table thead{ display:none;}  .tarifs-table tbody{ display:flex; flex-direction:column; gap:var(--spacing-sm);}  .tarifs-table tbody tr{ display:flex; flex-direction:column; background-color:var(--color-background); border:1px solid var(--color-border); border-radius:var(--border-radius); padding:var(--spacing-md); box-shadow:0 2px 8px rgba(0,0,0,0.05);}  .tarifs-table tbody tr:hover{ border-color:var(--color-primary); box-shadow:0 4px 12px rgba(30,75,146,0.1);}  .tarifs-table td{ display:flex; justify-content:space-between; align-items:center; padding:var(--spacing-xs) 0; border-bottom:1px solid var(--color-border);}  .tarifs-table td:last-child{ border-bottom:none; padding-top:var(--spacing-sm); margin-top:var(--spacing-xs);}   .tarifs-table td::before{ content:attr(data-label); font-family:var(--font-heading); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.5px; color:var(--color-text-light); flex-shrink:0; margin-right:var(--spacing-sm);}   .tarifs-table td:first-child{ flex-direction:column; align-items:flex-start; gap:2px;}  .tarifs-table td:first-child::before{ display:none;}  .tarifs-table .surface-type{ font-size:16px; margin-bottom:0;}  .tarifs-table .surface-size{ font-size:14px;}   .tarifs-table .price{ font-size:1.375rem; color:var(--color-primary); background-color:var(--color-light-bg); padding:var(--spacing-xs) var(--spacing-sm); border-radius:var(--border-radius-sm);}   .tarifs-table-container{ overflow-x:visible; box-shadow:none; background:transparent;}}