/* ===================================================================== Pompes Funèbres Musulmanes Al Barzakh — Feuille de style unique Charte : sobre, digne, rassurante. Charcoal + or feutré + crème. Polices auto-hébergées (font-display:swap) + fallback système. ===================================================================== */ /* ---------- POLICES D'ORIGINE ---------- Cormorant Garamond (titres) + Inter (texte), chargées via Google Fonts dans le de chaque page (comme le site d'origine). Un repli système est conservé dans --serif / --sans. Pour auto-héberger plus tard : déposer les .woff2 dans assets/fonts/ et réactiver des @font-face ici. */ :root{ /* Couleurs */ --ink:#0E0F11; /* charcoal profond */ --ink-2:#16181B; /* sections sombres */ --ink-3:#1F2226; --cream:#F6F2EA; /* fond clair apaisant */ --cream-2:#FBF8F2; --paper:#FFFFFF; --gold:#B8923C; /* or feutré (texte sur clair) */ --gold-light:#C9A14B; /* or sur fond sombre */ --gold-soft:#E7D6AE; --text:#23262B; /* corps de texte */ --muted:#5C6068; /* texte secondaire */ --muted-dark:#8A8F98; --line:#E4DFD4; /* filets clairs */ --line-dark:#2A2D32; --ok:#2E7D5B; /* Typo */ --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Mesures */ --maxw:1180px; --radius:10px; --radius-lg:16px; --shadow:0 6px 24px rgba(14,15,17,.08); --shadow-lg:0 18px 50px rgba(14,15,17,.16); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;font-family:var(--sans);color:var(--text);background:var(--cream); font-size:17px;line-height:1.7;font-weight:400; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{max-width:100%;height:auto;display:block} a{color:var(--gold);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.18;color:var(--ink);margin:0 0 .5em} h1{font-size:clamp(2.1rem,4.6vw,3.3rem)} h2{font-size:clamp(1.7rem,3.4vw,2.5rem)} h3{font-size:1.3rem} p{margin:0 0 1rem} em{font-style:italic;color:var(--gold)} .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px} /* Accessibilité : skip link + focus visibles */ .skip-link{position:absolute;left:-9999px;top:0;background:var(--gold);color:#fff; padding:12px 18px;z-index:1000;border-radius:0 0 8px 0} .skip-link:focus{left:0} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,summary:focus-visible{ outline:3px solid var(--gold-light);outline-offset:2px;border-radius:4px} /* ---------- BOUTONS ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--sans);font-weight:600;font-size:.98rem;line-height:1;cursor:pointer; padding:14px 22px;border-radius:var(--radius);border:1.5px solid transparent; transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease; text-align:center} .btn:hover{text-decoration:none;transform:translateY(-1px)} .btn-primary{background:var(--gold);color:#fff;border-color:var(--gold)} .btn-primary:hover{background:#a07e30;box-shadow:var(--shadow)} .btn-outline{background:transparent;color:var(--ink);border-color:var(--line)} .btn-outline:hover{border-color:var(--gold);color:var(--gold)} .btn-outline-gold{background:transparent;color:var(--gold-light);border-color:var(--gold-light)} .btn-outline-gold:hover{background:var(--gold-light);color:var(--ink)} .btn-lg{padding:17px 30px;font-size:1.05rem} .btn-block{width:100%} /* ---------- TOP BAR ---------- */ .topbar{background:var(--ink);color:#D8D3C8;font-size:.84rem} .topbar .container{display:flex;justify-content:space-between;align-items:center; gap:16px;min-height:42px;flex-wrap:wrap} .topbar .badges{display:flex;gap:18px;flex-wrap:wrap} .topbar .badges span{opacity:.85} .topbar .right{display:flex;align-items:center;gap:18px} .topbar .right a{color:var(--gold-light)} .topbar .dot{display:inline-block;width:8px;height:8px;border-radius:50%; background:#46c97d;margin-right:7px;box-shadow:0 0 0 0 rgba(70,201,125,.6); animation:pulse 2s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(70,201,125,.5)} 70%{box-shadow:0 0 0 7px rgba(70,201,125,0)}100%{box-shadow:0 0 0 0 rgba(70,201,125,0)}} /* ---------- HEADER ---------- */ .site-header{position:sticky;top:0;z-index:200;background:rgba(246,242,234,.96); backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line)} .site-header .container{display:flex;align-items:center;gap:24px;min-height:74px} .logo{display:flex;align-items:center;gap:12px} .logo:hover{text-decoration:none} .logo-mark{width:42px;height:42px;border-radius:50%;display:grid;place-items:center; background:var(--ink);flex-shrink:0} .logo-text{display:flex;flex-direction:column;line-height:1.1} .lt-name{font-family:var(--serif);font-size:1.45rem;font-weight:600;color:var(--ink)} .lt-tag{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .main-nav{margin-left:auto} .main-nav>ul{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0} .main-nav a{color:var(--ink);font-weight:600;font-size:.96rem;padding:10px 14px; border-radius:8px;display:inline-block} .main-nav a:hover,.main-nav a.active{color:var(--gold);text-decoration:none;background:rgba(184,146,60,.08)} .has-mega{position:relative} .mega{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(8px); background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);padding:20px;min-width:560px;opacity:0;visibility:hidden; transition:opacity .18s ease,transform .18s ease;z-index:50} .has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible; transform:translateX(-50%) translateY(0)} .mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px} .mega-item{display:flex;gap:12px;padding:12px;border-radius:10px;align-items:flex-start} .mega-item:hover{background:var(--cream);text-decoration:none} .mega-icon{color:var(--gold);flex-shrink:0;margin-top:2px} .mega-text strong{display:block;color:var(--ink);font-size:.96rem} .mega-text span{display:block;color:var(--muted);font-size:.82rem;font-weight:400} .mega-footer{display:flex;justify-content:space-between;align-items:center;gap:14px; margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted)} .header-cta{display:flex;align-items:center;gap:12px} .phone-pill{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:50px; background:var(--ink);color:#fff} .phone-pill:hover{text-decoration:none;background:#000} .phone-pill .phone-icon{color:var(--gold-light);display:grid;place-items:center} .phone-text{display:flex;flex-direction:column;line-height:1.1} .phone-text small{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-soft)} .phone-text strong{font-size:1rem} .menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none; cursor:pointer;padding:10px} .menu-toggle span{width:26px;height:2px;background:var(--ink);border-radius:2px;transition:.2s} /* ---------- HERO ---------- */ .hero{background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%);color:var(--cream); padding:72px 0 80px;position:relative;overflow:hidden} .hero::after{content:"";position:absolute;inset:0; background:radial-gradient(900px 380px at 78% 18%,rgba(184,146,60,.16),transparent 60%); pointer-events:none} .hero .container{display:grid;grid-template-columns:1.25fr .9fr;gap:48px;align-items:center; position:relative;z-index:2} .eyebrow-top{display:inline-block;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase; color:var(--gold-light);margin-bottom:18px;font-weight:600} .hero h1{color:var(--cream)} .hero h1 .accent{color:var(--gold-light)} .hero .lead{font-size:1.12rem;color:#D8D3C8;max-width:54ch} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 30px} .hero-trust{display:grid;grid-template-columns:repeat(4,auto);gap:26px} .hero-trust div{display:flex;flex-direction:column} .hero-trust strong{font-family:var(--serif);font-size:1.8rem;color:var(--gold-light)} .hero-trust em{font-style:normal;font-size:1rem} .hero-trust span,.hero-trust div>*:last-child{font-size:.82rem;color:var(--muted-dark)} /* Carte formulaire */ .hero-card{background:var(--paper);color:var(--text);border-radius:var(--radius-lg); padding:26px;box-shadow:var(--shadow-lg)} .hero-card h3{color:var(--ink);margin-bottom:4px} .lead-small{font-size:.9rem;color:var(--muted);margin-bottom:16px} .form-row{margin-bottom:14px} .form-row label{display:block;font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:5px} .form-row input,.form-row select,.form-row textarea{width:100%;padding:12px 14px; border:1.5px solid var(--line);border-radius:8px;font-family:var(--sans);font-size:.95rem; background:var(--cream-2);color:var(--text)} .form-row input:focus,.form-row select:focus,.form-row textarea:focus{ border-color:var(--gold);background:#fff;outline:none} .hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-note{font-size:.76rem;margin-top:12px;color:var(--muted);text-align:center} .form-status{font-size:.9rem;margin-top:12px;padding:10px 12px;border-radius:8px;display:none} .form-status.ok{display:block;background:#e8f5ee;color:#1d6b46} .form-status.err{display:block;background:#fbeaea;color:#a02525} /* ---------- SECTIONS GÉNÉRIQUES ---------- */ section{padding:74px 0} section.alt{background:var(--cream-2)} .section-head{max-width:760px;margin:0 auto 46px;text-align:center} .eyebrow{display:inline-block;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase; color:var(--gold);font-weight:600;margin-bottom:12px} .section-head p{color:var(--muted);font-size:1.05rem} /* Cartes services */ .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg); padding:28px 24px;transition:transform .18s ease,box-shadow .18s ease} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .card-icon{width:52px;height:52px;border-radius:12px;display:grid;place-items:center; background:rgba(184,146,60,.1);color:var(--gold);margin-bottom:16px} .card h3{font-size:1.18rem} .card p{font-size:.94rem;color:var(--muted)} .card-link{font-weight:600;font-size:.9rem} .card-link::after{content:" →"} /* Why us */ .why-us{background:var(--ink);color:var(--cream)} .why-us h2{color:var(--cream)} .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px} .why-item{text-align:center;padding:10px} .why-num{font-family:var(--serif);font-size:2.4rem;color:var(--gold-light);display:block;margin-bottom:6px} .why-num em{font-style:normal;font-size:1.1rem;color:var(--gold-soft)} .why-item h3{color:var(--cream);font-size:1.1rem} .why-item p{color:var(--muted-dark);font-size:.9rem} /* Process */ .process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .process-step{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg); padding:26px 22px;position:relative} .step-num{width:38px;height:38px;border-radius:50%;display:grid;place-items:center; background:var(--gold);color:#fff;font-weight:700;font-family:var(--serif);font-size:1.1rem;margin-bottom:14px} .process-step h3{font-size:1.1rem} .process-step p{font-size:.92rem;color:var(--muted)} /* Zone */ .zone{background:var(--ink-2);color:var(--cream)} .zone h2{color:var(--cream)} .zone .section-head p{color:var(--muted-dark)} .zone-cities{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:880px;margin:0 auto} .zone-cities a{padding:10px 18px;border:1px solid var(--line-dark);border-radius:50px; color:var(--cream);font-size:.92rem;background:rgba(255,255,255,.02)} .zone-cities a:hover{border-color:var(--gold-light);color:var(--gold-light);text-decoration:none} /* Avis (lien neutre, sans note inventée) */ .reviews-cta{text-align:center;max-width:680px;margin:0 auto} .reviews-cta .g-badge{display:inline-flex;align-items:center;gap:10px;padding:14px 22px; border:1px solid var(--line);border-radius:50px;background:var(--paper);font-weight:600;color:var(--ink)} /* FAQ */ .faq-list{max-width:820px;margin:0 auto} .faq-item{border:1px solid var(--line);border-radius:10px;margin-bottom:12px;background:var(--paper)} .faq-item summary{cursor:pointer;padding:18px 22px;font-weight:600;color:var(--ink); list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";font-family:var(--serif);font-size:1.5rem;color:var(--gold); transition:transform .2s} .faq-item[open] summary::after{transform:rotate(45deg)} .faq-answer{padding:0 22px 20px;color:var(--muted);font-size:.96rem} /* CTA band */ .cta-band{background:linear-gradient(120deg,var(--gold) 0%,#a07e30 100%);color:#fff} .cta-band .container{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap} .cta-band h2{color:#fff;margin-bottom:6px} .cta-band p{color:rgba(255,255,255,.9);margin:0} .cta-band .btn-primary{background:#fff;color:var(--gold);border-color:#fff} .cta-band .btn-primary:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .cta-band .btn-outline-gold{color:#fff;border-color:rgba(255,255,255,.7)} .cta-band .btn-outline-gold:hover{background:#fff;color:var(--gold)} /* ---------- CONTENU RICHE (pages internes) ---------- */ .page-hero{background:var(--ink);color:var(--cream);padding:54px 0} .page-hero h1{color:var(--cream)} .page-hero p{color:#D8D3C8;max-width:62ch} .breadcrumb{font-size:.84rem;color:var(--muted-dark);margin-bottom:14px} .breadcrumb a{color:var(--gold-light)} .breadcrumb span{margin:0 6px;opacity:.5} .prose{max-width:760px} .prose.wide{max-width:900px} .prose h2{margin-top:1.6em} .prose h3{margin-top:1.3em;color:var(--ink)} .prose ul{padding-left:1.2em} .prose li{margin-bottom:.4em} .layout-2{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start} .sidebar{position:sticky;top:96px} .side-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg); padding:22px;box-shadow:var(--shadow);margin-bottom:20px} .side-card h3{font-size:1.15rem} .side-card .btn{margin-top:8px} .callout{background:var(--cream-2);border-left:4px solid var(--gold);border-radius:8px; padding:18px 20px;margin:24px 0;font-size:.96rem;color:var(--text)} .service-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:10px} .service-links a{display:block;padding:18px;border:1px solid var(--line);border-radius:12px; background:var(--paper);color:var(--ink);font-weight:600} .service-links a:hover{border-color:var(--gold);color:var(--gold);text-decoration:none} .city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px} .city-grid a{padding:11px 14px;border:1px solid var(--line);border-radius:8px;background:var(--paper); color:var(--ink);font-size:.92rem;text-align:center} .city-grid a:hover{border-color:var(--gold);color:var(--gold);text-decoration:none} .map-embed{border:0;width:100%;height:360px;border-radius:var(--radius-lg);filter:grayscale(.2)} /* ---------- FOOTER ---------- */ .site-footer{background:var(--ink);color:#C9C4B9;padding:60px 0 28px;font-size:.92rem} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:36px;margin-bottom:40px} .footer-logo{font-family:var(--serif);font-size:1.6rem;color:var(--cream);margin-bottom:12px} .site-footer h4{color:var(--gold-light);font-family:var(--sans);font-size:.84rem; letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px} .site-footer ul{list-style:none;margin:0;padding:0} .site-footer li{margin-bottom:9px} .site-footer a{color:#C9C4B9} .site-footer a:hover{color:var(--gold-light)} .footer-about p{color:#9A958B} .footer-bottom{border-top:1px solid var(--line-dark);padding-top:22px;display:flex; justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.84rem;color:#8A857C} .footer-bottom a{color:#8A857C} /* ---------- BOUTON APPEL FLOTTANT ---------- */ .floating-call{position:fixed;bottom:22px;right:22px;z-index:300;width:60px;height:60px; border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center; box-shadow:0 8px 24px rgba(184,146,60,.5);animation:floatPulse 2.4s infinite} .floating-call:hover{background:#a07e30;text-decoration:none} @keyframes floatPulse{0%{box-shadow:0 0 0 0 rgba(184,146,60,.5)} 70%{box-shadow:0 0 0 16px rgba(184,146,60,0)}100%{box-shadow:0 0 0 0 rgba(184,146,60,0)}} /* ---------- RESPONSIVE ---------- */ @media (max-width:980px){ .hero .container{grid-template-columns:1fr;gap:36px} .cards{grid-template-columns:repeat(2,1fr)} .why-grid,.process-grid{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr;gap:28px} .layout-2{grid-template-columns:1fr} .sidebar{position:static} } @media (max-width:760px){ body{font-size:16px} .topbar .badges{display:none} .main-nav{position:fixed;inset:74px 0 auto 0;background:var(--paper);border-bottom:1px solid var(--line); margin:0;max-height:0;overflow:hidden;transition:max-height .3s ease} .main-nav.open{max-height:80vh;overflow:auto;box-shadow:var(--shadow-lg)} .main-nav>ul{flex-direction:column;align-items:stretch;gap:0;padding:8px} .main-nav>ul>li{border-bottom:1px solid var(--line)} .mega{position:static;transform:none;opacity:1;visibility:visible;min-width:0;box-shadow:none; border:none;padding:6px 0 6px 14px;display:none} .has-mega.open .mega{display:block} .mega-grid{grid-template-columns:1fr} .menu-toggle{display:flex;margin-left:auto} .header-cta .btn{display:none} .hero-trust{grid-template-columns:repeat(2,1fr);gap:18px} .cards{grid-template-columns:1fr} .why-grid,.process-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .cta-band .container{flex-direction:column;text-align:center;align-items:center} }